/* ================================================================
   白泽设计系统 · 语法层 tokens.css（必用 · 共享词汇表）
   ----------------------------------------------------------------
   这里只放「全 App 必须一致的基础约定」：
     · 设计 token（色/间距/字号/圆角/图标档位/动效）
     · 设备帧 + 安全区（statusbar / home-indicator / tabbar 安全壳）
     · 几个高频固定件（返回键 .nav-back / 顶栏骨架 .topbar）
   定位：这不是枷锁，是让多页面看起来像「同一个 App」的语法。
   表达层（hero / 功能区 / 识别度）请放开手设计，不必受此约束。
   组件工具箱（按钮/卡片/列表行/输入框…）见 components.css（可选）。
   ================================================================ */


/* ================================================================
   0 · Token 变量
   ================================================================ */

:root {
  /* ── 品牌色（活力翠绿 · 黑绿撞色） ── */
  --brand-primary: #7AE040;
  --brand-gradient-from: #AAFF72;
  --brand-gradient-to: #58C42B;
  --brand-text: #0F2E04;
  --brand-accent: #CAFFB0;

  /* ── 深色背景层级（base → primary → card → elevated，禁跨层） ── */
  --bg-base: #0A0A0A;
  --bg-primary: #121214;
  --bg-card: #1C1C1E;
  --bg-card-elevated: #2C2C2E;
  --bg-hairline: rgba(255,255,255,0.06);

  /* ── 文字色层级 ── */
  --text-primary: #FFFFFF;
  --text-secondary: #EBEBF5;
  --text-tertiary: #8E8E93;

  /* ── 语义色（状态反馈） ── */
  --state-success: #31B693;
  --state-warning: #FBBF24;
  --state-error: #FF453A;
  --state-info: #8E8E93;

  /* ── 功能专用色（跨页面高频复用） ── */
  --color-hot: rgba(255,107,53,1);          /* 热度/爆款/热榜 */
  --color-ranking: rgba(255,159,10,1);      /* 排行/奖杯金色 */
  --color-teleprompter: rgba(183,168,255,1);/* 提词器/跟拍 */
  --color-ai-purple: rgba(168,85,247,1);    /* AI 生成/霓虹 */
  --color-wechat: rgba(7,193,96,1);         /* 微信登录 */

  /* ── 品类色（内容分组 dot/chip/徽章，不作 CTA） ── */
  --cat-beauty: #FF6AA8;       /* 美业 */
  --cat-health: #5EC2FF;       /* 大健康 */
  --cat-works:  #5EA7FF;       /* 作品/蓝辅助 */
  --cat-ip:     #FFB648;       /* IP/琥珀辅助 */

  /* ── 圆角（5 级） ── */
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-pill: 24px;
  --radius-full: 999px;

  /* ── 间距（4px 基础栅格） ── */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-7: 32px;
  --space-8: 48px;

  /* ── 字号（5 级） ── */
  --text-display: 28px;
  --text-h1: 20px;
  --text-h2: 16px;
  --text-body: 14px;
  --text-caption: 12px;

  /* ── 图标档位（5 级，对齐 native @3x dp） ── */
  --icon-xs: 12px;
  --icon-sm: 15px;
  --icon-md: 20px;
  --icon-lg: 24px;
  --icon-xl: 30px;

  /* ── 阴影 / 光晕 ── */
  --elevation-sm: 0 2px 8px rgba(0,0,0,0.30);
  --elevation-md: 0 4px 16px rgba(0,0,0,0.40);
  --elevation-lg: 0 8px 24px rgba(0,0,0,0.50);
  --glow-brand: 0 0 32px rgba(122,224,64,0.28), 0 0 64px rgba(122,224,64,0.12);

  /* ── 动效时长（5 档） ── */
  --dur-instant: 100ms;   /* 状态切换、chip 高亮 */
  --dur-fast: 150ms;      /* 按钮 press、hover */
  --dur-base: 200ms;      /* 默认：tab 切换、淡入淡出 */
  --dur-slow: 300ms;      /* sheet 弹出、页面转场 */
  --dur-slower: 450ms;    /* 大幅位移、复杂编排 */
  /* ── 缓动曲线（对齐 iOS） ── */
  --ease-standard: cubic-bezier(0.4, 0.0, 0.2, 1);    /* 通用 */
  --ease-out: cubic-bezier(0.0, 0.0, 0.2, 1);         /* 进场（元素入屏）*/
  --ease-in: cubic-bezier(0.4, 0.0, 1, 1);            /* 退场（元素离屏）*/
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);   /* 弹性强调（仅 CTA/成功态点缀）*/

  /* ── 字体 ── */
  --ff: "Noto Sans SC", -apple-system, BlinkMacSystemFont, sans-serif;
  --ff-en: "Inter", -apple-system, sans-serif;

  /* ── 设备帧 ── */
  --device-width: 430px;
  --device-height: 932px;
  --safe-area-x: 20px;
  --content-width: 390px;
  --statusbar-height: 59px;
  --navbar-height: 48px;
  --control-height: 52px;   /* 表单输入框 / 块级控件标准高度（与主 CTA 同高）*/
  --row-min-height: 56px;   /* 列表行标准最小高度（iOS cell）*/
  --tabbar-height: 98px;
  --tabbar-stretch-x: 36px;

  /* ── 引导系统（GuideMascot / Bubble / Mask / Spotlight） ── */
  --guide-mask-bg: rgba(0, 0, 0, 0.62);
  --guide-spotlight-radius: 64px;
  --guide-spotlight-pill-w: 88px;
  --guide-spotlight-pill-h: 36px;
  --guide-spotlight-pad: 8px;
  --guide-bubble-bg: rgba(20, 22, 24, 0.96);
  --guide-bubble-border: rgba(122, 224, 64, 0.22);
  --guide-bubble-radius: 16px;
  --guide-bubble-shadow: 0 20px 40px rgba(0, 0, 0, 0.5);
  --guide-bubble-blur: 12px;
  --mascot-bg: rgba(122, 224, 64, 0.18);
  --mascot-border: rgba(122, 224, 64, 0.4);
  --mascot-glyph-fill: rgba(255, 255, 255, 0.92);
  --mascot-size-sm: 16px;
  --mascot-size-md: 32px;
  --mascot-size-lg: 96px;
  --guide-dot-size: 14px;
  --guide-dot-bg: rgba(122, 224, 64, 1);
  --guide-dot-glow: 0 0 0 6px rgba(122, 224, 64, 0.25), 0 0 0 12px rgba(122, 224, 64, 0.10);
  --help-btn-size: 28px;
  --help-btn-bg: rgba(255, 255, 255, 0.08);
  --help-btn-fg: rgba(255, 255, 255, 0.75);
  --help-btn-badge-bg: rgba(255, 59, 48, 1);
  --help-btn-badge-size: 9px;
  --help-btn-badge-border: 1.5px solid rgba(10, 10, 10, 1);
  --guide-anim-in: 280ms ease-out;
  --guide-anim-out: 200ms ease-in;
  --guide-anim-mask: 200ms ease;
  --guide-anim-step: 200ms ease-in-out;
  --guide-anim-pulse: 1600ms ease-in-out infinite;
}


