/* AESTHETICA Clinic OS — общий слой дизайна по Figma-макету
   «AESTHETICA Clinic Dashboard» (Design Tokens v2, Light/Dark).
   Подключается после инлайн-стилей каждой страницы и перекрывает
   палитру и общие компоненты. Сайдбар — всегда тёмная панель. */

:root {
  color-scheme: light dark;
  /* светлая тема — токены Light из макета */
  --plane:#f6f7f9; --surface:#ffffff; --text:#0f172a; --text-2:#64748b; --muted:#94a3b8;
  --grid:#e7ebf0; --border:#e7ebf0; --border-2:#d9dee5; --series-1:#0e9384; --track:#eef2f6;
  --good:#16a34a; --warning:#d97706; --critical:#dc2626;
  --ok-bg:#e9f7ee; --plan-bg:rgba(62,111,217,.10); --miss-bg:rgba(148,163,184,.14);
  --warn-bg:#fdf3e3; --crit-bg:#fdebeb; --accent-bg:#ddf3f0;
  --field:#f6f7f9; --accent-ink:#ffffff; --ring:rgba(14,147,132,.18);
  --svc:#7b6ce0; --svc-bg:rgba(123,108,224,.12);
  --plan:#3e6fd9; --row-hover:rgba(15,23,42,.03);
  --glow:none; --card-shadow:0 1px 2px rgba(15,23,42,.05);
  /* панель навигации — тёмная в обеих темах */
  --panel:#0b0f19; --panel-2:#10141c; --on-panel:#ffffff; --nav-muted:#94a4b2;
  --panel-border:rgba(255,255,255,.08); --panel-hover:rgba(255,255,255,.06);
  --nav-active-bg:#ffffff; --nav-active-text:#0f172a; --panel-critical:#f26d6d;
  --seg-active:#0f172a; --seg-active-text:#ffffff;
  /* категориальная палитра направлений (Figma chart-1..8; во фронте --dr1..8/--drx).
     Слоты закреплены в DIR_SLOT страниц: 1 Терапия · 2 Ортопедия · 3 Хирургия ·
     4 Ортодонтия · 5 Детская · 6 Гигиена · 7 Консультации (= --svc) · 8 Общие ·
     x — без позиций. Источник истины — Figma Variables. */
  --dr1:#3e6fd9; --dr2:#2e7d4f; --dr3:#c86a92; --dr4:#dca928;
  --dr5:#56b58c; --dr6:#d96d3f; --dr7:#7b6ce0; --dr8:#a85a52; --drx:#8a93a8;
  --chart-1:var(--dr1); --chart-2:var(--dr2); --chart-3:var(--dr3);
  --chart-4:var(--dr4); --chart-5:var(--dr5); --chart-6:var(--dr6);
  --chart-7:var(--dr7); --chart-8:var(--dr8); --chart-neutral:var(--drx);
  --surface-2:#eef2f6; --foot:#fafbfc; --selection:#f0f5f7; --accent-2:#be8449;
}
@media (prefers-color-scheme: dark) {
  :root {
    /* тёмная тема — токены Dark (палитра Product v2) */
    --plane:#0a0d14; --surface:#12161f; --text:#edf1f8; --text-2:#9aa4b8; --muted:#75829a;
    --grid:rgba(255,255,255,.07); --border:#1b222e; --border-2:#27303f; --series-1:#19c6b4; --track:#1c2330;
    --good:#3dd68c; --warning:#f2a54a; --critical:#f26d6d;
    --ok-bg:#10291d; --plan-bg:rgba(91,141,239,.16); --miss-bg:rgba(94,105,128,.16);
    --warn-bg:#2b2214; --crit-bg:#2b1717; --accent-bg:#113129;
    --field:#0d1119; --accent-ink:#04211d; --ring:rgba(25,198,180,.25);
    --svc:#8b7cf6; --svc-bg:rgba(139,124,246,.16);
    --plan:#5b8def; --row-hover:rgba(255,255,255,.03);
    --glow:radial-gradient(1100px 420px at 18% -8%, rgba(25,198,180,.10), transparent 60%);
    --card-shadow:inset 0 1px 0 rgba(255,255,255,.05);
    --panel:#0c0f17; --panel-2:#10141c; --on-panel:#edf1f8; --nav-muted:#8a94a6;
    --panel-border:#1b222e; --panel-hover:rgba(255,255,255,.05);
    --nav-active-bg:#14222d; --nav-active-text:#edf1f8; --panel-critical:#f26d6d;
    --seg-active:#171d28; --seg-active-text:#edf1f8;
    --dr1:#5b8def; --dr2:#3fa26b; --dr3:#d87fa8; --dr4:#e5b84a;
    --dr5:#63c9a0; --dr6:#e58a5a; --dr7:#8b7cf6; --dr8:#c97a6e; --drx:#7a869c;
    --chart-1:var(--dr1); --chart-2:var(--dr2); --chart-3:var(--dr3);
    --chart-4:var(--dr4); --chart-5:var(--dr5); --chart-6:var(--dr6);
    --chart-7:var(--dr7); --chart-8:var(--dr8); --chart-neutral:var(--drx);
    --surface-2:#171d28; --foot:#10141c; --selection:#14222d; --accent-2:#ce9a55;
  }
}
:root[data-theme="light"] {
  --plane:#f6f7f9; --surface:#ffffff; --text:#0f172a; --text-2:#64748b; --muted:#94a3b8;
  --grid:#e7ebf0; --border:#e7ebf0; --border-2:#d9dee5; --series-1:#0e9384; --track:#eef2f6;
  --good:#16a34a; --warning:#d97706; --critical:#dc2626;
  --ok-bg:#e9f7ee; --plan-bg:rgba(62,111,217,.10); --miss-bg:rgba(148,163,184,.14);
  --warn-bg:#fdf3e3; --crit-bg:#fdebeb; --accent-bg:#ddf3f0;
  --field:#f6f7f9; --accent-ink:#ffffff; --ring:rgba(14,147,132,.18);
  --svc:#7b6ce0; --svc-bg:rgba(123,108,224,.12);
  --plan:#3e6fd9; --row-hover:rgba(15,23,42,.03);
  --glow:none; --card-shadow:0 1px 2px rgba(15,23,42,.05);
  --panel:#0b0f19; --panel-2:#10141c; --on-panel:#ffffff; --nav-muted:#94a4b2;
  --panel-border:rgba(255,255,255,.08); --panel-hover:rgba(255,255,255,.06);
  --nav-active-bg:#ffffff; --nav-active-text:#0f172a; --panel-critical:#f26d6d;
  --seg-active:#0f172a; --seg-active-text:#ffffff;
  /* категориальная палитра направлений (Figma chart-1..8; во фронте --dr1..8/--drx).
     Слоты закреплены в DIR_SLOT страниц: 1 Терапия · 2 Ортопедия · 3 Хирургия ·
     4 Ортодонтия · 5 Детская · 6 Гигиена · 7 Консультации (= --svc) · 8 Общие ·
     x — без позиций. Источник истины — Figma Variables. */
  --dr1:#3e6fd9; --dr2:#2e7d4f; --dr3:#c86a92; --dr4:#dca928;
  --dr5:#56b58c; --dr6:#d96d3f; --dr7:#7b6ce0; --dr8:#a85a52; --drx:#8a93a8;
  --chart-1:var(--dr1); --chart-2:var(--dr2); --chart-3:var(--dr3);
  --chart-4:var(--dr4); --chart-5:var(--dr5); --chart-6:var(--dr6);
  --chart-7:var(--dr7); --chart-8:var(--dr8); --chart-neutral:var(--drx);
  --surface-2:#eef2f6; --foot:#fafbfc; --selection:#f0f5f7; --accent-2:#be8449;
  color-scheme:light;
}
:root[data-theme="dark"] {
  --plane:#0a0d14; --surface:#12161f; --text:#edf1f8; --text-2:#9aa4b8; --muted:#75829a;
  --grid:rgba(255,255,255,.07); --border:#1b222e; --border-2:#27303f; --series-1:#19c6b4; --track:#1c2330;
  --good:#3dd68c; --warning:#f2a54a; --critical:#f26d6d;
  --ok-bg:#10291d; --plan-bg:rgba(91,141,239,.16); --miss-bg:rgba(94,105,128,.16);
  --warn-bg:#2b2214; --crit-bg:#2b1717; --accent-bg:#113129;
  --field:#0d1119; --accent-ink:#04211d; --ring:rgba(25,198,180,.25);
  --svc:#8b7cf6; --svc-bg:rgba(139,124,246,.16);
  --plan:#5b8def; --row-hover:rgba(255,255,255,.03);
  --glow:radial-gradient(1100px 420px at 18% -8%, rgba(25,198,180,.10), transparent 60%);
  --card-shadow:inset 0 1px 0 rgba(255,255,255,.05);
  --panel:#0c0f17; --panel-2:#10141c; --on-panel:#edf1f8; --nav-muted:#8a94a6;
  --panel-border:#1b222e; --panel-hover:rgba(255,255,255,.05);
  --nav-active-bg:#14222d; --nav-active-text:#edf1f8; --panel-critical:#f26d6d;
  --seg-active:#171d28; --seg-active-text:#edf1f8;
  --dr1:#5b8def; --dr2:#3fa26b; --dr3:#d87fa8; --dr4:#e5b84a;
  --dr5:#63c9a0; --dr6:#e58a5a; --dr7:#8b7cf6; --dr8:#c97a6e; --drx:#7a869c;
  --chart-1:var(--dr1); --chart-2:var(--dr2); --chart-3:var(--dr3);
  --chart-4:var(--dr4); --chart-5:var(--dr5); --chart-6:var(--dr6);
  --chart-7:var(--dr7); --chart-8:var(--dr8); --chart-neutral:var(--drx);
  --surface-2:#171d28; --foot:#10141c; --selection:#14222d; --accent-2:#ce9a55;
  color-scheme:dark;
}

