:root {
    --login-blue: #2252BD;
    --login-blue-2: #2F66DC;
    --login-navy: #10264C;
    --login-text: #12213D;
    --login-muted: #6B778D;
    --login-line: #D6E0EF;
    --login-bg: #F5F8FD;
}

* { box-sizing: border-box; }

html,
body { min-height: 100%; margin: 0; }

body.login-modern-page {
    min-height: 100vh;
    font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    color: var(--login-text);
    background:
        radial-gradient(circle at 18% 12%, rgba(95,155,255,.22), transparent 30rem),
        radial-gradient(circle at 84% 18%, rgba(72,137,245,.16), transparent 31rem),
        linear-gradient(180deg, #F8FBFF 0%, #F1F6FD 100%);
    overflow-x: hidden;
}

body.login-modern-page::before {
    content: "";
    position: fixed;
    inset: 0;
    pointer-events: none;
    background:
        radial-gradient(circle at 50% 0%, rgba(255,255,255,.95), transparent 35rem),
        linear-gradient(145deg, rgba(255,255,255,.55), transparent 42%);
    z-index: 0;
}

.login-wave {
    position: fixed;
    pointer-events: none;
    z-index: 0;
}

.login-wave-left {
    width: 64vw;
    height: 52vh;
    left: -16vw;
    bottom: -29vh;
    border-radius: 50%;
    background: linear-gradient(135deg, rgba(36,93,213,.95), rgba(104,177,255,.48));
    transform: rotate(9deg);
    box-shadow: inset 0 2px 0 rgba(255,255,255,.8);
}

.login-wave-left::after {
    content: "";
    position: absolute;
    left: 6%;
    top: -18px;
    width: 90%;
    height: 2px;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,.95), transparent);
    box-shadow: 0 0 14px rgba(255,255,255,.85);
}

.login-wave-right {
    width: 57vw;
    height: 67vh;
    right: -19vw;
    bottom: -27vh;
    border-radius: 50% 0 0 0;
    background: linear-gradient(145deg, rgba(51,112,225,.10), rgba(91,162,255,.30));
    transform: rotate(-11deg);
}

.login-buildings {
    position: fixed;
    left: 3vw;
    bottom: 8vh;
    display: flex;
    align-items: flex-end;
    gap: 13px;
    opacity: .11;
    z-index: 0;
    pointer-events: none;
}

.login-building {
    position: relative;
    width: 74px;
    border: 2px solid var(--login-blue);
    border-bottom: 0;
    border-radius: 8px 8px 0 0;
    background: repeating-linear-gradient(to bottom, rgba(34,82,189,.08) 0 10px, transparent 10px 25px);
}

.login-building::before,
.login-building::after {
    content: "";
    position: absolute;
    top: 16px;
    bottom: 0;
    width: 7px;
    background: repeating-linear-gradient(to bottom, rgba(34,82,189,.55) 0 5px, transparent 5px 14px);
}

.login-building::before { left: 18px; }
.login-building::after { right: 18px; }
.login-building-1 { height: 335px; }
.login-building-2 { height: 245px; width: 64px; }
.login-building-3 { height: 185px; width: 56px; }

.login-dots {
    position: fixed;
    display: grid;
    grid-template-columns: repeat(5, 8px);
    gap: 13px;
    opacity: .28;
    z-index: 0;
    pointer-events: none;
}

