/* Stock Sync — design tokens */
:root{
  color-scheme:light;
  --bg:#f4f6fa;--surface:#fff;--surface-2:#f8f9fc;--hover:#f1f4fb;
  --text:#1b2533;--text-2:#475467;--muted:#667085;--faint:#98a2b3;
  --line:#e4e8ef;--line-strong:#d0d5dd;
  --accent:#3d5afe;--accent-hover:#2f4ae0;--accent-soft:#eef1ff;--accent-text:#2f47cc;--on-accent:#fff;
  --ok:#12805c;--ok-soft:#e7f6ef;--warn:#a15c07;--warn-soft:#fff5e5;--bad:#c4320a;--bad-soft:#fdeee9;--neutral-soft:#eef1f5;
  --wb:#a239ca;--wb-soft:#f6ebfb;--ozon:#005bff;--ozon-soft:#e8f0ff;
  --chart-wb:#a239ca;--chart-ozon:#2f74ff;--chart-stock:#3d5afe;--chart-in:#12a37a;--chart-out:#e8833a;
  --radius:10px;--radius-sm:7px;
  --shadow-sm:0 1px 2px #1018280d;--shadow:0 12px 32px #10182824;
  --sidebar:236px;
  font-family:"Segoe UI Variable Text","Segoe UI",system-ui,-apple-system,Roboto,Arial,sans-serif;
  font-size:13.5px;line-height:1.45;color:var(--text);background:var(--bg);
}
:root[data-theme="dark"]{
  color-scheme:dark;
  --bg:#0e131c;--surface:#161d29;--surface-2:#1b2331;--hover:#1f2939;
  --text:#e6eaf0;--text-2:#c3cad6;--muted:#97a1b3;--faint:#6f7a8d;
  --line:#273142;--line-strong:#344155;
  --accent:#6f86ff;--accent-hover:#8296ff;--accent-soft:#232d4f;--accent-text:#aab8ff;--on-accent:#0e131c;
  --ok:#4fd1a1;--ok-soft:#173a30;--warn:#f2b866;--warn-soft:#3a2d18;--bad:#ff8f73;--bad-soft:#40221d;--neutral-soft:#232c3b;
  --wb:#d58cf2;--wb-soft:#35213f;--ozon:#7aa7ff;--ozon-soft:#1b2b4c;
  --chart-wb:#cf86ee;--chart-ozon:#6f9dff;--chart-stock:#8a9cff;--chart-in:#4fd1a1;--chart-out:#f2a766;
  --shadow-sm:0 1px 2px #0006;--shadow:0 16px 40px #000a;
}

/* Base */
*,*::before,*::after{box-sizing:border-box}
body{margin:0;background:var(--bg)}
[hidden]{display:none!important}
h1,h2,h3,p{margin:0}
h1{font-size:20px;font-weight:650;letter-spacing:-.2px}
h2{font-size:14.5px;font-weight:650}
h3{font-size:14px;font-weight:650}
p{color:var(--text-2)}
a{color:var(--accent-text)}
small,.hint{font-size:12px;color:var(--muted)}
.sprite{display:none}
.icon{width:18px;height:18px;flex:0 0 auto;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.visually-hidden{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.num{font-variant-numeric:tabular-nums}

/* Controls */
button,input,select{font:inherit;color:inherit}
button{cursor:pointer;border:0;background:none;padding:0}
button:disabled{opacity:.5;cursor:default}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.primary,.button{display:inline-flex;align-items:center;justify-content:center;gap:7px;height:36px;padding:0 14px;border-radius:var(--radius-sm);font-weight:600;white-space:nowrap;text-decoration:none;transition:background-color .12s,border-color .12s}
.primary{background:var(--accent);color:var(--on-accent)}
.primary:hover:not(:disabled){background:var(--accent-hover)}
.button{background:var(--surface);color:var(--text-2);border:1px solid var(--line-strong)}
.button:hover:not(:disabled){background:var(--hover)}
.button .icon{width:16px;height:16px}
.icon-button{display:inline-grid;place-items:center;width:36px;height:36px;border-radius:var(--radius-sm);color:var(--muted)}
.icon-button:hover{background:var(--hover);color:var(--text)}
.link{display:inline-flex;align-items:center;gap:4px;color:var(--accent-text);font-weight:600;font-size:12.5px}
.link .icon{width:15px;height:15px}
.link:hover{text-decoration:underline}
input,select{height:36px;padding:0 11px;border:1px solid var(--line-strong);border-radius:var(--radius-sm);background:var(--surface);min-width:0;width:100%}
input::placeholder{color:var(--faint)}
input:focus,select:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}
input[readonly]{background:var(--surface-2);color:var(--muted)}
label{display:grid;gap:5px;font-size:12px;font-weight:600;color:var(--text-2)}
label small{font-weight:400}
.stack{display:grid;gap:14px}
.form-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px 14px;align-items:start}
.form-actions{grid-column:1/-1;display:flex;gap:8px;flex-wrap:wrap}
.inline-form{margin-top:14px;border-top:1px solid var(--line);padding-top:12px}
.inline-form summary{cursor:pointer;font-weight:600;color:var(--accent-text);font-size:12.5px}
.inline-form[open] summary{margin-bottom:12px}
.inline-form .hint{margin-top:10px}