/* ================================================================
   1 · Reset + Base
   ================================================================ */

* { box-sizing: border-box; margin: 0; padding: 0; -webkit-font-smoothing: antialiased; }

html, body {
  font-family: var(--ff);
  background: #F0F1F3;
  color: #1D1D1F;
  min-height: 100vh;
  display: flex; flex-direction: column; align-items: center;
  padding: var(--space-8) var(--space-6) 96px;
}

img { display: block; max-width: 100%; }
button { font-family: inherit; border: none; cursor: pointer; background: none; padding: 0; color: inherit; }
iconify-icon { display: inline-block; vertical-align: middle; flex-shrink: 0; }


/* ================================================================
   2 · 设备帧 · Device Frame
   ────────────────────────────────────────────────────────────────
   【安全区铁律 — 所有引入本文件的页面必须遵守】
   ▸ 顶部：必须用 .statusbar（59px），禁止自己手写状态栏容器
   ▸ 底部：必须用 .app-tabbar（98px 含 home-indicator 安全区）
          或在无 tabbar 页面用 .home-indicator，禁止手写缩小高度
   ▸ 左右：内容区 padding 统一用 var(--safe-area-x)，禁止写死其他值
   ▸ 沉浸 hero：用 margin-top:calc(-1*var(--statusbar-height)) 延伸
   ▸ 内容底部让位：有 tabbar 用 calc(var(--tabbar-height)+var(--space-2))，
                  无 tabbar 用 var(--space-8)
   ================================================================ */

