/* ============================================================
 * 活动专区「Token 福利大放送」（v6 · 沉浸式改版）
 *
 * 视觉取向：和主页同一套语言 —— 极光背景 + 网格 + 玻璃质感 + 大圆角，
 * 数据区保留小米式「福利标签 + 进度条」的直白读法。
 *
 * 本页不加载主页的 style.css（省一份 60KB+ 的下载），所以变量在这里自成一套：
 * 浅色是 :root，深色由 [data-theme="dark"] 覆盖，色值与全站保持一致。
 *
 * 性能约定（见 文档/远程闪屏排查-模型管家.md）：
 *   · 大块区域不用 backdrop-filter（远程桌面下会整屏重绘），只有顶部细条允许；
 *   · 无限动画只放在背景光斑 / 英雄区旋光这类装饰层，且全部只动 transform；
 *   · 卡片入场用 translate/opacity 的滚动显现，数字与进度条只在首屏播一次。
 * ============================================================ */

:root {
    /* 表面 / 文字 */
    --wf-bg: #f4f7fc;
    --wf-text: #1d1d1f;
    --wf-text-2: #64696f;
    --wf-border: rgba(60, 90, 120, 0.16);
    --wf-border-strong: rgba(60, 90, 120, 0.26);
    --wf-card: #ffffff;
    --wf-card-surface: linear-gradient(180deg, #ffffff 0%, #f6f9fd 100%);
    --wf-nav-bg: rgba(255, 255, 255, 0.78);
    --wf-glass: rgba(255, 255, 255, 0.55);
    --wf-shadow-sm: 0 1px 2px rgba(15, 40, 70, 0.05), 0 2px 10px rgba(15, 40, 70, 0.05);
    --wf-shadow-lg: 0 6px 18px rgba(15, 40, 70, 0.08), 0 30px 70px -22px rgba(15, 40, 70, 0.28);
    --wf-spot: rgba(64, 168, 216, 0.16);

    /* 主色 */
    --wf-primary: #1f8abe;
    --wf-primary-dark: #1870a0;
    --wf-secondary: #f6b428;

    /* 极光三色（通道写法，方便 rgba(var(--x), a) 调透明度） */
    --wf-aurora-1: 56, 189, 248;
    --wf-aurora-2: 99, 102, 241;
    --wf-aurora-3: 245, 158, 11;

    /* 英雄区渐变（与主页活动卡同一支，避开青→琥珀中间那段发闷的黄绿） */
    --wf-grad: linear-gradient(112deg, #6746f5 0%, #3b6fe0 46%, #22a7c8 100%);
    --wf-grad-soft: linear-gradient(112deg, rgba(103, 70, 245, 0.12), rgba(34, 167, 200, 0.14));
    --wf-hero-shadow: 0 26px 64px -28px rgba(63, 48, 160, 0.55);
    --wf-hero-glow: radial-gradient(circle, rgba(255, 255, 255, 0.3), transparent 68%);
    --wf-halo: conic-gradient(from 0deg,
        rgba(255, 255, 255, 0.30), rgba(120, 200, 255, 0.18),
        rgba(255, 214, 120, 0.22), rgba(255, 255, 255, 0.30));
    --wf-track: rgba(120, 110, 190, 0.18);

    /* 动效 */
    --wf-ease: cubic-bezier(0.16, 1, 0.3, 1);
    --wf-radius: 22px;
    --wf-radius-lg: 32px;
}

[data-theme="dark"] {
    --wf-bg: #121214;
    --wf-text: #ececef;
    --wf-text-2: #9a9aa2;
    --wf-border: rgba(255, 255, 255, 0.10);
    --wf-border-strong: rgba(255, 255, 255, 0.18);
    --wf-card: #1b1b1e;
    --wf-card-surface: linear-gradient(180deg, rgba(34, 34, 38, 0.94), rgba(24, 24, 27, 0.94));
    --wf-nav-bg: rgba(18, 18, 20, 0.78);
    --wf-glass: rgba(255, 255, 255, 0.05);
    --wf-shadow-sm: none;
    --wf-shadow-lg: 0 12px 40px rgba(0, 0, 0, 0.5);
    --wf-spot: rgba(122, 190, 230, 0.13);
    --wf-primary: #4db6e0;
    --wf-primary-dark: #3aa0cf;

    --wf-grad: linear-gradient(112deg, #35215e 0%, #1e3f70 52%, #17565f 100%);
    --wf-grad-soft: linear-gradient(112deg, rgba(109, 77, 255, 0.16), rgba(23, 86, 95, 0.20));
    --wf-hero-shadow: 0 22px 54px -26px rgba(0, 0, 0, 0.75);
    --wf-hero-glow: radial-gradient(circle, rgba(246, 180, 40, 0.2), transparent 70%);
    --wf-halo: conic-gradient(from 0deg,
        rgba(122, 190, 230, 0.26), rgba(150, 160, 220, 0.16),
        rgba(246, 180, 40, 0.16), rgba(122, 190, 230, 0.26));
    --wf-track: rgba(255, 255, 255, 0.12);
}

* { box-sizing: border-box; }

html {
    scroll-behavior: smooth;
    -webkit-text-size-adjust: 100%;
}

body {
    margin: 0;
    min-height: 100vh;
    overflow-x: hidden;
    background: var(--wf-bg);
    color: var(--wf-text);
    font-family: -apple-system, BlinkMacSystemFont, "SF Pro SC", "PingFang SC",
                 "Microsoft YaHei", "Helvetica Neue", Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

::selection { background: var(--wf-grad-soft); }

:focus-visible {
    outline: 2px solid var(--wf-primary);
    outline-offset: 3px;
}

/* ============================================================
 * 背景：极光 + 网格 + 光斑 + 星点（全部固定在最底层）
 * ============================================================ */
.wf-bg {
    position: fixed;
    inset: 0;
    z-index: -1;
    overflow: hidden;
    pointer-events: none;
    background: var(--wf-bg);
    transition: background-color 0.45s ease;
}

.wf-bg::before {
    content: '';
    position: absolute;
    inset: -10%;
    background:
        radial-gradient(ellipse 46% 38% at 16% 12%, rgba(var(--wf-aurora-1), 0.16) 0%, transparent 100%),
        radial-gradient(ellipse 40% 34% at 84% 26%, rgba(var(--wf-aurora-2), 0.10) 0%, transparent 100%),
        radial-gradient(ellipse 48% 36% at 58% 88%, rgba(var(--wf-aurora-3), 0.08) 0%, transparent 100%);
}

.wf-bg::after {
    content: '';
    position: absolute;
    inset: 0;
    opacity: 0.5;
    color: rgba(31, 138, 190, 0.26);
    background-image:
        linear-gradient(to right, currentColor 1px, transparent 1px),
        linear-gradient(to bottom, currentColor 1px, transparent 1px);
    background-size: 64px 64px;
    -webkit-mask-image: radial-gradient(ellipse 78% 62% at 50% 26%, black 18%, transparent 100%);
    mask-image: radial-gradient(ellipse 78% 62% at 50% 26%, black 18%, transparent 100%);
}

.wf-orb {
    position: absolute;
    border-radius: 50%;
    filter: blur(90px);
    opacity: 0.9;
}

.wf-orb-a {
    width: 560px;
    height: 560px;
    top: -180px;
    right: -140px;
    background: rgba(var(--wf-aurora-1), 0.16);
    animation: wf-drift 26s ease-in-out infinite alternate;
}

.wf-orb-b {
    width: 440px;
    height: 440px;
    bottom: -140px;
    left: -120px;
    background: rgba(var(--wf-aurora-3), 0.12);
    animation: wf-drift 32s ease-in-out infinite alternate-reverse;
}

.wf-orb-c {
    width: 380px;
    height: 380px;
    top: 46%;
    left: 52%;
    background: rgba(var(--wf-aurora-2), 0.10);
    animation: wf-drift 38s ease-in-out infinite alternate;
}

@keyframes wf-drift {
    0%   { transform: translate(0, 0) scale(1); }
    50%  { transform: translate(-32px, 24px) scale(1.08); }
    100% { transform: translate(28px, -18px) scale(0.96); }
}

/* 星点：静态平铺（画一次就不动），深色亮白、浅色淡墨 */
.wf-stars {
    position: absolute;
    inset: 0;
    opacity: 0.55;
    background-image:
        radial-gradient(1.4px 1.4px at 22% 32%, rgba(255, 255, 255, 0.75), transparent 100%),
        radial-gradient(1.1px 1.1px at 71% 18%, rgba(255, 255, 255, 0.55), transparent 100%),
        radial-gradient(1px 1px at 46% 76%, rgba(255, 255, 255, 0.45), transparent 100%),
        radial-gradient(1.5px 1.5px at 86% 64%, rgba(255, 255, 255, 0.5), transparent 100%);
    background-size: 320px 320px, 260px 260px, 420px 420px, 300px 300px;
}

[data-theme="light"] .wf-stars {
    opacity: 0.4;
    background-image:
        radial-gradient(1.4px 1.4px at 22% 32%, rgba(30, 80, 130, 0.35), transparent 100%),
        radial-gradient(1.1px 1.1px at 71% 18%, rgba(30, 80, 130, 0.28), transparent 100%),
        radial-gradient(1px 1px at 46% 76%, rgba(30, 80, 130, 0.22), transparent 100%),
        radial-gradient(1.5px 1.5px at 86% 64%, rgba(30, 80, 130, 0.25), transparent 100%);
}

/* ============================================================
 * 顶部（细条毛玻璃：面积小，远程桌面也扛得住）
 * ============================================================ */
.wf-nav {
    position: sticky;
    top: 0;
    z-index: 30;
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 12px 22px;
    background: var(--wf-nav-bg);
    backdrop-filter: blur(16px) saturate(160%);
    -webkit-backdrop-filter: blur(16px) saturate(160%);
    border-bottom: 1px solid var(--wf-border);
}

.wf-back, .wf-brand {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: 0.9rem;
    color: var(--wf-text-2);
    text-decoration: none;
}

.wf-back { transition: color 0.2s ease, transform 0.25s var(--wf-ease); }
.wf-back:hover { color: var(--wf-primary); transform: translateX(-3px); }
.wf-back i { transition: transform 0.25s var(--wf-ease); }
.wf-back:hover i { transform: translateX(-2px); }

.wf-brand { font-weight: 700; color: var(--wf-text); margin-left: auto; }
.wf-brand i { color: var(--wf-secondary); }

.theme-toggle {
    width: 34px;
    height: 34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    border: 1px solid var(--wf-border-strong);
    background: transparent;
    color: var(--wf-text-2);
    cursor: pointer;
    transition: transform 0.35s var(--wf-ease), color 0.25s ease, border-color 0.25s ease;
}

.theme-toggle:hover {
    transform: rotate(-18deg) scale(1.08);
    color: var(--wf-primary);
    border-color: var(--wf-primary);
}

/* ============================================================
 * 英雄区
 * ============================================================ */
.wf-hero {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    max-width: 1080px;
    margin: 34px auto 0;
    padding: 54px 30px 46px;
    border-radius: var(--wf-radius-lg);
    text-align: center;
    background: var(--wf-grad);
    color: #fff;
    box-shadow: var(--wf-hero-shadow), inset 0 1px 0 rgba(255, 255, 255, 0.18);
    animation: wf-hero-in 0.85s var(--wf-ease) both;
}

@keyframes wf-hero-in {
    from { opacity: 0; translate: 0 26px; }
    to   { opacity: 1; translate: 0 0; }
}

/* 两团柔光：缓慢漂移（只动 transform） */
.wf-hero::before,
.wf-hero::after {
    content: '';
    position: absolute;
    border-radius: 50%;
    background: var(--wf-hero-glow);
    pointer-events: none;
    z-index: 0;
}

.wf-hero::before {
    width: 360px;
    height: 360px;
    left: -120px;
    top: -150px;
    animation: wf-glow-drift 18s ease-in-out infinite alternate;
}

.wf-hero::after {
    width: 280px;
    height: 280px;
    right: -90px;
    bottom: -130px;
    animation: wf-glow-drift 22s ease-in-out infinite alternate-reverse;
}

@keyframes wf-glow-drift {
    from { transform: translate3d(0, 0, 0) scale(1); }
    to   { transform: translate3d(18px, 14px, 0) scale(1.1); }
}

/* 内圈旋光：贴着标题缓慢转，给整块加「活的」层次 */
.wf-hero-halo {
    position: absolute;
    left: 50%;
    top: 38%;
    width: min(620px, 90%);
    aspect-ratio: 1;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    background: var(--wf-halo);
    filter: blur(48px);
    opacity: 0.5;
    z-index: 0;
    pointer-events: none;
    animation: wf-halo-spin 40s linear infinite;
}

@keyframes wf-halo-spin {
    to { transform: translate(-50%, -50%) rotate(360deg); }
}

.wf-hero > *:not(.wf-hero-halo) {
    position: relative;
    z-index: 1;
}

.wf-hero-badge {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 5px 15px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.2);
    border: 1px solid rgba(255, 255, 255, 0.18);
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.08em;
}

.wf-hero h1 {
    position: relative;
    margin: 18px 0 22px;      /* 下面直接接五个数字，多留一点呼吸 */
    font-size: clamp(1.9rem, 5vw, 3.1rem);
    font-weight: 800;
    letter-spacing: -0.02em;
    line-height: 1.15;
    text-wrap: balance;
    text-shadow: 0 2px 18px rgba(20, 10, 60, 0.28);
}

/* 英雄区的一句话说明（付费页用来写「本页提供什么服务」；活动页没有这行就不占位） */
.wf-hero-desc {
    position: relative;
    margin: -4px auto 20px;
    max-width: 640px;
    font-size: 0.92rem;
    line-height: 1.7;
    color: rgba(255, 255, 255, 0.86);
}

/* 五个实时数字：英雄区里的小胶囊。容器与条目都不做无限动画
   （远程桌面上会整屏重绘，测试里也有这条红线）。 */
.wf-live {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
    margin: 0 auto 18px;
}

.wf-live-item {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 6px 14px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.16);
    border: 1px solid rgba(255, 255, 255, 0.14);
    font-size: 0.84rem;
    color: rgba(255, 255, 255, 0.92);
    font-variant-numeric: tabular-nums;
    transition: background 0.25s ease, transform 0.25s var(--wf-ease);
}

.wf-live-item:hover {
    background: rgba(255, 255, 255, 0.24);
    transform: translateY(-1px);
}

.wf-live-item b {
    font-size: 1rem;
    font-weight: 800;
    color: #fff;
}

.wf-live-item .wf-live-ic { font-size: 0.7rem; opacity: 0.9; }
.wf-live-item.wf-live-on .wf-live-ic { font-size: 0.62rem; color: #35d07f; }

.wf-stats {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 14px;
}

.wf-stat {
    min-width: 168px;
    padding: 16px 22px;
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.15);
    border: 1px solid rgba(255, 255, 255, 0.12);
    transition: background 0.25s ease, transform 0.3s var(--wf-ease);
}

.wf-stat:hover {
    background: rgba(255, 255, 255, 0.22);
    transform: translateY(-2px);
}

.wf-stat-hl {
    background: rgba(255, 255, 255, 0.27);
    border-color: rgba(255, 255, 255, 0.22);
}

.wf-stat-num {
    display: block;
    font-size: 1.6rem;
    font-weight: 800;
    letter-spacing: -0.02em;
    font-variant-numeric: tabular-nums;
}

.wf-stat-label {
    display: block;
    margin-top: 4px;
    font-size: 0.8rem;
    color: rgba(255, 255, 255, 0.86);
}

.wf-hero-meta {
    position: relative;
    margin-top: 22px;
    font-size: 0.8rem;
    color: rgba(255, 255, 255, 0.8);
    min-height: 1em;
}

/* 运营位（购买入口）：紧贴在「数据更新于 …」下面，做成一个胶囊整体：
   主标题「购买低价 Token」+ 体验说明「享受低延迟稳定高速调用」+ 已上架型号 + 开业福利，
   全部和两侧图标在同一个链接里，整块可点，避免看起来像按钮 + 另一句散字 */
.wf-buy-btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    max-width: 100%;
    margin-top: 14px;
    padding: 10px 20px;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, 0.42);
    background: rgba(255, 255, 255, 0.16);
    color: #fff;
    font-size: 0.9rem;
    font-weight: 700;
    letter-spacing: 0.01em;
    text-align: left;
    text-decoration: none;
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    transition: transform 0.18s var(--wf-ease), background 0.18s ease, border-color 0.18s ease;
}

