/* Audio Lounge — Production token mirror
   Source: frontend/src/app/vanilla-theme.css + globals.css + lib/tokens.ts @ v20.22 */

/* ============== ADMIN COCKPIT ============== */
.al-admin {
  --mn: 'Geist Mono','Geist Mono Fallback',ui-monospace,monospace;
  --sn: 'Geist','Geist Fallback',ui-sans-serif,system-ui,sans-serif;
  --sidebar-w: 220px; --hdr-h: 48px; --transition-speed: .25s;
  --text-2xs:12px; --text-xs:13px; --text-sm:14px; --text-base:16px;
  --text-lg:20px; --text-xl:28px; --text-2xl:48px;
  --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-5:20px; --sp-6:24px; --sp-8:32px;

  color-scheme: dark;
  --bg:#050810; --bg2:#0a0f18; --bg3:#111820; --bg4:#171f2b;
  --bd:#1e2938; --bd2:#2a3a50;
  --tx:#d0dced; --t2:#94a7be; --t3:#7a8da3; --tw:#f0f4f8;
  --gd:#d4a853; --gd2:#c9a04a;
  --gr:#34d399; --rd:#ff7b7b; --bl:#6cb4ff; --pu:#b49aff; --or:#ffc93c; --tl:#38e8d0;
  --panel-shadow:0 4px 16px rgba(0,0,0,.4),0 1px 3px rgba(0,0,0,.2);
  --panel-shadow-lg:0 8px 32px rgba(0,0,0,.5),0 2px 6px rgba(0,0,0,.3);
  --kpi-grad-1:linear-gradient(135deg,rgba(52,211,153,.1),rgba(52,211,153,.03));
  --kpi-grad-2:linear-gradient(135deg,rgba(108,180,255,.1),rgba(108,180,255,.03));
  --kpi-grad-3:linear-gradient(135deg,rgba(212,168,83,.1),rgba(212,168,83,.03));
  --kpi-grad-4:linear-gradient(135deg,rgba(180,154,255,.1),rgba(180,154,255,.03));
  --row-alt:rgba(255,255,255,.018);

  background: var(--bg); color: var(--tx); font-family: var(--sn); font-size: 14px;
}

.al-admin .m, .al-admin .kpi-value, .al-admin .hero-val, .al-admin .ticker-value, .al-admin td.m { font-variant-numeric: tabular-nums; }

/* Hero */
.al-admin .hero {
  display:flex; align-items:center; justify-content:center; flex-direction:column; gap:var(--sp-3);
  padding:40px var(--sp-8); margin-bottom:var(--sp-6);
  background:var(--bg2);
  background-image:radial-gradient(ellipse at 50% 0%, rgba(224,180,92,0.08), transparent 60%);
  border:1px solid rgba(224,180,92,.2);
  border-bottom:2px solid transparent;
  border-image:linear-gradient(90deg, transparent 10%, var(--gd) 50%, transparent 90%) 1;
  border-image-slice:0 0 1 0;
  border-radius:var(--sp-3); text-align:center; box-shadow: var(--panel-shadow-lg);
}
.al-admin .hero-label { font-size: var(--text-base); font-weight:700; color:var(--gd); text-transform:uppercase; letter-spacing:2px; }
.al-admin .hero-val { font-family:var(--mn); font-size:56px; font-weight:700; color:var(--tw); letter-spacing:-1.5px; line-height:1; text-shadow:0 2px 12px rgba(224,180,92,.15); }
.al-admin .hero-sub { font-size: var(--text-sm); color: var(--t2); letter-spacing:.3px; }