.device {
  width: var(--device-width); height: var(--device-height);
  background: linear-gradient(180deg, #0F0F15 0%, #0A0A0B 40%, #07070A 100%);
  color: var(--text-primary);
  border-radius: 52px; position: relative; overflow: hidden;
  box-shadow: 0 50px 100px rgba(0,0,0,0.20), 0 25px 50px rgba(0,0,0,0.14), inset 0 0 0 1px rgba(255,255,255,0.04);
  font-family: var(--ff);
}

.screen {
  position: absolute; inset: 0; border-radius: 52px; overflow: hidden;
  display: flex; flex-direction: column;
}


/* ================================================================
   3 · 状态栏 · Status Bar（固定件 · 安全区）
   ================================================================ */

.statusbar {
  height: var(--statusbar-height); flex-shrink: 0;
  display: flex; align-items: center; justify-content: space-between;
  padding: var(--space-4) 34px 0; position: relative;
  font-family: var(--ff-en); font-size: 17px; font-weight: 600;
  color: var(--text-primary); z-index: 20;
}
.statusbar .dynamic-island {
  width: 126px; height: 37px; background: #000; border-radius: 22px;
  position: absolute; top: 11px; left: 50%; transform: translateX(-50%);
}
.statusbar .right { display: flex; align-items: center; gap: 6px; }


/* ================================================================
   4 · 内容区 + Home Indicator（固定件 · 安全区）
   ================================================================ */

.content {
  flex: 1; overflow-y: auto; position: relative;
  scrollbar-width: none;
}
.content::-webkit-scrollbar { display: none; }
.content-pad { padding-bottom: 120px; }

.home-indicator {
  position: absolute; bottom: 13px; left: 50%; transform: translateX(-50%);
  width: 144px; height: 5px; background: var(--text-primary);
  border-radius: 3px; pointer-events: none; z-index: 60;
}


/* ================================================================
   5 · 顶栏骨架 · Topbar（固定件 · 返回键位置统一）
   ────────────────────────────────────────────────────────────────
   返回键 .nav-back 的位置/尺寸/光学对齐属于「全 App 必须一致」的约定，
   放在语法层。标题/右操作按需填槽位即可。
   维度（正交可叠加）：
   ① 标题对齐  默认左对齐 | .topbar--center 居中（带返回的二级页）
   ② 标题字号  默认 17    | .topbar--lg 大标题（信息型主页）
   ③ 背景      默认 solid | .topbar--immersive 透明（叠 hero/视频上）
   ================================================================ */

.topbar {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-2);
  padding: var(--space-1) var(--safe-area-x) var(--space-2);
  min-height: var(--navbar-height); flex-shrink: 0;
}

/* 槽位按钮：返回 + 通用右操作，统一 36×36 icon-only */
.nav-back,
.topbar__action {
  display: flex; align-items: center; justify-content: center;
  width: 36px; height: 36px; flex-shrink: 0;
  background: none; border: none; color: var(--text-primary);
}
.nav-back:active,
.topbar__action:active { opacity: 0.6; }
.nav-back iconify-icon,
.topbar__action iconify-icon { font-size: var(--icon-lg); }

/* 右侧无按钮时占位，保证 --center 标题真正居中 */
.topbar__spacer { width: 36px; flex-shrink: 0; }

/* 光学对齐：图标 24 居中在 36 按钮里会比内容缩进 6px，
   给首/尾图标按钮负外边距把图标视觉边缘拉回 --safe-area-x。*/
.topbar > .nav-back:first-child,
.topbar > .topbar__action:first-child { margin-left: calc((36px - var(--icon-lg)) / -2); }
.topbar > .nav-back:last-child,
.topbar > .topbar__action:last-child { margin-right: calc((36px - var(--icon-lg)) / -2); }