.wf-buy-btn i { font-size: 0.86em; }

.wf-buy-copy {
    display: flex;
    flex-direction: column;
    min-width: 0;
    gap: 1px;
    line-height: 1.25;
    text-align: center;
}

.wf-buy-note,
.wf-buy-models {
    font-size: 0.74rem;
    font-weight: 500;
    letter-spacing: 0.02em;
    color: rgba(255, 255, 255, 0.8);
}

.wf-buy-note { white-space: nowrap; }

/* 型号那行最长：窄屏允许换行，整块仍是一个胶囊，不会溢出英雄区 */
.wf-buy-models {
    font-size: 0.72rem;
    line-height: 1.45;
    text-wrap: balance;
}

/* 开业福利：金色加粗一行，和上面的白字说明区分开，但仍是同一个胶囊的一部分 */
.wf-buy-promo {
    font-size: 0.74rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    color: var(--wf-secondary);
    white-space: nowrap;
}

/* 体验金的等效说明：比福利那行弱一档，仍留在同一个胶囊里 */
.wf-buy-promo-note {
    font-size: 0.68rem;
    font-weight: 500;
    letter-spacing: 0.02em;
    color: rgba(255, 255, 255, 0.72);
    white-space: nowrap;
}

.wf-buy-btn:hover,
.wf-buy-btn:focus-visible {
    background: rgba(255, 255, 255, 0.27);
    border-color: rgba(255, 255, 255, 0.72);
    transform: translateY(-1px);
}

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

