/* ==========================================================================
   modern.css — 2026 现代化视觉层（覆盖式换肤，不改动任何功能逻辑）
   加载顺序：置于 style.css / v11.css 之后
   支持：深色模式（html.dark）、玻璃拟态导航、极光渐变、卡片微动效
   ========================================================================== */

/* ---------- 设计令牌（浅色） ---------- */
:root {
  --c-primary: #4F46E5;
  --c-primary-light: #6366F1;
  --c-primary-bg: #EEF2FF;
  --c-secondary: #059669;
  --c-secondary-light: #10B981;
  --c-secondary-bg: #ECFDF5;
  --c-accent: #7C3AED;
  --c-accent-light: #8B5CF6;
  --c-accent-bg: #F5F3FF;
  --c-purple: #9333EA;
  --c-purple-bg: #FAF5FF;
  --c-teal: #0D9488;
  --c-teal-bg: #F0FDFA;
  --c-red: #E11D48;
  --c-amber: #D97706;

  --c-bg: #F5F6FA;
  --c-surface: #FFFFFF;
  --c-surface-alt: #F8F9FC;
  --c-border: #E8EAF1;
  --c-text: #101426;
  --c-text-2: #4B5567;
  --c-text-3: #98A1B3;

  --c-shadow: 0 1px 2px rgba(16,20,38,.04), 0 4px 16px rgba(16,20,38,.06);
  --c-shadow-lg: 0 4px 12px rgba(16,20,38,.06), 0 16px 40px rgba(16,20,38,.10);
  --c-radius: 16px;
  --c-radius-sm: 12px;
  --c-radius-lg: 24px;
  --c-transition: .28s cubic-bezier(.4,0,.2,1);

  --grad-brand: linear-gradient(135deg, #4F46E5 0%, #7C3AED 55%, #A855F7 100%);
  --grad-brand-soft: linear-gradient(135deg, rgba(79,70,229,.10), rgba(124,58,237,.10));
  --nav-glass: rgba(255,255,255,.78);
}

/* ---------- 设计令牌（深色） ---------- */
html.dark {
  --c-primary: #818CF8;
  --c-primary-light: #A5B4FC;
  --c-primary-bg: rgba(99,102,241,.14);
  --c-secondary: #34D399;
  --c-secondary-light: #6EE7B7;
  --c-secondary-bg: rgba(16,185,129,.12);
  --c-accent: #A78BFA;
  --c-accent-light: #C4B5FD;
  --c-accent-bg: rgba(139,92,246,.14);
  --c-purple: #C084FC;
  --c-purple-bg: rgba(192,132,252,.12);
  --c-teal: #2DD4BF;
  --c-teal-bg: rgba(45,212,191,.12);
  --c-red: #FB7185;
  --c-amber: #FBBF24;

  --c-bg: #0C1020;
  --c-surface: #151A2E;
  --c-surface-alt: #1B2138;
  --c-border: #272F4A;
  --c-text: #E8EBF4;
  --c-text-2: #A6AFC2;
  --c-text-3: #6B7689;

  --c-shadow: 0 1px 2px rgba(0,0,0,.3), 0 4px 16px rgba(0,0,0,.3);
  --c-shadow-lg: 0 4px 12px rgba(0,0,0,.35), 0 16px 40px rgba(0,0,0,.45);
  --grad-brand: linear-gradient(135deg, #6366F1 0%, #8B5CF6 55%, #C084FC 100%);
  --grad-brand-soft: linear-gradient(135deg, rgba(99,102,241,.18), rgba(139,92,246,.18));
  --nav-glass: rgba(12,16,32,.72);
}

/* ---------- 基础 ---------- */
html { scroll-behavior: smooth; }
body {
  background:
    radial-gradient(1200px 500px at 85% -10%, rgba(124,58,237,.06), transparent 60%),
    radial-gradient(900px 400px at -10% 10%, rgba(79,70,229,.05), transparent 55%),
    var(--c-bg);
  background-attachment: fixed;
}
html.dark body {
  background:
    radial-gradient(1200px 500px at 85% -10%, rgba(124,58,237,.10), transparent 60%),
    radial-gradient(900px 400px at -10% 10%, rgba(79,70,229,.08), transparent 55%),
    var(--c-bg);
  background-attachment: fixed;
}
::selection { background: rgba(99,102,241,.25); }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--c-border); border-radius: 8px; border: 2px solid transparent; background-clip: content-box; }
::-webkit-scrollbar-thumb:hover { background: var(--c-text-3); border: 2px solid transparent; background-clip: content-box; }
:focus-visible { outline: 2px solid var(--c-primary-light); outline-offset: 2px; border-radius: 4px; }

