/* Визуальный язык — из макета «Сервис для WB» (IBM Plex, светлая тема) */
:root{
  --bg:#F4F5F7;--card:#fff;--ink:#16181D;--ink2:#383D47;--mute:#5B616E;--mute2:#8A909B;--line:#E1E4EA;--line2:#EEF0F3;
  --soft:#FAFBFC;--pri:#2457D6;--pri-d:#173C9E;--pri-soft:#EEF3FF;--good:#15803D;--good-bg:#E3F4E8;--bad:#B42318;--bad-bg:#FCE7E5;
  --warn:#B45309;--warn-bg:#FDF0DC;--attn:#FFFBF2;--grp:#7A3E00;--top:#16181D;--top2:#2A2E37;--top-ink:#C9CDD6;
  --mono:'IBM Plex Mono',ui-monospace,Consolas,monospace;--sans:'IBM Plex Sans',system-ui,-apple-system,'Segoe UI',sans-serif;
}
*{box-sizing:border-box}
html,body{margin:0}
body{background:var(--bg);color:var(--ink);font-family:var(--sans);font-size:14px}
a{color:var(--pri)}a:hover{color:var(--pri-d)}
[v-cloak]{display:none}
button,input,select,textarea{font:inherit;color:inherit}

.top{display:flex;flex-wrap:wrap;align-items:center;gap:10px 20px;padding:10px 24px;background:var(--top);color:#fff;position:sticky;top:0;z-index:20}
.brand{font-weight:700;font-size:16px;white-space:nowrap}
.nav{display:flex;flex-wrap:wrap;gap:4px}
.nav a{color:var(--top-ink);text-decoration:none;padding:9px 13px;border-radius:8px}
.nav a:hover{background:var(--top2);color:#fff}
.nav a.on{background:#fff;color:var(--ink);font-weight:600}
.spacer{flex:1}
.top select{background:var(--top2);color:#fff;border:0;border-radius:8px;padding:8px 10px;min-height:36px;max-width:230px}
.top .seg{background:var(--top2)}
.top .seg button{color:var(--top-ink)}
.syncbtn{background:var(--top2);border:0;color:var(--top-ink);border-radius:8px;padding:8px 12px;cursor:pointer;min-height:36px;white-space:nowrap}
.syncbtn:hover{color:#fff}
.userbtn{background:none;border:0;color:var(--top-ink);cursor:pointer;padding:8px}

.wrap{max-width:1500px;margin:0 auto;padding:22px 24px 40px}
.headrow{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-end;gap:12px;margin-bottom:18px}
h1{margin:0;font-size:26px;font-weight:600}
h2{margin:0 0 10px;font-size:15px;font-weight:600}
.sub{margin:4px 0 0;color:var(--mute);font-size:13px}
.btn{border:1px solid #D3D7DF;background:#fff;font-size:14px;padding:9px 15px;border-radius:8px;cursor:pointer;color:var(--ink);min-height:38px;text-decoration:none;display:inline-flex;align-items:center;gap:6px;white-space:nowrap}
.btn:hover{background:var(--soft);color:var(--ink)}
.btn.pri{background:var(--pri);border-color:var(--pri);color:#fff;font-weight:500}
.btn.pri:hover{background:var(--pri-d)}
.btn.danger{color:var(--bad)}
.btn.sm{padding:5px 10px;min-height:32px;font-size:13px}
.btn:disabled{opacity:.5;cursor:default}
.btn.done{background:var(--good-bg);border-color:#BFE3CB;color:#14532D}
.actions{display:flex;gap:8px;flex-wrap:wrap}
.card{background:var(--card);border:1px solid var(--line);border-radius:12px}
.pad{padding:16px 18px}
.mb{margin-bottom:12px}.mt{margin-top:12px}
.kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:12px;margin-bottom:16px}
.kpi{padding:16px 18px}
.kl{font-size:12.5px;color:var(--mute)}
.kv{font-size:24px;font-weight:600;margin-top:6px;font-family:var(--mono)}
.kv.sm{font-size:19px}
.toolbar{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin-bottom:12px}
.chip{border:1px solid #D3D7DF;background:#fff;border-radius:999px;padding:7px 13px;font-size:13px;cursor:pointer;color:var(--ink);min-height:36px;display:inline-flex;gap:8px;align-items:center}
.chip.on{background:var(--ink);color:#fff;border-color:var(--ink)}
.cnt{font-family:var(--mono);font-size:12px;opacity:.75}
.inp,.search,.sel{border:1px solid #D3D7DF;border-radius:8px;padding:8px 10px;min-height:36px;background:#fff;width:100%}
.search{min-width:220px;width:auto}
.inp.sm{padding:4px 6px;min-height:30px;width:70px;font-family:var(--mono);font-size:13px}
.inp.num{font-family:var(--mono)}
textarea.inp{min-height:110px;resize:vertical;font-size:13px}
.lbl{display:inline-flex;align-items:center;gap:8px;font-size:13px;color:var(--ink2);cursor:pointer}
.fld{display:flex;flex-direction:column;gap:5px;font-size:12.5px;color:var(--mute);flex:1;min-width:130px}
.fr{display:flex;flex-wrap:wrap;gap:10px;margin:10px 0}
.sw{width:40px;height:24px;border-radius:12px;background:#B8BDC8;border:0;position:relative;cursor:pointer;padding:0;flex:none}
.sw::after{content:'';position:absolute;top:3px;left:3px;width:18px;height:18px;border-radius:50%;background:#fff;transition:left .15s}
.sw.on{background:var(--pri)}.sw.on::after{left:19px}
.seg{display:inline-flex;background:#E7E9EE;border-radius:10px;padding:3px;gap:2px}
.seg button{border:0;background:transparent;font-size:13px;padding:7px 13px;border-radius:8px;cursor:pointer;color:var(--mute);min-height:32px}
.seg button.on{background:#fff;color:var(--ink);font-weight:600}
.seg button:disabled{opacity:.45;cursor:default}

.num{text-align:right;font-family:var(--mono);font-size:13px}
.good{color:var(--good)}.bad{color:var(--bad)}.warn{color:var(--warn)}.mute{color:var(--mute)}
.pill{display:inline-block;padding:2px 8px;border-radius:999px;font-size:12px;font-weight:500;font-family:var(--sans)}
.pill.good{background:var(--good-bg)}.pill.bad{background:var(--bad-bg)}.pill.warn{background:var(--warn-bg)}.pill.mute{background:var(--line2);color:var(--mute)}
.pillbtn{border:0;cursor:pointer;padding:3px 10px;border-radius:999px;font-size:12px;font-weight:500}
.pillbtn.good{background:var(--good-bg);color:var(--good)}.pillbtn.bad{background:var(--bad-bg);color:var(--bad)}
.meta{font-size:12px;color:var(--mute);margin-top:2px;overflow:hidden;text-overflow:ellipsis}
.art{border:0;background:var(--line2);border-radius:4px;padding:1px 6px;font-size:12px;color:var(--ink2);cursor:pointer;font-family:var(--mono)}
.art:hover{background:#E6EDFD;color:var(--pri-d)}
.art.ok{background:var(--good-bg);color:#14532D}
.legend{display:flex;flex-wrap:wrap;gap:8px 18px;font-size:12px;color:var(--mute);margin-top:12px}
.emptyst{padding:40px;text-align:center;color:var(--mute)}
.moreline{display:flex;gap:12px;align-items:center;justify-content:center;padding:12px;color:var(--mute);font-size:13px}
.note{font-size:12.5px;color:var(--mute)}
.err{background:var(--bad-bg);color:var(--bad);border-radius:8px;padding:10px 14px;margin-bottom:12px}
.info{background:var(--pri-soft);color:var(--pri-d);border-radius:8px;padding:10px 14px;margin-bottom:12px}
.warnbox{background:var(--warn-bg);color:#7A3E00;border-radius:8px;padding:10px 14px;margin-bottom:12px}

/* Таблицы на grid (как в макете) */
.scroll{overflow-x:auto}
.row{display:grid;align-items:center;border-bottom:1px solid var(--line2)}
.row > *{padding:9px 10px;min-width:0;overflow:hidden;text-overflow:ellipsis}
.row:not(.head) > *{white-space:nowrap}
.row:not(.head) > .wrapcell{white-space:normal}
.row.head{background:var(--soft);font-size:12px;color:var(--mute);font-weight:500;position:sticky;top:0;z-index:2}
.row.head > *{white-space:normal;line-height:1.25}
.row.head .grp{color:var(--grp)}
.row.head .num,.row.head .hc{font-family:var(--sans);font-size:12px}
.row.attn{background:var(--attn)}
.row.picked{background:var(--pri-soft)}
.row.clickable{cursor:pointer}
.row.clickable:hover{background:#F7F9FD}
.hc{position:relative;padding-right:16px !important;align-self:stretch;display:flex;align-items:center;cursor:grab;user-select:none;gap:2px}
.hc.num{justify-content:flex-end}
.hc.over{box-shadow:inset 3px 0 0 var(--pri);background:var(--pri-soft)}
.hc.dragging{opacity:.4}
.rz{position:absolute;top:0;right:0;width:12px;height:100%;border:0;padding:0;background:transparent;cursor:col-resize}
.rz::after{content:'';position:absolute;top:22%;bottom:22%;right:5px;width:2px;background:#D3D7DF;border-radius:1px}
.rz:hover::after{background:var(--pri);top:0;bottom:0}
.hsort{border:0;background:none;color:inherit;cursor:pointer;padding:4px 0;text-align:inherit;display:inline-flex;gap:5px;align-items:center;line-height:1.25;min-width:0;font-size:12px}
.hc.sorted{color:var(--ink);font-weight:600}
.arr{font-size:10px;color:var(--pri);flex:none}.arr.dim{color:#B8BDC8}
.hiderow{display:grid;background:var(--soft)}
.hiderow > *{padding:4px 10px 0;display:flex;justify-content:center;min-width:0}
.hx{visibility:hidden;border:0;background:var(--line2);cursor:pointer;height:20px;padding:0 8px;border-radius:10px;color:var(--mute);font-size:11px;line-height:20px}
.headwrap:hover .hx{visibility:visible}
.hx:hover{background:var(--bad-bg);color:var(--bad)}
.prod{display:flex;gap:10px;align-items:center}
.cov{width:30px;height:40px;border-radius:3px;flex:none;object-fit:cover;background:#D9DCE3}
.ttl{font-weight:500;color:var(--ink);text-decoration:none}
.ttl:hover{color:var(--pri);text-decoration:underline}
.cellbtn{text-decoration:none;color:inherit;display:block;border-radius:6px;cursor:pointer}
.cellbtn:hover{background:var(--pri-soft);color:var(--ink)}
.bar{height:5px;background:var(--line2);border-radius:3px;margin-top:6px;overflow:hidden}
.bar i{display:block;height:100%;background:var(--pri);border-radius:3px}
.colpanel{padding:16px 18px;margin-bottom:12px}
.collist{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:6px 16px}
.colitem{display:flex;align-items:center;gap:8px;padding:4px 8px;border-radius:8px;background:var(--soft);border:1px solid var(--line2)}
.colitem label{flex:1;display:flex;align-items:center;gap:8px;cursor:pointer;font-size:13px;min-height:34px}
.colitem.off label{color:var(--mute2)}
.mv{border:1px solid #D3D7DF;background:#fff;border-radius:6px;width:30px;height:30px;cursor:pointer}
.mv:disabled{opacity:.35;cursor:default}

/* Подсорт: тепловая карта по дням */
.dh{text-align:center;font-size:11px;line-height:1.15;padding:6px 2px !important}
.dh .mo{font-size:10px;color:var(--grp);min-height:12px}
.dh .dn{font-weight:600;color:var(--ink);font-family:var(--mono)}
.dh.we .wd{color:var(--bad)}
.dh.wk,.day.wk{box-shadow:inset 1px 0 0 #C9CDD6}
.day{text-align:center;font-family:var(--mono);font-size:12px;padding:9px 2px !important}
.d0{color:#B8BDC8}.d1{background:#EEF3FF}.d2{background:#D6E2FB}.d3{background:#AFC6F5}.d4{background:#7FA2EC;color:#fff}
.qty{width:72px;text-align:right;font-family:var(--mono);border:1px solid #D3D7DF;border-radius:6px;padding:4px 6px}
.qty.edited{border-color:var(--warn);background:var(--warn-bg)}
.foot{display:flex;flex-wrap:wrap;gap:24px;align-items:center;padding:14px 18px;margin-top:12px}
.fl{font-size:12px;color:var(--mute)}
.fv{font-size:20px;font-weight:600;font-family:var(--mono)}
.controls{display:flex;flex-wrap:wrap;gap:14px;align-items:flex-end;padding:14px 18px;margin-bottom:12px}
.ctl{display:flex;flex-direction:column;gap:5px;font-size:12px;color:var(--mute)}
.ctl .inp{width:auto;min-width:120px}

/* Репрайсер */
.row.rp > *{white-space:normal !important}
.target .up{color:var(--good);font-weight:600}.target .down{color:var(--bad);font-weight:600}
.tnote{display:block;font-size:11.5px;color:var(--mute)}
.subline{display:flex;align-items:center;gap:4px;margin-top:4px;font-size:12px;color:var(--mute)}
.compbtn{border:1px solid #D3D7DF;background:#fff;border-radius:8px;padding:5px 8px;cursor:pointer;font-size:12.5px;display:inline-flex;gap:5px;align-items:center}
.badge{font-family:var(--mono);font-size:11px;border-radius:999px;padding:0 6px}
.badge.g{background:var(--good-bg);color:var(--good)}.badge.b{background:var(--line2);color:var(--mute)}
.addrow{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
.addrow .inp{max-width:360px}
.x{border:0;background:none;cursor:pointer;color:var(--mute);font-size:15px;padding:4px 8px;border-radius:6px}
.x:hover{background:var(--bad-bg);color:var(--bad)}

/* Реклама */
.three{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:12px;margin-bottom:12px}
.two{display:grid;grid-template-columns:minmax(0,2fr) minmax(280px,1fr);gap:12px}
@media (max-width:1000px){.two{grid-template-columns:1fr}}
.status{font-size:13px;margin-top:10px;padding:8px 10px;border-radius:8px}
.status.good{background:var(--good-bg)}.status.warn{background:var(--warn-bg)}.status.bad{background:var(--bad-bg)}.status.mute{background:var(--line2);color:var(--mute)}
.places{display:flex;gap:10px;align-items:flex-end;min-height:200px;padding:16px 4px 4px}
.pl{flex:1;min-width:52px;text-align:center}
.pl .pb{background:#D6E2FB;border-radius:6px 6px 0 0;margin:4px 6px 0}
.pl.tgt .pb{background:var(--pri)}.pl.ours .pb{background:var(--good)}
.pl .pv{font-family:var(--mono);font-size:12px}.pl .pn{font-size:12px;color:var(--mute);margin-top:4px}
.dot{display:inline-block;width:10px;height:10px;border-radius:3px;margin-right:6px;vertical-align:-1px}
.tabs{display:flex;gap:4px;border-bottom:1px solid var(--line);margin-bottom:12px;flex-wrap:wrap}
.tabs button{border:0;background:none;padding:10px 14px;cursor:pointer;color:var(--mute);border-bottom:2px solid transparent;margin-bottom:-1px}
.tabs button.on{color:var(--ink);font-weight:600;border-bottom-color:var(--pri)}
.kbtn{border:0;background:none;cursor:pointer;padding:0;color:var(--ink);text-align:left}
.kbtn:hover{color:var(--pri)}
.fstep{margin:12px 0}
.fhead{display:flex;justify-content:space-between;font-size:13px}
.fbar{height:10px;background:var(--pri);border-radius:5px;margin-top:5px;min-width:4px}
.conv{font-size:12px;color:var(--mute);margin-top:3px}
.conv.bad{color:var(--bad);font-weight:600}
.alog{font-size:12.5px;border-top:1px solid var(--line2);padding:7px 0}

/* Карточка товара */
.back{display:inline-block;margin-bottom:12px;text-decoration:none}
.hero{display:flex;flex-wrap:wrap;gap:18px;padding:18px;margin-bottom:12px;align-items:flex-start}
.hero .bigcov{width:84px;height:112px;border-radius:6px;background:#D9DCE3;object-fit:cover;flex:none}
.hero .hmain{flex:1;min-width:280px}
.stats{display:flex;flex-wrap:wrap;gap:16px 28px;margin-top:14px}
.layout{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:12px}
@media (max-width:1050px){.layout{grid-template-columns:1fr}}
.fgrid{display:grid;grid-template-columns:190px 1fr 90px 150px;gap:10px;align-items:center;padding:8px 0;border-bottom:1px solid var(--line2)}
.fgrid .fbar{margin:0}
.chk{display:flex;gap:10px;padding:7px 0;font-size:13px;line-height:1.35}
.mark{width:22px;height:22px;border-radius:50%;flex:none;display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:700}
.mark.ok{background:var(--good-bg);color:var(--good)}.mark.no{background:var(--bad-bg);color:var(--bad)}.mark.arr{background:var(--pri-soft);color:var(--pri)}
.reco{margin-top:12px;background:var(--warn-bg);border-radius:8px;padding:10px 12px;font-size:13px}
.gbar{height:10px;background:var(--pri);border-radius:5px;min-width:3px}

/* Модальные окна и уведомления */
.toast{position:fixed;right:20px;bottom:20px;z-index:100;max-width:420px;padding:12px 16px;border-radius:10px;background:var(--ink);color:#fff;box-shadow:0 8px 30px rgba(0,0,0,.2)}
.toast.bad{background:var(--bad)}
.modal-bg{position:fixed;inset:0;background:rgba(22,24,29,.45);z-index:50;display:flex;align-items:flex-start;justify-content:center;padding:60px 16px;overflow:auto}
.modal{background:#fff;border-radius:12px;padding:20px;width:100%;max-width:560px}
.login{max-width:360px;margin:12vh auto;padding:28px}
.login h1{font-size:22px;margin-bottom:16px}
.grid2{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:10px}
table.simple{width:100%;border-collapse:collapse;font-size:13px}
table.simple th{text-align:left;font-weight:500;color:var(--mute);font-size:12px;background:var(--soft)}
table.simple th,table.simple td{padding:8px 10px;border-bottom:1px solid var(--line2);vertical-align:top}
.loading{padding:40px;text-align:center;color:var(--mute)}
@media (max-width:700px){.wrap{padding:16px}.top{padding:10px 16px}.search{min-width:0;width:100%}}