:root {
  --bg: #0b0c10;
  --panel: #111218;
  --text: #e8e8f0;
  --muted: #a6a8b3;
  --accent: #7c5cff;
  --accent-2: #22c55e;
  --danger: #ef4444;
  --border: #23242c;
  --shadow: 0 10px 30px rgb(0 0 0 / .35);
}
@media (prefers-color-scheme: light) {
  :root {
    --bg: #f6f7fb;
    --panel: #ffffff;
    --text: #0f172a;
    --muted: #475569;
    --accent: #6d28d9;
    --accent-2: #16a34a;
    --danger: #dc2626;
    --border: #e5e7eb;
    --shadow: 0 8px 24px rgb(2 6 23 / .06);
  }
}
body.theme-dark {
  --bg: #0b0c10;
  --panel: #111218;
  --text: #e8e8f0;
  --muted: #a6a8b3;
  --accent: #7c5cff;
  --accent-2: #22c55e;
  --danger: #ef4444;
  --border: #23242c;
  --shadow: 0 10px 30px rgb(0 0 0 / .35);
  color-scheme: dark;
}

* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0; font: 16px/1.45 system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, "Helvetica Neue", Arial, "Noto Sans", "Apple Color Emoji", "Segoe UI Emoji";
  background: radial-gradient(1200px 800px at 10% -10%, rgba(124,92,255,.12), transparent),
              radial-gradient(1000px 800px at 110% 20%, rgba(34,197,94,.12), transparent),
              var(--bg);
  color: var(--text);
}
.wrap {
  max-width: 900px; margin: 16px auto; padding: 0 12px;
}
header {
  display:flex; align-items:center; justify-content:space-between; gap: 12px; margin-bottom: 16px;
  flex-wrap: wrap;
}
h1 { font-size: clamp(1.2rem, 2vw + 0.8rem, 2rem); margin: 0; letter-spacing: .3px; }
.muted { color: var(--muted); }
.panel {
  background: var(--panel); border: 1px solid var(--border); border-radius: 18px; box-shadow: var(--shadow);
}
.toolbar { 
  display:flex; flex-wrap: wrap; gap: 10px; align-items: center; padding: 12px; 
  justify-content: center; /* center on small screens */
}
.toolbar > * { min-height: 44px; }

/* Inputs & Buttons */
.input, select, button {
  background: transparent; border: 1px solid var(--border); color: var(--text);
  border-radius: 12px; padding: 10px 12px; outline: none; 
  transition: border .15s ease, background .15s ease;
  min-height: 44px; /* better tap target */
  font-size: 1rem;
  flex: 1;
}
.input:focus, select:focus { border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in oklab, var(--accent) 35%, transparent); }
button.primary { background: var(--accent); border-color: var(--accent); color: white; cursor: pointer; flex: none; }
button.secondary { background: transparent; border-color: var(--border); cursor: pointer; flex: none; }
button.ghost { border: none; background: transparent; cursor: pointer; color: var(--muted); padding: 6px 10px; border-radius: 10px; flex: none; }
button.ghost:hover { background: color-mix(in oklab, var(--muted) 12%, transparent); color: var(--text); }

.grid {
  display:grid; grid-template-columns: 1fr; gap: 12px; padding: 12px;
}
/*
@media (min-width: 780px) {
  .grid { grid-template-columns: 1.2fr .8fr; }
}
*/

/* MOBILE-FRIENDLY FORM */
.todo-form {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.todo-form .input,
.todo-form select,
.todo-form button {
  width: 100%;
}
@media (min-width: 640px) {
  .todo-form {
    display: grid;
    grid-template-columns: 1fr minmax(110px, 140px) minmax(120px, 160px) auto;
  }
  .todo-form .input,
  .todo-form select,
  .todo-form button {
    width: auto;
  }
}

.chip {
  display:inline-flex; align-items:center; gap:8px; padding: 6px 10px; border-radius: 999px; border: 1px solid var(--border);
  color: var(--muted); font-size: .9rem;
}
.chip .dot { width: 8px; height: 8px; border-radius: 999px; background: var(--muted); }
.chip.low .dot { background: #60a5fa; }
.chip.medium .dot { background: #f59e0b; }
.chip.high .dot { background: #ef4444; }

.list { padding: 0; margin: 0; list-style: none; }
.item { display:flex; align-items:center; gap: 12px; padding: 12px; border-top: 1px solid var(--border); flex-wrap: wrap; }
.item:first-child { border-top: none; }
.item[draggable="true"] { cursor: grab; }
.item.dragging { opacity: .6; }
.item .title { flex: 1; display:flex; align-items: center; gap: 10px; }
.item .title input[type="text"] { width: 100%; background: transparent; border: 1px solid transparent; padding: 6px 8px; border-radius: 8px; }
.item .title input[type="text"]:focus { border-color: var(--accent); box-shadow: 0 0 0 2px color-mix(in oklab, var(--accent) 30%, transparent); }
.item.completed .text { text-decoration: line-through; color: var(--muted); }
.checkbox { inline-size: 20px; block-size: 20px; }

.empty { text-align:center; padding: 28px 16px; color: var(--muted); }

.footer {
  display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap: 8px; padding: 12px;
  border-top: 1px solid var(--border);
}
.filters { display:flex; gap: 6px; flex-wrap: wrap; }
.filters button[aria-pressed="true"] { background: color-mix(in oklab, var(--accent) 18%, transparent); border-color: var(--accent); color: var(--text); }

.kbd { font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace; border: 1px solid var(--border); padding: 1px 6px; border-radius: 6px; color: var(--muted); }

.row { display:flex; gap: 8px; align-items:center; flex-wrap: wrap; }
.grow { flex: 1; }
.right { margin-left: auto; }

.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; }