/* МАЙБАЙК — панель в духе образца владельца («кабина пилота»): тёмная
   тема с бирюзовым «хорошо» и оранжевым акцентом, светлая - зеркалом.
   Акцент - фирменный оранжевый брендбука FF5907, логотип свой.
   Шрифты: Manrope - текст, JetBrains Mono - числа и подписи колонок,
   Unbounded - только заголовок входа (static/fonts, fonts.css).

   Тема: по системе, а кнопка в шапке ставит data-theme на <html> и
   помнит выбор в этом браузере (base.html). Поэтому тёмные значения
   объявлены дважды: системная тёмная, если не выбрана светлая, и
   выбранная тёмная. Цвета - только токенами ниже: правило с «тёмным»
   цветом мимо токена в светлой теме и наоборот рисовало бы пятна. */
:root{
  --brand:#FF5907;--brand-dark:#D84400;--brand-soft:#FF8F56;--brand-pale:#FFD0B8;
  /* --ink - цвет полосы браузера и заставки (THEME_COLOR в app.py) */
  --ink:#12161C;--green:#17A51E;--blue:#05ACFF;--amber:#F2A516;
  --font-head:"Unbounded","Manrope",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --font-text:"Manrope",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --font-mono:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  --r:16px;--r2:12px;--r3:10px;
  /* светлая */
  --bg:#EEF3F2;--bg2:#F5F9F8;--card:#FFFFFF;--card2:#F2F6F5;--hover:#F2F6F5;--head:#F5F9F8;
  --line:rgba(32,40,50,.09);--line-strong:rgba(32,40,50,.16);
  --text:#1D242D;--muted:#5F6A75;--faint:#818C97;--link:#BC3E00;
  --ok:#086E65;--okbg:rgba(15,158,147,.12);
  --bad:#C52535;--badbg:rgba(217,52,69,.1);
  --warn:#8B6308;--warnbg:rgba(245,200,75,.22);
  --accent:#FF5907;--accentbg:rgba(255,90,31,.1);--on-accent:#fff;--accent-ink:#BC3E00;
  --info:#0B6E99;--infobg:rgba(5,172,255,.1);
  --chip:#F2F6F5;--glass:rgba(255,255,255,.82);
  --invert:#1D242D;--on-invert:#fff;
  --shadow:0 1px 2px rgba(20,30,40,.04);--pop:0 16px 40px rgba(20,30,40,.14);
  color-scheme:light;
}
@media (prefers-color-scheme:dark){:root:not([data-theme=light]){
  --bg:#12161C;--bg2:#171C23;--card:#1C222B;--card2:#222934;--hover:#222934;--head:#171C23;
  --line:rgba(220,235,240,.08);--line-strong:rgba(220,235,240,.14);
  --text:#E6ECEE;--muted:#8A96A3;--faint:#687583;--link:#FF8F56;
  --ok:#25F9E7;--okbg:rgba(37,249,231,.12);
  --bad:#FF6473;--badbg:rgba(255,77,94,.12);
  --warn:#F5C84B;--warnbg:rgba(245,200,75,.12);
  --accentbg:rgba(255,90,31,.14);--accent-ink:#FF6F28;
  --info:#7CCBFF;--infobg:rgba(5,172,255,.12);
  --chip:#222934;--glass:rgba(23,28,35,.82);
  --invert:#E6ECEE;--on-invert:#12161C;
  --shadow:0 0 #0000;--pop:0 18px 48px rgba(0,0,0,.45);
  color-scheme:dark;
}}
:root[data-theme=dark]{
  --bg:#12161C;--bg2:#171C23;--card:#1C222B;--card2:#222934;--hover:#222934;--head:#171C23;
  --line:rgba(220,235,240,.08);--line-strong:rgba(220,235,240,.14);
  --text:#E6ECEE;--muted:#8A96A3;--faint:#687583;--link:#FF8F56;
  --ok:#25F9E7;--okbg:rgba(37,249,231,.12);
  --bad:#FF6473;--badbg:rgba(255,77,94,.12);
  --warn:#F5C84B;--warnbg:rgba(245,200,75,.12);
  --accentbg:rgba(255,90,31,.14);--accent-ink:#FF6F28;
  --info:#7CCBFF;--infobg:rgba(5,172,255,.12);
  --chip:#222934;--glass:rgba(23,28,35,.82);
  --invert:#E6ECEE;--on-invert:#12161C;
  --shadow:0 0 #0000;--pop:0 18px 48px rgba(0,0,0,.45);
  color-scheme:dark;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--text);font:400 14px/1.5 var(--font-text);
  -webkit-font-smoothing:antialiased;overflow-x:clip}
a{color:var(--link);text-decoration:none}a:hover{text-decoration:underline}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
/* Числа - моноширинным: суммы и счётчики не пляшут по ширине, как в образце. */
.mono,code,kbd,.num{font-family:var(--font-mono)}
::selection{background:var(--accentbg)}

/* ── меню: колонка слева, как развёрнутая навигация образца ──
   Группы с подписью, пункт - значок и слово, открытая страница - своей
   плашкой с оранжевой меткой у края. Кнопка внизу сворачивает колонку
   до рейки значков (data-rail на <html>, подпись - во всплывающей
   подсказке). Подпункты разделов (склад, сервис, настройки) раскрываются
   на месте (<details>), счётчик справа - сколько там ждёт. Разметка -
   base.html, дерево - app/web/nav.py. */
body.with-side{display:grid;grid-template-columns:248px minmax(0,1fr);min-height:100vh}
:root[data-rail="1"] body.with-side{grid-template-columns:76px minmax(0,1fr)}
.side{position:sticky;top:0;align-self:start;height:100vh;height:100dvh;overflow-y:auto;scrollbar-width:thin;
  scrollbar-color:var(--line-strong) transparent;
  background:var(--bg2);color:var(--text);display:flex;flex-direction:column;padding:16px 10px 12px;
  border-right:1px solid var(--line)}
.side-head{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:4px 8px 16px}
.brand{display:flex;align-items:baseline;gap:8px;color:var(--text);min-width:0}
.brand:hover{text-decoration:none}
.brand .logo{height:19px;width:auto;display:block;color:var(--text)}
.brand-sub{font:700 10px/1 var(--font-mono);letter-spacing:.16em;color:var(--accent-ink)}
.ico{width:18px;height:18px;flex:0 0 18px;display:inline-block;vertical-align:middle}
/* Кто вошёл: кружок с инициалами, имя и роль - название профиля прав. */
.side-me{display:flex;align-items:center;gap:10px;margin:0 0 10px;padding:8px;border-radius:var(--r2);
  color:var(--text);box-shadow:inset 0 0 0 1px var(--line)}
