/* Облик D «Пульт» (слоновая кость + киноварь) — слой для страниц беты сайта.

   Что это: перенос утверждённого владельцем макета design-variants/variants/
   d-ivory-vermilion/home.css. Палитра (--ds-*) обеих тем, светлые табло, иконки,
   метка беты и логотипы — здесь; базовые стили — в mm-ds.css, он не меняется.

   Решение владельца 14.10: новый облик — в бете Magic Master. Основной сайт
   остаётся янтарным: этот файл на нём не подключается.

   Как подключается: app/site_beta.py, inject_d2_layer(html, "site") — при
   отдаче беты MM (/beta/…), только если product_info()["product"] == "Magic Master".
   Echoteka (контур eu) и brands/* эти стили не получают.

   Логотип: вместо фильтра hue-rotate — подмена картинки (тёмная/светлая
   рыжие версии mm-logo-lockup-v-*.png), поэтому фильтр для логотипа убран.
*/
:root{--ds-bg:#141312;--ds-surface:#1d1b19;--ds-surface-2:#262321;--ds-line:#302c29;--ds-line-strong:#47413c;
--ds-text:#f3ece2;--ds-soft:#b8ada0;--ds-dim:#998f82;--ds-acc:#ff7a52;--ds-cta:#e52900;--ds-cta-hover:#c92400;--ds-on-cta:#ffffff;
--ds-ok:#3ddc84;--ds-warn:#ffb020;--ds-bad:#ff6b5e;--ds-wash:rgba(255,90,54,.12);--ds-acc-line:rgba(255,90,54,.5);--ds-focus:#ff7a52;
--ds-lcd:#0b0a09;--ds-lcd-line:#2a2623;--ds-lcd-dim:#857b70;--ds-key:#262321;--ds-key-on:#f3ece2;--ds-key-on-text:#141312;
--ds-key-shadow:0 2px 0 #0a0908;--ds-screw:#3a3531;--ds-cta-shadow:0 3px 0 #b43a1d;--ds-unit-shadow:0 30px 80px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,255,255,.05);--ds-inset-shadow:inset 0 2px 10px rgba(0,0,0,.7);
--ds-meter-ok:#3ddc84;--ds-meter-hot:#ffb020;--ds-meter-peak:#ff5a36;
--ai:#ff9a7a;--ai-wash:rgba(255,90,54,.10);--ai-line:rgba(255,122,82,.45);}
html.theme-light,html[data-theme="light"]{--ds-bg:#f4efe6;--ds-surface:#fffcf6;--ds-surface-2:#f8f3ea;--ds-line:#e3dacb;--ds-line-strong:#c9bca7;
--ds-text:#191512;--ds-soft:#554c42;--ds-dim:#665c50;--ds-acc:#b7300f;--ds-cta:#e52900;--ds-cta-hover:#c92400;--ds-on-cta:#ffffff;
--ds-ok:#1b6e3f;--ds-warn:#8a4b00;--ds-bad:#b3261e;--ds-wash:#ffe3d8;--ds-acc-line:#d9542f;--ds-focus:#b7300f;
--ds-lcd:#efe6d7;--ds-lcd-line:#ddcfba;--ds-lcd-dim:#75695b;--ds-key:#fffdf9;--ds-key-on:#191512;--ds-key-on-text:#fffcf6;
--ds-key-shadow:0 2px 0 #ddd2c0;--ds-screw:#d3c7b4;--ds-cta-shadow:0 3px 0 #b43a1d;--ds-unit-shadow:inset 0 1px 0 #fff, 0 24px 50px rgba(70,45,20,.12), 0 2px 0 #ddd2c0;--ds-inset-shadow:inset 0 2px 6px rgba(70,45,20,.15);
--ds-meter-ok:#2e9b5a;--ds-meter-hot:#c25e00;--ds-meter-peak:#e5381a;
--ai:#b7300f;--ai-wash:rgba(255,90,54,.07);--ai-line:rgba(183,48,15,.35);}
.ds-logo-dark{content:url(/icons/mm-logo-lockup-v-dark.png?v=2)}
.ds-logo-light{content:url(/icons/mm-logo-lockup-v-light.png?v=2)}
.ds-beta-badge{color:var(--ds-acc)}.ds-beta-badge::before{background:var(--ds-cta);box-shadow:0 0 8px var(--ds-cta)}
.beta-tag::before{background:var(--cta)!important}
.ds-newcard > img:first-child{filter:grayscale(1) brightness(1.5) sepia(1) saturate(6) hue-rotate(-32deg)}
:is(html.theme-light,html[data-theme="light"]) .ds-newcard > img:first-child{background:transparent!important;padding:0!important;filter:brightness(0) invert(22%) sepia(90%) saturate(3500%) hue-rotate(2deg) brightness(88%)}
.ds-ico,body.ds-home .feat-ico,body.ds-home .step-icon,.ds-newcard > svg:first-child,body.ds-home .testi-avatar,.ds-page .step-num{color:var(--ds-acc)!important}
:is(html.theme-light,html[data-theme="light"]) .ds-ico,:is(html.theme-light,html[data-theme="light"]) body.ds-home .feat-ico,:is(html.theme-light,html[data-theme="light"]) body.ds-home .step-icon,:is(html.theme-light,html[data-theme="light"]) .ds-newcard > svg:first-child{background:#ffe9e1!important;box-shadow:inset 0 0 0 1px #ffc9b8}
:is(html.theme-light,html[data-theme="light"]) .ds-meter i{background:#e0d3bf}
:is(html.theme-light,html[data-theme="light"]) .ds-lcd,:is(html.theme-light,html[data-theme="light"]) .ds-pult__lcd{box-shadow:inset 0 2px 5px rgba(70,45,20,.14),inset 0 0 0 1px #ddcfba}
:is(html.theme-light,html[data-theme="light"]) .ds-lcd__v,:is(html.theme-light,html[data-theme="light"]) .ds-lcd__v--ok,:is(html.theme-light,html[data-theme="light"]) body.ds-home .stats-bar .stat-val{text-shadow:none}


/* ═══════════ Приборы инструментов (/beta/tools/*) — светлая тема ═══════════
   tools.css держит экран прибора тёмным ради «люминофора» (токены --glass,
   --grid, --phos…). В светлой теме табло становится светлым, как утопленный
   дисплей макета: тот же --ds-lcd, цифры — киноварь/текст, сигналы — читаемые
   тона. Тёмная тема этим блоком не затрагивается. Токены переопределяются на
   html (как и у tools.css), иначе var() в его объявлениях не увидит новых значений. */
:is(html.theme-light,html[data-theme="light"]){
  --glass:#efe6d7;--glass-2:#f7f1e6;--grid:#e2d6c3;
  --phos:#b7300f;--phos-dim:#665c50;--glass-ink:#191512;
  --led-g:#1b6e3f;--led-a:#8a4b00;--led-r:#b3261e;
  --brush:repeating-linear-gradient(90deg,rgba(25,21,18,.02) 0 1px,transparent 1px 3px);
}
:is(html.theme-light,html[data-theme="light"]) .screen,
:is(html.theme-light,html[data-theme="light"]) .vd,
:is(html.theme-light,html[data-theme="light"]) .ro-grid,
:is(html.theme-light,html[data-theme="light"]) .meter,
:is(html.theme-light,html[data-theme="light"]) table,
:is(html.theme-light,html[data-theme="light"]) .squares,
:is(html.theme-light,html[data-theme="light"]) .drop{
  box-shadow:inset 0 2px 6px rgba(70,45,20,.16),inset 0 0 0 1px #d6c8b1,0 0 0 1px rgba(255,255,255,.8);
}
:is(html.theme-light,html[data-theme="light"]) .vd-ok{box-shadow:inset 0 2px 6px rgba(70,45,20,.12),inset 3px 0 0 var(--led-g),inset 0 0 0 1px #d6c8b1,0 0 0 1px rgba(255,255,255,.8)}
:is(html.theme-light,html[data-theme="light"]) .vd-warn{box-shadow:inset 0 2px 6px rgba(70,45,20,.12),inset 3px 0 0 #c25e00,inset 0 0 0 1px #d6c8b1,0 0 0 1px rgba(255,255,255,.8)}
:is(html.theme-light,html[data-theme="light"]) .vd-bad{box-shadow:inset 0 2px 6px rgba(70,45,20,.12),inset 3px 0 0 #e5381a,inset 0 0 0 1px #d6c8b1,0 0 0 1px rgba(255,255,255,.8)}
:is(html.theme-light,html[data-theme="light"]) .vd-mark{
  background:radial-gradient(circle at 38% 32%,#ffffff,#e6dccb 72%);
  box-shadow:inset 0 0 0 1px #d6c8b1,inset 0 2px 4px rgba(70,45,20,.15);
}
:is(html.theme-light,html[data-theme="light"]) .ro-val,
:is(html.theme-light,html[data-theme="light"]) .ro-ok .ro-val,
:is(html.theme-light,html[data-theme="light"]) .ro-warn .ro-val,
:is(html.theme-light,html[data-theme="light"]) .ro-bad .ro-val{text-shadow:none}
:is(html.theme-light,html[data-theme="light"]) .ro-val{color:var(--ds-text)}
:is(html.theme-light,html[data-theme="light"]) .ro-ok .ro-val{color:var(--led-g)}
:is(html.theme-light,html[data-theme="light"]) .ro-warn .ro-val{color:var(--led-a)}
:is(html.theme-light,html[data-theme="light"]) .ro-bad .ro-val{color:var(--led-r)}
:is(html.theme-light,html[data-theme="light"]) .meter-track{background:rgba(70,45,20,.08);box-shadow:inset 0 1px 3px rgba(70,45,20,.2)}
:is(html.theme-light,html[data-theme="light"]) .meter-span.meter-ok{background:linear-gradient(180deg,#3fae6f,#1b6e3f)}
:is(html.theme-light,html[data-theme="light"]) .meter-span.meter-warn{background:linear-gradient(180deg,#e08a2e,#a85200)}
:is(html.theme-light,html[data-theme="light"]) .meter-span.meter-bad{background:linear-gradient(180deg,#f0604f,#b3261e)}
:is(html.theme-light,html[data-theme="light"]) .meter-target{background:var(--ds-text);box-shadow:none}
:is(html.theme-light,html[data-theme="light"]) .meter-you{background:var(--ds-text);box-shadow:0 0 0 1px #fffcf6}
:is(html.theme-light,html[data-theme="light"]) th{background:rgba(70,45,20,.06)}
:is(html.theme-light,html[data-theme="light"]) td.pen{color:var(--phos)}
:is(html.theme-light,html[data-theme="light"]) .drop:hover,
:is(html.theme-light,html[data-theme="light"]) .drop.over{
  box-shadow:inset 0 2px 6px rgba(70,45,20,.16),inset 0 0 0 1px #d6c8b1,0 0 0 1px rgba(183,48,15,.45),0 0 22px rgba(255,90,54,.16);
}
:is(html.theme-light,html[data-theme="light"]) .drop::after{border-color:rgba(183,48,15,.42)}
:is(html.theme-light,html[data-theme="light"]) .drop:hover::after,
:is(html.theme-light,html[data-theme="light"]) .drop.over::after{border-color:var(--ds-acc)}
:is(html.theme-light,html[data-theme="light"]) .drop .slot::before{border-color:var(--ds-acc)}
:is(html.theme-light,html[data-theme="light"]) .drop .slot::after{
  background:#d6c8b1;
  box-shadow:inset 0 2px 4px rgba(70,45,20,.35),0 0 0 1px rgba(183,48,15,.35),0 0 12px rgba(255,90,54,.16);
}
:is(html.theme-light,html[data-theme="light"]) input,
:is(html.theme-light,html[data-theme="light"]) select,
:is(html.theme-light,html[data-theme="light"]) textarea{
  background:#fffcf6;border-color:#c9bca7;color:var(--ds-text);
  box-shadow:inset 0 1px 3px rgba(70,45,20,.12);
}
:is(html.theme-light,html[data-theme="light"]) input::placeholder{color:var(--ds-dim)}
:is(html.theme-light,html[data-theme="light"]) .ach-bar{background:rgba(70,45,20,.1)}
:is(html.theme-light,html[data-theme="light"]) .ach-item{background:rgba(255,252,246,.7);box-shadow:inset 0 0 0 1px #e3dacb}
:is(html.theme-light,html[data-theme="light"]) .ach-item.done{box-shadow:inset 0 0 0 1px rgba(27,110,63,.55)}
:is(html.theme-light,html[data-theme="light"]) .ach-item.ready{box-shadow:inset 0 0 0 1px rgba(194,94,0,.6)}
/* Главное действие инструментов (.btnp и родня) — люминофорная мята tools.css
   в светлой теме становится киноварью облика D: тот же ход и тень, что у CTA беты. */
:is(html.theme-light,html[data-theme="light"]) .btnp,
:is(html.theme-light,html[data-theme="light"]) button.btn.primary,
:is(html.theme-light,html[data-theme="light"]) a.btn.primary,
:is(html.theme-light,html[data-theme="light"]) .solve .btn-solve,
:is(html.theme-light,html[data-theme="light"]) .holdbtn{
  background:var(--ds-cta);border-color:#c92400;color:var(--ds-on-cta);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.35),0 3px 0 #b43a1d;
}
:is(html.theme-light,html[data-theme="light"]) .btnp:hover,
:is(html.theme-light,html[data-theme="light"]) .holdbtn:hover{background:linear-gradient(180deg,#ff7a57,#f2461f);filter:none}
:is(html.theme-light,html[data-theme="light"]) .btnp:active,
:is(html.theme-light,html[data-theme="light"]) .holdbtn:active,
:is(html.theme-light,html[data-theme="light"]) .holdbtn.active{box-shadow:inset 0 1px 0 rgba(255,255,255,.35),0 1px 0 #b43a1d}
/* Кнопка второго плана (.ach-claim) — светлый металл */
:is(html.theme-light,html[data-theme="light"]) .ach-claim{
  background:linear-gradient(180deg,#fffdf9,#ece4d6);border-color:#c9bca7;color:var(--ds-text);
  box-shadow:inset 0 1px 0 #fff,0 3px 0 #d3c7b4;
}
/* Пакетная проверка (ear-trainer): зелёный/янтарь/красный — светлые заливки с тёмным текстом */
:is(html.theme-light,html[data-theme="light"]) .band.correct{background:linear-gradient(180deg,#9fdcb6,#6cc08c);border-color:#2e9b5a;color:#0d2a18}
:is(html.theme-light,html[data-theme="light"]) .band.near{background:linear-gradient(180deg,#ffd58a,#f0b04a);border-color:#c25e00;color:#2a1600}
:is(html.theme-light,html[data-theme="light"]) .band.wrong{background:linear-gradient(180deg,#ffb7ab,#f0826f);border-color:#b3261e;color:#2a0704}

/* ═══════════ Иллюстрации «до / после» (.hero-figure svg) — светлая тема ═══════════
   Цвета в разметке SVG жёсткие (тёмная подложка, фиолетовый, бирюза). Переопределяем
   по значению атрибута: в тёмной теме эти правила не действуют.
   Соответствия: подложка → бумага облика; фиолетовый → киноварь; бирюза → зелёный
   «норма»; янтарь → янтарь; подписи янтарём берём темнее (контраст текста ≥ 4.5). */
:is(html.theme-light,html[data-theme="light"]) .hero-figure svg [stop-color="#0a0a14"]{stop-color:#fffcf6}
:is(html.theme-light,html[data-theme="light"]) .hero-figure svg [stop-color="#06060c"]{stop-color:#f4efe6}
:is(html.theme-light,html[data-theme="light"]) .hero-figure svg [fill="#0a0a14"]{fill:#fffcf6}
:is(html.theme-light,html[data-theme="light"]) .hero-figure svg [fill="#8888aa"]{fill:#665c50}
:is(html.theme-light,html[data-theme="light"]) .hero-figure svg text[fill="#f59e0b"]{fill:#9a4a00}
:is(html.theme-light,html[data-theme="light"]) .hero-figure svg [fill="#f59e0b"]{fill:#c25e00}
:is(html.theme-light,html[data-theme="light"]) .hero-figure svg text[fill="#2dd4bf"]{fill:#1b6e3f}
:is(html.theme-light,html[data-theme="light"]) .hero-figure svg [fill="#2dd4bf"]{fill:#1b6e3f}
:is(html.theme-light,html[data-theme="light"]) .hero-figure svg [stroke="#f59e0b"]{stroke:#c25e00}
:is(html.theme-light,html[data-theme="light"]) .hero-figure svg [stroke="#2dd4bf"]{stroke:#1b6e3f}
:is(html.theme-light,html[data-theme="light"]) .hero-figure svg [stroke="#a855f7"]{stroke:#b7300f}
:is(html.theme-light,html[data-theme="light"]) .hero-figure svg [stroke="#ef4444"]{stroke:#d32a1b}
:is(html.theme-light,html[data-theme="light"]) .hero-figure svg [fill="rgba(124,58,237,0.18)"]{fill:rgba(183,48,15,.14)}
:is(html.theme-light,html[data-theme="light"]) .hero-figure svg [fill="rgba(245,158,11,0.12)"]{fill:rgba(194,94,0,.14)}
:is(html.theme-light,html[data-theme="light"]) .hero-figure svg [fill="rgba(245,158,11,0.18)"]{fill:rgba(194,94,0,.18)}
:is(html.theme-light,html[data-theme="light"]) .hero-figure svg [fill="rgba(245,158,11,0.22)"]{fill:rgba(194,94,0,.22)}
:is(html.theme-light,html[data-theme="light"]) .hero-figure svg [fill="rgba(245,158,11,0.35)"]{fill:rgba(194,94,0,.35)}
:is(html.theme-light,html[data-theme="light"]) .hero-figure svg [fill="rgba(245,158,11,0.55)"]{fill:rgba(194,94,0,.5)}
:is(html.theme-light,html[data-theme="light"]) .hero-figure svg [stroke="rgba(245,158,11,0.35)"]{stroke:rgba(194,94,0,.4)}
:is(html.theme-light,html[data-theme="light"]) .hero-figure svg [stroke="rgba(245,158,11,0.45)"]{stroke:rgba(194,94,0,.45)}
:is(html.theme-light,html[data-theme="light"]) .hero-figure svg [stroke="rgba(45,212,191,0.55)"]{stroke:rgba(27,110,63,.55)}
:is(html.theme-light,html[data-theme="light"]) .hero-figure svg [stroke="rgba(168,85,247,0.06)"]{stroke:rgba(183,48,15,.08)}
:is(html.theme-light,html[data-theme="light"]) .hero-figure svg [stroke="rgba(255,255,255,0.08)"]{stroke:rgba(25,21,18,.14)}

/* Блоки кода (/beta/developers, /beta/mcp): в светлой теме — утопленное табло облика D */
:is(html.theme-light,html[data-theme="light"]) .code-block{background:var(--ds-lcd);border-color:var(--ds-lcd-line)}
:is(html.theme-light,html[data-theme="light"]) .code-block code{color:var(--ds-text)}

/* Главная беты, 390 px: строка сравнения («Попробовать PRO →») вылезала на 56 px.
   Строка переносится, кнопка не шире экрана. Обе темы. */
.ds-pronote{flex-wrap:wrap}
.ds-pronote .ds-btn{white-space:normal;max-width:100%}

/* Партнёрская страница: заголовок шёл градиентом «текст → фиолет #7c3aed» (background-clip:text
   из её встроенного CSS). Облик D — сплошной цвет текста, акцент только у «Magic Master». Обе темы. */
:is(html.theme-light,html[data-theme="light"]) .hero h1,html body .hero h1{background:none!important;-webkit-background-clip:border-box!important;background-clip:border-box!important;-webkit-text-fill-color:currentColor!important;color:var(--ds-text)!important}
/* Шапка: надписи и кнопка не переносятся на две строки (на /beta/partners «Открыть студию» и
   «Починить трек» ломались из-за узких отступов страницы). Обе темы. */
nav.ds-header a{white-space:nowrap}

/* Мост «инструмент → мастеринг» (.to-master) — фиолетовый градиент tools.css в светлой теме
   становится CTA облика D (киноварь, текст --ds-on-cta: контраст 6.3). */
:is(html.theme-light,html[data-theme="light"]) .to-master{
  background:var(--ds-cta);color:var(--ds-on-cta);
  box-shadow:0 3px 0 #b43a1d;
}

/* ═══════════ Шасси приборов инструментов — тёплое, светлая тема ═══════════
   tools.css в светлой теме делает панели холодным алюминием (#d3d6db). Облик D — бумага
   и слоновая кость, поэтому панели (.glass, .tcard, .stage, .rescard, .compat, .preview,
   .ach, .cta, .cta-band, .solve) — тёплые, а табло результата — --ds-lcd. Тени — как у карточек D. */
:is(html.theme-light,html[data-theme="light"]){
  --bg:#f4efe6;
  --chassis:#f8f3ea;--chassis-hi:#fffcf6;--chassis-lo:#e3dacb;
  --face:linear-gradient(180deg,#fffcf6 0%,#f8f3ea 62%,#f3ecdf 100%);
  --bevel-hi:rgba(255,255,255,.95);--bevel-lo:rgba(70,45,20,.07);
  --engrave:#6b5f52;--engrave-dim:#6b5f52;--ink:#191512;--ink-soft:#554c42;
  --hair:rgba(70,45,20,.1);--hair2:rgba(70,45,20,.18);
  --brush:repeating-linear-gradient(90deg,rgba(70,45,20,.018) 0 1px,transparent 1px 3px);
  --screw:radial-gradient(circle,#fffdf8 0%,#d3c7b4 32%,#a89a84 56%,rgba(70,45,20,.22) 66%,transparent 69%);
}
:is(html.theme-light,html[data-theme="light"]) .glass,
:is(html.theme-light,html[data-theme="light"]) .tcard,
:is(html.theme-light,html[data-theme="light"]) .stage,
:is(html.theme-light,html[data-theme="light"]) .rescard,
:is(html.theme-light,html[data-theme="light"]) .compat,
:is(html.theme-light,html[data-theme="light"]) .preview,
:is(html.theme-light,html[data-theme="light"]) .ach,
:is(html.theme-light,html[data-theme="light"]) .cta,
:is(html.theme-light,html[data-theme="light"]) .cta-band,
:is(html.theme-light,html[data-theme="light"]) .solve{
  background:
    var(--screw) 11px 11px/13px 13px no-repeat,
    var(--screw) calc(100% - 11px) 11px/13px 13px no-repeat,
    var(--screw) 11px calc(100% - 11px)/13px 13px no-repeat,
    var(--screw) calc(100% - 11px) calc(100% - 11px)/13px 13px no-repeat,
    var(--brush),
    var(--face);
  border-color:#e3dacb;
  box-shadow:inset 0 1px 0 #fff,0 2px 0 #ddd2c0,0 24px 50px rgba(70,45,20,.12);
}
:is(html.theme-light,html[data-theme="light"]) .tcard:hover{
  box-shadow:inset 0 1px 0 #fff,0 2px 0 #ddd2c0,0 28px 56px rgba(70,45,20,.18);
}
/* Ach: плоская карточка tools.css перекрыта здесь же, чтобы не остался металлический фон */
:is(html.theme-light,html[data-theme="light"]) .ach{background:#fffcf6 !important;border:1px solid #e3dacb !important}
:is(html.theme-light,html[data-theme="light"]) .ach-item{background:rgba(248,243,234,.7)}

/* ═══════════ Кнопки инструментов — тёплые клавиши облика D, светлая тема ═══════════
   tools.css даёт .btng/.btn/a.btn/.band серый металл. Здесь — клавиши D: фон #fffdf9,
   рамка #c9bca7, тень 0 2px 0 #ddd2c0, текст #191512. Включает класс .btn-вариантов
   (kc-btn, fmt-btn, cut-btn, tap-btn), «Скачать WAV», «Слушать фрагмент», «-1/+1». */
:is(html.theme-light,html[data-theme="light"]) .btng,
:is(html.theme-light,html[data-theme="light"]) button.btn,
:is(html.theme-light,html[data-theme="light"]) a.btn,
:is(html.theme-light,html[data-theme="light"]) .sharebtn,
:is(html.theme-light,html[data-theme="light"]) .tool-share,
:is(html.theme-light,html[data-theme="light"]) .tap-reset,
:is(html.theme-light,html[data-theme="light"]) .band{
  background:#fffdf9;border-color:#c9bca7;color:#191512;
  box-shadow:inset 0 1px 0 #fff,0 2px 0 #ddd2c0;
}
:is(html.theme-light,html[data-theme="light"]) .btng:hover,
:is(html.theme-light,html[data-theme="light"]) button.btn:hover,
:is(html.theme-light,html[data-theme="light"]) a.btn:hover,
:is(html.theme-light,html[data-theme="light"]) .sharebtn:hover,
:is(html.theme-light,html[data-theme="light"]) .tool-share:hover{background:#fff;filter:none}
:is(html.theme-light,html[data-theme="light"]) .btng:active,
:is(html.theme-light,html[data-theme="light"]) button.btn:active,
:is(html.theme-light,html[data-theme="light"]) a.btn:active,
:is(html.theme-light,html[data-theme="light"]) .sharebtn:active,
:is(html.theme-light,html[data-theme="light"]) .tool-share:active,
:is(html.theme-light,html[data-theme="light"]) .band:active{box-shadow:inset 0 1px 0 #fff,0 1px 0 #ddd2c0}
/* Кнопки «выбрано» (формат, ключ): заливка киноварью, как CTA */
:is(html.theme-light,html[data-theme="light"]) .btn.fmt-btn.active,
:is(html.theme-light,html[data-theme="light"]) .fmt-btn.active,
:is(html.theme-light,html[data-theme="light"]) .btn.primary,
:is(html.theme-light,html[data-theme="light"]) button.btn.primary,
:is(html.theme-light,html[data-theme="light"]) a.btn.primary{
  background:var(--ds-cta);border-color:#c92400;color:var(--ds-on-cta);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.35),0 3px 0 #b43a1d;
}

/* ═══════════ Ползунки, чекбоксы и радио — цвет облика (обе темы) ═══════════
   Системный синий в бете убираем: accent-color = киноварь CTA (--ds-cta одинаков в обеих темах). */
input[type="range"],input[type="checkbox"],input[type="radio"]{accent-color:var(--ds-cta)}

/* ═══════════ Остатки старой палитры (аудит color_audit.py, п.4) ═══════════
   Холодный синий, мята #10b981 / #2dd4bf / #065c41 и фиолет #a855f7 найдены на страницах
   беты. Перекрашиваем в палитру облика D; тёмная тема меняется только там, где это остаток. */

/* Главное действие — киноварь CTA в обеих темах (раньше мята в тёмной теме инструментов) */
.btnp,button.btn.primary,a.btn.primary,.solve .btn-solve,.holdbtn{
  background:var(--ds-cta);border-color:#c92400;color:var(--ds-on-cta);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.35),0 3px 0 #b43a1d;
}
.btnp:hover,.holdbtn:hover{background:linear-gradient(180deg,#ff7a57,#f2461f);filter:none}

/* «Выгодно» и лучший тариф (/beta/pricing, главная): мята → киноварь */
div.price-best,.best-badge{background:var(--ds-cta);color:var(--ds-on-cta)}
.best-badge{box-shadow:0 0 0 1px rgba(255,90,54,.35)}
div.plan-card.best{border-color:rgba(255,90,54,.45)}

/* Сравнение «До / После» на реставрации: метка «После» — зелёный «норма» */
.ab-demo-item.is-after .ab-demo-label{color:#3ddc84}
:is(html.theme-light,html[data-theme="light"]) .ab-demo-item.is-after .ab-demo-label{color:#1b6e3f}
/* Полоска «тихо» в демо громкости (мастеринг альбома): холодный синий → тёплый серый */
.lufs-demo .bar.quiet i{background:linear-gradient(90deg,#8c8478,#a39a8c);box-shadow:none}
/* Зелёный «норма» инструментов в светлой теме (был #065c41 — мята по оттенку) */
:is(html.theme-light,html[data-theme="light"]){--sig-g:#1b6e3f}
:is(html.theme-light,html[data-theme="light"]) .explain,:is(html.theme-light,html[data-theme="light"]) .tipbox{border-left-color:rgba(27,110,63,.5)}

/* Схемы «до / после» и любые SVG страниц: остатки бирюзы, фиолета и синевы → палитра D.
   Ограничено тремя цветами, которые встречаются в разметке; тёмная подложка SVG — отдельно. */
:is(html.theme-light,html[data-theme="light"]) svg [stroke="#a855f7"]{stroke:#b7300f}
:is(html.theme-light,html[data-theme="light"]) svg [fill="#2dd4bf"]{fill:#1b6e3f}
:is(html.theme-light,html[data-theme="light"]) svg [stroke="#2dd4bf"]{stroke:#1b6e3f}
:is(html.theme-light,html[data-theme="light"]) svg [fill="#a855f7"]{fill:#b7300f}
:is(html.theme-light,html[data-theme="light"]) svg text[fill="#f59e0b"]{fill:#9a4a00}
:is(html.theme-light,html[data-theme="light"]) svg [stroke="rgba(45,212,191,0.55)"]{stroke:rgba(27,110,63,.55)}
:is(html.theme-light,html[data-theme="light"]) svg [fill="rgba(124,58,237,0.18)"]{fill:rgba(183,48,15,.14)}
/* Тёмная тема: бирюза и фиолет в иллюстрациях «до / после» → зелёный «норма» и киноварь D */
:root:not(.theme-light):not([data-theme="light"]) svg [stroke="#a855f7"]{stroke:#ff7a52}
:root:not(.theme-light):not([data-theme="light"]) svg [fill="rgba(124,58,237,0.18)"]{fill:rgba(255,90,54,.16)}
:root:not(.theme-light):not([data-theme="light"]) svg [fill="#2dd4bf"]{fill:#3ddc84}
:root:not(.theme-light):not([data-theme="light"]) svg [stroke="#2dd4bf"]{stroke:#3ddc84}
:root:not(.theme-light):not([data-theme="light"]) svg [stroke="rgba(45,212,191,0.55)"]{stroke:rgba(61,220,132,.55)}

/* Код на /beta/developers в тёмной теме: холодный голубовато-серый #c9d1e8 → текст D */
body.ds-page .code-block code{color:var(--ds-text)}
/* Логотип в шапке: рамка нулевой ширины (невидима), её цвет по умолчанию — синий/мята из старой палитры. */
nav.ds-header a.nav-logo{border-color:transparent}
/* Метки «FREE» в светлой теме: цвета tools.css были мятными по оттенку → зелёный «норма» D */
:is(html.theme-light,html[data-theme="light"]) .tag-free{color:#1b6e3f;border-color:rgba(27,110,63,.5);background:rgba(27,110,63,.09)}

/* ═══════════ Полоса «Включены в каждый мастеринг за токены» (/beta/pricing) ═══════════
   Старая палитра: сиренево-розовый градиент фона и рамки, градиентная метка, фиолетовый
   счётчик, розовые/фиолетовые плашки модулей. Облик D: панель --ds-surface-2 (светлая
   #f8f3ea) / --ds-surface (тёмная #1d1b19), рамка --ds-line, метка и счётчик — киноварь
   --ds-cta с тёмным текстом. Модули с оттенком 250–340° (Reference Track — розовый,
   Dynamic EQ — фиолетовый) становятся акцентом D; оранжевый, бирюзовый, красный и зелёный
   модули остаются. Разметку страницы не трогаем — только переопределение её стилей. */
.pro-modules-box{background:var(--ds-surface-2);border-color:var(--ds-line)}
:root:not(.theme-light):not([data-theme="light"]) .pro-modules-box{background:var(--ds-surface)}
.pro-modules-head > span:first-child{background:none!important;-webkit-background-clip:border-box!important;background-clip:border-box!important;-webkit-text-fill-color:currentColor!important;color:var(--ds-acc)!important}
.pro-modules-head > span:nth-child(2){background:var(--ds-cta)!important;color:var(--ds-on-cta)!important}
.pro-mod-chip[style*="219,39,119"],.pro-mod-chip[style*="139,92,246"]{background:var(--ds-wash)!important;border-color:var(--ds-acc-line)!important}
/* Цвета модулей (◆ в плашках и подписи строк таблицы): переменные --pro-* на странице
   не давали разных цветов — все шесть подписей выходили одного тона. Задаём по модулю:
   Reference Track (розовый) и Dynamic EQ (фиолетовый) — акцент D; Transient — янтарь,
   Denoiser и De-esser — зелёный «норма», Parallel — красный. */
[style*="--pro-ref"],[style*="--pro-dynEQ"]{color:var(--ds-acc)!important}
[style*="--pro-transient"]{color:var(--ds-warn)!important}
[style*="--pro-denoiser"],[style*="--pro-deesser"]{color:var(--ds-ok)!important}
[style*="--pro-parallel"]{color:var(--ds-bad)!important}

/* ═══════════ Приборы инструментов (/beta/tools/*) — тёмная тема, облик D ═══════════
   Решение владельца 14.10: люминофор мятный (tools.css) перекрашен в облик D.
   Стекло — тёплое тёмное, цифры и метки — янтарь индикаторов (#ffb020), акценты —
   киноварь (#ff7a52). Зелёный «норма» (#3ddc84) остаётся там, где означает «в норме»
   (индикаторы, вердикт ОК, метка FREE). Светлая тема этим блоком не затрагивается:
   селектор исключает html.theme-light и [data-theme="light"].
   Токены — на html (как у tools.css); захардкоженные в tools.css мятные тени,
   рамки и градиенты кнопок переопределены ниже по классам. */
html:not(.theme-light):not([data-theme="light"]){
  --glass:#0b0a09;--glass-2:#12100e;--grid:#2a2623;
  --phos:#ffb020;--phos-dim:#c9a46a;--glass-ink:#f3ece2;
  --led-g:#3ddc84;--accent:#ff7a52;
}
/* главное действие: киноварь вместо мятного градиента */
html:not(.theme-light):not([data-theme="light"]) .btnp,
html:not(.theme-light):not([data-theme="light"]) button.btn.primary,
html:not(.theme-light):not([data-theme="light"]) a.btn.primary,
html:not(.theme-light):not([data-theme="light"]) .solve .btn-solve,
html:not(.theme-light):not([data-theme="light"]) .holdbtn,
html:not(.theme-light):not([data-theme="light"]) .band.correct{
  background:var(--ds-cta);color:var(--ds-on-cta);border-color:#c92400;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.25),0 3px 0 #b43a1d,0 0 20px rgba(255,90,54,.18);
}
html:not(.theme-light):not([data-theme="light"]) .btnp:active,
html:not(.theme-light):not([data-theme="light"]) button.btn.primary:active,
html:not(.theme-light):not([data-theme="light"]) a.btn.primary:active{
  box-shadow:inset 0 1px 0 rgba(255,255,255,.25),0 1px 0 #b43a1d;
}
/* стеклянные рамки и подсветка */
html:not(.theme-light):not([data-theme="light"]) .drop{border-color:rgba(255,176,32,.35)}
html:not(.theme-light):not([data-theme="light"]) .drop:hover,
html:not(.theme-light):not([data-theme="light"]) .drop.over{
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.65),0 0 0 1px rgba(255,176,32,.45),0 0 26px rgba(255,176,32,.12)}
html:not(.theme-light):not([data-theme="light"]) .tcard:hover{
  box-shadow:0 16px 34px rgba(0,0,0,.55),0 0 0 1px rgba(255,122,82,.35)}
html:not(.theme-light):not([data-theme="light"]) .explain,
html:not(.theme-light):not([data-theme="light"]) .tipbox{border-left-color:rgba(255,176,32,.45)}
html:not(.theme-light):not([data-theme="light"]) .ach-bar i{
  background:linear-gradient(90deg,#ff7a52,#ffb020);box-shadow:0 0 8px rgba(255,176,32,.45)}
/* свечение цифр — янтарь; «норма» (.ro-ok, .vd-ok) — зелёный */
html:not(.theme-light):not([data-theme="light"]) .ro-val,
html:not(.theme-light):not([data-theme="light"]) .vd-num,
html:not(.theme-light):not([data-theme="light"]) .stat-val{text-shadow:0 0 14px rgba(255,176,32,.3)}
html:not(.theme-light):not([data-theme="light"]) .ro-ok .ro-val,
html:not(.theme-light):not([data-theme="light"]) .vd-ok .vd-num{color:var(--led-g);text-shadow:0 0 14px rgba(61,220,132,.35)}
html:not(.theme-light):not([data-theme="light"]) .vd-ok .vd-mark{box-shadow:inset 0 0 0 1px rgba(255,255,255,.25),0 0 18px rgba(61,220,132,.4)}

/* ── Блог в бете: остатки старой палитры (14.10). Карточка «Проверьте свой трек»
   (.mm-drop, стили инлайном в routers/blog.py → !important), блок призыва .cta-box,
   фоновая сетка .bg-grid, тень карточек ленты. Обе темы. ── */
.mm-drop {
  background: #fffcf6 !important; border: 1px solid #e3dacb !important;
  border-radius: 18px !important; box-shadow: inset 0 1px 0 #fff, 0 12px 30px rgba(70,45,20,.08), 0 2px 0 #ddd2c0;
}
.mm-drop strong { color: #191512; }
.mm-drop p { color: #665c50 !important; }
.mm-drop .mm-drop-zone {
  background: #f8f3ea; border: 1.5px dashed #c9bca7 !important; color: #191512;
  border-radius: 12px !important; transition: border-color .15s, background .15s;
}
.mm-drop .mm-drop-zone::before {
  content: "↑"; display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; margin-right: 12px; border-radius: 9px;
  background: var(--ds-cta); color: var(--ds-on-cta); font-weight: 700;
}
.mm-drop .mm-drop-zone:hover, .mm-drop .mm-drop-zone.over { border-color: #ff5a36 !important; background: #ffe9e1; }
.cta-box { background: #f8f3ea !important; border: 1px solid #e3dacb !important; }
.bg-grid { background-image: none !important; }
.blog-list li:hover { box-shadow: none !important; }

:root:not(.theme-light):not([data-theme="light"]) .mm-drop {
  background: #1d1b19 !important; border-color: #302c29 !important;
  box-shadow: 0 20px 50px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.04);
}
:root:not(.theme-light):not([data-theme="light"]) .mm-drop strong { color: #f3ece2; }
:root:not(.theme-light):not([data-theme="light"]) .mm-drop p { color: #b8ada0 !important; }
:root:not(.theme-light):not([data-theme="light"]) .mm-drop .mm-drop-zone { background: #262321; border-color: #47413c !important; color: #f3ece2; }
:root:not(.theme-light):not([data-theme="light"]) .mm-drop .mm-drop-zone:hover,
:root:not(.theme-light):not([data-theme="light"]) .mm-drop .mm-drop-zone.over { border-color: #ff7a52 !important; background: rgba(255,90,54,.10); }
:root:not(.theme-light):not([data-theme="light"]) .cta-box { background: #1d1b19 !important; border-color: #302c29 !important; }
:root:not(.theme-light):not([data-theme="light"]) .blog-list li:hover { box-shadow: none !important; }

/* ── ПЛОСКИЙ облик (решение владельца 14.10 вечер, вариант Б): теней нет совсем —
   ни «подставок» у кнопок и клавиш, ни теней блоков, ни внутренних теней табло,
   ни свечения. Блоки отделяются от фона только тонкой рамкой. Фокус клавиатуры —
   рамкой outline (раньше его местами давала тень). Блок стоит последним в слое. ── */
:root, html.theme-light, html[data-theme="light"] {
  --ds-cta-shadow: none; --ds-key-shadow: none; --ds-unit-shadow: none;
  --ds-shadow: none; --ds-inset-shadow: none;
}
body *, body *::before, body *::after { box-shadow: none !important; text-shadow: none !important; }
:focus-visible { outline: 2px solid #ff5a36 !important; outline-offset: 2px; }

/* Шапка беты на телефоне (390 px): метка «Бета», отступы и CTA выпирали на 22 px —
   бургер уходил за правый край (проверка 14.10, главная и профиль). Метка беты на узком
   экране скрывается (она остаётся в подвале и на десктопе), CTA — компактнее. Обе темы. */
@media (max-width: 640px) {
  nav.ds-header { gap: .4rem; padding-inline: .6rem; }
  nav.ds-header .ds-beta-badge { display: none; }
  nav.ds-header .nav-links { gap: .25rem; min-width: 0; }
  nav.ds-header .nav-links > .nav-cta { padding: .45rem .7rem; font-size: .8rem; white-space: nowrap; }
}
/* «Починить трек» с раскрывающимся списком не переносится на две строки (десктоп, все беты) */
nav.ds-header .ds-dd__btn { white-space: nowrap; }

/* Контраст (аудит 15.10, пиксели снимков главной беты, 390 и 1440). Без теней. */
/* светлая: подписи табло и «Ключевые цифры» (10–12 px) на #efe6d7 давали 4.3:1 */
:is(html.theme-light,html[data-theme="light"]) .ds-lcd__k,
:is(html.theme-light,html[data-theme="light"]) body.ds-home .stats-bar .stat-key { color: #665c50 !important; }
/* светлая: «норма» на табло — 2.9:1 при 28 px жирном; зелёный «норма» инструментов */
:is(html.theme-light,html[data-theme="light"]) .ds-lcd__v--ok { color: #1b6e3f; }
/* светлая: заголовок соцсетей в подвале — opacity .85 поверх #f4efe6 давал 4.1:1 */
:is(html.theme-light,html[data-theme="light"]) .mm-social__h { opacity: 1; }
/* светлая: метка БЕТА — киноварь текста на светлом фоне, не #ff5a36 (3.0:1) */
:is(html.theme-light,html[data-theme="light"]) .ds-beta-badge { color: var(--ds-acc); }
/* светлая: метка BETA в карточке «Мастер по референсу» — inline color:var(--accent), это #ff5a36 (3.0:1) */
:is(html.theme-light,html[data-theme="light"]) span[style*="color:var(--accent)"][style*="border:1px solid var(--accent)"] { color: var(--ds-acc) !important; }
/* обе темы: ярлыки «Популярный» / «Выгодно» — как кнопки облика D: с 16.10 (решение владельца,
   вариант C) белый текст на тёмной киновари #e52900 = 4.52:1 (AA). */
body div.price-popular, body div.price-best { background: var(--ds-cta) !important; color: var(--ds-on-cta) !important; }
/* обе темы: «Попробовать PRO →» вне шапки — градиент с белым текстом (3.1:1); кнопка D */
body a.nav-cta { background: var(--ds-cta) !important; color: var(--ds-on-cta) !important; }

/* Блок «Цифры, которые можно проверить» на главной (16.10): плоские карточки облика D —
   тонкая рамка, без теней; цвета — токены, обе темы. Тексты и числа — локали, как на основной. */
.ds-get-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:1rem;max-width:1080px;margin:0 auto;padding:0 1.5rem}
.ds-get-card{border:1px solid var(--ds-line);background:var(--ds-surface);border-radius:6px;padding:1.2rem 1.3rem;box-shadow:none}
.ds-get-card h3{font-size:1.02rem;font-weight:700;margin:0 0 .6rem;color:var(--ds-text)}
.ds-get-card ul{list-style:none;margin:0;padding:0;color:var(--ds-soft)}
.ds-get-card li{padding:.22rem 0;border-bottom:1px dashed var(--ds-line)}
.ds-get-card li:last-child{border-bottom:0}
.ds-get-card p{color:var(--ds-soft);margin:0;line-height:1.55}
.ds-get-note{margin:.75rem 0 0!important;font-size:.88rem;color:var(--ds-dim)!important}

/* светлая: нажатый жанр в бете (.ds-key) — киноварный wash, а не почти чёрная плашка (16.10) */
:is(html.theme-light,html[data-theme="light"]) .ds-key[aria-pressed="true"]{background:var(--ds-wash);border-color:var(--ds-acc-line);color:var(--ds-acc);box-shadow:none}
:is(html.theme-light,html[data-theme="light"]) .ds-key[aria-pressed="true"]::before{background:var(--ds-cta);box-shadow:none}

/* Облик D: кнопка «Мастерить…» в шапке — киноварь, плоско, без свечения. Общий фиолетовый вид шапок (mm-header-mobile.css) здесь перекрывается: слой только для беты. */
nav.ds-header .nav-links > .nav-cta,
nav.ds-header .nav-links > .cta {
  background: var(--ds-cta, #e52900) !important;
  background-image: none !important;
  color: var(--ds-on-cta, #fff) !important;
  box-shadow: none !important;
  border: 1px solid var(--ds-cta, #e52900) !important;
}