/* Tema vidro do portal do afiliado (prints do dono de 02/11/2026): fundo grafite com uma luz verde bem fraca, superfícies
   translúcidas com linha fina e luz no alto, e o verde do site (do verde ao amarelo-limão, aprovado na prévia de 02/11/2026)
   no botão principal, no avatar do gerente, no gráfico e nas barras.
   Liga com a classe "glass" no <html> (/static/skin.js, antes de pintar) e troca pelo botão da lua/sol na barra do topo;
   sem ela vale o tema claro de sempre do system.css. Carregado depois do system.css, que continua como base de medidas,
   cantos e layout (os mesmos do tema claro): aqui só entram cores e superfícies.
   Desfoque real só na moldura (barra do topo e menu) e nas janelas: nos cartões o fundo atrás é liso, então ele não mudaria
   nada e pesaria na rolagem. */

/* ---------- tokens ---------- */
html.glass{
  color-scheme:dark;
  /* superfícies: branco quente em poucas camadas, sobre o fundo escuro */
  --g-fill:linear-gradient(180deg,rgba(255,255,255,.06) 0%,rgba(255,255,255,.03) 100%);--g-fill-2:rgba(255,244,228,.035);
  --g-edge:rgba(255,255,255,.09);--g-edge-2:rgba(255,255,255,.14);--g-edge-h:rgba(255,236,210,.26);--g-hi:inset 0 1px 0 rgba(255,244,228,.08);
  --g-drop:inset 0 1px 0 rgba(255,244,228,.07),0 1px 2px rgba(0,0,0,.35),0 12px 32px -16px rgba(0,0,0,.7);
  --g-drop-h:inset 0 1px 0 rgba(255,244,228,.1),0 2px 6px rgba(0,0,0,.35),0 24px 48px -20px rgba(0,0,0,.85);
  --g-pop:rgba(26,28,27,.85);--g-frame:rgba(22,24,23,.55);--g-solid:#171918;--g-side:rgba(24,26,25,.5);
  --g-soft:rgba(255,244,228,.05);--g-soft-h:rgba(255,244,228,.09);--g-sub:rgba(255,244,228,.035);--g-chip:rgba(255,244,228,.08);
  --g-field:rgba(0,0,0,.22);--g-field-f:rgba(0,0,0,.3);--g-field-in:inset 0 1px 2px rgba(0,0,0,.25);
  --g-row:rgba(255,236,210,.07);--g-row-h:rgba(255,244,228,.03);
  /* item ativo do menu: um degrau de superfície com a linha clara no alto */
  --g-pill:rgba(255,244,228,.09);--g-pill-edge:rgba(255,236,210,.16);--g-pill-drop:inset 0 1px 0 rgba(255,244,228,.12),0 1px 2px rgba(0,0,0,.3);
  --g-on-bg:rgba(255,244,228,.14);--g-on-drop:inset 0 1px 0 rgba(255,244,228,.12),0 1px 2px rgba(0,0,0,.35);
  --g-veil:rgba(8,6,4,.5);--g-scroll:rgba(255,236,210,.16);--g-sel:rgba(214,186,134,.28);
  --g-sk:rgba(255,244,228,.04);--g-sk-2:rgba(255,244,228,.09);
  --g-blur:blur(24px) saturate(140%);
  --g-base:#0c0d0d;
  --g-ambient:radial-gradient(75% 60% at 30% -10%,rgba(23,224,74,.10),transparent 70%),radial-gradient(55% 45% at 100% 0%,rgba(210,223,12,.06),transparent 70%),linear-gradient(170deg,#121413 0%,#0d0f0e 55%,#0b0c0c 100%);
  /* dourado da logo (latão fosco): botão principal, avatar do gerente, barras e destaque */
  /* verde do site: do verde ao amarelo-limão, com texto branco e uma luz verde fraca embaixo */
  --gold-1:#17e04a;--gold-2:#d2df0c;--gold-ink:#fff;
  --btn-fill:linear-gradient(90deg,#17e04a,#d2df0c);--btn-fill-h:linear-gradient(90deg,#2ee95c,#dde61f);
  --btn-drop:0 10px 24px -12px rgba(23,224,74,.55);
  --btn-drop-h:0 14px 28px -12px rgba(23,224,74,.7);
  /* estrutura (os nomes que o system.css usa) */
  --bg:#0c0d0d;--bg-2:rgba(255,244,228,.06);--card:rgba(255,244,228,.045);--card-2:rgba(255,244,228,.03);--tab:rgba(255,244,228,.06);
  --surface:var(--card);--surface-2:var(--card-2);--surface-3:var(--tab);--input:var(--g-field);
  --line:rgba(255,236,210,.09);--line-2:rgba(255,236,210,.15);--border:var(--line);--border-strong:var(--line-2);
  --text:#f3efe8;--text-2:#bdb6ab;--muted:#958e83;--muted-2:#8a8378;
  --hover:rgba(255,244,228,.05);--active:rgba(255,244,228,.07);
  --nav-dark:transparent;--nav-text:#f3efe8;--nav-muted:#958e83;
  --brand:#2fe35d;--brand-text:#4be872;--brand-hover:#4be872;--brand-pressed:#17c943;
  --brand-light:rgba(23,224,74,.14);--brand-subtle:rgba(23,224,74,.08);--brand-border:rgba(23,224,74,.5);--brand-focus:rgba(23,224,74,.3);
  --primary:#2fe35d;--primary-hover:#4be872;--on-primary:var(--gold-ink);
  --gold-text:var(--brand-text);--gold-grad:var(--btn-fill);--gold-grad-v:var(--btn-fill);
  --accent:#2fe35d;--accent-hi:#4be872;--accent-soft:rgba(23,224,74,.12);--border-accent:rgba(23,224,74,.4);
  --good:#4fd18b;--good-bg:rgba(79,209,139,.12);--bad:#ef5a5a;--bad-bg:rgba(239,90,90,.12);--crit:#ef5a5a;--crit-bg:rgba(239,90,90,.12);
  --warn:#e3b35c;--warn-bg:rgba(227,179,92,.12);--money:#4fd18b;--money-on-dark:#4fd18b;
  /* cores dos indicadores de Resultados, mais claras para o fundo escuro */
  --kpi-blue:#8fb0f0;--kpi-yellow:#f0cf6a;--kpi-orange:#f2a65e;--kpi-good:#4fd18b;--kpi-dark:#3fbf7a;--kpi-gold:#dcc08c;--kpi-bad:#ef6a6a;
  /* gráficos: verde na série atual, cinza tracejado no período anterior */
  --chart-1:#3fe36a;--chart-2:rgba(243,239,232,.32);--chart-grid:rgba(255,236,210,.06);--chart-label:#8a8378;
  --shadow:0 4px 12px rgba(0,0,0,.35),0 24px 64px -16px rgba(0,0,0,.75);
  --lift:none;
  --focus:0 0 0 3px var(--brand-focus);
  --ease:cubic-bezier(.22,1,.36,1);
}

/* ---------- base ---------- */
html.glass{background:var(--g-base);scrollbar-color:var(--g-scroll) transparent}
html.glass body{background:transparent;color:var(--text);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
html.glass body:before{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;background:var(--g-ambient)}
html.glass ::selection{background:var(--g-sel)}
html.glass .muted,html.glass .sub,html.glass small{color:var(--muted)}

/* ---------- superfícies grandes: vidro com linha fina e sombra em camadas ---------- */
html.glass :is(.card,.hstrip .hs,.kpi,.tbl,.chart-card,.live-panel,.prod,.mo-list,.spot-main,.spot-side,.cg-hero,.cg-conn,.cg-note,.cg-linkfmt,.funnel,.pending,.mn-result),
html.glass #view :is(.cq-hero,.cq-tcard,.cq-claim,.cq-badge,.cq-stage,.cq-launch,.cq-me,.cq-hcard,.cq-rows,.kpt-card,.kbn-card,.kbn-navy,.kbn-light){
  background:var(--g-fill)!important;border:1px solid var(--g-edge)!important;box-shadow:var(--g-drop)!important}
/* vidro dentro de vidro: mais leve, sem sombra */
html.glass :is(.card,.live-panel,.tbl) :is(.card,.hs,.kpi),html.glass .live-panel>.hstrip .hs{background:var(--g-fill-2)!important;box-shadow:none!important}
html.glass .hstrip,html.glass .card.hstrip{background:none!important;border:0!important;box-shadow:none!important}
html.glass :is(.card-2,.sim-big,.cg-flow li,.cq-next,.kpt-conn,.cq-claim-item,.cq-mprize,.cq-step){background:var(--g-sub)!important;border-color:var(--g-edge)!important}
/* indicador escolhido (a receita no Início): linha dourada */
html.glass .hstrip .hs.on,html.glass .kpi.lead{border-color:var(--brand-border)!important;box-shadow:var(--g-drop),inset 0 0 0 1px rgba(23,224,74,.25)!important}
html.glass :is(.prod,button.hs,.kbn-card,a.card){transition:transform .24s var(--ease),box-shadow .24s var(--ease),border-color .16s var(--ease)}
@media(hover:hover){
  html.glass :is(.prod,a.card,.kbn-card,button.hs):hover{transform:translateY(-2px);border-color:var(--g-edge-h)!important;box-shadow:var(--g-drop-h)!important}
  html.glass .hstrip .hs.on:hover{border-color:var(--brand-border)!important}
}
/* peças sobre imagem ou mapa: vidro denso e desfoque */
html.glass :is(.favbtn,.pc-cc,.ord-x,.wm-views,.wm-legend,.wm-metric){background:var(--g-pop)!important;-webkit-backdrop-filter:var(--g-blur);backdrop-filter:var(--g-blur)}
/* o que fica grudado na rolagem precisa de fundo sólido */
html.glass :is(.rt td:first-child,.rt th:first-child,.af-table th,.mn-dlist th,.mn-dfoot,.mn-batch){background:var(--g-solid)!important}
html.glass .offers .prod-img,html.glass .prod-img{background:none}

/* ---------- moldura: barra do topo e menu lateral, soltos e com cantos arredondados ---------- */
html.glass header.top{border:1px solid var(--g-edge);box-shadow:var(--g-drop);color:var(--text)}
html.glass header.top:before{display:none}
/* o vidro fica numa camada atrás da barra: o desfoque no próprio elemento prenderia os menus fixos dentro dela */
html.glass header.top:after{background:var(--g-frame);-webkit-backdrop-filter:var(--g-blur);backdrop-filter:var(--g-blur)}
html.glass .side{background:var(--g-side)!important;border:1px solid var(--g-edge)!important;box-shadow:var(--g-drop)!important;
  -webkit-backdrop-filter:var(--g-blur);backdrop-filter:var(--g-blur)}
/* grupos do menu: rótulo em maiúsculas espaçadas, como no print */
html.glass :is(.nav-h,.navlabel){font-size:11.5px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--muted-2)}
html.glass .side nav a{border:1px solid transparent;color:var(--text-2)}
html.glass .side nav a :is(.ico,svg){color:var(--text-2)}
html.glass .side nav a:hover{background:var(--hover);color:var(--text)}
html.glass .side nav a.on{background:var(--g-pill);border-color:var(--g-pill-edge);color:var(--text);font-weight:600;box-shadow:var(--g-pill-drop)}
html.glass .side nav a.on :is(.ico,svg){color:var(--text)}
html.glass .side nav a .badge{background:var(--g-chip);color:var(--text-2)}
html.glass .side-collapse{border-color:var(--g-edge-2);color:var(--muted);background:var(--g-soft)}
/* cartão "Indique e cresça": vidro limpo, sem sombra nem faixa escura em volta */
html.glass .side-card{background:none!important;box-shadow:none!important}
html.glass .side-card a{background:linear-gradient(180deg,rgba(255,244,228,.075) 0%,rgba(255,244,228,.045) 100%)!important;border:1px solid var(--g-edge-2)!important;
  box-shadow:inset 0 1px 0 rgba(255,244,228,.08)!important;-webkit-backdrop-filter:none;backdrop-filter:none}
html.glass .side-card a:hover{border-color:var(--g-edge-h)!important;transform:none}
html.glass .side-card span{color:var(--text-2)}
html.glass :is(.side-card i,.side-card .go,.sc-go){background:var(--btn-fill);color:var(--gold-ink)}
html.glass .side-foot,html.glass .side small{color:var(--muted)}
/* itens da barra do topo: pílulas de vidro */
html.glass header.top :is(.tb-lang,.tb-balance>button){background:var(--g-soft);border:1px solid var(--g-edge-2);box-shadow:none;color:var(--text)}
html.glass header.top :is(.tb-lang,.tb-balance>button):hover{background:var(--g-soft-h);border-color:var(--g-edge-h)}
html.glass header.top :is(.tb-manager small,.tb-balance .ico,.tb-lang svg,.lsel-cc){color:var(--muted)}
html.glass .lsel .lsel-flag{box-shadow:0 0 0 1px rgba(255,255,255,.12)}
html.glass header.top .tb-balance b{color:var(--money)}
html.glass .tb-manager .av{background:var(--btn-fill);color:var(--gold-ink);box-shadow:inset 0 1px 0 rgba(255,255,255,.18)}
html.glass .tb-user .av{background:rgba(255,244,228,.1);color:var(--text)}
html.glass .tb-help{border-color:var(--g-edge-2);color:var(--text-2)}
html.glass .tb-bell .bell em{background:#e5534b;color:#fff;box-shadow:0 0 0 2px #1a1612}

/* ---------- títulos e números ---------- */
html.glass :is(.page-head h1,.head h1,main h1,h2){color:var(--text)}
html.glass :is(.hs-k,.kpi .label,.hc-k){color:var(--text-2)}
/* número neutro no Início; nas outras telas segue a cor do indicador (tn-*) */
html.glass :is(.hs-v,.hc-tot b):not([class*="tn-"]){color:var(--text)}
html.glass :is(.hs-v,.hc-tot b).pos{color:var(--money)}

/* ---------- botões: vidro com linha fina; o principal é o dourado da logo ---------- */
html.glass .btn{background:var(--g-soft);border:1px solid var(--g-edge-2);color:var(--text);box-shadow:var(--g-hi);
  transition:background-color .16s var(--ease),border-color .16s var(--ease),box-shadow .2s var(--ease),transform .16s var(--ease)}
html.glass .btn:hover{background:var(--g-soft-h);border-color:var(--g-edge-h)}
html.glass .btn:active{transform:scale(.98)}
html.glass :is(.btn.primary,.btn.gold,.cg-btn,.cq-gold,.kbn-cta,.kpt-cta,.kpt-btn.primary),html.glass #view :is(.cq-gold,.kbn-cta,.kpt-cta){
  background:var(--btn-fill)!important;border:1px solid transparent!important;color:var(--gold-ink)!important;font-weight:600;
  box-shadow:var(--btn-drop)!important;background-origin:border-box!important}
html.glass :is(.btn.primary,.btn.gold,.cg-btn):hover,html.glass #view .cq-gold:hover{background:var(--btn-fill-h)!important;box-shadow:var(--btn-drop-h)!important;transform:translateY(-1px)}
html.glass .btn.danger{color:var(--bad);border-color:color-mix(in srgb,var(--bad) 35%,transparent)}
html.glass .btn.ghost,html.glass .btn.ghostw{background:transparent;box-shadow:none}
html.glass .btn.link{background:none;border:0;box-shadow:none;color:var(--brand-text)}
html.glass :is(.iconbtn,.favbtn,.morebtn,.cq-ghost){background:var(--g-soft);border-color:var(--g-edge-2);color:var(--text-2)}
html.glass a{color:inherit}
html.glass .hc-head a,html.glass .sec-head a,html.glass a.more{color:var(--brand-text)}

/* ---------- campos ---------- */
html.glass :where(input:not([type=checkbox]):not([type=radio]):not([type=color]):not([type=range]),select,textarea,.in,.bigsearch,.dp-btn){
  background-color:var(--g-field)!important;border:1px solid var(--g-edge-2)!important;color:var(--text)!important;box-shadow:var(--g-field-in)}
html.glass .dp-btn,html.glass .dp.dpp .dp-btn{background:var(--g-soft)!important;box-shadow:var(--g-hi)!important}
html.glass :is(.af-search,.ck-search){background:var(--g-field)!important;border:1px solid var(--g-edge-2)!important}
/* seletor de idioma: a pílula é a moldura; o <select> de dentro fica sem caixa própria */
html.glass .tb-lang select,html.glass .tb-lang select:is(:hover,:focus){background:transparent!important;border:0!important;box-shadow:none!important;border-radius:0!important}
html.glass :is(.bigsearch,.af-search,.ck-search) input,html.glass :is(.bigsearch,.af-search,.ck-search) input:focus{background:transparent!important;border:0!important;box-shadow:none!important}
html.glass :where(input,select,textarea):hover{border-color:var(--g-edge-h)!important}
html.glass :where(input,select,textarea):focus,html.glass .bigsearch:focus-within{border-color:var(--brand-border)!important;box-shadow:var(--g-field-in),var(--focus)!important;background-color:var(--g-field-f)!important}
html.glass ::placeholder{color:var(--muted)}
html.glass option,html.glass optgroup{background:#221d18;color:var(--text)}
html.glass input[type=checkbox],html.glass input[type=radio],html.glass input[type=range]{accent-color:var(--brand)}

/* ---------- seletores, abas, etiquetas ---------- */
html.glass .seg{background:var(--g-field);border:1px solid var(--g-edge-2)}
html.glass .seg button{color:var(--muted);background:none}
html.glass .seg button:hover{color:var(--text)}
html.glass .seg button.on{background:var(--g-on-bg);color:var(--text);box-shadow:var(--g-on-drop)}
html.glass .omodel-pill{background:var(--g-field);border-color:var(--g-edge-2)}
html.glass .omodel-pill button.on{background:var(--btn-fill);color:var(--gold-ink)}
html.glass :is(.tabs,.page-tabs){border-bottom-color:var(--g-edge-2)}
html.glass :is(.tabs button,.page-tabs a){color:var(--muted)}
html.glass :is(.tabs button,.page-tabs a):hover{color:var(--text)}
html.glass :is(.tabs button.on,.page-tabs a.on){color:var(--text);border-bottom-color:var(--brand)}
html.glass :is(.pill,.tag,.cq-chip,.kpt-status,.kpt-badge,.geo){border:1px solid var(--g-chip)}
html.glass .chips-row .f.inline{border-color:var(--g-edge-2);background:var(--g-sub)}
html.glass .prod-badges .tag,html.glass .prod-badges .tag:is(.hot,.fire,.new){background:var(--g-pop);color:var(--text);border:1px solid var(--g-edge);box-shadow:none}

/* ---------- Início: top produtos e ao vivo ---------- */
html.glass .tp+.tp,html.glass .tp{border-color:var(--g-row)}
html.glass .tp:after{background:linear-gradient(90deg,#17e04a,rgba(210,223,12,.5))}
html.glass .tp-img,html.glass .tp .pimg{background:rgba(255,244,228,.05);border-color:var(--g-edge)}
html.glass .tp-n,html.glass .tp-v small{color:var(--muted)}
html.glass .live-dot{background:var(--good);box-shadow:0 0 0 4px rgba(79,209,139,.16)}
html.glass .lead-cell i{background:rgba(240,207,106,.14)}

/* ---------- tabelas ---------- */
html.glass table th,html.glass table.t th{background:transparent!important;color:var(--muted);border-bottom:1px solid var(--g-edge-2)!important}
html.glass table td{border-color:var(--g-row)!important}
html.glass :is(tbody tr,table.t tr):hover td{background:var(--g-row-h)!important}
html.glass .rt tr:hover td:first-child{background:var(--g-solid)!important}
html.glass table.t tr.total td{background:var(--g-sub)!important}

/* ---------- gráficos ---------- */
html.glass svg.chart .dot{fill:#1a1612}
html.glass .chart-tip,html.glass .chart-tip.compact{background:var(--g-pop)!important;border:1px solid var(--g-edge-2)!important;color:var(--text);box-shadow:var(--shadow);-webkit-backdrop-filter:var(--g-blur);backdrop-filter:var(--g-blur)}

/* ---------- janelas, menus, avisos ---------- */
html.glass :is(.menu,.dp-pop,.modal,.bellpanel,.xsel-pop,.qk,.drawer>*,.ord-drawer){
  background:var(--g-pop)!important;border:1px solid var(--g-edge-2)!important;color:var(--text);box-shadow:var(--g-hi),var(--shadow)!important;
  -webkit-backdrop-filter:var(--g-blur);backdrop-filter:var(--g-blur)}
html.glass :is(.modal-bg,.drawer,.qk-bg){background:var(--g-veil)!important;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
html.glass :is(.modal-h,.modal-f){border-color:var(--g-edge-2)!important;background:transparent!important}
html.glass :is(.menu a,.menu button,.xsel-pop button){color:var(--text)}
html.glass :is(.menu a:hover,.menu button:hover){background:var(--g-soft-h)}
html.glass .menu hr{border-color:var(--g-edge-2)}
html.glass :is(.bal-main){background:var(--g-sub);border-color:var(--g-edge)}
html.glass :is(.toast,.tip){background:var(--g-pop)!important;color:var(--text);border:1px solid var(--g-edge-2);box-shadow:var(--shadow);
  -webkit-backdrop-filter:var(--g-blur);backdrop-filter:var(--g-blur)}
html.glass .toast{border-left:3px solid var(--brand)}
html.glass .toast.err{border-left-color:var(--bad)}
html.glass .scrim{background:var(--g-veil);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
html.glass :is(.sk,.skel,.skeleton){background:linear-gradient(90deg,var(--g-sk),var(--g-sk-2),var(--g-sk));background-size:200% 100%}

/* ---------- entrada da tela: os blocos sobem e aparecem em sequência curta ---------- */
@keyframes gl-in{from{opacity:0;transform:translateY(8px)}}
html.glass #view>.page>*{animation:gl-in .42s var(--ease) backwards}
html.glass #view>.page>:nth-child(2){animation-delay:.04s}
html.glass #view>.page>:nth-child(3){animation-delay:.08s}
html.glass #view>.page>:nth-child(n+4){animation-delay:.12s}

/* ---------- botão de tema na barra do topo: lua no claro (vai para o escuro), sol no escuro ---------- */
.tb-theme svg{width:20px!important;height:20px!important}
.tb-theme .i-sun,html.glass .tb-theme .i-moon{display:none}
html.glass .tb-theme .i-sun{display:block}
html.glass .tb-icon{color:var(--text-2)}
html.glass .tb-icon:hover{background:var(--g-soft-h);color:var(--text)}
/* no celular a barra não tem espaço: o tema vai para o menu do usuário */
.menu .m-theme{display:none}
@media(max-width:900px){header.top .tb-theme{display:none}.menu .m-theme{display:flex}}

@media(max-width:900px){
  html.glass{--g-blur:blur(14px) saturate(130%)}
  html.glass #view>.page>*{animation:none}
}
html.glass :is(a,button,[tabindex],summary):focus-visible{outline:2px solid var(--brand);outline-offset:2px}
@media(prefers-reduced-motion:reduce){
  html.glass *,html.glass *:before,html.glass *:after{animation-duration:.01ms!important;animation-delay:0s!important;transition-duration:.01ms!important}
}
/* navegador sem desfoque: vidro mais opaco, para não perder a leitura */
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  html.glass header.top:after,html.glass .side,html.glass :is(.menu,.dp-pop,.modal,.bellpanel,.xsel-pop,.qk,.toast,.tip,.chart-tip){background:var(--g-solid)!important}
}