/* TERRA premium login — local CSS/SVG, zero idle requests, transform-only motion. */

:root {
    --terra-blue: #086bfa;
    --terra-blue-hover: #075bd4;
    --terra-blue-soft: rgba(8, 107, 250, .12);
    --terra-ink: #101828;
    --terra-text: #344054;
    --terra-muted: #7a8699;
    --terra-line: #dbe3ef;
    --terra-white: #fff;
    --terra-success: #1da76f;
    --terra-danger: #d92d20;
    --terra-danger-bg: #fff5f4;
    --terra-danger-line: #ffd4cf;
    --terra-space-star: rgba(35, 126, 226, .42);
    --terra-space-star-bright: rgba(14, 105, 218, .66);
    --terra-space-halo: rgba(70, 159, 255, .16);
    --terra-field-dot: rgba(8, 107, 250, .2);
    --terra-field-dot-soft: rgba(8, 107, 250, .12);
    color-scheme: light;
}

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

html, body {
    width: 100%;
    height: 100%;
    min-height: 100%;
    overflow: hidden;
    overscroll-behavior: none;
}
button, input { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }

body.login-cinematic {
    height: 100vh;
    height: 100dvh;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    color: var(--terra-ink);
    font-family: "Segoe UI Variable Text", "Segoe UI Variable", "Noto Sans Arabic", "Segoe UI", Tahoma, Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    position: relative;
    isolation: isolate;
    background:
        linear-gradient(112deg, rgba(220, 239, 255, .6) 0%, rgba(255, 255, 255, 0) 44%),
        linear-gradient(148deg, #f8fbff 0%, #fff 48%, #f1f7ff 100%);
}

.terra-cosmos {
    position: fixed;
    z-index: 0;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
    contain: strict;
}

.terra-cosmos::before,
.terra-cosmos::after {
    content: "";
    position: absolute;
    pointer-events: none;
    background-repeat: repeat;
    will-change: transform;
}

.terra-cosmos::before {
    inset: -18% -12%;
    opacity: .5;
    background-image: radial-gradient(circle, var(--terra-field-dot) 0 .7px, transparent 1px);
    background-size: 8px 8px;
    -webkit-mask-image: radial-gradient(
        ellipse 73% 76% at 31% 51%,
        transparent 0 36%,
        rgba(0, 0, 0, .92) 39% 41%,
        transparent 44% 47%,
        rgba(0, 0, 0, .8) 50% 53%,
        transparent 56% 59%,
        rgba(0, 0, 0, .6) 62% 65%,
        transparent 68% 72%,
        rgba(0, 0, 0, .34) 75% 78%,
        transparent 82%
    );
    mask-image: radial-gradient(
        ellipse 73% 76% at 31% 51%,
        transparent 0 36%,
        rgba(0, 0, 0, .92) 39% 41%,
        transparent 44% 47%,
        rgba(0, 0, 0, .8) 50% 53%,
        transparent 56% 59%,
        rgba(0, 0, 0, .6) 62% 65%,
        transparent 68% 72%,
        rgba(0, 0, 0, .34) 75% 78%,
        transparent 82%
    );
    transform: translate3d(-.8%, -.5%, 0) rotate(-1.5deg) scale(1.02);
    animation: terra-cosmos-field-a 38s ease-in-out infinite alternate;
}

.terra-cosmos::after {
    inset: -12%;
    opacity: .28;
    background-image: radial-gradient(circle, var(--terra-field-dot-soft) 0 .65px, transparent .95px);
    background-size: 18px 18px;
    -webkit-mask-image: radial-gradient(ellipse 61% 86% at 31% 51%, #000 0 20%, rgba(0, 0, 0, .58) 42%, transparent 76%);
    mask-image: radial-gradient(ellipse 61% 86% at 31% 51%, #000 0 20%, rgba(0, 0, 0, .58) 42%, transparent 76%);
    transform: translate3d(.5%, .4%, 0) scale(1.015);
    animation: terra-cosmos-field-b 46s ease-in-out infinite alternate;
}

.terra-comet {
    position: absolute;
    width: 170px;
    height: 1px;
    border-radius: 999px;
    opacity: 0;
    background: linear-gradient(90deg, transparent, rgba(132, 215, 255, .16), rgba(238, 251, 255, .96));
    box-shadow: 0 0 9px rgba(66, 178, 255, .55);
    transform-origin: right center;
    will-change: transform, opacity;
}

.terra-comet::after {
    content: "";
    position: absolute;
    top: 50%;
    right: -2px;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 0 7px #fff, 0 0 17px rgba(51, 178, 255, .95);
    transform: translateY(-50%);
}

.terra-comet-one {
    top: 9%;
    left: -16%;
    animation: terra-comet-one 19s cubic-bezier(.42, 0, .3, 1) infinite;
}

.terra-comet-two {
    right: -18%;
    bottom: 18%;
    width: 120px;
    animation: terra-comet-two 27s cubic-bezier(.42, 0, .3, 1) -8s infinite;
}

.terra-celestial-body {
    position: absolute;
    top: 19%;
    left: 34%;
    width: 10px;
    height: 10px;
    border: 1px solid rgba(185, 233, 255, .85);
    border-radius: 50%;
    background: radial-gradient(circle at 35% 30%, #fff, #65c9ff 32%, #086bfa 72%);
    box-shadow: 0 0 8px rgba(87, 194, 255, .9), 0 0 24px rgba(8, 107, 250, .46);
    animation: terra-celestial-float 13s ease-in-out infinite alternate;
    will-change: transform;
}

body.login-cinematic::before {
    content: "";
    position: fixed;
    z-index: 0;
    inset: -8%;
    pointer-events: none;
    opacity: .86;
    background-image:
        radial-gradient(circle at 7% 18%, var(--terra-space-star-bright) 0 1px, var(--terra-space-halo) 1.5px 3px, transparent 4px),
        radial-gradient(circle at 14% 76%, var(--terra-space-star) 0 .8px, transparent 1.5px),
        radial-gradient(circle at 22% 10%, var(--terra-space-star) 0 .65px, transparent 1.3px),
        radial-gradient(circle at 28% 64%, var(--terra-space-star-bright) 0 1px, var(--terra-space-halo) 1.6px 3.2px, transparent 4.2px),
        radial-gradient(circle at 35% 30%, var(--terra-space-star) 0 .75px, transparent 1.45px),
        radial-gradient(circle at 42% 83%, var(--terra-space-star) 0 .6px, transparent 1.2px),
        radial-gradient(circle at 49% 14%, var(--terra-space-star-bright) 0 .9px, var(--terra-space-halo) 1.4px 2.8px, transparent 3.8px),
        radial-gradient(circle at 56% 53%, var(--terra-space-star) 0 .72px, transparent 1.45px),
        radial-gradient(circle at 63% 73%, var(--terra-space-star-bright) 0 .95px, var(--terra-space-halo) 1.5px 3px, transparent 4px),
        radial-gradient(circle at 70% 27%, var(--terra-space-star) 0 .7px, transparent 1.4px),
        radial-gradient(circle at 77% 88%, var(--terra-space-star) 0 .78px, transparent 1.48px),
        radial-gradient(circle at 84% 11%, var(--terra-space-star-bright) 0 1px, var(--terra-space-halo) 1.6px 3px, transparent 4px),
        radial-gradient(circle at 91% 62%, var(--terra-space-star) 0 .72px, transparent 1.45px),
        radial-gradient(circle at 96% 38%, var(--terra-space-star-bright) 0 .9px, var(--terra-space-halo) 1.4px 2.8px, transparent 3.8px),
        radial-gradient(circle at 5% 92%, var(--terra-space-star) 0 .65px, transparent 1.3px),
        radial-gradient(circle at 87% 46%, var(--terra-space-star) 0 .6px, transparent 1.2px);
    background-repeat: no-repeat;
    transform: translate3d(-1.2%, -.8%, 0) scale(1.02);
    animation: terra-space-far-drift 36s ease-in-out infinite alternate;
    will-change: transform;
}

body.login-cinematic::after {
    content: "";
    position: fixed;
    z-index: 0;
    inset: -10%;
    pointer-events: none;
    opacity: .92;
    background-image:
        radial-gradient(circle at 9% 38%, var(--terra-space-star-bright) 0 1.3px, var(--terra-space-halo) 2px 4px, transparent 5px),
        radial-gradient(circle at 18% 57%, var(--terra-space-star) 0 .9px, transparent 1.7px),
        radial-gradient(circle at 33% 16%, var(--terra-space-star) 0 .8px, transparent 1.6px),
        radial-gradient(circle at 46% 72%, var(--terra-space-star-bright) 0 1.2px, var(--terra-space-halo) 1.9px 3.8px, transparent 4.8px),
        radial-gradient(circle at 58% 34%, var(--terra-space-star) 0 .85px, transparent 1.65px),
        radial-gradient(circle at 69% 86%, var(--terra-space-star-bright) 0 1.1px, var(--terra-space-halo) 1.8px 3.6px, transparent 4.6px),
        radial-gradient(circle at 74% 16%, rgba(90, 178, 255, .9) 0 2px, rgba(52, 155, 255, .28) 3px 5px, transparent 7px),
        radial-gradient(circle at 83% 54%, var(--terra-space-star) 0 .88px, transparent 1.68px),
        radial-gradient(circle at 93% 24%, var(--terra-space-star-bright) 0 1.25px, var(--terra-space-halo) 2px 4px, transparent 5px),
        radial-gradient(circle at 96% 81%, var(--terra-space-star) 0 .8px, transparent 1.6px),
        radial-gradient(circle at 24% 91%, rgba(91, 182, 255, .82) 0 1.7px, rgba(91, 182, 255, .2) 3px, transparent 6px);
    background-repeat: no-repeat;
    transform: translate3d(1%, .5%, 0) scale(1.015);
    animation: terra-space-near-drift 48s ease-in-out infinite alternate;
    will-change: transform;
}

.login-premium-topbar,
.cinema-stage,
.login-premium-footer {
    position: relative;
    z-index: 1;
}

.login-premium-topbar { z-index: 10; }

.terra-brand-rail, .login-topbar,
.login-layout, .login-promo,
.cinema-login-zone { display: none !important; }

.login-premium-topbar {
    width: 100%;
    min-height: 68px;
    padding: 12px clamp(22px, 4vw, 72px);
    display: flex;
    align-items: center;
    justify-content: space-between;
    direction: ltr;
    flex: 0 0 auto;
}

.login-system-brand {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    color: var(--terra-blue);
}

.login-system-brand svg {
    width: 44px;
    height: 38px;
}

.login-system-brand span {
    color: #0c1425;
    font-family: "Segoe UI Variable Display", "Segoe UI", Arial, sans-serif;
    font-size: 1.42rem;
    font-weight: 700;
    letter-spacing: .19em;
    line-height: 1;
}

.login-header-actions {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    direction: ltr;
}

.login-language-control { position: relative; }

.login-language-toggle,
.login-theme-toggle {
    border: 0;
    color: #536179;
    cursor: pointer;
}

.login-language-toggle {
    height: 38px;
    padding: 0 11px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    border: 1px solid rgba(142, 163, 191, .32);
    border-radius: 12px;
    color: var(--terra-ink);
    background: rgba(255, 255, 255, .76);
    font-family: "Segoe UI Variable Text", "Segoe UI", Arial, sans-serif;
    font-size: .75rem;
    font-weight: 800;
}

.login-language-toggle .language-icon { width: 17px; height: 17px; }
.login-language-toggle .language-chevron { width: 14px; height: 14px; transition: transform .16s ease; }
.login-language-toggle[aria-expanded="true"] .language-chevron { transform: rotate(180deg); }

.login-language-menu {
    position: absolute;
    top: calc(100% + 9px);
    left: 0;
    z-index: 20;
    width: 252px;
    padding: 8px;
    border: 1px solid rgba(142, 163, 191, .34);
    border-radius: 14px;
    color: var(--terra-ink);
    background: rgba(255, 255, 255, .98);
    box-shadow: 0 18px 46px rgba(31, 51, 82, .18);
}

.login-language-menu[hidden] { display: none; }

.login-language-menu-head {
    padding: 3px 5px 9px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    direction: ltr;
    font-size: .78rem;
}

.login-language-menu-head span {
    padding: 3px 7px;
    border-radius: 999px;
    color: var(--terra-muted);
    background: #f0f4fa;
    font-size: .62rem;
    font-weight: 800;
}

.login-language-options {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px;
}

.login-language-options button {
    min-height: 52px;
    padding: 7px 10px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    border: 1px solid var(--terra-line);
    border-radius: 10px;
    color: var(--terra-text);
    background: var(--terra-white);
    cursor: pointer;
    text-align: start;
}

.login-language-options button span { font-size: .78rem; font-weight: 700; }
.login-language-options button small { margin-top: 2px; font-size: .58rem; font-weight: 800; opacity: .66; }

.login-language-options button.is-active {
    border-color: var(--terra-blue);
    color: #fff;
    background: var(--terra-blue);
}

.login-theme-toggle {
    width: 38px;
    height: 38px;
    display: grid;
    place-items: center;
    border: 1px solid rgba(142, 163, 191, .28);
    border-radius: 12px;
    background: rgba(255, 255, 255, .7);
}

.login-theme-toggle:hover,
.login-theme-toggle:focus-visible,
.login-language-toggle:hover,
.login-language-toggle:focus-visible,
.login-language-options button:focus-visible {
    color: var(--terra-blue);
    outline: 2px solid var(--terra-blue-soft);
    outline-offset: 2px;
}

.login-theme-toggle svg { width: 18px; height: 18px; }
.theme-icon-sun { display: none; }
html[data-login-theme="dark"] .theme-icon-sun { display: block; }
html[data-login-theme="dark"] .theme-icon-moon { display: none; }

.cinema-stage {
    width: min(1380px, calc(100% - 64px));
    min-height: 0;
    flex: 1 1 auto;
    margin: 0 auto;
    padding: clamp(5px, 1.2vh, 12px) 0 clamp(7px, 1.4vh, 14px);
    display: grid;
    grid-template-columns: minmax(380px, 1fr) minmax(400px, 450px);
    align-items: center;
    gap: clamp(44px, 6vw, 108px);
    direction: ltr;
}

.lp-hero {
    position: relative;
    isolation: isolate;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    direction: rtl;
    text-align: center;
}

.lp-hero::before {
    content: "";
    position: absolute;
    z-index: -1;
    top: 43%;
    left: 50%;
    width: clamp(390px, 56vw, 790px);
    aspect-ratio: 1.22;
    pointer-events: none;
    opacity: .42;
    background-image:
        radial-gradient(circle at 50% 50%, transparent 0 28%, rgba(8, 107, 250, .065) 42%, transparent 68%),
        radial-gradient(circle, rgba(8, 107, 250, .2) 0 1px, transparent 1.25px);
    background-size: auto, 13px 13px;
    -webkit-mask-image: radial-gradient(ellipse at center, #000 0 38%, rgba(0, 0, 0, .78) 55%, transparent 76%);
    mask-image: radial-gradient(ellipse at center, #000 0 38%, rgba(0, 0, 0, .78) 55%, transparent 76%);
    transform: translate3d(-51%, -50%, 0) rotate(-3deg);
    animation: terra-hero-field-drift 32s ease-in-out infinite alternate;
    will-change: transform;
}

.terra-globe {
    position: relative;
    width: clamp(410px, 39vw, 570px);
    aspect-ratio: 1;
    display: grid;
    place-items: center;
    isolation: isolate;
    contain: layout paint;
    color: rgba(20, 133, 255, .9);
}

.terra-globe::before {
    content: "";
    position: absolute;
    z-index: -1;
    inset: 4%;
    border-radius: 50%;
    background:
        radial-gradient(circle at 34% 28%, rgba(255, 255, 255, .92) 0, transparent 18%),
        radial-gradient(circle, rgba(8, 107, 250, .105) 0, rgba(75, 165, 255, .045) 48%, transparent 72%);
    pointer-events: none;
}

.terra-globe::after {
    content: "";
    position: absolute;
    z-index: 7;
    inset: -3%;
    border: 1px solid rgba(8, 107, 250, .16);
    border-radius: 50%;
    box-shadow: inset 0 0 36px rgba(8, 107, 250, .035), 0 0 26px rgba(8, 107, 250, .05);
    pointer-events: none;
}

.terra-globe-main-rotation {
    position: absolute;
    z-index: 1;
    inset: 1%;
    display: grid;
    place-items: center;
    transform-origin: center;
    animation: terra-globe-main-turn 28s linear infinite;
    will-change: transform;
}

.terra-globe-particle-sphere {
    position: absolute;
    z-index: 1;
    inset: 9%;
    border-radius: 50%;
    color: inherit;
    background:
        radial-gradient(circle at 34% 27%, rgba(255, 255, 255, .55) 0, transparent 21%),
        radial-gradient(circle, currentColor 0 1px, transparent 1.35px);
    background-size: auto, 8px 8px;
    opacity: .62;
    pointer-events: none;
    transform: rotate(-8deg);
    -webkit-mask-image: radial-gradient(circle, #000 0 57%, rgba(0, 0, 0, .82) 68%, transparent 78%);
    mask-image: radial-gradient(circle, #000 0 57%, rgba(0, 0, 0, .82) 68%, transparent 78%);
}

.terra-globe-signals {
    position: absolute;
    z-index: 3;
    inset: 2%;
    border-radius: 50%;
    color: inherit;
    background:
        radial-gradient(circle at 19% 33%, currentColor 0 2px, transparent 2.8px),
        radial-gradient(circle at 31% 15%, currentColor 0 1.35px, transparent 2.15px),
        radial-gradient(circle at 73% 19%, currentColor 0 1.7px, transparent 2.5px),
        radial-gradient(circle at 84% 45%, currentColor 0 2.1px, transparent 2.9px),
        radial-gradient(circle at 75% 78%, currentColor 0 1.4px, transparent 2.2px),
        radial-gradient(circle at 38% 84%, currentColor 0 1.8px, transparent 2.6px),
        radial-gradient(circle at 13% 61%, currentColor 0 1.25px, transparent 2px);
    opacity: .92;
    pointer-events: none;
    animation: terra-signal-breathe 5.2s ease-in-out infinite alternate;
    will-change: opacity;
}

.terra-globe-shell {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    overflow: visible;
    transform-origin: center;
}

.terra-globe-shell circle,
.terra-globe-shell ellipse,
.terra-globe-shell path {
    fill: none;
    stroke: currentColor;
    stroke-width: 1.15;
    vector-effect: non-scaling-stroke;
}

.terra-globe-grid {
    opacity: .78;
    stroke-dasharray: 1 5;
    stroke-linecap: round;
}

.terra-globe-back {
    opacity: .82;
    -webkit-mask-image: linear-gradient(to bottom, rgba(0, 0, 0, .42), #000 34%, #000 63%, rgba(0, 0, 0, .3));
    mask-image: linear-gradient(to bottom, rgba(0, 0, 0, .42), #000 34%, #000 63%, rgba(0, 0, 0, .3));
}

.terra-globe-front {
    z-index: 3;
    opacity: .84;
    animation: terra-globe-front-turn 37s linear infinite;
    will-change: transform;
    -webkit-mask-image: linear-gradient(to bottom, transparent 5%, rgba(0, 0, 0, .12) 35%, #000 56%, #000 100%);
    mask-image: linear-gradient(to bottom, transparent 5%, rgba(0, 0, 0, .12) 35%, #000 56%, #000 100%);
}

.terra-globe-grid-front {
    stroke-dasharray: 1 5.5;
    stroke-linecap: round;
}

.terra-globe-rim-shell {
    position: absolute;
    z-index: 4;
    inset: 0;
    width: 100%;
    height: 100%;
    overflow: visible;
    pointer-events: none;
}

.terra-globe-rim-shell circle {
    fill: none;
    stroke: currentColor;
    stroke-width: 1.05;
    opacity: .68;
    vector-effect: non-scaling-stroke;
}

.terra-globe-rim-shell .terra-globe-rim-dots {
    stroke-dasharray: 1 7;
    stroke-linecap: round;
    opacity: .38;
}

.terra-globe-orbit {
    position: absolute;
    z-index: 6;
    inset: 12%;
    border: 1px solid currentColor;
    border-radius: 50%;
    opacity: .76;
    transform: rotate(23deg) scaleY(.38);
    animation: terra-globe-orbit-turn 28s linear infinite;
    will-change: transform;
    pointer-events: none;
}

.terra-globe-orbit i {
    position: absolute;
    top: 47%;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: currentColor;
    box-shadow: 0 0 12px currentColor;
}

.terra-globe-orbit i:first-child { left: 8%; }
.terra-globe-orbit i:last-child { right: 7%; }

.terra-globe-scan {
    position: absolute;
    z-index: 5;
    top: 7%;
    left: 10%;
    width: 80%;
    height: 19%;
    border-bottom: 1px solid rgba(8, 107, 250, .54);
    border-radius: 50%;
    pointer-events: none;
    opacity: .52;
    background: linear-gradient(to bottom, transparent, rgba(8, 107, 250, .075));
    transform: translate3d(0, 0, 0) scaleX(.72);
    animation: terra-globe-scan 7.4s ease-in-out infinite alternate;
    will-change: transform;
}

.terra-globe .lp-dot-mark {
    position: relative;
    z-index: 2;
    width: 45%;
    height: auto;
    overflow: visible;
    color: #006ff5;
    filter: drop-shadow(0 0 10px rgba(8, 107, 250, .38));
    pointer-events: none;
}

@keyframes terra-globe-main-turn {
    to { transform: rotate(360deg); }
}

@keyframes terra-globe-front-turn {
    to { transform: rotate(-360deg); }
}

@keyframes terra-globe-orbit-turn {
    to { transform: rotate(383deg) scaleY(.38); }
}

@keyframes terra-globe-scan {
    to { transform: translate3d(0, 360%, 0) scaleX(1.02); }
}

@keyframes terra-hero-field-drift {
    to { transform: translate3d(-49%, -48%, 0) rotate(3deg); }
}

@keyframes terra-space-far-drift {
    to { transform: translate3d(1.4%, 1%, 0) scale(1.055); }
}

@keyframes terra-space-near-drift {
    to { transform: translate3d(-2%, -1.3%, 0) scale(1.04); }
}

@keyframes terra-comet-one {
    0%, 66% { opacity: 0; transform: translate3d(0, 0, 0) rotate(-18deg); }
    69% { opacity: .92; }
    88% { opacity: .92; }
    100% { opacity: 0; transform: translate3d(132vw, 34vh, 0) rotate(-18deg); }
}

@keyframes terra-comet-two {
    0%, 72% { opacity: 0; transform: translate3d(0, 0, 0) rotate(158deg); }
    75% { opacity: .72; }
    91% { opacity: .72; }
    100% { opacity: 0; transform: translate3d(-122vw, -31vh, 0) rotate(158deg); }
}

@keyframes terra-celestial-float {
    to { transform: translate3d(18px, -14px, 0) scale(.84); }
}

@keyframes terra-cosmos-field-a {
    to { transform: translate3d(.9%, .7%, 0) rotate(1.5deg) scale(1.045); }
}

@keyframes terra-cosmos-field-b {
    to { transform: translate3d(-1.1%, -.8%, 0) scale(1.04); }
}

@keyframes terra-signal-breathe {
    to { opacity: .96; }
}

@keyframes terra-card-sheen {
    0%, 62% { transform: translate3d(0, 0, 0) skewX(-14deg); }
    100% { transform: translate3d(470%, 0, 0) skewX(-14deg); }
}

html.login-page-hidden .terra-globe-main-rotation,
html.login-page-hidden .terra-globe-front,
html.login-page-hidden .terra-globe-orbit,
html.login-page-hidden .terra-globe-scan,
html.login-page-hidden .terra-globe-signals,
html.login-page-hidden .lp-hero::before,
html.login-page-hidden .cinema-login-inner::after,
html.login-page-hidden .terra-comet,
html.login-page-hidden .terra-celestial-body,
html.login-page-hidden .terra-cosmos::before,
html.login-page-hidden .terra-cosmos::after,
html.login-page-hidden body.login-cinematic::before,
html.login-page-hidden body.login-cinematic::after { animation-play-state: paused; }

.lp-hero-mid {
    position: absolute;
    z-index: 8;
    bottom: clamp(8px, 2.4vh, 26px);
    left: clamp(0px, 2vw, 30px);
    width: min(88%, 640px);
    margin: 0;
    direction: rtl;
    text-align: right;
    pointer-events: none;
}

.lp-hero-kicker {
    margin-bottom: 10px;
    color: var(--terra-blue);
    font-family: "Segoe UI Variable Display", "Segoe UI", Arial, sans-serif;
    font-size: clamp(.62rem, .72vw, .72rem);
    font-weight: 800;
    letter-spacing: .22em;
    line-height: 1.4;
}

.lp-hero-heading {
    color: var(--terra-ink);
    max-width: 14ch;
    white-space: pre-line;
    font-size: clamp(3rem, 4.5vw, 5.2rem);
    font-weight: 780;
    letter-spacing: -.055em;
    line-height: .94;
    text-wrap: balance;
}

body.login-cinematic .lp-hero-heading {
    color: var(--terra-ink);
    text-shadow: 0 2px 20px rgba(78, 139, 204, .12);
}

body.login-cinematic .lp-hero-sub {
    color: var(--terra-muted);
}

.lp-hero-sub {
    margin-top: 13px;
    color: var(--terra-muted);
    font-size: clamp(.82rem, 1vw, .98rem);
    font-weight: 550;
    line-height: 1.6;
}

.cinema-login-inner {
    position: relative;
    width: 100%;
    padding: clamp(25px, 2.2vw, 31px);
    direction: rtl;
    text-align: right;
    overflow: hidden;
    border: 1px solid rgba(166, 197, 239, .92);
    border-radius: 30px;
    background:
        radial-gradient(circle at 98% 0, rgba(8, 107, 250, .075), transparent 29%),
        linear-gradient(155deg, rgba(255, 255, 255, .975), rgba(244, 249, 255, .94));
    box-shadow: 0 28px 72px rgba(22, 72, 140, .12), 0 2px 10px rgba(22, 56, 102, .05);
}

.cinema-login-inner > * {
    position: relative;
    z-index: 1;
}

.cinema-login-inner::before {
    content: "";
    position: absolute;
    top: 0;
    left: 50%;
    z-index: 2;
    width: 48px;
    height: 3px;
    border-radius: 0 0 99px 99px;
    background: linear-gradient(90deg, #53c7ff, var(--terra-blue));
    box-shadow: 0 0 18px rgba(8, 107, 250, .45);
    transform: translateX(-50%);
}

.cinema-login-inner::after {
    content: "";
    position: absolute;
    z-index: 0;
    top: -32%;
    bottom: -32%;
    left: -46%;
    width: 34%;
    pointer-events: none;
    opacity: .56;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .7), rgba(64, 169, 255, .11), transparent);
    transform: translate3d(0, 0, 0) skewX(-14deg);
    animation: terra-card-sheen 14s cubic-bezier(.55, .05, .35, 1) infinite;
    will-change: transform;
}

.accounting-brand {
    margin-bottom: 13px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 9px;
    text-align: center;
}

.accounting-client-brand,
.accounting-client-placeholder {
    min-width: 56px;
    min-height: 50px;
    padding: 5px 9px;
    display: grid;
    place-items: center;
    border: 1px solid #e5eaf1;
    border-radius: 12px;
    background: #fff;
}

.accounting-client-brand img {
    display: block;
    max-width: 150px;
    max-height: 48px;
    width: auto;
    height: auto;
    object-fit: contain;
}

.accounting-client-placeholder svg {
    width: 27px;
    height: 27px;
    color: var(--terra-blue);
}

.accounting-client-name {
    max-width: 100%;
    color: var(--terra-text);
    font-size: .86rem;
    font-weight: 700;
    line-height: 1.5;
    overflow-wrap: anywhere;
}

.cinema-login-inner > h1 {
    color: var(--terra-ink);
    font-size: clamp(1.64rem, 2vw, 1.92rem);
    font-weight: 800;
    letter-spacing: -.025em;
    line-height: 1.3;
    text-align: center;
}

.cinema-login-subtitle {
    margin: 5px 0 18px;
    color: var(--terra-muted);
    font-size: .88rem;
    line-height: 1.7;
    text-align: center;
}

.error-msg-card {
    margin-bottom: 16px;
    padding: 11px 14px;
    border: 1px solid var(--terra-danger-line);
    border-radius: 11px;
    color: var(--terra-danger);
    background: var(--terra-danger-bg);
    font-size: .82rem;
    line-height: 1.6;
}

.cinema-form {
    display: grid;
    gap: 10px;
}

.cinema-input-group {
    display: grid;
    gap: 5px;
}

.cinema-input-label {
    padding-inline: 2px;
    color: var(--terra-text);
    font-size: .78rem;
    font-weight: 700;
    line-height: 1.5;
}

.cinema-field {
    position: relative;
    min-height: 50px;
    padding: 0 14px;
    display: flex;
    align-items: center;
    gap: 10px;
    border: 1px solid var(--terra-line);
    border-radius: 12px;
    background: rgba(251, 253, 255, .92);
    cursor: text;
    transition: border-color .16s ease, box-shadow .16s ease;
}

.cinema-field:hover { border-color: #c5d1e1; }

.cinema-field:focus-within {
    border-color: var(--terra-blue);
    box-shadow: 0 0 0 3px var(--terra-blue-soft);
}

.cinema-field-icon {
    width: 18px;
    height: 18px;
    flex: 0 0 auto;
    color: #8b98aa;
}

.cinema-field:focus-within .cinema-field-icon { color: var(--terra-blue); }

.cinema-field input {
    width: 100%;
    min-width: 0;
    height: 48px;
    border: 0;
    outline: 0;
    color: var(--terra-ink);
    background: transparent;
    font-size: .92rem;
    direction: rtl;
    text-align: right;
}

.cinema-field input::placeholder { color: #98a2b3; opacity: 1; }

.cinema-password-toggle {
    width: 30px;
    height: 30px;
    flex: 0 0 30px;
    display: grid;
    place-items: center;
    border: 0;
    border-radius: 7px;
    color: #8b98aa;
    background: transparent;
    cursor: pointer;
}

.cinema-password-toggle:hover,
.cinema-password-toggle:focus-visible {
    color: var(--terra-blue);
    background: #f2f7ff;
    outline: none;
}

.cinema-controls {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    color: var(--terra-muted);
    margin-top: -1px;
    font-size: .8rem;
}

.cinema-controls > a {
    color: var(--terra-blue);
    font-weight: 700;
    text-decoration: none;
}

.cinema-controls > a:hover { text-decoration: underline; }

.cinema-remember {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    cursor: pointer;
    user-select: none;
}

.cinema-remember input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.cinema-checkbox {
    width: 17px;
    height: 17px;
    flex: 0 0 17px;
    display: grid;
    place-items: center;
    border: 1px solid #cbd5e1;
    border-radius: 5px;
    background: #fff;
}

.cinema-remember input:checked + .cinema-checkbox {
    border-color: var(--terra-blue);
    background: var(--terra-blue);
}

.cinema-remember input:checked + .cinema-checkbox::after {
    content: "";
    width: 5px;
    height: 9px;
    border: 2px solid #fff;
    border-top: 0;
    border-left: 0;
    transform: rotate(45deg) translate(-1px, -1px);
}

.cinema-login-btn,
.cinema-passkey-btn {
    width: 100%;
    min-height: 49px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    border-radius: 12px;
    font-weight: 700;
    cursor: pointer;
}

.cinema-login-btn {
    margin-top: 2px;
    border: 0;
    color: #fff;
    background: linear-gradient(135deg, #0875ff, #0864ea);
    box-shadow: 0 10px 24px rgba(8, 107, 250, .22);
    transition: filter .16s ease, transform .16s ease;
}

.cinema-login-btn:hover { filter: brightness(.96); transform: translateY(-1px); }
.cinema-login-btn:active { transform: none; }
.cinema-login-btn:disabled { opacity: .65; cursor: wait; transform: none; }

.lp-or-divider {
    display: flex;
    align-items: center;
    gap: 12px;
    color: #98a2b3;
    font-size: .72rem;
}

.lp-or-divider::before,
.lp-or-divider::after {
    content: "";
    height: 1px;
    flex: 1;
    background: #edf0f5;
}

.cinema-passkey-btn {
    border: 1px solid #c9daf4;
    color: #1764cc;
    background: rgba(255, 255, 255, .72);
    font-size: .86rem;
    font-weight: 600;
    transition: border-color .16s ease, background-color .16s ease;
}

.cinema-passkey-btn:hover { border-color: var(--terra-blue); background: #f5f9ff; }
.cinema-passkey-btn:disabled { opacity: .58; cursor: wait; }
.cinema-passkey-btn svg { width: 18px; height: 18px; }

.cinema-passkey-status {
    display: none;
    color: var(--terra-muted);
    font-size: .75rem;
    line-height: 1.55;
    text-align: center;
}

.cinema-passkey-status.is-visible { display: block; }
.cinema-passkey-status.is-error { display: block; color: var(--terra-danger); }
.cinema-passkey-status.is-success { display: block; color: var(--terra-success); }

.cinema-trust {
    margin-top: 12px;
    display: flex;
    justify-content: center;
}

.cinema-trust span {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--terra-muted);
    font-size: .75rem;
}

.cinema-trust svg {
    width: 15px;
    height: 15px;
    color: var(--terra-success);
}

.login-premium-footer {
    width: 100%;
    padding: 11px clamp(20px, 4vw, 64px) 16px;
    flex: 0 0 auto;
}

.login-premium-footer .auth-footer-dev {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 7px 18px;
    color: #748197;
    font-size: .68rem;
    line-height: 1.5;
    text-align: center;
}

.login-premium-footer .dev-brand { display: none !important; }

.login-premium-footer .dev-contact-row,
.login-premium-footer .dev-phones,
.login-premium-footer .dev-copyright {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 7px;
}

.login-premium-footer .dev-contact-link,
.login-premium-footer .dev-phone-link {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    color: inherit;
    text-decoration: none;
}

.login-premium-footer .dev-contact-link:hover,
.login-premium-footer .dev-phone-link:hover { color: var(--terra-blue); }

.login-premium-footer svg { width: 13px; height: 13px; }
.login-premium-footer .version-badge { color: var(--terra-blue); font-weight: 700; }
.login-premium-footer .dev-contact-sep { color: #b8c1ce; }

html[data-login-lang="en"] .cinema-login-inner,
html[data-login-lang="en"] .cinema-field input {
    direction: ltr;
    text-align: left;
}

html[data-login-lang="en"] .cinema-controls { direction: ltr; }
html[data-login-lang="en"] .cinema-input-label { text-align: left; }
html[data-login-lang="en"] .lp-hero { direction: ltr; }
html[data-login-lang="en"] .lp-hero-mid {
    direction: ltr;
    text-align: left;
}

html[data-login-theme="dark"] {
    --terra-ink: #f4f7ff;
    --terra-text: #d9e1f0;
    --terra-muted: #929db0;
    --terra-line: #28344a;
    --terra-blue-soft: rgba(42, 132, 255, .2);
    --terra-danger-bg: rgba(217, 45, 32, .1);
    --terra-danger-line: rgba(255, 102, 92, .3);
    --terra-space-star: rgba(95, 164, 255, .7);
    --terra-space-star-bright: rgba(216, 237, 255, .96);
    --terra-space-halo: rgba(43, 133, 255, .42);
    --terra-field-dot: rgba(69, 143, 255, .18);
    --terra-field-dot-soft: rgba(69, 143, 255, .11);
    color-scheme: dark;
}

html[data-login-theme="dark"] body.login-cinematic {
    background:
        radial-gradient(circle at 18% 44%, rgba(8, 107, 250, .16) 0, rgba(8, 107, 250, .055) 26%, transparent 48%),
        radial-gradient(circle at 49% 64%, rgba(56, 75, 128, .13) 0, transparent 39%),
        radial-gradient(circle at 78% 20%, rgba(16, 75, 155, .1) 0, transparent 38%),
        linear-gradient(135deg, #060a12 0%, #080d17 54%, #05080e 100%);
}

html[data-login-theme="dark"] body.login-cinematic::before {
    opacity: .74;
}

html[data-login-theme="dark"] body.login-cinematic::after {
    opacity: .88;
}

html[data-login-theme="dark"] body.login-cinematic .lp-hero-heading {
    color: #f7fbff;
    text-shadow: 0 2px 20px rgba(0, 36, 84, .46);
}

html[data-login-theme="dark"] body.login-cinematic .lp-hero-sub {
    color: #aec9e8;
}

html[data-login-theme="dark"] .login-system-brand span { color: #f5f8ff; }

html[data-login-theme="dark"] .login-language-toggle,
html[data-login-theme="dark"] .login-theme-toggle {
    border-color: rgba(127, 149, 183, .25);
    color: #b1bdd0;
    background: rgba(15, 23, 37, .78);
}

html[data-login-theme="dark"] .login-language-menu {
    border-color: #2c3850;
    background: rgba(10, 15, 25, .98);
    box-shadow: 0 20px 50px rgba(0, 0, 0, .42);
}

html[data-login-theme="dark"] .login-language-menu-head span { background: #182235; }

html[data-login-theme="dark"] .login-language-options button {
    border-color: #2c3850;
    color: #cbd5e5;
    background: #101827;
}

html[data-login-theme="dark"] .login-language-options button.is-active {
    border-color: var(--terra-blue);
    color: #fff;
    background: var(--terra-blue);
}

html[data-login-theme="dark"] .terra-globe {
    color: rgba(78, 158, 255, .68);
}

html[data-login-theme="dark"] .lp-hero::before {
    opacity: .46;
    background-image:
        radial-gradient(circle at 50% 50%, transparent 0 28%, rgba(46, 128, 255, .09) 42%, transparent 68%),
        radial-gradient(circle, rgba(70, 150, 255, .25) 0 1px, transparent 1.3px);
}

html[data-login-theme="dark"] .terra-globe-back { opacity: .88; }
html[data-login-theme="dark"] .terra-globe-front { opacity: .92; }
html[data-login-theme="dark"] .terra-globe-orbit { opacity: .72; }
html[data-login-theme="dark"] .terra-globe-particle-sphere { opacity: .44; }
html[data-login-theme="dark"] .terra-globe-signals { opacity: .78; }
html[data-login-theme="dark"] .terra-globe-scan {
    border-bottom-color: rgba(88, 165, 255, .62);
    background: linear-gradient(to bottom, transparent, rgba(48, 131, 255, .11));
}

html[data-login-theme="dark"] .terra-globe::before {
    background: radial-gradient(circle, rgba(8, 107, 250, .18) 0, rgba(29, 81, 158, .065) 49%, transparent 73%);
}

html[data-login-theme="dark"] .cinema-login-inner {
    border-color: rgba(92, 114, 147, .34);
    background: linear-gradient(155deg, rgba(13, 20, 33, .98), rgba(8, 13, 22, .96));
    box-shadow: 0 23px 60px rgba(0, 0, 0, .38), 0 2px 10px rgba(0, 0, 0, .2);
}

html[data-login-theme="dark"] .cinema-login-inner::after {
    opacity: .24;
    background: linear-gradient(90deg, transparent, rgba(84, 157, 255, .22), rgba(8, 107, 250, .08), transparent);
}

html[data-login-theme="dark"] .accounting-client-brand,
html[data-login-theme="dark"] .accounting-client-placeholder {
    border-color: #273248;
    background: #111827;
}

html[data-login-theme="dark"] .cinema-field {
    border-color: #28344a;
    background: #0c1421;
}

html[data-login-theme="dark"] .cinema-field:hover { border-color: #3b4b66; }
html[data-login-theme="dark"] .cinema-field-icon { color: #8290a7; }
html[data-login-theme="dark"] .cinema-field input::placeholder { color: #78869c; }

html[data-login-theme="dark"] .cinema-password-toggle:hover,
html[data-login-theme="dark"] .cinema-password-toggle:focus-visible {
    background: rgba(8, 107, 250, .12);
}

html[data-login-theme="dark"] .cinema-checkbox {
    border-color: #455269;
    background: #101827;
}

html[data-login-theme="dark"] .cinema-login-btn {
    box-shadow: 0 9px 24px rgba(8, 107, 250, .22);
}

html[data-login-theme="dark"] .lp-or-divider::before,
html[data-login-theme="dark"] .lp-or-divider::after { background: #253047; }

html[data-login-theme="dark"] .cinema-passkey-btn {
    border-color: #315081;
    color: #7bb2ff;
    background: rgba(14, 24, 40, .78);
}

html[data-login-theme="dark"] .cinema-passkey-btn:hover {
    border-color: var(--terra-blue);
    background: rgba(8, 107, 250, .1);
}

html[data-login-theme="dark"] .login-premium-footer .auth-footer-dev { color: #77849a; }
html[data-login-theme="dark"] .login-premium-footer .dev-contact-sep { color: #4c5870; }

@media (max-height: 820px) and (min-width: 921px) {
    .login-premium-topbar { min-height: 62px; padding-top: 11px; padding-bottom: 11px; }
    .cinema-stage { padding-top: 6px; padding-bottom: 12px; }
    .cinema-login-inner { padding: 24px 30px; }
    .accounting-brand { margin-bottom: 12px; }
    .accounting-client-brand img { max-height: 46px; }
    .cinema-login-subtitle { margin-bottom: 18px; }
    .cinema-trust { margin-top: 14px; }
    .terra-globe { width: min(61vh, 510px); }
    .lp-hero-mid { bottom: 14px; }
    .login-premium-footer { padding-top: 7px; padding-bottom: 10px; }
}

@media (max-width: 920px) {
    body.login-cinematic {
        overflow: hidden;
        background:
            linear-gradient(180deg, #e4f2ff 0%, #f1f8ff 35%, #fbfdff 100%);
    }

    .terra-cosmos::before,
    .terra-cosmos::after { display: none; }

    .cinema-stage {
        width: min(560px, calc(100% - 32px));
        min-height: 0;
        display: flex;
        flex-direction: column;
        justify-content: center;
        gap: 12px;
        padding: 4px 0 8px;
        overflow: hidden;
    }

    .lp-hero { width: 100%; }
    .terra-globe { width: min(22dvh, 200px); }
    .lp-hero-mid {
        position: static;
        width: 100%;
        margin-top: 6px;
        direction: rtl;
        text-align: center;
    }
    html[data-login-lang="en"] .lp-hero-mid { text-align: center; }
    .lp-hero-kicker { display: none; }
    .lp-hero-heading {
        max-width: none;
        font-size: 1rem;
        letter-spacing: -.015em;
        line-height: 1.18;
    }
    .lp-hero-sub { margin-top: 4px; font-size: .76rem; }
    .cinema-login-inner { max-width: 470px; }
}

@media (max-width: 560px) {
    .login-premium-topbar {
        min-height: 56px;
        padding: 8px 16px;
    }

    .login-system-brand { gap: 8px; }
    .login-system-brand svg { width: 35px; height: 31px; }
    .login-system-brand span { font-size: 1.05rem; letter-spacing: .14em; }
    .login-header-actions { gap: 5px; }
    .login-language-toggle { height: 35px; padding: 0 8px; gap: 6px; border-radius: 10px; }
    .login-language-toggle .language-icon { width: 15px; height: 15px; }
    .login-language-menu {
        position: fixed;
        top: 68px;
        left: 50%;
        width: min(312px, calc(100vw - 32px));
        transform: translateX(-50%);
    }
    .login-theme-toggle { width: 35px; height: 35px; border-radius: 10px; }

    .cinema-stage {
        width: calc(100% - 24px);
        gap: 8px;
        padding: 0 0 4px;
    }

    .terra-globe { width: min(17dvh, 140px); }
    .lp-hero-mid { margin-top: 4px; }
    .lp-hero-heading { font-size: .9rem; }
    .lp-hero-sub { display: none; }

    .cinema-login-inner {
        padding: 18px 16px;
        border-radius: 22px;
        box-shadow: 0 14px 34px rgba(22, 56, 102, .1);
    }

    .accounting-brand { margin-bottom: 8px; gap: 6px; }
    .accounting-client-brand,
    .accounting-client-placeholder { min-width: 48px; min-height: 42px; }
    .accounting-client-brand img { max-width: 118px; max-height: 42px; }
    .cinema-login-inner > h1 { font-size: 1.48rem; }
    .cinema-login-subtitle { margin: 3px 0 12px; font-size: .8rem; }
    .cinema-form { gap: 8px; }
    .cinema-input-group { gap: 4px; }
    .cinema-field { min-height: 48px; }
    .cinema-field input { height: 46px; }
    .cinema-login-btn,
    .cinema-passkey-btn { min-height: 47px; }
    .cinema-field input { font-size: 16px; }
    .cinema-controls { font-size: .76rem; }
    .cinema-trust { margin-top: 8px; }

    .login-premium-footer { padding: 3px 16px 7px; }
    .login-premium-footer .auth-footer-dev { gap: 5px 10px; font-size: .62rem; }
}

@media (max-width: 560px) and (max-height: 760px) {
    .terra-globe { width: 100px; }
    .lp-hero-mid { display: none; }
    .cinema-stage { gap: 5px; }
}

@media (max-width: 560px) and (max-height: 700px) {
    .lp-hero { display: none; }
    .cinema-login-inner { padding-top: 14px; padding-bottom: 14px; }
    .accounting-client-brand img { max-height: 36px; }
    .accounting-client-brand,
    .accounting-client-placeholder { min-height: 38px; }
    .cinema-trust { margin-top: 5px; }
}

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

    body.login-cinematic::before,
    body.login-cinematic::after,
    .terra-cosmos::before,
    .terra-cosmos::after,
    .lp-hero::before,
    .terra-globe-main-rotation,
    .terra-globe-front,
    .terra-globe-orbit,
    .terra-globe-scan,
    .terra-globe-signals,
    .cinema-login-inner::after,
    .terra-comet,
    .terra-celestial-body {
        animation: none !important;
        will-change: auto;
    }
}