/* Layout: app de prática — trilho de navegação à esquerda, área de jogo no centro, coluna de anúncio/metas à direita; no celular vira barra superior + abas inferiores.
   Cor: cada matéria é um "mundo" de cor saturada (sinalização); a área da questão fica calma; erro em âmbar, nunca vermelho; dourado só para recompensa. */
:root{
  --ground:#EDF0F7; --panel:#FFFFFF; --sunk:#E1E6F1; --rule:#D3DAE8; --ink:#11162B; --ink2:#5A6280;
  --btn-ink:#FFFFFF;
  --gold:#FFB21E; --gold-d:#C97F00; --gold-w:#FFF2D2; --flame:#FF6A13;
  --good:#11A85F; --good-d:#0B7A44; --good-w:#DCF5E7;
  --fix:#E98A00; --fix-d:#A65F00; --fix-w:#FFF0D6;
  --math:#2F5BFF; --math-d:#1B3BC2; --math-w:#E3E9FF;
  --port:#E0337A; --port-d:#A3185A; --port-w:#FCE3EE;
  --sci:#4E9A06; --sci-d:#356B02; --sci-w:#E6F3D6;
  --eng:#7A4DFF; --eng-d:#5530CC; --eng-w:#ECE5FF;
  --geo:#0790B0; --geo-d:#056780; --geo-w:#DCF2F8;
  --f-disp:"Archivo", "Arial Black", "Helvetica Neue", Arial, sans-serif;
  --f-body:"Lexend", "Trebuchet MS", "Segoe UI", system-ui, sans-serif;
  --rad:16px;
}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){
  --ground:#0C1020; --panel:#151A2E; --sunk:#1D2340; --rule:#2A3150; --ink:#EEF1FB; --ink2:#9BA3C2; --btn-ink:#0C1020;
  --gold:#FFC247; --gold-d:#B37A06; --gold-w:#3A2C0C; --flame:#FF8A3D;
  --good:#3DD68C; --good-d:#1C8F57; --good-w:#123526;
  --fix:#FFAE3D; --fix-d:#B87510; --fix-w:#3A2A10;
  --math:#7C97FF; --math-d:#3F5BD1; --math-w:#1C2552;
  --port:#FF6FA8; --port-d:#B83A70; --port-w:#3D1A2C;
  --sci:#9BDB45; --sci-d:#5E9420; --sci-w:#22331A;
  --eng:#A98EFF; --eng-d:#6C4FD6; --eng-w:#2A2150;
  --geo:#3CCDEB; --geo-d:#1A8BA6; --geo-w:#123340; color-scheme:dark}}
:root[data-theme="dark"]{
  --ground:#0C1020; --panel:#151A2E; --sunk:#1D2340; --rule:#2A3150; --ink:#EEF1FB; --ink2:#9BA3C2; --btn-ink:#0C1020;
  --gold:#FFC247; --gold-d:#B37A06; --gold-w:#3A2C0C; --flame:#FF8A3D;
  --good:#3DD68C; --good-d:#1C8F57; --good-w:#123526;
  --fix:#FFAE3D; --fix-d:#B87510; --fix-w:#3A2A10;
  --math:#7C97FF; --math-d:#3F5BD1; --math-w:#1C2552;
  --port:#FF6FA8; --port-d:#B83A70; --port-w:#3D1A2C;
  --sci:#9BDB45; --sci-d:#5E9420; --sci-w:#22331A;
  --eng:#A98EFF; --eng-d:#6C4FD6; --eng-w:#2A2150;
  --geo:#3CCDEB; --geo-d:#1A8BA6; --geo-w:#123340; color-scheme:dark}

*{box-sizing:border-box}
html,body{min-height:100%}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
a,button,select,input,summary,label{-webkit-tap-highlight-color:transparent;touch-action:manipulation}
body{background:var(--ground);color:var(--ink);font-family:var(--f-body);font-size:16px;line-height:1.5;--c:var(--math);--cd:var(--math-d);--cw:var(--math-w)}
body::before{content:"";position:fixed;inset:0 0 auto;height:env(safe-area-inset-top,0px);z-index:30;background:var(--panel)}
a{color:inherit;text-decoration:none}
button,input,select{font:inherit;color:inherit}
:focus-visible{outline:3px solid var(--c);outline-offset:3px;border-radius:8px}
.disp{font-family:var(--f-disp);font-stretch:118%;font-weight:850;letter-spacing:-.015em;line-height:1.02;text-wrap:balance}
.num{font-variant-numeric:tabular-nums}
.ico{width:1.15em;height:1.15em;flex:none;vertical-align:-.18em}

/* ===== casca do app ===== */
.app{display:grid;grid-template-columns:236px minmax(0,1fr) 320px;min-height:100vh;min-height:100dvh}
.rail-l{position:sticky;top:0;height:100vh;border-right:2px solid var(--rule);background:var(--panel);display:flex;flex-direction:column;gap:6px;padding:22px 14px}
.logo{display:flex;align-items:center;gap:10px;padding:4px 10px 18px}
.logo .mk{width:34px;height:34px;border-radius:10px;background:var(--ink);display:grid;place-items:center;color:var(--panel);font-family:var(--f-disp);font-weight:900;font-stretch:125%;font-size:1.05rem;transform:rotate(-6deg)}
.logo b{font-family:var(--f-disp);font-weight:850;font-stretch:112%;font-size:1.28rem;letter-spacing:-.02em}
.nav a{display:flex;align-items:center;gap:12px;padding:10px 12px;border-radius:12px;font-weight:600;color:var(--ink2);border:2px solid transparent}
.nav a:hover{background:var(--sunk);color:var(--ink)}
.nav a.on{color:var(--c);background:var(--cw);border-color:var(--c)}
.nav .dot{width:14px;height:14px;border-radius:4px;background:var(--dc);transform:rotate(45deg);margin-inline:3px}
.nav-h{font-size:.72rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--ink2);padding:14px 12px 4px}
.rail-l .grow{flex:1}
.rail-l .small{font-size:.78rem;color:var(--ink2);padding:0 12px;display:flex;gap:10px;flex-wrap:wrap}
.rail-l .small a:hover{color:var(--ink)}

.main{min-width:0;padding-left:max(24px,env(safe-area-inset-left,0px));padding-right:max(24px,env(safe-area-inset-right,0px));padding-block:0 60px}
.topbar{position:sticky;top:env(safe-area-inset-top,0px);z-index:20;background:var(--ground);display:flex;align-items:center;gap:14px;padding-block:14px;margin-bottom:10px}
.topbar .logo{display:none;padding:0}
.topbar .sp{flex:1}
.chip{display:inline-flex;align-items:center;gap:6px;font-weight:700;font-size:.98rem;padding:6px 10px;border-radius:12px}
.chip.flame{color:var(--flame)}.chip.xp{color:var(--gold-d)}
:root[data-theme="dark"] .chip.xp{color:var(--gold)}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .chip.xp{color:var(--gold)}}
.chip.off{filter:grayscale(1);opacity:.55}
.iconbtn{width:44px;height:44px;border-radius:12px;border:2px solid var(--rule);background:var(--panel);display:grid;place-items:center;cursor:pointer;color:var(--ink2)}
.iconbtn:hover{color:var(--ink);border-color:var(--ink2)}
.lang select{background:var(--panel);border:2px solid var(--rule);border-radius:12px;padding:0 10px;height:44px;font-weight:600;font-size:16px;cursor:pointer}

