:root { --bg:#f6f7f9; --card:#fff; --ink:#1d2433; --muted:#6b7385; --line:#e3e6ec; --acc:#2456d6; --late:#c62828; --soon:#d97706; }
* { box-sizing: border-box; }
body { margin:0; font:14px/1.45 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; color:var(--ink); background:var(--bg); }
a { color:var(--acc); text-decoration:none; }
.top { display:flex; align-items:center; gap:24px; padding:10px 24px; background:#16213e; color:#fff; }
.top .brand { color:#fff; font-weight:700; font-size:16px; }
.top nav a { color:#c8d1ea; margin-right:16px; padding:4px 0; }
.top nav a.on { color:#fff; border-bottom:2px solid #fff; }
.top .who { margin-left:auto; font-size:13px; }
.top .role { background:#2c3a63; padding:2px 8px; border-radius:10px; margin-left:6px; }
main { padding:20px 24px; max-width:1500px; margin:0 auto; }
h1 { font-size:22px; margin:0 0 12px; } h2 { font-size:16px; margin:24px 0 8px; } h3 { font-size:14px; margin:0 0 8px; }
.muted { color:var(--muted); } .mono { font-family: ui-monospace, Menlo, monospace; font-size:12.5px; }
.head-row { display:flex; align-items:baseline; gap:16px; }
.runs { margin-left:auto; font-size:12px; color:var(--muted); }
.run { margin-left:8px; padding:2px 8px; border-radius:10px; background:#e8f5e9; color:#1b5e20; }
.run.partial { background:#fff3e0; color:#e65100; } .run.failed { background:#ffebee; color:var(--late); }
.kpis { display:flex; gap:10px; margin:6px 0 14px; flex-wrap:wrap; }
.kpi { background:var(--card); border:1px solid var(--line); border-radius:8px; padding:8px 14px; color:var(--ink); min-width:110px; }
.kpi b { display:block; font-size:20px; } .kpi span { color:var(--muted); font-size:12px; }
.filters { display:flex; gap:8px; flex-wrap:wrap; align-items:center; background:var(--card); border:1px solid var(--line); padding:10px; border-radius:8px; }
.filters input[type=search] { flex:1; min-width:260px; }
input, select, textarea, button { font:inherit; padding:6px 9px; border:1px solid var(--line); border-radius:6px; background:#fff; color:var(--ink); }
button, .btn { background:var(--acc); color:#fff; border-color:var(--acc); cursor:pointer; padding:6px 14px; border-radius:6px; display:inline-block; }
.btn.ghost { background:#fff; color:var(--acc); }
.chk { font-size:13px; color:var(--muted); }
table.grid { width:100%; border-collapse:collapse; background:var(--card); border:1px solid var(--line); border-radius:8px; overflow:hidden; }
.grid th { text-align:left; font-weight:600; font-size:12px; color:var(--muted); background:#fafbfc; padding:8px 10px; border-bottom:1px solid var(--line); }
.grid td { padding:8px 10px; border-bottom:1px solid var(--line); vertical-align:top; }
.grid tbody tr { cursor:pointer; } .grid tbody tr:hover { background:#f3f6ff; }
.grid.compact tbody tr { cursor:default; }
.grid .num, .num { text-align:right; white-space:nowrap; }
.grid .title { font-weight:500; } .grid .sub { color:var(--muted); font-size:12.5px; }
.empty { text-align:center; color:var(--muted); padding:30px; }
.late { color:var(--late); font-weight:600; } .soon { color:var(--soon); font-weight:600; }
.prio { color:#e0a100; font-weight:700; }
.st { padding:2px 8px; border-radius:10px; font-size:12px; white-space:nowrap; background:#eef1f6; }
.st-new { background:#e3ecff; color:#1f4fbf; } .st-in_work { background:#fff4d6; color:#8a5a00; }
.st-preparing { background:#ffe9d6; color:#9a4a00; } .st-submitted { background:#e6e0ff; color:#4b2bb3; }
.st-won { background:#dff5e3; color:#1b6e2c; } .st-lost { background:#fde2e2; color:#a12020; }
.st-skipped, .st-cancelled { background:#eceff3; color:#5b6474; }
.back { display:inline-block; margin-bottom:10px; }
.card-head { background:var(--card); border:1px solid var(--line); border-radius:8px; padding:16px; display:grid; grid-template-columns: 1fr auto; gap:20px; }
.card-head h1 { margin:6px 0; } .cust { font-size:14px; }
.facts { display:grid; grid-template-columns: repeat(3, auto); gap:10px 22px; align-content:start; }
.facts span { display:block; color:var(--muted); font-size:12px; }
.cols { display:grid; grid-template-columns: 1fr 340px; gap:20px; margin-top:8px; }
.panel { background:var(--card); border:1px solid var(--line); border-radius:8px; padding:14px; margin-top:16px; }
.stack { display:flex; flex-direction:column; gap:8px; margin-top:8px; }
.feed .msg, .kb .msg { background:var(--card); border:1px solid var(--line); border-radius:8px; padding:10px; margin-bottom:8px; }
.meta { color:var(--muted); font-size:12px; }
.kb { display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.sev-warning { border-left:3px solid var(--soon) !important; } .sev-critical { border-left:3px solid var(--late) !important; }
.hist { list-style:none; padding:0; margin:0; } .hist li { padding:6px 0; border-bottom:1px dashed var(--line); }
details summary { cursor:pointer; color:var(--acc); margin:4px 0; }
@media (max-width: 1000px) { .cols, .card-head, .kb { grid-template-columns:1fr; } }
.alert { background:#fff3e0; border:1px solid #ffcc80; padding:8px 12px; border-radius:6px; margin-bottom:12px; }
.badge { font-size:11.5px; padding:1px 7px; border-radius:9px; background:#eef1f6; white-space:nowrap; }
.badge.away { background:#fff1d6; color:#8a5a00; }
tr.inactive td { opacity:.5; }
tr.now td { background:#fffaf0; }
.pools label { margin-right:8px; white-space:nowrap; font-size:13px; }
.row-form { display:flex; gap:8px; flex-wrap:wrap; align-items:center; }
.ghost-danger { background:#fff; color:var(--late); border-color:#f3c2c2; padding:3px 10px; }
.grid.compact input:not([type=checkbox]), .grid.compact select { width:100%; min-width:110px; }
.tabs { display:flex; gap:6px; flex-wrap:wrap; margin:6px 0 14px; }
.tabs a { background:var(--card); border:1px solid var(--line); border-radius:6px; padding:6px 10px; color:var(--ink); font-size:13px; }
.tabs a.on { border-color:var(--acc); color:var(--acc); font-weight:600; }
.preview { margin-top:10px; }
.tag { display:inline-block; font-size:12px; background:#eef3ff; color:#2a4fb0; border-radius:9px; padding:1px 8px; margin:0 4px 3px 0; }
.kind-customer { background:#e8f5e9; color:#1b5e20; } .kind-supplier { background:#e3ecff; color:#1f4fbf; }
.kind-manufacturer { background:#f3e5f5; color:#6a1b9a; } .kind-distributor { background:#fff3e0; color:#9a4a00; }
.grid-form { display:grid; grid-template-columns: repeat(4, 1fr); gap:8px; align-items:center; }
.grid-form .wide { grid-column: span 2; } .grid-form textarea.wide { grid-column: span 4; }
.next { margin-top:4px; color:#8a5a00; font-size:13px; } .next.done { color:var(--muted); text-decoration:line-through; }
form.inline { display:inline; } .ghost { background:#fff; color:var(--acc); padding:2px 9px; }
tr.best td { background:#f1fbf3; } .best-b { background:#dff5e3; color:#1b6e2c; }
.reminders .msg.overdue { border-left:3px solid var(--late); }
.hint { background:#f7f9ff; }
.inline-tabs { margin:0 0 0 12px; } .inline-tabs a { padding:4px 10px; }
.bulkbar { position:sticky; top:0; z-index:5; display:flex; gap:8px; align-items:center; flex-wrap:wrap; background:#f2f5fb;
  border:1px solid var(--line); border-radius:8px; padding:8px 10px; margin:10px 0 4px; }
.bulkbar.active { background:#fff8e1; border-color:#ffd54f; }
th.cb, td.cb { width:28px; text-align:center; } td.cb input, th.cb input { width:16px; height:16px; cursor:pointer; }
.st { color:#1d2433; }
.calc summary { cursor:pointer; } .calc .grid-form label { display:flex; flex-direction:column; font-size:12px; color:var(--muted); gap:3px; }
.appr-pending { background:#fff1b8; } .appr-approved { background:#d9f2d0; } .appr-rejected { background:#f8d7d7; } .appr-draft { background:#eef1f6; }
.top nav { display:flex; flex-wrap:wrap; gap:2px 0; } .top nav a { margin-right:12px; font-size:13.5px; }
/* ---- reports */
.cols2 { display:grid; grid-template-columns: 1fr 1fr; gap:16px; } @media (max-width: 1000px) { .cols2 { grid-template-columns: 1fr; } }
.kpi-warn b { color:var(--late); }
.hbar { display:grid; grid-template-columns: 140px 1fr 170px; align-items:center; gap:8px; margin:5px 0; font-size:13px; }
.hbar-label { color:var(--ink); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.hbar-track { background:#f1f3f6; border-radius:4px; height:14px; }
.hbar-fill { display:block; height:100%; border-radius:0 4px 4px 0; min-width:2px; box-shadow: inset 0 0 0 1px rgba(0,0,0,.06); }
.hbar-val { color:#52514e; text-align:right; white-space:nowrap; }
.legend { display:flex; gap:14px; font-size:12.5px; color:#52514e; margin:2px 0 8px; }
.legend i, .dot { display:inline-block; width:10px; height:10px; border-radius:3px; margin-right:5px; vertical-align:-1px; }
.vbars { display:grid; grid-template-columns: repeat(var(--n), 1fr); gap:2px; height:170px; align-items:end;
  border-bottom:1px solid var(--line); padding-bottom:16px; position:relative; }
.vbar { height:100%; display:flex; flex-direction:column; justify-content:flex-end; position:relative; cursor:default; }
.vstack { display:flex; flex-direction:column; gap:2px; min-height:0; }
.vstack span { display:block; min-height:2px; } .vstack span:first-child { border-radius:4px 4px 0 0; }
.vbar:hover .vstack { filter: brightness(0.92); }
.vbar em { position:absolute; bottom:-16px; left:50%; transform:translateX(-50%); font-size:10.5px; font-style:normal; color:#6b7385; white-space:nowrap; }
.vbar:hover::after { content: attr(data-tip); position:absolute; bottom:calc(100% + 4px); left:50%; transform:translateX(-50%);
  background:#1d2433; color:#fff; font-size:12px; padding:4px 8px; border-radius:6px; white-space:nowrap; z-index:10; pointer-events:none; }
.inbar { display:inline-block; width:120px; height:8px; background:#f1f3f6; border-radius:4px; vertical-align:middle; }
.inbar span { display:block; height:100%; background:#2a78d6; border-radius:4px; }

/* AI analysis */
.ai-tag { display: inline-block; padding: 1px 7px; border-radius: 10px; font-size: 12px; background: #eef1f6; color: #223; text-decoration: none; white-space: nowrap; }
.ai-tag.v-fit { background: #d9f2d0; } .ai-tag.v-check { background: #fff1b8; } .ai-tag.v-exclude { background: #f4c2c2; }
.ai-tag.r-low { background: #e3f4e0; } .ai-tag.r-medium { background: #ffe9b8; } .ai-tag.r-high { background: #f8cfcf; }
.ai-card h3 .ai-tag { margin-left: 6px; vertical-align: middle; }
.ai-card .kv th { width: 160px; text-align: left; color: #556; font-weight: 500; }
.ai-card ul.flags li { margin: 3px 0; }
.ai-card h4 { margin: 10px 0 4px; }
.bulkbar .sep { display: inline-block; width: 1px; height: 22px; background: #d5dae3; margin: 0 6px; vertical-align: middle; }
.linkbtn { background: none; border: 0; padding: 0 0 0 6px; color: #2a62c9; cursor: pointer; font-size: 12px; text-decoration: underline; }
.login-page { display: flex; align-items: center; justify-content: center; min-height: 100vh; background: #f4f6fa; }
.login-box { width: 360px; }
.login-box h1 { margin-top: 0; }
.alert.ok { background: #e6f5e1; border-color: #b9e0ad; }
.who form.inline { display: inline; }
.small { font-size: 12px; }