:root {
    --login-bg: #050a14;
    --login-text: #f8fafc;
    --login-muted: #94a3b8;
    --login-accent: #3b82f6;
    --login-accent-soft: #60a5fa;
    --login-glow: rgba(59, 130, 246, 0.65);
}

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

html {
    height: 100%;
}

.login-body {
    height: 100dvh;
    max-height: 100dvh;
    overflow: hidden;
    font-family: 'Inter', system-ui, sans-serif;
    color: var(--login-text);
    background: var(--login-bg);
}

.login-page {
    position: relative;
    width: 100%;
    height: 100dvh;
    max-height: 100dvh;
    overflow: hidden;
    background: var(--login-bg);
}

/* ===== Arte completa: topo à base do navegador ===== */
.login-art {
    position: fixed;
    inset: 0;
    z-index: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
}

.login-art__img {
    display: block;
    height: 100dvh;
    width: auto;
    max-width: 100vw;
    max-height: 100dvh;
    object-fit: contain;
    object-position: center center;
    opacity: 0;
    transform: scale(0.92) translateY(24px);
    filter: brightness(0.2) blur(8px);
    animation: heroReveal 1.6s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes heroReveal {
    0% {
        opacity: 0;
        transform: scale(0.92) translateY(24px);
        filter: brightness(0.2) blur(8px);
    }
    45% {
        opacity: 1;
        filter: brightness(0.7) blur(2px);
    }
    100% {
        opacity: 1;
        transform: scale(1) translateY(0);
        filter: brightness(1) blur(0);
    }
}

/* ===== Efeitos visíveis ===== */
.login-fx {
    position: fixed;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    overflow: hidden;
}

.login-fx__flash {
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 50% 40%, rgba(96, 165, 250, 0.45), transparent 55%);
    opacity: 0;
    animation: flashIn 0.9s ease-out forwards;
}

@keyframes flashIn {
    0% { opacity: 0; }
    20% { opacity: 1; }
    100% { opacity: 0; }
}

.login-fx__circuits {
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(59, 130, 246, 0.09) 1px, transparent 1px),
        linear-gradient(90deg, rgba(59, 130, 246, 0.09) 1px, transparent 1px);
    background-size: 56px 56px;
    background-position: 0 0;
    mask-image: radial-gradient(ellipse 75% 65% at 50% 42%, black 20%, transparent 75%);
    opacity: 0;
    animation:
        circuitsFade 1.2s ease 0.3s forwards,
        circuitsMove 18s linear 1.5s infinite;
}

@keyframes circuitsFade {
    from { opacity: 0; }
    to { opacity: 0.75; }
}

@keyframes circuitsMove {
    from { background-position: 0 0; }
    to { background-position: 56px 56px; }
}

.login-fx__rings {
    position: absolute;
    left: 50%;
    bottom: clamp(40px, 7vh, 80px);
    width: min(520px, 90vw);
    height: min(520px, 90vw);
    transform: translate(-50%, 38%);
}

.login-fx__rings span {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    border: 1px solid rgba(96, 165, 250, 0.35);
    opacity: 0;
    animation: ringExpand 2.8s ease-out infinite;
}

.login-fx__rings span:nth-child(1) { animation-delay: 0.6s; }
.login-fx__rings span:nth-child(2) { animation-delay: 1.4s; }
.login-fx__rings span:nth-child(3) { animation-delay: 2.2s; }

@keyframes ringExpand {
    0% {
        opacity: 0;
        transform: scale(0.35);
    }
    15% {
        opacity: 0.85;
    }
    100% {
        opacity: 0;
        transform: scale(1.15);
    }
}

.login-fx__particles i {
    position: absolute;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: #93c5fd;
    box-shadow: 0 0 8px #60a5fa, 0 0 16px rgba(59, 130, 246, 0.6);
    opacity: 0;
    animation: particleFloat 4s ease-in-out infinite;
}

.login-fx__particles i:nth-child(1)  { left: 12%; top: 72%; animation-delay: 0.2s; }
.login-fx__particles i:nth-child(2)  { left: 22%; top: 58%; animation-delay: 0.7s; width: 3px; height: 3px; }
.login-fx__particles i:nth-child(3)  { left: 35%; top: 80%; animation-delay: 1.1s; }
.login-fx__particles i:nth-child(4)  { left: 48%; top: 65%; animation-delay: 0.4s; width: 5px; height: 5px; }
.login-fx__particles i:nth-child(5)  { left: 58%; top: 78%; animation-delay: 1.6s; }
.login-fx__particles i:nth-child(6)  { left: 68%; top: 60%; animation-delay: 0.9s; width: 3px; height: 3px; }
.login-fx__particles i:nth-child(7)  { left: 78%; top: 74%; animation-delay: 1.3s; }
.login-fx__particles i:nth-child(8)  { left: 88%; top: 68%; animation-delay: 0.5s; }
.login-fx__particles i:nth-child(9)  { left: 18%; top: 48%; animation-delay: 2s; width: 2px; height: 2px; }
.login-fx__particles i:nth-child(10) { left: 82%; top: 52%; animation-delay: 1.8s; width: 2px; height: 2px; }

