/* ============================================================
   仙侠武侠 · 登录页（克制、水墨意境）
   ============================================================ */

:root {
    --wx-night: #1a2430;
    --wx-ink: #2a3340;
    --wx-ink-soft: #5a6470;
    --wx-mist: #d8dde3;
    --wx-gold: #b8944f;
    --wx-gold-light: #d4b978;
    --wx-paper: rgba(252, 248, 240, 0.82);
    --wx-paper-solid: #f8f4ec;
    --wx-paper-line: rgba(184, 148, 79, 0.4);
    --wx-font-title: 'Ma Shan Zheng', 'STKaiti', serif;
    --wx-font-body: 'Noto Serif SC', 'Songti SC', serif;
}

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

html, body.login-wx {
    height: 100%;
    font-family: var(--wx-font-body);
    color: var(--wx-ink);
    background: var(--wx-night);
    overflow: hidden;
}

/* ===================== 场景 ===================== */
.wx-scene {
    position: relative;
    width: 100%;
    height: 100vh;
    min-height: 560px;
    overflow: hidden;
}

.wx-bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 42% center;
    display: block;
    pointer-events: none;
    user-select: none;
}

.wx-overlay {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(100deg,
            rgba(26, 36, 48, 0.12) 0%,
            rgba(248, 244, 236, 0.04) 45%,
            rgba(252, 248, 240, 0.18) 72%,
            rgba(252, 248, 240, 0.28) 100%),
        linear-gradient(180deg,
            rgba(26, 36, 48, 0.15) 0%,
            transparent 30%,
            transparent 70%,
            rgba(26, 36, 48, 0.08) 100%);
    pointer-events: none;
}

.wx-mist {
    position: absolute;
    inset: 0;
    pointer-events: none;
    opacity: 0.2;
}

.wx-mist-a {
    background: radial-gradient(ellipse 70% 50% at 25% 75%, rgba(184, 148, 79, 0.08) 0%, transparent 70%);
    animation: wx-drift 20s ease-in-out infinite alternate;
}

.wx-mist-b {
    background: radial-gradient(ellipse 55% 40% at 78% 55%, rgba(252, 248, 240, 0.35) 0%, transparent 65%);
    animation: wx-drift 26s ease-in-out infinite alternate-reverse;
}

@keyframes wx-drift {
    from { transform: translateX(-2%) translateY(0); opacity: 0.25; }
    to   { transform: translateX(2%) translateY(-1%); opacity: 0.4; }
}

/* ===================== 御剑飞行（水墨风） ===================== */
.wx-flyer-sprite {
    position: absolute;
    width: 0;
    height: 0;
    overflow: hidden;
    pointer-events: none;
}

.wx-flyers {
    position: absolute;
    inset: 0;
    z-index: 4;
    pointer-events: none;
    overflow: hidden;
    opacity: 0.92;
}

.wx-flyer {
    --fly-blade: #c8bcaa;
    --fly-figure: #9aa4ac;
    color: var(--fly-blade);
    position: absolute;
    left: 0;
    top: 0;
    opacity: 0;
    will-change: transform, opacity;
    transform-origin: 14% 56%;
    filter: drop-shadow(0 0 10px rgba(200, 208, 216, 0.45)) blur(0.35px);
}

.wx-flyer--tone-gold {
    --fly-blade: #c8bcaa;
}

.wx-flyer--tone-jade {
    --fly-blade: #a8b8b0;
}

.wx-flyer--tone-crimson {
    --fly-blade: #b8a4a0;
}

.wx-flyer--tone-violet {
    --fly-blade: #b0aab8;
}

.wx-flyer--tone-frost {
    --fly-blade: #a8b4bc;
}

.wx-flyer--face-left .wx-flyer-svg {
    transform: scaleX(-1);
}

.wx-flyer-svg {
    display: block;
    width: 72px;
    height: auto;
    overflow: visible;
}

.wx-flyer--sm .wx-flyer-svg { width: 64px; }
.wx-flyer--md .wx-flyer-svg { width: 80px; }
.wx-flyer--lg .wx-flyer-svg { width: 96px; }
.wx-flyer--xl .wx-flyer-svg { width: 112px; }

