@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap');

:root {
--primary-color: #ff416c;
--primary-rgb: 255, 65, 108;
--secondary-color: #ff4b2b;
--secondary-rgb: 255, 75, 43;
--accent-color: #ff416c;
--accent-rgb: 255, 65, 108;
--dark-bg: #0f0f1a;
--darker-bg: #0a0a12;
--card-bg: rgba(26, 26, 46, 0.7);
--card-hover-bg: rgba(40, 40, 70, 0.8);
--text-color: #e6e6e6;
--text-muted: #8a8a8a;
--border-color: rgba(255, 255, 255, 0.1);
--success-color: #28a745;
--warning-color: #ffc107;
--danger-color: #dc3545;
--info-color: #17a2b8;
}

* {
margin: 0;
padding: 0;
box-sizing: border-box;
}

body {
font-family: 'Poppins', sans-serif;
min-height: 100vh;
background: linear-gradient(135deg, #ffe0ec 0%, #e0f7fa 100%);
background-attachment: fixed;
transition: background 0.7s cubic-bezier(.4,0,.2,1);
color: var(--text-color, #222);
line-height: 1.6;
margin: 0;
padding: 0;
position: relative;
overflow-x: hidden;
}

@keyframes gradientBG {
0% {
background-position: 0% 50%;
}
50% {
background-position: 100% 50%;
}
100% {
background-position: 0% 50%;
}
}

/* Overlay de gradiente sempre atrás de tudo */
.gradient-overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: linear-gradient(135deg, rgba(26, 26, 46, 0.95) 0%, rgba(22, 33, 62, 0.92) 50%, rgba(15, 52, 96, 0.9) 100%);
z-index: 0 !important;
pointer-events: none;
}

/* Container e Layout */
.container {
max-width: 1400px;
padding: 2rem 1.5rem;
position: relative;
z-index: 2;
}

/* Cabeçalho */
header {
position: relative;
z-index: 10;
margin: 2rem 0 4rem;
padding: 2rem 0;
overflow: hidden;
}

/* Elementos decorativos do cabeçalho */
.header-decoration {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
pointer-events: none;
z-index: -1;
}

.header-ornament {
position: absolute;
background: linear-gradient(90deg, transparent, rgba(255, 65, 108, 0.1), transparent);
height: 1px;
width: 100%;
}

.header-ornament:nth-child(1) {
top: 20%;
transform: rotate(-2deg);
}

.header-ornament:nth-child(2) {
top: 50%;
transform: rotate(1deg);
}

.header-ornament:nth-child(3) {
top: 80%;
transform: rotate(-1deg);
}

/* Divisor do cabeçalho */
.header-divider {
display: flex;
align-items: center;
justify-content: center;
margin: 1.5rem 0;
width: 100%;
max-width: 400px;
}

.divider-line {
height: 1px;
flex: 1;
background: linear-gradient(90deg, transparent, rgba(255, 65, 108, 0.5), transparent);
}

.header-divider i {
margin: 0 1rem;
color: #ff416c;
font-size: 1.2rem;
opacity: 0.7;
}

/* Destaque de texto */
.highlight {
background: linear-gradient(45deg, #ff416c, #ff4b2b);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
font-weight: 700;
position: relative;
display: inline-block;
}

.highlight::after {
content: '';
position: absolute;
bottom: -2px;
left: 0;
width: 100%;
height: 2px;
background: linear-gradient(90deg, #ff416c, #ff4b2b);
border-radius: 2px;
}

.logo-wrapper {
position: relative;
display: inline-block;
}

.logo {
width: 120px;
height: 120px;
object-fit: contain;
filter: drop-shadow(0 0 20px rgba(255, 65, 108, 0.5));
transition: all 0.3s ease;
position: relative;
z-index: 2;
}

.logo-glow {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 140px;
height: 140px;
background: radial-gradient(circle, rgba(255, 65, 108, 0.3) 0%, rgba(255, 65, 108, 0) 70%);
border-radius: 50%;
z-index: 1;
animation: pulse 2s infinite alternate;
}

@keyframes pulse {
0% { opacity: 0.5; transform: translate(-50%, -50%) scale(0.95); }
100% { opacity: 0.8; transform: translate(-50%, -50%) scale(1.05); }
}

.text-gradient {
background: linear-gradient(90deg, var(--primary-color, #ff416c), var(--secondary-color, #ff4b2b));
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
/* text-fill-color: transparent; */
}

.divider {
width: 100px;
height: 3px;
background: linear-gradient(90deg, var(--primary-color), var(--secondary-color));
margin: 1rem auto;
position: relative;
overflow: hidden;
}

.divider::after {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.7), transparent);
animation: shine 3s infinite;
}

@keyframes shine {
100% { left: 100%; }
}

.logo-container {
text-align: center;
margin-bottom: 2.5rem;
position: relative;
z-index: 10;
}

h1 {
color: var(--text-color);
font-size: 2.5rem;
margin-bottom: 0.5rem;
text-shadow: 0 0 10px var(--secondary-color);
font-weight: 700;
letter-spacing: 1px;
}

/* Cards */
/* Cards com tema Zero Two */
.card {
background: linear-gradient(145deg, rgba(20, 20, 40, 0.8), rgba(10, 10, 25, 0.9));
border: 1px solid rgba(255, 65, 108, 0.15);
border-radius: 16px;
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
-webkit-backdrop-filter: blur(15px);
backdrop-filter: blur(15px);
overflow: hidden;
position: relative;
z-index: 3;
transform: translateY(0);
border-top: 1px solid rgba(255, 65, 108, 0.2);
border-left: 1px solid rgba(255, 65, 108, 0.1);
margin-bottom: 1.5rem;
}

.card::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 4px;
background: linear-gradient(90deg, #ff416c, #ff4b2b);
opacity: 0.8;
transition: all 0.3s ease;
}

.card:hover {
transform: translateY(-8px) scale(1.01);
box-shadow: 0 15px 45px rgba(255, 65, 108, 0.2);
border-color: rgba(255, 65, 108, 0.3);
}

.card:hover::before {
height: 6px;
opacity: 1;
}

.card-header {
background: rgba(255, 65, 108, 0.1);
border-bottom: 1px solid rgba(255, 65, 108, 0.1);
padding: 1.25rem 1.5rem;
position: relative;
z-index: 2;
}

.card-title {
color: #fff;
font-weight: 600;
margin: 0;
display: flex;
align-items: center;
gap: 0.75rem;
}

.card-title i {
color: #ff416c;
font-size: 1.25rem;
}

.card-body {
padding: 1.5rem;
position: relative;
z-index: 1;
}

/* Estilos para os ícones de destaque */
.feature-icon {
width: 80px;
height: 80px;
margin: 0 auto;
display: flex;
align-items: center;
justify-content: center;
background: rgba(255, 65, 108, 0.1);
border-radius: 50%;
font-size: 2rem;
color: #ff416c;
transition: all 0.3s ease;
}

/* Botões com gradiente */
.btn-gradient {
position: relative;
overflow: hidden;
z-index: 1;
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
border: none;
}

.btn-gradient::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: linear-gradient(45deg, #ff416c, #ff4b2b);
z-index: -1;
opacity: 0;
transition: opacity 0.4s ease;
}

.btn-gradient:hover::before {
opacity: 1;
}

.btn-outline-danger.btn-gradient {
color: #ff416c;
border-color: #ff416c;
}

.btn-outline-danger.btn-gradient:hover {
color: #fff;
background: transparent;
}

.btn-outline-warning.btn-gradient {
color: #ffc107;
border-color: #ffc107;
}

.btn-outline-warning.btn-gradient:hover {
color: #000;
background: transparent;
}

/* Espaço extra antes do rodapé */
.container {
padding-bottom: 100px; /* Adiciona espaço para o rodapé */
}

.modal {
z-index: 99999 !important;
}

.modal-backdrop {
z-index: 99998 !important;
}

.modal-content {
border: 1px solid rgba(255, 65, 108, 0.2);
border-radius: 12px;
overflow: hidden;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
}

.modal-header {
border-bottom: 1px solid rgba(255, 65, 108, 0.1);
background: rgba(20, 20, 40, 0.95);
padding: 1.25rem 1.5rem;
}

.modal-body {
background: rgba(15, 15, 25, 0.95);
padding: 1.5rem;
}

.modal-footer {
border-top: 1px solid rgba(255, 65, 108, 0.1);
background: rgba(20, 20, 40, 0.95);
padding: 1rem 1.5rem;
}

/* Melhorias para os campos de formulário */
.form-control {
background-color: rgba(30, 30, 50, 0.8) !important;
color: white !important;
border: 1px solid rgba(255, 65, 108, 0.3) !important;
}

.form-control:focus {
box-shadow: 0 0 0 0.25rem rgba(255, 65, 108, 0.25) !important;
border-color: #ff416c !important;
}

/* Ajustes para o tema escuro */
.btn-close {
filter: invert(1) grayscale(100%) brightness(200%);
opacity: 0.8;
transition: opacity 0.2s ease;
}

.btn-close:hover {
opacity: 1;
}

/* Estilos para o rodapé */
.footer-modern {
position: relative;
z-index: 3;
background: rgba(15, 15, 30, 0.95);
border-top: 1px solid rgba(255, 65, 108, 0.2);
padding: 3rem 0;
margin-top: 5rem;
}

/* Garantir que o gradiente não cubra o conteúdo */
.gradient-overlay {
z-index: 0 !important;
}

/* Efeito de brilho sutil no rodapé */
.footer-modern::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 2px;
background: linear-gradient(90deg, transparent, #ff416c, #ff4b2b, #ff416c, transparent);
box-shadow: 0 0 20px 3px rgba(255, 65, 108, 0.4);
z-index: 2;
}

.footer-modern::after {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: 
radial-gradient(circle at 50% 0%, rgba(255, 65, 108, 0.03), transparent 70%),
url("data:image/svg+xml,%3Csvg viewBox='0 0 1440 320' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='%23ff416c' fill-opacity='0.05' d='M0,224L48,224C96,224,192,224,288,213.3C384,203,480,181,576,181.3C672,181,768,203,864,202.7C960,203,1056,181,1152,181.3C1248,181,1344,203,1392,213.3L1440,224L1440,320L1392,320C1344,320,1248,320,1152,320C1056,320,960,320,864,320C768,320,672,320,576,320C480,320,384,320,288,320C192,320,96,320,48,320L0,320Z'%3E%3C/path%3E%3C/svg%3E") bottom/100% 100px no-repeat;
pointer-events: none;
opacity: 0.5;
}

.footer-divider {
height: 2px;
width: 100px;
margin: 0 auto;
background: linear-gradient(90deg, transparent, #ff416c, transparent);
}

.footer-social {
display: flex;
justify-content: center;
gap: 1rem;
}

.footer-social a {
display: inline-flex;
align-items: center;
justify-content: center;
width: 40px;
height: 40px;
border-radius: 50%;
background: rgba(255, 255, 255, 0.05);
color: #fff;
font-size: 1.2rem;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
text-decoration: none;
position: relative;
overflow: hidden;
border: 1px solid rgba(255, 65, 108, 0.2);
}

.footer-social a::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: linear-gradient(45deg, #ff416c, #ff4b2b);
z-index: -1;
opacity: 0;
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
border-radius: 50%;
}

.footer-social a::after {
content: '';
position: absolute;
top: -2px;
left: -2px;
right: -2px;
bottom: -2px;
background: linear-gradient(45deg, #ff416c, #ff4b2b);
z-index: -2;
border-radius: 50%;
opacity: 0;
filter: blur(8px);
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
transform: scale(0.9);
}

/* Efeito de brilho ao redor dos ícones */
.footer-social a i {
position: relative;
z-index: 1;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
text-shadow: 0 0 0 rgba(255, 65, 108, 0);
}

.footer-social a:hover i {
text-shadow: 0 0 10px rgba(255, 65, 108, 0.7);
transform: scale(1.1) rotate(5deg);
}

/* Adicionando um brilho sutil atrás dos ícones */
.footer-social a i::after {
content: '';
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%) scale(0);
width: 100%;
height: 100%;
background: radial-gradient(circle, rgba(255,65,108,0.4) 0%, rgba(255,75,43,0) 70%);
border-radius: 50%;
opacity: 0;
transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
z-index: -1;
}

.footer-social a:hover i::after {
transform: translate(-50%, -50%) scale(2);
opacity: 1;
}

.footer-social a:hover {
color: #fff;
transform: translateY(-3px);
box-shadow: 0 5px 20px rgba(255, 65, 108, 0.4);
border-color: transparent;
}

.footer-social a:hover::before {
opacity: 1;
transform: scale(1.05);
}

.footer-social a:hover::after {
opacity: 0.7;
transform: scale(1.1);
}

.footer-social a i {
transition: transform 0.3s ease;
}

.footer-social a:hover i {
transform: scale(1.2);
}

.footer-icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 50px;
height: 50px;
border-radius: 50%;
background: rgba(255, 255, 255, 0.1);
color: #ff416c;
font-size: 1.5rem;
transition: all 0.3s ease;
border: 1px solid rgba(255, 65, 108, 0.3);
}

.footer-icon:hover {
background: linear-gradient(45deg, #ff416c, #ff4b2b);
color: white !important;
transform: translateY(-5px);
box-shadow: 0 5px 15px rgba(255, 65, 108, 0.4);
border-color: transparent;
}

.footer-icon i {
transition: transform 0.3s ease;
}

.footer-icon:hover i {
transform: scale(1.2);
}

/* Efeito de brilho sutil no rodapé */
.footer-modern::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 1px;
background: linear-gradient(90deg, transparent, #ff416c, transparent);
box-shadow: 0 0 10px 1px rgba(255, 65, 108, 0.5);
}

/* Ajustes de responsividade */
@media (max-width: 768px) {
.logo {
max-width: 120px;
}

.display-4 {
font-size: 2.2rem;
}

.card {
margin-bottom: 1.5rem;
}

.feature-icon {
width: 70px;
height: 70px;
font-size: 1.8rem;
}
}

/* Efeito de brilho ao passar o mouse */
.card::after {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: radial-gradient(circle at 50% 0%, rgba(255, 65, 108, 0.1), transparent 70%);
opacity: 0;
transition: opacity 0.4s ease;
pointer-events: none;
}

.card:hover::after {
opacity: 1;
}

.card-hover {
transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}

.card-hover:hover {
transform: translateY(-5px);
box-shadow: 0 15px 35px rgba(0, 0, 0, 0.3);
border-color: rgba(255, 65, 108, 0.3);
}

.card-header {
background: rgba(0, 0, 0, 0.2);
border-bottom: 1px solid var(--border-color);
padding: 1.25rem 1.5rem;
}

.card-body {
padding: 1.5rem;
}

.icon-wrapper {
display: inline-flex;
align-items: center;
justify-content: center;
width: 40px;
height: 40px;
border-radius: 10px;
transition: all 0.3s ease;
}

/* Formulários e Botões */
.form-control {
background-color: rgba(255, 255, 255, 0.1);
border: 1px solid rgba(255, 255, 255, 0.2);
color: white;
padding: 0.75rem 1rem;
border-radius: 8px;
transition: all 0.3s ease;
}

.form-control:focus {
background-color: rgba(255, 255, 255, 0.15);
border-color: var(--secondary-color);
-webkit-box-shadow: 0 0 0 0.25rem rgba(5, 217, 232, 0.25);
box-shadow: 0 0 0 0.25rem rgba(5, 217, 232, 0.25);
color: white;
}

.form-control::placeholder {
color: rgba(255, 255, 255, 0.5);
}

.btn {
padding: 0.6rem 1.5rem;
border: none;
border-radius: 50px;
font-weight: 500;
text-transform: uppercase;
letter-spacing: 0.5px;
transition: all 0.3s ease;
position: relative;
overflow: hidden;
z-index: 1;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.5rem;
}

.btn i {
font-size: 1.1em;
}

.btn::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 0;
height: 100%;
background-color: rgba(255, 255, 255, 0.2);
transition: all 0.3s ease;
z-index: -1;
}

.btn:hover::before {
width: 100%;
}

.btn-primary {
background: linear-gradient(45deg, var(--primary-color), #ff7aa2);
-webkit-box-shadow: 0 4px 15px rgba(255, 42, 109, 0.4);
box-shadow: 0 4px 15px rgba(255, 42, 109, 0.4);
}

.btn-primary:hover {
-webkit-transform: translateY(-2px);
-ms-transform: translateY(-2px);
transform: translateY(-2px);
-webkit-box-shadow: 0 6px 20px rgba(255, 42, 109, 0.6);
box-shadow: 0 6px 20px rgba(255, 42, 109, 0.6);
}

.btn-danger {
background: linear-gradient(45deg, #ff3860, #ff6b81);
-webkit-box-shadow: 0 4px 15px rgba(255, 56, 96, 0.4);
box-shadow: 0 4px 15px rgba(255, 56, 96, 0.4);
}

.btn-danger:hover {
-webkit-transform: translateY(-2px);
-ms-transform: translateY(-2px);
transform: translateY(-2px);
-webkit-box-shadow: 0 6px 20px rgba(255, 56, 96, 0.6);
box-shadow: 0 6px 20px rgba(255, 56, 96, 0.6);
}

.btn-warning {
background: linear-gradient(45deg, #ff9a44, #ffd166);
color: #333;
-webkit-box-shadow: 0 4px 15px rgba(255, 154, 68, 0.4);
box-shadow: 0 4px 15px rgba(255, 154, 68, 0.4);
}

.btn-warning:hover {
-webkit-transform: translateY(-2px);
-ms-transform: translateY(-2px);
transform: translateY(-2px);
-webkit-box-shadow: 0 6px 20px rgba(255, 154, 68, 0.6);
box-shadow: 0 6px 20px rgba(255, 154, 68, 0.6);
}

/* Tabela de Chaves */
/* Estilo para o botão de cópia */
.btn-icon {
padding: 0.25rem;
line-height: 1;
background: transparent;
border: none;
color: var(--secondary-color);
transition: all 0.2s;
}

.btn-icon:hover {
color: var(--accent-color);
transform: translateY(-1px);
}

/* Estilo para a célula da chave */
.key-cell {
position: relative;
}

.key-text {
max-width: 200px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
display: inline-block;
vertical-align: middle;
}

.key-tooltip {
visibility: hidden;
width: 300px;
background-color: var(--dark-bg);
color: #fff;
text-align: center;
border-radius: 6px;
padding: 8px 12px;
position: absolute;
z-index: 1000;
bottom: 125%;
left: 50%;
transform: translateX(-50%);
opacity: 0;
transition: opacity 0.3s;
font-size: 0.8rem;
word-break: break-all;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
border: 1px solid rgba(255, 255, 255, 0.1);
}

.key-cell:hover .key-tooltip {
visibility: visible;
opacity: 1;
}

/* Estilo para a barra de progresso */
.progress {
background-color: rgba(255, 255, 255, 0.1);
border-radius: 10px;
overflow: hidden;
}

.progress-bar {
height: 100%;
transition: width 0.6s ease;
}

/* Estilo para os badges de status */
.badge {
font-weight: 500;
letter-spacing: 0.5px;
padding: 0.4em 0.8em;
}

/* Estilo para as linhas da tabela */
tr.status-ativa {
--bs-table-accent-bg: rgba(40, 167, 69, 0.05);
}

tr.status-inativa {
--bs-table-accent-bg: rgba(220, 53, 69, 0.05);
opacity: 0.7;
}

tr.status-pendente {
--bs-table-accent-bg: rgba(255, 193, 7, 0.05);
}

/* Efeito hover nas linhas */
tr:hover {
--bs-table-accent-bg: rgba(255, 255, 255, 0.03) !important;
transform: translateX(4px);
transition: all 0.2s ease;
}

/* Estilo para a mensagem de nenhum resultado */
#noKeysMessage {
padding: 3rem 1rem;
background: rgba(255, 255, 255, 0.02);
border-radius: 10px;
margin-top: 1rem;
}

#noKeysMessage i {
font-size: 3rem;
opacity: 0.5;
margin-bottom: 1rem;
}

/* Tabela de Chaves */
#keysTable {
width: 100%;
table-layout: fixed;
}

#keysTable th:nth-child(1) {
min-width: 250px;
}

#keysTable th:nth-child(2) {
width: 200px;
}

#keysTable th:nth-child(3) {
width: 150px;
}

