/* =====================================================================
   Командный мостик · дизайн-система v2

   Эталон вида: десять листов «UI KIT — Светлый 05» и «UI KIT — Тёмный
   нейтральный» в справка/макеты. Размеры сняты с листов один к одному,
   цвета с отрисовки листов. Тема это только другой набор значений ниже,
   размеры и формы у обеих общие, кроме пары мест, где киты расходятся
   (подпись KPI, полоска активного пункта меню, рамка у статусов).

   Правило для модулей: своих цветов не заводить. Всё, что имеет цвет,
   берётся из ролей: поверхность, текст, акцент, статус, слот графика.
   Тогда раздел сам выглядит правильно в обеих темах.
   ===================================================================== */

/* =====================================================================
   Командный мостик · дизайн-система

   Два кита Антона на одних переменных: «Светлый 05» и «Тёмный
   нейтральный». Тема это только другой набор значений ниже, размеры,
   отступы и формы у обеих одни.

   Правило для модулей: своих цветов не заводить. Всё, что имеет цвет,
   берётся из ролей: поверхность, текст, акцент, статус, слот графика.
   Тогда раздел сам выглядит правильно в обеих темах.
   ===================================================================== */

/* Inter лежит у нас (лицензия SIL OFL): кабинет не зависит от Google Fonts */
@font-face{font-family:'Inter'; font-style:normal; font-display:swap; font-weight:100 900;
  src:url(/core/fonts/inter-cyrillic-wght-normal.woff2) format('woff2-variations'), url(/core/fonts/inter-cyrillic-wght-normal.woff2) format('woff2');
  unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:'Inter'; font-style:normal; font-display:swap; font-weight:100 900;
  src:url(/core/fonts/inter-latin-wght-normal.woff2) format('woff2-variations'), url(/core/fonts/inter-latin-wght-normal.woff2) format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

@font-face{font-family:'Inter'; font-style:normal; font-display:swap; font-weight:100 900;
  src:url(/core/fonts/inter-extra-wght-normal.woff2) format('woff2-variations'), url(/core/fonts/inter-extra-wght-normal.woff2) format('woff2');
  unicode-range:U+20BD}

:root{
  color-scheme: light;

  /* страница: светло-голубой фон с мягкими пятнами, как у кита */
  --page:#EEF4FC;
  --page-bg:
    radial-gradient(1100px 560px at 94% -14%, rgba(191,212,255,.55), transparent 62%),
    radial-gradient(900px 520px at -8% -8%, rgba(214,231,255,.7), transparent 60%),
    linear-gradient(180deg, #F3F7FE 0%, #EDF3FC 100%);
  --bg:#EEF4FC;             /* плоский фон, модули берут его как подложку */

  /* слои: секция с заголовком, карточка внутри, подложки.
     Вариант А (24.09): секции белые, как карточки, а карточка внутри
     секции лежит мягкой подложкой без рамки и тени */
  --panel:#FFFFFF;          /* секция (панель с заголовком) */
  --panel-border:#E2EBF8;
  --well:#F5F8FE;           /* карточка внутри секции: плашка */
  --surface:#FFFFFF;        /* карточки, меню, шапка, выпадающие списки */
  --surface-2:#F1F6FD;      /* шапка таблицы, подложка сегментов, наведение */
  --surface-3:#E6EEFA;      /* нажатие, сегмент под курсором */
  --field:#FFFFFF;          /* поля ввода */
  --raised:#FFFFFF;         /* вторичные кнопки */
  --track:#E1EAF8;          /* дорожка прогресса и кольца */
  --border:#E0E9F6;         /* рамки карточек */
  --border-strong:#CFDBEE;  /* рамки полей и кнопок */
  --divider:#EDF2F9;        /* разделители строк */

  /* текст: тёмно-синий, а не серый, так у кита */
  --ink:#0C1535;            /* заголовки и цифры */
  --ink-2:#1D2A56;          /* основной текст, ячейки */
  --nav-ink:#2F3D6B;        /* пункты меню */
  --label:#3A4A80;          /* подписи показателей */
  --muted:#5B6B9B;          /* пояснения */
  --dim:#8896C1;            /* шапки таблиц, оси, плейсхолдеры */

  /* акцент */
  --accent:#3B82F6; --accent-hover:#2F74F0; --accent-press:#1F63E6; --accent-2:#60A5FA;
  --accent-grad:linear-gradient(180deg, #4389F8 0%, #2F75F2 100%);
  --accent-grad-h:linear-gradient(180deg, #4D91FA 0%, #3A80F5 100%);
  --accent-soft:#E2EBFD;    /* активный пункт меню, выбранная строка */
  --ic-blue:#D5E6FE; --ic-green:#D9F5E6; --ic-red:#FDE3E8; --ic-amber:#FDEFD5; --ic-violet:#EAE2FE; --ic-cyan:#D4F3F8;
  --cyan-ink:#0891B2;
  --accent-softer:#EEF4FE;  /* наведение на вторичное */
  --accent-ink:#1F63E6;     /* синий текст на светлом */
  --accent-glow:0 4px 12px rgba(47,117,242,.28);

  /* статусы: только когда цвет что-то значит, всегда с подписью */
  --ok:#22C55E;   --ok-soft:#E3F6EA;   --ok-ink:#12994C;   --ok-line:transparent;
  --warn:#F59E0B; --warn-soft:#FDF1DC; --warn-ink:#CC7406; --warn-line:transparent;
  --bad:#EF4444;  --bad-soft:#FDE8EB;  --bad-ink:#DF3348;  --bad-line:transparent;
  --info:#3B82F6; --info-soft:#E6EFFD; --info-ink:#1F63E6; --info-line:transparent;
  --violet:#8B5CF6; --violet-soft:#EFE9FE; --violet-ink:#7437E8;
  --teal:#06B6D4;
  --off:#94A3C4;  --off-soft:#EDF1F7;  --off-ink:#5B6B9B;
  --note-ok:#E7F7EE; --note-ok-line:#CDEEDB;
  --note-warn:#FEF4E3; --note-warn-line:#FBE3B9;
  --note-bad:#FDECEF; --note-bad-line:#F9D2D9;
  --note-info:#EAF1FE; --note-info-line:#D3E2FB;

  /* графики. Слоты в порядке кита: синий, зелёный, жёлтый, красный,
     фиолетовый, бирюзовый, голубой, розовый. Сущность получает слот
     один раз и навсегда. Деньги: доход синий, расход красный, чистыми
     зелёный, ровно как на листе «Графики». */
  --c1:#3B82F6; --c2:#22C55E; --c3:#F59E0B; --c4:#EF4444;
  --c5:#8B5CF6; --c6:#06B6D4; --c7:#93C5FD; --c8:#EC4899;
  --c-income:var(--c1); --c-spend:var(--c4); --c-net:var(--c2);
  --c-muted:#CBD5E6;        /* «остальное», фон для выделения одного ряда */
  /* провайдеры: у каждого свой цвет навсегда, на Пульсе и в Royalties одинаковый.
     Оттенки старого дашборда, к ним Антон привык. -pot это потенциал и прогноз */
  --prov-tw:#2563EB;   --prov-tw-pot:#AFC8F7;
  --prov-avps:#0EA5A0; --prov-avps-pot:#A3DEDB;
  --prov-ish:#4CB782;  --prov-ish-pot:#BFE6D0;
  --prov-aeza:#D93A45; --prov-aeza-pot:#F1B3B8;
  --prov-hm:#7C5CE0;   --prov-hm-pot:#CFC3F4;
  --prov-net-pot:#BFE6D0;
  --pale:.4;                /* прозрачность потенциала и прогноза */
  --area-top:.16;           /* заливка под линией у самой линии */
  --grid:#EDF2FA; --axis:#D5DFEE;
  --band:rgba(59,130,246,.055);  /* полоса прогноза и наведение на столбец */
  --band-sel:rgba(59,130,246,.10); /* выбранный месяц */
  --bar-fade:58%;                /* низ столбца: столько цвета остаётся у основания */
  --tip-bg:#FFFFFF; --tip-ink:#0C1535; --tip-muted:#4B5B8C; --tip-line:#E3EBF8;

  /* форма */
  --r-xs:4px; --r-sm:6px; --r-md:7px; --r-lg:8px; --r-xl:10px; --r-2xl:10px; --r-pill:999px;
  --r-card:12px;             /* KPI и плитки на странице */
  --r-sec:12px;              /* секция с заголовком */
  --r-well:10px;             /* плашка внутри секции */
  --shadow-panel:0 1px 2px rgba(24,52,120,.04), 0 6px 22px rgba(24,52,120,.06);
  --shadow-card:0 1px 2px rgba(24,52,120,.05), 0 3px 10px rgba(24,52,120,.035);
  --shadow-pop:0 14px 36px rgba(24,52,120,.16), 0 2px 6px rgba(24,52,120,.06);
  --shadow:var(--shadow-card);
  --shadow-lg:var(--shadow-pop);
  --focus:0 0 0 3px rgba(59,130,246,.22);
  --font:-apple-system,BlinkMacSystemFont,"SF Pro Text",Inter,"Segoe UI",Roboto,Arial,sans-serif;
  --mono:ui-monospace,SFMono-Regular,"SF Mono",Menlo,Consolas,monospace;
  --side:240px;
  --chev:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231D2A56' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");

  /* старые имена: модули, собранные до дизайн-системы, берут их */
  --card:var(--surface); --line:var(--border); --line-soft:var(--divider);
  --blue:var(--accent); --blue-dark:var(--accent-hover); --blue-soft:var(--accent-soft); --blue-ink:var(--accent-ink);
}

:root[data-theme="dark"]{
  color-scheme: dark;
  --page:#0A1520;
  --page-bg:
    radial-gradient(1000px 520px at 90% -12%, rgba(37,99,235,.16), transparent 62%),
    radial-gradient(800px 480px at -10% -4%, rgba(14,165,233,.07), transparent 60%),
    linear-gradient(180deg, #0B1823 0%, #09131D 100%);
  --bg:#0A1520;
  --panel:#112130; --panel-border:#1B2C3C; --well:#152739;
  --surface:#112130; --surface-2:#152739; --surface-3:#1B3047;
  --field:#0F1E2C; --raised:#14263A; --track:#1D3045;
  --border:#1F3245; --border-strong:#2C4259; --divider:#172838;
  --ink:#F3F8FD; --ink-2:#C5D4E5; --label:#9CBAD6; --muted:#7F99B5; --dim:#5F7B98; --nav-ink:#B8CCE2;
  --accent:#2479FA; --accent-hover:#3A89FF; --accent-press:#1661D8; --accent-2:#60A5FA;
  --accent-grad:linear-gradient(180deg, #2E84FF 0%, #1D6DF4 100%);
  --accent-grad-h:linear-gradient(180deg, #4592FF 0%, #2B7BFA 100%);
  --accent-soft:rgba(36,121,250,.18); --accent-softer:rgba(36,121,250,.10); --accent-ink:#5AAEFF;
  --accent-glow:0 4px 14px rgba(36,121,250,.35);
  --ok-soft:rgba(34,197,94,.12);  --ok-ink:#3DDC97;  --ok-line:rgba(34,197,94,.40);
  --warn-soft:rgba(245,158,11,.12); --warn-ink:#F2C14E; --warn-line:rgba(245,158,11,.42);
  --bad-soft:rgba(239,68,68,.13); --bad-ink:#F58A8A; --bad-line:rgba(239,68,68,.42);
  --info:#3B82F6; --info-soft:rgba(59,130,246,.15); --info-ink:#63B3F8; --info-line:rgba(59,130,246,.45);
  --violet-soft:rgba(139,92,246,.16); --violet-ink:#B59CFA;
  --off:#6B84A0; --off-soft:rgba(148,163,184,.10); --off-ink:#A5B8CF;
  --note-ok:rgba(20,120,80,.16); --note-ok-line:rgba(34,197,94,.42);
  --note-warn:rgba(160,110,20,.16); --note-warn-line:rgba(245,158,11,.42);
  --note-bad:rgba(150,40,50,.18); --note-bad-line:rgba(239,68,68,.42);
  --note-info:rgba(30,90,180,.18); --note-info-line:rgba(59,130,246,.45);
  --c7:#7DB4F7;
  /* провайдеры в тёмной теме: подобраны валидатором палитры (вариант А) */
  --prov-tw:#3B82F6;   --prov-tw-pot:#234A83;
  --prov-avps:#1AA89D; --prov-avps-pot:#155A5E;
  --prov-ish:#4CA86F;  --prov-ish-pot:#2A5A4A;
  --prov-aeza:#BD4044; --prov-aeza-pot:#592E38;
  --prov-hm:#9A7BE9;   --prov-hm-pot:#4B477E;
  --prov-net-pot:#1F4A36;
  --c-muted:#3A5068; --grid:#172A3B; --axis:#243A51; --pale:.45; --area-top:.26;
  --band:rgba(96,165,250,.07); --band-sel:rgba(96,165,250,.13); --bar-fade:52%;
  --ic-blue:rgba(59,130,246,.18); --ic-green:rgba(34,197,94,.16); --ic-red:rgba(239,68,68,.17);
  --ic-amber:rgba(245,158,11,.16); --ic-violet:rgba(139,92,246,.2); --ic-cyan:rgba(6,182,212,.16); --cyan-ink:#22D3EE;
  --tip-bg:#152739; --tip-ink:#F3F8FD; --tip-muted:#9CB2CB; --tip-line:#2C4259;
  --shadow-panel:0 1px 0 rgba(255,255,255,.02) inset, 0 10px 28px rgba(0,0,0,.22);
  --shadow-card:0 1px 0 rgba(255,255,255,.03) inset, 0 2px 8px rgba(0,0,0,.18);
  --shadow-pop:0 18px 44px rgba(0,0,0,.5), 0 0 0 1px rgba(255,255,255,.03);
  --focus:0 0 0 3px rgba(59,130,246,.35);
  --chev:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23C5D4E5' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
}

/* ---------- основа ---------- */
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; min-height:100vh; color:var(--ink);
  background:var(--page-bg); background-color:var(--page); background-attachment:fixed;
  font:13px/19px var(--font); -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
}
a{color:inherit; text-decoration:none}
button, input, select, textarea{font-family:inherit}
[hidden]{display:none!important}
:focus-visible{outline:none; box-shadow:var(--focus)}
::selection{background:var(--accent-soft)}
code{font:12.5px/1.4 var(--mono); background:var(--surface-2); border-radius:var(--r-xs); padding:1px 5px; color:var(--ink-2)}

/* типографика кита: H1 32, H2 24, H3 20, H4 16, текст 16 и 14, мелкий 12, подпись 11 */
.h1{font:700 32px/40px var(--font); letter-spacing:-.02em}
.h2{font:700 24px/32px var(--font); letter-spacing:-.015em}
.h3{font:600 20px/28px var(--font); letter-spacing:-.01em}
.h4{font:600 16px/24px var(--font)}
.t-lg{font-size:16px; line-height:24px}
.t-sm{font-size:12px; line-height:16px}
.cap{font:500 11px/16px var(--font); color:var(--muted)}
.muted{color:var(--muted)} .dim{color:var(--dim)}
.num{font-variant-numeric:tabular-nums}
.neg{color:var(--bad-ink)} .pos{color:var(--ok-ink)}

.ic{width:18px; height:18px; flex:none; display:inline-block; vertical-align:middle; fill:none; stroke:currentColor; stroke-width:1.9; stroke-linecap:round; stroke-linejoin:round}
.ic.sm{width:16px; height:16px} .ic.lg{width:22px; height:22px} .ic.xl{width:28px; height:28px}
.ic.fill{fill:currentColor; stroke:none}

/* ---------- каркас: меню и шапка парят над фоном, как на листе «Навигация» ---------- */
.shell{display:flex; min-height:100vh; align-items:flex-start}

/* меню в два уровня: рельса разделов и панель страниц раздела */
.nav{display:flex; gap:10px; position:sticky; top:12px; height:calc(100vh - 24px); margin:12px 0 12px 12px; z-index:30}
aside.rail{
  width:84px; flex:none; background:var(--surface); border:1px solid var(--panel-border); border-radius:var(--r-2xl);
  box-shadow:var(--shadow-panel); display:flex; flex-direction:column; align-items:center; padding:12px 6px 10px; overflow:hidden;
}
.rail .mark{margin-bottom:10px}
/* переключатель темы вверху рельсы: Антон попросил его слева сверху */
.rail #themeBtn{width:38px; height:38px; border-radius:10px; margin-bottom:10px}
.rail #themeBtn .ic{width:19px; height:19px}
.rail-list{display:flex; flex-direction:column; gap:2px; width:100%; overflow-y:auto; scrollbar-width:none}
.rail-list::-webkit-scrollbar{display:none}
.rail-list button{
  position:relative; width:100%; border:0; background:none; border-radius:10px; padding:7px 2px 6px; cursor:pointer;
  display:flex; flex-direction:column; align-items:center; gap:4px; color:var(--nav-ink);
  font:500 10.5px/13px var(--font); text-align:center; transition:background .12s, color .12s;
}
.rail-list button .ic{width:20px; height:20px}
.rail-list button:hover{background:var(--surface-2); color:var(--ink)}
.rail-list button.on{background:var(--accent-soft); color:var(--accent-ink); font-weight:600}
.rail-list button .dot{display:none; position:absolute; right:7px; top:5px; width:7px; height:7px; border-radius:50%; background:var(--accent)}
.rail-list button.cur .dot{display:block}
aside.side{
  width:var(--side); flex:none; height:100%;
  background:var(--surface); border:1px solid var(--panel-border); border-radius:var(--r-2xl); box-shadow:var(--shadow-panel);
  display:flex; flex-direction:column; overflow:hidden;
}
.side-h{display:flex; align-items:center; gap:8px; padding:16px 14px 8px}
.side-h b{font:700 14px/20px var(--font); color:var(--ink); letter-spacing:-.005em; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.side-h em{font-style:normal; margin-left:auto; font:600 11.5px/16px var(--font); color:var(--dim); background:var(--surface-2); border-radius:var(--r-pill); padding:1px 8px}
.brand{display:flex; align-items:center; gap:11px; padding:16px 14px 10px}
.mark{
  width:36px; height:36px; border-radius:9px; flex:none; display:grid; place-items:center; color:#fff;
  background:var(--accent-grad); box-shadow:0 5px 12px rgba(47,117,242,.28);
}
.mark .ic{width:20px; height:20px; stroke-width:2.3}
.brand b{display:block; font:700 14px/19px var(--font); letter-spacing:-.01em; color:var(--ink)}
.brand span{display:block; font:400 12px/16px var(--font); color:var(--dim); margin-top:1px}

nav.menu{flex:1; overflow-y:auto; padding:4px 10px 12px; scrollbar-width:thin; scrollbar-color:var(--border-strong) transparent}
.grp + .grp{margin-top:6px}
.ghead{
  width:100%; display:flex; align-items:center; gap:8px; cursor:pointer; background:none; border:0;
  padding:14px 10px 6px; color:var(--dim); font:700 10.5px/14px var(--font); letter-spacing:.14em; text-transform:uppercase;
}
.ghead:hover{color:var(--muted)}
.ghead .caret{margin-left:auto; width:15px; height:15px; stroke-width:2.2; transition:transform .15s}
.grp.closed .caret{transform:rotate(-90deg)}
.grp.closed .gitems{display:none}
.grp.flat .ghead{display:none}
.gitems{display:flex; flex-direction:column; gap:2px}
.gitems a{
  position:relative; display:flex; align-items:center; gap:10px; min-height:38px; padding:0 10px;
  border-radius:7px; font:500 14px/20px var(--font); color:var(--nav-ink); cursor:pointer;
  transition:background .12s, color .12s;
}
.gitems a .ic{width:18px; height:18px; flex:none; stroke-width:1.8; color:var(--nav-ink)}
/* длинное название ужимаем, метку справа не режем */
.gitems a > span{min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.gitems a:hover{background:var(--surface-2)}
.gitems a.on{background:var(--accent-soft); color:var(--accent-ink); font-weight:600}
.gitems a.on .ic{color:var(--accent-ink)}
.gitems a .tag{
  margin-left:auto; flex:none; max-width:84px; font:600 10.5px/16px var(--font); color:var(--muted);
  background:var(--surface-2); border-radius:var(--r-pill); padding:2px 7px; font-style:normal;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.gitems a .dotn{margin-left:auto; width:8px; height:8px; border-radius:50%; background:var(--bad)}
/* ветки раздела (вариант В, 03.10): заголовок ветки и её страницы, открыта всегда одна */
.gitems .gbr{
  display:flex; align-items:center; gap:10px; width:100%; min-height:38px; padding:0 10px; border:0; background:none;
  border-radius:7px; font:500 14px/20px var(--font); color:var(--nav-ink); cursor:pointer; text-align:start;
  transition:background .12s, color .12s;
}
.gitems .gbr .ic{width:18px; height:18px; flex:none; stroke-width:1.8; color:var(--nav-ink)}
.gitems .gbr > span{min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.gitems .gbr .caret{margin-inline-start:auto; width:15px; height:15px; stroke-width:2.2; color:var(--dim); transform:rotate(-90deg); transition:transform .15s}
[dir="rtl"] .gitems .gbr .caret{transform:rotate(90deg)}
.gitems .gbr.open .caret, [dir="rtl"] .gitems .gbr.open .caret{transform:none}
.gitems .gbr:hover{background:var(--surface-2)}
.gitems .gbr.open{color:var(--ink); font-weight:600}
.gsub{display:flex; flex-direction:column; gap:2px; margin:0 0 4px; margin-inline-start:18px; padding-inline-start:8px; border-inline-start:1px solid var(--border)}
.gsub a{min-height:34px; font-size:13.5px}
.gsub a .ic{display:none}

.side-foot{
  margin:0 10px 10px; padding:10px 6px; border-top:1px solid var(--divider);
  display:flex; align-items:center; gap:12px; min-width:0;
}
.side-foot .ava{
  position:relative; width:34px; height:34px; border-radius:50%; flex:none; display:grid; place-items:center;
  background:var(--accent-soft); color:var(--accent-ink); font:600 15px/1 var(--font);
}
.side-foot .ava::after{
  content:''; position:absolute; right:-1px; bottom:-1px; width:11px; height:11px; border-radius:50%;
  background:var(--ok); box-shadow:0 0 0 2px var(--surface);
}
.side-foot.err .ava::after{background:var(--bad)}
.side-foot .who-t{min-width:0}
.side-foot b{display:block; font:600 14px/20px var(--font); color:var(--ink)}
.side-foot #who{display:block; font:400 12px/16px var(--font); color:var(--muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.side-foot.err #who{color:var(--bad-ink); white-space:normal}

main{flex:1; min-width:0; display:flex; flex-direction:column; padding:0 16px 0 12px}
header.top{position:sticky; top:0; z-index:20; padding:12px 0 12px; background:var(--page-bg); background-color:var(--page); background-attachment:fixed}
header.top .hdr{
  display:flex; align-items:center; gap:10px 10px; flex-wrap:wrap; min-height:66px; padding:12px 12px 12px 20px;
  background:var(--surface); border:1px solid var(--panel-border); border-radius:var(--r-2xl); box-shadow:var(--shadow-panel);
}
header.top .ttl{min-width:0}
header.top h1{font:700 19px/25px var(--font); letter-spacing:-.015em; margin:0; color:var(--ink)}
header.top p{margin:1px 0 0; font:400 12.5px/17px var(--font); color:var(--muted)}
.grow{flex:1}
.hbar{display:flex; align-items:center; gap:10px; flex-wrap:wrap}
header.top .navbtn{display:none}
header.top .sep{width:1px; height:28px; background:var(--divider); flex:none}

/* штамп свежести: в шапке это плашка как «Апр 2026» у кита, в разделе просто подпись */
.stamp{font:500 12px/16px var(--font); color:var(--muted); white-space:nowrap; display:inline-flex; align-items:center; gap:6px}
.stamp .ic{width:15px; height:15px}
header.top #stamp{
  height:38px; padding:0 13px; border:1px solid var(--border-strong); border-radius:var(--r-md); background:var(--surface);
  font:500 13px/1 var(--font); color:var(--ink-2); gap:8px;
}
header.top #stamp:empty{display:none}
/* штамп свежести переехал в меню второго уровня, над подписью пользователя (05.10) */
.side-stamp{margin:0 10px; padding:6px 6px 10px; min-width:0}
.side-stamp .stamp{white-space:normal}
.side-stamp:has(#stamp:empty){display:none}
body.nav-mini .side-stamp{display:none}
header.top #stamp .ic{width:17px; height:17px; color:var(--ink-2)}

.body{padding:0 0 56px; max-width:1520px; width:100%}
.page{transition:opacity .15s}
.page.busy{opacity:.55}
/* загрузка данных (03.10): полоска сверху и подсказка, если долго */
#ldbar{position:fixed; left:0; right:0; top:0; height:3px; z-index:200; pointer-events:none; overflow:hidden; opacity:0; transition:opacity .2s}
#ldbar.on{opacity:1}
#ldbar i{position:absolute; top:0; bottom:0; left:0; width:36%; border-radius:3px; background:var(--accent); animation:ldrun 1.15s ease-in-out infinite}
@keyframes ldrun{from{transform:translateX(-100%)} to{transform:translateX(278%)}}
#ldtip{
  position:fixed; left:50%; bottom:22px; z-index:200; display:flex; align-items:center; gap:10px; padding:9px 16px 9px 13px;
  border-radius:999px; background:var(--ink); color:var(--surface); font:500 13.5px/18px var(--font); white-space:nowrap;
  box-shadow:0 8px 24px rgba(12,21,53,.24); pointer-events:none; opacity:0; transform:translate(-50%, 8px); transition:opacity .2s, transform .2s;
}
#ldtip.on{opacity:1; transform:translate(-50%, 0)}
#ldtip::before{content:''; flex:none; width:14px; height:14px; border-radius:50%; border:2px solid currentColor; border-top-color:transparent; animation:ldspin .8s linear infinite}
@keyframes ldspin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){ #ldbar i{animation-duration:2.6s} #ldtip::before{animation-duration:1.8s} }
section{margin-bottom:14px}

/* ---------- секция: белая карточка с заголовком и пояснением под ним (вариант А) ---------- */
.card{background:var(--panel); border:1px solid var(--border); border-radius:var(--r-sec); box-shadow:var(--shadow-card); overflow:clip}
.card > h2, .card > .ksum-l > h2{
  margin:0; padding:15px 18px 10px; display:flex; flex-wrap:wrap; align-items:center; column-gap:10px; row-gap:2px;
  font:650 15.5px/21px var(--font); letter-spacing:-.005em; color:var(--ink);
}
/* текст заголовка слева, пояснение строкой ниже, счётчик и кнопки справа */
.card > h2::after{content:''; order:1; flex:1 1 0}
.card > h2 > *{order:2}
.card > h2 > .kn{order:0; margin-right:-6px; color:var(--accent-ink)}
.card > h2 > small{order:3; flex:0 0 100%; font:400 12.5px/17px var(--font); color:var(--muted); letter-spacing:0}
.card > h2 > small:empty{display:none}
.card > h2 .count{
  font:600 11.5px/15px var(--font); color:var(--muted); letter-spacing:0;
  background:var(--surface-2); border:1px solid var(--border); border-radius:var(--r-pill); padding:2px 9px; white-space:nowrap;
}
.card > h2 .hr{display:flex; align-items:center; gap:8px}
.pad{padding:0 18px 16px}
.card > .tw{padding:0 12px 12px}
.card > .tw:first-child{padding-top:12px}
.twocol{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:14px; margin-bottom:14px}
.twocol > section, .twocol > .card{margin-bottom:0}
.grid3{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px; margin-bottom:14px}
.grid3 > section{margin-bottom:0}
.split{display:grid; grid-template-columns:minmax(0,1.9fr) minmax(300px,1fr); gap:14px; margin-bottom:14px}
.split > section{margin-bottom:0}
@media (max-width:900px){ .twocol, .grid3, .split{grid-template-columns:minmax(0,1fr)} }

/* карточка внутри секции: белая, тоньше, радиус меньше */
.box{background:var(--surface); border:1px solid var(--border); border-radius:var(--r-card); box-shadow:var(--shadow-card); min-width:0}
/* внутри белой секции карточки лежат плашкой: мягкий фон, без рамки и тени */
:is(.card, .stub) :is(.box, .tile, .kpi, .stat, .dcard, .bl, .mini-w){background:var(--well); border-color:transparent; box-shadow:none; border-radius:var(--r-well)}
:is(.card, .stub) :is(.stat.bad, .stat.ok){background:var(--well)}

/* строка итогов под графиком: «уже пришло 776 028 ₽ · ещё в сентябре +35 914 ₽» */
.ch-foot{display:flex; flex-wrap:wrap; gap:6px 22px; border-top:1px solid var(--divider); margin-top:10px; padding-top:10px; font:400 12.5px/18px var(--font); color:var(--muted)}
.ch-foot b{color:var(--ink); font-weight:650; font-variant-numeric:tabular-nums; white-space:nowrap}

/* ---------- показатели ---------- */
.tiles{display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:14px; margin-bottom:14px}
.tile{
  position:relative; background:var(--surface); border:1px solid var(--border); border-radius:var(--r-card);
  padding:14px 16px 13px; box-shadow:var(--shadow-card); min-width:0;
}
.tile .lab{font:500 13px/18px var(--font); color:var(--label)}
.tile .val{font:700 24px/30px var(--font); letter-spacing:-.015em; margin:5px 0 3px; color:var(--ink); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; font-variant-numeric:tabular-nums}
.tile .val small, .kpi .v small{font-size:.66em; font-weight:600; color:var(--muted); letter-spacing:0}
.tile .val[style*="--vl"]{font-size:clamp(17px, calc(100cqw * 1.6 / var(--vl)), 24px)}
.tile .val.small{font:600 15px/22px var(--font); letter-spacing:0; color:var(--ink-2); white-space:normal}
.tile .sub{font:400 12px/16px var(--font); color:var(--muted)}
.tile.good .val{color:var(--ok-ink)} .tile.bad .val{color:var(--bad-ink)} .tile.warn .val{color:var(--warn-ink)}
.tile.accent{background:linear-gradient(160deg, var(--accent-softer) 0%, var(--surface) 70%); border-color:color-mix(in srgb, var(--accent) 30%, var(--border))}
.tile.accent .val{color:var(--accent-ink)}

/* KPI-карточка (вариант А): значок 40 в квадрате, подпись, крупная цифра с мелкой единицей,
   изменение пилюлей, пояснение строкой, мини-график 60×34 справа внизу */
.stat{
  position:relative; background:var(--surface); border:1px solid var(--border); border-radius:var(--r-card); box-shadow:var(--shadow-card);
  padding:16px 16px 14px; min-width:0; min-height:112px; overflow:hidden;
  display:grid; grid-template-columns:40px minmax(0,1fr); column-gap:12px; align-content:start;
  grid-template-areas:"ic l" "ic v" "d d" "s s";
}
.stat-ic{
  grid-area:ic; align-self:start; width:40px; height:40px; border-radius:10px; display:grid; place-items:center;
  background:var(--ic-blue, var(--accent-soft)); color:var(--accent-ink);
}
.stat-ic .ic{width:20px; height:20px; stroke-width:2}
.stat-l{grid-area:l; font:500 13px/17px var(--font); color:var(--label); padding-top:0; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.stat-v{grid-area:v; font:700 24px/30px var(--font); letter-spacing:-.015em; color:var(--ink); white-space:nowrap; margin-top:2px; font-variant-numeric:tabular-nums}
.stat-v small{font-size:16px; font-weight:600; color:var(--muted); letter-spacing:0; margin-left:1px}
/* цифра всегда целиком: в узкой карточке (пять в ряд, телефон) шрифт сжимается
   под ширину. --vl это длина цифры в знаках, её ставят stat(), tile() и kpi() */
.stat, .tile, .kpi{container-type:inline-size}
.stat-v[style*="--vl"]{font-size:clamp(17px, calc((100cqw - 52px) * 1.6 / var(--vl)), 24px)}
.stat.noic .stat-v[style*="--vl"]{font-size:clamp(17px, calc(100cqw * 1.6 / var(--vl)), 24px)}
.stat-v small{font-size:.66em}
/* подпись тоже целиком: в узкой карточке шрифт чуть мельче, а не многоточие */
.stat-l[style*="--ll"]{font-size:clamp(11px, calc((100cqw - 52px) * 1.64 / var(--ll)), 13px)}
.stat.noic .stat-l[style*="--ll"]{font-size:clamp(11px, calc(100cqw * 1.64 / var(--ll)), 13px)}
.kpi .k[style*="--ll"]{font-size:clamp(11px, calc(100cqw * 1.64 / var(--ll)), 13px)}
.stat-v.good{color:var(--ok-ink)} .stat-v.bad{color:var(--bad-ink)}
.stat-d{grid-area:d; margin-top:12px; min-height:20px; display:flex; align-items:center; gap:8px; min-width:0}
.stat-s{grid-area:s; font:400 12px/16px var(--font); color:var(--muted); margin-top:6px}
.stat.has-sp .stat-d, .stat.has-sp .stat-s{padding-right:70px}
.stat-sp{position:absolute; right:14px; bottom:12px; width:60px; height:34px; pointer-events:none}
/* изменение в KPI и в карточке направления: пилюля с мягким фоном */
:is(.stat-d, .ddl) .delta{padding:2px 8px; border-radius:var(--r-pill); font-size:12px; line-height:16px; background:var(--off-soft)}
:is(.stat-d, .ddl) .delta.up{background:var(--ok-soft)}
:is(.stat-d, .ddl) .delta.down{background:var(--bad-soft)}
:is(.stat-d, .ddl) .delta.flat{color:var(--off-ink)}
:is(.stat-d, .ddl) .delta i{width:8px; height:7px; margin-right:1px}
.stat.ok .stat-ic{background:var(--ic-green, var(--ok-soft)); color:var(--ok-ink)}
.stat.warn .stat-ic{background:var(--ic-amber, var(--warn-soft)); color:var(--warn-ink)}
.stat.bad .stat-ic{background:var(--ic-red, var(--bad-soft)); color:var(--bad-ink)}
.stat.violet .stat-ic{background:var(--ic-violet, var(--violet-soft)); color:var(--violet-ink)}
.stat.cyan .stat-ic{background:var(--ic-cyan); color:var(--cyan-ink)}
/* тёплая и прохладная карточка: расход в минус и чистая прибыль, как в варианте А */
.stat.bad{background:linear-gradient(135deg, var(--surface) 45%, var(--note-bad) 100%)}
.stat.ok{background:linear-gradient(135deg, var(--surface) 45%, var(--note-ok) 100%)}
.stat.bad .stat-s{color:var(--bad-ink)}
.stat > .bars{grid-column:1 / -1; margin-top:12px}
.stat.info{grid-template-areas:"ic l" "ic v" "ic d" "ic s"}
.stat.info > .bars{grid-column:2}
.stat.info .stat-ic{width:40px; height:40px}
.stat.noic{grid-template-columns:minmax(0,1fr); grid-template-areas:"l" "v" "d" "s"}
/* мини-графики KPI: столбики с градиентом и линия с заливкой */
.mbars{display:flex; align-items:flex-end; justify-content:flex-end; gap:3px; height:100%}
.mbars i{flex:1; max-width:8px; min-width:3px; border-radius:2px 2px 1px 1px; background:linear-gradient(180deg, var(--c) 0%, color-mix(in srgb, var(--c) 45%, var(--surface)) 100%)}
/* много столбиков (дни месяца): тоньше и плотнее, чтобы не вылезать на текст */
.mbars.many{gap:1px}
.mbars.many i{min-width:1px; border-radius:1px 1px 0 0}
.msvg{width:100%; height:100%; display:block; overflow:visible}
/* компактная KPI-карточка: подпись, цифра, изменение и значок в углу */
.kpis{display:grid; grid-template-columns:repeat(auto-fit,minmax(160px,1fr)); gap:12px; margin-bottom:14px}
.kpi{
  position:relative; background:var(--surface); border:1px solid var(--border); border-radius:var(--r-card); box-shadow:var(--shadow-card);
  padding:12px 14px 11px; min-width:0; display:flex; flex-direction:column;
}
.kpi .k{font:500 13px/18px var(--font); color:var(--label); white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.kpi .v{font:700 20px/26px var(--font); margin-top:4px; letter-spacing:-.015em; color:var(--ink); white-space:nowrap; font-variant-numeric:tabular-nums}
.kpi .v[style*="--vl"]{font-size:clamp(15px, calc(100cqw * 1.6 / var(--vl)), 20px)}
.kpi .u{font:400 12px/16px var(--font); color:var(--muted); margin-top:2px}
.kpi:has(.kc) .u{margin-top:auto; padding-top:6px}
.kpi .u:empty{display:none}
.kpi.good .v{color:var(--ok-ink)} .kpi.bad .v{color:var(--bad-ink)} .kpi.warn .v{color:var(--warn-ink)}
.kpi .kc{position:absolute; right:11px; bottom:10px; color:var(--accent); opacity:.9}
.kpi:has(.kc) .u{padding-right:26px}
.kpi .kc .ic{width:18px; height:18px}

/* изменение к прошлому периоду: ▲ +5% зелёным, ▼ −8% красным */
.delta{display:inline-flex; align-items:center; gap:4px; font:600 12.5px/16px var(--font); white-space:nowrap; font-variant-numeric:tabular-nums}
.delta i{flex:none; width:9px; height:8px; margin-right:2px; background:currentColor; clip-path:polygon(50% 0, 100% 100%, 0 100%)}
.delta.down i{clip-path:polygon(0 0, 100% 0, 50% 100%)}
/* цвет говорит, хорошо это или плохо, а стрелка куда пошло: расход упал, это зелёная стрелка вниз */
.delta.rise i{clip-path:polygon(50% 0, 100% 100%, 0 100%)}
.delta.fall i{clip-path:polygon(0 0, 100% 0, 50% 100%)}
.delta.flat i{height:2px; width:8px; clip-path:none; border-radius:1px}
.delta.dot i{width:8px; height:8px; border-radius:50%; clip-path:none}
.delta.up{color:var(--ok-ink)} .delta.down{color:var(--bad-ink)} .delta.flat{color:var(--muted)}
.delta.soft{padding:3px 9px; border-radius:var(--r-pill)}
.delta.soft.up{background:var(--ok-soft)} .delta.soft.down{background:var(--bad-soft)} .delta.soft.flat{background:var(--off-soft)}

/* ---------- кнопки: 36 по умолчанию, 40 крупная, 32 мелкая, 48 большая ---------- */
.btn, button.act{
  display:inline-flex; align-items:center; justify-content:center; gap:7px; height:34px; padding:0 13px;
  border-radius:var(--r-md); border:1px solid var(--border-strong); background:var(--raised); color:var(--ink-2);
  font:500 13px/1 var(--font); cursor:pointer; white-space:nowrap; text-decoration:none;
  transition:background .12s, border-color .12s, color .12s, box-shadow .12s;
}
.btn .ic, button.act .ic{width:16px; height:16px}
.btn .ic.sm{width:14px; height:14px; margin-right:-2px}
.btn:hover, button.act:hover{background:var(--accent-softer); border-color:color-mix(in srgb, var(--accent) 35%, var(--border-strong)); color:var(--accent-ink)}
.btn:active, button.act:active{background:var(--accent-soft)}
.btn.pri, button.act.pri{background:var(--accent-grad); border-color:transparent; color:#fff; box-shadow:var(--accent-glow)}
.btn.pri:hover, button.act.pri:hover{background:var(--accent-grad-h); color:#fff; border-color:transparent}
.btn.pri:active, button.act.pri:active{background:var(--accent-press); box-shadow:none}
.btn.ghost{background:var(--surface); border-color:var(--border); color:var(--accent-ink)}
.btn.ghost:hover{background:var(--accent-softer); border-color:var(--border)}
.btn.ghost:active{background:var(--accent-soft)}
.btn.link{background:transparent; border-color:transparent; color:var(--accent-ink); padding:0 6px}
.btn.link:hover{background:var(--accent-softer)}
.btn.outline{background:transparent; border-color:color-mix(in srgb, var(--accent) 55%, transparent); color:var(--accent-ink)}
.btn.danger, button.act.danger.solid{background:linear-gradient(180deg,#F25561 0%,#E63B48 100%); border-color:transparent; color:#fff; box-shadow:0 4px 12px rgba(230,59,72,.25)}
.btn.danger:hover{background:linear-gradient(180deg,#F4626D 0%,#EA4653 100%); color:#fff; border-color:transparent}
.btn.danger:active{background:#F26B79; box-shadow:none}
.btn.icon{width:34px; padding:0}
.btn.sm{height:30px; padding:0 11px; font-size:12.5px; border-radius:6px} .btn.sm.icon{width:30px}
.btn.lg{height:38px; padding:0 18px; border-radius:var(--r-md)} .btn.lg.icon{width:38px}
.btn.xl{height:44px; padding:0 22px; font-size:14px; border-radius:8px}
.btn.round{border-radius:50%}
.btn:disabled, button.act:disabled, .btn.is-disabled{background:var(--surface-2); border-color:var(--border); color:var(--dim); box-shadow:none; opacity:.8; cursor:default; pointer-events:none}
.btn.pri:disabled, .btn.pri.is-disabled{background:color-mix(in srgb, var(--accent) 16%, var(--surface-2)); color:color-mix(in srgb, var(--accent) 35%, var(--dim)); border-color:transparent}
.btn.danger:disabled, .btn.danger.is-disabled{background:var(--bad-soft); color:color-mix(in srgb, var(--bad) 55%, transparent); border-color:transparent}
.btn .badge-n, .ibtn .badge-n{
  position:absolute; top:-6px; right:-6px; min-width:18px; height:18px; padding:0 5px; border-radius:9px;
  background:var(--bad); color:#fff; font:700 11px/18px var(--font); box-shadow:0 0 0 2px var(--surface);
}
.btn .dot-n, .ibtn .dot-n{position:absolute; top:7px; right:8px; width:8px; height:8px; border-radius:50%; background:var(--bad); box-shadow:0 0 0 2px var(--surface)}
.btn.has-n{position:relative}
/* кнопка-значок в шапке: колокольчик, тема */
.ibtn{
  width:38px; height:38px; flex:none; display:inline-grid; place-items:center; border-radius:var(--r-md); position:relative;
  border:1px solid var(--border-strong); background:var(--surface); color:var(--ink-2); cursor:pointer; padding:0;
  transition:background .12s, border-color .12s, color .12s;
}
.ibtn .ic{width:18px; height:18px}
.ibtn:hover{background:var(--accent-softer); color:var(--accent-ink); border-color:color-mix(in srgb, var(--accent) 35%, var(--border-strong))}
.ibtn.round{border-radius:50%}
.ibtn.pri{background:var(--accent-grad); color:#fff; border-color:transparent; box-shadow:var(--accent-glow)}
.phone-only{display:none}

/* ---------- поля ---------- */
select.sel, .inp{
  height:36px; font:500 13px/1 var(--font); color:var(--ink); background-color:var(--field);
  border:1px solid var(--border-strong); border-radius:var(--r-md); padding:0 12px; max-width:320px;
  transition:border-color .12s, box-shadow .12s;
}
select.sel{appearance:none; -webkit-appearance:none; padding-right:36px; cursor:pointer;
  background-image:var(--chev); background-repeat:no-repeat; background-position:right 11px center; background-size:16px}
select.sel:hover, .inp:hover{border-color:color-mix(in srgb, var(--accent) 35%, var(--border-strong))}
select.sel:focus, .inp:focus{outline:none; border-color:var(--accent); box-shadow:var(--focus)}
select.sel.pri{background-color:var(--accent); color:#fff; border-color:transparent; box-shadow:var(--accent-glow);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E")}
.inp::placeholder{color:var(--dim)}
.inp:disabled, select.sel:disabled{background-color:var(--surface-2); color:var(--dim); cursor:default}
.inp.err{border-color:var(--bad); background-color:color-mix(in srgb, var(--bad-soft) 50%, var(--field)); color:var(--bad-ink)}
.inp.ok{border-color:color-mix(in srgb, var(--ok) 60%, var(--border-strong))}
.field{position:relative; display:inline-flex; align-items:center; max-width:100%}
.field > .ic{position:absolute; left:11px; width:17px; height:17px; color:var(--muted); pointer-events:none}
.field > .inp{padding-left:36px; width:100%}
.field > .kbd{position:absolute; right:8px; font:600 11px/1 var(--font); color:var(--muted); background:var(--surface-2); border:1px solid var(--border); border-radius:6px; padding:4px 6px}
.field > .end{position:absolute; right:10px; width:18px; height:18px}
.field > .end.ok{color:var(--ok)} .field > .end.bad{color:var(--bad)}
label.lbl{display:flex; flex-direction:column; gap:6px; font:500 12px/16px var(--font); color:var(--muted)}
input[type=checkbox], input[type=radio]{accent-color:var(--accent)}

/* чекбокс, радио, переключатель в духе кита */
.cbx, .rdo, .sw{display:inline-flex; align-items:center; gap:10px; font:400 13px/19px var(--font); color:var(--ink-2); cursor:pointer; user-select:none}
.cbx input, .rdo input, .sw input{position:absolute; opacity:0; width:0; height:0}
.cbx i{width:16px; height:16px; border-radius:4.5px; border:1.5px solid var(--border-strong); background:var(--field); flex:none; display:grid; place-items:center; transition:background .12s, border-color .12s}
.cbx input:checked + i{background:var(--accent); border-color:var(--accent)}
.cbx input:checked + i::after{content:''; width:9px; height:5px; border:2px solid #fff; border-top:0; border-right:0; transform:translateY(-1px) rotate(-45deg)}
.cbx input:indeterminate + i{background:var(--accent); border-color:var(--accent)}
.cbx input:indeterminate + i::after{content:''; width:8px; height:2px; border-radius:1px; background:#fff}
.rdo i{width:17px; height:17px; border-radius:50%; border:1.5px solid var(--border-strong); background:var(--field); flex:none; display:grid; place-items:center}
.rdo input:checked + i{border:2px solid var(--accent)}
.rdo input:checked + i::after{content:''; width:8px; height:8px; border-radius:50%; background:var(--accent)}
.sw i{width:34px; height:20px; border-radius:10px; background:var(--c-muted); flex:none; position:relative; transition:background .15s}
.sw i::after{content:''; position:absolute; top:3px; left:3px; width:14px; height:14px; border-radius:50%; background:#fff; box-shadow:0 1px 3px rgba(15,23,42,.25); transition:transform .15s}
.sw input:checked + i{background:var(--accent)}
.sw input:checked + i::after{transform:translateX(14px)}
.cbx input:disabled + i, .rdo input:disabled + i, .sw input:disabled + i{opacity:.45}
.cbx:has(input:disabled), .rdo:has(input:disabled), .sw:has(input:disabled){color:var(--dim); cursor:default}
.cbx input:focus-visible + i, .rdo input:focus-visible + i, .sw input:focus-visible + i{box-shadow:var(--focus)}

/* ---------- сегменты: период и разрез в шапке, переключатели в разделах ---------- */
.seg, .chips{
  display:inline-flex; align-items:center; gap:3px; padding:3px; height:38px;
  background:var(--surface-2); border:1px solid var(--border); border-radius:var(--r-lg); flex-wrap:nowrap; max-width:100%; overflow-x:auto; scrollbar-width:none;
}
.seg button, .chip{
  height:30px; font:500 13px/18px var(--font); color:var(--ink-2); background:transparent; border:0; border-radius:6px;
  padding:0 13px; cursor:pointer; white-space:nowrap; transition:background .12s, color .12s;
}
.seg button:hover, .chip:hover{background:var(--surface-3); color:var(--ink)}
.seg button.on, .chip.on{background:var(--accent-grad); color:#fff; box-shadow:0 2px 8px rgba(47,117,242,.30); font-weight:600}
.seg.sm{height:32px} .seg.sm button{height:24px; padding:0 9px; font-size:12.5px}
/* сегменты с иконкой над подписью */
.seg.tall{height:auto; padding:4px; gap:4px}
.seg.tall button{height:auto; padding:8px 18px; display:flex; flex-direction:column; align-items:center; gap:4px; font-size:13px}
.seg.tall button .ic{width:22px; height:22px}
.seg.tall button.on{background:var(--surface); color:var(--accent-ink); box-shadow:var(--shadow-card)}
.toggle{
  display:inline-flex; align-items:center; gap:6px; height:38px; padding:0 13px; border-radius:var(--r-md);
  border:1px solid var(--border-strong); background:var(--surface); color:var(--ink-2); font:500 13px/1 var(--font); cursor:pointer;
}
.toggle:hover{background:var(--accent-softer); color:var(--accent-ink)}
.toggle.on{background:var(--accent-soft); border-color:transparent; color:var(--accent-ink); font-weight:600}
/* вкладки линией: активная синим с толстой скруглённой чертой */
.tabs{display:flex; gap:26px; border-bottom:1px solid var(--divider); margin:0 0 16px; overflow-x:auto; scrollbar-width:none}
.tabs button{
  position:relative; font:500 13.5px/19px var(--font); color:var(--muted); background:none; border:0;
  padding:8px 2px 10px; cursor:pointer; white-space:nowrap;
}
.tabs button:hover{color:var(--ink)}
.tabs button.on{color:var(--accent-ink); font-weight:600}
.tabs button.on::after{content:''; position:absolute; left:-6px; right:-6px; bottom:-1px; height:3px; border-radius:3px; background:var(--accent)}

/* фильтры-пилюли: «Все», «Активные», с крестиком, «+ Добавить» */
.pills{display:flex; flex-wrap:wrap; gap:8px; align-items:center}
.fchip{
  display:inline-flex; align-items:center; gap:7px; height:33px; padding:0 15px; border-radius:var(--r-pill);
  border:1px solid var(--border); background:var(--surface-2); color:var(--ink-2); font:500 13px/1 var(--font); cursor:pointer; white-space:nowrap;
}
.fchip:hover{border-color:color-mix(in srgb, var(--accent) 35%, var(--border))}
.fchip.on{background:var(--accent-grad); color:#fff; border-color:transparent; box-shadow:var(--accent-glow)}
.fchip.soft{background:var(--accent-soft); color:var(--accent-ink); border-color:transparent}
.fchip.bad{background:var(--bad-soft); color:var(--bad-ink); border-color:transparent}
.fchip.add{background:transparent; border:1.5px dashed var(--border-strong); color:var(--ink-2)}
.fchip .x{width:14px; height:14px; opacity:.85}

/* ---------- таблица: шапка светлой полосой, строки без сетки, числа справа ---------- */
.tw{overflow-x:auto}
table{border-collapse:separate; border-spacing:0; width:100%; font:400 13px/18px var(--font); min-width:600px; color:var(--ink-2)}
th{
  text-align:left; padding:8px 12px; background:var(--surface-2); color:var(--dim);
  font:600 10px/15px var(--font); letter-spacing:.07em; text-transform:uppercase; white-space:nowrap; border:0;
}
thead tr:first-child th:first-child{border-top-left-radius:7px}
thead tr:first-child th:last-child{border-top-right-radius:7px}
thead tr:last-child th:first-child{border-bottom-left-radius:7px}
thead tr:last-child th:last-child{border-bottom-right-radius:7px}
td{padding:8px 12px; line-height:18px; border-bottom:1px solid var(--divider); color:var(--ink-2); vertical-align:middle}
/* логотип и метка не раздувают строку: высота строки 34 px, как на листе */
td .cell, td > .logo{margin:-4px 0} td .pill, td .bdg{margin:-1px 0}
td .cbx{margin:-1px 0; vertical-align:middle}
tbody tr:last-child td{border-bottom-color:transparent}
tbody tr{transition:background .1s}
tbody tr:hover td{background:color-mix(in srgb, var(--surface-2) 70%, transparent)}
tr.sel td{background:var(--accent-soft)!important}
tr.sel td:first-child{box-shadow:inset 3px 0 0 var(--accent)}
tr.row-bad td{background:color-mix(in srgb, var(--bad-soft) 70%, transparent); color:var(--bad-ink)}
tr.row-off td{color:var(--dim)}
td b, td strong{color:var(--ink); font-weight:600}
td.n, th.n{text-align:right; font-variant-numeric:tabular-nums; white-space:nowrap}
td.n{color:var(--ink)}
td.act{width:44px; text-align:right; color:var(--muted)}
tr.grp-row td{background:transparent; color:var(--accent-ink); font:700 10.5px/15px var(--font); letter-spacing:.1em; text-transform:uppercase; padding:14px 12px 5px; border-bottom:1px solid var(--divider)}
tr.tot td{font-weight:650; color:var(--ink); background:var(--surface-2); border-bottom:0}
tr.tot td:first-child{border-radius:7px 0 0 7px} tr.tot td:last-child{border-radius:0 7px 7px 0}
table.compact td{padding:6px 10px} table.compact th{padding:7px 10px}
td.empty{text-align:center; color:var(--muted); padding:24px 12px; line-height:19px}

/* логотип клиента в таблице: цветной квадрат с буквами */
.logo{display:inline-grid; place-items:center; width:26px; height:26px; border-radius:6px; flex:none; color:#fff; font:700 11px/1 var(--font); letter-spacing:-.02em; vertical-align:middle}
.cell{display:inline-flex; align-items:center; gap:10px; min-width:0}

/* ---------- статусы: пилюля с кружком, у тёмной темы ещё рамка ---------- */
.pill{
  display:inline-flex; align-items:center; gap:6px; height:21px; padding:0 11px 0 7px; border-radius:var(--r-pill);
  font:500 12px/14px var(--font); white-space:nowrap; vertical-align:middle;
  background:var(--off-soft); color:var(--off-ink); border:1px solid var(--pill-line, transparent);
}
.pill::before{
  content:''; width:9px; height:9px; border-radius:50%; flex:none;
  background:radial-gradient(circle, var(--pill-core, #fff) 0 1.4px, currentColor 2px);
}
.pill.nodot{padding-left:10px} .pill.nodot::before{display:none}
.pill.go, .pill.ok{background:var(--ok-soft); color:var(--ok-ink); --pill-line:var(--ok-line)}
.pill.warn{background:var(--warn-soft); color:var(--warn-ink); --pill-line:var(--warn-line)}
.pill.bad{background:var(--bad-soft); color:var(--bad-ink); --pill-line:var(--bad-line)}
.pill.off{background:var(--off-soft); color:var(--off-ink)}
.pill.new, .pill.info{background:var(--info-soft); color:var(--info-ink); --pill-line:var(--info-line)}
.pill.pt, .pill.violet{background:var(--violet-soft); color:var(--violet-ink)}
.pill.new::before{background:transparent; box-shadow:inset 0 0 0 1.8px currentColor}
.pill.off::before{border-radius:2.5px; background:transparent; box-shadow:inset 0 0 0 1.7px currentColor; width:8px; height:8px}
/* крупная метка: сплошная точка, как «Статусные метки» кита */
.pill.lg{height:34px; padding:0 15px 0 11px; font-size:13px; gap:9px}
.pill.lg::before{width:13px; height:13px; background:currentColor}

/* бейджи: «Новое», «live», счётчики */
.bdg{
  display:inline-flex; align-items:center; gap:4px; height:20px; padding:0 8px; border-radius:var(--r-pill); flex:none;
  font:600 11px/14px var(--font); white-space:nowrap; background:var(--off-soft); color:var(--off-ink); border:1px solid var(--pill-line, transparent);
}
.bdg.live{background:var(--ok-soft); color:var(--ok-ink); --pill-line:var(--ok-line)}
.bdg.demo{background:var(--warn-soft); color:var(--warn-ink); --pill-line:var(--warn-line)}
.bdg.plan{background:var(--off-soft); color:var(--off-ink)}
.bdg.wait, .bdg.new{background:var(--info-soft); color:var(--info-ink); --pill-line:var(--info-line)}
.bdg.bad{background:var(--bad-soft); color:var(--bad-ink); --pill-line:var(--bad-line)}
.bdg.n{min-width:20px; justify-content:center; padding:0 6px; border-radius:10px}
.bdg.n.hot{background:var(--bad); color:#fff}
.bdg.lg{height:28px; padding:0 13px; font-size:12.5px; font-weight:600} .bdg.lg.n{min-width:28px; padding:0 8px; border-radius:14px}

/* ---------- доля и прогресс: полоска 8 px и число справа ---------- */
.bars{display:flex; align-items:center; gap:12px; min-width:150px}
.bar{flex:1; height:8px; border-radius:var(--r-pill); background:var(--track); overflow:hidden; min-width:60px}
.bar i{display:block; height:100%; border-radius:inherit; background:linear-gradient(90deg, #5B9BFA 0%, var(--accent-hover) 100%)}
.bar.inc i{background:linear-gradient(90deg, #5B9BFA 0%, var(--accent-hover) 100%)}
.bar.ads i{background:var(--c-spend)}
.bar.ok i{background:linear-gradient(90deg, #4ADE80 0%, var(--ok) 100%)}
.bar.warn i{background:var(--warn)} .bar.bad i{background:linear-gradient(90deg, #F87171 0%, var(--bad) 100%)}
.bars small{font:500 12px/16px var(--font); color:var(--ink-2); min-width:38px; text-align:right; font-variant-numeric:tabular-nums; white-space:nowrap}

/* доход и расход одной строкой */
.dual{display:flex; height:6px; border-radius:var(--r-pill); overflow:hidden; background:var(--track)}
.dual i{display:block; height:100%; border-radius:inherit}
.dual i.a{background:var(--c-income)} .dual i.b{background:var(--c-spend)}

/* микростолбики: светлые старые, насыщенный последний */
.spark{display:flex; align-items:flex-end; gap:3px; height:34px}
.spark i{flex:1; min-width:3px; border-radius:2px 2px 1px 1px; display:block; background:var(--accent); opacity:.35}
.spark i.on{opacity:1; background:linear-gradient(180deg, var(--accent-2), var(--accent-hover))}
.spark i.neg{background:var(--bad); opacity:.9}

/* тепловые ячейки когорт */
.heat td.h{text-align:center; font-variant-numeric:tabular-nums; font-size:13px; padding:6px 4px; border-radius:6px; color:var(--ink)}
.heat td.h span{display:block; font-size:11px; color:var(--muted); margin-top:1px}
.heat th{text-align:center}
.heat th.lead, .heat td.lead{text-align:left}

/* ---------- сообщения: плашка с круглым значком, заголовок цветом статуса ---------- */
.note{
  position:relative; border:1px solid var(--note-info-line); background:var(--note-info); color:var(--ink-2);
  border-radius:var(--r-lg); padding:10px 14px 10px 46px; margin:0 0 12px; font:400 13px/19px var(--font); min-height:42px;
}
.note::before{
  content:''; position:absolute; left:13px; top:10px; width:22px; height:22px; border-radius:50%; background:var(--info);
}
.note::after{
  content:''; position:absolute; left:18px; top:15px; width:12px; height:12px; background:#fff;
  -webkit-mask:var(--m-info) center/contain no-repeat; mask:var(--m-info) center/contain no-repeat;
}
.note b{color:var(--info-ink); font-weight:600}
.note ul{margin:6px 0 0; padding-left:18px}
.note a{color:var(--accent-ink); text-decoration:underline; text-underline-offset:2px}
.note.ok{background:var(--note-ok); border-color:var(--note-ok-line)} .note.ok::before{background:var(--ok)} .note.ok b{color:var(--ok-ink)}
.note.ok::after{-webkit-mask-image:var(--m-ok); mask-image:var(--m-ok)}
.note.warn{background:var(--note-warn); border-color:var(--note-warn-line)} .note.warn::before{background:var(--warn)} .note.warn b{color:var(--warn-ink)}
.note.warn::after{-webkit-mask-image:var(--m-warn); mask-image:var(--m-warn)}
.note.bad{background:var(--note-bad); border-color:var(--note-bad-line)} .note.bad::before{background:var(--bad)} .note.bad b{color:var(--bad-ink)}
.note.bad::after{-webkit-mask-image:var(--m-bad); mask-image:var(--m-bad)}
.note.plain{background:var(--surface); border-color:var(--border)} .note.plain::before{background:var(--off)}
.note .x{position:absolute; right:10px; top:10px; width:22px; height:22px; border:0; background:none; color:inherit; opacity:.6; cursor:pointer; display:grid; place-items:center; border-radius:6px}
.note .x:hover{opacity:1; background:color-mix(in srgb, currentColor 10%, transparent)}
:root{
  --m-info:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round'%3E%3Cpath d='M12 11v7M12 6.5h.01'/%3E%3C/svg%3E");
  --m-ok:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5.5 12.5 4 4 9-9'/%3E%3C/svg%3E");
  --m-warn:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round'%3E%3Cpath d='M12 5v8.5M12 18.5h.01'/%3E%3C/svg%3E");
  --m-bad:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round'%3E%3Cpath d='m7 7 10 10M17 7 7 17'/%3E%3C/svg%3E");
}
/* тост: то же, строкой короче и с тенью */
.toast{box-shadow:var(--shadow-card); margin:0 0 8px; padding:7px 36px 7px 44px; min-height:0; font-size:12px; line-height:16px}
.toast::before{top:9px} .toast::after{top:14px}
.toast .x{top:7px}
.toast .tt{display:block; font-weight:600; font-size:12.5px; line-height:17px}
.toast .ts{display:block; font-size:11.5px; line-height:15px; color:var(--muted)}

/* ---------- пустое состояние: значок в круге, заголовок, пояснение, кнопка ---------- */
.empty{padding:28px 20px; text-align:center; color:var(--muted); font:400 13px/20px var(--font)}
div.empty .ic{
  display:block; margin:0 auto 10px; width:56px; height:56px; padding:14px; border-radius:14px; box-sizing:border-box;
  background:var(--accent-soft); color:var(--accent); stroke-width:1.6;
}
div.empty b{display:block; color:var(--ink); font:600 15px/22px var(--font); margin-bottom:2px}
div.empty .btn{margin-top:14px}

/* заглушка раздела */
.stub{background:var(--panel); border:1px solid var(--panel-border); border-radius:var(--r-2xl); padding:18px 18px 20px; box-shadow:var(--shadow-panel)}
.stub h3{margin:0 0 4px; font:700 18px/26px var(--font); display:flex; align-items:center; gap:10px; flex-wrap:wrap; color:var(--ink)}
.stub p{margin:0 0 14px; color:var(--muted); font-size:13px; line-height:20px; max-width:72ch}
.stub .blocks{display:grid; grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); gap:10px}
.stub .bl{background:var(--surface); border:1px solid var(--border); border-radius:var(--r-card); padding:11px 13px; font-size:13px; line-height:18px; color:var(--muted); box-shadow:var(--shadow-card)}
.stub .bl b{display:block; color:var(--ink); font-weight:600; font-size:13.5px; line-height:19px; margin-bottom:1px}

/* ---------- Пульс: карточки направлений ---------- */
.dcards{display:grid; grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); gap:12px; padding:0 14px 14px}
.dcard{background:var(--surface); border:1px solid var(--border); border-radius:var(--r-card); padding:12px 14px 10px; display:flex; flex-direction:column; box-shadow:var(--shadow-card); transition:border-color .12s, box-shadow .12s}
.dcard:hover{border-color:color-mix(in srgb, var(--accent) 30%, var(--border)); box-shadow:var(--shadow-panel)}
.dcard .dh{display:flex; align-items:center; gap:12px}
.dcard .dic{width:34px; height:34px; border-radius:8px; display:grid; place-items:center; background:var(--accent-soft); color:var(--accent-ink); flex:none}
.dcard .dic .ic{width:18px; height:18px}
.dcard .dic.ok{background:var(--ok-soft); color:var(--ok-ink)} .dcard .dic.warn{background:var(--warn-soft); color:var(--warn-ink)}
.dcard .dic.bad{background:var(--bad-soft); color:var(--bad-ink)} .dcard .dic.violet{background:var(--violet-soft); color:var(--violet-ink)}
.dcard .dic.off{background:var(--off-soft); color:var(--off-ink)}
.dcard .dn{font:600 14px/19px var(--font); color:var(--ink)}
.dcard .dsub{font:400 12px/16px var(--font); color:var(--muted)}
.dcard .dh .bdg{margin-left:auto}
.dcard .dt{min-width:0; flex:1}
.dcard .dv{display:flex; align-items:flex-end; justify-content:space-between; gap:12px; margin:10px 0 8px}
.dcard .dvv{min-width:0}
.dcard .dv b{display:block; font:700 21px/27px var(--font); letter-spacing:-.02em; color:var(--ink); white-space:nowrap}
.dcard .ddl{margin-top:2px}
.dcard .dsp{width:76px; height:36px; flex:none}
.dcard .drows{border-top:1px solid var(--divider); margin-top:auto; padding-top:2px}
.dcard .drow{display:flex; align-items:center; gap:8px; padding:6px 0; font-size:12.5px; line-height:18px; border-bottom:1px solid var(--divider)}
.dcard .drow:last-child{border-bottom:0}
.dcard .drow span{color:var(--muted)}
.dcard .drow b{margin-left:auto; font-weight:600; font-variant-numeric:tabular-nums; color:var(--ink)}
.dcard .dlink{margin-top:8px; font:600 12.5px/18px var(--font); color:var(--accent-ink); cursor:pointer; display:inline-flex; align-items:center; gap:4px}
.dcard .dlink:hover{text-decoration:underline}
.dplan{display:flex; align-items:center; flex-wrap:wrap; gap:8px; padding:0 14px 14px}
.dplan:empty{display:none}
.dplan > span:first-child{font:500 13px/18px var(--font); color:var(--muted); margin-right:4px}
.dplan .fchip{height:30px; padding:0 12px; font-size:12.5px; gap:6px; background:var(--surface)}
.dplan .fchip .ic{color:var(--muted)}
.dplan a.fchip:hover{color:var(--accent-ink)}

/* список со шкалами: «Источник трафика» */
.srclist{display:flex; flex-direction:column}
.srclist .sr{display:grid; grid-template-columns:minmax(64px,1.1fr) auto 40px minmax(50px,1.3fr); gap:10px; align-items:center; padding:5px 0; border-bottom:1px solid var(--divider); font-size:12.5px}
.srclist .sr:last-child{border-bottom:0}
.srclist .sr span{color:var(--ink-2); white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.srclist .sr b{font-weight:600; color:var(--ink); text-align:right; font-variant-numeric:tabular-nums; white-space:nowrap}
.srclist .sr em{font-style:normal; color:var(--muted); text-align:right; font-variant-numeric:tabular-nums}

/* хлебные крошки и страницы */
.crumbs{display:flex; align-items:center; gap:10px; flex-wrap:wrap; font:500 13px/18px var(--font); color:var(--muted)}
.crumbs a{color:var(--muted)} .crumbs a:hover{color:var(--accent-ink)}
.crumbs b{color:var(--ink); font-weight:600}
.crumbs .ic{width:14px; height:14px; color:var(--dim)}
.crumbs .home{width:18px; height:18px; color:var(--ink-2)}
.pager{display:flex; align-items:center; gap:8px; flex-wrap:wrap}
.pager button{
  min-width:32px; height:32px; padding:0 8px; border-radius:var(--r-md); border:1px solid var(--border); background:var(--surface);
  color:var(--ink-2); font:500 13px/1 var(--font); cursor:pointer; display:inline-grid; place-items:center;
}
.pager button:hover{border-color:color-mix(in srgb, var(--accent) 35%, var(--border)); color:var(--accent-ink)}
.pager button.on{background:var(--accent-grad); border-color:transparent; color:#fff; box-shadow:var(--accent-glow)}
.pager .ell{color:var(--muted); padding:0 4px}

/* ---------- графики: гладкие линии с точками и заливкой, легенда кружками ---------- */
.ch{margin:0; position:relative; min-width:0}
/* легенда по центру, разрез и кнопка таблицы справа; если тесно, легенда переносится, а кнопка не уезжает за край */
.ch-head{display:grid; grid-template-columns:minmax(0,1fr) auto minmax(max-content,1fr); align-items:center; gap:8px 16px; margin-bottom:10px}
.ch-head > .ch-leg{grid-column:2; justify-content:center}
.ch-head > .ch-grain{grid-column:3; justify-self:end}
@media (max-width:700px){ .ch-head{grid-template-columns:minmax(0,1fr)} .ch-head > .ch-leg, .ch-head > .ch-grain{grid-column:1; justify-self:start; justify-content:flex-start} }
.ch-leg{display:flex; flex-wrap:wrap; gap:6px 18px; align-items:center; font:500 12.5px/17px var(--font); color:var(--ink-2)}
.ch-leg span{display:inline-flex; align-items:center; gap:8px; white-space:nowrap}
.ch-leg i{display:inline-block; width:10px; height:10px; border-radius:50%; flex:none}
.ch-leg i.pale{opacity:var(--pale)}
.ch-leg i.line{width:18px; height:3px; border-radius:2px}
.ch-leg i.dash{width:18px; height:0; border-radius:0; border-top:2.5px dashed; background:none!important}
.ch-leg .sep{width:1px; height:14px; background:var(--divider)}
.ch-grain{margin-left:auto; font:500 12px/16px var(--font); color:var(--muted); display:inline-flex; align-items:center; gap:8px; white-space:nowrap}
.ch-tbtn{border:1px solid var(--border); background:var(--surface); color:var(--muted); border-radius:var(--r-sm); height:26px; padding:0 9px; font:500 12px/1 var(--font); cursor:pointer; display:inline-flex; align-items:center; gap:5px}
.ch-tbtn .ic{width:14px; height:14px}
.ch-tbtn:hover{color:var(--accent-ink); border-color:color-mix(in srgb, var(--accent) 35%, var(--border))}
.ch.show-table .ch-body{display:none}
.ch .ch-table{display:none}
.ch.show-table .ch-table{display:block}
.ch-table table{min-width:0; font-size:13px}
.ch-table th, .ch-table td{padding:8px 12px}

.ch-body{display:flex; flex-direction:column}
.ch-plot{position:relative; margin-left:56px; container-type:inline-size}
.ch-gl{position:absolute; left:0; right:0; height:0; border-top:1px solid var(--grid)}
.ch-gl.base{border-top-color:var(--axis)}
.ch-vl{position:absolute; top:0; bottom:0; width:0; border-left:1px solid var(--grid); pointer-events:none}
.ch-y{position:absolute; left:-56px; width:46px; text-align:right; font:500 11.5px/14px var(--font); color:var(--dim); transform:translateY(50%); font-variant-numeric:tabular-nums; white-space:nowrap}
.ch-cols, .ch-hits{position:absolute; inset:0; display:flex}
.ch-col, .ch-hit{flex:1; position:relative; min-width:0}
/* столбцы варианта А: ширина долей колонки (--bw считает bars()), цвет сверху
   насыщенный и к основанию светлеет, скругление 6, между частями стопки 2 px */
.ch-grp{position:absolute; left:0; right:0; top:0; bottom:0; display:flex; gap:3px; justify-content:center}
.ch-bar{position:relative; height:100%; width:var(--bw,56%); flex:none}
.ch-seg{position:absolute; left:0; right:0; --c:var(--accent);
  background:linear-gradient(180deg, var(--c) 0%, color-mix(in srgb, var(--c) var(--bar-fade), transparent) 100%)}
.ch-seg.neg{background:linear-gradient(0deg, var(--c) 0%, color-mix(in srgb, var(--c) var(--bar-fade), transparent) 100%)}
.ch-seg.pale{opacity:var(--pale)}
.ch-seg.top{border-radius:6px 6px 0 0}
.ch-seg.bot{border-radius:0 0 6px 6px}
.ch-col{border-radius:8px}
.ch-col.hov{background:var(--band)}
.ch-col.hov .ch-seg{filter:brightness(1.06) saturate(1.05)}
.ch-col.sel, .ch-hit.sel{background:var(--band-sel)}
.ch-hit{border-radius:8px}
.ch.pick .ch-col, .ch.pick .ch-hit{cursor:pointer}
.ch-x{display:flex; margin:8px 0 0 56px}
/* подписи не режутся: сколько влезает, решает thinAxis() по ширине графика, соседние пусты */
.ch-x span{flex:1; min-width:0; text-align:center; font:500 12px/15px var(--font); color:var(--muted); white-space:nowrap; overflow:visible}
.ch-x span.fc{color:var(--dim)}
.ch-x span.on{color:var(--ink); font-weight:600}
.ch-x span.sel{color:var(--accent-ink); font-weight:700}
.ch-svg{position:absolute; inset:0; width:100%; height:100%; overflow:visible; display:block}
.ch-svg .ln{fill:none; stroke-width:2.5; vector-effect:non-scaling-stroke; stroke-linejoin:round; stroke-linecap:round}
.ch-svg .ln.dash{stroke-dasharray:6 5}
.ch-svg .ar{stroke:none}
.ch-dot{position:absolute; width:9px; height:9px; margin:-4.5px 0 0 -4.5px; border-radius:50%; box-shadow:0 0 0 2px var(--surface); pointer-events:none}
.ch-dot.fc{background:var(--surface)!important; box-shadow:inset 0 0 0 2px var(--dc), 0 0 0 1.5px var(--surface)}
.ch-dot.hov{display:none; width:13px; height:13px; margin:-6.5px 0 0 -6.5px; box-shadow:0 0 0 3px var(--surface), 0 2px 8px rgba(15,23,42,.25)}
.ch-cross{position:absolute; top:0; bottom:0; width:0; border-left:1.5px dashed color-mix(in srgb, var(--accent) 55%, var(--dim)); pointer-events:none; display:none}
.ch.hovering .ch-cross, .ch.hovering .ch-dot.hov{display:block}
/* прогноз: мягкая полоса и пунктир там, где кончается факт */
.ch-fcband{position:absolute; top:0; bottom:0; background:var(--band); border-left:1.5px dashed var(--border-strong); pointer-events:none; border-radius:0 8px 8px 0}
.ch-fcband > span{position:absolute; left:8px; top:-17px; font:600 11.5px/14px var(--font); color:var(--muted); white-space:nowrap}
/* итог над столбцом: жирный, тёмный, с ореолом цвета фона, чтобы читался поверх сетки */
.ch-lbl{position:absolute; transform:translate(-50%,-100%); margin-top:-6px; font:700 12.5px/15px var(--font); color:var(--ink); white-space:nowrap; pointer-events:none; font-variant-numeric:tabular-nums; text-align:center;
  text-shadow:0 0 2px var(--surface), 0 0 3px var(--surface), 0 0 4px var(--surface)}
/* в узкой колонке шрифт подписи сжимается под ширину колонки (100cqw / число столбцов) */
.ch-plot[style*="--n"] .ch-lbl{font-size:clamp(9.5px, calc(100cqw / var(--n) / 3.5), 12.5px)}
.ch-lbl.below{transform:translate(-50%,0); margin-top:6px}
.ch-lbl small{display:block; text-align:center; font:500 11px/14px var(--font); color:var(--muted)}
.ch-plot[style*="--n"] .ch-lbl small{font-size:clamp(9px, calc(100cqw / var(--n) / 4.4), 11px)}
.ch-lbl .lc{display:none}
.cap-nx .ch-lbl .lf{display:none} .cap-nx .ch-lbl .lc{display:inline}
@container (max-width:519px){ .cap-n8 .ch-lbl .lf, .cap-n12 .ch-lbl .lf, .cap-n16 .ch-lbl .lf{display:none} .cap-n8 .ch-lbl .lc, .cap-n12 .ch-lbl .lc, .cap-n16 .ch-lbl .lc{display:inline} }
@container (max-width:779px){ .cap-n12 .ch-lbl .lf, .cap-n16 .ch-lbl .lf{display:none} .cap-n12 .ch-lbl .lc, .cap-n16 .ch-lbl .lc{display:inline} }
@container (max-width:1039px){ .cap-n16 .ch-lbl .lf{display:none} .cap-n16 .ch-lbl .lc{display:inline} }

/* кольцо: толстое, с просветом между долями, цифра в центре, легенда таблицей */
.ch-donut{display:flex; align-items:center; justify-content:center; gap:18px 22px; flex-wrap:wrap}
.ch-donut .dn-wrap{position:relative; flex:none}
.ch-donut.stack{flex-direction:column; align-items:stretch}
.ch-donut.stack .dn-wrap{align-self:center}
.ch-donut.stack .dn-l{min-width:0}
.ch-donut svg{display:block; transform:rotate(-90deg)}
.ch-donut .dn-seg{transition:opacity .12s}
.ch-donut:hover .dn-seg{opacity:.55}
.ch-donut .dn-seg:hover{opacity:1}
.ch-donut .dn-c{position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; pointer-events:none}
.ch-donut .dn-c b{font:700 18px/24px var(--font); letter-spacing:-.02em; color:var(--ink)}
.ch-donut .dn-c span{font:400 12px/16px var(--font); color:var(--muted)}
.ch-donut .dn-l{display:grid; grid-template-columns:10px minmax(0,1fr) auto auto; gap:10px 12px; align-items:center; min-width:190px; flex:1}
.ch-donut .dn-l i{width:10px; height:10px; border-radius:50%}
.ch-donut .dn-l span{font-size:12.5px; line-height:18px; color:var(--ink-2); white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.ch-donut .dn-l em{font-style:normal; font-size:12.5px; color:var(--muted); text-align:right; font-variant-numeric:tabular-nums}
.ch-donut .dn-l b{font-size:12.5px; font-weight:600; color:var(--ink); text-align:right; font-variant-numeric:tabular-nums; white-space:nowrap}

/* полукольцо-шкала: «Конверсия в оплату 50.7%» */
.gauge{position:relative; display:inline-grid; place-items:center}
.gauge svg{display:block; transform:rotate(-90deg)}
.gauge .g-c{position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center}
.gauge .g-c b{font:700 20px/26px var(--font); color:var(--ink); letter-spacing:-.02em}
.gauge.sm .g-c b{font-size:16px; line-height:20px}
.gauge .g-c span{font-size:12px; color:var(--muted)}

/* подсказка графика: белая карточка с тенью, как у кита */
.kab-tip{
  position:fixed; z-index:100; left:0; top:0; pointer-events:none; background:var(--tip-bg); color:var(--tip-ink);
  border:1px solid var(--tip-line); border-radius:var(--r-lg); padding:10px 12px; font:500 12px/16px var(--font); box-shadow:var(--shadow-pop);
  min-width:190px; max-width:320px; opacity:0; transition:opacity .08s;
}
.kab-tip.on{opacity:1}
.kab-tip .tt-h{color:var(--tip-ink); margin-bottom:8px; font:700 13px/18px var(--font)}
.kab-tip .tt-r{display:flex; align-items:center; gap:8px; margin-top:6px}
.kab-tip .tt-r i{width:9px; height:9px; border-radius:50%; flex:none}
.kab-tip .tt-r i.pale{opacity:.5}
.kab-tip .tt-r span{color:var(--tip-muted); min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.kab-tip .tt-r b{margin-left:auto; padding-left:14px; font-weight:700; font-variant-numeric:tabular-nums; white-space:nowrap}
.kab-tip .tt-t{border-top:1px solid var(--tip-line); margin-top:8px; padding-top:8px}
.kab-tip.wide{max-width:480px}
.kab-tip .tt-g{display:grid; grid-template-columns:auto auto auto auto; column-gap:16px; row-gap:6px; align-items:center}
.kab-tip .tt-g .gh{color:var(--tip-muted); font-size:11px; text-align:right}
.kab-tip .tt-g .gn{display:flex; align-items:center; gap:8px; color:var(--tip-muted); white-space:nowrap}
.kab-tip .tt-g .gn i{width:9px; height:9px; border-radius:50%; flex:none}
.kab-tip .tt-g b{text-align:right; font-weight:700; font-variant-numeric:tabular-nums; white-space:nowrap}
.kab-tip .tt-g b.w{color:var(--tip-muted); font-weight:600}
.kab-tip .tt-g .gt{border-top:1px solid var(--tip-line); padding-top:8px; margin-top:2px; color:var(--tip-ink); font-weight:700}

/* окно подтверждения */
.modal{background:var(--surface); border:1px solid var(--border); border-radius:var(--r-xl); box-shadow:var(--shadow-pop); padding:24px; text-align:center; position:relative; max-width:360px}
.modal .m-ic{width:52px; height:52px; border-radius:50%; margin:0 auto 12px; display:grid; place-items:center; background:var(--bad-soft); color:var(--bad)}
.modal .m-ic .ic{width:24px; height:24px}
.modal h4{margin:0 0 6px; font:700 17px/24px var(--font); color:var(--ink)}
.modal p{margin:0 0 18px; font-size:13px; line-height:20px; color:var(--muted)}
.modal .m-b{display:grid; grid-template-columns:1fr 1fr; gap:10px}
.modal .m-b .btn{height:40px}
.modal .x{position:absolute; right:14px; top:14px; color:var(--muted); background:none; border:0; cursor:pointer}

/* ---------- тёмная тема: где тёмный кит расходится со светлым ---------- */
:root[data-theme="dark"] .gitems a.on{background:linear-gradient(90deg, rgba(36,121,250,.22), rgba(36,121,250,.12)); color:var(--accent-ink)}
:root[data-theme="dark"] .gitems a.on::before{content:''; position:absolute; left:0; top:7px; bottom:7px; width:3px; border-radius:0 3px 3px 0; background:#2E8BFF; box-shadow:0 0 10px rgba(46,139,255,.6)}
:root[data-theme="dark"] .side-foot .ava{background:#1C3350; color:#DCEBFA}
/* KPI в тёмной теме устроены как в светлой (вариант А): значки на полупрозрачном цвете, токены --ic-* */
:root[data-theme="dark"] .tile.accent{background:linear-gradient(160deg, rgba(36,121,250,.16) 0%, var(--surface) 75%); border-color:rgba(36,121,250,.35)}
:root[data-theme="dark"] .btn.ghost{border-color:rgba(59,130,246,.45)}
:root[data-theme="dark"] .btn:not(.pri):not(.danger):not(.ghost){background:var(--raised)}
:root[data-theme="dark"] th{background:#13243A; color:var(--dim)}
:root[data-theme="dark"] .card > h2 .count{background:var(--surface); border-color:var(--border)}
:root[data-theme="dark"] .seg, :root[data-theme="dark"] .chips{background:var(--field)}
:root[data-theme="dark"] .note{color:var(--ink-2)}
:root[data-theme="dark"] .kab-tip{backdrop-filter:blur(6px)}
:root[data-theme="dark"] div.empty .ic{background:transparent; border:1.5px dashed var(--border-strong); color:var(--accent-2)}

/* ---------- витрина «Компоненты»: разметка листов кита ---------- */
.kit-nav{display:flex; gap:8px; flex-wrap:wrap; margin:0 0 16px}
.kgrid{display:grid; gap:12px; margin-bottom:12px}
.kgrid > section{margin-bottom:0; display:flex; flex-direction:column}
.kgrid > section > .pad{flex:1; display:flex; flex-direction:column}
.kgrid > section > .pad > .tiles, .kgrid > section > .pad > .kpis{flex:1; grid-auto-rows:1fr}
.k2{grid-template-columns:repeat(2,minmax(0,1fr))} .k3{grid-template-columns:repeat(3,minmax(0,1fr))} .k4{grid-template-columns:repeat(4,minmax(0,1fr))}
.k21{grid-template-columns:minmax(0,1.62fr) minmax(0,1fr)} .k12{grid-template-columns:minmax(0,1fr) minmax(0,1.62fr)}
.k567{grid-template-columns:minmax(0,1fr) minmax(0,1.1fr) minmax(0,1.45fr)}
.k311{grid-template-columns:minmax(0,3fr) minmax(0,1.2fr) minmax(0,1.2fr)}
@media (max-width:1600px){ .k21, .k12, .k311{grid-template-columns:minmax(0,1fr)} .k4{grid-template-columns:repeat(2,minmax(0,1fr))} .k567{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (max-width:900px){ .k2, .k3, .k4, .k21, .k12, .k311, .k567{grid-template-columns:minmax(0,1fr)} }
.kn{color:var(--accent-ink); margin-right:6px}
.krow{display:flex; flex-wrap:wrap; gap:10px; align-items:center}
.kcol{display:flex; flex-direction:column; gap:10px}
.klab{font:500 13px/18px var(--font); color:var(--muted); margin:14px 0 8px}
.klab:first-child{margin-top:0}
.kt{display:grid; grid-template-columns:110px repeat(4, minmax(0,1fr)); gap:12px; align-items:center}
.kt > .h{font:500 12px/16px var(--font); color:var(--muted); text-align:center}
.kt > .r{font:500 13px/18px var(--font); color:var(--ink-2)}
.kt .btn{width:100%}
.kform{display:grid; grid-template-columns:110px minmax(0,1fr); gap:12px 14px; align-items:center}
.kform > span{font:400 13px/18px var(--font); color:var(--ink-2)}
.kform .inp, .kform .field, .kform select.sel{width:100%; max-width:none}
.kswatch{display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); gap:12px}
.kswatch div{font:400 12px/16px var(--font); color:var(--muted)}
.kswatch i{display:block; height:46px; border-radius:var(--r-lg); margin-bottom:8px; border:1px solid color-mix(in srgb, var(--ink) 8%, transparent)}
.kswatch b{display:block; color:var(--ink-2); font-weight:500}
.ktype{width:100%; min-width:0}
.ktype td{padding:9px 10px}
.kicons{display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); gap:10px}
.kicons div{display:flex; flex-direction:column; align-items:center; gap:6px; padding:10px 4px 8px; border:1px solid var(--border); border-radius:var(--r-card); background:var(--surface); font:400 11px/14px var(--font); color:var(--muted); text-align:center}
.kicons .ic{width:24px; height:24px; color:var(--accent-ink); stroke-width:1.8}
.kspace{display:flex; flex-direction:column; gap:10px}
.kspace div{display:grid; grid-template-columns:60px minmax(0,1fr) 90px; gap:12px; align-items:center; font:400 13px/18px var(--font); color:var(--muted)}
.kspace i{display:block; height:14px; border-radius:4px; background:color-mix(in srgb, var(--accent) 22%, transparent)}
.kradii{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:12px}
.kradii div{display:flex; flex-direction:column; align-items:center; gap:6px; padding:12px 6px; border:1px solid var(--border); border-radius:var(--r-card); background:var(--surface); font:600 12px/16px var(--font); color:var(--ink-2)}
.kradii i{display:block; width:44px; height:44px; background:color-mix(in srgb, var(--accent) 18%, var(--surface))}
.kradii span{font-weight:400; color:var(--muted)}
.kmenu{display:grid; grid-template-columns:minmax(0,1fr) 130px; gap:8px 14px; align-items:center}
.kmenu a{border:1px solid var(--border); background:var(--surface)}
.kmenu a.hov{background:var(--surface-2); border-color:transparent}
.kmenu a.on{border-color:transparent}
.kmenu a.bar{background:var(--surface)}
.kmenu a.bar::before{content:''; position:absolute; left:-1px; top:-1px; bottom:-1px; width:4px; border-radius:7px 0 0 7px; background:var(--accent)}
.kmenu a.dis{color:var(--dim); background:var(--surface-2); border-color:transparent} .kmenu a.dis .ic{color:var(--dim)}
.kmenu > span{font:400 13px/18px var(--font); color:var(--muted)}
.cal{border:1px solid var(--border); border-radius:var(--r-lg); background:var(--surface); padding:12px; box-shadow:var(--shadow-card)}
.cal .ch2{display:flex; align-items:center; justify-content:space-between; font:600 14px/20px var(--font); color:var(--ink); margin-bottom:8px}
.cal .ch2 .ic{color:var(--accent-ink)}
.cal .cg{display:grid; grid-template-columns:repeat(7,1fr); gap:4px; text-align:center; font:400 13px/30px var(--font); color:var(--ink-2)}
.cal .cg .w{font:500 11px/20px var(--font); color:var(--dim)}
.cal .cg .o{color:var(--dim)}
.cal .cg .on{background:var(--accent-grad); color:#fff; border-radius:8px; font-weight:600; box-shadow:var(--accent-glow)}
.dd{border:1px solid var(--border); border-radius:var(--r-lg); background:var(--surface); box-shadow:var(--shadow-pop); padding:6px}
.dd div{display:flex; align-items:center; gap:10px; padding:7px 10px; border-radius:6px; font:400 13px/19px var(--font); color:var(--ink-2)}
.dd div.on{background:var(--accent-soft); color:var(--accent-ink); font-weight:500}
.dd div.on .ic{margin-left:auto}
.dd div.bad{color:var(--bad-ink)}
.dd hr{border:0; border-top:1px solid var(--divider); margin:4px 0}
.leg-sys{display:flex; flex-direction:column; gap:12px}
.leg-sys div{display:flex; align-items:center; gap:12px; font:400 13px/18px var(--font); color:var(--ink-2)}
.leg-sys i{width:14px; height:14px; border-radius:50%}
.minis{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px}
.mini-w{position:relative; background:var(--surface); border:1px solid var(--border); border-radius:var(--r-card); padding:10px 12px; box-shadow:var(--shadow-card); min-height:92px}
.mini-w .k{font:500 12px/16px var(--font); color:var(--label)}
.mini-w .v{font:700 18px/24px var(--font); color:var(--ink); margin-top:4px}
.mini-w .delta{font-size:12px}
.mini-w .g{position:absolute; right:12px; bottom:12px; width:70px; height:38px}

/* мягкая синяя кнопка: «Фильтр», размеры кнопок */
.btn.soft{background:var(--accent-soft); border-color:transparent; color:var(--accent-ink)}
.btn.soft:hover, .btn.soft.is-hover{background:color-mix(in srgb, var(--accent) 20%, var(--surface)); color:var(--accent-ink); border-color:transparent}
/* состояния для витрины: наведение и нажатие без курсора */
.btn.is-hover{background:var(--accent-softer); border-color:color-mix(in srgb, var(--accent) 35%, var(--border-strong)); color:var(--accent-ink)}
.btn.is-press{background:var(--accent-soft); border-color:color-mix(in srgb, var(--accent) 35%, var(--border-strong)); color:var(--accent-ink)}
.btn.pri.is-hover{background:var(--accent-grad-h); color:#fff; border-color:transparent}
.btn.pri.is-press{background:var(--accent-press); color:#fff; border-color:transparent; box-shadow:none}
.btn.ghost.is-hover{background:var(--accent-softer); border-color:var(--border)}
.btn.ghost.is-press{background:var(--accent-soft); border-color:var(--border)}
.btn.danger.is-hover{background:linear-gradient(180deg,#F4626D 0%,#EA4653 100%); color:#fff; border-color:transparent}
.btn.danger.is-press{background:#F26B79; color:#fff; box-shadow:none; border-color:transparent}
.btn.soft.is-press{background:color-mix(in srgb, var(--accent) 28%, var(--surface)); border-color:transparent}
.inp.is-focus{border-color:var(--accent); box-shadow:var(--focus)}
.stat-deco{position:absolute; right:16px; bottom:14px; color:color-mix(in srgb, var(--accent) 55%, transparent)}
.stat:has(.stat-deco) .stat-s, .stat:has(.stat-deco) .stat-d{padding-right:40px}
.stat-deco .ic{width:30px; height:30px; stroke-width:1.5}
.klab2{display:inline-block; min-width:92px; font:400 12px/16px var(--font); color:var(--muted)}
.kcol > div{display:flex; align-items:center; gap:6px}
.sico{width:24px; height:24px; border-radius:50%; display:grid; place-items:center; color:#fff}
.kicons .sico .ic{width:14px; height:14px; color:#fff; stroke-width:3}
.sico.ok{background:var(--ok)} .sico.warn{background:var(--warn)} .sico.bad{background:var(--bad)} .sico.info{background:var(--info)}
.sico.off{background:var(--off)} .sico.soft{background:color-mix(in srgb, var(--accent) 45%, var(--surface))}
.ktype td, .ktype th{white-space:nowrap; padding:6px 8px}
.ktype td:nth-child(n+3){font-size:12px}
.kswatch b{overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.kch2{grid-template-columns:minmax(0,1.3fr) minmax(0,.9fr) minmax(0,1.15fr) minmax(0,.95fr)}
@media (max-width:1600px){ .kch2{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (max-width:900px){ .kch2{grid-template-columns:minmax(0,1fr)} }
/* секция «Карточки-сводки»: заголовок над левой колонкой */
.kgrid > section.ksum, .ksum{display:grid; grid-template-columns:minmax(max-content,1fr) minmax(0,2fr); gap:12px; padding:0 14px 14px 0; align-items:stretch}
.ksum-l{display:flex; flex-direction:column; padding-left:14px}
.ksum .ksum-l > .ksum-h{padding:12px 0 10px; column-gap:0; white-space:nowrap; flex-wrap:nowrap}
.ksum .ksum-h .kn{margin-right:4px; color:var(--accent-ink)}
.ksum-r{margin-top:12px; padding:12px 14px 8px}
/* образцы меню, шапки и профиля */
.nav-demo{display:flex; gap:10px; align-items:stretch}
.rail-demo{width:84px; flex:none; background:var(--surface); border:1px solid var(--border); border-radius:var(--r-xl); box-shadow:var(--shadow-card);
  display:flex; flex-direction:column; align-items:center; padding:12px 6px 10px}
.rail-demo .theme-d{width:38px; height:38px; border-radius:10px; display:grid; place-items:center; margin-bottom:10px;
  border:1px solid var(--border-strong); background:var(--surface); color:var(--ink-2)}
.rail-demo .theme-d .ic{width:19px; height:19px}
.side-demo{flex:1; min-width:0; display:flex; flex-direction:column; background:var(--surface); border:1px solid var(--border); border-radius:var(--r-xl); padding:0 0 4px; box-shadow:var(--shadow-card)}
.side-demo .gitems{padding:0 10px}
.side-demo .ghead{padding:14px 10px 6px}
.bar-demo{display:flex; align-items:center; gap:12px; flex-wrap:wrap; background:var(--surface); border:1px solid var(--border); border-radius:var(--r-xl); padding:12px 14px; box-shadow:var(--shadow-card)}
.bar-demo .sep{width:1px; height:32px; background:var(--divider)}
.ava-b{width:40px; height:40px; border-radius:50%; display:inline-grid; place-items:center; background:var(--accent-grad); color:#fff; font:600 17px/1 var(--font); flex:none; box-shadow:var(--accent-glow)}
.ava-b.sm{width:36px; height:36px; font-size:15px; background:var(--accent-soft); color:var(--accent-ink); box-shadow:none}
.prof{display:flex; align-items:center; gap:10px; padding:8px 10px; border:1px solid var(--border); border-radius:var(--r-lg); background:var(--surface); box-shadow:var(--shadow-card)}
.prof b{display:block; font:600 14px/18px var(--font); color:var(--ink)}
.prof span:not(.ava-b){display:block; font:400 12px/16px var(--font); color:var(--muted)}
.dd div .ic{width:18px; height:18px; color:var(--muted)}
.dd div.bad .ic{color:var(--bad)}
.ibtn.lgb{width:46px; height:46px; border-radius:10px} .ibtn.lgb.round{border-radius:50%}
.kgrid.k5{grid-template-columns:repeat(5,minmax(0,1fr))}
.kgrid.kbtn{grid-template-columns:minmax(0,2.1fr) minmax(0,2fr) minmax(0,1.1fr)}
@media (max-width:1600px){ .kgrid.k5{grid-template-columns:repeat(3,minmax(0,1fr))} .kgrid.kbtn{grid-template-columns:minmax(0,1fr)} }
@media (max-width:900px){ .kgrid.k5, .kgrid.kbtn{grid-template-columns:minmax(0,1fr)} }

/* ---------- чужие модули: узкий экран без горизонтальной прокрутки ---------- */
.page .tg-grid2{grid-template-columns:repeat(auto-fit,minmax(min(380px,100%),1fr))}

/* ---------- планшет и телефон (24.09): открыть и посмотреть, главное наверху ----------
   До 1180 px меню уезжает в шторку по кнопке в шапке, контенту вся ширина.
   Шапка не липнет, чтобы не занимать пол-экрана. Отдельную мобильную версию
   Антон хочет проработать потом, здесь только адаптация */
.scrim{display:none}
@media (max-width:1180px){
  .shell{display:block}
  .nav{position:fixed; left:0; top:0; bottom:0; margin:0; gap:0; height:100vh; height:100dvh; transform:translateX(-104%); transition:transform .2s ease; box-shadow:var(--shadow-pop)}
  body.nav-open .nav{transform:none}
  aside.rail{border-radius:0; border-top:0; border-bottom:0; border-left:0}
  aside.side{border-radius:0 18px 18px 0; border-left:0; border-top:0; border-bottom:0}
  body.nav-open .scrim{display:block; position:fixed; inset:0; background:rgba(10,20,40,.45); z-index:25}
  body.nav-open{overflow:hidden}
  main{padding:0 16px}
  header.top{position:relative}
  header.top .navbtn{display:inline-grid; flex:none}
  header.top .phone-only{display:inline-grid; order:2; flex:none}
}
@media (max-width:900px){
  aside.side{width:206px}
  main{padding:0 12px}
  header.top{padding:10px 0 12px}
  header.top .hdr{padding:10px 12px; gap:10px; min-height:0}
  header.top h1{font-size:18px; line-height:24px}
  header.top p{display:none}
  header.top .grow{display:none}
  header.top .ttl{flex:1}
  header.top .hdr > .hbar{order:3; width:100%}
  .tiles{grid-template-columns:1fr 1fr; gap:12px}
  .tiles > :last-child:nth-child(odd){grid-column:1 / -1}
  .tile, .stat{padding:11px 12px 10px}
  .card > h2{padding:12px 12px 8px}
  .pad{padding:0 12px 12px}
  .card > .tw{padding:0 8px 8px}
  .dcards{padding:2px 10px 12px; grid-template-columns:1fr}
  /* длинное пояснение сворачивается до трёх строк, касание разворачивает (класс clip ставит ui.js) */
  .note.clip{max-height:84px; overflow:hidden; cursor:pointer; -webkit-mask-image:linear-gradient(180deg, #000 58%, transparent); mask-image:linear-gradient(180deg, #000 58%, transparent)}
  .note.clip.open{max-height:none; -webkit-mask-image:none; mask-image:none; cursor:auto}
  /* таблица шире экрана: тень у края подсказывает, что её можно листать вбок */
  .tw{background:
      linear-gradient(90deg, var(--panel) 35%, transparent) 0 0 / 28px 100% no-repeat local,
      linear-gradient(270deg, var(--panel) 35%, transparent) 100% 0 / 28px 100% no-repeat local,
      radial-gradient(farthest-side at 0 50%, rgba(12,21,53,.16), transparent) 0 0 / 12px 100% no-repeat scroll,
      radial-gradient(farthest-side at 100% 50%, rgba(12,21,53,.16), transparent) 100% 0 / 12px 100% no-repeat scroll}
  :root[data-theme="dark"] .tw{background:
      linear-gradient(90deg, var(--panel) 35%, transparent) 0 0 / 28px 100% no-repeat local,
      linear-gradient(270deg, var(--panel) 35%, transparent) 100% 0 / 28px 100% no-repeat local,
      radial-gradient(farthest-side at 0 50%, rgba(0,0,0,.5), transparent) 0 0 / 12px 100% no-repeat scroll,
      radial-gradient(farthest-side at 100% 50%, rgba(0,0,0,.5), transparent) 100% 0 / 12px 100% no-repeat scroll}
}
/* телефон: KPI по два в ряд, без значка и мини-графика, цифра и подпись во всю ширину карточки */
@media (max-width:520px){
  header.top #stamp{display:none}
  .tiles{grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px}
  .tiles > :last-child:nth-child(odd){grid-column:1 / -1}
  .stat{grid-template-columns:minmax(0,1fr); grid-template-areas:"l" "v" "d" "s"; padding:12px 12px 11px; min-height:0}
  .stat.info{grid-template-columns:minmax(0,1fr); grid-template-areas:"l" "v" "d" "s"}
  .stat.info > .bars{grid-column:1}
  .stat-ic, .stat-sp, .stat-deco{display:none}
  .stat.has-sp .stat-d, .stat.has-sp .stat-s{padding-right:0}
  .stat-v[style*="--vl"], .stat.noic .stat-v[style*="--vl"]{font-size:clamp(16px, calc(100cqw * 1.6 / var(--vl)), 22px); line-height:28px}
  .stat-l, .stat-l[style*="--ll"], .stat.noic .stat-l[style*="--ll"]{font-size:12.5px; line-height:16px; white-space:normal; overflow:visible}
  .stat-d{margin-top:8px; flex-wrap:wrap; row-gap:4px}
  .stat-s{margin-top:5px}
  .stat > .bars{margin-top:8px}
  .tile{padding:12px 12px 11px}
  .tile .val[style*="--vl"]{font-size:clamp(16px, calc(100cqw * 1.6 / var(--vl)), 22px); line-height:28px}
}
@media (prefers-reduced-motion:reduce){ *{transition:none!important} }

/* ---------- карточка с двойными показателями (scard, вариант Антона 28.09) ---------- */
.sc-grid{display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:12px; margin-bottom:16px}
.sc-grid.c4{grid-template-columns:repeat(4,minmax(0,1fr))}
.sc-grid.c3, .sc-grid.c6{grid-template-columns:repeat(3,minmax(0,1fr))}
/* Планшет (08.10, айпад мини Антона). Лёжа (901–1180 px) меню в шторке, контенту вся ширина: это та же ширина,
   что у ноутбука с открытым меню, поэтому карточки и сетки стоят как на компьютере, без пустых мест в ряду.
   Стоя (641–900 px) карточек по три, а неполный последний ряд растягивается на всю ширину: 5 штук это 3 + 2 */
@media (min-width:641px) and (max-width:900px){
  .sc-grid, .sc-grid.c3, .sc-grid.c4, .sc-grid.c6{grid-template-columns:repeat(6,minmax(0,1fr))}
  .sc-grid > .sc{grid-column:span 2}
  .sc-grid:not(.c4) > .sc:nth-child(3n+1):nth-last-child(2), .sc-grid:not(.c4) > .sc:nth-child(3n+1):nth-last-child(2) ~ .sc{grid-column:span 3}
  .sc-grid:not(.c4) > .sc:nth-child(3n+1):last-child{grid-column:span 6}
  .sc-grid.c4 > .sc{grid-column:span 3}
  .sc-grid.c4 > .sc:nth-child(odd):last-child{grid-column:span 6}
  /* ряд из пяти показателей: 3 + 2 во всю ширину, без одинокой плитки в хвосте */
  .kpis:has(> :nth-child(5):last-child){grid-template-columns:repeat(6,minmax(0,1fr))}
  .kpis:has(> :nth-child(5):last-child) > *{grid-column:span 2}
  .kpis:has(> :nth-child(5):last-child) > :nth-child(n+4){grid-column:span 3}
}
@media (max-width:640px){.sc-grid, .sc-grid.c3, .sc-grid.c4, .sc-grid.c6{grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px}}
.sc{container-type:inline-size; background:var(--panel); border:1px solid var(--border); border-radius:var(--r-sec); box-shadow:var(--shadow-card); padding:14px 16px 12px; min-width:0}
.sc-h{display:flex; align-items:center; gap:10px; height:36px}
.sc-ic{flex:none; width:34px; height:34px; border-radius:10px; display:grid; place-items:center; background:var(--ic-blue,var(--accent-soft)); color:var(--accent)}
.sc-ic .ic{width:18px; height:18px}
.sc.ok .sc-ic{background:var(--ic-green); color:var(--ok-ink)} .sc.violet .sc-ic{background:var(--ic-violet); color:var(--violet-ink)}
.sc.warn .sc-ic{background:var(--ic-amber); color:var(--warn-ink)} .sc.cyan .sc-ic{background:var(--ic-cyan); color:var(--cyan-ink)}
.sc.bad .sc-ic{background:var(--ic-red); color:var(--bad-ink)}
.sc-tt{min-width:0; display:flex; flex-direction:column}
.sc-tt b, .sc-tt small{white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.sc-tt b{font:600 clamp(12px,7.4cqw,14px)/18px var(--font); color:var(--ink)} .sc-tt small{font:400 12px/16px var(--font); color:var(--muted)}
.sc-m{display:flex; align-items:flex-end; justify-content:space-between; gap:8px; height:44px; margin-top:10px}
.sc-v{font:700 clamp(18px,12.5cqw,28px)/34px var(--font); letter-spacing:-.015em; color:var(--ink); white-space:nowrap; font-variant-numeric:tabular-nums}
.sc-v.bad{color:var(--bad-ink)} .sc-v.good{color:var(--ok-ink)}
.sc-sp{flex:none; width:clamp(44px,28cqw,72px); height:36px}
.sc-d{display:flex; align-items:center; gap:6px; height:22px; margin-top:2px; min-width:0}
.sc-d small{font-size:11px; color:var(--muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.sc-d .delta{padding:1px 7px; border-radius:var(--r-pill); font-size:12px; line-height:16px; background:var(--off-soft); white-space:nowrap}
.sc-d .delta.up{background:var(--ok-soft)} .sc-d .delta.down{background:var(--bad-soft)}
.sc-r{border-top:1px solid var(--line); margin-top:10px; padding-top:8px; display:grid; gap:4px}
.sc-r div{display:flex; justify-content:space-between; align-items:baseline; gap:6px; height:20px; font-size:clamp(11px,6.6cqw,13px); line-height:20px}
.sc-r span{color:var(--muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; min-width:0}
.sc-r b{white-space:nowrap; font-variant-numeric:tabular-nums}
.mm2{display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-top:16px}
.mm2 h3{font:600 13px/18px var(--font); color:var(--label); margin:0 0 4px}
@media (max-width:900px){.mm2{grid-template-columns:1fr}}
@media (max-width:640px){.sc-ic{width:28px; height:28px; border-radius:8px} .sc-ic .ic{width:16px; height:16px}}

/* ---------- узкое меню (30.09): только значки, контенту шире ---------- */
.side-h .mini-t{width:28px; height:28px; margin-left:4px; flex:none; border-radius:8px}
.side-h .mini-t .ic{width:16px; height:16px}
@media (max-width:1180px){ .side-h .mini-t{display:none} }
@media (min-width:1181px){
  body.nav-mini aside.rail{width:60px; padding:12px 5px 10px}
  body.nav-mini .rail-list button{padding:9px 2px}
  body.nav-mini .rail-list button span{display:none}
  body.nav-mini aside.side{width:60px}
  body.nav-mini .side-h{flex-direction:column; padding:14px 6px 6px; gap:6px}
  body.nav-mini .side-h b, body.nav-mini .side-h em{display:none}
  body.nav-mini .side-h .mini-t{margin:0}
  body.nav-mini nav.menu{padding:4px 8px 12px}
  body.nav-mini .ghead{display:none}
  body.nav-mini .grp + .grp{margin-top:8px; padding-top:8px; border-top:1px solid var(--divider)}
  body.nav-mini .gitems a{justify-content:center; padding:0; min-height:40px}
  body.nav-mini .gitems a > span, body.nav-mini .gitems a .tag, body.nav-mini .gitems a .dotn{display:none}
  body.nav-mini .gitems .gbr{justify-content:center; padding:0; min-height:40px}
  body.nav-mini .gitems .gbr > span, body.nav-mini .gitems .gbr .caret{display:none}
  body.nav-mini .gsub{margin:0 0 4px; padding:0; border:0}
  body.nav-mini .gsub a{min-height:40px}
  body.nav-mini .gsub a .ic{display:block}
  body.nav-mini .side-foot{justify-content:center; padding-left:0; padding-right:0}
  body.nav-mini .side-foot .who-t{display:none}
}

/* ---------- телефон, вид АБ-1 (выбор Антона 30.09) ----------
   Показатели scard списком, как «Акции» на iPhone: название и подпись слева,
   мини-график, справа число и изменение. Касание строки раскрывает её строки
   «подпись · значение» (открыта одна), класс open ставит ui.js.
   Длинный помесячный график окном из 7 столбцов со стрелками (mwin в ui.js) */
.ch-win{display:none}
@media (max-width:640px){
  .sc-grid, .sc-grid.c3, .sc-grid.c4, .sc-grid.c6{display:flex; flex-direction:column; gap:0; background:var(--panel); border:1px solid var(--border); border-radius:var(--r-sec); box-shadow:var(--shadow-card); overflow:hidden}
  .sc-grid > .sc{border:0; border-top:1px solid var(--line); border-radius:0; box-shadow:none; padding:12px 14px; display:grid; grid-template-columns:minmax(0,1fr) 64px auto; grid-template-areas:"h sp v" "h sp d" "r r r" "n n n"; column-gap:12px; align-items:center; cursor:pointer; -webkit-tap-highlight-color:transparent; grid-column:auto}
  .sc-grid > .sc:first-child{border-top:0}
  .sc-grid > .sc .sc-h{grid-area:h; height:auto; min-width:0}
  .sc-grid > .sc .sc-ic{display:none}
  .sc-grid > .sc .sc-tt b{font-size:16px; line-height:20px; font-weight:700}
  .sc-grid > .sc .sc-tt small{font-size:12.5px; line-height:16px}
  .sc-grid > .sc .sc-m{display:contents}
  .sc-grid > .sc .sc-v{grid-area:v; justify-self:end; font-size:18px; line-height:22px}
  .sc-grid > .sc .sc-sp{grid-area:sp; width:64px; height:28px; align-self:center}
  .sc-grid > .sc .sc-d{display:contents}
  .sc-grid > .sc .sc-d .ddl{grid-area:d; justify-self:end; margin-top:4px}
  .sc-grid > .sc .sc-d small{grid-area:n; display:none; margin-top:8px; font-size:12px; white-space:normal}
  .sc-grid > .sc .sc-r{grid-area:r; display:none; border-top:0; margin-top:10px; padding-top:0; gap:6px}
  .sc-grid > .sc.open .sc-r{display:grid}
  .sc-grid > .sc.open .sc-d small{display:block}
  .sc-grid > .sc .sc-r div{height:auto; background:var(--surface-2); border-radius:10px; padding:8px 12px; font-size:14px; line-height:20px}
  .sc-grid > .sc .sc-r div:has(> b:empty){display:none}
  .sc-grid > .sc.open{background:color-mix(in srgb, var(--accent) 4%, var(--panel))}
  .ch-win{display:flex; align-items:center; justify-content:space-between; gap:8px; margin:0 0 10px}
  .ch-win button{width:44px; height:36px; border:1px solid var(--border); border-radius:10px; background:var(--surface); color:var(--ink); font:600 20px/1 var(--font); cursor:pointer}
  .ch-win button:disabled{opacity:.35; cursor:default}
  .ch-win span{font:600 13px/1 var(--font); color:var(--muted)}
  /* Royalties · Сводная: «месяц по партнёрам» строками, как в АБ-1 (кроме «Сколько придёт до даты») */
  html body #page-roySum .ms:not(.un) .ms-hd{display:none}
  html body #page-roySum .ms:not(.un) .ms-r{grid-template-columns:minmax(0,1fr) auto; grid-template-areas:"n t" "bar bar" "f w"; gap:6px 12px; font-size:14px; padding:10px 0; border-top:1px solid var(--line)}
  html body #page-roySum .ms:not(.un) .ms-r .ms-n{grid-area:n; font-size:15px; font-weight:600}
  html body #page-roySum .ms:not(.un) .ms-r .ms-bar{grid-area:bar; display:flex; height:6px}
  html body #page-roySum .ms:not(.un) .ms-r b{font-size:13px}
  html body #page-roySum .ms:not(.un) .ms-r b:nth-of-type(1){grid-area:f; text-align:left; font-weight:500; color:var(--muted)}
  html body #page-roySum .ms:not(.un) .ms-r b.ms-w{grid-area:w}
  html body #page-roySum .ms:not(.un) .ms-r b:nth-of-type(3){grid-area:t; font-size:16px; color:var(--ink)}
  html body #page-roySum .ms:not(.un) .ms-r b:nth-of-type(1)::before{content:'пришло '}
  html body #page-roySum .ms:not(.un) .ms-r b.ms-w::before{content:'ещё придёт '}
  html body #page-roySum .ms:not(.un) .ms-t .ms-bar{display:none}
}

/* Период окошком (02.10): кнопка в шапке и всплывающее окно с быстрыми периодами и своими датами */
.perbtn{height:38px; gap:8px; padding:0 12px; border-radius:var(--r-lg); font-weight:600; white-space:nowrap; max-width:100%}
.perbtn span{overflow:hidden; text-overflow:ellipsis}
.perbtn .ic{flex:none}
.perpop{position:fixed; z-index:140; width:372px; max-width:calc(100vw - 24px); background:var(--surface); border:1px solid var(--border); border-radius:14px;
  box-shadow:var(--shadow-pop); padding:14px; display:flex; flex-direction:column; gap:12px}
.per-g{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px}
.per-g button{height:38px; border:1px solid transparent; border-radius:9px; background:var(--surface-2); color:var(--accent-ink); font:600 13.5px/1 var(--font);
  text-align:start; padding:0 12px; cursor:pointer; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.per-g button:hover{border-color:var(--border-strong)}
.per-g button.on{background:var(--accent-soft); border-color:var(--accent); color:var(--ink)}
.per-g button.wide{grid-column:1/-1; text-align:center; color:var(--ink-2)}
.per-m{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr) minmax(0,1fr) minmax(0,1.7fr); gap:6px}
.per-m button{height:34px; border:1px solid var(--border); border-radius:9px; background:var(--surface); color:var(--ink-2); font:600 12.5px/1 var(--font); cursor:pointer; white-space:nowrap; padding:0 4px}
.per-m button:hover{border-color:var(--border-strong)}
.per-m button.on{background:var(--accent-soft); border-color:var(--accent); color:var(--ink)}
.per-d{display:grid; grid-template-columns:minmax(0,1fr) auto minmax(0,1fr); gap:8px; align-items:end; border-top:1px solid var(--divider); padding-top:12px}
.per-d label{display:flex; flex-direction:column; gap:5px; min-width:0}
.per-d label span{font:600 11px/1 var(--font); color:var(--muted); letter-spacing:.03em; text-transform:uppercase}
.per-d .inp{width:100%; max-width:none; min-width:0; height:38px}
.per-d i{font-style:normal; color:var(--dim); padding-bottom:10px}
.per-f{display:flex; justify-content:flex-end; gap:8px}
.per-f .btn{height:38px; padding:0 16px}
@media (max-width:640px){
  .perpop{left:0; right:0; bottom:0; top:auto; width:auto; max-width:none; border-radius:18px 18px 0 0; padding:16px 16px calc(16px + env(safe-area-inset-bottom)); box-shadow:0 -12px 40px rgba(9,20,60,.28)}
  .per-g button{height:44px}
  .perbtn{width:100%; justify-content:center}
}

/* Вход в кабинет (03.10): экран вместо оболочки, когда кабинет закрыт или открыта ссылка-приглашение */
.gate{position:fixed; inset:0; z-index:300; display:grid; place-items:center; padding:20px; background:var(--bg, #EEF3FB); overflow:auto}
.gate-c{width:min(380px,100%); background:var(--surface); border:1px solid var(--border); border-radius:18px; box-shadow:var(--shadow-pop); padding:26px 24px 24px; display:flex; flex-direction:column; gap:12px}
.gate-l{display:flex; align-items:center; gap:10px; font:700 16px/1 var(--font); color:var(--ink)}
.gate-l .ava{display:grid; place-items:center; width:34px; height:34px; border-radius:10px; background:var(--accent-soft); color:var(--accent-ink); font:800 16px/1 var(--font)}
.gate-c h1{margin:6px 0 0; font:700 22px/1.2 var(--font); letter-spacing:-.01em; color:var(--ink)}
.gate-s{margin:0; font:400 13px/1.4 var(--font); color:var(--muted); min-height:18px}
.gate-c label{display:flex; flex-direction:column; gap:5px}
.gate-c label span{font:600 12px/1 var(--font); color:var(--muted)}
.gate-c .inp{width:100%; max-width:none; height:42px; font-size:15px}
.gate-e{margin:0; min-height:18px; font:500 13px/1.35 var(--font); color:var(--bad-ink)}
.gate-c .btn{height:44px; justify-content:center; font-size:15px}
.side-foot #outBtn{margin-left:auto; flex:none; width:32px; height:32px}
body.nav-mini .side-foot #outBtn{display:none}
/* Кабинет внутри Битрикс24: один раздел, без рельсы разделов */
body.embed aside.rail{display:none}
body.embed .nav{margin-left:12px}

/* Демо-режим: плашка в шапке и переключатель в меню (core/ui.js, demoBar) */
.demo-t{display:inline-flex;align-items:center;gap:6px;height:30px;padding:0 11px;border-radius:999px;border:1px solid var(--line);background:transparent;color:var(--dim);font:inherit;font-size:12.5px;font-weight:600;white-space:nowrap;cursor:pointer;margin-left:8px}
span.demo-t{cursor:default}
.demo-t i{width:7px;height:7px;border-radius:50%;background:var(--dim);opacity:.6}
.demo-t:hover{color:var(--ink)}
.demo-t.on{border-color:transparent;color:var(--warn-ink);background:var(--warn-soft)}
.demo-t.on i{background:var(--warn-ink);opacity:1}
@media (max-width:640px){.demo-t{height:28px;width:28px;padding:0;justify-content:center;font-size:0;gap:0;flex:none} .demo-t i{width:9px;height:9px}}   /* на телефоне плашка демо точкой: длинный заголовок не наезжает (12.10) */
.demo-sw{display:flex; align-items:center; gap:10px; margin:0 10px 4px; padding:9px 10px; border:0; border-radius:10px; background:transparent; color:var(--ink-2); font:500 13.5px/18px var(--font); cursor:pointer; text-align:start; min-width:0}
.demo-sw:hover{background:var(--surface-2)}
.demo-sw .t{flex:1; min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.demo-sw .sw{position:relative; flex:none; width:34px; height:20px; border-radius:999px; background:var(--line); transition:background .15s}
.demo-sw .sw i{position:absolute; top:2px; left:2px; width:16px; height:16px; border-radius:50%; background:#fff; box-shadow:0 1px 2px rgba(0,0,0,.2); transition:left .15s}
.demo-sw.on{color:var(--warn-ink)}
.demo-sw.on .sw{background:var(--warn-ink)}
.demo-sw.on .sw i{left:16px}
[dir="rtl"] .demo-sw .sw i{left:auto; right:2px}
[dir="rtl"] .demo-sw.on .sw i{right:16px}
body.nav-mini .demo-sw{margin:0 6px 4px; padding:9px 4px; justify-content:center}
body.nav-mini .demo-sw .t{display:none}

/* 13.10, решение Антона (вариант А): логотип сверху рельсы, тема и язык внизу под «Служебным» */
.rail-logo{display:block; width:66px; margin:2px auto 12px; line-height:0; flex:none}
.rail-logo svg{width:100%; height:auto; display:block}
:root[data-theme="dark"] .rail-logo .lt{fill:#E6EEFA}
.rail-list{min-height:0}
.rail-foot{margin-top:auto; flex:none; width:100%; display:flex; gap:4px; justify-content:center; padding-top:8px; border-top:1px solid var(--divider, var(--border))}
.rail .rail-foot #themeBtn, .rail-foot .lang-t{width:32px; height:32px; margin:0; border-radius:9px}
.rail .rail-foot #themeBtn .ic{width:17px; height:17px}
body.nav-mini .rail-logo{width:48px; margin-bottom:10px}
body.nav-mini .rail-foot{flex-direction:column; align-items:center}