/* ---- токены пакета 191 (STYLE_SPEC §7, утверждено 10.08, вариант А) ----
   имена для литералов, которые уже жили в app.css/tsx: чернила на акценте,
   Telegram-миметика (намеренно не темизируется), аватарки, корзина
   91–365 дней дебиторки. Тепловая подложка считается прямо от --series-1
   через color-mix — отдельного rgb-токена нет, рассинхрон при смене
   акцента невозможен (ревизия фундамента). */
:root {
  --ink-on-accent:#221708; --ink-on-chip:#10151c;
  --tg:#3fb1e8; --tg-btn:#2f9fd8; --tg-btn-ink:#ffffff;
  --tg-bubble:#1b2836; --tg-bubble-ink:#e8edf2;
  --ava-1:#e2a73e; --ava-2:#3fb1e8; --ava-3:#43c77e;
  --ava-4:#b287e8; --ava-5:#e8737b; --ava-6:#5fc4c9;
  --age-3:#ec835a;
}

/* ---- токены пакета 293: цвета поводов «Возвратов» ----
   Источник истины — Figma Variables макета kVmJm6UTcKP8epEdhCZS5J
   («Возвраты · дневной список», rc-* обеих тем). Категориальные цвета
   поводов recall: гигиена, отбеливание, импланты, формирователи,
   протезирование, прочие этапы. С semantic-цветами тем не совпадают. */