@media (prefers-reduced-motion: reduce) {
    .wf-buy-btn { transition: none; }
    .wf-buy-btn:hover, .wf-buy-btn:focus-visible { transform: none; }
}

/* ============================================================
 * 额度列表：一个 Key 一行（分组标题 + 该 Key 的卡片）
 * ============================================================ */
.wf-grid {
    max-width: 1080px;
    margin: 30px auto 0;
    padding: 0 20px;
}

.wf-group + .wf-group {
    margin-top: 30px;
}

.wf-group-head {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    margin: 0 0 14px;
    padding: 0 2px 10px;
    border-bottom: 1px solid var(--wf-border);
}

.wf-group-key {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    padding: 5px 14px;
    border-radius: 999px;
    background: var(--wf-grad-soft);
    border: 1px solid var(--wf-border);
    font-size: 0.82rem;
    font-weight: 700;
    color: var(--wf-text);
}

.wf-group-key i {
    color: var(--wf-primary);
    font-size: 0.76rem;
}

.wf-group-count {
    font-size: 0.78rem;
    color: var(--wf-text-2);
}

.wf-group-left {
    margin-left: auto;
    font-size: 0.78rem;
    color: var(--wf-text-2);
    font-variant-numeric: tabular-nums;
}

.wf-group-left b {
    font-size: 0.92rem;
    font-weight: 800;
    color: var(--wf-text);
}

