:root{--bg:#e9edf2;--surface:#fff;--sunk:#f3f5f8;--line:#cfd6df;--fg:#141b26;--muted:#5a6676;--accent:#1f44c8;--accent-fg:#fff;--accent-soft:#e3e9fb;
--open:#a85a00;--open-soft:#fbeed8;--done:#17703f;--done-soft:#dcf1e4;--late:#b3261e;--late-soft:#fbe4e2;
--body:"Segoe UI",system-ui,-apple-system,Roboto,sans-serif;--mono:ui-monospace,Menlo,Consolas,monospace;--r:6px}
@media (prefers-color-scheme:dark){:root{--bg:#10141a;--surface:#1a2029;--sunk:#141920;--line:#313a47;--fg:#e8ecf2;--muted:#9aa6b6;--accent:#8aa4ff;--accent-fg:#0d1320;--accent-soft:#232d4a;
--open:#f0b35a;--open-soft:#3a2c14;--done:#6fd39a;--done-soft:#16321f;--late:#ff8f86;--late-soft:#3d1b19;color-scheme:dark}}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--fg);font:400 15px/1.45 var(--body);padding:20px 16px 48px}
.wrap{max-width:1120px;margin:0 auto;display:flex;flex-direction:column;gap:16px}
header{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px 24px}
h1{font-size:26px;line-height:1.1;margin:0;letter-spacing:-.01em}
h1 a{color:inherit;text-decoration:none}
h2{font-size:18px;margin:0}h3{font-size:15px;margin:8px 0 0}
nav{display:flex;flex-wrap:wrap;gap:16px;align-items:center}
nav a{color:var(--accent);font-weight:600;text-decoration:none}
nav form{margin:0}
.stats{display:flex;gap:18px;flex-wrap:wrap;font-family:var(--mono);font-size:13px;color:var(--muted)}
.stats b{font:700 22px/1 var(--body);color:var(--fg);margin-right:6px;font-variant-numeric:tabular-nums}
.stats .late b{color:var(--late)}
.flash{border:1px solid var(--line);border-radius:var(--r);padding:10px 12px;background:var(--done-soft)}
.flash.err{background:var(--late-soft)}
.cols{display:grid;grid-template-columns:minmax(0,350px) minmax(0,1fr);gap:20px;align-items:start}
@media (max-width:820px){.cols{grid-template-columns:minmax(0,1fr)}}
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:16px;display:flex;flex-direction:column;gap:12px;min-width:0}
.slip{border-top:4px solid var(--accent)}
.narrow{max-width:420px;width:100%;margin:24px auto}
label,legend{display:flex;flex-direction:column;gap:4px;font-size:12px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--muted)}
fieldset{border:0;padding:0;margin:0;display:flex;flex-direction:column;gap:8px;min-width:0}
legend{padding:0;margin-bottom:4px}
input[type=text],input[type=tel],input[type=date],input[type=email],input[type=search],input[type=password],textarea,select{
font:400 15px/1.4 var(--body);color:var(--fg);background:var(--sunk);border:1px solid var(--line);border-radius:var(--r);padding:8px 10px;width:100%;min-width:0}
textarea{resize:vertical;min-height:80px}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.seg{display:flex;border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
.seg label{flex:1;flex-direction:row;justify-content:center;padding:8px;cursor:pointer;font-size:14px;letter-spacing:0;text-transform:none;color:var(--fg);background:var(--sunk)}
.seg input{position:absolute;opacity:0}
.seg label:has(input:checked){background:var(--accent);color:var(--accent-fg)}
.check{flex-direction:row;align-items:flex-start;gap:8px;font-size:14px;font-weight:400;letter-spacing:0;text-transform:none;color:var(--fg);overflow-wrap:anywhere}
.check input{margin-top:3px}
.row{display:flex;gap:10px;flex-wrap:wrap;align-items:flex-end}
.row>*{flex:1 1 150px;min-width:0}
.row>button{flex:0 0 auto}
.hint{font-size:13px;color:var(--muted);margin:0}
.m{font-family:var(--mono);font-size:13px;font-variant-numeric:tabular-nums}
button{font:600 14px/1 var(--body);border-radius:var(--r);border:1px solid var(--line);background:var(--surface);color:var(--fg);padding:9px 12px;cursor:pointer}
button:hover{border-color:var(--muted)}
button.primary{background:var(--accent);border-color:var(--accent);color:var(--accent-fg);padding:12px}
button.ok{background:var(--done);border-color:var(--done);color:var(--surface)}
button.danger{color:var(--late)}
button.link{border:0;background:none;padding:0;color:var(--muted);text-decoration:underline}
.list{display:flex;flex-direction:column;gap:12px;min-width:0}
.bar{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.tabs{display:flex;gap:4px}
.tab{border:1px solid transparent;border-radius:var(--r);padding:8px 12px;color:var(--fg);text-decoration:none;font-weight:600}
.tab.on{background:var(--surface);border-color:var(--line)}
.tab span{font-family:var(--mono);font-weight:400;color:var(--muted)}
.filter{display:flex;gap:6px;flex:1 1 260px;min-width:0}
.filter select{width:auto}.filter input,.filter select{background:var(--surface)}
.ticket{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:14px 16px;display:flex;flex-direction:column;gap:8px;min-width:0}
.ticket.closed{background:var(--sunk)}
.thead{display:flex;flex-wrap:wrap;gap:6px 10px;align-items:center}
.pill{font:500 11px/1 var(--mono);letter-spacing:.06em;text-transform:uppercase;padding:4px 8px;border-radius:3px;background:var(--open-soft);color:var(--open)}
.pill.task{background:var(--accent-soft);color:var(--accent)}.pill.done{background:var(--done-soft);color:var(--done)}.pill.late{background:var(--late-soft);color:var(--late)}
.stamp{font:400 12px var(--mono);color:var(--muted);margin-left:auto}
.ticket h3{font-size:18px;line-height:1.25;margin:0;overflow-wrap:anywhere}
.ticket h3 a{font:400 14px var(--mono);color:var(--accent);margin-left:8px;white-space:nowrap}
.det{margin:0;white-space:pre-wrap;overflow-wrap:anywhere}
.meta{font-size:13px;color:var(--muted);margin:0;overflow-wrap:anywhere}
.acts{display:flex;flex-wrap:wrap;gap:8px;align-items:flex-start;border-top:1px dashed var(--line);padding-top:10px}
.acts form{margin:0}.sp{flex:1}
details summary{cursor:pointer;color:var(--accent);font-size:14px;font-weight:600}
details.del summary{color:var(--late)}
details[open] summary{margin-bottom:8px}
.stack{display:flex;flex-direction:column;gap:8px}
.inline{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin:0}
.inline input{width:auto;flex:1 1 140px}
.empty{border:1px dashed var(--line);border-radius:var(--r);padding:28px 18px;text-align:center;color:var(--muted)}
.empty strong{display:block;font-size:18px;color:var(--fg);margin-bottom:4px}
.scroll{overflow-x:auto}
table{border-collapse:collapse;width:100%;font-size:14px}
th{font-size:11px;font-weight:600;letter-spacing:.05em;text-transform:uppercase;color:var(--muted);text-align:left}
th,td{padding:8px 12px 8px 0;border-bottom:1px solid var(--line);vertical-align:top;white-space:nowrap}
.bad{color:var(--late);font-weight:600}
th[scope],tbody th{white-space:normal}