/* KPI strip — primary */
.al-admin .kpi-strip-primary{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:var(--sp-3);margin-bottom:var(--sp-4)}
.al-admin .kpi-strip-primary .kpi-card{border-left:3px solid var(--gd);padding:var(--sp-6) var(--sp-6);background:var(--bg3);border-top:1px solid var(--bd);border-right:1px solid var(--bd);border-bottom:1px solid var(--bd);border-radius:var(--sp-3);position:relative;text-align:center;box-shadow:var(--panel-shadow);transition:transform .15s, box-shadow .15s;}
.al-admin .kpi-strip-primary .kpi-card:hover{transform:translateY(-1px);box-shadow:var(--panel-shadow-lg);}
.al-admin .kpi-strip-primary .kpi-value{font-size:32px;font-weight:700;font-family:var(--mn);color:var(--tw);}
.al-admin .kpi-strip-primary .kpi-label{font-size:12px;font-weight:700;color:var(--gd);text-transform:uppercase;letter-spacing:1px;margin-bottom:var(--sp-2);}
.al-admin .kpi-strip-primary .kpi-sub{font-size:var(--text-xs);color:var(--t2);margin-top:var(--sp-2);}

/* KPI strip — secondary */
.al-admin .kpi-strip-secondary{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:var(--sp-2);margin-bottom:var(--sp-4)}
.al-admin .kpi-strip-secondary .kpi-card{padding:var(--sp-4) var(--sp-5);border:1px solid rgba(30,41,56,0.6);background:var(--bg2);border-left:3px solid rgba(224,180,92,0.4);border-radius:var(--sp-3);position:relative;text-align:center;box-shadow:var(--panel-shadow);transition:border-color .15s;}
.al-admin .kpi-strip-secondary .kpi-value{font-size:22px;font-weight:700;font-family:var(--mn);color:var(--tw);}
.al-admin .kpi-strip-secondary .kpi-label{font-size:10px;font-weight:700;color:var(--t2);text-transform:uppercase;letter-spacing:1px;margin-bottom:var(--sp-2);}
.al-admin .kpi-strip-secondary .kpi-sub{font-size:12px;color:var(--t2);margin-top:var(--sp-1);}
.al-admin .kpi-strip-secondary .kpi-card:hover{border-left-color:var(--gd)}

/* KPI tags (OBS/CALC/LIVE/ASS/PROJ) — softened per v20.22 */
.al-admin .kpi-tag{position:absolute;top:10px;right:10px;font-size:8px;font-weight:700;padding:2px 6px;border-radius:3px;font-family:var(--mn);letter-spacing:.04em;opacity:.55;transition:opacity .15s}
.al-admin .kpi-card:hover .kpi-tag{opacity:1}
.al-admin .t-obs{background:rgba(52,211,153,.08);color:var(--gr)}
.al-admin .t-calc{background:rgba(96,165,250,.08);color:var(--bl)}
.al-admin .t-ass{background:rgba(167,139,250,.08);color:var(--pu)}
.al-admin .t-proj{background:rgba(248,113,113,.08);color:var(--rd)}
.al-admin .t-live{background:rgba(251,191,36,.08);color:var(--or)}

/* Panel */
.al-admin .panel{background:var(--bg2);border:1px solid var(--bd);border-radius:var(--sp-3);overflow:hidden;margin-bottom:var(--sp-4);box-shadow:var(--panel-shadow);}
.al-admin .panel-hdr{display:flex;align-items:center;justify-content:space-between;padding:14px 20px;background:rgba(224,180,92,.04);border-bottom:1px solid var(--bd);}
.al-admin .panel-hdr h2, .al-admin .panel-hdr h3{font-size:13px;font-weight:700;color:var(--gd);text-transform:uppercase;letter-spacing:1.5px;margin:0;}
.al-admin .panel-body{padding:16px 20px;}

/* Section group */
.al-admin .section-group{margin-bottom:var(--sp-6)}
.al-admin .section-group-hdr{display:flex;align-items:center;justify-content:space-between;padding:10px 0;border-left:3px solid var(--gd);padding-left:12px;margin-bottom:var(--sp-3)}
.al-admin .section-group-title{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:1.5px;color:var(--gd);}
.al-admin .section-group-summary{font-size:11px;color:var(--t3);}

