/* =====================================================================
   Login page (Views/Account/Login.cshtml) - loaded only on that page, after style-aditional.css
   Scene: wwwroot/Content/svg/login/headquarters-scene.svg (inserted inline by js/login.js)
   ===================================================================== */
/* the scene spans the whole window, outside _Layout's .container */
body {
    overflow-x: clip
}

.sc-stage {
    width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw)
}
/* server-side messages (_ValidationSummary) inside the card */
.ap-srv-err .alert, .ap-srv-err > .validation-summary-errors {
    margin: 0 0 12px;
    padding: 10px 12px;
    border-radius: 12px;
    font-size: 1.03rem;
    line-height: 1.45;
    background: #fdecec;
    color: #b3261e;
    border: 1px solid #f4b4b0
}

    .ap-srv-err .alert .validation-summary-errors {
        margin: 0;
        padding: 0;
        border: 0;
        background: none;
        color: inherit
    }

.ap-srv-err ul {
    margin: 0;
    padding-left: 18px
}

.ap-srv-err .alert strong {
    display: none
}

:root[data-theme="dark"] .ap-srv-err .alert, :root[data-theme="dark"] .ap-srv-err > .validation-summary-errors {
    background: rgba(226,71,75,.14);
    color: #ffb4b0;
    border-color: rgba(226,71,75,.4)
}
/* external providers are links styled as buttons */
.sc-card a.ap-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    box-sizing: border-box;
    text-decoration: none
}

.ap-ext {
    display: grid;
    gap: 10px;
    margin-top: 14px
}

.ap-login {
    max-width: 1080px;
    margin: 0 auto;
    padding: 40px 24px 30px;
    font-family: "Allianz Neo","Segoe UI",Roboto,Arial,sans-serif;
    color: var(--ink)
}

.ap-login-form {
    padding: 42px 44px 34px;
    display: flex;
    flex-direction: column;
    justify-content: center
}

    .ap-login-form .ap-kicker {
        font-size: .94rem;
        font-weight: 800;
        letter-spacing: .8px;
        text-transform: uppercase;
        color: #0072ed;
        margin-bottom: 6px
    }

    .ap-login-form h2 {
        font-size: 1.79rem;
        font-weight: 800;
        letter-spacing: -.3px;
        margin: 0 0 4px
    }

    .ap-login-form .ap-sub {
        font-size: 1.09rem;
        color: var(--muted);
        margin: 0 0 24px
    }

    .ap-login-form form {
        display: flex;
        flex-direction: column;
        gap: 16px;
        margin: 0
    }

.ap-alert {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    padding: 11px 14px;
    border-radius: 12px;
    font-size: 1.04rem;
    line-height: 1.45;
    background: color-mix(in srgb,#ef4444 10%,var(--surface));
    border: 1px solid color-mix(in srgb,#ef4444 35%,transparent);
    color: var(--ink)
}

    .ap-alert svg {
        width: 18px;
        height: 18px;
        flex: none;
        stroke: #ef4444;
        fill: none;
        stroke-width: 2.2;
        stroke-linecap: round
    }

    .ap-alert[hidden] {
        display: none
    }

.ap-inp .ap-eye {
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    width: 34px;
    height: 34px;
    border-radius: 9px;
    display: grid;
    place-items: center;
    border: 0;
    background: none;
    cursor: pointer;
    color: var(--muted);
    transition: background .2s,color .2s
}

    .ap-inp .ap-eye:hover {
        background: var(--surface2);
        color: #0072ed
    }

    .ap-inp .ap-eye svg {
        position: static;
        transform: none;
        width: 18px;
        height: 18px;
        stroke: currentColor
    }

.ap-inp input.has-eye {
    padding-right: 48px
}

.ap-caps {
    display: none;
    font-size: .94rem;
    font-weight: 600;
    color: #d97706;
    margin-top: 6px
}

    .ap-caps.ap-show {
        display: block
    }

.ap-login-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    font-size: 1.04rem
}

.ap-link {
    color: #0072ed;
    font-weight: 600;
    text-decoration: none;
    background-image: linear-gradient(currentColor,currentColor);
    background-size: 0 1.5px;
    background-position: 0 100%;
    background-repeat: no-repeat;
    transition: background-size .25s
}

    .ap-link:hover {
        background-size: 100% 1.5px
    }

:root[data-theme="dark"] .ap-link, :root[data-theme="dark"] .ap-login-form .ap-kicker {
    color: #7fd0f2
}

.ap-login-form .ap-btn.ap-primary {
    width: 100%;
    padding: 14px 18px;
    font-size: 1.14rem;
    border: 0;
    cursor: pointer
}

    .ap-login-form .ap-btn.ap-primary .ap-spin {
        display: none;
        width: 16px;
        height: 16px;
        border-radius: 50%;
        border: 2.5px solid rgba(255,255,255,.4);
        border-top-color: #fff;
        animation: ap-spin .7s linear infinite
    }

    .ap-login-form .ap-btn.ap-primary.ap-busy .ap-spin {
        display: block
    }

    .ap-login-form .ap-btn.ap-primary.ap-busy .ap-arrow {
        display: none
    }

.rp-toggle {
    border: 0;
    padding: 0;
    font: inherit;
    font-weight: 600;
    cursor: pointer;
    background-color: transparent
}

.sc-card #f, .sc-card .rp {
    transition: opacity .25s ease,transform .25s ease
}

