/* =============================================================
 * PREMIUM.CSS — camada de design premium (Discord/Rocketseat-like)
 * Carregada por último: redefine tokens, layout sidebar, cards,
 * botões, animações, transições e efeitos. Não altera HTML além
 * do novo layout() (sidebar + topbar slim).
 * ============================================================= */

:root{
  --bg:#0a0a10; --bg-2:#0e0e18; --panel:#15151f; --panel-2:#1c1c2b;
  --border:#262636; --border-2:#34344c;
  --text:#eceef6; --muted:#a8a8c8; --muted-2:#7e7e9c;
  --primary:#7c5cff; --primary-rgb:124,92,255; --primary-2:#9d7bff; --primary-3:#b06bff;
  --accent:#00e0c6; --gold:#ffce5a; --success:#2dd4a7; --error:#ff6b81; --warning:#ffb454;
  --radius:14px; --sidebar-w:250px; --code-bg:#08080e; --track:#22222e;
  --shadow-card:0 14px 34px -14px rgba(124,92,255,.45);
  --shadow-elev:0 12px 30px -16px rgba(0,0,0,.7);
  --shadow-glow:0 0 24px -6px rgba(var(--primary-rgb),.5);
  --surface:linear-gradient(165deg,var(--panel),#101019);
  /* escala de espaçamento (base-4) */
  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:24px; --s6:32px; --s7:48px; --s8:64px;
  /* raios */
  --r-xs:8px; --r-sm:10px; --r-md:14px; --r-lg:18px; --r-full:999px;
  /* tipografia (escala modular ~1.25) */
  --fs-xs:11px; --fs-sm:13px; --fs-base:14px; --fs-md:16px; --fs-lg:20px; --fs-xl:26px; --fs-display:34px;
  /* movimento */
  --ease-out:cubic-bezier(.22,.61,.36,1); --ease-spring:cubic-bezier(.34,1.56,.64,1);
  --dur-1:.12s; --dur-2:.2s; --dur-3:.32s;
}

*{ scrollbar-width:thin; scrollbar-color:var(--border-2) transparent; }
*::-webkit-scrollbar{ width:10px; height:10px; }
*::-webkit-scrollbar-thumb{ background:var(--border-2); border-radius:8px; border:2px solid transparent; background-clip:padding-box; }
*::-webkit-scrollbar-thumb:hover{ background:#454566; background-clip:padding-box; }

html,body{ height:100%; }
body{
  font-family:'Inter',system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
  color:var(--text);
  background:
    radial-gradient(1100px 560px at 82% -12%, rgba(124,92,255,.13), transparent 60%),
    radial-gradient(820px 480px at -8% 16%, rgba(0,224,198,.06), transparent 55%),
    var(--bg);
  background-attachment:fixed;
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; text-rendering:optimizeLegibility;
}
h1,h2,h3,.logo{ font-family:'Sora','Inter',sans-serif; letter-spacing:-.01em; }

/* ---------- LAYOUT ---------- */
.shell{ display:grid; grid-template-columns:var(--sidebar-w) 1fr; min-height:100vh; }

/* ---------- SIDEBAR ---------- */
.sidebar{
  position:sticky; top:0; height:100vh; display:flex; flex-direction:column; gap:4px;
  padding:18px 14px; background:linear-gradient(180deg,#15151f 0%,#0d0d16 100%);
  border-right:1px solid var(--border); z-index:40;
}
.logo{ display:flex; align-items:center; gap:11px; padding:6px 8px 16px; color:var(--text); text-decoration:none; font-weight:800; font-size:18px; }
.logo-mark{ font-size:24px; filter:drop-shadow(0 0 10px rgba(124,92,255,.65)); }
.logo-tx b{ color:var(--primary-2); }
.nav{ display:flex; flex-direction:column; gap:2px; flex:1; overflow-y:auto; padding-right:2px; }
.nav-group{ font-size:11px; letter-spacing:.09em; text-transform:uppercase; color:#6f6f8e; font-weight:700; padding:14px 12px 6px; }
.nav-link{ display:flex; align-items:center; gap:11px; padding:10px 12px; border-radius:11px; color:#c4c4dd; text-decoration:none; font-weight:500; font-size:14.5px; position:relative; transition:background .16s,color .16s,transform .12s; }
.nav-link .nav-ic{ font-size:17px; width:22px; text-align:center; }
.nav-link:hover{ background:rgba(255,255,255,.045); color:#fff; transform:translateX(2px); }
.nav-link.ativo{ background:linear-gradient(90deg,rgba(124,92,255,.24),rgba(124,92,255,.05)); color:#fff; }
.nav-link.ativo::before{ content:''; position:absolute; left:-2px; top:50%; transform:translateY(-50%); width:3px; height:20px; border-radius:3px; background:var(--primary-2); box-shadow:0 0 12px var(--primary); }
.nav-badge{ margin-left:auto; background:var(--primary); color:#fff; font-size:11px; font-weight:700; padding:1px 8px; border-radius:10px; }
.sidebar-foot{ padding-top:8px; }
.mini-perfil{ display:flex; align-items:center; gap:10px; padding:9px 10px; background:var(--panel-2); border:1px solid var(--border); border-radius:13px; }
.avatar{ width:38px; height:38px; border-radius:11px; flex:none; display:flex; align-items:center; justify-content:center; font-weight:800; font-size:14px; color:#fff; background:linear-gradient(135deg,var(--primary),var(--primary-3)); box-shadow:0 5px 16px -4px rgba(124,92,255,.6); }
.mp-info{ flex:1; min-width:0; } .mp-nome{ font-size:13px; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .mp-rank{ font-size:11px; color:var(--muted); }
.btn-sair{ background:none; border:none; color:var(--muted); cursor:pointer; font-size:16px; padding:6px; border-radius:9px; transition:.15s; }
.btn-sair:hover{ color:var(--error); background:rgba(255,107,129,.12); }
.sidebar-overlay{ display:none; }

/* ---------- TOPBAR ---------- */
.main-area{ display:flex; flex-direction:column; min-width:0; }
.topbar{ position:sticky; top:0; z-index:30; display:flex; align-items:center; gap:14px; padding:12px 24px; background:rgba(10,10,16,.72); backdrop-filter:blur(14px) saturate(1.2); border-bottom:1px solid var(--border); }
.menu-toggle{ display:none; background:var(--panel-2); border:1px solid var(--border); color:var(--text); width:38px; height:38px; border-radius:10px; cursor:pointer; font-size:17px; }
.search{ display:flex; align-items:center; gap:9px; background:var(--panel-2); border:1px solid var(--border); border-radius:12px; padding:9px 14px; flex:1; max-width:440px; transition:border-color .16s,box-shadow .16s; }
.search:focus-within{ border-color:var(--primary); box-shadow:0 0 0 3px rgba(124,92,255,.18); }
.search-ic{ opacity:.55; }
.search input{ flex:1; background:none; border:none; outline:none; color:var(--text); font-size:14px; font-family:inherit; }
.topbar-right{ margin-left:auto; display:flex; align-items:center; gap:11px; }
.streak-chip{ display:flex; align-items:center; gap:5px; background:var(--panel-2); border:1px solid var(--border); border-radius:11px; padding:7px 12px; font-size:13px; font-weight:700; }
.streak-chip.aceso{ background:linear-gradient(135deg,rgba(255,180,84,.2),rgba(255,140,60,.08)); border-color:rgba(255,180,84,.5); animation:pulseGlow 2.4s ease-in-out infinite; }
@keyframes pulseGlow{ 0%,100%{ box-shadow:0 0 0 0 rgba(255,170,70,.0);} 50%{ box-shadow:0 0 16px 1px rgba(255,170,70,.45);} }
.nivel-chip{ display:flex; align-items:center; gap:9px; background:var(--panel-2); border:1px solid var(--border); border-radius:11px; padding:6px 13px; font-size:12.5px; font-weight:700; color:var(--text); }
.nivel-chip .xp-bar{ width:64px; height:6px; background:#2a2a3e; border-radius:6px; overflow:hidden; }
.xp-fill{ height:100%; border-radius:6px; background:linear-gradient(90deg,var(--primary),var(--primary-3),var(--accent)); background-size:220% 100%; animation:shimmer 3.2s linear infinite; }
@keyframes shimmer{ to{ background-position:220% 0; } }
.avatar-sm{ width:34px; height:34px; border-radius:10px; font-size:13px; }

.conteudo{ padding:30px 26px 64px; max-width:1200px; width:100%; margin:0 auto; animation:fadeInUp .42s cubic-bezier(.2,.7,.3,1) both; }
@keyframes fadeInUp{ from{ opacity:0; transform:translateY(12px);} to{ opacity:1; transform:none;} }

/* ---------- CARDS premium ---------- */
.area-card,.trilha-card,.modulo-card,.ex-card,.card,.stat,.dica-box{ transition:transform .2s cubic-bezier(.2,.7,.3,1),box-shadow .2s,border-color .2s,background .2s; }
.area-card,.trilha-card{ position:relative; overflow:hidden; background:linear-gradient(165deg,var(--panel) 0%,#101019 100%); border:1px solid var(--border); }
.area-card::before,.trilha-card::before{ content:''; position:absolute; inset:0; border-radius:inherit; padding:1px; background:linear-gradient(135deg,rgba(124,92,255,.5),transparent 40%); -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0); -webkit-mask-composite:xor; mask-composite:exclude; opacity:0; transition:opacity .2s; pointer-events:none; }
.area-card:hover,.trilha-card:hover{ transform:translateY(-5px); box-shadow:var(--shadow-card); border-color:transparent; }
.area-card:hover::before,.trilha-card:hover::before{ opacity:1; }
.modulo-card:hover,.ex-card:hover{ transform:translateX(3px); border-color:var(--primary); box-shadow:0 8px 22px -14px rgba(124,92,255,.5); }
.area-ico,.trilha-icone{ transition:transform .25s; display:inline-block; }
.area-card:hover .area-ico{ transform:scale(1.14) rotate(-5deg); }

/* ---------- BOTÕES premium ---------- */
.btn{ transition:transform .12s,box-shadow .16s,filter .16s,background .16s,border-color .16s; }
.btn:hover{ transform:translateY(-1px); }
.btn:active{ transform:translateY(0) scale(.985); }
.btn-primary{ background:linear-gradient(135deg,var(--primary),var(--primary-3)); border:none; color:#fff; box-shadow:0 6px 18px -7px rgba(124,92,255,.65); }
.btn-primary:hover{ filter:brightness(1.08); box-shadow:0 11px 26px -8px rgba(124,92,255,.75); }
.opcao{ transition:transform .14s,border-color .16s,background .16s,box-shadow .16s; }
.opcao:hover{ transform:translateX(3px); box-shadow:0 6px 18px -12px rgba(124,92,255,.6); }
.conf-btn{ transition:.14s; } .conf-btn:hover{ transform:translateY(-2px); border-color:var(--primary); }

/* entradas em lista com leve stagger */
.areas-grid>*,.trilhas>*,.modulos>*{ animation:fadeInUp .4s cubic-bezier(.2,.7,.3,1) both; }
.areas-grid>*:nth-child(2){ animation-delay:.03s; } .areas-grid>*:nth-child(3){ animation-delay:.06s; }
.areas-grid>*:nth-child(4){ animation-delay:.09s; } .areas-grid>*:nth-child(5){ animation-delay:.12s; }
.areas-grid>*:nth-child(6){ animation-delay:.15s; }

/* resultado de acerto com brilho */
.resultado.sucesso{ animation:popIn .3s cubic-bezier(.2,.9,.3,1.2) both; }
@keyframes popIn{ from{ opacity:0; transform:scale(.96);} to{ opacity:1; transform:none;} }

/* títulos de grupo da home */
.grupo-titulo{ font-size:13px; letter-spacing:.06em; text-transform:uppercase; color:var(--muted); font-weight:700; }
.dash-saudacao h1{ font-size:30px; font-weight:800; }
.dash-saudacao h1::after{ content:''; }

/* ---------- HOME: coluna direita (rail) ---------- */
.home-layout{ display:grid; grid-template-columns:minmax(0,1fr) 320px; gap:26px; align-items:start; }
.home-aside{ position:sticky; top:84px; display:flex; flex-direction:column; gap:13px; }
.home-aside .rail-card{ animation:fadeInUp .5s cubic-bezier(.2,.7,.3,1) both; }
.rail-card{ background:linear-gradient(165deg,var(--panel),#101019); border:1px solid var(--border); border-radius:16px; padding:16px; }
.rail-perfil-top{ display:flex; gap:12px; align-items:center; }
.avatar-lg{ width:48px; height:48px; border-radius:14px; font-size:17px; }
.rail-id{ min-width:0; } .rail-nome{ font-weight:700; font-size:15px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .rail-rank{ font-size:12px; color:var(--muted); }
.rail-xp{ margin-top:14px; }
.rail-xp-bar{ height:8px; background:#2a2a3e; border-radius:8px; overflow:hidden; }
.rail-xp-tx{ font-size:11.5px; color:var(--muted); margin-top:6px; text-align:right; }
.rail-stats{ display:grid; grid-template-columns:1fr 1fr; gap:13px; }
.rail-stat{ background:var(--panel-2); border:1px solid var(--border); border-radius:14px; padding:13px; text-align:center; transition:transform .16s,border-color .16s; }
.rail-stat:hover{ transform:translateY(-2px); border-color:var(--primary); }
.rs-num{ font-size:21px; font-weight:800; } .rs-lbl{ font-size:11px; color:var(--muted); margin-top:2px; }
.rail-revisoes{ display:flex; align-items:center; gap:12px; text-decoration:none; color:var(--text); }
.rr-ic{ font-size:22px; } .rr-tx{ display:flex; flex-direction:column; } .rr-t{ font-weight:600; font-size:13.5px; } .rr-s{ font-size:11.5px; color:var(--muted); }
.rr-arrow{ margin-left:auto; color:var(--muted); transition:transform .15s,color .15s; }
.rail-revisoes:hover{ border-color:var(--primary); } .rail-revisoes:hover .rr-arrow{ transform:translateX(4px); color:var(--primary-2); }
.rail-revisoes.tem{ border-color:rgba(124,92,255,.5); box-shadow:0 0 0 3px rgba(124,92,255,.12); }
.rail-card-titulo{ font-size:11px; text-transform:uppercase; letter-spacing:.07em; color:var(--muted); font-weight:700; margin-bottom:6px; }
.rail-links{ padding:14px 12px; } .rail-link{ display:flex; align-items:center; justify-content:space-between; padding:9px 8px; color:var(--text); text-decoration:none; font-size:13.5px; border-radius:10px; transition:.15s; }
.rail-link>span:last-child{ color:var(--muted); } .rail-link:hover{ background:rgba(255,255,255,.045); padding-left:12px; }
.rail-upgrade{ position:relative; overflow:hidden; background:linear-gradient(150deg,rgba(124,92,255,.22),rgba(0,224,198,.07)); border-color:rgba(124,92,255,.45); }
.rail-upgrade::after{ content:''; position:absolute; top:-40%; right:-20%; width:140px; height:140px; background:radial-gradient(circle,rgba(124,92,255,.4),transparent 70%); pointer-events:none; }
.ru-badge{ display:inline-block; font-size:10.5px; font-weight:700; color:#fff; background:rgba(124,92,255,.85); padding:2px 10px; border-radius:9px; margin-bottom:9px; }
.ru-t{ font-family:'Sora','Inter',sans-serif; font-weight:800; font-size:16px; } .ru-s{ font-size:12px; color:#cfcfe6; margin-top:5px; line-height:1.55; }

/* ---------- polimento das telas internas ---------- */
.bread a{ color:var(--muted); text-decoration:none; font-size:13px; transition:color .15s; }
.bread a:hover{ color:var(--primary-2); }
.ex-head h1{ font-size:22px; font-weight:800; }
.enunciado{ background:linear-gradient(165deg,var(--panel),#101019); border:1px solid var(--border); border-radius:14px; padding:18px 20px; line-height:1.75; }
.confianca-box,.passos-box,.dica-box,.exemplo{ background:linear-gradient(165deg,var(--panel),#101019)!important; }
.trilha-card,.modulo-card,.ex-card{ background:linear-gradient(165deg,var(--panel),#101019); }
.modulo-num{ background:linear-gradient(135deg,var(--primary),var(--primary-3)); color:#fff; box-shadow:0 4px 12px -4px rgba(124,92,255,.6); }
.skill-tag{ background:rgba(124,92,255,.16); color:#c4b5fd; }
.stats-cards .stat{ transition:transform .16s,border-color .16s,box-shadow .16s; }
.stats-cards .stat:hover{ transform:translateY(-3px); border-color:var(--primary); box-shadow:var(--shadow-card); }
.opcao.certa{ animation:popIn .3s cubic-bezier(.2,.9,.3,1.2) both; }

/* ---------- LOGO ---------- */
.logo{ gap:11px; border-bottom:1px solid var(--border); padding:4px 8px 14px; margin-bottom:8px; }
.logo-svg{ flex:none; filter:drop-shadow(0 4px 12px rgba(124,92,255,.5)); transition:transform .35s cubic-bezier(.2,.7,.3,1); }
.logo:hover .logo-svg{ transform:rotate(-8deg) scale(1.06); }
.logo-tx{ font-family:'Sora','Inter',sans-serif; font-weight:800; font-size:17px; letter-spacing:-.02em; color:#fff; }
.logo-tx b{ background:linear-gradient(120deg,var(--primary-2),var(--accent)); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; }

/* ---------- SIDEBAR: ícones em chip ---------- */
.nav-link{ gap:10px; padding:8px 10px; }
.nav-link .nav-ic{ width:30px; height:30px; display:inline-flex; align-items:center; justify-content:center; border-radius:9px; background:rgba(255,255,255,.045); font-size:15px; text-align:center; transition:background .16s,box-shadow .16s,transform .16s; }
.nav-link:hover .nav-ic{ background:rgba(124,92,255,.2); transform:scale(1.04); }
.nav-link.ativo{ background:linear-gradient(90deg,rgba(124,92,255,.16),transparent); }
.nav-link.ativo .nav-ic{ background:linear-gradient(135deg,var(--primary),var(--primary-3)); box-shadow:0 5px 14px -4px rgba(124,92,255,.7); }
.sidebar-foot{ border-top:1px solid var(--border); margin-top:6px; padding-top:12px; }

/* ---------- CÓDIGO: janela estilo IDE ---------- */
.code-win{ border:1px solid var(--border); border-radius:13px; overflow:hidden; background:var(--code-bg); box-shadow:0 12px 32px -18px rgba(0,0,0,.8); transition:border-color .16s,box-shadow .16s; }
.code-win:focus-within{ border-color:var(--primary); box-shadow:0 0 0 3px rgba(124,92,255,.16); }
.code-win-head{ display:flex; align-items:center; gap:8px; padding:9px 13px; background:#0c0c14; border-bottom:1px solid var(--border); }
.cw-dots{ display:flex; gap:6px; } .cw-dots i{ width:11px; height:11px; border-radius:50%; display:block; }
.cw-dots i:nth-child(1){ background:#ff5f57; } .cw-dots i:nth-child(2){ background:#febc2e; } .cw-dots i:nth-child(3){ background:#28c840; }
.cw-lang{ margin-left:auto; font-family:'JetBrains Mono',monospace; font-size:10.5px; font-weight:700; letter-spacing:.1em; color:#7a7a98; }
.code-win .code-area{ border:none!important; border-radius:0; background:transparent!important; box-shadow:none!important; }
.code-area,.runner-out{ font-family:'JetBrains Mono','Cascadia Code',Consolas,monospace; }
.code-area{ font-size:13.5px; line-height:1.65; } #resposta-codigo{ font-family:'JetBrains Mono',Consolas,monospace; }
.runner-out{ background:#0a0a12; }
.enunciado code,.exemplo code,.cog-instr code,.passo-txt code,.reveal-expl code,.teoria code{ background:#0c0c14; border:1px solid var(--border); border-radius:6px; padding:1.5px 6px; font-family:'JetBrains Mono',Consolas,monospace; font-size:.86em; color:#ffd6a8; }
.enunciado pre,.exemplo pre,.passo-txt pre,.teoria pre{ background:var(--code-bg); border:1px solid var(--border); border-radius:12px; padding:14px 16px; overflow:auto; font-family:'JetBrains Mono',Consolas,monospace; font-size:13px; line-height:1.6; }

/* ---------- CodeMirror (editor com syntax highlighting) ---------- */
.code-win .CodeMirror{ height:auto; background:var(--code-bg)!important; color:#e8eef7; font-family:'JetBrains Mono','Cascadia Code',Consolas,monospace; font-size:13.5px; line-height:1.6; }
.code-win .CodeMirror-scroll{ min-height:150px; max-height:440px; }
.code-win .CodeMirror-gutters{ background:#0c0c14!important; border-right:1px solid var(--border); }
.code-win .CodeMirror-linenumber{ color:#54546f; }
.code-win .CodeMirror-cursor{ border-left:2px solid var(--primary-2); }
.code-win .CodeMirror-selected{ background:rgba(124,92,255,.24)!important; }

/* ---------- RANKING ---------- */
.rank-sec-titulo{ font-family:'Sora','Inter',sans-serif; font-size:17px; font-weight:700; margin:26px 0 12px; display:flex; align-items:center; gap:8px; }
.rank-sec-sub{ font-size:12px; font-weight:500; color:var(--muted); background:var(--panel-2); padding:2px 10px; border-radius:10px; }
.rank-hero{ display:flex; align-items:center; gap:18px; padding:22px 24px; border-radius:18px; border:1px solid var(--border); position:relative; overflow:hidden; background:linear-gradient(135deg, color-mix(in srgb, var(--rc) 22%, var(--panel)), var(--panel) 72%); }
.rank-hero::after{ content:''; position:absolute; top:-55%; right:-8%; width:240px; height:240px; border-radius:50%; background:radial-gradient(circle, color-mix(in srgb, var(--rc) 42%, transparent), transparent 70%); pointer-events:none; }
.rh-emblema{ font-size:58px; filter:drop-shadow(0 6px 16px color-mix(in srgb, var(--rc) 60%, transparent)); animation:floaty 3.6s ease-in-out infinite; }
@keyframes floaty{ 0%,100%{ transform:translateY(0);} 50%{ transform:translateY(-6px);} }
.rh-info{ flex:1; min-width:0; position:relative; z-index:1; }
.rh-rank{ font-family:'Sora','Inter',sans-serif; font-size:26px; font-weight:800; color:var(--rc); }
.rh-lvl{ font-size:13px; color:var(--muted); margin:2px 0 10px; }
.rh-bar{ height:9px; background:#2a2a3e; border-radius:9px; overflow:hidden; max-width:520px; }
.rh-next{ font-size:13px; color:var(--text); margin-top:10px; } .rh-next span{ color:var(--muted); }
.rank-ladder{ display:grid; grid-template-columns:repeat(auto-fit,minmax(118px,1fr)); gap:12px; }
.tier{ position:relative; text-align:center; padding:16px 10px; border-radius:14px; border:1px solid var(--border); background:var(--panel); transition:transform .16s,box-shadow .16s; }
.tier.atingido{ border-color:color-mix(in srgb, var(--rc) 55%, var(--border)); }
.tier.atual{ border-color:var(--rc); transform:translateY(-3px); background:linear-gradient(165deg, color-mix(in srgb, var(--rc) 16%, var(--panel)), var(--panel)); box-shadow:0 0 0 2px color-mix(in srgb, var(--rc) 40%, transparent), 0 14px 30px -14px color-mix(in srgb, var(--rc) 55%, transparent); }
.tier.bloqueado{ opacity:.5; } .tier:hover{ transform:translateY(-3px); }
.tier-emblema{ font-size:34px; } .tier.bloqueado .tier-emblema{ filter:grayscale(1) brightness(.7); }
.tier-nome{ font-weight:700; font-size:14px; margin-top:4px; color:var(--rc); } .tier.bloqueado .tier-nome{ color:var(--muted); }
.tier-req{ font-size:11px; color:var(--muted); margin-top:2px; }
.tier-tag{ font-size:10.5px; font-weight:700; margin-top:8px; padding:2px 8px; border-radius:9px; display:inline-block; }
.tier-tag.voce{ background:var(--rc); color:#0a0a10; } .tier-tag.ok{ background:rgba(45,212,167,.16); color:var(--success); } .tier-tag.lock{ background:var(--panel-2); color:var(--muted); }
.mast-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(186px,1fr)); gap:13px; }
.mast-card{ background:linear-gradient(165deg,var(--panel),#101019); border:1px solid var(--border); border-radius:15px; padding:14px; transition:transform .16s,border-color .16s,box-shadow .16s; }
.mast-card:hover{ transform:translateY(-4px); border-color:var(--mc); box-shadow:0 14px 30px -16px color-mix(in srgb, var(--mc) 60%, transparent); }
.mast-top{ display:flex; align-items:center; justify-content:space-between; } .mast-ico{ font-size:24px; } .mast-emblema{ font-size:22px; }
.mast-area{ font-weight:600; font-size:14px; margin-top:8px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.mast-tier{ font-size:12px; color:var(--mc); font-weight:700; margin-top:2px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.mast-bar{ height:7px; background:#2a2a3e; border-radius:7px; overflow:hidden; margin:9px 0 7px; }
.mast-bar>div{ height:100%; border-radius:7px; background:linear-gradient(90deg, var(--mc), color-mix(in srgb, var(--mc) 55%, #fff)); }
.mast-foot{ display:flex; justify-content:space-between; gap:8px; font-size:11px; color:var(--muted); }

/* ---------- TOAST de conquista (estilo Xbox/PlayStation) ---------- */
.toast-wrap{ position:fixed; top:74px; right:20px; z-index:9999; display:flex; flex-direction:column; gap:10px; pointer-events:none; }
.conquista-toast{ position:relative; overflow:hidden; display:flex; align-items:center; gap:14px; min-width:300px; max-width:372px; padding:14px 16px; border-radius:15px; background:linear-gradient(135deg,#1c1c2b,#14141f); border:1px solid var(--primary); box-shadow:0 18px 46px -16px rgba(124,92,255,.7), 0 0 0 1px rgba(124,92,255,.2); transform:translateX(440px); opacity:0; transition:transform .55s cubic-bezier(.2,.9,.3,1.25), opacity .4s; }
.conquista-toast.show{ transform:translateX(0); opacity:1; }
.conquista-toast.hide{ transform:translateX(440px); opacity:0; }
.ct-icone{ width:52px; height:52px; flex:none; border-radius:14px; background:linear-gradient(135deg,var(--primary),var(--primary-3)); display:flex; align-items:center; justify-content:center; font-size:28px; box-shadow:0 6px 18px -5px rgba(124,92,255,.85); animation:badgePop .65s cubic-bezier(.2,.9,.3,1.5) both .1s; }
@keyframes badgePop{ 0%{ transform:scale(0) rotate(-30deg);} 60%{ transform:scale(1.22) rotate(8deg);} 100%{ transform:scale(1) rotate(0);} }
.ct-label{ font-size:10px; font-weight:700; letter-spacing:.07em; text-transform:uppercase; color:var(--primary-2); }
.ct-nome{ font-family:'Sora','Inter',sans-serif; font-weight:800; font-size:15px; color:#fff; margin:1px 0; }
.ct-desc{ font-size:11.5px; color:var(--muted); line-height:1.35; }
.ct-shine{ position:absolute; top:0; left:-60%; width:55%; height:100%; background:linear-gradient(100deg,transparent,rgba(255,255,255,.14),transparent); transform:skewX(-18deg); animation:shineSweep 1.15s ease .3s; }
@keyframes shineSweep{ to{ left:135%; } }

/* ---------- Pontos fortes & fracos (repaginado) ---------- */
.fortes-fracos{ display:grid; grid-template-columns:1fr 1fr; gap:16px; align-items:start; }
.fortes-fracos .card-head{ display:flex; align-items:center; justify-content:space-between; }
.card-sub{ font-size:11.5px; color:var(--muted); background:var(--panel-2); padding:2px 9px; border-radius:9px; }
.fracos-lista{ margin:4px 0 14px; }
.fraco-card{ display:flex; align-items:center; gap:13px; padding:11px 4px; border-top:1px solid var(--border); }
.fraco-card:first-child{ border-top:none; }
.fraco-ring{ width:50px; height:50px; flex:none; border-radius:50%; background:conic-gradient(var(--c) calc(var(--p)*1%), #2a2a3e 0); display:flex; align-items:center; justify-content:center; }
.fraco-ring span{ width:38px; height:38px; border-radius:50%; background:var(--panel); display:flex; align-items:center; justify-content:center; font-size:12px; font-weight:800; color:var(--c); }
.fraco-nome{ font-weight:600; font-size:14.5px; } .fraco-meta{ font-size:12px; color:var(--muted); margin-top:2px; }
.dominados{ display:flex; flex-wrap:wrap; gap:8px; }
.dominado-chip{ background:rgba(45,212,167,.12); border:1px solid rgba(45,212,167,.35); color:var(--success); border-radius:11px; padding:6px 11px; font-size:12.5px; font-weight:500; }

/* ---------- CONQUISTAS (estilo Xbox/PlayStation) ---------- */
.conq-hero{ display:flex; align-items:center; gap:20px; padding:20px 22px; border-radius:18px; border:1px solid var(--border); background:linear-gradient(135deg, rgba(124,92,255,.18), var(--panel) 70%); margin-bottom:18px; }
.conq-ring{ width:90px; height:90px; flex:none; border-radius:50%; background:conic-gradient(var(--primary) calc(var(--p)*1%), #2a2a3e 0); display:flex; align-items:center; justify-content:center; box-shadow:0 0 26px -6px rgba(124,92,255,.55); }
.conq-ring span{ width:70px; height:70px; border-radius:50%; background:var(--panel); display:flex; align-items:center; justify-content:center; font-size:14px; color:var(--muted); }
.conq-ring span b{ font-size:22px; color:#fff; }
.conq-hero-num{ font-family:'Sora','Inter',sans-serif; font-size:22px; font-weight:800; }
.conq-hero-sub{ font-size:12.5px; color:var(--muted); margin:3px 0 10px; max-width:470px; }
.conq-hero-bar{ height:8px; background:#2a2a3e; border-radius:8px; overflow:hidden; max-width:480px; }
.conq-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(178px,1fr)); gap:13px; }
.conq-card{ text-align:center; padding:18px 14px; border-radius:15px; border:1px solid var(--border); background:linear-gradient(165deg,var(--panel),#101019); transition:transform .16s, box-shadow .16s, border-color .16s; }
.conq-card.on{ border-color:rgba(124,92,255,.4); } .conq-card.on:hover{ transform:translateY(-4px); box-shadow:var(--shadow-card); border-color:var(--primary); }
.conq-card.off{ opacity:.6; } .conq-card.off .conq-icone{ filter:grayscale(1) brightness(.7); }
.conq-icone{ width:64px; height:64px; margin:0 auto 10px; border-radius:18px; display:flex; align-items:center; justify-content:center; font-size:33px; background:linear-gradient(135deg, rgba(124,92,255,.22), rgba(124,92,255,.05)); border:1px solid var(--border); }
.conq-card.on .conq-icone{ background:linear-gradient(135deg,var(--primary),var(--primary-3)); box-shadow:0 8px 20px -6px rgba(124,92,255,.7); }
.conq-nome{ font-weight:700; font-size:14px; } .conq-desc{ font-size:11.5px; color:var(--muted); margin:4px 0 9px; line-height:1.4; min-height:32px; }
.conq-tag{ font-size:10.5px; font-weight:700; padding:3px 10px; border-radius:9px; display:inline-block; }
.conq-tag.ok{ background:rgba(45,212,167,.15); color:var(--success); } .conq-tag.lock{ background:var(--panel-2); color:var(--muted); }

/* ---------- REVISÕES (agrupadas) ---------- */
.rev-resumo{ display:flex; gap:12px; margin-bottom:18px; flex-wrap:wrap; }
.rev-chip{ display:flex; align-items:center; gap:7px; padding:10px 16px; border-radius:13px; border:1px solid var(--border); background:var(--panel-2); font-size:14px; font-weight:500; }
.rev-chip b{ font-size:18px; font-weight:800; } .rev-chip.done{ border-color:rgba(45,212,167,.4); } .rev-chip.done b{ color:var(--success); } .rev-chip.pend b{ color:var(--primary-2); }
.rev-zerado{ display:flex; align-items:center; gap:16px; } .rev-zerado-ic{ font-size:40px; }
.rev-area{ margin-bottom:18px; } .rev-area-head{ display:flex; align-items:center; gap:10px; margin-bottom:9px; }
.rev-area-head h2{ font-size:15px; margin:0; } .rev-area-ic{ font-size:20px; }
.rev-area-n{ margin-left:auto; font-size:12px; font-weight:700; color:var(--muted); background:var(--panel-2); padding:2px 9px; border-radius:9px; }

/* ---------- STATS premium + heatmap ---------- */
.stats-cards{ display:grid; grid-template-columns:repeat(auto-fit,minmax(118px,1fr)); gap:13px; margin-bottom:18px; }
.stat{ background:linear-gradient(165deg,var(--panel),#101019); border:1px solid var(--border); border-radius:15px; padding:16px; text-align:center; transition:transform .16s, border-color .16s; }
.stat:hover{ transform:translateY(-3px); border-color:var(--primary); }
.stat-ic{ font-size:20px; margin-bottom:4px; } .stat-num{ font-family:'Sora','Inter',sans-serif; font-size:24px; font-weight:800; } .stat-lbl{ font-size:12px; color:var(--muted); }
.calib{ display:flex; flex-direction:column; gap:9px; }
.calib-row{ display:flex; align-items:center; gap:10px; } .calib-conf{ font-size:13px; color:var(--primary-2); letter-spacing:1px; width:64px; }
.calib-bar{ flex:1; height:9px; background:#2a2a3e; border-radius:9px; overflow:hidden; } .calib-bar>div{ height:100%; border-radius:9px; background:linear-gradient(90deg,var(--primary),var(--primary-3)); }
.calib-pct{ font-size:12px; font-weight:700; width:42px; text-align:right; }
.heatmap{ display:grid; grid-auto-flow:column; grid-template-rows:repeat(7,11px); gap:3px; overflow-x:auto; padding:6px 0; }
.hm-cell{ width:11px; height:11px; border-radius:3px; background:#1c1c2b; display:block; }
.hm-1{ background:rgba(124,92,255,.32); } .hm-2{ background:rgba(124,92,255,.55); } .hm-3{ background:rgba(124,92,255,.8); } .hm-4{ background:#9d7bff; box-shadow:0 0 6px rgba(124,92,255,.55); }
.hm-legend{ display:flex; align-items:center; gap:4px; font-size:11px; color:var(--muted); margin-top:8px; }

/* ---------- LEVEL-UP / BOSS (overlay tela cheia) ---------- */
.levelup-ov,.boss-ov{ position:fixed; inset:0; z-index:10000; display:flex; align-items:center; justify-content:center; background:radial-gradient(circle at center, rgba(124,92,255,.25), rgba(8,8,14,.86)); backdrop-filter:blur(4px); opacity:0; transition:opacity .35s; cursor:pointer; text-align:center; }
.levelup-ov.show,.boss-ov.show{ opacity:1; }
.lu-card,.boss-card{ transform:scale(.8); transition:transform .45s cubic-bezier(.2,.9,.3,1.45); position:relative; z-index:1; }
.levelup-ov.show .lu-card,.boss-ov.show .boss-card{ transform:scale(1); }
.lu-label{ font-size:14px; font-weight:800; letter-spacing:.16em; color:var(--primary-2); }
.lu-nivel{ font-family:'Sora','Inter',sans-serif; font-size:56px; font-weight:900; line-height:1.05; background:linear-gradient(120deg,var(--primary-2),var(--accent)); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; margin:6px 0; }
.lu-rank{ font-size:24px; font-weight:800; color:var(--gold); }
.lu-sub{ font-size:13px; color:var(--muted); margin-top:14px; }
.lu-burst{ position:absolute; left:50%; top:50%; width:0; height:0; }
.lu-part{ position:absolute; left:0; top:0; width:9px; height:9px; border-radius:2px; background:hsl(var(--a) 85% 65%); transform:rotate(var(--a)) translateY(0); animation:luFly var(--d) cubic-bezier(.2,.7,.4,1) forwards; }
@keyframes luFly{ to{ transform:rotate(var(--a)) translateY(-230px) scale(.2); opacity:0; } }
.boss-ov{ background:radial-gradient(circle at center, rgba(224,80,74,.3), rgba(8,8,14,.92)); }
.boss-emoji{ font-size:66px; animation:bossShake .5s ease 3; }
@keyframes bossShake{ 0%,100%{ transform:rotate(0);} 25%{ transform:rotate(-13deg);} 75%{ transform:rotate(13deg);} }
.boss-label{ font-family:'Sora','Inter',sans-serif; font-size:32px; font-weight:900; letter-spacing:.12em; color:#ff6b6b; text-shadow:0 0 24px rgba(255,80,80,.65); margin:6px 0; }
.boss-titulo{ font-size:17px; font-weight:600; color:#fff; max-width:340px; }
.boss-recompensa{ font-size:14px; font-weight:700; color:var(--gold); margin-top:12px; }

/* ---------- COMBO ---------- */
.combo-chip{ position:fixed; top:78px; left:50%; transform:translateX(-50%) translateY(-18px); z-index:9998; padding:9px 18px; border-radius:14px; font-size:15px; font-weight:700; color:#fff; background:linear-gradient(135deg,#e0883a,#e0504a); box-shadow:0 10px 26px -8px rgba(224,80,74,.6); opacity:0; transition:opacity .3s, transform .3s; pointer-events:none; white-space:nowrap; }
.combo-chip.show{ opacity:1; transform:translateX(-50%) translateY(0); }
.combo-chip.t2{ background:linear-gradient(135deg,#e0504a,#c0392b); }
.combo-chip.t3{ background:linear-gradient(135deg,#7c5cff,#e0b53a); box-shadow:0 10px 28px -8px rgba(124,92,255,.7); }
.combo-chip b{ font-size:18px; } .cc-hot{ font-size:13px; opacity:.9; }
.combo-chip.pop{ animation:comboPop .35s cubic-bezier(.2,.9,.3,1.5); }
@keyframes comboPop{ 0%{ transform:translateX(-50%) translateY(0) scale(1);} 50%{ transform:translateX(-50%) translateY(0) scale(1.18);} 100%{ transform:translateX(-50%) translateY(0) scale(1);} }

/* ---------- ÍCONES SVG (substituem emojis) ---------- */
.ic{ width:17px; height:17px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; display:block; }
.nav-link .nav-ic{ color:#c4c4dd; } .nav-link:hover .nav-ic{ color:#fff; } .nav-link.ativo .nav-ic{ color:#fff; }

/* ---------- EMBLEMAS DE RANK (estilo Valorant) ---------- */
.rank-emb{ width:40px; height:auto; display:inline-block; vertical-align:middle; filter:drop-shadow(0 3px 6px rgba(0,0,0,.45)); }
.rank-emb.glow{ animation:embGlow 2.6s ease-in-out infinite; }
@keyframes embGlow{ 0%,100%{ filter:drop-shadow(0 0 7px rgba(0,224,216,.5)) drop-shadow(0 3px 6px rgba(0,0,0,.45)); } 50%{ filter:drop-shadow(0 0 18px rgba(0,224,216,.95)) drop-shadow(0 3px 6px rgba(0,0,0,.45)); } }
.tier-emblema{ display:flex; justify-content:center; } .tier-emblema .rank-emb{ width:46px; }
.tier.bloqueado .rank-emb{ filter:grayscale(.85) brightness(.65) drop-shadow(0 3px 6px rgba(0,0,0,.45)); }
.rh-emblema .rank-emb{ width:58px; }
.rh-prox{ display:inline-flex; align-items:center; gap:3px; } .rh-prox .rank-emb{ width:20px; filter:drop-shadow(0 1px 3px rgba(0,0,0,.4)); }

/* ---------- SWEEP DE ÍCONES (área/status/rail/empty) ---------- */
/* tile de ícone de área */
.area-ico{ width:42px; height:42px; border-radius:12px; display:flex; align-items:center; justify-content:center; background:color-mix(in srgb, var(--ac) 16%, transparent); border:1px solid color-mix(in srgb, var(--ac) 38%, transparent); box-shadow:inset 0 1px 0 rgba(255,255,255,.06); transition:background .2s; }
.area-ico .ic{ width:22px; height:22px; color:var(--ac); }
.area-card:hover .area-ico{ background:color-mix(in srgb, var(--ac) 28%, transparent); }
/* status de exercício */
.ex-status{ display:inline-flex; align-items:center; justify-content:center; color:var(--muted-2); }
.ex-status .ic{ width:18px; height:18px; }
.ex-status.ok{ color:var(--success); } .ex-status.boss{ color:var(--error); } .ex-status.todo{ color:var(--muted-2); } .ex-status.rev{ color:var(--accent); }
/* módulo: cadeado e concluído */
.mod-lock{ display:inline-flex; } .mod-lock .ic{ width:17px; } .mod-done{ display:inline-flex; } .mod-done .ic{ width:20px; color:var(--success); }
/* boss tag no título */
.boss-tag{ display:inline-flex; vertical-align:-4px; } .boss-tag .ic{ width:22px; color:var(--error); }
/* rail */
.rs-num{ display:flex; align-items:center; justify-content:center; gap:6px; } .rs-ic{ display:inline-flex; } .rs-ic .ic{ width:16px; } .rs-ic.fire{ color:#ff8a3d; } .rs-ic.gold{ color:var(--gold); }
.rr-ic .ic{ width:20px; }
.rl-in{ display:inline-flex; align-items:center; gap:8px; } .rl-in .ic{ width:16px; opacity:.85; } .rl-arr{ display:inline-flex; } .rl-arr .ic{ width:15px; opacity:.5; }
/* pontos fracos: conceito + headers */
.fraco-nome{ display:flex; align-items:center; gap:7px; } .fraco-nome .ic{ width:16px; color:var(--accent); flex:0 0 auto; }
.dominado-chip .ic{ width:14px; color:var(--success); vertical-align:-2px; }
.pt-ic{ display:inline-flex; vertical-align:-4px; } .pt-ic .ic{ width:22px; color:var(--accent); }
.card-head h2 .ch-ic{ display:inline-flex; vertical-align:-3px; margin-right:4px; } .ch-ic .ic{ width:18px; } .ch-ic.warn{ color:var(--warning); } .ch-ic.ok{ color:var(--success); }
.rev-area-ic{ display:inline-flex; } .rev-area-ic .ic{ width:18px; color:var(--accent); }
#btn-drill .ic{ width:16px; vertical-align:-3px; margin-right:5px; }
/* botões pequenos com ícone + título de grupo */
.btn-pequeno{ display:inline-flex; align-items:center; gap:6px; } .btn-pequeno .ic{ width:15px; height:15px; }
.ex-modo{ display:inline-flex; align-items:center; gap:4px; } .ex-modo .ic{ width:12px; height:12px; }
.grupo-titulo{ display:flex; align-items:center; gap:9px; } .gt-ic{ display:inline-flex; width:30px; height:30px; align-items:center; justify-content:center; border-radius:9px; background:rgba(var(--primary-rgb),.12); border:1px solid rgba(var(--primary-rgb),.25); } .gt-ic .ic{ width:18px; color:var(--primary-2); }
/* empty-states */
.empty{ display:flex; flex-direction:column; align-items:center; text-align:center; gap:6px; padding:30px 18px; }
.empty-art{ width:60px; height:60px; border-radius:16px; display:flex; align-items:center; justify-content:center; background:radial-gradient(circle at 50% 35%, color-mix(in srgb,var(--primary) 22%, transparent), transparent 70%); border:1px solid var(--border-2); box-shadow:0 0 26px -8px rgba(var(--primary-rgb),.5); margin-bottom:4px; }
.empty-art .ic{ width:28px; height:28px; color:var(--primary-2); }
.empty-t{ font-family:'Sora',sans-serif; font-weight:700; font-size:15px; color:var(--text); }
.empty-s{ font-size:13px; color:var(--muted); max-width:34ch; line-height:1.5; }

/* ---------- CAÇA-ERRO ---------- */
.cacaerro-area{ display:flex; flex-direction:column; gap:14px; }
.ce-codewin{ background:var(--code-bg); border:1px solid var(--border-2); border-radius:14px; overflow:hidden; box-shadow:0 14px 34px -18px rgba(0,0,0,.8); }
.ce-hint{ margin-left:auto; font-size:11px; color:var(--muted-2); }
.ce-code{ list-style:none; margin:0; padding:8px 0; font-family:'JetBrains Mono',Consolas,monospace; font-size:13px; line-height:1.65; }
.ce-line{ display:flex; gap:12px; padding:1px 14px; cursor:pointer; transition:background .12s; align-items:baseline; }
.ce-line:hover{ background:rgba(var(--primary-rgb),.10); }
.ce-num{ color:var(--muted-2); user-select:none; min-width:24px; text-align:right; font-variant-numeric:tabular-nums; flex:0 0 auto; }
.ce-line code{ white-space:pre; color:#cdd2e6; }
.ce-line.locked{ cursor:default; } .ce-line.locked:hover{ background:transparent; }
.ce-line.sel{ background:rgba(var(--primary-rgb),.20); box-shadow:inset 3px 0 0 var(--primary); }
.ce-line.certa{ background:rgba(45,212,167,.16); box-shadow:inset 3px 0 0 var(--success); } .ce-line.certa code{ color:#bff0df; }
.ce-line.errada{ background:rgba(255,107,129,.16); box-shadow:inset 3px 0 0 var(--error); }
.ce-rev{ border-radius:12px; padding:14px 16px; border:1px solid var(--border-2); animation:fadeInUp .3s; }
.ce-rev.ok{ background:linear-gradient(180deg,rgba(45,212,167,.10),transparent); border-color:rgba(45,212,167,.35); }
.ce-rev.no{ background:linear-gradient(180deg,rgba(255,107,129,.10),transparent); border-color:rgba(255,107,129,.35); }
.ce-rev-h{ font-family:'Sora',sans-serif; font-weight:700; margin-bottom:6px; } .ce-rev.ok .ce-rev-h{ color:var(--success); } .ce-rev.no .ce-rev-h{ color:var(--error); }
.ce-rev-b{ font-size:13.5px; color:var(--muted); line-height:1.6; }
.ce-fix{ margin-top:8px; } .ce-fix pre{ background:var(--code-bg); border:1px solid var(--border); border-radius:8px; padding:8px 10px; margin-top:5px; font-family:'JetBrains Mono',monospace; font-size:12.5px; color:#bff0df; white-space:pre-wrap; overflow-x:auto; }

/* ---------- FUNDAÇÃO C (tokens aplicados) ---------- */
/* sombra: repouso = elevação neutra (não roxo); glow fica só pra foco/ativo */
.card{ box-shadow:var(--shadow-elev); }
/* componente .chip unificado (variantes só de cor) */
.chip{ display:inline-flex; align-items:center; gap:5px; height:22px; padding:0 9px; border-radius:var(--r-full); font-size:var(--fs-xs); font-weight:600; line-height:1; border:1px solid transparent; white-space:nowrap; }
.chip .ic{ width:13px; }
.chip--neutral{ background:rgba(255,255,255,.06); color:var(--muted); border-color:var(--border); }
.chip--brand{ background:rgba(var(--primary-rgb),.14); color:var(--primary-2); border-color:rgba(var(--primary-rgb),.3); }
.chip--ok{ background:rgba(45,212,167,.14); color:var(--success); border-color:rgba(45,212,167,.3); }
.chip--warn{ background:rgba(255,180,84,.14); color:var(--warning); border-color:rgba(255,180,84,.3); }
.chip--accent{ background:rgba(0,224,198,.12); color:var(--accent); border-color:rgba(0,224,198,.3); }
.chip--gold{ background:rgba(255,206,90,.14); color:var(--gold); border-color:rgba(255,206,90,.3); }

/* ---------- MODAL NO TEMA (substitui confirm/alert nativos) ---------- */
.modal-ov{ position:fixed; inset:0; background:rgba(6,6,12,.72); backdrop-filter:blur(6px); display:flex; align-items:center; justify-content:center; padding:20px; z-index:9500; opacity:0; transition:opacity var(--dur-2) ease; }
.modal-ov.show{ opacity:1; }
.modal-card{ width:min(420px,100%); background:var(--surface); border:1px solid var(--border-2); border-radius:var(--r-lg); padding:22px; box-shadow:0 30px 80px -20px rgba(0,0,0,.8); transform:scale(.94) translateY(8px); transition:transform var(--dur-3) var(--ease-spring); }
.modal-ov.show .modal-card{ transform:scale(1) translateY(0); }
.modal-tit{ font-family:'Sora',sans-serif; font-weight:700; font-size:var(--fs-lg); margin-bottom:8px; }
.modal-corpo{ color:var(--muted); font-size:var(--fs-sm); line-height:1.6; }
.modal-acoes{ display:flex; gap:10px; justify-content:flex-end; margin-top:20px; }

/* ---------- PLATINA (maestria 100%) ---------- */
.mast-ico .ic{ width:20px; color:var(--mc); }
.mast-card.platina{ border-color:rgba(0,224,198,.5); box-shadow:0 0 22px -6px rgba(0,224,198,.55), var(--shadow-elev); position:relative; overflow:hidden; }
.mast-card.platina::after{ content:''; position:absolute; inset:0; background:linear-gradient(120deg,transparent 40%,rgba(0,224,198,.10) 50%,transparent 60%); animation:shimmer 3.5s linear infinite; pointer-events:none; }
.platina-rib{ display:inline-flex; align-items:center; gap:4px; position:absolute; top:8px; right:8px; font-size:9.5px; font-weight:800; letter-spacing:.08em; color:#001b18; background:linear-gradient(135deg,#a8f7ff,#00e0c6); padding:3px 8px; border-radius:999px; box-shadow:0 2px 8px -2px rgba(0,224,198,.6); z-index:1; }
.platina-rib .ic{ width:11px; }

/* ---------- BOLETIM ---------- */
.boletim-wrap{ display:flex; flex-direction:column; gap:18px; }
.bol-hero{ background:radial-gradient(120% 140% at 0% 0%, rgba(0,224,198,.16), transparent 55%), linear-gradient(180deg,#15151f,#101019); border:1px solid var(--border-2); border-radius:var(--r-lg); padding:24px; }
.bol-hero h1{ font-family:'Sora',sans-serif; font-size:clamp(20px,4.5vw,28px); margin:10px 0 6px; }
.bol-hero p{ color:var(--muted); }
.bol-stats{ display:grid; grid-template-columns:repeat(auto-fit,minmax(140px,1fr)); gap:12px; }
.bol-stat{ background:var(--surface); border:1px solid var(--border); border-radius:var(--r-md); padding:16px; text-align:center; box-shadow:var(--shadow-elev); }
.bs-ic{ width:38px; height:38px; margin:0 auto 8px; border-radius:11px; display:flex; align-items:center; justify-content:center; background:rgba(var(--primary-rgb),.12); border:1px solid rgba(var(--primary-rgb),.25); } .bs-ic .ic{ width:19px; color:var(--primary-2); }
.bs-ic.ok{ background:rgba(45,212,167,.12); border-color:rgba(45,212,167,.3); } .bs-ic.ok .ic{ color:var(--success); }
.bs-ic.fire .ic{ color:#ff8a3d; } .bs-ic.gold .ic{ color:var(--gold); }
.bs-v{ font-family:'Sora',sans-serif; font-weight:800; font-size:24px; font-variant-numeric:tabular-nums; }
.bs-l{ font-size:var(--fs-xs); color:var(--muted); margin-top:2px; }
.bol-msg{ color:var(--muted); font-size:var(--fs-base); line-height:1.6; }
.bol-foco{ display:flex; align-items:center; gap:13px; }
.bf-ic{ width:42px; height:42px; flex:0 0 auto; border-radius:12px; display:flex; align-items:center; justify-content:center; background:rgba(255,180,84,.12); border:1px solid rgba(255,180,84,.3); } .bf-ic .ic{ width:20px; color:var(--warning); }
.bf-nome{ font-weight:700; } .bf-sub{ font-size:var(--fs-sm); color:var(--muted); margin-top:2px; } .bol-foco .btn{ margin-left:auto; flex:0 0 auto; }
@media (max-width:560px){ .bol-foco{ flex-wrap:wrap; } .bol-foco .btn{ width:100%; margin-left:0; } }

/* ---------- APOSTA DO DIA ---------- */
.aposta-card .mc-ic.gold .ic{ color:var(--gold); }
.aposta-sub{ font-size:var(--fs-xs); color:var(--muted); margin-top:8px; line-height:1.5; }
.aposta-ops{ display:flex; gap:7px; margin-top:10px; }
.aposta-op{ flex:1; display:flex; flex-direction:column; align-items:center; gap:1px; padding:8px 4px; border-radius:10px; border:1px solid var(--border-2); background:rgba(255,206,90,.06); color:var(--text); font-weight:800; font-size:14px; cursor:pointer; transition:.15s; font-family:'Sora',sans-serif; }
.aposta-op span{ font-size:9.5px; font-weight:600; color:var(--muted); font-family:'Inter',sans-serif; }
.aposta-op:hover:not(:disabled){ border-color:var(--gold); background:rgba(255,206,90,.14); transform:translateY(-1px); }
.aposta-op:disabled{ opacity:.5; cursor:default; }
.aposta-prog-txt{ display:flex; justify-content:space-between; align-items:baseline; margin:8px 0 6px; } .aposta-prog-txt>span:first-child{ font-family:'Sora',sans-serif; font-weight:800; font-size:18px; font-variant-numeric:tabular-nums; } .aposta-stake{ font-size:var(--fs-xs); color:var(--gold); font-weight:600; }
.aposta-card.aberta .meta-bar>div{ background:linear-gradient(90deg,var(--gold),#ff9e3d); }
.aposta-res{ margin-top:8px; font-size:var(--fs-sm); font-weight:600; }
.aposta-res.ok{ color:var(--success); } .aposta-res.no{ color:var(--muted); }
.aposta-card.ganha{ border-color:rgba(45,212,167,.4); } .aposta-card.perdida{ opacity:.85; }

/* ---------- METAS ---------- */
.meta-card .rail-card-titulo{ display:flex; align-items:center; gap:6px; } .mc-ic{ display:inline-flex; } .mc-ic .ic{ width:15px; color:var(--accent); }
.meta-row{ margin-top:10px; }
.meta-lbl{ display:flex; justify-content:space-between; font-size:var(--fs-xs); color:var(--muted); margin-bottom:4px; } .meta-val{ font-variant-numeric:tabular-nums; color:var(--text); font-weight:600; }
.meta-bar{ height:7px; background:var(--track); border-radius:4px; overflow:hidden; }
.meta-bar>div{ height:100%; background:linear-gradient(90deg,var(--primary),var(--primary-3)); border-radius:4px; transition:width .5s var(--ease-out); }
.meta-bar>div.done{ background:linear-gradient(90deg,var(--success),var(--accent)); }

/* ---------- BRIEFING DE VOO ---------- */
.briefing{ background:radial-gradient(120% 160% at 100% 0%, rgba(0,224,198,.12), transparent 50%), linear-gradient(180deg,#16161f,#101019); border:1px solid var(--border-2); border-radius:var(--r-lg); padding:18px 20px; margin-bottom:var(--s5); box-shadow:var(--shadow-elev); animation:fadeInUp .3s; }
.brief-top{ display:flex; justify-content:space-between; align-items:center; gap:14px; flex-wrap:wrap; margin-bottom:14px; }
.brief-saud{ font-family:'Sora',sans-serif; font-size:var(--fs-lg); }
.brief-mini{ display:flex; gap:14px; flex-wrap:wrap; }
.bm{ display:inline-flex; align-items:center; gap:5px; font-size:var(--fs-sm); color:var(--muted); font-variant-numeric:tabular-nums; }
.bm-ic{ display:inline-flex; } .bm-ic .ic{ width:15px; } .bm-ic.fire{ color:#ff8a3d; } .bm-ic.gold{ color:var(--gold); }
.brief-acao{ display:flex; align-items:center; gap:14px; padding:13px 15px; background:rgba(var(--primary-rgb),.08); border:1px solid rgba(var(--primary-rgb),.22); border-radius:var(--r-md); }
.ba-ic{ flex:0 0 auto; width:42px; height:42px; border-radius:12px; display:flex; align-items:center; justify-content:center; background:rgba(var(--primary-rgb),.18); border:1px solid rgba(var(--primary-rgb),.35); } .ba-ic .ic{ width:21px; color:var(--primary-2); }
.ba-body{ flex:1 1 auto; min-width:0; } .ba-txt{ font-weight:600; font-size:var(--fs-base); } .ba-sub{ font-size:var(--fs-sm); color:var(--muted); margin-top:2px; }
.ba-cta{ flex:0 0 auto; }
@media (max-width:560px){ .brief-acao{ flex-wrap:wrap; } .ba-cta{ width:100%; } }

/* ---------- PLANO DE ELITE ---------- */
.plano-wrap{ display:flex; flex-direction:column; gap:18px; }
.plano-hero{ background:radial-gradient(120% 140% at 0% 0%, rgba(var(--primary-rgb),.22), transparent 55%), linear-gradient(180deg,#15151f,#101019); border:1px solid var(--border-2); border-radius:18px; padding:26px; }
.plano-hero h1{ font-family:'Sora',sans-serif; font-size:clamp(24px,5vw,34px); margin:10px 0 8px; }
.plano-hero p{ color:var(--muted); max-width:62ch; line-height:1.6; }
.ph-badge{ display:inline-flex; align-items:center; gap:7px; font-size:12px; font-weight:700; letter-spacing:.04em; color:var(--primary-2); background:rgba(var(--primary-rgb),.14); border:1px solid rgba(var(--primary-rgb),.3); padding:5px 11px; border-radius:999px; } .ph-badge .ic{ width:15px; }
.plano-prins{ display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:14px; }
.plano-prin{ display:flex; gap:11px; align-items:flex-start; }
.pp-ic{ flex:0 0 auto; width:38px; height:38px; border-radius:11px; display:flex; align-items:center; justify-content:center; background:rgba(0,224,198,.12); border:1px solid rgba(0,224,198,.3); } .pp-ic .ic{ width:19px; color:var(--accent); }
.pp-tit{ font-weight:700; font-size:14px; margin-bottom:2px; } .pp-desc{ font-size:12.5px; color:var(--muted); line-height:1.5; }
.plano-blocos{ display:flex; flex-direction:column; gap:8px; }
.plano-bloco{ display:grid; grid-template-columns:58px 40px 1fr; align-items:center; gap:12px; padding:11px 12px; border-radius:12px; background:rgba(255,255,255,.02); border:1px solid var(--border); transition:.15s; }
.plano-bloco:hover{ border-color:var(--border-2); background:rgba(255,255,255,.035); }
.pb-time{ font-family:'JetBrains Mono',monospace; font-size:13px; font-weight:700; color:var(--primary-2); text-align:center; font-variant-numeric:tabular-nums; }
.pb-ic{ width:40px; height:40px; border-radius:11px; display:flex; align-items:center; justify-content:center; background:rgba(var(--primary-rgb),.1); border:1px solid rgba(var(--primary-rgb),.25); } .pb-ic .ic{ width:20px; color:var(--primary-2); }
.pb-tit{ font-weight:600; font-size:14px; } .pb-desc{ font-size:12.5px; color:var(--muted); line-height:1.5; margin-top:2px; } .pb-link{ font-size:12px; color:var(--accent); font-weight:600; }
.plano-semana{ display:grid; gap:8px; }
.plano-dia{ display:grid; grid-template-columns:92px 1fr 1fr 1.5fr; gap:12px; align-items:center; padding:10px 12px; border-radius:11px; background:rgba(255,255,255,.02); border:1px solid var(--border); font-size:13px; }
.pd-dia{ font-family:'Sora',sans-serif; font-weight:700; }
.pd-lbl{ display:block; font-size:9.5px; text-transform:uppercase; letter-spacing:.06em; color:var(--muted-2); margin-bottom:1px; }
.pd-cod{ color:#bfa6ff; } .pd-ciencia{ color:#a8f0e0; } .pd-foco{ font-size:12px; color:var(--muted); }
.plano-regras ul{ margin:0; padding-left:18px; } .plano-regras li{ font-size:13.5px; color:var(--muted); line-height:1.8; } .plano-regras strong{ color:var(--text); }
@media (max-width:680px){ .plano-dia{ grid-template-columns:1fr 1fr; } .pd-foco{ grid-column:1/-1; } .plano-bloco{ grid-template-columns:50px 1fr; } .plano-bloco .pb-ic{ display:none; } }

/* ---------- SKELETONS (carregamento entre rotas) ---------- */
.skel-page{ animation:fadeInUp .2s; }
.skel{ position:relative; overflow:hidden; background:linear-gradient(90deg,#15151f,#20202e,#15151f); background-size:200% 100%; border-radius:10px; animation:skelSweep 1.3s ease-in-out infinite; }
@keyframes skelSweep{ 0%{ background-position:200% 0; } 100%{ background-position:-200% 0; } }
.skel-title{ height:30px; width:42%; margin:6px 0 14px; } .skel-sub{ height:14px; width:60%; margin-bottom:24px; opacity:.7; }
.skel-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(200px,1fr)); gap:16px; } .skel-card{ height:104px; }
.skel-list{ display:flex; flex-direction:column; gap:10px; } .skel-row{ height:54px; }
.skel-block{ width:100%; margin-bottom:16px; }

/* ---------- MODO FOCO ---------- */
.foco-toggle{ width:34px; height:34px; border-radius:10px; border:1px solid var(--border); background:rgba(255,255,255,.04); color:var(--muted); display:inline-flex; align-items:center; justify-content:center; cursor:pointer; transition:.18s; }
.foco-toggle:hover{ color:var(--text); border-color:var(--border-2); }
.foco-toggle .ic{ width:17px; }
.foco-toggle.on{ background:linear-gradient(135deg,rgba(var(--primary-rgb),.3),rgba(var(--primary-rgb),.1)); border-color:var(--primary); color:var(--primary-2); box-shadow:0 0 14px -3px rgba(var(--primary-rgb),.6); }
body.foco-on #combo-chip{ display:none !important; }
body.sidebar-open{ overflow:hidden; }
.mini-toast{ position:fixed; left:50%; bottom:28px; transform:translateX(-50%) translateY(20px); background:rgba(21,21,31,.92); backdrop-filter:blur(10px); border:1px solid var(--border-2); color:var(--text); padding:10px 18px; border-radius:12px; font-size:13.5px; font-weight:500; box-shadow:0 12px 30px -10px rgba(0,0,0,.7); opacity:0; pointer-events:none; transition:.3s; z-index:9000; }
.mini-toast.show{ opacity:1; transform:translateX(-50%) translateY(0); }

/* ---------- POLIMENTO (auditoria de design) ---------- */
/* números tabulares — sem jitter ao atualizar contadores/barras */
.stat-num,.nivel-num,.calib-pct,.tier-req,.rh-rank,.rh-lvl,.conq-hero-num,.rs-num,.timer,.xp-num,.xp-texto,.combo-chip b,.mast-foot,.fraco-meta,.rev-chip b,.hm-legend{ font-variant-numeric:tabular-nums; }
/* foco de teclado padronizado (acessibilidade) */
button:focus-visible,input:focus-visible,textarea:focus-visible,a:focus-visible,.opcao:focus-visible,.conf-btn:focus-visible,.nav-link:focus-visible,.area-card:focus-visible,.ord-chip:focus-visible{ outline:none; box-shadow:0 0 0 2px var(--bg), 0 0 0 4px var(--primary); border-radius:10px; }
/* estado desabilitado consistente */
.btn:disabled,.btn[disabled],.btn[aria-disabled="true"]{ opacity:.45; filter:saturate(.4); cursor:not-allowed; transform:none!important; box-shadow:none!important; }
/* feedback tátil de toque nos cards clicáveis (mobile) */
.area-card:active,.trilha-card:active,.modulo-card:active,.ex-card:active,.stat:active,.mast-card:active,.conq-card:active,.rail-revisoes:active{ transform:translateY(-1px) scale(.985); transition-duration:.12s; }
/* globais de toque */
*{ -webkit-tap-highlight-color:transparent; }
html{ overscroll-behavior-y:none; }
.opcao,.ord-chip,.btn,.nav-link,.conf-btn{ touch-action:manipulation; }
.levelup-ov,.boss-ov,.toast-wrap{ overscroll-behavior:contain; }
/* títulos com escala fluida */
.dash-saudacao h1{ font-size:clamp(22px,5vw,30px); } .pagina-titulo{ font-size:clamp(20px,4.5vw,26px); }
.lu-nivel{ font-size:clamp(40px,12vw,56px); } .boss-label{ font-size:clamp(24px,7vw,32px); } .rh-rank{ font-size:clamp(22px,5vw,26px); }
/* código: ligaturas + slashed-zero (cara de IDE) */
.code-area,.runner-out,.code-win .CodeMirror,.reveal-code,.enunciado pre,.teoria pre{ font-feature-settings:'liga' 1,'calt' 1,'zero' 1; }
/* erro mais firme nas opções */
.opcao.errada{ animation:nokShake .35s; border-color:var(--error)!important; }
@keyframes nokShake{ 0%,100%{ transform:translateX(0);} 20%{ transform:translateX(-6px);} 40%{ transform:translateX(5px);} 60%{ transform:translateX(-3px);} 80%{ transform:translateX(2px);} }
/* rótulos de extremo na caixa de confiança */
.conf-escala{ display:flex; justify-content:space-between; max-width:280px; margin:7px auto 0; font-size:11px; color:var(--muted-2); letter-spacing:.02em; }
.boot-sub{ font-size:13px; color:var(--muted); }
/* inputs de resposta >=16px no mobile (evita zoom automático do iOS) */
@media (max-width:560px){ .resposta-input input,.code-area,#resposta-codigo,.ds-input,.search input{ font-size:16px; } }

/* ---------- responsivo ---------- */
@media (max-width:1100px){ .home-layout{ grid-template-columns:1fr; } .home-aside{ position:static; order:-1; } }
@media (max-width:860px){ .fortes-fracos{ grid-template-columns:1fr; } }
@media (prefers-reduced-motion:reduce){ .lu-part{ display:none; } }
@media (max-width:880px){
  .shell{ grid-template-columns:1fr; }
  .sidebar{ position:fixed; left:0; top:0; width:268px; transform:translateX(-100%); transition:transform .26s cubic-bezier(.3,.8,.3,1); box-shadow:0 0 50px rgba(0,0,0,.6); }
  .sidebar.aberta{ transform:none; }
  .sidebar.aberta ~ .sidebar-overlay{ display:block; position:fixed; inset:0; background:rgba(0,0,0,.55); z-index:38; backdrop-filter:blur(2px); }
  .menu-toggle{ display:inline-flex; align-items:center; justify-content:center; }
  .conteudo{ padding:22px 16px 56px; }
  .nivel-chip .xp-bar{ display:none; }
}
@media (prefers-reduced-motion:reduce){ *{ animation-duration:.001ms !important; transition-duration:.001ms !important; } }