:root {
  --bg: #eef1f4; --panel: #fff; --line: #dde2e8; --text: #15191e; --muted: #5f6b7a;
  --red: #c62828; --amber: #a35f00; --blue: #3949ab; --green: #12804a; --brand: #107a3a;
}
@media (prefers-color-scheme: dark) {
  :root { --bg: #11151a; --panel: #181d24; --line: #2a313b; --text: #e8ecf1; --muted: #93a0b0; --red: #ff7676; --amber: #ffc25e; --blue: #9aa8ff; --green: #4ad295; }
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; background: var(--bg); color: var(--text); font: 15px/1.4 "Segoe UI", system-ui, sans-serif; }
body { max-width: 640px; margin: 0 auto; padding-bottom: env(safe-area-inset-bottom); }
.top { display: flex; align-items: center; gap: 8px; padding: 10px 14px; background: var(--brand); color: #fff; position: sticky; top: 0; z-index: 5; }
.logo { font-size: 18px; letter-spacing: .6px; }
.date { opacity: .9; font-size: 13px; }
.sp { flex: 1; }
.status { font-size: 12px; opacity: .9; }
.status.stale { color: #ffd4d4; font-weight: 700; }
.banner { background: var(--amber); color: #1a1205; font-weight: 700; font-size: 13px; padding: 7px 14px; text-align: center; }
.count { background: var(--panel); border-bottom: 1px solid var(--line); color: var(--muted); font-size: 13px; padding: 8px 14px; }
.count b { color: var(--text); } .count.bad { background: #fdecec; color: var(--red); } .count.bad b { color: var(--red); }
.tabs { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; background: var(--panel); border-bottom: 1px solid var(--line); position: sticky; top: 44px; z-index: 4; }
.tab { border: 0; background: none; padding: 9px 2px 7px; cursor: pointer; border-bottom: 3px solid transparent; color: inherit; }
.tab b { display: block; font-size: 23px; line-height: 1.1; }
.tab span { font-size: 12px; color: var(--muted); font-weight: 600; } .tab small { display: block; font-weight: 400; font-size: 11px; }
.tab.red b { color: var(--red); } .tab.amber b { color: var(--amber); } .tab.blue b { color: var(--blue); } .tab.green b { color: var(--green); }
.tab.on { border-bottom-color: var(--brand); background: color-mix(in srgb, var(--brand) 7%, var(--panel)); }
.list { padding: 8px; }
.sub-h { padding: 10px 8px 3px; font-size: 11.5px; font-weight: 800; letter-spacing: .6px; text-transform: uppercase; color: var(--muted); }
.line { display: grid; grid-template-columns: 30px auto 1fr auto; gap: 8px; align-items: center; background: var(--panel); border: 1px solid var(--line); border-left: 4px solid #c3cad2; border-radius: 8px; padding: 9px 10px; margin: 5px 0; }
.line .sn { font-weight: 800; color: var(--muted); text-align: right; }
.veh { font: 700 15px Consolas, "Cascadia Mono", monospace; }
.st { min-width: 0; } .st .t { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.st small { color: var(--muted); font-size: 12px; display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.min { color: var(--muted); font-size: 12px; white-space: nowrap; }
.line.k-problem { border-left-color: var(--red); } .line.k-problem .t { color: var(--red); font-weight: 600; }
.line.k-pdf { border-left-color: var(--green); } .line.k-pdf .t { color: var(--green); font-weight: 600; }
.line.k-backend, .line.k-waitafms { border-left-color: var(--amber); }
.line.k-dsc { border-left-color: var(--blue); }
.line.k-done { border-left-color: #8fd1a8; }
.line.hot { box-shadow: 0 0 0 2px color-mix(in srgb, var(--red) 35%, transparent); }
.empty { color: var(--muted); text-align: center; padding: 36px 16px; }

/* actions (owner's link only) */
.line:has(.acts) { grid-template-columns: 30px auto 1fr auto; row-gap: 6px; }
.acts { grid-column: 1 / -1; display: flex; gap: 6px; justify-content: flex-end; align-items: center; }
.act, .bulk { border: 0; border-radius: 8px; padding: 9px 14px; font: inherit; font-size: 14px; font-weight: 700; cursor: pointer; }
.act.red, .bulk.red { background: var(--red); color: #fff; }
.act.pa { background: #12804a; color: #fff; } .act.fa { background: #e07a00; color: #fff; }
.act.blue, .bulk.blue { background: #3949ab; color: #fff; }
.act.light, .bulk.light { background: var(--panel); color: var(--text); border: 1px solid var(--line); }
.bulk { display: block; width: 100%; margin: 4px 0 8px; }
.sub-h .bulk { display: inline-block; width: auto; margin: 0 0 0 8px; padding: 5px 10px; font-size: 12px; text-transform: none; letter-spacing: 0; }
.sending { color: var(--muted); font-size: 13px; }
.hint { color: var(--muted); font-size: 12px; }
.toast { position: fixed; left: 12px; right: 12px; bottom: 16px; max-width: 616px; margin: 0 auto; background: #111820; color: #fff; padding: 10px 12px; border-radius: 10px; font-size: 14px; box-shadow: 0 6px 18px rgba(0,0,0,.35); z-index: 9; }
.foot { color: var(--muted); font-size: 12px; text-align: center; padding: 12px; }

/* Notes tab (owner's link only) */
.tab.grey b { color: var(--muted); }
.note { display: flex; gap: 10px; align-items: flex-start; background: var(--panel); border: 1px solid var(--line); border-left: 4px solid var(--line); border-radius: 8px; padding: 10px 12px; margin: 5px 0; font-size: 15px; }
.note .tick { color: var(--muted); }
.note.done .ntext { text-decoration: line-through; color: var(--muted); }
.note.c-red { border-left-color: var(--red); } .note.c-amber { border-left-color: var(--amber); } .note.c-green { border-left-color: var(--green); }
.note.c-blue { border-left-color: var(--blue); } .note.c-violet { border-left-color: #8a63d2; }