.wx-flyer-svg .wx-sword-body,
.wx-flyer-svg .wx-sword-tip,
.wx-flyer-svg .wx-sword-crossguard,
.wx-flyer-svg .wx-sword-hilt {
    fill: currentColor;
    opacity: 0.52;
}

.wx-flyer-svg .wx-sword-tassel,
.wx-flyer-svg .wx-sword-hilt-ring {
    stroke: currentColor;
    opacity: 0.4;
}

.wx-flyer-svg .wx-figure {
    fill: var(--fly-figure);
    opacity: 0.58;
}

.wx-flyer-svg .wx-robe-body {
    fill: var(--fly-figure);
    opacity: 0.58;
}

.wx-flyer-svg .wx-figure path[fill="none"],
.wx-flyer-svg .wx-robe-wind,
.wx-flyer-svg .wx-sleeve-wind {
    stroke: var(--fly-figure);
    opacity: 0.42;
}

.wx-flyer--rider {
    filter: drop-shadow(0 0 12px rgba(200, 208, 216, 0.5)) blur(0.4px);
}

.wx-flyer--rider .wx-flyer-svg {
    width: 104px;
}

.wx-flyer--rider.wx-flyer--sm .wx-flyer-svg { width: 92px; }
.wx-flyer--rider.wx-flyer--md .wx-flyer-svg { width: 112px; }
.wx-flyer--rider.wx-flyer--lg .wx-flyer-svg { width: 132px; }
.wx-flyer--rider.wx-flyer--xl .wx-flyer-svg { width: 152px; }

.wx-flyer-svg .wx-robe-wind,
.wx-flyer-svg .wx-sleeve-wind {
    transform-box: fill-box;
    transform-origin: right center;
    animation: wx-robe-sway 3.2s ease-in-out infinite alternate;
}

.wx-flyer-svg .wx-robe-wind--b { animation-delay: 0.5s; }
.wx-flyer-svg .wx-robe-wind--c { animation-delay: 1s; }
.wx-flyer-svg .wx-sleeve-wind--r { animation-delay: 0.35s; }

@keyframes wx-robe-sway {
    from { transform: rotate(0deg); }
    to   { transform: rotate(-4deg); }
}

.wx-flyer-1 { animation: wx-fly-path-1 15s linear infinite; }
.wx-flyer-2 { animation: wx-fly-path-2 11s linear infinite; animation-delay: 1s; }
.wx-flyer-3 { animation: wx-fly-path-3 17s linear infinite; animation-delay: 4s; }
.wx-flyer-4 { animation: wx-fly-path-4 10s linear infinite; animation-delay: 2.5s; }
.wx-flyer-5 { animation: wx-fly-path-5 18s linear infinite; animation-delay: 6s; }
.wx-flyer-6 { animation: wx-fly-path-6 13s linear infinite; animation-delay: 8s; }
.wx-flyer-7 { animation: wx-fly-path-7 12s linear infinite; animation-delay: 4.5s; }
.wx-flyer-8 { animation: wx-fly-path-8 16s linear infinite; animation-delay: 2s; }
.wx-flyer-9 { animation: wx-fly-path-9 10s linear infinite; animation-delay: 11s; }
.wx-flyer-10 { animation: wx-fly-path-10 18s linear infinite; animation-delay: 7s; }

.wx-flyer-2,
.wx-flyer-4,
.wx-flyer-9 { filter: drop-shadow(0 0 8px rgba(200, 208, 216, 0.35)) blur(0.3px); }

@keyframes wx-fly-path-1 {
    0%   { transform: translate(-8vw, 74vh) rotate(-38deg); opacity: 0; }
    5%   { opacity: 0.42; }
    90%  { opacity: 0.34; }
    100% { transform: translate(58vw, 14vh) rotate(-42deg); opacity: 0; }
}

@keyframes wx-fly-path-2 {
    0%   { transform: translate(70vw, 22vh) rotate(-18deg); opacity: 0; }
    4%   { opacity: 0.36; }
    92%  { opacity: 0.28; }
    100% { transform: translate(-6vw, 48vh) rotate(-22deg); opacity: 0; }
}

@keyframes wx-fly-path-3 {
    0%   { transform: translate(65vw, 55vh) rotate(-32deg); opacity: 0; }
    6%   { opacity: 0.4; }
    91%  { opacity: 0.32; }
    100% { transform: translate(-5vw, 8vh) rotate(-36deg); opacity: 0; }
}

