:root{
  /* палитра снята с dogigo.ru: тёплый крем, графитовый акцент как кнопки сайта, беж-тан */
  --font-display:'Montserrat',system-ui,sans-serif;
  --font-ui:'Open Sans',system-ui,sans-serif;
  --r:14px; --r-sm:10px; --r-pill:999px;
  --paper:#f8f3ee; --card:#ffffff; --card-2:#f4ede4;
  --ink:#242222; --ink-2:#726d6d; --ink-3:#a0a0a0;
  --line:rgba(36,34,34,.10); --line-2:rgba(36,34,34,.18);
  --brand:#2a2522; --brand-ink:#40312e; --brand-bg:rgba(180,138,96,.18);
  --seg-on:#4d453f;   /* активная крупная кнопка — чуть светлее графита, не «чёрная» */
  --danger:#b0463d; --danger-bg:rgba(176,70,61,.10);
  --warn:#a9791a; --warn-bg:rgba(224,183,90,.20);
  --ok:#5a7d4e; --ok-bg:rgba(90,125,78,.13);
  --shadow:0 1px 2px rgba(64,49,46,.05), 0 6px 20px -12px rgba(64,49,46,.20);
}
[data-theme="dark"]{
  --paper:#181615; --card:#242220; --card-2:#2c2a27;
  --ink:#f5efe8; --ink-2:#b3aaa1; --ink-3:#7d746b;
  --line:rgba(255,255,255,.08); --line-2:rgba(255,255,255,.16);
  --brand:#8f7154; --brand-ink:#dcc3a3; --brand-bg:rgba(220,195,163,.15);
  --seg-on:#9b7e60;   /* в тёмной теме бренд и так светлый — активная чуть теплее */
  --danger:#d98a80; --danger-bg:rgba(200,110,100,.16);
  --warn:#d8b25a; --warn-bg:rgba(216,178,90,.16);
  --ok:#8fae7a; --ok-bg:rgba(143,174,122,.15);
  --shadow:0 1px 2px rgba(0,0,0,.35), 0 8px 24px -14px rgba(0,0,0,.6);
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{
  font-family:var(--font-ui); background:var(--paper); color:var(--ink);
  -webkit-font-smoothing:antialiased; font-size:15px; line-height:1.45;
  font-variant-numeric:tabular-nums;
}
h1,h2,h3{font-weight:600; letter-spacing:-.01em}
button{font-family:inherit; cursor:pointer; border:none; background:none; color:inherit}
.num{font-variant-numeric:tabular-nums}

/* ---------- shell ---------- */
.app{display:grid; grid-template-columns:1fr; min-height:100dvh}
.rail{display:none}
.main{display:flex; flex-direction:column; min-width:0}
.topbar{
  position:sticky; top:0; z-index:20; display:flex; align-items:center; justify-content:space-between;
  gap:12px; padding:14px 18px calc(14px + env(safe-area-inset-top,0)); background:color-mix(in srgb, var(--paper) 86%, transparent);
  backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px); border-bottom:1px solid var(--line);
}
.topbar-title h1{font-size:21px; line-height:1.1}
.topbar-title p{font-size:12.5px; color:var(--ink-2); margin-top:2px}
.topbar-right{display:flex; align-items:center; gap:12px}
.avatar{
  width:38px; height:38px; border-radius:var(--r-pill); display:grid; place-items:center;
  background:var(--brand-bg); color:var(--brand-ink); font-weight:600; font-size:13px; letter-spacing:.02em;
}
.theme-btn{width:38px; height:38px; border-radius:var(--r-pill); border:1px solid var(--line); color:var(--ink-2); display:grid; place-items:center}
.theme-btn:hover{background:var(--card-2); color:var(--ink)}
.theme-btn svg{width:19px; height:19px}

.screens{flex:1; padding:16px 18px 96px; max-width:760px; width:100%; margin:0 auto}
.screen{display:none; animation:rise .38s cubic-bezier(.2,.7,.2,1) both}
.screen.on{display:block}
@keyframes rise{from{opacity:0; transform:translateY(8px)}to{opacity:1; transform:none}}
.screen>*{animation:rise .42s cubic-bezier(.2,.7,.2,1) both}
.screen.on>*:nth-child(1){animation-delay:.02s}
.screen.on>*:nth-child(2){animation-delay:.06s}
.screen.on>*:nth-child(3){animation-delay:.1s}
.screen.on>*:nth-child(4){animation-delay:.14s}
.screen.on>*:nth-child(5){animation-delay:.18s}

.sec-label{font-size:12px; font-weight:500; color:var(--ink-3); text-transform:lowercase; letter-spacing:.02em; margin:22px 2px 10px}
.sec-label:first-child{margin-top:4px}

/* ---------- cards ---------- */
.card{background:var(--card); border:1px solid var(--line); border-radius:var(--r); box-shadow:var(--shadow)}

