:root{
  --bg:#12131a; --card:#1d1f2b; --card2:#262939; --line:#33374b;
  --tx:#f4f5fb; --tx2:#a9adc4; --acc:#7c5cff; --acc2:#00d4ff;
  --ok:#22c55e; --okbg:#0f3d24; --bad:#ef4444; --badbg:#44161a;
  --warn:#fbbf24; --fire:#ff7a1a;
  --m1:#ff4d6d; --m2:#fbbf24; --m3:#22c55e; --m4:#38bdf8;
  --fs:18px; --r:18px;
}
body.light{
  --bg:#f3f4fa; --card:#ffffff; --card2:#eceefa; --line:#d9dcee;
  --tx:#161827; --tx2:#5b607a; --okbg:#dcfce7; --badbg:#fee2e2;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;background:var(--bg);color:var(--tx);font-family:system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;font-size:var(--fs);line-height:1.45}
body{overscroll-behavior:none;user-select:none;-webkit-user-select:none}
#app{max-width:640px;margin:0 auto;padding:14px 16px 90px;min-height:100vh}
#fx{position:fixed;inset:0;pointer-events:none;z-index:50;width:100%;height:100%}
h1,h2,h3{margin:.2em 0 .5em;line-height:1.2}
h1{font-size:1.5em} h2{font-size:1.25em} h3{font-size:1.05em}
.muted{color:var(--tx2)} .small{font-size:.8em} .center{text-align:center}
.row{display:flex;gap:10px;align-items:center} .grow{flex:1}
.card{background:var(--card);border-radius:var(--r);padding:16px;margin:12px 0;border:1px solid var(--line)}
button{font:inherit;color:inherit;border:0;cursor:pointer}
.btn{display:block;width:100%;padding:16px;border-radius:16px;background:var(--card2);font-weight:700;font-size:1em;margin:8px 0;border:2px solid var(--line);transition:transform .08s}
.btn:active{transform:scale(.97)}
.btn.pri{background:linear-gradient(135deg,var(--acc),#b04dff);border:0;color:#fff;box-shadow:0 6px 0 #4b2fb0}
.btn.pri:active{box-shadow:0 2px 0 #4b2fb0;transform:translateY(4px)}
.btn.go{background:linear-gradient(135deg,#22c55e,#10b981);border:0;color:#fff;box-shadow:0 6px 0 #0d7a3f}
.btn.go:active{box-shadow:0 2px 0 #0d7a3f;transform:translateY(4px)}
.btn.ghost{background:transparent}
.btn.sm{padding:10px;font-size:.85em;border-radius:12px}
.big{font-size:1.25em;padding:22px}

/* topo */
.top{display:flex;align-items:center;gap:10px;margin-bottom:6px}
.pill{background:var(--card);border:1px solid var(--line);border-radius:999px;padding:6px 12px;font-weight:800;font-size:.85em;white-space:nowrap}
.pill.fire{color:var(--fire)} .pill.xp{color:var(--acc2)}
.lvl{display:flex;align-items:center;gap:10px}
.lvlnum{width:52px;height:52px;border-radius:50%;background:linear-gradient(135deg,var(--acc),var(--acc2));display:grid;place-items:center;font-weight:900;font-size:1.2em;color:#fff;flex:none}
.bar{height:12px;background:var(--card2);border-radius:99px;overflow:hidden}
.bar>i{display:block;height:100%;background:linear-gradient(90deg,var(--acc),var(--acc2));border-radius:99px;transition:width .6s}
.bar.ok>i{background:var(--ok)}

/* grade de modos */
.grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.tile{background:var(--card);border:1px solid var(--line);border-radius:18px;padding:14px;text-align:left;min-height:104px;display:flex;flex-direction:column;justify-content:space-between;transition:transform .08s}
.tile:active{transform:scale(.96)}
.tile .ic{font-size:1.9em;line-height:1}
.tile b{display:block;margin-top:6px;font-size:.95em}
.tile span{font-size:.72em;color:var(--tx2)}
.tile .badge{align-self:flex-start;background:var(--bad);color:#fff;border-radius:99px;padding:1px 8px;font-size:.7em;font-weight:800}

/* anel meta diaria */
.ring{position:relative;width:92px;height:92px;flex:none}
.ring svg{transform:rotate(-90deg)}
.ring .v{position:absolute;inset:0;display:grid;place-items:center;text-align:center;font-weight:900;font-size:.95em;line-height:1.1}

/* modulos */
.mod{display:flex;gap:10px;align-items:center;margin:10px 0}
.mod .dot{width:12px;height:12px;border-radius:50%;flex:none}

/* quiz */
.qhead{display:flex;align-items:center;gap:10px;margin-bottom:10px}
.x{width:40px;height:40px;border-radius:12px;background:var(--card);display:grid;place-items:center;font-size:1.2em;flex:none;border:1px solid var(--line)}
.segs{display:flex;gap:3px;flex:1}
.segs i{flex:1;height:10px;border-radius:4px;background:var(--card2)}
.segs i.ok{background:var(--ok)} .segs i.bad{background:var(--bad)} .segs i.cur{background:var(--acc2);animation:pulse 1s infinite}
@keyframes pulse{50%{opacity:.45}}
.combo{font-weight:900;color:var(--fire);min-width:56px;text-align:right;font-size:.95em}
.combo.hot{animation:shake .4s}
@keyframes shake{25%{transform:rotate(-8deg) scale(1.2)}75%{transform:rotate(8deg) scale(1.2)}}
.tag{display:inline-block;font-size:.7em;font-weight:800;padding:3px 9px;border-radius:99px;margin-right:6px;margin-bottom:6px;color:#111}
.qtext{font-size:1.12em;font-weight:650;margin:6px 0 12px}
.qtext mark{background:#fbbf24;color:#111;border-radius:4px;padding:0 3px;font-weight:900}
.plate{display:flex;justify-content:center;gap:12px;margin:6px 0 14px}
.plate img{width:128px;height:128px;object-fit:contain;filter:drop-shadow(0 4px 10px rgba(0,0,0,.35))}
.emo{width:118px;height:118px;border-radius:14px;display:grid;place-items:center;font-size:3em;border:4px solid #fff;box-shadow:0 4px 12px rgba(0,0,0,.35)}
.emo i{font-style:normal;background:#fff;border-radius:10px;width:78px;height:78px;display:grid;place-items:center;font-size:.8em;color:#c00;font-weight:900}
.opt{display:flex;gap:12px;align-items:flex-start;width:100%;text-align:left;background:var(--card);border:2px solid var(--line);border-radius:16px;padding:14px;margin:9px 0;font-size:.98em;box-shadow:0 4px 0 var(--line);transition:transform .08s}
.opt:active{transform:translateY(3px);box-shadow:0 1px 0 var(--line)}
.opt .L{flex:none;width:32px;height:32px;border-radius:10px;background:var(--card2);display:grid;place-items:center;font-weight:900}
.opt.ok{background:var(--okbg);border-color:var(--ok);box-shadow:0 4px 0 var(--ok)} .opt.ok .L{background:var(--ok);color:#fff}
.opt.bad{background:var(--badbg);border-color:var(--bad);box-shadow:0 4px 0 var(--bad);animation:no .35s} .opt.bad .L{background:var(--bad);color:#fff}
.opt.dim{opacity:.45}
.opt.sel{border-color:var(--acc2);box-shadow:0 4px 0 var(--acc2)} .opt.sel .L{background:var(--acc2);color:#111}
@keyframes no{20%,60%{transform:translateX(-7px)}40%,80%{transform:translateX(7px)}}
.feedback{border-radius:18px;padding:14px 16px;margin:14px 0;animation:up .3s}
.feedback.ok{background:var(--okbg);border:2px solid var(--ok)} .feedback.bad{background:var(--badbg);border:2px solid var(--bad)}
.feedback h3{margin:0 0 6px}
.feedback .why{font-size:.9em}
.feedback .ans{font-weight:800;margin:6px 0}
@keyframes up{from{transform:translateY(20px);opacity:0}}
.sticky{position:fixed;left:0;right:0;bottom:0;padding:10px 16px calc(14px + env(safe-area-inset-bottom));background:linear-gradient(transparent,var(--bg) 30%);z-index:10}
.sticky .btn{max-width:608px;margin:0 auto}
.tools{display:flex;gap:8px;justify-content:flex-end;margin-bottom:4px}
.tools button{background:var(--card);border:1px solid var(--line);border-radius:10px;padding:6px 10px;font-size:.8em}

/* flashcard */
.flash{min-height:300px;perspective:1200px;margin:10px 0}
.flash .in{position:relative;min-height:300px;transition:transform .45s;transform-style:preserve-3d}
.flash.on .in{transform:rotateY(180deg)}
.flash .f,.flash .b{position:absolute;inset:0;backface-visibility:hidden;-webkit-backface-visibility:hidden;background:var(--card);border:2px solid var(--line);border-radius:22px;padding:18px;overflow:auto}
.flash .b{transform:rotateY(180deg);border-color:var(--ok)}
.hint{text-align:center;color:var(--tx2);font-size:.8em;margin-top:8px}

/* resultado */
.score{font-size:3.2em;font-weight:900;text-align:center;line-height:1;margin:10px 0}
.stars{font-size:2.4em;text-align:center;letter-spacing:6px}
.stars span{display:inline-block;animation:pop .5s both}
.stars span:nth-child(2){animation-delay:.25s}.stars span:nth-child(3){animation-delay:.5s}
@keyframes pop{0%{transform:scale(0)}70%{transform:scale(1.4)}100%{transform:scale(1)}}
.gift{font-size:4em;text-align:center;animation:wob 1s infinite;cursor:pointer}
@keyframes wob{25%{transform:rotate(-10deg)}75%{transform:rotate(10deg)}}
.kv{display:flex;justify-content:space-between;padding:8px 0;border-bottom:1px solid var(--line)}
.kv:last-child{border:0}

/* simulado */
.timer{font-weight:900;font-variant-numeric:tabular-nums}
.timer.low{color:var(--bad);animation:pulse 1s infinite}
.navg{display:grid;grid-template-columns:repeat(10,1fr);gap:5px;margin:8px 0}
.navg button{aspect-ratio:1;border-radius:8px;background:var(--card2);font-size:.7em;font-weight:800;border:2px solid transparent}
.navg button.a{background:var(--acc);color:#fff} .navg button.c{border-color:var(--acc2)}
.navg button.ok{background:var(--ok);color:#fff} .navg button.bad{background:var(--bad);color:#fff}

/* macetes */
.mac{border-left:6px solid var(--acc);}
.mac h3{display:flex;gap:8px;align-items:center}
.mac .mn{background:var(--card2);border-radius:12px;padding:10px 12px;margin:8px 0;font-weight:800;color:var(--warn)}
.mac table{width:100%;border-collapse:collapse;font-size:.85em;margin:6px 0}
.mac td,.mac th{border-bottom:1px solid var(--line);padding:6px 4px;text-align:left}
.mac ul{padding-left:20px;margin:6px 0} .mac li{margin:4px 0}
.chips{display:flex;gap:8px;overflow-x:auto;padding-bottom:6px;margin:6px 0}
.chip{flex:none;background:var(--card);border:1px solid var(--line);border-radius:99px;padding:8px 14px;font-size:.85em;font-weight:700}
.chip.on{background:var(--acc);color:#fff;border-color:var(--acc)}

/* conquistas */
.ach{display:flex;gap:12px;align-items:center;padding:10px 0;border-bottom:1px solid var(--line)}
.ach .ai{font-size:2em;width:48px;text-align:center;flex:none}
.ach.lock{opacity:.35;filter:grayscale(1)}

/* ajustes */
.set{display:flex;justify-content:space-between;align-items:center;padding:12px 0;border-bottom:1px solid var(--line);gap:10px}
.sw{width:52px;height:30px;border-radius:99px;background:var(--card2);position:relative;flex:none;border:1px solid var(--line)}
.sw::after{content:"";position:absolute;top:3px;left:3px;width:22px;height:22px;border-radius:50%;background:#fff;transition:left .2s}
.sw.on{background:var(--ok)} .sw.on::after{left:25px}
.seg{display:flex;gap:6px} .seg button{padding:8px 12px;border-radius:10px;background:var(--card2);font-weight:800;font-size:.85em}
.seg button.on{background:var(--acc);color:#fff}

#toast{position:fixed;top:14px;left:50%;transform:translate(-50%,-150%);background:var(--card);border:2px solid var(--acc);border-radius:16px;padding:12px 18px;font-weight:800;z-index:60;transition:transform .35s;max-width:90%;text-align:center;box-shadow:0 10px 30px rgba(0,0,0,.4)}
#toast.on{transform:translate(-50%,0)}
.floatxp{position:fixed;font-weight:900;color:var(--acc2);font-size:1.4em;pointer-events:none;z-index:55;animation:fl 1s forwards}
@keyframes fl{to{transform:translateY(-80px);opacity:0}}
.lead{font-size:.9em;color:var(--tx2);margin:-4px 0 10px}
.src{font-size:.72em;color:var(--tx2);margin-top:18px;text-align:center}
input[type=search]{width:100%;padding:14px;border-radius:14px;border:2px solid var(--line);background:var(--card);color:var(--tx);font:inherit;user-select:text;-webkit-user-select:text}