/* МАЙБАЙК — фирменный стиль панели.
   Цвета из брендбука: оранжевый FF5907 (акцент), D84400 (тёмный оранжевый),
   FF8F56 и FFD0B8 (светлые оттенки), тёмный 211F1D, зелёный 17A51E, голубой 05ACFF.
   Шрифты: Unbounded — логотип и заголовки, Onest — текст; лежат рядом
   (static/fonts, подключаются в fonts.css), при сбое — системные. */
:root{
  --brand:#FF5907;--brand-dark:#D84400;--brand-soft:#FF8F56;--brand-pale:#FFD0B8;
  --ink:#211F1D;--ink-2:#3A3733;--green:#17A51E;--blue:#05ACFF;
  --bg:#F4F2EF;--card:#FFFFFF;--text:#211F1D;--muted:#6F6A64;--line:#E6E2DC;--chip:#FFEFE6;
  --ok:#128A18;--warn:#B84000;--bad:#D84400;
  --font-head:"Unbounded","Onest",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --font-text:"Onest",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
}
@media (prefers-color-scheme:dark){:root{
  --bg:#171513;--card:#211F1D;--text:#F3EFEA;--muted:#A39C94;--line:#332F2B;--chip:#3A2B22;
  --ok:#4CCB52;--warn:#FF8F56;--bad:#FF7A3D;
}}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--text);font:15px/1.5 var(--font-text)}
a{color:var(--brand-dark);text-decoration:none}a:hover{text-decoration:underline}
@media (prefers-color-scheme:dark){a{color:var(--brand-soft)}}

/* ── меню: тёмная колонка слева, логотип инвертированный ──
   Разделов почти два десятка, и в строку они не помещались: на ноутбуке
   меню разъезжалось на две строки, а подписи приходилось ужимать до
   двенадцати пикселей. Колонка держит их столбиком с заголовками групп,
   и ширина содержимого от числа разделов больше не зависит. */