#keysTable th:nth-child(4) {
width: 180px;
}

#keysTable th:nth-child(5) {
width: 120px;
}

.table {
--bs-table-bg: transparent;
--bs-table-color: var(--text-color);
--bs-table-border-color: rgba(255, 255, 255, 0.1);
background: rgba(13, 17, 41, 0.8);
border-radius: 10px;
overflow: hidden;
box-shadow: 0 0 20px rgba(0, 0, 0, 0.3);
margin-bottom: 0;
border-collapse: separate;
border-spacing: 0;
}

.table thead {
background: linear-gradient(90deg, var(--primary-color), #ff7aa2);
position: sticky;
top: 0;
z-index: 10;
}

.table thead th {
background: transparent;
border: none;
color: white;
font-weight: 600;
text-transform: uppercase;
font-size: 0.8rem;
letter-spacing: 1px;
padding: 1rem 1.25rem;
border-bottom: none;
position: relative;
}

.table thead th:not(:last-child)::after {
content: '';
position: absolute;
right: 0;
top: 50%;
transform: translateY(-50%);
width: 1px;
height: 60%;
background: rgba(255, 255, 255, 0.2);
}

.table tbody tr {
transition: all 0.2s ease;
position: relative;
background: rgba(255, 255, 255, 0.02);
}

.table tbody tr:nth-child(even) {
background: rgba(255, 255, 255, 0.05);
}

.table tbody tr:hover {
background: rgba(255, 255, 255, 0.1);
transform: translateX(5px);
}

.table tbody td {
border-color: rgba(255, 255, 255, 0.05);
vertical-align: middle;
padding: 1rem 1.25rem;
position: relative;
border-top: 1px solid rgba(255, 255, 255, 0.05);
}

/* Estilo para a coluna de status */
.table tbody td:last-child {
text-align: center;
}

/* Estilo para a célula de chave */
.key-cell {
font-family: 'Fira Code', 'Courier New', monospace;
font-size: 0.85rem;
color: var(--secondary-color);
word-break: break-all;
}

/* Estilo para a célula de consultas */
.consultas-cell {
font-weight: 600;
text-align: center;
}

/* Badge de status */
.badge {
padding: 0.5rem 0.75rem;
border-radius: 50px;
font-size: 0.75rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.5px;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

.badge.bg-success {
background: linear-gradient(45deg, #00b09b, #96c93d) !important;
}

.badge.bg-warning {
background: linear-gradient(45deg, #f6d365, #fda085) !important;
color: #333 !important;
}

.badge.bg-danger {
background: linear-gradient(45deg, #ff416c, #ff4b2b) !important;
}

/* Scroll personalizado para a tabela */
.table-responsive {
border-radius: 10px;
max-height: 500px;
overflow-y: auto;
}

/* Barra de rolagem personalizada - Webkit (Chrome, Safari, Edge) */
/* Esconde a barra de rolagem padrão */
.table-responsive {
overflow-y: auto;
-ms-overflow-style: none; /* IE and Edge */
/* scrollbar-width removido para melhor compatibilidade */
}

/* Esconde a barra de rolagem no Chrome, Safari e Opera */
.table-responsive::-webkit-scrollbar {
display: none;
}

/* Adiciona um efeito de sombra para indicar conteúdo rolável */
.table-responsive {
position: relative;
}

.table-responsive::after {
content: '';
position: absolute;
top: 0;
right: 0;
width: 20px;
height: 100%;
background: linear-gradient(90deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.1) 100%);
pointer-events: none;
opacity: 0;
transition: opacity 0.3s;
}

.table-responsive:hover::after {
opacity: 1;
}

/* Responsividade */
@media (max-width: 991.98px) {
/* Garante que a tabela ocupe toda a largura disponível */
.table-responsive {
width: 100%;
margin-bottom: 1rem;
overflow-x: auto;
-ms-overflow-style: -ms-autohiding-scrollbar;
/* Força a renderização por GPU para melhor performance em mobile */
transform: translateZ(0);
/* Suavização de rolagem nativa já é suficiente */
}

/* Estilo para evitar quebra de layout em telas pequenas */
.table {
width: 100%;
margin-bottom: 1rem;
background-color: transparent;
}

/* Ajusta o padding para melhor legibilidade em mobile */
.container {
padding-left: 1rem;
padding-right: 1rem;
}
.table-responsive {
border: 0;
}

.table thead {
display: none;
}

.table tbody tr {
display: block;
margin-bottom: 1.5rem;
border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: 10px;
overflow: hidden;
}

.table tbody td {
display: flex;
justify-content: space-between;
align-items: center;
padding: 0.75rem 1rem;
text-align: right;
border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.table tbody td {
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
padding: 0.75rem 0.5rem;
text-align: right;
border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.table tbody td::before {
content: attr(data-label);
font-weight: 600;
margin-right: 1rem;
color: var(--secondary-color);
text-align: left;
flex: 1;
}

.table tbody td > *:not([data-label]) {
flex: 2;
text-align: right;
}

.table tbody td:last-child {
border-bottom: 0;
}

.key-cell,
.consultas-cell,
.text-center {
text-align: right !important;
}

.badge {
margin-left: auto;
}
}

/* Efeitos e Animações */
@keyframes float {
0%, 100% { 
-webkit-transform: translateY(0);
-ms-transform: translateY(0);
transform: translateY(0); 
}
50% { 
-webkit-transform: translateY(-10px);
-ms-transform: translateY(-10px);
transform: translateY(-10px); 
}
}

@keyframes gradientBG {
0% { 
-webkit-background-position: 0% 50%;
background-position: 0% 50%;
}
50% { 
-webkit-background-position: 100% 50%;
background-position: 100% 50%;
}
100% { 
background-position: 0% 50%; 
}
}

/* Efeito de Partículas */
.particles {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 1;
pointer-events: none;
animation: backgroundZoom 30s ease infinite;
}

@keyframes backgroundZoom {
0%, 100% { 
-webkit-transform: scale(1);
-ms-transform: scale(1);
transform: scale(1); 
}
50% { 
-webkit-transform: scale(1.05);
-ms-transform: scale(1.05);
transform: scale(1.05); 
}
}

/* Footer */
footer {
margin-top: 3rem;
padding: 1.5rem;
color: rgba(255, 255, 255, 0.6);
font-size: 0.9rem;
text-align: center;
position: relative;
z-index: 3;
pointer-events: auto;
background: linear-gradient(to top, rgba(32, 38, 40, 0) 25%, rgba(49, 57, 61, 1) 100%);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
-webkit-transform: translateX(-25%) translateZ(-100px) skewY(-3deg);
-ms-transform: translateX(-25%) translateZ(-100px) skewY(-3deg);
transform: translateX(-25%) translateZ(-100px) skewY(-3deg);
-webkit-transition: -webkit-transform 1200ms cubic-bezier(0.390, 0.575, 0.565, 1.000);
transition: transform 1200ms cubic-bezier(0.390, 0.575, 0.565, 1.000);
}

/* Estilo das gotas de água */
.drop {
position: absolute;
bottom: 100%;
left: 50%;
width: 5px;
height: 10px;
background: rgba(255, 255, 255, 0.6);
border-radius: 50%;
animation: drop 1s infinite;
opacity: 0;
left: 50%;
width: 5px;
height: 10px;
background: rgba(255, 255, 255, 0.6);
border-radius: 50%;
animation: drop 1s infinite;
opacity: 0;
}

.drop:nth-of-type(1) {
left: 20%;
animation-delay: 0.1s;
}

.drop:nth-of-type(2) {
left: 40%;
animation-delay: 0.3s;
}

.drop:nth-of-type(3) {
left: 60%;
animation-delay: 0.5s;
}

.drop:nth-of-type(4) {
left: 80%;
animation-delay: 0.7s;
}

@keyframes drop {
0% {
transform: translateY(0);
opacity: 1;
}

80% {
opacity: 1;
}

100% {
transform: translateY(100vh);
opacity: 0;
}
}

/* =============================================
 ESTILOS DO GERENCIADOR DE CHAVES
 ============================================= */

/* Container principal */
.keys-container {
max-width: 1200px;
margin: 0 auto;
padding: 0 1rem;
}

/* Seção de formulários */
.forms-section {
margin-bottom: 2rem;
}

/* Cards de formulário */
.form-card {
height: 100%;
background: rgba(255, 255, 255, 0.03);
border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: 8px;
transition: all 0.3s ease;
overflow: hidden;
}

.form-card:hover {
transform: translateY(-3px);
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
border-color: var(--accent-color);
}

.form-card .card-header {
background: rgba(0, 0, 0, 0.2);
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
padding: 1rem 1.25rem;
font-weight: 600;
color: var(--accent-color);
display: flex;
align-items: center;
gap: 0.75rem;
}

.form-card .card-header i {
font-size: 1.1em;
}

.form-card .card-body {
padding: 1.5rem;
}

/* Tabela de chaves */
#keysTable {
width: 100%;
border-collapse: separate;
border-spacing: 0;
background: rgba(26, 26, 46, 0.7);
-webkit-backdrop-filter: blur(10px);
backdrop-filter: blur(10px);
border-radius: 12px;
overflow: hidden;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
margin-bottom: 0;
border: 1px solid var(--border-color);
}

#keysTable thead {
background: linear-gradient(90deg, var(--primary-color), var(--secondary-color));
}

#keysTable thead th {
padding: 1.25rem 1.5rem;
font-size: 0.8rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.5px;
color: white;
border: none;
position: sticky;
top: 0;
z-index: 10;
}

#keysTable tbody tr {
transition: all 0.2s ease;
background: rgba(255, 255, 255, 0.02);
}

#keysTable tbody tr:nth-child(even) {
background: rgba(255, 255, 255, 0.03);
}

#keysTable tbody tr:hover {
background: rgba(255, 255, 255, 0.07);
transform: translateX(5px);
}

