/* =============================================================
 * ELITE.CSS — camada de LUXO do Elite+ (carrega por ÚLTIMO).
 * Redefine a paleta para preto + ouro + serifado executivo.
 * Tema escuro = padrão · html.tema-claro = versão creme.
 * ============================================================= */
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@500;600;700;800&family=Cormorant+Garamond:wght@600;700&family=Inter:wght@400;500;600;700&display=swap');

:root{
  --serif:'Playfair Display','Cormorant Garamond',Georgia,serif;
  /* ---- tema ESCURO (padrão) ---- */
  --bg:#0a0a0c; --bg-2:#0e0e11; --panel:#141417; --panel-2:#191a1e;
  --border:#262019; --border-2:#3a3024;
  --text:#ece5d6; --muted:#a59c89; --muted-2:#7e7565;
  --primary:#c9a227; --primary-rgb:201,162,39; --primary-2:#e6c976; --primary-3:#f3e3ac;
  --accent:#c9a227; --gold:#e6c976; --success:#9fb37a; --error:#cf7a68; --warning:#d6a44c;
  --code-bg:#0c0c0e; --track:#2a2418;
  --surface:linear-gradient(165deg,var(--panel),#0f0f12);
  --shadow-elev:0 16px 40px -20px rgba(0,0,0,.82);
  --shadow-glow:0 0 28px -8px rgba(var(--primary-rgb),.5);
}
/* ---- tema CLARO (creme/ivory) ---- */
html.tema-claro{
  --bg:#f4efe4; --bg-2:#efe7d7; --panel:#fbf8f1; --panel-2:#f2ebdb;
  --border:#e6dcc6; --border-2:#d6c9a9;
  --text:#241f16; --muted:#73695a; --muted-2:#9d9279;
  --primary:#b8901f; --primary-rgb:184,144,31; --primary-2:#caa233; --primary-3:#9a7714;
  --gold:#b8901f; --code-bg:#17150f; --track:#e6ddc6;
  --surface:linear-gradient(165deg,#fbf8f1,#f3ecdc);
  --shadow-elev:0 16px 36px -22px rgba(120,100,40,.38);
}

body{ font-family:'Inter',system-ui,sans-serif; color:var(--text);
  background:radial-gradient(130% 95% at 0% 0%,rgba(var(--primary-rgb),.09),transparent 46%), var(--bg); background-attachment:fixed; }

/* ---------- tipografia serifada de revista ---------- */
h1,h2,.serif,.pagina-titulo,.dash-saudacao h1,.brief-saud,.rh-rank,.logo-tx,.auth-logo,
.plano-hero h1,.bol-hero h1,.conq-hero-num,.rank-hero h1,.metodo h1,.mast-area,.empty-t,.modal-tit,.lu-nivel{
  font-family:var(--serif); }
.dash-saudacao h1,.pagina-titulo,.brief-saud{ letter-spacing:.2px; font-weight:700; }

/* foil dourado no logo e em números-herói */
.gold-foil,.logo-tx b{ background:linear-gradient(95deg,var(--primary),var(--primary-3) 45%,var(--primary) 72%); -webkit-background-clip:text; background-clip:text; color:transparent; }
.logo-tx{ font-weight:800; }

/* ---------- botões dourados ---------- */
.btn-primary{ background:linear-gradient(135deg,var(--primary-2),var(--primary)); color:#1c1606; border:none;
  box-shadow:0 8px 22px -8px rgba(var(--primary-rgb),.55); font-weight:600; }
.btn-primary:hover{ filter:brightness(1.07); transform:translateY(-1px); }
html.tema-claro .btn-primary{ color:#241803; }

/* ---------- nav / sidebar dourada ---------- */
.nav-link.ativo{ background:linear-gradient(90deg,rgba(var(--primary-rgb),.16),transparent); color:var(--primary-3); box-shadow:inset 2px 0 0 var(--primary); }
.nav-link.ativo .nav-ic{ background:linear-gradient(135deg,var(--primary),var(--primary-2)); box-shadow:0 5px 14px -4px rgba(var(--primary-rgb),.6); }
.sidebar,.topbar{ border-color:var(--border); }
.logo-mark,.logo svg{ filter:drop-shadow(0 0 8px rgba(var(--primary-rgb),.4)); }

/* ---------- cards com fio dourado + sombra quente ---------- */
.card,.stat,.rail-card,.area-card,.briefing,.bol-stat,.mast-card,.conq-card,.tier,.meta-card,.aposta-card{ border-color:var(--border); box-shadow:var(--shadow-elev); }
.area-card:hover,.tier:hover,.mast-card:hover{ border-color:var(--primary); }

/* selos: glow dourado na Eminência */
.rank-emb.glow{ animation:seloGlow 2.8s ease-in-out infinite; }
@keyframes seloGlow{ 0%,100%{ filter:drop-shadow(0 0 7px rgba(var(--primary-rgb),.45)); } 50%{ filter:drop-shadow(0 0 18px rgba(var(--primary-rgb),.9)); } }
.tier-emblema .rank-emb{ width:50px; } .rh-emblema .rank-emb{ width:64px; }

/* chips / tags douradas */
.skill-tag,.nivel-tag,.tag-resolvido,.card-sub{ border-color:var(--border-2); }
.streak-chip.aceso,.nivel-chip{ border-color:var(--border-2); }

/* hero do ranking/plano/boletim com brilho dourado */
.rank-hero,.plano-hero,.bol-hero,.briefing{ background:radial-gradient(120% 150% at 100% 0%,rgba(var(--primary-rgb),.14),transparent 52%),var(--surface); border-color:var(--border-2); }

/* scrollbar dourada */
*{ scrollbar-color:var(--border-2) transparent; }
*::-webkit-scrollbar-thumb{ background:var(--border-2); }

/* ---------- toggle de tema (sol/lua) ---------- */
.tema-toggle{ width:34px;height:34px;border-radius:10px;border:1px solid var(--border-2);background:rgba(var(--primary-rgb),.07);color:var(--primary-2);display:inline-flex;align-items:center;justify-content:center;cursor:pointer;transition:.18s; }
.tema-toggle:hover{ border-color:var(--primary); color:var(--primary-3); }
.tema-toggle .ic{ width:17px; height:17px; }
.tema-toggle span{ display:inline-flex; } .tema-toggle .ti-l{ display:none; }
html.tema-claro .tema-toggle .ti-d{ display:none; } html.tema-claro .tema-toggle .ti-l{ display:inline-flex; }

/* ---------- áreas "Em breve" (vitrine bloqueada) ---------- */
.embreve-sec{ margin-top:28px; }
.embreve-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(190px,1fr)); gap:14px; }
.embreve-card{ position:relative; border:1px solid var(--border); border-radius:14px; padding:18px; background:var(--surface); opacity:.72; overflow:hidden; }
.embreve-card::after{ content:'EM BREVE'; position:absolute; top:11px; right:11px; font-size:8.5px; letter-spacing:.14em; font-weight:700; color:#1c1606; background:linear-gradient(135deg,var(--primary-2),var(--primary)); padding:3px 7px; border-radius:999px; }
.embreve-ic{ width:44px;height:44px;border-radius:12px;display:flex;align-items:center;justify-content:center;background:rgba(var(--primary-rgb),.12);border:1px solid rgba(var(--primary-rgb),.3);margin-bottom:10px; }
.embreve-ic .ic{ width:22px;color:var(--primary-2); }
.embreve-nome{ font-family:var(--serif); font-weight:700; font-size:16px; }
.embreve-sub{ font-size:11.5px; color:var(--muted); margin-top:2px; }
.embreve-cad{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center; }
.embreve-cad .ic{ width:30px; color:var(--muted-2); opacity:.5; }

/* ============================================================
 * VARREDURA — tira as cores CHUMBADAS (dark/roxo) do CSS base
 * e joga tudo pra TOKEN, pra funcionar no claro E no escuro.
 * ============================================================ */

/* ---- SIDEBAR ---- */
.sidebar{ background:linear-gradient(180deg, var(--panel), var(--bg)); border-right:1px solid var(--border); }
.nav-group{ color:var(--muted-2); }
.nav-link{ color:var(--muted); }
.nav-link:hover{ background:rgba(var(--primary-rgb),.08); color:var(--text); }
.nav-link .nav-ic{ background:rgba(var(--primary-rgb),.08); }
.nav-link:hover .nav-ic{ background:rgba(var(--primary-rgb),.18); }
.nav-link.ativo{ background:linear-gradient(90deg,rgba(var(--primary-rgb),.18),transparent); color:var(--primary-3); }
.nav-link.ativo .nav-ic{ background:linear-gradient(135deg,var(--primary),var(--primary-2)); box-shadow:0 5px 14px -4px rgba(var(--primary-rgb),.6); }
.nav-link.ativo::before{ background:var(--primary); box-shadow:0 0 12px var(--primary); }
.nav-badge{ background:var(--primary); color:#1c1606; }
.logo, .logo-tx{ color:var(--text); }
.logo-mark,.logo-svg{ filter:drop-shadow(0 0 8px rgba(var(--primary-rgb),.45)); }
.logo-tx b{ background:linear-gradient(120deg,var(--primary),var(--primary-3)); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; color:transparent; }
.avatar{ background:linear-gradient(135deg,var(--primary),var(--primary-3)); color:#1c1606; box-shadow:0 5px 16px -4px rgba(var(--primary-rgb),.5); }
.mini-perfil{ background:var(--panel-2); border-color:var(--border); }
.btn-sair:hover{ color:var(--error); background:rgba(207,122,104,.14); }

/* ---- TOPBAR (some o fundo escuro fixo) ---- */
.topbar{ background:color-mix(in srgb, var(--bg) 80%, transparent); border-bottom:1px solid var(--border); }
.menu-toggle,.search,.streak-chip,.nivel-chip{ background:var(--panel-2); border-color:var(--border); color:var(--text); }
.search:focus-within{ border-color:var(--primary); box-shadow:0 0 0 3px rgba(var(--primary-rgb),.18); }

/* ---- SUPERFÍCIES (2º stop #101019 -> token) ---- */
.area-card,.trilha-card,.rail-card,.enunciado,.modulo-card,.ex-card,.mast-card,.conq-card,.stat,
.dominado-chip,.calib-bar,.drill-box,.rev-area{ background:var(--surface); border-color:var(--border); }
.confianca-box,.passos-box,.dica-box,.exemplo{ background:var(--surface)!important; }
.conq-hero{ background:radial-gradient(135deg, rgba(var(--primary-rgb),.16), var(--panel) 70%); }

/* ---- BARRAS (#2a2a3e -> --track) ---- */
.nivel-chip .xp-bar,.rail-xp-bar,.rh-bar,.mast-bar,.conq-hero-bar,.calib-bar{ background:var(--track); }
.fraco-ring{ background:conic-gradient(var(--c) calc(var(--p)*1%), var(--track) 0); }
.conq-ring{ background:conic-gradient(var(--primary) calc(var(--p)*1%), var(--track) 0); }

/* ---- acentos ROXOS sobrando -> OURO ---- */
.skill-tag{ background:rgba(var(--primary-rgb),.14); color:var(--primary-2); }
.area-card::before,.trilha-card::before{ background:linear-gradient(135deg,rgba(var(--primary-rgb),.5),transparent 40%); }
.rail-upgrade{ background:linear-gradient(150deg,rgba(var(--primary-rgb),.2),rgba(var(--primary-rgb),.05)); border-color:rgba(var(--primary-rgb),.4); }
.rail-upgrade::after{ background:radial-gradient(circle,rgba(var(--primary-rgb),.35),transparent 70%); }
.ru-badge{ background:var(--primary); color:#1c1606; }
.conquista-toast{ background:var(--surface); border-color:var(--primary); box-shadow:0 18px 46px -16px rgba(var(--primary-rgb),.6), 0 0 0 1px rgba(var(--primary-rgb),.2); }
.rail-link:hover{ background:rgba(var(--primary-rgb),.07); }

/* ---- tema CLARO: contraste final ---- */
html.tema-claro .nav-link:hover{ color:var(--text); }
html.tema-claro .avatar,html.tema-claro .nav-badge,html.tema-claro .ru-badge{ color:#fffdf8; }
html.tema-claro .streak-chip.aceso{ background:linear-gradient(135deg,rgba(214,164,76,.22),rgba(184,144,31,.08)); border-color:rgba(184,144,31,.45); }
html.tema-claro .code-win-head,html.tema-claro .runner-out{ color:#ece5d6; }

/* ---- VARREDURA 2: painéis-herói escuros, textos sumindo, ícones nav, botões ouro ---- */
.briefing,.bol-hero,.plano-hero{ background:radial-gradient(120% 160% at 100% 0%, rgba(var(--primary-rgb),.12), transparent 55%), var(--surface); border-color:var(--border-2); }
.ct-nome,.dyn-pergunta,.conq-ring span b,.ds-num{ color:var(--text); }
.nav-link .nav-ic{ color:var(--muted); }
.nav-link:hover .nav-ic{ color:var(--text); }
.nav-link.ativo .nav-ic{ color:#1c1606; }
.btn-primary,.modulo-num{ color:#1c1606; }
.combo-chip.t3{ background:linear-gradient(135deg,var(--primary),var(--primary-3)); box-shadow:0 10px 28px -8px rgba(var(--primary-rgb),.6); }
.tag-dinamico{ background:rgba(var(--primary-rgb),.16); color:var(--primary-2); }
.tier-tag.ok{ background:rgba(var(--primary-rgb),.16); color:var(--primary-3); }
.nivel-tag.nivel-intermediario{ color:var(--primary-2); } .nivel-tag.nivel-avancado{ color:#c98a2e; }

/* ---- CURSOS EXCLUSIVOS: vídeo-aulas + selo ---- */
.videos-sec{ margin:16px 0 6px; }
.videos-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(320px,1fr)); gap:14px; }
.video-card{ background:var(--surface); border:1px solid var(--border); border-radius:14px; overflow:hidden; }
.video-frame{ position:relative; aspect-ratio:16/9; background:#000; }
.video-frame iframe,.video-frame video{ position:absolute; inset:0; width:100%; height:100%; border:0; }
.video-info{ display:flex; align-items:center; justify-content:space-between; gap:10px; padding:10px 14px; font-size:13.5px; }
.video-info span{ color:var(--muted); font-size:12px; flex:none; }
.video-ph{ display:flex; align-items:center; gap:12px; padding:16px; background:var(--surface); border:1px dashed rgba(var(--primary-rgb),.45); border-radius:14px; }
.video-ph .vp-ic{ width:38px; height:38px; flex:none; border-radius:10px; display:flex; align-items:center; justify-content:center; background:rgba(var(--primary-rgb),.12); color:var(--primary-2); }
.video-ph strong{ display:block; font-size:13.5px; }
.video-ph span{ color:var(--muted); font-size:12.5px; }
.selo-exclusivo{ display:inline-flex; align-items:center; vertical-align:middle; font-size:10px; font-weight:800; letter-spacing:.09em; text-transform:uppercase; color:#1c1606; background:linear-gradient(135deg,var(--primary-2),var(--primary)); padding:2.5px 9px; border-radius:9px; margin-left:6px; }