@import "https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600&display=swap";:root{--bg-gradient:linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);--glass-bg:#ffffff0d;--glass-border:#ffffff1a;--glass-shadow:0 8px 32px 0 #0000005e;--accent-color:#4ecca3;--accent-glow:0 0 15px #4ecca366;--text-primary:#fff;--text-secondary:#94a3b8;--danger-color:#ff4d4d}*{box-sizing:border-box;margin:0;padding:0}body{background:var(--bg-gradient);color:var(--text-primary);justify-content:center;align-items:center;min-height:100vh;font-family:Inter,sans-serif;display:flex;overflow-x:hidden}#root{width:100%}.app-container{background:var(--glass-bg);-webkit-backdrop-filter:blur(12px);border:1px solid var(--glass-border);width:90%;max-width:500px;box-shadow:var(--glass-shadow);border-radius:24px;margin:2rem auto;padding:2.5rem;animation:.8s ease-out fadeIn}@keyframes fadeIn{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}h1{text-align:center;background:linear-gradient(90deg,#4ecca3,#45b7d1);-webkit-text-fill-color:transparent;letter-spacing:-.5px;-webkit-background-clip:text;margin-bottom:2rem;font-size:2rem;font-weight:600}.input-group{gap:12px;margin-bottom:2rem;display:flex;position:relative}input[type=text]{border:1px solid var(--glass-border);color:#fff;background:#ffffff08;border-radius:12px;flex:1;padding:12px 16px;font-size:1rem;transition:all .3s}input[type=text]:focus{border-color:var(--accent-color);background:#ffffff12;outline:none;box-shadow:0 0 0 4px #4ecca31a}.add-btn{background:var(--accent-color);color:#1a1a2e;cursor:pointer;border:none;border-radius:12px;padding:12px 20px;font-weight:600;transition:all .3s}.add-btn:hover{box-shadow:var(--accent-glow);filter:brightness(1.1);transform:translateY(-2px)}.todo-list{flex-direction:column;gap:12px;list-style:none;display:flex}.todo-item{border:1px solid var(--glass-border);background:#ffffff05;border-radius:16px;align-items:center;gap:12px;padding:14px 18px;transition:all .3s;animation:.4s ease-out backwards slideIn;display:flex}@keyframes slideIn{0%{opacity:0;transform:translate(-10px)}to{opacity:1;transform:translate(0)}}.todo-item:hover{background:#ffffff0d;border-color:#fff3;transform:scale(1.02)}.todo-item.completed{opacity:.6}.todo-text{cursor:pointer;flex:1;font-size:.95rem;transition:all .3s}.completed .todo-text{color:var(--text-secondary);text-decoration:line-through}.checkbox{border:2px solid var(--accent-color);cursor:pointer;border-radius:6px;justify-content:center;align-items:center;width:20px;height:20px;transition:all .2s;display:flex}.checkbox.checked{background:var(--accent-color)}.checkbox.checked:after{content:"✓";color:#1a1a2e;font-size:14px;font-weight:700}.delete-btn{color:var(--text-secondary);cursor:pointer;background:0 0;border:none;border-radius:6px;justify-content:center;align-items:center;padding:4px;transition:all .2s;display:flex}.delete-btn:hover{color:var(--danger-color);background:#ff4d4d1a}.empty-state{text-align:center;color:var(--text-secondary);margin-top:2rem;font-size:.9rem}