:root{color:#1f2937;-webkit-font-smoothing:antialiased;--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light;background:#f0f2f5;font-family:Segoe UI,system-ui,-apple-system,sans-serif;font-size:16px;line-height:1.5}*,:before,:after{box-sizing:border-box}body{min-height:100vh;margin:0}#root{justify-content:center;align-items:flex-start;min-height:100vh;padding:40px 16px;display:flex}button,input{font:inherit}.app{background:#fff;border-radius:12px;width:100%;max-width:520px;padding:32px;box-shadow:0 4px 24px #00000014}.app>h1{text-align:center;color:#111827;margin:0 0 24px;font-size:28px;line-height:1.2}.todo-form{gap:8px;margin-bottom:4px;display:flex}.todo-form input{border:2px solid #ddd;border-radius:8px;flex:auto;min-width:0;padding:10px 14px}.todo-form input:focus{border-color:#4f46e5;outline:none}.todo-form button{color:#fff;cursor:pointer;background:#4f46e5;border:none;border-radius:8px;flex:none;padding:10px 20px}.todo-form button:hover:not(:disabled){background:#4338ca}.todo-form button:disabled{opacity:.55;cursor:not-allowed}.char-counter{color:#6b7280;text-align:right;margin:4px 0 16px;font-size:12px}.filter-bar{gap:8px;margin-bottom:20px;display:flex}.filter-bar button{cursor:pointer;color:#374151;background:#fafafa;border:2px solid #e0e0e0;border-radius:8px;flex:1 1 0;min-width:0;padding:8px}.filter-bar button.active{color:#4f46e5;background:#eef2ff;border-color:#4f46e5;font-weight:600}.todo-list{margin:0;padding:0;list-style:none}.todo-item{border-bottom:1px solid #eee;justify-content:space-between;align-items:flex-start;gap:12px;padding:12px 0;display:flex}.todo-item label{cursor:pointer;text-align:left;flex:auto;align-items:flex-start;gap:10px;min-width:0;display:flex}.todo-item input[type=checkbox]{cursor:pointer;flex:none;width:18px;height:18px;margin-top:3px}.todo-text{overflow-wrap:anywhere;word-break:break-word;white-space:normal;flex:auto;min-width:0}.todo-item.completed .todo-text{color:#9ca3af;text-decoration:line-through}.delete-btn{color:#6b7280;cursor:pointer;background:0 0;border:none;border-radius:8px;flex:none;width:32px;height:32px;font-size:15px;line-height:1}.delete-btn:hover:not(:disabled){color:#dc2626;background:#fee2e2}.delete-btn:disabled{opacity:.4;cursor:not-allowed}.error-banner{color:#b91c1c;text-align:left;background:#fef2f2;border:1px solid #fecaca;border-radius:8px;justify-content:space-between;align-items:center;gap:12px;margin-bottom:16px;padding:10px 14px;font-size:14px;display:flex}.error-banner button{color:#b91c1c;cursor:pointer;background:0 0;border:none;flex:none;font-size:13px;text-decoration:underline}.loading,.empty{text-align:center;color:#6b7280;padding:24px 0}.load-error{text-align:center;color:#374151;border:1px dashed #d1d5db;border-radius:8px;padding:16px;font-size:14px}.retry-btn{color:#4f46e5;cursor:pointer;background:#fff;border:2px solid #4f46e5;border-radius:8px;margin-top:12px;padding:8px 16px}.retry-btn:hover{background:#eef2ff}@media (width<=480px){#root{padding:0}.app{max-width:100%;min-height:100vh;box-shadow:none;border-radius:0;padding:20px 16px}.app>h1{margin-bottom:20px;font-size:24px}.todo-form,.filter-bar{flex-direction:column}.todo-form button,.filter-bar button{width:100%}.todo-item{gap:8px}}