/* Ciemny motyw strony publicznej — włączany ikonką w nagłówku (html[data-theme=dark]).
   Osobny plik, bo site.css ma budżet rozmiaru pilnowany testem. Domyślnie strona
   zostaje jasna; wybór dzieli klucz `pf_theme2` z portalem tradera, więc kto ma
   ciemny portal, ma i ciemną stronę. Certyfikat (cert.css) celowo zostaje „papierem". */

/* przełącznik w nagłówku */
.theme-tog{width:38px;height:38px;flex:none;display:grid;place-items:center;border-radius:50%;
  color:var(--muted);background:transparent;border:0;cursor:pointer;
  transition:background .2s,color .2s,transform .4s var(--sm-spring,ease)}
.theme-tog:hover{background:var(--bg3);color:var(--txt)}
.theme-tog:active{transform:scale(.9)}
.theme-tog svg{width:19px;height:19px}
.theme-tog .i-sun{display:none}
html[data-theme=dark] .theme-tog .i-sun{display:block}
html[data-theme=dark] .theme-tog .i-moon{display:none}

html[data-theme=dark]{
  color-scheme:dark;
  --bg:#0b0d12; --bg2:#0e1117; --bg3:#161b26;
  --panel:#12151c; --panel2:#171b24;
  --line:rgba(255,255,255,.08); --line2:rgba(255,255,255,.14);
  --txt:#e8ecf5; --muted:#a3acbf; --dim:#7e889c;
  --acc:#7d87f8; --acc2:#a78bfa; --acc-soft:#7d87f8; --acc-bg:rgba(99,102,241,.18);
  --green:#34d399; --green2:#34d399; --red:#f87171; --gold:#fbbf24;
  --shadow:0 1px 2px rgba(0,0,0,.35),0 10px 30px -18px rgba(0,0,0,.6);
  --shadow-lg:0 30px 70px -30px rgba(0,0,0,.7),0 2px 6px rgba(0,0,0,.35);
  --sm-hair:rgba(255,255,255,.1);
}
html[data-theme=dark] body{background:var(--bg);color:var(--txt)}
/* powierzchnie, które w site.css mają wpisaną biel zamiast tokenu */
html[data-theme=dark] :is(.btn-ghost,.cfg,.cfg-size,.cfg-chip,.mock,.stats-band,.verify-box input,footer,.verify-result){
  background:var(--panel)}
html[data-theme=dark] .cfg-size.on{background:linear-gradient(var(--panel),var(--panel)) padding-box,var(--grad) border-box}
html[data-theme=dark] .obj-scroll{background:
  linear-gradient(90deg,var(--panel) 30%,rgba(18,21,28,0)) left/44px 100% no-repeat local,
  linear-gradient(270deg,var(--panel) 30%,rgba(18,21,28,0)) right/44px 100% no-repeat local,
  radial-gradient(farthest-side at 0 50%,rgba(0,0,0,.45),transparent) left/16px 100% no-repeat scroll,
  radial-gradient(farthest-side at 100% 50%,rgba(0,0,0,.45),transparent) right/16px 100% no-repeat scroll}
/* szkło nagłówka i menu na ciemnym tle */
html[data-theme=dark] .nav.on{background:rgba(11,13,18,.72)}
html[data-theme=dark] .mobile-menu{background:rgba(14,17,23,.86)}
html[data-theme=dark] .faq details[open]{border-color:rgba(125,135,248,.35)}
html[data-theme=dark] .card:hover,html[data-theme=dark] .fork-card:hover{
  box-shadow:0 22px 44px -26px rgba(0,0,0,.7),0 2px 6px rgba(0,0,0,.35)}
html[data-theme=dark] ::selection{background:rgba(125,135,248,.35)}
/* zmiana motywu: przenikanie całej strony */
::view-transition-old(root),::view-transition-new(root){animation-duration:.4s}
/* reszta wpisanych jasnych wartości z site.css: pasek afiliacji (gradient,
   którego pierwsze sprawdzenie nie złapało, bo to background-image), obwódki
   pigułek i ikon, płótno makiety, najechanie w tabeli celów */
html[data-theme=dark] .aff-band{background:linear-gradient(120deg,rgba(99,102,241,.16),rgba(139,92,246,.12)),var(--panel);
  border-color:rgba(125,135,248,.3)}
html[data-theme=dark] :is(.pill,.pcfg-addbtn,.fork-n,.why-ic,.notice){border-color:rgba(125,135,248,.3)}
html[data-theme=dark] .pill{color:#a5b4fc}
html[data-theme=dark] .mock canvas{background:var(--panel2)}
html[data-theme=dark] table.obj tr:hover td{background:rgba(255,255,255,.03)}