.side-me:hover{text-decoration:none;background:var(--card)}
.side-me .avatar{position:relative;flex:0 0 34px;width:34px;height:34px;border-radius:50%;display:grid;place-items:center;
  background:linear-gradient(135deg,#3A4656,#252C36);color:#E6ECEE;font:800 12px/1 var(--font-text)}
/* зелёная точка «в сети», как у аватара образца */
.side-me .avatar::after{content:"";position:absolute;right:-1px;bottom:-1px;width:10px;height:10px;border-radius:50%;
  background:var(--ok);box-shadow:0 0 0 2px var(--bg2)}
.side-me .who-text{display:flex;flex-direction:column;min-width:0}
.side-me b{font-size:13px;font-weight:700;line-height:1.25;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.side-me small{color:var(--muted);font-size:12px;line-height:1.3}
.side-me.on{background:var(--card);box-shadow:inset 0 0 0 1px var(--line-strong)}
/* поиск в колонке - только на телефоне: на компьютере он в шапке */
.side-search{position:relative;margin:0 0 6px;display:none}
.side-search .ico{position:absolute;left:11px;top:50%;transform:translateY(-50%);color:var(--muted);width:16px;height:16px}
.side-search input{margin:0;padding:9px 10px 9px 34px;border-radius:var(--r3);border:0;
  box-shadow:inset 0 0 0 1px var(--line);background:var(--card);color:var(--text);font-size:14px}
.side nav{display:flex;flex-direction:column}
.side .grp{margin:18px 13px 6px;font:500 11px/1 var(--font-mono);letter-spacing:.07em;
  text-transform:uppercase;color:var(--muted)}
.nav-link{position:relative;display:flex;align-items:center;gap:12px;height:40px;padding:0 12px;margin:1px 0;border-radius:var(--r3);
  color:var(--muted);font-weight:600;font-size:14px;line-height:1.2;cursor:pointer;list-style:none;white-space:nowrap}
.nav-link span{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis}
.nav-link .ico{color:inherit}
.nav-link:hover{color:var(--text);text-decoration:none;background:var(--card)}
.nav-link.on{color:var(--text);background:var(--card);box-shadow:inset 0 0 0 1px var(--line)}
.nav-link.on::before{content:"";position:absolute;left:-10px;top:10px;bottom:10px;width:3px;border-radius:3px;background:var(--accent)}
.badge{flex:0 0 auto;min-width:18px;height:18px;padding:0 5px;border-radius:99px;display:inline-flex;
  align-items:center;justify-content:center;background:var(--accent);color:#fff;
  font:700 10.5px/1 var(--font-mono);font-style:normal}
.badge.soft{background:var(--card2);color:var(--text)}
.nav-sub>summary::-webkit-details-marker{display:none}
.nav-sub>summary .chev{flex:0 0 16px;width:16px;height:16px;transition:transform .15s;opacity:.7}
.nav-sub[open]>summary .chev{transform:rotate(180deg)}
.nav-sub[open]>summary{color:var(--text)}
.nav-sub[open]>summary .badge{display:none}
.nav-kids{padding:2px 0 4px 14px;margin-left:8px;border-left:1px solid var(--line)}
.nav-kids .nav-link{font-size:13.5px;height:36px}
.nav-kids .nav-link.on::before{left:-33px}
.side-foot{position:sticky;bottom:-12px;z-index:1;margin:auto -10px -12px;padding:8px 10px 12px;display:flex;flex-direction:column;gap:2px;
  background:var(--bg2);border-top:1px solid var(--line)}
.side-tool{display:flex;align-items:center;gap:12px;height:44px;padding:0 12px;border:0;border-radius:var(--r3);
  background:transparent;color:var(--muted);font:600 14px/1 var(--font-text);cursor:pointer;justify-content:flex-start;min-height:0}
.side-tool:hover{filter:none}
.side-theme{display:none}
.brand .bolt{display:none}
/* значок темы: солнце в тёмной (уйти в светлую), луна в светлой - и в шапке, и в меню */
.when-light{display:none}
:root[data-theme=light] .when-light{display:inline-block}
:root[data-theme=light] .when-dark{display:none}
@media (prefers-color-scheme:light){
  :root:not([data-theme=dark]) .when-light{display:inline-block}
  :root:not([data-theme=dark]) .when-dark{display:none}
}
.side-tool:hover{background:var(--card);color:var(--text)}
.burger{display:none;cursor:pointer;padding:6px 8px;border-radius:8px;line-height:1;color:var(--muted)}
.burger .ico{width:22px;height:22px}
.burger:hover{background:var(--card);color:var(--text)}
/* Рейка: только значки. Подпись пункта - в title (base.html), счётчик -
   точкой над значком, подпункты раздела - значками под ним. */
@media (min-width:1001px){
  :root[data-rail="1"] .side{padding:16px 10px 12px;overflow-x:hidden}
  :root[data-rail="1"] .side .brand-sub,:root[data-rail="1"] .side .grp,:root[data-rail="1"] .nav-link .chev{display:none}
  :root[data-rail="1"] .nav-link span,:root[data-rail="1"] .side-me .who-text,:root[data-rail="1"] .side-tool span{
    position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
  :root[data-rail="1"] .side-head{padding:4px 0 16px;justify-content:center}
  :root[data-rail="1"] .brand .logo,:root[data-rail="1"] .brand-sub{display:none}
  :root[data-rail="1"] .brand .bolt{display:block;height:26px;width:auto}
  :root[data-rail="1"] .nav-sub[open]>.nav-kids{margin:2px 0 6px;padding:4px 0;border-radius:var(--r2);
    background:color-mix(in srgb,var(--card) 60%,transparent);box-shadow:inset 0 0 0 1px var(--line)}
  :root[data-rail="1"] .side-foot{margin:auto -10px -12px}
  :root[data-rail="1"] .side-me{justify-content:center;box-shadow:none;padding:6px 0}
  :root[data-rail="1"] .nav-link,:root[data-rail="1"] .side-tool{justify-content:center;padding:0;height:44px}
  :root[data-rail="1"] .nav-link .badge{position:absolute;top:4px;right:4px;min-width:16px;height:16px;font-size:9.5px;padding:0 4px}
  :root[data-rail="1"] .nav-sub[open]>summary .badge{display:none}
  :root[data-rail="1"] .nav-kids{padding:2px 0 4px;margin:0;border:0}
  :root[data-rail="1"] .nav-kids .nav-link.on::before{left:-10px}
  :root[data-rail="1"] .side-tool .ico{transform:scaleX(-1)}
  :root[data-rail="1"] .side .grp+*{margin-top:0}
  :root[data-rail="1"] .nav-group+.nav-group{margin-top:10px;padding-top:10px;border-top:1px solid var(--line)}
}

/* ── шапка над страницей: крошки, поиск велосипеда, Входящие, тема ── */
.page{min-width:0;display:flex;flex-direction:column}
.top{position:sticky;top:0;z-index:20;display:flex;align-items:center;gap:12px;height:60px;padding:0 28px;
  border-bottom:1px solid var(--line);background:var(--glass);
  background:color-mix(in srgb,var(--bg) 84%,transparent);
  -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)}
.top .crumbs{margin:0;flex:0 1 auto;min-width:0;flex-wrap:nowrap;overflow:hidden;white-space:nowrap}
.top .crumbs>*{flex:0 0 auto}
.top-fill{flex:0 1 auto}
.top-search{flex:1 1 auto;max-width:520px;margin-left:auto;display:flex;align-items:center;gap:10px;height:38px;padding:0 12px;
  border-radius:var(--r3);background:var(--card);box-shadow:inset 0 0 0 1px var(--line);color:var(--muted)}
.top-search:focus-within{box-shadow:inset 0 0 0 1px var(--accent),0 0 0 3px var(--accentbg)}
.top-search .ico{width:16px;height:16px;flex:0 0 16px}
.top-search input{flex:1;min-width:0;margin:0;padding:0;border:0;background:transparent;box-shadow:none;color:var(--text);font:500 14px var(--font-text)}
.top-search input:focus{box-shadow:none;outline:0}
kbd{display:inline-grid;place-items:center;min-width:20px;height:20px;padding:0 5px;border-radius:5px;
  box-shadow:inset 0 0 0 1px var(--line-strong);color:var(--muted);font:600 11px/1 var(--font-mono)}
.top-right{margin-left:12px;display:flex;gap:8px;align-items:center}
.top-search+.top-right{margin-left:0}
.top-fill+.top-right,.crumbs+.top-right{margin-left:auto}
.top-btn{position:relative;display:grid;place-items:center;width:38px;height:38px;padding:0;border:0;border-radius:var(--r3);
  background:transparent;box-shadow:inset 0 0 0 1px var(--line);color:var(--muted);cursor:pointer}
.top-btn:hover{background:var(--card);color:var(--text);text-decoration:none}
.top-btn .badge{position:absolute;top:-6px;right:-6px;box-shadow:0 0 0 2px var(--bg)}

/* ── телефон: колонка - шапка с бургером, меню - поверх страницы,
   главные разделы - панелью внизу. Галочка вместо скрипта. ── */
.tabbar{display:none}
@media (max-width:1000px){
  body.with-side,:root[data-rail="1"] body.with-side{display:block}
  .side{position:sticky;top:0;z-index:30;height:auto;padding:10px 14px;border-right:0;border-bottom:1px solid var(--line);
    background:var(--glass);background:color-mix(in srgb,var(--bg2) 88%,transparent);
    -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);overflow:visible}
  .side-head{padding:0}
  .burger{display:grid;place-items:center;width:44px;height:44px;padding:0;border-radius:var(--r3);box-shadow:inset 0 0 0 1px var(--line)}
  .side nav,.side-me,.side-search,.side-foot{display:none}
  .nav-toggle:checked ~ .side{position:fixed;inset:0;align-self:auto;height:auto;z-index:60;overflow-y:auto;overscroll-behavior:contain;
    background:var(--bg2);padding:10px 14px calc(90px + env(safe-area-inset-bottom,0px))}
  .nav-toggle:checked ~ .side nav{display:flex}
  .nav-toggle:checked ~ .side .side-me{display:flex;margin-top:12px}
  .nav-toggle:checked ~ .side .side-search{display:block}
  .nav-toggle:checked ~ .side .side-foot{display:flex;position:static;margin:12px 0 0;padding:8px 0 0}
  .side-theme{display:flex}
  .side-rail{display:none}
  .nav-toggle:checked ~ .tabbar label.tab{color:var(--text);background:var(--card);box-shadow:inset 0 0 0 1px var(--line)}
  .nav-toggle:checked ~ .tabbar .tab.on{color:var(--muted);background:none;box-shadow:none}
  .nav-toggle:checked ~ .tabbar .tab.on::before{display:none}
  .top{position:static;height:auto;min-height:0;padding:10px 16px 0;border:0;background:none;
    -webkit-backdrop-filter:none;backdrop-filter:none}
  .top-search,.top-right{display:none}
  .top-fill{display:none}
  /* Крошка - цель под палец. Высотой, а не полями с минусом: у .crumbs
     overflow:hidden, и выступ за неё обрезался бы вместе с зоной нажатия.
     Та же высота у самой ленты: без ссылки в крошках (список, где
     последняя крошка - текст) шапка была на 20 px ниже карточки, и при
     переходе в карточку страница прыгала. */
  .top .crumbs{min-height:40px}
  .top .crumbs a{display:inline-flex;align-items:center;min-height:40px}
  .tabbar{position:fixed;left:0;right:0;bottom:0;z-index:70;display:flex;justify-content:space-around;gap:4px;
    padding:6px calc(6px + env(safe-area-inset-right,0px)) calc(6px + env(safe-area-inset-bottom,0px)) calc(6px + env(safe-area-inset-left,0px));
    border-top:1px solid var(--line);background:var(--glass);
    -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)}
  .tab{position:relative;flex:1 1 0;min-width:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;
    height:52px;padding:6px 4px;border-radius:var(--r2);color:var(--muted);font:600 10px/1.1 var(--font-text);cursor:pointer;margin:0}
  .tab span{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .tab .ico{width:21px;height:21px}
  .tab:hover{text-decoration:none;color:var(--text)}
  .tab.on{color:var(--text);background:var(--card);box-shadow:inset 0 0 0 1px var(--line)}
  .tab.on::before{content:"";position:absolute;left:30%;right:30%;top:-7px;height:3px;border-radius:3px;background:var(--accent)}
  .tab .badge{position:absolute;top:2px;left:calc(50% + 6px);min-width:16px;height:16px;font-size:9.5px;padding:0 4px}
  body.with-side main{padding-bottom:calc(96px + env(safe-area-inset-bottom,0px))}
}

/* width:100% - main стоит в сетке рядом с меню с полями auto, и без явной
   ширины её задаёт самая широкая таблица: обёртка .table-wrap так и не
   начинает прокрутку, и вбок уезжает вся страница, а не одна таблица. */
main{width:100%;max-width:1360px;margin:0 auto;padding:28px 32px 56px}
@media (min-width:1600px){main{padding:36px 48px 64px}}
/* Заголовки - Manrope с плотной разрядкой, как заголовки разделов образца;
   широкий Unbounded остаётся входу. */
h1{font:700 26px/1.1 var(--font-text);margin:0 0 20px;letter-spacing:-.03em;text-wrap:balance}
h2{font:700 15px/1.5 var(--font-text);color:var(--text);margin:0 0 16px;letter-spacing:-.01em;text-wrap:balance}
h3{font:700 14px/1.3 var(--font-text);margin:16px 0 8px}
h3>nav.tabs{margin-left:10px;vertical-align:middle}
/* Подпись к заголовку («533 · за всё время») - строкой под ним: сводка
   раздела, как «12 всего · 11 в работе» в образце. */
h1 small{display:block;margin-top:8px;font:600 14px/1.5 var(--font-text);letter-spacing:0;text-transform:none;color:var(--muted)}
h1 small b{color:var(--text);font-weight:800}
h1 .tag{vertical-align:middle;margin-left:6px}
h2 small{font-weight:500}
.bar{display:flex;flex-wrap:wrap;align-items:flex-end;gap:10px;margin-bottom:22px}
.bar h1{margin:0;flex:1 1 auto}
/* Крошки: «Склад › Приходы» - где я и куда назад. */
.crumbs{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin:0 0 10px;font-size:13px;font-weight:600;color:var(--muted)}
.crumbs a{color:var(--muted)}
.crumbs a:hover{color:var(--text);text-decoration:none}
.crumbs>:last-child{color:var(--text)}
.crumbs .sep{color:var(--muted)}
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:22px 24px;margin-bottom:20px;min-width:0;box-shadow:var(--shadow)}
.card.narrow{max-width:560px}
@media (min-width:861px){.card.narrow{max-width:min(560px,calc((100% - 20px)/2))}}
.cols>.card.narrow{max-width:none}
/* поля карточки - ровно 24 со всех сторон: последний абзац не добавляет свой отступ */
.card>:first-child{margin-top:0}
.card>:last-child{margin-bottom:0}
/* Пары карточек - по высоте своего содержимого: растянутая до соседки
   карточка оставляла пустоту в полторы тысячи пикселей. */
.cols{display:grid;grid-template-columns:1fr 1fr;gap:20px;align-items:start}
.cols.stretch{align-items:stretch}
.cols>.card{margin-bottom:0}
.cols+*{margin-top:20px}
@media (max-width:860px){.cols{grid-template-columns:1fr}}

/* Плитки: число и подпись, как плитки показателей образца - число
   моноширинным, подпись мелким моно под ним. Тревожная - цветом числа и
   тонкой полосой сверху, а не заливкой: шесть цветных плиток подряд
   кричали бы, и глаз не находил ту, что правда горит. */
.tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:20px;margin-bottom:24px}
/* Между рядами плиток - отступ самой плитки сверху, а не row-gap:
   плитка занимает пять строк ряда (subgrid ниже), и межстрочные зазоры
   родителя оставались внутри каждой плитки пустой полосой под числом.
   Первый ряд отдаёт свой отступ обратно минусом у .tiles - отступы до
   и после плиток прежние, в том числе схлопнутые с соседями. */
.tiles{--tile-gap:20px;row-gap:0;margin-top:calc(0px - var(--tile-gap))}
.tiles>.tile{margin-top:var(--tile-gap)}
.card>.tiles:first-child{margin-top:calc(0px - var(--tile-gap))}
/* после пары карточек (.cols+* - 20 px) плитки отступают ровно так же */
.cols+.tiles{margin-top:0}
/* Плитки миллионов (план, журнал финансов): «2 084 600 ₽» в 160
   пикселей не влезает, и «₽» уезжал на свою строку. */
.tiles.wide{grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}
/* Готовность: две таблицы подряд - колонки одной ширины. */
table.ready th:first-child{width:190px}
table.ready th:last-child{width:110px}
table.ready td:last-child{white-space:nowrap}
/* Задачи на сегодня: число слева, дело справа, цвет по уровню. */
.tasks{display:grid;gap:2px}
.task{display:flex;gap:14px;align-items:baseline;padding:9px 12px;border-radius:var(--r3);color:var(--text)}
.task:hover{background:var(--hover);text-decoration:none}
.task .n{font:700 18px/1 var(--font-mono);min-width:36px;text-align:right}
.task .t{display:flex;flex-direction:column;gap:3px;font-weight:600}
.task .t small{font-weight:500;font-size:12px}
a.task.hot,a.task.warn,a.task.info{color:var(--text)}
.task.hot .n{color:var(--bad)}.task.warn .n{color:var(--warn)}.task.info .n{color:var(--muted)}
/* Шаблоны акций - карточками: название, условие, кнопка «Создать». */
.kinds{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:12px;margin-bottom:20px}
.kind{display:flex;flex-direction:column;gap:6px;background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:16px 18px}
.kind b{font:700 15px/1.25 var(--font-text)}
.kind small{color:var(--muted);font-size:12px;line-height:1.4}
.kind small.when{flex:1;color:var(--text);font-weight:600}
.kind .btn{align-self:flex-start;min-height:32px;padding:4px 12px;font-size:13px;margin-top:4px;
  background:transparent;color:var(--text);box-shadow:inset 0 0 0 1px var(--line-strong)}
.kind .btn:hover{background:var(--card2);filter:none}
.tile{display:block;background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:22px 24px 18px;color:var(--text);
  position:relative;overflow:hidden;box-shadow:var(--shadow);transition:background .2s,border-color .2s}
