/* ============================================
   帝国史诗 v2.0 — 组件级视觉升级
   ============================================ */

/* ---- 玻璃卡片菲涅尔效应 + 微肌理 ---- */
.glass-card,
.page-box,
.dashboard-stat-card,
.feature-card {
    position: relative;
    isolation: isolate;
}

.glass-card::before,
.page-box::before,
.dashboard-stat-card::before,
.feature-card::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: radial-gradient(
        ellipse at 30% 20%,
        oklch(100% 0 0 / 0.08) 0%,
        transparent 60%
    );
    pointer-events: none;
    z-index: 1;
}

.glass-card::after,
.page-box::after,
.dashboard-stat-card::after,
.feature-card::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background-image:
        radial-gradient(
            circle at 20% 30%,
            oklch(100% 0 0 / 0.03) 0%,
            transparent 50%
        ),
        repeating-linear-gradient(
            45deg,
            transparent 0px,
            transparent 2px,
            oklch(100% 0 0 / 0.01) 2px,
            oklch(100% 0 0 / 0.01) 3px
        );
    pointer-events: none;
    z-index: 1;
}

/* 卡片内容层级 */
.glass-card > *,
.page-box > *,
.dashboard-stat-card > *,
.feature-card > * {
    position: relative;
    z-index: 2;
}

/* ---- Hero 标题金属对冲渐变 + 流光 ---- */
.hero-title,
.hero-galaxy h1,
.hero-container h1 {
    background: linear-gradient(
        135deg,
        var(--gold-200) 0%,
        var(--gold-400) 25%,
        var(--gold-500) 45%,
        var(--purple-300) 70%,
        var(--purple-400) 100%
    );
    background-size: 200% 200%;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    animation: metallic-flow 8s ease-in-out infinite alternate;
    filter: drop-shadow(0 20px 60px oklch(78.5% 0.25 var(--hue-gold) / 0.2));
}

@keyframes metallic-flow {
    0% { background-position: 0% 50%; }
    100% { background-position: 100% 50%; }
}

/* Hero 紫色环境光 */
.hero-galaxy::before,
.hero-container::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(
        circle at 70% 30%,
        oklch(50% 0.20 var(--hue-purple) / 0.20) 0%,
        oklch(30% 0.10 var(--hue-purple) / 0.05) 50%,
        transparent 80%
    );
    pointer-events: none;
    z-index: 0;
}

/* ---- 金色按钮流光扫过 ---- */
.btn-primary,
.btn-gold,
button[type="submit"],
.page-btn.btn-primary {
    position: relative;
    overflow: hidden;
    transition: all 0.25s var(--ease-spring);
}

.btn-primary::before,
.btn-gold::before,
button[type="submit"]::before,
.page-btn.btn-primary::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: linear-gradient(
        45deg,
        transparent 30%,
        oklch(100% 0 0 / 0.15) 50%,
        transparent 70%
    );
    transform: translateX(-100%);
    transition: transform 0.6s ease;
    pointer-events: none;
}

.btn-primary:hover::before,
.btn-gold:hover::before,
button[type="submit"]:hover::before,
.page-btn.btn-primary:hover::before {
    transform: translateX(100%);
}

.btn-primary:hover,
.btn-gold:hover,
.page-btn.btn-primary:hover {
    transform: translateY(-2px) scale(1.02);
    box-shadow: 0 0 40px 10px oklch(85% 0.25 var(--hue-gold) / 0.3);
}

.btn-primary:active,
.btn-gold:active,
.page-btn.btn-primary:active {
    transform: translateY(0px) scale(0.97);
}

/* ---- 数据卡片（红橙/冰蓝/金 三色系） ---- */
.stat-value-critical {
    font-family: var(--font-display);
    font-weight: 700;
    color: var(--color-red-orange);
    text-shadow: 0 0 30px oklch(62% 0.22 25 / 0.3);
    letter-spacing: -0.02em;
}