.rail-r{padding:22px 22px 40px 0;display:flex;flex-direction:column;gap:18px;position:sticky;top:0;height:100vh;overflow:auto;scrollbar-width:none}
.box{background:var(--panel);border:2px solid var(--rule);border-radius:var(--rad);padding:18px}
.box h3{margin:0 0 12px;font-size:1.02rem;font-weight:700}

.tabbar{display:none}

/* ===== anúncios ===== */
.ad{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;border:2px dashed var(--rule);border-radius:10px;color:var(--ink2);background:var(--panel);max-width:100%;margin-inline:auto}
.ad span{font-size:.64rem;letter-spacing:.14em;text-transform:uppercase;font-weight:700}
.ad small{font-size:.72rem;opacity:.8}
.ad[data-ad="top"],.ad[data-ad="inline"]{width:728px;height:90px}
.ad[data-ad="content"]{width:336px;height:280px}
.ad[data-ad="side"]{width:300px;height:600px}
.adslot{margin-block:22px}

/* ===== botões grossos ===== */
.btn{--b:var(--c);--bd:var(--cd);display:inline-flex;align-items:center;justify-content:center;gap:10px;border:0;border-radius:14px;background:var(--b);color:var(--btn-ink);font-family:var(--f-disp);font-stretch:112%;font-weight:800;letter-spacing:.04em;text-transform:uppercase;font-size:.98rem;padding:15px 22px;box-shadow:0 5px 0 var(--bd);cursor:pointer;transition:transform .08s,box-shadow .08s,filter .15s;user-select:none}
@media (hover:hover){.btn:hover{filter:brightness(1.06)}}
.btn:active{transform:translateY(5px);box-shadow:0 0 0 var(--bd)}
.btn:disabled{--b:var(--sunk);--bd:var(--rule);color:var(--ink2);cursor:not-allowed;filter:none}
.btn:disabled:active{transform:none;box-shadow:0 5px 0 var(--bd)}
.btn.ghost{--b:var(--panel);--bd:var(--rule);color:var(--c);border:2px solid var(--rule)}
.btn.good{--b:var(--good);--bd:var(--good-d)}
.btn.fix{--b:var(--fix);--bd:var(--fix-d)}
.btn.gold{--b:var(--gold);--bd:var(--gold-d);color:#2A1C00}
.btn.wide{width:100%}

/* ===== HOJE ===== */
.hello{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:20px;align-items:center;margin:8px 0 22px}
.hello h1{font-size:clamp(2rem,4.2vw,3.1rem);margin:0}
.hello p{margin:8px 0 0;color:var(--ink2);font-size:1.05rem;max-width:52ch}
.ring{--p:0;width:118px;height:118px;border-radius:50%;background:conic-gradient(var(--gold) calc(var(--p)*1%),var(--sunk) 0);display:grid;place-items:center;flex:none}
.ring>div{width:92px;height:92px;border-radius:50%;background:var(--ground);display:flex;flex-direction:column;align-items:center;justify-content:center;line-height:1.05}
.ring b{font-family:var(--f-disp);font-stretch:118%;font-weight:850;font-size:1.5rem}
.ring small{font-size:.72rem;color:var(--ink2);font-weight:600}
.resume{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:18px;background:var(--c);color:var(--btn-ink);border-radius:22px;padding:22px 24px;box-shadow:0 7px 0 var(--cd);margin-bottom:34px;position:relative;overflow:hidden}
.resume::after{content:"";position:absolute;right:-50px;top:-60px;width:220px;height:220px;border-radius:50%;background:rgba(255,255,255,.12);pointer-events:none}
.resume .code{font-family:var(--f-disp);font-stretch:125%;font-weight:900;font-size:2.4rem;line-height:1;opacity:.95}
.resume .t small{display:block;font-size:.8rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;opacity:.85}
.resume .t b{display:block;font-size:1.35rem;font-weight:700;line-height:1.2;margin-top:2px}
.resume .btn{--b:var(--panel);--bd:rgba(0,0,0,.25);color:var(--c);position:relative;z-index:1}
.sec-h{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin:30px 0 14px;flex-wrap:wrap}
.sec-h h2{margin:0;font-size:1.5rem}
.sec-h a{color:var(--c);font-weight:700;font-size:.92rem;display:inline-flex;align-items:center;min-height:44px;padding-inline:4px}
.worlds{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:14px}
.world{grid-column:span 2;position:relative;overflow:hidden;background:var(--c);color:var(--btn-ink);border-radius:20px;padding:18px 18px 16px;min-height:168px;display:flex;flex-direction:column;gap:6px;box-shadow:0 6px 0 var(--cd);transition:transform .12s}
@media (hover:hover){.world:hover{transform:translateY(-3px)}}
.world:nth-child(4),.world:nth-child(5){grid-column:span 3}
.world .big{position:absolute;right:-6px;bottom:-30px;font-family:var(--f-disp);font-stretch:125%;font-weight:900;font-size:8.5rem;line-height:1;opacity:.12;pointer-events:none}
.world h3{margin:0;font-family:var(--f-disp);font-stretch:118%;font-weight:850;font-size:1.5rem;letter-spacing:-.01em}
.world p{margin:0;font-size:.86rem;opacity:.92;max-width:34ch;flex:1}
.world .meter{height:10px;background:rgba(255,255,255,.28);border-radius:6px;overflow:hidden;max-width:220px}
.world .meter i{display:block;height:100%;background:var(--btn-ink);border-radius:6px}
.world .m{font-size:.8rem;font-weight:700}
.week{display:flex;align-items:flex-end;gap:10px;height:120px;padding-top:8px}
.week div{flex:1;display:flex;flex-direction:column;align-items:center;gap:6px;height:100%;justify-content:flex-end}
.week i{display:block;width:100%;max-width:34px;border-radius:8px 8px 4px 4px;background:var(--sunk);min-height:6px}
.week i.hit{background:var(--gold)}
.week i.today{outline:2px solid var(--ink2);outline-offset:2px}
.week span{font-size:.72rem;color:var(--ink2);font-weight:600}
.week b{font-size:.72rem;font-weight:700;color:var(--ink2)}
.two{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:16px}

/* ===== TRILHA ===== */
.world-head{background:var(--c);color:var(--btn-ink);border-radius:22px;padding:24px;box-shadow:0 7px 0 var(--cd);position:relative;overflow:hidden;margin-bottom:10px}
.world-head .big{position:absolute;right:10px;bottom:-40px;font-family:var(--f-disp);font-stretch:125%;font-weight:900;font-size:11rem;line-height:1;opacity:.15}
.world-head h1{margin:0;font-size:clamp(2rem,4.5vw,3rem)}
.world-head p{margin:8px 0 0;max-width:56ch;opacity:.93}
.world-head .note{display:inline-block;margin-top:12px;font-size:.8rem;font-weight:600;background:rgba(0,0,0,.16);padding:5px 10px;border-radius:8px}
.unit{margin-top:34px}
.unit-bar{display:flex;align-items:center;gap:14px;background:var(--cw);border:2px solid var(--c);border-radius:16px;padding:12px 16px}
.unit-bar .u{font-family:var(--f-disp);font-stretch:118%;font-weight:850;color:var(--c);font-size:1.4rem;line-height:1}
.unit-bar b{display:block;font-size:1.05rem}
.unit-bar small{color:var(--ink2);font-size:.82rem}
.path{display:flex;flex-direction:column;align-items:center;gap:22px;padding:28px 0 6px}
.stop{display:flex;flex-direction:column;align-items:center;gap:8px;transform:translateX(calc(var(--x,0px) * var(--zz,1)));width:160px;text-align:center;position:relative}
.node{--p:0;width:84px;height:84px;border-radius:50%;background:conic-gradient(var(--c) calc(var(--p)*1%),var(--sunk) 0);display:grid;place-items:center;box-shadow:0 6px 0 var(--rule);transition:transform .1s}
@media (hover:hover){.stop:hover .node{transform:translateY(-3px)}}
.node>span{width:64px;height:64px;border-radius:50%;background:var(--panel);display:grid;place-items:center;font-family:var(--f-disp);font-stretch:112%;font-weight:850;font-size:1rem;color:var(--c)}
.node.done{background:var(--gold);box-shadow:0 6px 0 var(--gold-d)}
.node.done>span{background:var(--gold);color:#2A1C00}
.node.fresh>span{color:var(--ink2)}
.stop .nm{font-weight:600;font-size:.88rem;line-height:1.25}
.stop .pc{font-size:.76rem;color:var(--ink2);font-weight:600}
.bubble{position:absolute;top:-38px;left:50%;transform:translateX(-50%);background:var(--panel);border:2px solid var(--c);color:var(--c);font-family:var(--f-disp);font-stretch:112%;font-weight:850;font-size:.8rem;letter-spacing:.06em;padding:5px 11px;border-radius:10px;white-space:nowrap;animation:bob 1.6s ease-in-out infinite}
.bubble::after{content:"";position:absolute;left:50%;bottom:-7px;width:10px;height:10px;background:var(--panel);border-right:2px solid var(--c);border-bottom:2px solid var(--c);transform:translateX(-50%) rotate(45deg)}
@keyframes bob{50%{transform:translateX(-50%) translateY(-4px)}}

/* ===== LIÇÃO ===== */
body.focus .rail-l,body.focus .rail-r,body.focus .tabbar,body.focus .topbar{display:none}
body.focus .app{grid-template-columns:minmax(0,1fr)}
.lesson{max-width:760px;margin:0 auto;min-height:100vh;display:flex;flex-direction:column;padding-bottom:200px}
.l-top{display:flex;align-items:center;gap:16px;padding-block:20px 8px;position:sticky;top:env(safe-area-inset-top,0px);background:var(--ground);z-index:5}
.l-top .x{width:44px;height:44px;flex:none;display:grid;place-items:center;border-radius:12px;color:var(--ink2)}
.l-top .x:hover{background:var(--sunk);color:var(--ink)}
.prog{flex:1;height:16px;background:var(--sunk);border-radius:10px;overflow:hidden}
.prog i{display:block;height:100%;background:var(--c);border-radius:10px;transition:width .35s cubic-bezier(.3,1.4,.5,1);position:relative}
.prog i::after{content:"";position:absolute;left:8px;right:8px;top:3px;height:4px;border-radius:3px;background:rgba(255,255,255,.35)}
.combo{font-family:var(--f-disp);font-stretch:118%;font-weight:850;color:var(--flame);font-size:1.05rem;display:flex;align-items:center;gap:2px}
.cnt{font-weight:700;color:var(--ink2);font-size:.92rem;min-width:44px;text-align:right;font-variant-numeric:tabular-nums}
.l-meta{display:flex;align-items:center;gap:10px;color:var(--ink2);font-size:.86rem;font-weight:600;margin:6px 0 18px;min-width:0}
.l-meta .nm{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.l-meta .ms{flex:none}
.l-meta .tag{color:var(--c);background:var(--cw);padding:3px 9px;border-radius:8px;font-weight:700}
.l-meta .ms{margin-left:auto;white-space:nowrap}
.tip{border-left:5px solid var(--c);background:var(--panel);border-radius:6px 14px 14px 6px;padding:12px 16px;margin-bottom:22px;font-size:.93rem;color:var(--ink2)}
.tip summary{cursor:pointer;font-weight:700;color:var(--ink);list-style:none;display:flex;gap:8px;align-items:center;min-height:44px;margin-block:-10px}
.tip summary::-webkit-details-marker{display:none}
.tip p{margin:8px 0 0}
.q-ins{font-weight:600;color:var(--ink2);margin-bottom:8px}
.q-txt{font-size:clamp(1.3rem,2.8vw,1.75rem);font-weight:600;line-height:1.35;margin-bottom:24px;overflow-wrap:anywhere}
.q-txt.big{font-family:var(--f-disp);font-stretch:112%;font-weight:850;font-size:clamp(2.4rem,6vw,3.6rem);letter-spacing:-.01em}
.q-txt b.n{color:var(--c);font-weight:700}
.q-txt .blank{display:inline-block;width:3.6em;border-bottom:4px solid var(--c);vertical-align:baseline;margin-inline:.1em}
.opts{display:grid;gap:12px;margin-bottom:20px}
.opt{display:flex;align-items:center;gap:14px;text-align:left;background:var(--panel);border:2px solid var(--rule);border-radius:16px;padding:14px 16px;box-shadow:0 4px 0 var(--rule);cursor:pointer;font-size:1.04rem;font-weight:500;transition:transform .06s}
.opt:active:not(:disabled){transform:translateY(3px);box-shadow:0 1px 0 var(--rule)}
.opt .k{width:30px;height:30px;flex:none;border-radius:9px;border:2px solid var(--rule);display:grid;place-items:center;font-size:.82rem;font-weight:700;color:var(--ink2)}
.opt.sel{border-color:var(--c);background:var(--cw);box-shadow:0 4px 0 var(--c)}
.opt.sel .k{border-color:var(--c);color:var(--c)}
.opt.right{border-color:var(--good);background:var(--good-w);box-shadow:0 4px 0 var(--good)}
.opt.right .k{border-color:var(--good);color:var(--good-d);background:var(--panel)}
.opt.wrong{border-color:var(--fix);background:var(--fix-w);box-shadow:0 4px 0 var(--fix)}
.opt:disabled{cursor:default}
.ans{display:flex;flex-direction:column;gap:8px;margin-bottom:20px;max-width:340px}
.ans input{font-family:var(--f-disp);font-stretch:112%;font-weight:800;font-size:1.8rem;padding:12px 16px;border:2px solid var(--rule);border-radius:16px;background:var(--panel);box-shadow:0 4px 0 var(--rule);width:100%}
.ans input:focus{outline:none;border-color:var(--c);box-shadow:0 4px 0 var(--c)}
.ans small{color:var(--ink2);font-size:.82rem}
.l-body{flex:1}
.sheet{position:fixed;left:0;right:0;bottom:var(--kb,0px);max-height:72dvh;overflow:auto;overscroll-behavior:contain;padding:18px max(24px,env(safe-area-inset-right,0px)) calc(18px + env(safe-area-inset-bottom,0px)) max(24px,env(safe-area-inset-left,0px));border-top:2px solid var(--rule);background:var(--ground);z-index:4}
.sheet.ok{background:var(--good-w);border-color:var(--good)}
.sheet.no{background:var(--fix-w);border-color:var(--fix)}
.sheet .in{max-width:760px;margin:0 auto;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:14px 24px;align-items:center}
.sheet h4{margin:0;font-family:var(--f-disp);font-stretch:118%;font-weight:850;font-size:1.45rem;display:flex;align-items:center;gap:10px}
.sheet.ok h4{color:var(--good-d)}.sheet.no h4{color:var(--fix-d)}
:root[data-theme="dark"] .sheet.ok h4{color:var(--good)} :root[data-theme="dark"] .sheet.no h4{color:var(--fix)}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .sheet.ok h4{color:var(--good)} :root:not([data-theme="light"]) .sheet.no h4{color:var(--fix)}}
.sheet p{margin:4px 0 0;font-size:.94rem;max-width:62ch}
.sheet p b.n{color:var(--ink);font-weight:700}
.sheet .ca{font-weight:700}
.sheet .msg{min-width:0}
.sheet .btn{min-width:180px}
.pop{animation:pop .35s cubic-bezier(.3,1.6,.5,1)}
@keyframes pop{0%{transform:scale(.6);opacity:0}100%{transform:scale(1);opacity:1}}
.shake{animation:shake .32s}
@keyframes shake{25%{transform:translateX(-6px)}50%{transform:translateX(6px)}75%{transform:translateX(-3px)}}

/* ===== RESULTADO ===== */
.result{text-align:center;max-width:560px;margin:0 auto;padding-top:40px;display:flex;flex-direction:column;align-items:center;gap:18px}
.result h1{font-size:clamp(2.2rem,5vw,3.2rem);margin:0}
.result .medal{width:120px;height:120px;border-radius:32px;background:var(--gold);box-shadow:0 8px 0 var(--gold-d);display:grid;place-items:center;transform:rotate(-8deg);color:#2A1C00}
.result .medal svg{width:64px;height:64px}
.stats3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;width:100%}
.st{border-radius:16px;border:2px solid var(--sc);overflow:hidden;background:var(--panel)}
.st small{display:block;background:var(--sc);color:var(--btn-ink);font-weight:800;font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;padding:5px}
.st b{display:block;font-family:var(--f-disp);font-stretch:118%;font-weight:850;font-size:1.7rem;padding:12px 4px}
.result .acts{display:flex;gap:12px;flex-wrap:wrap;justify-content:center;width:100%}
.result .acts .btn{flex:1;min-width:200px}

/* ===== PERFIL ===== */
.prof{display:grid;grid-template-columns:auto minmax(0,1fr);gap:22px;align-items:center;margin:8px 0 24px}
.lvl{width:104px;height:104px;border-radius:28px;background:var(--ink);color:var(--panel);display:flex;flex-direction:column;align-items:center;justify-content:center;transform:rotate(-5deg);box-shadow:0 7px 0 var(--rule)}
.lvl small{font-size:.66rem;letter-spacing:.14em;font-weight:700;text-transform:uppercase;opacity:.75}
.lvl b{font-family:var(--f-disp);font-stretch:125%;font-weight:900;font-size:2.8rem;line-height:1}
.prof h1{margin:0;font-size:clamp(1.9rem,4vw,2.6rem)}
.xpbar{height:14px;background:var(--sunk);border-radius:8px;overflow:hidden;margin-top:12px;max-width:440px}
.xpbar i{display:block;height:100%;background:var(--gold);border-radius:8px}
.prof .sub{color:var(--ink2);font-size:.88rem;margin-top:6px;font-weight:600}
.tiles{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin-bottom:8px}
.tile{background:var(--panel);border:2px solid var(--rule);border-radius:16px;padding:14px 16px;display:flex;gap:12px;align-items:center}
.tile .ic{width:40px;height:40px;border-radius:12px;display:grid;place-items:center;flex:none}
.tile b{display:block;font-family:var(--f-disp);font-stretch:112%;font-weight:850;font-size:1.45rem;line-height:1.05}
.tile span{font-size:.78rem;color:var(--ink2);font-weight:600}
.badges{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:14px}
.badge{display:flex;flex-direction:column;align-items:center;text-align:center;gap:8px;padding:16px 10px;border-radius:16px;background:var(--panel);border:2px solid var(--rule)}
.badge .hx{width:66px;height:74px;clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%);background:var(--bc);display:grid;place-items:center;color:#fff}
.badge .hx svg{width:30px;height:30px}
.badge b{font-size:.92rem;line-height:1.2}
.badge span{font-size:.76rem;color:var(--ink2);line-height:1.3}
.badge.locked .hx{background:var(--sunk);color:var(--ink2)}
.badge.locked b{color:var(--ink2)}
.mlist{display:grid;gap:10px}
.mrow{display:grid;grid-template-columns:44px minmax(0,1fr) 54px;gap:12px;align-items:center}
.mrow .d{width:44px;height:44px;border-radius:12px;background:var(--c);color:var(--btn-ink);display:grid;place-items:center;font-family:var(--f-disp);font-stretch:125%;font-weight:900;font-size:1.2rem}
.mrow .bar{height:12px;background:var(--sunk);border-radius:7px;overflow:hidden;margin-top:5px}
.mrow .bar i{display:block;height:100%;background:var(--c);border-radius:7px}
.mrow b{font-size:.95rem}
.mrow .v{text-align:right;font-weight:700;font-variant-numeric:tabular-nums}
.danger{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-top:28px;color:var(--ink2);font-size:.9rem}
.linkbtn{background:none;border:0;color:var(--ink2);text-decoration:underline;cursor:pointer;padding:0 4px;min-height:44px;font-weight:600}
.prose{max-width:66ch}
.prose h1{font-size:2.4rem;margin:8px 0 14px}
.prose h2{font-size:1.25rem;margin:26px 0 6px;font-family:var(--f-disp);font-stretch:112%;font-weight:800}
.prose p{color:var(--ink)}

/* ===== toast ===== */
.toast{position:fixed;left:50%;top:calc(10px + env(safe-area-inset-top,0px));transform:translateX(-50%);z-index:60;display:flex;align-items:center;gap:10px;background:var(--ink);color:var(--panel);padding:8px 16px 8px 8px;font-size:.92rem;line-height:1.3;width:max-content;border-radius:16px;box-shadow:0 10px 30px rgba(0,0,0,.25);max-width:calc(100% - 32px)}
.toast .hx{width:32px;height:36px;clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%);background:var(--gold);display:grid;place-items:center;color:#2A1C00;flex:none}
.toast small{display:block;font-size:.7rem;letter-spacing:.12em;text-transform:uppercase;opacity:.7;font-weight:700}
#fx{position:fixed;inset:0;pointer-events:none;z-index:50}

/* ===== responsivo ===== */
@media (max-width:1240px){.app{grid-template-columns:220px minmax(0,1fr)}.rail-r{display:none}}
@media (max-width:860px){
  .app{grid-template-columns:minmax(0,1fr)}
  .rail-l{display:none}
  .main{padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px));padding-bottom:calc(96px + env(safe-area-inset-bottom,0px))}
  .topbar{gap:6px;margin-inline:calc(-1 * max(16px,env(safe-area-inset-left,0px)));padding-inline:max(16px,env(safe-area-inset-left,0px)) max(16px,env(safe-area-inset-right,0px));background:var(--panel);border-bottom:2px solid var(--rule)}
  .topbar .logo{display:flex;min-width:44px;min-height:44px;align-items:center}.topbar .logo b{display:none}
  .chip{padding:6px 6px;font-size:.92rem}
  .tabbar{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:25;background:var(--panel);border-top:2px solid var(--rule);padding:8px max(8px,env(safe-area-inset-right,0px)) calc(8px + env(safe-area-inset-bottom,0px)) max(8px,env(safe-area-inset-left,0px));justify-content:space-around}
  .tabbar a{display:flex;flex-direction:column;align-items:center;gap:2px;font-size:.7rem;font-weight:700;color:var(--ink2);padding:6px 10px;border-radius:12px;min-width:64px}
  .tabbar a.on{color:var(--c);background:var(--cw)}
  .tabbar .ico{width:24px;height:24px}
  .sheet{padding-inline:max(16px,env(safe-area-inset-left,0px)) max(16px,env(safe-area-inset-right,0px))}
  .lesson{padding-bottom:300px}
  .ad[data-ad="top"]{width:320px;height:50px}.ad[data-ad="inline"]{width:300px;height:250px}
  .worlds{grid-template-columns:repeat(2,minmax(0,1fr))}
  .world,.world:nth-child(4),.world:nth-child(5){grid-column:span 1}
  .world:nth-child(5){grid-column:1/-1}
  .two{grid-template-columns:1fr}
  .tiles{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:560px){
  .hello{grid-template-columns:minmax(0,1fr) auto;gap:12px}
  .hello .ring{width:80px;height:80px}.hello .ring>div{width:62px;height:62px}.hello .ring b{font-size:1.1rem}.hello .ring small{font-size:.62rem}
  .hello p{font-size:.95rem}
  .l-meta .nm{display:none}
  .resume{grid-template-columns:minmax(0,1fr);gap:12px}
  .resume .code{font-size:1.8rem}
  .worlds{grid-template-columns:1fr}.world,.world:nth-child(5){grid-column:auto}
  .world{min-height:140px}
  .sheet .in{grid-template-columns:1fr}.sheet .btn{width:100%}
  .stats3 b{font-size:1.35rem}
  .prof{grid-template-columns:1fr}
  .stop{width:132px}
  .path{--zz:.55}
}
@media (max-height:500px) and (orientation:landscape){
  .lesson{padding-bottom:110px}.l-top{padding-block:8px 4px}.l-meta{margin:2px 0 8px}
  .tip{display:none}.q-txt{font-size:1.2rem;margin-bottom:12px}.q-txt.big{font-size:2rem}
  .ans{flex-direction:row;align-items:center;max-width:none}.ans input{max-width:260px;font-size:1.4rem;padding:8px 12px}
  .opts{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}.opt{padding:10px 12px}
  .sheet{padding-block:8px calc(8px + env(safe-area-inset-bottom,0px))}.sheet .in{grid-template-columns:minmax(0,1fr) auto}.sheet .btn{width:auto;padding:11px 20px}.sheet h4{font-size:1.15rem}
  .lesson .adslot{display:none}
}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

/* ===== plano personalizado ===== */
.eyebrow{font-size:.74rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--ink2);margin:0 0 10px}
.disp.sm{font-size:1.2rem}
.alert{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:14px;align-items:center;background:var(--gold-w);border:2px solid var(--gold);border-radius:18px;padding:14px 16px;margin-bottom:22px}
.alert .ic{width:44px;height:44px;border-radius:12px;background:var(--gold);color:#2A1C00;display:grid;place-items:center}
.alert b{display:block}.alert p{margin:2px 0 0;color:var(--ink2);font-size:.9rem}
.chips{display:flex;gap:10px;flex-wrap:wrap}
.rchip{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:8px 14px;border-radius:14px;background:var(--cw);border:2px solid var(--c);font-weight:600;font-size:.92rem}
.rchip b{color:var(--c);font-family:var(--f-disp);font-stretch:112%;font-weight:850}
.insights{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:12px}
.insight{background:var(--panel);border:2px solid var(--rule);border-top:5px solid var(--c);border-radius:16px;padding:14px 16px;display:flex;flex-direction:column;gap:8px;align-items:flex-start}
.insight .tag{font-family:var(--f-disp);font-stretch:112%;font-weight:850;color:var(--c);font-size:.85rem}
.insight p{margin:0;font-size:.93rem;flex:1}
.btn.sm{padding:10px 14px;font-size:.82rem;border-radius:12px;box-shadow:0 4px 0 var(--bd)}
.btn.rw em,.hintbtn em{font-style:normal;font-family:var(--f-body);font-size:.66rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;padding:2px 6px;border-radius:6px;background:rgba(0,0,0,.14);display:inline-flex;align-items:center;gap:3px}
.btn.rw{gap:8px}
.btn.rw .ico{width:1.05em;height:1.05em}

/* ===== lição: dica, segunda chance, rótulos ===== */
.q-head{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:10px;min-height:44px}
.q-head .q-ins{margin:0;flex:1;min-width:0}
.chipq{display:inline-flex;align-items:center;gap:5px;font-size:.76rem;font-weight:800;letter-spacing:.05em;text-transform:uppercase;padding:5px 9px;border-radius:9px}
.chipq .ico{width:14px;height:14px}
.chipq.rev{background:var(--cw);color:var(--c)}
.chipq.foc{background:var(--fix-w);color:var(--fix-d)}
.hintbtn{margin-left:auto;display:inline-flex;align-items:center;gap:7px;min-height:44px;padding:6px 12px;border-radius:12px;border:2px solid var(--gold);background:var(--gold-w);color:var(--ink);font-weight:700;font-size:.88rem;cursor:pointer}
.hintbtn .ico{color:var(--gold-d)}
.hintbtn em{background:var(--gold);color:#2A1C00}
.hintbtn:disabled{opacity:.45;cursor:not-allowed}
.hint{display:flex;gap:10px;align-items:flex-start;background:var(--gold-w);border-left:5px solid var(--gold);border-radius:6px 14px 14px 6px;padding:12px 14px;margin:-8px 0 20px;font-size:.95rem}
.hint .ico{color:var(--gold-d);margin-top:2px}
.opt.gone{opacity:.35;text-decoration:line-through}
.diag{display:flex;gap:8px;align-items:flex-start;font-weight:600;color:var(--ink);background:var(--panel);border-radius:10px;padding:8px 10px;margin:6px 0 8px}
.diag .ico{color:var(--fix-d);margin-top:2px;flex:none}
.sheet .acts{display:flex;gap:10px;flex-wrap:wrap;justify-content:flex-end}
.sheet .msg p{max-height:38dvh;overflow:auto}
.node{position:relative}
.node .due{position:absolute;top:-6px;right:-14px;font-style:normal;font-size:.62rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase;background:var(--fix);color:#fff;padding:3px 6px;border-radius:7px}

/* ===== laterais e resultado ===== */
.box .mini{font-size:.82rem;color:var(--ink2);font-weight:600;margin-top:10px;display:flex;gap:6px;align-items:center}
.box .mini.flame-t{color:var(--flame);font-weight:700}
.badges.three{grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.week i.frz{background:repeating-linear-gradient(135deg,var(--gold) 0 4px,var(--gold-w) 4px 8px)}
.result .sub{color:var(--ink2);font-weight:600}
.st b i{font-style:normal;font-size:.8rem;color:var(--gold-d);margin-left:4px}
.next-up{display:flex;flex-direction:column;gap:2px;width:100%;text-align:left;padding:14px 16px;border-radius:16px;background:var(--cw);border:2px solid var(--c)}
.next-up small{color:var(--ink2);font-weight:600;font-size:.8rem}
.next-up b{color:var(--c)}

/* ===== conta e instalação ===== */
.acct{margin:22px 0 4px}
.acct h3{display:flex;gap:8px;align-items:center}
.acct p{margin:0 0 12px;color:var(--ink2);font-size:.93rem;max-width:60ch}
.lform{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:8px}
.lform input{flex:1 1 220px;min-width:0;height:52px;border:2px solid var(--rule);border-radius:14px;background:var(--panel);padding:0 14px;font-size:16px}
.lform input:focus{outline:none;border-color:var(--c)}
.gbtn{margin-top:8px}.gbtn b{font-family:var(--f-disp);font-weight:900;color:#4285F4}
.muted{color:var(--ink2);font-size:.88rem}
.install{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:14px;align-items:center;margin-top:24px;background:var(--panel);border:2px dashed var(--rule);border-radius:18px;padding:14px 16px}
.install .ic{width:44px;height:44px;border-radius:12px;background:var(--ink);color:var(--panel);display:grid;place-items:center}
.install p{margin:2px 0 0;color:var(--ink2);font-size:.88rem}

/* ===== anúncios ao vivo e demonstrações ===== */
.ad.live{border:0;background:transparent;width:100%;height:auto;min-height:50px}
.ad.live.ad-top{min-height:50px}.ad.live.ad-inline,.ad.live.ad-content{min-height:250px}.ad.live.ad-side{min-height:600px}
@media (min-width:1000px){.ad.live.ad-top,.ad.live.ad-inline{min-height:90px}}
.ad-anchor-demo{position:fixed;left:50%;transform:translateX(-50%);z-index:40;width:min(728px,100%);height:58px;display:flex;flex-direction:column;align-items:center;justify-content:center;background:var(--panel);border:2px dashed var(--ink2);color:var(--ink2);box-shadow:0 -4px 18px rgba(0,0,0,.12)}
.ad-anchor-demo.bottom{bottom:0;padding-bottom:env(safe-area-inset-bottom,0px);height:calc(58px + env(safe-area-inset-bottom,0px))}
.ad-anchor-demo.top{top:0}
.ad-anchor-demo span{font-size:.66rem;letter-spacing:.14em;text-transform:uppercase;font-weight:800}
.ad-anchor-demo small{font-size:.72rem}
.ad-anchor-demo button{position:absolute;top:-22px;right:10px;width:44px;height:44px;border-radius:50%;border:2px solid var(--rule);background:var(--panel);color:var(--ink2);display:grid;place-items:center;cursor:pointer}
.demo-overlay{position:fixed;inset:0;z-index:80;background:rgba(10,14,30,.72);display:grid;place-items:center;padding:20px}
.demo-ad{width:min(380px,100%);min-height:420px;border-radius:20px;background:var(--panel);border:2px dashed var(--ink2);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;text-align:center;padding:24px}
.demo-ad b{font-family:var(--f-disp);font-stretch:112%;font-weight:850;font-size:1.2rem}
.demo-ad small{color:var(--ink2);text-transform:uppercase;letter-spacing:.12em;font-size:.7rem;font-weight:700}
.demo-ad .cd{font-weight:700;color:var(--ink2);font-variant-numeric:tabular-nums}
.demo-overlay.ok .cd{color:var(--good-d)}
.demo-ad .row{display:flex;gap:10px;flex-wrap:wrap;justify-content:center;align-items:center;margin-top:8px}
.demo-ad.inter{min-height:480px}

/* anchor ocupa a borda: barras do site se afastam */
.tabbar{bottom:var(--anchor-h,0px)}
.main{padding-bottom:calc(60px + var(--anchor-h,0px))}
.has-anchor .toast{top:calc(10px + var(--anchor-top,0px) + env(safe-area-inset-top,0px))}
@media (max-width:860px){.main{padding-bottom:calc(96px + var(--anchor-h,0px) + env(safe-area-inset-bottom,0px))}}
.sheet{bottom:calc(var(--kb,0px) + var(--anchor-h,0px))}

/* ===== bloco de conteúdo para busca ===== */
.seo{max-width:760px;margin:48px auto 0;padding-top:28px;border-top:2px solid var(--rule);color:var(--ink2);font-size:.95rem}
.seo h2{font-family:var(--f-disp);font-stretch:112%;font-weight:800;color:var(--ink);font-size:1.2rem;margin:0 0 8px}
.seo h3{color:var(--ink);font-size:1rem;margin:18px 0 6px}
.seo ul{padding-left:20px}.seo a{color:var(--c);font-weight:600}
body.focus .seo{margin-bottom:220px}
.noscript-view h1{font-family:var(--f-disp);font-weight:850;font-size:2rem}

@media (max-width:560px){
  .alert,.install{grid-template-columns:auto minmax(0,1fr)}
  .alert .btn,.install .btn{grid-column:1/-1;width:100%}
  .sheet .acts .btn{flex:1 1 100%}
  .hintbtn span{display:none}
  .badges.three .badge span{display:none}
}

.adslot.top{margin:0 0 18px}
.adslot:empty{display:none}
.rail-l .small a{display:inline-flex;align-items:center;min-height:44px}

/* ===== The Course Future: bloco de topo 336×280 ===== */
.ad[data-ad="top"],.ad[data-ad="top"]:not(.live){width:336px;height:280px;max-width:100%}
.ad.live.ad-top{width:100%;height:auto;min-height:250px;display:flex;justify-content:center;align-items:center}
.adslot.top{display:flex;justify-content:center;margin:0 0 18px}
.lesson .adslot.top{margin-block:12px 14px}
@media (max-width:420px){
  /* o bloco usa a largura inteira da tela, para caber 336×280 em celulares de 360px */
  .adslot.top{width:100vw;margin-inline:calc(50% - 50vw)}
}

/* ---------- Extras: letra, material de apoio, baixar app ---------- */
.fsbtn span{font-weight:800;font-size:1rem;line-height:1;letter-spacing:-.02em}.fsbtn small{font-size:.7em}
.tip.mat summary{font-weight:700}
.mat-b{padding:4px 2px 2px}.mat-b h3{font-size:.95rem;margin:14px 0 6px}.mat-b p{margin:0 0 8px;line-height:1.55}
.mat-a{display:flex;align-items:center;gap:12px;margin:6px 0 4px;flex-wrap:wrap}
.mat-play{display:inline-flex;align-items:center;gap:8px}.mat-play svg{width:18px;height:18px}
.mat-ex{margin:0;padding-left:1.2em;display:grid;gap:10px}.mat-ex .q{font-weight:600;margin-bottom:2px}
.fs-card{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin:16px 0}
.fs-seg{display:flex;gap:6px}.fs-seg button{min-width:44px;height:44px;border-radius:12px;border:2px solid var(--rule);background:var(--panel);color:inherit;font-weight:800;cursor:pointer}
.fs-seg button[aria-checked="true"]{border-color:var(--c);color:var(--c)}
.fdm-modal{position:fixed;inset:0;z-index:9000;background:rgba(17,22,43,.45);display:flex;align-items:center;justify-content:center;padding:16px}
.fdm-card{position:relative;width:100%;max-width:420px;max-height:calc(100% - 16px);overflow:auto;background:var(--panel);color:var(--ink);border-radius:24px;padding:26px 22px 20px;box-shadow:0 20px 60px rgba(17,22,43,.3)}
.fdm-card img{border-radius:16px;display:block;margin-bottom:12px}.fdm-card h2{font-size:1.5rem;margin:0 0 12px}
.fdm-card ol{margin:0 0 12px;padding-left:1.2em;display:grid;gap:8px;line-height:1.5}.fdm-card .fdm-x{position:absolute;top:12px;right:12px}
@media (max-width:430px){#topbar .logo b{display:none}}
html[data-fs="2"] #topbar .logo b,html[data-fs="3"] #topbar .logo b{display:none}
html[data-fs="1"] #topbar{zoom:.889}html[data-fs="2"] #topbar{zoom:.8}html[data-fs="3"] #topbar{zoom:.667}
@media (max-width:390px){#topbar>*{zoom:.9}}@media (max-width:340px){#topbar>*{zoom:.8}}
.fs-seg{flex-wrap:wrap}html[data-fs="3"] #view{overflow-wrap:anywhere}

.backbtn{display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;margin-right:2px;color:inherit;text-decoration:none}
@media (max-width:400px){#topbar .backbtn~.logo{display:none}}
.prose{overflow-wrap:anywhere}.prose table{display:block;max-width:100%;overflow-x:auto}.prose pre{overflow-x:auto;max-width:100%}

.mat-jump{display:inline-flex;align-items:center;gap:6px;margin-top:12px;font-weight:700;color:var(--c);text-decoration:none}.mat-jump svg{width:18px;height:18px}
.mat-list{margin:28px 0 8px;scroll-margin-top:80px}.mat-list>.muted{margin:0 0 12px}
.mat-item{margin:0 0 10px;padding:0}.mat-item>summary{display:flex;align-items:center;gap:10px;padding:14px 16px;cursor:pointer;font-weight:700;list-style:none}
.mat-item>summary::-webkit-details-marker{display:none}.mat-item>summary::after{content:'+';margin-left:auto;font-size:1.3rem;line-height:1;color:var(--c)}
.mat-item[open]>summary::after{content:'–'}.mat-item .mat-b{padding:0 16px 4px}.mat-item .mat-go{margin:8px 16px 16px;width:calc(100% - 32px)}