/* Custom select (components.js) */
.native-select{position:absolute!important;width:1px!important;height:1px!important;opacity:0!important;padding:0!important;border:0!important;pointer-events:none;overflow:hidden}
.select-control{position:relative;min-width:0;width:100%;font-weight:400}
.select-trigger{display:flex;align-items:center;justify-content:space-between;gap:10px;width:100%;height:36px;border:1px solid var(--line-strong);background:var(--surface);color:var(--text);padding:0 11px;border-radius:var(--radius-sm);text-align:left}
.select-trigger>span:first-child{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.select-chevron{color:var(--muted);font-size:16px;line-height:1;margin-top:-6px;transition:transform .15s}
.select-trigger[aria-expanded=true]{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}
.select-trigger[aria-expanded=true] .select-chevron{transform:rotate(180deg);margin-top:6px}
.select-menu{position:absolute;z-index:100;top:calc(100% + 5px);left:0;min-width:100%;padding:4px;border:1px solid var(--line);border-radius:var(--radius);background:var(--surface);box-shadow:var(--shadow);max-height:280px;overflow:auto}
.open-up .select-menu{top:auto;bottom:calc(100% + 5px)}
.select-menu button{display:block;width:100%;white-space:nowrap;border-radius:5px;color:var(--text-2);text-align:left;padding:8px 10px;font-size:13px}
.select-menu button:hover,.select-menu button:focus-visible{background:var(--hover);outline:none}
.select-menu button[aria-selected=true]{background:var(--accent-soft);color:var(--accent-text);font-weight:600}

/* Chips and segmented controls */
.chips{display:flex;gap:6px;flex-wrap:wrap}
.chips button{display:inline-flex;align-items:center;gap:6px;height:30px;padding:0 11px;border-radius:999px;border:1px solid var(--line-strong);background:var(--surface);color:var(--text-2);font-size:12.5px;font-weight:500}
.chips button:hover{background:var(--hover)}
.chips button[aria-pressed=true]{background:var(--text);border-color:var(--text);color:var(--surface)}
.chips .count{font-size:11px;color:var(--muted);font-variant-numeric:tabular-nums}
.chips button[aria-pressed=true] .count{color:inherit;opacity:.7}
.segmented{display:inline-flex;padding:3px;border-radius:9px;background:var(--neutral-soft);gap:2px;flex-wrap:wrap}
.segmented button{height:28px;padding:0 11px;border-radius:6px;color:var(--text-2);font-size:12.5px;font-weight:500}
.segmented button:hover{color:var(--text)}
.segmented button[aria-pressed=true]{background:var(--surface);color:var(--text);font-weight:600;box-shadow:var(--shadow-sm)}

/* Pills, market tags */
.pill{display:inline-flex;align-items:center;gap:5px;height:22px;padding:0 8px;border-radius:999px;font-size:11.5px;font-weight:600;white-space:nowrap;background:var(--neutral-soft);color:var(--text-2)}
.pill.ok{background:var(--ok-soft);color:var(--ok)}
.pill.warn{background:var(--warn-soft);color:var(--warn)}
.pill.bad{background:var(--bad-soft);color:var(--bad)}
.pill.info{background:var(--accent-soft);color:var(--accent-text)}
.pill-row{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:12px}
.market{display:inline-grid;place-items:center;min-width:38px;height:20px;padding:0 6px;border-radius:5px;font-size:10.5px;font-weight:700;letter-spacing:.3px}
.market.wb{background:var(--wb-soft);color:var(--wb)}
.market.ozon{background:var(--ozon-soft);color:var(--ozon)}
.dot{display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--faint);flex:0 0 auto}
.dot.ok{background:var(--ok)}.dot.warn{background:var(--warn)}.dot.bad{background:var(--bad)}
.dot.wb{background:var(--chart-wb)}.dot.ozon{background:var(--chart-ozon)}

