*{box-sizing:border-box;margin:0;padding:0}body{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;background:linear-gradient(135deg,#f5f7fa 0%,#c3cfe2 100%);min-height:100vh;margin:0;padding:20px;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif}code{font-family:source-code-pro,Menlo,Monaco,Consolas,Courier New,monospace}::-webkit-scrollbar{width:10px}::-webkit-scrollbar-track{background:#ffffff1a;border-radius:10px}::-webkit-scrollbar-thumb{background:#667eea80;border-radius:10px}::-webkit-scrollbar-thumb:hover{background:#667eeab3}.App{background:linear-gradient(135deg,#667eea 0%,#764ba2 100%);border-radius:20px;max-width:600px;min-height:500px;margin:50px auto;padding:30px;box-shadow:0 20px 60px #0000004d}.App h1{color:#fff;text-align:center;text-shadow:2px 2px 4px #0003;letter-spacing:1px;margin-bottom:30px;font-size:2.5em}.App form{background:#fffffff2;border-radius:15px;gap:10px;margin-bottom:30px;padding:15px;display:flex;box-shadow:0 4px 15px #0000001a}.App form input{border:2px solid #e0e0e0;border-radius:10px;flex:1;height:45px;padding:0 15px;font-family:inherit;font-size:16px;transition:all .3s}.App form input:focus{border-color:#667eea;outline:none;box-shadow:0 0 0 3px #667eea1a}.App form button{color:#fff;cursor:pointer;background:linear-gradient(135deg,#667eea 0%,#764ba2 100%);border:none;border-radius:10px;height:45px;padding:0 30px;font-size:16px;font-weight:600;transition:all .3s;box-shadow:0 4px 15px #667eea66}.App form button:hover{transform:translateY(-2px);box-shadow:0 6px 20px #667eea99}.App form button:active{transform:translateY(0)}.App ul{margin:0;padding:0;list-style:none}.App li{background:#fffffff2;border-radius:12px;align-items:center;gap:12px;margin-bottom:12px;padding:15px 20px;transition:all .3s;animation:.3s slideIn;display:flex;box-shadow:0 2px 8px #0000001a}@keyframes slideIn{0%{opacity:0;transform:translate(-20px)}to{opacity:1;transform:translate(0)}}.App li:hover{transform:translate(5px);box-shadow:0 4px 12px #00000026}.App li.completed{opacity:.7;background:#e6e6e6f2}.App li.completed .todo-text{color:#888;text-decoration:line-through}.todo-text{color:#333;word-break:break-word;flex:1;font-size:16px;transition:all .3s}.todobuttons{cursor:pointer;border:none;border-radius:8px;min-width:80px;height:auto;padding:8px 15px;font-size:14px;font-weight:600;transition:all .3s}.todobuttons:first-of-type{color:#fff;background:linear-gradient(135deg,#00c972 0%,#00a859 100%);min-width:100px}.todobuttons:first-of-type:hover{background:linear-gradient(135deg,#00a859 0%,#008f4a 100%);transform:scale(1.05)}.todobuttons:last-of-type{color:#fff;background:linear-gradient(135deg,#ff6b6b 0%,#ee5a52 100%)}.todobuttons:last-of-type:hover{background:linear-gradient(135deg,#ee5a52 0%,#dc4c44 100%);transform:scale(1.05)}.todobuttons:active{transform:scale(.98)}.App ul:empty:after{content:"No todos yet. Add one above! 📝";text-align:center;color:#ffffffb3;padding:40px;font-size:18px;font-style:italic;display:block}@media (width<=768px){.App{margin:20px;padding:20px}.App h1{font-size:2em}.App li{flex-direction:column;align-items:stretch}.todo-text{margin-bottom:10px}.button-group{gap:8px;display:flex}.todobuttons{flex:1;min-width:auto}}