:root{--ink:#17212b;--paper:#f4f6f8;--card:#fff;--accent:#0a6c74;--warn:#a4380f;--line:#d3dae0;font:16px/1.5 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;color:var(--ink);background:var(--paper)}
*{box-sizing:border-box}body{margin:0}
.bar{display:flex;justify-content:space-between;align-items:baseline;gap:1rem;padding:.9rem 1.2rem;background:var(--ink);color:#fff}
.bar h1{margin:0;font-size:1.15rem;font-weight:650}.who{font-size:.9rem;opacity:.85}
main{max-width:56rem;margin:0 auto;padding:1rem}
.tools,.add{display:flex;flex-wrap:wrap;gap:.6rem;margin-bottom:.9rem}
.tools label{display:flex;align-items:center;gap:.4rem;font-size:.9rem}
input,select,button{font:inherit;padding:.5rem .65rem;border:1px solid var(--line);border-radius:6px;background:var(--card);color:var(--ink)}
.add input{flex:1 1 16rem}
button{background:var(--accent);border-color:var(--accent);color:#fff;cursor:pointer}
button.ghost{background:transparent;color:var(--warn);border-color:var(--line)}
:focus-visible{outline:3px solid #f2b200;outline-offset:2px}
.list{list-style:none;margin:0;padding:0;display:grid;gap:.5rem}
.item{display:grid;grid-template-columns:2rem 1fr auto auto;gap:.6rem;align-items:center;padding:.6rem .8rem;background:var(--card);border:1px solid var(--line);border-left:4px solid var(--line);border-radius:6px}
.item[data-status="Done"]{border-left-color:var(--accent)}.item[data-status="Blocked"]{border-left-color:var(--warn)}
.item .p{font-weight:700;text-align:center}.item .t{overflow-wrap:anywhere}.item small{display:block;color:#566573}
.banner{padding:.6rem .8rem;margin-bottom:.8rem;border:1px solid var(--warn);color:var(--warn);background:#fff3ee;border-radius:6px}
.empty{color:#566573}
@media(max-width:34rem){.item{grid-template-columns:2rem 1fr}.item select,.item button{grid-column:2}}
@media(prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}