:root {
    --navy-950: #020a18;
    --navy-900: #041226;
    --navy-850: #071a36;
    --navy-800: #0a2448;
    --blue-500: #397ce5;
    --blue-400: #60a5fa;
    --blue-300: #8fc8ff;
    --ink-soft: #8da2c0;
    --success: #74d1b0;
    --danger: #f2a2a2;
}

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

html {
    min-width: 320px;
    min-height: 100%;
    background: var(--navy-950);
}

body {
    min-height: 100%;
    margin: 0;
    overflow-x: hidden;
    background: var(--navy-950);
    color: #f7fbff;
    font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
    -webkit-font-smoothing: antialiased;
}

button,
input {
    font: inherit;
}

button {
    -webkit-tap-highlight-color: transparent;
}

button:focus-visible,
input:focus-visible,
a:focus-visible {
    outline: 2px solid #b9dcff;
    outline-offset: 3px;
}

.pusula-screen {
    position: relative;
    min-height: 100vh;
    min-height: 100svh;
    overflow: hidden;
    isolation: isolate;
    background:
        radial-gradient(circle at 76% 50%, rgba(36, 89, 178, 0.2), transparent 31%),
        radial-gradient(circle at 18% 45%, rgba(12, 50, 103, 0.16), transparent 28%),
        linear-gradient(145deg, #020916 0%, #06142a 50%, #081d3e 100%);
}

.pusula-screen::before {
    position: absolute;
    inset: 0;
    z-index: 0;
    background:
        radial-gradient(ellipse at 73% 50%, rgba(77, 145, 235, 0.08), transparent 39%),
        linear-gradient(90deg, rgba(2, 9, 22, 0.36), transparent 34% 86%, rgba(2, 9, 22, 0.16));
    content: "";
    pointer-events: none;
}

.pusula-screen::after {
    position: absolute;
    inset: 0;
    z-index: 2;
    background:
        linear-gradient(90deg, rgba(2, 9, 22, 0.5), transparent 32%, transparent 69%, rgba(3, 15, 35, 0.12)),
        linear-gradient(180deg, rgba(2, 9, 22, 0.38), transparent 25%, transparent 75%, rgba(2, 9, 22, 0.66));
    content: "";
    pointer-events: none;
}

.ambient-grid {
    position: absolute;
    inset: 0;
    z-index: 1;
    opacity: 0.12;
    background-image:
        linear-gradient(rgba(108, 166, 241, 0.12) 1px, transparent 1px),
        linear-gradient(90deg, rgba(108, 166, 241, 0.12) 1px, transparent 1px);
    background-size: 56px 56px;
    -webkit-mask-image: radial-gradient(ellipse at 71% 51%, #000 0 38%, transparent 73%);
    mask-image: radial-gradient(ellipse at 71% 51%, #000 0 38%, transparent 73%);
    animation: grid-drift 30s linear infinite;
    pointer-events: none;
}

.pusula-shell {
    position: relative;
    z-index: 3;
    display: grid;
    width: min(2560px, 100%);
    min-height: 100vh;
    min-height: 100svh;
    grid-template-columns: clamp(390px, 23vw, 580px) minmax(0, 1fr);
    align-items: center;
    gap: clamp(46px, 5.5vw, 150px);
    margin: 0 auto;
    padding: clamp(28px, 4vw, 96px) clamp(24px, 4.5vw, 116px);
}

.pusula-shell > * {
    min-width: 0;
}

.login-zone {
    position: relative;
    z-index: 8;
    display: grid;
    place-items: center;
}

.login-card {
    width: 100%;
    padding: clamp(30px, 2.3vw, 50px);
    border: 1px solid rgba(95, 158, 239, 0.54);
    border-radius: 17px;
    background:
        radial-gradient(circle at 50% 0%, rgba(51, 111, 205, 0.18), transparent 38%),
        linear-gradient(155deg, rgba(8, 30, 65, 0.97), rgba(2, 13, 31, 0.97));
    box-shadow: 0 28px 80px rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.045);
    -webkit-backdrop-filter: blur(16px);
    backdrop-filter: blur(16px);
    animation: card-enter 550ms cubic-bezier(.2, .75, .25, 1) both;
}

.login-card-header {
    display: grid;
    justify-items: center;
    gap: clamp(8px, 0.55vw, 12px);
    padding-bottom: clamp(24px, 1.6vw, 36px);
    border-bottom: 1px solid rgba(111, 161, 229, 0.12);
}

.login-card-header p {
    margin: 0;
    color: rgba(192, 211, 237, 0.5);
    font-size: clamp(9px, 0.58vw, 12px);
    font-weight: 700;
    letter-spacing: 0.27em;
    text-transform: uppercase;
}

.wordmark {
    display: flex;
    align-items: center;
    justify-content: center;
}

.wordmark-logo {
    display: block;
    width: clamp(160px, 11vw, 215px);
    height: auto;
    filter: drop-shadow(0 0 16px rgba(96, 165, 250, 0.2));
}

.compass-mark {
    display: block;
    width: 78px;
    height: 94px;
    filter: drop-shadow(0 0 16px rgba(96, 165, 250, 0.44));
}

.compass-mark-compact {
    width: clamp(26px, 1.65vw, 36px);
    height: clamp(34px, 2.2vw, 47px);
    margin-left: -2px;
    filter: none;
}

.mark-halo { fill: none; stroke: rgba(143, 200, 255, 0.84); stroke-width: 2; }
.mark-left { fill: #f8fbff; }
.mark-right { fill: #75aaf6; }
.mark-cut { fill: #0a2448; }

.login-heading {
    margin: clamp(24px, 1.65vw, 36px) 0 clamp(20px, 1.35vw, 29px);
    text-align: center;
}

.login-heading > span {
    display: block;
    margin-bottom: 7px;
    color: rgba(124, 177, 246, 0.78);
    font-size: clamp(9px, 0.58vw, 12px);
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
}

.login-heading h1 {
    margin: 0;
    color: #fff;
    font-size: clamp(24px, 1.65vw, 35px);
    font-weight: 600;
    letter-spacing: -0.035em;
}

.login-heading p {
    margin: 7px 0 0;
    color: #899dbb;
    font-size: clamp(12px, 0.76vw, 15px);
}

.login-alert {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin: -4px 0 16px;
    padding: 9px 11px;
    border: 1px solid;
    border-radius: 8px;
    font-size: clamp(11px, 0.7vw, 14px);
    font-weight: 600;
    line-height: 1.4;
}

.login-alert i {
    flex: 0 0 auto;
    margin-top: 1px;
}

.login-alert-error {
    border-color: rgba(242, 162, 162, 0.32);
    background: rgba(146, 24, 32, 0.17);
    color: var(--danger);
}

.login-alert-success {
    border-color: rgba(116, 209, 176, 0.34);
    background: rgba(18, 112, 71, 0.17);
    color: #9ae2c7;
}

.form-field {
    margin-bottom: clamp(15px, 1vw, 21px);
}

.form-field label {
    display: block;
    margin-bottom: 7px;
    color: #c7d4e6;
    font-size: clamp(11px, 0.7vw, 14px);
    font-weight: 600;
}

.input-shell {
    position: relative;
}

.input-shell > .field-icon {
    position: absolute;
    top: 50%;
    left: clamp(14px, 0.9vw, 19px);
    z-index: 2;
    width: clamp(17px, 1.05vw, 22px);
    height: clamp(17px, 1.05vw, 22px);
    color: #7db4f8;
    transform: translateY(-50%);
    pointer-events: none;
}

.login-input {
    width: 100%;
    height: clamp(48px, 3vw, 62px);
    padding: 0 clamp(42px, 2.75vw, 58px);
    border: 1px solid rgba(79, 137, 211, 0.66);
    border-radius: 9px;
    background: rgba(2, 13, 31, 0.74);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.025);
    color: #edf5ff;
    font-size: clamp(12px, 0.78vw, 15px);
    transition: border-color 160ms ease, box-shadow 160ms ease, background 160ms ease;
}

.login-input::placeholder {
    color: #647692;
}

.login-input:focus-visible {
    border-color: #70adff;
    background: rgba(3, 20, 46, 0.86);
    box-shadow: 0 0 0 3px rgba(65, 126, 220, 0.16);
    outline: none;
}

.login-input:-webkit-autofill,
.login-input:-webkit-autofill:hover,
.login-input:-webkit-autofill:focus {
    -webkit-text-fill-color: #edf5ff;
    box-shadow: 0 0 0 1000px #061831 inset;
    transition: background-color 9999s ease-out;
}

.login-input.is-invalid,
.was-validated .login-input:invalid {
    border-color: rgba(242, 162, 162, 0.76);
}

.invalid-feedback {
    display: none;
    margin-top: 5px;
    color: var(--danger);
    font-size: clamp(10px, 0.66vw, 13px);
}

.form-field:has(.login-input.is-invalid) .invalid-feedback,
.was-validated .form-field:has(.login-input:invalid) .invalid-feedback {
    display: block;
}

.password-input {
    padding-right: clamp(46px, 3vw, 62px);
}

.password-toggle {
    position: absolute;
    top: 50%;
    right: clamp(7px, 0.5vw, 11px);
    z-index: 3;
    display: grid;
    width: clamp(32px, 2vw, 42px);
    height: clamp(32px, 2vw, 42px);
    place-items: center;
    padding: 0;
    border: 0;
    border-radius: 7px;
    background: transparent;
    color: #7187a6;
    font-size: clamp(17px, 1.1vw, 22px);
    transform: translateY(-50%);
    cursor: pointer;
}

.password-toggle:hover,
.password-toggle:focus-visible {
    background: rgba(96, 165, 250, 0.1);
    color: #b8d5fb;
    outline: none;
}

.form-options {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    margin: 1px 0 clamp(19px, 1.25vw, 27px);
}

.remember-option {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: #99abc5;
    font-size: clamp(10.5px, 0.7vw, 14px);
    cursor: pointer;
}

.remember-option input {
    display: grid;
    width: clamp(15px, 1vw, 20px);
    height: clamp(15px, 1vw, 20px);
    place-content: center;
    margin: 0;
    appearance: none;
    border: 1px solid rgba(117, 170, 239, 0.54);
    border-radius: 4px;
    background: rgba(2, 13, 31, 0.72);
    cursor: pointer;
}

.remember-option input::before {
    width: 7px;
    height: 4px;
    border-bottom: 1.5px solid white;
    border-left: 1.5px solid white;
    content: "";
    transform: rotate(-45deg) scale(0);
    transition: transform 120ms ease;
}

.remember-option input:checked {
    border-color: #5f9ff5;
    background: #397ce5;
}

.remember-option input:checked::before {
    transform: rotate(-45deg) scale(1);
}

.remember-option input:focus-visible {
    outline-offset: 2px;
}

.forgot-link {
    padding: 3px 0;
    color: #74b1ff;
    font-size: clamp(10.5px, 0.7vw, 14px);
    text-decoration: none;
}

.forgot-link:hover,
.forgot-link:focus-visible {
    color: #b8dcff;
    text-decoration: underline;
    text-underline-offset: 3px;
}

.login-submit {
    display: inline-flex;
    width: 100%;
    height: clamp(49px, 3.1vw, 64px);
    align-items: center;
    justify-content: center;
    gap: 9px;
    border: 1px solid #6facff;
    border-radius: 9px;
    background: linear-gradient(110deg, #2b62c9, #397ce5);
    box-shadow: 0 12px 28px rgba(23, 82, 175, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.16);
    color: #fff;
    font-size: clamp(12px, 0.78vw, 15px);
    font-weight: 700;
    cursor: pointer;
    transition: transform 160ms ease, background 160ms ease, box-shadow 160ms ease, opacity 160ms ease;
}

.login-submit svg {
    width: clamp(17px, 1.1vw, 22px);
    height: clamp(17px, 1.1vw, 22px);
    transition: transform 160ms ease;
}

.login-submit:hover,
.login-submit:focus-visible {
    background: linear-gradient(110deg, #326fd7, #4488ee);
    box-shadow: 0 15px 32px rgba(23, 82, 175, 0.36), inset 0 1px 0 rgba(255, 255, 255, 0.18);
    transform: translateY(-1px);
}

.login-submit:hover svg,
.login-submit:focus-visible svg {
    transform: translateX(2px);
}

.login-submit:active {
    transform: translateY(0);
}

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

.card-security-note {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    margin-top: 15px;
    padding-top: 14px;
    border-top: 1px solid rgba(111, 161, 229, 0.1);
    color: rgba(152, 173, 202, 0.52);
    font-size: clamp(9px, 0.6vw, 12px);
    letter-spacing: 0.035em;
}

.security-dot {
    width: clamp(6px, 0.42vw, 9px);
    height: clamp(6px, 0.42vw, 9px);
    border-radius: 50%;
    background: var(--success);
    box-shadow: 0 0 10px rgba(116, 209, 176, 0.7);
}

.module-hub {
    position: relative;
    z-index: 4;
    width: 100%;
    height: clamp(600px, 80svh, 940px);
    min-height: 0;
    animation: hub-enter 700ms 120ms cubic-bezier(.2, .75, .25, 1) both;
}

.module-hub::before {
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 0;
    width: min(72%, 690px);
    height: 76%;
    border-radius: 50%;
    background: radial-gradient(ellipse, rgba(48, 113, 218, 0.16) 0%, rgba(27, 78, 159, 0.08) 35%, rgba(6, 25, 55, 0) 70%);
    content: "";
    transform: translate(-50%, -50%);
    pointer-events: none;
}

.module-hub::after {
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 1;
    width: clamp(360px, min(25vw, 52svh), 560px);
    height: clamp(360px, min(25vw, 52svh), 560px);
    border-radius: 50%;
    background: conic-gradient(from 12deg, transparent 0 82%, rgba(120, 191, 255, 0.03) 86%, rgba(120, 191, 255, 0.22) 91%, transparent 96%);
    -webkit-mask-image: radial-gradient(circle, transparent 0 44%, #000 53%, transparent 64%);
    mask-image: radial-gradient(circle, transparent 0 44%, #000 53%, transparent 64%);
    content: "";
    transform: translate(-50%, -50%);
    animation: command-sweep 9s linear infinite;
    pointer-events: none;
}

.hub-orbit {
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 2;
    border: 1px solid rgba(81, 148, 238, 0.16);
    border-radius: 50%;
    transform: translate(-50%, -50%);
    pointer-events: none;
}

.orbit-one {
    width: clamp(212px, min(15vw, 31svh), 330px);
    height: clamp(212px, min(15vw, 31svh), 330px);
    box-shadow: 0 0 30px rgba(55, 130, 229, 0.08);
    animation: orbit-breathe 5.4s ease-in-out infinite;
}

.orbit-two {
    width: clamp(292px, min(20.5vw, 42svh), 440px);
    height: clamp(292px, min(20.5vw, 42svh), 440px);
    border-style: dashed;
    animation: orbit-spin 29s linear infinite;
}

.orbit-three {
    width: clamp(372px, min(26vw, 54svh), 570px);
    height: clamp(372px, min(26vw, 54svh), 570px);
    opacity: 0.5;
    animation: orbit-breathe 8s ease-in-out infinite reverse;
}

.network-lines {
    position: absolute;
    inset: 0;
    z-index: 2;
    width: 100%;
    height: 100%;
    overflow: visible;
    pointer-events: none;
}

.command-grid ellipse,
.command-grid line {
    fill: none;
    stroke: rgba(86, 148, 228, 0.13);
    stroke-width: 0.12;
    vector-effect: non-scaling-stroke;
}

.command-grid ellipse:first-child {
    stroke: rgba(104, 171, 250, 0.22);
    stroke-dasharray: 1.4 2.6;
    animation: route-flow 18s linear infinite reverse;
}

.command-grid line {
    stroke: rgba(80, 142, 220, 0.075);
    stroke-dasharray: 0.55 3.6;
}

.network-line-base {
    stroke: rgba(91, 157, 244, 0.33);
    stroke-width: 0.18;
    stroke-dasharray: 2.1 3.2;
    vector-effect: non-scaling-stroke;
    animation: route-flow 8s linear infinite;
}

.network-line-energy {
    opacity: 0.64;
    stroke: rgba(129, 200, 255, 0.84);
    stroke-width: 0.34;
    stroke-linecap: round;
    stroke-dasharray: 1.15 10.85;
    vector-effect: non-scaling-stroke;
    filter: drop-shadow(0 0 3px rgba(70, 150, 255, 0.52));
    animation: route-energy 3.8s linear infinite;
    animation-delay: var(--route-delay, 0s);
}

.central-core {
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 5;
    display: grid;
    width: clamp(128px, min(9vw, 18svh), 190px);
    height: clamp(128px, min(9vw, 18svh), 190px);
    place-items: center;
    border: 1px solid rgba(142, 202, 255, 0.94);
    border-radius: 50%;
    background: radial-gradient(circle at 50% 30%, rgba(70, 132, 230, 0.72), transparent 40%), linear-gradient(155deg, #0c3977, #03142e 72%);
    box-shadow: 0 0 0 11px rgba(57, 124, 229, 0.11), 0 0 38px rgba(67, 139, 235, 0.56), inset 0 0 28px rgba(83, 157, 255, 0.26);
    color: #fff;
    transform: translate(-50%, -50%);
}

.central-core .compass-mark {
    width: clamp(59px, min(4.2vw, 8svh), 88px);
    height: clamp(76px, min(5.4vw, 10svh), 112px);
}

.core-pulse {
    position: absolute;
    inset: clamp(-22px, -1vw, -15px);
    border: 1px solid rgba(111, 179, 255, 0.44);
    border-radius: 50%;
    animation: core-pulse 2.8s ease-out infinite;
}

.core-label {
    position: absolute;
    top: calc(100% + clamp(22px, 1.4vw, 31px));
    left: 50%;
    color: rgba(179, 207, 239, 0.7);
    font-size: clamp(9px, 0.58vw, 12px);
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    white-space: nowrap;
    transform: translateX(-50%);
}

.module-node {
    --node-x: 50%;
    --node-y: 50%;
    position: absolute;
    top: var(--node-y);
    left: var(--node-x);
    z-index: 6;
    display: flex;
    width: clamp(88px, min(6.3vw, 12svh), 138px);
    height: clamp(84px, min(6vw, 11.5svh), 130px);
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: clamp(10px, 0.75vw, 16px) clamp(7px, 0.55vw, 12px) clamp(8px, 0.65vw, 14px);
    border: 1px solid rgba(93, 153, 231, 0.44);
    border-radius: clamp(13px, 0.9vw, 19px);
    background: radial-gradient(circle at 50% 0%, rgba(71, 135, 229, 0.18), transparent 48%), linear-gradient(155deg, rgba(10, 39, 82, 0.94), rgba(3, 17, 39, 0.95));
    box-shadow: 0 14px 36px rgba(0, 0, 0, 0.22);
    color: #edf6ff;
    transform: translate(-50%, -50%);
    transition: transform 180ms ease, border-color 180ms ease, box-shadow 180ms ease, background 180ms ease;
}

.module-node > svg {
    width: clamp(21px, min(1.55vw, 3svh), 34px);
    height: clamp(21px, min(1.55vw, 3svh), 34px);
    margin-bottom: clamp(6px, 0.5vw, 10px);
    color: #7db9ff;
    stroke-width: 1.8;
    transition: color 180ms ease, transform 180ms ease;
}

.module-node strong {
    max-width: clamp(74px, 5.2vw, 116px);
    font-size: clamp(8.1px, min(0.57vw, 1.1svh), 12px);
    line-height: 1.2;
    letter-spacing: 0.01em;
    text-align: center;
    text-transform: uppercase;
}

.module-node:hover {
    border-color: rgba(131, 197, 255, 0.92);
    background: radial-gradient(circle at 50% 0%, rgba(87, 153, 250, 0.32), transparent 54%), linear-gradient(155deg, rgba(14, 52, 105, 0.98), rgba(4, 20, 44, 0.98));
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.28), 0 0 24px rgba(68, 139, 235, 0.3);
    transform: translate(-50%, -50%) translateY(-4px);
}

.module-node:hover > svg {
    color: #b9dcff;
    transform: scale(1.08);
}

@keyframes card-enter {
    from { opacity: 0; transform: translateY(14px) scale(0.99); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes hub-enter {
    from { opacity: 0; transform: translateX(18px); }
    to { opacity: 1; transform: translateX(0); }
}

@keyframes core-pulse {
    0% { opacity: 0.75; transform: scale(0.94); }
    70%, 100% { opacity: 0; transform: scale(1.18); }
}

@keyframes orbit-spin {
    to { transform: translate(-50%, -50%) rotate(360deg); }
}

@keyframes route-flow {
    to { stroke-dashoffset: -24; }
}

@keyframes route-energy {
    to { stroke-dashoffset: -100; }
}

@keyframes orbit-breathe {
    0%, 100% { opacity: 0.42; }
    50% { opacity: 0.88; }
}

@keyframes command-sweep {
    to { transform: translate(-50%, -50%) rotate(360deg); }
}

@keyframes grid-drift {
    to { background-position: 56px 56px; }
}

@media (max-width: 1020px) {
    body { overflow-y: auto; }
    .pusula-screen { overflow: visible; }

    .pusula-shell {
        min-height: 100svh;
        grid-template-columns: 1fr;
        gap: clamp(32px, 5vw, 48px);
        padding: 34px 24px 48px;
        padding-right: max(24px, env(safe-area-inset-right));
        padding-left: max(24px, env(safe-area-inset-left));
    }

    .login-card { width: min(460px, 100%); }

    .module-hub {
        display: grid;
        width: min(820px, 100%);
        height: auto;
        min-height: 0;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 12px;
        margin: 0 auto;
    }

    .module-hub::before,
    .module-hub::after,
    .hub-orbit,
    .network-lines {
        display: none;
    }

    .central-core {
        position: relative;
        top: auto;
        left: auto;
        width: 118px;
        height: 118px;
        grid-column: 1 / -1;
        margin: 12px auto 29px;
        transform: none;
    }

    .central-core .compass-mark { width: 56px; height: 73px; }

    .module-node,
    .module-node:hover {
        position: relative;
        top: auto;
        left: auto;
        width: 100%;
        height: 96px;
        padding: 13px 10px 11px;
        transform: none;
    }

    .module-node > svg { width: 24px; height: 24px; margin-bottom: 8px; }
    .module-node strong { max-width: 128px; font-size: 10.5px; }
}

@media (max-width: 720px) {
    .pusula-shell {
        gap: 30px;
        padding: max(22px, env(safe-area-inset-top)) max(16px, env(safe-area-inset-right)) max(38px, env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left));
    }
    .login-card { padding: 27px 22px; }
    .login-card-header { padding-bottom: 22px; }
    .login-heading { margin-top: 22px; }
    .module-hub { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
    .central-core { width: 104px; height: 104px; margin-bottom: 25px; }

    .module-node,
    .module-node:hover {
        min-height: 74px;
        height: 74px;
        flex-direction: row;
        justify-content: flex-start;
        gap: 10px;
        padding: 11px 12px;
    }

    .module-node > svg { flex: 0 0 auto; width: 20px; height: 20px; margin: 0; }
    .module-node strong { max-width: none; font-size: 10px; text-align: left; }
}

@media (max-width: 390px) {
    .pusula-shell {
        padding: max(16px, env(safe-area-inset-top)) max(12px, env(safe-area-inset-right)) max(30px, env(safe-area-inset-bottom)) max(12px, env(safe-area-inset-left));
    }

    .login-card { padding-inline: 18px; }
    .form-options { align-items: flex-start; }
    .remember-option, .forgot-link { font-size: 10px; }

    .module-node,
    .module-node:hover {
        min-height: 70px;
        height: 70px;
        gap: 8px;
        padding-inline: 10px;
    }

    .module-node strong { font-size: 9.5px; }
}

@media (max-height: 700px) and (min-width: 1021px) {
    .pusula-shell { padding-block: 18px; }
    .login-card { padding-block: 24px; }
    .login-card-header { padding-bottom: 18px; }
    .login-heading { margin-block: 18px 16px; }
    .module-hub { height: max(540px, 82svh); }
}

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