/* ============ SEYHUN MES v0.9 · интерфейс ============ */
:root{
  --bg:#eef1f0; --card:#fff; --card2:#f6f8f7; --card3:#eef2f0;
  --ink:#12201b; --ink2:#3e4d47; --mut:#68776f; --mut2:#8b9691;
  --line:#dde3e0; --line2:#c9d2ce;
  --side:#0e2b23; --side2:#12362c; --side-t:#a9bdb5; --side-b:#dcbe85;
  --acc:#0e6f5b; --acc-d:#0b5747; --acc-soft:#e0eeea;
  --gold:#a97f22; --gold-soft:#f6eed9;
  --ok:#2e7d5b; --ok-soft:#dff0e7;
  --wait:#8b978f; --wait-soft:#eef0ef;
  --bad:#b3392f; --bad-soft:#f8e4e1;
  --re:#6b3fa0;  --re-soft:#efe7f8;
  --blue:#3d5a80; --blue-soft:#e6ecf4;
  --zebra:#fbfcfb;
  --r:8px; --shadow:0 1px 2px rgba(16,32,27,.06);
}
*{box-sizing:border-box; -webkit-tap-highlight-color:transparent}
html,body{margin:0}
body{background:var(--bg); color:var(--ink); font-family:"Golos Text",system-ui,sans-serif; font-size:14.5px; line-height:1.45}
button{font:inherit; cursor:pointer; border:0; background:none; padding:0; color:inherit; text-align:left}
input,select{font:inherit; color:inherit}
img{max-width:100%; display:block}
[hidden]{display:none!important}
.mono{font-family:"IBM Plex Mono",ui-monospace,monospace}
.num{font-variant-numeric:tabular-nums; font-family:"IBM Plex Mono",ui-monospace,monospace; font-size:.94em}
.mut{color:var(--mut)}

