/* ============================================================================
   StellarU 会员门户 · 设计系统 v5.0
   ============================================================================
   设计哲学: 深空蓝 x 鎏金 -> 尊贵、信任、智慧
   技术标准: 移动端优先 · 无障碍 · 性能优化 · 暗色模式就绪
   ========================================================================== */

/* ==========================================================================
   一、设计令牌 · Design Tokens
   ========================================================================== */

/* 手写字体 · 楷书签名（本地加载，离线可用） */
@font-face {
  font-family: 'MaShanZheng';
  src: url('/static/fonts/MaShanZheng-Regular.ttf') format('truetype');
  font-display: swap;
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'LongCang';
  src: url('/static/fonts/LongCang-Regular.ttf') format('truetype');
  font-display: swap;
  font-weight: normal;
  font-style: normal;
}

:root {
  /* 主色 · 深空蓝 */
  --navy-50:  #F0F4FA;
  --navy-100: #DCE5F0;
  --navy-200: #B8C8DE;
  --navy-300: #94A8C8;
  --navy-400: #4B6FA0;
  --navy-500: #14315E;
  --navy-600: #0F2545;
  --navy-700: #0A1B34;
  --navy-800: #071429;
  --navy-900: #040D1F;

  /* 辅色 · 鎏金 */
  --gold-50:  #FBF6EE;
  --gold-100: #F5E9D3;
  --gold-200: #EDD4A6;
  --gold-300: #E0BC7A;
  --gold-400: #D4A856;
  --gold-500: #B99250;
  --gold-600: #9A7840;
  --gold-700: #7C6033;

  /* AI 板块 · 靛紫 */
  --indigo-50:  #EEF0FF;
  --indigo-100: #E0E3FF;
  --indigo-200: #C7CCFF;
  --indigo-300: #A5AEFF;
  --indigo-400: #818CF8;
  --indigo-500: #6366F1;
  --indigo-600: #4F46E5;
  --indigo-700: #4338CA;

  /* 灰阶 · 14级精微 */
  --gray-50:  #F8FAFC;
  --gray-100: #F1F5F9;
  --gray-150: #E9EEF4;
  --gray-200: #E2E8F0;
  --gray-300: #CBD5E1;
  --gray-400: #94A3B8;
  --gray-500: #64748B;
  --gray-600: #475569;
  --gray-700: #334155;
  --gray-800: #1E293B;
  --gray-900: #0F172A;

  /* 语义 · 背景 */
  --bg:            #F6F8FB;
  --bg-warm:       #FAF7F2;
  --surface:       #FFFFFF;
  --surface-elevated: #FFFFFF;
  --surface-sunken: #F1F5F9;

  /* 语义 · 文字 */
  --text-primary:    var(--gray-900);
  --text-secondary:  var(--gray-700);
  --text-tertiary:   var(--gray-500);
  --text-quaternary: var(--gray-400);
  --text-low:        var(--gray-400);
  --text-on-dark:    #FFFFFF;
  --text-on-gold:    #3D2E14;

  /* 语义 · 边框 */
  --border-ultra-light: rgba(15, 23, 42, 0.06);
  --border-light:       rgba(15, 23, 42, 0.10);
  --border-medium:      rgba(15, 23, 42, 0.15);
  --border-strong:      rgba(15, 23, 42, 0.20);
  --border-gold:        rgba(185, 146, 80, 0.25);
  --border-gold-medium: rgba(185, 146, 80, 0.40);

  /* 语义 · 状态 */
  --error:    #DC2626;
  --error-bg: #FEF2F2;
  --success:  #16A34A;
  --success-bg: #F0FDF4;
  --warning:  #D97706;
  --info:     #2563EB;

  /* 阴影系统 · 6层 */
  --shadow-xs:  0 1px 2px  rgba(15, 23, 42, 0.04);
  --shadow-sm:  0 1px 3px  rgba(15, 23, 42, 0.06), 0 1px 2px rgba(15, 23, 42, 0.04);
  --shadow-md:  0 4px 6px  rgba(15, 23, 42, 0.04), 0 2px 4px rgba(15, 23, 42, 0.03);
  --shadow-lg:  0 10px 15px rgba(15, 23, 42, 0.06), 0 4px 6px  rgba(15, 23, 42, 0.04);
  --shadow-xl:  0 20px 25px rgba(15, 23, 42, 0.08), 0 8px 10px rgba(15, 23, 42, 0.05);
  --shadow-2xl: 0 25px 50px rgba(15, 23, 42, 0.12), 0 10px 20px rgba(15, 23, 42, 0.08);
  --shadow-gold:  0 8px 24px rgba(185, 146, 80, 0.18), 0 2px 8px rgba(185, 146, 80, 0.10);
  --shadow-navy:  0 8px 24px rgba(20, 49, 94, 0.18),  0 2px 8px rgba(20, 49, 94, 0.10);
  --shadow-indigo:0 8px 24px rgba(99, 102, 241, 0.18), 0 2px 8px rgba(99, 102, 241, 0.10);
  --shadow-inset: inset 0 2px 4px rgba(15, 23, 42, 0.04);

  /* 内发光 · 高光 */
  --highlight-top:  inset 0 1px 0 rgba(255,255,255,0.85);
  --highlight-gold: inset 0 1px 0 rgba(255,255,255,0.25);

  /* 圆角系统 */
  --radius-2:  2px;
  --radius-4:  4px;
  --radius-6:  6px;
  --radius-8:  8px;
  --radius-10: 10px;
  --radius-12: 12px;
  --radius-14: 14px;
  --radius-16: 16px;
  --radius-20: 20px;
  --radius-24: 24px;
  --radius-full: 9999px;

  /* 间距系统 · 4px基准 */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;

  /* 字体系统 */
  --font-sans: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Arial, sans-serif;
  --font-mono: "SF Mono", "Menlo", "Monaco", "Courier New", monospace;

  /* 字重 */
  --font-normal:  400;
  --font-medium:  500;
  --font-semibold: 600;
  --font-bold:    700;

  /* 字号 · 精细层级 */
  --text-xs:   11px;
  --text-sm:   12px;
  --text-base: 13px;
  --text-md:   14px;
  --text-lg:   15px;
  --text-xl:   16px;
  --text-2xl:  18px;
  --text-3xl:  20px;
  --text-4xl:  24px;
  --text-5xl:  28px;
  --text-6xl:  32px;

  /* 行高 */
  --leading-tight:   1.25;
  --leading-snug:    1.35;
  --leading-normal:  1.5;
  --leading-relaxed: 1.65;
  --leading-loose:   1.8;

  /* 动效 · 曲线 */
  --ease-out:     cubic-bezier(0.22, 1, 0.36, 1);
  --ease-out-expo: cubic-bezier(0.19, 1, 0.22, 1);
  --ease-spring:  cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-in-out:  cubic-bezier(0.4, 0, 0.2, 1);
  --ease-smooth:  cubic-bezier(0.45, 0.05, 0.55, 0.95);

  /* 动效 · 时长 */
  --duration-instant: 100ms;
  --duration-fast:    200ms;
  --duration-normal:  300ms;
  --duration-slow:    500ms;
  --duration-slower:  700ms;
}

/* ==========================================================================
   二、基础重置与全局样式
   ========================================================================== */
*, *::before, *::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  -webkit-tap-highlight-color: transparent;
}

html {
  -webkit-text-size-adjust: 100%;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

html, body {
  height: 100%;
  overflow: hidden;
}

body {
  font-family: var(--font-sans);
  font-size: var(--text-md);
  font-weight: var(--font-normal);
  line-height: var(--leading-normal);
  color: var(--text-primary);
  background: var(--bg);
  letter-spacing: -0.01em;
  font-feature-settings: "kern" 1, "liga" 1, "calt" 1;
  -webkit-touch-callout: none;
}

button, input, select, textarea {
  font-family: inherit;
  font-size: inherit;
  line-height: inherit;
  color: inherit;
  outline: none;
  border: none;
  background: none;
  -webkit-appearance: none;
  appearance: none;
}

button { cursor: pointer; }

input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button { -webkit-appearance: none; }

svg { display: block; flex-shrink: 0; }
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }

::selection {
  background: rgba(20, 49, 94, 0.12);
  color: var(--navy-600);
}

/* ==========================================================================
   三、背景层 · 环境氛围
   ========================================================================== */
.bg {
  position: fixed;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  background: radial-gradient(ellipse 140% 100% at 50% 0%, var(--navy-50) 0%, var(--bg) 50%, var(--gray-100) 100%);
}

.bg-glow {
  position: absolute;
  border-radius: 50%;
  filter: blur(100px);
  will-change: transform;
  pointer-events: none;
}

.bg-glow.g1 {
  width: 420px;
  height: 420px;
  left: -140px;
  top: -100px;
  background: radial-gradient(circle, rgba(20, 49, 94, 0.18) 0%, rgba(20, 49, 94, 0.06) 40%, transparent 70%);
  animation: ambientFloat1 20s var(--ease-smooth) infinite;
}

.bg-glow.g2 {
  width: 360px;
  height: 360px;
  right: -120px;
  top: 28%;
  background: radial-gradient(circle, rgba(185, 146, 80, 0.16) 0%, rgba(185, 146, 80, 0.05) 40%, transparent 70%);
  animation: ambientFloat2 24s var(--ease-smooth) infinite;
}

.bg-glow.g3 {
  width: 280px;
  height: 280px;
  left: 50%;
  bottom: -80px;
  transform: translateX(-50%);
  background: radial-gradient(circle, rgba(148, 163, 184, 0.10) 0%, transparent 70%);
  animation: ambientFloat3 16s var(--ease-smooth) infinite;
}

@keyframes ambientFloat1 {
  0%, 100% { transform: translate(0, 0) scale(1); }
  33% { transform: translate(30px, 20px) scale(1.05); }
  66% { transform: translate(-15px, 35px) scale(0.95); }
}

@keyframes ambientFloat2 {
  0%, 100% { transform: translate(0, 0) scale(1); }
  33% { transform: translate(-25px, -20px) scale(1.08); }
  66% { transform: translate(20px, -10px) scale(0.92); }
}

@keyframes ambientFloat3 {
  0%, 100% { transform: translateX(-50%) translateY(0) scale(1); }
  50% { transform: translateX(-50%) translateY(-30px) scale(1.06); }
}

/* ==========================================================================
   四、布局系统
   ========================================================================== */
.screen {
  position: relative;
  z-index: 1;
  height: 100%;
  height: 100dvh;
  min-height: 0;
  display: flex;
  flex-direction: column;
  padding: 0 var(--space-6);
  max-width: 460px;
  margin: 0 auto;
  overflow-y: scroll;
  overflow-x: hidden;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  scroll-behavior: smooth;
}

.screen::-webkit-scrollbar { display: none; }

/* 所有直接子项不被压缩——确保内容完整显示 */
.screen > * {
  flex-shrink: 0;
}

.safe-top {
  height: calc(env(safe-area-inset-top, 0px) + 28px);
  flex-shrink: 0;
}