a.tile:hover{text-decoration:none;border-color:var(--line-strong);background:var(--hover)}
.tile{display:grid;grid-template-rows:minmax(32px,auto);align-content:start;align-items:end}
.tile>b,.tile small,.tile>.bar-track{align-self:start}
/* Ряд плиток делит строки «подпись / число / пояснение» (subgrid): длинная
   подпись в две строки опускает числа всего ряда разом, а короткая не
   оставляет пустой полосы над числом. Без subgrid - запасной вариант выше.
   Строк пять, а не три: у плиток парка под числом два пояснения (процент и
   норма), а лишнему элементу subgrid новой строки не даёт - он ложился
   поверх предыдущего. Пустые строки ряда схлопываются в ноль. */
@supports (grid-template-rows:subgrid){
  .tile{grid-row:span 5;grid-template-rows:subgrid;row-gap:0;align-items:start}
}
.tile>b{min-width:0}
.tile b{display:block;order:1;font:700 28px/1.12 var(--font-mono);line-height:32px;letter-spacing:-.04em;margin:8px 0 4px;white-space:nowrap;font-variant-numeric:tabular-nums}
/* Подпись плитки - метка образца над числом: span раскрывается (contents),
   его текст встаёт первым, пояснение <small> - под числом. Разметка
   плитки прежняя: <b>число</b><span>подпись<br><small>…</small></span>. */
.tile>span:not(.bar-track){display:contents;color:var(--muted);font:500 11px/1.4 var(--font-mono);text-transform:uppercase;letter-spacing:.07em}
.tile>span>br{display:none}
.tile small,.tile>.bar-track{order:2}
.tile small{display:block;margin-top:2px;color:var(--muted);text-transform:none;letter-spacing:0;font:600 12px/1.45 var(--font-mono)}
.tile.hot b{color:var(--bad)}.tile.good b{color:var(--ok)}.tile.warn b{color:var(--warn)}
/* Число-ссылка красится как плитка, а не как ссылка: иначе «−8 до нормы»
   у плитки парка выглядело бы обычным числом. Подпись .bad/.warn/.ok -
   цветом, а не приглушённым .tile small. */
.tile.hot b a,.tile.good b a,.tile.warn b a{color:inherit}
.tile small.bad{color:var(--bad)}.tile small.warn{color:var(--warn)}.tile small.ok{color:var(--ok)}

/* Таблица - как таблица данных образца: шапка мелким моно капсом, строка
   повыше, числа моноширинным вправо, наведение - чуть светлее. */
table{width:100%;border-collapse:collapse;font-size:13px}
th{text-align:left;color:var(--muted);font:500 11px/1.3 var(--font-mono);text-transform:uppercase;letter-spacing:.06em;
  padding:14px 14px 10px;border-bottom:1px solid var(--line);background:transparent;white-space:nowrap}
td{padding:13px 14px;border-bottom:1px solid var(--line);vertical-align:top}
tr:last-child td{border-bottom:0}
tr:hover>td{background:var(--hover)}
td.num,th.num{text-align:right;white-space:nowrap;font-variant-numeric:tabular-nums}
td.num{font-family:var(--font-mono);font-weight:600;font-size:13px;letter-spacing:-.01em}
td.num small{white-space:normal}
.table-wrap>table>tbody>tr>th,.table-wrap>table>tbody>tr>td{padding-left:10px;padding-right:10px}
/* выбор клиента в строке выписки - не шире колонки: длинный вариант раздувал таблицу */
td .inline-form select{max-width:300px;text-overflow:ellipsis}
/* номер рамы, VIN мотора и «где» - одной строкой: их читают и копируют целиком */
td[data-label="VIN мотора"],td[data-label="Рама"],td[data-label="Где"]{white-space:nowrap}
/* Имя в первой колонке - текстом, а не оранжевой ссылкой: в образце
   кликабельна вся строка, а цветом выделено только важное. */
td a{color:var(--text);font-weight:600}
td a:hover{color:var(--link);text-decoration:none}
td:first-child>a:first-child,td:first-child>b>a:first-child{font-weight:700}
td a.btn,td a.tag{font-weight:700}
td small a{font-weight:500}
td a.btn:hover{color:var(--on-accent)}
td a.btn.ghost,td a.btn.ghost:hover{color:var(--text)}
.card>table{display:block;overflow-x:auto;width:auto}
.card>table>tbody{display:table;width:100%}
/* Карточка, в которой только таблица, - таблица до краёв карточки. */
.card:has(>table:only-child),.card:has(>.table-wrap:only-child){padding:6px 10px}
/* Таблица с редактируемыми строками: сами <form> стоят за таблицей, а
   поля ссылаются на них атрибутом form - <form> внутри <tr> браузер
   выносит наружу, и строка разъезжается. Прокрутку в этом случае берёт
   на себя обёртка: таблица уже не прямой ребёнок карточки. */
.table-wrap{overflow-x:auto}
/* Широкий отчёт: поля ячеек уже, пояснения мелким переносятся. */
.table-wrap.dense th,.table-wrap.dense td{padding-left:5px;padding-right:5px}
.table-wrap.dense td small{white-space:normal}
.table-wrap.dense th{font-size:11px;letter-spacing:0}
table.editable td{vertical-align:middle}
/* Список моделей длинный, и без потолка <select> растягивает таблицу так,
   что кнопки строки уезжают за край карточки. Текст в select браузер
   обрезает сам, поэтому потолок безопаснее переноса. */
table.editable td select{max-width:200px}
table.editable td.grow{width:auto}
table.editable td.grow input{width:100%;min-width:80px}
.scroll-hint{display:none;color:var(--muted);font-size:13px;margin:6px 0 0}
/* Ноутбук 13" и планшет: кнопки строки важнее справочных колонок, их и
   убираем первыми - спрятанная за краем кнопка выглядит как сломанная
   вёрстка. На телефоне строка не помещается никак, поэтому там прямо
   говорим, что таблицу надо прокрутить вбок. */
@media (max-width:1100px){
  table.editable th.opt,table.editable td.opt{display:none}
  table.editable td select{max-width:150px}
}
@media (max-width:960px){
  table.editable td{padding:6px 5px}
  table.editable td select{max-width:125px}
  table.editable td.actions button{padding:4px 8px;font-size:12px}
}
@media (max-width:700px){.scroll-hint{display:block}}
td.nowrap,th.nowrap,span.nowrap{white-space:nowrap}
/* Адрес точки под именем в «По точкам»: в узкой колонке он ломался на
   три строки и удваивал высоту строки. На телефоне - карточка, там
   перенос уместен. */
@media (min-width:641px){td small.addr{white-space:nowrap}}
td.actions{white-space:nowrap;text-align:right}
td.actions button{padding:5px 10px;font-size:13px}
input.mini{text-align:right;font-variant-numeric:tabular-nums}
/* Действия над документом: кнопка скачивания и форма загрузки в
   одну колонку слева. Справа они разъезжались - ссылка у края,
   а форма под ней во всю ширину. */
td.stack{text-align:left;white-space:normal}
td.stack .inline-form{margin:6px 0}
td.stack .btn,td.stack button{margin:2px 4px 2px 0}
/* ── Список на телефоне: строка - карточка, у ячейки подпись колонки ──
   Десять колонок на 390 пикселях - это прокрутка вбок, в которой номер
   велосипеда уезжает от его статуса. Шаблон ставит таблице класс cards,
   ячейке - data-label; разметка одна, компьютер не меняется. Подпись
   (::before) плавает в левом поле ячейки, а ячейка держит плавающее
   (flow-root): длинная подпись раздвигает строку, а ссылки, метки и
   формы значения остаются одним потоком. grid/flex разобрали бы их на
   куски, а display:table у ячейки съедает пробелы между ссылкой и
   меткой - Chrome не рисует пробельный текст внутри таблицы. Шапка
   остаётся строкой сортировки по колонкам со ссылкой - иначе на телефоне
   сортировать нечем. .opt и пустые ячейки не показываются: на узком
   экране их убирали и раньше, а подпись без значения - просто шум. */
@media (max-width:640px){
  main{padding:16px 14px 40px}
  .card{padding:16px}
  h1{font-size:22px}
  dl{grid-template-columns:minmax(0,40%) minmax(0,1fr);gap:0 12px}
  dt{overflow-wrap:anywhere}
  /* кнопка в значении («🔔 напомнить о просрочке») переносится, а не
     раздвигает страницу вбок */
  dd button,dd .btn{white-space:normal;text-align:left;max-width:100%}
  /* плитки - по две в ряд, как KPI образца на телефоне */
  .tiles,.tiles.wide{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:12px;--tile-gap:12px}
  .tile{padding:12px 12px 10px}
  .tile b{font-size:clamp(17px,5.6vw,21px);line-height:26px}
  table.cards,table.cards tbody,table.cards tr,table.cards td{display:block;width:100%}
  table.cards tr{border:1px solid var(--line);border-radius:var(--r2);padding:8px 12px;margin:0 0 8px;background:var(--card)}
  table.cards td{border:0;padding:2px 0;line-height:1.4;text-align:left;white-space:normal;
    overflow-wrap:anywhere}
  table.cards td[data-label]{display:flow-root;padding-left:116px}
  table.cards td[data-label]::before{content:attr(data-label);float:left;width:106px;
    margin-left:-116px;padding-top:3px;color:var(--muted);font:500 10.5px/1.3 var(--font-mono);
    text-transform:uppercase;letter-spacing:.05em}
  table.cards td:first-child{font-weight:700}
  table.cards td.num{text-align:left}
  /* Поле в ячейке - в её ширину: поле ширины по умолчанию вылезало за
     край карточки (цена недели в мастере первого запуска). */
  table.cards td input,table.cards td select{max-width:100%}
  /* после правила с display:flow-root: вес у них равный */
  table.cards td:empty,table.cards td.opt{display:none}
  table.cards tr:has(>th){display:flex;flex-wrap:wrap;align-items:center;gap:6px;
    border:0;border-radius:0;padding:0 0 10px;margin:0}
  table.cards tr:has(>th)::before{content:"Сортировка:";color:var(--muted);font-size:13px}
  table.cards tr:has(>th):not(:has(a)){display:none}
  table.cards th{display:none}
  table.cards th:not(.opt):has(a){display:block;border:0;padding:4px 11px;border-radius:999px;
    background:var(--card2);font:600 12px/1.4 var(--font-text);letter-spacing:0;text-transform:none}
  table.cards th.sorted:has(a){background:var(--invert);color:var(--on-invert)}
  table.cards tr.total{border-width:2px}
  /* черта итоговой строки (tr.total td ниже по файлу) - рамкой карточки, а
     не под каждой её строкой */
  table.cards tr.total td{border-top:0}
  table.cards tr.list-foot{border:0;border-top:2px solid var(--line);border-radius:0;padding:8px 0 0}
  table.cards tr.list-foot td{border:0;padding:0;line-height:2}
  /* строка сортировки и подвал - на фоне страницы, не белой полосой */
  table.cards tr:has(>th),table.cards tr.list-foot{background:none}
  /* ячейка без подписи (имя показателя, «Пусто.») - от края карточки:
     поле .table-wrap сдвигало её на 10 px от подписанных */
  table.cards td:not([data-label]){padding-left:0}
  table.cards tr.warn-row{box-shadow:inset 3px 0 0 var(--warn)}
  table.cards tr.bad-row{box-shadow:inset 3px 0 0 var(--bad)}
  table.cards tr.warn-row>td:first-child,table.cards tr.bad-row>td:first-child{box-shadow:none}
  /* Список-карточки - сами строки на фоне страницы, без второй рамки
     вокруг. Карточку, где кроме списка есть формы, плитки или график, не
     раздеваем: её формы ложились на фон страницы («Работы и запчасти»
     наряда, «Главное» отчётов). Строки списка там - через черту. */
  .card:is(:has(>table.cards),:has(>.table-wrap>table.cards)):not(:has(>form,>details,>dl,>fieldset,>.grid2,>.tiles,>.bars)){background:none;border:0;padding:0;box-shadow:none}
  .card:has(>form,>details,>dl,>fieldset,>.grid2,>.tiles,>.bars) table.cards tr:not(:has(>th),.list-foot){border:0;border-top:1px solid var(--line);border-radius:0;margin:0;padding:10px 0;background:none}
  .card:has(>form,>details,>dl,>fieldset,>.grid2,>.tiles,>.bars) table.cards tr.total{border-top-width:2px}
  .card:has(>form,>details,>dl,>fieldset,>.grid2,>.tiles,>.bars) table.cards tr:is(.warn-row,.bad-row){padding-left:10px}
  /* «Показать» периода не прилипает к списку под ним */
  .card form.search{margin-bottom:12px}
  table.cards tr:hover>td{background:none}
  .table-wrap:has(>table.cards)~.scroll-hint{display:none}
  /* Вкладки без пробелов между ссылками строкой не переносятся и
     раздвигали страницу вбок («Настройки»); «В ремонте» рвалось надвое. */
  .tabs{display:flex;flex-wrap:wrap;gap:2px}
  /* Строка поиска - во всю ширину: в ширину по умолчанию подсказка
     «клиент, телефон, № велосипеда…» обрезалась на середине. */
  .search input[name=q]{flex:1 1 100%}
  /* Список точек с адресом («Павлюхина · ул. Павлюхина, 97») шире
     экрана 360 px: select растягивается по самой длинной строке и
     раздвигал страницу, а за ней - нижнюю панель («Меню» за краем). */
  .search,.search input,.search select{max-width:100%;min-width:0}
  /* Выгрузка на телефоне - Excel: CSV рядом с ним ломал шапку на две
     строки кнопок, а открыть CSV на телефоне всё равно нечем. */
  .bar a.btn[href*=".csv"]{display:none}
}
.ok{color:var(--ok)}.warn{color:var(--warn)}.bad{color:var(--bad)}.muted{color:var(--muted)}

