:root{
  --basalt-01:#58626B;--basalt-02:#3B4752;--basalt-03:#27333D;--basalt-04:#172029;--basalt-05:#0A0F14;--basalt-06:#04070A;
  --lime-01:#F4F5F0;--lime-02:#DADBCE;--lime-03:#BFC2AF;--lime-04:#A6A898;--lime-05:#8D8F81;--lime-06:#73756A;
  --magma-01:#FBD5B8;--magma-02:#F5A46B;--magma-03:#EE6B35;--magma-04:#E23A17;--magma-05:#A82412;--magma-06:#5E1108;
  --ouro:#F5C451;--prata:#C9CDD4;--bronze:#C98B54;--verde:#4ADE80;
  --ink:var(--lime-01);--ink2:var(--lime-03);--ink3:var(--lime-05);
  --bg:var(--basalt-06);--line:rgba(244,245,240,.09);--line2:rgba(244,245,240,.17);
  --ease:cubic-bezier(.22,1,.36,1);--shf:0 10px 40px -8px rgba(238,107,53,.45);
  --font:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  --display:'Bebas Neue','Inter',sans-serif;--mono:'JetBrains Mono',ui-monospace,monospace;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--font);font-size:15px;line-height:1.5;-webkit-font-smoothing:antialiased}
button,input,select,textarea{font-family:inherit;color:inherit;font-size:inherit}
button{border:0;background:none;cursor:pointer}
a{color:inherit;text-decoration:none}
::-webkit-scrollbar{width:8px;height:8px}::-webkit-scrollbar-thumb{background:var(--basalt-03);border-radius:5px}
.hide{display:none!important}
.fire{background:linear-gradient(100deg,var(--magma-01),var(--magma-03) 55%,var(--magma-05));-webkit-background-clip:text;background-clip:text;color:transparent}
.h1{font-family:var(--display);font-size:34px;line-height:1;letter-spacing:.02em;margin:0}
.h2{font-family:var(--display);font-size:24px;line-height:1;margin:0}
.h3{font-size:15px;font-weight:650;margin:0}
.eyebrow{font-size:9.5px;letter-spacing:.24em;text-transform:uppercase;color:var(--ink3);font-weight:600}
.muted{color:var(--ink3);font-size:12.5px}
.card{background:linear-gradient(165deg,rgba(39,51,61,.85),rgba(10,15,20,.92));border:1px solid var(--line);border-radius:22px;padding:16px}
.card-lite{background:rgba(23,32,41,.6);border:1px solid var(--line);border-radius:16px;padding:14px}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border-radius:999px;padding:13px 20px;font-size:13.5px;font-weight:650;transition:transform .18s var(--ease),filter .18s}
.btn:active{transform:scale(.97)}
.btn-f{background:linear-gradient(120deg,var(--magma-03),var(--magma-05));color:#fff;box-shadow:var(--shf)}
.btn-g{border:1px solid var(--line2);color:var(--ink)}
.btn-g:hover{border-color:var(--lime-04)}
.btn-block{width:100%}
.chip{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--line2);border-radius:999px;padding:7px 13px;font-size:11.5px;color:var(--ink2);cursor:pointer;white-space:nowrap;background:rgba(23,32,41,.5);transition:.2s}
.chip:hover{border-color:var(--lime-05);color:var(--ink)}
.chip.on{background:linear-gradient(120deg,var(--magma-04),var(--magma-05));border-color:transparent;color:#fff}
.tag{font-size:9.5px;letter-spacing:.06em;text-transform:uppercase;border:1px solid var(--line);border-radius:6px;padding:2px 7px;color:var(--ink3);white-space:nowrap}
.tag.f{color:var(--magma-02);border-color:rgba(238,107,53,.4);background:rgba(238,107,53,.08)}
.tag.v{color:var(--verde);border-color:rgba(74,222,128,.35);background:rgba(74,222,128,.08)}
.row{display:flex;gap:8px;align-items:center}
.wrap{max-width:1180px;margin:0 auto;padding:0 22px}
.grid{display:grid;gap:14px}
.g2{grid-template-columns:1fr 1fr}.g3{grid-template-columns:repeat(3,1fr)}.g4{grid-template-columns:repeat(4,1fr)}
@media(max-width:900px){.g2,.g3,.g4{grid-template-columns:1fr}}
input[type=text],input[type=email],input[type=password],input[type=number],select,textarea{
  width:100%;background:rgba(4,7,10,.6);border:1px solid var(--line2);border-radius:13px;padding:13px 14px;outline:none;transition:.2s}
input:focus,select:focus,textarea:focus{border-color:var(--magma-03);box-shadow:0 0 0 3px rgba(238,107,53,.14)}
label{display:block;font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink3);margin:0 0 6px;font-weight:600}
.field{margin-bottom:12px}
.bar{height:7px;border-radius:4px;background:rgba(244,245,240,.09);overflow:hidden}
.bar i{display:block;height:100%;background:linear-gradient(90deg,var(--magma-04),var(--magma-02));transition:width .9s var(--ease)}