/* Alerts */
.alert{padding:10px 14px;border-radius:var(--radius-sm);background:var(--accent-soft);color:var(--accent-text);font-size:13px;margin-bottom:14px}
.alert.error{background:var(--bad-soft);color:var(--bad)}
.alert.warn{background:var(--warn-soft);color:var(--warn)}
.alert:empty{display:none}

/* Login */
.login{min-height:100vh;display:grid;place-items:center;padding:20px}
.login-card{width:min(380px,100%);background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:30px;box-shadow:var(--shadow-sm)}
.login-card .brand{margin-bottom:26px}
.login-card h1{margin-bottom:18px}
.login-card .primary{height:40px;margin-top:4px}
.login-card .alert{margin:14px 0 0}

/* Shell */
.shell{display:grid;grid-template-columns:var(--sidebar) minmax(0,1fr);min-height:100vh}
aside{position:sticky;top:0;height:100vh;display:flex;flex-direction:column;gap:18px;padding:18px 12px;background:var(--surface);border-right:1px solid var(--line);overflow-y:auto}
.brand{display:flex;align-items:center;gap:10px;font-size:16px;font-weight:700;color:var(--text);padding:0 6px}
.brand img{display:block;border-radius:9px}
.brand span{line-height:1.15}
.brand small{display:block;font-size:11px;font-weight:500;color:var(--muted);margin-top:3px}
nav{display:grid;gap:1px}
.nav-group{font-size:10.5px;font-weight:700;letter-spacing:.7px;text-transform:uppercase;color:var(--faint);padding:14px 10px 6px}
.nav-group:first-child{padding-top:4px}
nav button{display:flex;align-items:center;gap:10px;width:100%;height:36px;padding:0 10px;border-radius:var(--radius-sm);color:var(--text-2);font-weight:500;text-align:left}
nav button:hover{background:var(--hover);color:var(--text)}
nav button.active{background:var(--accent-soft);color:var(--accent-text);font-weight:600}
nav button span{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.nav-count{min-width:20px;height:18px;padding:0 6px;border-radius:9px;background:var(--warn-soft);color:var(--warn);font-size:11px;font-weight:700;display:grid;place-items:center;font-variant-numeric:tabular-nums}
.nav-count.info{background:var(--accent-soft);color:var(--accent-text)}
.sidebar-foot{margin-top:auto;display:grid;grid-template-columns:minmax(0,1fr);gap:10px;min-width:0}
.sync-summary{display:grid;grid-template-columns:minmax(0,1fr);gap:6px;padding:10px 12px;border-radius:var(--radius);background:var(--surface-2);border:1px solid var(--line);font-size:12px;color:var(--text-2);min-width:0}
.sync-summary div{display:flex;align-items:center;gap:8px;min-width:0}
.sync-summary span:nth-child(2){flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sync-summary span:last-child{color:var(--muted);font-variant-numeric:tabular-nums;white-space:nowrap}
.user-line{display:flex;align-items:center;gap:9px;padding:4px 2px 0 6px}
.avatar{display:grid;place-items:center;width:30px;height:30px;border-radius:50%;background:var(--accent-soft);color:var(--accent-text);font-weight:700;font-size:12px;flex:0 0 auto}
.user-name{flex:1;min-width:0;font-size:12.5px;line-height:1.3;overflow:hidden}
.user-name strong,.user-name small{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.user-name strong{font-weight:600}
.scrim{display:none}
.content{min-width:0;padding:0 28px 28px}
.topbar{position:sticky;top:0;z-index:20;display:flex;align-items:center;gap:14px;min-height:64px;margin:0 -28px 18px;padding:12px 28px;background:color-mix(in srgb,var(--bg) 88%,transparent);backdrop-filter:blur(8px);border-bottom:1px solid var(--line)}
.topbar .title{flex:1;min-width:0}
.topbar .title p{font-size:12.5px;color:var(--muted);margin-top:2px}
.topbar .title p:empty{display:none}
.topbar-actions{display:flex;align-items:center;gap:8px}
.updated-at{font-size:12px;color:var(--muted);white-space:nowrap}
.menu-toggle{display:none}
#refresh.busy .icon{animation:spin .9s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.theme-light-icon{display:none}
[data-theme=dark] .theme-light-icon{display:block}
[data-theme=dark] .theme-dark-icon{display:none}
main{max-width:1440px;min-width:0}
.tab{display:grid;grid-template-columns:minmax(0,1fr);gap:16px}

/* Section controls share one predictable layout across work screens. */
.section-tools{display:grid;gap:12px;padding-bottom:2px}
.toolbar-main{justify-content:space-between}
.toolbar-main .search-field{flex:1 1 300px;max-width:480px}
.toolbar-main .button{flex:0 0 auto}
.mapping-workflows{display:flex;align-items:start;flex-wrap:wrap;gap:16px 28px}
.mapping-workflow{display:grid;gap:7px;min-width:0}
.workflow-label{font-size:11px;letter-spacing:.04em;font-weight:650;color:var(--muted)}
.table-wrap:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}
.card.flush .table-wrap{scrollbar-width:thin;scrollbar-color:var(--line-strong) transparent}
/* Cards */
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:16px 18px;box-shadow:var(--shadow-sm);min-width:0;scroll-margin-top:80px}
.card.flush{padding:0;overflow:hidden}
.card-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:12px}
.card-head h2{display:flex;align-items:center;gap:8px}
.card-head.padded{padding:14px 18px 0;margin-bottom:10px}
.padded{padding:12px 18px}
.padded-x{padding:0 18px}
details.card summary{cursor:pointer;font-weight:600}
details.card[open] summary{margin-bottom:12px}
.grid-main{display:grid;grid-template-columns:minmax(0,1.65fr) minmax(300px,1fr);gap:16px;align-items:stretch}
.grid-main>.card:not(.flush){display:flex;flex-direction:column}
.grid-main>.card.flush{align-self:start}
.overview-chart{flex:1;display:grid;align-content:center}
.grid-2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;align-items:start}
.grid-users{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(320px,1fr);gap:16px;align-items:start}
#user-form-title{margin-bottom:14px}
#user-form+.hint{margin-top:12px}
.legend{display:flex;align-items:center;gap:6px;font-size:12px;color:var(--muted)}
.legend .dot+*{margin-right:6px}