/* Metric panel */
.al-admin .metric-panel{padding:20px 24px;background:var(--bg3);border:1px solid var(--bd);border-left:3px solid rgba(224,180,92,0.5);border-radius:var(--sp-3);display:flex;flex-direction:column;gap:6px;text-align:center;box-shadow:var(--panel-shadow);transition: border-color .15s, transform .15s;}
.al-admin .metric-panel:hover{border-color:rgba(224,180,92,.25);border-left-color:var(--gd);transform:translateY(-1px)}
.al-admin .metric-panel-label{font-size:11px;color:var(--gd);font-weight:700;text-transform:uppercase;letter-spacing:1px}
.al-admin .metric-panel-val{font-size:28px;font-weight:700;font-family:var(--mn);color:var(--tw)}
.al-admin .metric-panel-sub{font-size:var(--text-sm);color:var(--t2);line-height:1.4}
.al-admin .metric-panel-trend{font-size:12px;font-weight:600;font-family:var(--mn)}
.al-admin .metric-panel-trend.up{color:var(--gr)}
.al-admin .metric-panel-trend.down{color:var(--rd)}

/* Sub-tabs (softened per v20.22) */
.al-admin .sub-tabs{display:flex;gap:4px;margin-bottom:24px;border-bottom:1px solid var(--bd);}
.al-admin .sub-tab{padding:12px 18px;font-size:13px;font-weight:600;cursor:pointer;border-radius:6px 6px 0 0;background:transparent;color:var(--t3);border:none;border-bottom:2px solid transparent;margin-bottom:-1px;}
.al-admin .sub-tab:hover{color:var(--tw);background:rgba(224,180,92,0.04)}
.al-admin .sub-tab.active{background:rgba(224,180,92,0.06);color:var(--gd);font-weight:700;border-bottom:2px solid var(--gd);}

/* Pill + badges */
.al-admin .pill{display:inline-block;font-family:var(--mn);font-size:9px;padding:2px 8px;border-radius:20px;border:1px solid var(--gr);color:var(--gr);letter-spacing:.08em;text-transform:uppercase;}

/* Rec card */
.al-admin .rec{background:var(--bg2);border:1px solid var(--bd);border-left:3px solid var(--gd);border-radius:0 var(--sp-2) var(--sp-2) 0;padding:var(--sp-3) var(--sp-4);margin-bottom:var(--sp-2);transition:transform .15s, box-shadow .15s;}
.al-admin .rec:hover{transform:translateX(2px);box-shadow:var(--panel-shadow)}
.al-admin .rec.crit{border-left-color:var(--rd)}
.al-admin .rec.high{border-left-color:var(--or)}
.al-admin .rec.med{border-left-color:var(--bl)}
.al-admin .rec.low{border-left-color:var(--gr)}
.al-admin .rec-hdr{display:flex;justify-content:space-between;align-items:center;margin-bottom:3px}
.al-admin .rec-cat{font-size:10px;font-weight:600;color:var(--t3);text-transform:uppercase;letter-spacing:.08em;}
.al-admin .rec-urg{font-size:8px;font-weight:700;padding:2px 6px;border-radius:3px;font-family:var(--mn);letter-spacing:.06em;}
.al-admin .urg-CRITICAL{background:rgba(248,113,113,.15);color:var(--rd)}
.al-admin .urg-HIGH{background:rgba(251,191,36,.15);color:var(--or)}
.al-admin .urg-MEDIUM{background:rgba(96,165,250,.15);color:var(--bl)}
.al-admin .urg-LOW{background:rgba(52,211,153,.15);color:var(--gr)}
.al-admin .rec-signal{font-size:12px;font-weight:600;color:var(--tx);margin-bottom:3px}
.al-admin .rec-action{font-size:11px;color:var(--gd);margin-bottom:3px}
.al-admin .rec-data{font-family:var(--mn);font-size:10px;color:var(--t3)}