.stat-value-magic {
    font-family: var(--font-display);
    font-weight: 700;
    color: var(--color-ice-blue);
    text-shadow: 0 0 30px oklch(75% 0.15 230 / 0.3);
    letter-spacing: -0.02em;
}

.stat-value-gold {
    font-family: var(--font-display);
    font-weight: 700;
    background: linear-gradient(135deg, var(--gold-300), var(--gold-500));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    letter-spacing: -0.02em;
}

/* ---- 金色脉冲辉光 ---- */
@keyframes pulse-glow {
    0% {
        box-shadow: 0 0 30px 5px oklch(78.5% 0.208 var(--hue-gold) / 0.2);
    }
    50% {
        box-shadow: 0 0 60px 25px oklch(85% 0.25 var(--hue-gold) / 0.4);
    }
    100% {
        box-shadow: 0 0 30px 5px oklch(78.5% 0.208 var(--hue-gold) / 0.2);
    }
}

.pulse-gold {
    animation: pulse-glow 3s ease-in-out infinite;
}

/* ---- 丝绸流光质感 ---- */
@keyframes fluid-shimmer {
    0% { background-position: -200% center; }
    100% { background-position: 200% center; }
}

.silk-shimmer {
    background: linear-gradient(
        90deg,
        transparent 0%,
        oklch(100% 0 0 / 0.03) 25%,
        oklch(100% 0 0 / 0.08) 50%,
        oklch(100% 0 0 / 0.03) 75%,
        transparent 100%
    );
    background-size: 200% 100%;
    animation: fluid-shimmer 8s linear infinite;
}

/* ---- Logo 金色描边光晕增强 ---- */
.logo {
    filter: drop-shadow(0 0 12px oklch(78.5% 0.208 var(--hue-gold) / 0.4))
            drop-shadow(0 0 24px oklch(78.5% 0.208 var(--hue-gold) / 0.2));
    transition: filter 0.3s ease;
}

.logo:hover {
    filter: drop-shadow(0 0 16px oklch(85% 0.25 var(--hue-gold) / 0.6))
            drop-shadow(0 0 32px oklch(85% 0.25 var(--hue-gold) / 0.3));
}

/* ---- 导航链接下划线增强 ---- */
.navbar a.nav-link::after {
    box-shadow: 0 0 10px oklch(78.5% 0.208 var(--hue-gold) / 0.5);
}

/* ---- 页脚分隔线脉冲 ---- */
.footer-divider {
    height: 1px;
    background: linear-gradient(
        90deg,
        transparent,
        oklch(78.5% 0.208 var(--hue-gold) / 0.3),
        transparent
    );
    position: relative;
    overflow: hidden;
}

.footer-divider::after {
    content: '';
    position: absolute;
    top: 0;
    left: -30%;
    width: 30%;
    height: 100%;
    background: linear-gradient(
        90deg,
        transparent,
        oklch(78.5% 0.208 var(--hue-gold) / 0.8),
        transparent
    );
    animation: divider-pulse 4s ease-in-out infinite;
}

@keyframes divider-pulse {
    0% { left: -30%; }
    50% { left: 100%; }
    100% { left: 100%; }
}

/* ---- 特色卡片悬停金色辉光 ---- */
.feature-card:hover {
    border-color: var(--gold-400);
    box-shadow:
        0 0 40px 10px oklch(85% 0.25 var(--hue-gold) / 0.2),
        0 24px 80px oklch(0% 0 0 / 0.3);
}

/* ---- 滚动条金色美化增强 ---- */
::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, var(--gold-400), var(--gold-600));
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(180deg, var(--gold-300), var(--gold-500));
    box-shadow: 0 0 10px oklch(78.5% 0.208 var(--hue-gold) / 0.4);
}

/* ---- 选中文本金色 ---- */
::selection {
    background: oklch(78.5% 0.208 var(--hue-gold) / 0.3);
    color: var(--text-headline);
}