.sc-card.rp-mode #f {
    display: none
}

.rp {
    display: grid;
    gap: 14px;
    animation: rp-in .3s ease
}

@keyframes rp-in {
    from {
        opacity: 0;
        transform: translateX(16px)
    }

    to {
        opacity: 1;
        transform: none
    }
}

.rp-head {
    display: flex;
    gap: 12px;
    align-items: flex-start
}

    .rp-head h3 {
        margin: 0 0 4px;
        font-size: 1.24rem;
        font-weight: 800
    }

    .rp-head p {
        margin: 0;
        font-size: 1.01rem;
        color: var(--muted);
        line-height: 1.45
    }

.rp-back {
    flex: none;
    width: 34px;
    height: 34px;
    border-radius: 10px;
    border: 1px solid var(--line);
    background: var(--surface);
    color: inherit;
    display: grid;
    place-items: center;
    cursor: pointer;
    transition: background .2s,transform .2s
}

    .rp-back:hover {
        background: color-mix(in srgb,#0072ed 12%,var(--surface));
        transform: translateX(-2px)
    }

    .rp-back svg {
        width: 18px;
        height: 18px;
        fill: none;
        stroke: currentColor;
        stroke-width: 2.2;
        stroke-linecap: round;
        stroke-linejoin: round
    }

.rp-ok {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    padding: 11px 13px;
    border-radius: 12px;
    font-size: 1.03rem;
    line-height: 1.45;
    background: color-mix(in srgb,#3fa65a 12%,var(--surface));
    border: 1px solid color-mix(in srgb,#3fa65a 40%,transparent);
    color: inherit
}

    .rp-ok svg {
        flex: none;
        width: 20px;
        height: 20px;
        fill: none;
        stroke: #3fa65a;
        stroke-width: 2.2;
        stroke-linecap: round;
        stroke-linejoin: round
    }

    .rp[hidden], .rp-ok[hidden] {
        display: none
    }

#rpBtn {
    margin-top: 14px
}

.lx-hint[hidden] {
    display: none
}

.ap-field.bad .ap-inp input {
    border-color: #e2474b;
    box-shadow: 0 0 0 4px rgba(226,71,75,.14)
}

.ap-field.bad .ap-inp svg {
    stroke: #e2474b
}

.ap-field.good .ap-inp input {
    border-color: #3fa65a
}

.f-msg {
    display: none;
    margin-top: 6px;
    font-size: .97rem;
    font-weight: 600;
    color: #e2474b
}

.ap-field.bad .f-msg {
    display: block;
    animation: rp-in .2s ease
}

.f-ok {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%) scale(.4);
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #3fa65a;
    display: grid;
    place-items: center;
    opacity: 0;
    transition: opacity .2s,transform .25s cubic-bezier(.3,1.6,.5,1);
    pointer-events: none
}

    .f-ok svg {
        position: static !important;
        transform: none !important;
        width: 12px !important;
        height: 12px !important;
        stroke: #fff !important;
        stroke-width: 3 !important
    }

.ap-field.good .f-ok {
    opacity: 1;
    transform: translateY(-50%) scale(1)
}

.ap-field.good .ap-inp input {
    padding-right: 40px
}

.hq-beacon {
    animation: hq-bcn 1.6s ease-in-out infinite
}

.hq-halo {
    animation: hq-halo 1.6s ease-in-out infinite
}

@keyframes hq-bcn {
    0%,100% {
        opacity: 1
    }

    50% {
        opacity: .55
    }
}

@keyframes hq-halo {
    0%,100% {
        opacity: .95
    }

    50% {
        opacity: .3
    }
}

.ap-or {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: .94rem;
    font-weight: 700;
    letter-spacing: .5px;
    text-transform: uppercase;
    color: var(--muted)
}

    .ap-or::before, .ap-or::after {
        content: "";
        flex: 1;
        height: 1px;
        background: var(--line)
    }

.ap-btn.ap-outline {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 12px 18px;
    cursor: pointer;
    color: var(--ink);
    background: var(--surface);
    border: 1.5px solid var(--line);
    transition: all .2s
}

    .ap-btn.ap-outline:hover {
        border-color: #0072ed;
        color: #0072ed;
        transform: translateY(-1px);
        box-shadow: 0 8px 18px -10px rgba(0,114,237,.6)
    }

    .ap-btn.ap-outline svg {
        width: 18px;
        height: 18px
    }

.sc-stage {
    position: relative;
    overflow: hidden;
    height: calc(100dvh - 72px);
    min-height: 520px;
    display: flex;
    align-items: center;
    --px: 0;
    --py: 0;
    --sky1: #8ec8ff;
    --sky2: #e9f5ff;
    --far2: #e8eef5;
    --farwin2: #a9c3de;
    --beige: #eadfc8;
    --beige2: #d8caa9;
    --shopglass: #9fc3e6;
    --pod: #f2f4f7;
    --podglass: #34465e;
    --louver: rgba(255,255,255,.35);
    --band: #f7f9fc;
    --door: rgba(159,195,230,.85);
    --wing: #eef1f5;
    --glassA: #6fb2ff;
    --glassB: #1d63d6;
    --glassC: #0b3f9e;
    --hqgrey: #cfd8e2;
    --groove: #aab7c6;
    --slab: rgba(255,255,255,.25);
    --fin: #e9eff6;
    --cant: #e3e9f0;
    --dark1: #3c4658;
    --dark2: #6d8fb8;
    --dark3: #8fa6c4;
    --rail: #9aa7b4;
    --curb: #c9d1da;
    --pal: #e7e2d4;
    --pal2: #d6cfba;
    --palwin: #8fa3b8;
    --wire: #34495e;
    --twoff: rgba(255,255,255,.08);
    --wwoff: #2a4d86;
    --hill1: #b7dcc4;
    --hill2: #9fd1ae;
    --turb: #fff;
    --far: #bcd5ee;
    --farwin: rgba(255,255,255,.55);
    --cloud: #fff;
    --walk: #d6dde5;
    --road: #4a5a6c;
    --grass: #7cc47f;
    --win: #cfe8f7;
    background: linear-gradient(180deg,var(--sky1) 0%,var(--sky2) 70%);
    transition: background .6s
}

:root[data-theme="dark"] .sc-stage {
    --sky1: #000a1f;
    --sky2: #0a3f86;
    --far2: #1a3a66;
    --farwin2: #ffd24d;
    --beige: #8f8672;
    --beige2: #766d5a;
    --shopglass: #ffd98a;
    --pod: #9aa6b4;
    --podglass: #162335;
    --louver: rgba(255,255,255,.12);
    --band: #e9f7ff;
    --door: rgba(40,70,110,.9);
    --wing: #1a2f5c;
    --glassA: #1c3f78;
    --glassB: #0b2554;
    --glassC: #061634;
    --hqgrey: #6f7d8d;
    --groove: #58667a;
    --slab: rgba(255,255,255,.08);
    --fin: #8b9bb0;
    --cant: #b9c7d6;
    --dark1: #141d2c;
    --dark2: #23385a;
    --dark3: #2c4468;
    --rail: #5b6878;
    --curb: #3a4a5c;
    --pal: #6f6b5c;
    --pal2: #57544a;
    --palwin: #ffe38a;
    --wire: #8fa3bb;
    --twoff: rgba(255,255,255,.03);
    --wwoff: #132a50;
    --hill1: #0c3a5e;
    --hill2: #0f4a4a;
    --turb: #9fb3c8;
    --far: #0d3470;
    --farwin: #ffd24d;
    --cloud: #2e5288;
    --walk: #34455a;
    --road: #1b2531;
    --grass: #1d5438;
    --win: #23466f
}

.sc-svg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    display: block
}

    .sc-svg * {
        transform-box: view-box
    }