body.with-side{display:grid;grid-template-columns:232px minmax(0,1fr);min-height:100vh}
.side{position:sticky;top:0;align-self:start;height:100vh;overflow-y:auto;
  background:var(--ink);color:#fff;display:flex;flex-direction:column;padding:14px 10px 16px}
.side-head{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:2px 8px 12px}
.brand{display:flex;align-items:baseline;gap:8px;color:#fff;min-width:0}
.brand:hover{text-decoration:none}
.brand .logo{height:20px;width:auto;display:block;color:#fff}
.brand-sub{font:600 10px/1 var(--font-head);letter-spacing:.14em;color:var(--brand-soft)}
/* Кто вошёл - карточкой, а не ссылкой в общем ряду: в панели у каждого
   свой профиль прав, и «под кем я сижу» должно быть видно сразу. */
.side-me{display:block;margin:0 4px 6px;padding:8px 10px;border-radius:10px;
  background:rgba(255,255,255,.06);color:#fff}
.side-me:hover{text-decoration:none;background:rgba(255,255,255,.1)}
.side-me b{display:block;font-size:13px;line-height:1.25;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.side-me small{color:var(--brand-soft);font-size:11px}
.side-me.on{background:var(--brand)}
.side-me.on small{color:#fff}
/* Группы меню - блоками: своя подложка и рамка у каждой, чтобы «Клиенты»
   не сливались с «Парком» в один столбик из двадцати строк. Заголовок
   группы живёт внутри блока, а не над ним. */
.side nav{display:flex;flex-direction:column;gap:8px}
.side .blk{display:flex;flex-direction:column;gap:1px;padding:6px 6px 7px;border-radius:12px;
  background:rgba(255,255,255,.045);border:1px solid rgba(255,255,255,.07)}
.side .grp{margin:3px 8px 6px;font:600 10px/1 var(--font-head);letter-spacing:.14em;
  text-transform:uppercase;color:#8A837B}
.side nav a{padding:7px 12px;border-radius:9px;color:#CFC9C2;font-weight:500;font-size:14px}
.side nav a:hover{color:#fff;text-decoration:none;background:rgba(255,255,255,.07)}
.side nav a.on{color:#fff;background:var(--brand)}
.side-bolt{margin-top:auto;padding:18px 10px 0;opacity:.1;pointer-events:none}
.side-bolt svg{height:80px;color:#fff}
.side-bolt svg path{fill:#fff}
.burger{display:none;cursor:pointer;padding:4px 8px;border-radius:8px;font-size:18px;line-height:1;color:#CFC9C2}
.burger:hover{background:rgba(255,255,255,.08);color:#fff}
/* На телефоне колонка превращается в шапку, меню открывается галочкой:
   скрипт ради этого заводить незачем. */
@media (max-width:1000px){
  body.with-side{display:block}
  .side{position:static;height:auto;padding:8px 10px}
  .side-head{padding-bottom:0}
  .burger{display:block}
  .side nav,.side-me,.side-bolt{display:none}
  .nav-toggle:checked ~ .side nav{display:flex}
  .nav-toggle:checked ~ .side .side-me{display:block;margin-top:10px}
}

main{max-width:1200px;margin:0 auto;padding:20px}
h1{font:700 22px/1.2 var(--font-head);margin:0 0 14px;letter-spacing:-.01em}
h2{font:600 13px/1.3 var(--font-head);text-transform:uppercase;letter-spacing:.06em;color:var(--muted);margin:0 0 12px}
h1 small{font:500 13px/1 var(--font-text);letter-spacing:0;text-transform:none}
.bar{display:flex;flex-wrap:wrap;align-items:center;gap:10px 16px;margin-bottom:14px}
.bar h1{margin:0;flex:1 1 auto}
.card{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:16px 18px;margin-bottom:16px;min-width:0}
.card.narrow{max-width:520px}
.cols{display:grid;grid-template-columns:1fr 1fr;gap:16px}
@media (max-width:860px){.cols{grid-template-columns:1fr}}

/* плитки сводки: цифры Unbounded, «горячая» — оранжевая */
.tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:10px;margin-bottom:16px}
/* Задачи на сегодня: число слева, дело справа, цвет по уровню. */
.tasks{display:grid;gap:4px}
.task{display:flex;gap:12px;align-items:baseline;padding:7px 10px;border-radius:10px;color:var(--text)}
.task:hover{background:var(--chip);text-decoration:none}
.task .n{font:700 20px/1 var(--font-head);min-width:36px;text-align:right}
.task .t{display:flex;flex-direction:column;gap:2px;font-weight:500}
.task .t small{font-weight:400;font-size:12px}
.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(210px,1fr));gap:10px;margin-bottom:16px}
.kind{display:flex;flex-direction:column;gap:5px;background:var(--card);border:1px solid var(--line);border-radius:14px;padding:12px 14px}
.kind b{font:600 15px/1.25 var(--font-head)}
.kind small{color:var(--muted);font-size:12px;line-height:1.35}
.kind small.when{flex:1;color:var(--brand-dark)}
.kind .btn{align-self:flex-start;padding:5px 12px;font-size:13px;margin-top:4px}
.tile{display:block;background:var(--card);border:1px solid var(--line);border-radius:14px;padding:14px 16px;color:var(--text);position:relative;overflow:hidden}
.tile:hover{text-decoration:none}
.tile b{display:block;font:700 24px/1.15 var(--font-head);letter-spacing:-.02em}
.tile span{color:var(--muted);font-size:13px}
.tile.hot{background:var(--brand);border-color:var(--brand);color:#fff}
.tile.hot span{color:#FFE3D4}

table{width:100%;border-collapse:collapse;font-size:14px}
th{text-align:left;color:var(--muted);font-weight:600;font-size:12px;text-transform:uppercase;letter-spacing:.04em;padding:6px 8px;border-bottom:1px solid var(--line)}
td{padding:8px;border-bottom:1px solid var(--line);vertical-align:top}
tr:last-child td{border-bottom:0}
td.num,th.num{text-align:right;white-space:nowrap;font-variant-numeric:tabular-nums}
.card>table{display:block;overflow-x:auto}
/* Таблица с редактируемыми строками: сами <form> стоят за таблицей, а
   поля ссылаются на них атрибутом form - <form> внутри <tr> браузер
   выносит наружу, и строка разъезжается. Прокрутку в этом случае берёт
   на себя обёртка: таблица уже не прямой ребёнок карточки. */
.table-wrap{overflow-x:auto}
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{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}
.ok{color:var(--ok)}.warn{color:var(--warn)}.bad{color:var(--bad)}.muted{color:var(--muted)}
.tag{display:inline-block;padding:2px 9px;border-radius:999px;background:var(--chip);font-size:12px;font-weight:500;vertical-align:middle;color:var(--brand-dark)}
.tag.available,.tag.active{background:#E4F5E4;color:var(--ok)}
.tag.rented{background:var(--brand);color:#fff}
.tag.repair,.tag.reserved{background:var(--brand-pale);color:var(--brand-dark)}
.tag.lost,.tag.sold,.tag.bad,.tag.closed{background:var(--ink);color:#fff}
@media (prefers-color-scheme:dark){.tag.available,.tag.active{background:#1F3A21}.tag.lost,.tag.sold,.tag.bad,.tag.closed{background:#4A4540}}

label{display:block;margin:0 0 10px;font-size:13px;color:var(--muted)}
/* Скрытое остаётся скрытым: правило ниже задаёт полям display, а
   авторский стиль сильнее браузерного [hidden]{display:none}. Без
   этой строки технический чекбокс меню вылезал полем во всю ширину. */
[hidden]{display:none !important}
input,select,textarea{display:block;width:100%;margin-top:4px;padding:8px 10px;border:1px solid var(--line);border-radius:9px;background:var(--bg);color:var(--text);font:inherit}
input:focus,select:focus,textarea:focus{outline:2px solid var(--brand);outline-offset:0;border-color:var(--brand)}
td input,td select{margin:0;padding:5px 7px;width:auto;display:inline-block}
button,.btn{display:inline-block;padding:8px 16px;border-radius:9px;border:1px solid var(--brand);background:var(--brand);color:#fff;font:600 14px/1.3 var(--font-text);cursor:pointer}
button:hover,.btn:hover{background:var(--brand-dark);border-color:var(--brand-dark);text-decoration:none}
button.ghost,.btn.ghost{background:transparent;color:var(--brand-dark)}
button.ghost:hover,.btn.ghost:hover{background:var(--chip);color:var(--brand-dark)}
@media (prefers-color-scheme:dark){button.ghost,.btn.ghost{color:var(--brand-soft)}}
button:disabled,button:disabled:hover{background:var(--chip);border-color:var(--line);color:var(--muted);cursor:not-allowed}
button.danger{border-color:var(--ink);background:var(--ink)}button.danger:hover{background:#000}
button.ghost.danger{background:transparent;color:var(--bad)}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:0 12px;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:6px;align-items:center}
.inline-form input,.inline-form select{margin:0;width:auto}
.search{display:flex;flex-wrap:wrap;gap:6px}
.search input,.search select{margin:0;width:auto}
.tabs a{padding:5px 12px;border-radius:8px;color:var(--muted);font-weight:500}.tabs a.on{background:var(--ink);color:#fff}
.flash{padding:10px 14px;border-radius:10px;margin-bottom:12px;background:#E4F5E4;color:#0F5A14;border-left:4px solid var(--green)}
.flash.err{background:var(--brand-pale);color:#6B2400;border-left-color:var(--brand-dark)}
@media (prefers-color-scheme:dark){.flash{background:#1F3A21;color:#CFF2D0}.flash.err{background:#4A2412;color:#FFD0B8}}
dl{display:grid;grid-template-columns:max-content 1fr;gap:7px 16px;margin:0}dt{color:var(--muted)}dd{margin: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:var(--ink)}
.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-radius:18px;padding:28px 28px 22px;color:var(--text)}
.login-logo .logo{height:34px;width:auto;color:var(--text)}
.login-box h1{margin:22px 0 18px;font-size:30px;text-transform:uppercase;line-height:1.05}
.login-box button{width:100%;padding:11px}
@media (max-width:760px){.login{grid-template-columns:1fr;align-items:end;padding-bottom:20px}.login-box{grid-column:1}.login-art svg{left:-20%;top:-30%;height:90%}}
pre.report{white-space:pre-wrap;word-break:break-word;font:13px/1.5 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;background:var(--bg);border:1px solid var(--line);border-radius:10px;padding:12px 14px;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}
.card.three{margin-bottom:16px}.card.three .tiles{margin-bottom:8px}.three-head{display:flex;flex-wrap:wrap;gap:6px 14px;align-items:baseline;margin-bottom:10px}.three-head h2{margin:0}.tile.good{border-color:var(--green);box-shadow:inset 4px 0 0 var(--green)}.tile.warn{border-color:var(--brand);box-shadow:inset 4px 0 0 var(--brand)}.tile small{display:block;font-size:12px;margin-top:2px}
.tag.maintenance{background:#E8F4FF;color:#0B5A86}.tag.written_off{background:var(--ink);color:#fff}

/* ── быстрая выдача: шаги и плитки выбора ── */
.steps{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:16px}
.steps span{padding:6px 12px;border-radius:999px;font-size:13px;font-weight:600;background:var(--chip);color:var(--brand-dark);white-space:nowrap}
.steps span.done{background:#E4F5E4;color:var(--ok)}
.steps span.now{background:var(--ink);color:#fff}
.steps span.todo{background:transparent;border:1px dashed var(--line);color:var(--muted);font-weight:500}
.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:12px;padding:12px 14px;background:var(--bg);color:var(--text);cursor:pointer;margin:0;font-size:14px}
.choice input{position:absolute;opacity:0;width:0;height:0;margin:0}
.choice b{display:block;font:600 16px/1.25 var(--font-head);letter-spacing:-.01em}
.choice small{display:block;color:var(--muted);font-size:12px;margin-top:3px}
.choice .price{display:block;margin-top:6px;font-weight:600}
.choice:hover{border-color:var(--brand-soft)}
.choice:has(input:checked),.choice.on{border-color:var(--brand);box-shadow:inset 0 0 0 2px var(--brand);background:var(--card)}
.choice.dim{opacity:.55}
.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:600 17px/1.2 var(--font-head)}
.tag.bot-none{background:var(--brand-pale);color:var(--brand-dark)}
.tag.bot-signed,.tag.bot-renting{background:#E4F5E4;color:var(--ok)}
.tag.bot-pending,.tag.bot-registering,.tag.bot-approved{background:#FFF3D6;color:#7A4B00}

/* ── намерение клиента: сводка и карточка аренды ── */
.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}
.tag.intent-renew{background:#E4F5E4;color:var(--ok)}
.tag.intent-return{background:#E8F4FF;color:#0B5A86}

/* ── профили доступа: матрица «раздел × уровень» ── */
.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;accent-color:var(--brand)}
label.check input[type=checkbox]{accent-color:var(--brand)}
.perms tr:hover td{background:var(--chip)}
.tag.ok{background:#E4F5E4;color:var(--ok)}
@media (prefers-color-scheme:dark){.tag.ok{background:#1F3A21}}
/* Форма только для просмотра: 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}

/* ── сервис: наряды ── */
.tag.order-new{background:#FFF3D6;color:#7A4B00}
.tag.order-in_work{background:var(--brand);color:#fff}
.tag.order-waiting{background:#E8F4FF;color:#0B5A86}
.tag.order-done{background:#E4F5E4;color:var(--ok)}
.tag.order-cancelled{background:var(--ink);color:#fff}
tr.warn-row td{background:#FFF7EC}
/* Строка в розыске краснее жёлтой: её ищут, а не листают. */
tr.bad-row td{background:#FFECEC}
@media (prefers-color-scheme:dark){
  .tag.order-new{background:#4A3A18;color:#FFD9A0}
  .tag.order-waiting{background:#123048;color:#BEE2FF}
  .tag.order-done{background:#1F3A21}
  tr.warn-row td{background:#3A2E1C}
  tr.bad-row td{background:#40201F}
  .tag.take-found{background:#1F3A21}
  .tag.take-extra{background:#4A3A18;color:#FFD9A0}
}
.tag.take-found{background:#E4F5E4;color:var(--ok)}
.tag.take-missing{background:var(--ink);color:#fff}
.tag.take-extra{background:#FFF3D6;color:#7A4B00}
.tag.take-expected{background:var(--chip);color:var(--brand-dark)}
/* Пересчёт считают с телефоном в руках: на узком экране от строки нужны
   номер, отметка и кнопка, остальное уводим. */
@media (max-width:700px){
  th.opt,td.opt{display:none}
}
tr.total td{border-top:2px solid var(--line);font-weight:600}
.tag.ref-click{background:var(--chip);color:var(--brand-dark)}
.tag.ref-signed{background:#E8F4FF;color:#0B5A86}
.tag.ref-rented{background:var(--brand);color:#fff}
.tag.ref-paid{background:#E4F5E4;color:var(--ok)}

/* Карта парка: единственный экран со скриптом, высота задаётся здесь -
   у Leaflet без явной высоты контейнер схлопывается в ноль. */
.map{height:min(60vh,520px);border-radius:12px;overflow:hidden;margin:4px 0 10px}
.dot{display:inline-block;width:10px;height:10px;border-radius:50%;margin:0 2px}
.dot.rented{background:#FF5907}.dot.parked{background:#2e7d32}
.dot.offline{background:#777}.dot.alarm{background:#d32f2f}

/* Предпросмотр рассылки: показываем ровно то, что уйдёт клиенту,
   поэтому переносы строк сохраняются как есть. */
pre.preview{white-space:pre-wrap;font:inherit;background:var(--soft,#f3f1ee);
  border-radius:10px;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(--ink)}
.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-size:28px;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}

/* Столбики графика: чистый 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{width:100%;min-height:2px;border-radius:4px 4px 0 0;
         background:var(--ok);transition:height .2s}
.bar-val.over{background:#E04B43}
.bar-num{font-size:11px;line-height:1.2;margin-top:2px}
.bar-day{font-size:10px;line-height:1.2}
.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-size:10px;color:var(--muted);
               background:var(--card);padding:0 4px}
@media (max-width:700px){
  .bars{height:140px}
  .bar-num{display:none}
}

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

/* Сортируемый заголовок, подвал списка и свои фильтры. */
th.sorted{background:var(--chip)}
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;text-decoration:underline}
.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}
/* Входящие: лента переписки */
/* Лента идёт в DOM от новых к старым, а column-reverse рисует её сверху
   вниз и открывает прокрутку снизу: последнее сообщение видно сразу,
   без скрипта. */
.thread{display:flex;flex-direction:column-reverse;gap:8px;margin-bottom:12px;max-height:60vh;overflow:auto}
.thread .msg{border:1px solid var(--line,#ddd);border-radius:8px;padding:6px 10px;max-width:85%;word-break:break-word}
.thread .msg .body{white-space:pre-wrap}
.thread .msg.out{align-self:flex-end;background:var(--brand-pale);color:#3A1A08}
@media (prefers-color-scheme:dark){.thread .msg.out{background:#4A2412;color:#FFD0B8}}
.thread .msg.event{align-self:center;border-style:dashed}