/* Панель 2.0: склейка css-1.css (42 файлов: tokens.css, accents.css, base.css ... wallets.css), собирает src/dash/bundle.py */
/* Пульт DengiEx 2.0: дизайн-токены.
   Все цвета, радиусы, тени и шрифты берутся только отсюда (var(--...)). Своих hex в экранах нет.
   Тема: <html data-theme="light|dark">, акцент: <html data-accent="lime|emerald|cobalt">, ещё fuchsia, pro, alex в accents.css.
   Идея палитры: «чернила + лайм». Чернила дают строгость и читаемость, лайм отмечает главное:
   активное, своё, рост, второй ряд графика. В тёмной теме роли меняются местами (инверсия). */

:root {
  /* шрифты */
  --f-display: "Geologica", "Onest", system-ui, sans-serif;
  --f-ui: "Onest", system-ui, -apple-system, "Segoe UI", sans-serif;
  --f-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;

  /* размеры текста */
  --t-hero: 56px;
  --t-kpi: 40px;
  --t-h1: 34px;
  --t-h2: 20px;
  --t-h3: 15px;
  --t-body: 14px;
  --t-sm: 12.5px;
  --t-xs: 11px;

  /* радиусы */
  --r-xs: 8px;
  --r-sm: 12px;
  --r-md: 16px;
  --r-lg: 22px;
  --r-xl: 28px;
  --r-pill: 999px;

  /* отступы (шаг 4) */
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 20px;
  --s-6: 24px;
  --s-8: 32px;
  --s-10: 40px;
  --s-14: 56px;

  /* каркас */
  --side-w: 256px;
  --side-w-c: 80px;
  --top-h: 64px;
  --gap: 16px;
  --frame: 12px;

  /* движение */
  --ease: cubic-bezier(.2, .8, .2, 1);
  --ease-spring: cubic-bezier(.34, 1.56, .64, 1);
  --dur-1: 120ms;
  --dur-2: 220ms;
  --dur-3: 420ms;
}

/* ---------- Светлая тема ---------- */
:root,
:root[data-theme="light"] {
  color-scheme: light;

  --canvas: #ECEDE7;
  --canvas-glow-1: rgba(213, 243, 94, .30);
  --canvas-glow-2: rgba(94, 168, 240, .10);

  --surface: #FFFFFF;
  --surface-2: #F6F6F2;
  --surface-3: #EEEFE9;
  --glass: rgba(255, 255, 255, .72);
  --glass-line: rgba(19, 21, 18, .06);

  --line: #E7E8E1;
  --line-2: #D8DAD2;

  --ink: #131512;
  --ink-2: #565A53;
  --ink-3: #72766E;
  --ink-4: #B7BAB2;

  /* инверсия: тёмные плашки в светлой теме (активный пункт меню, главная кнопка) */
  --inverse: #131512;
  --inverse-2: #262924;
  --inverse-ink: #F4F5EF;
  --inverse-ink-2: #A7AB9F;

  /* акцент: лайм */
  --accent: #D5F35E;
  --accent-2: #C4E847;
  --accent-ink: #12150A;
  --accent-text: #4D7000;
  --accent-soft: #EEF9C9;
  --accent-glow: rgba(213, 243, 94, .55);

  /* герой: главная плашка экрана */
  --hero-bg: #131512;
  --hero-ink: #F4F5EF;
  --hero-ink-2: #A7AB9F;
  --hero-accent: var(--accent);
  --hero-line: rgba(213, 243, 94, .16);

  /* смысловые */
  --pos: #0E7A3B;
  --pos-soft: #E2F5E8;
  --neg: #C8323A;
  --neg-soft: #FCEBEB;
  --warn: #965A00;
  --warn-soft: #FCF1DF;
  --info: #2458C8;
  --info-soft: #E6EEFD;
  --violet: #5D4CD8;
  --violet-soft: #EEEBFE;
  --afk-red: #6B1019; /* затемнение при AFK дольше плана: тёмный бордо, не неон */

  /* графики: 1 и 2 главная пара, дальше по порядку */
  --c-1: #131512;
  --c-2: var(--accent);
  --c-3: #9DB596;
  --c-4: #F2A65A;
  --c-5: #8B7CF6;
  --c-6: #5EA8F0;
  --c-7: #E7739A;
  --c-8: #CBCEC5;
  --grid-line: #ECEDE7;
  --hatch-c: rgba(19, 21, 18, .20);
  /* теплокарты: от пустого к плотному */
  --heat-1: #F2F3EE;
  --heat-2: #E6F4B4;
  --heat-3: #C9E95A;
  --heat-4: #7E9F2B;
  --heat-5: #2A3416;

  /* тени */
  --sh-1: 0 1px 2px rgba(19, 21, 18, .04), 0 2px 10px -4px rgba(19, 21, 18, .06);
  --sh-2: 0 14px 34px -14px rgba(19, 21, 18, .20), 0 2px 6px rgba(19, 21, 18, .04);
  --sh-pop: 0 28px 70px -18px rgba(19, 21, 18, .32), 0 4px 14px rgba(19, 21, 18, .06);
  --sh-inset: inset 0 1px 0 rgba(255, 255, 255, .6);
  --focus: 0 0 0 3px rgba(149, 196, 0, .45);
  --scrim: rgba(19, 21, 18, .42);

  /* плашки «СКАМ» и «Скам?» и кромка строки чата (владелец 07.10: плохо читались на выбранной строке): сплошная заливка, белый жирный
     текст (не меньше 4,5:1) и рамка 1px, контрастная фону строки, в каждом из четырёх состояний (тема x строка выбрана).
     *-bd: рамка на обычной строке, *-bd-on: на выбранной (она инвертирована: в светлой теме чёрная, в тёмной светлая) */
  --scam-bg: #C0262E;
  --scam-ink: #FFFFFF;
  --scam-bd: #6E0F15;
  --scam-bd-on: #FFFFFF;
  --sus-bg: #B85C00;
  --sus-ink: #FFFFFF;
  --sus-bd: #5A2E00;
  --sus-bd-on: #FFE2A8;
  --edge-c: #C0262E;
  --edge-c-on: #FF6B6B;
  --edge-s: #B85C00;
  --edge-s-on: #FBBF24;
}

/* ---------- Тёмная тема ---------- */
:root[data-theme="dark"] {
  color-scheme: dark;

  --canvas: #08090A;
  --canvas-glow-1: rgba(213, 243, 94, .075);
  --canvas-glow-2: rgba(94, 168, 240, .06);

  --surface: #111312;
  --surface-2: #171A18;
  --surface-3: #1E221F;
  --glass: rgba(22, 25, 23, .66);
  --glass-line: rgba(255, 255, 255, .07);

  --line: #222622;
  --line-2: #2E332F;

  --ink: #EEF1EA;
  --ink-2: #A1A79C;
  --ink-3: #6D746A;
  --ink-4: #474D46;

  --inverse: #EEF1EA;
  --inverse-2: #D7DBD2;
  --inverse-ink: #0D0F0D;
  --inverse-ink-2: #4F554C;

  --accent: #D5F35E;
  --accent-2: #E2F884;
  --accent-ink: #0E1108;
  --accent-text: #D5F35E;
  --accent-soft: rgba(213, 243, 94, .12);
  --accent-glow: rgba(213, 243, 94, .35);

  --hero-bg: #D5F35E;
  --hero-ink: #10130A;
  --hero-ink-2: #4B5A1E;
  --hero-accent: #10130A;
  --hero-line: rgba(16, 19, 10, .12);

  --pos: #4ADE80;
  --pos-soft: rgba(74, 222, 128, .12);
  --neg: #FF6B6B;
  --neg-soft: rgba(255, 107, 107, .13);
  --warn: #F5B94A;
  --warn-soft: rgba(245, 185, 74, .13);
  --info: #6EA8FF;
  --info-soft: rgba(110, 168, 255, .13);
  --violet: #A99BFF;
  --violet-soft: rgba(169, 155, 255, .14);
  --afk-red: #7A141D;

  --c-1: #E9ECE4;
  --c-2: var(--accent);
  --c-3: #7F9E7A;
  --c-4: #F2A65A;
  --c-5: #A99BFF;
  --c-6: #6EB6F5;
  --c-7: #F08DB0;
  --c-8: #3A3F3A;
  --grid-line: #1C201D;
  --hatch-c: rgba(238, 241, 234, .16);
  --heat-1: #191C1A;
  --heat-2: #2B3520;
  --heat-3: #5C7526;
  --heat-4: #A9CF45;
  --heat-5: #E6FA9A;

  --sh-1: 0 0 0 1px rgba(255, 255, 255, .02);
  --sh-2: 0 18px 40px -18px rgba(0, 0, 0, .7);
  --sh-pop: 0 30px 80px -20px rgba(0, 0, 0, .85), 0 0 0 1px rgba(255, 255, 255, .06);
  --sh-inset: inset 0 1px 0 rgba(255, 255, 255, .04);
  --focus: 0 0 0 3px rgba(213, 243, 94, .38);
  --scrim: rgba(0, 0, 0, .6);

  --scam-bg: #C0262E;
  --scam-ink: #FFFFFF;
  --scam-bd: #FFB3B6;
  --scam-bd-on: #5C0B11;
  --sus-bg: #B85C00;
  --sus-ink: #FFFFFF;
  --sus-bd: #FFD79A;
  --sus-bd-on: #4A2500;
  --edge-c: #FF6B6B;
  --edge-c-on: #B3202A;
  --edge-s: #FBBF24;
  --edge-s-on: #9A5200;
}

/* ---------- Акцент: изумруд (ближе к прежнему нефриту) ---------- */
:root[data-accent="emerald"] {
  --accent: #1F8A5B;
  --accent-2: #187049;
  --accent-ink: #FFFFFF;
  --accent-text: #187049;
  --accent-soft: #E1F2E9;
  --accent-glow: rgba(31, 138, 91, .35);
  --canvas-glow-1: rgba(31, 138, 91, .14);
  --hero-bg: #0F3D29;
  --hero-ink: #F1F7F3;
  --hero-ink-2: #9CC2AE;
  --hero-accent: #7CE0AE;
  --hero-line: rgba(124, 224, 174, .16);
  --focus: 0 0 0 3px rgba(31, 138, 91, .35);
}
:root[data-theme="dark"][data-accent="emerald"] {
  --accent: #43D592;
  --accent-2: #6BE2AA;
  --accent-ink: #04130B;
  --accent-text: #43D592;
  --accent-soft: rgba(67, 213, 146, .12);
  --accent-glow: rgba(67, 213, 146, .32);
  --canvas-glow-1: rgba(67, 213, 146, .07);
  --hero-bg: #43D592;
  --hero-ink: #04130B;
  --hero-ink-2: #1D5A3C;
  --hero-accent: #04130B;
  --hero-line: rgba(4, 19, 11, .12);
  --focus: 0 0 0 3px rgba(67, 213, 146, .35);
}

/* теплокарты под акцент */
:root[data-accent="emerald"] { --heat-2: #CFEBDC; --heat-3: #6CC79A; --heat-4: #1F8A5B; --heat-5: #0F3D29; }
:root[data-theme="dark"][data-accent="emerald"] { --heat-2: #173527; --heat-3: #23704C; --heat-4: #43D592; --heat-5: #B9F3D6; }

/* ---------- Акцент: кобальт ---------- */
:root[data-accent="cobalt"] {
  --accent: #3F5BF6;
  --accent-2: #2E47D8;
  --accent-ink: #FFFFFF;
  --accent-text: #2E47D8;
  --accent-soft: #E7EBFF;
  --accent-glow: rgba(63, 91, 246, .32);
  --canvas-glow-1: rgba(63, 91, 246, .10);
  --hero-bg: #121735;
  --hero-ink: #F1F3FF;
  --hero-ink-2: #9EA7D6;
  --hero-accent: #8FA2FF;
  --hero-line: rgba(143, 162, 255, .16);
  --focus: 0 0 0 3px rgba(63, 91, 246, .32);
}
:root[data-theme="dark"][data-accent="cobalt"] {
  --accent: #8297FF;
  --accent-2: #A3B3FF;
  --accent-ink: #070A1F;
  --accent-text: #8EA2FF;
  --accent-soft: rgba(130, 151, 255, .14);
  --accent-glow: rgba(130, 151, 255, .32);
  --canvas-glow-1: rgba(130, 151, 255, .07);
  --hero-bg: #8297FF;
  --hero-ink: #070A1F;
  --hero-ink-2: #26307A;
  --hero-accent: #070A1F;
  --hero-line: rgba(7, 10, 31, .12);
  --focus: 0 0 0 3px rgba(130, 151, 255, .35);
}
:root[data-accent="cobalt"] { --heat-2: #D9DFFF; --heat-3: #8A9CFA; --heat-4: #3F5BF6; --heat-5: #121735; }
:root[data-theme="dark"][data-accent="cobalt"] { --heat-2: #1B2147; --heat-3: #3A4BB0; --heat-4: #8297FF; --heat-5: #D3DBFF; }
/* Пульт 2.0: палитры акцента (владелец 07.10), только цвета, раскладка прежняя. К лайму («Деньги Exchange»), изумруду и
   кобальту из tokens.css добавлены: «Фуксия» (современный розовый), «Про Деньги» (чёрное и жёлтое, по жёлтой аватарке с
   QR) и «Алекс» (морская бирюза: фирменных цветов Travelask в проекте нет, взята сдержанная бирюза). Включаются так же,
   как прежние: <html data-accent="fuchsia|pro|alex">. Проверка контраста (WCAG): текст на кнопке акцента не меньше 4,5:1
   (светлая «Про Деньги»: чёрный на жёлтом 13:1), акцентный текст на светлой поверхности не меньше 5:1. */

/* ---------- Фуксия ---------- */
:root[data-accent="fuchsia"] {
  --accent: #D61F7F;
  --accent-2: #B8156A;
  --accent-ink: #FFFFFF;
  --accent-text: #B8156A;
  --accent-soft: #FCE7F2;
  --accent-glow: rgba(214, 31, 127, .35);
  --canvas-glow-1: rgba(214, 31, 127, .10);
  --hero-bg: #3A0F28;
  --hero-ink: #FFF1F8;
  --hero-ink-2: #E2A6C6;
  --hero-accent: #FF7AB8;
  --hero-line: rgba(255, 122, 184, .18);
  --focus: 0 0 0 3px rgba(214, 31, 127, .32);
  --heat-2: #FAD3E6; --heat-3: #EE82B6; --heat-4: #D61F7F; --heat-5: #3A0F28;
}
:root[data-theme="dark"][data-accent="fuchsia"] {
  --accent: #FF5FAF;
  --accent-2: #FF86C3;
  --accent-ink: #2A0518;
  --accent-text: #FF7DBD;
  --accent-soft: rgba(255, 95, 175, .14);
  --accent-glow: rgba(255, 95, 175, .34);
  --canvas-glow-1: rgba(255, 95, 175, .07);
  --hero-bg: #FF5FAF;
  --hero-ink: #2A0518;
  --hero-ink-2: #5A0F3A;
  --hero-accent: #2A0518;
  --hero-line: rgba(42, 5, 24, .12);
  --focus: 0 0 0 3px rgba(255, 95, 175, .36);
  --heat-2: #3A1228; --heat-3: #8A2A5E; --heat-4: #FF5FAF; --heat-5: #FFD3EA;
}

/* ---------- Про Деньги: чёрное и жёлтое ---------- */
:root[data-accent="pro"] {
  --accent: #FFD60A;
  --accent-2: #F2C400;
  --accent-ink: #141000;
  --accent-text: #7A5C00;
  --accent-soft: #FFF4C2;
  --accent-glow: rgba(255, 214, 10, .55);
  --canvas-glow-1: rgba(255, 214, 10, .26);
  --hero-bg: #141414;
  --hero-ink: #F4F5EF;
  --hero-ink-2: #A7AB9F;
  --hero-accent: #FFD60A;
  --hero-line: rgba(255, 214, 10, .18);
  --focus: 0 0 0 3px rgba(214, 168, 0, .50);
  --heat-2: #FFEFA8; --heat-3: #FFD60A; --heat-4: #B38B00; --heat-5: #1A1500;
}
:root[data-theme="dark"][data-accent="pro"] {
  --accent: #FFD60A;
  --accent-2: #FFE24D;
  --accent-ink: #141000;
  --accent-text: #FFD60A;
  --accent-soft: rgba(255, 214, 10, .13);
  --accent-glow: rgba(255, 214, 10, .34);
  --canvas-glow-1: rgba(255, 214, 10, .07);
  --hero-bg: #FFD60A;
  --hero-ink: #141000;
  --hero-ink-2: #4A3A00;
  --hero-accent: #141000;
  --hero-line: rgba(20, 16, 0, .12);
  --focus: 0 0 0 3px rgba(255, 214, 10, .38);
  --heat-2: #2E2800; --heat-3: #7A6500; --heat-4: #FFD60A; --heat-5: #FFF1A8;
}

/* ---------- Алекс: морская бирюза ---------- */
:root[data-accent="alex"] {
  --accent: #0B7F8C;
  --accent-2: #086A75;
  --accent-ink: #FFFFFF;
  --accent-text: #086A75;
  --accent-soft: #DDF3F5;
  --accent-glow: rgba(11, 127, 140, .35);
  --canvas-glow-1: rgba(11, 127, 140, .12);
  --hero-bg: #08323A;
  --hero-ink: #EAFBFD;
  --hero-ink-2: #9CCDD3;
  --hero-accent: #5FD6E3;
  --hero-line: rgba(95, 214, 227, .18);
  --focus: 0 0 0 3px rgba(11, 127, 140, .34);
  --heat-2: #CDEEF2; --heat-3: #6CC5CF; --heat-4: #0B7F8C; --heat-5: #08323A;
}
:root[data-theme="dark"][data-accent="alex"] {
  --accent: #3CCFDD;
  --accent-2: #6FDDE8;
  --accent-ink: #03181B;
  --accent-text: #4FD8E5;
  --accent-soft: rgba(60, 207, 221, .13);
  --accent-glow: rgba(60, 207, 221, .32);
  --canvas-glow-1: rgba(60, 207, 221, .07);
  --hero-bg: #3CCFDD;
  --hero-ink: #03181B;
  --hero-ink-2: #0F4A52;
  --hero-accent: #03181B;
  --hero-line: rgba(3, 24, 27, .12);
  --focus: 0 0 0 3px rgba(60, 207, 221, .36);
  --heat-2: #10353A; --heat-3: #1E7A84; --heat-4: #3CCFDD; --heat-5: #C9F4F8;
}
/* Пульт 2.0: сброс, типографика, каркас (меню слева, верхняя строка, страница, нижний док на телефоне). */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  margin: 0;
  min-height: 100vh;
  font: 400 var(--t-body)/1.45 var(--f-ui);
  color: var(--ink);
  background:
    radial-gradient(1100px 620px at 8% -12%, var(--canvas-glow-1), transparent 62%),
    radial-gradient(900px 520px at 104% -6%, var(--canvas-glow-2), transparent 60%),
    var(--canvas);
  background-attachment: fixed;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-feature-settings: "cv11", "ss01";
  transition: background-color var(--dur-3) var(--ease), color var(--dur-2) var(--ease);
}
/* лёгкое зерно поверх фона: в тёмной теме убирает «пластик» */
body::before {
  content: "";
  position: fixed; inset: 0;
  pointer-events: none; z-index: 0;
  opacity: .035;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 .9 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}
:root[data-theme="dark"] body::before { opacity: .06; }

img, svg { display: block; max-width: 100%; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: 0; padding: 0; }
a { color: inherit; text-decoration: none; }
h1, h2, h3, h4, p { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
table { border-collapse: collapse; }
:focus { outline: none; }
:focus-visible { box-shadow: var(--focus); border-radius: var(--r-xs); }
::selection { background: var(--accent); color: var(--accent-ink); }
[hidden] { display: none !important; }

/* полосы прокрутки */
* { scrollbar-width: thin; scrollbar-color: var(--line-2) transparent; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: var(--line-2); border-radius: 10px; border: 3px solid transparent; background-clip: content-box; }
::-webkit-scrollbar-track { background: transparent; }

/* ---------- Типографика ---------- */
.t-hero { font: 500 var(--t-hero)/1 var(--f-display); letter-spacing: -.045em; }
.t-kpi { font: 500 var(--t-kpi)/1 var(--f-display); letter-spacing: -.04em; }
.t-h1 { font: 500 var(--t-h1)/1.08 var(--f-display); letter-spacing: -.035em; }
.t-h2 { font: 500 var(--t-h2)/1.2 var(--f-display); letter-spacing: -.02em; }
.t-h3 { font: 600 var(--t-h3)/1.3 var(--f-ui); letter-spacing: -.01em; }
.t-sm { font-size: var(--t-sm); }
.t-xs { font-size: var(--t-xs); }
.t-label { font: 600 var(--t-xs)/1.2 var(--f-ui); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); }
.muted { color: var(--ink-2); }
.faint { color: var(--ink-3); }
.mono { font-family: var(--f-mono); font-size: .92em; letter-spacing: -.01em; }
.num, .tnum, :root .num, :root .tnum { font-variant-numeric: tabular-nums; }
.pos { color: var(--pos); }
.neg { color: var(--neg); }
.warn { color: var(--warn); }
.accent-text { color: var(--accent-text); }
.unit { font-size: .42em; font-weight: 500; letter-spacing: 0; color: var(--ink-3); margin-left: .28em; vertical-align: .38em; font-family: var(--f-ui); }
.nowrap { white-space: nowrap; }
.ellipsis { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.ic { width: 18px; height: 18px; stroke-width: 1.75; flex: none; }
.ic-sm { width: 15px; height: 15px; }
.ic-lg { width: 22px; height: 22px; }

/* ---------- Каркас ---------- */
.app {
  position: relative; z-index: 1;
  display: grid;
  grid-template-columns: var(--side-w) minmax(0, 1fr);
  gap: var(--gap);
  padding: var(--frame);
  min-height: 100vh;
  transition: grid-template-columns var(--dur-3) var(--ease);
}
.app[data-collapsed="true"] { grid-template-columns: var(--side-w-c) minmax(0, 1fr); }

/* меню слева */
.side {
  position: sticky; top: var(--frame);
  height: calc(100vh - var(--frame) * 2);
  display: flex; flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--glass-line);
  border-radius: var(--r-xl);
  box-shadow: var(--sh-1);
  padding: 18px 14px 14px;
  overflow: hidden;
}
.side-brand { display: flex; align-items: center; gap: 12px; padding: 4px 6px 18px; min-height: 58px; }
.logo {
  width: 40px; height: 40px; flex: none; border-radius: 13px;
  display: grid; place-items: center;
  background: var(--inverse); color: var(--accent);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .06);
}
:root[data-theme="dark"] .logo { background: var(--accent); color: var(--accent-ink); }
.logo svg { width: 24px; height: 24px; }
.brand-name { font: 600 17px/1.1 var(--f-display); letter-spacing: -.02em; }
.brand-sub { font-size: var(--t-xs); color: var(--ink-3); margin-top: 2px; }
.side-collapse {
  margin-left: auto; width: 30px; height: 30px; border-radius: 10px;
  display: grid; place-items: center; color: var(--ink-3);
  transition: background var(--dur-1), color var(--dur-1);
}
.side-collapse:hover { background: var(--surface-3); color: var(--ink); }

.side-nav { flex: 1; overflow-y: auto; overflow-x: hidden; margin: 0 -6px; padding: 0 6px; scrollbar-width: none; }
.side-nav::-webkit-scrollbar { display: none; }
/* список разделов прокручивается внутри меню: пока ниже есть ещё пункты, нижний край затухает (js/fade-edge.js ведёт data-fx="b"; аудит 19.10, п. 5) */
.side-nav[data-fx~="b"] { -webkit-mask-image: linear-gradient(var(--ink) calc(100% - 28px), transparent); mask-image: linear-gradient(var(--ink) calc(100% - 28px), transparent); }
/* ниже 960 px по высоте карточка смены в меню компактнее (было 172 px), пунктам остаётся больше места */
@media (min-width: 721px) and (max-height: 960px) {
  .side-foot .shift-card { padding: 10px 12px; }
  .side-foot .shift-card .t-big { font-size: 26px; margin: 6px 0 2px; }
  .side-foot .shift-card .btns { margin-top: 8px; }
  .side-foot .shift-card .btn { height: 32px; }
  .side-foot .shift-card .play, .side-foot .shift-card .stop { width: 32px; height: 32px; }
}
.side-group { padding: 16px 12px 8px; }
.side-group:first-child { padding-top: 4px; }
.side-item {
  position: relative;
  display: flex; align-items: center; gap: 12px;
  height: 42px; padding: 0 12px; margin: 2px 0;
  border-radius: 14px;
  color: var(--ink-2); font-weight: 500;
  transition: background var(--dur-1) var(--ease), color var(--dur-1) var(--ease);
  white-space: nowrap;
}
.side-item .ic { width: 20px; height: 20px; }
.side-item:hover { background: var(--surface-3); color: var(--ink); }
.side-item[aria-current="page"] { background: var(--inverse); color: var(--inverse-ink); box-shadow: var(--sh-2); }
.side-item[aria-current="page"] .ic { color: var(--accent); }
:root[data-theme="dark"] .side-item[aria-current="page"] .ic { color: var(--inverse-ink); }
.side-item .badge { margin-left: auto; }
.side-item .new-dot { margin-left: auto; width: 7px; height: 7px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.side-label { overflow: hidden; text-overflow: ellipsis; }
.side-foot { padding-top: 12px; }

/* свёрнутое меню: только значки, подписи в подсказке */
.app[data-collapsed="true"] .side { padding: 18px 12px 14px; }
.app[data-collapsed="true"] .side-brand { justify-content: center; padding: 4px 0 18px; flex-direction: column; gap: 10px; min-height: auto; }
.app[data-collapsed="true"] .side-brand .brand-text { display: none; }
.app[data-collapsed="true"] .side-collapse { margin: 0; }
.app[data-collapsed="true"] .side-group { padding: 14px 0 6px; text-align: center; font-size: 0; }
.app[data-collapsed="true"] .side-group::after { content: ""; display: block; width: 18px; height: 1px; margin: 0 auto; background: var(--line-2); }
.app[data-collapsed="true"] .side-item { justify-content: center; padding: 0; width: 52px; height: 48px; margin: 4px auto; }
.app[data-collapsed="true"] .side-label { display: none; }
.app[data-collapsed="true"] .side-item .badge { position: absolute; top: 4px; right: 2px; margin: 0; transform: scale(.86); }
.app[data-collapsed="true"] .side-item .new-dot { position: absolute; top: 9px; right: 9px; margin: 0; }

/* правая часть */
.main { min-width: 0; display: flex; flex-direction: column; gap: var(--gap); }

.topbar {
  position: sticky; top: var(--frame); z-index: 20;
  display: flex; align-items: center; gap: 10px;
  height: var(--top-h); padding: 0 10px 0 12px;
  background: var(--glass);
  -webkit-backdrop-filter: blur(18px) saturate(1.4);
  backdrop-filter: blur(18px) saturate(1.4);
  border: 1px solid var(--glass-line);
  border-radius: var(--r-xl);
  box-shadow: var(--sh-1);
}
.topbar .spacer { flex: 1; }
.top-search {
  display: flex; align-items: center; gap: 10px;
  width: min(380px, 34vw); height: 44px; padding: 0 8px 0 14px;
  border-radius: var(--r-pill);
  background: var(--surface-2); color: var(--ink-3);
  border: 1px solid transparent;
  transition: border-color var(--dur-1), background var(--dur-1);
  text-align: left;
}
.top-search:hover { border-color: var(--line-2); background: var(--surface); }
.top-search .ph { flex: 1; font-size: var(--t-body); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.page { min-width: 0; padding: 6px 4px 40px; }
.page-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; flex-wrap: wrap; margin: 6px 4px 22px; }
.page-title { font: 500 var(--t-h1)/1.05 var(--f-display); letter-spacing: -.035em; }
.page-sub { margin-top: 8px; color: var(--ink-2); font-size: var(--t-body); }
.page-actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.page-tools { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin: -6px 4px 18px; }

/* сетка 12 колонок */
.grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--gap); align-items: stretch; }
.grid + .grid { margin-top: var(--gap); }
.span-2 { grid-column: span 2; } .span-3 { grid-column: span 3; } .span-4 { grid-column: span 4; }
.span-5 { grid-column: span 5; } .span-6 { grid-column: span 6; } .span-7 { grid-column: span 7; }
.span-8 { grid-column: span 8; } .span-9 { grid-column: span 9; } .span-12 { grid-column: span 12; }
.row-2 { grid-row: span 2; }
.stack { display: flex; flex-direction: column; gap: var(--gap); min-width: 0; }
.row { display: flex; align-items: center; gap: 10px; min-width: 0; }
.row.wrap { flex-wrap: wrap; }
.between { justify-content: space-between; }
.grow { flex: 1; min-width: 0; }
.gap-4 { gap: 4px; } .gap-6 { gap: 6px; } .gap-16 { gap: 16px; } .gap-24 { gap: 24px; }
.mt-4 { margin-top: 4px; } .mt-8 { margin-top: 8px; } .mt-12 { margin-top: 12px; } .mt-16 { margin-top: 16px; } .mt-24 { margin-top: 24px; }

/* появление карточек по очереди */
.rise { animation: rise var(--dur-3) var(--ease) both; animation-delay: calc(var(--i, 0) * 45ms); }
@keyframes rise { from { opacity: 0; transform: translateY(10px) scale(.995); } to { opacity: 1; transform: none; } }
@keyframes pulse { 0%, 100% { box-shadow: 0 0 0 0 var(--accent-glow); } 50% { box-shadow: 0 0 0 6px transparent; } }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes shimmer { from { background-position: -400px 0; } to { background-position: 400px 0; } }
@keyframes float { 0%, 100% { transform: translateY(0) scale(1); } 50% { transform: translateY(-6px) scale(1.02); } }
@keyframes breathe { 0%, 100% { opacity: .65; } 50% { opacity: 1; } }

/* нижний док на телефоне (плавающая стеклянная панель) */
.dock { display: none; }

/* ---------- Адаптив ---------- */
@media (max-width: 1280px) {
  .span-2 { grid-column: span 4; }
  .span-3 { grid-column: span 6; }
}
@media (max-width: 1024px) {
  .span-4, .span-5, .span-7, .span-8, .span-9 { grid-column: span 12; }
  .span-4.keep { grid-column: span 4; }
  .span-8.keep { grid-column: span 8; }
}
@media (max-width: 1100px) {
  .app { grid-template-columns: var(--side-w-c) minmax(0, 1fr); }
  .side-collapse { display: none; }
}
@media (max-width: 1360px) {
  .top-search { width: 44px; padding: 0; justify-content: center; flex: none; }
  .top-search .ph, .top-search .kbd { display: none; }
  .topbar .demo-badge { display: none; }
}
@media (max-width: 1180px) {
  .top-me-text, .top-me > .ic { display: none; }
}
@media (max-width: 860px) {
  .span-2, .span-3, .span-4, .span-6, .span-4.keep, .span-8.keep { grid-column: span 12; }
  .page-title { font-size: 28px; }
  :root { --t-kpi: 34px; --t-hero: 44px; }
}
@media (max-width: 720px) {
  :root { --frame: 8px; --gap: 12px; --r-xl: 22px; --top-h: 56px; }
  .app, .app[data-collapsed="true"] { grid-template-columns: minmax(0, 1fr); }
  .side { display: none; }
  .topbar { padding: 0 8px; gap: 6px; }
  .top-search { width: 44px; padding: 0; justify-content: center; }
  .top-search .ph, .top-search .kbd { display: none; }
  .hide-m { display: none !important; }
  .page { padding: 2px 0 110px; }
  .page-head { margin: 6px 2px 16px; }
  .page-sub { font-size: var(--t-sm); }
  .page-tools { margin: -4px 2px 14px; }
  .kpi { min-height: 0; gap: 12px; }
  .dock {
    display: flex; position: fixed; z-index: 40;
    left: 50%; transform: translateX(-50%);
    bottom: max(12px, env(safe-area-inset-bottom));
    gap: 4px; padding: 6px;
    background: var(--glass);
    -webkit-backdrop-filter: blur(20px) saturate(1.5);
    backdrop-filter: blur(20px) saturate(1.5);
    border: 1px solid var(--glass-line);
    border-radius: var(--r-pill);
    box-shadow: var(--sh-pop);
  }
  .dock a, .dock button {
    position: relative;
    width: 54px; height: 50px; border-radius: var(--r-pill);
    display: grid; place-items: center; color: var(--ink-2);
  }
  .dock [aria-current="page"] { background: var(--inverse); color: var(--accent); }
  :root[data-theme="dark"] .dock [aria-current="page"] { color: var(--inverse-ink); }
  .dock .ic { width: 21px; height: 21px; }
  .dock .badge { position: absolute; top: 4px; right: 6px; transform: scale(.82); }
  /* прокручиваемые ленты: пока справа есть ещё, правый край затухает на 24 px (js/fade-edge.js ведёт data-fx="r"; аудит 19.10, п. 18; «Чаты» свои вкладки ведут сами) */
  .seg[data-fx~="r"], .tabs:not(.ch-tabs)[data-fx~="r"], .tbl-wrap[data-fx~="r"], .rt-watch[data-fx~="r"] { -webkit-mask-image: linear-gradient(90deg, var(--ink) calc(100% - 24px), transparent); mask-image: linear-gradient(90deg, var(--ink) calc(100% - 24px), transparent); }
}
@media (min-width: 721px) { .show-m { display: none !important; } }

/* режим скриншота (?shot=1): без анимаций, чтобы снимок был полным */
:root[data-shot] *, :root[data-shot] *::before, :root[data-shot] *::after { animation: none !important; transition: none !important; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 1ms !important; animation-iteration-count: 1 !important; transition-duration: 1ms !important; }
}

/* ---------- живой пульт: мелочи оболочки ---------- */
::view-transition-old(root), ::view-transition-new(root) { animation: none; mix-blend-mode: normal; }
.side-old { margin-left: auto; color: var(--ink-4); }
.side-item:hover .side-old { color: var(--ink-3); }
.app[data-collapsed="true"] .side-old { display: none; }
.accent-dot { width: 30px; height: 30px; border-radius: 50%; box-shadow: 0 0 0 1px var(--line-2); }
.accent-dot[aria-pressed="true"] { box-shadow: 0 0 0 3px var(--surface), 0 0 0 5px var(--ink); }
.accent-lime { background: #D5F35E; } .accent-emerald { background: #1F8A5B; } .accent-cobalt { background: #3F5BF6; }
.accent-fuchsia { background: #D61F7F; } .accent-pro { background: #FFD60A; } .accent-alex { background: #0B7F8C; }
.accent-row { display: flex; flex-wrap: wrap; gap: 8px; max-width: 240px; padding: 4px 10px 8px; }
.more-tile { padding: 14px 10px; display: grid; justify-items: center; gap: 8px; text-align: center; border-radius: 18px; }
.more-tile.on, .card.soft.more-tile.on { background: var(--inverse); color: var(--inverse-ink); } /* .card.soft (components.css, грузится позже) перебивал фон: текст текущего раздела в окне «Разделы» сливался */
.ic { fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
/* Пульт 2.0: знак Exchange OS (js/brand-mark.js, владелец 09.10). Знак во всю плитку (сетка 24, поля внутри фигуры),
   плитка со скруглением как у знака (rx 6 из 24 = 25%), цвет знака и плитки даёт место: .logo, .login-mark, .pf-mark. */
:root .logo, :root .login-mark, :root .pf-mark { border-radius: 25%; overflow: hidden; }
:root .logo .bm, :root .login-mark .bm, :root .pf-mark .bm { width: 100%; height: 100%; display: block; }
/* меню профиля: выбор знака */
.mark-row { display: flex; gap: 8px; padding: 4px 10px 8px; }
.mark-opt { flex: 1; display: flex; align-items: center; gap: 8px; padding: 6px 10px 6px 6px; border: 1px solid var(--line); border-radius: 12px; background: transparent; color: var(--ink); font: inherit; cursor: pointer; }
.mark-opt .logo { width: 28px; height: 28px; box-shadow: none; }
.mark-opt[aria-pressed="true"] { border-color: var(--ink); background: var(--surface-2); }
/* вход и настройка устройства: шапка цвета «героя» (тёмная в светлой теме, лаймовая в тёмной); знак как в мастере C:
   фигура акцентом героя на плитке цвета шапки, контур плитки тонкой линией (иначе лаймовая плитка с тёмной фигурой
   читается рамкой) */
:root .login-mark, :root .pf-mark { background: var(--hero-bg); color: var(--hero-accent); box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--hero-accent) 35%, transparent); }
/* Пульт 2.0: компоненты. Экран собирается только из этих классов; своё для экрана в css/screens/<экран>.css. */

/* ---------- Карточки ---------- */
.card {
  position: relative; min-width: 0;
  background: var(--surface);
  border: 1px solid var(--glass-line);
  border-radius: var(--r-xl);
  box-shadow: var(--sh-1), var(--sh-inset);
  padding: 22px;
}
.card.flush { padding: 0; overflow: hidden; }
.card.soft { background: var(--surface-2); box-shadow: none; }
.card.glass { background: var(--glass); -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px); }
.card.link { cursor: pointer; transition: transform var(--dur-2) var(--ease), box-shadow var(--dur-2) var(--ease); }
.card.link:hover { transform: translateY(-2px); box-shadow: var(--sh-2); }
.card-head { display: flex; align-items: center; justify-content: space-between; gap: 10px 12px; flex-wrap: wrap; margin-bottom: 18px; min-height: 32px; }
.card-head > :first-child { min-width: 0; }
.card.flush .card-head { padding: 20px 22px 0; }
.card-title { font: 500 17px/1.25 var(--f-display); letter-spacing: -.02em; display: flex; align-items: center; gap: 10px; }
.card-title .ic { color: var(--ink-3); }
.card-sub { font-size: var(--t-sm); color: var(--ink-3); margin-top: 3px; }
.card-actions { display: flex; align-items: center; gap: 8px; flex: none; }
.card-foot { margin-top: 16px; padding-top: 14px; border-top: 1px dashed var(--line-2); display: flex; align-items: center; justify-content: space-between; gap: 10px; font-size: var(--t-sm); color: var(--ink-2); }
.well { background: var(--surface-2); border-radius: var(--r-lg); padding: 16px; }

/* главная плашка: чернила + лайм в светлой теме, лайм + чернила в тёмной */
.card.hero {
  background-color: var(--hero-bg);
  color: var(--hero-ink);
  border-color: transparent;
  box-shadow: var(--sh-2);
  overflow: hidden;
}
.card.hero .muted, .card.hero .card-sub, .card.hero .faint, .card.hero .unit { color: var(--hero-ink-2); }
.card.hero .card-title .ic { color: var(--hero-ink-2); }
.card.accent { background: var(--accent); color: var(--accent-ink); border-color: transparent; }
.card.accent .muted, .card.accent .card-sub { color: color-mix(in srgb, var(--accent-ink) 62%, transparent); }

/* контурные линии (как «Time Tracker» у Donezo): два набора колец дают узор */
.contour {
  background-image:
    repeating-radial-gradient(circle at 92% 118%, transparent 0 15px, var(--hero-line) 15px 16px),
    repeating-radial-gradient(circle at 12% -30%, transparent 0 21px, var(--hero-line) 21px 22px);
}
.contour-glow::after {
  content: ""; position: absolute; pointer-events: none;
  width: 340px; height: 340px; right: -110px; bottom: -150px; border-radius: 50%;
  background: radial-gradient(circle, color-mix(in srgb, var(--hero-accent) 38%, transparent), transparent 66%);
  filter: blur(6px); opacity: .55;
}
.card.hero > * { position: relative; z-index: 1; }

/* штриховка: план, ожидание, остаток */
.hatch { background-image: repeating-linear-gradient(-45deg, var(--hatch-c) 0 1.6px, transparent 1.6px 7px); }

/* ---------- Показатели ---------- */
.kpi { display: flex; flex-direction: column; gap: 14px; min-height: 168px; }
.kpi-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.kpi-label { font: 500 15px/1.3 var(--f-ui); letter-spacing: -.01em; }
.kpi-value { font: 500 var(--t-kpi)/1 var(--f-display); letter-spacing: -.045em; font-variant-numeric: tabular-nums; white-space: nowrap; }
.kpi-foot { margin-top: auto; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: var(--t-sm); color: var(--ink-2); }
.card.hero .kpi-foot { color: var(--hero-ink-2); }
.mini-stat { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.mini-stat .v { font: 500 26px/1.05 var(--f-display); letter-spacing: -.035em; font-variant-numeric: tabular-nums; white-space: nowrap; }
.mini-stat .l { font-size: var(--t-sm); color: var(--ink-3); }
.mini-stat .chip { align-self: flex-start; }

/* ---------- Кнопки ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 42px; padding: 0 18px;
  border-radius: var(--r-pill);
  font-weight: 500; white-space: nowrap;
  border: 1px solid var(--line-2);
  background: var(--surface);
  color: var(--ink);
  transition: transform var(--dur-1) var(--ease), background var(--dur-1), border-color var(--dur-1), box-shadow var(--dur-1);
}
.btn:hover { border-color: var(--ink-3); }
.btn:active { transform: scale(.97); }
.btn.primary { background: var(--inverse); color: var(--inverse-ink); border-color: transparent; box-shadow: var(--sh-2); }
.btn.primary:hover { background: var(--inverse-2); }
.btn.primary .ic { color: var(--accent); }
:root[data-theme="dark"] .btn.primary .ic { color: var(--inverse-ink); }
.btn.accent { background: var(--accent); color: var(--accent-ink); border-color: transparent; }
.btn.accent:hover { background: var(--accent-2); }
.btn.soft { background: var(--surface-2); border-color: transparent; }
.btn.soft:hover { background: var(--surface-3); }
.btn.ghost { background: transparent; border-color: transparent; color: var(--ink-2); }
.btn.ghost:hover { background: var(--surface-3); color: var(--ink); }
.btn.danger { background: var(--neg); color: #fff; border-color: transparent; }
.btn.on-hero { background: var(--hero-ink); color: var(--hero-bg); border-color: transparent; }
.btn.sm { height: 34px; padding: 0 13px; font-size: var(--t-sm); gap: 6px; }
.btn.sm .ic { width: 15px; height: 15px; }
.btn.lg { height: 50px; padding: 0 24px; font-size: 15px; }
.btn.block { width: 100%; }
.btn[disabled] { opacity: .45; pointer-events: none; }
/* кнопка только со значком: круглая */
.btn.icon-only { width: 42px; padding: 0; }
.btn.sm.icon-only { width: 34px; padding: 0; }
.btn.lg.icon-only { width: 50px; padding: 0; }

.icon-btn {
  position: relative;
  width: 42px; height: 42px; flex: none;
  display: inline-grid; place-items: center;
  border-radius: var(--r-pill);
  background: var(--surface-2); color: var(--ink-2);
  border: 1px solid transparent;
  transition: background var(--dur-1), color var(--dur-1), transform var(--dur-1);
}
.icon-btn:hover { background: var(--surface-3); color: var(--ink); }
.icon-btn:active { transform: scale(.94); }
.icon-btn.sm { width: 32px; height: 32px; }
.icon-btn.sm .ic { width: 15px; height: 15px; }
.icon-btn.xs { width: 26px; height: 26px; border-radius: 9px; }
.icon-btn.xs .ic { width: 14px; height: 14px; }
.icon-btn.plain { background: transparent; }
.icon-btn.plain:hover { background: var(--surface-3); }
.icon-btn .dot-n { position: absolute; top: 9px; right: 10px; width: 8px; height: 8px; border-radius: 50%; background: var(--neg); box-shadow: 0 0 0 2px var(--surface-2); }

/* круглая стрелка «открыть» в углу карточки */
.round-btn {
  width: 38px; height: 38px; flex: none; border-radius: 50%;
  display: grid; place-items: center;
  border: 1px solid var(--line-2); color: var(--ink);
  background: var(--surface);
  transition: transform var(--dur-2) var(--ease-spring), background var(--dur-1);
}
.round-btn:hover { transform: rotate(45deg); }
.round-btn .ic { width: 17px; height: 17px; }
.card.hero .round-btn { background: var(--hero-ink); color: var(--hero-bg); border-color: transparent; }
.card.accent .round-btn { background: var(--accent-ink); color: var(--accent); border-color: transparent; }

/* ---------- Переключатели ---------- */
.seg {
  display: inline-flex; align-items: center; gap: 2px;
  padding: 4px; border-radius: var(--r-pill);
  background: var(--surface-2);
  border: 1px solid var(--glass-line);
  max-width: 100%; overflow-x: auto; scrollbar-width: none;
}
.seg::-webkit-scrollbar { display: none; }
.seg button {
  height: 34px; padding: 0 14px; border-radius: var(--r-pill);
  color: var(--ink-2); font-weight: 500; font-size: var(--t-sm); white-space: nowrap;
  display: inline-flex; align-items: center; gap: 6px;
  transition: background var(--dur-2) var(--ease), color var(--dur-1), box-shadow var(--dur-2);
}
.seg button:hover { color: var(--ink); }
.seg button[aria-pressed="true"] { background: var(--surface); color: var(--ink); box-shadow: var(--sh-1), 0 0 0 1px var(--line); }
:root[data-theme="dark"] .seg button[aria-pressed="true"] { background: var(--surface-3); box-shadow: none; }
.seg.sm button { height: 28px; padding: 0 11px; font-size: var(--t-xs); }
.seg.ink button[aria-pressed="true"],
:root[data-theme="dark"] .seg.ink button[aria-pressed="true"] { background: var(--inverse); color: var(--inverse-ink); box-shadow: none; }

/* вкладки-таблетки (как у Nixtio) */
.tabs { display: flex; gap: 8px; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; padding: 2px; }
.tabs::-webkit-scrollbar { display: none; }
.tabs button {
  flex: none; /* владелец 18.10: на iPhone Safari сжимал кнопки вкладок карточки уже текста, и подпись вылезала за кнопку */
  height: 42px; padding: 0 18px; border-radius: var(--r-pill);
  background: var(--surface); border: 1px solid var(--glass-line);
  color: var(--ink-2); font-weight: 500; white-space: nowrap;
  display: inline-flex; align-items: center; gap: 8px;
  transition: background var(--dur-2), color var(--dur-1);
}
.tabs button:hover { color: var(--ink); }
.tabs button[aria-pressed="true"] { background: var(--inverse); color: var(--inverse-ink); border-color: transparent; }
.tabs button .badge { transform: scale(.9); }

.switch { position: relative; width: 40px; height: 24px; flex: none; border-radius: var(--r-pill); background: var(--line-2); transition: background var(--dur-2); }
.switch::after { content: ""; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, .2); transition: transform var(--dur-2) var(--ease-spring); }
.switch[aria-checked="true"] { background: var(--inverse); }
.switch[aria-checked="true"]::after { transform: translateX(16px); background: var(--accent); }
:root[data-theme="dark"] .switch[aria-checked="true"] { background: var(--accent); }
:root[data-theme="dark"] .switch[aria-checked="true"]::after { background: var(--accent-ink); }

/* ---------- Метки ---------- */
.chip {
  display: inline-flex; align-items: center; gap: 6px;
  height: 26px; padding: 0 10px; border-radius: var(--r-pill);
  background: var(--surface-3); color: var(--ink-2);
  font-size: var(--t-sm); font-weight: 500; white-space: nowrap;
  border: 1px solid transparent;
}
.chip .ic { width: 13px; height: 13px; }
.chip.sm { height: 22px; padding: 0 8px; font-size: var(--t-xs); }
.chip.lg { height: 32px; padding: 0 13px; font-size: var(--t-body); }
.chip.pos { background: var(--pos-soft); color: var(--pos); }
.chip.neg { background: var(--neg-soft); color: var(--neg); }
.chip.warn { background: var(--warn-soft); color: var(--warn); }
.chip.info { background: var(--info-soft); color: var(--info); }
.chip.violet { background: var(--violet-soft); color: var(--violet); }
.chip.accent { background: var(--accent-soft); color: var(--accent-text); }
.chip.solid-accent { background: var(--accent); color: var(--accent-ink); }
.chip.ink { background: var(--inverse); color: var(--inverse-ink); }
.chip.outline { background: transparent; border-color: var(--line-2); }
.chip.btnish { cursor: pointer; transition: background var(--dur-1), border-color var(--dur-1); }
.chip.btnish:hover { border-color: var(--ink-3); }
.chip.btnish[aria-pressed="true"] { background: var(--inverse); color: var(--inverse-ink); }
.card.hero .chip { background: color-mix(in srgb, var(--hero-ink) 12%, transparent); color: var(--hero-ink); }
.card.hero .chip.delta.up { background: color-mix(in srgb, var(--hero-accent) 18%, transparent); color: var(--hero-accent); }
.dot { width: 7px; height: 7px; border-radius: 50%; background: currentColor; flex: none; }

/* изменение к прошлому периоду */
.delta { font-variant-numeric: tabular-nums; }
.delta.up { background: var(--pos-soft); color: var(--pos); }
.delta.down { background: var(--neg-soft); color: var(--neg); }
.delta.flat { background: var(--surface-3); color: var(--ink-3); }

.badge {
  display: inline-grid; place-items: center;
  min-width: 22px; height: 20px; padding: 0 6px;
  border-radius: var(--r-pill);
  background: var(--inverse); color: var(--inverse-ink);
  font: 600 11px/1 var(--f-ui); font-variant-numeric: tabular-nums;
}
.badge.accent { background: var(--accent); color: var(--accent-ink); }
.badge.neg { background: var(--neg); color: #fff; }
.side-item[aria-current="page"] .badge { background: var(--accent); color: var(--accent-ink); }

.kbd {
  display: inline-grid; place-items: center; min-width: 22px; height: 22px; padding: 0 6px;
  border-radius: 7px; border: 1px solid var(--line-2); background: var(--surface);
  font: 500 11px/1 var(--f-ui); color: var(--ink-3);
}

/* ---------- Люди ---------- */
.ava {
  --h: 90;
  width: 36px; height: 36px; flex: none; border-radius: 50%;
  display: grid; place-items: center; overflow: hidden;
  background: hsl(var(--h) 55% 89%);
  color: hsl(var(--h) 38% 27%);
  font: 600 13px/1 var(--f-ui); letter-spacing: -.01em;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .04);
}
:root[data-theme="dark"] .ava { background: hsl(var(--h) 24% 20%); color: hsl(var(--h) 62% 78%); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .05); }
.ava.sm { width: 28px; height: 28px; font-size: 11px; }
.ava.lg { width: 48px; height: 48px; font-size: 16px; }
.ava.xl { width: 68px; height: 68px; font-size: 22px; }
.ava-wrap { position: relative; flex: none; }
.ava-wrap .sdot { position: absolute; right: -1px; bottom: -1px; box-shadow: 0 0 0 2.5px var(--surface); }
.ava-stack { display: flex; align-items: center; }
.ava-stack > * { margin-left: -6px; box-shadow: 0 0 0 2.5px var(--surface); position: relative; }
.ava-stack > *:nth-child(1) { z-index: 6; } .ava-stack > *:nth-child(2) { z-index: 5; } .ava-stack > *:nth-child(3) { z-index: 4; }
.ava-stack > *:nth-child(4) { z-index: 3; } .ava-stack > *:nth-child(5) { z-index: 2; } .ava-stack > *:nth-child(6) { z-index: 1; }
.ava-stack > *:first-child { margin-left: 0; }
.ava-more { background: var(--surface-3); color: var(--ink-2); }

/* статус: на смене / отошёл / не в сети */
.sdot { width: 10px; height: 10px; border-radius: 50%; background: var(--ink-4); flex: none; }
.sdot.on { background: var(--pos); }
.sdot.on.live { animation: pulse-pos 2.2s var(--ease) infinite; }
.sdot.afk { background: var(--warn); }
.sdot.busy { background: var(--info); }
.sdot.off { background: var(--ink-4); }
@keyframes pulse-pos { 0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--pos) 45%, transparent); } 60% { box-shadow: 0 0 0 6px transparent; } }

/* ---------- Таблица ---------- */
.tbl-wrap { overflow: auto; }
.tbl { width: 100%; font-variant-numeric: tabular-nums; }
.tbl th {
  height: 40px; padding: 0 14px;
  text-align: left; white-space: nowrap;
  font: 500 var(--t-sm)/1 var(--f-ui); color: var(--ink-3);
  background: var(--surface-2);
  position: sticky; top: 0; z-index: 2;
}
.tbl th:first-child { border-radius: 12px 0 0 12px; }
.tbl th:last-child { border-radius: 0 12px 12px 0; }
.tbl th.sortable { cursor: pointer; user-select: none; }
.tbl th.sortable:hover, .tbl th.sorted { color: var(--ink); }
.tbl th .th { display: inline-flex; align-items: center; gap: 5px; }
.tbl th .ic { width: 13px; height: 13px; opacity: .7; }
.tbl td { height: 58px; padding: 0 14px; border-bottom: 1px solid var(--line); white-space: nowrap; }
.tbl tbody tr { transition: background var(--dur-1); }
.tbl tbody tr:hover { background: var(--surface-2); }
.tbl tbody tr.click { cursor: pointer; }
.tbl tbody tr:last-child td { border-bottom: 0; }
.tbl .r, .tbl th.r { text-align: right; }
.tbl .c { text-align: center; }
.tbl.dense td { height: 46px; }
.tbl .sub { display: block; font-size: var(--t-xs); color: var(--ink-3); margin-top: 3px; }
.cell-user { display: flex; align-items: center; gap: 12px; min-width: 0; }
.cell-user .name { font-weight: 500; }

/* ---------- Поля ---------- */
.input, .select, .textarea {
  width: 100%; height: 42px; padding: 0 14px;
  border-radius: var(--r-md);
  background: var(--surface-2); border: 1px solid transparent;
  color: var(--ink);
  transition: border-color var(--dur-1), background var(--dur-1), box-shadow var(--dur-1);
}
.textarea { height: auto; min-height: 96px; padding: 12px 14px; resize: vertical; line-height: 1.5; }
.input::placeholder, .textarea::placeholder { color: var(--ink-3); }
.input:hover, .select:hover, .textarea:hover { border-color: var(--line-2); }
.input:focus, .select:focus, .textarea:focus { background: var(--surface); border-color: var(--ink-3); box-shadow: var(--focus); }
.select { appearance: none; padding-right: 36px; background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%238A8E86' stroke-width='2.4' stroke-linecap='round'><path d='m6 9 6 6 6-6'/></svg>"); background-repeat: no-repeat; background-position: right 14px center; }
.field { display: flex; flex-direction: column; gap: 6px; }
.field > label { font-size: var(--t-sm); color: var(--ink-2); font-weight: 500; }
.search { position: relative; }
.search .ic { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); color: var(--ink-3); pointer-events: none; }
.search .input { padding-left: 42px; border-radius: var(--r-pill); }

/* ---------- Прогресс ---------- */
.bar { position: relative; height: 10px; border-radius: var(--r-pill); background: var(--surface-3); overflow: hidden; }
.bar > i { position: absolute; inset: 0 auto 0 0; border-radius: inherit; background: var(--inverse); transition: width 900ms var(--ease); }
.bar > i.accent { background: var(--accent); }
.bar > i.pos { background: var(--pos); }
.bar > i.warn { background: var(--warn); }
.bar > i.neg { background: var(--neg); }
.bar.hatch-track { background-color: transparent; }
.bar.hatch-track::before { content: ""; position: absolute; inset: 0; border-radius: inherit; background-image: repeating-linear-gradient(-45deg, var(--hatch-c) 0 1.6px, transparent 1.6px 7px); box-shadow: inset 0 0 0 1px var(--line); }
.bar.tall { height: 28px; border-radius: 10px; }
.bar.tall > i { border-radius: 10px; }
.bar.thin { height: 6px; }
.card.hero .bar { background: color-mix(in srgb, var(--hero-ink) 14%, transparent); }
.card.hero .bar > i { background: var(--hero-accent); }

/* полоса из долей (структура) */
.stackbar { display: flex; gap: 4px; height: 30px; }
.stackbar > i { border-radius: 8px; min-width: 6px; transition: flex-grow 600ms var(--ease); }

/* таблетки-деления (как у Nixtio: 780 / 1000) */
.pills { display: flex; gap: 5px; height: 64px; }
.pills > i { flex: 1; border-radius: var(--r-pill); background: var(--inverse); }
.pills > i.off { background: transparent; border: 1.5px dashed var(--line-2); }
.card.hero .pills > i { background: var(--hero-accent); }
.card.hero .pills > i.off { background: transparent; border-color: color-mix(in srgb, var(--hero-ink) 30%, transparent); }
.card.accent .pills > i { background: var(--accent-ink); }
.card.accent .pills > i.off { border-color: color-mix(in srgb, var(--accent-ink) 30%, transparent); background: transparent; }

/* кольцо прогресса (SVG рисует App.ring) */
.ring { position: relative; flex: none; display: inline-block; vertical-align: middle; }
.ring svg { transform: rotate(-90deg); }
.ring .ring-track { stroke: var(--surface-3); }
.ring .ring-fill { stroke: var(--accent); transition: stroke-dashoffset 900ms var(--ease); }
.ring .ring-label { position: absolute; inset: 0; display: grid; place-items: center; text-align: center; font-variant-numeric: tabular-nums; }

/* ---------- Списки ---------- */
.list { display: flex; flex-direction: column; }
.li { display: flex; align-items: center; gap: 12px; padding: 11px 0; min-width: 0; }
.list.lined .li + .li { border-top: 1px solid var(--line); }
.li-main { flex: 1; min-width: 0; }
.li-title { font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.li-sub { font-size: var(--t-sm); color: var(--ink-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; margin-top: 2px; }
.li-side { text-align: right; flex: none; font-variant-numeric: tabular-nums; }
.li.click { cursor: pointer; border-radius: 14px; margin: 0 -10px; padding-left: 10px; padding-right: 10px; transition: background var(--dur-1); }
.li.click:hover { background: var(--surface-2); }

.ico-tile { width: 40px; height: 40px; flex: none; border-radius: 13px; display: grid; place-items: center; background: var(--surface-2); color: var(--ink-2); }
.ico-tile.accent { background: var(--accent-soft); color: var(--accent-text); }
.ico-tile.ink { background: var(--inverse); color: var(--accent); }
.ico-tile.pos { background: var(--pos-soft); color: var(--pos); }
.ico-tile.neg { background: var(--neg-soft); color: var(--neg); }
.ico-tile.warn { background: var(--warn-soft); color: var(--warn); }
.ico-tile.info { background: var(--info-soft); color: var(--info); }
.ico-tile.violet { background: var(--violet-soft); color: var(--violet); }

/* лента событий */
.tl { position: relative; display: flex; flex-direction: column; gap: 2px; }
.tl-item { position: relative; display: grid; grid-template-columns: 54px 22px minmax(0, 1fr); gap: 10px; padding: 8px 0; }
.tl-time { font-size: var(--t-sm); color: var(--ink-3); text-align: right; padding-top: 2px; font-variant-numeric: tabular-nums; }
.tl-dot { position: relative; display: grid; justify-items: center; }
.tl-dot::before { content: ""; position: absolute; top: 20px; bottom: -14px; width: 1.5px; background: var(--line); }
.tl-item:last-child .tl-dot::before { display: none; }
.tl-dot i { width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; background: var(--surface-3); color: var(--ink-2); }
.tl-dot .ic { width: 12px; height: 12px; }

/* легенда графика */
.legend { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; font-size: var(--t-sm); color: var(--ink-2); }
.legend span { display: inline-flex; align-items: center; gap: 7px; }
.sw { width: 10px; height: 10px; border-radius: 3px; background: var(--c-1); flex: none; }
.sw.round { border-radius: 50%; }
.sw.hatch { background: transparent; background-image: repeating-linear-gradient(-45deg, var(--ink-3) 0 1.4px, transparent 1.4px 4px); }

/* пары «ключ: значение» */
.kv { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 10px 18px; font-size: var(--t-body); }
.kv dt { color: var(--ink-3); }
.kv dd { margin: 0; text-align: right; font-weight: 500; font-variant-numeric: tabular-nums; min-width: 0; }

.divider { height: 1px; background: var(--line); margin: 16px 0; border: 0; }
.vdiv { width: 1px; align-self: stretch; background: var(--line); }

/* пусто, загрузка */
.empty { display: grid; place-items: center; gap: 10px; padding: 40px 20px; text-align: center; color: var(--ink-3); }
.empty .ico-tile { width: 52px; height: 52px; border-radius: 17px; }
.skel { border-radius: 10px; background: linear-gradient(90deg, var(--surface-2), var(--surface-3), var(--surface-2)); background-size: 800px 100%; animation: shimmer 1.4s linear infinite; }

/* копирование: значок меняется на галочку */
.copy { display: inline-grid; place-items: center; width: 24px; height: 24px; border-radius: 8px; color: var(--ink-3); transition: background var(--dur-1), color var(--dur-1); }
.copy:hover { background: var(--surface-3); color: var(--ink); }
.copy.done { color: var(--pos); }
.copy .ic { width: 14px; height: 14px; }

/* стеклянный шар ассистента */
.orb {
  width: 120px; height: 120px; border-radius: 50%; flex: none;
  background:
    radial-gradient(circle at 32% 28%, rgba(255, 255, 255, .95) 0 6%, transparent 22%),
    radial-gradient(circle at 70% 75%, color-mix(in srgb, var(--info) 70%, transparent), transparent 60%),
    radial-gradient(circle at 30% 70%, color-mix(in srgb, var(--accent) 85%, transparent), transparent 62%),
    radial-gradient(circle at 50% 50%, color-mix(in srgb, var(--accent) 40%, var(--info)), color-mix(in srgb, var(--info) 60%, #0b1a3a));
  box-shadow: inset -10px -14px 30px rgba(0, 0, 0, .18), inset 8px 10px 24px rgba(255, 255, 255, .35), 0 24px 60px -18px var(--accent-glow);
  animation: float 6s var(--ease) infinite;
}

.orb.sm { width: 56px; height: 56px; animation: none; box-shadow: inset -5px -7px 14px rgba(0, 0, 0, .16), inset 4px 5px 12px rgba(255, 255, 255, .3); }
.orb.xs { width: 30px; height: 30px; animation: none; box-shadow: inset -3px -4px 8px rgba(0, 0, 0, .14), inset 2px 3px 6px rgba(255, 255, 255, .3); }

/* ---------- Слои: шторка, окно, всплывашка, уведомления ---------- */
.scrim { position: fixed; inset: 0; z-index: 60; background: var(--scrim); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); animation: fade var(--dur-2) var(--ease) both; }
@keyframes fade { from { opacity: 0; } to { opacity: 1; } }
.drawer {
  position: fixed; z-index: 61; top: var(--frame); right: var(--frame); bottom: var(--frame);
  width: min(620px, calc(100vw - var(--frame) * 2));
  display: flex; flex-direction: column;
  background: var(--surface); border: 1px solid var(--glass-line);
  border-radius: var(--r-xl); box-shadow: var(--sh-pop);
  animation: slide-in var(--dur-3) var(--ease) both;
  overflow: hidden;
}
.drawer.wide { width: min(880px, calc(100vw - var(--frame) * 2)); }
@keyframes slide-in { from { transform: translateX(40px); opacity: 0; } to { transform: none; opacity: 1; } }
.drawer-head { display: flex; align-items: center; gap: 12px; padding: 18px 18px 14px 22px; border-bottom: 1px solid var(--line); }
.drawer-body { flex: 1; overflow-y: auto; padding: 20px 22px 28px; }
.modal {
  position: fixed; z-index: 61; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: min(480px, calc(100vw - 24px)); max-height: calc(100vh - 40px); overflow: auto;
  background: var(--surface); border: 1px solid var(--glass-line);
  border-radius: var(--r-xl); box-shadow: var(--sh-pop); padding: 24px;
  animation: pop-in var(--dur-3) var(--ease-spring) both;
}
@keyframes pop-in { from { opacity: 0; transform: translate(-50%, -46%) scale(.96); } to { opacity: 1; transform: translate(-50%, -50%); } }
.pop {
  position: fixed; z-index: 70; min-width: 220px; max-width: 340px;
  background: var(--surface); border: 1px solid var(--glass-line);
  border-radius: 18px; box-shadow: var(--sh-pop); padding: 8px;
  animation: pop-fade var(--dur-2) var(--ease) both;
}
.pop.wide { max-width: min(560px, calc(100vw - 16px)); }
@keyframes pop-fade { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
.menu-item { display: flex; align-items: center; gap: 10px; width: 100%; height: 38px; padding: 0 10px; border-radius: 11px; color: var(--ink-2); text-align: left; font-weight: 500; }
.menu-item:hover, .menu-item[aria-selected="true"] { background: var(--surface-2); color: var(--ink); }
.menu-item .kbd, .menu-item .chip { margin-left: auto; }
.menu-sep { height: 1px; margin: 6px 4px; background: var(--line); }
.menu-label { padding: 8px 10px 4px; }

.toasts { position: fixed; z-index: 80; right: 20px; bottom: 20px; display: flex; flex-direction: column; gap: 10px; align-items: flex-end; pointer-events: none; }
.toast {
  display: flex; align-items: center; gap: 10px; padding: 12px 16px 12px 12px;
  border-radius: 16px; background: var(--inverse); color: var(--inverse-ink);
  box-shadow: var(--sh-pop); font-weight: 500; pointer-events: auto;
  animation: toast-in var(--dur-3) var(--ease-spring) both;
}
.toast .ico-tile { width: 30px; height: 30px; border-radius: 10px; background: var(--accent); color: var(--accent-ink); }
.toast.out { animation: toast-out var(--dur-2) var(--ease) both; }
@keyframes toast-in { from { opacity: 0; transform: translateY(14px) scale(.96); } to { opacity: 1; transform: none; } }
@keyframes toast-out { to { opacity: 0; transform: translateY(8px); } }
@media (max-width: 720px) { .toasts { left: 12px; right: 12px; bottom: 92px; align-items: stretch; } }

/* мгновенные подсказки [data-tip] */
.qtip { position: fixed; z-index: 90; max-width: 280px; padding: 8px 11px; border-radius: 11px; background: var(--inverse); color: var(--inverse-ink); font-size: var(--t-sm); line-height: 1.4; pointer-events: none; box-shadow: var(--sh-2); }

/* палитра команд (⌘K) */
/* центр без transform: анимация pop-fade кончается на transform: none и сдвигала окно вправо (07.10, на телефоне за край) */
.cmdk { position: fixed; z-index: 61; left: 12px; right: 12px; margin: 0 auto; top: 13vh; width: auto; max-width: 620px; background: var(--surface); border: 1px solid var(--glass-line); border-radius: 24px; box-shadow: var(--sh-pop); overflow: hidden; animation: pop-fade var(--dur-2) var(--ease) both; }
.cmdk-in { display: flex; align-items: center; gap: 12px; padding: 0 18px; height: 62px; border-bottom: 1px solid var(--line); }
.cmdk-in input { flex: 1; border: 0; background: transparent; font-size: 17px; height: 100%; }
.cmdk-list { max-height: min(420px, 60vh); overflow-y: auto; padding: 8px; }
.cmdk-foot { display: flex; gap: 16px; padding: 10px 18px; border-top: 1px solid var(--line); font-size: var(--t-xs); color: var(--ink-3); }
.cmdk-foot span { display: inline-flex; align-items: center; gap: 6px; }

/* ---------- Учёт времени и AFK ---------- */
.tracker {
  display: inline-flex; align-items: center; gap: 10px;
  height: 44px; padding: 0 16px 0 12px; border-radius: var(--r-pill);
  background: var(--surface-2); border: 1px solid var(--glass-line);
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
.tracker .t { font: 600 15px/1 var(--f-display); letter-spacing: -.01em; }
.tracker .l { font-size: var(--t-xs); color: var(--ink-3); }
.tracker.paused .sdot { background: var(--ink-4); animation: none; }
.afk-pill {
  display: inline-flex; align-items: center; gap: 10px;
  height: 44px; padding: 0 6px 0 8px; border-radius: var(--r-pill);
  background: var(--warn-soft); color: var(--warn); font-weight: 600;
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
.afk-pill.over { background: var(--neg-soft); color: var(--neg); }
.afk-pill .btn { height: 32px; }
.afk-scrim {
  position: fixed; inset: 0; z-index: 55;
  background: color-mix(in srgb, var(--canvas) 55%, transparent);
  -webkit-backdrop-filter: blur(10px) grayscale(.6); backdrop-filter: blur(10px) grayscale(.6);
  display: grid; place-items: center; padding: 20px;
  animation: fade var(--dur-3) var(--ease) both;
}
.afk-card { width: min(420px, 100%); text-align: center; padding: 34px 28px 26px; }
.afk-card .t-hero { margin: 18px 0 6px; font-variant-numeric: tabular-nums; }

/* карточка смены внизу меню */
.shift-card { border-radius: 22px; padding: 16px; background-color: var(--hero-bg); color: var(--hero-ink); position: relative; overflow: hidden; }
.shift-card .muted { color: var(--hero-ink-2); }
.shift-card .t-big { font: 500 30px/1 var(--f-display); letter-spacing: -.04em; font-variant-numeric: tabular-nums; margin: 10px 0 4px; }
.shift-card .btn { height: 36px; font-size: var(--t-sm); }
.shift-card .btns { display: flex; gap: 8px; margin-top: 14px; }
.shift-card .play { width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; background: var(--hero-ink); color: var(--hero-bg); flex: none; }
.shift-card .stop { width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; background: var(--neg); color: #fff; flex: none; }
.shift-mini { display: grid; place-items: center; width: 52px; height: 52px; margin: 0 auto; border-radius: 18px; background-color: var(--hero-bg); color: var(--hero-ink); font: 600 11px/1 var(--f-ui); font-variant-numeric: tabular-nums; }

/* демо-метка */
.demo-badge { display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 12px; border-radius: var(--r-pill); border: 1px dashed var(--line-2); color: var(--ink-3); font-size: var(--t-xs); font-weight: 500; white-space: nowrap; }

/* флаг страны */
.flag { font-size: 16px; line-height: 1; }

/* график: контейнер */
.chart { width: 100%; height: 280px; }
.chart.sm { height: 180px; }
.chart.lg { height: 340px; }
.spark { width: 96px; height: 30px; }
/* «Обзор»: большой график с колонкой итогов справа (как Balance overview у ACRU), фильтры, строки структуры. */
.ov-main-grid { display: grid; grid-template-columns: minmax(0, 1fr) 200px; gap: 24px; height: 100%; }
.ov-chart-col { min-width: 0; display: flex; flex-direction: column; }
.ov-chart-col .chart { flex: 1; min-height: 260px; margin-top: 8px; }
.ov-side { display: flex; flex-direction: column; justify-content: space-around; gap: 22px; padding-left: 24px; border-left: 1px solid var(--line); }
.ov-total { font-size: 52px; }
.ov-note { display: flex; align-items: flex-start; gap: 6px; margin-top: 14px; font-size: var(--t-xs); line-height: 1.45; color: var(--ink-3); }
.ov-note .ic { flex: none; margin-top: 1px; }
.ov-filters { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: -6px 4px 18px; min-height: 26px; }
.ov-filters .chip .ic { width: 12px; height: 12px; }
.ov-src { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; }
.ov-main .legend .chip.btnish { height: 24px; }
.ov-d { display: inline-flex; align-items: center; gap: 4px 8px; flex-wrap: wrap; }
.mini-stat .ov-d { align-self: flex-start; }
.ov-bn { width: 100%; }
.ov-fbn { margin: -4px 0 14px; }
.ov-right .card-head { flex-wrap: nowrap; }
.ov-right .card-sub { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ov-right .card-head .chip { flex: none; }
.ov-row[aria-pressed="true"] { background: var(--surface-2); box-shadow: inset 0 0 0 1.5px var(--ink); }
.ov-row { padding-top: 8px; padding-bottom: 8px; }
.ov-c1 { width: 84px; text-align: right; }
.ov-c2 { width: 48px; text-align: right; font-weight: 500; }
.ov-c3 { width: 84px; text-align: right; } /* плашка «-12,1%» шире прежних 76 px и выступала за край столбца (аудит 19.10, п. 12) */
.ov-row .flag { flex: none; min-width: 20px; } /* у направления без флага (USDT) место под флаг остаётся: подписи строк на одной линии */
.ov-att .li-title { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.ov-att .btn { flex: none; }
.ov-team, .ov-fun { display: flex; flex-direction: column; }
.ov-team .card-foot, .ov-fun .card-foot { margin-top: auto; }
.ov-steps { display: grid; gap: 16px; margin-bottom: 16px; }
.ov-step { display: grid; gap: 7px; }
.ov-wrap { white-space: normal !important; min-width: 220px; }
@media (max-width: 1280px) {
  .ov-main, .ov-right { grid-column: span 12; }
  .ov-right { flex-direction: row; }
  .ov-right > .card { flex: 1; min-width: 0; display: flex; flex-direction: column; justify-content: space-between; }
  .ov-req .list { display: grid; grid-template-columns: 1fr 1fr; column-gap: 32px; }
  .ov-main-grid { grid-template-columns: 1fr; }
  .ov-side { flex-direction: row; flex-wrap: wrap; padding: 18px 0 0; border-left: 0; border-top: 1px solid var(--line); justify-content: space-between; }
  .ov-struct { grid-column: span 7; }
  .ov-team { grid-column: span 5; }
  .ov-req { grid-column: span 12; }
}
@media (max-width: 1024px) { .ov-struct, .ov-team { grid-column: span 12; } }
@media (min-width: 1025px) { .ov-struct, .ov-team { align-self: start; } } /* по высоте содержимого, а не самой высокой «Последние сделки» рядом: пустота внутри была 198 и 197 px (аудит 19.10, п. 21); подвал «Команды» встаёт под списком */
@media (max-width: 720px) {
  .ov-right { flex-direction: column; }
  .ov-req .list { display: flex; }
  .ov-total { font-size: 40px; }
  .ov-side .mini-stat { min-width: 40%; }
  .ov-c1 { display: none; }
  .ov-c3 { width: 84px; }
  .ov-filters .ov-src { margin-left: 0; font-size: var(--t-xs); }
  .ov-att .li { flex-wrap: wrap; }
  .ov-att .li-main { flex: 1 1 calc(100% - 52px); }
  .ov-att .li-title { display: block; -webkit-line-clamp: unset; }
  .ov-att .li-sub { white-space: normal; }
  .ov-att .li > .btn { margin-left: 52px; }
}
.ov-stale { color: var(--warn); font-weight: 500; }
.ov-req .card-head { flex-wrap: nowrap; }
.ov-req .card-head > div:first-child { min-width: 0; }
.ov-req .card-head .round-btn { flex: none; }
.ov-req .li-side { min-width: 0; max-width: 42%; text-align: right; }
.ov-req .ov-side-seg { margin: 2px 0 8px; }
/* волна 39 (владелец 24.10): деньги «предварительно» под числом плитки */
.kpi-pre { margin-top: -6px; line-height: 1.35; color: var(--ink-3); }
.card.hero .kpi-pre { color: var(--hero-ink-2); }
/* Окно «Выбрать период» (js/period.js, волна 39): два поля даты, ошибка под ними понятным текстом. */
.pp-row { gap: 12px; align-items: flex-start; flex-wrap: nowrap; }
.pp-row .field { min-width: 0; }
.pp-row .input { min-width: 0; width: 100%; }
.pp-err { margin-top: 12px; color: var(--neg); }
.pp-err[hidden] { display: none; }
.pp-btns { gap: 8px; flex-wrap: wrap; }
/* «Сейчас» (живой): только своё, префикс now-. Как в концепте design/pult-v2: полоса сверху, плитки
   со столбиками, плотные строки ожидания, смена, нагрузка, команда на шкале дня, доска заявок. */

/* на этом экране смена показана героической карточкой: карточку смены внизу меню прячем, чтобы не дублировать */
.app:has(.screen[data-screen="now"]) .side-foot { display: none; }

/* ---------- полоса сверху (Watching у ParryFarry) ---------- */
.now-tools { margin-top: -4px; }
.now-strip {
  display: flex; align-items: center; gap: 14px;
  height: 46px; padding: 0 18px 0 7px; max-width: 100%;
  border-radius: var(--r-pill);
  background: var(--glass); border: 1px solid var(--glass-line);
  -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);
  box-shadow: var(--sh-1);
  font-size: var(--t-sm); color: var(--ink-2); white-space: nowrap;
  overflow-x: auto; scrollbar-width: none;
}
.now-strip::-webkit-scrollbar { display: none; }
.now-strip b { color: var(--ink); font-weight: 600; }
.now-strip-live {
  display: inline-flex; align-items: center; gap: 8px; flex: none;
  height: 32px; padding: 0 13px 0 11px; border-radius: var(--r-pill);
  background: var(--inverse); color: var(--inverse-ink); font-weight: 600;
}
.now-live-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 0 var(--accent-glow); animation: now-live 1.8s var(--ease) infinite; }
:root[data-theme="dark"] .now-live-dot { background: var(--pos); box-shadow: 0 0 0 0 color-mix(in srgb, var(--pos) 50%, transparent); }
@keyframes now-live { 0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent) 70%, transparent); } 60% { box-shadow: 0 0 0 6px transparent; } }
.now-strip-item { display: inline-flex; align-items: center; gap: 7px; flex: none; }
.now-strip-item .ic { color: var(--ink-3); }
.now-strip-sep { width: 1px; height: 18px; background: var(--line-2); flex: none; }
.now-strip-mk { display: inline-flex; align-items: center; gap: 4px; margin-left: 6px; padding: 3px 8px 3px 6px; border-radius: var(--r-pill); background: var(--surface-2); }
.now-strip-mk .flag { font-size: 13px; }
.now-next .ring .ring-track { stroke: var(--line-2); }
.now-next .ring .ring-fill { stroke: var(--ink); transition: stroke-dashoffset 1s linear; }
.now-flash [data-now-upd] { animation: now-flash 1.2s var(--ease); }
@keyframes now-flash { 0% { background: var(--accent); color: var(--accent-ink); border-radius: 6px; } 100% { background: transparent; } }

/* переключатели в шапке экрана */
.now-tg {
  display: inline-flex; align-items: center; gap: 10px;
  height: 42px; padding: 0 16px 0 9px; border-radius: var(--r-pill);
  background: var(--surface); border: 1px solid var(--line-2);
  font-weight: 500; white-space: nowrap;
  transition: border-color var(--dur-1), background var(--dur-1);
}
.now-tg:hover { border-color: var(--ink-3); }

/* ---------- плитки: одна высота строки чисел, однострочный подвал ---------- */
.now-kpi { gap: 12px; }
.now-kpi .kpi-top { min-height: 38px; align-items: center; }
.now-kpi .kpi-label { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.now-kpi-acts { display: flex; align-items: center; gap: 8px; flex: none; }
.now-kpi-row { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; min-width: 0; height: 52px; }
.now-kpi-row > :not(.kpi-value) { flex: none; margin-bottom: 7px; }
.now-kpi-foot { flex-wrap: nowrap; min-width: 0; white-space: nowrap; }
.now-kpi-foot .chip { flex: none; }
.now-kpi-foot b { font-weight: 600; }
.now-qbars { display: flex; align-items: flex-end; gap: 5px; height: 42px; }
.now-qbars i { width: 9px; min-height: 8px; border-radius: var(--r-pill); background: var(--ink); }
.now-qbars i[data-sev="warn"] { background: var(--warn); }
.now-qbars i[data-sev="neg"] { background: var(--neg); }
.now-stbars i { width: 11px; }
.now-stbars i[data-lane="ink"] { background: var(--c-1); }
.now-stbars i[data-lane="violet"] { background: var(--c-5); }
.now-stbars i[data-lane="warn"] { background: var(--c-4); }
.now-stbars i[data-lane="info"] { background: var(--c-6); }
.now-stbars i[data-lane="accent"] { background: var(--accent); }
/* стопка команды: на смене зелёное кольцо, AFK жёлтое, не на смене бледные */
.now-stack { padding: 4px 4px 0 0; }
.now-stack > .now-st-ava { margin-left: -7px; border-radius: 50%; background: var(--surface); box-shadow: 0 0 0 2px var(--surface), 0 0 0 4px var(--pos); }
.now-stack > .now-st-ava:first-child { margin-left: 0; }
.now-stack > .now-st-ava.afk { box-shadow: 0 0 0 2px var(--surface), 0 0 0 4px var(--warn); }
.now-stack > .now-st-ava.off { box-shadow: 0 0 0 2px var(--surface); }
.now-st-ava { display: inline-flex; }
.now-st-ava .ava { width: 30px; height: 30px; font-size: 11px; }
.now-st-ava.off .ava { opacity: .42; filter: grayscale(1); }
.now-gauge { width: 86px; height: 48px; overflow: visible; }
.now-gauge-hl { stroke: var(--hatch-c); }
.now-gauge-fill { stroke: var(--c-1); }
.now-gauge-tr { opacity: .9; }
.now-gauge-dot { fill: var(--accent); stroke: var(--surface); }
.now-long[data-long-sev="warn"] { background: var(--warn-soft); color: var(--warn); }
.now-long[data-long-sev="neg"] { background: var(--neg-soft); color: var(--neg); }

/* тревожная плитка: кто-то ждёт дольше 15 минут */
.card.now-alarm {
  background-color: var(--neg-soft);
  border-color: color-mix(in srgb, var(--neg) 24%, transparent);
  box-shadow: 0 22px 44px -26px color-mix(in srgb, var(--neg) 70%, transparent);
  overflow: hidden;
}
.card.now-alarm::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background-image:
    repeating-radial-gradient(circle at 104% 118%, transparent 0 14px, color-mix(in srgb, var(--neg) 12%, transparent) 14px 15px);
  -webkit-mask-image: radial-gradient(circle at 100% 100%, var(--ink) 10%, transparent 72%);
  mask-image: radial-gradient(circle at 100% 100%, var(--ink) 10%, transparent 72%);
}
.card.now-alarm > * { position: relative; z-index: 1; }
.now-alarm .kpi-value .num { color: var(--neg); }
.now-alarm .kpi-foot { color: var(--ink-2); }
.now-alarm .now-long[data-long-sev] { background: var(--surface); color: var(--neg); }
.now-red { height: 30px; padding: 0 11px 0 9px; background: var(--neg); color: var(--surface); animation: now-siren 1.6s var(--ease) infinite; }
.now-red b { font-weight: 700; }
.now-alarm .now-kpi-acts .round-btn { display: none; }
.now-red .ic { width: 12px; height: 12px; }
@keyframes now-siren { 0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--neg) 55%, transparent); } 60% { box-shadow: 0 0 0 7px transparent; } }

/* ---------- «Ждут нашего ответа» ---------- */
.now-wait-card { display: flex; flex-direction: column; scroll-margin-top: 96px; container: now-wait / inline-size; }
.now-wait-card .card-head { margin-bottom: 12px; }
.now-wait-card .card-title .badge { transform: translateY(-1px); }
.seg button b { font-weight: 600; color: var(--ink-3); margin-left: 2px; font-variant-numeric: tabular-nums; }
.seg button[aria-pressed="true"] b { color: inherit; }
.now-wlegend { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 16px; margin: 0 2px 12px; font-size: var(--t-xs); color: var(--ink-3); }
.now-wlegend span { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.now-wlegend .ring .ring-fill { stroke: var(--pos); }
.now-wlegend .ring .ring-track { stroke: var(--surface-3); }
.now-lg { width: 14px; height: 4px; border-radius: var(--r-pill); background: var(--ink); flex: none; }
.now-lg.warn { background: var(--warn); }
.now-lg.neg { background: var(--neg); }

/* шапка и строки на одной сетке: ширины колонок совпадают всегда */
.now-thead, .now-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 128px 116px 114px;
  align-items: center; gap: 12px;
}
.now-thead {
  height: 38px; padding: 0 12px 0 16px; border-radius: 12px;
  background: var(--surface-2); color: var(--ink-3);
  font-size: var(--t-sm); font-weight: 500;
}
.now-thead button { display: inline-flex; align-items: center; gap: 6px; color: inherit; font-weight: 500; justify-self: start; }
.now-thead button:hover, .now-thead button[aria-sort] { color: var(--ink); }
.now-thead .ic { width: 13px; height: 13px; opacity: .75; }
.now-th-r { text-align: right; }
.now-rows { display: flex; flex-direction: column; margin-top: 4px; }
.now-rows[data-filter="first"] .now-row:not([data-first="1"]),
.now-rows[data-filter="free"] .now-row:not([data-free="1"]),
.now-rows[data-filter="late"] .now-row:not([data-late="1"]) { display: none; }
.now-rows-empty .empty { padding: 28px 10px; }

.now-row {
  position: relative; min-height: 76px;
  padding: 11px 12px 11px 16px;
  border-radius: 16px; cursor: pointer;
  transition: background var(--dur-1);
}
.now-row + .now-row::after { content: ""; position: absolute; left: 16px; right: 12px; top: 0; height: 1px; background: var(--line); }
.now-row:hover { background: var(--surface-2); }
.now-row:hover::after, .now-row:hover + .now-row::after { opacity: 0; }
.now-row::before { content: ""; position: absolute; left: 4px; top: 16px; bottom: 16px; width: 3px; border-radius: 3px; background: transparent; transition: background var(--dur-2); }
.now-row[data-sev="warn"]::before { background: var(--warn); }
.now-row[data-sev="neg"]::before { background: var(--neg); }
.now-row[data-sev="neg"] { background: linear-gradient(90deg, color-mix(in srgb, var(--neg) 7%, transparent), transparent 60%); }

.now-who { display: flex; align-items: center; gap: 12px; min-width: 0; }
.now-ava { position: relative; flex: none; }
.now-ava .ava { width: 42px; height: 42px; font-size: 14px; }
.now-mk {
  position: absolute; right: -5px; bottom: -3px;
  width: 20px; height: 20px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--surface); box-shadow: 0 0 0 1.5px var(--surface), var(--sh-1);
}
.now-mk .flag { font-size: 12px; }
.now-who-main { flex: 1; min-width: 0; }
.now-nick-line { display: flex; flex-wrap: wrap; align-items: center; gap: 3px 6px; min-width: 0; }
.now-nick { font-weight: 600; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; max-width: 100%; flex: 0 1 auto; }
.now-nick:hover { text-decoration: underline dashed var(--ink-4); text-underline-offset: 3px; }
.now-new { flex: none; height: 20px; padding: 0 7px; }
.now-quick { display: inline-flex; align-items: center; flex: none; opacity: .5; transition: opacity var(--dur-1); }
.now-row:hover .now-quick, .now-quick:focus-within { opacity: 1; }
.now-quick .copy { width: 24px; height: 24px; }
/* цитата клиента: две строки, ради неё и смотрят список */
.now-msg {
  margin-top: 3px; font-size: var(--t-sm); line-height: 1.35; color: var(--ink-2);
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2;
  overflow: hidden; overflow-wrap: anywhere;
}

.now-owner { min-width: 0; }
.now-owner-in { display: flex; align-items: center; gap: 9px; min-width: 0; }
.now-owner-txt { min-width: 0; }
.now-owner-name { font-size: var(--t-sm); font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.now-owner-st { font-size: var(--t-xs); color: var(--ink-3); margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.now-owner-st.warn { color: var(--warn); }
.now-owner-st.neg { color: var(--neg); }
.now-owner-st.pos { color: var(--pos); }
.now-free {
  display: inline-flex; align-items: center; gap: 6px;
  height: 28px; padding: 0 11px 0 8px; border-radius: var(--r-pill);
  border: 1.5px dashed var(--line-2); color: var(--ink-2);
  font-size: var(--t-sm); font-weight: 500; white-space: nowrap;
}
.now-free .ic { width: 14px; height: 14px; color: var(--ink-3); }
.now-free.sm { height: 22px; padding: 0 8px 0 6px; font-size: var(--t-xs); gap: 4px; }
.now-free.sm .ic { width: 12px; height: 12px; }

/* таймер + полоска к 15 минутам (засечка на 5) + кольцо 3:00 у нового обращения */
.now-wait { display: flex; align-items: center; gap: 8px; min-width: 0; }
.now-tm { min-width: 0; }
.now-timer { font: 500 21px/1 var(--f-display); letter-spacing: -.03em; font-variant-numeric: tabular-nums; white-space: nowrap; }
.now-row[data-sev="warn"] .now-timer { color: var(--warn); }
.now-row[data-sev="neg"] .now-timer { color: var(--neg); }
.now-prog { position: relative; width: 60px; height: 4px; margin-top: 8px; border-radius: var(--r-pill); background: var(--surface-3); overflow: hidden; }
.now-prog i { position: absolute; inset: 0 auto 0 0; border-radius: inherit; background: var(--ink); transition: width 1s linear, background var(--dur-2); }
.now-prog::after { content: ""; position: absolute; z-index: 1; left: 33.33%; top: 0; bottom: 0; width: 2px; background: var(--surface); }
.now-row[data-sev="warn"] .now-prog i { background: var(--warn); }
.now-row[data-sev="neg"] .now-prog i { background: var(--neg); }
.now-ring .ring-track { stroke: var(--surface-3); }
.now-ring .ring-fill { stroke: var(--pos); transition: stroke-dashoffset 1s linear, stroke var(--dur-2); }
.now-ring[data-state="soon"] .ring-fill { stroke: var(--warn); }
.now-ring[data-state="over"] .ring-track { stroke: var(--neg-soft); }
.now-ring[data-state="over"] .ring-fill { stroke: var(--neg); }
.now-ring .ring-label { font: 600 10px/1 var(--f-ui); letter-spacing: -.02em; color: var(--ink-2); }
.now-ring[data-state="over"] .ring-label { color: var(--neg); font-size: 14px; }

.now-acts { display: flex; justify-content: flex-end; align-items: center; gap: 6px; min-width: 0; }
.btn.sm.now-open { width: 34px; padding: 0; flex: none; }
.now-open-l { display: none; }

/* слот под списком: забирает свободную высоту, когда строк мало; сам по себе высоту карточке не добавляет */
.now-slot { flex: 1 1 0; min-height: 0; container: now-slot / size; }
.now-slot-in {
  height: calc(100% - 12px); margin-top: 12px;
  display: flex; flex-direction: column; justify-content: center; gap: 22px;
  padding: 18px 26px; border-radius: 18px; border: 1.5px dashed var(--line-2);
  color: var(--ink-3);
}
.now-slot-head { display: flex; align-items: center; justify-content: center; gap: 14px; }
.now-slot-t { font-weight: 500; color: var(--ink-2); }
.now-slot-s { font-size: var(--t-sm); margin-top: 2px; }
/* шкала регламента: 0-20 минут, засечки 3, 5, 15 */
.now-scale { width: 100%; max-width: 560px; margin: 0 auto; }
.now-scale-bar { position: relative; display: flex; gap: 3px; height: 8px; }
.now-scale-bar i { border-radius: var(--r-pill); }
.now-scale-bar i.ok { flex: 5; background: var(--ink); }
.now-scale-bar i.warn { flex: 10; background: var(--warn); }
.now-scale-bar i.neg { flex: 5; background: var(--neg); }
.now-scale-bar b { position: absolute; top: -4px; width: 3px; height: 16px; margin-left: -1.5px; border-radius: 2px; background: var(--pos); box-shadow: 0 0 0 2px var(--surface); }
.now-scale-lbl { position: relative; height: 34px; margin-top: 10px; font-size: var(--t-xs); color: var(--ink-3); }
.now-scale-lbl span { position: absolute; top: 0; display: flex; flex-direction: column; gap: 2px; white-space: nowrap; }
.now-scale-lbl span.r { transform: translateX(calc(-100% + 2px)); text-align: right; }
.now-scale-lbl span.c { transform: translateX(-50%); text-align: center; }
.now-scale-lbl b { font-weight: 600; color: var(--ink-2); }
@container now-slot (max-height: 190px) { .now-scale { display: none; } }
@container now-slot (max-width: 460px) { .now-scale { display: none; } }
@container now-slot (max-height: 110px) { .now-slot-in { display: none; } }

.now-more { display: flex; align-items: center; gap: 12px; margin-top: 12px; padding: 12px 14px; border-radius: 18px; background: var(--surface-2); border: 1px dashed var(--line-2); }
.now-more .ava-stack .ava { width: 28px; height: 28px; font-size: 10.5px; }
.now-wait-card > .empty { flex: 1; }

/* строки ожидания: раскладка по ширине карточки, а не окна */
@container now-wait (min-width: 820px) {
  .now-thead, .now-row { grid-template-columns: minmax(0, 1fr) 150px 124px 190px; gap: 14px; }
  .btn.sm.now-open { width: auto; padding: 0 13px; }
  .now-open-l { display: inline; }
}
@container now-wait (max-width: 600px) {
  .now-thead { display: none; }
  .now-row {
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas: "who wait" "owner acts";
    gap: 12px 10px; padding: 14px 6px 14px 12px;
  }
  .now-row::before { left: 2px; top: 14px; bottom: auto; height: 42px; }
  .now-row + .now-row::after { left: 12px; right: 6px; }
  .now-who { grid-area: who; align-self: start; }
  .now-wait { grid-area: wait; justify-self: end; align-self: start; flex-direction: row-reverse; }
  .now-tm { text-align: right; }
  .now-tm .now-prog { margin-left: auto; }
  .now-owner { grid-area: owner; }
  .now-acts { grid-area: acts; }
  .now-quick { display: none; }
  .now-ava .ava { width: 38px; height: 38px; }
  .now-timer { font-size: 19px; }
  .now-wlegend-ring { display: none !important; }
}

/* ---------- справа: моя смена (Time Tracker Donezo) и нагрузка ---------- */
.now-side { min-width: 0; }
.now-shift { display: flex; flex-direction: column; }
.now-shift .card-head { margin-bottom: 6px; }
.now-shift-chip .sdot { width: 8px; height: 8px; }
.now-shift-time { font: 500 60px/1 var(--f-display); letter-spacing: -.05em; font-variant-numeric: tabular-nums; white-space: nowrap; margin-top: 6px; }
.now-shift-state { display: flex; align-items: center; gap: 7px; margin-top: 10px; font-size: var(--t-sm); color: var(--hero-ink-2); flex-wrap: wrap; }
.now-hours { display: flex; gap: 5px; height: 52px; margin-top: 18px; }
.now-hours i {
  position: relative; flex: 1; overflow: hidden;
  border-radius: var(--r-pill);
  background: color-mix(in srgb, var(--hero-ink) 13%, transparent);
}
.now-hours i::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0;
  height: calc(var(--f, 0) * 100%);
  background: var(--hero-accent); border-radius: inherit;
}
.now-hours i.off { background: transparent; box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--hero-ink) 22%, transparent); background-image: repeating-linear-gradient(-45deg, var(--hero-line) 0 1.6px, transparent 1.6px 6px); }
.now-hours i.off::after { display: none; }
.now-hours i.cur { box-shadow: inset 0 0 0 1.5px var(--hero-accent); }
.now-hours i.cur::after { animation: breathe 2.4s var(--ease) infinite; border-radius: 3px 3px 999px 999px; }
.now-hours-lbl { position: relative; display: flex; justify-content: space-between; height: 15px; margin-top: 8px; font-size: var(--t-xs); color: var(--hero-ink-2); font-variant-numeric: tabular-nums; }
.now-hours-lbl .ghost { visibility: hidden; }
.now-hours-cur { position: absolute; top: 0; transform: translateX(-50%); color: var(--hero-ink); font-weight: 600; white-space: nowrap; }
.now-shift-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--hero-line); }
.now-shift-stats > div { display: flex; flex-direction: column; gap: 4px; min-width: 0; padding: 0 10px; }
.now-shift-stats > div:first-child { padding-left: 0; }
.now-shift-stats > div + div { border-left: 1px solid var(--hero-line); }
.now-shift-stats b { font: 500 22px/1 var(--f-display); letter-spacing: -.03em; color: var(--hero-ink); }
.now-shift-stats > div > span { font-size: var(--t-xs); color: var(--hero-ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.now-shift-btns { display: flex; gap: 10px; margin-top: auto; padding-top: 18px; }
.now-shift-btns .btn { height: 48px; font-size: 15px; }
.now-shift-round {
  width: 48px; height: 48px; flex: none; border-radius: 50%;
  display: grid; place-items: center;
  background: color-mix(in srgb, var(--hero-ink) 12%, transparent); color: var(--hero-ink);
  border: 1px solid color-mix(in srgb, var(--hero-ink) 18%, transparent);
  transition: background var(--dur-1), transform var(--dur-1);
}
.now-shift-round:hover { background: color-mix(in srgb, var(--hero-ink) 20%, transparent); }
.now-shift-round:active { transform: scale(.94); }

.now-load-card { flex: none; display: flex; flex-direction: column; } /* по содержимому: раньше тянулась до высоты соседа и между списком и цифрами внизу было до 185 px пустоты (аудит 19.10, п. 13) */
.now-load-card .card-head { margin-bottom: 8px; }
.now-load-sum { display: flex; flex-direction: column; align-items: flex-end; gap: 3px; white-space: nowrap; }
.now-load-sum b { font: 500 26px/1 var(--f-display); letter-spacing: -.03em; }
.now-load-sum span { font-size: var(--t-xs); color: var(--ink-3); }

/* ---------- команда на шкале дня ---------- */
.now-team { scroll-margin-top: 96px; }
.now-team .card-head { margin-bottom: 8px; }
.now-gt-lg { gap: 14px; font-size: var(--t-xs); }
.now-sw-afk { background-color: var(--warn-soft); background-image: repeating-linear-gradient(-45deg, var(--warn) 0 1.4px, transparent 1.4px 4px); box-shadow: inset 0 0 0 1px var(--warn); }
.now-sw-now { width: 0; height: 14px; border-left: 1.5px dashed var(--ink); }
.now-gt-wrap { overflow-x: auto; overscroll-behavior-x: contain; }
.now-gt { --who: 230px; --side: 170px; min-width: 760px; }
.now-gt-axis, .now-gt-row { display: grid; grid-template-columns: var(--who) minmax(0, 1fr) var(--side); gap: 18px; align-items: center; }
.now-gt-axis { height: 30px; }
.now-gt-ticks { position: relative; height: 100%; font-size: var(--t-xs); color: var(--ink-3); font-variant-numeric: tabular-nums; }
.now-gt-ticks span { position: absolute; top: 50%; transform: translate(-50%, -50%); white-space: nowrap; transition: opacity var(--dur-2); }
.now-gt-ticks span.s { transform: translate(0, -50%); }
.now-gt-ticks span.e { transform: translate(-100%, -50%); }
.now-gt-ticks span.dim { opacity: 0; }
.now-gt-nowlbl {
  position: absolute; top: 50%; z-index: 2; transform: translate(-50%, -50%);
  display: inline-flex; align-items: center; gap: 5px; height: 22px; padding: 0 8px 0 7px; border-radius: var(--r-pill);
  background: var(--inverse); color: var(--inverse-ink); font: 600 11px/1 var(--f-ui); font-variant-numeric: tabular-nums; white-space: nowrap;
}
.now-gt-nowlbl::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); }
.now-gt-row { min-height: 60px; border-top: 1px solid var(--line); }
.now-gt-who { display: flex; align-items: center; gap: 12px; min-width: 0; }
.now-gt-ava { position: relative; flex: none; }
.now-gt-n {
  position: absolute; top: -5px; right: -7px; z-index: 1;
  min-width: 18px; height: 18px; padding: 0 5px; border-radius: var(--r-pill);
  display: grid; place-items: center;
  background: var(--neg); color: var(--surface); font: 700 10px/1 var(--f-ui); font-variant-numeric: tabular-nums;
  box-shadow: 0 0 0 2px var(--surface);
}
.now-gt-row.off .now-gt-who .ava { opacity: .55; }
.now-gt-row.off .li-title { color: var(--ink-2); }
.now-gt-track {
  position: relative; align-self: stretch; min-height: 60px;
  background: linear-gradient(90deg, var(--line) 1px, transparent 1px) 0 0 / 12.5% 100% repeat-x;
  box-shadow: inset -1px 0 var(--line);
}
.now-gt-bar {
  position: absolute; top: 50%; height: 30px; transform: translateY(-50%);
  border-radius: 10px; overflow: hidden;
  background-color: var(--surface);
  background-image: repeating-linear-gradient(-45deg, var(--hatch-c) 0 1.6px, transparent 1.6px 7px);
  box-shadow: inset 0 0 0 1px var(--line-2);
}
.now-gt-done { position: absolute; inset: 0 auto 0 0; overflow: hidden; background: var(--c-1); }
.now-gt-bar.live .now-gt-done { border-radius: 0 6px 6px 0; }
.now-gt-bar.live::after {
  content: ""; position: absolute; z-index: 2; top: 50%; width: 8px; height: 8px; margin: -4px 0 0 -10px;
  left: var(--done, 0); border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 2px var(--c-1), 0 0 0 4px var(--surface);
}
.now-gt-afk { position: absolute; z-index: 1; top: 0; bottom: 0; border-radius: 6px; background-color: var(--warn-soft); background-image: repeating-linear-gradient(-45deg, var(--warn) 0 1.6px, transparent 1.6px 6px); box-shadow: inset 0 0 0 1.5px var(--warn); }
.now-gt-lbl { position: absolute; left: 0; top: 0; bottom: 0; display: flex; align-items: center; padding: 0 10px; font: 600 11px/1 var(--f-ui); font-variant-numeric: tabular-nums; white-space: nowrap; color: var(--ink-2); }
.now-gt-done .now-gt-lbl { color: var(--inverse-ink); }
.now-gt-lbl.end { left: auto; right: 0; }
.now-gt-now { position: absolute; z-index: 3; top: -1px; bottom: 0; width: 0; border-left: 1.5px dashed var(--ink); transform: translateX(-.75px); pointer-events: none; }
.now-gt-side { display: flex; justify-content: flex-end; min-width: 0; }
.now-afk { font-variant-numeric: tabular-nums; }
.now-afk.neg { background: var(--neg-soft); color: var(--neg); }

/* ---------- канбан заявок ---------- */
.now-board-card { scroll-margin-top: 96px; }
.now-board {
  display: grid; grid-template-columns: repeat(var(--lanes, 4), minmax(188px, 1fr)); gap: 12px; align-items: start;
  overflow-x: auto; padding-bottom: 2px;
  scroll-snap-type: x proximity; overscroll-behavior-x: contain;
}
.now-lane {
  --lane: var(--c-1); --lane-ink: var(--ink);
  display: flex; flex-direction: column; min-width: 0;
  padding: 11px; border-radius: 22px;
  background: var(--surface-2); border: 1px solid var(--glass-line);
  scroll-snap-align: start;
}
.now-lane[data-lane="violet"] { --lane: var(--c-5); --lane-ink: var(--violet); }
.now-lane[data-lane="warn"] { --lane: var(--c-4); --lane-ink: var(--warn); }
.now-lane[data-lane="info"] { --lane: var(--c-6); --lane-ink: var(--info); }
.now-lane[data-lane="accent"] { --lane: var(--accent); --lane-ink: var(--accent-text); }
.now-lane-head { display: flex; align-items: center; gap: 8px; min-width: 0; height: 34px; padding: 2px 2px 0; }
.now-lane-ic { width: 28px; height: 28px; flex: none; border-radius: 9px; display: grid; place-items: center; background: color-mix(in srgb, var(--lane) 20%, transparent); color: var(--lane-ink); }
.now-lane[data-lane="ink"] .now-lane-ic { background: var(--inverse); color: var(--accent); }
:root[data-theme="dark"] .now-lane[data-lane="ink"] .now-lane-ic { color: var(--inverse-ink); }
.now-lane-name { flex: 1; min-width: 0; font-weight: 600; font-size: 13px; line-height: 1.15; letter-spacing: -.01em; overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; }
.now-lane-n { min-width: 22px; height: 22px; padding: 0 6px; border-radius: var(--r-pill); display: inline-grid; place-items: center; background: var(--surface); color: var(--ink); font-size: var(--t-xs); font-weight: 600; box-shadow: var(--sh-1); }
.now-lane-meta { display: flex; justify-content: space-between; gap: 8px; margin: 10px 2px 6px; font-size: var(--t-xs); color: var(--ink-2); }
.now-lane-line { height: 4px; border-radius: var(--r-pill); background: var(--surface-3); margin: 0 2px 12px; overflow: hidden; }
.now-lane-line i { display: block; height: 100%; border-radius: inherit; background: var(--lane); }
.now-lane-list { display: flex; flex-direction: column; gap: 8px; }
.now-lane-empty {
  display: flex; align-items: center; justify-content: center; gap: 6px;
  height: 64px; border-radius: 16px; border: 1.5px dashed var(--line-2);
  color: var(--ink-3); font-size: var(--t-sm);
}
.now-lane[data-cut]:not([data-open]) .now-lead.more { display: none; }
/* при фильтре колонки раскрыты: совпадение не должно прятаться под «Ещё» */
.now-board:not([data-filter="all"]) .now-lane[data-cut] .now-lead.more { display: flex; }
.now-board:not([data-filter="all"]) .now-lane-more { display: none; }
.now-lane-more {
  display: flex; align-items: center; justify-content: center; gap: 6px; width: 100%;
  height: 34px; margin-top: 8px; border-radius: 12px; border: 1.5px dashed var(--line-2);
  color: var(--ink-2); font-size: var(--t-sm); font-weight: 500;
}
.now-lane-more:hover { border-color: var(--ink-3); color: var(--ink); }
.now-lane-more .ic { width: 14px; height: 14px; }

.now-lead {
  display: flex; flex-direction: column; gap: 8px;
  padding: 11px 12px; border-radius: 16px;
  background: var(--surface); border: 1px solid var(--glass-line);
  box-shadow: var(--sh-1); cursor: pointer;
  transition: transform var(--dur-2) var(--ease), box-shadow var(--dur-2) var(--ease), opacity var(--dur-2), filter var(--dur-2);
}
.now-lead:hover { transform: translateY(-2px); box-shadow: var(--sh-2); }
.now-lead:focus-visible { box-shadow: var(--focus); border-radius: 16px; }
/* замолчал после расчёта: штрихованная рамка */
.now-lead.silent {
  border: 2px solid transparent;
  background:
    linear-gradient(var(--surface), var(--surface)) padding-box,
    repeating-linear-gradient(-45deg, var(--warn) 0 3px, transparent 3px 7px) border-box;
  padding: 10px 11px;
}
.now-lead-top { display: flex; align-items: center; gap: 8px; min-width: 0; }
.now-lead-top .ava { width: 24px; height: 24px; font-size: 9.5px; }
/* метки клиента под именем (владелец 10.10: в строке имени длинная метка выдавливала имя и «⋯» в соседнюю колонку): переносятся, длинная обрезается многоточием */
.now-tags { display: flex; flex-wrap: wrap; gap: 4px; min-width: 0; }
.now-tags .chip { flex: 0 1 auto; min-width: 0; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.now-sil-main .now-tags { margin-top: 3px; }
.now-lead-nick { flex: 1; min-width: 0; font-weight: 600; font-size: var(--t-sm); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.now-lead-top .flag { font-size: 14px; }
.now-lead-mid { display: flex; align-items: baseline; justify-content: space-between; flex-wrap: wrap; gap: 4px 8px; }
.now-lead-sum { font: 500 19px/1 var(--f-display); letter-spacing: -.035em; white-space: nowrap; }
.now-lead-sum .unit { font-size: 9.5px; margin-left: .3em; vertical-align: .25em; }
.now-lead-dir { display: inline-flex; align-items: center; gap: 2px; font-size: 10.5px; font-weight: 600; letter-spacing: .01em; color: var(--ink-2); white-space: nowrap; }
.now-lead-dir .ic { width: 10px; height: 10px; color: var(--ink-3); }
.now-silent { display: inline-flex; align-self: flex-start; align-items: center; gap: 5px; height: 22px; padding: 0 8px 0 7px; border-radius: var(--r-pill); background: var(--warn-soft); color: var(--warn); font-size: var(--t-xs); font-weight: 600; white-space: nowrap; }
.now-silent .ic { width: 12px; height: 12px; }
.now-lead-foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: var(--t-xs); color: var(--ink-3); min-width: 0; }
.now-lead-mgr { display: inline-flex; align-items: center; gap: 6px; min-width: 0; color: var(--ink-2); font-weight: 500; }
.now-lead-mgr .ava { width: 18px; height: 18px; font-size: 7.5px; }
.now-age { display: inline-flex; align-items: center; gap: 4px; flex: none; font-variant-numeric: tabular-nums; }
.now-age .ic { width: 12px; height: 12px; }
.now-age.warn { color: var(--warn); }
.now-board[data-filter="free"] .now-lead:not([data-free="1"]),
.now-board[data-filter="silent"] .now-lead:not([data-silent="1"]) { opacity: .26; filter: saturate(.2); }

/* ---------- живая версия: что добавлено к концепту ---------- */
.now-strip-live[data-off="1"] { background: var(--neg); color: var(--surface); }
.now-strip-live[data-off="1"] .now-live-dot { background: var(--surface); animation: none; }
.now-svc {
  flex: none; display: inline-grid; place-items: center; min-width: 18px; height: 18px; padding: 0 4px;
  border-radius: 6px; background: var(--surface-3); color: var(--ink-2); font: 700 10px/1 var(--f-ui); letter-spacing: .02em;
}
.now-svc.svc-A { background: var(--accent-soft); color: var(--accent-text); }
.now-msg i { color: var(--ink-3); }
.now-gt-na { position: absolute; inset: 0; display: flex; align-items: center; padding-left: 12px; font-size: var(--t-xs); color: var(--ink-3); }
.now-lead-top .now-svc { height: 16px; min-width: 16px; font-size: 9px; }
.now-lead-chips { display: flex; flex-wrap: wrap; gap: 4px; }
.now-silent.neg { background: var(--neg-soft); color: var(--neg); }
.now-lead-no { font-size: var(--t-xs); font-weight: 500; color: var(--ink-3); }
.now-lead-st { display: flex; align-items: center; gap: 6px; font-size: var(--t-xs); font-weight: 600; color: var(--ink-2); }
.now-lead-st i { width: 7px; height: 7px; flex: none; border-radius: 50%; background: var(--ink-4); }
.now-lead-st[data-st="ok"] i, .now-lead-st[data-st="ack"] i { background: var(--pos); }
.now-lead-st[data-st="warn"] i { background: var(--warn); }
.now-lead-st[data-st="neg"] i { background: var(--neg); }
.now-lead-st[data-st="client"] i { background: var(--info); }
.now-lead-st[data-st="warn"] { color: var(--warn); }
.now-lead-st[data-st="neg"] { color: var(--neg); }
.now-lead-last { font-size: var(--t-xs); line-height: 1.3; color: var(--ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: -2px; }

/* нагрузка по менеджерам */
.now-ld { display: flex; flex-direction: column; gap: 13px; margin-top: 4px; }
.now-ld-row { display: flex; align-items: center; gap: 10px; min-width: 0; }
.now-ld-none { width: 28px; height: 28px; border-radius: 50%; }
.now-ld-main { flex: 1; min-width: 0; }
.now-ld-top { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.now-ld-name { font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.now-ld-n { font-size: var(--t-xs); color: var(--ink-3); white-space: nowrap; }
.now-ld-n b { color: var(--ink); font-weight: 600; }
.now-ld-bar { height: 6px; margin-top: 6px; border-radius: var(--r-pill); background: var(--surface-3); overflow: hidden; }
.now-ld-bar > i { display: block; height: 100%; border-radius: inherit; background: var(--c-1); overflow: hidden; }
.now-ld-bar > i > b { display: block; height: 100%; background: var(--accent); }
.now-ld-bar > i > b[data-sev="warn"] { background: var(--warn); }
.now-ld-bar > i > b[data-sev="neg"] { background: var(--neg); }
.now-ld-row > .chip { flex: none; min-width: 96px; justify-content: center; } /* плашки одной ширины: полоски нагрузки кончаются на одной длине */
.now-ld-foot { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: auto; padding-top: 14px; border-top: 1px solid var(--line); }
.now-ld-foot > div { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.now-ld-foot b { font: 500 22px/1 var(--f-display); letter-spacing: -.03em; }
.now-ld-foot span { font-size: var(--t-xs); color: var(--ink-3); }
.now-load-card .now-ld { margin-bottom: 16px; }

/* замолчавшие после расчёта */
.now-sil-list { display: flex; flex-direction: column; margin-top: 4px; }
.now-sil-row { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 14px; cursor: pointer; transition: background var(--dur-1); }
.now-sil-row + .now-sil-row::after { content: ""; position: absolute; left: 12px; right: 12px; top: 0; height: 1px; background: var(--line); }
.now-sil-row:hover { background: var(--surface-2); }
.now-sil-top { display: flex; align-items: center; gap: 6px; min-width: 0; font-size: var(--t-sm); }
.now-sil-top b { flex: none; max-width: 46%; font-weight: 600; }
.now-sil-top .faint { min-width: 0; }
.now-sil-last { margin-top: 3px; font-size: var(--t-sm); color: var(--ink-2); }
.now-sil-side { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; min-width: 0; max-width: 140px; }

/* Telegram Premium */
.now-prem-list { display: flex; flex-direction: column; gap: 14px; margin-top: 6px; }
.now-prem-row { display: flex; align-items: center; gap: 10px; min-width: 0; }
.now-prem-t { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 5px; }
.now-prem-n { max-width: 100%; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.now-prem-in { width: 148px; flex: none; height: 38px; }
@media (max-width: 720px) {
  .now-sil-row { padding: 10px 4px; }
  .now-sil-side { max-width: 96px; }
  .now-prem-in { width: 136px; }
}

/* ---------- адаптив ---------- */
@media (max-width: 1380px) {
  .app:not([data-collapsed="true"]) .now-strip-reg { display: none; }
}
@media (max-width: 1100px) {
  .now-strip-reg { display: none; }
}
/* до 1280: список на всю ширину, смена и нагрузка ниже рядом */
@media (max-width: 1280px) {
  .now-gt { --who: 196px; --side: 150px; }
  .now-mid > .now-wait-card { grid-column: span 12; }
  .now-side { grid-column: span 12; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 860px) {
  .now-side { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 720px) {
  .now-tools { margin-top: 0; }
  /* полоса «Онлайн» на телефоне переносится на несколько строк (mobile.css: flex-wrap): высота по содержимому, без маски под одну прокручиваемую строку (аудит 19.10, п. 1) */
  .now-strip { width: 100%; height: auto; min-height: 46px; padding: 6px 16px 6px 7px; border-radius: 23px; overflow: visible; -webkit-mask-image: none; mask-image: none; }
  .now-strip-sep { display: none; }
  .now-strip-item { flex: 0 1 auto; flex-wrap: wrap; max-width: 100%; row-gap: 4px; } /* группа «Ждут по рынкам» на 320 px переносит плашки внутри полосы, а не торчит за её край */
  .now-strip-mk { margin-left: 0; } /* после переноса плашка «без рынка» стоит под подписью «Ждут по рынкам», а не на 6 px правее (отступ даёт gap группы) */
  .page-actions .now-tg { height: 38px; padding: 0 13px 0 7px; }

  .now-kpis > .span-3 { grid-column: span 6; }
  .now-kpis .card { padding: 16px; }
  .now-kpi { gap: 10px; }
  .now-kpi .kpi-top { height: 34px; min-height: 0; align-items: flex-start; }
  .now-kpi .kpi-label { font-size: 13px; line-height: 1.3; white-space: normal; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; }
  .now-kpi .round-btn { width: 30px; height: 30px; }
  .now-kpi .round-btn .ic { width: 14px; height: 14px; }
  .now-red { display: none; }
  .now-kpi-row { flex-direction: column; align-items: flex-start; justify-content: flex-start; height: auto; gap: 10px; }
  .now-kpi-row > :not(.kpi-value) { margin-bottom: 0; height: 34px; }
  .now-kpi .kpi-value { font-size: 30px; }
  .now-qbars { height: 34px; }
  .now-gauge { width: 62px; }
  .now-st-ava .ava { width: 24px; height: 24px; font-size: 9px; }
  .now-stack { padding-top: 5px; }
  .now-kpi-foot { flex-wrap: wrap; gap: 6px; font-size: var(--t-xs); }

  .now-wait-card { padding: 16px; }
  .now-wlegend { gap: 4px 12px; }

  .now-shift-time { font-size: 52px; }
  .now-team { padding: 16px; }
  .now-gt-wrap { margin: 0 -16px; padding: 0 16px; }
  .now-gt { --who: 150px; --side: 124px; min-width: 660px; }
  .now-gt-axis, .now-gt-row { gap: 12px; }
  .now-gt-who, .now-gt-axis > span:first-child { position: sticky; left: -16px; z-index: 4; align-self: stretch; background: var(--surface); padding-left: 16px; margin-left: -16px; box-shadow: 10px 0 12px -12px var(--ink-4); }
  .now-gt-who .ava { width: 32px; height: 32px; font-size: 12px; }

  .now-board-card { padding: 16px; }
  .now-board { grid-template-columns: repeat(var(--lanes, 4), 236px); margin: 0 -16px; padding: 0 16px 4px; scroll-padding: 0 16px; }
}

/* ---------- действия с заявкой (now-3.js): меню, «к заявке», перетаскивание ---------- */
.btn.sm.now-act { width: 34px; padding: 0; flex: none; }
/* выделение текста карточки запрещено только там, где палец тянет за ручку; мышью тащат после порога (now-dnd) */
.now-touch .now-lead { user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; }
/* узкая колонка (ноутбук 1180 и уже): флаг рынка уступает место нику (рынок виден в карточке клиента), ряд плотнее */
.now-lane { container: now-lane / inline-size; }
@container now-lane (max-width: 200px) { .now-lead-top { gap: 6px; } .now-lead-top .flag { display: none; } .now-lead-top .now-lmenu { width: 20px; } }
.now-lmenu { flex: none; width: 24px; height: 24px; margin: -3px -5px -3px -2px; border-radius: 8px; display: grid; place-items: center; color: var(--ink-3); }
.now-lmenu:hover, .now-lmenu:focus-visible { background: var(--surface-3); color: var(--ink); }
.now-lmenu .ic { width: 15px; height: 15px; }
.now-grip { display: none; flex: none; width: 22px; height: 26px; margin: -3px -4px; place-items: center; color: var(--ink-4); touch-action: none; }
.now-touch .now-grip { display: grid; }
.now-grip .ic { width: 14px; height: 14px; }
body.now-dnd, body.now-dnd * { cursor: grabbing !important; user-select: none; }
.now-ghost { position: fixed; left: 0; top: 0; z-index: 90; margin: 0; pointer-events: none; opacity: .97; box-shadow: var(--sh-pop); transition: none; will-change: transform; }
.now-drag-src { opacity: .32; }
.now-dragging .now-lead:hover { transform: none; }
.now-dragging .now-lane { transition: background var(--dur-2), opacity var(--dur-2); }
.now-dragging .now-lane[data-drop="ok"] { outline: 2px dashed var(--line-2); outline-offset: -3px; }
.now-dragging .now-lane[data-drop="no"] { opacity: .5; }
.now-dragging .now-lane.now-over[data-drop="ok"] { outline-color: var(--ink-3); background: color-mix(in srgb, var(--lane) 16%, var(--surface-2)); }
.now-dragging .now-lane.now-over[data-drop="no"] { outline: 2px dashed var(--neg); outline-offset: -3px; }
.now-hl { animation: now-hl 2.6s var(--ease) both; }
@keyframes now-hl { 0%, 55% { box-shadow: 0 0 0 3px var(--accent), var(--sh-2); transform: translateY(-2px); } 100% { box-shadow: var(--sh-1); } }
.now-pop { min-width: 264px; }
.now-menu .menu-item .ic { width: 15px; height: 15px; flex: none; }
.now-menu .menu-item .ava { width: 22px; height: 22px; font-size: 8.5px; flex: none; }
.now-menu .now-mi-off { height: auto; min-height: 38px; padding: 8px 10px; color: var(--ink-3); cursor: default; white-space: normal; line-height: 1.3; }
.now-menu .now-mi-off:hover { background: none; color: var(--ink-3); }
.now-mi-note { padding: 6px 10px 4px; white-space: normal; line-height: 1.35; }
.now-mbtns { justify-content: flex-end; gap: 8px; }
.toast.now-undo { pointer-events: auto; }
.toast.now-undo .btn { height: 30px; margin-left: 4px; }
/* «Сейчас», часть 4 (js/screens/now-4.js, владелец 10.10): строка над доской («Скрыто: N благодарностей после сделки · показать», «Показаны 60 из 81»),
   «из N» в шапке колонки, окно «Деньги получены?» при переносе в «Оплата получена» без маркера «#получили», окно «Несколько открытых заявок» (список заявок чата, у каждой кнопка «Оплата по этой», пометка эскалации и подтверждение её закрытия), строка «Закрыто без сделки» с кнопкой «Вернуть» в окне «Деньги получены?».
   Цвета только из токенов, тёмная тема через них же. */
.now-board-note { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin: 0 0 12px; padding: 8px 12px; border-radius: var(--r-sm); background: var(--surface-2); color: var(--ink-2); font-size: var(--t-sm); line-height: 1.35; }
.now-board-note > span { display: inline-flex; align-items: center; gap: 6px; }
.now-board-note .ic { width: 14px; height: 14px; color: var(--ink-3); flex: none; }
.now-note-sep { width: 1px; height: 14px; background: var(--line-2); }
.now-note-btn { display: inline-flex; align-items: center; gap: 4px; height: 26px; padding: 0 10px; border-radius: var(--r-pill); background: var(--surface); box-shadow: var(--sh-1); color: var(--ink); font-size: var(--t-sm); font-weight: 600; cursor: pointer; }
.now-note-btn:hover { background: var(--surface-3); }
.now-note-btn:focus-visible { outline: 2px solid var(--ink-3); outline-offset: 2px; }
.now-note-btn .ic { width: 14px; height: 14px; }
.now-lane-of { margin-left: 3px; color: var(--ink-3); font-weight: 500; white-space: nowrap; }
.now-lane-n:has(.now-lane-of) { display: inline-flex; align-items: center; padding: 0 8px; white-space: nowrap; } /* в сетке число и «из N» вставали друг под другом */
.now-thanks-chip { background: var(--surface-3); color: var(--ink-2); }
.now-pay-twin { display: flex; gap: 8px; align-items: flex-start; margin-top: 12px; padding: 10px 12px; border-radius: var(--r-sm); background: var(--warn-soft); color: var(--warn); font-size: var(--t-sm); line-height: 1.4; }
.now-pay-twin .ic { width: 15px; height: 15px; flex: none; margin-top: 1px; }
.now-mbtns.now-pay-btns { flex-wrap: wrap-reverse; } .now-mbtns.now-pay-btns .btn { flex: 1 1 100%; justify-content: center; } /* окно «Несколько открытых заявок»: кнопки во всю ширину, главная сверху, «Отмена» снизу */
.now-mbtns.now-pay-btns .btn { min-width: 0; height: auto; min-height: 42px; padding-block: 8px; white-space: normal; text-align: center; line-height: 1.25; } /* длинная подпись («Оставить остальные открытыми и отметить на этой») на телефоне переносится, а не вылезает за окно */
.now-many-list { display: flex; flex-direction: column; gap: 8px; margin-top: 12px; }
.now-many-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 12px; padding: 10px 12px; border-radius: var(--r-sm); background: var(--surface-2); }
.now-many-row.this { box-shadow: inset 0 0 0 2px var(--line-2); }
.now-many-t { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; flex: 1 1 220px; min-width: 0; line-height: 1.35; }
.now-many-t > .t-xs { flex: 1 1 100%; overflow-wrap: anywhere; }
.now-many-tag { padding: 1px 8px; border-radius: var(--r-pill); background: var(--surface-3); color: var(--ink-2); font-size: var(--t-xs); font-style: normal; font-weight: 600; }
.now-many-tag.bot { background: var(--warn-soft); color: var(--warn); }
.now-many-tag.neg { background: var(--neg-soft); color: var(--neg); }
.now-many-why { flex: 1 1 100%; } /* почему кнопка неактивна: отдельной строкой под заявкой */
.now-many-help { color: var(--ink); font-size: var(--t-sm); line-height: 1.4; }
.now-pay-twin[data-esc] { flex-wrap: wrap; } .now-pay-twin[data-esc] > span:first-of-type { flex: 1 1 200px; min-width: 0; } .now-esc-btns { display: flex; flex-wrap: wrap; gap: 6px; } /* подтверждение закрытия заявки с эскалацией */
.now-pay-closed { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 10px; margin-top: 12px; padding: 8px 12px; border-radius: var(--r-sm); background: var(--surface-2); color: var(--ink-2); font-size: var(--t-sm); line-height: 1.35; }
.now-pay-closed > span { display: inline-flex; align-items: center; gap: 6px; } .now-pay-closed .ic { width: 14px; height: 14px; flex: none; }
.now-many-row .btn { flex: none; max-width: 100%; height: auto; min-height: 34px; padding-block: 6px; white-space: normal; text-align: left; line-height: 1.25; }
.now-many-row .t-xs.faint { display: inline-flex; align-items: center; gap: 4px; }
.now-many-row .t-xs .ic { width: 13px; height: 13px; flex: none; }
.now-pay-part { display: flex; gap: 6px; align-items: flex-start; margin-top: 6px; color: var(--warn); line-height: 1.4; }
.now-pay-part[hidden] { display: none; }
.now-pay-part .ic { width: 13px; height: 13px; flex: none; margin-top: 1px; }
@media (max-width: 720px) { .now-board-note { padding: 8px 10px; } .now-note-sep { display: none; } .now-many-row .btn { flex: 1 1 100%; justify-content: center; text-align: center; } }
/* «Сейчас», часть 5 (js/screens/now-5.js ... now-8.js, владелец 11.10): строка «На разбор / Закрыто автоматически» над доской, списки «На разбор» и «Закрыто автоматически»,
   блок «Закрыть сейчас» с переключателем. Цвета только из токенов, тёмная тема через них же. Списки не шире 1100 px: на широком экране они не растягиваются без меры. */
.now-tri-btns { display: inline-flex; flex-wrap: wrap; gap: 6px; }
.now-tri-btn { gap: 6px; }
.now-tri-btn b { font-weight: 700; }
.ic.spin { animation: spin 1s linear infinite; }
@media (prefers-reduced-motion: reduce) { .ic.spin { animation: none; } }

.tri { display: flex; flex-direction: column; gap: 18px; max-width: 1100px; }
.tri-head { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; }
.tri-head .seg { max-width: 100%; }
.tri-head .seg b { margin-left: 4px; font-weight: 700; }
.tri-title .card-title { margin: 0; }

/* блок «Закрыть сейчас» */
.tri-auto { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 14px 18px; padding: 16px 18px; border-radius: var(--r-md); background: var(--surface-2); border: 1px solid var(--glass-line); }
.tri-auto-main { min-width: 0; }
.tri-auto-t { display: flex; align-items: center; gap: 8px; font: 500 17px/1.25 var(--f-display); letter-spacing: -.02em; }
.tri-auto-t .num { font-weight: 600; }
.tri-auto-t .ic { width: 16px; height: 16px; flex: none; color: var(--ink-3); }
.tri-auto-s { margin-top: 5px; color: var(--ink-2); font-size: var(--t-sm); line-height: 1.55; }
.tri-auto-s b { color: var(--ink); font-weight: 600; }
.tri-auto-go { height: 42px; }
.tri-auto-sw { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; padding-top: 14px; border-top: 1px solid var(--line); }
.tri-auto-by { min-width: 0; color: var(--ink-3); font-size: var(--t-xs); line-height: 1.4; }
.tri-auto-last { grid-column: 1 / -1; display: flex; align-items: center; gap: 6px; color: var(--ink-3); font-size: var(--t-xs); line-height: 1.4; }
.tri-auto-last .ic { width: 13px; height: 13px; flex: none; }
.tri-auto-stop { grid-column: 1 / -1; display: flex; align-items: flex-start; gap: 8px; padding: 9px 12px; border-radius: var(--r-sm); background: var(--warn-soft); color: var(--warn); font-size: var(--t-sm); font-weight: 500; line-height: 1.4; }
.tri-auto-stop .ic { width: 15px; height: 15px; flex: none; margin-top: 1px; }
.now-tg[disabled] { opacity: .5; cursor: not-allowed; }
.tri-auto-sw .now-tg { max-width: 100%; height: auto; min-height: 42px; padding-block: 8px; white-space: normal; text-align: left; line-height: 1.25; } /* на телефоне подпись переносится, а не вылезает за блок */
.tri-ask-list { display: flex; flex-direction: column; margin-top: 12px; padding: 2px 14px; border-radius: var(--r-sm); background: var(--surface-2); }
.tri-ask-r { display: flex; justify-content: space-between; gap: 12px; padding: 9px 0; border-bottom: 1px solid var(--line); font-size: var(--t-sm); }
.tri-ask-r:last-child { border-bottom: 0; }
.tri-ask-r b { font-weight: 600; }

/* список «На разбор» */
.tri-group { display: flex; flex-direction: column; gap: 10px; }
.tri-group-head { display: flex; align-items: center; gap: 10px; min-width: 0; }
.tri-group-ic { width: 28px; height: 28px; flex: none; display: grid; place-items: center; border-radius: 9px; background: var(--surface-3); color: var(--ink-2); }
.tri-group[data-kind="pay"] .tri-group-ic { background: var(--pos-soft); color: var(--pos); }
.tri-group[data-kind="maybe_paid"] .tri-group-ic { background: var(--warn-soft); color: var(--warn); }
.tri-group[data-kind="unanswered"] .tri-group-ic { background: var(--info-soft); color: var(--info); }
.tri-group[data-kind="risk"] .tri-group-ic { background: var(--neg-soft); color: var(--neg); }
.tri-group-t { margin: 0; min-width: 0; font: 600 var(--t-h3)/1.25 var(--f-ui); letter-spacing: -.01em; }
.tri-group-s { margin-top: -4px; color: var(--ink-3); font-size: var(--t-sm); line-height: 1.4; }
.tri-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 10px; align-items: start; }
.tri-grid > .now-lead { min-width: 0; }
.tri .now-grip { display: none; } /* перетаскивать между колонками здесь некуда */
.tri-why { display: flex; align-items: flex-start; gap: 6px; padding: 6px 9px; border-radius: 10px; background: var(--surface-2); color: var(--ink-2); font-size: var(--t-xs); font-weight: 500; line-height: 1.35; }
.tri-why .ic { width: 13px; height: 13px; flex: none; margin-top: 1px; color: var(--ink-3); }
.tri-why[data-kind="pay"] .ic { color: var(--pos); }
.tri-why[data-kind="maybe_paid"] .ic { color: var(--warn); }
.tri-why[data-kind="unanswered"] .ic { color: var(--info); }
.tri-why[data-kind="risk"] { background: var(--neg-soft); color: var(--neg); }
.tri-why[data-kind="risk"] .ic { color: var(--neg); }
.tri-more { width: auto; min-width: 220px; align-self: flex-start; padding: 0 18px; }
.tri-more[disabled] { opacity: .6; cursor: default; }
.tri-skel { height: 176px; border-radius: 16px; }
.tri-skel-row { height: 78px; border-radius: 16px; }
.tri-err { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; padding: 12px 14px; border-radius: var(--r-sm); background: var(--neg-soft); color: var(--neg); font-size: var(--t-sm); }
.tri-err .ic { width: 15px; height: 15px; flex: none; }

/* список «Закрыто автоматически» */
.tri-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.tri-chips .chip b { margin-left: 3px; font-weight: 700; }
.tri-list { display: flex; flex-direction: column; gap: 8px; max-width: 860px; }
.tri-row { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: var(--r-md); background: var(--surface); border: 1px solid var(--glass-line); box-shadow: var(--sh-1); }
.tri-row-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.tri-row-top { display: flex; align-items: center; gap: 8px; min-width: 0; }
.tri-no { flex: none; color: var(--ink-3); font-size: var(--t-sm); font-weight: 600; }
.tri-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align: left; font-size: var(--t-sm); font-weight: 600; color: var(--ink); }
button.tri-name:hover { text-decoration: underline; }
.tri-row-note { font-size: var(--t-sm); line-height: 1.35; color: var(--ink); overflow-wrap: anywhere; }
.tri-row-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 8px; color: var(--ink-3); font-size: var(--t-xs); }
.tri-dot { width: 3px; height: 3px; flex: none; border-radius: 50%; background: var(--ink-4); }
.tri-ret { flex: none; }

@media (max-width: 720px) {
  .tri { gap: 16px; }
  .tri-auto { grid-template-columns: 1fr; padding: 14px; }
  .tri-auto-go { width: 100%; justify-content: center; }
  .tri-grid { grid-template-columns: 1fr; }
  .tri-row { padding: 11px 12px; gap: 10px; }
  .tri-dot { display: none; } /* при переносе строки точка-разделитель осталась бы висеть в конце */
  .tri-more { width: 100%; }
}
/* «Сейчас», часть 9 (js/screens/now-9.js, волна 17в, владелец 12.10): окно «Сделка состоялась» и строка «есть в отчёте» с кнопкой в списке «На разбор». Цвета только из токенов,
   тёмная тема через них же. Окно не шире экрана: на телефоне подпись и значение строк идут друг под другом. */
.fin-note { display: flex; gap: 8px; align-items: flex-start; margin-top: 12px; padding: 10px 12px; border-radius: var(--r-sm); background: var(--surface-2); color: var(--ink-2); font-size: var(--t-sm); line-height: 1.4; }
.fin-note .ic { width: 15px; height: 15px; flex: none; margin-top: 1px; }
.fin-note.warn { background: var(--warn-soft); color: var(--warn); }
.fin-note.ok { background: var(--pos-soft); color: var(--pos); }
.fin-note.info { background: var(--info-soft); color: var(--info); }
.fin-note.plain { margin-top: 8px; padding: 0; background: none; }
.fin-note.plain .ic { color: var(--ink-3); }
.fin-card { margin-top: 14px; padding: 2px 14px; border-radius: var(--r-sm); background: var(--surface-2); }
.fin-r { display: grid; grid-template-columns: minmax(96px, 36%) minmax(0, 1fr); gap: 4px 12px; padding: 9px 0; border-bottom: 1px solid var(--line); font-size: var(--t-sm); line-height: 1.4; }
.fin-r:last-child { border-bottom: 0; }
.fin-k { color: var(--ink-3); }
.fin-v { min-width: 0; font-weight: 500; overflow-wrap: anywhere; }
.fin-v .faint { font-weight: 400; }
.fin-at { width: 100%; max-width: 260px; margin-bottom: 4px; }
.fin-sec { margin-top: 16px; color: var(--ink-2); font-size: var(--t-sm); font-weight: 600; }
.fin-rep, .tri-rep { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; padding: 9px 12px; border-radius: var(--r-sm); background: var(--surface-2); color: var(--ink-2); font-size: var(--t-sm); line-height: 1.4; }
.fin-rep { margin-top: 8px; }
.fin-rep > span, .tri-rep > span { display: flex; align-items: flex-start; gap: 6px; min-width: 0; }
.fin-rep .ic, .tri-rep .ic { width: 14px; height: 14px; flex: none; margin-top: 2px; }
.fin-rep a, .tri-rep a { flex: none; color: inherit; }
.fin-rep.ok, .tri-rep.ok { background: var(--pos-soft); color: var(--pos); }
.fin-rep.warn, .tri-rep.warn { background: var(--warn-soft); color: var(--warn); }
.fin-rep.neg, .tri-rep.neg { background: var(--neg-soft); color: var(--neg); }
.tri-rep { padding: 6px 9px; border-radius: 10px; font-size: var(--t-xs); font-weight: 500; line-height: 1.35; }
.tri-rep .ic { margin-top: 1px; }
.tri-fin { align-self: flex-start; gap: 6px; }
.fin-ws { display: flex; flex-direction: column; gap: 6px; margin-top: 8px; }
.fin-w { display: flex; align-items: flex-start; gap: 10px; padding: 9px 12px; border-radius: var(--r-sm); background: var(--warn-soft); color: var(--ink); font-size: var(--t-sm); line-height: 1.4; cursor: pointer; }
.fin-w input { flex: none; width: 18px; height: 18px; margin-top: 1px; }
@media (max-width: 520px) { .fin-r { grid-template-columns: 1fr; gap: 2px; } .fin-at { max-width: none; } }
/* «Клиенты»: реестр-терминал (ParryFarry) с KPI как у Cemdash. Только токены, классы с префиксом cl-. Живая версия: без риска, графиков и демо.
   Владелец 09.10: быстрые действия по нику и значки-достижения в строке живут в clist.css (кнопки больше не закрывают значки). */

/* ---------- полоса «Под наблюдением» (.card.glass) ---------- */
.card.cl-watch {
  display: flex; align-items: center; gap: 14px;
  min-height: 62px; padding: 8px 10px 8px 18px; margin-bottom: var(--gap);
  border-radius: var(--r-lg);
}
.cl-watch-lbl { display: flex; align-items: center; gap: 8px; flex: none; height: 30px; padding-right: 16px; border-right: 1px solid var(--line); font-weight: 600; font-size: var(--t-sm); }
.cl-watch-lbl .badge { background: var(--surface-3); color: var(--ink-2); }
.cl-star-ic { color: var(--accent-text); fill: var(--accent); }
.cl-watch-list {
  flex: 1; min-width: 0; display: flex; align-items: center; gap: 2px;
  overflow-x: auto; scrollbar-width: none;
}
.cl-watch-list::-webkit-scrollbar { display: none; }
.cl-watch:has(.cl-wnext:not([hidden])) .cl-watch-list { -webkit-mask-image: linear-gradient(90deg, black 90%, transparent); mask-image: linear-gradient(90deg, black 90%, transparent); padding-right: 24px; }
/* чип как тикер: ник сверху, сумма + изменение + мини-график снизу; звезда поверх графика при наведении */
.cl-wchip {
  position: relative; flex: none;
  display: inline-flex; flex-direction: column; justify-content: center; gap: 1px;
  height: 46px; padding: 0 14px; border-radius: 14px; max-width: 190px;
  cursor: pointer; transition: background var(--dur-1);
}
.cl-wchip:hover, .cl-wchip:focus-visible { background: var(--surface-2); }
.cl-wnick { color: var(--ink-2); font-size: 12px; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cl-wrow { display: flex; align-items: center; gap: 8px; }
.cl-wv { font-weight: 600; font-size: 14px; white-space: nowrap; letter-spacing: -.01em; }
.cl-wd { font-size: var(--t-xs); font-weight: 600; white-space: nowrap; font-variant-numeric: tabular-nums; }
.cl-wd.flat { color: var(--ink-2); font-weight: 500; }
.cl-wun {
  position: absolute; right: 8px; bottom: 6px;
  width: 24px; height: 22px; border-radius: 8px; display: grid; place-items: center;
  background: var(--surface-2); color: var(--accent-text);
  opacity: 0; transition: opacity var(--dur-1), background var(--dur-1);
}
.cl-wun .ic { width: 14px; height: 14px; fill: var(--accent); }
.cl-wun:hover { background: var(--surface-3); }
.cl-wchip:hover .cl-wun, .cl-wchip:focus-within .cl-wun { opacity: 1; }
@media (hover: none) { .cl-wun { opacity: 1; } }
.cl-wsep { width: 1px; height: 24px; background: var(--line); flex: none; margin: 0 2px; }
.cl-wnext { flex: none; }

/* ---------- KPI: плотнее, чем на «Обзоре», чтобы реестр был выше сгиба ---------- */
.cl-kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--gap); margin-bottom: var(--gap); }
.cl-kpi.kpi { min-height: 124px; gap: 10px; padding: 16px 20px 16px; }
.cl-kpi .kpi-value { font-size: 34px; }
.cl-kpi .kpi-value .unit { font-size: 14px; vertical-align: .5em; }
.cl-kpi .kpi-top { min-height: 34px; align-items: center; }
.cl-kpi .kpi-top .t-xs { white-space: nowrap; }
.cl-kpi .kpi-label { font-size: 14.5px; }
.cl-kpi .ico-tile { width: 34px; height: 34px; border-radius: 11px; transition: transform var(--dur-2) var(--ease-spring); }
.cl-kpi .ico-tile .ic { width: 17px; height: 17px; }
.cl-kpi .kpi-foot { flex-wrap: nowrap; }
.cl-kpi .kpi-foot > span:not(.chip) { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.cl-kpi.hero .kpi-foot { flex-wrap: wrap; row-gap: 4px; }
.cl-hrow { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; }
.cl-hb-wrap { display: block; flex: none; margin-bottom: 2px; }
.cl-hside { display: flex; flex-direction: column; align-items: flex-end; gap: 3px; margin-bottom: 2px; font-size: var(--t-sm); color: var(--hero-ink-2); white-space: nowrap; }
.cl-hside b { margin-right: 6px; font-weight: 600; font-size: 15px; color: var(--hero-ink); }
.cl-hbars rect { fill: color-mix(in srgb, var(--hero-ink) 22%, transparent); }
.cl-hbars rect.on { fill: var(--hero-accent); }
.cl-kpi .ring .ring-label { color: var(--ink); }
.cl-ring-l { font-size: 8.5px; font-weight: 600; letter-spacing: -.03em; }
.cl-kpi.link:hover .ico-tile { transform: scale(1.06); }

/* ---------- реестр ---------- */
.cl-reg { padding: 0; }
.cl-reg-head { display: flex; align-items: center; justify-content: space-between; gap: 12px 16px; flex-wrap: wrap; padding: 18px 20px 0; }
.cl-tools { display: flex; align-items: center; gap: 8px; flex: 1; justify-content: flex-end; min-width: 0; }
.cl-tool { display: contents; }
.cl-search { width: min(360px, 100%); }
.cl-search .input { height: 38px; }
.cl-search .input::-webkit-search-cancel-button { opacity: .5; }
.cl-tools .btn .badge { margin-right: -6px; }

.cl-filters { display: flex; align-items: center; flex-wrap: wrap; gap: 10px 16px; padding: 14px 20px 14px; }
.cl-segs, .cl-mks { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.cl-mks { margin-left: auto; gap: 4px; }
.cl-seg.chip { gap: 7px; padding: 0 5px 0 12px; font-size: var(--t-sm); }
.cl-seg .ic { width: 14px; height: 14px; }
.cl-seg .dot { width: 6px; height: 6px; color: var(--ink-3); }
.cl-seg.t-violet .dot { color: var(--violet); }
.cl-seg.t-pos .dot { color: var(--pos); }
.cl-seg.t-info .dot { color: var(--info); }
.cl-seg.t-neg .dot { color: var(--neg); }
.cl-seg .badge { background: var(--surface); color: var(--ink-2); min-width: 26px; height: 22px; }
.cl-seg[aria-pressed="true"] .badge { background: var(--accent); color: var(--accent-ink); }
.cl-seg[aria-pressed="true"] .dot { color: var(--accent); }
:root[data-theme="dark"] .cl-seg[aria-pressed="true"] .dot { color: var(--inverse-ink); }
:root[data-theme="dark"] .cl-seg .badge { background: var(--surface-2); }
:root[data-theme="dark"] .cl-seg[aria-pressed="true"] .badge { background: var(--accent); color: var(--accent-ink); }
.cl-mk.chip { width: 38px; padding: 0; justify-content: center; background: transparent; border-color: var(--line-2); }
.cl-mk .flag { font-size: 17px; }
.cl-mk[aria-pressed="false"] .flag { filter: saturate(.85); }
.cl-mk[aria-pressed="true"] { border-color: transparent; }
.cl-mine { background: var(--inverse); color: var(--inverse-ink); cursor: default; }
.cl-mine .ic { color: var(--accent); }
:root[data-theme="dark"] .cl-mine .ic { color: var(--inverse-ink); }
.cl-reset .badge { transform: scale(.9); }

/* таблица */
.cl-wrap { padding: 0 8px; }
.cl-tbl { font-size: 13px; }
.cl-tbl th { height: 38px; padding: 0 5px; font-size: var(--t-xs); letter-spacing: .01em; }
.cl-tbl th .th { gap: 4px; }
.cl-tbl th .th > .ic { opacity: .45; }
.cl-tbl th.sortable:hover .th > .ic { opacity: .8; }
.cl-tbl th.sorted { color: var(--ink); }
.cl-th2 { display: flex; flex-direction: column; line-height: 1.15; }
.cl-th2 small { font-size: 10px; font-weight: 400; color: var(--ink-3); white-space: nowrap; }
.cl-tbl th.sorted .th > .ic { opacity: 1; color: var(--accent-text); }
.cl-tbl th.cl-c-star { color: var(--ink-4); }
.cl-tbl th.cl-c-star .ic { margin: 0 auto; }
.cl-tbl td { height: 52px; padding: 0 5px; }
.cl-tbl .sub { margin-top: 2px; }
.cl-tbl td.cl-c-meta { display: none; }
/* подсветка столбца, по которому отсортировано */
.cl-tbl[data-sorted="deals"] td.cl-c-deals, .cl-tbl[data-sorted="turnover"] td.cl-c-turnover, .cl-tbl[data-sorted="period"] td.cl-c-period,
.cl-tbl[data-sorted="requests"] td.cl-c-requests, .cl-tbl[data-sorted="last"] td.cl-c-last, .cl-tbl[data-sorted="profit"] td.cl-c-profit { background: color-mix(in srgb, var(--surface-2) 70%, transparent); }
.cl-fbtn { width: 19px; height: 20px; border-radius: 7px; display: inline-grid; place-items: center; color: var(--ink-3); transition: background var(--dur-1), color var(--dur-1); }
.cl-fbtn:hover { background: var(--surface-3); color: var(--ink); }
.cl-fbtn .ic { opacity: 1 !important; width: 12px !important; height: 12px !important; }
.cl-fbtn.on { background: var(--accent); color: var(--accent-ink); }

/* шапка таблицы липнет: к верху страницы, если таблица помещается; внутри прокрутки, если нет */
.cl-wrap.cl-fit { overflow: visible; }
.cl-wrap.cl-fit .cl-tbl th { top: calc(var(--frame) + var(--top-h) + 4px); z-index: 4; }
/* полоска цвета карточки над прилипшей шапкой: строки не просвечивают между ней и верхней строкой */
.cl-wrap.cl-fit .cl-tbl th::before { content: ""; position: absolute; left: 0; right: 0; bottom: 100%; height: 8px; background: var(--surface); pointer-events: none; }
.cl-wrap:not(.cl-fit) { max-height: calc(100dvh - 140px); overscroll-behavior: contain; }

.cl-c-star { width: 32px; padding: 0 0 0 4px !important; }
.cl-star { width: 28px; height: 28px; border-radius: 9px; display: grid; place-items: center; color: var(--ink-4); transition: color var(--dur-1), background var(--dur-1), transform var(--dur-2) var(--ease-spring); }
.cl-star .ic { width: 15px; height: 15px; fill: color-mix(in srgb, var(--ink-4) 45%, transparent); }
.cl-star:hover { color: var(--ink-2); background: var(--surface-3); }
.cl-star:active { transform: scale(.86); }
.cl-star.on { color: var(--accent-text); }
.cl-star.on .ic { fill: var(--accent); }
.cl-tbl tbody tr.is-w td.cl-c-star { box-shadow: inset 3px 0 0 var(--accent); }

.cl-tbl th.cl-c-who { width: 236px; }
.cl-c-who { min-width: 214px; }
.cl-who { display: flex; align-items: center; gap: 10px; min-width: 0; max-width: 270px; }
.cl-who .ava { width: 30px; height: 30px; font-size: 11.5px; }
.cl-who-main { flex: 1; min-width: 0; }
.cl-name { font-size: 13.5px; font-weight: 600; letter-spacing: -.01em; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; line-height: 1.3; }
.cl-badges { display: inline-flex; gap: 3px; flex: none; }
.cl-bdg { width: 18px; height: 18px; border-radius: 6px; display: inline-grid; place-items: center; background: var(--surface-3); color: var(--ink-2); }
.cl-bdg .ic { width: 11px; height: 11px; stroke-width: 2; }
.cl-bdg-more { width: auto; padding: 0 5px; font-size: 10.5px; font-weight: 600; color: var(--ink-3); }
.cl-bdg.t-warn { background: var(--warn-soft); color: var(--warn); }
.cl-bdg.t-violet { background: var(--violet-soft); color: var(--violet); }
.cl-bdg.t-info { background: var(--info-soft); color: var(--info); }
.cl-bdg.t-accent { background: var(--accent-soft); color: var(--accent-text); }
.cl-bdg.t-pos { background: var(--pos-soft); color: var(--pos); }
.cl-who-sub { position: relative; display: flex; align-items: center; gap: 7px; margin-top: 1px; height: 20px; font-size: 12px; color: var(--ink-3); overflow: hidden; }
.cl-nick { white-space: nowrap; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.cl-was { flex-shrink: 12; min-width: 0; overflow: hidden; text-overflow: ellipsis; font-size: var(--t-xs); color: var(--violet); background: var(--violet-soft); padding: 1px 8px; border-radius: var(--r-pill); white-space: nowrap; }
/* аккаунты сделок (AccBadge.stack): два по диагонали в квадрате 20 px (значки по 14), один и три+ рядом по 16; вырез цветом строки */
.cl-svcs.acs-row { --acs-s: 16px; }
.cl-svcs.acs-diag { --acs-s: 20px; }
.cl-tbl tbody tr:hover .cl-svcs { --acs-ring: var(--surface-2); }
.cl-hl { background: var(--accent-soft); color: var(--accent-text); border-radius: 4px; padding: 0 1px; }
/* быстрые действия по нику и значки: clist.css (владелец 09.10) */

.cl-mkc { display: flex; align-items: center; gap: 9px; }
.cl-mkc .flag { font-size: 17px; }
.cl-mkc > div { min-width: 0; max-width: 136px; }
.cl-tbl .cl-msub { display: flex; align-items: center; gap: 5px; }
.cl-msub > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.cl-v { font-weight: 500; font-size: 13.5px; }
.cl-stale > div:first-child { color: var(--ink-3); }
.cl-mgr { display: flex; align-items: center; gap: 8px; }
.cl-mgr .ava.sm { width: 24px; height: 24px; font-size: 9.5px; }
/* сегмент: «Постоянный» нейтральный, цветные метки только у остальных */
.cl-sgt { display: inline-flex; align-items: center; gap: 6px; color: var(--ink-2); font-size: var(--t-sm); white-space: nowrap; }
.cl-sgt .dot { width: 6px; height: 6px; color: var(--ink-4); }
.cl-sgt.t-violet .dot { color: var(--violet); }
.cl-sgt.t-info .dot { color: var(--info); }
.cl-sgt.t-neg .dot { color: var(--neg); }
.cl-sgt.t-violet, .cl-sgt.t-info, .cl-sgt.t-neg { color: var(--ink); font-weight: 500; }
.cl-segchip .ic { width: 12px; height: 12px; }

.cl-empty { padding: 4px 0 26px; }
.cl-empty-act { display: flex; justify-content: center; }

/* плавающий док снизу (как у ParryFarry): держится у низа экрана, пока видна таблица */
.cl-dock { position: sticky; bottom: 18px; z-index: 6; display: flex; justify-content: center; padding: 14px 12px 18px; pointer-events: none; }
.cl-dock-in {
  pointer-events: auto;
  display: inline-flex; align-items: center; gap: 10px;
  height: 52px; padding: 0 7px 0 18px; border-radius: var(--r-pill);
  background: var(--glass);
  -webkit-backdrop-filter: blur(20px) saturate(1.5); backdrop-filter: blur(20px) saturate(1.5);
  border: 1px solid var(--glass-line); box-shadow: var(--sh-pop);
  font-size: var(--t-sm); color: var(--ink-2); white-space: nowrap;
  transition: opacity var(--dur-2) var(--ease), transform var(--dur-3) var(--ease);
}
.cl-dock-in b { color: var(--ink); font-weight: 600; }
.cl-dock.is-off .cl-dock-in { opacity: 0; transform: translateY(14px); pointer-events: none; }
.cl-dock-cell { display: inline-flex; align-items: center; gap: 7px; }
.cl-dsep { width: 1px; height: 22px; background: var(--line-2); }

/* всплывашки: фильтр столбца, «Фильтры», колонки, сортировка */
.cl-rpop { width: 286px; padding: 10px 8px 8px; }
.cl-rin { display: flex; align-items: center; gap: 8px; }
.cl-rin .input { height: 40px; -moz-appearance: textfield; }
.cl-rin .input::-webkit-inner-spin-button, .cl-rin .input::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.cl-fp { padding: 10px 8px 4px; }
.cl-fp .t-label { margin-bottom: 8px; }
.cl-fpn { margin-left: 2px; font-size: 10.5px; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.cl-fp .seg button[aria-pressed="true"] .cl-fpn { color: var(--ink-2); }
.cl-fp-rngs { display: flex; flex-wrap: wrap; gap: 6px; }
.cl-fp-rngs .chip { padding-right: 3px; }
.cl-fp-x { width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center; color: var(--ink-3); }
.cl-fp-x:hover { background: var(--surface); color: var(--ink); }
.cl-fp .menu-item { margin-top: 2px; }
.cl-colrow { justify-content: space-between; }
.cl-colrow .switch { transform: scale(.82); transform-origin: right center; }
.cl-colnote { padding: 4px 10px 6px; }

/* таблица шире карточки: имя прилипает слева, остальное прокручивается внутри */
.cl-wrap:not(.cl-fit) .cl-tbl td.cl-c-who, .cl-wrap:not(.cl-fit) .cl-tbl th.cl-c-who { position: sticky; left: 0; z-index: 1; background: var(--surface); box-shadow: 1px 0 0 var(--line); }
.cl-wrap:not(.cl-fit) .cl-tbl th.cl-c-who { z-index: 3; background: var(--surface-2); }
.cl-wrap:not(.cl-fit) .cl-tbl tbody tr:hover td.cl-c-who { background: var(--surface-2); }

/* ---------- адаптив ---------- */
@media (max-width: 1400px) {
  .cl-name { max-width: 160px; }
  .cl-tbl th, .cl-tbl td { padding: 0 4px; }
  .cl-c-who { min-width: 210px; }
  .cl-tbl th.cl-c-who { width: 230px; }
  .cl-tbl th .th { gap: 3px; }
  .cl-fbtn { width: 17px; }
}
@media (max-width: 1280px) {
  .cl-kpi.kpi { padding: 14px 16px; }
  .cl-kpi.hero .kpi-top .t-xs { display: none; }
  .cl-filters { column-gap: 12px; }
  .cl-mks { gap: 3px; }
  .cl-mk.chip { width: 33px; }
  .cl-mk .flag { font-size: 16px; }
  .cl-kpi .kpi-value { font-size: 30px; }
  .cl-kpi .ico-tile { display: none; }
  .cl-kpi .kpi-foot { flex-wrap: wrap; row-gap: 4px; }
  .cl-kpi .kpi-foot > span:not(.chip) { white-space: normal; }
  .cl-hbars { width: 96px; }
}
@media (max-width: 1024px) {
  .cl-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cl-kpi.kpi { min-height: 0; }
  .cl-kpi .kpi-top { min-height: 0; }
}
@media (max-width: 720px) {
  .card.cl-watch { padding: 6px 6px 6px 12px; gap: 8px; min-height: 58px; }
  .cl-watch-lbl { padding-right: 10px; gap: 6px; }
  .cl-watch-k { display: none; }
  .cl-wchip { padding: 0 10px; max-width: 150px; }
  .cl-kpis { gap: 10px; }
  .cl-kpi.kpi { padding: 14px; gap: 8px; }
  .cl-kpi.hero, .cl-kpis > .cl-kpi:nth-child(2) { grid-column: span 2; }
  .cl-kpi .kpi-value { font-size: 30px; }
  .cl-kpi .kpi-label { font-size: 14px; }
  .cl-kpis > .cl-kpi:nth-child(n+3) .kpi-foot > span:not(.chip) { display: none; }
  .cl-hbars { width: auto; }
  .cl-reg-head { padding: 16px 14px 0; }
  .cl-reg-t { flex-basis: 100%; }
  .cl-tools { flex-basis: 100%; justify-content: flex-start; }
  .cl-tools { flex-wrap: wrap; }
  .cl-search { flex: 1 1 100%; width: auto; min-width: 0; }
  .cl-sortm { margin-left: auto; }
  .cl-filters { padding: 12px 14px 8px; gap: 8px; }
  .cl-segs, .cl-mks { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin: 0 -14px; padding: 0 14px; width: calc(100% + 28px); }
  .cl-segs::-webkit-scrollbar, .cl-mks::-webkit-scrollbar { display: none; }
  .cl-seg.chip, .cl-mk.chip { flex: none; }
  .cl-mks { margin-left: -14px; }
  .cl-reset { margin-left: 0; }
  .cl-wrap { padding: 0; }
  .cl-wrap:not(.cl-fit) { max-height: none; }

  /* телефон: строки реестра двухстрочными карточками (имя и ник | оборот; сегмент, рынок, последняя | риск) */
  .cl-tbl, .cl-tbl tbody { display: block; width: 100%; }
  .cl-tbl thead { display: none; }
  .cl-tbl tbody tr {
    display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "who turn" "meta meta";
    align-items: center; gap: 4px 12px; padding: 11px 14px; border-bottom: 1px solid var(--line);
  }
  .cl-tbl tbody tr:last-child { border-bottom: 0; }
  .cl-tbl tbody tr > td { display: none; height: auto; padding: 0; border: 0; background: none !important; }
  .cl-tbl tbody tr > td.cl-c-who { display: block; grid-area: who; min-width: 0; }
  .cl-tbl tbody tr > td.cl-c-turnover { display: block; grid-area: turn; }
  .cl-tbl tbody tr > td.cl-c-meta { display: flex; grid-area: meta; align-items: center; gap: 6px; min-width: 0; padding-left: 40px; font-size: var(--t-xs); color: var(--ink-3); white-space: nowrap; overflow: hidden; }
  .cl-tbl tbody tr.is-w { box-shadow: inset 3px 0 0 var(--accent); }
  .cl-c-meta .cl-sgt { font-size: var(--t-xs); }
  .cl-c-meta .flag { font-size: 13px; }
  .cl-mlast { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
  .cl-msep { width: 3px; height: 3px; border-radius: 50%; background: var(--ink-4); flex: none; }
  .cl-c-turnover .sub { display: none; }
  .cl-c-who { min-width: 0; }
  .cl-name { max-width: 100%; }
  .cl-who { max-width: none; }

  .cl-dock { bottom: 92px; padding: 12px 8px 16px; }
  .cl-dock-in { height: 46px; padding: 0 5px 0 14px; gap: 8px; }
}

/* живая версия: загрузка, бледные строки отчёта, сноска, вкладки руководителя */
.cl-wrap.is-busy { opacity: .5; pointer-events: none; transition: opacity var(--dur-2); }
.cl-tbl tbody tr.cl-rep .cl-name { color: var(--ink-2); }
.cl-tbl tbody tr.cl-rep .ava { opacity: .7; }
.cl-note { margin: 0; padding: 4px 22px 26px; max-width: 760px; }
.cl-fp .t-xs.faint { margin-bottom: 8px; }
.cl-link { color: var(--accent-text); font-weight: 500; text-align: left; }
.cl-link:hover { text-decoration: underline; }
.cl-src-note { margin: 0 0 14px; max-width: 900px; }
.cl-who-list { white-space: normal; min-width: 220px; max-width: 360px; line-height: 1.4; font-size: var(--t-sm); }
.cl-rv-list { display: flex; flex-direction: column; gap: 12px; margin-top: 16px; }
.cl-rv { padding: 14px 16px; border-radius: var(--r-lg); background: var(--surface-2); display: flex; flex-direction: column; gap: 8px; }
.cl-rv.is-done { opacity: .6; }
.cl-rv-head { font-size: var(--t-sm); }
.cl-rv-msg { padding: 8px 12px; border-radius: 12px; background: var(--surface); font-size: var(--t-sm); max-width: 640px; }
.cl-rv-msg.out { background: var(--accent-soft); margin-left: 24px; }
.cl-rv-act { display: flex; gap: 8px; }

/* Проверка: фокус с клавиатуры на строке, закрытая карточка менеджера, период во всплывашке */
.cl-tbl tbody tr:focus-visible { outline: 2px solid var(--accent-text); outline-offset: -2px; box-shadow: none; border-radius: 0; }
.cl-lock .cl-who-main { cursor: default; }
.cl-fp-pr { margin: 8px 0 16px; }
@media (min-width: 1025px) and (max-width: 1280px) { .cl-kpi .ring { display: none; } }

/* плашки у имени (client-notes.js, notes.css): класс cl-nmr у строки с именем */
/* «Клиенты»: быстрые действия по нику и значки-достижения (владелец 09.10: кнопки при наведении на строку закрывали значки).
   Строка ника: слева зона .cl-nk (ник и сервисы), справа значки. Кнопки действий живут внутри .cl-nk, видны только при наведении
   на ник (или фокусе с клавиатуры) и встают ровно на его место: значки не перекрыты никогда, ширина столбца не меняется.
   Телефон и сенсорный экран: кнопок нет, ник открывает действия нажатием (clist-quick.js), значки видны всегда. */

.cl-nk { position: relative; display: flex; align-items: center; align-self: stretch; gap: 7px; min-width: 0; flex: 0 1 auto; }
.cl-tbl tbody tr:hover .cl-nick { text-decoration: underline dotted var(--ink-4); text-underline-offset: 3px; }

.cl-quick {
  position: absolute; left: 0; top: 0; bottom: 0; min-width: 100%;
  display: flex; align-items: center; justify-content: flex-start; gap: 1px;
  background: var(--surface-2);
  opacity: 0; pointer-events: none; transition: opacity var(--dur-1);
}
.cl-nk:hover .cl-quick, .cl-quick:focus-within { opacity: 1; pointer-events: auto; }
.cl-q { flex: none; width: 24px; height: 20px; border-radius: 7px; display: inline-grid; place-items: center; color: var(--ink-3); transition: background var(--dur-1), color var(--dur-1); }
.cl-q:hover { background: var(--surface-3); color: var(--ink); }
.cl-q:focus-visible { outline: 2px solid var(--accent-text); outline-offset: -2px; }
.cl-q .ic { width: 13px; height: 13px; }

/* значки у правого края: кнопка открывает список; подсказка с цифрой у каждого значка */
.cl-who-sub .cl-badges { margin-left: auto; align-self: stretch; align-items: center; cursor: pointer; border-radius: 7px; }
.cl-badges .cl-bdg { transition: box-shadow var(--dur-1); }
.cl-badges:hover .cl-bdg, .cl-badges:focus-visible .cl-bdg { box-shadow: 0 0 0 1px currentColor; }
.cl-badges:focus-visible { outline: 2px solid var(--accent-text); outline-offset: 1px; }

/* всплывашка со списком достижений и действий (на телефоне это основной вид) */
.cl-ap { width: 290px; max-width: calc(100vw - 32px); }
.cl-ap-h { display: flex; flex-direction: column; gap: 2px; padding: 6px 10px 8px; }
.cl-ap-i { display: flex; align-items: flex-start; gap: 10px; padding: 7px 10px; border-radius: 11px; }
.cl-ap-i .cl-bdg { width: 26px; height: 26px; border-radius: 9px; flex: none; }
.cl-ap-i .cl-bdg .ic { width: 15px; height: 15px; }
.cl-ap-i b { display: block; font-size: var(--t-sm); font-weight: 600; line-height: 1.3; }
.cl-ap-d { display: block; margin-top: 1px; font-size: var(--t-xs); line-height: 1.4; color: var(--ink-3); }
.cl-qm { min-width: 240px; }
.cl-qm-h { display: flex; flex-direction: column; gap: 2px; padding: 6px 10px 8px; margin-bottom: 4px; border-bottom: 1px solid var(--line); }
.cl-qm-h b { font-size: var(--t-sm); font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cl-qm .menu-item { height: 44px; }
.cl-qm .menu-item .ic { flex: none; color: var(--ink-3); }

@media (hover: none), (max-width: 720px) {
  .cl-quick { display: none; }
  .cl-who-sub { height: 26px; margin-top: 0; }
  .cl-nk { cursor: pointer; }
  .cl-nk .cl-nick { text-decoration: underline dotted var(--ink-4); text-underline-offset: 3px; }
  .cl-who-sub .cl-badges { padding: 0 4px; margin-right: -4px; }
}
@media (prefers-reduced-motion: reduce) {
  .cl-quick, .cl-q, .cl-badges .cl-bdg { transition: none; }
}
/* Пульт 2.0, шторка «Карточка клиента» (шапка, оборот, вкладки, сделки, история, антифрод): только токены, классы cd-.
   Стили диалога и правок: dialog.css. Раскладка и размеры из концепта design/pult-v2/css/screens/card.css. */

.cd-head { padding: 14px 14px 12px 18px; gap: 10px; }
.cd-head-ic { width: 36px; height: 36px; border-radius: 12px; background: var(--inverse); color: var(--accent); }
:root[data-theme="dark"] .cd-head-ic { color: var(--inverse-ink); }
.cd-head .icon-btn[disabled] { opacity: .35; pointer-events: none; }
.cd-body { padding: 22px 24px 76px; } /* внизу место под плавающие стрелки: блок «Ответить можно в разделе Чаты» не уходит под них */
.cd-totop { position: absolute; right: 18px; bottom: 18px; z-index: 5; width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: var(--inverse); color: var(--inverse-ink); box-shadow: var(--sh-2); }
.cd-totop[hidden] { display: none; }
/* «К последнему сообщению» посередине снизу (card-4.js), как в Telegram; справа вверх к шапке и обратно */
.cd-tobot { position: absolute; left: 50%; bottom: 18px; z-index: 5; transform: translateX(-50%); width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: var(--surface); color: var(--ink); box-shadow: var(--sh-2), 0 0 0 1px var(--line-2); }
.cd-tobot[hidden] { display: none; }
.cd-tobot .ic { width: 18px; height: 18px; }
.cd-bot { margin-top: 10px; }
.cd-bot:empty { display: none; }
.cd-bot .bot-chip { margin-left: 0; }
/* шторка открыта: все анимации экрана под размытым фоном стоят (метки live, сирена, дыхание, спиннеры), иначе фон шторки перерисовывается каждый кадр; сама шторка живёт в #layer и не затронута */
.cd-open #app *, .cd-open #app *::before, .cd-open #app *::after { animation-play-state: paused !important; }
/* шторка и фон после появления остаются обычными слоями: заливка «both» держала их анимируемыми, прокручиваемый внутри слой с липкими датами в Safari мерцал */
.cd-drawer, .cd-open .scrim { animation-fill-mode: backwards; }
.cd-lk { color: var(--ink); font-weight: 500; border-bottom: 1px dashed var(--ink-4); transition: border-color var(--dur-1); }
.cd-lk:hover { border-bottom-color: var(--ink); }
.cd-ed { display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 8px; color: var(--ink-3); transition: background var(--dur-1), color var(--dur-1); }
.cd-ed:hover { background: var(--surface-3); color: var(--ink); }
.cd-ed .ic { width: 13px; height: 13px; }

/* шапка клиента */
.cd-top { display: flex; gap: 18px; align-items: flex-start; }
.cd-ava { position: relative; flex: none; border-radius: 50%; padding: 5px; background: var(--line-2); }
.cd-top .cd-ava .ava { box-shadow: 0 0 0 3px var(--surface); }
.cd-ava.seg-vip { background: var(--violet); }
.cd-ava.seg-regular { background: var(--pos); }
.cd-ava.seg-new { background: var(--info); }
.cd-ava.seg-risk { background: var(--neg); }
.cd-photo { cursor: zoom-in; }
.cd-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cd-ava-star { position: absolute; right: -4px; bottom: -2px; width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; background: var(--accent); color: var(--accent-ink); box-shadow: 0 0 0 3px var(--surface); }
.cd-ava-star .ic { width: 14px; height: 14px; fill: currentColor; }
.cd-idm { min-width: 0; flex: 1; }
.cd-namerow { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.cd-name { font: 500 28px/1.1 var(--f-display); letter-spacing: -.035em; overflow-wrap: anywhere; }
.cd-nsub { margin-top: 3px; }
.cd-bdgs { display: inline-flex; gap: 4px; }
.cd-bdg { width: 24px; height: 24px; border-radius: 8px; display: grid; place-items: center; background: var(--accent-soft); color: var(--accent-text); }
.cd-bdg .ic { width: 14px; height: 14px; }
.cd-handles { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.cd-hd { display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 4px 0 12px; border-radius: var(--r-pill); background: var(--surface-2); font-size: var(--t-sm); white-space: nowrap; }
.cd-hd b { font-weight: 600; }
.cd-hd .mono { font-size: 12.5px; }
.cd-hd.cd-was { padding: 0 12px 0 10px; color: var(--violet); background: var(--violet-soft); font-size: var(--t-xs); font-weight: 500; }
.cd-hd.cd-was .ic { width: 13px; height: 13px; }
.cd-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.cd-tags .chip.btnish { cursor: pointer; }
.cd-meta { display: flex; flex-wrap: wrap; gap: 8px 18px; margin-top: 12px; font-size: var(--t-sm); color: var(--ink); }
.cd-meta > span { display: inline-flex; align-items: center; gap: 6px; }
.cd-meta .faint { margin-right: 1px; }
.cd-meta .ic { width: 15px; height: 15px; color: var(--ink-3); }
.cd-meta .ava.sm { width: 22px; height: 22px; font-size: 9px; }
.cd-mk { display: inline-flex; align-items: center; gap: 5px; }
.cd-mk + .cd-mk { margin-left: 6px; }
.cd-meta .cd-ed .ic { width: 13px; height: 13px; }
.cd-src { margin-top: 8px; display: grid; gap: 4px; }
.cd-srow { display: flex; align-items: center; flex-wrap: wrap; gap: 5px 6px; font-size: var(--t-sm); }
.cd-srow > .ic { width: 15px; height: 15px; color: var(--ink-3); }
.cd-views { display: flex; align-items: center; flex-wrap: wrap; gap: 5px; margin-top: 8px; }
.cd-views .ic { width: 13px; height: 13px; }

/* правка источника и рынка */
.cd-edit-box { display: grid; gap: 10px; margin-top: 10px; padding: 12px; border-radius: var(--r-md); background: var(--surface-2); }
.cd-erow { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
.cd-sel { width: auto; height: 34px; padding: 0 32px 0 12px; border-radius: var(--r-pill); font-size: var(--t-sm); background-color: var(--surface); border-color: var(--line-2); }
.cd-in { height: 34px; border-radius: var(--r-pill); font-size: var(--t-sm); background: var(--surface); border-color: var(--line-2); }
.cd-refw { display: inline-flex; align-items: center; flex-wrap: wrap; gap: 6px; flex: 1; min-width: 200px; }
.cd-refw[hidden] { display: none; }
.cd-refw .cd-in { flex: 1; min-width: 160px; }
.cd-sug { display: inline-flex; flex-wrap: wrap; gap: 4px; }
.cd-opts { display: flex; flex-wrap: wrap; gap: 6px 14px; }
.cd-opt { display: inline-flex; align-items: center; gap: 6px; font-size: var(--t-sm); cursor: pointer; }
.cd-opt input { accent-color: var(--ink); width: 15px; height: 15px; }

.cd-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 18px; }
.cd-actions .btn.accent .ic { fill: currentColor; }

/* оборот + колонка итогов (как Balance overview у ACRU) */
.cd-ov { display: grid; grid-template-columns: minmax(0, 1fr) 236px; margin-top: 22px; border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; }
.cd-ov-chart { padding: 18px 18px 8px; min-width: 0; display: flex; flex-direction: column; }
.cd-ov-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; flex-wrap: wrap; }
.cd-big { font: 500 36px/1.05 var(--f-display); letter-spacing: -.04em; margin-top: 4px; white-space: nowrap; }
.cd-ov-30 { text-align: right; display: flex; flex-direction: column; align-items: flex-end; gap: 4px; }
.cd-30v { font: 500 20px/1 var(--f-display); letter-spacing: -.03em; }
.cd-chart.chart { flex: 1 1 0; height: auto; min-height: 200px; margin-top: 6px; }
.cd-ov0 { display: flex; align-items: center; gap: 14px; margin-top: 18px; padding: 14px 16px; border-radius: var(--r-lg); border: 1px solid var(--line); background: var(--surface-2); }
.cd-ov0 .ico-tile { width: 40px; height: 40px; border-radius: 13px; background: var(--surface); }
.cd-ov0 .chip.btnish { cursor: pointer; }
.cd-nochart { flex: 1; min-height: 120px; display: flex; align-items: center; justify-content: center; gap: 8px; color: var(--ink-3); font-size: var(--t-sm); }
.cd-ov-side { display: flex; flex-direction: column; background: var(--surface-2); border-left: 1px solid var(--line); }
.cd-st { position: relative; flex: 1; padding: 10px 18px; display: flex; flex-direction: column; justify-content: center; }
.cd-st + .cd-st { border-top: 1px solid var(--line); }
.cd-st-l { font-size: var(--t-xs); color: var(--ink-3); }
.cd-st-v { font: 500 20px/1.15 var(--f-display); letter-spacing: -.03em; margin-top: 3px; white-space: nowrap; font-variant-numeric: tabular-nums; }
.cd-st-v .unit { font-size: 11px; vertical-align: .3em; }
.cd-st-s { font-size: var(--t-xs); color: var(--ink-3); margin-top: 2px; }
.cd-st-g { position: absolute; right: 14px; top: 50%; transform: translateY(-50%); width: 34px; height: 34px; display: grid; place-items: center; border-radius: 11px; transition: filter var(--dur-1); }
.cd-st-g .ic { width: 17px; height: 17px; }
.cd-st-g.pos { background: var(--pos-soft); color: var(--pos); }
.cd-st-g.neg { background: var(--neg-soft); color: var(--neg); }
.cd-st-g:hover { filter: brightness(.96); }
.legend .sw.cd-sw-acc { background: var(--accent); }

/* вкладки */
.cd-tabsbar { display: flex; align-items: center; justify-content: space-between; gap: 10px 16px; flex-wrap: wrap; margin: 22px 0 14px; scroll-margin-top: 10px; }
.cd-tabs-w { position: relative; min-width: 0; max-width: 100%; }
.cd-tabs-w.more { -webkit-mask-image: linear-gradient(90deg, black 82%, transparent); mask-image: linear-gradient(90deg, black 82%, transparent); }
.cd-tabs { min-width: 0; }
.cd-tabs button { height: 38px; padding: 0 14px; font-size: var(--t-sm); gap: 7px; background: var(--surface-2); }
.cd-tabs button .ic { width: 16px; height: 16px; }
.cd-tabs button[aria-pressed="true"] .ic { color: var(--accent); }
:root[data-theme="dark"] .cd-tabs button[aria-pressed="true"] .ic { color: var(--inverse-ink); }
.cd-tabs button[aria-pressed="true"] .badge { background: var(--accent); color: var(--accent-ink); }
.cd-tabs button[aria-pressed="true"] .badge.neg { background: var(--neg); color: var(--surface); }
.cd-accs { display: flex; align-items: center; gap: 8px; }
.cd-accs[hidden] { display: none; }
/* fill-mode backwards: после анимации на панели не остаётся transform, иначе он становится опорой для position: fixed (календарь диалога) */
.cd-pane { min-height: 220px; animation: pop-fade var(--dur-2) var(--ease) backwards; }
.cd-sec-h { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin: 4px 2px 10px; }
.cd-sec-h > span { display: inline-flex; align-items: center; gap: 5px; }
.cd-note { margin: 10px 2px 0; }

/* сделки */
.cd-filters .select.cd-sel { max-width: 220px; }
.cd-deals td { height: 54px; padding: 0 10px; }
.cd-deals th { padding: 0 10px; height: 36px; font-size: var(--t-xs); }
.cd-deals tr.cd-dl { cursor: pointer; }
.cd-deals tr.cd-dl.open { background: var(--surface-2); }
.cd-dir { display: inline-flex; align-items: center; gap: 5px; font-size: var(--t-sm); }
.cd-dir b { font-weight: 600; }
.cd-dir .ic { width: 13px; height: 13px; color: var(--ink-3); }
.cd-amt { font-weight: 500; }
.cd-cur { margin-left: 4px; font-size: var(--t-xs); color: var(--ink-3); font-weight: 500; }
.cd-mg { display: flex; align-items: center; gap: 7px; }
.cd-mg .ava.sm { width: 24px; height: 24px; font-size: 9.5px; }
.cd-mg.guess .ava { outline: 1px dashed var(--ink-3); outline-offset: 2px; }
.cd-mi { font-size: 15px; line-height: 1; cursor: default; }
.cd-ph { display: none; }
.cd-more { display: flex; justify-content: center; margin-top: 10px; }
.cd-req td { color: var(--ink-2); background: var(--surface-2); }
.cd-req .cd-amt { font-weight: 400; }
.cd-svc, .cd-bd { display: inline-flex; align-items: center; justify-content: center; min-width: 16px; height: 16px; padding: 0 4px; margin-right: 4px; border-radius: 5px; font: 700 10px/1 var(--f-ui); font-style: normal; background: var(--surface-3); color: var(--ink-2); vertical-align: 1px; cursor: help; }
.cd-svc.s-P { background: var(--c-4); color: var(--accent-ink); }
.cd-svc.s-A { background: var(--c-5); color: var(--accent-ink); }
.cd-svc.s-Y { background: var(--warn-soft); color: var(--warn); }
.cd-svc.s-W { background: var(--c-6); color: var(--accent-ink); }
.cd-bd { font-weight: 600; background: transparent; box-shadow: inset 0 0 0 1px var(--line-2); }
.cd-bd .ic { width: 10px; height: 10px; }
.cd-bd.weak { color: var(--warn); box-shadow: inset 0 0 0 1px var(--warn); }
.cd-bd.bot { color: var(--info); box-shadow: inset 0 0 0 1px var(--info); }
.cd-more-row td { height: auto; padding: 0 10px 12px; background: var(--surface-2); white-space: normal; }
.cd-dd { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 8px 22px; padding: 4px 0 2px; }
.cd-d1 { display: flex; justify-content: space-between; gap: 12px; padding: 6px 0; border-bottom: 1px solid var(--line); font-size: var(--t-sm); min-width: 0; }
.cd-d1 .k { color: var(--ink-3); flex: none; }
.cd-d1 .v { font-weight: 500; text-align: right; overflow-wrap: anywhere; }
.cd-i { display: inline-grid; place-items: center; width: 14px; height: 14px; margin-left: 5px; border-radius: 50%; background: var(--surface-3); color: var(--ink-3); font: 600 9px/1 var(--f-ui); font-style: normal; cursor: help; vertical-align: 1px; }

.cd-pics { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 6px; margin: 0 2px 18px; }
.cd-pics figure { margin: 0; display: grid; justify-items: center; gap: 4px; }
.cd-ph-i { width: 56px; height: 56px; border-radius: 50%; overflow: hidden; display: grid; place-items: center; background: var(--surface-3); color: var(--ink-3); font-size: 9px; text-align: center; padding: 0; cursor: zoom-in; }
.cd-ph-i.none { cursor: default; }
.cd-ph-i img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cd-parr { color: var(--ink-4); margin: 0 2px 16px; }
.cd-parr .ic { width: 14px; height: 14px; }

.cd-flags { margin-bottom: 18px; }
.cd-flags .li.off { opacity: .7; }
.cd-flags .ico-tile { width: 34px; height: 34px; border-radius: 11px; }
.cd-flags .li-title { white-space: normal; }
.cd-sim { margin-bottom: 18px; }
.cd-sim .li.click { margin: 0 -8px; padding: 9px 8px; }
.cd-sim .li-title { white-space: normal; }

/* телефон: шторка во всю ширину, блоки в столбик */
@media (max-width: 720px) {
  .cd-body { padding: 16px 14px 28px; }
  .cd-head { padding: 12px 10px 10px 14px; }
  .cd-top { display: flow-root; } /* аудит 19.10, п. 9: аватар слева обтекается именем и метками, остальные строки шапки идут на всю ширину (раньше вся шапка стояла колонкой справа, слева под аватаром оставалась пустая полоса на высоту экрана) */
  .cd-ava { float: left; margin: 0 14px 6px 0; }
  .cd-st { justify-content: flex-start; } /* подписи «Профит» и «Последняя сделка» на одной высоте */
  .cd-ava .ava.xl { width: 56px; height: 56px; font-size: 18px; }
  .cd-name { font-size: 23px; }
  .cd-meta { gap: 6px 14px; }
  .cd-actions .btn { flex: 1 1 auto; }
  .cd-ov { grid-template-columns: 1fr; }
  .cd-ov0 { flex-wrap: wrap; }
  .cd-ov0 .grow { flex: 1 1 180px; }
  .cd-ov-side { border-left: 0; border-top: 1px solid var(--line); display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } /* minmax(0, ...): длинный сигнал бота (chart-month.js, .cm-sig) не растягивает колонку и всю карточку, обрезается многоточием */
  .cd-st { border-top: 0 !important; border-bottom: 1px solid var(--line); }
  .cd-st:nth-child(odd) { border-right: 1px solid var(--line); }
  .cd-st:last-child { grid-column: span 2; border-bottom: 0; border-right: 0; }
  .cd-st:last-child:nth-child(even) { grid-column: auto; } /* у менеджера плиток четыре (строки «Профит» нет): последняя не растягивается, в сетке 2x2 нет дыры (L-35) */
  .cd-st:nth-last-child(2):nth-child(odd) { border-bottom: 0; }
  .cd-big { font-size: 30px; }
  .cd-tabsbar { margin: 18px -14px 12px; padding: 0 14px; }
  .cd-tabs-w { width: 100%; }
  .cd-tabs { width: 100%; }
  .cd-accs { width: 100%; }
  /* сделки на телефоне: карточка в три строки, все поля видны без прокрутки вбок */
  .cd-deals-wrap { overflow: visible; }
  .cd-deals, .cd-deals tbody { display: block; width: 100%; }
  .cd-deals thead { display: none; }
  .cd-deals tbody tr { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "dir st" "in out" "date rate"; gap: 4px 10px; padding: 11px 2px; border-bottom: 1px solid var(--line); }
  .cd-deals tbody tr:last-child { border-bottom: 0; }
  .cd-deals tbody tr.cd-more-row { display: block; padding: 0 6px 10px; }
  .tbl.cd-deals tbody td, .tbl.cd-deals tbody td.r { height: auto; padding: 0; border: 0; text-align: left; }
  .tbl.cd-deals tbody .cd-more-row td { padding: 0; }
  .cd-deals .cd-c-dir { grid-area: dir; display: flex; align-items: center; gap: 8px; }
  .cd-deals .cd-c-st { grid-area: st; justify-self: end; }
  .cd-deals .cd-c-in { grid-area: in; }
  .cd-deals .cd-c-out { grid-area: out; justify-self: end; display: flex; align-items: center; gap: 4px; }
  .cd-deals .cd-c-date { grid-area: date; display: flex; align-items: center; gap: 6px; font-size: var(--t-xs); color: var(--ink-3); }
  .cd-deals .cd-c-rate { grid-area: rate; justify-self: end; display: flex; align-items: baseline; gap: 4px; font-size: var(--t-xs); color: var(--ink-3); }
  .cd-deals .cd-c-mg { display: none; }
  .cd-deals .sub { display: inline; margin: 0 0 0 6px; }
  .cd-deals .cd-c-date .sub, .cd-deals .cd-c-rate .sub { margin: 0; }
  .cd-deals .cd-c-rate .sub { display: none; }
  .cd-deals .cd-c-dir .sub { margin: 0; }
  .cd-deals .cd-c-out .ic { width: 13px; height: 13px; color: var(--ink-3); }
  .cd-req td { background: transparent; }
  .cd-deals tbody tr.cd-req { background: var(--surface-2); border-radius: 12px; padding: 11px 8px; }
  .cd-ph { display: inline-flex; }
  .cd-dd { grid-template-columns: 1fr; }
}
/* Пульт 2.0, карточка клиента, правки владельца 08.10: «Назад» в шапке и «Открыть в чатах» с кругляшом Telegram (card-9.js),
   «Антифрод» одной сводкой (card-10.js), окно ответа LOLS (card-5.js), «История» лентой (card-11.js), выбор валют сделки и
   запроса (card-12.js). Оборот «не посчитан» без курса (card-turnover.js, владелец 08.10). Только токены. */

/* шапка: «Назад» в прошлую карточку, ряд действий */
.cd-back { flex: none; }
.cd-back .ic { width: 16px; height: 16px; }
.cd-tgb { flex: none; color: var(--info); }
.cd-tgb:hover { border-color: var(--info); background: var(--info-soft); }
.cd-tgi { width: 20px; height: 20px; }
@media (max-width: 720px) { .cd-actions .btn.icon-only { flex: none; } }

/* валюты сделки и запроса: «или» у запроса, жёлтая «указать», карандаш у строки */
.cd-or { font-style: normal; color: var(--ink-4); margin: 0 1px; }
.cd-cq { display: inline-flex; align-items: center; gap: 5px; padding: 3px 9px; border-radius: var(--r-pill); border: 1px dashed var(--warn); background: var(--warn-soft); color: var(--ink); font-size: var(--t-sm); cursor: pointer; }
.cd-cq:hover { border-style: solid; }
.cd-cq > span { font-size: var(--t-xs); font-weight: 600; color: var(--warn); margin-left: 2px; }
.cd-cqe { width: 22px; height: 22px; margin-left: 2px; opacity: .45; }
.cd-deals tr:hover .cd-cqe, .cd-cqe:focus-visible { opacity: 1; }
.cd-deals tr.hit td { background: var(--accent-soft); }
.pop.cdc { width: min(420px, calc(100vw - 16px)); padding: 12px; }
.cdc-f { display: grid; gap: 10px; }
.cdc-f .menu-label { padding: 0; }
.cdc-g { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.cdc-l { display: grid; gap: 4px; min-width: 0; }
.cdc-l .cd-sel { width: 100%; max-width: none; }
.cdc-alts { display: flex; flex-wrap: wrap; gap: 5px; }
.cdc-alts .chip { cursor: pointer; }
.cdc-alts .chip[aria-pressed="true"] { background: var(--inverse); color: var(--inverse-ink); }
.cdc-alts .chip[disabled] { opacity: .35; cursor: default; }
@media (pointer: coarse) { .cd-cqe { opacity: 1; width: 30px; height: 30px; } }

/* «Антифрод»: верхняя строка, сводка «что известно» (точка цвета, подпись, значение, откуда) */
.af-top { display: flex; align-items: center; flex-wrap: wrap; gap: 12px 14px; padding: 14px 16px; margin-bottom: 18px; border-radius: var(--r-lg); background: var(--surface-2); }
.af-ic { width: 44px; height: 44px; border-radius: 14px; flex: none; }
.af-ic .ic { width: 22px; height: 22px; }
.af-tt { flex: 1 1 180px; min-width: 0; display: grid; gap: 3px; }
.af-h { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; font: 500 19px/1.25 var(--f-display); letter-spacing: -.02em; }
.af-acts { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; }
.af-id { height: 34px; }
.af-sum { display: grid; margin-bottom: 18px; border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; }
.af-r { display: grid; grid-template-columns: 8px 160px minmax(0, 1fr) auto; grid-template-areas: "d k v s"; align-items: center; gap: 4px 12px; width: 100%; padding: 10px 14px; text-align: left; font-size: var(--t-sm); color: var(--ink); background: var(--surface); }
.af-r + .af-r { border-top: 1px solid var(--line); }
button.af-r { cursor: pointer; transition: background var(--dur-1); }
button.af-r:hover { background: var(--surface-2); }
.af-d { grid-area: d; width: 8px; height: 8px; border-radius: 50%; background: var(--line-2); }
.af-r.t-pos .af-d { background: var(--pos); }
.af-r.t-warn .af-d { background: var(--warn); }
.af-r.t-neg .af-d { background: var(--neg); }
.af-r.t-warn { background: color-mix(in srgb, var(--warn-soft) 55%, var(--surface)); }
.af-r.t-neg { background: color-mix(in srgb, var(--neg-soft) 70%, var(--surface)); }
.af-k { grid-area: k; color: var(--ink-3); }
.af-v { grid-area: v; min-width: 0; font-weight: 500; line-height: 1.45; overflow-wrap: anywhere; }
.af-v small { display: block; margin-top: 1px; font-size: var(--t-xs); font-weight: 400; color: var(--ink-3); }
.af-v .chip { vertical-align: 1px; margin-right: 2px; }
.af-r.t-neg .af-v { color: var(--neg); }
.af-s { grid-area: s; display: flex; gap: 4px; justify-self: end; }
.af-s em { padding: 2px 7px; border-radius: var(--r-pill); background: var(--surface-3); color: var(--ink-3); font: 600 11px/1.3 var(--f-ui); font-style: normal; white-space: nowrap; }
@media (max-width: 560px) {
  .af-r { grid-template-columns: 8px minmax(0, 1fr) auto; grid-template-areas: "d k s" ". v v"; padding: 10px 12px; }
  .af-acts { width: 100%; }
}

/* окно «Ответ LOLS» поверх шторки: текст бота документом, а не терминалом */
.lw { position: fixed; inset: 0; z-index: 76; display: grid; place-items: center; padding: 16px; background: var(--scrim); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); animation: fade var(--dur-2) var(--ease) both; }
.lw-box { width: min(560px, 100%); max-height: min(82vh, 760px); display: flex; flex-direction: column; overflow: hidden; border-radius: var(--r-xl); background: var(--surface); box-shadow: var(--sh-2); animation: pop-fade var(--dur-2) var(--ease) backwards; }
.lw-h { display: flex; align-items: center; gap: 12px; padding: 14px 14px 12px 18px; border-bottom: 1px solid var(--line); }
.lw-h .ico-tile { width: 36px; height: 36px; border-radius: 12px; }
.lw-in { display: grid; gap: 10px; min-height: 0; padding: 14px 18px 18px; overflow: auto; overscroll-behavior: contain; }
.lw-tabs .seg { flex-wrap: wrap; }
.lw-doc { display: grid; gap: 2px; padding: 14px 16px; border-radius: var(--r-md); background: var(--surface-2); font-size: var(--t-body); line-height: 1.5; overflow-wrap: anywhere; }
.lw-t { margin-bottom: 6px; font: 500 17px/1.3 var(--f-display); letter-spacing: -.01em; }
.lw-kv { display: grid; grid-template-columns: minmax(110px, 38%) minmax(0, 1fr); gap: 12px; padding: 6px 0; border-bottom: 1px solid var(--line); }
.lw-kv:last-child { border-bottom: 0; }
.lw-kv span { color: var(--ink-3); }
.lw-kv b, .lw-p b, .lw-li b { font-weight: 600; }
.lw-kv > b { font-weight: 500; }
.lw-sh { margin-top: 10px; font-weight: 600; }
.lw-li { position: relative; padding: 2px 0 2px 18px; }
.lw-li::before { content: ""; position: absolute; left: 5px; top: .72em; width: 5px; height: 5px; border-radius: 50%; background: var(--ink-4); }
.lw-gap { height: 6px; }
.lw-f { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px; }
.lw-f a { display: inline-flex; align-items: center; gap: 5px; }

/* «История»: месяц, строка события (дата, значок, что было, переход) */
.hx { display: grid; }
.hx-seg { max-width: 100%; overflow-x: auto; scrollbar-width: none; }
.hx-seg::-webkit-scrollbar { display: none; }
.hx-m { padding: 14px 2px 6px; border-bottom: 1px solid var(--line); font-size: var(--t-xs); font-weight: 600; color: var(--ink-3); }
.hx-m:first-child { padding-top: 2px; }
.hx-i { display: grid; grid-template-columns: 62px 30px minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 9px 2px; border-bottom: 1px solid var(--line); }
.hx-dt { display: grid; font-size: var(--t-sm); font-weight: 500; line-height: 1.2; white-space: nowrap; }
.hx-dt small { font-size: var(--t-xs); font-weight: 400; color: var(--ink-4); }
.hx-ic { width: 30px; height: 30px; display: grid; place-items: center; border-radius: 10px; background: var(--surface-2); color: var(--ink-2); font-style: normal; }
.hx-ic .ic { width: 15px; height: 15px; }
.hx-ic.pos { background: var(--pos-soft); color: var(--pos); }
.hx-ic.neg { background: var(--neg-soft); color: var(--neg); }
.hx-ic.warn { background: var(--warn-soft); color: var(--warn); }
.hx-ic.info { background: var(--info-soft); color: var(--info); }
.hx-ic.violet { background: var(--violet-soft); color: var(--violet); }
.hx-b { min-width: 0; }
.hx-t { font-size: var(--t-sm); font-weight: 500; overflow-wrap: anywhere; }
.hx-s { margin-top: 1px; font-size: var(--t-xs); color: var(--ink-3); overflow-wrap: anywhere; }
.hx-go { display: inline-flex; align-items: center; gap: 4px; height: 28px; padding: 0 10px; border-radius: var(--r-pill); background: var(--surface-2); color: var(--ink-2); font-size: var(--t-xs); font-weight: 500; white-space: nowrap; transition: background var(--dur-1), color var(--dur-1); }
.hx-go:hover { background: var(--surface-3); color: var(--ink); }
.hx-go .ic { width: 13px; height: 13px; }
@media (max-width: 560px) {
  .hx-i { grid-template-columns: 58px 28px minmax(0, 1fr); gap: 4px 8px; }
  .hx-go { grid-column: 3; justify-self: start; }
}
@media (pointer: coarse) { .hx-go { height: 34px; } }
/* оборот без курса: не крупная цифра, а короткое «не посчитан» */
.cd-big.na { font-size: 22px; line-height: 1.3; letter-spacing: -.02em; color: var(--ink-3); }
/* Карточка клиента (часть 13, владелец 08.10): аватар и имя ведут в чат, «поменять имена» на строке под именем, кнопки шапки под палец.
   Разметка и логика: js/screens/card-link.js, card.js. Цвета и сроки только токены. */
.cd-ava[data-cd-chats] { cursor: pointer; transition: box-shadow var(--dur-1); }
.cd-ava[data-cd-chats]:hover { box-shadow: 0 0 0 3px var(--accent-soft); }
.cd-name .cd-go { cursor: pointer; text-decoration: underline transparent 2px; text-underline-offset: 6px; transition: text-decoration-color var(--dur-1); }
.cd-name .cd-go:hover { text-decoration-color: var(--accent); }
.cd-nsub.cd-sw { display: inline-flex; align-items: center; gap: 5px; cursor: pointer; }
.cd-nsub.cd-sw:hover { color: var(--ink-2); }
.cd-nsub .ic { width: 12px; height: 12px; }
@media (prefers-reduced-motion: reduce) { .cd-ava[data-cd-chats], .cd-name .cd-go { transition: none; } }
/* палец: кнопки шапки по виду те же, область нажатия 40 px (соседи на расстоянии 10 px, не перекрываются) */
@media (pointer: coarse) { .cd-head .icon-btn.sm::after { content: ""; position: absolute; inset: -4px; } }
/* Карточка клиента (часть 17, владелец 08.10): ниже блока профиля в шапке вместо значка и «Карточка клиента» маленький аватар и имя
   (js/screens/card-head.js). Раскладка не меняется: аватар встаёт ровно на место значка (или после кнопки «Назад»), меняется только
   прозрачность и сдвиг на 6 px. Цвета и сроки только токены. */
.cd-head > .grow { position: relative; }
.cd-hnm { position: absolute; inset: 0; display: flex; align-items: center; gap: 8px; min-width: 0; opacity: 0; transform: translateY(6px); pointer-events: none; }
.cd-hnm .ava { width: 28px; height: 28px; font-size: 11px; }
.cd-hnm .ava img { grid-area: 1 / 1; width: 100%; height: 100%; object-fit: cover; display: block; }
.cd-hnm-t { flex: 1; min-width: 0; font: 600 var(--t-h3)/1.3 var(--f-ui); letter-spacing: -.01em; }
/* вместо значка (нет кнопки «Назад»): аватар того же размера строго на месте значка, имя там, где было «Карточка клиента» */
.cd-head:has(> .cd-head-ic) .cd-hnm { left: -46px; gap: 10px; }
.cd-head:has(> .cd-head-ic) .cd-hnm .ava { width: 36px; height: 36px; font-size: 13px; }
.cd-head > .cd-head-ic, .cd-head > .grow > :not(.cd-hnm), .cd-hnm { transition: opacity var(--dur-2) var(--ease), transform var(--dur-2) var(--ease); }
.cd-head[data-cdn="1"] > .cd-head-ic { opacity: 0; }
.cd-head[data-cdn="1"] > .grow > :not(.cd-hnm) { opacity: 0; transform: translateY(-6px); }
.cd-head[data-cdn="1"] .cd-hnm { opacity: 1; transform: none; }
/* с кнопкой «Назад» (стек карточек, card-9.js) имени не хватает места: подпись «Назад» сворачивается до стрелки (как у кнопки-значка 34 px), имя получает ширину */
.cd-head .cd-back { transition: padding var(--dur-2) var(--ease), gap var(--dur-2) var(--ease), border-color var(--dur-1); }
.cd-head .cd-back span { display: inline-block; max-width: 64px; overflow: hidden; transition: max-width var(--dur-2) var(--ease), opacity var(--dur-2) var(--ease); }
.cd-head[data-cdn="1"] .cd-back { gap: 0; padding: 0 9px; }
.cd-head[data-cdn="1"] .cd-back span { max-width: 0; opacity: 0; }
@media (prefers-reduced-motion: reduce) { .cd-head > .cd-head-ic, .cd-head > .grow > :not(.cd-hnm), .cd-hnm, .cd-head .cd-back, .cd-head .cd-back span { transition: none; } }
/* Панель 2.0: галерея «Фото профиля» в карточке клиента и просмотр (js/screens/card-photos.js, волна 21, владелец 17.10). Только токены темы (светлая и тёмная), ничего не движется.
   .pg: секция во вкладке «История»; .pg-g: сетка миниатюр (поверх .cd-pics); .pg-t: нажимаемая миниатюра 96 px; .pg-i.gone: пропавшее фото (приглушено, подпись красным);
   Сам просмотр фото (затемнение, стрелки, подпись) с волны 22 общий: css/screens/viewer.css. */
.pg { margin: 0 2px 18px; }
.pg .cd-sec-h { margin-bottom: 8px; }
.pg-g { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 12px; margin: 0; }
.pg-g figure { margin: 0; display: grid; justify-items: start; gap: 4px; width: 96px; }
.pg-g figcaption { display: grid; gap: 2px; width: 100%; overflow-wrap: anywhere; }
.pg-t { position: relative; width: 96px; height: 96px; padding: 0; border-radius: var(--r-md); overflow: hidden; display: grid; place-items: center; background: var(--surface-3); color: var(--ink-3); cursor: zoom-in; }
.pg-t img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pg-i.cur .pg-t { box-shadow: 0 0 0 2px var(--accent); }
.pg-i.gone .pg-t img { opacity: 0.55; }
.pg-del { color: var(--neg); font-size: var(--t-xs); }
.pg-vid { position: absolute; right: 4px; bottom: 4px; display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: var(--surface); color: var(--ink); }
.pg-vid .ic { width: 16px; height: 16px; }
.pg-why { display: flex; align-items: center; gap: 8px; margin: 0 0 12px; max-width: 70ch; }
.pg-why .ic { flex: none; width: 16px; height: 16px; }
.pg-n { position: absolute; right: -2px; bottom: -2px; min-width: 20px; height: 20px; padding: 0 5px; border-radius: 10px; display: grid; place-items: center; background: var(--accent); color: var(--accent-ink); font-size: var(--t-xs); }
.cd-ava { position: relative; }
.pg-bad { display: inline-flex; align-items: center; gap: 6px; color: var(--neg); }
@media (max-width: 560px) { .pg-g { gap: 8px; } }
/* Панель 2.0: строка «Общие группы: N» в шапке карточки и окно «Общие группы» (js/screens/card-common.js, волна 22, владелец 18.10). Строка на .cd-views.cv-open (cardviews.css),
   окно на .lw (card-2.css), список групп рисует mpanel-2.js (.mpn-cg*, mpanel.css). Только токены темы, ничего не движется. */
.cd-cg { color: var(--ink-2); font-size: var(--t-sm); }
.cd-cg[hidden] { display: none; }
.cd-cg .ic { width: 15px; height: 15px; }
.cd-cg .ic:last-child { color: var(--ink-4); }
.cg-box { width: min(520px, 100%); }
.cg-win .mpn-tabs { display: none; }
.cg-win .mpn-top { margin-bottom: 4px; }
.cg-win .mpn-top:empty { display: none; }
/* телефон: зона нажатия строки не меньше 40 px */
@media (pointer: coarse) { .cd-cg { min-height: 40px; } }
/* Выбор месяца на диаграмме оборота карточки клиента (владелец 09.10, js/screens/chart-month.js). Выбранный месяц: слева сверху его оборот
   и кнопка «Весь период», справа его цифры на тех же плитках, остальные столбцы приглушены (это делает график). Раскладка не прыгает:
   строка подписи всегда одной высоты, подпись сигнала в одну строку с многоточием (весь текст в подсказке). */
.cd-ov-head > div:first-child > .t-sm:first-child { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 8px; min-height: 24px; }
.cm-all { position: relative; }
.cm-all::after { content: ""; position: absolute; inset: -8px; } /* крупнее зона нажатия пальцем, раскладку не двигает */
.cd-chart[tabindex] { border-radius: var(--r-md); }
.cd-ov-side.cm-on { box-shadow: inset 2px 0 0 var(--accent); }
.cd-ov-side .cd-st-v .cd-lk { font: inherit; letter-spacing: inherit; cursor: pointer; }
.cd-ov-side .cd-st-v button.cd-lk { background: none; border-width: 0 0 1px; padding: 0; }
.cm-sig { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding-right: 36px; }
@media (max-width: 720px) {
  .cm-all span { display: none; } /* на телефоне только крестик: подпись с кнопкой не должна сдвигать «последние 30 дней» вниз */
  .cm-all { padding-inline: 6px; }
  .cd-ov-side.cm-on { box-shadow: inset 0 2px 0 var(--accent); }
  .cm-sig { padding-right: 44px; }
}
/* Пульт 2.0, карточка клиента: «Ники» в истории и «Кто сейчас на нике» (card-14.js, card-15.js), подпись «узнали сами» (card-18.js), владелец 08.10 */
.nk-box { margin-bottom: 16px; }
.nk-i { align-items: flex-start; }
.nk-i .ico-tile { flex: none; }
.nk-sub { display: flex; align-items: center; flex-wrap: wrap; gap: 2px 8px; margin-top: 2px; font-size: var(--t-sm); color: var(--ink-3); overflow-wrap: anywhere; }
.nk-src { display: inline-flex; gap: 4px; }
.nk-src em { padding: 2px 7px; border-radius: var(--r-pill); background: var(--surface-3); color: var(--ink-3); font: 600 11px/1.3 var(--f-ui); font-style: normal; white-space: nowrap; }
.nk-res { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 8px; margin-top: 6px; }
.nk-res:empty { display: none; }
.nk-r { display: inline-flex; align-items: flex-start; gap: 5px; padding: 3px 10px; border-radius: var(--r-pill); background: var(--surface-3); color: var(--ink-2); font-size: var(--t-sm); font-weight: 600; line-height: 1.35; overflow-wrap: anywhere; }
.nk-r .ic { width: 14px; height: 14px; flex: none; margin-top: 2px; }
.nk-r.ok { background: var(--pos-soft); color: var(--pos); }
.nk-r.warn { background: var(--warn-soft); color: var(--warn); }
.nk-r.neg { background: var(--neg-soft); color: var(--neg); }
.nk-r.wait .ic { animation: cd-ph-spin 1s linear infinite; }
.nk-old { flex-basis: 100%; font-size: var(--t-xs); color: var(--ink-4); }
.nk-b { display: inline-flex; align-items: center; gap: 4px; height: 28px; padding: 0 10px; border-radius: var(--r-pill); background: var(--surface-2); color: var(--ink-2); font-size: var(--t-xs); font-weight: 500; white-space: nowrap; transition: background var(--dur-1), color var(--dur-1); }
.nk-b:hover { background: var(--surface-3); color: var(--ink); }
.nk-b .ic { width: 13px; height: 13px; }
.nk-go { display: inline-flex; align-items: center; align-self: center; gap: 4px; flex: none; height: 28px; padding: 0 10px; border-radius: var(--r-pill); background: var(--surface-2); color: var(--ink-2); font-size: var(--t-xs); font-weight: 500; white-space: nowrap; transition: background var(--dur-1), color var(--dur-1); }
.nk-go .ic { width: 13px; height: 13px; }
.nk-i.click:hover .nk-go { background: var(--surface-3); color: var(--ink); }
.nk-i.hit, .hx-i.hit, .cd-pics.hit { background: var(--accent-soft); box-shadow: 0 0 0 4px var(--accent-soft); border-radius: 10px; }
.nk-who { display: flex; align-items: flex-start; gap: 12px; margin-bottom: 12px; padding: 12px 16px; border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--surface); }
.nk-who .ico-tile { flex: none; }
.nk-who .li-main { flex: 1; min-width: 0; }
.nk-who .li-title { white-space: normal; overflow-wrap: anywhere; }
.nk-guess { align-items: center; }
.nk-auto { margin-top: 6px; }
.nk-auto .nk-b { height: 24px; padding: 0 8px; }
.nk-warn { display: flex; align-items: flex-start; gap: 6px; margin-top: 8px; padding: 8px 10px; border-radius: var(--r-md); background: var(--warn-soft); color: var(--warn); font-size: var(--t-sm); font-weight: 500; line-height: 1.4; }
.nk-warn .ic { width: 15px; height: 15px; flex: none; margin-top: 1px; }
@media (pointer: coarse) { .nk-b, .nk-go { height: 34px; } }
@media (max-width: 560px) {
  .nk-who { padding: 12px; }
  .nk-guess { flex-wrap: wrap; }
}
/* Пульт 2.0: просмотры карточек (владелец 09.10): окно «Кто открывал карточку» (js/screens/cardviews-win.js) на основе .lw из card-2.css,
   строка «Открывали карточку» как кнопка и сводка в «Менеджерах» (cardviews-stats.js). Только токены, префикс cv-. */

.cv-box { width: min(620px, 100%); }
.cv-in { gap: 12px; }
.cv-fl { align-items: center; }
.cv-list { display: grid; }
.cv-row { display: grid; gap: 5px; padding: 10px 2px; border-bottom: 1px solid var(--line); }
.cv-row:last-child { border-bottom: 0; }
.cv-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.cv-who { display: inline-flex; align-items: center; gap: 8px; min-width: 0; }
.cv-who b { overflow: hidden; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.cv-at { color: var(--ink-2); white-space: nowrap; }
.cv-sub { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 8px; padding-left: 36px; }
.cv-sub .cd-lk { font-size: inherit; }
.cv-more { display: flex; justify-content: center; }
.cv-note { text-align: center; }

/* строка «Открывали карточку» с правом card_views: кнопка в историю */
.cd-views.cv-open { width: fit-content; max-width: 100%; margin-left: -6px; padding: 3px 6px; border-radius: var(--r-pill); cursor: pointer; transition: background var(--dur-1) var(--ease), color var(--dur-1) var(--ease); }
.cd-views.cv-open:hover { background: var(--surface-2); color: var(--ink-2); }
.cd-views.cv-open:focus-visible { outline: 2px solid var(--focus); outline-offset: 1px; }

/* сводка в «Менеджерах» */
.mg-cv .cv-st { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 20px 28px; align-items: start; }
.cv-c { display: inline-grid; grid-template-columns: 2.6em 3.2em; align-items: center; justify-items: end; column-gap: 6px; }
.cv-tbl tfoot td { border-top: 1px solid var(--line-2); }
.cv-top-h { margin-bottom: 8px; }
.cv-top-list { display: grid; gap: 6px; }
.cv-top-row { display: flex; align-items: center; gap: 10px; width: 100%; padding: 10px 12px; border-radius: var(--r-md); background: var(--surface-2); text-align: left; transition: background var(--dur-1) var(--ease); }
.cv-top-row:hover { background: var(--surface-3); }
.cv-top-row:focus-visible { outline: 2px solid var(--focus); outline-offset: 1px; }
.cv-top-row .grow { display: grid; min-width: 0; gap: 2px; }
@media (max-width: 900px) {
  .mg-cv .cv-st { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 520px) {
  .cv-sub { padding-left: 0; }
  .cv-tbl .ava { display: none; }
  .cv-tbl th, .cv-tbl td { padding: 0 8px; }
}
@media (prefers-reduced-motion: reduce) {
  .cd-views.cv-open, .cv-top-row { transition: none; }
}
/* Пульт 2.0, шторка «Карточка клиента» и «Чаты»: диалог (как в Telegram), правки сообщений, колонка дат и календарь.
   Только токены, классы cd-. Пузыри из концепта design/pult-v2/css/screens/card.css, правки и удалённое как в старом
   пульте (app.css, .bubble .versions): серая плашка версий по нажатию, пунктир без надписи, без перечёркиваний. */

.cd-dlg { display: grid; grid-template-columns: 84px minmax(0, 1fr); gap: 14px; align-items: start; position: relative; }
.cd-dlg-bar { display: none; }
.cd-dlg-main { min-width: 0; }
.cd-rail { position: sticky; top: 4px; max-height: calc(100vh - 150px); overflow: auto; display: flex; flex-direction: column; gap: 3px; padding-right: 2px; scrollbar-width: thin; }
.cd-rail-h { margin-bottom: 4px; font-size: 10px; }
.cd-dn { font: 500 11.5px/1 var(--f-ui); font-variant-numeric: tabular-nums; text-align: center; padding: 6px 4px; border-radius: var(--r-pill); border: 1px solid transparent; color: var(--ink-3); background: transparent; cursor: pointer; transition: border-color var(--dur-1), background var(--dur-1); }
.cd-dn.deal { color: var(--accent-text); background: var(--accent-soft); }
.cd-dn:hover { border-color: var(--line-2); }
.cd-cal, .cd-cal-scrim { display: none; }

/* переписка: дни блоками, плашка даты липнет к верху в пределах дня */
.cd-chat { display: flex; flex-direction: column; gap: 14px; padding: 16px; border-radius: var(--r-lg); background: var(--surface-2); }
.cd-dayb { display: flex; flex-direction: column; gap: 10px; }
.cd-day { position: sticky; top: 8px; z-index: 3; display: flex; justify-content: center; margin-bottom: 4px; pointer-events: none; }
.cd-day span { padding: 4px 12px; border-radius: var(--r-pill); background: var(--surface); box-shadow: var(--sh-1), 0 0 0 1px var(--line); color: var(--ink-2); font-size: var(--t-xs); font-weight: 500; }
.cd-more-wrap { display: flex; justify-content: center; margin-bottom: 10px; }
.cd-more-wrap .btn .ic { width: 14px; height: 14px; }
.cd-msg { display: flex; align-items: flex-end; gap: 8px; max-width: 82%; border-radius: 18px; transition: box-shadow var(--dur-2); }
.cd-msg .ava.sm { width: 26px; height: 26px; font-size: 10px; }
.cd-msg.out { align-self: flex-end; flex-direction: row-reverse; }
.cd-msg.hit { box-shadow: 0 0 0 3px var(--accent); }
.cd-bub { min-width: 0; padding: 10px 13px 7px; border-radius: 16px 16px 16px 6px; background: var(--surface); border: 1px solid var(--line); line-height: 1.45; }
.cd-msg.out .cd-bub { border-radius: 16px 16px 6px 16px; background: var(--accent-soft); border-color: transparent; }
/* тёмная тема: исходящие нейтральные, лайм на экране один (активная вкладка, кнопки) */
:root[data-theme="dark"] .cd-msg.out .cd-bub { background: var(--surface-3); border-color: var(--line-2); }
.cd-msg.mo .cd-bub { padding: 4px; background: transparent; border-color: transparent; }
.cd-btext { white-space: pre-wrap; overflow-wrap: anywhere; }
.cd-bm { display: flex; align-items: center; justify-content: flex-end; flex-wrap: wrap; gap: 4px 8px; margin-top: 5px; font-size: var(--t-xs); color: var(--ink-3); font-variant-numeric: tabular-nums; }
/* низ пузыря как в Telegram: реакции слева, время и отметки справа в той же строке (не влезло: время ниже, справа) */
.cd-bf { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 10px; margin-top: 5px; }
.cd-bf .cd-bm { margin: 0 0 0 auto; }
.cd-t { white-space: nowrap; }
.cd-sec { font-size: .82em; }
.cd-by { font-weight: 600; color: var(--ink-2); }
.cd-by.guess { border-bottom: 1px dashed var(--ink-3); }
.cd-tag { display: inline-flex; align-items: center; gap: 4px; font-weight: 600; white-space: nowrap; }
.cd-tag .ic { width: 12px; height: 12px; }
/* имя «по устройству» перенесено с сообщения выше (held): значок бледнее, сигнала на этом сообщении не было */
.cd-by.held .ic { opacity: .45; }
.cd-tag.warn { color: var(--warn); }
.cd-tag.neg { color: var(--neg); }
/* «изменено»: кнопка, по нажатию версии (и по нажатию на пузырь) */
.cd-edtag { padding: 1px 7px 1px 5px; border: 0; border-radius: var(--r-pill); background: var(--warn-soft); font: inherit; font-weight: 600; cursor: pointer; transition: box-shadow var(--dur-1); }
.cd-edtag:hover { box-shadow: inset 0 0 0 1px var(--warn); }
.cd-edtag:focus-visible { outline: 2px solid var(--ink); outline-offset: 1px; }
.cd-msg.ed .cd-bub { cursor: pointer; }
.cd-mark { display: block; margin: 0 0 4px; font-size: var(--t-xs); font-weight: 600; color: var(--ink-3); }
.cd-att { display: inline-flex; align-items: center; gap: 8px; margin-bottom: 7px; padding: 7px 12px 7px 9px; border-radius: 12px; background: var(--surface-3); font-size: var(--t-sm); font-weight: 500; color: var(--ink-2); }
.cd-att .ic { width: 16px; height: 16px; }
/* миниатюра занимает место заранее: размеров картинки сервер не отдаёт, а без рамки ленивая загрузка выше окна сдвигала переписку (в Safari нет привязки прокрутки) */
.cd-thumb { display: block; width: 180px; height: 135px; max-width: min(100%, var(--mp-w, 420px)); max-height: var(--mp-h, 400px); object-fit: cover; object-position: 50% 25%; background: var(--surface-3); border-radius: 12px; margin: 2px 0 4px; }
.mp-video .cd-thumb { width: 260px; height: 195px; }
.cd-quote { border-left: 3px solid var(--accent); background: var(--surface-2); padding: 3px 8px; border-radius: 6px; margin-bottom: 6px; font-size: var(--t-sm); color: var(--ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cd-quote.q-out { border-left-color: var(--ink-3); }
/* изменённое: цвет акцента темы, мягкий фон (без зачёркивания, красного и зелёного, владелец 07.10); запасной вариант без color-mix: мягкий фон акцента */
.cd-chg { background: var(--accent-soft); background: color-mix(in srgb, var(--accent) 34%, transparent); color: inherit; border-radius: 4px; padding: 0 1px; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
/* изменённое сообщение стоит на лёгком оттенке акцента: заметно, но не кричит; у исходящих оттенок чуть гуще (они уже на фоне акцента) */
.cd-msg.ed .cd-bub { background-image: linear-gradient(color-mix(in srgb, var(--accent) 12%, transparent), color-mix(in srgb, var(--accent) 12%, transparent)); }
.cd-msg.out.ed .cd-bub { background-image: linear-gradient(color-mix(in srgb, var(--accent) 16%, transparent), color-mix(in srgb, var(--accent) 16%, transparent)); }
:root[data-theme="dark"] .cd-msg.ed .cd-bub { background-image: linear-gradient(color-mix(in srgb, var(--accent) 8%, transparent), color-mix(in srgb, var(--accent) 8%, transparent)); }
:root[data-theme="dark"] .cd-msg.out.ed .cd-bub { background-image: linear-gradient(color-mix(in srgb, var(--accent) 11%, transparent), color-mix(in srgb, var(--accent) 11%, transparent)); }
/* серая плашка прежних версий над сообщением (по нажатию на «изменено»); время версии мелко сверху. Сообщение под ней остаётся */
.cd-vers { display: none; gap: 2px; margin: 0 0 7px; padding: 4px; border-radius: 12px; background: var(--surface-3); font-size: var(--t-sm); }
.cd-msg.open .cd-vers { display: grid; }
.cd-ver { padding: 5px 9px; border-radius: 9px; color: var(--ink-2); white-space: pre-wrap; overflow-wrap: anywhere; }
.cd-vt { display: block; margin-bottom: 1px; font-size: var(--t-xs); color: var(--ink-3); font-variant-numeric: tabular-nums; }
:root[data-theme="dark"] .cd-msg.out .cd-vers { background: var(--surface-2); }
.cd-msg.del .cd-bub, :root[data-theme="dark"] .cd-msg.del .cd-bub { border: 1.5px dashed var(--neg); }
.cd-msg.del .cd-btext, .cd-msg.del .cd-att, .cd-msg.del .cd-thumb { opacity: .6; }
/* реакции как в Telegram: компактные пилюли, эмодзи 16 px, без колец. Наша мягкого цвета акцента, клиента нейтральная;
   кнопка, чтобы подсказка (кто и когда) открывалась и касанием на телефоне */
.cd-rx { display: inline-flex; gap: 4px; }
.cd-react { position: relative; display: inline-flex; align-items: center; justify-content: center; min-width: 30px; height: 24px; padding: 0 8px; border: 0; border-radius: var(--r-pill); background: var(--surface-3); font-size: 16px; line-height: 1; cursor: default; }
.cd-react::after { content: ""; position: absolute; inset: -6px -3px; }
.cd-react.ours { background: var(--accent-soft); }
.cd-msg.out .cd-react { background: var(--surface); }
.cd-msg.out .cd-react.ours { background: var(--accent); background: color-mix(in srgb, var(--accent) 55%, var(--surface)); }
/* тёмная тема: лайм на экране один, поэтому наша реакция на исходящем пузыре только подкрашена */
:root[data-theme="dark"] .cd-msg.out .cd-react.ours { background: var(--accent-soft); }
.cd-rn { margin-left: 4px; font: 600 11px/1 var(--f-ui); color: var(--ink-2); }
.cd-react:focus-visible { outline: 2px solid var(--ink); outline-offset: 1px; }

/* голосовое и кружок */
.cd-voice { display: flex; align-items: center; gap: 10px; min-width: 190px; }
.cd-play { flex: none; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; background: var(--inverse); color: var(--accent); }
:root[data-theme="dark"] .cd-play { color: var(--inverse-ink); }
.cd-play .ic { width: 14px; height: 14px; fill: currentColor; }
.cd-track { flex: 1; height: 14px; background: repeating-linear-gradient(90deg, var(--ink-3) 0 2px, transparent 2px 5px); opacity: .5; border-radius: 2px; }
.cd-dur { font-size: var(--t-sm); color: var(--ink-3); font-variant-numeric: tabular-nums; }
.cd-circle { position: relative; width: 150px; }
.cd-circle-in { display: block; width: 150px; height: 150px; border-radius: 50%; overflow: hidden; background: var(--surface-3); position: relative; }
.cd-circle-in img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cd-circle-play { position: absolute; inset: 0; margin: auto; width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: var(--inverse); color: var(--accent); opacity: .85; }
.cd-circle-play .ic { width: 16px; height: 16px; fill: currentColor; }
.cd-circle-dur { position: absolute; left: 8px; bottom: 6px; font-size: var(--t-xs); background: var(--inverse); color: var(--inverse-ink); border-radius: 8px; padding: 1px 6px; }

.cd-wipe { display: flex; gap: 10px; align-items: flex-start; margin: 0 0 12px; padding: 10px 12px; border-radius: var(--r-md); background: var(--neg-soft); color: var(--ink); font-size: var(--t-sm); }
.cd-wipe .ic { flex: none; width: 16px; height: 16px; margin-top: 1px; color: var(--neg); }
.cd-chat-foot { display: flex; align-items: center; gap: 12px; margin-top: 12px; padding: 14px 14px 14px 16px; border-radius: var(--r-lg); border: 1px dashed var(--line-2); }
.cd-chat-foot .ico-tile { width: 38px; height: 38px; border-radius: 12px; }

/* правки и удаления */
.cd-ci { display: flex; flex-direction: column; align-items: flex-start; gap: 3px; }
.cd-ci.out { align-items: flex-end; }
.cd-ci.fresh .cd-chead::before { content: "● "; color: var(--accent-text); }
.cd-ci .cd-msg { max-width: 92%; }

/* телефон: колонка дат превращается в календарь снизу */
@media (max-width: 720px) {
  .cd-dlg { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .cd-rail { display: none; }
  .cd-dlg-bar { display: flex; }
  .cd-msg { max-width: 94%; }
  .cd-chat { padding: 12px 10px; }
  .cd-chat-foot { flex-wrap: wrap; }
  .cd-chat-foot .btn { width: 100%; }
  .cd-dlg.cal-open .cd-cal-scrim { display: block; position: fixed; inset: 0; z-index: 62; background: var(--scrim); }
  .cd-dlg.cal-open .cd-cal { display: flex; flex-direction: column; gap: 10px; position: fixed; left: 0; right: 0; bottom: 0; z-index: 63; max-height: 82vh; overflow: auto; padding: 14px 14px calc(14px + env(safe-area-inset-bottom)); background: var(--surface); border-radius: var(--r-lg) var(--r-lg) 0 0; box-shadow: var(--sh-pop); }
  .cd-cal-h { position: relative; display: flex; align-items: center; justify-content: center; gap: 12px; font-size: 15px; }
  .cd-cal-x { position: absolute; right: 0; }
  .cd-cal-g { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; text-align: center; }
  .cd-cal-w { font-size: var(--t-xs); color: var(--ink-3); }
  .cd-cd { width: 36px; height: 36px; margin: 0 auto; display: grid; place-items: center; border-radius: 50%; font: 500 14px var(--f-ui); color: var(--ink-4); border: 1px solid transparent; background: none; }
  button.cd-cd { cursor: pointer; }
  .cd-cd.deal { background: var(--accent); color: var(--accent-ink); }
  .cd-cd.req { border-color: var(--ink-3); color: var(--ink); }
  .cd-cd.sel { box-shadow: 0 0 0 2px var(--ink); }
  .cd-cal-p { display: flex; flex-direction: column; gap: 6px; font-size: var(--t-sm); }
  .cd-cev { padding: 7px 9px; border-radius: 10px; background: var(--surface-2); }
  .cd-cev.deal { background: var(--accent-soft); }
  .cd-cal-c { display: flex; gap: 6px; overflow-x: auto; padding-bottom: 2px; }
  .cd-cal-c .chip { flex: none; }
}
/* эмодзи цветные, как в Telegram: шрифт эмодзи сразу после основного (реакции и текст); у реакций он первый, там кроме эмодзи ничего нет */
.cd-btext, .cd-ver, .cd-quote, .cd-fwd { font-family: "Onest", "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", system-ui, -apple-system, "Segoe UI", sans-serif; }
.cd-react { font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", "Onest", system-ui, sans-serif; font-variant-emoji: emoji; }
/* галочки на наших сообщениях: одна серая доставлено, две прочитано; значок вопроса: пересылка не проверялась (запись до 03.10) */
.cd-rd { display: inline-grid; place-items: center; margin-left: -3px; color: var(--ink-3); }
.cd-rd .ic { width: 15px; height: 15px; }
.cd-rd.ok { color: var(--info); }
.cd-nf { display: inline-grid; place-items: center; color: var(--ink-4); }
.cd-nf .ic { width: 12px; height: 12px; }
/* пересылка: плашка сверху пузыря; скрытый отправитель жёлтым (деньги и чужие реквизиты пересылают, это вопрос безопасности) */
.cd-fwd { display: flex; gap: 8px; margin: 0 0 7px; padding: 5px 10px 6px 9px; border-left: 3px solid var(--info); border-radius: 6px 10px 10px 6px; background: var(--info-soft); font-size: var(--t-sm); line-height: 1.35; }
.cd-fwd > .ic { flex: none; width: 14px; height: 14px; margin-top: 2px; color: var(--info); }
.cd-fwd.hid { border-left-color: var(--warn); background: var(--warn-soft); }
.cd-fwd.hid > .ic, .cd-fwd.hid .cd-fwd-t { color: var(--warn); }
.cd-fwd-b { min-width: 0; }
.cd-fwd-t { font-weight: 600; color: var(--ink); overflow-wrap: anywhere; }
.cd-fwd-t .cd-lk { font-weight: 600; }
.cd-fwd-s { display: flex; flex-wrap: wrap; align-items: center; gap: 1px 10px; margin-top: 1px; font-size: var(--t-xs); color: var(--ink-2); }
.cd-fwd-s a { color: var(--ink); font-weight: 500; border-bottom: 1px dashed var(--ink-4); }
.cd-fid { display: inline-flex; align-items: center; gap: 4px; }
.cd-fid .copy { width: 20px; height: 20px; }
/* состояние бота (dialog-3.js): тихая метка в шапке; у выключенного та же метка кнопкой с тоном, нажатие открывает поповер (владелец 09.10: плашки под шапкой нет) */
.bot-chip { display: inline-flex; align-items: center; gap: 4px; margin-left: 8px; padding: 0 7px; height: 18px; border-radius: var(--r-pill); background: var(--surface-3); color: var(--ink-3); font-size: var(--t-xs); font-weight: 600; vertical-align: 1px; }
.bot-chip .ic { width: 12px; height: 12px; }
.bot-chip.pos { background: var(--pos-soft); color: var(--pos); }
.bot-chip.info { background: var(--info-soft); color: var(--info); }
.bot-chip.warn { background: var(--warn-soft); color: var(--warn); }
.bot-chip.neg { background: var(--neg-soft); color: var(--neg); }
.bot-btn { cursor: pointer; white-space: nowrap; transition: filter var(--dur-1); }
.bot-btn:hover { filter: brightness(.94); }
.bot-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.bot-pop { width: min(340px, calc(100vw - 16px)); max-width: none; padding: 12px 14px; }
.bot-pt { font-size: var(--t-sm); font-weight: 600; overflow-wrap: anywhere; }
.bot-ps { margin-top: 4px; font-size: var(--t-sm); color: var(--ink-2); }
.bot-ps .chip { vertical-align: 1px; }
.bot-m { margin-top: 6px; font-size: var(--t-xs); color: var(--ink-3); }
.bot-ph { margin-top: 10px; font-size: var(--t-xs); color: var(--ink-2); }
.bot-pop .btn { width: 100%; margin-top: 8px; justify-content: center; }
.bot-spin { animation: spin 1.1s linear infinite; }
.cd-pava img { width: 100%; height: 100%; object-fit: cover; display: block; border-radius: inherit; }
/* Пульт 2.0, диалог (часть 2): плашка прежних версий, геопозиция, файл, плашка «был в контактах», «удалено нами»
   (js/screens/dialog-4.js, владелец 06.10). Только токены, обе темы. Изменённое слово подсвечивается цветом акцента (.cd-chg в dialog.css),
   зачёркивания, красного и зелёного в правках нет (владелец 07.10). Остальное в правках за отдельной задачей. */
.cd-vh { display: flex; align-items: center; gap: 6px; margin-bottom: 2px; }
.cd-vh .cd-vt { margin: 0; }
.cd-vn { display: inline-grid; place-items: center; flex: none; min-width: 16px; height: 16px; padding: 0 4px; border-radius: var(--r-pill); background: var(--surface); color: var(--ink-2); font: 600 10px/1 var(--f-ui); }
.cd-vl { font-size: var(--t-xs); font-weight: 600; color: var(--ink-2); }
.cd-ver.cur { color: var(--ink); }
.cd-ver.cur .cd-vn { background: var(--accent); color: var(--accent-ink); }
.cd-vm { display: flex; align-items: center; gap: 5px; margin-top: 3px; color: var(--ink-2); font-size: var(--t-xs); }
.cd-vm .ic { width: 12px; height: 12px; flex: none; }

/* удалили мы сами из пульта: текст приглушён, слева красноватая кромка, пометка «удалено нами» в нижней строке (без зачёркивания) */
.cd-msg.us .cd-btext { color: var(--ink-3); }
:root .cd-msg.del.us .cd-bub { border-left: 4px solid var(--neg); border-radius: var(--r-xs); }
.cd-pin { display: inline-flex; color: var(--ink-3); }
.cd-pin .ic { width: 12px; height: 12px; }

/* геопозиция и место клиента */
.cd-geo { display: flex; align-items: flex-start; gap: 10px; width: 270px; max-width: 100%; margin: 2px 0 4px; padding: 9px 11px 9px 9px; border-radius: 13px; background: var(--surface-3); }
.cd-geo .ico-tile { width: 34px; height: 34px; border-radius: 11px; flex: none; }
.cd-geo-t { display: flex; flex-direction: column; gap: 2px; min-width: 0; font-size: var(--t-sm); line-height: 1.35; }
.cd-geo-t b { font-weight: 600; overflow-wrap: anywhere; }
.cd-geo-t > span { color: var(--ink-2); overflow-wrap: anywhere; }
.cd-geo-xy { display: inline-flex; align-items: center; gap: 4px; color: var(--ink-3) !important; font-size: var(--t-xs); }
.cd-geo-xy .copy { width: 22px; height: 22px; }
.cd-geo-a { display: inline-flex; align-items: center; gap: 5px; margin-top: 2px; color: var(--accent-text); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.cd-geo-a .ic { width: 13px; height: 13px; flex: none; }

/* имя и размер файла под миниатюрой */
.cd-file { display: flex; align-items: center; gap: 6px; max-width: 260px; margin: 0 0 4px; font-size: var(--t-sm); color: var(--ink-2); }
.cd-file .ic { width: 15px; height: 15px; flex: none; }
.cd-file .faint { flex: none; }

/* «Был у нас в контактах как ..., переписки нет». В карточке отдельным блоком, в «Чатах» полосой под шапкой */
.cd-gap { display: flex; align-items: flex-start; gap: 9px; margin-bottom: 12px; padding: 10px 14px; border-radius: 12px; background: var(--warn-soft); color: var(--ink); font-size: var(--t-sm); line-height: 1.4; }
.cd-gap .ic { width: 16px; height: 16px; flex: none; margin-top: 1px; color: var(--warn); }
.ch-pinw .cd-gap { margin: 0; border-radius: 0; border-bottom: 1px solid var(--line); }
/* Пульт 2.0, диалог (часть 3): номера телефонов «Проверить в Telegram» и чип QR под фото (js/screens/dialog-6.js, владелец 07.10) и окно «QR с фото» (js/qr-view.js, 11.10). Только токены, обе темы. */
.cd-pn { display: inline; }
.cd-phb { display: inline-flex; align-items: center; gap: 4px; height: 22px; margin-left: 6px; padding: 0 8px; border-radius: var(--r-pill); background: var(--surface-3); color: var(--ink); font-size: var(--t-xs); font-weight: 500; vertical-align: baseline; white-space: nowrap; transition: background var(--dur-1); }
.cd-phb .ic { width: 12px; height: 12px; }
.cd-phb:hover:not(:disabled) { background: var(--accent-soft); color: var(--ink); }
.cd-phb:disabled { opacity: .55; cursor: default; }
.cd-phr { display: inline-flex; align-items: center; gap: 4px; margin-left: 6px; padding: 1px 8px; border-radius: var(--r-pill); background: var(--surface-3); color: var(--ink-2); font-size: var(--t-xs); font-weight: 600; vertical-align: baseline; }
.cd-phr .ic { width: 12px; height: 12px; flex: none; }
.cd-phr.ok { background: var(--pos-soft); color: var(--pos); }
.cd-phr.warn { background: var(--warn-soft); color: var(--warn); }
.cd-phr.neg { background: var(--neg-soft); color: var(--neg); }
.cd-phr.wait .ic { animation: cd-ph-spin 1s linear infinite; }
@keyframes cd-ph-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .cd-phr.wait .ic { animation: none; } }
.cd-qr { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; margin-top: 6px; padding: 6px 10px; border-radius: var(--r-md); background: var(--surface-2); box-shadow: inset 0 0 0 1px var(--line); font-size: var(--t-xs); }
.cd-qr-l { display: inline-flex; align-items: flex-start; gap: 5px; min-width: 0; flex: 1 1 160px; }
.cd-qr-l .ic { width: 14px; height: 14px; flex: none; margin-top: 1px; color: var(--ink-3); }
.cd-qr-l b { font-weight: 600; overflow-wrap: anywhere; }
.cd-qr-b { flex: none; color: var(--accent-text); font-size: var(--t-xs); font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }
.cd-qr-b:hover { color: var(--ink); }
/* Окно «QR с фото» (js/qr-view.js, QRV): общее для диалога и панели «Медиа» (mpanel.css), только токены, обе темы */
.modal.qrv-modal { width: min(680px, calc(100vw - 24px)); padding: 18px 20px 22px; }
.qrv-host { margin-top: 10px; min-width: 0; }
.qrv-host:focus, .qrv-host:focus-visible { outline: none; box-shadow: none; }
.qrv { display: grid; gap: 14px; min-width: 0; }
/* картинка и проверка слева, получатель и операция справа (на широком экране в окне диалога: главное видно без прокрутки); узко: друг под другом */
.qrv-top, .qrv-side, .qrv-main { display: grid; gap: 14px; min-width: 0; align-content: start; }
.qrv-side { justify-items: center; }
.qrv-t { margin: 0; font: 500 var(--t-h2)/1.25 var(--f-display); letter-spacing: -.02em; overflow-wrap: anywhere; }
.qrv-w { display: flex; align-items: flex-start; gap: 8px; padding: 9px 12px; border-radius: var(--r-md); font-size: var(--t-sm); line-height: 1.4; color: var(--ink); overflow-wrap: anywhere; }
.qrv-w .ic { width: 16px; height: 16px; flex: none; margin-top: 1px; }
.qrv-w.red { background: var(--neg-soft); box-shadow: inset 0 0 0 1px var(--neg); font-weight: 600; }
.qrv-w.red .ic { color: var(--neg); }
.qrv-w.yel { background: var(--warn-soft); }
.qrv-w.yel .ic { color: var(--warn); }
/* QR всегда чёрным по белому, в тёмной теме тоже: иначе камера не считает */
.qrv-img { justify-self: center; padding: 10px; border-radius: var(--r-md); background: #fff; }
.qrv-img img { display: block; width: min(260px, 70vw); height: auto; aspect-ratio: 1; image-rendering: pixelated; }
.qrv-chk { display: flex; align-items: center; justify-content: center; gap: 6px; font-size: var(--t-xs); font-weight: 600; color: var(--ink-3); text-align: center; }
.qrv-chk .ic { width: 13px; height: 13px; flex: none; }
.qrv-chk.ok { color: var(--pos); }
.qrv-chk.bad { color: var(--neg); }
.qrv-s, .qrv-ab { min-width: 0; }
.qrv-sh { margin: 0 0 2px; font-size: var(--t-xs); font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--ink-3); }
.qrv-r { display: grid; grid-template-columns: minmax(96px, 34%) minmax(0, 1fr); gap: 3px 12px; padding: 7px 0; border-top: 1px solid var(--line); }
.qrv-s .qrv-r:first-of-type { border-top: 0; }
.qrv-k { font-size: var(--t-sm); color: var(--ink-3); overflow-wrap: anywhere; }
.qrv-v { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; min-width: 0; font-size: var(--t-body); }
.qrv-x { flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; white-space: pre-wrap; }
/* значения кода идут строго в порядке записи (буквы письма справа налево не переставляют группы цифр) и пробелы в начале, в конце и подряд видны */
.qrv-m .qrv-x, .qrv-ft .mono, .qrv-rt { font-family: var(--f-mono); font-size: 12.5px; letter-spacing: -.01em; direction: ltr; unicode-bidi: bidi-override; white-space: pre-wrap; }
.qrv-g4 { margin-right: .34em; }
.qrv-n { flex-basis: 100%; font-size: var(--t-xs); color: var(--ink-3); overflow-wrap: anywhere; }
.qrv-cp { display: inline-flex; align-items: center; gap: 4px; flex: none; padding: 2px 8px; border-radius: var(--r-pill); background: var(--surface-3); color: var(--ink-2); font-size: var(--t-xs); font-weight: 600; cursor: pointer; transition: background var(--dur-1), color var(--dur-1); }
.qrv-cp .ic { width: 12px; height: 12px; }
.qrv-cp:hover { background: var(--accent-soft); color: var(--ink); }
.qrv-cp.done { background: var(--pos-soft); color: var(--pos); }
.qrv-cp:focus-visible, .qrv-fold summary:focus-visible { outline: none; box-shadow: var(--focus); }
.qrv-ab { padding: 10px 12px; border-radius: var(--r-md); background: var(--surface-2); }
.qrv-ab ul { margin: 4px 0 0; padding: 0; list-style: none; font-size: var(--t-sm); color: var(--ink-2); }
.qrv-ab li { margin-top: 2px; overflow-wrap: anywhere; }
.qrv-fold { border-top: 1px solid var(--line); }
.qrv-fold summary { display: flex; align-items: center; gap: 6px; padding: 9px 0; list-style: none; cursor: pointer; font-size: var(--t-sm); font-weight: 600; border-radius: var(--r-xs); }
.qrv-fold summary::-webkit-details-marker { display: none; }
.qrv-chev { transition: transform var(--dur-1); }
.qrv-fold[open] .qrv-chev { transform: rotate(90deg); }
.qrv-tw { max-width: 100%; }
.qrv-ft { width: 100%; table-layout: fixed; border-collapse: collapse; font-size: var(--t-sm); }
.qrv-ft th { text-align: left; font-weight: 500; color: var(--ink-3); padding: 2px 8px 4px 0; }
.qrv-ft td { padding: 5px 8px 5px 0; border-top: 1px solid var(--line); vertical-align: top; overflow-wrap: anywhere; }
.qrv-ft th:first-child, .qrv-ft td:first-child { width: 24%; }
.qrv-ctr td { color: var(--ink-3); background: var(--surface-2); }
.qrv-raw { display: grid; gap: 8px; justify-items: start; padding-bottom: 8px; }
.qrv-rt { max-width: 100%; padding: 8px 10px; border-radius: var(--r-sm); background: var(--surface-2); overflow-wrap: anywhere; }
.qrv-foot { overflow-wrap: anywhere; }
.qrv-state { display: grid; justify-items: center; gap: 10px; padding: 30px 8px; text-align: center; color: var(--ink-2); font-size: var(--t-sm); }
.qrv-state .ic-lg { color: var(--ink-3); }
.qrv-state b { color: var(--ink); font-size: var(--t-body); }
.qrv-sk { display: grid; gap: 8px; width: min(320px, 100%); }
.qrv-sk .skel { height: 14px; }
@media (max-width: 560px) {
  .modal.qrv-modal { padding: 14px 14px 18px; }
  .qrv-r { grid-template-columns: minmax(84px, 32%) minmax(0, 1fr); gap: 3px 10px; }
  .qrv-ft thead { display: none; }
  .qrv-ft tr { display: grid; grid-template-columns: 72px minmax(0, 1fr); padding: 5px 0; border-top: 1px solid var(--line); }
  .qrv-ft td { border-top: 0; padding: 0 8px 0 0; }
  .qrv-ft td:first-child { width: auto; white-space: nowrap; overflow-wrap: normal; }
  .qrv-ft td:nth-child(3) { grid-column: 2; color: var(--ink-2); }
}
@media (min-width: 1000px) {
  .modal.qrv-modal { width: min(940px, calc(100vw - 24px)); }
  .qrv-modal .qrv-top { grid-template-columns: 284px minmax(0, 1fr); gap: 24px; align-items: start; }
  .qrv-modal .qrv-side { position: sticky; top: 0; }
}
@media (prefers-reduced-motion: reduce) { .qrv-chev, .qrv-cp { transition: none; } }
.cd-ct { display: flex; align-items: center; gap: 6px; margin-top: 6px; font-size: var(--t-xs); font-weight: 600; }
.cd-ct .ic { width: 13px; height: 13px; flex: none; }
.cd-ct.ok { color: var(--pos); }
.cd-ct.neg { color: var(--neg); }
/* Панель 2.0: премиум-эмодзи в тексте сообщения (js/screens/emoji-custom.js, волна 36, владелец 20.10). Размер как у строки текста (1.25 em), на базовой линии: низ
   квадрата чуть ниже линии, как у обычных эмодзи, строка не раздувается. Место занято сразу (width и height), пока файл грузится, текст не прыгает. Эмодзи не ловит нажатия
   и не тянется: сообщение выделяется и открывается меню, как раньше. Видео (.ce на <video>) без звука; при prefers-reduced-motion оно не играет (js), здесь ничего не двигаем. */
.ce { display: inline-block; box-sizing: border-box; width: 1.25em; height: 1.25em; margin: 0 .04em; vertical-align: -.28em; object-fit: contain; background: none; pointer-events: none; user-select: none; -webkit-user-drag: none; }
/* «Журнал»: лента рабочего чата слева, справа сводка за 7 дней и открытые эскалации.
   Все классы с префиксом fd-. Цвета только из токенов.
   Раскладка по ширине самого экрана (container queries), а не окна: с открытым и свёрнутым меню
   колонки перестраиваются там, где им действительно тесно.
   fdw: весь экран (две колонки от 860 px), fdf: карточка ленты (строки компактные до 620 px), fdd: эскалации. */

/* ---------- шапка: свежесть и автообновление ---------- */
.fd-live {
  display: inline-flex; align-items: center; gap: 12px;
  height: 42px; padding: 0 8px 0 16px; border-radius: var(--r-pill);
  background: var(--surface); border: 1px solid var(--glass-line); box-shadow: var(--sh-1);
  font-size: var(--t-sm); color: var(--ink-2); white-space: nowrap;
}
.fd-live b { color: var(--ink); font-weight: 600; font-variant-numeric: tabular-nums; }
.fd-live .vdiv { height: 22px; align-self: center; }
.fd-live.off .sdot { background: var(--ink-4); animation: none; }
.fd-auto { display: inline-flex; align-items: center; gap: 10px; height: 32px; padding: 0 4px 0 2px; border-radius: var(--r-pill); color: var(--ink-2); font-weight: 500; }
.fd-auto:hover { color: var(--ink); }

/* ---------- чипы групп: китовые таблетки .chip.lg.btnish со счётчиком за 7 дней ---------- */
.fd-toolrow { justify-content: flex-start; }
.fd-chips { display: flex; gap: 4px; flex: 1; min-width: 0; overflow-x: auto; scrollbar-width: none; padding: 2px; margin: -2px; }
.fd-chips::-webkit-scrollbar { display: none; }
.fd-chips.more { -webkit-mask-image: linear-gradient(90deg, black 88%, transparent); mask-image: linear-gradient(90deg, black 88%, transparent); }
.fd-chips.more.end { -webkit-mask-image: linear-gradient(90deg, transparent, black 12%); mask-image: linear-gradient(90deg, transparent, black 12%); }
.chip.fd-chip {
  --fd-c: var(--ink-3);
  flex: none; gap: 4px; padding: 0 9px 0 8px;
  font-size: 12px;
  background: var(--surface); border-color: var(--glass-line); box-shadow: var(--sh-1); color: var(--ink-2);
}
.chip.fd-chip .ic { width: 14px; height: 14px; color: var(--fd-c); }
.chip.fd-chip .n { font: 600 11px/1 var(--f-ui); font-variant-numeric: tabular-nums; color: var(--ink-3); }
.chip.fd-chip.all { padding-left: 12px; gap: 6px; }
.chip.fd-chip:hover { color: var(--ink); }
.chip.fd-chip.zero { color: var(--ink-3); }
.chip.fd-chip.zero .ic { color: var(--ink-4); }
.chip.fd-chip[aria-pressed="true"] { background: var(--inverse); color: var(--inverse-ink); border-color: transparent; box-shadow: var(--sh-2); opacity: 1; }
.chip.fd-chip[aria-pressed="true"] .ic, .chip.fd-chip[aria-pressed="true"] .n { color: var(--accent); }
:root[data-theme="dark"] .chip.fd-chip[aria-pressed="true"] .ic,
:root[data-theme="dark"] .chip.fd-chip[aria-pressed="true"] .n { color: var(--inverse-ink); }

/* ---------- раскладка: лента + колонка справа ---------- */
.fd-wrap { container: fdw / inline-size; }
.fd-layout { display: grid; grid-template-columns: minmax(0, 1fr) clamp(320px, 31%, 380px); gap: var(--gap); align-items: start; }
/* колонка липкая; если она выше окна, JS даёт --fd-fit < 0 и она прилипает нижним краем */
.fd-aside {
  position: sticky; top: min(calc(var(--frame) + var(--top-h) + 16px), var(--fd-fit, 100vh));
  display: flex; flex-direction: column; gap: var(--gap); min-width: 0;
}
.fd-aside > .card { flex: none; }

/* ---------- лента ---------- */
.fd-feed { container: fdf / inline-size; padding: 22px 18px 18px; }
.fd-head { display: flex; align-items: center; justify-content: space-between; gap: 12px 16px; flex-wrap: wrap; padding: 0 4px; }
.fd-head > :first-child { min-width: 0; }
.fd-tools { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; justify-content: flex-end; min-width: 0; }
.fd-search { width: 270px; max-width: 100%; }
.fd-search .input { height: 42px; }
.fd-search .input::-webkit-search-cancel-button { display: none; }
.ava.fd-ava { width: 22px; height: 22px; font-size: 9px; letter-spacing: 0; }

/* активные фильтры */
.fd-active { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding: 0 4px; }
.fd-active:not(:empty) { margin-top: 14px; }
.fd-active .chip .ic { width: 12px; height: 12px; }
.fd-active .chip .ic:last-child { margin-left: 2px; color: var(--ink-3); }
.fd-reset { font-size: var(--t-sm); color: var(--ink-3); font-weight: 500; padding: 0 8px; height: 26px; border-radius: var(--r-pill); }
.fd-reset:hover { color: var(--ink); background: var(--surface-3); }

.fd-list { margin-top: 12px; transition: opacity var(--dur-2) var(--ease); }
.fd-list.fd-busy { opacity: .45; pointer-events: none; }
.fd-group + .fd-group { margin-top: 12px; }

/* день: прилипает вплотную под верхней строкой; полоса фона сверху закрывает щель */
.fd-day {
  position: sticky; top: calc(var(--frame) + var(--top-h) + 8px); z-index: 4;
  display: flex; align-items: center; gap: 10px;
  height: 44px; margin: 0 0 4px; padding: 0 14px 0 6px;
  border-radius: var(--r-pill);
  background: var(--glass); border: 1px solid var(--glass-line);
  -webkit-backdrop-filter: blur(16px) saturate(1.4); backdrop-filter: blur(16px) saturate(1.4);
}
.fd-day::before { content: ""; position: absolute; left: -18px; right: -18px; bottom: calc(100% + 1px); height: 12px; background: var(--surface); pointer-events: none; }
.fd-day-k { display: inline-flex; align-items: center; height: 32px; padding: 0 14px; border-radius: var(--r-pill); background: var(--surface-3); color: var(--ink); font: 500 14px/1 var(--f-display); letter-spacing: -.01em; white-space: nowrap; }
.fd-day-k.now { background: var(--inverse); color: var(--inverse-ink); }
.fd-day-d { font-size: var(--t-sm); color: var(--ink-3); white-space: nowrap; }
.fd-day-n { margin-left: auto; font-size: var(--t-sm); color: var(--ink-3); display: inline-flex; gap: 8px; align-items: center; white-space: nowrap; font-variant-numeric: tabular-nums; }
/* пульс по часам Таиланда (0-23), только у дня, загруженного целиком: текущий час лаймом, впереди пунктир */
.fd-pulse { display: inline-flex; align-items: flex-end; gap: 2px; height: 22px; margin-left: 4px; flex: none; }
.fd-pulse i { width: 3px; height: calc(3px + var(--v, 0) * 19px); border-radius: 2px; background: color-mix(in srgb, var(--ink) 62%, transparent); }
.fd-pulse i.zero { background: var(--line-2); }
.fd-pulse i.now { background: var(--accent); box-shadow: 0 0 0 1px color-mix(in srgb, var(--ink) 18%, transparent); }
.fd-pulse i.fut { height: 22px; background: transparent; box-shadow: inset 0 0 0 1px var(--line-2); }

/* событие на китовой ленте .tl: время, значок на линии, текст, итог справа; вложения во всю ширину строкой ниже */
.tl.fd-items { gap: 2px; }
.tl-item.fd-item {
  grid-template-columns: 50px 36px minmax(0, 1fr) auto; column-gap: 14px; row-gap: 0;
  padding: 12px 12px 12px 6px; border-radius: 18px;
  transition: background var(--dur-1) var(--ease);
}
.fd-item:hover { background: var(--surface-2); }
.fd-item > .tl-time { grid-column: 1; grid-row: 1; display: flex; flex-direction: column; align-items: flex-end; gap: 1px; padding-top: 8px; color: var(--ink-2); font-weight: 500; white-space: nowrap; }
.fd-ago { font-size: 11px; color: var(--ink-3); font-weight: 400; }
.fd-item > .tl-dot { grid-column: 2; grid-row: 1 / span 2; }
.fd-item > .tl-dot::before { top: 42px; bottom: -14px; }
.ico-tile.fd-ic { width: 36px; height: 36px; border-radius: 12px; position: relative; z-index: 1; }
.fd-ic .ic { width: 17px; height: 17px; }
.fd-item > .fd-body { grid-column: 3; grid-row: 1; min-width: 0; padding-top: 1px; }
.fd-item > .fd-side { grid-column: 4; grid-row: 1; display: flex; flex-direction: column; align-items: flex-end; gap: 6px; padding-top: 6px; text-align: right; white-space: nowrap; }
.fd-item > .fd-x { grid-column: 3 / -1; grid-row: 2; min-width: 0; }
.fd-title { font-weight: 500; line-height: 1.4; color: var(--ink); overflow-wrap: anywhere; }
.fd-title b.fd-id { font-weight: 600; font-variant-numeric: tabular-nums; }
.fd-old { color: var(--ink-3); }
.fd-nick { color: var(--ink); font-weight: 600; border-radius: 6px; text-align: left; transition: color var(--dur-1); }
.fd-nick:hover { color: var(--accent-text); text-decoration: underline; text-underline-offset: 3px; }
/* разделитель-точка идёт вместе со следующим элементом, а не повисает в конце строки */
.fd-meta { display: flex; align-items: center; flex-wrap: wrap; row-gap: 4px; margin-top: 4px; font-size: var(--t-sm); color: var(--ink-3); min-width: 0; }
.fd-meta > span { display: inline-flex; align-items: center; min-width: 0; }
.fd-meta > span + span::before { content: ""; width: 3px; height: 3px; border-radius: 50%; background: var(--ink-4); margin: 0 8px; flex: none; }
.fd-meta .fd-nick { font-weight: 500; color: var(--ink-2); }
.fd-meta .flag { font-size: 13px; margin-right: 5px; }
.fd-mk { white-space: nowrap; }
.fd-who { display: inline-flex; align-items: center; gap: 6px; color: var(--ink-2); }
.fd-title, .fd-pv, .fd-quote, .fd-del-t { font-family: "Onest", "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", system-ui, -apple-system, "Segoe UI", sans-serif; }
.fd-pv { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; margin-top: 4px; font-size: var(--t-sm); color: var(--ink-3); }
.fd-pv + .fd-meta { margin-top: 2px; }
.fd-side .chip .ic { width: 12px; height: 12px; }
.fd-item.is-new { animation: fd-new 2.6s var(--ease) both; }
@keyframes fd-new { 0% { background: var(--accent-soft); transform: translateY(-6px); opacity: 0; } 15% { opacity: 1; transform: none; } 70% { background: var(--accent-soft); } 100% { background: transparent; } }

/* свёрнутая серия: «5 новых заявок подряд» со стопкой */
.fd-grp { cursor: pointer; }
.fd-grp .fd-title { color: var(--ink-2); }
.fd-grp.is-exp { background: var(--surface-2); }
.fd-ic-stack { box-shadow: 4px 4px 0 -1px var(--surface), 4px 4px 0 0 var(--line-2); }
.fd-ic-n { position: absolute; top: -6px; right: -7px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: var(--r-pill); display: grid; place-items: center; background: var(--inverse); color: var(--inverse-ink); font: 600 10px/1 var(--f-ui); font-variant-numeric: tabular-nums; box-shadow: 0 0 0 2px var(--surface); }
.fd-grp-btn .ic { width: 15px; height: 15px; }
.fd-item.fd-grp > .fd-side { padding-top: 2px; }

/* текст сигнала бота или сделки без номера */
.fd-quote { margin-top: 8px; padding: 2px 0 2px 10px; border-left: 2px solid color-mix(in srgb, var(--ink) 14%, transparent); font-size: var(--t-sm); color: var(--ink-2); overflow-wrap: anywhere; }
.fd-s-bad .fd-quote { border-left-color: color-mix(in srgb, var(--neg) 40%, transparent); }
.fd-s-warn .fd-quote { border-left-color: color-mix(in srgb, var(--warn) 45%, transparent); }

/* раскрытие правки или удаления (<details>): одна плашка, как в диалоге */
.fd-det { margin-top: 8px; }
.fd-det > summary { display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 8px 0 10px; border-radius: var(--r-pill); background: var(--surface-2); color: var(--ink-2); font-size: var(--t-xs); font-weight: 500; cursor: pointer; list-style: none; user-select: none; }
.fd-det > summary::-webkit-details-marker { display: none; }
.fd-det > summary:hover { background: var(--surface-3); color: var(--ink); }
.fd-det > summary .ic { width: 13px; height: 13px; }
.fd-det > summary .fd-det-c { transition: transform var(--dur-2) var(--ease); }
.fd-det[open] > summary .fd-det-c { transform: rotate(180deg); }
/* правка в ленте: тот же пузырь, что в диалоге (dialog.css), изменённые слова подсвечены, версии по нажатию */
.fd-chat { margin-top: 8px; padding: 10px 12px; gap: 0; }
.fd-chat .cd-msg { max-width: min(560px, 100%); }
.fd-del { margin-top: 8px; padding: 10px 13px 11px; border-radius: 16px; border: 1.5px dashed color-mix(in srgb, var(--neg) 58%, transparent); background: color-mix(in srgb, var(--neg-soft) 45%, transparent); }
.fd-del-h { display: flex; align-items: center; gap: 6px; font-size: var(--t-xs); font-weight: 600; color: var(--neg); }
.fd-del-h .ic { width: 13px; height: 13px; }
.fd-del-t { margin-top: 6px; font-size: var(--t-sm); color: var(--ink-2); line-height: 1.5; overflow-wrap: anywhere; white-space: pre-wrap; }
.fd-del-m { display: block; margin-top: 2px; font-size: 11px; color: var(--ink-3); white-space: normal; }

/* курс дня: значения чипами */
.fd-rates { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.chip.fd-rate { height: 28px; gap: 6px; background: var(--surface-2); border-color: var(--line); color: var(--ink); font-variant-numeric: tabular-nums; }
.chip.fd-rate b { font-size: var(--t-xs); color: var(--accent-text); font-weight: 700; letter-spacing: .03em; margin-right: 2px; }

.fd-more { margin-top: 14px; height: 46px; }
.fd-end { display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: 14px; padding: 14px; border-radius: 16px; border: 1px dashed var(--line-2); font-size: var(--t-sm); color: var(--ink-3); text-align: center; }
.fd-empty { display: grid; justify-items: center; padding-bottom: 28px; }

/* ---------- сводка за 7 дней: героическая плашка. Узкий экран: полоса из 5 чисел; в колонке: главное число + 4 плитки ---------- */
.fd-hero { padding: 18px 20px 20px; }
.fd-hero-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.fd-hero-h { min-width: 0; }
.fd-hero-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); margin-top: 14px; }
.mini-stat.fd-tile { gap: 6px; align-items: flex-start; text-align: left; min-width: 0; padding: 2px 0 2px 9px; border-left: 1px solid var(--hero-line); color: inherit; }
.mini-stat.fd-tile:first-child { padding-left: 0; border-left: 0; }
.mini-stat.fd-tile .l { font-size: var(--t-xs); color: var(--hero-ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.mini-stat.fd-tile .l.wrap { white-space: normal; line-height: 1.2; }
.fd-hero-grid > .fd-tile:not(.main) { justify-content: space-between; }
.mini-stat.fd-tile .v { color: var(--hero-ink); }
.mini-stat.fd-tile:hover .v { text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 4px; }
.fd-l-w { display: none; }
.card.hero .round-btn:hover { transform: rotate(45deg); }

/* ---------- открытые эскалации ---------- */
.fd-dec { container: fdd / inline-size; }
.fd-dec.off { display: none; }
.fd-dec-bar { display: none; }
.fd-dec .card-head { margin-bottom: 14px; }
.fd-dec-list { display: flex; flex-direction: column; gap: 10px; }
.fd-sig {
  padding: 14px; border-radius: 20px;
  background: color-mix(in srgb, var(--neg-soft) 78%, var(--surface));
  border: 1px solid color-mix(in srgb, var(--neg) 16%, transparent);
}
.fd-sig-top { display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 12px; align-items: start; }
.fd-sig .ico-tile, .fd-sig-row .ico-tile { width: 34px; height: 34px; border-radius: 11px; background: var(--surface); box-shadow: 0 0 0 1px color-mix(in srgb, var(--neg) 14%, transparent); }
.fd-sig .ico-tile .ic, .fd-sig-row .ico-tile .ic { width: 16px; height: 16px; }
.fd-sig-main { min-width: 0; }
.fd-sig-t { font-weight: 600; line-height: 1.3; overflow-wrap: anywhere; }
.fd-sig-s { margin-top: 3px; font-size: var(--t-sm); color: var(--ink-2); line-height: 1.35; overflow-wrap: anywhere; }
.fd-sig-ago { display: flex; align-items: center; gap: 5px; margin-top: 6px; font-size: var(--t-xs); color: var(--ink-3); white-space: nowrap; }
.fd-sig-ago .ic { width: 12px; height: 12px; }
.fd-sig-btns { display: flex; align-items: center; gap: 6px; margin-top: 12px; flex-wrap: wrap; }
.fd-sig-btns .btn { flex: 1 1 auto; height: 32px; padding: 0 12px; }
.fd-sig-btns .btn:not(.primary) { background: var(--surface); }
/* третья и дальше: строкой */
.fd-sig-row { display: flex; align-items: center; gap: 12px; padding: 9px 9px 9px 10px; border-radius: 18px; border: 1px solid color-mix(in srgb, var(--neg) 16%, transparent); }
.fd-sig-row .ico-tile { width: 30px; height: 30px; border-radius: 10px; }
.fd-sig-row-m { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; text-align: left; }
.fd-sig-row-m .fd-sig-t { font-size: var(--t-sm); }
.fd-sig-row-m:hover .fd-sig-t { text-decoration: underline; text-underline-offset: 3px; }
.fd-dec .card-foot b { color: var(--ink); font-weight: 600; }
.fd-dec .card-foot .btn { margin-right: -8px; }
.fd-dec-ok { display: flex; align-items: center; gap: 14px; padding: 6px 0 4px; }

/* ---------- две колонки (экран шире 860 px): плашка в колонке, главное число крупно ---------- */
@container fdw (min-width: 860px) {
  .fd-hero { padding: 22px; }
  .fd-hero-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); margin-top: 18px; }
  .mini-stat.fd-tile.main {
    grid-column: 1 / -1;
    display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-areas: "v l";
    align-items: end; column-gap: 12px;
    padding: 0 0 18px; margin-bottom: 14px; border-bottom: 1px solid var(--hero-line);
  }
  .mini-stat.fd-tile.main + .fd-tile { padding-left: 0; border-left: 0; }
  .fd-tile.main .v { grid-area: v; font: 500 var(--t-hero)/.86 var(--f-display); letter-spacing: -.045em; }
  .fd-tile.main .l { grid-area: l; font-size: 15px; font-weight: 500; color: var(--hero-ink); white-space: normal; padding-bottom: 2px; line-height: 1.3; }
  .fd-l-s { display: none; }
  .fd-l-w { display: block; }
  .fd-turn { display: block; font-size: var(--t-sm); font-weight: 400; color: var(--hero-ink-2); }
}

/* ---------- одна колонка: сводка полосой, эскалации одной строкой с раскрытием, лента в первом экране ---------- */
@container fdw (max-width: 859px) {
  .fd-layout { grid-template-columns: minmax(0, 1fr); }
  .fd-aside { display: contents; }
  .fd-hero { order: 1; }
  .fd-dec { order: 2; padding: 8px; }
  .fd-feed { order: 4; }
  .fd-dec-bar { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 50px; padding: 4px 10px 4px 4px; border-radius: 18px; text-align: left; }
  .fd-dec-bar:hover { background: var(--surface-2); }
  .fd-dec-bar .ico-tile { width: 42px; height: 42px; border-radius: 14px; }
  .fd-dec-bar-t { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
  .fd-dec-bar-t b { font-weight: 600; }
  .fd-dec-bar-t .ellipsis { font-size: var(--t-sm); color: var(--ink-3); }
  .fd-dec-chev { color: var(--ink-3); transition: transform var(--dur-2) var(--ease); }
  .fd-dec.open .fd-dec-chev { transform: rotate(180deg); }
  .fd-dec-body { display: none; padding: 10px 6px 6px; }
  .fd-dec.open .fd-dec-body { display: block; }
  .fd-dec-body > .card-head { display: none; }
  .fd-dec-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
  .fd-dec .card-foot { margin-top: 12px; }
}
@container fdw (max-width: 559px) {
  .fd-hero { padding: 16px 16px 18px; }
  .fd-hero .card-sub { font-size: var(--t-xs); }
  .fd-hero .round-btn { width: 34px; height: 34px; }
  .mini-stat.fd-tile { padding-left: 7px; padding-right: 2px; }
  .mini-stat.fd-tile .v { font-size: 22px; }
}

/* ---------- узкая лента: строки компактные, итог и статус под текстом ---------- */
@container fdf (max-width: 760px) {
  .fd-tools { justify-content: flex-start; width: 100%; }
  .fd-search { flex: 1 1 200px; width: auto; }
}
@container fdf (max-width: 619px) {
  .tl-item.fd-item { grid-template-columns: 40px 30px minmax(0, 1fr); column-gap: 10px; padding: 10px 8px 12px 0; border-radius: 16px; }
  .fd-item > .tl-time { padding-top: 6px; font-size: var(--t-xs); }
  .fd-item > .tl-dot { grid-row: 1 / span 3; }
  .fd-item > .tl-dot::before { top: 36px; }
  .ico-tile.fd-ic { width: 30px; height: 30px; border-radius: 10px; }
  .fd-ic .ic { width: 15px; height: 15px; }
  .fd-item > .fd-x { grid-column: 3; grid-row: 2; }
  .fd-item > .fd-side { grid-column: 3; grid-row: 3; flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: flex-start; gap: 8px; padding-top: 8px; text-align: left; }
  /* на узкой ленте без точек-разделителей: перенос строки не оставляет висящих точек */
  .fd-meta { column-gap: 12px; }
  .fd-meta > span + span::before { display: none; }
  .fd-item.fd-grp > .fd-side { padding-top: 6px; }
  .fd-day { padding: 0 12px 0 4px; gap: 8px; }
}
@container fdf (max-width: 520px) {
  .fd-search { flex: 1 1 100%; }
  .fd-day.rel .fd-day-d, .fd-n-w, .fd-pulse { display: none; }
  .fd-day-k { height: 30px; padding: 0 12px; font-size: 13px; }
}

/* ---------- телефон ---------- */
@media (max-width: 720px) {
  .fd-live { height: 40px; padding: 0 6px 0 12px; gap: 8px; }
  .fd-live .vdiv { display: none; }
  .fd-chips { margin: -2px -10px; padding: 2px 10px; }
  .chip.fd-chip { height: 36px; }
  .fd-feed { padding: 18px 10px 12px; }
  .fd-day { top: calc(var(--frame) + var(--top-h) + 6px); height: 40px; }
  .fd-day::before { left: -10px; right: -10px; }
}
/* Экран «График» (живой): Гант смен, KPI с первой тёмной, нижние карточки. Классы с префиксом sch-. Из концепта
   design/pult-v2/css/screens/schedule.css без режима правки, времени в пульте, событий и графиков AFK (данных нет). */

/* ---------- KPI ---------- */
.sch-kpi { min-height: 152px; }
.sch-kpi .kpi-value { font-size: 38px; }
.card.hero.sch-kpi .ava-stack > * { box-shadow: 0 0 0 2.5px var(--hero-bg); }
.sch-kpi .kpi-foot { flex-wrap: nowrap; min-width: 0; }
.sch-kpi .kpi-foot .chip, .sch-kpi .kpi-foot .ava-stack { flex: none; }
.sch-kpi .kpi-foot > span:not(.chip):not(.ava-stack) { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sch-kpi-per { display: block; margin-top: 3px; font-size: var(--t-xs); font-weight: 400; letter-spacing: 0; color: var(--ink-3); }
.card.hero .sch-kpi-per { color: var(--hero-ink-2); }

/* ---------- Гант: шапка ---------- */
.sch-gantt { padding: 22px 24px 18px; }
.sch-head { display: flex; align-items: center; justify-content: space-between; gap: 14px 20px; flex-wrap: wrap; margin-bottom: 16px; }
.sch-head-t { min-width: 0; }
.sch-tools { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.sch-nav { display: inline-flex; align-items: center; gap: 2px; height: 42px; padding: 0 4px; border-radius: var(--r-pill); background: var(--surface); border: 1px solid var(--line-2); }
.sch-nav .lbl { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-width: 140px; padding: 0 4px; font-weight: 500; white-space: nowrap; font-variant-numeric: tabular-nums; }
.sch-nav .lbl .ic { color: var(--ink-3); }
.sch-tbtn { height: 42px; padding: 0 15px; }
.sch-tbtn .badge { margin-left: 2px; }
.btn.soft.sch-tbtn[aria-pressed="true"] { color: var(--ink-3); }
.sch-hint { display: flex; align-items: center; gap: 8px; margin: -4px 0 12px; font-size: var(--t-sm); color: var(--ink-3); }

/* ---------- Гант: сетка ---------- */
.sch-scroll { overflow-x: auto; overflow-y: hidden; margin: 0 -24px; padding: 10px 24px 12px; overscroll-behavior-x: contain; }
.sch-grid {
  --name-w: 232px; --col: 50px; --head: 56px; --row: 60px; --tm: 26px; --cov: 30px; --g: 6px; --r: 16px;
  --cell: var(--surface-2); --cell-we: var(--surface-3);
  position: relative; display: grid; gap: var(--g);
  grid-template-columns: var(--name-w) repeat(var(--n), minmax(var(--col), 1fr));
  width: max-content; min-width: 100%; /* коробка сетки по ширине колонок: липкий столбец имён едет внутри неё, а не уезжает вместе с узкой коробкой (аудит 19.10, п. 3) */
}
.sch-grid.month { --name-w: 186px; --col: 25px; --head: 50px; --row: 50px; --tm: 24px; --cov: 28px; --g: 4px; --r: 10px; }

/* липкий столбец имён: тени того же цвета закрывают щели и поле слева, чтобы ячейки не просвечивали при прокрутке */
.sch-corner, .sch-who {
  position: sticky; left: 0; z-index: 5; background: var(--surface);
  box-shadow: var(--g) 0 0 var(--surface), 0 var(--g) 0 var(--surface), var(--g) var(--g) 0 var(--surface), -24px 0 0 var(--surface), -24px var(--g) 0 var(--surface);
}
.sch-corner.cov { box-shadow: var(--g) 0 0 var(--surface), -24px 0 0 var(--surface); }
.sch-corner { display: flex; align-items: center; gap: 8px; padding-left: 6px; }
.sch-corner.cov { gap: 7px; font-size: var(--t-sm); color: var(--ink-3); font-weight: 500; }
.sch-who { display: flex; min-width: 0; }
.sch-who-in {
  flex: 1; display: flex; align-items: center; gap: 12px; min-width: 0; padding: 0 10px 0 8px;
  border-radius: var(--r); box-shadow: inset 0 0 0 1px var(--line);
}
.sch-who-t { min-width: 0; flex: 1; }
.sch-who .nm { display: flex; align-items: center; gap: 6px; min-width: 0; font-weight: 600; font-size: 14.5px; letter-spacing: -.01em; white-space: nowrap; }
.sch-who .nm-t { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.sch-tz { flex: none; height: 17px; padding: 0 6px; border-radius: var(--r-pill); background: var(--surface-3); color: var(--ink-2); font: 600 10px/17px var(--f-ui); letter-spacing: .01em; font-variant-numeric: tabular-nums; }
.sch-who .sub { margin-top: 2px; font-size: var(--t-xs); color: var(--ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-variant-numeric: tabular-nums; }
.sch-who .sub .h { color: var(--ink-2); font-weight: 500; }
.sch-who .sub .tzm { display: none; }
.sch-who .ava-wrap .sdot { width: 11px; height: 11px; }
.month .sch-who-in { gap: 9px; padding: 0 8px 0 6px; }
.month .sch-who .nm { font-size: 13.5px; }

/* заголовки дней: таблетки, выходные темнее, сегодня акцентом */
.sch-dh {
  position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  border-radius: var(--r); background: var(--cell); box-shadow: inset 0 0 0 1px var(--glass-line); line-height: 1.1;
}
.sch-dh .w { font-size: var(--t-xs); color: var(--ink-3); }
.sch-dh .n { font: 500 15px/1.1 var(--f-display); color: var(--ink); font-variant-numeric: tabular-nums; }
.sch-dh.we { background: var(--cell-we); }
.sch-dh.past .n { color: var(--ink-2); }
.sch-dh.today { background: var(--accent); box-shadow: 0 12px 24px -12px var(--accent-glow); }
.sch-dh.today .w { color: color-mix(in srgb, var(--accent-ink) 70%, transparent); }
.sch-dh.today .n { color: var(--accent-ink); font-weight: 600; }
.sch-dh.today::after { content: ""; position: absolute; left: 50%; bottom: -5px; width: 8px; height: 8px; margin-left: -4px; border-radius: 50%; background: var(--accent-text); box-shadow: 0 0 0 3px var(--surface); z-index: 3; }
.sch-dh .mo { position: absolute; top: -8px; left: 50%; transform: translateX(-50%); padding: 2px 6px; border-radius: var(--r-pill); background: var(--inverse); color: var(--inverse-ink); font: 600 9px/1.2 var(--f-ui); letter-spacing: .04em; text-transform: uppercase; white-space: nowrap; }
.month .sch-dh .w { font-size: 10px; }
.month .sch-dh .n { font-size: 13px; }

/* линия «сегодня» через все строки */
.sch-now {
  z-index: 2; justify-self: center; width: 2px; margin-top: calc(var(--g) * -1); pointer-events: none; border-radius: 2px;
  background: repeating-linear-gradient(to bottom, var(--accent-text) 0 6px, transparent 6px 11px);
}

/* ячейки дня: обычная смена пустая и чистая, видны только отклонения */
.sch-c {
  position: relative; min-width: 0; display: grid; place-items: center;
  border-radius: var(--r); background: var(--cell); box-shadow: inset 0 0 0 1px var(--glass-line);
  transition: box-shadow var(--dur-1) var(--ease), background var(--dur-1);
}
.sch-c[data-cell] { cursor: pointer; }
.sch-c[data-cell]:hover { box-shadow: inset 0 0 0 1.5px var(--ink-4); }
.sch-c.we { background: var(--cell-we); }
.sch-c.off {
  background-color: var(--surface);
  background-image: repeating-linear-gradient(-45deg, var(--hatch-c) 0 1.6px, transparent 1.6px 7px);
  box-shadow: inset 0 0 0 1px var(--line);
}
/* сегодня: живой прогресс смены тонкой полосой поверх пунктира */
.sch-bar { position: absolute; z-index: 3; left: 9px; right: 9px; bottom: 9px; height: 4px; border-radius: 4px; overflow: hidden; background: color-mix(in srgb, var(--ink) 9%, var(--cell)); }
.sch-bar i { position: absolute; left: 0; top: 0; bottom: 0; border-radius: inherit; background: var(--ink-3); }
.sch-bar i.live { background: var(--pos); }
.month .sch-bar { left: 3px; right: 3px; bottom: 5px; height: 3px; }
.sch-c.is-late { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--neg) 30%, transparent); }
.sch-c.miss { box-shadow: inset 0 0 0 1.5px var(--neg); }
.sch-c.ask:hover { box-shadow: inset 0 0 0 1.5px var(--accent-text); }

/* метки: опоздание и ранний уход по центру ячейки */
.sch-mk { position: relative; z-index: 3; display: flex; flex-direction: column; align-items: center; gap: 3px; }
.sch-mk b, .sch-lm {
  display: inline-grid; place-items: center; min-width: 28px; height: 17px; padding: 0 5px; border-radius: var(--r-pill);
  font: 700 10px/1 var(--f-ui); letter-spacing: -.01em; font-variant-numeric: tabular-nums;
}
.sch-mk .l, .sch-lm.l { background: var(--neg); color: var(--surface); }
.sch-mk .e, .sch-lm.e { background: var(--warn-soft); color: color-mix(in srgb, var(--warn) 60%, var(--ink)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--warn) 45%, transparent); }
.month .sch-mk { position: absolute; top: 3px; right: 3px; flex-direction: row; gap: 2px; }
.month .sch-mk b { width: 7px; height: 7px; min-width: 0; padding: 0; }
.month .sch-mk .e { background: var(--warn); box-shadow: none; }

/* сегодня: в сети, AFK */
.sch-tl { position: absolute; z-index: 3; top: 6px; left: 6px; display: flex; align-items: center; gap: 3px; }
.sch-tl .sdot { width: 7px; height: 7px; }
.sch-cf { display: inline-flex; align-items: center; gap: 1px; color: var(--warn); font: 700 9.5px/1 var(--f-ui); }
.sch-cf .ic { width: 12px; height: 12px; stroke-width: 2.2; }
.sch-cf.now { animation: breathe 1.6s var(--ease) infinite; }
.month .sch-tl { top: 3px; left: 3px; }
.month .sch-cf .ic { width: 10px; height: 10px; }

/* вне графика: без лайма, тонкий пунктир и значок; в прошлом только значок в углу */
.sch-c.ow { outline: 1px dashed var(--ink-4); outline-offset: -1px; }
.sch-ow { position: relative; z-index: 3; display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--surface); color: var(--accent-text); }
.sch-ow .ic { width: 14px; height: 14px; stroke-width: 2; }
.sch-c.past .sch-ow { position: absolute; top: 4px; right: 4px; width: 18px; height: 18px; }
.sch-c.past .sch-ow .ic { width: 11px; height: 11px; }
.month .sch-ow, .month .sch-c.past .sch-ow { position: static; width: 14px; height: 14px; }
.month .sch-ow .ic, .month .sch-c.past .sch-ow .ic { width: 9px; height: 9px; }

/* ---------- чипы: отпуск, больничный, подмена, запрос ---------- */
.sch-chip {
  --chip: var(--ink-3);
  position: relative; z-index: 3; min-width: 0; border-radius: var(--r); cursor: pointer;
  container-type: inline-size;
  transition: transform var(--dur-2) var(--ease), box-shadow var(--dur-2) var(--ease);
}
.sch-chip:hover { transform: translateY(-1px); }
.sch-chip-in { display: flex; align-items: center; gap: 9px; height: 100%; min-width: 0; padding: 0 8px; }
.sch-chip-ic { width: 32px; height: 32px; flex: none; border-radius: 50%; display: grid; place-items: center; }
.sch-chip-ic .ic { width: 16px; height: 16px; }
.sch-chip-l { flex: 1; min-width: 0; font: 500 14px/1.1 var(--f-ui); letter-spacing: -.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sch-chip-st { flex: none; margin-left: auto; display: inline-flex; align-items: center; justify-content: center; gap: 4px; height: 22px; padding: 0 8px 0 6px; border-radius: var(--r-pill); font: 500 11px/1 var(--f-ui); white-space: nowrap; }
.sch-chip-st .ic { width: 12px; height: 12px; stroke-width: 2.4; }
.sch-chip-st.a .ic { color: var(--pos); }
.sch-chip-st.p .ic { color: var(--warn); }

.sch-chip.vacation { --chip: var(--pos); }
.sch-chip.swap { --chip: var(--violet); }
.sch-chip.sick { --chip: var(--info); }

/* сплошные в светлой теме: отпуск и подмена */
.sch-chip.solid {
  color: var(--surface);
  background: linear-gradient(135deg, color-mix(in srgb, var(--chip), var(--surface) 18%), var(--chip) 72%);
  box-shadow: 0 14px 26px -16px var(--chip), inset 0 1px 0 color-mix(in srgb, var(--surface) 30%, transparent);
}
.sch-chip.solid .sch-chip-ic { background: color-mix(in srgb, var(--surface) 22%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--surface) 40%, transparent); }
.sch-chip.solid .sch-chip-st { background: color-mix(in srgb, var(--surface) 92%, transparent); color: var(--ink-2); }

/* стекло: больничный всегда, остальные в тёмной теме */
.sch-chip.glass,
:root[data-theme="dark"] .sch-chip.solid {
  color: var(--chip);
  background: linear-gradient(135deg, color-mix(in srgb, var(--chip) 30%, transparent), color-mix(in srgb, var(--chip) 11%, transparent));
  -webkit-backdrop-filter: blur(7px) saturate(1.4); backdrop-filter: blur(7px) saturate(1.4);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--chip) 36%, transparent), inset 0 1px 0 color-mix(in srgb, var(--surface) 50%, transparent), 0 16px 30px -20px var(--chip);
}
.sch-chip.glass .sch-chip-ic,
:root[data-theme="dark"] .sch-chip.solid .sch-chip-ic { background: color-mix(in srgb, var(--chip) 18%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--chip) 38%, transparent); }
.sch-chip.glass .sch-chip-st,
:root[data-theme="dark"] .sch-chip.solid .sch-chip-st { background: color-mix(in srgb, var(--surface) 78%, transparent); color: var(--ink-2); }

/* запрос: пунктирная рамка, метка «Ждёт» */
.sch-chip.dash {
  color: var(--ink-2); border: 1.5px dashed var(--ink-4);
  background: color-mix(in srgb, var(--surface) 80%, transparent);
  -webkit-backdrop-filter: blur(5px); backdrop-filter: blur(5px);
}
:root[data-theme="dark"] .sch-chip.dash { border-color: var(--ink-3); }
.sch-chip.dash .sch-chip-ic { background: var(--surface-3); color: var(--ink-2); }
.sch-chip.dash .sch-chip-st { background: var(--warn-soft); color: color-mix(in srgb, var(--warn) 60%, var(--ink)); }
.sch-chip.dash .sch-chip-st .ic { color: inherit; }

/* ждёт подтверждения: пунктир внутри */
.sch-chip.pending:not(.dash) { outline: 1.5px dashed color-mix(in srgb, var(--surface) 72%, transparent); outline-offset: -5px; }
.sch-chip.glass.pending,
:root[data-theme="dark"] .sch-chip.pending:not(.dash) { outline-color: color-mix(in srgb, var(--chip) 60%, transparent); }

/* обрезан краем периода */
.sch-chip.cut-l { border-top-left-radius: 5px; border-bottom-left-radius: 5px; }
.sch-chip.cut-r { border-top-right-radius: 5px; border-bottom-right-radius: 5px; }
.sch-chip.fresh { animation: sch-in .55s var(--ease-spring) both; }
@keyframes sch-in { from { opacity: 0; transform: scale(.92); } to { opacity: 1; transform: none; } }

/* ширина чипа решает, что видно. Статус «Подтверждено/Ждёт» словом виден до 151 px:
   у подтверждённого «Подтверждено» длинное, поэтому на 151-228 px прячем подпись вида (вид ясен по цвету и значку, полное в подсказке) */
@container (min-width: 151px) and (max-width: 228px) {
  .sch-chip-in { gap: 7px; padding: 0 7px; }
  .sch-chip-ic { width: 30px; height: 30px; }
  .sch-chip:not(.pending) .sch-chip-l { display: none; }
}
/* уже 150 px: подпись вида остаётся, статус значком в углу */
@container (max-width: 228px) {
  .sch-chip-l + .sch-chip-st { margin-left: auto; }
}
@container (max-width: 150px) {
  .sch-chip-in { gap: 7px; padding: 0 6px; }
  .sch-chip-ic { width: 30px; height: 30px; }
  .sch-chip-l { font-size: 13px; }
  .sch-chip-st { position: absolute; top: 5px; right: 5px; width: 18px; height: 18px; padding: 0; border-radius: 50%; }
  .sch-chip-st > span { display: none; }
  .sch-chip-st .ic { width: 11px; height: 11px; }
}
/* в одну клетку: значок, под ним «Ждёт»; у подтверждённых галочка в углу */
@container (max-width: 96px) {
  .sch-chip-in { flex-direction: column; justify-content: center; gap: 3px; padding: 0 2px; }
  .sch-chip-l { display: none; }
  .sch-chip-ic { width: 26px; height: 26px; }
  .sch-chip-ic .ic { width: 14px; height: 14px; }
  .sch-chip-st.p { position: static; width: auto; height: 15px; margin: 0; padding: 0 5px; border-radius: var(--r-pill); font-size: 9.5px; font-weight: 600; }
  .sch-chip-st.p > span { display: inline; }
  .sch-chip-st.p .ic { display: none; }
}
@container (max-width: 44px) {
  .sch-chip-ic { width: 22px; height: 22px; }
  .sch-chip-ic .ic { width: 12px; height: 12px; }
  .sch-chip-st.p { height: 14px; padding: 0 3px; font-size: 9px; }
  .sch-chip-st.a { top: 3px; right: 3px; width: 15px; height: 15px; }
  .sch-chip-st.a .ic { width: 9px; height: 9px; }
}

/* строка «На смене» */
.sch-cov {
  display: flex; align-items: center; justify-content: center; gap: 2px; align-self: center; height: 26px;
  border-radius: var(--r-pill); color: var(--ink-3); font: 600 12px/1 var(--f-ui); font-variant-numeric: tabular-nums;
}
.sch-cov small { font-size: 10px; font-weight: 600; color: var(--warn); }
.sch-cov.tight { color: var(--ink-2); background: var(--surface-2); }
.sch-cov.low { color: color-mix(in srgb, var(--warn) 60%, var(--ink)); background: var(--warn-soft); }
.sch-cov.today { color: var(--ink); box-shadow: inset 0 0 0 1.5px var(--accent-text); }
.sch-cov.today.low { box-shadow: inset 0 0 0 1.5px var(--accent-text); }

/* легенда */
.sch-legend { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 13px; margin-top: 6px; padding-top: 14px; border-top: 1px dashed var(--line-2); font-size: var(--t-sm); color: var(--ink-2); }
.sch-legend > span { display: inline-flex; align-items: center; gap: 7px; white-space: nowrap; }
.sch-sw { display: inline-grid; place-items: center; width: 18px; height: 12px; flex: none; border-radius: 4px; }
.sch-sw.shift { background: var(--surface-2); box-shadow: inset 0 0 0 1px var(--line-2); }
.sch-sw.off, .sch-sw.dayoff { background-color: var(--surface); background-image: repeating-linear-gradient(-45deg, var(--ink-4) 0 1.2px, transparent 1.2px 4px); box-shadow: inset 0 0 0 1px var(--line-2); }
.sch-sw.vacation { background: var(--pos); }
.sch-sw.swap { background: var(--violet); }
.sch-sw.sick { background: color-mix(in srgb, var(--info) 30%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--info) 55%, transparent); }
.sch-sw.request { border: 1.5px dashed var(--ink-3); }
.sch-sw.ow { width: 20px; height: 14px; outline: 1px dashed var(--ink-4); outline-offset: -1px; box-shadow: none; color: var(--accent-text); }
.sch-sw.ow .ic { width: 10px; height: 10px; padding: 1px; border-radius: 50%; background: var(--surface); stroke-width: 2.4; }
.sch-sw.now { width: 3px; height: 15px; border-radius: 2px; background: repeating-linear-gradient(to bottom, var(--accent-text) 0 3px, transparent 3px 5px); }
:root[data-theme="dark"] .sch-sw.vacation { background: color-mix(in srgb, var(--pos) 30%, transparent); box-shadow: inset 0 0 0 1px var(--pos); }
:root[data-theme="dark"] .sch-sw.swap { background: color-mix(in srgb, var(--violet) 30%, transparent); box-shadow: inset 0 0 0 1px var(--violet); }
.sch-lc { display: inline-grid; color: var(--warn); }
.sch-lc.dim { display: inline-flex; gap: 2px; color: var(--ink-3); }
.sch-lc .ic { width: 14px; height: 14px; }

/* ---------- нижние карточки ---------- */
.sch-afk, .sch-devs, .sch-week { display: flex; flex-direction: column; }
.sch-afk-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; padding: 14px 16px; border-radius: 18px; background: var(--surface-2); }
.mini-stat .v.sch-v { font-size: 21px; }
.sch-afk-li .li-title { font-size: var(--t-body); }
.sch-q { color: var(--ink-3); font-weight: 400; }

/* ближайшее: отсутствующие */
.sch-evc .card-head { margin-bottom: 14px; }
.sch-ev-row { display: flex; align-items: center; gap: 12px; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--line); min-width: 0; }
.sch-ev-d { width: 44px; height: 48px; flex: none; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; border-radius: 14px; background: var(--surface-2); line-height: 1; }
.sch-ev-d b { font: 500 18px/1 var(--f-display); }
.sch-ev-d span { font-size: var(--t-xs); color: var(--ink-3); }
.sch-evc .sch-ev-row:first-of-type { margin-top: 0; padding-top: 0; border-top: 0; }
.sch-week .sch-ev-d { height: 40px; }
.sch-ev-d.vacation { background: var(--pos-soft); color: var(--pos); }
.sch-ev-d.sick { background: var(--info-soft); color: var(--info); }
.sch-ev-d.vacation span, .sch-ev-d.sick span { color: inherit; opacity: .8; }

/* запросы на подтверждение */
.sch-reqs { display: flex; flex-direction: column; }
.sch-req { padding: 12px 0; }
.sch-req:first-child { padding-top: 0; }
.sch-req:last-child { padding-bottom: 0; }
.sch-req + .sch-req { border-top: 1px solid var(--line); }
.sch-req .li-main { flex: 1; min-width: 0; }
.sch-req .li-sub { white-space: normal; }
.sch-req-act { margin-top: 10px; padding-left: 38px; gap: 6px; }
.sch-req-act .btn.sm { height: 32px; }
.btn.soft.sch-ok { color: var(--ink); }
.btn.soft.sch-ok .ic { color: var(--pos); stroke-width: 2.2; }
.sch-more { margin-top: 10px; color: var(--ink-2); }
.sch-reqs.cut .sch-req:nth-child(n+4) { display: none; }
.sch-reqs.cut .sch-req:nth-child(3) { padding-bottom: 0; }
.sch-kf .ic { display: inline-block; vertical-align: -2px; margin-right: 4px; color: var(--neg); }
.sch-req.fresh { animation: sch-in .5s var(--ease) both; }
.sch-req-empty { display: flex; align-items: center; gap: 10px; padding: 14px 16px; border-radius: 16px; background: var(--pos-soft); color: var(--pos); font-weight: 500; }

/* всплывашки и окно */
.sch-pop { width: 300px; padding: 10px 8px 6px; }
.sch-kv { gap: 8px 14px; font-size: var(--t-sm); }
.sch-kv dd { font-weight: 500; }
.sch-pop-ic { width: 38px; height: 38px; flex: none; display: grid; place-items: center; border-radius: 13px; background: var(--surface-3); color: var(--ink-2); }
.sch-pop-ic.vacation { background: var(--pos-soft); color: var(--pos); }
.sch-pop-ic.sick { background: var(--info-soft); color: var(--info); }
.sch-pop-ic.swap { background: var(--violet-soft); color: var(--violet); }
.sch-impact { display: flex; align-items: center; gap: 8px; padding: 10px 12px; border-radius: 14px; background: var(--surface-2); font-size: var(--t-sm); color: var(--ink-2); }
.sch-impact.warn { background: var(--warn-soft); color: var(--warn); }

/* ---------- адаптив ---------- */
@media (max-width: 1280px) {
  /* две недели помещаются без прокрутки и на 1180 (сетка около 800 px при 828 доступных) */
  .sch-grid { --name-w: 172px; --col: 40px; --g: 5px; }
  .sch-grid.month { --name-w: 140px; --col: 19px; --g: 3px; }
  .sch-who-in { gap: 9px; padding: 0 8px 0 6px; }
  .sch-who .ava:not(.sm) { width: 32px; height: 32px; font-size: 12px; }
  .sch-who .nm { font-size: 14px; }
  .sch-who .sub { font-size: 10.5px; }
  .sch-low > .span-4 { grid-column: span 6; }
  .sch-low > .sch-reqc { grid-column: span 12; }
  .sch-reqs.cut .sch-req:nth-child(n+4) { display: block; }
  .sch-reqs.cut .sch-req:nth-child(3) { padding-bottom: 12px; }
  .sch-reqs.cut + .sch-more { display: none; }
}
@media (min-width: 861px) and (max-width: 1280px) {
  .sch-reqs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 28px; }
  .sch-req + .sch-req { border-top: 0; }
  .sch-req:nth-child(-n+2) { padding-top: 0; }
  .sch-req:nth-child(n+3) { border-top: 1px solid var(--line); }
}
@media (max-width: 860px) {
  .sch-low > .span-4, .sch-low > .sch-reqc { grid-column: span 12; }
}
@media (max-width: 720px) {
  .grid .sch-kpi.span-3 { grid-column: span 6; }
  .sch-kpi { min-height: 0; padding: 16px; gap: 10px; }
  .sch-kpi .kpi-label { font-size: 13px; }
  .sch-kpi .kpi-value { font-size: 28px; }
  .sch-kpi .round-btn { width: 30px; height: 30px; }
  .sch-kpi .kpi-foot { font-size: var(--t-xs); gap: 6px; flex-wrap: wrap; }
  .sch-gantt { padding: 18px 16px 14px; }
  .sch-scroll { margin: 0 -16px; padding: 10px 16px 12px; }
  .sch-tools { width: 100%; }
  .sch-nav { flex: 1 1 100%; justify-content: space-between; }
  .sch-nav .lbl { min-width: 0; }
  .sch-tools .seg { flex: 1 1 auto; }
  .sch-tools .seg button { flex: 1; justify-content: center; }
  .sch-tbtn { width: 42px; padding: 0; position: relative; }
  .sch-tbtn .sch-k { display: none; }
  .sch-tbtn .badge { position: absolute; top: -4px; right: -4px; }
  .sch-grid { --name-w: 110px; --col: 46px; --row: 54px; --g: 5px; --r: 13px; }
  .sch-grid.month { --name-w: 112px; --col: 30px; --row: 46px; }
  .sch-who-in { gap: 8px; padding: 0 6px 0 4px; }
  .sch-who .sub { font-size: 10.5px; }
  .sch-tz { display: none; }
  .sch-who .sub .tzm { display: inline; }
  .sch-who .nm { font-size: 13px; }
  .sch-who .ava, .sch-who .ava:not(.sm) { width: 28px; height: 28px; font-size: 11px; }
  .sch-who .ava-wrap .sdot { width: 9px; height: 9px; }
  .sch-who .chip { display: none; }
  .sch-corner .t-label { font-size: 10px; letter-spacing: .04em; }
  .sch-corner.cov span { font-size: 12px; }
  .sch-afk-stats { padding: 12px; gap: 8px; }
  .sch-dev-sel { width: 112px; }
  .mini-stat .v.sch-v { font-size: 17px; }
  .sch-req-act { padding-left: 0; flex-wrap: wrap; }
}

/* ---------- добавлено для живых данных ---------- */
.sch-col > .sch-evc { flex: 1; }
.card.hero.sch-kpi .kpi-foot { flex-wrap: wrap; }
.sch-nd { font: 500 18px/1.2 var(--f-ui); letter-spacing: -.01em; color: var(--ink-3); }
.card.hero .sch-nd { color: var(--hero-ink-2); }
.sch-team { display: flex; align-items: flex-end; min-width: 0; padding: 0 0 2px 6px; }
.sch-team > span { position: sticky; left: 6px; font-size: var(--t-xs); font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); white-space: nowrap; }
.sch-who.edit { cursor: pointer; }
.sch-who.edit:hover .sch-who-in { box-shadow: inset 0 0 0 1.5px var(--ink-4); }
.sch-mi { display: inline-grid; color: var(--ink-3); }
.sch-mi .ic { width: 12px; height: 12px; stroke-width: 2.2; }
.month .sch-mi .ic { width: 10px; height: 10px; }
.sch-sw.miss { box-shadow: inset 0 0 0 1.5px var(--neg); background: var(--surface-2); }
.sch-honest { margin-top: 16px; padding-top: 14px; display: flex; align-items: flex-start; gap: 8px; border-top: 1px dashed var(--line-2); font-size: var(--t-xs); line-height: 1.45; color: var(--ink-3); }
.sch-honest .ic { flex: none; margin-top: 1px; }
.sch-dev .li-main { min-width: 0; }
.sch-dev .li-title, .sch-dev .li-sub { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sch-dev.gone { opacity: .6; }
.sch-dev-sel { flex: none; width: 128px; height: 36px; font-size: var(--t-sm); }
.sch-week .li.click { cursor: pointer; }
.sch-color { width: 54px; padding: 4px; }
.sch-wk { display: flex; flex-direction: column; gap: 6px; }
.sch-wd { display: grid; grid-template-columns: 22px 28px 1fr 1fr; align-items: center; gap: 8px; font-size: var(--t-sm); }
.sch-wd .input { height: 34px; }
.sch-wd input[type="checkbox"] { width: 18px; height: 18px; accent-color: var(--accent-text); }
/* Экран «График», дополнение (владелец 06.10): цвет человека в клетках, виды дней (смена, выходной, отпуск, графика нет, архив),
   архив бывших менеджеров, окна «2 недели назад/вперёд», плитки с именами, разбор дня (шторка). Грузится после schedule.css. */

/* ---------- клетки: смена мягким полутоном цвета человека, текст остаётся цветом чернил ---------- */
.sch-c.tint {
  background: color-mix(in srgb, var(--mc) 26%, var(--cell));
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--mc) 40%, transparent);
}
.sch-c.tint.we { background: color-mix(in srgb, var(--mc) 20%, var(--cell-we)); }
:root[data-theme="dark"] .sch-c.tint { background: color-mix(in srgb, var(--mc) 32%, var(--cell)); }
:root[data-theme="dark"] .sch-c.tint.we { background: color-mix(in srgb, var(--mc) 25%, var(--cell-we)); }
.sch-c.tint[data-cell]:hover { box-shadow: inset 0 0 0 1.5px var(--ink-3); }
.sch-c.tint.is-late { box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--neg) 55%, transparent); }
.sch-c.tint.miss { box-shadow: inset 0 0 0 1.5px var(--neg); }
.sch-h { position: relative; z-index: 3; font: 600 10.5px/1 var(--f-ui); letter-spacing: -.02em; color: var(--ink); font-variant-numeric: tabular-nums; white-space: nowrap; }
/* выходной: штриховка без цвета; отпуск и больничный без плашки (скрыта фильтром): свой мягкий фон; графика нет: точечная рамка; архив: точки */
.sch-c.off.vac { background-color: var(--pos-soft); background-image: none; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--pos) 40%, transparent); }
.sch-c.off.sick { background-color: var(--info-soft); background-image: none; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--info) 40%, transparent); }
.sch-c.none { background: transparent; box-shadow: none; outline: 1.5px dotted var(--ink-4); outline-offset: -2px; }
.sch-c.arch { background: radial-gradient(circle, var(--ink-4) 1px, transparent 1.6px) 0 0 / 9px 9px; box-shadow: none; opacity: .5; }
.sch-sw.shift { background: color-mix(in srgb, var(--accent-text) 26%, var(--surface-2)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent-text) 40%, transparent); }
.sch-sw.none { background: transparent; outline: 1.5px dotted var(--ink-4); outline-offset: -2px; }

/* человек: цветная кромка слева, подхват и архив мягче */
.sch-who-in { box-shadow: inset 0 0 0 1px var(--line), inset 4px 0 0 var(--mc, transparent); }
.sch-who.edit:hover .sch-who-in { box-shadow: inset 0 0 0 1.5px var(--ink-4), inset 4px 0 0 var(--mc, transparent); }
.sch-who.arch .sch-who-in { opacity: .7; }
.sch-arch-h { width: 100%; padding: 0 0 2px 6px; border: 0; background: none; text-align: left; cursor: pointer; color: inherit; font: inherit; }
.sch-arch-h > span { display: inline-flex; align-items: center; gap: 6px; }
.sch-dh[data-day] { cursor: pointer; }
.sch-dh[data-day]:hover { box-shadow: inset 0 0 0 1.5px var(--ink-4); }

/* плитки */
.sch-names { display: block; font: 600 21px/1.2 var(--f-display); letter-spacing: -.01em; white-space: normal; overflow-wrap: anywhere; }
.sch-reqc { scroll-margin-top: 96px; }
.sch-opt { display: flex; align-items: flex-start; gap: 10px; padding: 10px 12px; border-radius: 14px; background: var(--surface-2); cursor: pointer; font-size: var(--t-sm); line-height: 1.4; }
.sch-opt input { flex: none; width: 18px; height: 18px; margin-top: 2px; accent-color: var(--accent-text); }

/* ---------- разбор дня ---------- */
.sd-lg { display: flex; flex-wrap: wrap; gap: 6px 14px; margin-bottom: 14px; font-size: var(--t-xs); color: var(--ink-3); }
.sd-lg > span { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.sd-sw { display: inline-block; flex: none; width: 16px; height: 10px; border-radius: 3px; }
.sd-p { padding: 16px 0 18px; border-top: 1px solid var(--line); }
.sd-p:first-of-type { border-top: 0; padding-top: 4px; }
.sd-p.focus { margin: 0 -12px; padding-left: 12px; padding-right: 12px; border-radius: 16px; background: color-mix(in srgb, var(--mc) 10%, transparent); border-top-color: transparent; }
.sd-ph { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; min-width: 0; }
.sd-nm { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; font-weight: 600; font-size: 15px; }
.sd-k { flex: none; }
.sd-k.work, .sd-k.swap { background: color-mix(in srgb, var(--mc) 28%, var(--surface)); color: var(--ink); }
.sd-k.vacation { background: var(--pos-soft); color: var(--pos); }
.sd-k.sick { background: var(--info-soft); color: var(--info); }
.sd-tl { position: relative; padding-top: 16px; margin-bottom: 12px; }
.sd-ax { position: absolute; top: 0; left: 0; right: 0; height: 14px; }
.sd-tk { position: absolute; top: 0; transform: translateX(-50%); font: 600 10px/14px var(--f-ui); color: var(--ink-3); font-variant-numeric: tabular-nums; }
.sd-tk:first-child { transform: none; }
.sd-tk:last-child { transform: translateX(-100%); }
.sd-tk.s { width: 1px; height: 14px; }
.sd-tk.s::after { content: ""; position: absolute; left: 0; bottom: 0; width: 1px; height: 5px; background: var(--line-2); }
.sd-lane { position: relative; height: 14px; margin-top: 4px; border-radius: 7px; overflow: hidden; background: color-mix(in srgb, var(--ink) 5%, transparent);
  background-image: repeating-linear-gradient(to right, transparent 0 calc(12.5% - 1px), var(--line) calc(12.5% - 1px) 12.5%); }
.sd-lane.sm { height: 8px; border-radius: 4px; }
.sd-b { position: absolute; top: 0; bottom: 0; min-width: 3px; border-radius: 4px; }
.sd-b.plan, .sd-sw.plan { background: color-mix(in srgb, var(--mc, var(--accent-text)) 34%, var(--surface)); box-shadow: inset 0 0 0 1.5px var(--mc, var(--accent-text)); }
.sd-b.on, .sd-sw.on { background: var(--mc, var(--pos)); }
.sd-b.afk, .sd-sw.afk { background: var(--warn); }
.sd-b.afk.over, .sd-sw.afk.over { background: var(--neg); }
.sd-b.gap, .sd-sw.gap { background: repeating-linear-gradient(-45deg, var(--neg) 0 2px, transparent 2px 5px); box-shadow: inset 0 0 0 1.5px var(--neg); }
.sd-b.panel, .sd-sw.panel { background: var(--info); }
.sd-b.geo, .sd-sw.geo { background: var(--violet); }
.sd-b.geo { min-width: 5px; border-radius: 50%; }
.sd-now { position: absolute; top: 14px; bottom: 0; width: 2px; margin-left: -1px; border-radius: 2px; background: var(--accent-text); pointer-events: none; }
.sd-kv { grid-template-columns: minmax(96px, max-content) 1fr; }
.sd-kv dd { min-width: 0; overflow-wrap: anywhere; }
.sd-kv .neg { color: var(--neg); }

/* месяц на узком экране: пояс виден в подписи («8-24 · +7»), чип GMT убираем, чтобы имя не обрезалось */
@media (max-width: 1280px) { .sch-grid.month .sch-tz { display: none; } .sch-grid.month .sch-who .sub .tzm { display: inline; } } /* метка пояса уходит в строку часов */

/* ---------- телефон: сетка листается внутри своего блока, имена липкие, подписи не прячутся ---------- */
@media (max-width: 720px) {
  .grid .sch-kpi.span-4 { grid-column: span 6; }
  .grid .sch-kpi.span-4:last-child:nth-child(odd) { grid-column: span 12; }
  .sch-names { font-size: 16px; }
  .sch-tools .sch-nav { order: 1; }
  .sch-tools .sch-win { order: 2; flex: 1 1 100%; width: 100%; }
  .sch-tools [data-sch-today] { order: 3; }
  .sch-tools [data-sch-filter] { order: 4; }
  .sch-win button { padding: 0 6px; font-size: 12px; white-space: nowrap; }
  .sch-who-in { box-shadow: inset 0 0 0 1px var(--line), inset 3px 0 0 var(--mc, transparent); }
  .sch-h { font-size: 9.5px; }
  .sch-grid { --name-w: 132px; }
  .sch-grid.month { --name-w: 132px; --row: 54px; } /* аудит 19.10, п. 16: «4-17 · Таиланд» целиком, две строки подписи не прижаты ко дну строки */
  .sch-who .sub, .sch-who.arch .sub, .sch-who.oc .sub { white-space: normal; overflow: visible; text-overflow: clip; line-height: 1.2; }
  .sd-kv dd { text-align: left; }
  .sch-scroll { max-width: 100vw; }
  .sd-p.focus { margin: 0 -8px; padding-left: 8px; padding-right: 8px; }
  .sd-kv { grid-template-columns: 1fr; gap: 2px 0; }
  .sd-kv dt { margin-top: 8px; }
}
/* Экран «График → Устройства» (владелец 06.10): вкладки аккаунтов, строки устройств, подсказка «чьё», журнал устройства, выход со всех
   аккаунтов, точность онлайна. Только токены var(--...), светлая и тёмная тема, телефон от 390 px (js/screens/schedule-6.js, -7.js, -8.js). */

.dv-tabsw { display: inline-flex; margin-right: 8px; }
.dv-card { padding-bottom: 18px; }
.dv-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.dv-tabs { max-width: 100%; }
.dv-segs { display: flex; gap: 8px; flex-wrap: wrap; }
.dv-filters { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; margin-top: 14px; }
.dv-tz { margin-top: 10px; } /* «часы в вашем поясе: ...» (владелец 18.10) */
.dv-q { flex: 1 1 240px; min-width: 200px; }
.dv-filters .select { width: auto; flex: 0 1 180px; min-width: 140px; }
.dv-chk { display: inline-flex; align-items: center; gap: 8px; font-size: var(--t-sm); color: var(--ink-2); cursor: pointer; }
.dv-body { margin-top: 8px; }
.dv-asks:not(:empty) { margin-top: 14px; display: flex; flex-direction: column; gap: 8px; }
.dv-ask { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: var(--r-md); background: var(--accent-soft); color: var(--ink); }
.dv-ask > .ic { flex: none; color: var(--accent-text); }
.dv-ask.dv-warn { background: var(--warn-soft); }
.dv-ask.dv-warn > .ic { color: var(--warn); }

/* строка устройства */
.dv-row { align-items: flex-start; gap: 14px; }
.dv-row.gone { opacity: .72; }
.dv-ico { width: 46px; height: 46px; flex: none; border-radius: 14px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; background: var(--surface-2); color: var(--ink-2); }
.dv-ico .ic { width: 18px; height: 18px; }
.dv-ico i { font: 600 9px/1 var(--f-ui); font-style: normal; letter-spacing: .01em; }
.dv-ico.ios { background: var(--info-soft); color: var(--info); }
.dv-ico.android { background: var(--pos-soft); color: var(--pos); }
.dv-ico.macos, .dv-ico.linux { background: var(--violet-soft); color: var(--violet); }
.dv-ico.windows { background: var(--info-soft); color: var(--info); }
.dv-ico.web { background: var(--warn-soft); color: var(--warn); }
.dv-main .li-title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dv-app { font-weight: 400; color: var(--ink-3); }
.dv-accs { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 6px; }
.dv-accs:empty { display: none; }
.chip.dv-acc { background: var(--surface-2); color: var(--ink-3); }
.chip.dv-acc.on { background: var(--accent-soft); color: var(--accent-text); }
.dv-who { width: 156px; align-self: center; }
.dv-sel { height: 36px; font-size: var(--t-sm); width: 100%; }
.dv-link { display: inline-flex; align-items: center; gap: 4px; padding: 2px 4px; border: 0; background: none; color: var(--ink-3); font-size: var(--t-xs); cursor: pointer; text-decoration: underline dotted; text-underline-offset: 3px; }
.dv-link:hover { color: var(--ink); }
.dv-hint { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 8px; }
.dv-hint-t { display: inline-flex; align-items: center; gap: 6px; font-size: var(--t-sm); font-weight: 500; color: var(--accent-text); }
.dv-why { margin-top: 8px; padding: 10px 12px; border-radius: var(--r-sm); background: var(--surface-2); display: flex; flex-direction: column; gap: 8px; }
.dv-cand { font-size: var(--t-sm); }
.dv-ev { font-size: var(--t-xs); color: var(--ink-3); margin-top: 2px; }

/* по людям */
.dv-person + .dv-person { margin-top: 18px; }
.dv-ph { display: flex; align-items: center; gap: 12px; padding: 10px 0 2px; }
.dv-out { flex: none; color: var(--neg); }

/* журнал устройства */
.dv-evs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-top: 16px; }
.dv-ev-l { display: flex; align-items: center; gap: 10px; min-width: 0; }
.dv-ev-l .ico-tile { width: 36px; height: 36px; border-radius: 12px; }
.dv-days { display: flex; flex-direction: column; margin-top: 8px; }
.dv-day { display: grid; grid-template-columns: 96px 1fr 112px; align-items: center; gap: 12px; padding: 7px 8px; border-radius: 10px; font-size: var(--t-sm); }
.dv-day.click { cursor: pointer; }
.dv-day.click:hover, .dv-day.on { background: var(--surface-2); }
.dv-dn { color: var(--ink-2); }
.dv-dc { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.dv-bar24 { position: relative; height: 8px; border-radius: var(--r-pill); background: var(--surface-3); overflow: hidden; }
.dv-bar24 i { position: absolute; top: 0; bottom: 0; min-width: 6px; border-radius: var(--r-pill); background: var(--accent-text); opacity: .85; }
.dv-pts { display: flex; flex-direction: column; gap: 4px; margin-top: 8px; }
.dv-pt { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; font-variant-numeric: tabular-nums; }
.dv-pt b { width: 28px; font-weight: 600; color: var(--ink-2); }
.dv-pt span { padding: 1px 6px; border-radius: 7px; background: var(--surface-2); font-size: var(--t-xs); color: var(--ink-2); }
.dv-err { color: var(--neg); }

/* выход со всех аккаунтов, точность онлайна */
.modal:has(.dv-rbody), .modal:has(.dv-days), .modal:has(.dv-stats) { width: min(620px, calc(100vw - 24px)); }
.dv-rrow { align-items: flex-start; }
.dv-rrow .dv-ico { width: 40px; height: 40px; }
.dv-warn-t { display: flex; align-items: center; gap: 4px; margin-top: 4px; color: var(--warn); }
.dv-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.dv-neg { color: var(--neg); }

@media (max-width: 640px) {
  .dv-row { flex-wrap: wrap; gap: 10px 12px; }
  .dv-row .dv-main { flex: 1 1 calc(100% - 62px); }
  .dv-who { width: 100%; align-self: stretch; margin-left: 58px; flex: 1 1 100%; }
  .dv-who .dv-sel { width: calc(100% - 58px); }
  .dv-evs { grid-template-columns: 1fr; }
  .dv-day { grid-template-columns: 78px 1fr 92px; gap: 8px; }
  .dv-stats { grid-template-columns: repeat(2, 1fr); }
  .dv-ask { flex-wrap: wrap; }
  .dv-ask .grow { flex: 1 1 calc(100% - 40px); }
  .dv-ph { flex-wrap: wrap; }
  .dv-bar { align-items: stretch; }
}
/* «График → Устройства → Заходы» (владелец 08.10): плашка у ушедшего, период, карточка человека, полоса по дням, шкала 24 часа с полосами заходов.
   Только токены var(--...), светлая и тёмная тема, телефон от 390 px (js/screens/schedule-9.js, -10.js). Цвет полосы = аккаунт (a0-a3), красное = после ухода. */

.vs-alarm { background: var(--neg-soft); }
.vs-alarm > .ic { color: var(--neg); }
.vs-bar { align-items: center; }
.vs-per { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.vs-leg { display: flex; flex-wrap: wrap; gap: 6px 16px; margin-top: 4px; font-size: var(--t-sm); color: var(--ink-2); }
.vs-leg > span { display: inline-flex; align-items: center; gap: 6px; }
.vs-dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; background: var(--c); margin-right: 5px; flex: none; }
.vs-leg .vs-dot { margin-right: 0; }
.a0 { --c: var(--pos); }
.a1 { --c: var(--info); }
.a2 { --c: var(--violet); }
.a3 { --c: var(--warn); }

/* человек */
.vs-p { padding: 16px 0 18px; border-top: 1px solid var(--line); }
.vs-p:first-child { border-top: 0; }
.vs-p.alarm { padding-left: 14px; box-shadow: inset 3px 0 0 var(--neg); }
.vs-h { display: flex; align-items: center; gap: 12px; cursor: pointer; border-radius: var(--r-sm); }
.vs-h:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.vs-who { min-width: 0; }
.vs-nm { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 8px; }
.vs-chev { flex: none; color: var(--ink-3); transition: transform var(--dur-1); }
.vs-p.open .vs-chev { transform: rotate(180deg); }
.vs-kpi { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px 20px; margin-top: 14px; }
.vs-kpi .mini-stat { gap: 4px; }
.vs-kpi .mini-stat .v { font-size: 22px; }
.vs-accs { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
.chip.vs-acc { background: var(--surface-2); color: var(--ink-2); }
.chip.vs-acc .vs-dot { margin-right: 6px; }

/* полоса по дням: число заходов в клетке, насыщенность от самого частого дня */
.vs-strip { display: flex; gap: 4px; margin-top: 12px; overflow-x: auto; padding-bottom: 2px; }
.vs-c { flex: 1 0 40px; display: flex; flex-direction: column; align-items: center; gap: 1px; padding: 5px 2px 4px; border-radius: var(--r-sm);
  background: color-mix(in srgb, var(--pos) calc(var(--l) * 11%), var(--surface-2)); font-variant-numeric: tabular-nums; }
.vs-c i, .vs-c u { font: 500 10px/1.2 var(--f-ui); font-style: normal; text-decoration: none; color: var(--ink-2); }
.vs-c b { font: 600 16px/1.25 var(--f-ui); color: var(--ink); }
.vs-c.post { box-shadow: inset 0 -2px 0 var(--neg); }

/* устройства человека */
.vs-dvs { display: flex; flex-direction: column; gap: 8px; margin-top: 14px; }
.vs-dv { display: flex; align-items: center; gap: 10px; }
.vs-dv.gone { opacity: .7; }
.vs-dv .dv-ico { width: 32px; height: 32px; border-radius: 10px; flex: none; }
.vs-dv .dv-ico .ic { width: 16px; height: 16px; }
.vs-dv .grow { min-width: 0; }

/* шкала 24 часа по дням */
.vs-days { margin-top: 14px; display: flex; flex-direction: column; }
.vs-d { display: grid; grid-template-columns: 82px minmax(0, 1fr) 150px; gap: 4px 12px; align-items: center; padding: 6px 0; border-top: 1px solid var(--line); font-size: var(--t-sm); }
.vs-d.vs-ax { border-top: 0; padding: 0 0 4px; }
.vs-d.none { color: var(--ink-3); }
.vs-dn { color: var(--ink-2); white-space: nowrap; font-variant-numeric: tabular-nums; }
.vs-d.post .vs-dn { color: var(--neg); font-weight: 600; }
.vs-flag { display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--neg); margin-left: 6px; vertical-align: middle; }
.vs-axl { position: relative; height: 14px; font: 500 10px/14px var(--f-ui); color: var(--ink-3); font-variant-numeric: tabular-nums; }
.vs-axl span { position: absolute; top: 0; transform: translateX(-50%); }
.vs-axl span:first-child { transform: none; }
.vs-axl span:last-child { transform: translateX(-100%); }
.vs-tr { position: relative; height: calc(var(--ln) * 12px + 2px); border-radius: 6px; overflow: hidden; background-color: var(--surface-2);
  background-image: linear-gradient(to right, var(--line-2) 1px, transparent 1px); background-size: 12.5% 100%; }
.vs-tr i { position: absolute; top: calc(var(--k) * 12px + 1px); height: 10px; min-width: 5px; border-radius: 4px; background: var(--c); }
.vs-tr i.cr { border-top-right-radius: 0; border-bottom-right-radius: 0; }
.vs-tr i.cl { border-top-left-radius: 0; border-bottom-left-radius: 0; }
.vs-dt { font-variant-numeric: tabular-nums; min-width: 0; }
.vs-n { display: inline-flex; align-items: center; margin-left: 6px; }
.vs-n:first-child { margin-left: 0; }
.vs-n .vs-dot { margin-right: 3px; }

@media (max-width: 640px) {
  .vs-p.alarm { padding-left: 12px; }
  .vs-kpi { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .vs-h { flex-wrap: wrap; }
  .vs-h .dv-out { order: 3; margin-left: 48px; }
  .vs-d { grid-template-columns: 70px minmax(0, 1fr); }
  .vs-d > :first-child { grid-row: 1; }
  .vs-dt { grid-column: 2; }
  .vs-d.vs-ax > :last-child { display: none; }
  .vs-bar { align-items: stretch; }
}
/* «Менеджеры» (живой): вкладки по людям, лидерборд, скорость ответа, мотивация. Только своё, префикс mg-. */

/* мелочи вместо инлайновых стилей */
.mg-w5 { font-weight: 500; }
.mg-w6 { font-weight: 600; }
.mg-ink { color: var(--ink); }
.mg-ico-round { width: 28px; height: 28px; border-radius: 50%; }
.mg-ico-sm { width: 34px; height: 34px; border-radius: 11px; }
.mg-st { color: var(--ink-3); }
.mg-st.pos { color: var(--pos); } .mg-st.warn { color: var(--warn); } .mg-st.info { color: var(--info); } .mg-st.neg { color: var(--neg); }

/* мягкий край справа у прокручиваемых полос (класс ставит mount, пока справа есть что листать) */
.mg-more {
  -webkit-mask-image: linear-gradient(90deg, black calc(100% - 56px), transparent);
  mask-image: linear-gradient(90deg, black calc(100% - 56px), transparent);
}

/* ---------- вкладки-таблетки и «кто сейчас на смене» ---------- */
.mg-tools { flex-wrap: nowrap; }
.mg-tabs { flex: 1 1 auto; min-width: 0; max-width: 100%; }
.mg-tabs .sdot { width: 8px; height: 8px; }
.mg-tabs button[aria-pressed="true"] .sdot { box-shadow: 0 0 0 2px color-mix(in srgb, var(--inverse-ink) 20%, transparent); }
.mg-now { display: flex; align-items: center; gap: 10px; flex: none; height: 42px; padding: 0 14px 0 6px; border-radius: var(--r-pill); background: var(--surface); border: 1px solid var(--glass-line); }
.mg-now .ava { box-shadow: 0 0 0 2.5px var(--surface); }
.mg-now .ava.mg-ava-off { background: var(--surface-3); color: var(--ink-3); }
.mg-fresh { flex: 0 1 auto; min-width: 0; }
.mg-board .mg-fresh { align-self: flex-start; padding-top: 6px; }

/* ---------- KPI в духе Nixtio: значок, число с «/ план», таблетки-деления ---------- */
.mg-kpi { display: flex; flex-direction: column; gap: 18px; }
.mg-kpi-top { display: flex; align-items: center; gap: 12px; min-height: 42px; }
.mg-kpi-r { flex: none; display: flex; }
.mg-kpi .ico-tile { width: 42px; height: 42px; border-radius: 14px; background: var(--surface-2); color: var(--ink); }
.mg-kpi.accent .ico-tile { background: var(--surface); color: var(--ink); }
.mg-kpi.hero .ico-tile { background: color-mix(in srgb, var(--hero-ink) 12%, transparent); color: var(--hero-ink); }
.mg-kpi .kpi-label { font-weight: 500; }
.mg-kpi-val { display: flex; align-items: flex-end; gap: 12px; min-width: 0; }
.mg-kpi .kpi-value { font-size: 50px; line-height: .92; }
.mg-kpi .kpi-value.mg-time { font-size: 44px; }
.mg-kpi-aside { display: flex; flex-direction: column; align-items: flex-start; gap: 7px; padding-bottom: 2px; min-width: 0; }
.mg-of { font-size: var(--t-sm); color: var(--ink-3); line-height: 1.25; }
.card.accent .mg-of { color: color-mix(in srgb, var(--accent-ink) 62%, transparent); }
.card.hero .mg-of { color: var(--hero-ink-2); }
.mg-vis { margin-top: auto; height: 64px; display: flex; flex-direction: column; justify-content: flex-end; }
.mg-vis .pills { height: 64px; justify-content: space-between; }
.mg-vis .pills > i { max-width: 28px; }
/* выполненная цель: таблетки лаймом (в лаймовой и героической карточке они и так выделены) */
.card:not(.accent):not(.hero) .pills.done > i { background: var(--accent); }
.mg-note { padding-bottom: 6px; }

/* значение в таблетке с кольцом (как «82% ◯») */
.mg-rchip { gap: 6px; background: var(--surface); color: var(--ink); box-shadow: 0 0 0 1px var(--line); }
.card.accent .mg-rchip { background: var(--surface); color: var(--ink); box-shadow: none; }
.card.hero .mg-rchip { box-shadow: none; }
.mg-rchip .ring .ring-track { stroke: color-mix(in srgb, currentColor 20%, transparent); }

/* шкала «медиана против регламента» */
.mg-gauge { display: flex; flex-direction: column; gap: 8px; }
.mg-gauge-track { position: relative; height: 28px; border-radius: 10px; box-shadow: inset 0 0 0 1px var(--line); background-image: repeating-linear-gradient(-45deg, var(--hatch-c) 0 1.6px, transparent 1.6px 7px); }
.mg-gauge-track i { position: absolute; inset: 0 auto 0 0; border-radius: 10px; background: var(--inverse); }
.mg-gauge-track b { position: absolute; top: 50%; width: 12px; height: 12px; margin: -6px 0 0 -6px; border-radius: 50%; background: var(--surface); box-shadow: 0 0 0 2.5px var(--inverse); cursor: default; }
.mg-gauge-track em { position: absolute; top: -5px; bottom: -5px; width: 0; border-left: 1.5px dashed var(--neg); }
.mg-gauge-l { display: flex; justify-content: space-between; font-size: var(--t-xs); color: var(--ink-3); }

.mg-names { display: flex; flex-wrap: wrap; gap: 6px; align-content: flex-end; height: 64px; overflow: hidden; }
.mg-names .chip { cursor: pointer; }
.mg-names button.chip:hover { border-color: var(--ink-3); }

/* ---------- лидерборд: подиум и таблица ---------- */
.mg-board .card-head { margin-bottom: 14px; }
.mg-podium { display: grid; grid-template-columns: 1.15fr 1fr 1fr; gap: 12px; padding: 0 22px 18px; }
.mg-pod {
  position: relative; display: flex; align-items: center; gap: 12px; min-width: 0; text-align: left;
  padding: 14px 18px 14px 14px; border-radius: 22px; background: var(--surface-2);
  transition: background var(--dur-1), transform var(--dur-2) var(--ease);
}
.mg-pod:hover { background: var(--surface-3); transform: translateY(-2px); }
.mg-pod.p1 { background: var(--accent-soft); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 55%, transparent); }
.mg-pod.p1 .ava { box-shadow: 0 0 0 3px var(--accent); }
.mg-pod-place {
  position: absolute; left: 46px; top: 10px; z-index: 1;
  width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center;
  font: 600 11px/1 var(--f-display); background: var(--surface); color: var(--ink-2); box-shadow: 0 0 0 2px var(--surface-2);
}
.mg-pod.p1 .mg-pod-place { background: var(--accent); color: var(--accent-ink); box-shadow: 0 0 0 2px var(--surface); }
.mg-pod-place .ic { width: 12px; height: 12px; }
.mg-pod-txt { display: flex; flex-direction: column; gap: 3px; min-width: 0; flex: 1; }
.mg-pod-txt b { font-weight: 600; font-size: 15px; }
.mg-pod-txt span { font-size: var(--t-xs); color: var(--ink-3); }
.mg-pod-v { display: flex; flex-direction: column; align-items: flex-end; flex: none; }
.mg-pod-v .num { font: 500 34px/1 var(--f-display); letter-spacing: -.04em; }
.mg-pod.p1 .mg-pod-v .num { font-size: 40px; }
.mg-pod-u { font-size: var(--t-xs); color: var(--ink-3); margin-top: 3px; }

.mg-tbl-wrap { padding: 0 12px 10px; }
.mg-tbl td { height: 68px; }
.mg-tbl th, .mg-tbl td { padding: 0 9px; }
.mg-tbl th:first-child, .mg-tbl td:first-child { padding-left: 14px; }
.mg-tbl th.r .th { justify-content: flex-end; width: 100%; }
.mg-tbl tbody tr.mg-lead-row td { background: color-mix(in srgb, var(--accent-soft) 60%, transparent); }
.mg-tbl tbody tr.mg-lead-row td:first-child { border-radius: 16px 0 0 16px; }
.mg-tbl tbody tr.mg-lead-row td:last-child { border-radius: 0 16px 16px 0; }
.mg-who { text-align: left; border-radius: 12px; }
.mg-who-t { display: flex; flex-direction: column; min-width: 0; }
.mg-tbl .name { display: flex; align-items: center; gap: 8px; }
.mg-lead { width: 22px; height: 22px; flex: none; border-radius: 50%; display: inline-grid; place-items: center; background: var(--accent); color: var(--accent-ink); }
.mg-lead .ic { width: 12px; height: 12px; }
.mg-lead.mg-lead-pend { background: var(--surface-2); color: var(--ink-3); } /* лидер идущего месяца: премия ещё не получена */
.mg-place {
  width: 30px; height: 30px; border-radius: 50%;
  display: inline-grid; place-items: center;
  font: 600 13px/1 var(--f-display); font-variant-numeric: tabular-nums;
  background: var(--surface-3); color: var(--ink-2);
}
.mg-place.first { background: var(--accent); color: var(--accent-ink); box-shadow: 0 0 0 4px var(--accent-soft); }
.mg-sla { display: flex; align-items: center; gap: 10px; min-width: 128px; }
.mg-sla .bar { flex: 1; min-width: 64px; }

/* ---------- графики ---------- */
.mg-stat .legend { margin-bottom: 4px; }
.mg-stat .chart { flex: 1; min-height: 300px; }
.mg-seg-wrap { min-width: 0; max-width: 100%; }
.mg-dist-top { align-items: flex-end; gap: 12px; }
.mg-dist-top .muted { padding-bottom: 4px; }
.mg-dist .chart { flex: 1; min-height: 210px; margin-top: 8px; }
.mg-dist .card-foot { flex-wrap: wrap; }
.mg-sw-reg { width: 16px; height: 0; border-top: 1.5px dashed var(--neg); flex: none; }
.mg-sw-off { width: 10px; height: 14px; border-radius: var(--r-pill); border: 1.4px dashed var(--ink-4); flex: none; }

/* ---------- какие заявки берут ---------- */
.mg-mixc { display: flex; flex-direction: column; }
.mg-mixc .card-foot { margin-top: auto; }
.mg-mixc .mg-mix { margin-bottom: 18px; }
.mg-mix-legend { margin-bottom: 14px; }
.mg-sw-s { background: var(--surface-3); box-shadow: inset 0 0 0 1px var(--line-2); }
.mg-sw-m { background: color-mix(in srgb, var(--inverse) 38%, var(--surface)); }
.mg-sw-l { background: var(--inverse); }
.mg-mix-head, .mg-mix-row { display: grid; grid-template-columns: 190px minmax(0, 1.55fr) 96px 96px; gap: 16px; align-items: center; }
.mg-mix-head { font-size: var(--t-xs); color: var(--ink-3); padding-bottom: 8px; }
.mg-mix-row { padding: 9px 0; border-top: 1px solid var(--line); cursor: pointer; border-radius: 4px; }
.mg-mix-row.team { cursor: default; border: 1px dashed var(--line-2); border-radius: 16px; padding: 9px 10px; margin: 0 -10px 4px; }
.mg-mix-row:not(.team):hover .mg-mix-who span:not(.chip) { text-decoration: underline; text-underline-offset: 3px; }
.mg-mix-who { display: flex; align-items: center; gap: 10px; min-width: 0; font-weight: 500; }
.mg-seg { display: flex; gap: 3px; height: 28px; min-width: 0; }
.mg-seg > i {
  display: grid; place-items: center; min-width: 5px; overflow: hidden;
  border-radius: 9px; font: 600 11px/1 var(--f-ui); font-style: normal; font-variant-numeric: tabular-nums;
}
.mg-seg .s { background: var(--surface-3); color: var(--ink-2); }
.mg-seg .m { background: color-mix(in srgb, var(--inverse) 38%, var(--surface)); color: var(--ink); }
.mg-seg .l { background: var(--inverse); color: var(--inverse-ink); }
.mg-seg .f { background: var(--accent); color: var(--accent-ink); }

/* ---------- премия за количество ---------- */
.mg-race { display: flex; flex-direction: column; gap: 14px; }
.mg-race-row { display: grid; grid-template-columns: 28px 84px minmax(0, 1fr) 40px 30px; gap: 10px; align-items: center; cursor: pointer; border-radius: 12px; }
.mg-race-name { font-weight: 500; }
.mg-race-bar {
  display: flex; gap: 3px; height: 30px; border-radius: 11px; overflow: hidden;
  background-image: repeating-linear-gradient(-45deg, var(--hatch-c) 0 1.6px, transparent 1.6px 7px);
  box-shadow: inset 0 0 0 1px var(--line);
}
.mg-race-bar i { border-radius: 11px; min-width: 4px; }
.mg-race-bar .d { background: var(--inverse); }
.mg-race-bar .a { background: var(--accent); }
.mg-race-n { font: 500 17px/1 var(--f-display); text-align: right; }
.mg-race-gap { text-align: right; font-variant-numeric: tabular-nums; display: flex; justify-content: flex-end; }

/* правила мотивации плитками (как Help Center у Nixtio) */
.mg-rules { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.mg-rule {
  display: flex; flex-direction: column; gap: 6px; text-align: left; min-width: 0;
  padding: 14px; border-radius: 20px; background: var(--surface-2); color: var(--ink-3);
  transition: background var(--dur-1), transform var(--dur-2) var(--ease);
}
.mg-rule:hover { background: var(--surface-3); transform: translateY(-2px); }
.mg-rule .ico-tile { width: 34px; height: 34px; border-radius: 11px; background: var(--surface); color: var(--ink); }
.mg-rule b { margin-top: 8px; font-weight: 500; color: var(--ink); line-height: 1.25; }
.mg-rule > span:last-child { font-size: var(--t-xs); line-height: 1.35; }

/* ---------- шапка человека: сетка, кнопки справа вверху, статы отдельной строкой ---------- */
.mg-head { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: start; gap: 24px; padding: 28px 30px 24px; overflow: hidden; }
.mg-head::before {
  content: ""; position: absolute; pointer-events: none;
  width: 460px; height: 460px; right: -140px; top: -230px; border-radius: 50%;
  background: radial-gradient(circle, var(--accent-glow), transparent 64%); opacity: .45;
}
.mg-head > * { position: relative; }
.mg-head-id { display: flex; align-items: center; gap: 24px; min-width: 0; }
.mg-head .ava.mg-ava { width: 96px; height: 96px; font-size: 32px; letter-spacing: -.03em; }
.mg-head .ava-wrap .sdot { width: 18px; height: 18px; right: 4px; bottom: 4px; box-shadow: 0 0 0 4px var(--surface); }
.mg-head-txt { min-width: 0; }
.mg-name { display: flex; align-items: center; gap: 10px 16px; flex-wrap: wrap; font: 500 58px/1 var(--f-display); letter-spacing: -.045em; }
.mg-status {
  display: inline-flex; align-items: center; gap: 8px;
  height: 44px; padding: 0 18px 0 15px; border-radius: var(--r-pill);
  font: 500 15px/1 var(--f-ui); letter-spacing: 0; white-space: nowrap;
  background: var(--surface-3); color: var(--ink-2);
}
.mg-status .sdot { width: 9px; height: 9px; }
.mg-status .sdot.mg-cur { background: currentColor; }
.mg-status.on { background: var(--accent); color: var(--accent-ink); }
.mg-status.afk { background: var(--warn-soft); color: var(--warn); }
.mg-head-btns { display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
.mg-hstats {
  grid-column: 1 / -1; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px;
  padding-top: 20px; border-top: 1px dashed var(--line-2);
}
.mg-hstats .vdiv { display: none; }
.mg-hstat ~ .mg-hstat { border-left: 1px solid var(--line); padding-left: 20px; }
.mg-hstat { display: flex; flex-direction: column; gap: 7px; min-width: 0; }
.mg-hstat .l { font-size: var(--t-sm); color: var(--ink-3); }
.mg-hstat .v { font: 500 26px/1.05 var(--f-display); letter-spacing: -.03em; white-space: nowrap; font-variant-numeric: tabular-nums; }
.mg-hstat .v.mg-now-v { font: 600 17px/1.25 var(--f-ui); letter-spacing: -.01em; white-space: normal; }
.mg-hstat-now { gap: 4px; }
.mg-hstat-now .l { margin-bottom: 3px; }

/* ---------- мотивация в моменте: светлая карточка с контурными линиями и лаймовым свечением ---------- */
.mg-pay {
  display: flex; flex-direction: column; overflow: hidden;
  background-image:
    repeating-radial-gradient(circle at 96% 116%, transparent 0 17px, var(--line) 17px 18px),
    repeating-radial-gradient(circle at 8% -40%, transparent 0 23px, color-mix(in srgb, var(--line) 70%, transparent) 23px 24px);
}
.mg-pay::after {
  content: ""; position: absolute; pointer-events: none; z-index: 0;
  width: 360px; height: 360px; right: -120px; bottom: -170px; border-radius: 50%;
  background: radial-gradient(circle, var(--accent-glow), transparent 66%); opacity: .55;
}
.mg-pay > * { position: relative; z-index: 1; }
.mg-pay .card-head { margin-bottom: 10px; }
.mg-pay-total { display: flex; align-items: baseline; gap: 4px; flex-wrap: wrap; }
.mg-pay-total .t-hero { font-size: 64px; }
.mg-pay-unit { font: 500 22px/1 var(--f-ui); color: var(--ink-3); margin-left: 6px; }
.mg-pay-total .chip { align-self: center; margin-left: 12px; }
.mg-pay-bar { height: 14px; gap: 4px; margin: 18px 0 4px; }
.mg-pay-bar > i { border-radius: var(--r-pill); min-width: 8px; }
.mg-pay-list { display: flex; flex-direction: column; margin-top: 8px; }
.mg-pay-li { display: grid; grid-template-columns: 10px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 10px 0; border-top: 1px solid var(--line); }
.mg-pay-li:first-child { border-top: 0; }
.mg-pay-li .k { font-weight: 500; }
.mg-pay-li .s { font-size: var(--t-xs); color: var(--ink-3); margin-top: 2px; }
.mg-pay-li .v { font: 500 18px/1 var(--f-display); letter-spacing: -.02em; font-variant-numeric: tabular-nums; white-space: nowrap; }
.mg-pay-li .v .unit { font-size: 11px; vertical-align: baseline; margin-left: 4px; }
.mg-pay-li.fine .v { color: var(--neg); }
.mg-pay-foot { margin-top: auto; padding-top: 14px; border-top: 1px dashed var(--line-2); display: flex; align-items: center; gap: 8px; font-size: var(--t-xs); color: var(--ink-3); }

/* ---------- бонусы (Goal tracker + итог кольцом, как Financial health у ACRU) ---------- */
.mg-goals-card { display: flex; flex-direction: column; }
.mg-bsum { display: flex; align-items: center; gap: 16px; padding: 14px 16px; margin-bottom: 18px; border-radius: 20px; background: var(--surface-2); }
.mg-bsum-n { font: 600 13px/1 var(--f-display); }
.mg-bsum-v { font: 500 30px/1 var(--f-display); letter-spacing: -.04em; margin-bottom: 4px; }
.mg-goals { display: flex; flex-direction: column; gap: 16px; }
.mg-goal { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 14px; align-items: start; }
.mg-goal .ico-tile { width: 40px; height: 40px; border-radius: 13px; }
.mg-goal-t { font-weight: 500; }
.mg-goal-v { font-size: var(--t-sm); white-space: nowrap; }
.mg-goal-v b { font-weight: 600; }
.mg-goal-bar { position: relative; margin: 9px 0 7px; }
.mg-goal-bar .bar { height: 12px; }
.mg-goal-bar > b { position: absolute; top: -4px; bottom: -4px; width: 4px; margin-left: -2px; border-radius: 2px; background: var(--surface); box-shadow: 0 0 0 1.5px var(--ink-2); }
.mg-goal-bar i.mg-striped { background-image: repeating-linear-gradient(-45deg, color-mix(in srgb, var(--accent-ink) 14%, transparent) 0 2px, transparent 2px 8px); }

/* ---------- какие заявки берёт (один менеджер) ---------- */
.mg-mixone { display: flex; flex-direction: column; }
.mg-cmps { display: flex; flex-direction: column; gap: 18px; }
.mg-cmp { position: relative; height: 12px; margin-top: 10px; border-radius: var(--r-pill); background: var(--surface-3); }
.mg-cmp > i { position: absolute; inset: 0 auto 0 0; border-radius: inherit; background: var(--inverse); }
.mg-cmp > i.hl { background: var(--accent); }
.mg-cmp > b, .mg-sw-tick { position: absolute; top: -5px; bottom: -5px; width: 4px; margin-left: -2px; border-radius: 2px; background: var(--surface); box-shadow: 0 0 0 1.5px var(--ink-2); }
.mg-sw-tick { position: static; display: inline-block; height: 14px; margin: 0 2px; }
.mg-mixone .card-foot { margin-top: auto; }
.mg-mixone .mg-cmps { margin-bottom: 18px; }

/* ---------- свои дополнения живой версии ---------- */
.mg-head-r { align-items: center; justify-content: flex-end; flex-wrap: wrap; }
.mg-board-foot { padding: 0 22px 18px; font-size: var(--t-xs); color: var(--ink-3); line-height: 1.5; }
.card.hero .pills > i.mg-alt { background: color-mix(in srgb, var(--hero-accent) 68%, transparent); }
.mg-vis .pills > i.mg-g { margin-left: 7px; }
.mg-kpi .kpi-value.mg-long { font-size: 30px; line-height: 1.5; }
.mg-gauge-l { position: relative; height: 15px; }
.mg-gauge-l span { position: absolute; left: 0; top: 0; white-space: nowrap; }
.mg-gauge-l span.neg { transform: translateX(-50%); }
.mg-gauge-l span.r { left: auto; right: 0; }
.mg-sw-reg.d { border-top-color: var(--warn); }
.mg-shift { display: flex; flex-direction: column; gap: 8px; }
.mg-shift .bar.tall { height: 30px; }
.mg-shift .bar > i.warn { background: var(--warn); }
.mg-shift-l { display: flex; justify-content: space-between; gap: 8px; font-size: var(--t-xs); color: var(--ink-3); font-variant-numeric: tabular-nums; }
/* плитка «Сделки»: три равные колонки, числа в одной строке сетки (одна базовая линия), подписи в другой; колонки-обёртки растворены (display: contents) */
.mg-dsum { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-rows: auto auto; grid-auto-flow: column; align-items: baseline; justify-items: center; column-gap: 8px; row-gap: 5px; padding: 11px 14px; border-radius: 18px; text-align: center; background: color-mix(in srgb, var(--accent-ink) 9%, transparent); }
.mg-dsum > div { display: contents; }
.mg-dsum .num { font: 500 19px/1 var(--f-display); letter-spacing: -.03em; white-space: nowrap; }
.mg-dsum .l { font-size: var(--t-xs); line-height: 1.2; white-space: nowrap; opacity: .7; }
.mg-link { font-weight: 500; text-align: left; }
.mg-link:hover { text-decoration: underline; text-underline-offset: 3px; }
.mg-rep { display: flex; flex-direction: column; margin: 14px 0 4px; }
.mg-rep-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 12px; align-items: baseline; padding: 9px 0; border-top: 1px solid var(--line); font-size: var(--t-sm); }
.mg-rep-row:first-child { border-top: 0; }
.mg-rep-row b { font-weight: 600; font-size: 16px; white-space: nowrap; }
.mg-rep-row .t-xs { grid-column: 1 / -1; }
.mg-det { margin-top: 10px; padding-top: 10px; border-top: 1px dashed var(--line-2); }
.mg-det summary { display: flex; align-items: center; gap: 8px; cursor: pointer; list-style: none; font-size: var(--t-sm); font-weight: 500; color: var(--ink-2); }
.mg-det summary::-webkit-details-marker { display: none; }
.mg-det summary::after { content: "+"; margin-left: auto; color: var(--ink-3); }
.mg-det[open] summary::after { content: "-"; }
.mg-det p { margin: 8px 0 0; line-height: 1.5; }
.mg-det .list { margin-top: 6px; max-height: 320px; overflow: auto; }
.mg-mix-n { text-align: right; font-size: var(--t-sm); }
.mg-mix-head .r { text-align: right; }
.mg-form .t-hero { font-size: 44px; }
.mg-form { display: flex; flex-direction: column; }
.mg-form .mg-pay-li .v { font-size: 16px; }
.mg-form .mg-pay-foot { margin-top: auto; }
.mg-profit { display: flex; flex-direction: column; }
.mg-profit .mg-pay-foot { margin-top: auto; }
.mg-pspd-body { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 24px; align-items: center; flex: 1; }
.mg-pspd .chart { min-height: 240px; }
.mg-pspd .legend { margin-bottom: 4px; }

/* ---------- адаптив ---------- */
@media (max-width: 1400px) {
  /* вкладкам нужно место; таблица целиком: без вторых строк про чек и заявки, план числом, полоса регламента короче */
  .mg-now { display: none; }
  .mg-tbl .sub.mg-opt { display: none; }
  .mg-sla { min-width: 84px; }
  .mg-sla .bar { min-width: 30px; }
}
@media (max-width: 1280px) {
  .mg-tbl th, .mg-tbl td { padding: 0 6px; }
  .mg-sla { gap: 6px; }
  /* KPI два в ряд: таблетки не толстеют, деления остаются делениями */
  .mg-kpi.span-3 { grid-column: span 6; }
  .mg-mix-head, .mg-mix-row { grid-template-columns: 150px minmax(0, 1.4fr) 84px 84px; }
  .mg-pod-v .num, .mg-pod.p1 .mg-pod-v .num { font-size: 30px; }
}
/* 1025-1280: мотивация и бонусы парой 7+5, последние сделки отдельной строкой в три колонки */
@media (min-width: 1025px) and (max-width: 1280px) {
  .mg-row-pay > .mg-pay.span-5 { grid-column: span 7; }
  .mg-row-pay > .mg-goals-card.span-4 { grid-column: span 5; }
  .mg-row-pay > .mg-form.span-3 { grid-column: span 12; }
}
@media (max-width: 1100px) {
  .mg-pspd-body { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 860px) {
  .mg-name { font-size: 42px; }
  .mg-podium { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .mg-pod { flex-direction: column; align-items: flex-start; gap: 8px; padding: 12px; }
  .mg-pod-place { left: 40px; top: 8px; }
  .mg-pod-v { flex-direction: row; align-items: baseline; gap: 5px; }
  .mg-pod-txt span { display: none; }
}
@media (max-width: 720px) {
  .mg-board .mg-fresh { display: none; }
  .mg-vis:has(.mg-names) { height: auto; min-height: 44px; }
  .mg-names { height: auto; align-content: flex-start; }
  /* KPI 2×2 компактно: число и деления, без чипов сравнения */
  .mg-kpi.span-3 { grid-column: span 6; }
  .mg-kpi { padding: 16px; gap: 12px; }
  .mg-kpi-top { gap: 8px; min-height: 32px; align-items: flex-start; }
  .mg-kpi .ico-tile { width: 32px; height: 32px; border-radius: 11px; }
  .mg-kpi .ico-tile .ic { width: 16px; height: 16px; }
  .mg-kpi .kpi-label { font-size: 13px; line-height: 1.25; padding-top: 1px; }
  .mg-kpi-r { display: none; }
  .mg-kpi-val { flex-direction: column; align-items: flex-start; gap: 4px; }
  .mg-kpi .kpi-value { font-size: 34px; }
  .mg-kpi .kpi-value.mg-time { font-size: 26px; }
  .mg-kpi-aside .chip { display: none; }
  .mg-of { font-size: var(--t-xs); }
  .mg-vis { height: 44px; }
  .mg-vis .pills { height: 44px; gap: 3px; }
  .mg-gauge-track { height: 22px; }
  .mg-shift .bar.tall { height: 22px; }
  .mg-shift-mid { display: none; }
  .mg-note { font-size: var(--t-xs); }

  .mg-podium { gap: 8px; padding: 0 14px 14px; }
  .mg-pod { border-radius: 18px; padding: 10px; }
  .mg-pod .ava.lg { width: 36px; height: 36px; font-size: 13px; }
  .mg-pod-place { left: 32px; top: 4px; width: 18px; height: 18px; font-size: 10px; }
  .mg-pod-txt b { font-size: 13px; }
  .mg-pod-v .num, .mg-pod.p1 .mg-pod-v .num { font-size: 24px; }

  .mg-head { grid-template-columns: minmax(0, 1fr); padding: 20px; gap: 16px; }
  .mg-head-id { gap: 12px 16px; align-items: center; flex-wrap: wrap; }
  .mg-head-txt { display: contents; }
  .mg-head-txt .mg-name { flex: 1; min-width: 0; }
  .mg-head-txt > .row { flex-basis: 100%; margin-top: 4px; }
  .mg-head .ava.mg-ava { width: 64px; height: 64px; font-size: 22px; }
  .mg-head .ava-wrap .sdot { width: 14px; height: 14px; right: 2px; bottom: 2px; box-shadow: 0 0 0 3px var(--surface); }
  .mg-name { font-size: 36px; gap: 10px; }
  .mg-status { height: auto; min-height: 32px; padding: 6px 12px; font-size: 13px; line-height: 1.25; white-space: normal; max-width: 100%; }
  .mg-dsum { padding: 8px 4px; column-gap: 2px; row-gap: 4px; }
  .mg-dsum .num { font-size: 15px; }
  .mg-dsum .l { font-size: 9.5px; }
  .mg-mix-n { font-size: var(--t-xs); }
  .mg-mix-n:nth-last-child(2)::before { content: "сумма "; color: var(--ink-3); }
  .mg-mix-n:last-child::before { content: "расчёт "; color: var(--ink-3); }
  .mg-head .chip.lg { height: 28px; font-size: var(--t-sm); }
  .mg-head-btns { justify-content: flex-start; }
  .mg-hstats { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; padding-top: 16px; }
  .mg-hstat ~ .mg-hstat { border-left: 0; padding-left: 0; }
  .mg-hstat .v { font-size: 22px; }
  .mg-hstat .v.mg-now-v { font-size: 15px; }

  .mg-rules { grid-template-columns: minmax(0, 1fr); }
  .mg-rule { flex-direction: row; align-items: center; gap: 12px; }
  .mg-rule > .row { order: -1; }
  .mg-rule .mg-rule-go { display: none; }
  .mg-rule b { margin: 0; flex: none; }
  .mg-mix-head { display: none; }
  .mg-mix-row { grid-template-columns: minmax(0, 1fr) auto auto; gap: 8px 10px; }
  .mg-mix-who { grid-column: 1 / -1; }
  .mg-race-row { grid-template-columns: 28px 70px minmax(0, 1fr) 34px 24px; gap: 8px; }
  .mg-pay-total .t-hero { font-size: 48px; }
  .mg-pay-unit { font-size: 18px; }
  .mg-stat .chart { min-height: 240px; }
}

/* время в пульте: строка человека (имя, сегодня, 14 столбцов, среднее) и карточка одного человека */
.mg-pu-row { display: grid; grid-template-columns: minmax(150px, 1.1fr) minmax(120px, 160px) minmax(180px, 2fr) 120px; align-items: center; gap: 16px; padding: 12px 4px; border-top: 1px solid var(--line); border-radius: var(--r-sm); }
.mg-pu-row:first-of-type { border-top: 0; }
.mg-pu-row.click { cursor: pointer; transition: background var(--dur-1); }
.mg-pu-row.click:hover { background: var(--surface-2); }
.mg-pu-t, .mg-pu-a { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.mg-pu-t b, .mg-pu-a b { font: 500 20px/1.1 var(--f-display); letter-spacing: -.02em; }
.mg-pu-a { text-align: right; }
.mg-pu-bars { display: flex; align-items: flex-end; gap: 4px; height: 40px; min-width: 0; }
.mg-pu-bars i { flex: 1; min-width: 3px; border-radius: 3px; background: var(--c-1); opacity: .82; }
.mg-pu-bars i:last-child { background: var(--accent); opacity: 1; }
.mg-pu-bars i.z { background: var(--line-2); opacity: 1; }
.mg-pu-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; margin: 4px 0 20px; }
.mg-pu > .mg-pu-bars { height: 72px; }
@media (max-width: 860px) {
  .mg-pu-row { grid-template-columns: minmax(0, 1fr) auto; row-gap: 8px; }
  .mg-pu-row .mg-pu-bars { grid-column: 1 / -1; height: 28px; order: 3; }
  .mg-pu-a { display: none; }
  .mg-pu-stats { grid-template-columns: 1fr; gap: 14px; }
}
/* «Менеджеры → один человек», «Где был на смене» (js/screens/managers-geo.js), только владелец. Только токены, обе темы,
   телефон 375 px: сводка 2 на 2, лента в один столбец. Префикс mg-geo-. */
.mg-geo-in { display: grid; gap: 16px; min-width: 0; transition: opacity var(--dur-2) var(--ease); }
.mg-geo-in.mg-geo-busy { opacity: .45; pointer-events: none; }

/* день: стрелки, дата, пояс; ниже дни с данными */
.mg-geo-bar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.mg-geo-date { width: auto; min-width: 150px; flex: 0 1 180px; }
.mg-geo-bar .icon-btn[disabled] { opacity: .35; cursor: default; }
.mg-geo-days { display: flex; gap: 6px; flex-wrap: wrap; margin-top: -6px; }

/* сводка */
.mg-geo-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.mg-geo-c { display: flex; flex-direction: column; gap: 4px; min-width: 0; padding: 12px 14px; border-radius: 18px; background: var(--surface-2); }
.mg-geo-c .num { font: 500 26px/1 var(--f-display); letter-spacing: -.03em; white-space: nowrap; color: var(--ink); }
.mg-geo-c .l { font-size: var(--t-sm); color: var(--ink-2); }

/* лента: остановка, переезд, остановка (линия слева соединяет места) */
.mg-geo-line { list-style: none; margin: 0; padding: 0; display: grid; }
.mg-geo-stay { display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 12px; align-items: start; }
.mg-geo-dot { width: 34px; height: 34px; border-radius: 11px; display: grid; place-items: center; background: var(--surface-2); color: var(--ink); }
.mg-geo-main { display: grid; gap: 3px; min-width: 0; padding-bottom: 2px; }
.mg-geo-main b { color: var(--ink); font-weight: 600; }
.mg-geo-link { display: inline-flex; align-items: center; gap: 6px; width: fit-content; font-size: var(--t-sm); color: var(--ink); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--line-2); }
.mg-geo-link:hover { text-decoration-color: var(--ink); }
.mg-geo-move { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin-left: 11px; padding: 8px 0 8px 18px; border-left: 2px dashed var(--line-2); color: var(--ink-3); }

@media (max-width: 720px) {
  .mg-geo-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mg-geo-c .num { font-size: 22px; }
  .mg-geo-date { flex: 1 1 140px; }
}
/* Часовой пояс человека по геолокации (владелец 09.10, js/tzgeo.js, js/screens/tzgeo-owner.js). Только токены, обе темы, телефон 375 px.
   tz-why: «Зачем делиться геолокацией» под шагом окна «Настройте устройство» (цвет текста наследуется: на тёмной плашке светлый);
   tz-line, tz-me: строка с местным временем в окне смены и в меню профиля; tzo-*: карточка пояса в «Менеджеры → один человек» (владелец).
   «График» с 18.10 весь в поясе смотрящего, своих стилей здесь у него нет. */

/* окно первого запуска: свёрнутое пояснение под шагом геолокации */
.tz-why { font-size: var(--t-sm); line-height: 1.45; }
.tz-why summary { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; list-style: none; font-weight: 600; text-decoration: underline; text-decoration-style: dotted; text-underline-offset: 3px; }
.tz-why summary::-webkit-details-marker { display: none; }
.tz-why[open] summary { text-decoration: none; }
.tz-why p { margin: 8px 0 4px; font-weight: 600; }
.tz-why ul { margin: 0; padding-left: 18px; display: grid; gap: 4px; list-style: disc; }
.pf-hint .tz-why { margin-top: 8px; }
.pf-hint .tz-why:first-child { margin-top: 0; }

/* окно смены и меню профиля: свой пояс */
.tz-line { display: flex; align-items: flex-start; gap: 8px; color: var(--ink-2); }
.tz-line .ic-sm { flex: none; margin-top: 2px; color: var(--ink-3); }
.tz-line b { color: var(--ink); font-weight: 600; }
.tz-me { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 11px; font-size: var(--t-sm); color: var(--ink-2); cursor: default; }
.tz-me .ic-sm { flex: none; color: var(--ink-3); }
.tz-me b { color: var(--ink); font-weight: 600; }
.tz-me-t { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* карточка владельца: пояс, откуда, расхождение с геолокацией, смены пояса */
.tzo { display: grid; gap: 12px; min-width: 0; }
.tzo-top { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.tzo-ic { width: 40px; height: 40px; border-radius: 13px; display: grid; place-items: center; flex: none; background: var(--surface-2); color: var(--ink); }
.tzo-main { display: grid; gap: 2px; min-width: 0; flex: 1 1 220px; }
.tzo-name { font: 500 20px/1.15 var(--f-display); letter-spacing: -.02em; color: var(--ink); }
.tzo-name .unit { font: 500 var(--t-sm)/1 var(--f-ui); color: var(--ink-3); letter-spacing: 0; }
.tzo-time { display: flex; gap: 8px; flex-wrap: wrap; }
.tzo-warn { display: flex; gap: 10px; align-items: flex-start; flex-wrap: wrap; padding: 10px 12px; border-radius: var(--r-lg); background: var(--warn-soft); color: var(--ink); font-size: var(--t-sm); line-height: 1.4; }
.tzo-warn .ic-sm { flex: none; margin-top: 2px; color: var(--warn); }
.tzo-warn .grow { flex: 1 1 220px; min-width: 0; }
.tzo-hist { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; font-size: var(--t-sm); color: var(--ink-2); }
.tzo-hist li { display: flex; gap: 8px; flex-wrap: wrap; align-items: baseline; }
.tzo-hist .when { color: var(--ink-3); font-variant-numeric: tabular-nums; }
.tzo-pick { display: grid; gap: 10px; }
.tzo-pick .btn-row { display: flex; gap: 8px; flex-wrap: wrap; }

@media (max-width: 720px) {
  .tzo-name { font-size: 18px; }
  .tz-me-t { white-space: normal; }
}
/* «Менеджеры → один человек», «Смены по местному времени» (js/screens/managers-local.js). Только токены, обе темы, телефон 390 px: вторичные
   колонки (смена, сделки) уходят под дату, сделки дня в две строки. Префикс mgl-. Движения нет, кроме поворота стрелки раскрытия (без анимации
   при prefers-reduced-motion). */
.mgl-in { display: grid; gap: 12px; min-width: 0; }
.mgl-sum { display: flex; align-items: center; gap: 8px 12px; flex-wrap: wrap; justify-content: space-between; font-size: var(--t-body); color: var(--ink); }
.mgl-sumt { min-width: 0; flex: 1 1 260px; }
.mgl-clip { margin-top: -6px; }
.mgl-wait { display: flex; align-items: center; gap: 8px; padding: 8px 10px; }

/* дни: колонки на компьютере, на телефоне дата и стрелка, под ними смена и сделки */
.mgl-cols, .mgl-h { display: grid; grid-template-columns: 170px minmax(0, 1fr) minmax(0, 1.5fr) 24px; gap: 6px 16px; align-items: center; }
.mgl-cols { padding: 0 10px 6px; border-bottom: 1px solid var(--line-2); }
.mgl-days { list-style: none; margin: 0; padding: 0; display: grid; }
.mgl-day { border-bottom: 1px solid var(--line); min-width: 0; }
.mgl-day:last-child { border-bottom: 0; }
.mgl-h { width: 100%; min-height: 52px; padding: 8px 10px; border: 0; border-radius: var(--r-sm); background: none; color: inherit; font: inherit; text-align: left; }
button.mgl-h { cursor: pointer; transition: background var(--dur-1); }
button.mgl-h:hover { background: var(--surface-2); }
.mgl-day.open > button.mgl-h { background: var(--surface-2); }
.mgl-date { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 8px; min-width: 0; }
.mgl-date b { color: var(--ink); font-weight: 600; font-variant-numeric: tabular-nums; }
.mgl-plan, .mgl-deals { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 8px; min-width: 0; font-variant-numeric: tabular-nums; }
.mgl-n { color: var(--ink); font-weight: 600; }
.mgl-chev { display: grid; place-items: center; color: var(--ink-3); }
.mgl-chev .ic { transition: transform var(--dur-1) var(--ease); }
.mgl-day.open .mgl-chev .ic { transform: rotate(180deg); }

/* сделки раскрытого дня */
.mgl-list { padding: 4px 0 10px 18px; }
.mgl-ds { list-style: none; margin: 0; padding: 0 0 0 8px; display: grid; gap: 2px; border-left: 2px solid var(--line-2); }
.mgl-d { display: grid; grid-template-columns: 56px minmax(0, 1.3fr) minmax(0, 1fr) 128px; gap: 4px 14px; align-items: center; width: 100%; min-height: 44px; padding: 6px 10px; border: 0; border-radius: var(--r-sm); background: none; color: inherit; font: inherit; text-align: left; }
button.mgl-d { cursor: pointer; transition: background var(--dur-1); }
button.mgl-d:hover { background: var(--surface-3); }
.mgl-t { color: var(--ink); font-weight: 600; font-variant-numeric: tabular-nums; }
.mgl-a { min-width: 0; color: var(--ink); font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.mgl-bd { justify-self: end; }
.mgl-c { min-width: 0; color: var(--ink-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

@media (max-width: 720px) {
  .mgl-cols { display: none; }
  .mgl-h { grid-template-columns: minmax(0, 1fr) 24px; grid-template-areas: "date chev" "plan plan" "deals deals"; padding: 10px 8px; width: calc(100% + 16px); margin-inline: -8px; } /* текст строки на одной линии с заголовком карточки, подсветка по-прежнему шире текста (аудит 19.10, п. 14: сдвиг был 8 px) */
  .mgl-plan > .num:first-child::before { content: "смена: "; color: var(--ink-3); font-weight: 400; } /* подписи колонок «Смена по плану» и «Сделки» на телефоне скрыты: теперь они префиксом */
  .mgl-deals > .mgl-n::before { content: "сделки: "; color: var(--ink-3); font-weight: 400; }
  .mgl-h0 { grid-template-areas: "date date" "plan plan" "deals deals"; }
  .mgl-date { grid-area: date; }
  .mgl-plan { grid-area: plan; }
  .mgl-deals { grid-area: deals; }
  .mgl-chev { grid-area: chev; }
  .mgl-list { padding-left: 6px; }
  .mgl-d { grid-template-columns: 52px minmax(0, 1fr); grid-template-areas: "t a" "t c" "t bd"; padding: 8px 8px; }
  .mgl-t { grid-area: t; align-self: start; }
  .mgl-a { grid-area: a; }
  .mgl-c { grid-area: c; white-space: normal; }
  .mgl-bd { grid-area: bd; justify-self: start; }
}
@media (prefers-reduced-motion: reduce) { .mgl-chev .ic, button.mgl-h, button.mgl-d { transition: none; } }
/* «Менеджеры внутри дня» (волна 40, js/mgday.js, screens/now-11.js, screens/managers-day.js), «Регина в графике владельца и управляющего» (screens/schedule-11.js)
   и подсветка «похоже, работала Регина» (волна 41, screens/ghost-mark.js: .mgd-gh в строке Максима, .cd-gh у сообщения).
   Только токены, обе темы, телефон 390 px: на «Сейчас» строка человека в три слоя (имя и статус, первое сообщение, четыре числа), в «Менеджерах» таблица
   прокручивается вбок, как лидерборд. Префикс mgd- и sch-g-. Движения нет. */

/* карточка на «Сейчас» */
.now-mgd { flex: none; display: flex; flex-direction: column; }
.now-mgd .card-head { margin-bottom: 8px; flex-wrap: nowrap; }
.now-mgd .card-head > :first-child { flex: 1; }
.now-mgd .card-head .round-btn { flex: none; }
.mgd-list { display: flex; flex-direction: column; min-width: 0; }
.mgd-row { display: grid; gap: 5px; padding: 11px 0; border-top: 1px solid var(--line); min-width: 0; }
.mgd-row:first-child { border-top: 0; padding-top: 2px; }
.mgd-top { display: flex; align-items: center; gap: 10px; min-width: 0; }
.mgd-name { flex: 1; min-width: 0; font-weight: 500; color: var(--ink); }
.mgd-mid { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 2px 10px; padding-left: 38px; font-size: var(--t-sm); font-variant-numeric: tabular-nums; }
.mgd-f { color: var(--ink); }
.mgd-f.pos { color: var(--pos); }
.mgd-f.warn { color: var(--warn); }
.mgd-f.neg { color: var(--neg); font-weight: 600; }
.mgd-f.faint { color: var(--ink-3); }
.mgd-sh { font-size: var(--t-xs); color: var(--ink-3); }
.mgd-nums { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 4px 8px; padding-left: 38px; }
.mgd-n { display: flex; flex-direction: column; min-width: 0; }
.mgd-n b { font-size: var(--t-body); font-weight: 600; color: var(--ink); line-height: 1.25; }
.mgd-n i { font-style: normal; font-size: var(--t-xs); color: var(--ink-3); }

/* таблица дня в «Менеджерах» */
.mgd-day .mgd-body { padding: 0 12px 4px; min-width: 0; }
.mgd-day .card-head { padding-bottom: 8px; }
.mgd-tbl td { height: 64px; }
.mgd-tbl th, .mgd-tbl td { padding: 0 9px; }
.mgd-tbl th:first-child, .mgd-tbl td:first-child { padding-left: 14px; }
.mgd-tbl .cell-user { display: flex; align-items: center; gap: 10px; }
.mgd-who { display: flex; flex-direction: column; min-width: 0; }
.mgd-who .name { color: var(--ink); font-weight: 500; }
.mgd-foot { padding: 10px 14px 14px; line-height: 1.5; }
.mgd-tbl td .neg, .mg-tbl td .neg { color: var(--neg); }

.mgd-narrow { display: none; }
@media (max-width: 720px) { /* телефон: главное (первое сообщение и числа) не прячется за прокруткой вбок, строка человека как на «Сейчас» */
  .mgd-mid, .mgd-nums { padding-left: 0; }
  .mgd-day .mgd-body { padding: 0 14px 4px; }
  .mgd-wide { display: none; }
  .mgd-narrow { display: flex; }
  .mgd-foot { padding: 10px 0 14px; }
}

/* График владельца: строка человека из архива, заходы и гипотеза в разборе дня */
.sch-c.arch.ghost { position: relative; }
.sch-c.arch.ghost.seen { background: color-mix(in srgb, var(--mc, var(--ink-3)) 26%, transparent); opacity: 1; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--mc, var(--ink-3)) 45%, transparent); }
.sch-c.arch.ghost[data-cell]:hover { box-shadow: inset 0 0 0 1.5px var(--ink-3); opacity: 1; }
.sch-g-a { position: absolute; inset: 0; display: grid; place-items: center; font-size: var(--t-xs); color: var(--ink); font-variant-numeric: tabular-nums; }
.sch-c.arch.ghost .sdot { position: absolute; top: 3px; right: 3px; }
.sch-who.gh .sub { white-space: normal; overflow: visible; text-overflow: clip; line-height: 1.25; }
.sch-who.gh .sub .h { color: var(--warn); }
.sch-who .sch-g-seen { color: var(--ink-2); }
.sd-g { display: grid; gap: 8px; margin-top: 10px; padding: 12px; border-radius: var(--r-sm); background: var(--surface-2); min-width: 0; }
.sd-g-h { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-weight: 600; color: var(--ink); }
.sd-g-h .chip { font-weight: 400; }
.sd-g-t { font-size: var(--t-sm); color: var(--ink-2); line-height: 1.5; }
.sd-g-l { display: grid; gap: 2px; margin: 0; padding: 0; list-style: none; }
.sd-g-i { display: grid; grid-template-columns: 48px minmax(0, 1fr); gap: 2px 10px; align-items: baseline; padding: 7px 8px; border-radius: var(--r-xs); background: transparent; border: 0; width: 100%; text-align: left; color: inherit; font: inherit; cursor: pointer; transition: background var(--dur-1); }
.sd-g-i:hover { background: var(--surface-3); }
.sd-g-i time { font-weight: 600; color: var(--ink); font-variant-numeric: tabular-nums; }
.sd-g-w { min-width: 0; color: var(--ink-2); font-size: var(--t-sm); overflow-wrap: anywhere; }
.sd-g-w b { color: var(--ink); font-weight: 500; }
.sd-g-w .neg { color: var(--neg); }
.sd-g-w .warn { color: var(--warn); }
.sd-g-n { font-size: var(--t-xs); color: var(--ink-3); line-height: 1.5; }

/* столбцы периода в лидерборде «Менеджеров»: подпись переносится, а не уезжает за край */
.mg-tbl td[data-mgd-col="first"] { min-width: 150px; max-width: 210px; }
.mg-tbl td[data-mgd-col="first"] .sub { display: block; white-space: normal; line-height: 1.3; }
.sd-g-more > summary { cursor: pointer; font-weight: 600; color: var(--ink); line-height: 1.4; }
.sd-g-in { display: grid; gap: 8px; margin-top: 10px; min-width: 0; }
@media (max-width: 720px) { /* телефон: в узкой подписи строки остаётся пометка, «была в» видно в разборе дня */
  .sch-who.gh .sub .sch-g-seen { display: none; }
  .sch-who.gh .sub { line-height: 1.15; }
}

/* подсветка «похоже, работала Регина» (волна 41): красная, если есть пары ответов до нескольких секунд, жёлтая, если только её устройство в сети */
.mgd-gh { display: inline-flex; align-items: flex-start; gap: 6px; max-width: 100%; box-sizing: border-box; padding: 5px 10px; border-radius: var(--r-xs); font-size: var(--t-sm); font-weight: 500; line-height: 1.3; text-decoration: none; cursor: pointer;
  color: var(--warn); background: color-mix(in srgb, var(--warn) 13%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--warn) 38%, transparent); transition: background var(--dur-1); }
.mgd-gh.neg { color: var(--neg); background: color-mix(in srgb, var(--neg) 12%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--neg) 38%, transparent); }
.mgd-gh:hover { background: color-mix(in srgb, var(--warn) 22%, transparent); }
.mgd-gh.neg:hover { background: color-mix(in srgb, var(--neg) 20%, transparent); }
.mgd-gh .ic { flex: none; width: 16px; height: 16px; margin-top: 1px; }
.mgd-gh span { min-width: 0; overflow-wrap: anywhere; }
.mgd-row > .mgd-gh { justify-self: start; margin-left: 38px; }
.mgd-who .mgd-gh { margin-top: 5px; align-self: flex-start; }
@media (max-width: 720px) { .mgd-row > .mgd-gh { margin-left: 0; } }
.cd-gh { display: inline-flex; align-items: center; gap: 3px; font-weight: 600; white-space: nowrap; cursor: help; color: var(--warn); }
.cd-gh.neg { color: var(--neg); }
.cd-gh .ic { width: 12px; height: 12px; }
/* Пульт 2.0: объяснение после автоматического AFK (js/discipline-gate.js) и «Дисциплина» в «Менеджеры → один человек»
   (js/screens/managers-discipline.js), только владелец. Только токены, обе темы, телефон 375 px. Префиксы dg- и dsc-. */
body.dg-lock { overflow: hidden; }
.dg {
  position: fixed; inset: 0; z-index: 110; overscroll-behavior: contain;
  display: flex; justify-content: center; align-items: center; padding: 24px 16px;
  background: var(--scrim); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px);
  animation: fade var(--dur-3) var(--ease) both;
}
.dg[hidden] { display: none; }
.dg .dg-card {
  width: min(520px, 100%); max-height: calc(100vh - 48px); max-height: calc(100dvh - 48px); overflow-y: auto; overscroll-behavior: contain;
  padding: 26px 26px 24px; box-shadow: var(--sh-pop); animation: rise var(--dur-3) var(--ease) both;
}
.dg-top { display: flex; align-items: center; justify-content: space-between; gap: 8px 12px; }
.dg-top .chip { font-weight: 600; }
.dg-title { margin: 14px 0 6px; font: 500 26px/1.15 var(--f-display); letter-spacing: -.03em; }
.dg-lead { margin: 0 0 16px; font-size: var(--t-body); line-height: 1.5; color: var(--ink-2); overflow-wrap: anywhere; }
.dg-label { display: block; margin-bottom: 8px; }
.dg-text { width: 100%; }
.dg-err { min-height: 22px; margin: 6px 0 4px; color: var(--neg); }
.dg-send { width: 100%; justify-content: center; }

/* «Дисциплина» у одного менеджера: ступень, недели, случаи с объяснениями */
.dsc-in { display: grid; gap: 16px; min-width: 0; }
.dsc-top { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); gap: 12px; }
.dsc-cell { display: flex; flex-direction: column; gap: 4px; min-width: 0; padding: 12px 14px; border-radius: 18px; background: var(--surface-2); }
.dsc-cell .num { font: 500 26px/1 var(--f-display); letter-spacing: -.03em; color: var(--ink); }
.dsc-cell .l { font-size: var(--t-sm); color: var(--ink-2); }
.dsc-ladder { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; }
.dsc-ladder li { display: flex; align-items: center; gap: 8px; font-size: var(--t-sm); color: var(--ink-3); }
.dsc-ladder li.on { color: var(--ink); font-weight: 600; }
.dsc-ladder li .chip { flex: none; }
.dsc-weeks { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 6px; align-items: end; }
.dsc-w { display: flex; flex-direction: column; align-items: center; gap: 4px; min-width: 0; }
.dsc-bar { width: 100%; max-width: 34px; min-height: 4px; border-radius: 6px; background: var(--line-2); }
.dsc-bar.on { background: var(--warn); }
.dsc-w .n { font-variant-numeric: tabular-nums; font-size: var(--t-sm); color: var(--ink-2); }
.dsc-w .t-xs { white-space: nowrap; }
.dsc-list { list-style: none; margin: 0; padding: 0; display: grid; }
.dsc-it { display: grid; gap: 4px; padding: 11px 0; min-width: 0; }
.dsc-it + .dsc-it { border-top: 1px solid var(--line); }
.dsc-head { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 8px; }
.dsc-text { margin: 0; font-size: var(--t-sm); color: var(--ink-2); overflow-wrap: anywhere; white-space: pre-wrap; }
.dsc-text.none { color: var(--neg); }
@media (max-width: 720px) {
  .dsc-top { grid-template-columns: minmax(0, 1fr); }
  .dg .dg-card { padding: 22px 18px 20px; }
}
/* Пульт 2.0, «Выплаты» (живой): большая плашка с графиком фонда, состав с изменением к прошлому месяцу, таблица с формулой
   по шагам, курс выплат, ручные строки, бонусы месяца, журнал. Только токены, префикс pr-. */

/* выбор месяца */
.pr-months button { position: relative; }
.pr-live { width: 7px; height: 7px; border-radius: 50%; background: var(--pos); box-shadow: 0 0 0 3px var(--pos-soft); animation: breathe 2s var(--ease) infinite; }
.pr-dotn { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 2px var(--accent-soft); }
.pr-msg { display: flex; align-items: center; gap: 8px; margin: -6px 4px 14px; padding: 10px 14px; border-radius: 14px; font-size: var(--t-sm); }
.pr-msg.err { background: var(--neg-soft); color: var(--neg); }

/* ---------- большая плашка ---------- */
.pr-hero { display: flex; flex-direction: column; }
.pr-hero-grid { display: grid; grid-template-columns: minmax(0, 1fr) 250px; gap: 26px; flex: 1; }
.pr-hero-main { min-width: 0; display: flex; flex-direction: column; }
.pr-hero-label { display: inline-flex; align-items: center; gap: 8px; font: 500 15px/1.3 var(--f-ui); letter-spacing: -.01em; }
.pr-hero-label .ic { color: var(--hero-ink-2); }
.pr-hero-total { margin-top: 20px; }
.pr-hero-total .t-hero { white-space: nowrap; }
.pr-hero-sub { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 12px; min-height: 22px; font-size: var(--t-sm); color: var(--hero-ink-2); }
.pr-hero-sub b { color: var(--hero-ink); font-weight: 600; }
.pr-curs { display: flex; gap: 8px; margin: 20px 0; flex-wrap: wrap; }
.pr-cur { display: flex; flex-direction: column; gap: 3px; min-width: 104px; padding: 9px 14px 10px; border-radius: 16px; background: color-mix(in srgb, var(--hero-ink) 8%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--hero-ink) 8%, transparent); }
.pr-cur-k { font: 600 10.5px/1.2 var(--f-ui); letter-spacing: .06em; text-transform: uppercase; color: var(--hero-ink-2); white-space: nowrap; }
.pr-cur-v { font: 500 20px/1.1 var(--f-display); letter-spacing: -.03em; white-space: nowrap; }
.pr-hero-note { display: flex; align-items: flex-start; gap: 8px; margin-top: auto; padding: 10px 14px; border-radius: 14px; font-size: var(--t-sm); color: var(--hero-ink-2); background: color-mix(in srgb, var(--hero-ink) 7%, transparent); }
.pr-hero-note .ic { margin-top: 2px; flex: none; }
.pr-hero.is-tall, .pr-log-card.is-tall { grid-row: span 2; }
.pr-log-card:not(.is-tall) { align-self: start; }
.pr-hero-side { display: flex; flex-direction: column; min-width: 0; padding-left: 24px; border-left: 1px solid var(--hero-line); }
.pr-hero-k { font-size: var(--t-xs); color: var(--hero-ink-2); }
.pr-hero-side .chart { flex: 1; height: auto; min-height: 180px; margin-top: 6px; }

/* шаги месяца */
.pr-steps { display: grid; grid-template-columns: repeat(var(--n, 4), minmax(0, 1fr)); gap: 10px; margin-top: 22px; padding-top: 18px; border-top: 1px dashed color-mix(in srgb, var(--hero-ink) 20%, transparent); }
.pr-step { position: relative; display: flex; align-items: center; gap: 10px; min-width: 0; text-align: left; color: var(--hero-ink); border-radius: 14px; }
.pr-step-dot { width: 30px; height: 30px; flex: none; border-radius: 50%; display: grid; place-items: center; font: 600 12px/1 var(--f-ui); color: var(--hero-ink-2); border: 1.5px dashed color-mix(in srgb, var(--hero-ink) 32%, transparent); }
.pr-step-dot .ic { width: 15px; height: 15px; stroke-width: 2.4; }
.pr-step.done .pr-step-dot { background: var(--hero-accent); color: var(--hero-bg); border-color: transparent; }
.pr-step.cur .pr-step-dot { background: var(--hero-ink); color: var(--hero-bg); border-color: transparent; }
.pr-step.cur .pr-step-dot b { font-weight: 700; }
/* шаг, который ждёт действия: оранжевый круг с кольцом, значок цветом текста плашки (виден в обеих темах) */
.pr-step.warn .pr-step-dot { background: var(--warn); color: var(--hero-ink); border-color: transparent; box-shadow: 0 0 0 3px color-mix(in srgb, var(--warn) 30%, transparent); }
.pr-step-txt { display: flex; flex-direction: column; min-width: 0; }
.pr-step-t { display: inline-flex; align-items: center; gap: 4px; font: 500 13.5px/1.25 var(--f-ui); white-space: nowrap; }
.pr-step-t .ic { width: 13px; height: 13px; color: var(--hero-ink-2); }
.pr-step-s { font-size: var(--t-xs); color: var(--hero-ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
button.pr-step:hover .pr-step-t { text-decoration: underline; text-underline-offset: 3px; }

/* ---------- состав ---------- */
.pr-comp { display: flex; flex-direction: column; }
.pr-comp-top { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.pr-comp-top .mini-stat { flex-direction: row; flex-wrap: wrap; align-items: baseline; column-gap: 4px; row-gap: 3px; padding: 9px 10px; border-radius: var(--r-md); background: var(--surface-2); }
.pr-comp-top .mini-stat .l { flex-basis: 100%; }
.pr-comp-top .mini-stat .v { font-size: 22px; }
.pr-comp-top .mini-stat .chip { align-self: center; padding: 0 6px; gap: 4px; }
.pr-comp .card-head { margin-bottom: 14px; }
.pr-stack { height: 26px; margin-top: 14px; }
.pr-comp-list { margin-top: 8px; }
.pr-comp-list .li { padding: 4px 0; gap: 10px; }
.pr-comp-list .li.is-zero .sw, .pr-comp-list .li.is-zero .li-main, .pr-comp-list .li.is-zero .pr-comp-a, .pr-comp-list .li.is-zero .pr-comp-p { opacity: .5; }
.pr-comp-a { width: 54px; text-align: right; }
.pr-comp-p { width: 36px; text-align: right; font-weight: 500; }
.pr-comp-d { width: 72px; flex: none; display: flex; justify-content: flex-end; }

/* ---------- курс выплат ---------- */
.pr-table-card .card-head { padding: 20px 22px 0; }
.pr-rates { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 22px; margin: 14px 22px 4px; padding: 10px 14px; border-radius: var(--r-md); background: var(--surface-2); }
.pr-rf { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
.pr-rf label { font-size: var(--t-sm); color: var(--ink-2); font-weight: 500; }
.pr-rate { position: relative; display: inline-flex; align-items: center; }
.pr-rate input {
  width: 86px; height: 32px; padding: 0 10px; border-radius: 10px;
  background: var(--surface); border: 1px solid var(--line-2); color: var(--ink);
  font-weight: 600; text-align: right; font-variant-numeric: tabular-nums;
  transition: border-color var(--dur-1), box-shadow var(--dur-1);
}
.pr-rate input:hover { border-color: var(--ink-3); }
.pr-rate input:focus { border-color: var(--ink-2); box-shadow: var(--focus); }
.pr-rate input:disabled { background: transparent; border-color: transparent; padding-right: 24px; cursor: default; }
.pr-rate.is-custom input { color: var(--accent-text); }
.pr-rate.is-bad input { border-color: var(--warn); box-shadow: 0 0 0 3px var(--warn-soft); }
.pr-rate .ic { position: absolute; right: 6px; width: 13px; height: 13px; color: var(--ink-3); pointer-events: none; }
.pr-rates-note { flex: 1 1 260px; min-width: 0; }

/* ---------- таблица ---------- */
.pr-table-card .card-actions { margin-left: auto; flex-wrap: wrap; justify-content: flex-end; }
.pr-wrap { position: relative; padding: 4px 10px 12px; }
.pr-tbl th, .pr-tbl td { padding: 0 8px; }
.pr-tbl th:first-child, .pr-tbl td:first-child { padding-left: 12px; }
.pr-tbl .cell-user { gap: 10px; }
.pr-user-t { display: flex; flex-direction: column; min-width: 0; }
.pr-tbl td { height: 66px; }
.pr-tbl .sub { white-space: nowrap; }
.pr-tbl .pr-c-pay .sub { white-space: normal; }
.pr-n { display: none !important; }
.pr-tbl .sub.pr-n-m { display: none; }
.pr-chev { display: grid; place-items: center; width: 18px; color: var(--ink-3); transition: transform var(--dur-2) var(--ease); }
.pr-chev .ic { width: 15px; height: 15px; }
.pr-row.is-open .pr-chev { transform: rotate(90deg); color: var(--ink); }
.pr-row.is-open td { background: var(--surface-2); border-bottom-color: transparent; }
.pr-row.is-open td:first-child { border-radius: 16px 0 0 0; }
.pr-row.is-open td:last-child { border-radius: 0 16px 0 0; }
.pr-strong { font-weight: 600; }
.pr-bonus { font-weight: 600; color: var(--accent-text); }
.pr-total b { font: 500 17px/1 var(--f-display); letter-spacing: -.02em; }
.pr-tbl tfoot td { height: 56px; border-top: 1px solid var(--line-2); font-weight: 500; }
.pr-tbl tfoot .sub { font-weight: 400; }
.pr-pay { display: flex; align-items: center; gap: 8px; }
.pr-cur-chip { display: inline-grid; place-items: center; height: 24px; padding: 0 7px; border-radius: 8px; background: var(--surface-3); font: 600 10.5px/1 var(--f-mono); letter-spacing: .02em; color: var(--ink-2); }
.pr-pay-u { font-weight: 600; }

/* раскрытие строки: формула */
.pr-tbl tr.pr-detail:hover { background: transparent; }
.pr-detail > td { height: auto; padding: 0; white-space: normal; border-bottom: 1px solid var(--line); }
.pr-detail-in { margin: 0 0 12px; padding: 16px 18px 18px; background: var(--surface-2); border-radius: 0 0 18px 18px; }
.pr-formula { display: flex; flex-wrap: wrap; align-items: stretch; gap: 8px; }
.pr-term { display: flex; flex-direction: column; gap: 3px; min-width: 92px; padding: 10px 14px; border-radius: 16px; background: var(--surface); border: 1px solid var(--line); }
.pr-term-k { font-size: var(--t-xs); color: var(--ink-3); white-space: nowrap; }
.pr-term-v { font: 500 20px/1.1 var(--f-display); letter-spacing: -.03em; white-space: nowrap; }
.pr-term-s { font-size: var(--t-xs); color: var(--ink-3); white-space: nowrap; }
.pr-term.is-neg .pr-term-v { color: var(--neg); }
.pr-term.is-total { background: var(--inverse); border-color: transparent; color: var(--inverse-ink); }
.pr-term.is-total .pr-term-k, .pr-term.is-total .pr-term-s { color: var(--inverse-ink-2); }
.pr-op { align-self: center; width: 14px; text-align: center; font: 500 18px/1 var(--f-display); color: var(--ink-3); }
.pr-bls { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin-top: 14px; }
.pr-bl { display: flex; align-items: center; gap: 10px; min-width: 0; padding: 10px 12px; border-radius: 16px; background: var(--surface); border: 1px solid var(--line); }
.pr-bl .ico-tile { width: 30px; height: 30px; border-radius: 10px; flex: none; }
.pr-bl .grow { display: flex; flex-direction: column; min-width: 0; }
.pr-bl-t { font-size: var(--t-sm); font-weight: 500; }
.pr-bl-s { font-size: var(--t-xs); color: var(--ink-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pr-bl-v { font-weight: 600; font-size: var(--t-sm); color: var(--ink-3); }
.pr-bl.is-got .pr-bl-v { color: var(--accent-text); }

/* ---------- ручные строки ---------- */
.pr-matrix .card-head { padding: 20px 22px 0; }
.pr-mwrap { padding: 8px 10px 14px; }
.pr-mtbl th, .pr-mtbl td { padding: 0 8px; }
.pr-mtbl th { vertical-align: middle; height: 46px; }
.pr-mtbl th .name { display: block; color: var(--ink); font-weight: 600; }
.pr-mtbl th .sub, .pr-m-l .sub { font-weight: 400; margin-top: 1px; }
.pr-m-l { font-weight: 500; min-width: 190px; }
.pr-mtbl tr.pr-m-sep td { border-top: 1px dashed var(--line-2); }
.pr-m-sheet { display: inline-block; padding: 5px 9px; border-radius: 10px; border: 1px solid var(--warn); background: var(--warn-soft); }
.pr-pin {
  width: 96px; height: 32px; padding: 0 9px; border-radius: 10px; text-align: right; font-weight: 500;
  background: var(--surface); border: 1px solid var(--line-2); color: var(--ink); font-variant-numeric: tabular-nums;
  transition: border-color var(--dur-1), box-shadow var(--dur-1);
}
.pr-pin:hover { border-color: var(--ink-3); }
.pr-pin:focus { border-color: var(--ink-2); box-shadow: var(--focus); }
.pr-pin.is-sheet { border-color: var(--warn); background: var(--warn-soft); }
.pr-sw { display: inline-block; width: 10px; height: 10px; border-radius: 3px; border: 1.5px solid var(--warn); background: var(--warn-soft); }

/* ---------- бонусы месяца ---------- */
.pr-goals { display: flex; flex-direction: column; }
.pr-goal { display: flex; align-items: center; gap: 14px; padding: 11px 0; min-width: 0; }
.pr-goal + .pr-goal { border-top: 1px solid var(--line); }
.pr-goal .ico-tile { width: 40px; height: 40px; }
.pr-goal .grow { display: flex; flex-direction: column; }
.pr-goal-t { font-weight: 500; }
.pr-goal-v { font-size: var(--t-sm); white-space: nowrap; }
.pr-goal-v b { font-weight: 600; }
.pr-goal-bar { height: 8px; margin-top: 9px; }
.pr-goal-l { display: flex; align-items: baseline; gap: 8px; min-width: 0; }
.pr-goal-l .faint { font-size: var(--t-xs); }
.pr-goal-r { display: flex; align-items: center; gap: 10px; flex: none; }
.pr-goal.is-win .ava { box-shadow: 0 0 0 2px var(--surface), 0 0 0 4px var(--accent); }
.pr-goal-f { gap: 10px; }
.pr-goals.is-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 36px; }
.pr-goals.is-grid .pr-goal + .pr-goal { border-top: 0; }
.pr-goals.is-grid .pr-goal:nth-child(n+3) { border-top: 1px solid var(--line); }

/* ---------- журнал ---------- */
.pr-log-card { display: flex; flex-direction: column; }
.pr-log .li { padding: 10px 0; }
.pr-log .ico-tile { width: 36px; height: 36px; border-radius: 12px; }
.pr-log .li-title { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; line-height: 1.35; }
.pr-log-amt { font-size: var(--t-sm); font-weight: 500; }
.pr-next-h { display: flex; align-items: center; gap: 10px; margin: 6px 0 2px; }
.pr-next-h::after { content: ""; flex: 1; border-top: 1px dashed var(--line-2); }
.pr-next .li { width: 100%; text-align: left; }
.pr-next .ico-tile { background: transparent; border: 1.5px dashed var(--line-2); color: var(--ink-3); }
.pr-next .li-title { font-weight: 500; color: var(--ink-2); }
.pr-next .li-side { font-size: var(--t-sm); color: var(--ink-3); }
.pr-next .ico-tile.is-sum { border-style: solid; border-color: transparent; background: var(--surface-2); color: var(--ink-2); }
.pr-next .li-side.is-sum { color: var(--ink); font-weight: 500; }
button.li:hover .li-title { text-decoration: underline; text-underline-offset: 3px; }

/* окно утверждения */
.pr-modal .list .li-side { font-size: var(--t-sm); }
.pr-modal-warn { display: flex; align-items: center; gap: 10px; width: 100%; padding: 10px 14px; border-radius: 14px; background: var(--warn-soft); color: var(--ink); font-size: var(--t-sm); text-align: left; }
.pr-modal-warn .ic { color: var(--warn); }
button.pr-modal-warn:hover .grow { text-decoration: underline; text-underline-offset: 3px; }

/* ---------- адаптив ---------- */
/* ноутбук 1181-1280: плашка 7 + состав 5; в таблице штрафы и прочее уходят подписью под итог */
@media (max-width: 1280px) {
  .pr-hero { grid-column: span 7; }
  .pr-comp, .pr-next-m { grid-column: span 5; }
  .pr-hero-grid { grid-template-columns: minmax(0, 1fr) 176px; gap: 18px; }
  .pr-hero-side { padding-left: 16px; }
  .pr-cur { min-width: 0; flex: 1; padding: 8px 11px 9px; }
  .pr-cur-v { font-size: 18px; }
  .pr-step { gap: 8px; }
  .pr-step-dot { width: 26px; height: 26px; }
  .pr-step-t { font-size: 13px; }
  .pr-step-s { white-space: normal; line-height: 1.3; }
  .pr-tbl tr.pr-row > td { height: 70px; }
  .pr-w { display: none !important; }
  .pr-n { display: block !important; }
  .pr-bls { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* до 1180 плашка и состав на всю ширину */
@media (max-width: 1180px) {
  .pr-hero, .pr-comp, .pr-next-m { grid-column: span 12; }
  .pr-hero.is-tall { grid-row: auto; }
  .pr-hero-grid { grid-template-columns: minmax(0, 1fr) 250px; gap: 26px; }
  .pr-hero-side { padding-left: 24px; }
  .pr-cur { flex: 0 1 auto; min-width: 110px; }
  .pr-comp-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 32px; }
  .pr-w-m { display: none !important; }
  .pr-tbl .sub.pr-n-m { display: block; }
  .pr-tbl th, .pr-tbl td { padding: 0 6px; }
  .pr-tbl tr.pr-row > td { height: 74px; }
}
@media (max-width: 1024px) { .pr-log-card.is-tall { grid-row: auto; } }
@media (max-width: 900px) {
  .pr-w-s { display: none !important; }
  .pr-goals.is-grid { grid-template-columns: minmax(0, 1fr); }
  .pr-goals.is-grid .pr-goal + .pr-goal { border-top: 1px solid var(--line); }
}
@media (max-width: 860px) {
  .pr-w-t { display: none !important; }
  .pr-hero-grid { grid-template-columns: minmax(0, 1fr); gap: 18px; }
  .pr-hero-side { padding: 16px 0 0; border-left: 0; border-top: 1px solid var(--hero-line); }
  .pr-hero-side .chart { min-height: 150px; }
  .pr-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 14px; }
}

/* телефон: строки таблицы карточками (имя и итог, выплата), формула по тапу */
@media (max-width: 720px) {
  .pr-cur { min-width: 0; flex: 1; padding: 8px 12px; }
  .pr-cur-v { font-size: 17px; }
  .pr-comp-list { grid-template-columns: minmax(0, 1fr); }
  .pr-comp-d { width: 64px; }
  .pr-table-card .card-head, .pr-matrix .card-head { padding: 18px 16px 0; }
  .pr-rates { margin: 12px 16px 2px; gap: 10px 16px; }
  .pr-wrap { padding: 4px 12px 10px; overflow: visible; }
  .pr-mwrap { padding: 8px 6px 12px; }
  .pr-mtbl th:first-child, .pr-mtbl td:first-child { position: sticky; left: 0; z-index: 1; background: var(--surface); }
  .pr-m-l { min-width: 150px; }

  .pr-tbl, .pr-tbl tbody, .pr-tbl tfoot { display: block; width: 100%; }
  .pr-tbl thead { display: none; }
  .pr-tbl tr.pr-row {
    display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "user total" "pay pay";
    row-gap: 10px; column-gap: 12px; padding: 14px 4px; border-bottom: 1px solid var(--line);
  }
  .pr-tbl tbody tr.pr-row:hover { background: transparent; }
  .pr-tbl tr.pr-row > td { display: none; height: auto; padding: 0; border: 0; background: transparent !important; border-radius: 0 !important; }
  .pr-tbl tr.pr-row > td.pr-c-user { display: block; grid-area: user; align-self: center; }
  .pr-tbl tr.pr-row > td.pr-c-total { display: block; grid-area: total; align-self: center; text-align: right; }
  .pr-tbl tr.pr-row > td.pr-c-pay { display: flex; grid-area: pay; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
  .pr-tbl tr.pr-row > td.pr-c-pay .sub { margin: 0; }
  .pr-c-total b { font-size: 22px; }
  .pr-c-total .unit { font-size: var(--t-xs); vertical-align: baseline; }
  .pr-n { display: block !important; }
  .pr-row.is-open { background: var(--surface-2); border-radius: 18px 18px 0 0; border-bottom-color: transparent; padding-left: 10px; padding-right: 10px; }
  .pr-tbl tr.pr-detail { display: block; }
  .pr-tbl tr.pr-detail[hidden] { display: none; }
  .pr-detail > td { display: block; height: auto; border: 0; }
  .pr-detail-in { padding: 4px 10px 14px; }
  .pr-tbl tfoot tr { display: flex; align-items: center; justify-content: space-between; padding: 14px 4px 4px; }
  .pr-tbl tfoot td { display: none; height: auto; border: 0; padding: 0; }
  .pr-tbl tfoot td.pr-c-user, .pr-tbl tfoot td.pr-c-total { display: block; }
  .pr-tbl tfoot td.pr-c-total .sub { display: inline; margin-left: 4px; }
  .pr-bls { grid-template-columns: minmax(0, 1fr); }
  .pr-term { min-width: 0; flex: 1 1 40%; }
  .pr-term-s { white-space: normal; }
  .pr-goal { gap: 12px; }
  .pr-goal-l { flex-direction: column; align-items: flex-start; gap: 1px; }
  .pr-goal-l .faint { max-width: 100%; }
  .pr-goal-l { flex: 1; }
  .pr-goal-t { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
  .pr-goal:not(.is-win) .pr-goal-r .chip { display: none; }
  .pr-op { display: none; }
}
/* «Сверка»: героическое полукольцо, разбивка плитками и полосой с подменами менеджера, списки во вкладках с фильтрами и поиском,
   причины расхождений, сводка для бухгалтера и проверка самого отчёта. Из концепта design/pult-v2, без блоков, для которых
   сервер данных не отдаёт (график по дням, суммы в USDT, отметки «проверено»).
   Один словарь цветов на экран: полностью = чернила, частично = акцент, только у бота = --c-4, только в отчёте = штриховка.
   Только токены, префикс rc-. */

.rc-fresh .ic { flex: none; }

/* метки категорий на обычной карточке */
.rc-sw { display: inline-block; width: 10px; height: 10px; border-radius: 3px; flex: none; background: var(--c-1); }
.rc-sw.full { background: var(--c-1); }
.rc-sw.part { background: var(--accent); }
.rc-sw.bot { background: var(--c-4); }
.rc-sw.rep { background-color: transparent; background-image: repeating-linear-gradient(-45deg, var(--ink-3) 0 1.4px, transparent 1.4px 4px); box-shadow: inset 0 0 0 1px var(--line-2); }
.rc-seg.full { background: var(--c-1); }
.rc-seg.part { background: var(--accent); }
.rc-seg.bot { background: var(--c-4); }
.rc-seg.rep { background-color: transparent; background-image: repeating-linear-gradient(-45deg, var(--hatch-c) 0 1.6px, transparent 1.6px 7px); box-shadow: inset 0 0 0 1px var(--line-2); }

/* метки на героической плашке: «чернила» плашки, акцент, --c-4, штриховка */
.rc-hsw { display: inline-block; width: 9px; height: 9px; border-radius: 3px; flex: none; }
.rc-hsw.full { background: var(--hero-ink); }
.rc-hsw.part { background: var(--hero-accent); }
.rc-hsw.bot { background: var(--c-4); }
.rc-hsw.rep { background-image: repeating-linear-gradient(-45deg, color-mix(in srgb, var(--hero-ink) 70%, transparent) 0 1.4px, transparent 1.4px 4px); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--hero-ink) 45%, transparent); }
/* тёмная тема: плашка цвета акцента, «частично» = акцент с обводкой, как на полукольце */
:root[data-theme="dark"] .rc-hsw.part { background: var(--accent); box-shadow: inset 0 0 0 1.5px var(--hero-ink); }
:root[data-theme="dark"] .rc-hsw.bot { box-shadow: inset 0 0 0 1.5px var(--hero-ink); }

/* ---------- героическая плашка ---------- */
.rc-hero { display: flex; flex-direction: column; }
.rc-hero .card-head { margin-bottom: 6px; }
.rc-hero-body { display: flex; flex-direction: column; justify-content: center; flex: 1; }
.rc-hero .chart { height: 226px; margin: 0 -6px; }
.rc-hero-big { display: flex; align-items: baseline; justify-content: center; gap: 8px; margin-top: 2px; }
.rc-hero-big .num { font: 500 22px/1 var(--f-display); letter-spacing: -.02em; }
.rc-hero-of { font-size: var(--t-sm); color: var(--hero-ink-2); }
.rc-hero-legend { display: grid; grid-template-columns: minmax(0, 1fr); gap: 6px; margin-top: 16px; }
.rc-hero-legend > div { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 9px 14px; border-radius: 14px; background: color-mix(in srgb, var(--hero-ink) 8%, transparent); min-width: 0; }
.rc-hero-legend span { display: flex; align-items: center; gap: 8px; font-size: var(--t-sm); color: var(--hero-ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rc-hero-legend b { font: 500 18px/1 var(--f-display); letter-spacing: -.02em; }
.rc-prog { margin-top: 16px; }
.rc-prog > div { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 2px; border-top: 1px dashed color-mix(in srgb, var(--hero-ink) 20%, transparent); font-size: var(--t-sm); color: var(--hero-ink-2); }
.rc-prog b { color: var(--hero-ink); font-weight: 600; }
.rc-hero-foot { display: flex; align-items: center; gap: 8px; padding: 12px 2px 0; border-top: 1px dashed color-mix(in srgb, var(--hero-ink) 20%, transparent); font-size: var(--t-sm); color: var(--hero-ink-2); }

/* ---------- разбивка ---------- */
.rc-split { display: flex; flex-direction: column; }
.rc-legend { gap: 12px; font-size: var(--t-xs); }
.rc-tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.rc-tile { position: relative; display: flex; flex-direction: column; gap: 6px; min-width: 0; padding: 14px 16px; border-radius: var(--r-lg); background: var(--surface-2); text-align: left; transition: background var(--dur-1), transform var(--dur-1) var(--ease); }
.rc-tile.is-link:hover { background: var(--surface-3); }
.rc-tile.is-link:active { transform: scale(.98); }
.rc-tile-k { display: flex; align-items: center; gap: 7px; min-width: 0; font-size: var(--t-sm); color: var(--ink-2); white-space: nowrap; }
.rc-tile-go { margin-left: auto; color: var(--ink-3); }
.rc-tile-v { font: 500 30px/1 var(--f-display); letter-spacing: -.035em; }
.rc-tile-s { display: flex; flex-direction: column; gap: 1px; font-size: var(--t-xs); line-height: 1.35; color: var(--ink-3); }
.rc-tile-a { color: var(--ink-2); font-weight: 500; white-space: nowrap; }
.rc-stack { height: 26px; margin-top: 14px; }
.rc-chart-head { margin-top: 20px; gap: 4px 10px; flex-wrap: wrap; }
.rc-all { border-radius: 6px; }
.rc-all:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
.rc-name { display: inline-flex; align-items: center; gap: 6px; }
.rc-name s { color: var(--neg); text-decoration-thickness: 1.5px; }
.rc-name b { font-weight: 600; color: var(--pos); }
.rc-name .ic { width: 13px; height: 13px; color: var(--ink-3); }
.rc-pats { display: flex; flex-direction: column; margin-top: 6px; }
.rc-pat { display: grid; grid-template-columns: minmax(150px, 230px) minmax(0, 1fr) 70px; align-items: center; gap: 14px; width: 100%; padding: 9px 0; text-align: left; }
.rc-pat + .rc-pat { border-top: 1px solid var(--line); }
.rc-pat:hover .rc-name { text-decoration: underline; text-underline-offset: 3px; }
.rc-pat-n { text-align: right; font-size: var(--t-sm); color: var(--ink-2); white-space: nowrap; }
.bar > i.rc-violet { background: var(--violet); }
.rc-pb { display: flex; flex-direction: column; flex: 1; }
.rc-pats-none { display: flex; align-items: center; justify-content: center; flex: 1; min-height: 64px; gap: 8px; margin-top: 6px; padding: 14px 16px; border-radius: 14px; background: var(--surface-2); font-size: var(--t-sm); color: var(--ink-2); }
.rc-pats-none .ic { color: var(--pos); flex: none; }

/* ---------- списки ---------- */
.rc-list .card-head { padding: 20px 22px 0; }
.rc-search { width: min(300px, 100%); }
.rc-search .input { height: 40px; }
.rc-tabs { padding: 0 20px 2px; }
.rc-tabs button { height: 40px; padding: 0 14px; font-size: var(--t-sm); }
.rc-tabs button .badge { margin-left: 2px; }
.rc-tabs button .badge .ic { width: 11px; height: 11px; stroke-width: 3; }
.rc-hint, .rc-insight { display: flex; align-items: flex-start; gap: 8px; margin: 14px 22px 0; font-size: var(--t-sm); color: var(--ink-2); }
.rc-hint .ic, .rc-insight .ic { margin-top: 2px; color: var(--ink-3); flex: none; }
.rc-insight { align-items: center; padding: 10px 14px; border-radius: 14px; background: var(--accent-soft); color: var(--ink); }
.rc-insight .ic { color: var(--accent-text); margin-top: 0; }
.rc-insight > span { flex: 1; min-width: 0; }
.rc-chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 14px 22px 0; }
.rc-chips .chip .num { margin-left: 6px; opacity: .65; font-size: var(--t-xs); }
.rc-wrap { padding: 12px 12px 4px; }
.rc-tbl th, .rc-tbl td { padding: 0 10px; }
.rc-tbl td { height: 62px; }
.rc-who { min-width: 0; display: flex; flex-direction: column; align-items: flex-start; }
.rc-who .sub { max-width: 100%; }
.rc-nick { font-weight: 500; text-align: left; }
.rc-diff { font-weight: 600; }
.rc-why { max-width: 340px; white-space: normal !important; font-size: var(--t-sm); color: var(--ink-2); line-height: 1.35; }
.rc-tags { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 5px; }
.rc-tags i { font-style: normal; font-size: 10.5px; line-height: 1; padding: 3px 7px; border-radius: var(--r-pill); background: var(--surface-3); color: var(--ink-2); }
.rc-todo { display: inline-flex; align-items: center; gap: 6px; font-weight: 500; }
.rc-todo .ic { color: var(--ink-3); }
.rc-todo.warn, .rc-todo.warn .ic { color: var(--warn); }
.rc-c-todo .sub { max-width: 380px; white-space: normal; line-height: 1.35; }
.rc-c-mgr .sub, .rc-c-row .sub { white-space: nowrap; max-width: 120px; }
.rc-link { display: inline-flex; align-items: center; gap: 5px; height: 28px; padding: 0 10px; border-radius: var(--r-pill); background: var(--surface-2); font-size: var(--t-sm); font-weight: 500; color: var(--ink); white-space: nowrap; transition: background var(--dur-1); }
a.rc-link:hover { background: var(--surface-3); }
.rc-link.plain { color: var(--ink-2); }
.rc-link .ic { width: 13px; height: 13px; color: var(--ink-3); }
.rc-load { display: grid; gap: 10px; padding: 16px 22px 22px; }
.rc-load .skel { height: 54px; border-radius: 16px; }
.rc-err { padding-bottom: 20px; }
.rc-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px 14px; flex-wrap: wrap; padding: 6px 22px 20px; }
.rc-locked { max-width: 560px; margin: 40px auto; padding-bottom: 28px; }

/* ---------- причины ---------- */
.rc-rs { display: flex; flex-direction: column; }
.rc-r { display: flex; align-items: center; gap: 14px; width: 100%; padding: 11px 0; text-align: left; border-radius: 14px; cursor: pointer; }
.rc-r + .rc-r { border-top: 1px solid var(--line); }
.rc-r:hover .rc-r-k { text-decoration: underline; text-underline-offset: 3px; }
.rc-r .ico-tile { width: 38px; height: 38px; border-radius: 12px; }
.rc-r-main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.rc-r-k { display: inline-flex; align-items: center; gap: 6px; font-weight: 500; }
.rc-r-k .ic { width: 13px; height: 13px; color: var(--ink-3); }
.rc-r-n { font: 500 18px/1 var(--f-display); letter-spacing: -.02em; }
.rc-r-bar { margin: 8px 0 6px; }
.rc-r-bar > i.rc-violet { background: var(--violet); }
.rc-r-main .row.t-xs { align-items: flex-start; gap: 12px; }

/* ---------- сводка ---------- */
.rc-sum { display: flex; flex-direction: column; }
.rc-pre {
  position: relative; flex: 1; margin: 0; max-height: 300px; overflow: hidden;
  padding: 14px 16px; border-radius: var(--r-lg); background: var(--surface-2);
  font: 400 12px/1.6 var(--f-mono); color: var(--ink-2); white-space: pre-wrap; word-break: break-word;
  -webkit-mask-image: linear-gradient(180deg, black 70%, transparent);
  mask-image: linear-gradient(180deg, black 70%, transparent);
}
.rc-pre.open { max-height: 560px; overflow: auto; -webkit-mask-image: none; mask-image: none; }
.rc-pre-msg { display: flex; align-items: center; font: 400 var(--t-sm)/1.5 var(--f-ui); -webkit-mask-image: none; mask-image: none; }
.rc-sum-foot { margin-top: 14px; gap: 12px; flex-wrap: wrap; }

/* ---------- сам отчёт ---------- */
.rc-rep-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.rc-rep-c { display: flex; align-items: flex-start; gap: 12px; min-width: 0; padding: 14px 16px; border-radius: var(--r-lg); background: var(--surface-2); }
.rc-rep-c .ico-tile { width: 34px; height: 34px; border-radius: 11px; background: var(--surface); }
.rc-rep-c .ico-tile.warn { background: var(--warn-soft); }
.rc-rep-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.rc-rep-t { font-size: var(--t-sm); font-weight: 500; line-height: 1.35; }
.rc-rep-n { font: 500 22px/1 var(--f-display); letter-spacing: -.03em; }
.rc-rep-n.zero { color: var(--ink-3); }
.rc-rep-l { display: flex; flex-direction: column; gap: 6px; margin-top: 8px; }
.rc-rl { display: flex; align-items: center; gap: 8px; min-width: 0; }
.rc-rl .rc-link { background: var(--surface); height: 26px; }
.rc-rl .rc-link { flex: none; }
.rc-rx { flex: 1; min-width: 0; line-height: 1.25; }

/* ---------- адаптив ---------- */
/* ширина больше 1280: если пар до семи, отдельная кнопка «все N пар» не нужна */
@media (min-width: 1281px) { .rc-all.few { display: none; } }

/* ноутбук 1025-1280: плашка 5 + разбивка 7, плитки 2 × 2, итоги на плашке строками */
@media (max-width: 1280px) {
  .rc-hero { grid-column: span 5; }
  .rc-split { grid-column: span 7; }
  .rc-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .rc-tile { padding: 12px 14px; gap: 4px; }
  .rc-tile-v { font-size: 26px; }
  .rc-legend { display: none; }
  .rc-pat.x2 { display: none; }
}
/* до 1024 обе на всю ширину; у плашки полукольцо слева, итоги справа */
@media (max-width: 1024px) {
  .rc-hero, .rc-split { grid-column: span 12; }
  .rc-tiles { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .rc-legend { display: flex; }
  .rc-rep-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 1024px) and (min-width: 721px) {
  .rc-hero-body { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); align-items: center; gap: 28px; }
  .rc-hero-legend { margin-top: 0; }
}
@media (max-width: 860px) {
  .rc-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .rc-legend { display: none; }
}

/* до 1180: строки списка карточками (две колонки, на телефоне одна), без прокрутки вбок */
@media (max-width: 1180px) {
  .rc-wrap { overflow: visible; }
  .rc-tbl, .rc-tbl tbody { display: block; width: 100%; }
  .rc-tbl tbody { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .rc-tbl thead { display: none; }
  .rc-tbl tr.rc-tr {
    display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto; column-gap: 10px; row-gap: 10px; align-content: start;
    padding: 14px 16px; border-radius: var(--r-lg); background: var(--surface-2);
  }
  .rc-tbl tbody tr.rc-tr:hover { background: var(--surface-3); }
  .rc-tbl td { display: block; height: auto; padding: 0; border: 0; min-width: 0; }
  .rc-tbl td.r { text-align: left; }
  .rc-tbl td[data-l]::before { content: attr(data-l); display: block; font-size: var(--t-xs); color: var(--ink-3); margin-bottom: 2px; }
  .rc-c-client { grid-area: client; }
  .rc-c-date { grid-area: date; text-align: right; white-space: nowrap; font-size: var(--t-sm); }
  .rc-c-mgr { grid-area: mgr; align-self: center; font-size: var(--t-sm); }
  .rc-c-mgr .sub { display: inline; margin-left: 6px; }
  .rc-c-bot { grid-area: bot; }
  .rc-c-rep { grid-area: rep; }
  .rc-c-diff { grid-area: diff; }
  .rc-tbl td.rc-c-diff { text-align: right; }
  .rc-c-why { grid-area: why; max-width: none; }
  .rc-c-todo { grid-area: todo; }
  .rc-c-todo .sub { max-width: none; }
  .rc-tbl td.rc-c-row { grid-area: row; align-self: center; justify-self: end; text-align: right; }
  .rc-c-row .sub { display: block; margin-top: 2px; max-width: 150px; text-align: right; }
  .rc-t-check tr.rc-tr, .rc-t-diffs tr.rc-tr { grid-template-areas: "client client date" "bot rep diff" "why why why" "mgr mgr row"; }
  .rc-t-bot tr.rc-tr { grid-template-areas: "client client date" "bot todo todo" "mgr mgr mgr"; }
  .rc-t-report tr.rc-tr { grid-template-areas: "client client date" "rep why why" "mgr mgr row"; }
  .rc-link { background: var(--surface); }
  .rc-tbl .rc-c-bot .sub, .rc-tbl .rc-c-rep .sub { white-space: nowrap; }
}

/* телефон */
@media (max-width: 720px) {
  .rc-list .card-head { padding: 18px 16px 0; }
  .rc-search { width: 100%; }
  .rc-tabs { padding: 0 14px 2px; }
  .rc-hint, .rc-insight, .rc-chips { margin-left: 16px; margin-right: 16px; }
  .rc-insight { flex-wrap: wrap; }
  .rc-wrap { padding: 10px 12px 4px; }
  .rc-foot { padding: 6px 16px 18px; }
  .rc-load { padding: 16px 16px 20px; }
  .rc-tbl tbody { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .rc-tbl tr.rc-tr { padding: 12px 14px; }
  .rc-tile-go { display: none; }
  .rc-pat { grid-template-columns: minmax(0, 1fr) auto; row-gap: 6px; }
  .rc-pat .bar { grid-column: 1 / -1; order: 3; }
  .rc-rep-grid { grid-template-columns: minmax(0, 1fr); }
  .rc-r-main .row.t-xs { flex-direction: column; gap: 2px; }
}
/* «Сверка → Не бьётся» (L-36): вкладки сверху, три плитки с числами, период, фильтры и список пунктов с причинами, ссылками и кнопками решений.
   js/screens/recon-gaps*.js. Один словарь на экран: плитка выбранного списка чернильная (как активная вкладка), причина жёлтой меткой, подсказка акцентом. Только токены, префикс rg-. */

.rg-modes { margin: 0 0 14px; }
.rg-modes button { height: 40px; }
.rg-days { display: flex; flex-wrap: wrap; gap: 6px; }
.rg-fresh { display: flex; align-items: flex-start; gap: 8px; max-width: 640px; line-height: 1.4; }
.rg-fresh .ic { flex: none; margin-top: 2px; color: var(--ink-3); }

/* ---------- плитки ---------- */
.rg-tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-bottom: 18px; }
.rg-tile { display: flex; flex-direction: column; gap: 6px; min-width: 0; padding: 16px 18px; text-align: left; color: var(--ink); background: var(--surface); border: 1px solid var(--glass-line); border-radius: var(--r-lg); box-shadow: var(--sh-1); cursor: pointer; transition: background var(--dur-1), transform var(--dur-1) var(--ease); }
.rg-tile:hover { background: var(--surface-2); }
.rg-tile:active { transform: scale(.985); }
.rg-tile[aria-pressed="true"] { background: var(--inverse); color: var(--inverse-ink); border-color: transparent; }
.rg-tile-k { display: flex; align-items: center; gap: 8px; font-size: var(--t-sm); font-weight: 500; }
.rg-tile-k .ic { flex: none; color: var(--ink-3); }
.rg-tile[aria-pressed="true"] .rg-tile-k .ic { color: var(--accent); }
.rg-tile-n { font: 500 34px/1 var(--f-display); letter-spacing: -.035em; }
.rg-tile-s { font-size: var(--t-xs); line-height: 1.35; color: var(--ink-3); }
.rg-tile[aria-pressed="true"] .rg-tile-s { color: var(--inverse-ink-2); }

/* ---------- список ---------- */
.rg-card .card-head { padding: 20px 22px 0; }
.rg-search { width: min(300px, 100%); }
.rg-search .input { height: 40px; }
.rg-note { display: flex; align-items: flex-start; gap: 8px; margin: 14px 22px 0; font-size: var(--t-sm); line-height: 1.4; color: var(--ink-2); }
.rg-note .ic { flex: none; margin-top: 2px; color: var(--ink-3); }
.rg-chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 14px 22px 4px; }
.rg-chips:empty { display: none; }
.rg-chips .chip .num { margin-left: 6px; opacity: .65; font-size: var(--t-xs); }
.rg-res { margin-left: auto; }
.rg-items { margin-top: 10px; }
.rg-it { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: start; gap: 12px 18px; padding: 16px 22px; border-top: 1px solid var(--line); transition: opacity var(--dur-1); }
.rg-it:first-child { border-top: 0; }
.rg-it.is-done { opacity: .7; }
.rg-it.busy { opacity: .45; pointer-events: none; }
.rg-main { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.rg-top { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 10px; min-width: 0; }
.rg-day { font-weight: 600; color: var(--ink-2); }
.rg-who { padding: 0; font-weight: 600; color: var(--ink); text-align: left; text-decoration: underline dotted var(--ink-4); text-underline-offset: 3px; cursor: pointer; }
.rg-who:hover { text-decoration-style: solid; }
.rg-who.plain { text-decoration: none; cursor: default; color: var(--ink-2); }
.rg-money { font-weight: 500; }
.rg-mgr { padding: 2px 9px; border-radius: var(--r-pill); background: var(--surface-2); font-size: var(--t-xs); color: var(--ink-2); }
.rg-why { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 10px; }
.rg-why .chip { height: auto; min-height: 22px; padding-top: 2px; padding-bottom: 2px; white-space: normal; line-height: 1.3; }
.rg-detail { font-size: var(--t-sm); line-height: 1.4; color: var(--ink-2); min-width: 0; overflow-wrap: anywhere; }
.rg-hint { display: flex; align-items: flex-start; gap: 8px; padding: 8px 12px; border-radius: 12px; background: var(--accent-soft); font-size: var(--t-sm); line-height: 1.4; }
.rg-hint .ic { flex: none; margin-top: 2px; color: var(--accent-text); }
.rg-ctx { font-size: var(--t-xs); line-height: 1.4; color: var(--ink-3); }
.rg-links { display: flex; flex-wrap: wrap; gap: 6px; }
.rg-links:empty { display: none; }
.rg-link { display: inline-flex; align-items: center; gap: 5px; height: 28px; padding: 0 10px; border-radius: var(--r-pill); background: var(--surface-2); font-size: var(--t-sm); font-weight: 500; color: var(--ink); white-space: nowrap; transition: background var(--dur-1); cursor: pointer; }
.rg-link:hover { background: var(--surface-3); }
.rg-link.plain { color: var(--ink-2); cursor: default; }
.rg-link .ic { width: 13px; height: 13px; color: var(--ink-3); }
.rg-sigs { display: flex; flex-direction: column; gap: 8px; }
.rg-sig { display: flex; flex-direction: column; gap: 6px; padding: 10px 12px; border-radius: 12px; background: var(--surface-2); }
.rg-sig-h { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 8px; }
.rg-snip { font-size: var(--t-sm); line-height: 1.4; color: var(--ink-2); white-space: pre-wrap; overflow-wrap: anywhere; }
.rg-sig .rg-link { background: var(--surface); }
.rg-act { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 8px; }
.rg-act .chip { max-width: 220px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rg-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px 14px; flex-wrap: wrap; padding: 12px 22px 20px; border-top: 1px solid var(--line); }
.rg-load { display: grid; gap: 10px; padding: 16px 22px 22px; }
.rg-load .skel { height: 64px; border-radius: 16px; }
.rg-err { padding-bottom: 20px; }

/* ---------- телефон и планшет ---------- */
@media (max-width: 720px) {
  .rg-tiles { grid-template-columns: minmax(0, 1fr); gap: 8px; margin-bottom: 14px; }
  .rg-tile { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 2px 12px; padding: 12px 14px; }
  .rg-tile-k { grid-column: 1; }
  .rg-tile-n { grid-column: 2; grid-row: 1 / span 2; font-size: 28px; }
  .rg-tile-s { grid-column: 1; }
  .rg-card .card-head { padding: 16px 14px 0; }
  .rg-search { width: 100%; }
  .rg-note { margin: 12px 14px 0; }
  .rg-chips { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin: 12px 14px 4px; padding-bottom: 2px; }
  .rg-chips::-webkit-scrollbar { display: none; }
  .rg-chips .chip { flex: none; white-space: nowrap; }
  .rg-res { margin-left: 0; }
  .rg-it { grid-template-columns: minmax(0, 1fr); padding: 14px; gap: 10px; }
  .rg-act { justify-content: flex-start; }
  .rg-act .btn { flex: 1 1 0; justify-content: center; min-width: 0; }
  .rg-foot { padding: 12px 14px 16px; }
  .rg-load { padding: 14px; }
}
@media (prefers-reduced-motion: reduce) { .rg-tile, .rg-it { transition: none; } }
/* Экран «Курсы» (живой): полоса «Слежу», главная плашка с коридором курса и линией дня, таблица шести полей,
   график с легендой-переключателем, источники, IDR и THB, лента дня, замеры. Только токены, классы rt-. */

/* ---------- полоса «Слежу» ---------- */
.rt-tools { flex-wrap: nowrap; }
.rt-watch {
  flex: 1; min-width: 0;
  display: flex; align-items: center;
  height: 50px; padding: 0 6px 0 16px;
  border-radius: var(--r-pill);
  background: var(--glass);
  -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px);
  border: 1px solid var(--glass-line);
  box-shadow: var(--sh-1);
  overflow-x: auto; scrollbar-width: none;
}
.rt-watch::-webkit-scrollbar { display: none; }
.rt-watch.rt-watch-more { -webkit-mask-image: linear-gradient(90deg, var(--ink) calc(100% - 44px), transparent); mask-image: linear-gradient(90deg, var(--ink) calc(100% - 44px), transparent); }
.rt-watch-h { display: inline-flex; align-items: center; gap: 8px; padding-right: 12px; font-weight: 600; white-space: nowrap; border-right: 1px solid var(--line-2); }
.rt-watch-h .ic { width: 16px; height: 16px; color: var(--accent-text); fill: var(--accent); }
.rt-watch-it { display: inline-flex; align-items: center; gap: 7px; flex: none; padding: 0 12px; white-space: nowrap; font-size: var(--t-sm); font-variant-numeric: tabular-nums; }
.rt-watch-it + .rt-watch-it { border-left: 1px solid var(--line); }
.rt-watch-it b { font-weight: 500; color: var(--ink-2); }
.rt-watch-it .num { color: var(--ink); font-weight: 600; }
.rt-watch-d { font-size: var(--t-xs); font-weight: 500; color: var(--ink-3); }
.rt-watch-d.pos { color: var(--pos); }
.rt-watch-d.neg { color: var(--neg); }

/* ---------- главная плашка ---------- */
.rt-hero { display: flex; flex-direction: column; gap: 18px; padding: 24px 26px 18px; }
.rt-hero-top { display: flex; align-items: flex-start; justify-content: space-between; flex-wrap: wrap; gap: 10px 12px; }
.rt-pair { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 236px); gap: 22px; align-items: start; }
.rt-big { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; min-width: 0; }
.rt-big-l { font-weight: 500; font-size: 15px; }
.rt-big-l .muted { font-weight: 400; font-size: var(--t-sm); margin-left: 6px; }
.rt-big-v { font: 500 64px/.95 var(--f-display); letter-spacing: -.05em; font-variant-numeric: tabular-nums; white-space: nowrap; }
.rt-big-v .unit { font-size: .38em; }
.rt-spread { display: flex; flex-direction: column; gap: 14px; padding-left: 22px; border-left: 1px solid var(--hero-line); align-self: stretch; justify-content: flex-end; }
.rt-hero .mini-stat .l { color: var(--hero-ink-2); }
.rt-hero .mini-stat .v { font-size: 28px; }
.rt-left { display: flex; align-items: baseline; gap: 8px; font-size: var(--t-sm); white-space: nowrap; }
.rt-left b { font-weight: 600; min-width: 64px; }
.rt-left span { color: var(--hero-ink-2); overflow: hidden; text-overflow: ellipsis; }
.rt-hero .chip.rt-botchip { cursor: pointer; }
.rt-hero .chip.rt-botchip:hover { background: color-mix(in srgb, var(--hero-ink) 20%, transparent); }

/* шкала: коридор курса, зоны правки и рынок */
.rt-scale { position: relative; height: 112px; margin: 0 6px; }
.rt-track { position: absolute; left: 0; right: 0; top: 56px; height: 1px; background: color-mix(in srgb, var(--hero-ink) 22%, transparent); }
.rt-band { position: absolute; top: 43px; height: 27px; border-radius: 9px; background: color-mix(in srgb, var(--hero-accent) 20%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--hero-accent) 55%, transparent); }
.rt-zone { position: absolute; top: 43px; height: 27px; border-radius: 9px; --hatch-c: color-mix(in srgb, var(--hero-ink) 42%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--hero-ink) 30%, transparent); }
.rt-zone.l { border-radius: 9px 4px 4px 9px; }
.rt-zone.r { border-radius: 4px 9px 9px 4px; }
.rt-mk { position: absolute; top: 0; bottom: 0; width: 0; }
.rt-stem { position: absolute; left: -.5px; width: 1px; background: color-mix(in srgb, var(--hero-ink) 45%, transparent); }
.rt-pin { position: absolute; left: -4.5px; top: 52px; width: 9px; height: 9px; border-radius: 50%; background: var(--hero-ink); box-shadow: 0 0 0 3px var(--hero-bg); }
.rt-mk-l { position: absolute; left: 0; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 1px; font-size: var(--t-xs); line-height: 1.25; white-space: nowrap; color: var(--hero-ink-2); }
.rt-mk-l b { font-weight: 600; color: var(--hero-ink); }
.rt-mk-l .num { font-size: 12px; color: var(--hero-ink); font-weight: 500; }
.rt-mk.t .rt-stem { top: 30px; height: 26px; }
.rt-mk.t .rt-mk-l { top: 0; }
.rt-mk.b .rt-stem { top: 57px; height: 24px; }
.rt-mk.b .rt-mk-l { top: 83px; }
.rt-mk.l .rt-mk-l { transform: translateX(-12px); align-items: flex-start; }
.rt-mk.r .rt-mk-l { transform: translateX(calc(-100% + 12px)); align-items: flex-end; }
.rt-mk.hot .rt-pin { background: var(--hero-accent); box-shadow: 0 0 0 3px var(--hero-bg), 0 0 0 4px color-mix(in srgb, var(--hero-accent) 40%, transparent); }
.rt-mk.end .rt-pin { width: 13px; height: 13px; left: -6.5px; top: 50px; background: var(--hero-bg); box-shadow: inset 0 0 0 3px var(--hero-accent); }
.rt-mk.end .rt-mk-l b { color: var(--hero-ink-2); font-weight: 500; }
.rt-mk.dim .rt-pin { background: var(--hero-ink-2); }

.rt-hero-meta { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px 18px; padding-top: 12px; border-top: 1px dashed var(--hero-line); font-size: var(--t-sm); color: var(--hero-ink-2); }
.rt-hero-leg { display: flex; flex-wrap: wrap; gap: 6px 16px; }
.rt-hero-top .rt-meta { color: var(--hero-ink-2); }
.rt-meta { display: inline-flex; align-items: center; gap: 7px; min-width: 0; }
.rt-meta .ic, .rt-meta .rt-sw { flex: none; }
.rt-meta b { color: var(--hero-ink); font-weight: 600; }
.rt-meta .ic { width: 14px; height: 14px; }

/* линия дня: Bybit по замерам, порог правки, выдача в таблице */
.rt-intra { flex: 1; display: flex; flex-direction: column; gap: 4px; margin-top: -4px; }
.rt-intra-h { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 4px 16px; font-size: var(--t-sm); color: var(--hero-ink-2); }
.rt-intra-h b { color: var(--hero-ink); font-weight: 600; }
.rt-intra-chart { flex: 1; min-height: 118px; margin: 0 -4px; }
.rt-intra > .muted { flex: 1; display: grid; place-items: center; min-height: 118px; }
.rt-hero .rt-sw.line.rt-sw-hot { --sc: var(--hero-accent); }
.rt-hero .rt-sw.line.rt-sw-h1 { --sc: var(--hero-ink); border-top-width: 1.6px; }
.rt-hero .rt-sw.dash.rt-sw-h2 { --sc: var(--hero-ink-2); }

/* образцы для легенд: линия, пунктир, полоса коридора, точка факта */
.rt-sw { display: inline-block; flex: none; vertical-align: middle; }
.rt-sw.line, .rt-sw.dash { width: 16px; height: 0; border-top: 2.4px solid var(--sc, var(--ink)); border-radius: 2px; }
.rt-sw.dash { border-top-style: dashed; border-top-width: 2px; }
.rt-sw.band { width: 16px; height: 10px; border-radius: 4px; background: color-mix(in srgb, var(--accent) 40%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 80%, transparent); }
.rt-sw.neg { width: 16px; height: 10px; border-radius: 4px; background: color-mix(in srgb, var(--neg) 30%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--neg) 70%, transparent); }
.rt-sw.dot { width: 10px; height: 10px; border-radius: 50%; background: var(--accent); box-shadow: inset 0 0 0 1.5px var(--ink); }
.rt-hero .rt-sw.band { background: color-mix(in srgb, var(--hero-accent) 22%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--hero-accent) 60%, transparent); }
.rt-hero .rt-sw.zone { width: 16px; height: 10px; border-radius: 4px; --hatch-c: color-mix(in srgb, var(--hero-ink) 50%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--hero-ink) 35%, transparent); }

/* ---------- «В плюс или правим» ---------- */
.rt-health { display: flex; flex-direction: column; }
.rt-health-body { flex: 1; display: flex; flex-direction: column; gap: 14px; }
.rt-health #rt-gauge { flex: none; height: 212px; }
.rt-health-side { flex: 1; display: flex; flex-direction: column; justify-content: space-evenly; gap: 12px; }
.rt-health-leg { justify-content: center; gap: 6px 14px; }
.rt-health-leg b { color: var(--ink); font-weight: 600; margin-left: 2px; }
.rt-favs { display: flex; flex-direction: column; gap: 13px; }
.rt-fav { display: grid; grid-template-columns: 96px minmax(0, 1fr) auto; align-items: center; gap: 10px; }
.rt-fav b { font-weight: 600; min-width: 52px; text-align: right; font-size: var(--t-sm); }
.rt-fav-bar { display: flex; height: 9px; border-radius: var(--r-pill); overflow: hidden; background: var(--surface-3); gap: 2px; }
.rt-fav-bar i { display: block; height: 100%; min-width: 0; border-radius: var(--r-pill); }
.rt-fav-bar .g { background: var(--inverse); }
.rt-fav-bar .m { background: var(--accent); }
.rt-fav-bar .b { background-color: transparent; background-image: repeating-linear-gradient(-45deg, var(--ink-3) 0 1.4px, transparent 1.4px 4px); box-shadow: inset 0 0 0 1px var(--line-2); }
.rt-health-foot { margin-top: auto; padding-top: 12px; border-top: 1px dashed var(--line-2); }

/* ---------- таблица «Курс дня сейчас» ---------- */
.rt-now .card-head { padding: 20px 22px 0; margin-bottom: 14px; }
.rt-now-tools { flex-wrap: wrap; }
.rt-now-tools .chip .badge { margin-left: 2px; }
.rt-now-tools .chip[aria-pressed="true"] .badge { background: var(--accent); color: var(--accent-ink); }
.rt-alert { display: flex; align-items: center; gap: 12px; margin: 0 22px 12px; padding: 10px 10px 10px 12px; border-radius: var(--r-lg); background: var(--surface-2); }
.rt-alert.warn { background: var(--warn-soft); }
.rt-alert .ico-tile { width: 36px; height: 36px; border-radius: 12px; background: var(--surface); }
.rt-alert .li-sub { color: var(--ink-2); white-space: normal; }
.rt-tbl-wrap { padding: 0 12px 12px; }
.rt-tbl td { height: 66px; }
.rt-tbl th:first-child, .rt-tbl td:first-child { padding-left: 12px; }
.rt-field { display: flex; align-items: center; gap: 12px; min-width: 0; }
.rt-field .flag { font-size: 20px; }
.rt-field-t { min-width: 0; }
.rt-field-h { display: flex; align-items: center; gap: 6px; }
.rt-code { display: inline-grid; place-items: center; height: 20px; padding: 0 6px; border-radius: 6px; background: var(--surface-3); color: var(--ink-2); font-size: 11px; font-weight: 500; }
.rt-fname { font-weight: 500; }
.rt-q { display: inline-flex; align-items: center; gap: 0; margin-left: 2px; }
.rt-q .copy { width: 24px; height: 24px; color: var(--ink-3); }
.rt-q .copy:hover { color: var(--ink); }
.rt-v { font: 600 16px/1 var(--f-ui); letter-spacing: -.01em; }
.rt-bot { display: inline-flex; align-items: center; gap: 5px; font-weight: 500; }
.rt-bot .ic { width: 14px; height: 14px; color: var(--ink-3); }
.rt-tbl tr.rt-bad td:first-child { box-shadow: inset 3px 0 0 var(--warn); }
.rt-tbl .chip.btnish { font-family: inherit; }
.rt-c-dec .sub { white-space: nowrap; }
.rt-c-bot .sub { display: block; max-width: 140px; margin-left: auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rt-tbl .spark { width: 84px; }
.rt-tbl tbody tr.rt-hl { background: var(--accent-soft); }
.rt-empty td { height: auto; }

/* аудит поля (всплывашка) */
.pop.rt-pop { width: 420px; padding: 14px; }
.rt-au { display: flex; flex-direction: column; gap: 10px; }
.rt-au-h { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: var(--t-body); }
.rt-au-g { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-radius: var(--r-md); background: var(--surface-2); overflow: hidden; }
.rt-au-g.two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.rt-au-c { display: flex; flex-direction: column; gap: 3px; padding: 10px 12px; min-width: 0; }
.rt-au-c + .rt-au-c { border-left: 1px solid var(--line); }
.rt-au-c .num { font: 600 15px/1.1 var(--f-ui); }
.rt-au-c .num.pos { color: var(--pos); } .rt-au-c .num.neg { color: var(--neg); } .rt-au-c .num.warn { color: var(--warn); }
.rt-au-c > span:last-child { font-size: var(--t-xs); color: var(--ink-3); }
.rt-au-steps { display: flex; flex-direction: column; gap: 6px; padding: 10px 12px; border-radius: var(--r-md); border: 1px dashed var(--line-2); }
.rt-au-r { display: flex; justify-content: space-between; gap: 12px; font-size: var(--t-sm); }
.rt-au-r b { font-weight: 600; }
.rt-au-kv { grid-template-columns: 112px minmax(0, 1fr); gap: 8px 12px; font-size: var(--t-sm); }
.rt-au-kv dd { text-align: left; font-weight: 400; color: var(--ink); }
.rt-au-act { display: flex; flex-wrap: wrap; gap: 6px; padding-top: 2px; }

/* ---------- график ---------- */
.rt-bigcard { display: flex; flex-direction: column; }
.rt-leg { display: flex; flex-wrap: wrap; gap: 2px 0; margin: -6px -7px 4px; }
.rt-leg button { display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 7px; border-radius: var(--r-pill); color: var(--ink-2); font-size: var(--t-sm); font-weight: 500; white-space: nowrap; transition: opacity var(--dur-1), background var(--dur-1), color var(--dur-1); }
.rt-leg button:hover { background: var(--surface-2); color: var(--ink); }
.rt-leg button[aria-pressed="false"] { opacity: .5; color: var(--ink-3); font-style: italic; }
.rt-leg button[aria-pressed="false"] .rt-sw { filter: grayscale(1); }
.rt-chart { flex: 1; min-height: 340px; }
.rt-note { margin-top: 8px; }
.rt-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 18px; margin-top: 14px; padding-top: 16px; border-top: 1px dashed var(--line-2); }
.rt-stats .mini-stat .v { font-size: 24px; }
.rt-stats .mini-stat > span:last-child { min-height: 22px; }
.rt-tt { min-width: 150px; }
.rt-tt-h { opacity: .7; margin-bottom: 6px; }
.rt-tt-r { display: flex; align-items: center; gap: 6px; line-height: 1.55; }
.rt-tt-r span:last-of-type { flex: 1; }
.rt-tt-r > span[style] { box-shadow: 0 0 0 1px color-mix(in srgb, var(--inverse-ink) 60%, transparent); }
.rt-tt-r b { font-weight: 500; font-variant-numeric: tabular-nums; margin-left: 12px; }
.rt-tt.has-hot .rt-tt-r { opacity: .6; }
.rt-tt.has-hot .rt-tt-r.hot { opacity: 1; }
.rt-tt-r.hot b, .rt-tt-r.hot span { font-weight: 700; }

/* ---------- источники ---------- */
.rt-src { display: flex; flex-direction: column; }
.rt-src-list { flex: 1; }
.rt-src .li { padding: 9px 0; }
.rt-src .li-sub { white-space: normal; line-height: 1.3; }
.rt-src .ico-tile { width: 36px; height: 36px; border-radius: 12px; }
.rt-src .ico-tile .ic { width: 17px; height: 17px; }
.rt-src-v { font-weight: 600; }
.rt-src-age { color: var(--ink-3); margin-top: 2px; }
.rt-src-age.on { color: var(--pos); }
.rt-src-age.warn { color: var(--warn); }
.rt-src-off .li-title, .rt-src-off .rt-src-v, .rt-src-off .li-sub { color: var(--ink-3); }
.rt-src-off .ico-tile { opacity: .6; }
.rt-src .card-foot { margin-top: 14px; }
.rt-src .card-foot b { color: var(--ink); }

/* ---------- IDR и THB ---------- */
.rt-mini { display: flex; flex-direction: column; }
.rt-mini .card-head { margin-bottom: 12px; }
.rt-mini .card-title .flag { font-size: 18px; }
.rt-mini-row { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; }
.rt-mini-v { font: 500 34px/1 var(--f-display); letter-spacing: -.04em; font-variant-numeric: tabular-nums; white-space: nowrap; }
.rt-mini-kv { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: var(--t-sm); color: var(--ink-3); }
.rt-mini-kv b { color: var(--ink); font-weight: 600; margin-left: 2px; }
.rt-mini-chart { flex: 1; min-height: 220px; margin-top: 6px; }
.rt-mini-chart .empty { padding: 24px 12px; }

/* ---------- лента дня ---------- */
.rt-day .card-head { margin-bottom: 8px; }
.rt-tl .tl-item { grid-template-columns: 44px 26px minmax(0, 1fr); padding: 6px 0; }
.rt-tl .tl-dot i { width: 26px; height: 26px; }
.rt-tl .tl-dot::before { top: 26px; }
.rt-tl .tl-dot .ic { width: 13px; height: 13px; }
.rt-tl .tl-dot i.rt-dot-warn { background: var(--warn-soft); color: var(--warn); }
.rt-tl .tl-dot i.rt-dot-neg { background: var(--neg-soft); color: var(--neg); }
.rt-tl .tl-time { padding-top: 4px; }
.rt-tl-body { min-width: 0; padding-top: 2px; }
.rt-tl-body .li-title { white-space: normal; }

/* ---------- замеры за период ---------- */
.rt-chips { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 8px; }
.rt-chips .chip { height: 30px; padding: 0 12px; font-size: var(--t-sm); }
.rt-chips .badge { margin-left: 4px; background: var(--surface-3); color: var(--ink-2); }
.rt-chips .chip[aria-pressed="true"] .badge { background: var(--accent); color: var(--accent-ink); }
.rt-chips .select { width: auto; height: 30px; margin-left: auto; font-size: var(--t-sm); }
.rt-tk-list { max-height: 460px; overflow: auto; }
.rt-tk .ico-tile { width: 32px; height: 32px; border-radius: 10px; }
.rt-tk .ico-tile .ic { width: 15px; height: 15px; }
.rt-tk .li-sub { white-space: normal; }
.rt-tk .li-side { flex: none; }

/* подсветка карточки при переходе из таблицы */
.rt-flash { animation: rt-flash 1.4s var(--ease); }
@keyframes rt-flash { 0%, 100% { box-shadow: var(--sh-1), var(--sh-inset); } 25% { box-shadow: 0 0 0 3px var(--accent-glow), var(--sh-2); } }

/* ---------- адаптив ---------- */
@media (max-width: 1440px) {
  /* таблица ужимается: подписи под числами переносятся, поля плотнее */
  .rt-tbl th, .rt-tbl td { padding: 0 10px; }
  .rt-c-bot .sub, .rt-c-mkt .sub { display: block; max-width: 112px; margin-left: auto; white-space: normal; line-height: 1.25; }
}
@media (max-width: 1360px) { .rt-tbl .rt-c-spark { display: none; } }
@media (max-width: 1280px) {
  /* герой и большой график во всю ширину, соседи под ними строкой */
  .grid > .rt-hero, .grid > .rt-bigcard, .grid > .rt-w12.span-4 { grid-column: span 12; }
  .grid > .rt-mini { grid-column: span 6; }
  .rt-health-body { flex-direction: row; align-items: center; gap: 28px; }
  .rt-health #rt-gauge { flex: 0 0 300px; height: 196px; }
  .rt-health-leg { justify-content: flex-start; }
  .rt-health-foot { margin-top: 0; }
  .rt-src-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 28px; }
  .rt-src-list .li + .li { border-top: 0; }
  .rt-src-list .li { border-bottom: 1px solid var(--line); }
  .rt-tl { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: repeat(var(--rt-rows, 4), auto); grid-auto-flow: column; column-gap: 24px; }
  .rt-tl .tl-dot::before { display: none; }
  .rt-watch-it { padding: 0 11px; }
}
@media (max-width: 860px) {
  .grid > .rt-mini { grid-column: span 12; }
  .rt-pair { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .rt-spread { grid-column: span 2; flex-direction: row; flex-wrap: wrap; justify-content: space-between; padding: 14px 0 0; border-left: 0; border-top: 1px solid var(--hero-line); }
  .rt-health-body { flex-direction: column; align-items: stretch; }
  .rt-health #rt-gauge { flex: none; height: 200px; }
  .rt-health-leg { justify-content: center; }
  .rt-src-list, .rt-tl { display: block; }
  .rt-src-list .li { border-bottom: 0; }
  .rt-src-list .li + .li { border-top: 1px solid var(--line); }
}
@media (max-width: 720px) {
  .rt-tools { margin-bottom: 12px; }
  .rt-watch { height: 46px; padding-left: 14px; }
  .rt-hero { padding: 20px 18px 16px; gap: 16px; }
  .rt-big-v { font-size: 44px; }
  .rt-big-l .muted { display: block; margin: 2px 0 0; }
  .rt-hero .mini-stat .v { font-size: 24px; }
  .rt-scale { margin: 0; }
  .rt-mk-l { font-size: 10.5px; }
  .rt-mk-l .num { font-size: 11px; }
  .rt-intra-chart { min-height: 120px; }
  .rt-now .card-head { padding: 18px 16px 0; }
  .rt-now-tools { width: 100%; justify-content: space-between; }
  .rt-alert { margin: 0 12px 10px; align-items: flex-start; flex-wrap: wrap; }
  .rt-alert .li-main { flex: 1 1 calc(100% - 60px); }
  .rt-alert .li-title { white-space: normal; }
  .rt-alert .btn { margin-left: 48px; }
  .rt-hero-top .round-btn { display: none; }
  .rt-meta { align-items: flex-start; }
  .rt-meta .ic, .rt-meta .rt-sw { margin-top: 2px; }

  /* таблица карточками: поле и курс таблицы, решение; ниже бот, рынок и разница */
  .rt-tbl-wrap { overflow: visible; padding: 0 12px 6px; }
  .rt-tbl, .rt-tbl tbody { display: block; width: 100%; }
  .rt-tbl thead { display: none; }
  .rt-tbl tbody tr[data-rt-row] { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-areas: "f f t" "f f d" "b m k"; gap: 6px 8px; padding: 14px 4px 14px 10px; border-bottom: 1px solid var(--line); }
  .rt-tbl.nb tbody tr[data-rt-row] { grid-template-areas: "f f t" "f f d" "m k k"; }
  .rt-tbl.nd tbody tr[data-rt-row] { grid-template-areas: "f f t" "b m k"; }
  .rt-tbl.nd.nb tbody tr[data-rt-row] { grid-template-areas: "f f t" "m k k"; }
  .rt-tbl tbody tr[data-rt-row]:hover { background: transparent; }
  .rt-tbl td { display: block; height: auto; padding: 0; border: 0; white-space: normal; min-width: 0; }
  .rt-tbl td:first-child { padding-left: 0; }
  .rt-tbl tr.rt-bad { box-shadow: inset 3px 0 0 var(--warn); }
  .rt-tbl tr.rt-bad td:first-child { box-shadow: none; }
  .rt-c-field { grid-area: f; align-self: center; }
  .rt-field { align-items: flex-start; gap: 10px; }
  .rt-field-h { flex-wrap: wrap; row-gap: 2px; }
  .rt-c-table { grid-area: t; align-self: end; }
  .rt-c-dec { grid-area: d; text-align: right; }
  .rt-c-dec .sub { display: none; }
  .rt-tbl .rt-c-dec .chip { height: 24px; padding: 0 8px; gap: 5px; font-size: var(--t-xs); }
  .rt-c-bot { grid-area: b; } .rt-c-mkt { grid-area: m; } .rt-c-diff { grid-area: k; }
  .rt-tbl .rt-c-bot, .rt-tbl .rt-c-mkt, .rt-tbl .rt-c-diff { text-align: left; padding: 8px 10px; border-radius: var(--r-sm); background: var(--surface-2); }
  .rt-tbl td[data-l]::before { content: attr(data-l); display: block; margin-bottom: 3px; font-size: var(--t-xs); color: var(--ink-3); }
  .rt-tbl .rt-c-diff .chip { max-width: 100%; min-width: 0; height: auto; min-height: 22px; padding: 3px 7px; white-space: normal; line-height: 1.2; } /* «вровень с рынком» переносится внутри колонки, а не режется краем карточки (аудит 19.10, п. 6) */
  .rt-tbl .rt-c-mkt .sub, .rt-tbl .rt-c-diff .sub, .rt-tbl .rt-q { display: none; }
  .rt-tbl .sub { overflow: hidden; text-overflow: ellipsis; }
  .rt-tbl .rt-c-spark { display: none; }

  .rt-chart { min-height: 270px; }
  .rt-stats { gap: 16px 12px; }
  .rt-stats .mini-stat .v { font-size: 21px; }
  .rt-mini-v { font-size: 30px; }
  .rt-fav { grid-template-columns: 88px minmax(0, 1fr) auto; }
  .rt-chips .select { margin-left: 0; width: 100%; }
  .pop.rt-pop { width: calc(100vw - 16px); }
  .rt-au-kv { grid-template-columns: 96px minmax(0, 1fr); }
}
/* «Реквизиты»: справочник наших адресов. Все классы с префиксом wl-. Стили из концепта, без выдач и графика (их нет в API). */

/* плитка сети с коротким кодом */
.wl-net { width: 36px; height: 36px; flex: none; border-radius: 12px; display: grid; place-items: center; font: 600 10.5px/1 var(--f-mono); letter-spacing: .02em; }
.wl-net.n-trc20 { background: var(--inverse); color: var(--inverse-ink); }
.wl-net.n-bep20 { background: var(--accent); color: var(--accent-ink); }
.wl-net.n-ton { background: var(--info-soft); color: var(--info); }
.wl-net.n-erc20 { background: var(--violet-soft); color: var(--violet); }
.wl-net.n-aptos, .wl-net.n-x, .wl-net.n-uid { background: var(--surface-3); color: var(--ink-2); box-shadow: inset 0 0 0 1px var(--line-2); }
.wl-net.lg { width: 44px; height: 44px; border-radius: 14px; font-size: 12px; }
.wl-net.xs { width: 26px; height: 26px; border-radius: 9px; font-size: 8.5px; }
.wl-netname { font-weight: 600; letter-spacing: -.01em; }
.wl-unk { width: 28px; height: 28px; flex: none; border-radius: 50%; display: grid; place-items: center; background: var(--surface-3); color: var(--ink-3); }
.wl-unk .ic { width: 14px; height: 14px; }

/* ---------- герой: наши адреса, таблетки по сетям (как «780 / 1000» у Nixtio) ---------- */
.wl-hero { display: flex; flex-direction: column; gap: 18px; }
.wl-hero-v { display: flex; align-items: center; gap: 14px; }
.wl-hero-v .kpi-value { font-size: 64px; }
.wl-hero-of { font-size: var(--t-sm); line-height: 1.45; color: var(--hero-ink-2); }
.wl-pg-row { display: flex; align-items: flex-end; gap: 18px; flex-wrap: wrap; margin-top: auto; }
.wl-pg { display: flex; flex-direction: column; align-items: center; gap: 9px; min-width: 0; max-width: 100%; }
.wl-pg-pills { display: flex; gap: 5px; height: 72px; max-width: 100%; }
.wl-pg-pills > i { flex: 0 1 16px; min-width: 4px; width: 16px; border-radius: var(--r-pill); background: var(--wl-pc); }
.wl-pg-pills > i.off { background: transparent; border: 2px dashed var(--wl-pc); }
.wl-pg-code { font: 600 10px/1 var(--f-mono); letter-spacing: .06em; color: var(--hero-ink-2); }
.wl-pg.n-trc20 { --wl-pc: var(--hero-ink); }
.wl-pg.n-bep20 { --wl-pc: var(--hero-accent); }
.wl-pg.n-ton { --wl-pc: var(--info); }
.wl-pg.n-erc20 { --wl-pc: var(--violet); }
.wl-pg.n-aptos { --wl-pc: var(--c-3); }
.wl-pg.n-x, .wl-pg.n-uid { --wl-pc: color-mix(in srgb, var(--hero-ink) 60%, transparent); }
:root[data-theme="dark"] .wl-pg.n-bep20 { --wl-pc: color-mix(in srgb, var(--hero-ink) 42%, transparent); }
:root[data-theme="dark"] .wl-pg.n-aptos { --wl-pc: color-mix(in srgb, var(--hero-ink) 70%, var(--c-3)); }
:root[data-theme="dark"] .wl-pg.n-ton { --wl-pc: color-mix(in srgb, var(--info) 75%, var(--hero-ink)); }
:root[data-theme="dark"] .wl-pg.n-erc20 { --wl-pc: color-mix(in srgb, var(--violet) 75%, var(--hero-ink)); }
.wl-hero-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 16px; padding-top: 14px; border-top: 1px dashed color-mix(in srgb, var(--hero-ink) 22%, transparent); font-size: var(--t-sm); color: var(--hero-ink-2); }
.wl-hero-foot > span { display: inline-flex; align-items: center; gap: 7px; }
.wl-hero-foot b { color: var(--hero-ink); font-weight: 600; }
.wl-hdot { width: 7px; height: 16px; border-radius: var(--r-pill); background: var(--hero-ink); }
.wl-hdot.off { background: transparent; border: 1.5px dashed var(--hero-ink); }
.wl-hero-fr { margin-left: auto; }
.wl-hero-fr .ic { width: 14px; height: 14px; }

/* ---------- «Чей это адрес?» ---------- */
.wl-check { display: flex; flex-direction: column; }
.wl-check .card-title .ic { color: var(--ink-3); }
.wl-check-in .input { height: 54px; padding-left: 48px; font: 500 14px/1 var(--f-mono); letter-spacing: -.01em; border-radius: var(--r-pill); }
.wl-check-in .input::placeholder { font-family: var(--f-ui); letter-spacing: 0; }
.wl-check-in .ic { left: 18px; }
.wl-ex { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.wl-rules { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.wl-rule { display: flex; flex-direction: column; gap: 4px; padding: 14px; border-radius: var(--r-lg); background: var(--surface-2); }
.wl-rule .ico-tile { width: 34px; height: 34px; border-radius: 11px; margin-bottom: 6px; }
.wl-rule .ico-tile .ic { width: 16px; height: 16px; }
.wl-rule b { font-weight: 600; line-height: 1.3; }
.wl-rule > span:last-child { font-size: var(--t-sm); color: var(--ink-2); line-height: 1.45; }
.wl-res { padding: 16px; border-radius: var(--r-lg); background: var(--surface-2); border: 1.5px solid transparent; animation: pop-fade var(--dur-2) var(--ease) both; }
.wl-res.t-neg { border-style: dashed; border-color: var(--neg); background: color-mix(in srgb, var(--neg-soft) 60%, var(--surface-2)); }
.wl-res.t-warn { border-color: color-mix(in srgb, var(--warn) 45%, transparent); }
.wl-res.t-pos { border-color: color-mix(in srgb, var(--pos) 35%, transparent); }
.wl-res-top { display: flex; align-items: center; gap: 12px; }
.wl-res-top .ico-tile { width: 44px; height: 44px; border-radius: 14px; }
.wl-res-t { font: 500 18px/1.25 var(--f-display); letter-spacing: -.02em; }
.wl-res-s { font-size: var(--t-sm); color: var(--ink-2); margin-top: 3px; }
.wl-res-meta { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
.wl-cmp { display: flex; flex-direction: column; gap: 6px; margin-top: 14px; padding: 12px 14px; border-radius: var(--r-md); background: var(--surface); }
.wl-cmp-r { display: grid; grid-template-columns: 84px minmax(0, 1fr); align-items: baseline; gap: 10px; }
.wl-cmp-k { font-size: var(--t-xs); color: var(--ink-3); font-weight: 500; }
.wl-cmp-a { font: 500 13.5px/1.5 var(--f-mono); letter-spacing: .01em; word-break: break-all; color: var(--ink-3); }
.wl-cmp-a b { font-weight: 700; color: var(--ink); }
.wl-cmp-r.bad .wl-cmp-a b { color: var(--neg); background: var(--neg-soft); border-radius: 2px; }
.wl-bot { display: flex; align-items: flex-start; gap: 10px; margin-top: 14px; }
.wl-bot-ava { width: 30px; height: 30px; flex: none; border-radius: 50%; display: grid; place-items: center; background: var(--inverse); color: var(--accent); }
.wl-bot-ava .ic { width: 15px; height: 15px; }
:root[data-theme="dark"] .wl-bot-ava { background: var(--accent); color: var(--accent-ink); }
.wl-bot-msg { flex: 1; min-width: 0; padding: 10px 14px; border-radius: 4px 16px 16px 16px; background: var(--surface); box-shadow: var(--sh-1); font-size: var(--t-sm); line-height: 1.5; }
.wl-bot-who { display: block; font-size: var(--t-xs); font-weight: 600; color: var(--ink-3); margin-bottom: 2px; }

/* ---------- список: шапка, статусы, плитки сетей ---------- */
.wl-head { display: flex; align-items: center; justify-content: space-between; gap: 12px 16px; flex-wrap: wrap; margin-bottom: 16px; }
.wl-head-t { min-width: 0; }
.wl-tools { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.wl-tools[hidden] { display: none; }
.wl-sts, .wl-ctools { display: flex; align-items: center; gap: 8px; min-width: 0; }
.wl-ctools:empty { display: none; }
.wl-search { width: 230px; max-width: 100%; }
.wl-search .input { height: 38px; }
.wl-viewseg button { width: 34px; padding: 0; justify-content: center; }
.wl-chips { display: flex; gap: 5px; flex-wrap: nowrap; min-width: 0; }
.wl-chip { height: 36px; padding: 0 6px 0 12px; border-radius: var(--r-pill); display: inline-flex; align-items: center; gap: 7px; white-space: nowrap; background: var(--surface-2); color: var(--ink-2); border: 1px solid transparent; font-size: var(--t-sm); font-weight: 500; transition: background var(--dur-1), color var(--dur-1), border-color var(--dur-1); }
.wl-chip.st-all { padding-left: 14px; }
.wl-chip .ic { width: 14px; height: 14px; }
.wl-chip:hover { color: var(--ink); border-color: var(--line-2); }
.wl-chip[aria-pressed="true"] { background: var(--inverse); color: var(--inverse-ink); }
.wl-cnt { min-width: 22px; height: 22px; padding: 0 6px; border-radius: var(--r-pill); display: inline-grid; place-items: center; background: var(--surface); color: var(--ink-2); font-size: 11px; font-weight: 600; }
.wl-chip[aria-pressed="true"] .wl-cnt { background: var(--accent); color: var(--accent-ink); }
.wl-chip.st-confirmed .dot { background: var(--pos); }
.wl-chip.st-auto .dot { background: var(--warn); }
.wl-chip.st-rejected .dot { background: var(--neg); }
.wl-own-btn { padding-right: 10px; }
.wl-sortsel { position: relative; display: inline-flex; align-items: center; }
.wl-sortsel > .ic { position: absolute; left: 12px; width: 14px; height: 14px; color: var(--ink-3); pointer-events: none; }
.wl-sortsel .select { height: 36px; width: auto; padding-left: 34px; border-radius: var(--r-pill); font-size: var(--t-sm); font-weight: 500; }

/* плитки сетей: сводка и фильтр по сети */
.wl-nt-grid { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(150px, 1fr); gap: 10px; margin-bottom: 14px; overflow-x: auto; scrollbar-width: none; }
.wl-nt-grid::-webkit-scrollbar { display: none; }
.wl-nt-grid:empty { display: none; }
.wl-nt { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "tile name v" "bar bar bar" "foot foot foot"; align-items: center; gap: 10px; align-content: start; min-width: 0; padding: 12px 14px; border-radius: var(--r-lg); text-align: left; background: var(--surface-2); border: 1px solid transparent; transition: background var(--dur-2) var(--ease), border-color var(--dur-1), box-shadow var(--dur-2), transform var(--dur-2) var(--ease); }
.wl-nt > .wl-net { grid-area: tile; }
.wl-nt:hover { border-color: var(--line-2); transform: translateY(-1px); }
.wl-nt[aria-pressed="true"] { background: var(--surface); border-color: var(--ink); box-shadow: var(--sh-2); }
.wl-nt-name { grid-area: name; display: flex; flex-direction: column; min-width: 0; line-height: 1.25; }
.wl-nt-name b { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wl-nt-name span { font-size: var(--t-xs); color: var(--ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wl-nt-v { grid-area: v; justify-self: end; font: 500 28px/1 var(--f-display); letter-spacing: -.045em; }
.wl-nt-bar { grid-area: bar; background-color: var(--surface-3); }
.wl-nt[aria-pressed="true"] .wl-nt-bar { background-color: var(--surface-2); }
.wl-nt-foot { grid-area: foot; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 2px 8px; min-width: 0; font-size: var(--t-xs); }
.wl-nt-share { color: var(--ink-3); min-width: 0; }
.wl-nt-share b { color: var(--ink); font-weight: 600; }
.wl-nt-st { flex: none; font-weight: 500; white-space: nowrap; color: var(--neg); }
/* пять сетей и больше: плитка уже, имя под значком, всё равно один ряд */
.wl-nt-grid.dense { grid-auto-columns: minmax(112px, 1fr); }
.dense .wl-nt { grid-template-columns: auto minmax(0, 1fr); grid-template-areas: "tile v" "name name" "bar bar" "foot foot"; gap: 8px; padding: 12px; }
.dense .wl-nt-v { font-size: 26px; }
.dense .wl-nt-name b { font-size: 13.5px; }

/* ---------- плотная таблица ---------- */
.wl-tbl { border-collapse: separate; border-spacing: 0; }
.wl-tbl th { padding: 0 10px; }
.wl-tbl td { height: 66px; padding: 0 10px; }
.wl-tbl th:first-child, .wl-tbl td:first-child { padding-left: 14px; }
.wl-tbl th .th { gap: 4px; }
.wl-fbtn { width: 20px; height: 20px; border-radius: 7px; display: inline-grid; place-items: center; color: var(--ink-3); transition: background var(--dur-1), color var(--dur-1); }
.wl-fbtn:hover { background: var(--surface-3); color: var(--ink); }
.wl-fbtn .ic { opacity: 1 !important; width: 12px !important; height: 12px !important; }
.wl-fbtn.on { background: var(--accent); color: var(--accent-ink); }
.wl-netcell { display: flex; align-items: center; gap: 10px; }
.wl-label { max-width: 170px; font-weight: 500; }
.wl-note { max-width: 170px; color: var(--warn) !important; }
.wl-from { max-width: 130px; }
.wl-own { gap: 10px; }
.wl-own .name { white-space: nowrap; }
.wl-c-act { width: 1%; padding-right: 14px !important; }
.wl-tbl td.wl-c-act, .wl-tbl th.wl-h-act { position: sticky; right: 0; z-index: 1; background: var(--surface); }
.wl-tbl th.wl-h-act { z-index: 3; background: var(--surface-2); }
.wl-tbl tbody tr:hover td.wl-c-act { background: var(--surface-2); }
.wl-edit-btn { background: var(--surface-2); }
/* не проверен: только оранжевая метка слева (штриховка в концепте значит «бот не выдаёт», а антифрод такой адрес считает нашим) */
.wl-row.is-auto td:first-child { box-shadow: inset 3px 0 0 color-mix(in srgb, var(--warn) 75%, transparent); }
/* не наш: красная пунктирная рамка вокруг всей строки */
.wl-row.is-rejected td { background: color-mix(in srgb, var(--neg-soft) 70%, transparent); border-top: 1.5px dashed var(--neg); border-bottom: 1.5px dashed var(--neg); }
.wl-row.is-rejected td:first-child { border-left: 1.5px dashed var(--neg); border-radius: 14px 0 0 14px; }
.wl-row.is-rejected td:last-child { border-right: 1.5px dashed var(--neg); border-radius: 0 14px 14px 0; background: color-mix(in srgb, var(--neg-soft) 70%, var(--surface)); }
.wl-tbl tbody tr:has(+ .is-rejected) td { border-bottom-color: transparent; }
.wl-row.wl-flash td { animation: wl-flash 1.6s var(--ease); }
@keyframes wl-flash { 0%, 40% { background: var(--accent-soft); } 100% { background: transparent; } }

/* адрес: первые 6 ... последние 4, моноширинный */
.wl-addr { display: flex; align-items: center; gap: 4px; }
.wl-addr-txt { display: inline-flex; align-items: center; height: 30px; padding: 0 10px; border-radius: 10px; font: 500 13px/1 var(--f-mono); letter-spacing: -.01em; white-space: nowrap; background: var(--surface-2); color: var(--ink-3); border: 1px solid transparent; transition: border-color var(--dur-1), background var(--dur-1); }
.wl-addr-txt b { color: var(--ink); font-weight: 600; }
.wl-addr-txt .wl-ell { padding: 0 3px; }
.wl-addr-txt:hover { border-color: var(--line-2); background: var(--surface); }
.wl-addr-txt.lg { height: 40px; padding: 0 14px; font-size: 16px; border-radius: 13px; background: var(--surface); }
.wl-q { width: 24px; height: 24px; border-radius: 8px; display: inline-grid; place-items: center; color: var(--ink-3); transition: background var(--dur-1), color var(--dur-1); }
.wl-q .ic { width: 14px; height: 14px; }
.wl-q:hover { background: var(--surface-3); color: var(--ink); }

/* ---------- карточки ---------- */
.wl-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 12px; }
.wl-card { position: relative; min-width: 0; display: flex; flex-direction: column; gap: 14px; padding: 16px; border-radius: var(--r-lg); background: var(--surface-2); border: 1px solid transparent; transition: background var(--dur-2), border-color var(--dur-1), box-shadow var(--dur-2), transform var(--dur-2) var(--ease); }
.wl-card:hover { background: var(--surface); border-color: var(--line-2); box-shadow: var(--sh-2); transform: translateY(-2px); }
.wl-card-top { display: flex; align-items: center; gap: 10px; }
.wl-card-top .icon-btn { background: var(--surface); }
.wl-card-addr { display: flex; align-items: center; gap: 4px; }
.wl-card-label { font: 500 17px/1.25 var(--f-display); letter-spacing: -.02em; }
.wl-card-foot { margin-top: auto; padding-top: 12px; border-top: 1px dashed var(--line-2); display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.wl-card-foot .cell-user { gap: 10px; min-width: 0; flex: 1; }
.wl-own-t { min-width: 0; }
.wl-card-foot .r { text-align: right; flex: none; }
.wl-card.is-auto { border: 1px dashed color-mix(in srgb, var(--warn) 60%, transparent); box-shadow: inset 3px 0 0 color-mix(in srgb, var(--warn) 75%, transparent); }
.wl-card.is-rejected { border: 1.5px dashed var(--neg); background: color-mix(in srgb, var(--neg-soft) 75%, var(--surface)); }
.wl-card.wl-flash { animation: wl-flash-c 1.6s var(--ease); }
@keyframes wl-flash-c { 0%, 40% { box-shadow: 0 0 0 4px var(--accent-glow); } 100% { box-shadow: none; } }
.wl-empty { padding: 10px 0 24px; }

/* ---------- нужно проверить и свежее из чата ---------- */
.wl-queue .card-head, .wl-log .card-head { flex-wrap: nowrap; align-items: flex-start; }
.wl-qi .li-sub { overflow: visible; white-space: normal; }
.wl-qi-n { margin-top: 4px; font-size: var(--t-xs); color: var(--warn); }
.wl-qi-b { display: flex; gap: 6px; flex: none; }
.wl-qi-b .icon-btn { background: var(--surface-2); }
.wl-set.confirmed:hover { background: var(--pos-soft); color: var(--pos); }
.wl-set.rejected:hover { background: var(--neg-soft); color: var(--neg); }
.wl-log .tl-item { grid-template-columns: 50px 22px minmax(0, 1fr); padding: 7px 0; }
.wl-log .tl-dot i.pos { background: var(--pos-soft); color: var(--pos); }
.wl-log .tl-dot i.warn { background: var(--warn-soft); color: var(--warn); }
.wl-log .tl-dot i.neg { background: var(--neg-soft); color: var(--neg); }
.wl-log-b { min-width: 0; }
.wl-log-t { line-height: 1.35; color: var(--ink-2); }
.wl-log-t b { color: var(--ink); font-weight: 600; }
.wl-log-s { display: flex; align-items: center; gap: 8px; margin-top: 5px; font-size: var(--t-xs); color: var(--ink-3); min-width: 0; }
.wl-log-s .wl-net.xs { width: 22px; height: 22px; border-radius: 7px; font-size: 7.5px; }

/* ---------- всплывашки и окно ---------- */
.pop.wl-fpop { min-width: 260px; }
.wl-fpop .menu-item .wl-net, .wl-fpop .menu-item .ava, .wl-fpop .menu-item .wl-unk { flex: none; }
.wl-fpop .menu-item .dot { margin: 0 4px; }
.wl-fchk { width: 15px; display: inline-grid; place-items: center; flex: none; }
.wl-fpop .menu-item[disabled] { opacity: .4; pointer-events: none; }
.pop.wl-full-pop { max-width: none; width: min(390px, calc(100vw - 16px)); padding: 14px; max-height: calc(100vh - 16px); overflow-y: auto; }
.wl-full-addr { margin-top: 12px; padding: 14px; border-radius: 14px; background: var(--surface-2); font: 500 15px/1.75 var(--f-mono); color: var(--ink-3); word-break: break-word; letter-spacing: .02em; }
.wl-full-addr .hl { color: var(--ink); font-weight: 600; background: var(--accent-soft); border-radius: 4px; padding: 1px 3px; white-space: nowrap; }
.wl-full-addr span { white-space: nowrap; }
.wl-full-note { display: flex; gap: 8px; align-items: flex-start; margin-top: 10px; font-size: var(--t-xs); color: var(--ink-2); line-height: 1.45; }
.wl-full-note .ic { width: 15px; height: 15px; color: var(--warn); margin-top: 1px; }
.pop.wl-edit-pop { padding: 14px; max-height: calc(100vh - 16px); overflow-y: auto; }
.wl-editbox { width: 320px; max-width: calc(100vw - 44px); }
.wl-edit-addr { font: 500 12px/1.4 var(--f-mono); color: var(--ink-3); margin-top: 2px; }
.wl-edit-addr b { color: var(--ink-2); }
.wl-editbox .seg, .wl-add .seg { align-self: flex-start; }
.wl-editbox .input, .wl-editbox .select { height: 38px; }
.wl-add .wl-mono { font: 500 13px/1 var(--f-mono); }
.wl-add .wl-mono::placeholder { font-family: var(--f-ui); }
.wl-2col { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.wl-err { font-size: var(--t-sm); color: var(--neg); }

/* ---------- адаптив ---------- */
@media (max-width: 1280px) {
  .wl-hero-v .kpi-value { font-size: 56px; }
  .wl-pg-row { gap: 12px 7px; }
  .wl-pg-pills > i { flex-basis: 14px; width: 14px; }
  .wl-rule { padding: 12px; }
  .wl-tbl th, .wl-tbl td { padding: 0 7px; }
  .wl-tbl th:first-child, .wl-tbl td:first-child { padding-left: 12px; }
  .wl-label, .wl-note { max-width: 100px; }
  .wl-from { max-width: 76px; }
  .wl-netcell { gap: 8px; }
  .wl-c-st .sub { display: none; }
}
@media (max-width: 1024px) {
  .wl-hero-fr { margin-left: 0; }
}
@media (max-width: 860px) {
  .wl-nt-grid, .wl-nt-grid.dense { grid-auto-columns: 186px; margin: 0 -22px 14px; padding: 2px 22px 4px; }
  .wl-rules { grid-template-columns: minmax(0, 1fr); }
  .wl-rule { display: grid; grid-template-columns: 34px minmax(0, 1fr); column-gap: 12px; row-gap: 2px; }
  .wl-rule .ico-tile { grid-row: span 2; margin: 0; }
}
@media (max-width: 720px) {
  .wl-hero-v .kpi-value { font-size: 52px; }
  .wl-tools, .wl-search { width: 100%; }
  .wl-sts { flex: 0 0 calc(100% + 22px); overflow-x: auto; scrollbar-width: none; margin-right: -22px; padding-right: 22px; }
  .wl-sts::-webkit-scrollbar { display: none; }
  .wl-search { flex: 1; width: auto; min-width: 0; order: 2; }
  .wl-viewseg { order: 3; }
  .wl-ctools { order: 4; width: 100%; }
  .wl-sortsel { flex: 1; min-width: 0; }
  .wl-sortsel .select { width: 100%; }
  .wl-cards { grid-template-columns: minmax(0, 1fr); }
  .wl-addr-txt.lg { font-size: 15px; }
  .wl-res-top { flex-wrap: wrap; }
  .wl-res-top > .grow { flex: 1 1 calc(100% - 60px); }
  .wl-res-top .btn { margin-left: 56px; }
  .wl-cmp { padding: 10px 12px; }
  .wl-cmp-r { grid-template-columns: minmax(0, 1fr); gap: 2px; }
  .wl-cmp-a { font-size: 12.5px; }
  .wl-2col { grid-template-columns: 1fr; }
  .wl-qi { flex-wrap: wrap; }
  .wl-qi-b { flex: 0 0 100%; justify-content: flex-end; }
  /* «Наши счета» на телефоне: столбики уже и группа не уже своей подписи, чтобы все валюты встали в одну строку, а подписи KZT, USD, EUR не слипались (аудит 19.10, п. 19) */
  .wl-pg-row { gap: 12px 10px; }
  .wl-pg { min-width: 28px; }
  .wl-pg-pills { gap: 3px; }
  .wl-pg-pills > i { flex-basis: 10px; width: 10px; }
}