:root{
  --bg:#0b0f14;
  --panel:rgba(18,26,38,0.78);
  --stroke:rgba(255,255,255,0.08);
  --text:rgba(255,255,255,0.92);
  --muted:rgba(255,255,255,0.65);
  --accent:#f2c7ff;
  --accent2:#78c8ff;
  --shadow:0 18px 50px rgba(0,0,0,0.5);
}
*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;font-family:ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial;color:var(--text);background:var(--bg);overflow-y:auto}
.bg{position:fixed;inset:0;z-index:0;overflow:hidden}
.bg video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:brightness(0.5) saturate(1.1)}
.bg::after{content:"";position:absolute;inset:0;background:radial-gradient(900px 600px at 50% 20%, rgba(18,30,54,0.25), rgba(0,0,0,0.75))}
.topbar{position:sticky;top:0;z-index:5;display:flex;justify-content:space-between;align-items:center;padding:18px 22px;background:linear-gradient(to bottom, rgba(10,14,22,0.95), rgba(10,14,22,0.55));backdrop-filter:blur(12px);border-bottom:1px solid var(--stroke)}
.brand{display:flex;align-items:center;gap:12px}
.logo{width:56px;height:56px;border-radius:16px;object-fit:contain;background:rgba(255,255,255,0.05);padding:8px}
.title{font-size:1.4rem;font-weight:700}
.sub{color:var(--muted)}
.top-actions{display:flex;gap:10px}
.btn{border:1px solid var(--stroke);background:rgba(24,34,52,0.7);color:var(--text);padding:8px 14px;border-radius:12px;cursor:pointer;font-weight:600}
.btn.ghost{background:transparent}
.wrap{position:relative;z-index:2;width:min(1680px,calc(100vw - clamp(18px,4vw,72px)));margin:clamp(14px,2vh,24px) auto clamp(22px,4vh,44px);display:grid;gap:clamp(14px,2vw,24px);padding-bottom:96px}
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(clamp(160px,19vw,220px),1fr));gap:14px}
.card{background:var(--panel);border:1px solid var(--stroke);border-radius:18px;padding:16px;box-shadow:var(--shadow)}
.label{color:var(--muted);font-size:0.9rem}
.value{font-size:1.6rem;font-weight:700;margin-top:4px}
.grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:16px}
.grid > .card{grid-column:span 6}
.grid.two-up > .card{grid-column:span 6}
.grid.one-up > .card,
.grid.full-width > .card{grid-column:1 / -1}
.grid.expanded > .card{grid-column:1 / -1}
@media (min-width: 901px){
  #a2hsCard{display:none}
  #questionsRow{grid-template-columns:repeat(12,minmax(0,1fr))}
  #questionsRow #questionsCard{grid-column:1 / -1}
}
.muted{color:var(--muted)}
.pill-row{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px}
.pill{background:rgba(255,255,255,0.12);border:1px solid rgba(255,255,255,0.25);padding:7px 12px;border-radius:999px;font-size:0.9rem;color:rgba(255,255,255,0.95);box-shadow:0 2px 8px rgba(0,0,0,0.25)}
.pill:hover{background:rgba(255,255,255,0.2)}
.list{margin:10px 0 0 18px;display:grid;gap:6px;color:var(--muted)}
.session-list{display:grid;gap:10px}
.session{border:1px solid var(--stroke);border-radius:14px;padding:10px;background:rgba(10,14,22,0.5)}
.session .meta{font-size:0.85rem;color:var(--muted)}
.session-messages{margin-top:8px;display:grid;gap:6px}
.msgline{font-size:0.95rem;line-height:1.35;color:var(--text)}
.msgline .who{color:var(--muted);font-weight:600;margin-right:6px}
.session-messages.collapsed{max-height:180px;overflow:hidden;mask-image:linear-gradient(to bottom, rgba(0,0,0,1), rgba(0,0,0,0.2))}
.session-toggle{margin-top:8px}
.a2hs{margin-top:12px;color:var(--muted);display:grid;gap:6px}
.voice-bar{position:fixed;left:50%;bottom:16px;transform:translateX(-50%);z-index:6;display:flex;gap:10px;align-items:center;justify-content:space-between;padding:12px 16px;background:rgba(12,16,26,0.92);border:1px solid var(--stroke);backdrop-filter:blur(12px);border-radius:16px;max-width:min(920px, calc(100vw - 24px));width:calc(100vw - 24px);box-shadow:0 16px 40px rgba(0,0,0,0.35)}
.voice-bar .input{flex:1;min-height:40px;border-radius:12px;border:1px solid var(--stroke);background:rgba(10,14,22,0.7);color:var(--text);padding:8px 12px;font-size:0.95rem}
.voice-bar .btn{white-space:nowrap}
.mini-status{font-size:0.85rem;color:var(--muted)}
.question-btn{cursor:pointer}
@media (max-width:1200px){
  .grid > .card,
  .grid.two-up > .card{grid-column:span 12}
}
@media (max-width:900px){
  .wrap{width:min(100vw - 16px,1200px)}
  .top-actions{flex-wrap:wrap}
  .topbar{padding:12px}
  .logo{width:44px;height:44px;border-radius:12px}
  .title{font-size:1.15rem}
  .voice-bar{padding:10px;bottom:10px;border-radius:14px}
  .voice-bar .input{font-size:0.9rem}
}