.sc-l1 {
    transform: translate(calc(var(--px) * -8px),calc(var(--py) * -4px))
}

.sc-l2, .sc-l3, .sc-people, .sc-l4, .sc-refuge, .sc-l4b {
    transform: translate(calc(var(--px) * -16px),calc(var(--py) * -6px))
}

.sc-clouds {
    transform: translate(calc(var(--px) * -26px),calc(var(--py) * -10px))
}

.sc-l1, .sc-l2, .sc-l3, .sc-people, .sc-l4, .sc-refuge, .sc-l4b, .sc-clouds {
    transition: transform .3s ease-out
}

:root[data-theme="dark"] .sc-l2 {
    filter: brightness(.78) saturate(.9)
}

.sc-sun {
    transition: opacity .6s,transform .6s
}

.sc-rays {
    animation: ap-spin 30s linear infinite;
    transform-box: fill-box;
    transform-origin: center
}

.sc-moon, .sc-stars, .sc-shoot {
    opacity: 0;
    transition: opacity .6s
}

:root[data-theme="dark"] .sc-sun {
    opacity: 0;
    transform: translateY(80px)
}

:root[data-theme="dark"] .sc-moon, :root[data-theme="dark"] .sc-stars {
    opacity: 1
}

.sc-stars circle {
    fill: #fff;
    animation: sc-twinkle 3s ease-in-out infinite
}

@keyframes sc-twinkle {
    0%,100% {
        opacity: .25
    }

    50% {
        opacity: 1
    }
}

:root[data-theme="dark"] .sc-shoot {
    animation: sc-shoot 9s ease-in infinite 2s
}

@keyframes sc-shoot {
    0% {
        transform: translate(1150px,40px);
        opacity: 0
    }

    2% {
        opacity: 1
    }

    8% {
        transform: translate(820px,150px);
        opacity: 0
    }

    100% {
        transform: translate(820px,150px);
        opacity: 0
    }
}

