/* ==========================================================================
   SHAML login screen.
   The palette, the split layout and the live network panel come from the
   approved design. No CDN is used: the network is drawn on a 2D canvas and
   the icons are the Bootstrap Icons font the rest of the system already ships,
   so the screen renders identically on a machine with no internet.
   ========================================================================== */

:root {
    --login-primary: #00288e;
    --login-primary-soft: #1e40af;
    --login-secondary: #0058be;
    --login-accent: #adc6ff;
    --login-accent-soft: #dde1ff;

    --login-page-bg: #f8f9ff;
    --login-surface: #fff;
    --login-surface-soft: #eef4ff;
    --login-surface-high: #dbe9ff;
    --login-text: #001d35;
    --login-muted: #444653;
    --login-line: #c4c5d5;
    --login-field: #fff;
    --login-ring: rgb(0 40 142 / 18%);
    --login-shadow: 0 24px 70px rgb(0 29 53 / 12%);
    --login-success: #10b981;

    --login-topbar-h: 72px;
    --login-footer-h: 52px;

    color-scheme: light;
}

html[data-theme="dark"] {
    --login-primary: #5b82ff;
    --login-secondary: #249cff;
    --login-page-bg: #000b1d;
    --login-surface: #041027;
    --login-surface-soft: #071733;
    --login-surface-high: #0b2049;
    --login-text: #eaf1ff;
    --login-muted: #9fb2d4;
    --login-line: #1b2f57;
    --login-field: #061530;
    --login-ring: rgb(173 198 255 / 20%);
    --login-shadow: 0 30px 90px rgb(0 0 0 / 60%);

    color-scheme: dark;
}

* {
    box-sizing: border-box;
}

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

html[dir="rtl"] body {
    font-family: Cairo, Tahoma, Arial, sans-serif;
}

html[dir="ltr"] body {
    font-family: Inter, "Segoe UI", Arial, sans-serif;
}

body {
    display: flex;
    overflow-x: hidden;
    flex-direction: column;
    min-height: 100vh;
    color: var(--login-text);
    background: var(--login-page-bg);
}

button,
input,
a {
    font: inherit;
}

button,
a,
input[type="checkbox"] {
    touch-action: manipulation;
}

/* ---------------------------------------------------------------- top bar */
.login-topbar {
    position: fixed;
    z-index: 50;
    top: 0;
    right: 0;
    left: 0;
    display: flex;
    height: var(--login-topbar-h);
    align-items: center;
    justify-content: space-between;
    padding: 0 24px;
    border: 0;
    animation: login-fade-down .7s cubic-bezier(.16, 1, .3, 1) both;
    background: transparent;
    box-shadow: none;
}

.login-brand-mark {
    display: flex;
    align-items: center;
    gap: 12px;
}

.login-brand-mark img {
    width: auto;
    max-width: 280px;
    height: 56px;
    object-fit: contain;
}

.login-topbar-tools {
    display: flex;
    align-items: center;
    gap: 12px;
}

.login-language {
    display: flex;
    align-items: center;
    padding: 6px 14px;
    border: 1px solid rgb(196 197 213 / 55%);
    border-radius: 999px;
    backdrop-filter: blur(12px);
    background: color-mix(in srgb, var(--login-surface) 36%, transparent);
    gap: 8px;
    transition: border-color .3s ease, box-shadow .3s ease;
}

.login-language:hover {
    border-color: color-mix(in srgb, var(--login-primary) 40%, transparent);
    box-shadow: 0 8px 20px rgb(0 40 142 / 10%);
}

.login-language > i {
    color: var(--login-muted);
    font-size: 1.05rem;
    transition: transform .5s ease;
}

.login-language:hover > i {
    transform: rotate(180deg);
}

.login-language a {
    padding: 2px 8px;
    border-radius: 999px;
    color: var(--login-muted);
    font-size: .78rem;
    font-weight: 700;
    letter-spacing: .04em;
    text-decoration: none;
    transition: color .25s ease, background .25s ease;
}

.login-language a:hover,
.login-language a.active {
    color: #fff;
    background: var(--login-primary);
}

.login-theme-toggle {
    display: inline-flex;
    width: 40px;
    height: 40px;
    align-items: center;
    justify-content: center;
    border: 1px solid rgb(196 197 213 / 55%);
    border-radius: 999px;
    backdrop-filter: blur(12px);
    background: color-mix(in srgb, var(--login-surface) 36%, transparent);
    color: var(--login-muted);
    cursor: var(--eo-cursor-pointer), pointer;
    transition: color .3s ease, border-color .3s ease, box-shadow .3s ease;
}

.login-theme-toggle:hover {
    border-color: color-mix(in srgb, var(--login-primary) 40%, transparent);
    color: var(--login-primary);
    box-shadow: 0 8px 20px rgb(0 40 142 / 10%);
}

.login-theme-toggle i {
    font-size: 1.1rem;
    transition: transform .5s ease;
}

.login-theme-toggle:hover i {
    transform: rotate(-90deg);
}

/* These controls always sit above the dark network half of the page. In the
   light theme they need their own dark glass instead of the light page surface. */
