*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}:root{--bg: #f0f2f5;--surface: #ffffff;--surface-hover: #f8f9fb;--border: #e2e8f0;--text: #1a202c;--text-muted: #718096;--text-completed: #a0aec0;--primary: #667eea;--primary-dark: #5a67d8;--danger: #e53e3e;--danger-hover: #c53030;--success: #48bb78;--shadow-sm: 0 1px 3px rgba(0, 0, 0, .08);--shadow-md: 0 4px 12px rgba(0, 0, 0, .1);--shadow-lg: 0 10px 40px rgba(0, 0, 0, .12);--radius: 12px;--radius-sm: 8px}body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;background:var(--bg);color:var(--text);line-height:1.6;min-height:100vh}.app{min-height:100vh;background:linear-gradient(135deg,#667eea,#764ba2);display:flex;align-items:flex-start;justify-content:center;padding:48px 16px 64px}.container{width:100%;max-width:560px}.header{text-align:center;margin-bottom:28px}.title{font-size:2.5rem;font-weight:700;color:#fff;letter-spacing:-.5px;text-shadow:0 2px 8px rgba(0,0,0,.15)}.subtitle{margin-top:6px;color:#ffffffd9;font-size:.95rem}.error-banner{display:flex;align-items:center;justify-content:space-between;background:#fff5f5;border:1px solid #fed7d7;border-radius:var(--radius-sm);padding:12px 16px;margin-bottom:16px;color:var(--danger);font-size:.9rem}.error-close{background:none;border:none;color:var(--danger);font-size:1.1rem;cursor:pointer;padding:0 4px;line-height:1}.add-form{display:flex;gap:10px;margin-bottom:16px}.add-input{flex:1;padding:14px 18px;font-size:1rem;border:none;border-radius:var(--radius);outline:none;background:var(--surface);color:var(--text);box-shadow:var(--shadow-md);transition:box-shadow .2s}.add-input::placeholder{color:var(--text-muted)}.add-input:focus{box-shadow:0 0 0 3px #667eea59,var(--shadow-md)}.add-btn{padding:14px 22px;font-size:1rem;font-weight:600;border:none;border-radius:var(--radius);background:var(--surface);color:var(--primary);cursor:pointer;box-shadow:var(--shadow-md);transition:background .15s,color .15s,box-shadow .15s;white-space:nowrap}.add-btn:hover:not(:disabled){background:var(--primary);color:#fff;box-shadow:var(--shadow-lg)}.add-btn:disabled{opacity:.55;cursor:not-allowed}.todo-list{background:var(--surface);border-radius:var(--radius);box-shadow:var(--shadow-lg);overflow:hidden}.todo-item{display:flex;align-items:center;padding:16px 18px;border-bottom:1px solid var(--border);transition:background .15s;gap:12px}.todo-item:last-child{border-bottom:none}.todo-item:hover{background:var(--surface-hover)}.todo-item.completed .todo-title{text-decoration:line-through;color:var(--text-completed)}.todo-label{display:flex;align-items:center;gap:12px;flex:1;cursor:pointer;min-width:0}.todo-checkbox{width:20px;height:20px;flex-shrink:0;accent-color:var(--primary);cursor:pointer;border-radius:4px}.todo-title{font-size:.97rem;color:var(--text);word-break:break-word;transition:color .15s}.delete-btn{flex-shrink:0;background:none;border:none;color:var(--text-muted);font-size:.85rem;cursor:pointer;padding:4px 8px;border-radius:6px;opacity:0;transition:opacity .15s,background .15s,color .15s;line-height:1}.todo-item:hover .delete-btn{opacity:1}.delete-btn:hover{background:#fff5f5;color:var(--danger)}.loading{display:flex;flex-direction:column;align-items:center;gap:14px;padding:48px 24px;color:var(--text-muted)}.spinner{width:32px;height:32px;border:3px solid var(--border);border-top-color:var(--primary);border-radius:50%;animation:spin .75s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.empty{display:flex;flex-direction:column;align-items:center;gap:10px;padding:48px 24px;color:var(--text-muted)}.empty-icon{font-size:2rem;color:var(--success)}.empty p{font-size:.95rem}.footer{margin-top:12px;text-align:center}.clear-btn{background:none;border:none;color:#ffffffbf;font-size:.87rem;cursor:pointer;padding:6px 12px;border-radius:var(--radius-sm);transition:color .15s,background .15s}.clear-btn:hover{color:#fff;background:#ffffff26}@media (max-width: 480px){.app{padding:24px 12px 48px}.title{font-size:2rem}.add-form{flex-direction:column}.add-btn{width:100%}}