:root{--background-color: #a8a9ad;--surface-color: #1b1b1b;--accent-color: #0a122a;--text-color: #e6e8e6;--button-color: #8b8ae1}*{margin:0;padding:0;box-sizing:border-box;font-family:Poppins,sans-serif}body{background-color:var(--background-color);color:var(--text-color);min-height:100vh}.container{width:100%;max-width:1200px;margin-inline:auto;padding:40px 20px;display:flex;flex-direction:column;align-items:center}h1{color:#1b1b1b;font-size:2.5rem;margin-bottom:2rem;text-align:center}form{display:flex;flex-direction:column;gap:1rem;width:100%;max-width:500px;padding:2rem;border-radius:8px;background-color:#f0f0f0;margin-bottom:40px;box-shadow:0 4px 12px #0000001a}form input{border-radius:8px;background-color:#fff;height:45px;color:#1b1b1b;padding-left:15px;outline:none;font-size:1rem;border:1px solid #ccc}form input::placeholder{color:#888}form input[type=date]{color-scheme:dark}form button{background-color:var(--button-color);border:none;height:45px;border-radius:8px;cursor:pointer;font-weight:700;color:#fff;font-size:1rem;margin-top:1rem;transition:opacity .2s}form button:hover{opacity:.8}.busca-container{width:100%;max-width:500px;margin-bottom:2rem}.busca-container input{width:100%;height:45px;border-radius:8px;padding-left:15px;font-size:1rem;border:1px solid #ddd;background-color:#fff;color:#1b1b1b;outline:none}.lista-contatos{width:100%;display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:24px}.card{display:flex;flex-direction:column;justify-content:space-between;gap:1rem;padding:1.5rem;background-color:var(--surface-color);border-radius:8px;box-shadow:0 4px 8px #0003}.card-info p{color:var(--text-color);font-weight:700;margin-bottom:.5rem}.card-info p span{font-weight:400;color:silver}.card-actions{align-self:flex-end}.card-actions button{background-color:transparent;border:none;cursor:pointer;padding:5px;border-radius:50%;transition:background-color .2s}.card-actions button:hover{background-color:#ffffff1a}.card-actions button img{width:24px;height:24px}.loading-spinner{border:8px solid rgba(0,0,0,.1);border-top:8px solid var(--button-color);border-radius:50%;width:60px;height:60px;animation:spin 1s linear infinite;margin-inline:auto}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}@media (max-width: 900px){.lista-contatos{grid-template-columns:repeat(2,1fr)}}@media (max-width: 600px){.lista-contatos{grid-template-columns:1fr}h1{font-size:2rem}form,.busca-container{padding:1.5rem}}