html[data-theme="light"] .login-language,
html[data-theme="light"] .login-theme-toggle,
html[data-theme="light"] .login-footer-status {
    border-color: rgb(255 255 255 / 34%);
    background: rgb(4 16 39 / 76%);
    color: #eaf1ff;
    box-shadow: 0 10px 28px rgb(0 11 29 / 24%), inset 0 1px 0 rgb(255 255 255 / 12%);
}

html[data-theme="light"] .login-language > i,
html[data-theme="light"] .login-language a {
    color: #c7d7f5;
}

html[data-theme="light"] .login-language a:hover,
html[data-theme="light"] .login-language a.active {
    color: #fff;
}

html[data-theme="light"] .login-theme-toggle:hover {
    border-color: rgb(173 198 255 / 72%);
    color: #adc6ff;
}

/* ------------------------------------------------------------ page + shell */
.login-page {
    display: flex;
    min-height: 100vh;
    flex: 1 1 auto;

    /* The artwork continues behind both glass bars; safe space is applied to
       the panels so interactive content never sits beneath either bar. */
    padding: 0;
}

.login-shell {
    display: flex;
    width: 100%;
    min-height: 100vh;
    /* Layout order is fixed to the design (form left, network right) in both
       reading directions; the text inside each panel still follows the page. */
    direction: ltr;
}

.login-form-panel,
.login-brand-panel {
    position: relative;
    overflow: hidden;
    flex: 1 1 50%;
    direction: ltr;
}

html[dir="rtl"] .login-form-panel,
html[dir="rtl"] .login-brand-panel {
    direction: rtl;
}

/* --------------------------------------------------------- the form panel */
.login-form-panel {
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: calc(var(--login-topbar-h) + 24px) 32px calc(var(--login-footer-h) + 24px);
    border-inline-end: 1px solid rgb(196 197 213 / 18%);
    backdrop-filter: blur(14px);
    background: color-mix(in srgb, var(--login-surface) 84%, transparent);
    box-shadow: var(--login-shadow);
}

.login-glow-layer {
    position: absolute;
    overflow: hidden;
    inset: 0;
    pointer-events: none;
}

.login-glow {
    position: absolute;
    border-radius: 50%;
    filter: blur(130px);
    pointer-events: none;
}

.login-glow-one {
    top: -190px;
    width: 460px;
    height: 460px;
    background: rgb(221 225 255 / 70%);
    inset-inline-end: -190px;
}

.login-glow-two {
    bottom: -170px;
    width: 380px;
    height: 380px;
    background: rgb(173 198 255 / 55%);
    inset-inline-start: -160px;
}

html[data-theme="dark"] .login-glow-one {
    background: rgb(30 64 175 / 34%);
}

html[data-theme="dark"] .login-glow-two {
    background: rgb(0 88 190 / 26%);
}

.login-form-content {
    position: relative;
    z-index: 2;
    width: 100%;
    max-width: 460px;
    padding: 28px;
    border: 1px solid color-mix(in srgb, var(--login-line) 52%, transparent);
    border-radius: 28px;
    animation: login-rise .8s cubic-bezier(.16, 1, .3, 1) both .1s;
    backdrop-filter: blur(18px);
    background: color-mix(in srgb, var(--login-surface) 54%, transparent);
    box-shadow: 0 26px 70px rgb(0 11 29 / 22%), inset 0 1px 0 rgb(255 255 255 / 10%);
}

