@font-face {
    font-family: "Fangcun Space Grotesk";
    src: url("./fonts/SpaceGrotesk-SquareInch.woff2") format("woff2");
    font-style: normal;
    font-weight: 300 700;
    font-display: swap;
}

@font-face {
    font-family: "Fangcun LXGW WenKai";
    src: url("./fonts/LXGWWenKai-DailyQuote.woff2") format("woff2");
    font-style: normal;
    font-weight: 500;
    font-display: swap;
}

@font-face {
    font-family: "Fangcun QingKe HuangYou";
    src: url("./fonts/ZCOOLQingKeHuangYou-Regular.woff2") format("woff2");
    font-style: normal;
    font-weight: 400;
    font-display: swap;
}

.auth-shell {
    isolation: isolate;
}

.auth-bg-wave {
    position: absolute;
    inset: 0;
    z-index: 1;
    width: 100%;
    height: 100%;
    pointer-events: none;
    opacity: 0.5;
    mix-blend-mode: multiply;
}

.auth-shell::before,
.auth-shell::after {
    z-index: 0;
}

.auth-stage {
    z-index: 2;
}

.auth-particle-field {
    position: absolute;
    inset: 0;
    z-index: 1;
    width: 100%;
    height: 100%;
    pointer-events: auto;
    opacity: 0.46;
}

.auth-card {
    position: relative;
}

.auth-card-field {
    position: absolute;
    inset: 0;
    z-index: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    opacity: 0.36;
}

.auth-card > :not(.auth-card-field) {
    position: relative;
    z-index: 1;
}

.auth-visual::before,
.auth-visual::after {
    pointer-events: none;
}

.auth-visual::after {
    z-index: 0;
}

.auth-visual::before {
    z-index: 2;
}

.auth-visual-mark,
.auth-daily-quote,
.auth-visual-copy,
.auth-visual-map,
.auth-visual-stack {
    z-index: 3;
}

.auth-daily-quote {
    --auth-quote-accent: #188ca3;
    --auth-quote-muted: #52788b;
    --auth-quote-text: #29485a;
    position: absolute;
    top: 30px;
    right: 28px;
    left: 100px;
    height: 56px;
    display: flex;
    min-width: 0;
    flex-direction: column;
    justify-content: center;
    overflow: hidden;
    color: var(--auth-quote-text);
}

.auth-daily-quote-label {
    display: flex;
    align-items: center;
    gap: 9px;
    margin-bottom: 5px;
    color: var(--auth-quote-muted);
    font-family: "Fangcun Space Grotesk", "Segoe UI", sans-serif;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.1;
}

.auth-daily-quote-wordmark {
    display: inline-flex;
    align-items: baseline;
    white-space: nowrap;
}

.auth-daily-quote-wordmark strong {
    color: var(--auth-quote-accent);
    font-weight: 650;
}

.auth-daily-quote-label::after {
    content: "";
    flex: 0 0 auto;
    width: 28px;
    height: 1px;
    background: linear-gradient(90deg, var(--auth-quote-accent), transparent);
}

.auth-daily-quote-line {
    display: flex;
    min-width: 0;
    align-items: center;
    overflow: hidden;
    font-family: "Fangcun LXGW WenKai", var(--brand-display-font);
    font-size: 16px;
    font-weight: 500;
    line-height: 1.35;
    white-space: nowrap;
}

.auth-daily-quote-type {
    display: inline-block;
    min-width: 2px;
    max-width: 100%;
    overflow: hidden;
    border-right: 2px solid var(--auth-quote-accent);
    animation: auth-quote-caret 0.72s step-end infinite;
}

@keyframes auth-quote-caret {
    50% {
        border-color: transparent;
    }
}

html[data-theme="dark"] .auth-bg-wave {
    opacity: 0.36;
    mix-blend-mode: screen;
}

html[data-theme="dark"] .auth-particle-field {
    opacity: 0.42;
}

html[data-theme="dark"] .auth-card-field {
    opacity: 0.3;
}

html[data-theme="dark"] .auth-daily-quote {
    --auth-quote-accent: #62c8cf;
    --auth-quote-muted: #8fb5c7;
    --auth-quote-text: #dce9f7;
}

@media (min-width: 761px) {
    .auth-daily-quote {
        top: 34px;
        right: 34px;
        left: 116px;
        height: 66px;
    }

    .auth-daily-quote-label {
        font-size: 13px;
    }

    .auth-daily-quote-line {
        font-size: 17px;
    }
}

