:root{--bg:#f4f5f7;--card:#fff;--ink:#1d2433;--mute:#667085;--line:#d9dde5;--accent:#2557d6;--hi:#c0392b;--med:#b7791f;--low:#2f855a;--soft:#eef2fb}
@media (prefers-color-scheme:dark){:root{--bg:#14171f;--card:#1e2330;--ink:#e8ebf2;--mute:#9aa3b5;--line:#343b4d;--accent:#7aa2ff;--hi:#ff7b6b;--med:#e8b24a;--low:#58c58f;--soft:#262d40}}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--ink);font:15px/1.4 system-ui,sans-serif}
.hidden,[hidden]{display:none!important}
h1{font-size:18px;margin:0}
h2{font-size:17px;margin:0 0 8px}
h3{font-size:14px;margin:14px 0 4px}
input,select,textarea,button{font:inherit;color:inherit;background:var(--card);border:1px solid var(--line);border-radius:6px;padding:6px 9px}
button{cursor:pointer;background:var(--accent);color:#fff;border-color:var(--accent)}
button:disabled{opacity:.5;cursor:default}
button.ghost,button.s{background:transparent;color:var(--ink);border-color:var(--line)}
button.s{padding:3px 9px;font-size:13px}
button.danger{background:var(--hi);border-color:var(--hi);color:#fff}
.sub{color:var(--mute);font-size:13px}
header{display:flex;flex-wrap:wrap;gap:10px;align-items:center;padding:10px 16px;background:var(--card);border-bottom:1px solid var(--line)}
#tabs{display:flex;gap:4px;margin-left:8px}
#tabs button{background:transparent;color:var(--ink);border-color:transparent}
#tabs button.on{background:var(--soft);border-color:var(--line);font-weight:600}
#who{margin-left:auto;color:var(--mute)}
.live{font-size:12px;color:var(--mute)}
.live.ok::before{content:"";display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--low);margin-right:5px}
.live.bad::before{content:"";display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--hi);margin-right:5px}
.msg{padding:0 16px;min-height:22px;color:var(--hi)}
.wrap{max-width:1200px;margin:0 auto;padding:12px 16px 40px}
#tileview.wrap{max-width:none}
.panel{background:var(--card);border:1px solid var(--line);border-radius:10px;padding:12px 14px;margin-bottom:12px}
.gh{display:flex;justify-content:space-between;gap:10px;align-items:baseline;margin-bottom:6px}
.chips{display:flex;flex-wrap:wrap;gap:6px;margin:6px 0 10px}
.chip{background:var(--soft);border:1px solid var(--line);border-radius:12px;padding:2px 10px;font-size:13px}
.metrics{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-bottom:12px}
.metric{background:var(--card);border:1px solid var(--line);border-radius:10px;padding:10px 12px}
.metric b{display:block;font-size:22px}
.metric span{color:var(--mute);font-size:13px}
.metric.od b{color:var(--hi)}
.filters{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-bottom:12px}
.filters button{background:transparent;color:var(--ink);border-color:var(--line)}
.filters button.on{background:var(--soft);font-weight:600}
.filters .gap{width:12px}
.fm{display:flex;flex-wrap:wrap;gap:8px;margin-top:8px}
.fm input[type=text]{flex:1 1 240px}
.r{display:grid;grid-template-columns:1fr 130px 100px auto;gap:10px;align-items:center;padding:8px 0;border-top:1px solid var(--line)}
.r .t{font-weight:600;word-break:break-word}
.due{font-weight:400;color:var(--mute);font-size:13px}
.due.od,.overdue{color:var(--hi);font-weight:600}
.a{display:flex;gap:6px;flex-wrap:wrap;justify-content:flex-end}
.pill{border-radius:10px;padding:1px 9px;font-size:12px;border:1px solid var(--line);text-align:center}
.pill.prog{background:var(--soft)}
.pill.done{color:var(--low);border-color:var(--low)}
.pill.tagp{border-color:var(--accent);color:var(--accent);font-weight:400;margin-left:4px}
.th{padding:4px 0 10px 12px;border-left:3px solid var(--line);margin:0 0 6px}
.cm{padding:5px 0}
.mt{font-size:12px;color:var(--mute);display:flex;gap:8px;align-items:center}
.mt button{border:0;background:transparent;color:var(--mute);padding:0;text-decoration:underline;font-size:12px}
.tx{white-space:pre-wrap;word-break:break-word}
.men{background:var(--soft);border-radius:4px;padding:0 3px;color:var(--accent)}
.men.me{background:var(--accent);color:#fff}
.cf{display:flex;gap:8px;margin-top:6px}
.cw{position:relative;flex:1}
.cw input{width:100%}
.ml{position:absolute;left:0;top:100%;z-index:5;background:var(--card);border:1px solid var(--line);border-radius:6px;min-width:180px;box-shadow:0 4px 14px rgba(0,0,0,.2)}
.mi{padding:5px 10px;cursor:pointer}
.mi.sel,.mi:hover{background:var(--soft)}
#board{display:grid;grid-template-columns:repeat(5,minmax(210px,1fr));gap:12px;align-items:start;overflow-x:auto}
.col{background:var(--bg);border:1px solid var(--line);border-radius:10px;min-height:200px;padding:8px}
.col.over{outline:2px dashed var(--accent)}
.col h2{font-size:13px;text-transform:uppercase;letter-spacing:.04em;color:var(--mute);margin:2px 4px 8px}
.tile{background:var(--card);border:1px solid var(--line);border-left:4px solid var(--low);border-radius:8px;padding:8px 10px;margin-bottom:8px;cursor:grab}
.tile.high{border-left-color:var(--hi)}.tile.medium{border-left-color:var(--med)}
.tile.dragging{opacity:.4}
.tile .t{font-weight:600;word-break:break-word}
.tile .m{color:var(--mute);font-size:12px;margin-top:4px;display:flex;flex-wrap:wrap;gap:4px 10px}
.tag{border:1px solid var(--line);border-radius:10px;padding:0 7px;font-size:11px}
.tag.rev{border-color:var(--med);color:var(--med)}
dialog{border:1px solid var(--line);border-radius:10px;background:var(--card);color:var(--ink);width:min(640px,94vw);padding:16px}
dialog::backdrop{background:rgba(0,0,0,.45)}
label{display:block;margin:8px 0;font-size:13px;color:var(--mute)}
label input,label select,label textarea{display:block;width:100%;margin-top:3px;color:var(--ink)}
.row{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px;align-items:center}
.loginbox{max-width:340px;margin:12vh auto;background:var(--card);border:1px solid var(--line);border-radius:10px;padding:20px}
.loginbox button{width:100%;margin-top:6px}
.err{color:var(--hi);min-height:20px}
.sum{white-space:pre-wrap;word-break:break-word}
.pr{display:flex;gap:10px;align-items:center;padding:8px 0;border-top:1px solid var(--line)}
.pr .grow{flex:1}
.tr{display:grid;grid-template-columns:1fr 90px auto auto;gap:8px;align-items:center;margin:6px 0}
.tr .bd{font-size:13px;color:var(--mute);display:flex;gap:4px;align-items:center}
.tr input[type=checkbox]{width:auto;margin:0}
.num{width:80px}
@media (max-width:900px){#board{grid-template-columns:repeat(5,80vw)}.r{grid-template-columns:1fr}.a{justify-content:flex-start}.metrics{grid-template-columns:repeat(2,1fr)}}