#keysTable tbody td {
padding: 1.25rem 1.5rem;
vertical-align: middle;
border-top: 1px solid var(--border-color);
font-size: 0.95rem;
color: var(--text-color);
}

/* Célula da chave */
.key-cell {
position: relative;
min-width: 250px;
font-family: 'Fira Code', monospace;
}

.key-text {
font-family: 'Fira Code', monospace;
letter-spacing: 0.5px;
font-size: 0.9rem;
color: #e9ecef;
font-weight: 500;
background: rgba(0, 0, 0, 0.2);
padding: 0.5rem 1rem;
border-radius: 6px;
display: inline-block;
border: 1px solid rgba(255, 255, 255, 0.05);
}

/* Botão de cópia */
.copy-key, .copy-btn {
opacity: 0.7;
transition: all 0.2s ease;
padding: 0.4rem 0.6rem;
line-height: 1;
background: rgba(255, 255, 255, 0.1);
border: 1px solid rgba(255, 255, 255, 0.1);
color: #fff;
border-radius: 6px;
margin-left: 0.5rem;
font-size: 0.8rem;
}

.copy-key:hover, .copy-btn:hover {
background: var(--primary-color);
color: white;
opacity: 1;
transform: translateY(-1px);
}

tr:hover .copy-key, tr:hover .copy-btn {
opacity: 1;
}