.topbar__title {
  min-width: 0;
  font-size: 17px; font-weight: 600; color: var(--text-primary);
  letter-spacing: -0.2px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.topbar--center .topbar__title { flex: 1; text-align: center; }
.topbar--lg .topbar__title {
  flex: 1; text-align: left;
  font-size: var(--text-h1); font-weight: 700; letter-spacing: -0.3px;
}
.topbar--immersive { background: transparent; }


/* ================================================================
   6 · Tabbar 安全壳 · App Tabbar（固定件 · 安全区）
   ────────────────────────────────────────────────────────────────
   底部安全区 + 三种标准变体（胶囊 / 扁平 / 拉伸胶囊）。
   home-indicator 内建，禁止手写 tabbar 高度或裸放 home-indicator。
   ================================================================ */

.app-tabbar {
  position: absolute; bottom: 0; left: 0; right: 0;
  height: var(--tabbar-height); z-index: 50;
  display: flex; align-items: flex-start; justify-content: center;
  padding-top: var(--space-2);
  background: linear-gradient(180deg, transparent, rgba(10,10,10,0.55) 40%, rgba(10,10,10,0.92) 100%);
}
.app-tabbar.hidden { transform: translateY(100%); opacity: 0; transition: transform 0.3s, opacity 0.2s; }

.tab-capsule {
  display: flex; gap: var(--space-1);
  background: rgba(28,28,30,0.88);
  backdrop-filter: blur(24px) saturate(140%); -webkit-backdrop-filter: blur(24px) saturate(140%);
  border-radius: var(--radius-full); padding: var(--space-1) var(--space-2);
  border: 0.5px solid rgba(255,255,255,0.08);
  box-shadow: var(--elevation-lg), inset 0 1px 0 rgba(255,255,255,0.06);
}
.tab-item {
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  padding: 6px var(--space-4); border-radius: var(--radius-full);
  font-size: 10px; font-weight: 500; color: var(--text-tertiary);
  transition: background 0.2s, color 0.2s;
}
.tab-item iconify-icon { font-size: var(--icon-md); }
.tab-item.active { background: rgba(255,255,255,0.12); color: var(--text-primary); }

.tab-ai {
  width: 60px; height: 60px; border-radius: var(--radius-full);
  background: linear-gradient(135deg, var(--brand-gradient-from), var(--brand-gradient-to));
  border: 3px solid var(--bg-base);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  margin-top: -8px;
  box-shadow: 0 10px 24px rgba(122,224,64,0.55), 0 4px 12px rgba(0,0,0,0.45);
}
.tab-ai iconify-icon { font-size: 22px; color: var(--brand-text); }
.tab-ai span { font-size: 9px; font-weight: 800; letter-spacing: 0.6px; color: var(--brand-text); }

/* ── 扁平 Tabbar 变体（非胶囊）：复用 .app-tabbar 安全区容器 ── */
.app-tabbar--flat {
  flex-direction: column; align-items: stretch; justify-content: flex-start;
  padding: var(--space-2) 24px 0;
}
.tab-flat-group { display: flex; justify-content: space-around; }
.tab-flat {
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  padding: 6px 0 4px; font-size: 10px; font-weight: 500; color: var(--text-tertiary);
}
.tab-flat iconify-icon { font-size: var(--icon-lg); }
.tab-flat.active { color: var(--brand-primary); }
.tab-flat.active iconify-icon { color: var(--brand-primary); }

/* ── 拉伸胶囊 Tabbar 变体（App Store 风）：胶囊横向铺满 ── */
.app-tabbar--stretch {
  flex-direction: column; align-items: stretch; justify-content: flex-start;
  padding: var(--space-2) var(--tabbar-stretch-x) 0;
}
.tab-stretch-group {
  flex: 1; height: 56px; display: flex; gap: 2px;
  background: rgba(28,28,30,0.88);
  backdrop-filter: blur(24px) saturate(140%); -webkit-backdrop-filter: blur(24px) saturate(140%);
  border: 0.5px solid rgba(255,255,255,0.08);
  border-radius: var(--radius-full); padding: var(--space-1);
  box-shadow: var(--elevation-lg), inset 0 1px 0 rgba(255,255,255,0.06);
}
.tab-stretch {
  flex: 1; height: 48px; border-radius: var(--radius-full);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px;
  font-size: 10px; font-weight: 500; color: var(--text-tertiary); cursor: pointer;
}
.tab-stretch iconify-icon { font-size: var(--icon-md); color: inherit; }
.tab-stretch.active {
  background: rgba(255,255,255,0.12); color: var(--text-primary); font-weight: 600;
  box-shadow: inset 0 0 0 0.5px rgba(255,255,255,0.10);
}


/* ================================================================
   7 · 无障碍 · Reduce Motion（全局 a11y）
   ================================================================ */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .skeleton {
    animation: none;
    background: rgba(255,255,255,0.06);
  }
}