:root{--space-1:.25rem;--space-2:.5rem;--space-3:.75rem;--space-4:1rem;--space-5:1.5rem;--space-6:2rem;--space-8:3rem;--radius-sm:8px;--radius:12px;--radius-lg:16px;--radius-full:999px;--font-sans:"Inter", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;--bg:#f5f6fb;--bg-grad:radial-gradient(1200px 600px at 100% -10%, #eaebfb 0%, transparent 60%), radial-gradient(900px 500px at -10% 0%, #e8f3ff 0%, transparent 55%);--surface:#fff;--surface-2:#f4f5f9;--surface-hover:#f9fafb;--border:#e6e8ee;--border-strong:#d3d7e0;--text:#14161d;--text-muted:#656b7a;--text-subtle:#8a90a0;--primary:#4f46e5;--primary-hover:#4338ca;--primary-contrast:#fff;--primary-soft:#eef1ff;--primary-ring:#4f46e547;--danger:#dc2626;--danger-hover:#b91c1c;--danger-soft:#fef2f2;--success:#16a34a;--success-soft:#ecfdf3;--warning:#b45309;--warning-soft:#fff7ed;--shadow-sm:0 1px 2px #10121a0f, 0 1px 1px #10121a0a;--shadow-md:0 4px 12px #10121a14, 0 2px 4px #10121a0a;--shadow-lg:0 16px 40px #10121a24;--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light}:root[data-theme=dark]{--bg:#0b0d13;--bg-grad:radial-gradient(1200px 600px at 100% -10%, #1a1d3a 0%, transparent 60%), radial-gradient(900px 500px at -10% 0%, #0f2233 0%, transparent 55%);--surface:#14171f;--surface-2:#1a1e29;--surface-hover:#1d222e;--border:#262b38;--border-strong:#333a4a;--text:#e8eaf0;--text-muted:#9aa1b1;--text-subtle:#6d7486;--primary:#818cf8;--primary-hover:#a5b0ff;--primary-contrast:#0b0d13;--primary-soft:#1e2140;--primary-ring:#818cf859;--danger:#f87171;--danger-hover:#fca5a5;--danger-soft:#2a1618;--success:#4ade80;--success-soft:#12241a;--warning:#fbbf24;--warning-soft:#241c10;--shadow-sm:0 1px 2px #0006;--shadow-md:0 6px 16px #00000073;--shadow-lg:0 20px 48px #0000008c;--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark}*,:before,:after{box-sizing:border-box}html,body{margin:0;padding:0}body{min-height:100vh;font-family:var(--font-sans);color:var(--text);background-color:var(--bg);background-image:var(--bg-grad);-webkit-font-smoothing:antialiased;text-rendering:optimizelegibility;background-attachment:fixed;font-size:15px;line-height:1.55}h1,h2,h3,h4{letter-spacing:-.01em;margin:0;font-weight:700;line-height:1.2}h1{font-size:1.6rem}h2{font-size:1.2rem}h3{font-size:1rem}p{margin:0}a{color:var(--primary);text-decoration:none}a:hover{text-decoration:underline}:focus-visible{outline:2px solid var(--primary);outline-offset:2px;border-radius:var(--radius-sm)}.container{width:100%;max-width:860px;padding:var(--space-5) var(--space-4) var(--space-8);margin:0 auto}.page{gap:var(--space-5);flex-direction:column;display:flex}.stack{gap:var(--space-3);flex-direction:column;display:flex}.stack-lg{gap:var(--space-5);flex-direction:column;display:flex}.row{align-items:center;gap:var(--space-2);display:flex}.row-between{justify-content:space-between;align-items:center;gap:var(--space-3);display:flex}.wrap{flex-wrap:wrap}.grow{flex:1;min-width:0}.muted{color:var(--text-muted)}.subtle{color:var(--text-subtle);font-size:.85rem}.visually-hidden{clip:rect(0, 0, 0, 0);white-space:nowrap;border:0;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}.card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:var(--space-5);box-shadow:var(--shadow-sm)}.card-flush{padding:var(--space-4)}.section-title{align-items:baseline;gap:var(--space-2);margin-bottom:var(--space-1);display:flex}button,.btn{justify-content:center;align-items:center;gap:var(--space-2);font:inherit;cursor:pointer;border:1px solid var(--border-strong);background:var(--surface);color:var(--text);border-radius:var(--radius-sm);padding:.55rem .9rem;font-weight:600;line-height:1;transition:background-color .15s,border-color .15s,box-shadow .15s,transform 50ms;display:inline-flex}button svg,.btn svg{flex:none;width:1.1em;height:1.1em}button:hover,.btn:hover{background:var(--surface-hover);border-color:var(--text-subtle)}button:active,.btn:active{transform:translateY(1px)}button.primary,.btn.primary{background:var(--primary);color:var(--primary-contrast);border-color:var(--primary);box-shadow:0 1px 2px var(--primary-ring)}button.primary:hover,.btn.primary:hover{background:var(--primary-hover);border-color:var(--primary-hover)}button.danger,.btn.danger{color:var(--danger);background:var(--danger-soft);border-color:#0000}button.danger:hover,.btn.danger:hover{background:var(--danger);color:#fff;border-color:var(--danger)}button.ghost,.btn.ghost{color:var(--text-muted);background:0 0;border-color:#0000}button.ghost:hover,.btn.ghost:hover{background:var(--surface-2);color:var(--text)}button:disabled,.btn:disabled{opacity:.5;cursor:not-allowed;transform:none}.btn-sm{padding:.35rem .6rem;font-size:.85rem}.icon-btn{border-radius:var(--radius-sm);width:2.25rem;height:2.25rem;color:var(--text-muted);background:0 0;border-color:#0000;justify-content:center;align-items:center;padding:0;display:inline-flex}.icon-btn:hover{background:var(--surface-2);color:var(--text);border-color:#0000}.icon-btn.danger{background:0 0}.icon-btn.danger:hover{background:var(--danger-soft);color:var(--danger)}.icon-btn svg{width:1.15rem;height:1.15rem}input,select,textarea{font:inherit;color:inherit;background:var(--surface);border:1px solid var(--border-strong);border-radius:var(--radius-sm);width:100%;padding:.55rem .7rem;transition:border-color .15s,box-shadow .15s}input::placeholder,textarea::placeholder{color:var(--text-subtle)}input:focus,select:focus,textarea:focus{border-color:var(--primary);box-shadow:0 0 0 3px var(--primary-ring);outline:none}select{cursor:pointer;appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23656b7a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");background-position:right .6rem center;background-repeat:no-repeat;padding-right:2rem}.field{gap:var(--space-1);flex-direction:column;display:flex}.field-action{line-height:inherit}label{color:var(--text-muted);font-size:.82rem;font-weight:600;display:block}.badge{letter-spacing:.02em;text-transform:capitalize;border-radius:var(--radius-full);background:var(--surface-2);color:var(--text-muted);border:1px solid var(--border);align-items:center;gap:.3rem;padding:.2rem .55rem;font-size:.72rem;font-weight:600;display:inline-flex}.badge.accent{background:var(--primary-soft);color:var(--primary);border-color:#0000}.badge.success{background:var(--success-soft);color:var(--success);border-color:#0000}.app-header{z-index:20;background:color-mix(in srgb, var(--surface) 85%, transparent);-webkit-backdrop-filter:saturate(180%)blur(12px);backdrop-filter:saturate(180%)blur(12px);border-bottom:1px solid var(--border);position:sticky;top:0}.app-header__inner{max-width:860px;padding:var(--space-3) var(--space-4);justify-content:space-between;align-items:center;gap:var(--space-3);margin:0 auto;display:flex}.brand{align-items:center;gap:var(--space-2);letter-spacing:-.02em;color:var(--text);font-weight:700;display:inline-flex}.brand:hover{text-decoration:none}.brand__mark{color:#fff;width:2rem;height:2rem;box-shadow:var(--shadow-sm);background:linear-gradient(135deg,#6366f1,#4f46e5 45%,#7c3aed);border-radius:9px;place-items:center;display:grid}.brand__mark svg{width:1.15rem;height:1.15rem}.brand__name{font-size:1.05rem}.user-chip{align-items:center;gap:var(--space-2);color:var(--text-muted);font-size:.9rem;display:inline-flex}.avatar{border-radius:var(--radius-full);background:var(--primary-soft);width:1.9rem;height:1.9rem;color:var(--primary);place-items:center;font-size:.8rem;font-weight:700;display:grid}.page-header{justify-content:space-between;align-items:flex-start;gap:var(--space-3);display:flex}.page-header h1{margin-bottom:var(--space-1)}.editable-title{cursor:text;border-radius:var(--radius-sm);border:1px solid #0000;margin-left:-.4rem;padding:.1rem .4rem;transition:background-color .12s,border-color .12s}.editable-title:hover{background:var(--surface-2);border-color:var(--border)}.title-input{letter-spacing:-.01em;padding:.15rem .5rem;font-size:1.6rem;font-weight:700}.eyebrow{letter-spacing:.08em;text-transform:uppercase;color:var(--text-subtle);font-size:.78rem;font-weight:700}.list-grid{gap:var(--space-3);grid-template-columns:repeat(auto-fill,minmax(240px,1fr));margin:0;padding:0;list-style:none;display:grid}.list-tile{gap:var(--space-3);padding:var(--space-4);background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow-sm);color:inherit;flex-direction:column;transition:transform .12s,box-shadow .12s,border-color .12s;display:flex}.list-tile:hover{box-shadow:var(--shadow-md);border-color:var(--border-strong);text-decoration:none;transform:translateY(-2px)}.list-tile__name{letter-spacing:-.01em;font-size:1.05rem;font-weight:700}.lists-section__title{letter-spacing:.02em;text-transform:uppercase;color:var(--text-subtle);font-size:.9rem;font-weight:700}.list-tile-wrap{position:relative}.list-tile-wrap .list-tile{padding-right:3rem}.list-tile__pin{top:var(--space-2);right:var(--space-2);z-index:1;width:2rem;height:2rem;color:var(--text-subtle);opacity:.6;transition:opacity .12s,color .12s,background-color .12s;position:absolute}.list-tile-wrap:hover .list-tile__pin,.list-tile__pin:focus-visible{opacity:1}.list-tile__pin:hover{background:var(--surface-2);color:var(--text)}.list-tile__pin.is-pinned{opacity:1;color:var(--primary)}.list-tile__pin.is-pinned svg{fill:color-mix(in srgb, var(--primary) 22%, transparent)}.items{gap:var(--space-2);flex-direction:column;margin:0;padding:0;list-style:none;display:flex}.item{gap:var(--space-3);padding:var(--space-3) var(--space-3) var(--space-3) var(--space-2);background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow-sm);flex-direction:column;display:flex}.item.is-dragging{opacity:0}.drag-overlay{cursor:grabbing;border-color:var(--primary);box-shadow:var(--shadow-lg)}.item.is-done{background:var(--surface-2)}.item__main{align-items:center;gap:var(--space-2);display:flex}.drag-handle{border-radius:var(--radius-sm);width:1.75rem;height:1.75rem;color:var(--text-subtle);cursor:grab;touch-action:none;background:0 0;border:none;flex:none;place-items:center;padding:0;display:grid}.drag-handle:hover{background:var(--surface-2);color:var(--text-muted)}.drag-handle:active{cursor:grabbing}.drag-handle svg{width:1.1rem;height:1.1rem}.item__title{border-radius:var(--radius-sm);background:0 0;border:1px solid #0000;flex:1;min-width:0;padding:.35rem .5rem;font-weight:500}.item__title:hover{border-color:var(--border)}.item__title.is-done{color:var(--text-subtle);text-decoration:line-through}.item__meta{gap:var(--space-3);padding-left:calc(1.75rem + var(--space-2));grid-template-columns:repeat(auto-fit,minmax(150px,1fr));display:grid}.checkbox{appearance:none;border:2px solid var(--border-strong);background:var(--surface);cursor:pointer;border-radius:6px;flex:none;place-items:center;width:1.35rem;height:1.35rem;padding:0;transition:background-color .15s,border-color .15s;display:grid}.checkbox:hover{border-color:var(--primary)}.checkbox:checked{background:var(--primary);border-color:var(--primary)}.checkbox:checked:after{content:"";border:2.5px solid #fff;border-width:0 2.5px 2.5px 0;width:.35rem;height:.65rem;transform:rotate(45deg)translateY(-1px)}.checkbox:focus-visible{outline:2px solid var(--primary);outline-offset:2px}.board{gap:var(--space-4);flex-direction:column;display:flex}.panel{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow-sm)}.panel.is-dragging{opacity:0}.panel__header{justify-content:space-between;align-items:center;gap:var(--space-2);padding:var(--space-2) var(--space-3) var(--space-2) var(--space-4);border-bottom:1px solid var(--border);background:var(--surface-2);border-radius:calc(var(--radius) - 1px) calc(var(--radius) - 1px) 0 0;display:flex}.panel__title{align-items:center;gap:var(--space-2);font-size:1.05rem;font-weight:700;display:inline-flex}.panel__title>button.ghost{font-size:inherit;color:var(--text);padding:.15rem .4rem;font-weight:700}.panel__title-input{width:auto;max-width:220px;padding:.3rem .5rem;font-size:1.05rem;font-weight:700}.panel__count{color:var(--text-subtle);font-size:.8rem;font-weight:600;line-height:1}.panel__actions{align-items:center;gap:var(--space-1);display:inline-flex}.color-dot{border-radius:var(--radius-full);border:2px solid var(--border-strong);width:1rem;height:1rem}.color-picker__panel{gap:var(--space-2);width:max-content;min-width:0;padding:var(--space-3);grid-template-columns:repeat(4,1fr);display:grid}.color-swatch{border-radius:var(--radius-full);border:1px solid var(--border-strong);width:1.6rem;height:1.6rem;padding:0;transition:transform .1s}.color-swatch:hover{transform:scale(1.12)}.color-swatch[aria-pressed=true]{box-shadow:0 0 0 2px var(--surface), 0 0 0 4px var(--text)}.color-swatch--none{background:linear-gradient(to top right, transparent calc(50% - 1px), var(--danger) calc(50% - 1px), var(--danger) calc(50% + 1px), transparent calc(50% + 1px)), var(--surface)}.panel__body{gap:var(--space-2);padding:var(--space-3);flex-direction:column;min-height:60px;transition:background-color .12s;display:flex}.panel__body.is-over{background:var(--primary-soft)}.panel__empty{border:1px dashed var(--border-strong);border-radius:var(--radius-sm);padding:var(--space-3);text-align:center;color:var(--text-subtle);font-size:.85rem}.panel__quick-add{align-items:center;gap:var(--space-2);display:flex}.panel__quick-add input{min-width:0;padding-block:.45rem}.panel__quick-add-trigger{color:var(--text-muted);align-self:flex-start}.add-category{gap:var(--space-2);align-items:center;display:flex}.modal-backdrop{z-index:50;padding:var(--space-4);background:#080a108c;place-items:center;display:grid;position:fixed;inset:0}.modal{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);width:100%;max-width:440px;box-shadow:var(--shadow-lg);padding:var(--space-5);gap:var(--space-4);flex-direction:column;display:flex}.modal__actions{justify-content:flex-end;gap:var(--space-2);display:flex}.check-row{align-items:flex-start;gap:var(--space-2);cursor:pointer;color:var(--text);font-size:.92rem;font-weight:400;display:flex}.check-row input{width:auto;margin-top:.15rem}.check-row .check-row__text{flex-direction:column;gap:.1rem;display:flex}.auth{min-height:100vh;padding:var(--space-4);place-items:center;display:grid}.auth__card{width:100%;max-width:380px}.auth__toggle{top:var(--space-4);right:var(--space-4);position:fixed}.auth__brand{align-items:center;gap:var(--space-3);margin-bottom:var(--space-5);text-align:center;flex-direction:column;display:flex}.auth__brand .brand__mark{border-radius:14px;width:3rem;height:3rem}.auth__brand .brand__mark svg{width:1.7rem;height:1.7rem}.alert{padding:var(--space-3) var(--space-4);border-radius:var(--radius-sm);font-size:.9rem}.alert.error{background:var(--danger-soft);color:var(--danger);border:1px solid color-mix(in srgb, var(--danger) 25%, transparent)}.error{color:var(--danger)}.empty{align-items:center;gap:var(--space-2);text-align:center;padding:var(--space-8) var(--space-4);color:var(--text-muted);border:1px dashed var(--border-strong);border-radius:var(--radius);background:color-mix(in srgb, var(--surface) 60%, transparent);flex-direction:column;display:flex}summary{list-style:none}summary::-webkit-details-marker{display:none}.popover,.notif-trigger{position:relative}.notif-trigger .badge-count{position:absolute;top:-3px;right:-3px}.popover__panel{right:0;top:calc(100% + var(--space-2));background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);width:320px;max-width:min(90vw,320px);box-shadow:var(--shadow-lg);padding:var(--space-2);z-index:30;position:absolute}.notification{padding:var(--space-3);border-radius:var(--radius-sm);flex-direction:column;gap:.15rem;display:flex}.notification:hover{background:var(--surface-2)}.notification.is-unread{background:var(--primary-soft)}.badge-count{border-radius:var(--radius-full);background:var(--danger);color:#fff;place-items:center;min-width:1.1rem;height:1.1rem;padding:0 .3rem;font-size:.7rem;font-weight:700;display:inline-grid}@media (width<=640px){.page-header{flex-direction:column}.item__meta{padding-left:0}}@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}