.safe-bottom {
  height: calc(env(safe-area-inset-bottom, 0px) + var(--space-2));
  flex-shrink: 0;
}

/* ==========================================================================
   五、品牌区 · 极致仪式感
   ========================================================================== */
.brand {
  text-align: center;
  margin-bottom: var(--space-4);
  position: relative;
}

.logo-ring {
  width: 84px;
  height: 84px;
  margin: 0 auto var(--space-3);
  border-radius: var(--radius-24);
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(165deg,
    rgba(255,255,255,0.9) 0%,
    rgba(241,245,249,0.85) 40%,
    rgba(226,232,240,0.7) 100%);
  box-shadow:
    0 0 0 1px rgba(255,255,255,0.5) inset,
    0 0 0 1.5px var(--border-light),
    0 4px 12px rgba(15, 23, 42, 0.06),
    0 16px 40px rgba(20, 49, 94, 0.10);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  animation: logoReveal 1s var(--ease-out-expo) both;
}

.logo-ring::before {
  content: "";
  position: absolute;
  inset: -10px;
  border-radius: var(--radius-24);
  background: radial-gradient(circle at 30% 30%,
    rgba(185, 146, 80, 0.20) 0%,
    rgba(20, 49, 94, 0.08) 50%,
    transparent 70%);
  filter: blur(14px);
  z-index: -1;
  animation: haloBreathe 4s var(--ease-smooth) infinite;
}

.logo-ring::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(165deg,
    rgba(255,255,255,0.6) 0%,
    rgba(255,255,255,0.1) 40%,
    rgba(185,146,80,0.08) 100%);
  pointer-events: none;
}

.logo {
  width: 64px;
  height: 64px;
  border-radius: var(--radius-20);
  display: block;
  position: relative;
  z-index: 1;
}

@keyframes logoReveal {
  from { opacity: 0; transform: scale(0.7) translateY(20px); }
  to   { opacity: 1; transform: scale(1) translateY(0); }
}

@keyframes haloBreathe {
  0%, 100% { opacity: 0.5; transform: scale(1); }
  50%      { opacity: 1;   transform: scale(1.08); }
}

.brand-name {
  font-size: var(--text-5xl);
  font-weight: var(--font-bold);
  letter-spacing: 0.08em;
  color: var(--navy-600);
  margin-bottom: var(--space-2);
  line-height: var(--leading-tight);
  animation: fadeSlideUp 0.8s 0.12s var(--ease-out-expo) both;
}

.brand-name::after {
  content: "";
  display: block;
  width: 32px;
  height: 2px;
  margin: var(--space-3) auto 0;
  background: linear-gradient(90deg, transparent, var(--gold-500), transparent);
  border-radius: var(--radius-full);
}

.brand-tag {
  font-size: var(--text-sm);
  font-weight: var(--font-medium);
  letter-spacing: 0.35em;
  color: var(--text-tertiary);
  text-transform: uppercase;
  animation: fadeSlideUp 0.8s 0.22s var(--ease-out-expo) both;
}

@keyframes fadeSlideUp {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ==========================================================================
   六、登录卡片 · 悬浮玻璃质感
   ========================================================================== */
.card {
  background: var(--surface);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-24);
  padding: var(--space-6) var(--space-5) var(--space-5);
  box-shadow:
    var(--shadow-lg),
    0 0 0 1px rgba(255,255,255,0.6) inset;
  position: relative;
  overflow: hidden;
  animation: fadeSlideUp 0.9s 0.3s var(--ease-out-expo) both;
}

.card::before {
  content: "";
  position: absolute;
  top: 0;
  left: var(--space-5);
  right: var(--space-5);
  height: 2px;
  background: linear-gradient(90deg,
    transparent 0%,
    var(--gold-400) 20%,
    var(--gold-500) 50%,
    var(--gold-400) 80%,
    transparent 100%);
  border-radius: 0 0 var(--radius-full) var(--radius-full);
  opacity: 0.7;
}

.card-head {
  margin-bottom: var(--space-4);
  position: relative;
}

.card-title {
  display: block;
  font-size: var(--text-3xl);
  font-weight: var(--font-bold);
  letter-spacing: 0.02em;
  color: var(--text-primary);
  line-height: var(--leading-tight);
}

.card-sub {
  display: block;
  font-size: var(--text-sm);
  font-weight: var(--font-medium);
  color: var(--text-tertiary);
  margin-top: var(--space-1);
  letter-spacing: 0.04em;
}

/* ==========================================================================
   七、表单字段 · 极致输入体验
   ========================================================================== */
.field {
  position: relative;
  display: flex;
  align-items: center;
  height: 56px;
  margin-bottom: var(--space-3);
  background: var(--surface-sunken);
  border: 1.5px solid var(--border-light);
  border-radius: var(--radius-14);
  transition:
    border-color var(--duration-fast) var(--ease-out),
    background var(--duration-fast) var(--ease-out),
    box-shadow var(--duration-fast) var(--ease-out),
    transform var(--duration-fast) var(--ease-out);
}

.field:hover {
  border-color: var(--border-medium);
  background: var(--surface);
}

.field:focus-within {
  border-color: var(--navy-500);
  background: var(--surface);
  box-shadow:
    0 0 0 3px rgba(20, 49, 94, 0.08),
    0 0 0 1px rgba(20, 49, 94, 0.04) inset;
  transform: translateY(-1px);
}

.field-icon {
  width: 22px;
  height: 22px;
  margin: 0 var(--space-2) 0 var(--space-4);
  color: var(--text-quaternary);
  flex-shrink: 0;
  transition: color var(--duration-fast) var(--ease-out);
}

.field:focus-within .field-icon {
  color: var(--navy-500);
}

.field input {
  flex: 1;
  height: 100%;
  min-width: 0;
  background: transparent;
  border: none;
  outline: none;
  color: var(--text-primary);
  font-size: var(--text-xl);
  font-weight: var(--font-medium);
  font-family: var(--font-sans);
  padding: 0 var(--space-3) 0 var(--space-1);
  letter-spacing: 0.04em;
}

.field input::placeholder {
  color: var(--text-quaternary);
  font-weight: var(--font-normal);
  letter-spacing: 0.02em;
}

.field-clear {
  width: 32px;
  height: 32px;
  flex-shrink: 0;
  margin-right: var(--space-2);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-quaternary);
  cursor: pointer;
  border-radius: var(--radius-full);
  background: transparent;
  transition: all var(--duration-fast) var(--ease-out);
}

.field-clear:hover {
  background: var(--gray-100);
  color: var(--text-secondary);
}

.field-clear:active {
  background: var(--gray-150);
  color: var(--text-primary);
  transform: scale(0.92);
}

.field-clear svg {
  width: 16px;
  height: 16px;
}

.field-code {
  padding-right: var(--space-1);
}

.code-btn {
  flex-shrink: 0;
  height: 36px;
  padding: 0 var(--space-3);
  background: var(--surface);
  border: 1.5px solid var(--border-medium);
  border-radius: var(--radius-10);
  color: var(--navy-500);
  font-size: var(--text-sm);
  font-weight: var(--font-semibold);
  font-family: var(--font-sans);
  cursor: pointer;
  letter-spacing: 0.02em;
  white-space: nowrap;
  position: relative;
  overflow: hidden;
  transition: all var(--duration-fast) var(--ease-out);
}

.code-btn::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(255,255,255,0.9), rgba(241,245,249,0.4));
  pointer-events: none;
}

.code-btn:hover:not(:disabled) {
  border-color: var(--navy-500);
  color: var(--navy-600);
  box-shadow: 0 2px 8px rgba(20, 49, 94, 0.08);
}

.code-btn:active:not(:disabled) {
  transform: scale(0.96);
  box-shadow: none;
}

.code-btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
  border-color: var(--border-light);
  color: var(--text-quaternary);
}

.code-btn.counting {
  color: var(--text-tertiary);
  border-color: var(--border-light);
  background: var(--surface-sunken);
}

/* ==========================================================================
   八、登录按钮 · 鎏金立体主按钮
   ========================================================================== */
.submit {
  width: 100%;
  height: 56px;
  margin-top: var(--space-2);
  position: relative;
  overflow: hidden;
  background: linear-gradient(135deg,
    var(--navy-600) 0%,
    var(--navy-500) 35%,
    var(--navy-500) 65%,
    var(--navy-400) 100%);
  border: none;
  border-radius: var(--radius-16);
  color: var(--text-on-dark);
  font-size: var(--text-lg);
  font-weight: var(--font-semibold);
  font-family: var(--font-sans);
  letter-spacing: 0.15em;
  cursor: pointer;
  box-shadow:
    var(--shadow-navy),
    0 1px 0 rgba(255,255,255,0.15) inset,
    0 -1px 0 rgba(0,0,0,0.1) inset;
  transition:
    transform var(--duration-fast) var(--ease-out),
    box-shadow var(--duration-fast) var(--ease-out),
    filter var(--duration-fast) var(--ease-out);
}

.submit::before {
  content: "";
  position: absolute;
  top: 0;
  left: 10%;
  right: 10%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.3), transparent);
  pointer-events: none;
}

.submit::after {
  content: "";
  position: absolute;
  inset: -2px;
  border-radius: inherit;
  background: radial-gradient(ellipse at 50% 0%, rgba(185,146,80,0.15), transparent 60%);
  opacity: 0;
  transition: opacity var(--duration-normal) var(--ease-out);
  pointer-events: none;
}

.submit:hover:not(:disabled) {
  transform: translateY(-2px);
  box-shadow:
    var(--shadow-xl),
    var(--shadow-navy),
    0 1px 0 rgba(255,255,255,0.2) inset;
  filter: brightness(1.05);
}

.submit:hover:not(:disabled)::after {
  opacity: 1;
}

.submit:active:not(:disabled) {
  transform: translateY(0) scale(0.98);
  box-shadow:
    var(--shadow-md),
    0 1px 0 rgba(255,255,255,0.1) inset;
  filter: brightness(0.98);
  transition-duration: var(--duration-instant);
}

.submit:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  filter: grayscale(0.6);
  box-shadow: none;
}

.submit-label {
  position: relative;
  z-index: 1;
}

.submit-loader {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-1);
  position: absolute;
  inset: 0;
  z-index: 2;
}

.submit-loader i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: rgba(255,255,255,0.8);
  animation: dotPulse 1.4s ease-in-out infinite both;
}

.submit-loader i:nth-child(1) { animation-delay: -0.32s; }
.submit-loader i:nth-child(2) { animation-delay: -0.16s; }

@keyframes dotPulse {
  0%, 80%, 100% { transform: scale(0.6); opacity: 0.4; }
  40% { transform: scale(1); opacity: 1; }
}

/* ==========================================================================
   九、协议勾选 · 精致的交互控件
   ========================================================================== */
.card-foot {
  margin-top: var(--space-4);
}