@keyframes wx-fly-path-4 {
    0%   { transform: translate(-4vw, 28vh) rotate(-18deg); opacity: 0; }
    5%   { opacity: 0.32; }
    93%  { opacity: 0.26; }
    100% { transform: translate(52vw, 8vh) rotate(-22deg); opacity: 0; }
}

@keyframes wx-fly-path-5 {
    0%   { transform: translate(10vw, 82vh) rotate(-40deg); opacity: 0; }
    5%   { opacity: 0.44; }
    92%  { opacity: 0.36; }
    100% { transform: translate(50vw, 24vh) rotate(-44deg); opacity: 0; }
}

@keyframes wx-fly-path-6 {
    0%   { transform: translate(62vw, 62vh) rotate(-28deg); opacity: 0; }
    5%   { opacity: 0.4; }
    94%  { opacity: 0.32; }
    100% { transform: translate(6vw, 30vh) rotate(-32deg); opacity: 0; }
}

@keyframes wx-fly-path-7 {
    0%   { transform: translate(-5vw, 58vh) rotate(-26deg); opacity: 0; }
    4%   { opacity: 0.34; }
    95%  { opacity: 0.28; }
    100% { transform: translate(60vw, 20vh) rotate(-30deg); opacity: 0; }
}

@keyframes wx-fly-path-8 {
    0%   { transform: translate(8vw, 68vh) rotate(-36deg); opacity: 0; }
    6%   { opacity: 0.4; }
    90%  { opacity: 0.32; }
    100% { transform: translate(55vw, 16vh) rotate(-40deg); opacity: 0; }
}

@keyframes wx-fly-path-9 {
    0%   { transform: translate(72vw, 40vh) rotate(-30deg); opacity: 0; }
    5%   { opacity: 0.3; }
    93%  { opacity: 0.24; }
    100% { transform: translate(-4vw, 20vh) rotate(-34deg); opacity: 0; }
}

