/* ============================================================================
   励新市中 · 微信小程序原型 — 设计令牌与组件库
   对应《励新市中小程序端原型设计规格说明书 V1.0》第二章 / 第五章
   ---------------------------------------------------------------------------
   单位换算：设计稿 750rpx = 375pt，即 CSS px = rpx ÷ 2
   例：32rpx 安全边距 → 16px；88rpx 按钮高 → 44px（满足 44pt 触控下限）
   ========================================================================== */

:root {
  /* ── 2.1 色彩系统（全面统一为 P0/P1 蓝绿晨曦现代色彩空间） ──────────────────── */
  --home-sky:             oklch(0.692 0.142 267.5); /* #7597f4 晨曦天蓝 */
  --home-azure:           oklch(0.749 0.089 248.1); /* #80b3e4 湖水天青 */
  --home-aqua:            oklch(0.832 0.083 178.3); /* #8adac8 薄荷微风 */
  --home-mist:            oklch(0.966 0.013 262.4); /* #eff4fd 雾白收底 */
  --home-paper:           oklch(0.985 0.01 250);
  --home-ink:             oklch(0.28 0.035 255);    /* 深色墨字 */
  --home-muted:           oklch(0.40 0.035 250);    /* 次要说明 */
  --home-red:             oklch(0.64 0.16 25);
  --home-green:           oklch(0.80 0.07 150);
  --home-yellow:          oklch(0.88 0.07 100);
  --home-blue:            oklch(0.80 0.07 240);
  --home-coral:           oklch(0.76 0.10 45);
  --home-shade:           oklch(0.52 0.09 252);
  --home-shadow:          0 8px 24px color-mix(in oklch, var(--home-shade) 18%, transparent);

  /* 主题色映射 */
  --color-primary:        oklch(0.56 0.16 265);     /* #3b6ef6 活力湛蓝 */
  --color-primary-light:  oklch(0.68 0.14 262);     /* #6b93fa 浅天蓝 */
  --color-primary-bg:     oklch(0.95 0.02 260);     /* #eaf0fe 浅蓝背景 */
  --color-primary-press:  oklch(0.90 0.04 260);     /* 按压浅蓝 */
  --color-accent:         oklch(0.75 0.12 175);     /* 薄荷青 */
  --color-text-primary:   oklch(0.24 0.03 255);     /* #1a1e28 墨色文本 */
  --color-text-secondary: oklch(0.46 0.03 250);     /* #575e6d 次级文本 */
  --color-text-tertiary:  oklch(0.64 0.02 250);     /* #8f97a6 辅助文本 */
  --color-text-inverse:   #FFFFFF;
  --color-bg-page:        var(--home-mist);         /* #eff4fd 雾白背景 */
  --color-bg-card:        #FFFFFF;
  --color-border:         oklch(0.92 0.015 255);    /* #e2e7f0 柔和描边 */
  --color-mask:           rgba(20, 28, 48, 0.45);
  --color-success:        #07C160;
  --color-warning:        #FA8C16;
  --color-black:          #000000;
  --color-viewer-page:    #121620;
  --color-file-pdf:       #E05252;
  --color-file-doc:       #3875D7;
  --color-file-xls:       #1E8E4E;
  --color-disabled:       #C8CFD9;
  --color-illus:          #B8C3D4;
  --color-ph-label:       #566173;
  --gradient-primary:     linear-gradient(135deg, oklch(0.62 0.15 265) 0%, oklch(0.75 0.12 180) 100%);
  --gradient-sky-aqua:    linear-gradient(90deg, var(--home-sky) 0%, var(--home-azure) 50%, var(--home-aqua) 100%);

  /* 主色交互态 */
  --color-primary-hover:  oklch(0.48 0.17 265);
  --color-primary-active: oklch(0.42 0.18 265);
  --color-primary-press2: oklch(0.88 0.05 260);
  --color-border-press:   oklch(0.85 0.02 255);

  /* 原型台面（非小程序内色，仅用于画板背景） */
  --stage-bg:             #DFE2E7;
  --stage-ink:            #3A3F47;
  --stage-ink-2:          #6C7480;
  --stage-line:           rgba(58, 63, 71, 0.22);

  /* 出版物封面用纸色（手册封面稿，非界面色） */
  --cover-paper:          #F2EEE5;
  --cover-ink:            #23282F;

  /* ── 2.2 字体系统（rpx ÷ 2） ────────────────────────────────────── */
  --font-family: 'PingFang SC', 'HarmonyOS Sans SC', 'Source Han Sans SC',
                 'Noto Sans SC', 'Microsoft YaHei', -apple-system, sans-serif;
  --font-num:    ui-monospace, 'SF Mono', 'JetBrains Mono', Menlo, monospace;

  --fs-display: 24px;  --lh-display: 1.3;
  --fs-h1:      20px;  --lh-h1:      1.4;
  --fs-h2:      17px;  --lh-h2:      1.4;
  --fs-h3:      15px;  --lh-h3:      1.5;
  --fs-body:    14px;  --lh-body:    1.75;   /* 中文正文行高硬性 ≥1.75 */
  --fs-caption: 12px;  --lh-caption: 1.5;
  --fs-note:    11px;  --lh-note:    1.4;

  /* ── 2.3 间距与圆角 ─────────────────────────────────────────────── */
  --sp-1:  4px;   --sp-2:  8px;   --sp-3: 12px;  --sp-4: 16px;
  --sp-5: 20px;   --sp-6: 24px;   --sp-8: 32px;
  --edge: 16px;                    /* 页面左右安全边距 32rpx */
  --gap-card: 12px;                /* 卡片间距 24rpx */

  --radius-sm:   4px;
  --radius-img:  6px;              /* 12rpx，图片/小封面 */
  --radius-md:   8px;
  --radius-lg:  12px;
  --radius-full: 999px;

  /* ── 2.4 阴影 ───────────────────────────────────────────────────── */
  --shadow-card:  0 2px 8px rgba(0, 0, 0, 0.06);
  --shadow-float: 0 4px 16px rgba(0, 0, 0, 0.12);
  --shadow-nav:   0 1px 4px rgba(0, 0, 0, 0.04);
  --shadow-up:    0 -4px 16px rgba(0, 0, 0, 0.12);

  /* ── 设备结构 ───────────────────────────────────────────────────── */
  --h-status: 44px;
  --h-nav:    44px;
  --h-home:   34px;
  --h-actionbar: 56px;             /* 112rpx */

  /* ── 六、动效 ───────────────────────────────────────────────────── */
  --ease-out:   cubic-bezier(0, 0, 0.2, 1);
  --ease-std:   cubic-bezier(0.4, 0, 0.2, 1);
  --ease-sheet: cubic-bezier(0.16, 1, 0.3, 1);
}

/* ── reset ─────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--stage-bg);
  font-family: var(--font-family);
  color: var(--color-text-primary);
  font-size: var(--fs-body);
  -webkit-font-smoothing: antialiased;
}
img, svg { display: block; max-width: 100%; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
a { color: inherit; text-decoration: none; }
p  { margin: 0; }
h1, h2, h3, h4 { margin: 0; font-weight: 600; }
ul { margin: 0; padding: 0; list-style: none; }

/* ============================================================================
   设备外壳
   ========================================================================== */
.stage { display: grid; place-items: center; min-height: 100vh; }
@media (min-width: 700px) { .stage { padding: 40px 24px; } }

.phone {
  position: relative;
  width: 375px;
  height: 812px;
  overflow: hidden;
  background: var(--color-bg-page);
  display: flex;
  flex-direction: column;
  isolation: isolate;
}
@media (min-width: 700px) {
  .phone { border-radius: 34px; box-shadow: 0 24px 64px rgba(0, 0, 0, 0.24); }
}

/* iOS 状态栏 */
.statusbar {
  position: absolute; inset: 0 0 auto 0; z-index: 60;
  height: var(--h-status);
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 22px 0 28px;
  font-size: 13px; font-weight: 600;
  color: var(--color-text-primary);
  pointer-events: none;
}
.statusbar .sb-time { font-variant-numeric: tabular-nums; letter-spacing: 0.01em; }
.statusbar .sb-icons { display: flex; align-items: center; gap: 5px; }
.statusbar svg { fill: currentColor; }
.statusbar--light { color: var(--color-text-inverse); }