:root {
  --rc-hygiene:#0284c7; --rc-whitening:#7c3aed; --rc-implant:#059669;
  --rc-abutment:#b45309; --rc-prostho:#db2777; --rc-other:#64748b;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --rc-hygiene:#38bdf8; --rc-whitening:#a78bfa; --rc-implant:#34d399;
    --rc-abutment:#f5b301; --rc-prostho:#f472b6; --rc-other:#94a3b8;
  }
}
:root[data-theme="dark"] {
  --rc-hygiene:#38bdf8; --rc-whitening:#a78bfa; --rc-implant:#34d399;
  --rc-abutment:#f5b301; --rc-prostho:#f472b6; --rc-other:#94a3b8;
}

/* ---- фоновые «плавающие» круги (просьба владельца 05.08) ----
   цвета выводятся из акцентов темы, поэтому сами меняются со сменой темы,
   интенсивность своя для светлой и тёмной. Слой fixed за контентом,
   клики не перехватывает, прокрутку не расширяет (overflow hidden). */
:root { --orb-1:var(--series-1); --orb-2:var(--plan); --orb-3:var(--svc);
  --orb-op:.14; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) { --orb-op:.22; } }
:root[data-theme="dark"] { --orb-op:.22; }
.bg-orbs { position: fixed; inset: 0; z-index: -1; overflow: hidden;
  pointer-events: none; }
/* режим «движение телефона»: слой шире вьюпорта, чтобы параллакс (±38px)
   не оголял края экрана срезами кругов (находка ревью 07.08) */
.bg-orbs.bgfx-motion { inset: -64px; }
.bg-orbs .orb { position: absolute;
  opacity: calc(var(--orb-op, .12) * var(--bg-int, 1)); }
.bg-orbs .o1 { width: 56vw; height: 56vw; min-width: 480px; min-height: 480px;
  left: -14vw; top: -18vh; animation: orb-a calc(44s / var(--bg-speed, 1)) ease-in-out infinite alternate; }
.bg-orbs .o2 { width: 44vw; height: 44vw; min-width: 390px; min-height: 390px;
  right: -12vw; top: 22vh; animation: orb-b calc(56s / var(--bg-speed, 1)) ease-in-out infinite alternate; }
.bg-orbs .o3 { width: 50vw; height: 50vw; min-width: 430px; min-height: 430px;
  left: 6vw; bottom: -24vh; animation: orb-c calc(64s / var(--bg-speed, 1)) ease-in-out infinite alternate; }
@keyframes orb-a { to { transform: translate(7vw, 6vh); } }
@keyframes orb-b { to { transform: translate(-6vw, 8vh); } }
@keyframes orb-c { to { transform: translate(9vw, -5vh); } }

/* пресеты фона (пакет 148, выбор — кнопка ✦ рядом с темой; рендер bg-fx.js) */
/* блобы: органические формы, медленное вращение в разные стороны */
.bg-orbs .blob { position: absolute;
  opacity: calc(var(--orb-op, .12) * 1.35 * var(--bg-int, 1)); }