/* 行内卡片：auto-fill（不是 auto-fit）——只剩一张时不会被拉成整行宽条 */
.wf-group-cards {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 16px;
    align-items: stretch;
}

/* ---- 卡片 ---- */
.wf-card {
    --mx: 50%;
    --my: 0%;
    --rx: 0deg;
    --ry: 0deg;
    --ty: 0px;
    position: relative;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    padding: 20px 22px 16px;
    border-radius: var(--wf-radius);
    background: var(--wf-card-surface);
    border: 1px solid var(--wf-border);
    box-shadow: var(--wf-shadow-sm);
    transform: perspective(1000px) rotateX(var(--rx)) rotateY(var(--ry)) translate3d(0, var(--ty), 0);
    transition: transform 0.45s var(--wf-ease), box-shadow 0.35s ease, border-color 0.35s ease;
}

/* 指针聚光（--mx/--my 由脚本写，只在悬停时露出来） */
.wf-card::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    opacity: 0;
    background: radial-gradient(320px circle at var(--mx) var(--my), var(--wf-spot), transparent 62%);
    transition: opacity 0.4s ease;
}

/* 悬停渐变描边（mask 挖空中间，只留 1px 边） */
.wf-card::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 3;
    pointer-events: none;
    border-radius: inherit;
    padding: 1px;
    background: linear-gradient(135deg,
        rgba(var(--wf-aurora-1), 0.85),
        rgba(var(--wf-aurora-2), 0.35) 46%,
        rgba(var(--wf-aurora-3), 0.75));
    -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;
    opacity: 0;
    transition: opacity 0.4s ease;
}