/* Home 指示条 */
.home-indicator {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 60;
  height: var(--h-home);
  display: grid; place-items: center;
  pointer-events: none;
}
.home-indicator::after {
  content: ''; width: 134px; height: 5px; border-radius: var(--radius-full);
  background: var(--color-text-primary); opacity: 0.85;
}
.home-indicator--light::after { background: var(--color-text-inverse); opacity: 0.6; }

/* ============================================================================
   3.2 导航栏
   ========================================================================== */
.navbar {
  position: relative; z-index: 50; flex: none;
  height: calc(var(--h-status) + var(--h-nav));
  padding-top: var(--h-status);
  display: flex; align-items: center;
  background: var(--color-bg-card);
  box-shadow: var(--shadow-nav);
}
.navbar__back {
  position: absolute; left: 6px; bottom: 0;
  width: 44px; height: var(--h-nav);
  display: grid; place-items: center;
  color: var(--color-text-primary);
  border-radius: var(--radius-full);
  transition: background 0.15s var(--ease-out);
}
.navbar__back:hover  { background: var(--color-bg-page); }
.navbar__back:active { background: var(--color-border); }
.navbar__back:focus-visible { outline: 2px solid var(--color-primary); outline-offset: -2px; }
.navbar__title {
  flex: 1; text-align: center;
  font-size: var(--fs-h3); font-weight: 600; line-height: var(--h-nav);
}
.navbar__action {
  position: absolute; right: 6px; bottom: 0;
  height: var(--h-nav); display: grid; place-items: center;
  padding: 0 10px; font-size: var(--fs-caption); color: var(--color-primary);
  border-radius: var(--radius-full);
}
.navbar__action:hover { background: var(--color-primary-bg); }

/* 3.3 内容区 */
.screen {
  flex: 1; min-height: 0; overflow-y: auto; overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.screen::-webkit-scrollbar { display: none; }
.screen--padded { padding: var(--sp-3) var(--edge) calc(var(--h-home) + var(--sp-6)); }
.screen--immersive { padding: 0 0 calc(var(--h-home) + var(--sp-6)); }
.screen--with-bar  { padding-bottom: calc(var(--h-actionbar) + var(--h-home) + var(--sp-3)); }

/* ============================================================================
   排版工具类
   ========================================================================== */
.t-display  { font-size: var(--fs-display); line-height: var(--lh-display); font-weight: 600; letter-spacing: 0.01em; }
.t-h1       { font-size: var(--fs-h1);   line-height: var(--lh-h1);   font-weight: 600; }
.t-h2       { font-size: var(--fs-h2);   line-height: var(--lh-h2);   font-weight: 600; }
.t-h3       { font-size: var(--fs-h3);   line-height: var(--lh-h3);   font-weight: 500; }
.t-body     { font-size: var(--fs-body); line-height: var(--lh-body); font-weight: 400; }
.t-caption  { font-size: var(--fs-caption); line-height: var(--lh-caption); font-weight: 400; }
.t-note     { font-size: var(--fs-note); line-height: var(--lh-note); font-weight: 400; }
.c-secondary { color: var(--color-text-secondary); }
.c-tertiary  { color: var(--color-text-tertiary); }
.c-primary   { color: var(--color-primary); }
.c-inverse   { color: var(--color-text-inverse); }
.num { font-variant-numeric: tabular-nums; }

.clamp-1, .clamp-2 { display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden; }
.clamp-1 { -webkit-line-clamp: 1; }
.clamp-2 { -webkit-line-clamp: 2; }

/* 主色竖条小标题 */
.rule-title {
  display: flex; align-items: center; gap: var(--sp-2);
  font-size: var(--fs-h3); font-weight: 600; line-height: 1.4;
}
.rule-title::before {
  content: ''; flex: none; width: 3px; height: 14px;
  border-radius: 2px; background: var(--color-primary);
}

/* ============================================================================
   2.6 图片占位 — #EBEDF0 纯色块 + 居中线性图标（禁用破图样式）
   ========================================================================== */
.ph {
  position: relative; overflow: hidden;
  background: var(--color-border);
  display: grid; place-items: center; align-content: center;
  gap: 6px;
  color: var(--color-ph-label);
  text-align: center;
}
.ph svg { width: 24px; height: 24px; opacity: 0.7; }
.ph__label {
  font-size: 10px; line-height: 1.3; letter-spacing: 0.02em;
  color: var(--color-ph-label); max-width: 80%;
}
.ph--16x9  { aspect-ratio: 16 / 9; }
.ph--16x10 { aspect-ratio: 16 / 10; }
.ph--4x3   { aspect-ratio: 4 / 3; }
.ph--3x4   { aspect-ratio: 3 / 4; }
.ph--dark  { background: var(--color-viewer-page); color: rgba(255, 255, 255, 0.55); }
.ph--dark .ph__label { color: rgba(255, 255, 255, 0.45); }

/* ============================================================================
   C4 · Tag 标签 — 统一高 20px / 内边距 8px / 圆角 3px / 11px
   ========================================================================== */
.tag {
  display: inline-flex; align-items: center; height: 20px; padding: 0 8px;
  border-radius: 3px; font-size: var(--fs-note); line-height: 1; white-space: nowrap;
}
.tag--primary { background: var(--color-primary-bg); color: var(--color-primary); }
.tag--accent  { background: var(--color-accent);     color: var(--color-text-inverse); }
.tag--neutral { background: var(--color-bg-page);    color: var(--color-text-secondary); }
.tag--overlay { background: rgba(0, 0, 0, 0.6);      color: var(--color-text-inverse); }
.tag--rec { flex: none; width: 22px; padding: 0; justify-content: center; height: 16px; font-size: 10px; }

/* ============================================================================
   C5 · Chip 筛选项
   ========================================================================== */
.chip-row {
  display: flex; gap: var(--sp-2); overflow-x: auto; scrollbar-width: none;
  padding: 0 var(--edge); margin: 0 calc(var(--edge) * -1);
}
.chip-row::-webkit-scrollbar { display: none; }
.chip {
  flex: none; height: 32px; padding: 0 16px; border-radius: var(--radius-full);
  display: inline-flex; align-items: center; white-space: nowrap;
  font-size: var(--fs-caption);
  background: var(--color-bg-card);
  border: 1px solid var(--color-border);
  color: var(--color-text-secondary);
  transition: background 0.2s var(--ease-out), color 0.2s var(--ease-out),
              border-color 0.2s var(--ease-out);
}
.chip:hover { background: var(--color-bg-page); border-color: var(--color-text-tertiary); color: var(--color-text-primary); }
.chip:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; }
.chip[aria-selected="true"] {
  background: var(--color-primary); border-color: var(--color-primary);
  color: var(--color-text-inverse); font-weight: 500;
}
.chip[aria-selected="true"]:hover {
  background: var(--color-primary-hover); border-color: var(--color-primary-hover);
  color: var(--color-text-inverse);
}

/* ============================================================================
   C6 · SegmentedControl 分段控件
   ========================================================================== */
.segmented {
  position: relative; width: 200px; height: 32px; margin: 0 auto;
  padding: 2px; border-radius: 16px; background: var(--color-bg-page);
  display: flex;
}
.segmented__thumb {
  position: absolute; top: 2px; left: 2px; z-index: 0;
  width: calc(50% - 2px); height: 28px; border-radius: 14px;
  background: var(--color-bg-card); box-shadow: var(--shadow-card);
  transition: transform 0.25s var(--ease-std);
}
.segmented[data-active="1"] .segmented__thumb { transform: translateX(100%); }
.segmented__item {
  position: relative; z-index: 1; flex: 1; border-radius: 14px; text-align: center;
  font-size: var(--fs-caption); font-weight: 400; color: var(--color-text-secondary);
  transition: color 0.25s var(--ease-std);
}
.segmented__item[aria-selected="true"] { color: var(--color-primary); font-weight: 600; }
.segmented__item:hover { color: var(--color-text-primary); }
.segmented__item[aria-selected="true"]:hover { color: var(--color-primary); }
.segmented__item:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 1px; }