.login-form-content h1 {
    margin: 0 0 14px;
    font-size: clamp(1.9rem, 3.4vw, 2.6rem);
    font-weight: 800;
    letter-spacing: -.02em;
    line-height: 1.25;
    background: linear-gradient(to left, var(--login-primary), var(--login-secondary));
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

html[dir="ltr"] .login-form-content h1 {
    background: linear-gradient(to right, var(--login-primary), var(--login-secondary));
    -webkit-background-clip: text;
    background-clip: text;
}

.login-form-hint {
    margin: 0 0 34px;
    color: var(--login-muted);
    font-size: 1.02rem;
    font-weight: 500;
}

.login-error {
    display: grid;
    margin-bottom: 20px;
    padding: 12px 16px;
    border: 1px solid rgb(186 26 26 / 35%);
    border-radius: 12px;
    background: rgb(255 218 214 / 55%);
    color: #93000a;
    font-size: .9rem;
    gap: 6px;
}

html[data-theme="dark"] .login-error {
    background: rgb(93 0 10 / 34%);
    color: #ffb4ab;
}

.login-error div {
    display: flex;
    align-items: center;
    gap: 8px;
}

.login-form {
    display: grid;
    gap: 20px;
}

/* Floating-label field: the label sits inside the box and lifts on focus or
   once the field holds a value. :placeholder-shown is what makes "has a value"
   work without any script. */
.login-field {
    position: relative;
}

.login-field input[type="text"],
.login-field input[type="password"] {
    width: 100%;
    height: 68px;
    padding: 26px 20px 8px;
    border: 2px solid rgb(196 197 213 / 45%);
    border-radius: 16px;
    background: color-mix(in srgb, var(--login-field) 90%, transparent);
    color: var(--login-text);
    font-size: 1.05rem;
    outline: none;
    transition: border-color .3s ease, box-shadow .4s cubic-bezier(.16, 1, .3, 1), transform .4s cubic-bezier(.16, 1, .3, 1);
}

.login-field input::placeholder {
    color: transparent;
}

.login-field input:hover {
    border-color: color-mix(in srgb, var(--login-primary) 45%, transparent);
}

.login-field input:focus {
    border-color: color-mix(in srgb, var(--login-primary) 72%, transparent);
    box-shadow: 0 0 0 4px var(--login-ring), 0 16px 32px rgb(0 40 142 / 10%);
    transform: translateY(-3px);
}

.login-field label {
    position: absolute;
    top: 22px;
    color: var(--login-muted);
    font-size: 1rem;
    font-weight: 500;
    inset-inline-start: 21px;
    pointer-events: none;
    transition: transform .28s ease, color .28s ease, font-size .28s ease;
}

.login-field input:focus + label,
.login-field input:not(:placeholder-shown) + label {
    color: var(--login-muted);
    font-size: .76rem;
    font-weight: 700;
    transform: translateY(-14px);
}

.login-field input:focus + label {
    color: var(--login-primary);
}

.login-field input:-webkit-autofill,
.login-field input:-webkit-autofill:hover,
.login-field input:-webkit-autofill:focus {
    -webkit-text-fill-color: var(--login-text);
    box-shadow: 0 0 0 60px var(--login-field) inset;
}

.login-password-toggle {
    position: absolute;
    top: 50%;
    display: inline-flex;
    width: 40px;
    height: 40px;
    align-items: center;
    justify-content: center;
    border: 0;
    border-radius: 999px;
    background: transparent;
    color: var(--login-muted);
    cursor: var(--eo-cursor-pointer), pointer;
    inset-inline-end: 12px;
    transform: translateY(-50%);
    transition: color .3s ease, background .3s ease;
}

.login-password-toggle:hover {
    background: color-mix(in srgb, var(--login-primary) 10%, transparent);
    color: var(--login-primary);
}

.login-options {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 4px;
    gap: 14px;
}

.login-options a {
    color: var(--login-primary);
    font-size: .95rem;
    font-weight: 600;
    text-decoration: none;
    text-underline-offset: 4px;
}

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

.login-remember {
    display: inline-flex;
    align-items: center;
    color: var(--login-muted);
    cursor: var(--eo-cursor-pointer), pointer;
    font-size: .95rem;
    font-weight: 500;
    gap: 10px;
}

.login-remember input[type="checkbox"] {
    display: inline-grid;
    width: 22px;
    height: 22px;
    border: 2px solid rgb(196 197 213 / 70%);
    border-radius: 6px;
    appearance: none;
    background: var(--login-field);
    cursor: var(--eo-cursor-pointer), pointer;
    place-content: center;
    transition: background .25s ease, border-color .25s ease;
}

.login-remember input[type="checkbox"]::after {
    width: 10px;
    height: 6px;
    border: 2px solid #fff;
    border-top: 0;
    border-inline-end: 0;
    content: "";
    opacity: 0;
    transform: rotate(-45deg) scale(.5);
    transition: opacity .2s ease, transform .3s cubic-bezier(.34, 1.56, .64, 1);
}

.login-remember input[type="checkbox"]:checked {
    border-color: var(--login-primary);
    background: var(--login-primary);
}

.login-remember input[type="checkbox"]:checked::after {
    opacity: 1;
    transform: rotate(-45deg) scale(1);
}

.login-submit {
    position: relative;
    display: flex;
    overflow: hidden;
    width: 100%;
    height: 60px;
    align-items: center;
    justify-content: center;
    border: 0;
    border-radius: 14px;
    margin-top: 12px;
    background: linear-gradient(to left, var(--login-primary), var(--login-secondary));
    color: #fff;
    cursor: var(--eo-cursor-pointer), pointer;
    font-size: 1.12rem;
    font-weight: 700;
    gap: 12px;
    box-shadow: 0 16px 34px rgb(0 40 142 / 26%);
    transition: transform .4s cubic-bezier(.16, 1, .3, 1), box-shadow .4s ease, filter .3s ease;
}

html[dir="ltr"] .login-submit {
    background: linear-gradient(to right, var(--login-primary), var(--login-secondary));
}

.login-submit::after {
    position: absolute;
    top: 0;
    left: 0;
    width: 200%;
    height: 100%;
    animation: login-shimmer 3.4s linear infinite;
    background: linear-gradient(90deg, transparent, rgb(255 255 255 / 28%), transparent);
    content: "";
    pointer-events: none;
}

.login-submit:hover {
    filter: brightness(1.06);
    box-shadow: 0 22px 44px rgb(0 40 142 / 38%);
    transform: translateY(-4px);
}

.login-submit:disabled {
    cursor: progress;
    filter: none;
    opacity: .85;
    transform: none;
}

.login-submit-arrow {
    font-size: 1.25rem;
    transition: transform .3s ease;
}

.login-submit:hover .login-submit-arrow {
    transform: translateX(-8px);
}

html[dir="ltr"] .login-submit:hover .login-submit-arrow {
    transform: translateX(8px);
}

.login-submit.is-loading .login-submit-arrow {
    animation: login-spin 1s linear infinite;
}

.login-secure-note {
    display: flex;
    margin-top: 18px;
    justify-content: center;
}

.login-secure-note span {
    display: inline-flex;
    align-items: center;
    padding: 10px 22px;
    border: 1px solid rgb(196 197 213 / 40%);
    border-radius: 999px;
    background: color-mix(in srgb, var(--login-surface-soft) 70%, transparent);
    color: var(--login-muted);
    font-size: .9rem;
    font-weight: 500;
    gap: 10px;
}

.login-secure-note i {
    color: var(--login-success);
    font-size: 1.05rem;
}

/* ------------------------------------------------------- the network panel */
.login-brand-panel {
    display: flex;
    flex-direction: column;
    padding: calc(var(--login-topbar-h) + 24px) 34px calc(var(--login-footer-h) + 24px);
    background: radial-gradient(circle at center, #001a42 0%, #000b1d 100%);
    color: #fff;
    gap: 22px;
    transition: background .6s ease;
}

.login-brand-panel.is-focused {
    background: radial-gradient(circle at center, #00288e 0%, #000b1d 100%);
}

.login-network {
    position: absolute;
    z-index: 0;
    inset: 0;
    width: 100%;
    height: 100%;
}

.login-node {
    position: absolute;
    z-index: 1;
    display: flex;
    width: 54px;
    height: 54px;
    align-items: center;
    justify-content: center;
    border: 1px solid rgb(173 198 255 / 40%);
    border-radius: 50%;
    animation: login-node-pulse 4s cubic-bezier(.4, 0, .2, 1) infinite;
    backdrop-filter: blur(10px);
    background: rgb(30 64 175 / 32%);
    color: #fff;
    font-size: 1.3rem;
    pointer-events: none;
    transform: translate(-50%, -50%);
}

.login-brand-logo {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    animation: login-fade-down .8s cubic-bezier(.16, 1, .3, 1) both .15s;
    padding-block: 4px;
    gap: 18px;
}

.login-brand-logo span {
    display: flex;
    width: 108px;
    height: 108px;
    align-items: center;
    justify-content: center;
    padding: 18px;
    border: 1px solid rgb(255 255 255 / 40%);
    border-radius: 30px;
    backdrop-filter: blur(24px);
    background: rgb(255 255 255 / 10%);
    box-shadow: 0 0 40px rgb(30 64 175 / 55%);
    transition: transform .5s cubic-bezier(.16, 1, .3, 1);
}

.login-brand-logo span:hover {
    transform: scale(1.08) rotate(4deg);
}

.login-brand-logo img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.login-brand-logo .login-customer-logo {
    width: 108px;
    height: 108px;
    align-self: center;
    padding: 18px;
    border-radius: 30px;
}

.login-brand-body {
    position: relative;
    z-index: 2;
    display: flex;
    overflow-y: auto;
    min-height: 0;
    flex: 1 1 auto;
    flex-direction: column;
    justify-content: center;
    width: 100%;
    max-width: 620px;
    margin-inline: auto;
    gap: 20px;
    scrollbar-width: none;
}

.login-brand-body::-webkit-scrollbar {
    display: none;
}

.login-online-badge {
    display: inline-flex;
    align-items: center;
    align-self: flex-start;
    padding: 8px 18px;
    border: 1px solid rgb(16 185 129 / 40%);
    border-radius: 999px;
    background: rgb(16 185 129 / 16%);
    color: #d7fbee;
    font-size: .86rem;
    font-weight: 600;
    gap: 10px;
}

.login-online-badge > i {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    animation: login-blink 2.2s ease-in-out infinite;
    background: var(--login-success);
    box-shadow: 0 0 14px rgb(16 185 129 / 90%);
}

.login-brand-copy h2 {
    margin: 0 0 12px;
    color: #fff;
    font-size: clamp(1.8rem, 3.1vw, 2.7rem);
    font-weight: 800;
    letter-spacing: -.01em;
    line-height: 1.2;
    text-shadow: 0 2px 10px rgb(0 0 0 / 45%);
}

.login-brand-copy h2 em {
    color: var(--login-accent);
    font-style: normal;
}

.login-brand-copy p {
    max-width: 52ch;
    margin: 0;
    color: var(--login-accent);
    font-size: .98rem;
    font-weight: 500;
    line-height: 1.7;
}

/* The snapshot card. Every fill here is translucent on purpose so the live
   network behind the panel keeps showing through the card and its tiles. */
.login-workspace-card {
    overflow: hidden;
    padding: 22px;
    border: 1px solid rgb(255 255 255 / 18%);
    border-radius: 22px;
    backdrop-filter: blur(22px);
    background: rgb(255 255 255 / 7%);
    box-shadow: 0 18px 48px rgb(0 0 0 / 28%), inset 0 1px 0 0 rgb(255 255 255 / 22%);
}

.login-workspace-card > header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 18px;
    gap: 14px;
}

.login-workspace-card > header strong {
    display: inline-flex;
    align-items: center;
    color: #fff;
    font-size: .98rem;
    font-weight: 700;
    gap: 10px;
}

.login-workspace-card > header strong i {
    color: var(--login-accent);
    font-size: 1.05rem;
}

.login-workspace-card > header > span {
    padding: 5px 14px;
    border: 1px solid rgb(16 185 129 / 40%);
    border-radius: 999px;
    background: rgb(16 185 129 / 18%);
    color: #6ee7b7;
    font-size: .76rem;
    font-weight: 700;
    white-space: nowrap;
}

.login-workspace-metrics {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
}

.login-workspace-metrics > span {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 16px 10px;
    border: 1px solid rgb(255 255 255 / 14%);
    border-radius: 16px;
    background: rgb(255 255 255 / 5%);
    gap: 8px;
    text-align: center;
}

.login-workspace-metrics small {
    color: var(--login-accent);
    font-size: .74rem;
    font-weight: 600;
}

.login-workspace-metrics i {
    color: var(--login-accent-soft);
    font-size: 1.25rem;
}

.login-workspace-metrics > span:nth-child(2) i {
    color: #ffd166;
}

.login-workspace-metrics > span:nth-child(3) i {
    color: #6ee7b7;
}

.login-workspace-metrics b {
    color: #fff;
    font-size: .88rem;
    font-weight: 700;
}

.login-readiness {
    display: grid;
    margin-top: 18px;
    gap: 14px;
}

.login-readiness > div {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 6px 12px;
}

.login-readiness > div > span {
    color: #fff;
    font-size: .82rem;
    font-weight: 600;
}

.login-readiness > div > b {
    color: var(--login-accent);
    font-size: .82rem;
    font-weight: 800;
}

.login-readiness > div:nth-child(2) > b {
    color: #6ee7b7;
}

.login-readiness > div > i {
    display: block;
    overflow: hidden;
    height: 6px;
    border-radius: 999px;
    background: rgb(255 255 255 / 12%);
    grid-column: 1 / -1;
}

.login-readiness > div > i > em {
    display: block;
    width: 100%;
    height: 100%;
    border-radius: 999px;
    animation: login-bar-grow 1.6s cubic-bezier(.16, 1, .3, 1) both .5s;
    background: linear-gradient(to left, var(--login-accent), #7aa2ff);
}

.login-readiness > div:nth-child(2) > i > em {
    background: linear-gradient(to left, #6ee7b7, var(--login-success));
}

/* The three status pills under the sign-in form. */
.login-security-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    margin-top: 26px;
    gap: 12px;
}

.login-security-grid > span {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 12px 8px;
    border: 1px solid rgb(196 197 213 / 40%);
    border-radius: 14px;
    background: color-mix(in srgb, var(--login-surface-soft) 48%, transparent);
    gap: 4px;
    text-align: center;
}

.login-security-grid small {
    color: var(--login-primary);
    font-size: .72rem;
    font-weight: 700;
}

.login-security-grid b {
    color: var(--login-text);
    font-size: .84rem;
    font-weight: 700;
}

/* ----------------------------------------------------------------- footer */
.login-footer {
    position: fixed;
    z-index: 50;
    right: 0;
    bottom: 0;
    left: 0;
    display: flex;
    height: var(--login-footer-h);
    align-items: center;
    justify-content: space-between;
    padding: 0 24px;
    border: 0;
    background: transparent;
    box-shadow: none;
    color: var(--login-muted);
    font-size: .85rem;
    gap: 16px;
}

.login-footer strong {
    color: var(--login-text);
}

.login-footer-status {
    display: inline-flex;
    align-items: center;
    padding: 6px 16px;
    border: 1px solid rgb(196 197 213 / 45%);
    border-radius: 999px;
    backdrop-filter: blur(12px);
    background: color-mix(in srgb, var(--login-surface) 32%, transparent);
    font-weight: 700;
    gap: 10px;
    white-space: nowrap;
}

.login-footer-status > i {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    animation: login-blink 2.2s ease-in-out infinite;
    background: var(--login-success);
    box-shadow: 0 0 14px rgb(16 185 129 / 90%);
}

html[data-theme="light"] .login-footer-status > span {
    color: #eaf1ff;
}

/* ------------------------------------------------------------------ focus */
.login-theme-toggle:focus-visible,
.login-language a:focus-visible,
.login-password-toggle:focus-visible,
.login-submit:focus-visible,
.login-options a:focus-visible,
.login-field input:focus-visible,
.login-remember input:focus-visible {
    outline: 3px solid color-mix(in srgb, var(--login-primary) 55%, transparent);
    outline-offset: 3px;
}

/* -------------------------------------------------------------- keyframes */
@keyframes login-fade-down {
    from {
        opacity: 0;
        transform: translateY(-16px);
    }

    to {
        opacity: 1;
        transform: none;
    }
}

@keyframes login-rise {
    from {
        opacity: 0;
        transform: translateY(28px) scale(.97);
    }

    to {
        opacity: 1;
        transform: none;
    }
}

@keyframes login-shimmer {
    from {
        transform: translateX(-150%) skewX(-20deg);
    }

    to {
        transform: translateX(150%) skewX(-20deg);
    }
}

@keyframes login-spin {
    to {
        transform: rotate(360deg);
    }
}

@keyframes login-float {
    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-9px);
    }
}

@keyframes login-node-pulse {
    0%,
    100% {
        border-color: rgb(173 198 255 / 30%);
        box-shadow: 0 0 16px rgb(30 64 175 / 40%);
    }

    50% {
        border-color: rgb(173 198 255 / 65%);
        box-shadow: 0 0 42px rgb(30 64 175 / 80%);
    }
}

@keyframes login-blink {
    0%,
    100% {
        opacity: 1;
    }

    50% {
        opacity: .35;
    }
}

@keyframes login-bar-grow {
    from {
        width: 0;
    }
}

/* ------------------------------------------------------------- responsive */
@media (max-width: 1180px) {
    .login-brand-panel {
        padding: 26px;
    }

    .login-workspace-card {
        padding: 18px;
    }
}

@media (max-width: 992px) {
    .login-shell {
        flex-direction: column;
    }

    /* Stacked: the sign-in form comes first. Putting the brand panel on top left a
       phone user scrolling past ~900px of marketing to reach the password box. */
    .login-brand-panel {
        min-height: 0;
        flex: none;
        padding: 26px 22px calc(var(--login-footer-h) + 34px);
    }

    .login-form-panel {
        padding: calc(var(--login-topbar-h) + 24px) 22px 44px;
        border-inline-end: 0;
    }

    .login-brand-body {
        overflow: visible;
    }

    .login-brand-copy p {
        max-width: none;
    }
}

@media (max-width: 640px) {
    :root {
        --login-topbar-h: 62px;
        --login-footer-h: 78px;
    }

    .login-topbar,
    .login-footer {
        padding: 0 14px;
    }

    .login-brand-mark img {
        max-width: 128px;
        height: 30px;
    }

    .login-form-content {
        padding: 24px 20px;
        border-radius: 24px;
    }

    .login-options {
        gap: 8px;
    }

    .login-options a,
    .login-remember {
        font-size: .82rem;
        white-space: nowrap;
    }

    .login-language {
        padding: 5px 10px;
        gap: 6px;
    }

    .login-language > i {
        display: none;
    }

    .login-brand-panel {
        min-height: 0;
        padding: 20px 18px calc(var(--login-footer-h) + 26px);
    }

    .login-brand-logo span {
        width: 78px;
        height: 78px;
        padding: 12px;
        border-radius: 22px;
    }

    .login-workspace-metrics {
        grid-template-columns: minmax(0, 1fr);
    }

    .login-security-grid {
        gap: 8px;
    }

    .login-security-grid > span {
        padding: 10px 4px;
    }

    .login-node {
        width: 42px;
        height: 42px;
        font-size: 1rem;
    }

    .login-footer {
        font-size: .74rem;
    }

    .login-footer-status {
        padding: 5px 10px;
    }
}

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

/* --------------------------------------------------------------------------
   Fit. The screen is designed to sit between the fixed bars without the page
   scrolling; these are the size corrections that make it hold on a 720px-tall
   viewport. Below that the panels stack and the page scrolls normally.
   -------------------------------------------------------------------------- */
.login-brand-body > * {
    /* Without this the snapshot card is the flex item that gives way and
       collapses to a sliver when the panel runs short. */
    flex: none;
}

@media (min-height: 1px) {
    :root {
        --login-topbar-h: 64px;
    }

    .login-form-panel {
        padding: calc(var(--login-topbar-h) + 18px) 32px calc(var(--login-footer-h) + 18px);
    }

    .login-form-content h1 {
        font-size: clamp(1.6rem, 2.6vw, 2.15rem);
    }

    .login-form-hint {
        margin-bottom: 22px;
        font-size: .96rem;
    }

    .login-form {
        gap: 16px;
    }

    .login-field input[type="text"],
    .login-field input[type="password"] {
        height: 60px;
        padding: 23px 18px 7px;
        font-size: 1rem;
    }

    .login-field label {
        top: 19px;
        font-size: .95rem;
    }

    .login-field input:focus + label,
    .login-field input:not(:placeholder-shown) + label {
        transform: translateY(-12px);
    }

    .login-submit {
        height: 54px;
        margin-top: 4px;
        font-size: 1.05rem;
    }

    .login-security-grid {
        margin-top: 18px;
    }

    .login-secure-note {
        margin-top: 14px;
    }

    .login-brand-panel {
        padding: calc(var(--login-topbar-h) + 18px) 30px calc(var(--login-footer-h) + 18px);
        gap: 16px;
    }

    .login-brand-logo span {
        width: 88px;
        height: 88px;
        padding: 14px;
        border-radius: 24px;
    }

    .login-brand-copy h2 {
        font-size: clamp(1.55rem, 2.6vw, 2.2rem);
    }

    .login-brand-copy p {
        font-size: .92rem;
    }

    .login-workspace-card {
        padding: 18px;
    }

    .login-workspace-metrics > span {
        padding: 12px 8px;
        gap: 6px;
    }
}

/* Neither panel may push the shell past the space between the fixed bars: a flex
   item's default min-height is its content, which is what made the whole page
   scroll. With min-height 0 each panel keeps its slot and scrolls its own content
   only when that content genuinely does not fit. */
@media (min-width: 993px) {
    /* Cap the page at the viewport. min-height alone lets the body grow to fit its
       content, which is what kept the whole page scrolling instead of the panels. */
    html,
    body {
        height: 100vh;
        min-height: 0;
    }

    body {
        overflow: hidden;
    }

    .login-form-panel,
    .login-brand-panel {
        min-height: 0;
    }

    .login-form-panel {
        overflow-y: auto;
        scrollbar-width: thin;
    }

    .login-brand-panel {
        padding: calc(var(--login-topbar-h) + 12px) 26px calc(var(--login-footer-h) + 12px);
        gap: 12px;
    }

    .login-brand-logo span {
        width: 74px;
        height: 74px;
        padding: 12px;
        border-radius: 20px;
    }

    .login-brand-logo .login-customer-logo {
        width: 74px;
        height: 74px;
        padding: 12px;
        border-radius: 20px;
    }

    .login-brand-body {
        gap: 16px;
    }

    .login-brand-copy h2 {
        font-size: clamp(1.45rem, 2.3vw, 1.95rem);
    }

    .login-workspace-card {
        padding: 16px;
    }

    .login-workspace-card > header {
        margin-bottom: 14px;
    }

    .login-workspace-metrics > span {
        padding: 10px 8px;
    }

    .login-readiness {
        margin-top: 14px;
        gap: 10px;
    }
}

/* The mesh runs behind the copy, so the copy gets its own soft scrim: the lines
   still read through it, the text stays legible over them. The node badges are
   positioned out at the panel margins instead of over the text column. */
.login-brand-copy {
    position: relative;
}

.login-brand-copy::before {
    position: absolute;
    z-index: -1;
    background: radial-gradient(ellipse at center, rgb(0 11 29 / 72%) 0%, rgb(0 11 29 / 0%) 72%);
    content: "";
    inset: -28px -44px;
    pointer-events: none;
}

/* cursor.css is written against body.inventory-body, which the login body now carries
   so the screen uses the same cursor set as the rest of the system. The login page
   loads no other stylesheet that targets that class, so nothing else comes with it. */

/* The badges read as background, not as foreground objects sitting on the copy. */
.login-node {
    opacity: .58;
}

/* The compaction block above pulls the top bar down to 64px, which left the
   enlarged wordmark with about 4px of air above and below it. The bar gets a
   little of that height back and the mark is sized to sit inside it. */
@media (min-height: 1px) {
    :root {
        --login-topbar-h: 72px;
    }

    .login-brand-mark img {
        max-width: 260px;
        height: 52px;
    }
}

@media (max-width: 640px) {
    .login-brand-mark img {
        max-width: 150px;
        height: 38px;
    }
}

/* Brand identities are the first element inside the network panel. The earlier
   fit rules made them too small to inspect on a desktop, particularly when a
   customer or Demo mark is present beside SHAML. */
.login-brand-logo > span:first-child {
    border-color: rgb(173 198 255 / 42%);
    box-shadow: 0 16px 34px rgb(0 11 29 / 42%), 0 0 34px rgb(30 64 175 / 36%);
}

@media (width >= 993px) and (height >= 701px) {
    .login-brand-logo > span:first-child {
        width: 132px;
        height: 132px;
        padding: 20px;
        border-radius: 30px;
    }

    .login-brand-logo .login-customer-logo {
        width: 132px;
        height: 132px;
        padding: 20px;
        border-radius: 30px;
    }
}

@media (width >= 993px) and (height <= 700px) {
    .login-brand-logo > span:first-child {
        width: 98px;
        height: 98px;
        padding: 15px;
        border-radius: 24px;
    }

    .login-brand-logo .login-customer-logo {
        width: 98px;
        height: 98px;
        padding: 15px;
        border-radius: 24px;
    }
}

@media (width >= 641px) and (width <= 992px) {
    .login-brand-logo > span:first-child {
        width: 112px;
        height: 112px;
        padding: 17px;
        border-radius: 28px;
    }

    .login-brand-logo .login-customer-logo {
        width: 112px;
        height: 112px;
        padding: 17px;
        border-radius: 28px;
    }
}

/* Stacked layouts scroll as one document. The last panel supplies the safe
   space while the footer content floats over the page artwork. */
@media (width <= 992px) {
    .login-footer {
        min-height: var(--login-footer-h);
        padding-block: 12px;
    }
}

@media (width <= 640px) {
    .login-brand-logo > span:first-child {
        width: 96px;
        height: 96px;
        padding: 14px;
        border-radius: 26px;
    }

    .login-brand-logo .login-customer-logo {
        width: 96px;
        height: 96px;
        padding: 14px;
        border-radius: 26px;
    }

    .login-footer {
        align-items: flex-start;
        flex-direction: column;
        gap: 7px;
    }
}

/* --------------------------------------------------------------------------
   Responsive finishing pass

   The fixed header/footer are valuable on a wide display, but a 1366x600
   laptop only leaves a small vertical budget for each side of the split view.
   Compact the desktop composition by height before allowing any content to
   scroll. On a stacked tablet/phone layout the footer returns to normal flow,
   so it can never cover the final sign-in or status content.
   -------------------------------------------------------------------------- */
@media (width >= 993px) and (height <= 720px) {
    :root {
        --login-topbar-h: 58px;
        --login-footer-h: 42px;
    }

    .login-topbar,
    .login-footer {
        padding-inline: 18px;
    }

    .login-brand-mark img {
        max-width: 190px;
        height: 40px;
    }

    .login-language {
        padding: 4px 10px;
    }

    .login-theme-toggle {
        width: 36px;
        height: 36px;
    }

    .login-form-panel {
        padding: calc(var(--login-topbar-h) + 10px) 24px calc(var(--login-footer-h) + 10px);
    }

    .login-form-content {
        max-width: 430px;
        padding: 20px;
        border-radius: 22px;
    }

    .login-form-content h1 {
        margin-bottom: 8px;
        font-size: clamp(1.5rem, 2.2vw, 1.9rem);
    }

    .login-form-hint {
        margin-bottom: 16px;
        font-size: .9rem;
    }

    .login-form {
        gap: 12px;
    }

    .login-field input[type="text"],
    .login-field input[type="password"] {
        height: 54px;
        padding: 20px 16px 6px;
        border-radius: 14px;
        font-size: .94rem;
    }

    .login-field label {
        top: 17px;
        font-size: .88rem;
        inset-inline-start: 17px;
    }

    .login-field input:focus + label,
    .login-field input:not(:placeholder-shown) + label {
        font-size: .7rem;
        transform: translateY(-10px);
    }

    .login-password-toggle {
        width: 34px;
        height: 34px;
        inset-inline-end: 10px;
    }

    .login-options,
    .login-options a,
    .login-remember {
        font-size: .82rem;
    }

    .login-remember {
        gap: 7px;
    }

    .login-remember input[type="checkbox"] {
        width: 19px;
        height: 19px;
    }

    .login-submit {
        height: 48px;
        margin-top: 0;
        border-radius: 12px;
        font-size: .98rem;
    }

    .login-security-grid {
        margin-top: 14px;
        gap: 8px;
    }

    .login-security-grid > span {
        padding: 8px 5px;
        border-radius: 11px;
    }

    .login-security-grid small {
        font-size: .64rem;
    }

    .login-security-grid b {
        font-size: .72rem;
    }

    .login-secure-note {
        margin-top: 10px;
    }

    .login-secure-note span {
        padding: 7px 14px;
        font-size: .75rem;
    }

    .login-brand-panel {
        padding: calc(var(--login-topbar-h) + 8px) 22px calc(var(--login-footer-h) + 8px);
    }

    .login-brand-logo {
        gap: 12px;
    }

    .login-brand-logo > span:first-child,
    .login-brand-logo .login-customer-logo {
        width: 72px;
        height: 72px;
        padding: 11px;
        border-radius: 18px;
    }

    .login-brand-body {
        gap: 10px;
    }

    .login-online-badge {
        padding: 6px 12px;
        font-size: .72rem;
    }

    .login-brand-copy h2 {
        margin-bottom: 6px;
        font-size: clamp(1.32rem, 2vw, 1.7rem);
    }

    .login-brand-copy p {
        font-size: .78rem;
        line-height: 1.45;
    }

    .login-workspace-card {
        padding: 12px;
        border-radius: 16px;
    }

    .login-workspace-card > header {
        margin-bottom: 10px;
    }

    .login-workspace-card > header strong {
        font-size: .78rem;
    }

    .login-workspace-card > header > span {
        padding: 4px 9px;
        font-size: .62rem;
    }

    .login-workspace-metrics {
        gap: 8px;
    }

    .login-workspace-metrics > span {
        padding: 8px 4px;
        border-radius: 11px;
        gap: 4px;
    }

    .login-workspace-metrics small,
    .login-workspace-metrics b,
    .login-readiness > div > span,
    .login-readiness > div > b {
        font-size: .64rem;
    }

    .login-workspace-metrics i {
        font-size: 1rem;
    }

    .login-readiness {
        margin-top: 10px;
        gap: 7px;
    }

    .login-readiness > div {
        gap: 4px 8px;
    }

    .login-readiness > div > i {
        height: 4px;
    }

    .login-footer {
        font-size: .72rem;
    }

    .login-footer-status {
        padding: 4px 10px;
        font-size: .7rem;
    }
}

@media (width <= 992px) {
    .login-page,
    .login-shell {
        min-height: auto;
    }

    .login-footer {
        position: relative;
        height: auto;
        min-height: var(--login-footer-h);
        background: var(--login-page-bg);
    }

    .login-brand-panel {
        padding-bottom: 30px;
    }
}

@media (width <= 480px) {
    :root {
        --login-topbar-h: 56px;
        --login-footer-h: auto;
    }

    .login-topbar {
        padding-inline: 10px;
    }

    .login-brand-mark img {
        max-width: 112px;
        height: 30px;
    }

    .login-topbar-tools {
        gap: 6px;
    }

    .login-language {
        padding: 4px 7px;
    }

    .login-language a {
        padding-inline: 5px;
        font-size: .7rem;
    }

    .login-theme-toggle {
        width: 34px;
        height: 34px;
    }

    .login-form-panel {
        padding: calc(var(--login-topbar-h) + 16px) 12px 26px;
    }

    .login-form-content {
        padding: 20px 15px;
        border-radius: 20px;
    }

    .login-form-content h1 {
        font-size: 1.56rem;
    }

    .login-options {
        align-items: flex-start;
        flex-wrap: wrap;
    }

    .login-options a,
    .login-remember {
        font-size: .78rem;
    }

    .login-security-grid {
        grid-template-columns: 1fr;
    }

    .login-security-grid > span {
        flex-direction: row;
        justify-content: space-between;
        padding-inline: 11px;
    }

    .login-footer {
        padding: 12px;
        font-size: .7rem;
    }

    .login-footer-status {
        align-self: flex-start;
    }
}