:root{
  --bg:#f6f7f9; --card:#fff; --line:#e3e6ea; --text:#1b1f24; --muted:#6b7280;
  --accent:#1f6feb; --warn:#b45309; --warn-bg:#fef6e7; --ok:#15803d; --danger:#b91c1c;
}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--text);
  font:15px/1.5 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif}
header{background:var(--card);border-bottom:1px solid var(--line);padding:14px 22px;
  display:flex;align-items:baseline;gap:14px;flex-wrap:wrap}
header h1{font-size:17px;margin:0;font-weight:600}
header .inn{color:var(--muted);font-size:13px}
header .spacer{margin-left:auto}
main{padding:22px;max-width:1180px;margin:0 auto}
.card{background:var(--card);border:1px solid var(--line);border-radius:10px;
  padding:18px 20px;margin-bottom:18px}
.card h2{font-size:15px;margin:0 0 12px;font-weight:600}
table{width:100%;border-collapse:collapse;font-size:14px}
th,td{text-align:left;padding:8px 10px;border-bottom:1px solid var(--line);
  vertical-align:top;overflow-wrap:anywhere}
th{color:var(--muted);font-weight:500;font-size:13px}
tr:last-child td{border-bottom:none}
.num{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
.muted{color:var(--muted)}
.tag{display:inline-block;padding:1px 8px;border-radius:999px;font-size:12px;
  border:1px solid var(--line);background:#f2f4f7}
.tag.active{border-color:#bbf7d0;background:#f0fdf4;color:var(--ok)}
.tag.planned{border-color:#fde68a;background:var(--warn-bg);color:var(--warn)}
.tag.ended{color:var(--muted)}
.nodata{color:var(--warn);background:var(--warn-bg);border:1px solid #fde68a;
  border-radius:6px;padding:1px 8px;font-size:12px;display:inline-block}
.note{color:var(--muted);font-size:13px;margin-top:4px}
.wrap{display:grid;grid-template-columns:minmax(0,1fr);gap:0}
form.login{max-width:340px;margin:12vh auto;background:var(--card);
  border:1px solid var(--line);border-radius:10px;padding:24px}
form.login h1{font-size:17px;margin:0 0 4px}
label{display:block;margin:14px 0 4px;font-size:13px;color:var(--muted)}
input{width:100%;padding:9px 11px;border:1px solid var(--line);border-radius:7px;
  font-size:15px;background:#fff;color:var(--text)}
button{margin-top:16px;width:100%;padding:10px;border:none;border-radius:7px;
  background:var(--accent);color:#fff;font-size:15px;cursor:pointer}
button.link{width:auto;background:none;color:var(--accent);padding:0;margin:0;font-size:14px}
.err{color:var(--danger);font-size:13px;margin-top:10px;min-height:18px}
@media (prefers-color-scheme:dark){
  :root{--bg:#0f1216;--card:#161a20;--line:#262c35;--text:#e6e9ee;--muted:#9aa4b2;
        --accent:#4f8cff;--warn:#fbbf24;--warn-bg:#2a2213;--ok:#4ade80;--danger:#f87171}
  .tag{background:#1d232b}
  .tag.active{background:#12261a;border-color:#1e4d2e}
  .tag.planned{background:var(--warn-bg);border-color:#4d3d13}
  input{background:#0f1216}
}

/* Прикидка НДФЛ по шкале. */
.calc{margin-top:14px;padding-top:14px;border-top:1px solid var(--line)}
.calc .row{display:flex;gap:10px;align-items:center;max-width:460px}
.calc input{flex:1}
.calc button.btn{margin-top:0;width:auto;padding:9px 16px;white-space:nowrap}
.calc .res{margin-top:10px;font-size:15px}

/* Коды направлений: у td стоит overflow-wrap:anywhere, из-за него «GRO OVI ER». */
.nowrap{white-space:nowrap;overflow-wrap:normal;word-break:normal}

/* Форма смены пароля. */
.pwdform{max-width:420px}
.pwdform button.btn{margin-top:16px;width:auto;padding:9px 18px}
#pMsg{margin-top:10px;font-size:14px;min-height:18px}
#pMsg.err{color:var(--danger)}
#pMsg.ok{color:var(--ok)}

/* ВРЕМЕННЫЙ блок «Что уже работает и что впереди». Убрать вместе с блоком. */
.roadmap ol.stages{margin:0;padding-left:22px}
.roadmap ol.stages li{margin-bottom:9px;color:var(--muted)}
.roadmap ol.stages li b{color:var(--text)}
.roadmap ol.stages li.done{color:var(--muted)}
.roadmap ol.stages li.done b{color:var(--ok)}
.roadmap ol.stages li.next b{color:var(--accent)}
.roadmap .when{display:inline-block;margin-left:6px;padding:1px 8px;border-radius:999px;
  font-size:12px;border:1px solid var(--line);background:#f2f4f7;color:var(--muted);
  white-space:nowrap}
.roadmap li.done .when{border-color:#bbf7d0;background:#f0fdf4;color:var(--ok)}
.roadmap li.next .when{border-color:#fde68a;background:var(--warn-bg);color:var(--warn)}
@media (prefers-color-scheme:dark){
  .roadmap .when{background:#1d232b}
  .roadmap li.done .when{background:#12261a;border-color:#1e4d2e}
  .roadmap li.next .when{background:var(--warn-bg);border-color:#4d3d13}
}

/* Навигация между разделами. */
header nav{display:flex;gap:14px}
header nav a{color:var(--muted);text-decoration:none;font-size:14px}
header nav a:hover{color:var(--text)}
header nav a.on{color:var(--accent);font-weight:600}

/* Плитки сводки. */
.tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:12px}
.tile{border:1px solid var(--line);border-radius:9px;padding:12px 14px;background:var(--bg)}
.tile .tv{font-size:19px;font-weight:600;font-variant-numeric:tabular-nums}
.tile .tl{color:var(--muted);font-size:13px;margin-top:3px}
.tile.ok .tv{color:var(--ok)}
.tile.warn{border-color:#fde68a;background:var(--warn-bg)}
.tile.warn .tv{color:var(--warn)}

/* Фильтры и форма добавления. */
.filters{display:flex;gap:10px;align-items:center;margin-bottom:12px;flex-wrap:wrap}
.filters input,.filters select{width:auto}
.filters button.btn{margin-top:0;width:auto;padding:8px 14px}
.addform .g2{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:0 16px}
.addform label{margin-top:10px}
.addform button.btn{margin-top:16px;width:auto;padding:9px 18px}
#aMsg{margin-top:10px;font-size:14px;min-height:18px}
#aMsg.err{color:var(--danger)}
#aMsg.ok{color:var(--ok)}
select{width:100%;padding:9px 11px;border:1px solid var(--line);border-radius:7px;
  font-size:15px;background:#fff;color:var(--text)}
@media (prefers-color-scheme:dark){ select{background:#0f1216} .tile{background:#0f1216} }