.agree {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  cursor: pointer;
  padding: var(--space-2);
  border-radius: var(--radius-10);
  transition: background var(--duration-fast) var(--ease-out);
  margin: calc(-1 * var(--space-2));
}

.agree:hover {
  background: var(--gray-50);
}

.agree-check {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  margin-top: 1px;
  border: 1.5px solid var(--border-medium);
  border-radius: var(--radius-6);
  background: var(--surface);
  position: relative;
  transition: all var(--duration-fast) var(--ease-out);
}

.agree.on .agree-check {
  background: linear-gradient(135deg, var(--navy-500), var(--navy-600));
  border-color: var(--navy-500);
  box-shadow: 0 2px 6px rgba(20, 49, 94, 0.2);
}

.agree.on .agree-check::after {
  content: "";
  position: absolute;
  left: 5.5px;
  top: 2px;
  width: 5px;
  height: 9px;
  border: solid white;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
  animation: checkIn 0.25s var(--ease-spring) both;
}

@keyframes checkIn {
  from { transform: rotate(45deg) scale(0); opacity: 0; }
  to   { transform: rotate(45deg) scale(1); opacity: 1; }
}

.agree-text {
  font-size: var(--text-xs);
  line-height: var(--leading-normal);
  color: var(--text-secondary);
  letter-spacing: 0.01em;
  white-space: nowrap;
}

.doc-link {
  color: var(--navy-500);
  font-weight: var(--font-semibold);
  position: relative;
  padding: 0 2px;
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: rgba(20, 49, 94, 0.30);
  transition: color var(--duration-fast) var(--ease-out);
}

.doc-link::after {
  content: "";
  position: absolute;
  bottom: -1px;
  left: 0;
  right: 0;
  height: 1px;
  background: var(--navy-500);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--duration-fast) var(--ease-out);
}

.doc-link:hover {
  color: var(--navy-600);
  text-decoration-color: var(--navy-600);
}

.doc-link:hover::after {
  transform: scaleX(1);
}

/* ==========================================================================
   十、已登录视图 · 会员状态展示(紧凑单行条: 身份可辨、退出可达、不抢内容高度)
   ========================================================================== */
.authed {
  padding: var(--space-3) var(--space-4);
  animation: fadeSlideUp 0.6s var(--ease-out-expo) both;
}

.authed-row {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.authed-avatar {
  width: 40px;
  height: 40px;
  flex-shrink: 0;
  border-radius: var(--radius-full);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--text-lg);
  font-weight: var(--font-bold);
  color: var(--text-on-dark);
  background: linear-gradient(135deg, var(--navy-500), var(--navy-600));
  box-shadow: var(--shadow-navy);
  position: relative;
  overflow: hidden;
}

.authed-avatar::after {
  content: "";
  position: absolute;
  top: 0;
  left: 15%;
  right: 15%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.3), transparent);
}

.authed-info {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.authed-name {
  font-size: var(--text-lg);
  font-weight: var(--font-bold);
  color: var(--text-primary);
  letter-spacing: 0.02em;
  line-height: var(--leading-tight);
}

.authed-meta {
  font-size: var(--text-xs);
  color: var(--text-tertiary);
  letter-spacing: 0.03em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.authed .btn-ghost {
  flex-shrink: 0;
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-full);
  font-size: var(--text-xs);
}

.authed .btn-ghost:hover {
  border-color: var(--navy-500);
  color: var(--navy-500);
  background: var(--navy-50);
}

.authed .btn-ghost:active {
  transform: scale(0.96);
}

/* ==========================================================================
   十一、资讯中心 · 三入口卡片系统
   ========================================================================== */
.hub {
  margin-top: var(--space-5);
}

.hub-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  margin-bottom: var(--space-3);
  padding: 0 var(--space-1);
}

.hub-titles {
  text-align: left;
}

.hub-title {
  font-size: var(--text-2xl);
  font-weight: var(--font-bold);
  color: var(--text-primary);
  letter-spacing: 0.02em;
  line-height: var(--leading-tight);
}

.hub-sub {
  font-size: var(--text-sm);
  color: var(--text-tertiary);
  margin-top: 2px;
  letter-spacing: 0.04em;
}

.hub-refresh {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: var(--space-2) var(--space-3);
  background: var(--surface);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-10);
  color: var(--text-secondary);
  font-size: var(--text-xs);
  font-weight: var(--font-medium);
  cursor: pointer;
  transition: all var(--duration-fast) var(--ease-out);
  box-shadow: var(--shadow-xs);
}

.hub-refresh:hover {
  border-color: var(--border-medium);
  box-shadow: var(--shadow-sm);
  color: var(--text-primary);
}

.hub-refresh:active {
  transform: scale(0.96);
}

.hub-refresh svg {
  width: 14px;
  height: 14px;
  transition: transform 0.6s var(--ease-out);
}

.hub-grid {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.hub-card {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-4);
  border-radius: var(--radius-16);
  border: 1px solid var(--border-light);
  background: var(--surface);
  text-align: left;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  transition:
    transform var(--duration-fast) var(--ease-out),
    box-shadow var(--duration-fast) var(--ease-out),
    border-color var(--duration-fast) var(--ease-out);
}

.hub-card::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  opacity: 0;
  transition: opacity var(--duration-normal) var(--ease-out);
  pointer-events: none;
}

.hub-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-lg);
  border-color: var(--border-medium);
}

.hub-card:active {
  transform: translateY(0) scale(0.985);
  box-shadow: var(--shadow-sm);
  transition-duration: var(--duration-instant);
}

.hub-card[data-site="cctv"] {
  border-color: rgba(20, 49, 94, 0.12);
}

.hub-card[data-site="cctv"]::before {
  background: linear-gradient(135deg, rgba(20, 49, 94, 0.04) 0%, rgba(20, 49, 94, 0.01) 100%);
}

.hub-card[data-site="cctv"]:hover::before { opacity: 1; }

.hub-card[data-site="ai"] {
  border-color: rgba(99, 102, 241, 0.12);
}

.hub-card[data-site="ai"]::before {
  background: linear-gradient(135deg, rgba(99, 102, 241, 0.04) 0%, rgba(99, 102, 241, 0.01) 100%);
}

.hub-card[data-site="ai"]:hover::before { opacity: 1; }

.hub-card[data-site="game"] {
  border-color: rgba(185, 146, 80, 0.12);
}

.hub-card[data-site="game"]::before {
  background: linear-gradient(135deg, rgba(185, 146, 80, 0.04) 0%, rgba(185, 146, 80, 0.01) 100%);
}

.hub-card[data-site="game"]:hover::before { opacity: 1; }

.hc-badge {
  width: 48px;
  height: 48px;
  border-radius: var(--radius-12);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  position: relative;
  overflow: hidden;
  box-shadow: var(--shadow-sm);
}

.hc-badge svg {
  width: 24px;
  height: 24px;
  color: var(--text-on-dark);
  position: relative;
  z-index: 1;
}

.hub-cctv {
  background: linear-gradient(135deg, var(--navy-500), var(--navy-400));
  box-shadow: 0 4px 12px rgba(20, 49, 94, 0.2);
}

.hub-ai {
  background: linear-gradient(135deg, var(--indigo-500), var(--indigo-400));
  box-shadow: 0 4px 12px rgba(99, 102, 241, 0.2);
}

.hub-game {
  background: linear-gradient(135deg, var(--gold-500), var(--gold-400));
  box-shadow: 0 4px 12px rgba(185, 146, 80, 0.2);
}

.hc-badge::after {
  content: "";
  position: absolute;
  top: 0;
  left: 10%;
  right: 10%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.3), transparent);
}

.hc-tx {
  flex: 1;
  min-width: 0;
}

.hc-title {
  display: block;
  font-size: var(--text-lg);
  font-weight: var(--font-semibold);
  color: var(--text-primary);
  letter-spacing: 0.01em;
  margin-bottom: 2px;
}

.hc-sub {
  display: block;
  font-size: var(--text-xs);
  color: var(--text-tertiary);
  letter-spacing: 0.04em;
}

.hc-meta {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  flex-shrink: 0;
}

.hc-date {
  font-size: var(--text-xs);
  font-weight: var(--font-semibold);
  color: var(--gold-600);
  letter-spacing: 0.04em;
  font-style: normal;
  background: var(--gold-50);
  padding: 2px 8px;
  border-radius: var(--radius-6);
  border: 1px solid var(--border-gold);
  transition: all var(--duration-fast) var(--ease-out);
}

.hc-date.loading {
  color: var(--text-quaternary);
  background: var(--surface-sunken);
  border-color: var(--border-light);
}

.hc-meta svg {
  width: 18px;
  height: 18px;
  color: var(--text-quaternary);
  transition: color var(--duration-fast) var(--ease-out), transform var(--duration-fast) var(--ease-out);
}

.hub-card:hover .hc-meta svg {
  color: var(--navy-500);
  transform: translateX(2px);
}

/* ==========================================================================
   十二、种草导读 · 让钱自己打工
   ========================================================================== */
.book-hub {
  margin-top: var(--space-5);
}

.book-hub-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--space-3);
  padding: 0 var(--space-1);
}

.book-hub-titles {
  text-align: left;
}

.book-hub-title {
  font-size: var(--text-2xl);
  font-weight: var(--font-bold);
  color: var(--text-primary);
  letter-spacing: 0.02em;
  line-height: var(--leading-tight);
}

.book-hub-sub {
  font-size: var(--text-sm);
  color: var(--text-tertiary);
  margin-top: 2px;
  letter-spacing: 0.03em;
}

.book-hub-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: var(--space-2) var(--space-3);
  background: var(--surface);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-10);
  color: var(--text-secondary);
  font-size: var(--text-xs);
  font-weight: var(--font-medium);
  cursor: pointer;
  transition: all var(--duration-fast) var(--ease-out);
  box-shadow: var(--shadow-xs);
}

.book-hub-btn:hover {
  border-color: var(--gold-500);
  color: var(--gold-700);
  box-shadow: var(--shadow-sm);
}

.book-hub-btn:active {
  transform: scale(0.96);
}

.book-hub-btn svg {
  width: 14px;
  height: 14px;
}

.book-plant {
  background: linear-gradient(180deg, var(--surface) 0%, var(--bg-warm) 100%);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-20);
  padding: var(--space-5);
  box-shadow: var(--shadow-md);
  position: relative;
  overflow: hidden;
}

.book-plant::before {
  content: "";
  position: absolute;
  left: 0;
  top: var(--space-5);
  bottom: var(--space-5);
  width: 3px;
  background: linear-gradient(180deg, var(--gold-400) 0%, var(--gold-500) 50%, var(--gold-400) 100%);
  border-radius: 0 var(--radius-full) var(--radius-full) 0;
}

.bp-body {
  margin-bottom: var(--space-4);
  padding-left: var(--space-2);
}

.bp-title {
  font-size: var(--text-2xl);
  font-weight: var(--font-bold);
  color: var(--navy-600);
  line-height: var(--leading-tight);
  margin-bottom: var(--space-3);
  letter-spacing: 0.02em;
}