@media (max-width: 760px) {
    .auth-stage {
        overflow-x: clip;
    }

    .auth-entry,
    .auth-card,
    .auth-tabs,
    .auth-panels,
    .auth-form,
    .auth-form label,
    .auth-form input {
        min-width: 0;
        max-width: 100%;
    }

    .auth-card {
        overflow: hidden;
    }

    .auth-bg-wave {
        opacity: 0.52;
    }

    .auth-particle-field {
        opacity: 0.24;
    }

    .auth-card-field {
        opacity: 0.56;
    }

    .auth-daily-quote {
        top: 16px;
        right: 86px;
        left: 70px;
        height: 42px;
    }

    .auth-daily-quote-label {
        gap: 6px;
        margin-bottom: 3px;
        font-size: 10px;
    }

    .auth-daily-quote-label::after {
        width: 18px;
    }

    .auth-daily-quote-line {
        font-size: 13px;
    }

    .auth-visual-copy {
        display: none;
    }

    html[data-theme="dark"] .auth-card-field {
        opacity: 0.72;
        mix-blend-mode: screen;
    }

    html:not([data-theme="dark"]) .auth-shell {
        background:
            radial-gradient(ellipse at 16% 0%, rgba(0, 120, 212, 0.15), transparent 38%),
            radial-gradient(ellipse at 100% 8%, rgba(43, 166, 170, 0.12), transparent 34%),
            linear-gradient(180deg, #e8f1f6 0%, #f0f5f8 52%, #e5eef3 100%);
    }

    html:not([data-theme="dark"]) .auth-visual,
    html:not([data-theme="dark"]) .auth-card {
        border: 1px solid rgba(67, 103, 128, 0.18);
        background: rgba(248, 251, 253, 0.94);
        box-shadow: 0 6px 8px rgba(34, 68, 90, 0.08);
        backdrop-filter: blur(8px) saturate(1.04);
        -webkit-backdrop-filter: blur(8px) saturate(1.04);
    }

    html:not([data-theme="dark"]) .auth-visual::before {
        opacity: 0.68;
    }

    html:not([data-theme="dark"]) .auth-tabs {
        border: 1px solid rgba(67, 103, 128, 0.16);
        background: #edf3f6;
    }

    html:not([data-theme="dark"]) .auth-note strong,
    html:not([data-theme="dark"]) .auth-brand,
    html:not([data-theme="dark"]) .auth-form span {
        color: #243746;
    }

    html:not([data-theme="dark"]) .auth-brand-caption,
    html:not([data-theme="dark"]) .auth-shell .text-link,
    html:not([data-theme="dark"]) .auth-actions {
        color: #536a7c;
    }

    html:not([data-theme="dark"]) .auth-form input {
        color: #20313f;
        border-color: rgba(65, 91, 111, 0.26);
        background: rgba(255, 255, 255, 0.98);
        box-shadow: inset 0 1px 1px rgba(35, 58, 75, 0.035);
    }

    html:not([data-theme="dark"]) .auth-form input::placeholder {
        color: #66798a;
    }

    html:not([data-theme="dark"]) .auth-form input:hover {
        border-color: rgba(48, 92, 122, 0.38);
    }

    html:not([data-theme="dark"]) .auth-form input:focus {
        border-color: #3181cf;
        box-shadow: 0 0 0 3px rgba(0, 120, 212, 0.13);
    }

    html:not([data-theme="dark"]) .auth-card-field {
        opacity: 0.46;
    }
}

@media (max-width: 380px) {
    .auth-daily-quote {
        top: 14px;
        right: 82px;
        left: 64px;
        height: 38px;
    }

    .auth-daily-quote-label {
        margin-bottom: 3px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .auth-bg-wave,
    .auth-particle-field,
    .auth-card-field {
        opacity: 0.14;
    }

    .auth-daily-quote-type {
        animation: none;
    }
}

/* Validation messages share the label row and never change form geometry. */
.auth-shell .auth-form label {
    position: relative;
    isolation: isolate;
    --input-ripple-x: 50%;
    --input-ripple-y: 50%;
    --input-ripple-strength: 1;
    --input-add-ring: rgba(0, 118, 212, 0.95);
    --input-add-core: rgba(0, 172, 190, 0.68);
    --input-delete-ring: rgba(219, 82, 40, 0.92);
    --input-delete-core: rgba(216, 139, 20, 0.66);
}

.auth-shell .auth-form label.is-input-adding input {
    animation: none;
}

.auth-shell .auth-form label.is-input-deleting input {
    animation: none;
}

.auth-input-wave {
    --field-width: 220px;
    --field-height: 52px;
    --stream-size: max(var(--field-width), var(--field-height));
    position: absolute;
    left: var(--input-ripple-x);
    top: var(--input-ripple-y);
    z-index: 2;
    pointer-events: none;
    contain: layout paint;
    backface-visibility: hidden;
    transform: translate3d(-50%, -50%, 0) scale(1);
    opacity: 0;
    mix-blend-mode: normal;
    will-change: transform, opacity;
    overflow: hidden;
}

.auth-input-wave::before,
.auth-input-wave::after {
    content: "";
    position: absolute;
    pointer-events: none;
}

.auth-input-wave::before {
    left: 50%;
    top: 50%;
    width: calc(var(--stream-size) * 1.55);
    height: calc(var(--stream-size) * 1.55);
    border-radius: 50%;
    background:
        conic-gradient(
            from var(--stream-angle, -120deg),
            transparent 0deg,
            transparent 198deg,
            color-mix(in srgb, var(--input-wave-core) 58%, transparent) 238deg,
            color-mix(in srgb, var(--input-wave-ring) 88%, transparent) 278deg,
            color-mix(in srgb, var(--input-wave-core) 48%, transparent) 306deg,
            transparent 338deg,
            transparent 360deg
        );
    transform: translate(-50%, -50%) rotate(0deg);
    animation: auth-input-stream 1320ms cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.auth-input-wave::after {
    inset: 0;
    border-radius: inherit;
    background: rgba(255, 255, 255, 0.01);
    box-shadow:
        inset 0 0 0 1px color-mix(in srgb, var(--input-wave-ring) 42%, transparent),
        inset 0 0 18px color-mix(in srgb, var(--input-wave-core) 32%, transparent);
    opacity: 0;
    animation: auth-input-stream-shell 1320ms cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.auth-input-wave {
    -webkit-mask:
        linear-gradient(#000 0 0) content-box,
        linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask:
        linear-gradient(#000 0 0) content-box,
        linear-gradient(#000 0 0);
    mask-composite: exclude;
    padding: 3px;
}

.auth-input-wave.is-add {
    --input-wave-ring: var(--input-add-ring);
    --input-wave-core: var(--input-add-core);
    --stream-angle: -132deg;
    animation: auth-input-wave-stream-add 1320ms cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.auth-input-wave.is-delete {
    --input-wave-ring: var(--input-delete-ring);
    --input-wave-core: var(--input-delete-core);
    --stream-angle: 48deg;
    animation: auth-input-wave-stream-delete 1320ms cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.auth-input-wave.is-delete::before {
    animation-name: auth-input-stream-reverse;
}

html[data-theme="dark"] .auth-shell .auth-form label {
    --input-add-ring: rgba(113, 225, 255, 0.96);
    --input-add-core: rgba(93, 255, 225, 0.62);
    --input-delete-ring: rgba(255, 139, 120, 0.94);
    --input-delete-core: rgba(255, 206, 112, 0.58);
}

html[data-theme="dark"] .auth-input-wave {
    mix-blend-mode: screen;
}

@keyframes auth-input-wave-stream-add {
    0% {
        opacity: 0;
        transform: translate3d(-50%, -50%, 0) scale(0.992);
    }

    14% {
        opacity: 0.86;
        transform: translate3d(-50%, -50%, 0) scale(1);
    }

    64% {
        opacity: 0.62;
        transform: translate3d(-50%, -50%, 0) scale(1.006);
    }

    100% {
        opacity: 0;
        transform: translate3d(-50%, -50%, 0) scale(1.012);
    }
}

@keyframes auth-input-wave-stream-delete {
    0% {
        opacity: 0;
        transform: translate3d(-50%, -50%, 0) scale(1.012);
    }

    18% {
        opacity: 0.78;
        transform: translate3d(-50%, -50%, 0) scale(1.006);
    }

    64% {
        opacity: 0.54;
        transform: translate3d(-50%, -50%, 0) scale(1);
    }

    100% {
        opacity: 0;
        transform: translate3d(-50%, -50%, 0) scale(0.992);
    }
}

@keyframes auth-input-stream {
    0% {
        transform: translate(-50%, -50%) rotate(0deg);
    }

    100% {
        transform: translate(-50%, -50%) rotate(310deg);
    }
}

@keyframes auth-input-stream-reverse {
    0% {
        transform: translate(-50%, -50%) rotate(0deg);
    }

    100% {
        transform: translate(-50%, -50%) rotate(-310deg);
    }
}

@keyframes auth-input-stream-shell {
    0% {
        opacity: 0;
    }

    20% {
        opacity: 0.52;
    }

    72% {
        opacity: 0.32;
    }

    100% {
        opacity: 0;
    }
}

.auth-shell .auth-form .field-error {
    position: absolute;
    top: 0;
    right: 0;
    z-index: 4;
    max-width: 68%;
    margin: 0;
    overflow: hidden;
    color: #b42318;
    font-size: 12px;
    font-weight: 650;
    line-height: 1.35;
    text-align: right;
    text-overflow: ellipsis;
    white-space: nowrap;
    pointer-events: none;
}

html[data-theme="dark"] .auth-shell .auth-form .field-error {
    color: #ff9eae;
}

@media (max-width: 760px) {
    .auth-shell .auth-form .field-error {
        position: static;
        max-width: 100%;
        margin-top: -2px;
        text-align: left;
        text-overflow: clip;
        white-space: normal;
    }
}

@media (prefers-reduced-motion: reduce) {
    .auth-shell .auth-form label.is-input-adding input,
    .auth-shell .auth-form label.is-input-deleting input {
        animation: none;
    }

    .auth-input-wave,
    .auth-input-wave.is-add,
    .auth-input-wave.is-delete,
    .auth-input-wave.is-add::after,
    .auth-input-wave.is-delete::after {
        animation: none;
    }

    .auth-input-wave {
        opacity: 0.2;
        transform: translate(-50%, -50%) scale(0.72);
    }
}

/* Final field validation treatment: inline with the label row, never in layout flow. */
.auth-shell .auth-form .field-error {
    position: absolute;
    top: -2px;
    right: 0;
    z-index: 4;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    width: fit-content;
    max-width: min(68%, 230px);
    min-height: 21px;
    margin: 0;
    padding: 2px 7px;
    overflow: hidden;
    border: 1px solid rgba(180, 35, 24, 0.16);
    border-radius: 999px;
    color: #9b2c24;
    background: rgba(180, 35, 24, 0.075);
    font-size: 12px;
    font-weight: 720;
    line-height: 1.25;
    text-align: right;
    text-overflow: ellipsis;
    white-space: nowrap;
    pointer-events: none;
    box-shadow: none;
}

.auth-shell .auth-form .field-error::before {
    content: "!";
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    width: 14px;
    height: 14px;
    border-radius: 999px;
    color: #ffffff;
    background: #b42318;
    font-size: 10px;
    font-weight: 850;
    line-height: 1;
}

html[data-theme="dark"] .auth-shell .auth-form .field-error {
    color: #ffc5ce;
    border-color: rgba(255, 128, 148, 0.24);
    background: rgba(255, 128, 148, 0.12);
}

html[data-theme="dark"] .auth-shell .auth-form .field-error::before {
    color: #3a0810;
    background: #ff7f93;
}

@media (max-width: 760px) {
    .auth-shell .auth-form .field-error {
        position: absolute;
        top: -1px;
        right: 0;
        max-width: calc(100% - 54px);
        margin: 0;
        text-align: right;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
}

@media (max-width: 380px) {
    .auth-shell .auth-form .field-error {
        max-width: calc(100% - 46px);
        padding-right: 6px;
        padding-left: 6px;
        font-size: 11px;
    }
}

/* Register verification state: one locked identity field, then code and password. */
.auth-shell .auth-resend-form {
    display: none;
}

.auth-shell .register-ticket-hint {
    margin-bottom: 10px;
}

.auth-shell .register-flow-form {
    gap: 10px;
    margin-top: 0;
}

.auth-shell .auth-locked-field input.auth-locked-qq[readonly] {
    cursor: default;
    color: #075f74;
    border-color: rgba(15, 127, 140, 0.36);
    background:
        radial-gradient(circle at 18% 50%, rgba(98, 215, 220, 0.2), transparent 36%),
        linear-gradient(135deg, rgba(235, 251, 253, 0.98), rgba(255, 255, 255, 0.9));
    box-shadow:
        0 0 0 3px rgba(15, 127, 140, 0.08),
        0 0 18px rgba(15, 127, 140, 0.24),
        inset 0 1px 0 rgba(255, 255, 255, 0.9);
    font-family: "Fangcun Space Grotesk", "Segoe UI", system-ui, sans-serif;
    font-weight: 850;
    letter-spacing: 0.025em;
    text-shadow: 0 0 12px rgba(15, 127, 140, 0.32);
    -webkit-text-fill-color: #075f74;
}

.auth-shell .auth-locked-field input.auth-locked-qq[readonly]:focus {
    border-color: rgba(15, 127, 140, 0.52);
    box-shadow:
        0 0 0 3px rgba(15, 127, 140, 0.12),
        0 0 22px rgba(15, 127, 140, 0.3),
        inset 0 1px 0 rgba(255, 255, 255, 0.94);
}

.auth-shell .auth-code-field {
    min-width: 0;
}

.auth-shell .code-moon-control {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 92px;
    align-items: stretch;
    min-width: 0;
    isolation: isolate;
}

.auth-shell .code-moon-control input {
    min-width: 0;
    padding-right: 16px;
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}

.auth-shell .code-moon-resend {
    position: relative;
    z-index: 1;
    display: grid;
    place-items: center;
    min-width: 0;
    min-height: 40px;
    margin-left: -11px;
    padding: 0 11px 0 22px;
    overflow: hidden;
    border: 1px solid rgba(62, 182, 190, 0.38);
    border-radius: 999px;
    color: #064f66;
    background:
        radial-gradient(circle at 70% 22%, rgba(255, 255, 255, 0.96), rgba(255, 255, 255, 0.38) 31%, transparent 58%),
        linear-gradient(135deg, rgba(194, 252, 255, 0.88), rgba(228, 246, 255, 0.64));
    box-shadow:
        0 0 0 1px rgba(255, 255, 255, 0.5) inset,
        0 0 18px rgba(42, 185, 202, 0.26),
        0 7px 14px rgba(15, 127, 140, 0.12);
    backdrop-filter: blur(12px) saturate(1.25);
    -webkit-backdrop-filter: blur(12px) saturate(1.25);
    cursor: wait;
    font: inherit;
    font-size: 12px;
    font-weight: 850;
    line-height: 1;
    white-space: nowrap;
    transform: translateZ(0);
    transition:
        color 170ms var(--motion-standard),
        border-color 170ms var(--motion-standard),
        box-shadow 170ms var(--motion-standard),
        transform 170ms var(--motion-standard);
}

.auth-shell .code-moon-resend::before {
    content: "";
    position: absolute;
    top: 50%;
    left: -15px;
    width: 30px;
    height: 30px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.88);
    box-shadow:
        inset -5px 0 12px rgba(15, 127, 140, 0.08),
        0 0 16px rgba(255, 255, 255, 0.76);
    transform: translateY(-50%);
}

.auth-shell .code-moon-resend::after {
    content: "";
    position: absolute;
    inset: -40% -12%;
    background:
        radial-gradient(circle at 28% 52%, rgba(255, 255, 255, 0.7), transparent 22%),
        conic-gradient(from 120deg, transparent, rgba(103, 232, 249, 0.38), transparent 44%);
    opacity: 0.74;
    transform: rotate(0deg);
    animation: code-moon-liquid 2400ms linear infinite;
}

.auth-shell .code-moon-resend:disabled {
    opacity: 1;
}

.auth-shell .code-moon-resend.is-ready {
    cursor: pointer;
    color: #ffffff;
    border-color: rgba(0, 120, 212, 0.44);
    background:
        radial-gradient(circle at 72% 18%, rgba(255, 255, 255, 0.76), transparent 42%),
        linear-gradient(135deg, #0078d4, #159aa8);
    box-shadow:
        0 0 0 1px rgba(255, 255, 255, 0.32) inset,
        0 0 20px rgba(0, 120, 212, 0.32),
        0 8px 16px rgba(0, 120, 212, 0.16);
}

.auth-shell .code-moon-resend.is-ready:hover {
    transform: translateY(-1px);
}

.auth-shell .code-moon-resend.is-ready::before {
    background: rgba(238, 248, 252, 0.96);
}

.auth-shell .code-moon-label {
    position: relative;
    z-index: 1;
}

.auth-shell .code-moon-resend.is-loading,
.auth-shell .code-moon-resend.is-assembling,
.auth-shell .code-moon-resend.is-orbiting {
    cursor: wait;
}

.auth-shell .code-moon-resend.is-loading .code-moon-label,
.auth-shell .code-moon-resend.is-assembling .code-moon-label,
.auth-shell .code-moon-resend.is-orbiting .code-moon-label {
    color: transparent;
}

.auth-shell .code-moon-resend.is-loading .code-moon-label::before,
.auth-shell .code-moon-resend.is-assembling .code-moon-label::before,
.auth-shell .code-moon-resend.is-orbiting .code-moon-label::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 13px;
    height: 13px;
    margin: -6.5px 0 0 -6.5px;
    border: 2px solid rgba(47, 110, 120, 0.2);
    border-top-color: rgba(47, 110, 120, 0.78);
    border-radius: 999px;
    animation: code-moon-spin 620ms linear infinite;
}

.auth-shell .code-moon-resend.is-completing .code-moon-label {
    opacity: 0.72;
}

.auth-shell .code-moon-control .field-error {
    top: -26px;
    right: 0;
    max-width: min(72%, 210px);
}

html[data-theme="dark"] .auth-shell .auth-locked-field input.auth-locked-qq[readonly] {
    color: #a9f5ff;
    border-color: rgba(103, 232, 249, 0.34);
    background:
        radial-gradient(circle at 18% 50%, rgba(103, 232, 249, 0.18), transparent 38%),
        linear-gradient(135deg, rgba(10, 28, 42, 0.92), rgba(7, 13, 24, 0.78));
    box-shadow:
        0 0 0 3px rgba(103, 232, 249, 0.08),
        0 0 22px rgba(103, 232, 249, 0.2),
        inset 0 1px 0 rgba(255, 255, 255, 0.08);
    text-shadow: 0 0 14px rgba(103, 232, 249, 0.44);
    -webkit-text-fill-color: #a9f5ff;
}

html[data-theme="dark"] .auth-shell .auth-locked-field input.auth-locked-qq[readonly]:focus {
    border-color: rgba(130, 173, 255, 0.58);
    box-shadow:
        0 0 0 3px rgba(130, 173, 255, 0.14),
        0 0 24px rgba(103, 232, 249, 0.24),
        inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

html[data-theme="dark"] .auth-shell .code-moon-resend {
    color: #c9f9ff;
    border-color: rgba(103, 232, 249, 0.3);
    background:
        radial-gradient(circle at 72% 20%, rgba(190, 246, 255, 0.36), transparent 43%),
        linear-gradient(135deg, rgba(34, 78, 102, 0.78), rgba(15, 31, 50, 0.76));
    box-shadow:
        0 0 0 1px rgba(255, 255, 255, 0.08) inset,
        0 0 20px rgba(103, 232, 249, 0.16),
        0 8px 16px rgba(1, 6, 18, 0.18);
}

html[data-theme="dark"] .auth-shell .code-moon-resend::before {
    background: rgba(10, 18, 32, 0.96);
    box-shadow:
        inset -5px 0 12px rgba(103, 232, 249, 0.12),
        0 0 16px rgba(103, 232, 249, 0.18);
}

html[data-theme="dark"] .auth-shell .code-moon-resend.is-ready {
    color: #ffffff;
    border-color: rgba(130, 173, 255, 0.42);
    background:
        radial-gradient(circle at 72% 18%, rgba(255, 255, 255, 0.38), transparent 42%),
        linear-gradient(135deg, #5a74df, #188ca3);
    box-shadow:
        0 0 0 1px rgba(255, 255, 255, 0.12) inset,
        0 0 22px rgba(130, 173, 255, 0.24),
        0 8px 16px rgba(1, 6, 18, 0.24);
}

@keyframes code-moon-liquid {
    to {
        transform: rotate(360deg);
    }
}

@media (max-width: 420px) {
    .auth-shell .code-moon-control {
        grid-template-columns: minmax(0, 1fr) 84px;
    }

    .auth-shell .code-moon-resend {
        padding-right: 9px;
        padding-left: 19px;
        font-size: 11px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .auth-shell .code-moon-resend::after {
        animation: none;
    }

    .auth-shell .code-moon-resend.is-ready:hover {
        transform: none;
    }
}

/* Register verification refinement: quieter hint, softer QQ glow, flatter crescent timer. */
.auth-shell .register-ticket-hint {
    display: flex;
    align-items: center;
    gap: 7px;
    min-height: 30px;
    margin-bottom: 9px;
    padding: 6px 8px;
    border-radius: 8px;
    color: rgba(79, 95, 114, 0.78);
    background: rgba(255, 255, 255, 0.34);
    border-color: rgba(80, 88, 99, 0.1);
    font-size: 12px;
    line-height: 1.35;
}

.auth-shell .register-ticket-copy {
    min-width: 0;
    flex: 1 1 auto;
}

.auth-shell .auth-register-reset-form {
    flex: 0 0 auto;
    margin-left: auto;
}

.auth-shell .auth-register-reset {
    padding: 2px 0;
    border: 0;
    color: #0f7f8c;
    background: transparent;
    font: inherit;
    font-size: 11px;
    font-weight: 750;
    cursor: pointer;
}

.auth-shell .auth-register-reset:hover,
.auth-shell .auth-register-reset:focus-visible {
    color: #075f69;
}

.auth-shell .auth-register-reset:focus-visible {
    outline: 2px solid rgba(15, 127, 140, 0.24);
    outline-offset: 2px;
}

.auth-shell .register-ticket-hint::before {
    content: "";
    flex: 0 0 auto;
    width: 6px;
    height: 6px;
    border-radius: 999px;
    background: rgba(15, 127, 140, 0.58);
    box-shadow: 0 0 9px rgba(15, 127, 140, 0.28);
}

.auth-shell .register-ticket-hint.success::before {
    background: rgba(22, 132, 90, 0.7);
    box-shadow: 0 0 9px rgba(22, 132, 90, 0.25);
}

.auth-shell .auth-locked-field input.auth-locked-qq[readonly] {
    color: rgba(7, 95, 116, 0.72);
    border-color: rgba(15, 127, 140, 0.24);
    background:
        linear-gradient(135deg, rgba(245, 253, 254, 0.94), rgba(255, 255, 255, 0.84));
    box-shadow:
        0 0 0 2px rgba(15, 127, 140, 0.055),
        0 0 14px rgba(15, 127, 140, 0.15),
        inset 0 1px 0 rgba(255, 255, 255, 0.88);
    font-weight: 760;
    letter-spacing: 0.018em;
    text-shadow:
        0 0 8px rgba(15, 127, 140, 0.22),
        0 0 18px rgba(103, 232, 249, 0.14);
    -webkit-text-fill-color: rgba(7, 95, 116, 0.72);
}

.auth-shell .auth-locked-field input.auth-locked-qq[readonly]:focus {
    border-color: rgba(15, 127, 140, 0.36);
    box-shadow:
        0 0 0 3px rgba(15, 127, 140, 0.08),
        0 0 16px rgba(15, 127, 140, 0.18),
        inset 0 1px 0 rgba(255, 255, 255, 0.92);
}

.auth-shell .code-moon-control {
    grid-template-columns: minmax(0, 1fr) 68px;
}

.auth-shell .code-moon-control input {
    min-height: 40px;
    padding-right: 12px;
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}

.auth-shell .code-moon-resend {
    min-height: 40px;
    margin-left: -1px;
    padding: 0 10px 0 18px;
    border-radius: 0 8px 8px 0;
    color: rgba(6, 79, 102, 0.7);
    border-color: rgba(80, 88, 99, 0.16);
    border-left-color: transparent;
    background:
        linear-gradient(135deg, rgba(255, 255, 255, 0.76), rgba(230, 250, 252, 0.58));
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.76),
        inset 0 0 18px rgba(103, 232, 249, 0.12);
    cursor: default;
    font-size: 11px;
    font-weight: 780;
    text-shadow: 0 0 8px rgba(15, 127, 140, 0.18);
}

.auth-shell .code-moon-resend::before {
    left: -13px;
    width: 26px;
    height: 26px;
    background:
        linear-gradient(135deg, rgba(255, 255, 255, 0.96), rgba(248, 252, 255, 0.9));
    box-shadow:
        6px 0 12px rgba(15, 127, 140, 0.075),
        inset -1px 0 0 rgba(80, 88, 99, 0.08);
}

.auth-shell .code-moon-resend::after {
    inset: 2px 2px 2px 20px;
    border-radius: 999px;
    background:
        radial-gradient(circle at 30% 50%, rgba(255, 255, 255, 0.62), transparent 42%),
        linear-gradient(90deg, rgba(103, 232, 249, 0.08), rgba(255, 255, 255, 0.02));
    opacity: 1;
    animation: none;
}

.auth-shell .code-moon-label {
    z-index: 2;
}

.auth-shell .code-moon-resend.is-ready {
    color: #075f74;
    border-color: rgba(15, 127, 140, 0.24);
    border-left-color: transparent;
    background:
        linear-gradient(135deg, rgba(232, 252, 254, 0.86), rgba(255, 255, 255, 0.72));
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.86),
        inset 0 0 18px rgba(103, 232, 249, 0.16),
        0 0 12px rgba(15, 127, 140, 0.1);
}

.auth-shell .code-moon-resend.is-ready:hover {
    color: #064f66;
    transform: none;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.9),
        inset 0 0 18px rgba(103, 232, 249, 0.2),
        0 0 14px rgba(15, 127, 140, 0.14);
}

.auth-shell .code-moon-resend:focus-visible {
    outline: 0;
    box-shadow:
        0 0 0 3px rgba(15, 127, 140, 0.12),
        inset 0 1px 0 rgba(255, 255, 255, 0.86);
}

html[data-theme="dark"] .auth-shell .register-ticket-hint {
    color: rgba(174, 189, 210, 0.8);
    background: rgba(30, 42, 64, 0.46);
    border-color: rgba(146, 167, 205, 0.12);
}

html[data-theme="dark"] .auth-shell .auth-register-reset {
    color: #82d5dc;
}

html[data-theme="dark"] .auth-shell .auth-register-reset:hover,
html[data-theme="dark"] .auth-shell .auth-register-reset:focus-visible {
    color: #c5f5f8;
}

html[data-theme="dark"] .auth-shell .register-ticket-hint::before {
    background: rgba(103, 232, 249, 0.62);
    box-shadow: 0 0 10px rgba(103, 232, 249, 0.24);
}

html[data-theme="dark"] .auth-shell .auth-locked-field input.auth-locked-qq[readonly] {
    color: rgba(169, 245, 255, 0.72);
    border-color: rgba(103, 232, 249, 0.24);
    background:
        linear-gradient(135deg, rgba(10, 28, 42, 0.78), rgba(7, 13, 24, 0.62));
    box-shadow:
        0 0 0 2px rgba(103, 232, 249, 0.055),
        0 0 16px rgba(103, 232, 249, 0.14),
        inset 0 1px 0 rgba(255, 255, 255, 0.06);
    text-shadow:
        0 0 8px rgba(103, 232, 249, 0.28),
        0 0 18px rgba(130, 173, 255, 0.12);
    -webkit-text-fill-color: rgba(169, 245, 255, 0.72);
}

html[data-theme="dark"] .auth-shell .code-moon-resend {
    color: rgba(201, 249, 255, 0.72);
    border-color: rgba(146, 167, 205, 0.18);
    border-left-color: transparent;
    background:
        linear-gradient(135deg, rgba(28, 53, 70, 0.72), rgba(13, 24, 39, 0.68));
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.06),
        inset 0 0 18px rgba(103, 232, 249, 0.09);
    text-shadow: 0 0 8px rgba(103, 232, 249, 0.2);
}

html[data-theme="dark"] .auth-shell .code-moon-resend::before {
    background:
        linear-gradient(135deg, rgba(7, 13, 24, 0.96), rgba(10, 18, 32, 0.9));
    box-shadow:
        6px 0 12px rgba(103, 232, 249, 0.06),
        inset -1px 0 0 rgba(146, 167, 205, 0.08);
}

html[data-theme="dark"] .auth-shell .code-moon-resend.is-ready {
    color: rgba(220, 250, 255, 0.9);
    border-color: rgba(103, 232, 249, 0.24);
    border-left-color: transparent;
    background:
        linear-gradient(135deg, rgba(34, 78, 102, 0.78), rgba(15, 31, 50, 0.7));
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.08),
        inset 0 0 18px rgba(103, 232, 249, 0.12),
        0 0 14px rgba(103, 232, 249, 0.09);
}

@media (max-width: 420px) {
    .auth-shell .code-moon-control {
        grid-template-columns: minmax(0, 1fr) 62px;
    }

    .auth-shell .code-moon-resend {
        padding-right: 8px;
        padding-left: 16px;
        font-size: 10.5px;
    }
}

/* Final resend treatment: embed it into the code field, no halo or special button shape. */
.auth-shell .code-moon-control {
    position: relative;
    display: block;
}

.auth-shell .code-moon-control input {
    width: 100%;
    padding-right: 78px;
    border-radius: 8px;
}

.auth-shell .code-moon-resend {
    position: absolute;
    top: 1px;
    right: 1px;
    bottom: 1px;
    z-index: 2;
    width: 64px;
    min-height: 0;
    margin: 0;
    padding: 0 10px;
    border: 0;
    border-left: 1px solid rgba(80, 88, 99, 0.14);
    border-radius: 0 7px 7px 0;
    color: rgba(79, 95, 114, 0.72);
    background: rgba(255, 255, 255, 0.36);
    box-shadow: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    cursor: default;
    font-size: 11px;
    font-weight: 720;
    text-shadow: none;
    transition:
        color 150ms var(--motion-standard),
        background 150ms var(--motion-standard),
        border-color 150ms var(--motion-standard);
}

.auth-shell .code-moon-resend::before,
.auth-shell .code-moon-resend::after {
    content: none;
}

.auth-shell .code-moon-resend.is-ready {
    color: #0f7f8c;
    border-color: rgba(15, 127, 140, 0.16);
    background: rgba(15, 127, 140, 0.055);
    box-shadow: none;
    cursor: pointer;
}

.auth-shell .code-moon-resend.is-ready:hover {
    color: #0d6675;
    background: rgba(15, 127, 140, 0.09);
    box-shadow: none;
    transform: none;
}

.auth-shell .code-moon-resend:focus-visible {
    outline: 0;
    box-shadow: inset 0 0 0 2px rgba(15, 127, 140, 0.2);
}

html[data-theme="dark"] .auth-shell .code-moon-resend {
    color: rgba(174, 189, 210, 0.68);
    border-left-color: rgba(146, 167, 205, 0.14);
    background: rgba(7, 13, 24, 0.22);
    box-shadow: none;
    text-shadow: none;
}

html[data-theme="dark"] .auth-shell .code-moon-resend.is-ready {
    color: rgba(159, 193, 255, 0.9);
    border-left-color: rgba(130, 173, 255, 0.16);
    background: rgba(130, 173, 255, 0.06);
    box-shadow: none;
}

html[data-theme="dark"] .auth-shell .code-moon-resend.is-ready:hover {
    color: rgba(220, 234, 255, 0.95);
    background: rgba(130, 173, 255, 0.1);
    box-shadow: none;
}

html[data-theme="dark"] .auth-shell .code-moon-resend:focus-visible {
    box-shadow: inset 0 0 0 2px rgba(130, 173, 255, 0.24);
}

@media (max-width: 420px) {
    .auth-shell .code-moon-control input {
        padding-right: 70px;
    }

    .auth-shell .code-moon-resend {
        width: 58px;
        padding: 0 8px;
        font-size: 10.5px;
    }
}

/* Resend control: flipped half-ellipse echo of the QQ AUTH mark. */
.auth-shell .code-moon-control input {
    padding-right: 86px;
}

.auth-shell .code-moon-resend {
    top: 4px;
    right: 4px;
    bottom: 4px;
    width: 74px;
    padding: 0 13px 0 24px;
    overflow: hidden;
    border: 0;
    border-radius: 999px 999px 999px 999px / 999px 999px 999px 999px;
    color: #2f6e78;
    background:
        linear-gradient(135deg, rgba(224, 242, 246, 0.98), rgba(205, 229, 235, 0.9));
    box-shadow: none;
    font-size: 11px;
    font-weight: 820;
    line-height: 1;
    isolation: isolate;
}

.auth-shell .code-moon-resend::before {
    content: "";
    position: absolute;
    z-index: 0;
    top: 50%;
    left: -23px;
    width: 42px;
    height: 42px;
    border-radius: 999px;
    background: #ffffff;
    box-shadow:
        1px 0 0 rgba(80, 88, 99, 0.07),
        7px 0 12px rgba(45, 91, 105, 0.055);
    transform: translateY(-50%);
}

.auth-shell .code-moon-resend::after {
    content: "";
    position: absolute;
    z-index: 0;
    inset: 0;
    border-radius: inherit;
    background:
        radial-gradient(circle at 72% 24%, rgba(255, 255, 255, 0.48), transparent 34%),
        linear-gradient(90deg, rgba(255, 255, 255, 0.1), transparent 58%);
    pointer-events: none;
}

.auth-shell .code-moon-label {
    position: relative;
    z-index: 1;
}

.auth-shell .code-moon-resend:disabled {
    color: rgba(47, 110, 120, 0.68);
    background:
        linear-gradient(135deg, rgba(224, 242, 246, 0.82), rgba(205, 229, 235, 0.72));
    cursor: default;
}

.auth-shell .code-moon-resend.is-ready {
    color: #174f58;
    background:
        linear-gradient(135deg, rgba(208, 238, 243, 0.98), rgba(179, 217, 224, 0.92));
    box-shadow: none;
    cursor: pointer;
}

.auth-shell .code-moon-resend.is-ready:hover {
    color: #103f47;
    background:
        linear-gradient(135deg, rgba(194, 232, 238, 1), rgba(161, 205, 214, 0.96));
    box-shadow: none;
    transform: none;
}

.auth-shell .code-moon-resend:focus-visible {
    outline: 0;
    box-shadow: 0 0 0 2px rgba(47, 110, 120, 0.18);
}

html[data-theme="dark"] .auth-shell .code-moon-resend {
    color: rgba(190, 207, 221, 0.82);
    background:
        linear-gradient(135deg, rgba(36, 51, 70, 0.96), rgba(25, 40, 56, 0.92));
    box-shadow: none;
    text-shadow: none;
}

html[data-theme="dark"] .auth-shell .code-moon-resend::before {
    background: rgb(7, 13, 24);
    box-shadow:
        1px 0 0 rgba(146, 167, 205, 0.1),
        7px 0 12px rgba(1, 6, 18, 0.08);
}

html[data-theme="dark"] .auth-shell .code-moon-resend::after {
    background:
        radial-gradient(circle at 72% 24%, rgba(255, 255, 255, 0.08), transparent 34%),
        linear-gradient(90deg, rgba(255, 255, 255, 0.035), transparent 58%);
}

html[data-theme="dark"] .auth-shell .code-moon-resend:disabled {
    color: rgba(190, 207, 221, 0.64);
    background:
        linear-gradient(135deg, rgba(36, 51, 70, 0.8), rgba(25, 40, 56, 0.76));
    box-shadow: none;
}

html[data-theme="dark"] .auth-shell .code-moon-resend.is-ready {
    color: rgba(227, 239, 248, 0.95);
    background:
        linear-gradient(135deg, rgba(50, 72, 96, 0.98), rgba(35, 62, 78, 0.94));
    box-shadow: none;
}

html[data-theme="dark"] .auth-shell .code-moon-resend.is-ready:hover {
    background:
        linear-gradient(135deg, rgba(58, 82, 108, 1), rgba(41, 72, 90, 0.98));
    box-shadow: none;
}

html[data-theme="dark"] .auth-shell .code-moon-resend:focus-visible {
    box-shadow: 0 0 0 2px rgba(146, 167, 205, 0.18);
}

html[data-theme="dark"] .auth-shell .code-moon-resend.is-loading .code-moon-label::before,
html[data-theme="dark"] .auth-shell .code-moon-resend.is-assembling .code-moon-label::before,
html[data-theme="dark"] .auth-shell .code-moon-resend.is-orbiting .code-moon-label::before {
    border-color: rgba(190, 207, 221, 0.22);
    border-top-color: rgba(227, 239, 248, 0.82);
}

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

@media (max-width: 420px) {
    .auth-shell .code-moon-control input {
        padding-right: 78px;
    }

    .auth-shell .code-moon-resend {
        width: 66px;
        padding-right: 11px;
        padding-left: 22px;
        font-size: 10.5px;
    }

    .auth-shell .code-moon-resend::before {
        left: -22px;
        width: 40px;
        height: 40px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .auth-shell .code-moon-resend.is-loading .code-moon-label::before,
    .auth-shell .code-moon-resend.is-assembling .code-moon-label::before,
    .auth-shell .code-moon-resend.is-orbiting .code-moon-label::before {
        animation: none;
    }
}

/* Fangxing naming: broken fragments gather into the point-line field before the first name is set. */
.auth-break-layer {
    position: absolute;
    inset: 0;
    z-index: 2;
    overflow: hidden;
    border-radius: inherit;
    pointer-events: none;
    mix-blend-mode: multiply;
    contain: paint;
    isolation: isolate;
}

.auth-card .auth-break-layer {
    z-index: 3;
    opacity: 0.92;
    mix-blend-mode: multiply;
}

.auth-card > :not(.auth-card-field):not(.auth-break-layer) {
    position: relative;
    z-index: 2;
}

.auth-break-layer::before,
.auth-break-layer::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.auth-break-layer::before {
    opacity: 0.64;
    background:
        linear-gradient(112deg, transparent 0 18%, rgba(0, 120, 212, 0.26) 18.2% 18.7%, transparent 19% 100%),
        linear-gradient(38deg, transparent 0 34%, rgba(0, 120, 212, 0.18) 34.1% 34.6%, transparent 35% 100%),
        linear-gradient(151deg, transparent 0 62%, rgba(21, 154, 168, 0.18) 62.2% 62.8%, transparent 63% 100%),
        linear-gradient(77deg, transparent 0 76%, rgba(0, 120, 212, 0.16) 76.1% 76.6%, transparent 77% 100%);
    filter: drop-shadow(0 0 8px rgba(0, 120, 212, 0.1));
}

.card-break::before {
    opacity: 1;
    background:
        linear-gradient(114deg, transparent 0 14%, rgba(0, 91, 164, 0.34) 14.2% 16.2%, rgba(255, 255, 255, 0.42) 16.25% 16.7%, transparent 17.2% 100%),
        linear-gradient(34deg, transparent 0 26%, rgba(0, 122, 142, 0.28) 26.2% 28.4%, rgba(255, 255, 255, 0.38) 28.45% 28.9%, transparent 29.4% 100%),
        linear-gradient(151deg, transparent 0 52%, rgba(0, 91, 164, 0.3) 52.2% 54.5%, rgba(255, 255, 255, 0.34) 54.55% 55%, transparent 55.5% 100%),
        linear-gradient(76deg, transparent 0 70%, rgba(0, 91, 164, 0.26) 70.2% 72.4%, rgba(255, 255, 255, 0.32) 72.45% 72.85%, transparent 73.3% 100%),
        linear-gradient(123deg, transparent 0 81%, rgba(0, 122, 142, 0.22) 81.2% 83.3%, transparent 84% 100%);
}

.auth-break-layer::after {
    opacity: 0.38;
    background:
        radial-gradient(circle at 28% 38%, rgba(0, 120, 212, 0.34) 0 2px, transparent 3px),
        radial-gradient(circle at 43% 22%, rgba(21, 154, 168, 0.28) 0 1.5px, transparent 2.5px),
        radial-gradient(circle at 62% 48%, rgba(0, 120, 212, 0.26) 0 2px, transparent 3px),
        radial-gradient(circle at 72% 72%, rgba(21, 154, 168, 0.24) 0 1.5px, transparent 2.5px),
        linear-gradient(122deg, transparent 0 44%, rgba(0, 120, 212, 0.2) 44.2% 44.5%, transparent 45% 100%);
}

.card-break::after {
    opacity: 0.74;
    background:
        linear-gradient(145deg, transparent 0 18%, rgba(150, 215, 236, 0.22) 18.2% 31%, transparent 31.2% 100%),
        linear-gradient(25deg, transparent 0 52%, rgba(197, 231, 241, 0.28) 52.2% 63%, transparent 63.2% 100%),
        radial-gradient(circle at 15% 24%, rgba(0, 120, 212, 0.42) 0 2px, transparent 3px),
        radial-gradient(circle at 32% 52%, rgba(21, 154, 168, 0.36) 0 1.5px, transparent 2.5px),
        radial-gradient(circle at 58% 38%, rgba(0, 120, 212, 0.34) 0 2px, transparent 3px),
        radial-gradient(circle at 82% 68%, rgba(21, 154, 168, 0.3) 0 1.5px, transparent 2.5px),
        linear-gradient(33deg, transparent 0 42%, rgba(0, 120, 212, 0.22) 42.15% 42.5%, transparent 42.9% 100%);
}

.break-piece {
    position: absolute;
    width: var(--piece-w, 132px);
    height: var(--piece-h, 82px);
    border: 1px solid rgba(0, 120, 212, 0.18);
    background:
        linear-gradient(135deg, rgba(255, 255, 255, 0.72), rgba(205, 232, 242, 0.32)),
        rgba(255, 255, 255, 0.34);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.56),
        0 10px 24px rgba(0, 80, 128, 0.08);
    opacity: 0.56;
    clip-path: polygon(var(--clip));
    transform: translate3d(var(--piece-x, 0), var(--piece-y, 0), 0) rotate(var(--piece-r, 0deg));
    animation: auth-piece-float var(--piece-speed, 6200ms) ease-in-out infinite;
}

.visual-break .piece-a {
    --clip: 0 0, 84% 8%, 100% 54%, 26% 100%, 0 72%;
    --piece-w: 168px;
    --piece-h: 116px;
    --piece-x: -12px;
    --piece-y: 118px;
    --piece-r: -7deg;
    left: 10%;
    top: 18%;
}

.visual-break .piece-b {
    --clip: 14% 0, 100% 0, 82% 74%, 8% 100%, 0 26%;
    --piece-w: 144px;
    --piece-h: 104px;
    --piece-x: 18px;
    --piece-y: -8px;
    --piece-r: 9deg;
    --piece-speed: 7600ms;
    right: 7%;
    top: 20%;
}

.visual-break .piece-c {
    --clip: 0 24%, 52% 0, 100% 36%, 72% 100%, 12% 82%;
    --piece-w: 116px;
    --piece-h: 96px;
    --piece-x: 34px;
    --piece-y: 18px;
    --piece-r: -12deg;
    --piece-speed: 6900ms;
    left: 42%;
    top: 48%;
}

.visual-break .piece-d {
    --clip: 8% 0, 100% 22%, 86% 100%, 0 76%;
    --piece-w: 128px;
    --piece-h: 76px;
    --piece-x: -18px;
    --piece-y: 26px;
    --piece-r: 13deg;
    --piece-speed: 8100ms;
    left: 18%;
    bottom: 10%;
}

.visual-break .piece-e {
    --clip: 0 12%, 72% 0, 100% 82%, 24% 100%;
    --piece-w: 92px;
    --piece-h: 64px;
    --piece-x: 26px;
    --piece-y: -20px;
    --piece-r: -18deg;
    --piece-speed: 7100ms;
    right: 12%;
    bottom: 16%;
}

.card-break .break-piece {
    opacity: 0.72;
    background:
        linear-gradient(135deg, rgba(255, 255, 255, 0.4), rgba(128, 205, 232, 0.24)),
        rgba(197, 231, 241, 0.18);
    border-color: rgba(0, 91, 164, 0.32);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.58),
        0 8px 18px rgba(0, 80, 128, 0.1);
}

.card-break .break-crack {
    height: 2px;
    opacity: 1;
    background: linear-gradient(90deg, transparent, rgba(0, 91, 164, 0.86), rgba(0, 122, 142, 0.62), transparent);
    box-shadow:
        0 0 8px rgba(0, 120, 212, 0.18),
        0 0 18px rgba(21, 154, 168, 0.08);
}

.card-break .piece-a {
    --clip: 0 0, 72% 0, 100% 52%, 14% 100%;
    --piece-w: 158px;
    --piece-h: 92px;
    --piece-x: -14px;
    --piece-y: -10px;
    --piece-r: -6deg;
    left: 4%;
    top: 6%;
}

.card-break .piece-b {
    --clip: 24% 0, 100% 14%, 82% 100%, 0 64%;
    --piece-w: 138px;
    --piece-h: 102px;
    --piece-x: 18px;
    --piece-y: 4px;
    --piece-r: 8deg;
    --piece-speed: 7200ms;
    right: 4%;
    top: 16%;
}

.card-break .piece-c {
    --clip: 0 18%, 56% 0, 100% 42%, 72% 100%, 16% 82%;
    --piece-w: 128px;
    --piece-h: 86px;
    --piece-x: 12px;
    --piece-y: 28px;
    --piece-r: -14deg;
    --piece-speed: 6700ms;
    left: 34%;
    top: 45%;
}

.card-break .piece-d {
    --clip: 12% 0, 100% 28%, 86% 100%, 0 74%;
    --piece-w: 126px;
    --piece-h: 80px;
    --piece-x: -18px;
    --piece-y: 16px;
    --piece-r: 11deg;
    --piece-speed: 8300ms;
    left: 8%;
    bottom: 8%;
}

.card-break .piece-e {
    --clip: 0 8%, 82% 0, 100% 86%, 22% 100%;
    --piece-w: 116px;
    --piece-h: 74px;
    --piece-x: 22px;
    --piece-y: -14px;
    --piece-r: -16deg;
    --piece-speed: 7600ms;
    right: 9%;
    bottom: 10%;
}

.break-crack {
    position: absolute;
    height: 1px;
    transform-origin: left center;
    background: linear-gradient(90deg, transparent, rgba(0, 120, 212, 0.62), transparent);
    box-shadow: 0 0 10px rgba(0, 120, 212, 0.18);
    opacity: 0.72;
}

.break-crack::before,
.break-crack::after {
    content: "";
    position: absolute;
    left: 42%;
    width: 42px;
    height: 1px;
    background: inherit;
    transform-origin: left center;
}

.break-crack::before {
    transform: rotate(38deg);
}

.break-crack::after {
    transform: rotate(-44deg);
}

.crack-a {
    --crack-r: 14deg;
    left: 16%;
    top: 36%;
    width: 58%;
    transform: rotate(14deg);
}

.crack-b {
    --crack-r: -48deg;
    left: 24%;
    top: 63%;
    width: 48%;
    transform: rotate(-48deg);
}

.crack-c {
    --crack-r: 68deg;
    left: 46%;
    top: 22%;
    width: 36%;
    transform: rotate(68deg);
}

.auth-shell-naming .auth-break-layer {
    mix-blend-mode: normal;
}

.auth-shell-naming .break-piece {
    opacity: 0.48;
    animation: auth-piece-name-dissolve 4200ms cubic-bezier(0.16, 1, 0.3, 1) 800ms forwards;
}

.auth-fracture-active .break-piece {
    animation: auth-piece-name-dissolve 1800ms cubic-bezier(0.16, 1, 0.3, 1) forwards;
    will-change: transform, opacity;
}

.auth-fracture-active .card-break .break-piece,
.auth-shell-naming .card-break .break-piece {
    opacity: 0.24;
}

.auth-shell-naming .break-crack {
    animation: auth-crack-name-dissolve 3200ms ease-out 600ms forwards;
}

.auth-fracture-active .break-crack {
    animation: auth-crack-name-dissolve 1500ms ease-out forwards;
    will-change: opacity;
}

.auth-shell-naming .auth-break-layer .piece-d,
.auth-shell-naming .auth-break-layer .piece-e,
.auth-shell-naming .break-crack.crack-c,
.auth-shell-naming .shard-d,
.auth-shell-naming .shard-e,
.auth-shell-naming .dot-c {
    display: none;
}

.auth-shard {
    position: absolute;
    z-index: 2;
    left: 50%;
    top: 50%;
    width: var(--shard-width, 54px);
    height: var(--shard-height, 18px);
    border: 1px solid rgba(98, 212, 255, 0.28);
    background:
        linear-gradient(135deg, rgba(255, 255, 255, 0.18), rgba(98, 212, 255, 0.05)),
        rgba(12, 27, 45, 0.22);
    clip-path: polygon(0 14%, 82% 0, 100% 64%, 18% 100%);
    opacity: 0.5;
    pointer-events: none;
    transform-origin: calc(var(--orbit-radius, 132px) * -1) 50%;
    animation: auth-shard-orbit var(--orbit-speed, 7800ms) linear 1 both;
}

.auth-shard::after {
    content: "";
    position: absolute;
    inset: -1px;
    border-radius: inherit;
    background: radial-gradient(circle, rgba(98, 212, 255, 0.38), transparent 62%);
    display: none;
}

.shard-a {
    --orbit-radius: 104px;
    --orbit-speed: 7200ms;
    --shard-width: 44px;
    --shard-height: 16px;
    transform: rotate(12deg) translateX(104px);
}

.shard-b {
    --orbit-radius: 154px;
    --orbit-speed: 9200ms;
    --shard-width: 58px;
    --shard-height: 20px;
    animation-delay: -1400ms;
}

.shard-c {
    --orbit-radius: 198px;
    --orbit-speed: 11200ms;
    --shard-width: 36px;
    --shard-height: 14px;
    animation-delay: -3100ms;
}

.shard-d {
    --orbit-radius: 126px;
    --orbit-speed: 8400ms;
    --shard-width: 50px;
    --shard-height: 18px;
    animation-delay: -5200ms;
}

.shard-e {
    --orbit-radius: 226px;
    --orbit-speed: 12800ms;
    --shard-width: 66px;
    --shard-height: 22px;
    animation-delay: -7600ms;
}

.fangxing-name-card {
    min-height: 440px;
}

.fangxing-name-panel {
    position: relative;
    z-index: 1;
    display: grid;
    gap: 18px;
    padding-top: 8px;
}

.fangxing-title-wrap {
    position: relative;
    display: grid;
    place-items: center;
    min-height: 148px;
    padding: 18px 8px 8px;
    text-align: center;
    isolation: isolate;
}

.fangxing-title-glow {
    position: absolute;
    inset: auto;
    z-index: -1;
    width: 148px;
    height: 148px;
    border-radius: 999px;
    background:
        radial-gradient(circle, rgba(98, 212, 255, 0.18), rgba(91, 140, 255, 0.09) 42%, transparent 70%);
    animation: fangxing-glow-breathe 4200ms ease-in-out infinite;
}

.fangxing-title-wrap p {
    margin: 0 0 8px;
    color: rgba(157, 184, 214, 0.78);
    font-family: "Fangcun Space Grotesk", "Segoe UI", sans-serif;
    font-size: 12px;
    font-weight: 720;
    letter-spacing: 0.08em;
}

.fangxing-title-wrap h1 {
    display: block;
    max-width: 9em;
    margin: 0;
    color: #f8fbff;
    font-size: 34px;
    line-height: 1.18;
    font-weight: 860;
    letter-spacing: 0;
    text-wrap: balance;
}

.fangxing-title-wrap h1 span {
    display: inline-block;
    opacity: 0;
    transform: none;
    animation: fangxing-title-rise 720ms ease-out 90ms forwards;
}

.fangxing-name-form {
    gap: 14px;
}

.fangxing-name-form input {
    text-align: center;
    font-size: 20px;
    font-weight: 760;
    letter-spacing: 0;
}

.fangxing-logout-form {
    display: grid;
    place-items: center;
    margin: 0;
}

.fangxing-logout-form .text-link {
    border: 0;
    background: transparent;
    cursor: pointer;
    font: inherit;
}

.name-orbit-dot {
    position: absolute;
    z-index: 1;
    left: 50%;
    top: 50%;
    width: 6px;
    height: 6px;
    margin: -3px 0 0 -3px;
    border-radius: 999px;
    background: rgba(98, 212, 255, 0.9);
    box-shadow: 0 0 12px rgba(98, 212, 255, 0.34);
    pointer-events: none;
    animation: fangxing-dot-orbit var(--dot-speed, 5600ms) linear infinite;
    will-change: transform;
}

.dot-a {
    --dot-radius: 112px;
    --dot-speed: 5200ms;
}

.dot-b {
    --dot-radius: 148px;
    --dot-speed: 7400ms;
    animation-delay: -1900ms;
}

.dot-c {
    --dot-radius: 184px;
    --dot-speed: 9800ms;
    animation-delay: -4200ms;
}

html[data-theme="dark"] .auth-shard {
    border-color: rgba(98, 212, 255, 0.3);
    background:
        linear-gradient(135deg, rgba(98, 212, 255, 0.18), rgba(130, 173, 255, 0.06)),
        rgba(8, 16, 30, 0.42);
}

html:not([data-theme="dark"]) .auth-shell-naming .fangxing-title-wrap h1 {
    color: #20313f;
}

html:not([data-theme="dark"]) .auth-shell-naming .fangxing-title-wrap p {
    color: #536a7c;
}

html:not([data-theme="dark"]) .auth-shell-naming .fangxing-title-glow {
    background:
        radial-gradient(circle, rgba(0, 120, 212, 0.18), rgba(21, 154, 168, 0.08) 42%, transparent 70%);
}

@keyframes auth-shard-orbit {
    0% {
        opacity: 0.18;
        transform: rotate(0deg) translateX(var(--orbit-radius)) rotate(12deg) scale(0.92);
    }

    42% {
        opacity: 0.66;
    }

    72% {
        opacity: 0.24;
    }

    100% {
        opacity: 0;
        transform: rotate(360deg) translateX(var(--orbit-radius)) rotate(-28deg) scale(0.78);
    }
}

@keyframes auth-piece-name-dissolve {
    0% {
        opacity: 0.48;
        transform: translate3d(var(--piece-x), var(--piece-y), 0) rotate(var(--piece-r)) scale(1);
    }

    58% {
        opacity: 0.3;
        transform: rotate(145deg) translateX(34px) rotate(calc(var(--piece-r) - 145deg)) scale(0.88);
    }

    100% {
        opacity: 0;
        transform: rotate(250deg) translateX(58px) rotate(calc(var(--piece-r) - 250deg)) scale(0.68);
    }
}

@keyframes auth-crack-name-dissolve {
    0%,
    36% {
        opacity: 0.68;
    }

    100% {
        opacity: 0;
    }
}

@keyframes auth-shard-dissolve {
    0%,
    54% {
        opacity: 0;
        transform: scale(0.6);
    }

    72% {
        opacity: 0.75;
        transform: scale(1.14);
    }

    100% {
        opacity: 0;
        transform: scale(1.5);
    }
}

@keyframes auth-piece-float {
    0%,
    100% {
        transform: translate3d(var(--piece-x), var(--piece-y), 0) rotate(var(--piece-r)) scale(1);
    }

    45% {
        transform: translate3d(6px, -8px, 0) rotate(var(--piece-r)) scale(1.025);
    }
}

@keyframes auth-piece-orbit {
    0% {
        transform: rotate(0deg) translateX(26px) rotate(var(--piece-r)) scale(0.98);
    }

    100% {
        transform: rotate(360deg) translateX(26px) rotate(calc(var(--piece-r) - 360deg)) scale(0.86);
    }
}

@keyframes auth-piece-dissolve {
    0%,
    48% {
        opacity: 0.48;
    }

    72% {
        opacity: 0.14;
    }

    100% {
        opacity: 0.42;
    }
}

@keyframes auth-crack-dissolve {
    0%,
    40% {
        opacity: 0.72;
    }

    74% {
        opacity: 0.12;
    }

    100% {
        opacity: 0.62;
    }
}

@keyframes fangxing-title-rise {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes fangxing-glow-breathe {
    0%,
    100% {
        opacity: 0.52;
        transform: scale(0.88);
    }

    50% {
        opacity: 0.95;
        transform: scale(1.08);
    }
}

@keyframes fangxing-dot-orbit {
    to {
        transform: rotate(360deg) translateX(var(--dot-radius)) rotate(-360deg);
    }
}

/* Slow success transition: authenticated modules fracture, orbit, dissolve, then rebuild on naming. */
.auth-disassembling .auth-visual,
.auth-disassembling .auth-card,
.auth-reassembling .auth-visual,
.auth-reassembling .auth-card {
    overflow: hidden;
    contain: paint;
}

.auth-disassembling .auth-card,
.auth-reassembling .auth-card {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}

.auth-disassembling .auth-visual,
.auth-disassembling .auth-card {
    animation: auth-panel-shell-dissolve 1100ms cubic-bezier(0.52, 0, 0.18, 1) forwards;
}

.fangxing-entry-veil {
    position: fixed;
    inset: 0;
    z-index: 1;
    overflow: hidden;
    pointer-events: none;
    opacity: 0;
    background: #05070b;
    animation: fangxing-entry-veil-darken 1100ms cubic-bezier(0.52, 0, 0.18, 1) forwards;
}

.fangxing-entry-veil::before {
    content: "";
    position: absolute;
    inset: 0;
    opacity: 0;
    background:
        linear-gradient(90deg, transparent 49.92%, rgba(101, 224, 178, 0.32) 50%, transparent 50.08%),
        linear-gradient(180deg, transparent 49.92%, rgba(104, 204, 245, 0.28) 50%, transparent 50.08%);
    animation: fangxing-entry-veil-axis 1100ms ease-in-out forwards;
}

.auth-disassembling .auth-bg-wave {
    animation: auth-bg-to-network 1250ms cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.auth-disassembling .auth-particle-field,
.auth-disassembling .auth-card-field {
    animation: auth-network-brighten 1250ms cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.auth-disassembling .auth-visual-mark,
.auth-disassembling .auth-daily-quote,
.auth-disassembling .auth-visual-copy,
.auth-disassembling .auth-visual-map,
.auth-disassembling .auth-visual-stack,
.auth-disassembling .auth-card-top,
.auth-disassembling .auth-panels,
.auth-disassembling .auth-card > .flash {
    pointer-events: none;
    animation: auth-module-break-away 1120ms cubic-bezier(0.18, 0.82, 0.22, 1) forwards;
    backface-visibility: hidden;
    will-change: transform, opacity;
}

.auth-disassembling .auth-daily-quote,
.auth-disassembling .auth-card-top {
    --break-x: 26px;
    --break-y: -22px;
    --break-r: 4deg;
    animation-delay: 60ms;
}

.auth-disassembling .auth-visual-copy,
.auth-disassembling .auth-panels {
    --break-x: -24px;
    --break-y: 28px;
    --break-r: -5deg;
    animation-delay: 110ms;
}

.auth-disassembling .auth-visual-map {
    --break-x: 10px;
    --break-y: -8px;
    --break-r: 12deg;
    animation-delay: 150ms;
}

.auth-disassembling .auth-visual-stack {
    --break-x: 34px;
    --break-y: 20px;
    --break-r: 8deg;
    animation-delay: 180ms;
}

.auth-disassembling .auth-visual-mark {
    --break-x: -20px;
    --break-y: -18px;
    --break-r: -8deg;
}

.auth-disassembling .auth-transition-break-layer {
    opacity: 1;
    mix-blend-mode: normal;
    animation: auth-break-layer-fade 1250ms cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.auth-disassembling .auth-transition-break-layer .break-piece {
    opacity: 0;
    box-shadow: none;
    animation: auth-piece-wide-orbit 1250ms cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
    will-change: transform, opacity;
}

.auth-disassembling .auth-transition-break-layer .break-crack {
    opacity: 0;
    box-shadow: none;
    animation: auth-crack-grow-dissolve 1250ms cubic-bezier(0.16, 1, 0.3, 1) forwards;
    will-change: transform, opacity;
}

.auth-reassembling .auth-visual,
.auth-reassembling .auth-card {
    animation: auth-module-rebuild-shell 1000ms cubic-bezier(0.16, 1, 0.3, 1) both;
    backface-visibility: hidden;
    will-change: transform, opacity;
}

.auth-reassembling .auth-visual-mark,
.auth-reassembling .auth-daily-quote,
.auth-reassembling .auth-visual-copy,
.auth-reassembling .auth-visual-map,
.auth-reassembling .auth-visual-stack,
.auth-reassembling .auth-card-top,
.auth-reassembling .fangxing-name-panel {
    animation: auth-module-rebuild-content 900ms cubic-bezier(0.16, 1, 0.3, 1) both;
    backface-visibility: hidden;
    will-change: transform, opacity;
}

.auth-reassembling .auth-card-top {
    animation-delay: 70ms;
}

.auth-reassembling .fangxing-name-panel {
    animation-delay: 90ms;
}

.auth-reassembling .auth-break-layer .break-piece {
    box-shadow: none;
    animation: auth-piece-settle 1000ms cubic-bezier(0.16, 1, 0.3, 1) both;
    will-change: transform, opacity;
}

.auth-reassembling .auth-break-layer .break-crack {
    box-shadow: none;
    animation: auth-crack-settle 1000ms cubic-bezier(0.16, 1, 0.3, 1) both;
    will-change: transform, opacity;
}

@keyframes auth-bg-to-network {
    0% {
        opacity: 0.52;
    }

    58% {
        opacity: 0.72;
    }

    100% {
        opacity: 0.28;
    }
}

@keyframes auth-panel-shell-dissolve {
    0%, 30% { opacity: 1; }
    68% { opacity: 0.72; }
    100% { opacity: 0; }
}

@keyframes fangxing-entry-veil-darken {
    0% { opacity: 0; }
    28% { opacity: 0.18; }
    72% { opacity: 0.78; }
    100% { opacity: 1; }
}

@keyframes fangxing-entry-veil-axis {
    0%, 18% { opacity: 0; transform: scale(0.18); }
    52% { opacity: 0.64; transform: scale(0.72); }
    100% { opacity: 0; transform: scale(1); }
}

@keyframes auth-network-brighten {
    0% {
        opacity: 0.46;
    }

    52% {
        opacity: 0.82;
    }

    100% {
        opacity: 0.62;
    }
}

@keyframes auth-module-break-away {
    0% {
        opacity: 1;
        transform: translate3d(0, 0, 0) rotate(0deg) scale(1);
    }

    36% {
        opacity: 0.96;
        transform: translate3d(var(--break-x, 18px), var(--break-y, -16px), 0) rotate(var(--break-r, 6deg)) scale(0.992);
    }

    70% {
        opacity: 0.46;
        transform: translate3d(calc(var(--break-x, 18px) * 1.8), calc(var(--break-y, -16px) * 1.7), 0) rotate(calc(var(--break-r, 6deg) * 2)) scale(0.94);
    }

    100% {
        opacity: 0;
        transform: translate3d(calc(var(--break-x, 18px) * 2.4), calc(var(--break-y, -16px) * 2.2), 0) rotate(calc(var(--break-r, 6deg) * 3)) scale(0.86);
    }
}

@keyframes auth-break-layer-fade {
    0% {
        opacity: 0;
    }

    22% {
        opacity: 1;
    }

    78% {
        opacity: 0.8;
    }

    100% {
        opacity: 0;
    }
}

@keyframes auth-piece-wide-orbit {
    0% {
        opacity: 0;
        transform: translate3d(var(--piece-x), var(--piece-y), 0) rotate(var(--piece-r)) scale(0.96);
    }

    22% {
        opacity: 0.72;
    }

    54% {
        opacity: 0.58;
        transform: rotate(118deg) translateX(38px) rotate(calc(var(--piece-r) - 118deg)) scale(0.94);
    }

    100% {
        transform: rotate(245deg) translateX(82px) rotate(calc(var(--piece-r) - 245deg)) scale(0.62);
        opacity: 0;
    }
}

@keyframes auth-crack-grow-dissolve {
    0% {
        opacity: 0;
        transform: scaleX(0.2) rotate(var(--crack-r, 0deg));
    }

    32% {
        opacity: 0.92;
        transform: scaleX(1) rotate(var(--crack-r, 0deg));
    }

    100% {
        opacity: 0;
        transform: scaleX(1.18) rotate(var(--crack-r, 0deg));
    }
}

@keyframes auth-module-rebuild-shell {
    0% {
        opacity: 0;
        transform: scale(0.94) rotate(-1.8deg);
    }

    64% {
        opacity: 1;
        transform: scale(1.012) rotate(0.3deg);
    }

    100% {
        opacity: 1;
        transform: scale(1) rotate(0deg);
    }
}

@keyframes auth-module-rebuild-content {
    0% {
        opacity: 0;
        transform: translate3d(0, 24px, 0) scale(0.94);
    }

    100% {
        opacity: 1;
        transform: translate3d(0, 0, 0) scale(1);
    }
}

@keyframes auth-piece-settle {
    0% {
        opacity: 0;
        transform: rotate(-160deg) translateX(92px) rotate(160deg) scale(0.56);
    }

    62% {
        opacity: 0.54;
    }

    100% {
        opacity: 0.48;
        transform: translate3d(var(--piece-x), var(--piece-y), 0) rotate(var(--piece-r)) scale(1);
    }
}

@keyframes auth-crack-settle {
    0% {
        opacity: 0;
        transform: scaleX(0.2) rotate(var(--crack-r, 0deg));
    }

    100% {
        opacity: 0.68;
        transform: scaleX(1) rotate(var(--crack-r, 0deg));
    }
}

@media (max-width: 760px) {
    .auth-break-layer {
        opacity: 0.82;
    }

    .visual-break .break-piece {
        opacity: 0.34;
    }

    .card-break .break-piece {
        opacity: 0.2;
    }

    .auth-shard {
        opacity: 0.26;
    }

    .auth-shell-naming .auth-break-layer .piece-c,
    .auth-shell-naming .shard-c,
    .auth-shell-naming .dot-b {
        display: none;
    }

    .fangxing-name-card {
        min-height: 390px;
    }

    .fangxing-title-wrap {
        min-height: 126px;
        padding-top: 10px;
    }

    .fangxing-title-wrap h1 {
        font-size: 28px;
        line-height: 1.22;
    }

    .name-orbit-dot {
        display: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    .break-piece,
    .auth-disassembling .auth-transition-break-layer .break-piece,
    .auth-reassembling .auth-break-layer .break-piece,
    .auth-shell-naming .break-piece,
    .auth-shell-naming .break-crack,
    .auth-disassembling .auth-transition-break-layer .break-crack,
    .auth-reassembling .auth-break-layer .break-crack,
    .auth-disassembling .auth-visual-mark,
    .auth-disassembling .auth-daily-quote,
    .auth-disassembling .auth-visual-copy,
    .auth-disassembling .auth-visual-map,
    .auth-disassembling .auth-visual-stack,
    .auth-disassembling .auth-card-top,
    .auth-disassembling .auth-panels,
    .auth-reassembling .auth-visual,
    .auth-reassembling .auth-card,
    .auth-reassembling .auth-card-top,
    .auth-reassembling .fangxing-name-panel {
        animation: none;
    }

    .auth-shard,
    .auth-shard::after,
    .fangxing-title-glow,
    .fangxing-title-wrap h1 span,
    .name-orbit-dot {
        animation: none;
    }

    .auth-shard {
        opacity: 0.18;
    }

    .fangxing-title-wrap h1 span {
        opacity: 1;
        filter: none;
        transform: none;
    }
}

/* Native navigation fallback: preserve a visible module fracture before naming appears. */
.fangxing-route-transition {
    position: fixed;
    inset: 0;
    z-index: 18;
    overflow: hidden;
    pointer-events: none;
    isolation: isolate;
}

.fangxing-route-transition::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -2;
    background: #080b10;
}

.fangxing-route-source {
    position: absolute;
    inset: clamp(64px, 8vh, 104px) clamp(28px, 6vw, 92px);
    display: grid;
    grid-template-columns: minmax(0, 1.08fr) minmax(320px, 0.92fr);
    gap: clamp(14px, 2vw, 28px);
}

.fangxing-route-module {
    position: relative;
    min-width: 0;
    overflow: hidden;
    border: 1px solid rgba(143, 229, 231, 0.24);
    background: #0b1218;
    transform: translate3d(0, 0, 0);
}

.route-module-visual {
    background: #09151a;
}

.route-module-form {
    background: #10151b;
}

.route-source-mark,
.route-source-word,
.route-source-line,
.route-source-map,
.route-source-brand,
.route-source-tab,
.route-source-input,
.route-source-submit {
    position: absolute;
    display: block;
    transform: translate3d(0, 0, 0);
}

.route-source-mark {
    top: 9%;
    left: 8%;
    display: grid;
    width: 52px;
    height: 52px;
    place-items: center;
    border: 1px solid rgba(143, 229, 231, 0.5);
    border-radius: 8px;
    color: #071012;
    background: #8fe5e7;
    font-size: 23px;
    font-weight: 780;
}

.route-source-word {
    top: calc(9% + 4px);
    left: calc(8% + 70px);
    width: 142px;
    height: 13px;
    background: rgba(230, 241, 241, 0.86);
}

.route-source-line {
    left: calc(8% + 70px);
    height: 4px;
    background: rgba(143, 165, 170, 0.54);
}

.route-line-short {
    top: calc(9% + 28px);
    width: 88px;
}

.route-line-long {
    bottom: 14%;
    left: 8%;
    width: min(360px, 54%);
}

.route-source-map {
    top: 36%;
    left: 50%;
    width: min(300px, 42%);
    aspect-ratio: 1;
    border: 1px solid rgba(143, 229, 231, 0.26);
    border-radius: 50%;
    transform: translateX(-50%) rotate(16deg);
}

.route-source-map::before,
.route-source-map::after {
    content: "";
    position: absolute;
    inset: 16% -28%;
    border: 1px solid rgba(143, 229, 231, 0.2);
    border-radius: 50%;
}

.route-source-map::after {
    inset: -18% 22%;
    transform: rotate(38deg);
}

.route-source-brand {
    top: 12%;
    left: 12%;
    width: 38%;
    height: 12px;
    background: rgba(230, 241, 241, 0.84);
}

.route-source-tab {
    top: 24%;
    left: 12%;
    width: 76%;
    height: 2px;
    background: rgba(143, 229, 231, 0.38);
}

.route-source-input {
    right: 12%;
    left: 12%;
    height: 56px;
    border-bottom: 1px solid rgba(143, 229, 231, 0.34);
}

.route-input-a {
    top: 37%;
}

.route-input-b {
    top: 53%;
}

.route-source-submit {
    right: 12%;
    bottom: 17%;
    width: 48%;
    height: 44px;
    background: #8fe5e7;
}

.fangxing-route-fragment {
    --fragment-from-x: 0px;
    --fragment-from-y: 0px;
    --fragment-to-x: 0px;
    --fragment-to-y: 0px;
    --fragment-rotate: 90deg;
    --fragment-delay: 0ms;
    position: absolute;
    z-index: 2;
    top: 50%;
    left: 50%;
    width: 22px;
    height: 22px;
    opacity: 0;
    border: 1px solid rgba(143, 229, 231, 0.58);
    background: rgba(143, 229, 231, 0.12);
}

.fragment-1 { --fragment-from-x: -38vw; --fragment-from-y: -24vh; --fragment-to-x: -12vw; --fragment-to-y: -5vh; --fragment-rotate: 130deg; --fragment-delay: 20ms; width: 42px; }
.fragment-2 { --fragment-from-x: -24vw; --fragment-from-y: 18vh; --fragment-to-x: 18vw; --fragment-to-y: -13vh; --fragment-rotate: -150deg; --fragment-delay: 80ms; height: 34px; }
.fragment-3 { --fragment-from-x: -9vw; --fragment-from-y: -31vh; --fragment-to-x: 31vw; --fragment-to-y: 8vh; --fragment-rotate: 190deg; --fragment-delay: 140ms; width: 14px; height: 48px; }
.fragment-4 { --fragment-from-x: 28vw; --fragment-from-y: -22vh; --fragment-to-x: -22vw; --fragment-to-y: 14vh; --fragment-rotate: -120deg; --fragment-delay: 50ms; width: 50px; height: 15px; }
.fragment-5 { --fragment-from-x: 34vw; --fragment-from-y: 8vh; --fragment-to-x: 8vw; --fragment-to-y: -24vh; --fragment-rotate: 160deg; --fragment-delay: 170ms; }
.fragment-6 { --fragment-from-x: 18vw; --fragment-from-y: 28vh; --fragment-to-x: -28vw; --fragment-to-y: -4vh; --fragment-rotate: -200deg; --fragment-delay: 110ms; width: 36px; height: 12px; }
.fragment-7 { --fragment-from-x: -31vw; --fragment-from-y: 3vh; --fragment-to-x: 23vw; --fragment-to-y: 24vh; --fragment-rotate: 110deg; --fragment-delay: 210ms; width: 12px; height: 38px; }
.fragment-8 { --fragment-from-x: 7vw; --fragment-from-y: 9vh; --fragment-to-x: -35vw; --fragment-to-y: -18vh; --fragment-rotate: -175deg; --fragment-delay: 90ms; }
.fragment-9 { --fragment-from-x: 39vw; --fragment-from-y: -3vh; --fragment-to-x: -5vw; --fragment-to-y: 29vh; --fragment-rotate: 210deg; --fragment-delay: 240ms; width: 46px; height: 10px; }
.fragment-10 { --fragment-from-x: -17vw; --fragment-from-y: -8vh; --fragment-to-x: 36vw; --fragment-to-y: -27vh; --fragment-rotate: -135deg; --fragment-delay: 180ms; }
.fragment-11 { --fragment-from-x: 26vw; --fragment-from-y: 16vh; --fragment-to-x: -16vw; --fragment-to-y: 27vh; --fragment-rotate: 155deg; --fragment-delay: 260ms; width: 13px; height: 44px; }
.fragment-12 { --fragment-from-x: -35vw; --fragment-from-y: 27vh; --fragment-to-x: 29vw; --fragment-to-y: 2vh; --fragment-rotate: -220deg; --fragment-delay: 220ms; width: 40px; height: 13px; }

.fangxing-route-axis {
    position: absolute;
    z-index: 1;
    top: 50%;
    left: 50%;
    opacity: 0;
    background: rgba(143, 229, 231, 0.3);
    transform: translate(-50%, -50%) scale(0.1);
}

.route-axis-horizontal {
    width: min(900px, 78vw);
    height: 1px;
}

.route-axis-vertical {
    width: 1px;
    height: min(680px, 72vh);
}

.fangxing-entry-pending .fangxing-name-panel,
.fangxing-entry-pending .auth-card-top,
.fangxing-entry-pending .auth-daily-quote {
    opacity: 0;
    pointer-events: none;
}

.fangxing-entry-pending .fangxing-title-wrap h1 span {
    animation-play-state: paused;
}

.fangxing-entry-fracturing .fangxing-route-transition::before {
    animation: fangxing-route-backdrop 1780ms cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

html:not([data-theme="dark"]) .fangxing-route-transition::before {
    background: #f4f8fa;
}

html:not([data-theme="dark"]) .fangxing-route-module {
    border-color: rgba(42, 154, 171, 0.24);
    background: rgba(240, 247, 249, 0.96);
}

html:not([data-theme="dark"]) .route-module-visual {
    background: rgba(232, 245, 247, 0.98);
}

html:not([data-theme="dark"]) .route-source-word,
html:not([data-theme="dark"]) .route-source-brand {
    background: rgba(28, 56, 67, 0.78);
}

html:not([data-theme="dark"]) .fangxing-entry-fracturing .fangxing-route-transition::before {
    animation-name: fangxing-route-backdrop-light;
}

.fangxing-entry-fracturing .route-module-visual {
    animation: fangxing-route-module-left 1680ms cubic-bezier(0.2, 0.82, 0.22, 1) forwards;
}

.fangxing-entry-fracturing .route-module-form {
    animation: fangxing-route-module-right 1680ms cubic-bezier(0.2, 0.82, 0.22, 1) 70ms forwards;
}

.fangxing-entry-fracturing .fangxing-route-module > span {
    animation: fangxing-route-control-break 1280ms cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.fangxing-entry-fracturing .fangxing-route-module > span:nth-child(2n) {
    --control-x: 30px;
    --control-y: -22px;
    --control-r: 7deg;
    animation-delay: 90ms;
}

.fangxing-entry-fracturing .fangxing-route-module > span:nth-child(2n + 1) {
    --control-x: -26px;
    --control-y: 24px;
    --control-r: -6deg;
    animation-delay: 150ms;
}

.fangxing-entry-fracturing .fangxing-route-fragment {
    animation: fangxing-route-fragment-flight 1550ms cubic-bezier(0.2, 0.8, 0.2, 1) var(--fragment-delay) forwards;
}

.fangxing-entry-fracturing .fangxing-route-axis {
    animation: fangxing-route-axis-open 1500ms cubic-bezier(0.16, 1, 0.3, 1) 280ms forwards;
}

@keyframes fangxing-route-backdrop {
    0%, 26% { opacity: 1; }
    100% { opacity: 0; }
}

@keyframes fangxing-route-backdrop-light {
    0%, 18% { opacity: 1; background: #f4f8fa; }
    48% { opacity: 1; background: #739098; }
    78% { opacity: 1; background: #152329; }
    100% { opacity: 0; background: #05070b; }
}

@keyframes fangxing-route-module-left {
    0%, 8% { opacity: 1; transform: translate3d(0, 0, 0) rotate(0); clip-path: inset(0); }
    48% { opacity: 0.86; transform: translate3d(-3vw, 2vh, 0) rotate(-2deg); clip-path: polygon(0 0, 96% 0, 84% 46%, 100% 58%, 88% 100%, 0 100%); }
    100% { opacity: 0; transform: translate3d(-28vw, -18vh, 0) rotate(-11deg) scale(0.9); clip-path: polygon(0 0, 68% 8%, 48% 42%, 72% 67%, 42% 100%, 0 90%); }
}

@keyframes fangxing-route-module-right {
    0%, 8% { opacity: 1; transform: translate3d(0, 0, 0) rotate(0); clip-path: inset(0); }
    48% { opacity: 0.84; transform: translate3d(3vw, -2vh, 0) rotate(2deg); clip-path: polygon(4% 0, 100% 0, 100% 100%, 12% 92%, 20% 62%, 0 48%); }
    100% { opacity: 0; transform: translate3d(28vw, 20vh, 0) rotate(12deg) scale(0.88); clip-path: polygon(28% 4%, 100% 12%, 92% 90%, 36% 100%, 52% 64%, 18% 44%); }
}

@keyframes fangxing-route-control-break {
    0%, 18% { opacity: 1; }
    100% { opacity: 0; transform: translate3d(var(--control-x, 20px), var(--control-y, -20px), 0) rotate(var(--control-r, 5deg)) scale(0.82); }
}

@keyframes fangxing-route-fragment-flight {
    0% { opacity: 0; transform: translate3d(var(--fragment-from-x), var(--fragment-from-y), 0) rotate(0) scale(0.7); }
    18% { opacity: 0.82; }
    68% { opacity: 0.56; }
    100% { opacity: 0; transform: translate3d(var(--fragment-to-x), var(--fragment-to-y), 0) rotate(var(--fragment-rotate)) scale(0.28); }
}

@keyframes fangxing-route-axis-open {
    0% { opacity: 0; transform: translate(-50%, -50%) scale(0.08); }
    48% { opacity: 0.64; }
    100% { opacity: 0; transform: translate(-50%, -50%) scale(1); }
}

@media (max-width: 720px) {
    .fangxing-route-source {
        inset: 82px 20px 42px;
        grid-template-columns: minmax(0, 1fr);
        grid-template-rows: minmax(180px, 0.82fr) minmax(260px, 1.18fr);
        gap: 12px;
    }

    .route-source-map {
        top: 28%;
        width: min(180px, 44%);
    }

    .route-source-submit {
        height: 40px;
    }

    .fangxing-route-fragment:nth-of-type(n + 9) {
        display: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    .fangxing-route-transition {
        display: none;
    }

    .fangxing-entry-pending .fangxing-name-panel,
    .fangxing-entry-pending .auth-card-top,
    .fangxing-entry-pending .auth-daily-quote {
        opacity: 1;
    }

    .fangxing-entry-pending .fangxing-title-wrap h1 span {
        animation-play-state: running;
    }
}

/* Immersive Fangxing naming scene: the form dissolves into a full-screen star field. */
html .auth-shell.auth-shell-naming {
    --cosmos-bg: #05070b;
    --cosmos-ink: #f4f8f8;
    --cosmos-muted: #9ab1b6;
    --cosmos-line: rgba(111, 210, 218, 0.24);
    --cosmos-line-strong: rgba(137, 231, 232, 0.58);
    --cosmos-star: #8fe5e7;
    --cosmos-sun: #f0b84a;
    min-height: 100dvh;
    color: var(--cosmos-ink);
    background: linear-gradient(180deg, #05070b 0%, #080b0f 58%, #050609 100%);
    isolation: isolate;
}

html .auth-shell.auth-shell-naming::before,
html .auth-shell.auth-shell-naming::after {
    content: none;
    display: none;
}

.auth-shell.auth-shell-naming .auth-bg-wave {
    opacity: 0.72;
    mix-blend-mode: screen;
}

.auth-shell.auth-shell-naming .auth-stage {
    width: 100%;
    min-height: 100dvh;
    padding: 0;
}

.auth-shell.auth-shell-naming .auth-entry-naming {
    position: absolute;
    inset: 0;
    display: block;
    width: auto;
    min-height: 100dvh;
}

.auth-shell.auth-shell-naming .auth-mobile-tools,
.auth-shell.auth-shell-naming .theme-toggle,
.auth-shell.auth-shell-naming .auth-visual-mark,
.auth-shell.auth-shell-naming .auth-visual-copy,
.auth-shell.auth-shell-naming .auth-visual-map,
.auth-shell.auth-shell-naming .auth-visual-stack {
    display: none;
}

.auth-shell.auth-shell-naming .auth-visual {
    position: absolute;
    inset: 0;
    z-index: 1;
    min-height: 0;
    overflow: hidden;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}

.auth-shell.auth-shell-naming .auth-visual::before,
.auth-shell.auth-shell-naming .auth-visual::after {
    display: none;
}

.auth-shell.auth-shell-naming .auth-particle-field {
    inset: 0;
    opacity: 0.78;
    mix-blend-mode: screen;
}

.auth-shell.auth-shell-naming .auth-card,
.auth-shell.auth-shell-naming .auth-card:hover {
    position: absolute;
    inset: 0;
    z-index: 4;
    width: 100%;
    height: auto;
    min-height: 100dvh;
    padding: 0;
    overflow: visible;
    border: 0;
    border-radius: 0;
    color: var(--cosmos-ink);
    background: transparent;
    box-shadow: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    transform: none;
}

.auth-shell.auth-shell-naming .auth-card-field {
    inset: 0;
    opacity: 0.56;
    mix-blend-mode: screen;
}

.auth-shell.auth-shell-naming .auth-card > .auth-card-top {
    position: absolute;
    top: 28px;
    right: 34px;
    left: 34px;
    z-index: 8;
    display: block;
    width: auto;
    max-width: none;
    margin: 0;
    pointer-events: none;
}

.auth-shell.auth-shell-naming .auth-card-header {
    display: flex;
    width: 100%;
    align-items: center;
}

.auth-shell.auth-shell-naming .auth-card-header .auth-brand-block {
    position: fixed;
    top: 28px;
    left: 34px;
    display: block;
}

.auth-shell.auth-shell-naming .auth-brand-row {
    gap: 11px;
}

.auth-shell.auth-shell-naming .auth-mark {
    width: 40px;
    height: 40px;
    border: 1px solid rgba(143, 229, 231, 0.5);
    border-radius: 8px;
    color: #071012;
    background: var(--cosmos-star);
    box-shadow: none;
}

.auth-shell.auth-shell-naming .auth-brand {
    color: var(--cosmos-ink);
    font-size: 17px;
    font-weight: 760;
}

.auth-shell.auth-shell-naming .auth-brand-caption {
    color: var(--cosmos-muted);
    font-size: 12px;
}

.auth-shell.auth-shell-naming .auth-daily-quote {
    --auth-quote-accent: var(--cosmos-sun);
    --auth-quote-muted: #8ea4a9;
    --auth-quote-text: #d7e4e5;
    top: auto;
    right: auto;
    bottom: 30px;
    left: 34px;
    width: min(420px, calc(100vw - 68px));
    height: 58px;
    opacity: 0.86;
}

.auth-shell.auth-shell-naming .auth-daily-quote-line {
    font-size: 15px;
}

.auth-shell.auth-shell-naming .auth-break-layer {
    inset: 0;
    border-radius: 0;
    mix-blend-mode: screen;
}

.auth-shell.auth-shell-naming .auth-break-layer::before {
    filter: none;
}

.auth-shell.auth-shell-naming .auth-break-layer::before,
.auth-shell.auth-shell-naming .auth-break-layer::after {
    animation: fangxing-fracture-field-fade 3800ms cubic-bezier(0.16, 1, 0.3, 1) 400ms forwards;
}

.auth-shell.auth-shell-naming .break-piece {
    border-color: rgba(143, 229, 231, 0.24);
    background: rgba(111, 210, 218, 0.06);
    box-shadow: none;
}

.auth-shell.auth-shell-naming .card-break .break-crack {
    background: linear-gradient(90deg, transparent, rgba(143, 229, 231, 0.68), transparent);
    box-shadow: none;
}

.auth-shell.auth-shell-naming .fangxing-name-panel {
    position: absolute;
    inset: 0;
    z-index: 6;
    display: grid;
    place-content: center;
    justify-items: center;
    gap: 24px;
    width: auto;
    min-height: 100dvh;
    box-sizing: border-box;
    padding: 112px 24px 104px;
    pointer-events: none;
    isolation: isolate;
}

.fangxing-orbit-field {
    position: absolute;
    z-index: -1;
    left: 50%;
    top: 50%;
    width: min(860px, 76vw);
    height: min(560px, 62vh);
    opacity: var(--fangxing-orbit-opacity, 0.72);
    transform: translate3d(-50%, -50%, 0);
    transition: opacity 560ms cubic-bezier(0.16, 1, 0.3, 1);
    pointer-events: none;
}

.fangxing-orbit-line {
    --orbit-line-color: rgba(104, 204, 245, 0.42);
    --orbit-line-glow: rgba(104, 204, 245, 0.16);
    --orbit-segment-color: rgba(148, 229, 255, 0.72);
    position: absolute;
    left: 50%;
    top: 50%;
    border: 1px solid var(--orbit-line-color);
    border-radius: 50%;
    box-shadow:
        0 0 11px var(--orbit-line-glow),
        inset 0 0 10px rgba(104, 204, 245, 0.035);
    transform-origin: center;
    will-change: transform;
}

.fangxing-orbit-line::before {
    content: "";
    position: absolute;
    inset: -1px;
    border: 1px solid transparent;
    border-top-color: var(--orbit-segment-color);
    border-right-color: rgba(101, 224, 178, 0.18);
    border-radius: 50%;
    filter: drop-shadow(0 0 4px var(--orbit-line-glow));
}

.fangxing-orbit-line::after {
    content: "";
    position: absolute;
    left: 14%;
    top: 8%;
    width: 5px;
    height: 5px;
    background: var(--cosmos-star);
    transform: rotate(45deg);
    box-shadow: 0 0 8px rgba(143, 229, 231, 0.46);
}

.orbit-line-a {
    width: 100%;
    height: 54%;
    margin: -27% 0 0 -50%;
    transform: rotate(-8deg);
    animation: fangxing-orbit-turn 24000ms linear infinite;
}

.orbit-line-b {
    --orbit-line-color: rgba(101, 224, 178, 0.38);
    --orbit-line-glow: rgba(101, 224, 178, 0.15);
    --orbit-segment-color: rgba(129, 244, 207, 0.66);
    width: 72%;
    height: 86%;
    margin: -43% 0 0 -36%;
    transform: rotate(32deg);
    animation: fangxing-orbit-turn-reverse 30000ms linear infinite;
}

.orbit-line-b::after {
    left: auto;
    right: 9%;
    top: 66%;
    background: #65e0b2;
    box-shadow: 0 0 9px rgba(101, 224, 178, 0.56);
}

.orbit-line-c {
    --orbit-line-color: rgba(218, 241, 244, 0.3);
    --orbit-line-glow: rgba(143, 229, 231, 0.12);
    --orbit-segment-color: rgba(224, 250, 250, 0.56);
    width: 42%;
    height: 62%;
    margin: -31% 0 0 -21%;
    transform: rotate(74deg);
    animation: fangxing-orbit-turn 36000ms linear infinite reverse;
}

.has-fangxing-name .fangxing-orbit-line {
    filter: brightness(1.28);
}

.fangxing-input-light-wave {
    position: absolute;
    z-index: 4;
    top: 50%;
    left: 50%;
    width: min(310px, 38%);
    aspect-ratio: 2 / 1;
    border: 1px solid rgba(111, 213, 244, 0.9);
    border-radius: 50%;
    opacity: 0;
    box-shadow:
        0 0 calc(10px + var(--fangxing-wave-energy, 0) * 10px) rgba(104, 204, 245, 0.34),
        inset 0 0 12px rgba(101, 224, 178, 0.16);
    transform: translate3d(-50%, -50%, 0) scale(0.16);
    animation: fangxing-input-light-wave 820ms cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.fangxing-fixed-star {
    position: absolute;
    width: 4px;
    height: 4px;
    background: #eaf7f7;
    transform: rotate(45deg);
    box-shadow: 0 0 7px rgba(234, 247, 247, 0.5);
    transition: opacity 420ms ease, background-color 420ms ease, box-shadow 420ms ease;
    animation: fangxing-star-pulse 3600ms ease-in-out infinite;
}

.fangxing-fixed-star.is-charged {
    opacity: 1;
    background: #73d5f0;
    box-shadow: 0 0 8px rgba(91, 188, 245, 0.56);
}

.fangxing-fixed-star.is-charged.fixed-star-b,
.fangxing-fixed-star.is-charged.fixed-star-c {
    background: #65e0b2;
    box-shadow: 0 0 8px rgba(89, 224, 183, 0.54);
}

.fixed-star-a {
    left: 8%;
    top: 42%;
}

.fixed-star-b {
    right: 11%;
    top: 23%;
    animation-delay: -1200ms;
}

.fixed-star-c {
    right: 23%;
    bottom: 12%;
    background: var(--cosmos-sun);
    animation-delay: -2400ms;
}

.auth-shell.auth-shell-naming .fangxing-title-wrap {
    min-height: 0;
    padding: 0;
    gap: 12px;
    pointer-events: none;
}

html .auth-shell.auth-shell-naming .fangxing-title-glow {
    width: min(460px, 72vw);
    height: 1px;
    border-radius: 0;
    background: linear-gradient(90deg, transparent, rgba(143, 229, 231, 0.58), transparent);
    animation: fangxing-axis-breathe 4200ms ease-in-out infinite;
}

.auth-shell.auth-shell-naming .fangxing-title-glow::after {
    content: "";
    position: absolute;
    left: 50%;
    top: -90px;
    width: 1px;
    height: 180px;
    background: linear-gradient(180deg, transparent, rgba(143, 229, 231, 0.32), transparent);
}

html .auth-shell.auth-shell-naming .fangxing-title-wrap p {
    margin: 0;
    color: var(--cosmos-muted);
    font-size: 13px;
    font-weight: 560;
    letter-spacing: 0;
}

html .auth-shell.auth-shell-naming .fangxing-title-wrap h1 {
    max-width: none;
    color: var(--cosmos-ink);
    font-size: 42px;
    line-height: 1.24;
    font-weight: 720;
    letter-spacing: 0;
    text-shadow: 0 0 18px rgba(143, 229, 231, 0.14);
}

.auth-shell.auth-shell-naming .fangxing-title-wrap h1 span {
    transform: none;
}

.auth-shell.auth-shell-naming .fangxing-name-form {
    position: relative;
    z-index: 3;
    display: grid;
    width: min(590px, calc(100vw - 48px));
    margin: 0;
    pointer-events: auto;
}

.auth-shell.auth-shell-naming .fangxing-name-field {
    position: relative;
    display: grid;
    gap: 9px;
    min-width: 0;
}

.auth-shell.auth-shell-naming .fangxing-field-label {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.fangxing-name-entry {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    align-items: center;
    min-width: 0;
    border-bottom: 1px solid rgba(143, 229, 231, 0.42);
}

.fangxing-name-entry::before {
    content: "";
    position: absolute;
    left: 6px;
    bottom: -3px;
    width: 5px;
    height: 5px;
    background: var(--cosmos-star);
    transform: rotate(45deg);
    transition: background-color 240ms ease, transform 240ms ease;
}

.fangxing-name-entry::after {
    content: "";
    position: absolute;
    right: 0;
    bottom: -1px;
    left: 0;
    height: 1px;
    background: var(--cosmos-star);
    transform: scaleX(0);
    transform-origin: center;
    transition: transform 420ms cubic-bezier(0.16, 1, 0.3, 1);
}

.fangxing-name-entry:focus-within::after,
.has-fangxing-name .fangxing-name-entry::after {
    transform: scaleX(1);
}

.has-fangxing-name .fangxing-name-entry::before {
    background: #65e0b2;
    transform: rotate(135deg) scale(1.2);
}

.auth-shell.auth-shell-naming .fangxing-name-form input[name="fangxing_name"] {
    grid-area: 1 / 1;
    width: 100%;
    height: 78px;
    min-width: 0;
    padding: 0 68px;
    border: 0;
    border-radius: 0;
    color: var(--cosmos-ink);
    background: transparent;
    box-shadow: none;
    caret-color: #65e0b2;
    font-size: 34px;
    font-weight: 620;
    line-height: 1;
    letter-spacing: 0;
    text-align: center;
    outline: 0;
}

.auth-shell.auth-shell-naming .fangxing-name-form input[name="fangxing_name"]:hover,
.auth-shell.auth-shell-naming .fangxing-name-form input[name="fangxing_name"]:focus {
    border: 0;
    background: transparent;
    box-shadow: none;
    transform: none;
}

.auth-shell.auth-shell-naming .fangxing-name-form input[name="fangxing_name"]::placeholder {
    color: #a5b8bc;
    opacity: 0.82;
}

.auth-shell.auth-shell-naming .fangxing-confirm-star.btn.primary {
    position: relative;
    grid-area: 1 / 1;
    justify-self: end;
    z-index: 2;
    width: 52px;
    height: 52px;
    min-width: 52px;
    max-width: 52px;
    min-height: 52px;
    margin-right: 3px;
    padding: 0;
    overflow: visible;
    isolation: isolate;
    border: 0;
    border-radius: 0;
    color: #e8fbfa;
    background: transparent;
    box-shadow: none;
    font-size: 21px;
    font-weight: 720;
    transform: none;
    transition: color 220ms ease;
}

.auth-shell.auth-shell-naming .fangxing-confirm-star.btn.primary::before {
    content: none;
    display: none;
}

.auth-shell.auth-shell-naming .fangxing-confirm-star.btn.primary::after {
    content: none;
    display: none;
}

.fangxing-confirm-frame {
    position: absolute;
    inset: 8px;
    z-index: 0;
    border: 1px solid rgba(104, 204, 245, 0.72);
    background: rgba(8, 24, 30, 0.88);
    box-shadow: 0 0 6px rgba(104, 204, 245, 0.14);
    transform: rotate(45deg) scale(0.92);
    transition:
        border-color 260ms ease,
        background-color 260ms ease,
        box-shadow 260ms ease,
        transform 420ms cubic-bezier(0.16, 1, 0.3, 1);
}

.fangxing-confirm-core {
    position: absolute;
    z-index: 1;
    top: 50%;
    left: 50%;
    width: 4px;
    height: 4px;
    opacity: 0.7;
    background: #65e0b2;
    box-shadow: 0 0 8px rgba(101, 224, 178, 0.5);
    transform: translate3d(-50%, -50%, 0) rotate(45deg);
    transition: opacity 220ms ease, transform 420ms cubic-bezier(0.16, 1, 0.3, 1);
}

.auth-shell.auth-shell-naming .fangxing-confirm-star.btn.primary:hover {
    color: #ffffff;
    background: transparent;
    box-shadow: none;
    transform: none;
}

.auth-shell.auth-shell-naming .fangxing-confirm-star.btn.primary:hover .fangxing-confirm-frame,
.has-fangxing-name .fangxing-confirm-star.btn.primary .fangxing-confirm-frame {
    border-color: rgba(101, 224, 178, 0.9);
    background: rgba(8, 31, 32, 0.92);
    box-shadow: 0 0 8px rgba(101, 224, 178, 0.28);
    transform: rotate(135deg) scale(1);
}

.auth-shell.auth-shell-naming .fangxing-confirm-star.btn.primary:hover .fangxing-confirm-core,
.has-fangxing-name .fangxing-confirm-star.btn.primary .fangxing-confirm-core {
    opacity: 1;
    transform: translate3d(-50%, -50%, 0) rotate(135deg) scale(1.25);
}

.auth-shell.auth-shell-naming .fangxing-confirm-star.btn.primary:active .fangxing-confirm-frame {
    transform: rotate(135deg) scale(0.88);
}

.auth-shell.auth-shell-naming .fangxing-confirm-star.btn.primary:focus-visible {
    outline: 0;
}

.auth-shell.auth-shell-naming .fangxing-confirm-star.btn.primary:focus-visible .fangxing-confirm-frame {
    outline: 2px solid rgba(104, 204, 245, 0.72);
    outline-offset: 4px;
}

.auth-shell.auth-shell-naming .fangxing-confirm-star .btn-shell {
    position: relative;
    z-index: 2;
    display: grid;
    width: 100%;
    height: 100%;
    place-items: center;
}

.auth-shell.auth-shell-naming .fangxing-confirm-star .btn-label {
    color: inherit;
    font-size: 19px;
    line-height: 1;
}

.auth-shell.auth-shell-naming .fangxing-field-hint {
    position: relative;
    z-index: 5;
    display: inline-flex;
    width: max-content;
    min-height: 18px;
    justify-content: center;
    align-items: baseline;
    justify-self: center;
    gap: 6px;
    color: #8fa5aa;
    font-size: 0;
    line-height: 1.5;
    white-space: nowrap;
    transition: color 180ms ease;
}

.fangxing-count {
    display: inline-grid;
    grid-template-columns: 2ch auto;
    align-items: baseline;
    column-gap: 0;
    font-size: 12px;
    font-variant-numeric: tabular-nums;
}

.fangxing-count [data-fangxing-name-count] {
    text-align: right;
}

.fangxing-hint-separator,
.fangxing-hint-copy {
    font-size: 12px;
}

.fangxing-hint-separator {
    opacity: 0.58;
}

.auth-shell.auth-shell-naming .is-name-over-limit .fangxing-field-hint {
    color: #ff9f8c;
}

.auth-shell.auth-shell-naming .fangxing-name-entry .field-error {
    position: absolute;
    top: calc(100% + 32px);
    right: 0;
    left: 0;
    max-width: none;
    padding: 0;
    border: 0;
    color: #ffab99;
    background: transparent;
    box-shadow: none;
    font-size: 12px;
    text-align: center;
    white-space: normal;
}

.auth-shell.auth-shell-naming .fangxing-name-entry .field-error::before {
    display: none;
}

.auth-shell.auth-shell-naming .fangxing-logout-form {
    position: relative;
    z-index: 3;
    margin-top: 8px;
    pointer-events: auto;
}

.auth-shell.auth-shell-naming .fangxing-logout-form .text-link {
    padding: 8px 12px;
    color: #8fa5aa;
    font-size: 12px;
    transition: color 180ms ease;
}

.auth-shell.auth-shell-naming .fangxing-logout-form .text-link:hover {
    color: #e4eeee;
}

.auth-shell.auth-shell-naming .auth-card > .flash {
    position: fixed;
    top: 92px;
    right: 24px;
    left: 24px;
    z-index: 9;
    justify-content: center;
    width: min(560px, calc(100vw - 48px));
    max-width: none;
    margin: 0 auto;
    padding: 8px 18px;
    border: 0;
    border-radius: 0;
    color: #ffab99;
    background: transparent;
    box-shadow: none;
    text-align: center;
}

.auth-shell.auth-shell-naming .auth-card > .flash .flash-message {
    overflow-wrap: normal;
    white-space: nowrap;
}

.auth-shell.auth-shell-naming .auth-card > .flash.success {
    color: #9fe3d0;
}

.auth-shell.auth-shell-naming .auth-card > .fangxing-login-success-flash {
    --success-ray-duration: 4600ms;
    position: fixed;
    top: clamp(84px, 13vh, 124px);
    right: 24px;
    left: 24px;
    z-index: 9;
    display: grid;
    width: min(620px, calc(100vw - 48px));
    min-height: 72px;
    margin: 0 auto;
    place-items: center;
    padding: 0;
    overflow: visible;
    opacity: 0;
    border: 0;
    border-radius: 0;
    color: #dff8f3;
    outline: 0;
    background: none !important;
    box-shadow: none !important;
    filter: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    mix-blend-mode: normal;
    pointer-events: none;
}

.auth-shell.auth-shell-naming .fangxing-login-success-flash::before,
.auth-shell.auth-shell-naming .fangxing-login-success-flash::after {
    content: none;
    display: none;
}

.fangxing-success-core {
    position: absolute;
    z-index: 2;
    top: 29%;
    left: 50%;
    width: 5px;
    height: 5px;
    opacity: 0;
    border: 1px solid rgba(221, 255, 248, 0.92);
    background: #5cddbc;
    transform: translate3d(-50%, -50%, 0) rotate(45deg) scale(0.2);
}

.auth-shell.auth-shell-naming .auth-card > .fangxing-login-success-flash .fangxing-success-words {
    position: absolute;
    z-index: 1;
    top: 16%;
    left: 50%;
    display: grid;
    width: min(220px, 68vw);
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: center;
    column-gap: 30px;
    overflow: visible;
    color: #7bcfff;
    font-size: clamp(14px, 1.4vw, 16px);
    font-weight: 620;
    line-height: 1;
    transform: translateX(-50%);
}

.fangxing-success-word {
    position: relative;
    display: inline-block;
    opacity: 0;
    white-space: nowrap;
    text-shadow: none;
    will-change: transform, opacity;
}

.fangxing-success-word::after {
    content: none;
    display: none;
}

.success-word-login {
    justify-self: end;
    color: #76c9f5;
    text-align: right;
}

.success-word-done {
    justify-self: start;
    color: #65e0b2;
    text-align: left;
}

.success-word-login {
    transform: translate3d(18px, 4px, 0) scale(0.97);
}

.success-word-done {
    transform: translate3d(-18px, 4px, 0) scale(0.97);
}

.fangxing-login-success-flash.is-success-ray-active {
    opacity: 1;
    animation: fangxing-success-shell var(--success-ray-duration) linear forwards;
}

.fangxing-login-success-flash.is-success-ray-active .fangxing-success-core {
    animation: fangxing-success-core-pulse var(--success-ray-duration) cubic-bezier(0.22, 0.8, 0.2, 1) forwards;
}

.fangxing-login-success-flash.is-success-ray-active .success-word-login {
    animation: fangxing-success-word-left var(--success-ray-duration) cubic-bezier(0.22, 0.8, 0.2, 1) forwards;
}

.fangxing-login-success-flash.is-success-ray-active .success-word-done {
    animation: fangxing-success-word-right var(--success-ray-duration) cubic-bezier(0.22, 0.8, 0.2, 1) forwards;
}

.auth-shell.auth-shell-naming.auth-reassembling .auth-break-layer .break-piece {
    animation: fangxing-small-piece-settle 1100ms cubic-bezier(0.16, 1, 0.3, 1) both;
}

.auth-shell.auth-shell-naming.auth-reassembling .auth-break-layer .break-crack {
    animation: fangxing-small-crack-settle 900ms ease-out both;
}

@keyframes fangxing-success-shell {
    0%, 94% { opacity: 1; }
    100% { opacity: 0; }
}

@keyframes fangxing-success-core-pulse {
    0%, 8% { opacity: 0; transform: translate3d(-50%, -50%, 0) rotate(45deg) scale(0.2); }
    22% { opacity: 1; transform: translate3d(-50%, -50%, 0) rotate(52deg) scale(1); }
    52% { opacity: 0.82; transform: translate3d(-50%, -50%, 0) rotate(39deg) scale(0.82); }
    78% { opacity: 1; transform: translate3d(-50%, -50%, 0) rotate(45deg) scale(1); }
    100% { opacity: 0; transform: translate3d(-50%, -50%, 0) rotate(135deg) scale(0.25); }
}

@keyframes fangxing-success-word-left {
    0%, 10% { opacity: 0; transform: translate3d(18px, 4px, 0) scale(0.97); }
    26% { opacity: 0.72; transform: translate3d(5px, 1px, 0) scale(0.99); }
    38% { opacity: 1; transform: translate3d(0, 0, 0) scale(1); }
    58% { opacity: 1; transform: translate3d(-3px, -1px, 0) scale(1); }
    76% { opacity: 1; transform: translate3d(0, 0, 0) scale(1); }
    100% { opacity: 0; transform: translate3d(-112px, -7px, 0) scale(0.96); }
}

@keyframes fangxing-success-word-right {
    0%, 10% { opacity: 0; transform: translate3d(-18px, 4px, 0) scale(0.97); }
    26% { opacity: 0.72; transform: translate3d(-5px, 1px, 0) scale(0.99); }
    38% { opacity: 1; transform: translate3d(0, 0, 0) scale(1); }
    58% { opacity: 1; transform: translate3d(3px, -1px, 0) scale(1); }
    76% { opacity: 1; transform: translate3d(0, 0, 0) scale(1); }
    100% { opacity: 0; transform: translate3d(112px, -7px, 0) scale(0.96); }
}

@keyframes fangxing-small-piece-settle {
    0% {
        opacity: 0;
        transform: translate3d(var(--piece-x, 0), var(--piece-y, 0), 0) rotate(var(--piece-r, 0deg)) scale(0.16);
    }

    42% { opacity: 0.14; }

    100% {
        opacity: 0;
        transform: translate3d(0, 0, 0) rotate(0) scale(0.04);
    }
}

@keyframes fangxing-small-crack-settle {
    0% { opacity: 0; }
    38% { opacity: 0.18; }
    100% { opacity: 0; }
}

.auth-shell.auth-shell-naming .name-orbit-dot {
    position: absolute;
    z-index: 2;
    background: var(--cosmos-star);
    box-shadow: 0 0 8px rgba(143, 229, 231, 0.42);
}

.auth-shell.auth-shell-naming .dot-a {
    --dot-radius: min(260px, 28vw);
    --dot-speed: 9000ms;
}

.auth-shell.auth-shell-naming .dot-b {
    --dot-radius: min(360px, 38vw);
    --dot-speed: 13000ms;
    background: var(--cosmos-sun);
    box-shadow: 0 0 8px rgba(240, 184, 74, 0.42);
}

.auth-shell.auth-shell-naming.auth-reassembling .auth-card {
    animation: none;
}

@keyframes fangxing-orbit-turn {
    to {
        transform: rotate(352deg);
    }
}

@keyframes fangxing-orbit-turn-reverse {
    to {
        transform: rotate(-328deg);
    }
}

@keyframes fangxing-input-light-wave {
    0% {
        opacity: 0;
        transform: translate3d(-50%, -50%, 0) scale(0.16);
    }

    16% {
        opacity: 0.92;
    }

    58% {
        opacity: 0.46;
    }

    100% {
        opacity: 0;
        transform: translate3d(-50%, -50%, 0) scale(2.35);
    }
}

@keyframes fangxing-star-pulse {
    0%,
    100% {
        opacity: 0.34;
        transform: rotate(45deg) scale(0.84);
    }

    50% {
        opacity: 1;
        transform: rotate(45deg) scale(1.18);
    }
}

@keyframes fangxing-axis-breathe {
    0%,
    100% {
        opacity: 0.32;
        transform: scaleX(0.72);
    }

    50% {
        opacity: 0.88;
        transform: scaleX(1);
    }
}

@keyframes fangxing-fracture-field-fade {
    0%,
    28% {
        opacity: 0.5;
    }

    100% {
        opacity: 0;
    }
}

/* Fangxing completion: welcome, recede, then travel through the star field. */
.fangxing-departure-layer {
    position: fixed;
    inset: 0;
    z-index: 24;
    display: grid;
    overflow: hidden;
    place-items: center;
    pointer-events: none;
    isolation: isolate;
    background: #05090c;
}

.fangxing-warp-canvas {
    position: absolute;
    inset: 0;
    z-index: 0;
    display: block;
    width: 100%;
    height: 100%;
}

.fangxing-departure-message {
    position: relative;
    z-index: 3;
    display: flex;
    align-items: baseline;
    gap: 12px;
    margin: 0;
    opacity: 0;
    color: #dcebed;
    font-size: clamp(22px, 3vw, 38px);
    font-weight: 560;
    line-height: 1.25;
    text-align: center;
    transform: none;
}

.fangxing-departure-message strong {
    color: #65e0b2;
    font-weight: 700;
}

.fangxing-departure-core {
    position: absolute;
    z-index: 4;
    top: 50%;
    left: 50%;
    width: 8px;
    height: 8px;
    opacity: 0;
    border: 1px solid rgba(209, 255, 246, 0.9);
    background: #6bdcc5;
    transform: translate3d(-50%, -50%, 0) rotate(45deg) scale(0.2);
}

.fangxing-departure-globe {
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 2;
    width: min(560px, 68vw);
    aspect-ratio: 1;
    opacity: 0;
    perspective: 900px;
    transform: translate3d(-50%, -50%, 0) scale(1.08);
    transform-style: preserve-3d;
}

.fangxing-departure-ring {
    position: absolute;
    border: 1px solid rgba(104, 204, 245, 0.46);
    border-radius: 50%;
    transform-style: preserve-3d;
}

.departure-ring-a {
    inset: 15% 2%;
    transform: rotateX(68deg) rotateZ(-14deg);
}

.departure-ring-b {
    inset: 2% 18%;
    border-color: rgba(101, 224, 178, 0.48);
    transform: rotateY(66deg) rotateZ(22deg);
}

.departure-ring-c {
    inset: 19% 12%;
    border-color: rgba(222, 244, 245, 0.3);
    transform: rotateX(42deg) rotateY(52deg) rotateZ(72deg);
}

.fangxing-departing .fangxing-title-wrap,
.fangxing-departing .fangxing-name-form,
.fangxing-departing .fangxing-logout-form,
.fangxing-departing .auth-card-top,
.fangxing-departing .auth-card > .flash,
.fangxing-departing .fangxing-login-success-flash {
    pointer-events: none;
    animation: fangxing-departure-controls 520ms cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.fangxing-departing .fangxing-orbit-field {
    animation: fangxing-departure-orbit 3600ms cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.fangxing-departing .auth-bg-wave,
.fangxing-departing .auth-particle-field,
.fangxing-departing .auth-card-field {
    animation: fangxing-departure-space 3600ms cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.fangxing-departing .fangxing-departure-message {
    animation: fangxing-departure-message 3600ms cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.fangxing-departing .fangxing-departure-core {
    animation: fangxing-departure-core 3200ms cubic-bezier(0.16, 1, 0.3, 1) 180ms forwards;
}

.fangxing-departing .fangxing-departure-globe {
    animation: fangxing-departure-globe 3600ms cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.fangxing-departing .departure-ring-a {
    animation: fangxing-departure-ring-a 3600ms linear forwards;
}

.fangxing-departing .departure-ring-b {
    animation: fangxing-departure-ring-b 3600ms linear forwards;
}

.fangxing-departing .departure-ring-c {
    animation: fangxing-departure-ring-c 3600ms linear forwards;
}

@keyframes fangxing-departure-controls {
    0% { opacity: 1; }
    100% { opacity: 0; }
}

@keyframes fangxing-departure-orbit {
    0% { opacity: 1; transform: translate3d(-50%, -50%, 0) scale(1); }
    46% { opacity: 0.86; transform: translate3d(-50%, -50%, 0) scale(0.76); }
    100% { opacity: 0; transform: translate3d(-50%, -50%, 0) scale(0.12); }
}

@keyframes fangxing-departure-space {
    0% { opacity: 1; }
    64% { opacity: 0.78; }
    100% { opacity: 0.16; }
}

@keyframes fangxing-departure-message {
    0% { opacity: 0; }
    14%, 56% { opacity: 1; }
    100% { opacity: 0; }
}

@keyframes fangxing-departure-core {
    0% { opacity: 0; transform: translate3d(-50%, -50%, 0) rotate(45deg) scale(0.2); }
    24% { opacity: 1; transform: translate3d(-50%, -50%, 0) rotate(90deg) scale(1); }
    72% { opacity: 0.9; transform: translate3d(-50%, -50%, 0) rotate(180deg) scale(0.72); }
    100% { opacity: 0; transform: translate3d(-50%, -50%, 0) rotate(270deg) scale(0.08); }
}

@keyframes fangxing-departure-globe {
    0% { opacity: 0; transform: translate3d(-50%, -50%, 80px) scale(1.08); }
    14% { opacity: 0.86; }
    52% { opacity: 0.68; transform: translate3d(-50%, -50%, -260px) scale(0.64); }
    100% { opacity: 0; transform: translate3d(-50%, -50%, -1400px) scale(0.02); }
}

@keyframes fangxing-departure-ring-a {
    to { transform: rotateX(68deg) rotateZ(166deg); }
}

@keyframes fangxing-departure-ring-b {
    to { transform: rotateY(66deg) rotateZ(-158deg); }
}

@keyframes fangxing-departure-ring-c {
    to { transform: rotateX(222deg) rotateY(52deg) rotateZ(252deg); }
}

.fangxing-departing-reduced .fangxing-title-wrap,
.fangxing-departing-reduced .fangxing-name-form,
.fangxing-departing-reduced .fangxing-logout-form {
    opacity: 0;
}

.fangxing-departing-reduced .fangxing-departure-message {
    animation: fangxing-departure-reduced 850ms ease-out forwards;
}

@keyframes fangxing-departure-reduced {
    0% { opacity: 0; transform: none; }
    24%, 72% { opacity: 1; transform: none; }
    100% { opacity: 0; transform: none; }
}

@media (max-width: 760px) {
    .auth-shell.auth-shell-naming .auth-card > .auth-card-top {
        top: 20px;
        right: 20px;
        left: 20px;
    }

    .auth-shell.auth-shell-naming .auth-card-header .auth-brand-block {
        top: 20px;
        left: 20px;
    }

    .auth-shell.auth-shell-naming .auth-brand-caption,
    .auth-shell.auth-shell-naming .auth-daily-quote {
        display: none;
    }

    .auth-shell.auth-shell-naming .fangxing-name-panel {
        gap: 22px;
        padding: 96px 20px 72px;
    }

    .fangxing-orbit-field {
        width: 124vw;
        height: 58vh;
    }

    .auth-shell.auth-shell-naming .fangxing-title-wrap {
        min-height: 0;
        padding: 0;
    }

    html .auth-shell.auth-shell-naming .fangxing-title-wrap h1 {
        font-size: 30px;
        line-height: 1.28;
    }

    .fangxing-departure-message {
        flex-direction: column;
        align-items: center;
        gap: 4px;
        font-size: 24px;
    }

    html .auth-shell.auth-shell-naming .fangxing-title-glow {
        width: min(340px, 86vw);
    }

    .auth-shell.auth-shell-naming .fangxing-name-form {
        width: min(100%, 520px);
    }

    .fangxing-name-entry {
        grid-template-columns: minmax(0, 1fr);
    }

    .auth-shell.auth-shell-naming .fangxing-name-form input[name="fangxing_name"] {
        height: 70px;
        padding: 0 58px;
        font-size: 28px;
    }

    .auth-shell.auth-shell-naming .fangxing-confirm-star.btn.primary {
        width: 48px;
        height: 48px;
        min-width: 48px;
        max-width: 48px;
        min-height: 48px;
    }

    .auth-shell.auth-shell-naming .fixed-star-c,
    .auth-shell.auth-shell-naming .name-orbit-dot {
        display: none;
    }

    .auth-shell.auth-shell-naming .auth-card > .flash {
        top: 78px;
        right: 18px;
        left: 18px;
        width: calc(100vw - 36px);
        max-width: none;
        padding: 6px 0;
        font-size: 12px;
    }

    .auth-shell.auth-shell-naming .auth-card > .fangxing-login-success-flash {
        top: 96px;
        width: calc(100vw - 32px);
        min-height: 64px;
    }

    .auth-shell.auth-shell-naming .auth-card > .fangxing-login-success-flash .fangxing-success-words {
        width: min(210px, 70vw);
        column-gap: 28px;
        font-size: 14px;
    }
}

@media (max-height: 680px) {
    .auth-shell.auth-shell-naming .fangxing-name-panel {
        gap: 16px;
        padding-top: 82px;
        padding-bottom: 36px;
    }

    html .auth-shell.auth-shell-naming .fangxing-title-wrap h1 {
        font-size: 28px;
    }

    .auth-shell.auth-shell-naming .fangxing-name-form input[name="fangxing_name"] {
        height: 62px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .fangxing-orbit-line,
    .fangxing-fixed-star,
    html .auth-shell.auth-shell-naming .fangxing-title-glow,
    .auth-shell.auth-shell-naming .auth-break-layer::before,
    .auth-shell.auth-shell-naming .auth-break-layer::after {
        animation: none;
    }

    .fangxing-orbit-field {
        transition: none;
    }

    .auth-shell.auth-shell-naming .auth-break-layer::before,
    .auth-shell.auth-shell-naming .auth-break-layer::after {
        opacity: 0;
    }

    .fangxing-fixed-star {
        opacity: 0.72;
    }

    .fangxing-login-success-flash.is-success-ray-active {
        animation: fangxing-success-reduced 2200ms ease-out forwards;
    }

    .fangxing-login-success-flash.is-success-ray-active .fangxing-success-core {
        opacity: 1;
        animation: none;
        transform: translate3d(-50%, -50%, 0) rotate(45deg) scale(1);
    }

    .fangxing-login-success-flash.is-success-ray-active .fangxing-success-word {
        opacity: 1;
        animation: none;
        transform: none;
    }

}

@keyframes fangxing-success-reduced {
    0% { opacity: 0; }
    18%, 72% { opacity: 1; }
    100% { opacity: 0; }
}

/* Keep the deep-space departure continuous while the light workspace is replaced. */
html.fangxing-arrival-cover {
    --fangxing-arrival-duration: 1180ms;
    overflow: hidden;
}

html.fangxing-arrival-cover.fangxing-arrival-dark {
    --fangxing-arrival-duration: 760ms;
}

html.fangxing-arrival-cover.fangxing-arrival-from-white {
    --fangxing-arrival-duration: 1180ms;
}

html.fangxing-arrival-cover.fangxing-arrival-from-white::before,
html.fangxing-arrival-cover.fangxing-arrival-from-white::after {
    display: none;
}

html.fangxing-arrival-cover::before,
html.fangxing-arrival-cover::after {
    content: "";
    position: fixed;
    top: -2px;
    bottom: -2px;
    z-index: 2147483000;
    width: calc(50% + 2px);
    pointer-events: none;
    background: #05090c;
    will-change: transform;
}

html.fangxing-arrival-cover::before {
    left: -1px;
    box-shadow:
        18px 0 42px rgba(91, 196, 241, 0.28),
        5px 0 14px rgba(101, 224, 178, 0.42);
}

html.fangxing-arrival-cover::after {
    right: -1px;
    box-shadow:
        -18px 0 42px rgba(91, 196, 241, 0.28),
        -5px 0 14px rgba(101, 224, 178, 0.42);
}

html.fangxing-arrival-cover.fangxing-arrival-reveal::before {
    animation: fangxing-arrival-left var(--fangxing-arrival-duration) cubic-bezier(0.65, 0, 0.2, 1) forwards;
}

html.fangxing-arrival-cover.fangxing-arrival-reveal::after {
    animation: fangxing-arrival-right var(--fangxing-arrival-duration) cubic-bezier(0.65, 0, 0.2, 1) forwards;
}

html.fangxing-arrival-cover.fangxing-arrival-from-white.fangxing-arrival-reveal::before {
    animation: none;
}

html.fangxing-arrival-cover.fangxing-arrival-from-white.fangxing-arrival-reveal::after {
    animation: none;
}

.fangxing-arrival-layer {
    --fangxing-layer-duration: 1180ms;
    position: fixed;
    inset: 0;
    z-index: 2147483000;
    overflow: hidden;
    pointer-events: none;
    isolation: isolate;
    contain: layout paint style;
}

.fangxing-arrival-layer-tone,
.fangxing-arrival-layer-door,
.fangxing-arrival-layer-seam {
    position: absolute;
    display: block;
    pointer-events: none;
}

.fangxing-arrival-layer-tone {
    inset: 0;
    z-index: 3;
    opacity: 1;
    background: #fbfdfd;
}

.fangxing-arrival-layer-door {
    top: -2px;
    bottom: -2px;
    z-index: 1;
    width: calc(50% + 2px);
    background: #05090c;
    backface-visibility: hidden;
}

.fangxing-arrival-layer-door.is-left {
    left: -1px;
    box-shadow: 12px 0 26px rgba(91, 196, 241, 0.22), 4px 0 10px rgba(101, 224, 178, 0.34);
}

.fangxing-arrival-layer-door.is-right {
    right: -1px;
    box-shadow: -12px 0 26px rgba(91, 196, 241, 0.22), -4px 0 10px rgba(101, 224, 178, 0.34);
}

.fangxing-arrival-layer-seam {
    top: 8%;
    bottom: 8%;
    left: 50%;
    z-index: 2;
    width: 1px;
    opacity: 0;
    background: rgba(179, 248, 238, 0.86);
    box-shadow: 0 0 12px rgba(101, 224, 178, 0.52), 0 0 26px rgba(91, 196, 241, 0.24);
    transform: translateX(-50%) scaleY(0.24);
}

.fangxing-arrival-layer.is-running .fangxing-arrival-layer-tone {
    will-change: opacity;
    animation: fangxing-arrival-tone var(--fangxing-layer-duration) cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

.fangxing-arrival-layer.is-running .fangxing-arrival-layer-door {
    will-change: transform;
}

.fangxing-arrival-layer.is-running .fangxing-arrival-layer-door.is-left {
    animation: fangxing-arrival-layer-left var(--fangxing-layer-duration) cubic-bezier(0.65, 0, 0.2, 1) forwards;
}

.fangxing-arrival-layer.is-running .fangxing-arrival-layer-door.is-right {
    animation: fangxing-arrival-layer-right var(--fangxing-layer-duration) cubic-bezier(0.65, 0, 0.2, 1) forwards;
}

.fangxing-arrival-layer.is-running .fangxing-arrival-layer-seam {
    will-change: opacity, transform;
    animation: fangxing-arrival-layer-seam var(--fangxing-layer-duration) cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

body.fangxing-arrival-content > .app-shell,
body.fangxing-arrival-content > .home-shell {
    opacity: 0;
}

html.fangxing-arrival-reveal body.fangxing-arrival-content > .app-shell,
html.fangxing-arrival-reveal body.fangxing-arrival-content > .home-shell {
    animation: fangxing-arrival-content 820ms ease-out 90ms forwards;
}

@keyframes fangxing-arrival-left {
    to { transform: translate3d(-104%, 0, 0); }
}

@keyframes fangxing-arrival-right {
    to { transform: translate3d(104%, 0, 0); }
}

@keyframes fangxing-arrival-tone {
    0%, 10% { opacity: 1; }
    52%, 100% { opacity: 0; }
}

@keyframes fangxing-arrival-layer-left {
    0%, 44% { transform: translate3d(0, 0, 0); }
    100% { transform: translate3d(-104%, 0, 0); }
}

@keyframes fangxing-arrival-layer-right {
    0%, 44% { transform: translate3d(0, 0, 0); }
    100% { transform: translate3d(104%, 0, 0); }
}

@keyframes fangxing-arrival-layer-seam {
    0%, 30% { opacity: 0; transform: translateX(-50%) scaleY(0.24); }
    44% { opacity: 0.82; transform: translateX(-50%) scaleY(1); }
    70% { opacity: 0.48; transform: translateX(-50%) scaleY(0.96); }
    100% { opacity: 0; transform: translateX(-50%) scaleY(0.72); }
}

@keyframes fangxing-arrival-content {
    from { opacity: 0; }
    to { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
    html.fangxing-arrival-cover,
    html.fangxing-arrival-cover.fangxing-arrival-from-white {
        --fangxing-arrival-duration: 260ms;
    }

    html.fangxing-arrival-cover::before,
    html.fangxing-arrival-cover::after {
        box-shadow: none;
    }

    .fangxing-arrival-layer {
        --fangxing-layer-duration: 260ms;
    }

    .fangxing-arrival-layer.is-running .fangxing-arrival-layer-tone {
        animation: fangxing-arrival-tone-reduced 220ms ease-out forwards;
    }

    .fangxing-arrival-layer.is-running .fangxing-arrival-layer-door {
        animation: none;
        opacity: 0;
    }

    .fangxing-arrival-layer-seam {
        display: none;
    }

    html.fangxing-arrival-reveal body.fangxing-arrival-content > .app-shell,
    html.fangxing-arrival-reveal body.fangxing-arrival-content > .home-shell {
        animation-duration: 220ms;
        animation-delay: 0ms;
    }
}

@keyframes fangxing-arrival-tone-reduced {
    from { opacity: 1; }
    to { opacity: 0; }
}

/* Returning users approach their named Fangxing before the workspace is revealed. */
.returning-fangxing-layer {
    --returning-duration: 5350ms;
    position: fixed;
    inset: 0;
    z-index: 80;
    display: grid;
    overflow: hidden;
    place-items: center;
    pointer-events: none;
    isolation: isolate;
    opacity: 1;
    background: #03070b;
}

.returning-fangxing-layer::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 8;
    pointer-events: none;
    opacity: 0;
    background:
        radial-gradient(
            circle at 50% 50%,
            rgba(255, 255, 255, 1) 0,
            rgba(226, 252, 250, 0.99) 24%,
            rgba(196, 237, 242, 0.98) 54%,
            rgba(255, 255, 255, 0.99) 100%
        ),
        #ffffff;
}

.returning-fangxing-canvas {
    position: absolute;
    inset: 0;
    z-index: 0;
    display: block;
    width: 100%;
    height: 100%;
    opacity: 0;
    animation: returning-fangxing-canvas-in 220ms ease-out forwards;
}

.returning-fangxing-hud {
    position: absolute;
    top: max(26px, env(safe-area-inset-top));
    left: 50%;
    z-index: 5;
    display: grid;
    min-width: min(440px, 78vw);
    justify-items: center;
    gap: 9px;
    opacity: 0;
    color: #ddf8f7;
    transform: translate3d(-50%, -12px, 0);
}

.returning-fangxing-hud::before,
.returning-fangxing-hud::after {
    content: "";
    position: absolute;
    top: 30px;
    width: min(128px, 22vw);
    height: 1px;
}

.returning-fangxing-hud::before {
    right: calc(50% + 72px);
    background: linear-gradient(90deg, transparent, rgba(104, 204, 245, 0.82));
}

.returning-fangxing-hud::after {
    left: calc(50% + 72px);
    background: linear-gradient(90deg, rgba(101, 224, 178, 0.82), transparent);
}

.returning-fangxing-hud span {
    position: relative;
    color: rgba(139, 211, 224, 0.76);
    font-family: "Fangcun Space Grotesk", "Segoe UI", sans-serif;
    font-size: 10px;
    font-weight: 650;
    line-height: 1;
}

.returning-fangxing-hud span::before {
    content: "";
    position: absolute;
    top: 50%;
    left: -16px;
    width: 5px;
    height: 5px;
    border: 1px solid #68ccf5;
    transform: translateY(-50%) rotate(45deg);
    box-shadow: 0 0 8px rgba(104, 204, 245, 0.62);
}

.returning-fangxing-hud span::after {
    content: "";
    position: absolute;
    right: 0;
    bottom: -5px;
    left: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, #65e0b2, transparent);
    transform: scaleX(0);
    animation: returning-fangxing-hud-scan 1500ms ease-in-out 260ms forwards;
}

.returning-fangxing-hud strong {
    position: relative;
    padding: 5px 24px;
    color: #e9ffff;
    font-size: 19px;
    font-weight: 680;
    line-height: 1.1;
    text-shadow: 0 0 16px rgba(101, 224, 178, 0.34);
}

.returning-fangxing-hud strong::before,
.returning-fangxing-hud strong::after {
    content: "";
    position: absolute;
    top: 3px;
    width: 10px;
    height: 10px;
}

.returning-fangxing-hud strong::before {
    left: 0;
    border-top: 1px solid #68ccf5;
    border-left: 1px solid #68ccf5;
}

.returning-fangxing-hud strong::after {
    right: 0;
    border-top: 1px solid #65e0b2;
    border-right: 1px solid #65e0b2;
}

.returning-fangxing-name {
    position: relative;
    z-index: 4;
    box-sizing: border-box;
    display: grid;
    justify-items: center;
    max-width: min(82vw, 760px);
    padding: 8px 58px 11px;
    opacity: 0;
    color: #efffff;
    text-align: center;
    transform: scale(0.94);
}

.returning-fangxing-name::before,
.returning-fangxing-name::after {
    content: "";
    position: absolute;
    pointer-events: none;
}

.returning-fangxing-name::before {
    top: 50%;
    left: 0;
    width: 46px;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(116, 218, 250, 0.92));
    transform: translateY(-50%);
}

.returning-fangxing-name::after {
    top: 50%;
    right: 0;
    width: 46px;
    height: 1px;
    background: linear-gradient(90deg, rgba(105, 232, 188, 0.9), transparent);
    transform: translateY(-50%);
}

.returning-fangxing-name strong {
    position: relative;
    z-index: 1;
    display: inline-block;
    max-width: 100%;
    overflow-wrap: anywhere;
    color: #edffff;
    font-family: "Fangcun QingKe HuangYou", "Microsoft YaHei UI", "Microsoft YaHei", sans-serif;
    font-size: 58px;
    font-weight: 400;
    line-height: 1.06;
    letter-spacing: 0;
    white-space: nowrap;
    -webkit-font-smoothing: antialiased;
    text-shadow:
        0 0 2px rgba(242, 255, 255, 0.72),
        -1px 0 6px rgba(104, 204, 245, 0.3),
        1px 0 7px rgba(101, 224, 178, 0.26);
}

.returning-fangxing-name strong::before,
.returning-fangxing-name strong::after {
    content: none;
}

.returning-fangxing-name-marker {
    display: flex;
    z-index: 1;
    width: 44px;
    height: 7px;
    align-items: center;
    justify-content: space-between;
    margin-top: 7px;
    opacity: 0.82;
}

.returning-fangxing-name-marker::before,
.returning-fangxing-name-marker::after {
    content: "";
    width: 4px;
    height: 4px;
    border-radius: 50%;
}

.returning-fangxing-name-marker::before {
    background: #85d9f5;
    box-shadow: 0 0 7px rgba(104, 204, 245, 0.88);
}

.returning-fangxing-name-marker::after {
    background: #7fe9c2;
    box-shadow: 0 0 7px rgba(101, 224, 178, 0.86);
}

.returning-fangxing-name-marker i {
    width: 5px;
    height: 5px;
    border: 1px solid rgba(221, 255, 252, 0.92);
    box-shadow:
        0 0 7px rgba(104, 204, 245, 0.76),
        0 0 12px rgba(101, 224, 178, 0.3);
    transform: rotate(45deg);
}

.returning-fangxing-starburst {
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 7;
    width: 92px;
    height: 92px;
    pointer-events: none;
    opacity: 0;
    transform: translate3d(-50%, -50%, 0) scale(0.08);
    transform-origin: center;
    mix-blend-mode: screen;
}

.returning-fangxing-starburst::before,
.returning-fangxing-starburst::after {
    content: "";
    position: absolute;
    border-radius: 50%;
}

.returning-fangxing-starburst::before {
    inset: 0;
    background: radial-gradient(
        circle,
        rgba(255, 255, 255, 1) 0,
        rgba(222, 255, 252, 0.98) 9%,
        rgba(104, 204, 245, 0.64) 29%,
        rgba(101, 224, 178, 0.22) 53%,
        transparent 76%
    );
}

.returning-fangxing-starburst::after {
    inset: 40%;
    border-radius: 0;
    background: #f5ffff;
    clip-path: polygon(50% 0, 61% 39%, 100% 50%, 61% 61%, 50% 100%, 39% 61%, 0 50%, 39% 39%);
    box-shadow:
        0 0 12px rgba(255, 255, 255, 0.96),
        0 0 28px rgba(104, 204, 245, 0.82),
        0 0 46px rgba(101, 224, 178, 0.58);
}

.returning-fangxing-starburst-ray {
    --ray-opacity: 1;
    position: absolute;
    top: 50%;
    left: 50%;
    width: 286px;
    height: 2px;
    opacity: 0;
    background: linear-gradient(
        90deg,
        transparent,
        rgba(104, 204, 245, 0.22) 24%,
        rgba(235, 255, 253, 0.98) 50%,
        rgba(101, 224, 178, 0.24) 76%,
        transparent
    );
    transform: translate3d(-50%, -50%, 0);
    transform-origin: center;
}

.returning-fangxing-starburst-ray.is-vertical {
    --ray-opacity: 0.82;
    transform: translate3d(-50%, -50%, 0) rotate(90deg) scaleX(0.72);
}

.returning-fangxing-starburst-ray.is-diagonal-a {
    --ray-opacity: 0.66;
    transform: translate3d(-50%, -50%, 0) rotate(38deg) scaleX(0.52);
}

.returning-fangxing-starburst-ray.is-diagonal-b {
    --ray-opacity: 0.56;
    transform: translate3d(-50%, -50%, 0) rotate(-38deg) scaleX(0.48);
}

.returning-fangxing-fallback-globe {
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 2;
    width: min(520px, 78vw);
    aspect-ratio: 1;
    opacity: 0;
    transform: translate3d(-50%, -50%, 0) scale(0.01);
    transform-style: preserve-3d;
    transition: opacity 180ms ease;
}

.returning-fangxing-layer.is-scene-running .returning-fangxing-hud {
    animation: returning-fangxing-hud-reveal var(--returning-duration) cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.returning-fangxing-layer.is-scene-running .returning-fangxing-name {
    animation: returning-fangxing-name-reveal var(--returning-duration) cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.returning-fangxing-layer.is-scene-running .returning-fangxing-starburst {
    animation: returning-fangxing-starburst var(--returning-duration) cubic-bezier(0.65, 0, 0.2, 1) forwards;
}

.returning-fangxing-layer.is-scene-running .returning-fangxing-starburst-ray {
    animation: returning-fangxing-starburst-ray var(--returning-duration) ease-out forwards;
}

.returning-fangxing-layer.is-scene-running::after {
    animation: returning-fangxing-warp-wash var(--returning-duration) cubic-bezier(0.65, 0, 0.2, 1) forwards;
}

.returning-fangxing-layer.is-scene-running:not(.is-webgl-ready) .returning-fangxing-fallback-globe {
    animation: returning-fangxing-fallback-approach var(--returning-duration) cubic-bezier(0.18, 0.76, 0.18, 1) forwards;
}

.returning-fangxing-layer.is-webgl-ready .returning-fangxing-fallback-globe {
    animation: none;
    opacity: 0;
}

.returning-fangxing-fallback-sphere {
    position: absolute;
    inset: 17%;
    border: 1px solid rgba(143, 229, 231, 0.76);
    border-radius: 50%;
    background:
        radial-gradient(circle at 34% 28%, rgba(192, 255, 247, 0.5), transparent 11%),
        radial-gradient(circle at 58% 64%, rgba(101, 224, 178, 0.24), transparent 32%),
        #0b5262;
    box-shadow:
        inset -34px -24px 58px rgba(1, 11, 18, 0.72),
        0 0 38px rgba(104, 204, 245, 0.28);
}

.returning-fangxing-fallback-ring {
    position: absolute;
    border: 1px solid rgba(104, 204, 245, 0.68);
    border-radius: 50%;
    transform-style: preserve-3d;
}

.returning-ring-a {
    inset: 29% 1%;
    transform: rotate(16deg);
}

.returning-ring-b {
    inset: 3% 31%;
    border-color: rgba(101, 224, 178, 0.72);
    transform: rotate(-24deg);
}

.returning-ring-c {
    inset: 13% 12%;
    border-color: rgba(224, 250, 250, 0.42);
    transform: rotate(68deg);
}

.returning-fangxing-active .auth-stage,
.returning-fangxing-active .auth-bg-wave {
    pointer-events: none;
    animation: returning-auth-dissolve 180ms ease-out forwards;
}

@keyframes returning-fangxing-canvas-in {
    to { opacity: 1; }
}

@keyframes returning-auth-dissolve {
    to { opacity: 0; }
}

@keyframes returning-fangxing-name-reveal {
    0%, 35% { opacity: 0; transform: scale(0.94); }
    39%, 67% { opacity: 1; transform: scale(1); }
    72%, 100% { opacity: 0; transform: scale(0.96); }
}

@keyframes returning-fangxing-hud-reveal {
    0%, 8% { opacity: 0; transform: translate3d(-50%, -12px, 0); }
    24%, 66% { opacity: 1; transform: translate3d(-50%, 0, 0); }
    73%, 100% { opacity: 0; transform: translate3d(-50%, -4px, 0); }
}

@keyframes returning-fangxing-starburst {
    0%, 66.8% {
        opacity: 0;
        filter: brightness(0.82);
        transform: translate3d(-50%, -50%, 0) scale(0.08);
    }
    69.5% {
        opacity: 0.82;
        filter: brightness(1.08);
        transform: translate3d(-50%, -50%, 0) scale(0.38);
    }
    76% {
        opacity: 1;
        filter: brightness(1.34);
        transform: translate3d(-50%, -50%, 0) scale(1);
    }
    81% {
        opacity: 0.92;
        filter: brightness(1.18);
        transform: translate3d(-50%, -50%, 0) scale(1.22);
    }
    100% {
        opacity: 1;
        filter: brightness(1.5);
        transform: translate3d(-50%, -50%, 0) scale(20);
    }
}

@keyframes returning-fangxing-starburst-ray {
    0%, 67% { opacity: 0; }
    70.5%, 80% { opacity: var(--ray-opacity); }
    86%, 100% { opacity: 0; }
}

@keyframes returning-fangxing-warp-wash {
    0%, 92% { opacity: 0; transform: scale(0.72); }
    97% { opacity: 0.38; transform: scale(1); }
    100% { opacity: 1; transform: scale(1.18); }
}

@keyframes returning-fangxing-hud-scan {
    0% { opacity: 0; transform: scaleX(0); }
    34%, 72% { opacity: 1; transform: scaleX(1); }
    100% { opacity: 0; transform: scaleX(0.22); }
}

@keyframes returning-fangxing-fallback-approach {
    0%, 14% { opacity: 0.2; transform: translate3d(-50%, -50%, 0) scale(0.01); }
    40% { opacity: 0.76; transform: translate3d(-50%, -50%, 0) scale(0.14); }
    62%, 80% { opacity: 1; transform: translate3d(-50%, -50%, 0) scale(1); }
    100% { opacity: 0; transform: translate3d(-50%, -50%, 0) scale(8); }
}

.returning-fangxing-reduced.is-scene-running .returning-fangxing-name {
    animation: returning-fangxing-name-reduced 900ms ease-out forwards;
}

.returning-fangxing-reduced.is-scene-running .returning-fangxing-hud {
    animation: returning-fangxing-hud-reduced 900ms ease-out forwards;
}

.returning-fangxing-reduced.is-scene-running .returning-fangxing-fallback-globe {
    animation: returning-fangxing-globe-reduced 900ms ease-out forwards;
}

.returning-fangxing-reduced.is-scene-running .returning-fangxing-starburst {
    animation: none;
    opacity: 0;
}

.returning-fangxing-reduced.is-scene-running .returning-fangxing-starburst-ray {
    animation: none;
}

.returning-fangxing-reduced.is-scene-running::after {
    animation: returning-fangxing-warp-wash-reduced 900ms ease-out forwards;
}

@keyframes returning-fangxing-name-reduced {
    0%, 12% { opacity: 0; transform: none; }
    28%, 76% { opacity: 1; transform: none; }
    100% { opacity: 0; transform: none; }
}

@keyframes returning-fangxing-globe-reduced {
    0% { opacity: 0; transform: translate3d(-50%, -50%, 0) scale(0.72); }
    28%, 76% { opacity: 0.72; transform: translate3d(-50%, -50%, 0) scale(0.82); }
    100% { opacity: 0; transform: translate3d(-50%, -50%, 0) scale(0.86); }
}

@keyframes returning-fangxing-hud-reduced {
    0%, 12% { opacity: 0; transform: translate3d(-50%, 0, 0); }
    28%, 76% { opacity: 1; transform: translate3d(-50%, 0, 0); }
    100% { opacity: 0; transform: translate3d(-50%, 0, 0); }
}

@keyframes returning-fangxing-warp-wash-reduced {
    0%, 78% { opacity: 0; transform: none; }
    100% { opacity: 0.92; transform: none; }
}

@media (max-width: 760px) {
    .returning-fangxing-name {
        max-width: 84vw;
        padding: 7px 42px 10px;
    }

    .returning-fangxing-name strong {
        font-size: 44px;
    }

}

@media (max-width: 620px) {
    .returning-fangxing-name {
        max-width: calc(100vw - 24px);
        padding: 6px 32px 9px;
    }

    .returning-fangxing-hud {
        top: max(18px, env(safe-area-inset-top));
        min-width: 86vw;
    }

    .returning-fangxing-hud::before,
    .returning-fangxing-hud::after {
        width: 58px;
    }

    .returning-fangxing-name::before,
    .returning-fangxing-name::after {
        width: 24px;
    }

    .returning-fangxing-name strong {
        font-size: 34px;
    }

    .returning-fangxing-name-marker {
        width: 40px;
        margin-top: 7px;
    }
}

@media (max-width: 380px) {
    .returning-fangxing-name {
        max-width: calc(100vw - 20px);
        padding-right: 26px;
        padding-left: 26px;
    }

    .returning-fangxing-name::before,
    .returning-fangxing-name::after {
        width: 19px;
    }

    .returning-fangxing-name strong {
        font-size: 30px;
    }
}

/* Authenticated surfaces collapse into a distant star before logout completes. */
body.logout-transition-active {
    color-scheme: dark;
    background: #03070b !important;
}

body.logout-transition-active::before,
body.logout-transition-active::after {
    opacity: 0 !important;
}

.logout-transition-layer {
    --logout-transition-duration: 1250ms;
    position: fixed;
    inset: 0;
    z-index: 90;
    overflow: hidden;
    pointer-events: auto;
    isolation: isolate;
    background: rgba(3, 7, 11, 0);
}

.logout-transition-layer::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 0;
    width: min(68vmin, 660px);
    aspect-ratio: 1;
    border: 1px solid rgba(104, 204, 245, 0.34);
    border-top-color: rgba(101, 224, 178, 0.54);
    border-radius: 50%;
    opacity: 0;
    transform: translate3d(-50%, -50%, 0) scale(1.4);
}

.logout-transition-layer.is-running {
    animation: logout-transition-darken var(--logout-transition-duration) cubic-bezier(0.65, 0, 0.2, 1) forwards;
}

.logout-transition-layer.is-running::before {
    animation: logout-transition-ring var(--logout-transition-duration) cubic-bezier(0.65, 0, 0.2, 1) forwards;
}

.logout-collapse-canvas {
    position: absolute;
    inset: 0;
    z-index: 1;
    display: block;
    width: 100%;
    height: 100%;
}

.logout-collapse-core {
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 2;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    opacity: 0;
    background: radial-gradient(circle, #ffffff 0 16%, #b9fff0 20%, #68ccf5 48%, rgba(101, 224, 178, 0.16) 72%, transparent 76%);
    box-shadow:
        0 0 12px rgba(236, 255, 255, 0.9),
        0 0 28px rgba(104, 204, 245, 0.66),
        0 0 46px rgba(101, 224, 178, 0.42);
    transform: translate3d(-50%, -50%, 0) scale(0.2);
}

.logout-collapse-core::before,
.logout-collapse-core::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    background: linear-gradient(90deg, transparent, rgba(232, 255, 253, 0.92), transparent);
    transform: translate3d(-50%, -50%, 0);
}

.logout-collapse-core::before {
    width: 138px;
    height: 1px;
}

.logout-collapse-core::after {
    width: 96px;
    height: 1px;
    transform: translate3d(-50%, -50%, 0) rotate(90deg);
}

.logout-transition-layer.is-running .logout-collapse-core {
    animation: logout-transition-core var(--logout-transition-duration) cubic-bezier(0.65, 0, 0.2, 1) forwards;
}

.logout-transition-active .is-logging-out {
    pointer-events: none;
    transform-origin: center;
    animation: logout-surface-collapse 1250ms cubic-bezier(0.65, 0, 0.2, 1) forwards;
}

@keyframes logout-surface-collapse {
    0%, 10% {
        opacity: 1;
        filter: blur(0);
        clip-path: circle(150% at 50% 50%);
        transform: scale(1);
    }
    72% {
        opacity: 0.38;
        filter: blur(1px);
        clip-path: circle(54% at 50% 50%);
        transform: scale(0.93);
    }
    100% {
        opacity: 0;
        filter: blur(7px);
        clip-path: circle(0 at 50% 50%);
        transform: scale(0.8);
    }
}

@keyframes logout-transition-darken {
    0%, 12% { background: rgba(3, 7, 11, 0); }
    72% { background: rgba(3, 7, 11, 0.58); }
    100% { background: #03070b; }
}

@keyframes logout-transition-ring {
    0%, 18% { opacity: 0; transform: translate3d(-50%, -50%, 0) scale(1.4); }
    42% { opacity: 0.54; }
    82% { opacity: 0.36; transform: translate3d(-50%, -50%, 0) scale(0.34); }
    100% { opacity: 0; transform: translate3d(-50%, -50%, 0) scale(0.03); }
}

@keyframes logout-transition-core {
    0%, 48% { opacity: 0; transform: translate3d(-50%, -50%, 0) scale(0.2); }
    68% { opacity: 0.72; transform: translate3d(-50%, -50%, 0) scale(0.62); }
    82% { opacity: 1; transform: translate3d(-50%, -50%, 0) scale(1.15); }
    93% { opacity: 0.88; transform: translate3d(-50%, -50%, 0) scale(2.5); }
    100% { opacity: 0.12; transform: translate3d(-50%, -50%, 0) scale(0.16); }
}

html.logout-arrival-cover {
    overflow: hidden;
}

html.logout-arrival-cover::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: 2147483000;
    pointer-events: none;
    opacity: 1;
    background: #03070b;
}

html.logout-arrival-cover.logout-arrival-reveal::before {
    animation: logout-arrival-unveil 560ms cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

body.logout-arrival-content > .auth-shell {
    opacity: 0;
}

html.logout-arrival-reveal body.logout-arrival-content > .auth-shell {
    animation: logout-arrival-content 460ms ease-out 60ms forwards;
}

@keyframes logout-arrival-unveil {
    0% { opacity: 1; }
    100% { opacity: 0; }
}

@keyframes logout-arrival-content {
    0% { opacity: 0; }
    100% { opacity: 1; }
}

.logout-transition-reduced::before,
.logout-transition-reduced .logout-collapse-core,
.logout-transition-reduced .logout-collapse-canvas {
    display: none;
}

.logout-transition-reduced.is-running {
    animation: logout-transition-reduced 260ms ease-out forwards;
}

.logout-transition-reduced-active .is-logging-out {
    animation: logout-surface-reduced 260ms ease-out forwards;
}

.logout-transition-layer.logout-transition-optimized {
    background: rgba(3, 7, 11, 0);
}

.logout-transition-layer.logout-transition-optimized::after {
    content: "";
    position: absolute;
    inset: -18%;
    z-index: 0;
    opacity: 0;
    pointer-events: none;
    background:
        radial-gradient(circle at 50% 50%, rgba(185, 255, 240, 0.24), transparent 0 7%, rgba(104, 204, 245, 0.12) 8%, transparent 21%),
        conic-gradient(from 20deg at 50% 50%, transparent 0 8%, rgba(104, 204, 245, 0.24) 10%, transparent 13% 28%, rgba(101, 224, 178, 0.18) 30%, transparent 34% 100%);
    transform: scale(1.18) rotate(0deg);
    filter: blur(0.2px);
    mix-blend-mode: screen;
}

.logout-transition-layer.logout-transition-optimized::before {
    width: min(72vmin, 720px);
    border-color: rgba(104, 204, 245, 0.38);
    border-top-color: rgba(101, 224, 178, 0.62);
    box-shadow:
        0 0 26px rgba(104, 204, 245, 0.16),
        inset 0 0 24px rgba(101, 224, 178, 0.09);
}

.logout-transition-layer.logout-transition-optimized .logout-collapse-core {
    width: 18px;
    height: 18px;
    box-shadow:
        0 0 14px rgba(236, 255, 255, 0.92),
        0 0 34px rgba(104, 204, 245, 0.72),
        0 0 62px rgba(101, 224, 178, 0.42),
        0 0 110px rgba(104, 204, 245, 0.18);
}

.logout-transition-layer.logout-transition-optimized .logout-collapse-core::before {
    width: 190px;
}

.logout-transition-layer.logout-transition-optimized .logout-collapse-core::after {
    width: 132px;
}

.logout-transition-layer.logout-transition-optimized.is-running {
    animation: logout-transition-optimized-darken var(--logout-transition-duration, 1080ms) cubic-bezier(0.32, 0, 0.2, 1) forwards;
}

.logout-transition-layer.logout-transition-optimized.is-running::before {
    animation: logout-transition-optimized-ring var(--logout-transition-duration, 1080ms) cubic-bezier(0.32, 0, 0.2, 1) forwards;
}

.logout-transition-layer.logout-transition-optimized.is-running::after {
    animation: logout-transition-optimized-field var(--logout-transition-duration, 1080ms) cubic-bezier(0.32, 0, 0.2, 1) forwards;
}

.logout-transition-layer.logout-transition-optimized.is-running .logout-collapse-core {
    animation: logout-transition-optimized-core var(--logout-transition-duration, 1080ms) cubic-bezier(0.32, 0, 0.2, 1) forwards;
}

.logout-transition-active .is-logging-out {
    animation: logout-surface-optimized var(--logout-transition-duration, 1080ms) cubic-bezier(0.32, 0, 0.2, 1) forwards;
}

html.logout-arrival-cover.logout-arrival-reveal::before {
    animation-duration: 320ms;
}

html.logout-arrival-reveal body.logout-arrival-content > .auth-shell {
    animation-duration: 260ms;
    animation-delay: 30ms;
}

@keyframes logout-transition-optimized-darken {
    0%, 10% { background: rgba(3, 7, 11, 0); }
    68% { background: rgba(3, 7, 11, 0.48); }
    100% { background: #03070b; }
}

@keyframes logout-transition-optimized-ring {
    0%, 10% { opacity: 0; transform: translate3d(-50%, -50%, 0) scale(1.42) rotate(0deg); }
    34% { opacity: 0.64; transform: translate3d(-50%, -50%, 0) scale(1.06) rotate(68deg); }
    76% { opacity: 0.44; transform: translate3d(-50%, -50%, 0) scale(0.34) rotate(178deg); }
    100% { opacity: 0; transform: translate3d(-50%, -50%, 0) scale(0.04) rotate(224deg); }
}

@keyframes logout-transition-optimized-field {
    0%, 10% { opacity: 0; transform: scale(1.18) rotate(0deg); }
    32% { opacity: 0.5; }
    72% { opacity: 0.36; transform: scale(0.92) rotate(34deg); }
    100% { opacity: 0; transform: scale(0.48) rotate(56deg); }
}

@keyframes logout-transition-optimized-core {
    0%, 34% { opacity: 0; transform: translate3d(-50%, -50%, 0) scale(0.3) rotate(0deg); }
    58% { opacity: 0.72; transform: translate3d(-50%, -50%, 0) scale(0.86) rotate(30deg); }
    78% { opacity: 1; transform: translate3d(-50%, -50%, 0) scale(1.48) rotate(84deg); }
    91% { opacity: 0.92; transform: translate3d(-50%, -50%, 0) scale(2.75) rotate(128deg); }
    100% { opacity: 0.16; transform: translate3d(-50%, -50%, 0) scale(0.16) rotate(160deg); }
}

@keyframes logout-surface-optimized {
    0%, 8% {
        opacity: 1;
        filter: blur(0);
        clip-path: circle(150% at 50% 50%);
        transform: translate3d(0, 0, 0);
    }
    72% {
        opacity: 0.38;
        filter: blur(0.4px);
        clip-path: circle(62% at 50% 50%);
        transform: scale(0.97);
    }
    100% {
        opacity: 0;
        filter: blur(2px);
        clip-path: circle(0 at 50% 50%);
        transform: scale(0.92);
    }
}

@keyframes logout-transition-reduced {
    from { background: rgba(3, 7, 11, 0); }
    to { background: #03070b; }
}

@keyframes logout-surface-reduced {
    from { opacity: 1; }
    to { opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
    html.logout-arrival-cover.logout-arrival-reveal::before {
        animation-duration: 220ms;
    }

    html.logout-arrival-reveal body.logout-arrival-content > .auth-shell {
        animation-duration: 180ms;
        animation-delay: 0ms;
    }
}

/* The mobile auth scene is a viewport, not a vertically scrolling document. */
@media (max-width: 760px) {
    html:has(.auth-shell:not(.auth-shell-naming)),
    body:has(> .auth-shell:not(.auth-shell-naming)) {
        width: 100%;
        height: 100%;
        overflow: hidden;
        overscroll-behavior: none;
    }

    body:has(> .auth-shell:not(.auth-shell-naming)) {
        position: fixed;
        inset: 0;
    }

    body > .auth-shell:not(.auth-shell-naming) {
        width: 100%;
        height: 100dvh;
        min-height: 0;
        overflow: hidden;
        overscroll-behavior: none;
    }

    body > .auth-shell:not(.auth-shell-naming) .auth-stage {
        height: 100dvh;
        min-height: 0;
        display: flex;
        align-items: flex-start;
        overflow: hidden;
    }

    .auth-bg-wave {
        opacity: 0.64;
    }

    .auth-particle-field {
        opacity: 0.34;
    }

    html[data-theme="dark"] .auth-bg-wave {
        opacity: 0.56;
    }

    html[data-theme="dark"] .auth-particle-field {
        opacity: 0.42;
    }
}

@media (max-width: 760px) and (max-height: 650px) {
    body > .auth-shell:not(.auth-shell-naming) .auth-stage {
        padding-top: max(8px, env(safe-area-inset-top));
        padding-bottom: max(8px, env(safe-area-inset-bottom));
    }

    body > .auth-shell:not(.auth-shell-naming) .auth-entry {
        gap: 7px;
    }

    body > .auth-shell:not(.auth-shell-naming) .auth-visual {
        height: 74px;
        min-height: 74px;
    }

    body > .auth-shell:not(.auth-shell-naming) .auth-card {
        padding-block: 13px;
    }
}