@keyframes wx-fly-path-10 {
    0%   { transform: translate(-6vw, 44vh) rotate(-22deg); opacity: 0; }
    5%   { opacity: 0.42; }
    91%  { opacity: 0.34; }
    100% { transform: translate(64vw, 10vh) rotate(-26deg); opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
    .wx-flyer {
        animation: none !important;
    }
    .wx-flyer-svg .wx-robe-wind,
    .wx-flyer-svg .wx-sleeve-wind {
        animation: none !important;
    }
    .wx-flyers {
        display: none;
    }
}

/* ===================== 登录面板 ===================== */
.wx-main {
    position: relative;
    z-index: 10;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding: 32px 8% 32px 42%;
}

.wx-panel {
    position: relative;
    width: 100%;
    max-width: 400px;
    padding: 36px 38px 28px;
    background: var(--wx-paper);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(184, 148, 79, 0.22);
    box-shadow:
        0 12px 40px rgba(42, 51, 64, 0.12),
        0 1px 0 rgba(255, 255, 255, 0.7) inset;
    animation: wx-panel-in 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}

.wx-panel-line {
    position: absolute;
    top: 0;
    left: 0;
    width: 3px;
    height: 100%;
    background: linear-gradient(180deg, var(--wx-gold-light), var(--wx-gold), rgba(184, 148, 79, 0.2));
}

@keyframes wx-panel-in {
    from { opacity: 0; transform: translateY(16px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ---- 头部 ---- */
.wx-head {
    margin-bottom: 28px;
    padding-left: 4px;
}

.wx-eyebrow {
    font-size: calc(12px * var(--wx-font-scale, 1.5));
    font-weight: 600;
    letter-spacing: 4px;
    color: var(--wx-gold);
    margin-bottom: 10px;
}

.wx-site {
    font-family: var(--wx-font-title);
    font-size: calc(36px * var(--wx-font-scale, 1.5));
    font-weight: 400;
    letter-spacing: 4px;
    line-height: 1.2;
    color: var(--wx-ink);
    margin-bottom: 6px;
}

.wx-subtitle {
    font-size: calc(13px * var(--wx-font-scale, 1.5));
    color: var(--wx-ink-soft);
    letter-spacing: 1px;
}

.wx-desc {
    margin-top: 8px;
    font-size: calc(12px * var(--wx-font-scale, 1.5));
    color: var(--wx-ink-soft);
    line-height: 1.7;
    opacity: 0.85;
}

/* ---- 表单 ---- */
.wx-field {
    margin-bottom: 18px;
}

.wx-field label {
    display: block;
    font-size: calc(12px * var(--wx-font-scale, 1.5));
    font-weight: 500;
    color: var(--wx-ink-soft);
    letter-spacing: 1px;
    margin-bottom: 8px;
}

.wx-input {
    border-bottom: 1px solid rgba(30, 38, 48, 0.18);
    transition: border-color 0.25s;
}

.wx-input:focus-within {
    border-bottom-color: var(--wx-gold);
}

.wx-input input {
    width: 100%;
    height: 40px;
    border: none;
    background: transparent;
    font-family: var(--wx-font-body);
    font-size: calc(14px * var(--wx-font-scale, 1.5));
    color: var(--wx-ink);
    outline: none;
    padding: 0 2px;
}

.wx-input input::placeholder {
    color: rgba(61, 74, 88, 0.4);
}

.wx-verify {
    display: flex;
    gap: 10px;
    align-items: flex-end;
}

.wx-input-grow { flex: 1; }

.wx-captcha {
    flex-shrink: 0;
    width: 108px;
    height: 40px;
    padding: 0;
    border: 1px solid var(--wx-paper-line);
    background: rgba(255, 255, 255, 0.5);
    cursor: pointer;
    overflow: hidden;
    transition: border-color 0.2s;
}

.wx-captcha:hover {
    border-color: var(--wx-gold);
}

.wx-captcha img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.wx-btn {
    display: block;
    width: 100%;
    height: 44px;
    margin-top: 28px;
    border: 1px solid var(--wx-gold);
    cursor: pointer;
    background: linear-gradient(180deg, #3a4a58 0%, var(--wx-ink) 100%);
    transition: transform 0.2s, box-shadow 0.2s, border-color 0.2s;
}

.wx-btn:hover {
    transform: translateY(-1px);
    border-color: var(--wx-gold-light);
    box-shadow: 0 8px 20px rgba(42, 51, 64, 0.18);
}

.wx-btn:active { transform: translateY(0); }

.wx-btn-text {
    font-family: var(--wx-font-body);
    font-size: calc(15px * var(--wx-font-scale, 1.5));
    font-weight: 600;
    color: #f0ebe3;
    letter-spacing: 6px;
    text-indent: 6px;
}

.wx-msg {
    min-height: 20px;
    margin-top: 12px;
    text-align: center;
    font-size: calc(12px * var(--wx-font-scale, 1.5));
    color: #b54a4a;
}

.wx-msg.is-ok { color: #3d6b5a; }

.wx-foot {
    text-align: center;
    font-size: calc(11px * var(--wx-font-scale, 1.5));
    color: var(--wx-ink-soft);
    letter-spacing: 1px;
    opacity: 0.45;
    margin-top: 20px;
}

/* ---- 响应式 ---- */
@media (max-width: 992px) {
    .wx-main {
        padding-left: 28%;
        padding-right: 6%;
    }
}

@media (max-width: 768px) {
    .wx-main {
        justify-content: center;
        padding: 20px 16px;
        align-items: flex-end;
        padding-bottom: 24px;
    }

    .wx-panel {
        max-width: 100%;
        padding: 28px 24px 22px;
    }

    .wx-site { font-size: calc(30px * var(--wx-font-scale, 1.5)); }

    .wx-flyer--xl .wx-flyer-svg { width: 80px; }
    .wx-flyer--lg .wx-flyer-svg { width: 68px; }
    .wx-flyer--md .wx-flyer-svg { width: 58px; }
    .wx-flyer--sm .wx-flyer-svg { width: 48px; }
    .wx-flyer--rider.wx-flyer--xl .wx-flyer-svg { width: 112px; }
    .wx-flyer--rider.wx-flyer--lg .wx-flyer-svg { width: 98px; }
    .wx-flyer--rider.wx-flyer--md .wx-flyer-svg { width: 84px; }
    .wx-flyer--rider.wx-flyer--sm .wx-flyer-svg { width: 72px; }
}

@media (max-width: 480px) {
    .wx-verify { flex-direction: column; align-items: stretch; }
    .wx-captcha { width: 100%; }
}