/* =============================================================
   FORJA — extensão do estilo da sidebar para TODAS as páginas.
   Carregue DEPOIS de sidebar-forja.css:
     <link rel="stylesheet" href="assets/css/forja-app.css">
   Escrito sobre as classes que views.js já emite — não muda markup.
   ============================================================= */:root{
  --f-bg:#0c0c0e; --f-bg-2:#111113; --f-card:#16160f; --f-card-2:#121214;
  --f-linha:#23231f; --f-linha-2:#1b1b18;
  --f-ouro:#c9a227; --f-ouro-cl:#f0d67a; --f-ouro-es:#8f6f14;
  --f-txt:#f5efdf; --f-txt-2:#e8e4d9; --f-mudo:#8a8578; --f-mudo-2:#8b8578;   /* era #6b665c: 3.4:1 sobre o card escuro */
  --f-fogo:#e0864a; --f-ok:#8ac8a0; --f-erro:#ef9b86;
  --f-r:14px; --f-r-sm:11px;
  --f-serif:'Playfair Display',Georgia,serif;
  --f-mono:'JetBrains Mono',ui-monospace,Consolas,monospace;
}


/* ---------- superfícies ---------- */html:not(.tema-claro) body,
html:not(.tema-claro) .main-area{ background:var(--f-bg); color:var(--f-txt-2); }
html:not(.tema-claro) .conteudo{
  background:
    radial-gradient(700px 320px at 25% -8%, rgba(201,162,39,.07), transparent 70%),
    var(--f-bg);
}
html:not(.tema-claro) .topbar{ background:rgba(12,12,14,.85); border-bottom:1px solid var(--f-linha-2); backdrop-filter:blur(8px); }
html:not(.tema-claro) .search{ background:#131315; border:1px solid var(--f-linha); border-radius:10px; }
html:not(.tema-claro) .search input{ color:var(--f-txt-2); }
html:not(.tema-claro) .search input::placeholder{ color:var(--f-mudo-2); }
html:not(.tema-claro) .streak-chip{
  background:linear-gradient(140deg,rgba(201,162,39,.18),rgba(201,162,39,.04));
  border:1px solid rgba(201,162,39,.32); color:var(--f-txt); border-radius:999px;
  font-family:var(--f-mono); font-weight:700;
}
html:not(.tema-claro) .nivel-chip{ background:#131315; border:1px solid var(--f-linha); border-radius:999px; }
html:not(.tema-claro) .nivel-num{ font-family:var(--f-mono); font-size:11px; color:var(--f-ouro); }
html:not(.tema-claro) .xp-bar{ background:#1e1e18; }
html:not(.tema-claro) .xp-fill{ background:linear-gradient(90deg,var(--f-ouro-es),var(--f-ouro-cl)); box-shadow:0 0 10px rgba(201,162,39,.45); }


/* ---------- títulos ---------- */html:not(.tema-claro) .pagina-titulo,
html:not(.tema-claro) .grupo-titulo,
html:not(.tema-claro) .card-head h2,
html:not(.tema-claro) h1,
html:not(.tema-claro) h2{
  font-family:var(--f-serif); color:var(--f-txt); letter-spacing:0;
}
html:not(.tema-claro) .pagina-titulo{ font-size:32px; font-weight:700; line-height:1.1; }
html:not(.tema-claro) .pagina-sub{ font-size:13.5px; color:var(--f-mudo); }
html:not(.tema-claro) .grupo-titulo{ font-size:16px; font-weight:700; display:flex; align-items:center; gap:11px; }
html:not(.tema-claro) .grupo-titulo::after{ content:''; flex:1; height:1px; background:linear-gradient(90deg,var(--f-linha),transparent); }


/* ---------- cards genéricos ---------- */html:not(.tema-claro) .card,
html:not(.tema-claro) .rail-card,
html:not(.tema-claro) .stat,
html:not(.tema-claro) .conq-card,
html:not(.tema-claro) .embreve-card{
  background:linear-gradient(160deg,var(--f-card),var(--f-card-2) 72%);
  border:1px solid var(--f-linha); border-radius:var(--f-r);
}
html:not(.tema-claro) .card-head{ border-bottom:1px solid var(--f-linha-2); }
html:not(.tema-claro) .card-sub{ font-family:var(--f-mono); font-size:10.5px; letter-spacing:.12em; color:var(--f-mudo-2); text-transform:uppercase; }


/* ---------- botões ---------- */html:not(.tema-claro) .btn{
  border-radius:var(--f-r-sm); border:1px solid #2b2b24; background:#141410;
  color:var(--f-mudo); font-weight:500; transition:border-color .2s, color .2s, transform .2s, background .2s;
}
html:not(.tema-claro) .btn:hover{ border-color:rgba(201,162,39,.4); color:var(--f-txt-2); }
html:not(.tema-claro) .btn-primary{
  border:none; color:#1a1508; font-weight:600;
  background:linear-gradient(145deg,var(--f-ouro-cl),var(--f-ouro) 60%,#a9861c);
  box-shadow:0 10px 22px -12px rgba(201,162,39,.9);
}
html:not(.tema-claro) .btn-primary:hover{ transform:translateY(-1px); box-shadow:0 14px 26px -12px rgba(201,162,39,1); }


/* ---------- HOME: briefing ---------- */html:not(.tema-claro) .briefing{
  position:relative; overflow:hidden; padding:20px 22px; border-radius:16px;
  border:1px solid var(--f-linha); background:linear-gradient(150deg,#18180f,var(--f-bg-2) 72%);
}
html:not(.tema-claro) .briefing::after{
  content:''; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(105deg,transparent 42%,rgba(240,214,122,.09) 50%,transparent 58%);
  transform:translateX(-100%); animation:f-brilho 3s ease-out .4s 1;
}
html:not(.tema-claro) .brief-saud{ font-family:var(--f-serif); font-size:27px; font-weight:700; color:var(--f-txt); }
html:not(.tema-claro) .brief-saud strong{ color:var(--f-ouro-cl); }
html:not(.tema-claro) .brief-mini{ font-family:var(--f-mono); font-size:12px; color:var(--f-mudo); }
html:not(.tema-claro) .bm-ic.fire{ color:var(--f-fogo); }
html:not(.tema-claro) .bm-ic.gold{ color:var(--f-ouro); }
html:not(.tema-claro) .brief-acao{ background:#0e0e10; border:1px solid var(--f-linha); border-radius:13px; }
html:not(.tema-claro) .ba-ic{ background:rgba(201,162,39,.1); border:1px solid rgba(201,162,39,.28); color:var(--f-ouro-cl); border-radius:11px; }
html:not(.tema-claro) .ba-txt{ font-size:15px; font-weight:600; color:var(--f-txt-2); }
html:not(.tema-claro) .ba-txt strong{ color:var(--f-ouro-cl); }
html:not(.tema-claro) .ba-sub{ font-size:12.5px; color:var(--f-mudo); }


/* ---------- HOME: áreas ---------- */html:not(.tema-claro) .area-card{
  padding:16px; border-radius:var(--f-r); border:1px solid var(--f-linha);
  background:linear-gradient(160deg,var(--f-card),var(--f-bg-2) 70%);
  transition:border-color .25s, transform .25s, box-shadow .25s;
}
html:not(.tema-claro) .area-card:hover{ border-color:rgba(201,162,39,.42); transform:translateY(-3px); box-shadow:0 16px 32px -22px rgba(201,162,39,.9); }
html:not(.tema-claro) .area-ico{
  width:36px; height:36px; border-radius:10px; display:grid; place-items:center;
  background:rgba(201,162,39,.1); border:1px solid rgba(201,162,39,.24); color:var(--f-ouro-cl);
}
html:not(.tema-claro) .area-nome{ font-size:14.5px; font-weight:600; color:var(--f-txt-2); }
html:not(.tema-claro) .area-bar{ height:4px; border-radius:999px; background:#1e1e18; overflow:hidden; }
html:not(.tema-claro) .area-bar > div{ height:100%; background:linear-gradient(90deg,var(--f-ouro-es),var(--f-ouro-cl)); }
html:not(.tema-claro) .area-prog span{ font-family:var(--f-mono); font-size:10px; color:var(--f-mudo-2); }
html:not(.tema-claro) .area-premium{ border-color:rgba(201,162,39,.3); background:linear-gradient(160deg,#1c1a10,var(--f-bg-2) 70%); overflow:hidden; position:relative; }
html:not(.tema-claro) .area-premium::before{
  content:''; position:absolute; top:0; left:0; width:32%; height:100%; pointer-events:none;
  background:linear-gradient(90deg,transparent,rgba(240,214,122,.1),transparent);
  animation:f-sweep 5.5s ease-in-out infinite;
}
html:not(.tema-claro) .area-selo{ font-family:var(--f-mono); font-size:9px; letter-spacing:.14em; color:var(--f-ouro-cl); }
html:not(.tema-claro) .area-prem-tx{ color:var(--f-ouro); font-size:11.5px; }
html:not(.tema-claro) .prof-card{ border:1px dashed #2b2b24; background:#101012; border-radius:12px; transition:border-color .25s, background .25s; }
html:not(.tema-claro) .prof-card:hover{ border-color:rgba(201,162,39,.45); background:#15150e; }
html:not(.tema-claro) .prof-nome{ font-size:13px; color:#c8c2b4; }
html:not(.tema-claro) .prof-sub{ font-size:12.5px; color:var(--f-mudo); }


/* ---------- HOME: rail ---------- */html:not(.tema-claro) .rail-perfil .avatar-lg{ background:linear-gradient(145deg,var(--f-ouro-cl),var(--f-ouro) 60%,var(--f-ouro-es)); color:#1a1508; box-shadow:0 6px 16px -6px rgba(201,162,39,.6); }
html:not(.tema-claro) .rail-nome{ font-size:14.5px; font-weight:600; color:var(--f-txt); }
html:not(.tema-claro) .rail-rank{ font-family:var(--f-mono); font-size:10.5px; color:var(--f-ouro); }
html:not(.tema-claro) .rail-stat .rs-num{ font-family:var(--f-serif); font-size:21px; font-weight:700; color:var(--f-txt); }
html:not(.tema-claro) .rail-stat .rs-lbl{ font-family:var(--f-mono); font-size:10px; letter-spacing:.1em; text-transform:uppercase; color:var(--f-mudo-2); }
html:not(.tema-claro) .rs-ic.fire{ color:var(--f-fogo); }
html:not(.tema-claro) .rs-ic.gold{ color:var(--f-ouro); }
html:not(.tema-claro) .rail-card-titulo{ font-size:12px; font-weight:600; color:var(--f-txt-2); }
html:not(.tema-claro) .meta-lbl,
html:not(.tema-claro) .aposta-prog-txt{ font-family:var(--f-mono); font-size:11px; color:var(--f-mudo); }
html:not(.tema-claro) .meta-bar{ height:5px; border-radius:999px; background:#1e1e18; overflow:hidden; }
html:not(.tema-claro) .meta-bar > div{ height:100%; background:linear-gradient(90deg,var(--f-ouro-es),var(--f-ouro-cl)); }
html:not(.tema-claro) .meta-bar > div.done{ background:linear-gradient(90deg,#4f7a53,var(--f-ok)); }
html:not(.tema-claro) .aposta-card{ border-color:rgba(201,162,39,.26); background:linear-gradient(150deg,#1a1810,var(--f-bg-2) 72%); }
html:not(.tema-claro) .aposta-op{ border:1px solid #2b2b24; background:#141410; border-radius:10px; color:var(--f-txt); font-family:var(--f-mono); font-weight:700; transition:border-color .2s, background .2s; }
html:not(.tema-claro) .aposta-op:hover{ border-color:rgba(201,162,39,.5); background:#1a1a12; }
html:not(.tema-claro) .aposta-op span{ display:block; font-size:9.5px; font-weight:400; color:var(--f-mudo-2); }
html:not(.tema-claro) .rail-revisoes.tem,
html:not(.tema-claro) .rail-upgrade{
  border-color:rgba(201,162,39,.3);
  background:linear-gradient(140deg,rgba(201,162,39,.14),rgba(201,162,39,.02));
}
html:not(.tema-claro) .rail-revisoes:hover,
html:not(.tema-claro) .rail-upgrade:hover{ transform:translateY(-2px); box-shadow:0 14px 28px -18px rgba(201,162,39,.9); }
html:not(.tema-claro) .rr-t{ font-size:13px; font-weight:600; color:var(--f-txt); }
html:not(.tema-claro) .rr-s{ font-size:11px; color:var(--f-mudo); }


/* ---------- EXERCÍCIO ---------- */html:not(.tema-claro) .ex-head h1{ font-family:var(--f-serif); font-size:27px; font-weight:700; line-height:1.15; color:var(--f-txt); }
html:not(.tema-claro) .skill-tag,
html:not(.tema-claro) .ex-modo{ border-radius:999px; padding:4px 10px; font-family:var(--f-mono); font-size:10.5px; letter-spacing:.08em; }
html:not(.tema-claro) .ex-modo{ background:rgba(201,162,39,.1); border:1px solid rgba(201,162,39,.26); color:var(--f-ouro-cl); text-transform:uppercase; }
html:not(.tema-claro) .skill-tag{ background:#131315; border:1px solid var(--f-linha); color:var(--f-mudo); }
html:not(.tema-claro) .ex-dif{ color:var(--f-ouro); letter-spacing:2px; }
html:not(.tema-claro) .timer{ font-family:var(--f-mono); font-size:11px; color:var(--f-mudo-2); }
html:not(.tema-claro) .enunciado{
  padding:14px 18px; border-radius:var(--f-r); border:1px solid var(--f-linha);
  background:linear-gradient(160deg,#15150f,var(--f-bg-2) 72%);
  font-size:14px; line-height:1.6; color:#d8d3c6;
}
html:not(.tema-claro) .enunciado code,
html:not(.tema-claro) .exemplo code{
  padding:2px 7px; border-radius:6px; background:#0a0a0c; border:1px solid var(--f-linha);
  font-family:var(--f-mono); font-size:13px; color:var(--f-ouro-cl);
}
html:not(.tema-claro) .confianca-box{ padding:11px 18px; border-radius:var(--f-r); border:1px solid var(--f-linha); background:#101012; }
html:not(.tema-claro) .confianca-label{ font-size:13px; font-weight:600; color:#c8c2b4; }
html:not(.tema-claro) .conf-btn{
  width:36px; height:34px; border-radius:9px; border:1px solid #2b2b24; background:#141410;
  font-family:var(--f-mono); font-weight:600; color:var(--f-mudo); transition:all .2s;
}
html:not(.tema-claro) .conf-btn:hover,
html:not(.tema-claro) .conf-btn.ativo{ border-color:rgba(201,162,39,.5); background:rgba(201,162,39,.14); color:var(--f-txt); }
html:not(.tema-claro) .conf-escala{ font-family:var(--f-mono); font-size:10px; letter-spacing:.1em; text-transform:uppercase; color:var(--f-mudo-2); }
html:not(.tema-claro) .code-win{ border-radius:var(--f-r); border:1px solid var(--f-linha); overflow:hidden; background:#08080c; }
html:not(.tema-claro) .code-win-head{ background:#101014; border-bottom:1px solid #1e1e22; }
html:not(.tema-claro) .cw-dots i{ background:#3a3730; }
html:not(.tema-claro) .cw-lang{ font-family:var(--f-mono); font-size:9.5px; font-weight:600; letter-spacing:.24em; color:var(--f-ouro); }
html:not(.tema-claro) .code-area{ background:#08080c; color:#d8d3c6; font-family:var(--f-mono); font-size:12.5px; line-height:1.6; border:none; }
html:not(.tema-claro) .runner-out{ background:#0a0a0c; border:1px solid var(--f-linha); border-radius:var(--f-r-sm); color:#d8d3c6; font-family:var(--f-mono); font-size:12.5px; }
html:not(.tema-claro) .opcao{ border:1px solid #2b2b24; background:#141410; border-radius:var(--f-r-sm); color:var(--f-txt-2); transition:all .2s; }
html:not(.tema-claro) .opcao:hover{ border-color:rgba(201,162,39,.45); background:rgba(201,162,39,.08); }
html:not(.tema-claro) .opcao-letra{ font-family:var(--f-mono); color:var(--f-ouro); }
html:not(.tema-claro) .resultado{ border-radius:var(--f-r); padding:16px 18px; }
html:not(.tema-claro) .resultado.erro{ border:1px solid rgba(200,90,70,.35); background:linear-gradient(160deg,rgba(160,60,45,.14),#121013 70%); }
html:not(.tema-claro) .resultado.erro .resultado-titulo{ font-family:var(--f-serif); font-size:16px; font-weight:700; color:var(--f-erro); }
html:not(.tema-claro) .resultado.sucesso{ border:1px solid rgba(120,180,140,.3); background:linear-gradient(160deg,rgba(60,120,80,.12),#101312 70%); }
html:not(.tema-claro) .resultado.sucesso .resultado-titulo{ font-family:var(--f-serif); font-size:16px; font-weight:700; color:var(--f-ok); }
html:not(.tema-claro) .erro-feedback{ background:#0e0d10; border:1px solid #26222a; border-radius:10px; font-family:var(--f-mono); font-size:13px; color:#d8d3c6; }
html:not(.tema-claro) .resultado-incentivo{ font-size:12.5px; line-height:1.6; color:var(--f-mudo); }
html:not(.tema-claro) .xp-ganho .xp-num{ font-family:var(--f-serif); font-size:24px; font-weight:700; color:var(--f-ouro-cl); }


/* ---------- RANKING ---------- */html:not(.tema-claro) .rank-hero{
  position:relative; overflow:hidden; padding:24px 26px; border-radius:18px;
  border:1px solid rgba(201,162,39,.28); background:linear-gradient(140deg,#1c1a11,var(--f-bg-2) 70%);
}
html:not(.tema-claro) .rank-hero::after{
  content:''; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(105deg,transparent 42%,rgba(240,214,122,.1) 50%,transparent 58%);
  transform:translateX(-100%); animation:f-brilho 3.2s ease-out .4s 1;
}
html:not(.tema-claro) .rh-rank{ font-family:var(--f-serif); font-size:34px; font-weight:700; line-height:1; color:var(--f-txt); }
html:not(.tema-claro) .rh-lvl{ font-family:var(--f-mono); font-size:12.5px; color:var(--f-mudo); }
html:not(.tema-claro) .rh-bar{ max-width:520px; height:7px; border-radius:999px; background:#1e1e18; overflow:hidden; }
html:not(.tema-claro) .tier{ border:1px solid var(--f-linha); background:var(--f-bg-2); border-radius:12px; opacity:.6; }
html:not(.tema-claro) .tier.atual{ opacity:1; border-color:rgba(201,162,39,.45); background:linear-gradient(150deg,rgba(201,162,39,.16),#121110); box-shadow:0 10px 26px -18px rgba(201,162,39,.9); }
html:not(.tema-claro) .rank-tabela .eu,
html:not(.tema-claro) .rank-row.eu{
  position:relative; background:linear-gradient(90deg,rgba(201,162,39,.16),rgba(201,162,39,.02));
  border-top:1px solid rgba(201,162,39,.3); border-bottom:1px solid rgba(201,162,39,.3);
}
html:not(.tema-claro) .rank-tabela .eu::before,
html:not(.tema-claro) .rank-row.eu::before{
  content:''; position:absolute; left:0; top:0; bottom:0; width:3px;
  background:var(--f-ouro-cl); box-shadow:0 0 14px rgba(240,214,122,.9);
}


/* ---------- ESTATÍSTICAS ---------- */html:not(.tema-claro) .stat{ padding:18px; border-radius:15px; }
html:not(.tema-claro) .stat-ic{ width:30px; height:30px; border-radius:9px; display:grid; place-items:center; background:rgba(201,162,39,.1); border:1px solid rgba(201,162,39,.24); color:var(--f-ouro-cl); }
html:not(.tema-claro) .stat-num{ font-family:var(--f-serif); font-size:34px; font-weight:700; line-height:1; color:var(--f-txt); }
html:not(.tema-claro) .stat-lbl{ font-family:var(--f-mono); font-size:10.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--f-mudo-2); }
html:not(.tema-claro) .hm-cell{ width:12px; height:12px; border-radius:3px; }
html:not(.tema-claro) .hm-0{ background:#17171a; }
html:not(.tema-claro) .hm-1{ background:#3d3211; }
html:not(.tema-claro) .hm-2{ background:#7a5f13; }
html:not(.tema-claro) .hm-3{ background:var(--f-ouro); }
html:not(.tema-claro) .hm-4{ background:var(--f-ouro-cl); }
html:not(.tema-claro) .hm-legend{ font-family:var(--f-mono); font-size:10px; color:#5c574c; }
html:not(.tema-claro) .calib-conf{ font-family:var(--f-mono); font-size:12px; letter-spacing:1px; color:var(--f-mudo); }
html:not(.tema-claro) .calib-bar{ height:8px; border-radius:999px; background:#1a1a17; overflow:hidden; }
html:not(.tema-claro) .calib-bar > div{ height:100%; background:linear-gradient(90deg,var(--f-ouro-es),var(--f-ouro-cl)); }
html:not(.tema-claro) .calib-pct{ font-family:var(--f-mono); font-size:12px; font-weight:600; color:#c8c2b4; }


/* ---------- CONQUISTAS ---------- */html:not(.tema-claro) .conq-hero-num{ font-family:var(--f-serif); font-size:20px; font-weight:700; color:var(--f-ouro-cl); }
html:not(.tema-claro) .conq-hero-sub{ font-size:11.5px; line-height:1.5; color:var(--f-mudo); }
html:not(.tema-claro) .conq-card.on{ border-color:rgba(201,162,39,.32); background:linear-gradient(150deg,rgba(201,162,39,.12),#121110); }
html:not(.tema-claro) .conq-card.off{ opacity:.55; border-style:dashed; }
html:not(.tema-claro) .conq-nome{ font-family:var(--f-serif); font-size:15px; font-weight:700; color:var(--f-txt); }
html:not(.tema-claro) .conq-desc{ font-size:12px; color:var(--f-mudo); }
html:not(.tema-claro) .conq-tag{ font-family:var(--f-mono); font-size:10px; letter-spacing:.06em; }
html:not(.tema-claro) .conq-tag.ok{ color:var(--f-ouro); }
html:not(.tema-claro) .conq-tag.lock{ color:var(--f-mudo-2); }


/* ---------- BOLETIM ---------- */html:not(.tema-claro) .bol-hero h1{ font-family:var(--f-serif); font-size:30px; font-weight:700; color:var(--f-txt); }
html:not(.tema-claro) .ph-badge{ font-family:var(--f-mono); font-size:10px; letter-spacing:.18em; text-transform:uppercase; color:var(--f-ouro); }
html:not(.tema-claro) .bol-stat{ border:1px solid var(--f-linha); background:linear-gradient(160deg,var(--f-card),var(--f-card-2) 72%); border-radius:15px; }
html:not(.tema-claro) .bs-v{ font-family:var(--f-serif); font-size:30px; font-weight:700; color:var(--f-txt); }
html:not(.tema-claro) .bs-l{ font-family:var(--f-mono); font-size:10.5px; letter-spacing:.12em; text-transform:uppercase; color:var(--f-mudo-2); }


/* ---------- entrada em cascata do conteúdo ---------- */html:not(.tema-claro) .dash > *,
html:not(.tema-claro) .stats-cards,
html:not(.tema-claro) .card,
html:not(.tema-claro) .rail-card,
html:not(.tema-claro) .rank-hero,
html:not(.tema-claro) .conq-hero,
html:not(.tema-claro) .conq-grid,
html:not(.tema-claro) .ex-head,
html:not(.tema-claro) .enunciado,
html:not(.tema-claro) .confianca-box,
html:not(.tema-claro) .quiz-area{
  animation:f-up .5s cubic-bezier(.2,.9,.25,1) both;
}
html:not(.tema-claro) .dash > *:nth-child(1){ animation-delay:.04s }
html:not(.tema-claro) .dash > *:nth-child(2){ animation-delay:.08s }
html:not(.tema-claro) .dash > *:nth-child(3){ animation-delay:.12s }
html:not(.tema-claro) .dash > *:nth-child(4){ animation-delay:.16s }
html:not(.tema-claro) .dash > *:nth-child(n+5){ animation-delay:.2s }
html:not(.tema-claro) .home-aside .rail-card:nth-child(1){ animation-delay:.08s }
html:not(.tema-claro) .home-aside .rail-card:nth-child(2){ animation-delay:.11s }
html:not(.tema-claro) .home-aside .rail-card:nth-child(3){ animation-delay:.14s }
html:not(.tema-claro) .home-aside .rail-card:nth-child(n+4){ animation-delay:.17s }
@keyframes f-up{ from{ opacity:0; transform:translateY(12px); } to{ opacity:1; transform:none; } }
@keyframes f-brilho{ to{ transform:translateX(100%); } }
@keyframes f-sweep{ 0%{ transform:translateX(-120%); } 55%,100%{ transform:translateX(340%); } }
@keyframes f-grow{ from{ width:0; } }


/* barras crescem ao entrar */html:not(.tema-claro) .xp-fill,
html:not(.tema-claro) .area-bar > div,
html:not(.tema-claro) .meta-bar > div,
html:not(.tema-claro) .calib-bar > div,
html:not(.tema-claro) .rh-bar > div,
html:not(.tema-claro) .conq-hero-bar > div{
  animation:f-grow 1.2s .25s cubic-bezier(.2,.9,.2,1) backwards;
}
/* Acessibilidade é GLOBAL: o script de escopo prefixou este bloco por engano e o
   kill-switch de animação passou a valer só no tema escuro. */
@media (prefers-reduced-motion: reduce){
  *{ animation:none !important; transition-duration:.01ms !important; }
}

/* =============================================================
   CORREÇÕES DA AUDITORIA — estados que a base prefixada (0,2,1)
   passou a vencer indevidamente. Mesmo escopo escuro, declarados
   DEPOIS da base para vencer por ordem.
   ============================================================= */

/* Feedback de resposta (o coração do produto): certo/errado sumiam no escuro */
html:not(.tema-claro) .opcao.certa{
  border-color:rgba(138,200,160,.6); background:linear-gradient(160deg,rgba(60,120,84,.18),#111d16 75%); color:#a7d8b8;
}
html:not(.tema-claro) .opcao.errada{
  border-color:rgba(239,155,134,.55); background:linear-gradient(160deg,rgba(160,60,45,.16),#1a1210 75%); color:#efb2a2;
}
/* Confiança selecionada (o JS usa a classe .sel — a regra antiga usava .ativo e nunca casava) */
html:not(.tema-claro) .conf-btn.sel{
  border-color:rgba(201,162,39,.6); background:rgba(201,162,39,.16); color:var(--f-ouro-cl);
}
/* Streak aceso perdia o laranja */
html:not(.tema-claro) .streak-chip.aceso{
  border-color:rgba(224,134,74,.55); background:rgba(224,134,74,.12); color:var(--f-fogo);
}
/* Botão fantasma (planos/sob medida) perdia o contorno dourado */
html:not(.tema-claro) .btn-ghost{
  background:transparent; border:1px solid rgba(201,162,39,.5); color:var(--f-ouro-cl);
}
html:not(.tema-claro) .btn-ghost:hover{ background:rgba(201,162,39,.1); }
/* Busca com foco perdia o anel */
html:not(.tema-claro) .search:focus-within{ border-color:rgba(201,162,39,.55); }
/* Hovers/estados menores engolidos pela base */
html:not(.tema-claro) .tier:hover{ border-color:rgba(201,162,39,.45); }
html:not(.tema-claro) .tier.bloqueado{ opacity:.6; }
html:not(.tema-claro) a.rail-upgrade:hover{ border-color:rgba(201,162,39,.5); }
html:not(.tema-claro) .conq-card.on:hover{ border-color:rgba(201,162,39,.5); }
/* Título de página: escala fluida (32px fixos quebravam a 1ª dobra no celular) */
html:not(.tema-claro) .pagina-titulo{ font-size:clamp(24px,5vw,32px); }


/* ===== Placar Global ===== */
html:not(.tema-claro) .rank-row{ display:grid; grid-template-columns:56px 1fr 140px 100px 96px; gap:8px; padding:9px 14px; border-bottom:1px solid #171714; font-size:13px; align-items:center; }
html:not(.tema-claro) .rank-tabela{ border:1px solid var(--f-linha); border-radius:16px; background:#101012; overflow:hidden; margin-bottom:20px; }
html:not(.tema-claro) .rk-pos{ font-family:var(--f-mono); color:var(--f-mudo-2); }
html:not(.tema-claro) .rk-xp{ font-family:var(--f-mono); text-align:right; color:var(--f-ouro-cl); }
html:not(.tema-claro) .rk-rank{ color:var(--f-mudo); font-size:12px; }
html:not(.tema-claro) .rk-sep{ text-align:center; color:var(--f-mudo-2); padding:4px; }
html.tema-claro .rank-row{ display:grid; grid-template-columns:56px 1fr 140px 100px 96px; gap:8px; padding:9px 14px; border-bottom:1px solid #e8e0cc; font-size:13px; align-items:center; }
html.tema-claro .rank-tabela{ border:1px solid #e0d7c2; border-radius:16px; background:#fbf7ec; overflow:hidden; margin-bottom:20px; }
html.tema-claro .rank-tabela .eu{ background:rgba(201,162,39,.14); }
html.tema-claro .rk-xp{ text-align:right; color:#7d5f11; }
/* As regras base do placar são escopadas por tema (especificidade 0,2,1); um override
   escrito só como `.rank-row` (0,1,0) NUNCA vencia, nem dentro de @media — era por isso
   que no celular a coluna do nome ficava espremida em ~42px. */
@media (max-width:560px){
  html:not(.tema-claro) .rank-row, html.tema-claro .rank-row{ grid-template-columns:38px 1fr 84px; gap:6px; padding:9px 10px; }
  .rk-rank, .rk-acao{ display:none; }
}

/* ===== Duelos e convites (fase 2 do placar) =====
   Tokens --f-* no escuro; no claro, cores explícitas — o padrão do arquivo.
   Cada bloco define os dois temas junto para não repetir o erro de deixar
   um estado só no escuro (a auditoria de CSS que já custou caro aqui). */
.rk-acao{ text-align:right; }
/* Cor em hex literal, não var(): o token de ouro claro se comportou de forma
   instável aqui e o botão saía marrom-escuro sobre fundo preto. */
.btn-desafiar{ font:600 11.5px/1 'Inter',sans-serif; padding:6px 10px; border-radius:8px; cursor:pointer;
  background:transparent; transition:background .16s, color .16s; }
html:not(.tema-claro) .btn-desafiar{ border:1px solid #c9a227; color:#f0d67a; }
html:not(.tema-claro) .btn-desafiar:hover{ background:var(--f-ouro,#c9a227); color:#12100a; }
.rank-row.eu .btn-desafiar{ display:none; }
html.tema-claro .btn-desafiar{ border:1px solid #b8901c; color:#7d5f11; }   /* #8f6f14 dava 4.41 */
html.tema-claro .btn-desafiar:hover{ background:#b8901c; color:#fff; }

.duelos-box, .convite-box{ margin-top:26px; }
html:not(.tema-claro) .duelos-vazio, html:not(.tema-claro) .cv-sub, html:not(.tema-claro) .cv-vazio{ color:var(--f-mudo,#8b8779); font-size:13.5px; line-height:1.6; margin:0 0 14px; }
html.tema-claro .duelos-vazio, html.tema-claro .cv-sub, html.tema-claro .cv-vazio{ color:#6b6455; }

html:not(.tema-claro) .duelo-card{ border:1px solid var(--f-linha,#22221e); border-radius:14px; background:#101012; padding:14px 16px; margin-bottom:10px; }
html.tema-claro .duelo-card{ border-color:#e0d7c2; background:#fbf7ec; }
.dl-topo{ font-size:13.5px; margin-bottom:4px; }
html:not(.tema-claro) .dl-aposta, html:not(.tema-claro) .dl-sub{ font-size:12.5px; color:var(--f-mudo,#8b8779); }
html.tema-claro .dl-aposta, html.tema-claro .dl-sub{ color:#6b6455; }
.dl-acoes{ display:flex; gap:8px; margin-top:10px; }
.btn-sm{ padding:7px 14px; font-size:12.5px; }

html:not(.tema-claro) .duelo-card.pendente{ border-color:var(--f-ouro,#c9a227); }
.dl-placar{ display:flex; justify-content:space-between; font-size:12.5px; margin:8px 0 5px; font-family:var(--f-mono,monospace); }
html:not(.tema-claro) .dl-bar{ height:7px; border-radius:99px; background:#26261f; overflow:hidden; }
html.tema-claro .dl-bar{ background:#e8e0cc; }
.dl-bar > div{ height:100%; border-radius:99px; background:linear-gradient(90deg,#c9a227,#f0d67a); transition:width .3s ease; }
.duelo-card.perdendo .dl-bar > div{ background:linear-gradient(90deg,#8a6a3a,#b8901c); }

.duelos-hist{ margin-top:12px; }
.duelo-card.feito{ display:flex; align-items:center; gap:12px; padding:9px 14px; font-size:12.5px; }
.dl-res{ font-weight:700; min-width:64px; }
.duelo-card.vitoria .dl-res{ color:#5fbf7a; }
.duelo-card.derrota .dl-res{ color:#c87b6b; }
html:not(.tema-claro) .dl-vs{ flex:1; color:var(--f-mudo,#8b8779); }
html.tema-claro .dl-vs{ color:#6b6455; }
.dl-xp{ font-family:var(--f-mono,monospace); }

.cv-link{ display:flex; gap:8px; margin-bottom:14px; }
html:not(.tema-claro) .cv-link input{ flex:1; min-width:0; padding:9px 12px; border-radius:10px; font-size:12.5px; font-family:var(--f-mono,monospace);
  background:#0d0d0f; border:1px solid var(--f-linha,#22221e); color:var(--f-tx,#e8e4d8); }
html.tema-claro .cv-link input{ background:#fff; border-color:#e0d7c2; color:#2c2820; }
html:not(.tema-claro) .cv-lista{ border:1px solid var(--f-linha,#22221e); border-radius:14px; overflow:hidden; }
html.tema-claro .cv-lista{ border-color:#e0d7c2; }
html:not(.tema-claro) .cv-row{ display:flex; justify-content:space-between; padding:9px 14px; font-size:13px; border-bottom:1px solid #171714; }
html.tema-claro .cv-row{ border-bottom-color:#e8e0cc; }
.cv-row:last-child{ border-bottom:none; }
html:not(.tema-claro) .cv-row.pago .cv-prog{ color:var(--f-ouro-cl,#e2c25c); }
html.tema-claro .cv-row.pago .cv-prog{ color:#8f6f14; }
html:not(.tema-claro) .cv-prog{ color:var(--f-mudo,#8b8779); font-size:12.5px; }
html.tema-claro .cv-prog{ color:#6b6455; }

@media (max-width:560px){
  .cv-link{ flex-direction:column; }
  .dl-acoes .btn{ flex:1; }
}

/* ===== Alvo de toque dos botões de confiança (1 a 5) =====
   Ficam aqui e não no elite.css de propósito: este arquivo carrega POR ÚLTIMO,
   e a regra `html:not(.tema-claro) .conf-btn` acima tem a mesma especificidade
   (0,2,1) — num empate vence o último arquivo, então lá a correção nunca pegava.
   Eram 36x34 no celular, abaixo do alvo mínimo de toque. */
@media (max-width:560px){
  html:not(.tema-claro) .conf-btn, html.tema-claro .conf-btn{ width:44px; height:44px; }
}

/* ===== Cores dinâmicas vindas do JS no tema claro =====
   O rank (--rc) e o ponto fraco (--c) chegam por style inline, com paleta pensada
   para fundo escuro: sobre creme caem para 1.7-2.5:1. Escurece mantendo o matiz.
   A 1ª declaração é a reserva para navegador sem color-mix (ele ignora a 2ª). */
html.tema-claro .fraco-ring span{ color:var(--text); color:color-mix(in srgb, var(--c) 42%, #241f16); }
html.tema-claro .rh-rank,
html.tema-claro .tier-nome{ color:var(--text); color:color-mix(in srgb, var(--rc) 42%, #241f16); }

/* Últimos dois marginais medidos no tema claro:
   .ord-vazio usava --muted sobre o painel-2 (4.38) e .mast-tier recebe a cor do
   nível por style inline (--mc), com paleta de fundo escuro — mesmo tratamento
   dado ao rank: escurece mantendo o matiz, com reserva para navegador antigo. */
html.tema-claro .ord-vazio{ color:#5f5749; }
html.tema-claro .mast-tier{ color:var(--text); color:color-mix(in srgb, var(--mc) 42%, #241f16); }

/* ===== Dossiê do usuário (administração) =====
   Fica no ultimo arquivo carregado de proposito: as regras de .card e .adm-tabela
   do forja-app venceriam qualquer coisa escrita antes com a mesma especificidade.
   Cores literais nos dois temas — sem token de tema-escuro em fundo claro. */
.dos{ max-width:1080px; }
.dos-voltar{ display:inline-flex; align-items:center; gap:6px; font-size:13px; text-decoration:none; margin-bottom:12px; }
.dos-voltar svg{ width:15px; height:15px; transform:rotate(180deg); }
.dos-head{ display:flex; flex-wrap:wrap; gap:16px; justify-content:space-between; align-items:flex-start;
  padding-bottom:16px; border-bottom:1px solid var(--f-linha); margin-bottom:18px; }
html.tema-claro .dos-head{ border-bottom-color:#e0d7c2; }
.dos-head .pagina-titulo{ margin:0 0 4px; }
.dos-contato{ font-family:var(--f-mono,monospace); font-size:12.5px; margin:0 0 8px; color:#8b8578; }
html.tema-claro .dos-contato{ color:#6e6555; }
.dos-meta{ display:flex; flex-wrap:wrap; gap:6px; margin:0; }
.dos-meta .chip{ font-size:11px; }
.dos-acoes{ display:flex; gap:8px; }

.dos-kpis{ display:grid; grid-template-columns:repeat(auto-fit,minmax(118px,1fr)); gap:10px; margin-bottom:24px; }
.dos-kpi{ padding:13px 14px; border-radius:12px; border:1px solid var(--f-linha); background:#101012; }
html.tema-claro .dos-kpi{ border-color:#e0d7c2; background:#fbf7ec; }
.dk-v{ font-family:var(--f-mono,monospace); font-size:20px; font-weight:700; line-height:1.15; color:#f0d67a; }
html.tema-claro .dk-v{ color:#7d5f11; }
.dos-kpi.alerta .dk-v{ color:#e0864a; }
html.tema-claro .dos-kpi.alerta .dk-v{ color:#96591a; }
.dk-l{ font-size:11px; margin-top:3px; color:#8b8578; }
html.tema-claro .dk-l{ color:#6e6555; }

.dos-sec{ margin-bottom:26px; }
.dos-h{ display:flex; align-items:center; gap:9px; font-size:15px; font-weight:700; margin:0 0 12px; }
.dos-h svg{ width:17px; height:17px; color:#c9a227; }
html.tema-claro .dos-h svg{ color:#8a6a12; }
.dos-h small{ font-weight:400; font-size:11.5px; color:#8b8578; }
html.tema-claro .dos-h small{ color:#6e6555; }
.dos-h3{ font-size:13px; margin:16px 0 8px; }
.dos-linha{ font-size:13.5px; line-height:1.7; margin:0 0 10px; }

.dos-area{ margin-bottom:11px; }
.da-top{ display:flex; justify-content:space-between; gap:10px; font-size:13px; margin-bottom:4px; }
.da-num{ font-family:var(--f-mono,monospace); font-size:11.5px; color:#8b8578; white-space:nowrap; }
html.tema-claro .da-num{ color:#6e6555; }
.da-bar{ height:6px; border-radius:999px; background:#1e1e18; overflow:hidden; }
html.tema-claro .da-bar{ background:#e8e0cc; }
.da-bar > div{ height:100%; border-radius:999px; background:linear-gradient(90deg,#8f6f14,#f0d67a); }
.da-sub{ font-size:10.5px; margin-top:3px; color:#8b8578; }
html.tema-claro .da-sub{ color:#6e6555; }

.dos-chips{ display:flex; flex-wrap:wrap; gap:7px; }
.dos-chip{ display:inline-flex; align-items:center; gap:6px; padding:6px 11px; border-radius:999px;
  font-size:12px; border:1px solid var(--f-linha); background:#101012; }
html.tema-claro .dos-chip{ border-color:#e0d7c2; background:#fbf7ec; }
.dos-chip svg{ width:13px; height:13px; }
.dos-chip.fraco{ border-color:rgba(224,134,74,.45); }
.dos-chip.ok{ border-color:rgba(138,200,160,.4); }
.dos-chip b{ font-family:var(--f-mono,monospace); }

.dos-ritmo{ display:flex; align-items:flex-end; gap:3px; height:64px; padding:8px 10px; border-radius:12px;
  border:1px solid var(--f-linha); background:#101012; }
html.tema-claro .dos-ritmo{ border-color:#e0d7c2; background:#fbf7ec; }
.dr-col{ flex:1; display:flex; align-items:flex-end; height:100%; min-width:4px; }
.dr-col i{ display:block; width:100%; border-radius:2px; background:linear-gradient(180deg,#f0d67a,#8f6f14); }
.dos-legenda{ font-size:11px; margin-top:6px; color:#8b8578; }
html.tema-claro .dos-legenda{ color:#6e6555; }

.dos-tab{ width:100%; font-size:12.5px; }
.dos-tab td, .dos-tab th{ padding:7px 9px; }
.dos-tab tr.dos-ok td:first-child svg{ color:#8ac8a0; }
.dos-tab tr.dos-err td:first-child svg{ color:#e0864a; }
.dos-tab svg{ width:14px; height:14px; }

.dos-rotas{ font-size:11.5px; line-height:1.8; }
.dos-rotas code{ font-family:var(--f-mono,monospace); }
.dr-acao{ color:#8b8578; }
html.tema-claro .dr-acao{ color:#6e6555; }

@media (max-width:700px){
  .dos-voltar{ min-height:44px; }   /* era 21px: alvo de toque */
  .dos-kpis{ grid-template-columns:repeat(2,1fr); }
  .dos-head{ flex-direction:column; }
  .dos-acoes{ width:100%; }
  .dos-acoes .btn{ flex:1; min-height:44px; }
  .dos-tab{ display:block; overflow-x:auto; white-space:nowrap; }
}

/* ===== Abas da administração ===== */
.adm-abas{ display:flex; flex-wrap:wrap; gap:6px; margin:18px 0 20px;
  border-bottom:1px solid var(--f-linha); padding-bottom:0; }
html.tema-claro .adm-abas{ border-bottom-color:#e0d7c2; }
.adm-aba-btn{ display:inline-flex; align-items:center; gap:7px; padding:11px 16px; min-height:44px;
  border:none; border-bottom:2px solid transparent; background:none; cursor:pointer;
  font-size:13.5px; font-weight:600; color:#8b8578; transition:color .16s, border-color .16s; }
html.tema-claro .adm-aba-btn{ color:#6e6555; }
.adm-aba-btn svg{ width:16px; height:16px; }
.adm-aba-btn:hover{ color:#f0d67a; }
html.tema-claro .adm-aba-btn:hover{ color:#7d5f11; }
.adm-aba-btn.ativo{ color:#f0d67a; border-bottom-color:#c9a227; }
html.tema-claro .adm-aba-btn.ativo{ color:#7d5f11; border-bottom-color:#b8901c; }
.adm-painel[hidden]{ display:none; }
@media (max-width:700px){
  .adm-abas{ overflow-x:auto; flex-wrap:nowrap; }
  .adm-aba-btn{ white-space:nowrap; padding:11px 13px; }
}

/* ============================================================ TRILHA PERSONALIZADA
   Exemplos randomizados, andamento do pedido, conversa e modal do admin. */

/* chips de exemplo (home, página sob medida) */
.tp-chips{ display:flex; flex-wrap:wrap; gap:8px; margin:10px 0 14px; }
.tp-chip{ display:inline-flex; align-items:center; padding:7px 12px; border-radius:999px;
  border:1px solid var(--f-linha); background:var(--f-bg-2); color:var(--f-txt);
  font-size:12.5px; text-decoration:none; transition:border-color .15s, transform .15s; }
.tp-chip:hover{ border-color:var(--f-ouro); color:var(--f-ouro-cl); transform:translateY(-1px); }

/* gatilho no fim do módulo */
.tp-gatilho{ display:flex; align-items:center; gap:12px; margin:16px 0 4px; padding:13px 16px;
  border:1px dashed var(--f-ouro-es); border-radius:var(--f-r); text-decoration:none;
  background:color-mix(in srgb, var(--f-ouro) 6%, transparent); }
.tp-gatilho .tico{ color:var(--f-ouro); flex:none; }
.tp-gatilho .tg-tx{ display:flex; flex-direction:column; gap:2px; }
.tp-gatilho .tg-tx b{ color:var(--f-txt); font-size:13.5px; }
.tp-gatilho .tg-tx em{ color:var(--f-mudo); font-style:normal; font-size:12px; }
.tp-gatilho:hover{ border-style:solid; }

/* linha do tempo do pedido */
.sm-tl{ display:flex; align-items:center; gap:6px; flex-wrap:wrap; }
.sm-tl-p{ display:inline-flex; align-items:center; gap:5px; font-size:11px; color:var(--f-mudo-2); }
.sm-tl-p i{ width:9px; height:9px; border-radius:50%; background:var(--f-linha); flex:none; }
.sm-tl-p.on{ color:var(--f-mudo); } .sm-tl-p.on i{ background:var(--f-ouro-es); }
.sm-tl-p.atual{ color:var(--f-ouro-cl); font-weight:600; } .sm-tl-p.atual i{ background:var(--f-ouro); }
.sm-tl-l{ width:16px; height:1px; background:var(--f-linha); flex:none; }

/* card de pedido do usuário */
.sm-pedidos{ display:flex; flex-direction:column; gap:12px; margin-bottom:14px; }
.sm-pedido summary{ display:flex; align-items:center; justify-content:space-between; gap:12px;
  cursor:pointer; list-style:none; flex-wrap:wrap; }
.sm-pedido summary::-webkit-details-marker{ display:none; }
.sm-ped-obj{ font-weight:600; color:var(--f-txt); font-size:14px; }
.sm-abrir{ margin:12px 0 4px; }
.sm-conversa{ display:flex; flex-direction:column; gap:8px; margin:12px 0; max-height:340px; overflow-y:auto; }
.sm-vazio{ color:var(--f-mudo-2); font-size:12.5px; }
.ch-bolha{ max-width:86%; padding:9px 12px; border-radius:12px; border:1px solid var(--f-linha);
  background:var(--f-bg-2); }
.ch-bolha.minha{ align-self:flex-end; border-color:var(--f-ouro-es);
  background:color-mix(in srgb, var(--f-ouro) 8%, transparent); }
.ch-bolha .ch-de{ display:block; color:var(--f-mudo-2); font-size:10.5px; margin-bottom:3px; }
.ch-bolha .ch-tx{ color:var(--f-txt); font-size:13px; line-height:1.45; word-wrap:break-word; }
.sm-resp{ display:flex; gap:8px; }
.sm-resp input{ flex:1; min-width:0; }
.sm-nova{ margin:4px 0 16px; }

/* modal do admin */
.smadm-conversa{ max-height:300px; border:1px solid var(--f-linha); border-radius:var(--f-r-sm); padding:10px; }
.smadm-alerta{ margin:10px 0; }
#smadm-resp textarea{ width:100%; margin-bottom:8px; }
.smadm-controles{ display:flex; flex-wrap:wrap; gap:12px; align-items:end; margin-top:14px;
  padding-top:12px; border-top:1px solid var(--f-linha); }
.smadm-controles label{ display:flex; flex-direction:column; gap:4px; font-size:12px; color:var(--f-mudo); }
.smadm-controles .smadm-ia{ flex-direction:row; align-items:center; max-width:280px; }
/* badges novos no card de lead */
.al-badge.st-unread{ background:var(--f-ouro); color:#1a1404; }
.al-badge.st-escalado{ background:var(--tx-erro,#b3261e); color:#fff; }
.al-badge.st-ia{ border:1px solid var(--f-ouro-es); color:var(--f-ouro-cl); background:transparent; }
.adm-lead.lead-escalado{ border-color:var(--tx-erro,#b3261e); }

@media (max-width:700px){
  .sm-pedido summary{ flex-direction:column; align-items:flex-start; }
  .ch-bolha{ max-width:100%; }
}
.sm-disclaimer{ font-size:11px; color:var(--f-mudo-2); margin:2px 0 10px; }

/* ---- inputs da conversa: mesmo tratamento de .sm-form (elite.css), que e o
   padrao da plataforma. Sem isto caem no estilo cru do navegador — caixa branca
   de canto reto, gritando no meio do tema obsidiana. */
.sm-resp input,
#smadm-resp textarea,
.smadm-controles select{
  font-family:inherit; font-size:14px; color:var(--text);
  background:var(--panel-2); border:1px solid var(--border); border-radius:11px;
  padding:11px 13px; outline:none; transition:border-color .15s, box-shadow .15s;
}
.sm-resp input::placeholder,
#smadm-resp textarea::placeholder{ color:var(--muted-2); }
.sm-resp input:focus,
#smadm-resp textarea:focus,
.smadm-controles select:focus{
  border-color:var(--primary); box-shadow:0 0 0 3px rgba(var(--primary-rgb),.15);
}
#smadm-resp textarea{ resize:vertical; min-height:76px; }

/* ---- trilha entregue: usa .area-card da home; so o selo muda de cor */
.sm-selo{ background:var(--f-ouro); color:#1a1404; }
.sm-grid{ margin-bottom:22px; }

/* ---- pedido: uma linha; a conversa so abre se a pessoa quiser */
.sm-pedidos{ display:flex; flex-direction:column; gap:8px; margin-bottom:22px; }
.sm-pedido{ border:1px solid var(--f-linha); border-radius:var(--f-r); background:var(--f-bg-2); }
.sm-pedido summary{ display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:13px 16px; cursor:pointer; list-style:none; }
.sm-pedido summary::-webkit-details-marker{ display:none; }
.sm-pedido[open] summary{ border-bottom:1px solid var(--f-linha); }
.sm-ped-obj{ color:var(--f-txt); font-size:14px; font-weight:600; }
.sm-ped-st{ font-size:11px; color:var(--f-mudo); white-space:nowrap; }
.sm-ped-st.st-em_andamento{ color:var(--f-ouro-cl); }
.sm-ped-st.st-concluido{ color:var(--tx-ok); }
.sm-ped-corpo{ padding:14px 16px 16px; }
.sm-abrir{ margin-bottom:12px; }
.sm-conversa{ display:flex; flex-direction:column; gap:8px; margin-bottom:10px; max-height:300px; overflow-y:auto; }
.sm-vazio{ color:var(--f-mudo-2); font-size:12.5px; }
.ch-bolha{ max-width:86%; padding:9px 12px; border-radius:12px; border:1px solid var(--f-linha); background:var(--f-bg); }
.ch-bolha.minha{ align-self:flex-end; border-color:var(--f-ouro-es); background:color-mix(in srgb, var(--f-ouro) 8%, transparent); }
.ch-bolha .ch-de{ display:block; color:var(--f-mudo-2); font-size:10.5px; margin-bottom:3px; }
.ch-bolha .ch-tx{ color:var(--f-txt); font-size:13px; line-height:1.45; word-wrap:break-word; }
.sm-resp{ display:flex; gap:8px; }
.sm-resp input{ flex:1; min-width:0; }
.sm-disclaimer{ font-size:11px; color:var(--f-mudo-2); margin:0 0 10px; }

/* ---- acao principal e ideias sob demanda */
.sm-cta-box{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin:4px 0 14px; }
.tp-ideias[hidden]{ display:none; }
.sm-sub-sec{ color:var(--f-mudo); font-size:12.5px; margin:0 0 8px; }

/* ---- formulario em modal */
.sm-form-modal{ max-width:560px; width:94vw; max-height:92vh; overflow:auto; padding:18px 20px; }
.sm-form-modal .sm-form{ background:none; border:none; padding:0; margin:0; }

/* ---- inputs da conversa e do admin: padrao .sm-form (elite.css) */
.sm-resp input,
#smadm-resp textarea,
.smadm-controles select{
  font-family:inherit; font-size:14px; color:var(--text);
  background:var(--panel-2); border:1px solid var(--border); border-radius:11px;
  padding:11px 13px; outline:none; transition:border-color .15s, box-shadow .15s;
}
.sm-resp input::placeholder,
#smadm-resp textarea::placeholder{ color:var(--muted-2); }
.sm-resp input:focus,
#smadm-resp textarea:focus,
.smadm-controles select:focus{
  border-color:var(--primary); box-shadow:0 0 0 3px rgba(var(--primary-rgb),.15);
}
#smadm-resp textarea{ resize:vertical; min-height:76px; }

/* ---- modal do admin */
.smadm-conversa{ max-height:300px; border:1px solid var(--f-linha); border-radius:var(--f-r-sm); padding:10px; }
.smadm-alerta{ margin:10px 0; }
#smadm-resp textarea{ width:100%; margin-bottom:8px; }
.smadm-controles{ display:flex; flex-wrap:wrap; gap:12px; align-items:end; margin-top:14px;
  padding-top:12px; border-top:1px solid var(--f-linha); }
.smadm-controles label{ display:flex; flex-direction:column; gap:4px; font-size:12px; color:var(--f-mudo); }
.smadm-controles .smadm-ia{ flex-direction:row; align-items:center; max-width:280px; }
.al-badge.st-unread{ background:var(--f-ouro); color:#1a1404; }
.al-badge.st-escalado{ background:var(--tx-erro,#b3261e); color:#fff; }
.al-badge.st-ia{ border:1px solid var(--f-ouro-es); color:var(--f-ouro-cl); background:transparent; }
.adm-lead.lead-escalado{ border-color:var(--tx-erro,#b3261e); }

@media (max-width:700px){
  .sm-pedido summary{ flex-direction:column; align-items:flex-start; gap:6px; }
  .ch-bolha{ max-width:100%; }
  .sm-cta-box{ flex-direction:column; align-items:stretch; }
}

/* ============================================================
   TRILHO DE REVISÃO — onde eu estou na fila de hoje
   Cores em rgba neutro de propósito: a mesma regra serve tema
   claro e escuro; só o ouro vem de token.
   ============================================================ */
.ex-wrap.com-fila{ display:grid; grid-template-columns:minmax(0,1fr) 212px; gap:26px; align-items:start; }
.ex-wrap.com-fila .ex-main{ min-width:0; }

.rev-trilho{ --rt-fundo:#f4efe4; position:sticky; top:74px; border:1px solid rgba(128,128,128,.22); border-radius:var(--f-r,14px);
  background:rgba(128,128,128,.06); padding:12px 10px 10px; font-size:.78rem; }
html:not(.tema-claro) .rev-trilho{ --rt-fundo:#0c0c0e; }
.rt-head{ display:flex; align-items:center; gap:6px; font-weight:700; letter-spacing:.02em; margin-bottom:8px; }
.rt-head .tico{ width:14px; height:14px; opacity:.75; }
.rt-head b{ margin-left:auto; color:var(--f-ouro,#c9a227); font-variant-numeric:tabular-nums; }
.rt-bar{ height:3px; border-radius:3px; background:rgba(128,128,128,.22); overflow:hidden; margin-bottom:10px; }
.rt-bar>div{ height:100%; background:var(--f-ouro,#c9a227); transition:width .35s ease; }

.rt-lista{ list-style:none; margin:0; padding:0; max-height:min(50vh,400px); overflow-y:auto;
  scrollbar-width:thin; scrollbar-color:rgba(128,128,128,.35) transparent; }
.rt-lista::-webkit-scrollbar{ width:5px; }
.rt-lista::-webkit-scrollbar-thumb{ background:rgba(128,128,128,.35); border-radius:5px; }

.rt-item{ position:relative; }
.rt-item::before{ content:''; position:absolute; left:14px; top:0; bottom:0; width:1px; background:rgba(128,128,128,.24); }
.rt-item:first-child::before{ top:14px; }
.rt-item:last-child::before{ bottom:calc(100% - 14px); }
.rt-item>a{ position:relative; display:flex; align-items:center; gap:8px; padding:4px 5px; border-radius:9px;
  text-decoration:none; color:inherit; }
.rt-item>a:hover{ background:rgba(128,128,128,.12); }
.rt-dot{ flex:0 0 19px; width:19px; height:19px; border-radius:50%; display:grid; place-items:center;
  font-size:.62rem; font-weight:700; background:var(--rt-fundo); border:1px solid rgba(128,128,128,.35);
  color:rgba(128,128,128,.95); box-shadow:0 0 0 3px var(--rt-fundo); }
.rt-dot .tico{ width:11px; height:11px; }
.rt-tx{ display:flex; flex-direction:column; min-width:0; line-height:1.25; }
.rt-n{ font-size:.68rem; text-transform:uppercase; letter-spacing:.05em; opacity:.6; }
.rt-t{ font-size:.76rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; opacity:.9; }

.rt-item.feita .rt-dot{ background:var(--f-ouro,#c9a227); border-color:var(--f-ouro,#c9a227); color:#1a1608; }
.rt-item.feita .rt-t{ opacity:.5; text-decoration:line-through; }
.rt-item.atual>a{ background:rgba(201,162,39,.14); }
.rt-item.atual .rt-dot{ border-color:var(--f-ouro,#c9a227); border-width:2px; background:var(--rt-fundo); }
.rt-item.atual .rt-dot::after{ content:''; width:7px; height:7px; border-radius:50%; background:var(--f-ouro,#c9a227); }
.rt-item.atual .rt-n{ opacity:1; color:var(--f-ouro,#c9a227); font-weight:700; }
.rt-item.atual .rt-t{ opacity:1; font-weight:600; }

.rt-item.atual.feita .rt-dot{ background:var(--f-ouro,#c9a227); border-color:var(--f-ouro,#c9a227); color:#1a1608; }
.rt-item.atual.feita .rt-dot::after{ content:none; }
.rt-item.atual.feita .rt-t{ text-decoration:none; opacity:1; }

.rt-sair{ display:block; margin-top:9px; padding-top:8px; border-top:1px solid rgba(128,128,128,.18);
  text-align:center; font-size:.72rem; opacity:.65; text-decoration:none; color:inherit; }
.rt-sair:hover{ opacity:1; }

.res-prox{ display:inline-flex; margin-top:14px; }

@media (max-width:900px){
  .ex-wrap.com-fila{ grid-template-columns:1fr; gap:16px; }
  .rev-trilho{ position:static; order:-1; }
  .rt-lista{ max-height:132px; }
}

/* ============================================================
   SENHA — esquecer, redefinir e trocar
   ============================================================ */
.auth-solo{ min-height:70vh; display:grid; place-items:center; padding:24px 16px; }
.auth-solo .auth-card{ width:100%; max-width:400px; }
.auth-h1{ font-size:1.35rem; margin:4px 0 6px; letter-spacing:-.01em; text-wrap:balance; }
.auth-p{ margin:0 0 16px; font-size:.9rem; opacity:.75; line-height:1.5; }
.auth-ok{ color:var(--f-ok,#3f6f52); font-weight:600; }
#auth-esqueci-wrap{ margin-top:10px; }

.pf-senha{ display:flex; flex-wrap:wrap; gap:10px; align-items:center; }
.pf-senha input{ flex:1 1 190px; min-width:0; }
.pf-senha button{ flex:0 0 auto; }
.pf-senha-msg{ margin-top:9px; font-size:.86rem; min-height:1.2em; }
.pf-senha-msg .erro{ color:var(--f-erro,#a8371c); }

@media (max-width:520px){
  .pf-senha{ flex-direction:column; align-items:stretch; }
  .pf-senha button{ width:100%; }
}

/* Resposta do aluno na ficha do admin: cabe numa linha, o resto no title */
.dos-resp{ max-width:220px; font-family:var(--mono); font-size:.78rem; opacity:.85;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }


/* ============================================================
   TOUR DE PRIMEIRO ACESSO — 5 passos, some para sempre
   ============================================================ */
.tour-ov{ position:fixed; inset:0; z-index:9700; }
.tour-halo{ position:fixed; border-radius:14px; pointer-events:none;
  box-shadow:0 0 0 9999px rgba(8,8,10,.62), 0 0 0 2px var(--f-ouro,#c9a227);
  transition:top .25s ease, left .25s ease, width .25s ease, height .25s ease; }
.tour-card{ position:fixed; --tc-bg:#fbf8f1; --tc-tx:#242017;
  background:var(--tc-bg); color:var(--tc-tx);
  border:1px solid rgba(128,128,128,.32); border-radius:14px;
  padding:16px 16px 13px; max-width:360px; z-index:9701;
  box-shadow:0 18px 50px rgba(0,0,0,.38); }
html:not(.tema-claro) .tour-card{ --tc-bg:#1b1a14; --tc-tx:#f0ead9; }
.tour-card.centro{ top:50% !important; left:50% !important;
  transform:translate(-50%,-50%); width:min(380px, calc(100vw - 32px)); }
.tour-card.rodape{ left:12px; right:12px; bottom:12px; top:auto; width:auto; max-width:none; }
.tour-tit{ font-weight:750; font-size:1.02rem; margin-bottom:6px; letter-spacing:-.01em; }
.tour-txt{ font-size:.9rem; line-height:1.5; opacity:.92; }
.tour-foot{ display:flex; align-items:center; gap:10px; margin-top:13px; }
.tour-dots{ display:flex; gap:5px; margin:0 auto; }
.tour-dots i{ width:7px; height:7px; border-radius:50%; background:rgba(128,128,128,.35); }
.tour-dots i.on{ background:var(--f-ouro,#c9a227); }
.tour-pular{ background:none; border:0; color:inherit; opacity:.6; font-size:.82rem; cursor:pointer; padding:4px; }
.tour-pular:hover{ opacity:1; }
.tour-pular:empty{ visibility:hidden; }
.tour-prox{ white-space:nowrap; }


/* ============================================================
   SAIR — ícone real na sidebar e botão na tela de perfil
   ============================================================ */
.btn-sair{ display:inline-flex; align-items:center; justify-content:center; }
.btn-sair .tico, .btn-sair .tico svg{ width:16px; height:16px; }
.btn-sair-conta{ display:inline-flex; align-items:center; gap:8px;
  color:var(--f-erro,#a8371c); border:1px solid currentColor; background:transparent; }
.btn-sair-conta:hover{ background:rgba(200,80,60,.12); }
.btn-sair-conta .tico, .btn-sair-conta .tico svg{ width:16px; height:16px; }
.pf-sair-nota{ margin-top:8px; font-size:.82rem; opacity:.6; }
@media (max-width:520px){ .btn-sair-conta{ width:100%; justify-content:center; } }