/* ============================================================================
   C7 · PrimaryButton / C8 · BottomActionBar
   ========================================================================== */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  height: 44px; padding: 0 20px; border-radius: 22px;
  font-size: var(--fs-h3); font-weight: 500;
  transition: background 0.15s var(--ease-out), border-color 0.15s var(--ease-out),
              transform 0.15s var(--ease-out);
}
.btn:active { transform: scale(0.98); }
.btn:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; }
.btn svg { width: 16px; height: 16px; }
.btn--block { display: flex; width: 100%; }

.btn--solid { background: var(--color-primary); color: var(--color-text-inverse); }
.btn--solid:hover  { background: var(--color-primary-hover);  color: var(--color-text-inverse); }
.btn--solid:active { background: var(--color-primary-active); color: var(--color-text-inverse); }

.btn--outline {
  background: var(--color-bg-card); color: var(--color-primary);
  border: 1px solid var(--color-primary);
}
.btn--outline:hover  { background: var(--color-primary-bg); color: var(--color-primary); }
.btn--outline:active { background: var(--color-primary-press); color: var(--color-primary); }

.btn--ghost { background: var(--color-bg-page); color: var(--color-text-primary); }
.btn--ghost:hover { background: var(--color-border); color: var(--color-text-primary); }

.btn--disabled { background: var(--color-disabled); color: var(--color-text-inverse); pointer-events: none; }

/* progress 变体：底为 border 灰，主色进度覆盖，文字两段色 */
.btn--progress {
  position: relative; overflow: hidden;
  background: var(--color-border); color: var(--color-primary);
}
.btn--progress .btn__fill {
  position: absolute; inset: 0 auto 0 0; z-index: 0;
  background: var(--color-primary); border-radius: 22px 0 0 22px;
  transition: width 0.25s linear;
}
.btn--progress .btn__label { position: relative; z-index: 2; }
.btn--progress .btn__label--over {
  position: absolute; inset: 0; z-index: 3;
  display: flex; align-items: center; justify-content: center;
  color: var(--color-text-inverse); overflow: hidden;
  transition: width 0.25s linear;
}
.btn--progress .btn__label--over span { position: absolute; width: 343px; text-align: center; left: 0; }

.action-bar {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 55;
  padding: 6px var(--edge) calc(var(--h-home) - 8px);
  background: var(--color-bg-card);
  box-shadow: var(--shadow-up);
}

/* ============================================================================
   通用卡片
   ========================================================================== */
.card {
  background: var(--color-bg-card);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-card);
}
.card--pad   { padding: var(--sp-4); }
.card--tight { padding: var(--sp-3); }
.card--flush { border-radius: 0; box-shadow: none; }
.card + .card { margin-top: var(--gap-card); }

/* 卡片按压反馈 150ms */
.pressable { transition: transform 0.15s var(--ease-out), opacity 0.15s var(--ease-out); }
.pressable:active { transform: scale(0.97); opacity: 0.9; }
.pressable:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; }

.divider { height: 1px; background: var(--color-border); border: 0; margin: 0; }

/* ============================================================================
   C14 · ImageCarousel + C11 · PageIndicator
   ========================================================================== */
.carousel { position: relative; overflow: hidden; }
.carousel__track { display: flex; transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1); }
.carousel__slide { flex: none; width: 100%; }
.carousel__scrim {
  position: absolute; left: 0; right: 0; bottom: 0; height: 80px;
  background: linear-gradient(180deg, transparent, rgba(0, 0, 0, 0.55));
  pointer-events: none;
}
/* 沉浸式头图顶部压暗 —— 保证白色状态栏文字在任意底图上仍可读 */
.carousel__scrim--top {
  top: 0; bottom: auto; height: 96px;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.42), transparent);
}
.indicator-line {
  position: absolute; left: 0; right: 0; bottom: 16px; z-index: 5;
  display: flex; justify-content: center; gap: var(--sp-1);
}
.indicator-line i {
  display: block; width: 16px; height: 2px; border-radius: 1px;
  background: rgba(255, 255, 255, 0.4);
  transition: width 0.3s var(--ease-std), background 0.3s var(--ease-std);
}
.indicator-line i[data-on="1"] { width: 24px; background: var(--color-text-inverse); }
/* 首页：Banner 为浅底内嵌卡，指示器落在卡内底部，改用深色墨线（见 P0 段） */
.indicator-line--home { bottom: 10px; }

/* 内嵌卡式轮播的左右翻页箭头：26px 视觉圆盘 + ::after 撑到 44px 触达区 */
.carousel__nav {
  position: absolute; top: 50%; z-index: 6;
  width: 26px; height: 26px; padding: 0; border-radius: 50%;
  transform: translateY(-50%);
  display: grid; place-items: center;
  transition: background 0.15s var(--ease-out), transform 0.15s var(--ease-out);
}
.carousel__nav::after { content: ''; position: absolute; inset: -9px; }
.carousel__nav svg { width: 15px; height: 15px; }
.carousel__nav--prev { left: 8px; }
.carousel__nav--next { right: 8px; }

.indicator-count {
  position: absolute; right: 12px; bottom: 12px; z-index: 5;
  height: 22px; padding: 0 10px; border-radius: var(--radius-full);
  display: inline-flex; align-items: center;
  background: rgba(0, 0, 0, 0.5); color: var(--color-text-inverse);
  font-size: var(--fs-note); font-variant-numeric: tabular-nums;
}

/* ============================================================================
   C1 · SectionCard 板块入口卡（首页 1 大 + 4 小非对称宫格）
   ========================================================================== */
.grid-sections { display: grid; grid-template-columns: 1fr 1fr; gap: var(--gap-card); }
.sec-card {
  position: relative; overflow: hidden;
  background: var(--color-bg-card); border-radius: var(--radius-md);
  box-shadow: var(--shadow-card); text-align: left;
}
.sec-card--lg {
  grid-column: 1 / -1; height: 120px;
  display: flex; align-items: center; gap: var(--sp-4); padding: var(--sp-4);
}
.sec-card--sm { height: 118px; padding: 14px 10px; display: flex; flex-direction: column; justify-content: flex-end; }
.sec-card__icon {
  flex: none; width: 36px; height: 36px; border-radius: 10px;
  background: var(--gradient-primary);
  display: grid; place-items: center; color: var(--color-text-inverse);
}
.sec-card__icon svg { width: 20px; height: 20px; }
.sec-card--sm .sec-card__title { margin-top: 0; font-size: var(--fs-h2); font-weight: 600; line-height: 1.25; }
.sec-card--sm .sec-card__sub   { margin-top: 3px; font-size: var(--fs-caption); color: var(--color-text-tertiary); line-height: 1.35; }
.sec-card--lg .sec-card__text  { flex: 1; min-width: 0; }
.sec-card--lg .sec-card__row   { display: flex; align-items: center; gap: 10px; }
.sec-card--lg .sec-card__title { font-size: var(--fs-h2); font-weight: 600; line-height: 1.3; }
.sec-card--lg .sec-card__sub   { margin-top: 6px; font-size: var(--fs-caption); color: var(--color-text-secondary); line-height: 1.45; }
/* 双行标题：两行分列上下，取代「主标题 + 副标题」的写法 */
.sec-card__title--stack { display: flex; flex-direction: column; gap: 2px; }
.sec-card--lg .sec-card__title--stack {
  font-size: var(--fs-h1); line-height: 1.3; letter-spacing: 0.02em;
}
.sec-card__mark {
  position: absolute; right: -12px; bottom: -14px; z-index: 0;
  width: 48px; height: 48px; color: var(--color-primary); opacity: 0.05;
  pointer-events: none;
}
.sec-card__mark svg { width: 100%; height: 100%; }
.sec-card__thumb {
  position: relative; flex: none; width: 140px; border-radius: var(--radius-img); overflow: hidden;
}
.sec-card__play {
  position: absolute; inset: 0; margin: auto;
  width: 28px; height: 28px; border-radius: 50%;
  background: rgba(255, 255, 255, 0.9);
  display: grid; place-items: center; color: var(--color-primary);
}
.sec-card__play svg { width: 12px; height: 12px; fill: currentColor; }

/* ============================================================================
   C2 · VideoCard
   ========================================================================== */