/* ── метки статусов: как метки этапов образца - плашка с тинтом и цветным
   текстом. Цвет - смыслом: бирюзовый «хорошо», оранжевый «в работе / в
   аренде», жёлтый «ждёт», красный «плохо», голубой «справка», серый -
   закрыто. Одни правила на обе темы: тинты и цвета - токены. ── */
.tag{display:inline-flex;align-items:center;gap:6px;min-height:22px;padding:2px 8px;border-radius:6px;background:var(--card2);color:var(--muted);
  font:600 11.5px/1.3 var(--font-text);letter-spacing:0;vertical-align:middle;white-space:nowrap}
.badge{letter-spacing:0}
.tag.ok,.tag.available,.tag.active,.tag.order-done,.tag.take-found,.tag.ref-paid,.tag.risk-low,.tag.intent-renew,
.tag.bot-signed,.tag.bot-renting{background:var(--okbg);color:var(--ok)}
.tag.new{background:var(--accentbg);color:var(--accent-ink)}
.tag.rented,.tag.order-in_work,.tag.ref-rented{background:var(--card2);color:var(--text)}
.tag.warn,.tag.repair,.tag.reserved,.tag.order-new,.tag.take-extra,.tag.risk-medium,.tag.bot-pending,.tag.bot-registering,
.tag.bot-approved,.tag.bot-none{background:var(--warnbg);color:var(--warn)}
.tag.bad,.tag.lost,.tag.risk-high,.tag.take-missing{background:var(--badbg);color:var(--bad)}
.tag.maintenance,.tag.order-waiting,.tag.intent-return,.tag.ref-signed{background:var(--infobg);color:var(--info)}
.tag.sold,.tag.closed,.tag.written_off,.tag.order-cancelled,.tag.muted,.tag.ghost,.tag.take-expected,.tag.ref-click,
.tag.risk-none{background:var(--card2);color:var(--muted)}

label{display:block;margin:0 0 12px;font-size:12.5px;font-weight:600;color:var(--muted)}
/* Скрытое остаётся скрытым: правило ниже задаёт полям display, а
   авторский стиль сильнее браузерного [hidden]{display:none}. Без
   этой строки скрытые поля форм вылезали бы полем во всю ширину. */
[hidden]{display:none !important}
/* Поле - как поле образца: подложка чуть светлее карточки и тонкая
   внутренняя рамка, фокус - оранжевой рамкой. */
input,select,textarea{display:block;width:100%;margin-top:6px;min-height:40px;padding:8px 12px;border:0;border-radius:var(--r3);
  background:var(--card2);box-shadow:inset 0 0 0 1px var(--line);color:var(--text);font:500 14px/1.4 var(--font-text)}
/* Выпадающий список не шире своего места: подпись варианта бывает
   длиннее поля (точка с адресом), а select растёт по самой длинной. */
select{max-width:100%}
textarea{min-height:72px}
input::placeholder,textarea::placeholder{color:var(--muted)}
input:focus,select:focus,textarea:focus{outline:0;box-shadow:inset 0 0 0 1.5px var(--accent)}
select{-webkit-appearance:none;appearance:none;padding-right:32px;cursor:pointer;
  background-image:linear-gradient(45deg,transparent 50%,var(--muted) 50%),linear-gradient(135deg,var(--muted) 50%,transparent 50%);
  background-position:calc(100% - 17px) 50%,calc(100% - 12px) 50%;background-size:5px 5px;background-repeat:no-repeat}
select[multiple]{background-image:none;padding-right:12px}
input[type=checkbox],input[type=radio]{display:inline-block;width:auto;min-height:0;margin:0;padding:0;box-shadow:none;background:none;accent-color:var(--accent)}
input[type=checkbox]{-webkit-appearance:none;appearance:none;width:18px;height:18px;flex:0 0 18px;border-radius:5px;
  box-shadow:inset 0 0 0 1.5px var(--line-strong);background:transparent;vertical-align:middle;cursor:pointer}
input[type=checkbox]:checked{box-shadow:none;background:var(--accent) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center/12px no-repeat}
input[type=checkbox]:disabled{opacity:.5;cursor:not-allowed}
input[type=checkbox]:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
/* Галочка меню телефона: невидима, но в порядке Tab - иначе с клавиатуры
   меню не открыть (бургер и «Меню» внизу - её подписи). На компьютере
   меню всегда открыто, и галочка из обхода убрана. */
input.nav-toggle{position:fixed;top:0;left:0;width:1px;height:1px;min-height:0;margin:0;padding:0;opacity:0;pointer-events:none}
input.nav-toggle:focus-visible ~ .side .burger{outline:2px solid var(--accent);outline-offset:2px}
@media (min-width:1001px){input.nav-toggle{display:none}}
/* «К содержимому» - первая остановка Tab, видна только в фокусе */
.skip-link{position:fixed;top:8px;left:8px;z-index:200;padding:10px 16px;border-radius:var(--r3);background:var(--accent);color:#fff;
  font-weight:700;transform:translateY(-150%);transition:transform .25s}
.skip-link:focus{transform:none;text-decoration:none}
#content:focus{outline:0}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;
  transition-duration:.001ms!important;scroll-behavior:auto!important}}
input[type=file]{padding:6px 10px;color:var(--muted)}
input[type=file]::file-selector-button{margin:0 10px 0 0;height:28px;padding:0 12px;border:0;border-radius:8px;background:var(--card);
  color:var(--text);box-shadow:inset 0 0 0 1px var(--line-strong);font:700 12.5px var(--font-text);cursor:pointer}
input[type=file]::file-selector-button:hover{background:var(--hover)}
input[type=color]{padding:3px;min-height:40px}
td input,td select{margin:0;min-height:32px;padding:4px 8px;width:auto;display:inline-block}
/* справа у списка - место под стрелку: правило выше его съедало, и
   стрелка ложилась на текст варианта */
td select{padding-right:28px}
/* Форма правки внутри строки (точки, каталог) - обычная форма, а не
   ячейка таблицы: поля в полный рост, а не по 32 px. */
td .grid2 input:not([type=checkbox]):not([type=radio]),td .grid2 select,td .grid2 textarea{display:block;width:100%;margin-top:6px;
  min-height:40px;padding:8px 12px}
td .grid2 select{padding-right:32px}
tr:has(>td button,>td .btn,>td form)>td{vertical-align:middle}
td button,td .btn{min-height:32px;padding:5px 12px;font-size:12.5px}
/* Кнопки: одна главная (залитая) и спокойные второстепенные - белые с
   серой рамкой. Раньше второстепенные были оранжевой обводкой, и на
   экране с «Excel», «CSV», «Найти» и «+ Наряд» главного не было видно. */
button,.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:38px;padding:8px 16px;border-radius:var(--r3);
  border:0;background:var(--accent);color:var(--on-accent);font:700 13.5px/1.2 var(--font-text);cursor:pointer;white-space:nowrap;
  transition:filter .2s,background .2s,transform .1s}
button:hover,.btn:hover{filter:brightness(1.08);text-decoration:none}
button:active,.btn:active{transform:scale(.98)}
button.ghost,.btn.ghost{background:transparent;color:var(--text);box-shadow:inset 0 0 0 1px var(--line-strong)}
button.ghost:hover,.btn.ghost:hover{background:var(--card2);filter:none;color:var(--text)}
button.small,.btn.small{min-height:32px;padding:5px 12px;font-size:12.5px;border-radius:8px}
button.icon{min-height:0;background:transparent;box-shadow:none;color:var(--muted);padding:4px 8px;font-size:22px;line-height:1}
button.icon:hover{background:var(--card2);color:var(--text);filter:none}
button:disabled,button:disabled:hover{opacity:.45;cursor:not-allowed;filter:none;transform:none}
button.danger{background:var(--badbg);color:var(--bad);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--bad) 35%,transparent)}
button.danger:hover{background:var(--bad);color:#fff;filter:none}
button.ghost.danger{background:transparent;color:var(--bad);box-shadow:inset 0 0 0 1px var(--line-strong)}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:0 14px;align-items:end}
.grid2 button{grid-column:1/-1;justify-self:start;margin-bottom:10px}
.grid2 .wide{grid-column:1/-1}
@media (max-width:600px){.grid2{grid-template-columns:1fr}}
.inline-form{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.inline-form input,.inline-form select{margin:0;width:auto}
/* длинный вариант в списке (весь парк, ФИО клиента) не раздвигает форму
   шире экрана - браузер обрежет текст варианта сам */
.inline-form select{max-width:100%;min-width:0}
.search{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.search input,.search select{margin:0;width:auto}
.search input[type=checkbox]{width:18px;height:18px;flex:0 0 18px}
.search label{display:inline-flex;align-items:center;gap:8px;margin:0;min-height:40px;color:var(--text)}
main>form.search{margin-bottom:16px}
input{text-overflow:ellipsis}
/* Строка поиска с лупой, «Найти» - второстепенной: главная кнопка
   страницы - «+ Велосипед», «+ Наряд», а не поиск. */
.search input[name=q]{min-width:260px;width:clamp(260px,26vw,340px);padding-left:36px;background:var(--card2) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238A96A3' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cpath d='m21 21-4.3-4.3'/%3E%3C/svg%3E") no-repeat 12px center/16px}
.search button[type=submit]{background:transparent;color:var(--text);box-shadow:inset 0 0 0 1px var(--line-strong)}
.search button[type=submit]:hover{background:var(--card2);filter:none}
/* Шапка с поиском: заголовок - своей строкой, под ним панель поиска и
   действий, как в примере владельца; без поиска кнопки остаются справа. */
.bar:has(>form.search)>h1{flex:1 1 auto}
.bar>form.search{order:5;flex:1 1 100%}
/* Вкладки над плитками и таблицей, а не в шапке: без зазора «План замены»
   ложился на верх плитки. */
main>nav.tabs{margin-bottom:16px}
.card>nav.tabs{margin-bottom:12px}
.bar>nav.tabs:is(.incoming-tabs,:not(.seg):has(>a:nth-child(5))){order:3;flex:1 1 100%}
nav.tabs:is(.incoming-tabs,:not(.seg):has(>a:nth-child(5))){display:flex;flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;padding:0;border-radius:0;
  background:none;box-shadow:none;border-bottom:1px solid var(--line)}
nav.tabs:is(.incoming-tabs,:not(.seg):has(>a:nth-child(5)))>a{position:relative;flex:0 0 auto;min-height:42px;padding:0 14px;border-radius:0;font-size:14px;white-space:nowrap}
nav.tabs:is(.incoming-tabs,:not(.seg):has(>a:nth-child(5)))>a.on{background:none;box-shadow:none}
nav.tabs:is(.incoming-tabs,:not(.seg):has(>a:nth-child(5)))>a.on::after{content:"";position:absolute;left:10px;right:10px;bottom:-1px;height:2px;border-radius:2px;background:var(--accent)}
/* Вкладки - переключатель образца: рамка вокруг, выбранная - своей плашкой. */
.tabs{display:inline-flex;flex-wrap:wrap;gap:2px;padding:3px;border-radius:var(--r3);background:var(--card);box-shadow:inset 0 0 0 1px var(--line);max-width:100%}
.tabs a{display:inline-flex;align-items:center;min-height:30px;padding:4px 12px;border-radius:8px;color:var(--muted);font-weight:600;font-size:13px;background:transparent}
.tabs a:hover{text-decoration:none;color:var(--text)}
.tabs a.on{background:var(--card2);color:var(--text);box-shadow:inset 0 0 0 1px var(--line-strong)}
/* Лента вкладок или шагов шире экрана: край, за которым есть ещё пункты,
   тает - иначе видно три вкладки из двенадцати, и кажется, что их три.
   Классы ставит скрипт base.html, он же докручивает к открытой вкладке.
   Маска берёт у цвета только прозрачность: #000 здесь - «видно», а не
   цвет, и темы он не касается. */
:is(nav.tabs,.steps):is(.more,.more-back){
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 var(--fade-l,0px),#000 calc(100% - var(--fade-r,0px)),transparent);
  mask-image:linear-gradient(90deg,transparent,#000 var(--fade-l,0px),#000 calc(100% - var(--fade-r,0px)),transparent)}
:is(nav.tabs,.steps).more{--fade-r:32px}
:is(nav.tabs,.steps).more-back{--fade-l:32px}
/* Плашки - как плашки образца: тинт и тонкая рамка того же цвета. */
.flash{padding:14px 18px;border-radius:14px;margin-bottom:18px;background:var(--okbg);color:var(--text);
  box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--ok) 40%,transparent)}
.flash.err{background:var(--badbg);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--bad) 45%,transparent)}
.flash.warn{background:var(--warnbg);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--warn) 45%,transparent)}
/* Пары «подпись - значение» - строками с линией, как карточка клиента образца. */
dl{display:grid;grid-template-columns:max-content 1fr;gap:0 20px;margin:0}
dt,dd{padding:8px 0;border-bottom:1px solid var(--line)}
dt{color:var(--muted)}dd{margin:0;min-width:0}
dl>dt:last-of-type,dl>dd:last-of-type{border-bottom:0}
ul.inline{list-style:none;padding:0;margin:0 0 12px;display:flex;flex-wrap:wrap;gap:6px 18px}
small{font-size:12px}

