:root{
  --ink:#f4f3ff; --ink-dim:#c7c4e8; --ink-faint:#9b97c9;
  --card:rgba(255,255,255,.07); --card-strong:rgba(255,255,255,.12);
  --line:rgba(255,255,255,.14);
  --acc1:#8b5cf6; --acc2:#ec4899; --acc3:#38bdf8;
  --good:#34d399; --bad:#fb7185; --warn:#fbbf24;
  --grad:linear-gradient(135deg,#8b5cf6,#ec4899);
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;padding:0;min-height:100%}
body{
  font-family:'Heebo',system-ui,-apple-system,'Segoe UI',sans-serif;
  color:var(--ink); background:#17123a; overflow-x:hidden;
  font-size:17px; line-height:1.55;
}
/* ---------- animated backdrop ---------- */
.bg{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.bg-grad{position:absolute;inset:0;
  background:linear-gradient(180deg,#0f0c29 0%,#241d5e 42%,#3b2a7a 68%,#5b3a8e 100%);
  animation:skyShift 24s ease-in-out infinite alternate}
@keyframes skyShift{from{filter:hue-rotate(0deg) brightness(1)}to{filter:hue-rotate(14deg) brightness(1.08)}}
.stars{position:absolute;inset:0;background-repeat:repeat}
.stars::before{content:"";position:absolute;inset:0}
.st1{background-image:radial-gradient(1.5px 1.5px at 20px 30px,#fff,transparent),radial-gradient(1px 1px at 90px 120px,#e0e7ff,transparent),radial-gradient(1.5px 1.5px at 160px 60px,#fff,transparent),radial-gradient(1px 1px at 240px 150px,#c7d2fe,transparent),radial-gradient(1.5px 1.5px at 300px 40px,#fff,transparent);background-size:340px 190px;animation:twinkle 4s ease-in-out infinite}
.st2{background-image:radial-gradient(1px 1px at 40px 80px,#fff,transparent),radial-gradient(1.5px 1.5px at 130px 20px,#e0e7ff,transparent),radial-gradient(1px 1px at 210px 100px,#fff,transparent),radial-gradient(1px 1px at 280px 160px,#c7d2fe,transparent);background-size:340px 190px;animation:twinkle 5.5s ease-in-out infinite 1.2s}
.st3{background-image:radial-gradient(2px 2px at 70px 50px,#fff,transparent),radial-gradient(1px 1px at 190px 140px,#e0e7ff,transparent),radial-gradient(1px 1px at 250px 70px,#fff,transparent);background-size:340px 190px;animation:twinkle 7s ease-in-out infinite .6s}
@keyframes twinkle{0%,100%{opacity:.35}50%{opacity:.9}}
.cloud{position:absolute;width:180px;height:52px;border-radius:999px;background:rgba(255,255,255,.10);filter:blur(2px)}
.cloud::before{content:"";position:absolute;top:-24px;right:36px;width:76px;height:60px;border-radius:50%;background:rgba(255,255,255,.10)}
.cloud::after{content:"";position:absolute;top:-14px;right:96px;width:56px;height:44px;border-radius:50%;background:rgba(255,255,255,.08)}
.cl1{top:9%;animation:drift 46s linear infinite}
.cl2{top:20%;transform:scale(.7);opacity:.7;animation:drift 64s linear infinite -30s}
.cl3{top:32%;transform:scale(.5);opacity:.5;animation:drift 80s linear infinite -55s}
@keyframes drift{from{right:-220px}to{right:110%}}
.bird{position:absolute;top:14%;font-size:20px;opacity:.8;animation:fly 38s linear infinite}
@keyframes fly{from{right:-60px;transform:translateY(0)}25%{transform:translateY(-14px)}50%{transform:translateY(4px)}75%{transform:translateY(-10px)}to{right:110%;transform:translateY(0)}}
.mtn{position:absolute;bottom:0;right:0;width:100%;height:34vh;min-height:180px}
.mtn-front{height:24vh;min-height:130px}
.mtn-mid{height:29vh;min-height:150px}
/* ---------- layout ---------- */
#app{position:relative;z-index:1;max-width:520px;margin:0 auto;padding:18px 16px 60px;min-height:100vh}
.screen{animation:fadeUp .45s ease both}
@keyframes fadeUp{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
.card{background:var(--card);border:1px solid var(--line);border-radius:22px;padding:20px;backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);box-shadow:0 8px 32px rgba(0,0,0,.25)}
.card + .card{margin-top:14px}
h1,h2,h3{margin:0 0 .4em;font-weight:800;line-height:1.25}
.muted{color:var(--ink-dim)} .faint{color:var(--ink-faint)} .small{font-size:.85rem}
.center{text-align:center}
/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border:none;cursor:pointer;
  font-family:inherit;font-weight:700;font-size:1.05rem;color:#fff;
  background:var(--grad);border-radius:999px;padding:14px 30px;
  box-shadow:0 6px 20px rgba(139,92,246,.45),inset 0 1px 0 rgba(255,255,255,.25);
  transition:transform .15s,box-shadow .15s;text-decoration:none}
.btn:active{transform:scale(.95)}
.btn.ghost{background:var(--card-strong);box-shadow:none;border:1px solid var(--line)}
.btn.block{display:flex;width:100%}
.btn.big{font-size:1.2rem;padding:16px 34px}
.btn-row{display:flex;gap:10px;flex-wrap:wrap;justify-content:center;margin-top:16px}
/* ---------- hero ---------- */
.hero{text-align:center;padding:34px 10px 8px}
.hero-logo{font-size:4.6rem;font-weight:900;letter-spacing:-1px;
  background:linear-gradient(135deg,#c4b5fd,#f9a8d4 55%,#7dd3fc);
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
  filter:drop-shadow(0 4px 18px rgba(236,72,153,.35))}
.hero-flag{font-size:2.6rem;display:inline-block;animation:wave 2.6s ease-in-out infinite;transform-origin:bottom right}
@keyframes wave{0%,100%{transform:rotate(-8deg)}50%{transform:rotate(10deg)}}
.tagline{color:var(--ink-dim);font-size:1.1rem;margin-top:2px}
.float-emoji{display:inline-block;font-size:1.6rem;margin:0 6px;animation:bob 3s ease-in-out infinite}
.float-emoji:nth-child(2){animation-delay:.5s}.float-emoji:nth-child(3){animation-delay:1s}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}
/* ---------- grade picker ---------- */
.grade-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-top:14px}
.grade-btn{background:var(--card);border:1.5px solid var(--line);border-radius:16px;padding:14px 4px;
  color:var(--ink);font-family:inherit;font-size:1.05rem;font-weight:700;cursor:pointer;transition:all .15s}
.grade-btn:active{transform:scale(.93)}
.grade-btn.sel{background:var(--grad);border-color:transparent;box-shadow:0 4px 16px rgba(139,92,246,.5)}
/* ---------- home ---------- */
.greet{display:flex;align-items:center;gap:12px;margin-bottom:14px}
.greet .ball{font-size:2rem;animation:bob 3s ease-in-out infinite}
.stat-row{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:14px 0}
.stat{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:12px 6px;text-align:center}
.stat .num{font-size:1.5rem;font-weight:900;background:linear-gradient(135deg,#c4b5fd,#7dd3fc);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.stat .lbl{font-size:.78rem;color:var(--ink-dim)}
.climb{position:relative;height:120px;margin:8px 0 2px;border-radius:18px;overflow:hidden;
  background:linear-gradient(180deg,rgba(56,189,248,.16),rgba(139,92,246,.10));border:1px solid var(--line)}
.climb svg{position:absolute;inset:0;width:100%;height:100%}
.climb .climber{position:absolute;font-size:1.5rem;transition:all 1s ease;filter:drop-shadow(0 2px 4px rgba(0,0,0,.4))}
.climb .peak-label{position:absolute;top:6px;left:10px;font-size:.72rem;color:var(--ink-faint)}
.subj-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:14px}
.subj{position:relative;background:var(--card);border:1px solid var(--line);border-radius:20px;padding:16px 14px;cursor:pointer;
  transition:transform .15s,border-color .15s;overflow:hidden}
.subj:active{transform:scale(.96)}
.subj .glow{position:absolute;top:-30px;left:-30px;width:90px;height:90px;border-radius:50%;opacity:.25;filter:blur(18px)}
.subj .icon{width:46px;height:46px;border-radius:14px;display:flex;align-items:center;justify-content:center;font-size:1.5rem;margin-bottom:8px;box-shadow:inset 0 1px 0 rgba(255,255,255,.3)}
.subj .nm{font-weight:800;font-size:1.02rem}
.subj .lv{font-size:.75rem;color:var(--ink-dim);margin:2px 0 8px}
.bar{height:7px;border-radius:99px;background:rgba(255,255,255,.12);overflow:hidden}
.bar > i{display:block;height:100%;border-radius:99px;background:var(--grad);transition:width .8s ease}
.bar.thin{height:5px}
/* ---------- test ---------- */
.test-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px}
.test-head .who{display:flex;align-items:center;gap:8px;font-weight:800}
.test-head .who .ic{font-size:1.3rem}
.pill{background:var(--card-strong);border:1px solid var(--line);border-radius:999px;padding:4px 12px;font-size:.8rem;color:var(--ink-dim)}
.progress{height:9px;border-radius:99px;background:rgba(255,255,255,.1);overflow:hidden;margin-bottom:16px}
.progress > i{display:block;height:100%;border-radius:99px;background:linear-gradient(90deg,#38bdf8,#8b5cf6,#ec4899);transition:width .4s ease}
.qcard{position:relative}
.q-topic{display:inline-block;background:rgba(139,92,246,.22);border:1px solid rgba(139,92,246,.4);color:#ddd6fe;border-radius:999px;padding:3px 12px;font-size:.75rem;margin-bottom:10px}
.q-text{font-size:1.25rem;font-weight:700;margin-bottom:16px;line-height:1.5}
.q-text .ltr{direction:ltr;unicode-bidi:isolate;display:inline-block}
.opts{display:flex;flex-direction:column;gap:10px}
.opt{display:flex;align-items:center;gap:12px;text-align:right;width:100%;
  background:var(--card);border:1.5px solid var(--line);border-radius:16px;padding:14px 16px;
  color:var(--ink);font-family:inherit;font-size:1.05rem;font-weight:600;cursor:pointer;transition:all .15s}
.opt:active{transform:scale(.98)}
.opt .key{min-width:30px;height:30px;border-radius:10px;background:rgba(255,255,255,.12);display:flex;align-items:center;justify-content:center;font-size:.85rem;font-weight:800}
.opt .ltr{direction:ltr;unicode-bidi:isolate}
.opt.correct{background:rgba(52,211,153,.18);border-color:var(--good);animation:pop .4s ease}
.opt.correct .key{background:var(--good);color:#052e1b}
.opt.wrong{background:rgba(251,113,133,.16);border-color:var(--bad);animation:shake .4s ease}
.opt.wrong .key{background:var(--bad);color:#3d0710}
.opt.dim{opacity:.45}
@keyframes pop{0%{transform:scale(1)}40%{transform:scale(1.03)}100%{transform:scale(1)}}
@keyframes shake{0%,100%{transform:translateX(0)}25%{transform:translateX(6px)}75%{transform:translateX(-6px)}}
.num-input{display:flex;gap:10px}
.num-input input{flex:1;background:rgba(255,255,255,.1);border:1.5px solid var(--line);border-radius:16px;
  padding:14px 16px;color:var(--ink);font-family:inherit;font-size:1.2rem;font-weight:700;text-align:center;outline:none}
.num-input input:focus{border-color:var(--acc1)}
.exp{margin-top:14px;border-radius:16px;padding:14px 16px;font-size:.95rem;border:1px solid var(--line);
  background:rgba(56,189,248,.1);animation:fadeUp .35s ease both}
.exp b{color:#7dd3fc}
.fb-line{margin-top:12px;font-weight:800;font-size:1.05rem;text-align:center;animation:pop .4s ease}
.fb-line.good{color:var(--good)} .fb-line.bad{color:var(--bad)}
/* ---------- results ---------- */
.ring-wrap{display:flex;align-items:center;gap:18px}
.ring{--p:0;width:104px;height:104px;border-radius:50%;flex:none;display:flex;align-items:center;justify-content:center;
  background:conic-gradient(var(--acc1) calc(var(--p)*1%),rgba(255,255,255,.1) 0);animation:fadeUp .6s ease both}
.ring > div{width:80px;height:80px;border-radius:50%;background:#241d5e;display:flex;flex-direction:column;align-items:center;justify-content:center}
.ring .val{font-size:1.7rem;font-weight:900;line-height:1}
.ring .of{font-size:.7rem;color:var(--ink-faint)}
.topic-row{display:flex;align-items:center;gap:10px;margin:9px 0}
.topic-row .tn{flex:0 0 42%;font-size:.9rem}
.topic-row .bar{flex:1}
.topic-row .tv{flex:0 0 38px;text-align:left;font-size:.85rem;font-weight:800;color:var(--ink-dim)}
.rev-q{border-top:1px solid var(--line);padding:12px 0}
.rev-q:first-child{border-top:none}
.rev-q .mark{font-weight:800}
.rev-q .mark.good{color:var(--good)} .rev-q .mark.bad{color:var(--bad)}
.trophy{font-size:3.4rem;display:inline-block;animation:trophyIn .8s cubic-bezier(.2,1.6,.4,1) both}
@keyframes trophyIn{from{transform:scale(0) rotate(-30deg);opacity:0}to{transform:scale(1) rotate(0);opacity:1}}
/* ---------- confetti ---------- */
#confetti{position:fixed;inset:0;pointer-events:none;z-index:50;overflow:hidden}
.cf{position:absolute;top:-12px;width:9px;height:14px;border-radius:2px;animation:cfall linear forwards}
@keyframes cfall{to{transform:translateY(105vh) rotate(720deg)}}
/* ---------- misc ---------- */
.sec-title{display:flex;align-items:center;gap:8px;font-size:1.05rem;font-weight:800;margin:20px 0 4px}
.back-btn{background:none;border:none;color:var(--ink-dim);font-family:inherit;font-size:.95rem;font-weight:600;cursor:pointer;padding:6px 2px;display:inline-flex;align-items:center;gap:6px}
.badge-due{display:inline-block;background:var(--bad);color:#fff;border-radius:99px;font-size:.72rem;font-weight:800;padding:1px 8px;margin-right:6px}
.toast{position:fixed;bottom:24px;right:50%;transform:translateX(50%);background:#312e81;border:1px solid var(--line);
  padding:10px 20px;border-radius:99px;font-size:.9rem;z-index:60;animation:fadeUp .3s ease both;box-shadow:0 8px 24px rgba(0,0,0,.4)}
.empty-note{text-align:center;color:var(--ink-faint);padding:14px}
@media (max-width:360px){.subj-grid{grid-template-columns:1fr 1fr}.grade-grid{grid-template-columns:repeat(3,1fr)}}