:root {
  --bg:#0f1420; --panel:#171e2e; --line:#283047; --text:#e8ecf4; --muted:#8a93aa;
  --ok:#27c692; --warn:#ffb347; --err:#ff5b6b; --accent:#4c8cff;
}
* { box-sizing:border-box }
body { margin:0; font-family:-apple-system,Segoe UI,Roboto,sans-serif; background:var(--bg); color:var(--text) }

header { padding:16px 24px; border-bottom:1px solid var(--line); background:var(--panel); position:sticky; top:0; z-index:10 }
h1 { margin:0 0 10px; font-size:20px; font-weight:600 }
.filters { display:flex; gap:12px; align-items:center; flex-wrap:wrap }
.filters label { font-size:13px; color:var(--muted); display:flex; align-items:center; gap:6px }
.filters input,.filters select { background:#0b0f1a; color:var(--text); border:1px solid var(--line); border-radius:6px; padding:6px 8px }
button { background:var(--accent); color:#fff; border:none; padding:8px 14px; border-radius:6px; cursor:pointer; font-weight:500; font-size:13px }
button:hover { filter:brightness(1.1) }
button.secondary { background:#2a3350 }
button.chip { background:#2a3350; padding:6px 12px; font-weight:500 }
button.chip.active { background:var(--accent) }

.tabs { display:flex; gap:4px; padding:0 24px; background:var(--panel); border-bottom:1px solid var(--line); position:sticky; top:92px; z-index:9 }
.tabs button { background:transparent; color:var(--muted); border-radius:0; border-bottom:2px solid transparent; padding:12px 18px; font-size:14px }
.tabs button:hover { color:var(--text) }
.tabs button.active { color:var(--text); border-bottom-color:var(--accent) }

.muted { color:var(--muted); font-size:12px }
main { padding:20px 24px; max-width:1600px; margin:0 auto }
.tab { display:none }
.tab.active { display:block }

.cards { display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:12px; margin-bottom:20px }
.card { background:var(--panel); border:1px solid var(--line); border-radius:10px; padding:14px 16px }
.card .v { font-size:24px; font-weight:600; margin-top:4px }
.card .l { color:var(--muted); font-size:12px; text-transform:uppercase; letter-spacing:.03em }
.card .sub { color:var(--muted); font-size:11px; margin-top:4px }
.card.good { border-color:rgba(39,198,146,.4) }
.card.bad  { border-color:rgba(255,91,107,.4) }

.block { background:var(--panel); border:1px solid var(--line); border-radius:10px; padding:16px; margin-bottom:20px }
.block h2 { margin:0 0 12px; font-size:15px; font-weight:600; color:var(--text) }
.block h2 .muted { font-weight:400; margin-left:8px }
.block .toolbar { display:flex; gap:6px; flex-wrap:wrap; margin-bottom:12px }
.grid2 { display:grid; grid-template-columns:1fr 1fr; gap:20px }
.grid3 { display:grid; grid-template-columns:1fr 1fr 1fr; gap:20px }
@media (max-width:1100px) { .grid2,.grid3 { grid-template-columns:1fr } }

.table-wrap { overflow-x:auto; max-height:620px }
table { width:100%; border-collapse:collapse; font-size:13px }
th, td { padding:8px 10px; text-align:left; border-bottom:1px solid var(--line); white-space:nowrap }
thead th { font-weight:600; color:var(--muted); font-size:11px; text-transform:uppercase; letter-spacing:.03em;
           position:sticky; top:0; background:var(--panel); z-index:2 }
.num { text-align:right; font-variant-numeric:tabular-nums }

/* Договоры — панель фильтра + бейджи стадии */
.contracts-bar { display:flex; gap:10px; align-items:center; flex-wrap:wrap; margin-bottom:16px;
  padding:12px 14px; background:var(--panel); border:1px solid var(--line); border-radius:8px }
.contracts-bar input[type="date"] { background:#0b0f1a; color:var(--text); border:1px solid var(--line); border-radius:6px; padding:6px 8px }
.badge { display:inline-block; padding:2px 8px; border-radius:4px; font-size:11px; background:#2a3350; color:var(--muted) }
.badge.good { background:rgba(39,198,146,.22); color:var(--ok) }
.badge.bad  { background:rgba(255,91,107,.18); color:var(--err) }
tbody tr:hover { background:#1d253c }
tbody tr.off { opacity:.55 }

.verdict,.state { padding:2px 8px; border-radius:4px; font-size:11px; font-weight:600; white-space:nowrap }
.verdict.scale { background:rgba(39,198,146,.2); color:var(--ok) }
.verdict.ok, .verdict.organic_won { background:rgba(76,140,255,.2); color:var(--accent) }
.verdict.optimize { background:rgba(255,179,71,.2); color:var(--warn) }
.verdict.weak { background:rgba(255,179,71,.2); color:var(--warn) }
.verdict.kill { background:rgba(255,91,107,.2); color:var(--err) }
.verdict.no_spend { background:#2a3350; color:var(--muted) }
.state.ON { background:rgba(39,198,146,.2); color:var(--ok) }
.state.SUSPENDED,.state.MODERATION { background:rgba(255,179,71,.2); color:var(--warn) }
.state.OFF,.state.REJECTED,.state.ARCHIVED { background:rgba(255,91,107,.18); color:var(--err) }
.state.UNKNOWN { background:#2a3350; color:var(--muted) }

.banner { padding:10px 14px; border-radius:6px; background:#2a3350; color:var(--muted); margin-bottom:12px; font-size:13px }
.banner.warn { background:rgba(255,179,71,.15); color:var(--warn) }
.banner.err  { background:rgba(255,91,107,.15); color:var(--err) }
.banner.ok   { background:rgba(39,198,146,.15); color:var(--ok) }

.score { display:inline-block; min-width:26px; padding:2px 6px; border-radius:4px; font-weight:600; text-align:center }
.score.hi { background:rgba(39,198,146,.2); color:var(--ok) }
.score.mi { background:rgba(255,179,71,.2); color:var(--warn) }
.score.lo { background:rgba(255,91,107,.2); color:var(--err) }

.role { padding:1px 6px; border-radius:3px; font-size:10px; text-transform:uppercase; background:#2a3350; color:var(--muted) }
.role.qual { background:rgba(76,140,255,.18); color:var(--accent) }
.role.closer { background:rgba(39,198,146,.18); color:var(--ok) }

/* AI-РОП — карточки квалов/мопов */
.quals-cards { display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:12px }
.qcard { background:var(--panel); border:1px solid var(--line); border-radius:10px; padding:14px 16px;
         cursor:pointer; transition:transform .1s, border-color .1s }
.qcard:hover { transform:translateY(-1px); border-color:#3a4566 }
.qcard.active { border-color:var(--accent); box-shadow:0 0 0 2px rgba(76,140,255,.2) }
.qcard.good { border-left:3px solid var(--ok) }
.qcard.mid  { border-left:3px solid var(--warn) }
.qcard.bad  { border-left:3px solid var(--err) }
.qhead { display:flex; justify-content:space-between; align-items:center; margin-bottom:6px }
.qname { font-weight:600; font-size:14px }
.qrole { font-size:10px; text-transform:uppercase; color:var(--muted); padding:2px 6px;
         background:#2a3350; border-radius:3px }
.qscore { font-size:28px; font-weight:700; line-height:1.1 }
.qscore .qmax { font-size:14px; color:var(--muted); font-weight:400 }
.qmeta { display:flex; gap:14px; font-size:12px; color:var(--muted); margin-top:6px }
.qtrend { font-size:12px; margin-top:8px; padding-top:8px; border-top:1px solid var(--line) }
.qtrend.good { color:var(--ok) }
.qtrend.mid  { color:var(--muted) }
.qtrend.bad  { color:var(--err) }
.qtrend .muted { color:var(--muted) }

.bar { background:#2a3350; border-radius:4px; height:8px; min-width:80px; overflow:hidden }
.bar > div { background:var(--err); height:100%; border-radius:4px }

footer { padding:20px 24px; border-top:1px solid var(--line); color:var(--muted); font-size:12px }