/* ── вход: обложка брендбука — тёмный фон, «молния», логотип ── */
body:has(.login){background:#12161C}
.login{min-height:calc(100vh - 40px);display:grid;grid-template-columns:1fr minmax(320px,440px);align-items:center;gap:24px;position:relative;overflow:hidden}
.login-art{position:absolute;inset:0;pointer-events:none}
.login-art svg{position:absolute;left:8%;top:-10%;height:120%;color:var(--brand)}
.login-art svg path{fill:var(--brand)}
.login-box{position:relative;z-index:1;grid-column:2;background:var(--card);border:1px solid var(--line);border-radius:20px;padding:30px 30px 24px;color:var(--text);box-shadow:var(--pop)}
.login-logo .logo{height:34px;width:auto;color:var(--text)}
.login-box h1{margin:22px 0 18px;font:700 30px/1.05 var(--font-head);text-transform:uppercase}
.login-box button{width:100%;padding:11px}
body:has(.login) .demo-banner{color:#E6ECEE;background:rgba(5,172,255,.12)}
@media (max-width:760px){.login{grid-template-columns:1fr;align-items:start;min-height:0;overflow:visible;padding:4px 0 20px}.login-box{grid-column:1}.login-art{display:none}}
pre.report{white-space:pre-wrap;word-break:break-word;font:500 12.5px/1.6 var(--font-mono);background:var(--bg);border:1px solid var(--line);border-radius:var(--r2);padding:14px 16px;max-height:70vh;overflow:auto}
label.check{display:flex;gap:8px;align-items:center;margin:10px 0}label.check input{width:auto;margin:0}
.checks{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:2px 16px}
.checks label.check{margin:4px 0}
/* фото при сдаче: миниатюры рядами, клик - снимок целиком */
.photos{display:flex;flex-wrap:wrap;gap:8px}
.photos img{display:block;width:120px;height:90px;object-fit:cover;border-radius:var(--r3);border:1px solid var(--line);background:var(--bg)}
.stars{color:var(--accent);letter-spacing:.06em}
.card.three{margin-bottom:20px}.card.three .tiles{margin-bottom:8px}
.three-head{display:flex;flex-wrap:wrap;gap:6px 14px;align-items:baseline;margin-bottom:14px}.three-head h2{margin:0}

/* ── быстрая выдача: шаги и плитки выбора ── */
.steps{display:inline-flex;flex-wrap:nowrap;gap:2px;padding:3px;margin-bottom:18px;border-radius:var(--r3);background:var(--card);
  box-shadow:inset 0 0 0 1px var(--line);max-width:100%;overflow-x:auto;scrollbar-width:none}
.steps>span,.steps>a{display:inline-flex;align-items:center;min-height:30px;padding:4px 12px;border-radius:8px;font-size:13px;font-weight:600;
  background:transparent;color:var(--muted);white-space:nowrap}
.steps>.done{color:var(--ok)}
.steps>.now{background:var(--card2);color:var(--text);box-shadow:inset 0 0 0 1px var(--line-strong)}
.steps>.todo{font-weight:500}
/* шаги мастера первого запуска - ссылки: любой шаг открывается сразу */
.steps>a:hover{text-decoration:none;filter:brightness(.95)}
/* В тёмной теме светлый фон «готово» гасил зелёный текст, а тёмный «сейчас»
   сливался со страницей - по шагам мастера ходят именно по ним. */

.choices{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:10px;margin:8px 0 14px}
.choice{display:block;position:relative;border:1px solid var(--line);border-radius:var(--r2);padding:14px 16px;background:var(--card2);color:var(--text);cursor:pointer;margin:0;font-size:14px;transition:border-color .2s,background .2s}
.choice input{position:absolute;opacity:0;width:0;height:0;margin:0}
.choice b{display:block;font:700 15px/1.25 var(--font-text);letter-spacing:-.01em}
.choice small{display:block;color:var(--muted);font-size:12px;margin-top:3px}
.choice .price{display:block;margin-top:6px;font:600 13px var(--font-mono)}
.choice:hover{border-color:var(--line-strong)}
.choice:has(input:checked),.choice.on{border-color:var(--accent);box-shadow:inset 0 0 0 1px var(--accent);background:var(--accentbg)}
.choice.dim{opacity:.55}
.choice:has(input:focus-visible){outline:2px solid var(--accent);outline-offset:2px}
.issue-bar{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin-top:6px}
.issue-bar .spacer{flex:1 1 auto}
.who{display:flex;flex-wrap:wrap;gap:8px 18px;align-items:baseline;margin-bottom:10px}
.who b{font:700 17px/1.2 var(--font-text)}

/* ── оценка риска клиента: выдача и карточка ── */

/* тёмная тема: белый на светлом --bad читается хуже среднего (2,6:1) - фон темнее, 5,8:1 */
.risk-why{margin:6px 0 0;padding-left:18px;font-size:13px}
.risk-why li.bad{color:var(--bad)}.risk-why li.good{color:var(--ok)}
.risk-why li.note{color:var(--muted);padding:0;margin:0;background:none;box-shadow:none;border-radius:0;font-size:inherit}

/* ── намерение клиента: сводка и карточка аренды ── */
.intent form{display:inline-flex;flex-wrap:wrap;gap:4px;margin:4px 0 0}
.intent button{padding:3px 8px;font-size:12px;border-radius:7px}

/* ── профили доступа: матрица «раздел × уровень» ── */
.perms{max-width:620px}
.perms th:not(:first-child),.perms td:not(:first-child){width:1%;text-align:center;white-space:nowrap}
.perms td:first-child{width:auto}
.perms label.cell{display:block;margin:0;cursor:pointer;padding:2px 10px}
.perms label.cell input{width:auto;margin:0}
.perms tr:hover td{background:var(--hover)}
/* На телефоне уровни - коротким словом (profile.html), колонки
   помещаются в экран без прокрутки, а кружок - с целью под палец.
   Пояснение под матрицей называет уровень тем же словом, что колонка. */
:is(.perms,.perms-note) .short{display:none}
@media (max-width:640px){
  :is(.perms,.perms-note) .long{display:none}
  :is(.perms,.perms-note) .short{display:inline}
  .perms th:not(:first-child),.perms td:not(:first-child){padding-left:2px;padding-right:2px;white-space:normal}
  .perms td:not(:first-child){padding-top:0;padding-bottom:0;vertical-align:middle}
  .perms label.cell{min-height:44px;min-width:40px;display:flex;align-items:center;justify-content:center;padding:0 4px}
}

/* Форма только для просмотра: fieldset[disabled] гасит поля, но рамку
   и отступы браузера в вёрстке карточки видеть не нужно. */
fieldset.plain{border:0;margin:0;padding:0;min-width:0}
fieldset[disabled] button{opacity:.45;cursor:not-allowed}
fieldset[disabled] input,fieldset[disabled] select,fieldset[disabled] textarea{opacity:.7}

/* ── строки, которые ждут: жёлтая - скоро, красная - в розыске ── */
tr.warn-row>td:first-child{box-shadow:inset 3px 0 0 var(--warn)}
/* Строка в розыске краснее жёлтой: её ищут, а не листают. */
tr.bad-row>td:first-child{box-shadow:inset 3px 0 0 var(--bad)}

/* Пересчёт считают с телефоном в руках: на узком экране от строки нужны
   номер, отметка и кнопка, остальное уводим. */
@media (max-width:700px){
  th.opt,td.opt{display:none}
}
/* Поле номера и «Отметить» - одной строкой (Enter со сканера жмёт её же),
   служебные кнопки - рядом, а не столбиком на пол-экрана. */
.take-scan{display:flex;flex-wrap:wrap;gap:0 10px;align-items:flex-end}
.take-scan label{flex:1 1 240px}
.take-scan button{margin-bottom:12px}
.take-tools{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
.take-show a{gap:6px}
.take-tools form{margin:0}
.take-list>summary{cursor:pointer;color:var(--muted);font-weight:600;padding:2px 0 8px}
.take-list[open]>summary{color:var(--text)}
.take-list textarea{min-height:110px}
#take-note textarea{margin:0 0 10px}
.take-note{white-space:pre-line;margin:0}
/* Комментарий строки: поле и «Сохранить» одной строкой, и в карточке
   телефона тоже - стопкой они удваивали высоту каждой строки ведомости. */
.take-row-note{flex-wrap:nowrap}
.take-row-note input[type=text]{flex:1 1 160px;min-width:0;min-height:34px;padding:6px 10px}
.take-row-note button{flex:0 0 auto}
tr.total td{border-top:2px solid var(--line);font-weight:600}

/* Карта парка: единственный экран со скриптом, высота задаётся здесь -
   у Leaflet без явной высоты контейнер схлопывается в ноль. */
.map{height:min(60vh,520px);border-radius:var(--r2);overflow:hidden;margin:4px 0 10px;border:1px solid var(--line)}
.dot{display:inline-block;width:10px;height:10px;border-radius:50%;margin:0 2px}
.dot.rented{background:#FF5907}.dot.parked{background:#16B8A8}
.dot.offline{background:#7C8794}.dot.alarm{background:#FF4D5E}
/* Точка выдачи: подпись в тёмной плашке над местом, а не кружок - кружки
   на карте означают велосипеды. Легенда рисует ту же плашку квадратом. */
.map-place-icon{background:none;border:0}
.map-place{display:inline-block;white-space:nowrap;transform:translate(-50%,-100%);
  margin-top:-4px;padding:3px 8px;border-radius:6px;background:var(--ink);color:#fff;
  font:600 12px/1.2 var(--font-text);box-shadow:0 1px 4px rgba(0,0,0,.35)}
.map-place-dot{display:inline-block;width:10px;height:10px;border-radius:2px;
  background:var(--ink);box-shadow:inset 0 0 0 1.5px var(--muted);margin:0 2px;vertical-align:-1px}

/* Предпросмотр рассылки: показываем ровно то, что уйдёт клиенту,
   поэтому переносы строк сохраняются как есть. */
pre.preview{white-space:pre-wrap;font:inherit;background:var(--card2);
  border-radius:var(--r3);padding:12px 14px;margin:8px 0}

/* Страница подписания: её открывает клиент с телефона, и кроме
   документов с кодом на ней ничего быть не должно. */
.sign-body{background:var(--bg)}
.sign-main{max-width:560px;margin:0 auto;padding:24px 16px 48px}
.sign-logo{display:block;margin:8px 0 18px;color:var(--text)}
.sign-logo .logo{height:26px}
.docs{list-style:none;padding:0;margin:8px 0}
.docs li{padding:10px 0;border-bottom:1px solid var(--line)}
.docs li:last-child{border-bottom:0}
.code-input{font:600 28px var(--font-mono);letter-spacing:8px;text-align:center}
.wide-btn{width:100%;margin-top:10px}
pre.agreement{white-space:pre-wrap;font:inherit;font-size:14px;line-height:1.5}
code.hash{font-size:12px;word-break:break-all}
p.small{font-size:13px}
/* Чужая строка без пробелов (имя из ответа франчайзи, длинный адрес) -
   перенос в любом месте, а не прокрутка всей страницы на телефоне. */
.wrap{overflow-wrap:anywhere}

/* Столбики графика: чистый CSS, без библиотеки. Триста килобайт ради
   двадцати столбиков - это дорого для страницы, которую открывают
   с телефона на точке. */
.bars{position:relative;display:flex;align-items:flex-end;gap:4px;
      height:180px;padding:18px 0 0;margin:8px 0 12px;overflow-x:auto}
.bar-col{flex:1 0 18px;display:flex;flex-direction:column;justify-content:flex-end;
         align-items:center;height:100%;min-width:18px}
.bar-val{--c:var(--ok);width:100%;min-height:2px;border-radius:4px 4px 0 0;border-top:2px solid var(--c);
         background:linear-gradient(180deg,color-mix(in srgb,var(--c) 42%,transparent),color-mix(in srgb,var(--c) 8%,transparent));
         transition:height .2s}
.bar-val.over{--c:var(--bad)}
.bar-num{font:500 10.5px/1.2 var(--font-mono);margin-top:3px}
.bar-day{font:500 10px/12px var(--font-mono);height:12px;color:var(--muted)}
.bar-norm{position:absolute;left:0;right:0;border-top:1px dashed var(--muted);
          pointer-events:none}
.bar-norm span{position:absolute;right:0;top:-14px;font:500 10px var(--font-mono);color:var(--muted);
               background:var(--card);padding:0 4px}
/* Область столбика - колонка без подписи дня: высота столбика и точка
   долга считаются от неё. От всей колонки точка нуля ложилась на число
   дня под столбиком. */
.bar-area{position:relative;flex:1 1 0;min-height:0;width:100%;display:flex;align-items:flex-end}
/* Линия плана у графика с областью столбика - доля той же области:
   над подписью дня (12 px) и под отступом сверху (18 px). От всей
   высоты графика столбик ровно на плане рисовался на 7 px ниже линии,
   и выполненные дни выглядели невыполненными. График без области
   (сервис) живёт по старой формуле - процентом от всей высоты. */
.bars:has(>.bar-col>.bar-area)>.bar-norm{bottom:calc(12px + (100% - 30px) * var(--p, 0) / 100)}
/* Телефон: месяц - в ширину экрана, без прокрутки вбок. Колонки делят
   ширину поровну (по 18 px тридцать дней - 660 px против 328), а у
   длинных графиков подписан каждый пятый день, у двухмесячных -
   каждый десятый: подписи шире колонки налезали бы друг на друга. */
@media (max-width:700px){
  .bars{height:140px;gap:2px;overflow:visible}
  .bars:has(>.bar-col:nth-child(32)){gap:1px}
  .bar-col{flex:1 1 0;min-width:0}
  .bars:has(>.bar-col:nth-child(16)) .bar-col:not(:nth-child(5n+1)) .bar-day,
  .bars:has(>.bar-col:nth-child(41)) .bar-col:not(:nth-child(10n+1)) .bar-day{visibility:hidden}
  .bar-num{display:none}
}

/* Деньги по дням: столбик «пришло» и точка накопленного долга.
   Будущие дни месяца остаются пустыми - месяц ещё идёт, и обрезать
   его значит делать вид, что он кончился. */
.bar-val.over-ok{--c:var(--ok)}
.bar-val.future{--c:var(--line-strong);background:var(--line)}
.bar-dot{position:absolute;left:50%;width:6px;height:6px;margin-left:-3px;
         border-radius:50%;background:var(--bad)}

/* Сортируемый заголовок, подвал списка и свои фильтры. */
th.sorted{color:var(--text)}
th a{color:inherit;text-decoration:none}
th a:hover{text-decoration:underline}
.caret{margin-left:4px;font-size:10px}
tr.list-foot td{border-top:2px solid var(--line);font-size:13px}
tr.list-foot .spacer{display:inline-block;width:18px}
tr.list-foot a{margin:0 2px}
tr.list-foot a.on{font-weight:700;color:var(--text)}
@media (hover:none),(max-width:640px){
  tr.list-foot a{display:inline-flex;align-items:center;justify-content:center;min-width:40px;min-height:40px;padding:0 8px;
    border-radius:8px;box-shadow:inset 0 0 0 1px var(--line-strong);color:var(--text)}
  tr.list-foot a.on{background:var(--card2)}
}
.saved-views{display:flex;flex-wrap:wrap;align-items:center;gap:6px;
             margin:8px 0;font-size:13px}
.saved-views .inline-form{display:inline-flex;gap:4px;margin:0}
/* пара «фильтр + крестик» переносится только целиком */
.saved-views .view{display:inline-flex;align-items:center;gap:6px;max-width:100%}
.saved-views .btn,.saved-views button{min-height:30px;padding:4px 12px;font-size:12.5px;font-weight:600;border-radius:999px}
.saved-views .inline-form:has(>button.danger){margin-left:-36px;margin-right:4px}
.saved-views a.btn.ghost:has(+.inline-form>button.danger){padding-right:34px}
.saved-views button.danger{min-height:28px;width:28px;padding:0;border-radius:99px;box-shadow:none;background:transparent;color:var(--muted);font-size:15px}
.saved-views button.danger:hover{color:var(--bad);background:var(--badbg)}
.saved-views input.mini{text-align:left;min-height:30px;padding:4px 12px;border-radius:99px;font-size:13px}
/* Входящие: лента переписки */
/* Лента идёт в DOM от новых к старым, а column-reverse рисует её сверху
   вниз и открывает прокрутку снизу: последнее сообщение видно сразу,
   без скрипта. */
.thread{display:flex;flex-direction:column-reverse;gap:8px;margin-bottom:12px;max-height:60vh;overflow:auto;
  padding:18px;border:1px solid var(--line);border-radius:var(--r);background:var(--bg2)}
.thread .msg{border:1px solid var(--line);border-radius:14px 14px 14px 4px;padding:10px 14px;max-width:85%;word-break:break-word;
  background:var(--card);font-size:13.5px;line-height:1.5}
.thread .msg .body{white-space:pre-wrap}
.thread .msg.out{align-self:flex-end;border-color:transparent;border-radius:14px 14px 4px 14px;background:var(--accent);color:var(--on-accent)}
.thread .msg.out small.muted,.thread .msg.out .muted{color:var(--on-accent);opacity:.85}
.thread .msg.out a{color:var(--on-accent);text-decoration:underline}
.thread .msg.event{align-self:center;border-style:dashed;background:transparent}

/* Демо-стенд: плашка на каждой странице и входы под ролями. Голубая, а
   не оранжевая: это пояснение, а не ошибка, и с flash её путать нельзя. */
.demo-banner{padding:12px 18px;border-radius:14px;margin-bottom:20px;font-size:13.5px;
  background:var(--infobg);color:var(--text);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--blue) 35%,transparent)}
.demo-logins{margin-top:16px;border-top:1px solid var(--line);padding-top:12px}
.demo-logins p{margin:0 0 8px}
.demo-logins form{margin:0 0 6px}
.login-box .demo-logins button{display:flex;flex-wrap:wrap;gap:4px 8px;align-items:baseline;
  justify-content:space-between;text-align:left;padding:8px 12px;font-weight:500}
.demo-logins code{font-size:12.5px}

/* ── обучение новичка: карточка шага на каждой странице и список шагов ── */
.card.learn{box-shadow:inset 3px 0 0 var(--accent)}
.learn-head{display:flex;flex-wrap:wrap;gap:4px 8px;align-items:baseline;margin-bottom:8px}
.learn-head a{margin-left:auto;font-size:13px}
.learn p{margin:0 0 8px}
.learn-now{font-size:15px}
.learn-fresh{margin:0 0 8px;padding:6px 10px;border-radius:9px;background:var(--okbg);color:var(--ok);font-weight:600}
.learn-steps{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.learn-steps li{border:1px solid var(--line);border-radius:var(--r2);padding:12px 14px}
.learn-steps li.now{border-color:var(--accent);box-shadow:inset 3px 0 0 var(--accent)}
.learn-steps li.done{opacity:.8}
.learn-steps p{margin:6px 0}
.learn-step-head{display:flex;flex-wrap:wrap;gap:6px 10px;align-items:center}
.learn-mark{display:inline-flex;align-items:center;justify-content:center;width:26px;height:26px;border-radius:999px;background:var(--card2);font:700 12px var(--font-mono)}
.learn-steps li.done .learn-mark{background:var(--okbg);color:var(--ok)}
.learn-tracks{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:12px;margin:12px 0}
.learn-list{margin:4px 0 8px;padding-left:20px;font-size:13px}
.learn-tracks form{margin:0}

/* ── мои задачи: группа - карточка, строка - ссылка в карточку записи ── */
.my-group.hot{box-shadow:inset 3px 0 0 var(--bad),var(--shadow)}
.my-group.warn{box-shadow:inset 3px 0 0 var(--warn),var(--shadow)}
.my-group.info{box-shadow:inset 3px 0 0 var(--ok),var(--shadow)}
.my-items{list-style:none;margin:0;padding:0;display:grid;gap:2px}
.my-items li{display:flex;flex-wrap:wrap;gap:4px 12px;align-items:baseline;justify-content:space-between;padding:9px 12px;border-radius:var(--r3)}
.my-items li:hover{background:var(--hover)}
.my-items li>a:first-child{display:flex;flex-direction:column;gap:2px;color:var(--text);min-width:0}
.my-items li>a:first-child:hover{text-decoration:none}
.my-items li small{font-size:12px}
.my-items li.hot b{color:var(--bad)}
.my-items .tel{white-space:nowrap;font:500 12.5px var(--font-mono)}
.term-date{font-size:12px}.term-date summary{cursor:pointer;color:var(--muted)}
.term-date input{margin-top:4px}

/* ── отчёты одним окном: разделитель «за период» и «сейчас и по месяцам» ── */
.block-sep{margin:24px 0 12px}
/* Отчёты: «Главное» и свёрнутые блоки */
details.fold{padding:0;margin-bottom:10px}
details.fold>summary{cursor:pointer;padding:16px 22px;font-weight:700;list-style:none}
details.fold>summary::-webkit-details-marker{display:none}
details.fold>summary::before{content:"▸";display:inline-block;width:1.1em;color:var(--muted)}
details.fold[open]>summary::before{content:"▾"}
details.fold>summary small{font-weight:400}
details.fold>:not(summary){margin-left:22px;margin-right:22px}
details.fold>:last-child{margin-bottom:18px}
table.headline td b{font-size:15px}
/* «Главное» на телефоне: строка - подпись, под ней «сейчас · прошлый ·
   цель» в одну строку, а не столбик из четырёх подписей. */
@media (max-width:640px){
  table.headline.cards tr{padding:6px 12px;margin-bottom:6px}
  table.headline.cards td[data-label]{display:inline-block;width:auto;padding-left:0;margin-right:14px}
  table.headline.cards td[data-label]::before{float:none;display:inline;width:auto;margin:0 4px 0 0}
  table.headline.cards td:empty{display:none}
  /* Свёрнутые блоки отчётов (до четырёх колонок, не карточки): поля уже,
     а длинная шапка колонки переносится - в одну строку таблица выходила
     за край карточки. */
  details.fold>:not(summary){margin-left:14px;margin-right:14px}
  details.fold>summary{padding:14px}
  details.fold th{white-space:normal}
  details.fold.card :is(th,td){padding-left:5px;padding-right:5px}
}

/* ── пояснение на странице: не ошибка и не успех, а «как тут устроено» ── */
.note{padding:14px 18px;border-radius:14px;margin:0 0 18px;font-size:13.5px;
  background:var(--infobg);color:var(--text);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--blue) 35%,transparent)}
.req{color:var(--bad)}
p.small,.small{font-size:13px}

/* ── меню строки «⋯»: редкие действия не стоят кнопками в каждой ячейке ── */
details.menu{position:relative;display:inline-block;text-align:left}
details.menu>summary{list-style:none;cursor:pointer;width:34px;height:34px;border-radius:var(--r3);
  display:flex;align-items:center;justify-content:center;font-size:20px;line-height:1;
  color:var(--muted);border:1px solid transparent}
details.menu>summary::-webkit-details-marker{display:none}
details.menu>summary:hover,details.menu[open]>summary{background:var(--card2);border-color:var(--line-strong);color:var(--text)}
details.menu .menu-body{position:absolute;right:0;top:40px;z-index:30;width:280px;padding:12px;
  background:var(--card);background:var(--glass);border:1px solid var(--line-strong);border-radius:14px;
  -webkit-backdrop-filter:blur(24px);backdrop-filter:blur(24px);box-shadow:var(--pop);display:grid;gap:12px;white-space:normal}
details.menu .menu-body form{display:grid;gap:6px;margin:0}
details.menu .menu-body form+form{border-top:1px solid var(--line);padding-top:12px}
details.menu .menu-body label{margin:0}
details.menu .menu-body input:not([type=checkbox]):not([type=radio]),details.menu .menu-body select{display:block;width:100%;margin-top:6px;min-height:36px}
details.menu .menu-body button{justify-self:start}

/* ── окно поверх страницы: «Добавить сотрудника» ── */
dialog.modal{border:1px solid var(--line-strong);border-radius:var(--r);padding:0;width:min(600px,calc(100vw - 24px));
  max-height:calc(100vh - 32px);background:var(--card);color:var(--text);
  box-shadow:var(--pop)}
dialog.modal::backdrop{background:rgba(8,10,14,.55);-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px)}
dialog.modal>form{padding:20px 22px 18px}
.modal-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:14px}
.modal-head h2{margin:0;font-size:20px}
.modal-foot{display:flex;justify-content:flex-end;gap:8px;margin-top:16px;padding-top:14px;border-top:1px solid var(--line)}
fieldset.role-pick{border:0;margin:0 0 12px;padding:0;min-width:0}
fieldset.role-pick legend{padding:0;margin:0 0 6px;font-size:13px;color:var(--muted)}
fieldset.role-pick{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:8px}
fieldset.role-pick .choice{margin:0;padding:10px 12px}
fieldset.role-pick .choice b{font-size:15px}