/* ---------- 顶部导航：玻璃拟态 ---------- */
#header {
  background: var(--nav-glass);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  backdrop-filter: blur(20px) saturate(180%);
  border-bottom: 1px solid var(--c-border);
  box-shadow: 0 1px 24px rgba(16,20,38,.05);
}
.nav-logo-icon {
  background: var(--grad-brand);
  box-shadow: 0 4px 14px rgba(99,102,241,.35);
  border-radius: 12px;
}
.nav-link { border-radius: 999px; font-weight: 500; }
.nav-link:hover { background: var(--c-primary-bg); color: var(--c-primary); }
.nav-link.active {
  background: var(--grad-brand);
  color: #fff;
  box-shadow: 0 4px 14px rgba(99,102,241,.35);
}
.nav-btn { border-radius: 12px; border: 1px solid var(--c-border); background: var(--c-surface); }
.nav-btn:hover { border-color: var(--c-primary-light); color: var(--c-primary); transform: translateY(-1px); }

/* 主题切换按钮 */
.theme-toggle { position: relative; }
.theme-toggle .icon-sun, .theme-toggle .icon-moon { display: block; transition: transform .4s cubic-bezier(.4,0,.2,1), opacity .3s; }
html:not(.dark) .theme-toggle .icon-moon { display: none; }
html.dark .theme-toggle .icon-sun { display: none; }

/* ---------- Hero：极光渐变 ---------- */
.hero {
  background:
    radial-gradient(600px 300px at 15% 20%, rgba(255,255,255,.18), transparent 60%),
    radial-gradient(500px 260px at 85% 80%, rgba(45,212,191,.28), transparent 60%),
    var(--grad-brand);
  position: relative;
  overflow: hidden;
  border-radius: var(--c-radius-lg);
}
.hero::before, .hero::after {
  content: ''; position: absolute; border-radius: 50%; filter: blur(60px); opacity: .5; pointer-events: none;
}
.hero::before { width: 420px; height: 420px; background: rgba(168,85,247,.45); top: -160px; right: -80px; animation: floatBlob 12s ease-in-out infinite; }
.hero::after  { width: 320px; height: 320px; background: rgba(56,189,248,.30); bottom: -140px; left: -60px; animation: floatBlob 14s ease-in-out infinite reverse; }
@keyframes floatBlob {
  0%, 100% { transform: translate(0,0) scale(1); }
  50% { transform: translate(-24px,20px) scale(1.08); }
}
.hero h1 { letter-spacing: -1px; text-shadow: 0 2px 20px rgba(0,0,0,.18); }
.hero .hero-slogan, .hero p { text-shadow: 0 1px 8px rgba(0,0,0,.15); }

