:root {
    --radius: 16px;
    --shadow: 0 20px 60px rgba(0, 0, 0, .35);
    --text-2-rgb: 184, 193, 217;
    --brand-rgb: 122, 162, 255;
}

/* Paleta DARK (padrão) */
body.theme-dark {
    --bg: #0b0f1a;
    --bg-accent: #182032;
    --card: rgba(255, 255, 255, .06);
    --card-border: rgba(255, 255, 255, .08);
    --text-1: #e8edf7;
    --text-2: #b8c1d9;
    --brand: #7aa2ff;
    --brand-rgb: 122, 162, 255;
    --shadow: 0 20px 60px rgba(0, 0, 0, .35);
}

/* Paleta LIGHT */
body.theme-light {
    --bg: #f6f8fc;
    --bg-accent: #e9eef8;
    --card: #fff;
    --card-border: #e6eaf3;
    --text-1: #111827;
    --text-2: #6b7280;
    --brand: #3b82f6;
    --brand-rgb: 59, 130, 246;
    --shadow: 0 18px 40px rgba(16, 24, 40, .10);
}

html, body {
    margin: 0;
    padding: 0;
}

/* Fundo e tipografia usam as variáveis do tema */
.auth-wrap {
    min-height: 100vh;
    padding: 0 !important;
    background: radial-gradient(1200px 600px at 10% -10%, var(--bg-accent) 0%, transparent 60%),
    radial-gradient(900px 500px at 110% 10%, var(--bg-accent) 0%, transparent 60%),
    linear-gradient(180deg, var(--bg) 0%, var(--bg) 100%);
    color: var(--text-1);
}

.auth-card {
    width: 100%;
    max-width: 420px;
    border-radius: var(--radius);
    background: var(--card);
    border: 1px solid var(--card-border);
    box-shadow: var(--shadow);
    backdrop-filter: blur(10px);
}

.auth-logo {
    width: 10rem;
    filter: drop-shadow(0 6px 24px rgba(0, 0, 0, .25));
}

.helper {
    color: var(--text-2);
    font-size: .9rem;
}

.p-button.p-button-lg {
    padding: 1rem 1.25rem;
    font-weight: 600;
    border-radius: 999px;
}

.float-label-icon {
    position: relative;
    display: block;
}

.float-label-icon > i.pi:first-of-type {
    position: absolute;
    top: 50%;
    left: .75rem;
    transform: translateY(-50%);
    font-size: 1rem;
    color: var(--brand);
    opacity: .9;
    z-index: 2;
}

.float-label-icon > input, .float-label-icon .p-inputtext {
    width: 100%;
    height: 42px;
    box-sizing: border-box;
    padding-left: 2.5rem !important;
    padding-right: 2.5rem !important;
}

.float-label-icon > label {
    position: absolute;
    left: 2.5rem;
    top: 50%;
    transform: translateY(-50%);
    transition: all .18s ease;
    pointer-events: none;
    opacity: .85;
}

.float-label-icon:focus-within > label,
.float-label-icon > input:not(:placeholder-shown) ~ label,
.float-label-icon .p-inputtext:not(:placeholder-shown) ~ label {
    top: .15rem;
    transform: translateY(-100%);
    font-size: .75rem;
    opacity: .9;
}

.pwd-toggle {
    position: absolute;
    top: 50%;
    right: .75rem;
    transform: translateY(-50%);
    font-size: 1rem;
    cursor: pointer;
    opacity: .9;
    z-index: 2;
    color: var(--brand);
}

/* Logo por tema (já funcionava) */
.app-brand .app-logo {
    display: none;
    object-fit: contain;
}

.theme-light .app-brand .logo-light {
    display: block;
}

.theme-dark .app-brand .logo-dark {
    display: block;
}