.sc-cloud {
    animation: sc-cloud linear infinite;
    will-change: transform
}

@keyframes sc-cloud {
    from {
        transform: translateX(-360px)
    }

    to {
        transform: translateX(1760px)
    }
}

.sc-rotor {
    animation: ap-spin linear infinite;
    transform-box: view-box;
    transform-origin: 0 0
}

.sc-birds {
    animation: sc-birds 42s linear infinite;
    will-change: transform
}

    .sc-birds.b2 {
        animation-name: sc-birds2;
        animation-duration: 55s;
        animation-delay: -25s
    }

@keyframes sc-birds {
    from {
        transform: translate(-220px,260px)
    }

    to {
        transform: translate(1820px,150px)
    }
}

@keyframes sc-birds2 {
    from {
        transform: translate(1820px,420px)
    }

    to {
        transform: translate(-220px,330px)
    }
}

.sc-bird {
    transform-box: fill-box !important;
    transform-origin: center !important;
    animation: sc-flap .42s ease-in-out infinite alternate
}

@keyframes sc-flap {
    from {
        transform: scaleY(1)
    }

    to {
        transform: scaleY(-.35)
    }
}

.sc-plane {
    animation: sc-fly 26s linear infinite;
    will-change: transform
}

@keyframes sc-fly {
    0% {
        transform: translate(-520px,330px)
    }

    65% {
        transform: translate(2120px,262px)
    }

    100% {
        transform: translate(2120px,262px)
    }
}

.sc-plane.hero {
    animation: sc-hero 8s cubic-bezier(.35,.1,.45,1) forwards
}

@keyframes sc-hero {
    0% {
        transform: translate(-460px,330px)
    }

    100% {
        transform: translate(2120px,260px)
    }
}

.sc-plane-in {
    animation: ap-bob 2.4s ease-in-out infinite
}

.sc-plane2 {
    animation: sc-fly2 38s linear -14s infinite;
    will-change: transform
}

@keyframes sc-fly2 {
    0% {
        transform: translate(1780px,110px)
    }

    70% {
        transform: translate(-320px,80px)
    }

    100% {
        transform: translate(-320px,80px)
    }
}

.sc-heli {
    animation: sc-heli 46s linear -18s infinite;
    will-change: transform
}

@keyframes sc-heli {
    from {
        transform: translate(-200px,440px)
    }

    to {
        transform: translate(1820px,400px)
    }
}

.sc-heli-in {
    animation: ap-bob 1.6s ease-in-out infinite
}

.sc-rotor-main, .sc-tail-rotor ellipse {
    transform-box: fill-box !important;
    transform-origin: center !important;
    animation: sc-blur .12s linear infinite alternate
}

.sc-tail-rotor ellipse {
    animation-name: sc-blur2
}

@keyframes sc-blur {
    to {
        transform: scaleX(.15)
    }
}

@keyframes sc-blur2 {
    to {
        transform: scaleY(.2)
    }
}

.sc-balloon {
    animation: sc-balloon 90s linear -30s infinite;
    will-change: transform
}

@keyframes sc-balloon {
    0% {
        transform: translate(-120px,470px)
    }

    50% {
        transform: translate(800px,360px)
    }

    100% {
        transform: translate(1740px,430px)
    }
}

.sc-balloon-in {
    animation: sc-float 6s ease-in-out infinite
}

@keyframes sc-float {
    0%,100% {
        transform: translateY(0) rotate(-2deg)
    }

    50% {
        transform: translateY(-16px) rotate(2deg)
    }
}

.sc-flame {
    transform-box: fill-box !important;
    transform-origin: bottom center !important;
    animation: sc-flame .3s ease-in-out infinite alternate
}

@keyframes sc-flame {
    to {
        transform: scale(.7,1.25)
    }
}

.sc-trolley {
    animation: sc-trolley 7s ease-in-out infinite alternate
}

@keyframes sc-trolley {
    to {
        transform: translateX(70px)
    }
}

.sc-rope {
    transform-box: fill-box !important;
    transform-origin: top center !important;
    animation: sc-rope 5s ease-in-out infinite alternate
}

@keyframes sc-rope {
    to {
        transform: scaleY(.55)
    }
}

.sc-walker {
    animation: linear infinite;
    will-change: transform
}

.sc-walk-r {
    animation-name: sc-walk-r
}

.sc-walk-l {
    animation-name: sc-walk-l
}

@keyframes sc-walk-r {
    0% {
        transform: translateX(340px);
        opacity: 0
    }

    3% {
        opacity: 1
    }

    97% {
        opacity: 1
    }

    100% {
        transform: translateX(1620px);
        opacity: 0
    }
}

@keyframes sc-walk-l {
    0% {
        transform: translateX(1620px);
        opacity: 0
    }

    3% {
        opacity: 1
    }

    97% {
        opacity: 1
    }

    100% {
        transform: translateX(340px);
        opacity: 0
    }
}

.sc-step {
    animation: sc-step .5s ease-in-out infinite alternate
}

