: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; }