:root{
  --navy:#101F33; --navy-3:#1F3F62;
  --paper:#F6F4EE; --paper-2:#FFFFFF; --line:#E1DCCC;
  --ink:#1B2027; --ink-soft:#5B6270;
  --accent:#2B6E8E; --accent-dark:#1E4F66; --accent-tint:#DCE9EE;
  --gold:#A2793F; --gold-tint:#F1E6D2;
  --valid:#1F7A4D; --valid-tint:#E3F2E8;
  --revoked:#B23A2E; --revoked-tint:#FBE7E4;
  --expired:#9C6B0E; --expired-tint:#FBEED8;
  --pending:#5B4E8C; --pending-tint:#EAE6F5;
  --radius-s:6px; --radius-m:10px; --radius-l:16px;
  --shadow: 0 1px 2px rgba(16,31,51,.06), 0 8px 24px rgba(16,31,51,.08);
}
*{box-sizing:border-box;}
html,body{height:100%;}
body{
  margin:0; background:var(--paper); color:var(--ink);
  font-family:'IBM Plex Sans', -apple-system, BlinkMacSystemFont, sans-serif;
  font-size:15px; line-height:1.5;
}
h1,h2,h3,.serif{ font-family:'Source Serif 4', Georgia, serif; letter-spacing:-.01em; }
a{ color:var(--accent); }
.mono{ font-family:'IBM Plex Mono', ui-monospace, monospace; letter-spacing:.02em; }
.topline{ height:3px; background:linear-gradient(90deg, var(--gold), var(--accent) 60%, var(--navy-3)); }