@keyframes sc-step {
    to {
        transform: translateY(-1.5px)
    }
}

.sc-leg1, .sc-leg2 {
    transform-box: fill-box !important;
    transform-origin: top center !important;
    animation: sc-leg .5s ease-in-out infinite alternate
}

.sc-leg2 {
    animation-direction: alternate-reverse
}

@keyframes sc-leg {
    from {
        transform: rotate(-22deg)
    }

    to {
        transform: rotate(22deg)
    }
}

.sc-siren {
    animation: sc-siren .5s steps(1) infinite
}

@keyframes sc-siren {
    0% {
        fill: #ff3b3b
    }

    50% {
        fill: #2f7bff
    }
}

.sc-fw {
    fill: var(--farwin);
    opacity: .6
}

:root[data-theme="dark"] .sc-fw:nth-child(3n) {
    opacity: .55
}

:root[data-theme="dark"] .sc-fw:not(:nth-child(3n)) {
    opacity: .08
}

.sc-win {
    fill: var(--win)
}

:root[data-theme="dark"] .sc-win:nth-of-type(3n+1) {
    fill: #ffe066
}

.sc-tw {
    fill: var(--win);
    transition: fill .35s
}

    .sc-tw.on {
        fill: #ffd24d;
        filter: drop-shadow(0 0 5px rgba(255,210,77,.9))
    }

.sc-beacon {
    animation: ap-blink 1.2s steps(1) infinite
}

.sc-tree {
    animation: ap-sway 4s ease-in-out infinite
}

.sc-glow {
    opacity: 0;
    transition: opacity .4s
}

:root[data-theme="dark"] .sc-glow {
    opacity: .25
}

.sc-lamp.on .sc-glow {
    opacity: 1
}

.sc-beam {
    opacity: 0;
    transition: opacity .6s
}

:root[data-theme="dark"] .sc-beam {
    opacity: 1
}

#scTraffic circle {
    fill: #3b4a5c;
    transition: fill .2s
}

#scTraffic.go .sc-tl-g {
    fill: #3fd46a;
    filter: drop-shadow(0 0 5px #3fd46a)
}

#scTraffic.wait .sc-tl-y {
    fill: #ffd24d;
    filter: drop-shadow(0 0 5px #ffd24d)
}

#scTraffic.stop .sc-tl-r {
    fill: #ff4d4d;
    filter: drop-shadow(0 0 6px #ff4d4d)
}

#scTraffic, .sc-tram {
    cursor: pointer
}

    .sc-tram.ding > g {
        animation: tram-ding .5s ease
    }

@keyframes tram-ding {
    0%,100% {
        transform: translate(0,884px) scale(.95)
    }

    40% {
        transform: translate(0,878px) scale(.95)
    }

    70% {
        transform: translate(0,886px) scale(.95)
    }
}

.sc-car {
    animation: linear infinite
}

.sc-car-r {
    animation-name: sc-drive-r
}

.sc-car-l {
    animation-name: sc-drive-l
}

@keyframes sc-drive-r {
    from {
        transform: translateX(-220px)
    }

    to {
        transform: translateX(1720px)
    }
}

@keyframes sc-drive-l {
    from {
        transform: translateX(1720px)
    }

    to {
        transform: translateX(-220px)
    }
}

.sc-wheel {
    animation: ap-spin .7s linear infinite;
    transform-box: fill-box;
    transform-origin: center
}

.sc-l4.halt .sc-car, .sc-l4.halt .sc-wheel {
    animation-play-state: paused
}

.sc-wrap {
    position: relative;
    z-index: 2;
    display: flex;
    justify-content: center;
    width: 100%;
    padding: 16px;
    box-sizing: border-box
}

@media (min-width:1000px) {
    .sc-wrap {
        justify-content: flex-start;
        padding-left: max(24px,8vw)
    }
}

.sc-card, .sc-card * {
    box-sizing: border-box
}

.sc-card {
    font-family: "Allianz Neo","Segoe UI",Roboto,Arial,sans-serif;
    color: var(--ink);
    width: 100%;
    max-width: 430px;
    padding: 30px 32px 24px !important;
    border-radius: 26px;
    background: color-mix(in srgb,var(--surface) 80%,transparent);
    backdrop-filter: blur(18px) saturate(1.4);
    -webkit-backdrop-filter: blur(18px) saturate(1.4);
    box-shadow: 0 40px 80px -36px rgba(0,30,80,.55),0 0 0 1px color-mix(in srgb,var(--line) 70%,transparent)
}

    .sc-card.shake {
        animation: sc-shake .55s ease-in-out
    }

@keyframes sc-shake {
    0%,100% {
        transform: none
    }

    20% {
        transform: translateX(-10px)
    }

    40% {
        transform: translateX(9px)
    }

    60% {
        transform: translateX(-6px)
    }

    80% {
        transform: translateX(4px)
    }
}

.sc-card h2 {
    text-align: left
}

