/* Sistema de design do portal (29/10/2026). Carregado por último: é a palavra final sobre cores, tipografia, raios,
   bordas, estados e a moldura. Base neutra (preto, branco e cinzas); o dourado da logo só no que pede atenção
   (navegação ativa, ação principal, link, série selecionada, foco). Cores semânticas não viram dourado.
   Regras de telas carregadas depois (Conquistas, Parcerias) usam #view para ganhar dos estilos próprios delas. */

/* ---------- tokens ---------- */
:root{
  /* estrutura */
  --bg:#f5f5f7;--bg-2:#eeeef0;--card:#fff;--card-2:#fafafb;--tab:#f0f0f2;
  --nav-dark:#0f0f0f;--nav-2:#1b1d22;--nav-3:#2a2d33;--nav-text:#f5f5f7;--nav-muted:#9a9ca3;
  --text:#1d1d1f;--text-2:#3a3a3e;--muted:#6e6e73;--muted-2:#98989e;
  --line:#e5e5e8;--line-2:#d6d6da;
  /* cor de destaque da marca */
  /* verde do site (02/11/2026, aprovado pelo dono na prévia): do verde ao amarelo-limão no botão principal (texto branco)
     e no avatar do gerente; o verde #16C946 em linhas, gráfico, bordas de seleção e item ativo. Texto verde sobre branco
     usa o tom escuro #0F9A35, que tem contraste para leitura. */
  --brand:#16c946;--brand-hover:#0f9a35;--brand-pressed:#12a83b;--brand-text:#0f9a35;
  --brand-light:#e9fbee;--brand-subtle:#f4fdf6;--brand-border:#9fe8b4;--brand-focus:rgba(23,224,74,.3);
  --btn-grad:linear-gradient(90deg,#17e04a 0%,#d2df0c 100%);--btn-grad-h:linear-gradient(90deg,#2ee95c 0%,#dde61f 100%);
  /* semânticas */
  /* dinheiro ganho (saldo, receita, disponível): esmeralda vivo, diferente do verde de "alta" das variações.
     Em números grandes (texto grande, mínimo 3:1); na barra preta, o tom claro. */
  --money:#0e9f6e;--money-on-dark:#34d399;
  --kpi-blue:#2563eb;--kpi-yellow:#c49a0a;--kpi-orange:#e07b1a;--kpi-good:#1e8a4f;--kpi-dark:#15803d;--kpi-gold:#7d6537;--kpi-bad:#d33a3a;
  --good:#23865d;--good-bg:#eaf6ef;--bad:#d94b4b;--bad-bg:#fdeeee;--warn:#b87a21;--warn-bg:#fff5e5;--info:var(--brand);
  /* papéis (os nomes antigos apontam para a paleta nova) */
  --primary:var(--brand);--primary-hover:#12b03e;--on-primary:#fff;
  --accent:var(--brand);--accent-hi:var(--brand-hover);--accent-lo:var(--brand-pressed);--accent-soft:var(--brand-light);
  --gold-text:var(--brand-text);--soft-gold:var(--brand-light);--gold-grad:var(--btn-grad);--gold-grad-v:linear-gradient(135deg,#17e04a,#d2df0c);
  --side-navy:var(--nav-dark);--navy:var(--nav-2);--navy-2:var(--nav-3);--night:var(--nav-dark);
  --c-rev:var(--brand);--c-clicks:var(--brand);
  /* gráfico */
  --chart-1:var(--brand);--chart-2:#cbd5df;--chart-grid:#eceef1;--chart-label:#86868b;
  /* tipografia (a escala do briefing com +1px: o dono achou a anterior pequena) */
  --font:var(--app-font);--display:var(--app-font);
  --fs-xs:13px;--fs-sm:14px;--fs-md:15px;--fs-card:16px;--fs-lg:20px;--fs-xl:22px;--fs-2xl:28px;--fs-kpi:30px;
  /* espaçamento (escala de 4) */
  --sp-1:4px;--sp-2:8px;--sp-3:12px;--sp-4:16px;--sp-5:20px;--sp-6:24px;--sp-8:32px;--sp-10:40px;--sp-12:48px;
  /* raios */
  --r-xs:6px;--r-sm:8px;--r-md:10px;--r-lg:12px;--r-xl:14px;--radius:12px;
  /* estados e movimento */
  --hover:#f2f2f4;--active:var(--brand-light);--focus:0 0 0 3px var(--brand-focus);
  --t-fast:140ms;--t-base:200ms;
  --lift:none;--shadow:0 10px 30px -12px rgba(16,17,20,.16),0 2px 6px rgba(16,17,20,.05);
  /* moldura */
  --top-h:64px;--side-w:236px;--side-gap:0px;
}
[data-theme=dark]{
  --bg:#101114;--bg-2:#16181c;--card:#16181c;--card-2:#1b1d22;--tab:#1f2227;--line:#272a30;--line-2:#33373e;
  --text:#f5f5f7;--text-2:#c7c7cc;--muted:#98989e;--hover:#1f2227;
  --brand-text:#d2b88a;--brand-hover:#d2b88a;--primary:#b09464;--primary-hover:#c2a676;--brand-light:rgba(176,148,100,.16);--active:rgba(176,148,100,.16);
  --kpi-blue:#7aa7ff;--kpi-yellow:#f2c94c;--kpi-orange:#f59e4b;--kpi-good:#3cc47a;--kpi-dark:#22a35a;--kpi-gold:#d2b88a;--kpi-bad:#ef6a6a;
}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{transition-duration:0s!important;animation-duration:0s!important}}
html{font-synthesis-weight:none}
body{font-family:var(--font);font-size:var(--fs-md);line-height:1.5;color:var(--text);background:var(--bg);}
h1,h2,h3{letter-spacing:-.012em}
.hs-v,.tp-v b,.hc-tot b,table.t td.n,.tb-balance b,.pg-pay b,.mo-n b,.fn-row b{font-variant-numeric:tabular-nums}

/* ---------- títulos e seções ---------- */
.page{padding:6px 28px 56px;max-width:1480px}
.page-head{gap:12px;margin-bottom:20px}
.page-head h1{font-size:var(--fs-2xl);font-weight:600;line-height:1.25}
.page-head .sub{font-size:var(--fs-md);color:var(--muted);margin-top:2px}
.section,.sec-head h2,.mo-h{font-size:var(--fs-lg);font-weight:600;letter-spacing:-.01em}
.section{margin:28px 0 12px}
.sec-head{margin-bottom:12px}
.home section{margin-top:20px}
.home-head{align-items:center}
.home-head .btn{height:42px}

/* ---------- superfícies ---------- */
.card,.hstrip,.tbl,.chart-card,.live-panel,.prod,.mo-list,.spot-side,.cg-conn,.cg-note,.cg-linkfmt,.funnel{border-radius:var(--radius);border:1px solid var(--line);box-shadow:none}
.card{padding:20px}
.card.hstrip,.card.live-panel,.card.tbl,.card.rtable,.card.mo-list{padding:0}
.prod:hover,.offers .prod:hover{transform:none;box-shadow:none;border-color:var(--line-2)}
.menu,.dp-pop,.modal,.bellpanel,.xsel-pop,.qk{border-radius:var(--r-md);border:1px solid var(--line);box-shadow:var(--shadow)}

/* ---------- botões: primário (dourado com texto preto), secundário (borda), discreto (texto) ---------- */
.btn{height:40px;padding:0 14px;gap:8px;border-radius:var(--r-sm);border:1px solid var(--line-2);background:var(--card);color:var(--text);font-size:var(--fs-md);font-weight:500;box-shadow:none;transition:background .12s,border-color .12s,color .12s}
.btn:hover{background:var(--hover);border-color:var(--line-2)}
.btn:focus-visible,.hh-go:focus-visible,.cq-gold:focus-visible{outline:0;box-shadow:var(--focus)}
.btn.primary,.cq-gold,.kbn-cta,.kpt-btn{background:var(--primary);border:1px solid var(--primary);color:var(--on-primary);box-shadow:none;filter:none;font-weight:500;border-radius:var(--r-sm)}
.btn.primary:hover,.cq-gold:hover{background:var(--primary-hover);border-color:var(--primary-hover);opacity:1;filter:none}
/* .btn.gold é o mesmo primário (o nome ficou de quando a ação de maior prioridade era dourada) */
.btn.gold,.cg-btn{background:var(--primary);border:1px solid var(--primary);color:var(--on-primary);box-shadow:none;filter:none;font-weight:600;border-radius:var(--r-sm)}
.btn.gold:hover,.cg-btn:hover{background:var(--primary-hover);border-color:var(--primary-hover);opacity:1;filter:none}
.btn.gold svg,.btn.primary svg{stroke:currentColor}
/* botão principal no degradê do verde do site, com texto branco */
.btn.primary,.btn.gold,.cg-btn,.cq-gold,.kbn-cta,.kpt-cta{background:var(--btn-grad);border-color:transparent;color:#fff}
.btn.primary:hover,.btn.gold:hover,.cg-btn:hover,.cq-gold:hover,.kbn-cta:hover,.kpt-cta:hover{background:var(--btn-grad-h);border-color:transparent}
.btn.sm{height:34px;padding:0 12px;font-size:var(--fs-sm)}
.btn svg{width:16px;height:16px;stroke-width:1.8}
.btn.ghostw{background:transparent;border-color:var(--line-2);color:var(--text)}
.btn.link{color:var(--text);text-decoration:underline;text-underline-offset:3px}
.cq-ghost{height:36px;padding:0 14px;border-radius:var(--r-sm);border:1px solid var(--line-2);font-weight:500}
.cq-gold{height:38px;padding:0 16px;font-size:var(--fs-md)}
.iconbtn{border-radius:var(--r-sm)}

/* ---------- campos e seletores ---------- */
.in,.f input:not([type=checkbox]):not([type=radio]),.f select,.f textarea{height:38px;border-radius:var(--r-sm);font-size:var(--fs-md)}
.f textarea{height:auto}
.f>span{font-size:var(--fs-sm);font-weight:500;color:var(--text-2)}
.f input:focus,.f select:focus,.f textarea:focus{border-color:var(--brand);box-shadow:var(--focus)}
.bigsearch{height:38px;padding:0 12px;gap:8px;border-radius:var(--r-sm);border-color:var(--line-2)}
.bigsearch:focus-within{border-color:var(--brand);box-shadow:var(--focus)}
.bigsearch svg{width:16px;height:16px}
.bigsearch input{font-size:var(--fs-md)}
.pillsel select,.sortsel select,.filters select{height:38px;border-radius:var(--r-sm);border-color:var(--line-2);font-size:var(--fs-md);font-weight:500}
.rbar .pillsel select{height:38px;border-radius:var(--r-sm)}
.morebtn{height:38px;border-radius:var(--r-sm);padding:0 12px}
.morebtn em{background:var(--brand);color:var(--nav-dark)}
.dp-btn{height:38px;border-radius:var(--r-sm);border-color:var(--line-2)}
.dp.dpp .dp-btn{height:38px;padding:0 12px;gap:8px;border-radius:var(--r-sm);border-color:var(--line-2);box-shadow:none}
.dp.dpp .dp-btn b{font-size:var(--fs-md)}
.dp-btn .ico{width:16px;height:16px}
.dp-days button.start,.dp-days button.end{border-radius:var(--r-xs)}
.simsel input{height:32px;border-radius:var(--r-sm)}
.seg{border-radius:var(--r-sm);padding:2px;background:var(--tab)}
.seg button{border-radius:var(--r-xs);padding:6px 12px;font-size:var(--fs-sm);font-weight:500}
.seg button.on{box-shadow:0 1px 2px rgba(16,24,40,.08)}
.tb-lang,header.top .tb-lang{border-radius:var(--r-sm)}

/* ---------- abas ---------- */
.tabs,.page-tabs{gap:22px;margin-bottom:18px}
.tabs button,.page-tabs a{font-size:var(--fs-md);padding:8px 0 10px}
.tabs button.on,.page-tabs a.on{border-bottom-color:var(--brand)}
[data-theme=dark] .tabs button.on,[data-theme=dark] .page-tabs a.on{border-bottom-color:var(--accent)}

/* ---------- etiquetas e situações ---------- */
.tag,.pill,.partial,.ll-tag,.tp-tag,.cq-chip,.kbn-tag{border-radius:var(--r-xs)}
.pill{font-size:var(--fs-xs);font-weight:500;padding:2px 8px}
.tag{font-size:var(--fs-xs);font-weight:500;padding:2px 8px}
.prod-badges .tag{border-radius:var(--r-xs);box-shadow:none;border:1px solid var(--line)}
.prod-badges .tag.new{border-color:var(--primary)}

/* ---------- faixa de métricas ---------- */
.hs{padding:16px 18px 14px;gap:4px}
.hs-k{font-size:var(--fs-sm);font-weight:500;letter-spacing:0;text-transform:none;color:var(--muted)}
.hs.on .hs-k{color:var(--text)}
.hs-v{font-size:27px;font-weight:600;letter-spacing:-.02em}
.hs:after{left:18px;right:18px;height:2px;border-radius:2px}
.hs.on:after{background:var(--brand)}
[data-theme=dark] .hs.on:after{background:var(--accent)}
.dl{font-size:var(--fs-xs);font-weight:500}
.hs-note,.hs-h{font-size:var(--fs-xs)}

/* ---------- gráfico e listas do Início ---------- */
.hrow .card{padding:18px 20px}
.hc-k{font-size:var(--fs-sm);font-weight:500;letter-spacing:0;text-transform:none;color:var(--muted)}
.hc-tot b{font-size:30px;font-weight:600;letter-spacing:-.02em}
.hc-sub{font-size:var(--fs-sm)}
.hc-lg{font-size:var(--fs-sm)}
.hc-link{font-size:var(--fs-sm);font-weight:500}
.chart-tip.compact{border-radius:var(--r-sm)}
svg.chart text{font-size:13.5px}
.tp{padding:10px 0 12px}
.tp-img{border-radius:var(--r-sm)}
.tp-t b{font-size:var(--fs-md)}
.tp-v b{font-size:18px;font-weight:600}

/* ---------- tabelas ---------- */
table.t{font-size:var(--fs-md)}
table.t th{font-size:var(--fs-xs);font-weight:500;letter-spacing:0;text-transform:none;padding:10px 16px;background:var(--card-2)}
table.t td{padding:12px 16px}
table.t tr:hover td{background:var(--card-2)}
table.t tr.total td{background:var(--tab)}
.rt-head{padding:12px 16px}

/* ---------- moldura: barra do topo preta com a logo, menu lateral claro embaixo dela ---------- */
header.top{left:0;height:var(--top-h);gap:10px;padding:0 20px;background:var(--nav-dark);color:#fff;border-bottom:1px solid var(--nav-2);backdrop-filter:none;-webkit-backdrop-filter:none}
header.top .logo{display:flex;align-items:center;flex:none;width:calc(var(--side-w) - 20px);margin:0}
header.top .logo .lg-full{display:block;height:34px;width:auto}
header.top .logo .lg-mark{display:none;height:28px;width:auto}
.app.mini header.top .logo .lg-full{display:none}
.app.mini header.top .logo .lg-mark{display:block}
.tb-icon{color:#c9c9ce}
.tb-icon:hover{background:var(--nav-2);color:#fff}
.tb-manager{gap:10px;padding:4px 8px 4px 4px}
.tb-manager:hover{background:var(--nav-2)}
.tb-manager .av{width:32px;height:32px;font-size:var(--fs-xs);background:var(--brand);color:var(--nav-dark);box-shadow:none}
.tb-manager .who{column-gap:10px}
.tb-manager small{font-size:var(--fs-xs);color:#9a9aa0}
.tb-manager b{font-size:var(--fs-md);font-weight:500;color:#fff}
.tb-manager em{font-size:var(--fs-xs);color:#4ade80}
.tb-manager em:before{background:#4ade80;box-shadow:none}
.tb-help{width:26px;height:26px;margin-left:12px;border:1px solid var(--nav-3);color:#9a9aa0;font-size:var(--fs-sm)}
.tb-help:hover{color:#fff;border-color:#55555b}
header.top .tb-lang{height:34px;padding:0 30px 0 10px;gap:8px;border-radius:var(--r-sm);background:var(--nav-2);border:1px solid var(--nav-3);color:#fff;box-shadow:none}
header.top .tb-lang:hover{border-color:#55555b}
header.top .tb-lang select{font-size:var(--fs-sm);color:#fff}
header.top .lsel .lsel-cc{color:#9a9aa0}
header.top .tb-lang svg{width:15px;height:15px;color:#9a9aa0}
header.top .tb-lang:after{right:12px;width:6px;height:6px;color:#9a9aa0}
.tb-balance>button{height:34px;padding:0 12px;gap:8px;border-radius:var(--r-sm);background:var(--nav-2);border:1px solid var(--nav-3);color:#c9c9ce;font-size:var(--fs-sm)}
.tb-balance>button:hover{border-color:#55555b}
.tb-balance .ico{width:15px;height:15px;color:#9a9aa0}
.tb-balance b{font-size:var(--fs-md);font-weight:600;color:var(--brand)}
.tb-bell .bell{width:34px;height:34px;border-radius:var(--r-sm);color:#e5e5e8}
.tb-bell .bell:hover{background:var(--nav-2)}
.tb-bell .bell svg{width:18px;height:18px}
.tb-bell .bell em{top:2px;right:2px;min-width:16px;height:16px;font-size:10px;background:var(--bad);color:#fff;box-shadow:0 0 0 2px var(--nav-dark)}
.tb-user>button{gap:8px;font-size:var(--fs-md);font-weight:500;color:#fff;border-radius:var(--r-sm);padding:2px 8px 2px 2px}
.tb-user>button:hover{background:var(--nav-2)}
.tb-user .av{width:30px;height:30px;font-size:var(--fs-xs);background:var(--nav-3);color:#fff}
/* menu lateral */
.side{top:var(--top-h);left:0;bottom:0;border-radius:0;background:var(--card);border-right:1px solid var(--line);box-shadow:none;color:var(--text);padding:0 0 12px}
[data-theme=dark] .side{background:var(--card)}
.side-h{height:auto;padding:12px 10px 4px;justify-content:flex-end}
.side-logo{display:none}
.side-collapse{width:26px;height:26px;border-radius:var(--r-xs);background:none;border:1px solid var(--line);color:var(--muted)}
.side-collapse:hover{color:var(--text);background:var(--hover)}
.side nav{gap:2px;padding:4px 10px 12px}
.side nav a{height:40px;gap:10px;padding:0 10px;border:0;border-radius:var(--r-sm);font-size:var(--fs-md);font-weight:500;color:var(--text-2);background:none;box-shadow:none}
.side nav a .ico{width:20px;height:20px;color:var(--muted);stroke-width:1.7}
.side nav a:hover{background:var(--hover);color:var(--text)}
.side nav a:hover .ico{color:var(--text-2)}
.side nav a.on{background:var(--active);color:var(--text);font-weight:600;box-shadow:inset 2px 0 0 var(--brand)}
.side nav a.on .ico{color:var(--brand)}
.side-card{margin:auto 10px 0;padding-top:12px}
.side-card a{padding:12px;border-radius:var(--r-md);border:1px solid var(--line);background:var(--card-2);color:var(--muted)}
.side-card a:hover{transform:none;border-color:var(--line-2)}
.side-card b{color:var(--text);font-size:var(--fs-sm);font-weight:600}
.side-card span{font-size:var(--fs-xs);color:var(--muted)}
.sc-go{width:24px;height:24px;right:10px;bottom:10px;background:var(--nav-dark);color:#fff;box-shadow:none}
.sc-go .ico{width:13px;height:13px}
.side-copy{padding:12px 18px 0;font-size:var(--fs-xs);color:var(--muted)}
.app.mini{--side-w:64px}
.app.mini .side-h{flex-direction:row;justify-content:center;padding:12px 0 4px}
.app.mini .side nav{padding:4px 10px}
.main{margin-left:var(--side-w);padding-top:var(--top-h)}
.page{padding-top:24px}

/* ---------- Produtos ---------- */
.offers .prod{border-radius:var(--radius)}
/* Foto do card na cor do rótulo (dono, 10/11/2026): fundo e disco lisos no tom do rótulo (--tint, de offers.js), pote
   flutuando devagar com a sombra no chão acompanhando, cada card no seu tempo. Pote sem cor forte fica no cinza de antes. */
.offers .prod-img{height:190px;background:var(--card-2);overflow:hidden;isolation:isolate}
.offers .prod.tinted .prod-img{background:color-mix(in srgb,var(--tint) 12%,#fff)}
.offers .prod.tinted .prod-img:before{content:'';position:absolute;z-index:-1;width:150px;height:150px;border-radius:50%;left:50%;top:50%;transform:translate(-50%,-52%);background:color-mix(in srgb,var(--tint) 24%,#fff)}
.offers .prod-img:after{content:'';position:absolute;z-index:0;left:50%;bottom:14px;width:92px;height:12px;margin-left:-46px;border-radius:50%;background:#101828;opacity:.16;filter:blur(5px);animation:prod-shadow 6s ease-in-out infinite;animation-delay:var(--float-delay,0s)}
.offers .prod.tinted .prod-img:after{background:color-mix(in srgb,var(--tint) 45%,#101828)}
.offers .prod-img img{position:relative;z-index:1;max-height:148px;filter:drop-shadow(0 6px 8px rgba(16,24,40,.14));animation:prod-float 6s ease-in-out infinite;animation-delay:var(--float-delay,0s);transition:rotate .35s ease,scale .35s ease}
.offers .prod:hover .prod-img img{transform:none;rotate:-4deg;scale:1.05}
/* cadeado do plano anual (dono, 10/11/2026): pote apagado e parado, cadeado de vidro escuro no meio; os números continuam à vista */
.offers .prod.locked .prod-img img{filter:grayscale(.6) brightness(.9);animation-play-state:paused;opacity:.75}
.offers .prod.locked:hover .prod-img img{rotate:none;scale:1}
.lockover{position:absolute;inset:0;z-index:4;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;text-decoration:none;
  background:rgba(255,255,255,.14);backdrop-filter:blur(1.5px);-webkit-backdrop-filter:blur(1.5px)}
.lockover .lk{width:58px;height:58px;border-radius:50%;display:grid;place-items:center;color:#fff;background:rgba(15,15,15,.78);
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);box-shadow:0 10px 24px -8px rgba(15,15,15,.55),0 0 0 1px rgba(255,255,255,.18);transition:scale .25s ease}
.lockover .lk svg{width:26px;height:26px;transform-origin:50% 40%}
.lockover small{padding:4px 11px;border-radius:999px;background:#0f0f0f;color:#fff;font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase}
.offers .prod.locked:hover .lockover .lk{scale:1.08}
.offers .prod.locked:hover .lockover .lk svg{animation:lock-shake .5s ease}
@keyframes lock-shake{0%,100%{rotate:0deg}25%{rotate:-10deg}50%{rotate:8deg}75%{rotate:-4deg}}
.btn.lockbtn{background:#0f0f0f;color:#fff;border-color:#0f0f0f;justify-content:center}
.btn.lockbtn svg{width:17px;height:17px}
.btn.lockbtn:hover{background:#26282d}
html.glass .btn.lockbtn{background:#fff;color:#0f0f0f;border-color:#fff}
html.glass .lockover{background:rgba(0,0,0,.2)}
/* imagem do card escolhida pelo produtor: cobre a parte de cima inteira, parada, sem disco nem sombra */
.offers .prod-img.has-cover img.prod-cover{position:absolute;inset:0;z-index:0;width:100%;height:100%;max-width:none;max-height:none;object-fit:cover;filter:none;animation:none}
.offers .prod-img.has-cover:before,.offers .prod-img.has-cover:after{display:none}
.offers .prod:hover .prod-img.has-cover img.prod-cover{rotate:none;scale:1.03;transition:scale .5s ease}
.offers .prod-badges,.offers .favbtn{z-index:2}
.offers .prod-more{z-index:3}
@keyframes prod-float{0%,100%{translate:0 0}50%{translate:0 -8px}}
@keyframes prod-shadow{0%,100%{scale:1;opacity:.18}50%{scale:.78;opacity:.1}}
html.glass .offers .prod.tinted .prod-img{background:color-mix(in srgb,var(--tint) 16%,transparent)}
html.glass .offers .prod.tinted .prod-img:before{background:color-mix(in srgb,var(--tint) 28%,transparent)}
html.glass .offers .prod-img:after{background:#000;opacity:.4}
.offers .prod-name,.prod-name{font-family:var(--font);font-size:var(--fs-lg);font-weight:600;margin:2px 0 10px}
.offers .pg-pay b{font-size:var(--fs-2xl);font-weight:600;letter-spacing:-.02em}
.pg-3{border-radius:var(--r-sm)}
.pg-3 b{font-size:15px;font-weight:600}
.offers .pg-foot .act{height:38px;border-radius:var(--r-sm);font-weight:500}
.geo{border-radius:var(--r-xs)}
.favbtn{border-radius:var(--r-sm);width:32px;height:32px}
.prod-more{border-radius:var(--r-sm)}
/* oferta da semana (dono, 10/11/2026): na cor do rótulo (--tint, de offers.js) ou na cor escolhida pelo produtor, com aro,
   disco e pote flutuando à direita (.spot-art). Com o fundo do produtor (.has-bg) a imagem cobre o card inteiro e o texto
   vai num painel de vidro. Cores lisas, sem degradê nem brilho. */
.spot-main{background:var(--card)!important;box-shadow:none!important;border:1px solid var(--line);border-radius:var(--radius);min-height:250px;color:var(--text);isolation:isolate}
.spot-main.tinted{background:color-mix(in srgb,var(--tint) 11%,#fff)!important;border-color:color-mix(in srgb,var(--tint) 24%,var(--line))}
.spot-main:before,.spot-main:after,.spot-bg{display:none}
.spot-txt{padding:24px 28px;gap:8px;max-width:64%;z-index:2}
.spot-k{align-self:flex-start;display:inline-flex;align-items:center;gap:6px;padding:5px 11px;border-radius:999px;background:#fff;color:var(--gold-text);letter-spacing:.08em;font-weight:700;font-size:var(--fs-xs);box-shadow:0 0 0 1px var(--line)}
.spot-main.tinted .spot-k{color:color-mix(in srgb,var(--tint) 72%,#0f0f0f);box-shadow:0 0 0 1px color-mix(in srgb,var(--tint) 28%,transparent)}
.spot-k svg{display:block;width:12px;height:12px;fill:currentColor;stroke:none}
.spot-txt h2{font-family:var(--font);font-weight:700;font-size:34px;letter-spacing:-.02em;line-height:1.05;color:var(--text)}
.spot-art{position:absolute;z-index:1;right:4%;top:50%;width:min(30%,260px);aspect-ratio:1;transform:translateY(-50%);display:grid;place-items:center;pointer-events:none}
.spot-ring{position:absolute;inset:-12%;border-radius:50%;border:1.5px solid color-mix(in srgb,var(--tint,#9aa3ad) 32%,transparent)}
.spot-disc{position:absolute;inset:4%;border-radius:50%;background:color-mix(in srgb,var(--tint,#9aa3ad) 24%,#fff)}
.spot-main .spot-pack{position:absolute;inset:6% 15% 10%;z-index:1;width:70%;height:84%;max-width:none;object-fit:contain;filter:drop-shadow(0 10px 14px rgba(16,24,40,.18));animation:prod-float 7s ease-in-out infinite;transition:rotate .4s ease,scale .4s ease}
.spot-main:hover .spot-pack{rotate:-4deg;scale:1.04}
.spot-shadow{position:absolute;z-index:0;bottom:5%;left:29%;width:42%;height:7%;border-radius:50%;background:color-mix(in srgb,var(--tint,#9aa3ad) 45%,#101828);opacity:.2;filter:blur(6px);animation:prod-shadow 7s ease-in-out infinite}
.spot-cover{position:absolute;inset:0;z-index:0;width:100%;height:100%;object-fit:cover}
.spot-main.has-bg .spot-ring,.spot-main.has-bg .spot-disc{display:none}
.spot-main.has-bg .spot-txt{margin:16px;padding:20px 22px;border-radius:calc(var(--radius) - 2px);background:rgba(255,255,255,.84);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);box-shadow:0 0 0 1px rgba(15,15,15,.06)}
html.glass .spot-main.tinted{background:color-mix(in srgb,var(--tint) 14%,var(--card))!important}
html.glass .spot-disc{background:color-mix(in srgb,var(--tint,#9aa3ad) 30%,transparent)}
html.glass .spot-k,html.glass .spot-main.tinted .spot-k{background:rgba(255,255,255,.08);color:#fff;box-shadow:0 0 0 1px rgba(255,255,255,.14)}
html.glass .spot-main.has-bg .spot-txt{background:rgba(15,15,15,.72)}
@media(max-width:640px){.spot-txt{max-width:100%;padding-right:40%}.spot-main.has-bg .spot-txt{padding-right:22px;margin-right:38%}.spot-art{width:46%;right:-6%}.spot-main .spot-pack{opacity:1}.spot-txt h2{font-size:28px}}
.spot-sub{color:var(--muted)}.spot-sub b{color:var(--text)}
.spot-n b{color:var(--text);font-weight:600}
.spot-n span,.spot-n small{color:var(--muted)}
.spot-n .gold,.spot-n b.gold{color:var(--gold-text)}
.spot-pack{filter:drop-shadow(0 10px 14px rgba(16,24,40,.16));animation:none;height:76%}
.spot-side{border-radius:var(--radius)}
.spot-n b{font-size:var(--fs-xl);font-weight:600;color:var(--text)}
.spot-n span:first-child b{color:var(--text);font-size:var(--fs-2xl)}
.spot-n small{color:var(--muted)}
.sim-big b{color:var(--text);font-weight:600;font-size:26px}
.wm-views button.on{background:var(--nav-dark);color:#fff}
/* oferta: capa mais baixa, simulador e lista sem enfeite */
.ocover{aspect-ratio:4/1;max-height:240px;border-radius:var(--radius) var(--radius) 0 0}
.ocover:after{display:none}
.sim-big{background:var(--card-2);color:var(--text);border:1px solid var(--line);border-radius:var(--r-sm)}
.sim-big *{color:inherit}
.sim-big b,.sim-big strong{color:var(--text)}
.ready-bar{height:4px}
.ready-bar i{background:var(--primary)}
.ready-list .rd{border-radius:50%}
.ready-h svg{display:none}

/* ---------- Ganhos, Rastreamento, Suporte ---------- */
.methods button{border-radius:var(--r-sm)}
.cg-hero{border-radius:var(--radius);background:var(--side-navy)!important;box-shadow:none}
.cg-hero:before,.cg-hero:after{display:none}
.cg-title{background:none!important;-webkit-text-fill-color:currentColor;color:#fff;font-family:var(--font);font-weight:600;font-size:28px}
.cg-n{background:rgba(255,255,255,.12);color:#fff}

/* ---------- Conquistas (estilos próprios em /ui/jr/journey.css) ---------- */
#view .cq-hero{background:var(--side-navy);border-radius:var(--radius);box-shadow:none}
#view .cq-hero::before{display:none}
#view .cq-hero-ins svg{filter:none}
#view .cq-title{font-family:var(--font);font-weight:600;font-size:40px;letter-spacing:-.02em;background:none;-webkit-text-fill-color:currentColor;color:var(--brand);animation:none}
#view .cq-next{border-radius:var(--r-md);background:rgba(255,255,255,.04);border-color:rgba(255,255,255,.1)}
#view .cq-next-h b,#view .cq-sec-h h2,#view .cq-claim h3{font-family:var(--font);font-weight:600;letter-spacing:-.01em}
#view .cq-sec-h h2{font-size:var(--fs-lg)}
#view .cq-node.cur .cq-node-ins::before{display:none}
#view .cq-node.cur .cq-node-b{box-shadow:none;border-color:var(--line-2);border-radius:var(--r-md)}
#view .cq-node.cur .cq-node-b>b{font-family:var(--font);font-weight:600;font-size:24px;background:none;-webkit-text-fill-color:currentColor;color:var(--gold-text)}
#view .cq-claim{background:var(--card);border:1px solid var(--line-2);border-radius:var(--radius);box-shadow:none}
#view .cq-chip.claim{background:var(--primary);color:var(--on-primary);box-shadow:none}
#view .cq-tcard,#view .cq-badge,#view .cq-claim-item{border-radius:var(--r-md);box-shadow:none}

/* os botões de Conquistas seguem o primário */
#view .cq-gold{height:38px;padding:0 16px;border-radius:var(--r-sm);background:var(--primary);color:var(--on-primary);box-shadow:none;font-weight:500;font-size:var(--fs-md)}
#view .cq-gold:hover{background:var(--primary-hover);filter:none}
#view .cq-hero .cq-gold{background:var(--brand);color:var(--nav-dark)}
#view .cq-hero .cq-gold:hover{background:var(--brand-hover)}
#view .cq-claim .cq-gold{background:var(--brand);color:var(--nav-dark)}
#view .cq-claim .cq-gold:hover{background:var(--brand-hover)}

/* ---------- Parcerias (estilos próprios em partners.css): cartão claro, vídeo à esquerda ---------- */
#view .kpt-card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);box-shadow:none;color:var(--text-2);padding:24px;gap:32px}
#view .kpt-card:before{display:none}
#view .kpt-frame{border-radius:var(--r-md);box-shadow:none;border:1px solid var(--line)}
#view .kpt-empty{background:var(--card-2)}
#view .kpt-empty .kpt-play{background:var(--primary);color:var(--on-primary);box-shadow:none;width:56px;height:56px}
#view .kpt-empty .kpt-play svg{width:22px;height:22px}
#view .kpt-play:after{display:none}
#view .kpt-soon{font-family:var(--font);font-weight:600;font-size:var(--fs-lg);color:var(--text)}
#view .kpt-who{color:var(--muted)}
#view .kpt-k{color:var(--gold-text);letter-spacing:.08em;font-size:var(--fs-xs)}
#view .kpt-title{font-family:var(--font);font-weight:600;font-size:26px;letter-spacing:-.02em;color:var(--text)}
#view .kpt-x{background:none;-webkit-text-fill-color:currentColor;color:var(--muted);animation:none}
#view .kpt-body p,#view .kpt-body p:first-child{color:var(--text-2);font-size:var(--fs-md)}
#view .kpt-cta{height:38px;padding:0 16px;background:var(--primary);color:var(--on-primary);border-radius:var(--r-sm);box-shadow:none;font-weight:500}
#view .kpt-cta:hover{transform:none;box-shadow:none;background:var(--primary-hover)}
#view .kpt-btn{height:34px;padding:0 12px;border-radius:var(--r-sm);font-weight:500;box-shadow:none}
#view .kpt-badge,#view .kpt-status{border-radius:var(--r-xs);font-weight:500;letter-spacing:0;text-transform:none}
#view .kpt-status{color:var(--muted);background:var(--tab);border-color:var(--line)}
#view .kpt-status i{background:var(--muted)}
#view .kpt-status.on{color:var(--good);background:color-mix(in srgb,var(--good) 10%,transparent);border-color:color-mix(in srgb,var(--good) 25%,transparent)}
#view .kpt-status.on i{background:var(--good);box-shadow:none}
#view .kpt-conn{background:var(--card-2);border:1px solid var(--line);border-radius:var(--r-md)}
#view .kpt-conn-k{color:var(--text)}
#view .kpt-conn-when,#view .kpt-conn-wait{color:var(--muted)}
#view .kpt-conn p{color:var(--text-2)}
#view .kpt-conn-link{color:var(--text)}

/* =========================================================================================================
   camada final de componentes (vem depois das regras acima, que ficam como base de medidas)
   ========================================================================================================= */

/* ---------- tipografia ---------- */
.page-head h1{font-size:var(--fs-2xl);font-weight:600;letter-spacing:-.02em}
.page-head .sub{font-size:var(--fs-sm);color:var(--muted)}
.section,.sec-head h2{font-size:var(--fs-lg);font-weight:600}
.hc-k{font-size:var(--fs-card);font-weight:600;color:var(--text)}
.hc-sub{font-size:var(--fs-sm);color:var(--muted)}
table.t th{font-size:var(--fs-xs);font-weight:500;color:var(--muted)}
a{transition:color var(--t-fast)}
.gold,.hs-v.gold{color:var(--text)}
a.gold,.btn.link,.hc-link,.sec-link,.cg-link,.ul{color:var(--brand-text)}

/* ---------- foco visível em tudo que é clicável ---------- */
a:focus-visible,button:focus-visible,select:focus-visible,input:focus-visible,[tabindex]:focus-visible,summary:focus-visible{outline:0;box-shadow:var(--focus);border-radius:var(--r-sm)}

/* ---------- barra do topo ---------- */
header.top{background:var(--nav-dark);border-bottom:1px solid var(--nav-2)}
header.top .logo .lg-full{height:46px}
header.top .logo .lg-mark{height:36px}
.tb-sec{flex:none;font-size:var(--fs-md);font-weight:500;color:var(--nav-text);white-space:nowrap}
.tb-manager .av{background:var(--nav-3);color:#fff}
.tb-manager b{color:var(--nav-text)}
.tb-manager small{color:var(--nav-muted)}
.tb-balance b{color:#fff}
header.top .tb-lang,.tb-balance>button{transition:border-color var(--t-fast)}

/* ---------- menu lateral: claro, em grupos, item ativo em dourado suave ---------- */
.side{background:var(--bg);border-right:1px solid var(--line)}
.nav-g{display:flex;flex-direction:column;gap:2px}
.nav-g+.nav-g{margin-top:14px}
.nav-h{padding:0 10px 6px;font-size:var(--fs-xs);font-weight:500;color:var(--muted-2)}
.app.mini .nav-h{display:none}
.app.mini .nav-g+.nav-g{margin-top:8px;padding-top:8px;border-top:1px solid var(--line)}
.side nav a{color:var(--text-2);transition:background var(--t-fast),color var(--t-fast)}
.side nav a .ico{color:var(--muted)}
.side nav a:hover{background:var(--bg-2);color:var(--text)}
.side nav a.on{background:var(--brand-light);color:var(--brand-hover);font-weight:500;box-shadow:none}
.side nav a.on .ico{color:var(--brand)}
.side-card a{background:var(--card)}
.sc-go{background:var(--primary);color:var(--on-primary)}

/* ---------- botões ---------- */
.btn{transition:background var(--t-fast),border-color var(--t-fast),color var(--t-fast)}
.btn:active{background:var(--bg-2)}
.btn.primary:active,.btn.gold:active,.cq-gold:active{background:var(--brand-pressed);border-color:var(--brand-pressed)}
.btn:disabled,.btn[disabled]{opacity:.45;cursor:not-allowed}

/* ---------- métricas: cards compactos, sem enfeite embaixo; o selecionado ganha borda dourada ---------- */
.hstrip,.card.hstrip{gap:12px;padding:0;border:0;background:none;overflow:visible}
.hstrip .hs{border:1px solid var(--line)!important;border-radius:var(--radius);background:var(--card);padding:16px 18px;gap:6px;transition:border-color var(--t-fast)}
.hstrip .hs:after{display:none}
button.hs:hover{border-color:var(--line-2)!important;background:var(--card)}
.hstrip .hs.on{border-color:var(--brand)!important;box-shadow:inset 0 0 0 1px var(--brand)}
.hs.on .hs-k{color:var(--brand-hover)}
.hs-k{font-size:var(--fs-sm);font-weight:500;color:var(--muted)}
.hs-v{font-size:clamp(22px,1.75vw,var(--fs-kpi));font-weight:600;letter-spacing:-.02em;line-height:1.15}
.dl{font-size:var(--fs-xs);font-weight:500}
.live-panel>.hstrip{padding:16px;border-bottom:1px solid var(--line)}
.live-panel>.hstrip .hs{background:var(--card-2)}

/* ---------- gráficos: dourado na série atual, cinza no período anterior, balão branco ---------- */
svg.chart .cur{stroke:var(--chart-1);stroke-width:2.25}
svg.chart .prev,.hchart svg.chart .prev{stroke:var(--chart-2);stroke-width:2;stroke-dasharray:5 5;opacity:1}
svg.chart .grid,.hchart svg.chart .grid{stroke:var(--chart-grid);stroke-dasharray:none}
svg.chart text{fill:var(--chart-label)}
svg.chart stop:first-child{stop-opacity:.1}
svg.chart .dot,.hchart svg.chart .dot{fill:var(--card);stroke:var(--chart-1);stroke-width:2.5}
svg.chart .guide,.hchart svg.chart .guide{stroke:var(--line-2);stroke-width:1}
.chart-tip,.chart-tip.compact{background:var(--card);color:var(--text);border:1px solid var(--line);border-radius:var(--r-md);box-shadow:var(--shadow)}
.chart-tip.compact small{color:var(--muted)}
.chart-tip.compact small.pv{color:var(--muted-2)}
.ct-r i.prev{border-top-color:var(--chart-2)}
.hc-lg i.cur{background:var(--chart-1)}
.hc-lg i.prev{border-top-color:var(--chart-2)}
.lg i.cur{background:var(--chart-1)}
.tp:after{background:var(--brand-border)}
.fn-bar .t,.dot.t{background:var(--brand)}
.fn-bar .w,.dot.w{background:var(--chart-2)}

/* ---------- abas, etiquetas ---------- */
.tabs button.on,.page-tabs a.on{color:var(--text);border-bottom-color:var(--brand)}
.tag.hot,.prod-badges .tag.hot{background:var(--brand-light);color:var(--brand-hover);border-color:var(--brand-border)}
.tag.fire,.prod-badges .tag.fire{background:var(--warn-bg);color:var(--warn);border-color:transparent}
.tag.new,.prod-badges .tag.new{background:var(--good-bg);color:var(--good);border-color:transparent}
.pill.good{background:var(--good-bg);color:var(--good)}
.pill.bad{background:var(--bad-bg);color:var(--bad)}
.st.hold{color:var(--warn)}.st.ok{color:var(--good)}.st.no{color:var(--bad)}.st.paid{color:var(--brand-text)}
.favbtn.on{color:var(--brand);border-color:var(--brand-border)}
.toast{background:var(--nav-dark);border-left-color:var(--brand);border-radius:var(--r-md)}
.toast.err{border-left-color:var(--bad)}

/* ---------- blocos que eram faixas escuras: viram cartões claros ---------- */
#view .kbn-navy{background:var(--card);border:1px solid var(--line);color:var(--text-2)}
#view .kbn-navy .kbn-title,#view .kbn-light .kbn-title{color:var(--text)}
#view .kbn-navy .kbn-tag,#view .kbn-light .kbn-tag{background:var(--tab);color:var(--muted)}
#view .kbn-cta,#view .kbn-navy .kbn-cta{background:var(--primary);color:var(--on-primary)}
#view .kbn-card:hover{border-color:var(--line-2)}
.cg-hero{background:var(--card)!important;border:1px solid var(--line);color:var(--text)}
.cg-eyebrow{color:var(--muted);letter-spacing:0;text-transform:none;font-size:var(--fs-sm);font-weight:500}
.cg-title{color:var(--text)!important}
.cg-main p{color:var(--text-2)}
.cg-flow li{background:var(--card-2);border:1px solid var(--line)}
.cg-flow li+li:before{background:var(--line-2)}
.cg-flow b{color:var(--text)}
.cg-flow small{color:var(--muted)}
.cg-n{background:var(--brand-light);color:var(--brand-hover)}
.cg-btn{color:var(--on-primary)}
/* Conquistas: título atual num cartão claro; progresso em dourado, sem brilho */
#view .cq-hero{background:var(--card);border:1px solid var(--line);color:var(--text)}
#view .cq-k{color:var(--muted);letter-spacing:0;text-transform:none;font-size:var(--fs-sm);font-weight:500}
#view .cq-title{color:var(--text)}
#view .cq-motto,#view .cq-total span,#view .cq-next-h small,#view .cq-pace-sub,#view .cq-hint{color:var(--muted)}
#view .cq-total b,#view .cq-next-h b,#view .cq-missing b{color:var(--text);font-weight:600}
#view .cq-missing,#view .cq-pace{color:var(--text-2)}
#view .cq-next{background:var(--card-2);border:1px solid var(--line)}
#view .cq-next-h em,#view .cq-pace b,#view .cq-pace svg{color:var(--brand-hover)}
#view .cq-bar{background:var(--tab);height:6px}
#view .cq-bar i{background:var(--brand);box-shadow:none}
#view .cq-hint{border-top-color:var(--line)}
#view .cq-hero .cq-gold,#view .cq-claim .cq-gold{background:var(--primary);color:var(--on-primary)}
#view .cq-hero .cq-gold:hover,#view .cq-claim .cq-gold:hover{background:var(--primary-hover)}
#view .cq-hero-ins:hover{transform:none}
#view .cq-node.cur .cq-node-b>b{color:var(--text)}
#view .cq-chip.claim{background:var(--primary);color:var(--on-primary)}
/* Parcerias */
#view .kpt-k{color:var(--muted);letter-spacing:0;text-transform:none;font-size:var(--fs-sm);font-weight:500}
#view .kpt-empty .kpt-play{background:var(--primary)}

/* ---------- moldura solta (29/10/2026, estilo dr.cash): barra do topo e menu lateral como blocos com espaço em volta ---------- */
:root{--gap:12px}
header.top{top:var(--gap);left:var(--gap);right:var(--gap);border-radius:18px;border:0;padding:0 18px 0 22px}
/* o fundo da página cobre o espaço em volta da barra: o conteúdo rolando não aparece por trás dela */
header.top:before{content:"";position:absolute;z-index:-1;top:calc(-1 * var(--gap));left:calc(-1 * var(--gap));right:calc(-1 * var(--gap));bottom:calc(-1 * var(--gap));background:var(--bg)}
header.top:after{content:"";position:absolute;z-index:-1;inset:0;border-radius:inherit;background:var(--nav-dark)}
header.top .logo{width:calc(var(--side-w) - 6px)}
.side{top:calc(var(--top-h) + var(--gap) * 2);left:var(--gap);bottom:var(--gap);border-radius:16px;border:1px solid var(--line);background:var(--card)}
.side-h{padding-top:10px}
.main{margin-left:calc(var(--side-w) + var(--gap) * 2);padding-top:calc(var(--top-h) + var(--gap) * 2)}
.page{padding-top:6px!important}
.cmpbar{left:calc(var(--side-w) + var(--gap) * 2 + 24px)}
/* cabeçalho do Início numa linha: o subtítulo quebra antes dos botões */
.home-head{flex-wrap:nowrap}
.home-head>div:first-child{flex:1 1 auto;min-width:0}
.home-head>.sp{display:none}
.home-head>.btn,.home-head>.dp{flex:none}

.hs-v.pos,.hc-tot b.pos,.mo-n b.pos{color:var(--money)}
/* números dos indicadores (31/10/2026): mais largos e pesados, no padrão do CashGo, e com a cor do indicador */
.hs-v,.hc-tot b{font-weight:800;letter-spacing:-.01em;font-size:clamp(22px,1.5vw,32px)}
/* faixa de 6 indicadores: numa linha só, como no original, acima de 1280px (o gráfico não desce); o número diminui um pouco
   para o valor em € caber. Até 1280px são 3 colunas (aff.css) com o número maior (02/11/2026) */
@media(max-width:1500px){.hstrip:not(.c4) .hs-v{font-size:clamp(18px,1.4vw,22px)}}
@media(max-width:1280px) and (min-width:561px){.hstrip:not(.c4) .hs-v{font-size:22px}}
.hs-v.tn-blue,.hc-tot b.tn-blue{color:var(--kpi-blue)}
.hs-v.tn-yellow,.hc-tot b.tn-yellow{color:var(--kpi-yellow)}
.hs-v.tn-good,.hc-tot b.tn-good,.hs-v.tn-good.pos{color:var(--kpi-good)}
.hs-v.tn-bad,.hc-tot b.tn-bad{color:var(--kpi-bad)}
.hs-v.tn-orange,.hc-tot b.tn-orange{color:var(--kpi-orange)}
.hs-v.tn-dark,.hc-tot b.tn-dark{color:var(--kpi-dark)}
.hs-v.tn-gold,.hc-tot b.tn-gold{color:var(--kpi-gold)}
/* balão do gráfico: traço e valor na cor da métrica (--chart-1 vem do card) */
.ct-r i.cur{background:var(--chart-1)}
.chart-tip.compact b,.ct-r:first-of-type b{color:var(--chart-1)}
/* detalhamento: números em negrito e na cor da coluna, igual aos cards */
.rt td.n{font-weight:700}
.rt td.n.tn-blue{color:var(--kpi-blue)}.rt td.n.tn-yellow{color:var(--kpi-yellow)}.rt td.n.tn-orange{color:var(--kpi-orange)}
.rt td.n.tn-good{color:var(--kpi-good)}.rt td.n.tn-dark{color:var(--kpi-dark)}.rt td.n.tn-gold{color:var(--kpi-gold)}.rt td.n.tn-bad{color:var(--kpi-bad)}
.rt tr.total td.n{font-weight:800}
/* Top produtos: leads amarelo, comissão por entrega no dourado */
.tp-v b{color:var(--kpi-yellow);font-weight:800}
.tp-pay{color:var(--kpi-gold);font-weight:700}
.tb-balance b{color:var(--money-on-dark)!important}

/* ---------- Conquistas (29/10/2026): tudo em cartões claros, dourado fosco da logo, sem brilho nem ouro metálico ---------- */
#view .cq{--cq-gold:var(--brand);--cq-gold-v:var(--brand);--cq-navy:var(--card);--cq-up:var(--good);--cq-down:var(--bad)}
#view .cq-sec{margin-top:28px}
#view .cq-sec-h{margin-bottom:12px}
#view .cq-sec-h span,#view .cq-hall-h span{font-size:var(--fs-sm);color:var(--muted)}
#view .cq-hall-h h2,#view .cq-stage-h h3{font-family:var(--font);font-weight:600;font-size:var(--fs-lg);letter-spacing:-.01em;color:var(--text)}
/* título atual e próximo título */
#view .cq-hero{padding:24px 26px 16px;gap:10px 28px}
#view .cq-title{font-size:34px}
#view .cq-total b{font-size:26px}
#view .cq-hero-ins svg{width:120px;height:auto}
/* caminho dos níveis: trilho dourado liso, nó atual num cartão com borda dourada */
#view .cq-node.done::before,#view .cq-node.done::after,#view .cq-node.cur::before{background:var(--brand);box-shadow:none}
#view .cq-node.lock .cq-node-ins svg{filter:none;opacity:.9}
#view .cq-node.next .cq-node-ins svg{filter:none;opacity:1}
#view .cq-node-b>b{font-family:var(--font);font-weight:600;font-size:var(--fs-md);letter-spacing:0}
#view .cq-node.done .cq-node-b>b{color:var(--text)}
#view .cq-node.cur .cq-node-b{border:1px solid var(--brand);box-shadow:none;border-radius:var(--radius)}
#view .cq-node.cur .cq-node-b>b{font-size:22px}
#view .cq-cur-prize small,#view .cq-mprize small{letter-spacing:0;text-transform:none;font-weight:500;font-size:var(--fs-xs);color:var(--muted)}
#view .cq-teaser .cq-thumb>*{filter:grayscale(.4) blur(2px);opacity:.8}
#view .cq-lockic{color:var(--muted)}
#view .cq-lockic svg{background:rgba(255,255,255,.9);color:var(--text-2);backdrop-filter:none;box-shadow:0 0 0 1px var(--line)}
#view .cq-mini i,#view .cq-gapbar i,#view .cq-steps li.done::before{background:var(--brand)}
/* fotos e artes dos prêmios num fundo neutro */
#view .cq-thumb,#view .cq-mp-img{background:var(--card-2);box-shadow:inset 0 0 0 1px var(--line);border-radius:var(--r-sm)}
/* situação do prêmio: cores de sinal (pedido, em produção, enviado, entregue) */
#view .cq-chip{border-radius:var(--r-xs);font-weight:500}
#view .cq-chip.requested{background:var(--tab);color:var(--text-2)}
#view .cq-chip.production{background:var(--warn-bg);color:var(--warn)}
#view .cq-chip.shipped{background:var(--brand-light);color:var(--brand-text)}
#view .cq-chip.delivered{background:var(--good-bg);color:var(--good)}
#view .cq-chip.claim{background:var(--primary);color:var(--on-primary);box-shadow:none}
#view .cq-steps li.done i{background:var(--brand)}
#view .cq-steps li.done i::after{border-color:#fff}
#view .cq-steps li.now i{box-shadow:0 0 0 4px var(--brand-light)}
#view .cq-tcard,#view .cq-claim{border:1px solid var(--line);background:var(--card);box-shadow:none;border-radius:var(--radius)}
#view .cq-claim-item{border:1px solid var(--line);background:var(--card-2);box-shadow:none}
/* insígnias */
#view .cq-badge{border:1px solid var(--line);background:var(--card);box-shadow:none;border-radius:var(--radius)}
#view .cq-badge.on{border-color:var(--brand-border)}
/* ranking: contagem, sua posição, pódio claro */
#view .cq-cd{border-radius:var(--r-sm);font-weight:500}
#view .cq-cd.live{background:var(--card);color:var(--text-2);box-shadow:inset 0 0 0 1px var(--line)}
#view .cq-cd.live b{color:var(--text)}
#view .cq-cd i{background:var(--good);animation:none}
#view .cq-in10{border-radius:var(--r-sm);background:var(--good-bg);color:var(--good);font-weight:500}
#view .cq-mine,#view .cq-me{border-radius:var(--radius);box-shadow:none}
#view .cq-stage{background:var(--card);color:var(--text);border:1px solid var(--line);box-shadow:none;border-radius:var(--radius)}
#view .cq-stage::before{display:none}
#view .cq-stage-h small,#view .cq-stage-empty{color:var(--muted)}
#view .cq-stage-empty b{font-family:var(--font);font-weight:600;color:var(--text)}
#view .cq-mprize{background:var(--card-2);border:1px solid var(--line);border-radius:var(--r-md)}
#view .cq-mprize.s1{background:var(--brand-subtle);border-color:var(--brand-border)}
#view .cq-mprize.s1 small{color:var(--brand-text)}
#view .cq-mprize b{color:var(--text)}
#view .cq-pwho .cq-crown{filter:none}
#view .cq-pcol.p1 .cq-crown{animation:none}
#view .cq-pname{color:var(--text)}
#view .cq-plv{font-family:var(--font);letter-spacing:0;color:var(--muted)}
#view .cq-pamt,#view .cq-pcol.p1 .cq-pamt,#view .cq-hcard.big .cq-pamt{background:none;-webkit-text-fill-color:currentColor;color:var(--text);font-weight:600}
#view .cq-step{background:var(--card-2);border:1px solid var(--line);border-bottom:0}
#view .cq-pcol.p1 .cq-step{background:var(--brand-subtle);border-color:var(--brand-border)}
#view .cq-pcol.p1 .cq-step::before{background:var(--brand)}
#view .cq-pcol.p2 .cq-step::before{background:#aeb2b8}
#view .cq-pcol.p3 .cq-step::before{background:#a57c58}
#view .cq-num,#view .cq-pcol.p2 .cq-num,#view .cq-pcol.p3 .cq-num{font-family:var(--font);font-weight:600;background:none;-webkit-text-fill-color:currentColor;color:var(--text-2)}
#view .cq-pcol.p1 .cq-num{font-size:56px;color:var(--brand-text)}
#view .cq-step-prize{color:var(--muted)}
#view .cq-you{border-radius:var(--r-xs);background:var(--brand);color:var(--on-primary);letter-spacing:0;font-weight:600}
/* iniciais: círculo grafite com anel de metal fino */
#view .cq-av{background:var(--nav-3);color:#fff;box-shadow:none}
#view .cq-pwho .cq-av{box-shadow:0 0 0 3px var(--card),0 0 0 4px var(--line-2)}
#view .cq-av.m-gold{background:var(--nav-dark);box-shadow:0 0 0 3px var(--card),0 0 0 5px var(--brand)}
#view .cq-av.m-silver{box-shadow:0 0 0 3px var(--card),0 0 0 5px #aeb2b8}
#view .cq-av.m-bronze{box-shadow:0 0 0 3px var(--card),0 0 0 5px #a57c58}
#view .cq-pcol.me .cq-av{box-shadow:0 0 0 3px var(--card),0 0 0 5px var(--brand)}
/* linhas do ranking */
#view .cq-rows{border-radius:var(--radius)}
#view .cq-row.me{background:var(--brand-subtle);box-shadow:inset 3px 0 0 var(--brand)}
#view .cq-rbar i,[data-theme=dark] #view .cq-rbar i{background:var(--chart-2)}
#view .cq-row.me .cq-rbar i{background:var(--brand)}
#view .cq-pos{font-weight:600}
/* Hall da Fama: cabeçalho e campeão em cartão claro */
#view .cq-hcard{border-radius:var(--radius)}
#view .cq-hcard header,#view .cq-champ{background:var(--card);color:var(--text)}
#view .cq-hcard header{border-bottom:0}
#view .cq-hcard header .cq-k{color:var(--muted);text-transform:none}
#view .cq-hcard header small,#view .cq-hprize{color:var(--muted)}
#view .cq-champ{border-bottom:1px solid var(--line)}
#view .cq-champ .cq-crown{filter:none}
#view .cq-hcard.big .cq-hprize .cq-mp-img{box-shadow:inset 0 0 0 1px var(--line)}
#view .cq-goal,#view .cq-hprize{border-radius:var(--r-xs)}
#view .cq-goal.miss,#view .cq-hprize.miss{background:var(--tab);color:var(--muted)}
/* metas e notas do pódio (eram claras para o fundo escuro antigo) */
#view .cq-goal{background:var(--brand-light);color:var(--brand-text);font-weight:500}
#view .cq-goal.ok{background:var(--good-bg);color:var(--good)}
#view .cq-mprize em{color:var(--brand-text)}
#view .cq-goal-note{color:var(--muted)}
#view .cq-me{border:1px solid var(--line);box-shadow:none;border-radius:var(--radius)}
#view .cq-me-pos b,#view .cq-me-pos strong{background:none;-webkit-text-fill-color:currentColor;color:var(--text)}
/* lançamento do ranking (sem campeões ainda) */
#view .cq-launch{background:var(--card);color:var(--text);border:1px solid var(--line);box-shadow:none;border-radius:var(--radius)}
#view .cq-launch::before{display:none}

/* ---------- telas menores ---------- */
@media(max-width:1280px){.home-head .btn{display:none}}
@media(max-width:900px){
  :root{--top-h:56px;--side-gap:0px;--gap:8px}
  header.top{border-radius:14px;padding:0 8px}
  .side{top:calc(var(--top-h) + var(--gap) * 2);left:var(--gap);bottom:var(--gap);border-radius:14px;transform:translateX(calc(-100% - var(--gap) * 2))}
  .main{margin-left:0;padding-top:calc(var(--top-h) + var(--gap) * 2)}
  header.top{padding:0 10px;gap:6px}
  header.top .logo{width:auto;margin-right:4px}
  header.top .logo .lg-full{height:38px}
  #burger{color:#fff}
  .tb-search{color:#e5e5e8}
  .side{width:280px}
  .app.open .side{box-shadow:0 20px 50px rgba(11,11,12,.25)}
  .side-h{display:none}
  .main{margin-left:0}
  .page{padding:16px 16px 48px}
  .page-head h1{font-size:var(--fs-xl)}
  .home-head .sub{display:none}
}
@media(max-width:560px){
  .hstrip:not(.c4){grid-template-columns:repeat(2,minmax(0,1fr))}
  .hstrip:not(.c4) .hs:nth-child(n){border-left:1px solid var(--line);border-top:1px solid var(--line)}
  .hstrip:not(.c4) .hs:nth-child(odd){border-left:0}
  .hstrip:not(.c4) .hs:nth-child(-n+2){border-top:0}
}
@media(max-width:480px){
  header.top{gap:4px;padding:0 8px}
  header.top .logo .lg-full{display:none}header.top .logo .lg-mark{display:block}
  .tb-search{display:none!important}
  header.top .tb-lang{height:32px;padding:0 8px}
  .tb-balance>button{height:32px;padding:0 8px}
  .tb-bell .bell{width:32px;height:32px}
  .tb-user .av{width:28px;height:28px}
}
@media(max-width:560px){.hs-v,.hc-tot b{font-size:24px}}
.lead-cell i{background:color-mix(in srgb,var(--kpi-yellow) 16%,transparent)}

/* Modalidade da oferta (CPA × CPA Cash): pílula no estilo do "um país / dois países" do CashGo (01/11/2026) */
.omodel{margin:12px 0 4px}
.omodel-k{display:block;font-size:12.5px;font-weight:600;color:var(--muted);margin-bottom:6px}
.omodel-pill{display:inline-flex;gap:2px;padding:3px;border-radius:999px;background:var(--card-2,#f2f2f4);border:1px solid var(--line)}
.omodel-pill button{border:0;background:none;padding:6px 16px;border-radius:999px;font:inherit;font-size:13.5px;font-weight:600;color:var(--text-2);cursor:pointer;transition:background var(--t-fast),color var(--t-fast)}
.omodel-pill button.on{background:var(--brand);color:#0f0f0f;font-weight:800}
.omodel-pill button:focus-visible{outline:none;box-shadow:var(--focus)}
.omodel-h{margin:8px 0 0;font-size:13px;color:var(--muted)}
.omodel-h b{color:var(--brand-text);font-weight:800}
.tag.cash{background:color-mix(in srgb,var(--kpi-good) 14%,transparent);color:var(--kpi-good);font-weight:700}

/* Rastreamento (CashGo como rede, 31/10/2026) */
.cg-key{display:flex;gap:8px;align-items:center;margin:8px 0}
.cg-key code{flex:1;min-width:0;overflow-wrap:anywhere;padding:8px 10px;border:1px solid var(--brand-border);border-radius:var(--radius);background:var(--brand-subtle);font-size:13px}
.cg-warn{display:flex;gap:8px;align-items:flex-start;color:var(--warn);font-size:13px;margin:0 0 8px}.cg-warn .ico{flex:none;width:16px;height:16px}
.cg-test{margin:8px 0 0;font-size:13.5px}.cg-test.ok{color:var(--good)}.cg-test.bad{color:var(--bad)}
.cg-status,.cg-log{margin-top:16px}.cg-status h3,.cg-log h3{margin:0 0 10px}
.cg-log .cg-row{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:6px}
.cg-status .st{font-family:ui-monospace,Menlo,monospace;font-size:12.5px}
/* Tracker do CPA (11/11/2026): duas opções lado a lado; no celular, uma embaixo da outra */
.cg-tracker{margin-top:16px}.cg-tracker h3{margin:0}
.cg-tracker .cg-row{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:6px}
.cg-trks{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-top:12px}
.cg-trk{display:flex;gap:10px;align-items:flex-start;padding:14px 16px;border:1px solid var(--line);border-radius:var(--radius);cursor:pointer;background:transparent}
.cg-trk input{margin-top:3px;accent-color:var(--brand)}
.cg-trk b{display:block;margin-bottom:4px}.cg-trk small{display:block;color:var(--muted);font-size:13px;line-height:1.45}
.cg-trk.on{border-color:var(--brand);box-shadow:0 0 0 1px var(--brand) inset}
@media (max-width:720px){.cg-trks{grid-template-columns:1fr}}

/* celular: a barra do topo não pode passar da tela (o botão do usuário sumia); o título da página já diz a seção e o
   idioma fica só com a bandeira (02/11/2026) */
@media(max-width:900px){header.top .tb-sec{display:none}}
@media(max-width:480px){header.top .lsel .lsel-cc{display:none}header.top .lsel{padding:0 8px}}
@media(max-width:360px){header.top{gap:2px}.tb-balance>button{padding:0 8px}.tb-balance>button b{font-size:14px}}
/* 481 a 640px: a barra também passava da tela; fica só o K da logo e a bandeira do idioma, como no celular (03/11/2026) */
@media(max-width:640px){header.top .logo .lg-full{display:none}header.top .logo .lg-mark{display:block}header.top .lsel .lsel-cc{display:none}header.top .lsel{padding:0 8px}}

/* Prévia do catálogo no cadeado (dono, 10/11/2026, public/aff/plan.js → previewCards): pote genérico desenhado em CSS, cor de
   cada card pela matiz --gh, tudo borrado (nada identifica produto, nome ou número); só o cadeado e as bandeiras ficam nítidos. */
.offers .prod.ghost .prod-img{background:hsl(var(--gh) 45% 94%)}
.offers .prod.ghost .prod-img:before{content:'';position:absolute;z-index:-1;width:150px;height:150px;border-radius:50%;left:50%;top:50%;transform:translate(-50%,-52%);background:hsl(var(--gh) 45% 86%)}
.gjar{position:relative;z-index:1;width:74px;height:104px;border-radius:12px 12px 14px 14px;background:#f4f4f6;filter:blur(3.5px);opacity:.9;
  box-shadow:inset 0 34px 0 -2px hsl(var(--gh) 50% 42%),inset 0 -22px 0 0 hsl(var(--gh) 45% 70%)}
.gjar:before{content:'';position:absolute;left:12px;right:12px;top:-16px;height:18px;border-radius:5px 5px 2px 2px;background:#e6e6ea}
.offers .prod.ghost .prod-body{display:flex;flex-direction:column;gap:9px}
.gbar{display:block;height:11px;border-radius:6px;background:var(--line);filter:blur(2px)}
.gbar.big{height:22px;background:var(--line-2)}
.offers .prod.ghost .geos{filter:none}
.offers .prod.ghost .geo{cursor:default;opacity:.85}
.gstats{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.gstats span{height:46px;border-radius:var(--r-md);background:var(--card-2);border:1px solid var(--line);filter:blur(1.5px)}
.offers .prod.ghost .pg-foot{margin-top:4px}
.offers .prod.ghost .pg-foot .lockbtn{width:100%}
html.glass .offers .prod.ghost .prod-img{background:hsl(var(--gh) 25% 16%)}
html.glass .offers .prod.ghost .prod-img:before{background:hsl(var(--gh) 30% 24%)}