/* Панель управления магазином. Цвета магазина (--accent, --sidebar) переопределяет /brand/theme.css. */
:root{--bg:#f4f6f9;--card:#fff;--text:#1d2129;--muted:#667085;--line:#e4e7ec;--accent:#1f6feb;--on-accent:#fff;--accent-text:#1d69df;--sidebar:#1d2129;
  --err:#b42318;--warn:#b54708;--side-w:240px;--radius:12px;
  --shadow:0 1px 2px rgba(16,24,40,.05),0 1px 3px rgba(16,24,40,.06)}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;font:15px/1.55 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;background:var(--bg);color:var(--text)}
a{color:var(--accent-text)}
:focus-visible{outline:2px solid var(--accent-text);outline-offset:2px}

/* ---- каркас: меню слева + рабочая область ---- */
.app{display:flex;min-height:100vh}
.content{flex:1;min-width:0}
.content main{max-width:1040px;margin:0 auto;padding:32px 36px 56px}
.plain main{max-width:960px;margin:0 auto;padding:16px}

.side{width:var(--side-w);flex:none;position:sticky;top:0;height:100vh;display:flex;flex-direction:column;
  background:var(--sidebar);color:#cdd3dd}
.side :focus-visible{outline-color:#fff}
.brand{display:flex;flex-direction:column;gap:6px;padding:22px 20px 18px;color:#fff;text-decoration:none;
  border-bottom:1px solid rgba(255,255,255,.09)}
.brand img{display:block;max-width:100%;max-height:44px;width:auto;height:auto}
.brand-name{font-size:19px;font-weight:650;letter-spacing:.2px;line-height:1.25;overflow-wrap:anywhere}
.brand-sub{font-size:12px;color:#9aa3b2;letter-spacing:.3px}

.side nav{flex:1;overflow-y:auto;padding:14px 10px}
.nav{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:2px}
.item{display:flex;align-items:center;gap:10px;padding:10px;border-radius:9px;color:#cdd3dd;text-decoration:none;
  font-size:14px;line-height:1.3}
.item .t{flex:1;min-width:0}
a.item:hover{background:rgba(255,255,255,.08);color:#fff}
a.item[aria-current="page"]{background:var(--accent);color:var(--on-accent);font-weight:600}
.item.soon{color:#8b94a5;cursor:default}
.ico{flex:none;width:20px;height:20px}
.badge{flex:none;font-size:10px;line-height:1;padding:3px 6px;border-radius:999px;border:1px solid currentColor;
  color:#8b94a5;letter-spacing:.2px}

.me{padding:14px 16px 16px;border-top:1px solid rgba(255,255,255,.09)}
.who{display:flex;flex-direction:column;margin-bottom:10px;min-width:0}
.who .mail{color:#fff;font-size:13.5px;overflow-wrap:anywhere}
.who .role{color:#9aa3b2;font-size:12.5px}
.me button.ghost{display:flex;align-items:center;gap:10px;width:100%;padding:9px 12px;border-radius:9px;
  background:rgba(255,255,255,.08);color:#e6e9ef}
.me button.ghost:hover{background:rgba(255,255,255,.15);color:#fff}

/* телефонная полоса и «бургер»: на широком экране скрыты */
.nav-toggle{position:absolute;opacity:0;width:1px;height:1px;pointer-events:none}
.mobilebar,.scrim{display:none}

/* ---- содержимое ---- */
h1{font-size:24px;line-height:1.25;margin:0 0 6px;letter-spacing:-.2px}
h2{font-size:18px;margin:28px 0 10px}
.lead{margin:0 0 24px;color:var(--muted)}
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:20px;box-shadow:var(--shadow)}
.narrow{max-width:400px;margin:48px auto}
.tiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:16px}
.tile{display:block;position:relative;background:var(--card);border:1px solid var(--line);border-radius:var(--radius);
  padding:18px 18px 16px;color:var(--text);text-decoration:none;box-shadow:var(--shadow)}
.tile .ico{width:24px;height:24px;color:var(--accent-text);margin-bottom:10px}
.tile b{display:block;font-size:16px}
.tile p{margin:4px 0 0;color:var(--muted);font-size:14px}
a.tile:hover{border-color:var(--accent-text)}
.tile.soon{background:transparent;box-shadow:none;border-style:dashed}
.tile.soon .ico,.tile.soon b{color:#98a2b3}
.tile .badge{position:absolute;top:16px;right:16px;color:var(--muted)}

label{display:block;margin:12px 0;font-size:14px;color:var(--muted)}
input,select{display:block;width:100%;margin-top:4px;padding:10px 12px;border:1px solid #d0d5dd;border-radius:9px;
  font:inherit;color:var(--text);background:#fff}
input:focus-visible,select:focus-visible{outline-offset:0;border-color:var(--accent-text)}
button{padding:10px 16px;border:0;border-radius:9px;background:var(--accent);color:var(--on-accent);font:inherit;cursor:pointer}
button:hover{filter:brightness(1.08)}
.link{background:none;color:var(--accent-text);padding:0}
.link:hover{filter:none;text-decoration:underline}
.ok{color:#067647}.error{color:var(--err)}.warn{color:var(--warn)}.note{color:var(--muted)}
.kv{width:100%;border-collapse:separate;border-spacing:0;background:var(--card);border:1px solid var(--line);
  border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow)}
.kv th,.kv td{padding:12px 16px;border-bottom:1px solid var(--line);text-align:left;vertical-align:top}
.kv tr:last-child th,.kv tr:last-child td{border-bottom:0}
.kv th{width:38%;font-weight:500;color:var(--muted)}
.kv th,.kv td{overflow-wrap:anywhere}   /* длинные ссылки и почты переносятся, обычные слова — нет */
.temp{background:#fffbea;border:1px solid #f5d77a;border-radius:var(--radius);padding:14px;margin:12px 0}
.temp code{font-size:17px;overflow-wrap:anywhere}

/* ---- аналитика сайта ---- */
.period{display:inline-flex;gap:4px;padding:4px;margin:0 0 8px;background:var(--card);border:1px solid var(--line);border-radius:999px;box-shadow:var(--shadow)}
.period a{padding:7px 16px;border-radius:999px;color:var(--text);text-decoration:none;font-size:14px;white-space:nowrap}
.period a:hover{background:var(--bg)}
.period a[aria-current="page"]{background:var(--accent);color:var(--on-accent);font-weight:600}
.block h2{margin:28px 0 10px}
.stats{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:12px}
.stat{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:14px 16px;box-shadow:var(--shadow)}
.stat .k{display:block;color:var(--muted);font-size:13px;line-height:1.3}
.stat .v{display:block;margin-top:4px;font-size:26px;line-height:1.15;font-variant-numeric:tabular-nums}
.card.flush{padding:0;overflow:hidden}
.table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch}   /* на телефоне таблица прокручивается внутри карточки, не страница */
.grid{width:100%;border-collapse:collapse}
.grid th,.grid td{padding:10px 14px;border-bottom:1px solid var(--line);text-align:left;vertical-align:top}
.grid tr:last-child td,.grid tr:last-child th{border-bottom:0}
.grid th{font-size:12.5px;font-weight:600;color:var(--muted);white-space:nowrap;background:#fafbfc}
.grid .num{text-align:right;white-space:nowrap;font-variant-numeric:tabular-nums}
.grid tr.sum th{color:var(--text);font-size:14px;background:transparent;white-space:normal}
.grid tr.sum td{font-weight:600}
.grid tr.sub td:first-child{padding-left:30px;color:var(--muted)}
.bar{display:block;width:100%;max-width:220px;height:6px;margin-top:6px;border:0;border-radius:3px;accent-color:var(--accent)}
.bar::-webkit-progress-bar{background:var(--line);border-radius:3px}
.bar::-webkit-progress-value{background:var(--accent);border-radius:3px}
.bar::-moz-progress-bar{background:var(--accent);border-radius:3px}
.empty{margin:0;padding:16px 18px;color:var(--muted)}
.card .empty{padding:0}
.two{display:grid;grid-template-columns:1fr 1fr;gap:0 20px;align-items:start}
.two > .block{min-width:0}
.foot{margin-top:32px}

/* ---- продажи Kaspi: полоса по дням — ширина классом (CSP панели запрещает style=) ---- */
.hbar{display:block;width:100%;max-width:320px;height:8px;margin-top:6px;background:var(--line);border-radius:4px;overflow:hidden}
.hbar .fill{display:block;height:100%;background:var(--accent);border-radius:4px}
.w0{width:0%}.w5{width:5%}.w10{width:10%}.w15{width:15%}.w20{width:20%}.w25{width:25%}.w30{width:30%}.w35{width:35%}.w40{width:40%}.w45{width:45%}.w50{width:50%}.w55{width:55%}.w60{width:60%}.w65{width:65%}.w70{width:70%}.w75{width:75%}.w80{width:80%}.w85{width:85%}.w90{width:90%}.w95{width:95%}.w100{width:100%}

/* ---- плашка «заказы Kaspi не загружаются» — на всех страницах панели ---- */
.alert{margin:0 0 20px;padding:12px 16px;border:1px solid #fda29b;border-radius:var(--radius);background:#fef3f2;color:var(--err)}
.alert a{color:var(--err);font-weight:600}

/* ---- телефон и узкий планшет: меню выезжает по «бургеру» (чистый CSS) ---- */
@media (max-width:899px){
  .app{display:block}
  .mobilebar{display:flex;position:sticky;top:0;z-index:20;align-items:center;justify-content:space-between;gap:12px;
    height:56px;padding:0 12px 0 16px;background:var(--sidebar);color:#fff}
  .mobilebar .brand{flex-direction:row;padding:0;border:0;min-width:0}
  .mobilebar .brand img{max-height:32px}
  .mobilebar .brand-name{font-size:17px}
  .burger{display:flex;align-items:center;justify-content:center;width:44px;height:44px;border-radius:9px;cursor:pointer;color:#fff}
  .burger:hover{background:rgba(255,255,255,.1)}
  .burger .ico{width:24px;height:24px}
  .nav-toggle:focus-visible ~ .mobilebar .burger{outline:2px solid #fff;outline-offset:-2px}
  .side{position:fixed;left:0;top:0;bottom:0;z-index:40;height:auto;max-width:86vw;transform:translateX(-105%);
    visibility:hidden;transition:transform .2s ease,visibility 0s linear .2s}
  .nav-toggle:checked ~ .side{transform:none;visibility:visible;transition:transform .2s ease}
  .scrim{position:fixed;inset:0;z-index:30;background:rgba(16,24,40,.5);opacity:0;pointer-events:none;
    transition:opacity .2s ease}
  .nav-toggle:checked ~ .scrim{display:block;opacity:1;pointer-events:auto}
  .content main{padding:20px 16px 40px}
  .narrow{margin:24px auto}
  h1{font-size:21px}
  .kv th{width:42%}
  .kv th,.kv td{padding:10px 12px}
  .tiles{grid-template-columns:1fr}
  .two{grid-template-columns:1fr}
  .stats{grid-template-columns:repeat(2,1fr)}
  .stat .v{font-size:22px}
  .period{display:flex}
  .period a{flex:1;text-align:center;padding:8px 6px}
}
@media (prefers-reduced-motion:reduce){.side,.scrim{transition:none}}

/* ---- вход с кодом ---- */
.narrow.wide{max-width:560px}
.steps{padding-left:22px}
.steps li{margin:0 0 12px}
.qr{display:block;margin:10px 0 4px;background:#fff;border:1px solid var(--line);border-radius:8px}
code.secret{display:block;margin-top:6px;font-size:16px;letter-spacing:1px;word-spacing:6px;overflow-wrap:anywhere}
.codes{columns:2;column-gap:32px;padding-left:28px;font-size:17px}
.codes li{margin:0 0 6px}
a.button{display:inline-block;padding:10px 16px;border-radius:9px;background:var(--accent);color:var(--on-accent);
  text-decoration:none}

/* ---- «Сотрудники»: галочки разделов ---- */
.perms{margin:12px 0;padding:0;border:0}
.perms legend{padding:0;margin-bottom:4px;font-size:14px;color:var(--muted)}
.perm{display:flex;align-items:center;gap:8px;margin:6px 0;color:var(--text)}
.perm input{display:inline-block;width:auto;margin:0}
.perm.sub{padding-left:26px}
.perm-warn{margin:6px 0 10px;padding:10px 12px;border:1px solid #f5d77a;border-radius:9px;background:#fffbea;color:var(--warn);font-size:13.5px}
.edit-perms summary{cursor:pointer;color:var(--accent-text)}
.people form{margin:0 0 4px}
/* «Заказы»: поиск и страницы */
.search{display:flex;flex-wrap:wrap;gap:8px;align-items:flex-end;margin:8px 0 12px}
.search label{flex:1;min-width:220px;margin:0}
.pager{display:flex;gap:16px;align-items:center;justify-content:center;margin:16px 0}
/* «К сборке» (список) и страница печати: экспресс выделен */
.grid tr.express td{background:#fffbea}
.express-mark{color:var(--warn)}
.assemble-code{margin:0 0 4px;font-size:40px;letter-spacing:1px}
.assemble-meta{margin:0 0 16px;font-size:18px}
/* ---- карточка заказа по макету владельца (устройство 07.10.2026 «компоновка карточки заказа»): шапка, плашка
   срока, две колонки примерно 2:1; на узком экране — одна колонка в порядке устройства (сборка, покупатель,
   доставка, детали, теги, проблема, история). Цвета — переменные панели; жёлтый — фирменный --accent магазина ---- */
.ohead{display:flex;flex-wrap:wrap;align-items:flex-start;justify-content:space-between;gap:12px 20px;margin:0 0 16px}
.ohead-main{flex:1 1 320px;min-width:0}
.ohead-act{flex:none;display:flex;gap:8px}
.ohead-act form{margin:0}
.crumbs{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin:0 0 6px;font-size:14px;color:var(--muted)}
.crumbs a{color:var(--muted);text-decoration:none}
.crumbs a:hover{color:var(--text);text-decoration:underline}
.otitle{display:flex;flex-wrap:wrap;align-items:baseline;gap:2px 16px}
.otitle-code{margin:0;font-size:30px;line-height:1.2;letter-spacing:-.3px;overflow-wrap:anywhere}
.ocreated{color:var(--muted);font-size:15px}
.ostickers{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-top:12px}
.ostickers .tag{font-size:14px;line-height:1.4;padding:5px 12px;border-radius:999px}
.ostickers .tag-status{--t-bg:#eef1f5;--t-fg:#344054;box-shadow:none}
/* место на доске — цвет своей колонки (те же пары, что у колонок доски, правила ниже у section.col) */
.place-chip{--c-pill:#e4e7ec;--c-text:var(--text);display:inline-flex;align-items:center;gap:6px;max-width:100%;
  padding:5px 12px;border-radius:999px;background:var(--c-pill);color:var(--c-text);font-size:14px;font-weight:600;
  line-height:1.4;text-decoration:none}
.place-chip:hover{filter:brightness(.97)}
.place-chip .ico{width:18px;height:18px}
.btn-outline{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:9px 16px;border:0;
  border-radius:9px;background:var(--card);color:var(--text);box-shadow:inset 0 0 0 1px #d0d5dd;font-size:14px;
  font-weight:600;line-height:1.3;text-decoration:none;cursor:pointer;white-space:nowrap}
.btn-outline:hover{filter:none;background:var(--bg)}
.btn-outline:disabled{opacity:.45;cursor:not-allowed}
.btn-outline .ico{width:18px;height:18px}
#assemble-later[hidden]{display:none}
/* плашка срока: жёлтая; срок прошёл — красная */
.odeadline{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;margin:0 0 20px;padding:12px 16px;
  border:1px solid #f5d77a;border-radius:var(--radius);background:#fdf3cc;color:var(--text);font-size:15px}
.odeadline .ico{color:#402c1b}
.odeadline-text{flex:1 1 200px;min-width:0}
.odeadline-tz{margin-left:auto;color:#475467;font-size:13px}
.odeadline.late{border-color:#fda29b;background:#fef3f2;color:var(--err)}
.odeadline.late .ico{color:var(--err)}
/* две колонки */
.ocols{display:grid;grid-template-columns:minmax(0,2fr) minmax(0,1fr);gap:20px;align-items:start}
.ocol{display:flex;flex-direction:column;gap:20px;min-width:0}
.obox{min-width:0;padding:20px 22px}
.obox h2{margin:0 0 14px;font-size:19px;line-height:1.3}
.obox-head{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px 16px;margin:0 0 14px}
.obox-head h2{margin:0}
.obox .empty{padding:0}
.okv{border:0;border-radius:0;box-shadow:none;background:transparent}
.okv th,.okv td{padding:9px 0;font-size:14.5px}
.okv th{width:42%;padding-right:12px}
.okv tr.sep th,.okv tr.sep td{border-top:2px solid var(--line)}
.okv form{margin:8px 0 0}
.okv .note{margin:6px 0 0;font-size:13px}
.ocol-side .okv th{width:46%}
/* «Сборка заказа»: прогресс, строки товаров карточками, фото 64×64, подсказка и «Собран и печать» */
.aprog{flex:1 1 240px;display:flex;align-items:center;gap:12px;color:var(--muted);font-size:14px;white-space:nowrap}
.aprog b{font-weight:500}
.aprog-bar{flex:1;min-width:60px;height:6px;border:0;border-radius:3px;background:var(--line);accent-color:var(--accent)}
.aprog-bar::-webkit-progress-bar{background:var(--line);border-radius:3px}
.aprog-bar::-webkit-progress-value{background:var(--accent);border-radius:3px}
.aprog-bar::-moz-progress-bar{background:var(--accent);border-radius:3px}
#assemble-pct{min-width:3em;text-align:right;color:var(--text);font-weight:600}
.aitems{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}
.aitem{display:flex;align-items:center;gap:14px;padding:12px 14px;border:1px solid var(--line);border-radius:10px;
  background:var(--card)}
.aitem-tick{flex:none}
.aitem-tick input{display:block;width:26px;height:26px;margin:0;cursor:pointer}
.aitem-tick input:disabled{cursor:not-allowed}
.item-pic{flex:none;display:flex;align-items:center;justify-content:center;width:64px;height:64px;border-radius:8px;
  background:#f2f4f7;color:#98a2b3;overflow:hidden}
.item-pic img{display:block;width:64px;height:64px;object-fit:contain;background:#fff}
.item-pic img[hidden]{display:none}
.item-pic .item-noimg{display:none}
.item-pic.no-photo .item-noimg{display:block}
.item-noimg .ico{display:block;width:28px;height:28px}
.aitem-body{flex:1 1 160px;min-width:0}
.aitem .item-name{display:block;margin:0;color:var(--text);font-size:16px;font-weight:600;line-height:1.45;cursor:pointer;
  overflow-wrap:anywhere}
.aitem span.item-name{cursor:default}
.aitem .item-name a{color:var(--text)}
.aitem-sku{display:block;margin-top:4px;color:var(--muted);font-size:13.5px}
.aitem-sku code.sku{font:inherit}
.aitem .qty-many{display:table;margin-top:6px;font-size:14px}
.aitem-qty{flex:none;display:flex;align-items:center;gap:14px;font-size:17px;font-weight:700;white-space:nowrap;
  font-variant-numeric:tabular-nums}
.aitem-sum{padding-left:14px;border-left:1px solid var(--line)}
.qty-many{display:inline-block;margin-top:6px;padding:2px 10px;border-radius:6px;background:var(--err);color:#fff;
  font-size:16px;font-weight:700}
/* выделение в названии — только подсветка, текст тот же; пара фон/текст с контрастом ≥ 4,5:1 */
mark.hl{padding:0 4px;border-radius:4px;font-weight:700;color:#1d2129}
mark.hl-num{background:#fdecc8;color:#402c1b}
mark.hl-variant{background:#e8deee;color:#412454}
mark.hl-color{background:#d3e5ef;color:#183347}
/* выделенное в названии — ярлыками */
.aitem mark.hl{display:inline-block;padding:0 8px;border-radius:6px;font-size:.88em;font-weight:600;line-height:1.6}
/* отмеченная — зелёная (класс done ставит скрипт и сервер у вернувшейся страницы; без скрипта — :has),
   неотмеченная при отказе — красная полоса слева */
.aitem.done,.aitem:has(input:checked){border-color:#b7dcb7;background:#edf6ed}
.aitem.missing{border-color:#fda29b;background:#fef3f2;box-shadow:inset 3px 0 0 var(--err)}
.afoot{display:flex;flex-wrap:wrap;align-items:center;gap:12px 16px;margin-top:16px;padding-top:16px;
  border-top:1px solid var(--line)}
.ahint{flex:1 1 220px;display:flex;align-items:center;gap:8px;margin:0;color:var(--muted);font-size:14.5px}
#assemble-done{display:inline-flex;align-items:center;gap:10px;padding:12px 26px;font-size:16px;font-weight:700}
#assemble-done:disabled{opacity:.45;cursor:not-allowed;filter:none}
#assemble-done kbd{padding:1px 7px;border-radius:6px;box-shadow:inset 0 0 0 1px currentColor;
  font:600 13px/1.4 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace}
.akaspi{margin:12px 0 0;font-size:13.5px}
.ablocked{margin:0 0 12px}
.assemble-claim{margin:0 0 12px;font-size:16px;font-weight:600}
#assemble-lost[hidden],.assemble-claim[hidden]{display:none}
.assemble-places{display:flex;align-items:center;gap:8px;margin:0;color:var(--text);font-size:16px;font-weight:600}
.assemble-places input{width:84px;margin:0;padding:9px 12px;font-size:18px;text-align:center}
/* вкладки «История | Попытки сборки»: со скриптом (класс tabs-on) — одна панель; без скрипта — обе подряд */
.ctabs{display:flex;gap:24px;margin:-6px 0 16px;box-shadow:inset 0 -1px 0 var(--line);overflow-x:auto}
.ctab{padding:8px 2px 12px;color:var(--muted);text-decoration:none;font-weight:600;white-space:nowrap;
  border-bottom:3px solid transparent}
.ctab:hover{color:var(--text)}
.ctab.on{color:var(--text);border-bottom-color:var(--accent)}
.o-history .block + .block{margin-top:20px}
.o-history .pane-title{margin:0 0 10px;font-size:15px}
.tabs-on .pane-title{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.tabs-on .block + .block{margin-top:0}
.o-history .block[hidden]{display:none}
.pane-empty{display:flex;flex-direction:column;align-items:center;gap:4px;padding:8px 12px 4px;text-align:center}
.pane-empty .note{font-size:13.5px;max-width:420px}
.pane-empty-ico{display:flex;align-items:center;justify-content:center;width:52px;height:52px;margin-bottom:8px;
  border-radius:50%;background:#f2f4f7;color:var(--muted)}
/* «Покупатель» */
.buyer-top{display:flex;flex-wrap:wrap;align-items:center;gap:12px 14px;margin:0 0 8px}
.avatar{flex:none;display:flex;align-items:center;justify-content:center;width:52px;height:52px;border-radius:50%;
  background:#dbe6fb;color:#1b3a6b;font-size:20px;font-weight:600}
.buyer-who{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;overflow-wrap:anywhere}
/* телефон — одной строкой: блок с именем занимает ширину по содержимому, не влезает — «WhatsApp» уходит ниже */
.buyer-who a{color:var(--muted);text-decoration:none;white-space:nowrap}
.buyer-who a:hover{text-decoration:underline}
.btn-outline.wa .ico{color:#067647}
/* «Доставка» и «Теги»: ярлык вида доставки и «Добавить тег» справа от заголовка */
.obox-head .tag{display:inline-flex;align-items:center;gap:6px;padding:4px 10px;font-size:13px}
.obox-head .tag .ico{width:16px;height:16px}
.tags-add{position:relative}
.tags-add > summary{list-style:none}
.tags-add > summary::-webkit-details-marker{display:none}
.tags-menu{position:absolute;z-index:15;right:0;top:calc(100% + 6px);width:min(320px,80vw);padding:12px;
  background:var(--card);border:1px solid var(--line);border-radius:10px;box-shadow:0 8px 24px rgba(16,24,40,.15)}
.tags-menu .note{margin:0;font-size:13.5px}
.otags-on{display:flex;flex-wrap:wrap;gap:6px}
.otags-on .tag{font-size:13px;padding:2px 12px}
.otags-none{padding:6px 0 4px;text-align:center}
/* «Проблема с заказом» */
.o-problem .problem-form{margin:0}
.o-problem > .note:last-child{margin:6px 0 0 30px;font-size:13.5px}
@media (max-width:1100px){
  .ocols{display:flex;flex-direction:column;align-items:stretch;gap:16px}
  .ocol{display:contents}
  .o-assembly{order:1}
  .o-buyer{order:2}
  .o-delivery{order:3}
  .o-details{order:4}
  .o-tags{order:5}
  .o-problem{order:6}
  .o-history{order:7}
}
@media (max-width:600px){
  .otitle-code{font-size:24px}
  .obox{padding:16px}
  .aitem{flex-wrap:wrap;gap:10px 12px;padding:10px}
  .aitem-qty{width:100%;justify-content:flex-end;font-size:16px}
  .afoot #assemble-done{width:100%;justify-content:center}
  .odeadline-tz{margin-left:0}
  .okv th{width:46%}
}
/* Страница печати: PDF во встроенном окне; подсказки скрыты, пока скрипт их не покажет */
.print-actions{display:flex;flex-wrap:wrap;gap:12px;align-items:center;margin:16px 0}
.print-frame{display:block;width:100%;height:70vh;border:1px solid var(--line);border-radius:9px;background:var(--card)}
.print-msg[hidden]{display:none}
/* ---- доска заказов (устройство 06.10.2026) ---- */
/* доска — на всю ширину рабочей области (от бокового меню до края окна); колонки делят ширину поровну и сжимаются
   до 200 px, уже — доска листается вбок (просьба владельца 06.10.2026, «как в Notion») */
.content main.full{max-width:none;margin:0}
/* вкладки «Заказов» (доска, «Проблемные», «Архив») — отступы по макету 08.10.2026; страница заказа (тоже main.full) — прежние */
.content main.full.orders{padding:24px 24px 40px}
.board{display:flex;gap:12px;align-items:flex-start;overflow-x:auto;padding:4px 2px 16px;max-width:100%}
/* цвет колонки — по data-col, как статусы в Notion (владелец 06.10.2026): --c-bg — фон колонки, --c-pill и --c-text —
   плашка названия и текст на ней (контраст ≥ 4,5:1, расчёт — в отчёте .superpowers/sdd/2026-10-06-panel-zakazy-doska/
   colors-report.md). Серый текст колонки (--c-muted) темнее общего --muted: на цветном фоне тот не дотягивает до 4,5:1. */
.col{--c-bg:#eef1f5;--c-pill:#e4e7ec;--c-text:var(--text);--c-muted:#475467;--c-dot:#98a2b3;
  flex:1 1 0;min-width:200px;background:var(--c-bg);border-radius:14px;padding:12px 8px;min-height:120px}
.place-chip[data-col="new"],section.col[data-col="new"]{--c-bg:#e7f3f8;--c-pill:#d3e5ef;--c-text:#183347;--c-dot:#2e90fa}
.place-chip[data-col="waiting"],section.col[data-col="waiting"]{--c-bg:#f4f0f7;--c-pill:#e8deee;--c-text:#412454;--c-dot:#9e77ed}
.place-chip[data-col="assemble"],section.col[data-col="assemble"]{--c-bg:#fbf3db;--c-pill:#fdecc8;--c-text:#402c1b;--c-dot:#f5b400}
.place-chip[data-col="problem"],section.col[data-col="problem"]{--c-bg:#fdebec;--c-pill:#ffe2dd;--c-text:#5d1715;--c-dot:#f04438}
.place-chip[data-col="assembled"],section.col[data-col="assembled"]{--c-bg:#edf3ec;--c-pill:#dbeddb;--c-text:#1c3829;--c-dot:#12b76a}
.place-chip[data-col="courier"],section.col[data-col="courier"]{--c-bg:#e4f1f7;--c-pill:#ccebe6;--c-text:#0f3d38;--c-dot:#0ba5ec}
.place-chip[data-col="done"],section.col[data-col="done"]{--c-bg:#e1ede4;--c-pill:#2f6b47;--c-text:#fff;--c-dot:#2f6b47}
.place-chip[data-col="cancelled"],section.col[data-col="cancelled"]{--c-bg:#f1f1ef;--c-pill:#e3e2e0;--c-text:#32302c;--c-dot:#98a2b3}
.place-chip[data-col="return"],section.col[data-col="return"]{--c-bg:#faebdd;--c-pill:#fadec9;--c-text:#49290e;--c-dot:#f79009}
/* телефон: колонка читаема, соседняя видна краем. После .col — иначе общее правило (200 px) перебивает это */
@media (max-width:899px){.col{min-width:260px}.content main.full.orders{padding:20px 16px 40px}}
/* заголовок колонки (макет владельца 08.10.2026): цветная точка, название жирным, ниже серым «N заказов · сумма» */
.col-head{margin:0 0 10px;padding:0 4px}
.col-title{display:flex;align-items:center;gap:8px;margin:0;font-size:15px;font-weight:700;line-height:1.3;color:var(--text)}
.col-dot{flex:none;width:12px;height:12px;border-radius:50%;background:var(--c-dot)}
.col-meta{margin:4px 0 0;color:var(--c-muted);font-size:14px;font-variant-numeric:tabular-nums}
.col-body{display:flex;flex-direction:column;gap:10px;min-height:40px}
.col-body .empty{padding:8px 4px;font-size:14px;color:var(--c-muted)}
/* пустая «Собран»: значок коробки и две строки */
.col-body .empty-box{display:flex;flex-direction:column;align-items:center;padding:56px 8px 40px;text-align:center}
.empty-box .ico{width:60px;height:60px;color:#98a2b3;stroke-width:1.2}
.empty-title{margin:14px 0 6px;color:var(--text);font-size:15px;font-weight:700}
.empty-sub{margin:0;font-size:14px}
.col-more{margin-top:8px;padding:4px 10px;border-radius:8px;background:var(--card);font-size:14px}   /* на белом — контраст ссылки как везде */
.col-more[hidden]{display:none}
.col.drop-ok .col-body{outline:2px dashed var(--accent-text);outline-offset:4px;border-radius:8px}
.col.drop-no{opacity:.45}
/* карточка (макет владельца 08.10.2026): слева полоска цвета колонки (просрочен и «Забрать со склада» — красная);
   номер и сумма, товар до 2 строк и «+N», срок, место, покупатель, стикеры, внизу кнопка по колонке и меню «…» */
.ocard{position:relative;display:flex;flex-direction:column;gap:6px;background:var(--card);border:1px solid var(--line);
  border-left:4px solid var(--c-dot,var(--line));border-radius:12px;padding:12px 10px 10px;box-shadow:var(--shadow);
  font-size:14px;line-height:1.4}
.ocard[draggable="true"]{cursor:grab}
.ocard.dragging{opacity:.5}
.ocard.late,.ocard.pickup{border-left-color:var(--err)}
.ocard-top{display:flex;justify-content:space-between;align-items:baseline;gap:8px;font-weight:700}
.ocard-code{color:var(--text);overflow-wrap:anywhere}
.ocard-sum{flex:none;white-space:nowrap;font-variant-numeric:tabular-nums}
.ocard-item{display:flex;align-items:flex-start;gap:6px;color:#344054}
.ocard-name{flex:1;min-width:0;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
  overflow-wrap:anywhere}
.ocard-plus{flex:none;padding:0 6px;border-radius:6px;background:#f2f4f7;color:#344054;font-size:12px;font-weight:600;
  line-height:1.7}
/* срок, статус отмены, ярлык возврата — серый ярлык со значком; просрочен и «Забрать со склада» — красные */
.ocard-due{display:flex}
.due{display:inline-flex;align-items:center;gap:6px;max-width:100%;padding:3px 10px 3px 8px;border-radius:8px;
  background:#f2f4f7;color:#344054;font-size:13px;line-height:1.5}
.due .ico{flex:none;width:16px;height:16px}
.due-date.today{background:#fdf3cc;color:#402c1b}
.due-late,.due-take{background:#fef3f2;color:var(--err);font-weight:600}
/* место и покупатель: значок слева, текст переносится рядом с ним; имя и телефон — парами, пара не рвётся */
.ocard-line{display:flex;align-items:flex-start;gap:6px;min-width:0;color:#475467;font-size:13px;line-height:1.4}
.ocard-line .ico{flex:none;width:16px;height:16px;margin-top:1px;color:#98a2b3}
.ocard-line span{min-width:0;overflow-wrap:anywhere}
.ocard-who{flex-wrap:wrap;gap:2px 12px}
.ocard-pair{display:inline-flex;align-items:flex-start;gap:6px;min-width:0}
.ocard-phone{white-space:nowrap}
/* метки на карточке — одна система: .tag + модификатор задаёт пару цветов (фон и текст, контраст ≥ 4,5:1);
   ряд пустой — скрыт (скрипт дописывает в него теги) */
.ocard-tags{display:flex;flex-wrap:wrap;gap:4px}
.ocard-tags:empty{display:none}
.tag{--t-bg:#e3e2e0;--t-fg:#32302c;display:inline-block;font-size:12px;font-weight:600;line-height:1.5;padding:0 8px;
  border-radius:6px;background:var(--t-bg);color:var(--t-fg);max-width:100%;overflow-wrap:anywhere}
.tag-status{--t-bg:transparent;--t-fg:#475467;font-weight:500;box-shadow:inset 0 0 0 1px #d0d5dd}
.tag-kaspi{--t-bg:#d3e5ef;--t-fg:#183347}
.tag-pickup{--t-bg:#eee0da;--t-fg:#442a1e}
.tag-seller{--t-bg:#f5e0e9;--t-fg:#4c2337}
.tag-mode{--t-bg:#e3e2e0;--t-fg:#32302c}
.tag-express{--t-bg:#fadec9;--t-fg:#49290e}
.tag-sign{--t-bg:#dde6f3;--t-fg:#1f3556}
.tag-pre{--t-bg:#e8deee;--t-fg:#412454}
.tag-assembled{--t-bg:#dbeddb;--t-fg:#1c3829}
.tag-today{--t-bg:#fdecc8;--t-fg:#402c1b}
.tag-late{--t-bg:#ffe2dd;--t-fg:#5d1715}
.tag-take{--t-bg:#ffe2dd;--t-fg:#5d1715}
.tag-back{--t-bg:#e3e2e0;--t-fg:#32302c}
/* сборщики (06.10.2026): «Собирает: …» — синий, «Собрал: … · N мин» — зелёный, как «собран» */
.tag-claim{--t-bg:#dbe6fb;--t-fg:#1b3a6b}
.tag-assembler{--t-bg:#dbeddb;--t-fg:#1c3829}
.tag-wait{--t-bg:#e8deee;--t-fg:#412454}
.ocard-hold{padding:6px 8px;background:#fffbea;border-radius:6px;font-size:13px;overflow-wrap:anywhere}
/* низ карточки: кнопка по колонке (board._action; «Начать сборку» — жёлтая) и меню «…» (<details>) */
.ocard-foot{display:flex;align-items:center;gap:4px;margin-top:2px}
/* узкая колонка — текст кнопки переносится, а не обрезается */
.ocard-act{flex:0 1 auto;min-width:0;display:inline-flex;align-items:center;gap:6px;padding:6px 10px 6px 8px;
  border-radius:8px;background:#f2f4f7;color:var(--text);font-size:13px;font-weight:600;line-height:1.25;
  text-decoration:none}
.ocard-act:hover{background:#e4e7ec}
.ocard-act .ico{flex:none;width:16px;height:16px}
.ocard-act.act-assemble{background:var(--accent);color:var(--on-accent)}
.ocard-act.act-assemble:hover{background:var(--accent);filter:brightness(.96)}
.ocard-more{position:relative;flex:none;margin-left:auto}
.ocard-more > summary{list-style:none}
.ocard-more > summary::-webkit-details-marker{display:none}
.ocard-dots{display:flex;align-items:center;justify-content:center;width:30px;height:30px;border-radius:8px;
  color:#475467;cursor:pointer}
.ocard-dots:hover,.ocard-more[open] > .ocard-dots{background:#f2f4f7;color:var(--text)}
.ocard-dots .ico{width:20px;height:20px}
/* не шире карточки самой узкой колонки (200 px): у первой колонки меню не обрезается краем доски */
.ocard-menu{position:absolute;z-index:15;right:0;top:calc(100% + 4px);display:flex;flex-direction:column;min-width:168px;
  padding:6px;background:var(--card);border:1px solid var(--line);border-radius:10px;
  box-shadow:0 8px 24px rgba(16,24,40,.15)}
.ocard-more.up .ocard-menu{top:auto;bottom:calc(100% + 4px)}
.ocard-menu a,.ocard-menu button{display:block;width:100%;padding:8px 10px;border-radius:6px;background:none;
  color:var(--text);font-size:14px;font-weight:400;line-height:1.4;text-align:left;text-decoration:none;white-space:nowrap}
.ocard-menu a:hover,.ocard-menu button:hover,.ocard-menu a:focus-visible,.ocard-menu button:focus-visible{background:var(--bg);filter:none}
.move-menu{position:absolute;z-index:20;background:var(--card);border:1px solid var(--line);border-radius:10px;
  box-shadow:0 8px 24px rgba(16,24,40,.15);padding:6px;display:flex;flex-direction:column;min-width:200px}
.move-menu button{background:none;color:var(--text);text-align:left;padding:8px 10px;border-radius:6px}
.move-menu button:hover,.move-menu button:focus-visible{background:var(--bg)}
#hold-dialog{border:0;border-radius:var(--radius);padding:20px;max-width:420px;width:calc(100% - 32px)}
#hold-dialog textarea{width:100%;box-sizing:border-box;font:inherit;padding:8px;border:1px solid var(--line);border-radius:8px}
#hold-dialog .until[hidden]{display:none}
#hold-dialog .error[hidden]{display:none}
/* ---- вкладки «Заказов» (устройство 06.10.2026): как вкладки браузера — соединены с содержимым, активная белая;
   поиск и фильтры — строкой под вкладками (.ofilters, устройство 07.10.2026) ---- */
/* шапка «Заказов» (макет владельца 08.10.2026): заголовок и подзаголовок; справа «Обновлено в» и «Обновить» */
.orders-head{display:flex;flex-wrap:wrap;align-items:flex-start;justify-content:space-between;gap:8px 16px;margin:0 0 14px}
.orders-title{min-width:0}
.orders-title h1{margin:0}
.orders-sub{margin:2px 0 0;color:var(--muted);font-size:15px}
.orders-live{display:flex;flex-wrap:wrap;align-items:center;gap:4px 12px;color:var(--muted);font-size:14px;white-space:nowrap}
.live{display:inline-flex;align-items:center;gap:8px}
.live-dot{flex:none;width:10px;height:10px;border-radius:50%;background:#12b76a}
/* последняя загрузка из Kaspi — серым мелким рядом с «Обновлено в» (как прежняя строка доски) */
.orders-kaspi{color:var(--muted);font-size:13px}
.icon-btn{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:10px;
  background:var(--card);color:var(--text);box-shadow:inset 0 0 0 1px var(--line);text-decoration:none}
.icon-btn:hover{background:var(--bg)}
/* вкладки — подчёркнутая активная (как вкладки страницы заказа), справа переключатель «Доска | Список» */
.otabs{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:8px 16px;margin:0 0 14px;
  box-shadow:inset 0 -1px 0 var(--line)}
.otabs-nav{flex:0 1 auto;display:flex;gap:8px;overflow-x:auto;overflow-y:hidden;min-width:0}
.otabs-nav a{display:inline-flex;align-items:center;gap:6px;padding:8px 14px 11px;border-bottom:3px solid transparent;
  color:#475467;text-decoration:none;font-size:15px;font-weight:600;white-space:nowrap}
.otabs-nav a:hover{color:var(--text)}
.otabs-nav a[aria-current="page"]{color:var(--text);border-bottom-color:var(--accent)}
.otabs-nav a.drop-ok{outline:2px dashed var(--accent-text);outline-offset:-3px}
.oview{display:flex;gap:6px;margin:0 0 8px}
.oview a{display:inline-flex;align-items:center;gap:8px;padding:9px 18px;border-radius:10px;background:var(--card);
  box-shadow:inset 0 0 0 1px var(--line);color:var(--text);text-decoration:none;font-size:14px;font-weight:600}
.oview a:hover{background:var(--bg)}
.oview a[aria-current="page"]{background:var(--accent);color:var(--on-accent);box-shadow:none}
.oview .ico{width:18px;height:18px}
.tab-count{display:inline-block;min-width:20px;padding:0 6px;border-radius:999px;background:#ffe2dd;color:#5d1715;
  font-size:12px;font-weight:600;line-height:1.6;text-align:center}
.tab-count[hidden]{display:none}
/* ---- строка поиска и фильтров под вкладками (устройство 07.10.2026): поиск, быстрые кнопки-«таблетки»,
   «Фильтры (N)» — панель поверх доски (не сдвигает её), ярлыки включённых фильтров с крестиком ---- */
.ofilters{margin:0 0 12px}
.ofilters-bar{display:flex;flex-wrap:wrap;align-items:center;gap:8px;position:relative}
/* строка (макет владельца 08.10.2026): поле с лупой (лупа — кнопка «Найти»), кнопки, «Фильтры (N)» справа */
.ofilters-search{position:relative;display:flex;align-items:center;margin:0;flex:1 1 360px;max-width:560px;min-width:0}
.ofilters-search input{flex:1;width:auto;min-width:0;margin:0;padding:10px 12px 10px 42px}
.ofilters-search .osearch-go{position:absolute;left:4px;top:50%;transform:translateY(-50%);display:flex;padding:6px;
  background:none;color:var(--muted)}
.osearch-go .ico{width:20px;height:20px}
.ofilters-quick{display:flex;flex-wrap:wrap;gap:8px}
.qbtn{display:inline-flex;align-items:center;gap:8px;padding:10px 16px;border:1px solid var(--line);border-radius:10px;
  background:var(--card);color:var(--text);text-decoration:none;font-size:14px;line-height:1.3;white-space:nowrap;cursor:pointer}
.qbtn .ico{width:18px;height:18px}
.qbtn:hover{border-color:var(--accent-text)}
.qbtn.on{background:var(--accent);border-color:var(--accent);color:var(--on-accent);font-weight:600}
.ofilters-panel{margin-left:auto}
.ofilters-panel > summary{list-style:none}
.ofilters-panel > summary::-webkit-details-marker{display:none}
/* панель «Фильтры» справа (устройство 08.10.2026, макет владельца): на всю высоту поверх затемнения, на телефоне —
   во всю ширину; заголовок и низ («Сбросить», «Применить фильтры») закреплены, середина прокручивается. Открывает
   <details> (и без скрипта); board.js держит фокус внутри и запрещает прокрутку страницы (html.ofl-lock).
   Слой — над строкой телефона (.mobilebar, 20), под меню разделов (.scrim 30, .side 40) */
.ofilters-scrim{position:fixed;inset:0;z-index:26;background:rgba(16,24,40,.45);cursor:default}
.ofilters-drawer{position:fixed;top:0;right:0;bottom:0;z-index:27;width:min(480px,100%);display:flex;flex-direction:column;
  background:var(--card);box-shadow:-12px 0 32px rgba(16,24,40,.18);color:var(--text)}
html.ofl-lock,html.ofl-lock body{overflow:hidden}
.ofl-head{flex:none;display:flex;align-items:flex-start;justify-content:space-between;gap:12px;padding:24px 28px 18px}
.ofl-head h2{margin:0;font-size:26px;line-height:1.2;font-weight:800}
.ofl-sub{margin:4px 0 0;color:var(--muted);font-size:15px}
.ofl-close{flex:none;display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;margin:-6px -10px 0 0;
  border-radius:10px;color:var(--muted)}
.ofl-close:hover{background:var(--bg);color:var(--text)}
.ofl-close .ico{width:22px;height:22px}
.ofilters-form{flex:1;min-height:0;display:flex;flex-direction:column;margin:0}
.ofl-body{flex:1;min-height:0;overflow:auto;overscroll-behavior:contain;padding:0 28px}
.ofilters-form fieldset{border:0;border-top:1px solid var(--line);padding:16px 0 18px;margin:0;min-width:0}
.ofilters-form legend{float:left;width:100%;padding:0;margin:0 0 12px;font-size:16px;font-weight:700;color:var(--text)}
.ofilters-form legend+*{clear:left}
.ofilters-form label{margin:0}
.ofilters-form input,.ofilters-form select{margin-top:6px}
/* кнопки «Любая / Сегодня / …» — переключатели формы под видом кнопок (работают без скрипта, стрелки — штатно) */
.ofl-seg{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}
.ofl-seg-btn{position:relative;display:block;margin:0;color:var(--text);font-size:14.5px;cursor:pointer}
.ofl-seg-btn input{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:pointer}
.ofl-seg-btn span{display:flex;align-items:center;justify-content:center;min-height:42px;padding:6px 4px;
  border:1px solid #d0d5dd;border-radius:9px;background:var(--card);text-align:center;line-height:1.2}
.ofl-seg-btn:hover span{border-color:var(--accent-text)}
.ofl-seg-btn input:checked+span{background:var(--accent);border-color:var(--accent);color:var(--on-accent);font-weight:600}
.ofl-seg-btn input:focus-visible+span{outline:2px solid var(--accent-text);outline-offset:2px}
.ofl-two{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:14px}
.ofl-price .ofl-two{margin-top:0}
.ofl-row{display:flex;flex-wrap:wrap;gap:10px 18px}
.ofl-check{display:flex;align-items:center;gap:8px;color:var(--text);font-size:14px;cursor:pointer;overflow-wrap:anywhere}
.ofl-check input{display:inline-block;width:18px;height:18px;margin:0;flex:none;accent-color:var(--accent-text)}
.ofilters-form .ofl-check input{margin:0}
.ofl-city-find{position:relative;margin-bottom:8px}
.ofl-city-find .ico{position:absolute;left:13px;top:50%;width:18px;height:18px;transform:translateY(-50%);color:var(--muted);
  pointer-events:none}
.ofl-city-find[hidden]{display:none}
.ofilters-form .ofl-city-search{margin:0;padding-left:40px}
.ofl-list{display:flex;flex-direction:column;gap:8px;max-height:180px;overflow:auto;padding:2px}
.ofl-check[hidden]{display:none}
.ofl-hint{margin:8px 0 0;color:var(--muted);font-size:13px}
.ofl-tags .ofl-row{gap:10px 16px}
.ofl-tags-link{display:inline-block;margin-top:10px;font-size:14px}
.ofl-tags-none{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:6px 16px;padding:12px 14px;
  border:1px solid var(--line);border-radius:9px}
.ofl-none{margin:0;color:var(--muted);font-size:14px}
.ofl-tags-none a{font-size:14px}
.ofilters-actions{flex:none;display:grid;grid-template-columns:1fr 1fr;gap:12px;padding:16px 28px;
  border-top:1px solid var(--line);background:var(--card)}
.ofl-reset,.ofl-apply{display:flex;align-items:center;justify-content:center;min-height:48px;padding:10px 12px;border-radius:10px;
  font-size:15px;font-weight:700;text-align:center;text-decoration:none}
.ofl-reset{background:var(--card);color:var(--text);box-shadow:inset 0 0 0 1.5px var(--text)}
.ofl-reset:hover{background:var(--bg)}
.ofl-apply{background:var(--accent);color:var(--on-accent)}
@media (max-width:599px){
  .ofilters-drawer{width:100%;box-shadow:none}
  .ofl-head{padding:18px 16px 14px}
  .ofl-head h2{font-size:22px}
  .ofl-body{padding:0 16px}
  .ofilters-actions{padding:12px 16px}
  .ofl-seg{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (prefers-reduced-motion:no-preference){
  .ofilters-panel[open] .ofilters-drawer{animation:ofl-in .2s ease}
  .ofilters-panel[open] .ofilters-scrim{animation:ofl-fade .2s ease}
}
@keyframes ofl-in{from{transform:translateX(100%)}to{transform:none}}
@keyframes ofl-fade{from{opacity:0}to{opacity:1}}
.ofilters-chips{display:flex;flex-wrap:wrap;gap:6px;align-items:center;margin-top:8px}
.chip{display:inline-flex;align-items:center;gap:4px;max-width:100%;padding:2px 2px 2px 10px;border-radius:999px;
  background:#dbe6fb;color:#1b3a6b;font-size:13px;line-height:1.5;overflow-wrap:anywhere}
.chip a{color:inherit;text-decoration:none;font-weight:700;padding:0 7px;border-radius:999px}
.chip a:hover{background:#c3d5f7}
.ofilters-reset{font-size:14px}
.ofilters-elsewhere{margin:8px 0 0;font-size:14px;color:var(--muted)}
.ofilters-note{margin:-4px 0 14px;color:var(--muted);font-size:13px}
#board-status{margin:0 0 10px}
#board-status:empty{display:none}
/* меню «Теги» на карточке — как «Переместить в…», с галочками */
.tag-menu{position:absolute;z-index:20;background:var(--card);border:1px solid var(--line);border-radius:10px;
  box-shadow:0 8px 24px rgba(16,24,40,.15);padding:6px;display:flex;flex-direction:column;min-width:200px;max-width:280px;
  max-height:50vh;overflow:auto}
.tag-menu label{display:flex;align-items:center;gap:8px;margin:0;padding:6px 8px;border-radius:6px;color:var(--text);cursor:pointer}
.tag-menu label:hover,.tag-menu label:focus-within{background:var(--bg)}
.tag-menu input{display:inline-block;width:auto;margin:0;flex:none}
.tag-menu .note{margin:0;padding:6px 8px;font-size:14px}
@media (max-width:899px){
  .ofilters-search{flex:1 1 100%;max-width:none}
  .oview a{padding:8px 14px}
}
/* «Проблемные» — карточки сеткой во всю ширину; полоска карточки — цвет «Проблемы» */
.problems{--c-dot:#f04438}
.problems-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:12px;align-items:start}
.problems .empty{padding:16px 4px}
/* страница заказа: пометка «Проблема» / «Ждём товар», галочка «Отметить проблему» */
.order-hold{margin:0 0 4px;padding:8px 10px;background:#fffbea;border-radius:8px;white-space:pre-line;overflow-wrap:anywhere}
.problem-check{display:flex;align-items:center;gap:8px;margin:0 0 8px;color:var(--text);font-size:15px;font-weight:600}
.problem-check input{display:inline-block;width:20px;height:20px;margin:0}
.problem-fields textarea{width:100%;box-sizing:border-box;font:inherit;padding:8px;border:1px solid var(--line);border-radius:8px}
.problem-fields[hidden]{display:none}
/* ---- свои теги заказов (устройство 07.10.2026): ярлык-«таблетка» (круглые края — отличие от системных стикеров),
   палитра из 10 мягких цветов как в Notion; пары фон/текст — контраст ≥ 4,5:1 (тест test_css_palette_readable).
   Длинное имя обрезается многоточием, целиком — в тексте страницы ---- */
.otag{border-radius:999px;max-width:14em;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;vertical-align:top}
.tag-c-gray{--t-bg:#e3e2e0;--t-fg:#32302c}
.tag-c-brown{--t-bg:#eee0da;--t-fg:#442a1e}
.tag-c-orange{--t-bg:#fadec9;--t-fg:#49290e}
.tag-c-yellow{--t-bg:#fdecc8;--t-fg:#402c1b}
.tag-c-green{--t-bg:#dbeddb;--t-fg:#1c3829}
.tag-c-teal{--t-bg:#ccebe6;--t-fg:#0f3d38}
.tag-c-blue{--t-bg:#d3e5ef;--t-fg:#183347}
.tag-c-purple{--t-bg:#e8deee;--t-fg:#412454}
.tag-c-pink{--t-bg:#f5e0e9;--t-fg:#4c2337}
.tag-c-red{--t-bg:#ffe2dd;--t-fg:#5d1715}
/* страница заказа: теги — кнопками; не поставленный — белый с рамкой своего цвета */
.tag-forms{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 8px}
.tag-forms form{margin:0}
button.tag-toggle{font-size:13px;padding:4px 12px;max-width:16em}
button.tag-toggle[aria-pressed="false"]{background:var(--card);box-shadow:inset 0 0 0 1px var(--t-fg)}
/* страница «Теги»: выбор цвета — переключатели на ярлыках */
.tag-palette{display:flex;flex-wrap:wrap;gap:6px;border:0;padding:0;margin:12px 0}
.tag-palette legend{padding:0;margin-bottom:4px;font-size:14px;color:var(--muted)}
.tag-palette label.tag{display:inline-flex;align-items:center;gap:4px;margin:0;padding:2px 10px;font-size:13px;color:var(--t-fg);max-width:none}
.tag-palette input{display:inline-block;width:auto;margin:0}
/* ---- «Продажи Kaspi» по макетам владельца (устройство 08.10.2026 «Продажи Kaspi в новом дизайне»): шапка с периодом,
   вкладки-ссылки, карточки с таблицами; страницы и поиск таблиц — static/tables.js. Всё — под main.sales, чтобы не
   задеть «Аналитику сайта» (она тоже использует .period). Жёлтый — фирменный --accent магазина ---- */
.content main.full.sales,.content main.full.analytics{max-width:1440px;padding:24px 28px 40px}
main.sales [hidden],main.analytics [hidden]{display:none !important}  /* у переключателя, поиска и блока страниц свой display */
/* общие правила для static/tables.js на любой странице (там, где у элемента свой display, hidden иначе не сработает) */
tbody tr[hidden],[data-pager-for][hidden],[data-switch][hidden],.tsearch[hidden]{display:none !important}
[data-group-for][hidden]{display:none !important}
.sales-head{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px 20px;margin:0 0 12px}
.sales-title{min-width:0}
.sales-title h1{margin:0;font-size:30px;font-weight:800;letter-spacing:-.3px}
.sales-sub{margin:2px 0 0;color:var(--muted);font-size:15px}
.sales-tools{display:flex;flex-wrap:wrap;align-items:center;gap:10px 16px;min-width:0}
/* поле периода: <details> с формой «С / По / Показать» (GET, работает без скрипта) */
.srange{position:relative}
.srange>summary{list-style:none;display:flex;align-items:center;gap:10px;padding:10px 14px;border:1px solid var(--line);
  border-radius:12px;background:var(--card);box-shadow:var(--shadow);cursor:pointer;font-size:15px;font-weight:500;
  white-space:nowrap;font-variant-numeric:tabular-nums}
.srange>summary::-webkit-details-marker{display:none}
.srange>summary .ico{width:18px;height:18px}
.srange[open]>summary .ico:last-child{transform:rotate(180deg)}
.srange-label{flex:1}
.srange-form{position:absolute;z-index:15;top:calc(100% + 6px);left:0;display:flex;flex-wrap:wrap;align-items:flex-end;
  gap:10px;width:max-content;max-width:calc(100vw - 32px);margin:0;padding:14px;background:var(--card);
  border:1px solid var(--line);border-radius:12px;box-shadow:0 8px 24px rgba(16,24,40,.15)}
.srange-field{display:flex;flex-direction:column;gap:4px;margin:0;color:var(--muted);font-size:13px}
.srange-field input{width:auto;margin:0;padding:8px 10px}
.srange-go{font-weight:600}
main.sales .period,main.analytics .period{margin:0;padding:4px;border-radius:12px}
main.sales .period a,main.analytics .period a{padding:7px 16px;border-radius:9px}
.supdated{display:flex;align-items:center;gap:6px;margin:0;color:var(--muted);font-size:14px;white-space:nowrap}
.supdated .ico{width:18px;height:18px}
/* вкладки — подчёркнутая активная, как у «Заказов» */
.stabs{display:flex;gap:8px;overflow-x:auto;overflow-y:hidden;margin:0 0 18px;box-shadow:inset 0 -1px 0 var(--line)}
.stabs a{flex:none;padding:8px 14px 11px;border-bottom:3px solid transparent;color:#475467;text-decoration:none;
  font-size:15px;font-weight:600;white-space:nowrap}
.stabs a:hover{color:var(--text)}
.stabs a[aria-current="page"]{color:var(--text);border-bottom-color:var(--accent)}
.sales-bad{margin:0 0 14px;padding:10px 14px;border:1px solid #f5d77a;border-radius:10px;background:#fffbea;color:var(--warn)}
/* сетка карточек */
.sblock{margin:0 0 18px}
.sgrid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:18px;align-items:start;margin:0 0 18px}
.sgrid-wide{grid-template-columns:minmax(0,1.45fr) minmax(0,1fr)}
.scol{display:flex;flex-direction:column;gap:18px;min-width:0}
.scard{min-width:0;padding:18px 18px 16px;background:var(--card);border:1px solid var(--line);border-radius:14px;box-shadow:var(--shadow)}
main.sales > .scard,main.analytics > .scard{margin:0 0 18px}
.scard-h{display:flex;align-items:center;gap:12px;margin:0 0 14px;font-size:18px;font-weight:700;line-height:1.3}
.scard-h .ico{width:24px;height:24px}
.scard-top{display:flex;flex-wrap:wrap;align-items:center;gap:10px 16px;margin:0 0 14px}
.scard-top .scard-h{margin:0}
.scard-sub{margin:2px 0 0 40px;color:var(--muted);font-size:14px}
.snote{margin:10px 0 0;color:var(--muted);font-size:13.5px}
/* таблицы в карточках: рамка, серая шапка; на телефоне прокручиваются внутри (.table-wrap) */
.scard .table-wrap{border:1px solid var(--line);border-radius:10px}
.stable th{background:#f8f9fb;font-weight:500}
.stable td{padding:10px 14px}
.stable th .ico{width:14px;height:14px;margin-left:4px;vertical-align:-2px}
.stable tr.top td{background:#fff8db;font-weight:700}
.scard .empty{padding:4px 0}
/* плитки «Обзора» */
.stiles{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:16px}
.stile{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:6px 14px;padding:18px 20px;
  background:var(--card);border:1px solid var(--line);border-radius:14px;box-shadow:var(--shadow);min-width:0}
.stile .ico{width:26px;height:26px}
.stile .k{color:#344054;font-size:15px;line-height:1.3}
.stile .v{grid-column:2;font-size:26px;font-weight:800;line-height:1.15;font-variant-numeric:tabular-nums;
  overflow-wrap:anywhere}
.stile-y{background:#fff8db;border-color:#f5d77a}
.stile-y .ico{color:#d4a600}
.stile-red .ico,.scancel-title .scard-h .ico{color:#e5484d}
.stile-blue .ico{color:#3b6fd8}
/* «Отмены и возвраты»: две красные плашки справа */
.scancel-title{flex:1 1 260px;min-width:0}
.splates{display:flex;flex-wrap:wrap;gap:10px}
.splate-red{display:flex;align-items:center;gap:12px;margin:0;padding:8px 18px 8px 14px;border-radius:10px;background:#fef0f0;color:#c4320a}
.splate-red .ico{width:24px;height:24px}
.splate-red>span{display:flex;flex-direction:column;font-size:13px;line-height:1.25}
.splate-red b{font-size:17px;font-variant-numeric:tabular-nums}
/* «Товары»: переключатель, поиск, № жёлтым квадратом, значок «открыть», лидер */
.seg{display:inline-flex;gap:4px;padding:4px;border:1px solid var(--line);border-radius:12px;background:var(--card)}
.seg button{padding:8px 18px;border-radius:9px;background:transparent;color:var(--text);font-size:14px}
.seg button.on{background:var(--accent);color:var(--on-accent);font-weight:600}
.tsearch{position:relative;display:flex;align-items:center;flex:1 1 200px;max-width:260px;margin:0 0 0 auto}
.tsearch .ico{position:absolute;left:12px;width:18px;height:18px;color:var(--muted);pointer-events:none}
.tsearch input{margin:0;padding:9px 12px 9px 38px}
.tsearch-wide{max-width:none;margin:0 0 14px}
main.sales .pane-title{margin:16px 0 8px;font-size:15px}
.switch-on .pane-title{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.stop td{vertical-align:middle}
.stop .rank{width:52px}
.rank-n{display:inline-flex;align-items:center;justify-content:center;min-width:32px;height:32px;padding:0 6px;
  border-radius:8px;background:#fff3c4;font-weight:700;font-variant-numeric:tabular-nums}
.stop .ptitle{position:relative;min-width:220px;padding-right:46px}
.ext{display:inline-flex;color:var(--muted)}
.ext:hover{color:var(--text)}
.ext .ico{width:18px;height:18px}
.ptitle .ext{position:absolute;top:50%;right:14px;transform:translateY(-50%)}
.leader{display:flex;gap:20px;padding:16px 20px;border:1px solid var(--line);border-radius:12px}
.leader-main{flex:1;min-width:0}
.leader-side{flex:none;padding-left:20px;border-left:1px solid var(--line)}
.leader-t{display:flex;align-items:center;gap:8px;margin:0 0 4px;color:#344054;font-size:16px;overflow-wrap:anywhere}
.leader-v{font-size:30px;font-weight:800;line-height:1.2;white-space:nowrap;font-variant-numeric:tabular-nums}
/* «География и доставка»: жёлтая плашка «Kaspi Доставка» */
.kplate{margin:14px 0 0;padding:14px 16px;border:1px solid #f5d77a;border-radius:12px;background:#fff8db}
.kplate-row{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 24px;margin:0;font-size:17px;font-variant-numeric:tabular-nums}
.kplate-t{flex:1 1 auto}
.kplate-sub{margin:6px 0 0;color:var(--muted);font-size:14px}
/* «Клиенты и сайт» */
.sbig{display:grid;grid-template-columns:auto minmax(0,1fr);column-gap:18px}
.sbig-ico{display:flex;align-items:center;justify-content:center;width:56px;height:56px;border-radius:50%}
.sbig-ico .ico{width:28px;height:28px}
.sbig-blue{background:#eaf2ff;color:#3b6fd8}
.sbig-yellow{background:#fff3c4;color:#c69500}
.sbig-body{min-width:0}
.sbig-body .scard-h{margin:4px 0 6px}
.sbig-v{display:block;font-size:40px;font-weight:800;line-height:1.15;white-space:nowrap;font-variant-numeric:tabular-nums}
.sbig-strong{margin:4px 0 0;font-weight:700}
.sbig-muted{margin:2px 0 0;color:var(--muted)}
.sbig-foot{grid-column:1/-1;margin:14px 0 0;padding-top:12px;border-top:1px solid var(--line)}
.sbig-head{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px}
.sbig-head .scard-h{margin:4px 0}
.sbadge{padding:5px 12px;border:1px solid #f5d77a;border-radius:8px;background:#fff8db;font-size:14px;font-weight:500}
.sbig-cols{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:14px}
.sbig-cols>div{min-width:0}
.sbig-cols>div+div{padding-left:16px;border-left:1px solid var(--line)}
.splate-y{display:flex;align-items:center;gap:14px;margin:0 0 18px;padding:14px 18px;border:1px solid #f5d77a;border-radius:12px;
  background:#fff8db;font-size:15px}
.splate-y .ico{flex:none;width:26px;height:26px;color:#d4a600}
.sempty{padding:4px 0 6px;text-align:center}
.sempty-ico{display:inline-flex;align-items:center;justify-content:center;width:56px;height:56px;border-radius:50%;
  background:var(--bg);color:var(--muted)}
.sempty-ico .ico{width:26px;height:26px}
.sempty-t{margin:8px 0 2px;font-size:17px;font-weight:600}
.sempty-sub{margin:0;color:var(--muted);font-size:14px}
.slock{display:flex;align-items:center;gap:12px;margin:0;padding:14px 18px;background:var(--card);border:1px solid var(--line);
  border-radius:14px;color:var(--muted);font-size:14px}
.slock .ico{flex:none;width:22px;height:22px;color:var(--text)}
/* блок страниц таблицы (tables.js): «Строк на странице» и кнопки */
.tpager{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px 16px;margin:14px 0 0}
.tpager-size{display:flex;align-items:center;gap:8px;margin:0;color:var(--muted);font-size:14px}
.tpager-size select{display:inline-block;width:auto;margin:0;padding:6px 10px}
.tpager-pages{display:flex;flex-wrap:wrap;gap:8px;margin-left:auto}
.tpage{min-width:40px;height:40px;padding:0 10px;border-radius:9px;background:var(--card);color:var(--text);
  box-shadow:inset 0 0 0 1px var(--line);font-weight:600;font-variant-numeric:tabular-nums}
.tpage.on{background:var(--accent);color:var(--on-accent);box-shadow:none}
.tgap{align-self:center;color:var(--muted)}
.sales-foot{margin:18px 0 0;color:var(--muted);font-size:14px}
.sales-foot p{margin:0 0 4px}
@media (max-width:1199px){
  .stiles{grid-template-columns:repeat(3,minmax(0,1fr))}
  .sgrid-wide{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:999px){.sgrid{grid-template-columns:minmax(0,1fr)}}
@media (max-width:899px){
  .content main.full.sales,.content main.full.analytics{padding:20px 16px 40px}
  .sales-title h1{font-size:24px}
  .sales-tools{width:100%}
  main.sales .period{flex:1 1 100%}
  main.sales .period a{padding:8px 4px}
}
@media (max-width:599px){
  .stiles{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .stile{grid-template-columns:minmax(0,1fr);padding:14px}
  .stile .v{grid-column:1;font-size:20px}
  .srange{flex:1 1 100%}
  .srange-form{right:0;width:auto}
  .srange-field{flex:1 1 130px}
  .srange-field input{width:100%}
  .tsearch{flex-basis:100%;max-width:none;margin:0}
  .scard-sub{margin-left:0}
  .leader{flex-direction:column}
  .leader-side{padding:12px 0 0;border-left:0;border-top:1px solid var(--line)}
  .sbig{grid-template-columns:minmax(0,1fr)}
  .sbig-ico{width:48px;height:48px;margin-bottom:8px}
  .sbig-v{font-size:30px;white-space:normal}
  .sbig-cols{grid-template-columns:minmax(0,1fr)}
  .sbig-cols>div+div{padding-left:0;border-left:0}
  .tpager-pages{margin-left:0}
}
/* ---- «Аналитика сайта» по макетам владельца 31/26/25 (устройство 08.10.2026): шапка, плитки, карточки, таблицы и
   страницы — общие с «Продажами» (.sales-head, .srange, .scard, .stable, .tsearch, .tpager; правила main.analytics
   рядом с main.sales); ниже — только своё ---- */
.abar{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px 20px;margin:0 0 18px}
/* вкладки — кнопки-ссылки в общей рамке, у текущей жёлтая черта снизу */
.atabs{display:flex;max-width:100%;overflow-x:auto;overflow-y:hidden;background:var(--card);border:1px solid var(--line);
  border-radius:12px;box-shadow:var(--shadow)}
.atabs a{flex:none;padding:11px 26px 9px;border-bottom:3px solid transparent;color:var(--text);text-decoration:none;
  font-size:15px;white-space:nowrap}
.atabs a+a{box-shadow:inset 1px 0 0 var(--line)}
.atabs a:hover{background:var(--bg)}
.atabs a[aria-current="page"]{font-weight:700;border-bottom-color:var(--accent)}
/* плитки: четыре в ряд и две широкие */
.atiles{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
.atiles+.atiles{margin-top:16px}
.atiles-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.atiles .stile{align-content:start}
.atiles-2 .stile{align-content:center}
.atile-sub{grid-column:2;color:#475467;font-size:14px}
.atile-wide{grid-template-columns:auto auto minmax(0,1fr);column-gap:14px}
.atile-wide .ico{grid-row:1/3}
.atile-wide .k{grid-column:2/-1}
.atile-wide .v{grid-column:2}
.atile-x{align-self:end;padding-bottom:4px;color:var(--muted);font-size:14px}
/* карточки */
main.analytics .stable td{vertical-align:middle}
.atitle{flex:1 1 220px;min-width:0}
.atitle .scard-h{margin:0}
.atitle+.tsearch-wide,.atitle+.aseg{margin-top:14px}
.atitle+.table-wrap,.atitle+.empty{margin-top:14px}
.atotal{margin-left:auto;color:#475467;font-weight:600;font-variant-numeric:tabular-nums}
.stable tfoot th,.stable tfoot td{background:#f8f9fb;font-weight:700;color:var(--text);font-size:inherit}
.ainfo{display:flex;align-items:flex-start;gap:14px}
.ainfo>.ico{flex:none;width:26px;height:26px;color:#475467}
.ainfo-h{margin:0 0 4px;font-size:16px;font-weight:700}
.ainfo-t{margin:0;color:#475467;font-size:14.5px}
.abadge{padding:5px 12px;border-radius:999px;background:#ffe27a;font-size:13px;font-weight:500}
.aexclude{display:flex;flex-wrap:wrap;align-items:center;gap:8px 16px;margin:0}
.abtn{display:inline-flex;align-items:center;gap:10px;padding:10px 18px;background:var(--card);border:1px solid var(--line);
  border-radius:10px;box-shadow:var(--shadow);color:var(--text);text-decoration:none;font-weight:500}
.abtn:hover{border-color:#98a2b3}
.abtn .ico{width:20px;height:20px}
.aexclude-t{color:var(--muted);font-size:14px;overflow-wrap:anywhere}
/* «Товары и действия» */
.agrid-products{grid-template-columns:minmax(0,1.2fr) minmax(0,1fr)}
.arank{width:44px;color:#344054;font-variant-numeric:tabular-nums}
.aprod span{margin-right:8px}
.aprod .ext{vertical-align:-3px}
.ahint{display:flex;align-items:center;gap:8px;margin:0;color:var(--muted);font-size:13.5px}
.ahint .ico{flex:none;width:20px;height:20px}
.ahint-foot{margin-top:14px}
.aact{display:inline-flex;align-items:center;gap:14px}
.aact .ico{flex:none;width:22px;height:22px}
/* «Поиск и фильтры» */
.aseg{margin-bottom:14px}
.achip{display:inline-block;padding:3px 10px;border:1px solid var(--line);border-radius:7px;background:#f2f4f7;
  color:#344054;font-size:13px;white-space:nowrap}
@media (max-width:1199px){
  .atiles{grid-template-columns:repeat(2,minmax(0,1fr))}
  .agrid-products{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:899px){
  .abar>*{flex:1 1 100%}
  main.analytics .period a{flex:1;padding:8px 4px;text-align:center}
  .atabs a{flex:1 0 auto;padding:10px 14px 8px;text-align:center}
}
@media (max-width:599px){
  .atabs{flex-wrap:wrap}
  .atabs a{box-shadow:inset 0 -1px 0 var(--line)}
  .atabs a+a{box-shadow:inset 1px 0 0 var(--line),inset 0 -1px 0 var(--line)}
  .atiles{gap:10px}
  .atiles+.atiles{margin-top:10px}
  .atiles-2{grid-template-columns:minmax(0,1fr)}
  .atile-wide{grid-template-columns:minmax(0,1fr) auto}
  .atile-wide .ico{grid-row:auto}
  .atile-wide .k{grid-column:1/-1}
  .atile-wide .v{grid-column:1}
  .atile-sub{grid-column:1}
  .ahint{flex-basis:100%}
}