/* Forslag til design – farver og skrifttyper kan justeres. */
:root{--ink:#1f2937;--paper:#ffffff;--accent:#2453a6;--accent-soft:#e8eefb;--line:#d1d5db}
*{box-sizing:border-box}
body{margin:0;padding:24px 16px 48px;background:#f3f4f6;color:var(--ink);font:16px/1.6 system-ui,sans-serif}
main{max-width:640px;margin:0 auto;background:var(--paper);border-radius:12px;padding:24px;box-shadow:0 1px 4px rgba(0,0,0,.08)}
h1{font-size:1.5rem;margin:0 0 4px}
.intro{margin:0 0 16px;color:#4b5563}
.status{font-weight:600;margin:0 0 8px}
.progress{height:10px;background:var(--accent-soft);border-radius:5px;overflow:hidden;margin-bottom:20px}
.progress-bar{height:100%;width:0;background:var(--accent);transition:width .3s ease}
.tasks{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}
.task{display:flex;gap:12px;align-items:flex-start;border:1px solid var(--line);border-radius:10px;padding:14px;cursor:pointer;transition:background .15s ease}
.task:hover{background:#f9fafb}
.task input{width:1.35em;height:1.35em;margin:2px 0 0;flex:none;accent-color:var(--accent);cursor:pointer}
.task span{display:block}
.task .title{font-weight:600}
.task .desc{color:#4b5563;font-size:.9rem}
.task.done{background:var(--accent-soft);border-color:var(--accent)}
.task.done .title{text-decoration:line-through;color:#374151}
.done-message{margin:20px 0 12px;font-size:1.15rem;font-weight:700;color:#166534;text-align:center}
.reset{display:block;margin:0 auto;padding:8px 18px;border:1px solid var(--line);border-radius:8px;background:#fff;cursor:pointer;font:inherit}
.reset:hover{background:#f3f4f6}
:focus-visible{outline:3px solid #1d4ed8;outline-offset:2px;border-radius:6px}
#confetti{position:fixed;inset:0;width:100vw;height:100vh;pointer-events:none;z-index:10}
@media (max-width:420px){body{padding:12px 8px 32px}main{padding:18px}h1{font-size:1.3rem}}