.bg-orbs .blob.b1 { width: 58vw; height: 58vw; min-width: 480px;
  min-height: 480px; left: -16vw; top: -20vh;
  animation: blob-spin calc(110s / var(--bg-speed, 1)) linear infinite; }
.bg-orbs .blob.b2 { width: 48vw; height: 48vw; min-width: 420px;
  min-height: 420px; right: -14vw; bottom: -18vh;
  animation: blob-spin calc(140s / var(--bg-speed, 1)) linear infinite reverse; }
@keyframes blob-spin { to { transform: rotate(360deg); } }
/* волны: полоса 200% из двух одинаковых svg, бесшовный дрейф на −50% */
.bg-orbs .bgw { position: absolute; left: 0; bottom: -2px; width: 200%;
  height: 30vh; display: flex;
  opacity: calc(var(--orb-op, .12) * 1.5 * var(--bg-int, 1));
  animation: wave-drift calc(48s / var(--bg-speed, 1)) linear infinite; }
.bg-orbs .bgw svg { width: 50%; height: 100%; flex: 0 0 50%; display: block; }
@keyframes wave-drift { to { transform: translateX(-50%); } }
/* сияние: крупные пятна с медленным дыханием */
.bg-orbs .au { position: absolute;
  opacity: calc(var(--orb-op, .12) * 1.5 * var(--bg-int, 1)); }
.bg-orbs .au.a1 { width: 72vw; height: 72vw; min-width: 560px;
  min-height: 560px; left: -20vw; top: -26vh;
  animation: au-breathe calc(18s / var(--bg-speed, 1)) ease-in-out infinite alternate; }
.bg-orbs .au.a2 { width: 58vw; height: 58vw; min-width: 460px;
  min-height: 460px; right: -16vw; top: 6vh;
  animation: au-breathe calc(23s / var(--bg-speed, 1)) ease-in-out infinite alternate-reverse; }
.bg-orbs .au.a3 { width: 62vw; height: 62vw; min-width: 480px;
  min-height: 480px; left: 4vw; bottom: -28vh;
  animation: au-breathe calc(27s / var(--bg-speed, 1)) ease-in-out infinite alternate; }
.bg-orbs .au.a4 { width: 40vw; height: 40vw; min-width: 340px;
  min-height: 340px; right: 18vw; bottom: -12vh;
  animation: au-breathe calc(21s / var(--bg-speed, 1)) ease-in-out infinite alternate-reverse; }
@keyframes au-breathe { from { transform: scale(.92); }
  to { transform: scale(1.08); } }
/* россыпь: две группы кружков дрейфуют навстречу */
.bg-orbs .sc { position: absolute; inset: 0; width: 100%; height: 100%;
  opacity: calc(var(--orb-op, .12) * 2.1 * var(--bg-int, 1)); }
.bg-orbs .sc.s1 { animation: sc-a calc(70s / var(--bg-speed, 1)) ease-in-out infinite alternate; }
.bg-orbs .sc.s2 { animation: sc-b calc(84s / var(--bg-speed, 1)) ease-in-out infinite alternate; }
@keyframes sc-a { to { transform: translate(3vw, -2vh); } }
@keyframes sc-b { to { transform: translate(-3vw, 2vh); } }
/* попап выбора пресета (кнопка #btnBg) */
.bgp-pop { position: fixed; z-index: 300; min-width: 216px; padding: 8px;
  display: flex; flex-direction: column; gap: 2px;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 12px; box-shadow: 0 12px 32px rgba(0, 0, 0, .28); }
.bgp-pop b { font-size: .7rem; text-transform: uppercase;
  letter-spacing: .08em; color: var(--muted); padding: 4px 10px 6px; }
.bgp-item { text-align: left; font: inherit; font-size: .86rem;
  background: none; border: none; color: var(--text); padding: 7px 10px;
  border-radius: 8px; cursor: pointer; }
.bgp-item:hover { background: var(--row-hover); }
.bgp-item.on { background: var(--selection); font-weight: 600; }
.bgp-set { border-top: 1px solid var(--border); margin-top: 6px; padding-top: 6px;
  display: flex; flex-direction: column; gap: 4px; }
.bgp-row { display: flex; align-items: center; justify-content: space-between;
  gap: 10px; font-size: .82rem; color: var(--text-2); padding: 3px 10px; }
.bgp-row input[type="range"] { width: 110px; accent-color: var(--series-1); }
.bgp-colors { display: flex; gap: 6px; }
.bgp-colors input[type="color"] { width: 26px; height: 22px; padding: 0;
  border: 1px solid var(--border); border-radius: 6px; background: none;
  cursor: pointer; }
.bgp-reset { margin: 4px 10px 2px; font: inherit; font-size: .78rem;
  color: var(--text-2); background: none; border: 1px dashed var(--border);
  border-radius: 8px; padding: 5px 8px; cursor: pointer; }
