*{box-sizing:border-box}body{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;color:#1f2937;background:linear-gradient(135deg,#dbeafe 0%,#ede9fe 40%,#dcfce7 100%);justify-content:center;align-items:center;min-height:100vh;margin:0;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif;display:flex}button,input{font:inherit}#root{width:100%}.app{-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);background:#ffffffc7;border-radius:28px;width:min(92vw,640px);margin:48px auto;padding:32px 28px 28px;box-shadow:0 22px 60px #4c1d9526}.todo-toolbar{align-items:center;gap:12px;margin-top:18px;display:flex}@media (width<=480px){.app{border-radius:20px;margin:20px auto;padding:24px 18px 20px}.todo-toolbar{gap:10px}}.create-todo-button{color:#fff;cursor:pointer;background:linear-gradient(135deg,#7c3aed,#22c55e);border:none;border-radius:50%;flex-shrink:0;width:48px;height:48px;font-size:1.8rem;font-weight:300;transition:transform .2s,box-shadow .2s,filter .2s;box-shadow:0 16px 26px #7c3aed3d}.create-todo-button:hover{transform:translateY(-2px)scale(1.02);box-shadow:0 25px 45px #7c3aed59}.create-todo-button--highlight{background:linear-gradient(135deg,#8b5cf6,#10b981);animation:1.3s ease-in-out infinite addTodoPulse;box-shadow:0 0 0 6px #8b5cf624,0 18px 28px #10b9814d}.create-todo-button--highlight:hover{filter:brightness(1.06)}@keyframes addTodoPulse{0%,to{transform:scale(1);box-shadow:0 0 #10b98159,0 18px 28px #10b98147}50%{transform:scale(1.08);box-shadow:0 0 0 8px #10b9811f,0 22px 30px #10b98161}}@media (width<=480px){.create-todo-button{width:46px;height:46px;font-size:1.65rem}}.todo-counter{text-align:center;margin-bottom:20px}.todo-counter__label{color:#7c3aed;text-transform:uppercase;letter-spacing:.12em;margin:0 0 10px;font-size:.72rem;font-weight:700;animation:.4s ease-out label-fade-in}.todo-counter h1{color:#1f2937;margin:0;font-size:clamp(1.8rem,3vw,2.6rem);line-height:1.2;animation:.5s ease-out title-fade-in}@keyframes label-fade-in{0%{opacity:0}to{opacity:1}}@keyframes title-fade-in{0%{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:translateY(0)}}.todo-item{background:#fff;border:1px solid #edf2f7;border-radius:16px;justify-content:space-between;align-items:center;gap:12px;padding:14px 16px;animation:.4s ease-out backwards item-enter;display:flex;box-shadow:0 8px 18px #0f172a0a}.todo-item:first-child{animation-delay:50ms}.todo-item:nth-child(2){animation-delay:.1s}.todo-item:nth-child(3){animation-delay:.15s}.todo-item:nth-child(4){animation-delay:.2s}.todo-item:nth-child(n+5){animation-delay:.25s}.todo-item__content{flex:1;align-items:center;gap:12px;min-width:0;display:flex}.todo-item__checkbox{appearance:none;color:#fff;cursor:pointer;background:#fff;border:2px solid #cbd5e1;border-radius:50%;flex-shrink:0;justify-content:center;align-items:center;width:22px;min-width:22px;height:22px;margin:0;font-size:.8rem;font-weight:700;transition:all .3s;display:inline-flex;position:relative}.todo-item__checkbox:checked:after{content:"✓";color:#fff;justify-content:center;align-items:center;font-size:.8rem;font-weight:700;display:flex;position:absolute;inset:0}.todo-item__checkbox--done{background:linear-gradient(135deg,#22c55e,#16a34a);border-color:#16a34a}.todo-item__text{color:#1f2937;word-break:break-word;margin:0;font-size:1rem;line-height:1.5;transition:all .3s}.todo-item__text--completed{color:#94a3b8;text-decoration:line-through}.todo-item__delete{color:#ef4444;cursor:pointer;background:0 0;border:none;padding:0 4px;font-size:1.6rem;line-height:1;transition:transform .2s,opacity .2s}.todo-item__delete:hover{opacity:.9;transform:scale(1.1)}@keyframes item-enter{0%{opacity:0;transform:translate(-16px)}to{opacity:1;transform:translate(0)}}@media (width<=480px){.todo-item{padding:12px 14px}.todo-item__text{font-size:.94rem}}.todo-list{flex-direction:column;gap:12px;margin:22px 0 0;padding:0;list-style:none;display:flex}.todo-search{color:#111827;background:#f8fafc;border:1px solid #e5e7eb;border-radius:16px;outline:none;flex:1;width:100%;padding:16px 18px;font-size:1rem;transition:border-color .2s,box-shadow .2s}.todo-search:focus{border-color:#8b5cf6;box-shadow:0 0 0 4px #8b5cf61f}.todo-info,.todo-error{text-align:center;border-radius:16px;padding:18px 16px;font-size:.96rem;list-style:none;animation:.35s ease-out feedback-in;display:block}.todo-info{color:#5b6473;background:#8b5cf60f;border:1px dashed #8b5cf640}.todo-error{color:#991b1b;background:#ef444414;border:1px dashed #ef444459;font-weight:600}.todo-info small,.todo-error small{opacity:.84;margin-top:6px;font-size:.8rem;display:block}@keyframes feedback-in{0%{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:translateY(0)}}.todo-loading{background:#94a3b814;border:1px solid #94a3b824;border-radius:18px;align-items:center;gap:14px;width:100%;padding:18px 16px;display:flex}.todo-loading__spinner{border:3px solid #6366f12e;border-top-color:#6366f1;border-radius:50%;flex-shrink:0;width:22px;height:22px;animation:.9s linear infinite spin}.todo-loading__content{flex:1}.todo-loading__label{color:#4338ca;margin:0 0 8px;font-size:.95rem;font-weight:600}.todo-loading__skeletons{flex-direction:column;gap:8px;display:flex}.todo-loading__skeletons span{background:linear-gradient(90deg,#94a3b82e 0%,#94a3b859 50%,#94a3b82e 100%) 0 0/200% 100%;border-radius:999px;height:12px;animation:1.2s ease-in-out infinite shimmer;display:block}.todo-loading__skeletons span:first-child{width:82%}.todo-loading__skeletons span:nth-child(2){width:65%}.todo-loading__skeletons span:nth-child(3){width:55%}@keyframes spin{to{transform:rotate(360deg)}}@keyframes shimmer{0%{background-position:200% 0}to{background-position:-200% 0}}.modal{-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);z-index:1000;background:#121e356b;justify-content:center;align-items:center;padding:20px;display:flex;position:fixed;inset:0}.modal-content{text-align:left;background:#ffffffe6;border:1px solid #fff9;border-radius:26px;width:min(92vw,430px);padding:28px 24px 22px;animation:.18s ease-out modal-appear;position:relative;overflow:hidden;box-shadow:0 26px 60px #4c1d952e,0 14px 32px #10b9811f}.modal-content:before{content:"";background:linear-gradient(90deg,#22c55e 0%,#fbbf24 50%,#8b5cf6 100%);height:6px;position:absolute;inset:0 0 auto}.modal-content span{color:#1f2937;margin:10px 0 24px;font-size:1.04rem;font-weight:600;line-height:1.6;display:block}.modal-actions{justify-content:flex-end;gap:12px;display:flex}.modal-actions button{letter-spacing:.02em;cursor:pointer;border:none;border-radius:999px;padding:11px 18px;font-size:.92rem;font-weight:700;transition:transform .2s,box-shadow .2s,filter .2s}.modal-actions button:hover{filter:brightness(1.04);transform:translateY(-1px)}.modal-actions button:active{transform:translateY(0)}.modal-actions button:first-child{color:#f0fdf4;background:linear-gradient(135deg,#22c55e,#14b8a6);box-shadow:0 12px 24px #22c55e47}.modal-actions button:last-child{color:#334155;background:#94a3b824;border:1px solid #94a3b842;box-shadow:inset 0 1px #fff9}.modal--question .modal-content{box-shadow:0 26px 60px #fb923c2e,0 14px 32px #10b9811f}.modal--info .modal-content:before{background:linear-gradient(90deg,#3b82f6,#22c55e,#14b8a6)}.modal--error .modal-content:before{background:linear-gradient(90deg,#ef4444,#f97316,#fbbf24)}.modal--error .modal-actions button:first-child{background:linear-gradient(135deg,#ef4444,#f97316);box-shadow:0 12px 24px #ef444440}@keyframes modal-appear{0%{opacity:0;transform:translateY(10px)scale(.96)}to{opacity:1;transform:translateY(0)scale(1)}}@media (width<=480px){.modal{padding:18px 14px}.modal-content{border-radius:22px;padding:24px 18px 18px}.modal-content span{font-size:.96rem}.modal-actions{flex-direction:column-reverse}.modal-actions button{width:100%}}