/* ================= каркас: сайдбар + контент ================= */
.layout{display:grid; grid-template-columns:236px 1fr; min-height:100dvh}
.side{background:var(--side); color:var(--side-t); display:flex; flex-direction:column; position:sticky; top:0; height:100dvh; overflow-y:auto}
.side-brand{padding:18px 18px 14px; border-bottom:1px solid rgba(255,255,255,.07)}
.side-brand .lg{font-family:Prata,serif; color:#fff; font-size:18px; letter-spacing:.09em}
.side-brand .lg b{color:var(--side-b); font-weight:400}
.side-brand .vv{font-size:10.5px; color:var(--mut2); margin-top:3px; font-family:"IBM Plex Mono",monospace; letter-spacing:.05em}
.snav{padding:10px 8px; display:grid; gap:2px}
.snav .gr{font-size:10px; letter-spacing:.13em; text-transform:uppercase; color:#5f7169; padding:12px 12px 5px}
.sitem{display:flex; align-items:center; gap:10px; padding:9px 12px; border-radius:7px; color:#c3d2cb; font-size:13.5px; font-weight:500; width:100%}
.sitem svg{width:16px; height:16px; flex:none; opacity:.75}
.sitem .cnt{margin-left:auto; background:rgba(220,190,133,.15); color:var(--side-b); font-size:10.5px; min-width:18px; height:18px; border-radius:9px; display:inline-flex; align-items:center; justify-content:center; padding:0 5px; font-weight:600; font-family:"IBM Plex Mono",monospace}
.sitem.on{background:var(--side2); color:#fff; box-shadow:inset 2.5px 0 0 var(--side-b)}
.sitem.on svg{opacity:1}
.side-foot{margin-top:auto; padding:12px 16px 14px; border-top:1px solid rgba(255,255,255,.07); font-size:10.5px; color:#5f7169; line-height:1.5}
.side-foot b{color:#8fa39b; font-weight:500}
.content{min-width:0; display:flex; flex-direction:column}

/* топбар */
.top{background:var(--card); border-bottom:1px solid var(--line); position:sticky; top:0; z-index:45}
.top-in{display:flex; align-items:center; gap:12px; padding:0 18px; min-height:52px}
.burger{display:none; width:38px; height:38px; flex:none; border-radius:8px; border:1px solid var(--line2); align-items:center; justify-content:center}
.burger svg{width:17px; height:17px}
.pgtitle{font-size:16.5px; font-weight:700; letter-spacing:-.01em; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.top-date{margin-left:auto; font-size:12px; color:var(--mut); white-space:nowrap}
.bell{position:relative; width:36px; height:36px; flex:none; border-radius:8px; display:flex; align-items:center; justify-content:center; border:1px solid var(--line)}
.bell svg{width:16px; height:16px; color:var(--ink2)}
.bell i{position:absolute; top:6px; right:7px; width:7px; height:7px; border-radius:50%; background:var(--bad); border:1.5px solid #fff}
.tuser{display:flex; align-items:center; gap:8px; padding:5px 6px 5px 5px; border:1px solid var(--line); border-radius:9px; flex:none; min-width:0}
.avatar{width:28px; height:28px; border-radius:50%; display:inline-flex; align-items:center; justify-content:center; text-align:center; line-height:28px; color:#fff; font-weight:600; font-size:12px; flex:none; font-family:"Golos Text",system-ui,sans-serif; overflow:hidden}
.tuser .un{font-size:12px; line-height:1.2}
.tuser .avatar{line-height:28px}
.tuser .un b{display:block}
.tuser .un span{color:var(--mut); font-size:10.5px}
.exit{font-size:12px; color:var(--mut); padding:8px 4px 8px 8px; border-left:1px solid var(--line); margin-left:2px}
.exit:hover{color:var(--bad)}
main{padding:16px 22px 80px; flex:1}
.pagew{max-width:1180px; margin:0 auto}

/* мобильная навигация */
.scrim{display:none}
@media(max-width:980px){
  .layout{grid-template-columns:1fr}
  .side{position:fixed; left:0; top:0; bottom:0; width:250px; z-index:70; transform:translateX(-102%); transition:transform .22s; height:100dvh}
  body.nav-open .side{transform:none}
  body.nav-open .scrim{display:block; position:fixed; inset:0; background:rgba(10,22,17,.45); z-index:60}
  .burger{display:inline-flex}
  main{padding:13px 12px 80px}
  .top-in{padding:0 12px}
  .top-date{display:none}
}

/* ================= вход: центрированная карта ================= */
.login{height:calc(100dvh / var(--z,1)); overflow:hidden; display:flex; align-items:center; justify-content:center; padding:24px 16px;
  background:
    radial-gradient(900px 500px at 78% 18%, rgba(220,190,133,.07), transparent 60%),
    radial-gradient(700px 480px at 15% 85%, rgba(34,163,127,.06), transparent 60%),
    repeating-linear-gradient(0deg, rgba(255,255,255,.025) 0 1px, transparent 1px 44px),
    repeating-linear-gradient(90deg, rgba(255,255,255,.025) 0 1px, transparent 1px 44px),
    #0b1f19}
.lg-card{display:grid; grid-template-columns:minmax(300px,380px) minmax(0,1.35fr); width:100%; max-width:1120px; max-height:calc((100dvh - 48px) / var(--z,1));
  border-radius:16px; overflow:hidden; box-shadow:0 24px 70px rgba(0,0,0,.45), 0 2px 8px rgba(0,0,0,.3)}
.lg-left{background:linear-gradient(160deg,#123e33 0%,#0c2b23 70%,#0a241d 100%); color:#cfe0d8;
  padding:40px 34px; display:flex; flex-direction:column; gap:0}
.lg-left .lg{font-family:Prata,serif; font-size:23px; color:#fff; letter-spacing:.08em}
.lg-left .lg b{color:var(--side-b); font-weight:400}
.lg-art{margin:auto 0; padding:26px 0 10px; display:flex; justify-content:center}
.lg-art svg{width:100%; max-width:290px; height:auto; color:#d9c07f}
.lg-sub{text-align:center; font-size:11px; letter-spacing:.18em; text-transform:uppercase; color:#8fa39b; font-family:"IBM Plex Mono",monospace}
.lg-badges{margin-top:auto; padding-top:26px; font-size:11px; color:#7d918a; font-family:"IBM Plex Mono",monospace}
.lg-right{background:var(--card); padding:26px 30px; max-height:calc(min(90dvh,780px) / var(--z,1)); overflow-y:auto;
  scrollbar-width:thin; scrollbar-color:var(--line2) transparent}
.lg-right::-webkit-scrollbar{width:8px}
.lg-right::-webkit-scrollbar-thumb{background:var(--line2); border-radius:4px}
.lg-right::-webkit-scrollbar-track{background:transparent}
.lg-cap h2{margin:0; font-size:20px; font-weight:700; letter-spacing:-.01em}
.lg-cap p{margin:4px 0 4px; color:var(--mut); font-size:13px}
.lg-right .cap{font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--mut); font-weight:600; margin:12px 0 6px}
.staff{display:grid; gap:7px; grid-template-columns:repeat(2,minmax(0,1fr))}
.person{display:flex; align-items:center; gap:11px; background:var(--card2); border:1px solid var(--line); border-radius:10px;
  padding:8px 12px; width:100%; min-height:56px}
.person:hover{border-color:var(--acc); background:var(--acc-soft)}
.person .avatar{width:38px; height:38px; line-height:38px; font-size:14.5px; flex:none}
.person .pn{flex:1; min-width:0}
.person b{display:flex; align-items:baseline; gap:7px; font-size:14.5px; white-space:nowrap; overflow:hidden}
.person .pn span{display:block; color:var(--mut); font-size:12px; line-height:1.3}
.person .tb{font-family:"IBM Plex Mono",monospace; font-size:10.5px; color:var(--mut2)}
.person .go{flex:none; width:28px; height:28px; border-radius:50%; background:var(--acc-soft); color:var(--acc);
  display:inline-flex; align-items:center; justify-content:center; font-weight:700; font-size:13px}
.lg-reset{margin-top:13px; font-size:12px; color:var(--mut)}
.lg-reset button{color:var(--acc); font-weight:600}
@media(max-width:840px){
  .login{padding:0; align-items:stretch; height:auto; min-height:100dvh; overflow:visible}
  .lg-card{grid-template-columns:1fr; max-width:none; border-radius:0; box-shadow:none; min-height:100dvh}
  .lg-left{padding:24px 20px 20px; flex-direction:row; align-items:center; gap:14px}
  .lg-art{display:none}
  .lg-sub{margin-left:auto; text-align:right}
  .lg-badges{display:none}
  .lg-card{max-height:none}
  .lg-right{max-height:none; padding:20px 14px 30px}
  .staff{grid-template-columns:1fr}
}
/* ================= общие блоки ================= */
.card{background:var(--card); border:1px solid var(--line); border-radius:var(--r); box-shadow:var(--shadow)}
.pad{padding:14px}
.grid-cards{display:grid; gap:10px}
.grid-cards>*, .sec2>*, .kpis>*, .order-2col>*{min-width:0}
.hrow{display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin:2px 0 12px}
.hrow h2{font-size:16px; margin:0; font-weight:700}
.hrow .sp{flex:1}
.cap2{font-size:11px; letter-spacing:.09em; text-transform:uppercase; color:var(--mut); font-weight:600; margin-bottom:8px}
.badge{display:inline-flex; align-items:center; gap:5px; border-radius:5px; padding:2.5px 8px; font-size:11.5px; font-weight:600; white-space:nowrap}
.b-new{background:var(--acc-soft); color:var(--acc)} .b-work{background:var(--gold-soft); color:var(--gold)}
.b-done{background:var(--ok-soft); color:var(--ok)} .b-wait{background:var(--wait-soft); color:var(--wait)}
.b-bad{background:var(--bad-soft); color:var(--bad)} .b-re{background:var(--re-soft); color:var(--re)}
.b-mat{background:var(--blue-soft); color:var(--blue)} .b-sold{background:var(--side); color:var(--side-b)}
.b-urg{background:var(--bad); color:#fff}
.dot{width:8px; height:8px; border-radius:50%; display:inline-block; flex:none}
.sw{display:inline-block; width:13px; height:13px; border-radius:4px; border:1px solid rgba(0,0,0,.15); vertical-align:-2px; flex:none}
.seg{display:inline-flex; background:var(--card3); border:1px solid var(--line); border-radius:8px; padding:2.5px; gap:2px}
.seg button{padding:5.5px 12px; border-radius:6px; font-size:12.5px; font-weight:600; color:var(--mut)}
.seg button.on{background:var(--card); color:var(--ink); box-shadow:var(--shadow); border:1px solid var(--line)}
.search{display:flex; align-items:center; gap:8px; border:1px solid var(--line2); background:var(--card); border-radius:8px; padding:0 11px; height:38px; min-width:0}
.search svg{width:14px; height:14px; color:var(--mut); flex:none}
.search input{border:0; outline:0; background:none; width:100%; min-width:0; font-size:13.5px}

/* KPI */
.kpis{display:grid; grid-template-columns:repeat(auto-fit,minmax(168px,1fr)); gap:10px; margin-bottom:12px}
.kpi{background:var(--card); border:1px solid var(--line); border-radius:var(--r); padding:11px 13px; box-shadow:var(--shadow); position:relative; overflow:hidden}
.kpi .lb{font-size:11px; color:var(--mut); font-weight:600; letter-spacing:.03em}
.kpi .vl{display:flex; align-items:baseline; gap:7px; margin-top:3px}
.kpi b{font-size:22px; font-family:"IBM Plex Mono",monospace; font-variant-numeric:tabular-nums; letter-spacing:-.03em; font-weight:600}
.kpi .dl{font-size:11px; font-weight:600}
.dl.up{color:var(--ok)} .dl.dn{color:var(--bad)}
.kpi .spark{position:absolute; right:8px; bottom:6px; opacity:.9}
.kpi.warn b{color:var(--gold)} .kpi.bad b{color:var(--bad)} .kpi.ok b{color:var(--ok)}

/* таблицы */
.tblw{overflow-x:auto; border:1px solid var(--line); border-radius:var(--r); background:var(--card); box-shadow:var(--shadow)}
table{border-collapse:collapse; width:100%; min-width:560px; font-size:13.5px}
th{font-size:10.5px; text-transform:uppercase; letter-spacing:.07em; color:var(--mut); text-align:left; background:var(--card2); font-weight:600}
th,td{padding:8px 11px; border-bottom:1px solid var(--line)}
tbody tr:nth-child(even) td{background:var(--zebra)}
tr:last-child td{border-bottom:0}
td.r,th.r{text-align:right}
tr.click{cursor:pointer}
tr.click:hover td{background:var(--acc-soft)}
tr.total td{background:var(--card2); font-weight:700; border-top:2px solid var(--line2)}

/* пайплайн */
.pipe{display:inline-flex; gap:3px; align-items:center}
.pipe i{min-width:26px; height:18px; padding:0 4px; border-radius:4px; display:inline-flex; align-items:center; justify-content:center; font-size:9.5px; font-style:normal; font-weight:700; font-family:"IBM Plex Mono",monospace; background:var(--wait-soft); color:var(--wait)}
.pipe i.d{background:var(--ok-soft); color:var(--ok)}
.pipe i.w{background:var(--gold-soft); color:var(--gold)}
.pipe i.n{background:var(--acc-soft); color:var(--acc)}
.pipe i.s{background:#eceff1; color:#a5aeaa; text-decoration:line-through}
.pipe i.b{background:var(--bad-soft); color:var(--bad)}

/* наряды */
.job{display:grid; gap:9px; padding:12px 14px}
.job-top{display:flex; align-items:center; gap:8px; flex-wrap:wrap}
.jdoc{font-family:"IBM Plex Mono",monospace; font-size:11px; color:var(--mut); background:var(--card3); border-radius:4px; padding:2px 6px}
.job-num{font-weight:700; font-size:14.5px; font-family:"IBM Plex Mono",monospace}
.job-mdl{font-weight:600; font-size:14.5px}
.job-sub{display:flex; align-items:center; gap:8px; color:var(--ink2); font-size:12.5px; flex-wrap:wrap}
.deadline{margin-left:auto; font-size:11.5px; color:var(--mut)}
.deadline.late{color:var(--bad); font-weight:600}
.job-act{display:flex; gap:8px; flex-wrap:wrap}
.btn{border-radius:8px; font-weight:600; font-size:13.5px; padding:9px 15px; min-height:40px; display:inline-flex; align-items:center; justify-content:center; gap:7px; text-align:center}
.btn-p{background:var(--acc); color:#fff} .btn-p:active{background:var(--acc-d)}
.btn-o{border:1px solid var(--line2); background:var(--card); color:var(--ink2)}
.btn-w{background:var(--gold-soft); color:var(--gold)}
.btn-d{background:var(--bad-soft); color:var(--bad)}
.btn-blk{width:100%}
.btn[disabled]{opacity:.45; pointer-events:none}
.btn-sm{min-height:34px; padding:6px 12px; font-size:12.5px}
.picker{border-top:1px dashed var(--line); padding-top:10px; display:grid; gap:9px}
.pick-t{font-size:12px; font-weight:700; color:var(--ink2)}
.chips{display:flex; flex-wrap:wrap; gap:6px}
.chip{border:1px solid var(--line2); background:var(--card2); border-radius:7px; padding:7px 12px; font-weight:600; font-size:12.5px; min-height:36px; display:inline-flex; align-items:center; gap:7px}
.chip small{font-weight:500; color:var(--mut); font-size:11px}
.chip.on{border-color:var(--acc); background:var(--acc); color:#fff}
.chip.on small{color:#cfe6df}
.chip:disabled{opacity:.4}
.flash{animation:fl 1.4s ease}
@keyframes fl{0%{box-shadow:0 0 0 3px var(--gold)}100%{box-shadow:var(--shadow)}}

/* формы расхода */
.spend-grid{display:grid; gap:6px}
.spend-row{display:grid; grid-template-columns:1fr auto auto; align-items:center; gap:8px}
.spend-row label{font-size:12.5px; min-width:0}
.spend-row label small{display:block; color:var(--mut2); font-size:10.5px; font-family:"IBM Plex Mono",monospace}
.spend-row .unit{color:var(--mut); font-size:11px; width:34px}
.qty{display:flex; border:1px solid var(--line2); border-radius:7px; overflow:hidden; background:var(--card)}
.qty button{width:34px; height:36px; font-size:17px; font-weight:700; color:var(--acc); background:var(--card2); display:inline-flex; align-items:center; justify-content:center}
.qty input{width:56px; text-align:center; border:0; font-size:13.5px; font-weight:600; background:var(--card)}
.qty input:focus{outline:0; background:var(--acc-soft)}
.overwarn{color:var(--bad); font-size:11.5px; font-weight:600}

/* модалка */
.modal-bg{position:fixed; inset:0; background:rgba(10,22,17,.5); z-index:80; display:flex; align-items:flex-end; justify-content:center}
@media(min-width:640px){.modal-bg{align-items:center; padding:20px}}
.modal{background:var(--card); width:100%; max-width:640px; max-height:90dvh; overflow-y:auto; border-radius:14px 14px 0 0; padding:16px 16px 22px}
@media(min-width:640px){.modal{border-radius:12px}}
.modal .mh{display:flex; align-items:center; gap:10px; margin-bottom:10px}
.modal .mh h3{margin:0; font-size:16px}
.modal .x{margin-left:auto; width:34px; height:34px; border-radius:8px; background:var(--card2); font-size:15px; display:inline-flex; align-items:center; justify-content:center}
.olog .ev{display:flex; gap:10px; padding:6.5px 0; border-bottom:1px dashed var(--line); font-size:12.5px}
.olog .ev:last-child{border-bottom:0}
.olog .tm{color:var(--mut); font-family:"IBM Plex Mono",monospace; font-size:10.5px; white-space:nowrap; padding-top:2px; min-width:44px}
.costbox{border:1px solid var(--line); border-radius:8px; overflow:hidden; margin:10px 0}
.costbox .cr{display:flex; justify-content:space-between; gap:10px; padding:7px 12px; border-bottom:1px solid var(--line); font-size:13px}
.costbox .cr:last-child{border-bottom:0}
.costbox .cr.tt{background:var(--card2); font-weight:700}
.costbox .cr .num{font-size:13px}

/* этикетка */
.label-prev{border:1.5px solid var(--ink); border-radius:6px; padding:14px; max-width:340px; margin:0 auto; background:#fff; color:#111}
.label-prev .lp-top{display:flex; justify-content:space-between; align-items:baseline; border-bottom:1.5px solid #111; padding-bottom:8px; margin-bottom:8px}
.label-prev .lp-brand{font-family:Prata,serif; letter-spacing:.1em; font-size:15px}
.label-prev .lp-kv{display:flex; justify-content:space-between; font-size:12.5px; padding:2.5px 0}
.label-prev .lp-code{display:flex; align-items:center; justify-content:space-between; gap:12px; margin-top:10px}

/* директор */
.chart{width:100%; height:auto}
.bars-h .row{display:grid; grid-template-columns:120px 1fr var(--pv,46px); gap:8px; align-items:center; font-size:12.5px; padding:4px 0}
.bars-h .bar{height:10px; border-radius:3px; background:var(--acc); opacity:.85; min-width:3px}
.bars-h .v{text-align:right; font-family:"IBM Plex Mono",monospace; font-size:11.5px; color:var(--ink2)}
.low{display:flex; align-items:center; gap:9px; padding:6.5px 0; border-bottom:1px dashed var(--line); font-size:13px}
.low:last-child{border-bottom:0}
.low b{font-weight:600}
.sec2{display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-top:10px}
@media(max-width:820px){.sec2{grid-template-columns:1fr}}

/* менеджер */
.mgrid{display:grid; grid-template-columns:repeat(auto-fill,minmax(148px,1fr)); gap:9px}
.mtile{display:flex; flex-direction:column; align-items:stretch; padding:0; background:var(--card); border:1.5px solid var(--line); border-radius:var(--r); overflow:hidden; box-shadow:var(--shadow)}
.mtile img{aspect-ratio:2/1; object-fit:cover; width:100%; height:auto; margin:0; display:block; border:0; border-bottom:1px solid var(--line); border-radius:0; background:#fff; flex:none}
.mtile .p{padding:11px 14px 13px; display:grid; gap:3px}
.mtile b{font-size:14px; display:block}
.mtile .p>span{font-size:11.5px; color:var(--mut)}
.mtile .st{display:flex; gap:4px; flex-wrap:wrap; margin-top:3px; min-height:18px}
.mtile .st .badge{font-size:9.5px; padding:1.5px 6px}
.mtile.on{border-color:var(--acc); box-shadow:0 0 0 2px var(--acc-soft)}
.order-2col{display:grid; grid-template-columns:1.12fr .88fr; gap:10px; align-items:start}
@media(max-width:900px){.order-2col{grid-template-columns:1fr}}
.avail{display:grid; gap:6px}
.avail .ln{display:flex; gap:8px; font-size:13px; align-items:flex-start}
.avail .ic{width:19px; height:19px; border-radius:50%; flex:none; display:inline-flex; align-items:center; justify-content:center; font-size:11px; font-weight:700}
.ic-ok{background:var(--ok-soft); color:var(--ok)} .ic-no{background:var(--wait-soft); color:var(--wait)} .ic-w{background:var(--gold-soft); color:var(--gold)}
.fld{display:grid; gap:4px}
.fld label{font-size:11.5px; font-weight:600; color:var(--ink2)}
.fld input,.fld select{border:1px solid var(--line2); border-radius:7px; padding:9px 11px; min-height:40px; background:var(--card); width:100%}
.fld input:focus{outline:2px solid var(--acc-soft); border-color:var(--acc)}
.check{display:flex; gap:8px; align-items:center; font-size:13px; padding:2px 0}
.check input{width:17px; height:17px; accent-color:var(--acc)}

.toast{position:fixed; left:50%; bottom:16px; transform:translateX(-50%) translateY(8px); background:#0e211b; color:#fff; border-radius:10px; padding:12px 16px; font-size:13px; max-width:min(92vw,540px); box-shadow:0 12px 34px rgba(10,24,19,.4); z-index:95; opacity:0; pointer-events:none; transition:.25s}
.toast.show{opacity:1; transform:translateX(-50%)}
.toast b{color:#dcbe85}
@media (prefers-reduced-motion:reduce){*{animation:none!important; transition:none!important}}

/* ================= аналитика директора ================= */
:root{
  --s1:#0a8563; --s2:#b8860f; --s3:#3a6fc4;
  --seq1:#e8f2ee; --seq2:#bcded2; --seq3:#83c2ad; --seq4:#45a082; --seq5:#0a8563; --seq6:#075e46;
  --viz-grid:#e7ebe9; --demph:#c7cfcb;
}
.vhead{display:flex; align-items:baseline; gap:10px; flex-wrap:wrap; margin-bottom:10px}
.vhead .cap2{margin:0}
.vlegend{display:flex; gap:12px; flex-wrap:wrap; margin-left:auto; font-size:11.5px; color:var(--ink2)}
.vlegend i{display:inline-block; width:10px; height:10px; border-radius:3px; margin-right:5px; vertical-align:-1px}
.vlegend .li{display:inline-block; width:14px; height:0; border-top:2px solid; border-radius:2px; margin-right:5px; vertical-align:3px}
.viz svg rect[data-tt]:hover{filter:brightness(1.1)}
.viz svg circle[data-tt]:hover{filter:brightness(1.1)}
.hm{display:grid; grid-template-columns:40px repeat(7,1fr); gap:3px; align-items:center}
.hm .hml{font-size:10px; color:var(--mut); font-family:"IBM Plex Mono",monospace; text-align:right; padding-right:4px}
.hm .hmc{aspect-ratio:1.6/1; border-radius:4px; min-width:0}
.hm .hmd{font-size:10px; color:var(--mut); text-align:center; font-family:"IBM Plex Mono",monospace}
.hm-scale{display:flex; align-items:center; gap:5px; margin-top:9px; font-size:10.5px; color:var(--mut)}
.hm-scale i{width:16px; height:10px; border-radius:3px; display:inline-block}
.tt{position:fixed; z-index:99; background:#0e211b; color:#fff; font-size:12px; line-height:1.4; border-radius:7px;
  padding:7px 10px; pointer-events:none; max-width:250px; box-shadow:0 8px 22px rgba(10,24,19,.35);
  opacity:0; transform:translateY(4px); transition:opacity .16s ease, transform .16s ease; visibility:hidden}
.tt.on{opacity:1; transform:none; visibility:visible}
.tt b{color:#dcbe85}
.stack100{display:flex; height:36px; border-radius:6px; overflow:hidden; gap:2px}
.stack100 span{display:flex; align-items:center; justify-content:center; color:#fff; font-size:11.5px; font-weight:600; min-width:0; white-space:nowrap}
.gaugebar{display:grid; grid-template-columns:170px 1fr 60px auto; gap:8px; align-items:center; padding:5.5px 0; font-size:12.5px}
.gaugebar .badge{justify-self:end}
.gaugebar .tr{height:10px; border-radius:4px; background:var(--card3); overflow:hidden}
.gaugebar .tr i{display:block; height:100%; border-radius:4px}
@media(max-width:640px){
  .gaugebar{grid-template-columns:1fr 46px auto; font-size:11.5px; row-gap:4px}
  .gaugebar>span:first-child{grid-column:1/-1; font-weight:600}
}
.hero{font-size:42px; font-weight:700; letter-spacing:-.03em; line-height:1.05; font-family:"Golos Text"}
.hero small{font-size:16px; font-weight:600; color:var(--mut)}


/* ================= тёмная тема ================= */
:root[data-theme="dark"]{
  --bg:#0c1210; --card:#131b18; --card2:#171f1c; --card3:#1d2723; --zebra:#151d1a;
  --ink:#e6ede9; --ink2:#b7c4be; --mut:#8d9a94; --mut2:#71807a;
  --line:#243029; --line2:#37453e;
  --side:#0a1d17; --side2:#143029; --side-t:#a9bdb5; --side-b:#dcbe85;
  --acc:#22a37f; --acc-d:#1b8265; --acc-soft:#143028;
  --gold:#d9ab3a; --gold-soft:#2c2310;
  --ok:#3cba86; --ok-soft:#122a1f;
  --wait:#75837c; --wait-soft:#1b2420;
  --bad:#e0685c; --bad-soft:#331a16;
  --re:#b598e0; --re-soft:#261c34;
  --blue:#7b9de8; --blue-soft:#17202e;
  --shadow:0 1px 3px rgba(0,0,0,.4);
  --s1:#22a37f; --s2:#b8860f; --s3:#6b93e0;
  --seq1:#14211c; --seq2:#1b382d; --seq3:#225f49; --seq4:#2b8a67; --seq5:#38b285; --seq6:#7adbb2;
  --viz-grid:#243029; --demph:#3a4741;
}
:root[data-theme="dark"] .top{box-shadow:0 1px 0 rgba(0,0,0,.3)}
:root[data-theme="dark"] .mtile img{opacity:.94}
.thbtn{width:36px; height:36px; border-radius:8px; display:flex; align-items:center; justify-content:center; border:1px solid var(--line); color:var(--ink2); flex:none}
.thbtn svg{width:16px; height:16px}

/* ================= десктоп: два столбца нарядов, широкий логин ================= */
@media(min-width:1080px){
  .cols2{grid-template-columns:repeat(2,minmax(0,1fr)); align-items:start}
  .kpis{grid-template-columns:repeat(auto-fit,minmax(185px,1fr))}
}


/* очень широкие мониторы: пропорциональное укрупнение всего интерфейса */
@media(min-width:1800px){ body{zoom:1.22; --z:1.22} }
@media(min-width:2400px){ body{zoom:1.5; --z:1.5} }
@media(min-width:3000px){ body{zoom:1.6; --z:1.6} }


/* плашка выбранной модели (степпер менеджера) */
.picked{display:flex; align-items:center; gap:14px}
.picked img{width:132px; aspect-ratio:2/1; object-fit:cover; border-radius:7px; border:1px solid var(--line); background:#fff; flex:none}
.picked .pk{flex:1; min-width:0}
.picked .pk b{font-size:16px; display:block}
.picked .pk>span>span:first-child{}
.picked .pk span{font-size:12px; color:var(--mut)}
@media(max-width:560px){.picked{flex-wrap:wrap}.picked img{width:100%}}
/* сетка моделей на шаге 1 — крупнее и на всю ширину */
.mgrid{grid-template-columns:repeat(auto-fill,minmax(170px,1fr))}

/* очень узкие телефоны: топбар без декора */
@media(max-width:420px){
  .bell{display:none}
  .tuser .un{display:none}
  .top-in{gap:8px}
  .pgtitle{font-size:15px}
}


/* ================= микро-анимации ================= */
main > .pagew{animation:pgin .28s ease both}
@keyframes pgin{from{opacity:0; transform:translateY(8px)} to{opacity:1; transform:none}}
.mtile{transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease}
.mtile:hover{border-color:var(--acc); box-shadow:0 6px 16px rgba(10,24,19,.14)}
.mtile:active{transform:scale(.99)}
.person{transition:transform .16s ease, border-color .16s ease, background .16s ease}
.person:hover{transform:translateY(-1.5px)}
.card{transition:box-shadow .2s ease}
.btn{transition:transform .12s ease, background .15s ease, opacity .15s ease}
.btn:active{transform:scale(.97)}
.chip{transition:border-color .14s ease, background .14s ease, color .14s ease}
.sitem{transition:background .15s ease, color .15s ease}
.badge[data-tt]{cursor:help}
@media (prefers-reduced-motion:reduce){main > .pagew{animation:none}}