/* ---- 聚焦环统一 ---- */
*:focus-visible {
    outline: 2px solid var(--state-focus-ring);
    outline-offset: 2px;
    border-radius: 4px;
}

/* ---- 亮模式支持 ---- */
.light-mode {
    --bg-app: var(--neutral-50);
    --bg-surface-1: var(--neutral-100);
    --bg-surface-2: var(--neutral-200);
    --bg-surface-3: oklch(88% 0.02 var(--hue-purple));

    --text-headline: var(--neutral-950);
    --text-body: var(--neutral-800);
    --text-subtle: var(--neutral-500);
    --text-on-gold: var(--neutral-50);

    --bg-glass-default: oklch(98% 0.02 var(--hue-gold) / 0.55);
    --bg-glass-hover: oklch(100% 0 0 / 0.75);
    --bg-glass-border: oklch(80% 0.04 var(--hue-gold) / 0.20);

    --gold: oklch(72% 0.15 var(--hue-gold));
    --gold-400: oklch(70% 0.14 var(--hue-gold));
    --gold-light: oklch(82% 0.12 var(--hue-gold));

    --btn-gold-bg: oklch(72% 0.15 var(--hue-gold));
    --btn-gold-hover: oklch(78% 0.16 var(--hue-gold));
    --btn-gold-active: oklch(65% 0.18 var(--hue-gold));
    --btn-gold-text: var(--neutral-50);

    --input-bg: oklch(96% 0.01 var(--neutral-hue));
    --input-border: oklch(80% 0.02 var(--neutral-hue));

    --shadow-heavy: 0 20px 60px oklch(0% 0 0 / 0.06);
}

/* ---- 主题切换按钮 ---- */
.theme-toggle {
    width: 56px;
    height: 30px;
    background: var(--neutral-700);
    border-radius: 30px;
    position: relative;
    cursor: pointer;
    transition: background 0.4s ease;
    border: 1px solid var(--bg-glass-border);
    flex-shrink: 0;
}

.theme-toggle.active {
    background: var(--gold-600);
    box-shadow: 0 0 20px oklch(78.5% 0.208 var(--hue-gold) / 0.3);
}

.theme-toggle .knob {
    width: 24px;
    height: 24px;
    background: var(--neutral-100);
    border-radius: 50%;
    position: absolute;
    top: 2px;
    left: 2px;
    transition: all 0.4s var(--ease-spring);
    box-shadow: 0 2px 12px oklch(0% 0 0 / 0.3);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
}

.theme-toggle.active .knob {
    left: 28px;
    background: var(--neutral-0);
    box-shadow: 0 0 20px oklch(100% 0 0 / 0.4);
}

/* ---- 页脚服务器时间（右下角小字体） ---- */
.footer-bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
}

.footer-server-time {
    font-family: var(--font-mono);
    font-size: 0.7rem;
    color: var(--text-disabled);
    letter-spacing: 0.03em;
    opacity: 0.7;
    transition: opacity 0.3s ease;
}

.footer-server-time:hover {
    opacity: 1;
}