/* ── login ── */
.login{min-height:100vh;display:grid;place-items:center;padding:30px 18px;
  background:radial-gradient(60vw 60vh at 20% 10%,rgba(88,98,107,.25),transparent 60%),radial-gradient(50vw 50vh at 85% 80%,rgba(238,107,53,.14),transparent 60%)}
.login .box{width:100%;max-width:430px}
.logo{display:flex;align-items:center;gap:11px;margin-bottom:26px}
.logo i{width:40px;height:40px;border-radius:13px;display:grid;place-items:center;background:linear-gradient(150deg,var(--magma-02),var(--magma-04) 48%,var(--magma-06));box-shadow:var(--shf)}
.logo b{font-family:var(--display);font-size:26px;letter-spacing:.06em;font-weight:400}
.logo b span{color:var(--magma-03)}

/* ── app shell ── */
.topbar{position:sticky;top:0;z-index:50;display:flex;align-items:center;gap:14px;padding:12px 22px;
  border-bottom:1px solid var(--line);background:rgba(4,7,10,.9);backdrop-filter:blur(14px)}
.nav{display:flex;gap:2px;overflow-x:auto;scrollbar-width:none}.nav::-webkit-scrollbar{display:none}
.nav button{padding:9px 14px;border-radius:10px;font-size:13px;color:var(--ink3);white-space:nowrap;transition:.2s}
.nav button:hover{color:var(--ink);background:rgba(244,245,240,.05)}
.nav button.on{color:var(--lime-01);background:linear-gradient(120deg,rgba(238,107,53,.18),transparent)}
.main{padding:22px 0 70px}
.view{display:none}.view.on{display:block;animation:up .35s var(--ease)}
@keyframes up{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}

/* ── usuário + medalhas (estilo Duolingo) ── */
.user-chip{display:flex;align-items:center;gap:9px}
.avatar{width:34px;height:34px;border-radius:11px;display:grid;place-items:center;font-size:12px;font-weight:700;
  color:var(--basalt-06);background:linear-gradient(140deg,var(--lime-02),var(--lime-04));flex:none}
