/* Темы. Всё оформление берётся из переменных, поэтому тема меняется атрибутом data-theme на <html>. */
:root,:root[data-theme=dark]{
  --ink:255,255,255; --bg:#050505; --fg:#f4f4f5; --mut:#9b9ba4; --dim:#63636c;
  --surf:#0a0a0a; --surf2:#0b0b0c; --surf3:#111; --hi:#fff; --hi2:#8d8d95; --btn:#f5f5f5; --btn-fg:#050505;
  --pos:#5be3a8; --neg:#ff7b7b; --amb:#f0b948; --solid:#0b0b0c; color-scheme:dark;
}
:root[data-theme=light]{
  --ink:0,0,0; --bg:#f3f3f1; --fg:#141417; --mut:#5b5b64; --dim:#8b8b94;
  --surf:#ffffff; --surf2:#ffffff; --surf3:#efefed; --hi:#0b0b0c; --hi2:#6b6b73; --btn:#141417; --btn-fg:#ffffff;
  --pos:#0f9d6a; --neg:#d23b3b; --amb:#b0741a; --solid:#ffffff; color-scheme:light;
}
:root[data-theme=midnight]{
  --ink:190,210,255; --bg:#050816; --fg:#e8eeff; --mut:#8e9bc2; --dim:#5a6690;
  --surf:#0a1024; --surf2:#0c1330; --surf3:#111a3d; --hi:#e3ebff; --hi2:#7285c4; --btn:#cfdcff; --btn-fg:#050816;
  --pos:#62e6b4; --neg:#ff8080; --amb:#f2c15a; --solid:#0c1330; color-scheme:dark;
}
:root[data-theme=emerald]{
  --ink:180,255,220; --bg:#04100b; --fg:#e9fff4; --mut:#86b5a1; --dim:#547c69;
  --surf:#08170f; --surf2:#0a1c13; --surf3:#0f2619; --hi:#e4fff2; --hi2:#5fae8a; --btn:#5be3a8; --btn-fg:#04100b;
  --pos:#7af0bd; --neg:#ff8d85; --amb:#efc25a; --solid:#0a1c13; color-scheme:dark;
}
:root[data-theme=sunset]{
  --ink:255,222,196; --bg:#120805; --fg:#fff2e8; --mut:#c3a290; --dim:#8c6f60;
  --surf:#1a0e0a; --surf2:#1f120d; --surf3:#2a1810; --hi:#fff0e2; --hi2:#c48c6a; --btn:#ffb877; --btn-fg:#1c0b04;
  --pos:#6fe0a8; --neg:#ff8274; --amb:#ffc267; --solid:#1f120d; color-scheme:dark;
}
:root[data-theme=paper]{
  --ink:70,45,15; --bg:#f2ece0; --fg:#2a2017; --mut:#74634e; --dim:#a29380;
  --surf:#fbf7ee; --surf2:#fffdf7; --surf3:#eee4d2; --hi:#2a2017; --hi2:#8c765b; --btn:#2a2017; --btn-fg:#fbf7ee;
  --pos:#2b8a58; --neg:#c24329; --amb:#a9721a; --solid:#fffdf7; color-scheme:light;
}
html{background:var(--bg)}
body{background:var(--bg);color:var(--fg)}
/* светлые темы: убираем тяжёлые тени и светящийся луч делаем мягче */
:root[data-theme=light] .beam::before,:root[data-theme=paper] .beam::before{box-shadow:0 0 14px 2px rgba(var(--ink),.18)}
:root[data-theme=light] .beam::after,:root[data-theme=paper] .beam::after{opacity:.35}
:root[data-theme=light] .panel,:root[data-theme=paper] .panel{box-shadow:0 10px 30px -20px rgba(var(--ink),.35)}
:root[data-theme=light] .dlg,:root[data-theme=paper] .dlg{box-shadow:0 30px 80px rgba(0,0,0,.25)}
:root[data-theme=light] #modal,:root[data-theme=paper] #modal{background:rgba(30,30,30,.45)}
:root[data-theme=light] body::before,:root[data-theme=paper] body::before{opacity:.5}
/* плотность */
:root[data-density=compact] body{font-size:13px}
:root[data-density=compact] .hero{padding-top:44px;padding-bottom:16px}
:root[data-density=compact] .hero.small{padding-top:34px}
:root[data-density=compact] .hero .big{font-size:clamp(34px,6vw,54px);margin:8px 0 6px}
:root[data-density=compact] .beam{display:none}
:root[data-density=compact] .item,:root[data-density=compact] .row,:root[data-density=compact] .erow{padding-block:7px}
:root[data-density=compact] td,:root[data-density=compact] th{padding-block:7px}
:root[data-density=compact] .kpi{padding:12px 14px 8px}.kpi .v{font-size:20px}
/* выбор темы */
.themes{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.tcard{border:1px solid var(--line);border-radius:14px;padding:8px;background:var(--panel);text-align:left;color:var(--fg);display:flex;flex-direction:column;gap:6px}
.tcard.on{border-color:var(--hi);box-shadow:0 0 0 1px var(--hi)}
.tcard .sw{height:46px;border-radius:9px;border:1px solid rgba(128,128,128,.35);position:relative;overflow:hidden}
.tcard .sw i{position:absolute;left:8px;right:8px;top:8px;height:5px;border-radius:3px}
.tcard .sw b{position:absolute;left:8px;bottom:8px;width:44%;height:9px;border-radius:4px}
.tcard span{font-size:13px;font-weight:500}
@media (max-width:520px){.themes{grid-template-columns:repeat(2,minmax(0,1fr))}}