/* ── сотрудники: строка - человек, роль и точка выбираются на месте ── */
.staff-wrap{min-width:0}
table.staff-table td{vertical-align:middle}
/* Список сжимается вместе с колонкой: с потолком в 220px таблица
   разъезжалась вбок на планшете и ноутбуке 13", а на телефоне список
   вылезал из карточки (правило телефона ниже по файлу проигрывало). */
table.staff-table td select{width:100%;max-width:220px;min-width:0}
@media (max-width:1160px){table.staff-table td select{max-width:100%}}
table.staff-table td .inline-form{margin:4px 0 0}
table.staff-table td .inline-form:first-child{margin-top:0}
@media (max-width:640px){
  table.staff-table td.actions{text-align:left}
  details.menu .menu-body{left:0;right:auto;width:min(280px,calc(100vw - 60px))}
}

/* Воронка «Входящих» (deals.html): колонки этапов, как доска CRM продаж.
   Доска шире экрана - листается вбок, колонка - вниз. */
.board{display:flex;gap:16px;overflow-x:auto;padding:4px 0 12px;margin-top:16px;align-items:flex-start;scroll-snap-type:x proximity}
.board-col{--dot:var(--faint);flex:0 0 260px;min-height:420px;background:var(--bg2);border:1px solid var(--line);border-radius:var(--r);display:flex;flex-direction:column;max-height:calc(100vh - 220px);scroll-snap-align:start}
.board-col>header{padding:14px 16px 8px;display:flex;align-items:center;gap:8px}
.board-col>header::before{content:"";flex:0 0 7px;width:7px;height:7px;border-radius:50%;background:var(--dot)}
.board-col>header b{font-size:13px;font-weight:700}
.board-col>header span{min-width:20px;height:18px;padding:0 6px;border-radius:6px;display:inline-grid;place-items:center;
  background:var(--card2);color:var(--muted);font:600 11px/1 var(--font-mono)}