.bgp-reset:hover { color: var(--text); border-color: var(--border-2); }
@media (prefers-reduced-motion: reduce) {
  .bg-orbs .orb, .bg-orbs .blob, .bg-orbs .bgw, .bg-orbs .au, .bg-orbs .sc {
    animation: none; } }

/* ---- база ---- */
body {
  font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;
  background-color:var(--plane);
  background-image:var(--glow);
  background-repeat:no-repeat;
  background-attachment:fixed;
}
::selection { background:var(--ring); }
h1 { letter-spacing:-.01em; }

/* ---- навигация: бренд, рубрики и иконки видны только в сайдбаре
        и в мобильном таб-баре (.mtabs) ---- */
nav .brand, nav .navsec, nav:not(.mtabs) a .ico { display:none; }
nav a { padding:6px 1px; border-bottom:2px solid transparent; }
nav a:hover { color:var(--text); }
nav a.active { color:var(--text); border-color:var(--series-1); }

/* ---- карточки ---- */
.card { border-radius:14px; border:1px solid var(--border); background:var(--surface);
  box-shadow:var(--card-shadow); }

/* ---- поля и кнопки ---- */
select, button, input:not([type=checkbox]):not([type=radio]) {
  border-radius:10px; border:1px solid var(--border); background:var(--field);
  transition:border-color .15s, box-shadow .15s;
}
select:focus, input:focus, button:focus-visible {
  outline:none; border-color:var(--series-1); box-shadow:0 0 0 3px var(--ring);
}
button:hover { border-color:var(--series-1); }
button.primary { background:var(--series-1); color:var(--accent-ink);
  border-color:transparent; font-weight:600; }
button.primary:hover { filter:brightness(1.08); }

/* ---- пилюли-фильтры: активная — тёмный сегмент, как в макете ---- */
.presets .preset { border-radius:99px; padding:6px 14px; }
.presets .preset.active { background:var(--seg-active); color:var(--seg-active-text);
  border-color:transparent; font-weight:600; }
.presets .preset:not(.active):hover { color:var(--text); }

/* ---- KPI ---- */
.kpi .lab { text-transform:uppercase; letter-spacing:.08em; font-size:.68rem;
  font-weight:600; color:var(--muted); }
.kpi .val { font-weight:700; letter-spacing:-.02em; font-variant-numeric:tabular-nums; }

/* ---- таблицы ---- */
th { text-transform:uppercase; letter-spacing:.07em; font-size:.7rem;
  font-weight:600; color:var(--muted); }
td { font-variant-numeric:tabular-nums; }

/* ---- статус-чипы: tint-заливки без рамок, как в макете ---- */
.status { border-radius:99px; padding:2px 10px; background:var(--miss-bg); border-color:transparent; }
.status.ok { background:var(--ok-bg); border-color:transparent; }
.status.plan { background:var(--plan-bg); color:var(--plan); border-color:transparent; }
.status.svc { color:var(--svc); border-color:transparent; background:var(--svc-bg); }
.badge { border-color:transparent; background:var(--miss-bg); }
.badge.ok { background:var(--ok-bg); border-color:transparent; }
.badge.plan { background:var(--plan-bg); border-color:transparent; }
.badge.crit { background:var(--crit-bg); border-color:transparent; }
.badge.warn { background:var(--warn-bg); border-color:transparent; }

/* ---- верхнее меню на узких экранах: одна прокручиваемая строка,
        кнопки темы/выхода прижаты справа и не накладываются на пункты ---- */
@media (max-width: 700px) {
  nav { flex-wrap:nowrap; overflow-x:auto; scrollbar-width:none; align-items:center; }
  nav::-webkit-scrollbar { display:none; }
  nav a { flex:0 0 auto; white-space:nowrap; }
  nav .navright { position:sticky; right:0; margin-left:auto; flex:0 0 auto;
    display:flex; gap:6px; align-items:center; padding-left:18px;
    background:linear-gradient(to right, transparent, var(--plane) 14px); }
}