/* signals */
.signals{display:flex; flex-direction:column; gap:9px}
.signal{display:flex; align-items:center; gap:12px; padding:13px 14px; border-radius:var(--r); border:1px solid transparent; text-align:left; width:100%; transition:transform .12s}
.signal:active{transform:scale(.99)}
.signal .ic{width:34px; height:34px; border-radius:10px; display:grid; place-items:center; flex-shrink:0}
.signal .ic svg{width:19px; height:19px}
.signal>span:not(.ic):not(.go){min-width:0}
.signal .st{display:block; font-weight:500; font-size:14.5px}
.signal .ss{display:block; font-size:12.5px; color:var(--ink-2); margin-top:1px}
.signal .go{margin-left:auto; color:var(--ink-3)}
.signal .go svg{width:18px; height:18px; display:block}
.sig-danger{background:var(--danger-bg); border-color:color-mix(in srgb,var(--danger) 22%,transparent)}
.sig-danger .ic{background:color-mix(in srgb,var(--danger) 16%,transparent); color:var(--danger)}
.sig-danger .st{color:var(--danger)}
.sig-warn{background:var(--warn-bg); border-color:color-mix(in srgb,var(--warn) 24%,transparent)}
.sig-warn .ic{background:color-mix(in srgb,var(--warn) 18%,transparent); color:var(--warn)}
.sig-warn .st{color:var(--warn)}
.sig-brand{background:var(--brand-bg); border-color:color-mix(in srgb,var(--brand) 20%,transparent)}
.sig-brand .ic{background:color-mix(in srgb,var(--brand) 15%,transparent); color:var(--brand-ink)}
.sig-brand .st{color:var(--brand-ink)}

