/* ===== 基础变量（主题可覆盖） ===== */
    :root{
      --bg:#f7fafc; --paper:#fff; --ink:#0f172a; --muted:#6b7280; --border:#e5e7eb;
      --brand:#22c55e; --brand2:#3b82f6;
      --shadow-1:0 4px 20px #0002; --shadow-2:0 10px 30px #0003;

      --radius-card:20px; --radius-btn:14px;
      --decor:none; --btn-tilt:-.2deg; --btn-glow:none;

      /* 玻璃效果增强变量 - 极高度透明 */
      --glass-bg: rgba(255, 255, 255, 0.03);
      --glass-border: rgba(255, 255, 255, 0.08);
      --glass-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
      --backdrop-blur: blur(15px);
      --backdrop-saturate: saturate(180%);

      /* 状态色（默认亮色主题） */
      --good-bg:#dcfce7; --good-ink:#065f46; --good-bd:#bbf7d0;
      --warn-bg:#fef3c7; --warn-ink:#92400e; --warn-bd:#fde68a;
      --bad-bg:#fee2e2;  --bad-ink:#7f1d1d;  --bad-bd:#fecaca;

      /* 动效与节奏 */
      --dur-fast:.18s; --dur-med:.32s; --dur-slow:.6s;
      --ease-entr:cubic-bezier(.2,.8,.2,1);

      /* 字体尺寸系统（响应式） */
      --fs-xs: clamp(11px, 1.2vw, 12px);
      --fs-sm: clamp(12.5px, 1.4vw, 14.5px);
      --fs-base: clamp(14px, 1.7vw, 16px);
      --fs-lg: clamp(18px, 2.2vw, 22px);
      --fs-xl: clamp(22px, 2.8vw, 26px);

      /* 间距与宽度 */
      --space-1: 6px; --space-2: 10px; --space-3: 14px; --space-4: 18px; --space-5: 22px;
      --card-w: min(640px, 94vw);

      /* 渐变边框 */
      --grad-warn: linear-gradient(90deg,#f59e0b66,#fbbf24,#f59e0b66);
      --grad-bad: linear-gradient(90deg,#ef444466,#fca5a5,#ef444466);
    }

    /* ===== 六个主题 ===== */
    body.theme-paper{
      --bg:#f7fafc; --paper:#ffffff; --ink:#0f172a; --muted:#6b7280; --border:#e5e7eb; --brand:#22c55e; --brand2:#3b82f6;
      --radius-card:22px; --radius-btn:14px;
      --decor: radial-gradient(32rem 24rem at -10% -10%, #bbf7d04a, transparent 60%), radial-gradient(28rem 20rem at 110% 110%, #bfdbfe4a, transparent 60%);
      /* 玻璃效果增强 - 极高度透明 */
      --glass-bg: rgba(255, 255, 255, 0.05);
      --glass-border: rgba(255, 255, 255, 0.12);
      --glass-shadow: 0 8px 32px rgba(0, 0, 0, 0.08);
      --backdrop-blur: blur(15px);
    }
    body.theme-dark{
      color-scheme: dark;
      --bg:#0b0f1a; --paper:#0f1524; --ink:#e5e7eb; --muted:#9ca3af; --border:#1f2937; --brand:#38bdf8; --brand2:#6366f1;
      --shadow-1:0 12px 30px #0008; --shadow-2:0 20px 44px #000a; --btn-tilt:-.4deg;
      --decor: radial-gradient(40rem 32rem at 10% -10%, #111936, transparent 60%), radial-gradient(36rem 28rem at 110% 110%, #0d1328, transparent 60%);
      --good-bg:#064e3b; --good-ink:#a7f3d0; --good-bd:#065f46; --warn-bg:#3f2d00; --warn-ink:#fde68a; --warn-bd:#f59e0b; --bad-bg:#3a0d0d; --bad-ink:#fecaca; --bad-bd:#ef4444;
      /* 玻璃效果增强 - 极高度透明 (菜单/按钮/卡片透明度已降低) */
      --glass-bg: rgba(15, 21, 36, 0.05);
      --glass-border: rgba(255, 255, 255, 0.02);
      --glass-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
      --backdrop-blur: blur(15px);
    }
    body.theme-pastel{
      --bg:#fff7fb; --paper:#ffffff; --ink:#3f3d56; --muted:#7a7c8e; --border:#f8d7e9; --brand:#f472b6; --brand2:#93c5fd;
      --radius-card:26px; --radius-btn:18px;
      --decor: radial-gradient(30rem 24rem at 15% -10%, #ffe4f1, transparent 60%), radial-gradient(30rem 24rem at 110% 110%, #e0eaff, transparent 60%);
      --good-bg:#f3e8ff; --good-ink:#6b21a8; --good-bd:#e9d5ff; --warn-bg:#fff7ed; --warn-ink:#9a3412; --warn-bd:#fed7aa; --bad-bg:#ffe4e6; --bad-ink:#9f1239; --bad-bd:#fecdd3;
      /* 玻璃效果增强 - 极高度透明 */
      --glass-bg: rgba(255, 255, 255, 0.08);
      --glass-border: rgba(255, 255, 255, 0.12);
      --glass-shadow: 0 8px 32px rgba(0, 0, 0, 0.05);
      --backdrop-blur: blur(15px);
    }
    body.theme-neon{
      --bg:#06070d; --paper:#0a0f1f; --ink:#e5f2ff; --muted:#98a2b3; --border:#101828; --brand:#22d3ee; --brand2:#a78bfa;
      --shadow-1:0 0 0 1px #1e293b, 0 20px 60px #0ea5e955; --shadow-2:0 0 0 1px #1e293b, 0 30px 80px #8b5cf655; --btn-tilt:-.6deg; --btn-glow:drop-shadow(0 0 12px #22d3ee88) drop-shadow(0 0 18px #a78bfa66);
      --decor: radial-gradient(60rem 40rem at -10% -20%, #0ea5e933, transparent 60%), radial-gradient(60rem 40rem at 120% 120%, #8b5cf633, transparent 60%);
      --good-bg:#042f2e; --good-ink:#67e8f9; --good-bd:#22d3ee; --warn-bg:#2a2000; --warn-ink:#fde68a; --warn-bd:#f59e0b; --bad-bg:#2a0a0a; --bad-ink:#fecaca; --bad-bd:#f43f5e;
      /* 玻璃效果增强 - 极高度透明 */
      --glass-bg: rgba(10, 15, 31, 0.1);
      --glass-border: rgba(34, 211, 238, 0.08);
      --glass-shadow: 0 8px 32px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(34, 211, 238, 0.05);
      --backdrop-blur: blur(15px);
    }
    body.theme-cute{
      --bg:#fffdf7; --paper:#ffffff; --ink:#3a2d2d; --muted:#8c6e6e; --border:#ffe4e6; --brand:#f9a8d4; --brand2:#fbbf24;
      --radius-card:24px; --radius-btn:22px; --btn-tilt:-.25deg;
      --decor: radial-gradient(26rem 20rem at 10% -10%, #ffe4f1, transparent 60%), radial-gradient(26rem 20rem at 110% 110%, #fff1c6, transparent 60%);
      --good-bg:#fdeff6; --good-ink:#9d174d; --good-bd:#f9a8d4; --warn-bg:#fff7d6; --warn-ink:#92400e; --warn-bd:#fde68a; --bad-bg:#ffe5e5; --bad-ink:#7f1d1d; --bad-bd:#fecaca;
      /* 玻璃效果增强 - 极高度透明 */
      --glass-bg: rgba(255, 255, 255, 0.1);
      --glass-border: rgba(255, 255, 255, 0.15);
      --glass-shadow: 0 8px 32px rgba(0, 0, 0, 0.06);
      --backdrop-blur: blur(15px);
    }
    body.theme-tech{
      --bg:linear-gradient(120deg,#0b1220,#0c172a 40%,#0b1220); --paper:#0f172a; --ink:#e2e8f0; --muted:#94a3b8; --border:#1e293b; --brand:#38bdf8; --brand2:#22c55e;
      --shadow-1:0 10px 30px #0008, inset 0 0 0 1px #1e293b; --shadow-2:0 18px 50px #000b, inset 0 0 0 1px #1e293b; --btn-tilt:-.5deg;
      --decor: radial-gradient(70rem 50rem at -10% -20%, #0ea5e933, transparent 60%), radial-gradient(70rem 50rem at 120% 120%, #22c55e33, transparent 60%);
      --good-bg:#022c22; --good-ink:#34d399; --good-bd:#10b981; --warn-bg:#2b2300; --warn-ink:#fde68a; --warn-bd:#f59e0b; --bad-bg:#2b0a0a; --bad-ink:#fca5a5; --bad-bd:#ef4444;
      /* 玻璃效果增强 - 极高度透明 */
      --glass-bg: rgba(15, 23, 42, 0.12);
      --glass-border: rgba(56, 189, 248, 0.08);
      --glass-shadow: 0 8px 32px rgba(0, 0, 0, 0.4), inset 0 0 0 1px rgba(56, 189, 248, 0.04);
      --backdrop-blur: blur(15px);
    }

    /* ===== 布局与组件 ===== */
    *{box-sizing:border-box; -webkit-tap-highlight-color:transparent}
    html,body{height:100%}
    body{margin:0;background:var(--bg);color:var(--ink);font-family:'Plus Jakarta Sans',ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,"PingFang SC","Noto Sans CJK SC","Microsoft YaHei",Helvetica,Arial,sans-serif;transition:background var(--dur-med),color var(--dur-med);}
    .decor{position:fixed;inset:0;pointer-events:none;background:var(--decor);filter:none;transition:filter 1.2s ease, background var(--dur-slow); will-change:filter}
    .wrap{min-height:100dvh;display:grid;place-items:center;padding:8vmin 3vmin}
    
    /* --- 雪花 Canvas --- (已启用) */
    #Snow { 
      position: fixed; 
      top: 0; 
      left: 0; 
      width: 100%; 
      height: 100%; 
      pointer-events: none; 
      z-index: 2; 
      opacity: 0.6; 
    }

    /* ===== 玻璃磨砂效果卡片 - 极高度透明 ===== */
    .card{
      width:var(--card-w);
      background: var(--glass-bg);
      backdrop-filter: var(--backdrop-blur) var(--backdrop-saturate);
      -webkit-backdrop-filter: var(--backdrop-blur) var(--backdrop-saturate);
      border-radius:var(--radius-card);
      border: 1px solid var(--glass-border);
      box-shadow: var(--glass-shadow), var(--shadow-1);
      padding:26px 22px 22px;
      position:relative;
      overflow:hidden;
      animation:cardIn var(--dur-slow) var(--ease-entr) both;
      contain:layout paint style;
      backface-visibility:hidden;
    }
    @keyframes cardIn{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:translateY(0)}}

    /* ===== 玻璃磨砂效果按钮 - 极高度透明 ===== */
    .btn{
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:12px;
      background: color-mix(in srgb, var(--glass-bg) 90%, transparent);
      backdrop-filter: var(--backdrop-blur);
      -webkit-backdrop-filter: var(--backdrop-blur);
      color:inherit;
      border: 1px solid var(--glass-border);
      border-radius:var(--radius-btn);
      padding:14px 16px;
      text-decoration:none;
      box-shadow: var(--glass-shadow), var(--shadow-1);
      transition: all var(--dur-fast) ease;
      position:relative;
      isolation:isolate;
      filter:var(--btn-glow);
      opacity:0;
      transform:translateY(8px);
      will-change:transform;
      overflow:hidden;
    }

    .stack.ready .btn{animation:fadeUp var(--dur-slow) var(--ease-entr) forwards}
    .stack.ready .btn:nth-child(1){animation-delay:.05s}
    .stack.ready .btn:nth-child(2){animation-delay:.15s}
    .stack.ready .btn:nth-child(3){animation-delay:.25s}
    .stack.ready .btn:nth-child(4){animation-delay:.35s}
    .stack.ready .btn:nth-child(5){animation-delay:.45s} /* 适配新增的 5 号链接 */
    @keyframes fadeUp{to{opacity:1;transform:translateY(0)}}

    /* 按钮悬停效果优化（玻璃主题） */
    @media (hover:hover){
      .btn:hover{
        background: color-mix(in srgb, var(--glass-bg) 80%, var(--brand) 20%);
        border-color: color-mix(in srgb, var(--glass-border) 60%, var(--brand) 40%);
        transform:translateY(-3px);
        box-shadow: 
          0 12px 28px color-mix(in srgb, var(--brand) 28%, transparent),
          var(--glass-shadow),
          var(--shadow-1);
      }
    }

    /* 背景图样式优化 */
    .background-image {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      object-fit: cover;
      z-index: -3;
      opacity: 0.85;
      transition: opacity 0.5s ease;
      pointer-events: none;
    }

    /* 深色主题下背景图调整 */
    .theme-dark .background-image,
    .theme-neon .background-image,
    .theme-tech .background-image {
      filter: brightness(0.7) contrast(1.1);
    }

    /* 段落区域也添加玻璃效果 */
    .paragraphs p {
      margin: 10px 0;
      padding: 15px;
      background: color-mix(in srgb, var(--glass-bg) 85%, transparent);
      backdrop-filter: var(--backdrop-blur);
      -webkit-backdrop-filter: var(--backdrop-blur);
      border: 1px solid var(--glass-border);
      border-radius: var(--radius-btn);
      font-size: var(--fs-sm);
      line-height: 1.6;
      color: var(--ink);
      box-shadow: var(--glass-shadow);
    }

    /* Logo 区域玻璃效果增强 */
    .logo{
      width:56px;
      height:56px;
      border-radius:14px;
      display:grid;
      place-items:center;
      margin:0 auto 8px;
      background:linear-gradient(135deg,var(--brand),var(--brand2));
      color:#fff;
      font-weight:800;
      letter-spacing:.5px;
      box-shadow: 
        0 8px 20px #00000020,
        var(--glass-shadow);
      filter:var(--btn-glow);
      animation:floatY 4s ease-in-out infinite, sway 7.2s ease-in-out infinite, logoPop .8s var(--ease-entr) both;
      position: relative;
      overflow: hidden;
    }

    /* 状态徽章玻璃效果 */
    .chip{
      font-size:calc(var(--fs-xs) + 1px);
      font-weight:800;
      padding:.42rem .7rem;
      border-radius:999px;
      min-width:72px;
      text-align:center;
      border:1px solid var(--glass-border);
      background: color-mix(in srgb, var(--glass-bg) 85%, transparent);
      backdrop-filter: var(--backdrop-blur);
      -webkit-backdrop-filter: var(--backdrop-blur);
      color:var(--ink);
      will-change:transform;
      position:relative;
      box-shadow: var(--glass-shadow);
    }

    /* 减少运动模式下的玻璃效果 */
    @media (prefers-reduced-motion: reduce){
      .card, .btn, .paragraphs p, .chip {
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
      }
    }

    /* 右侧组合：延迟 + 箭头 一起靠右 */
    .right{margin-left:auto; display:flex; align-items:center; gap:8px;}
    .arrow{display:inline-grid;place-items:center;width:22px;height:22px;flex:0 0 22px;transition:transform .28s var(--ease-entr)}
    @media (hover:hover){ .btn:hover .arrow{ transform:translateX(2px) rotate(-12deg) }}

    /* 新悬浮方案：描边扫光 + 浅覆层（颜色随 --brand / --paper） */
    @media (hover:hover){
      .btn::after{
        content:""; position:absolute; inset:0; border-radius:inherit; z-index:0;
        background:color-mix(in srgb, var(--brand) 14%, transparent 86%);
        opacity:0; transform:translateY(4px); filter:saturate(1.02);
        transition:opacity .35s var(--ease-entr), transform .35s var(--ease-entr), filter .35s var(--ease-entr);
      }
      .btn::before{
        content:""; position:absolute; inset:-1px; border-radius:inherit; z-index:1; pointer-events:none;
        background:linear-gradient(100deg, transparent 35%, color-mix(in srgb, var(--brand) 75%, #fff) 50%, transparent 65%);
        background-size:200% 100%; background-position:0% 50%; opacity:0;
        transition:opacity .35s var(--ease-entr), background-position .6s ease;
      }
      .btn:hover{
        transform:translateY(-3px);
        box-shadow:0 12px 28px color-mix(in srgb, var(--brand) 28%, transparent), var(--shadow-1);
      }
      .btn:hover::after{ opacity:.9; transform:translateY(0); }
      .btn:hover::before{ opacity:1; background-position:100% 50%; }
    }
    /* 保证内容在覆层之上 */
    .btn > *{ position:relative; z-index:2 }

    .btn:active{transform:translateY(0) scale(.985);filter:brightness(.95)}
    .btn:focus-visible{outline:2px solid color-mix(in srgb,var(--brand) 70%, #fff); outline-offset:3px}

    .left{display:flex;align-items:center;gap:10px;font-weight:800}
    .tag{font-size:var(--fs-xs);font-weight:800;padding:.28rem .58rem;border-radius:999px;background:color-mix(in srgb,var(--brand2) 18%, #fff);color:#0b1320;border:1px solid color-mix(in srgb,var(--brand2) 40%, #fff)}

    /* 状态徽章 + 状态动画 */
    .chip::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;opacity:0;transition:opacity .3s ease}
    .good{background:var(--good-bg);color:var(--good-ink);border-color:var(--good-bd)}
    .warn{background:var(--warn-bg);color:var(--warn-ink);border-color:var(--warn-bd)}
    .bad{ background:var(--bad-bg); color:var(--bad-ink); border-color:var(--bad-bd)}
    .warn::after{opacity:1;mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;padding:1px;background:var(--grad-warn)}
    .bad::after{opacity:1;mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;padding:1px;background:var(--grad-bad)}
    .chip.pulse{animation:pulse 1.6s ease-in-out infinite}
    @keyframes pulse{0%,100%{transform:scale(1)}45%{transform:scale(1.06)}}
    .chip.twinkle{animation:tw .3s ease-out}
    @keyframes tw{0%{filter:brightness(1.18)}100%{filter:brightness(1)}}

    /* 轻扫高光（仅 hover 设备启用） */
    .sheen{position:absolute;inset:0;border-radius:inherit;overflow:hidden;pointer-events:none}
    .sheen::before{content:"";position:absolute;inset:-40%;transform:skewX(-22deg) translateX(-120%);background:linear-gradient(90deg,transparent,#ffffff80 40%,transparent 60%);transition:transform .9s var(--ease-entr)}
    @media (hover:hover){ .btn:hover .sheen::before{transform:skewX(-22deg) translateX(120%)} }

    /* ripple 波纹 */
    .ripple{position:absolute; border-radius:50%; pointer-events:none; transform:translate(-50%, -50%); opacity:.35; background:currentColor; mix-blend-mode:multiply; animation:ripple .6s ease-out forwards}
    @keyframes ripple{from{width:0;height:0;opacity:.35}to{width:360px;height:360px;opacity:0}}

    .foot{margin-top:14px;font-size:var(--fs-xs);color:var(--muted);text-align:center}

    /* 主题动效：装饰漂移（仅 neon/tech） */
    body.theme-neon .decor,
    body.theme-tech .decor{animation:drift 22s ease-in-out infinite}
    @keyframes drift{0%,100%{filter:saturate(1) hue-rotate(0deg)}50%{filter:saturate(1.05) hue-rotate(8deg)}}

    /* bump、加载骨架、ripple、卡片倾斜等 */
    @keyframes bump{0%{transform:scale(1)}35%{transform:scale(1.08)}100%{transform:scale(1)}}
    .chip.bump{animation:bump .28s ease-out}
    .chip.loading{color:transparent; position:relative; overflow:hidden}
    .chip.loading::after{content:""; position:absolute; inset:0; background:linear-gradient(90deg, transparent, #ffffff66, transparent); transform:translateX(-120%); animation:shimmer 1.1s linear infinite}
    @keyframes shimmer{100%{transform:translateX(120%)}}

    .card.tilt{transition:transform .12s ease; will-change:transform}
    .theme-fade{transition:background-color .35s ease, color .35s ease, filter .35s ease}

    /* 粒子（仅 neon/tech 渲染） */
    .particles{position:absolute;inset:-10%;pointer-events:none;filter:blur(0.2px);opacity:.22}
    .particle{position:absolute;width:3px;height:3px;border-radius:50%;background:currentColor;animation:float 8s linear infinite}
    @keyframes float{from{transform:translateY(0)}to{transform:translateY(-40vh)}}

    /* Logo 浮动动画 */
    @keyframes floatY {
      0%, 100% { transform: translateY(0px); }
      50% { transform: translateY(-6px); }
    }

    @keyframes sway {
      0%, 100% { transform: rotate(0deg); }
      25% { transform: rotate(1deg); }
      75% { transform: rotate(-1deg); }
    }

    @keyframes logoPop {
      0% { opacity: 0; transform: scale(0.8) rotate(-10deg); }
      100% { opacity: 1; transform: scale(1) rotate(0deg); }
    }

    /* 高对比度模式 */
    @media (prefers-contrast: more){
      .btn{border-color:color-mix(in srgb, var(--brand) 45%, var(--border))}
      .btn:focus-visible{outline-width:3px}
      .chip{border-width:2px}
    }

    @media (prefers-reduced-motion: reduce){
      .card,.btn,.sheen::before{transition:none}
      .btn,.stack.ready .btn{animation:none;opacity:1;transform:none}
      .btn:hover{transform:none}
      .sheen::before{transform:none}
      .logo{animation:none}
      .chip.bump,.chip.pulse,.chip.twinkle{animation:none}
      .ripple{animation:none}
      .decor{animation:none}
    }

    .logo img{
      width:100%;
      height:100%;
      object-fit:contain;
      border-radius:inherit;
      display:block;
    }

    /* 标题和副标题样式 */
    h1 {
      font-size: var(--fs-xl);
      font-weight: 800;
      text-align: center;
      margin: 0 0 4px 0;
      background: linear-gradient(135deg, var(--brand), var(--brand2));
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
    }

    .sub {
      font-size: var(--fs-sm);
      color: var(--muted);
      text-align: center;
      margin: 0 0 20px 0;
      font-weight: 500;
    }

    /* 背景图样式 */
    .background-image {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      object-fit: cover;
      z-index: -2;
      opacity: 0.85;
      transition: opacity 0.5s ease;
    }
    
    /* 确保背景图不会影响内容点击 */
    .background-image {
      pointer-events: none;
    }
    
    /* 深色主题下降低背景图亮度 */
    .theme-dark .background-image,
    .theme-neon .background-image,
    .theme-tech .background-image {
      filter: brightness(0.7) contrast(1.1);
    }