:root{--primary-color: #4a90e2;--secondary-color: #2ecc71;--danger-color: #e74c3c;--background-color: #f5f6fa;--text-color: #2c3e50;--shadow-color: rgba(0, 0, 0, .1);--gradient-start: #667eea;--gradient-end: #764ba2}body{min-height:100vh;margin:0;background:linear-gradient(135deg,var(--gradient-start) 0%,var(--gradient-end) 100%);color:var(--text-color);font-family:Segoe UI,system-ui,-apple-system,sans-serif;display:flex;justify-content:center;align-items:center;padding:1rem}.todo-container{width:100%;max-width:600px;background:#fffffff2;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-radius:16px;box-shadow:0 8px 32px #0003;padding:2rem}.todo-header{text-align:center;color:var(--gradient-start);font-size:2.5rem;margin-bottom:2rem;font-weight:600;text-shadow:2px 2px 4px rgba(0,0,0,.1)}.todo-input{display:flex;gap:1rem;margin-bottom:2rem}.todo-input input{flex:1;padding:1rem;border:2px solid rgba(102,126,234,.2);border-radius:12px;font-size:1rem;transition:all .3s ease;background:#fff;color:var(--text-color);box-shadow:0 2px 8px #0000000d}.todo-input input::placeholder{color:#a0aec0}.todo-input input:focus{outline:none;border-color:var(--gradient-start);box-shadow:0 0 0 3px #667eea33}button{padding:1rem 1.5rem;border:none;border-radius:12px;font-size:1rem;font-weight:500;cursor:pointer;transition:all .3s ease}.todo-input button{background:linear-gradient(135deg,var(--gradient-start),var(--gradient-end));color:#fff;min-width:120px}.todo-input button:hover{transform:translateY(-2px);box-shadow:0 4px 12px #667eea4d}.todo-list{display:flex;flex-direction:column;gap:1rem}.todo-item{display:flex;align-items:center;justify-content:space-between;padding:1rem;background:#fffc;border:1px solid rgba(102,126,234,.2);border-radius:12px;transition:all .3s ease}.todo-item:hover{transform:translateY(-2px);box-shadow:0 4px 12px var(--shadow-color);background:#fffffff2}.todo-item p{margin:0;font-size:1.1rem;color:var(--text-color);flex:1;padding:0 1rem}.todo-actions{display:flex;gap:.8rem}.edit-btn{background:linear-gradient(135deg,#2ecc71,#27ae60);color:#fff;padding:.8rem 1.2rem}.edit-btn:hover{background:linear-gradient(135deg,#27ae60,#219a52);transform:translateY(-1px);box-shadow:0 4px 12px #2ecc714d}.delete-btn{background:linear-gradient(135deg,#e74c3c,#c0392b);color:#fff;padding:.8rem 1.2rem}.delete-btn:hover{background:linear-gradient(135deg,#c0392b,#a93226);transform:translateY(-1px);box-shadow:0 4px 12px #e74c3c4d}@media (max-width: 640px){body{padding:.5rem}.todo-container{margin:0;padding:1.5rem;border-radius:12px}.todo-input{flex-direction:column}.todo-input button{width:100%}.todo-item{flex-direction:column;gap:1rem;text-align:center}.todo-actions{width:100%;justify-content:center}.todo-header{font-size:2rem}}