*,*:before,*:after{box-sizing:border-box}html{height:100%}body{margin:0;padding:0;height:100%;font-family:Segoe UI,Tahoma,Geneva,Verdana,sans-serif;background:linear-gradient(135deg,#667eea,#764ba2);background-attachment:fixed}#root{min-height:100vh}*{margin:0;padding:0;box-sizing:border-box}body{background-color:#f0f2f5;font-family:Segoe UI,Tahoma,Geneva,Verdana,sans-serif;line-height:1.6;color:#333}.container{max-width:800px;margin:40px auto;padding:20px;background:#fff;border-radius:15px;box-shadow:0 8px 16px #0000001a}.title{text-align:center;margin-top:20px;margin-bottom:30px;color:#343a40;font-weight:700;font-size:2.5rem}.form{display:flex;gap:10px;margin-bottom:30px}.form-input{flex:1;padding:12px 16px;border-radius:8px;border:1px solid #ccc;font-size:16px;transition:border-color .2s ease-in-out}.form-input:focus{outline:none;border-color:#007bff;box-shadow:0 0 0 2px #007bff40}.form-input::placeholder{color:#999}.btn{padding:12px 20px;border:none;border-radius:8px;font-weight:600;cursor:pointer;font-size:14px;transition:all .2s ease-in-out;text-decoration:none;display:inline-block;text-align:center}.btn:hover{transform:translateY(-1px);box-shadow:0 4px 8px #0000001a}.btn-success{background-color:#28a745;color:#fff}.btn-success:hover{background-color:#218838}.btn-warning{background-color:#ffc107;color:#212529}.btn-warning:hover{background-color:#e0a800}.btn-danger{background-color:#dc3545;color:#fff}.btn-danger:hover{background-color:#c82333}.todo-list{margin-top:20px}.table{width:100%;border-collapse:collapse;background:#fff;border-radius:8px;overflow:hidden;box-shadow:0 2px 4px #0000001a}.table th,.table td{padding:15px;text-align:left;border-bottom:1px solid #dee2e6}.table th{background-color:#f8f9fa;font-weight:700;color:#495057;text-transform:uppercase;font-size:14px;letter-spacing:.5px}.table tbody tr:hover{background-color:#f8f9fa}.table tbody tr:last-child td{border-bottom:none}.table td:first-child{font-weight:500}.table td:nth-child(2),.table td:nth-child(3){text-align:center;width:100px}.no-todos{text-align:center;padding:40px 20px;color:#6c757d}.no-todos p{font-size:18px;margin:0}.modal-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background-color:#00000080;display:flex;justify-content:center;align-items:center;z-index:1000}.modal-content{background:#fff;border-radius:12px;box-shadow:0 10px 30px #0000004d;max-width:500px;width:90%;max-height:90vh;overflow-y:auto}.modal-header{display:flex;justify-content:space-between;align-items:center;padding:20px;border-bottom:1px solid #dee2e6}.modal-title{margin:0;font-size:1.25rem;font-weight:700;color:#333}.modal-close{background:none;border:none;font-size:28px;font-weight:700;color:#aaa;cursor:pointer;padding:0;width:30px;height:30px;display:flex;align-items:center;justify-content:center;border-radius:50%;transition:all .2s ease-in-out}.modal-close:hover{color:#000;background-color:#f0f0f0}.modal-body{padding:20px}.modal-input{width:100%;padding:12px 16px;border:1px solid #ccc;border-radius:8px;font-size:16px;transition:border-color .2s ease-in-out}.modal-input:focus{outline:none;border-color:#007bff;box-shadow:0 0 0 2px #007bff40}.modal-footer{display:flex;justify-content:flex-end;gap:10px;padding:20px;border-top:1px solid #dee2e6}@media (max-width: 768px){.container{margin:20px;padding:15px}.title{font-size:2rem}.form{flex-direction:column}.table th,.table td{padding:10px 8px;font-size:14px}.modal-content{margin:20px}.modal-footer{flex-direction:column}.modal-footer .btn{width:100%}}