.copy-key.copied, .copy-btn.copied {
background: var(--success-color);
color: white;
opacity: 1;
}

/* Barra de progresso */
.progress {
height: 8px;
background-color: rgba(255, 255, 255, 0.1);
border-radius: 4px;
overflow: hidden;
margin-top: 0.5rem;
position: relative;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1) inset;
}

.progress-bar {
background: linear-gradient(90deg, var(--primary-color), var(--secondary-color));
transition: width 1s ease-in-out, background 0.3s ease;
position: relative;
overflow: hidden;
border-radius: 4px;
}

/* Efeito de brilho na barra de progresso */
.progress-bar::after {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: linear-gradient(
90deg,
rgba(255, 255, 255, 0) 0%,
rgba(255, 255, 255, 0.2) 50%,
rgba(255, 255, 255, 0) 100%
);
animation: progressShine 2s infinite;
transform: translateX(-100%);
}

@keyframes progressShine {
100% {
transform: translateX(100%);
}
}

/* Cores das barras de progresso baseadas no nível de uso */
.progress-bar.low-usage {
background: linear-gradient(90deg, #28a745, #20c997);
}

.progress-bar.medium-usage {
background: linear-gradient(90deg, #ffc107, #fd7e14);
}

.progress-bar.high-usage {
background: linear-gradient(90deg, #fd7e14, #dc3545);
}

/* Texto de porcentagem na barra de progresso */
.progress-percentage {
position: absolute;
right: 0;
top: -1.5rem;
font-size: 0.75rem;
color: rgba(255, 255, 255, 0.7);
font-weight: 500;
}

/* Badges */
.badge {
padding: 0.5em 0.8em;
font-weight: 600;
letter-spacing: 0.5px;
border-radius: 6px;
font-size: 0.75rem;
text-transform: uppercase;
}

.badge.bg-success {
background-color: rgba(40, 167, 69, 0.2) !important;
color: #28a745;
border: 1px solid rgba(40, 167, 69, 0.3);
}

.badge.bg-danger {
background-color: rgba(220, 53, 69, 0.2) !important;
color: #dc3545;
border: 1px solid rgba(220, 53, 69, 0.3);
}

.badge.bg-warning {
background-color: rgba(255, 193, 7, 0.2) !important;
color: #ffc107;
border: 1px solid rgba(255, 193, 7, 0.3);
}

/* Loading e estados vazios */
#loadingRow {
text-align: center;
padding: 3rem 1rem;
background: rgba(0, 0, 0, 0.1);
border-radius: 0 0 12px 12px;
}

#loadingRow .spinner-border {
width: 2.5rem;
height: 2.5rem;
border-width: 0.2em;
color: var(--accent-color);
}

#loadingRow p {
margin-top: 1rem;
color: rgba(255, 255, 255, 0.7);
font-size: 0.95rem;
animation: pulse 1.5s ease-in-out infinite;
}