/* kpi */
.kpis{display:grid; grid-template-columns:1fr 1fr; gap:11px}
.kpi{padding:16px 16px 15px; border-radius:var(--r); background:var(--card); border:1px solid var(--line); box-shadow:var(--shadow); position:relative; overflow:hidden}
.kpi.accent{background:linear-gradient(180deg,var(--brand) 0%, color-mix(in srgb,var(--brand) 88%, #000) 100%); border-color:transparent}
.kpi .k-label{font-size:12.5px; color:var(--ink-2)}
.kpi.accent .k-label{color:rgba(255,255,255,.78)}
.kpi .k-val{font-family:var(--font-display); font-weight:600; font-size:23px; letter-spacing:-.03em; margin-top:8px; line-height:1; white-space:nowrap}
.kpi.accent .k-val{color:#fff}
.kpi .k-val .est{color:var(--ink-3); font-weight:500}
.kpi.accent .k-val .est{color:rgba(255,255,255,.6)}
.kpi .k-delta{font-size:12px; margin-top:8px; display:inline-flex; align-items:center; gap:4px; color:var(--ok)}
.kpi.accent .k-delta{color:rgba(255,255,255,.85)}
.kpi .k-delta svg{width:13px; height:13px}

/* tasks */
.tasks{display:flex; flex-direction:column}
.task{display:flex; align-items:center; gap:12px; padding:13px 2px; border-top:1px solid var(--line); cursor:pointer}
.task:first-child{border-top:none}
.task .box{width:19px; height:19px; border-radius:6px; border:1.6px solid var(--line-2); flex-shrink:0; display:grid; place-items:center; transition:.15s}
.task .box svg{width:12px; height:12px; opacity:0; color:#fff}
.task.done .box{background:var(--brand); border-color:var(--brand)}
.task.done .box svg{opacity:1}
.task .t-tx{font-size:14.5px; transition:.15s}
.task.done .t-tx{color:var(--ink-3); text-decoration:line-through}
.task .tag{margin-left:auto; font-size:11px; color:var(--ink-2); border:1px solid var(--line); border-radius:var(--r-pill); padding:2px 10px; white-space:nowrap}

/* chips */
.chips{display:flex; gap:8px; flex-wrap:wrap; margin-bottom:14px}
.chip{font-size:12.5px; padding:6px 13px; border-radius:var(--r-pill); border:1px solid var(--line); color:var(--ink-2); background:var(--card); transition:.14s}
.chip:hover{border-color:var(--line-2)}
.chip.on{background:var(--brand); color:#fff; border-color:var(--brand)}

/* list items (products, orders) */
.list{background:var(--card); border:1px solid var(--line); border-radius:var(--r); box-shadow:var(--shadow); overflow:hidden}
.row{padding:14px 15px; border-top:1px solid var(--line); cursor:pointer; transition:background .14s}
.row:first-child{border-top:none}
.row:hover{background:var(--card-2)}
/* добавление последней строкой списка: пунктир отделяет действие от данных */
.add-row{display:flex; align-items:center; gap:7px; width:100%; padding:12px 15px; text-align:left;
  font-size:13px; font-weight:500; color:var(--ink-2); border-top:1px dashed var(--line-2); transition:.14s}
.add-row:hover{background:var(--card-2); color:var(--ink)}
.add-row .ar-ic{width:15px; height:15px; flex-shrink:0}
.row-head{display:flex; align-items:center; gap:10px}
.row-name{font-weight:500; font-size:14.5px}
.row-sub{font-size:12.5px; color:var(--ink-2); margin-top:3px}
.badge{font-size:11px; font-weight:500; padding:3px 9px; border-radius:var(--r-pill); margin-left:auto; white-space:nowrap}
.b-in{background:var(--ok-bg); color:var(--ok)}
.b-low{background:var(--warn-bg); color:var(--warn)}
.b-neut{background:var(--brand-bg); color:var(--brand-ink)}
.b-zero{background:var(--card-2); color:var(--ink-3)}
.row-r{margin-left:auto; display:flex; align-items:center; gap:8px}
.row-r .badge{margin-left:0}
/* название позиции — своя цель нажатия: открывает карточку, остальная строка ведёт в историю */
.spec-nm{border-bottom:1px dashed var(--line-2); transition:.14s}
.spec-nm:hover{border-bottom-color:var(--brand); color:var(--brand-ink)}
/* карточка товара в спецификации: шапка с названием и тиражом, под ней — состав */
.prod-card{margin-bottom:12px}
.prod-hd{display:flex; align-items:center; gap:10px; padding:14px 15px;
  background:var(--card-2); border-bottom:1px solid var(--line)}
.prod-hd .ph-name{font-family:var(--font-display); font-weight:600; font-size:15px}
.prod-hd .badge{margin-left:auto}
.prod-hd[data-edit-spec-plan]{cursor:pointer; transition:background .14s}
.prod-hd[data-edit-spec-plan]:hover{background:var(--card)}
/* рубеж «итого»: отделяет сводку по партии от карточек товаров */
.total-hd{display:flex; align-items:baseline; gap:10px; flex-wrap:wrap;
  margin:28px 2px 2px; padding-top:20px; border-top:2px solid var(--line-2)}
.total-hd b{font-family:var(--font-display); font-size:16px; font-weight:700}
.total-hd span{font-size:12px; color:var(--ink-3); margin-left:auto}
/* история позиции: раскрывается прямо в строке, без окна */
.ex{background:var(--card-2); padding:2px 15px 12px; animation:rise .22s cubic-bezier(.2,.7,.2,1) both}
.ex .st-opts{margin-top:10px}
.row.open{background:var(--card-2)}
.row.open .row-chev{transform:rotate(90deg)}
.row-chev{transition:transform .16s}
.il-row{display:flex; align-items:baseline; gap:10px; padding:11px 0; border-top:1px solid var(--line)}
.il-row:first-child{border-top:none}
.il-dot{width:6px; height:6px; border-radius:50%; background:var(--brand-ink); flex-shrink:0}
.il-tx{font-size:13.5px; min-width:0}
.il-ts{margin-left:auto; font-size:12px; color:var(--ink-3); white-space:nowrap}
/* каскад отметки: предупреждаем до тапа, каких ещё товаров он коснётся */
.il-note{font-size:12px; color:var(--ink-3); line-height:1.45; padding:10px 0 2px}
/* выбор статуса позиции: три кнопки, тап сразу применяет */
.st-opts{display:flex; flex-direction:column; gap:8px}
.st-opt{display:flex; align-items:center; gap:10px; padding:12px 14px; text-align:left;
  background:var(--card); border:1px solid var(--line-2); border-radius:12px; transition:.14s}
.st-opt:hover{border-color:var(--brand); background:var(--card-2)}
.st-opt.on{border-color:var(--brand); background:var(--brand-bg)}
.st-opt .badge{margin-left:0}
.st-tick{width:16px; height:16px; margin-left:auto; color:var(--brand-ink); flex-shrink:0}
/* заголовок группы комплектующих: цвет несёт статус, бейджи в строках не нужны */
.spec-grp{font-size:12px; font-weight:600; letter-spacing:.02em; margin:16px 2px 8px;
  display:flex; align-items:center; gap:7px}
.spec-grp:first-child{margin-top:2px}
.spec-dot{width:7px; height:7px; border-radius:50%; flex-shrink:0}
.spec-cnt{margin-left:auto; font-weight:500; font-size:11.5px; color:var(--ink-3)}
.b-way{background:var(--brand-bg); color:var(--brand-ink)}
.b-done{background:var(--ok-bg); color:var(--ok)}
.b-move{background:var(--brand-bg); color:var(--brand-ink)}

.step{display:flex; gap:11px; padding:8px 0}
.step .dot{width:9px; height:9px; border-radius:50%; background:var(--brand); margin-top:5px; flex-shrink:0; position:relative}
.step:not(:last-child) .dot::after{content:""; position:absolute; left:50%; top:11px; transform:translateX(-50%); width:1.5px; height:26px; background:var(--line-2)}
.step>span:last-child{min-width:0}
.step .s-t{display:block; font-size:13px; font-weight:500}
.step .s-d{display:block; font-size:12px; color:var(--ink-2); margin-top:1px}

/* funnel */
.funnel{padding:16px}
.f-row{display:flex; align-items:center; justify-content:space-between; padding:9px 0}
.f-row .f-k{font-size:13.5px; color:var(--ink-2)}
.f-bar{height:8px; border-radius:var(--r-pill); background:var(--brand); margin-top:7px; opacity:.9}
.f-val{font-weight:600; font-size:14px}
.conv{display:flex; justify-content:space-between; font-size:12.5px; color:var(--ink-3); padding:4px 0}
.divider{height:1px; background:var(--line); margin:8px 0}

/* P&L */
.pnl{padding:6px 16px}
.pnl .p-row{display:flex; justify-content:space-between; align-items:baseline; padding:12px 0; border-top:1px solid var(--line)}
.pnl .p-row:first-child{border-top:none}
.pnl .p-k{font-size:14px; color:var(--ink-2)}
.pnl .p-v{font-weight:600; font-size:15px; white-space:nowrap}
.pnl .p-v.neg{color:var(--ink-2); font-weight:500}
.pnl .p-row.total{border-top:2px solid var(--line-2)}
.pnl .p-row.total .p-k{color:var(--ink); font-weight:600}
.pnl .p-row.total .p-v{color:var(--brand-ink); font-family:var(--font-display); font-size:19px}

/* bar chart */
.chart-wrap{position:relative; padding:26px 16px 34px}
.chart-unit{position:absolute; top:8px; left:16px; font-size:11px; color:var(--ink-3)}
.chart{display:flex; align-items:flex-end; gap:8px; height:132px}
.chart .bar{flex:1; background:var(--brand); border-radius:6px 6px 0 0; position:relative; opacity:.88; transition:height .5s cubic-bezier(.2,.7,.2,1)}
.chart .bar:last-child{opacity:1}
.chart .bar.partial{opacity:.4; background:repeating-linear-gradient(135deg,var(--brand),var(--brand) 4px,transparent 4px,transparent 7px)}
.chart .bar b{position:absolute; top:-18px; left:-4px; right:-4px; text-align:center; font-size:10.5px; font-weight:500; color:var(--ink-2)}
.chart .bar span{position:absolute; bottom:-20px; left:0; right:0; text-align:center; font-size:10.5px; color:var(--ink-3)}
.chart-cap{margin-top:22px; font-size:11.5px; color:var(--ink-3); text-align:center}
.chart-cap b{color:var(--brand-ink)}

/* План закупок — карточки-справочники */
.row-chev{width:18px; height:18px; color:var(--ink-3); flex-shrink:0}
.kvs{padding:2px 16px}
.kvs .kv{border-top:1px solid var(--line); padding:12px 0; align-items:baseline}
.kvs .kv:first-child{border-top:none}
.kvs .kv>span{flex-shrink:0}
.kvs .kv.total{border-top:2px solid var(--line-2)}
.kvs .kv.total b{color:var(--brand-ink); font-weight:600}
.pc-note{font-size:12.5px; color:var(--ink-3)}
.mv-card{margin-top:8px}
.move{display:flex; align-items:center; gap:9px; padding:14px 15px; font-size:14px; font-weight:500}
.move-ic{width:17px; height:17px; color:var(--brand-ink); flex-shrink:0}

/* menu */
.menu .m-row{display:flex; align-items:center; gap:14px; padding:15px; border-top:1px solid var(--line); cursor:pointer; transition:background .14s}
.menu .m-row:first-child{border-top:none}
.menu .m-row:hover{background:var(--card-2)}
.menu .m-ic{width:38px; height:38px; border-radius:11px; background:var(--brand-bg); color:var(--brand-ink); display:grid; place-items:center; flex-shrink:0}
.menu .m-ic svg{width:20px; height:20px}
.menu .m-row>span:nth-child(2){min-width:0}
.menu .m-t{display:block; font-weight:500; font-size:14.5px}
.menu .m-d{display:block; font-size:12.5px; color:var(--ink-2); margin-top:1px}
.menu .m-cnt{margin-left:auto; font-size:12px; color:var(--ink-3); display:flex; align-items:center; gap:6px}
.menu .m-cnt svg{width:16px; height:16px}

/* кнопка «назад» в под-экранах (Договоры/Креаторы/Производства) */
.back{display:inline-flex; align-items:center; gap:5px; font-size:13px; font-weight:500; color:var(--ink-2); padding:2px 2px 10px}
.back:hover{color:var(--ink)}
.back svg{width:16px; height:16px; transform:scaleX(-1)}

/* tabbar (mobile) — 10 вкладок, горизонтальная прокрутка */
.tabbar{
  position:fixed; bottom:0; left:0; right:0; z-index:30; display:flex;
  overflow-x:auto; scrollbar-width:none; -webkit-overflow-scrolling:touch;
  background:color-mix(in srgb,var(--card) 92%, transparent); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  border-top:1px solid var(--line); padding-bottom:env(safe-area-inset-bottom,0);
}
.tabbar::-webkit-scrollbar{display:none}
.tabbar .tab{flex:0 0 auto; min-width:62px; padding:9px 6px 10px; display:flex; flex-direction:column; align-items:center; gap:3px; color:var(--ink-3); font-size:10.5px; transition:color .14s}
.tabbar .tab svg{width:23px; height:23px}
.tabbar .tab.on{color:var(--brand-ink)}

/* stock breakdown + producer (карточка товара) */
.stock-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:8px; margin-bottom:6px}
.stock-grid>div{background:var(--card-2); border:1px solid var(--line); border-radius:10px; padding:8px 6px; text-align:center}
.wh-top{margin-bottom:6px}
.row-static{cursor:default}
.row-static:hover{background:transparent}
.ph-empty{color:var(--ink-3)}
.sg-k{display:block; font-size:11px; color:var(--ink-2)}
.sg-v{display:block; font-size:16px; font-weight:600; margin-top:3px}
.sg-0 .sg-v{color:var(--ink-3)}
.kv{display:flex; justify-content:space-between; gap:12px; padding:9px 0 3px; font-size:13px}
.kv>span{color:var(--ink-2)}
.kv b{font-weight:500; text-align:right}

/* mini-метрики (плашки) */
.mets{display:grid; gap:10px; margin-bottom:2px}
.mets .met{background:var(--card-2); border:1px solid var(--line); border-radius:10px; padding:12px 14px}
.mets .met .ml{font-size:12px; color:var(--ink-2)}
.mets .met .mv{font-size:20px; font-weight:600; margin-top:4px}

/* отправки: панель поиска + светофор-фильтр по статусу */
.ship-toolbar{display:flex; gap:8px; align-items:center; margin-bottom:14px}
.ship-search{flex:1; min-width:0; font-family:var(--font-ui); font-size:13.5px; color:var(--ink);
  background:var(--card); border:1px solid var(--line); border-radius:var(--r-pill); padding:8px 14px}
.ship-search:focus{outline:none; border-color:var(--brand)}
.ship-toolbar .mini-add{margin-left:0; white-space:nowrap}
.ship-lights{grid-template-columns:repeat(auto-fit,minmax(92px,1fr)); gap:8px; margin-bottom:4px}
.ship-lights .met{padding:9px 10px; text-align:left; cursor:pointer; transition:.14s}
.ship-lights .met:hover{border-color:var(--line-2)}
.ship-lights .met.on{border-color:var(--brand); background:var(--brand-bg)}
.ship-lights .met .ml{font-size:11px; line-height:1.25}
.ship-lights .met .mv{font-size:17px; margin-top:2px}
/* фильтр «проблемы»: иконка вместо подписи + лёгкий красный акцент, чтобы выделялся */
.ship-lights .met .sl-ic{width:16px; height:16px; display:block}
.ship-light-prob{border-color:color-mix(in srgb,var(--danger) 30%, var(--line))}
.ship-light-prob .ml{color:var(--danger)}
/* число красное только когда проблемы есть (≥1); при 0 — обычный цвет */
.ship-light-prob.prob-has .mv{color:var(--danger)}
.ship-light-prob:hover{border-color:color-mix(in srgb,var(--danger) 55%, var(--line))}
.ship-light-prob.on{border-color:var(--danger); background:var(--danger-bg)}
.seg-n{margin-left:auto; color:var(--ink-2); font-weight:500}

/* tests */
.groomer{font-size:12.5px; color:var(--ink-2); margin-top:3px}
.groomer .tg{color:var(--brand-ink)}
.b-wait{background:var(--warn-bg); color:var(--warn)}
.b-no{background:var(--danger-bg); color:var(--danger)}
/* шаблон-заготовка образца (Тесты): подписи полей для ручного ввода */
.tpl{cursor:default}
.tpl:hover{background:transparent}
.ph-field{display:flex; align-items:center; gap:12px; padding:10px 0; border-top:1px dashed var(--line)}
.tpl .ph-field:first-child{border-top:none}
.ph-field.col{flex-direction:column; align-items:stretch; gap:7px}
.ph-l{font-size:13px; color:var(--ink-2); white-space:nowrap}
.ph-line{flex:1; height:0; border-bottom:1.5px dashed var(--line-2)}
.ph-hint{margin-left:auto; font-size:12px; color:var(--ink-3)}
.ph-box{height:46px; border:1.5px dashed var(--line-2); border-radius:8px}
.ph-mv{height:24px; margin-top:6px; border-bottom:1.5px dashed var(--line-2)}
.stages{display:flex; gap:6px; flex-wrap:wrap; margin:2px 0 16px}
.stg{font-size:11px; padding:4px 10px; border-radius:var(--r-pill); border:1px solid var(--line); color:var(--ink-3)}
.stg b{color:var(--ink-2); font-weight:500}

/* shipments */
.seg-title{font-size:13px; font-weight:500; margin:20px 2px 9px; display:flex; align-items:baseline; gap:8px}
.seg-title:first-child{margin-top:2px}
/* главный переключатель разделов Плана закупок — крупные карточки-кнопки в ряд */
.seg-cards{display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin-bottom:16px}
.seg-card{display:flex; flex-direction:column; align-items:center; justify-content:center; gap:9px;
  padding:16px 8px; background:var(--card); border:1px solid var(--line); border-radius:var(--r);
  box-shadow:var(--shadow); transition:.14s}
.seg-card:hover{border-color:var(--line-2)}
.seg-card:active{transform:scale(.99)}
.seg-card .ic{width:38px; height:38px; border-radius:11px; display:grid; place-items:center;
  background:var(--brand-bg); color:var(--brand-ink); transition:.14s}
.seg-card .ic svg{width:21px; height:21px}
.seg-card .sc-name{font-size:13.5px; font-weight:600; color:var(--ink); text-align:center; line-height:1.2}
.seg-cards-2{grid-template-columns:repeat(2,1fr)}
.sk-one{grid-template-columns:1fr}
.seg-card.on{background:var(--seg-on); border-color:var(--seg-on)}
.seg-card.on .sc-name{color:#fff}
.seg-card.on .ic{background:rgba(255,255,255,.16); color:#fff}
/* deposit */
.dep{padding:16px}
.dep-top{display:flex; justify-content:space-between; align-items:baseline}
.dep-rem{font-family:var(--font-display); font-weight:600; font-size:22px; color:var(--brand-ink)}
.dep-issued{font-size:13px; color:var(--ink-2)}
.dep-sub{font-size:12px; color:var(--ink-3); margin:2px 0 12px}
.prog{height:8px; border-radius:var(--r-pill); background:var(--line-2); overflow:hidden; margin-bottom:6px}
.prog>span{display:block; height:100%; background:var(--brand)}
.dep-row{display:flex; justify-content:space-between; font-size:13px; padding:10px 0; border-top:1px solid var(--line)}
.dep-row:first-of-type{border-top:none}
.dep-row .dk{color:var(--ink-2)}
.dep-row .dv{font-weight:500; color:var(--ink-2); white-space:nowrap}

/* ---------- Отправки: трекинг движения ---------- */
.mini-add{margin-left:auto; font-size:12px; font-weight:600; color:var(--brand-ink); padding:2px 4px; border-radius:6px}
.mini-add:hover{background:var(--brand-bg)}
/* иконка этапа в строке списка — в стиле иконок навигации */
.ship-ic{width:30px; height:30px; border-radius:9px; display:grid; place-items:center; flex-shrink:0}
.ship-ic svg{width:16px; height:16px}
.si-way{background:var(--brand-bg); color:var(--brand-ink)}
.si-done{background:var(--ok-bg); color:var(--ok)}
.si-prob{background:var(--danger-bg); color:var(--danger)}
.ship-banner{display:flex; align-items:center; gap:10px; flex-wrap:wrap;
  padding:13px 16px; border-radius:var(--r); font-weight:600; font-size:14px; margin-bottom:4px}
.ship-banner .sb-l{display:inline-flex; align-items:center; gap:9px}
.ship-banner .sb-ic{width:18px; height:18px; flex-shrink:0}
.ship-banner .sb-pct{margin-left:auto; font-size:12.5px; opacity:.8}
.ship-banner .sb-track{flex-basis:100%; height:6px; border-radius:var(--r-pill);
  background:color-mix(in srgb, currentColor 16%, transparent); overflow:hidden}
.ship-banner .sb-track span{display:block; height:100%; background:currentColor; border-radius:var(--r-pill)}
.sb-way{background:var(--brand-bg); color:var(--brand-ink)}
.sb-done{background:var(--ok-bg); color:var(--ok)}
.sb-prob{background:var(--danger-bg); color:var(--danger)}
.ship-path{padding:12px 16px}
.ship-step{display:flex; align-items:center; gap:11px; padding:7px 0; font-size:13.5px}
.ship-step .dot{width:11px; height:11px; border-radius:50%; border:2px solid var(--line-2); flex-shrink:0}
.ship-step .dot-on{background:var(--ok); border-color:var(--ok)}
.ship-step .ss-t{color:var(--ink)}
.ship-step .ss-t i{color:var(--ink-3); font-style:normal; font-size:12px}
.btn-ic{width:15px; height:15px; flex-shrink:0}
.ship-acts{display:flex; flex-wrap:wrap; gap:8px; margin:12px 0 2px}
.fb-ok{color:var(--ok); font-weight:600}
.fb-wait{color:var(--warn)}
.kv-prob{color:var(--danger)}
.ob-row{display:flex; gap:8px; align-items:center; margin-bottom:8px}
.ob-row .ob-link{flex:2; min-width:0}
.ob-row .ob-plat{flex:1; min-width:0}
.ob-row input{font-family:var(--font-ui); font-size:14px; color:var(--ink); background:var(--card);
  border:1px solid var(--line-2); border-radius:10px; padding:10px 12px; transition:border-color .14s}
.ob-row input:focus{outline:none; border-color:var(--brand)}
.ob-del{flex:none; width:32px; height:32px; border:1px solid var(--line-2); border-radius:8px;
  color:var(--ink-3); font-size:18px; line-height:1; display:grid; place-items:center}
.ob-del:hover{border-color:var(--danger); color:var(--danger)}
/* поле плана роликов над списком публикаций */
.ob-plan-fld{display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:14px}
.ob-plan-fld label{font-size:13px; color:var(--ink-2)}
.ob-plan-fld input{width:96px; font-family:var(--font-ui); font-size:14px; color:var(--ink); background:var(--card);
  border:1px solid var(--line-2); border-radius:10px; padding:10px 12px; text-align:center; transition:border-color .14s}
.ob-plan-fld input:focus{outline:none; border-color:var(--brand)}
/* прогресс утверждённого контента в карточке обязательства */
.ob-bar-row{padding-top:4px !important; padding-bottom:8px !important}
.ob-bar{flex-basis:100%; height:6px; border-radius:var(--r-pill); background:var(--line-2); overflow:hidden}
.ob-bar span{display:block; height:100%; background:var(--warn); border-radius:var(--r-pill); transition:width .2s}
.ob-bar.ob-bar-ok span{background:var(--ok)}
.hist{padding:6px 16px}
.hist-row{font-size:12.5px; color:var(--ink-2); padding:8px 0; border-top:1px solid var(--line)}
.hist-row:first-child{border-top:none; color:var(--ink); font-weight:500}

/* кнопки действий */
.btn-primary{display:inline-flex; align-items:center; gap:7px; background:var(--brand); color:#fff; border-radius:10px; padding:10px 16px; font-size:13.5px; font-weight:600; transition:.14s}
.btn-primary:hover{filter:brightness(1.08)}
.btn-ghost{display:inline-flex; align-items:center; gap:7px; border:1px solid var(--line-2); color:var(--ink-2); border-radius:10px; padding:10px 15px; font-size:13.5px; font-weight:500; transition:.14s}
.btn-ghost:hover{background:var(--card-2); color:var(--ink)}
.btn-ghost.del:hover{background:var(--danger-bg); color:var(--danger); border-color:color-mix(in srgb,var(--danger) 30%,transparent)}

/* мелкие элементы рабочих модулей */
.seg-btns{margin-left:auto; display:flex; gap:14px}
.seg-btns .mini-add{margin-left:0}
.row-x{width:24px; height:24px; border-radius:7px; color:var(--ink-3); font-size:16px; line-height:1; flex-shrink:0; display:grid; place-items:center}
.row-x:hover{background:var(--danger-bg); color:var(--danger)}
.add-line{display:block; width:100%; margin-top:8px; text-align:center; border-style:dashed}
/* редактор позиций заказа поставщику */
.p-edit{cursor:pointer}
.p-edit:hover .p-k{color:var(--ink)}
.dep-edit{cursor:pointer}
.dep-edit:hover .dk{color:var(--ink)}
.os-note{padding:14px 16px; font-size:14px; line-height:1.6}
.task .row-x{margin-left:6px}

/* ---------- модальная форма (bottom sheet) ---------- */
.sheet-bg{position:fixed; inset:0; z-index:60; background:rgba(20,16,14,.42); backdrop-filter:blur(2px);
  display:flex; align-items:flex-end; justify-content:center; opacity:0; transition:opacity .2s}
/* hidden обязан прятать подложку: display:flex выше по каскаду и без этого перекрывал весь экран */
.sheet-bg[hidden]{display:none}
.sheet-bg.on{opacity:1}
.sheet{width:100%; max-width:560px; max-height:90dvh; overflow-y:auto; background:var(--paper);
  border-radius:20px 20px 0 0; padding:8px 20px calc(20px + env(safe-area-inset-bottom,0));
  transform:translateY(100%); transition:transform .24s cubic-bezier(.2,.7,.2,1); box-shadow:0 -10px 40px -12px rgba(0,0,0,.4)}
.sheet-bg.on .sheet{transform:none}
.sheet::before{content:""; display:block; width:38px; height:4px; border-radius:99px; background:var(--line-2); margin:6px auto 14px}
.sheet-h{font-family:var(--font-display); font-weight:600; font-size:18px; margin:0 2px 14px}
.sheet-body{display:flex; flex-direction:column; gap:13px}
.ff{display:flex; flex-direction:column; gap:6px}
.ff>span{font-size:12.5px; color:var(--ink-2); padding-left:2px}
.ff input,.ff select,.ff textarea{width:100%; font-family:var(--font-ui); font-size:15px; color:var(--ink);
  background:var(--card); border:1px solid var(--line-2); border-radius:10px; padding:11px 13px; transition:border-color .14s}
.ff input:focus,.ff select:focus,.ff textarea:focus{outline:none; border-color:var(--brand)}
.ff textarea{resize:vertical; min-height:60px}
.sheet-foot{display:flex; gap:10px; justify-content:flex-end; margin-top:20px}
.sheet-foot .del{margin-right:auto}
.sheet-foot .btn-primary,.sheet-foot .btn-ghost{padding:11px 20px}
@media(min-width:860px){ .sheet-bg{align-items:center} .sheet{border-radius:20px; max-height:86dvh} }

/* ---------- desktop ---------- */
@media(min-width:860px){
  .app{grid-template-columns:236px 1fr}
  .rail{display:flex; flex-direction:column; padding:22px 16px; border-right:1px solid var(--line); position:sticky; top:0; height:100dvh; gap:4px; overflow-y:auto}
  .brand{display:flex; align-items:center; gap:11px; padding:6px 8px 20px}
  .brand-mark{width:34px; height:34px; border-radius:50%; object-fit:cover; display:block}
  .brand-name{font-family:var(--font-display); font-weight:600; font-size:19px; letter-spacing:-.02em}
  .nav{display:flex; flex-direction:column; gap:3px}
  .nav .tab{display:flex; align-items:center; gap:12px; padding:11px 12px; border-radius:var(--r-sm); color:var(--ink-2); font-size:14.5px; font-weight:500; transition:.14s}
  .nav .tab svg{width:20px; height:20px}
  .nav .tab:hover{background:var(--card-2); color:var(--ink)}
  .nav .tab.on{background:var(--brand-bg); color:var(--brand-ink)}
  .theme-btn{margin-top:auto}
  .rail .theme-btn{display:flex; align-items:center; height:auto; width:100%; justify-content:flex-start; gap:12px; padding:11px 12px; font-size:14px; font-weight:500; border:none; border-radius:var(--r-sm); color:var(--ink-2)}
  .rail .theme-btn:hover{background:var(--card-2); color:var(--ink)}
  .rail .theme-btn svg{width:20px; height:20px}
  .rail .theme-btn::after{content:attr(data-label)}
  .tabbar{display:none}
  .mobile-theme{display:none}
  .topbar{padding:20px 30px}
  .topbar-title h1{font-size:24px}
  .screens{padding:22px 30px 40px; max-width:820px; margin:0}
  .kpis{grid-template-columns:repeat(2,minmax(0,1fr)); max-width:460px}
}
@media(min-width:1100px){
  .grid-2{display:grid; grid-template-columns:1fr 1fr; gap:16px; align-items:start}
}

/* ---------- UGC: перенос кабинета из бота ---------- */
.mi{width:14px;height:14px;vertical-align:-2px;margin-right:2px;opacity:.7}
.ugc-range{display:flex;gap:8px;margin:10px 0;align-items:center}
.ugc-range input{flex:1;min-width:0;padding:9px 10px;border:1px solid var(--line);border-radius:10px;background:var(--card);color:var(--ink);font:inherit}
.ugc-link{word-break:break-all}
button.badge{border:0;cursor:pointer;font:inherit;font-size:12px}
/* график динамики: линия рисуется цветом бренда, площадь под ней — им же с прозрачностью */
.ugc-line{display:block;width:100%;height:auto;color:var(--brand)}
.chart-cap span:first-child,.chart-cap span:last-child{color:var(--ink-3)}

/* ---------- плашка о проблеме с сохранением ---------- */
/* Показывается только когда данные не ушли на сервер: молчать здесь нельзя — раньше при
   сбое записи правки просто исчезали, и узнать об этом было неоткуда. */
.store-warn{
  position:fixed; left:50%; bottom:calc(16px + env(safe-area-inset-bottom)); transform:translateX(-50%);
  z-index:100; max-width:min(560px,calc(100vw - 32px));
  padding:11px 16px; border:1px solid var(--danger); border-radius:var(--r);
  background:var(--danger-bg); color:var(--danger);
  font-size:13px; line-height:1.4; text-align:center;
  backdrop-filter:blur(8px); box-shadow:var(--shadow);
}
@media (max-width:760px){
  /* на телефоне снизу таббар — плашку поднимаем над ним */
  .store-warn{bottom:calc(76px + env(safe-area-inset-bottom))}
}