:root{
  --bg:#f6f7fb; --card:#fff; --ink:#1a1d29; --muted:#5d6480; --faint:#8b91a8;
  --line:#e4e6f0; --accent:#4f46e5; --accent-soft:#eef0fe; --accent-ink:#3730a3;
  --high:#c2410c; --high-bg:#fff1e8; --med:#a16207; --med-bg:#fdf6e3; --low:#3f6212; --low-bg:#f1f7e8;
  --danger:#b42318; --radius:14px;
  --shadow:0 1px 2px rgba(26,29,41,.05), 0 8px 24px -12px rgba(26,29,41,.14);
  --font:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
}
*{box-sizing:border-box}
html,body{margin:0}
body{
  background:var(--bg); color:var(--ink); font-family:var(--font);
  font-size:16px; line-height:1.5; -webkit-text-size-adjust:100%;
  overflow-x:hidden;
}
h1,h2,h3{margin:0; line-height:1.25; letter-spacing:-.01em}
p{margin:0}
.wrap{width:100%; max-width:1180px; margin:0 auto; padding:0 20px}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.skip{position:absolute;left:-9999px;top:0;background:#fff;padding:10px 14px;z-index:20;border-radius:0 0 10px 0}
.skip:focus{left:0}

:focus-visible{outline:3px solid var(--accent); outline-offset:2px; border-radius:6px}

/* Header */
.topbar{background:#fff; border-bottom:1px solid var(--line); position:sticky; top:0; z-index:10}
.topbar-in{display:flex; flex-wrap:wrap; gap:16px; align-items:center; justify-content:space-between; padding-top:18px; padding-bottom:18px}
.brand{display:flex; gap:12px; align-items:center; min-width:0}
.mark{width:34px;height:34px;border-radius:10px;flex:0 0 auto;
  background:linear-gradient(140deg,var(--accent),#8b84f5); box-shadow:0 4px 12px -4px rgba(79,70,229,.6)}
h1{font-size:1.3rem; font-weight:700}
.tagline{color:var(--muted); font-size:.83rem}
.stats{display:flex; gap:8px; margin:0}
.stat{background:var(--bg); border:1px solid var(--line); border-radius:12px; padding:7px 14px; text-align:center; min-width:74px}
.stat dt{font-size:.66rem; text-transform:uppercase; letter-spacing:.09em; color:var(--faint); font-weight:600}
.stat dd{margin:1px 0 0; font-size:1.22rem; font-weight:700; font-variant-numeric:tabular-nums}

/* Layout */
.layout{display:grid; grid-template-columns:minmax(0,340px) minmax(0,1fr); gap:22px; align-items:start; padding-top:24px; padding-bottom:56px}
.card{background:var(--card); border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow)}
.compose{padding:20px; position:sticky; top:96px}
.compose h2{font-size:1rem; margin-bottom:14px}

/* Fields */
.field{display:flex; flex-direction:column; gap:6px; margin-bottom:14px; min-width:0}
.field.grow{flex:1 1 220px}
label{font-size:.78rem; font-weight:600; color:var(--muted)}
.opt{font-weight:500; color:var(--faint)}
.req{color:var(--accent)}
input,textarea,select{
  font:inherit; font-size:.94rem; color:var(--ink); background:#fff;
  border:1px solid var(--line); border-radius:10px; padding:10px 12px; width:100%;
  transition:border-color .15s, box-shadow .15s;
}
textarea{resize:vertical; min-height:70px}
select{appearance:none; -webkit-appearance:none; padding-right:34px;
  background-image:linear-gradient(45deg,transparent 49%,var(--muted) 50%),linear-gradient(-45deg,transparent 49%,var(--muted) 50%);
  background-size:6px 6px; background-position:calc(100% - 18px) 55%, calc(100% - 13px) 55%; background-repeat:no-repeat}
input:hover,textarea:hover,select:hover{border-color:#c9ccdd}
input:focus,textarea:focus,select:focus{border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-soft); outline:none}
input:focus-visible,textarea:focus-visible,select:focus-visible{outline:none}
.row{display:grid; grid-template-columns:1fr 1fr; gap:12px}
.err{color:var(--danger); font-size:.78rem; font-weight:600}
[aria-invalid="true"]{border-color:var(--danger)}

/* Buttons */
.btn{font:inherit; font-size:.88rem; font-weight:600; cursor:pointer; border-radius:10px;
  border:1px solid var(--line); background:#fff; color:var(--ink); padding:9px 14px;
  transition:background .15s,border-color .15s,color .15s}
.btn:hover{background:#f4f5fa; border-color:#c9ccdd}
.btn.primary{background:var(--accent); border-color:var(--accent); color:#fff}
.btn.primary:hover{background:#443bd4}
.btn.block{width:100%; padding:11px}
.btn.small{padding:6px 11px; font-size:.8rem}
.btn.danger{color:var(--danger)}
.btn.danger:hover{background:#fef3f2; border-color:#f3c6c1}

/* Controls */
.controls{display:flex; flex-wrap:wrap; gap:14px; padding:16px 18px 4px; align-items:flex-end}
.controls .field{margin-bottom:12px}
.controls select{min-width:130px}
.result-line{color:var(--muted); font-size:.8rem; margin:14px 2px 10px}

/* List */
.list{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:10px}
.item{background:var(--card); border:1px solid var(--line); border-radius:var(--radius);
  box-shadow:var(--shadow); padding:14px 16px; display:flex; gap:13px; align-items:flex-start}
.item.done{background:#fcfcfe}
.check{flex:0 0 auto; display:grid; place-items:center; padding-top:1px}
.check input{width:19px; height:19px; accent-color:var(--accent); cursor:pointer; margin:0}
.body{flex:1 1 auto; min-width:0}
.title{font-size:1rem; font-weight:600; margin:0; overflow-wrap:anywhere}
.item.done .title{text-decoration:line-through; color:var(--faint)}
.notes{color:var(--muted); font-size:.88rem; margin-top:5px; white-space:pre-wrap; overflow-wrap:anywhere}
.meta{display:flex; flex-wrap:wrap; gap:8px; margin-top:9px; align-items:center}
.tag{font-size:.7rem; font-weight:700; text-transform:uppercase; letter-spacing:.05em;
  padding:3px 9px; border-radius:999px; border:1px solid transparent}
.tag.high{color:var(--high); background:var(--high-bg); border-color:#fbd7c2}
.tag.medium{color:var(--med); background:var(--med-bg); border-color:#f3e3b3}
.tag.low{color:var(--low); background:var(--low-bg); border-color:#d7e8c0}
.due{font-size:.76rem; color:var(--muted); font-weight:500}
.due.over{color:var(--danger); font-weight:600}
.actions{display:flex; gap:8px; flex:0 0 auto}

/* Edit form */
.editing{display:block}
.edit-grid{display:grid; gap:12px}
.edit-grid .row{margin:0}
.edit-actions{display:flex; gap:8px; flex-wrap:wrap}

/* Empty */
.empty{padding:40px 24px; text-align:center}
.empty h3{font-size:1.02rem}
.empty p{color:var(--muted); font-size:.9rem; margin-top:6px}

@media (max-width:900px){
  .layout{grid-template-columns:minmax(0,1fr); gap:18px; padding-bottom:40px}
  .compose{position:static}
}
@media (max-width:560px){
  .wrap{padding:0 14px}
  .topbar-in{padding-top:14px; padding-bottom:14px}
  .stats{width:100%}
  .stat{flex:1 1 0; min-width:0; padding:6px 8px}
  .tagline{display:none}
  .controls{padding:14px 14px 2px}
  .controls .field{flex:1 1 100%}
  .controls select{min-width:0; width:100%}
  .item{flex-wrap:wrap}
  .actions{width:100%; padding-left:32px}
  .actions .btn{flex:1 1 0}
}