.board-col.s-new{--dot:var(--info)}
.board-col.s-touch{--dot:var(--warn)}
.board-col.s-contract{--dot:var(--brand-soft)}
.board-col.s-rented{--dot:var(--accent)}
.board-col.s-renewed{--dot:var(--ok)}
.board-col.s-returned{--dot:var(--muted)}
.board-col.s-deferred{--dot:var(--faint)}
.board-col.s-lost{--dot:var(--bad)}
.board-col.drop{outline:2px dashed var(--accent);outline-offset:-2px}
.board-cards{padding:6px 12px 12px;overflow-y:auto;display:flex;flex-direction:column;gap:10px;min-height:80px}
.board-empty{text-align:center;margin:0;padding:18px;border:1px dashed var(--line-strong);border-radius:12px;color:var(--muted);font-size:12px}
.board-add{padding:8px 8px 0}
.board-add{padding:0 12px 12px}
.board-add summary{cursor:pointer;font-size:13px;color:var(--link);font-weight:700}
.board-add form{display:flex;flex-direction:column;gap:6px;margin-top:8px}
.board-add input,.board-add select{width:100%}
.deal{display:flex;flex-direction:column;gap:4px;background:var(--card);border:1px solid var(--line);border-radius:14px;padding:14px;font-size:13px;color:var(--text);transition:border-color .2s}
.deal:hover{text-decoration:none;border-color:var(--line-strong);transform:translateY(-1px)}
.deal{transition:border-color .2s,transform .2s}
.deal b{font-weight:700}
.deal-top b{font-size:14px;line-height:1.3}
.deal[draggable=true]{cursor:grab}
.deal.dragging{opacity:.5}
.deal.wait{border-color:color-mix(in srgb,var(--bad) 55%,transparent)}
.deal-top{display:flex;justify-content:space-between;gap:6px}
.deal-when{color:var(--muted);font:500 11px var(--font-mono);white-space:nowrap}
.deal-title{color:var(--muted);overflow-wrap:anywhere}
.deal-tags{display:flex;flex-wrap:wrap;gap:4px;margin-top:2px}
.deal-tags .tag{font-size:11px;padding:0 8px}

.deal-stages{display:flex;flex-wrap:wrap;gap:6px}
.deal-stages form{margin:0}
/* «ещё N» у авто-этапа - только на телефоне (ниже): на компьютере
   колонка листается сама. */
.board-more{display:none}
/* Телефон: этапы - столбиком, сделки этапа - списком под ним, вся доска
   листается одной прокруткой страницы. Колонками вбок с прокруткой
   внутри каждой было три направления прокрутки на одном экране. Пустой
   этап - одной строкой заголовка. */
@media (max-width:640px){
  .board{flex-direction:column;align-items:stretch;gap:10px;overflow-x:visible;scroll-snap-type:none}
  .board-col{flex:0 0 auto;min-height:0;max-height:none}
  .board-cards{overflow:visible;min-height:0}
  .board-col:not(:has(.deal)) .board-cards{padding:0}
  .board-col:not(:has(.deal)) .board-empty{display:none}
  /* авто-этап - три свежие карточки и «ещё N» (deals.html) */
  .board-cards:has(>.board-more>input:not(:checked))>.deal:nth-child(n+4){display:none}
  .board-more{position:relative;display:flex;align-items:center;justify-content:center;min-height:40px;margin:0;
    border:1px dashed var(--line-strong);border-radius:12px;color:var(--link);font-size:13px;font-weight:700;cursor:pointer}
  .board-more:has(>input:focus-visible){outline:2px solid var(--accent);outline-offset:2px}
  .board-more>input{position:absolute;opacity:0;width:1px;height:1px;margin:0;pointer-events:none}
  .board-more:has(>input:checked)>span:first-of-type,.board-more:not(:has(>input:checked))>span+span{display:none}
}

/* Задачи дня (_tasks.html): кнопки строки справа, форма свёрнута. */
.task-acts{display:flex;gap:6px;align-items:center}
.task-acts form{margin:0}
.task-acts button{min-height:30px;padding:4px 12px;font-size:12.5px}
.task-add summary{cursor:pointer}
.task-add form{margin-top:12px}
/* Поля формы задачи - по верху: у полей подсказки разной длины, и по
   низу (как у .grid2) поля одной строки разъезжались бы. */
.task-add .grid2{align-items:start}
.task-add label small,.task-edit label small{display:block;margin-top:5px;font-weight:500;line-height:1.4}
.task-later summary{cursor:pointer}
.task-later .my-items{margin-top:10px}
.team-cols{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:16px}
.team-cols>.card{margin-bottom:0}
.team-cols{margin-bottom:20px}
.team-cols .card h2{display:flex;flex-direction:column;align-items:flex-start;gap:2px}
.team-cols .card h2 a{color:var(--text)}
.team-cols .card h2 a:hover{color:var(--link);text-decoration:none}
/* «Задачи дня» тремя блоками: задачи владельца, по точкам, общие. Кнопки
   возвращают к блоку якорем - заголовок не прячется под липкой шапкой. */
.my-block{margin-bottom:28px;scroll-margin-top:80px}
.my-block-h{display:flex;flex-wrap:wrap;align-items:center;gap:10px 16px;margin:0 0 14px;padding-bottom:10px;border-bottom:1px solid var(--line)}
.my-block-h h2{margin:0;flex:1 1 auto;font-size:17px}
.my-block>p.muted{margin:0 0 14px}
.point-tasks h3{display:flex;flex-wrap:wrap;align-items:baseline;gap:2px 10px;margin:18px 0 10px;font-size:15px}
.point-tasks h3 small{font-weight:500;font-size:12.5px}
/* Владельцу у точки сперва её рабочие задачи, под ними - её люди. */
.point-work{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(300px,100%),1fr));gap:16px;margin-bottom:16px}
.point-work>.card{margin-bottom:0}
.point-tasks .point-calm{margin:0 0 12px}

/* Команда (team_member.html): прогресс плана полосой в плитке. */
.bar-track{display:block;height:4px;border-radius:4px;background:var(--card2);margin:8px 0 2px;overflow:hidden}
.bar-fill{display:block;height:100%;border-radius:4px;background:var(--accent)}
.bar-fill.ok{background:var(--ok)}
.bar-fill.bad{background:var(--bad)}
b.ok{color:var(--ok)}
b.bad{color:var(--bad)}
/* Неделя и день сотрудника: листалка и выбор периода в одну строку,
   форма плана отступает от таблицы. */
.period-pick{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin:4px 0 12px}
.period-pick .tabs{flex:none}
.plan-period table+form,.plan-period table+.flash{margin-top:16px}

/* ── сводка: приветствие и «Критично» плашками, как шапка образца ──
   Вместо картинки образца - тёплое свечение фирменного оранжевого. */
.hero{--hc:var(--ok);position:relative;overflow:hidden;padding:30px 32px 28px;background:var(--card)}
.hero.alarm{--hc:var(--accent)}
.hero::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(600px 300px at 0% 50%,color-mix(in srgb,var(--hc) 12%,transparent),transparent 70%)}
.hero::after{content:"";position:absolute;right:-90px;top:-120px;width:340px;height:340px;border-radius:50%;pointer-events:none;
  background:radial-gradient(circle,color-mix(in srgb,var(--hc) 22%,transparent),transparent 64%);filter:blur(10px)}
.hero>*{position:relative;z-index:1}
.hero-kicker{display:flex;align-items:center;gap:8px;margin:0 0 12px;font:500 11px/1 var(--font-mono);letter-spacing:.12em;
  text-transform:uppercase;color:var(--muted)}
.hero-kicker .live{width:7px;height:7px;border-radius:50%;background:var(--ok);box-shadow:0 0 0 4px var(--okbg)}
h1.hero-title{font:700 30px/1.1 var(--font-text);letter-spacing:-.03em;margin:0 0 10px}
.hero-sum{margin:0 0 20px;font-size:15px;color:var(--muted);max-width:760px}
.hero-sum b{color:var(--accent-ink)}.hero-sum b.ok{color:var(--ok)}
.hero-chips{display:flex;flex-wrap:wrap;gap:8px}
.hero-chips .task{display:inline-flex;align-items:center;gap:10px;min-height:38px;padding:6px 8px 6px 14px;border-radius:999px;
  background:var(--card2);box-shadow:inset 0 0 0 1px var(--line-strong);color:var(--text)}