/* ---- сайдбар на широких экранах: тёмная панель по Figma-макету ---- */
@media (min-width: 1150px) {
  body { padding-left: 244px; }
  nav { position: fixed; left: 0; top: 0; bottom: 0; width: 236px; z-index: 60;
    flex-direction: column; align-items: stretch; gap: 2px; margin: 0;
    padding: 18px 14px 14px; background: var(--panel); box-sizing: border-box;
    border-right: 1px solid var(--panel-border); overflow-y: auto; }
  nav .brand { display: flex; align-items: center; gap: 10px; padding: 2px 8px 16px; }
  /* лого без плашки (просьба 05.08): только зуб и линия-пульс, крупнее */
  nav .brand .brand-logo { flex: 0 0 auto; width: 34px; height: 34px;
    display: flex; align-items: center; justify-content: center;
    color: var(--series-1); }
  nav .brand .brand-logo svg { display: block; }
  nav .brand .brand-name { color: var(--on-panel); font-size: .86rem; font-weight: 700;
    letter-spacing: .14em; line-height: 1.25; }
  nav .brand .brand-name small { display: block; font-size: .58rem; font-weight: 400;
    letter-spacing: .02em; color: var(--nav-muted); }
  nav .navsec { display: block; margin: 16px 0 5px; padding: 10px 10px 0;
    font-size: .74rem; font-weight: 700; text-transform: uppercase;
    letter-spacing: .12em; color: var(--on-panel); opacity: .9;
    border-top: 1px solid rgba(255, 255, 255, .08); }
  nav .navsec:first-of-type { border-top: none; margin-top: 8px; padding-top: 0; }
  nav a { display: flex; align-items: center; gap: 10px;
    border-bottom: none; padding: 7px 10px; border-radius: 10px;
    font-size: .88rem; color: var(--nav-muted); }
  nav a .ico { display: inline-flex; flex: 0 0 auto; opacity: .85; }
  nav a:hover { background: var(--panel-hover); color: var(--on-panel); }
  nav a.active { background: var(--nav-active-bg); color: var(--nav-active-text);
    font-weight: 600; box-shadow: 0 1px 2px rgba(0,0,0,.25); }
  nav a.active .ico { opacity: 1; color: var(--series-1); }
  nav .navright { margin: auto 0 0; padding: 12px 4px 0;
    border-top: 1px solid var(--panel-border); display: flex; gap: 8px;
    color: var(--nav-muted); }
  nav .navright button { background: transparent; border-color: var(--panel-border);
    color: var(--nav-muted); }
  nav .navright button:hover { color: var(--on-panel); border-color: var(--nav-muted); }
}

/* ---- мобильная навигация: таб-бар и меню «Ещё» (Figma Mobile-390) ----
        разметку строит mobile-nav.js из сайдбара; на десктопе скрыта ---- */
