/* @file tools.css
   @description Дизайн-язык страниц /tools: рэковый прибор с врезанным экраном.
   @updated 2026-07-25

   Почему так. Инструменты — это измерительные приборы, и выглядеть они должны
   как приборы, а не как ещё один блок на лендинге. Отсюда два материала и
   строгое разделение между ними:

     ШАССИ — шлифованная панель с винтами по углам, гравированные подписи,
             светодиоды состояния, кнопки с физическим ходом. Здесь живут
             заголовки, органы управления и пояснения.
     СТЕКЛО — врезанный тёмный экран: петролевый фон, сетка, люминофорные
             цифры и кривые. Здесь живут ТОЛЬКО измерения.

   Правило, которое держит всю систему: показание не выводится на шасси, а
   пояснение не выводится на стекло. Экран остаётся тёмным и в светлой теме —
   светлеет только панель вокруг него, как у настоящего прибора.
*/

/* ─────────────────────────── токены ─────────────────────────── */
:root{
  color-scheme:dark;

  /* фон стойки — темнее шасси, чтобы юниты читались как отдельные предметы */
  --bg:#141619;

  /* шасси */
  --chassis:#2a2c31;
  --chassis-hi:#3b3e45;
  --chassis-lo:#1d1f23;
  --bevel-hi:rgba(255,255,255,.10);
  --bevel-lo:rgba(0,0,0,.55);
  --engrave:#8e939d;
  --engrave-dim:#9299a3;
  --ink:#e9ecf0;
  --ink-soft:#b6bbc4;
  --hair:rgba(255,255,255,.09);
  --hair2:rgba(255,255,255,.16);

  /* стекло */
  --glass:#06141a;
  --glass-2:#08191f;
  --grid:#0e2b36;
  --phos:#3bf2b4;
  --phos-dim:#4d8b93;
  --glass-ink:#dff6ef;

  /* сигнальные цвета: одинаковые на шасси и на стекле */
  --led-g:#3bf2b4;
  --led-a:#ffb020;
  --led-r:#ff4d3d;

  --r:8px;
  --r-glass:6px;

  --sans:'IBM Plex Sans',system-ui,-apple-system,sans-serif;
  --mono:'IBM Plex Mono',ui-monospace,'SF Mono',Menlo,monospace;

  /* Совместимость с прежней палитрой. Эти имена встречаются в inline-стилях
     страниц и в JS (индикаторы платформ в таблице), поэтому держим их как
     синонимы новых токенов — иначе пришлось бы править разметку построчно,
     а любая пропущенная строка молча теряла бы цвет. */
  --soft:var(--ink-soft); --dim:var(--engrave-dim); --text:var(--ink);
  --border:var(--hair); --border2:var(--hair2);
  --surface:var(--chassis); --surf2:var(--chassis-lo);
  --accent:#22d69a; --acc2:var(--phos); --acc3:var(--led-a); --cyan:var(--phos);
  --green:var(--led-g); --amber:var(--led-a); --red:var(--led-r);

  /* материалы, собираемые в background нескольких блоков */
  --brush:repeating-linear-gradient(90deg,rgba(255,255,255,.022) 0 1px,transparent 1px 3px);
  --screw:radial-gradient(circle,#9aa0aa 0%,#6d727b 32%,#3c4047 56%,rgba(0,0,0,.55) 66%,transparent 69%);
  --face:linear-gradient(180deg,var(--chassis-hi) 0%,var(--chassis) 46%,var(--chassis-lo) 100%);
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  background:var(--bg);
  color:var(--ink);
  min-height:100vh;
  line-height:1.55;
  font-family:var(--sans);
  font-size:16px;
  overflow-x:hidden;
  position:relative;
}
/* Направляющие стойки по краям экрана: вертикальный ритм, на котором «висят»
   юниты. Заменяет прежнюю декоративную сетку — она не значила ничего. */
body::before{
  content:'';position:fixed;inset:0;pointer-events:none;z-index:0;
  background:
    linear-gradient(90deg,rgba(255,255,255,.028) 0 1px,transparent 1px) 0 0/100% 100%,
    linear-gradient(-90deg,rgba(255,255,255,.028) 0 1px,transparent 1px) 100% 0/100% 100%,
    repeating-linear-gradient(180deg,rgba(255,255,255,.018) 0 1px,transparent 1px 46px);
  background-repeat:no-repeat,no-repeat,repeat-y;
  background-size:100% 100%,100% 100%,100% 100%;
}
.bg-glow{display:none}
a{color:var(--phos);text-decoration:none}
:focus-visible{outline:2px solid var(--phos);outline-offset:2px;border-radius:3px}

/* ─────────────────────────── шапка ─────────────────────────── */
.nav{
  position:relative;z-index:2;display:flex;align-items:center;justify-content:space-between;
  gap:1rem;padding:1rem 1.6rem;max-width:1060px;margin:0 auto;
  /* Резерв высоты: mm-header-auth.js инъектит «Войти» в рантайме — без фикс. высоты
     это давало вертикальный сдвиг (CLS). min-height держит бар стабильным до/после. */
  min-height:60px;box-sizing:border-box;
}
.nav .logo{display:flex;align-items:center;gap:.55rem;color:var(--ink);font-weight:700;
  font-family:var(--sans);text-decoration:none;min-width:0;flex-shrink:1}
.nav .logo .ic{display:flex;align-items:center;justify-content:center;flex-shrink:0;line-height:0;height:26px}
.nav .logo .ic img{height:22px;width:auto;display:block}
.nav .logo .name{font-weight:700;font-size:1.05rem;letter-spacing:-.02em;color:var(--ink)}
.nav .logo .badge{font-family:var(--mono);font-size:.6rem;font-weight:700;letter-spacing:.08em;
  text-transform:uppercase;padding:2px 6px;border-radius:3px;background:var(--chassis-hi);
  border:1px solid var(--hair2);color:var(--engrave);margin-left:2px}
.nav .logo .lockup{height:28px;width:auto;max-width:min(180px,46vw);display:block;flex-shrink:1}
.nav .links{display:flex;gap:1.1rem;align-items:center;font-size:.88rem;flex-wrap:wrap}
.nav .links a{color:var(--ink-soft);transition:color .15s}
.nav .links a:hover{color:var(--ink)}
.mm-lang-switch a{color:var(--engrave-dim);font-family:var(--mono);font-size:.8rem}
.mm-lang-switch a.active{color:var(--ink);font-weight:700}

/* Кнопка «Мастеринг» в шапке — единственная люминофорная точка наверху */
.nav .cta{
  font-weight:700;font-size:.86rem;border-radius:6px;padding:.5rem 1rem;
  color:#04231a;background:linear-gradient(180deg,#4df7be,#22d69a);
  border:1px solid #1fa87a;
  box-shadow:0 3px 0 #0e7a5a,0 0 20px rgba(59,242,180,.22);
  transition:transform .1s,box-shadow .1s;
}
.nav .cta:hover{color:#04231a}
.nav .cta:active{transform:translateY(2px);box-shadow:0 1px 0 #0e7a5a}

.wrap{position:relative;z-index:1;max-width:1060px;margin:0 auto;padding:1.4rem 1.4rem 4.5rem}

/* ─────────────────── заголовок страницы ─────────────────── */
/* Гравированный шильдик: моноширинный, разрежен, с горящим светодиодом */
.eyebrow{
  font-family:var(--mono);font-size:.68rem;letter-spacing:.2em;text-transform:uppercase;
  font-weight:500;color:var(--engrave);display:inline-flex;align-items:center;gap:.6rem;
}
.eyebrow::before{
  content:'';width:7px;height:7px;border-radius:50%;flex-shrink:0;
  background:var(--led-g);box-shadow:0 0 8px var(--led-g);
}
h1.hero,.wrap h1{
  font-family:var(--sans);font-weight:700;
  font-size:clamp(1.75rem,4.4vw,2.5rem);line-height:1.12;letter-spacing:-.025em;
  margin:.7rem 0;text-wrap:balance;color:var(--ink);
}
h1.hero .grad{color:var(--ink)}
.sub{color:var(--ink-soft);max-width:58ch;margin-bottom:1.7rem;font-size:.98rem}

/* ═══════════════════════ ШАССИ ═══════════════════════
   Панель прибора: винты по углам, шлифовка, фаска сверху и тень снизу. */
.glass,.tcard,.stage,.rescard,.compat,.preview,.ach,.cta,.cta-band,.solve{
  position:relative;
  border-radius:var(--r);
  border:1px solid var(--chassis-lo);
  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);
  box-shadow:
    inset 0 1px 0 var(--bevel-hi),
    inset 0 -1px 0 var(--bevel-lo),
    0 10px 26px rgba(0,0,0,.45);
}
.glass,.stage,.compat,.preview,.ach,.cta,.cta-band,.solve{padding:1.35rem 1.6rem 1.3rem}

/* Гравированная табличка — заголовок внутри юнита */
.glass h2,.ach-hd h2,.cta strong,.cta-band strong,.solve strong{
  font-family:var(--mono);font-size:.72rem;font-weight:500;
  letter-spacing:.2em;text-transform:uppercase;color:var(--engrave);
  display:block;margin-bottom:.9rem;
}
.solve strong,.cta strong,.cta-band strong{margin-bottom:.5rem}

/* ═══════════════════════ СТЕКЛО ═══════════════════════
   Врезанный экран. Всё, что здесь лежит, — измерение. */
.screen,.vd,.ro-grid,.meter,table,.squares{
  background:
    repeating-linear-gradient(180deg,var(--grid) 0 1px,transparent 1px 22px),
    repeating-linear-gradient(90deg,var(--grid) 0 1px,transparent 1px 22px),
    linear-gradient(180deg,var(--glass-2),var(--glass));
  border-radius:var(--r-glass);
  box-shadow:
    inset 0 2px 12px rgba(0,0,0,.8),
    inset 0 0 0 1px rgba(0,0,0,.65),
    0 0 0 1px rgba(255,255,255,.055);
}

/* ─────────────── вердикт на стекле ─────────────── */
.vd{
  display:flex;gap:1rem;align-items:flex-start;
  padding:1.15rem 1.25rem;margin:.2rem 0 1.1rem;border:0;
}
/* Сигнальная лампа: круглая линза со свечением. Серьёзность читается цветом
   раньше, чем текстом, — как на приборе, где сначала видишь горящий индикатор. */
.vd-mark{
  width:38px;height:38px;border-radius:50%;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;
  font-family:var(--mono);font-size:.95rem;font-weight:700;line-height:1;
  background:radial-gradient(circle at 38% 32%,rgba(255,255,255,.16),rgba(0,0,0,.5) 70%);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.1),inset 0 2px 6px rgba(0,0,0,.6);
  color:var(--phos-dim);
}
.vd-ok .vd-mark{color:#04231a;background:radial-gradient(circle at 38% 32%,#7dffd2,#1eb185 72%);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.25),0 0 18px rgba(59,242,180,.45)}
.vd-warn .vd-mark{color:#2a1c00;background:radial-gradient(circle at 38% 32%,#ffd782,#d98b0a 72%);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.25),0 0 18px rgba(255,176,32,.42)}
.vd-bad .vd-mark{color:#2a0704;background:radial-gradient(circle at 38% 32%,#ffa79c,#d32a1b 72%);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.25),0 0 18px rgba(255,77,61,.45)}
.vd-body{min-width:0}
.vd-title{font-family:var(--sans);font-size:1.1rem;font-weight:700;line-height:1.28;
  margin-bottom:.28rem;text-wrap:balance;color:var(--glass-ink)}
.vd-sub{font-size:.89rem;color:var(--phos-dim);line-height:1.55}
.vd-num{font-family:var(--mono);font-variant-numeric:tabular-nums;color:var(--phos)}
/* Светящаяся кромка по левому краю — серьёзность видна раньше, чем текст */
.vd-ok{box-shadow:inset 0 2px 12px rgba(0,0,0,.8),inset 3px 0 0 var(--led-g),
  inset 0 0 0 1px rgba(0,0,0,.65),0 0 0 1px rgba(255,255,255,.055)}
.vd-warn{box-shadow:inset 0 2px 12px rgba(0,0,0,.8),inset 3px 0 0 var(--led-a),
  inset 0 0 0 1px rgba(0,0,0,.65),0 0 0 1px rgba(255,255,255,.055)}
.vd-bad{box-shadow:inset 0 2px 12px rgba(0,0,0,.8),inset 3px 0 0 var(--led-r),
  inset 0 0 0 1px rgba(0,0,0,.65),0 0 0 1px rgba(255,255,255,.055)}

/* ─────────────── показания ─────────────── */
.ro-grid{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(min(150px,100%),1fr));
  gap:1px;margin:.2rem 0 1.1rem;padding:0;overflow:hidden;
}
.ro{padding:.95rem 1.05rem;background:transparent;border:0;
  box-shadow:1px 0 0 rgba(255,255,255,.05)}
.ro-val{
  font-family:var(--mono);font-weight:400;font-size:1.95rem;line-height:1.05;
  font-variant-numeric:tabular-nums;letter-spacing:-.01em;
  color:var(--phos);text-shadow:0 0 14px rgba(59,242,180,.35);
}
.ro-unit{font-family:var(--mono);font-size:.7rem;color:var(--phos-dim);margin-left:.35rem;
  letter-spacing:.1em;text-shadow:none}
.ro-cap{font-family:var(--sans);font-size:.75rem;color:var(--phos-dim);margin-top:.4rem;line-height:1.45}
.ro-ok .ro-val{color:var(--led-g);text-shadow:0 0 14px rgba(59,242,180,.35)}
.ro-warn .ro-val{color:var(--led-a);text-shadow:0 0 14px rgba(255,176,32,.3)}
.ro-bad .ro-val{color:var(--led-r);text-shadow:0 0 14px rgba(255,77,61,.3)}

/* ─────────────── светодиодная линейка ───────────────
   Разметку из toolkit.js не трогаем: сегменты рисует наложение поверх дорожки,
   поэтому любая непрерывная полоса сама превращается в столбик светодиодов. */
.meter{margin:.9rem 0 1.1rem;padding:1rem 1.1rem .85rem}
.meter-track{position:relative;height:16px;border-radius:2px;overflow:hidden;
  background:rgba(255,255,255,.035);box-shadow:inset 0 1px 3px rgba(0,0,0,.7)}
.meter-track::after{
  content:'';position:absolute;inset:0;pointer-events:none;z-index:3;
  background:repeating-linear-gradient(90deg,transparent 0 calc(3.333% - 3px),
    var(--glass) calc(3.333% - 3px) 3.333%);
}
.meter-span{position:absolute;top:0;height:100%;opacity:.9;z-index:1}
.meter-span.meter-ok{background:linear-gradient(180deg,#5cffc8,#1eb185)}
.meter-span.meter-warn{background:linear-gradient(180deg,#ffc44d,#d98b0a)}
.meter-span.meter-bad{background:linear-gradient(180deg,#ff7a6d,#d32a1b)}
.meter-target{position:absolute;top:-4px;width:2px;height:24px;z-index:4;
  background:var(--glass-ink);border-radius:1px;box-shadow:0 0 6px rgba(255,255,255,.5)}
.meter-you{position:absolute;top:-5px;width:4px;height:26px;border-radius:1px;z-index:5;
  background:#fff;box-shadow:0 0 0 1px rgba(0,0,0,.6),0 0 10px currentColor}
.meter-you.meter-ok{background:var(--led-g);color:var(--led-g)}
.meter-you.meter-warn{background:var(--led-a);color:var(--led-a)}
.meter-you.meter-bad{background:var(--led-r);color:var(--led-r)}
.meter-scale{display:flex;justify-content:space-between;font-family:var(--mono);
  font-size:.66rem;letter-spacing:.08em;color:var(--phos-dim);margin-top:.6rem}
.meter-note{font-family:var(--mono);font-size:.78rem;letter-spacing:.05em;
  text-transform:uppercase;margin-top:.5rem;font-weight:500}
.meter-note.meter-ok{color:var(--led-g)}
.meter-note.meter-warn{color:var(--led-a)}
.meter-note.meter-bad{color:var(--led-r)}

/* ─────────────── экран-осциллограф ───────────────
   Кривая кратковременной громкости трека. Рисуется по реальным отсчётам,
   поэтому пользователь видит свой файл, а не иллюстрацию. */
.scope{margin:.2rem 0 1.1rem;overflow:hidden}
.scope-bar{
  display:flex;align-items:center;justify-content:space-between;gap:1rem;flex-wrap:wrap;
  padding:.6rem 1rem;font-family:var(--mono);font-size:.66rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--phos-dim);
  border-bottom:1px solid var(--grid);
}
.scope-state{display:inline-flex;align-items:center;gap:.5rem;white-space:nowrap}
.scope-state i{width:7px;height:7px;border-radius:50%;background:currentColor;
  box-shadow:0 0 8px currentColor}
.scope-state.s-ok{color:var(--led-g)}
.scope-state.s-warn{color:var(--led-a)}
.scope-state.s-bad{color:var(--led-r)}
.scope canvas{display:block;width:100%;height:200px}
@media (max-width:560px){.scope canvas{height:150px}}

/* ─────────────── таблица платформ на стекле ─────────────── */
table{width:100%;border-collapse:collapse;overflow:hidden;font-size:.9rem;border:0}
th,td{padding:.7rem 1rem;text-align:left;border-bottom:1px solid var(--grid)}
th{font-family:var(--mono);color:var(--phos-dim);font-size:.64rem;text-transform:uppercase;
  letter-spacing:.16em;font-weight:500;background:rgba(0,0,0,.28)}
td{color:var(--glass-ink)}
tr:last-child td{border-bottom:none}
td.pen{font-family:var(--mono);font-variant-numeric:tabular-nums;color:var(--phos)}
.dot{display:inline-block;width:8px;height:8px;border-radius:50%;margin-right:.5rem;
  vertical-align:middle;box-shadow:0 0 7px currentColor}

/* ═══════════ приёмный лоток файла ═══════════
   Не «карточка загрузки», а входной слот прибора: врезанное стекло с рамкой. */
.drop{
  position:relative;cursor:pointer;text-align:center;padding:clamp(1.5rem,4vw,2.4rem) 1.6rem;
  border:0;border-radius:var(--r-glass);
  background:
    repeating-linear-gradient(180deg,var(--grid) 0 1px,transparent 1px 22px),
    repeating-linear-gradient(90deg,var(--grid) 0 1px,transparent 1px 22px),
    linear-gradient(180deg,var(--glass-2),var(--glass));
  box-shadow:
    inset 0 2px 12px rgba(0,0,0,.8),inset 0 0 0 1px rgba(0,0,0,.65),
    0 0 0 1px rgba(255,255,255,.055),inset 0 0 0 2px transparent;
  transition:box-shadow .18s;
  color:var(--glass-ink);
}
.drop::after{
  content:'';position:absolute;inset:8px;border-radius:4px;pointer-events:none;
  border:1px dashed rgba(59,242,180,.35);transition:border-color .18s;
}
.drop:hover::after,.drop.over::after{border-color:var(--phos)}
.drop:hover,.drop.over{box-shadow:inset 0 2px 12px rgba(0,0,0,.8),
  inset 0 0 0 1px rgba(0,0,0,.65),0 0 0 1px rgba(59,242,180,.45),0 0 26px rgba(59,242,180,.14)}
.drop [data-i18n]{color:var(--glass-ink)}
/* Приёмная щель со стрелкой подачи — вместо эмодзи. Пока файл считается,
   стрелка ритмично «заправляет» его в щель: состояние видно без текста. */
.drop .big{display:none}
.drop .slot{position:relative;width:66px;height:38px;margin:0 auto .85rem}
.drop .slot::before{
  content:'';position:absolute;left:50%;top:2px;width:13px;height:13px;margin-left:-7px;
  border-right:2px solid var(--phos);border-bottom:2px solid var(--phos);
  transform:rotate(45deg);opacity:.85;transition:top .18s;
}
.drop .slot::after{
  content:'';position:absolute;left:0;right:0;bottom:2px;height:8px;border-radius:4px;
  background:#020a0d;
  box-shadow:inset 0 2px 5px rgba(0,0,0,.9),0 0 0 1px rgba(59,242,180,.35),0 0 14px rgba(59,242,180,.16);
}
.drop:hover .slot::before,.drop.over .slot::before{top:8px}
.drop.busy .slot::before{animation:mm-feed 1.1s linear infinite}
@keyframes mm-feed{0%{top:0;opacity:0}25%{opacity:.9}100%{top:15px;opacity:0}}
.trust{font-family:var(--mono);font-size:.7rem;letter-spacing:.06em;color:var(--engrave-dim);
  margin-top:.8rem;text-align:center}

/* ═══════════ кнопки: физический ход ═══════════ */
.btnp,.btng,button.btn,a.btn,.sharebtn,.tool-share,.holdbtn,.band,.ach-claim{
  font-family:var(--sans);font-weight:600;cursor:pointer;
  border-radius:5px;border:1px solid #565a64;
  background:linear-gradient(180deg,#4c505a,#33363d);
  color:var(--ink);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.14),0 3px 0 #1b1d21;
  transition:transform .08s,box-shadow .08s,filter .12s;
}
.btnp,.btng,button.btn,a.btn,.sharebtn,.tool-share{padding:.62rem 1.15rem;font-size:.9rem}
.btnp:hover,.btng:hover,button.btn:hover,a.btn:hover,.sharebtn:hover,.tool-share:hover{filter:brightness(1.14)}
.btnp:active,.btng:active,button.btn:active,a.btn:active,.sharebtn:active,.tool-share:active,
.band:active,.ach-claim:active{
  transform:translateY(2px);box-shadow:inset 0 1px 0 rgba(255,255,255,.14),0 1px 0 #1b1d21;
}
a.btn,.tool-share{display:inline-flex;align-items:center;gap:.45rem;text-decoration:none}

/* Главное действие — единственная люминофорная кнопка на странице */
.btnp,button.btn.primary,a.btn.primary,.solve .btn-solve,.holdbtn{
  background:linear-gradient(180deg,#4df7be,#22d69a);
  border-color:#1fa87a;color:#04231a;font-weight:700;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.3),0 3px 0 #0e7a5a,0 0 22px rgba(59,242,180,.2);
}
.btnp:active,button.btn.primary:active,a.btn.primary:active,.solve .btn-solve:active,.holdbtn:active{
  transform:translateY(2px);box-shadow:inset 0 1px 0 rgba(255,255,255,.3),0 1px 0 #0e7a5a;
}
/* Переключатель темы — часть гравированной панели, а не объёмная кнопка:
   в шапке он стоит вплотную к моношрифтовым RU|EN, и любой рельеф там
   выбивался из оформления. Глиф текстовый (◐), не эмодзи: цветная картинка
   спорила с монохромной панелью и на светлой теме выглядела инородной. */
.theme-toggle{
  width:26px;height:26px;padding:0;line-height:1;cursor:pointer;
  background:none;border:0;box-shadow:none;border-radius:4px;
  font-family:var(--mono);font-size:1rem;font-weight:400;
  color:var(--engrave-dim);transition:color .15s;
}
.theme-toggle:hover{color:var(--ink)}
.theme-toggle:active{transform:none;box-shadow:none}

/* ═══════════ хаб: стойка из юнитов ═══════════ */
.tgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(300px,100%),1fr));gap:1rem}
.tcard{
  display:block;padding:1.4rem 1.5rem 1.5rem;color:var(--ink);text-decoration:none;
  transition:transform .16s,box-shadow .16s;
}
.tcard:hover{
  transform:translateY(-2px);
  box-shadow:inset 0 1px 0 var(--bevel-hi),inset 0 -1px 0 var(--bevel-lo),
    0 16px 34px rgba(0,0,0,.55),0 0 0 1px rgba(59,242,180,.25);
}
/* Плашки «в стиле сайта»: плоская карточка (тема-aware), метры/LED/шильдики сохранены */
.tcard{
  background:rgba(18,18,28,.92) !important;
  border:1px solid rgba(255,255,255,.09) !important;
  box-shadow:0 4px 18px rgba(0,0,0,.28) !important;
}
html.theme-light .tcard{
  background:#ffffff !important;
  border:1px solid rgba(25,25,60,.12) !important;
  box-shadow:0 4px 16px rgba(60,60,110,.08) !important;
}
.tcard:hover{
  box-shadow:0 10px 28px rgba(124,58,237,.18) !important;
  border-color:rgba(168,85,247,.45) !important;
}
html.theme-light .tcard .unit-model{color:#6b6b8c}
html.theme-light .tcard .unit-plate{border-bottom-color:rgba(25,25,60,.1)}
/* Шильдик юнита: номер модели и светодиод — как на торце реального прибора.
   Эмодзи в кружке читались как иконка приложения, а не как прибор. */
.tcard .unit-plate{
  display:flex;align-items:center;justify-content:space-between;gap:1rem;
  padding-bottom:.75rem;margin-bottom:.85rem;border-bottom:1px solid var(--hair);
}
.tcard .unit-model{font-family:var(--mono);font-size:.68rem;font-weight:500;letter-spacing:.22em;
  text-transform:uppercase;color:var(--engrave)}
.tcard .unit-led{width:8px;height:8px;border-radius:50%;flex-shrink:0;
  background:var(--led-g);box-shadow:0 0 8px var(--led-g);transition:box-shadow .16s}
.tcard .unit-led.led-a{background:var(--led-a);box-shadow:0 0 8px var(--led-a)}
.tcard:hover .unit-led{box-shadow:0 0 14px currentColor,0 0 8px var(--led-g)}
.tcard h2{font-family:var(--sans);font-size:1.05rem;font-weight:700;letter-spacing:-.015em;
  margin-bottom:.4rem;color:var(--ink)}
.tcard p{font-size:.85rem;color:var(--ink-soft);line-height:1.55}
.tcard .unit-foot{display:flex;align-items:center;justify-content:space-between;gap:1rem;
  margin-top:1rem}
.tcard .go{font-family:var(--mono);font-size:.9rem;color:var(--engrave-dim);
  transition:transform .16s,color .16s}
.tcard:hover .go{transform:translateX(4px);color:var(--phos)}
.tcard .tag{
  font-family:var(--mono);font-size:.6rem;font-weight:500;letter-spacing:.12em;
  text-transform:uppercase;border-radius:3px;padding:.24rem .5rem;
}
/* Строка «в разработке» — гравировка на пустой панели, а не пунктирная плашка */
.soon{margin-top:1.6rem;padding:.85rem 0 0;border-top:1px solid var(--hair);
  font-family:var(--mono);font-size:.7rem;letter-spacing:.12em;text-transform:uppercase;
  color:var(--engrave-dim)}
.tag-free{color:var(--led-g);border:1px solid rgba(59,242,180,.4);background:rgba(59,242,180,.08)}
.tag-daily{color:var(--led-a);border:1px solid rgba(255,176,32,.4);background:rgba(255,176,32,.08)}

/* ═══════════ поток диагностики ═══════════ */
.flow{display:flex;align-items:center;gap:.55rem;flex-wrap:wrap;margin-bottom:.9rem;
  font-family:var(--mono);font-size:.66rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--engrave-dim)}
.flow span{display:inline-flex;align-items:center;gap:.4rem}
.flow b{color:var(--phos);font-weight:500}
.flow i{width:16px;height:1px;background:var(--hair2);display:inline-block}

/* ═══════════ что делать: шаги ═══════════ */
.fixlist{counter-reset:fix;margin:1.1rem 0 .4rem;display:grid;gap:.6rem}
.fixstep{display:flex;gap:.75rem;align-items:flex-start;font-size:.9rem;
  color:var(--ink-soft);line-height:1.55}
.fixstep::before{
  counter-increment:fix;content:counter(fix);flex-shrink:0;width:22px;height:22px;border-radius:3px;
  display:flex;align-items:center;justify-content:center;font-family:var(--mono);font-size:.72rem;
  font-weight:500;color:var(--phos);background:var(--glass);
  box-shadow:inset 0 1px 3px rgba(0,0,0,.8),0 0 0 1px rgba(59,242,180,.22);
}
.fixstep b{color:var(--ink);font-weight:700}

/* ═══════════ финальное действие ═══════════ */
.solve p,.cta p,.cta-band p{font-size:.88rem;color:var(--ink-soft);line-height:1.55;margin-bottom:.9rem}
.solve .btn-solve{display:inline-flex;align-items:center;gap:.5rem;padding:.68rem 1.2rem;
  font-size:.93rem;text-decoration:none;border-radius:5px;border:1px solid #1fa87a}
.solve .btn-ghost{margin-left:.7rem;font-size:.86rem;color:var(--ink-soft)}
.cta .btns{display:flex;gap:.7rem;margin-top:.9rem;flex-wrap:wrap}
.cta,.cta-band{margin-top:1.6rem}

/* ═══════════ прочие блоки страниц ═══════════ */
.err{display:none;font-family:var(--mono);font-size:.85rem;color:var(--led-r);
  margin-top:.9rem;text-align:center;letter-spacing:.03em}
.result{display:none;margin-top:1.6rem}
.hint{font-size:.78rem;color:var(--engrave-dim);margin-top:.55rem}
.others{margin-top:2.2rem;font-size:.88rem;text-align:center;color:var(--ink-soft)}
.others a{display:inline-block;margin:.3rem .7rem}
.preview .row{display:flex;gap:.7rem;align-items:center;flex-wrap:wrap;margin-bottom:.5rem}
.preview .row strong{font-family:var(--mono);font-size:.72rem;letter-spacing:.18em;
  text-transform:uppercase;color:var(--engrave);font-weight:500}

/* ═══════════ поля ввода: врезаны в панель ═══════════ */
label{display:block;font-family:var(--mono);font-size:.66rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--engrave);margin-bottom:.4rem}
select,option,input[type="number"],input[type="text"],input[type="email"]{
  font-family:var(--mono);font-size:.9rem;color:var(--glass-ink);
  background:linear-gradient(180deg,var(--glass),var(--glass-2));
  border:1px solid rgba(0,0,0,.6);border-radius:4px;padding:.55rem .75rem;
  box-shadow:inset 0 2px 6px rgba(0,0,0,.7);
}
input[type="number"],input[type="text"],input[type="email"]{width:100%}
input::placeholder{color:var(--phos-dim)}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:1.1rem}
@media (max-width:560px){.grid2{grid-template-columns:1fr}}

/* ═══════════ калькулятор ═══════════ */
.mrow{display:flex;justify-content:space-between;gap:1rem;padding:.62rem 0;
  border-bottom:1px solid var(--hair);font-size:.9rem;color:var(--ink-soft)}
.mrow:last-child{border-bottom:none}
.mrow .mv{font-family:var(--mono);font-variant-numeric:tabular-nums;color:var(--phos);
  font-weight:500;text-align:right}
.tipbox{margin-top:1.1rem;font-size:.85rem;color:var(--ink-soft);line-height:1.6;
  border-left:2px solid rgba(59,242,180,.4);padding:.15rem 0 .15rem .9rem}

/* ═══════════ тональность и BPM ═══════════ */
.cards{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
@media (max-width:560px){.cards{grid-template-columns:1fr}}
.rescard{padding:1.3rem 1.4rem;text-align:center}
.rescard .lbl{font-family:var(--mono);font-size:.64rem;letter-spacing:.18em;
  text-transform:uppercase;color:var(--engrave)}
.rescard .val{
  font-family:var(--mono);font-size:2.5rem;font-weight:400;margin:.5rem 0 .35rem;
  font-variant-numeric:tabular-nums;letter-spacing:-.02em;
  color:var(--phos);text-shadow:0 0 18px rgba(59,242,180,.4);
  background:linear-gradient(180deg,var(--glass-2),var(--glass));
  border-radius:var(--r-glass);padding:.6rem .4rem;
  box-shadow:inset 0 2px 10px rgba(0,0,0,.8),0 0 0 1px rgba(255,255,255,.05);
}
.rescard .extra{font-size:.84rem;color:var(--ink-soft)}
.compat{margin-top:1rem;text-align:center}
.compat .chips{display:flex;gap:.5rem;flex-wrap:wrap;margin-top:.7rem;justify-content:center}
/* Только чипы совместимости тональностей: в хабе класс .chip носит индикатор
   юнита, и общее правило перекрасило бы его в зелёную рамку. */
.chips .chip{font-family:var(--mono);font-size:.82rem;font-weight:500;color:var(--led-g);
  background:rgba(59,242,180,.08);border:1px solid rgba(59,242,180,.35);
  border-radius:3px;padding:.35rem .8rem}

/* ═══════════ тренажёр слуха ═══════════ */
.wrap.game{max-width:680px;text-align:center}
.stats{display:flex;justify-content:center;gap:2rem;margin-bottom:1.3rem;
  font-family:var(--mono);font-size:.64rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--engrave-dim)}
.stats b{display:block;font-family:var(--mono);font-size:1.5rem;font-weight:400;
  color:var(--phos);letter-spacing:0;text-shadow:0 0 12px rgba(59,242,180,.3)}
.stage{padding:1.7rem 1.5rem}
.roundlbl{font-family:var(--mono);font-size:.66rem;letter-spacing:.18em;
  text-transform:uppercase;color:var(--engrave)}
.squares{display:inline-block;font-size:1.1rem;letter-spacing:.35rem;margin:.7rem 0 1.1rem;
  min-height:1.9rem;padding:.5rem 1rem .5rem 1.35rem;border-radius:var(--r-glass)}
.holdbtn{display:inline-flex;align-items:center;gap:.55rem;font-size:1rem;
  border-radius:6px;padding:.95rem 1.7rem;user-select:none;-webkit-user-select:none;
  touch-action:manipulation}
.holdbtn.active{filter:brightness(1.2);transform:translateY(2px);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.3),0 1px 0 #0e7a5a}
.bands{display:grid;grid-template-columns:repeat(4,1fr);gap:.5rem;margin-top:.9rem}
.band{font-family:var(--mono);font-size:.9rem;font-weight:500;padding:.85rem .3rem;color:var(--ink)}
.band:hover:not(:disabled){filter:brightness(1.18)}
.band.correct{background:linear-gradient(180deg,#3bf2b4,#1eb185);border-color:#1fa87a;color:#04231a}
.band.near{background:linear-gradient(180deg,#ffc44d,#d98b0a);border-color:#b87708;color:#2a1c00}
.band.wrong{background:linear-gradient(180deg,#ff7a6d,#d32a1b);border-color:#a81f12;color:#2a0704}
.band:disabled{cursor:default}
.fin{display:none;margin-top:1.3rem}
.fin .score{font-family:var(--mono);font-size:2rem;font-weight:400;margin:.4rem 0;
  color:var(--phos);text-shadow:0 0 16px rgba(59,242,180,.35)}
.sharebtn{margin:.3rem}
.fin .cta{margin-top:1.2rem;font-size:.88rem;color:var(--ink-soft);
  background:none;border:none;box-shadow:none;padding:0}

/* ═══════════ достижения ═══════════ */
.ach{margin:2.2rem 0 1.4rem}
.ach-hd{display:flex;align-items:baseline;justify-content:space-between;gap:1rem;
  flex-wrap:wrap;margin-bottom:1rem}
.ach-hd h2{margin:0}
.ach-hd .sub{font-size:.83rem;color:var(--ink-soft);margin:0}
.ach-earned{font-family:var(--mono);font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;
  color:var(--engrave);border:1px solid var(--hair2);border-radius:3px;padding:.28rem .7rem;white-space:nowrap}
.ach-earned b{color:var(--led-a);font-weight:500}
.ach-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(240px,100%),1fr));gap:.75rem}
.ach-item{border-radius:5px;padding:.95rem 1rem;background:rgba(0,0,0,.22);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05),inset 0 0 0 1px rgba(0,0,0,.4)}
.ach-item.done{box-shadow:inset 0 1px 0 rgba(255,255,255,.05),inset 0 0 0 1px rgba(59,242,180,.35)}
.ach-item.ready{box-shadow:inset 0 1px 0 rgba(255,255,255,.05),inset 0 0 0 1px rgba(255,176,32,.5),
  0 0 16px rgba(255,176,32,.12)}
.ach-title{font-weight:700;font-size:.9rem;margin-bottom:.22rem;display:flex;align-items:center;gap:.4rem}
.ach-desc{font-size:.79rem;color:var(--ink-soft);line-height:1.5;margin-bottom:.65rem}
.ach-bar{height:5px;border-radius:2px;background:var(--glass);overflow:hidden;margin-bottom:.5rem;
  box-shadow:inset 0 1px 2px rgba(0,0,0,.8)}
.ach-bar i{display:block;height:100%;background:linear-gradient(90deg,#22d69a,#3bf2b4);
  box-shadow:0 0 8px rgba(59,242,180,.5);transition:width .4s}
.ach-item.done .ach-bar i{background:linear-gradient(90deg,#1eb185,#3bf2b4)}
.ach-foot{display:flex;align-items:center;justify-content:space-between;gap:.6rem;
  font-family:var(--mono);font-size:.7rem;letter-spacing:.06em;color:var(--engrave-dim)}
.ach-claim{padding:.34rem .75rem;font-size:.72rem;font-family:var(--mono);letter-spacing:.08em;
  text-transform:uppercase;background:linear-gradient(180deg,#ffc44d,#e39a0b);
  border-color:#b87708;color:#2a1c00;box-shadow:inset 0 1px 0 rgba(255,255,255,.3),0 3px 0 #8a5a05}
.ach-claim:disabled{opacity:.45;cursor:default;box-shadow:none;transform:none}
.ach-reward{font-family:var(--mono);color:var(--led-a);white-space:nowrap}
.ach-note{margin-top:.95rem;font-size:.82rem;color:var(--ink-soft)}

/* ═══════════ пояснения ═══════════ */
.explain{border-left:2px solid rgba(59,242,180,.4);padding:.15rem 0 .15rem .9rem;margin:1.1rem 0 .2rem}
.explain-h{font-family:var(--mono);font-size:.66rem;text-transform:uppercase;letter-spacing:.16em;
  color:var(--engrave);margin-bottom:.5rem}
.explain ul{margin:0;padding-left:1.05rem}
.explain li{font-size:.87rem;color:var(--ink-soft);line-height:1.6;margin-bottom:.35rem}

/* ═══════════ текстовая часть страницы ═══════════ */
.article{margin-top:3rem;max-width:68ch}
.article h2{font-family:var(--sans);font-size:1.2rem;font-weight:700;letter-spacing:-.015em;
  margin:2.1rem 0 .65rem;color:var(--ink)}
.article h2:first-child{margin-top:0}
.article p{color:var(--ink-soft);margin-bottom:.85rem;line-height:1.72}
.article .qa{margin-top:.5rem}
.article .qa h3{font-size:.98rem;margin:1.3rem 0 .35rem;color:var(--ink);font-weight:700}
.article .qa p{margin-bottom:0}

footer.tf{position:relative;z-index:1;max-width:1060px;margin:0 auto;padding:1.4rem;
  font-family:var(--mono);font-size:.72rem;letter-spacing:.05em;color:var(--engrave-dim);
  border-top:1px solid var(--hair);display:flex;gap:1rem;flex-wrap:wrap;justify-content:space-between}
footer.tf a{color:var(--engrave)}

/* ═══════════ мобильная вёрстка ═══════════ */
@media (max-width:720px){
  .nav{flex-wrap:wrap;padding:.85rem 1rem;gap:.5rem}
  .nav .logo .lockup{height:24px;max-width:min(140px,40vw)}
  .nav .links{font-size:.82rem;gap:.55rem}
  .nav .links > a:not(.cta){display:none}
  .nav .cta{padding:.45rem .85rem;font-size:.8rem;min-height:40px;display:inline-flex;align-items:center}
  .wrap{padding:1.2rem 1rem 3.5rem}
  /* На узком экране винты по углам съедают поля — оставляем только шлифовку */
  .glass,.tcard,.stage,.rescard,.compat,.preview,.ach,.cta,.cta-band,.solve{
    background:var(--brush),var(--face);
  }
  .glass,.stage,.compat,.preview,.ach,.cta,.cta-band,.solve{padding:1.15rem 1.1rem}
  .tcard{padding:1.2rem 1.15rem 1.35rem}
  .tcard .tag{right:1.1rem}
  .tcard .go{right:1.15rem}
  .vd{padding:1rem;gap:.8rem}
  .vd-mark{width:36px;height:36px;font-size:1.15rem}
  .vd-title{font-size:1.02rem}
  .ro-val{font-size:1.65rem}
  .bands{grid-template-columns:repeat(2,1fr)}
  .stats{gap:1.3rem}
  th,td{padding:.6rem .7rem}
}
@media (max-width:380px){
  .nav .logo .lockup{height:22px;max-width:min(120px,36vw)}
  .nav .cta{font-size:.74rem;padding:.4rem .7rem}
}

/* ═══════════ светлая тема ═══════════
   Панель светлеет до крашеного алюминия, экран остаётся тёмным: у приборов
   он тоже не меняется от освещения в комнате. */
/* Переопределяем на том же элементе, что и :root, а не на body. Причина не
   косметическая: --face объявлен через var(--chassis-hi), а var() внутри
   объявления переменной подставляется на элементе, ГДЕ НАПИСАНО объявление.
   Пока светлые значения жили на body, --face так и оставался тёмным — и все
   панели в светлой теме были графитовыми с тёмным текстом поверх. */
html.theme-light{
  color-scheme:light;
  --bg:#e6e8ec;
  --chassis:#d3d6db;
  --chassis-hi:#e9ebee;
  --chassis-lo:#b3b7bf;
  --bevel-hi:rgba(255,255,255,.7);
  --bevel-lo:rgba(0,0,0,.16);
  --engrave:#545a63;
  --engrave-dim:#525860;
  --ink:#191b1f;
  --ink-soft:#4b515a;
  --hair:rgba(0,0,0,.1);
  --hair2:rgba(0,0,0,.18);
  --brush:repeating-linear-gradient(90deg,rgba(0,0,0,.022) 0 1px,transparent 1px 3px);
  --screw:radial-gradient(circle,#fbfbfc 0%,#c2c6cd 32%,#8b9099 56%,rgba(0,0,0,.3) 66%,transparent 69%);
}
html.theme-light body::before{
  background:
    linear-gradient(90deg,rgba(0,0,0,.05) 0 1px,transparent 1px) 0 0/100% 100%,
    linear-gradient(-90deg,rgba(0,0,0,.05) 0 1px,transparent 1px) 100% 0/100% 100%,
    repeating-linear-gradient(180deg,rgba(0,0,0,.03) 0 1px,transparent 1px 46px);
  background-repeat:no-repeat,no-repeat,repeat-y;
}
html.theme-light .glass,html.theme-light .tcard,html.theme-light .stage,
html.theme-light .rescard,html.theme-light .compat,html.theme-light .preview,
html.theme-light .ach,html.theme-light .cta,html.theme-light .cta-band,html.theme-light .solve{
  border-color:var(--chassis-lo);
  box-shadow:inset 0 1px 0 var(--bevel-hi),inset 0 -1px 0 var(--bevel-lo),0 6px 18px rgba(30,35,45,.16);
}
html.theme-light .tcard:hover{
  box-shadow:inset 0 1px 0 var(--bevel-hi),inset 0 -1px 0 var(--bevel-lo),
    0 12px 26px rgba(30,35,45,.22),0 0 0 1px rgba(31,168,122,.4);
}
/* Кнопки на светлой панели: светлый металл, ход сохраняется */
html.theme-light .btng,html.theme-light button.btn,html.theme-light a.btn,
html.theme-light .sharebtn,html.theme-light .tool-share,html.theme-light .band{
  background:linear-gradient(180deg,#fdfdfe,#dcdfe4);
  border-color:#a8adb6;color:var(--ink);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.9),0 3px 0 #a8adb6;
}
html.theme-light .btng:active,html.theme-light button.btn:active,html.theme-light a.btn:active,
html.theme-light .sharebtn:active,html.theme-light .tool-share:active,
html.theme-light .band:active{
  box-shadow:inset 0 1px 0 rgba(255,255,255,.9),0 1px 0 #a8adb6;
}
html.theme-light .fin .cta{background:none;box-shadow:none;border:0}
html.theme-light .ach-item{background:rgba(255,255,255,.5);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.8),inset 0 0 0 1px rgba(0,0,0,.08)}
html.theme-light .ach-item.done{box-shadow:inset 0 1px 0 rgba(255,255,255,.8),inset 0 0 0 1px rgba(31,168,122,.5)}
html.theme-light .ach-item.ready{box-shadow:inset 0 1px 0 rgba(255,255,255,.8),inset 0 0 0 1px rgba(214,145,10,.55)}
html.theme-light .ach-earned b{color:#a56f05}
html.theme-light .ach-reward{color:#a56f05}
html.theme-light .fixstep::before{color:var(--phos)}
html.theme-light .explain,html.theme-light .tipbox{border-left-color:rgba(31,168,122,.5)}
html.theme-light .trust,html.theme-light footer.tf,html.theme-light .hint{color:var(--engrave-dim)}
html.theme-light a{color:var(--sig-g)}
html.theme-light .others a,html.theme-light footer.tf a{color:var(--sig-g)}
/* Ссылки и подписи, лежащие на стекле, светлыми не становятся */
html.theme-light .vd-sub,html.theme-light .ro-cap,html.theme-light .ro-unit,
html.theme-light .meter-scale,html.theme-light .scope-bar,html.theme-light th{color:var(--phos-dim)}
html.theme-light .vd-title,html.theme-light td,html.theme-light .drop [data-i18n]{color:var(--glass-ink)}

/* Сигнальные цвета на светлой ПАНЕЛИ.
   Люминофор и янтарь рассчитаны на тёмное стекло: на крашеном алюминии они
   выцветают до нечитаемости — «FREE» и «КАЖДЫЙ ДЕНЬ» на скриншоте владельца
   почти сливались с плашкой. На стекле цвета остаются прежними: там они
   работают как задумано, и правила ниже до них не достают. */
html.theme-light{--sig-g:#065c41;--sig-a:#6f4804;--sig-r:#a01f11}
html.theme-light .tag-free{color:var(--sig-g);border-color:rgba(6,92,65,.5);background:rgba(6,92,65,.09)}
html.theme-light .tag-daily{color:var(--sig-a);border-color:rgba(111,72,4,.5);background:rgba(111,72,4,.09)}
html.theme-light .chips .chip{color:var(--sig-g);border-color:rgba(6,92,65,.45);background:rgba(6,92,65,.08)}
html.theme-light .flow b{color:var(--sig-g)}
html.theme-light .stats b,html.theme-light .fin .score,html.theme-light .mrow .mv{color:var(--sig-g);text-shadow:none}
html.theme-light .err{color:var(--sig-r)}
html.theme-light .eyebrow::before,html.theme-light .tcard .unit-led{
  background:var(--sig-g);box-shadow:0 0 0 2px rgba(6,92,65,.18)}
html.theme-light .tcard .unit-led.led-a{background:var(--sig-a);box-shadow:0 0 0 2px rgba(111,72,4,.18)}
html.theme-light .tcard:hover .unit-led{box-shadow:0 0 0 3px rgba(6,92,65,.28)}

@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important;scroll-behavior:auto!important}
}

/* Тач-таргет переключателя языка был ~25×16px при норме 40 (аудит 2026-07-30).
   Правка в конце файла — по уроку каскада (cta-contrast): последняя запись побеждает. */
.mm-lang-switch a{display:inline-flex;align-items:center;justify-content:center;min-height:40px;padding:0 .45rem}

/* Мобильный аудит 2026-07-30: переключатель темы был 26×26 при норме 40 */
@media (pointer:coarse){
  .theme-toggle{min-width:40px;min-height:40px;display:inline-flex;align-items:center;justify-content:center}
}

/* === Единая мобильная шапка (override поверх собственных .nav-правил tools) === */
@media (max-width: 640px){
  .nav{flex-wrap:nowrap !important;padding:0 .7rem !important;height:54px !important;
    align-items:center !important;gap:.4rem !important;max-width:100vw !important;margin:0 !important}
  .nav > *{align-self:center !important;margin-top:0 !important;margin-bottom:0 !important}
  .nav .logo{align-self:center !important}
  .nav .logo .lockup{height:26px !important;max-width:42vw !important}
  .nav .links{flex-wrap:nowrap !important;gap:.35rem !important;align-items:center !important}
  .nav .cta{font-size:.72rem !important;padding:.4rem .6rem !important;white-space:nowrap !important;
    min-height:0 !important;align-self:center !important}
}

/* КОРНЕВАЯ ПРИЧИНА «CTA висел ниже лого» (искали 5 раз): строка 475 `.cta,.cta-band{margin-top:1.6rem}`
   задумана для контентных CTA-секций, но прилетала и nav-кнопке (у неё класс .cta) → margin-top:25.6px
   толкал кнопку вниз. align-self:center центрировал БОКС, но верхний margin оставался. Убираем margin
   у шапочной .cta + подтверждаем центрирование ряда. SEO/язык/вход не затронуты — только выравнивание. */
.nav{align-items:center !important}
.nav > *{align-self:center !important}
.nav .links{display:flex !important;align-items:center !important;flex-wrap:nowrap !important}
.nav .links > *{align-self:center !important;margin-top:0 !important;margin-bottom:0 !important}
.nav .cta{margin:0 !important}

/* «Фон не смотрится»: блок достижений имел ДВА несочетающихся слоя — металлический
   «хардвер»-корпус .ach + серая панель .mmg внутри → муть. Метры инструментов оставляем
   металлическими (осознанный выбор), а достижения делаем одной плоской карточкой в общем
   стиле (как .tcard), убрав внутренний фон .mmg. Работает на обеих темах. */
.ach{
  background:rgba(18,18,28,.92) !important;
  border:1px solid rgba(255,255,255,.09) !important;
  box-shadow:0 4px 18px rgba(0,0,0,.28) !important;
}
html.theme-light .ach{
  background:#fff !important;
  border:1px solid rgba(25,25,60,.12) !important;
  box-shadow:0 6px 18px rgba(30,35,45,.10) !important;
}
.ach .mmg,.ach [data-mm-gamify-board]{
  background:transparent !important;border:0 !important;padding:0 !important;margin:10px 0 0 !important;
}

/* Трек прогресс-баров достижений на СВЕТЛОЙ теме был тёмным (var(--glass) остаётся
   петролево-чёрным по дизайну «экрана») → на белой карточке читался жёсткой чёрной
   полосой. Смягчаем именно трек, заливку (бирюзовый градиент) не трогаем. */
html.theme-light .ach-bar,html.theme-light .mmg-bar{background:rgba(25,25,60,.10) !important}