/* ===== 基础变量（主题可覆盖） ===== */
: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;

  /* 状态色（默认亮色主题） */
  --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%);
}
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;
}
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;
}
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;
}
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;
}
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;
}

/* ===== 布局与组件 ===== */
*{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}
.card{width:var(--card-w);background:var(--paper);border-radius:var(--radius-card);border:1px solid var(--border);box-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)}}

/* 顶部标题与 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;filter:var(--btn-glow);animation:floatY 4s ease-in-out infinite, sway 7.2s ease-in-out infinite, logoPop .8s var(--ease-entr) both}
.logo::after{content:"";position:absolute;inset:-6px;border-radius:inherit;box-shadow:0 0 0 0 rgba(255,255,255,.0);animation:halo 3.6s ease-in-out infinite}
@keyframes logoPop{0%{transform:scale(.92);filter:saturate(1.05)}60%{transform:scale(1.04)}100%{transform:scale(1)}}
@keyframes halo{0%,100%{box-shadow:0 0 0 0 rgba(255,255,255,.0)}50%{box-shadow:0 0 0 8px rgba(255,255,255,.08)}}
@keyframes floatY{0%,100%{transform:translateZ(0) translateY(0)}50%{transform:translateZ(0) translateY(-4px)}}
@keyframes sway{0%,100%{rotate:0deg}25%{rotate:1.2deg}50%{rotate:0deg}75%{rotate:-1.2deg}}
h1{margin:4px 0 6px;font-size:var(--fs-xl);line-height:1.15;text-align:center}
.sub{margin:0 auto 18px;max-width:56ch;text-align:center;font-size:var(--fs-sm);color:var(--muted)}

/* 段落样式 */
.paragraphs {
  margin: 20px 0;
  padding: 0;
}
.paragraphs p {
  margin: 10px 0;
  padding: 15px;
  background: color-mix(in srgb, var(--paper) 95%, #fff);
  border: 1px solid var(--border);
  border-radius: var(--radius-btn);
  font-size: var(--fs-sm);
  line-height: 1.6;
  color: var(--ink);
}

/* 链接按钮与入场分步动画 */
.stack{display:grid;gap:var(--space-3);position:relative}
.btn{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  background:color-mix(in srgb,var(--paper) 92%, #fff);color:inherit;
  border:1px solid var(--border);border-radius:var(--radius-btn);
  padding:14px 16px;text-decoration:none;box-shadow:var(--shadow-1);
  transition:transform var(--dur-fast) ease, box-shadow var(--dur-fast) ease, border-color var(--dur-fast) ease, background 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}
@keyframes fadeUp{to{opacity:1;transform:translateY(0)}}

/* 右侧组合：延迟 + 箭头 一起靠右 */
.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%, var(--paper) 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{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(--border);background:#f3f4f6;color:#111827;will-change:transform;position:relative}
.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)}}

/* 高对比度模式 */
@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;
}