.auth-body {
    margin: 0;
    min-height: 100vh;
    background: #020102;
    color: #fff;
    font-family: Inter, system-ui, sans-serif;
    overflow-x: hidden;
    overflow-y: auto;
}
.auth-svgs {
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    color: rgba(188, 0, 0, 0.18);
}
.svg-float {
    position: absolute;
    width: 110px;
    opacity: 0.9;
    animation: drift 16s ease-in-out infinite;
}
.svg-float text {
    fill: currentColor;
    font-size: 9px;
    letter-spacing: 0.18em;
    font-family: Inter, sans-serif;
}
.s1 { top: 8%; left: 6%; animation-delay: 0s; }
.s2 { top: 18%; left: 28%; width: 90px; animation-delay: -3s; }
.s3 { bottom: 28%; left: 10%; animation-delay: -6s; }
.s4 { top: 12%; left: 42%; width: 80px; animation-delay: -2s; }
.s5 { bottom: 34%; left: 34%; width: 95px; animation-delay: -8s; }
.s6 { top: 42%; left: 18%; width: 48px; animation-delay: -4s; }
.s7 { top: 52%; left: 40%; width: 56px; animation-delay: -7s; }
@keyframes drift {
    0%, 100% { transform: translateY(0) rotate(-2deg); }
    50% { transform: translateY(-14px) rotate(3deg); }
}
.auth-fire {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    height: 42vh;
    width: 100%;
    z-index: 1;
    pointer-events: none;
}
.auth-split {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: 1fr 1fr;
    min-height: 100vh;
}
.auth-brand {
    display: flex;
    align-items: center;
    padding: 4rem 5rem;
    background: linear-gradient(180deg, rgba(2,1,2,.35) 0%, rgba(2,1,2,.72) 70%, rgba(2,1,2,.92) 100%);
}
.auth-brand-inner { max-width: 420px; }
.fenix-logo { width: 240px; height: auto; margin-bottom: 2rem; }
.auth-kicker {
    color: #bc0000;
    letter-spacing: .32em;
    text-transform: uppercase;
    font-size: .72rem;
    font-weight: 600;
    margin: 0 0 1rem;
}
.auth-brand h1 {
    font-family: "Playfair Display", Georgia, serif;
    font-size: 3.2rem;
    line-height: 1.1;
    margin: 0 0 1.1rem;
}
.chrome {
    background: linear-gradient(135deg, #e8e8e8 0%, silver 25%, #fff 50%, #a8a8a8 75%, #d8d8d8 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}
.auth-welcome {
    color: #9ca3af;
    font-size: 1.05rem;
    line-height: 1.7;
    margin: 0;
}
.auth-panel {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 3rem;
    background: rgba(10, 9, 10, 0.72);
    border-left: 1px solid rgba(188, 0, 0, 0.22);
    backdrop-filter: blur(16px);
}
.auth-card {
    width: 100%;
    max-width: 420px;
}
.auth-card h2 {
    font-family: "Playfair Display", Georgia, serif;
    font-size: 2rem;
    margin: 0 0 .4rem;
}
.auth-card .sub {
    color: #9ca3af;
    margin: 0 0 1.75rem;
    font-size: .95rem;
}
.field { margin-bottom: 1rem; }
.field label {
    display: block;
    font-size: .72rem;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: #9ca3af;
    margin-bottom: .45rem;
}
.field input {
    width: 100%;
    box-sizing: border-box;
    background: rgba(0,0,0,.45);
    border: 1px solid #374151;
    color: #fff;
    border-radius: .85rem;
    padding: .85rem 1rem;
    font: inherit;
    outline: none;
}
.field input:focus { border-color: #bc0000; }
.remember {
    display: flex;
    align-items: center;
    gap: .55rem;
    color: #d1d5db;
    font-size: .9rem;
    margin: .4rem 0 1.2rem;
}
.btn-fenix {
    width: 100%;
    border: 0;
    cursor: pointer;
    background: #bc0000;
    color: #fff;
    font-weight: 700;
    border-radius: 999px;
    padding: .95rem 1.2rem;
    font-size: .95rem;
    transition: background .2s;
}
.btn-fenix:hover { background: #960000; }
.auth-switch {
    text-align: center;
    margin-top: 1.25rem;
    color: #9ca3af;
    font-size: .9rem;
}
.auth-switch a { color: #bc0000; text-decoration: none; font-weight: 600; }
.error {
    background: rgba(188,0,0,.12);
    border: 1px solid rgba(188,0,0,.35);
    color: #fca5a5;
    padding: .75rem 1rem;
    border-radius: .75rem;
    margin-bottom: 1rem;
    font-size: .88rem;
}
@media (max-width: 900px) {
    .auth-split { grid-template-columns: 1fr; }
    .auth-brand { padding: 3rem 1.5rem 1rem; min-height: auto; }
    .auth-brand h1 { font-size: 2.3rem; }
    .auth-panel { border-left: 0; border-top: 1px solid rgba(188,0,0,.22); padding: 1.5rem; }
    .s4, .s5, .s2 { display: none; }
}