@font-face{font-family:Outfit;src:url(/outfit.woff2) format('woff2');font-weight:100 900;font-display:swap}
@font-face{font-family:Inter;src:url(/inter.woff2) format('woff2');font-weight:100 900;font-display:swap}
:root{--bg:#0a0a0c;--card:#15141a;--card2:#1d1c23;--ink:#f6f4f1;--muted:#a19ca4;--line:#ffffff14;--laranja:#f97316;--laranja2:#ffb27a;--verde:#22c55e;--vermelho:#ef4444;--amarelo:#facc15;--azul:#60a5fa;--display:Outfit,Inter,system-ui,sans-serif;--ease:cubic-bezier(.32,.72,0,1)}
*{box-sizing:border-box}html{-webkit-text-size-adjust:100%}
body{margin:0;min-height:100svh;background:var(--bg);color:var(--ink);font:16px/1.5 Inter,system-ui,-apple-system,"Segoe UI",sans-serif;-webkit-font-smoothing:antialiased;padding-bottom:calc(76px + env(safe-area-inset-bottom))}
h1,h2,h3{margin:0;font-family:var(--display);font-weight:800;letter-spacing:-.025em;text-wrap:balance}
p{margin:0;text-wrap:pretty}a{color:inherit;text-decoration:none}button{font:inherit;color:inherit}
em{font-style:normal;color:var(--laranja)}
img{display:block;max-width:100%}
:focus-visible{outline:3px solid var(--laranja);outline-offset:3px;border-radius:6px}

.topo{position:sticky;top:0;z-index:20;display:flex;align-items:center;justify-content:space-between;height:60px;padding:0 18px;background:#0a0a0ccc;backdrop-filter:blur(16px)}
.marca{display:flex;align-items:center;gap:8px;font:800 20px/1 var(--display);letter-spacing:-.03em}.marca img{width:26px}.marca b{color:var(--laranja)}
.placar{display:flex;gap:8px}
.chip{display:inline-flex;align-items:center;gap:5px;height:34px;padding:0 11px;border-radius:999px;border:1px solid var(--line);background:var(--card);font-size:14px;font-weight:600}
.chip.ofensiva{color:#fdba74}.chip.xp{color:var(--amarelo)}.chip.eu{cursor:pointer}

.app{max-width:560px;margin:0 auto;padding:18px 18px 20px}
.kicker{font-size:11px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--laranja)}
.lead{color:var(--muted);margin-top:10px}

.entrada{text-align:center;padding-top:10px}
.entrada .mascote{width:150px;margin:0 auto 14px;border-radius:50%;aspect-ratio:1;object-fit:cover;object-position:50% 20%;border:4px solid var(--laranja)}
.entrada h1{font-size:clamp(30px,8vw,38px);line-height:1.02;margin-top:8px}
.form{display:grid;gap:12px;margin-top:22px;text-align:left}
.form label{display:grid;gap:6px;font-size:13px;font-weight:600}.form label small{font-weight:400;color:var(--muted)}
.form input{height:48px;padding:0 14px;border-radius:12px;border:1px solid #ffffff22;background:var(--card);color:var(--ink);font:inherit}
.form.linha{grid-template-columns:1fr auto}
.entrar{margin-top:18px;text-align:left}.entrar summary{cursor:pointer;color:var(--muted);font-size:14px}
.erro{color:#fca5a5;font-size:13px}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:48px;padding:0 20px;border-radius:14px;border:1px solid #ffffff22;background:var(--card2);font:700 16px/1 var(--display);cursor:pointer;transition:transform .12s ease,filter .2s ease}
.btn.primario{background:var(--laranja);border-color:transparent;color:#1a100c;box-shadow:0 4px 0 #c2410c}
.btn.verde{background:var(--verde);border-color:transparent;color:#052e16;box-shadow:0 4px 0 #15803d}
.btn:active{transform:translateY(2px);box-shadow:none}.btn:disabled{opacity:.45;cursor:default}
.btn.largo{width:100%}

/* Meta do dia */
.meta{display:grid;grid-template-columns:auto 1fr;gap:14px;align-items:center;padding:14px 16px;border-radius:18px;background:var(--card);border:1px solid var(--line);margin-bottom:18px}
.meta .anel{position:relative;width:54px;height:54px;border-radius:50%;background:conic-gradient(var(--laranja) calc(var(--p)*1%),#ffffff14 0);display:grid;place-items:center}
.meta .anel:before{content:"";position:absolute;inset:6px;border-radius:50%;background:var(--card)}
.meta .anel b{position:relative;font:800 13px var(--display)}
.meta h3{font-size:16px}.meta p{font-size:13px;color:var(--muted)}

/* Trilha */
.unidade{margin:26px 0 10px}.unidade h2{font-size:14px;letter-spacing:.14em;text-transform:uppercase;color:var(--laranja2)}
.unidade p{font-size:13px;color:var(--muted)}
.trilha{position:relative;display:grid;gap:10px;padding-left:34px}
.trilha:before{content:"";position:absolute;left:14px;top:14px;bottom:14px;width:3px;border-radius:3px;background:#ffffff14}
.no{position:relative;display:grid;grid-template-columns:1fr auto;gap:10px;align-items:center;padding:14px 16px;border-radius:18px;background:var(--card);border:1px solid var(--line);transition:transform .4s var(--ease)}
.no:before{content:"";position:absolute;left:-28px;top:50%;width:18px;height:18px;border-radius:50%;background:#2a2930;border:3px solid var(--bg);transform:translateY(-50%)}
.no.feita:before{background:var(--verde)}.no.atual:before{background:var(--laranja);box-shadow:0 0 0 4px #f9731633}
.no.fechada{opacity:.55}
.no b{display:block;font:800 17px/1.15 var(--display);letter-spacing:-.02em}
.no small{display:block;margin-top:4px;font-size:12px;color:var(--muted)}
.no .est{font-size:22px}
.no.atual{border-color:var(--laranja)}
@media(hover:hover){.no:not(.fechada):hover{transform:translateX(3px)}}

/* Lição */
.licao h1{font-size:clamp(26px,6vw,32px);margin-top:6px}
.video{margin:16px 0;border-radius:18px;overflow:hidden;background:#000;aspect-ratio:1;max-height:420px}
.video video{width:100%;height:100%;object-fit:contain;display:block}
.secao{margin-top:18px;padding:16px;border-radius:18px;background:var(--card);border:1px solid var(--line)}
.secao h3{font-size:17px;margin-bottom:8px}.secao p{font-size:15px;color:#d9d5dc}.secao p+p{margin-top:8px}
.secao ol{margin:0;padding-left:22px;display:grid;gap:8px;font-size:15px;color:#d9d5dc}
.checklist{margin-top:18px}.checklist label{display:flex;gap:10px;align-items:flex-start;padding:10px 0;border-top:1px solid var(--line);font-size:15px}
.checklist input{width:20px;height:20px;accent-color:var(--verde);margin-top:2px}
.acoes{display:grid;gap:10px;margin-top:20px}
.aviso{font-size:13px;color:var(--muted);text-align:center;margin-top:8px}

/* Exercício */
.exercicio .barra{height:10px;border-radius:10px;background:#ffffff14;overflow:hidden;margin:6px 0 20px}
.exercicio .barra i{display:block;height:100%;width:0;background:var(--verde);transition:width .4s var(--ease)}
.exercicio h2{font-size:clamp(22px,5.6vw,26px);line-height:1.2}
.opcoes{display:grid;gap:10px;margin-top:18px}
.opcao{text-align:left;min-height:56px;padding:12px 16px;border-radius:14px;border:2px solid #ffffff22;background:var(--card);font-size:16px;cursor:pointer;transition:transform .1s ease,border-color .15s ease,background-color .15s ease}
.opcao.sel{border-color:var(--azul);background:#60a5fa1a}.opcao.certa{border-color:var(--verde);background:#22c55e1f}.opcao.errada{border-color:var(--vermelho);background:#ef44441f}
.opcao:active{transform:scale(.98)}.opcao:disabled{cursor:default}
.rodape-ex{position:fixed;left:0;right:0;bottom:0;z-index:30;padding:14px 18px calc(14px + env(safe-area-inset-bottom));background:var(--card);border-top:1px solid var(--line);transform:translateY(110%);transition:transform .35s var(--ease)}
.rodape-ex.on{transform:none}.rodape-ex.certa{background:#14532d}.rodape-ex.errada{background:#7f1d1d}
.rodape-ex .in{max-width:560px;margin:0 auto;display:grid;grid-template-columns:1fr auto;gap:12px;align-items:center}
.rodape-ex b{display:block;font:800 18px var(--display)}.rodape-ex small{display:block;font-size:13px;opacity:.85}

/* Resultado */
.resultado{text-align:center;padding-top:20px}
.resultado .big{font:800 clamp(60px,18vw,90px)/1 var(--display);letter-spacing:-.04em;color:var(--amarelo)}
.resultado h2{font-size:26px;margin-top:6px}.resultado p{color:var(--muted);margin-top:8px}
.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:22px 0}
.stats div{padding:14px 8px;border-radius:14px;background:var(--card);border:1px solid var(--line)}.stats b{display:block;font:800 22px var(--display)}.stats small{font-size:11px;color:var(--muted);letter-spacing:.06em;text-transform:uppercase}

/* Perfil */
.perfil .cartao{padding:20px;border-radius:22px;background:linear-gradient(160deg,#2a1206,#15141a);border:1px solid #f9731644}
.perfil .nivel{font:800 24px var(--display)}.perfil .codigo{font:800 22px/1 var(--display);letter-spacing:.14em;color:var(--laranja2)}
.calend{display:grid;grid-template-columns:repeat(7,1fr);gap:6px;margin-top:14px}
.calend i{aspect-ratio:1;border-radius:6px;background:#ffffff10;display:grid;place-items:center;font-size:9px;color:var(--muted);font-style:normal}
.calend i.on{background:var(--laranja);color:#1a100c;font-weight:700}
.cert{margin-top:18px;padding:18px;border-radius:18px;border:2px dashed var(--verde);text-align:center}.cert b{display:block;font:800 20px var(--display);color:var(--verde)}
.lista{display:grid;gap:8px;margin-top:14px}.lista div{display:flex;justify-content:space-between;padding:12px 14px;border-radius:12px;background:var(--card);border:1px solid var(--line);font-size:14px}

/* Guias */
.guia{margin-top:12px;border-radius:18px;background:var(--card);border:1px solid var(--line);overflow:hidden}
.guia summary{display:grid;grid-template-columns:1fr auto;gap:10px;align-items:center;padding:14px 16px;cursor:pointer;list-style:none}
.guia summary::-webkit-details-marker{display:none}
.guia summary b{display:block;font:800 16px/1.2 var(--display)}.guia summary small{display:block;margin-top:3px;font-size:12px;color:var(--muted)}
.guia .cod{font:800 14px var(--display);color:var(--laranja);white-space:nowrap}
.guia .corpo{padding:0 16px 16px}.guia ol{padding-left:20px;display:grid;gap:8px;font-size:15px;color:#d9d5dc}
.guia .dica{margin-top:12px;padding:10px 12px;border-radius:10px;background:#ffffff0a;font-size:13px;color:var(--muted)}
.busca{width:100%;height:48px;padding:0 14px;border-radius:12px;border:1px solid #ffffff22;background:var(--card);color:var(--ink);font:inherit;margin-top:14px}

.abas{position:fixed;left:0;right:0;bottom:0;z-index:25;display:grid;grid-template-columns:repeat(4,1fr);padding:6px 8px calc(6px + env(safe-area-inset-bottom));background:#0a0a0cee;backdrop-filter:blur(16px);border-top:1px solid var(--line)}
.abas a{display:grid;justify-items:center;gap:2px;padding:6px 0;border-radius:12px;font-size:11px;font-weight:600;color:var(--muted)}
.abas a i{font-style:normal;font-size:20px}.abas a.on{color:var(--ink);background:#ffffff0d}

.toast{position:fixed;left:50%;top:70px;z-index:40;transform:translate(-50%,-20px);padding:10px 16px;border-radius:999px;background:var(--amarelo);color:#1a100c;font:700 14px var(--display);opacity:0;transition:opacity .3s,transform .3s var(--ease);pointer-events:none}
.toast.on{opacity:1;transform:translate(-50%,0)}

.rv{animation:sobe .5s var(--ease) both}
@keyframes sobe{from{opacity:0;transform:translateY(14px)}}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}