.wf-card:hover {
    --ty: -5px;
    border-color: transparent;
    box-shadow: var(--wf-shadow-lg);
}

.wf-card:hover::before,
.wf-card:hover::after {
    opacity: 1;
}

.wf-card.is-tilting {
    transition: transform 0.12s linear, box-shadow 0.35s ease, border-color 0.35s ease;
}

.wf-card > * {
    position: relative;
    z-index: 1;
}

.wf-card.wf-full { border-color: rgba(239, 83, 80, 0.45); }

/* 卡片头：模型名 + 剩余百分比（排序依据，用户一眼能看出为什么这张在前面） */
.wf-card-top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 14px;
}

.wf-model {
    margin: 0;
    min-width: 0;
    font-size: 1.22rem;
    font-weight: 800;
    letter-spacing: -0.01em;
    line-height: 1.3;
    /* 名字窄了会换行：优先在连字符处断（minimax-m3.1- / flash），
       别把单词从中间劈开（…m3.1-fla / sh） */
    word-break: normal;
    overflow-wrap: break-word;
}

/* 卡片头统一按「两行名字」占位：同一行里一张卡名字一行、另一张两行时，
   进度条 / 已用 / 剩余才会落在同一条水平线上（窄屏是单列，不需要，见文末 media） */
@media (min-width: 721px) {
    .wf-model { min-height: 2.6em; }
}

