/* ============ Kids Study Hub — Design Tokens (from OpenDesign) ============ */
@font-face{
  font-family:'Inter';font-style:normal;font-weight:100 900;font-display:swap;
  src:url('inter-var.woff2') format('woff2');
  unicode-range:U+0102-01B0,U+1EA0-1EF9,U+20AB;
}
@font-face{
  font-family:'Inter';font-style:normal;font-weight:100 900;font-display:swap;
  src:url('inter-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+2000-206F;
}

:root{
  --primary:#4A90D9; --primaryLight:#7AB3F0; --primaryDeep:#2F6DB3;
  --success:#52C41A; --successDark:#3E9413;
  --warning:#FAAD14; --warningDark:#C4880B;
  --error:#FF4D4F; --errorDark:#D32F2F;
  --background:#F5F7FA; --surface:#FFFFFF;
  --text:#2C3E50; --textSecondary:#7F8C8D; --border:#E0E0E0;
  --font:'Inter','SF Pro',Roboto,sans-serif;

  --fs-xs:12px; --fs-sm:14px; --fs-md:16px; --fs-lg:18px; --fs-xl:24px; --fs-xxl:32px;
  --fs-question:34px; --fs-answer:24px; --fs-timer:52px;

  --sp-xs:4px; --sp-sm:8px; --sp-md:16px; --sp-lg:24px; --sp-xl:32px; --sp-xxl:48px;

  --r-sm:4px; --r-md:8px; --r-lg:16px; --r-xl:14px; --r-full:9999px;

  --shadow-sm:0 1px 2px rgba(44,62,80,0.05);
  --shadow-md:0 4px 6px rgba(44,62,80,0.10);
  --shadow-lg:0 10px 15px rgba(44,62,80,0.10);
}

*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent;}
html,body{height:100%;}
body{
  font-family:var(--font);color:var(--text);background:var(--background);
  -webkit-font-smoothing:antialiased;line-height:1.5;overflow-x:hidden;
}

.screen{display:none;min-height:100vh;min-height:100dvh;}
.screen.active{display:block;animation:fade .25s ease-out;}
@keyframes fade{from{opacity:0;transform:translateY(8px);}to{opacity:1;transform:none;}}
@media (prefers-reduced-motion:reduce){
  .screen.active{animation:none;}
  *{transition-duration:.01ms !important;animation-duration:.01ms !important;}
}

/* ============ WELCOME ============ */
.welcome-inner{max-width:640px;margin:0 auto;padding:var(--sp-xxl) var(--sp-md);
  display:flex;flex-direction:column;align-items:center;gap:var(--sp-lg);}
.greet{font-size:42px;font-weight:800;text-align:center;}
.chip-row{display:flex;flex-wrap:wrap;gap:var(--sp-md);justify-content:center;}
.chip{font-family:var(--font);font-size:21px;font-weight:700;padding:12px 24px;
  border-radius:var(--r-full);border:2px solid var(--border);background:var(--surface);
  color:var(--text);cursor:pointer;min-height:48px;
  transition:border-color .2s ease-out,background .2s ease-out;}
