:root{
  --bg:#f6f6f8;--surface:#fff;--sidebar:#fbfbfc;--text:#111318;--muted:#646873;--faint:#9a9ea8;
  --line:#e7e7eb;--line-strong:#d6d7dc;--hover:#f0f0f3;
  --accent:#4f46e5;--accent-hover:#4338ca;--accent-weak:#eef0ff;--accent-text:#4338ca;
  --up:#dc2626;--up-bg:#fef2f2;--down:#059669;--down-bg:#ecfdf5;--warn:#b45309;--warn-bg:#fffbeb;
  --shadow:0 1px 2px rgba(16,18,24,.04),0 1px 3px rgba(16,18,24,.06);
  --shadow-lg:0 12px 40px rgba(16,18,24,.18);
}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){
  --bg:#0b0c0f;--surface:#131419;--sidebar:#0f1014;--text:#ececf1;--muted:#9b9da7;--faint:#6c6e78;
  --line:#23242b;--line-strong:#30313a;--hover:#1b1c22;
  --accent:#7c7fff;--accent-hover:#9194ff;--accent-weak:#1d1f3d;--accent-text:#a9abff;
  --up:#f87171;--up-bg:#2a1517;--down:#34d399;--down-bg:#0e2a20;--warn:#fbbf24;--warn-bg:#2a2110;
  --shadow:0 1px 2px rgba(0,0,0,.4);--shadow-lg:0 12px 40px rgba(0,0,0,.6);color-scheme:dark}}
:root[data-theme="dark"]{
  --bg:#0b0c0f;--surface:#131419;--sidebar:#0f1014;--text:#ececf1;--muted:#9b9da7;--faint:#6c6e78;
  --line:#23242b;--line-strong:#30313a;--hover:#1b1c22;
  --accent:#7c7fff;--accent-hover:#9194ff;--accent-weak:#1d1f3d;--accent-text:#a9abff;
  --up:#f87171;--up-bg:#2a1517;--down:#34d399;--down-bg:#0e2a20;--warn:#fbbf24;--warn-bg:#2a2110;
  --shadow:0 1px 2px rgba(0,0,0,.4);--shadow-lg:0 12px 40px rgba(0,0,0,.6);color-scheme:dark}