.hero-chips .task{transition:background .2s,transform .2s}
.hero-chips .task:hover{background:var(--card);transform:translateY(-1px)}
.hero-chips .task .n{order:2;min-width:24px;height:24px;padding:0 7px;border-radius:99px;display:grid;place-items:center;
  background:var(--accentbg);color:var(--accent-ink);font:700 12px/1 var(--font-mono);text-align:center}
.hero-chips .task.hot .n{background:var(--badbg);color:var(--bad)}
.hero-chips .task .t{font-size:13px;font-weight:600}
.hero-chips .task .t small{display:none}
/* «Критично» тремя группами: подпись группы слева, плашки справа. */
.hero-group{display:flex;gap:6px 14px;align-items:center;margin-top:10px}
.hero-label{flex:0 0 92px;font:500 11px/1.2 var(--font-mono);letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.hero-group .hero-chips{flex:1 1 auto;min-width:0}
@media (max-width:640px){
  .hero-group{flex-direction:column;align-items:stretch;margin-top:12px}
  .hero-label{flex:none}
  .hero{padding:20px 18px}h1.hero-title{font-size:20px}
  /* Плашки - столбиком во всю ширину, число справа. Лентой вбок, как в
     образце, на 390 px была видна одна плашка из семи, а горящее на
     сводке есть только здесь: из «Задач на сегодня» оно убрано. */
  .hero-chips{flex-wrap:wrap;gap:6px}
  .hero-chips .task{flex:1 1 100%;justify-content:space-between;white-space:normal}
}

/* ── цели касания: на сенсоре всё, что нажимают, - не меньше 40 px ──
   Блок в конце файла намеренно: правила вкладок, фильтров и задач выше
   по файлу с тем же весом иначе перебили бы его. Компьютер с мышью не
   меняется. */
@media (hover:none),(max-width:640px){
  .tabs a,.steps>a,.steps>span{min-height:40px}
  .task-acts button{min-height:40px;padding:8px 16px}
  .saved-views .btn,.saved-views button,.saved-views input.mini{min-height:40px}
  /* крестик фильтра - внутри своей «таблетки», но целью 40 px: в 28
     пикселях у края палец попадал в сам фильтр, а отдельной кнопкой
     между двумя таблетками было не понять, какую он уберёт. Между
     парами - отступ шире, чем между текстом и крестиком. */
  .saved-views{column-gap:10px}
  .saved-views .inline-form:has(>button.danger){margin-left:-50px;margin-right:4px}
  .saved-views a.btn.ghost:has(+.inline-form>button.danger){padding-right:48px}
  .saved-views button.danger{width:40px;min-height:40px}
  label.check{min-height:40px}
  /* стрелки месяца у графиков (сводка, сервис) - кнопкой, а не значком */
  a.arrow{display:inline-flex;align-items:center;justify-content:center;min-width:40px;min-height:40px;
    border-radius:8px;box-shadow:inset 0 0 0 1px var(--line-strong);color:var(--text)}
  a.arrow:hover{text-decoration:none}
  /* у месяца сводки ссылка уже .month-nav a - её вес выше a.arrow */
  .month-nav a.arrow{display:inline-flex;min-width:40px}
}

/* ── сводка: план-факт, календарь, парк ──
   Месяц листается стрелками у заголовка; второстепенное (форма плана,
   доход по точкам, «стоят дольше всех») - под раскрытием details.more. */
.month-nav{white-space:nowrap}
.month-nav a{display:inline-block;min-width:22px;text-align:center;font-weight:700}
h2 .tag{vertical-align:middle;font-size:11px}
details.more{margin:14px 0 4px}
details.more>summary{cursor:pointer;color:var(--link);font-weight:700;list-style:none;padding:4px 0}
details.more>summary::-webkit-details-marker{display:none}
details.more>summary::before{content:"▸";display:inline-block;width:1.1em;color:var(--muted)}
details.more[open]>summary::before{content:"▾"}
details.more[open]>summary{margin-bottom:10px}
/* Полоса плана: заливка - пришло, черта - где был бы ровный темп. */
.bar-track.pace-track{position:relative;overflow:visible}
.bar-track .pace{position:absolute;top:-4px;width:2px;height:12px;margin-left:-1px;border-radius:1px;background:var(--text)}
/* Плитки парка - семь статусов одним рядом: числа короткие. */
@media (min-width:641px){.tiles.park{grid-template-columns:repeat(auto-fit,minmax(128px,1fr));gap:14px}
  .tiles.park .tile{padding:18px 18px 14px}}
/* Платёжный календарь столбиками: приход и расход дня рядом, в одном масштабе. */
.cal-bars{height:150px}
.cal-bars .bar-col{min-width:30px}
.cal-pair{flex:1 1 auto;display:flex;align-items:flex-end;gap:2px;width:100%}
.cal-pair .bar-val{flex:1 1 0}
.cal-bars .bar-num{margin:0 0 3px;white-space:nowrap}
.cal-bars .bar-day{margin-top:4px;text-align:center}
.cal-bars .weekend .bar-day{color:var(--faint)}
.cal-bars .bar-day.bad{color:var(--bad);font-weight:700}
@media (max-width:640px){.cal-bars{gap:3px}.cal-bars .bar-col{min-width:18px}
  /* Таблицы сводки, что остаются таблицами на телефоне: поля уже,
     заголовок переносится - иначе пятая колонка уезжала за край. */
  table.compact th,table.compact td{padding-left:6px;padding-right:6px}
  table.compact th{white-space:normal;letter-spacing:0}
  /* «· 12 аренд» у суммы дня - подсказкой: на телефоне колонка «Придёт»
     с ним выталкивала остаток за край. */
  table.cal-mini .cal-cnt{display:none}}
.cal-start{margin:0 0 12px}
.cal-start label{display:inline-flex;align-items:center;gap:8px;margin:0}
table.cal-mini td small{display:block;font-size:12px;line-height:1.35}

/* ── аренда и деньги: редкие формы свёрнуты (details.card.fold) ──
   Свёрнутый блок со списком-карточками остаётся карточкой: раздетый, он
   клал заголовок-раскрывашку на фон страницы, а поле подписи ячейки
   съедало правило свёрнутых блоков отчётов (5 px). Строки списка в нём -
   через черту, как в карточке с формами. */
@media (max-width:640px){
  details.card.fold:is(:has(>table.cards),:has(>.table-wrap>table.cards)){background:var(--card);
    border:1px solid var(--line);box-shadow:var(--shadow)}
  details.card.fold table.cards tr:not(:has(>th),.list-foot){border:0;border-top:1px solid var(--line);
    border-radius:0;margin:0;padding:10px 0;background:none}
  details.card.fold table.cards tr.total{border-top-width:2px}
  details.card.fold table.cards td[data-label]{padding-left:116px}
  /* во всю ширину без полей блока: width:100% карточек плюс поля
     выталкивали черту строк за край */
  details.card.fold>table.cards{width:auto}
  /* выбор клиента в строке выписки - во всю ширину ячейки, кнопки
     строкой под ним; только выписка: «Я оплатил» и роль сотрудника
     держат поле и кнопку одной строкой */
  table.cards td .inline-form.bank-pick select{flex:1 1 100%;max-width:100%}
  /* нулевой день календаря: на компьютере прочерк в своей колонке, в
     карточке дня - не строка «Приход —». Не opt: тот скрывает ячейку с
     700 px, когда список ещё таблица, и суммы съезжали под чужую шапку */
  table.cards td.zero{display:none}
  /* месяц оценок без единого вопроса - не карточка «0 / 0 / —» */
  table.cards tr.empty-row{display:none}
  /* «Зарегистрировались» в 106 px подписи не входит: перенос по слогам */
  table.cards.ref-agents td[data-label]::before{-webkit-hyphens:auto;hyphens:auto}
}
/* Цель якоря («Закрыть аренду ↓», «+ Новый счёт», «+ Плановый платёж») не
   уходит под липкую шапку: на компьютере это .top (60 px), на телефоне -
   полоса с бургером (до 77 px). */
.card[id]{scroll-margin-top:72px}
@media (max-width:1000px){.card[id]{scroll-margin-top:90px}}
/* ── парк, трекеры, настройки ──
   Строка правки (.edit-row, «▸ Изменить» под строкой каталога) - часть
   своей строки, а не новая запись: без черты между ними. */
tr:has(+tr.edit-row)>td{border-bottom:0}
tr.edit-row>td{padding-top:0}
tr.edit-row details.more{margin:0}
/* Карточка велосипеда в одну колонку: статус и ремонт - первыми, ради
   них её и открывают с телефона, паспорт - ниже. */
@media (max-width:860px){.cols>.bike-ops{order:-1}}
@media (max-width:640px){
  /* тот же набор, что у правила черты выше, - вес равный, побеждает порядок */
  .card:has(>form,>details,>dl,>fieldset,>.grid2,>.tiles,>.bars) table.cards tr.edit-row{border-top:0;padding-top:0}
  /* галочка в ячейке-карточке («Вкл» уведомлений) - вровень со своей
     подписью; цель касания - вся высота label.check */
  table.cards td>label.check{margin:0;align-items:flex-start}
  /* плитка, которая повторяет число вкладки под ней («Требуют внимания») */
  .tiles>.tile.tab-dup{display:none}
  /* без неё видимых нечётно (всего чётно, одна скрыта) - последняя на
     весь ряд, а не одна с пустой половиной */
  .tiles:has(>.tile.tab-dup):has(>.tile:nth-child(even):last-child)>.tile:last-child:not(.tab-dup){grid-column:1/-1}
}
/* ── отчёты, клиенты, входящие на телефоне ──
   Фильтры списка (аренды, наряды, свои фильтры «Входящих») - под
   раскрывашкой: три селекта в три строки отодвигали список на полэкрана.
   Шаблон открывает её, когда фильтр задан. На компьютере место есть:
   заголовка нет, а содержимое видно и у закрытой (::details-content);
   браузер без него показывает обычную раскрывашку. */
details.filters>summary{display:inline-flex;align-items:center;gap:6px;min-height:40px;padding:0 14px;
  border-radius:var(--r3);box-shadow:inset 0 0 0 1px var(--line-strong);cursor:pointer;list-style:none;
  font-weight:600;font-size:14px;color:var(--text)}
details.filters>summary::-webkit-details-marker{display:none}
details.filters>summary::after{content:"▸";color:var(--muted)}
details.filters[open]>summary::after{content:"▾"}
details.filters[open]{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
details.filters>.fields{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
main>details.filters{margin-bottom:12px}
@supports selector(::details-content){@media (min-width:641px){
  details.filters>summary{display:none}
  details.filters::details-content{content-visibility:visible}
}}
/* Строка «Без новых клиентов: …» под «Клиентами и каналами» - только
   телефону: на компьютере эти месяцы стоят в таблице нулями. */
.zero-months{display:none}
@media (max-width:640px){
  /* «Мои фильтры» - уже в заголовке раскрывашки */
  details.filters>.saved-views>.muted:first-child{display:none}
  /* Плитка, которая повторяет вкладку с тем же числом (группы клиентов),
     на телефоне только отодвигает список: вкладки и так над ним. */
  .tile.tab-dup{display:none}
  /* Без «Финансов» у клиентов остаются только такие плитки - пустой ряд
     плиток не оставляет полосу над вкладками. */
  .tiles:not(:has(>:not(.tab-dup))){display:none}
  /* Месяц без новых клиентов - карточка «Всего 0»: на телефоне их
     называет одна строка .zero-months под таблицей. */
  table.cards tr.zero-row{display:none}
  .zero-months{display:block}
  /* Таблицы сводки, оставленные таблицами (статьи, «По дням», «По
     моделям»): правило «поля уже» выше проигрывало по весу полям
     .table-wrap, и на 360 px последняя колонка уезжала за край обёртки. */
  .table-wrap>table.compact>tbody>tr>th,.table-wrap>table.compact>tbody>tr>td{padding-left:6px;padding-right:6px}
}
/* Карточка, которая на узком экране идёт первой (переписка обращения):
   в две колонки она справа, а в одну оказывалась под формами. */
@media (max-width:860px){.cols>.lead{order:-1}}

/* Поле мельче 16 px: iOS и Mini App в Telegram увеличивают страницу при
   фокусе и назад не возвращают. Масштаб пальцами не запрещаем
   (maximum-scale в viewport), а лечим причину. Поле кода подписи (28 px)
   и так крупное. Правило последнее в файле: select и textarea перебивают
   правила выше порядком, input - весом (.saved-views, .side-search). */
@media (max-width:1000px){
  input:not([type=checkbox]):not([type=radio]):not([type=file]):not([type=color]):not(.code-input),
  select,textarea{font-size:16px}
}