@keyframes particleFloat {
    0%, 100% {
        opacity: 0;
        transform: translateY(0) scale(0.6);
    }
    20%, 80% {
        opacity: 1;
    }
    50% {
        transform: translateY(-28px) scale(1);
    }
}

.login-fx__scan {
    position: absolute;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, transparent, rgba(147, 197, 253, 0.15), #60a5fa, rgba(147, 197, 253, 0.15), transparent);
    box-shadow: 0 0 24px #3b82f6, 0 0 48px rgba(59, 130, 246, 0.5);
    top: -4px;
    opacity: 0;
    animation: scanSweep 2.2s ease-in-out 0.5s 2;
}

@keyframes scanSweep {
    0% { top: -4px; opacity: 0; }
    8% { opacity: 1; }
    92% { opacity: 1; }
    100% { top: 100%; opacity: 0; }
}

/* ===== Formulário no vão entre a tagline e a fileira de ícones ===== */
.login-stage {
    position: fixed;
    left: 0;
    right: 0;
    top: 54%;
    transform: translateY(-50%);
    z-index: 10;
    display: flex;
    justify-content: center;
    padding:
        0
        max(12px, env(safe-area-inset-right))
        max(8px, env(safe-area-inset-bottom))
        max(12px, env(safe-area-inset-left));
}

.login-platform {
    position: relative;
    width: min(660px, 96vw);
}

.login-platform__glow {
    position: absolute;
    left: 50%;
    bottom: -8px;
    width: 70%;
    height: 28px;
    transform: translateX(-50%);
    border-radius: 50%;
    background: radial-gradient(ellipse, var(--login-glow), transparent 72%);
    opacity: 0;
    animation: glowPulse 2.8s ease-in-out 1s infinite;
}

@keyframes glowPulse {
    0%, 100% { opacity: 0.5; transform: translateX(-50%) scaleX(0.95); }
    50% { opacity: 1; transform: translateX(-50%) scaleX(1.08); }
}

.login-platform__card {
    position: relative;
    padding: 14px 18px 16px;
    border-radius: 16px;
    background: rgba(4, 8, 22, 0.72);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    opacity: 0;
    transform: translateY(48px);
    animation: cardRise 0.9s cubic-bezier(0.16, 1, 0.3, 1) 0.55s forwards;
}

.login-platform__card::before {
    content: '';
    position: absolute;
    inset: -1px;
    border-radius: inherit;
    padding: 1px;
    background: linear-gradient(
        120deg,
        rgba(59, 130, 246, 0.1),
        rgba(96, 165, 250, 0.85),
        rgba(59, 130, 246, 0.1)
    );
    background-size: 200% 200%;
    animation: borderShimmer 3s linear infinite;
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    pointer-events: none;
}

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

@keyframes cardRise {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.login-platform__card::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: radial-gradient(ellipse at 50% 0%, rgba(59, 130, 246, 0.16), transparent 62%);
    pointer-events: none;
}

.login-platform__label {
    position: relative;
    z-index: 1;
    margin-bottom: 10px;
    font-family: 'Orbitron', sans-serif;
    font-size: 0.68rem;
    font-weight: 600;
    letter-spacing: 0.26em;
    text-transform: uppercase;
    text-align: center;
    color: var(--login-accent-soft);
    text-shadow: 0 0 12px rgba(96, 165, 250, 0.6);
    max-height: 0;
    opacity: 0;
    overflow: hidden;
    transition: max-height 0.35s ease, opacity 0.25s ease, margin-bottom 0.35s ease;
}

.login-platform:hover .login-platform__label,
.login-platform:focus-within .login-platform__label {
    max-height: 40px;
    opacity: 1;
}

.login-alerts {
    position: relative;
    z-index: 1;
    display: grid;
    gap: 8px;
    max-height: 0;
    opacity: 0;
    margin-bottom: 0;
    overflow: hidden;
    transition: max-height 0.35s ease, opacity 0.25s ease, margin-bottom 0.35s ease;
}

.login-platform:hover .login-alerts,
.login-platform:focus-within .login-alerts,
.login-platform--alert-open .login-alerts {
    max-height: 160px;
    opacity: 1;
    margin-bottom: 8px;
}

