:root { --bg:#f6f7fb; --fg:#1f2937; --muted:#6b7280; --accent:#4f46e5; --card:#fff; --line:#e5e7eb; --radius:16px;
  --todo:#6b7280; --doing:#d97706; --done:#16a34a; }
@media (prefers-color-scheme: dark) {
  :root { --bg:#0f172a; --fg:#f1f5f9; --muted:#94a3b8; --accent:#818cf8; --card:#1e293b; --line:#334155; }
}
* { box-sizing: border-box; }
body { margin:0; font-family:system-ui,-apple-system,"Segoe UI",sans-serif; background:var(--bg); color:var(--fg); line-height:1.6; }
header { display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:.5rem; padding:1rem 1.5rem; border-bottom:1px solid var(--line); background:var(--card); }
.brand { font-weight:800; font-size:1.25rem; color:var(--accent); text-decoration:none; }
nav a { margin-left:1.1rem; color:var(--fg); text-decoration:none; font-weight:500; }
nav a:hover { color:var(--accent); }
main { max-width:960px; margin:0 auto; padding:2rem 1.25rem; }
h1 { margin:.2rem 0; }
.intro p { color:var(--muted); margin-top:0; }
.btn { display:inline-block; background:var(--accent); color:#fff; padding:.7rem 1.4rem; border:0; border-radius:10px; font-size:1rem; cursor:pointer; text-decoration:none; }
footer { text-align:center; padding:2rem; color:var(--muted); font-size:.9rem; }
ul { padding-left:1.2rem; } li { margin-bottom:.5rem; }

.todo-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(270px,1fr)); gap:1rem; }
.app-card { background:var(--card); border:1px solid var(--line); border-radius:var(--radius); padding:1.2rem 1.3rem; display:flex; flex-direction:column; transition:transform .15s, box-shadow .15s; }
.app-card:hover { transform:translateY(-3px); box-shadow:0 10px 24px rgba(0,0,0,.12); }
.app-card h3 { margin:0 0 .3rem; font-size:1.25rem; }
.app-desc { margin:0 0 1rem; color:var(--muted); font-size:.95rem; flex:1; }
.bar { height:8px; border-radius:99px; background:var(--line); overflow:hidden; }
.bar span { display:block; height:100%; background:linear-gradient(90deg,var(--accent),#22c55e); border-radius:99px; }
.progress { margin:.35rem 0 .9rem; font-size:.85rem; color:var(--muted); }
.card-actions { display:flex; gap:.5rem; }
.btn.secondary { background:transparent; color:var(--accent); border:1px solid var(--accent); }
.checks { list-style:none; padding:0; margin:.3rem 0 .6rem; }
.checks label { display:flex; gap:.6rem; align-items:flex-start; cursor:pointer; }
.checks input { margin-top:.35rem; accent-color:var(--accent); }
.is-done { text-decoration:line-through; color:var(--muted); }
dialog h3 { margin:1rem 0 .3rem; font-size:1rem; }
dialog details summary { cursor:pointer; color:var(--accent); font-weight:600; }

dialog { border:0; border-radius:20px; padding:1.5rem; width:min(92vw,480px); background:var(--card); color:var(--fg); box-shadow:0 20px 60px rgba(0,0,0,.35); }
dialog::backdrop { background:rgba(0,0,0,.5); }
dialog h2 { margin-top:0; padding-right:2rem; }
.close { position:absolute; top:.6rem; right:.8rem; border:0; background:none; font-size:1.8rem; color:var(--muted); cursor:pointer; }

.prompt-box { background:linear-gradient(135deg,rgba(79,70,229,.1),rgba(34,197,94,.1)); border:1px dashed var(--accent); border-radius:var(--radius); padding:1.1rem 1.3rem; margin:1.2rem 0; }
.prompt-box h2 { margin:0 0 .3rem; font-size:1.15rem; }
.prompt-box p { margin:.2rem 0 .6rem; color:var(--muted); }
.prompt-text { background:var(--card); border:1px solid var(--line); border-radius:10px; padding:.7rem .9rem; font-family:ui-monospace,Menlo,Consolas,monospace; font-size:.88rem; margin-bottom:.7rem; }
.btn.small { padding:.45rem 1rem; font-size:.9rem; }
.prompt-box details { margin-top:.8rem; }
.prompt-box summary { cursor:pointer; font-weight:600; color:var(--accent); }
.examples { margin:.6rem 0 0; font-size:.92rem; }
#d-link { margin-top:.8rem; }