:root { --bg:#f5f6f8; --card:#fff; --ink:#1c2330; --muted:#6b7585; --line:#e1e5ec; --accent:#2b5cff; --accent-ink:#fff;
  --ok:#1e8e4e; --warn:#b7791f; --bad:#c0392b; }
@media (prefers-color-scheme: dark) {
  :root { --bg:#12151b; --card:#1b2029; --ink:#e7eaf0; --muted:#8f9aae; --line:#2a3140; --accent:#5b86ff; }
}
* { box-sizing: border-box; }
body { margin:0; font:14px/1.45 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif; background:var(--bg); color:var(--ink); }
.hidden { display:none !important; }
.muted { color:var(--muted); }
.err { color:var(--bad); min-height:1.2em; }
button, input, select, textarea { font:inherit; color:inherit; }
input, select, textarea { background:var(--card); border:1px solid var(--line); border-radius:6px; padding:6px 8px; max-width:100%; }
select { appearance:none; -webkit-appearance:none; padding-right:32px; background-repeat:no-repeat; background-position:right 10px center; background-size:12px 8px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%236b7585' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
button { background:var(--card); border:1px solid var(--line); border-radius:6px; padding:6px 12px; cursor:pointer; }
button:hover { border-color:var(--accent); }
button.primary { background:var(--accent); color:var(--accent-ink); border-color:var(--accent); }
button.link { border:none; background:none; color:var(--accent); padding:4px; }
header { display:flex; align-items:center; gap:16px; padding:10px 20px; background:var(--card); border-bottom:1px solid var(--line); position:sticky; top:0; z-index:5; }
nav { display:flex; gap:4px; }
nav button { border:none; background:none; padding:6px 12px; border-radius:6px; }
nav button.active { background:var(--accent); color:var(--accent-ink); }
.spacer { flex:1; }
main { padding:16px 20px; max-width:1600px; margin:0 auto; }
.card { background:var(--card); border:1px solid var(--line); border-radius:10px; padding:16px; min-width:0; overflow-x:auto; }
.login { min-height:100vh; display:grid; place-items:center; }
.login .card { width:340px; display:grid; gap:12px; }
.login h1 { margin:0; }
.login label { display:grid; gap:4px; }
.filters { display:flex; flex-wrap:wrap; gap:8px; align-items:center; margin-bottom:12px; }
.filters input[type=search] { width:240px; }
table { width:100%; border-collapse:collapse; background:var(--card); border:1px solid var(--line); border-radius:10px; overflow:hidden; }
th, td { padding:7px 10px; text-align:left; border-bottom:1px solid var(--line); vertical-align:top; overflow-wrap:anywhere; }
th { font-size:12px; text-transform:uppercase; letter-spacing:.03em; color:var(--muted); white-space:nowrap; cursor:pointer; user-select:none; }
th.nosort { cursor:default; }
tr:hover td { background:color-mix(in srgb, var(--accent) 5%, transparent); }
td.num, th.num { text-align:right; }
td .sub { color:var(--muted); font-size:12px; }
.pill { display:inline-block; padding:1px 8px; border-radius:10px; font-size:12px; background:var(--line); }
.s-написали { background:#fdecc8; color:#7a4e00; }
.s-ответили { background:#d6f1de; color:#14622f; }
.s-заинтересованы { background:#cfe3ff; color:#12408f; }
.s-отказ { background:#fbd5d0; color:#8c2418; }
.s-наняли { background:#fff2a8; color:#5d4b00; }
.s-не-будем-писать { background:#dcdfe5; color:#444; }
.pager { display:flex; gap:8px; align-items:center; margin-top:12px; }
.grid { display:grid; gap:16px; grid-template-columns:repeat(auto-fill,minmax(min(420px,100%),1fr)); }
.cols2 { display:grid; gap:16px; grid-template-columns:minmax(0,2fr) minmax(260px,1fr); align-items:start; }
@media (max-width: 1000px) { .cols2 { grid-template-columns:minmax(0,1fr); } }
.kpis { display:grid; gap:12px; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); margin-bottom:16px; }
.kpi.big b { font-size:30px; }
.kpi { min-width:0; overflow-wrap:anywhere; }
details summary { color:var(--accent); }
header { flex-wrap:wrap; }
nav { flex-wrap:wrap; }
.filters select, .filters input { min-width:0; }
.kpi { background:var(--card); border:1px solid var(--line); border-radius:10px; padding:12px; }
.kpi b { font-size:24px; display:block; }
.drawer { position:fixed; top:0; right:0; width:min(560px,100vw); height:100vh; background:var(--card); border-left:1px solid var(--line); box-shadow:-8px 0 24px rgba(0,0,0,.12); overflow:auto; padding:18px; z-index:10; }
.drawer h2 { margin:0 0 4px; }
.drawer dl { display:grid; grid-template-columns:130px 1fr; gap:6px 12px; }
.drawer dt { color:var(--muted); }
.drawer dd { margin:0; word-break:break-word; }
.drawer textarea { width:100%; min-height:200px; }
.row { display:flex; gap:8px; align-items:center; flex-wrap:wrap; margin:8px 0; }
.toast { position:fixed; bottom:20px; left:50%; transform:translateX(-50%); background:var(--ink); color:var(--bg); padding:8px 16px; border-radius:8px; z-index:20; }
.form { display:grid; gap:8px; max-width:420px; }
.bar { height:8px; background:var(--accent); border-radius:4px; }
.kpis.eight { grid-template-columns:repeat(4,1fr); }
@media (min-width:1100px){ .kpis.eight { grid-template-columns:repeat(8,1fr); } }
button.link, td button.link { white-space:nowrap; }
.small { font-size:12px; }
.seg { display:inline-flex; background:var(--line); border-radius:10px; padding:3px; gap:2px; }
.seg button { border:0; background:transparent; padding:7px 16px; border-radius:8px; color:var(--ink); cursor:pointer; font-size:14px; }
.seg button.on { background:var(--card); box-shadow:0 1px 3px rgba(0,0,0,.15); font-weight:600; }
.chip { border:1px solid var(--line); background:var(--card); border-radius:999px; padding:7px 14px; cursor:pointer; color:var(--accent); font-size:14px; }
.chip:hover, .chip.on { background:var(--accent); color:#fff; border-color:var(--accent); }
.panel { margin-top:14px; padding:16px; background:#f6f7fa; border:1px solid var(--line); border-radius:10px; }
.panel[hidden] { display:none; }
.fgrid { display:grid; gap:12px 14px; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); }
.fl { display:flex; flex-direction:column; gap:5px; font-size:12px; color:var(--muted); text-transform:uppercase; letter-spacing:.03em; font-weight:600; }
.fl input { text-transform:none; letter-spacing:0; font-weight:400; font-size:15px; width:100%; box-sizing:border-box; }
.fl.wide { grid-column:1/-1; }
.metrics { display:grid; gap:16px; margin-bottom:20px; }
.metric { padding:16px 18px; }
.mhead { display:flex; justify-content:space-between; align-items:flex-start; gap:16px; flex-wrap:wrap; }
.mtitle { font-size:18px; font-weight:700; }
.mval { text-align:right; display:flex; flex-direction:column; align-items:flex-end; gap:2px; }
.mval b { font-size:34px; line-height:1.1; }
.delta { font-size:13px; color:var(--muted); }
.delta.up { color:#14803c; } .delta.down { color:#c0392b; }
.chart { width:100%; height:auto; display:block; margin-top:8px; }
.chart .gl { stroke:#dfe2e8; stroke-width:1; }
.chart .ax { fill:#7b8190; font-size:12px; }
.chart .ln { fill:none; stroke:#2f6bff; stroke-width:2.5; stroke-linejoin:round; stroke-linecap:round; }
.chart .ar { fill:#2f6bff; fill-opacity:.12; stroke:none; }
.chart .pt rect { fill:transparent; }
.chart .pt circle { fill:#fff; stroke:#2f6bff; stroke-width:2.5; opacity:0; }
.chart .pt:hover circle { opacity:1; }
td.grp { white-space:normal; min-width:150px; }
@media (max-width:640px){ .mval { align-items:flex-start; text-align:left; } }
.hint { text-transform:none; letter-spacing:0; font-weight:400; }
.chart .dot { fill:#2f6bff; }
.grid { grid-template-columns:repeat(auto-fill,minmax(min(460px,100%),1fr)); }
.grid .card { overflow-x:auto; }

/* компактная статистика: помещается на один экран */
.metrics { grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; margin-bottom:16px; }
.metric { padding:10px 14px 8px; }
.mtitle { font-size:14px; }
.mval b { font-size:26px; }
.delta { font-size:12px; }
.chart { margin-top:2px; }
.chart .ax { font-size:11px; }
.strip { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:12px; margin-bottom:12px; }
.strip .kpi { display:flex; flex-direction:column; gap:2px; }
.strip .kpi.big b { font-size:26px; }
@media (max-width:1000px){ .metrics { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:640px){ .metrics { grid-template-columns:minmax(0,1fr); } .strip { grid-template-columns:repeat(2,minmax(0,1fr)); } }

/* статус в одну строку и цветные строки списка (как в таблице) */
.pill { white-space:nowrap; }
tr.r-написали td { background:rgba(245,176,0,.13); }
tr.r-ответили td { background:rgba(40,167,69,.16); }
tr.r-заинтересованы td { background:rgba(43,92,255,.14); }
tr.r-отказ td { background:rgba(220,53,69,.15); }
tr.r-наняли td { background:rgba(255,214,0,.34); }
tr.r-не-писать td { background:rgba(120,130,145,.16); }
tr[class^="r-"]:hover td { filter:brightness(.96); }
/* список лидов на узком экране: сигналы скрываем, email не рвём по буквам */
#tbl td:nth-child(2) { min-width:200px; overflow-wrap:anywhere; }
@media (max-width:1100px){ #tbl th:nth-child(4), #tbl td:nth-child(4) { display:none; } }

/* вкладки списка лидов */
.tabs { display:flex; gap:6px; flex-wrap:wrap; margin-bottom:10px; }
.tab { border:1px solid var(--line); background:var(--card); border-radius:999px; padding:7px 14px; cursor:pointer; font-size:14px; color:var(--ink); }
.tab.on { background:var(--accent); color:#fff; border-color:var(--accent); }
.tab .badge { display:inline-block; min-width:18px; padding:0 6px; border-radius:9px; background:var(--line); color:var(--ink); font-size:12px; margin-left:4px; text-align:center; }
.tab.on .badge { background:rgba(255,255,255,.28); color:#fff; }
.tab-work:not(.on) { border-color:#28a745; color:#14622f; font-weight:600; }
.tab-work:not(.on) .badge { background:#28a745; color:#fff; }
td.note { max-width:320px; white-space:pre-wrap; overflow-wrap:anywhere; font-size:13px; }

.sig { display:inline-block; padding:0 6px; margin-left:6px; border-radius:9px; background:#e8590c; color:#fff; font-size:12px; font-weight:600; vertical-align:middle; }