/* Mensagem quando não há chaves */
#noKeysMessage {
text-align: center;
padding: 3rem 2rem;
background: rgba(0, 0, 0, 0.1);
border-radius: 12px;
margin: 1rem 0;
border: 1px dashed var(--border-color);
}

#noKeysMessage i {
font-size: 3rem;
margin-bottom: 1.5rem;
display: block;
color: var(--primary-color);
opacity: 0.5;
}

#noKeysMessage h4 {
margin-bottom: 1rem;
color: var(--text-color);
}

#noKeysMessage p {
color: var(--text-muted);
max-width: 500px;
margin: 0 auto 1.5rem;
}

/* Formulário de senha */
.password-prompt {
max-width: 600px;
margin: 2rem auto 3rem;
background: rgba(26, 26, 46, 0.7);
padding: 2rem;
border-radius: 12px;
border: 1px solid var(--border-color);
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
-webkit-backdrop-filter: blur(10px);
backdrop-filter: blur(10px);
}

.password-prompt h3 {
margin-bottom: 1.5rem;
color: var(--text-color);
font-weight: 600;
}

#adminPassword {
background-color: rgba(255, 255, 255, 0.05);
border: 1px solid var(--border-color);
color: var(--text-color);
padding: 1rem 1.25rem;
margin-bottom: 1.5rem;
width: 100%;
border-radius: 8px;
font-size: 1rem;
transition: all 0.3s ease;
}

#adminPassword:focus {
background-color: rgba(255, 255, 255, 0.08);
border-color: var(--primary-color);
box-shadow: 0 0 0 0.25rem rgba(255, 65, 108, 0.25);
outline: none;
}

#loadKeysBtn {
width: 100%;
padding: 1rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.5px;
transition: all 0.3s ease;
background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
border: none;
position: relative;
overflow: hidden;
color: white;
border-radius: 8px;
font-size: 1rem;
}

#loadKeysBtn:hover {
transform: translateY(-2px);
box-shadow: 0 8px 20px rgba(255, 65, 108, 0.4);
}

#loadKeysBtn:active {
transform: translateY(0);
}