.bp-lead,
.bp-core,
.bp-close {
  font-size: var(--text-md);
  line-height: var(--leading-relaxed);
  color: var(--text-secondary);
  margin-bottom: var(--space-3);
  letter-spacing: 0.01em;
}

.bp-lead strong,
.bp-core strong,
.bp-close strong {
  color: var(--navy-600);
  font-weight: var(--font-bold);
}

.bp-close {
  margin-bottom: var(--space-3);
  color: var(--text-tertiary);
}

.bp-note {
  font-size: var(--text-sm);
  font-weight: var(--font-medium);
  color: var(--gold-700);
  margin-bottom: var(--space-2);
  letter-spacing: 0.01em;
  line-height: var(--leading-relaxed);
}

.bp-disclaim {
  font-size: var(--text-xs);
  color: var(--text-quaternary);
  letter-spacing: 0.03em;
  line-height: var(--leading-relaxed);
  margin-bottom: 0;
}

.bp-tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-bottom: var(--space-4);
  padding-left: var(--space-2);
}

.bp-tag {
  font-size: var(--text-xs);
  font-weight: var(--font-medium);
  color: var(--gold-700);
  background: var(--gold-50);
  border: 1px solid var(--border-gold);
  padding: 3px 10px;
  border-radius: var(--radius-full);
  letter-spacing: 0.03em;
}

.bp-cta-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: var(--space-4);
  border-top: 1px solid var(--border-ultra-light);
  padding-left: var(--space-2);
}

.bp-hint {
  font-size: var(--text-xs);
  color: var(--text-quaternary);
  letter-spacing: 0.04em;
}

.bp-cta-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: var(--space-2) var(--space-4);
  background: linear-gradient(135deg, var(--gold-500), var(--gold-400));
  border: none;
  border-radius: var(--radius-10);
  color: var(--text-on-gold);
  font-size: var(--text-sm);
  font-weight: var(--font-semibold);
  cursor: pointer;
  box-shadow: var(--shadow-gold);
  transition: all var(--duration-fast) var(--ease-out);
}

.bp-cta-btn:hover {
  transform: translateY(-1px);
  box-shadow: var(--shadow-lg), var(--shadow-gold);
  filter: brightness(1.05);
}

.bp-cta-btn:active {
  transform: translateY(0) scale(0.97);
  box-shadow: var(--shadow-sm);
}

.bp-cta-btn svg {
  width: 14px;
  height: 14px;
}

/* ==========================================================================
   十三、欢迎层 · 两屏引导体验
   ========================================================================== */
.welcome {
  position: fixed;
  inset: 0;
  z-index: 100;
  background: var(--surface);
  display: flex;
  flex-direction: column;
  padding: env(safe-area-inset-top, 0) var(--space-5) env(safe-area-inset-bottom, 0);
  overflow: hidden;
  opacity: 0;
  transition: opacity 0.4s var(--ease-out-expo);
}

.welcome.show {
  opacity: 1;
}

.welcome-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-2) 0;
  flex-shrink: 0;
  position: relative;
}

.welcome-brand {
  font-size: var(--text-xs);
  font-weight: var(--font-bold);
  letter-spacing: 0.25em;
  color: var(--text-quaternary);
  text-transform: uppercase;
}

.music-toggle {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-full);
  border: 1.5px solid var(--border-light);
  background: var(--surface);
  color: var(--text-tertiary);
  cursor: pointer;
  box-shadow: var(--shadow-xs);
  transition: all var(--duration-fast) var(--ease-out);
}

.music-toggle:hover {
  border-color: var(--border-medium);
  color: var(--text-secondary);
  box-shadow: var(--shadow-sm);
}

.music-toggle:active {
  transform: scale(0.93);
}

.music-toggle svg {
  width: 20px;
  height: 20px;
}

.mt-ic {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
}

.music-toggle .mt-off { display: none; }
.music-toggle.off .mt-on { display: none; }
.music-toggle.off .mt-off { display: block; }

.music-toggle.playing {
  color: var(--navy-500);
  border-color: var(--navy-300);
  box-shadow: 0 0 0 3px rgba(20, 49, 94, 0.08);
  animation: musicPulse 2s ease-in-out infinite;
}

@keyframes musicPulse {
  0%, 100% { box-shadow: 0 0 0 3px rgba(20, 49, 94, 0.08); }
  50%      { box-shadow: 0 0 0 6px rgba(20, 49, 94, 0.04); }
}

.welcome-viewport {
  flex: 1;
  display: flex;
  overflow: hidden;
  position: relative;
}

.welcome-slide {
  flex: 0 0 100%;
  padding: var(--space-4) var(--space-1);
  overflow-y: auto;
  scrollbar-width: none;
  display: flex;
  flex-direction: column;
  /* 顶部自然排布: 标题紧跟顶部栏下方, 段落舒展, 超高时滚动且不裁切 */
  justify-content: flex-start;
  transition: margin-left 0.5s var(--ease-out-expo);
}

.welcome-viewport.at1 .welcome-slide:first-child {
  margin-left: -100%;
}

.welcome-slide::-webkit-scrollbar { display: none; }

.welcome-slide.enter {
  animation: slideEnter 0.6s var(--ease-out-expo) both;
}

@keyframes slideEnter {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}

.ws-kicker {
  font-size: var(--text-xs);
  font-weight: var(--font-bold);
  letter-spacing: 0.2em;
  color: var(--gold-500);
  text-transform: uppercase;
  margin-bottom: var(--space-3);
}

.ws-lead {
  font-size: var(--text-3xl);
  font-weight: var(--font-bold);
  color: var(--text-primary);
  line-height: var(--leading-tight);
  letter-spacing: -0.02em;
  margin-bottom: var(--space-3);
}

.ws-para {
  font-size: var(--text-md);
  line-height: var(--leading-snug);
  color: var(--text-secondary);
  margin-bottom: var(--space-3);
  letter-spacing: 0.01em;
}

.ws-para.ws-sym {
  color: var(--navy-500);
  font-weight: var(--font-medium);
}

.ws-para.ws-strong {
  color: var(--text-primary);
  font-weight: var(--font-semibold);
}

.ws-closing {
  font-size: var(--text-lg);
  font-weight: var(--font-semibold);
  color: var(--navy-500);
  letter-spacing: 0.04em;
  margin-top: var(--space-3);
  padding-top: var(--space-3);
  border-top: 1px solid var(--border-ultra-light);
}

/* 手写落款 · 头像 + 签名 + 日期（信笺式右下角，微倾拟真） */
.welcome-sign {
  margin-top: var(--space-4);
  display: flex;
  align-items: flex-end;
  justify-content: flex-end;
  gap: var(--space-3);
  padding-right: var(--space-1);
  transform: rotate(-1.5deg);
  transform-origin: right bottom;
  user-select: none;
}

/* 签名照头像: 鎏金细环 + 内白描边, 复古信笺质感 */
.ws-avatar {
  width: 68px;
  height: 68px;
  border-radius: 50%;
  object-fit: cover;
  object-position: center 30%;
  border: 2px solid rgba(212, 168, 86, 0.6);
  outline: 2px solid rgba(255, 255, 255, 0.75);
  outline-offset: -5px;
  box-shadow: 0 4px 14px rgba(15, 37, 69, 0.18), 0 1px 3px rgba(15, 37, 69, 0.1);
  flex-shrink: 0;
  display: block;
}

.ws-sig {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  line-height: 0;
}

.ws-name {
  font-family: 'MaShanZheng', 'KaiTi', 'STKaiti', cursive;
  font-size: 38px;
  line-height: 1;
  color: var(--navy-500);
  letter-spacing: 0.02em;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.6);
}

.ws-date {
  font-family: 'MaShanZheng', 'KaiTi', cursive;
  font-size: 14px;
  line-height: 1.8;
  color: var(--gold-600);
  letter-spacing: 0.12em;
  padding-right: var(--space-1);
  padding-bottom: 2px;
  white-space: nowrap;
}

.radar-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  margin: var(--space-4) 0;
}

.radar-item {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-3);
  background: var(--surface-sunken);
  border: 1px solid var(--border-ultra-light);
  border-radius: var(--radius-12);
  transition: all var(--duration-fast) var(--ease-out);
}

.radar-item:hover {
  border-color: var(--border-light);
  box-shadow: var(--shadow-sm);
  transform: translateX(2px);
}

.radar-ic {
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  flex-shrink: 0;
  background: var(--surface);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-10);
  box-shadow: var(--shadow-xs);
}

.radar-tx {
  flex: 1;
}

.radar-tx b {
  display: block;
  font-size: var(--text-md);
  font-weight: var(--font-semibold);
  color: var(--text-primary);
  margin-bottom: 2px;
  letter-spacing: 0.01em;
}

.radar-tx em {
  display: block;
  font-size: var(--text-xs);
  color: var(--text-tertiary);
  font-style: normal;
  letter-spacing: 0.02em;
  line-height: var(--leading-normal);
}

.welcome-foot {
  flex-shrink: 0;
  padding: var(--space-3) 0 var(--space-4);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
}

.welcome-dots {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.welcome-dots i {
  width: 8px;
  height: 8px;
  border-radius: var(--radius-full);
  background: var(--border-medium);
  transition: all var(--duration-normal) var(--ease-out);
}

.welcome-dots i.on {
  width: 24px;
  background: linear-gradient(90deg, var(--navy-500), var(--navy-400));
  box-shadow: 0 2px 6px rgba(20, 49, 94, 0.2);
}

.welcome-actions {
  display: flex;
  margin-left: auto;
}

.w-btn {
  width: auto;
  height: 46px;
  padding: 0 var(--space-6);
  border-radius: var(--radius-full);
  font-size: var(--text-lg);
  font-weight: var(--font-semibold);
  font-family: var(--font-sans);
  letter-spacing: 0.12em;
  cursor: pointer;
  transition: all var(--duration-fast) var(--ease-out);
  position: relative;
  overflow: hidden;
}

.w-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.w-main {
  background: linear-gradient(135deg, var(--navy-600), var(--navy-500));
  color: var(--text-on-dark);
  border: none;
  box-shadow: var(--shadow-navy);
}

.w-main::before {
  content: "";
  position: absolute;
  top: 0;
  left: 10%;
  right: 10%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.25), transparent);
}

.w-main:hover:not(:disabled) {
  transform: translateY(-2px);
  box-shadow: var(--shadow-xl), var(--shadow-navy);
  filter: brightness(1.05);
}

.w-main:active:not(:disabled) {
  transform: translateY(0) scale(0.98);
  box-shadow: var(--shadow-md);
}

/* 倒计时 */
.cd {
  display: inline-block;
  min-width: 20px;
  text-align: center;
  font-variant-numeric: tabular-nums;
  font-weight: var(--font-bold);
  opacity: 0.7;
  margin-left: 2px;
}

/* ==========================================================================
   十四、资讯详情覆盖层 · hub-sheet
   ========================================================================== */