*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;background:var(--bg);color:var(--text);font:14px/1.45 Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;font-feature-settings:"cv11","ss01";-webkit-font-smoothing:antialiased}
svg.i{width:16px;height:16px;flex:none;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.num,td,.kpi b{font-variant-numeric:tabular-nums}
.hidden{display:none!important}
.muted{color:var(--muted)}.faint{color:var(--faint)}

/* ---------- shell ---------- */
.app{display:grid;grid-template-columns:248px 1fr;height:100%;transition:grid-template-columns .18s ease}
.app.collapsed{grid-template-columns:60px 1fr}
.sb{background:var(--sidebar);border-right:1px solid var(--line);display:flex;flex-direction:column;min-height:0;overflow:hidden}
.brand{display:flex;align-items:center;gap:10px;padding:14px 14px 10px;height:58px}
.logo{width:30px;height:30px;border-radius:8px;flex:none;display:grid;place-items:center;color:#fff;font-weight:700;font-size:12px;letter-spacing:.02em;
  background:linear-gradient(135deg,#6366f1,#8b5cf6 60%,#a855f7)}
.brand-t{min-width:0;line-height:1.2}
.brand-t b{display:block;font-size:14px;font-weight:600;white-space:nowrap}
.brand-t span{font-size:12px;color:var(--muted);white-space:nowrap}
.sb-search{margin:4px 10px 8px;display:flex;align-items:center;gap:8px;padding:7px 10px;border:1px solid var(--line);border-radius:8px;background:var(--surface);color:var(--faint);cursor:pointer;font:inherit;font-size:13px;text-align:left}
.sb-search:hover{border-color:var(--line-strong)}
.sb-search span{flex:1;white-space:nowrap;overflow:hidden}
kbd{font:500 11px/1 Inter,sans-serif;color:var(--muted);border:1px solid var(--line);border-radius:4px;padding:3px 5px;background:var(--bg)}
.nav{flex:1;overflow-y:auto;padding:4px 8px 12px}
.nav-g{font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.06em;color:var(--faint);padding:14px 8px 6px;white-space:nowrap}
.nav a{display:flex;align-items:center;gap:10px;padding:7px 8px;border-radius:7px;color:var(--muted);text-decoration:none;font-weight:500;font-size:13.5px;white-space:nowrap;position:relative}
.nav a:hover{background:var(--hover);color:var(--text)}
.nav a.on{background:var(--surface);color:var(--text);box-shadow:var(--shadow);border:1px solid var(--line);padding:6px 7px}
.nav a.on svg{color:var(--accent)}
.nav a .lbl{flex:1;overflow:hidden;text-overflow:ellipsis}
.nav a.soon{color:var(--faint)}
.tagx{font-size:10.5px;font-weight:600;padding:1px 6px;border-radius:999px;background:var(--hover);color:var(--faint)}
.cnt{font-size:11px;font-weight:600;min-width:18px;height:18px;padding:0 5px;border-radius:999px;background:var(--accent);color:#fff;display:grid;place-items:center}
.sb-foot{border-top:1px solid var(--line);padding:10px 8px;display:flex;flex-direction:column;gap:2px}
.user{display:flex;align-items:center;gap:10px;padding:6px 8px;white-space:nowrap}
.ava{width:28px;height:28px;border-radius:50%;background:var(--accent-weak);color:var(--accent-text);display:grid;place-items:center;font-size:11px;font-weight:600;flex:none}
.user b{display:block;font-size:13px;font-weight:500}.user span{font-size:12px;color:var(--muted)}
.nav-sep{display:none}

.main{display:flex;flex-direction:column;min-width:0;min-height:0;overflow-y:auto;overflow-x:hidden}
.top{position:sticky;top:0;z-index:20;height:58px;flex:none;display:flex;align-items:center;gap:10px;padding:0 24px;background:color-mix(in srgb,var(--bg) 85%,transparent);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.crumbs{display:flex;align-items:center;gap:6px;font-size:13.5px;color:var(--muted);min-width:0;white-space:nowrap;overflow:hidden}
.crumbs b{color:var(--text);font-weight:500;overflow:hidden;text-overflow:ellipsis}
.crumbs .sl{color:var(--faint)}
.sp{flex:1}
.icon-btn{width:32px;height:32px;display:grid;place-items:center;border-radius:8px;border:1px solid transparent;background:none;color:var(--muted);cursor:pointer;position:relative;padding:0}
.icon-btn:hover{background:var(--hover);color:var(--text)}
.dotn::after{content:"";position:absolute;top:7px;right:8px;width:7px;height:7px;border-radius:50%;background:var(--up);border:2px solid var(--bg)}
#burger{display:none}
.content{padding:24px 24px 0;max-width:1320px;width:100%;margin:0 auto;flex:1}

/* ---------- page + cards ---------- */
.ph{display:flex;align-items:flex-end;gap:16px;flex-wrap:wrap;margin-bottom:20px}
.ph h1{font-size:22px;font-weight:600;letter-spacing:-.01em;margin:0 0 4px}
.ph p{margin:0;color:var(--muted)}
.ph .grow{flex:1;min-width:240px}
.card{background:var(--surface);border:1px solid var(--line);border-radius:12px;box-shadow:var(--shadow);margin-bottom:16px}
.card-h{display:flex;align-items:center;gap:12px;padding:14px 18px;border-bottom:1px solid var(--line)}
.card-h h2{font-size:15px;font-weight:600;margin:0}
.card-h p{margin:2px 0 0;color:var(--muted);font-size:13px}
.card-b{padding:18px}
.grid{display:grid;gap:16px}
.g-2{grid-template-columns:2fr 1fr}

.btn{font:inherit;font-weight:500;font-size:13.5px;display:inline-flex;align-items:center;gap:7px;border:1px solid var(--line-strong);background:var(--surface);color:var(--text);padding:7px 13px;border-radius:8px;cursor:pointer;text-decoration:none;white-space:nowrap;box-shadow:var(--shadow)}
.btn:hover{background:var(--hover)}
.btn.primary{background:var(--accent);border-color:var(--accent);color:#fff}
.btn.primary:hover{background:var(--accent-hover)}
.btn.ghost{border-color:transparent;background:none;box-shadow:none;color:var(--muted)}
.btn.ghost:hover{background:var(--hover);color:var(--text)}
.btn.sm{padding:5px 10px;font-size:12.5px}
.btn:disabled{opacity:.5;cursor:default}
.row{display:flex;gap:10px;align-items:center;flex-wrap:wrap}

input[type=number],input[type=search],input[type=text],input[type=email],select{font:inherit;font-size:13.5px;color:var(--text);background:var(--surface);border:1px solid var(--line-strong);border-radius:8px;padding:6px 10px;outline:none}
input:focus,select:focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-weak)}
.search{position:relative;display:inline-flex;align-items:center}
.search svg{position:absolute;left:10px;color:var(--faint)}
.search input{padding-left:32px;width:240px}

.kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:12px;margin-bottom:16px}
.kpi{background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:14px 16px;box-shadow:var(--shadow)}
.kpi span{display:flex;align-items:center;gap:6px;color:var(--muted);font-size:12.5px;font-weight:500}
.kpi b{display:block;font-size:24px;font-weight:600;letter-spacing:-.02em;margin-top:6px}
.kpi small{color:var(--faint);font-size:12px}
.kpi.flat{box-shadow:none;background:var(--bg)}

.badge{display:inline-flex;align-items:center;gap:4px;font-size:11.5px;font-weight:500;padding:2px 8px;border-radius:999px;background:var(--hover);color:var(--muted);white-space:nowrap}
.badge.acc{background:var(--accent-weak);color:var(--accent-text)}
.badge.warn{background:var(--warn-bg);color:var(--warn)}
.badge.onec-mark{vertical-align:2px;margin-left:4px}.badge.onec-mark .i{width:12px;height:12px}
.badge.ok{background:var(--down-bg);color:var(--down)}
.badge.bad{background:var(--up-bg);color:var(--up)}
.badge.dot::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor}
.up{color:var(--up)}.down{color:var(--down)}

/* ---------- tables ---------- */
.tbl-wrap{overflow:auto;border-top:1px solid var(--line)}
.tbl-wrap.boxed{border:1px solid var(--line);border-radius:10px}
table{border-collapse:separate;border-spacing:0;width:100%}
th,td{padding:9px 14px;border-bottom:1px solid var(--line);text-align:right;white-space:nowrap}
th{position:sticky;top:0;z-index:1;background:var(--surface);font-size:12px;color:var(--muted);font-weight:500;text-align:right}
td:first-child,th:first-child{text-align:left;white-space:normal;min-width:240px}
th.l,td.l{text-align:left}
tbody tr:hover td{background:var(--hover)}
tbody tr:last-child td{border-bottom:0}
tr.alert td{background:color-mix(in srgb,var(--warn-bg) 70%,transparent)}
tr.alert td:first-child{box-shadow:inset 3px 0 0 var(--warn)}
td .sub{color:var(--muted);font-size:12px}
input.mk{width:76px;text-align:right;padding:4px 8px}
input.mk.custom{border-color:var(--accent);background:var(--accent-weak)}
.chg{display:inline-block;min-width:58px;text-align:right;font-size:12.5px;font-weight:500}

/* ---------- price update wizard ---------- */
.stepper{display:flex;list-style:none;margin:0 0 20px;padding:14px 18px;background:var(--surface);border:1px solid var(--line);border-radius:12px;box-shadow:var(--shadow)}
.stepper li{flex:1 1 auto;min-width:0;display:flex;align-items:center;gap:10px;color:var(--muted);font-size:13px;font-weight:500;white-space:nowrap}
.stepper li:last-child{flex:0 1 auto}
.stepper .st-l{overflow:hidden;text-overflow:ellipsis}
.stepper li:not(:last-child)::after{content:"";flex:1;height:1px;background:var(--line-strong);margin:0 14px;min-width:16px}
.stepper li.done:not(:last-child)::after{background:var(--accent)}
.stepper .dot{width:24px;height:24px;border-radius:50%;border:1.5px solid var(--line-strong);display:grid;place-items:center;font-size:12px;flex:none;color:var(--muted)}
.stepper li.on{color:var(--text)}
.stepper li.on .dot{border-color:var(--accent);background:var(--accent);color:#fff;box-shadow:0 0 0 4px var(--accent-weak)}
.stepper li.done{color:var(--text);cursor:pointer}
.stepper li.done .dot{background:var(--accent-weak);border-color:transparent;color:var(--accent-text)}
.stepper li.done .dot svg{width:13px;height:13px;stroke-width:2.6}

.drop{border:1.5px dashed var(--line-strong);border-radius:12px;padding:40px 20px;text-align:center;transition:.15s;background:var(--bg)}
.drop.hover{border-color:var(--accent);background:var(--accent-weak)}
.drop .ic{width:44px;height:44px;border-radius:12px;margin:0 auto 12px;display:grid;place-items:center;background:var(--surface);border:1px solid var(--line);color:var(--accent);box-shadow:var(--shadow)}
.drop .ic svg{width:20px;height:20px}
.drop h3{margin:0 0 4px;font-size:15px;font-weight:600}
.drop p{margin:0 0 16px;color:var(--muted)}
.field{display:flex;flex-direction:column;gap:6px;margin-bottom:16px}
.field label{font-size:12.5px;font-weight:500;color:var(--muted)}
.field select{max-width:320px}

.seg{display:inline-flex;padding:3px;border-radius:9px;background:var(--hover);gap:2px;overflow-x:auto;max-width:100%}
.seg button{font:inherit;font-size:13px;font-weight:500;border:0;background:none;color:var(--muted);padding:6px 12px;border-radius:7px;cursor:pointer;white-space:nowrap}
.seg button.on{background:var(--surface);color:var(--text);box-shadow:var(--shadow)}
.toolbar{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:12px 18px;border-bottom:1px solid var(--line)}
.toggle{display:inline-flex;align-items:center;gap:8px;color:var(--muted);font-size:13px;cursor:pointer;user-select:none}
.toggle input{appearance:none;width:30px;height:18px;border-radius:999px;background:var(--line-strong);position:relative;cursor:pointer;margin:0;transition:.15s}
.toggle input::after{content:"";position:absolute;top:2px;left:2px;width:14px;height:14px;border-radius:50%;background:#fff;transition:.15s;box-shadow:0 1px 2px rgba(0,0,0,.2)}
.toggle input:checked{background:var(--accent)}
.toggle input:checked::after{left:14px}
.legend{padding:10px 18px;color:var(--muted);font-size:12.5px;border-top:1px solid var(--line)}

.actionbar{position:sticky;bottom:0;z-index:5;display:flex;align-items:center;gap:10px;padding:12px 0 16px;margin-top:4px;background:linear-gradient(to top,var(--bg) 70%,transparent)}
.actionbar .hint{color:var(--muted);font-size:13px}

/* ---------- lists ---------- */
.list{list-style:none;margin:0;padding:0}
.list li{display:flex;align-items:flex-start;gap:12px;padding:12px 18px;border-bottom:1px solid var(--line)}
.list li:last-child{border-bottom:0}
.list .ic{width:30px;height:30px;border-radius:8px;display:grid;place-items:center;background:var(--hover);color:var(--muted);flex:none}
.list .ic.acc{background:var(--accent-weak);color:var(--accent-text)}
.list .ic.ok{background:var(--down-bg);color:var(--down)}
.list b{font-weight:500}
.list small{display:block;color:var(--faint);font-size:12px;margin-top:1px}
.callout{display:flex;align-items:center;gap:16px;padding:18px;border-radius:12px;border:1px solid color-mix(in srgb,var(--accent) 30%,var(--line));background:linear-gradient(135deg,var(--accent-weak),var(--surface) 70%);margin-bottom:16px;flex-wrap:wrap}
.callout .ic{width:40px;height:40px;border-radius:10px;display:grid;place-items:center;background:var(--accent);color:#fff;flex:none}
.callout .ic svg{width:20px;height:20px}
.callout h3{margin:0 0 2px;font-size:15px;font-weight:600}
.callout p{margin:0;color:var(--muted)}
.callout .grow{flex:1;min-width:220px}
.pl-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:12px}
.pl{border:1px solid var(--line);border-radius:12px;padding:16px;background:var(--surface);display:flex;flex-direction:column;gap:10px;box-shadow:var(--shadow)}
.pl h3{margin:0;font-size:15px;font-weight:600;display:flex;align-items:center;gap:8px}
.pl .meta{color:var(--muted);font-size:13px}
.empty{text-align:center;padding:64px 20px;color:var(--muted)}
.empty .ic{width:52px;height:52px;border-radius:14px;margin:0 auto 14px;display:grid;place-items:center;background:var(--accent-weak);color:var(--accent-text)}
.empty .ic svg{width:24px;height:24px}
.empty h2{color:var(--text);font-size:18px;margin:0 0 6px;font-weight:600}
.empty p{max-width:440px;margin:0 auto}

/* ---------- settings: users ---------- */
.u-form{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:0 16px}
.u-form .field select,.u-form .field input{max-width:none;width:100%}
.u-form .full{grid-column:1/-1}
.pass{display:flex;gap:8px}
.pass input{flex:1;min-width:0}
.mono{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;letter-spacing:.02em}
.err{color:var(--up);font-size:13px;margin:0;min-height:1em}
.creds{display:grid;grid-template-columns:auto 1fr;gap:6px 16px;padding:14px 16px;border-radius:10px;background:var(--bg);border:1px solid var(--line);margin:0 0 14px;font-size:14px;overflow-x:auto}
.creds dt{color:var(--muted)}.creds dd{margin:0;font-weight:500}
.ucell{display:flex;align-items:center;gap:10px}
.ucell b{font-weight:500;display:block}
.ucell small{color:var(--muted);font-size:12.5px}
tr.off td{color:var(--faint)}
.acts{display:inline-flex;gap:4px;justify-content:flex-end}
.btn.danger{color:var(--up)}
.btn.danger.armed{background:var(--up);border-color:var(--up);color:#fff}
.roles{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:12px;padding:18px}
.roles div{border:1px solid var(--line);border-radius:10px;padding:12px 14px}
.roles b{display:block;font-weight:600;margin-bottom:4px}
.roles span{color:var(--muted);font-size:13px}

/* ---------- palette, toast ---------- */
.overlay{position:fixed;inset:0;z-index:50;background:rgba(10,12,16,.4);backdrop-filter:blur(2px);display:flex;justify-content:center;align-items:flex-start;padding:12vh 16px 16px}
.palette{width:560px;max-width:100%;background:var(--surface);border:1px solid var(--line);border-radius:14px;box-shadow:var(--shadow-lg);overflow:hidden}
.palette input{width:100%;border:0;border-bottom:1px solid var(--line);border-radius:0;padding:16px 18px;font-size:15px;box-shadow:none!important}
.palette ul{list-style:none;margin:0;padding:6px;max-height:340px;overflow:auto}
.palette li{display:flex;align-items:center;gap:10px;padding:9px 12px;border-radius:8px;cursor:pointer;color:var(--muted)}
.palette li .g{margin-left:auto;font-size:12px;color:var(--faint)}
.palette li.on{background:var(--hover);color:var(--text)}
.toast{position:fixed;left:50%;bottom:calc(24px + env(safe-area-inset-bottom, 0px));transform:translate(-50%,8px);background:var(--text);color:var(--bg);padding:10px 16px;border-radius:10px;opacity:0;transition:.2s;pointer-events:none;z-index:60;display:flex;align-items:center;gap:8px;font-weight:500;box-shadow:var(--shadow-lg)}
.toast.on{opacity:1;transform:translate(-50%,0)}
.backdrop{display:none}

/* ---------- responsive ---------- */
@media (max-width:1000px){ .g-2{grid-template-columns:1fr} }
@media (max-width:1180px){ .stepper li:not(.on) .st-l{display:none} }
@media (max-width:860px){
  .app,.app.collapsed{grid-template-columns:1fr}
  .sb{position:fixed;inset:0 auto 0 0;width:272px;z-index:40;transform:translateX(-100%);transition:transform .2s ease;box-shadow:var(--shadow-lg)}
  .app.drawer .sb{transform:none}
  .app.drawer .backdrop{display:block;position:fixed;inset:0;z-index:39;background:rgba(10,12,16,.4)}
  .app.collapsed .brand-t,.app.collapsed .nav-g,.app.collapsed .lbl,.app.collapsed .tagx,.app.collapsed .sb-search span,.app.collapsed .user div{display:revert}
  .app.collapsed .nav-sep{display:none}
  .app.collapsed .nav a{justify-content:flex-start}
  #collapse{display:none}
  #burger{display:grid}
  .top{padding:0 16px}
  .content{padding:16px 16px 0}
  .stepper{padding:12px}
  .stepper li:not(:last-child)::after{margin:0 8px}
  .search input{width:100%}
  .search{flex:1;min-width:160px}
  .hide-m{display:none}
  .kpis{grid-template-columns:1fr 1fr;gap:10px}
  .kpi{padding:12px}
  .kpi b{font-size:20px}
}

/* Rails shell additions */
.nav-link-icon{width:16px;flex:none;text-align:center;font-size:15px}.nav-g{margin:0}.sb-foot .nav{padding:0;overflow:visible}.content .empty{padding:54px 20px}.content .empty p{max-width:480px}.nav a[aria-current="page"]{background:var(--surface);color:var(--text);box-shadow:var(--shadow);border:1px solid var(--line);padding:6px 7px}.nav a[aria-current="page"] .nav-link-icon{color:var(--accent)}.placeholder-icon{font-size:22px;font-weight:600}.notice{padding:12px 16px;border:1px solid var(--line);border-radius:8px;background:var(--surface);margin-bottom:16px}.palette li a{display:flex;align-items:center;gap:10px;color:inherit;text-decoration:none;width:100%}.palette li:hover,.palette li:focus-within{background:var(--hover)}.palette .g{margin-left:auto;font-size:12px;color:var(--faint)}.theme-select{font:inherit;border:0;background:none;color:var(--muted);cursor:pointer;padding:6px 8px;text-align:left}.theme-select:hover{color:var(--text)}

.auth-main{min-height:100vh;display:grid;place-items:center;padding:20px}.auth-card{width:min(420px,100%);background:var(--surface);border:1px solid var(--line);border-radius:14px;box-shadow:var(--shadow-lg)}.auth-card .brand{height:auto;padding:20px 20px 0}.auth-card .card-b{padding:20px}.auth-card h1{font-size:22px;margin:0 0 6px}.auth-card .field{margin-top:20px}.auth-card input{width:100%}.auth-card .btn{justify-content:center;width:100%}.user-table select{min-width:130px}.user-form{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:14px}.user-form .field{margin:0}.user-form input,.user-form select{width:100%}.user-form .actions{align-self:end}.creds dd{overflow-wrap:anywhere}

input[type=password]{font:inherit;font-size:13.5px;color:var(--text);background:var(--surface);border:1px solid var(--line-strong);border-radius:8px;padding:6px 10px;outline:none}input[type=password]:focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-weak)}

/* Индикаторы загрузки и фоновой обработки */
.progress{position:relative;height:6px;border-radius:999px;background:var(--accent-weak);overflow:hidden}
.progress>span{position:absolute;inset:0 auto 0 0;width:0;background:var(--accent);border-radius:inherit;transition:width .2s ease}
.progress.indeterminate>span{width:35%;animation:progress-slide 1.3s ease-in-out infinite}
@keyframes progress-slide{0%{left:-35%}100%{left:100%}}
.upload-progress{display:flex;flex-direction:column;gap:8px;margin-bottom:16px;max-width:520px}
.upload-progress .row{font-size:12.5px}
.upload-progress[hidden],.notice[hidden]{display:none}
.spinner{width:16px;height:16px;border-radius:50%;border:2px solid var(--accent-weak);border-top-color:var(--accent);animation:spin .8s linear infinite;flex:none}
@keyframes spin{to{transform:rotate(360deg)}}
.processing .card-b{display:flex;flex-direction:column;gap:14px}
.processing p{margin:0;font-size:12.5px}
.proc-steps{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px;font-size:13px;color:var(--muted)}
.proc-steps li{display:flex;align-items:center;gap:10px}
.proc-steps .dot{width:18px;height:18px;border-radius:50%;border:1.5px solid var(--line-strong);display:grid;place-items:center;font-size:10px;flex:none}
.proc-steps li.done{color:var(--text)}
.proc-steps li.done .dot{background:var(--accent-weak);border-color:transparent;color:var(--accent-text)}
.proc-steps li.on{color:var(--text);font-weight:500}
.proc-steps li.on .dot{border-color:var(--accent);border-top-color:transparent;animation:spin .8s linear infinite}
.btn.is-loading{pointer-events:none;opacity:.75}
.btn.is-loading::before{content:"";width:12px;height:12px;border-radius:50%;border:2px solid currentColor;border-right-color:transparent;animation:spin .7s linear infinite}
.turbo-progress-bar{background:var(--accent);height:2px}
@media (prefers-reduced-motion:reduce){.spinner,.proc-steps li.on .dot,.btn.is-loading::before,.progress.indeterminate>span{animation-duration:3s}}

/* Модальное окно подтверждения */
.modal{position:fixed;inset:0;margin:auto;height:fit-content;width:440px;max-width:calc(100vw - 32px);padding:0;border:1px solid var(--line);border-radius:14px;background:var(--surface);color:var(--text);box-shadow:var(--shadow-lg)}
.modal::backdrop{background:rgba(10,12,16,.4);backdrop-filter:blur(2px)}
.modal[open]{animation:modal-in .16s ease-out}
@keyframes modal-in{from{opacity:0;transform:translateY(8px) scale(.98)}}
.modal-b{display:flex;gap:14px;padding:22px 22px 18px}
.modal-ico{width:36px;height:36px;border-radius:50%;background:var(--accent-weak);color:var(--accent-text);display:grid;place-items:center;font-weight:600;flex:none}
.modal-t{min-width:0;flex:1}
.modal h2{margin:0 0 6px;font-size:16px;font-weight:600;letter-spacing:-.01em}
.modal p{margin:0;color:var(--muted);font-size:13.5px;line-height:1.5}
.modal-sum{list-style:none;margin:14px 0 0;padding:4px 12px;border:1px solid var(--line);border-radius:10px;background:var(--bg);font-size:13px}
.modal-sum[hidden]{display:none}
.modal-sum li{display:flex;justify-content:space-between;gap:12px;padding:7px 0}
.modal-sum li+li{border-top:1px solid var(--line)}
.modal-sum li.zero{color:var(--faint)}
.modal-f{display:flex;justify-content:flex-end;gap:8px;padding:14px 22px;border-top:1px solid var(--line);background:var(--bg);border-radius:0 0 14px 14px}
@media (prefers-reduced-motion:reduce){.modal[open]{animation:none}}

/* Наценки на предпросмотре */
.mk-wrap{display:inline-flex;align-items:center;gap:6px}
.mk-pct{color:var(--muted);font-size:12.5px}
tr.dirty td{background:color-mix(in srgb,var(--accent-weak) 60%,transparent)}
tr.dirty td:first-child{box-shadow:inset 3px 0 0 var(--accent)}
tr.dirty [data-cell="sale"]{color:var(--accent-text)}
input.mk.invalid{border-color:var(--up);box-shadow:0 0 0 3px var(--up-bg)}
.actionbar [hidden]{display:none}

/* Список и карточка товара */
tr.clickable{cursor:pointer}
tr.clickable{position:relative}
.row-link{color:var(--text);text-decoration:none;font-weight:500}
.row-link::after{content:"";position:absolute;inset:0;z-index:1}
tr.clickable:hover .row-link{color:var(--accent-text)}
.row.end{justify-content:flex-end}
.card-h.sub-h{border-top:1px solid var(--line)}

/* Заказы */
input[type=date]{font:inherit;font-size:13.5px;color:var(--text);background:var(--surface);border:1px solid var(--line-strong);border-radius:8px;padding:5px 10px;outline:none}
input[type=date]:focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-weak)}
.order-head{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:0 16px}
.order-head .field.wide{grid-column:span 2}
.order-head .field select,.order-head .field input{max-width:none;width:100%}
@media (max-width:640px){.order-head .field.wide{grid-column:auto}}
.order-items td:first-child,.order-items th:first-child{min-width:0;width:44px;text-align:left;color:var(--muted)}
.order-items td:nth-child(2),.order-items th:nth-child(2){text-align:left;white-space:normal;min-width:260px}
.order-items input.qty,.order-items input.price{width:110px}
.order-items tr[hidden]{display:none}
.order-items tr.dirty td{background:color-mix(in srgb,var(--accent-weak) 60%,transparent)}
.order-items .add-row td{border-bottom:1px solid var(--line);text-align:left}
.order-items .add-product{width:min(520px,100%)}
.order-items .total-row td{font-size:15px;font-weight:600;border-bottom:0;padding-top:14px;padding-bottom:14px}
.order-items .total-row td:nth-child(2){text-align:right}
.order-meta{display:grid;grid-template-columns:140px 1fr;gap:10px 16px;margin:0}
.order-meta dt{color:var(--muted)}.order-meta dd{margin:0;font-weight:500}
details.inline-edit[open]{display:flex;flex-direction:column;gap:8px;align-items:flex-end}

/* Формы сотрудников и пароля */
.card.narrow{max-width:560px}
.card.narrow .field input,.card.narrow .field select{max-width:none;width:100%}
.hint-s{font-size:12px;color:var(--faint)}
.pw-row{display:flex;gap:8px;align-items:center}
.pw-row input{flex:1;min-width:0}

/* Статус загрузки и сводка изменения цен */
.chips{display:inline-flex;gap:4px;flex-wrap:wrap;vertical-align:middle}
.chip{display:inline-flex;align-items:center;font-size:11.5px;font-weight:600;padding:1px 7px;border-radius:6px;background:var(--hover);color:var(--muted);font-variant-numeric:tabular-nums}
.chip.up{background:var(--up-bg);color:var(--up)}
.chip.down{background:var(--down-bg);color:var(--down)}
.chip.acc{background:var(--accent-weak);color:var(--accent-text)}
.import-meta{display:flex;gap:6px;align-items:center;flex-wrap:wrap;margin-top:5px}

/* SVG-иконки (Lucide) */
svg.i{width:16px;height:16px;flex:none;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.nav a svg.i{color:var(--faint)}
.nav a:hover svg.i{color:var(--muted)}
.nav a[aria-current="page"] svg.i{color:var(--accent)}
.sb-search svg.i,.search svg.i{color:var(--faint)}
.theme-select{display:flex;align-items:center;gap:10px;width:100%}
.theme-select svg.i{color:var(--faint)}
.icon-btn svg.i{width:18px;height:18px}
.list .ic svg.i{width:15px;height:15px}
.empty .ic svg.i{width:24px;height:24px}
.modal-ico svg.i{width:18px;height:18px;stroke-width:2.2}

/* Выбор файла прайса */
.field .label{font-size:12.5px;font-weight:500;color:var(--muted)}
.drop{display:block;cursor:pointer;max-width:560px}
.drop:hover{border-color:var(--accent)}
.drop.picked{border-style:solid;border-color:var(--accent);background:var(--accent-weak)}
.drop.picked h3{color:var(--accent-text)}
.drop p{margin:0}
.visually-hidden{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* Карточка пользователя */
.secret{display:inline-flex;align-items:center;gap:6px;flex-wrap:wrap}
.creds .sub{font-weight:400;color:var(--muted);font-size:12px;margin-top:4px;white-space:normal}
.issue-form{border-top:1px solid var(--line);padding-top:14px}
.issue-form .field{margin-bottom:12px}

/* Цены покупателя */
.buyer-prices input.bp-name{width:200px}
.buyer-prices input.mk{width:80px}
.buyer-prices tr.dirty td{background:color-mix(in srgb,var(--accent-weak) 60%,transparent)}
.buyer-prices tr.dirty td:first-child{box-shadow:inset 3px 0 0 var(--accent)}
.buyer-prices tr.dirty [data-cell="sale"]{color:var(--accent-text)}
.buyer-prices input.invalid{border-color:var(--up);box-shadow:0 0 0 3px var(--up-bg)}

/* Множественный выбор и неактивные товары */
th.sel,td.sel{width:36px;min-width:0!important;padding-right:0;text-align:left}
td.sel{position:relative;z-index:2}
td.sel input,th.sel input{width:16px;height:16px;accent-color:var(--accent);cursor:pointer;margin:0;vertical-align:middle}
tr.selected td{background:color-mix(in srgb,var(--accent-weak) 70%,transparent)}
tr.inactive td{color:var(--muted)}
tr.inactive .row-link{color:var(--muted)}
.products-table td:nth-child(2){white-space:normal}
.seg-link{font-size:13px;font-weight:500;color:var(--muted);padding:6px 12px;border-radius:7px;text-decoration:none;white-space:nowrap;display:inline-flex;align-items:center;gap:6px}
.seg-link.on{background:var(--surface);color:var(--text);box-shadow:var(--shadow)}
.seg-count{font-size:11.5px;color:var(--faint);font-variant-numeric:tabular-nums}
.bulkbar{position:sticky;bottom:12px;z-index:6;display:flex;align-items:center;gap:10px;margin-top:12px;padding:10px 14px;border-radius:12px;background:var(--surface);border:1px solid var(--accent);box-shadow:var(--shadow-lg)}
.bulkbar[hidden]{display:none}
.bulkbar form{margin:0}

/* Выбор покупателей для прайса */
.buyer-pick{display:flex;flex-wrap:wrap;gap:10px;align-items:stretch}
.pick{display:flex;align-items:center;gap:10px;padding:10px 14px;border:1px solid var(--line-strong);border-radius:10px;cursor:pointer;background:var(--surface)}
.pick:has(input:checked){border-color:var(--accent);background:var(--accent-weak)}
.pick input{width:16px;height:16px;accent-color:var(--accent)}
.pick span{display:flex;flex-direction:column}.pick small{color:var(--muted);font-size:12px}
.buyer-pick .btn{align-self:center}
td.act{position:relative;z-index:2;width:44px;min-width:0}
td.act form{margin:0}
.btn.icon-only{padding:5px 7px;color:var(--muted)}
.btn.icon-only:hover{color:var(--up);background:var(--up-bg)}
tfoot .total-row td{font-weight:600;border-top:1px solid var(--line-strong)}
.report-tabs{margin-bottom:14px}
.deleted-banner{display:flex;align-items:center;gap:12px}
.deleted-banner form{margin:0}
a.user{text-decoration:none;color:inherit;border-radius:8px}
a.user:hover{background:var(--hover)}

/* Поле цены продажи: можно вписать цену вместо наценки */
input.mk-price{width:96px;text-align:right;padding:4px 8px;font:inherit;font-size:13.5px;font-weight:600;color:var(--text);background:var(--surface);border:1px solid var(--line-strong);border-radius:8px;outline:none;font-variant-numeric:tabular-nums}
input.mk-price:focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-weak)}
input.mk-price.invalid{border-color:var(--up);box-shadow:0 0 0 3px var(--up-bg)}
tr.dirty input.mk-price{color:var(--accent-text)}
.price-source{display:inline-flex;align-items:center;gap:8px;margin-left:16px;font-size:13px}
.price-source select{max-width:380px}
.order-items .swap-btn{visibility:hidden;padding:2px 8px;font-size:12px}
.order-items tr:hover .swap-btn,.order-items .swap-btn:focus{visibility:visible}
.order-items .swap-input{display:block;margin-top:6px;width:min(420px,100%)}
.order-items .swap-input.invalid{border-color:var(--up)}
tr.buyer-row td{background:var(--bg);border-top:1px solid var(--line-strong)}
tr.outlet-row td:first-child{padding-left:34px;position:relative}
tr.outlet-row td:first-child::before{content:"";position:absolute;left:18px;top:0;bottom:50%;width:9px;border-left:1px solid var(--line-strong);border-bottom:1px solid var(--line-strong)}
tr.outlet-row td{color:var(--muted)}tr.outlet-row td:first-child{color:var(--text)}

/* Изменение цены: тенге + процент */
.delta{display:inline-flex;align-items:baseline;gap:6px;white-space:nowrap;font-variant-numeric:tabular-nums}
.delta b{font-weight:600}
.delta small{font-size:12px;color:var(--muted)}
.delta.up b{color:var(--up)}.delta.down b{color:var(--down)}

/* Таблицы прокручиваются только по горизонтали; по вертикали — одна прокрутка страницы. */
.tbl-wrap{overflow-x:auto;overflow-y:visible}
.tbl-wrap thead th{box-shadow:inset 0 -1px 0 var(--line)}
.tbl-wrap::-webkit-scrollbar{height:10px;width:10px}
.tbl-wrap::-webkit-scrollbar-thumb{background:var(--line-strong);border-radius:6px;border:2px solid var(--surface)}
.tbl-wrap::-webkit-scrollbar-track{background:transparent}


/* Сайдбар всегда свёрнут на десктопе и разворачивается поверх контента при наведении */
@media (min-width:861px){
  .app,.app.collapsed{grid-template-columns:60px 1fr}
  .sb{position:relative;z-index:35;width:60px;transition:width .16s ease,box-shadow .16s ease}
  .sb:hover,.sb:focus-within{width:248px;box-shadow:var(--shadow-lg)}
  .sb:not(:hover):not(:focus-within) :is(.brand-t,.nav-g,.lbl,.tagx,.sb-search span,.sb-search kbd,.user div,.theme-select span){display:none}
  .sb:not(:hover):not(:focus-within) .nav a{justify-content:center}
  .sb:not(:hover):not(:focus-within) .nav a .cnt{position:absolute;top:2px;right:4px;min-width:14px;height:14px;font-size:9px;padding:0 3px}
  .sb:not(:hover):not(:focus-within) .sb-search{justify-content:center;padding:7px}
  .sb:not(:hover):not(:focus-within) .brand{justify-content:center;padding:14px 0 10px}
  .sb:not(:hover):not(:focus-within) .theme-select{justify-content:center}
  .sb .lbl,.sb .brand-t,.sb .nav-g{white-space:nowrap}
  #collapse{display:none}
}
.stepper .st-a{display:contents;color:inherit;text-decoration:none}
.stepper li.link{cursor:pointer}
.stepper li.link:hover .st-l{color:var(--accent-text);text-decoration:underline;text-underline-offset:3px}
.stepper li.link:not(.done) .dot{border-color:var(--accent);color:var(--accent-text)}
.tab-badge{font-size:10.5px;font-weight:600;padding:1px 6px;border-radius:999px;background:var(--warn-bg);color:var(--warn);margin-left:4px}
.copy-prices{gap:12px}.copy-prices form{margin:0}

/* Шаг «Покупатели» */
.buyer-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:12px}
.buyer-card{display:flex;gap:12px;align-items:flex-start;padding:14px 16px;border:1px solid var(--line-strong);border-radius:12px;cursor:pointer;background:var(--surface)}
.buyer-card:has(input:checked){border-color:var(--accent);background:var(--accent-weak)}
.buyer-card.locked{cursor:default;opacity:.75;background:var(--bg)}
.buyer-card input{width:18px;height:18px;margin-top:2px;accent-color:var(--accent)}
.bc-body{display:flex;flex-direction:column;gap:3px}
.bc-body small{color:var(--muted);font-size:12.5px}
.bc-body .badge{align-self:flex-start;margin-top:4px}

