:root{--ink:#0b1120;--text:#111827;--muted:#64748b;--border:#e6e9f2;--field-border:#e2e8f0;--surface:#fff;--surface-hover:#f8fafc;--page-bg:#f4f6fb;--ring:#0f172a2e;--page-pad:16px;--card-pad:20px;--card-radius:16px;--title-size:28px;--title-gap:20px;--control-h:48px;--row-pad-y:12px;--row-pad-x:12px;--row-gap:10px;--body-size:16px;--tap:44px;--r-control:12px;--r-row:14px;--r-box:8px;--font:"Inter",ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif}@media (min-width:480px){:root{--page-pad:32px;--card-pad:32px;--card-radius:20px;--title-size:34px;--title-gap:24px;--control-h:52px;--row-pad-y:14px;--row-pad-x:16px;--row-gap:12px;--body-size:17px}}@media (min-width:768px){:root{--page-pad:64px;--card-pad:40px;--title-size:40px;--title-gap:28px;--control-h:56px;--row-pad-y:16px;--row-pad-x:18px;--body-size:18px}}@media (pointer:fine){:root{--tap:36px}}*,*:before,*:after{box-sizing:border-box}html{-webkit-text-size-adjust:100%}body{background:var(--page-bg);color:var(--text);font-family:var(--font);-webkit-font-smoothing:antialiased;min-height:100dvh;margin:0;font-size:16px;line-height:1.5}button,input{font:inherit;color:inherit}button{touch-action:manipulation;-webkit-tap-highlight-color:transparent}.sr-only{position:absolute;overflow:hidden;clip-path:inset(50%);white-space:nowrap;width:1px;height:1px;margin:-1px;padding:0}svg{fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;width:100%;height:100%}.page{display:flex;padding:var(--page-pad);padding-top:max(var(--page-pad),env(safe-area-inset-top));padding-left:max(var(--page-pad),env(safe-area-inset-left));padding-right:max(var(--page-pad),env(safe-area-inset-right));padding-bottom:max(var(--page-pad),env(safe-area-inset-bottom));justify-content:center}.card{padding:var(--card-pad);background:var(--surface);border:1px solid var(--border);border-radius:var(--card-radius);width:100%;max-width:720px;box-shadow:0 1px 2px #0f172a0a,0 12px 32px -12px #0f172a1f}.card__title{margin:0 0 var(--title-gap);font-size:var(--title-size);letter-spacing:-.03em;color:var(--ink);font-weight:800}.composer{display:flex;gap:var(--row-gap);align-items:stretch}.composer__input{height:var(--control-h);background:var(--surface);border:1px solid var(--field-border);border-radius:var(--r-control);font-size:max(16px,var(--body-size));flex:auto;min-width:0;padding:0 16px;transition:border-color .15s,box-shadow .15s}.composer__input::placeholder{color:var(--muted);font-weight:500}.composer__input:focus-visible{outline:none;border-color:var(--ink);box-shadow:0 0 0 3px var(--ring)}.todo__edit:focus-visible{outline:none;border-color:var(--ink);box-shadow:0 0 0 3px var(--ring)}.composer__add{display:grid;width:var(--control-h);height:var(--control-h);background:var(--ink);color:#fff;border-radius:var(--r-control);cursor:pointer;border:0;flex:none;place-items: center;padding:0;transition:background-color .15s,transform .1s}.composer__add svg{width:22px;height:22px}.composer__add:active{transform:scale(.96)}.empty{text-align:center;color:var(--muted);font-size:var(--body-size);margin:32px 0 8px;font-weight:500}.empty[hidden]{display:none}.todos{display:flex;gap:var(--row-gap);list-style:none;flex-direction:column;margin:20px 0 0;padding:0}.todos[hidden]{display:none}.todo{display:flex;align-items: center;gap:var(--row-gap);padding:var(--row-pad-y)var(--row-pad-x);background:var(--surface);border:1px solid var(--border);border-radius:var(--r-row);transition:background-color .15s,border-color .15s,box-shadow .15s}.todo__drag{height:var(--tap);margin-left:calc(var(--row-pad-x)/-2);cursor:grab;touch-action:none;flex:none;width:26px}.todo__drag svg{width:18px;height:18px}.todo:has(.todo__checkbox:checked) .todo__drag{visibility:hidden}.todo--dragging{position:relative;z-index:1;border-color:var(--ink);background:var(--surface);will-change:transform;box-shadow:0 12px 28px -10px #0f172a66}.todo--dragging .todo__drag{cursor:grabbing}.todos:has(.todo--dragging){user-select:none}.todo__check{display:grid;width:var(--tap);height:var(--tap);margin-left:calc(var(--tap)/-4);cursor:pointer;-webkit-tap-highlight-color:transparent;flex:none;place-items: center}.todo__checkbox{position:absolute;opacity:0;width:0;height:0}.todo__box{display:grid;border-radius:var(--r-box);color:#0000;border:2px solid #cbd5e1;place-items: center;width:26px;height:26px;transition:background-color .15s,border-color .15s,color .15s}.todo__box svg{stroke-width:3;width:16px;height:16px}.todo__checkbox:checked+.todo__box{background:var(--ink);border-color:var(--ink);color:#fff}.todo__checkbox:focus-visible+.todo__box{outline:none;box-shadow:0 0 0 3px var(--ring)}.todo__title{font-size:var(--body-size);overflow-wrap:anywhere;flex:auto;min-width:0;transition:color .15s}.todo:has(.todo__checkbox:checked) .todo__title{color:var(--muted);text-decoration:line-through;text-decoration-thickness:2px}.todo__edit{height:var(--tap);background:var(--surface);border:1px solid var(--field-border);font-size:max(16px,var(--body-size));border-radius:10px;flex:auto;min-width:0;padding:0 12px}.todo__edit[hidden]{display:none}.todo__actions{display:flex;margin-left:auto;margin-right:calc(var(--tap)/-4);flex:none;gap:2px}.icon-btn{display:grid;width:var(--tap);height:var(--tap);color:var(--muted);cursor:pointer;background:0 0;border:0;border-radius:9px;place-items: center;padding:0;transition:color .15s,background-color .15s}.icon-btn svg{width:20px;height:20px}.icon-btn:active{background:#eef2f7}.icon-btn:focus-visible{outline:none;box-shadow:0 0 0 3px var(--ring)}@media (hover:hover) and (pointer:fine){.composer__add:hover{background:#1c2740}.todo:hover{background:var(--surface-hover)}.todo__check:hover .todo__box{border-color:var(--muted)}.icon-btn:hover{color:var(--ink);background:#eef2f7}.icon-btn[data-action=delete]:hover{color:#dc2626}}@media (prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}