/* «Ход дела» — оформление. Палитра и приёмы — от трекера контура (студия hai):
   бирюза с мятой на светло-сером, карточки со скруглением, моноширинный для дат и кодов.
   Одна таблица стилей на все страницы. */

:root{
  --teal:#0F4C5C; --teal70:#3C6E7C; --teal15:#E3EDF0; --mint:#2FA98C; --mint15:#E4F4EF;
  --ink:#16232A; --grey:#5B6B74; --line:#DCE4E8; --bg:#F5F8F9; --card:#FFFFFF;
  --amber:#B7791F; --amberbg:#FBF3E4; --red:#B23A3A; --redbg:#F9E9E9;
  --mono:"SF Mono",Consolas,"Roboto Mono",monospace;
}
@media (prefers-color-scheme: dark){
  :root{--teal:#7CC4D4; --teal70:#9BCBD6; --teal15:#1E3238; --mint:#4CC8A8; --mint15:#17332C;
    --ink:#E4ECEF; --grey:#9AABB3; --line:#2B3A40; --bg:#11191C; --card:#172226;
    --amber:#E0A84A; --amberbg:#33291A; --red:#E07A7A; --redbg:#3A2222}
}
*{box-sizing:border-box;margin:0;padding:0}
body{font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;
  background:var(--bg);color:var(--ink);font-size:14px;line-height:1.55}
a{color:var(--teal)}
.num{font-family:var(--mono);font-variant-numeric:tabular-nums}

.topbar{background:var(--card);border-bottom:1px solid var(--line);padding:11px 16px;
  display:flex;align-items:center;gap:16px;flex-wrap:wrap;position:sticky;top:0;z-index:5}
.wordmark{font-size:19px;white-space:nowrap;text-decoration:none;color:var(--ink)}
.wordmark b{color:var(--mint);font-weight:800}
.wordmark span{font-weight:300}
.prod{font-size:13px;color:var(--grey);border-left:1px solid var(--line);padding-left:16px}
.topbar .right{margin-left:auto;display:flex;align-items:center;gap:14px;flex-wrap:wrap;font-size:13px}
.topbar .right a{color:var(--teal70);text-decoration:none;border-bottom:1px solid transparent}
.topbar .right a.on,.topbar .right a:hover{color:var(--teal);border-bottom-color:var(--mint)}
.topbar .who{color:var(--grey);font-size:12px}

main{max-width:900px;margin:0 auto;padding:24px 16px 70px}
h1{font-size:22px;color:var(--teal);margin-bottom:6px}
h2{font-size:16px;color:var(--teal);margin:22px 0 8px}
p{margin-bottom:10px}
.muted{color:var(--grey);font-size:13px}
.card{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:18px 20px;margin-bottom:16px}
.narrow{max-width:420px;margin:40px auto}

form .row{margin-bottom:12px}
label{display:block;font-size:12.5px;color:var(--grey);margin-bottom:4px}
input,select,textarea{width:100%;font:inherit;color:var(--ink);background:var(--card);
  border:1px solid var(--line);border-radius:8px;padding:8px 10px}
input:focus,select:focus,textarea:focus{outline:2px solid var(--mint15);border-color:var(--mint)}
button{font:inherit;cursor:pointer;border:1px solid var(--teal);background:var(--teal);color:#fff;
  border-radius:8px;padding:8px 16px}
button.ghost{background:transparent;color:var(--teal)}
button:disabled{opacity:.6;cursor:default}
.actions{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.error{color:var(--red);background:var(--redbg);border-radius:8px;padding:8px 10px;margin-bottom:12px}
.note{color:var(--amber);background:var(--amberbg);border-radius:8px;padding:8px 10px;margin-bottom:12px}

.table-wrap{overflow-x:auto}
table{width:100%;border-collapse:collapse;font-size:13.5px}
th{text-align:left;font-size:11.5px;letter-spacing:.04em;text-transform:uppercase;color:var(--grey);
  font-weight:700;padding:6px 8px;border-bottom:1px solid var(--line)}
td{padding:8px;border-bottom:1px solid var(--line);vertical-align:top}
td select{width:auto}
.pill{display:inline-block;font-size:11.5px;border-radius:20px;padding:1px 9px;background:var(--teal15);color:var(--teal)}
.empty{text-align:center;color:var(--grey);padding:28px 10px}

.toast{position:fixed;bottom:20px;left:50%;transform:translateX(-50%);background:var(--ink);color:var(--bg);
  padding:8px 16px;border-radius:8px;font-size:13px;z-index:20}
.hidden{display:none!important}