/* Конвертация единиц в заказе */
.order-items .qty-cell{white-space:nowrap}
.order-items .conv{display:inline-flex;align-items:center;gap:4px;margin-right:6px;color:var(--muted);font-size:12.5px}
.order-items .conv[hidden]{display:none}
.order-items input.conv-qty{width:80px;border-color:var(--accent)}
.order-items .unit-cell{white-space:nowrap}
.order-items .conv-btn{padding:2px 7px;font-size:11.5px;margin-left:4px;color:var(--muted)}
.order-items .conv-btn:hover{color:var(--accent-text)}
.bulkbar .cat-input{width:220px}
.bulkbar form.row{gap:6px}

/* Аналитика и пульс бизнеса */
.trend{font-size:12px;font-weight:600;font-variant-numeric:tabular-nums;white-space:nowrap}
.trend.good{color:var(--down)}.trend.bad{color:var(--up)}.trend.new{color:var(--accent-text)}
.low-margin{color:var(--up);font-weight:600}
.warn-notice{border-color:var(--warn);background:var(--warn-bg)}
.quadrants{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:12px;margin-bottom:6px}
.quadrant{display:flex;flex-direction:column;gap:4px;padding:12px 14px;border:1px solid var(--line);border-radius:12px;background:var(--surface);text-decoration:none;color:var(--text);box-shadow:var(--shadow);border-left-width:4px}
.quadrant small{color:var(--muted);font-size:12px;line-height:1.35}
.quadrant.on{outline:2px solid var(--accent)}
.q-head{display:flex;justify-content:space-between;align-items:center}
.q-count{font-size:20px;font-weight:700}
.q-ok{border-left-color:var(--down)}.q-warn{border-left-color:var(--warn)}.q-acc{border-left-color:var(--accent)}.q-bad{border-left-color:var(--up)}
.q-legend{font-size:12px;margin:0 0 14px}
.idle-hint{margin:0;font-size:12.5px;padding-top:0}
.settings-card summary{cursor:pointer;list-style:none}
.settings-card label{gap:6px;font-size:13px}
.plan-row{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin-bottom:8px}
.plan-fig b{font-size:22px}
.plan-bar{position:relative;height:10px;border-radius:999px;background:var(--hover);overflow:visible;margin-bottom:10px}
.plan-bar span{position:absolute;inset:0 auto 0 0;border-radius:inherit;background:var(--accent)}
.plan-bar i{position:absolute;top:-4px;bottom:-4px;width:2px;background:var(--text);opacity:.5}
.plan-note{margin:0 0 8px;font-size:13px}
.plan-edit summary{list-style:none;display:inline-flex}
.plan-edit[open] form{margin-top:10px;gap:10px}
.attention .ic.warn{background:var(--warn-bg);color:var(--warn)}.attention .ic.bad{background:var(--up-bg);color:var(--up)}
.attention a{color:var(--text);text-decoration:none}.attention a:hover{color:var(--accent-text);text-decoration:underline}

