/* ============================================================
   商家联盟 · 平台导航 — 4套完全独立主题
   apple: 苹果质感（大圆角/留白/柔和）
   glass: 玻璃拟态（毛玻璃/渐变/3D倾斜）
   dark:  暗黑科技（终端风/等宽/霓虹扫描线）
   magazine: 卡片杂志（砌体/衬线/报纸排版）
   ============================================================ */

/* ===== Reset & Tokens ===== */
*,*::before,*::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; -webkit-tap-highlight-color: transparent; }

:root {
  --maxw: 50rem; --safe-top: env(safe-area-inset-top,0px); --safe-bottom: env(safe-area-inset-bottom,0px);
  --ff-sans: -apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Noto Sans SC","Microsoft YaHei",sans-serif;
  --ff-mono: "JetBrains Mono","SF Mono",Consolas,monospace;
  --sp-1: .25rem; --sp-2: .5rem; --sp-3: .75rem; --sp-4: 1rem; --sp-5: 1.25rem; --sp-6: 1.5rem; --sp-7: 2rem; --sp-8: 2.5rem; --sp-9: 3rem;
  --r-sm: .25rem; --r-md: .5rem; --r-lg: .75rem; --r-xl: 1rem; --r-2xl: 1.5rem;
  --dur-fast: 120ms; --dur-base: 220ms; --dur-slow: 400ms;
  --ease: cubic-bezier(.4,0,.2,1); --ease-bounce: cubic-bezier(.34,1.56,.64,1);
  --fs-1: .75rem; --fs-2: .9375rem; --fs-3: 1.17188rem; --fs-4: 1.46484rem; --fs-5: 1.83105rem; --fs-6: 2.28881rem;
  --fw-regular: 400; --fw-medium: 500; --fw-semibold: 600; --fw-bold: 700;
}

body {
  margin: 0; font-size: var(--fs-1); line-height: 1.6;
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
  min-height: 100vh; display: flex; flex-direction: column;
  transition: background var(--dur-slow) var(--ease), color var(--dur-slow) var(--ease);
}
img { max-width: 100%; display: block; }
a { text-decoration: none; color: inherit; }
button { font-family: inherit; cursor: pointer; border: none; background: none; }
h1,h2,h3,h4 { margin: 0; }
.container { width: 100%; max-width: var(--maxw); margin: 0 auto; }
.hero, .section { flex-shrink: 0; }
.footer { margin-top: auto; }

/* ===== 通用: 滚动揭示 + 速度指示器骨架 ===== */
.reveal { opacity: 0; transform: translateY(.75rem); transition: opacity .5s var(--ease), transform .5s var(--ease-bounce); }
.reveal.visible { opacity: 1; transform: none; }
.speed { display: inline-flex; align-items: center; gap: .25rem; padding: .125rem .5rem; border-radius: 999px; font-size: var(--fs-1); font-weight: var(--fw-semibold); font-family: var(--ff-mono); white-space: nowrap; }
.speed::before { content: ""; width: .375rem; height: .375rem; border-radius: 50%; background: currentColor; flex-shrink: 0; }
.speed-loading::before { background: conic-gradient(from 0deg,currentColor,transparent 70%); animation: spin .9s linear infinite; width: .5rem; height: .5rem; }
@keyframes spin { to { transform: rotate(360deg); } }
.hide { display: none !important; }

