/* La Belle Scens — tema claro/escuro (todo o site).
   Os tokens escuros abaixo são os mesmos do /planning e do /painel; entram aqui para as páginas
   que só declaravam o tema claro (comparativo, investimento, estudos, hero). O tema é decidido
   por /tema.js (escolha guardada em localStorage «lbs-tema»; sem escolha, segue o sistema).
   `html[data-theme]` e não `[data-theme]`: o :root de cada página vem DEPOIS deste arquivo e empataria. */
html[data-theme="dark"]{
  --bg:#16181a; --surface:#1d2022; --surface-2:#24282b; --surface-3:#2c3033;
  --ink:#ece9e3; --ink-strong:#fff; --soft:#9aa1a3; --soft-2:#7e8486;
  --line:rgba(236,233,227,.12); --line-strong:#3a4044; --on-dark:#16181a;
  --accent:#c4ac79; --accent-ink:#d8c498; --accent-soft:#2a2620;
  --success-soft:#1e2620; --warn-soft:#2a2418; --error-soft:#2a1d1d; --info-soft:#1d2330;
  color-scheme:dark;
}
html[data-theme="light"]{color-scheme:light}
[data-theme="dark"] body{background-image:none}

/* O botão de tema — UM padrão em todo o site: só contorno, sem fundo; ícone icon_shadelight.svg (do dono),
   16 px; 34 px de altura, canto 12 px. Vale para o flutuante e para os botões do painel e do DS (.theme-toggle). */
.lbs-tema,.theme-toggle[data-tema-toggle]{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:34px;min-width:34px;
  padding:0 8px;margin:0;border:1px solid var(--line-strong);border-radius:12px;background:transparent;color:var(--soft);
  box-shadow:none;cursor:pointer;font:500 12px/1 var(--sans);letter-spacing:.02em;transition:color .2s,border-color .2s;-webkit-tap-highlight-color:transparent}
.lbs-tema:hover,.theme-toggle[data-tema-toggle]:hover{color:var(--ink-strong);border-color:var(--ink);background:transparent}
.lbs-tema:focus-visible,.theme-toggle[data-tema-toggle]:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.lbs-tema--flutuante{position:fixed;top:14px;right:14px;z-index:99}
.lbs-tema-ico{display:inline-grid;place-items:center;width:16px;height:16px;line-height:0}
.lbs-tema-ico svg{width:16px;height:16px;display:block}
@media(max-width:640px){.lbs-tema--flutuante{top:10px;right:10px}}

/* overrides */
[data-theme="dark"] .pccol.us{background:linear-gradient(180deg,var(--accent-soft),var(--surface) 150px)}
[data-theme="dark"] .opt.eng{background:linear-gradient(180deg,var(--accent-soft),var(--surface) 120px)}
[data-theme="dark"] .reco{background:var(--surface-3)}
[data-theme="dark"] .reco .rt{color:var(--ink-strong)}
[data-theme="dark"] img.cannage,[data-theme="dark"] .cannage{opacity:.25}

/* Dentro da casca (/painel/): sem botão de tema próprio e sem «Voltar» — a barra lateral é a navegação. */
html.lbs-embutido [data-tema-toggle],html.lbs-embutido .lbs-tema--flutuante,html.lbs-embutido .back-home{display:none!important}
/* …nem o cabeçalho próprio das páginas de fluxo (marca + links) — a casca já tem a marca e a navegação. */
html.lbs-embutido .masthead{display:none!important}