.login-alert {
    padding: 8px 10px;
    border-radius: 8px;
    font-size: 0.8rem;
    line-height: 1.35;
}

.login-alert--error,
.login-alert--danger {
    background: rgba(239, 68, 68, 0.14);
    border: 1px solid rgba(239, 68, 68, 0.35);
    color: #fecaca;
}

.login-alert--success {
    background: rgba(16, 185, 129, 0.14);
    border: 1px solid rgba(16, 185, 129, 0.35);
    color: #a7f3d0;
}

.login-form {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: 1fr 1fr auto;
    gap: 10px;
    align-items: end;
}

.login-field {
    display: grid;
    gap: 4px;
    opacity: 0;
    transform: translateY(20px);
    animation: fadeUp 0.55s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.login-field--user { animation-delay: 0.95s; }
.login-field--pass { animation-delay: 1.05s; }

.login-submit {
    opacity: 0;
    transform: translateY(20px);
    animation: fadeUp 0.55s cubic-bezier(0.16, 1, 0.3, 1) 1.15s forwards;
}

@keyframes fadeUp {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.login-field > span {
    font-size: 0.66rem;
    font-weight: 600;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: var(--login-muted);
}

.login-field__control {
    position: relative;
}

.login-field__control i {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--login-accent-soft);
    font-size: 0.86rem;
    pointer-events: none;
}

.login-field__control input {
    width: 100%;
    height: 40px;
    padding: 0 10px 0 36px;
    border-radius: 10px;
    border: 1px solid rgba(96, 165, 250, 0.32);
    background: rgba(0, 0, 0, 0.5);
    color: var(--login-text);
    font: inherit;
    font-size: 0.88rem;
    outline: none;
    transition: border-color 0.25s, box-shadow 0.25s;
}

.login-field__control input:focus {
    border-color: rgba(96, 165, 250, 0.75);
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.22), 0 0 18px rgba(59, 130, 246, 0.25);
    animation: inputPulse 1.8s ease-in-out infinite;
}

@keyframes inputPulse {
    0%, 100% { box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.22), 0 0 14px rgba(59, 130, 246, 0.2); }
    50% { box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.32), 0 0 22px rgba(59, 130, 246, 0.4); }
}

.login-field__control input::placeholder {
    color: rgba(148, 163, 184, 0.55);
}

.login-submit {
    height: 40px;
    padding: 0 20px;
    border: none;
    border-radius: 10px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-family: 'Orbitron', sans-serif;
    font-size: 0.76rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    white-space: nowrap;
    color: #fff;
    background: linear-gradient(135deg, #2563eb, #1d4ed8);
    box-shadow: 0 6px 22px rgba(37, 99, 235, 0.5), 0 0 20px rgba(59, 130, 246, 0.3);
    transition: transform 0.2s, box-shadow 0.2s;
}

.login-submit:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 28px rgba(37, 99, 235, 0.55), 0 0 28px rgba(59, 130, 246, 0.4);
}

.login-submit.is-loading { pointer-events: none; opacity: 0.92; }

.login-submit.is-ok {
    background: linear-gradient(135deg, #059669, #047857);
    box-shadow: 0 6px 22px rgba(16, 185, 129, 0.4);
}

/* ===== Mobile: arte ancorada no topo ===== */
@media (max-width: 720px) {
    .login-art {
        align-items: flex-start;
        justify-content: center;
        padding-top: max(0px, env(safe-area-inset-top));
    }

    .login-art__img {
        width: 100vw;
        height: auto;
        max-width: 100vw;
        max-height: none;
        object-fit: contain;
        object-position: top center;
    }

    .login-fx__circuits {
        mask-image: radial-gradient(ellipse 90% 55% at 50% 28%, black 15%, transparent 72%);
    }

    .login-stage {
        top: calc(100vw * 0.256);
        transform: none;
    }

    .login-form {
        grid-template-columns: 1fr;
        gap: 8px;
    }

    .login-submit {
        width: 100%;
    }

    .login-platform__card {
        padding: 12px 14px 14px;
    }
}

@media (max-width: 720px) and (max-height: 640px) {
    .login-field__control input,
    .login-submit {
        height: 36px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .login-art__img,
    .login-fx__flash,
    .login-fx__circuits,
    .login-fx__rings span,
    .login-fx__particles i,
    .login-fx__scan,
    .login-platform__glow,
    .login-platform__card,
    .login-platform__card::before,
    .login-platform__label,
    .login-field,
    .login-submit,
    .login-field__control input:focus {
        animation: none !important;
        opacity: 1 !important;
        transform: none !important;
        filter: none !important;
    }
}