:root { --bg:#0b1420; --panel:#132235; --soft:#1a2c43; --text:#eef4fb; --muted:#a9b7c7; --line:#2a415f; --accent:#d8b56a; --good:#95d5a0; --bad:#ffb2b2; }
* { box-sizing:border-box; }
body { margin:0; font-family:Arial, Helvetica, sans-serif; background:linear-gradient(180deg,#08111b,#0d1724 30%,#0f1b29); color:var(--text); }
.wrap { width:min(1100px,92vw); margin:0 auto; }
.hero { padding:48px 0 24px; border-bottom:1px solid var(--line); }
.eyebrow { color:var(--accent); font-size:.85rem; text-transform:uppercase; letter-spacing:.12em; margin-bottom:8px; }
h1,h2,h3 { margin:0 0 12px; }
.lead { color:var(--muted); max-width:850px; }
.note, .alert { margin-top:12px; padding:12px 14px; border:1px solid var(--line); background:rgba(255,255,255,.03); border-radius:10px; color:var(--muted); }
.alert.fail { color:var(--bad); }
.card { margin:24px 0; padding:24px; background:rgba(19,34,53,.92); border:1px solid var(--line); border-radius:16px; box-shadow:0 10px 32px rgba(0,0,0,.25); }
.card.hidden { display:none; }
.grid { display:grid; gap:16px; }
.grid.two { grid-template-columns:repeat(2,minmax(0,1fr)); }
.grid.three { grid-template-columns:repeat(3,minmax(0,1fr)); }
.grid.four { grid-template-columns:repeat(4,minmax(0,1fr)); }
label span { display:block; margin-bottom:6px; color:var(--muted); font-size:.95rem; }
input, select { width:100%; padding:12px 14px; border-radius:10px; border:1px solid var(--line); background:#0c1826; color:var(--text); }
.panel { background:#102033; border:1px solid var(--line); border-radius:14px; padding:18px; }
.panel.soft { background:var(--soft); }
.actions { display:flex; gap:12px; flex-wrap:wrap; align-items:center; margin-top:18px; }
.actions.split { justify-content:space-between; }
button, .inline-btn, a.secondary, a.primary { text-decoration:none; border:none; cursor:pointer; padding:12px 16px; border-radius:10px; font-weight:700; }
.primary { background:var(--accent); color:#1b2430; }
.secondary, .inline-btn { background:transparent; color:var(--text); border:1px solid var(--line); }
.small-btn { padding:8px 12px; font-size:.85rem; }
.exam-topbar { display:flex; justify-content:space-between; gap:16px; align-items:flex-start; }
.timer-box, .stat { background:#0f1d2f; border:1px solid var(--line); border-radius:12px; padding:14px; }
.progress-wrap { margin:18px 0; }
.progress-bar { width:100%; height:12px; background:#0c1826; border:1px solid var(--line); border-radius:999px; overflow:hidden; }
#progressFill { height:100%; width:0; background:var(--accent); }
.question-card { background:#0f1d2f; border:1px solid var(--line); border-radius:14px; padding:20px; }
.question-meta { display:flex; gap:8px; flex-wrap:wrap; margin-bottom:14px; }
.badge { font-size:.82rem; padding:5px 9px; border-radius:999px; background:#16283e; border:1px solid var(--line); color:var(--muted); }
.options { display:grid; gap:10px; margin-top:14px; }
.option { display:flex; align-items:flex-start; gap:10px; padding:12px; background:#122237; border:1px solid var(--line); border-radius:12px; }
.option input { width:auto; margin-top:2px; }
.stats .stat strong { display:block; font-size:1.5rem; margin-top:4px; }
.pass { color:var(--good); }
.fail { color:var(--bad); }
.muted { color:var(--muted); }
.small { font-size:.88rem; }
.mt16 { margin-top:16px; }
.table-wrap { overflow:auto; }
table { width:100%; border-collapse:collapse; }
th, td { border-bottom:1px solid var(--line); padding:12px 10px; text-align:left; vertical-align:top; }
.filters { display:grid; grid-template-columns:2fr 1fr 1fr 1fr auto; gap:12px; margin-bottom:16px; }
.review-item { padding:12px 0; border-bottom:1px solid var(--line); }
.narrow { max-width:480px; margin-inline:auto; }
.stack > * + * { margin-top:12px; }
.certificate { text-align:center; padding:48px 32px; }
.cert-name { font-size:2rem; font-weight:700; margin:18px 0; color:var(--accent); }
code { color:#ffd98f; }
@media (max-width: 900px) { .grid.two, .grid.three, .grid.four, .filters { grid-template-columns:1fr; } .exam-topbar, .actions.split { flex-direction:column; align-items:stretch; } }
@media print { body { background:white; color:black; } .hero, .actions, .note { display:none !important; } .card, .certificate { border:none; box-shadow:none; background:white; } }

.branded-hero { background: radial-gradient(circle at top right, rgba(216,181,106,.14), transparent 30%), linear-gradient(180deg,#08111b,#0d1724 30%,#0f1b29); }
.brand-ribbon { background: linear-gradient(135deg, rgba(216,181,106,.08), rgba(255,255,255,.02)); }
.brand-block { display:flex; gap:18px; align-items:center; margin-bottom:18px; }
.brand-mark, .cert-seal { width:72px; height:72px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:2rem; font-weight:700; color:#1b2430; background:var(--accent); box-shadow:0 8px 28px rgba(216,181,106,.25); }
.cert-seal { width:110px; height:110px; margin:0 auto 18px; font-size:1.25rem; letter-spacing:.06em; }
.grid.six { grid-template-columns:repeat(6,minmax(0,1fr)); }
.compact-stats .stat strong { font-size:1.25rem; }
.pill { display:inline-block; padding:6px 10px; border-radius:999px; font-size:.82rem; font-weight:700; border:1px solid var(--line); }
.pill-active { color:var(--good); background:rgba(149,213,160,.08); }
.pill-expiring { color:#ffd98f; background:rgba(255,217,143,.08); }
.pill-expired, .pill-remediation { color:var(--bad); background:rgba(255,178,178,.08); }
.action-stack { display:flex; gap:8px; flex-wrap:wrap; }
.badge-export-grid { align-items:center; }
.badge-preview-panel { text-align:center; }
.badge-preview { width:min(100%,420px); background:#09111b; border-radius:24px; border:1px solid var(--line); padding:12px; }
.meta-list { display:grid; gap:10px; }
.meta-list div, .cert-grid div { padding:10px 12px; border:1px solid var(--line); border-radius:12px; background:#0f1d2f; }
.meta-list span, .cert-grid span, .signature-box span { display:block; color:var(--muted); font-size:.84rem; margin-bottom:4px; }
.meta-list strong, .cert-grid strong, .signature-box strong { display:block; }
.branded-certificate { background: radial-gradient(circle at top center, rgba(216,181,106,.09), transparent 32%), rgba(19,34,53,.97); }
.cert-program { font-size:1.05rem; color:var(--muted); margin-bottom:20px; }
.certificate-stats { margin:24px 0; }
.cert-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px; text-align:left; margin:28px 0; }
.signature-row { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:18px; margin-top:22px; }
.signature-box { padding:16px; border-top:2px solid var(--accent); text-align:left; background:#0f1d2f; border-radius:8px; }
.wide-filters { grid-template-columns:2fr 1fr 1fr 1fr 1fr auto; }
@media (max-width: 900px) { .grid.six, .cert-grid, .signature-row, .wide-filters { grid-template-columns:1fr; } .brand-block { flex-direction:column; align-items:flex-start; } }


.admin-badge-thumb { width:72px; height:auto; border-radius:12px; border:1px solid var(--line); background:#09111b; display:block; }
.cert-header-grid { display:grid; grid-template-columns:120px 1fr; gap:24px; align-items:center; justify-items:center; margin-bottom:8px; }
.cert-badge-panel { text-align:center; }
.certificate-badge { width:min(260px,100%); background:#09111b; border-radius:24px; border:1px solid var(--line); padding:10px; }
@media (max-width: 900px) { .cert-header-grid { grid-template-columns:1fr; } }