.lx-hint {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 1.01rem;
    font-weight: 600;
    color: var(--muted);
    margin: -14px 0 18px;
    min-height: 1.3em
}

    .lx-hint b {
        width: 8px;
        height: 8px;
        border-radius: 50%;
        background: #9fb3c8;
        flex: none;
        transition: background .3s
    }

    .lx-hint.ok b {
        background: #3fa65a;
        box-shadow: 0 0 0 4px rgba(63,166,90,.2)
    }

    .lx-hint.bad b {
        background: #e2474b;
        box-shadow: 0 0 0 4px rgba(226,71,75,.2)
    }

    .lx-hint.go b {
        background: #0072ed;
        box-shadow: 0 0 0 4px rgba(0,114,237,.2)
    }

.sc-card .ap-btn.ap-primary {
    position: relative;
    overflow: hidden
}

    .sc-card .ap-btn.ap-primary::after {
        content: "";
        position: absolute;
        top: 0;
        left: -60%;
        width: 40%;
        height: 100%;
        background: linear-gradient(100deg,transparent,rgba(255,255,255,.35),transparent);
        transform: skewX(-20deg);
        animation: x-sweep 3.5s ease-in-out infinite
    }

@keyframes x-sweep {
    0%,60% {
        left: -60%
    }

    100% {
        left: 130%
    }
}

.x-ok {
    display: none;
    text-align: center;
    padding: 26px 0 10px
}

.sc-card.done form, .sc-card.done .lx-hint, .sc-card.done .ap-kicker, .sc-card.done h2, .sc-card.done .ap-sub {
    display: none
}

.sc-card.done .x-ok {
    display: block;
    animation: x-in .5s cubic-bezier(.3,1.4,.5,1)
}

@keyframes x-in {
    from {
        opacity: 0;
        transform: scale(.85)
    }
}

.x-ok svg {
    width: 74px;
    height: 74px
}

.x-ok circle {
    fill: #3fa65a
}

.x-ok path {
    stroke-dasharray: 40;
    stroke-dashoffset: 40;
    animation: x-check .6s .2s ease-out forwards
}

@keyframes x-check {
    to {
        stroke-dashoffset: 0
    }
}

.x-ok h3 {
    font-size: 1.59rem;
    font-weight: 800;
    margin: 12px 0 4px
}

.x-ok p {
    color: var(--muted);
    font-size: 1.09rem;
    margin: 0
}

.x-bar {
    height: 5px;
    border-radius: 5px;
    background: var(--line);
    margin: 18px auto 0;
    max-width: 260px;
    overflow: hidden
}

    .x-bar i {
        display: block;
        height: 100%;
        width: 0;
        background: linear-gradient(90deg,#003781,#0072ed,#7fd0f2);
        animation: x-load 2.4s ease-in-out forwards
    }

@keyframes x-load {
    to {
        width: 100%
    }
}

.sc-stage + .ap-footer {
    margin-top: 0;
    padding-top: 22px
}

@media (prefers-reduced-motion:reduce) {
    .sc-svg * {
        animation: none !important
    }
}

@media (max-width:700px) {
    .sc-card {
        padding: 24px 20px 20px !important
    }
}

@media (max-width:999px) and (orientation:portrait) {
    .sc-stage {
        display: block;
        height: auto;
        min-height: calc(100dvh - 72px)
    }

    .sc-svg {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%
    }

    .sc-wrap {
        padding: var(--card-top,45vh) 16px 14px
    }

    .sc-card {
        max-height: none;
        overflow: visible
    }

        .sc-card .x-demo {
            display: none
        }
}

@media (max-width:999px) and (orientation:portrait) and (max-height:700px) {
    .sc-card .ap-sub, .sc-card .ap-kicker {
        display: none
    }
}

@media (max-width:999px) and (orientation:landscape) {
    .sc-stage {
        min-height: 0;
        height: calc(100dvh - 72px);
        align-items: flex-start
    }

    .sc-wrap {
        justify-content: flex-start;
        padding: 12px 16px
    }

    .sc-card {
        max-width: min(430px,42vw);
        padding: 16px 18px 14px !important
    }

        .sc-card .x-demo, .sc-card .ap-kicker {
            display: none
        }
}

.sc-card {
    max-height: calc(100dvh - 72px - 32px);
    overflow: auto;
    scrollbar-width: thin
}

    .sc-card .ap-sub {
        margin-bottom: 16px
    }

    .sc-card form {
        gap: 12px
    }

@media (max-height:760px) {
    .sc-card {
        padding: 20px 26px 16px !important
    }

        .sc-card .ap-kicker, .sc-card .x-demo {
            display: none
        }

        .sc-card h2 {
            font-size: 1.54rem
        }

        .sc-card .ap-sub {
            margin-bottom: 12px
        }

        .sc-card .lx-hint {
            margin: -8px 0 12px
        }

        .sc-card .ap-inp input {
            padding-top: 9px;
            padding-bottom: 9px
        }

        .sc-card .ap-btn.ap-primary {
            padding: 11px 16px
        }

        .sc-card .ap-btn.ap-outline {
            padding: 9px 16px
        }
}

@media (max-height:640px) {
    .sc-card .ap-or, .sc-card .ap-outline, .sc-card .ap-sub {
        display: none
    }
}

.sc-tw {
    fill: var(--twoff);
    transition: fill .35s
}

    .sc-tw.on {
        fill: rgba(255,214,90,.8)
    }

:root[data-theme="dark"] .sc-tw.on {
    fill: #ffd24d;
    filter: drop-shadow(0 0 6px rgba(255,210,77,.9))
}

.sc-ww {
    fill: var(--wwoff);
    transition: fill .35s
}

    .sc-ww.on {
        fill: #ffd24d
    }

:root[data-theme="dark"] .sc-ww.on {
    filter: drop-shadow(0 0 4px rgba(255,210,77,.9))
}

.sc-bwin {
    fill: #4f6a8c
}

:root[data-theme="dark"] .sc-bwin:nth-of-type(4n+1) {
    fill: #ffe38a
}

.sc-nwin {
    fill: rgba(255,255,255,.15)
}

:root[data-theme="dark"] .sc-nwin {
    fill: #ffe38a
}

.hq-sweep {
    animation: hq-sweep 9s ease-in-out infinite
}

@keyframes hq-sweep {
    0% {
        transform: translateX(-60px)
    }

    60%,100% {
        transform: translateX(300px)
    }
}

.hq-sign text {
    transition: filter .5s
}

:root[data-theme="dark"] .hq-sign text {
    filter: drop-shadow(0 0 5px rgba(127,208,242,.9))
}

.hq-win .hq-sign text {
    filter: drop-shadow(0 0 8px rgba(0,114,237,.9))
}

.hq-doorglow {
    opacity: 0;
    transition: opacity .6s
}

.hq-win .hq-doorglow {
    opacity: 1
}

:root:not([data-theme="dark"]) .hq-doorglow {
    opacity: .55
}

#hqDoorL, #hqDoorR {
    transition: transform .8s cubic-bezier(.5,0,.3,1)
}