.avatar.f{background:linear-gradient(140deg,var(--magma-02),var(--magma-04));color:#fff}
.nome-medalhas{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.medalha{width:22px;height:22px;border-radius:50%;display:grid;place-items:center;flex:none;position:relative;
  border:1.5px solid;cursor:help;transition:transform .2s var(--ease)}
.medalha:hover{transform:scale(1.18) rotate(-6deg)}
.medalha svg{width:12px;height:12px;stroke:currentColor;fill:none;stroke-width:1.9}
.medalha.ouro{color:var(--ouro);border-color:var(--ouro);background:radial-gradient(circle at 30% 25%,rgba(245,196,81,.35),rgba(245,196,81,.08))}
.medalha.prata{color:var(--prata);border-color:var(--prata);background:radial-gradient(circle at 30% 25%,rgba(201,205,212,.3),rgba(201,205,212,.07))}
.medalha.bronze{color:var(--bronze);border-color:var(--bronze);background:radial-gradient(circle at 30% 25%,rgba(201,139,84,.32),rgba(201,139,84,.08))}
.medalha.grande{width:44px;height:44px;border-width:2px}.medalha.grande svg{width:22px;height:22px}
.medalha.travada{color:var(--basalt-01);border-color:var(--basalt-02);background:none;opacity:.5}
.xp-pill{display:inline-flex;align-items:center;gap:6px;border:1px solid rgba(238,107,53,.35);background:rgba(238,107,53,.1);
  color:var(--magma-02);border-radius:999px;padding:5px 11px;font-size:11.5px;font-weight:700}
.streak{display:inline-flex;align-items:center;gap:5px;font-size:11.5px;font-weight:700;color:var(--magma-02)}
.liga{font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink3)}

/* listas */
.item{display:flex;gap:12px;padding:13px;border:1px solid var(--line);border-radius:16px;background:rgba(23,32,41,.45);margin-bottom:9px;cursor:pointer;transition:.2s;align-items:flex-start}
.item:hover{border-color:var(--line2);background:rgba(39,51,61,.6)}
.glyph{width:40px;height:40px;border-radius:13px;display:grid;place-items:center;flex:none;
  background:radial-gradient(120% 120% at 30% 20%,rgba(244,245,240,.1),rgba(4,7,10,.5));border:1px solid var(--line2)}
.glyph svg{width:20px;height:20px;stroke:var(--lime-02);fill:none;stroke-width:1.5}
.glyph.fire{background:radial-gradient(120% 120% at 30% 20%,rgba(238,107,53,.32),rgba(94,17,8,.3));border-color:rgba(238,107,53,.4)}
.glyph.fire svg{stroke:var(--magma-02)}
.kv{display:flex;gap:12px;padding:10px 0;border-bottom:1px dashed var(--line);font-size:13px;color:var(--ink2);line-height:1.55}
.kv b{color:var(--lime-01);font-weight:600;font-size:10px;letter-spacing:.14em;text-transform:uppercase;min-width:100px;flex:none;padding-top:2px}
.numline{display:flex;gap:10px;font-size:13px;color:var(--ink2);line-height:1.55;margin-bottom:9px}
.numline .i{font-family:var(--mono);font-size:10px;color:var(--magma-03);border:1px solid rgba(238,107,53,.35);border-radius:6px;width:20px;height:20px;display:grid;place-items:center;flex:none;margin-top:1px}
.quote{border-left:2px solid var(--magma-04);padding-left:12px;margin:8px 0;font-size:13.5px;line-height:1.6;color:var(--lime-02);font-style:italic}
table{width:100%;border-collapse:collapse;font-size:13px}
th{text-align:left;font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink3);padding:9px;border-bottom:1px solid var(--line)}
td{padding:11px 9px;border-bottom:1px solid var(--line);color:var(--ink2)}
tr:hover td{background:rgba(244,245,240,.03)}

/* modal / toast */
.scrim{position:fixed;inset:0;background:rgba(4,7,10,.8);backdrop-filter:blur(6px);z-index:200;display:none;padding:22px;overflow:auto}
.scrim.on{display:block}
.modal{max-width:640px;margin:40px auto;background:linear-gradient(180deg,var(--basalt-04),var(--basalt-06));border:1px solid var(--line2);border-radius:26px;padding:24px}
.toast{position:fixed;left:50%;bottom:26px;transform:translate(-50%,20px);opacity:0;z-index:300;background:rgba(244,245,240,.97);
  color:var(--basalt-06);font-size:13px;font-weight:650;padding:12px 20px;border-radius:999px;box-shadow:0 16px 44px -12px #000;transition:.35s var(--ease);pointer-events:none;max-width:92vw;text-align:center}
.toast.on{opacity:1;transform:translate(-50%,0)}
.toast.f{background:linear-gradient(110deg,var(--magma-03),var(--magma-05));color:#fff}
.celebra{position:fixed;inset:0;z-index:290;pointer-events:none}

/* HUD do usuário no topo */
#hudUser .user-chip{gap:12px}
#hudUser .nome-medalhas{justify-content:flex-end;flex-wrap:nowrap}
#hudUser .xp-pill,#hudUser .streak,#hudUser .liga{white-space:nowrap}
#hudUser .xp-pill svg,#hudUser .streak svg{width:12px;height:12px;flex:none}
.xp-pill svg,.streak svg{width:13px;height:13px}
@media(max-width:1100px){#hudUser .xp-pill,#hudUser .liga{display:none}}
.topbar .logo b{white-space:nowrap}