/* Table */
.al-admin .tw{background:var(--bg2);border:1px solid var(--bd);border-radius:8px;overflow:hidden;}
.al-admin table{width:100%;border-collapse:collapse;font-size:var(--text-xs)}
.al-admin th{background:var(--bg3);color:var(--t2);padding:8px 12px;text-align:left;font-size:11px;font-weight:700;border-bottom:1px solid var(--bd);text-transform:uppercase;letter-spacing:.08em;}
.al-admin td{padding:9px 12px;border-top:1px solid rgba(26,34,48,.4)}
.al-admin tbody tr:nth-child(even) td{background:var(--row-alt)}
.al-admin tr:hover td{background:rgba(212,168,83,.04)}
.al-admin .gr{color:var(--gr)}
.al-admin .rd{color:var(--rd)}
.al-admin .gd{color:var(--gd)}

/* Section header with period accent */
.al-admin .section-head-accent{font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--tw);font-size:13px;}
.al-admin .section-head-accent::after{content:".";color:var(--gd);margin-left:1px;}

/* Ticker */
.al-admin .kpi-ticker{background:var(--bg2);border:1px solid var(--bd);border-radius:6px;overflow:hidden;height:32px;display:flex;align-items:center;position:relative;opacity:.92;}
.al-admin .ticker-track{display:flex;gap:28px;padding:0 20px;white-space:nowrap;font-family:var(--mn);font-size:11px;}
.al-admin .ticker-item{display:inline-flex;align-items:center;gap:6px;color:var(--t2);}
.al-admin .ticker-label{color:var(--gd);font-size:9px;font-weight:600;letter-spacing:.5px;}
.al-admin .ticker-value.positive{color:var(--gr)}
.al-admin .ticker-value.negative{color:var(--rd)}
.al-admin .ticker-dot{width:3px;height:3px;border-radius:50%;background:var(--bd2);margin:0 4px;}

/* Narrative */
.al-admin .narrative-panel{padding:var(--sp-4);background:var(--bg2);border:1px solid var(--bd);border-radius:var(--sp-2)}
.al-admin .narrative-body{font-size:var(--text-xs);line-height:1.8;color:var(--t2);max-width:72ch}
.al-admin .narrative-body strong{color:var(--tw);font-weight:600}

/* Button */
.al-admin .btn-primary{padding:8px 18px;background:var(--gd);color:var(--bg);border:none;border-radius:5px;font-weight:700;font-size:12px;font-family:var(--sn);cursor:pointer;text-transform:uppercase;letter-spacing:.06em;}
.al-admin .btn-primary:hover{background:var(--gd2);}
.al-admin .btn-ghost{padding:8px 18px;background:transparent;color:var(--t2);border:1px solid var(--bd);border-radius:5px;font-weight:600;font-size:12px;font-family:var(--sn);cursor:pointer;}
.al-admin .btn-ghost:hover{border-color:var(--gd);color:var(--gd);}

/* Data panel skeleton */
.al-admin .skel{background:linear-gradient(90deg,var(--bg3) 25%,var(--bg4) 50%,var(--bg3) 75%);background-size:200% 100%;animation:al-admin-shim 1.5s ease-in-out infinite;border-radius:6px;}
@keyframes al-admin-shim {0%{background-position:-200% 0}100%{background-position:200% 0}}

