:root{--card-w: 400px;--paper:#ffffff;--line:#e7ecef;--text:#2f3a44}*{box-sizing:border-box}html,body{height:100%}body{margin:0;font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;background:#dfe6ea}.page{min-height:100%;display:grid;place-items:center;padding:24px}.paperStack{width:var(--card-w);position:relative;filter:drop-shadow(0 10px 14px rgba(0,0,0,.18))}.paperStack:before,.paperStack:after{content:"";position:absolute;inset:0;background:var(--paper);border-radius:3px;border:1px solid rgba(0,0,0,.08);z-index:-2}.paperStack:before{transform:translate(6px,10px);opacity:.85}.paperStack:after{transform:translate(12px,20px);opacity:.65;z-index:-3}.paper{background:var(--paper);border-radius:3px;border:1px solid rgba(0,0,0,.1);overflow:hidden;height:min(640px,80vh);display:flex;flex-direction:column}.todoHeader{position:relative;height:70px;display:flex;align-items:center;justify-content:center;background:#ffffff24;backdrop-filter:blur(14px) saturate(180%);-webkit-backdrop-filter:blur(14px) saturate(180%);border-bottom:1px solid rgba(255,255,255,.28);box-shadow:inset 0 1px #ffffff8c,inset 0 -1px #0000001a;overflow:hidden}.todoHeader:before{content:"";position:absolute;inset:-40%;background:radial-gradient(120px 90px at 20% 35%,#ffffffb3,#fff0 60%),radial-gradient(180px 120px at 70% 20%,#8cbeff73,#8cbeff00 62%),radial-gradient(220px 160px at 55% 90%,#78ffd238,#78ffd200 65%),linear-gradient(180deg,#ffffff2e,#ffffff0f);transform:rotate(-8deg);pointer-events:none}.todoHeader:after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,#fff6,#ffffff1a 32%,#fff0 60%);opacity:.55;pointer-events:none}.todoHeader:before{animation:liquidShift 6s ease-in-out infinite}@keyframes liquidShift{0%{transform:rotate(-8deg) translate3d(-6px,-2px,0);opacity:.9}50%{transform:rotate(-6deg) translate3d(8px,2px,0);opacity:1}to{transform:rotate(-8deg) translate3d(-6px,-2px,0);opacity:.9}}.todoHeader__right{grid-column:3;justify-self:end;position:absolute;z-index:2;right:-10px}.todoBody{position:relative;flex:1;overflow-y:auto;overflow-x:hidden;scrollbar-gutter:stable}.todoBody::-webkit-scrollbar{width:10px}.todoBody::-webkit-scrollbar-thumb{background:#00000026;border-radius:999px;border:3px solid rgba(255,255,255,.7)}.todoBody:before{content:"";position:absolute;top:0;bottom:0;left:56px;width:2px;background:#d256568c}.todoList{list-style:none;padding:0;margin:0}.todoItem{display:grid;grid-template-columns:56px 1fr 64px;align-items:center;min-height:64px;border-bottom:1px solid var(--line)}.todoItem__left{height:100%;display:flex;align-items:center;justify-content:center;background:#f4f7f9}.check{width:30px;height:30px;border-radius:4px;border:1px solid rgba(0,0,0,.18);background:linear-gradient(#f6f8fa,#dfe6ea);color:transparent;font-size:18px;font-weight:900;line-height:30px;text-align:center;cursor:pointer;box-shadow:inset 0 1px #fffc}.check--done{background:linear-gradient(#cfe9c9,#9fd08f);color:#00000073}.todoItem__content{padding:0 16px;display:flex;justify-content:center}.todoItem__text{font-size:18px;font-weight:700;letter-spacing:.5px;color:var(--text)}.todoItem.isDone .todoItem__text{color:#505c6859;text-decoration:line-through;text-decoration-thickness:2px}.todoItem__remove{border:none;background:transparent;color:#00000026;font-size:22px;cursor:pointer;height:100%}.todoItem__remove:hover{color:#00000059}.todoInputWrap{padding:14px 16px;border-top:1px solid var(--line);background:#f7fafc}.todoInput{width:100%;border:1px solid rgba(0,0,0,.18);background:#fff;border-radius:3px;padding:12px;font-size:18px;font-style:italic;outline:none;box-shadow:inset 0 1px 3px #00000014}.todoInput::placeholder{color:#00000059}.todoInputRow{display:flex;gap:10px;align-items:center}.todoAddBtn{height:46px;padding:0 14px;border-radius:4px;border:1px solid rgba(0,0,0,.18);background:linear-gradient(#f6f8fa,#dfe6ea);font-weight:700;cursor:pointer;box-shadow:inset 0 1px #fffc}.todoAddBtn:hover{filter:brightness(.98)}.todoAddBtn:active{transform:translateY(1px)}.todoItem__actions{display:flex;align-items:center;justify-content:center;gap:6px;height:100%}.todoIconBtn{width:26px;height:26px;border:none;background:transparent;color:#00000038;font-size:18px;cursor:pointer;border-radius:4px}.todoIconBtn:hover{background:#0000000d;color:#0006}.todoTextBtn{width:100%;border:none;background:transparent;padding:0;cursor:text;display:flex;justify-content:center}.todoEditInput{width:100%;border:1px solid rgba(0,0,0,.18);border-radius:4px;padding:10px 12px;font-size:18px;font-weight:700;letter-spacing:.5px;outline:none;box-shadow:inset 0 1px 3px #00000014;background:#fff}.todoEditWrap{width:100%;display:flex;flex-direction:column;gap:6px;position:relative}.todoEditInput.hasError{border-color:#d25656bf}.todoEditError{position:absolute;font-size:12px;font-weight:600;color:#d25656f2;bottom:-5px;background:#fff}.todoItem.isEditing .todoItem__content{padding:0 10px;justify-content:stretch}.spinner{position:relative;min-width:var(--spinner-size, 28px);min-height:var(--spinner-size, 28px);background:#54545433}.spinner:after{--spinner-radius: calc((var(--spinner-size, 28px) - var(--spinner-dot, 4px)) / 2);content:"";position:absolute;top:50%;left:50%;width:var(--spinner-dot, 4px);height:var(--spinner-dot, 4px);border-radius:50%;background:transparent;transform:translate(-50%,-50%);pointer-events:none;box-shadow:0 calc(var(--spinner-radius) * -1) 0 1.5px #2f3a44f2,calc(var(--spinner-radius) * .7071) calc(var(--spinner-radius) * -.7071) 0 -.75px #2f3a4440,var(--spinner-radius) 0 0 -.75px #2f3a4440,calc(var(--spinner-radius) * .7071) calc(var(--spinner-radius) * .7071) 0 -.75px #2f3a4440,0 var(--spinner-radius) 0 -.75px #2f3a4440,calc(var(--spinner-radius) * -.7071) calc(var(--spinner-radius) * .7071) 0 -.75px #2f3a4440,calc(var(--spinner-radius) * -1) 0 0 0 #2f3a4480,calc(var(--spinner-radius) * -.7071) calc(var(--spinner-radius) * -.7071) 0 .75px #2f3a44b3;animation:spinner-pulse 1s linear infinite}@keyframes spinner-pulse{0%,to{box-shadow:0 calc(var(--spinner-radius) * -1) 0 1.5px #2f3a44f2,calc(var(--spinner-radius) * .7071) calc(var(--spinner-radius) * -.7071) 0 -.75px #2f3a4440,var(--spinner-radius) 0 0 -.75px #2f3a4440,calc(var(--spinner-radius) * .7071) calc(var(--spinner-radius) * .7071) 0 -.75px #2f3a4440,0 var(--spinner-radius) 0 -.75px #2f3a4440,calc(var(--spinner-radius) * -.7071) calc(var(--spinner-radius) * .7071) 0 -.75px #2f3a4440,calc(var(--spinner-radius) * -1) 0 0 0 #2f3a4480,calc(var(--spinner-radius) * -.7071) calc(var(--spinner-radius) * -.7071) 0 .75px #2f3a44b3}12.5%{box-shadow:0 calc(var(--spinner-radius) * -1) 0 .75px #2f3a44b3,calc(var(--spinner-radius) * .7071) calc(var(--spinner-radius) * -.7071) 0 1.5px #2f3a44f2,var(--spinner-radius) 0 0 -.75px #2f3a4440,calc(var(--spinner-radius) * .7071) calc(var(--spinner-radius) * .7071) 0 -.75px #2f3a4440,0 var(--spinner-radius) 0 -.75px #2f3a4440,calc(var(--spinner-radius) * -.7071) calc(var(--spinner-radius) * .7071) 0 -.75px #2f3a4440,calc(var(--spinner-radius) * -1) 0 0 -.75px #2f3a4440,calc(var(--spinner-radius) * -.7071) calc(var(--spinner-radius) * -.7071) 0 0 #2f3a4480}25%{box-shadow:0 calc(var(--spinner-radius) * -1) 0 0 #2f3a4480,calc(var(--spinner-radius) * .7071) calc(var(--spinner-radius) * -.7071) 0 .75px #2f3a44b3,var(--spinner-radius) 0 0 1.5px #2f3a44f2,calc(var(--spinner-radius) * .7071) calc(var(--spinner-radius) * .7071) 0 -.75px #2f3a4440,0 var(--spinner-radius) 0 -.75px #2f3a4440,calc(var(--spinner-radius) * -.7071) calc(var(--spinner-radius) * .7071) 0 -.75px #2f3a4440,calc(var(--spinner-radius) * -1) 0 0 -.75px #2f3a4440,calc(var(--spinner-radius) * -.7071) calc(var(--spinner-radius) * -.7071) 0 -.75px #2f3a4440}37.5%{box-shadow:0 calc(var(--spinner-radius) * -1) 0 -.75px #2f3a4440,calc(var(--spinner-radius) * .7071) calc(var(--spinner-radius) * -.7071) 0 0 #2f3a4480,var(--spinner-radius) 0 0 .75px #2f3a44b3,calc(var(--spinner-radius) * .7071) calc(var(--spinner-radius) * .7071) 0 1.5px #2f3a44f2,0 var(--spinner-radius) 0 -.75px #2f3a4440,calc(var(--spinner-radius) * -.7071) calc(var(--spinner-radius) * .7071) 0 -.75px #2f3a4440,calc(var(--spinner-radius) * -1) 0 0 -.75px #2f3a4440,calc(var(--spinner-radius) * -.7071) calc(var(--spinner-radius) * -.7071) 0 -.75px #2f3a4440}50%{box-shadow:0 calc(var(--spinner-radius) * -1) 0 -.75px #2f3a4440,calc(var(--spinner-radius) * .7071) calc(var(--spinner-radius) * -.7071) 0 -.75px #2f3a4440,var(--spinner-radius) 0 0 0 #2f3a4480,calc(var(--spinner-radius) * .7071) calc(var(--spinner-radius) * .7071) 0 .75px #2f3a44b3,0 var(--spinner-radius) 0 1.5px #2f3a44f2,calc(var(--spinner-radius) * -.7071) calc(var(--spinner-radius) * .7071) 0 -.75px #2f3a4440,calc(var(--spinner-radius) * -1) 0 0 -.75px #2f3a4440,calc(var(--spinner-radius) * -.7071) calc(var(--spinner-radius) * -.7071) 0 -.75px #2f3a4440}62.5%{box-shadow:0 calc(var(--spinner-radius) * -1) 0 -.75px #2f3a4440,calc(var(--spinner-radius) * .7071) calc(var(--spinner-radius) * -.7071) 0 -.75px #2f3a4440,var(--spinner-radius) 0 0 -.75px #2f3a4440,calc(var(--spinner-radius) * .7071) calc(var(--spinner-radius) * .7071) 0 0 #2f3a4480,0 var(--spinner-radius) 0 .75px #2f3a44b3,calc(var(--spinner-radius) * -.7071) calc(var(--spinner-radius) * .7071) 0 1.5px #2f3a44f2,calc(var(--spinner-radius) * -1) 0 0 -.75px #2f3a4440,calc(var(--spinner-radius) * -.7071) calc(var(--spinner-radius) * -.7071) 0 -.75px #2f3a4440}75%{box-shadow:0 calc(var(--spinner-radius) * -1) 0 -.75px #2f3a4440,calc(var(--spinner-radius) * .7071) calc(var(--spinner-radius) * -.7071) 0 -.75px #2f3a4440,var(--spinner-radius) 0 0 -.75px #2f3a4440,calc(var(--spinner-radius) * .7071) calc(var(--spinner-radius) * .7071) 0 -.75px #2f3a4440,0 var(--spinner-radius) 0 0 #2f3a4480,calc(var(--spinner-radius) * -.7071) calc(var(--spinner-radius) * .7071) 0 .75px #2f3a44b3,calc(var(--spinner-radius) * -1) 0 0 1.5px #2f3a44f2,calc(var(--spinner-radius) * -.7071) calc(var(--spinner-radius) * -.7071) 0 -.75px #2f3a4440}87.5%{box-shadow:0 calc(var(--spinner-radius) * -1) 0 -.75px #2f3a4440,calc(var(--spinner-radius) * .7071) calc(var(--spinner-radius) * -.7071) 0 -.75px #2f3a4440,var(--spinner-radius) 0 0 -.75px #2f3a4440,calc(var(--spinner-radius) * .7071) calc(var(--spinner-radius) * .7071) 0 -.75px #2f3a4440,0 var(--spinner-radius) 0 -.75px #2f3a4440,calc(var(--spinner-radius) * -.7071) calc(var(--spinner-radius) * .7071) 0 0 #2f3a4480,calc(var(--spinner-radius) * -1) 0 0 .75px #2f3a44b3,calc(var(--spinner-radius) * -.7071) calc(var(--spinner-radius) * -.7071) 0 1.5px #2f3a44f2}}.todoFilters{display:flex;gap:10px;margin-top:10px}.todoFilterBtn{flex:1;height:40px;border-radius:6px;border:1px solid rgba(0,0,0,.16);background:#ffffffb3;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);cursor:pointer;font-weight:700;color:#0000008c;box-shadow:inset 0 1px #ffffffb3}.todoFilterBtn:hover{filter:brightness(.99)}.todoFilterBtn.isActive{background:linear-gradient(#d7f0ff,#c1dcff);color:#000000a6;border-color:#0000002e}.langSwitch{--gap: 10px;--pad: 6px;--h: 38px;position:relative;display:grid;grid-template-columns:1fr 1fr;gap:var(--gap);transform:scale(.8);padding:var(--pad);height:var(--h);width:140px;border-radius:999px;border:1px solid rgba(255,255,255,.35);background:#ffffff29;backdrop-filter:blur(10px) saturate(170%);-webkit-backdrop-filter:blur(10px) saturate(170%);box-shadow:inset 0 1px #ffffff8c,0 10px 18px #0000001a;overflow:hidden}.langBlob{position:absolute;top:var(--pad);bottom:var(--pad);width:calc((100% - (var(--pad) * 2) - var(--gap)) / 2);left:calc(var(--pad) + (var(--pos) * ((100% - (var(--pad) * 2) - var(--gap)) / 2 + var(--gap))));border-radius:999px;background:#ffffff61;box-shadow:inset 0 1px #ffffffb3,inset 0 -1px #0000001a,0 8px 16px #0000001a;transition:left .32s cubic-bezier(.2,.9,.2,1);animation:blobSquash .42s cubic-bezier(.2,.9,.2,1)}.langBtn{position:relative;z-index:2;border:none;background:transparent;border-radius:999px;height:calc(var(--h) - (var(--pad) * 2));font-weight:900;letter-spacing:.2px;color:#23282d99;cursor:pointer;transform:scale(.96);transition:transform .22s cubic-bezier(.2,.9,.2,1),color .22s cubic-bezier(.2,.9,.2,1)}.langBtn.isActive{color:#23282deb;transform:scale(1.06)}.langBtn:active{transform:scale(1.02)}@keyframes blobSquash{0%{transform:scaleX(1) scaleY(1)}30%{transform:scaleX(1.12) scaleY(.92)}65%{transform:scaleX(.96) scaleY(1.06)}to{transform:scaleX(1) scaleY(1)}}