* { box-sizing: border-box; }
:root { --brand:#1f5f99; --brand-dark:#153d63; --accent:#0d9488; --success:#15803d; --danger:#b91c1c; --ink:#172033; --muted:#667085; --line:#d8dee8; --paper:#fff; --bg:#eef2f7; }
html { min-height: 100%; }
body { margin:0; min-height:100%; color:var(--ink); background:radial-gradient(circle at top right,rgba(13,148,136,.12),transparent 32rem),linear-gradient(180deg,#f7f9fc,var(--bg)); font-family:Tahoma,Arial,sans-serif; }
.site-header { background:linear-gradient(135deg,#fff,#f4f8fb 52%,#e9f5f3); border-bottom:1px solid rgba(31,95,153,.14); box-shadow:0 16px 38px rgba(23,32,51,.08); }
.site-header-inner { width:100%; max-width:1150px; margin:auto; padding:20px 14px; display:flex; align-items:center; justify-content:space-between; gap:22px; }
.brand-block { display:flex; align-items:center; gap:18px; min-width:0; }
.brand-logo-wrap { width:500px; min-width:500px; max-width:100%; height:auto; aspect-ratio:10/3; padding:7px 12px; background:#fff; border:1px solid rgba(31,95,153,.12); border-radius:8px; box-shadow:0 8px 24px rgba(23,32,51,.08); }
.brand-logo-wrap img { width:100%; height:100%; object-fit:contain; }
.brand-kicker { margin:0 0 5px; color:var(--accent); font-size:13px; font-weight:700; }
h1 { margin:0; color:var(--brand-dark); font-size:25px; }
.brand-subtitle { margin:7px 0 0; color:var(--muted); font-size:14px; }
.header-meta { min-width:154px; padding:12px 14px; text-align:center; color:var(--brand-dark); background:rgba(255,255,255,.76); border:1px solid rgba(31,95,153,.13); border-radius:8px; }
.header-meta strong,.header-meta span { display:block; }.header-meta strong { margin-bottom:3px; font-size:24px; }.header-meta span { color:var(--muted); font-size:12px; font-weight:700; }
.page { width:100%; max-width:1150px; margin:28px auto; padding:0 10px; }
.search-card,.certificate-card { margin-bottom:24px; background:var(--paper); border:1px solid rgba(216,222,232,.88); border-radius:8px; box-shadow:0 16px 40px rgba(23,32,51,.08); }
.search-card { padding:24px; }.certificate-card { padding:28px; overflow:hidden; }
.search-heading { display:flex; align-items:center; justify-content:space-between; gap:16px; margin-bottom:18px; color:var(--muted); font-weight:700; }
.search-heading h2 { margin:0; color:var(--brand-dark); font-size:21px; }.search-heading span { color:var(--accent); }
form { display:grid; grid-template-columns:minmax(0,1fr) 130px 160px auto; gap:12px; }
.hide-result-filters { grid-template-columns:minmax(0,1fr) auto; }
.hide-result-filters select { display:none; }
input,select { width:100%; padding:15px 16px; border:1px solid var(--line); border-radius:8px; color:var(--ink); background:#fbfcfe; font-size:18px; text-align:center; outline:none; }
input:focus,select:focus { border-color:var(--brand); box-shadow:0 0 0 4px rgba(31,95,153,.12); background:#fff; }
button { padding:15px 24px; border:0; border-radius:8px; color:#fff; background:var(--brand); font-size:16px; font-weight:700; cursor:pointer; box-shadow:0 10px 22px rgba(31,95,153,.18); }
button:disabled { opacity:.65; cursor:wait; }
.message { margin:15px 0 0; padding:14px; text-align:center; border-radius:8px; font-weight:700; }.error { color:var(--danger); background:#fff1f2; border:1px solid #fecdd3; }.notice { color:var(--brand); background:#eff6ff; border:1px solid #bfdbfe; }
.certificate-sheet { position:relative; padding:24px; background:#fff; border:2px solid var(--brand-dark); border-radius:8px; }
.certificate-sheet::before { content:""; position:absolute; inset:8px; border:1px solid rgba(31,95,153,.22); border-radius:5px; pointer-events:none; }
.certificate-header { position:relative; z-index:1; display:grid; grid-template-columns:500px minmax(0,1fr); align-items:center; gap:24px; padding-bottom:18px; margin-bottom:18px; border-bottom:2px solid rgba(31,95,153,.18); text-align:center; }
.certificate-header img { width:500px; max-width:100%; height:auto; aspect-ratio:10/3; justify-self:end; object-fit:contain; }
.certificate-title-box { width:100%; min-width:0; min-height:150px; padding:24px 12px; display:flex; flex-direction:column; align-items:center; justify-content:center; overflow:hidden; color:var(--brand-dark); background:#f8fafc; border:1px solid var(--line); border-radius:8px; }.certificate-title-box strong,.certificate-title-box span { display:block; max-width:100%; white-space:nowrap; line-height:1.35; }.certificate-title-box strong { margin-bottom:12px; font-size:clamp(17px,2.2vw,25px); }.certificate-title-box span { font-size:clamp(19px,2.5vw,29px); font-weight:700; }
.info-grid { position:relative; z-index:1; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; margin-bottom:18px; }
.info-item { min-height:76px; padding:16px 12px; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; background:#fff; border:1px solid var(--line); border-radius:8px; }.info-item span { margin-bottom:7px; color:var(--muted); font-size:12px; font-weight:700; }.info-item strong { font-size:16px; line-height:1.45; }.info-item small { margin-top:5px; color:var(--muted); }
.status-pass-card { color:var(--success); background:#f0fdf4; border-color:#bbf7d0; }.status-card { color:var(--danger); background:#fff7f7; border-color:#fecaca; }
.subjects-wrap { position:relative; z-index:1; overflow-x:auto; border:1px solid var(--line); }
table { width:100%; border-collapse:collapse; }.subjects-wrap th,.subjects-wrap td { padding:12px 9px; text-align:center; border:1px solid var(--line); }.subjects-wrap th { color:#fff; background:var(--brand-dark); font-size:13px; }.subjects-wrap td { font-size:14px; }.subject-name { font-weight:700; }.pass-row { background:#fbfffc; }.fail-row { background:#fffafa; }.mark-pass { color:var(--success); font-weight:700; }.mark-fail { color:var(--danger); font-weight:700; }
.badge { display:inline-block; min-width:62px; padding:5px 9px; border-radius:5px; font-size:12px; font-weight:700; }.badge-pass { color:#166534; background:#dcfce7; }.badge-fail { color:#991b1b; background:#fee2e2; }.summary-row td { background:#f8fafc; font-weight:700; }
.certificate-footer { position:relative; z-index:1; margin-top:18px; padding-top:12px; color:var(--muted); border-top:1px solid var(--line); text-align:center; font-size:12px; }
.certificate-actions { display:flex; flex-wrap:wrap; justify-content:center; gap:12px; padding-top:20px; }.certificate-actions button { min-width:210px; }.secondary-action { color:var(--brand); background:#fff; border:1px solid var(--brand); box-shadow:none; }
.footer { padding:8px 15px 28px; color:var(--muted); text-align:center; font-size:13px; line-height:1.8; }
@media(max-width:850px){ .site-header-inner,.brand-block { width:100%; flex-direction:column; text-align:center; }.brand-logo-wrap { width:100%; min-width:0; max-width:500px; }.header-meta { width:100%; }.search-heading { align-items:flex-start; flex-direction:column; }.certificate-header { grid-template-columns:minmax(0,1fr); }.certificate-header img { width:100%; max-width:500px; justify-self:center; }.info-grid { grid-template-columns:1fr 1fr; } form { grid-template-columns:1fr 1fr; } form input,form button { grid-column:1/-1; } }
@media(max-width:560px){ .page { margin:16px auto; padding:0 7px; }.search-card,.certificate-card { padding:14px; }.certificate-sheet { padding:16px 10px; }.certificate-title-box { min-height:110px; padding:16px 6px; }.info-grid { grid-template-columns:1fr; } form,.hide-result-filters { grid-template-columns:1fr; } form input,form button { grid-column:auto; }.subjects-wrap th,.subjects-wrap td { padding:8px 5px; font-size:11px; }.certificate-actions { flex-direction:column; }.certificate-actions button { width:100%; } }
@media print { body { background:#fff; }.site-header,.search-card,.footer,.certificate-actions { display:none!important; }.page { max-width:none; margin:0; padding:0; }.certificate-card { margin:0; padding:0; border:0; box-shadow:none; }.certificate-sheet { min-height:270mm; border-radius:0; }.subjects-wrap { overflow:visible; } tr { break-inside:avoid; } }