.footer-server-time .time-value {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.footer-server-time .st-date {
    color: var(--text-disabled);
    font-weight: 400;
}

.footer-server-time .st-time {
    color: var(--gold-muted);
    font-weight: 500;
    letter-spacing: 0.05em;
}

.footer-server-time .st-tz {
    font-size: 0.6rem;
    color: var(--text-disabled);
    padding: 1px 4px;
    border: 1px solid var(--border-color);
    border-radius: 3px;
    text-transform: uppercase;
}

@media (max-width: 640px) {
    .footer-bottom {
        justify-content: center;
        text-align: center;
    }
    .footer-server-time {
        width: 100%;
        text-align: center;
    }
}

/* ---- 扫码支付区域 ---- */
.scanpay-section {
    position: relative;
    overflow: hidden;
}
.scanpay-section::before {
    content: '';
    position: absolute;
    top: -30%;
    right: -20%;
    width: 300px;
    height: 300px;
    background: radial-gradient(
        circle,
        oklch(78.5% 0.208 var(--hue-gold) / 0.08) 0%,
        transparent 70%
    );
    pointer-events: none;
}
.pay-icon-wechat,
.scanpay-title-icon {
    width: 22px;
    height: 22px;
    display: inline-block;
    vertical-align: middle;
    filter: drop-shadow(0 0 6px oklch(70% 0.2 145 / 0.3));
}
.scanpay-methods {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
    padding: 20px;
    background: oklch(0% 0 0 / 0.2);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    margin-bottom: 8px;
}
.scanpay-method {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 20px;
    background: var(--bg-surface-2);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    transition: all 0.25s ease;
}
.scanpay-method:hover {
    transform: translateY(-2px);
    border-color: var(--gold-400);
}
.spm-icon,
.spm-icon-img {
    width: 28px;
    height: 28px;
    flex-shrink: 0;
    display: block;
}
.scanpay-method:nth-child(1) .spm-icon,
.scanpay-method:nth-child(1) .spm-icon-img {
    filter: drop-shadow(0 0 8px oklch(70% 0.2 145 / 0.35));
}
.scanpay-method:nth-child(3) .spm-icon.alipay,
.scanpay-method:nth-child(3) .spm-icon-img {
    filter: drop-shadow(0 0 8px oklch(65% 0.2 250 / 0.35));
}
.scanpay-method span {
    font-size: 0.9rem;
    font-weight: 500;
    color: var(--text-body);
}
.scanpay-divider {
    font-size: 1.2rem;
    color: var(--text-disabled);
    font-weight: 300;
}

/* ---- 减少动画偏好 ---- */
@media (prefers-reduced-motion: reduce) {
    .hero-title,
    .hero-galaxy h1,
    .hero-container h1 {
        animation: none;
    }

    .pulse-gold {
        animation: none;
    }

    .silk-shimmer {
        animation: none;
    }

    .footer-divider::after {
        animation: none;
    }

    @keyframes metallic-flow {
        0%, 100% { background-position: 0% 50%; }
    }
}

/* ============================================
   支付方式图标升级 (simpleicons CDN)
   ============================================ */
.method-card-icon {
    width: 56px;
    height: 56px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    transition: all var(--transition-normal, 0.3s ease);
}

.method-card-icon img {
    width: 32px;
    height: 32px;
    display: block;
}

.method-icon-wechat {
    background: rgba(7, 193, 96, 0.08);
    border-color: rgba(7, 193, 96, 0.2);
}

.method-icon-alipay {
    background: rgba(22, 119, 255, 0.08);
    border-color: rgba(22, 119, 255, 0.2);
}

.method-card.selected .method-icon-wechat {
    background: rgba(7, 193, 96, 0.15);
    border-color: rgba(7, 193, 96, 0.4);
    box-shadow: 0 0 20px rgba(7, 193, 96, 0.15);
}

.method-card.selected .method-icon-alipay {
    background: rgba(22, 119, 255, 0.15);
    border-color: rgba(22, 119, 255, 0.4);
    box-shadow: 0 0 20px rgba(22, 119, 255, 0.15);
}

.method-card-desc {
    font-size: var(--font-size-xs, 0.75rem);
    color: var(--text-muted, #888);
    margin-top: -8px;
    letter-spacing: 0.5px;
}

/* 二维码占位区图标 */
.qr-placeholder-icon {
    width: 96px;
    height: 96px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 24px;
    margin-bottom: 20px;
}

.qr-placeholder-icon img {
    width: 56px;
    height: 56px;
    display: block;
}

.qr-icon-wechat {
    background: rgba(7, 193, 96, 0.1);
    border: 2px dashed rgba(7, 193, 96, 0.3);
}

.qr-icon-alipay {
    background: rgba(22, 119, 255, 0.1);
    border: 2px dashed rgba(22, 119, 255, 0.3);
}