html,
body {
    width: 100%;
    min-height: 100%;
    margin: 0;
    padding: 0;
    font-family: "Segoe UI", Tahoma, sans-serif;
}

body {
    position: relative;
    min-height: 100vh;
    display: grid;
    place-items: center;
    overflow: hidden;
    color: #eaf4ff;
    background:
        radial-gradient(circle at 74% 20%, rgba(0, 118, 255, 0.2), transparent 34%),
        radial-gradient(circle at 18% 72%, rgba(0, 210, 255, 0.22), transparent 30%),
        linear-gradient(135deg, #020716 0%, #061a3d 48%, #020b20 100%);
}

body::before,
body::after {
    content: "";
    position: fixed;
    inset: 0;
    pointer-events: none;
}

body::before {
    opacity: 0.34;
    background:
        linear-gradient(90deg, rgba(41, 152, 255, 0.16) 1px, transparent 1px) 0 0 / 72px 72px,
        linear-gradient(rgba(41, 152, 255, 0.12) 1px, transparent 1px) 0 0 / 72px 72px;
    mask-image: radial-gradient(circle at 50% 48%, #000 0, transparent 78%);
}

body::after {
    background:
        radial-gradient(circle at 14% 42%, rgba(0, 157, 255, 0.8) 0 2px, transparent 3px),
        radial-gradient(circle at 28% 20%, rgba(42, 197, 255, 0.72) 0 2px, transparent 3px),
        radial-gradient(circle at 82% 18%, rgba(42, 197, 255, 0.74) 0 2px, transparent 3px),
        radial-gradient(circle at 92% 62%, rgba(42, 197, 255, 0.62) 0 2px, transparent 3px);
    animation: loginPulse 5.5s ease-in-out infinite alternate;
}

.login-techscape {
    position: fixed;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
}

.login-techscape::before {
    content: "";
    position: absolute;
    left: -12vw;
    top: 5vh;
    width: 48vw;
    height: 78vh;
    opacity: 0.5;
    background:
        radial-gradient(circle, #0988ff 0 1.4px, transparent 1.8px) 0 0 / 12px 12px;
    clip-path: polygon(25% 0, 67% 7%, 84% 30%, 68% 60%, 76% 100%, 37% 86%, 20% 52%, 0 35%);
    filter: drop-shadow(0 0 18px rgba(0, 132, 255, 0.5));
}

.login-techscape::after {
    content: "";
    position: absolute;
    right: -4vw;
    bottom: -12vh;
    width: 52vw;
    height: 48vh;
    opacity: 0.36;
    background:
        linear-gradient(145deg, transparent 0 42%, rgba(0, 119, 255, 0.42) 43% 44%, transparent 45%),
        linear-gradient(25deg, transparent 0 47%, rgba(12, 219, 255, 0.25) 48% 49%, transparent 50%),
        linear-gradient(rgba(0, 119, 255, 0.16) 1px, transparent 1px) 0 0 / 42px 42px;
    transform: perspective(700px) rotateX(62deg);
}

.login-data-orbit {
    position: absolute;
    border: 1px solid rgba(26, 150, 255, 0.35);
    border-radius: 50%;
    box-shadow: 0 0 42px rgba(0, 132, 255, 0.22), inset 0 0 42px rgba(0, 132, 255, 0.12);
}

.login-data-orbit::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: conic-gradient(from 90deg, transparent, rgba(12, 219, 255, 0.7), transparent 34%);
    animation: loginRotate 12s linear infinite;
}

.login-data-orbit-a {
    right: 15vw;
    top: 12vh;
    width: 310px;
    height: 310px;
    opacity: 0.42;
}

.login-data-orbit-b {
    left: 4vw;
    bottom: 5vh;
    width: 460px;
    height: 460px;
    opacity: 0.26;
}

.login-flow {
    position: absolute;
    left: -12vw;
    width: 128vw;
    height: 2px;
    border-radius: 999px;
    background: linear-gradient(90deg, transparent, #0094ff, #1ee7ff, transparent);
    box-shadow: 0 0 24px rgba(0, 148, 255, 0.9), 0 0 54px rgba(0, 148, 255, 0.42);
    transform-origin: left center;
    animation: loginFlow 7s ease-in-out infinite;
}

.login-flow-a {
    top: 62%;
    transform: rotate(-13deg);
}

.login-flow-b {
    top: 70%;
    opacity: 0.65;
    transform: rotate(-8deg);
    animation-delay: -2.5s;
}

.login-map-points {
    position: absolute;
    left: 7vw;
    top: 16vh;
    width: 34vw;
    height: 46vh;
    opacity: 0.44;
    background:
        linear-gradient(32deg, transparent 0 49%, rgba(24, 171, 255, 0.75) 50%, transparent 51%) 10% 20% / 240px 120px no-repeat,
        linear-gradient(152deg, transparent 0 49%, rgba(24, 171, 255, 0.45) 50%, transparent 51%) 22% 46% / 320px 160px no-repeat,
        radial-gradient(circle at 18% 28%, #16b7ff 0 3px, transparent 4px),
        radial-gradient(circle at 38% 15%, #16b7ff 0 3px, transparent 4px),
        radial-gradient(circle at 62% 45%, #16b7ff 0 3px, transparent 4px),
        radial-gradient(circle at 24% 72%, #16b7ff 0 3px, transparent 4px),
        radial-gradient(circle at 80% 24%, #16b7ff 0 3px, transparent 4px);
}

.login-chart-field {
    position: absolute;
    right: 7vw;
    top: 15vh;
    display: flex;
    align-items: end;
    gap: 12px;
    width: 220px;
    height: 210px;
    opacity: 0.32;
}

.login-chart-field span {
    width: 24px;
    height: var(--bar);
    border-radius: 10px 10px 0 0;
    background: linear-gradient(180deg, rgba(48, 197, 255, 0.9), rgba(9, 69, 190, 0.16));
    box-shadow: 0 0 18px rgba(0, 148, 255, 0.4);
    animation: loginBars 3.8s ease-in-out infinite alternate;
}

.login-chart-field span:nth-child(2) { animation-delay: .25s; }
.login-chart-field span:nth-child(3) { animation-delay: .5s; }
.login-chart-field span:nth-child(4) { animation-delay: .75s; }
.login-chart-field span:nth-child(5) { animation-delay: 1s; }

.login-node-web {
    position: absolute;
    inset: auto auto 14vh 13vw;
    width: 340px;
    height: 150px;
    opacity: 0.5;
    background:
        linear-gradient(22deg, transparent 0 49%, rgba(24, 171, 255, 0.65) 50%, transparent 51%),
        linear-gradient(145deg, transparent 0 49%, rgba(24, 171, 255, 0.45) 50%, transparent 51%);
}

.login-node-web i {
    position: absolute;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #1ed7ff;
    box-shadow: 0 0 14px #00a2ff;
}

.login-node-web i:nth-child(1) { left: 0; top: 42px; }
.login-node-web i:nth-child(2) { left: 70px; top: 12px; }
.login-node-web i:nth-child(3) { left: 138px; top: 82px; }
.login-node-web i:nth-child(4) { right: 84px; top: 24px; }
.login-node-web i:nth-child(5) { right: 12px; top: 92px; }
.login-node-web i:nth-child(6) { left: 42px; bottom: 6px; }

.login-shell {
    position: relative;
    z-index: 1;
    width: min(1120px, calc(100vw - 42px));
    display: grid;
    grid-template-columns: minmax(0, 1.18fr) minmax(360px, 430px);
    gap: 30px;
    align-items: stretch;
}

.login-institutional,
.login-container {
    border: 1px solid rgba(65, 176, 255, 0.58);
    border-radius: 24px;
    background: linear-gradient(145deg, rgba(11, 31, 72, 0.78), rgba(6, 18, 48, 0.66));
    box-shadow:
        0 24px 70px rgba(0, 0, 0, 0.36),
        0 0 0 1px rgba(255, 255, 255, 0.04) inset,
        0 0 34px rgba(0, 132, 255, 0.24);
    backdrop-filter: blur(18px);
}

.login-institutional {
    position: relative;
    min-height: 430px;
    display: grid;
    align-content: center;
    gap: 26px;
    padding: 44px;
    overflow: hidden;
}

.login-institutional::before {
    content: "";
    position: absolute;
    right: -72px;
    top: -76px;
    width: 270px;
    height: 270px;
    border-radius: 50%;
    background:
        radial-gradient(circle, rgba(24, 171, 255, 0.82) 0 1.4px, transparent 1.8px) 0 0 / 9px 9px;
    opacity: 0.58;
}

.login-institutional::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: linear-gradient(120deg, rgba(42, 197, 255, 0.34), transparent 26%, transparent 70%, rgba(0, 255, 194, 0.18));
    pointer-events: none;
}

.login-card-grid {
    position: absolute;
    inset: 0;
    opacity: 0.18;
    background:
        linear-gradient(90deg, rgba(255, 255, 255, 0.2) 1px, transparent 1px) 0 0 / 42px 42px,
        linear-gradient(rgba(255, 255, 255, 0.16) 1px, transparent 1px) 0 0 / 42px 42px;
}

.login-mark {
    position: relative;
    z-index: 1;
    width: 78px;
    height: 78px;
    display: grid;
    place-items: center;
    border: 1px solid rgba(121, 207, 255, 0.6);
    border-radius: 22px;
    color: #80d8ff;
    background: linear-gradient(135deg, rgba(80, 160, 255, 0.2), rgba(255, 255, 255, 0.06));
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08), 0 0 24px rgba(0, 148, 255, 0.24);
}

.login-mark::before,
.login-mark::after,
.login-mark span {
    content: "";
    position: absolute;
    display: block;
}

.login-mark::before {
    width: 34px;
    height: 42px;
    border: 3px solid currentColor;
    border-radius: 9px;
    background:
        linear-gradient(currentColor, currentColor) 8px 12px / 18px 3px no-repeat,
        linear-gradient(currentColor, currentColor) 8px 22px / 18px 3px no-repeat;
}

.login-mark::after {
    width: 17px;
    height: 10px;
    right: 18px;
    bottom: 19px;
    border-left: 4px solid #35f28f;
    border-bottom: 4px solid #35f28f;
    transform: rotate(-45deg);
}

.login-mark span {
    left: 16px;
    top: 15px;
    width: 11px;
    height: 11px;
    border-radius: 50%;
    background: #35f28f;
    box-shadow: 0 0 14px rgba(53, 242, 143, 0.85);
}

.login-copy,
.login-security-strip {
    position: relative;
    z-index: 1;
}

.login-system-label {
    display: inline-flex;
    margin-bottom: 14px;
    padding: 8px 13px;
    border: 1px solid rgba(53, 242, 143, 0.36);
    border-radius: 999px;
    color: #35f28f;
    background: rgba(0, 140, 91, 0.15);
    font-size: 12px;
    font-weight: 900;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.login-copy h1 {
    max-width: 620px;
    margin: 0;
    color: #ffffff;
    font-size: clamp(38px, 4.6vw, 62px);
    line-height: .98;
    letter-spacing: -0.02em;
    text-shadow: 0 0 26px rgba(0, 148, 255, 0.25);
}

.login-copy p {
    max-width: 590px;
    margin: 18px 0 0;
    color: #c6d7ef;
    font-size: 18px;
    line-height: 1.5;
}

.login-security-strip {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.login-security-strip span {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 34px;
    padding: 0 14px;
    border: 1px solid rgba(121, 207, 255, 0.34);
    border-radius: 999px;
    color: #eaf4ff;
    background: rgba(5, 22, 58, 0.64);
    font-size: 13px;
    font-weight: 800;
}

.login-security-strip span::before {
    content: "";
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #35f28f;
    box-shadow: 0 0 0 4px rgba(53, 242, 143, 0.13), 0 0 12px rgba(53, 242, 143, 0.6);
}

.login-container {
    position: relative;
    align-self: center;
    padding: 34px;
    overflow: hidden;
}

.login-panel-glow {
    position: absolute;
    inset: -1px;
    opacity: 0.42;
    background:
        radial-gradient(circle at 20% 0%, rgba(0, 148, 255, 0.38), transparent 34%),
        radial-gradient(circle at 100% 100%, rgba(0, 255, 194, 0.22), transparent 38%);
    pointer-events: none;
}

.login-form {
    position: relative;
    z-index: 1;
    display: grid;
    gap: 15px;
}

.login-badge {
    justify-self: start;
    padding: 8px 13px;
    border: 1px solid rgba(68, 172, 255, 0.34);
    border-radius: 999px;
    color: #67c8ff;
    background: rgba(0, 118, 255, 0.18);
    font-size: 11px;
    font-weight: 900;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.login-form h2 {
    margin: 4px 0 0;
    color: #ffffff;
    font-size: 31px;
    line-height: 1.08;
}

.login-subtitle {
    margin: -5px 0 8px;
    color: #b5c8df;
    font-size: 15px;
}

.login-messages {
    display: grid;
    gap: 8px;
}

.login-message {
    border-radius: 12px;
    padding: 11px 13px;
    font-size: 14px;
    font-weight: 700;
    border: 1px solid transparent;
}

.login-message.error {
    color: #ffd7d7;
    background: rgba(159, 35, 35, 0.26);
    border-color: rgba(255, 116, 116, 0.34);
}

.login-message.success {
    color: #a7ffd0;
    background: rgba(0, 121, 82, 0.28);
    border-color: rgba(53, 242, 143, 0.34);
}

.input-container {
    position: relative;
}

.login-field-icon {
    position: absolute;
    left: 14px;
    top: 50%;
    width: 30px;
    height: 30px;
    transform: translateY(-50%);
    border-radius: 10px;
    background: rgba(0, 132, 255, 0.18);
    box-shadow: inset 0 0 0 1px rgba(121, 207, 255, 0.38);
}

.login-field-icon::before,
.login-field-icon::after {
    content: "";
    position: absolute;
}

.input-user .login-field-icon::before {
    left: 10px;
    top: 7px;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #67c8ff;
}

.input-user .login-field-icon::after {
    left: 7px;
    bottom: 6px;
    width: 16px;
    height: 9px;
    border-radius: 10px 10px 5px 5px;
    background: #67c8ff;
}

.input-password .login-field-icon::before {
    left: 8px;
    top: 13px;
    width: 14px;
    height: 11px;
    border-radius: 4px;
    background: #67c8ff;
}

.input-password .login-field-icon::after {
    left: 10px;
    top: 6px;
    width: 8px;
    height: 10px;
    border: 2px solid #67c8ff;
    border-bottom: 0;
    border-radius: 8px 8px 0 0;
}

.input-container .icon {
    display: none;
}

.input-container input {
    width: 100%;
    height: 54px;
    box-sizing: border-box;
    padding: 0 56px 0 56px;
    border: 1px solid rgba(92, 174, 255, 0.42);
    border-radius: 14px;
    color: #ffffff;
    background: rgba(2, 13, 39, 0.48);
    font-size: 16px;
    transition: border-color .18s ease, box-shadow .18s ease, transform .12s ease;
}

.input-container input::placeholder {
    color: #abc1dc;
}

.input-container input:focus {
    outline: none;
    border-color: #31b8ff;
    box-shadow: 0 0 0 4px rgba(0, 148, 255, 0.18), 0 0 22px rgba(0, 148, 255, 0.2);
    transform: translateY(-1px);
}

.password-toggle {
    position: absolute;
    right: 10px;
    top: 50%;
    width: 38px;
    height: 38px;
    display: grid;
    place-items: center;
    transform: translateY(-50%);
    border: 0;
    border-radius: 12px;
    color: #90d8ff;
    background: rgba(5, 32, 78, 0.76);
    box-shadow: inset 0 0 0 1px rgba(121, 207, 255, 0.38);
    cursor: pointer;
    transition: background .18s ease, box-shadow .18s ease, transform .14s ease;
}

.password-toggle:hover {
    background: rgba(8, 54, 118, 0.86);
    box-shadow: inset 0 0 0 1px rgba(121, 207, 255, 0.62), 0 8px 18px rgba(0, 132, 255, 0.18);
    transform: translateY(-50%) scale(1.02);
}

.password-toggle:focus-visible {
    outline: 3px solid rgba(49, 184, 255, 0.28);
    outline-offset: 2px;
}

.password-toggle-icon {
    position: relative;
    width: 20px;
    height: 14px;
    border: 2px solid currentColor;
    border-radius: 50% / 58%;
}

.password-toggle-icon::before {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: currentColor;
    transform: translate(-50%, -50%);
}

.password-toggle[aria-pressed="true"] .password-toggle-icon::after {
    content: "";
    position: absolute;
    left: 8px;
    top: -5px;
    width: 2px;
    height: 24px;
    border-radius: 999px;
    background: currentColor;
    transform: rotate(45deg);
    box-shadow: 0 0 0 2px #061a3d;
}

.login-button {
    width: 100%;
    height: 54px;
    margin-top: 4px;
    border: 1px solid rgba(112, 205, 255, 0.38);
    border-radius: 14px;
    color: #fff;
    background: linear-gradient(135deg, #00a2ff 0%, #075cf2 100%);
    box-shadow: 0 14px 28px rgba(0, 111, 255, 0.34), inset 0 1px 0 rgba(255, 255, 255, 0.28);
    font-size: 17px;
    font-weight: 900;
    cursor: pointer;
    transition: transform .14s ease, box-shadow .18s ease, filter .18s ease;
}

.login-button:hover {
    filter: brightness(1.06);
    transform: translateY(-1px);
    box-shadow: 0 18px 34px rgba(0, 111, 255, 0.42), 0 0 26px rgba(0, 162, 255, 0.32);
}

.login-footer {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 14px;
    z-index: 1;
    color: #c7d8ef;
    text-align: center;
    font-size: 13px;
    font-weight: 700;
    text-shadow: 0 0 12px rgba(0, 148, 255, 0.3);
}

@keyframes loginPulse {
    from { opacity: 0.5; }
    to { opacity: 0.9; }
}

@keyframes loginRotate {
    to { transform: rotate(360deg); }
}

@keyframes loginFlow {
    0%, 100% { opacity: 0.28; filter: hue-rotate(0deg); }
    50% { opacity: 0.9; filter: hue-rotate(24deg); }
}

@keyframes loginBars {
    from { transform: scaleY(0.78); opacity: 0.42; }
    to { transform: scaleY(1.05); opacity: 0.82; }
}

@media (max-width: 920px) {
    body {
        overflow: auto;
        padding: 24px 0 58px;
    }

    .login-shell {
        grid-template-columns: 1fr;
        width: min(94vw, 540px);
    }

    .login-institutional {
        min-height: auto;
        padding: 28px;
    }

    .login-copy h1 {
        font-size: 36px;
    }

    .login-chart-field,
    .login-node-web {
        display: none;
    }
}

@media (max-width: 520px) {
    .login-container,
    .login-institutional {
        padding: 22px;
        border-radius: 18px;
    }

    .login-copy h1 {
        font-size: 31px;
    }

    .login-copy p {
        font-size: 15px;
    }

    .login-form h2 {
        font-size: 27px;
    }
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        scroll-behavior: auto !important;
    }
}