.hub-sheet {
  position: fixed;
  inset: 0;
  z-index: 50;
  background: var(--bg);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  opacity: 0;
  transform: translateY(100%);
  transition: opacity 0.32s var(--ease-out-expo), transform 0.32s var(--ease-out-expo);
}

.hub-sheet.show {
  opacity: 1;
  transform: translateY(0);
}

.hs-top {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: calc(env(safe-area-inset-top, 0px) + var(--space-3)) var(--space-4) var(--space-3);
  background: var(--surface);
  border-bottom: 1px solid var(--border-ultra-light);
  flex-shrink: 0;
  box-shadow: var(--shadow-xs);
}

.hs-back {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-full);
  border: 1.5px solid var(--border-light);
  background: var(--surface);
  color: var(--text-secondary);
  cursor: pointer;
  box-shadow: var(--shadow-xs);
  transition: all var(--duration-fast) var(--ease-out);
  flex-shrink: 0;
}

.hs-back:hover {
  border-color: var(--border-medium);
  color: var(--text-primary);
  box-shadow: var(--shadow-sm);
}

.hs-back:active {
  transform: scale(0.93);
}

.hs-back svg {
  width: 22px;
  height: 22px;
}

.hs-heading {
  flex: 1;
  min-width: 0;
}

.hs-title {
  font-size: var(--text-xl);
  font-weight: var(--font-bold);
  color: var(--text-primary);
  letter-spacing: 0.01em;
  line-height: var(--leading-tight);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.hs-sub {
  font-size: var(--text-xs);
  color: var(--text-tertiary);
  margin-top: 1px;
  letter-spacing: 0.03em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.hs-badge {
  flex-shrink: 0;
  font-size: var(--text-xs);
  font-weight: var(--font-bold);
  letter-spacing: 0.08em;
  color: var(--text-on-dark);
  padding: 4px 10px;
  border-radius: var(--radius-6);
  background: linear-gradient(135deg, var(--gold-500), var(--gold-400));
  box-shadow: var(--shadow-gold);
  text-transform: uppercase;
}

.hs-dates-wrap {
  display: flex;
  align-items: center;
  background: var(--surface);
  border-bottom: 1px solid var(--border-ultra-light);
  flex-shrink: 0;
}

.hs-dates {
  display: flex;
  gap: var(--space-2);
  overflow-x: auto;
  padding: var(--space-3) var(--space-2);
  flex: 1;
  min-width: 0;
  scrollbar-width: none;
  scroll-behavior: smooth;
}

.hs-scroll {
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  margin: 0 var(--space-2);
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--border-light);
  border-radius: var(--radius-full);
  background: var(--surface);
  color: var(--text-tertiary);
  cursor: pointer;
  box-shadow: var(--shadow-xs);
  transition: all var(--duration-fast) var(--ease-out);
}

.hs-scroll svg {
  width: 16px;
  height: 16px;
}

.hs-scroll:hover:not(:disabled) {
  border-color: var(--border-medium);
  color: var(--navy-600);
  background: var(--surface-sunken);
}

.hs-scroll:active:not(:disabled) {
  transform: scale(0.92);
}

.hs-scroll:disabled {
  opacity: 0.32;
  cursor: default;
}

.hs-dates::-webkit-scrollbar { display: none; }

.hs-date-chip {
  flex-shrink: 0;
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-14);
  border: 1.5px solid var(--border-light);
  background: var(--surface);
  color: var(--text-secondary);
  font-size: var(--text-sm);
  font-weight: var(--font-semibold);
  font-family: var(--font-sans);
  cursor: pointer;
  transition: all var(--duration-fast) var(--ease-out);
}

.hs-date-chip:hover {
  border-color: var(--border-medium);
  background: var(--surface-sunken);
}

.hs-date-chip.on {
  background: linear-gradient(135deg, var(--navy-500), var(--navy-400));
  border-color: var(--navy-500);
  color: var(--text-on-dark);
  box-shadow: var(--shadow-navy);
}

/* 覆盖层内错误重试按钮 */
.hs-retry {
  display: inline-block;
  margin-top: var(--space-4);
  padding: var(--space-2) var(--space-5);
  border-radius: var(--radius-999);
  border: 1.5px solid var(--navy-200);
  background: var(--surface);
  color: var(--navy-600);
  font-size: var(--text-sm);
  font-weight: var(--font-semibold);
  font-family: var(--font-sans);
  cursor: pointer;
  transition: all var(--duration-fast) var(--ease-out);
}
.hs-retry:active {
  transform: scale(0.96);
}
.hs-retry:hover {
  border-color: var(--navy-400);
  background: var(--surface-sunken);
}

/* 音频面板 */
.hs-audio {
  margin: var(--space-3) var(--space-4) 0;
  flex-shrink: 0;
  background: var(--surface);
  border: 1px solid var(--border-ultra-light);
  border-radius: var(--radius-16);
  padding: var(--space-4);
  box-shadow: var(--shadow-sm);
}

.hd-tracks {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-bottom: var(--space-3);
}

.hd-track {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-full);
  border: 1.5px solid var(--border-light);
  background: var(--surface-sunken);
  color: var(--text-secondary);
  font-size: var(--text-sm);
  font-weight: var(--font-medium);
  font-family: var(--font-sans);
  cursor: pointer;
  transition: all var(--duration-fast) var(--ease-out);
}

.hd-track:hover {
  border-color: var(--border-medium);
  background: var(--surface);
}

.hd-track .t-ic {
  font-size: 10px;
  opacity: 0.7;
}

.hd-track.on {
  background: linear-gradient(135deg, rgba(20,49,94,0.06), rgba(185,146,80,0.06));
  border-color: var(--navy-500);
  color: var(--navy-500);
  box-shadow: 0 2px 8px rgba(20, 49, 94, 0.08);
}

.hd-track.on .t-ic {
  opacity: 1;
}

/* 播放器 */
.hd-player {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.hd-play {
  width: 44px;
  height: 44px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-full);
  border: none;
  background: linear-gradient(135deg, var(--navy-500), var(--navy-400));
  color: var(--text-on-dark);
  cursor: pointer;
  box-shadow: var(--shadow-navy);
  transition: all var(--duration-fast) var(--ease-out);
}

.hd-play:hover {
  transform: scale(1.08);
  filter: brightness(1.1);
  box-shadow: var(--shadow-lg), var(--shadow-navy);
}

.hd-play:active {
  transform: scale(0.95);
}

.hd-play svg {
  width: 20px;
  height: 20px;
}

.hd-play .ic-pause { display: none; }
.hd-player.playing .ic-play { display: none; }
.hd-player.playing .ic-pause { display: block; }

.hd-bar {
  flex: 1;
  min-width: 0;
}

.hd-range {
  width: 100%;
  height: 4px;
  -webkit-appearance: none;
  appearance: none;
  background: var(--border-light);
  border-radius: var(--radius-full);
  cursor: pointer;
  margin-bottom: var(--space-1);
}

.hd-range::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--navy-500);
  box-shadow: 0 2px 6px rgba(20, 49, 94, 0.3);
  cursor: pointer;
  transition: transform var(--duration-fast) var(--ease-out);
}

.hd-range::-webkit-slider-thumb:hover {
  transform: scale(1.2);
}

.hd-range::-moz-range-thumb {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--navy-500);
  box-shadow: 0 2px 6px rgba(20, 49, 94, 0.3);
  border: none;
  cursor: pointer;
}

.hd-times {
  display: flex;
  justify-content: space-between;
  font-size: var(--text-xs);
  color: var(--text-tertiary);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.02em;
}

.hd-speed {
  display: flex;
  gap: var(--space-1);
  flex-shrink: 0;
}

.hd-speed span {
  padding: 3px 8px;
  border-radius: var(--radius-6);
  font-size: var(--text-xs);
  font-weight: var(--font-semibold);
  color: var(--text-tertiary);
  background: var(--surface-sunken);
  border: 1px solid var(--border-ultra-light);
  cursor: pointer;
  transition: all var(--duration-fast) var(--ease-out);
  font-variant-numeric: tabular-nums;
}

.hd-speed span:hover {
  border-color: var(--border-light);
  color: var(--text-secondary);
}

.hd-speed span.on {
  background: linear-gradient(135deg, var(--navy-500), var(--navy-400));
  color: var(--text-on-dark);
  border-color: var(--navy-500);
  box-shadow: 0 2px 6px rgba(20, 49, 94, 0.15);
}

/* 正文区 */
.hs-body {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  padding: var(--space-4);
  scrollbar-width: none;
}

.hs-body::-webkit-scrollbar { display: none; }

/* 标签切换 */
.hs-tabs {
  display: flex;
  padding: var(--space-3) var(--space-4);
  gap: var(--space-2);
  background: var(--surface);
  border-top: 1px solid var(--border-ultra-light);
  flex-shrink: 0;
}

.ht-item {
  flex: 1;
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-10);
  border: 1.5px solid var(--border-light);
  background: var(--surface);
  color: var(--text-secondary);
  font-size: var(--text-sm);
  font-weight: var(--font-medium);
  font-family: var(--font-sans);
  cursor: pointer;
  text-align: center;
  transition: all var(--duration-fast) var(--ease-out);
  white-space: nowrap;
}

.ht-item:hover {
  border-color: var(--border-medium);
  color: var(--text-primary);
}

.ht-item.on {
  background: linear-gradient(135deg, var(--navy-500), var(--navy-400));
  color: var(--text-on-dark);
  border-color: var(--navy-500);
  box-shadow: var(--shadow-navy);
}

/* ==========================================================================
   十五、五卷阶梯覆盖层 · book-sheet
   ========================================================================== */
.book-sheet {
  position: fixed;
  inset: 0;
  z-index: 50;
  background: var(--bg);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  opacity: 0;
  transform: translateY(100%);
  transition: opacity 0.32s var(--ease-out-expo), transform 0.32s var(--ease-out-expo);
}

.book-sheet.show {
  opacity: 1;
  transform: translateY(0);
}

.bs-top {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: calc(env(safe-area-inset-top, 0px) + var(--space-3)) var(--space-4) var(--space-3);
  background: var(--surface);
  border-bottom: 1px solid var(--border-ultra-light);
  flex-shrink: 0;
  box-shadow: var(--shadow-xs);
}

.bs-back {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-full);
  border: 1.5px solid var(--border-light);
  background: var(--surface);
  color: var(--text-secondary);
  cursor: pointer;
  box-shadow: var(--shadow-xs);
  transition: all var(--duration-fast) var(--ease-out);
  flex-shrink: 0;
}

.bs-back:hover {
  border-color: var(--border-medium);
  color: var(--text-primary);
  box-shadow: var(--shadow-sm);
}

.bs-back:active {
  transform: scale(0.93);
}

.bs-back svg {
  width: 22px;
  height: 22px;
}

.bs-heading {
  flex: 1;
  min-width: 0;
}

.bs-title {
  font-size: var(--text-xl);
  font-weight: var(--font-bold);
  color: var(--text-primary);
  letter-spacing: 0.01em;
  line-height: var(--leading-tight);
}