.btn{ display:inline-flex; align-items:center; justify-content:center; gap:.5em; padding:.62em 1.1em; border-radius:var(--radius-s); border:1px solid transparent; font-size:.92rem; font-weight:600; cursor:pointer; text-decoration:none; }
.btn-primary{ background:var(--accent-dark); color:#fff; }
.btn-primary:hover{ filter:brightness(1.1); }
.btn-ghost{ background:transparent; border-color:var(--line); color:var(--ink); }
.btn-ghost:hover{ background:var(--accent-tint); }
.btn-danger{ background:transparent; border-color:var(--revoked); color:var(--revoked); }
.btn-danger:hover{ background:var(--revoked-tint); }
.btn-gold{ background:var(--gold); color:#20180A; }
.btn-block{ width:100%; }
.btn-sm{ padding:.4em .8em; font-size:.82rem; }

label{ display:block; font-size:.82rem; font-weight:600; color:var(--ink-soft); margin:0 0 .35em; }
input,select,textarea{ width:100%; padding:.62em .75em; border:1px solid var(--line); border-radius:var(--radius-s); background:var(--paper-2); color:var(--ink); font-size:.94rem; font-family:inherit; }
.field{ margin-bottom:1.1em; }
.grid-2{ display:grid; grid-template-columns:1fr 1fr; gap:0 1.2em; }
@media (max-width:640px){ .grid-2{ grid-template-columns:1fr; } }
.hint{ font-size:.78rem; color:var(--ink-soft); margin-top:.3em; }
.error-text{ font-size:.85rem; color:var(--revoked); background:var(--revoked-tint); padding:.6em .9em; border-radius:var(--radius-s); }
.success-text{ font-size:.85rem; color:var(--valid); background:var(--valid-tint); padding:.6em .9em; border-radius:var(--radius-s); }

.badge{ display:inline-flex; align-items:center; gap:.45em; padding:.3em .75em; border-radius:999px; font-size:.78rem; font-weight:600; }
.badge .dot{ width:7px; height:7px; border-radius:50%; }
.badge-valid{ background:var(--valid-tint); color:var(--valid); } .badge-valid .dot{ background:var(--valid); }
.badge-revoked{ background:var(--revoked-tint); color:var(--revoked); } .badge-revoked .dot{ background:var(--revoked); }
.badge-expired{ background:var(--expired-tint); color:var(--expired); } .badge-expired .dot{ background:var(--expired); }
.badge-pending{ background:var(--pending-tint); color:var(--pending); } .badge-pending .dot{ background:var(--pending); }

.gw-header{ background:var(--navy); color:#F3F1E9; padding:2.4em 1.4em 2.8em; }
.gw-header-inner{ max-width:760px; margin:0 auto; position:relative; }
.gw-brand{ display:flex; align-items:center; gap:.6em; font-size:.85rem; color:#C9CFDA; margin-bottom:1.6em; }
.gw-title{ font-size:1.9rem; font-weight:600; margin:0 0 .5em; max-width:16ch; }
.gw-sub{ color:#B9C3D2; max-width:46ch; font-size:.98rem; margin:0; }
.gw-nav-staff{ position:absolute; top:0; right:0; font-size:.82rem; text-align:right; max-width:60%; }
@media (max-width:640px){ .gw-nav-staff{ position:static; display:block; margin-bottom:1em; max-width:none; text-align:left; } }
.gw-nav-staff a{ color:#C9CFDA; }
.gw-body{ max-width:760px; margin:-1.6em auto 4em; padding:0 1.4em; }
.lookup-card{ background:var(--paper-2); border:1px solid var(--line); border-radius:var(--radius-l); box-shadow:var(--shadow); padding:1.5em; display:flex; gap:.7em; flex-wrap:wrap; }
.lookup-card input{ flex:1 1 260px; font-family:'IBM Plex Mono', monospace; }
.result-card{ margin-top:1.6em; background:var(--paper-2); border:1px solid var(--line); border-radius:var(--radius-l); box-shadow:var(--shadow); overflow:hidden; }
.result-banner{ padding:1.1em 1.5em; display:flex; align-items:center; gap:.8em; font-weight:600; }
.result-banner.valid{ background:var(--valid-tint); color:var(--valid); }
.result-banner.revoked{ background:var(--revoked-tint); color:var(--revoked); }
.result-banner.expired{ background:var(--expired-tint); color:var(--expired); }
.result-banner.notfound{ background:var(--paper); color:var(--ink-soft); }
.result-body{ padding:1.6em; display:grid; grid-template-columns:1fr auto; gap:1.6em; align-items:start; }
@media (max-width:560px){ .result-body{ grid-template-columns:1fr; } }
.dl{ display:grid; grid-template-columns:auto 1fr; gap:.5em 1.2em; font-size:.92rem; }
.dl dt{ color:var(--ink-soft); } .dl dd{ margin:0; font-weight:600; }
.qr-block{ text-align:center; }
.qr-block img{ border:1px solid var(--line); border-radius:var(--radius-s); padding:8px; background:#fff; }
.ref-code{ font-family:'IBM Plex Mono', monospace; font-size:1.05rem; letter-spacing:.05em; margin-top:.6em; display:block; }
.empty-hint{ color:var(--ink-soft); font-size:.9rem; margin-top:1.2em; text-align:center; }

.auth-wrap{ min-height:100vh; display:flex; align-items:center; justify-content:center; background:var(--navy); padding:2em 1.2em; }
.auth-card{ width:100%; max-width:380px; background:var(--paper-2); border-radius:var(--radius-l); box-shadow:var(--shadow); padding:2em; }
.auth-card h1{ font-size:1.3rem; margin:0 0 .2em; }
.demo-creds{ margin-top:1.2em; padding:.8em 1em; background:var(--accent-tint); border-radius:var(--radius-s); font-size:.8rem; color:var(--accent-dark); }

.shell{ display:flex; min-height:100vh; }
.sidebar{ width:236px; flex:none; background:var(--navy); color:#D7DCE6; padding:1.4em 1em; display:flex; flex-direction:column; gap:1.6em; }
.sidebar-brand .name{ font-weight:600; color:#fff; font-size:.95rem; }
.sidebar-brand .role{ font-size:.72rem; color:#9AA6BA; }
.nav-group{ display:flex; flex-direction:column; gap:.15em; }
.nav-label{ font-size:.7rem; text-transform:uppercase; color:#7C879C; padding:.4em .8em .3em; letter-spacing:.06em; }
.nav-item{ display:flex; align-items:center; gap:.65em; padding:.55em .8em; border-radius:var(--radius-s); color:#D7DCE6; text-decoration:none; font-size:.88rem; cursor:pointer; border:none; background:none; text-align:left; width:100%; }
.nav-item:hover{ background:rgba(255,255,255,.06); }
.nav-item.active{ background:var(--navy-3); color:#fff; font-weight:600; }
.sidebar-foot{ margin-top:auto; }
.main{ flex:1; min-width:0; padding:2em 2.2em 4em; }
@media (max-width:820px){
  .shell{ flex-direction:column; }
  .sidebar{ width:100%; flex-direction:row; align-items:center; overflow-x:auto; }
  .sidebar-brand{ display:none; }
  .nav-group{ flex-direction:row; }
  .nav-label{ display:none; }
  .sidebar-foot{ margin-top:0; margin-left:auto; }
  .main{ padding:1.4em 1.1em 3em; }
}
.page-head{ display:flex; align-items:flex-start; justify-content:space-between; gap:1em; margin-bottom:1.4em; flex-wrap:wrap; }
.page-head h2{ margin:0 0 .2em; font-size:1.4rem; }
.page-head .sub{ color:var(--ink-soft); font-size:.88rem; margin:0; }
.stat-row{ display:grid; grid-template-columns:repeat(4,1fr); gap:1em; margin-bottom:1.8em; }
@media (max-width:760px){ .stat-row{ grid-template-columns:1fr 1fr; } }
.stat-card{ background:var(--paper-2); border:1px solid var(--line); border-radius:var(--radius-m); padding:1.1em 1.2em; }
.stat-card .num{ font-size:1.9rem; font-weight:600; line-height:1; }
.stat-card .lab{ color:var(--ink-soft); font-size:.8rem; margin-top:.4em; }
.panel{ background:var(--paper-2); border:1px solid var(--line); border-radius:var(--radius-m); box-shadow:var(--shadow); }
.panel-pad{ padding:1.4em; }
table.ledger{ width:100%; border-collapse:collapse; font-size:.88rem; }
table.ledger th{ text-align:left; font-size:.72rem; text-transform:uppercase; letter-spacing:.05em; color:var(--ink-soft); border-bottom:1px solid var(--line); padding:.7em .9em; }
table.ledger td{ padding:.75em .9em; border-bottom:1px solid var(--line); vertical-align:middle; }
table.ledger tr:last-child td{ border-bottom:none; }
table.ledger tr:hover td{ background:var(--accent-tint); }
.table-scroll{ overflow-x:auto; }
.id-pill{ font-family:'IBM Plex Mono',monospace; font-size:.78rem; color:var(--ink-soft); }
.doc-list{ list-style:none; padding:0; margin:.4em 0 0; font-size:.85rem; }
.doc-list li{ padding:.35em 0; color:var(--ink-soft); }
.divider{ height:1px; background:var(--line); margin:1.4em 0; border:none; }

.cert-wrap{ max-width:720px; margin:2em auto; background:#fff; border:1px solid var(--line); padding:2.5em; }
.cert-head{ display:flex; justify-content:space-between; align-items:flex-start; border-bottom:2px solid var(--navy); padding-bottom:1em; margin-bottom:1.4em; }
.cert-head h1{ font-size:1.3rem; margin:0; }
.cert-head .sub{ color:var(--ink-soft); font-size:.85rem; }
.seal{ text-align:center; font-size:.65rem; color:var(--gold); border:2px solid var(--gold); border-radius:50%; width:64px; height:64px; display:flex; flex-direction:column; align-items:center; justify-content:center; font-weight:700; }
.cert-actions{ text-align:center; margin:1.4em 0; }
@media print{ .no-print{ display:none !important; } .cert-wrap{ border:none; margin:0; max-width:none; } }