.hq-win #hqDoorL {
    transform: translateX(-20px)
}

.hq-win #hqDoorR {
    transform: translateX(20px)
}

:root:not([data-theme="dark"]) #hqDoorL {
    transform: translateX(-20px)
}

:root:not([data-theme="dark"]) #hqDoorR {
    transform: translateX(20px)
}

#hqGuest {
    opacity: 0;
    transform: translateX(640px)
}

.hq-win #hqGuest {
    animation: hq-guest 3.2s .6s ease-in-out forwards
}

@keyframes hq-guest {
    0% {
        opacity: 0;
        transform: translateX(640px)
    }

    10% {
        opacity: 1
    }

    85% {
        opacity: 1;
        transform: translateX(930px)
    }

    100% {
        opacity: 0;
        transform: translateX(936px)
    }
}

.sc-tram .sc-wheel {
    animation-duration: 1.4s
}

.sc-up {
    animation: sc-up linear infinite;
    transform-box: view-box
}

@keyframes sc-up {
    0% {
        transform: translate(226px,772px) scale(1);
        opacity: 1
    }

    85% {
        opacity: 1
    }

    100% {
        transform: translate(261px,654px) scale(.25);
        opacity: 0
    }
}

.sc-up.dn {
    animation-name: sc-dn
}

@keyframes sc-dn {
    0% {
        transform: translate(288px,654px) scale(.25);
        opacity: 0
    }

    15% {
        opacity: 1
    }

    100% {
        transform: translate(298px,772px) scale(1);
        opacity: 1
    }
}

.sc-wait {
    animation: sc-board 30s linear infinite;
    animation-delay: -12s !important
}

    .sc-wait .sc-leg1, .sc-wait .sc-leg2 {
        animation: none
    }

@keyframes sc-board {
    0%,26% {
        opacity: 1
    }

    30%,72% {
        opacity: 0
    }

    78%,100% {
        opacity: 1
    }
}

.hq-in {
    animation: hq-in 16s linear infinite
}

@keyframes hq-in {
    0% {
        transform: translateX(700px);
        opacity: 0
    }

    4% {
        opacity: 1
    }

    45% {
        transform: translateX(893px);
        opacity: 1
    }

    50%,100% {
        transform: translateX(893px);
        opacity: 0
    }
}

.hq-out {
    animation: hq-out 18s linear infinite;
    animation-delay: -7s
}

@keyframes hq-out {
    0%,45% {
        transform: translateX(908px);
        opacity: 0
    }

    49% {
        opacity: 1
    }

    92% {
        transform: translateX(1185px);
        opacity: 1
    }

    98%,100% {
        transform: translateX(1185px);
        opacity: 0
    }
}

.hq-in2 {
    animation: hq-in2 22s linear infinite;
    animation-delay: -11s
}

@keyframes hq-in2 {
    0%,8% {
        transform: translateX(640px);
        opacity: 0
    }

    12% {
        opacity: 1
    }

    52% {
        transform: translateX(893px);
        opacity: 1
    }

    57%,100% {
        transform: translateX(893px);
        opacity: 0
    }
}