/* Efeito de partículas */
#particles-js {
position: fixed;
width: 100%;
height: 100%;
top: 0;
left: 0;
z-index: 1;
pointer-events: none;
}

/* Responsividade */
@media (max-width: 991.98px) {
.container {
padding: 1.5rem 1rem;
}

.logo {
width: 100px;
height: 100px;
}

.logo-glow {
width: 120px;
height: 120px;
}

h1 {
font-size: 2.2rem;
}

.card-body {
padding: 1.25rem;
}
}

@media (max-width: 767.98px) {
#keysTable {
display: block;
width: 100%;
overflow-x: auto;
scroll-behavior: smooth;
-ms-overflow-style: -ms-autohiding-scrollbar;
}

/* Estilo da barra de rolagem para WebKit (Chrome, Safari, Edge) */
#keysTable::-webkit-scrollbar {
height: 8px;
}

#keysTable::-webkit-scrollbar-thumb {
background-color: rgba(255, 255, 255, 0.2);
border-radius: 4px;
}

#keysTable::-webkit-scrollbar-track {
background-color: rgba(0, 0, 0, 0.1);
}

#keysTable thead th,
#keysTable tbody td {
white-space: nowrap;
min-width: 120px;
padding: 1rem;
}

.key-cell {
min-width: 200px;
}

.password-prompt {
padding: 1.5rem;
margin: 1rem auto 2rem;
}
}

@media (max-width: 575.98px) {
h1 {
font-size: 1.8rem;
}

.logo {
width: 80px;
height: 80px;
}

.logo-glow {
width: 100px;
height: 100px;
}

.card-header h5 {
font-size: 1rem;
}

.btn {
padding: 0.6rem 1.25rem;
font-size: 0.8rem;
}

.password-prompt {
padding: 1.25rem;
}
}

#keysTable thead th {
background-color: var(--secondary-color);
color: white;
font-weight: 600;
text-transform: uppercase;
font-size: 0.75rem;
letter-spacing: 0.5px;
padding: 1rem;
border: none;
position: sticky;
top: 0;
z-index: 10;
}

#keysTable tbody tr {
transition: all 0.2s ease;
background-color: rgba(255, 255, 255, 0.02);
}

#keysTable tbody tr:hover {
background-color: rgba(255, 255, 255, 0.05);
transform: translateY(-1px);
}

#keysTable tbody td {
padding: 1rem;
vertical-align: middle;
border-top: 1px solid rgba(255, 255, 255, 0.05);
}

/* Célula da chave */
.key-cell {
position: relative;
min-width: 200px;
}

.key-text {
font-family: 'Fira Code', monospace;
letter-spacing: 0.5px;
font-size: 0.9rem;
color: #e9ecef;
font-weight: 500;
}

/* Botão de cópia */
.copy-key, .copy-btn {
opacity: 0.7;
transition: all 0.2s ease;
padding: 0.25rem;
line-height: 1;
background: none;
border: none;
color: #6c757d;
border-radius: 4px;
}

.copy-key:hover, .copy-btn:hover {
color: var(--accent-color);
background-color: rgba(255, 255, 255, 0.1);
opacity: 1;
}

tr:hover .copy-key, tr:hover .copy-btn {
opacity: 1;
}

.copy-key.copied, .copy-btn.copied {
color: #20c997;
opacity: 1;
}

/* Barra de progresso */
.progress {
height: 6px;
background-color: rgba(255, 255, 255, 0.1);
border-radius: 3px;
overflow: hidden;
margin-top: 0.5rem;
position: relative;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1) inset;
}

.progress-bar {
background: linear-gradient(90deg, var(--primary-color), var(--accent-color));
transition: width 1s ease-in-out, background 0.3s ease;
position: relative;
overflow: hidden;
}

/* Efeito de brilho na barra de progresso */
.progress-bar::after {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: linear-gradient(
90deg,
rgba(255, 255, 255, 0) 0%,
rgba(255, 255, 255, 0.2) 50%,
rgba(255, 255, 255, 0) 100%
);
animation: progressShine 2s infinite;
transform: translateX(-100%);
}

@keyframes progressShine {
100% {
transform: translateX(100%);
}
}

/* Cores das barras de progresso baseadas no nível de uso */
.progress-bar.low-usage {
background: linear-gradient(90deg, #28a745, #20c997);
}

.progress-bar.medium-usage {
background: linear-gradient(90deg, #ffc107, #fd7e14);
}

.progress-bar.high-usage {
background: linear-gradient(90deg, #fd7e14, #dc3545);
}

/* Texto de porcentagem na barra de progresso */
.progress-percentage {
position: absolute;
right: 0;
top: -1.25rem;
font-size: 0.7rem;
color: rgba(255, 255, 255, 0.6);
font-weight: 500;
}

/* Linha de carregamento */
#loadingRow {
text-align: center;
padding: 3rem 1rem;
background-color: rgba(0, 0, 0, 0.1);
border-radius: 0 0 8px 8px;
}

#loadingRow .spinner-border {
width: 2.5rem;
height: 2.5rem;
border-width: 0.2em;
color: var(--accent-color);
}

#loadingRow p {
margin-top: 1rem;
color: rgba(255, 255, 255, 0.7);
font-size: 0.95rem;
animation: pulse 1.5s ease-in-out infinite;
}

/* Efeito de pulso para o texto de carregamento */
@keyframes pulse {
0%, 100% { opacity: 0.6; }
50% { opacity: 1; }
}

/* Mensagem quando não há chaves */
#noKeysMessage {
text-align: center;
padding: 2rem;
background-color: rgba(0, 0, 0, 0.1);
border-radius: 8px;
margin-top: 1rem;
}

#noKeysMessage i {
font-size: 2rem;
margin-bottom: 1rem;
display: block;
color: var(--secondary-color);
opacity: 0.5;
}

/* Responsividade para a tabela */
@media (max-width: 767.98px) {
#keysTable {
display: block;
width: 100%;
overflow-x: auto;
scroll-behavior: smooth;
-ms-overflow-style: -ms-autohiding-scrollbar;
overscroll-behavior: contain;
}

/* Estilização da barra de rolagem para navegadores WebKit */
#keysTable::-webkit-scrollbar {
height: 8px;
}

#keysTable::-webkit-scrollbar-thumb {
background-color: rgba(255, 255, 255, 0.2);
border-radius: 4px;
}

#keysTable::-webkit-scrollbar-track {
background-color: rgba(0, 0, 0, 0.1);
}

#keysTable thead th,
#keysTable tbody td {
white-space: nowrap;
min-width: 100px;
padding: 0.75rem;
}

.key-cell {
min-width: 150px;
}
}

/* Melhorias para o formulário de senha */
.password-prompt {
max-width: 500px;
margin: 0 auto 2rem;
background: rgba(0, 0, 0, 0.2);
padding: 1.5rem;
border-radius: 8px;
border: 1px solid rgba(255, 255, 255, 0.1);
}

#adminPassword {
background-color: rgba(255, 255, 255, 0.05);
border: 1px solid rgba(255, 255, 255, 0.1);
color: #fff;
padding: 0.75rem 1rem;
margin-bottom: 1rem;
width: 100%;
}

#adminPassword:focus {
background-color: rgba(255, 255, 255, 0.08);
border-color: var(--accent-color);
box-shadow: 0 0 0 0.25rem rgba(255, 65, 108, 0.25);
}

