.app-container{max-width:400px;margin:20px auto;text-align:center;padding:20px;border-radius:8px;box-shadow:0 4px 8px #0000001a;background:#fff;animation:fadeIn .5s ease-in-out}@keyframes fadeIn{0%{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}h2{color:#333;font-size:20px;margin-bottom:10px}.input-container{width:100%;max-width:400px;margin:10px auto;display:flex;justify-content:center}.styled-input{width:100%;padding:12px 15px;font-size:16px;border:2px solid #ccc;border-radius:8px;outline:none;transition:all .3s ease-in-out;background:#f8f9fa;color:#333}.styled-input:focus{border-color:#1a73e8;box-shadow:0 0 8px #1a73e84d;background:#fff;transform:scale(1.02)}.styled-input::placeholder{color:#888;font-size:14px}.styled-button{background:#1a73e8;color:#fff;font-size:16px;padding:12px 20px;border:none;border-radius:8px;cursor:pointer;transition:all .3s ease-in-out;box-shadow:0 4px 6px #0000001a;font-weight:700;animation:buttonPop .3s ease-in-out}.styled-button:hover{background:#1558c2;box-shadow:0 6px 12px #00000026;transform:translateY(-2px)}.styled-button:active{background:#0d47a1;transform:scale(.95)}@keyframes buttonPop{0%{transform:scale(.8);opacity:0}to{transform:scale(1);opacity:1}}.lists-container{display:flex;justify-content:center;align-items:center;flex-direction:column;width:100%;margin-top:20px}.items-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:15px;width:100%;max-width:600px;padding:10px}.item-card{background:#f9fafb;border-radius:10px;padding:15px;border-left:5px solid #8bb2da;box-shadow:0 4px 8px #0000001a;text-align:center;transition:all .3s ease-in-out;animation:fadeInItem .5s ease-in-out}.item-card:hover{transform:scale(1.05);background:#e9ecef}@keyframes fadeInItem{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}.item-text{font-size:16px;font-weight:700;color:#333}.no-items{margin-top:10px;color:#999;font-size:14px;animation:fadeIn .5s ease-in-out}.icons-container{display:flex;justify-content:center;gap:10px;margin-top:10px}.icon{cursor:pointer;font-size:18px;transition:transform .2s ease-in-out}.icon:hover{transform:scale(1.2)}.edit-icon{color:#1a73e8}.edit-icon:hover{color:#1558c2}.update-icon{color:#28a745}.update-icon:hover{color:#218838}.delete-icon{color:#dc3545}.delete-icon:hover{color:#c82333}.completed-icon{color:#8bb2da}.completed-icon:hover{color:#3cb82b}.edit-input{width:100%;padding:8px;font-size:14px;border:2px solid #ccc;border-radius:6px;outline:none;transition:all .3s ease-in-out}.edit-input:focus{border-color:#1a73e8;box-shadow:0 0 5px #1a73e84d}.item-card.completed{background:#d4edda;border-left:5px solid #28a745;opacity:.7;transition:all .3s ease-in-out}.item-card.completed .item-text{text-decoration:line-through;color:#155724}.item-card.completed .edit-icon{opacity:.5;pointer-events:none}.item-card.completed .completed-icon{color:#218838}.updatedAt{margin-left:5px}.filter-buttons{display:flex;justify-content:center;margin-bottom:15px;gap:10px}.filter-button{background:#e0e0e0;color:#333;font-size:14px;padding:8px 12px;border:none;border-radius:6px;cursor:pointer;transition:all .3s ease-in-out}.filter-button:hover{background:#d6d6d6}.filter-button.active{background:#1a73e8;color:#fff;font-weight:700;box-shadow:0 4px 6px #0000001a}@media (max-width: 500px){.styled-input{font-size:14px;padding:10px}.styled-button{font-size:14px;padding:10px 16px}}