.video-card { overflow: hidden; background: var(--color-bg-card); border-radius: var(--radius-md); box-shadow: var(--shadow-card); display: block; width: 100%; text-align: left; }
.video-card__cover { position: relative; }
.video-card__play {
  position: absolute; inset: 0; margin: auto; width: 44px; height: 44px;
  border-radius: 50%; background: rgba(255, 255, 255, 0.9);
  display: grid; place-items: center; color: var(--color-primary);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}
.video-card__play svg { width: 16px; height: 16px; fill: currentColor; margin-left: 2px; }
.video-card__dur {
  position: absolute; right: 8px; bottom: 8px;
  height: 18px; padding: 0 6px; border-radius: 3px;
  display: inline-flex; align-items: center;
  background: rgba(0, 0, 0, 0.6); color: var(--color-text-inverse);
  font-size: var(--fs-note); font-variant-numeric: tabular-nums;
}
.video-card__body { padding: var(--sp-3); }

/* P1 · 参考图风格：沉浸式蓝绿背景 + 票根视频卡 */
.phone--video-spectrum {
  --video-sky: oklch(0.73 0.13 262);
  --video-aqua: oklch(0.84 0.09 175);
  --video-mist: oklch(0.97 0.018 255);
  --video-ink: oklch(0.25 0.025 255);
  --video-muted: oklch(0.48 0.03 255);
  --video-control: oklch(0.62 0.06 257);
  background: var(--video-mist);
  background-image:
    linear-gradient(180deg, transparent 34%, color-mix(in oklch, var(--video-mist) 88%, transparent) 64%, var(--video-mist) 100%),
    linear-gradient(110deg, var(--video-sky), var(--video-aqua));
}
.phone--video-spectrum .statusbar { color: var(--color-text-inverse); }
.navbar--video-spectrum {
  color: var(--color-text-inverse);
  background: transparent;
  box-shadow: none;
}
.navbar--video-spectrum .navbar__back { color: var(--color-text-inverse); }
.navbar--video-spectrum .navbar__back:hover,
.navbar--video-spectrum .navbar__back:active,
.navbar--video-spectrum .navbar__menu:hover,
.navbar--video-spectrum .navbar__menu:active { background: color-mix(in oklch, var(--color-text-inverse) 18%, transparent); }
.navbar--video-spectrum .navbar__back:focus-visible,
.navbar--video-spectrum .navbar__menu:focus-visible { outline-color: var(--color-text-inverse); }
.navbar__menu {
  position: absolute; right: 6px; bottom: 0;
  width: 44px; height: var(--h-nav); border-radius: var(--radius-full);
  display: grid; place-content: center; gap: 4px; color: currentColor;
  transition: background 0.15s var(--ease-out);
}
.navbar__menu span { display: block; width: 20px; height: 2px; border-radius: 2px; background: currentColor; }
.navbar__menu span:nth-child(2) { width: 14px; margin-left: 6px; }
.screen--video-spectrum { padding-top: 8px; background: transparent; }
.phone--video-spectrum .stack-list > * + * { margin-top: 18px; }
.phone--video-spectrum .video-card {
  position: relative;
  overflow: hidden;
  border-radius: 20px;
  background: color-mix(in oklch, var(--color-bg-card) 93%, var(--video-mist));
  box-shadow: 0 10px 24px color-mix(in oklch, var(--video-control) 20%, transparent);
  --notch-r: 10px;
  --notch-y: calc(100% - 76px);
  -webkit-mask-image:
    radial-gradient(circle var(--notch-r) at 0 var(--notch-y), transparent 99%, #000 100%),
    radial-gradient(circle var(--notch-r) at 100% var(--notch-y), transparent 99%, #000 100%);
  -webkit-mask-composite: destination-in;
  mask-image:
    radial-gradient(circle var(--notch-r) at 0 var(--notch-y), transparent 99%, #000 100%),
    radial-gradient(circle var(--notch-r) at 100% var(--notch-y), transparent 99%, #000 100%);
  mask-composite: intersect;
}
.phone--video-spectrum .video-card__cover {
  margin: 7px 7px 0; overflow: hidden;
  border: 5px solid color-mix(in oklch, var(--color-text-inverse) 92%, var(--video-mist));
  border-radius: 16px;
  box-shadow: 0 2px 8px color-mix(in oklch, var(--video-control) 16%, transparent);
}
.phone--video-spectrum .video-card__cover .ph {
  background: color-mix(in oklch, var(--video-control) 34%, var(--video-mist));
  color: var(--video-muted);
}
.phone--video-spectrum .video-card__play {
  color: var(--color-text-inverse);
  background: color-mix(in oklch, var(--color-text-inverse) 24%, transparent);
  border: 1px solid color-mix(in oklch, var(--color-text-inverse) 78%, transparent);
  box-shadow: 0 3px 12px color-mix(in oklch, var(--video-ink) 16%, transparent);
  backdrop-filter: blur(7px);
}
.phone--video-spectrum .video-card__dur { display: none; }
.phone--video-spectrum .video-card__body {
  position: relative; height: 76px; box-sizing: border-box; padding: 14px 16px 14px 18px;
  display: flex; align-items: center; gap: 12px;
  border-top: 1px dashed color-mix(in oklch, var(--video-control) 40%, transparent);
}
.phone--video-spectrum .video-card__body::before,
.phone--video-spectrum .video-card__body::after {
  display: none;
}
.video-card__copy { flex: 1; min-width: 0; }
.video-card__copy .t-caption { margin-top: 3px; color: var(--video-muted); }
.video-card__next {
  flex: none; width: 34px; height: 34px; border-radius: 50%;
  display: grid; place-items: center; color: var(--color-text-inverse);
  background: var(--video-control); box-shadow: 0 3px 8px color-mix(in oklch, var(--video-control) 28%, transparent);
}
.video-card__next svg { width: 13px; height: 13px; margin-left: 2px; }
.phone--video-spectrum .video-card:hover { transform: translateY(-2px); box-shadow: 0 14px 28px color-mix(in oklch, var(--video-control) 26%, transparent); }
.phone--video-spectrum .video-card:active { transform: scale(0.985); }
.phone--video-spectrum .video-card:focus-visible { outline: 3px solid var(--color-text-inverse); outline-offset: 4px; }
.phone--video-spectrum .home-indicator::after { background: var(--video-ink); }

/* ============================================================================
   C3 · HandbookCover
   ========================================================================== */
.grid-handbook { display: grid; grid-template-columns: 1fr 1fr; gap: var(--gap-card); }
.hb-item { display: block; text-align: left; width: 100%; }
.hb-item__cover { position: relative; border-radius: var(--radius-img); overflow: hidden; box-shadow: var(--shadow-card); }
.hb-item__badge { position: absolute; left: 8px; top: 8px; z-index: 2; }
.hb-item__name { margin-top: 8px; font-size: var(--fs-h3); font-weight: 500; line-height: 1.35; }
.hb-item__meta { margin-top: 4px; font-size: var(--fs-note); color: var(--color-text-tertiary); font-variant-numeric: tabular-nums; }

/* 手册封面版式稿（出版物自身设计，非照片占位） */
.hb-cover {
  aspect-ratio: 3 / 4; padding: 16px 14px;
  display: flex; flex-direction: column;
  background: var(--color-primary); color: var(--color-text-inverse);
}
.hb-cover__kicker { font-size: 8px; letter-spacing: 0.24em; opacity: 0.72; }
.hb-cover__title { margin-top: 12px; font-size: 18px; font-weight: 600; line-height: 1.3; }
.hb-cover__rule { width: 22px; height: 2px; margin-top: 12px; background: currentColor; opacity: 0.75; }
.hb-cover__foot { margin-top: auto; font-size: 8px; letter-spacing: 0.1em; opacity: 0.7; }
.hb-cover--paper { background: var(--cover-paper); color: var(--cover-ink); }
.hb-cover--paper .hb-cover__rule { background: var(--color-accent); opacity: 1; }
.hb-cover--ink   { background: var(--cover-ink); color: var(--color-text-inverse); }
.hb-cover--ink .hb-cover__rule { background: var(--color-accent); opacity: 1; }

/* ── 画册变体（竖版折页）：顶部留出版本标签位，标题下沉，英文与年份落底 ── */
.hb-cover--album { position: relative; overflow: hidden; padding-top: 34px; }
.hb-cover--album .hb-cover__title { margin-top: auto; }
.hb-cover--album .hb-cover__foot {
  margin-top: 12px; display: flex; align-items: baseline;
  justify-content: space-between; gap: 8px; letter-spacing: 0.16em;
}
.hb-cover--album .hb-cover__foot span:last-child { letter-spacing: 0.06em; font-variant-numeric: tabular-nums; }
/* 折缝：全站唯一的装帧记号，竖版为折页缝 */
.hb-cover__seam {
  position: absolute; top: 0; bottom: 0; right: 34%; width: 1px;
  background: currentColor; opacity: 0.18; pointer-events: none;
}
.hb-cover__seam::after {
  content: ''; position: absolute; top: 0; bottom: 0; left: 1px; width: 12px;
  background: linear-gradient(90deg, rgba(0, 0, 0, 0.12), transparent);
}
.hb-item__fmt { position: absolute; right: 8px; top: 8px; z-index: 2; }

/* ============================================================================
   横版 16:9 演示文稿卡（详情版 · 用于放映的 PPT）
   ========================================================================== */
.ppt-item { display: block; width: 100%; text-align: left; }
.ppt-item__cover {
  position: relative; border-radius: var(--radius-img); overflow: hidden;
  box-shadow: var(--shadow-card);
}
.ppt-item__badge { position: absolute; left: 10px; top: 10px; z-index: 2; }
.ppt-item__fmt   { position: absolute; right: 10px; top: 10px; z-index: 2; }
.ppt-item__row   { display: flex; align-items: baseline; gap: 10px; margin-top: 10px; }
.ppt-item__name  { flex: 1; min-width: 0; font-size: var(--fs-h3); font-weight: 500; line-height: 1.35; }
.ppt-item__meta  { flex: none; font-size: var(--fs-note); color: var(--color-text-tertiary); font-variant-numeric: tabular-nums; }

.ppt-cover {
  position: relative; aspect-ratio: 16 / 9; display: flex; overflow: hidden;
  background: var(--cover-ink); color: var(--color-text-inverse);
}
.ppt-cover__body {
  flex: 1; min-width: 0; padding: 34px 14px 14px;
  display: flex; flex-direction: column; justify-content: flex-end;
}
.ppt-cover__title { font-size: 19px; font-weight: 600; line-height: 1.3; }
.ppt-cover__rule  { width: 22px; height: 2px; margin-top: 10px; background: var(--color-accent); }
.ppt-cover__foot {
  margin-top: 10px; display: flex; align-items: baseline; justify-content: space-between; gap: 8px;
  font-size: 8px; letter-spacing: 0.16em; opacity: 0.72;
}
.ppt-cover__foot span:last-child { letter-spacing: 0.06em; font-variant-numeric: tabular-nums; }
/* 分栏缝：与竖版折缝同一套语言，右侧为幻灯片配图位 */
.ppt-cover__panel {
  flex: none; width: 36%;
  border-left: 1px solid rgba(255, 255, 255, 0.16);
  background: rgba(255, 255, 255, 0.06);
  display: grid; place-items: center; align-content: center; gap: 5px;
  color: rgba(255, 255, 255, 0.72);
}
.ppt-cover__panel svg { width: 20px; height: 20px; }
.ppt-cover__panel span { font-size: 8px; letter-spacing: 0.1em; }
.ppt-cover--paper { background: var(--cover-paper); color: var(--cover-ink); }
.ppt-cover--paper .ppt-cover__panel {
  border-left-color: rgba(35, 40, 47, 0.16);
  background: rgba(35, 40, 47, 0.05);
  color: rgba(35, 40, 47, 0.72);
}

/* 分组小标题（中性色，不占用主色预算） */
.group-head {
  display: flex; align-items: baseline; gap: 8px;
  padding-bottom: 8px; border-bottom: 1px solid var(--color-border);
}
.group-head h2 { font-size: var(--fs-h3); font-weight: 600; line-height: 1.4; }
.group-head span { font-size: var(--fs-note); color: var(--color-text-tertiary); letter-spacing: 0.06em; }
.group-head em {
  margin-left: auto; font-style: normal; font-size: var(--fs-note);
  color: var(--color-text-tertiary); font-variant-numeric: tabular-nums;
}

/* 说明条 */.notice {
  display: flex; align-items: center; gap: 6px;
  padding: 8px 12px; border-radius: var(--radius-img);
  background: var(--color-primary-bg); color: var(--color-primary);
  font-size: var(--fs-caption);
}
.notice svg { flex: none; width: 14px; height: 14px; }

/* ============================================================================
   C10 · CarrierListItem 载体横卡
   ========================================================================== */
.carrier-item {
  display: flex; gap: var(--sp-3); width: 100%; text-align: left;
  height: 100px; padding: 10px;
  background: var(--color-bg-card); border-radius: var(--radius-md); box-shadow: var(--shadow-card);
}
.carrier-item__img { flex: none; width: 106px; border-radius: var(--radius-img); overflow: hidden; }
.carrier-item__img .ph { height: 100%; }
.carrier-item__body { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.carrier-item__name { display: flex; align-items: center; gap: 5px; font-size: var(--fs-h3); font-weight: 500; }
.carrier-item__name span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.carrier-item__tags { display: flex; gap: 5px; margin-top: 8px; }
.carrier-item__area { margin-top: auto; font-size: var(--fs-note); color: var(--color-text-tertiary); font-variant-numeric: tabular-nums; }

/* ============================================================================
   P5 · OpportunityCard
   ========================================================================== */
.opp-card { display: block; width: 100%; text-align: left; padding: var(--sp-4); background: var(--color-bg-card); border-radius: var(--radius-md); box-shadow: var(--shadow-card); }
.opp-card__title { margin-top: 8px; font-size: var(--fs-h2); font-weight: 600; line-height: 1.4; }
.opp-card__desc  { margin-top: 6px; font-size: var(--fs-caption); line-height: 1.6; color: var(--color-text-secondary); }
.opp-card__attach { display: flex; align-items: center; gap: 5px; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--color-border); font-size: var(--fs-note); color: var(--color-text-tertiary); }
.opp-card__attach svg { width: 14px; height: 14px; }

/* 富文本正文 */
.richtext p { font-size: var(--fs-body); line-height: var(--lh-body); }
.richtext p + p { margin-top: 12px; }
.richtext ul { margin-top: 12px; display: flex; flex-direction: column; gap: 8px; }
.richtext li { position: relative; padding-left: 14px; font-size: var(--fs-body); line-height: var(--lh-body); }
.richtext li::before {
  content: ''; position: absolute; left: 0; top: 10px;
  width: 4px; height: 4px; border-radius: 50%; background: var(--color-primary);
}

/* ============================================================================
   C13 · AttachmentItem
   ========================================================================== */
.attach {
  display: flex; align-items: center; gap: var(--sp-3); width: 100%; text-align: left;
  height: 56px; padding: 12px; border-radius: var(--radius-img);
  background: var(--color-bg-page);
  transition: background 0.15s var(--ease-out);
}
.attach:hover  { background: var(--color-border); }
.attach:active { background: var(--color-border-press); }
.attach:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; }
.attach__type {
  flex: none; width: 32px; height: 32px; border-radius: var(--radius-sm);
  display: grid; place-items: center;
  font-size: 9px; font-weight: 700; letter-spacing: 0.04em;
  color: var(--color-text-inverse);
}
.attach__type--pdf { background: var(--color-file-pdf); }
.attach__type--doc { background: var(--color-file-doc); }
.attach__type--xls { background: var(--color-file-xls); }
.attach__body { flex: 1; min-width: 0; }
.attach__name { display: block; font-size: var(--fs-caption); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.attach__size { display: block; margin-top: 2px; font-size: var(--fs-note); color: var(--color-text-tertiary); font-variant-numeric: tabular-nums; }
.attach__dl { flex: none; width: 24px; height: 24px; color: var(--color-primary); }

/* ============================================================================
   P8 · 参数键值网格
   ========================================================================== */
.kv-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px var(--sp-3); }
.kv__k { font-size: var(--fs-caption); color: var(--color-text-tertiary); }
.kv__v { margin-top: 3px; font-size: var(--fs-h3); font-weight: 500; font-variant-numeric: tabular-nums; }

/* ============================================================================
   C9 · ContactItem
   ========================================================================== */
.contact-hero {
  position: relative; overflow: hidden;
  min-height: 80px; padding: var(--sp-4); border-radius: var(--radius-md);
  background: var(--gradient-primary); color: var(--color-text-inverse);
  display: flex; flex-direction: column; justify-content: center;
}
.contact-hero__mark { position: absolute; right: -8px; bottom: -12px; width: 60px; height: 60px; opacity: 0.1; color: var(--color-text-inverse); }
.dial {
  display: inline-flex; align-items: center; gap: 5px;
  height: 32px; padding: 0 14px; border-radius: var(--radius-full);
  background: var(--color-primary-bg); color: var(--color-primary);
  font-size: var(--fs-caption); font-weight: 500; font-variant-numeric: tabular-nums;
  transition: background 0.15s var(--ease-out);
}
.dial svg { width: 14px; height: 14px; }
.dial:hover  { background: var(--color-primary-press); color: var(--color-primary); }
.dial:active { background: var(--color-primary-press2); color: var(--color-primary); }
.dial:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; }

/* ============================================================================
   C12 · StateView 状态视图（3.4）
   ========================================================================== */
.state { display: flex; flex-direction: column; align-items: center; padding-top: 100px; text-align: center; }
.state__icon { width: 120px; height: 120px; color: var(--color-illus); }
.state__spinner {
  width: 24px; height: 24px; border-radius: 50%;
  border: 2px solid var(--color-border); border-top-color: var(--color-primary);
  animation: od-spin 0.8s linear infinite;
}
.state__spinner--light { border-color: rgba(255, 255, 255, 0.25); border-top-color: var(--color-text-inverse); }
@keyframes od-spin { to { transform: rotate(360deg); } }
.state__text { margin-top: 12px; font-size: var(--fs-caption); color: var(--color-text-tertiary); }
.state__btn { margin-top: 20px; height: 32px; padding: 0 24px; font-size: var(--fs-caption); }

/* ============================================================================
   P4 · 手册阅读器
   ========================================================================== */
.viewer { position: absolute; inset: 0; background: var(--color-black); overflow: hidden; }
.viewer__topbar {
  position: absolute; inset: 0 0 auto 0; z-index: 40;
  height: calc(var(--h-status) + var(--h-nav)); padding-top: var(--h-status);
  display: flex; align-items: center;
  background: rgba(0, 0, 0, 0.35); backdrop-filter: blur(6px);
  transition: opacity 0.25s ease, transform 0.25s ease;
}
.viewer__back {
  position: absolute; left: 6px; bottom: 0; width: 44px; height: var(--h-nav);
  display: grid; place-items: center; color: var(--color-text-inverse); border-radius: var(--radius-full);
}
.viewer__back:hover { background: rgba(255, 255, 255, 0.14); }
.viewer__title {
  flex: 1; text-align: center; padding: 0 52px; line-height: var(--h-nav);
  font-size: var(--fs-caption); color: var(--color-text-inverse);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.viewer__present {
  position: absolute; right: 6px; bottom: 0; width: 44px; height: var(--h-nav);
  display: grid; place-items: center; color: var(--color-text-inverse); border-radius: var(--radius-full);
}
.viewer__present:hover { background: rgba(255, 255, 255, 0.14); }
.viewer__present:focus-visible,
.viewer__back:focus-visible,
.viewer__dl:focus-visible { outline: 2px solid var(--color-text-inverse); outline-offset: -4px; }
.viewer__present svg { width: 20px; height: 20px; }
.viewer__stage { position: absolute; inset: 0; display: flex; align-items: center; }
.viewer__track { display: flex; width: 100%; transition: transform 0.25s var(--ease-out); }
.viewer__page { flex: none; width: 375px; }
.viewer__pager {
  position: absolute; left: 50%; bottom: 24px; z-index: 40; transform: translateX(-50%);
  height: 40px; padding: 0 16px; border-radius: var(--radius-full);
  display: inline-flex; align-items: center;
  background: rgba(0, 0, 0, 0.55); backdrop-filter: blur(6px);
  color: var(--color-text-inverse); font-size: var(--fs-caption); font-variant-numeric: tabular-nums;
  transition: opacity 0.25s ease;
}
.viewer__dl {
  position: absolute; right: 16px; bottom: 80px; z-index: 40;
  width: 32px; height: 32px; border-radius: 50%;
  background: rgba(255, 255, 255, 0.9); color: var(--color-primary);
  display: grid; place-items: center; box-shadow: var(--shadow-float);
  transition: opacity 0.25s ease, background 0.15s var(--ease-out);
}
.viewer__dl:hover  { background: var(--color-text-inverse); }
.viewer__dl:active { background: var(--color-primary-press); }
.viewer__dl svg { width: 16px; height: 16px; }
.viewer.is-clean .viewer__topbar,
.viewer.is-clean .viewer__pager,
.viewer.is-clean .viewer__dl { opacity: 0; pointer-events: none; }

/* 横版放映：整屏页槽负责翻页，16:9 页面在槽内居中，剩余区域自然留黑。 */
.phone:fullscreen,
.phone:-webkit-full-screen { width: 100vw; height: 100vh; max-height: none; border-radius: 0; box-shadow: none; }
.viewer.is-presenting .viewer__page {
  width: 100vw; height: 100vh;
  display: flex; align-items: center; justify-content: center;
  background: var(--color-black);
}
.viewer.is-presenting .hb-page {
  width: min(100vw, calc(100vh * 16 / 9));
  height: min(100vh, calc(100vw * 9 / 16));
  aspect-ratio: 16 / 9;
  padding: clamp(28px, 6vh, 64px) clamp(34px, 7vw, 96px);
}
.viewer.is-presenting .hb-page__kicker { font-size: clamp(10px, 1.5vw, 16px); }
.viewer.is-presenting .hb-page__h { max-width: 18ch; font-size: clamp(28px, 4vw, 48px); }
.viewer.is-presenting .hb-page__p { max-width: 68ch; font-size: clamp(12px, 1.55vw, 20px); line-height: 1.75; }
.viewer.is-presenting .hb-page__stats { max-width: 720px; gap: 24px; }
.viewer.is-presenting .hb-page__num { font-size: clamp(20px, 2.8vw, 34px); }
.viewer.is-presenting .hb-page__cap,
.viewer.is-presenting .hb-page__folio { font-size: clamp(10px, 1.3vw, 15px); }

/* 手册内页（版式化模拟页，非照片占位） */
.hb-page { background: var(--color-bg-card); aspect-ratio: 3 / 4; padding: 28px 24px; display: flex; flex-direction: column; }
.hb-page__kicker { font-size: 9px; letter-spacing: 0.24em; color: var(--color-primary); }
.hb-page__h { margin-top: 10px; font-size: 22px; font-weight: 600; line-height: 1.3; }
.hb-page__rule { width: 32px; height: 3px; background: var(--color-primary); margin: 14px 0; }
.hb-page__p { font-size: 10px; line-height: 1.9; color: var(--color-text-secondary); }
.hb-page__p + .hb-page__p { margin-top: 8px; }
.hb-page__stats { margin-top: auto; display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; padding-top: 16px; border-top: 1px solid var(--color-border); }
.hb-page__num { font-size: 17px; font-weight: 600; color: var(--color-primary); font-variant-numeric: tabular-nums; }
.hb-page__cap { margin-top: 2px; font-size: 9px; color: var(--color-text-tertiary); }
.hb-page__folio { margin-top: 12px; font-size: 9px; color: var(--color-text-tertiary); font-variant-numeric: tabular-nums; text-align: right; }

/* ============================================================================
   浮层：Toast / ActionSheet / Modal
   ========================================================================== */
.od-toast {
  position: absolute; top: 96px; left: 50%; z-index: 90;
  transform: translateX(-50%);
  display: inline-flex; align-items: center; gap: 6px;
  max-width: 260px; padding: 10px 16px; border-radius: var(--radius-md);
  background: rgba(0, 0, 0, 0.82); color: var(--color-text-inverse);
  font-size: var(--fs-caption); white-space: nowrap;
  opacity: 0; transition: opacity 0.2s ease;
  pointer-events: none;
}
.od-toast.is-on { opacity: 1; }
.od-toast svg { width: 16px; height: 16px; }

.od-mask {
  position: absolute; inset: 0; z-index: 80;
  background: var(--color-mask);
  opacity: 0; pointer-events: none; transition: opacity 0.25s ease;
}
.od-mask.is-on { opacity: 1; pointer-events: auto; }

.sheet {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 85;
  padding: var(--sp-5) var(--edge) calc(var(--h-home) + var(--sp-2));
  background: var(--color-bg-card);
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  transform: translateY(100%);
  transition: transform 0.3s var(--ease-sheet);
}
.sheet.is-on { transform: translateY(0); }
.sheet__title { font-size: var(--fs-h3); font-weight: 600; text-align: center; }
.sheet__sub { margin-top: 6px; font-size: var(--fs-caption); color: var(--color-text-tertiary); text-align: center; }
.sheet__bar { margin-top: 16px; height: 3px; border-radius: 2px; background: var(--color-border); overflow: hidden; }
.sheet__bar i { display: block; height: 100%; width: 0; background: var(--color-primary); transition: width 0.3s linear; }

.modal {
  position: absolute; left: 50%; top: 50%; z-index: 85;
  width: 280px; transform: translate(-50%, -50%) scale(0.94);
  background: var(--color-bg-card); border-radius: var(--radius-lg);
  padding: var(--sp-5) var(--sp-5) 0;
  opacity: 0; pointer-events: none;
  transition: opacity 0.2s ease, transform 0.2s var(--ease-sheet);
}
.modal.is-on { opacity: 1; transform: translate(-50%, -50%) scale(1); pointer-events: auto; }
.modal__title { font-size: var(--fs-h3); font-weight: 600; text-align: center; }
.modal__text { margin-top: 10px; font-size: var(--fs-caption); line-height: 1.6; color: var(--color-text-secondary); text-align: center; }
.modal__acts { display: flex; margin: 20px -20px 0; border-top: 1px solid var(--color-border); }
.modal__acts button { flex: 1; height: 48px; font-size: var(--fs-h3); }
.modal__acts button:first-child { color: var(--color-text-secondary); border-right: 1px solid var(--color-border); }
.modal__acts button:last-child  { color: var(--color-primary); font-weight: 500; }
.modal__acts button:hover { background: var(--color-bg-page); }
.modal__acts button:focus-visible { outline: 2px solid var(--color-primary); outline-offset: -2px; }

/* ============================================================================
   原型台面标注 —— 位于设备外壳之外，仅宽屏显示，不属于小程序界面
   ========================================================================== */
.stage__wrap { display: grid; justify-items: center; gap: 12px; }
.stage__meta { display: none; }
@media (min-width: 700px) {
  .stage__meta {
    display: flex; align-items: baseline; gap: 8px;
    width: 375px; padding: 0 2px;
    color: var(--stage-ink); font-size: 12px; line-height: 1.4;
  }
  .stage__meta b { font-weight: 600; letter-spacing: 0.01em; }
  .stage__meta i { font-style: normal; color: var(--stage-ink-2); font-variant-numeric: tabular-nums; }
  .stage__meta a {
    margin-left: auto; color: var(--stage-ink-2);
    border-bottom: 1px solid var(--stage-line); transition: color 0.15s var(--ease-out);
  }
  .stage__meta a:hover { color: var(--stage-ink); border-bottom-color: var(--stage-ink); }
  .stage__meta a:focus-visible { outline: 2px solid var(--stage-ink); outline-offset: 3px; }
}

/* ============================================================================
   P0 · 首页
   ========================================================================== */
.phone--home-spectrum {
  --home-sky:   oklch(0.692 0.142 267.5);
  --home-azure: oklch(0.749 0.089 248.1);
  --home-aqua:  oklch(0.832 0.083 178.3);
  --home-mist:  oklch(0.966 0.013 262.4);
  --home-paper: oklch(0.985 0.01 250);
  --home-ink: oklch(0.28 0.035 255);
  --home-muted: oklch(0.40 0.035 250);
  --home-red: oklch(0.64 0.16 25);
  --home-green: oklch(0.80 0.07 150);
  --home-yellow: oklch(0.88 0.07 100);
  --home-blue: oklch(0.80 0.07 240);
  --home-coral: oklch(0.76 0.10 45);
  --home-shade: oklch(0.52 0.09 252);
  --home-shadow: 0 8px 24px color-mix(in oklch, var(--home-shade) 18%, transparent);
  background-color: var(--home-mist);
  background-image: url('../resources/images/p0_bg.jpg');
  background-size: cover;
  background-position: center top;
  background-repeat: no-repeat;
}
.screen--home-spectrum {
  color: var(--home-ink);
  background: transparent;
}
.phone--home-spectrum .statusbar { color: var(--home-ink); }
/* Banner 为内嵌圆角卡：左右各留 16px 安全边，卡顶避让绝对定位的状态栏 */
.home-hero {
  position: relative; flex: none;
  padding: calc(var(--h-status) + 8px) var(--edge) 0;
}
.home-hero .carousel {
  border-radius: var(--radius-lg);
  background: var(--home-paper);
  box-shadow: var(--home-shadow);
}
/* 调整轮播比例（由原 2.08:1 加大到 16:9 / 1.78:1），视觉更饱满大气 */
.home-hero .carousel__slide .carousel__img {
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  display: block;
}
.home-hero .carousel__slide .ph { height: auto; aspect-ratio: 16 / 9; }
.phone--home-spectrum .home-hero .ph {
  background:
    linear-gradient(150deg, color-mix(in oklch, var(--home-paper) 88%, var(--home-yellow)), color-mix(in oklch, var(--home-paper) 82%, var(--home-green)));
  color: var(--home-muted);
}
.phone--home-spectrum .home-hero .ph svg { color: var(--home-muted); }
/* 浅底卡：指示器与箭头一律改深色墨调，白色在此对比不足 */
.home-hero .indicator-line i { background: color-mix(in oklch, var(--home-ink) 30%, transparent); }
.home-hero .indicator-line i[data-on="1"] { width: 22px; background: var(--home-ink); }
.home-hero .carousel__nav {
  background: color-mix(in oklch, var(--home-paper) 66%, transparent);
  backdrop-filter: blur(6px);
  color: var(--home-ink);
  box-shadow: 0 2px 8px color-mix(in oklch, var(--home-shade) 20%, transparent);
}
.home-hero .carousel__nav:hover { background: color-mix(in oklch, var(--home-paper) 92%, transparent); }
.home-hero .carousel__nav:active { transform: translateY(-50%) scale(0.92); }
.home-hero .carousel__nav:focus-visible { outline: 2px solid var(--home-ink); outline-offset: 3px; }
/* 轮播与首个入口卡之间的呼吸带：露出底图上的英文主视觉字 */
.home-wordmark { padding: 13px var(--edge) 3px; text-align: center; }
.home-wordmark span {
  display: inline-block;
  /* 抵消末字后多出的一个字距，保证光学居中 */
  margin-right: -0.16em;
  font-family: 'Iowan Old Style', 'Palatino Linotype', Palatino, 'Times New Roman', serif;
  font-size: 19px; line-height: 1.2; font-weight: 700;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: #ffffff;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.25);
  white-space: nowrap;
}
.home-title {
  position: relative; z-index: 6; margin-top: -16px;
  padding: 20px var(--edge) 16px;
  background: var(--color-bg-card);
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
}
.phone--home-spectrum .home-title {
  background: color-mix(in oklch, var(--home-paper) 92%, transparent);
  backdrop-filter: blur(14px);
}
.phone--home-spectrum .home-title__bar { background: var(--home-red); }
.phone--home-spectrum .home-title__sub { color: var(--home-muted); }
.home-title__row { display: flex; align-items: center; gap: 10px; }
.home-title__bar { flex: none; width: 4px; height: 24px; border-radius: 2px; background: var(--color-primary); }
.home-title__sub { margin-top: 8px; font-size: var(--fs-caption); color: var(--color-text-secondary); }
.home-body { padding: 16px var(--edge) 0; background: var(--color-bg-page); }
.phone--home-spectrum .home-body { background: transparent; }
.phone--home-spectrum .sec-card {
  color: var(--home-ink);
  background-color: transparent;
  border: none;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}
.phone--home-spectrum [data-od-id="entry-video"] {
  background: color-mix(in oklch, var(--home-paper) 92%, transparent);
  backdrop-filter: blur(12px);
  border: 1px solid color-mix(in oklch, var(--home-paper) 58%, transparent);
}
.phone--home-spectrum [data-od-id="entry-handbook"] {
  background-color: transparent;
  background-image: url('../resources/images/read_manual.png');
  background-size: 100% 100%;
  background-position: center;
  background-repeat: no-repeat;
}
.phone--home-spectrum [data-od-id="entry-opportunity"] {
  background-color: transparent;
  background-image: url('../resources/images/opportunity.png');
  background-size: 100% 100%;
  background-position: center;
  background-repeat: no-repeat;
}
.phone--home-spectrum [data-od-id="entry-carrier"] {
  background-color: transparent;
  background-image: url('../resources/images/carrier.png');
  background-size: 100% 100%;
  background-position: center;
  background-repeat: no-repeat;
}
.phone--home-spectrum [data-od-id="entry-contact"] {
  background-color: transparent;
  background-image: url('../resources/images/cooperation.png');
  background-size: 100% 100%;
  background-position: center;
  background-repeat: no-repeat;
}
.phone--home-spectrum .sec-card__icon {
  background: color-mix(in oklch, var(--home-paper) 90%, transparent);
  color: var(--home-red);
  box-shadow: 0 4px 12px color-mix(in oklch, var(--home-ink) 10%, transparent);
}
.phone--home-spectrum [data-od-id="entry-video"] .sec-card__icon,
.phone--home-spectrum [data-od-id="entry-video"] .sec-card__play { color: oklch(0.48 0.10 245); }
.phone--home-spectrum [data-od-id="entry-handbook"] .sec-card__icon { color: oklch(0.46 0.09 150); }
.phone--home-spectrum [data-od-id="entry-opportunity"] .sec-card__icon { color: oklch(0.55 0.10 88); }
.phone--home-spectrum [data-od-id="entry-carrier"] .sec-card__icon { color: oklch(0.48 0.10 245); }
.phone--home-spectrum [data-od-id="entry-contact"] .sec-card__icon { color: oklch(0.52 0.14 32); }
.phone--home-spectrum .sec-card--sm .sec-card__title {
  color: #ffffff;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.35);
}
.phone--home-spectrum .sec-card--sm .sec-card__sub {
  color: rgba(255, 255, 255, 0.85);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}
.phone--home-spectrum .sec-card__sub,
.phone--home-spectrum .sec-card--lg .sec-card__sub { color: var(--home-muted); }
.phone--home-spectrum .sec-card__mark { color: var(--home-ink); opacity: 0.06; }
.phone--home-spectrum .sec-card__thumb .ph {
  background: color-mix(in oklch, var(--home-blue) 60%, var(--home-paper));
  color: var(--home-muted);
}
.phone--home-spectrum .sec-card__play {
  background: color-mix(in oklch, var(--home-paper) 90%, transparent);
  color: oklch(0.48 0.10 245);
}
.phone--home-spectrum .sec-card:focus-visible {
  outline: 3px solid var(--home-ink);
  outline-offset: 3px;
}
.phone--home-spectrum .home-foot { color: var(--home-muted); }
.phone--home-spectrum .home-indicator::after { background: var(--home-ink); }
.home-foot {
  padding: 28px 0 20px; text-align: center;
  font-size: var(--fs-note); color: var(--color-text-tertiary);
}

/* ============================================================================
   P2 · 视频播放
   ========================================================================== */
.player { position: relative; flex: none; background: var(--color-black); aspect-ratio: 16 / 9; }
.player__btn {
  position: absolute; inset: 0; margin: auto; width: 52px; height: 52px;
  border-radius: 50%; background: rgba(255, 255, 255, 0.92); color: var(--color-primary);
  display: grid; place-items: center; box-shadow: 0 2px 12px rgba(0, 0, 0, 0.3);
  transition: background 0.15s var(--ease-out), transform 0.15s var(--ease-out);
}
.player__btn svg { width: 20px; height: 20px; fill: currentColor; margin-left: 3px; }
.player__btn:hover  { background: var(--color-text-inverse); transform: scale(1.04); }
.player__btn:active { background: var(--color-primary-press2); transform: scale(0.96); }
.player__btn:focus-visible { outline: 2px solid var(--color-text-inverse); outline-offset: 3px; }
.player__bar {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 3;
  display: flex; align-items: center; gap: 10px;
  padding: 0 12px 10px; color: var(--color-text-inverse);
  font-size: var(--fs-note); font-variant-numeric: tabular-nums;
  background: linear-gradient(180deg, transparent, rgba(0, 0, 0, 0.55));
  padding-top: 24px;
}
.player__track { flex: 1; height: 3px; border-radius: 2px; background: rgba(255, 255, 255, 0.3); overflow: hidden; }
.player__track i { display: block; height: 100%; width: 22%; background: var(--color-primary); }

.meta-row { margin-top: 8px; font-size: var(--fs-caption); color: var(--color-text-tertiary); font-variant-numeric: tabular-nums; }
.expandable { position: relative; margin-top: 10px; }
.expandable__body { font-size: var(--fs-body); line-height: var(--lh-body); color: var(--color-text-primary); }
.expandable__body p + p { margin-top: 12px; }
.expandable:not(.is-open) .expandable__body {
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 4; overflow: hidden;
}
.expand-toggle {
  margin-top: 6px; font-size: var(--fs-caption); color: var(--color-primary);
  display: inline-flex; align-items: center; gap: 3px;
  border-radius: var(--radius-sm); padding: 2px 2px;
}
.expand-toggle:hover { background: var(--color-primary-bg); color: var(--color-primary); }
.expand-toggle:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; }
.expand-toggle svg { width: 12px; height: 12px; transition: transform 0.2s var(--ease-out); }
.expandable.is-open .expand-toggle svg { transform: rotate(180deg); }

/* 沉浸式页面的悬浮返回键（无 NavBar 时使用） */
.float-back {
  position: absolute; left: 10px; top: 50px; z-index: 58;
  width: 32px; height: 32px; border-radius: 50%;
  background: rgba(0, 0, 0, 0.38); backdrop-filter: blur(6px);
  color: var(--color-text-inverse); display: grid; place-items: center;
  transition: background 0.15s var(--ease-out);
}
.float-back:hover  { background: rgba(0, 0, 0, 0.56); color: var(--color-text-inverse); }
.float-back:active { background: rgba(0, 0, 0, 0.7);  color: var(--color-text-inverse); }
.float-back:focus-visible { outline: 2px solid var(--color-text-inverse); outline-offset: 2px; }

/* ============================================================================
   P8 · 载体详情
   ========================================================================== */
.float-card {
  position: relative; z-index: 6; margin-top: -16px;
  padding: var(--sp-4) var(--edge);
  background: var(--color-bg-card);
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
}
.addr { display: flex; align-items: flex-start; gap: 6px; margin-top: 12px; }
.addr svg { flex: none; width: 14px; height: 14px; margin-top: 2px; color: var(--color-text-tertiary); }
.addr__text { flex: 1; min-width: 0; font-size: var(--fs-caption); line-height: 1.5; color: var(--color-text-secondary); }
.link-btn {
  flex: none; height: 22px; padding: 0 8px; border-radius: var(--radius-sm);
  font-size: var(--fs-caption); color: var(--color-primary);
  transition: background 0.15s var(--ease-out);
}
.link-btn:hover  { background: var(--color-primary-bg); color: var(--color-primary); }
.link-btn:active { background: var(--color-primary-press); color: var(--color-primary); }
.link-btn:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; }

/* ============================================================================
   P4 · 阅读器补充：未加载页占位 + 弱网提示
   ========================================================================== */
.pg-hold {
  aspect-ratio: 3 / 4; background: var(--color-viewer-page);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px;
}
.pg-hold__hint {
  font-size: var(--fs-note); color: rgba(255, 255, 255, 0.6);
  opacity: 0; transition: opacity 0.25s ease;
}
.pg-hold.is-slow .pg-hold__hint { opacity: 1; }

/* 列表纵向节奏 */
.stack-list > * + * { margin-top: var(--gap-card); }