/* ████████████████████████████████████████████████████ */
/* ██  主题 1: 苹果质感                                ██ */
/* ████████████████████████████████████████████████████ */
[data-theme="apple"] {
  --c-bg: #f5f5f7; --c-bg-elev: #fff; --c-bg-sunken: #eeeef1;
  --c-text: #1d1d1f; --c-text-2: #424246; --c-text-3: #6e6e73; --c-text-4: #aeaeb2;
  --c-border: #d2d2d7; --c-border-2: #c7c7cc;
  --c-accent: #0071e3; --c-accent-hover: #0058b9; --c-accent-bg: #e8f1fd;
  --c-danger: #ff3b30; --c-success: #34c759;
  --shadow-sm: 0 1px 3px rgba(0,0,0,.06); --shadow-md: 0 4px 16px rgba(0,0,0,.08); --shadow-lg: 0 12px 40px rgba(0,0,0,.1);
  --ff-body: var(--ff-sans);
}
[data-theme="apple"] body { font-family: var(--ff-sans); color: var(--c-text); background: var(--c-bg); }
[data-theme="apple"] .container { max-width: 48rem; padding: 0 var(--sp-6); }
[data-theme="apple"] .topbar {
  position: sticky; top: 0; z-index: 50;
  background: rgba(255,255,255,.72); backdrop-filter: saturate(180%) blur(20px); -webkit-backdrop-filter: saturate(180%) blur(20px);
  border-bottom: 1px solid var(--c-border); padding-top: var(--safe-top);
}
[data-theme="apple"] .topbar-inner { display: flex; align-items: center; justify-content: space-between; height: 3.25rem; }
[data-theme="apple"] .brand-mark { font-size: var(--fs-3); font-weight: 700; letter-spacing: -.01em; }
[data-theme="apple"] .brand-mark .dot { color: var(--c-accent); }
[data-theme="apple"] .brand-text { font-size: var(--fs-1); color: var(--c-text-4); }
[data-theme="apple"] .topbar nav { display: flex; gap: var(--sp-5); }
[data-theme="apple"] .topbar nav a { font-size: var(--fs-1); color: var(--c-text-3); font-weight: 500; padding: var(--sp-1) var(--sp-3); border-radius: var(--r-md); transition: all var(--dur-fast); }
[data-theme="apple"] .topbar nav a:hover { color: var(--c-text); background: var(--c-bg-sunken); }
[data-theme="apple"] .topbar nav a.active { color: var(--c-accent); }
[data-theme="apple"] .hero { padding: var(--sp-9) 0 var(--sp-8); text-align: center; }
[data-theme="apple"] .hero .eyebrow { font-size: var(--fs-1); color: var(--c-text-4); font-weight: 500; letter-spacing: .05em; display: block; margin-bottom: var(--sp-3); }
[data-theme="apple"] .hero h1 { font-size: var(--fs-6); font-weight: 700; letter-spacing: -.02em; margin-bottom: var(--sp-3); }
[data-theme="apple"] .hero h1 .accent { color: var(--c-accent); }
[data-theme="apple"] .hero .lede { font-size: var(--fs-2); color: var(--c-text-3); max-width: 32rem; margin: 0 auto; }
[data-theme="apple"] .hero .eyebrow, [data-theme="apple"] .hero h1, [data-theme="apple"] .hero .lede { opacity: 0; transform: translateY(.75rem); animation: apple-hero .6s var(--ease) forwards; }
[data-theme="apple"] .hero .eyebrow { animation-delay: .05s; }
[data-theme="apple"] .hero h1 { animation-delay: .12s; }
[data-theme="apple"] .hero .lede { animation-delay: .2s; }
@keyframes apple-hero { to { opacity: 1; transform: none; } }
[data-theme="apple"] .section { padding: var(--sp-8) 0; }
[data-theme="apple"] .section-head { display: flex; align-items: center; gap: var(--sp-4); margin-bottom: var(--sp-6); flex-wrap: wrap; }
[data-theme="apple"] .section-head .no { font-size: var(--fs-1); color: var(--c-text-4); font-family: var(--ff-mono); }
[data-theme="apple"] .section-head h2 { font-size: var(--fs-4); font-weight: 700; letter-spacing: -.01em; }
[data-theme="apple"] .section-head .desc { margin-left: auto; font-size: var(--fs-1); color: var(--c-text-4); }
[data-theme="apple"] .section-head .desc span { color: var(--c-accent); font-weight: 600; }
[data-theme="apple"] .grid { display: grid; grid-template-columns: repeat(2,1fr); gap: var(--sp-4); }
[data-theme="apple"] .card {
  background: var(--c-bg-elev); border: 1px solid var(--c-border); border-radius: var(--r-xl);
  padding: var(--sp-5); display: flex; flex-direction: column; gap: var(--sp-3);
  box-shadow: var(--shadow-sm); transition: transform var(--dur-base) var(--ease-bounce), box-shadow var(--dur-base);
  color: inherit;
}
[data-theme="apple"] .card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
[data-theme="apple"] .card:active { transform: scale(.98); }
[data-theme="apple"] .card-top { display: flex; align-items: center; gap: var(--sp-3); }
[data-theme="apple"] .badge { width: 2.25rem; height: 2.25rem; border-radius: var(--r-lg); display: grid; place-items: center; background: var(--c-accent-bg); color: var(--c-accent); transition: transform var(--dur-base) var(--ease-bounce); }
[data-theme="apple"] .card:hover .badge { transform: scale(1.08); }
[data-theme="apple"] .card-name { font-size: var(--fs-3); font-weight: 600; line-height: 1.3; }
[data-theme="apple"] .card-host { font-size: var(--fs-1); color: var(--c-text-4); font-family: var(--ff-mono); margin-top: .125rem; }
[data-theme="apple"] .card-desc { font-size: var(--fs-1); color: var(--c-text-3); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
[data-theme="apple"] .card-foot { display: flex; align-items: center; justify-content: space-between; margin-top: auto; padding-top: var(--sp-3); border-top: 1px solid var(--c-border); }
[data-theme="apple"] .card-tag { font-size: var(--fs-1); color: var(--c-text-4); font-weight: 500; }
[data-theme="apple"] .card-meta { display: flex; align-items: center; gap: var(--sp-2); }
[data-theme="apple"] .card-arrow { width: 1.75rem; height: 1.75rem; display: grid; place-items: center; background: var(--c-bg-sunken); color: var(--c-text-3); border-radius: var(--r-md); font-size: var(--fs-2); transition: all var(--dur-base); }
[data-theme="apple"] .card:hover .card-arrow { background: var(--c-accent); color: #fff; transform: translateX(2px); }
[data-theme="apple"] .speed-fast { background: rgba(52,199,89,.12); color: #2a9d5c; }
[data-theme="apple"] .speed-medium { background: rgba(255,149,0,.12); color: #b5720e; }
[data-theme="apple"] .speed-slow { background: rgba(255,59,48,.12); color: #d32f2f; }
[data-theme="apple"] .speed-offline { background: var(--c-bg-sunken); color: var(--c-text-4); }
[data-theme="apple"] .speed-loading { background: var(--c-bg-sunken); color: var(--c-text-4); }
[data-theme="apple"] .about-section { padding-top: var(--sp-9); }
[data-theme="apple"] .about-section .lede { font-size: var(--fs-2); color: var(--c-text-3); max-width: 32rem; }
[data-theme="apple"] .footer { border-top: 1px solid var(--c-border); padding: var(--sp-5) 0 var(--sp-4); padding-bottom: calc(var(--sp-4) + var(--safe-bottom)); }
[data-theme="apple"] .footer-inner { display: flex; justify-content: space-between; align-items: center; gap: var(--sp-4); flex-wrap: wrap; }
[data-theme="apple"] .footer .copy { font-size: var(--fs-1); color: var(--c-text-4); }
[data-theme="apple"] .footer-links { display: flex; gap: var(--sp-5); }
[data-theme="apple"] .footer-links a { font-size: var(--fs-1); color: var(--c-text-3); font-weight: 500; }
[data-theme="apple"] .footer-links a:hover { color: var(--c-accent); }
[data-theme="apple"] .beian-row { margin-top: var(--sp-4); padding-top: var(--sp-4); border-top: 1px solid var(--c-border); text-align: center; }
[data-theme="apple"] .beian-row a { color: var(--c-text-4); font-size: var(--fs-1); margin: 0 var(--sp-2); }
[data-theme="apple"] .btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-2); padding: .5rem 1rem; border-radius: var(--r-md); font-size: var(--fs-1); font-weight: 600; transition: all var(--dur-base); }
[data-theme="apple"] .btn-primary { background: var(--c-accent); color: #fff; }
[data-theme="apple"] .btn-primary:hover { background: var(--c-accent-hover); }
[data-theme="apple"] .btn-ghost { background: var(--c-bg-elev); border: 1px solid var(--c-border); color: var(--c-text-2); }
[data-theme="apple"] .btn-ghost:hover { border-color: var(--c-border-2); color: var(--c-text); }
[data-theme="apple"] .btn-sm { padding: .25rem .625rem; border-radius: var(--r-sm); }
[data-theme="apple"] .btn-danger { background: transparent; border: 1px solid var(--c-border); color: var(--c-danger); }
[data-theme="apple"] .btn-danger:hover { background: var(--c-danger); color: #fff; }

/* ████████████████████████████████████████████████████ */
/* ██  主题 2: 玻璃拟态                                ██ */
/* ████████████████████████████████████████████████████ */
[data-theme="glass"] {
  --c-bg: #0f0f1a; --c-bg-elev: rgba(255,255,255,.07); --c-bg-sunken: rgba(255,255,255,.03);
  --c-text: #f0f0f5; --c-text-2: #c8c8d4; --c-text-3: #9a9aae; --c-text-4: #6a6a7e;
  --c-border: rgba(255,255,255,.10); --c-border-2: rgba(255,255,255,.20);
  --c-accent: #c084fc; --c-accent-hover: #a855f7; --c-accent-bg: rgba(192,132,252,.12);
  --c-danger: #fb7185; --c-success: #34d399;
  --ff-body: var(--ff-sans);
}
[data-theme="glass"] body { font-family: var(--ff-sans); color: var(--c-text); background: var(--c-bg); }
[data-theme="glass"] body::before {
  content: ""; position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background: radial-gradient(ellipse at 20% 0%, rgba(192,132,252,.18), transparent 50%),
              radial-gradient(ellipse at 80% 100%, rgba(96,165,250,.12), transparent 50%),
              radial-gradient(ellipse at 50% 50%, rgba(168,85,247,.05), transparent 70%);
}
[data-theme="glass"] .topbar, [data-theme="glass"] .hero, [data-theme="glass"] .section, [data-theme="glass"] .footer { position: relative; z-index: 1; }
[data-theme="glass"] .container { max-width: 48rem; padding: 0 var(--sp-6); }
[data-theme="glass"] .topbar {
  position: sticky; top: 0; z-index: 50;
  background: rgba(15,15,26,.6); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
  border-bottom: 1px solid var(--c-border); padding-top: var(--safe-top);
}
[data-theme="glass"] .topbar-inner { display: flex; align-items: center; justify-content: space-between; height: 3.25rem; }
[data-theme="glass"] .brand-mark { font-size: var(--fs-3); font-weight: 700; letter-spacing: -.01em; }
[data-theme="glass"] .brand-mark .dot { color: var(--c-accent); }
[data-theme="glass"] .brand-text { font-size: var(--fs-1); color: var(--c-text-4); }
[data-theme="glass"] .topbar nav { display: flex; gap: var(--sp-5); }
[data-theme="glass"] .topbar nav a { font-size: var(--fs-1); color: var(--c-text-3); font-weight: 500; padding: var(--sp-1) var(--sp-3); border-radius: var(--r-md); transition: all var(--dur-fast); }
[data-theme="glass"] .topbar nav a:hover { color: var(--c-text); background: var(--c-bg-elev); }
[data-theme="glass"] .topbar nav a.active { color: var(--c-accent); background: var(--c-accent-bg); }
[data-theme="glass"] .hero { padding: var(--sp-9) 0 var(--sp-8); text-align: center; }
[data-theme="glass"] .hero .eyebrow { font-size: var(--fs-1); color: var(--c-text-4); font-weight: 500; letter-spacing: .1em; text-transform: uppercase; display: block; margin-bottom: var(--sp-3); }
[data-theme="glass"] .hero h1 { font-size: var(--fs-6); font-weight: 700; letter-spacing: -.02em; margin-bottom: var(--sp-3); }
[data-theme="glass"] .hero h1 .accent { background: linear-gradient(135deg, var(--c-accent), #60a5fa); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
[data-theme="glass"] .hero .lede { font-size: var(--fs-2); color: var(--c-text-3); max-width: 30rem; margin: 0 auto; }
[data-theme="glass"] .hero .eyebrow, [data-theme="glass"] .hero h1, [data-theme="glass"] .hero .lede { opacity: 0; transform: translateY(1rem); animation: glass-hero .8s var(--ease) forwards; }
[data-theme="glass"] .hero .eyebrow { animation-delay: .1s; }
[data-theme="glass"] .hero h1 { animation-delay: .2s; }
[data-theme="glass"] .hero .lede { animation-delay: .35s; }
@keyframes glass-hero { to { opacity: 1; transform: none; } }
[data-theme="glass"] .section { padding: var(--sp-8) 0; }
[data-theme="glass"] .section-head { display: flex; align-items: center; gap: var(--sp-4); margin-bottom: var(--sp-6); flex-wrap: wrap; }
[data-theme="glass"] .section-head .no { font-size: var(--fs-1); color: var(--c-accent); font-family: var(--ff-mono); opacity: .7; }
[data-theme="glass"] .section-head h2 { font-size: var(--fs-4); font-weight: 700; }
[data-theme="glass"] .section-head .desc { margin-left: auto; font-size: var(--fs-1); color: var(--c-text-4); }
[data-theme="glass"] .section-head .desc span { color: var(--c-accent); font-weight: 600; }
[data-theme="glass"] .grid { display: grid; grid-template-columns: repeat(2,1fr); gap: var(--sp-4); perspective: 1000px; }
[data-theme="glass"] .card {
  background: var(--c-bg-elev); border: 1px solid var(--c-border); border-radius: var(--r-xl);
  padding: var(--sp-5); display: flex; flex-direction: column; gap: var(--sp-3);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  box-shadow: 0 4px 16px rgba(0,0,0,.15); color: inherit;
  transition: transform var(--dur-base) var(--ease-bounce), box-shadow var(--dur-base), border-color var(--dur-base);
  transform-style: preserve-3d; position: relative; overflow: hidden;
}
[data-theme="glass"] .card::before {
  content: ""; position: absolute; inset: 0; border-radius: var(--r-xl);
  background: radial-gradient(circle at var(--mx,50%) var(--my,50%), rgba(255,255,255,.10), transparent 60%);
  opacity: 0; transition: opacity var(--dur-base); pointer-events: none;
}
[data-theme="glass"] .card:hover { transform: translateY(-4px) scale(1.01); box-shadow: 0 8px 32px rgba(192,132,252,.15); border-color: var(--c-border-2); }
[data-theme="glass"] .card:hover::before { opacity: 1; }
[data-theme="glass"] .card-top { display: flex; align-items: center; gap: var(--sp-3); }
[data-theme="glass"] .badge { width: 2.25rem; height: 2.25rem; border-radius: var(--r-lg); display: grid; place-items: center; background: var(--c-accent-bg); color: var(--c-accent); border: 1px solid var(--c-border); transition: transform var(--dur-base) var(--ease-bounce); }
[data-theme="glass"] .card:hover .badge { transform: scale(1.1) rotate(-5deg); }
[data-theme="glass"] .card-name { font-size: var(--fs-3); font-weight: 600; }
[data-theme="glass"] .card-host { font-size: var(--fs-1); color: var(--c-text-4); font-family: var(--ff-mono); margin-top: .125rem; }
[data-theme="glass"] .card-desc { font-size: var(--fs-1); color: var(--c-text-3); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
[data-theme="glass"] .card-foot { display: flex; align-items: center; justify-content: space-between; margin-top: auto; padding-top: var(--sp-3); border-top: 1px solid var(--c-border); }
[data-theme="glass"] .card-tag { font-size: var(--fs-1); color: var(--c-text-4); font-weight: 500; }
[data-theme="glass"] .card-meta { display: flex; align-items: center; gap: var(--sp-2); }
[data-theme="glass"] .card-arrow { width: 1.75rem; height: 1.75rem; display: grid; place-items: center; background: var(--c-bg-sunken); color: var(--c-text-3); border-radius: var(--r-md); font-size: var(--fs-2); transition: all var(--dur-base); }
[data-theme="glass"] .card:hover .card-arrow { background: var(--c-accent); color: #fff; transform: translateX(3px); }
[data-theme="glass"] .speed-fast { background: rgba(52,211,153,.15); color: #34d399; }
[data-theme="glass"] .speed-medium { background: rgba(251,191,36,.15); color: #fbbf24; }
[data-theme="glass"] .speed-slow { background: rgba(248,113,113,.15); color: #f87171; }
[data-theme="glass"] .speed-offline { background: var(--c-bg-sunken); color: var(--c-text-4); }
[data-theme="glass"] .speed-loading { background: var(--c-bg-sunken); color: var(--c-text-4); }
[data-theme="glass"] .about-section { padding-top: var(--sp-9); }
[data-theme="glass"] .about-section .lede { font-size: var(--fs-2); color: var(--c-text-3); max-width: 30rem; margin: 0 auto; text-align: center; }
[data-theme="glass"] .footer { border-top: 1px solid var(--c-border); padding: var(--sp-5) 0 var(--sp-4); padding-bottom: calc(var(--sp-4) + var(--safe-bottom)); }
[data-theme="glass"] .footer-inner { display: flex; justify-content: center; align-items: center; gap: var(--sp-5); flex-wrap: wrap; }
[data-theme="glass"] .footer .copy { font-size: var(--fs-1); color: var(--c-text-4); }
[data-theme="glass"] .footer-links { display: flex; gap: var(--sp-5); }
[data-theme="glass"] .footer-links a { font-size: var(--fs-1); color: var(--c-text-3); }
[data-theme="glass"] .footer-links a:hover { color: var(--c-accent); }
[data-theme="glass"] .beian-row { margin-top: var(--sp-3); padding-top: var(--sp-3); border-top: 1px solid var(--c-border); text-align: center; }
[data-theme="glass"] .beian-row a { color: var(--c-text-4); font-size: var(--fs-1); margin: 0 var(--sp-2); }
[data-theme="glass"] .btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-2); padding: .5rem 1rem; border-radius: var(--r-md); font-size: var(--fs-1); font-weight: 600; transition: all var(--dur-base); }
[data-theme="glass"] .btn-primary { background: var(--c-accent); color: #fff; }
[data-theme="glass"] .btn-primary:hover { background: var(--c-accent-hover); box-shadow: 0 0 20px rgba(192,132,252,.3); }
[data-theme="glass"] .btn-ghost { background: var(--c-bg-elev); border: 1px solid var(--c-border); color: var(--c-text-2); backdrop-filter: blur(12px); }
[data-theme="glass"] .btn-ghost:hover { border-color: var(--c-border-2); color: var(--c-text); }
[data-theme="glass"] .btn-sm { padding: .25rem .625rem; border-radius: var(--r-sm); }
[data-theme="glass"] .btn-danger { background: transparent; border: 1px solid var(--c-border); color: var(--c-danger); }
[data-theme="glass"] .btn-danger:hover { background: var(--c-danger); color: #fff; }

/* ████████████████████████████████████████████████████ */
/* ██  主题 3: 暗黑科技                                ██ */
/* ████████████████████████████████████████████████████ */
[data-theme="dark"] {
  --c-bg: #08080c; --c-bg-elev: #0f0f17; --c-bg-sunken: #1a1a24;
  --c-text: #e2e8f0; --c-text-2: #94a3b8; --c-text-3: #64748b; --c-text-4: #475569;
  --c-border: #1e293b; --c-border-2: #334155;
  --c-accent: #38bdf8; --c-accent-hover: #0ea5e9; --c-accent-bg: rgba(56,189,248,.08);
  --c-danger: #f87171; --c-success: #22c55e;
  --ff-body: var(--ff-mono);
}
[data-theme="dark"] body { font-family: var(--ff-mono); color: var(--c-text); background: var(--c-bg); }
[data-theme="dark"] body::before {
  content: ""; position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background-image: linear-gradient(rgba(56,189,248,.04) 1px, transparent 1px),
                    linear-gradient(90deg, rgba(56,189,248,.04) 1px, transparent 1px);
  background-size: 2.5rem 2.5rem;
  mask: radial-gradient(ellipse at center, black 10%, transparent 80%);
  -webkit-mask: radial-gradient(ellipse at center, black 10%, transparent 80%);
}
[data-theme="dark"] body::after {
  content: ""; position: fixed; top: 0; left: 0; right: 0; height: 2px; z-index: 100; pointer-events: none;
  background: linear-gradient(90deg, transparent, var(--c-accent), transparent);
  animation: scanline 4s linear infinite;
}
@keyframes scanline { 0% { transform: translateY(0); } 100% { transform: translateY(100vh); } }
[data-theme="dark"] .topbar, [data-theme="dark"] .hero, [data-theme="dark"] .section, [data-theme="dark"] .footer { position: relative; z-index: 1; }
[data-theme="dark"] .container { max-width: 52rem; padding: 0 var(--sp-6); }
[data-theme="dark"] .topbar {
  position: sticky; top: 0; z-index: 50;
  background: rgba(8,8,12,.85); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--c-border); padding-top: var(--safe-top);
}
[data-theme="dark"] .topbar-inner { display: flex; align-items: center; justify-content: space-between; height: 3.25rem; }
[data-theme="dark"] .brand-mark { font-size: var(--fs-3); font-weight: 700; letter-spacing: -.01em; }
[data-theme="dark"] .brand-mark .dot { color: var(--c-accent); }
[data-theme="dark"] .brand-text { font-size: var(--fs-1); color: var(--c-text-4); }
[data-theme="dark"] .topbar nav { display: flex; gap: var(--sp-4); }
[data-theme="dark"] .topbar nav a { font-size: var(--fs-1); color: var(--c-text-3); font-weight: 500; padding: var(--sp-1) var(--sp-3); border: 1px solid transparent; transition: all var(--dur-fast); }
[data-theme="dark"] .topbar nav a:hover { color: var(--c-accent); border-color: var(--c-border); }
[data-theme="dark"] .topbar nav a.active { color: var(--c-accent); border-color: var(--c-accent); box-shadow: 0 0 8px rgba(56,189,248,.2); }
[data-theme="dark"] .hero { padding: var(--sp-9) 0 var(--sp-8); }
[data-theme="dark"] .hero .eyebrow { font-size: var(--fs-1); color: var(--c-accent); display: block; margin-bottom: var(--sp-3); opacity: .8; }
[data-theme="dark"] .hero .eyebrow::before { content: "> "; color: var(--c-text-4); }
[data-theme="dark"] .hero h1 { font-size: var(--fs-6); font-weight: 700; letter-spacing: -.02em; margin-bottom: var(--sp-3); }
[data-theme="dark"] .hero h1 .accent { color: var(--c-accent); text-shadow: 0 0 20px rgba(56,189,248,.3); }
[data-theme="dark"] .hero .lede { font-size: var(--fs-2); color: var(--c-text-3); max-width: 36rem; }
[data-theme="dark"] .hero .eyebrow, [data-theme="dark"] .hero h1, [data-theme="dark"] .hero .lede { opacity: 0; transform: translateX(-.5rem); animation: dark-hero .6s var(--ease) forwards; }
[data-theme="dark"] .hero .eyebrow { animation-delay: .1s; }
[data-theme="dark"] .hero h1 { animation-delay: .2s; }
[data-theme="dark"] .hero .lede { animation-delay: .3s; }
@keyframes dark-hero { to { opacity: 1; transform: none; } }
[data-theme="dark"] .section { padding: var(--sp-8) 0; }
[data-theme="dark"] .section-head { display: flex; align-items: center; gap: var(--sp-4); margin-bottom: var(--sp-6); flex-wrap: wrap; }
[data-theme="dark"] .section-head .no { font-size: var(--fs-1); color: var(--c-accent); opacity: .6; }
[data-theme="dark"] .section-head .no::before { content: "["; } [data-theme="dark"] .section-head .no::after { content: "]"; }
[data-theme="dark"] .section-head h2 { font-size: var(--fs-4); font-weight: 700; }
[data-theme="dark"] .section-head h2::before { content: "// "; color: var(--c-text-4); font-weight: 400; }
[data-theme="dark"] .section-head .desc { margin-left: auto; font-size: var(--fs-1); color: var(--c-text-4); }
[data-theme="dark"] .section-head .desc::before { content: "count: "; color: var(--c-text-4); }
[data-theme="dark"] .section-head .desc span { color: var(--c-accent); font-weight: 600; }
[data-theme="dark"] .grid { display: flex; flex-direction: column; gap: var(--sp-3); }
[data-theme="dark"] .card {
  background: var(--c-bg-elev); border: 1px solid var(--c-border); border-radius: var(--r-md);
  padding: var(--sp-4) var(--sp-5); display: flex; align-items: center; gap: var(--sp-4);
  color: inherit; position: relative; overflow: hidden;
  transition: border-color var(--dur-base), box-shadow var(--dur-base);
}
[data-theme="dark"] .card::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 2px; background: var(--c-accent); transform: scaleY(0); transform-origin: top; transition: transform var(--dur-base); }
[data-theme="dark"] .card:hover { border-color: var(--c-accent); box-shadow: 0 0 20px rgba(56,189,248,.08), inset 0 0 0 1px rgba(56,189,248,.1); }
[data-theme="dark"] .card:hover::before { transform: scaleY(1); }
[data-theme="dark"] .card-top { display: flex; align-items: center; gap: var(--sp-3); flex: 1; min-width: 0; }
[data-theme="dark"] .badge { width: 2rem; height: 2rem; flex-shrink: 0; border-radius: var(--r-sm); display: grid; place-items: center; background: var(--c-accent-bg); color: var(--c-accent); border: 1px solid var(--c-border); }
[data-theme="dark"] .card-info { flex: 1; min-width: 0; }
[data-theme="dark"] .card-name { font-size: var(--fs-2); font-weight: 600; }
[data-theme="dark"] .card-name::before { content: "> "; color: var(--c-accent); opacity: .6; }
[data-theme="dark"] .card-host { font-size: var(--fs-1); color: var(--c-text-4); margin-top: .125rem; opacity: .7; }
[data-theme="dark"] .card-desc { font-size: var(--fs-1); color: var(--c-text-3); flex: 0 1 12rem; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; }
[data-theme="dark"] .card-foot { display: flex; align-items: center; gap: var(--sp-3); flex-shrink: 0; }
[data-theme="dark"] .card-tag { display: none; }
[data-theme="dark"] .card-meta { display: flex; align-items: center; gap: var(--sp-2); }
[data-theme="dark"] .card-arrow { font-size: var(--fs-2); color: var(--c-text-4); transition: all var(--dur-base); }
[data-theme="dark"] .card-arrow::before { content: "[→]"; }
[data-theme="dark"] .card:hover .card-arrow { color: var(--c-accent); }
[data-theme="dark"] .speed-fast { background: rgba(34,197,94,.1); color: #22c55e; border: 1px solid rgba(34,197,94,.2); }
[data-theme="dark"] .speed-medium { background: rgba(251,191,36,.1); color: #fbbf24; border: 1px solid rgba(251,191,36,.2); }
[data-theme="dark"] .speed-slow { background: rgba(248,113,113,.1); color: #f87171; border: 1px solid rgba(248,113,113,.2); }
[data-theme="dark"] .speed-offline { background: var(--c-bg-sunken); color: var(--c-text-4); border: 1px solid var(--c-border); }
[data-theme="dark"] .speed-loading { background: var(--c-bg-sunken); color: var(--c-text-4); border: 1px solid var(--c-border); }
[data-theme="dark"] .speed::before { display: none; }
[data-theme="dark"] .speed-fast::after { content: " ●"; color: #22c55e; }
[data-theme="dark"] .speed-medium::after { content: " ●"; color: #fbbf24; }
[data-theme="dark"] .speed-slow::after { content: " ●"; color: #f87171; }
[data-theme="dark"] .speed-offline::after { content: " ○"; color: var(--c-text-4); }
[data-theme="dark"] .about-section { padding-top: var(--sp-9); }
[data-theme="dark"] .about-section .lede { font-size: var(--fs-2); color: var(--c-text-3); max-width: 36rem; }
[data-theme="dark"] .footer { border-top: 1px solid var(--c-border); padding: var(--sp-5) 0 var(--sp-4); padding-bottom: calc(var(--sp-4) + var(--safe-bottom)); }
[data-theme="dark"] .footer-inner { display: flex; justify-content: space-between; align-items: center; gap: var(--sp-4); flex-wrap: wrap; }
[data-theme="dark"] .footer .copy { font-size: var(--fs-1); color: var(--c-text-4); }
[data-theme="dark"] .footer-links { display: flex; gap: var(--sp-5); }
[data-theme="dark"] .footer-links a { font-size: var(--fs-1); color: var(--c-text-3); }
[data-theme="dark"] .footer-links a:hover { color: var(--c-accent); }
[data-theme="dark"] .beian-row { margin-top: var(--sp-4); padding-top: var(--sp-4); border-top: 1px solid var(--c-border); text-align: center; }
[data-theme="dark"] .beian-row a { color: var(--c-text-4); font-size: var(--fs-1); margin: 0 var(--sp-2); }
[data-theme="dark"] .btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-2); padding: .5rem 1rem; border-radius: var(--r-sm); font-size: var(--fs-1); font-weight: 600; transition: all var(--dur-base); border: 1px solid transparent; }
[data-theme="dark"] .btn-primary { background: var(--c-accent); color: #000; }
[data-theme="dark"] .btn-primary:hover { background: var(--c-accent-hover); box-shadow: 0 0 16px rgba(56,189,248,.3); }
[data-theme="dark"] .btn-ghost { background: transparent; border-color: var(--c-border); color: var(--c-text-2); }
[data-theme="dark"] .btn-ghost:hover { border-color: var(--c-accent); color: var(--c-accent); }
[data-theme="dark"] .btn-sm { padding: .25rem .625rem; }
[data-theme="dark"] .btn-danger { background: transparent; border-color: var(--c-border); color: var(--c-danger); }
[data-theme="dark"] .btn-danger:hover { background: var(--c-danger); color: #000; border-color: var(--c-danger); }

/* ████████████████████████████████████████████████████ */
/* ██  主题 4: 卡片杂志                                ██ */
/* ████████████████████████████████████████████████████ */
@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@400;600;700&display=swap');
[data-theme="magazine"] {
  --c-bg: #fdfbf7; --c-bg-elev: #fff; --c-bg-sunken: #f5f0e8;
  --c-text: #1a1a1a; --c-text-2: #444; --c-text-3: #777; --c-text-4: #aaa;
  --c-border: #e5e0d8; --c-border-2: #d0c8bc;
  --c-accent: #e63946; --c-accent-hover: #c1121f; --c-accent-bg: #fce8ea;
  --c-danger: #e63946; --c-success: #2a9d8f;
  --ff-body: "Noto Serif SC", Georgia, serif;
}
[data-theme="magazine"] body { font-family: "Noto Serif SC", Georgia, serif; color: var(--c-text); background: var(--c-bg); }
[data-theme="magazine"] .container { max-width: 52rem; padding: 0 var(--sp-6); }
[data-theme="magazine"] .topbar {
  position: sticky; top: 0; z-index: 50;
  background: rgba(253,251,247,.92); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  border-bottom: 2px solid var(--c-text); padding-top: var(--safe-top);
}
[data-theme="magazine"] .topbar-inner { display: flex; align-items: center; justify-content: space-between; height: 3.5rem; }
[data-theme="magazine"] .brand-mark { font-size: var(--fs-3); font-weight: 700; letter-spacing: 0; text-transform: uppercase; }
[data-theme="magazine"] .brand-mark .dot { color: var(--c-accent); }
[data-theme="magazine"] .brand-text { font-size: var(--fs-1); color: var(--c-text-3); font-style: italic; }
[data-theme="magazine"] .topbar nav { display: flex; gap: var(--sp-5); }
[data-theme="magazine"] .topbar nav a { font-size: var(--fs-1); color: var(--c-text-2); font-weight: 600; text-transform: uppercase; letter-spacing: .05em; transition: color var(--dur-fast); border-bottom: 2px solid transparent; padding-bottom: 2px; }
[data-theme="magazine"] .topbar nav a:hover { color: var(--c-accent); }
[data-theme="magazine"] .topbar nav a.active { color: var(--c-accent); border-bottom-color: var(--c-accent); }
[data-theme="magazine"] .hero { padding: var(--sp-9) 0 var(--sp-8); border-bottom: 1px solid var(--c-border); }
[data-theme="magazine"] .hero .eyebrow { font-size: var(--fs-1); color: var(--c-accent); font-weight: 600; text-transform: uppercase; letter-spacing: .15em; display: block; margin-bottom: var(--sp-3); }
[data-theme="magazine"] .hero h1 { font-size: var(--fs-6); font-weight: 700; letter-spacing: -.02em; margin-bottom: var(--sp-3); line-height: 1.15; }
[data-theme="magazine"] .hero h1 .accent { color: var(--c-accent); font-style: italic; }
[data-theme="magazine"] .hero .lede { font-size: var(--fs-2); color: var(--c-text-3); max-width: 36rem; line-height: 1.8; font-style: italic; }
[data-theme="magazine"] .hero .eyebrow, [data-theme="magazine"] .hero h1, [data-theme="magazine"] .hero .lede { opacity: 0; transform: translateY(.75rem); animation: mag-hero .7s var(--ease) forwards; }
[data-theme="magazine"] .hero .eyebrow { animation-delay: .1s; }
[data-theme="magazine"] .hero h1 { animation-delay: .2s; }
[data-theme="magazine"] .hero .lede { animation-delay: .35s; }
@keyframes mag-hero { to { opacity: 1; transform: none; } }
[data-theme="magazine"] .section { padding: var(--sp-8) 0; }
[data-theme="magazine"] .section-head { display: flex; align-items: baseline; gap: var(--sp-4); margin-bottom: var(--sp-6); flex-wrap: wrap; border-bottom: 2px solid var(--c-text); padding-bottom: var(--sp-3); }
[data-theme="magazine"] .section-head .no { font-size: var(--fs-4); color: var(--c-accent); font-weight: 700; font-style: italic; }
[data-theme="magazine"] .section-head h2 { font-size: var(--fs-4); font-weight: 700; text-transform: uppercase; letter-spacing: .05em; }
[data-theme="magazine"] .section-head .desc { margin-left: auto; font-size: var(--fs-1); color: var(--c-text-3); font-style: italic; }
[data-theme="magazine"] .section-head .desc span { color: var(--c-accent); font-weight: 700; font-style: normal; }
[data-theme="magazine"] .grid { columns: 2; column-gap: var(--sp-5); }
[data-theme="magazine"] .card {
  break-inside: avoid; margin-bottom: var(--sp-5); display: block;
  background: var(--c-bg-elev); border: none; border-bottom: 3px solid var(--c-accent);
  padding: var(--sp-5) var(--sp-5) var(--sp-4); color: inherit;
  box-shadow: 0 2px 8px rgba(0,0,0,.06); transition: transform var(--dur-base) var(--ease-bounce), box-shadow var(--dur-base);
  position: relative;
}
[data-theme="magazine"] .card:hover { transform: translateY(-4px) rotate(-.5deg); box-shadow: 0 12px 32px rgba(0,0,0,.12); }
[data-theme="magazine"] .card::before { content: attr(data-num); position: absolute; top: var(--sp-3); right: var(--sp-4); font-size: var(--fs-4); font-weight: 700; color: var(--c-border); font-style: italic; }
[data-theme="magazine"] .card-top { display: flex; align-items: center; gap: var(--sp-3); margin-bottom: var(--sp-3); }
[data-theme="magazine"] .badge { width: 2.25rem; height: 2.25rem; flex-shrink: 0; display: grid; place-items: center; background: var(--c-accent-bg); color: var(--c-accent); }
[data-theme="magazine"] .card-info { flex: 1; }
[data-theme="magazine"] .card-name { font-size: var(--fs-3); font-weight: 700; line-height: 1.3; }
[data-theme="magazine"] .card-host { font-size: var(--fs-1); color: var(--c-text-4); margin-top: .125rem; font-family: var(--ff-mono); }
[data-theme="magazine"] .card-desc { font-size: var(--fs-1); color: var(--c-text-3); line-height: 1.7; margin-bottom: var(--sp-3); }
[data-theme="magazine"] .card-foot { display: flex; align-items: center; justify-content: space-between; padding-top: var(--sp-3); border-top: 1px solid var(--c-border); }
[data-theme="magazine"] .card-tag { font-size: var(--fs-1); color: var(--c-accent); font-weight: 600; text-transform: uppercase; letter-spacing: .05em; }
[data-theme="magazine"] .card-meta { display: flex; align-items: center; gap: var(--sp-2); }
[data-theme="magazine"] .card-arrow { font-size: var(--fs-2); color: var(--c-accent); font-weight: 700; transition: transform var(--dur-base); }
[data-theme="magazine"] .card-arrow::before { content: "阅读 →"; font-size: var(--fs-1); }
[data-theme="magazine"] .card:hover .card-arrow { transform: translateX(4px); }
[data-theme="magazine"] .speed-fast { background: rgba(42,157,143,.12); color: #2a9d8f; }
[data-theme="magazine"] .speed-medium { background: rgba(230,57,70,.10); color: #e76f51; }
[data-theme="magazine"] .speed-slow { background: rgba(230,57,70,.18); color: #c1121f; }
[data-theme="magazine"] .speed-offline { background: var(--c-bg-sunken); color: var(--c-text-4); }
[data-theme="magazine"] .speed-loading { background: var(--c-bg-sunken); color: var(--c-text-4); }
[data-theme="magazine"] .about-section { padding-top: var(--sp-9); border-top: 1px solid var(--c-border); }
[data-theme="magazine"] .about-section .lede { font-size: var(--fs-2); color: var(--c-text-3); max-width: 36rem; line-height: 1.8; font-style: italic; }
[data-theme="magazine"] .footer { border-top: 2px solid var(--c-text); padding: var(--sp-5) 0 var(--sp-4); padding-bottom: calc(var(--sp-4) + var(--safe-bottom)); }
[data-theme="magazine"] .footer-inner { display: flex; justify-content: space-between; align-items: center; gap: var(--sp-4); flex-wrap: wrap; }
[data-theme="magazine"] .footer .copy { font-size: var(--fs-1); color: var(--c-text-3); font-style: italic; }
[data-theme="magazine"] .footer-links { display: flex; gap: var(--sp-5); }
[data-theme="magazine"] .footer-links a { font-size: var(--fs-1); color: var(--c-text-2); font-weight: 600; text-transform: uppercase; letter-spacing: .05em; }
[data-theme="magazine"] .footer-links a:hover { color: var(--c-accent); }
[data-theme="magazine"] .beian-row { margin-top: var(--sp-4); padding-top: var(--sp-4); border-top: 1px solid var(--c-border); text-align: center; }
[data-theme="magazine"] .beian-row a { color: var(--c-text-4); font-size: var(--fs-1); margin: 0 var(--sp-2); font-family: var(--ff-mono); }
[data-theme="magazine"] .btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-2); padding: .5rem 1rem; font-size: var(--fs-1); font-weight: 600; transition: all var(--dur-base); text-transform: uppercase; letter-spacing: .05em; }
[data-theme="magazine"] .btn-primary { background: var(--c-text); color: #fff; }
[data-theme="magazine"] .btn-primary:hover { background: var(--c-accent); }
[data-theme="magazine"] .btn-ghost { background: transparent; border: 1px solid var(--c-text); color: var(--c-text); }
[data-theme="magazine"] .btn-ghost:hover { background: var(--c-text); color: #fff; }
[data-theme="magazine"] .btn-sm { padding: .25rem .625rem; }
[data-theme="magazine"] .btn-danger { background: transparent; border: 1px solid var(--c-border); color: var(--c-danger); }
[data-theme="magazine"] .btn-danger:hover { background: var(--c-danger); color: #fff; }

/* ████████████████████████████████████████████████████ */
/* ██  后台管理（共用，但跟随主题）                     ██ */
/* ████████████████████████████████████████████████████ */
.admin-body { display: block; }
.admin-shell { display: flex; min-height: 100vh; }
.sidebar { width: 13rem; flex-shrink: 0; background: var(--c-bg-elev); border-right: 1px solid var(--c-border); padding: var(--sp-5) 0; position: sticky; top: 0; height: 100vh; display: flex; flex-direction: column; transition: background var(--dur-slow), border-color var(--dur-slow); }
.sidebar .brand { padding: 0 var(--sp-5) var(--sp-4); border-bottom: 1px solid var(--c-border); margin-bottom: var(--sp-4); display: block; }
.sidebar nav { display: flex; flex-direction: column; gap: var(--sp-1); padding: 0 var(--sp-3); }
.sidebar nav a { display: flex; align-items: center; gap: var(--sp-3); padding: .5rem var(--sp-3); border-radius: var(--r-md); font-size: var(--fs-1); color: var(--c-text-3); font-weight: 500; transition: color var(--dur-fast), background var(--dur-fast); }
.sidebar nav a:hover { background: var(--c-bg-sunken); color: var(--c-text); }
.sidebar nav a.active { color: var(--c-accent); background: var(--c-accent-bg); }
.sidebar .foot { margin-top: auto; padding: var(--sp-4) var(--sp-5); font-size: var(--fs-1); color: var(--c-text-4); border-top: 1px solid var(--c-border); }
.main { flex: 1; padding: var(--sp-7); max-width: 100%; overflow-x: hidden; }
.main-head { display: flex; justify-content: space-between; align-items: flex-end; margin-bottom: var(--sp-5); gap: var(--sp-4); flex-wrap: wrap; }
.main-head h1 { font-size: var(--fs-5); font-weight: 700; letter-spacing: -.01em; }
.main-head .sub { color: var(--c-text-4); font-size: var(--fs-1); }
.panel { background: var(--c-bg-elev); border: 1px solid var(--c-border); border-radius: var(--r-lg); overflow: hidden; transition: background var(--dur-slow), border-color var(--dur-slow); }
.panel-head { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4); padding: var(--sp-4) var(--sp-5); border-bottom: 1px solid var(--c-border); flex-wrap: wrap; }
.panel-head .title { font-size: var(--fs-3); font-weight: 600; }
.table { width: 100%; border-collapse: collapse; }
.table th { text-align: left; font-size: var(--fs-1); color: var(--c-text-4); padding: var(--sp-3) var(--sp-5); border-bottom: 1px solid var(--c-border); font-weight: 500; background: var(--c-bg-sunken); }
.table td { padding: var(--sp-3) var(--sp-5); border-bottom: 1px solid var(--c-border); font-size: var(--fs-1); vertical-align: middle; color: var(--c-text-2); }
.table tr:last-child td { border-bottom: none; }
.table tbody tr { transition: background var(--dur-fast); }
.table tbody tr:hover { background: var(--c-bg-sunken); }
.table .mono { color: var(--c-text-3); font-family: var(--ff-mono); word-break: break-all; }
.table .actions { display: flex; gap: var(--sp-2); justify-content: flex-end; }
.site-name { display: flex; align-items: center; gap: var(--sp-3); }
.site-name .badge { width: 1.75rem; height: 1.75rem; flex-shrink: 0; border-radius: var(--r-sm); display: grid; place-items: center; background: var(--c-accent-bg); color: var(--c-accent); }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-5); }
.form-grid .full { grid-column: 1 / -1; }
.field { display: flex; flex-direction: column; gap: var(--sp-1); }
.field label { font-size: var(--fs-1); color: var(--c-text-2); font-weight: 500; }
.field label .req { color: var(--c-danger); }
.field input, .field select, .field textarea { height: 2rem; padding: 0 var(--sp-3); border: 1px solid var(--c-border); border-radius: var(--r-md); background: var(--c-bg-elev); font-family: var(--ff-sans); font-size: var(--fs-1); color: var(--c-text); outline: none; transition: border-color var(--dur-fast), box-shadow var(--dur-fast); }
.field textarea { height: auto; padding: var(--sp-3); resize: vertical; min-height: 4.5rem; line-height: 1.6; }
.field input:focus, .field select:focus, .field textarea:focus { border-color: var(--c-accent); box-shadow: 0 0 0 3px var(--c-accent-bg); }
.form-actions { display: flex; gap: var(--sp-3); justify-content: flex-end; margin-top: var(--sp-5); }
.login-wrap { min-height: 100vh; display: grid; place-items: center; padding: var(--sp-5); background: var(--c-bg); }
.login-card { width: 100%; max-width: 22rem; background: var(--c-bg-elev); border: 1px solid var(--c-border); border-radius: var(--r-2xl); padding: var(--sp-8) var(--sp-7); text-align: center; box-shadow: var(--shadow-md); transition: background var(--dur-slow), border-color var(--dur-slow); }
.login-card .mark { font-size: var(--fs-5); font-weight: 700; margin-bottom: var(--sp-2); letter-spacing: -.01em; }
.login-card .mark .dot { color: var(--c-accent); }
.login-card h2 { font-size: var(--fs-4); font-weight: 700; margin-bottom: var(--sp-2); }
.login-card .lede { font-size: var(--fs-1); color: var(--c-text-4); margin-bottom: var(--sp-6); }
.login-card .field { text-align: left; margin-bottom: var(--sp-4); }
.login-card .alert { font-size: var(--fs-1); color: var(--c-danger); margin-top: var(--sp-2); min-height: 1.25rem; }
.theme-grid { display: grid; grid-template-columns: repeat(2,1fr); gap: var(--sp-4); }
.theme-card { border: 2px solid var(--c-border); border-radius: var(--r-lg); padding: var(--sp-4); cursor: pointer; transition: all var(--dur-base); background: var(--c-bg-elev); position: relative; }
.theme-card:hover { border-color: var(--c-accent); transform: translateY(-2px); }
.theme-card.active { border-color: var(--c-accent); background: var(--c-accent-bg); }
.theme-card.active::after { content: "✓"; position: absolute; top: var(--sp-2); right: var(--sp-3); color: var(--c-accent); font-weight: 700; font-size: var(--fs-2); }
.theme-preview { height: 4rem; border-radius: var(--r-md); margin-bottom: var(--sp-3); overflow: hidden; display: flex; }
.theme-preview .tp-bar { height: .75rem; width: 100%; }
.theme-preview .tp-body { flex: 1; display: flex; gap: .25rem; padding: .5rem; }
.theme-preview .tp-card { flex: 1; border-radius: var(--r-sm); }
.theme-name { font-size: var(--fs-2); font-weight: 600; }
.theme-desc { font-size: var(--fs-1); color: var(--c-text-4); margin-top: .125rem; }
.toast { position: fixed; right: var(--sp-5); bottom: var(--sp-5); z-index: 200; background: var(--c-text); color: var(--c-bg); padding: var(--sp-3) var(--sp-5); border-radius: var(--r-lg); font-size: var(--fs-1); font-weight: 500; display: flex; align-items: center; gap: var(--sp-3); box-shadow: 0 12px 40px rgba(0,0,0,.12); transform: translateY(.5rem); opacity: 0; transition: all var(--dur-base); }
.toast.show { transform: none; opacity: 1; }
.toast.risk { background: var(--c-danger); color: #fff; }
.row { display: flex; align-items: center; gap: var(--sp-3); }
.wrap { flex-wrap: wrap; }

/* ████████████████████████████████████████████████████ */
/* ██  响应式                                           ██ */
/* ████████████████████████████████████████████████████ */
@media (max-width: 48rem) {
  [data-theme="apple"] .grid, [data-theme="glass"] .grid { grid-template-columns: 1fr; }
  [data-theme="magazine"] .grid { columns: 1; }
  .admin-shell { flex-direction: column; }
  .sidebar { width: 100%; height: auto; position: relative; flex-direction: row; align-items: center; padding: var(--sp-3) var(--sp-4); }
  .sidebar .brand { padding: 0; border: none; margin: 0 var(--sp-4) 0 0; }
  .sidebar nav { flex-direction: row; padding: 0; gap: var(--sp-2); }
  .sidebar nav a { padding: var(--sp-1) var(--sp-3); font-size: var(--fs-1); }
  .sidebar .foot { display: none; }
  .main { padding: var(--sp-5) var(--sp-4); }
  .form-grid { grid-template-columns: 1fr; }
  .footer-inner { flex-direction: column; align-items: flex-start; }
  .hero { padding: var(--sp-6) 0 var(--sp-5); }
  .hero h1 { font-size: var(--fs-5); }
  .section { padding: var(--sp-5) 0; }
  .about-section { padding-top: var(--sp-6); }
  .section-head { flex-wrap: wrap; gap: var(--sp-2); margin-bottom: var(--sp-4); }
  .section-head .desc { margin-left: 0; }
  .topbar nav { gap: var(--sp-3); }
  .footer { padding: var(--sp-4) 0 var(--sp-3); }
  .theme-grid { grid-template-columns: 1fr; }
  [data-theme="dark"] .card { flex-direction: column; align-items: flex-start; }
  [data-theme="dark"] .card-desc { flex: none; width: 100%; }
}
@media (max-width: 30rem) {
  .hero { padding: var(--sp-5) 0 var(--sp-4); }
  .hero h1 { font-size: var(--fs-4); }
  .hero .lede { font-size: var(--fs-1); }
  .card { padding: var(--sp-4); }
  .container { padding: 0 var(--sp-4); }
  .section { padding: var(--sp-4) 0; }
  .about-section { padding-top: var(--sp-5); }
  .footer { padding: var(--sp-3) 0; }
  .beian-row { margin-top: var(--sp-2); padding-top: var(--sp-2); }
}

/* ████████████████████████████████████████████████████ */
/* ██  主题切换器（前台浮动按钮 + 展开面板）            ██ */
/* ████████████████████████████████████████████████████ */

.theme-switch {
  position: fixed; right: var(--sp-5); bottom: calc(var(--sp-5) + var(--safe-bottom));
  z-index: 150;
}
.theme-switch .ts-toggle {
  width: 2.75rem; height: 2.75rem; border-radius: 50%;
  background: var(--c-bg-elev); border: 1px solid var(--c-border);
  box-shadow: var(--shadow-md); display: grid; place-items: center;
  transition: all var(--dur-base) var(--ease-bounce);
  color: var(--c-text-2);
}
.theme-switch .ts-toggle:hover { transform: scale(1.1) rotate(30deg); color: var(--c-accent); }
.theme-switch .ts-toggle svg { width: 1.25rem; height: 1.25rem; }

.ts-panel {
  position: absolute; right: 0; bottom: calc(100% + var(--sp-3));
  width: 17rem; padding: var(--sp-4); border-radius: var(--r-xl);
  background: var(--c-bg-elev); border: 1px solid var(--c-border);
  box-shadow: var(--shadow-lg);
  opacity: 0; transform: translateY(.5rem) scale(.96); transform-origin: bottom right;
  pointer-events: none;
  transition: opacity var(--dur-base) var(--ease), transform var(--dur-base) var(--ease-bounce);
  backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
}
.ts-panel.open { opacity: 1; transform: none; pointer-events: auto; }
.ts-panel h3 { font-size: var(--fs-2); font-weight: 600; margin-bottom: var(--sp-3); }
.ts-panel .ts-list { display: grid; gap: var(--sp-2); }
.ts-panel .ts-item {
  display: flex; align-items: center; gap: var(--sp-3);
  padding: var(--sp-2); border-radius: var(--r-md);
  cursor: pointer; transition: all var(--dur-fast);
  border: 2px solid transparent;
}
.ts-panel .ts-item:hover { background: var(--c-bg-sunken); }
.ts-panel .ts-item.active { background: var(--c-accent-bg); border-color: var(--c-accent); }
.ts-panel .ts-swatch {
  width: 2.25rem; height: 2.25rem; border-radius: var(--r-md); flex-shrink: 0;
  display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr;
  overflow: hidden; border: 1px solid var(--c-border);
}
.ts-panel .ts-swatch div { }
.ts-panel .ts-info { flex: 1; min-width: 0; }
.ts-panel .ts-name { font-size: var(--fs-2); font-weight: 600; }
.ts-panel .ts-desc { font-size: var(--fs-1); color: var(--c-text-4); }
.ts-panel .ts-check { color: var(--c-accent); font-weight: 700; font-size: var(--fs-2); }

/* 主题切换过渡效果 */
.theme-transition * {
  transition:
    background-color var(--dur-slow) var(--ease),
    color var(--dur-slow) var(--ease),
    border-color var(--dur-slow) var(--ease),
    box-shadow var(--dur-slow) var(--ease),
    fill var(--dur-slow) var(--ease),
    stroke var(--dur-slow) var(--ease) !important;
}
.theme-transition::before, .theme-transition::after {
  transition: background var(--dur-slow) var(--ease), opacity var(--dur-slow) var(--ease) !important;
}

/* 主题切换闪光覆盖层 */
.theme-flash {
  position: fixed; inset: 0; z-index: 999; pointer-events: none;
  opacity: 0;
  background: radial-gradient(circle at center, rgba(255,255,255,.4), transparent 60%);
  transition: opacity .3s;
}
.theme-flash.active { opacity: 1; }

/* ████████████████████████████████████████████████████ */
/* ██  关于平台 - 特性卡片（全宽一排）                   ██ */
.about-list {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  margin-top: 2rem;
}
.about-card {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  padding: 1.25rem 1.5rem;
  border-radius: var(--r-md);
  border: 1px solid var(--c-border);
  background: var(--c-bg-elev);
  transition: transform .3s var(--ease), box-shadow .3s var(--ease);
}
.about-card:hover {
  transform: translateX(4px);
  box-shadow: var(--shadow-md);
}
.about-card h3 {
  font-size: 1rem;
  font-weight: 600;
  white-space: nowrap;
  flex-shrink: 0;
  color: var(--c-text);
  margin: 0;
  min-width: 7rem;
}
.about-card p {
  font-size: .875rem;
  color: var(--c-text-3);
  line-height: 1.6;
  margin: 0;
  flex: 1;
}
[data-theme="magazine"] .about-card {
  border-radius: 0;
  border: 0;
  border-bottom: 2px solid var(--c-text);
  padding: 1.25rem 0;
  background: transparent;
}
[data-theme="magazine"] .about-card h3 {
  font-family: var(--ff-serif);
  font-weight: 700;
  min-width: 6rem;
}
[data-theme="dark"] .about-card {
  border-color: var(--c-border-2);
  background: rgba(255,255,255,.03);
}
[data-theme="glass"] .about-card {
  background: var(--c-bg-elev);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(255,255,255,.1);
}
[data-theme="apple"] .about-card {
  box-shadow: var(--shadow-sm);
}

@media (max-width: 600px) {
  .about-card {
    flex-direction: column;
    align-items: flex-start;
    gap: .5rem;
    padding: 1rem 1.25rem;
  }
  .about-card h3 {
    min-width: auto;
  }
}

/* ████████████████████████████████████████████████████ */
/* ██  增强交互：滚动视差 + 卡片特效                    ██ */
/* ████████████████████████████████████████████████████ */

/* Hero 视差 */
.hero.parallax { perspective: 1000px; }
.hero.parallax .eyebrow,
.hero.parallax h1,
.hero.parallax .lede {
  will-change: transform;
}

/* Hero 动态圆点背景 (uiverse pattern) */
.hero { position: relative; overflow: hidden; }
.hero-bg {
  position: absolute; inset: 0; z-index: 0; pointer-events: none;
  overflow: hidden;
}
.hero-bg::before {
  content: ""; position: absolute; top: -50%; left: -50%;
  width: 200%; height: 200%;
  background-size: 2.5rem 2.5rem;
  animation: hero-bg-move 20s linear infinite;
  opacity: .6;
}
.hero-inner { position: relative; z-index: 1; }

/* 苹果主题：淡蓝色圆点 */
[data-theme="apple"] .hero-bg::before {
  background-image:
    radial-gradient(circle, #c7c7cc 8%, transparent 8%),
    radial-gradient(circle, transparent 8%, #e8f1fd 9%);
}
/* 玻璃主题：紫蓝色发光点 */
[data-theme="glass"] .hero-bg::before {
  background-image:
    radial-gradient(circle, rgba(192,132,252,.35) 8%, transparent 8%),
    radial-gradient(circle, transparent 8%, rgba(96,165,250,.15) 9%);
}
/* 暗黑主题：霓虹网格 */
[data-theme="dark"] .hero-bg::before {
  background-image:
    radial-gradient(circle, rgba(56,189,248,.3) 8%, transparent 8%),
    radial-gradient(circle, transparent 8%, rgba(56,189,248,.08) 9%);
}
/* 杂志主题：米色网点 */
[data-theme="magazine"] .hero-bg::before {
  background-image:
    radial-gradient(circle, #d0c8bc 8%, transparent 8%),
    radial-gradient(circle, transparent 8%, #f5f0e8 9%);
}

@keyframes hero-bg-move {
  0% { transform: translate(0, 0); }
  100% { transform: translate(2.5rem, 2.5rem); }
}

/* 卡片 hover 增强 */
[data-theme="apple"] .card:hover {
  transform: translateY(-6px);
  box-shadow: 0 8px 32px rgba(0,0,0,.12);
}

[data-theme="glass"] .card {
  will-change: transform;
  transform-style: preserve-3d;
}
[data-theme="glass"] .card:hover {
  transform: translateY(-6px) scale(1.015);
  box-shadow: 0 12px 48px rgba(192,132,252,.2);
}

[data-theme="dark"] .card {
  will-change: transform;
}
[data-theme="dark"] .card:hover {
  transform: translateX(4px);
  border-color: var(--c-accent);
  box-shadow: 0 0 32px rgba(56,189,248,.12), inset 0 0 0 1px rgba(56,189,248,.15);
}

[data-theme="magazine"] .card:hover {
  transform: translateY(-6px) rotate(-.8deg);
  box-shadow: 0 16px 48px rgba(0,0,0,.14);
}

/* 按钮涟漪 */
.btn { position: relative; overflow: hidden; }
.btn .ripple {
  position: absolute; border-radius: 50%; background: rgba(255,255,255,.4);
  transform: translate(-50%,-50%) scale(0); animation: ripple .5s var(--ease) forwards;
  pointer-events: none;
}
@keyframes ripple { to { transform: translate(-50%,-50%) scale(4); opacity: 0; } }

/* 滚动进度条 */
.scroll-progress {
  position: fixed; top: 0; left: 0; height: 3px; z-index: 60;
  background: var(--c-accent); width: 0%;
  transition: width .1s linear;
  box-shadow: 0 0 8px var(--c-accent);
}

/* 返回顶部 */
.back-top {
  position: fixed; right: 1.25rem; bottom: 1.25rem; z-index: 55;
  width: 2.75rem; height: 2.75rem; border-radius: 50%;
  border: 1px solid var(--c-border);
  background: var(--c-bg-elev);
  color: var(--c-text-2);
  display: grid; place-items: center;
  cursor: pointer;
  opacity: 0; transform: translateY(1rem);
  transition: opacity .3s var(--ease), transform .3s var(--ease), background .3s var(--ease), color .3s var(--ease);
  box-shadow: var(--shadow-md);
}
.back-top.visible {
  opacity: 1; transform: translateY(0);
}
.back-top:hover {
  background: var(--c-accent);
  color: #fff;
  border-color: var(--c-accent);
  transform: translateY(-2px);
  box-shadow: var(--shadow-lg);
}
.back-top svg { width: 1.1rem; height: 1.1rem; }
@media (max-width: 600px) {
  .back-top { right: .875rem; bottom: .875rem; width: 2.5rem; height: 2.5rem; }
}

/* 主题切换过渡 */
html.theme-transition,
html.theme-transition *,
html.theme-transition *::before,
html.theme-transition *::after {
  transition: background .5s var(--ease), background-color .5s var(--ease), color .4s var(--ease), border-color .4s var(--ease), box-shadow .4s var(--ease) !important;
}

/* 主题加载动画 */
.theme-loading {
  position: fixed; inset: 0; z-index: 1000;
  display: grid; place-items: center;
  background: var(--c-bg);
}
.theme-loading .tl-spinner {
  width: 2.5rem; height: 2.5rem; border-radius: 50%;
  border: 2px solid var(--c-border);
  border-top-color: var(--c-accent);
  animation: spin .8s linear infinite;
}

/* 入场动画增强 */
@keyframes float-in {
  from { opacity: 0; transform: translateY(1rem) scale(.98); }
  to { opacity: 1; transform: none; }
}
.float-in { animation: float-in .5s var(--ease-bounce) both; }

/* 文字逐字显现 */
@keyframes char-in {
  from { opacity: 0; transform: translateY(.5rem); }
  to { opacity: 1; transform: none; }
}

/* 滚动渐入增强 */
.reveal {
  opacity: 0;
  transform: translateY(1rem);
  transition: opacity .6s var(--ease), transform .6s var(--ease-bounce);
}
.reveal.visible {
  opacity: 1;
  transform: none;
}

/* 磁性按钮效果 */
.magnetic {
  transition: transform var(--dur-base) var(--ease-bounce);
}

/* 移动端调整 */
@media (max-width: 30rem) {
  .theme-switch { right: var(--sp-3); bottom: calc(var(--sp-3) + var(--safe-bottom)); }
  .theme-switch .ts-toggle { width: 2.25rem; height: 2.25rem; }
  .ts-panel { right: -1rem; width: calc(100vw - 2rem); }
}