/* ═══════════ KAYF Stock · дизайн-система ═══════════ */
@font-face{font-family:Poppins;font-weight:400;font-display:swap;src:url(fonts/poppins-latin-400-normal.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:Poppins;font-weight:500;font-display:swap;src:url(fonts/poppins-latin-500-normal.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:Poppins;font-weight:600;font-display:swap;src:url(fonts/poppins-latin-600-normal.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:Manrope;font-weight:400;font-display:swap;src:url(fonts/manrope-cyrillic-400-normal.woff2) format("woff2");unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:Manrope;font-weight:500;font-display:swap;src:url(fonts/manrope-cyrillic-500-normal.woff2) format("woff2");unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:Manrope;font-weight:600;font-display:swap;src:url(fonts/manrope-cyrillic-600-normal.woff2) format("woff2");unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:Manrope;font-weight:700;font-display:swap;src:url(fonts/manrope-cyrillic-700-normal.woff2) format("woff2");unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}

:root{
  --bg:#f4f4f0; --surface:#ffffff; --surface-2:#f9f9f6; --line:#e6e6e0; --line-2:#d9d9d2;
  --ink:#171717; --ink-2:#4a4a46; --muted:#7a7a73;
  --accent-fill:#bbff00; --accent-ink:#171717; --accent-text:#446e00; --accent-soft:#f1ffcc;
  --red:#d92d20; --red-soft:#fdecea; --amber:#b54708; --amber-soft:#fff4e5; --blue:#1d5fd6; --blue-soft:#eaf1ff;
  --green:#2f7d18; --green-soft:#eaf7e2;
  --shadow:0 1px 2px rgba(0,0,0,.04),0 4px 16px rgba(0,0,0,.05);
  --shadow-lg:0 12px 48px rgba(0,0,0,.18);
  --r:14px; --r-sm:10px;
  --side:#171717; --side-ink:#f3f3ee; --hl-line:#171717;
  --font:Poppins,Manrope,system-ui,-apple-system,"Segoe UI",sans-serif;
  color-scheme:light;
}
@media (prefers-color-scheme:dark){:root:not([data-theme=light]){
  --bg:#101010; --surface:#1b1b1b; --surface-2:#222; --line:#2d2d2d; --line-2:#3a3a3a;
  --ink:#f3f3ee; --ink-2:#c9c9c2; --muted:#8f8f88;
  --accent-text:#bbff00; --accent-soft:#26330a;
  --red:#ff6b5e; --red-soft:#3a1714; --amber:#ffb561; --amber-soft:#3a2a12; --blue:#7aa7ff; --blue-soft:#15233d;
  --green:#8fdc6a; --green-soft:#16290f; --shadow:0 1px 2px rgba(0,0,0,.4); color-scheme:dark; --side:#161616; --hl-line:#4d6600;
}}
:root[data-theme=dark]{
  --bg:#101010; --surface:#1b1b1b; --surface-2:#222; --line:#2d2d2d; --line-2:#3a3a3a;
  --ink:#f3f3ee; --ink-2:#c9c9c2; --muted:#8f8f88;
  --accent-text:#bbff00; --accent-soft:#26330a;
  --red:#ff6b5e; --red-soft:#3a1714; --amber:#ffb561; --amber-soft:#3a2a12; --blue:#7aa7ff; --blue-soft:#15233d;
  --green:#8fdc6a; --green-soft:#16290f; --shadow:0 1px 2px rgba(0,0,0,.4); color-scheme:dark; --side:#161616; --hl-line:#4d6600;
}

*{box-sizing:border-box}
html{font-size:15px;-webkit-text-size-adjust:100%}
html.ts-s{font-size:14px} html.ts-l{font-size:17px}
@media (max-width:960px){html{font-size:16px} html.ts-s{font-size:15px} html.ts-l{font-size:18px}}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--font);line-height:1.45;-webkit-font-smoothing:antialiased}
button,input,select,textarea{font:inherit;color:inherit}
a{color:inherit}
.num,.tnum{font-variant-numeric:tabular-nums}
.muted{color:var(--muted)} .small{font-size:.86rem} .tiny{font-size:.78rem}
.hidden{display:none!important}
svg.i{width:1.15em;height:1.15em;flex:none;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;vertical-align:-.2em}

/* ─── Кнопки и поля ─── */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;min-height:2.6rem;padding:0 1rem;border-radius:999px;border:1px solid var(--line-2);background:var(--surface);cursor:pointer;font-weight:500;white-space:nowrap;transition:transform .08s,background .15s,border-color .15s}
.btn:hover{border-color:var(--ink-2)} .btn:active{transform:scale(.97)}
.btn:disabled{opacity:.45;pointer-events:none}
.btn-primary{background:var(--accent-fill);color:var(--accent-ink);border-color:var(--accent-fill);font-weight:600}
.btn-primary:hover{border-color:var(--accent-ink)}
.btn-dark{background:var(--ink);color:var(--bg);border-color:var(--ink)}
.btn-ghost{border-color:transparent;background:transparent}
.btn-ghost:hover{background:var(--surface-2);border-color:transparent}
.btn-danger{color:var(--red);border-color:var(--red-soft);background:var(--red-soft)}
.btn-sm{min-height:2.1rem;padding:0 .8rem;font-size:.88rem}
.btn-lg{min-height:3.4rem;padding:0 1.4rem;font-size:1.05rem}
.btn-block{width:100%}
.btn-icon{width:2.6rem;padding:0}
.field{display:flex;flex-direction:column;gap:.35rem;margin-bottom:.9rem}
.field>label{font-size:.84rem;font-weight:500;color:var(--ink-2)}
.field .hint{font-size:.78rem;color:var(--muted)}
.inp,select.inp,textarea.inp{width:100%;min-height:2.75rem;padding:.55rem .85rem;border:1px solid var(--line-2);border-radius:var(--r-sm);background:var(--surface);outline:none;transition:border-color .15s,box-shadow .15s}
textarea.inp{min-height:4.5rem;resize:vertical}
.inp:focus{border-color:var(--ink);box-shadow:0 0 0 3px var(--accent-soft)}
.inp.big{font-size:1.6rem;font-weight:600;text-align:center;min-height:3.6rem}
.row{display:flex;gap:.75rem;align-items:center}
.row.wrap{flex-wrap:wrap}
.grow{flex:1;min-width:0}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:.75rem}
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:.75rem}
.check{display:flex;align-items:center;gap:.6rem;cursor:pointer;user-select:none}
.check input{width:1.2rem;height:1.2rem;accent-color:var(--ink)}