.wf-remain {
    flex: 0 0 auto;
    padding: 3px 9px;
    border-radius: 999px;
    background: var(--wf-grad-soft);
    border: 1px solid var(--wf-border);
    font-size: 0.72rem;
    font-weight: 700;
    color: var(--wf-text-2);
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

/* 余量已经不多（≤10%）：标红提醒，和「用满」的红条同一套语义 */
.wf-remain.wf-remain-low {
    color: #d9534f;
    border-color: rgba(239, 83, 80, 0.45);
    background: rgba(239, 83, 80, 0.08);
}

/* 进度条 + 百分比同一行：数字宽了也不会把别的挤变形 */
.wf-bar-row {
    display: flex;
    align-items: center;
    gap: 10px;
}

.wf-bar {
    flex: 1 1 auto;
    min-width: 0;
    height: 11px;
    border-radius: 999px;
    background: var(--wf-track);
    overflow: hidden;
}

.wf-bar-fill {
    display: block;
    height: 100%;
    width: 0;
    border-radius: 999px;
    background: var(--wf-grad);
    box-shadow: 0 0 12px rgba(103, 70, 245, 0.35);
    transition: width 1.1s cubic-bezier(0.22, 0.9, 0.24, 1);
}

.wf-card.wf-full .wf-bar-fill {
    background: linear-gradient(118deg, #ff8a65, #ef5350);
    box-shadow: 0 0 12px rgba(239, 83, 80, 0.4);
}

/* 已用 / 剩余各占一行（数字一宽也不会难看） */
.wf-figures {
    display: flex;
    flex-direction: column;
    gap: 5px;
    margin: 12px 0 12px;
    font-size: 0.84rem;
    color: var(--wf-text-2);
}

.wf-figures > span {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
    min-width: 0;
}

.wf-figures i { font-style: normal; }

.wf-pct {
    flex: 0 0 auto;
    font-size: 1.05rem;
    font-weight: 800;
    color: var(--wf-text);
    font-variant-numeric: tabular-nums;
}

.wf-figures b {
    color: var(--wf-text);
    font-variant-numeric: tabular-nums;
}

.wf-card-foot {
    display: flex;
    align-items: center;
    justify-content: center;      /* 只剩「重置」一行 → 居中，别顶到右边 */
    gap: 10px;
    flex-wrap: wrap;
    margin-top: auto;
    padding-top: 11px;
    border-top: 1px dashed var(--wf-border);
    font-size: 0.76rem;
    color: var(--wf-text-2);
    text-align: center;
}

.wf-reset i { color: var(--wf-secondary); }

/* 到期：脚注里单独占一行（上面是「自动重置」那行），设了到期时间才出现（没设的项不占位） */
.wf-expire {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    flex: 1 1 100%;
}

.wf-expire i { color: var(--wf-primary); }
.wf-expire.wf-expired { color: #d9534f; font-weight: 600; }
.wf-expire.wf-expired i { color: #d9534f; }

/* 已到期：进度条压灰一点，别看着还像能用的 */
.wf-card.wf-expired .wf-bar-fill { filter: grayscale(0.75); opacity: 0.6; }
.wf-card.wf-expired .wf-left b { color: var(--wf-text-2); }

/* ============================================================
 * 滚动显现（脚本开启 wf-motion 后才生效；禁 JS 时内容直接可见）
 * ============================================================ */
html.wf-motion .wf-reveal {
    opacity: 0;
    translate: 0 26px;
    transition: opacity 0.62s var(--wf-ease), translate 0.62s var(--wf-ease);
    transition-delay: var(--wf-delay, 0ms);
}

html.wf-motion .wf-reveal.wf-in {
    opacity: 1;
    translate: 0 0;
}

/* ============================================================
 * 滚动进度条（脚本注入）
 * ============================================================ */
.wf-progress {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    z-index: 40;
    transform: scaleX(0);
    transform-origin: 0 50%;
    background: linear-gradient(90deg, #38bdf8, #f6b428);
    box-shadow: 0 0 14px rgba(64, 168, 216, 0.75);
    pointer-events: none;
    will-change: transform;
}

/* ============================================================
 * 空态 / 说明 / 页脚
 * ============================================================ */
.wf-footer p { margin: 0 0 10px; }
.wf-footer p:last-child { margin-bottom: 0; }

/* 免责声明：比正文更弱，居中收窄，不抢活动的气氛。
   选择器要带 .wf-footer 前缀 —— 否则 `.wf-footer p`（类+元素）比 `.wf-disclaimer`（仅类）
   更具体，会把 `margin: 0 auto` 覆盖成 `0 0 10px`，整块就被挤到左边去了。 */
.wf-footer .wf-disclaimer {
    max-width: 780px;
    margin: 0 auto 12px;
    text-align: center;
    font-size: 0.78rem;
    line-height: 1.9;
    color: var(--wf-text-2);
}

.wf-footer .wf-disclaimer b { color: var(--wf-text); }
.wf-footer .wf-copy { font-size: 0.8rem; }

.wf-empty {
    max-width: 620px;
    margin: 44px auto;
    padding: 46px 28px;
    text-align: center;
    border-radius: var(--wf-radius-lg);
    border: 1px dashed var(--wf-border-strong);
    background: var(--wf-card-surface);
    box-shadow: var(--wf-shadow-sm);
}

.wf-empty i {
    display: block;
    margin-bottom: 14px;
    font-size: 2.6rem;
    color: var(--wf-secondary);
    filter: drop-shadow(0 8px 20px rgba(246, 180, 40, 0.35));
}

.wf-empty h3 { margin: 0 0 8px; font-size: 1.2rem; font-weight: 700; }
.wf-empty p { margin: 0; font-size: 0.9rem; line-height: 1.8; color: var(--wf-text-2); }

.wf-footer {
    margin: 44px 0 0;
    padding: 26px 20px 42px;
    text-align: center;
    font-size: 0.8rem;
    line-height: 1.9;
    color: var(--wf-text-2);
}

.wf-footer a { color: var(--wf-primary); text-decoration: none; }
.wf-footer a:hover { text-decoration: underline; }

.hidden { display: none !important; }

/* ============================================================
 * 响应式
 * ============================================================ */
@media (max-width: 720px) {
    .wf-nav { padding: 10px 14px; gap: 10px; }

    .wf-hero {
        margin: 18px 14px 0;
        padding: 38px 20px 32px;
        border-radius: 26px;
    }

    /* 三块总览在窄屏排成 2 列 + 「当前剩余」整行（比 2+1 留个空位好看） */
    .wf-stats {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px;
    }

    .wf-stat { min-width: 0; padding: 13px 16px; }
    .wf-stat-hl { grid-column: 1 / -1; }
    .wf-stat-num { font-size: 1.3rem; }

    /* 五个数字：窄屏缩小一点，尽量排成一行；实在挤就换行 */
    .wf-live { gap: 8px; margin-bottom: 14px; }
    .wf-live-item { padding: 5px 11px; font-size: 0.78rem; }
    .wf-live-item b { font-size: 0.92rem; }

    .wf-grid { padding: 0 14px; margin-top: 22px; }
    .wf-group + .wf-group { margin-top: 24px; }
    .wf-group-cards { grid-template-columns: minmax(0, 1fr); gap: 12px; }
    .wf-card { padding: 18px 18px 14px; }
}

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }

    .wf-hero,
    .wf-orb,
    .wf-hero::before,
    .wf-hero::after,
    .wf-hero-halo {
        animation: none !important;
    }

    .wf-hero { opacity: 1; translate: none; }

    .wf-bar-fill { transition: none; }

    html.wf-motion .wf-reveal,
    html.wf-motion .wf-reveal.wf-in {
        opacity: 1;
        translate: none;
        transition: none;
    }

    .wf-card,
    .wf-card:hover {
        transform: none;
        --ty: 0px;
    }
}