/* ============== AL PUBLIC BRAND ============== */
.al-public {
  --al-bg:#0E0D12; --al-surface:#161520; --al-elevated:#1E1D28; --al-raised:#28273A;
  --al-amber:#E89A3C; --al-amberGlow:#F0B060; --al-violet:#9B8AEB; --al-violetDim:#6E60B8;
  --al-coral:#E86B5A; --al-mint:#5ACBA1;
  --al-text:#F0EDE6; --al-sub:#A09BAF; --al-dim:#5D5872; --al-faint:#3A3650;
  --al-border:#2A2940; --al-glass:rgba(14,13,18,.82);
  --al-brand-gradient:linear-gradient(135deg,#E89A3C,#9B8AEB);
  --al-cta-gradient:linear-gradient(135deg,#E89A3C,#F0B060);
  --font-al-head:'Archivo Black',Impact,'Arial Black',sans-serif;
  --font-al-body:'Manrope','Segoe UI','Helvetica Neue',sans-serif;
  --font-al-mono:'Space Mono','Courier New',monospace;

  background: var(--al-bg); color: var(--al-text);
  font-family: var(--font-al-body); font-size: 15px; line-height: 1.55;
}

/* Utility classes (v20.22) */
.al-public .al-card{background:var(--al-surface);border:1px solid var(--al-border);border-radius:12px;padding:20px 24px;}
.al-public .al-card-hero{background:var(--al-surface);border:1px solid var(--al-border);border-radius:14px;padding:28px 32px;}
.al-public .al-eyebrow{font-family:var(--font-al-mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--al-sub);margin:0 0 12px;font-weight:700;}
.al-public .al-eyebrow-amber{color:var(--al-amber)}
.al-public .al-eyebrow-violet{color:var(--al-violet)}
.al-public .al-eyebrow-mint{color:var(--al-mint)}
.al-public .al-eyebrow-coral{color:var(--al-coral)}
.al-public .al-display{font-family:var(--font-al-head);font-weight:400;line-height:.92;letter-spacing:-.025em;margin:0;text-transform:uppercase;}
.al-public .al-display-sm{font-size:clamp(24px,3.5vw,32px);line-height:1.1}
.al-public .al-display-md{font-size:clamp(28px,4vw,40px);line-height:1}
.al-public .al-display-lg{font-size:clamp(40px,7vw,88px);line-height:.92}
.al-public .al-mono{font-family:var(--font-al-mono);letter-spacing:.08em;font-variant-numeric:tabular-nums;}
.al-public .al-gradient-text{color:var(--al-amber);background:var(--al-brand-gradient);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;}

.al-public .al-btn-primary{display:inline-block;background:var(--al-amber);color:#000;padding:10px 22px;border-radius:100px;font-size:12px;font-family:var(--font-al-mono);font-weight:700;letter-spacing:.06em;text-transform:uppercase;border:1px solid var(--al-amber);cursor:pointer;transition:transform .15s, box-shadow .15s;}
.al-public .al-btn-primary:hover{transform:translateY(-1px);box-shadow:0 4px 16px rgba(232,154,60,.25)}
.al-public .al-btn-ghost{display:inline-block;background:transparent;color:var(--al-text);padding:10px 22px;border-radius:100px;font-size:12px;font-family:var(--font-al-mono);font-weight:700;letter-spacing:.06em;text-transform:uppercase;border:1px solid var(--al-border);cursor:pointer;transition:border-color .15s, color .15s;}
.al-public .al-btn-ghost:hover{border-color:var(--al-amber);color:var(--al-amber)}
.al-public .al-tier-badge{display:inline-block;font-family:var(--font-al-mono);font-size:10px;letter-spacing:.08em;text-transform:uppercase;padding:2px 10px;border-radius:100px;border:1px solid currentColor;font-weight:700;}

.al-public .al-live-dot{display:inline-block;width:6px;height:6px;border-radius:50%;background:currentColor;animation:al-pulse 1.4s ease-in-out infinite;}
@keyframes al-pulse {0%,100%{opacity:1;transform:scale(1)}50%{opacity:.6;transform:scale(1.15)}}

/* Section bands */
.al-public .band { padding: 56px 32px; border-radius: 12px; position: relative; overflow: hidden; }
.al-public .band-neutral { background: var(--al-bg); }
.al-public .band-amber   { background: color-mix(in srgb, var(--al-amber) 4%, var(--al-bg)); }
.al-public .band-violet  { background: color-mix(in srgb, var(--al-violet) 4%, var(--al-bg)); }
.al-public .band-surface { background: var(--al-surface); }