/* ---------- 按钮 ---------- */
.btn { border-radius: 999px; font-weight: 600; transition: var(--c-transition); }
.btn-primary {
  background: var(--grad-brand);
  color: #fff;
  box-shadow: 0 6px 20px rgba(99,102,241,.35);
}
.btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 28px rgba(99,102,241,.45);
  filter: brightness(1.06);
}
.hero .btn-primary, .cta-banner .btn-primary { background: #fff; color: #4F46E5; box-shadow: 0 6px 20px rgba(0,0,0,.18); }
.hero .btn-primary:hover, .cta-banner .btn-primary:hover { transform: translateY(-2px); box-shadow: 0 10px 28px rgba(0,0,0,.25); }
.btn-outline { border: 1.5px solid rgba(255,255,255,.5); color: #fff; backdrop-filter: blur(4px); }
.btn-outline:hover { background: rgba(255,255,255,.14); border-color: rgba(255,255,255,.85); }
.btn-buy { background: linear-gradient(135deg, #F59E0B, #F97316); color: #fff; box-shadow: 0 6px 20px rgba(249,115,22,.35); }

/* ---------- CTA 横幅 ---------- */
.cta-banner {
  background: var(--grad-brand);
  border-radius: var(--c-radius-lg);
  box-shadow: 0 12px 32px rgba(99,102,241,.30);
}

/* ---------- 卡片体系 ---------- */
.section-header h1 { letter-spacing: -.8px; }
.section-header h1::after {
  content: ''; display: block; width: 56px; height: 4px; margin-top: 10px;
  border-radius: 2px; background: var(--grad-brand);
}
.stat-card, .feature-card, .letter-card, .vocab-card, .conv-card, .settings-card, .roadmap, .quiz-card, .grammar-item {
  border-radius: var(--c-radius);
  box-shadow: var(--c-shadow);
  transition: transform var(--c-transition), box-shadow var(--c-transition), border-color var(--c-transition);
}
.stat-card:hover, .feature-card:hover, .letter-card:hover {
  transform: translateY(-5px);
  box-shadow: var(--c-shadow-lg);
  border-color: transparent;
}
.stat-card:hover, .feature-card:hover {
  background-image: var(--grad-brand-soft);
}
.stat-card .stat-num {
  background: var(--grad-brand);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}
.feature-icon { border-radius: 14px; box-shadow: 0 6px 16px rgba(99,102,241,.25); }
.roadmap-num { box-shadow: 0 4px 12px rgba(99,102,241,.3); }
.vocab-card:hover { transform: translateY(-3px); border-color: var(--c-primary-light); box-shadow: var(--c-shadow-lg); }

/* 字母卡：大字母渐变 */
.letter-card .letter-big {
  background: var(--grad-brand);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}
.letter-card:hover .letter-big { animation: letterPop .45s cubic-bezier(.34,1.56,.64,1); }
@keyframes letterPop { 0% { transform: scale(1); } 40% { transform: scale(1.14); } 100% { transform: scale(1); } }

/* ---------- 发音按钮 ---------- */
.audio-btn {
  background: var(--c-primary-bg);
  color: var(--c-primary);
  border: 1px solid transparent;
}
.audio-btn:hover {
  background: var(--grad-brand);
  color: #fff;
  transform: scale(1.08);
  box-shadow: 0 4px 14px rgba(99,102,241,.4);
}

/* ---------- 标签 / 筛选 ---------- */
.cat-tab { border-radius: 999px; font-weight: 500; }
.cat-tab.active {
  background: var(--grad-brand);
  color: #fff; border-color: transparent;
  box-shadow: 0 4px 12px rgba(99,102,241,.3);
}
.level-chip.active {
  background: var(--grad-brand);
  color: #fff; border-color: transparent;
  box-shadow: 0 4px 12px rgba(99,102,241,.3);
}
.search-box input {
  border-radius: 999px; padding-left: 44px;
  background: var(--c-surface);
}
.search-box input:focus {
  border-color: var(--c-primary-light);
  box-shadow: 0 0 0 4px rgba(99,102,241,.15);
}
.section-header .badge { border-radius: 999px; }

/* ---------- 测验 ---------- */
.quiz-option { border-radius: var(--c-radius-sm); }
.quiz-option:hover { background: var(--c-primary-bg); border-color: var(--c-primary-light); }
.dw-result { background: var(--c-surface); border-radius: var(--c-radius-lg); }

/* ---------- 学习弹层 ---------- */
.study-card, .conv-detail, .pay-modal { border-radius: var(--c-radius-lg); }

/* ---------- 页脚 ---------- */
.footer { background: var(--c-surface); }

/* ---------- Toast ---------- */
.toast {
  border-radius: 999px;
  box-shadow: 0 12px 32px rgba(0,0,0,.25);
  font-weight: 500;
}

/* ---------- PIN 门：极光深底 + 玻璃卡 ---------- */
.pin-gate {
  background:
    radial-gradient(800px 400px at 15% 10%, rgba(99,102,241,.45), transparent 60%),
    radial-gradient(700px 380px at 90% 85%, rgba(45,212,191,.25), transparent 60%),
    radial-gradient(600px 300px at 80% 15%, rgba(168,85,247,.35), transparent 60%),
    linear-gradient(160deg, #0B1020 0%, #141A38 55%, #0B1020 100%);
  background-attachment: fixed;
}
.pin-gate::before {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background-image: radial-gradient(rgba(255,255,255,.06) 1px, transparent 1px);
  background-size: 26px 26px;
}
.pin-gate-card {
  /* PIN 区域背景恒为深色极光，卡片固定用深色玻璃保证浅色文字对比度 */
  background: rgba(15,20,40,.82);
  -webkit-backdrop-filter: blur(24px) saturate(160%);
  backdrop-filter: blur(24px) saturate(160%);
  border: 1px solid rgba(255,255,255,.16);
  box-shadow: 0 24px 80px rgba(0,0,0,.5);
  color: #F2F4FA;
  max-width: 440px;
}
.pin-gate-title { color: #F2F4FA; text-shadow: 0 2px 16px rgba(0,0,0,.4); }
.pin-gate-subtitle { color: rgba(242,244,250,.75); }
/* 卡片已为深色玻璃，内部步骤盒/强调色同步改为深色系配色 */
.pin-gate-card .pin-step { background: rgba(255,255,255,.07); }
.pin-gate-card .pin-step-desc strong { color: #FBBF24; }
.pin-gate-card .pin-gate-tip { color: #FBBF24; }
.pin-gate-card .copy-wechat-btn { border-color: rgba(255,255,255,.35); }
.pin-gate-card .copy-wechat-btn:hover { color: #fff; }
.pin-gate-card .qr-placeholder { color: rgba(255,255,255,.85); }
.pin-gate-logo-icon {
  background: var(--grad-brand);
  box-shadow: 0 8px 28px rgba(124,58,237,.55);
  border-radius: 18px;
}
.pin-step { border-radius: var(--c-radius); }
.pin-step .pin-step-header .pin-step-num { box-shadow: 0 4px 12px rgba(99,102,241,.4); }
.pin-input {
  border-radius: 14px; letter-spacing: .35em; text-align: center; font-weight: 700; font-size: 20px;
  background: rgba(255,255,255,.92); color: #101426; border: 1.5px solid transparent;
}
.pin-input:focus { outline: none; border-color: #6366F1; box-shadow: 0 0 0 4px rgba(99,102,241,.25); }
.pin-submit-btn {
  border-radius: 14px; font-weight: 700;
  background: var(--grad-brand);
  color: #fff; box-shadow: 0 8px 24px rgba(99,102,241,.45);
}
.pin-submit-btn:hover { transform: translateY(-2px); box-shadow: 0 12px 32px rgba(99,102,241,.55); filter: brightness(1.05); }
.pin-gate-card .pin-step-title, .pin-gate-card .pin-step-desc, .pin-gate-card .pin-gate-wechat-label { color: rgba(242,244,250,.92); }
.pin-gate-card .pin-device-tip, .pin-gate-card .pin-gate-footer { color: rgba(242,244,250,.55); }
.pin-gate-card .pin-gate-wechat-id { background: rgba(255,255,255,.10); border: 1px solid rgba(255,255,255,.18); border-radius: 10px; }
.pin-gate-card .wechat-id-text { color: #fff; }
.copy-wechat-btn { background: rgba(255,255,255,.16); color: #fff; border-radius: 8px; }
.copy-wechat-btn:hover { background: rgba(255,255,255,.28); }
.pin-error { color: #FDA4AF; }
.pin-gate-qr, .pin-pay-qr { border-radius: 14px; overflow: hidden; background: #fff; padding: 6px; }
.qr-placeholder { background: rgba(255,255,255,.12); border-radius: 10px; color: rgba(255,255,255,.85); }

/* ---------- 深色模式硬编码修正 ---------- */
html.dark .toast { background: #272F4A; color: #E8EBF4; }
html.dark .btn-primary { color: #fff; }
html.dark .hero .btn-primary, html.dark .cta-banner .btn-primary { background: #fff; color: #4F46E5; }
html.dark .dw-result, html.dark .pay-modal, html.dark .study-card { background: var(--c-surface); }
html.dark .pin-gate-card .pin-input { background: rgba(255,255,255,.95); }
html.dark .roadmap { background: var(--c-surface); }
html.dark img { filter: none; }

/* ---------- 入场动效（卡片网格交错浮现） ---------- */
@keyframes fadeUp { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: translateY(0); } }
.stats-grid > *, .features-grid > *, .alphabet-grid > * {
  animation: fadeUp .5s cubic-bezier(.4,0,.2,1) both;
}
.stats-grid > *:nth-child(2), .features-grid > *:nth-child(2), .alphabet-grid > *:nth-child(2) { animation-delay: .06s; }
.stats-grid > *:nth-child(3), .features-grid > *:nth-child(3), .alphabet-grid > *:nth-child(3) { animation-delay: .12s; }
.stats-grid > *:nth-child(4), .features-grid > *:nth-child(4), .alphabet-grid > *:nth-child(4) { animation-delay: .18s; }
.alphabet-grid > *:nth-child(5) { animation-delay: .24s; }
.alphabet-grid > *:nth-child(6) { animation-delay: .30s; }

/* ---------- 减少动效偏好 ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}

/* ---------- 移动端 ---------- */
@media (max-width: 768px) {
  .hero h1 { font-size: 30px; }
  .section-header h1 { font-size: 26px; }
  .pin-gate-card { border-radius: 20px; }
}