body{margin:0;padding:20px;font-family:Inter,sans-serif;background-color:#0e0e0e;color:#e0e0e0;min-height:100vh}form{display:flex;gap:10px;margin-bottom:25px}input{flex:1;padding:12px;border:1px solid #333;border-radius:6px;background-color:#1a1a1a;color:#fff;font-size:15px;transition:.2s ease}input::placeholder{color:#777}input:focus{outline:none;border-color:#444;background-color:#222}button{padding:12px 16px;background-color:#222;color:#e0e0e0;border:1px solid #333;border-radius:6px;font-weight:600;cursor:pointer;transition:background-color .2s ease}button:hover{background-color:#333}ul{list-style:none;padding:0;margin-top:20px}li{background-color:#1b1b1b;padding:14px;margin-bottom:10px;border-radius:6px;border-left:3px solid #333;display:flex;justify-content:space-between;align-items:center;transition:.3s ease}li:hover{background-color:#242424}li span{flex:1;cursor:pointer;font-size:15px}li span.completed{text-decoration:line-through;color:#777}li button{background-color:#2a2a2a;border:none;padding:6px 12px;color:#ccc;border-radius:4px;margin-left:10px;font-size:13px;transition:.2s ease}li button:hover{background-color:#444;color:#fff}