:root{
  --navy:#071233;
  --midnavy:#0f3b6e;
  --electric:#00b3ff;
  --accent:#1eb0ff;
  --muted:#9fb5c9;
  --card:#ffffff;
  --glass: rgba(255,255,255,0.06);
  --bg-grad1:#05102a;
  --bg-grad2:#08284a;
  --radius:16px;
  font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, Arial;
}
*{box-sizing:border-box}
body{
  margin:0;
  background: linear-gradient(180deg,var(--bg-grad1),var(--bg-grad2));
  min-height:100vh;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:15px;
  -webkit-font-smoothing:antialiased;
  color:#e9f5ff;
}
.fade-in{animation:fadeIn 400ms ease both}
@keyframes fadeIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}

#app{width:100%;max-width:620px;margin:22px;position:relative}
.screen{display:block}
.hidden{display:none}

/* Glass card */
.card{border-radius:18px;padding:18px;box-shadow:0 12px 40px rgba(2,6,23,0.6)}
.glass{background: linear-gradient(180deg, rgba(255,255,255,0.04), rgba(255,255,255,0.02)); border: 1px solid rgba(255,255,255,0.06); backdrop-filter: blur(6px)}

/* Login */
.login-card{text-align:center;padding:28px}
.logo-circle{width:108px;height:108px;border-radius:999px;margin:0 auto;background:linear-gradient(180deg,#083059,#0b4b86);display:flex;align-items:center;justify-content:center;overflow:hidden;border:4px solid rgba(255,255,255,0.06)}
.logo-circle img{width:90px;height:90px;object-fit:cover}
.brand{margin:12px 0 2px;color:#fff;font-size:20px;letter-spacing:1px}
.brand-sub{margin:0;color:#cfeeff;font-size:13px;font-weight:600}
.muted{color:var(--muted);font-size:13px;margin-bottom:14px}
input{width:100%;padding:12px 14px;border-radius:12px;border:1px solid rgba(255,255,255,0.06);margin-bottom:12px;font-size:15px;background:rgba(255,255,255,0.03);color:#fff}
input::placeholder{color:rgba(255,255,255,0.55)}
button{cursor:pointer;border:0;padding:12px 14px;border-radius:12px;font-weight:700;transition:transform 120ms ease, box-shadow 120ms ease}
button:active{transform:translateY(1px)}
.primary{background:linear-gradient(90deg,var(--electric),var(--accent));color:#042233;display:block;width:100%;box-shadow:0 10px 30px rgba(0,176,255,0.12)}
.small{padding:8px 10px;border-radius:10px;font-size:13px}
.ghost{background:transparent;color:#fff;border:1px solid rgba(255,255,255,0.09);padding:10px 12px;border-radius:10px}
.small-ghost{background:transparent;color:#fff;border:1px solid rgba(255,255,255,0.12);padding:8px 10px;border-radius:10px}
.link{background:transparent;color:#cfeeff;border:0;text-decoration:underline}
.login-actions{display:flex;gap:10px;justify-content:center;margin-top:10px}
.container{padding:14px}

/* Topbar */
.topbar{display:flex;align-items:center;justify-content:space-between;padding:8px 14px;border-radius:12px;margin-bottom:8px}
.glass-top{background:linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01)); border: 1px solid rgba(255,255,255,0.04); backdrop-filter: blur(4px)}

/* grid */
.grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}
.icons-grid .card{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:18px;font-weight:700;min-height:120px;transition:transform 160ms ease, box-shadow 160ms ease}
.icons-grid .card:hover{transform:translateY(-8px);box-shadow:0 12px 36px rgba(3,10,25,0.5)}
.mode-card{background:#fff;padding:18px;border-radius:12px;box-shadow:0 10px 24px rgba(0,0,0,0.06);color:#0b2340}
.mode-card h4{margin:0}

/* chapters grid (buttons) */
.chapters-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}
.chapter-btn{background:linear-gradient(180deg,rgba(255,255,255,0.03),rgba(255,255,255,0.02));padding:12px;border-radius:12px;border:1px solid rgba(255,255,255,0.03);display:flex;align-items:center;justify-content:center;gap:10px;cursor:pointer;min-height:56px}
.chapter-btn .label{font-weight:700;color:#e8f7ff;text-align:center}
.chapter-btn .meta{font-size:12px;color:var(--muted)}

/* lists / items */
.list{display:flex;flex-direction:column;gap:10px}
.list .item{background:linear-gradient(180deg,rgba(255,255,255,0.03),rgba(255,255,255,0.02));padding:12px;border-radius:12px;border:1px solid rgba(255,255,255,0.03)}
.back{background:transparent;color:#fff;border:0;padding:8px 10px}
.progress{height:12px;background:rgba(255,255,255,0.04);border-radius:8px;overflow:hidden;margin-bottom:12px}
.progress > div{height:100%;background:linear-gradient(90deg,var(--electric),var(--accent));width:0%}

/* question area: strong contrast */
.question-area{padding:20px;border-radius:12px;box-shadow:0 12px 28px rgba(2,6,23,0.45);color:#ffffff}
.question-area .q-title{font-weight:800;color:#ffffff;font-size:18px;margin-bottom:8px}
.question-area .q-meta{color:var(--muted);font-size:13px;margin-bottom:6px}
.options-area{margin-top:12px;display:flex;flex-direction:column;gap:12px}
.option{background:linear-gradient(180deg,rgba(255,255,255,0.98),rgba(255,255,255,0.96));padding:12px;border-radius:12px;display:flex;gap:12px;align-items:center;cursor:pointer;border:1px solid rgba(2,6,23,0.03);box-shadow:0 8px 18px rgba(2,6,23,0.04)}
.option .opt-key{width:48px;height:48px;border-radius:12px;background:#e9f4ff;display:flex;align-items:center;justify-content:center;font-weight:800;color:var(--midnavy)}
.option .opt-text{color:var(--midnavy);font-weight:700}
.option:hover{transform:translateY(-4px)}
.timer{background:linear-gradient(90deg,var(--electric),var(--accent));padding:8px 12px;border-radius:12px;color:#042233;font-weight:700}
.error{color:#ff8a8a;margin-bottom:8px}
.score-text{margin:14px 0;font-weight:700}
.footer{position:fixed;bottom:8px;left:0;right:0;text-align:center;color:#ffffffcc;font-size:12px}

/* result grid */
.result-grid{display:flex;gap:16px;align-items:center;flex-wrap:wrap}
.result-stats{min-width:220px;color:#fff}
.result-stats .big{font-size:20px;font-weight:800}
.result-stats .small{color:var(--muted);margin-top:6px}

/* modal */
.modal{position:fixed;left:0;right:0;top:0;bottom:0;background:linear-gradient(180deg, rgba(2,6,23,0.6), rgba(2,6,23,0.5));display:flex;align-items:center;justify-content:center;z-index:80;opacity:0;pointer-events:none;transition:opacity 180ms ease}
.modal .modal-card{width:94%;max-width:920px;padding:18px;border-radius:12px}
.modal.hidden{opacity:0;pointer-events:none}
.modal:not(.hidden){opacity:1;pointer-events:auto}

/* emoji / subject */
.emoji { font-size:36px; margin-bottom:8px; transform:translateY(-2px) }
.subject-title { font-size:16px; margin-top:6px; color:#e8f7ff; font-weight:700; text-align:center; }

/* question image */
.q-img{
  width:100%;
  max-width:380px;
  display:block;
  margin:12px auto;
  border-radius:8px;
  box-shadow:0 6px 18px rgba(0,0,0,0.25);
}

/* result canvas fixed height */
#resultChart {
  width: 100% !important;
  height: 260px !important;
  max-height: 260px !important;
  display: block;
}

@media (max-width:480px){
  #app{margin:8px}
  .grid{grid-template-columns:repeat(1,1fr)}
  .chapters-grid{grid-template-columns:repeat(1,1fr)}
  .logo-circle{width:86px;height:86px}
}