.bs-sub {
  font-size: var(--text-xs);
  color: var(--text-tertiary);
  margin-top: 1px;
  letter-spacing: 0.04em;
}

.bs-badge {
  flex-shrink: 0;
  font-size: var(--text-xs);
  font-weight: var(--font-bold);
  letter-spacing: 0.08em;
  color: var(--text-on-dark);
  padding: 4px 10px;
  border-radius: var(--radius-6);
  background: linear-gradient(135deg, var(--gold-500), var(--gold-400));
  box-shadow: var(--shadow-gold);
}

/* 音频区 */
.bs-audio {
  margin: var(--space-3) var(--space-4) 0;
  flex-shrink: 0;
  background: var(--surface);
  border: 1px solid var(--border-ultra-light);
  border-radius: var(--radius-16);
  padding: var(--space-4);
  box-shadow: var(--shadow-sm);
}

.bs-audio-label {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: var(--space-3);
  font-size: var(--text-sm);
  font-weight: var(--font-semibold);
  color: var(--text-secondary);
}

.bs-audio-icon {
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  color: var(--navy-500);
  background: var(--navy-50);
  border-radius: var(--radius-6);
}

.bs-tracks {
  display: flex;
  gap: var(--space-2);
  margin-bottom: var(--space-3);
}

.bs-track {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-full);
  border: 1.5px solid var(--border-light);
  background: var(--surface-sunken);
  color: var(--text-secondary);
  font-size: var(--text-sm);
  font-weight: var(--font-medium);
  font-family: var(--font-sans);
  cursor: pointer;
  transition: all var(--duration-fast) var(--ease-out);
}

.bs-track:hover {
  border-color: var(--border-medium);
  background: var(--surface);
}

.bs-track.on {
  background: linear-gradient(135deg, rgba(20,49,94,0.06), rgba(185,146,80,0.06));
  border-color: var(--navy-500);
  color: var(--navy-500);
  box-shadow: 0 2px 8px rgba(20, 49, 94, 0.08);
}

.bs-track-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--border-medium);
  transition: all var(--duration-fast) var(--ease-out);
}

.bs-track.on .bs-track-dot {
  background: var(--navy-500);
  box-shadow: 0 0 0 3px rgba(20, 49, 94, 0.1);
}

/* 播放器 */
.bs-player {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.bs-play {
  width: 44px;
  height: 44px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-full);
  border: none;
  background: linear-gradient(135deg, var(--navy-500), var(--navy-400));
  color: var(--text-on-dark);
  cursor: pointer;
  box-shadow: var(--shadow-navy);
  transition: all var(--duration-fast) var(--ease-out);
}

.bs-play:hover {
  transform: scale(1.08);
  filter: brightness(1.1);
  box-shadow: var(--shadow-lg), var(--shadow-navy);
}

.bs-play:active {
  transform: scale(0.95);
}

.bs-play svg {
  width: 20px;
  height: 20px;
}

.bs-play .ic-pause { display: none; }
.bs-player.playing .ic-play { display: none; }
.bs-player.playing .ic-pause { display: block; }

.bs-bar {
  flex: 1;
  min-width: 0;
}

.bs-range {
  width: 100%;
  height: 4px;
  -webkit-appearance: none;
  appearance: none;
  background: var(--border-light);
  border-radius: var(--radius-full);
  cursor: pointer;
  margin-bottom: var(--space-1);
}

.bs-range::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--navy-500);
  box-shadow: 0 2px 6px rgba(20, 49, 94, 0.3);
  cursor: pointer;
  transition: transform var(--duration-fast) var(--ease-out);
}

.bs-range::-webkit-slider-thumb:hover {
  transform: scale(1.2);
}

.bs-range::-moz-range-thumb {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--navy-500);
  box-shadow: 0 2px 6px rgba(20, 49, 94, 0.3);
  border: none;
  cursor: pointer;
}

.bs-times {
  display: flex;
  justify-content: space-between;
  font-size: var(--text-xs);
  color: var(--text-tertiary);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.02em;
}

.bs-speed {
  display: flex;
  gap: var(--space-1);
  flex-shrink: 0;
}

.bs-speed span {
  padding: 3px 8px;
  border-radius: var(--radius-6);
  font-size: var(--text-xs);
  font-weight: var(--font-semibold);
  color: var(--text-tertiary);
  background: var(--surface-sunken);
  border: 1px solid var(--border-ultra-light);
  cursor: pointer;
  transition: all var(--duration-fast) var(--ease-out);
  font-variant-numeric: tabular-nums;
}

.bs-speed span:hover {
  border-color: var(--border-light);
  color: var(--text-secondary);
}

.bs-speed span.on {
  background: linear-gradient(135deg, var(--navy-500), var(--navy-400));
  color: var(--text-on-dark);
  border-color: var(--navy-500);
  box-shadow: 0 2px 6px rgba(20, 49, 94, 0.15);
}

/* 五卷正文 */
.bs-body {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  padding: var(--space-4);
  scrollbar-width: none;
}

.bs-body::-webkit-scrollbar { display: none; }

.bs-volumes {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.bs-vol {
  background: var(--surface);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-16);
  padding: var(--space-4);
  box-shadow: var(--shadow-xs);
  transition: all var(--duration-fast) var(--ease-out);
}

.bs-vol:hover {
  box-shadow: var(--shadow-sm);
  border-color: var(--border-medium);
  transform: translateY(-1px);
}

.bs-vol-head {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: var(--space-3);
}

.bs-vol-num {
  font-size: var(--text-xs);
  font-weight: var(--font-bold);
  letter-spacing: 0.08em;
  color: var(--text-on-dark);
  padding: 3px 8px;
  border-radius: var(--radius-6);
  background: linear-gradient(135deg, var(--navy-500), var(--navy-400));
  box-shadow: 0 2px 6px rgba(20, 49, 94, 0.15);
  flex-shrink: 0;
}

.bs-vol-title {
  flex: 1;
  font-size: var(--text-lg);
  font-weight: var(--font-bold);
  color: var(--text-primary);
  letter-spacing: 0.01em;
  line-height: var(--leading-snug);
}

.bs-vol-ch {
  font-size: var(--text-xs);
  font-weight: var(--font-medium);
  color: var(--text-tertiary);
  letter-spacing: 0.02em;
  flex-shrink: 0;
}

.bs-vol-hook {
  font-size: var(--text-sm);
  line-height: var(--leading-relaxed);
  color: var(--navy-500);
  margin-bottom: var(--space-3);
  letter-spacing: 0.01em;
  padding-left: var(--space-3);
  border-left: 3px solid var(--gold-400);
}

.bs-vol-desc {
  font-size: var(--text-sm);
  line-height: var(--leading-relaxed);
  color: var(--text-secondary);
  margin-bottom: var(--space-3);
  letter-spacing: 0.01em;
}

.bs-vol-tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1);
}

.bs-vol-tags span {
  font-size: var(--text-xs);
  font-weight: var(--font-medium);
  color: var(--text-tertiary);
  background: var(--surface-sunken);
  border: 1px solid var(--border-ultra-light);
  padding: 2px 8px;
  border-radius: var(--radius-6);
  letter-spacing: 0.02em;
}

/* 卷外(词典)视觉区分 */
.bs-vol-dict {
  background: linear-gradient(180deg, var(--gold-50) 0%, var(--surface) 100%);
  border-color: var(--border-gold);
}

.bs-vol-dict .bs-vol-num {
  background: linear-gradient(135deg, var(--gold-500), var(--gold-400));
  box-shadow: var(--shadow-gold);
}

/* 底部CTA */
.bs-cta {
  margin-top: var(--space-5);
  padding: var(--space-5);
  background: linear-gradient(180deg, var(--surface) 0%, var(--gold-50) 100%);
  border: 1px solid var(--border-gold);
  border-radius: var(--radius-16);
  text-align: center;
  box-shadow: var(--shadow-sm);
}

.bs-cta-lead {
  font-size: var(--text-sm);
  color: var(--text-tertiary);
  margin-bottom: var(--space-2);
  letter-spacing: 0.02em;
}

.bs-cta-live {
  color: var(--gold-600);
  font-weight: var(--font-semibold);
  letter-spacing: 0.04em;
}

.bs-cta-price {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: var(--space-2);
  margin-bottom: var(--space-3);
}

.bs-cta-price-tag {
  font-size: var(--text-sm);
  color: var(--text-secondary);
  letter-spacing: 0.08em;
}

.bs-cta-price-num {
  font-size: 30px;
  font-weight: var(--font-bold);
  color: var(--gold-600);
  line-height: 1;
  letter-spacing: 0.01em;
  background: linear-gradient(180deg, var(--gold-500), var(--gold-600));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.bs-cta-price-unit {
  font-size: var(--text-md);
  font-weight: var(--font-semibold);
  margin-left: 2px;
}

.bs-cta-btn {
  width: 100%;
  height: 52px;
  border-radius: var(--radius-14);
  border: none;
  background: linear-gradient(135deg, var(--gold-500), var(--gold-400));
  color: var(--text-on-gold);
  font-size: var(--text-md);
  font-weight: var(--font-semibold);
  font-family: var(--font-sans);
  letter-spacing: 0.08em;
  cursor: pointer;
  box-shadow: var(--shadow-gold);
  transition: all var(--duration-fast) var(--ease-out);
  position: relative;
  overflow: hidden;
}

.bs-cta-btn::before {
  content: "";
  position: absolute;
  top: 0;
  left: 10%;
  right: 10%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.3), transparent);
}

.bs-cta-btn:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-xl), var(--shadow-gold);
  filter: brightness(1.05);
}

.bs-cta-btn:active {
  transform: translateY(0) scale(0.98);
  box-shadow: var(--shadow-sm);
}

/* ==========================================================================
   十六、协议阅读层 · doc-sheet
   ========================================================================== */
.doc-sheet {
  position: fixed;
  inset: 0;
  z-index: 50;
  background: var(--surface);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  opacity: 0;
  transform: translateY(100%);
  transition: opacity 0.24s var(--ease-out-expo), transform 0.24s var(--ease-out-expo);
}

.doc-sheet.show {
  opacity: 1;
  transform: translateY(0);
}

.doc-top {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: calc(env(safe-area-inset-top, 0px) + var(--space-3)) var(--space-4) var(--space-3);
  background: var(--surface);
  border-bottom: 1px solid var(--border-ultra-light);
  flex-shrink: 0;
  box-shadow: var(--shadow-xs);
}

.doc-back {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-10);
  border: 1.5px solid var(--border-light);
  background: var(--surface);
  color: var(--text-secondary);
  font-size: var(--text-sm);
  font-weight: var(--font-medium);
  cursor: pointer;
  box-shadow: var(--shadow-xs);
  transition: all var(--duration-fast) var(--ease-out);
  flex-shrink: 0;
}

.doc-back:hover {
  border-color: var(--border-medium);
  color: var(--text-primary);
  box-shadow: var(--shadow-sm);
}