/* Колонка после галочки выбора — по левому краю, как первая колонка */
th.sel+th,td.sel+td{text-align:left;white-space:normal;min-width:200px}

/* ===== Адаптив обзора и аналитики (телефоны) ===== */
@media (max-width:640px){
  /* Шапка: заголовок на всю ширину, кнопки — строкой под ним */
  .ph{gap:10px;align-items:stretch}
  .ph .grow{flex-basis:100%;min-width:0}
  .ph h1{font-size:20px}
  .ph > .btn,.ph > a.btn,.ph > form{flex:1 1 auto;justify-content:center}

  /* Показатели: 2 в ряд, цифры помельче, чтобы суммы не ломались */
  .kpis{grid-template-columns:1fr 1fr;gap:8px}
  .kpi{padding:12px}
  .kpi b{font-size:18px;word-break:break-word}
  .kpi small{font-size:11px}

  /* Вкладки и периоды — переносятся, а не обрезаются */
  .report-tabs,.toolbar .seg{display:flex;flex-wrap:wrap;max-width:100%}
  .report-tabs .seg-link,.toolbar .seg .seg-link{flex:1 1 auto;text-align:center;justify-content:center;padding:7px 10px}
  .toolbar{padding:12px}
  .toolbar form.row{width:100%}
  .toolbar form.row input[type=date]{flex:1 1 130px;min-width:0}
  .toolbar form.row select{flex:1 1 100%}
  .toolbar form.row .btn{flex:1 1 100%;justify-content:center}

  /* Группы товаров: компактная сетка 2×2 без пояснений */
  .quadrants{grid-template-columns:1fr 1fr;gap:8px}
  .quadrant{padding:10px 12px}
  .quadrant small{display:none}
  .q-count{font-size:18px}

  /* Таблицы: первая колонка (товар/точка) закреплена при прокрутке вбок */
  .tbl-wrap table{font-size:13px}
  th,td{padding:8px 10px}
  td:first-child,th:first-child{min-width:150px;max-width:180px;position:sticky;left:0;z-index:2;background:var(--surface);box-shadow:inset -1px 0 0 var(--line)}
  thead th:first-child{z-index:3}
  tr.buyer-row td:first-child{background:var(--bg)}
  tr.outlet-row td:first-child{padding-left:26px}
  td.sel,th.sel{min-width:36px!important;max-width:36px}
  td.sel+td,th.sel+th{position:sticky;left:36px;z-index:2;background:var(--surface);min-width:140px}

  /* План месяца */
  .plan-row{flex-direction:column;align-items:flex-start;gap:4px}
  .plan-fig b{font-size:18px}
  .plan-edit[open] form{flex-direction:column;align-items:stretch}
  .plan-edit label{justify-content:space-between}

  .notice{font-size:13px}
  .settings-card form.row{flex-direction:column;align-items:flex-start}
}