.btn-primary {
background: linear-gradient(45deg, #ff416c, #ff4b2b);
border: none;
border-radius: 50px;
padding: 0.6rem 1.8rem;
font-weight: 600;
letter-spacing: 0.5px;
text-transform: uppercase;
font-size: 0.85rem;
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
box-shadow: 0 4px 15px rgba(255, 65, 108, 0.3);
position: relative;
overflow: hidden;
z-index: 1;
will-change: transform, box-shadow;
}

.btn-primary::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: linear-gradient(45deg, #ff4b2b, #ff416c);
z-index: -1;
opacity: 0;
transition: opacity 0.4s ease;
}

.btn-primary:hover {
transform: translateY(-3px) scale(1.02);
box-shadow: 0 8px 25px rgba(255, 65, 108, 0.5);
}

.btn-primary:hover::before {
opacity: 1;
}

.btn-primary:active {
transform: translateY(1px) scale(0.98);
box-shadow: 0 2px 10px rgba(255, 65, 108, 0.4);
}

/* Efeito de brilho ao passar o mouse */
.btn-primary::after {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(
90deg,
transparent,
rgba(255, 255, 255, 0.2),
transparent
);
transition: 0.5s;
}

.btn-primary:hover::after {
left: 100%;
}

#loadKeysBtn {
width: 100%;
padding: 0.75rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.5px;
transition: all 0.3s ease;
background: linear-gradient(135deg, var(--primary-color), var(--accent-color));
border: none;
position: relative;
overflow: hidden;
color: white;
}

#loadKeysBtn:hover {
transform: translateY(-2px);
box-shadow: 0 4px 15px rgba(255, 65, 108, 0.4);
}

#loadKeysBtn:active {
transform: translateY(0);
}

/* Efeito de brilho no hover do botão */
#loadKeysBtn::after {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(
90deg,
transparent,
rgba(255, 255, 255, 0.2),
transparent
);
transition: 0.5s;
}

#loadKeysBtn:hover::after {
left: 100%;
}