.doc-back:active {
  transform: scale(0.96);
}

.doc-back svg {
  width: 18px;
  height: 18px;
}

.doc-title {
  flex: 1;
  font-size: var(--text-xl);
  font-weight: var(--font-bold);
  color: var(--text-primary);
  text-align: center;
  letter-spacing: 0.02em;
  line-height: var(--leading-tight);
}

.doc-top-pad {
  width: 70px;
  flex-shrink: 0;
}

.doc-body {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  padding: var(--space-4) var(--space-5) var(--space-8);
  scrollbar-width: none;
  line-height: var(--leading-relaxed);
  color: var(--text-secondary);
}

.doc-body::-webkit-scrollbar { display: none; }

/* 文档元信息 */
.doc-lead {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-bottom: var(--space-5);
  padding-bottom: var(--space-4);
  border-bottom: 1px solid var(--border-ultra-light);
}

.doc-lead .dv {
  font-size: var(--text-xs);
  font-weight: var(--font-medium);
  color: var(--text-tertiary);
  background: var(--surface-sunken);
  padding: 3px 10px;
  border-radius: var(--radius-6);
  border: 1px solid var(--border-ultra-light);
  letter-spacing: 0.02em;
}

/* Markdown 渲染样式 (doc-body + md 容器共用) */
.doc-body h1,
.doc-body h2,
.doc-body h3,
.doc-body h4,
.md h1,
.md h2,
.md h3,
.md h4 {
  color: var(--text-primary);
  font-weight: var(--font-bold);
  margin: var(--space-5) 0 var(--space-3);
  line-height: var(--leading-snug);
  letter-spacing: -0.01em;
}

.doc-body h1, .md h1 { font-size: var(--text-3xl); }
.doc-body h2, .md h2 { font-size: var(--text-2xl); }
.doc-body h3, .md h3 { font-size: var(--text-xl); }
.doc-body h4, .md h4 { font-size: var(--text-lg); }

.doc-body h1:first-child,
.doc-body h2:first-child,
.doc-body h3:first-child,
.doc-body h4:first-child,
.md h1:first-child,
.md h2:first-child,
.md h3:first-child,
.md h4:first-child {
  margin-top: 0;
}

.doc-body p,
.md p {
  margin-bottom: var(--space-3);
  font-size: var(--text-md);
  color: var(--text-secondary);
  line-height: var(--leading-relaxed);
  letter-spacing: 0.01em;
}

.doc-body ul,
.doc-body ol,
.md ul,
.md ol {
  margin: 0 0 var(--space-3) var(--space-4);
  padding-left: var(--space-3);
}

.doc-body li,
.md li {
  margin-bottom: var(--space-1);
  font-size: var(--text-md);
  color: var(--text-secondary);
  line-height: var(--leading-relaxed);
}

.doc-body blockquote,
.md blockquote {
  margin: var(--space-3) 0;
  padding: var(--space-3) var(--space-4);
  border-left: 3px solid var(--gold-500);
  background: var(--gold-50);
  border-radius: 0 var(--radius-8) var(--radius-8) 0;
  color: var(--text-secondary);
  font-size: var(--text-sm);
  line-height: var(--leading-relaxed);
}

.doc-body hr,
.md hr {
  border: none;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--border-light), transparent);
  margin: var(--space-5) 0;
}

.doc-body code,
.md code {
  font-family: var(--font-mono);
  font-size: 0.9em;
  background: var(--surface-sunken);
  padding: 1px 5px;
  border-radius: var(--radius-4);
  color: var(--navy-500);
  border: 1px solid var(--border-ultra-light);
}

.doc-body pre,
.md pre {
  background: var(--gray-900);
  color: var(--gray-200);
  padding: var(--space-4);
  border-radius: var(--radius-12);
  overflow-x: auto;
  margin: var(--space-3) 0;
  font-size: var(--text-sm);
  line-height: var(--leading-normal);
}

.doc-body pre code,
.md pre code {
  background: none;
  border: none;
  padding: 0;
  color: inherit;
  font-size: inherit;
}

.doc-body table,
.md table {
  width: 100%;
  border-collapse: collapse;
  margin: var(--space-3) 0;
  font-size: var(--text-sm);
}

.doc-body th,
.doc-body td,
.md th,
.md td {
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--border-light);
  text-align: left;
}

.doc-body th,
.md th {
  background: var(--surface-sunken);
  font-weight: var(--font-semibold);
  color: var(--text-primary);
}

.doc-body a,
.md a {
  color: var(--navy-500);
  font-weight: var(--font-medium);
  text-decoration: none;
  border-bottom: 1px solid rgba(20, 49, 94, 0.2);
  transition: border-color var(--duration-fast) var(--ease-out);
}

.doc-body a:hover,
.md a:hover {
  border-color: var(--navy-500);
}

/* ==========================================================================
   十七、广告导读卡片 · 内联内容(非全屏覆盖层)
   ========================================================================== */
.ad-guide {
  background: linear-gradient(180deg, var(--surface) 0%, var(--bg-warm) 100%);
  border: 1px solid var(--border-gold);
  border-radius: var(--radius-20);
  overflow: hidden;
  margin-bottom: var(--space-4);
  box-shadow: var(--shadow-md);
  position: relative;
  transition: opacity 0.35s var(--ease-out), max-height 0.4s var(--ease-out), margin 0.35s var(--ease-out);
}

/* AI 变体 */
.ad-guide-ai {
  border-color: rgba(99, 102, 241, 0.25);
}

/* 顶部装饰条 */
.ad-guide::before {
  content: "";
  position: absolute;
  top: 0;
  left: 20%;
  right: 20%;
  height: 3px;
  background: linear-gradient(90deg, transparent, var(--gold-500), transparent);
  border-radius: 0 0 var(--radius-full) var(--radius-full);
  z-index: 2;
}

.ad-guide-ai::before {
  background: linear-gradient(90deg, transparent, var(--indigo-500), transparent);
}

/* Hero 区 */
.ag-hero {
  padding: var(--space-5) var(--space-5) var(--space-3);
  flex-shrink: 0;
  text-align: center;
}

/* 导读卡收起按钮(右上角) */
.ag-hide {
  position: absolute;
  top: var(--space-3);
  right: var(--space-3);
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--border-light);
  border-radius: var(--radius-full);
  background: var(--surface);
  color: var(--text-tertiary);
  font-size: 12px;
  line-height: 1;
  cursor: pointer;
  z-index: 2;
  transition: all var(--duration-fast) var(--ease-out);
}

.ag-hide:hover {
  color: var(--navy-600);
  border-color: var(--border-medium);
  background: var(--surface-sunken);
}

.ag-hide:active {
  transform: scale(0.92);
}

/* 导读收起后的轻量入口条 */
.ag-collapsed {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-bottom: var(--space-4);
  padding: var(--space-3) var(--space-4);
  background: var(--surface);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-14);
  cursor: pointer;
  box-shadow: var(--shadow-xs);
  transition: all var(--duration-fast) var(--ease-out);
}

.ag-collapsed:hover {
  border-color: var(--navy-200);
  background: var(--surface-sunken);
}

.ag-collapsed:active {
  transform: scale(0.99);
}

.agc-ic {
  font-size: 16px;
  flex-shrink: 0;
}

.agc-tx {
  flex: 1;
  font-size: var(--text-sm);
  color: var(--text-secondary);
  min-width: 0;
}

.agc-btn {
  flex-shrink: 0;
  font-size: var(--text-xs);
  font-weight: var(--font-semibold);
  color: var(--navy-600);
  letter-spacing: 0.04em;
  padding: var(--space-1) var(--space-3);
  border: 1px solid var(--navy-200);
  border-radius: var(--radius-full);
}

.ag-icon {
  width: 48px;
  height: 48px;
  margin: 0 auto var(--space-3);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  border-radius: var(--radius-12);
  background: linear-gradient(135deg, var(--navy-500), var(--navy-400));
  box-shadow: 0 4px 12px rgba(20, 49, 94, 0.2);
  position: relative;
  overflow: hidden;
}

.ag-icon::after {
  content: "";
  position: absolute;
  top: 0;
  left: 10%;
  right: 10%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.3), transparent);
}

.ag-title {
  font-size: var(--text-3xl);
  font-weight: var(--font-bold);
  color: var(--text-primary);
  line-height: var(--leading-tight);
  letter-spacing: -0.02em;
  margin-bottom: var(--space-1);
}

.ag-sub {
  font-size: var(--text-sm);
  color: var(--text-tertiary);
  line-height: var(--leading-normal);
  letter-spacing: 0.02em;
}

/* 内容区 */
.ag-body {
  padding: 0 var(--space-5);
  overflow: hidden;
}

.ag-preview {
  padding-bottom: var(--space-3);
}

.ag-preview p {
  font-size: var(--text-md);
  line-height: var(--leading-relaxed);
  color: var(--text-secondary);
  margin-bottom: var(--space-3);
  letter-spacing: 0.01em;
}

.ag-preview strong {
  color: var(--navy-500);
  font-weight: var(--font-semibold);
}

.ag-lead {
  font-size: var(--text-md) !important;
  font-weight: var(--font-semibold) !important;
  color: var(--text-primary) !important;
  margin-bottom: var(--space-3) !important;
}

.ag-highlight {
  font-size: var(--text-md);
  font-weight: var(--font-semibold);
  color: var(--navy-600);
  background: linear-gradient(135deg, rgba(20,49,94,0.06) 0%, rgba(185,146,80,0.04) 100%);
  border-left: 3px solid var(--gold-500);
  padding: var(--space-3) var(--space-4);
  border-radius: 0 var(--radius-8) var(--radius-8) 0;
  margin: var(--space-3) 0;
  line-height: var(--leading-relaxed);
}

/* 折叠区 */
.ag-full {
  border-top: 1px solid var(--border-ultra-light);
  padding-top: var(--space-4);
  padding-bottom: var(--space-3);
}

.ag-section {
  margin-bottom: var(--space-4);
}

.ag-section:last-child {
  margin-bottom: 0;
}

.ag-section h4 {
  font-size: var(--text-lg);
  font-weight: var(--font-bold);
  color: var(--text-primary);
  margin-bottom: var(--space-2);
  line-height: var(--leading-snug);
  letter-spacing: -0.01em;
}

.ag-section p {
  font-size: var(--text-md);
  line-height: var(--leading-relaxed);
  color: var(--text-secondary);
  margin-bottom: var(--space-3);
  letter-spacing: 0.01em;
}

.ag-quote {
  font-size: var(--text-md);
  font-weight: var(--font-medium);
  color: var(--navy-500);
  border-left: 3px solid var(--gold-500);
  padding: var(--space-3) var(--space-4);
  background: linear-gradient(135deg, rgba(20,49,94,0.04) 0%, rgba(185,146,80,0.03) 100%);
  border-radius: 0 var(--radius-8) var(--radius-8) 0;
  margin: var(--space-3) 0;
  line-height: var(--leading-relaxed);
  letter-spacing: 0.01em;
}