.login-dots-top { right: 8%; top: 14%; }
.login-dots-bottom { left: 8%; bottom: 7%; }
.login-dots span { width: 8px; height: 8px; border-radius: 50%; background: #3B7DE5; }

.login-back {
    position: fixed;
    top: max(23px, env(safe-area-inset-top));
    left: max(20px, env(safe-area-inset-left));
    z-index: 5;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 11px 18px;
    border-radius: 999px;
    text-decoration: none;
    font-weight: 750;
    color: #0F4EA8;
    background: rgba(255,255,255,.92);
    border: 1px solid rgba(34,82,189,.08);
    box-shadow: 0 9px 25px rgba(29,64,119,.13);
    backdrop-filter: blur(12px);
    transition: transform .2s ease, box-shadow .2s ease;
}

.login-back:hover {
    transform: translateY(-2px);
    box-shadow: 0 13px 30px rgba(29,64,119,.17);
}

.login-modern-shell {
    position: relative;
    z-index: 1;
    min-height: 100vh;
    display: grid;
    place-items: center;
    padding: 74px 20px 42px;
}

.login-modern-card {
    width: min(420px, 100%);
    background: rgba(255,255,255,.95);
    border: 1px solid rgba(34,82,189,.10);
    border-radius: 25px;
    padding: 32px 28px 26px;
    box-shadow: 0 28px 80px rgba(24,49,93,.15);
    backdrop-filter: blur(18px);
}

.login-modern-logo-wrap {
    display: flex;
    justify-content: center;
    margin-bottom: 17px;
}

.login-modern-logo {
    background: transparent;
    width: 150px;
    height: auto;
    display: block;
    object-fit: contain;
    filter: drop-shadow(0 9px 18px rgba(17,66,132,.10));
}

.login-modern-card h1 {
    margin: 0 0 8px;
    text-align: center;
    font-size: 25px;
    line-height: 1.15;
    letter-spacing: -.03em;
    color: #142747;
}

.login-modern-subtitle {
    margin: 0 0 27px;
    text-align: center;
    color: #6F7D92;
    font-size: 14px;
}

.login-modern-form { margin: 0; }
.login-field { margin-bottom: 18px; }

.login-field label {
    display: block;
    margin-bottom: 8px;
    font-size: 14px;
    font-weight: 750;
    color: #13284A;
}

.login-input-wrap { position: relative; }

.login-field input {
    width: 100%;
    height: 48px;
    border: 1px solid #CFD9E8;
    border-radius: 13px;
    padding: 0 14px;
    background: #fff;
    color: #27364D;
    outline: none;
    font: inherit;
    font-size: 14px;
    transition: border-color .2s ease, box-shadow .2s ease;
}

.login-field input::placeholder { color: #8B97A9; }

.login-field input:focus {
    border-color: #8EAEE7;
    box-shadow: 0 0 0 4px rgba(34,82,189,.08);
}

.login-field .login-password-input { padding-right: 46px; }

.login-password-toggle {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    border: 0;
    background: transparent;
    color: #78869A;
    cursor: pointer;
    padding: 7px;
    display: grid;
    place-items: center;
    font-size: 16px;
}

.login-password-toggle:hover { color: var(--login-blue); }

.login-forgot {
    display: block;
    width: max-content;
    margin: -1px 0 0 auto;
    color: #174FD1;
    text-decoration: none;
    font-size: 13px;
    font-weight: 650;
}

.login-forgot:hover { text-decoration: underline; }

.login-submit {
    width: 100%;
    min-height: 48px;
    margin-top: 26px;
    border: 0;
    border-radius: 13px;
    padding: 0 16px;
    background: linear-gradient(135deg, #2D5CC8, #2454BD);
    color: #fff;
    font-size: 15px;
    font-weight: 800;
    cursor: pointer;
    box-shadow: 0 11px 25px rgba(34,82,189,.22);
    transition: transform .2s ease, box-shadow .2s ease, opacity .2s ease;
}

.login-submit:hover:not(:disabled) {
    transform: translateY(-1px);
    box-shadow: 0 14px 30px rgba(34,82,189,.28);
}

.login-submit:disabled { opacity: .72; cursor: wait; }

.login-divider {
    height: 1px;
    background: #DFE6EF;
    margin: 28px 0 20px;
}

.login-signup {
    margin: 0;
    text-align: center;
    color: #69768B;
    font-size: 13px;
}

.login-signup a {
    color: #174FD1;
    text-decoration: none;
    font-weight: 700;
}

.login-signup a:hover { text-decoration: underline; }

.login-terms {
    display: block;
    width: max-content;
    margin: 18px auto 0;
    text-align: center;
    color: #8A96A8;
    font-size: 12px;
    text-decoration: none;
}

.login-terms:hover { color: #657187; text-decoration: underline; }

@media (max-width: 700px) {
    .login-modern-shell { padding: 82px 14px 28px; }
    .login-back { top: max(15px, env(safe-area-inset-top)); left: max(14px, env(safe-area-inset-left)); }
    .login-modern-card { padding: 28px 20px 24px; border-radius: 22px; }
    .login-buildings { opacity: .06; transform: scale(.74); transform-origin: bottom left; }
    .login-dots-top { right: 3%; }
    .login-modern-logo {
    background: transparent; width: 142px; }
}

@media (max-height: 720px) and (min-width: 701px) {
    .login-modern-shell { padding-top: 68px; padding-bottom: 22px; }
    .login-modern-card { padding-top: 24px; padding-bottom: 22px; }
    .login-modern-logo-wrap { margin-bottom: 10px; }
    .login-modern-logo {
    background: transparent; width: 130px; }
    .login-modern-subtitle { margin-bottom: 18px; }
    .login-field { margin-bottom: 14px; }
    .login-submit { margin-top: 18px; }
    .login-divider { margin: 20px 0 16px; }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { transition: none !important; scroll-behavior: auto !important; }
}

/* O layout de login segue o arquivo visual de referência também quando o usuário
   já possui preferência global de modo escuro salva no navegador. */
html[data-theme="dark"] body.login-modern-page {
    color: var(--login-text);
    background:
        radial-gradient(circle at 18% 12%, rgba(95,155,255,.22), transparent 30rem),
        radial-gradient(circle at 84% 18%, rgba(72,137,245,.16), transparent 31rem),
        linear-gradient(180deg, #F8FBFF 0%, #F1F6FD 100%);
}
html[data-theme="dark"] .login-modern-card { background: rgba(255,255,255,.95); border-color: rgba(34,82,189,.10); }
html[data-theme="dark"] .login-modern-card h1 { color: #142747; }
html[data-theme="dark"] .login-modern-subtitle { color: #6F7D92; }
html[data-theme="dark"] .login-field label { color: #13284A; }
html[data-theme="dark"] .login-field input { background: #fff; color: #27364D; border-color: #CFD9E8; }
html[data-theme="dark"] .login-field input::placeholder { color: #8B97A9; }
html[data-theme="dark"] .login-signup { color: #69768B; }
html[data-theme="dark"] .login-terms { color: #8A96A8; }