/* =====================================================================
   Certificate Holder Dashboard — "Digital Identity Hub"
   Premium theme layer. Rides on style.css variables (light + dark aware).
   No markup changes required: every selector below already exists.
   ===================================================================== */

:root {
  --hub-radius: 18px;
  --hub-radius-sm: 13px;
  --hub-ring: 0 0 0 1px rgba(231,181,74,.0);
  --hub-shadow: 0 1px 2px rgba(13,28,64,.04), 0 8px 24px -10px rgba(13,28,64,.18);
  --hub-shadow-lg: 0 24px 60px -24px rgba(8,20,56,.45);
  --hub-glass: rgba(255,255,255,.72);
  --hub-gold-grad: linear-gradient(135deg,#f6dc96 0%,#e7b54a 52%,#cf9a2c 100%);
  --hub-line: rgba(13,28,64,.08);
}
html[data-theme="dark"] {
  --hub-glass: rgba(18,28,50,.66);
  --hub-shadow: 0 1px 2px rgba(0,0,0,.4), 0 14px 34px -14px rgba(0,0,0,.7);
  --hub-line: rgba(255,255,255,.08);
}

@keyframes hubUp { from { opacity:0; transform:translateY(12px); } to { opacity:1; transform:none; } }
@keyframes hubFade { from { opacity:0; } to { opacity:1; } }
@media (prefers-reduced-motion: reduce) { * { animation:none !important; } }

/* ---------------------------------------------------------------------
   Auth split screen
--------------------------------------------------------------------- */
.auth-body { min-height:100vh; }
.auth-split { display:grid; grid-template-columns: 1.05fr 1fr; min-height:100vh; }
.auth-aside { position:relative; padding:54px 56px; color:#eef3ff; display:flex; flex-direction:column; gap:28px; overflow:hidden;
  background:
    radial-gradient(900px 500px at 88% -8%, rgba(40,86,180,.55) 0, transparent 60%),
    radial-gradient(700px 480px at -10% 110%, rgba(231,181,74,.20) 0, transparent 55%),
    linear-gradient(155deg,#0a1733 0%,#0c1f47 55%,#0a1733 100%); }
.auth-aside::after { content:""; position:absolute; inset:0; background-image:
  linear-gradient(rgba(255,255,255,.04) 1px, transparent 1px),
  linear-gradient(90deg, rgba(255,255,255,.04) 1px, transparent 1px);
  background-size:38px 38px; mask-image:radial-gradient(70% 70% at 50% 30%, #000 0, transparent 80%); opacity:.5; }
.auth-aside > * { position:relative; z-index:1; }
.auth-aside__brand { display:flex; align-items:center; gap:13px; color:#fff; font-weight:800; font-size:1.08rem; letter-spacing:-.01em; }
.auth-aside__hero { margin-top:auto; }
.auth-aside__hero .eyebrow { color:var(--gold-2); letter-spacing:.14em; text-transform:uppercase; font-size:.72rem; font-weight:700; }
.auth-aside__hero h2 { font-size:2.3rem; line-height:1.14; letter-spacing:-.02em; margin:.5em 0 1em; max-width:15ch; background:linear-gradient(120deg,#fff,#cdd9f3); -webkit-background-clip:text; background-clip:text; color:transparent; }
.auth-aside__list { list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:16px; }
.auth-aside__list li { display:flex; gap:13px; align-items:flex-start; color:#cdd9f3; font-size:.96rem; }
.auth-aside__list .ck { width:25px;height:25px;border-radius:8px; background:rgba(231,181,74,.16); color:var(--gold-2); display:grid;place-items:center; font-weight:800; flex:0 0 auto; box-shadow:inset 0 0 0 1px rgba(231,181,74,.4); }
.auth-aside__seal { position:absolute; right:-34px; bottom:-34px; opacity:.14; }
.auth-panel { display:grid; place-items:center; padding:40px 24px; background:
  radial-gradient(600px 400px at 50% -10%, rgba(16,59,176,.06) 0, transparent 60%), var(--bg-2); }
.auth-card { width:100%; max-width:410px; background:var(--card); border:1px solid var(--hub-line); border-radius:22px; padding:38px 34px; box-shadow:var(--hub-shadow-lg); animation:hubUp .5s cubic-bezier(.2,.7,.2,1) both; }
.auth-card h1 { font-size:1.7rem; letter-spacing:-.02em; margin:0 0 4px; }
.auth-sub { color:var(--muted); margin:0 0 22px; }
.auth-check { display:flex; align-items:center; gap:8px; font-size:.9rem; color:var(--muted); cursor:pointer; }
.auth-check input { width:auto; }
.auth-alt { text-align:center; margin:20px 0 0; color:var(--muted); }

/* ---------------------------------------------------------------------
   Hub shell
--------------------------------------------------------------------- */
.hub { background:var(--bg); }
.hub body, body.hub { color:var(--ink); }
.hub-shell { display:grid; grid-template-columns: 264px 1fr; min-height:100vh;
  background:
    radial-gradient(900px 520px at 100% -6%, rgba(16,59,176,.07) 0, transparent 55%),
    radial-gradient(760px 480px at -6% 102%, rgba(231,181,74,.07) 0, transparent 55%); }
html[data-theme="dark"] .hub-shell { background:
    radial-gradient(900px 520px at 100% -6%, rgba(40,86,180,.18) 0, transparent 55%),
    radial-gradient(760px 480px at -6% 102%, rgba(231,181,74,.06) 0, transparent 55%); }

/* Sidebar */
.hub-side { position:sticky; top:0; height:100vh; display:flex; flex-direction:column; gap:5px; padding:22px 16px 18px; color:#c4d1ee;
  background:linear-gradient(185deg,#0a1733 0%,#0b1d44 60%,#0a1834 100%);
  border-right:1px solid rgba(255,255,255,.06);
  box-shadow:inset -1px 0 0 rgba(255,255,255,.03), 12px 0 40px -28px rgba(0,0,0,.6); }
.hub-brand { display:flex; align-items:center; gap:12px; padding:6px 10px 18px; margin-bottom:6px; color:#fff; border-bottom:1px solid rgba(255,255,255,.07); }
.hub-brand__emblem { display:grid; place-items:center; width:40px; height:40px; border-radius:11px; background:rgba(255,255,255,.06); box-shadow:inset 0 0 0 1px rgba(255,255,255,.08); }
.hub-brand__txt { display:flex; flex-direction:column; line-height:1.18; }
.hub-brand__txt strong { font-size:1.02rem; letter-spacing:-.01em; }
.hub-brand__txt small { color:#8ea2cc; font-size:.71rem; letter-spacing:.02em; }
.hub-nav { display:flex; flex-direction:column; gap:3px; margin-top:4px; }
.hub-nav__item { position:relative; display:flex; align-items:center; gap:13px; padding:11px 14px; border-radius:12px; color:#aebadd; font-weight:600; font-size:.92rem; letter-spacing:-.005em; transition:background .18s, color .18s, transform .18s; }
.hub-nav__item svg { width:19px; height:19px; flex:0 0 auto; opacity:.82; transition:opacity .18s; }
.hub-nav__item:hover { background:rgba(255,255,255,.06); color:#fff; text-decoration:none; }
.hub-nav__item:hover svg { opacity:1; }
.hub-nav__item.is-active { background:var(--hub-gold-grad); color:#241a04; box-shadow:0 10px 22px -8px rgba(231,181,74,.7), inset 0 1px 0 rgba(255,255,255,.45); }
.hub-nav__item.is-active svg { opacity:1; }
.hub-side__foot { margin-top:auto; padding-top:12px; border-top:1px solid rgba(255,255,255,.08); }
.hub-side__foot .hub-nav__item { color:#8ea2cc; font-size:.86rem; }

/* Main + topbar */
.hub-main { display:flex; flex-direction:column; min-width:0; }
.hub-top { position:sticky; top:0; z-index:30; display:flex; align-items:center; gap:16px; padding:15px 32px;
  background:var(--hub-glass); backdrop-filter:saturate(160%) blur(14px); -webkit-backdrop-filter:saturate(160%) blur(14px);
  border-bottom:1px solid var(--hub-line); }
.hub-title { font-size:1.18rem; letter-spacing:-.02em; margin:0; flex:1; font-weight:700; }
.hub-burger { display:none; background:none; border:none; color:var(--ink); cursor:pointer; padding:0; }
.hub-burger svg{ width:24px;height:24px; }
.hub-top__actions { display:flex; align-items:center; gap:14px; }
.hub-top .theme-toggle { border:1px solid var(--hub-line); border-radius:11px; width:38px; height:38px; }
.hub-user { display:flex; align-items:center; gap:11px; }
.hub-user__name { font-weight:650; font-size:.9rem; }
.hub-avatar { width:38px;height:38px;border-radius:12px; background:linear-gradient(135deg,#1b3a86,#0e2350); color:#fff; display:grid;place-items:center; font-weight:800; font-size:.82rem; letter-spacing:.02em; box-shadow:inset 0 0 0 1px rgba(255,255,255,.12), 0 6px 16px -8px rgba(16,59,176,.8); }
.hub-content { padding:32px 34px 56px; max-width:1240px; width:100%; }

.hub-greet { display:flex; align-items:flex-start; justify-content:space-between; gap:18px; margin-bottom:26px; flex-wrap:wrap; animation:hubFade .5s both; }
.hub-greet h2 { margin:0 0 4px; font-size:1.72rem; letter-spacing:-.025em; line-height:1.1; }
.hub-greet .muted { font-size:1rem; }

/* Premium gold button (scoped to hub + auth) */
.hub .btn-gold, .auth-card .btn-gold {
  background:var(--hub-gold-grad); color:#2a1d02; border:none; font-weight:750;
  box-shadow:0 12px 26px -10px rgba(231,181,74,.7), inset 0 1px 0 rgba(255,255,255,.5); transition:transform .18s, box-shadow .18s, filter .18s; }
.hub .btn-gold:hover, .auth-card .btn-gold:hover { transform:translateY(-2px); box-shadow:0 18px 36px -12px rgba(231,181,74,.8), inset 0 1px 0 rgba(255,255,255,.55); filter:brightness(1.02); }
.hub .btn-gold:active, .auth-card .btn-gold:active { transform:translateY(0); }
.hub .btn-ghost { border:1px solid var(--hub-line); }
.hub .btn-ghost:hover { border-color:var(--gold-2); }

/* ---------------------------------------------------------------------
   Stat tiles
--------------------------------------------------------------------- */
.stat-row { display:grid; grid-template-columns:repeat(4,1fr); gap:18px; margin-bottom:28px; }
.stat-tile { position:relative; display:flex; align-items:center; gap:16px; background:var(--card); border:1px solid var(--hub-line); border-radius:var(--hub-radius); padding:20px 22px; box-shadow:var(--hub-shadow); overflow:hidden; transition:transform .2s, box-shadow .2s, border-color .2s; animation:hubUp .5s cubic-bezier(.2,.7,.2,1) both; }
.stat-tile::before { content:""; position:absolute; left:0; top:0; bottom:0; width:3px; background:var(--hub-gold-grad); opacity:.0; transition:opacity .2s; }
.stat-tile:nth-child(1){ animation-delay:.02s; } .stat-tile:nth-child(2){ animation-delay:.08s; }
.stat-tile:nth-child(3){ animation-delay:.14s; } .stat-tile:nth-child(4){ animation-delay:.2s; }
.stat-tile:hover { transform:translateY(-4px); box-shadow:var(--hub-shadow-lg); border-color:rgba(231,181,74,.45); }
.stat-tile:hover::before { opacity:1; }
.stat-tile__ic { width:52px;height:52px;border-radius:15px; display:grid;place-items:center; flex:0 0 auto; position:relative; box-shadow:inset 0 0 0 1px rgba(255,255,255,.4); }
html[data-theme="dark"] .stat-tile__ic { box-shadow:inset 0 0 0 1px rgba(255,255,255,.06); }
.stat-tile__ic svg{ width:24px;height:24px; }
.stat-tile__ic.gold{ background:linear-gradient(140deg,rgba(246,220,150,.5),rgba(231,181,74,.2)); color:#b07d12; }
.stat-tile__ic.blue{ background:linear-gradient(140deg,rgba(91,132,240,.28),rgba(16,59,176,.12)); color:var(--blue-600); }
.stat-tile__ic.green{ background:linear-gradient(140deg,rgba(34,170,90,.28),rgba(21,128,61,.12)); color:var(--ok); }
.stat-tile__ic.amber{ background:linear-gradient(140deg,rgba(245,180,80,.32),rgba(180,83,9,.12)); color:var(--warn); }
.stat-tile b { display:block; font-size:1.85rem; line-height:1; letter-spacing:-.03em; font-variant-numeric:tabular-nums; }
.stat-tile span { color:var(--muted); font-size:.82rem; font-weight:600; letter-spacing:.01em; }
.stat-pill { background:var(--card); border:1px solid var(--hub-line); border-radius:999px; padding:9px 18px; font-size:.9rem; color:var(--muted); align-self:center; box-shadow:var(--hub-shadow); }
.stat-pill b { color:var(--ink); font-variant-numeric:tabular-nums; }

/* ---------------------------------------------------------------------
   Panels & grids
--------------------------------------------------------------------- */
.hub-panel { position:relative; background:var(--card); border:1px solid var(--hub-line); border-radius:var(--hub-radius); padding:22px 24px; box-shadow:var(--hub-shadow); animation:hubUp .5s cubic-bezier(.2,.7,.2,1) both; }
.hub-panel__head { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:16px; }
.hub-panel__head h3 { margin:0; font-size:1.08rem; letter-spacing:-.015em; font-weight:700; }
.hub-panel__head h3::before { content:""; display:inline-block; width:4px; height:15px; border-radius:3px; background:var(--hub-gold-grad); margin-right:9px; vertical-align:-2px; }
.hub-panel__head a { font-size:.86rem; font-weight:650; color:var(--blue-700); }
.hub-grid { display:grid; grid-template-columns: 1.62fr 1fr; gap:22px; align-items:start; }
.hub-grid--3 { grid-template-columns: repeat(3,1fr); }
.hub-empty { text-align:center; padding:42px 22px; color:var(--muted); display:flex; flex-direction:column; gap:16px; align-items:center;
  border:1.5px dashed var(--hub-line); border-radius:var(--hub-radius); background:linear-gradient(180deg, transparent, rgba(13,28,64,.015)); }

/* ---------------------------------------------------------------------
   Certificate cards
--------------------------------------------------------------------- */
.cert-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(252px,1fr)); gap:18px; }
.cert-grid--compact { grid-template-columns:repeat(auto-fill,minmax(224px,1fr)); }
.cert-card { display:flex; flex-direction:column; gap:9px; background:var(--card); border:1px solid var(--hub-line); border-radius:var(--hub-radius); padding:19px 19px 17px; box-shadow:var(--hub-shadow); position:relative; overflow:hidden; transition:transform .2s, box-shadow .2s, border-color .2s; animation:hubUp .5s cubic-bezier(.2,.7,.2,1) both; }
.cert-card::before { content:""; position:absolute; inset:0 0 auto 0; height:4px; background:var(--hub-gold-grad); }
.cert-card::after { content:""; position:absolute; right:-40px; top:-40px; width:120px; height:120px; border-radius:50%; background:radial-gradient(circle, rgba(231,181,74,.16), transparent 70%); opacity:0; transition:opacity .25s; pointer-events:none; }
.cert-card:hover { transform:translateY(-5px); box-shadow:var(--hub-shadow-lg); text-decoration:none; border-color:rgba(231,181,74,.5); }
.cert-card:hover::after { opacity:1; }
.cert-card:hover .cert-card__go { gap:9px; color:var(--gold); }
.cert-card__top { display:flex; align-items:center; justify-content:space-between; gap:8px; margin-top:2px; }
.cert-card__ref { font-size:.71rem; color:var(--muted-2); letter-spacing:.02em; }
.cert-card__cat { font-size:.66rem; font-weight:800; text-transform:uppercase; letter-spacing:.07em; padding:5px 10px; border-radius:999px; background:var(--neu-bg); color:var(--neu); }
.cat--education{ background:rgba(16,59,176,.12); color:var(--blue-600); }
.cat--licensing{ background:rgba(231,181,74,.18); color:#9a6f12; }
.cat--compliance{ background:var(--ok-bg); color:var(--ok); }
.cat--training{ background:rgba(124,77,230,.15); color:#6b3fd0; }
.cat--awards{ background:var(--warn-bg); color:var(--warn); }
html[data-theme="dark"] .cat--licensing{ color:var(--gold-2); }
.cert-card__title { margin:3px 0 0; font-size:1.08rem; line-height:1.25; letter-spacing:-.015em; }
.cert-card__issuer { margin:0; color:var(--muted); font-size:.84rem; }
.cert-card__badges { display:flex; flex-wrap:wrap; gap:6px; margin-top:auto; padding-top:8px; }
.cert-card__go { display:inline-flex; align-items:center; gap:5px; color:var(--blue-700); font-weight:700; font-size:.82rem; margin-top:6px; transition:gap .2s, color .2s; }

/* ---------------------------------------------------------------------
   Status badges
--------------------------------------------------------------------- */
.cbadge { font-size:.66rem; font-weight:800; letter-spacing:.04em; text-transform:uppercase; padding:5px 10px; border-radius:999px; border:1px solid transparent; }
.cbadge--ok{ background:var(--ok-bg); color:var(--ok); border-color:var(--ok-bd); }
.cbadge--warn{ background:var(--warn-bg); color:var(--warn); border-color:var(--warn-bd); }
.cbadge--bad{ background:var(--bad-bg); color:var(--bad); border-color:var(--bad-bd); }
.cbadge--neutral{ background:var(--neu-bg); color:var(--neu); border-color:var(--neu-bd); }
.cbadge--gold{ background:var(--hub-gold-grad); color:#2a1d02; border-color:rgba(207,154,44,.5); box-shadow:inset 0 1px 0 rgba(255,255,255,.45); }

/* ---------------------------------------------------------------------
   Filters / chips
--------------------------------------------------------------------- */
.vault-filters, .tl-filters { display:flex; flex-wrap:wrap; gap:8px; margin:20px 0; }
.chip { padding:8px 16px; border-radius:999px; border:1px solid var(--hub-line); background:var(--card); color:var(--muted); font-weight:650; font-size:.85rem; cursor:pointer; transition:.16s; box-shadow:var(--hub-shadow); }
.chip:hover { border-color:var(--gold-2); color:var(--ink); text-decoration:none; transform:translateY(-1px); }
.chip.is-active { background:linear-gradient(135deg,var(--navy),var(--navy-2)); color:#fff; border-color:transparent; box-shadow:0 8px 18px -8px rgba(10,23,51,.6); }
html[data-theme="dark"] .chip.is-active { background:var(--hub-gold-grad); color:#241a04; }

/* ---------------------------------------------------------------------
   Add-certificate panel
--------------------------------------------------------------------- */
.add-cert { max-height:0; overflow:hidden; transition:max-height .4s ease; }
.add-cert.is-open { max-height:1100px; }
.add-cert__grid { display:grid; grid-template-columns:1fr 1fr; gap:18px; padding:6px 0 12px; }
.add-cert__form { background:var(--card); border:1px solid var(--hub-line); border-radius:var(--hub-radius); padding:24px; box-shadow:var(--hub-shadow); }
.add-cert__form h3 { margin:0 0 4px; font-size:1.08rem; letter-spacing:-.015em; }
.add-cert__row { display:grid; grid-template-columns:1fr 1fr; gap:12px; }

/* ---------------------------------------------------------------------
   Activity feed
--------------------------------------------------------------------- */
.feed { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; }
.feed__item { display:flex; gap:13px; padding:13px 4px; border-bottom:1px solid var(--line-2); transition:background .15s; border-radius:10px; }
.feed__item:last-child { border-bottom:none; }
.feed__item:hover { background:rgba(13,28,64,.025); }
html[data-theme="dark"] .feed__item:hover { background:rgba(255,255,255,.03); }
.feed__ic { width:36px;height:36px;border-radius:11px; background:linear-gradient(140deg,rgba(91,132,240,.2),rgba(16,59,176,.08)); color:var(--blue-600); display:grid;place-items:center; flex:0 0 auto; box-shadow:inset 0 0 0 1px rgba(16,59,176,.12); }
.feed__ic svg{ width:17px;height:17px; }
.feed__item p { margin:0; font-size:.9rem; line-height:1.4; }
.feed__item time { color:var(--muted-2); font-size:.77rem; }

/* ---------------------------------------------------------------------
   Certificate detail
--------------------------------------------------------------------- */
.crumbs { margin-bottom:8px; }
.cert-detail__head { display:flex; align-items:flex-start; justify-content:space-between; gap:20px; margin:16px 0 24px; flex-wrap:wrap; }
.cert-detail__head h2 { margin:10px 0 6px; font-size:1.7rem; letter-spacing:-.025em; }
.cert-detail__actions { display:flex; flex-wrap:wrap; gap:9px; }
.cert-detail__grid { display:grid; grid-template-columns: 1.5fr 1fr; gap:22px; align-items:start; }
.cert-detail__side { display:flex; flex-direction:column; gap:20px; }

/* ---------------------------------------------------------------------
   Smart timeline
--------------------------------------------------------------------- */
.timeline { list-style:none; margin:0; padding:0; position:relative; }
.tl-item { position:relative; display:flex; gap:16px; padding:0 0 22px 26px; margin-left:15px; border-left:2px solid var(--hub-line); transition:.16s; }
.tl-item:last-child { border-left-color:transparent; padding-bottom:4px; }
.tl-dot { position:absolute; left:-16px; top:-2px; width:30px;height:30px;border-radius:50%; display:grid;place-items:center; background:var(--card); border:2px solid var(--hub-line); color:var(--muted); transition:transform .16s, box-shadow .16s; box-shadow:var(--hub-shadow); }
.tl-dot svg{ width:14px;height:14px; }
.tl-dot--verify{ border-color:var(--ok-bd); color:var(--ok); background:var(--ok-bg); }
.tl-dot--issue{ border-color:rgba(231,181,74,.6); color:var(--gold); background:rgba(231,181,74,.14); }
.tl-dot--reprint{ border-color:rgba(16,59,176,.5); color:var(--blue-600); background:rgba(16,59,176,.1); }
.tl-dot--aimatch{ border-color:rgba(124,77,230,.5); color:#6b3fd0; background:rgba(124,77,230,.12); }
.tl-dot--share{ border-color:var(--warn-bd); color:var(--warn); background:var(--warn-bg); }
.tl-dot--status{ border-color:var(--neu-bd); color:var(--neu); background:var(--neu-bg); }
.tl-body { display:flex; flex-direction:column; gap:2px; padding-top:1px; }
.tl-body b { font-size:.93rem; letter-spacing:-.01em; }
.tl-detail { color:var(--muted); font-size:.84rem; }
.tl-body time { color:var(--muted-2); font-size:.76rem; }
.tl-item:hover .tl-dot { transform:scale(1.14); box-shadow:0 6px 16px -6px currentColor; }

/* ---------------------------------------------------------------------
   Scores / AI match / identity
--------------------------------------------------------------------- */
.score-list { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:12px; }
.score-list li { display:flex; align-items:center; gap:11px; font-size:.86rem; }
.score-list li > span:first-child { width:100px; flex:0 0 auto; color:var(--muted); }
.score-list .bar { flex:1; height:9px; border-radius:99px; background:var(--bg-2); overflow:hidden; box-shadow:inset 0 0 0 1px var(--hub-line); }
.score-list .bar i { display:block; height:100%; border-radius:99px; background:linear-gradient(90deg,var(--blue-600),var(--gold)); box-shadow:0 0 12px -2px rgba(231,181,74,.5); animation:hubFade .6s both; }
.score-list b { width:48px; text-align:right; font-variant-numeric:tabular-nums; }
.score-list b.ok{ color:var(--ok); } .score-list b.bad{ color:var(--bad); }
.match-verdict { display:flex; align-items:baseline; gap:11px; padding:14px 16px; border-radius:var(--hub-radius-sm); margin-bottom:14px; box-shadow:inset 0 0 0 1px var(--hub-line); }
.match-verdict b { font-size:1.1rem; letter-spacing:.04em; }
.match-verdict span { color:var(--muted); font-size:.84rem; }
.match-verdict--match{ background:var(--ok-bg); color:var(--ok); }
.match-verdict--review{ background:var(--warn-bg); color:var(--warn); }
.match-verdict--mismatch{ background:var(--bad-bg); color:var(--bad); }
.issuer-ok { display:flex; gap:15px; align-items:center; }
.issuer-ok__seal { flex:0 0 auto; filter:drop-shadow(0 6px 14px rgba(8,20,56,.25)); }
.vh { display:inline-block; margin-top:7px; font-size:.72rem; color:var(--muted); word-break:break-all; font-family:var(--mono); }
.id-state { font-weight:800; padding:7px 13px; border-radius:999px; display:inline-block; font-size:.8rem; letter-spacing:.02em; }
.id-state--verified{ background:var(--ok-bg); color:var(--ok); box-shadow:inset 0 0 0 1px var(--ok-bd); }
.id-state--failed{ background:var(--bad-bg); color:var(--bad); box-shadow:inset 0 0 0 1px var(--bad-bd); }
.id-state--unverified{ background:var(--neu-bg); color:var(--neu); box-shadow:inset 0 0 0 1px var(--neu-bd); }

/* Verification stepper */
.stepper { list-style:none; display:flex; gap:8px; margin:18px 0 20px; padding:0; }
.stepper__s { flex:1; display:flex; align-items:center; gap:9px; padding:10px 12px; border-radius:12px; font-size:.86rem; font-weight:650; color:var(--muted); background:var(--bg-2); border:1px solid var(--hub-line); transition:.18s; }
.stepper__n { display:grid; place-items:center; width:24px; height:24px; border-radius:50%; background:var(--card); border:1.5px solid var(--hub-line); font-size:.78rem; flex:0 0 auto; }
.stepper__s.is-active { color:var(--ink); border-color:var(--gold); background:linear-gradient(180deg, rgba(231,181,74,.1), transparent); }
.stepper__s.is-active .stepper__n { background:var(--hub-gold-grad); color:#241a04; border-color:transparent; }
.stepper__s.is-done { color:var(--ok); }
.stepper__s.is-done .stepper__n { background:var(--ok-bg); color:var(--ok); border-color:var(--ok-bd); }
.vstep { animation:hubFade .3s both; }
.vstep__nav { display:flex; flex-wrap:wrap; align-items:center; gap:10px; margin-top:14px; }

/* Live face scan */
.facecam { position:relative; width:280px; max-width:100%; aspect-ratio:1; margin:6px auto 16px; border-radius:50%; overflow:hidden; background:radial-gradient(circle at 50% 30%, #16234a, #0a1530); box-shadow:inset 0 0 0 1px var(--hub-line), 0 18px 40px -20px rgba(8,20,56,.6); display:grid; place-items:center; }
.facecam video, .facecam img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.facecam__ring { position:absolute; inset:10px; border-radius:50%; border:2px dashed rgba(231,181,74,.55); pointer-events:none; animation:hubFade 1s both; }
.facecam__hint { position:relative; z-index:1; color:#cdd9f3; font-size:.85rem; text-align:center; padding:0 22px; }
.facecam__actions { display:flex; flex-wrap:wrap; gap:9px; justify-content:center; margin-bottom:12px; }
.facecam__ring.is-active { border-color:var(--gold-2); animation:ringPulse 1.3s infinite; }
.facecam__ring.is-ok { border-style:solid; border-color:#3ddc84; }
@keyframes ringPulse { 0%,100%{ box-shadow:0 0 0 0 rgba(231,181,74,.5);} 50%{ box-shadow:0 0 0 10px rgba(231,181,74,0);} }
.facecam__gesture { position:absolute; z-index:2; bottom:18px; left:50%; transform:translateX(-50%); background:rgba(10,23,51,.82); color:#fff; padding:8px 16px; border-radius:999px; font-weight:700; font-size:.92rem; white-space:nowrap; box-shadow:0 8px 20px -8px rgba(0,0,0,.6); }
.facecam__gesture[data-count]:not([data-count=""])::after { content:" (" attr(data-count) ")"; color:var(--gold-2); }
.live-progress { display:flex; gap:8px; justify-content:center; margin:0 0 14px; }
.live-dot { width:13px; height:13px; border-radius:50%; background:var(--bg-2); box-shadow:inset 0 0 0 1.5px var(--hub-line); transition:.2s; }
.live-dot.is-done { background:linear-gradient(135deg,#3ddc84,#1f9d57); box-shadow:0 0 10px -2px rgba(61,220,132,.7); transform:scale(1.1); }

/* Admin face-review frames */
.frame-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(96px,1fr)); gap:10px; margin:6px 0 0; }
.frame-grid figure { margin:0; text-align:center; }
.frame-grid img { width:100%; aspect-ratio:1; object-fit:cover; border-radius:10px; border:1px solid var(--line); background:#0a1733; }
.frame-grid figcaption { font-size:.66rem; color:var(--muted); text-transform:uppercase; letter-spacing:.04em; margin-top:3px; }

/* Security PIN reveal */
.pin-reveal { display:flex; align-items:center; gap:9px; flex-wrap:wrap; margin-top:4px; }
.pin-code { font-family:var(--mono); font-size:1.35rem; font-weight:700; letter-spacing:.32em; padding:9px 16px; border-radius:11px; background:var(--bg-2); color:var(--ink); box-shadow:inset 0 0 0 1px var(--hub-line); min-width:108px; text-align:center; }

/* Full certificate display (holder verify) */
.cert-full { margin-top:22px; animation:hubUp .5s cubic-bezier(.2,.7,.2,1) both; }
.cert-full__head { display:flex; gap:16px; align-items:flex-start; padding-bottom:18px; margin-bottom:18px; border-bottom:1px solid var(--hub-line); }
.cert-full__head .entity-ico { width:58px; height:58px; border-radius:14px; background:linear-gradient(135deg,#0e2350,#0a1733); color:var(--gold-2); display:grid; place-items:center; flex:0 0 auto; box-shadow:inset 0 0 0 1px rgba(231,181,74,.3); }
.cert-full__head .entity-ico svg { width:28px; height:28px; }
.cert-full__head h2 { margin:0 0 4px; font-size:1.5rem; letter-spacing:-.025em; }
.cert-fields { display:grid; grid-template-columns:repeat(2,1fr); gap:0 28px; margin:0; }
.cert-fields > div { padding:12px 0; border-bottom:1px solid var(--line-2); display:flex; flex-direction:column; gap:3px; }
.cert-fields__full { grid-column:1 / -1; }
.cert-fields dt { color:var(--muted); font-size:.74rem; font-weight:700; text-transform:uppercase; letter-spacing:.05em; }
.cert-fields dd { margin:0; font-weight:600; font-size:.95rem; }
.cert-full__actions { display:flex; flex-wrap:wrap; gap:9px; margin-top:18px; }
@media (max-width:560px){ .cert-fields { grid-template-columns:1fr; } }

/* Mini fields / verify result */
.mini-fields { display:flex; flex-direction:column; gap:9px; margin:16px 0; }
.mini-fields > div { display:flex; justify-content:space-between; gap:12px; border-bottom:1px solid var(--line-2); padding-bottom:7px; }
.mini-fields dt { color:var(--muted); font-size:.82rem; } .mini-fields dd { margin:0; font-weight:650; font-size:.86rem; }
.verify-result h4 { margin:12px 0 2px; letter-spacing:-.01em; }

/* ---------------------------------------------------------------------
   Analytics
--------------------------------------------------------------------- */
.spark { display:flex; align-items:flex-end; gap:7px; height:140px; padding:10px 2px 2px; }
.spark__bar { flex:1; border-radius:7px 7px 3px 3px; background:linear-gradient(180deg,var(--gold-2),var(--blue-600)); min-height:5px; transition:filter .2s, transform .2s; box-shadow:inset 0 1px 0 rgba(255,255,255,.3); }
.spark__bar:hover { filter:brightness(1.12); transform:scaleY(1.03); }

/* Assisted address autocomplete */
.addr-suggest { position:absolute; left:0; right:0; top:100%; z-index:45; margin-top:6px; background:var(--card); border:1px solid var(--hub-line); border-radius:13px; box-shadow:var(--hub-shadow-lg); overflow:hidden; max-height:288px; overflow-y:auto; }
.addr-suggest__item { display:flex; gap:10px; align-items:flex-start; padding:11px 14px; cursor:pointer; font-size:.86rem; color:var(--ink); border-bottom:1px solid var(--line-2); }
.addr-suggest__item:last-child { border-bottom:none; }
.addr-suggest__item svg { width:16px; height:16px; color:var(--gold); flex:0 0 auto; margin-top:2px; }
.addr-suggest__item:hover, .addr-suggest__item.is-active { background:rgba(231,181,74,.1); }
.addr-suggest__credit { padding:7px 13px; font-size:.7rem; color:var(--muted-2); border-top:1px solid var(--line-2); background:var(--bg-2); }

/* Crypto coin picker */
.coin-pick { display:grid; grid-template-columns:repeat(2,1fr); gap:10px; margin-top:6px; }
.coin-opt { display:flex; align-items:center; gap:11px; padding:12px 14px; border:1.5px solid var(--hub-line); border-radius:13px; cursor:pointer; background:var(--card); transition:.16s; }
.coin-opt:hover { border-color:var(--gold-2); transform:translateY(-1px); }
.coin-opt input { position:absolute; opacity:0; width:0; height:0; }
.coin-opt:has(input:checked) { border-color:var(--gold); box-shadow:0 0 0 3px rgba(231,181,74,.18); background:linear-gradient(180deg, rgba(231,181,74,.06), transparent); }
.coin-logo { display:inline-flex; line-height:0; flex:0 0 auto; filter:drop-shadow(0 2px 4px rgba(8,20,56,.25)); }
.coin-meta { display:flex; flex-direction:column; line-height:1.15; }
.coin-meta b { font-size:.92rem; letter-spacing:-.01em; }
.coin-meta small { color:var(--muted); font-size:.74rem; }
.coin-btn { display:inline-flex; align-items:center; gap:6px; }
.coin-btn .coin-logo { filter:none; }

/* Crypto payment */
.crypto-pay { display:flex; gap:22px; flex-wrap:wrap; align-items:flex-start; }
.crypto-pay__qr { flex:0 0 auto; background:#fff; padding:12px; border-radius:14px; box-shadow:var(--hub-shadow); line-height:0; }
.crypto-pay__detail { flex:1; min-width:220px; display:flex; flex-direction:column; gap:10px; }
.cp-row { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:9px 0; border-bottom:1px solid var(--line-2); }
.cp-row span { color:var(--muted); font-size:.86rem; }
.cp-row b { font-variant-numeric:tabular-nums; letter-spacing:-.01em; }
.cp-addr { display:flex; flex-direction:column; gap:6px; margin-top:4px; }
.cp-addr > span:first-child { color:var(--muted); font-size:.82rem; }
.cp-addr__row { display:flex; align-items:center; gap:8px; }
.cp-addr__row code { flex:1; font-family:var(--mono); font-size:.8rem; word-break:break-all; background:var(--bg-2); padding:9px 11px; border-radius:9px; box-shadow:inset 0 0 0 1px var(--hub-line); }
.cp-steps { margin:0; padding-left:20px; display:flex; flex-direction:column; gap:10px; color:var(--ink); font-size:.9rem; }
.cp-steps li { padding-left:4px; }
.pay--pending{ color:var(--blue-700); background:rgba(16,59,176,.1); }

/* Reprint */
.rp-list { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; }
.rp-row { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:13px 0; border-bottom:1px solid var(--line-2); }
.rp-row:last-child { border-bottom:none; }
.rp-row b { display:block; letter-spacing:-.01em; }
.rp-row .muted { font-size:.82rem; }
.pay { text-transform:uppercase; font-size:.68rem; font-weight:800; letter-spacing:.04em; padding:2px 8px; border-radius:6px; }
.pay--paid{ color:var(--ok); background:var(--ok-bg); } .pay--unpaid{ color:var(--warn); background:var(--warn-bg); } .pay--refunded{ color:var(--muted); background:var(--neu-bg); }

/* ---------------------------------------------------------------------
   Forms inside the hub
--------------------------------------------------------------------- */
.hub .field input, .hub .field select, .hub .field textarea,
.auth-card .field input, .auth-card .field select {
  border-radius:11px; border:1.5px solid var(--hub-line); transition:border-color .16s, box-shadow .16s; }
.hub .field input:focus, .hub .field select:focus, .hub .field textarea:focus,
.auth-card .field input:focus, .auth-card .field select:focus {
  border-color:var(--gold); box-shadow:0 0 0 4px rgba(231,181,74,.16); outline:none; }

/* ---------------------------------------------------------------------
   Responsive
--------------------------------------------------------------------- */
@media (max-width: 1040px) {
  .hub-shell { grid-template-columns: 1fr; }
  .hub-side { position:fixed; left:0; top:0; z-index:60; width:264px; transform:translateX(-100%); transition:transform .28s cubic-bezier(.2,.7,.2,1); box-shadow:var(--hub-shadow-lg); }
  .hub-side.is-open { transform:translateX(0); }
  .hub-burger { display:block; }
  .hub-grid, .hub-grid--3, .cert-detail__grid, .add-cert__grid { grid-template-columns: 1fr; }
  .stat-row { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 860px) {
  .auth-split { grid-template-columns: 1fr; }
  .auth-aside { display:none; }
}
@media (max-width: 560px) {
  .stat-row { grid-template-columns: 1fr; }
  .add-cert__row { grid-template-columns: 1fr; }
  .hub-content { padding:20px 16px 44px; }
  .hub-top { padding:13px 16px; }
  .hub-user__name { display:none; }
  /* Compact, stacked stepper so each step gets room on phones */
  .stepper { gap:6px; }
  .stepper__s { flex-direction:column; text-align:center; gap:5px; padding:9px 6px; font-size:.74rem; line-height:1.15; }
}