:root{
  --bg:#0b0f14; --panel:#111827; --muted:#6b7280; --text:#e5e7eb;
  --neon:#22d3ee; --neon2:#a78bfa; --red:#ef4444; --amber:#f59e0b; --teal:#14b8a6; --green:#22c55e;
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, sans-serif;
  background: radial-gradient(1000px 600px at 50% -10%, #1f2937 0%, #0b0f14 60%);
  color:var(--text);
}

a{color:var(--neon); text-decoration:none}
a:hover{ text-shadow:0 0 8px color-mix(in srgb, var(--neon), transparent 50%)}

.header{display:flex; align-items:center; justify-content:space-between; padding:16px 20px;}
.logo{display:flex; gap:10px; align-items:center; font-weight:700; letter-spacing:.4px}
.logo-dot{width:10px; height:10px; border-radius:50%; background: radial-gradient(circle, var(--neon), #0ea5e9 60%);
  box-shadow:0 0 10px var(--neon),0 0 24px color-mix(in srgb, var(--neon), transparent 30%)}
.nav a{margin-left:16px; padding:8px 12px; border-radius:8px;}
.nav a:hover{background:rgba(255,255,255,.04); box-shadow:0 0 10px color-mix(in srgb, var(--neon), transparent 70%)}

.container{max-width:1100px; margin:0 auto; padding:24px}
.hero{margin:40px 0 20px; text-align:center}
.hero h1{font-size:32px; margin:0 0 6px}
.hero p{color:var(--muted)}

.panel{background:linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.02)); border:1px solid rgba(255,255,255,.06);
  border-radius:16px; padding:16px; box-shadow:0 20px 40px rgba(0,0,0,.35)}
.panel .title{font-weight:700; margin-bottom:6px}
.panel .subtitle{color:var(--muted); font-size:14px; margin-bottom:8px}
.list{margin:8px 0; padding-left:18px}
.list li{margin:4px 0}
.badge{display:inline-block; padding:2px 8px; border-radius:999px; font-size:12px; border:1px solid rgba(255,255,255,.14)}
.badge.ok{color:#10b981; border-color:#10b98133}
.badge.missing{color:#f59e0b; border-color:#f59e0b33}

/* Charts */
.gauge{width:120px; height:120px}
.gauge text{font-weight:700; fill:var(--text)}
.bars{display:grid; gap:8px; margin-top:8px}
.barrow{display:flex; align-items:center; gap:10px}
.barrow .label{width:110px; font-size:12px; color:var(--muted)}
.barrow .track{flex:1 1 auto; height:10px; background:#0b1320; border:1px solid rgba(255,255,255,.08); border-radius:999px; overflow:hidden}
.barrow .fill{height:100%; width:0; box-shadow:0 0 10px currentColor}
.fill.llm{color:var(--neon2)}
.fill.tech{color:var(--neon)}
.fill.auth{color:#60a5fa}
.fill.rep{color:#f472b6}

/* Intent distribution */
.intent{display:flex; height:12px; border-radius:999px; overflow:hidden; border:1px solid rgba(255,255,255,.08)}
.intent .i-info{background:#22c55e66}
.intent .i-trans{background:#f59e0b66}
.intent .i-local{background:#14b8a666}

/* Achievements */
.achievements{display:flex; flex-wrap:wrap; gap:8px}
.achievements .ach{padding:6px 10px; border-radius:999px; background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.08)}
.ach.glow{box-shadow:0 0 14px color-mix(in srgb, var(--neon2), transparent 55%)}

/* Confetti */
.confetti{position:fixed; top:-10px; width:8px; height:14px; opacity:.9; transform:translateY(-20px); animation:fall 1.8s ease-out forwards}
@keyframes fall{to{transform:translateY(120vh) rotate(360deg); opacity:0}}

.input-row{display:flex; gap:12px; align-items:center; flex-wrap:wrap; margin-top:16px}
.input{flex:1 1 420px; position:relative}
.input input{width:100%; background:#0b1320; color:var(--text); border:1px solid rgba(255,255,255,.12); border-radius:12px; padding:14px 14px;
  outline:none; transition:border-color .2s, box-shadow .2s}
.input input:focus{border-color:var(--neon); box-shadow:0 0 12px color-mix(in srgb, var(--neon), transparent 60%)}
.input.pulsing input{box-shadow:0 0 0 0 rgba(34,211,238,.7); animation:pulse 1.4s ease-out infinite}
@keyframes pulse{to{box-shadow:0 0 0 16px rgba(34,211,238,0)}}

.toggle{display:flex; gap:8px; background:#0b1320; border:1px solid rgba(255,255,255,.08); padding:6px; border-radius:12px}
.toggle button{background:none; color:var(--text); padding:8px 10px; border:0; border-radius:8px; cursor:pointer}
.toggle button.active{background:rgba(255,255,255,.06); box-shadow:0 0 10px rgba(167,139,250,.35) inset}

.btn{background:linear-gradient(90deg, var(--neon), var(--neon2)); color:#001018; border:0; padding:12px 16px; border-radius:12px; cursor:pointer; font-weight:700}
.btn:hover{filter:brightness(1.08); box-shadow:0 0 18px color-mix(in srgb, var(--neon), transparent 45%)}
.btn.secondary{background:transparent; border:1px solid rgba(255,255,255,.14); color:var(--text)}

.score{height:22px; border-radius:999px; background:#0b1320; overflow:hidden; border:1px solid rgba(255,255,255,.08)}
.score .bar{height:100%; width:0%; transition:width .6s ease; box-shadow:0 0 14px currentColor}

.meter-red{color:var(--red)} .meter-amber{color:var(--amber)} .meter-teal{color:var(--teal)} .meter-green{color:var(--green)}

.grid{display:grid; gap:16px}
@media(min-width:900px){ .grid.cols-2{grid-template-columns:1fr 1fr} }

.footer{margin:40px 0; text-align:center; color:var(--muted)}
.footer a{margin:0 10px}

/* Entry Quiz Overlay */
.quiz{position:fixed; inset:0; display:none; align-items:center; justify-content:center; background:rgba(3,6,12,.8); backdrop-filter:blur(6px); z-index:50}
.quiz.active{display:flex}
.quiz-panel{width:min(560px, 92vw); background:#0b1320; border:1px solid rgba(255,255,255,.08); border-radius:16px; padding:18px}
.quiz.active{background: radial-gradient(800px 400px at 50% -10%, rgba(34,211,238,.15) 0%, rgba(3,6,12,.8) 60%)}
.quiz-panel input.pin{width:52px;max-width:20vw;height:52px;background:#0b1320;border:1px solid rgba(255,255,255,.12);border-radius:12px;color:var(--text);text-align:center;font-size:22px}
.keypad{display:grid; grid-template-columns:repeat(5, 1fr); gap:8px; margin:16px 0}
.keypad button{background:#111827; color:var(--text); border:1px solid rgba(255,255,255,.08); padding:14px; border-radius:10px; cursor:pointer}
.keypad button:hover{box-shadow:0 0 10px rgba(34,211,238,.35)}

.small{font-size:12px; color:var(--muted)}