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

  /* ==================== 颜色变量 ==================== */
  :root,
  [data-theme="dark"] {
    --bg: #0a0a0f;
    --orb-a: #7c3aed;
    --orb-b: #06b6d4;
    --orb-c: #f59e0b;
    --orb-opacity: .15;
    --grid-line: rgba(255,255,255,.03);
    --card-bg: rgba(255,255,255,.03);
    --card-border: rgba(255,255,255,.06);
    --card-shadow-a: rgba(124,58,237,.08);
    --card-shadow-b: rgba(6,182,212,.05);
    --shimmer-clr: rgba(255,255,255,.08);
    --border-glow-a: rgba(124,58,237,.15);
    --border-glow-b: rgba(6,182,212,.25);
    --border-shadow-a: rgba(124,58,237,.06);
    --border-shadow-b: rgba(6,182,212,.12);
    --greeting: #7c3aed;
    --title-1: #e0e7ff;
    --title-2: #a5b4fc;
    --title-3: #818cf8;
    --title-4: #6366f1;
    --subtitle: #94a3b8;
    --divider-a: #7c3aed;
    --divider-b: #06b6d4;
    --label: #64748b;
    --value: #cbd5e1;
    --footer: #475569;
    --toggle-bg: rgba(255,255,255,.06);
    --toggle-border: rgba(255,255,255,.1);
    --toggle-icon: #94a3b8;
  }

  [data-theme="light"] {
    --bg: #f8f7fc;
    --orb-a: #f97316;
    --orb-b: #f472b6;
    --orb-c: #fbbf24;
    --orb-opacity: .18;
    --grid-line: rgba(0,0,0,.04);
    --card-bg: rgba(255,255,255,.65);
    --card-border: rgba(0,0,0,.06);
    --card-shadow-a: rgba(249,115,22,.12);
    --card-shadow-b: rgba(244,114,182,.08);
    --shimmer-clr: rgba(255,255,255,.35);
    --border-glow-a: rgba(249,115,22,.2);
    --border-glow-b: rgba(244,114,182,.3);
    --border-shadow-a: rgba(249,115,22,.08);
    --border-shadow-b: rgba(244,114,182,.15);
    --greeting: #f97316;
    --title-1: #7c2d12;
    --title-2: #c2410c;
    --title-3: #f97316;
    --title-4: #be185d;
    --subtitle: #78716c;
    --divider-a: #f97316;
    --divider-b: #f472b6;
    --label: #a8a29e;
    --value: #57534e;
    --footer: #a8a29e;
    --toggle-bg: rgba(0,0,0,.04);
    --toggle-border: rgba(0,0,0,.08);
    --toggle-icon: #78716c;
  }

  /* ==================== 基础 ==================== */
  body {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bg);
    font-family: "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif;
    overflow: hidden;
    transition: background .6s ease;
  }

  /* ==================== 网格背景 ==================== */
  .bg-grid {
    position: fixed; inset: 0;
    background-image:
      linear-gradient(var(--grid-line) 1px, transparent 1px),
      linear-gradient(90deg, var(--grid-line) 1px, transparent 1px);
    background-size: 60px 60px;
    pointer-events: none;
    animation: gridDrift 30s linear infinite;
    transition: background-image .6s ease;
  }
  @keyframes gridDrift {
    0%   { background-position: 0 0, 0 0; }
    100% { background-position: 60px 60px, 60px 60px; }
  }

  /* ==================== 光球 ==================== */
  .bg-orb {
    position: fixed;
    border-radius: 50%;
    filter: blur(120px);
    opacity: var(--orb-opacity);
    pointer-events: none;
    transition: background .6s ease, opacity .6s ease;
  }
  .bg-orb:nth-child(2) {
    width: 500px; height: 500px; background: var(--orb-a);
    animation: orbFloat1 10s ease-in-out infinite;
  }
  .bg-orb:nth-child(3) {
    width: 400px; height: 400px; background: var(--orb-b);
    animation: orbFloat2 12s ease-in-out infinite;
  }
  .bg-orb:nth-child(4) {
    width: 300px; height: 300px; background: var(--orb-c);
    animation: orbFloat3 8s ease-in-out infinite;
  }

  @keyframes orbFloat1 {
    0%,100% { top: -200px; left: -100px; }
    33%     { top: -60px;  left: 300px;  }
    66%     { top: 200px;  left: -80px;  }
  }
  @keyframes orbFloat2 {
    0%,100% { bottom: -150px; right: -100px; }
    50%     { bottom: 80px;   right: 300px;  }
  }
  @keyframes orbFloat3 {
    0%,100% { top: 50%;  left: 60%; }
    25%     { top: 35%;  left: 70%; }
    50%     { top: 60%;  left: 50%; }
    75%     { top: 40%;  left: 75%; }
  }

  /* ==================== 主题切换按钮 ==================== */
  .theme-toggle {
    position: fixed;
    top: 28px; right: 28px;
    z-index: 10;
    width: 44px; height: 44px;
    border-radius: 12px;
    background: var(--toggle-bg);
    border: 1px solid var(--toggle-border);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    color: var(--toggle-icon);
    transition: all .35s ease;
    outline: none;
  }
  .theme-toggle:hover {
    transform: scale(1.08);
    border-color: var(--orb-a);
  }
  .theme-toggle:active {
    transform: scale(.94);
  }

  /* ==================== 卡片 ==================== */
  .card {
    position: relative; z-index: 1;
    max-width: 700px; width: 90vw;
    padding: 60px 40px;
    border-radius: 24px;
    background: var(--card-bg);
    border: 1px solid var(--card-border);
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
    text-align: center;
    box-shadow: 0 8px 60px var(--card-shadow-a), 0 2px 20px var(--card-shadow-b);
    animation: cardIn .8s cubic-bezier(.16,1,.3,1), cardFloat 6s ease-in-out 1s infinite;
    overflow: hidden;
    transition: background .6s ease, border-color .6s ease, box-shadow .6s ease;
  }

  .card::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, transparent 40%, var(--shimmer-clr) 50%, transparent 60%);
    animation: shimmer 5s ease-in-out infinite;
    pointer-events: none;
    z-index: 1;
  }

  .card::after {
    content: "";
    position: absolute;
    inset: -1px;
    border-radius: 24px;
    border: 2px solid transparent;
    animation: borderGlow 4s ease-in-out infinite;
    pointer-events: none;
    z-index: 0;
  }

  @keyframes cardIn {
    from { opacity: 0; transform: translateY(30px) scale(.97); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
  }
  @keyframes cardFloat {
    0%,100% { transform: translateY(0); }
    50%     { transform: translateY(-8px); }
  }
  @keyframes shimmer {
    0%   { opacity: 0; transform: translateX(-100%) skewX(-15deg); }
    45%  { opacity: 0; transform: translateX(-100%) skewX(-15deg); }
    55%  { opacity: 1; transform: translateX(100%) skewX(-15deg); }
    100% { opacity: 0; transform: translateX(100%) skewX(-15deg); }
  }
  @keyframes borderGlow {
    0%,100% { border-color: var(--border-glow-a); box-shadow: 0 0 20px var(--border-shadow-a), inset 0 0 20px rgba(124,58,237,.03); }
    50%     { border-color: var(--border-glow-b); box-shadow: 0 0 40px var(--border-shadow-b), inset 0 0 40px rgba(6,182,212,.06); }
  }

  /* ==================== 内容 ==================== */
  .greeting {
    position: relative; z-index: 2;
    font-size: 14px;
    text-transform: uppercase;
    letter-spacing: 6px;
    color: var(--greeting);
    margin-bottom: 24px;
    animation: pulseText 3s ease-in-out infinite;
    transition: color .6s ease;
  }
  @keyframes pulseText {
    0%,100% { opacity: .7; }
    50%     { opacity: 1; }
  }

  .card-content {
    position: relative; z-index: 2;
  }

  h1 {
    font-size: clamp(36px, 8vw, 72px);
    font-weight: 700;
    background: linear-gradient(135deg, var(--title-1) 0%, var(--title-2) 40%, var(--title-3) 70%, var(--title-4) 100%);
    background-size: 200% 200%;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    line-height: 1.2;
    margin-bottom: 8px;
    animation: gradientShift 8s ease-in-out infinite;
  }
  @keyframes gradientShift {
    0%,100% { background-position: 0% 50%; }
    50%     { background-position: 100% 50%; }
  }

  .subtitle {
    font-size: clamp(20px, 4vw, 32px);
    font-weight: 300;
    color: var(--subtitle);
    margin-bottom: 40px;
    transition: color .6s ease;
  }

  .divider {
    width: 60px; height: 2px;
    background: linear-gradient(90deg, var(--divider-a), var(--divider-b));
    margin: 0 auto 36px;
    border-radius: 1px;
    animation: dividerPulse 3s ease-in-out infinite;
    transition: background .6s ease;
  }
  @keyframes dividerPulse {
    0%,100% { width: 60px; opacity: .6; }
    50%     { width: 100px; opacity: 1; }
  }

  .meta {
    display: flex;
    gap: 32px;
    justify-content: center;
    flex-wrap: wrap;
  }
  .meta-item {
    text-align: center;
  }
  .meta-item .label {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: var(--label);
    margin-bottom: 4px;
    transition: color .6s ease;
  }
  .meta-item .value {
    font-size: 14px;
    color: var(--value);
    font-weight: 500;
    transition: color .6s ease;
  }

  /* ==================== 页脚 ==================== */
  .footer {
    position: fixed; bottom: 24px;
    width: 100%; text-align: center;
    z-index: 1;
  }
  .footer span {
    font-size: 12px;
    color: var(--footer);
    letter-spacing: 1px;
    transition: color .6s ease;
  }