:root{--bg-gradient: linear-gradient(135deg, #0f172a 0%, #1e1b4b 100%);--card-bg: rgba(30, 41, 59, .7);--border-color: rgba(255, 255, 255, .1);--primary-color: #6366f1;--primary-hover: #4f46e5;--text-main: #f8fafc;--text-muted: #94a3b8;--danger: #ef4444;--success: #10b981}*{margin:0;padding:0;box-sizing:border-box}body{font-family:Inter,system-ui,-apple-system,sans-serif;background:var(--bg-gradient);color:var(--text-main);min-height:100vh;display:flex;justify-content:center;align-items:center;padding:20px}.container{width:100%;max-width:540px;background:var(--card-bg);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);border:1px solid var(--border-color);border-radius:20px;padding:32px;box-shadow:0 20px 50px #0006}.header{display:flex;align-items:center;justify-content:space-between;margin-bottom:24px}.title{font-size:24px;font-weight:700;background:linear-gradient(90deg,#818cf8,#c084fc);-webkit-background-clip:text;-webkit-text-fill-color:transparent}.badge{background:#6366f133;color:#818cf8;font-size:12px;padding:4px 10px;border-radius:99px;border:1px solid rgba(99,102,241,.3)}.form{display:flex;gap:10px;margin-bottom:24px}.input{flex:1;background:#0f172a99;border:1px solid var(--border-color);border-radius:12px;padding:12px 16px;color:#fff;font-size:15px;outline:none;transition:all .2s}.input:focus{border-color:var(--primary-color);box-shadow:0 0 0 3px #6366f133}.btn-add{background:var(--primary-color);color:#fff;border:none;border-radius:12px;padding:12px 20px;font-weight:600;cursor:pointer;transition:all .2s}.btn-add:hover{background:var(--primary-hover);transform:translateY(-1px)}.todo-list{list-style:none;display:flex;flex-direction:column;gap:12px}.todo-item{display:flex;align-items:center;justify-content:space-between;background:#0f172a66;border:1px solid var(--border-color);padding:14px 16px;border-radius:12px;transition:all .2s}.todo-item:hover{border-color:#fff3;transform:translate(2px)}.todo-text{cursor:pointer;-webkit-user-select:none;user-select:none;font-size:15px;flex:1}.todo-item.completed .todo-text{text-decoration:line-through;color:var(--text-muted)}.btn-delete{background:transparent;color:var(--danger);border:none;padding:6px;cursor:pointer;font-size:16px;opacity:.7;transition:opacity .2s}.btn-delete:hover{opacity:1}.empty-state{text-align:center;color:var(--text-muted);font-size:14px;padding:24px 0}