/* =====================================================================
   ETLON CRM · дизайн-система
   Фирменный стиль etlon.ru: чёрный, белый и тёплый серый, карамельный акцент,
   эспрессо-коричневый для «героев», косая черта перед заголовками, бегущая строка,
   разреженный капс подписей. Шрифты: Montserrat (дисплей и числа) и Onest (интерфейс) — Google Fonts,
   Muller — фирменный, только для слова ETLON (лежит в корне сайта: /muller.woff).
   ===================================================================== */

@font-face { font-family: "Muller"; src: url("/muller.woff") format("woff"); font-weight: 700; font-style: normal; font-display: swap; }

:root {
  /* поверхности — тёплый серый, как панели etlon.ru */
  --canvas: #F2F0EC;
  --surface: #FFFFFF;
  --surface-2: #F7F5F1;
  --surface-3: #ECE8E2;
  --line: #E4DFD8;
  --line-strong: #CEC7BD;
  /* текст */
  --ink: #120F0D;
  --ink-2: #3D3733;
  --muted: #776E66;
  --faint: #A69D94;
  /* бренд */
  --caramel: #B68C58;
  --caramel-ink: #8A6334;
  --caramel-soft: #F3E8D9;
  --espresso: #2A201B;
  --espresso-2: #3B2E26;
  --cream: #F5ECDF;
  --coal: #0E0C0B;
  --foam: #E8E2DA;
  --beige: #CDB89E;
  /* сигналы */
  --neg: #B2452F;  --neg-soft: #F6E2DC;
  --pos: #2E7650;  --pos-soft: #E0EFE5;
  --warn: #9E650C; --warn-soft: #F6EAD3;
  /* графика */
  --chart-1: var(--ink);
  --chart-2: var(--caramel);
  --chart-prev: #B9B0A6;
  --grid: rgba(18, 15, 13, .07);
  /* сайдбар всегда чёрный — как шапка etlon.ru */
  --side: #0E0C0B;
  --side-ink: #EDE6DC;
  --side-muted: #8E847A;
  --side-line: #26211D;
  --side-hover: #1B1714;
  /* шрифт */
  --f-ui: "Onest", "Segoe UI", system-ui, sans-serif;
  --f-display: "Montserrat", "Arial Black", sans-serif;
  --f-brand: "Muller", "Montserrat", "Arial Black", sans-serif;
  /* размеры */
  --r: 16px; --r-sm: 10px; --r-xs: 6px; --pill: 999px;
  --sh-1: 0 1px 0 rgba(18,15,13,.03), 0 1px 3px rgba(18,15,13,.06);
  --sh-2: 0 22px 44px -26px rgba(18,15,13,.42), 0 2px 6px rgba(18,15,13,.05);
  --sh-3: 0 40px 80px -30px rgba(18,15,13,.45);
  --scrim: rgba(14,12,11,.38);
  --ease: cubic-bezier(.2,.8,.2,1);
  --ease-out: cubic-bezier(.16,1,.3,1);
  --spring: cubic-bezier(.34,1.32,.64,1);
  --d1: 140ms; --d2: 240ms; --d3: 420ms;
  --wg-row: 176px; --wg-gap: 16px;
  --focus: 0 0 0 2px var(--canvas), 0 0 0 4px var(--ink);
  color-scheme: light;
}
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) {
  --canvas: #100E0C; --surface: #1A1714; --surface-2: #211D19; --surface-3: #2A2520; --line: #2D2823; --line-strong: #40382F;
  --ink: #F3EEE7; --ink-2: #D2C9BF; --muted: #A1978C; --faint: #6E655C;
  --caramel: #D2A56B; --caramel-ink: #E0B57C; --caramel-soft: rgba(210,165,107,.14);
  --espresso: #2B2019; --espresso-2: #3A2C23; --foam: #26211D; --beige: #8F7C64;
  --neg: #E07A63; --neg-soft: rgba(224,122,99,.14); --pos: #63B88A; --pos-soft: rgba(99,184,138,.14); --warn: #DDA24A; --warn-soft: rgba(221,162,74,.14);
  --chart-1: #F3EEE7; --chart-prev: #6B625A; --grid: rgba(243,238,231,.07);
  --side: #070605; --side-line: #1C1916; --side-hover: #15120F;
  --sh-1: 0 0 0 1px rgba(255,255,255,.02); --sh-2: 0 22px 44px -26px rgba(0,0,0,.85); --sh-3: 0 40px 80px -30px rgba(0,0,0,.9);
  --scrim: rgba(0,0,0,.6); --focus: 0 0 0 2px var(--canvas), 0 0 0 4px var(--caramel);
  color-scheme: dark; } }
:root[data-theme="dark"] {
  --canvas: #100E0C; --surface: #1A1714; --surface-2: #211D19; --surface-3: #2A2520; --line: #2D2823; --line-strong: #40382F;
  --ink: #F3EEE7; --ink-2: #D2C9BF; --muted: #A1978C; --faint: #6E655C;
  --caramel: #D2A56B; --caramel-ink: #E0B57C; --caramel-soft: rgba(210,165,107,.14);
  --espresso: #2B2019; --espresso-2: #3A2C23; --foam: #26211D; --beige: #8F7C64;
  --neg: #E07A63; --neg-soft: rgba(224,122,99,.14); --pos: #63B88A; --pos-soft: rgba(99,184,138,.14); --warn: #DDA24A; --warn-soft: rgba(221,162,74,.14);
  --chart-1: #F3EEE7; --chart-prev: #6B625A; --grid: rgba(243,238,231,.07);
  --side: #070605; --side-line: #1C1916; --side-hover: #15120F;
  --sh-1: 0 0 0 1px rgba(255,255,255,.02); --sh-2: 0 22px 44px -26px rgba(0,0,0,.85); --sh-3: 0 40px 80px -30px rgba(0,0,0,.9);
  --scrim: rgba(0,0,0,.6); --focus: 0 0 0 2px var(--canvas), 0 0 0 4px var(--caramel);
  color-scheme: dark; }

