:root{--bg:#f6f7f9;--card:#fff;--ink:#1d232b;--muted:#5d6875;--line:#dde2e8;--accent:#1f5fbf;--warn:#b54708;--bad:#b42318;--ok:#067647;--chip:#eef2f7}
[hidden]{display:none !important}
@media (prefers-color-scheme:dark){:root{--bg:#14171c;--card:#1c2027;--ink:#e6e9ee;--muted:#9aa4b1;--line:#2c323b;--accent:#6ea2ff;--warn:#f0a35e;--bad:#ff8a80;--ok:#5fd39a;--chip:#252b34}}
*{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)}
header{display:flex;gap:16px;align-items:center;padding:10px 16px;background:var(--card);border-bottom:1px solid var(--line);position:sticky;top:0;z-index:5;flex-wrap:wrap}
.brand{font-weight:700}
nav button{border:0;background:none;padding:6px 10px;border-radius:6px;cursor:pointer;color:var(--muted);font:inherit}
nav button.on{background:var(--chip);color:var(--ink);font-weight:600}
#who{margin-left:auto;color:var(--muted)}
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px;padding:12px 16px}
.stat{background:var(--card);border:1px solid var(--line);border-radius:8px;padding:10px 12px;cursor:pointer}
.stat b{display:block;font-size:22px}
.stat span{color:var(--muted);font-size:12px}
.stat.warn b{color:var(--warn)} .stat.bad b{color:var(--bad)}
main{padding:0 16px 40px}
.filters{display:flex;flex-wrap:wrap;gap:8px;align-items:center;background:var(--card);border:1px solid var(--line);border-radius:8px;padding:10px;margin-bottom:10px}
.filters label{color:var(--muted);font-size:13px;display:flex;gap:4px;align-items:center}
input,select,button,.btn{font:inherit;color:var(--ink);background:var(--card);border:1px solid var(--line);border-radius:6px;padding:5px 8px}
button,.btn{cursor:pointer;background:var(--accent);color:#fff;border-color:var(--accent);text-decoration:none}
button.ghost,.btn.ghost{background:transparent;color:var(--accent)}
.wide{flex:1 1 260px} .narrow{width:80px}
.count{color:var(--muted);margin:4px 2px 8px}
table{width:100%;border-collapse:collapse;background:var(--card);border:1px solid var(--line);border-radius:8px;overflow:hidden}
th,td{text-align:left;padding:7px 9px;border-bottom:1px solid var(--line);vertical-align:top}
th{font-size:12px;color:var(--muted);font-weight:600;background:var(--chip)}
tbody tr{cursor:pointer} tbody tr:hover{background:var(--chip)}
.sub{color:var(--muted);font-size:12px}
.chip{display:inline-block;padding:1px 7px;border-radius:10px;background:var(--chip);font-size:12px;white-space:nowrap}
.due-bad{color:var(--bad);font-weight:600} .due-warn{color:var(--warn);font-weight:600}
.pager{text-align:center;padding:10px}
#drawer{position:fixed;top:0;right:0;bottom:0;width:min(720px,100%);background:var(--card);border-left:1px solid var(--line);box-shadow:-8px 0 24px rgba(0,0,0,.12);overflow:auto;z-index:10;padding:0 16px 30px}
.drawer-head{display:flex;justify-content:space-between;align-items:flex-start;gap:10px;position:sticky;top:0;background:var(--card);padding:12px 0;border-bottom:1px solid var(--line)}
.drawer-head h2{font-size:17px;margin:0}
.grid{display:grid;grid-template-columns:180px 1fr;gap:6px 10px;align-items:center;margin:12px 0}
.grid label{color:var(--muted);font-size:13px}
.grid input,.grid select{width:100%}
h3{font-size:14px;margin:18px 0 6px}
.note{background:#fff4e5;color:#7a3e00;border-radius:6px;padding:8px 10px;margin:10px 0}
@media (prefers-color-scheme:dark){.note{background:#3a2a14;color:#ffcf99}}
.dl{border:1px solid var(--line);border-radius:8px;padding:8px 10px;margin:6px 0}
.dl .acts{display:flex;gap:6px;flex-wrap:wrap;margin-top:6px}
.dl .acts button{padding:3px 8px;font-size:12px}
.hist{font-size:12px;color:var(--muted);border-top:1px solid var(--line);padding:5px 0}
#toast{position:fixed;bottom:16px;left:50%;transform:translateX(-50%);background:var(--ink);color:var(--bg);padding:8px 14px;border-radius:8px;z-index:20}
@media (max-width:700px){.grid{grid-template-columns:1fr} th:nth-child(4),td:nth-child(4),th:nth-child(5),td:nth-child(5),th:nth-child(8),td:nth-child(8){display:none}}
@media (max-width:700px){table{display:block;overflow-x:auto;white-space:normal}.filters>*{max-width:100%}.filters label{flex-wrap:wrap}input[type=date]{max-width:150px}header{gap:8px}#who{margin-left:0}}
.more{display:contents}.phone-only{display:none}
@media (max-width:700px){.phone-only{display:inline-block}.more{display:none}.filters.open .more{display:flex;flex-wrap:wrap;gap:8px;width:100%}}
#ro{margin:10px 16px 0}
.dl input.wide{flex:1 1 200px}
#deal-ctx{margin:10px 16px 0;display:flex;align-items:center;gap:10px;flex-wrap:wrap}