:root {
    --bg-dark: #100C00; 
    --bg-deep: #2A1F00; 
    --card-bg: rgba(18, 11, 0, 0.85);
    --primary-start: #FFD700; 
    --primary-end: #D4AF37;
    --neon-blue: #B8860B; /* Trocado de azul para um dourado médio para os reflexos do fundo */
    --text-main: #FFFFFF;
    --text-muted: #C4A97A;
    --border-glass: rgba(200, 146, 10, 0.15); 
    --input-bg: rgba(200, 146, 10, 0.03);
}
/* RESET E TRAVA DE TELA */
*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    width: 100%;
    overflow-x: hidden; /* Impede vazamento horizontal */
}

body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
    background: radial-gradient(circle at top right, var(--bg-deep) 0%, var(--bg-dark) 80%);
    color: var(--text-main);
    min-height: 100vh;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 20px; /* Agora com o box-sizing, isso não quebra o layout */
    position: relative;
    overflow-x: hidden;
}

/* Luzes de fundo extremamente sutis */
.abstract-glow-1, .abstract-glow-2 {
    position: absolute;
    border-radius: 50%;
    filter: blur(120px);
    opacity: 0.05;
    z-index: 1;
    pointer-events: none;
}
.abstract-glow-1 { width: 400px; height: 400px; background: var(--primary-start); top: -100px; left: -100px; }
.abstract-glow-2 { width: 450px; height: 450px; background: var(--neon-blue); bottom: -150px; right: -150px; }

.main-wrapper {
    z-index: 10; 
    width: 100%;
    max-width: 460px; /* Controlamos a largura máxima aqui no wrapper */
    display: flex;
    justify-content: center;
    align-items: center; 
    margin: 0 auto;
}

/* Card Harmonioso e Premium */
.glass-card, #tela-upload {
    background: var(--card-bg);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid var(--border-glass);
    border-radius: 32px;
    padding: 50px 40px;
    width: 100%;
    box-shadow: 0 30px 60px rgba(0, 0, 0, 0.7), inset 0 1px 0 rgba(255, 255, 255, 0.05);
    text-align: center;
}

/* Glow atrás da logo */
.logo-container { margin-bottom: 35px; position: relative; display: inline-block; }
.logo-container::after {
    content: ''; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
    width: 80%; height: 80%; background: var(--primary-start); filter: blur(50px); opacity: 0.08; z-index: -1;
}
.app-logo { max-width: 150px; height: auto; display: block; margin: 0 auto; }

h2 { font-size: 26px; margin: 0 0 12px 0; font-weight: 700; letter-spacing: -0.5px; }
p { color: var(--text-muted); font-size: 15px; line-height: 1.6; margin-bottom: 35px; }

/* Botão Estilo App (Pílula) */
.btn-gradient, button {
    background: linear-gradient(135deg, var(--primary-start) 0%, var(--primary-end) 100%);
    color: #1a1100;
    font-weight: 700;
    letter-spacing: 0.5px;
    border: none;
    padding: 18px;
    width: 100%;
    border-radius: 50px; 
    font-size: 16px;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 8px 20px rgba(242, 186, 19, 0.2);
}
.btn-gradient:hover, button:hover {
    box-shadow: 0 12px 25px rgba(242, 186, 19, 0.35);
    transform: translateY(-3px);
}

/* Dropzone Harmoniosa */
.drop-zone, .form-group {
    border: 2px dashed rgba(255, 255, 255, 0.12);
    border-radius: 24px;
    padding: 40px 20px;
    background: var(--input-bg); 
    margin-bottom: 30px;
    transition: all 0.3s ease;
    text-align: center;
    cursor: pointer;
}
.drop-zone:hover, .form-group:hover { 
    border-color: rgba(242, 186, 19, 0.6); 
    background: rgba(242, 186, 19, 0.03); 
}

.drop-zone__prompt {
    font-weight: 500;
    color: var(--text-muted);
}

input[type="file"] { display: none; } 

#tela-loading { display: none; flex-direction: column; align-items: center; justify-content: center; min-height: 380px; }
.pulsing { animation: pulseLogo 2s infinite cubic-bezier(0.4, 0, 0.2, 1); }
@keyframes pulseLogo { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.6; transform: scale(0.92); } }

@media (max-width: 480px) {
    body { padding: 15px; }
    .glass-card, #tela-upload { padding: 40px 25px; border-radius: 28px; }
}
/* Efeito Premium de Escaneamento da IA */
.logo-scanner-container {
    position: relative;
    display: inline-block;
    padding: 10px;
}

.logo-scanner-container::after {
    content: '';
    position: absolute;
    top: 0;
    left: -10%;
    width: 120%;
    height: 3px;
    background: linear-gradient(90deg, transparent, #D4AF37, #FFFFFF, #D4AF37, transparent);
    box-shadow: 0 0 15px 4px rgba(212, 175, 55, 0.5);
    animation: scanLaser 1.8s ease-in-out infinite alternate;
    z-index: 10;
    border-radius: 50%;
}

@keyframes scanLaser {
    0% { top: 0; opacity: 0; transform: scaleX(0.8); }
    10% { opacity: 1; }
    90% { opacity: 1; }
    100% { top: 100%; opacity: 0; transform: scaleX(1.1); }
}