:root{
  --bg:#0d1420; --panel:#151f2e; --panel2:#1b2738; --line:#26334a;
  --text:#e7edf5; --muted:#8fa3bc;
  --a:#38bdf8; --b:#a78bfa; --c:#64748b;
  --good:#4ade80;
}
*{margin:0;padding:0;box-sizing:border-box}
body{
  font-family:"Segoe UI",Roboto,Arial,sans-serif;
  background:linear-gradient(160deg,#0d1420,#101a2c 60%,#0d1420);
  color:var(--text); min-height:100vh;
}
.wrap{max-width:1180px;margin:0 auto;padding:0 20px}
header{border-bottom:1px solid var(--line);padding:18px 0;background:rgba(13,20,32,.85);position:sticky;top:0;z-index:5;backdrop-filter:blur(6px)}
.head-in{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap}
h1{font-size:1.5rem;letter-spacing:.3px}
.sub{color:var(--muted);font-size:.95rem;margin-top:4px}
.head-right{display:flex;align-items:center;gap:14px}
.status{color:var(--muted);font-size:.85rem;max-width:280px;text-align:right}
button{
  background:linear-gradient(135deg,#1d4ed8,#2563eb);border:none;color:#fff;
  padding:10px 18px;border-radius:8px;font-size:.92rem;cursor:pointer;font-weight:600;
  transition:.2s;
}
button:hover{filter:brightness(1.15)}
button:disabled{opacity:.55;cursor:wait}
main{padding:26px 20px 40px}

.kpi{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:14px;margin-bottom:22px}
.kpi-card{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:16px 18px}
.kpi-card .lbl{color:var(--muted);font-size:.8rem;text-transform:uppercase;letter-spacing:.8px}
.kpi-card .val{font-size:1.5rem;font-weight:700;margin-top:6px}
.kpi-card .val small{font-size:.95rem;color:var(--muted);font-weight:400}

.groups{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-bottom:22px}
.g-card{border-radius:12px;padding:18px;border:1px solid var(--line);background:var(--panel)}
.g-card h3{display:flex;justify-content:space-between;font-size:1.05rem}
.g-card .gsum{font-size:1.45rem;font-weight:700;margin-top:10px}
.g-card .gmeta{color:var(--muted);font-size:.85rem;margin-top:4px}
.bar{height:8px;border-radius:6px;background:var(--panel2);margin-top:12px;overflow:hidden}
.bar i{display:block;height:100%;border-radius:6px}
.gA .bar i{background:linear-gradient(90deg,#0ea5e9,#38bdf8)}
.gB .bar i{background:linear-gradient(90deg,#7c3aed,#a78bfa)}
.gC .bar i{background:linear-gradient(90deg,#475569,#64748b)}
.gA .tag{color:var(--a)} .gB .tag{color:var(--b)} .gC .tag{color:var(--c)}
.badge{display:inline-block;min-width:22px;text-align:center;padding:2px 7px;border-radius:6px;font-weight:700;font-size:.78rem}
.badge.A{background:rgba(56,189,248,.16);color:var(--a)}
.badge.B{background:rgba(167,139,250,.16);color:var(--b)}
.badge.C{background:rgba(100,116,139,.2);color:#b7c3d4}

.panel{background:var(--panel);border:1px solid var(--line);border-radius:14px;overflow:hidden}
.panel-head{display:flex;justify-content:space-between;align-items:center;gap:14px;padding:16px 18px;border-bottom:1px solid var(--line);flex-wrap:wrap}
.panel-head h2{font-size:1.1rem}
.hint{color:var(--muted);font-size:.8rem;font-weight:400}
.filters{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.f{background:var(--panel2);color:var(--muted);padding:7px 13px;border:1px solid var(--line);font-weight:600;border-radius:8px}
.f:hover{filter:none;border-color:#3b82f6}
.f.active{background:#2563eb;color:#fff;border-color:#2563eb}
#search{background:var(--panel2);border:1px solid var(--line);color:var(--text);padding:8px 12px;border-radius:8px;width:220px;outline:none}
#search:focus{border-color:#3b82f6}
.table-scroll{overflow:auto;max-height:65vh}
table{width:100%;border-collapse:collapse;font-size:.9rem}
th{position:sticky;top:0;background:var(--panel2);color:var(--muted);text-align:left;padding:10px 12px;font-size:.78rem;text-transform:uppercase;letter-spacing:.5px;white-space:nowrap}
td{padding:8px 12px;border-top:1px solid rgba(38,51,74,.55);vertical-align:middle}
tbody tr:hover{background:rgba(37,99,235,.07)}
.num{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
.name{max-width:430px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
td small{color:var(--muted)}
footer{color:var(--muted);font-size:.8rem;padding:18px 20px 30px;line-height:1.5}

/* ===== Вкладки (Закупки ABC / Продажи) ===== */
.tabs{display:flex;gap:6px;margin-bottom:14px}
.tab{background:var(--panel2);border:1px solid var(--line);color:var(--muted);
  text-decoration:none;padding:7px 16px;border-radius:8px;font-size:.88rem;font-weight:600}
.tab:hover{color:var(--text);border-color:#3b82f6}
.tab.active{background:#2563eb;border-color:#2563eb;color:#fff}

/* ===== Страница продаж: помесячный график ===== */
.chart-scroll{overflow:auto;padding:18px}
.bchart{display:flex;gap:14px;min-width:640px}
.mcol{flex:1;display:flex;flex-direction:column;align-items:center;gap:4px}
.mbars{display:flex;align-items:flex-end;gap:5px;height:170px;width:100%;justify-content:center}
.mbar-wrap{display:flex;align-items:flex-end;height:100%;width:26px}
.mbar{border-radius:5px 5px 0 0;width:100%;min-height:2px;transition:.2s}
.mbar.m25{background:linear-gradient(180deg,#64748b,#475569)}
.mbar.m26{background:linear-gradient(180deg,#38bdf8,#0ea5e9)}
.mbar-wrap:hover .mbar{filter:brightness(1.3)}
.mlab{color:var(--muted);font-size:.78rem;text-transform:uppercase;letter-spacing:.4px}
.mval{font-size:.72rem;font-variant-numeric:tabular-nums}
.m25v{color:#94a3b8}
.m26v{color:#7dd3fc}
.mdelta{font-size:.72rem;font-weight:700}
.legend{display:flex;align-items:center;gap:8px;color:var(--muted);font-size:.85rem}
.lg{width:16px;height:10px;border-radius:3px;display:inline-block}
.lg.m25{background:#64748b}
.lg.m26{background:#38bdf8}

/* ===== Цвета роста/падения и бейджи статусов клиентов ===== */
.up{color:#4ade80}
.down{color:#f87171}
.flat{color:var(--muted)}
.kpi-card .val.up{color:#4ade80}
.kpi-card .val.down{color:#f87171}
.badge.st-up{background:rgba(74,222,128,.14);color:#4ade80}
.badge.st-down{background:rgba(248,113,113,.14);color:#f87171}
.badge.st-new{background:rgba(56,189,248,.16);color:#38bdf8}
.badge.st-sleep{background:rgba(248,113,113,.2);color:#fca5a5}
.badge.st-flat{background:rgba(143,163,188,.16);color:var(--muted)}
.sleep-list{list-style:none;padding:6px 18px 16px}
.sleep-list li{padding:8px 0;border-top:1px solid rgba(38,51,74,.55);color:var(--text)}
.sleep-list li small{color:var(--muted)}
.kpi-card .val small,.kpi-card small{color:var(--muted);font-weight:400}
@media(max-width:820px){.groups{grid-template-columns:1fr}.head-in{flex-direction:column;align-items:flex-start}.head-right{width:100%;justify-content:space-between}}