/* ─── Бейджи ─── */
.badge{display:inline-flex;align-items:center;gap:.3rem;padding:.12rem .55rem;border-radius:999px;font-size:.76rem;font-weight:500;background:var(--surface-2);border:1px solid var(--line);white-space:nowrap}
.b-lime{background:var(--accent-soft);border-color:transparent;color:var(--accent-text)}
.b-red{background:var(--red-soft);border-color:transparent;color:var(--red)}
.b-amber{background:var(--amber-soft);border-color:transparent;color:var(--amber)}
.b-blue{background:var(--blue-soft);border-color:transparent;color:var(--blue)}
.b-green{background:var(--green-soft);border-color:transparent;color:var(--green)}
.dot{width:.5rem;height:.5rem;border-radius:50%;background:currentColor;display:inline-block}

/* ─── Каркас: десктоп ─── */
.app{display:grid;grid-template-columns:15.5rem 1fr;min-height:100vh}
.side{position:sticky;top:0;height:100vh;border-right:1px solid var(--line);display:flex;flex-direction:column;gap:.25rem;padding:1.25rem .9rem;background:var(--side);color:var(--side-ink)}
.brand{display:flex;align-items:center;gap:.55rem;padding:.2rem .5rem 1.2rem;font-weight:600;font-size:1.15rem;letter-spacing:-.01em}
.brand .mark{width:2rem;height:2rem;border-radius:50%;background:var(--accent-fill);color:#171717;display:grid;place-items:center;font-weight:700;font-size:1rem}
.brand .sub{font-size:.7rem;font-weight:500;padding:.1rem .45rem;border-radius:999px;background:#2b2b2b;color:#bbff00;letter-spacing:.04em;text-transform:uppercase}
.nav-h{font-size:.68rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:#6f6f68;padding:.9rem .75rem .3rem}
.nav a{display:flex;align-items:center;gap:.7rem;padding:.62rem .75rem;border-radius:.7rem;text-decoration:none;color:#cfcfc8;font-weight:500;font-size:.95rem}
.nav a:hover{background:#262626;color:#fff}
.nav a.on{background:var(--accent-fill);color:#171717}
.nav a .cnt{margin-left:auto;font-size:.72rem;background:#333;color:#ddd;padding:.05rem .45rem;border-radius:999px}
.nav a.on .cnt{background:#171717;color:#bbff00}
.side .spacer{flex:1}
.userbox{display:flex;align-items:center;gap:.6rem;padding:.6rem;border-radius:.8rem;background:#222;cursor:pointer}
.avatar{width:2.1rem;height:2.1rem;border-radius:50%;display:grid;place-items:center;font-weight:600;font-size:.85rem;background:#bbff00;color:#171717;flex:none}
.userbox .nm{font-weight:500;font-size:.9rem;line-height:1.2} .userbox .rl{font-size:.74rem;color:#9a9a93}
.main{min-width:0;padding:1.6rem 2rem 3rem}
.topbar{display:flex;align-items:center;gap:1rem;margin-bottom:1.3rem;flex-wrap:wrap}
.topbar h1{font-size:1.65rem;margin:0;letter-spacing:-.02em;font-weight:600}
.topbar .actions{margin-left:auto;display:flex;gap:.5rem;flex-wrap:wrap}

/* ─── Карточки, KPI ─── */
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--shadow)}
.card-h{display:flex;align-items:center;gap:.6rem;padding:1rem 1.15rem .4rem}
.card-h h3{margin:0;font-size:1rem;font-weight:600}
.card-h .actions{margin-left:auto}
.card-b{padding:.6rem 1.15rem 1.1rem}
.kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(12rem,1fr));gap:.9rem;margin-bottom:1rem}
.kpi{padding:1rem 1.1rem;position:relative;overflow:hidden;cursor:default}
.kpi[data-go]{cursor:pointer} .kpi[data-go]:hover{border-color:var(--ink-2)}
.kpi .lbl{font-size:.82rem;color:var(--muted);display:flex;align-items:center;gap:.4rem}
.kpi .val{font-size:1.9rem;font-weight:600;letter-spacing:-.02em;margin-top:.2rem;font-variant-numeric:tabular-nums}
.kpi .sub{font-size:.8rem;color:var(--muted)}
.kpi.hl{background:var(--side);color:var(--side-ink);border-color:var(--hl-line)} .kpi.hl .lbl,.kpi.hl .sub{color:#a9a9a2} .kpi.hl .val{color:#bbff00}
.dash{display:grid;grid-template-columns:1.4fr 1fr;gap:1rem}
.stack{display:flex;flex-direction:column;gap:1rem}

/* ─── Таблицы ─── */
.tbl-wrap{overflow:auto;border-radius:var(--r)}
table.tbl{width:100%;border-collapse:separate;border-spacing:0;font-size:.92rem}
.tbl th{position:sticky;top:0;z-index:1;background:var(--surface-2);text-align:left;font-weight:500;color:var(--muted);font-size:.8rem;padding:.65rem .8rem;border-bottom:1px solid var(--line);white-space:nowrap}
.tbl td{padding:.62rem .8rem;border-bottom:1px solid var(--line);vertical-align:middle}
.tbl tr:last-child td{border-bottom:0}
.tbl tbody tr.click{cursor:pointer} .tbl tbody tr.click:hover td{background:var(--surface-2)}
.tbl .r{text-align:right;font-variant-numeric:tabular-nums}
.tbl .grp td{background:var(--bg);font-weight:600;font-size:.82rem;color:var(--ink-2);padding:.45rem .8rem;letter-spacing:.02em}
.tbl td.neg{color:var(--red);font-weight:600} .tbl td.low{color:var(--amber);font-weight:600} .tbl td.zero{color:var(--muted)}
.tbl td.wh{background:color-mix(in srgb,var(--accent-soft) 45%,transparent);font-weight:600}
.item-nm{font-weight:500} .item-sub{font-size:.78rem;color:var(--muted)}

/* ─── Фильтры ─── */
.filters{display:flex;gap:.5rem;flex-wrap:wrap;align-items:center;margin-bottom:.9rem}
.filters .inp{width:auto;min-height:2.4rem}
.search{position:relative;flex:1;min-width:13rem;max-width:24rem}
.search .inp{padding-left:2.3rem;width:100%}
.search svg{position:absolute;left:.8rem;top:50%;transform:translateY(-50%);color:var(--muted)}
.seg{display:inline-flex;background:var(--surface-2);border:1px solid var(--line);border-radius:999px;padding:.2rem;gap:.15rem}
.seg button{border:0;background:transparent;padding:.4rem .85rem;border-radius:999px;cursor:pointer;font-size:.88rem;font-weight:500;color:var(--ink-2);white-space:nowrap}
.seg button.on{background:var(--ink);color:var(--bg)}

/* ─── Прогресс ─── */
.prog{height:.45rem;border-radius:999px;background:var(--surface-2);overflow:hidden;display:flex;border:1px solid var(--line)}
.prog i{display:block;height:100%}
.prog .p-ship{background:var(--accent-fill)} .prog .p-def{background:var(--red)} .prog .p-ret{background:var(--blue)}
.legend{display:flex;gap:.9rem;flex-wrap:wrap;font-size:.76rem;color:var(--muted)}
.legend span{display:inline-flex;align-items:center;gap:.3rem}
.legend i{width:.6rem;height:.6rem;border-radius:3px;display:inline-block}

/* ─── Графики (HTML) ─── */
.bars{display:flex;align-items:flex-end;gap:.3rem;height:9rem;padding-top:.5rem}
.bars .b{flex:1;display:flex;flex-direction:column;justify-content:flex-end;align-items:center;gap:.25rem;min-width:0;height:100%}
.bars .b .col{width:100%;max-width:2.2rem;border-radius:.35rem .35rem .15rem .15rem;background:var(--accent-fill);min-height:2px;position:relative;display:flex;flex-direction:column-reverse;overflow:hidden}
.bars .b .col i{display:block;width:100%}
.bars .b .x{font-size:.66rem;color:var(--muted)}
.bars .b:hover .col{outline:2px solid var(--ink)}

/* ─── Списки ─── */
.list{display:flex;flex-direction:column}
.li{display:flex;align-items:center;gap:.8rem;padding:.7rem 0;border-bottom:1px solid var(--line)}
.li:last-child{border-bottom:0}
.li .ic{width:2.2rem;height:2.2rem;border-radius:.7rem;display:grid;place-items:center;background:var(--surface-2);flex:none}
.empty{padding:2rem 1rem;text-align:center;color:var(--muted)}
.empty svg{width:2.2rem;height:2.2rem;margin-bottom:.4rem;opacity:.6}

/* ─── Модалки, шторки, тосты ─── */
.ov{position:fixed;inset:0;background:rgba(10,10,10,.45);z-index:50;display:flex;align-items:center;justify-content:center;padding:1rem;animation:fade .15s}
.modal{background:var(--surface);border-radius:1.2rem;width:min(34rem,100%);max-height:calc(100vh - 2rem);display:flex;flex-direction:column;box-shadow:var(--shadow-lg);animation:pop .18s}
.modal.wide{width:min(56rem,100%)}
.modal-h{display:flex;align-items:center;gap:.6rem;padding:1.1rem 1.3rem .6rem}
.modal-h h2{margin:0;font-size:1.2rem;font-weight:600}
.modal-h .x{margin-left:auto}
.modal-b{padding:.4rem 1.3rem 1rem;overflow:auto}
.modal-f{display:flex;gap:.5rem;justify-content:flex-end;padding:.8rem 1.3rem 1.1rem;border-top:1px solid var(--line)}
.drawer{position:fixed;top:0;right:0;bottom:0;width:min(34rem,100%);background:var(--surface);z-index:51;box-shadow:var(--shadow-lg);display:flex;flex-direction:column;animation:slide .2s}
@keyframes fade{from{opacity:0}} @keyframes pop{from{transform:scale(.96);opacity:0}} @keyframes slide{from{transform:translateX(30px);opacity:0}} @keyframes up{from{transform:translateY(40px);opacity:.3}}
.toasts{position:fixed;bottom:1.2rem;left:50%;transform:translateX(-50%);z-index:90;display:flex;flex-direction:column;gap:.5rem;align-items:center;pointer-events:none;width:min(30rem,calc(100% - 2rem))}
.toast{background:var(--ink);color:var(--bg);padding:.75rem 1.1rem;border-radius:.9rem;box-shadow:var(--shadow-lg);font-size:.92rem;animation:up .2s;pointer-events:none;display:flex;gap:.6rem;align-items:flex-start}
.toast.err{background:var(--red);color:#fff}
.toast.ok svg{color:#bbff00}

/* ─── Вход ─── */
.auth{min-height:100vh;display:grid;grid-template-columns:1fr 1fr}
.auth-art{background:#171717;color:#f3f3ee;padding:3rem;display:flex;flex-direction:column;justify-content:space-between;position:relative;overflow:hidden}
.auth-art h2{font-size:2.6rem;line-height:1.1;letter-spacing:-.03em;margin:0;font-weight:600;max-width:22rem}
.auth-art h2 em{font-style:normal;color:#bbff00}
.auth-art .ring{position:absolute;right:-8rem;bottom:-8rem;width:26rem;height:26rem;border-radius:50%;border:3rem solid #bbff00;opacity:.9}
.auth-form{display:flex;align-items:center;justify-content:center;padding:2rem}
.auth-form .box{width:min(24rem,100%)}
.auth-form h1{font-size:1.6rem;margin:0 0 .3rem;letter-spacing:-.02em}
.demo-pick{display:flex;flex-direction:column;gap:.5rem;margin-top:1rem}
.demo-pick button{justify-content:flex-start;min-height:3.2rem;border-radius:var(--r-sm)}

/* ─── Мобильный слой ─── */
.m-app{min-height:100vh;padding-bottom:calc(5.2rem + env(safe-area-inset-bottom))}
.m-bar{position:sticky;top:0;z-index:20;display:flex;align-items:center;gap:.6rem;padding:calc(.7rem + env(safe-area-inset-top)) 1rem .7rem;background:color-mix(in srgb,var(--bg) 88%,transparent);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)}
.m-bar .brand{padding:0;font-size:1.05rem}
.m-bar .brand .mark{width:1.8rem;height:1.8rem}
.m-bar .right{margin-left:auto;display:flex;gap:.3rem}
.m-main{padding:.3rem 1rem 1rem}
.m-title{font-size:1.75rem;font-weight:600;letter-spacing:-.03em;margin:.4rem 0 1rem}
.tabbar{position:fixed;left:0;right:0;bottom:0;z-index:30;display:flex;justify-content:space-around;align-items:center;padding:.45rem .5rem calc(.45rem + env(safe-area-inset-bottom));background:var(--surface);border-top:1px solid var(--line)}
.tabbar a{flex:1;display:flex;flex-direction:column;align-items:center;gap:.15rem;font-size:.7rem;font-weight:500;color:var(--muted);text-decoration:none;padding:.3rem 0}
.tabbar a svg{width:1.45rem;height:1.45rem}
.tabbar a.on{color:var(--ink)}
.tabbar a.scan{flex:none;width:3.8rem;height:3.8rem;margin-top:-1.8rem;border-radius:50%;background:var(--accent-fill);color:#171717;justify-content:center;box-shadow:0 6px 20px rgba(120,170,0,.45);border:4px solid var(--bg)}
.tabbar a.scan svg{width:1.7rem;height:1.7rem}
.hero-scan{display:flex;align-items:center;gap:1rem;width:100%;padding:1.2rem;border-radius:1.2rem;border:0;background:var(--accent-fill);color:#171717;cursor:pointer;text-align:left;box-shadow:0 8px 24px rgba(140,190,0,.3)}
.hero-scan .ic{width:3.4rem;height:3.4rem;border-radius:1rem;background:#171717;color:#bbff00;display:grid;place-items:center;flex:none}
.hero-scan .ic svg{width:1.8rem;height:1.8rem}
.hero-scan b{font-size:1.2rem;display:block} .hero-scan span{font-size:.85rem;opacity:.75}
.sec-t{display:flex;align-items:center;justify-content:space-between;margin:1.5rem 0 .6rem;font-weight:600;font-size:1.05rem}
.jobc{padding:1rem;margin-bottom:.7rem;cursor:pointer}
.jobc .t{font-weight:600} .jobc .meta{display:flex;gap:1rem;margin:.6rem 0;font-size:.85rem}
.jobc .meta b{display:block;font-size:1.15rem;font-variant-numeric:tabular-nums}
.stepper{display:flex;align-items:center;gap:.5rem}
.stepper button{width:3.2rem;height:3.2rem;border-radius:50%;border:1px solid var(--line-2);background:var(--surface);font-size:1.5rem;cursor:pointer;flex:none}
.stepper .inp{flex:1}
.chips{display:flex;gap:.4rem;flex-wrap:wrap;margin-top:.5rem}
.chip{padding:.4rem .8rem;border-radius:999px;border:1px solid var(--line-2);background:var(--surface);font-size:.86rem;cursor:pointer;font-weight:500}
.chip:active{background:var(--accent-soft)}
.prodhead{padding:1.1rem;display:flex;gap:1rem;align-items:center}
.prodhead .pk{width:3.6rem;height:3.6rem;border-radius:1rem;background:#171717;color:#bbff00;display:grid;place-items:center;font-weight:700;font-size:1.3rem;flex:none;line-height:1;text-align:center}
.prodhead .pk small{display:block;font-size:.55rem;font-weight:500;color:#cfcfc8;margin-top:.15rem}
.stat3{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid var(--line)}
.stat3>div{padding:.75rem 1rem;border-right:1px solid var(--line)} .stat3>div:last-child{border-right:0}
.stat3 b{display:block;font-size:1.2rem;font-variant-numeric:tabular-nums} .stat3 span{font-size:.75rem;color:var(--muted)}
.sticky-cta{position:sticky;bottom:calc(5.4rem + env(safe-area-inset-bottom));margin-top:1rem;z-index:5}
.done-screen{text-align:center;padding:2.5rem 1rem}
.done-screen .ok{width:5rem;height:5rem;border-radius:50%;background:var(--accent-fill);display:grid;place-items:center;margin:0 auto 1rem;color:#171717;animation:pop .3s}
.done-screen .ok svg{width:2.6rem;height:2.6rem;stroke-width:2.5}
.warn{display:flex;gap:.6rem;padding:.75rem .9rem;border-radius:var(--r-sm);background:var(--amber-soft);color:var(--amber);font-size:.88rem;margin-bottom:.8rem}
.info{display:flex;gap:.6rem;padding:.75rem .9rem;border-radius:var(--r-sm);background:var(--blue-soft);color:var(--blue);font-size:.88rem;margin-bottom:.8rem}

/* шторка снизу на телефоне */
@media (max-width:960px){
  .ov{align-items:flex-end;padding:0}
  .modal,.modal.wide{width:100%;border-radius:1.4rem 1.4rem 0 0;max-height:92vh;animation:up .22s;padding-bottom:env(safe-area-inset-bottom)}
  .modal::before{content:"";width:2.6rem;height:.3rem;border-radius:999px;background:var(--line-2);margin:.6rem auto 0}
  .drawer{width:100%}
  .auth{grid-template-columns:1fr}
  .auth-art{padding:2rem 1.5rem 3rem;min-height:14rem}
  .auth-art h2{font-size:1.9rem}
  .auth-art .ring{width:14rem;height:14rem;border-width:2rem;right:-5rem;bottom:-6rem}
  .grid3{grid-template-columns:1fr 1fr}
  .kpis{grid-template-columns:1fr 1fr;gap:.6rem}
  .kpi .val{font-size:1.5rem}
  .dash{grid-template-columns:1fr}
}

/* ─── Сканер ─── */
.scanner{position:fixed;inset:0;z-index:80;background:#000;color:#fff;display:flex;flex-direction:column}
.scanner video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.scanner .frame{position:absolute;left:50%;top:42%;transform:translate(-50%,-50%);width:min(80vw,22rem);height:min(40vw,11rem);border-radius:1rem;box-shadow:0 0 0 100vmax rgba(0,0,0,.55)}
.scanner .frame::before,.scanner .frame::after{content:"";position:absolute;inset:-3px;border:3px solid #bbff00;border-radius:1rem;clip-path:polygon(0 0,22% 0,22% 3px,3px 3px,3px 30%,0 30%,0 70%,3px 70%,3px calc(100% - 3px),22% calc(100% - 3px),22% 100%,0 100%,0 0,100% 0,78% 0,78% 3px,calc(100% - 3px) 3px,calc(100% - 3px) 30%,100% 30%,100% 0,100% 100%,78% 100%,78% calc(100% - 3px),calc(100% - 3px) calc(100% - 3px),calc(100% - 3px) 70%,100% 70%,100% 100%)}
.scanner .laser{position:absolute;left:8%;right:8%;top:50%;height:2px;background:#bbff00;box-shadow:0 0 12px #bbff00;animation:laser 1.6s ease-in-out infinite alternate}
@keyframes laser{from{top:15%}to{top:85%}}
.scanner .top{position:relative;display:flex;align-items:center;gap:.5rem;padding:calc(1rem + env(safe-area-inset-top)) 1rem 1rem}
.scanner .top .t{font-weight:600}
.scanner .round{width:2.9rem;height:2.9rem;border-radius:50%;border:0;background:rgba(255,255,255,.16);color:#fff;display:grid;place-items:center;cursor:pointer;backdrop-filter:blur(8px)}
.scanner .round.on{background:#bbff00;color:#171717}
.scanner .bottom{position:absolute;left:0;right:0;bottom:0;padding:1rem 1rem calc(1.2rem + env(safe-area-inset-bottom));background:linear-gradient(transparent,rgba(0,0,0,.85) 35%)}
.scanner .bottom .row{background:rgba(255,255,255,.12);border-radius:999px;padding:.3rem .3rem .3rem 1rem;backdrop-filter:blur(10px)}
.scanner .bottom input{flex:1;background:transparent;border:0;outline:0;color:#fff;font-size:1rem;min-width:0}
.scanner .bottom input::placeholder{color:rgba(255,255,255,.6)}
.scanner .msg{text-align:center;font-size:.9rem;opacity:.85;margin-bottom:.8rem}
.scanner.flash::after{content:"";position:absolute;inset:0;background:#bbff00;opacity:.35;animation:fade .3s reverse forwards}

.skel{background:linear-gradient(90deg,var(--surface-2),var(--line),var(--surface-2));background-size:200% 100%;animation:sk 1.2s infinite;border-radius:.5rem}
@keyframes sk{to{background-position:-200% 0}}
.loading{min-height:100vh;display:grid;place-items:center}
.spin{width:2rem;height:2rem;border-radius:50%;border:3px solid var(--line);border-top-color:var(--ink);animation:rot .8s linear infinite}
@keyframes rot{to{transform:rotate(360deg)}}
.menu{position:absolute;z-index:60;background:var(--surface);border:1px solid var(--line);border-radius:.9rem;box-shadow:var(--shadow-lg);padding:.35rem;min-width:13rem}
.menu button{display:flex;width:100%;align-items:center;gap:.6rem;border:0;background:transparent;padding:.6rem .7rem;border-radius:.6rem;cursor:pointer;text-align:left;font-size:.92rem}
.menu button:hover{background:var(--surface-2)}
.menu hr{border:0;border-top:1px solid var(--line);margin:.3rem 0}
.tags{display:flex;flex-wrap:wrap;gap:.35rem;padding:.35rem;border:1px solid var(--line-2);border-radius:var(--r-sm);min-height:2.75rem;align-items:center;background:var(--surface)}
.tags .tag{display:inline-flex;align-items:center;gap:.3rem;background:var(--surface-2);border:1px solid var(--line);border-radius:.5rem;padding:.2rem .3rem .2rem .55rem;font-size:.86rem;font-variant-numeric:tabular-nums}
.tags .tag button{border:0;background:transparent;cursor:pointer;color:var(--muted);padding:0 .2rem;font-size:1rem;line-height:1}
.tags input{border:0;outline:0;flex:1;min-width:8rem;background:transparent;padding:.3rem}
kbd{font-family:inherit;font-size:.72rem;padding:.05rem .35rem;border:1px solid var(--line-2);border-radius:.3rem;background:var(--surface-2)}
@media print{.side,.topbar .actions,.filters{display:none!important}.app{display:block}}
.grid2>*,.grid3>*{min-width:0}
.btn-block{white-space:normal;line-height:1.2;text-align:center}
.m-main .grid2 .btn{font-size:.92rem;padding:0 .7rem}
.grid2 .stepper button{width:2.6rem;height:2.6rem;font-size:1.2rem}.grid2 .stepper{gap:.3rem}

/* тосты на телефоне — сверху и никогда не перехватывают нажатия */
@media (max-width:960px){
  .toasts{top:calc(.6rem + env(safe-area-inset-top));bottom:auto;width:calc(100% - 1.5rem);pointer-events:none}
  .toast{pointer-events:none;animation:down .2s;font-size:.88rem;padding:.6rem .9rem}
}
@keyframes down{from{transform:translateY(-20px);opacity:0}}
/* кнопки в шторке всегда над нижней панелью браузера */
@media (max-width:960px){ .modal-f{padding-bottom:calc(.9rem + env(safe-area-inset-bottom))} }
/* QA 1.6.4: узкие экраны — сегменты фильтров прокручиваются, а не растягивают страницу; шторки не выше экрана */
.modal-b{min-height:0}
@media (max-width:960px){
  .seg{max-width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none}
  .seg::-webkit-scrollbar{display:none}
  .filters{overflow:hidden}
  .filters>.small.muted{width:100%;margin-left:0}
  .modal,.modal.wide{max-height:calc(100dvh - 2rem)}
  .modal-f{flex-wrap:wrap}
}

.btn.is-busy{opacity:.55;pointer-events:none}

/* каталог */
.mono{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:.86rem;letter-spacing:.02em;line-height:1.5}
.tbl.cat td{padding:.7rem .8rem}
.tbl.cat .item-nm{font-size:.98rem}
.tbl.cat tr.grp td{position:sticky;top:2.4rem;z-index:1;background:var(--bg);border-top:1px solid var(--line);text-transform:uppercase;font-size:.74rem;letter-spacing:.06em;color:var(--muted)}

/* каталог: фильтр по брендам, плитки-фильтры */
.brandbar{display:flex;flex-wrap:wrap;gap:.45rem;margin:0 0 .9rem}
.bchip{display:inline-flex;align-items:center;gap:.5rem;padding:.5rem .95rem;border-radius:999px;border:1px solid var(--line-2);background:var(--surface);color:var(--ink);font-family:Poppins,var(--font);font-weight:500;font-size:.92rem;cursor:pointer;transition:all .12s}
.bchip .n{font-size:.74rem;font-weight:600;padding:.05rem .45rem;border-radius:999px;background:var(--surface-2);color:var(--muted)}
.bchip:hover{border-color:var(--ink-2)}
.bchip.on{background:var(--ink);color:var(--bg);border-color:var(--ink)} .bchip.on .n{background:var(--accent-fill);color:#171717}
.kpi.kpi-on{border-color:var(--accent-fill)!important;box-shadow:0 0 0 3px color-mix(in srgb,var(--accent-fill) 25%,transparent)}
.tbl.cat tr.grp td{padding:.6rem .8rem}
.tbl.cat .gname{font-family:Poppins,var(--font);font-size:.95rem;font-weight:600;text-transform:none;letter-spacing:0;color:var(--ink);border-left:3px solid var(--accent-fill);padding-left:.55rem}
@media (max-width:960px){.brandbar{flex-wrap:nowrap;overflow-x:auto;padding-bottom:.3rem}.bchip{flex:none}}

/* финансы: себестоимость */
.fin .fin-hero{padding:1.6rem 1.8rem;margin-bottom:1rem}
.fin-hero-top{display:flex;justify-content:space-between;align-items:flex-end;gap:2rem;flex-wrap:wrap}
.fin-lbl{font-size:.74rem;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);display:flex;align-items:center;gap:.4rem}
.fin-lbl i{width:.55rem;height:.55rem;border-radius:2px;display:inline-block}
.fin-huge{font-family:Poppins,var(--font);font-size:3.4rem;font-weight:600;letter-spacing:-.03em;line-height:1.05;margin-top:.3rem;font-variant-numeric:tabular-nums}
.fin-stats{display:flex;gap:2.5rem}
.fin-num{font-family:Poppins,var(--font);font-size:1.45rem;font-weight:600;letter-spacing:-.01em;margin-top:.2rem;font-variant-numeric:tabular-nums}
.fin-unit{font-size:.9rem;font-weight:500;color:var(--muted)}
.fin-bar{display:flex;height:.55rem;border-radius:999px;overflow:hidden;background:var(--surface-2);margin:1.4rem 0 1.1rem}
.fin-legend{display:grid;grid-template-columns:repeat(4,1fr);gap:1rem}
.fin-sub{font-size:.8rem;color:var(--muted);margin-top:.1rem}
.fin-cols{display:grid;grid-template-columns:1.4fr 1fr;gap:1rem;align-items:start}
.fin-side{display:flex;flex-direction:column;gap:1rem}
.fin-card{padding:.9rem 1.3rem 1rem}
.fin-h{display:flex;justify-content:space-between;align-items:center;padding:.2rem 0 .5rem}
.fin-h h3{margin:0;font-size:1rem}
.fin-row{display:flex;gap:1rem;align-items:center;padding:.65rem 0;border-top:1px solid var(--line)}
.fin-row.click{cursor:pointer} .fin-row.click:hover{background:var(--surface-2);margin:0 -.6rem;padding-left:.6rem;padding-right:.6rem;border-radius:.5rem}
.fin-row>div:first-child{flex:1;min-width:0}
.fin-row .grow{flex:1;min-width:0}
.fin-date{flex:none!important;width:3.4rem;font-size:.82rem;color:var(--muted);font-variant-numeric:tabular-nums}
.fin-amt{flex:none!important;text-align:right;font-weight:600;font-variant-numeric:tabular-nums;white-space:nowrap}
.fin-b{font-size:1.05rem}
.fin-note{font-size:.78rem;color:var(--muted);margin:.7rem 0 0}
@media (max-width:960px){.fin-cols{grid-template-columns:1fr}.fin-legend{grid-template-columns:1fr 1fr}.fin-huge{font-size:2.4rem}.fin-stats{gap:1.4rem}}

.fin-grid2{display:grid;grid-template-columns:1.1fr 1fr;gap:1rem;margin-bottom:1rem}
.fin-grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem}
.fin-track{height:.3rem;border-radius:999px;background:var(--surface-2);overflow:hidden;margin:-.2rem 0 .3rem}
.fin-track i{display:block;height:100%;background:var(--accent-fill)}
.fin-chart{display:flex;gap:.6rem;align-items:flex-end;height:9rem;margin-top:1.2rem;padding-top:1.4rem}
.fin-col{flex:1;display:flex;flex-direction:column;align-items:center;gap:.3rem;height:100%}
.fin-colb{flex:1;width:100%;display:flex;align-items:flex-end}
.fin-colb i{display:block;width:100%;border-radius:.4rem .4rem 0 0;background:var(--line-2);transition:height .3s}
.fin-col.on .fin-colb i{background:var(--accent-fill)}
.fin-colv{font-size:.72rem;color:var(--muted);font-variant-numeric:tabular-nums;height:1rem}
.fin-col.on .fin-colv{color:var(--ink);font-weight:600}
.fin-colm{font-size:.74rem;color:var(--muted);text-transform:capitalize}
@media (max-width:960px){.fin-grid2,.fin-grid3{grid-template-columns:1fr}}