.chip.selected{border-color:var(--primary);background:#EBF3FC;color:var(--primaryDeep);}
.avatar-row{display:flex;gap:var(--sp-md);}
.avatar{font-size:36px;width:76px;height:76px;border-radius:50%;border:2px solid var(--border);
  background:var(--surface);cursor:pointer;transition:transform .15s ease-out;}
.avatar.selected{outline:4px solid var(--primary);outline-offset:2px;transform:scale(1.05);}
.avatar:active{transform:scale(0.94);}
.btn-primary{font-family:var(--font);font-size:23px;font-weight:800;color:#fff;background:var(--primary);
  border:none;border-radius:var(--r-xl);padding:16px 40px;cursor:pointer;min-height:56px;
  box-shadow:0 4px 0 var(--primaryDeep);transition:transform .1s ease-out,box-shadow .1s ease-out;}
.btn-primary:active{transform:translateY(4px);box-shadow:0 2px 0 var(--primaryDeep);}
.btn-start{width:100%;max-width:320px;}
.link-btn{background:none;border:none;color:var(--primaryDeep);font-family:var(--font);
  font-size:16px;font-weight:600;cursor:pointer;text-decoration:underline;padding:8px;min-height:44px;}

/* ============ QUIZ ============ */
.quiz-inner{max-width:720px;margin:0 auto;padding:var(--sp-lg) var(--sp-md);}
.topline{display:flex;justify-content:space-between;align-items:center;margin-bottom:var(--sp-sm);}
.progress-caption{font-size:13px;font-weight:600;color:var(--textSecondary);}
.streak-chip{font-size:14px;font-weight:700;color:var(--warningDark);background:#FFF3E0;
  padding:4px 12px;border-radius:var(--r-full);}
.progress-track{height:16px;background:#E4E9F0;border-radius:var(--r-full);overflow:hidden;}
.progress-fill{height:100%;width:0;background:linear-gradient(90deg,var(--primaryLight),var(--primary));
  border-radius:var(--r-full);transition:width .25s ease-out;}

.question-card{background:var(--surface);border:2px solid #EAF0F8;border-radius:var(--r-lg);
  box-shadow:var(--shadow-md);padding:36px 40px;margin-top:var(--sp-lg);
  display:flex;flex-direction:column;gap:var(--sp-lg);}
.topic-label{font-size:14px;font-weight:600;color:var(--textSecondary);}
.question-text{font-size:var(--fs-question);font-weight:700;line-height:1.5;text-align:center;}
.question-image-wrap{text-align:center;margin:8px 0;max-width:100%;}
.question-diagram{max-width:100%;max-height:260px;border-radius:var(--r-md);border:1.5px solid #E2E8F0;box-shadow:var(--shadow-sm);background:#fff;padding:8px;object-fit:contain;}
.fraction{display:inline-flex;flex-direction:column;vertical-align:middle;text-align:center;padding:0 4px;line-height:1.05;font-size:0.95em;}
.fraction .num{border-bottom:2px solid currentColor;padding-bottom:2px;font-weight:700;}
.fraction .den{padding-top:2px;font-weight:700;}
.answers-grid{display:grid;grid-template-columns:1fr 1fr;gap:var(--sp-md);}
.answers-grid.one-row{grid-template-columns:repeat(4,1fr);}
.answer-btn{display:flex;align-items:center;gap:12px;min-height:80px;padding:12px 16px;
  background:var(--surface);border:2px solid var(--border);border-radius:var(--r-xl);
  font-family:var(--font);font-size:var(--fs-answer);font-weight:600;color:var(--text);
  cursor:pointer;text-align:left;box-shadow:var(--shadow-sm);
  transition:border-color .2s ease-out,background .2s ease-out,transform .1s ease-out;}
.answer-btn:active{transform:scale(0.98);}
.answer-btn.selected{border-color:var(--primary);background:#EBF3FC;}
.answer-btn.correct{border-color:var(--success);background:#F0FBEB;color:#2E7D0F;}
.answer-btn.wrong{border-color:var(--error);background:#FEF0F0;color:#B31B1B;}
.answer-btn.correct .key,.answer-btn.wrong .key{color:#fff;}
.answer-btn.correct .key{background:var(--success);}
.answer-btn.wrong .key{background:var(--error);}
.answer-btn.locked{cursor:default;opacity:.85;}
.key{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;
  flex:0 0 44px;background:#EBF3FC;color:var(--primaryDeep);border-radius:10px;
  font-size:20px;font-weight:800;}
.answers-grid.one-row .answer-btn{min-height:68px;font-size:20px;}
.answers-grid.one-row .key{width:36px;height:36px;flex-basis:36px;font-size:18px;}

.fill-input-wrap{display:flex;gap:12px;}
.fill-input-wrap input{flex:1;font-family:var(--font);font-size:24px;font-weight:600;
  padding:16px;border:2px solid var(--border);border-radius:var(--r-xl);min-height:80px;color:var(--text);}
.fill-input-wrap input:focus{outline:none;border-color:var(--primary);}

/* ============ ONBOARDING ============ */
.text-input{width:100%;max-width:420px;font-family:var(--font);font-size:24px;font-weight:600;
  padding:16px 20px;border:2px solid var(--border);border-radius:var(--r-xl);color:var(--text);
  text-align:center;background:#fff;}
.text-input:focus{outline:none;border-color:var(--primary);}
.text-input::placeholder{color:var(--textSecondary);font-weight:400;}

.voice-wrap{display:flex;flex-direction:column;align-items:center;gap:8px;}
.voice-btn{width:88px;height:88px;border-radius:50%;border:none;background:var(--primary);
  font-size:38px;cursor:pointer;color:#fff;box-shadow:0 6px 0 var(--primaryDeep);
  transition:transform .1s ease-out,box-shadow .1s ease-out,box-shadow .2s ease-out;}
.voice-btn.listening{transform:translateY(4px);box-shadow:0 2px 0 var(--primaryDeep),0 0 0 10px rgba(74,144,217,0.18);}
.voice-label{font-size:15px;font-weight:700;color:var(--primaryDeep);letter-spacing:.08em;}
.btn-ghost{background:none;border:2px solid var(--border);border-radius:var(--r-xl);
  padding:12px 24px;font-family:var(--font);font-size:16px;font-weight:600;color:var(--textSecondary);
  cursor:pointer;min-height:48px;align-self:center;}

/* ============ RESULT ============ */
.result-inner{max-width:640px;margin:0 auto;padding:var(--sp-xxl) var(--sp-md);
  display:flex;flex-direction:column;align-items:center;gap:var(--sp-lg);text-align:center;}
.mark-circle{width:120px;height:120px;border-radius:50%;display:flex;align-items:center;
  justify-content:center;font-size:56px;box-shadow:0 6px 0 var(--shadow-md);color:#fff;}
.mark-circle.ok{background:var(--success);box-shadow:0 6px 0 var(--successDark);}
.mark-circle.bad{background:var(--error);box-shadow:0 6px 0 var(--errorDark);}
.verdict{font-size:32px;font-weight:800;}
.explanation-panel{width:100%;font-size:22px;line-height:1.55;padding:24px;border-radius:var(--r-lg);
  background:var(--surface);border:2px solid var(--border);}
.explanation-panel.ok{border-color:#52C41A;background:#F0FBEB;color:#2E7D0F;}
.explanation-panel.bad{border-color:#FF4D4F;background:#FEF0F0;color:#B31B1B;}
.btn-continue{width:100%;max-width:320px;}

/* ============ CHALLENGE ============ */
.timer{font-size:var(--fs-timer);font-weight:800;font-variant-numeric:tabular-nums;
  padding:6px 28px;border-radius:var(--r-xl);border:3px solid var(--success);background:#F0FBEB;color:#2E7D0F;}
.timer[data-state="warn"]{background:#FFF3E0;border-color:var(--warning);color:#B25E00;}
.timer[data-state="danger"]{background:#FEF0F0;border-color:var(--error);color:#B31B1B;}

/* ============ PARENT ============ */
.parent-inner{max-width:900px;margin:0 auto;padding:var(--sp-lg) var(--sp-md);}
.parent-header{display:flex;align-items:center;gap:var(--sp-md);margin-bottom:var(--sp-lg);}
.parent-header h2{font-size:26px;font-weight:800;}
.parent-grid{display:grid;grid-template-columns:2fr 1fr;gap:var(--sp-lg);}
.panel{background:var(--surface);border:2px solid var(--border);border-radius:var(--r-lg);
  padding:var(--sp-lg);box-shadow:var(--shadow-sm);}
.panel h3{font-size:18px;font-weight:700;margin-bottom:var(--sp-md);}
.bar-chart{display:flex;align-items:flex-end;gap:12px;height:180px;}
.bar-chart .bar{flex:1;background:#E4E9F0;border-radius:6px 6px 0 0;position:relative;min-height:8px;}
.bar-chart .bar .fill{position:absolute;bottom:0;left:0;right:0;background:linear-gradient(180deg,var(--primaryLight),var(--primary));border-radius:6px 6px 0 0;}
.bar-chart .bar.low .fill{background:#C9D4E0;}
.bar-chart .bar .day{position:absolute;bottom:-22px;left:0;right:0;text-align:center;font-size:12px;color:var(--textSecondary);}
.stat-cards{display:flex;gap:var(--sp-md);margin-top:var(--sp-lg);}
.stat-card{flex:1;background:var(--background);border-radius:var(--r-md);padding:var(--sp-md);text-align:center;}
.stat-card .num{font-size:28px;font-weight:800;color:var(--primaryDeep);}
.stat-card .lbl{font-size:13px;color:var(--textSecondary);}
.strong-list{list-style:none;display:flex;flex-direction:column;gap:12px;}
.strong-list li{display:flex;justify-content:space-between;align-items:center;gap:8px;font-size:16px;}
.tag-pill{font-size:12px;font-weight:700;padding:4px 10px;border-radius:var(--r-full);}
.tag-pill.vung{background:#F0FBEB;color:#2E7D0F;}
.tag-pill.canon{background:#FFF3E0;color:#B25E00;}

/* ============ CONFETTI ============ */
#confetti-layer{position:fixed;inset:0;pointer-events:none;overflow:hidden;z-index:9999;}
.confetti-piece{position:absolute;top:-20px;font-size:24px;animation:fall 1200ms ease-out forwards;}
@keyframes fall{to{transform:translateY(105vh) rotate(540deg);opacity:0;}}

/* ============ RESPONSIVE ============ */
@media (max-width:700px){
  .greet{font-size:32px;}
  .question-text{font-size:24px;}
  .answer-btn{font-size:18px;min-height:72px;}
  .question-card{padding:20px;}
  .answers-grid,.answers-grid.one-row{grid-template-columns:1fr;}
  .timer{font-size:34px;}
  .parent-grid{grid-template-columns:1fr;}
  .chip{font-size:18px;}
}