/* Temas customizados */
body.theme-blue {
--primary-color: #00c6ff;
--secondary-color: #0072ff;
--accent-color: #00c6ff;
--dark-bg: #0a192f;
--text-color: #e6f7ff;
--border-color: rgba(0, 198, 255, 0.2);
background: linear-gradient(-45deg, #0a192f, #0072ff, #00c6ff, #0a192f);
}
body.theme-green {
--primary-color: #00ff99;
--secondary-color: #00b86b;
--accent-color: #00ff99;
--dark-bg: #0a1f14;
--text-color: #e6fff2;
--border-color: rgba(0, 255, 153, 0.2);
background: linear-gradient(-45deg, #0a1f14, #00b86b, #00ff99, #0a1f14);
}
body.theme-purple {
--primary-color: #a259ff;
--secondary-color: #6a00f4;
--accent-color: #a259ff;
--dark-bg: #1a1026;
--text-color: #f3e6ff;
--border-color: rgba(162, 89, 255, 0.2);
background: linear-gradient(-45deg, #1a1026, #6a00f4, #a259ff, #1a1026);
}
body.theme-light {
--primary-color: #ff416c;
--secondary-color: #ff4b2b;
--accent-color: #ff416c;
--dark-bg: #f8f9fa;
--text-color: #222;
--border-color: rgba(0,0,0,0.08);
background: linear-gradient(-45deg, #fff, #f8f9fa, #ffe6ec, #fff);
}
body.theme-dark {
--primary-color: #ff416c;
--secondary-color: #ff4b2b;
--accent-color: #ff416c;
--dark-bg: #0f0f1a;
--text-color: #e6e6e6;
--border-color: rgba(255,255,255,0.1);
background: linear-gradient(-45deg, #1a1a2e, #16213e, #0f3460, #1a1a2e);
}

/* Glassmorphism para cards e modais */
.glass-card {
background: rgba(30, 34, 54, 0.7);
border-radius: 18px;
box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.18);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
border: 1px solid rgba(255,255,255,0.08);
transition: box-shadow 0.3s, border 0.3s;
}
.glass-card:hover {
box-shadow: 0 12px 40px 0 rgba(31, 38, 135, 0.28);
border: 1.5px solid var(--primary-color, #ff416c);
}

/* Botões com gradiente e animação */
.btn-gradient {
background: linear-gradient(90deg, var(--primary-color, #ff416c), var(--secondary-color, #ff4b2b));
color: #fff;
border: none;
transition: background 0.3s, box-shadow 0.3s;
box-shadow: 0 2px 8px rgba(255,65,108,0.12);
}
.btn-gradient:hover {
background: linear-gradient(90deg, var(--secondary-color, #ff4b2b), var(--primary-color, #ff416c));
box-shadow: 0 4px 16px rgba(255,65,108,0.22);
}

/* Rodapé moderno */
.footer-modern {
background: linear-gradient(90deg, #1a1a2e 0%, #ff416c 50%, #0f3460 100%);
border-radius: 18px 18px 0 0;
box-shadow: 0 -2px 24px 0 rgba(31, 38, 135, 0.12);
color: #fff;
margin-top: 4rem;
position: relative;
overflow: hidden;
}
.footer-brand img {
box-shadow: 0 2px 12px #ff416c55;
border-radius: 12px;
}
.footer-divider {
height: 2px;
width: 80px;
background: linear-gradient(90deg, transparent, #fff, transparent);
opacity: 0.2;
}
.footer-social {
gap: 1.2rem;
}
.footer-icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 44px;
height: 44px;
border-radius: 50%;
background: rgba(255,255,255,0.08);
color: #fff;
font-size: 1.5rem;
transition: background 0.3s, color 0.3s, transform 0.2s;
border: 1.5px solid rgba(255,255,255,0.12);
}
.footer-icon:hover {
background: linear-gradient(135deg, var(--primary-color, #ff416c), var(--secondary-color, #ff4b2b));
color: #fff;
transform: translateY(-4px) scale(1.12);
box-shadow: 0 4px 16px rgba(255,65,108,0.18);
border-color: transparent;
}

/* Título com gradiente */
.text-gradient {
background: linear-gradient(90deg, var(--primary-color, #ff416c), var(--secondary-color, #ff4b2b));
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
/* text-fill-color: transparent; */
}
.highlight {
color: var(--primary-color, #ff416c);
}

/* Feature icon glass */
.feature-icon {
width: 64px;
height: 64px;
border-radius: 16px;
background: rgba(255,255,255,0.08);
display: flex;
align-items: center;
justify-content: center;
font-size: 2.2rem;
color: var(--primary-color, #ff416c);
box-shadow: 0 2px 8px rgba(255,65,108,0.08);
margin-bottom: 0.5rem;
transition: background 0.3s, color 0.3s;
}
.glass-card:hover .feature-icon {
background: linear-gradient(135deg, var(--primary-color, #ff416c), var(--secondary-color, #ff4b2b));
color: #fff;
}

/* Responsividade */
@media (max-width: 991.98px) {
.glass-card { padding: 1.2rem; }
.footer-modern { border-radius: 12px 12px 0 0; }
}
@media (max-width: 767.98px) {
.glass-card { padding: 0.7rem; }
.footer-modern { border-radius: 8px 8px 0 0; }
.footer-icon { width: 38px; height: 38px; font-size: 1.2rem; }
}

/* Transição de tema suave */
body, .glass-card, .footer-modern {
transition: background 0.5s, color 0.5s, box-shadow 0.5s;
}

/* Novo rodapé glass com SVGs sociais */
.footer-svg-glass {
position: static;
width: 100vw;
background: transparent !important;
box-shadow: 0 -2px 24px 0 rgba(255, 182, 193, 0.18);
backdrop-filter: blur(18px);
-webkit-backdrop-filter: blur(18px);
border-top: 2.5px solid #ffd6e0;
padding: 2.2rem 0 1.2rem 0;
display: flex;
justify-content: center;
align-items: flex-end;
pointer-events: auto;
border-radius: 32px 32px 0 0;
margin-top: 3rem;
min-height: 140px;
}

/* Sugestão: adicionar ao seu container principal para evitar sobreposição do rodapé */
.main-content {
padding-bottom: 120px; /* altura aproximada do rodapé */
}

.footer-svg-container {
width: 100%;
max-width: 700px;
margin: 0 auto;
display: flex;
flex-direction: column;
align-items: center;
}
.footer-svg-brand img {
box-shadow: 0 2px 12px #ffb6c155;
border-radius: 16px;
}
.footer-svg-social {
display: flex;
gap: 2.2rem;
margin-bottom: 0.7rem;
flex-wrap: wrap;
justify-content: center;
}
.footer-svg-icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 52px;
height: 52px;
border-radius: 50%;
background: rgba(255,255,255,0.18);
box-shadow: 0 2px 8px 0 rgba(255,182,193,0.12);
transition: box-shadow 0.3s, transform 0.2s, background 0.3s;
position: relative;
overflow: hidden;
}
.footer-svg-icon:hover {
box-shadow: 0 4px 16px 0 rgba(255,182,193,0.22);
transform: translateY(-4px) scale(1.10);
background: linear-gradient(135deg, #ffe0ec 0%, #e0f7fa 100%);
}
.footer-svg-icon svg {
width: 34px;
height: 34px;
display: block;
}
.footer-svg-divider {
width: 80%;
height: 2px;
background: linear-gradient(90deg, transparent, #ffb6c1, transparent);
margin: 0.7rem auto 1.2rem auto;
border-radius: 1px;
box-shadow: 0 0 10px 1px rgba(255, 182, 193, 0.18);
}
.footer-svg-copy {
color: #a14a6c;
font-size: 1.08rem;
font-weight: 600;
letter-spacing: 0.01em;
text-align: center;
text-shadow: 0 1px 8px #fff8, 0 0px 1px #fff;
background: rgba(255,255,255,0.55);
border-radius: 12px;
padding: 0.5em 1.2em;
margin-top: 0.5em;
box-shadow: 0 1px 8px 0 #fff3;
display: inline-block;
}
@media (max-width: 600px) {
.footer-svg-social {
gap: 1.1rem;
}
.footer-svg-icon {
width: 38px;
height: 38px;
}
.footer-svg-brand img {
width: 30px;
height: 30px;
}
.footer-svg-copy {
font-size: 0.95rem;
padding: 0.4em 0.7em;
}
.footer-svg-glass {
padding-left: 24px !important;
padding-right: 8px !important;
}
.footer-svg-container {
padding-left: 0.5rem !important;
padding-right: 0.5rem !important;
}
.footer-svg-brand img {
margin-left: 8px !important;
}
}

#particles-bg {
position: fixed;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
z-index: 0;
pointer-events: none;
overflow: hidden;
}
#particles-bg .bubble {
position: absolute;
border-radius: 50%;
background: rgba(255,255,255,0.18);
box-shadow: 0 2px 12px 0 rgba(255,182,193,0.10);
animation: floatBubble 16s linear infinite;
opacity: 0.7;
}
@keyframes floatBubble {
0% { transform: translateY(100vh) scale(1); opacity: 0.7; }
80% { opacity: 0.8; }
100% { transform: translateY(-10vh) scale(1.2); opacity: 0; }
}

/* Temas: variáveis para cada tema */
body.theme-light {
--bg-gradient: linear-gradient(135deg, #fffbe6 0%, #e0f7fa 100%);
--card-bg: rgba(255,255,255,0.85);
--text-color: #222;
--footer-bg: rgba(255,255,255,0.55);
--bubble-color: rgba(255,255,255,0.18);
}
body.theme-dark {
--bg-gradient: linear-gradient(135deg, #23243a 0%, #1a1a2e 100%);
--card-bg: rgba(30,34,54,0.7);
--text-color: #e6e6e6;
--footer-bg: rgba(30,34,54,0.55);
--bubble-color: rgba(255,255,255,0.10);
}
body.theme-blue {
--bg-gradient: linear-gradient(135deg, #e0f7fa 0%, #00c6ff 100%);
--card-bg: rgba(0,198,255,0.13);
--text-color: #0a192f;
--footer-bg: rgba(0,198,255,0.12);
--bubble-color: rgba(0,198,255,0.13);
}
body.theme-green {
--bg-gradient: linear-gradient(135deg, #e0ffe6 0%, #00ff99 100%);
--card-bg: rgba(0,255,153,0.13);
--text-color: #0a1f14;
--footer-bg: rgba(0,255,153,0.12);
--bubble-color: rgba(0,255,153,0.13);
}
body.theme-purple {
--bg-gradient: linear-gradient(135deg, #f3e6ff 0%, #a259ff 100%);
--card-bg: rgba(162,89,255,0.13);
--text-color: #2d1a3a;
--footer-bg: rgba(162,89,255,0.12);
--bubble-color: rgba(162,89,255,0.13);
}

body {
min-height: 100vh;
background: var(--bg-gradient, linear-gradient(135deg, #ffe0ec 0%, #e0f7fa 100%));
background-attachment: fixed;
transition: background 0.7s cubic-bezier(.4,0,.2,1);
color: var(--text-color, #222);
}

.footer-svg-glass {
background: var(--footer-bg, transparent) !important;
}

.card, .glass-card {
background: var(--card-bg, rgba(255,255,255,0.85));
color: var(--text-color, #222);
}

#particles-bg .bubble {
background: var(--bubble-color, rgba(255,255,255,0.18));
}

/* Validação visual dos campos obrigatórios dos modais */
.form-control.is-invalid, .was-validated .form-control:invalid {
border-color: #ff3860 !important;
box-shadow: 0 0 0 0.2rem rgba(255,56,96,0.25) !important;
background-color: rgba(255, 56, 96, 0.08) !important;
}
.invalid-feedback {
color: #ff3860;
font-size: 0.92em;
margin-top: 0.25rem;
display: block;
}

/* Tooltips Bootstrap customizados */
.tooltip-inner {
background-color: #23243a !important;
color: #fff !important;
font-size: 0.95em;
border-radius: 6px;
padding: 0.5em 1em;
box-shadow: 0 2px 8px rgba(255,65,108,0.10);
}
.tooltip.bs-tooltip-auto[x-placement^=top] .arrow::before,
.tooltip.bs-tooltip-top .arrow::before {
border-top-color: #23243a !important;
}

/* Responsividade dos modais para mobile */
@media (max-width: 575.98px) {
.modal-dialog {
margin: 1.2rem auto;
max-width: 98vw;
}
.modal-content {
padding: 0.5rem;
}
.modal-body {
padding: 1rem;
}
}

/* Espaçamento do ícone de interrogação nos labels */
.form-label .bi-question-circle-fill {
margin-left: 0.35em;
cursor: pointer;
vertical-align: middle;
}