/* KPI */
.kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:12px}
.kpis:empty{display:none}
.kpi{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:14px 16px;box-shadow:var(--shadow-sm);min-width:0}
.kpi-label{font-size:12px;color:var(--muted);font-weight:500}
.kpi-value{display:block;font-size:26px;font-weight:650;letter-spacing:-.5px;margin:4px 0 2px;font-variant-numeric:tabular-nums;line-height:1.2}
.kpi-note{font-size:12px;color:var(--muted);display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.kpi-note b{font-weight:600;color:var(--text-2)}
.kpi.warn .kpi-value{color:var(--warn)}
button.kpi{text-align:left;cursor:pointer}
button.kpi:hover{border-color:var(--line-strong);background:var(--surface-2)}

/* Status lists */
.status-list,.attention-list{list-style:none;margin:0;padding:0}
.status-list li{display:flex;align-items:center;gap:10px;padding:7px 0;border-bottom:1px solid var(--line)}
.status-list li:last-child{border-bottom:0}
.status-list .label{flex:1;min-width:0}
.status-list .label strong{display:block;font-weight:600;font-size:13px}
.status-list .label small{display:block;overflow-wrap:anywhere}
.status-list .value{font-size:12px;color:var(--muted);white-space:nowrap;font-variant-numeric:tabular-nums}
.attention-list li button{display:flex;align-items:center;gap:10px;width:100%;padding:9px 8px;margin:0 -8px;width:calc(100% + 16px);border-radius:var(--radius-sm);text-align:left}
.attention-list li button:hover{background:var(--hover)}
.attention-list .text{flex:1;min-width:0}
.attention-list .icon{color:var(--faint);width:16px;height:16px}
.attention-count{min-width:30px;height:24px;border-radius:6px;display:grid;place-items:center;font-weight:700;font-size:12px;background:var(--warn-soft);color:var(--warn);font-variant-numeric:tabular-nums}
.attention-count.zero{background:var(--ok-soft);color:var(--ok)}
.all-good{display:flex;align-items:center;gap:8px;color:var(--ok);font-weight:600;padding:8px 0}

/* Tables */
.table-wrap{overflow-x:auto;overscroll-behavior-x:contain}
table{border-collapse:separate;border-spacing:0;width:100%;font-size:13px}
th,td{padding:8px 12px;text-align:left;border-bottom:1px solid var(--line);vertical-align:middle}
th:first-child,td:first-child{padding-left:18px}
th:last-child,td:last-child{padding-right:18px}
th{position:sticky;top:0;background:var(--surface-2);color:var(--muted);font-weight:600;font-size:11.5px;white-space:nowrap}
tbody tr:last-child td{border-bottom:0}
tbody tr:hover td{background:var(--hover)}
tbody tr.clickable{cursor:pointer}
td.n,th.n{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
th.n{width:96px}
#products th:last-child{width:190px}
#order-list th:last-child,#recent-orders th:last-child{width:170px}
td.n{font-weight:600}
td.nowrap{white-space:nowrap}
td.muted{color:var(--muted)}
.cell-main{font-weight:600;color:var(--text)}
.cell-sub{display:block;font-size:12px;color:var(--muted);margin-top:1px}
.cell-title{display:block;max-width:440px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.na{color:var(--faint);font-weight:400}
.diff{color:var(--warn)}
.zero{color:var(--bad)}
.row-link{font:inherit;color:inherit;text-align:left;font-weight:600}
.row-link:hover{color:var(--accent-text)}
.empty{padding:36px 18px;text-align:center;color:var(--muted)}
#products table,#order-list table,#journal table{min-width:760px}
#activity-list table{min-width:760px}
#report-table table{min-width:980px}
#recent-orders table{min-width:520px}
.audit-detail div{font-size:12.5px;color:var(--text-2)}

/* Pager */
.pager{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:8px 12px 8px 18px;border-top:1px solid var(--line);background:var(--surface);font-size:12.5px;color:var(--muted);flex-wrap:wrap}
.pager:empty{display:none}
.pager-size{display:flex;align-items:center;gap:8px}
.pager-size .segmented button{height:24px;padding:0 8px;font-size:12px}
.page-controls{display:flex;align-items:center;gap:4px}
.page-button{display:grid;place-items:center;width:30px;height:30px;border-radius:6px;color:var(--text-2);font-size:16px}
.page-button:hover:not(:disabled){background:var(--hover)}
.page-button:disabled{opacity:.3}
.page-current{min-width:62px;text-align:center;font-variant-numeric:tabular-nums;color:var(--text-2)}

/* Filters */
.filters{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.filters.compact{margin-bottom:10px}
.search-field{position:relative;display:block;flex:0 1 340px;min-width:220px}
.search-field .icon{position:absolute;left:10px;top:9px;width:17px;height:17px;color:var(--faint);pointer-events:none}
.search-field input{padding-left:34px}
.inline-label{display:flex;align-items:center;gap:8px;font-weight:500;color:var(--muted);white-space:nowrap}
.inline-label .select-control{width:200px}

/* Rows (connections) */
.rows{display:grid}
.row{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 0;border-bottom:1px solid var(--line)}
.row:last-child{border-bottom:0}
.row>div{min-width:0;overflow-wrap:anywhere}
.row strong{display:block;font-weight:600}
.row small{display:block;margin-top:2px}

/* Overview chart */
.overview-chart{min-height:200px}
.bars-svg{display:block;width:100%;height:auto;overflow:visible}
.bars-svg text{fill:var(--muted);font-size:11px;font-family:inherit}
.bars-svg .grid{stroke:var(--line);stroke-width:1}
.bars-svg .bar-wb{fill:var(--chart-wb)}
.bars-svg .bar-ozon{fill:var(--chart-ozon)}
.bars-svg .bar-group:hover rect.hit{fill:var(--hover)}
.bars-svg rect.hit{fill:transparent}
.bars-svg .total{fill:var(--text-2);font-weight:600}

/* Reports */
.report-bar{display:grid;gap:12px}
.report-form{display:grid;grid-template-columns:minmax(200px,1.4fr) minmax(140px,1fr) minmax(140px,1fr) auto;gap:12px;align-items:end}
.report-charts{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:16px;align-items:start}
.chart-card{margin:0}
.chart-card h3{font-size:14.5px;font-weight:650;margin-bottom:2px}
.chart-card>p{font-size:12px;color:var(--muted);margin-bottom:10px}
.chart-plot{position:relative}
.chart-svg{display:block;width:100%;height:auto;overflow:visible;color:var(--muted)}
.chart-svg text{fill:var(--muted);font-family:inherit;font-size:13px}
.chart-grid{stroke:var(--line);stroke-width:1}
.chart-legend{display:flex;gap:14px;flex-wrap:wrap;margin-top:8px;font-size:12px;color:var(--muted)}
.chart-key{display:inline-flex;gap:6px;align-items:center}
.chart-key i{display:inline-block;flex:0 0 22px;width:22px;height:3px;background:var(--series-color);border-radius:2px}
.chart-bars{display:grid;gap:16px;padding:8px 0}
.chart-bar-label{display:flex;justify-content:space-between;gap:12px;font-size:13px;margin-bottom:6px;color:var(--text-2)}
.chart-bar-track{height:14px;overflow:hidden;border-radius:6px;background:var(--neutral-soft)}
.chart-bar-fill{height:100%;border-radius:4px;background:var(--series-color)}
.chart-data{margin-top:10px;font-size:12px}
.chart-data summary{cursor:pointer;color:var(--muted)}
.chart-data table{font-size:12px}
.chart-data .table-wrap{max-height:240px;margin-top:8px;border:1px solid var(--line);border-radius:var(--radius-sm)}
.chart-empty{padding:30px 10px;color:var(--muted);text-align:center}
.chart-point{cursor:pointer;outline:none}
.chart-dot{stroke:var(--surface);stroke-width:1.5}
.chart-point[data-active=true] .chart-dot,.chart-point:focus .chart-dot{r:6;stroke:var(--text);stroke-width:2}
.chart-tooltip{position:absolute;z-index:10;pointer-events:none;min-width:170px;max-width:calc(100% - 12px);padding:9px 11px;border:1px solid var(--line);border-radius:var(--radius-sm);background:var(--surface);color:var(--text);box-shadow:var(--shadow);font-size:12px}
.chart-tooltip-date{color:var(--muted);font-size:11px;margin-bottom:5px}
.chart-tooltip-row{display:flex;justify-content:space-between;gap:16px;line-height:1.6}
.series-wb{--series-color:var(--chart-wb)}.series-ozon{--series-color:var(--chart-ozon)}.series-balance{--series-color:var(--chart-stock)}.series-incoming{--series-color:var(--chart-in)}.series-outgoing{--series-color:var(--chart-out)}

/* Dialog */
dialog{width:min(680px,94vw);max-height:90vh;padding:0;border:1px solid var(--line);border-radius:14px;background:var(--surface);color:var(--text);box-shadow:var(--shadow)}
dialog::backdrop{background:#0f172a73}
.dialog-head{position:sticky;top:0;display:flex;align-items:flex-start;gap:12px;padding:18px 20px 14px;background:var(--surface);border-bottom:1px solid var(--line)}
.dialog-head>div{flex:1;min-width:0}
.dialog-head h2{font-size:16px;margin-bottom:4px}
.dialog-head .hint{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
#product-detail{padding:16px 20px}
#adjust-section{margin:0 20px 20px}
.stock-trio{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin-bottom:16px}
.stock-trio div{border:1px solid var(--line);border-radius:var(--radius-sm);padding:10px 12px}
.stock-trio span{font-size:12px;color:var(--muted)}
.stock-trio strong{display:block;font-size:22px;font-weight:650;font-variant-numeric:tabular-nums}
dl{display:grid;grid-template-columns:170px minmax(0,1fr);gap:7px 14px;margin:0;font-size:13px}
dt{color:var(--muted)}
dd{margin:0;overflow-wrap:anywhere;font-variant-numeric:tabular-nums}
.dl-group{grid-column:1/-1;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.6px;color:var(--faint);margin-top:8px}

/* Catalog matching */
.mapping-intro{display:grid;grid-template-columns:minmax(0,1fr);gap:12px}
.mapping-intro h2{margin-bottom:4px}
.mapping-intro .hint{margin:0;max-width:920px}
.mapping-actions{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.mapping-api-status{min-height:16px}
.mapping-api-status:empty{display:none}
.file-button{position:relative;display:inline-flex;align-items:center;justify-content:center;height:36px;padding:0 14px;border:1px solid var(--line-strong);border-radius:var(--radius-sm);background:var(--surface);color:var(--text-2);font-size:12.5px;font-weight:600;cursor:pointer}
.file-button:hover{background:var(--hover)}
.file-button input{position:absolute;inset:0;width:100%;height:100%;padding:0;opacity:0;cursor:pointer}
.matcher-card>.card-head{align-items:flex-start}
.matcher-card>.card-head .hint{margin-top:3px}
.matcher-grid{display:grid;grid-template-columns:minmax(0,1fr) 140px minmax(0,1fr);gap:16px;align-items:start}
.matcher-side{min-width:0;display:grid;gap:10px}
.matcher-side h3{display:flex;align-items:center;gap:8px;font-size:14px}
.mapping-selected{display:flex;align-items:center;gap:10px;min-height:60px;padding:8px 10px;border:1px solid var(--accent);border-radius:var(--radius-sm);background:var(--accent-soft);color:var(--text);font-size:12px}
.mapping-selected.empty{border-color:var(--line);background:var(--surface-2);color:var(--muted);justify-content:center}
.mapping-selected .link{margin-left:auto;flex:0 0 auto}
.mapping-results{display:grid;align-content:start;gap:6px;max-height:300px;overflow:auto;overscroll-behavior:contain}
.mapping-result{min-height:72px;display:flex;align-items:center;gap:9px;width:100%;min-width:0;padding:7px 8px;border:1px solid var(--line);border-radius:var(--radius-sm);background:var(--surface);text-align:left;color:var(--text);cursor:pointer}
.mapping-result:hover,.mapping-result.selected{border-color:var(--accent);background:var(--hover)}
.mapping-image{display:grid;place-items:center;flex:0 0 44px;width:44px;height:48px;overflow:hidden;border-radius:5px;background:var(--surface-2);color:var(--muted);font-size:10px;font-weight:700}
.mapping-image img{width:100%;height:100%;object-fit:contain}
.mapping-result-text{display:grid;gap:2px;min-width:0;flex:1}
.mapping-result-text strong{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;overflow-wrap:anywhere;font-size:12.5px;font-weight:600;line-height:1.4}
.mapping-result-text small{overflow-wrap:anywhere;color:var(--muted);font-size:11.5px;line-height:1.4}
.mapping-result-action{flex:0 0 auto;color:var(--accent-text);font-size:11px;font-weight:600}
.matcher-center{align-self:center;display:grid;justify-items:center;gap:10px;color:var(--faint)}
.matcher-center>.icon{width:22px;height:22px}
.matcher-center .primary{width:100%}
.mapping-effect{margin-top:12px}
#mapping-list-search{max-width:560px;margin-bottom:10px}
#mapping-list .cell-title{max-width:440px}
#mapping-list .link{white-space:nowrap}

/* Responsive */
@media(max-width:1180px){
  .grid-main,.grid-users,.report-charts{grid-template-columns:minmax(0,1fr)}
  .report-form{grid-template-columns:repeat(3,minmax(0,1fr))}
  .report-form button{grid-column:1/-1;justify-self:start}
}
@media(max-width:900px){
  .shell{display:block}
  aside{position:fixed;z-index:60;left:0;top:0;width:min(280px,86vw);transform:translateX(-102%);transition:transform .18s ease;box-shadow:var(--shadow)}
  .shell.menu-open aside{transform:none}
  .shell.menu-open .scrim{display:block;position:fixed;inset:0;z-index:50;background:#0f172a66}
  .menu-toggle{display:inline-grid}
  .content{padding:0 14px 20px}
  .topbar{margin:0 -14px 14px;padding:10px 14px;gap:8px}
  .updated-at{display:none}
  .grid-2{grid-template-columns:minmax(0,1fr)}
  .matcher-grid{grid-template-columns:minmax(0,1fr) 110px minmax(0,1fr);gap:10px}
}
@media(max-width:640px){
  h1{font-size:17px}
  .topbar .title p{display:none}
  #refresh span{display:none}
  #refresh{width:36px;padding:0}
  .kpis{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
  .kpi{padding:12px}
  .kpi-value{font-size:22px}
  .search-field{flex:1 1 100%;min-width:0}
  .filters>*{min-width:0;max-width:100%}
  .filters .chips{flex:1 1 100%;flex-wrap:nowrap;overflow-x:auto;padding-bottom:2px}
  #recent-orders table{min-width:0}
  #recent-orders th:nth-child(1),#recent-orders td:nth-child(1){display:none}
  #recent-orders th:nth-child(2),#recent-orders td:nth-child(2){padding-left:18px}
  #recent-orders .cell-title{max-width:150px}
  #recent-orders th:last-child{width:auto}
  #products table{min-width:650px}
  #products th:nth-child(4),#products td:nth-child(4){padding-right:18px}
  #products th.n{width:52px}
  #products .cell-title{max-width:200px}
  .chips button{flex:0 0 auto}
  .form-grid,.report-form{grid-template-columns:minmax(0,1fr)}
  .matcher-grid{grid-template-columns:minmax(0,1fr)}
  .matcher-center{grid-template-columns:minmax(0,1fr);justify-items:stretch;align-items:center;order:3}
  .matcher-center>.icon{display:none}
  .matcher-side:last-child{order:2}
  .section-tools>.chips{flex-wrap:nowrap;overflow-x:auto;max-width:100%;padding-bottom:4px;scrollbar-width:thin}
  .mapping-workflows{display:grid;gap:16px}
  .mapping-actions>*{flex:1 1 auto;min-width:115px}
  .toolbar-main .search-field{max-width:none}
  .mapping-actions .file-button{width:auto}
  .report-form button{width:100%}
  .inline-label{width:100%;justify-content:space-between}
  .inline-label .select-control{width:auto;flex:1}
  .period-presets{display:flex;overflow-x:auto;flex-wrap:nowrap;max-width:100%}
  .period-presets button{flex:0 0 auto}
  dl{grid-template-columns:minmax(0,1fr);gap:2px}
  dd{margin-bottom:8px}
  .stock-trio strong{font-size:18px}
  .chart-svg text{font-size:22px}
  .pager{justify-content:center}
  .card-head.padded{flex-wrap:wrap}
}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{transition:none!important;animation:none!important}}

.external-decrease-panel{border:1px solid var(--line-strong);border-radius:8px;padding:12px;margin:12px 0;background:var(--surface-2);display:grid;gap:8px}
.decrease-actions{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.decrease-actions button{height:auto;min-height:36px;white-space:normal;padding:9px 12px}
.external-decrease-panel .alert{margin:0}
@media(max-width:560px){.decrease-actions{grid-template-columns:minmax(0,1fr)}}

@media(pointer:coarse){
  .primary,.button,.icon-button,.select-trigger,input,select,.file-button{min-height:44px}
  .chips button,.segmented button,.page-button{min-height:40px}
  .search-field .icon{top:13px}
}

.sync-row-action{display:flex;align-items:center;gap:10px;min-width:0;width:100%;padding:4px 0;text-align:left;border-radius:5px}
.sync-row-action:hover{background:var(--hover)}
.sync-row-action>.icon{width:14px;height:14px;color:var(--muted)}
.sync-row-action .label{flex:1}
#stock-import-dialog{width:min(860px,96vw)}
#stock-import-preview table{min-width:560px}