.ag-cta {
  font-size: var(--text-md);
  font-weight: var(--font-bold);
  color: var(--navy-700);
  background: var(--navy-50);
  border: 1px solid var(--navy-100);
  border-left: 3px solid var(--gold-400);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-10);
  text-align: left;
  margin: var(--space-4) 0 var(--space-3);
  line-height: var(--leading-relaxed);
  letter-spacing: 0.02em;
}

.ag-disclaim {
  font-size: var(--text-xs);
  color: var(--text-quaternary);
  letter-spacing: 0.03em;
  line-height: var(--leading-relaxed);
  margin: var(--space-4) 0 0;
  padding-top: var(--space-3);
  border-top: 1px dashed var(--border-ultra-light);
}

.md-disclaim {
  font-size: var(--text-xs);
  color: var(--text-quaternary);
  letter-spacing: 0.03em;
  line-height: var(--leading-relaxed);
  margin: var(--space-4) 0 var(--space-6);
  padding: var(--space-3) var(--space-4) 0;
  border-top: 1px dashed var(--border-ultra-light);
}

/* 音频栏 */
.ag-audio-bar {
  display: flex;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-5) var(--space-4);
  border-bottom: 1px solid var(--border-ultra-light);
  flex-shrink: 0;
}

.ag-voice-btn {
  flex: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-1);
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-10);
  border: 1.5px solid var(--border-light);
  background: var(--surface);
  color: var(--text-secondary);
  font-size: var(--text-sm);
  font-weight: var(--font-medium);
  font-family: var(--font-sans);
  cursor: pointer;
  transition: all var(--duration-fast) var(--ease-out);
}

.ag-voice-btn:hover {
  border-color: var(--border-medium);
  background: var(--surface-sunken);
}

.ag-voice-btn:active {
  transform: scale(0.96);
}

.ag-voice-btn.playing {
  border-color: var(--navy-500);
  background: linear-gradient(135deg, rgba(20,49,94,0.04), rgba(20,49,94,0.02));
  color: var(--navy-500);
  box-shadow: 0 2px 8px rgba(20, 49, 94, 0.08);
}

.ag-vic {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--surface-sunken);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 9px;
  transition: all var(--duration-fast) var(--ease-out);
}

.ag-voice-btn.playing .ag-vic {
  background: var(--navy-500);
  color: var(--text-on-dark);
  box-shadow: 0 2px 6px rgba(20, 49, 94, 0.2);
}

.ag-vtxt {
  font-size: var(--text-sm);
}

/* 行动区 */
.ag-actions {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-5) var(--space-5);
  flex-shrink: 0;
  background: linear-gradient(180deg, transparent, var(--surface));
  position: relative;
}

.ag-actions::before {
  content: "";
  position: absolute;
  top: -20px;
  left: 0;
  right: 0;
  height: 20px;
  background: linear-gradient(180deg, transparent, var(--surface));
  pointer-events: none;
}

.ag-dismiss {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-5);
  border: none;
  border-radius: var(--radius-14);
  background: linear-gradient(135deg, var(--navy-600), var(--navy-500));
  color: var(--text-on-dark);
  font-size: var(--text-md);
  font-weight: var(--font-semibold);
  font-family: var(--font-sans);
  letter-spacing: 0.1em;
  cursor: pointer;
  box-shadow: var(--shadow-navy);
  transition: all var(--duration-fast) var(--ease-out);
  position: relative;
  overflow: hidden;
}

.ag-dismiss::before {
  content: "";
  position: absolute;
  top: 0;
  left: 10%;
  right: 10%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.25), transparent);
}

.ag-dismiss:hover {
  transform: translateY(-1px);
  box-shadow: var(--shadow-lg), var(--shadow-navy);
  filter: brightness(1.05);
}

.ag-dismiss:active {
  transform: translateY(0) scale(0.98);
}

.ag-dismiss-arrow {
  font-size: var(--text-lg);
  transition: transform var(--duration-fast) var(--ease-out);
}

.ag-dismiss:hover .ag-dismiss-arrow {
  transform: translateX(3px);
}

.ag-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-1);
  padding: var(--space-2) var(--space-4);
  border: 1.5px solid var(--border-light);
  border-radius: var(--radius-12);
  background: var(--surface);
  color: var(--text-tertiary);
  font-size: var(--text-sm);
  font-weight: var(--font-medium);
  font-family: var(--font-sans);
  cursor: pointer;
  transition: all var(--duration-fast) var(--ease-out);
}

.ag-toggle:hover {
  border-color: var(--border-medium);
  color: var(--text-secondary);
  background: var(--surface-sunken);
}

.ag-toggle:active {
  transform: scale(0.98);
}

.ag-toggle-icon {
  font-size: 10px;
  transition: transform var(--duration-normal) var(--ease-out);
}

/* ==========================================================================
   十八、新闻速览列表 · brief-list
   ========================================================================== */
.brief-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.brief-item {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-3);
  background: var(--surface);
  border: 1px solid var(--border-ultra-light);
  border-radius: var(--radius-12);
  transition: all var(--duration-fast) var(--ease-out);
}

.brief-item:hover {
  border-color: var(--border-light);
  box-shadow: var(--shadow-xs);
  transform: translateX(2px);
}

.brief-idx {
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--text-xs);
  font-weight: var(--font-bold);
  color: var(--text-on-dark);
  background: linear-gradient(135deg, var(--navy-500), var(--navy-400));
  border-radius: var(--radius-8);
  box-shadow: 0 2px 6px rgba(20, 49, 94, 0.15);
  font-variant-numeric: tabular-nums;
}

.brief-tx {
  flex: 1;
  min-width: 0;
  font-size: var(--text-md);
  line-height: var(--leading-relaxed);
  color: var(--text-secondary);
  letter-spacing: 0.01em;
}

.brief-tx strong {
  color: var(--text-primary);
  font-weight: var(--font-semibold);
}

.brief-tx em {
  color: var(--gold-600);
  font-style: normal;
  font-weight: var(--font-medium);
}

.brief-tx code {
  font-family: var(--font-mono);
  font-size: 0.9em;
  background: var(--surface-sunken);
  padding: 1px 4px;
  border-radius: var(--radius-4);
  color: var(--navy-500);
}

.brief-tx a {
  color: var(--navy-500);
  font-weight: var(--font-medium);
  text-decoration: none;
  border-bottom: 1px solid rgba(20, 49, 94, 0.2);
}

.brief-tx small {
  display: block;
  margin-top: 2px;
}

/* ==========================================================================
   十九、Markdown 渲染容器 · .md (独立容器,复用 doc-body 排版)
   ========================================================================== */
.md {
  padding: var(--space-1) 0;
}

.md ol,
.md ul {
  padding-left: var(--space-5);
  margin: var(--space-2) 0;
}

.md li {
  line-height: var(--leading-relaxed);
  margin-bottom: var(--space-1);
}

.md li > ul,
.md li > ol {
  margin-top: var(--space-1);
}

.md > *:first-child {
  margin-top: 0;
}

.md > *:last-child {
  margin-bottom: 0;
}

/* ==========================================================================
   二十、Toast 提示 · 精致浮层
   ========================================================================== */
.toast {
  position: fixed;
  left: 50%;
  bottom: calc(env(safe-area-inset-bottom, 0px) + var(--space-8));
  transform: translateX(-50%);
  z-index: 200;
  padding: var(--space-3) var(--space-5);
  background: var(--surface);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-14);
  box-shadow: var(--shadow-xl);
  color: var(--text-primary);
  font-size: var(--text-sm);
  font-weight: var(--font-medium);
  letter-spacing: 0.01em;
  max-width: 320px;
  text-align: center;
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  animation: toastIn 0.4s var(--ease-out-expo) both;
}

.toast.ok {
  background: linear-gradient(135deg, var(--success-bg), var(--surface));
  border-color: rgba(22, 163, 74, 0.2);
  color: var(--success);
}

@keyframes toastIn {
  from { opacity: 0; transform: translateX(-50%) translateY(20px) scale(0.95); }
  to   { opacity: 1; transform: translateX(-50%) translateY(0) scale(1); }
}

/* ==========================================================================
   二十一、页脚
   ========================================================================== */
.footer {
  text-align: center;
  font-size: var(--text-xs);
  color: var(--text-quaternary);
  letter-spacing: 0.06em;
  padding: var(--space-3) 0 var(--space-2);
  margin-top: auto;
}

/* ==========================================================================
   二十二、状态与辅助
   ========================================================================== */
/* 加载状态 */
.hs-state {
  text-align: center;
  padding: var(--space-10) var(--space-4);
  color: var(--text-tertiary);
  font-size: var(--text-sm);
  letter-spacing: 0.04em;
}

.hs-state .sp {
  display: block;
  margin-top: var(--space-2);
  font-size: var(--text-xs);
  color: var(--text-quaternary);
  letter-spacing: 0.02em;
}

/* 卡片成功态 */
.card.success {
  border-color: rgba(22, 163, 74, 0.2);
  box-shadow: 0 0 0 3px rgba(22, 163, 74, 0.06), var(--shadow-lg);
}

/* 震动反馈 */
.shake {
  animation: shake 0.5s var(--ease-out) both;
}

@keyframes shake {
  0%, 100% { transform: translateX(0); }
  10%, 30%, 50%, 70%, 90% { transform: translateX(-4px); }
  20%, 40%, 60%, 80% { transform: translateX(4px); }
}

/* 隐藏 */
[hidden] {
  display: none !important;
}

/* ==========================================================================
   二十三、响应式与视口适配
   ========================================================================== */
@media (min-width: 390px) {
  .screen {
    padding: 0 var(--space-6);
  }
}

@media (min-width: 430px) {
  .screen {
    padding: 0 var(--space-8);
  }
}

/* 超窄屏（≤380px）：协议行允许换行，防止溢出 */
@media (max-width: 380px) {
  .agree-text {
    white-space: normal;
  }
}

/* ==========================================================================
   二十四、暗色模式支持
   ========================================================================== */
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0F172A;
    --bg-warm: #1E293B;
    --surface: #1E293B;
    --surface-elevated: #334155;
    --surface-sunken: #0F172A;
    --text-primary: #F1F5F9;
    --text-secondary: #94A3B8;
    --text-tertiary: #64748B;
    --text-quaternary: #475569;
    --text-low: #475569;
    --border-ultra-light: rgba(241, 245, 249, 0.04);
    --border-light: rgba(241, 245, 249, 0.08);
    --border-medium: rgba(241, 245, 249, 0.14);
    --border-strong: rgba(241, 245, 249, 0.22);
  }
}

/* ==========================================================================
   二十五、性能优化
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* ==========================================================================
   二十六、打印样式
   ========================================================================== */
@media print {
  .bg, .welcome, .hub-sheet, .book-sheet, .doc-sheet, .ad-guide, .toast {
    display: none !important;
  }
  body {
    background: white;
    color: black;
  }
  .card {
    box-shadow: none;
    border: 1px solid #ccc;
  }
}