:root{
  --bg: #0f172a;        /* slate-900 */
  --panel: #111827;     /* gray-900 */
  --panel-2: #0b1222;   /* custom dark */
  --text: #e5e7eb;      /* gray-200 */
  --muted: #9ca3af;     /* gray-400 */
  --accent: #22d3ee;    /* cyan-400 */
  --accent-2: #a78bfa;  /* violet-400 */
  --danger: #ef4444;    /* red-500 */
  --success: #22c55e;   /* green-500 */
  --card: #0b1222;      /* dark card */
  --border: #1f2937;    /* gray-800 */
}
*{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, "Helvetica Neue", Arial, "Noto Sans", "Apple Color Emoji", "Segoe UI Emoji";
  background: radial-gradient(1200px 600px at 10% -10%, #1e293b 0%, transparent 70%),
              radial-gradient(1000px 600px at 110% 0%, #1a2236 0%, transparent 70%),
              var(--bg);
  color: var(--text);
  display:flex; align-items:center; justify-content:center;
  padding: 24px;
}
.app{
  width: min(900px, 100%);
  background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));
  border: 1px solid var(--border);
  border-radius: 20px; overflow:hidden;
  box-shadow: 0 20px 60px rgba(0,0,0,0.35);
}
header{
  padding: 20px 24px; border-bottom: 1px solid var(--border);
  background: linear-gradient(90deg, rgba(34,211,238,0.08), rgba(167,139,250,0.08));
}
.title{ font-size: clamp(20px, 2.8vw, 28px); font-weight: 800; letter-spacing: 0.2px;}
.sub{ color: var(--muted); font-size: 14px; margin-top: 4px}

.content{ padding: 22px; display:grid; gap: 18px; background: linear-gradient(180deg, rgba(255,255,255,0.02), transparent)}

.card{ background: var(--card); border: 1px solid var(--border); border-radius: 16px; padding: 16px;}

.controls{ display:grid; grid-template-columns: 1fr 1fr 1fr auto; gap: 12px; align-items:end}
.field{ display:grid; gap:6px }
label{ font-size: 13px; color: var(--muted)}
select,input[type="number"]{
  width:100%; background:#0a0f1c; color:var(--text); border:1px solid var(--border); border-radius:12px; padding:10px 12px; outline:none;
}
button{
  background: linear-gradient(90deg, var(--accent), var(--accent-2));
  color:#001018; font-weight: 700; border:none; border-radius: 12px; padding: 12px 16px; cursor:pointer;
  transition: transform .05s ease, filter .2s ease; box-shadow: 0 6px 20px rgba(0,0,0,.25);
}
button:active{ transform: translateY(1px) }
button[disabled]{ opacity:.6; cursor:not-allowed; filter:grayscale(.2)}

.hidden{ display:none !important }

.question{ font-size: clamp(18px, 2.2vw, 22px); line-height:1.4; font-weight:700; }

.answers{ display:grid; gap: 10px; margin-top: 8px }
.answer{ background:#0a0f1c; color:var(--text); border:1px solid var(--border); padding:12px 14px; border-radius:12px; text-align:left; cursor:pointer; font-weight:600 }
.answer:hover{ border-color:#284b63 }
.answer.correct{ background: rgba(34,197,94,.1); border-color: var(--success); }
.answer.wrong{ background: rgba(239,68,68,.08); border-color: var(--danger); }
.answer:disabled{ opacity:.9; cursor:default }

.meta{ display:flex; justify-content:space-between; align-items:center; font-size: 13px; color: var(--muted); gap: 12px }
.progress{ position:relative; height: 10px; background:#0a0f1c; border:1px solid var(--border); border-radius: 999px; overflow:hidden }
.bar{ position:absolute; inset:0; width:0; background: linear-gradient(90deg, var(--accent), var(--accent-2)); }

.inline{ display:flex; gap:10px; align-items:center; flex-wrap:wrap }
.tag{ font-size:12px; background:#0a0f1c; border:1px solid var(--border); padding:4px 8px; border-radius:999px }

.center{ display:flex; align-items:center; justify-content:center }
.muted{ color: var(--muted) }

.footer{ display:flex; justify-content:space-between; gap: 12px; flex-wrap:wrap }
.ghost{ background: transparent; color: var(--text); border:1px solid var(--border); }

.loading{ display:flex; gap:10px; align-items:center }
.dot{ width:8px; height:8px; border-radius:999px; background: var(--accent); animation: bounce 1.2s infinite ease-in-out }
.dot:nth-child(2){ animation-delay: .15s }
.dot:nth-child(3){ animation-delay: .3s }
@keyframes bounce{ 0%,80%,100%{ transform:scale(0) } 40%{ transform:scale(1) } }

.result h2{ margin:0 0 6px 0 }
.result .score{ font-size: 40px; font-weight: 900 }