.mtabs, .mmenu { display:none; }
@media (max-width: 1149px) {
  /* верхняя строка-меню заменена нижним таб-баром */
  nav:not(.mtabs) { display:none !important; }
  /* отступ под таб-бар — только на страницах, где он построен
     (класс ставит mobile-nav.js; на login.html навигации нет) */
  :root { --mtabs-h:86px; }
  .has-mtabs body { padding-bottom:calc(var(--mtabs-h) + env(safe-area-inset-bottom, 0px)); }

  /* Плавающий док (пакет 278, эталон «Segmented Dynamic Bar» из подборки
     владельца; веер пакета 277 забракован — подписи на контенте не
     читались, дуга разваливалась). Капсула по центру обнимает контент,
     пункты — кружки-иконки, активный разворачивается в пилюлю с подписью.
     Пилюля всегда ровно одна: на странице вне вкладок её носит «Ещё» с
     именем раздела. Док тёмный в ОБЕИХ темах — как сайдбар. */
  .mtabs { position:fixed; z-index:80; margin:0;
    bottom:calc(12px + env(safe-area-inset-bottom, 0px));
    left:50%; transform:translateX(-50%); width:max-content;
    max-width:calc(100vw - 24px); height:60px; padding:0 8px;
    display:flex; align-items:center; gap:6px; border-radius:999px;
    background:var(--panel); border:1px solid var(--panel-border);
    box-shadow:0 14px 34px rgba(4,7,12,.34), 0 2px 8px rgba(4,7,12,.2); }
  .mt-item { flex:0 0 auto; display:flex; align-items:center;
    justify-content:center; width:44px; height:44px; padding:0; gap:0;
    border-radius:50%; background:var(--panel-2); border:none;
    color:var(--nav-muted); font:inherit; cursor:pointer;
    text-decoration:none; transition:background .15s ease, color .15s ease,
    transform .15s ease; }
  .mt-item:hover { color:var(--on-panel); }
  .mt-item:active { transform:scale(.96); }
  .mt-ico { display:flex; align-items:center; justify-content:center; }
  .mt-item svg { width:18px; height:18px; }
  .mt-letter { font-size:.8rem; font-weight:700; }
  /* активный пункт — пилюля: то же состояние, что у активного пункта
     сайдбара (--nav-active-bg/--nav-active-text, иконка --series-1) */
  .mt-item.active { width:auto; padding:0 14px; gap:8px; border-radius:999px;
    background:var(--nav-active-bg); color:var(--nav-active-text);
    border:1px solid var(--panel-border); box-shadow:0 1px 2px rgba(0,0,0,.25); }
  .mt-item.active:hover { color:var(--nav-active-text); }
  .mt-item.active svg { color:var(--series-1); }
  .mt-item.active .mt-ico { animation:mt-pop .2s ease-out; }
  .mt-lab { font-size:.7rem; font-weight:700; text-transform:uppercase;
    letter-spacing:.04em; white-space:nowrap; overflow:hidden;
    text-overflow:ellipsis; max-width:40vw; animation:mt-lab .18s ease-out; }
  /* сдержанный overshoot 1.06 вместо пружины эталона — медицинская BI */
  @keyframes mt-pop { 0% { transform:scale(.9); } 70% { transform:scale(1.06); }
    100% { transform:scale(1); } }
  @keyframes mt-lab { from { opacity:0; transform:translateX(-4px); }
    to { opacity:1; transform:none; } }
  .mt-item:focus-visible { outline:2px solid var(--series-1);
    outline-offset:3px; box-shadow:none; }
  /* подпись неактивного пункта: невидима, но объявляется читалкой */
  .mt-sr { position:absolute; width:1px; height:1px; padding:0; margin:-1px;
    overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; }
  @media (prefers-reduced-motion: reduce) {
    .mt-item.active .mt-ico, .mt-lab { animation:none; }
    .mt-item { transition:none; }
  }

  .mmenu:not([hidden]) { display:block; position:fixed; inset:0; z-index:90; }
  .mmenu-scrim { position:absolute; inset:0; background:rgba(4,7,12,.6);
    backdrop-filter:blur(2px); }
  .mmenu-panel { position:absolute; inset:10px 10px calc(10px + env(safe-area-inset-bottom, 0px));
    display:flex; flex-direction:column; border-radius:20px; overflow:hidden;
    background:var(--panel); color:var(--on-panel);
    border:1px solid var(--panel-border); box-shadow:0 24px 60px rgba(0,0,0,.45); }
  .mmenu-head { display:flex; align-items:center; justify-content:space-between;
    padding:12px 16px 2px; }
  .mmenu-head h2 { margin:0; font-size:1.15rem; letter-spacing:-.01em; color:var(--on-panel); }
  .mmenu-x { width:32px; height:32px; border-radius:50%; background:var(--panel-hover);
    border:1px solid var(--panel-border); color:var(--nav-muted); font-size:.9rem;
    line-height:1; cursor:pointer; }
  .mmenu-x:hover { color:var(--on-panel); border-color:var(--nav-muted); }
  .mmenu-body { flex:1; overflow-y:auto; padding:4px 12px 12px;
    -webkit-overflow-scrolling:touch; }

  .mprofile { display:flex; align-items:center; gap:10px; padding:8px 12px;
    border-radius:12px; background:var(--panel-hover); margin-bottom:6px; }
  .mavatar { flex:0 0 auto; width:34px; height:34px; border-radius:50%;
    display:flex; align-items:center; justify-content:center;
    background:var(--accent-bg); color:var(--series-1); font-weight:700; font-size:.78rem; }
  .mprofile-txt b { display:block; color:var(--on-panel); font-size:.9rem; }
  .mprofile-txt small { color:var(--nav-muted); font-size:.72rem; }

  .msec { margin:6px 0 3px; padding:0 4px; font-size:.66rem; font-weight:700;
    text-transform:uppercase; letter-spacing:.12em; color:var(--on-panel); opacity:.85; }
  /* пункты в две колонки — всё меню помещается на один экран без прокрутки */
  .mgrid { display:grid; grid-template-columns:1fr 1fr; gap:6px; }
  .mgrid-sys { margin-top:10px; }
  /* box-sizing обязателен: без него width:100% + отступы делают плитку шире
     колонки сетки, и соседние кнопки наезжают друг на друга */
  .mrow { display:flex; align-items:center; gap:9px; width:100%; min-width:0;
    box-sizing:border-box;
    padding:9px 11px; border-radius:11px; border:1px solid transparent;
    background:var(--panel-hover); color:var(--on-panel); font:inherit;
    font-size:.86rem; text-align:left; text-decoration:none; cursor:pointer; }
  .mrow .mrow-lab { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .mrow:hover { border-color:var(--panel-border); }
  .mrow:focus-visible, .mmenu-x:focus-visible, .mtheme:focus-visible {
    outline:2px solid var(--series-1); outline-offset:2px; box-shadow:none; }
  .mrow .mrow-ico { display:inline-flex; flex:0 0 auto; color:var(--nav-muted); }
  .mrow .mrow-ico svg { width:16px; height:16px; }
  .mrow .mrow-lab { flex:1 1 auto; }
  .mrow.active { background:var(--nav-active-bg); color:var(--nav-active-text); font-weight:600; }
  .mrow.active .mrow-ico { color:var(--series-1); }
  .mrow.active .chev { color:currentColor; opacity:.6; }
  .mrow-static { cursor:default; }
  .mrow-btn { justify-content:flex-start; color:var(--panel-critical); }
  /* красный — только для «Выйти»: строка «Фон» — обычное действие */
  #mBgBtn.mrow-btn { color:var(--on-panel); }
  .mtheme { width:44px; height:26px; border-radius:99px; background:var(--panel);
    border:1px solid var(--panel-border); color:var(--nav-muted); cursor:pointer;
    font-size:.85rem; line-height:1; }
  .mtheme:hover { color:var(--on-panel); border-color:var(--nav-muted); }
  .mmenu-foot { padding:8px 4px 2px; color:var(--nav-muted); font-size:.68rem; opacity:.8; }
}

/* ---- командная палитра Cmd/Ctrl+K (Figma: Desktop-CommandPalette) ---- */
.cmdk { position:fixed; inset:0; z-index:120; }
.cmdk[hidden] { display:none; }
.cmdk-scrim { position:absolute; inset:0; background:rgba(4,7,12,.55); backdrop-filter:blur(2px); }
.cmdk-panel { position:relative; width:min(620px, calc(100% - 24px)); margin:12vh auto 0;
  background:var(--surface); color:var(--text); border:1px solid var(--border);
  border-radius:16px; overflow:hidden; box-shadow:0 30px 70px rgba(0,0,0,.35); }
.cmdk-input { width:100%; border:none; border-bottom:1px solid var(--border);
  border-radius:0; background:transparent; color:var(--text);
  font:inherit; font-size:1rem; padding:16px 18px; }
.cmdk-input:focus { outline:none; box-shadow:none; border-color:var(--border); }
.cmdk-list { list-style:none; margin:0; padding:6px; max-height:min(52vh, 420px); overflow-y:auto; }
.cmdk-item { display:flex; align-items:center; gap:10px; padding:9px 12px;
  border-radius:10px; cursor:pointer; font-size:.95rem; }
.cmdk-item .cmdk-ico { display:inline-flex; flex:0 0 auto; width:16px; color:var(--muted); }
.cmdk-item .cmdk-ico svg { width:16px; height:16px; }
.cmdk-item .cmdk-hint { margin-left:auto; color:var(--muted); font-size:.72rem;
  text-transform:uppercase; letter-spacing:.08em; }
.cmdk-item.sel { background:var(--ring); }
.cmdk-item.sel .cmdk-ico { color:var(--series-1); }
.cmdk-empty { padding:16px 14px; color:var(--muted); font-size:.9rem; }
.cmdk-foot { display:flex; gap:16px; padding:9px 16px; border-top:1px solid var(--border);
  color:var(--muted); font-size:.72rem; }
.cmdk-foot b { color:var(--text-2); font-weight:600; }

/* ---- строки с полосой (источники, воронки, разбивки) ----
        подпись ужимается, значение занимает по содержимому: длинные
        подписи вроде «24,1 млн ₽ · 508 пац. · верн. 95%» больше не
        выходят за карточку ---- */
.bar-row { grid-template-columns:minmax(84px, 30%) minmax(48px, 1fr) max-content; }
.bar-row .name { display:flex; align-items:center; gap:6px; min-width:0; }
.bar-row .name > .nm { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.bar-row .name > .tag { flex:0 0 auto; margin-left:0; }
@media (max-width: 700px) {
  /* на телефоне полоса переносится под подпись и значение */
  .bar-row { grid-template-columns:1fr auto; row-gap:4px; }
  .bar-row .track { grid-column:1 / -1; order:3; }
  .bar-row .val { white-space:normal; }
}

/* ---- подсветка строк ---- */
tbody tr:hover td { background:var(--row-hover); }

/* ---- тонкие скроллбары ---- */
::-webkit-scrollbar { width:10px; height:10px; }
::-webkit-scrollbar-thumb { background:var(--track); border-radius:99px;
  border:2px solid var(--plane); }
::-webkit-scrollbar-track { background:transparent; }

/* ---- токены страницы «Приложение» (пакет 215, макет Figma
       pmbjHJhraAxRwZ5b9cW4pA). Только алиасы палитры проекта: новых
       цветов нет, тёмная тема наследуется автоматически, --dr1..8
       не затрагиваются. line-soft — производная (мягкая рамка
       вложенных блоков), отдельного hex у неё нет намеренно. ---- */
:root {
  --app-bg:var(--plane); --app-surface:var(--surface); --app-surface-2:var(--field);
  --app-ink:var(--text); --app-ink-2:var(--text-2); --app-ink-3:var(--muted);
  --app-line:var(--border);
  --app-line-soft:color-mix(in srgb, var(--border) 55%, var(--surface));
  --app-ok:var(--good); --app-ok-bg:var(--ok-bg);
  --app-warn:var(--warning); --app-warn-bg:var(--warn-bg);
  --app-info:var(--plan); --app-info-bg:var(--plan-bg);
  --app-mute:var(--muted); --app-mute-bg:var(--miss-bg);
  --app-accent:var(--text); --app-on-accent:var(--surface);
}