:root{
  --bg:#f5f6f8; --card:#fff; --ink:#15181d; --muted:#6a7280; --line:#e3e6ea;
  --brand:#b9381f; --brand-dark:#8f2a16; --ok:#1f7a4d; --warn:#9a6a00; --bad:#b3261e;
  --radius:10px;
}
@media (prefers-color-scheme:dark){
  :root{ --bg:#14161a; --card:#1c1f25; --ink:#eef1f5; --muted:#9aa3ae; --line:#2b3039; }
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background:var(--bg); color:var(--ink);
  font:15px/1.5 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Noto Sans",Arial,sans-serif;
  -webkit-text-size-adjust:100%;
}
a{color:var(--brand); text-decoration:none}
a:hover{text-decoration:underline}

/* ---- header ---- */
.top{
  display:flex; align-items:center; gap:18px; flex-wrap:wrap;
  background:var(--card); border-bottom:1px solid var(--line);
  padding:10px 16px; position:sticky; top:0; z-index:5;
}
.brand{font-weight:700; color:var(--ink); font-size:16px}
.top nav{display:flex; gap:14px; flex-wrap:wrap}
.top nav a{color:var(--muted); font-weight:600; font-size:14px}
.top nav a:hover{color:var(--brand)}
.who{margin-left:auto; display:flex; align-items:center; gap:12px; font-size:13px; color:var(--muted)}
.out{color:var(--muted)}

main{max-width:1180px; margin:0 auto; padding:16px}
.bot{text-align:center; color:var(--muted); font-size:12px; padding:24px 16px}

/* ---- cards ---- */
.card{background:var(--card); border:1px solid var(--line); border-radius:var(--radius); padding:18px; margin:0 0 16px}
body.plain{display:grid; place-items:center; min-height:100vh; padding:16px}
body.plain .card{width:min(420px,100%)}
.card.flat{box-shadow:none}
h1{font-size:22px; margin:0 0 4px}
h2{font-size:19px; margin:0 0 8px}
h3{font-size:16px; margin:0 0 10px}

/* ---- forms ---- */
label{display:block; margin:0 0 12px; font-size:13px; color:var(--muted); font-weight:600}
input,select,textarea{
  width:100%; padding:9px 10px; margin-top:4px;
  border:1px solid var(--line); border-radius:8px;
  background:var(--bg); color:var(--ink); font:inherit;
}
textarea{resize:vertical}
input:focus,select:focus,textarea:focus{outline:2px solid var(--brand); outline-offset:1px}
.row{display:flex; gap:8px; align-items:center; flex-wrap:nowrap}
.row.wrap{flex-wrap:wrap}
.row.tight{gap:5px}
.row label{margin:0}
.row input,.row select{width:auto; margin-top:0}
.inline{display:inline-block; margin:0 4px 4px 0}
.tiny{padding:4px 6px; font-size:12px; width:auto; max-width:130px}
.tiny.num{max-width:56px}
.check{display:inline-flex; align-items:center; gap:6px; font-weight:500; color:var(--ink)}
.check input{width:auto; margin:0}

.btn{
  display:inline-block; background:var(--brand); color:#fff; border:0;
  padding:9px 16px; border-radius:8px; font:inherit; font-weight:600; cursor:pointer;
}
.btn:hover{background:var(--brand-dark); text-decoration:none}
.btn.big{width:100%; padding:11px; font-size:15px}
.btn.ghost{background:transparent; color:var(--muted); border:1px solid var(--line)}
.btn.ghost:hover{background:var(--bg); color:var(--ink)}
.mini{
  display:inline-block; font-size:12px; padding:4px 8px; border-radius:6px;
  border:1px solid var(--line); background:var(--card); color:var(--ink); cursor:pointer; font-weight:600;
}
.mini:hover{border-color:var(--brand); color:var(--brand); text-decoration:none}
.mini.bad{color:var(--bad); border-color:var(--bad)}
.mini.wa{color:var(--ok); border-color:var(--ok)}

/* ---- flash ---- */
.flash{padding:10px 12px; border-radius:8px; margin:0 0 14px; font-size:14px;
  background:#e8f5ee; color:#14532d; border:1px solid #bfe3cf}
.flash.bad{background:#fdeceb; color:#7f1d1a; border-color:#f3c5c2}
@media (prefers-color-scheme:dark){
  .flash{background:#13301f; color:#b9e7cb; border-color:#1f5435}
  .flash.bad{background:#361816; color:#f3bdb9; border-color:#5d2824}
}
.pw{font-size:16px; letter-spacing:1px; background:rgba(0,0,0,.08); padding:2px 8px; border-radius:6px}

/* ---- tiles ---- */
.tiles{display:grid; grid-template-columns:repeat(auto-fit,minmax(130px,1fr)); gap:10px; margin:0 0 16px}
.tile{
  background:var(--card); border:1px solid var(--line); border-radius:var(--radius);
  padding:14px; text-align:center; color:var(--ink);
}
.tile:hover{border-color:var(--brand); text-decoration:none}
.tile b{display:block; font-size:24px; line-height:1.1}
.tile span{display:block; font-size:12px; color:var(--muted); margin-top:3px}
.tile.warn b{color:var(--warn)}

/* ---- filters ---- */
.filters{display:flex; gap:8px; flex-wrap:wrap; margin:0 0 12px}
.filters input,.filters select{width:auto; margin-top:0; min-width:140px}

/* ---- table ---- */
.tablewrap{overflow-x:auto; border:1px solid var(--line); border-radius:var(--radius); background:var(--card)}
table.grid{border-collapse:collapse; width:100%; font-size:14px}
.grid th,.grid td{padding:9px 10px; text-align:left; border-bottom:1px solid var(--line); vertical-align:middle}
.grid th{font-size:12px; text-transform:uppercase; letter-spacing:.03em; color:var(--muted); background:var(--bg); white-space:nowrap}
.grid tbody tr:hover{background:rgba(185,56,31,.05)}
.grid td.empty{text-align:center; color:var(--muted); padding:28px}
.nowrap{white-space:nowrap}
.small{font-size:12.5px}
.muted{color:var(--muted)}
.late{color:var(--bad); font-weight:600}

/* ---- pills ---- */
.pill{display:inline-block; padding:2px 9px; border-radius:999px; font-size:12px; font-weight:600; white-space:nowrap}
.st-new{background:#e7eefc; color:#1b3f8f}
.st-good{background:#e4f5ea; color:#14532d}
.st-warn{background:#fdf1d8; color:#7a5200}
.st-bad{background:#fde9e7; color:#7f1d1a}
.st-booked{background:#14532d; color:#fff}
.st-mid{background:#eceef1; color:#454b54}
@media (prefers-color-scheme:dark){
  .st-new{background:#1a2a4d; color:#b9ccf5}
  .st-good{background:#15351f; color:#b2e4c3}
  .st-warn{background:#3a2d10; color:#f0d79a}
  .st-bad{background:#3a1b19; color:#f2bcb7}
  .st-mid{background:#2a2f38; color:#c4cad3}
}

/* ---- lead page ---- */
.two{display:grid; grid-template-columns:1fr 1fr; gap:16px}
@media (max-width:760px){ .two{grid-template-columns:1fr} }
.facts{display:grid; grid-template-columns:auto 1fr; gap:6px 14px; margin:12px 0 0; font-size:14px}
.facts dt{color:var(--muted); font-weight:600}
.facts dd{margin:0}
.phone{font-size:18px; font-weight:700; display:flex; align-items:center; gap:10px; flex-wrap:wrap}
.back{color:var(--muted); font-size:14px}
.hist{list-style:none; margin:0; padding:0; font-size:13.5px}
.hist li{padding:7px 0; border-bottom:1px solid var(--line)}
.hist .when{color:var(--muted); margin-right:8px; font-size:12px}

/* ---- tabs / pager ---- */
.tabs{display:flex; gap:6px; margin:0 0 14px; flex-wrap:wrap}
.tabs a{padding:7px 14px; border-radius:999px; border:1px solid var(--line); color:var(--muted); font-size:14px; font-weight:600}
.tabs a.on{background:var(--brand); color:#fff; border-color:var(--brand)}
.tabs a:hover{text-decoration:none}
.pager{display:flex; gap:6px; margin:14px 0; flex-wrap:wrap}
.pager a{padding:6px 11px; border:1px solid var(--line); border-radius:7px; color:var(--muted); font-size:14px}
.pager a.on{background:var(--brand); color:#fff; border-color:var(--brand)}
.pager a:hover{text-decoration:none}

.who-pick{display:flex; flex-wrap:wrap; gap:10px 16px; margin:0 0 14px; padding:12px;
  background:var(--bg); border-radius:8px; border:1px solid var(--line)}
.log{background:var(--bg); padding:10px; border-radius:8px; font-size:12px; overflow:auto}