:root{--bg:#050816;--bg-elevated:#0f172a;--bg-elevated-soft:#111827;--accent:#6366f1;--accent-soft:rgba(99,102,241,.12);--accent-strong:#4f46e5;--border-subtle:rgba(148,163,184,.35);--text-main:#e5e7eb;--text-soft:#9ca3af;--danger:#f97373}*,:after,:before{box-sizing:border-box}body,html{margin:0;padding:0;background:radial-gradient(circle at top,#1e293b 0,#020617 55%);color:var(--text-main);font-family:system-ui,-apple-system,BlinkMacSystemFont,SF Pro Text,Segoe UI,sans-serif}body{min-height:100vh}a{color:inherit;text-decoration:none}button{font:inherit}.app-shell{min-height:100vh;display:flex;align-items:stretch;justify-content:center;padding:24px 16px}.card{width:100%;max-width:960px;background:radial-gradient(circle at top left,#1f2937 0,#020617 55%);border-radius:24px;border:1px solid rgba(148,163,184,.5);box-shadow:0 40px 80px rgba(15,23,42,.9),0 0 0 1px rgba(15,23,42,.7);padding:24px;display:flex;flex-direction:column;gap:20px}@media (min-width:768px){.card{padding:30px 32px}}.card-header{display:flex;flex-direction:column;gap:8px}.card-title-row{display:flex;align-items:center;justify-content:space-between;gap:12px}.title{font-size:1.4rem;font-weight:600;letter-spacing:.02em}.badge{font-size:.7rem;text-transform:uppercase;letter-spacing:.08em;padding:3px 10px;border-radius:999px;border:1px solid rgba(148,163,184,.7);background:rgba(15,23,42,.7)}.badge,.subtitle{color:var(--text-soft)}.subtitle{font-size:.9rem}.card-main{display:flex;flex-direction:column;gap:16px}.toolbar{flex-wrap:wrap;justify-content:space-between;gap:12px}.toolbar,.toolbar-left{display:flex;align-items:center}.toolbar-left{gap:10px;font-size:.85rem;color:var(--text-soft)}.status-dot{width:8px;height:8px;border-radius:999px;background:#22c55e;box-shadow:0 0 0 6px rgba(34,197,94,.25)}.filter-pill-group{display:inline-flex;padding:2px;border-radius:999px;background:rgba(15,23,42,.8);border:1px solid rgba(148,163,184,.5)}.filter-pill{position:relative;border-radius:999px;padding:4px 10px;font-size:.78rem;color:var(--text-soft);background:transparent;border:none;cursor:pointer;transition:color .15s ease,background .15s ease}.filter-pill.active{color:#e5e7eb;background:radial-gradient(circle at top,#4f46e5 0,#1d4ed8 75%);box-shadow:0 0 0 1px rgba(191,219,254,.8),0 14px 30px rgba(37,99,235,.7)}.filter-pill:not(.active):hover{background:rgba(30,64,175,.4)}.add-form{display:flex;flex-direction:column;gap:10px;padding:10px 12px;border-radius:14px;border:1px solid rgba(148,163,184,.45);background:radial-gradient(circle at top left,#1e293b 0,#020617 60%)}@media (min-width:640px){.add-form{flex-direction:row;align-items:center}}.add-input{flex:1 1;border-radius:999px;border:1px solid rgba(148,163,184,.6);padding:8px 12px;background:rgba(15,23,42,.9);color:var(--text-main);font-size:.9rem}.add-input::placeholder{color:#6b7280}.add-input:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 1px rgba(129,140,248,.7),0 14px 35px rgba(37,99,235,.8)}.add-button{padding:7px 16px;border-radius:999px;border:none;cursor:pointer;font-size:.85rem;font-weight:500;letter-spacing:.02em;text-transform:uppercase;background:radial-gradient(circle at top,#4f46e5 0,#1d4ed8 65%);color:#e5e7eb;box-shadow:0 0 0 1px rgba(191,219,254,.85),0 16px 40px rgba(30,64,175,.9);white-space:nowrap;display:inline-flex;align-items:center;gap:6px}.add-button:disabled{opacity:.6;cursor:not-allowed;box-shadow:none}.add-button:not(:disabled):hover{transform:translateY(-.5px);box-shadow:0 0 0 1px rgba(219,234,254,.9),0 22px 50px #1e40af}.add-hint{font-size:.75rem;color:#9ca3af}.input-error{margin-top:4px;font-size:.75rem;color:var(--danger)}.list-card{border-radius:18px;border:1px solid rgba(148,163,184,.45);background:radial-gradient(circle at top,#111827 0,#020617 75%);padding:12px 0}.list-header{padding:0 16px 8px;display:flex;justify-content:space-between;align-items:center;gap:10px;font-size:.75rem;color:var(--text-soft)}.list-header span strong{color:var(--text-main)}.list{list-style:none;margin:0;padding:0}.todo-row{display:flex;align-items:center;gap:10px;padding:8px 16px;border-top:1px solid rgba(31,41,55,.9)}.todo-row:first-of-type{border-top:none}.todo-row:hover{background:radial-gradient(circle at left,rgba(37,99,235,.18) 0,transparent 55%)}.todo-checkbox{width:18px;height:18px;border-radius:999px;border:1px solid rgba(148,163,184,.7);background:radial-gradient(circle at top,rgba(15,23,42,.9) 0,#020617 65%);display:inline-flex;align-items:center;justify-content:center;cursor:pointer;transition:border-color .15s ease,background .15s ease,box-shadow .15s ease,transform .12s ease}.todo-checkbox-inner{width:10px;height:10px;border-radius:999px;background:transparent}.todo-checkbox.completed{border-color:rgba(96,165,250,.95);background:radial-gradient(circle at top,#38bdf8 0,#1d4ed8 65%);box-shadow:0 0 0 1px rgba(219,234,254,.85),0 14px 34px rgba(37,99,235,.9);transform:translateY(-1px)}.todo-checkbox.completed .todo-checkbox-inner{background:#e5e7eb}.todo-main{flex:1 1;display:flex;flex-direction:column;gap:2px}.todo-title{font-size:.9rem}.todo-title.completed{text-decoration:line-through;color:#6b7280}.todo-meta{font-size:.7rem;color:#6b7280}.todo-chip{font-size:.7rem;padding:2px 8px;border-radius:999px;border:1px solid rgba(148,163,184,.6);background:rgba(15,23,42,.9)}.todo-chip.completed{border-color:rgba(74,222,128,.85);color:#bbf7d0;background:rgba(22,163,74,.16)}.todo-chip.open{border-color:rgba(248,250,252,.7);color:#e5e7eb;background:rgba(30,64,175,.32)}.empty-state,.error-state,.loading-state{padding:18px 16px 6px;font-size:.9rem;color:#9ca3af}.error-state{color:#fecaca}.retry-button{margin-top:10px;padding:5px 14px;border-radius:999px;border:1px solid rgba(248,250,252,.75);background:rgba(15,23,42,.9);color:#e5e7eb;font-size:.8rem;cursor:pointer}.retry-button:disabled{opacity:.5;cursor:not-allowed}.retry-button:not(:disabled):hover{background:rgba(30,64,175,.9);box-shadow:0 0 0 1px rgba(191,219,254,.9),0 10px 26px rgba(37,99,235,.75)}.loading-bar{margin-top:8px;height:4px;border-radius:999px;background:rgba(30,64,175,.4);overflow:hidden}.loading-bar-inner{width:50%;height:100%;border-radius:inherit;background:linear-gradient(90deg,#38bdf8,#4f46e5,#22c55e);animation:shimmer 1.1s linear infinite}.loading-skeleton-list{list-style:none;margin:10px 0 0;padding:0 4px 0 0}.loading-skeleton-row{display:flex;align-items:center;gap:10px;padding:6px 0}.loading-skeleton-checkbox{width:18px;height:18px;border-radius:999px;background:rgba(30,64,175,.6)}.loading-skeleton-text{flex:1 1;display:flex;flex-direction:column;gap:4px}.loading-skeleton-line{height:8px;border-radius:999px;background:rgba(30,64,175,.6)}.loading-skeleton-line.primary{width:60%}.loading-skeleton-line.secondary{width:40%;opacity:.8}@keyframes shimmer{0%{transform:translateX(-80%)}to{transform:translateX(160%)}}.pagination-row{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:8px 4px 0;font-size:.8rem;color:var(--text-soft)}.pagination-controls{display:flex;align-items:center;gap:6px}.page-button{border-radius:999px;border:1px solid rgba(148,163,184,.7);padding:4px 10px;font-size:.8rem;background:rgba(15,23,42,.9);color:var(--text-main);cursor:pointer;display:inline-flex;align-items:center;gap:4px}.page-button:disabled{opacity:.5;cursor:not-allowed}.page-button:not(:disabled):hover{background:rgba(30,64,175,.6);box-shadow:0 0 0 1px rgba(191,219,254,.9),0 12px 30px rgba(37,99,235,.75)}.page-indicator{font-feature-settings:"tnum" on,"lnum" on}.footnote{margin-top:4px;font-size:.7rem;color:#6b7280;text-align:right}