:root[data-theme="dark"] .hq-inout {
    display: none
}

.ped[data-stand="1"] .sc-leg1 {
    animation: none;
    d: path("M-2 20 L-2 34")
}

.ped[data-stand="1"] .sc-leg2 {
    animation: none;
    d: path("M2 20 L2 34")
}

.sc-car.halt, .sc-car.halt .sc-wheel {
    animation-play-state: paused
}

.sc-l4b.halt .sc-car, .sc-l4b.halt .sc-wheel {
    animation-play-state: paused
}

.hq-strip {
    fill: none;
    stroke: transparent;
    stroke-width: 3.4;
    stroke-linecap: round
}

:root[data-theme="dark"] .hq-fin, :root[data-theme="dark"] .hq-strip {
    animation: hq-led 15s ease-in-out infinite;
    filter: drop-shadow(0 0 3px currentColor) drop-shadow(0 0 8px currentColor)
}

@keyframes hq-led {
    0%,100% {
        stroke: #eaf4ff;
        color: #9fd0ff
    }

    20% {
        stroke: #2f7bff;
        color: #1b6fe0
    }

    40% {
        stroke: #ffd24d;
        color: #ffb400
    }

    60% {
        stroke: #ff5a5f;
        color: #e2474b
    }

    80% {
        stroke: #3fc3f5;
        color: #13a0d3
    }
}

:root[data-theme="dark"] .hq-core {
    fill: rgba(255,210,77,.22);
    stroke: #ffd24d;
    stroke-width: 1.6;
    filter: drop-shadow(0 0 8px #ffb400);
    animation: hq-core 3s ease-in-out infinite
}

@keyframes hq-core {
    50% {
        fill: rgba(255,210,77,.42)
    }
}

:root[data-theme="dark"] .hq-edge {
    stroke: #eaf4ff;
    filter: drop-shadow(0 0 6px #3fc3f5) drop-shadow(0 0 12px #1b6fe0)
}

:root[data-theme="dark"] .hq-gcol {
    fill: #0b3f9e;
    filter: drop-shadow(0 0 10px #2f7bff)
}

:root[data-theme="dark"] .hq-wing {
    stroke: #3fc3f5;
    filter: drop-shadow(0 0 8px #1b6fe0)
}

:root[data-theme="dark"] .hq-cant {
    fill: #fff6d6;
    filter: drop-shadow(0 6px 12px #ffb400)
}

:root[data-theme="dark"] .hq-sign text {
    fill: #003781
}

:root[data-theme="dark"] .hq-win .hq-fin, :root[data-theme="dark"] .hq-win .hq-strip {
    animation-duration: 2.4s
}

:root[data-theme="dark"] .sc-ww.on {
    fill: #fff1b8;
    filter: drop-shadow(0 0 5px #ffd24d)
}

.sc-p1, .sc-p2, .sc-p3 {
    transform-box: view-box;
    animation: linear infinite
}

.sc-p1 {
    animation-name: sc-p1;
    animation-duration: 17s
}

.sc-p2 {
    animation-name: sc-p2;
    animation-duration: 14s
}

.sc-p3 {
    animation-name: sc-p3;
    animation-duration: 16s
}

@keyframes sc-p1 {
    0% {
        transform: translate(301px,653px) scale(.2);
        opacity: 0
    }

    5% {
        opacity: 1
    }

    40% {
        transform: translate(321px,768px) scale(.78)
    }

    48% {
        transform: translate(330px,779px) scale(.85)
    }

    96% {
        opacity: 1
    }

    100% {
        transform: translate(680px,779px) scale(.85);
        opacity: 0
    }
}

@keyframes sc-p2 {
    0% {
        transform: translate(305px,653px) scale(.2);
        opacity: 0
    }

    6% {
        opacity: 1
    }

    38% {
        transform: translate(317px,768px) scale(.78)
    }

    46% {
        transform: translate(315px,800px) scale(.88)
    }

    92% {
        opacity: 1
    }

    100% {
        transform: translate(308px,952px) scale(1.12);
        opacity: 0
    }
}

@keyframes sc-p3 {
    0% {
        transform: translate(330px,955px) scale(1.12);
        opacity: 0
    }

    6% {
        opacity: 1
    }

    44% {
        transform: translate(324px,786px) scale(.85)
    }

    52% {
        transform: translate(320px,770px) scale(.78)
    }

    96% {
        opacity: 1
    }

    100% {
        transform: translate(302px,655px) scale(.2);
        opacity: 0
    }
}

.sc-far {
    animation: sc-far 13s linear infinite;
    transform-box: view-box
}

    .sc-far.b {
        animation: sc-farb 17s linear -6s infinite
    }

@keyframes sc-far {
    0% {
        transform: translate(-30px,708px)
    }

    100% {
        transform: translate(350px,708px)
    }
}

@keyframes sc-farb {
    0% {
        transform: translate(350px,720px)
    }

    100% {
        transform: translate(-30px,720px)
    }
}