/* ---------- база ---------- */
*, *::before, *::after { box-sizing: border-box; }
html, body { height: 100%; }
body { margin: 0; background: var(--canvas); color: var(--ink); font: 400 14px/1.45 var(--f-ui); -webkit-font-smoothing: antialiased; font-feature-settings: "tnum" 1; overflow-x: hidden; }
button, input, select { 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; }
h1, h2, h3 { text-wrap: balance; }
[hidden] { display: none !important; }
:focus-visible { outline: none; box-shadow: var(--focus); border-radius: var(--r-xs); }
.num { font-variant-numeric: tabular-nums; }
.muted { color: var(--muted); }
.ic { display: block; flex: none; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- оболочка ---------- */
.app { display: grid; grid-template-columns: 252px minmax(0, 1fr); min-height: 100vh; }
.side { position: sticky; top: 0; height: 100vh; background: var(--side); color: var(--side-ink); display: flex; flex-direction: column; overflow: hidden; z-index: 20; }
.side-scroll { flex: 1; overflow-y: auto; overflow-x: hidden; padding: 6px 12px 16px; scrollbar-width: thin; scrollbar-color: #2b2622 transparent; }
.brand { display: flex; align-items: center; gap: 12px; padding: 22px 22px 18px; }
.brand svg { width: 46px; height: auto; color: var(--side-ink); flex: none; }
.brand b { display: block; font: 700 19px/1 var(--f-brand); letter-spacing: .2em; }
.brand small { display: block; margin-top: 5px; font: 500 9.5px/1 var(--f-ui); letter-spacing: .26em; color: var(--side-muted); text-transform: uppercase; }
.find { margin: 2px 12px 12px; display: flex; align-items: center; gap: 10px; height: 38px; padding: 0 10px 0 12px; border-radius: var(--r-sm); background: var(--side-hover); color: var(--side-muted); font-size: 13px; transition: background var(--d1); }
.find:hover { background: #221d19; color: var(--side-ink); }
.find .ft { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.find kbd { margin-left: auto; flex: none; white-space: nowrap; font: 500 10.5px var(--f-ui); padding: 2px 6px; border-radius: 5px; border: 1px solid #36302a; color: var(--side-muted); }
.nav-h { display: flex; align-items: center; justify-content: space-between; padding: 16px 10px 6px; font: 600 10px/1 var(--f-ui); letter-spacing: .2em; text-transform: uppercase; color: var(--side-muted); }
.nav a { position: relative; display: flex; align-items: center; gap: 12px; height: 38px; padding: 0 10px; border-radius: var(--r-sm); color: #CFC6BB; font-size: 13.5px; font-weight: 450; transition: background var(--d1), color var(--d1); }
.nav a:hover { background: var(--side-hover); color: #fff; }
.nav a .ic { color: #8E847A; transition: color var(--d1); }
.nav a:hover .ic { color: #fff; }
.nav a.on { background: #F4EFE8; color: #0E0C0B; font-weight: 600; }
.nav a.on .ic { color: #0E0C0B; }
.nav a > span:not(.v):not(.dot):not(.live) { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nav a .v { margin-left: auto; white-space: nowrap; font-size: 11.5px; color: var(--side-muted); font-variant-numeric: tabular-nums; }
.nav a.on .v { color: #6A6057; }
.nav a .dot { width: 8px; height: 8px; border-radius: 50%; flex: none; box-shadow: 0 0 0 2px rgba(255,255,255,.06); }
.nav a .live { position: relative; width: 6px; height: 6px; border-radius: 50%; background: #63B88A; flex: none; }
.nav a .live::after { content: ""; position: absolute; inset: -4px; border-radius: 50%; border: 1px solid #63B88A; opacity: 0; animation: ping 2.4s var(--ease-out) infinite; }
@keyframes ping { 0% { transform: scale(.4); opacity: .9 } 100% { transform: scale(1.6); opacity: 0 } }
.side-foot { border-top: 1px solid var(--side-line); padding: 12px; display: flex; align-items: center; gap: 6px; }
.me { flex: 1; min-width: 0; display: flex; align-items: center; gap: 10px; padding: 6px 8px 6px 6px; margin: -6px 0 -6px -6px; border-radius: var(--r-sm); text-align: left; transition: background var(--d1); }
.me:hover { background: var(--side-hover); }
.ava { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; background: #2A241F; color: #F4EFE8; font: 700 12px var(--f-ui); flex: none; object-fit: cover; }
.who { min-width: 0; line-height: 1.25; }
.who b { display: block; font-size: 13px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.who span { display: block; font-size: 11.5px; color: var(--side-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.icon-btn { width: 36px; height: 36px; border-radius: var(--r-sm); display: grid; place-items: center; color: inherit; transition: background var(--d1), color var(--d1), transform var(--d1); }
.side .icon-btn { color: var(--side-muted); margin-left: auto; }
.side .icon-btn:hover { background: var(--side-hover); color: #fff; }

.main { min-width: 0; display: flex; flex-direction: column; }
.top { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; padding: 28px 36px 18px; flex-wrap: wrap; }
.eyebrow { font: 600 10.5px/1 var(--f-ui); letter-spacing: .22em; text-transform: uppercase; color: var(--muted); }
.title { margin-top: 10px; font: 900 italic clamp(28px, 3.4vw, 46px)/.95 var(--f-display); letter-spacing: -.01em; text-transform: uppercase; overflow-wrap: anywhere; }
.title .sl { color: var(--caramel); margin-right: .06em; }
.title-sub { margin-top: 10px; color: var(--muted); font-size: 13.5px; max-width: 70ch; }
.top-r { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; min-width: 0; max-width: 100%; }
.top > div:first-child { min-width: 0; max-width: 100%; }
.top-r .seg { min-width: 0; }
.fresh { display: inline-flex; align-items: center; gap: 8px; height: 36px; padding: 0 12px; border-radius: var(--pill); background: var(--surface); box-shadow: var(--sh-1), inset 0 0 0 1px var(--line); font-size: 12.5px; color: var(--ink-2); white-space: nowrap; }
.fresh i { width: 7px; height: 7px; border-radius: 50%; background: var(--pos); box-shadow: 0 0 0 3px var(--pos-soft); }
.top-r .icon-btn { background: var(--surface); box-shadow: var(--sh-1), inset 0 0 0 1px var(--line); }
.top-r .icon-btn:hover { background: var(--surface-2); }
.top-r .icon-btn:active { transform: scale(.94); }
.spin .ic { animation: spin .8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg) } }

/* бегущая строка — как «/ИДЕЯ /ИДЕЯ» на etlon.ru, только с живыми цифрами */
.ticker { position: relative; margin: 0 36px 22px; height: 38px; border-radius: var(--r-sm); background: var(--coal); color: #EDE6DC; overflow: hidden; display: flex; align-items: center; mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent); }
:root[data-theme="dark"] .ticker { background: #1C1815; }
.ticker-track { display: flex; gap: 0; white-space: nowrap; animation: marquee 60s linear infinite; will-change: transform; }
.ticker:hover .ticker-track { animation-play-state: paused; }
.ticker span { font: 600 11.5px/1 var(--f-ui); letter-spacing: .14em; text-transform: uppercase; padding: 0 14px; }
.ticker span b { font-family: var(--f-display); font-weight: 800; letter-spacing: .02em; font-size: 13px; color: #fff; }
.ticker span.s { padding: 0; font: 900 italic 15px/1 var(--f-display); color: var(--caramel); letter-spacing: 0; }
.ticker span .up { color: #7FD0A2; } .ticker span .dn { color: #F09A86; }
@keyframes marquee { from { transform: translateX(0) } to { transform: translateX(-50%) } }

.view { padding: 0 36px 56px; display: flex; flex-direction: column; gap: 28px; min-width: 0; }
.view.enter { animation: viewIn var(--d3) var(--ease-out) both; }
@keyframes viewIn { from { opacity: 0; transform: translateY(10px) } }
.foot { padding: 0 36px 32px; color: var(--faint); font-size: 12px; display: flex; gap: 16px; flex-wrap: wrap; justify-content: space-between; }

/* ---------- элементы управления ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 36px; padding: 0 14px; border-radius: var(--r-sm); font-size: 13.5px; font-weight: 550; white-space: nowrap; transition: background var(--d1), box-shadow var(--d1), color var(--d1), transform var(--d1); }
.btn:active { transform: scale(.97); }
.btn.dark { background: var(--ink); color: var(--canvas); }
.btn.dark:hover { background: var(--ink-2); }
.btn.line { background: var(--surface); box-shadow: inset 0 0 0 1px var(--line-strong); }
.btn.line:hover { background: var(--surface-2); }
.btn.ghost { color: var(--ink-2); }
.btn.ghost:hover { background: var(--surface-3); }
.btn.caramel { background: var(--caramel); color: #170F09; }
.btn.caramel:hover { filter: brightness(1.06); }
.btn.sm { height: 30px; padding: 0 11px; font-size: 12.5px; border-radius: 8px; }
.seg { display: inline-flex; padding: 3px; gap: 2px; border-radius: var(--pill); background: var(--surface-3); max-width: 100%; overflow-x: auto; scrollbar-width: none; }
.seg button { white-space: nowrap; height: 30px; padding: 0 13px; border-radius: var(--pill); font-size: 12.5px; font-weight: 550; color: var(--muted); transition: background var(--d1), color var(--d1), box-shadow var(--d1); }
.seg button:hover { color: var(--ink); }
.seg button.on { background: var(--ink); color: var(--canvas); }
.select { position: relative; display: inline-flex; align-items: center; }
.select select { appearance: none; height: 36px; padding: 0 36px 0 14px; border-radius: var(--pill); border: 0; background: var(--surface); box-shadow: var(--sh-1), inset 0 0 0 1px var(--line); font-size: 13px; font-weight: 550; cursor: pointer; }
.select .ic { position: absolute; right: 12px; pointer-events: none; color: var(--muted); }
.chip { display: inline-flex; align-items: center; gap: 6px; height: 24px; padding: 0 10px; border-radius: var(--pill); font-size: 11.5px; font-weight: 600; white-space: nowrap; background: var(--surface-3); color: var(--ink-2); }
.chip.neg { background: var(--neg-soft); color: var(--neg); }
.chip.pos { background: var(--pos-soft); color: var(--pos); }
.chip.warn { background: var(--warn-soft); color: var(--warn); }
.chip.car { background: var(--caramel-soft); color: var(--caramel-ink); }
.chip i { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.delta { font-weight: 650; white-space: nowrap; }
.delta.up { color: var(--pos); } .delta.dn { color: var(--neg); } .delta.flat { color: var(--muted); }
.help { width: 24px; height: 24px; border-radius: 50%; display: inline-grid; place-items: center; color: var(--faint); transition: color var(--d1), background var(--d1); vertical-align: middle; }
.help:hover { color: var(--ink); background: var(--surface-3); }
.tabs { display: flex; gap: 4px; flex-wrap: wrap; border-bottom: 1px solid var(--line); }
.tabs a, .tabs button { position: relative; height: 42px; padding: 0 14px; display: inline-flex; align-items: center; gap: 8px; font-size: 13.5px; font-weight: 550; color: var(--muted); transition: color var(--d1); }
.tabs a:hover, .tabs button:hover { color: var(--ink); }
.tabs a.on, .tabs button.on { color: var(--ink); }
.tabs a.on::after, .tabs button.on::after { content: ""; position: absolute; left: 10px; right: 10px; bottom: -1px; height: 2px; border-radius: 2px; background: var(--ink); }

/* ---------- секции ---------- */
.sec { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.sec-h { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.sec-h h2 { display: flex; align-items: baseline; gap: 10px; font: 900 italic 20px/1 var(--f-display); text-transform: uppercase; letter-spacing: .005em; }
.sec-h h2 .sl { color: var(--caramel); }
.sec-h h2 small { font: 500 12.5px var(--f-ui); color: var(--muted); text-transform: none; letter-spacing: 0; font-style: normal; }
.sec-h .r { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.grid { display: grid; gap: 16px; }
.g2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.g3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.g4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.g-wide { grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr); }
.card { position: relative; background: var(--surface); border-radius: var(--r); box-shadow: var(--sh-1), inset 0 0 0 1px var(--line); padding: 20px 22px; min-width: 0; }
.card-h { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.card-h h3 { font: 650 14px/1.3 var(--f-ui); }
.card-h .m { font-size: 12px; color: var(--muted); }
.lab { font: 600 10.5px/1.2 var(--f-ui); letter-spacing: .16em; text-transform: uppercase; color: var(--muted); }
.note { font-size: 12.5px; line-height: 1.5; color: var(--muted); }
.banner { display: flex; align-items: center; gap: 12px; padding: 12px 16px; border-radius: var(--r-sm); background: var(--warn-soft); color: var(--ink-2); font-size: 13px; }
.banner .ic { color: var(--warn); }
.banner b { font-weight: 650; }

/* KPI-полоса */
.kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.kpi { position: relative; background: var(--surface); border-radius: var(--r); box-shadow: var(--sh-1), inset 0 0 0 1px var(--line); padding: 18px 20px; display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.kpi.hero { background: var(--coal); color: #F4EFE8; box-shadow: none; }
:root[data-theme="dark"] .kpi.hero { background: #221C18; box-shadow: inset 0 0 0 1px #2E2722; }
.kpi.hero .lab, .kpi.hero .sub { color: #A79C90; }
.kpi .val { font: 800 30px/1 var(--f-display); letter-spacing: -.02em; white-space: nowrap; }
.kpi.txt .val { font-size: 21px; line-height: 1.15; white-space: normal; }
.kpi .val small { font: 700 15px var(--f-display); margin-left: 3px; opacity: .55; }
.kpi .sub { font-size: 12.5px; color: var(--muted); display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.kpi.hero .val { color: #fff; }
.kpi .spark { margin-top: auto; height: 32px; }

/* ---------- таблицы ---------- */
.tbl-wrap { overflow-x: auto; margin: 0 -22px -20px; padding: 0 22px 8px; }
.tbl { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 13px; }
.tbl th { position: sticky; top: 0; z-index: 1; background: var(--surface); text-align: right; font: 600 10.5px/1.2 var(--f-ui); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); padding: 12px 12px; border-bottom: 1px solid var(--line); white-space: nowrap; }
.tbl th:first-child, .tbl td:first-child { text-align: left; padding-left: 0; }
.tbl th:last-child, .tbl td:last-child { padding-right: 0; }
.tbl td { text-align: right; padding: 0 12px; height: 50px; border-bottom: 1px solid var(--line); white-space: nowrap; font-variant-numeric: tabular-nums; }
.tbl tbody tr { transition: background var(--d1); }
.tbl tbody tr.link { cursor: pointer; }
.tbl tbody tr.link:hover { background: var(--surface-2); }
.tbl tfoot td { font-weight: 700; border-bottom: 0; border-top: 1px solid var(--line-strong); }
.tbl .left { text-align: left; }
.tbl .name { display: inline-flex; align-items: center; gap: 10px; font-weight: 600; }
.tbl .name .dot { width: 9px; height: 9px; border-radius: 50%; flex: none; }
.tbl .sub { display: block; font-size: 11.5px; color: var(--muted); font-weight: 400; }
.tbl .barcell { width: 170px; }
.inbar { display: grid; grid-template-columns: 1fr 52px; align-items: center; gap: 10px; }
.inbar .b { height: 6px; border-radius: 6px; background: var(--surface-3); overflow: hidden; }
.inbar .b i { display: block; height: 100%; border-radius: inherit; background: var(--ink); transform-origin: left; animation: growX .9s var(--ease-out) both; }
.inbar .b i.car { background: var(--caramel); }
.inbar .b i.neg { background: var(--neg); }
.inbar .b i.warn { background: var(--warn); }
.inbar .b i.pos { background: var(--pos); }
@keyframes growX { from { transform: scaleX(0) } }

/* ---------- графики ---------- */
.chart { position: relative; width: 100%; }
.chart svg { display: block; width: 100%; overflow: visible; }
.chart .gl { stroke: var(--grid); stroke-width: 1; vector-effect: non-scaling-stroke; }
.chart .ln { fill: none; stroke-width: 2.4; vector-effect: non-scaling-stroke; stroke-linejoin: round; stroke-linecap: round; }
.chart .ln.cur { stroke: var(--chart-1); }
.chart .ln.prev { stroke: var(--chart-prev); stroke-dasharray: 5 6; stroke-width: 1.6; }
.chart .ar { opacity: .9; }
.chart .rv { animation: reveal 1.4s var(--ease-out) both; }
.chart .ln.prev { animation: fadeIn .8s var(--ease) .5s both; }
@keyframes reveal { from { clip-path: inset(0 100% 0 0) } to { clip-path: inset(0 0 0 0) } }
@keyframes draw { to { stroke-dashoffset: 0 } }
@keyframes fadeIn { from { opacity: 0 } }
.chart .we { fill: var(--surface-2); }
.chart .y { position: absolute; right: 0; transform: translateY(-50%); font-size: 11px; color: var(--faint); background: var(--surface); padding-left: 6px; }
.chart .xl { display: flex; justify-content: space-between; margin-top: 8px; font-size: 11px; color: var(--faint); }
.chart .xl span { flex: 1; text-align: center; }
.chart .xl span.we { color: var(--caramel-ink); }
.chart .cross { position: absolute; top: 0; bottom: 22px; width: 1px; background: var(--line-strong); pointer-events: none; opacity: 0; transition: opacity var(--d1); }
.chart .pt { position: absolute; width: 11px; height: 11px; margin: -5.5px 0 0 -5.5px; border-radius: 50%; background: var(--surface); border: 2.5px solid var(--chart-1); pointer-events: none; opacity: 0; transition: opacity var(--d1); }
.chart .pt.prev { border-color: var(--chart-prev); width: 9px; height: 9px; margin: -4.5px 0 0 -4.5px; border-width: 2px; }
.chart.hover .cross, .chart.hover .pt { opacity: 1; }
.tip { position: absolute; z-index: 5; pointer-events: none; min-width: 168px; padding: 10px 12px; border-radius: var(--r-sm); background: var(--coal); color: #F4EFE8; font-size: 12px; line-height: 1.5; box-shadow: var(--sh-3); opacity: 0; transform: translateY(4px); transition: opacity var(--d1), transform var(--d1); }
:root[data-theme="dark"] .tip { background: #2B2520; }
.chart.hover .tip { opacity: 1; transform: none; }
.tip b { display: block; font: 800 15px var(--f-display); margin: 2px 0; }
.tip .r { display: flex; justify-content: space-between; gap: 14px; color: #B5AA9E; }
.legend { display: flex; gap: 16px; flex-wrap: wrap; font-size: 12px; color: var(--muted); }
.legend i { display: inline-block; width: 16px; height: 2px; vertical-align: 3px; margin-right: 6px; background: var(--chart-1); border-radius: 2px; }
.legend i.prev { background: repeating-linear-gradient(90deg, var(--chart-prev) 0 5px, transparent 5px 9px); }
.legend i.car { background: var(--caramel); }

/* вертикальные столбики */
.vbars { display: flex; align-items: flex-end; gap: 6px; height: 160px; }
.vbars .c { flex: 1; min-width: 0; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 6px; }
.vbars .b { width: 100%; max-width: 40px; border-radius: 6px 6px 3px 3px; background: var(--surface-3); transform-origin: bottom; animation: growY .9s var(--ease-out) both; animation-delay: calc(var(--i, 0) * 28ms); position: relative; }
.vbars .b.hi { background: var(--ink); }
.vbars .b.car { background: var(--caramel); }
.vbars .b.neg { background: var(--neg); }
.vbars .b:hover { filter: brightness(.92); }
.vbars .x { font-size: 11px; color: var(--faint); white-space: nowrap; }
.vbars .v { font-size: 11px; font-weight: 600; color: var(--ink-2); white-space: nowrap; }
@keyframes growY { from { transform: scaleY(0) } }

/* горизонтальные строки-рейтинг */
.hrows { display: flex; flex-direction: column; gap: 2px; }
.hrow { display: grid; grid-template-columns: minmax(120px, 170px) minmax(0, 1fr) auto; align-items: center; gap: 14px; padding: 8px 10px; margin: 0 -10px; border-radius: var(--r-sm); transition: background var(--d1); }
.hrow.link { cursor: pointer; }
.hrow.link:hover { background: var(--surface-2); }
.hrow .n { display: flex; align-items: center; gap: 10px; font-weight: 600; font-size: 13px; min-width: 0; }
.hrow .n span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hrow .n i { width: 9px; height: 9px; border-radius: 50%; flex: none; }
.hrow .b { height: 10px; border-radius: 10px; background: var(--surface-3); overflow: hidden; }
.hrow .b i { display: block; height: 100%; border-radius: inherit; background: var(--ink); transform-origin: left; animation: growX 1s var(--ease-out) both; animation-delay: calc(var(--i, 0) * 40ms); }
.hrow .v { font: 700 13.5px var(--f-ui); font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap; }
.hrow .v small { display: block; max-width: 230px; margin-left: auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 11px; font-weight: 500; color: var(--muted); }
@media (max-width: 560px) { .hrow .v small { max-width: 120px; } }

/* тепловая карта: точки × часы */
.heat { display: grid; gap: 3px; font-size: 11px; }
.heat .hd { color: var(--faint); text-align: center; }
.heat .rn { display: flex; align-items: center; gap: 8px; font-weight: 600; font-size: 12.5px; white-space: nowrap; padding-right: 8px; }
.heat .rn i { width: 8px; height: 8px; border-radius: 50%; }
.heat .cl { height: 30px; border-radius: 5px; background: var(--caramel); opacity: var(--a); transition: transform var(--d1); }
.heat .cl:hover { transform: scale(1.08); }
.heat .cl.z { background: var(--surface-3); opacity: 1; }

/* календарь по дням */
.cal { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; }
.cal .wd { font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--faint); text-align: center; padding-bottom: 2px; }
.cal .d { position: relative; aspect-ratio: 1.25; border-radius: var(--r-sm); background: var(--surface-2); padding: 7px 8px; display: flex; flex-direction: column; justify-content: space-between; font-size: 11px; overflow: hidden; }
.cal .d .t { position: relative; color: var(--muted); font-weight: 600; z-index: 1; }
.cal .d .s { position: relative; font: 700 12px var(--f-ui); z-index: 1; white-space: nowrap; }
.cal .d .f { position: absolute; inset: 0; background: var(--caramel); opacity: var(--a); }
.cal .d.off { background: transparent; box-shadow: inset 0 0 0 1px var(--line); }
.cal .d.off .s { color: var(--faint); font-weight: 500; }
.cal .d.best { box-shadow: inset 0 0 0 2px var(--ink); }
.cal .d.empty { visibility: hidden; }

/* кольцо */
.ring { position: relative; flex: none; }
.ring svg { display: block; transform: rotate(-90deg); }
.ring .tr { fill: none; stroke: var(--surface-3); }
.ring .vl { fill: none; stroke: var(--ink); stroke-linecap: round; transition: stroke-dashoffset 1.2s var(--ease-out); }
.ring .c { position: absolute; inset: 0; display: grid; place-items: center; text-align: center; font: 800 18px/1 var(--f-display); }

/* водопад P&L */
.wf { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 10px; align-items: end; height: 230px; padding-top: 24px; }
.wf .c { position: relative; height: 100%; display: flex; flex-direction: column; justify-content: flex-end; align-items: stretch; }
.wf .b { position: absolute; left: 0; right: 0; border-radius: 6px; transform-origin: top; animation: growY .9s var(--ease-out) both; animation-delay: calc(var(--i) * 70ms); }
.wf .b.in { background: var(--ink); transform-origin: bottom; }
.wf .b.out { background: var(--neg); opacity: .85; }
.wf .b.res { background: var(--caramel); transform-origin: bottom; }
.wf .b.res.neg { background: var(--neg); }
.wf .b .v { position: absolute; left: 50%; transform: translateX(-50%); bottom: calc(100% + 6px); font: 700 11.5px var(--f-ui); white-space: nowrap; color: var(--ink-2); }
.wf .b.out .v { bottom: auto; top: calc(100% + 6px); }
.wf-x { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 10px; margin-top: 10px; font-size: 11.5px; color: var(--muted); text-align: center; line-height: 1.25; }

/* ДДС: поступления вверх, платежи вниз */
.dds { position: relative; height: 240px; display: flex; align-items: stretch; gap: 3px; }
.dds .c { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.dds .u, .dds .d { flex: 1; display: flex; }
.dds .u { align-items: flex-end; border-bottom: 1px solid var(--line-strong); }
.dds .d { align-items: flex-start; }
.dds .u i, .dds .d i { width: 100%; border-radius: 4px 4px 2px 2px; background: var(--ink); animation: growY .8s var(--ease-out) both; transform-origin: bottom; animation-delay: calc(var(--i) * 14ms); }
.dds .d i { background: var(--neg); border-radius: 2px 2px 4px 4px; transform-origin: top; opacity: .85; }
.dds svg { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.dds svg path { fill: none; stroke: var(--caramel); stroke-width: 2.4; vector-effect: non-scaling-stroke; }

/* ---------- виджеты ---------- */
.view-panel { display: flex; flex-direction: column; gap: 30px; }
.zone { display: flex; flex-direction: column; gap: 12px; }
.zone-h { display: flex; align-items: baseline; gap: 12px; }
.zone-h h2 { font: 900 italic 15px/1 var(--f-display); text-transform: uppercase; letter-spacing: .02em; }
.zone-h h2 .sl { color: var(--caramel); }
.zone-h span { font-size: 12.5px; color: var(--muted); }
.wgrid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); grid-auto-rows: var(--wg-row); grid-auto-flow: row dense; gap: var(--wg-gap); }
.slot { position: relative; min-width: 0; min-height: 0; }
.slot.s { grid-column: span 3; } .slot.m { grid-column: span 6; } .slot.l { grid-column: span 6; grid-row: span 2; } .slot.xl { grid-column: span 12; grid-row: span 2; }
.w { --bg: var(--surface); --fg: var(--ink); --sub: var(--muted); --trk: var(--surface-3); --acc: var(--ink); --edge: inset 0 0 0 1px var(--line);
  position: relative; isolation: isolate; height: 100%; display: flex; flex-direction: column; padding: 18px 20px; border-radius: var(--r); background: var(--bg); color: var(--fg);
  box-shadow: var(--sh-1), var(--edge); overflow: hidden; cursor: pointer; transition: transform var(--d3) var(--spring), box-shadow var(--d2) var(--ease); }
.w:hover { transform: translateY(-3px); box-shadow: var(--sh-2), var(--edge); }
.w:focus-visible { box-shadow: var(--sh-1), var(--edge), var(--focus); }
.w[data-skin="foam"] { --bg: var(--foam); --trk: rgba(18,15,13,.08); --edge: inset 0 0 0 0 transparent; }
:root[data-theme="dark"] .w[data-skin="foam"] { --trk: rgba(255,255,255,.08); }
.w[data-skin="coal"] { --bg: var(--coal); --fg: #F4EFE8; --sub: #A3988C; --trk: rgba(255,255,255,.1); --acc: var(--caramel); --edge: inset 0 0 0 0 transparent; }
:root[data-theme="dark"] .w[data-skin="coal"] { --bg: #050404; --edge: inset 0 0 0 1px #262019; }
.w[data-skin="espresso"] { --bg: var(--espresso); --fg: #F5ECDF; --sub: #BBA996; --trk: rgba(245,236,223,.12); --acc: #E2B57C; --edge: inset 0 0 0 0 transparent; }
.w[data-skin="caramel"] { --bg: var(--caramel); --fg: #1B120B; --sub: rgba(27,18,11,.66); --trk: rgba(27,18,11,.14); --acc: #1B120B; --edge: inset 0 0 0 0 transparent; }
.w .wl { display: flex; align-items: center; justify-content: space-between; gap: 8px; font: 600 10.5px/1.2 var(--f-ui); letter-spacing: .16em; text-transform: uppercase; color: var(--sub); }
.w .wl .go { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; background: color-mix(in srgb, var(--fg) 8%, transparent); color: var(--fg); opacity: 0; transform: translateX(-4px); transition: opacity var(--d1), transform var(--d2) var(--ease); }
.w:hover .wl .go { opacity: 1; transform: none; }
.w .big { font: 800 var(--n, 34px)/.95 var(--f-display); letter-spacing: -.025em; white-space: nowrap; }
.w .big small { font-size: .42em; font-weight: 700; opacity: .55; margin-left: 4px; letter-spacing: 0; }
.w .big.acc { color: var(--acc); }
.w .cap { font-size: 12.5px; line-height: 1.4; color: var(--sub); }
.w .cap b { color: var(--fg); font-weight: 650; }
.w .row { display: flex; gap: 16px; align-items: flex-end; }
.w .fill { flex: 1; min-height: 0; }
.w .foot { margin-top: auto; display: flex; justify-content: space-between; align-items: flex-end; gap: 10px; padding: 0; color: var(--sub); font-size: 12px; }
.w .chips { display: flex; gap: 6px; flex-wrap: wrap; }
.w .chip { background: color-mix(in srgb, var(--fg) 8%, transparent); color: var(--fg); }
.w .chip.neg { background: color-mix(in srgb, var(--neg) 18%, transparent); color: var(--neg); }
.w[data-skin="coal"] .chip.neg, .w[data-skin="espresso"] .chip.neg { color: #F29C88; }
.w .chip.pos { background: color-mix(in srgb, var(--pos) 18%, transparent); color: var(--pos); }
.w[data-skin="coal"] .chip.pos, .w[data-skin="espresso"] .chip.pos { color: #84D3A6; }
.w .minibars { display: flex; align-items: flex-end; justify-content: space-between; gap: 4px; height: 100%; }
.w .fill:has(.minibars[style*="--bw:44px"]) .mlab span, .w .fill .minibars[style*="--bw:44px"] + .mlab span { flex-basis: 44px; }
.w .minibars[style*="--bw:46px"] + .mlab span { flex-basis: 46px; }
.w .mlab { display: flex; justify-content: space-between; font-size: 11px; color: var(--sub); }
.w .mlab span { flex: 0 1 var(--bw, 26px); min-width: 0; overflow: hidden; text-align: center; }
.w .minibars i { flex: 0 1 var(--bw, 26px); min-width: 3px; max-height: 100%; border-radius: 4px 4px 2px 2px; background: var(--trk); transform-origin: bottom; animation: growY .9s var(--ease-out) both; animation-delay: calc(var(--i) * 40ms); }
.w .minibars i.on { background: var(--acc); }
.w .minibars i.hi { background: var(--fg); }
.w .spark path { fill: none; stroke: var(--acc); stroke-width: 2; vector-effect: non-scaling-stroke; }
.w .spark .pv { stroke: var(--sub); stroke-dasharray: 4 5; opacity: .6; stroke-width: 1.4; }
.w .rank { display: flex; flex-direction: column; gap: 7px; }
.w .rank .r { display: grid; grid-template-columns: minmax(118px, 150px) minmax(0, 1fr) 58px; gap: 10px; align-items: center; font-size: 12.5px; }
.w .rank .r span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: flex; align-items: center; gap: 8px; }
.w .rank .r span i { width: 7px; height: 7px; border-radius: 50%; flex: none; }
.w .rank .r em { font-style: normal; text-align: right; font-weight: 650; font-variant-numeric: tabular-nums; }
.w .rank .bb { height: 8px; border-radius: 8px; background: var(--trk); overflow: hidden; }
.w .rank .bb i { display: block; height: 100%; border-radius: inherit; background: var(--fg); transform-origin: left; animation: growX 1s var(--ease-out) both; animation-delay: calc(var(--i) * 45ms); }
.w .rank .r.lead .bb i { background: var(--caramel); }
.w .split { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 10px; }
.w .split div { display: flex; flex-direction: column; gap: 4px; }
.w .split b { font: 800 18px/1 var(--f-display); letter-spacing: -.01em; white-space: nowrap; }
.w .split span { font-size: 11.5px; color: var(--sub); }
.w .empty { margin: auto 0 0; display: flex; flex-direction: column; gap: 6px; }
.w .empty b { font-size: 14px; font-weight: 650; }
.w .sk { display: block; border-radius: 6px; background: linear-gradient(90deg, var(--trk) 30%, color-mix(in srgb, var(--trk) 40%, transparent) 50%, var(--trk) 70%) 0 0/300% 100%; animation: shim 1.2s linear infinite; }
@keyframes shim { from { background-position: 100% 0 } to { background-position: -200% 0 } }

/* режим правки */
.minus { display: none; position: absolute; z-index: 3; left: -8px; top: -8px; width: 26px; height: 26px; border-radius: 50%; place-items: center; background: var(--ink); color: var(--canvas); box-shadow: 0 0 0 3px var(--canvas); transition: transform var(--d1); }
.minus:hover { transform: scale(1.1); }
.editing .minus { display: grid; }
.editing .slot > .w { animation: wig .34s ease-in-out infinite alternate; cursor: grab; }
.editing .slot:nth-child(2n) > .w { animation-delay: -.17s; }
.editing .slot > .w:hover { transform: none; }
@keyframes wig { from { rotate: -.55deg } to { rotate: .55deg } }
.slot.sel > .w { box-shadow: var(--sh-2), var(--edge), 0 0 0 3px var(--canvas), 0 0 0 5px var(--caramel); }
.slot.drop > .w { outline: 2px dashed var(--line-strong); outline-offset: 4px; }
.edit-bar { display: none; align-items: center; gap: 12px; padding: 12px 16px; border-radius: var(--r); background: var(--coal); color: #F4EFE8; position: sticky; top: 12px; z-index: 15; box-shadow: var(--sh-3); }
.editing .edit-bar { display: flex; }
.edit-bar p { font-size: 13px; color: #BDB2A6; margin-right: auto; }
.edit-bar p b { color: #fff; font-weight: 650; }
.edit-bar .btn.line { background: transparent; color: #F4EFE8; box-shadow: inset 0 0 0 1px #3A332D; }
.edit-bar .btn.line:hover { background: #1E1A16; }

/* ---------- панель справа, палитра ---------- */
.scrim { position: fixed; inset: 0; z-index: 60; background: var(--scrim); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); opacity: 0; pointer-events: none; transition: opacity var(--d3) var(--ease); }
.scrim.on { opacity: 1; pointer-events: auto; }
.drawer { position: fixed; z-index: 61; top: calc(12px + env(safe-area-inset-top, 0px)); right: 12px; bottom: calc(12px + env(safe-area-inset-bottom, 0px)); width: min(520px, calc(100% - 24px)); background: var(--surface); border-radius: 20px; box-shadow: var(--sh-3); transform: translateX(calc(100% + 24px)); transition: transform var(--d3) var(--ease-out); display: flex; flex-direction: column; overflow: hidden; }
.drawer.on { transform: none; }
.drawer-h { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 18px 18px 16px 24px; border-bottom: 1px solid var(--line); }
.drawer-h h3 { font: 900 italic 20px/1.05 var(--f-display); text-transform: uppercase; }
.drawer-h h3 .sl { color: var(--caramel); }
.drawer-b { flex: 1; overflow: auto; padding: 22px 24px 28px; display: flex; flex-direction: column; gap: 18px; }
.kv { display: grid; grid-template-columns: 1fr auto; gap: 10px 18px; font-size: 13.5px; margin: 0; }
.kv dt { color: var(--muted); }
.kv dd { margin: 0; text-align: right; font-weight: 600; font-variant-numeric: tabular-nums; }
.sizes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.sizes button { height: 84px; border-radius: 14px; background: var(--surface-2); box-shadow: inset 0 0 0 1px var(--line); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; font-size: 13.5px; font-weight: 600; transition: background var(--d1), box-shadow var(--d1), transform var(--d2) var(--spring); }
.sizes button:hover { background: var(--surface-3); }
.sizes button:active { transform: scale(.96); }
.sizes button.on { background: var(--caramel-soft); box-shadow: inset 0 0 0 2px var(--caramel); }
.sizes i { display: block; border: 1.6px solid currentColor; border-radius: 5px; }
.sizes i.s { width: 24px; height: 16px; } .sizes i.m { width: 40px; height: 16px; } .sizes i.l { width: 40px; height: 30px; }
.pv { border-radius: 16px; background: var(--surface-2); box-shadow: inset 0 0 0 1px var(--line); padding: 18px; display: grid; place-items: center; min-height: 400px; }
.pv .frame { width: 100%; }
.pv .frame.s { max-width: 230px; height: 176px; } .pv .frame.m { height: 176px; } .pv .frame.l { height: 368px; }
.lib { display: flex; flex-direction: column; gap: 8px; }
.lib-i { display: flex; align-items: center; gap: 14px; padding: 12px 14px; border-radius: 14px; background: var(--surface-2); box-shadow: inset 0 0 0 1px var(--line); cursor: pointer; transition: background var(--d1); }
.lib-i:hover { background: var(--surface-3); }
.lib-i .sw { width: 40px; height: 40px; border-radius: 10px; flex: none; box-shadow: inset 0 0 0 1px var(--line); }
.lib-i b { display: block; font-size: 14px; }
.lib-i span { font-size: 12px; color: var(--muted); }
.lib-i .add { margin-left: auto; width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; background: var(--ink); color: var(--canvas); flex: none; }

.palette { position: fixed; z-index: 70; left: 50%; top: 12vh; width: min(620px, calc(100% - 32px)); transform: translate(-50%, -12px) scale(.98); opacity: 0; pointer-events: none; background: var(--surface); border-radius: 18px; box-shadow: var(--sh-3), inset 0 0 0 1px var(--line); overflow: hidden; transition: opacity var(--d2), transform var(--d2) var(--ease-out); }
.palette.on { opacity: 1; transform: translate(-50%, 0) scale(1); pointer-events: auto; }
.palette input { width: 100%; height: 58px; border: 0; outline: 0; padding: 0 22px; font-size: 16px; background: transparent; border-bottom: 1px solid var(--line); }
.palette ul { list-style: none; margin: 0; padding: 8px; max-height: 50vh; overflow: auto; }
.palette li { display: flex; align-items: center; gap: 12px; height: 44px; padding: 0 12px; border-radius: 10px; cursor: pointer; font-size: 14px; }
.palette li .k { margin-left: auto; font-size: 11.5px; color: var(--faint); }
.palette li.on { background: var(--surface-3); }
.palette li .dot { width: 9px; height: 9px; border-radius: 50%; }
.palette .grp { padding: 10px 12px 4px; font: 600 10px var(--f-ui); letter-spacing: .2em; text-transform: uppercase; color: var(--faint); }

.toast { position: fixed; z-index: 80; left: 50%; bottom: calc(24px + env(safe-area-inset-bottom, 0px)); transform: translate(-50%, 20px); opacity: 0; padding: 12px 18px; border-radius: var(--pill); background: var(--coal); color: #F4EFE8; font-size: 13px; box-shadow: var(--sh-3); transition: opacity var(--d2), transform var(--d2) var(--ease-out); pointer-events: none; }
.toast.on { opacity: 1; transform: translate(-50%, 0); }

/* шапка точки */
.pt-head { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 16px; }
.pt-card { position: relative; border-radius: var(--r); background: var(--coal); color: #F4EFE8; padding: 22px 24px; overflow: hidden; min-height: 168px; display: flex; flex-direction: column; justify-content: space-between; gap: 18px; }
:root[data-theme="dark"] .pt-card { background: #1D1815; box-shadow: inset 0 0 0 1px #2E2722; }
.pt-card .lab { color: #A3988C; }
.pt-card .addr { font-size: 13.5px; color: #CFC4B8; display: flex; gap: 14px; flex-wrap: wrap; }
.pt-card .now { display: flex; gap: 28px; flex-wrap: wrap; align-items: flex-end; }
.pt-card .now b { display: block; font: 800 30px/1 var(--f-display); letter-spacing: -.02em; }
.pt-card .now > div > span { font-size: 12px; color: #A3988C; }
.cal .d.today { box-shadow: inset 0 0 0 2px var(--caramel); }
.cal .d.today .s { color: var(--caramel-ink); }
.pt-card .film { position: absolute; right: -6px; top: 14px; bottom: 14px; width: 20px; writing-mode: vertical-rl; font: 600 9px/20px var(--f-ui); letter-spacing: .4em; color: #5A5047; text-transform: uppercase; }
.state-card { border-radius: var(--r); background: var(--surface); box-shadow: var(--sh-1), inset 0 0 0 1px var(--line); padding: 20px 22px; display: flex; flex-direction: column; gap: 12px; }

/* пустые экраны / нужен источник */
.need { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 18px; align-items: start; padding: 22px 24px; border-radius: var(--r); background: var(--surface); box-shadow: var(--sh-1), inset 0 0 0 1px var(--line); }
.need .ic-w { width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; background: var(--surface-3); color: var(--ink-2); }
.need h3 { font-size: 15px; font-weight: 650; margin-bottom: 6px; }
.need p { color: var(--muted); font-size: 13.5px; max-width: 70ch; }
.need .acts { display: flex; gap: 8px; margin-top: 14px; flex-wrap: wrap; }

.need .how { margin-top: 10px; font-size: 13px; color: var(--ink-2); }
.need .how b { font-weight: 650; }
.kpi.ghost { opacity: .75; } .kpi.ghost .val { color: var(--faint); }
details.fold { padding: 0; }
details.fold > summary { list-style: none; cursor: pointer; padding: 16px 22px; display: flex; align-items: center; gap: 10px; font-weight: 600; flex-wrap: wrap; }
details.fold > summary::-webkit-details-marker { display: none; }
details.fold > summary .ic { transition: transform var(--d2) var(--ease); }
details.fold[open] > summary .ic { transform: rotate(180deg); }
details.fold > summary .muted { font-weight: 400; font-size: 12.5px; }
details.fold .fold-b { padding: 0 22px 16px; }
.day-t { font: 900 italic 18px/1 var(--f-display); text-transform: uppercase; }
.day-t span { color: var(--caramel); }
.ring-row { display: flex; align-items: center; gap: 22px; margin-top: 6px; flex-wrap: wrap; }
.hbars-mini { flex: 1; display: flex; align-items: flex-end; gap: 4px; min-height: 60px; }
.hbars-mini i { flex: 1; border-radius: 4px 4px 2px 2px; animation: growY .8s var(--ease-out) both; transform-origin: bottom; }
.hbars-lab { display: flex; justify-content: space-between; gap: 4px; font-size: 11px; color: var(--faint); }
.hbars-lab span { flex: 1; text-align: center; min-width: 0; overflow: hidden; }

/* демо-режим: плашка над заголовком */
.demo-bar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 16px 36px 0; padding: 10px 14px; border-radius: var(--r-sm); background: var(--caramel-soft); color: var(--ink-2); font-size: 13px; }
.demo-bar .ic { color: var(--caramel-ink); }
.demo-bar b { font-weight: 650; }
.demo-bar a { margin-left: auto; font-weight: 650; color: var(--caramel-ink); text-decoration: underline; text-underline-offset: 3px; }

/* профиль */
.acc { display: flex; align-items: center; gap: 16px; }
.acc .ava { width: 72px; height: 72px; font-size: 22px; }
.acc b { display: block; font-size: 16px; font-weight: 650; }
.acc span { font-size: 13px; color: var(--muted); }
.acc-acts { display: flex; gap: 8px; flex-wrap: wrap; }
.acc-acts.col { flex-direction: column; }
.acc-acts.col .btn { height: 44px; }
.acc-acts label { cursor: pointer; }

/* загрузка приложения */
.boot { position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; background: var(--coal); color: #F4EFE8; transition: opacity .5s var(--ease), visibility .5s; }
.boot.done { opacity: 0; visibility: hidden; }
.boot-in { display: flex; flex-direction: column; align-items: center; gap: 20px; padding: 0 24px; text-align: center; }
.boot svg { width: 92px; height: auto; animation: steam 2.4s var(--ease) infinite; }
@keyframes steam { 50% { opacity: .55 } }
.boot p { font: 600 10.5px/1.6 var(--f-ui); letter-spacing: .3em; text-transform: uppercase; color: #8E847A; max-width: 520px; }
.boot p .btn { margin-top: 14px; letter-spacing: 0; text-transform: none; background: transparent; color: #F4EFE8; box-shadow: inset 0 0 0 1px #3A332D; }
.boot .bar { width: 160px; height: 2px; background: #26211D; border-radius: 2px; overflow: hidden; }
.boot .bar i { display: block; height: 100%; width: 40%; background: var(--caramel); border-radius: inherit; animation: load 1s var(--ease) infinite; }
@keyframes load { from { transform: translateX(-100%) } to { transform: translateX(260%) } }

/* вход */
.gate { position: fixed; inset: 0; z-index: 90; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); background: var(--canvas); overflow: auto; }
.gate-in { display: flex; flex-direction: column; justify-content: center; gap: 22px; padding: 48px clamp(24px, 6vw, 88px); max-width: 620px; }
.gate-brand { display: flex; align-items: center; gap: 14px; }
.gate-brand svg { width: 64px; height: auto; color: var(--ink); }
.gate-brand b { font: 700 24px/1 var(--f-brand); letter-spacing: .2em; }
.gate-brand small { display: block; margin-top: 6px; font: 500 10px/1 var(--f-ui); letter-spacing: .26em; text-transform: uppercase; color: var(--muted); }
.gate-t { font: 900 italic clamp(40px, 6vw, 72px)/.9 var(--f-display); text-transform: uppercase; letter-spacing: -.01em; }
.gate-t .sl { color: var(--caramel); }
.gate-p { font-size: 15px; line-height: 1.55; color: var(--ink-2); max-width: 44ch; }
.btn.google { height: 52px; padding: 0 22px; border-radius: var(--pill); background: var(--ink); color: var(--canvas); font-size: 15px; gap: 12px; align-self: flex-start; }
.btn.google svg { background: #fff; border-radius: 50%; padding: 3px; width: 26px; height: 26px; }
.btn.google:hover { background: var(--ink-2); }
.btn.google:disabled { opacity: .6; cursor: progress; }
.gate-err { padding: 12px 14px; border-radius: var(--r-sm); background: var(--neg-soft); color: var(--neg); font-size: 13.5px; line-height: 1.45; max-width: 52ch; }
.gate-note { font-size: 13px; color: var(--muted); line-height: 1.6; }
.gate-note a, .gate-note button { color: var(--ink); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.gate-art { position: relative; background: var(--coal); color: #F4EFE8; overflow: hidden; display: flex; flex-direction: column; justify-content: center; gap: 6px; padding: 0 0 0 6vw; }
.gate-art span { font: 900 italic clamp(44px, 7vw, 104px)/.92 var(--f-display); text-transform: uppercase; white-space: nowrap; letter-spacing: -.01em; animation: drift 26s linear infinite alternate; }
.gate-art span:nth-child(2n) { color: transparent; -webkit-text-stroke: 1.4px #5A5047; animation-direction: alternate-reverse; }
.gate-art span i { font-style: inherit; color: var(--caramel); }
@keyframes drift { from { transform: translateX(0) } to { transform: translateX(-18%) } }
@media (max-width: 960px) { .gate { grid-template-columns: 1fr; } .gate-art { display: none; } .gate-in { padding: 40px 20px; margin: 0 auto; } }

/* мобильная навигация */
.mtop, .mnav { display: none; }

@media (max-width: 1280px) {
  .kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .g4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .slot.s { grid-column: span 6; }
  .g-wide { grid-template-columns: 1fr; }
}
@media (max-width: 960px) {
  .app { grid-template-columns: 1fr; }
  .side { position: fixed; inset: 0 auto 0 0; width: min(300px, 86vw); transform: translateX(-102%); transition: transform var(--d3) var(--ease-out); }
  .side.open { transform: none; box-shadow: var(--sh-3); }
  .mtop { display: flex; align-items: center; gap: 12px; position: sticky; top: 0; z-index: 18; height: calc(56px + env(safe-area-inset-top, 0px)); padding: env(safe-area-inset-top, 0px) 16px 0; background: var(--coal); color: #F4EFE8; }
  .mtop svg { width: 34px; color: #F4EFE8; }
  .mtop b { font: 700 16px var(--f-brand); letter-spacing: .2em; }
  .demo-bar { margin: 12px 16px 0; }
  .mtop .icon-btn { margin-left: auto; color: #F4EFE8; }
  .mnav { display: grid; grid-template-columns: repeat(5, 1fr); position: fixed; z-index: 18; left: 0; right: 0; bottom: 0; padding: 6px 6px calc(6px + env(safe-area-inset-bottom, 0px)); background: var(--coal); }
  .mnav a { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 6px 0; font-size: 10.5px; color: #9C9186; border-radius: 10px; }
  .mnav a.on { color: #fff; background: #1E1A16; }
  .top { padding: 20px 16px 14px; }
  .ticker { margin: 0 16px 16px; }
  .view { padding: 0 16px 96px; gap: 22px; }
  .foot { padding: 0 16px 90px; }
  .kpis { grid-template-columns: 1fr 1fr; gap: 10px; }
  .kpi { padding: 14px 14px; } .kpi .val { font-size: 22px; }
  .g2, .g3, .g4, .pt-head { grid-template-columns: 1fr; }
  .wgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .slot.s { grid-column: span 1; } .slot.m, .slot.l, .slot.xl { grid-column: span 2; }
  .card { padding: 16px; }
  .tbl-wrap { margin: 0 -16px -16px; padding: 0 16px 8px; }
  .hrow { grid-template-columns: minmax(96px, 120px) minmax(0, 1fr) auto; gap: 10px; }
}
@media (max-width: 560px) {
  .w { padding: 14px 15px; }
  .w .rank .r { grid-template-columns: 96px minmax(0, 1fr) 54px; }
  .heat { font-size: 10px; } .heat .cl { height: 24px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 1ms !important; animation-iteration-count: 1 !important; transition-duration: 1ms !important; }
  .ticker-track { animation: none; }
}

/* Mobile header and panel editor: 2026-10-05 */
@media (max-width: 960px) {
  .mtop > svg { flex: 0 0 34px; }
  .mtop b { margin-right: auto; }
  .mtop .icon-btn { margin-left: 0; flex: 0 0 44px; width: 44px; height: 44px; }
  .side { inset: 0 0 0 auto; transform: translateX(102%); }
  .top > div, .top-r { min-width: 0; }
  .top-r { flex-wrap: wrap; gap: 8px; }
  .editing .edit-bar { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px; position: static; padding: 16px; }
  .edit-bar p { grid-column: 1 / -1; margin: 0; line-height: 1.5; }
  .edit-bar .btn { min-width: 0; min-height: 44px; padding: 10px 12px; white-space: normal; }
  .edit-bar [data-act="lib"] { grid-column: 1 / -1; }
}

/* Stable section help layout, without display:contents on details. */
.heading-meta { display: flex; align-items: center; justify-content: space-between; gap: 12px; position: relative; min-height: 36px; }
.heading-meta .eyebrow { min-width: 0; }
.page-help { flex: 0 0 36px; }
.page-help[hidden] { display: none; }
.page-help summary { display: flex; align-items: center; justify-content: center; width: 36px; height: 36px; list-style: none; cursor: pointer; color: var(--muted); border-radius: 50%; }
.page-help summary::-webkit-details-marker { display: none; }
.page-help summary::marker { content: ''; }
.page-help summary span { display: flex; align-items: center; justify-content: center; width: 22px; height: 22px; border: 1.5px solid currentColor; border-radius: 50%; font: 600 14px/1 sans-serif; }
.page-help summary:focus-visible { outline: 2px solid var(--caramel); }
.page-help .help-text { position: absolute; top: calc(100% + 8px); right: 0; width: min(420px, calc(100vw - 32px)); max-width: 100%; margin: 0; padding: 16px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); color: var(--ink); box-shadow: var(--sh-3); font-size: 14px; line-height: 1.55; z-index: 25; }
.panel-settings { display: none; }
/* Centered mobile brand, left menu, explicit page reload. */
@media (max-width: 960px) {
  .mtop { display: grid; grid-template-columns: 44px minmax(0, 1fr) 44px; gap: 8px; }
  .mobile-brand { justify-self: center; display: flex; align-items: center; justify-content: center; gap: 10px; min-height: 44px; padding: 0; border: 0; background: transparent; color: inherit; cursor: pointer; }
  .mobile-brand svg { flex: 0 0 34px; }
  .mobile-brand b { margin: 0; }
  .mobile-brand:focus-visible { outline: 2px solid var(--caramel); outline-offset: 3px; border-radius: 6px; }
  .side { inset: 0 auto 0 0; transform: translateX(-102%); }
  .side.open { transform: none; }
}

@media (max-width: 960px) {
  .top { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .top > div:first-child { width: 100%; }
  .top .title { margin-top: 4px; }
  .top-r { display: grid; grid-template-columns: minmax(0, 1fr) 44px; width: 100%; gap: 10px; }
  #actions > * { grid-column: 1 / -1; max-width: 100%; width: 100%; }
  #actions [data-act="edit"] { display: none; }
  #fresh { grid-column: 1; justify-self: start; min-width: 0; font-size: 12px; }
  .top-r > [data-act="refresh"] { grid-column: 2; width: 44px; height: 44px; justify-self: end; }
  .panel-settings { display: flex; width: 100%; justify-content: flex-start; margin: 12px 0; min-height: 44px; }
  .card-h { flex-wrap: wrap; gap: 12px; }
  .card-h > .seg { width: 100%; flex: 1 0 100%; }
  .card-h > .seg button { flex: 1; padding: 0 8px; }
  .kpi .sub { overflow-wrap: normal; }
}
@media (max-width: 960px) {
  #actions .select select { width: 100%; min-width: 0; height: 44px; }
}

.page-help .help-text { white-space: pre-line; max-height: min(60vh, 440px); overflow-y: auto; }

.point-trigger { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 44px; padding: 10px 16px; border: 1px solid var(--line); border-radius: var(--pill); background: var(--surface); color: var(--ink); font-size: 13px; font-weight: 600; cursor: pointer; }
.point-trigger span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.point-search { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface-3); color: var(--muted); }
.point-search input { width: 100%; min-width: 0; background: transparent; border: 0; outline: 0; font-size: 16px; color: var(--ink); }
.point-search:focus-within { outline: 2px solid var(--caramel); }
.point-options { display: grid; gap: 6px; }
.point-option { display: flex; align-items: center; justify-content: space-between; text-align: left; gap: 12px; padding: 14px 16px; min-height: 52px; border-radius: 14px; background: var(--surface-2); color: var(--ink); cursor: pointer; border: 1px solid transparent; }
.point-option[hidden] { display: none; }
.point-option.selected { background: var(--caramel); color: #1B120B; }
.point-option:focus-visible, .point-trigger:focus-visible { outline: 2px solid var(--caramel); outline-offset: 2px; }
.point-option-name { font-size: 15px; font-weight: 600; }
.point-option-name small { display: block; margin-top: 3px; font-size: 12px; font-weight: 400; }
.point-check { flex: 0 0 20px; }
.point-empty { color: var(--muted); text-align: center; padding: 16px; }
@media (max-width: 960px) {
  .drawer.point-sheet { top: auto; bottom: 0; left: 0; right: 0; width: 100%; max-height: 82dvh; border-radius: 24px 24px 0 0; transform: translateY(105%); padding-bottom: env(safe-area-inset-bottom, 0px); }
  .drawer.point-sheet.on { transform: none; }
  .point-sheet .drawer-h { padding: 18px 16px 14px; }
  .point-sheet .drawer-b { padding: 14px 16px 24px; gap: 12px; }
}

:root[data-accent="pistachio"] { --caramel: #A8B879; --caramel-ink: #52612C; --caramel-soft: #EAF0DA; }
:root[data-accent="sky"] { --caramel: #8EBBDC; --caramel-ink: #285F87; --caramel-soft: #E2EFF8; }
:root[data-accent="berry"] { --caramel: #DEA0B7; --caramel-ink: #843B57; --caramel-soft: #F7E5ED; }
.panel-colors { display: none; border: 1px solid var(--line); border-radius: var(--r); padding: 18px; background: var(--surface); }
.editing .panel-colors { display: block; }
.panel-colors h3 { font-size: 15px; margin-bottom: 14px; }
.accent-options { display: flex; flex-wrap: wrap; gap: 10px; }
.accent-options button { display: flex; align-items: center; gap: 8px; min-height: 44px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface-2); font-size: 13px; cursor: pointer; }
.accent-options button[aria-pressed="true"] { outline: 2px solid var(--caramel); outline-offset: 1px; }
.accent-options i { width: 18px; height: 18px; border-radius: 50%; flex-shrink: 0; }
@media (max-width: 560px) { .accent-options { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); } .accent-options button { padding: 10px 8px; font-size: 12px; } }

.rc-status { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px; padding: 16px; border: 1px solid var(--line); border-radius: var(--r); background: var(--surface); }
.rc-status span { color: var(--muted); font-size: 13px; }
.rc-warning { border-color: var(--warn); } .rc-warning p { width: 100%; color: var(--warn); }
.rc-list { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 12px; }
.rc-item { padding: 18px; border-radius: var(--r); border: 1px solid var(--line); background: var(--surface); }
.rc-item[hidden] { display: none; } .rc-item h3 { font-size: 15px; line-height: 1.45; }
.rc-amounts { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 16px 0 8px; }
.rc-amounts span, .rc-item small { display: block; color: var(--muted); font-size: 12px; }
.rc-amounts b { display: block; font-size: 24px; font-variant-numeric: tabular-nums; margin-top: 4px; }
@media(max-width:560px) { .rc-list { grid-template-columns: minmax(0,1fr); } }

.theme-options { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 22px; }
.theme-options button { display: flex; justify-content: center; align-items: center; gap: 8px; min-height: 48px; padding: 12px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface-2); color: var(--ink); cursor: pointer; }
.theme-options button[aria-pressed="true"] { background: var(--caramel); color: #1B120B; border-color: var(--caramel); }

.w[data-skin="pistachio"], .w[data-skin="sky"], .w[data-skin="berry"] { --fg: #1B2119; --sub: #41493D; --trk: rgba(25,33,22,.14); --acc: #1B2119; --edge: inset 0 0 0 1px rgba(0,0,0,.06); }
.w[data-skin="pistachio"] { --bg: #CCD5AF; }
.w[data-skin="sky"] { --bg: #C5DEF0; --fg: #162735; --sub: #384F60; --acc: #162735; }
.w[data-skin="berry"] { --bg: #F3C6D2; --fg: #341C26; --sub: #65434F; --acc: #341C26; }
.widget-color-picker { border: 0; padding: 0; margin: 0; min-width: 0; }
.widget-color-picker legend { font-size: 14px; font-weight: 600; margin-bottom: 12px; }
.widget-color-options { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 8px; }
.widget-color-options button { display: flex; align-items: center; gap: 8px; text-align: left; min-height: 44px; padding: 10px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface-2); font-size: 12px; color: var(--ink); cursor: pointer; }
.widget-color-options button[aria-pressed="true"] { outline: 2px solid var(--caramel); outline-offset: 0; }
.widget-color-options button:focus-visible { outline: 2px solid var(--ink); }
.widget-color-options i { width: 20px; height: 20px; border-radius: 50%; flex-shrink: 0; box-shadow: inset 0 0 0 1px rgba(0,0,0,.12); }

:root[data-ticker="off"] .ticker { display: none !important; }
.ticker-setting { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-bottom: 18px; margin-bottom: 18px; border-bottom: 1px solid var(--line); cursor: pointer; min-height: 44px; }
.ticker-setting b { display: block; font-size: 14px; }
.ticker-setting small { display: block; margin-top: 5px; font-size: 12px; color: var(--muted); }
.ticker-setting input { appearance: none; -webkit-appearance: none; position: relative; width: 48px; height: 28px; flex: 0 0 48px; margin: 0; border: 1px solid var(--line-strong); border-radius: 999px; background: var(--surface-3); cursor: pointer; }
.ticker-setting input::before { content: ''; position: absolute; left: 3px; top: 3px; width: 20px; height: 20px; border-radius: 50%; background: var(--muted); transition: transform .15s; }
.ticker-setting input:checked { background: var(--caramel); border-color: var(--caramel); }
.ticker-setting input:checked::before { transform: translateX(20px); background: #1B120B; }
.ticker-setting input:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }

/* AKNO freshness lives in the sidebar, beside its refresh action. */
.side-sync { display: flex; align-items: center; gap: 4px; margin: 2px 12px 12px; padding: 4px 6px 4px 10px; border-radius: var(--r-sm); background: var(--side-hover); flex-shrink: 0; }
.side-sync .fresh { flex: 1; min-width: 0; padding: 0; gap: 7px; background: transparent; box-shadow: none; color: var(--side-ink); font-size: 11.5px; }
.side-sync .icon-btn { flex: 0 0 36px; margin: 0; }
.side .side-search { position: absolute; top: 24px; right: 12px; margin: 0; }
@media (max-width: 960px) {
 .side-sync .icon-btn { width: 44px; height: 44px; flex-basis: 44px; }
 .top-r { grid-template-columns: minmax(0, 1fr); }
}

.access-panel { display:grid; grid-template-columns:minmax(260px,1fr) minmax(0,2fr); gap:24px; }
.access-panel form,.access-panel>section { background:var(--surface); border:1px solid var(--line); border-radius:20px; padding:24px; min-width:0; }
.access-panel h2 { font-size:20px; margin-bottom:18px; }
.access-panel label { display:grid; gap:8px; margin-bottom:16px; }
.access-panel input[type=email],.access-panel select { width:100%; min-width:0; min-height:44px; border:1px solid var(--line); border-radius:12px; padding:10px; background:var(--canvas); color:var(--ink); }
.access-panel .access-enabled { display:flex; align-items:center; min-height:44px; }
.access-panel form p { margin:12px 0; }
.access-user { display:flex; gap:16px; justify-content:space-between; align-items:center; padding:16px 0; border-bottom:1px solid var(--line); }
.access-user b { overflow-wrap:anywhere; } .access-user p,.access-user small { color:var(--muted); } .access-user .btn { flex-shrink:0; min-height:44px; }
@media(max-width:960px) { .access-panel { grid-template-columns:1fr; } .access-panel form,.access-panel>section { padding:18px; } .access-user { flex-wrap:wrap; } }

/* Sidebar controls use the sidebar palette in both panel themes. */
.side .panel-settings.btn.line { background:var(--side-hover); color:var(--side-ink); box-shadow:inset 0 0 0 1px var(--side-line); }
.side .panel-settings.btn.line:hover { background:var(--side-line); color:var(--side-ink); }
.side .panel-settings.btn.line:focus-visible { outline:2px solid var(--side-ink); outline-offset:2px; }

.access-panel .access-roles { border:0; padding:0; margin:0 0 18px; display:grid; gap:10px; }
.access-roles legend { margin-bottom:10px; }
.access-panel .access-roles label { margin:0; position:relative; display:flex; align-items:center; gap:12px; padding:16px; border:1px solid var(--line); border-radius:16px; cursor:pointer; background:var(--canvas); }
.access-panel .access-roles label:has(input:checked) { border-color:var(--caramel); box-shadow:inset 0 0 0 1px var(--caramel); }
.access-roles input { accent-color:var(--caramel); width:18px; height:18px; flex-shrink:0; }
.access-roles b,.access-roles small { display:block; } .access-roles small { color:var(--muted); margin-top:4px; }
.access-panel .access-enabled input { appearance:none; width:44px; height:26px; border-radius:20px; background:var(--muted); position:relative; cursor:pointer; }
.access-panel .access-enabled input::after { content:''; position:absolute; top:3px; left:3px; width:20px; height:20px; background:white; border-radius:50%; transition:transform .15s; }
.access-panel .access-enabled input:checked { background:var(--caramel); }
.access-panel .access-enabled input:checked::after { transform:translateX(18px); }
.telegram-panel { margin-top:24px; }
.access-panel input[type=text] { width:100%; min-height:44px; border:1px solid var(--line); border-radius:12px; padding:10px; background:var(--canvas); color:var(--ink); }
#confirmTelegramRevoke { margin-top:24px; min-height:44px; }

:root[data-motion="off"] *, :root[data-motion="off"] *::before, :root[data-motion="off"] *::after { animation:none !important; transition:none !important; scroll-behavior:auto !important; }
:root[data-motion="off"] .ticker-track { transform:none !important; }
.access-toolbar { display:flex; gap:12px; flex-wrap:wrap; margin-bottom:20px; }
.permissions-layout { display:grid; grid-template-columns:minmax(240px,320px) minmax(0,1fr); gap:24px; }
.permission-people,.permission-editor { background:var(--surface); border:1px solid var(--line); border-radius:24px; padding:22px; min-width:0; }
.permission-person { display:flex; text-align:left; width:100%; gap:12px; padding:16px 10px; margin-top:8px; border-radius:16px; align-items:center; }
.permission-person.on { background:var(--surface-3); box-shadow:inset 0 0 0 1px var(--caramel); }
.permission-person b,.permission-person small { display:block; overflow-wrap:anywhere; } .permission-person small { color:var(--muted); margin-top:4px; } .permission-person>span:last-child { min-width:0; }
.permission-editor h2 { font-size:22px; overflow-wrap:anywhere; } .permission-editor .ticker-setting { border-bottom:1px solid var(--line); border-radius:0; padding:20px 0; margin:0; background:transparent; }
.permission-editor form>p { margin:20px 0; } .permission-editor button { min-height:44px; }
.permission-editor input:disabled { opacity:.5; cursor:not-allowed; }
@media(max-width:960px) { .permissions-layout { grid-template-columns:1fr; } #permissionPeople { max-height:290px; overflow-y:auto; } .permission-people,.permission-editor { padding:18px; } }

/* Access forms use the drawer width, independently of the page breakpoint. */
.drawer .access-panel { grid-template-columns:minmax(0,1fr); gap:16px; }
.drawer .access-user { flex-wrap:wrap; align-items:flex-start; gap:12px; }
.drawer .access-user > div { flex:1 1 180px; min-width:0; }
.drawer .access-user .btn { max-width:100%; white-space:normal; }
.drawer .telegram-panel { margin-top:0; }

/* Юнит-экономика: contained tables and calculator at mobile widths. */
.unit-page, .unit-detail { display:grid; gap:20px; min-width:0; }
.unit-months .seg { display:flex; flex-wrap:wrap; width:fit-content; max-width:100%; }
.unit-source { margin:0; }
.unit-card, .unit-scenario { min-width:0; }
.unit-page .tbl-wrap { margin-bottom:0; }
.unit-page .tbl-wrap + .note { margin-top:14px; }
.unit-page .kv { grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:10px 16px; }
.unit-page .kv dt, .unit-page .kv dd { min-width:0; overflow-wrap:anywhere; }
.unit-page .kv dd { white-space:normal; }
.unit-point-link, .unit-month-link { color:var(--ink); text-decoration:underline; text-underline-offset:3px; font-weight:650; }
.unit-month-link { border:0; background:none; padding:8px 0; cursor:pointer; text-align:left; }
.unit-selected { background:var(--surface-2); }
.unit-scenario-grid { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.15fr); gap:24px; }
.unit-fields { display:grid; gap:12px; }
.unit-field { display:grid; grid-template-columns:minmax(0,1fr) 130px; gap:12px; align-items:center; font-size:13px; }
.unit-field small { display:block; color:var(--muted); font-size:12px; margin-top:3px; }
.unit-field input { min-width:0; width:100%; height:44px; padding:10px 12px; border:1px solid var(--line); border-radius:10px; background:var(--canvas); color:var(--ink); font-variant-numeric:tabular-nums; }
.unit-field input:focus-visible { outline:2px solid var(--caramel); outline-offset:2px; }
.unit-field input[aria-invalid=true] { border-color:var(--neg); }
.unit-reset { margin-top:16px; }
.unit-result-kpis { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }
.unit-result-kpis .kpi { padding:16px; }
.unit-result-kpis .kpi .val { font-size:24px; white-space:normal; overflow-wrap:anywhere; }
.unit-formulas { border-top:1px solid var(--line); margin-top:20px; padding-top:14px; font-size:13px; color:var(--muted); }
.unit-formulas summary { cursor:pointer; color:var(--ink); font-weight:600; }
.unit-formulas p { line-height:1.6; }
@media(max-width:900px) { .unit-scenario-grid { grid-template-columns:1fr; } }
@media(max-width:600px) {
 .unit-page, .unit-detail { gap:16px; }
 .unit-page .card-h { flex-wrap:wrap; }
 .unit-field { grid-template-columns:minmax(0,1fr) 115px; }
 .unit-result-kpis .kpi { padding:14px; }
 .unit-result-kpis .kpi .val { font-size:21px; }
 .unit-page .kpis .val { white-space:normal; overflow-wrap:anywhere; font-size:25px; }
 .unit-page .kpis .kpi.txt .val { font-size:18px; letter-spacing:-.03em; white-space:nowrap; }
 .unit-page .kpis .kpi.txt .val small { font-size:12px; }
}

/* Point navigation: one aligned row, with contained horizontal scrolling. */
nav.tabs[aria-label="Разделы кофейни"] { flex-wrap:nowrap; min-width:0; max-width:100%; overflow-x:auto; overflow-y:hidden; scrollbar-width:none; scroll-padding-inline:12px; }
nav.tabs[aria-label="Разделы кофейни"]::-webkit-scrollbar { height:0; }
nav.tabs[aria-label="Разделы кофейни"] > a { flex:0 0 auto; padding-inline:12px; white-space:nowrap; }
nav.tabs[aria-label="Разделы кофейни"] > a.on::after { bottom:0; }

/* Stock order tab; all selectors scoped to the new flow. */
.stop-orders{min-width:0}.stop-heading{display:flex;align-items:center;justify-content:space-between;gap:16px;margin:8px 0 20px}.stop-heading h2{font:800 30px/1.2 var(--f-display);margin:8px 0}.stop-heading p{font-size:13px;color:var(--muted);margin:0}.stop-summary{display:flex;flex-wrap:wrap;gap:8px 22px;padding:14px 0 22px;font-size:13px}.stop-summary b{font-size:19px;margin-right:4px}.stop-layout{display:grid;grid-template-columns:minmax(0,1fr) 290px;gap:24px;align-items:start}.stop-assortment{min-width:0}.stop-filters{display:grid;grid-template-columns:minmax(0,1fr) minmax(160px,.65fr);gap:10px}.stop-orders input,.stop-orders select,.stop-orders textarea,.stop-map-form input{width:100%;max-width:100%;min-width:0;border:1px solid var(--line);border-radius:12px;background:var(--surface);color:var(--ink);font:inherit;padding:12px}.stop-orders textarea{resize:vertical}.stop-orders button:focus-visible,.stop-orders input:focus-visible,.stop-orders select:focus-visible,.stop-map-form input:focus-visible{outline:2px solid var(--caramel);outline-offset:3px}.stop-modes{display:flex;gap:8px;flex-wrap:wrap;margin:16px 0}.stop-modes button{border:1px solid var(--line);border-radius:20px;padding:8px 12px;background:transparent;color:var(--ink);font:inherit;font-size:12px;cursor:pointer}.stop-modes button[aria-pressed=true]{background:var(--ink);color:var(--surface)}.stop-units-note{margin:0 0 18px;max-width:65ch}.stop-products{display:grid;gap:12px}.stop-product{display:flex;justify-content:space-between;gap:18px;padding:22px;border:1px solid var(--line);border-radius:18px;background:var(--surface)}.stop-product-main{min-width:0;flex:1}.stop-product h4{font-size:15px;line-height:1.4;margin:6px 0 8px;overflow-wrap:anywhere}.stop-sku{font-size:11px;color:var(--muted);letter-spacing:.04em}.stop-name{font-size:12px;line-height:1.5;color:var(--muted);margin:0 0 12px;overflow-wrap:anywhere}.stop-balance{display:flex;flex-direction:column;gap:6px;font-size:12px}.stop-balance b{font-size:17px}.stop-product-action{flex:0 0 120px;display:flex;flex-direction:column;justify-content:center;align-items:stretch;gap:8px;text-align:center}.stop-unit{font-size:11px;color:var(--muted)}.stop-step{display:flex;align-items:center;border:1px solid var(--line);border-radius:10px;overflow:hidden;height:40px}.stop-step button{width:30px;flex:0 0 30px;height:100%;border:0;background:transparent;color:var(--ink);font-size:20px;cursor:pointer}.stop-step input{min-width:0;padding:5px 0;border:0;border-radius:0;text-align:center;font-size:14px;-moz-appearance:textfield}.stop-step input::-webkit-inner-spin-button,.stop-step input::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}.stop-map-link{font:inherit;font-size:11px;color:var(--muted);background:transparent;border:0;padding:6px 0;text-decoration:underline;text-underline-offset:3px;cursor:pointer;overflow-wrap:anywhere}.stop-problem{font-size:12px;line-height:1.5;color:var(--neg);margin:8px 0 0}.stop-unavailable{background:transparent}.stop-cart{position:sticky;top:22px;padding:22px;min-width:0}.stop-cart .card-h{margin-bottom:14px}.stop-cart-point{font-size:15px;font-weight:700}.stop-cart-point span{display:block;font-size:12px;font-weight:400;line-height:1.5;color:var(--muted);margin-top:5px}.stop-cart-line{display:flex;align-items:center;justify-content:space-between;gap:8px;border-top:1px solid var(--line);padding:13px 0}.stop-cart-line b{display:block;font-size:12px;line-height:1.4;overflow-wrap:anywhere}.stop-cart-line span{display:block;font-size:12px;color:var(--muted);margin-top:5px}.stop-comment-label{display:block;font-size:12px;margin-top:20px}.stop-comment-label textarea{display:block;width:100%;max-width:100%;min-width:0;box-sizing:border-box;margin-top:8px;border:1px solid var(--line);border-radius:12px;background:var(--surface);color:var(--ink);font:inherit;font-size:13px;padding:12px;resize:vertical}.stop-checkout{width:100%;justify-content:center;margin-top:16px}.stop-cart-note{margin-top:14px;font-size:11px}.stop-warning{padding:14px 18px;border:1px solid var(--caramel);border-radius:12px;font-size:13px}.stop-history{margin-top:28px}.stop-history .card-h{align-items:flex-start}.stop-order{border-top:1px solid var(--line);padding:15px 0}.stop-order summary{display:flex;flex-wrap:wrap;align-items:center;gap:8px 16px;cursor:pointer;font-size:12px}.stop-order-line{display:flex;justify-content:space-between;align-items:start;gap:16px;padding:10px 0;border-bottom:1px solid var(--line);font-size:12px;line-height:1.5}.stop-order-line span{min-width:0;overflow-wrap:anywhere}.stop-order-line b{flex-shrink:0;white-space:nowrap}.stop-order-actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:14px}.stop-review>div{margin:24px 0}.stop-review h3{margin:8px 0}.stop-map-form label{display:block;font-size:13px;margin:20px 0 12px}.stop-map-form input{margin-top:8px}.stop-map-candidate{width:100%;display:block;text-align:left;font:inherit;font-size:13px;line-height:1.5;background:transparent;color:var(--ink);padding:12px;border:1px solid var(--line);border-radius:10px;margin-top:8px;cursor:pointer}.stop-map-candidate small{display:block;color:var(--muted);margin-top:5px}.stop-map-form [data-stop-map-results]{max-height:320px;overflow:auto;margin:16px 0}.stop-orders button:disabled{opacity:.5;cursor:default}
.stop-mobile-cart{display:none}[data-stop-cart-drawer] .stop-cart{position:static;margin:0;border:0;padding:0;box-shadow:none}
@media(max-width:1150px){.stop-layout{grid-template-columns:minmax(0,1fr)}.stop-layout>.stop-cart{display:none}.stop-mobile-cart{display:flex;justify-content:space-between;align-items:center;position:sticky;top:0;z-index:3;padding:12px 0;margin-bottom:16px;gap:10px;background:var(--canvas);border-bottom:1px solid var(--line)}.stop-mobile-cart span{font-size:12px;color:var(--muted)}.stop-cart{position:static}.stop-product-action{flex-basis:125px}.stop-cart-line b{font-size:13px}}
@media(max-width:600px){.stop-heading{align-items:flex-start;flex-wrap:wrap}.stop-heading h2{font-size:26px}.stop-heading p{line-height:1.5}.stop-filters{grid-template-columns:minmax(0,1fr)}.stop-product{padding:16px;gap:12px}.stop-product h4{font-size:14px}.stop-product-action{flex-basis:105px}.stop-product-action .btn{padding-left:10px;padding-right:10px}.stop-balance b{font-size:15px}.stop-cart{padding:18px}.stop-history .card-h{flex-wrap:wrap}.stop-summary{gap:8px 14px}}

/* Личные карточки сотрудников */
.employees-page{min-width:0}.emp-toolbar,.emp-card-head{display:flex;gap:16px;align-items:center;justify-content:space-between;flex-wrap:wrap;margin:0 0 22px}.emp-toolbar h3{margin:0}.emp-tabs{display:flex;gap:8px;flex-wrap:wrap}.emp-card-tabs{margin:24px 0;flex-wrap:nowrap;overflow-x:auto;max-width:100%;padding-bottom:8px}.emp-card-tabs .btn{flex-shrink:0}.emp-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,310px),1fr));gap:18px}.emp-person{display:flex;gap:14px;align-items:flex-start;text-decoration:none;color:inherit;padding:24px;min-width:0}.emp-person>div{min-width:0;flex:1}.emp-person h3{font-size:18px;margin:0 0 8px;overflow-wrap:anywhere}.emp-person p{margin:0 0 6px}.emp-person small{display:block;margin-top:5px;overflow-wrap:anywhere;color:var(--muted,#817b73)}.emp-initial{display:grid;place-items:center;width:42px;height:42px;flex:0 0 42px;background:#b98c5724;border-radius:50%;font-weight:700}.emp-empty{padding:32px;border:1px dashed #b9ada0;border-radius:18px;color:var(--muted,#817b73);margin:18px 0;line-height:1.6}.emp-footnote{color:var(--muted,#817b73);margin-top:24px}.emp-card-head>div{flex:1;min-width:180px}.emp-card-head h2{margin:0 0 8px;overflow-wrap:anywhere}.emp-card-head p{margin:0 0 6px}.emp-content{padding:28px}.emp-details{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px}.emp-details>div{min-width:0}.emp-details dt,.emp-pay dt{font-size:13px;color:var(--muted,#817b73);margin-bottom:6px}.emp-details dd,.emp-pay dd{margin:0;overflow-wrap:anywhere}.emp-callout{padding:16px 18px;background:#b98c5712;border-left:3px solid #b98c57;border-radius:8px;margin:20px 0;line-height:1.6}.emp-form{display:grid;gap:16px}.emp-form>label,.employees-page label{display:flex;flex-direction:column;gap:7px;font-size:14px}.emp-form input:not([type=checkbox]),.emp-form select,.emp-form textarea,.employees-page input:not([type=checkbox]),.employees-page select{width:100%;min-width:0;max-width:100%;box-sizing:border-box;border:1px solid #d9d3ca;background:var(--surface,#fff);color:inherit;border-radius:10px;padding:11px 12px;font:inherit}.emp-form textarea{min-height:96px;resize:vertical}.emp-form input:disabled{opacity:.65}.emp-points{border:1px solid #d9d3ca;border-radius:12px;padding:12px;display:grid;gap:10px}.emp-points label,.emp-check{display:flex!important;flex-direction:row!important;gap:10px!important;align-items:center}.emp-points input,.emp-check input{width:18px;height:18px;flex:0 0 18px}.emp-form-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:8px}.emp-error{color:#9c3434;overflow-wrap:anywhere}.emp-pay,.emp-event{padding:20px 0;border-bottom:1px solid #ddd5cb;overflow-wrap:anywhere}.emp-pay strong{font-size:26px;display:block;margin:8px 0}.emp-pay small,.emp-event small{display:block;color:var(--muted,#817b73)}.emp-pay dl{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}.emp-pay button,.emp-event button{margin-top:12px}.emp-event>span{float:right;font-size:13px}.emp-score{font-size:64px;font-weight:700;margin:24px 0}.emp-score small{font-size:16px;margin-left:12px;font-weight:400}.emp-metrics{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}.emp-metrics>div{padding:18px;background:#b98c5712;border-radius:14px}.emp-metrics strong,.emp-metrics small{display:block;margin-top:12px}.emp-metrics strong{font-size:28px}.emp-search{flex:1;min-width:180px}.emp-content .tbl-wrap{max-width:100%;overflow:auto}@media(max-width:650px){.emp-content{padding:18px}.emp-card-head{align-items:flex-start}.emp-card-head>a{width:100%}.emp-details,.emp-pay dl,.emp-metrics{grid-template-columns:1fr}.emp-toolbar{align-items:stretch}.emp-toolbar>label{width:100%}.emp-event>span{float:none;display:block;margin-top:8px}.emp-tabs .btn{font-size:13px}.emp-person{padding:20px}.emp-grid{grid-template-columns:1fr}}

/* Compact period picker beside dashboard settings. */
#actions .overview-header-actions{display:flex;align-items:center;justify-content:flex-end;gap:8px;max-width:100%;width:auto}
.overview-header-actions .btn{height:38px;white-space:nowrap}
.overview-header-actions .overview-calendar{width:40px;min-width:40px;padding:0;justify-content:center;position:relative}
.overview-calendar.is-selected{color:var(--caramel);border-color:var(--caramel)}
.overview-calendar.is-selected:after{content:'';position:absolute;right:5px;top:5px;width:5px;height:5px;border-radius:50%;background:var(--caramel)}
.period-dialog{position:fixed;inset:auto;margin:0;padding:0;border:1px solid var(--line);border-radius:20px;background:var(--surface);color:var(--ink);box-shadow:0 18px 64px #0003;max-width:calc(100vw - 32px);max-height:calc(100dvh - 32px);overflow:auto;box-sizing:border-box}
.period-dialog::backdrop{background:rgba(18,15,13,.18);backdrop-filter:blur(2px)}
.period-picker{padding:24px;display:flex;flex-direction:column;gap:20px;min-width:0}
.period-picker-head{display:flex;justify-content:space-between;align-items:center;gap:16px}
.period-picker-head .lab{font-size:10px;letter-spacing:.15em;color:var(--muted)}
.period-picker-head h2{font:700 22px/1.25 var(--f-ui);margin:7px 0 0;text-transform:none;letter-spacing:-.03em}
.period-picker-head .icon-btn{align-self:flex-start;flex:0 0 32px}
.period-presets{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.period-presets button{display:flex;align-items:center;justify-content:space-between;gap:8px;min-height:42px;padding:10px 12px;border:1px solid var(--line);border-radius:10px;background:transparent;color:var(--ink);font:500 13px/1.3 var(--f-ui);text-align:left;cursor:pointer}
.period-presets button:hover{background:var(--surface-2)}
.period-presets button[aria-pressed=true]{background:var(--ink);color:var(--surface);border-color:var(--ink)}
.period-presets svg{flex-shrink:0}
.period-custom{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:end;gap:8px}
.period-custom[hidden]{display:none}
.period-custom>span{padding-bottom:14px;color:var(--muted)}
.period-custom label{display:flex;flex-direction:column;gap:7px;color:var(--muted);font-size:12px;min-width:0}
.period-custom input{box-sizing:border-box;width:100%;min-width:0;max-width:100%;height:44px;padding:8px;border:1px solid var(--line);border-radius:10px;background:var(--surface-2);color:var(--ink);font:14px var(--f-ui)}
.period-picker-hint,.period-picker-error{font-size:12px;line-height:1.5;margin:0;color:var(--muted)}
.period-picker-error{color:var(--neg)}
.period-picker-footer{display:flex;gap:10px;justify-content:flex-end;padding-top:16px;border-top:1px solid var(--line)}
.period-picker-footer .btn{min-height:42px;justify-content:center}
.period-picker button:focus-visible,.period-picker input:focus-visible,.overview-calendar:focus-visible{outline:2px solid var(--caramel);outline-offset:3px}
.overview-period-results{display:flex;flex-direction:column;gap:20px}
.overview-period-results .sec-h,.overview-period-results .kpis{margin:0}
@media(max-width:960px){#actions .overview-header-actions{width:100%;justify-content:flex-start}#actions .overview-header-actions [data-act="edit"]{display:inline-flex}.overview-header-actions .btn{height:42px}.overview-header-actions .overview-calendar{width:44px;min-width:44px}}
@media(max-width:560px){.period-picker{padding:20px;gap:16px}.period-presets button{font-size:12px;padding:10px}.period-picker-footer .btn{flex:1}.overview-period-results .card-h{flex-wrap:wrap;gap:8px}}

/* Overview: keep the title and controls in one responsive header row. */
.top:has(.overview-header-actions){display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:20px;padding-block:28px 24px}
.top:has(.overview-header-actions) .heading-meta{display:none}
.top:has(.overview-header-actions) .title{margin:0;line-height:1.1;white-space:nowrap;overflow-wrap:normal;font-size:clamp(28px,3.4vw,46px)}
.top:has(.overview-header-actions) .top-r{display:flex;width:auto;justify-self:end;flex-wrap:nowrap}
.top:has(.overview-header-actions) #actions .overview-header-actions{width:auto;justify-content:flex-end;flex-wrap:nowrap}
.overview-header-actions .overview-settings{display:inline-flex;align-items:center;justify-content:center;gap:8px}
@media(max-width:960px){.top:has(.overview-header-actions){gap:16px;padding-block:22px}.overview-header-actions .btn{height:44px}.overview-header-actions .overview-calendar{width:44px;min-width:44px}}
@media(max-width:600px){.top:has(.overview-header-actions){gap:12px;padding-block:20px}.top:has(.overview-header-actions) .title{font-size:clamp(22px,5vw,28px)}.overview-header-actions .overview-settings{width:44px;min-width:44px;padding:0}.overview-settings-label{display:none}.overview-header-actions .overview-settings .ic{width:18px;height:18px}}

/* P&L: readable financial breakdown and month rows on phones. */
.pnl-breakdown .wf-x>span{min-width:0;overflow-wrap:anywhere}
.pnl-breakdown-list{display:none;list-style:none;padding:0;margin:0}
@media(max-width:600px){
  .pnl-breakdown .wf,.pnl-breakdown .wf-x{display:none}
  .pnl-breakdown-list{display:grid;gap:0}
  .pnl-breakdown-list>li{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:9px 16px;align-items:baseline;padding:14px 0;border-bottom:1px solid var(--line)}
  .pnl-breakdown-list>li:first-child{padding-top:4px}
  .pnl-breakdown-list>li:last-child{border-bottom:0;padding-bottom:0}
  .pnl-breakdown-list>li>span:first-child{min-width:0;font-size:13px;line-height:1.4;overflow-wrap:anywhere}
  .pnl-breakdown-list strong{font-size:14px;line-height:1.4;white-space:nowrap;font-variant-numeric:tabular-nums;text-align:right}
  .pnl-breakdown-bar{grid-column:1/-1;height:7px;overflow:hidden;border-radius:999px;background:var(--surface-3)}
  .pnl-breakdown-bar i{display:block;height:100%;border-radius:inherit;background:var(--ink)}
  .pnl-breakdown-list .out .pnl-breakdown-bar i{background:var(--neg);opacity:.85}
  .pnl-breakdown-list .res .pnl-breakdown-bar i{background:var(--caramel)}
  .pnl-breakdown-list .res.neg .pnl-breakdown-bar i{background:var(--neg)}
  .pnl-breakdown-list .res>span:first-child,.pnl-breakdown-list .res strong{font-weight:700}
  .pnl-breakdown .card-h,.pnl-months .card-h{gap:6px}
  .pnl-months .hrows{gap:4px}
  .pnl-months .hrow{grid-template-columns:minmax(0,1fr) auto;gap:9px 14px;padding-block:12px}
  .pnl-months .hrow .n span{white-space:normal;overflow:visible;overflow-wrap:anywhere}
  .pnl-months .hrow .v{min-width:0;font-size:14px}
  .pnl-months .hrow .v small{max-width:none;white-space:normal;overflow:visible;line-height:1.4;margin-top:3px}
  .pnl-months .hrow>.b{grid-column:1/-1;grid-row:2;height:7px}
}
/* Payroll source review, vacation calculation and shift reconciliation. */
.emp-earning{display:grid;grid-template-columns:78px minmax(0,1fr) minmax(0,1fr);gap:12px;align-items:center;border-bottom:1px solid var(--border,#e3ddd4);padding:12px 0}
.emp-earning label{min-width:0}.emp-earning input{min-width:0;width:100%;box-sizing:border-box}.emp-earning b{font-size:13px}
.emp-leave small{display:block;overflow-wrap:anywhere}.emp-leave .emp-tabs{margin-top:14px}.emp-leave p,.emp-shift p,.emp-shift small{overflow-wrap:anywhere}
.emp-leave{background:var(--card,#fff);border:1px solid var(--border,#e3ddd4);border-radius:18px;padding:20px;margin:16px 0}.emp-leave>div:first-child>b,.emp-leave>div:first-child>a{display:block;margin-bottom:6px}
.emp-ready{color:#317552}.emp-issues{color:#a34b32}.emp-shift .emp-metrics strong{font-size:20px}.emp-shift .emp-metrics{margin:16px 0}
.emp-shift .emp-metrics span{display:block;margin-top:6px;font-weight:600}
@media(max-width:600px){.emp-earning{grid-template-columns:1fr 1fr;gap:8px}.emp-earning>b{grid-column:1/-1}.emp-earning label{font-size:12px}.emp-leave .emp-tabs .btn{white-space:normal}.emp-shift .emp-metrics{grid-template-columns:1fr 1fr}.emp-shift .emp-metrics>div:last-child{grid-column:1/-1}}

/* Functional loading feedback remains active when decorative motion is off. */
#boot .bar i,
:root[data-motion="off"] #boot .bar i {
  width: 40%;
  will-change: transform;
  animation: etlon-loading-sweep 1.4s ease-in-out infinite !important;
}
@keyframes etlon-loading-sweep {
  from { transform: translateX(-100%); }
  to { transform: translateX(350%); }
}
@media (prefers-reduced-motion: reduce) {
  #boot .bar i,
  :root[data-motion="off"] #boot .bar i {
    transform: none;
    will-change: opacity;
    animation: etlon-loading-pulse 2s ease-in-out infinite alternate !important;
  }
}
@keyframes etlon-loading-pulse {
  from { opacity: .35; }
  to { opacity: 1; }
}