/* ============================================================
   清清童创 - v2 CSS 设计系统
   版本：v2.2 (2026-06-09) — UI/UX 字体体系升级
   架构：纯 HTML/CSS/JS
   风格：儿童友好 · 粘土风格(Claymorphism) · 柔美渐变

   设计原则：
   - 粘土拟态：粗圆角 + 内外双层阴影 + 柔和色彩
   - 间距系统：8px 基础倍数 (4/8/12/16/24/32/48/64)
   - 儿童友好：最小触控 44×44px、最小字号 14px、柔和动画
   - 字体层级：6级清晰梯度
   - 字体配对 #45 Kids/Education: Baloo 2 (标题) + Nunito (正文)
   ============================================================ */

/* Google Fonts: Baloo 2 (活泼圆润·适合标题及中文) + Nunito (清晰·适合正文) */

/* ==================== 1. 全局基础设施 ==================== */

/* 1.1 盒模型重置 */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

/* 1.2 REM 基准 */
html {
  font-size: 16px;
  -webkit-text-size-adjust: 100%;
}

/* 1.3 页面根背景 */
html, body {
  width: 100%;
  min-height: 100vh;
  background: #FFF9F5;
  overflow-x: hidden;
  margin: 0;
  padding: 0;
}

body {
  font-family: 'Nunito', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', sans-serif;
  font-size: 0.9375rem;
  line-height: 1.65;
  color: var(--text-primary);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  -webkit-tap-highlight-color: transparent;
}

/* ===== Baloo 2 标题字体 (v2.2 新增) ===== */
h1, h2, h3, h4, h5, h6,
.font-heading,
.page-title,
.section-title,
.home-welcome-greeting,
.dialog-title,
.create-title,
.story-title,
.profile-username {
  font-family: 'Baloo 2', 'Nunito', sans-serif;
  letter-spacing: -0.01em;
  font-weight: var(--weight-bold);
}

/* 1.4 图片限制 */
img {
  max-width: 100%;
  height: auto;
  display: block;
}

a {
  text-decoration: none;
  color: inherit;
}

/* 辅助隐藏 */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ==================== 2. CSS 变量设计系统 (v2.1 优化) ==================== */
:root {
  /* ----- 主色调 - 儿童活泼柔和系 ----- */
  --color-pink: #FF8FA3;
  --color-pink-light: #FFE0E6;
  --color-purple: #B4A7F6;
  --color-purple-light: #EDE7FF;
  --color-orange: #FFA94D;
  --color-orange-light: #FFF0E0;
  --color-blue: #74C0FC;
  --color-blue-light: #E3F0FD;
  --color-green: #69DB7C;
  --color-green-light: #E0FBE6;
  --color-yellow: #FFD43B;
  --color-yellow-light: #FFF9E0;
  --color-teal: #63E6BE;
  --color-teal-light: #DEFFF4;

  /* 渐变色系 */
  --gradient-warm: linear-gradient(135deg, #FF8FA3 0%, #FFA94D 100%);
  --gradient-cool: linear-gradient(135deg, #B4A7F6 0%, #74C0FC 100%);
  --gradient-nature: linear-gradient(135deg, #69DB7C 0%, #63E6BE 100%);
  --gradient-sunset: linear-gradient(135deg, #FFA94D 0%, #FFD43B 100%);
  --gradient-magic: linear-gradient(135deg, #FF8FA3 0%, #B4A7F6 100%);
  --gradient-ocean: linear-gradient(135deg, #74C0FC 0%, #63E6BE 100%);

  /* ----- 页面背景色 ----- */
  --bg-cream: #FFFDF7;
  --bg-pink: #FFF5F7;
  --bg-blue: #F0F7FF;
  --bg-purple: #F7F4FF;
  --bg-peach: #FFF9F5;
  --bg-ice: #F8FBFF;
  --bg-cool: #F5F9FC;

  /* ----- 文字色 ----- */
  --text-primary: #3D3D3D;
  --text-secondary: #6A6A6A;
  --text-hint: #707070;
  --text-white: #FFFFFF;
  --text-link: #5C9CE6;

  /* ----- 字体层级 (7级, v2.2 优化 Baloo 2 行高) ----- */
  --font-caption: 0.75rem;     /* 辅助小字 / 时间戳 */
  --font-body-sm: 0.8125rem;   /* 次要正文 */
  --font-body: 0.9375rem;      /* 正文 */
  --font-subtitle: 1.0625rem;  /* 副标题 / 卡片标题 (Baloo 2 建议) */
  --font-title-sm: 1.125rem;   /* 统计数字 / 中等标题 */
  --font-title: 1.25rem;       /* 区块标题 (Baloo 2 建议) */
  --font-heading: 1.5rem;      /* 页面主标题 (Baloo 2 建议) */
  --font-hero: 2rem;           /* 特大标题 / 欢迎语 (Baloo 2 建议) */

  /* ----- 字体家族 - 标题/正文分离 (v2.2) ----- */
  --font-family-heading: 'Baloo 2', 'Nunito', sans-serif;
  --font-family-body: 'Nunito', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', sans-serif;

  /* ----- Baloo 2 专属行高 (v2.2 字体配对调整) ----- */
  --line-height-heading-tight: 1.15;
  --line-height-heading: 1.25;
  --line-height-body: 1.65;
  --line-height-body-relaxed: 1.75;

  /* ----- 字重 ----- */
  --weight-normal: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;
  --weight-extrabold: 800;
  --weight-black: 900;

  /* ----- 圆角 - 粘土风格加粗 ----- */
  --radius-sm: 0.5rem;      /* 8px - 小按钮/输入框 */
  --radius-md: 0.75rem;     /* 12px - 中等卡片 */
  --radius-lg: 1rem;        /* 16px - 标准卡片 */
  --radius-xl: 1.25rem;     /* 20px - 大卡片 */
  --radius-2xl: 1.5rem;     /* 24px - 特大卡片 */
  --radius-3xl: 2rem;       /* 32px - 巨型卡片/面板 */
  --radius-round: 50%;
  --radius-full: 999px;

  /* ----- 间距系统 (8px 倍数) ----- */
  --space-1: 0.25rem;   /* 4px */
  --space-2: 0.5rem;    /* 8px */
  --space-3: 0.75rem;   /* 12px */
  --space-4: 1rem;      /* 16px */
  --space-5: 1.25rem;   /* 20px */
  --space-6: 1.5rem;    /* 24px */
  --space-8: 2rem;      /* 32px */
  --space-10: 2.5rem;   /* 40px */
  --space-12: 3rem;     /* 48px */
  --space-16: 4rem;     /* 64px */

  /* ----- 阴影 - 粘土风格双层 ----- */
  --shadow-clay-sm: 0 2px 8px rgba(0,0,0,0.04), 0 -1px 3px rgba(255,255,255,0.6);
  --shadow-clay: 0 6px 16px rgba(0,0,0,0.06), 0 -2px 6px rgba(255,255,255,0.7), inset 0 1px 0 rgba(255,255,255,0.7);
  --shadow-clay-raised: 0 8px 24px rgba(0,0,0,0.08), 0 -3px 8px rgba(255,255,255,0.8), inset 0 1px 0 rgba(255,255,255,0.8);
  --shadow-clay-pressed: 0 1px 4px rgba(0,0,0,0.06), inset 0 2px 6px rgba(0,0,0,0.05);
  --shadow-clay-floating: 0 12px 36px rgba(0,0,0,0.10), 0 -4px 12px rgba(255,255,255,0.8), inset 0 1px 0 rgba(255,255,255,0.7);

  /* 发光阴影 */
  --shadow-glow-pink: 0 4px 20px rgba(255,143,163,0.35);
  --shadow-glow-purple: 0 4px 20px rgba(180,167,246,0.35);
  --shadow-glow-orange: 0 4px 20px rgba(255,169,77,0.4);
  --shadow-glow-blue: 0 4px 20px rgba(116,192,252,0.35);
  --shadow-glow-green: 0 4px 20px rgba(105,219,124,0.35);

  /* 彩色顶部条纹颜色 */
  --stripe-pink: #FF8FA3;
  --stripe-purple: #B4A7F6;
  --stripe-orange: #FFA94D;
  --stripe-blue: #74C0FC;
  --stripe-green: #69DB7C;
  --stripe-teal: #63E6BE;

  /* ----- 语义背景色 ----- */
  --bg-card: #FFFFFF;
  --bg-glass: rgba(255,255,255,0.75);
  --bg-primary: var(--color-purple-light);
  --bg-secondary: #F5F5F5;
  --bg-surface: #FAFAFA;

  /* ----- 边框 ----- */
  --border-color: #E8E8E8;
  --border-light: #F0F0F0;

  /* ----- 语义主色 ----- */
  --color-primary: #B4A7F6;
  --color-primary-light: #EDE7FF;
  --color-primary-dark: #8B7BE8;
  --danger: #FF5252;
  --primary: #B4A7F6;
  --primary-purple: #B4A7F6;

  /* ----- 字体扩展层级 ----- */
  --font-lg: 1.125rem;
  --font-xl: 1.25rem;
  --font-2xl: 1.5rem;
  --font-h3: 1.25rem;
  --font-h4: 1.125rem;

  /* ----- 内边距快捷 ----- */
  --px: var(--space-4);
  --py: var(--space-4);

  /* ----- 快捷阴影 ----- */
  --shadow-sm: 0 1px 3px rgba(0,0,0,0.08);
  --shadow-md: 0 4px 12px rgba(0,0,0,0.10);

  /* ----- 过渡 & 动画 Easing ----- */
  --transition-fast: 0.15s ease-out;
  --transition-base: 0.25s ease-out;
  --transition-slow: 0.35s ease-out;
  --transition-bouncy: 0.30s cubic-bezier(0.34, 1.56, 0.64, 1);
  --transition-spring: 0.4s cubic-bezier(0.22, 0.61, 0.36, 1);

  --easing-bounce: cubic-bezier(.34,1.56,.64,1);
  --easing-smooth: cubic-bezier(.4,0,.2,1);
  --easing-decelerate: cubic-bezier(0,0,.2,1);
  --easing-accelerate: cubic-bezier(.4,0,1,1);
  --duration-micro: 150ms;
  --duration-standard: 250ms;
  --duration-expressive: 400ms;

  /* ----- 交互状态 token ----- */
  --state-active-scale: 0.97;
  --state-active-transition: transform 0.15s var(--easing-bounce);
  --state-disabled-opacity: 0.5;
  --state-disabled-cursor: not-allowed;
  --state-focus-ring: 0 0 0 3px rgba(99,102,241,0.3);
  --state-hover-lift: translateY(-2px);
  --state-pressed-shadow: inset 0 2px 6px rgba(0,0,0,0.05);
  --state-error-border: 1px solid var(--danger);
  --state-success-bg: #E0FBE6;

  /* ----- 触控安全 ----- */
  --touch-min-size: 44px;
  --touch-min-gap: 8px;

  /* ----- Skeleton 骨架屏 ----- */
  --skeleton-bg: linear-gradient(90deg, #F0F0F0 25%, #E8E8E8 50%, #F0F0F0 75%);
  --skeleton-height-sm: 16px;
  --skeleton-height-md: 24px;
  --skeleton-height-lg: 100px;
  --skeleton-radius: var(--radius-md);

  /* ----- 语义统一 ----- */
  --text-error: var(--danger);
  --text-success: #2F9E44;
  --text-warning: #E67700;
  --bg-error-light: #FFF0F0;
  --bg-warning-light: #FFF0E0;

  /* ----- Z-index 层级 ----- */
  --z-base: 1;
  --z-dropdown: 100;
  --z-sticky: 200;
  --z-fixed: 300;
  --z-modal-backdrop: 400;
  --z-modal: 500;
  --z-toast: 600;
  --z-tooltip: 700;
}

/* ==================== 3. 全局滚动与排版 ==================== */

/* 内容区域底部留白（给 tab bar） */
.page-inner {
  padding-bottom: 6rem;
}

/* 页面标题区 */
.page-title-area {
  padding: var(--space-8) var(--space-6) var(--space-4);
  text-align: center;
}

.page-title {
  font-size: var(--font-heading);
  font-weight: var(--weight-extrabold);
  color: var(--text-primary);
  line-height: var(--line-height-heading-tight);
  margin-bottom: var(--space-2);
  font-family: var(--font-family-heading);
}

.page-subtitle {
  font-size: var(--font-body);
  color: var(--text-secondary);
  line-height: 1.6;
}

/* 区块标题 */
.section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-5) var(--space-6) var(--space-3);
}

.section-title {
  font-size: var(--font-title);
  font-weight: var(--weight-bold);
  color: var(--text-primary);
  line-height: var(--line-height-heading);
  font-family: var(--font-family-heading);
}

.section-subtitle {
  font-size: var(--font-body-sm);
  color: var(--text-hint);
}

/* 返回按钮 */
.back-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-1);
  padding: var(--space-2) var(--space-3);
  min-width: 44px;
  min-height: 44px;
  font-size: var(--font-body);
  font-weight: var(--weight-semibold);
  color: var(--text-secondary);
  background: transparent;
  border: none;
  border-radius: var(--radius-lg);
  cursor: pointer;
  transition: all var(--transition-base);
}
.back-btn:active {
  background: rgba(0,0,0,0.04);
  transform: translateX(-2px);
}

/* ==================== 4. 页面容器 - 独立全屏背景 ==================== */
.page {
  width: 100%;
  min-height: 100vh;
  position: relative;
  overflow-x: hidden;
  overflow-y: auto;
}

.page-home {
  background: linear-gradient(180deg, #FFFDF7 0%, #FFF5F7 30%, #FFFDF7 100%) !important;
}

.page-dialog {
  background: linear-gradient(180deg, #F0F7FF 0%, #FFFDF7 100%) !important;
  padding-bottom: 88px;
}

.page-drawing {
  background: #FFF5F7 !important;
}

.page-story {
  background: #F7F4FF !important;
}

.page-create {
  background: linear-gradient(180deg, #FFFDF7 0%, #FFF5F7 30%, #FFFDF7 100%) !important;
}

.page-profile {
  background: linear-gradient(180deg, #FFF9F5 0%, #F0F7FF 100%) !important;
}

.page-create-profile {
  background: linear-gradient(180deg, #F8FBFF 0%, #FFFDF7 40%, #FFF9F5 100%) !important;
}

.page-achievement {
  background: linear-gradient(180deg, #FFF5F7 0%, #FFFDF7 100%) !important;
}

.page-gallery {
  background: linear-gradient(180deg, #F5F9FC 0%, #FFFDF7 100%) !important;
}

/* ==================== 5. 🃏 卡片组件 - 粘土拟态核心 ==================== */

/* 5.1 标准粘土卡片 */
.card-clay {
  background: #FFFFFF;
  border-radius: var(--radius-xl);
  padding: var(--space-6);
  box-shadow: var(--shadow-clay);
  border: 1px solid rgba(255,255,255,0.5);
  transition: all var(--transition-spring);
  position: relative;
  overflow: hidden;
}

/* 顶部彩色条纹 */
.card-clay::before {
  content: '';
  position: absolute;
  top: 0;
  left: var(--space-4);
  right: var(--space-4);
  height: 4px;
  border-radius: 0 0 4px 4px;
  opacity: 0.85;
}

.card-clay.stripe-pink::before  { background: var(--stripe-pink); }
.card-clay.stripe-purple::before { background: var(--stripe-purple); }
.card-clay.stripe-blue::before   { background: var(--stripe-blue); }
.card-clay.stripe-orange::before { background: var(--stripe-orange); }
.card-clay.stripe-green::before  { background: var(--stripe-green); }
.card-clay.stripe-teal::before   { background: var(--stripe-teal); }

/* 悬浮上浮 */
.card-clay:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-clay-raised);
}
.card-clay:active {
  transform: scale(0.98);
  box-shadow: var(--shadow-clay-pressed);
}

/* 5.2 毛玻璃卡片 */
.card-glass {
  background: rgba(255,255,255,0.72);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-radius: var(--radius-xl);
  padding: var(--space-5);
  border: 1px solid rgba(255,255,255,0.55);
  box-shadow: var(--shadow-clay-sm);
  transition: all var(--transition-base);
}

/* 5.3 渐变卡片 */
.card-gradient {
  border-radius: var(--radius-xl);
  padding: var(--space-6);
  box-shadow: var(--shadow-clay);
  border: none;
  color: #FFFFFF;
  transition: all var(--transition-spring);
  position: relative;
  overflow: hidden;
}
.card-gradient:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-clay-floating);
}
.card-gradient:active {
  transform: scale(0.98);
}

.card-grad-pink   { background: var(--gradient-warm);   box-shadow: var(--shadow-glow-pink); }
.card-grad-purple { background: var(--gradient-cool);   box-shadow: var(--shadow-glow-purple); }
.card-grad-orange { background: var(--gradient-sunset);  box-shadow: var(--shadow-glow-orange); }
.card-grad-blue   { background: var(--gradient-ocean);   box-shadow: var(--shadow-glow-blue); }
.card-grad-green  { background: var(--gradient-nature);  box-shadow: var(--shadow-glow-green); }
.card-grad-magic  { background: var(--gradient-magic);   box-shadow: var(--shadow-glow-purple); }

/* 5.4 可选中卡片（风格/主题选择） */
.card-select {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: var(--space-5) var(--space-3);
  min-height: 96px;
  min-width: 80px;
  background: #FCFCFC;
  border-radius: var(--radius-xl);
  border: 3px solid transparent;
  box-shadow: var(--shadow-clay-sm);
  transition: all var(--transition-bouncy);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  text-align: center;
}
.card-select:active {
  transform: scale(0.94);
}
.card-select.selected {
  background: #FFFFFF;
  border-color: var(--color-purple);
  box-shadow: var(--shadow-glow-purple), var(--shadow-clay-raised);
  transform: translateY(-2px);
}
.card-select .select-icon {
  font-size: 2rem;
  line-height: 1;
}
.card-select .select-label {
  font-size: var(--font-body-sm);
  font-weight: var(--weight-semibold);
  color: var(--text-primary);
  line-height: 1.3;
}

/* 5.5 旧版兼容别名 */
.card { 
  /* Alias for card-clay from old code */ 
  background: #FFFFFF;
  border-radius: var(--radius-xl);
  padding: var(--space-6);
  box-shadow: var(--shadow-clay);
  border: 1px solid rgba(255,255,255,0.5);
  transition: all var(--transition-spring);
  position: relative;
  overflow: hidden;
}

.card-glass {
  background: rgba(255,255,255,0.72);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-radius: var(--radius-xl);
  padding: var(--space-5);
  border: 1px solid rgba(255,255,255,0.55);
  box-shadow: var(--shadow-clay-sm);
}

.card-gradient { }
.card-gradient.blue {
  background: var(--gradient-ocean);
  box-shadow: var(--shadow-glow-blue);
}
.card-gradient.green {
  background: var(--gradient-nature);
  box-shadow: var(--shadow-glow-green);
}
.card-gradient.orange {
  background: var(--gradient-sunset);
  box-shadow: var(--shadow-glow-orange);
}

.card-selectable { }
.card-selectable.selected {
  background: #FFFFFF;
  border-color: var(--color-purple);
  box-shadow: var(--shadow-glow-purple);
  transform: translateY(-2px);
}

/* ==================== 6. 🔘 按钮组件 ==================== */

/* 6.1 主按钮 */
.btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-6);
  min-height: 48px;
  min-width: 64px;
  background: var(--gradient-warm);
  border-radius: var(--radius-2xl);
  font-size: var(--font-body);
  font-weight: var(--weight-bold);
  color: var(--text-white);
  box-shadow: var(--shadow-glow-orange), 0 2px 8px rgba(255,169,77,0.2);
  border: none;
  cursor: pointer;
  transition: all var(--transition-bouncy);
  white-space: nowrap;
  -webkit-tap-highlight-color: transparent;
  text-align: center;
  line-height: 1.2;
  letter-spacing: 0.01em;
}
.btn-primary:active {
  transform: scale(0.95);
  box-shadow: 0 2px 8px rgba(255,169,77,0.15);
}
.btn-primary:disabled {
  background: linear-gradient(135deg, #CCC 0%, #DDD 100%);
  box-shadow: 0 2px 8px rgba(0,0,0,0.08);
  cursor: not-allowed;
  opacity: 0.55;
  transform: none;
}

/* 紫色主按钮变体 */
.btn-primary-purple {
  background: var(--gradient-cool);
  box-shadow: var(--shadow-glow-purple), 0 2px 8px rgba(180,167,246,0.2);
}

/* 6.2 次按钮 */
.btn-secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-5);
  min-height: 44px;
  min-width: 56px;
  background: #F5F5F5;
  border-radius: var(--radius-xl);
  font-size: var(--font-body);
  font-weight: var(--weight-semibold);
  color: var(--text-primary);
  border: 2px solid transparent;
  cursor: pointer;
  transition: all var(--transition-base);
  white-space: nowrap;
  -webkit-tap-highlight-color: transparent;
  text-align: center;
  line-height: 1.2;
}
.btn-secondary:active {
  background: #EAEAEA;
  transform: scale(0.96);
}
.btn-secondary.outline {
  background: transparent;
  border-color: var(--color-blue);
  color: var(--color-blue);
}
.btn-secondary.outline:active {
  background: var(--color-blue-light);
}

/* 6.3 幽灵按钮 */
.btn-ghost {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-4);
  min-height: 44px;
  min-width: 44px;
  background: transparent;
  border-radius: var(--radius-lg);
  font-size: var(--font-body);
  color: var(--text-link);
  border: none;
  cursor: pointer;
  transition: all var(--transition-base);
  white-space: nowrap;
  -webkit-tap-highlight-color: transparent;
}
.btn-ghost:active {
  background: rgba(92,156,230,0.08);
}

/* 6.4 按钮尺寸 */
.btn-sm {
  padding: var(--space-2) var(--space-4);
  min-height: 44px;
  font-size: var(--font-body-sm);
  border-radius: var(--radius-lg);
}
.btn-lg {
  padding: var(--space-4) var(--space-8);
  min-height: 56px;
  font-size: var(--font-subtitle);
  border-radius: var(--radius-3xl);
}
.btn-full { width: 100%; }

/* ==================== 7. 📥 输入框组件 ==================== */
.input {
  width: 100%;
  min-height: 48px;
  padding: var(--space-3) var(--space-4);
  background: #F8F8F8;
  border-radius: var(--radius-xl);
  font-size: var(--font-body);
  color: var(--text-primary);
  line-height: 1.6;
  border: 2px solid transparent;
  transition: all var(--transition-base);
  outline: none;
  font-family: inherit;
  -webkit-appearance: none;
  appearance: none;
  box-shadow: var(--shadow-clay-sm);
}
.input:focus {
  background: #FFFFFF;
  border-color: var(--color-purple);
  box-shadow: 0 0 0 6px rgba(180,167,246,0.1), var(--shadow-clay);
  transform: translateY(-1px);
}
.input::placeholder {
  color: #C0C0C0;
  font-size: var(--font-body);
}

/* 文本域 */
.textarea {
  min-height: 96px;
  resize: vertical;
  padding: var(--space-4);
  line-height: 1.7;
}

/* 输入框组 */
.input-group {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  width: 100%;
  background: #F8F8F8;
  border-radius: var(--radius-xl);
  border: 2px solid transparent;
  padding: 0 var(--space-2) 0 0;
  transition: all var(--transition-base);
  box-shadow: var(--shadow-clay-sm);
}
.input-group:focus-within {
  background: #FFFFFF;
  border-color: var(--color-purple);
  box-shadow: 0 0 0 6px rgba(180,167,246,0.1), var(--shadow-clay);
}
.input-group .input {
  border: none;
  background: transparent;
  flex: 1;
  box-shadow: none;
}
.input-group .input:focus {
  box-shadow: none;
  transform: none;
}

/* ==================== 8. 页面布局通用模式 ==================== */

/* 8.1 页面头部 */
.page-header {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-4) var(--space-5);
  min-height: 56px;
  position: sticky;
  top: 0;
  z-index: var(--z-sticky);
  background: rgba(255,255,255,0.8);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(0,0,0,0.04);
}
.page-header-title {
  font-size: var(--font-title);
  font-weight: var(--weight-extrabold);
  color: var(--text-primary);
  flex: 1;
  text-align: center;
  line-height: 1.3;
}

/* 8.2 内容区域 */
.page-body {
  padding: var(--space-4) var(--space-5);
}

/* 8.3 卡片区域 */
.card-section {
  padding: 0 var(--space-5) var(--space-4);
}

/* 8.4 网格容器 */
.grid-2 {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-3);
}
.grid-3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-3);
}

/* ==================== 9. 底部导航栏 ==================== */
.tab-bar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: var(--space-4);
  z-index: var(--z-fixed);
  display: flex;
  align-items: center;
  justify-content: space-around;
  height: 56px;
  margin: 0 var(--space-5);
  padding: 0 var(--space-1);
  background: rgba(255,255,255,0.88);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-radius: var(--radius-2xl);
  box-shadow: var(--shadow-clay-floating);
  border: 1px solid rgba(255,255,255,0.6);
  overflow: hidden;
  transition: all var(--transition-base);
}
.tab-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  flex: 1;
  padding: var(--space-1) var(--space-2);
  min-width: 44px;
  min-height: 44px;
  background: transparent;
  border: none;
  border-radius: var(--radius-lg);
  cursor: pointer;
  transition: all var(--transition-bouncy);
  color: var(--text-hint);
  position: relative;
  -webkit-tap-highlight-color: transparent;
}
.tab-item:active {
  transform: scale(0.9);
}
.tab-item.active {
  color: var(--color-orange);
  background: rgba(255,169,77,0.1);
}

/* 儿童模式 Indigo 统一色调 (v2.2) */
.tab-bar-indigo .tab-item.active {
  color: var(--color-primary-dark, #8B7BE8);
  background: rgba(180,167,246,0.12);
}
.tab-bar-indigo .tab-item:active {
  transform: scale(0.9);
  background: rgba(180,167,246,0.08);
}
.tab-icon {
  font-size: 1.4rem;
  width: 1.4rem;
  height: 1.4rem;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all var(--transition-bouncy);
}
.tab-item.active .tab-icon {
  transform: scale(1.12);
}
.tab-label {
  font-size: 0.75rem;
  font-weight: var(--weight-semibold);
  line-height: 1;
  white-space: nowrap;
}

/* 5-Tab 中间伙伴按钮 — 放大 + 突出 */
.tab-item-middle {
  transform: scale(1.15);
  position: relative;
  z-index: 2;
}
.tab-item-middle .tab-icon-svg {
  font-size: 1.7rem;
  width: 1.7rem;
  height: 1.7rem;
}
.tab-item-middle .tab-icon-svg svg {
  width: 1.7rem;
  height: 1.7rem;
}
.tab-item-middle.active {
  background: rgba(180,167,246,0.15);
  box-shadow: 0 0 20px rgba(180,167,246,0.2);
}
.tab-item-middle.active .tab-icon-svg {
  transform: scale(1.08);
}

/* 伙伴浮起按钮 — 微悬浮 + Indigo 辉光 (v2.2) */
.tab-item-partner-float {
  transform: scale(1.12);
  margin-top: -6px;
  position: relative;
  z-index: 3;
}
.tab-item-partner-float::before {
  content: '';
  position: absolute;
  inset: -4px;
  border-radius: inherit;
  background: rgba(180,167,246,0.08);
  filter: blur(12px);
  opacity: 0;
  transition: opacity var(--transition-base);
}
.tab-item-partner-float.active::before {
  opacity: 1;
}
.tab-item-partner-float .tab-icon-svg {
  font-size: 1.8rem;
  width: 1.8rem;
  height: 1.8rem;
}
.tab-item-partner-float .tab-icon-svg svg {
  width: 1.8rem;
  height: 1.8rem;
}
.tab-item-partner-float.active {
  background: rgba(180,167,246,0.18);
  box-shadow: 0 4px 20px rgba(180,167,246,0.25);
}
.tab-item-partner-float.active .tab-icon-svg {
  transform: scale(1.06);
}

/* 脉冲动画 — 伙伴按钮激活时的微呼吸效果 */
.tab-item-partner-pulse {
  animation: tabPartnerPulse 2s ease-in-out infinite;
}
@keyframes tabPartnerPulse {
  0%, 100% { box-shadow: 0 4px 20px rgba(180,167,246,0.25); }
  50% { box-shadow: 0 4px 28px rgba(180,167,246,0.4); }
}

.tab-badge {
  position: absolute;
  top: 4px;
  right: 6px;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  background: linear-gradient(135deg, #FF6B6B, #FF8E53);
  border-radius: var(--radius-full);
  font-size: 0.75rem;
  font-weight: var(--weight-bold);
  color: #FFFFFF;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  box-shadow: 0 2px 6px rgba(255,107,107,0.4);
}

/* ==================== 10. AI 角色头像 ==================== */
.ai-character {
  width: 56px;
  height: 56px;
  border-radius: var(--radius-round);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  flex-shrink: 0;
  overflow: visible;
  cursor: pointer;
  transition: all var(--transition-bouncy);
}
.ai-character::before {
  content: '';
  position: absolute;
  inset: -3px;
  border-radius: var(--radius-round);
  background: var(--gradient-magic);
  z-index: 0;
  transition: opacity var(--transition-base);
}
.ai-character::after {
  content: '';
  position: absolute;
  inset: 3px;
  border-radius: calc(var(--radius-round));
  background: #FFFFFF;
  z-index: 0;
}
.ai-character {
  animation: aiCharFloat 3.5s ease-in-out infinite;
  box-shadow: none;
}
.ai-character:hover { transform: scale(1.1); }
.ai-character:active { transform: scale(0.93); }

.ai-character img,
.ai-character .avatar-content {
  width: calc(100% - 8px);
  height: calc(100% - 8px);
  border-radius: var(--radius-round);
  object-fit: cover;
  position: relative;
  z-index: 1;
}
.ai-character.small { width: 40px; height: 40px; }
.ai-character.large { width: 80px; height: 80px; }

@keyframes aiCharFloat {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-5px);
  }
}

/* ==================== 11. 语音按钮 ==================== */
.voice-button {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.voice-btn-circle {
  width: 48px; height: 48px;
  border-radius: var(--radius-round);
  background: var(--gradient-sunset);
  border: none;
  box-shadow: var(--shadow-glow-orange);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  transition: all var(--transition-bouncy);
}
.voice-btn-circle:active { transform: scale(0.9); }
.voice-btn-circle .voice-icon {
  font-size: 1.3rem;
  color: #FFFFFF;
}
.voice-button.voice-btn-recording .voice-btn-circle {
  animation: voicePulse 1.2s ease-in-out infinite;
}
.voice-status {
  font-size: var(--font-caption);
  color: var(--text-hint);
  white-space: nowrap;
  user-select: none;
}

@keyframes voicePulse {
  0% { box-shadow: 0 0 0 0 rgba(255,107,107,0.6); }
  50% { box-shadow: 0 0 0 16px rgba(255,107,107,0); }
  100% { box-shadow: 0 0 0 0 rgba(255,107,107,0); }
}
.voice-button .ripple {
  position: absolute;
  inset: -5px;
  border-radius: var(--radius-round);
  border: 3px solid rgba(255,169,77,0.3);
  animation: rippleExpand 1.5s ease-out infinite;
  pointer-events: none;
}
.voice-button .ripple:nth-child(2) { animation-delay: 0.5s; }
.voice-button .ripple:nth-child(3) { animation-delay: 1.0s; }

@keyframes rippleExpand {
  0% { transform: scale(1); opacity: 0.6; }
  100% { transform: scale(1.5); opacity: 0; }
}
.voice-btn-circle:disabled {
  background: linear-gradient(135deg, #CCC 0%, #DDD 100%);
  box-shadow: 0 2px 8px rgba(0,0,0,0.12);
  cursor: not-allowed;
}
.voice-wave-container {
  display: flex; align-items: center; gap: 4px;
  padding: 4px 0;
}

/* ==================== 12. 消息列表 & 气泡 ==================== */
.message-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--space-4);
  width: 100%;
}
.message-bubble {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  max-width: 88%;
  animation: messageSlideIn 0.35s ease-out;
}
.message-bubble .avatar {
  width: 40px;
  height: 40px;
  border-radius: var(--radius-round);
  flex-shrink: 0;
  overflow: hidden;
  box-shadow: var(--shadow-clay-sm);
}
.message-bubble .avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.message-bubble .content {
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-2xl);
  font-size: var(--font-body);
  line-height: 1.7;
  word-break: break-word;
  position: relative;
}

/* AI 消息 */
.message-bubble.left {
  align-self: flex-start;
  flex-direction: row;
}
.message-bubble.left .content {
  background: #FFFFFF;
  border-top-left-radius: var(--radius-sm);
  color: var(--text-primary);
  box-shadow: var(--shadow-clay-sm);
  border: 1px solid rgba(255,255,255,0.5);
}

/* 用户消息 */
.message-bubble.right {
  align-self: flex-end;
  flex-direction: row-reverse;
}
.message-bubble.right .avatar { display: none; }
.message-bubble.right .content {
  background: var(--gradient-warm);
  border-top-right-radius: var(--radius-sm);
  color: #FFFFFF;
  box-shadow: var(--shadow-glow-pink);
}
.message-bubble .timestamp {
  font-size: var(--font-caption);
  color: var(--text-hint);
  margin-top: var(--space-1);
  opacity: 0.7;
}
.message-bubble.right .timestamp {
  color: rgba(255,255,255,0.7);
  text-align: right;
}

/* 打字指示器 */
.typing-indicator {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: var(--space-3) var(--space-4);
  background: #FFFFFF;
  border-radius: var(--radius-2xl);
  border-top-left-radius: var(--radius-sm);
  box-shadow: var(--shadow-clay-sm);
  align-self: flex-start;
}
.typing-dot {
  width: 8px;
  height: 8px;
  border-radius: var(--radius-round);
  background: var(--text-hint);
  animation: typingBounce 1.4s ease-in-out infinite;
}
.typing-dot:nth-child(2) { animation-delay: 0.2s; }
.typing-dot:nth-child(3) { animation-delay: 0.4s; }

@keyframes typingBounce {
  0%, 60%, 100% { transform: translateY(0); opacity: 0.4; }
  30% { transform: translateY(-6px); opacity: 1; }
}
@keyframes messageSlideIn {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

/* ==================== 13. 加载状态 ==================== */

/* 旋转加载 */
.spinner {
  width: 32px;
  height: 32px;
  border: 3px solid rgba(255,255,255,0.3);
  border-top-color: #FFFFFF;
  border-radius: var(--radius-round);
  animation: spin 0.8s linear infinite;
}
.spinner.dark { border-color: rgba(0,0,0,0.1); border-top-color: var(--color-purple); }
.spinner.orange { border-color: rgba(255,169,77,0.2); border-top-color: var(--color-orange); }
.spinner.sm { width: 16px; height: 16px; border-width: 2px; }
.spinner.lg { width: 48px; height: 48px; border-width: 4px; }

/* 全屏加载 */
.loading-screen {
  position: fixed;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-4);
  z-index: var(--z-toast);
  background: rgba(255,255,255,0.92);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  animation: fadeIn 0.2s ease-out;
}
.loading-screen .loading-text {
  font-size: var(--font-body);
  color: var(--text-secondary);
  animation: pulse 1.5s ease-in-out infinite;
}

/* 加载点 */
.loading-dots { display: flex; gap: 6px; align-items: center; }
.loading-dots .dot {
  width: 10px; height: 10px;
  border-radius: var(--radius-round);
  background: var(--gradient-cool);
  animation: dotBounce 1.4s ease-in-out infinite;
}
.loading-dots .dot:nth-child(2) { animation-delay: 0.2s; }
.loading-dots .dot:nth-child(3) { animation-delay: 0.4s; }

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

/* 骨架屏 */
.skeleton {
  background: linear-gradient(90deg, #F0F0F0 25%, #E8E8E8 50%, #F0F0F0 75%);
  background-size: 200% 100%;
  animation: shimmer 1.5s ease-in-out infinite;
  border-radius: var(--radius-md);
}
.skeleton.text { height: 14px; margin-bottom: 8px; }
.skeleton.title { height: 20px; width: 60%; margin-bottom: 12px; }
.skeleton.avatar { width: 48px; height: 48px; border-radius: var(--radius-round); }
.skeleton.card { height: 120px; border-radius: var(--radius-lg); }

@keyframes shimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* @MAYBE-DEAD: v2.2 旧版 Skeleton Shimmer，Section 32 有更新版 Skeleton Screen System (P1-05)，旧版可能部分冗余。保留以维持向后兼容。 */
/* ==================== 14. 交互状态 & Skeleton Shimmer 工具类 (v2.2) ==================== */

/* 激活态 - 按下的缩放反馈 */
.state-active {
  transform: scale(var(--state-active-scale));
  transition: var(--state-active-transition);
  box-shadow: var(--state-pressed-shadow);
}

/* 禁用态 - 视觉灰化 + 禁止指针 */
.state-disabled {
  opacity: var(--state-disabled-opacity);
  cursor: var(--state-disabled-cursor) !important;
  pointer-events: none;
  filter: grayscale(0.3);
}
.state-disabled:active {
  transform: none !important;
}

/* 骨架屏微光 — 通用 shimmer 容器 */
.skeleton-shimmer {
  position: relative;
  overflow: hidden;
  background: linear-gradient(90deg, #F0F0F0 25%, #E8E8E8 50%, #F0F0F0 75%);
  background-size: 200% 100%;
  animation: shimmer 1.5s ease-in-out infinite;
  border-radius: var(--radius-md);
}
.skeleton-shimmer::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.35), transparent);
  animation: shimmer 1.5s ease-in-out infinite;
  background-size: 200% 100%;
}

/* Skeleton-shimmer 变体 */
.skeleton-shimmer.text {
  height: var(--skeleton-height-sm);
  margin-bottom: 8px;
  width: 80%;
}
.skeleton-shimmer.title {
  height: var(--skeleton-height-md);
  width: 55%;
  margin-bottom: 12px;
}
.skeleton-shimmer.card {
  height: var(--skeleton-height-lg);
}
.skeleton-shimmer.avatar {
  width: 48px;
  height: 48px;
  border-radius: var(--radius-round);
}

/* 触控安全 - 交互提示 */
.touch-safe {
  min-width: var(--touch-min-size);
  min-height: var(--touch-min-size);
}

/* ==================== 15. 空状态 ==================== */
.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--space-12) var(--space-6);
  text-align: center;
  animation: fadeIn 0.4s ease-out;
}
.empty-state .empty-icon {
  font-size: 3.5rem;
  margin-bottom: var(--space-4);
  opacity: 0.55;
  animation: float 3s ease-in-out infinite;
}
.empty-state .empty-title {
  font-size: var(--font-subtitle);
  font-weight: var(--weight-bold);
  color: var(--text-primary);
  margin-bottom: var(--space-2);
}
.empty-state .empty-desc {
  font-size: var(--font-body-sm);
  color: var(--text-hint);
  line-height: 1.7;
  max-width: 280px;
  margin-bottom: var(--space-6);
}

/* ----- 空状态辅助信息行 (v2.2) ----- */
.empty-meta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  margin-bottom: var(--space-4);
}
.empty-meta-key {
  font-size: var(--font-caption);
  color: var(--text-hint);
  font-weight: var(--weight-medium);
}
.empty-meta-value {
  font-size: var(--font-body-sm);
  color: var(--text-secondary);
  font-weight: var(--weight-bold);
}

/* ----- 加载状态骨架屏容器 (v2.2) ----- */
.empty-state-loading {
  padding: var(--space-6) var(--space-5);
}
.empty-state-loading-inner {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}
.skeleton-loading-item {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.skeleton-loading-list-item {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: var(--space-3);
}

/* ----- 错误空状态 (v2.2) ----- */
.empty-error-state .empty-icon {
  filter: grayscale(0.2);
}
.empty-error-state .empty-title {
  color: var(--danger);
}
.empty-error-detail {
  margin-top: var(--space-2);
  margin-bottom: var(--space-4);
  font-size: var(--font-caption);
  color: var(--text-hint);
  max-width: 260px;
  padding: var(--space-2) var(--space-3);
  background: rgba(255,82,82,0.06);
  border-radius: var(--radius-md);
  line-height: 1.5;
  word-break: break-all;
}
.empty-retry-btn {
  transition: all var(--transition-base);
}
.empty-retry-btn:active {
  transform: scale(0.95);
}

/* ==================== 16. 弹窗/模态框 ==================== */
.modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.35);
  z-index: var(--z-modal-backdrop);
  display: flex;
  align-items: center;
  justify-content: center;
  animation: fadeIn 0.2s ease-out;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.modal-content {
  background: #FFFFFF;
  border-radius: var(--radius-3xl);
  padding: var(--space-8);
  margin: var(--space-6);
  max-width: 400px;
  width: 90%;
  box-shadow: var(--shadow-clay-floating);
  animation: modalSlideUp 0.35s cubic-bezier(0.34,1.56,0.64,1);
  position: relative;
  z-index: var(--z-modal);
}

@keyframes modalSlideUp {
  from { opacity: 0; transform: translateY(24px) scale(0.95); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

/* ==================== 17. Toast 提示 ==================== */
.toast {
  position: fixed;
  top: var(--space-8);
  left: 50%;
  transform: translateX(-50%);
  z-index: var(--z-toast);
  padding: var(--space-3) var(--space-5);
  background: rgba(0,0,0,0.78);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-radius: var(--radius-full);
  color: #FFFFFF;
  font-size: var(--font-body-sm);
  font-weight: var(--weight-medium);
  box-shadow: var(--shadow-clay-floating);
  animation: toastIn 0.3s ease-out;
  pointer-events: none;
  white-space: nowrap;
  max-width: 85vw;
  text-align: center;
}
.toast.success { background: rgba(105,219,124,0.9); }
.toast.error { background: rgba(255,130,130,0.9); }

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

/* ==================== 18. 动画关键帧 ==================== */
@keyframes slideUp {
  from { opacity: 0; transform: translateY(16px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes slideDown {
  from { opacity: 0; transform: translateY(-16px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}
@keyframes float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-6px); }
}
@keyframes bounce {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-10px); }
}
@keyframes spin {
  to { transform: rotate(360deg); }
}
@keyframes pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.5; }
}
@keyframes wiggle {
  0%, 100% { transform: rotate(0deg); }
  25% { transform: rotate(-5deg); }
  75% { transform: rotate(5deg); }
}
@keyframes scaleIn {
  from { opacity: 0; transform: scale(0.85); }
  to { opacity: 1; transform: scale(1); }
}
@keyframes blink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0; }
}

/* ==================== 19. 页面进入动画 ==================== */
.page-enter {
  animation: slideUp 0.4s ease-out;
}
.page-enter-delayed {
  animation: slideUp 0.5s ease-out 0.1s both;
}
.page-enter-scale {
  animation: scaleIn 0.35s cubic-bezier(0.34,1.56,0.64,1);
}

/* 子元素级联动画 */
.stagger-enter > * {
  opacity: 0;
  animation: slideUp 0.4s ease-out forwards;
}
.stagger-enter > *:nth-child(1) { animation-delay: 0s; }
.stagger-enter > *:nth-child(2) { animation-delay: 0.07s; }
.stagger-enter > *:nth-child(3) { animation-delay: 0.14s; }
.stagger-enter > *:nth-child(4) { animation-delay: 0.21s; }
.stagger-enter > *:nth-child(5) { animation-delay: 0.28s; }
.stagger-enter > *:nth-child(6) { animation-delay: 0.35s; }
.stagger-enter > *:nth-child(7) { animation-delay: 0.42s; }
.stagger-enter > *:nth-child(8) { animation-delay: 0.49s; }

/* ==================== 20. 排版工具类 ==================== */
.text-caption { font-size: var(--font-caption); }
.text-body-sm { font-size: var(--font-body-sm); }
.text-body { font-size: var(--font-body); }
.text-subtitle { font-size: var(--font-subtitle); }
.text-title { font-size: var(--font-title); }
.text-heading { font-size: var(--font-heading); }
.text-hero { font-size: var(--font-hero); }

.font-normal { font-weight: var(--weight-normal); }
.font-medium { font-weight: var(--weight-medium); }
.font-semibold { font-weight: var(--weight-semibold); }
.font-bold { font-weight: var(--weight-bold); }
.font-extrabold { font-weight: var(--weight-extrabold); }

.text-center { text-align: center; }
.text-left { text-align: left; }
.text-right { text-align: right; }
.text-primary { color: var(--text-primary); }
.text-secondary { color: var(--text-secondary); }
.text-hint { color: var(--text-hint); }
.text-white { color: var(--text-white); }

/* ==================== 21. 间距工具类 (8px 系统) ==================== */
.m-1 { margin: var(--space-1); } .m-2 { margin: var(--space-2); }
.m-3 { margin: var(--space-3); } .m-4 { margin: var(--space-4); }
.m-5 { margin: var(--space-5); } .m-6 { margin: var(--space-6); }
.m-8 { margin: var(--space-8); } .m-10 { margin: var(--space-10); }

.mt-1 { margin-top: var(--space-1); } .mt-2 { margin-top: var(--space-2); }
.mt-3 { margin-top: var(--space-3); } .mt-4 { margin-top: var(--space-4); }
.mt-5 { margin-top: var(--space-5); } .mt-6 { margin-top: var(--space-6); }
.mt-8 { margin-top: var(--space-8); } .mt-10 { margin-top: var(--space-10); }

.mb-1 { margin-bottom: var(--space-1); } .mb-2 { margin-bottom: var(--space-2); }
.mb-3 { margin-bottom: var(--space-3); } .mb-4 { margin-bottom: var(--space-4); }
.mb-5 { margin-bottom: var(--space-5); } .mb-6 { margin-bottom: var(--space-6); }
.mb-8 { margin-bottom: var(--space-8); } .mb-10 { margin-bottom: var(--space-10); }

.p-1 { padding: var(--space-1); } .p-2 { padding: var(--space-2); }
.p-3 { padding: var(--space-3); } .p-4 { padding: var(--space-4); }
.p-5 { padding: var(--space-5); } .p-6 { padding: var(--space-6); }
.p-8 { padding: var(--space-8); } .p-10 { padding: var(--space-10); }

/* Flex 工具 */
.flex { display: flex; }
.flex-col { flex-direction: column; }
.flex-wrap { flex-wrap: wrap; }
.flex-1 { flex: 1; }
.items-center { align-items: center; }
.items-start { align-items: flex-start; }
.items-end { align-items: flex-end; }
.justify-center { justify-content: center; }
.justify-between { justify-content: space-between; }
.justify-around { justify-content: space-around; }
.gap-1 { gap: var(--space-1); } .gap-2 { gap: var(--space-2); }
.gap-3 { gap: var(--space-3); } .gap-4 { gap: var(--space-4); }
.gap-5 { gap: var(--space-5); } .gap-6 { gap: var(--space-6); }
.gap-8 { gap: var(--space-8); }

/* 其他 */
.w-full { width: 100%; }
.h-full { height: 100%; }
.truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.relative { position: relative; }
.absolute { position: absolute; }
.hidden { display: none; }
.block { display: block; }
.inline-block { display: inline-block; }

/* ==================== 22. 粘土风格通用装饰类 ==================== */
/*
 * Clay Component Library — 统一粘土组件基类
 * 
 * 使用指南：
 *   卡片: .clay (默认) / .clay-raised (悬浮) / .clay-glass (毛玻璃)
 *   按钮: .clay-btn-gradient → .clay-btn-magic / .clay-btn-warm / .clay-btn-sunset / .clay-btn-cool
 *   卡片变体参考: Section 5 (卡片组件), Section 6 (按钮组件)
 *   页面级粘土升级: Section 23-28 (页面专属), Section 34.1-34.9 (付费模块)
 *   核心创作粘土: .drw-clay-* / .ddl-clay-* / .sty-clay-* (Section: v3.5 创作流程)
 *   辅助账户粘土: .gal-clay-* / .dry-clay-* / .pfl-clay-* (Section: v3.5 辅助账户)
 */

/* ---- 基础粘土容器 ---- */
.clay {
  border-radius: var(--radius-xl);
  background: #FFFFFF;
  box-shadow: var(--shadow-clay);
  border: 1px solid rgba(255,255,255,0.5);
}
.clay-raised {
  border-radius: var(--radius-xl);
  background: #FFFFFF;
  box-shadow: var(--shadow-clay-raised);
  border: 1px solid rgba(255,255,255,0.6);
}
.clay-glass {
  background: rgba(255,255,255,0.72);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255,255,255,0.4);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-clay-sm);
}

/* ---- 粘土渐变按钮基类 (使用位置: Section: v3.5 创作流程) ---- */
.clay-btn-gradient {
  display: flex; align-items: center; justify-content: center; gap: var(--space-2);
  padding: var(--space-4) var(--space-8); min-height: 60px;
  border: none; border-radius: var(--radius-3xl);
  font-size: var(--font-subtitle); font-weight: var(--weight-extrabold); color: #FFFFFF;
  box-shadow: var(--shadow-clay-sm);
  cursor: pointer; transition: all var(--transition-bouncy);
  font-family: inherit; width: 100%;
}
.clay-btn-gradient:active { transform: scale(0.95); }
.clay-btn-gradient:disabled { background: #CCC !important; box-shadow: none; opacity: 0.6; cursor: not-allowed; }
/* 颜色变体 */
.clay-btn-magic { background: var(--gradient-magic); box-shadow: var(--shadow-glow-purple), 0 4px 20px rgba(180,167,246,0.3); }
.clay-btn-warm { background: var(--gradient-warm); box-shadow: var(--shadow-glow-pink), 0 4px 20px rgba(255,143,163,0.3); }
.clay-btn-sunset { background: var(--gradient-sunset); box-shadow: var(--shadow-glow-orange), 0 4px 20px rgba(255,169,77,0.3); }
.clay-btn-cool { background: var(--gradient-cool); box-shadow: var(--shadow-glow-purple), 0 4px 20px rgba(180,167,246,0.3); }

/* 渐变文字 */
.text-gradient {
  background: var(--gradient-magic);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* 弹跳交互 */
.bouncy {
  transition: all var(--transition-bouncy);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.bouncy:active { transform: scale(0.94); }

/* 圆形容器 */
.circle {
  border-radius: var(--radius-round);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

/* ==================== 23. 页面专属样式 ==================== */

/* ---------- 22.1 首页 ---------- */
.home-container {
  padding: 0 var(--space-5);
  padding-bottom: 7rem;
}
.home-welcome {
  text-align: center;
  padding: var(--space-10) var(--space-4) var(--space-6);
}
.home-welcome-greeting {
  font-size: var(--font-hero);
  font-weight: var(--weight-extrabold);
  color: var(--text-primary);
  line-height: var(--line-height-heading-tight);
  margin-bottom: var(--space-1);
  font-family: var(--font-family-heading);
}
.home-welcome-greeting .highlight {
  background: var(--gradient-warm);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.home-welcome-sub {
  font-size: var(--font-body);
  font-weight: var(--weight-medium);
  color: var(--text-secondary);
  margin-top: var(--space-2);
}
.home-character-area {
  display: flex;
  justify-content: center;
  margin-bottom: var(--space-4);
}
.home-tip {
  font-size: var(--font-body-sm);
  color: var(--text-hint);
  text-align: center;
  margin-top: var(--space-3);
}

/* 统计条 */
.home-stats {
  display: flex;
  justify-content: center;
  gap: var(--space-2);
  margin-bottom: var(--space-8);
}
.home-stat-item {
  flex: 1;
  max-width: 80px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: var(--space-3) var(--space-2);
  background: #FFFFFF;
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-clay-sm);
}
.home-stat-num {
  font-size: var(--font-title);
  font-weight: var(--weight-extrabold);
  color: var(--color-orange);
  line-height: 1;
}
.home-stat-label {
  font-size: var(--font-caption);
  color: var(--text-hint);
  font-weight: var(--weight-medium);
}

/* 功能卡片网格 (2列) */
.home-features {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-3);
  margin-bottom: var(--space-8);
}
.home-feature-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: var(--space-5) var(--space-3);
  min-height: 100px;
  background: #FFFFFF;
  border-radius: var(--radius-2xl);
  box-shadow: var(--shadow-clay);
  border: 1px solid rgba(255,255,255,0.5);
  transition: all var(--transition-spring);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  text-align: center;
  position: relative;
  overflow: hidden;
}
.home-feature-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: var(--space-3);
  right: var(--space-3);
  height: 4px;
  border-radius: 0 0 4px 4px;
}
.home-feature-card:nth-child(1)::before { background: var(--stripe-pink); }
.home-feature-card:nth-child(2)::before { background: var(--stripe-purple); }
.home-feature-card:nth-child(3)::before { background: var(--stripe-blue); }
.home-feature-card:nth-child(4)::before { background: var(--stripe-green); }
.home-feature-card:nth-child(5)::before { background: var(--stripe-orange); }
.home-feature-card:nth-child(6)::before { background: var(--stripe-teal); }

.home-feature-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-clay-raised);
}
.home-feature-card:active {
  transform: scale(0.96);
  box-shadow: var(--shadow-clay-pressed);
}
.home-feature-icon {
  font-size: 2.2rem;
  line-height: 1;
  transition: all var(--transition-bouncy);
}
.home-feature-card:hover .home-feature-icon {
  transform: scale(1.1);
}
.home-feature-name {
  font-size: var(--font-subtitle);
  font-weight: var(--weight-bold);
  color: var(--text-primary);
  line-height: 1.3;
}
.home-feature-desc {
  font-size: var(--font-caption);
  color: var(--text-hint);
  line-height: 1.4;
}

/* 最近动态 */
.home-recent {
  margin-bottom: var(--space-8);
}
.home-recent-item {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  background: #FFFFFF;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-clay-sm);
  margin-bottom: var(--space-2);
  transition: all var(--transition-base);
}
.home-recent-item:hover {
  transform: translateX(4px);
}
.home-recent-type {
  font-size: var(--font-body-sm);
  font-weight: var(--weight-semibold);
  color: var(--color-purple);
  white-space: nowrap;
}
.home-recent-title {
  font-size: var(--font-body-sm);
  color: var(--text-primary);
  flex: 1;
  line-height: 1.4;
}
.home-recent-date {
  font-size: var(--font-caption);
  color: var(--text-hint);
  white-space: nowrap;
}
.home-recent-empty {
  text-align: center;
  padding: var(--space-8);
  color: var(--text-hint);
  font-size: var(--font-body-sm);
}

/* ---------- 22.2 对话页 ---------- */
.dialog-container {
  display: flex;
  flex-direction: column;
  height: 100vh;
}
.dialog-header {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-5);
  min-height: 56px;
  background: rgba(255,255,255,0.85);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(0,0,0,0.04);
  z-index: var(--z-sticky);
}
.dialog-back {
  font-size: var(--font-body);
  font-weight: var(--weight-semibold);
  color: var(--text-link);
  cursor: pointer;
  padding: var(--space-2);
  min-width: 44px;
  min-height: 44px;
  display: flex;
  align-items: center;
  border-radius: var(--radius-lg);
  transition: all var(--transition-base);
}
.dialog-back:active { background: rgba(0,0,0,0.04); }
.dialog-title {
  flex: 1;
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--font-title);
  font-weight: var(--weight-extrabold);
  color: var(--text-primary);
  font-family: var(--font-family-heading);
  justify-content: center;
}
.dialog-character-emoji { font-size: 1.4rem; }
.dialog-actions {
  display: flex;
  gap: var(--space-2);
}
.dialog-clear-btn {
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0,0,0,0.04);
  border: none;
  border-radius: var(--radius-round);
  font-size: 1.1rem;
  cursor: pointer;
  transition: all var(--transition-base);
}
.dialog-clear-btn:active { background: rgba(0,0,0,0.08); transform: scale(0.9); }

.dialog-messages {
  flex: 1;
  overflow-y: auto;
  padding-bottom: var(--space-3);
}
.dialog-input-area {
  padding: var(--space-3) var(--space-5);
  padding-bottom: calc(5rem + env(safe-area-inset-bottom));
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  background: rgba(255,255,255,0.85);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-top: 1px solid rgba(0,0,0,0.04);
}
.dialog-voice-container {
  display: flex;
  justify-content: center;
}
.dialog-text-input-row {
  display: flex;
  gap: var(--space-2);
  align-items: center;
}
.dialog-input {
  flex: 1;
  min-height: 48px;
  padding: var(--space-3) var(--space-4);
  background: #F5F5F5;
  border-radius: var(--radius-2xl);
  border: 2px solid transparent;
  font-size: var(--font-body);
  font-family: inherit;
  outline: none;
  transition: all var(--transition-base);
  box-shadow: var(--shadow-clay-sm);
}
.dialog-input:focus {
  background: #FFFFFF;
  border-color: var(--color-blue);
  box-shadow: 0 0 0 6px rgba(116,192,252,0.1);
}
.dialog-send-btn {
  min-width: 56px;
  min-height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--gradient-warm);
  border: none;
  border-radius: var(--radius-2xl);
  font-size: var(--font-body);
  font-weight: var(--weight-bold);
  color: #FFFFFF;
  cursor: pointer;
  box-shadow: var(--shadow-glow-pink);
  transition: all var(--transition-bouncy);
  -webkit-tap-highlight-color: transparent;
}
.dialog-send-btn:active { transform: scale(0.92); }
.dialog-send-btn:disabled {
  background: linear-gradient(135deg, #CCC 0%, #DDD 100%);
  box-shadow: none;
  opacity: 0.6;
  cursor: not-allowed;
}

/* ---------- 22.3 创作中心 ---------- */
.create-container {
  padding: var(--space-6) var(--space-5) 7rem;
}
.create-header {
  text-align: center;
  margin-bottom: var(--space-6);
}
.create-title {
  font-size: var(--font-heading);
  font-weight: var(--weight-extrabold);
  color: var(--text-primary);
  margin-bottom: var(--space-1);
  font-family: var(--font-family-heading);
  line-height: var(--line-height-heading-tight);
}
.create-subtitle {
  font-size: var(--font-body);
  color: var(--text-secondary);
}
.create-tip {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-6);
  background: rgba(255,247,237,0.6);
  border-radius: var(--radius-2xl);
  margin-bottom: var(--space-6);
  text-align: center;
}
.create-tip .tip-icon { font-size: 2.5rem; }
.create-tip .tip-text { font-size: var(--font-body); color: var(--text-secondary); }

/* ---------- v3.1 Phase 2-A: 6-Grid Creation Hub ---------- */
/* .create-section-title — 已移除，卡片自描述 */
/* @FIXME: 以下为被注释的选择器，原 } 在注释外部导致多余闭合括号，已修复 */
/*
.create-section-title {
  font-size: var(--font-title);
  font-weight: var(--weight-bold);
  color: var(--text-primary);
  padding: var(--space-2) var(--space-3);
  margin-bottom: var(--space-2);
}
*/

.create-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-3);
  padding: 0 var(--space-3);
  margin-bottom: var(--space-8);
}

/* 3-column grid at ≥480px */
@media (min-width: 480px) {
  .create-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

.create-grid-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  min-height: 120px;
  min-width: 120px;
  padding: var(--space-4) var(--space-3);
  border-radius: var(--radius-xl);  /* 20px */
  box-shadow: var(--shadow-clay);
  border: 1px solid rgba(255,255,255,0.5);
  cursor: pointer;
  transition: transform 0.1s ease-out, box-shadow 0.1s ease-out;
  -webkit-tap-highlight-color: transparent;
  text-align: center;
  user-select: none;
  -webkit-user-select: none;
}

.create-grid-card:active {
  transform: scale(0.95);
  box-shadow: var(--shadow-clay-pressed);
}

.create-grid-emoji {
  font-size: 3rem;  /* 48px */
  line-height: 1;
  transition: transform var(--transition-bouncy);
}

.create-grid-card:active .create-grid-emoji {
  transform: scale(0.9);
}

.create-grid-label {
  font-size: var(--font-subtitle);
  font-weight: var(--weight-bold);
  color: var(--text-primary);
  line-height: 1.3;
}

/* 6 Color Themes */
.card-color-pink  { background: #FFE0E6; }
.card-color-blue  { background: #E3F0FD; }
.card-color-green { background: #E0FBE6; }
.card-color-purple { background: #EDE7FF; }
.card-color-orange { background: #FFF0E0; }
.card-color-yellow { background: #FFF9E0; }

.create-options {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  margin-bottom: var(--space-8);
}
.create-card {
  padding: var(--space-6);
  border-radius: var(--radius-2xl);
  box-shadow: var(--shadow-clay);
  cursor: pointer;
  transition: all var(--transition-spring);
  position: relative;
  overflow: hidden;
  min-height: 130px;
}
.create-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-clay-raised); }
.create-card:active { transform: scale(0.97); }

.create-card-drawing {
  background: linear-gradient(135deg, #FFF5F7 0%, #FFFFFF 100%);
  border: 1px solid rgba(255,143,163,0.2);
}
.create-card-story {
  background: linear-gradient(135deg, #F7F4FF 0%, #FFFFFF 100%);
  border: 1px solid rgba(180,167,246,0.2);
}
.create-card-icon {
  font-size: 2.8rem;
  margin-bottom: var(--space-2);
  line-height: 1;
}
.create-card-title {
  font-size: var(--font-title);
  font-weight: var(--weight-extrabold);
  color: var(--text-primary);
  margin-bottom: var(--space-1);
}
.create-card-desc {
  font-size: var(--font-body-sm);
  color: var(--text-secondary);
  margin-bottom: var(--space-3);
  line-height: 1.5;
}
.create-card-features {
  display: flex;
  gap: var(--space-2);
  flex-wrap: wrap;
}
.create-card-features span {
  font-size: var(--font-caption);
  font-weight: var(--weight-semibold);
  color: var(--color-purple);
  background: var(--color-purple-light);
  padding: 2px 10px;
  border-radius: var(--radius-full);
}

.create-tips { margin-bottom: var(--space-8); }
.tips-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin-top: var(--space-3);
}
.tip-item {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  background: #FFFFFF;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-clay-sm);
}
.tip-bullet {
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--gradient-cool);
  border-radius: var(--radius-round);
  font-size: var(--font-body-sm);
  font-weight: var(--weight-bold);
  color: #FFFFFF;
  flex-shrink: 0;
}
.tip-item span:last-child {
  font-size: var(--font-body-sm);
  color: var(--text-secondary);
}

/* ---------- 22.4 绘画页 ---------- */
.drawing-container {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}
.drawing-header {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-5);
  min-height: 56px;
}
.drawing-back {
  padding: var(--space-2);
  font-size: var(--font-body);
  font-weight: var(--weight-semibold);
  color: var(--text-link);
  cursor: pointer;
  min-width: 44px;
  min-height: 44px;
  display: flex;
  align-items: center;
  border-radius: var(--radius-lg);
}
.drawing-title {
  flex: 1;
  text-align: center;
  font-size: var(--font-title);
  font-weight: var(--weight-extrabold);
  color: var(--text-primary);
}
.drawing-body {
  padding: var(--space-4) var(--space-5) 7rem;
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}
.drawing-input-section {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.drawing-textarea {
  width: 100%;
  min-height: 100px;
  padding: var(--space-4);
  background: #FFFFFF;
  border-radius: var(--radius-xl);
  border: 2px solid rgba(255,143,163,0.2);
  font-size: var(--font-body);
  font-family: inherit;
  line-height: 1.7;
  outline: none;
  resize: vertical;
  box-shadow: var(--shadow-clay-sm);
  transition: all var(--transition-base);
}
.drawing-textarea:focus {
  border-color: var(--color-pink);
  box-shadow: 0 0 0 6px rgba(255,143,163,0.08);
}
.drawing-input-tools {
  display: flex;
  justify-content: flex-end;
}
.drawing-char-count {
  font-size: var(--font-caption);
  color: var(--text-hint);
}

/* 风格选择器 - 触控大卡片 */
.drawing-options { }
.style-options {
  display: flex;
  gap: var(--space-2);
  overflow-x: auto;
  padding: var(--space-2) 0;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.style-options::-webkit-scrollbar { display: none; }

.style-option {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-1);
  padding: var(--space-4) var(--space-4);
  min-width: 72px;
  min-height: 80px;
  background: #FFFFFF;
  border-radius: var(--radius-xl);
  border: 3px solid transparent;
  box-shadow: var(--shadow-clay-sm);
  cursor: pointer;
  transition: all var(--transition-bouncy);
  flex-shrink: 0;
}
.style-option:active { transform: scale(0.92); }
.style-option.active {
  border-color: var(--color-pink);
  box-shadow: var(--shadow-glow-pink), var(--shadow-clay-raised);
  transform: translateY(-2px);
}
.style-icon { font-size: 1.5rem; }
.style-label { font-size: var(--font-caption); font-weight: var(--weight-semibold); color: var(--text-primary); }

/* 提示词 chips */
.prompt-chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}
.prompt-chip {
  padding: var(--space-2) var(--space-4);
  min-height: 44px;
  display: flex;
  align-items: center;
  background: #FFFFFF;
  border-radius: var(--radius-full);
  font-size: var(--font-body-sm);
  color: var(--text-primary);
  box-shadow: var(--shadow-clay-sm);
  cursor: pointer;
  transition: all var(--transition-bouncy);
  border: 2px solid transparent;
}
.prompt-chip:active {
  transform: scale(0.94);
  border-color: var(--color-purple);
  box-shadow: var(--shadow-glow-purple);
}

/* 生成按钮 */
.drawing-generate-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: var(--space-4) var(--space-8);
  min-height: 56px;
  background: var(--gradient-magic);
  border: none;
  border-radius: var(--radius-3xl);
  font-size: var(--font-subtitle);
  font-weight: var(--weight-extrabold);
  color: #FFFFFF;
  box-shadow: var(--shadow-glow-purple), 0 4px 16px rgba(180,167,246,0.3);
  cursor: pointer;
  transition: all var(--transition-bouncy);
  width: 100%;
}
.drawing-generate-btn:active { transform: scale(0.96); }
.drawing-generate-btn:disabled {
  background: linear-gradient(135deg, #CCC 0%, #DDD 100%);
  box-shadow: none;
  opacity: 0.6;
  cursor: not-allowed;
}
.drawing-generate-btn .btn-icon { font-size: 1.2rem; }

/* 结果展示 */
.drawing-result {
  background: #FFFFFF;
  border-radius: var(--radius-2xl);
  padding: var(--space-5);
  box-shadow: var(--shadow-clay-raised);
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  animation: scaleIn 0.4s cubic-bezier(0.34,1.56,0.64,1);
}
.result-image-container {
  border-radius: var(--radius-xl);
  overflow: hidden;
  box-shadow: var(--shadow-clay-sm);
}
.result-image {
  width: 100%;
  display: block;
}
.result-actions {
  display: flex;
  gap: var(--space-2);
  justify-content: center;
}
.drawing-loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-10) var(--space-5);
}
.drawing-loading .loading-animation {
  font-size: 3.5rem;
  animation: bounce 1s ease-in-out infinite;
}
.drawing-loading .loading-text {
  font-size: var(--font-body);
  color: var(--text-secondary);
}

/* ---------- 22.5 故事页 ---------- */
.story-container { display: flex; flex-direction: column; min-height: 100vh; }
.story-header {
  display: flex; align-items: center; gap: var(--space-3);
  padding: var(--space-3) var(--space-5); min-height: 56px;
}
.story-back {
  padding: var(--space-2); font-size: var(--font-body); font-weight: var(--weight-semibold);
  color: var(--text-link); cursor: pointer; min-width: 44px; min-height: 44px;
  display: flex; align-items: center; border-radius: var(--radius-lg);
}
.story-title {
  flex: 1; text-align: center; font-size: var(--font-title);
  font-weight: var(--weight-extrabold); color: var(--text-primary);
  font-family: var(--font-family-heading);
}
.story-body {
  padding: var(--space-4) var(--space-5) 7rem;
  display: flex; flex-direction: column; gap: var(--space-5);
}

/* 主题选择 - 大触控卡片 */
.story-themes {
  display: flex; flex-wrap: wrap; gap: var(--space-2);
}
.story-theme {
  display: flex; flex-direction: column; align-items: center; gap: var(--space-1);
  padding: var(--space-4) var(--space-3); min-width: 72px; min-height: 80px;
  background: #FFFFFF; border-radius: var(--radius-xl);
  border: 3px solid transparent; box-shadow: var(--shadow-clay-sm);
  cursor: pointer; transition: all var(--transition-bouncy); flex: 1; min-width: 60px;
}
.story-theme:active { transform: scale(0.92); }
.story-theme.active {
  border-color: var(--color-purple);
  box-shadow: var(--shadow-glow-purple), var(--shadow-clay-raised);
  transform: translateY(-2px);
}
.theme-emoji { font-size: 1.6rem; }
.theme-label { font-size: var(--font-caption); font-weight: var(--weight-semibold); color: var(--text-primary); text-align: center; }

/* 自定义输入 */
.story-input {
  width: 100%; min-height: 48px;
  padding: var(--space-3) var(--space-4);
  background: #FFFFFF; border-radius: var(--radius-xl);
  border: 2px solid rgba(180,167,246,0.2); font-size: var(--font-body);
  font-family: inherit; outline: none;
  box-shadow: var(--shadow-clay-sm); transition: all var(--transition-base);
}
.story-input:focus {
  border-color: var(--color-purple);
  box-shadow: 0 0 0 6px rgba(180,167,246,0.08);
}

/* 长度选择 */
.length-options {
  display: flex; gap: var(--space-2);
}
.length-option {
  flex: 1; display: flex; flex-direction: column; align-items: center; gap: 2px;
  padding: var(--space-4) var(--space-3); min-height: 72px;
  background: #FFFFFF; border-radius: var(--radius-xl);
  border: 3px solid transparent; box-shadow: var(--shadow-clay-sm);
  cursor: pointer; transition: all var(--transition-bouncy); text-align: center;
}
.length-option:active { transform: scale(0.94); }
.length-option.active {
  border-color: var(--color-blue);
  box-shadow: var(--shadow-glow-blue), var(--shadow-clay-raised);
  transform: translateY(-2px);
}
.length-label { font-size: var(--font-body); font-weight: var(--weight-bold); color: var(--text-primary); }
.length-desc { font-size: var(--font-caption); color: var(--text-hint); }

/* 故事生成按钮 */
.story-generate-btn {
  display: flex; align-items: center; justify-content: center; gap: var(--space-2);
  padding: var(--space-4) var(--space-8); min-height: 56px;
  background: var(--gradient-magic); border: none; border-radius: var(--radius-3xl);
  font-size: var(--font-subtitle); font-weight: var(--weight-extrabold); color: #FFFFFF;
  box-shadow: var(--shadow-glow-purple), 0 4px 16px rgba(180,167,246,0.3);
  cursor: pointer; transition: all var(--transition-bouncy); width: 100%;
}
.story-generate-btn:active { transform: scale(0.96); }
.story-generate-btn:disabled {
  background: linear-gradient(135deg, #CCC 0%, #DDD 100%);
  box-shadow: none; opacity: 0.6; cursor: not-allowed;
}
.story-loading {
  display: flex; flex-direction: column; align-items: center; gap: var(--space-4);
  padding: var(--space-10) var(--space-5);
}

/* 故事结果 */
.story-result {
  background: #FFFFFF; border-radius: var(--radius-2xl); padding: var(--space-5);
  box-shadow: var(--shadow-clay-raised); display: flex; flex-direction: column; gap: var(--space-4);
  animation: scaleIn 0.4s cubic-bezier(0.34,1.56,0.64,1);
}
.result-header { }
.result-title {
  font-size: var(--font-subtitle); font-weight: var(--weight-extrabold);
  color: var(--color-purple); line-height: 1.4;
}
.result-content {
  font-size: var(--font-body); color: var(--text-primary); line-height: 1.9;
  max-height: 300px; overflow-y: auto; padding-right: var(--space-2);
}

/* ---------- 22.6 个人中心 ---------- */
.profile-container { padding: 0 var(--space-5) 7rem; }
.profile-header {
  display: flex; align-items: center; gap: var(--space-4);
  padding: var(--space-8) var(--space-5) var(--space-6);
  background: var(--gradient-warm); margin: 0 calc(-1 * var(--space-5));
  padding-left: var(--space-5); padding-right: var(--space-5);
  border-radius: 0 0 var(--radius-3xl) var(--radius-3xl);
  color: #FFFFFF; position: relative; overflow: hidden;
}
.profile-header::after {
  content: ''; position: absolute; bottom: 0; left: 0; right: 0;
  height: 40px; background: linear-gradient(transparent, rgba(0,0,0,0.05));
}

.profile-avatar {
  width: 64px; height: 64px; border-radius: var(--radius-round);
  background: rgba(255,255,255,0.25); display: flex;
  align-items: center; justify-content: center; flex-shrink: 0;
  border: 3px solid rgba(255,255,255,0.5); box-shadow: 0 4px 16px rgba(0,0,0,0.1);
}
.avatar-emoji { font-size: 2rem; }
.profile-user-info { flex: 1; }
.profile-username {
  font-size: var(--font-subtitle); font-weight: var(--weight-extrabold); line-height: 1.4;
  font-family: var(--font-family-heading);
}
.profile-phone {
  font-size: var(--font-body-sm); opacity: 0.8; margin-top: 2px;
}
.profile-logout-btn {
  padding: var(--space-2) var(--space-3); min-height: 44px;
  background: rgba(255,255,255,0.2); border: 1px solid rgba(255,255,255,0.3);
  border-radius: var(--radius-lg); font-size: var(--font-body-sm); font-weight: var(--weight-semibold);
  color: #FFFFFF; cursor: pointer; transition: all var(--transition-base);
}
.profile-logout-btn:active { background: rgba(255,255,255,0.3); }

.profile-section { margin-top: var(--space-6); }

/* 档案列表 */
.profile-list { display: flex; flex-direction: column; gap: var(--space-2); margin-top: var(--space-3); }
.profile-card {
  display: flex; align-items: center; gap: var(--space-3);
  padding: var(--space-4); background: #FFFFFF;
  border-radius: var(--radius-xl); box-shadow: var(--shadow-clay-sm);
  cursor: pointer; transition: all var(--transition-base); position: relative;
  border: 2px solid transparent;
}
.profile-card:hover { box-shadow: var(--shadow-clay); }
.profile-card.active {
  border-color: var(--color-orange);
  box-shadow: var(--shadow-glow-orange);
  transform: translateX(4px);
}
.profile-card-avatar {
  width: 52px; height: 52px; border-radius: var(--radius-round);
  background: var(--color-orange-light); display: flex;
  align-items: center; justify-content: center; flex-shrink: 0;
  border: 3px solid rgba(255,169,77,0.2);
}
.card-emoji { font-size: 1.6rem; }
.profile-card-info { flex: 1; min-width: 0; }
.card-name { font-size: var(--font-body); font-weight: var(--weight-bold); color: var(--text-primary); line-height: 1.4; }
.card-character { font-size: var(--font-caption); color: var(--text-hint); margin-top: 2px; }
.profile-card-badge { flex-shrink: 0; }
.badge-active {
  font-size: var(--font-caption); font-weight: var(--weight-semibold);
  color: var(--color-orange); background: var(--color-orange-light);
  padding: 2px 12px; border-radius: var(--radius-full);
}
.badge-switch {
  font-size: var(--font-caption); color: var(--text-link);
  background: var(--color-blue-light); padding: 2px 12px; border-radius: var(--radius-full);
}
.profile-card-delete {
  position: absolute; top: 6px; left: 6px;
  width: 28px; height: 28px; display: flex; align-items: center; justify-content: center;
  background: rgba(0,0,0,0.06); border: none; border-radius: var(--radius-round);
  font-size: 0.75rem; color: var(--text-hint); cursor: pointer;
  transition: all var(--transition-base); z-index: 1;
}
.profile-card-delete:active { background: rgba(255,0,0,0.1); color: #FF4444; }

.profile-empty {
  text-align: center; padding: var(--space-8) var(--space-4);
}
.profile-add-btn {
  display: flex; align-items: center; justify-content: center; gap: var(--space-2);
  width: 100%; padding: var(--space-4); min-height: 52px;
  background: #FFFFFF; border: 3px dashed var(--color-purple-light);
  border-radius: var(--radius-xl); font-size: var(--font-body);
  font-weight: var(--weight-bold); color: var(--color-purple);
  cursor: pointer; transition: all var(--transition-base); margin-top: var(--space-3);
}
.profile-add-btn:active { background: var(--color-purple-light); transform: scale(0.98); }

/* 设置列表 */
.settings-list { display: flex; flex-direction: column; background: #FFFFFF; border-radius: var(--radius-xl); box-shadow: var(--shadow-clay-sm); overflow: hidden; margin-top: var(--space-3); }
.setting-item {
  display: flex; align-items: center; justify-content: space-between;
  padding: var(--space-4); border-bottom: 1px solid rgba(0,0,0,0.04); cursor: pointer;
  transition: all var(--transition-base); min-height: 52px;
}
.setting-item:last-child { border-bottom: none; }
.setting-item:active { background: rgba(0,0,0,0.02); }
.setting-label { font-size: var(--font-body); color: var(--text-primary); }
.setting-arrow { font-size: var(--font-title); color: var(--text-hint); }

/* 开关 */
.switch { position: relative; display: inline-block; width: 52px; height: 28px; flex-shrink: 0; }
.switch input { opacity: 0; width: 0; height: 0; }
.switch-slider {
  position: absolute; inset: 0; background: #DDD; border-radius: 28px;
  transition: all var(--transition-base); cursor: pointer;
}
.switch-slider::before {
  content: ''; position: absolute; left: 3px; top: 3px;
  width: 22px; height: 22px; background: #FFFFFF; border-radius: 50%;
  transition: all var(--transition-base); box-shadow: 0 2px 4px rgba(0,0,0,0.15);
}
.switch input:checked + .switch-slider { background: var(--color-purple); }
.switch input:checked + .switch-slider::before { transform: translateX(24px); }

/* ---------- 22.7 创建档案页 ---------- */
.cp-container { padding: 0 var(--space-5) 7rem; }
.cp-header {
  display: flex; align-items: center; gap: var(--space-3);
  padding: var(--space-3) var(--space-5); min-height: 56px;
}
.cp-back {
  padding: var(--space-2); font-size: var(--font-body); font-weight: var(--weight-semibold);
  color: var(--text-link); cursor: pointer; min-width: 44px; min-height: 44px;
  display: flex; align-items: center; border-radius: var(--radius-lg);
}
.cp-title {
  flex: 1; text-align: center; font-size: var(--font-title);
  font-weight: var(--weight-extrabold); color: var(--text-primary);
}
.cp-body { padding: var(--space-4) 0; display: flex; flex-direction: column; gap: var(--space-6); }
.cp-form { display: flex; flex-direction: column; gap: var(--space-5); }

/* Age scroll - horizontal slider (低龄友好：大按钮 + emoji + 滑动) */
.age-scroll {
  display: flex; gap: var(--space-3);
  overflow-x: auto; scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  padding: var(--space-2) 0;
  scrollbar-width: none;
}
.age-scroll::-webkit-scrollbar { display: none; }
.age-item {
  flex-shrink: 0; scroll-snap-align: center;
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  width: 68px; padding: var(--space-3) var(--space-2);
  background: var(--bg-glass);
  border: 3px solid var(--border-light);
  border-radius: var(--radius-lg);
  cursor: pointer; transition: all var(--transition-bouncy);
  user-select: none; -webkit-user-select: none;
}
.age-item:active { transform: scale(0.92); }
.age-item.active {
  background: linear-gradient(135deg, var(--primary-purple) 0%, #B088E8 100%);
  border-color: var(--primary-purple);
  box-shadow: 0 6px 20px rgba(147,112,219,0.4);
  transform: translateY(-4px);
}
.age-item.active .age-emoji,
.age-item.active .age-num,
.age-item.active .age-label {
  color: #FFFFFF !important;
  text-shadow: 0 1px 2px rgba(0,0,0,0.15);
}
.age-emoji { font-size: 1.8rem; line-height: 1; }
.age-num { font-size: var(--font-2xl); font-weight: var(--weight-bold); color: var(--text-primary); line-height: 1; }
.age-label { font-size: var(--font-caption); color: var(--text-hint); }

.form-group { display: flex; flex-direction: column; gap: var(--space-2); }
.form-label {
  font-size: var(--font-body-sm); font-weight: var(--weight-bold);
  color: var(--text-primary); padding: 0 var(--space-1);
}
.form-input {
  width: 100%; min-height: 52px; padding: var(--space-3) var(--space-4);
  background: #FFFFFF; border-radius: var(--radius-xl);
  border: 2px solid rgba(180,167,246,0.2); font-size: var(--font-body);
  font-family: inherit; outline: none; box-shadow: var(--shadow-clay-sm);
  transition: all var(--transition-base);
}
.form-input:focus {
  border-color: var(--color-purple);
  box-shadow: 0 0 0 6px rgba(180,167,246,0.08);
}

/* 角色选择网格 */
.cp-characters {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-2);
}
.cp-character {
  display: flex; flex-direction: column; align-items: center; gap: var(--space-1);
  padding: var(--space-4) var(--space-2); min-height: 90px;
  background: #FFFFFF; border-radius: var(--radius-xl);
  border: 3px solid transparent; box-shadow: var(--shadow-clay-sm);
  cursor: pointer; transition: all var(--transition-bouncy); text-align: center;
}
.cp-character:active { transform: scale(0.94); }
.cp-character.selected {
  border-color: var(--color-purple);
  box-shadow: var(--shadow-glow-purple), var(--shadow-clay-raised);
  transform: translateY(-2px);
}
.cp-character-avatar {
  width: 48px; height: 48px; border-radius: var(--radius-round);
  display: flex; align-items: center; justify-content: center;
  border: 2px solid; flex-shrink: 0;
}
.cp-character-emoji { font-size: 1.5rem; }
.cp-character-name { font-size: var(--font-body-sm); font-weight: var(--weight-bold); color: var(--text-primary); }
.cp-character-desc { font-size: 0.75rem; color: var(--text-hint); line-height: 1.3; }

.cp-submit-btn {
  display: flex; align-items: center; justify-content: center; gap: var(--space-2);
  width: 100%; padding: var(--space-4); min-height: 56px;
  background: var(--gradient-magic); border: none; border-radius: var(--radius-3xl);
  font-size: var(--font-subtitle); font-weight: var(--weight-extrabold); color: #FFFFFF;
  box-shadow: var(--shadow-glow-purple), 0 4px 16px rgba(180,167,246,0.3);
  cursor: pointer; transition: all var(--transition-bouncy);
}
.cp-submit-btn:active { transform: scale(0.96); }

/* ---------- 22.8 成就墙 ---------- */
.achievement-container { display: flex; flex-direction: column; min-height: 100vh; }
.achievement-header {
  display: flex; align-items: center; gap: var(--space-3);
  padding: var(--space-3) var(--space-5); min-height: 56px;
}
.achievement-back {
  padding: var(--space-2); font-size: var(--font-body); font-weight: var(--weight-semibold);
  color: var(--text-link); cursor: pointer; min-width: 44px; min-height: 44px;
  display: flex; align-items: center; border-radius: var(--radius-lg);
}
.achievement-title {
  flex: 1; text-align: center; font-size: var(--font-title);
  font-weight: var(--weight-extrabold); color: var(--text-primary);
}
.achievement-body { padding: var(--space-4) var(--space-5) 7rem; }

/* 成就统计 */
.achievement-summary {
  display: flex; justify-content: center; gap: var(--space-2);
  margin-bottom: var(--space-6);
}
.summary-item {
  flex: 1; max-width: 100px; display: flex; flex-direction: column; align-items: center;
  gap: 2px; padding: var(--space-4) var(--space-3);
  background: #FFFFFF; border-radius: var(--radius-xl); box-shadow: var(--shadow-clay-sm);
}
.summary-num { font-size: var(--font-heading); font-weight: var(--weight-extrabold); color: var(--color-orange); line-height: 1; }
.summary-label { font-size: var(--font-caption); color: var(--text-hint); font-weight: var(--weight-medium); }

/* 成就网格 */
.achievement-grid {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-3);
}
.achievement-card {
  display: flex; flex-direction: column; align-items: center; gap: var(--space-2);
  padding: var(--space-5) var(--space-3); min-height: 120px;
  background: #FFFFFF; border-radius: var(--radius-2xl);
  box-shadow: var(--shadow-clay); border: 1px solid rgba(255,255,255,0.5);
  transition: all var(--transition-spring); text-align: center;
  position: relative; overflow: hidden;
}
.achievement-card.achieved {
  background: linear-gradient(135deg, #FFFaF0 0%, #FFFFFF 100%);
  border-color: rgba(255,169,77,0.3);
}
.achievement-icon {
  width: 56px; height: 56px; border-radius: var(--radius-round);
  background: var(--color-purple-light); display: flex;
  align-items: center; justify-content: center; position: relative;
  box-shadow: var(--shadow-clay-sm); font-size: 1.6rem;
}
.achievement-card.achieved .achievement-icon {
  background: linear-gradient(135deg, var(--color-orange-light), #FFF8E1);
  box-shadow: var(--shadow-glow-orange);
}
.achievement-icon.rare {
  background: linear-gradient(135deg, #FEF3C7, #FDE68A);
  box-shadow: var(--shadow-glow-orange);
}
.rare-badge {
  position: absolute; top: -4px; right: -4px;
  font-size: 0.75rem; line-height: 1;
}
.achievement-name {
  font-size: var(--font-body-sm); font-weight: var(--weight-bold); color: var(--text-primary); line-height: 1.3;
}
.achievement-desc {
  font-size: var(--font-caption); color: var(--text-hint); line-height: 1.4;
}
.achievement-status {
  font-size: var(--font-caption); font-weight: var(--weight-semibold);
}
.status-locked { color: var(--text-hint); }
.status-unlocked { color: var(--color-orange); animation: pulse 1.5s ease-in-out infinite; }
.status-claimed { color: var(--color-green); }

/* ---------- 22.9 作品画廊 ---------- */
.gallery-container { display: flex; flex-direction: column; min-height: 100vh; }
.gallery-header {
  padding: var(--space-5) var(--space-5) var(--space-3);
  position: sticky; top: 0; z-index: var(--z-sticky);
  background: rgba(255,255,255,0.88); backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(0,0,0,0.04);
}
.gallery-title {
  font-size: var(--font-heading); font-weight: var(--weight-extrabold);
  color: var(--text-primary); margin-bottom: var(--space-3); text-align: center;
}
.gallery-tabs {
  display: flex; gap: var(--space-1); background: #F5F5F5;
  border-radius: var(--radius-full); padding: 4px;
}
.gallery-tab {
  flex: 1; padding: var(--space-2) var(--space-4); min-height: 40px;
  display: flex; align-items: center; justify-content: center;
  border-radius: var(--radius-full); font-size: var(--font-body-sm);
  font-weight: var(--weight-semibold); color: var(--text-secondary);
  cursor: pointer; transition: all var(--transition-bouncy); border: none; background: transparent;
}
.gallery-tab.active {
  background: #FFFFFF; color: var(--text-primary);
  box-shadow: var(--shadow-clay-sm);
}
.gallery-body { flex: 1; overflow-y: auto; padding: var(--space-3) var(--space-5) 7rem; }

.gallery-grid {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-3);
}
.gallery-item {
  position: relative; border-radius: var(--radius-xl); overflow: hidden;
  box-shadow: var(--shadow-clay); background: #FFFFFF;
  transition: all var(--transition-spring); cursor: pointer;
  border: 1px solid rgba(255,255,255,0.5);
}
.gallery-item:hover { transform: translateY(-2px); box-shadow: var(--shadow-clay-raised); }
.gallery-item:active { transform: scale(0.97); }

.gallery-item-image {
  width: 100%; aspect-ratio: 1; overflow: hidden;
  border-bottom: 3px solid;
}
.gallery-item:nth-child(4n+1) .gallery-item-image { border-color: var(--stripe-pink); }
.gallery-item:nth-child(4n+2) .gallery-item-image { border-color: var(--stripe-purple); }
.gallery-item:nth-child(4n+3) .gallery-item-image { border-color: var(--stripe-blue); }
.gallery-item:nth-child(4n+4) .gallery-item-image { border-color: var(--stripe-orange); }
.gallery-item-image img {
  width: 100%; height: 100%; object-fit: cover;
  transition: all var(--transition-slow);
}
.gallery-item:hover .gallery-item-image img { transform: scale(1.05); }

.gallery-item-info {
  padding: var(--space-3); display: flex; flex-direction: column; gap: 2px;
}
.gallery-item-title {
  font-size: var(--font-body-sm); font-weight: var(--weight-bold);
  color: var(--text-primary); line-height: 1.3;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.gallery-item-desc {
  font-size: var(--font-caption); color: var(--text-hint);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.gallery-item-date {
  font-size: var(--font-caption); color: var(--text-hint);
}
.gallery-item-story-icon {
  font-size: 3rem; text-align: center; padding: var(--space-4) 0;
}
.gallery-item-delete {
  position: absolute; top: 8px; right: 8px;
  width: 28px; height: 28px; display: flex; align-items: center; justify-content: center;
  background: rgba(0,0,0,0.4); border: none; border-radius: var(--radius-round);
  font-size: 14px; color: #FFFFFF; cursor: pointer; transition: all var(--transition-base);
  z-index: 1;
}
.gallery-item-delete:active { background: rgba(255,0,0,0.6); transform: scale(1.1); }

.gallery-empty {
  display: flex; flex-direction: column; align-items: center;
  padding: var(--space-10) var(--space-5) calc(7rem + env(safe-area-inset-bottom));
  text-align: center;
  gap: var(--space-3);
}

/* 图片预览 */
.preview-overlay {
  position: fixed; inset: 0; background: rgba(0,0,0,0.85);
  z-index: var(--z-modal); display: flex; align-items: center; justify-content: center;
  animation: fadeIn 0.2s ease-out;
}
.preview-close {
  position: absolute; top: var(--space-4); right: var(--space-4);
  width: 44px; height: 44px; display: flex; align-items: center; justify-content: center;
  background: rgba(255,255,255,0.15); border-radius: var(--radius-round);
  font-size: 1.5rem; color: #FFFFFF; cursor: pointer;
  z-index: 1; transition: all var(--transition-base);
}
.preview-close:active { background: rgba(255,255,255,0.3); }
.preview-image { max-width: 92vw; max-height: 85vh; border-radius: var(--radius-lg); }

/* 登录弹窗 */
.modal-overlay {
  position: fixed; inset: 0; background: rgba(0,0,0,0.35);
  z-index: var(--z-modal-backdrop); display: flex; align-items: center; justify-content: center;
  animation: fadeIn 0.2s ease-out; backdrop-filter: blur(6px);
}
.modal-close {
  position: absolute; top: var(--space-3); right: var(--space-3);
  width: 36px; height: 36px; display: flex; align-items: center; justify-content: center;
  font-size: 1.1rem; color: var(--text-hint); cursor: pointer;
  border-radius: var(--radius-round); transition: all var(--transition-base);
}
.modal-close:active { background: rgba(0,0,0,0.06); }
.modal-title {
  font-size: var(--font-title); font-weight: var(--weight-extrabold);
  color: var(--text-primary); margin-bottom: var(--space-5); text-align: center;
}
.modal-body { display: flex; flex-direction: column; gap: var(--space-4); }
.verification-row { display: flex; gap: var(--space-2); align-items: center; }
.modal-switch {
  text-align: center; font-size: var(--font-body-sm); color: var(--text-hint); margin-top: var(--space-3);
}
.modal-switch a { color: var(--text-link); font-weight: var(--weight-semibold); }

/* Voice button page styles */
.voice-button.voice-btn-idle { }
.voice-button.voice-btn-recording { }
.voice-button.voice-btn-processing { }
.voice-btn-circle {
  width: 56px; height: 56px; border-radius: 50%; background: transparent;
  border: none; cursor: pointer; display: flex; align-items: center; justify-content: center;
}
.voice-wave-container {
  display: flex; align-items: center; gap: 4px; justify-content: center;
}
.voice-status {
  font-size: var(--font-caption); color: var(--text-hint); margin-top: var(--space-1); text-align: center;
}

/* ==================== 24. 共创庆祝动画 ==================== */

/* 共创完成庆祝覆盖层 */
.celebration-co-create {
  position: fixed;
  inset: 0;
  z-index: var(--z-modal);
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0,0,0,0.7);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

/* 帧容器 */
.coc-complete-frames {
  position: relative;
  width: min(90vw, 400px);
  min-height: 320px;
  overflow: hidden;
}

/* 每帧 */
.coc-frame {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transform: scale(0.8);
  transition: opacity 0.5s ease, transform 0.5s ease;
  pointer-events: none;
  text-align: center;
  padding: var(--space-4);
}

.coc-frame.active {
  opacity: 1;
  transform: scale(1);
  pointer-events: auto;
}

/* 帧1：大标题 */
.coc-frame-title {
  font-size: 2.2rem;
  font-weight: var(--weight-extrabold);
  color: #FFFFFF;
  text-shadow: 0 2px 8px rgba(0,0,0,0.3);
  margin-bottom: var(--space-2);
  animation: cocTitleBounce 0.6s cubic-bezier(0.34,1.56,0.64,1);
}

.coc-frame-sub {
  font-size: var(--font-body);
  color: rgba(255,255,255,0.85);
  text-shadow: 0 1px 4px rgba(0,0,0,0.2);
}

@keyframes cocTitleBounce {
  from { transform: scale(0.5); opacity: 0; }
  to { transform: scale(1); opacity: 1; }
}

/* 星星掉落容器 */
.coc-stars-container {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
}

.coc-star {
  position: absolute;
  top: -30px;
  animation: cocStarFall var(--star-duration, 2s) linear var(--star-delay, 0s) infinite;
  opacity: 0;
}

@keyframes cocStarFall {
  0% { transform: translateY(-20px) translateX(0); opacity: 0; }
  10% { opacity: 1; }
  90% { opacity: 0.8; }
  100% { transform: translateY(calc(100vh + 20px)) translateX(var(--star-x, 20px)); opacity: 0; }
}

/* 帧2：作品大图 */
.coc-artwork-frame {
  width: 80%;
  max-width: 280px;
  aspect-ratio: 1;
  border-radius: var(--radius-2xl);
  overflow: hidden;
  box-shadow: 0 8px 40px rgba(255,143,163,0.4), 0 0 80px rgba(255,143,163,0.15);
  animation: cocArtworkScale 0.5s cubic-bezier(0.34,1.56,0.64,1);
  position: relative;
}

.coc-artwork-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.coc-artwork-fallback {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 4rem;
  background: linear-gradient(135deg, #FFE0E6, #FFF0F3);
}

.coc-artwork-glow {
  position: absolute;
  width: 60%;
  height: 60%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255,143,163,0.3), transparent 70%);
  animation: cocGlowPulse 2s ease-in-out infinite;
}

@keyframes cocArtworkScale {
  from { transform: scale(0.3); opacity: 0; }
  to { transform: scale(1); opacity: 1; }
}

@keyframes cocGlowPulse {
  0%, 100% { transform: scale(1); opacity: 0.3; }
  50% { transform: scale(1.2); opacity: 0.6; }
}

/* 帧3：统计 + 奖励 */
.coc-stats-wrap {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin-bottom: var(--space-5);
}

.coc-stat-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-1);
  flex-wrap: wrap;
}

.coc-stat-num {
  font-size: 2.5rem;
  font-weight: var(--weight-extrabold);
  color: #FFD43B;
  text-shadow: 0 2px 8px rgba(255,212,59,0.4);
  line-height: 1;
}

.coc-stat-label {
  font-size: var(--font-body);
  color: rgba(255,255,255,0.9);
  font-weight: var(--weight-semibold);
}

.coc-stat-emoji {
  font-size: 1.5rem;
}

/* 奖励图标 */
.coc-rewards {
  display: flex;
  gap: var(--space-3);
  margin-bottom: var(--space-3);
}

.coc-reward-item {
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.8rem;
  background: rgba(255,255,255,0.15);
  border-radius: var(--radius-round);
  box-shadow: 0 4px 16px rgba(255,212,59,0.3);
  animation: cocRewardPop 0.4s cubic-bezier(0.34,1.56,0.64,1) both;
}

.coc-reward-item:nth-child(2) { animation-delay: 0.15s; }
.coc-reward-item:nth-child(3) { animation-delay: 0.3s; }

@keyframes cocRewardPop {
  from { transform: scale(0); opacity: 0; }
  to { transform: scale(1); opacity: 1; }
}

.coc-unlock-text {
  font-size: var(--font-body-sm);
  color: rgba(255,255,255,0.8);
  font-weight: var(--weight-semibold);
}

/* ==================== 25. 亲子纪念卡 ==================== */

/* 纪念卡覆盖层 */
.memory-card-overlay {
  position: fixed;
  inset: 0;
  z-index: var(--z-modal);
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0,0,0,0.65);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  padding: var(--space-4);
}

/* 纪念卡主体 */
.memory-card {
  width: min(92vw, 380px);
  max-height: 90vh;
  overflow-y: auto;
  border-radius: 20px;
  background: linear-gradient(135deg, #FFE0E6 0%, #FFF0F3 30%, #FFFFFF 100%);
  box-shadow:
    0 16px 48px rgba(255,143,163,0.25),
    0 4px 16px rgba(0,0,0,0.1),
    inset 0 1px 0 rgba(255,255,255,0.8);
  padding: var(--space-8) var(--space-5) var(--space-5);
  position: relative;
  animation: memCardSlideIn 0.5s cubic-bezier(0.34,1.56,0.64,1);
  -webkit-overflow-scrolling: touch;
}

@keyframes memCardSlideIn {
  from { transform: translateY(40px) scale(0.9); opacity: 0; }
  to { transform: translateY(0) scale(1); opacity: 1; }
}

/* 顶部装饰波浪 */
.memory-card-wave {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 6px;
  background: linear-gradient(90deg,
    #FF8FA3, #FFA94D, #FFD43B, #69DB7C, #74C0FC, #B4A7F6, #FF8FA3
  );
  border-radius: 20px 20px 0 0;
}

/* 标题 */
.memory-card-header {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  margin-bottom: var(--space-5);
  padding-top: var(--space-1);
}

.memory-card-header-icon {
  font-size: 1.8rem;
}

.memory-card-header-title {
  font-size: var(--font-title);
  font-weight: var(--weight-extrabold);
  color: var(--text-primary);
}

/* 作品区域 */
.memory-card-artwork {
  display: flex;
  justify-content: center;
  margin-bottom: var(--space-5);
}

.memory-card-artwork-frame {
  width: 80%;
  max-width: 260px;
  aspect-ratio: 1;
  border-radius: var(--radius-xl);
  overflow: hidden;
  box-shadow:
    0 8px 32px rgba(0,0,0,0.08),
    0 2px 8px rgba(0,0,0,0.04);
  position: relative;
  background: linear-gradient(135deg, #F8F6FF, #FFF5F7);
}

.memory-card-artwork-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.memory-card-artwork-fallback {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 4rem;
}

/* 信息区 */
.memory-card-info {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin-bottom: var(--space-4);
  padding: var(--space-3) var(--space-4);
  background: rgba(255,255,255,0.6);
  border-radius: var(--radius-lg);
}

.memory-card-info-row {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--font-body-sm);
  color: var(--text-primary);
}

.memory-card-info-icon {
  font-size: 1rem;
  flex-shrink: 0;
}

.memory-card-info-label {
  color: var(--text-hint);
  font-weight: var(--weight-medium);
  min-width: 60px;
}

.memory-card-info-value {
  font-weight: var(--weight-bold);
  color: var(--text-primary);
}

/* 家长留言 */
.memory-card-note {
  margin-bottom: var(--space-5);
  padding: var(--space-3) var(--space-4);
  background: rgba(255,143,163,0.08);
  border-radius: var(--radius-lg);
  border-left: 3px solid var(--color-pink);
}

.memory-card-note-header {
  font-size: var(--font-body-sm);
  font-weight: var(--weight-bold);
  color: var(--color-pink);
  margin-bottom: var(--space-1);
}

.memory-card-note-text {
  font-size: var(--font-body-sm);
  color: var(--text-secondary);
  font-style: italic;
  line-height: 1.6;
}

/* 品牌水印 */
.memory-card-brand {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  margin-bottom: var(--space-5);
  padding-top: var(--space-4);
  border-top: 1px solid rgba(0,0,0,0.06);
}

.memory-card-brand-logo {
  font-size: 1.6rem;
}

.memory-card-brand-name {
  font-size: var(--font-body-sm);
  font-weight: var(--weight-extrabold);
  color: var(--color-pink);
}

.memory-card-brand-slogan {
  font-size: var(--font-caption);
  color: var(--text-hint);
}

/* 操作按钮 */
.memory-card-actions {
  display: flex;
  gap: var(--space-3);
}

.memory-card-btn {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-height: 48px;
  border: none;
  border-radius: var(--radius-xl);
  font-size: var(--font-body-sm);
  font-weight: var(--weight-bold);
  cursor: pointer;
  transition: all var(--transition-bouncy);
  font-family: inherit;
}

.memory-card-btn:active {
  transform: scale(0.95);
}

.memory-card-btn-save {
  background: linear-gradient(135deg, #FF8FA3, #FFA94D);
  color: #FFFFFF;
  box-shadow: 0 4px 12px rgba(255,143,163,0.35);
}

.memory-card-btn-share {
  background: linear-gradient(135deg, #B4A7F6, #74C0FC);
  color: #FFFFFF;
  box-shadow: 0 4px 12px rgba(180,167,246,0.35);
}

/* ==================== 26. 共创画廊角标 & 筛选 ==================== */

/* 共创作品角标 */
.gal-v3-card-coc-badge {
  position: absolute;
  top: 8px;
  right: 8px;
  z-index: 3;
  background: linear-gradient(135deg, #FF8FA3, #FF6B81);
  color: #FFFFFF;
  border-radius: 12px;
  padding: 4px 10px;
  font-size: 12px;
  font-weight: var(--weight-bold);
  white-space: nowrap;
  box-shadow: 0 2px 8px rgba(255,143,163,0.4);
  animation: cocBadgePop 0.4s cubic-bezier(0.34,1.56,0.64,1) both;
}

@keyframes cocBadgePop {
  from { transform: scale(0); opacity: 0; }
  to { transform: scale(1); opacity: 1; }
}

/* 共创筛选标签行 */
.coc-filter-row {
  display: flex;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-5) var(--space-3);
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  background: rgba(255,255,255,0.88);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.coc-filter-row::-webkit-scrollbar {
  display: none;
}

.coc-filter-chip {
  flex-shrink: 0;
  padding: var(--space-2) var(--space-4);
  min-height: 44px;
  display: flex;
  align-items: center;
  border: none;
  border-radius: var(--radius-full);
  font-size: var(--font-body-sm);
  font-weight: var(--weight-semibold);
  color: var(--text-secondary);
  background: #F3F4F6;
  cursor: pointer;
  transition: all var(--transition-base);
}

.coc-filter-chip.active {
  background: linear-gradient(135deg, #FF8FA3, #FF6B81);
  color: #FFFFFF;
  box-shadow: 0 2px 8px rgba(255,143,163,0.35);
}

.coc-filter-chip:active:not(.active) {
  background: #E5E7EB;
}

/* ==================== 27. 共创作品详情弹窗 ==================== */

.coc-preview-overlay {
  /* Inherits .preview-overlay */
  display: flex;
  align-items: center;
  justify-content: center;
}

.coc-preview-container {
  width: min(92vw, 400px);
  max-height: 90vh;
  overflow-y: auto;
  background: #FFFFFF;
  border-radius: var(--radius-2xl);
  box-shadow: var(--shadow-clay-floating);
  animation: cocPreviewSlideUp 0.4s cubic-bezier(0.34,1.56,0.64,1);
  -webkit-overflow-scrolling: touch;
}

@keyframes cocPreviewSlideUp {
  from { transform: translateY(30px) scale(0.95); opacity: 0; }
  to { transform: translateY(0) scale(1); opacity: 1; }
}

.coc-preview-badge {
  padding: var(--space-3) var(--space-4);
  background: linear-gradient(135deg, #FFE0E6, #FFF0F3);
  border-bottom: 1px solid rgba(255,143,163,0.15);
  text-align: center;
  font-size: var(--font-body);
  font-weight: var(--weight-bold);
  color: var(--color-pink);
}

.coc-preview-artwork {
  padding: var(--space-4);
  display: flex;
  justify-content: center;
}

.coc-preview-img {
  width: 100%;
  max-width: 340px;
  max-height: 340px;
  border-radius: var(--radius-xl);
  object-fit: contain;
  box-shadow:
    0 4px 16px rgba(0,0,0,0.08),
    0 0 0 4px rgba(255,143,163,0.08);
}

.coc-preview-details {
  padding: 0 var(--space-5) var(--space-3);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.coc-preview-detail-row {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--font-body-sm);
  color: var(--text-primary);
}

.coc-preview-detail-icon {
  font-size: 1.1rem;
}

.coc-preview-detail-text {
  font-weight: var(--weight-medium);
}

/* 家长留言（弹窗内） */
.coc-preview-note {
  margin: var(--space-2) 0;
  padding: var(--space-3) var(--space-4);
  background: rgba(255,143,163,0.06);
  border-radius: var(--radius-lg);
  border-left: 3px solid var(--color-pink);
}

.coc-preview-note-header {
  font-size: var(--font-body-sm);
  font-weight: var(--weight-bold);
  color: var(--color-pink);
  margin-bottom: var(--space-1);
}

.coc-preview-note-text {
  font-size: var(--font-body-sm);
  color: var(--text-secondary);
  font-style: italic;
  line-height: 1.6;
}

/* 操作按钮 */
.coc-preview-actions {
  display: flex;
  gap: var(--space-3);
  padding: var(--space-4) var(--space-5);
  border-top: 1px solid rgba(0,0,0,0.04);
}

.coc-preview-btn {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-height: 48px;
  border: none;
  border-radius: var(--radius-xl);
  font-size: var(--font-body-sm);
  font-weight: var(--weight-bold);
  cursor: pointer;
  transition: all var(--transition-bouncy);
  font-family: inherit;
}

.coc-preview-btn:active {
  transform: scale(0.95);
}

.coc-preview-btn-memory {
  background: linear-gradient(135deg, #FF8FA3, #FFA94D);
  color: #FFFFFF;
  box-shadow: 0 4px 12px rgba(255,143,163,0.3);
}

.coc-preview-btn-close {
  background: #F5F5F5;
  color: var(--text-secondary);
}

/* ==================== 28. 涂鸦简化模式 ==================== */

.doodle-simple-mode .doodle-canvas-section {
  padding: 0 var(--space-1);
}

.doodle-simple-mode .doodle-canvas-wrapper {
  min-height: 400px;
  border-radius: var(--radius-2xl);
}

.doodle-simple-mode .doodle-canvas-wrapper canvas {
  min-height: 400px;
}

/* 简化模式：隐藏复杂控件 */
.doodle-simple-mode .style-selector,
.doodle-simple-mode .advanced-options {
  display: none !important;
}

/* 简化模式：画笔工具行更大 */
.doodle-simple-mode .doodle-toolbar {
  padding: var(--space-3) var(--space-2);
  gap: var(--space-4);
}

.doodle-simple-mode .doodle-color {
  width: 44px;
  height: 44px;
  border-radius: var(--radius-round);
}

.doodle-simple-mode .doodle-action-btn {
  min-height: 52px;
  padding: var(--space-3) var(--space-5);
  font-size: var(--font-body);
  border-radius: var(--radius-xl);
}

/* 简化模式：生成按钮特别显眼 */
.doodle-simple-mode .drawing-generate-btn {
  min-height: 64px;
  font-size: var(--font-title);
  background: linear-gradient(135deg, #FF8FA3 0%, #B4A7F6 50%, #FFD43B 100%);
  box-shadow: 0 6px 28px rgba(255,143,163,0.4), 0 0 40px rgba(180,167,246,0.2);
  animation: simpleMagicGlow 2.5s ease-in-out infinite;
}

@keyframes simpleMagicGlow {
  0%, 100% {
    box-shadow: 0 6px 28px rgba(255,143,163,0.4), 0 0 40px rgba(180,167,246,0.2);
  }
  50% {
    box-shadow: 0 8px 36px rgba(255,143,163,0.6), 0 0 60px rgba(180,167,246,0.4), 0 0 80px rgba(255,212,59,0.2);
  }
}

/* 简化模式：描述输入更大 */
.doodle-simple-mode .doodle-prompt-input {
  min-height: 56px;
  font-size: var(--font-body);
  border-radius: var(--radius-xl);
  padding: var(--space-4);
}

/* 暗黑模式适配 */
body.dark-mode .memory-card {
  background: linear-gradient(135deg, #3A2A30 0%, #2A2A3A 30%, #272741 100%);
}

body.dark-mode .memory-card-info {
  background: rgba(255,255,255,0.05);
}

body.dark-mode .memory-card-info-value,
body.dark-mode .memory-card-header-title {
  color: #E0E0E0;
}

body.dark-mode .coc-preview-container {
  background: #272741;
}

body.dark-mode .coc-preview-badge {
  background: linear-gradient(135deg, #3A2A30, #2A2A3A);
}

body.dark-mode .coc-preview-actions {
  border-top-color: rgba(255,255,255,0.04);
}

body.dark-mode .coc-preview-btn-close {
  background: #3A3A5A;
  color: #7A7A8A;
}

body.dark-mode .coc-filter-row {
  background: rgba(26,26,46,0.88);
}

body.dark-mode .coc-filter-chip {
  background: #272741;
  color: #9090A8;
}

body.dark-mode .coc-filter-chip.active {
  background: linear-gradient(135deg, #FF8FA3, #FF6B81);
  color: #FFFFFF;
}

body.dark-mode .memory-card-btn-close {
  background: #3A3A5A;
  color: #7A7A8A;
}

body.dark-mode .doodle-simple-mode .drawing-generate-btn {
  background: linear-gradient(135deg, #FF6B6B 0%, #B088E8 50%, #FFD43B 100%);
}

/* ==================== 29. 响应式断点 ==================== */

/* 23.1 超小屏 */
@media (max-width: 374px) {
  :root {
    --font-hero: 1.6rem;
    --font-heading: 1.3rem;
    --font-title: 1.1rem;
    --font-subtitle: 0.95rem;
    --font-body: 0.85rem;
    --space-6: 1.25rem;
    --space-5: 1rem;
    --space-4: 0.75rem;
  }
  .tab-bar { height: 48px; margin: 0 var(--space-4); bottom: var(--space-3); }
  .tab-icon { font-size: 1.15rem; }
  .tab-label { font-size: 0.75rem; }
  .tab-badge { top: 2px; right: 3px; min-width: 16px; height: 16px; font-size: 0.75rem; }
  .home-feature-card { padding: var(--space-3) var(--space-2); min-height: 80px; }
  .home-feature-icon { font-size: 1.6rem; }
  .home-feature-name { font-size: 0.8rem; }
  .btn-primary { min-height: 44px; padding: var(--space-2) var(--space-4); }
  .dialog-send-btn, .dialog-input { min-height: 44px; }
  .cp-characters { grid-template-columns: repeat(2, 1fr); }
  .achievement-grid { grid-template-columns: 1fr 1fr; gap: var(--space-2); }
  .achievement-icon { width: 44px; height: 44px; font-size: 1.3rem; }
  .gallery-grid { gap: var(--space-2); }
}

/* 23.2 标准小屏 */
@media (min-width: 375px) and (max-width: 413px) {
  :root {
    --font-hero: 1.8rem;
    --font-heading: 1.4rem;
    --font-title: 1.15rem;
  }
}

/* 23.3 大屏手机 */
@media (min-width: 414px) and (max-width: 767px) {
  :root {
    --font-hero: 2.2rem;
    --font-heading: 1.6rem;
    --font-title: 1.3rem;
    --font-subtitle: 1.1rem;
    --font-body: 1rem;
  }
  .home-feature-card { padding: var(--space-6) var(--space-4); }
  .home-feature-icon { font-size: 2.5rem; }
  .achievement-grid { grid-template-columns: repeat(3, 1fr); }
  .gallery-grid { grid-template-columns: repeat(3, 1fr); }
}

/* 23.4 平板 - 居中布局 */
@media (min-width: 768px) {
  body { background: #F0F0F0; }

  /* ===== Tablet: larger touch targets (v3.1.2) ===== */
  :root {
    --touch-min: 44px;
  }
  .btn, button[class*="btn"] {
    min-height: 44px;
    padding: var(--space-2) var(--space-5);
    font-size: var(--font-body);
  }
  .btn-sm { min-height: 44px; padding: var(--space-2) var(--space-4); }
  input, textarea, select {
    min-height: 44px;
    font-size: var(--font-body);
  }

  .tab-bar {
    max-width: 520px; margin: 0 auto; left: 0 !important; right: 0 !important; bottom: var(--space-8);
  }
  .page {
    max-width: 680px; margin: 0 auto;
    box-shadow: 0 0 60px rgba(0,0,0,0.06); border-radius: var(--radius-3xl) !important;
    min-height: calc(100vh - 2rem); margin-top: 1rem; margin-bottom: 1rem;
  }

  /* Tablet: slightly larger base font */
  .page { font-size: 1.05em; }

  /* Grids */
  .home-features { grid-template-columns: repeat(3, 1fr); }
  .achievement-grid { grid-template-columns: repeat(4, 1fr); }
  .gallery-grid { grid-template-columns: repeat(3, 1fr); }
  .cp-characters { grid-template-columns: repeat(3, 1fr); }
  .message-bubble { max-width: 70%; }

  /* Tablet: doodle toolbar more spacious */
  .doodle-color { width: 36px; height: 36px; }
  .doodle-action-btn { min-height: 40px; padding: var(--space-2) var(--space-4); font-size: var(--font-body-sm); }
  .doodle-brush-size { gap: var(--space-3); }
  .brush-slider { height: 10px; }

  /* Tablet: drawing page spacing */
  .drawing-prompt-input { min-height: 52px; font-size: var(--font-body); }
  .drawing-style-card { padding: var(--space-3); }
  .drawing-generate-btn { min-height: 52px; font-size: var(--font-subtitle); }
}

/* @MAYBE-DEAD: 旧版暗黑模式内联覆盖，可能已被 dark-mode.css + 文末深色模式区段取代。保留以维持向后兼容。 */
/* ==================== 30. 暗黑模式 ==================== */
body.dark-mode {
  background: #1A1A2E;
  --text-primary: #E8E8E8;
  --text-secondary: #AAAAAA;
  --text-hint: #787878;
  --bg-cream: #1A1A2E;
  --bg-pink: #20203A;
  --bg-blue: #1E2538;
  --bg-purple: #22223A;
  --bg-peach: #1E222E;
  --bg-ice: #1C2438;
  --bg-cool: #1A2232;
}
body.dark-mode .card,
body.dark-mode .card-clay,
body.dark-mode .ai-character::after {
  background: #272741;
}
body.dark-mode .message-bubble.left .content {
  background: #272741; color: #E0E0E0; border-color: rgba(255,255,255,0.06);
}
body.dark-mode .tab-bar {
  background: rgba(26,26,46,0.9); border-color: rgba(255,255,255,0.06);
}
body.dark-mode .tab-item { color: rgba(255,255,255,0.35); }
body.dark-mode .tab-item.active { color: #FFA94D; background: rgba(255,169,77,0.12); }
body.dark-mode .input,
body.dark-mode .input-group,
body.dark-mode .form-input {
  background: #272741; color: #E0E0E0;
}
body.dark-mode .input:focus,
body.dark-mode .input-group:focus-within,
body.dark-mode .form-input:focus {
  background: #32325A;
}
body.dark-mode .btn-secondary { background: #272741; color: #E0E0E0; }
body.dark-mode .btn-secondary:active { background: #32325A; }
body.dark-mode .page-home,
body.dark-mode .page-dialog,
body.dark-mode .page-drawing,
body.dark-mode .page-story,
body.dark-mode .page-create,
body.dark-mode .page-profile,
body.dark-mode .page-create-profile,
body.dark-mode .page-achievement,
body.dark-mode .page-gallery,
body.dark-mode .page-doodle {
  background: #1A1A2E !important;
}
body.dark-mode .home-feature-card,
body.dark-mode .home-stat-item,
body.dark-mode .style-option,
body.dark-mode .doodle-style-card,
body.dark-mode .story-theme,
body.dark-mode .length-option,
body.dark-mode .cp-character,
body.dark-mode .achievement-card,
body.dark-mode .profile-card,
body.dark-mode .prompt-chip,
body.dark-mode .gallery-item,
body.dark-mode .setting-item,
body.dark-mode .tip-item {
  background: #272741;
}
body.dark-mode .dialog-input,
body.dark-mode .drawing-textarea,
body.dark-mode .story-input,
body.dark-mode .doodle-prompt-input {
  background: #272741; color: #E0E0E0;
}
body.dark-mode .doodle-color {
  border-color: #272741;
}
body.dark-mode .doodle-color.active {
  border-color: var(--primary);
}
body.dark-mode .doodle-toolbar {
  background: #1A1A2E;
}
body.dark-mode .doodle-action-btn {
  background: #272741; color: #E0E0E0; border-color: #3A3A5A;
}
body.dark-mode .doodle-canvas-wrapper {
  box-shadow: var(--shadow-md), 0 0 0 3px rgba(147,112,219,0.15);
}
body.dark-mode .card-select.selected,
body.dark-mode .card-selectable.selected {
  background: #272741;
}
body.dark-mode .modal-content {
  background: #272741;
}
body.dark-mode .clay,
body.dark-mode .clay-raised {
  background: #272741;
}
body.dark-mode .drawing-result,
body.dark-mode .drawing-container,
body.dark-mode .dialog-input-area,
body.dark-mode .drawing-input-section,
body.dark-mode .story-container,
body.dark-mode .cp-form .form-input,
body.dark-mode .cp-form select {
  background: #272741;
}
body.dark-mode .drawing-header,
body.dark-mode .story-header,
body.dark-mode .dialog-header,
body.dark-mode .gallery-header,
body.dark-mode .cp-header {
  background: rgba(26,26,46,0.88);
}
body.dark-mode .drawing-generate-btn {
  background: linear-gradient(135deg, #FF6B6B 0%, #FF9A9E 100%);
}
body.dark-mode .create-card-drawing,
body.dark-mode .create-card-story,
body.dark-mode .create-card-doodle {
  background: linear-gradient(135deg, #272741 0%, #1A1A2E 100%);
  border-color: rgba(255,255,255,0.06);
}

/* Dark mode: 6-grid creation cards */
body.dark-mode .card-color-pink  { background: #3A2A30; }
body.dark-mode .card-color-blue  { background: #2A303A; }
body.dark-mode .card-color-green { background: #2A3A30; }
body.dark-mode .card-color-purple { background: #302A3A; }
body.dark-mode .card-color-orange { background: #3A302A; }
body.dark-mode .card-color-yellow { background: #3A382A; }
body.dark-mode .create-grid-card {
  border-color: rgba(255,255,255,0.06);
}
body.dark-mode .create-grid-label {
  color: #E0E0E0;
}
body.dark-mode .dialog-input:focus,
body.dark-mode .drawing-textarea:focus,
body.dark-mode .story-input:focus,
body.dark-mode .doodle-prompt-input:focus {
  background: #32325A;
}
body.dark-mode .message-bubble.left .content {
  background: #272741; color: #E0E0E0;
}
body.dark-mode .profile-header {
  background: linear-gradient(135deg, #3A2A3A 0%, #2A3A3A 100%);
}
body.dark-mode .cp-submit-btn {
  background: linear-gradient(135deg, var(--primary-purple) 0%, #B088E8 100%);
}
body.dark-mode .age-item {
  background: #272741; border-color: #3A3A5A;
}
body.dark-mode .age-item.active {
  background: linear-gradient(135deg, var(--primary-purple) 0%, #B088E8 100%);
  border-color: var(--primary-purple);
}
body.dark-mode .dialog-header,
body.dark-mode .dialog-input-area,
body.dark-mode .gallery-header {
  background: rgba(26,26,46,0.88);
}
body.dark-mode .profile-header { background: linear-gradient(135deg, #3A2A3A 0%, #2A3A3A 100%); }

/* ==================== 31. 宝宝模式 (Baby Mode) ==================== */
/* Icon-only · Voice-first · Large touch targets · No Chinese text for pre-readers */

/* 25.1 全局：放大字号和触控区域 */
body.baby-mode .tab-label { display: none; }
body.baby-mode .tab-icon { font-size: 2rem; }
body.baby-mode .tab-bar { height: 4rem; padding: 0 var(--space-3); }
body.baby-mode .tab-item { min-height: 3.2rem; padding: var(--space-2); }
body.baby-mode .tab-bar-spacer { height: 5rem; }

/* 25.2 首页：纯图标大卡片 */
body.baby-mode .home-feature-card {
  padding: var(--space-5) var(--space-3);
  display: flex; flex-direction: column; align-items: center; gap: var(--space-2);
  min-height: 100px;
}
body.baby-mode .home-feature-icon { font-size: 2.8rem; }
body.baby-mode .home-feature-name { font-size: var(--font-xl); }
body.baby-mode .home-feature-desc { display: none; }
body.baby-mode .home-stats { gap: var(--space-4); }
body.baby-mode .home-stat-num { font-size: 1.6rem; }
body.baby-mode .home-stat-label { font-size: var(--font-body); }

/* 25.3 对话页：语音优先 + 避免导航栏遮挡 */
body.baby-mode .voice-button { transform: scale(1.4); margin: var(--space-4) auto; }
body.baby-mode .dialog-input-area {
  padding: var(--space-2) var(--space-3);
  padding-bottom: calc(5rem + env(safe-area-inset-bottom));
}
body.baby-mode .dialog-input {
  font-size: var(--font-lg);
  min-height: 52px;
}
body.baby-mode .message-bubble .text {
  font-size: var(--font-lg);
  line-height: 1.6;
}

/* 25.4 创作页：大入口卡片 */
body.baby-mode .create-card { padding: var(--space-5) var(--space-4); min-height: 120px; }
body.baby-mode .create-card-icon { font-size: 3rem; }
body.baby-mode .create-card-title { font-size: var(--font-2xl); }
body.baby-mode .create-card-desc { display: none; }
body.baby-mode .create-card-features { display: none; }

/* Baby mode: 6-grid creation cards */
body.baby-mode .create-grid-card { min-height: 140px; min-width: 140px; padding: var(--space-5) var(--space-3); }
body.baby-mode .create-grid-emoji { font-size: 3.5rem; }
body.baby-mode .create-grid-label { font-size: var(--font-title); }
/* body.baby-mode .create-section-title { font-size: var(--font-heading); } — section-title 已移除 */

/* 25.5 绘画/涂鸦页：大控件 */
body.baby-mode .style-option {
  padding: var(--space-4) var(--space-3);
  min-width: 80px; min-height: 90px;
}
body.baby-mode .style-icon { font-size: 2rem; }
body.baby-mode .style-label { font-size: var(--font-body); }
body.baby-mode .drawing-textarea,
body.baby-mode .doodle-prompt-input { font-size: var(--font-lg); min-height: 56px; }
body.baby-mode .drawing-generate-btn,
body.baby-mode .doodle-generate-btn {
  min-height: 60px;
  font-size: var(--font-xl);
}
body.baby-mode .doodle-canvas-wrapper { min-height: 320px; }
body.baby-mode .doodle-canvas-wrapper canvas { min-height: 320px; }
body.baby-mode .doodle-color { width: 40px; height: 40px; }
body.baby-mode .doodle-style-card { padding: var(--space-4) var(--space-2); min-height: 80px; }
body.baby-mode .doodle-style-icon { font-size: 2rem; }

/* 25.6 故事页 */
body.baby-mode .story-theme,
body.baby-mode .length-option { min-width: 90px; min-height: 100px; }
body.baby-mode .story-text { font-size: var(--font-xl); line-height: 2; }

/* 25.7 画廊 */
body.baby-mode .gallery-tab { font-size: var(--font-body); padding: var(--space-3) var(--space-4); }
body.baby-mode .gallery-item { border-radius: var(--radius-xl); }

/* ── v3.1 Phase 2-B 暗色模式 ── */
body.dark-mode .page-gallery-v3 { background: #1A1A2E !important; }
body.dark-mode .seg-control { background: rgba(26,26,46,0.88); }
body.dark-mode .seg-btn { background: #272741; color: #9090A8; }
body.dark-mode .seg-btn.active { background: #32325A; color: #E8E8F0; box-shadow: 0 2px 12px rgba(0,0,0,0.3); }
body.dark-mode .type-filter-row { background: rgba(26,26,46,0.88); border-bottom-color: rgba(255,255,255,0.06); }
body.dark-mode .type-filter-chip { background: #272741; color: #9090A8; }
body.dark-mode .type-filter-chip.active { background: #B088E8; color: #FFFFFF; }
body.dark-mode .gal-v3-card { background: #272741; box-shadow: 0 2px 16px rgba(0,0,0,0.3); }
body.dark-mode .gal-v3-card:hover { box-shadow: 0 6px 24px rgba(0,0,0,0.5); }
body.dark-mode .gal-v3-card-img-wrap { background: linear-gradient(135deg, #2A2A4A 0%, #352744 50%, #2A2A3A 100%); }
body.dark-mode .gal-v3-card-img-wrap--story { background: linear-gradient(135deg, #2A2A4A 0%, #352744 50%, #2A2A3A 100%); }
body.dark-mode .gal-v3-card-comment { color: #B088E8; }
body.dark-mode .gal-v3-card-delete { background: rgba(255,255,255,0.15); }
body.dark-mode .diary-v3-entry { background: #272741; box-shadow: 0 1px 8px rgba(0,0,0,0.2); }
body.dark-mode .diary-v3-entry--milestone { background: linear-gradient(135deg, #2A2A4A 0%, #3D2E22 100%); }
body.dark-mode .diary-v3-entry-comment { color: #D0D0E0; }
body.dark-mode .diary-v3-date-dot { box-shadow: 0 0 0 4px rgba(180,167,246,0.2); }
body.dark-mode .diary-v3-date-count { background: #3A2A6A; color: #B088E8; }

/* ── v3.1 Phase 2-B 宝宝模式 ── */
body.baby-mode .seg-btn { min-height: 52px; font-size: var(--font-lg); }
body.baby-mode .type-filter-chip { min-height: 44px; font-size: var(--font-body); }
body.baby-mode .gal-v3-card { border-radius: 24px; }
body.baby-mode .gal-v3-card-label { font-size: var(--font-body); }
body.baby-mode .gal-v3-card-comment { font-size: var(--font-body-sm); }
body.baby-mode .diary-v3-entry-thumb { width: 80px; height: 80px; }

/* 25.8 档案页 */
body.baby-mode .cp-character { min-width: 80px; min-height: 100px; padding: var(--space-3); }
body.baby-mode .cp-character-emoji { font-size: 2rem; }
body.baby-mode .cp-character-name { font-size: var(--font-body); }
body.baby-mode .age-item { width: 80px; padding: var(--space-4); }
body.baby-mode .age-num { font-size: 2rem; }
body.baby-mode .cp-submit-btn { min-height: 60px; font-size: var(--font-xl); }

/* 25.9 个人中心 */
body.baby-mode .profile-card { padding: var(--space-4); }
body.baby-mode .card-name { font-size: var(--font-lg); }
body.baby-mode .setting-item { padding: var(--space-4) var(--space-3); }

/* 25.10 通用：大按钮 + 儿童友好 */
body.baby-mode button { min-height: 52px; font-size: var(--font-lg); }
body.baby-mode .btn-primary { min-height: 56px; font-size: var(--font-lg); padding: var(--space-3) var(--space-6); }
body.baby-mode input, body.baby-mode textarea { font-size: var(--font-lg) !important; }

/* ==================== 32. Updated Skeleton Screen System (P1-05) ==================== */

.skeleton {
  background: linear-gradient(90deg, #F0F0F0 25%, #E8E8E8 50%, #F0F0F0 75%);
  background-size: 200% 100%;
  animation: skeletonShimmer 1.8s ease-in-out infinite;
  border-radius: var(--radius-md);
}

@keyframes skeletonShimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

.skeleton-card {
  border-radius: var(--radius-lg);
  min-height: 120px;
  background: linear-gradient(90deg, #F0F0F0 25%, #E8E8E8 50%, #F0F0F0 75%);
  background-size: 200% 100%;
  animation: skeletonShimmer 1.8s ease-in-out infinite;
}

.skeleton-avatar {
  width: 48px;
  height: 48px;
  border-radius: var(--radius-round);
  background: linear-gradient(90deg, #F0F0F0 25%, #E8E8E8 50%, #F0F0F0 75%);
  background-size: 200% 100%;
  animation: skeletonShimmer 1.8s ease-in-out infinite;
  flex-shrink: 0;
}

.skeleton-text {
  height: 14px;
  margin-bottom: var(--space-2);
  border-radius: var(--radius-sm);
  background: linear-gradient(90deg, #F0F0F0 25%, #E8E8E8 50%, #F0F0F0 75%);
  background-size: 200% 100%;
  animation: skeletonShimmer 1.8s ease-in-out infinite;
}

.skeleton-title {
  height: 20px;
  width: 60%;
  margin-bottom: var(--space-3);
  border-radius: var(--radius-sm);
  background: linear-gradient(90deg, #F0F0F0 25%, #E8E8E8 50%, #F0F0F0 75%);
  background-size: 200% 100%;
  animation: skeletonShimmer 1.8s ease-in-out infinite;
}

/* Skeleton page containers */
.skeleton-page {
  padding: var(--space-4) var(--space-5);
  animation: fadeIn 0.3s ease-out;
}

.skeleton-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-3);
}

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

.skeleton-flex-col {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  flex: 1;
}

.skeleton-badge-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-3);
}

.skeleton-badge-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-4);
}

.skeleton-profile-header {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  margin-bottom: var(--space-6);
}

.skeleton-stat-row {
  display: flex;
  gap: var(--space-2);
  margin-bottom: var(--space-6);
}

.skeleton-stat-item {
  flex: 1;
  height: 70px;
  border-radius: var(--radius-lg);
  background: linear-gradient(90deg, #F0F0F0 25%, #E8E8E8 50%, #F0F0F0 75%);
  background-size: 200% 100%;
  animation: skeletonShimmer 1.8s ease-in-out infinite;
}

/* Dialog skeleton - message bubbles */
.skeleton-message {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  margin-bottom: var(--space-3);
}

.skeleton-message-left {
  flex-direction: row;
}

.skeleton-message-right {
  flex-direction: row-reverse;
}

.skeleton-message .skeleton-avatar {
  width: 36px;
  height: 36px;
}

.skeleton-message .skeleton-bubble {
  height: 36px;
  border-radius: var(--radius-2xl);
  flex: 1;
  max-width: 75%;
  background: linear-gradient(90deg, #F0F0F0 25%, #E8E8E8 50%, #F0F0F0 75%);
  background-size: 200% 100%;
  animation: skeletonShimmer 1.8s ease-in-out infinite;
}

.skeleton-message-right .skeleton-bubble {
  border-top-right-radius: var(--radius-sm);
}

.skeleton-message-left .skeleton-bubble {
  border-top-left-radius: var(--radius-sm);
}

.skeleton-menu {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin-top: var(--space-4);
}

.skeleton-menu-item {
  height: 54px;
  border-radius: var(--radius-lg);
  background: linear-gradient(90deg, #F0F0F0 25%, #E8E8E8 50%, #F0F0F0 75%);
  background-size: 200% 100%;
  animation: skeletonShimmer 1.8s ease-in-out infinite;
}

/* Dark mode skeleton */
body.dark-mode .skeleton,
body.dark-mode .skeleton-card,
body.dark-mode .skeleton-avatar,
body.dark-mode .skeleton-text,
body.dark-mode .skeleton-title,
body.dark-mode .skeleton-stat-item,
body.dark-mode .skeleton-bubble,
body.dark-mode .skeleton-menu-item {
  background: linear-gradient(90deg, #2A2A48 25%, #32325A 50%, #2A2A48 75%);
  background-size: 200% 100%;
}

/* ==================== 33. 无障碍 ==================== */

/* ==================== 34. Phase 1 Wave 1 新页面样式 ==================== */

/* Story Detail Page */
.page-story-detail { background: var(--bg-cream); min-height: 100vh; }
.sd-container { display: flex; flex-direction: column; min-height: 100vh; }
.sd-header { display: flex; align-items: center; justify-content: space-between; padding: var(--space-3) var(--space-4); background: rgba(255,255,255,0.92); backdrop-filter: blur(12px); position: sticky; top: 0; z-index: 100; border-bottom: 1px solid var(--border-light); }
.sd-back { width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; font-size: 1.4rem; cursor: pointer; border-radius: var(--radius-round); background: var(--bg-glass); }
.sd-title { font-size: var(--font-lg); font-weight: var(--weight-bold); }
.sd-body { flex: 1; padding: var(--space-4); padding-bottom: calc(5rem + env(safe-area-inset-bottom)); }
.sd-cover { border-radius: var(--radius-xl); overflow: hidden; margin-bottom: var(--space-4); box-shadow: var(--shadow-md); }
.sd-cover-img { width: 100%; display: block; }
.sd-meta { text-align: center; margin-bottom: var(--space-4); }
.sd-story-title { font-size: var(--font-2xl); font-weight: var(--weight-bold); color: var(--text-primary); margin-bottom: var(--space-2); }
.sd-date { font-size: var(--font-caption); color: var(--text-hint); }
.sd-topic-tag { display: inline-block; margin-top: var(--space-2); padding: var(--space-1) var(--space-3); background: var(--bg-glass); border-radius: var(--radius-full); font-size: var(--font-caption); color: var(--text-secondary); }
.sd-divider { height: 2px; background: linear-gradient(90deg, transparent, var(--primary-purple), transparent); margin: var(--space-4) 0; }
.sd-content { background: var(--bg-glass); border-radius: var(--radius-xl); padding: var(--space-5); border-left: 4px solid var(--primary-purple); box-shadow: var(--shadow-sm); }
.sd-text { font-size: var(--font-body); line-height: 2; color: var(--text-primary); white-space: pre-wrap; }
.sd-actions { display: flex; gap: var(--space-3); margin-top: var(--space-6); padding-bottom: var(--space-4); }
.sd-action-btn { flex: 1; display: flex; align-items: center; justify-content: center; gap: var(--space-2); min-height: 52px; background: var(--bg-glass); border: 2px solid var(--border-light); border-radius: var(--radius-full); font-size: var(--font-body); font-weight: var(--weight-bold); cursor: pointer; transition: all 0.2s; font-family: inherit; }
.sd-action-btn:active { transform: scale(0.96); }
.sd-action-btn.sd-share-btn { background: linear-gradient(135deg, var(--primary-purple) 0%, #B088E8 100%); color: #FFFFFF; border-color: transparent; }
.sd-action-icon { font-size: 1.2rem; }

/* Bind Phone Page */
.page-bind-phone { background: var(--bg-cream); min-height: 100vh; }
.bp-container { display: flex; flex-direction: column; min-height: 100vh; }
.bp-header { display: flex; align-items: center; justify-content: space-between; padding: var(--space-3) var(--space-4); background: rgba(255,255,255,0.92); position: sticky; top: 0; z-index: 100; }
.bp-back { width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; font-size: 1.4rem; cursor: pointer; border-radius: var(--radius-round); background: var(--bg-glass); }
.bp-title { font-size: var(--font-lg); font-weight: var(--weight-bold); }
.bp-body { flex: 1; padding: var(--space-6) var(--space-5); display: flex; flex-direction: column; align-items: center; }
.bp-icon-row { font-size: 4rem; margin-bottom: var(--space-4); }
.bp-desc { font-size: var(--font-body); color: var(--text-secondary); text-align: center; margin-bottom: var(--space-6); line-height: 1.6; }
.bp-form { width: 100%; max-width: 360px; display: flex; flex-direction: column; gap: var(--space-4); }
.bp-code-actions { display: flex; flex-direction: column; gap: var(--space-3); }
.btn-text { background: none; border: none; color: var(--text-hint); font-size: var(--font-body-sm); cursor: pointer; font-family: inherit; text-align: center; padding: var(--space-2); }
.btn-text:disabled { opacity: 0.5; cursor: default; }
.bp-success { text-align: center; padding: var(--space-8) var(--space-4); }
.bp-success-icon { font-size: 4rem; margin-bottom: var(--space-3); }
.bp-success-title { font-size: var(--font-2xl); font-weight: var(--weight-bold); color: var(--text-primary); margin-bottom: var(--space-2); }
.bp-success-desc { font-size: var(--font-body); color: var(--text-secondary); margin-bottom: var(--space-6); }

/* Invite Page */
.page-invite { background: var(--bg-cream); min-height: 100vh; }
.inv-container { display: flex; flex-direction: column; min-height: 100vh; }
.inv-header { display: flex; align-items: center; justify-content: space-between; padding: var(--space-3) var(--space-4); background: rgba(255,255,255,0.92); position: sticky; top: 0; z-index: 100; }
.inv-back { width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; font-size: 1.4rem; cursor: pointer; border-radius: var(--radius-round); background: var(--bg-glass); }
.inv-title { font-size: var(--font-lg); font-weight: var(--weight-bold); }
.inv-body { flex: 1; padding: var(--space-4) var(--space-5); padding-bottom: calc(5rem + env(safe-area-inset-bottom)); }
.inv-hero { text-align: center; padding: var(--space-6) 0 var(--space-4); }
.inv-hero-icon { font-size: 4rem; margin-bottom: var(--space-3); }
.inv-hero-title { font-size: var(--font-2xl); font-weight: var(--weight-bold); color: var(--text-primary); }
.inv-hero-desc { font-size: var(--font-body); color: var(--text-secondary); margin-top: var(--space-2); }
.inv-stats { display: flex; justify-content: center; gap: var(--space-6); padding: var(--space-4) 0; margin-bottom: var(--space-4); background: var(--bg-glass); border-radius: var(--radius-xl); }
.inv-stat { text-align: center; }
.inv-stat-val { font-size: var(--font-2xl); font-weight: var(--weight-bold); color: var(--primary-purple); }
.inv-stat-lbl { font-size: var(--font-caption); color: var(--text-hint); }
.inv-stat-div { width: 1px; background: var(--border-light); }
.inv-code-section { text-align: center; padding: var(--space-4); margin-bottom: var(--space-4); background: var(--bg-glass); border-radius: var(--radius-xl); border: 2px dashed var(--primary-purple); }
.inv-code-label { font-size: var(--font-caption); color: var(--text-hint); margin-bottom: var(--space-1); }
.inv-code-value { font-size: var(--font-2xl); font-weight: var(--weight-bold); color: var(--primary-purple); letter-spacing: 4px; font-family: monospace; }
.inv-actions { display: flex; gap: var(--space-3); margin-bottom: var(--space-6); }
.inv-btn-primary, .inv-btn-secondary { flex: 1; min-height: 52px; border: none; border-radius: var(--radius-full); font-size: var(--font-body); font-weight: var(--weight-bold); cursor: pointer; font-family: inherit; transition: all 0.2s; }
.inv-btn-primary { background: linear-gradient(135deg, var(--primary-purple) 0%, #B088E8 100%); color: #FFFFFF; box-shadow: 0 4px 16px rgba(147,112,219,0.3); }
.inv-btn-secondary { background: var(--bg-glass); color: var(--text-secondary); border: 2px solid var(--border-light); }
.inv-btn-primary:active, .inv-btn-secondary:active { transform: scale(0.96); }
.inv-records { margin-top: var(--space-4); }
.inv-records-title { font-size: var(--font-body-sm); font-weight: var(--weight-bold); color: var(--text-primary); margin-bottom: var(--space-3); }
.inv-record { display: flex; justify-content: space-between; padding: var(--space-3) var(--space-4); background: var(--bg-glass); border-radius: var(--radius-md); margin-bottom: var(--space-2); }
.inv-record-name { font-size: var(--font-body); color: var(--text-primary); }
.inv-record-status { font-size: var(--font-caption); color: var(--text-hint); }

/* Profile: account binding section */
.setting-status { font-size: var(--font-body-sm); color: var(--text-hint); }
.setting-desc { font-size: var(--font-caption); color: var(--text-hint); flex: 1; text-align: right; }

/* Dark mode for new pages */
body.dark-mode .sd-header, body.dark-mode .bp-header, body.dark-mode .inv-header { background: rgba(26,26,46,0.92); }
body.dark-mode .sd-content { background: #272741; }
body.dark-mode .sd-action-btn { background: #272741; border-color: #3A3A5A; color: #E0E0E0; }
body.dark-mode .page-story-detail,
body.dark-mode .page-bind-phone,
body.dark-mode .page-invite { background: #1A1A2E; }

/* ==================== 35. 儿童友好弹窗 (Child Modal) ==================== */
.child-modal-overlay {
  position: fixed; inset: 0;
  background: rgba(0,0,0,0.4);
  display: flex; align-items: center; justify-content: center;
  z-index: 10000;
  animation: modalFadeIn 0.25s ease;
  padding: var(--space-4);
}
@keyframes modalFadeIn { from { opacity: 0; } to { opacity: 1; } }
.child-modal-card {
  background: #FFFFFF;
  border-radius: var(--radius-3xl);
  padding: var(--space-6) var(--space-5);
  max-width: 320px; width: 100%;
  text-align: center;
  box-shadow: 0 20px 60px rgba(0,0,0,0.2);
  animation: modalBounceIn 0.4s cubic-bezier(0.34,1.56,0.64,1);
}
@keyframes modalBounceIn { from { transform: scale(0.8); opacity: 0; } to { transform: scale(1); opacity: 1; } }
.child-modal-icon { font-size: 3.5rem; margin-bottom: var(--space-3); }
.child-modal-title { font-size: var(--font-xl); font-weight: var(--weight-bold); color: var(--text-primary); margin-bottom: var(--space-2); }
.child-modal-message { font-size: var(--font-body); color: var(--text-secondary); margin-bottom: var(--space-5); line-height: 1.6; }
.child-modal-buttons { display: flex; gap: var(--space-3); }
.child-modal-btn {
  min-height: 52px; border: none; border-radius: var(--radius-full);
  font-size: var(--font-lg); font-weight: var(--weight-bold);
  cursor: pointer; transition: all var(--transition-bouncy);
  font-family: inherit;
}
.child-modal-btn:active { transform: scale(0.95); }
.child-modal-btn-primary {
  background: linear-gradient(135deg, var(--primary-purple) 0%, #B088E8 100%);
  color: #FFFFFF;
  box-shadow: 0 4px 16px rgba(147,112,219,0.3);
}
.child-modal-btn-secondary {
  background: var(--bg-glass);
  color: var(--text-secondary);
  border: 2px solid var(--border-light);
}

/* Baby mode child modal - even bigger */
body.baby-mode .child-modal-card { padding: var(--space-8) var(--space-6); max-width: 360px; }
body.baby-mode .child-modal-icon { font-size: 4.5rem; }
body.baby-mode .child-modal-title { font-size: var(--font-2xl); }
body.baby-mode .child-modal-message { font-size: var(--font-lg); }
body.baby-mode .child-modal-btn { min-height: 60px; font-size: var(--font-xl); }

/* ========== 低龄儿童专项优化 v4.1 ========== */

/* --- 优化 2: 语音入口强化 --- */
/* 语音按钮统一尺寸 >= 48×48px */
.voice-btn-circle { width: 56px; height: 56px; }
.dlg-clay-voice .voice-button .voice-btn-circle { width: 48px; height: 48px; }

/* 脉冲/呼吸动画（新用户引导） */
@keyframes voice-pulse {
  0%, 100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(255,107,107,0.7); }
  50% { transform: scale(1.1); box-shadow: 0 0 0 12px rgba(255,107,107,0); }
}
@keyframes voice-breathe {
  0%, 100% { box-shadow: 0 0 0 0 rgba(255,169,77,0.6); }
  50% { box-shadow: 0 0 0 16px rgba(255,169,77,0.1), 0 0 0 4px rgba(255,169,77,0.3); }
}
.voice-btn-newbie .voice-btn-circle {
  animation: voice-breathe 2.2s ease-in-out infinite;
}
.voice-btn-newbie .voice-btn-circle::after {
  content: '👆 按住说话';
  position: absolute;
  bottom: -28px;
  font-size: 12px;
  color: var(--color-orange, #FFA94D);
  font-weight: 700;
  white-space: nowrap;
  animation: hintFadeInOut 3s ease-in-out infinite;
}
@keyframes hintFadeInOut {
  0%, 100% { opacity: 0.3; transform: translateY(0); }
  50% { opacity: 1; transform: translateY(-4px); }
}

/* --- 优化 3: 操作反馈儿童化 --- */
@keyframes kidSuccessBounce {
  0% { transform: scale(0.3); opacity: 0; }
  50% { transform: scale(1.15); }
  70% { transform: scale(0.9); }
  100% { transform: scale(1); opacity: 1; }
}
@keyframes kidFailShake {
  0%, 100% { transform: translateX(0); }
  20% { transform: translateX(-8px); }
  40% { transform: translateX(8px); }
  60% { transform: translateX(-5px); }
  80% { transform: translateX(5px); }
}
.kid-toast {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: #FFFFFF;
  border-radius: var(--radius-3xl);
  padding: var(--space-6) var(--space-8);
  text-align: center;
  z-index: 99999;
  box-shadow: 0 20px 60px rgba(0,0,0,0.2);
  animation: kidSuccessBounce 0.5s cubic-bezier(0.34,1.56,0.64,1);
  max-width: 280px;
}
.kid-toast .kid-toast-emoji {
  font-size: 3rem;
  margin-bottom: var(--space-2);
  display: block;
  animation: kidSuccessBounce 0.6s cubic-bezier(0.34,1.56,0.64,1) 0.1s both;
}
.kid-toast .kid-toast-text {
  font-size: var(--font-lg);
  font-weight: var(--weight-bold);
  color: var(--text-primary);
}
.kid-toast-fail {
  animation: kidFailShake 0.5s ease;
}
.kid-toast-fail .kid-toast-emoji {
  animation: kidFailShake 0.6s ease 0.05s;
}
.kid-toast-retry-btn {
  display: inline-block;
  margin-top: var(--space-3);
  padding: var(--space-2) var(--space-6);
  background: linear-gradient(135deg, var(--primary-purple), #B088E8);
  color: #FFF;
  border: none;
  border-radius: var(--radius-full);
  font-size: var(--font-lg);
  font-weight: var(--weight-bold);
  cursor: pointer;
  min-height: 52px;
  min-width: 160px;
  font-family: inherit;
  transition: transform 0.15s ease;
}
.kid-toast-retry-btn:active { transform: scale(0.93); }

/* --- 优化 4: 简化颜色选择器 --- */
/* 涂鸦颜色圆 8 个核心色 + 大尺寸 */
.doodle-colors { gap: 12px; justify-content: center; flex-wrap: wrap; }
.doodle-color {
  width: 40px; height: 40px;
  border-radius: 50%;
  cursor: pointer;
  border: 3px solid transparent;
  transition: all 0.2s;
  box-shadow: 0 2px 6px rgba(0,0,0,0.12);
}
.doodle-color.active {
  border-color: var(--primary);
  transform: scale(1.3);
  box-shadow: 0 0 0 4px rgba(180,167,246,0.3);
}
.doodle-color:active { transform: scale(1.4); }

/* --- 优化 5: 防误触 --- */
/* 全局消除 300ms 点击延迟 */
html { touch-action: manipulation; }

/* 二次确认弹窗（已有 child-modal 基础上增强） */
.child-modal-btn {
  min-height: 44px;
  font-size: var(--font-lg);
}
body.baby-mode .child-modal-btn { min-height: 56px; }

/* 危险操作按钮视觉增强 */
.btn-danger {
  background: linear-gradient(135deg, #FF6B6B, #FF8E8E);
  color: #FFF;
  border: none;
  border-radius: var(--radius-full);
  padding: var(--space-3) var(--space-6);
  font-size: var(--font-lg);
  font-weight: var(--weight-bold);
  min-height: 52px;
  min-width: 120px;
  cursor: pointer;
  font-family: inherit;
  transition: transform 0.15s ease;
}
.btn-danger:active { transform: scale(0.93); }

/* --- 优化 6: 折叠说明 ? 图标 --- */
.help-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px; height: 32px;
  border-radius: 50%;
  background: rgba(180,167,246,0.15);
  color: var(--color-primary-dark, #8B7BE8);
  font-size: 1.1rem;
  font-weight: var(--weight-bold);
  cursor: pointer;
  border: none;
  transition: all 0.2s;
  font-family: inherit;
  flex-shrink: 0;
}
.help-toggle:active { transform: scale(0.9); background: rgba(180,167,246,0.25); }
.help-toggle.expanded { background: rgba(180,167,246,0.25); }
.help-detail {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.35s ease, padding 0.35s ease;
  background: rgba(180,167,246,0.06);
  border-radius: var(--radius-md);
  margin-top: 0;
  padding: 0 var(--space-3);
  font-size: var(--font-body-sm);
  color: var(--text-secondary);
  line-height: 1.6;
}
.help-detail.open {
  max-height: 200px;
  padding: var(--space-3);
  margin-top: var(--space-2);
}

/* 精简引导标签 */
.guide-short {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  font-size: var(--font-body);
  font-weight: var(--weight-semibold);
  color: var(--text-secondary);
}

/* Dark mode child modal */
body.dark-mode .child-modal-card { background: #272741; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* ==================== 36. 安全实用补丁 ==================== */
input, textarea, select, button {
  -webkit-appearance: none;
  appearance: none;
  border-radius: 0;
}
@media screen and (max-width: 480px) {
  input, textarea, select { font-size: 16px !important; }
}
@supports (padding-bottom: env(safe-area-inset-bottom)) {
  .tab-bar { padding-bottom: env(safe-area-inset-bottom); }
}

/* ==================== 焦点指示器 (v2.3 UX合规) ==================== */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
[tabindex]:focus-visible,
[role="button"]:focus-visible {
  outline: 3px solid var(--color-blue);
  outline-offset: 2px;
}

/* 自定义交互组件焦点指示 */
.tab-item:focus-visible,
.challenge-card:focus-visible,
.gallery-item:focus-visible,
.coc-item:focus-visible,
.clay-card:focus-visible,
.card-selectable:focus-visible,
.prompt-chip:focus-visible,
.style-option:focus-visible,
.length-option:focus-visible,
.doodle-style-card:focus-visible,
.cv4-grid-item:focus-visible,
.cv4-series-card:focus-visible,
.series-mini-card:focus-visible {
  outline: 3px solid var(--color-blue);
  outline-offset: 2px;
}

::-webkit-scrollbar { width: 4px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(0,0,0,0.1); border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: rgba(0,0,0,0.18); }

/* 旧版兼容类名 (向后兼容) */
.welcome-section { }
.stats-bar { }
.features-section { }
.feature-card { }
.feature-icon { }
.feature-name { }
.feature-desc { }
.recent-section { }
.recent-list { }
.recent-item { }
.recent-type { }
.recent-title { }
.recent-date { }
.recent-empty { }
.loading-spinner { text-align: center; padding: var(--space-8); color: var(--text-hint); font-size: var(--font-body-sm); }

/* ==================== Doodle Page (涂鸦作画) ==================== */
.page-doodle { background: #FFF9F5; min-height: 100vh; }
.doodle-container { display: flex; flex-direction: column; min-height: 100vh; }
.doodle-body { flex: 1; padding: var(--space-3) var(--space-4); padding-bottom: calc(5rem + env(safe-area-inset-bottom)); }

.doodle-canvas-section { margin-bottom: var(--space-3); }
.doodle-canvas-wrapper {
  position: relative; background: #FFFFFF;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md), 0 0 0 3px rgba(147,112,219,0.15);
  overflow: hidden; touch-action: none;
}
.doodle-canvas-wrapper canvas { display: block; cursor: crosshair; touch-action: none; }
.doodle-canvas-hint {
  position: absolute; top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  font-size: var(--font-body); color: #CCC;
  pointer-events: none; display: flex; align-items: center; gap: var(--space-1);
}

.doodle-toolbar {
  background: var(--bg-glass); border-radius: var(--radius-md);
  padding: var(--space-3); margin-bottom: var(--space-3);
  box-shadow: var(--shadow-sm);
}
.doodle-toolbar-row { display: flex; align-items: center; margin-bottom: var(--space-2); }
.doodle-toolbar-row:last-child { margin-bottom: 0; }
.doodle-colors { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.doodle-color {
  width: 28px; height: 28px; border-radius: 50%;
  cursor: pointer; border: 2px solid transparent;
  transition: all 0.2s; box-shadow: 0 1px 3px rgba(0,0,0,0.15);
}
/* White color needs a visible border so it's not invisible against white bg */
.doodle-color-white { border-color: #DDD !important; box-shadow: 0 1px 3px rgba(0,0,0,0.12), inset 0 0 0 1px #E5E5E5; }
.doodle-color.active { border-color: var(--primary); transform: scale(1.2); box-shadow: 0 0 0 2px var(--primary); }
.doodle-color:active { transform: scale(1.3); }
/* Dimmed colors during eraser mode */
.doodle-color.dimmed { opacity: 0.35; transform: scale(0.9); pointer-events: none; }

.doodle-brush-size { display: flex; align-items: center; gap: var(--space-2); flex: 1; }
.brush-label { font-size: var(--font-caption); color: var(--text-hint); }
.brush-slider { flex: 1; accent-color: var(--primary-purple); height: 6px; }

.doodle-actions { display: flex; gap: var(--space-2); }
.doodle-action-btn {
  padding: var(--space-1) var(--space-3); border: 1px solid var(--border-light);
  border-radius: var(--radius-full); background: var(--bg-glass);
  font-size: var(--font-caption); color: var(--text-secondary); cursor: pointer; transition: all 0.2s;
}
.doodle-action-btn:active { background: var(--bg-surface); transform: scale(0.95); }
.doodle-action-btn:disabled { opacity: 0.4; cursor: not-allowed; }
/* Eraser button active state */
.doodle-eraser-btn.active {
  background: #FFF3E0; border-color: #FF9800; color: #E65100;
  box-shadow: 0 0 0 3px rgba(255,152,0,0.2);
}
body.dark-mode .doodle-eraser-btn.active {
  background: rgba(255,152,0,0.2); border-color: #FF9800; color: #FFB74D;
}

.doodle-prompt-section { margin-bottom: var(--space-3); }
.doodle-prompt-input {
  width: 100%; padding: var(--space-3); border: 2px solid var(--border-light);
  border-radius: var(--radius-md); font-size: var(--font-body);
  font-family: inherit; background: var(--bg-glass); box-sizing: border-box; transition: border-color 0.2s;
}
.doodle-prompt-input:focus { outline: none; border-color: var(--primary-purple); box-shadow: 0 0 0 3px rgba(147,112,219,0.1); }

.doodle-styles-section { margin-bottom: var(--space-4); }
.doodle-styles-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-2); margin-top: var(--space-2); }
.doodle-style-card {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: var(--space-2) var(--space-1); background: var(--bg-glass);
  border: 2px solid var(--border-light); border-radius: var(--radius-md);
  cursor: pointer; transition: all 0.2s; gap: var(--space-1);
}
.doodle-style-card.active {
  border-color: var(--primary-purple);
  background: linear-gradient(135deg, rgba(147,112,219,0.1), rgba(176,136,232,0.1));
  box-shadow: 0 0 0 2px rgba(147,112,219,0.2); transform: translateY(-2px);
}
.doodle-style-card:active { transform: scale(0.95); }
.doodle-style-icon { font-size: 1.5rem; }
.doodle-style-name { font-size: var(--font-caption); color: var(--text-secondary); font-weight: 500; }
.doodle-style-card.active .doodle-style-name { color: var(--primary-purple); font-weight: 700; }

.create-card-doodle { background: linear-gradient(135deg, #FFF5F9 0%, #F5F3FF 100%); border-left: 4px solid #9370DB; }

/* ==================== 37. 通用 inline 样式收敛 (2026-05-21) ==================== */
/* 重构所有页面中的内联 style，统一收敛到 CSS 类 */

/* 27.1 文本容器 & 对齐 */
.tc { text-align: center; }
.tr { text-align: right; }
.tl { text-align: left; }

/* 27.2 超大图标 */
.icon-2xl { font-size: 1.8rem; }
.icon-3xl { font-size: 2.5rem; }
.icon-4xl { font-size: 3rem; }
.icon-5xl { font-size: 3.5rem; }
.icon-6xl { font-size: 4rem; }

/* 27.3 圆形图标容器 */
.avatar-circle {
  width: 64px; height: 64px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--bg-glass); box-shadow: var(--shadow-sm);
  flex-shrink: 0;
}
.avatar-circle-sm { width: 48px; height: 48px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: var(--bg-glass); flex-shrink: 0; }
.avatar-circle-lg { width: 80px; height: 80px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: var(--bg-glass); box-shadow: var(--shadow-clay-sm); flex-shrink: 0; }

/* 27.4 菜单行 (flex row with click) */
.menu-row {
  display: flex; align-items: center; justify-content: space-between;
  padding: var(--space-3) var(--space-4); min-height: 52px;
  cursor: pointer; transition: all var(--transition-base);
  border-bottom: 1px solid rgba(0,0,0,0.04);
}
.menu-row:last-child { border-bottom: none; }
.menu-row:active { background: rgba(0,0,0,0.02); }
.menu-label { font-size: var(--font-body); color: var(--text-primary); }
.menu-value { font-size: var(--font-caption); color: var(--text-hint); }
.menu-arrow { font-size: var(--font-title); color: var(--text-hint); }

/* 27.5 卡片菜单 (profile menu items) */
.card-menu-item {
  display: flex; align-items: center; justify-content: space-between;
  padding: var(--space-3) var(--space-4);
  background: rgba(255,255,255,0.72);
  border-radius: var(--radius-lg);
  cursor: pointer; transition: all var(--transition-base);
  min-height: 52px;
}
.card-menu-item:active { background: rgba(0,0,0,0.03); transform: scale(0.98); }

/* 27.6 间距占位块 */
.spacer-44 { width: 44px; min-width: 44px; }
.spacer-56 { width: 56px; min-width: 56px; }

/* 27.7 页首容器 - padding + bg-glass */
.section-glass {
  padding: var(--space-3) var(--space-4);
  background: rgba(255,255,255,0.72);
  border-radius: var(--radius-lg);
}

/* 27.8 主页欢迎区块 */
.welcome-block { text-align: center; padding: var(--space-5) var(--space-4) var(--space-3); }
.welcome-name { font-size: var(--font-title); font-weight: 700; color: var(--text-primary); }
.welcome-center-row {
  display: flex; align-items: center; justify-content: center;
  gap: var(--space-2); margin-top: var(--space-3);
}

/* 27.9 角色头像（大 emoji 圆） */
.char-avatar-big {
  font-size: 42px; width: 64px; height: 64px;
  display: flex; align-items: center; justify-content: center;
  background: rgba(255,255,255,0.72);
  border-radius: 50%; box-shadow: var(--shadow-sm);
}
.char-avatar-text { font-size: var(--font-body); color: var(--text-secondary); font-weight: 500; }

/* 27.10 统计卡片条目 */
.stat-card {
  flex: 1; text-align: center;
  background: rgba(255,255,255,0.72);
  border-radius: var(--radius-lg);
  padding: var(--space-3) var(--space-1);
  max-width: 80px;
}
.stat-card-wide { max-width: 100px; }
.stat-num { font-size: var(--font-title-sm); font-weight: 700; color: var(--text-primary); }
.stat-label { font-size: var(--font-caption); color: var(--text-hint); margin-top: var(--space-1); }

/* 27.11 统计行容器 */
.stats-row {
  display: flex; gap: var(--space-2); padding: 0 var(--space-3);
  margin-bottom: var(--space-4); justify-content: center;
}

/* 27.12 带悬停效果的功能卡片行 */
.feature-card-row {
  display: flex; align-items: center; gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  background: rgba(255,255,255,0.72);
  border-radius: var(--radius-lg); margin-bottom: var(--space-2);
  cursor: pointer; transition: transform 0.15s ease, box-shadow 0.15s ease;
  box-shadow: var(--shadow-sm);
}
.feature-card-row:active { transform: scale(0.97); box-shadow: var(--shadow-clay); }

/* 27.13 带渐变色背景的图标方块 */
.feature-icon-block {
  font-size: 36px; border-radius: var(--radius-lg);
  padding: var(--space-2); min-width: 52px; text-align: center;
  flex-shrink: 0;
}
.feature-icon-block.pink { background: linear-gradient(135deg, #FFF0F5, #FFE4E1); }
.feature-icon-block.green { background: linear-gradient(135deg, #F0FFF4, #E8F5E9); }
.feature-icon-block.purple { background: linear-gradient(135deg, #F3F0FF, #EDE7F6); }

/* 27.14 文本区域组合 */
.text-area-label { font-size: var(--font-title); font-weight: 700; color: var(--text-primary); }
.text-area-desc { font-size: var(--font-caption); color: var(--text-hint); margin-top: var(--space-1); }

/* 27.15 提交状态 - 成功/错误 */
.text-success { color: var(--color-green); font-size: var(--font-body-sm); }
.text-error { color: #FF6B6B; font-size: var(--font-body-sm); }
.text-link { color: var(--text-link); font-size: var(--font-body-sm); font-weight: var(--weight-semibold); }

/* 27.16 空心/幽灵按钮 */
.btn-ghost-full {
  display: flex; align-items: center; justify-content: center;
  padding: var(--space-3); min-height: 44px;
  border-radius: var(--radius-full);
  font-size: var(--font-body); font-weight: 600; cursor: pointer;
  width: 100%; background: transparent;
  border: 1px solid var(--danger); color: var(--danger);
}
.btn-ghost-full:active { background: rgba(255,0,0,0.05); }

/* 27.17 按钮标签通用 */
.btn-block { display: block; width: 100%; }
.btn-max-280 { max-width: 280px; margin: 0 auto; }
.btn-centered { margin: 0 auto var(--space-3); display: block; }

/* 27.18 表单标题组 + 错误 */
.form-error { color: #FF6B6B; font-size: var(--font-body-sm); margin-bottom: var(--space-2); display: none; }
.form-hint { font-size: var(--font-body-sm); color: var(--text-hint); text-align: center; }

/* 27.19 密码输入 */
.input-code {
  font-size: 1.25rem; text-align: center;
  letter-spacing: 4px; font-weight: 700;
}

/* 27.20 嵌套 flex 列 */
.flex-col-1 { display: flex; flex-direction: column; flex: 1; min-width: 0; }

/* 27.21 登录/注册弹窗 flex 行 */
.flex-row-gap2 { display: flex; align-items: center; gap: var(--space-2); }

/* 27.22 用户信息行 - header 区域 */
.user-header-row {
  display: flex; align-items: center; gap: var(--space-3);
  padding: var(--space-5) var(--space-4) var(--space-3);
}
.user-avatar-circle {
  width: 64px; height: 64px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 28px; color: white; flex-shrink: 0;
  background: linear-gradient(135deg, var(--color-purple-light), var(--color-purple));
}
.user-name { font-size: var(--font-title); font-weight: 700; color: var(--text-primary); }
.user-status { font-size: var(--font-caption); color: var(--text-hint); margin-top: 2px; }

/* 27.23 页面 section 容器含 padding */
.section-pad { padding: 0 var(--space-4); margin-bottom: var(--space-4); }
.section-pad-sm { padding: 0 var(--space-4); margin-bottom: var(--space-2); }

/* 27.24 小块占位容器 */
.placeholder-loading { text-align: center; padding: var(--space-4); color: var(--text-hint); font-size: var(--font-caption); }
.placeholder-empty { text-align: center; padding: var(--space-3); color: var(--text-hint); }

/* 27.25 设置等标题行 */
.setting-header-row {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: var(--space-2);
}
.setting-header-label { font-size: var(--font-body); font-weight: 600; color: var(--text-primary); }

/* 27.26 设置列表容器 */
.settings-list-group {
  background: rgba(255,255,255,0.72);
  border-radius: var(--radius-lg); overflow: hidden;
}

/* 27.27 设置行含标签内 switch */
.setting-row {
  display: flex; align-items: center; justify-content: space-between;
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid rgba(0,0,0,0.04);
}
.setting-row:last-child { border-bottom: none; }
.setting-row-label { font-size: var(--font-body); }

/* 27.28 水平网格行 */
.flex-2 { display: flex; gap: var(--space-3); }
.flex-2 > * { flex: 1; }

/* 27.29 滚动选择器按钮行 */
.scroll-btns { display: flex; gap: var(--space-3); margin-top: var(--space-1); }

/* 27.30 预览图片选中 */
.img-fit { width: 100%; height: 100%; object-fit: cover; }

/* 27.31 画廊空状态 */
.gallery-empty-inner {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: var(--space-8); text-align: center;
}
.gallery-empty-icon { font-size: 48px; margin-bottom: var(--space-3); }
.gallery-empty-title { font-size: var(--font-body); color: var(--text-secondary); margin-bottom: var(--space-1); }
.gallery-empty-desc { font-size: var(--font-caption); color: var(--text-hint); }

/* 27.32 历史作品缩略卡片 */
.history-thumb {
  cursor: pointer; border-radius: var(--radius-md);
  overflow: hidden; background: rgba(255,255,255,0.72);
}
.history-thumb-img-wrap {
  width: 100%; aspect-ratio: 1;
  background: var(--bg-cream);
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
}
.history-thumb-img { width: 100%; height: 100%; object-fit: cover; }
.history-thumb-label {
  padding: var(--space-1) var(--space-2);
  font-size: var(--font-caption); color: var(--text-secondary);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* 27.33 故事历史列表项 */
.story-history-item {
  display: flex; align-items: center; gap: var(--space-3);
  padding: var(--space-3);
  background: rgba(255,255,255,0.72);
  border-radius: var(--radius-md); cursor: pointer;
}
.story-history-icon { font-size: 1.5rem; }
.story-history-body { flex: 1; min-width: 0; }
.story-history-title { font-weight: var(--weight-bold); color: var(--text-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.story-history-summary { font-size: var(--font-caption); color: var(--text-hint); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.story-history-date { font-size: var(--font-caption); color: var(--text-hint); white-space: nowrap; }

/* 27.34 标题行文本 */
.section-title-block { padding: 0 0 var(--space-3); }

/* 27.35 渐变色按钮 - 用于 cp-submit 和绘画按钮 */
.btn-gradient-magic {
  display: flex; align-items: center; justify-content: center; gap: var(--space-2);
  width: 100%; padding: var(--space-4); min-height: 56px;
  background: var(--gradient-magic); border: none; border-radius: var(--radius-3xl);
  font-size: var(--font-subtitle); font-weight: var(--weight-extrabold); color: #FFFFFF;
  box-shadow: var(--shadow-glow-purple), 0 4px 16px rgba(180,167,246,0.3);
  cursor: pointer; transition: all var(--transition-bouncy);
  font-family: inherit;
}
.btn-gradient-magic:active { transform: scale(0.96); }
.btn-gradient-magic:disabled {
  background: linear-gradient(135deg, #CCC 0%, #DDD 100%);
  box-shadow: none; opacity: 0.6; cursor: not-allowed;
}

/* 27.36 分步表单步骤 */
.form-step-actions { display: flex; gap: var(--space-3); }

/* 27.37 验证码输入行 */
.code-input-row { text-align: center; margin-top: var(--space-1); margin-bottom: var(--space-3); }

/* 27.38 输入框大字体 */
.input-lg { font-size: 1rem; }

/* 27.39 居中 flex 列 */
.flex-col-items-center { display: flex; flex-direction: column; align-items: center; }

/* 27.40 空白占位垂直居中 */
.flex-col-center-full {
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  padding-top: var(--space-12);
}

/* 27.41 加载动画文字 */
.loading-animation-text { font-size: 3rem; margin-bottom: var(--space-3); }

/* 27.42 加载区 */
.loading-section { text-align: center; padding: var(--space-8); color: var(--text-hint); font-size: var(--font-body-sm); }

/* 27.43 登录区容器 */
.login-section {
  text-align: center; padding: var(--space-8) var(--space-4);
}
.login-icon { font-size: 64px; margin-bottom: var(--space-4); }
.login-title { font-size: var(--font-title); font-weight: 700; color: var(--text-primary); margin-bottom: var(--space-1); }
.login-desc { font-size: var(--font-caption); color: var(--text-hint); margin-bottom: var(--space-6); }
.login-btn-wrap { padding: var(--space-3) var(--space-6); max-width: 280px; margin: 0 auto; }

/* 27.44 分享弹窗内信息 */
.share-modal-info { font-size: var(--font-body-sm); color: var(--text-secondary); line-height: 1.6; margin-bottom: var(--space-4); }
.share-image-wrap {
  border-radius: var(--radius-lg); overflow: hidden; margin-bottom: var(--space-4);
  box-shadow: var(--shadow-clay);
}
.share-modal-link {
  font-size: var(--font-body-sm); color: var(--text-primary);
  font-weight: var(--weight-semibold); margin-bottom: var(--space-2); word-break: break-all;
}

/* 27.45 弹窗操作按钮组 */
.modal-btn-group { display: flex; flex-direction: column; gap: var(--space-2); }
.modal-btn-group .btn-primary,
.modal-btn-group .btn-secondary { width: 100%; }

/* 27.46 错误提示占位 */
.error-hide { display: none; }

/* 27.47 画廊标签栏 */
.gallery-tab-bar { display: flex; }

/* 27.48 画廊网格 */
.gallery-grid-auto {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: var(--space-3);
}

/* 27.49 画廊全宽网格项 */
.gal-full-col { grid-column: 1 / -1; text-align: center; padding: var(--space-8); color: var(--text-hint); }

/* 27.50 加载更多显示 */
.load-more-row { display: none; text-align: center; padding: var(--space-4); }
.load-more-text { color: var(--text-hint); font-size: var(--font-caption); }

/* 27.51 预览信息条 */
.preview-info-bar {
  position: absolute; bottom: var(--space-4);
  color: white; font-size: var(--font-body-sm); text-align: center;
  left: 0; right: 0;
}

/* ==================== v3.1 Phase 2-B：作品页改版 + 空状态插图 ==================== */

/* ── 28.0-C 新画廊页面容器 ── */
.page-gallery-v3 {
  background: linear-gradient(180deg, #F5F9FC 0%, #FFFDF7 100%) !important;
}

.gallery-v3-wrap {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}
/* Gallery voice replay button spacing */
.gallery-v3-wrap .page-voice-area {
  margin-top: var(--space-2);
  padding: 0 var(--space-4);
}

/* ── 28.0-B 分段控件 (Segmented Control) ── */
.seg-control {
  display: flex;
  gap: var(--space-1);
  padding: var(--space-4) var(--space-5) var(--space-2);
  background: rgba(255,255,255,0.88);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  position: sticky;
  top: 0;
  z-index: var(--z-sticky);
}

.seg-btn {
  flex: 1;
  padding: var(--space-3) var(--space-4);
  min-height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  border: none;
  border-radius: var(--radius-xl);
  font-size: var(--font-body);
  font-weight: var(--weight-semibold);
  color: var(--text-hint);
  background: #F3F4F6;
  cursor: pointer;
  transition: all var(--transition-bouncy);
  position: relative;
}

.seg-btn .seg-icon {
  font-size: 1.1em;
  transition: transform var(--transition-bouncy);
}

.seg-btn.active {
  background: #FFFFFF;
  color: var(--text-primary);
  box-shadow: 0 2px 12px rgba(0,0,0,0.08), 0 1px 3px rgba(0,0,0,0.04);
}

.seg-btn.active .seg-icon {
  transform: scale(1.15);
}

.seg-btn:active:not(.active) {
  background: #E5E7EB;
  transform: scale(0.97);
}

/* ── 28.0-A 类型过滤标签行 ── */
.type-filter-row {
  display: flex;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-5) var(--space-3);
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  background: rgba(255,255,255,0.88);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(0,0,0,0.04);
}

.type-filter-row::-webkit-scrollbar {
  display: none;
}

.type-filter-chip {
  flex-shrink: 0;
  padding: var(--space-2) var(--space-4);
  min-height: 44px;
  display: flex;
  align-items: center;
  border: none;
  border-radius: var(--radius-full);
  font-size: var(--font-body-sm);
  font-weight: var(--weight-semibold);
  color: var(--text-secondary);
  background: #F3F4F6;
  cursor: pointer;
  transition: all var(--transition-base);
}

.type-filter-chip.active {
  background: var(--color-purple);
  color: #FFFFFF;
  box-shadow: 0 2px 8px rgba(180,167,246,0.35);
}

.type-filter-chip:active:not(.active) {
  background: #E5E7EB;
}

/* ── 28.0 画廊v3 内容区 ── */
.gallery-v3-body {
  flex: 1;
  overflow-y: auto;
  padding: var(--space-3) var(--space-4) calc(7rem + env(safe-area-inset-bottom));
}

/* ── 28.1 画廊v3 大卡片网格 ── */
.gallery-v3-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-4);
}

.gal-v3-card {
  position: relative;
  border-radius: 18px;
  overflow: hidden;
  background: #FFFFFF;
  box-shadow: 0 2px 16px rgba(0,0,0,0.06), 0 1px 3px rgba(0,0,0,0.04);
  transition: all var(--transition-spring);
  cursor: default;
  animation: cardFadeUp 0.4s ease both;
}

.gal-v3-card:nth-child(2) { animation-delay: 0.05s; }
.gal-v3-card:nth-child(3) { animation-delay: 0.1s; }
.gal-v3-card:nth-child(4) { animation-delay: 0.15s; }

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

.gal-v3-card--clickable {
  cursor: pointer;
}

.gal-v3-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 24px rgba(0,0,0,0.10), 0 2px 8px rgba(0,0,0,0.06);
}

.gal-v3-card:active {
  transform: scale(0.97);
}

.gal-v3-card-body {
  display: flex;
  flex-direction: column;
}

/* 卡片图片区 */
.gal-v3-card-img-wrap {
  width: 100%;
  aspect-ratio: 1;
  overflow: hidden;
  position: relative;
  background: linear-gradient(135deg, #F8F6FF 0%, #FFF5F7 50%, #FFFDF7 100%);
}

.gal-v3-card-img-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--transition-slow);
}

.gal-v3-card:hover .gal-v3-card-img-wrap img {
  transform: scale(1.05);
}

.gal-v3-card-img-bg {
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(180,167,246,0.08), rgba(255,143,163,0.06));
  pointer-events: none;
}

.gal-v3-card-img-fallback {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 3rem;
  opacity: 0.4;
}

/* 故事卡片图标区 */
.gal-v3-card-img-wrap--story {
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #F0EFFF 0%, #FFE0E6 50%, #FFF9E0 100%);
}

.gal-v3-story-icon {
  font-size: 3.5rem;
  animation: floatSoft 2.5s ease-in-out infinite;
}

@keyframes floatSoft {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-6px); }
}

/* 卡片底部信息栏 */
.gal-v3-card-footer {
  padding: var(--space-3);
  display: flex;
  flex-direction: column;
  gap: 4px;
  border-top: 1px solid rgba(0,0,0,0.03);
}

.gal-v3-card-label {
  font-size: var(--font-body-sm);
  font-weight: var(--weight-bold);
  color: var(--text-primary);
  line-height: 1.3;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.gal-v3-card-comment {
  font-size: var(--font-caption);
  color: #8B7EC8;
  line-height: 1.5;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  font-style: italic;
}

/* 删除按钮 */
.gal-v3-card-delete {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0,0,0,0.35);
  border: none;
  border-radius: var(--radius-round);
  font-size: 13px;
  color: #FFFFFF;
  cursor: pointer;
  z-index: 2;
  transition: all var(--transition-base);
  opacity: 0;
  transform: scale(0.8);
}

.gal-v3-card:hover .gal-v3-card-delete,
.gal-v3-card:active .gal-v3-card-delete {
  opacity: 1;
  transform: scale(1);
}

.gal-v3-card-delete:active {
  background: rgba(255,0,0,0.6);
  transform: scale(1.15) !important;
}

/* ── 28.2 日记v3时间线 ── */
.diary-v3-timeline {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}

.diary-v3-day {
  animation: cardFadeUp 0.4s ease both;
}

/* 日期栏 */
.diary-v3-date-bar {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) 0;
  margin-bottom: var(--space-3);
}

.diary-v3-date-dot {
  width: 10px;
  height: 10px;
  border-radius: var(--radius-round);
  background: var(--color-purple);
  flex-shrink: 0;
  box-shadow: 0 0 0 4px rgba(180,167,246,0.15);
}

.diary-v3-date-label {
  font-size: var(--font-body);
  font-weight: var(--weight-extrabold);
  color: var(--text-primary);
}

.diary-v3-date-sub {
  font-size: var(--font-caption);
  color: var(--text-hint);
  margin-left: auto;
}

.diary-v3-date-count {
  font-size: var(--font-caption);
  color: var(--color-purple);
  background: #EDE7FF;
  padding: 2px 8px;
  border-radius: var(--radius-full);
  font-weight: var(--weight-semibold);
}

/* 日记作品卡片行 */
.diary-v3-cards {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.diary-v3-entry {
  display: flex;
  gap: var(--space-3);
  padding: var(--space-3);
  background: #FFFFFF;
  border-radius: 16px;
  box-shadow: 0 1px 8px rgba(0,0,0,0.04);
  position: relative;
  transition: all var(--transition-base);
}

.diary-v3-entry--milestone {
  background: linear-gradient(135deg, #FFFDF7 0%, #FFF0E0 100%);
  border: 2px solid rgba(255,169,77,0.3);
}

.diary-v3-entry:active {
  transform: scale(0.99);
  box-shadow: 0 1px 4px rgba(0,0,0,0.06);
}

.diary-v3-milestone-badge {
  position: absolute;
  top: -10px;
  right: 12px;
  font-size: var(--font-caption);
  color: #92400E;
  background: linear-gradient(135deg, #FFD43B, #FFA94D);
  padding: 2px 10px;
  border-radius: var(--radius-full);
  font-weight: var(--weight-bold);
  box-shadow: 0 2px 8px rgba(255,169,77,0.3);
}

/* 日记缩略图 */
.diary-v3-entry-thumb {
  width: 64px;
  height: 64px;
  border-radius: 12px;
  overflow: hidden;
  flex-shrink: 0;
  background: linear-gradient(135deg, #F8F6FF 0%, #FFF5F7 100%);
  position: relative;
}

.diary-v3-entry-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.diary-v3-entry-thumb-fallback {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.8rem;
  opacity: 0.4;
}

/* 日记内容 */
.diary-v3-entry-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.diary-v3-entry-type {
  font-size: var(--font-caption);
  color: var(--text-hint);
  font-weight: var(--weight-semibold);
}

.diary-v3-entry-comment {
  font-size: var(--font-body-sm);
  color: var(--text-primary);
  line-height: 1.5;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.diary-v3-entry-time {
  font-size: var(--font-caption);
  color: var(--text-hint);
  margin-top: 2px;
}

/* ── 28.3 空状态 SVG 插图 ── */
.empty-illustration {
  width: 200px;
  height: 160px;
  margin: 0 auto var(--space-4);
  animation: illusFloat 3s ease-in-out infinite;
}

.empty-illustration svg {
  width: 100%;
  height: 100%;
}

@keyframes illusFloat {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-8px); }
}

/* ── 28.4 响应式适配 ── */

/* 平板 */
@media (min-width: 600px) {
  .gallery-v3-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-5);
  }

  .gal-v3-card {
    border-radius: 20px;
  }

  .diary-v3-entry-thumb {
    width: 80px;
    height: 80px;
  }

  .empty-illustration {
    width: 240px;
    height: 192px;
  }
}

/* 桌面 */
@media (min-width: 1024px) {
  /* ===== Large tablet / desktop (v3.1.2) ===== */
  .page {
    max-width: 800px;
  }
  .tab-bar {
    max-width: 600px;
  }

  /* Larger touch targets for big screens */
  .btn, button[class*="btn"] {
    min-height: 48px;
  }
  .doodle-color { width: 44px; height: 44px; }
  .doodle-action-btn { min-height: 44px; min-width: 44px; padding: var(--space-2) var(--space-5); }

  /* Drawing: two-column layout on landscape */
  .drawing-body {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-4);
  }
  .drawing-prompt-section,
  .drawing-styles-section,
  .drawing-generate-btn,
  .drawing-history {
    grid-column: 1 / -1;
  }

  /* Doodle: wider canvas area */
  .doodle-body {
    max-width: 900px;
    margin: 0 auto;
  }
  .gallery-v3-grid {
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-6);
  }

  .gal-v3-card {
    border-radius: 24px;
  }

  .seg-control {
    max-width: 480px;
    margin: 0 auto;
    background: transparent;
    backdrop-filter: none;
  }

  .type-filter-row {
    justify-content: center;
  }

  .gallery-v3-body {
    max-width: 900px;
    margin: 0 auto;
  }

  .empty-illustration {
    width: 280px;
    height: 224px;
  }

  /* Challenge grid: 3 columns on big screens */
  .challenge-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-4);
  }

  /* Achievement: 5 columns */
  .achievement-grid {
    grid-template-columns: repeat(5, 1fr);
  }

  /* Gallery: 4 columns + wider body */
  .gallery-grid {
    grid-template-columns: repeat(4, 1fr);
  }

  /* Story detail: wider reader */
  .story-detail-body {
    max-width: 720px;
    margin: 0 auto;
  }

  /* Report page: wider */
  .report-container {
    max-width: 800px;
    margin: 0 auto;
  }
}

/* ==================== M1 创造力评估 (v3.0) ==================== */

/* 28.1 评估卡片 */
.assessment-card {
  animation: assessmentSlideUp 0.5s ease;
}
@keyframes assessmentSlideUp {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}

.assessment-icon { font-size: 2rem; margin-bottom: var(--space-2); }
.assessment-title { font-size: var(--font-subtitle); font-weight: 700; color: var(--color-primary); }
.assessment-title-sm { font-size: var(--font-body); font-weight: 600; color: var(--text-secondary); }

/* 28.2 评估维度徽章 */
.assessment-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 10px;
  border-radius: 12px;
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
}

/* 28.3 里程碑弹窗动画 */
@keyframes popIn {
  0% { transform: scale(0.3); opacity: 0; }
  50% { transform: scale(1.1); }
  100% { transform: scale(1); opacity: 1; }
}

@keyframes bounce {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-16px); }
}

@keyframes particleFly {
  0% { opacity: 1; transform: translate(0, 0) scale(1); }
  100% { opacity: 0; transform: translate(var(--px, 0), var(--py, -100px)) scale(0); }
}

/* 28.4 里程碑覆盖层 */
.milestone-overlay {
  animation: fadeIn 0.3s ease;
}
@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

.milestone-modal {
  position: relative;
  overflow: hidden;
}

/* 28.5 评估加载动画 */
.assessment-loading .assessment-icon {
  animation: pulse 1.5s ease-in-out infinite;
}
@keyframes pulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.2); }
}

/* ==================== M3 家长成长仪表盘 (v3.0) ==================== */

.page-dashboard {
  background: linear-gradient(180deg, #FFFDF7 0%, #FFF5F7 15%, #F0F7FF 50%, #FFFDF7 100%) !important;
  padding-bottom: 6rem;
}

.dashboard-container {
  max-width: 480px;
  margin: 0 auto;
  padding: 0;
}

/* ---- Loading & Error ---- */
.dashboard-loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 60vh;
  gap: var(--space-4);
}

.dash-loading-spinner {
  font-size: 3rem;
  animation: spin 1.5s linear infinite;
}
@keyframes spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

.dash-loading-text {
  font-size: var(--font-body);
  color: var(--text-hint);
  font-weight: 600;
}

.dash-error, .dash-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 60vh;
  padding: var(--space-8);
  text-align: center;
}

.dash-error-icon, .dash-empty-icon {
  font-size: 4rem;
  margin-bottom: var(--space-4);
}

.dash-error-title, .dash-empty-title {
  font-size: var(--font-title);
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: var(--space-2);
}

.dash-error-desc, .dash-empty-desc {
  font-size: var(--font-body-sm);
  color: var(--text-secondary);
  margin-bottom: var(--space-4);
}

.dash-retry-btn {
  padding: var(--space-3) var(--space-6);
  font-size: var(--font-body);
}

/* ---- Header ---- */
.dash-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-3) var(--space-4);
  background: rgba(255,255,255,0.85);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  position: sticky;
  top: 0;
  z-index: var(--z-sticky);
  border-bottom: 1px solid rgba(0,0,0,0.06);
  gap: var(--space-3);
}

.dash-header-left {
  flex: 1;
  min-width: 0;
}

.dash-header-title {
  font-size: var(--font-body);
  font-weight: 700;
  color: var(--text-primary);
  line-height: 1.3;
}

.dash-header-subtitle {
  font-size: var(--font-caption);
  color: var(--text-hint);
  line-height: 1.3;
}

/* Back to child mode button (pill style) */
.dash-back-child-btn {
  flex-shrink: 0;
  background: var(--gradient-warm);
  color: #FFF;
  border: none;
  border-radius: var(--radius-full);
  padding: 6px 14px;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  line-height: 1.3;
  text-align: center;
  min-height: 44px;
  min-width: 44px;
  box-shadow: 0 2px 8px rgba(255,143,163,0.3);
  transition: transform 0.2s, box-shadow 0.2s;
}
.dash-back-child-btn:active {
  transform: scale(0.95);
  box-shadow: 0 1px 4px rgba(255,143,163,0.2);
}

.dash-period-toggle {
  display: flex;
  gap: 4px;
  background: #F0F0F0;
  border-radius: var(--radius-full);
  padding: 2px;
}

.dash-period-btn {
  padding: 4px 12px;
  border: none;
  background: transparent;
  font-size: var(--font-caption);
  font-weight: 600;
  color: var(--text-secondary);
  border-radius: var(--radius-full);
  cursor: pointer;
  transition: all var(--transition-fast);
}

.dash-period-btn.active {
  background: #FFF;
  color: var(--color-purple);
  box-shadow: var(--shadow-clay-sm);
}

/* ---- Hero Card ---- */
.dash-hero {
  margin: var(--space-4);
  padding: var(--space-6);
  border-radius: var(--radius-2xl);
  text-align: center;
  color: #FFF;
  position: relative;
  overflow: hidden;
}

.dash-hero::before {
  content: '';
  position: absolute;
  top: -30px;
  right: -30px;
  width: 120px;
  height: 120px;
  border-radius: 50%;
  background: rgba(255,255,255,0.15);
}

.hero-milestone {
  background: linear-gradient(135deg, #FF8FA3, #B4A7F6);
}

.hero-progress {
  background: linear-gradient(135deg, #4ECDC4, #74C0FC);
}

.hero-streak {
  background: linear-gradient(135deg, #FFD43B, #FFA94D);
}

.hero-encourage {
  background: linear-gradient(135deg, #B4A7F6, #63E6BE);
}

.dash-hero-icon {
  font-size: 2.5rem;
  margin-bottom: var(--space-3);
}

.dash-hero-title {
  font-size: var(--font-subtitle);
  font-weight: 700;
  line-height: 1.4;
  margin-bottom: var(--space-2);
}

.dash-hero-subtitle {
  font-size: var(--font-body-sm);
  opacity: 0.85;
}

/* ---- Card ---- */
.dash-card {
  margin: var(--space-3) var(--space-4);
  padding: var(--space-4);
  background: #FFF;
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-clay);
}

.dash-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--space-4);
}

.dash-card-title {
  font-size: var(--font-subtitle);
  font-weight: 700;
  color: var(--text-primary);
}

.dash-card-link {
  font-size: var(--font-body-sm);
  color: var(--primary);
  font-weight: 600;
}

.dash-badge {
  font-size: var(--font-caption);
  padding: 2px 8px;
  border-radius: var(--radius-full);
  font-weight: 600;
}

.dash-badge-insufficient {
  background: #FFF0E0;
  color: #FFA94D;
}

.dash-badge-limited {
  background: #EDE7FF;
  color: #B4A7F6;
}

/* ---- Radar Chart ---- */
.dash-radar-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-3);
}

#radar-canvas {
  width: min(340px, 95vw);
  height: auto;
  aspect-ratio: 1;
  max-width: 100%;
}

.dash-radar-legend {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  justify-content: center;
  width: 100%;
}

.dash-radar-dim {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 4px 10px;
  background: #F8F8F8;
  border-radius: var(--radius-full);
  font-size: var(--font-caption);
  cursor: pointer;
  transition: all var(--transition-fast);
}

.dash-radar-dim:active {
  transform: scale(0.95);
  background: #EEE;
}

.dash-radar-color {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}

.dash-radar-name {
  color: var(--text-primary);
  font-weight: 600;
  white-space: nowrap;
}

.dash-radar-score {
  font-weight: 700;
  color: var(--text-primary);
}

.dash-radar-delta {
  font-size: 12px;
  color: var(--text-hint);
}

.dash-radar-delta.up {
  color: #69DB7C;
  font-weight: 600;
}

.dash-radar-delta.down {
  color: #FF6B6B;
}

.dash-radar-legend-line {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  margin-top: var(--space-3);
  font-size: var(--font-caption);
  color: var(--text-hint);
}

.legend-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  display: inline-block;
}

.legend-this-week { background: #FF6B6B; }
.legend-last-week { background: #A0A0A0; }
.legend-benchmark {
  border: 1.5px dashed #B0B0B0;
  background: transparent;
}

/* ---- Trend Chart ---- */
.dash-trend-periods {
  display: flex;
  gap: 4px;
  background: #F0F0F0;
  border-radius: var(--radius-full);
  padding: 2px;
}

.dash-trend-btn {
  padding: 2px 10px;
  border: none;
  background: transparent;
  font-size: var(--font-caption);
  font-weight: 600;
  color: var(--text-secondary);
  border-radius: var(--radius-full);
  cursor: pointer;
  transition: all var(--transition-fast);
}

.dash-trend-btn.active {
  background: #FFF;
  color: var(--color-purple);
  box-shadow: var(--shadow-clay-sm);
}

.dash-trend-dimensions {
  display: flex;
  gap: var(--space-2);
  margin-bottom: var(--space-3);
}

.dash-dim-btn {
  padding: 4px 14px;
  border: 1.5px solid #E0E0E0;
  background: #FFF;
  font-size: var(--font-caption);
  font-weight: 600;
  color: var(--text-secondary);
  border-radius: var(--radius-full);
  cursor: pointer;
  transition: all var(--transition-fast);
}

.dash-dim-btn.active {
  background: #6C5CE7;
  color: #FFF;
  border-color: #6C5CE7;
}

.dash-trend-container {
  display: flex;
  justify-content: center;
  position: relative;
}

#trend-canvas {
  width: 340px;
  height: 200px;
  max-width: 100%;
  display: block;
}

#dash-empty-trend {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 1;
  pointer-events: none;
}

.dash-trend-events {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-top: var(--space-3);
}

.dash-event-item {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 2px 10px;
  background: #F8F8F8;
  border-radius: var(--radius-full);
  font-size: var(--font-caption);
  color: var(--text-secondary);
}

.dash-event-icon {
  font-size: 14px;
}

.dash-event-date {
  color: var(--text-hint);
}

.dash-event-label {
  color: var(--text-primary);
  font-weight: 600;
}

/* ---- AI Insight ---- */
.dash-insight-card {
  background: linear-gradient(135deg, #F7F4FF, #F0F7FF);
  border: 1.5px solid #EDE7FF;
}

.dash-insight-text {
  font-size: var(--font-body);
  line-height: 1.8;
  color: var(--text-primary);
}
/* v3.1.3: Markdown sub-styles inside AI insight */
.dash-insight-text .md-p { margin: 0 0 0.6em; }
.dash-insight-text .md-p:last-child { margin-bottom: 0; }
.dash-insight-text .md-h4 {
  font-size: var(--font-body);
  font-weight: 700;
  color: var(--color-primary-dark, #5b21b6);
  margin: 1em 0 0.4em;
}
.dash-insight-text .md-ul {
  margin: 0.3em 0;
  padding-left: 1.2em;
  list-style: disc;
}
.dash-insight-text .md-li {
  margin-bottom: 0.2em;
  line-height: 1.6;
}

.dash-insight-footer {
  margin-top: var(--space-3);
  font-size: var(--font-caption);
  color: var(--text-hint);
  text-align: right;
}

/* ---- Artworks Grid ---- */
.dash-artworks-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-2);
}

.dash-artwork-item {
  text-align: center;
}

.dash-artwork-img {
  width: 100%;
  aspect-ratio: 1;
  border-radius: var(--radius-md);
  background: #F5F5F5;
  background-size: cover;
  background-position: center;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 4px;
}

.dash-artwork-title {
  font-size: var(--font-caption);
  color: var(--text-secondary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ---- Milestones ---- */
.dash-milestone-count {
  font-size: var(--font-body);
  font-weight: 700;
  color: var(--color-purple);
}

.dash-milestones-unlocked {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-bottom: var(--space-3);
}

.dash-milestones-locked {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-2);
  margin-bottom: var(--space-3);
}

.dash-milestone-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: var(--space-3);
  border-radius: var(--radius-md);
  text-align: center;
  gap: 4px;
}

.dash-milestone-item.unlocked {
  background: linear-gradient(135deg, #FFF9E0, #FFF0E0);
  border: 2px solid #FFD43B;
}

.dash-milestone-item.locked {
  background: #F5F5F5;
  border: 1.5px dashed #DDD;
}

.dash-milestone-icon {
  font-size: 1.8rem;
}

.dash-milestone-icon.locked-icon {
  opacity: 0.4;
  font-size: 1.5rem;
}

.dash-milestone-name {
  font-size: var(--font-caption);
  font-weight: 700;
  color: var(--text-primary);
}

.dash-milestone-date {
  font-size: 12px;
  color: var(--text-hint);
}

.dash-milestone-progress {
  width: 100%;
}

.dash-progress-bar {
  width: 100%;
  height: 4px;
  background: #E0E0E0;
  border-radius: 2px;
  overflow: hidden;
}

.dash-progress-fill {
  height: 100%;
  background: linear-gradient(90deg, #B4A7F6, #6C5CE7);
  border-radius: 2px;
  transition: width 0.5s ease;
}

.dash-milestone-encourage {
  text-align: center;
  font-size: var(--font-body-sm);
  color: var(--text-secondary);
  padding: var(--space-2);
  font-weight: 600;
}

/* ---- Suggestions ---- */
.dash-suggestions {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.dash-suggestion-item {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-3);
  background: #F8FBFF;
  border-radius: var(--radius-md);
  border-left: 3px solid var(--color-purple);
}

.dash-suggestion-icon {
  font-size: 1.5rem;
  flex-shrink: 0;
  margin-top: 2px;
}

.dash-suggestion-content {
  flex: 1;
}

.dash-suggestion-title {
  font-size: var(--font-body-sm);
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 2px;
}

.dash-suggestion-desc {
  font-size: var(--font-caption);
  color: var(--text-secondary);
  line-height: 1.5;
}

/* ---- Bottom Actions ---- */
.dash-actions {
  display: flex;
  gap: var(--space-3);
  padding: var(--space-4);
}

.dash-action-btn {
  flex: 1;
  padding: var(--space-3);
  border: none;
  border-radius: var(--radius-full);
  font-size: var(--font-body);
  font-weight: 700;
  color: #FFF;
  background: var(--gradient-magic);
  box-shadow: var(--shadow-glow-pink);
  cursor: pointer;
  transition: all var(--transition-base);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
}

.dash-action-btn:active {
  transform: scale(0.96);
}

/* ---- Footer ---- */
.dash-footer {
  text-align: center;
  padding: var(--space-4);
  margin-bottom: var(--space-6);
}

.dash-footer-text {
  font-size: var(--font-caption);
  color: var(--text-hint);
}

/* ---- Responsive ---- */
@media (max-width: 375px) {
  .dash-header {
    padding: var(--space-3) var(--space-3);
  }

  .dash-header-title {
    font-size: var(--font-body-sm);
  }

  .dash-hero {
    padding: var(--space-4);
  }

  .dash-card {
    margin: var(--space-2) var(--space-3);
    padding: var(--space-3);
  }

  #radar-canvas {
    width: 240px;
    height: 240px;
  }

  #trend-canvas {
    width: 280px;
    height: 160px;
  }

  .dash-dim-btn {
    padding: 3px 10px;
    font-size: 12px;
  }
}

/* ============================================================
   AI 创意教练 (M2) — Coach UI 组件样式
   v3.0 - 教练引导卡片、反馈卡片、每日建议
   ============================================================ */

/* 教练引导卡片 */
.coach-guidance-card {
  animation: coachSlideIn 0.4s ease;
}

@keyframes coachSlideIn {
  from { opacity: 0; transform: translateY(-10px); }
  to { opacity: 1; transform: translateY(0); }
}

/* 教练选项卡片 */
.coach-option-card {
  transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

.coach-option-card:hover {
  transform: translateY(-3px);
  border-color: var(--color-primary, #FF9A9E);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

.coach-option-card:active {
  transform: scale(0.97);
}

/* 教练反馈卡片 */
.coach-feedback-card {
  animation: coachFadeIn 0.5s ease;
}

@keyframes coachFadeIn {
  from { opacity: 0; transform: scale(0.95); }
  to { opacity: 1; transform: scale(1); }
}

/* 教练反馈操作按钮 */
.coach-feedback-actions .btn-primary,
.coach-feedback-actions .btn-secondary {
  font-size: var(--font-body-sm);
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-md);
  cursor: pointer;
  border: none;
  font-weight: 600;
}

.coach-feedback-actions .btn-primary {
  background: var(--color-primary, #FF9A9E);
  color: white;
}

.coach-feedback-actions .btn-secondary {
  background: var(--bg-glass);
  color: var(--text-secondary);
  border: 1px solid var(--border-color);
}

/* 跨模态建议按钮 */
.coach-cross-modal-btn {
  background: var(--color-primary, #FF9A9E);
  color: white;
  border: none;
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-md);
  font-size: var(--font-body-sm);
  font-weight: 600;
  cursor: pointer;
  transition: background 0.2s;
}

.coach-cross-modal-btn:hover {
  opacity: 0.9;
}

/* 每日建议项目 */
.coach-suggestion-item {
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

.coach-suggestion-item:hover {
  transform: translateY(-2px);
  border-color: var(--color-primary, #FF9A9E);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.coach-suggestion-item:active {
  transform: scale(0.97);
}

/* 跳过引导按钮 */
.coach-skip-btn {
  opacity: 0.6;
  transition: opacity 0.2s;
}

.coach-skip-btn:hover {
  opacity: 1;
}

/* ================================================================
   M5: 亲子共创模式 (co-creation)
   ================================================================ */

.page-cocreation {
  min-height: 100vh;
  background: linear-gradient(180deg, #FFFDF7 0%, #FFF5F7 50%, #FFFDF7 100%);
  padding-bottom: 90px;
}

.coc-wrapper {
  max-width: 480px;
  margin: 0 auto;
  padding: 0 16px;
}

/* ========== Co-Creation Banner (drawing/doodle page) ========== */
.coc-creation-banner {
  margin: 8px 12px;
  padding: 0;
}

.coc-creation-banner-inner {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  background: linear-gradient(135deg, #FFE0E6, #FFF0F3);
  border: 2px dashed #FF8FA3;
  border-radius: 16px;
  padding: 14px 16px;
  box-shadow: 0 2px 8px rgba(255, 143, 163, 0.15),
              inset 0 1px 0 rgba(255, 255, 255, 0.6);
}

.coc-creation-banner-icon {
  font-size: 28px;
  flex-shrink: 0;
  line-height: 1;
}

.coc-creation-banner-body {
  flex: 1;
  min-width: 0;
}

.coc-creation-banner-text {
  display: block;
  font-size: 16px;
  font-weight: 700;
  color: #D6336C;
  line-height: 1.4;
}

.coc-creation-banner-theme {
  display: inline-block;
  font-size: 13px;
  color: #FF8FA3;
  background: rgba(255, 143, 163, 0.12);
  border-radius: 8px;
  padding: 2px 10px;
  margin-top: 4px;
  font-weight: 600;
}

.coc-creation-guide-text {
  margin: 8px 0 0 0;
  font-size: 13px;
  color: #666;
  line-height: 1.5;
  background: rgba(255, 255, 255, 0.7);
  border-radius: 10px;
  padding: 8px 12px;
  border-left: 3px solid #FF8FA3;
}

/* Dark mode */
body.dark-mode .coc-creation-banner-inner {
  background: linear-gradient(135deg, #3d1e28, #2d1a22);
  border-color: #8b4a5e;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}
body.dark-mode .coc-creation-banner-text { color: #f0a0b5; }
body.dark-mode .coc-creation-banner-theme { color: #d4859a; background: rgba(212, 133, 154, 0.15); }
body.dark-mode .coc-creation-guide-text { color: #808080; background: rgba(255, 255, 255, 0.06); border-left-color: #8b4a5e; }

.coc-header {
  padding: 20px 0 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px;
}

.coc-title {
  font-size: 22px;
  font-weight: 700;
  color: #333;
  margin: 0;
}

.coc-header-actions {
  display: flex;
  gap: 8px;
}

.coc-nav-btn {
  padding: 6px 14px;
  border-radius: 20px;
  border: 1.5px solid #E8E8E8;
  background: #fff;
  font-size: 13px;
  color: #666;
  cursor: pointer;
  transition: all 0.2s;
  font-family: inherit;
}

.coc-nav-btn.active {
  background: #FF8FA3;
  color: #fff;
  border-color: #FF8FA3;
}

.coc-nav-btn:hover {
  border-color: #FF8FA3;
  color: #FF8FA3;
}

.coc-nav-btn.active:hover {
  color: #fff;
}

.coc-select-desc {
  color: #6A6A6A;
  font-size: 14px;
  line-height: 1.6;
  margin-bottom: 16px;
  text-align: center;
}

.coc-modes {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-bottom: 20px;
}

.coc-mode-card {
  border-radius: 16px;
  padding: 20px;
  cursor: pointer;
  transition: transform 0.2s, box-shadow 0.2s;
  border: 2px solid transparent;
}

.coc-mode-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(0,0,0,0.08);
}

.coc-mode-card:active {
  transform: scale(0.98);
}

.coc-mode-icon {
  font-size: 36px;
  margin-bottom: 8px;
}

.coc-mode-name {
  font-size: 18px;
  font-weight: 700;
  margin-bottom: 6px;
}

.coc-mode-desc {
  font-size: 13px;
  color: #6A6A6A;
  line-height: 1.5;
  margin-bottom: 10px;
}

.coc-mode-steps {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.coc-step-tag {
  font-size: 12px;
  padding: 3px 10px;
  border-radius: 12px;
  background: rgba(255,255,255,0.7);
  color: #666;
  white-space: nowrap;
}

.coc-tips-box {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  padding: 14px;
  border-radius: 12px;
  background: #FFF9E6;
  border: 1px solid #FFE8A0;
  margin-bottom: 16px;
}

.coc-tips-icon { font-size: 24px; flex-shrink: 0; }

.coc-tips-text {
  font-size: 13px;
  color: #8B6914;
  line-height: 1.6;
}

.coc-back-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
}

.coc-back-btn {
  padding: 6px 14px;
  border-radius: 20px;
  border: none;
  background: #f0f0f0;
  font-size: 13px;
  color: #666;
  cursor: pointer;
  font-family: inherit;
  transition: background 0.2s;
}

.coc-back-btn:hover { background: #e0e0e0; }

.coc-mode-badge {
  padding: 4px 12px;
  border-radius: 12px;
  color: #fff;
  font-size: 12px;
  font-weight: 600;
}

.coc-guide-card-wrapper { text-align: center; }

/* ===== AI 内嵌灵感区（合并在引导卡片下方） ===== */
.coc-ai-inline {
  margin-top: 16px;
  padding: 14px 16px;
  background: linear-gradient(135deg, #F5F0FF, #EDE7FF);
  border-radius: 14px;
  border: 1px solid rgba(139, 92, 246, 0.15);
}

.coc-ai-inline-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
}

.coc-ai-inline-header span:first-child {
  font-size: 14px;
  font-weight: 700;
  color: #7C3AED;
}

.coc-ai-inline-hint {
  font-size: 12px;
  color: #9CA3AF;
}

.coc-ai-inline-cards {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding: 6px 0;
  margin-top: 8px;
  scrollbar-width: none;
}

.coc-ai-inline-cards::-webkit-scrollbar { display: none; }

.coc-ai-inline-card {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 12px;
  background: #FFFFFF;
  border-radius: 20px;
  border: 1.5px solid #E5E7EB;
  cursor: pointer;
  transition: all 0.15s;
  white-space: nowrap;
}

.coc-ai-inline-card.active {
  border-color: #7C3AED;
  background: #F5F0FF;
  box-shadow: 0 2px 8px rgba(124, 58, 237, 0.15);
}

.coc-ai-inline-card:hover { border-color: #C4B5FD; }

.coc-ai-inline-card-icon { font-size: 18px; }

.coc-ai-inline-card-text {
  font-size: 13px;
  font-weight: 600;
  color: #374151;
}

.coc-ai-inline-card-check {
  font-size: 12px;
  color: #7C3AED;
  font-weight: 600;
}

.coc-ai-inline-loading {
  text-align: center;
  padding: 8px;
  font-size: 13px;
  color: #6B7280;
}

.coc-card-source-row-inline {
  margin-left: auto;
}

body.dark-mode .coc-ai-inline {
  background: linear-gradient(135deg, #1E1240, #251845);
  border-color: rgba(139, 92, 246, 0.2);
}
body.dark-mode .coc-ai-inline-card {
  background: #1F1F3A;
  border-color: #3A3A5C;
}
body.dark-mode .coc-ai-inline-card.active {
  border-color: #8B5CF6;
  background: #2D1F4E;
}
body.dark-mode .coc-ai-inline-card-text { color: #D1D5DB; }

/* ===== Two-Column Layout: 精选卡片 + AI 工坊 ===== */
.coc-two-column {
  display: flex;
  gap: 16px;
  align-items: stretch;
}

.coc-two-column .coc-guide-col {
  flex: 1 1 38%;
  min-width: 280px;
  display: flex;
  flex-direction: column;
}

.coc-two-column .coc-ai-workshop {
  flex: 1 1 62%;
  min-width: 320px;
}

@media (max-width: 640px) {
  .coc-two-column {
    flex-direction: column;
  }
}

/* ===== P1: 精选引导卡片分组 ===== */
.coc-guide-section {
  background: #FFFFFF;
  border-radius: 20px;
  padding: 20px 18px 16px;
  margin-bottom: 20px;
  box-shadow:
    0 4px 20px rgba(0, 0, 0, 0.05),
    0 -1px 6px rgba(255, 255, 255, 0.6),
    inset 0 1px 0 rgba(255, 255, 255, 0.7);
  border: 1px solid rgba(0, 0, 0, 0.05);
}

.coc-guide-section-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
  padding-bottom: 10px;
  border-bottom: 1px solid #F0F0F0;
}

.coc-guide-section-icon {
  font-size: 22px;
  line-height: 1;
}

.coc-guide-section-title {
  font-size: 16px;
  font-weight: 700;
  color: #444;
}

body.dark-mode .coc-guide-section {
  background: #272741;
  border-color: rgba(255, 255, 255, 0.06);
}

body.dark-mode .coc-guide-section-header {
  border-bottom-color: rgba(255, 255, 255, 0.08);
}

body.dark-mode .coc-guide-section-title {
  color: #E0E0E0;
}

.coc-card-pagination {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 12px;
  color: #707070 
  margin-bottom: 12px;
  padding: 0 4px;
}

.coc-card-category {
  padding: 2px 10px;
  border-radius: 10px;
  background: #f5f5f5;
}

.coc-guide-card {
  background: #fff;
  border-radius: 20px;
  box-shadow: 0 4px 20px rgba(0,0,0,0.06);
  overflow: hidden;
  margin-bottom: 16px;
}

.coc-guide-card-inner {
  padding: 28px 24px 20px;
  background: linear-gradient(135deg, #FFE0E6 0%, #FFF5F7 100%);
}

.coc-guide-card-quote { font-size: 32px; margin-bottom: 12px; }

.coc-guide-card-text {
  font-size: 17px;
  color: #444;
  line-height: 1.8;
  font-weight: 500;
}

.coc-guide-card-meta {
  display: flex;
  justify-content: center;
  gap: 12px;
  padding: 10px 20px 14px;
  flex-wrap: wrap;
}

.coc-meta-tag { font-size: 12px; color: #707070  }

.coc-guide-card-tips {
  padding: 10px 20px 16px;
  font-size: 12px;
  color: #FF8C42;
  text-align: center;
  background: #FFF9F0;
  border-top: 1px solid #FFF0E0;
}

.coc-guide-actions {
  display: flex;
  gap: 10px;
  justify-content: center;
  margin-bottom: 16px;
}

.coc-btn-secondary {
  padding: 10px 24px;
  border-radius: 24px;
  border: 1.5px solid #ddd;
  background: #fff;
  font-size: 14px;
  color: #666;
  cursor: pointer;
  font-family: inherit;
  transition: all 0.2s;
}

.coc-btn-secondary:hover:not(:disabled) { border-color: #FF8FA3; color: #FF8FA3; }

.coc-btn-secondary:disabled { opacity: 0.4; cursor: not-allowed; }

.coc-btn-primary {
  padding: 10px 24px;
  border-radius: 24px;
  border: none;
  background: linear-gradient(135deg, #FF9A9E, #FF8FA3);
  font-size: 14px;
  color: #fff;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
  transition: transform 0.2s, box-shadow 0.2s;
}

.coc-btn-primary:hover { transform: translateY(-1px); box-shadow: 0 4px 12px rgba(255,143,163,0.3); }

.coc-btn-primary:active { transform: scale(0.97); }

.coc-guide-session-actions {
  margin-bottom: 16px;
  display: flex;
  justify-content: stretch;
}

.coc-guide-session-actions .coc-btn-start {
  width: 100%;
}

.coc-btn-start {
  padding: 14px 40px;
  border-radius: 28px;
  border: none;
  background: linear-gradient(135deg, #6C5CE7, #a29bfe);
  font-size: 16px;
  color: #fff;
  font-weight: 700;
  cursor: pointer;
  font-family: inherit;
  transition: transform 0.2s, box-shadow 0.2s;
  box-shadow: 0 4px 16px rgba(108,92,231,0.3);
}

.coc-btn-start:hover { transform: translateY(-2px); box-shadow: 0 6px 20px rgba(108,92,231,0.4); }

.coc-btn-start:active { transform: scale(0.96); }

/* ===== TASK-5: 卡片来源标签 ===== */
.coc-card-source-row {
  display: flex;
  justify-content: center;
  margin-bottom: 8px;
}

.coc-card-source-tag {
  display: inline-block;
  padding: 4px 14px;
  border-radius: 12px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.5px;
}

.coc-card-source-tag.preset {
  background: #F0F4FF;
  color: #6C5CE7;
}

.coc-card-source-tag.ai {
  background: linear-gradient(135deg, #EDE7FF, #F5F0FF);
  color: #7C3AED;
  box-shadow: 0 1px 4px rgba(124,58,237,0.15);
}

/* ===== TASK-6: AI 卡片横向缩略图选择区 ===== */
.coc-ai-thumbnails-section {
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px dashed #E8E0F0;
}

.coc-ai-thumbnails-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
  font-size: 12px;
  color: #6A6A6A;
}

.coc-ai-thumbnails-hint {
  font-size: 12px;
  color: #808080;
}

.coc-ai-thumbnails-scroll {
  display: flex;
  gap: 10px;
  overflow-x: auto;
  padding: 4px 0 8px;
  -webkit-overflow-scrolling: touch;
  scroll-behavior: smooth;
  scrollbar-width: none;
}

.coc-ai-thumbnails-scroll::-webkit-scrollbar {
  display: none;
}

.coc-ai-thumbnail-card {
  flex: 0 0 auto;
  width: 120px;
  min-height: 80px;
  border-radius: 12px;
  border: 2px solid #E8E0F0;
  background: #FAF8FF;
  padding: 10px;
  cursor: pointer;
  transition: all 0.2s ease;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.coc-ai-thumbnail-card:hover {
  border-color: #A78BFA;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(124,58,237,0.12);
}

.coc-ai-thumbnail-card.active {
  border-color: #7C3AED;
  background: linear-gradient(135deg, #EDE7FF, #F5F0FF);
  box-shadow: 0 3px 12px rgba(124,58,237,0.2);
}

.coc-ai-thumbnail-number {
  font-size: 12px;
  font-weight: 700;
  color: #A78BFA;
}

.coc-ai-thumbnail-card.active .coc-ai-thumbnail-number {
  color: #7C3AED;
}

.coc-ai-thumbnail-text {
  font-size: 12px;
  color: #555;
  line-height: 1.4;
  flex: 1;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.coc-ai-thumbnail-category {
  font-size: 12px;
  color: #707070 
}

/* ===== AI 生成按钮加载态 ===== */
.coc-ai-generate-wrap {
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid #f0f0f0;
}

.coc-ai-generate-btn {
  display: block;
  width: 100%;
  padding: 12px 16px;
  border-radius: 24px;
  border: 1.5px dashed #A78BFA;
  background: linear-gradient(135deg, #F8F6FF, #EDE7FF);
  font-size: 14px;
  color: #7C3AED;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
  transition: all 0.2s;
}

.coc-ai-generate-btn:hover:not(:disabled) {
  border-color: #7C3AED;
  background: linear-gradient(135deg, #EDE7FF, #DDD6FE);
  transform: translateY(-1px);
}

.coc-ai-generate-btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.coc-ai-generate-hint {
  display: block;
  margin-top: 8px;
  font-size: 12px;
  color: #808080;
  text-align: center;
}

.coc-rounds-intro {
  text-align: center;
  margin-bottom: 16px;
}

.coc-rounds-intro h3 { font-size: 18px; color: #444; margin: 0 0 6px; }

.coc-rounds-intro p { font-size: 13px; color: #707070  margin: 0; }

.coc-rounds-list {
  background: #fff;
  border-radius: 16px;
  padding: 16px;
  box-shadow: 0 2px 12px rgba(0,0,0,0.04);
  margin-bottom: 16px;
}

.coc-round {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px;
  border-radius: 12px;
  background: #fafafa;
}

.coc-round:hover { background: #f5f5f5; }

.coc-round-num {
  width: 32px;
  height: 32px;
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: 700;
  color: #fff;
  background: linear-gradient(135deg, #6C5CE7, #a29bfe);
  flex-shrink: 0;
}

.coc-round-content { flex: 1; }

.coc-round-actor { font-size: 13px; font-weight: 600; margin-bottom: 2px; }

.coc-round-actor.parent { color: #6C5CE7; }
.coc-round-actor.child { color: #FF8FA3; }
.coc-round-actor.ai { color: #FF8C42; }

.coc-round-desc { font-size: 12px; color: #707070  }

.coc-round-status { font-size: 18px; }

.coc-round-arrow { text-align: center; color: #ddd; font-size: 18px; padding: 2px 0; }

.coc-alternating-actions, .coc-free-actions {
  text-align: center;
  margin-bottom: 16px;
}

.coc-free-intro { text-align: center; margin-bottom: 16px; }

.coc-free-intro h3 { font-size: 18px; color: #444; margin: 0 0 6px; }

.coc-free-intro p { font-size: 13px; color: #707070  margin: 0; }

.coc-free-suggestions {
  background: #fff;
  border-radius: 16px;
  padding: 16px;
  box-shadow: 0 2px 12px rgba(0,0,0,0.04);
  margin-bottom: 16px;
}

.coc-free-step {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 8px;
  border-bottom: 1px solid #f5f5f5;
}

.coc-free-step:last-child { border-bottom: none; }

.coc-free-step-num {
  width: 28px;
  height: 28px;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 700;
  color: #FF8C42;
  background: #FFF0E6;
  flex-shrink: 0;
}

.coc-free-step-icon { font-size: 24px; flex-shrink: 0; }

.coc-free-step-desc { font-size: 14px; color: #555; }

.coc-active-session {
  background: #fff;
  border-radius: 16px;
  padding: 16px;
  box-shadow: 0 2px 12px rgba(0,0,0,0.06);
  margin-bottom: 16px;
  border: 2px solid #E8F5E9;
}

.coc-session-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
  flex-wrap: wrap;
  gap: 6px;
}

.coc-session-badge {
  padding: 4px 12px;
  border-radius: 12px;
  font-size: 13px;
  font-weight: 600;
  background: #E8F5E9;
  color: #2E7D32;
}

.coc-session-time { font-size: 12px; color: #707070  }

.coc-session-actions { display: flex; gap: 10px; }

.coc-btn-complete {
  flex: 1;
  padding: 10px;
  border-radius: 12px;
  border: none;
  background: #4CAF50;
  color: #fff;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
  transition: background 0.2s;
}

.coc-btn-complete:hover { background: #43A047; }

.coc-btn-cancel {
  flex: 1;
  padding: 10px;
  border-radius: 12px;
  border: 1.5px solid #ddd;
  background: #fff;
  color: #707070 
  font-size: 14px;
  cursor: pointer;
  font-family: inherit;
  transition: all 0.2s;
}

.coc-btn-cancel:hover { border-color: #E57373; color: #E57373; }

.coc-loading { text-align: center; padding: 60px 20px; }

.coc-loading-spinner {
  font-size: 48px;
  animation: cocSpin 1s linear infinite;
  margin-bottom: 12px;
}

@keyframes cocSpin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

.coc-loading-text { font-size: 14px; color: #707070  }

.coc-error, .coc-empty { text-align: center; padding: 60px 20px; }

.coc-error-icon, .coc-empty-icon { font-size: 48px; margin-bottom: 12px; }

.coc-error-title, .coc-empty-title { font-size: 16px; font-weight: 600; color: #555; margin-bottom: 6px; }

.coc-error-desc, .coc-empty-desc { font-size: 13px; color: #707070  }

.coc-retry-btn {
  margin-top: 16px;
  padding: 10px 24px;
  border-radius: 24px;
  border: none;
  background: #FF8FA3;
  color: #fff;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
}

.coc-history-stats { display: flex; gap: 12px; margin-bottom: 16px; }

.coc-stat-item {
  flex: 1;
  text-align: center;
  padding: 14px 8px;
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 2px 8px rgba(0,0,0,0.04);
}

.coc-stat-num { font-size: 24px; font-weight: 700; color: #FF8FA3; margin-bottom: 2px; }

.coc-stat-label { font-size: 12px; color: #707070  }

.coc-history-list { display: flex; flex-direction: column; gap: 10px; }

.coc-history-item { background: #fff; border-radius: 12px; padding: 14px; box-shadow: 0 2px 8px rgba(0,0,0,0.04); }

.coc-history-left { display: flex; gap: 12px; align-items: flex-start; }

.coc-history-icon { font-size: 28px; flex-shrink: 0; }

.coc-history-info { flex: 1; }

.coc-history-mode { font-size: 15px; font-weight: 600; color: #444; }

.coc-history-theme {
  font-size: 12px; color: #707070  margin: 2px 0 4px;
  max-width: 260px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

.coc-history-meta { display: flex; gap: 8px; font-size: 12px; color: #808080; align-items: center; }

.coc-history-status { padding: 1px 8px; border-radius: 8px; font-size: 12px; }

.coc-history-status.completed { background: #E8F5E9; color: #2E7D32; }

.coc-history-status.cancelled { background: #FFF0F0; color: #CC3333; }

.coc-history-note { margin-top: 8px; font-size: 12px; color: #6A6A6A; font-style: italic; padding-left: 40px; }

.coc-inspirations-grid { display: flex; flex-direction: column; gap: 12px; }

.coc-inspiration-card {
  background: #fff;
  border-radius: 16px;
  padding: 16px;
  box-shadow: 0 2px 12px rgba(0,0,0,0.04);
  cursor: pointer;
  transition: transform 0.2s, box-shadow 0.2s;
  border: 2px solid transparent;
}

.coc-inspiration-card:hover { transform: translateY(-2px); box-shadow: 0 6px 20px rgba(0,0,0,0.08); border-color: #FF8FA3; }

.coc-inspiration-card:active { transform: scale(0.98); }

.coc-insp-icon { font-size: 36px; margin-bottom: 8px; }

.coc-insp-title { font-size: 16px; font-weight: 600; color: #444; margin-bottom: 4px; }

.coc-insp-desc { font-size: 13px; color: #6A6A6A; line-height: 1.5; margin-bottom: 10px; }

.coc-insp-meta { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 8px; }

.coc-insp-tag { font-size: 12px; color: #707070  padding: 2px 8px; background: #f5f5f5; border-radius: 8px; }

.coc-insp-tags { display: flex; gap: 6px; flex-wrap: wrap; }

.coc-insp-tag-small { font-size: 12px; color: #808080; }

.coc-toast {
  position: fixed;
  top: 80px;
  left: 50%;
  transform: translateX(-50%) translateY(-20px);
  background: rgba(0,0,0,0.8);
  color: #fff;
  padding: 10px 24px;
  border-radius: 24px;
  font-size: 14px;
  font-weight: 500;
  z-index: 9999;
  opacity: 0;
  transition: all 0.3s ease;
  pointer-events: none;
}

.coc-toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

/* ========== AI 灵感工坊 (AI Inspiration Workshop) ========== */

.coc-ai-workshop {
  background: linear-gradient(135deg, #F3F0FF 0%, #FFE0E6 100%);
  border-radius: 20px;
  padding: 20px 18px;
  margin-bottom: 20px;
  box-shadow:
    0 4px 20px rgba(180, 167, 246, 0.15),
    0 -1px 6px rgba(255, 255, 255, 0.6),
    inset 0 1px 0 rgba(255, 255, 255, 0.7);
  border: 1px solid rgba(180, 167, 246, 0.2);
  position: relative;
  overflow: hidden;
}

.coc-ai-workshop::before {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  width: 120px;
  height: 120px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(180, 167, 246, 0.12), transparent 70%);
  pointer-events: none;
}

.coc-ai-workshop-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 8px;
  position: relative;
  z-index: 1;
}

.coc-ai-workshop-header .coc-ai-icon {
  font-size: 28px;
  line-height: 1;
}

.coc-ai-workshop-header .coc-ai-title {
  font-size: 18px;
  font-weight: 700;
  color: #5B21B6;
}

.coc-ai-workshop-desc {
  font-size: 13px;
  color: #7C6BA0;
  line-height: 1.6;
  margin-bottom: 16px;
  position: relative;
  z-index: 1;
}

/* AI 卡片横向滚动容器 */
.coc-ai-cards-scroll {
  display: flex;
  gap: 12px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  padding: 8px 0;
  scrollbar-width: none;
  margin-bottom: 16px;
  position: relative;
  z-index: 1;
}

.coc-ai-cards-scroll::-webkit-scrollbar {
  display: none;
}

/* 单张 AI 灵感卡片 */
.coc-ai-card {
  flex-shrink: 0;
  scroll-snap-align: start;
  width: 150px;
  min-height: 140px;
  background: #FFFFFF;
  border-radius: 16px;
  padding: 14px 12px;
  box-shadow:
    0 3px 12px rgba(0, 0, 0, 0.06),
    0 -1px 4px rgba(255, 255, 255, 0.6),
    inset 0 1px 0 rgba(255, 255, 255, 0.7);
  display: flex;
  flex-direction: column;
  align-items: center;
  cursor: pointer;
  transition: all 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
  border: 2px solid transparent;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}

.coc-ai-card:active {
  transform: scale(0.95);
  box-shadow: 0 1px 6px rgba(0, 0, 0, 0.06), inset 0 2px 6px rgba(0, 0, 0, 0.05);
}

.coc-ai-card:hover {
  transform: translateY(-2px);
  border-color: rgba(180, 167, 246, 0.3);
  box-shadow:
    0 6px 18px rgba(180, 167, 246, 0.12),
    0 -1px 4px rgba(255, 255, 255, 0.6);
}

.coc-ai-card-icon {
  font-size: 36px;
  line-height: 1;
  margin-bottom: 8px;
}

.coc-ai-card-title {
  font-size: 14px;
  font-weight: 700;
  color: #333;
  text-align: center;
  line-height: 1.3;
  margin-bottom: 6px;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.coc-ai-card-meta {
  font-size: 12px;
  color: #707070 
  text-align: center;
  line-height: 1.4;
  margin-bottom: 8px;
}

.coc-ai-card-btn {
  margin-top: auto;
  font-size: 12px;
  font-weight: 600;
  color: #667eea;
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 4px 8px;
  border-radius: 8px;
  transition: all 0.2s;
  font-family: inherit;
}

.coc-ai-card-btn:active {
  background: rgba(102, 126, 234, 0.1);
}

/* AI 灵感作坊底部操作按钮行 */
.coc-ai-actions {
  display: flex;
  gap: 10px;
  position: relative;
  z-index: 1;
}

.coc-ai-btn {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 12px 16px;
  min-height: 44px;
  border: none;
  border-radius: 24px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
  transition: all 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
  white-space: nowrap;
  -webkit-tap-highlight-color: transparent;
}

.coc-ai-btn-random {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: #FFFFFF;
  box-shadow: 0 4px 14px rgba(102, 126, 234, 0.35);
}

.coc-ai-btn-random:active {
  transform: scale(0.95);
  box-shadow: 0 2px 8px rgba(102, 126, 234, 0.25);
}

.coc-ai-btn-custom {
  background: linear-gradient(135deg, #FF8FA3 0%, #FF6B81 100%);
  color: #FFFFFF;
  box-shadow: 0 4px 14px rgba(255, 143, 163, 0.35);
}

.coc-ai-btn-custom:active {
  transform: scale(0.95);
  box-shadow: 0 2px 8px rgba(255, 143, 163, 0.25);
}

/* P2: AI 按钮独立 loading — dimmed 状态（另一个按钮正常但灰色） */
.coc-ai-btn.dimmed {
  opacity: 0.45;
  filter: grayscale(30%);
  cursor: pointer;
  pointer-events: auto;
}

.coc-ai-btn.dimmed:active {
  transform: scale(0.97);
}

/* AI 灵感工坊整体 loading: 卡片区显示 skeleton */
.coc-ai-workshop-loading {
  opacity: 0.92;
}

.coc-ai-card-skeleton {
  background: rgba(255, 255, 255, 0.5);
  border-color: rgba(0, 0, 0, 0.06);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
  cursor: default;
  pointer-events: none;
}

.coc-ai-card-skeleton .skeleton {
  background: linear-gradient(90deg, #EDE7FF 25%, #DDD6FE 50%, #EDE7FF 75%);
  background-size: 200% 100%;
  animation: shimmer 1.5s ease-in-out infinite;
}

body.dark-mode .coc-ai-card-skeleton {
  background: rgba(255, 255, 255, 0.05);
}

body.dark-mode .coc-ai-card-skeleton .skeleton {
  background: linear-gradient(90deg, #3A3550 25%, #4A4560 50%, #3A3550 75%);
}

/* AI 按钮 loading 状态 */
.coc-ai-btn.loading {
  pointer-events: none;
  opacity: 0.8;
  position: relative;
  overflow: hidden;
}

.coc-ai-btn.loading::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(255, 255, 255, 0.3) 25%,
    transparent 50%
  );
  background-size: 200% 100%;
  animation: aiBtnShimmer 1.5s ease-in-out infinite;
}

@keyframes aiBtnShimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

.coc-ai-btn .coc-ai-btn-spinner {
  display: none;
  width: 16px;
  height: 16px;
  border: 2px solid rgba(255, 255, 255, 0.3);
  border-top-color: #FFFFFF;
  border-radius: 50%;
  animation: aiBtnSpin 0.8s linear infinite;
}

.coc-ai-btn.loading .coc-ai-btn-spinner {
  display: inline-block;
}

.coc-ai-btn.loading .coc-ai-btn-text {
  opacity: 0.7;
}

@keyframes aiBtnSpin {
  to { transform: rotate(360deg); }
}

/* AI 灵感工坊空状态 */
.coc-ai-empty {
  text-align: center;
  padding: 24px 16px;
  color: #9B8EC4;
  font-size: 13px;
  position: relative;
  z-index: 1;
}

.coc-ai-empty .coc-ai-empty-icon {
  font-size: 40px;
  margin-bottom: 8px;
  opacity: 0.6;
}

.coc-ai-empty .coc-ai-empty-text {
  font-size: 13px;
  line-height: 1.6;
  color: #A89EC9;
}

/* ========== 暗黑模式：AI 灵感工坊 ========== */

body.dark-mode .coc-ai-workshop {
  background: linear-gradient(135deg, #2D2542 0%, #3A2A30 100%);
  border-color: rgba(180, 167, 246, 0.15);
  box-shadow:
    0 4px 20px rgba(0, 0, 0, 0.3),
    0 -1px 6px rgba(255, 255, 255, 0.05),
    inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

body.dark-mode .coc-ai-workshop-loading {
  background: linear-gradient(135deg, #252035 0%, #32252A 100%);
}

body.dark-mode .coc-ai-workshop::before {
  background: radial-gradient(circle, rgba(180, 167, 246, 0.06), transparent 70%);
}

body.dark-mode .coc-ai-workshop-header .coc-ai-title {
  color: #C4B5FD;
}

body.dark-mode .coc-ai-workshop-desc {
  color: #A8A0C8;
}

body.dark-mode .coc-ai-card {
  background: rgba(39, 39, 65, 0.85);
  border-color: rgba(255, 255, 255, 0.06);
  box-shadow:
    0 3px 12px rgba(0, 0, 0, 0.2),
    0 -1px 4px rgba(255, 255, 255, 0.04),
    inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

body.dark-mode .coc-ai-card:hover {
  border-color: rgba(180, 167, 246, 0.3);
  box-shadow:
    0 6px 18px rgba(180, 167, 246, 0.15),
    0 -1px 4px rgba(255, 255, 255, 0.04);
}

body.dark-mode .coc-ai-card-title {
  color: #E8E8E8;
}

body.dark-mode .coc-ai-card-meta {
  color: #6A6A6A;
}

body.dark-mode .coc-ai-card-btn {
  color: #A78BFA;
}

body.dark-mode .coc-ai-card-btn:active {
  background: rgba(167, 139, 250, 0.1);
}

body.dark-mode .coc-ai-empty {
  color: #7C6FAA;
}

body.dark-mode .coc-ai-empty .coc-ai-empty-text {
  color: #8A7EC0;
}

body.dark-mode .coc-ai-btn-random {
  background: linear-gradient(135deg, #5A42D6 0%, #9B59B6 100%);
  box-shadow: 0 4px 14px rgba(90, 66, 214, 0.35);
}

body.dark-mode .coc-ai-btn-custom {
  background: linear-gradient(135deg, #D6336C 0%, #9B2C4C 100%);
  box-shadow: 0 4px 14px rgba(214, 51, 108, 0.35);
}

/* Dashboard Co-Creation Entry */
.dash-cocreation-entry { cursor: pointer; transition: transform 0.2s, box-shadow 0.2s; }

.dash-cocreation-entry:hover { transform: translateY(-2px); box-shadow: 0 6px 20px rgba(108,92,231,0.15) !important; }

.dash-cocreation-banner { display: flex; align-items: center; justify-content: space-between; gap: 12px; }

.dash-cocreation-left { display: flex; align-items: center; gap: 12px; flex: 1; min-width: 0; }

.dash-cocreation-icon { font-size: 36px; flex-shrink: 0; }

.dash-cocreation-info { min-width: 0; }

.dash-cocreation-title { font-size: 15px; font-weight: 700; color: #444; margin-bottom: 2px; }

.dash-cocreation-subtitle { font-size: 12px; color: #707070  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.dash-cocreation-go {
  padding: 8px 18px;
  border-radius: 20px;
  border: none;
  background: linear-gradient(135deg, #6C5CE7, #a29bfe);
  color: #fff;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
  white-space: nowrap;
  flex-shrink: 0;
  transition: transform 0.2s;
}

.dash-cocreation-go:hover { transform: scale(1.05); }

@media (min-width: 600px) {
  .coc-modes { flex-direction: row; gap: 14px; }
  .coc-mode-card { flex: 1; }
}

/* ==================== M7 创作连续性引擎 (v3.0) ==================== */

/* --- 日记本页面 --- */
.diary-container { display: flex; flex-direction: column; min-height: 100vh; padding-bottom: 7rem; }
.diary-header {
  padding: var(--space-5) var(--space-5) var(--space-4);
  background: linear-gradient(135deg, #fef3c7 0%, #fde68a 50%, #fcd34d 100%);
}
.diary-header-top {
  display: flex; align-items: center; justify-content: space-between;
}
.diary-title { font-size: var(--font-subtitle); font-weight: 700; color: #92400e; }
.diary-character { font-size: 2rem; }

.diary-stats-row {
  display: flex; gap: var(--space-2); margin-top: var(--space-3);
}
.diary-stat {
  flex: 1; text-align: center;
  background: rgba(255,255,255,0.5); border-radius: var(--radius-lg);
  padding: var(--space-2);
}
.diary-stat-num { display: block; font-size: var(--font-subtitle); font-weight: 800; color: #92400e; }
.diary-stat-label { font-size: var(--font-caption); color: #a16207; }

.diary-week-nav {
  display: flex; align-items: center; justify-content: space-between;
  padding: var(--space-3) var(--space-5);
  background: var(--bg-primary);
  border-bottom: 1px solid var(--border-color);
}
.diary-week-btn {
  background: none; border: 1px solid var(--border-color); border-radius: var(--radius-md);
  padding: var(--space-1) var(--space-3); font-size: var(--font-caption);
  color: var(--text-secondary); cursor: pointer;
}
.diary-week-btn:active { background: var(--bg-secondary); }
.diary-week-label { font-size: var(--font-body-sm); font-weight: 600; color: var(--text-primary); }

/* 去年今日横幅 */
.diary-ontd-banner {
  display: flex; align-items: center; gap: var(--space-3);
  margin: var(--space-3) var(--space-5); padding: var(--space-3) var(--space-4);
  background: var(--bg-glass); border-radius: var(--radius-xl);
  border: 1px solid var(--border-color);
}
.ontd-icon { font-size: 1.8rem; }
.ontd-title { font-size: var(--font-body-sm); font-weight: 600; color: var(--text-primary); }
.ontd-desc { font-size: var(--font-caption); color: var(--text-secondary); margin-top: 2px; }
.ontd-empty { font-size: var(--font-caption); color: var(--text-hint); }

/* 每周回顾 */
.diary-weekly-review {
  margin: var(--space-2) var(--space-5); padding: var(--space-4);
  background: linear-gradient(135deg, #fce7f3 0%, #fbcfe8 100%);
  border-radius: var(--radius-xl);
}
.review-header { display: flex; align-items: center; gap: var(--space-2); margin-bottom: var(--space-2); }
.review-icon { font-size: 1.5rem; }
.review-title { font-size: var(--font-body); font-weight: 700; color: #9d174d; }
.review-summary { font-size: var(--font-body-sm); color: #831843; line-height: 1.6; }
.review-achievements { margin-top: var(--space-2); font-size: var(--font-caption); color: #be185d; }
.review-suggestion { margin-top: var(--space-2); font-size: var(--font-caption); color: #9d174d; font-style: italic; }

/* 时间线 */
.diary-timeline { flex: 1; padding: var(--space-3) var(--space-5); }
.diary-day-group { margin-bottom: var(--space-4); }
.diary-date-header {
  display: flex; align-items: center; gap: var(--space-2);
  margin-bottom: var(--space-2); padding-left: var(--space-2);
}
.diary-date-dot {
  width: 10px; height: 10px; border-radius: 50%;
  background: var(--color-primary); flex-shrink: 0;
}
.diary-date-text { font-size: var(--font-body-sm); font-weight: 700; color: var(--text-primary); }
.diary-date-sub { font-size: var(--font-caption); color: var(--text-hint); }

.diary-card {
  margin-left: calc(var(--space-2) + 5px); margin-bottom: var(--space-2);
  padding: var(--space-3) var(--space-4);
  background: var(--bg-card); border-radius: var(--radius-lg);
  border: 1px solid var(--border-color);
  position: relative;
}
.diary-card-milestone {
  border-color: #fbbf24; background: linear-gradient(135deg, #fffbeb, #fef3c7);
}
.diary-milestone-badge {
  position: absolute; top: -8px; right: var(--space-3);
  background: #f59e0b; color: white; font-size: 12px; font-weight: 600;
  padding: 1px 8px; border-radius: 10px;
}
.diary-card-header { display: flex; align-items: center; gap: var(--space-1); margin-bottom: var(--space-1); }
.diary-card-type { font-size: var(--font-caption); color: var(--text-hint); }
.diary-card-comment {
  font-size: var(--font-body-sm); color: var(--text-primary); line-height: 1.5;
}
.diary-card-time {
  margin-top: var(--space-1); font-size: 12px; color: var(--text-hint); text-align: right;
}

/* --- 系列横幅 --- */
.home-series-container { margin-bottom: var(--space-3); }
.series-mini-banner {
  display: flex; align-items: center; gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  background: linear-gradient(135deg, #ede9fe 0%, #ddd6fe 100%);
  border-radius: var(--radius-xl); margin-bottom: var(--space-2);
  cursor: pointer; transition: transform 0.2s;
}
.series-mini-banner:active { transform: scale(0.98); }
.series-mini-icon { font-size: 1.8rem; }
.series-mini-label { font-size: var(--font-body-sm); font-weight: 600; color: #5b21b6; }
.series-mini-action { font-size: var(--font-caption); color: #7c3aed; margin-top: 2px; }

.series-banner-card {
  display: flex; gap: var(--space-3); padding: var(--space-4);
  background: var(--bg-card); border-radius: var(--radius-xl);
  border: 1px solid var(--border-color); margin-bottom: var(--space-3);
}
.series-banner-icon { font-size: 2rem; flex-shrink: 0; }
.series-banner-title { font-size: var(--font-body); font-weight: 700; color: var(--text-primary); }
.series-banner-count { font-size: var(--font-caption); color: var(--text-hint); margin-top: 2px; }
.series-banner-narrative { font-size: var(--font-caption); color: var(--text-secondary); margin-top: var(--space-1); line-height: 1.5; }

.add-series-prompt {
  display: flex; align-items: center; gap: var(--space-2);
  padding: var(--space-3) var(--space-4);
  background: var(--bg-glass); border-radius: var(--radius-xl);
  border: 1px dashed var(--border-color); margin-top: var(--space-3);
  font-size: var(--font-body-sm); color: var(--text-secondary);
}
.add-series-icon { font-size: 1.5rem; }
.add-series-list { display: flex; gap: var(--space-1); flex-wrap: wrap; }
.add-series-opt { white-space: nowrap; }

/* --- 暗色模式 --- */
body.dark-mode .diary-header {
  background: linear-gradient(135deg, #422006 0%, #713f12 50%, #854d0e 100%);
}
body.dark-mode .diary-title,
body.dark-mode .diary-stat-num { color: #fde68a; }
body.dark-mode .diary-stat { background: rgba(255,255,255,0.08); }
body.dark-mode .diary-stat-label { color: #d97706; }
body.dark-mode .diary-card-milestone {
  background: linear-gradient(135deg, #422006, #713f12);
}
body.dark-mode .series-mini-banner {
  background: linear-gradient(135deg, #3b0764 0%, #581c87 100%);
}
body.dark-mode .series-mini-label { color: #c4b5fd; }
body.dark-mode .series-mini-action { color: #a78bfa; }
body.dark-mode .diary-weekly-review {
  background: linear-gradient(135deg, #4a1942 0%, #701a75 100%);
}
body.dark-mode .review-summary,
body.dark-mode .review-title { color: #f0abfc; }
body.dark-mode .review-achievements { color: #e879f9; }
body.dark-mode .review-suggestion { color: #d946ef; }

/* =============================================
   M4: 创意挑战系统 (Challenge System)
   ============================================= */

/* --- 挑战页面容器 --- */
.challenge-container { max-width: 600px; margin: 0 auto; padding: var(--space-4); }
.challenge-header { text-align: center; margin-bottom: var(--space-4); }
.challenge-header h2 { font-size: var(--font-h3); color: var(--text-primary); margin-bottom: var(--space-1); }
.challenge-subtitle { font-size: var(--font-body-sm); color: var(--text-hint); }

/* --- 每日挑战区域 --- */
.daily-challenge-main {
  background: linear-gradient(135deg, #fef3c7 0%, #fde68a 50%, #fbbf24 100%);
  border-radius: var(--radius-xl);
  padding: var(--space-4);
  border: 2px solid #f59e0b;
  margin-bottom: var(--space-3);
  cursor: pointer;
  transition: transform 0.15s;
}
.daily-challenge-main:active { transform: scale(0.98); }
.daily-badge { display: flex; gap: var(--space-2); margin-bottom: var(--space-2); }
.daily-difficulty, .daily-type {
  font-size: var(--font-caption);
  padding: 2px 8px;
  border-radius: var(--radius-sm);
  background: rgba(255,255,255,0.6);
  color: #92400e;
  font-weight: 600;
}
.daily-main-body h3 { font-size: var(--font-h4); color: #78350f; margin-bottom: var(--space-1); }
.daily-desc { font-size: var(--font-body-sm); color: #92400e; margin-bottom: var(--space-2); line-height: 1.5; }
.daily-dimension, .daily-estimate {
  display: inline-block;
  font-size: var(--font-caption);
  color: #78350f;
  background: rgba(255,255,255,0.5);
  padding: 2px 8px;
  border-radius: var(--radius-sm);
  margin-right: var(--space-2);
  margin-bottom: var(--space-2);
}
.daily-main-actions { display: flex; justify-content: flex-end; }

/* Side challenges */
.daily-challenge-sides { display: flex; gap: var(--space-2); margin-bottom: var(--space-3); }
.daily-side-card {
  flex: 1;
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  padding: var(--space-3);
  cursor: pointer;
  transition: all 0.15s;
}
.daily-side-card:hover { border-color: var(--color-primary); box-shadow: 0 2px 8px rgba(0,0,0,0.06); }
.side-difficulty { font-size: var(--font-caption); color: var(--color-primary); font-weight: 600; }
.side-name { font-size: var(--font-body-sm); font-weight: 600; color: var(--text-primary); margin: var(--space-1) 0; }
.side-desc { font-size: var(--font-caption); color: var(--text-hint); margin-bottom: var(--space-2); }
.side-desc .btn { width: 100%; }

/* Stats row */
.daily-stats { display: flex; gap: var(--space-2); flex-wrap: wrap; margin-top: var(--space-2); }
.stat-chip {
  font-size: var(--font-caption);
  padding: 4px 10px;
  border-radius: var(--radius-full, 20px);
  background: var(--bg-glass);
  color: var(--text-secondary);
  border: 1px solid var(--border-color);
}

/* --- Homepage daily challenge banner --- */
.home-daily-challenge { margin-bottom: var(--space-4); }
.daily-challenge-banner {
  display: flex; align-items: center; justify-content: space-between;
  padding: var(--space-3) var(--space-4);
  background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
  border-radius: var(--radius-lg);
  border: 1px solid #f59e0b;
  cursor: pointer;
  transition: transform 0.15s;
}
.daily-challenge-banner:active { transform: scale(0.98); }
.daily-banner-left { display: flex; align-items: center; gap: var(--space-3); }
.daily-banner-icon { font-size: 1.8rem; }
.daily-banner-info { display: flex; flex-direction: column; gap: 2px; }
.daily-banner-label { font-size: var(--font-caption); color: #92400e; font-weight: 600; }
.daily-banner-name { font-size: var(--font-body); font-weight: 700; color: #78350f; }
.daily-banner-desc { font-size: var(--font-caption); color: #92400e; }
.daily-banner-arrow { font-size: 1.4rem; color: #78350f; }

/* --- 挑战列表 --- */
.challenge-list-section { margin-top: var(--space-4); }
.section-title { font-size: var(--font-body); font-weight: 700; color: var(--text-primary); margin-bottom: var(--space-3); }

/* Filters */
.challenge-filters { display: flex; flex-direction: column; gap: var(--space-2); margin-bottom: var(--space-3); }
.filter-group { display: flex; gap: var(--space-1); flex-wrap: wrap; }
.filter-chip {
  padding: 4px 12px;
  border-radius: var(--radius-full, 20px);
  border: 1px solid var(--border-color);
  background: var(--bg-card);
  font-size: var(--font-caption);
  color: var(--text-secondary);
  cursor: pointer;
  transition: all 0.15s;
}
.filter-chip.active, .filter-chip:hover {
  background: var(--color-primary);
  color: #fff;
  border-color: var(--color-primary);
}

/* Challenge cards */
.challenge-grid { display: flex; flex-direction: column; gap: var(--space-2); }
.challenge-card {
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  padding: var(--space-3);
  cursor: pointer;
  transition: all 0.15s;
}
.challenge-card:hover { border-color: var(--color-primary); box-shadow: 0 2px 8px rgba(0,0,0,0.06); }
.challenge-card.challenge-completed { opacity: 0.7; background: var(--bg-glass); }
.challenge-card.challenge-in-progress { border-color: #f59e0b; }
.challenge-card-header { display: flex; gap: var(--space-2); align-items: center; margin-bottom: var(--space-1); }
.challenge-card-difficulty { font-size: var(--font-caption); color: var(--color-primary); font-weight: 600; }
.challenge-card-type { font-size: var(--font-caption); color: var(--text-hint); }
.challenge-status-badge { font-size: var(--font-caption); padding: 1px 6px; border-radius: var(--radius-sm); margin-left: auto; }
.challenge-status-badge.completed { background: #dcfce7; color: #166534; }
.challenge-status-badge.in-progress { background: #fef3c7; color: #92400e; }
.challenge-card-name { font-size: var(--font-body); font-weight: 600; color: var(--text-primary); margin-bottom: var(--space-1); }
.challenge-card-desc { font-size: var(--font-caption); color: var(--text-hint); line-height: 1.4; margin-bottom: var(--space-2); }
.challenge-card-footer { display: flex; align-items: center; justify-content: space-between; }
.challenge-card-time { font-size: var(--font-caption); color: var(--text-hint); }

/* v3.2: Challenge tags on cards */
.challenge-card-tags { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: var(--space-2); }
.challenge-card-tag {
  font-size: 12px; padding: 1px 6px;
  background: rgba(147,112,219,0.1); color: #7c3aed;
  border-radius: var(--radius-sm); white-space: nowrap;
}

/* v3.2: AI badge on card */
.challenge-ai-badge {
  position: absolute; top: 8px; right: 8px;
  font-size: 12px; padding: 2px 8px;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: #fff; border-radius: var(--radius-full);
  font-weight: 600; white-space: nowrap;
  z-index: 2;
}
.challenge-card-ai {
  border-color: #a78bfa !important;
  box-shadow: 0 2px 12px rgba(139,92,246,0.12);
}

/* v3.2: AI Generate button */
.challenge-list-header-row {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: var(--space-3);
}
.challenge-list-header-row .section-title { margin-bottom: 0; }
.btn-ai-generate {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: #fff; border: none;
  font-weight: 600; font-size: var(--font-body-sm);
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-full);
  cursor: pointer; transition: all 0.2s;
  white-space: nowrap;
}
.btn-ai-generate:hover, .btn-ai-generate:active {
  transform: scale(1.05);
  box-shadow: 0 4px 16px rgba(102,126,234,0.4);
}
.btn-ai-generate:disabled {
  opacity: 0.6; transform: none;
}

/* --- 挑战详情弹窗 --- */
.challenge-modal {
  position: fixed; top: 0; left: 0; right: 0; bottom: 0; z-index: 1000;
  display: flex; align-items: center; justify-content: center;
}
.challenge-modal-overlay {
  position: absolute; top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(0,0,0,0.4);
}
.challenge-modal-content {
  position: relative; z-index: 1;
  background: var(--bg-card);
  border-radius: var(--radius-xl);
  padding: var(--space-5);
  max-width: 420px; width: 90%;
  max-height: 80vh; overflow-y: auto;
  box-shadow: 0 16px 48px rgba(0,0,0,0.15);
}
.challenge-modal-header { display: flex; gap: var(--space-2); margin-bottom: var(--space-2); }
.challenge-modal-difficulty, .challenge-modal-type {
  font-size: var(--font-caption);
  padding: 2px 8px;
  border-radius: var(--radius-sm);
  background: var(--bg-glass);
  color: var(--text-secondary);
}
.challenge-modal-content h2 { font-size: var(--font-h4); color: var(--text-primary); margin-bottom: var(--space-2); }
.challenge-modal-desc { font-size: var(--font-body-sm); color: var(--text-secondary); line-height: 1.6; margin-bottom: var(--space-3); }
.challenge-modal-dimension { font-size: var(--font-body-sm); color: var(--color-primary); margin-bottom: var(--space-2); }
.challenge-modal-meta { display: flex; gap: var(--space-3); font-size: var(--font-caption); color: var(--text-hint); margin-bottom: var(--space-3); }
.challenge-modal-steps { margin-bottom: var(--space-3); }
.challenge-modal-steps h4 { font-size: var(--font-body-sm); font-weight: 600; color: var(--text-primary); margin-bottom: var(--space-1); }
.challenge-modal-steps ol { padding-left: var(--space-4); }
.challenge-modal-steps li { font-size: var(--font-body-sm); color: var(--text-secondary); line-height: 1.6; margin-bottom: 4px; }
.challenge-modal-actions { display: flex; gap: var(--space-2); justify-content: flex-end; margin-top: var(--space-3); }
.challenge-done-badge {
  padding: var(--space-2) var(--space-3);
  background: #dcfce7;
  border-radius: var(--radius-md);
  color: #166534;
  font-weight: 600;
  font-size: var(--font-body-sm);
}

/* --- 完成庆祝动画 --- */
.challenge-celebration {
  position: fixed; top: 0; left: 0; right: 0; bottom: 0; z-index: 2000;
  display: flex; align-items: center; justify-content: center;
  background: rgba(0,0,0,0.5);
  animation: fadeIn 0.3s ease;
}
.celebration-content {
  background: linear-gradient(135deg, #fef3c7 0%, #fde68a 50%, #fbbf24 100%);
  border-radius: var(--radius-xl);
  padding: var(--space-6);
  text-align: center;
  max-width: 340px; width: 85%;
  box-shadow: 0 16px 64px rgba(0,0,0,0.2);
  animation: bounceIn 0.5s ease;
}
.celebration-emoji { font-size: 4rem; margin-bottom: var(--space-3); animation: pulse 0.6s ease infinite; }
.celebration-content h2 { font-size: var(--font-h4); color: #78350f; margin-bottom: var(--space-2); }
.celebration-content p { font-size: var(--font-body); color: #92400e; line-height: 1.5; margin-bottom: var(--space-3); }
.celebration-bonus {
  display: inline-block;
  padding: var(--space-2) var(--space-4);
  background: rgba(255,255,255,0.7);
  border-radius: var(--radius-full, 20px);
  font-size: var(--font-body);
  font-weight: 700;
  color: #92400e;
}

@keyframes bounceIn {
  0% { transform: scale(0.3); opacity: 0; }
  50% { transform: scale(1.05); opacity: 0.8; }
  70% { transform: scale(0.9); opacity: 1; }
  100% { transform: scale(1); opacity: 1; }
}
@keyframes pulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.2); }
}

/* --- Toast --- */
.challenge-toast {
  position: fixed; bottom: 80px; left: 50%; transform: translateX(-50%); z-index: 1500;
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  padding: var(--space-3) var(--space-5);
  font-size: var(--font-body-sm);
  color: var(--text-primary);
  box-shadow: 0 4px 16px rgba(0,0,0,0.1);
  transition: opacity 0.3s;
  display: none;
}

/* --- 暗色模式覆盖 --- */
body.dark-mode .daily-challenge-main {
  background: linear-gradient(135deg, #422006 0%, #713f12 50%, #854d0e 100%);
  border-color: #f59e0b;
}
body.dark-mode .daily-challenge-main h3 { color: #fde68a; }
body.dark-mode .daily-desc { color: #fbbf24; }
body.dark-mode .daily-difficulty, body.dark-mode .daily-type { background: rgba(255,255,255,0.1); color: #fbbf24; }
body.dark-mode .daily-dimension, body.dark-mode .daily-estimate { background: rgba(255,255,255,0.1); color: #fde68a; }
body.dark-mode .daily-challenge-banner { background: linear-gradient(135deg, #422006 0%, #713f12 50%, #854d0e 100%); }
body.dark-mode .daily-banner-label { color: #fde68a; }
body.dark-mode .daily-banner-name { color: #fde68a; }
body.dark-mode .daily-banner-desc { color: #fbbf24; }
body.dark-mode .daily-banner-arrow { color: #fde68a; }
body.dark-mode .challenge-card.challenge-in-progress { border-color: #f59e0b; }
body.dark-mode .challenge-status-badge.completed { background: rgba(34,197,94,0.2); color: #86efac; }

/* ===== Challenge Banner (v3.1.1) — Active challenge indicator on creation pages ===== */
.challenge-banner {
  margin: var(--space-3) var(--space-3) 0;
  opacity: 0;
  transform: translateY(-10px);
  transition: opacity 0.35s ease, transform 0.35s ease;
}
.challenge-banner-inner {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  background: linear-gradient(135deg, #ffedd5 0%, #fed7aa 50%, #fbbf24 100%);
  border: 2px solid #f59e0b;
  border-radius: var(--radius-lg);
  padding: var(--space-3) var(--space-3);
  box-shadow: 0 2px 8px rgba(245,158,11,0.25);
}
.challenge-banner-icon {
  font-size: 28px;
  line-height: 1;
  flex-shrink: 0;
  margin-top: 2px;
  animation: pulse 2s ease-in-out infinite;
}
.challenge-banner-body {
  flex: 1;
  min-width: 0;
}
.challenge-banner-title-row {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-wrap: wrap;
}
.challenge-banner-title {
  font-size: var(--font-body);
  font-weight: 700;
  color: #92400e;
  line-height: 1.3;
}
.challenge-banner-diff {
  font-size: 12px;
  font-weight: 500;
  background: rgba(146,64,14,0.15);
  color: #92400e;
  padding: 1px 8px;
  border-radius: var(--radius-sm);
  white-space: nowrap;
}
.challenge-banner-step {
  font-size: var(--font-body-sm);
  color: #78350f;
  margin-top: 3px;
  line-height: 1.4;
}
.challenge-banner-dots {
  display: flex;
  gap: 8px;
  margin-top: 6px;
}
.challenge-banner-dot {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 2.5px solid #d97706;
  background: transparent;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 700;
  color: #d97706;
  cursor: pointer;
  transition: all 0.25s ease;
  padding: 0;
  font-family: inherit;
}
.challenge-banner-dot.current {
  background: #f59e0b;
  border-color: #d97706;
  color: #fff;
  box-shadow: 0 0 0 4px rgba(245,158,11,0.25);
  transform: scale(1.1);
}
.challenge-banner-dot.done {
  background: #16a34a;
  border-color: #15803d;
  color: #fff;
}
.challenge-banner-dot:hover:not(.done) {
  background: rgba(245,158,11,0.2);
  transform: scale(1.15);
}
.challenge-banner-dot:active {
  transform: scale(0.95);
}
.challenge-banner-dismiss {
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  border: none;
  background: rgba(146,64,14,0.1);
  color: #92400e;
  border-radius: var(--radius-md);
  font-size: 12px;
  cursor: pointer;
  padding: 4px 10px;
  transition: all 0.2s;
  font-family: inherit;
  min-width: 40px;
}
.challenge-banner-dismiss-icon {
  font-size: 16px;
  line-height: 1;
  font-weight: 700;
}
.challenge-banner-dismiss-label {
  font-size: 12px;
  font-weight: 500;
}
.challenge-banner-dismiss:hover,
.challenge-banner-dismiss:active {
  background: rgba(220,38,38,0.15);
  color: #dc2626;
}
.challenge-banner--removing {
  opacity: 0 !important;
  transform: translateY(-20px) !important;
  transition: opacity 0.3s, transform 0.3s;
}

/* Dark mode */
body.dark-mode .challenge-banner-inner {
  background: linear-gradient(135deg, #422006 0%, #713f12 50%, #854d0e 100%);
  border-color: #f59e0b;
}
body.dark-mode .challenge-banner-title { color: #fde68a; }
body.dark-mode .challenge-banner-diff { background: rgba(253,230,138,0.15); color: #fde68a; }
body.dark-mode .challenge-banner-step { color: #fbbf24; }
body.dark-mode .challenge-banner-dot { border-color: #f59e0b; color: #fbbf24; }
body.dark-mode .challenge-banner-dot.current { background: #f59e0b; border-color: #fbbf24; color: #fff; }
body.dark-mode .challenge-banner-dot.done { background: #16a34a; border-color: #22c55e; color: #fff; }
body.dark-mode .challenge-banner-dot:hover:not(.done) { background: rgba(245,158,11,0.3); }
body.dark-mode .challenge-banner-dismiss { background: rgba(253,230,138,0.12); color: #fde68a; }
body.dark-mode .challenge-banner-dismiss:hover,
body.dark-mode .challenge-banner-dismiss:active { background: rgba(239,68,68,0.2); color: #fca5a5; }
body.dark-mode .challenge-status-badge.in-progress { background: rgba(245,158,11,0.2); color: #fbbf24; }
/* v3.2 dark mode */
body.dark-mode .challenge-card-tag { background: rgba(167,139,250,0.15); color: #c4b5fd; }
body.dark-mode .challenge-card-ai { border-color: #7c3aed !important; }
body.dark-mode .btn-ai-generate { background: linear-gradient(135deg, #5b6abf 0%, #6a4190 100%); }
body.dark-mode .celebration-content {
  background: linear-gradient(135deg, #422006 0%, #713f12 50%, #854d0e 100%);
}
body.dark-mode .celebration-content h2 { color: #fde68a; }
body.dark-mode .celebration-content p { color: #fbbf24; }
body.dark-mode .celebration-bonus { background: rgba(255,255,255,0.1); color: #fde68a; }
body.dark-mode .challenge-done-badge { background: rgba(34,197,94,0.2); color: #86efac; }

/* ============================================================
   M6 月度成长报告 (v3.0)
   ============================================================ */

/* Page container */
.page-report {
  background: #F5F0FF;
  min-height: 100vh;
  padding-bottom: 100px;
}

/* Loading */
.report-loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 60vh;
  padding: 2rem;
}
.report-loading-icon { font-size: 4rem; animation: float 2s ease-in-out infinite; }
.report-loading-text { font-size: 1.2rem; font-weight: 700; color: #6C5CE7; margin-top: 1rem; }
.report-loading-hint { font-size: 0.85rem; color: #707070  margin-top: 0.5rem; }

@keyframes float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-10px); }
}

/* Report empty/error */
.report-empty, .report-error {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 50vh;
  padding: 2rem;
}
.report-empty-icon, .report-error-icon { font-size: 4rem; margin-bottom: 1rem; }
.report-empty-text, .report-error-text { font-size: 1rem; color: #6A6A6A; text-align: center; }
.report-retry-btn {
  margin-top: 1.5rem;
  padding: 0.6rem 2rem;
  background: #6C5CE7;
  color: #fff;
  border: none;
  border-radius: 12px;
  font-size: 1rem;
  font-weight: 700;
  cursor: pointer;
}

/* Report container */
.report-container {
  max-width: 500px;
  margin: 0 auto;
  padding: 0 1rem;
}

/* Header */
.report-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem 0;
  position: sticky;
  top: 0;
  background: #F5F0FF;
  z-index: 10;
}
.report-back {
  background: none;
  border: none;
  font-size: 0.95rem;
  color: #6C5CE7;
  cursor: pointer;
  font-weight: 600;
}
.report-month-title {
  font-size: 1.1rem;
  font-weight: 800;
  color: #333;
}
.report-download-btn {
  background: rgba(108,92,231,0.1);
  border: none;
  font-size: 1.3rem;
  padding: 0.4rem 0.7rem;
  border-radius: 10px;
  cursor: pointer;
}

/* Page indicators */
.report-pages-indicator {
  display: flex;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.5rem 0 0.8rem;
  overflow-x: auto;
  flex-wrap: nowrap;
}
.report-page-dot {
  padding: 0.3rem 0.7rem;
  border-radius: 20px;
  font-size: 0.75rem;
  font-weight: 600;
  background: rgba(108,92,231,0.08);
  color: #707070 
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.2s;
  border: none;
}
.report-page-dot.active {
  background: #6C5CE7;
  color: #fff;
}

/* Report pages - card style */
.report-page {
  background: #fff;
  border-radius: 20px;
  padding: 1.5rem;
  margin-bottom: 1rem;
  box-shadow: 0 4px 20px rgba(108,92,231,0.08);
}

.report-section-title {
  font-size: 1.15rem;
  font-weight: 800;
  color: #333;
  margin-bottom: 1rem;
  display: flex;
  align-items: center;
  gap: 0.3rem;
}
.report-subsection {
  margin-top: 1.2rem;
}
.report-subsection h4 {
  font-size: 0.95rem;
  font-weight: 700;
  color: #555;
  margin-bottom: 0.6rem;
}

/* ===== Page 1: Cover ===== */
.report-cover {
  text-align: center;
  padding: 1.5rem 0.5rem;
}
.report-cover-badge {
  display: inline-block;
  padding: 0.3rem 1rem;
  background: linear-gradient(135deg, #667eea, #764ba2);
  color: #fff;
  border-radius: 20px;
  font-size: 0.85rem;
  font-weight: 700;
  margin-bottom: 1rem;
}
.report-cover-title {
  font-size: 1.3rem;
  font-weight: 800;
  color: #6C5CE7;
  margin-bottom: 1.2rem;
}
.report-cover-child {
  font-size: 1.5rem;
  font-weight: 800;
  color: #333;
  margin-bottom: 0.3rem;
}
.report-cover-month {
  font-size: 1rem;
  color: #6A6A6A;
  margin-bottom: 1.5rem;
}
.report-cover-score {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 1.5rem;
  padding: 1.2rem;
  background: linear-gradient(135deg, rgba(108,92,231,0.05), rgba(118,75,162,0.05));
  border-radius: 20px;
}
.report-cover-score-value {
  font-size: 3.5rem;
  font-weight: 900;
  line-height: 1;
}
.report-cover-score-label {
  font-size: 0.85rem;
  color: #6A6A6A;
  margin-top: 0.3rem;
}
.report-cover-score-delta {
  font-size: 0.8rem;
  font-weight: 600;
  margin-top: 0.3rem;
  padding: 0.2rem 0.6rem;
  border-radius: 10px;
}
.report-cover-score-delta.up { color: #00C853; background: rgba(0,200,83,0.1); }
.report-cover-score-delta.down { color: #FF5252; background: rgba(255,82,82,0.1); }
.report-cover-artwork {
  margin: 1rem 0;
}
.report-cover-artwork-img {
  width: 200px;
  height: 200px;
  border-radius: 20px;
  margin: 0 auto 0.5rem;
  background-size: cover;
  background-position: center;
  background-color: #F0E8FF;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 8px 30px rgba(108,92,231,0.15);
}
.report-cover-artwork-title {
  font-size: 0.9rem;
  font-weight: 600;
  color: #555;
}
.report-cover-stage {
  font-size: 0.85rem;
  color: #6C5CE7;
  background: rgba(108,92,231,0.08);
  padding: 0.4rem 1rem;
  border-radius: 20px;
  display: inline-block;
  margin-top: 0.5rem;
}
.report-cover-footer {
  font-size: 0.75rem;
  color: #BBB;
  margin-top: 1.5rem;
}

/* ===== Page 2: Radar ===== */
.report-radar-container {
  display: flex;
  justify-content: center;
  padding: 0.5rem 0;
}
#report-radar-canvas {
  max-width: 300px;
  max-height: 300px;
}
.report-radar-legend {
  margin-top: 1rem;
}
.report-dim-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.6rem;
  border-radius: 10px;
  margin-bottom: 0.3rem;
  transition: background 0.2s;
}
.report-dim-item.highlight {
  background: rgba(108,92,231,0.06);
  border: 1px solid rgba(108,92,231,0.15);
}
.report-dim-color {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
}
.report-dim-name {
  font-size: 0.8rem;
  color: #555;
  flex: 1;
}
.report-dim-score {
  font-size: 0.95rem;
  font-weight: 700;
  color: #333;
}
.report-dim-delta {
  font-size: 0.75rem;
  font-weight: 600;
}
.report-dim-delta.up { color: #00C853; }
.report-dim-delta.down { color: #FF5252; }
.report-dim-star { font-size: 0.8rem; }
.report-legend-note {
  display: flex;
  justify-content: center;
  gap: 1rem;
  margin-top: 0.8rem;
  font-size: 0.75rem;
  color: #707070 
  align-items: center;
}
.legend-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
}
.legend-dot.current { background: #6C5CE7; }
.legend-dot.last { background: #A0A0A0; }
.report-highlight-dim {
  margin-top: 1rem;
  padding: 0.7rem 1rem;
  background: linear-gradient(135deg, rgba(255,215,0,0.15), rgba(255,145,0,0.1));
  border-radius: 12px;
  font-size: 0.9rem;
  color: #555;
  text-align: center;
}

/* ===== Page 3: Milestones ===== */
.report-milestone-progress {
  margin-bottom: 1rem;
}
.report-progress-label {
  font-size: 0.8rem;
  font-weight: 600;
  color: #6A6A6A;
  margin-bottom: 0.4rem;
}
.report-progress-bar {
  height: 8px;
  background: #F0F0F0;
  border-radius: 4px;
  overflow: hidden;
}
.report-progress-fill {
  height: 100%;
  background: linear-gradient(90deg, #6C5CE7, #FF6B6B);
  border-radius: 4px;
  transition: width 0.5s;
}
.report-milestones-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.6rem;
}
.report-milestone-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0.8rem;
  background: rgba(0,200,83,0.06);
  border: 1px solid rgba(0,200,83,0.15);
  border-radius: 12px;
  text-align: center;
}
.report-milestone-card .report-milestone-icon {
  font-size: 1.5rem;
  margin-bottom: 0.3rem;
}
.report-milestone-card .report-milestone-name {
  font-size: 0.8rem;
  font-weight: 600;
  color: #333;
}
.report-milestone-card .report-milestone-date {
  font-size: 0.7rem;
  color: #00C853;
  margin-top: 0.2rem;
}
.report-stats-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.6rem;
  margin-top: 1rem;
}
.report-stat-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0.8rem;
  background: #F8F6FF;
  border-radius: 12px;
}
.report-stat-icon { font-size: 1.3rem; margin-bottom: 0.2rem; }
.report-stat-value { font-size: 1.3rem; font-weight: 800; color: #6C5CE7; }
.report-stat-label { font-size: 0.7rem; color: #707070  margin-top: 0.1rem; }
.report-no-data {
  text-align: center;
  color: #AAA;
  font-size: 0.9rem;
  padding: 1.5rem 0;
}

/* ===== Page 4: Artworks ===== */
.report-artworks-list {
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
}
.report-artwork-card {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  padding: 0.8rem;
  background: #FAFBFF;
  border-radius: 12px;
  border: 1px solid #F0ECFF;
}
.report-artwork-rank {
  font-size: 0.9rem;
  font-weight: 800;
  color: #6C5CE7;
  min-width: 28px;
}
.report-artwork-img {
  width: 60px;
  height: 60px;
  border-radius: 10px;
  background-size: cover;
  background-position: center;
  background-color: #F0E8FF;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.report-artwork-info {
  flex: 1;
  min-width: 0;
}
.report-artwork-title {
  font-size: 0.9rem;
  font-weight: 700;
  color: #333;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.report-artwork-type {
  font-size: 0.7rem;
  color: #6C5CE7;
  background: rgba(108,92,231,0.08);
  display: inline-block;
  padding: 0.1rem 0.5rem;
  border-radius: 6px;
  margin: 0.2rem 0;
}
.report-artwork-comment {
  font-size: 0.75rem;
  color: #6A6A6A;
  margin-top: 0.2rem;
  line-height: 1.3;
}
.report-artwork-date {
  font-size: 0.7rem;
  color: #BBB;
  margin-top: 0.2rem;
}

/* ===== Page 5: AI Analysis ===== */
.report-ai-badge {
  display: inline-block;
  padding: 0.2rem 0.8rem;
  background: rgba(108,92,231,0.08);
  color: #6C5CE7;
  font-size: 0.75rem;
  font-weight: 600;
  border-radius: 10px;
  margin-bottom: 1rem;
}
.report-ai-analysis {
  font-size: 0.95rem;
  line-height: 1.8;
  color: #444;
  margin-bottom: 1rem;
}
.report-stage-badge {
  display: inline-block;
  padding: 0.4rem 1rem;
  background: linear-gradient(135deg, #667eea, #764ba2);
  color: #fff;
  border-radius: 20px;
  font-size: 0.85rem;
  font-weight: 600;
  margin-bottom: 1rem;
}
.report-advice-box {
  padding: 1rem;
  background: rgba(255,215,0,0.08);
  border: 1px solid rgba(255,215,0,0.2);
  border-radius: 12px;
}
.report-advice-title {
  font-size: 0.9rem;
  font-weight: 700;
  color: #E67700;
  margin-bottom: 0.4rem;
}
.report-advice-text {
  font-size: 0.85rem;
  line-height: 1.6;
  color: #555;
}

/* ===== Page 6: Next Month ===== */
.report-next-focus {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  padding: 1rem;
  background: linear-gradient(135deg, rgba(108,92,231,0.08), rgba(118,75,162,0.08));
  border-radius: 14px;
  margin-bottom: 1rem;
}
.report-next-icon { font-size: 1.8rem; }
.report-next-text { font-size: 0.95rem; color: #444; }
.report-challenges-list {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.report-challenge-item {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.7rem;
  background: #F8F6FF;
  border-radius: 10px;
  cursor: pointer;
  transition: background 0.2s;
}
.report-challenge-item:hover { background: #F0ECFF; }
.report-challenge-icon { font-size: 1.3rem; }
.report-challenge-info { flex: 1; }
.report-challenge-name { font-size: 0.85rem; font-weight: 700; color: #333; }
.report-challenge-desc { font-size: 0.75rem; color: #6A6A6A; margin-top: 0.1rem; }
.report-suggestions-list {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.report-suggestion-item {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  font-size: 0.85rem;
  color: #555;
  padding: 0.5rem 0;
}
.report-suggestion-icon { font-size: 1rem; margin-top: 0.1rem; }
.report-suggestion-title { font-weight: 600; color: #333; }
.report-suggestion-desc { color: #6A6A6A; font-size: 0.8rem; margin-top: 0.2rem; }
.report-share-actions {
  display: flex;
  gap: 0.8rem;
  margin-top: 1.5rem;
}
.report-share-btn, .report-download-btn-full {
  flex: 1;
  padding: 0.8rem;
  border-radius: 14px;
  font-size: 0.9rem;
  font-weight: 700;
  cursor: pointer;
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.3rem;
  transition: transform 0.15s;
}
.report-share-btn:hover, .report-download-btn-full:hover { transform: translateY(-2px); }
.report-share-btn {
  background: linear-gradient(135deg, #667eea, #764ba2);
  color: #fff;
}
.report-download-btn-full {
  background: rgba(108,92,231,0.1);
  color: #6C5CE7;
}

/* Report nav */
.report-nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  padding: 1rem 0 2rem;
  position: sticky;
  bottom: 0;
  background: #F5F0FF;
}
.report-nav-btn {
  padding: 0.5rem 1.2rem;
  background: #6C5CE7;
  color: #fff;
  border: none;
  border-radius: 12px;
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
}
.report-nav-btn:disabled {
  background: #DDD;
  color: #707070 
  cursor: not-allowed;
}
.report-nav-current {
  font-size: 0.85rem;
  color: #6A6A6A;
  font-weight: 600;
}

/* Dashboard Report Entry */
.dash-report-entry {
  background: linear-gradient(135deg, rgba(108,92,231,0.03), rgba(118,75,162,0.05));
  border: 1px solid rgba(108,92,231,0.1);
}
.dash-report-banner {
  /* inherits dash-cocreation-banner */
}

/* Share card modal */
.report-share-modal {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
}
.report-share-modal-bg {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.5);
}
.report-share-modal-content {
  position: relative;
  background: #fff;
  border-radius: 20px;
  padding: 1.5rem;
  max-width: 400px;
  width: 100%;
  max-height: 90vh;
  overflow-y: auto;
  text-align: center;
  box-shadow: 0 20px 60px rgba(0,0,0,0.2);
}
.report-share-modal-content h3 {
  font-size: 1.1rem;
  font-weight: 800;
  color: #333;
  margin-bottom: 1rem;
}
.report-share-modal-close {
  position: absolute;
  top: 0.8rem;
  right: 1rem;
  background: #F0F0F0;
  border: none;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  font-size: 1rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #6A6A6A;
}
.report-share-preview {
  width: 100%;
  border-radius: 12px;
  box-shadow: 0 4px 15px rgba(0,0,0,0.1);
}
.report-share-modal-actions {
  display: flex;
  gap: 0.6rem;
  margin-top: 1rem;
}
.report-share-download, .report-share-copy {
  flex: 1;
  padding: 0.7rem;
  border-radius: 12px;
  font-size: 0.85rem;
  font-weight: 700;
  cursor: pointer;
  border: none;
}
.report-share-download {
  background: linear-gradient(135deg, #667eea, #764ba2);
  color: #fff;
}
.report-share-copy {
  background: #F0F0F0;
  color: #555;
}
.report-share-hint {
  font-size: 0.75rem;
  color: #BBB;
  margin-top: 0.8rem;
}

/* ============================================================
   41. v3.1 Phase 1-B 儿童首页「🏠 探索」改版
   ============================================================ */

/* --- 页面背景 --- */
.page-home-v31 {
  background: linear-gradient(180deg, #FFF9F0 0%, #FFF5F7 30%, #FFFDF7 70%, #F5F9FC 100%) !important;
}

.home-v31-container {
  padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 80px);
}

/* --- 1. 角色动画区 --- */
.home-v31-hero {
  text-align: center;
  padding: var(--space-6) var(--space-4) var(--space-4);
  cursor: pointer;
  transition: transform 0.15s ease;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}
.home-v31-hero:active {
  transform: scale(0.97);
}

.hero-tap-hint {
  margin-top: var(--space-2);
  font-size: var(--font-caption);
  color: var(--text-hint);
  opacity: 0.7;
  animation: heroTapPulse 2.5s ease-in-out infinite;
}
@keyframes heroTapPulse {
  0%, 100% { opacity: 0.4; }
  50% { opacity: 0.9; }
}

.hero-character {
  margin-bottom: var(--space-3);
}

.hero-emoji {
  display: inline-block;
  font-size: 72px;
  width: 100px;
  height: 100px;
  line-height: 100px;
  background: rgba(255, 255, 255, 0.8);
  border-radius: 50%;
  box-shadow: 0 4px 20px rgba(255, 143, 163, 0.2), 0 1px 4px rgba(0,0,0,0.06);
  transition: transform 0.2s ease;
  cursor: default;
}

/* 挥手动画 */
.hero-wave {
  animation: heroWave 2s ease-in-out infinite;
  transform-origin: bottom center;
}

@keyframes heroWave {
  0%, 100% { transform: rotate(0deg); }
  10% { transform: rotate(-8deg); }
  20% { transform: rotate(8deg); }
  30% { transform: rotate(-8deg); }
  40% { transform: rotate(8deg); }
  50%, 100% { transform: rotate(0deg); }
}

/* 点击角色 → 减小挥手幅度 */
.hero-emoji:active {
  animation: heroWaveTap 0.6s ease-in-out;
}

@keyframes heroWaveTap {
  0% { transform: rotate(0deg) scale(1); }
  20% { transform: rotate(-5deg) scale(0.95); }
  40% { transform: rotate(5deg) scale(0.95); }
  60% { transform: rotate(-5deg) scale(0.95); }
  100% { transform: rotate(0deg) scale(1); }
}

.hero-greeting {
  font-size: var(--font-title);
  font-weight: var(--weight-semibold);
  color: var(--text-primary);
  margin-bottom: var(--space-2);
}

.hero-greeting strong {
  font-weight: var(--weight-bold);
  background: linear-gradient(135deg, #FF8FA3, #FFA94D);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.hero-streak {
  min-height: 24px;
}

.streak-badge {
  display: inline-block;
  font-size: var(--font-body-sm);
  font-weight: var(--weight-semibold);
  color: #B45309;
  background: linear-gradient(135deg, #FEF3C7, #FDE68A);
  padding: 2px var(--space-3);
  border-radius: var(--radius-full);
  border: 1px solid #FBBF24;
}

.streak-hint {
  font-size: var(--font-caption);
  color: var(--text-hint);
}

/* --- 2. 今日挑战卡片 --- */
.home-v31-section {
  padding: 0 var(--space-3);
  margin-bottom: var(--space-4);
}

.v31-challenge-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-4);
  background: linear-gradient(135deg, #FF8FA3 0%, #FFA94D 100%);
  border-radius: var(--radius-xl);
  box-shadow: 0 4px 16px rgba(255, 143, 163, 0.3);
  cursor: pointer;
  transition: transform 0.1s ease;
}

.v31-challenge-card:active {
  transform: scale(0.97);
}

.v31-challenge-left {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  min-width: 0;
}

.v31-challenge-icon {
  font-size: 2rem;
  flex-shrink: 0;
}

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

.v31-challenge-tag {
  font-size: var(--font-caption);
  font-weight: var(--weight-semibold);
  color: rgba(255,255,255,0.9);
}

.v31-challenge-name {
  font-size: var(--font-body);
  font-weight: var(--weight-bold);
  color: #fff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.v31-challenge-desc {
  font-size: var(--font-caption);
  color: rgba(255,255,255,0.85);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.v31-challenge-go {
  font-size: var(--font-body);
  font-weight: var(--weight-bold);
  color: #fff;
  white-space: nowrap;
  margin-left: var(--space-2);
  flex-shrink: 0;
}

/* --- 3. 核心入口：3 个大图形按钮 --- */
.v31-big-btns {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-3);
}

.v31-big-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-height: 120px;
  padding: var(--space-3) var(--space-2);
  border: none;
  border-radius: var(--radius-xl);
  cursor: pointer;
  transition: transform 0.1s ease, box-shadow 0.15s ease;
  box-shadow: 0 2px 12px rgba(0,0,0,0.06);
  font-family: inherit;
}

.v31-big-btn:active {
  transform: scale(0.95);
}

.v31-big-btn-dialog {
  background: linear-gradient(135deg, #E3F0FD 0%, #F0F7FF 100%);
  border: 2px solid #B8D8F8;
}

.v31-big-btn-dialog:active {
  background: linear-gradient(135deg, #D0E5FB 0%, #E3F0FD 100%);
}

.v31-big-btn-draw {
  background: linear-gradient(135deg, #FFE0E6 0%, #FFF0F5 100%);
  border: 2px solid #FFB8C6;
}

.v31-big-btn-draw:active {
  background: linear-gradient(135deg, #FFD0DA 0%, #FFE0E6 100%);
}

.v31-big-btn-doodle {
  background: linear-gradient(135deg, #EDE7FF 0%, #F3F0FF 100%);
  border: 2px solid #C4B5FD;
}

.v31-big-btn-doodle:active {
  background: linear-gradient(135deg, #DDD6FE 0%, #EDE7FF 100%);
}

.v31-big-icon {
  font-size: 48px;
}

.v31-big-label {
  font-size: var(--font-body-sm);
  font-weight: var(--weight-semibold);
  color: var(--text-primary);
  text-align: center;
  line-height: 1.3;
}

/* --- 4. 更多入口（次级） --- */
.v31-secondary-entries {
  display: flex;
  gap: var(--space-3);
}

.v31-secondary-btn {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: var(--space-3);
  border: none;
  border-radius: var(--radius-lg);
  background: rgba(255,255,255,0.72);
  box-shadow: 0 1px 4px rgba(0,0,0,0.04);
  cursor: pointer;
  font-size: var(--font-body);
  font-weight: var(--weight-medium);
  color: var(--text-primary);
  font-family: inherit;
  transition: transform 0.1s ease, box-shadow 0.15s ease;
}

.v31-secondary-btn:active {
  transform: scale(0.96);
  box-shadow: 0 1px 8px rgba(0,0,0,0.1);
}

.v31-secondary-icon {
  font-size: 1.4rem;
}

/* --- 5. 最近作品条 --- */
.v31-artworks-label {
  font-size: var(--font-body);
  font-weight: var(--weight-semibold);
  color: var(--text-primary);
  margin-bottom: var(--space-2);
}

.v31-artworks-strip {
  display: flex;
  gap: var(--space-3);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  -ms-overflow-style: none;
  padding-bottom: var(--space-1);
}

.v31-artworks-strip::-webkit-scrollbar {
  display: none;
}

.v31-artwork-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-1);
  flex-shrink: 0;
  scroll-snap-align: start;
  cursor: pointer;
}

.v31-artwork-thumb {
  width: 88px;
  height: 88px;
  border-radius: var(--radius-lg);
  object-fit: cover;
  background: #F0F0F0;
  box-shadow: 0 2px 8px rgba(0,0,0,0.08);
}

.v31-artwork-emoji-fallback {
  width: 88px;
  height: 88px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 36px;
  background: linear-gradient(135deg, #F5F5F5, #E8E8E8);
  border-radius: var(--radius-lg);
  box-shadow: 0 2px 8px rgba(0,0,0,0.06);
}

.v31-artwork-title {
  font-size: var(--font-caption);
  color: var(--text-secondary);
  text-align: center;
  max-width: 88px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.v31-artworks-empty {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: var(--space-4);
  width: 100%;
  background: rgba(255,255,255,0.6);
  border-radius: var(--radius-lg);
  font-size: var(--font-body-sm);
  color: var(--text-hint);
  cursor: pointer;
}

/* --- 响应式调整 --- */

/* 平板横屏 (480px+) */
@media (min-width: 480px) {
  .v31-big-btns {
    grid-template-columns: repeat(3, 1fr);
    max-width: 540px;
    margin: 0 auto;
  }

  .v31-big-btn {
    min-height: 140px;
  }

  .hero-emoji {
    font-size: 88px;
    width: 120px;
    height: 120px;
    line-height: 120px;
  }

  .hero-greeting {
    font-size: var(--font-heading);
  }
}

/* 桌面端 (768px+) */
@media (min-width: 768px) {
  .home-v31-section {
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: var(--space-4);
  }

  .v31-big-btns {
    max-width: 480px;
    margin: 0 auto;
  }

  .v31-big-btn {
    min-height: 150px;
  }

  .home-v31-hero {
    max-width: 600px;
    margin: 0 auto;
  }
}

/* ==================== 38. v3.1 Dual-Mode TabBar ==================== */

/* SVG icon in tab */
.tab-icon-svg {
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform var(--transition-bouncy);
}
.tab-item.active .tab-icon-svg {
  transform: scale(1.12);
}

/* Touch feedback on tab items */
.tab-item {
  user-select: none;
  -webkit-user-select: none;
  touch-action: manipulation;
}

/* Parent mode top bar */
.parent-mode-bar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 72px;
  z-index: var(--z-fixed);
  display: flex;
  justify-content: center;
  padding: 0 var(--space-5);
}
.parent-back-btn {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-4);
  background: rgba(255,255,255,0.88);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255,255,255,0.6);
  border-radius: var(--radius-full);
  font-size: 0.8rem;
  font-weight: var(--weight-semibold);
  color: var(--color-purple);
  cursor: pointer;
  box-shadow: var(--shadow-clay-floating);
  transition: all var(--transition-base);
  font-family: inherit;
}
.parent-back-btn:hover {
  transform: translateY(-1px);
  box-shadow: var(--shadow-clay-raised);
}
.parent-back-btn:active {
  transform: scale(0.95);
}

/* Parent mode tabbar variant */
.tab-bar-parent {
  border: 1px solid rgba(147,112,219,0.15);
}
.tab-bar-parent .tab-item.active {
  color: var(--color-purple);
  background: rgba(147,112,219,0.1);
}

/* Dark mode parent tabbar */
body.dark-mode .parent-back-btn {
  background: rgba(39,39,65,0.9);
  border-color: rgba(147,112,219,0.2);
  color: #B088E8;
}
body.dark-mode .tab-bar-parent {
  border-color: rgba(147,112,219,0.2);
}
body.dark-mode .tab-bar-parent .tab-item.active {
  color: #C9A8F5;
  background: rgba(147,112,219,0.15);
}

/* Baby mode tabbar adjustments */
body.baby-mode .tab-label {
  font-size: 0.7rem;
}
body.baby-mode .tab-icon-svg {
  font-size: 1.6rem;
}

/* ==================== 39. v3.1 PIN Modal ==================== */

.pin-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.45);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10001;
  animation: modalFadeIn 0.25s ease;
  padding: var(--space-4);
}

.pin-modal-card {
  background: #FFFFFF;
  border-radius: var(--radius-3xl);
  padding: var(--space-6) var(--space-5);
  max-width: 340px;
  width: 100%;
  text-align: center;
  box-shadow: 0 20px 60px rgba(0,0,0,0.18);
  animation: modalBounceIn 0.4s cubic-bezier(0.34,1.56,0.64,1);
  position: relative;
}

.pin-modal-close {
  position: absolute;
  top: var(--space-3);
  right: var(--space-3);
  width: 32px;
  height: 32px;
  border-radius: var(--radius-full);
  border: none;
  background: var(--bg-glass);
  color: var(--text-hint);
  font-size: 1rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all var(--transition-base);
}
.pin-modal-close:hover {
  background: var(--bg-hover);
  color: var(--text-primary);
}

.pin-modal-title {
  font-size: var(--font-xl);
  font-weight: var(--weight-bold);
  color: var(--text-primary);
  margin-bottom: var(--space-1);
  margin-top: var(--space-2);
}

.pin-modal-subtitle {
  font-size: var(--font-sm);
  color: var(--text-secondary);
  margin-bottom: var(--space-5);
}

.pin-modal-step-label {
  font-size: var(--font-sm);
  font-weight: var(--weight-semibold);
  color: var(--text-secondary);
  margin-bottom: var(--space-2);
  text-align: left;
}

/* PIN input row */
.pin-input-row {
  display: flex;
  gap: var(--space-3);
  justify-content: center;
  margin-bottom: var(--space-4);
}

.pin-dot {
  width: 52px;
  height: 58px;
  border: 2.5px solid var(--border-light);
  border-radius: var(--radius-lg);
  text-align: center;
  font-size: var(--font-2xl);
  font-weight: var(--weight-bold);
  color: var(--text-primary);
  background: var(--bg-glass);
  caret-color: var(--color-purple);
  transition: all var(--transition-base);
  font-family: inherit;
  outline: none;
  -webkit-appearance: none;
}
.pin-dot:focus {
  border-color: var(--color-purple);
  box-shadow: 0 0 0 3px rgba(147,112,219,0.15);
  background: #FFFFFF;
}
.pin-dot:disabled {
  opacity: 0.4;
  background: var(--bg-soft);
  cursor: not-allowed;
}

.pin-modal-status {
  min-height: 24px;
  margin-bottom: var(--space-4);
  font-size: var(--font-sm);
  line-height: 1.5;
}

.pin-error-text {
  color: var(--color-error);
  font-weight: var(--weight-semibold);
}
.pin-warning-text {
  color: var(--color-orange);
  font-size: var(--font-xs);
}
.pin-success-text {
  color: #2ECC71;
  font-weight: var(--weight-semibold);
}

.pin-modal-buttons {
  display: flex;
  gap: var(--space-3);
}

.pin-modal-btn {
  flex: 1;
  min-height: 48px;
  border: none;
  border-radius: var(--radius-full);
  font-size: var(--font-md);
  font-weight: var(--weight-bold);
  cursor: pointer;
  transition: all var(--transition-bouncy);
  font-family: inherit;
}
.pin-modal-btn:active {
  transform: scale(0.95);
}
.pin-modal-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.pin-btn-cancel {
  background: var(--bg-glass);
  color: var(--text-secondary);
  border: 2px solid var(--border-light);
}

.pin-btn-confirm {
  background: linear-gradient(135deg, var(--primary-purple) 0%, #B088E8 100%);
  color: #FFFFFF;
  box-shadow: 0 4px 16px rgba(147,112,219,0.3);
}

.pin-modal-link {
  margin-top: var(--space-4);
  background: none;
  border: none;
  color: var(--color-purple);
  font-size: var(--font-sm);
  font-weight: var(--weight-semibold);
  cursor: pointer;
  font-family: inherit;
  transition: opacity var(--transition-base);
}
.pin-modal-link:hover {
  opacity: 0.8;
}

/* PIN shake animation */
.pin-shake {
  animation: pinShake 0.5s ease-in-out;
}
@keyframes pinShake {
  0%, 100% { transform: translateX(0); }
  15% { transform: translateX(-8px); }
  30% { transform: translateX(8px); }
  45% { transform: translateX(-6px); }
  60% { transform: translateX(6px); }
  75% { transform: translateX(-3px); }
  90% { transform: translateX(3px); }
}

/* Dark mode PIN modal */
body.dark-mode .pin-modal-card {
  background: #272741;
}
body.dark-mode .pin-dot {
  background: rgba(255,255,255,0.05);
  border-color: rgba(255,255,255,0.12);
  color: #E8E8F0;
}
body.dark-mode .pin-dot:focus {
  border-color: #B088E8;
  box-shadow: 0 0 0 3px rgba(176,136,232,0.2);
  background: rgba(255,255,255,0.08);
}
body.dark-mode .pin-btn-cancel {
  background: rgba(255,255,255,0.06);
  border-color: rgba(255,255,255,0.1);
  color: #B0B0C8;
}
body.dark-mode .pin-modal-close {
  background: rgba(255,255,255,0.06);
  color: #B0B0C8;
}
body.dark-mode .pin-modal-close:hover {
  background: rgba(255,255,255,0.12);
  color: #E8E8F0;
}

/* ==================== 40. v3.1 Profile PIN Entry ==================== */

.profile-pin-entry {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-4);
  background: var(--bg-glass);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-lg);
  cursor: pointer;
  transition: all var(--transition-base);
  font-size: var(--font-sm);
  color: var(--text-hint);
}
.profile-pin-entry:hover {
  border-color: var(--color-purple);
  background: rgba(147,112,219,0.04);
}
.profile-pin-entry:active {
  transform: scale(0.97);
}
.profile-pin-entry .pin-entry-icon {
  flex-shrink: 0;
}
.profile-pin-entry .pin-entry-text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
.profile-pin-entry .pin-entry-title {
  font-weight: var(--weight-semibold);
  color: var(--text-primary);
}
.profile-pin-entry .pin-entry-desc {
  font-size: var(--font-xs);
  color: var(--text-hint);
}

@media (max-width: 420px) {
  .pin-dot {
    width: 48px;
    height: 54px;
    font-size: var(--font-xl);
  }
  .parent-mode-bar {
    bottom: 64px;
  }
}

/* Tab icon SVG responsive sizing */
@media (min-width: 768px) {
  .tab-icon-svg svg {
    width: 30px !important;
    height: 30px !important;
  }
}

/* ============================================================
   31. v3.1 Profile 个人中心改版
   ============================================================ */

.page-profile-v31 {
  background: linear-gradient(180deg, #FFF5F2 0%, #FFF8F5 40%, #FFFDF7 100%) !important;
}

.profile-v31-container {
  padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 90px);
}

/* --- 双模式切换 Tab --- */
.profile-mode-tabs {
  display: flex;
  margin: var(--space-4) var(--space-4) var(--space-3);
  background: #F5F5F5;
  border-radius: var(--radius-xl);
  padding: 4px;
  gap: 4px;
}
.profile-mode-tab {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-4);
  border: none;
  border-radius: var(--radius-lg);
  background: transparent;
  font-size: var(--font-body);
  font-weight: var(--weight-bold);
  color: var(--text-hint);
  cursor: pointer;
  transition: all 0.2s ease;
}
.profile-mode-tab--active {
  background: #FFFFFF;
  color: var(--text-primary);
  box-shadow: 0 1px 4px rgba(0,0,0,0.08);
}
.profile-mode-tab-icon {
  font-size: 1.25rem;
  line-height: 1;
}
.profile-mode-tab-label {
  font-size: var(--font-body-sm);
}

body.dark-mode .profile-mode-tabs {
  background: #2A2A2A;
}
body.dark-mode .profile-mode-tab--active {
  background: #3A3A3A;
  color: #EEE;
}

/* --- 空档案状态 --- */
.profile-v31-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 60vh;
  padding: var(--space-6);
  text-align: center;
}
.profile-v31-empty .empty-emoji { font-size: 4rem; margin-bottom: var(--space-3); }
.profile-v31-empty .empty-title { font-size: var(--font-subtitle); font-weight: var(--weight-bold); color: var(--text-primary); margin-bottom: var(--space-1); }
.profile-v31-empty .empty-desc { font-size: var(--font-body-sm); color: var(--text-hint); }

/* --- 1. 角色信息区卡片 --- */
.profile-v31-hero {
  padding: var(--space-4) var(--space-4) var(--space-2);
}

.v31-hero-card {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-5);
  background: linear-gradient(135deg, #FFF0E8 0%, #FFE8F0 50%, #F0EBFF 100%);
  border-radius: var(--radius-2xl);
  box-shadow: 0 4px 20px rgba(255, 143, 163, 0.12), 0 1px 4px rgba(0,0,0,0.04);
  border: 2px solid rgba(255, 169, 77, 0.15);
}

.v31-hero-emoji {
  width: 80px;
  height: 80px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255,255,255,0.7);
  border-radius: 50%;
  box-shadow: 0 4px 16px rgba(0,0,0,0.06);
}

.v31-hero-emoji-text {
  font-size: 48px;
  line-height: 1;
}

.v31-hero-info {
  flex: 1;
  min-width: 0;
}

.v31-hero-name {
  font-size: var(--font-title);
  font-weight: var(--weight-bold);
  color: var(--text-primary);
  margin-bottom: var(--space-1);
  background: linear-gradient(135deg, #FF8FA3, #FFA94D);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.v31-hero-companion {
  font-size: var(--font-body-sm);
  color: var(--text-secondary);
}

/* No-child-profile parent hero (inline create prompt) */
.profile-no-child-hero {
  padding-top: var(--space-6);  /* push down from top edge */
}

.profile-no-child-hero .v31-hero-card--add {
  background: linear-gradient(135deg, #FFF8E1 0%, #FFF0E8 50%, #E8F5FF 100%);
  border: 2px dashed rgba(255, 169, 77, 0.3);
  cursor: pointer;
}

.v31-menu-item--info {
  cursor: default;
  pointer-events: none;
}

/* --- 2. 成就区域 --- */
.profile-v31-section {
  padding: 0 var(--space-4);
  margin-bottom: var(--space-3);
}

.v31-achievement-card {
  background: #FFFFFF;
  border-radius: var(--radius-xl);
  padding: var(--space-4);
  box-shadow: 0 2px 12px rgba(0,0,0,0.04);
  border: 1px solid rgba(0,0,0,0.04);
}

.v31-achievement-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--space-3);
}

.v31-achievement-title {
  font-size: var(--font-body);
  font-weight: var(--weight-bold);
  color: var(--text-primary);
}

.v31-achievement-progress {
  font-size: var(--font-caption);
  color: var(--text-hint);
  font-weight: var(--weight-semibold);
}

.v31-achievement-milestones {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-bottom: var(--space-2);
}

.v31-milestone-chip {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 4px 12px;
  background: var(--bg-glass);
  border-radius: var(--radius-full);
  font-size: var(--font-caption);
  color: var(--text-primary);
  border: 1px solid var(--border-light);
  transition: all var(--transition-base);
}

.v31-milestone-chip.v31-milestone-new {
  background: linear-gradient(135deg, #FEF3C7, #FDE68A);
  border-color: #FBBF24;
  animation: milestoneGlow 2s ease-in-out infinite;
}

@keyframes milestoneGlow {
  0%, 100% { box-shadow: 0 0 4px rgba(251, 191, 36, 0.3); }
  50% { box-shadow: 0 0 12px rgba(251, 191, 36, 0.6); }
}

.v31-milestone-icon {
  font-size: 1rem;
}

.v31-milestone-label {
  font-weight: var(--weight-medium);
}

.v31-achievement-empty {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: var(--space-2);
  width: 100%;
  font-size: var(--font-caption);
  color: var(--text-hint);
}

.v31-achievement-footer {
  display: flex;
  justify-content: flex-end;
}

.v31-achievement-view-all {
  font-size: var(--font-caption);
  color: var(--color-primary);
  font-weight: var(--weight-semibold);
  cursor: pointer;
  transition: opacity var(--transition-base);
}
.v31-achievement-view-all:active { opacity: 0.6; }

/* --- 3. 档案横向滑动 --- */
.v31-profiles-label {
  font-size: var(--font-body);
  font-weight: var(--weight-bold);
  color: var(--text-primary);
  margin-bottom: var(--space-2);
}

.v31-profiles-carousel {
  display: flex;
  gap: var(--space-3);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  -ms-overflow-style: none;
  padding-bottom: var(--space-1);
  margin-bottom: var(--space-2);
}

.v31-profiles-carousel::-webkit-scrollbar { display: none; }

.v31-carousel-card {
  position: relative;
  flex-shrink: 0;
  scroll-snap-align: start;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-1);
  width: 88px;
  padding: var(--space-3) var(--space-2);
  background: #FFFFFF;
  border-radius: var(--radius-lg);
  box-shadow: 0 2px 8px rgba(0,0,0,0.04);
  border: 2px solid transparent;
  cursor: pointer;
  transition: all var(--transition-base);
  text-align: center;
}

.v31-carousel-card:active { transform: scale(0.95); }

.v31-carousel-card.v31-carousel-active {
  border-color: var(--color-orange);
  box-shadow: 0 2px 12px rgba(255, 169, 77, 0.25);
}

.v31-carousel-emoji {
  font-size: 2rem;
  line-height: 1;
}

.v31-carousel-name {
  font-size: var(--font-caption);
  font-weight: var(--weight-semibold);
  color: var(--text-primary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 100%;
}

.v31-carousel-character {
  font-size: 12px;
  color: var(--text-hint);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 100%;
}

.v31-carousel-check {
  position: absolute;
  top: 4px;
  right: 4px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--color-orange);
  color: #fff;
  font-size: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: var(--weight-bold);
}

.v31-carousel-delete {
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0,0,0,0.05);
  border: none;
  border-radius: 50%;
  font-size: 12px;
  color: var(--text-hint);
  cursor: pointer;
  transition: all var(--transition-base);
}

.v31-carousel-actions {
  position: absolute;
  top: 2px;
  left: 2px;
  display: flex;
  gap: 4px;
  opacity: 0;
  transition: opacity var(--transition-base);
}
.v31-carousel-card:hover .v31-carousel-actions,
.v31-carousel-card:active .v31-carousel-actions {
  opacity: 1;
}

.v31-carousel-edit {
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0,0,0,0.05);
  border: none;
  border-radius: 50%;
  font-size: 12px;
  color: var(--text-hint);
  cursor: pointer;
  transition: all var(--transition-base);
}
.v31-carousel-edit:active {
  background: rgba(66,133,244,0.12);
  color: #4285F4;
}

.v31-carousel-delete:active {
  background: rgba(255,0,0,0.12);
  color: #FF4444;
}

.v31-carousel-card.v31-carousel-add {
  border: 2px dashed var(--color-purple-light);
  background: rgba(237,231,255,0.3);
}
.v31-carousel-card.v31-carousel-add .v31-carousel-emoji {
  color: var(--color-purple);
  font-size: 1.4rem;
}
.v31-carousel-card.v31-carousel-add .v31-carousel-name {
  color: var(--color-purple);
}

.v31-carousel-empty {
  display: flex;
  align-items: center;
  padding: var(--space-4);
  width: 100%;
  font-size: var(--font-caption);
  color: var(--text-hint);
}

.v31-profiles-add {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-2);
  border: 2px dashed var(--color-purple-light);
  border-radius: var(--radius-lg);
  color: var(--color-purple);
  font-size: var(--font-body-sm);
  font-weight: var(--weight-semibold);
  cursor: pointer;
  transition: all var(--transition-base);
  background: rgba(237,231,255,0.2);
}
.v31-profiles-add:active {
  background: var(--color-purple-light);
  transform: scale(0.98);
}

/* --- 4. 菜单列表 --- */
.v31-menu-list {
  background: #FFFFFF;
  border-radius: var(--radius-xl);
  box-shadow: 0 2px 12px rgba(0,0,0,0.04);
  border: 1px solid rgba(0,0,0,0.04);
  overflow: hidden;
}

.v31-menu-item {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-4);
  cursor: pointer;
  transition: background var(--transition-base);
  border-bottom: 1px solid rgba(0,0,0,0.03);
  font-size: var(--font-body);
  color: var(--text-primary);
  min-height: 52px;
}
.v31-menu-item:last-child { border-bottom: none; }
.v31-menu-item:active { background: var(--bg-hover, rgba(0,0,0,0.02)); }

.v31-menu-toggle {
  cursor: default;
}
.v31-menu-toggle:active { background: transparent; }

.v31-menu-emoji {
  font-size: 1.3rem;
  flex-shrink: 0;
}

.v31-menu-label {
  flex: 1;
  font-weight: var(--weight-medium);
  color: var(--text-primary);
}

.v31-menu-arrow {
  font-size: var(--font-caption);
  color: var(--text-hint);
  flex-shrink: 0;
}

.v31-menu-value {
  font-size: var(--font-caption);
  color: var(--text-hint);
  flex-shrink: 0;
}

.v31-menu-item-wechat {
  cursor: pointer;
}

/* --- 5. 退出登录 --- */
.profile-v31-logout-section {
  padding-bottom: var(--space-6);
}

.v31-logout-btn {
  width: 100%;
  padding: var(--space-4);
  min-height: 52px;
  background: transparent;
  border: 1px solid rgba(255, 107, 107, 0.2);
  border-radius: var(--radius-xl);
  font-size: var(--font-body);
  font-weight: var(--weight-medium);
  color: #E03131;
  cursor: pointer;
  transition: all var(--transition-base);
  font-family: inherit;
}
.v31-logout-btn:active {
  background: rgba(255, 107, 107, 0.06);
  transform: scale(0.98);
}

/* ============================================================
   32. v3.1 Celebration 统一庆祝动画组件
   ============================================================ */

/* --- Celebration Overlay --- */
.celebration-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0,0,0,0.45);
  animation: fadeIn 0.25s ease;
}

/* --- Fireworks --- */
.celebration-fireworks {
  position: relative;
  width: 300px;
  height: 300px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.celebration-particle {
  position: absolute;
  top: 50%;
  left: 50%;
  animation: particleBurst 2s cubic-bezier(0.25, 0.46, 0.45, 0.94) var(--delay) forwards;
  opacity: 0;
  pointer-events: none;
}

@keyframes particleBurst {
  0% {
    transform: translate(0, 0) scale(1);
    opacity: 1;
  }
  60% {
    transform: translate(var(--tx), var(--ty)) scale(1.2);
    opacity: 0.9;
  }
  100% {
    transform: translate(var(--tx), calc(var(--ty) + 80px)) scale(0.2);
    opacity: 0;
  }
}

/* --- Badge Unlock --- */
.celebration-badge-unlock {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: var(--space-6);
  background: linear-gradient(135deg, #FFFFFF 0%, #FFF9F0 50%, #FFFAF5 100%);
  border-radius: var(--radius-2xl);
  max-width: 300px;
  width: 85%;
  box-shadow: 0 20px 60px rgba(0,0,0,0.15);
  animation: badgeBounceIn 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
  overflow: hidden;
}

@keyframes badgeBounceIn {
  0% { transform: scale(0.3); opacity: 0; }
  50% { transform: scale(1.08); opacity: 0.9; }
  70% { transform: scale(0.95); opacity: 1; }
  100% { transform: scale(1); opacity: 1; }
}

.badge-unlock-glow {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 150px;
  height: 150px;
  background: radial-gradient(circle, rgba(251, 191, 36, 0.3), transparent 70%);
  border-radius: 50%;
  transform: translate(-50%, -50%);
  animation: badgeGlowPulse 1.5s ease-in-out infinite;
}

@keyframes badgeGlowPulse {
  0%, 100% { transform: translate(-50%, -50%) scale(1); opacity: 0.5; }
  50% { transform: translate(-50%, -50%) scale(1.3); opacity: 0.8; }
}

.badge-unlock-icon {
  font-size: 4rem;
  margin-bottom: var(--space-2);
  position: relative;
  z-index: 1;
  animation: badgeIconBounce 0.6s ease-in-out infinite alternate;
}

@keyframes badgeIconBounce {
  0% { transform: translateY(0); }
  100% { transform: translateY(-8px); }
}

.badge-unlock-shine {
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: linear-gradient(
    45deg,
    transparent 30%,
    rgba(255,255,255,0.3) 50%,
    transparent 70%
  );
  animation: badgeShine 2s ease-in-out infinite;
  pointer-events: none;
}

@keyframes badgeShine {
  0% { transform: translateX(-100%) translateY(-100%) rotate(45deg); }
  100% { transform: translateX(100%) translateY(100%) rotate(45deg); }
}

.badge-unlock-title {
  font-size: var(--font-subtitle);
  font-weight: var(--weight-bold);
  color: #92400E;
  margin-bottom: var(--space-1);
  position: relative;
  z-index: 1;
}

.badge-unlock-name {
  font-size: var(--font-body);
  color: #B45309;
  font-weight: var(--weight-semibold);
  position: relative;
  z-index: 1;
}

/* Badge sparkles */
.badge-unlock-sparkle {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 6px;
  height: 6px;
  background: #FBBF24;
  border-radius: 50%;
  animation: sparkleFly 1.2s ease-out var(--sdelay) forwards;
  opacity: 0;
  pointer-events: none;
}

@keyframes sparkleFly {
  0% {
    transform: translate(0, 0) scale(0);
    opacity: 1;
  }
  50% {
    opacity: 0.8;
  }
  100% {
    transform: translate(var(--sx), var(--sy)) scale(1.5);
    opacity: 0;
  }
}

/* --- Challenge Complete --- */
.celebration-challenge-complete {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: var(--space-6);
  background: linear-gradient(135deg, #FEF3C7 0%, #FDE68A 50%, #FBBF24 100%);
  border-radius: var(--radius-2xl);
  max-width: 300px;
  width: 85%;
  box-shadow: 0 20px 60px rgba(0,0,0,0.15);
  animation: badgeBounceIn 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
  overflow: hidden;
}

.challenge-complete-icon {
  font-size: 4rem;
  margin-bottom: var(--space-2);
  animation: badgeIconBounce 0.6s ease-in-out infinite alternate;
}

.challenge-complete-title {
  font-size: var(--font-subtitle);
  font-weight: var(--weight-bold);
  color: #78350F;
  margin-bottom: var(--space-1);
}

.challenge-complete-score {
  display: inline-block;
  padding: var(--space-1) var(--space-4);
  background: rgba(255,255,255,0.6);
  border-radius: var(--radius-full);
  font-size: var(--font-body);
  font-weight: var(--weight-bold);
  color: #92400E;
  margin-bottom: var(--space-2);
}

.challenge-complete-msg {
  font-size: var(--font-body-sm);
  color: #92400E;
  opacity: 0.85;
}

/* Challenge particles (on top of card) */
.celebration-challenge-complete .challenge-particle {
  position: absolute;
  top: 50%;
  left: 50%;
  animation: particleBurstUp 2s cubic-bezier(0.25, 0.46, 0.45, 0.94) var(--delay) forwards;
  opacity: 0;
  pointer-events: none;
}

@keyframes particleBurstUp {
  0% {
    transform: translate(-50%, -50%) translate(0, 0) scale(1);
    opacity: 1;
  }
  60% {
    transform: translate(-50%, -50%) translate(var(--tx), var(--ty)) scale(1.2);
    opacity: 0.8;
  }
  100% {
    transform: translate(-50%, -50%) translate(var(--tx), calc(var(--ty) - 60px)) scale(0.1);
    opacity: 0;
  }
}

/* --- Streak Celebration --- */
.celebration-streak {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: var(--space-6);
  background: linear-gradient(135deg, #FF8FA3 0%, #FFA94D 100%);
  border-radius: var(--radius-2xl);
  max-width: 300px;
  width: 85%;
  box-shadow: 0 20px 60px rgba(255, 143, 163, 0.3);
  animation: badgeBounceIn 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
  overflow: hidden;
}

.streak-flame {
  font-size: 4rem;
  margin-bottom: var(--space-2);
  animation: flameBounce 0.8s ease-in-out infinite alternate;
}

@keyframes flameBounce {
  0% { transform: translateY(0) scale(1); }
  50% { transform: translateY(-12px) scale(1.15); }
  100% { transform: translateY(-6px) scale(1.05); }
}

.streak-title {
  font-size: var(--font-subtitle);
  font-weight: var(--weight-bold);
  color: #FFFFFF;
  margin-bottom: var(--space-1);
  text-shadow: 0 2px 4px rgba(0,0,0,0.15);
}

.streak-msg {
  font-size: var(--font-body);
  color: rgba(255,255,255,0.9);
  font-weight: var(--weight-semibold);
}

/* Rising embers */
.streak-ember {
  position: absolute;
  bottom: 10%;
  width: 8px;
  height: 8px;
  background: rgba(255,255,255,0.7);
  border-radius: 50%;
  animation: emberRise 1.8s ease-out var(--edelay) infinite;
  pointer-events: none;
}

@keyframes emberRise {
  0% {
    transform: translateY(0) translateX(0) scale(1);
    opacity: 0.9;
  }
  50% {
    opacity: 0.5;
  }
  100% {
    transform: translateY(-120px) translateX(var(--edrift)) scale(0.2);
    opacity: 0;
  }
}

/* --- Fade In --- */
@keyframes fadeIn {
  0% { opacity: 0; }
  100% { opacity: 1; }
}

/* ============================================================
   33. v3.1 Profile Dark Mode
   ============================================================ */

body.dark-mode .page-profile-v31 {
  background: linear-gradient(180deg, #1A1A2E 0%, #1E1E32 40%, #202035 100%) !important;
}

body.dark-mode .v31-hero-card {
  background: linear-gradient(135deg, #2D1F1A 0%, #2A1F2E 50%, #1F1F3A 100%);
  border-color: rgba(255, 169, 77, 0.15);
}

body.dark-mode .v31-hero-emoji {
  background: rgba(255,255,255,0.08);
}

body.dark-mode .v31-hero-name {
  color: #E8E8F0;
  -webkit-text-fill-color: #E8E8F0;
}

body.dark-mode .v31-hero-companion {
  color: #B0B0C8;
}

body.dark-mode .v31-achievement-card,
body.dark-mode .v31-menu-list {
  background: #26263A;
  border-color: rgba(255,255,255,0.06);
}

body.dark-mode .v31-achievement-title,
body.dark-mode .v31-profiles-label,
body.dark-mode .v31-menu-label,
body.dark-mode .v31-menu-item {
  color: #E8E8F0;
}

body.dark-mode .v31-menu-item {
  border-bottom-color: rgba(255,255,255,0.04);
}

body.dark-mode .v31-menu-item:active {
  background: rgba(255,255,255,0.03);
}

body.dark-mode .v31-milestone-chip {
  background: rgba(255,255,255,0.06);
  border-color: rgba(255,255,255,0.08);
  color: #D0D0E0;
}

body.dark-mode .v31-milestone-chip.v31-milestone-new {
  background: linear-gradient(135deg, #422006, #5C3A0A);
  border-color: #92400E;
  color: #FDE68A;
}

body.dark-mode .v31-carousel-card {
  background: #26263A;
  border-color: transparent;
  box-shadow: 0 2px 8px rgba(0,0,0,0.2);
}

body.dark-mode .v31-carousel-card.v31-carousel-active {
  border-color: #F59E0B;
  box-shadow: 0 2px 12px rgba(245, 158, 11, 0.2);
}

body.dark-mode .v31-carousel-name {
  color: #E8E8F0;
}

body.dark-mode .v31-carousel-character {
  color: #8080A0;
}

body.dark-mode .v31-carousel-card.v31-carousel-add {
  border-color: rgba(147,112,219,0.25);
  background: rgba(147,112,219,0.08);
}

body.dark-mode .v31-profiles-add {
  border-color: rgba(147,112,219,0.25);
  color: #B088E8;
  background: rgba(147,112,219,0.06);
}

body.dark-mode .v31-logout-btn {
  color: #FF6B6B;
  border-color: rgba(255,107,107,0.2);
}
body.dark-mode .v31-logout-btn:active {
  background: rgba(255,107,107,0.08);
}

body.dark-mode .v31-menu-value,
body.dark-mode .v31-menu-arrow,
body.dark-mode .v31-achievement-progress {
  color: #8080A0;
}

body.dark-mode .v31-achievement-view-all {
  color: #74C0FC;
}

body.dark-mode .v31-achievement-empty,
body.dark-mode .v31-carousel-empty {
  color: #606080;
}

/* Dark mode celebration overlays */
body.dark-mode .celebration-badge-unlock {
  background: linear-gradient(135deg, #27273A 0%, #2D2A2A 50%, #27273A 100%);
}
body.dark-mode .badge-unlock-title { color: #FDE68A; }
body.dark-mode .badge-unlock-name { color: #FBBF24; }

body.dark-mode .celebration-challenge-complete {
  background: linear-gradient(135deg, #422006 0%, #713F12 50%, #854D0E 100%);
}
body.dark-mode .challenge-complete-title { color: #FDE68A; }
body.dark-mode .challenge-complete-score { background: rgba(255,255,255,0.1); color: #FDE68A; }
body.dark-mode .challenge-complete-msg { color: #FBBF24; }

/* ================================================================
   Settings Page (v3.1 Phase 3-A) — 家长设置页
   ================================================================ */

.page-settings {
  min-height: 100vh;
  background: #F5F3F8;
  padding-bottom: calc(var(--space-8) + 160px);
}

/* Settings Header */
.settings-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-3) var(--space-4);
  background: rgba(255,255,255,0.85);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  position: sticky;
  top: 0;
  z-index: var(--z-sticky);
  border-bottom: 1px solid rgba(0,0,0,0.06);
  gap: var(--space-3);
}
.settings-header-title {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}
.settings-header-icon {
  font-size: 24px;
}
.settings-header-label {
  font-size: var(--font-subtitle);
  font-weight: 700;
  color: var(--text-primary);
}
.settings-back-child-btn {
  flex-shrink: 0;
  background: var(--gradient-warm);
  color: #FFF;
  border: none;
  border-radius: var(--radius-full);
  padding: 6px 14px;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  line-height: 1.3;
  text-align: center;
  min-height: 40px;
  box-shadow: 0 2px 8px rgba(255,143,163,0.3);
  transition: transform 0.2s, box-shadow 0.2s;
}
.settings-back-child-btn:active {
  transform: scale(0.95);
}

/* Settings Container */
.settings-container {
  padding-top: var(--space-1);
}

/* Settings Sections */
.settings-section {
  margin: var(--space-4) var(--space-4);
}
.settings-section-title {
  font-size: var(--font-body-sm);
  font-weight: 700;
  color: var(--text-hint);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: var(--space-3);
}

/* Settings Menu List */
.settings-menu-list {
  background: #FFF;
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-clay-sm);
  overflow: hidden;
}
.settings-menu-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-4);
  border-bottom: 1px solid #F0F0F0;
  cursor: pointer;
  transition: background 0.15s;
  min-height: 56px;
  gap: var(--space-3);
}
.settings-menu-item:last-child {
  border-bottom: none;
}
.settings-menu-item:active {
  background: rgba(0,0,0,0.03);
}
.settings-menu-left {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex: 1;
  min-width: 0;
}
.settings-menu-icon {
  font-size: 24px;
  flex-shrink: 0;
  width: 36px;
  text-align: center;
}
.settings-menu-info {
  min-width: 0;
}
.settings-menu-label {
  font-size: var(--font-body);
  font-weight: 600;
  color: var(--text-primary);
  line-height: 1.4;
}
.settings-menu-desc {
  font-size: var(--font-caption);
  color: var(--text-hint);
  line-height: 1.4;
  margin-top: 1px;
}
.settings-menu-arrow {
  font-size: var(--font-body);
  color: var(--text-hint);
  flex-shrink: 0;
}
.settings-menu-toggle {
  cursor: default;
}
.settings-menu-toggle:active {
  background: transparent;
}

/* Profile Grid */
.settings-profile-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-3);
}
.settings-profile-card {
  background: #FFF;
  border-radius: var(--radius-xl);
  padding: var(--space-4);
  text-align: center;
  cursor: pointer;
  box-shadow: var(--shadow-clay-sm);
  position: relative;
  transition: transform 0.15s, box-shadow 0.15s;
}
.settings-profile-card:active {
  transform: scale(0.97);
  box-shadow: 0 1px 4px rgba(0,0,0,0.06);
}
.settings-profile-active {
  border: 2px solid var(--color-purple);
  box-shadow: 0 0 0 3px rgba(180,167,246,0.25);
}
.settings-profile-avatar {
  font-size: 36px;
  margin-bottom: var(--space-2);
}
.settings-profile-name {
  font-size: var(--font-body);
  font-weight: 700;
  color: var(--text-primary);
  line-height: 1.3;
}
.settings-profile-char {
  font-size: var(--font-caption);
  color: var(--text-hint);
  margin-top: 2px;
}
.settings-profile-badge {
  position: absolute;
  top: 8px;
  right: 8px;
  background: var(--color-purple);
  color: #FFF;
  font-size: 12px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: var(--radius-full);
}
.settings-profile-actions {
  display: flex;
  gap: 10px;
  margin-top: var(--space-2);
  align-items: center;
}

.settings-profile-edit {
  background: none;
  border: 1px solid #E0E0E0;
  border-radius: var(--radius-full);
  padding: 6px 14px;
  font-size: var(--font-caption);
  color: var(--text-secondary);
  cursor: pointer;
  transition: all 0.15s;
  line-height: 1.4;
  min-height: 32px;
}
.settings-profile-edit:hover {
  background: #F5F5F5;
  border-color: var(--color-purple);
  color: var(--color-purple);
}

.settings-profile-delete {
  background: none;
  border: 1px solid #E0E0E0;
  border-radius: var(--radius-full);
  padding: 6px 14px;
  font-size: var(--font-caption);
  color: var(--text-hint);
  cursor: pointer;
  transition: all 0.15s;
  line-height: 1.4;
  min-height: 32px;
}
.settings-profile-delete:hover {
  background: #FFF0F0;
  border-color: #FF6B6B;
  color: #FF4444;
}

.settings-profile-add {
  border: 2px dashed #DDD;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 130px;
}
.settings-profile-add .settings-profile-avatar {
  font-size: 32px;
  color: var(--text-hint);
}
.settings-profile-add .settings-profile-name {
  color: var(--text-hint);
}
.settings-profile-empty {
  grid-column: 1 / -1;
  text-align: center;
  padding: var(--space-4);
  color: var(--text-hint);
  font-size: var(--font-body-sm);
}

/* Theme Segmented Control */
.settings-theme-row {
  background: #FFF;
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-clay-sm);
  padding: var(--space-3);
}
.settings-theme-segmented {
  display: flex;
  gap: 4px;
  background: #F0F0F0;
  border-radius: var(--radius-full);
  padding: 3px;
}
.settings-theme-opt {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-2);
  border: none;
  background: transparent;
  border-radius: var(--radius-full);
  font-size: var(--font-body-sm);
  font-weight: 600;
  color: var(--text-secondary);
  cursor: pointer;
  transition: all 0.2s;
  min-height: 44px;
}
.settings-theme-opt.active {
  background: #FFF;
  color: var(--color-purple);
  box-shadow: var(--shadow-clay-sm);
}
.settings-theme-icon {
  font-size: 18px;
}
.settings-theme-label {
  font-size: var(--font-body-sm);
}

/* Logout Button */
.settings-logout-btn {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: var(--space-4);
  background: #FFF;
  border: 1px solid #FF6B6B;
  border-radius: var(--radius-xl);
  color: #FF6B6B;
  font-size: var(--font-body);
  font-weight: 600;
  cursor: pointer;
  box-shadow: var(--shadow-clay-sm);
  transition: all 0.2s;
}
.settings-logout-btn:active {
  background: #FFF5F5;
  transform: scale(0.98);
}

/* Settings Footer */
.settings-footer {
  text-align: center;
  padding: var(--space-6) var(--space-4);
}
.settings-footer-text {
  font-size: var(--font-caption);
  color: var(--text-hint);
}

/* ================================================================
   Settings Page — Dark Mode
   ================================================================ */
body.dark-mode .page-settings {
  background: #1A1A2E;
}
body.dark-mode .settings-header {
  background: rgba(30,30,50,0.9);
  border-bottom-color: rgba(255,255,255,0.08);
}
body.dark-mode .settings-header-label {
  color: #E8E8F0;
}
body.dark-mode .settings-section-title {
  color: #6A6A6A;
}
body.dark-mode .settings-menu-list,
body.dark-mode .settings-theme-row {
  background: #22223A;
  box-shadow: 0 1px 4px rgba(0,0,0,0.3);
}
body.dark-mode .settings-menu-item {
  border-bottom-color: rgba(255,255,255,0.06);
  color: #CCC;
}
body.dark-mode .settings-menu-item:active {
  background: rgba(255,255,255,0.05);
}
body.dark-mode .settings-menu-label {
  color: #E0E0E8;
}
body.dark-mode .settings-menu-desc {
  color: #6A6A6A;
}
body.dark-mode .settings-menu-arrow {
  color: #777;
}
body.dark-mode .settings-profile-card {
  background: #22223A;
  box-shadow: 0 1px 4px rgba(0,0,0,0.3);
}
body.dark-mode .settings-profile-active {
  border-color: #B4A7F6;
  box-shadow: 0 0 0 3px rgba(180,167,246,0.2);
}
body.dark-mode .settings-profile-name {
  color: #E0E0E8;
}
body.dark-mode .settings-profile-char {
  color: #777;
}
body.dark-mode .settings-profile-edit {
  border-color: #444;
  color: #AAA;
}
body.dark-mode .settings-profile-delete {
  border-color: #444;
  color: #6A6A6A;
}
body.dark-mode .settings-profile-add {
  border-color: #333;
}
body.dark-mode .settings-theme-segmented {
  background: #2A2A40;
}
body.dark-mode .settings-theme-opt {
  color: #6A6A6A;
}
body.dark-mode .settings-theme-opt.active {
  background: #333350;
  color: #B4A7F6;
  box-shadow: 0 1px 4px rgba(0,0,0,0.4);
}
body.dark-mode .settings-logout-btn {
  background: #22223A;
  border-color: #FF6B6B;
  color: #FF6B6B;
}
body.dark-mode .settings-logout-btn:active {
  background: rgba(255,107,107,0.1);
}
body.dark-mode .settings-footer-text {
  color: #555;
}

/* ================================================================
   Dashboard — Dark Mode (v3.1 updates)
   ================================================================ */
body.dark-mode .dash-header {
  background: rgba(30,30,50,0.9);
  border-bottom-color: rgba(255,255,255,0.08);
}
body.dark-mode .dash-header-title {
  color: #E8E8F0;
}
body.dark-mode .dash-header-subtitle {
  color: #6A6A6A;
}

/* ================================================================
   Settings Page — Baby Mode
   ================================================================ */
body.baby-mode .page-settings {
  background: #FFF9F5;
}
body.baby-mode .settings-header {
  background: rgba(255,249,245,0.9);
}
body.baby-mode .settings-section-title {
  font-size: var(--font-body);
  color: #C09080;
}
body.baby-mode .settings-menu-list {
  box-shadow: 0 2px 12px rgba(0,0,0,0.05);
  border-radius: 24px;
}
body.baby-mode .settings-menu-item {
  padding: var(--space-4) var(--space-3);
  min-height: 60px;
}
body.baby-mode .settings-menu-icon {
  font-size: 28px;
}
body.baby-mode .settings-menu-label {
  font-size: var(--font-subtitle);
}
body.baby-mode .settings-profile-card {
  border-radius: 24px;
  box-shadow: 0 2px 12px rgba(0,0,0,0.06);
}
body.baby-mode .settings-profile-avatar {
  font-size: 42px;
}
body.baby-mode .settings-profile-name {
  font-size: var(--font-subtitle);
}
body.baby-mode .settings-theme-opt {
  min-height: 50px;
  font-size: var(--font-body);
}

/* ============================================================
   34. v3.1 Phase 3-B — 语音引导 + 首次使用引导
   ============================================================ */

/* --- 34.1 Voice Guide Indicator --- */

.voice-guide-indicator {
  position: fixed;
  top: calc(var(--space-4) + env(safe-area-inset-top, 0px));
  right: var(--space-4);
  z-index: 100;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: none;
  background: rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
  -webkit-tap-highlight-color: transparent;
}

.voice-guide-indicator:active {
  transform: scale(0.9);
}

.voice-guide-indicator.voice-guide-on {
  background: rgba(255, 255, 255, 0.9);
  box-shadow: 0 2px 16px rgba(116, 192, 252, 0.2);
}

.voice-guide-indicator.voice-guide-off {
  background: rgba(255, 255, 255, 0.6);
  opacity: 0.6;
}

.voice-guide-icon {
  font-size: 1.25rem;
  line-height: 1;
}

/* Home page voice area layout */
.home-replay-container {
  display: flex;
  justify-content: center;
  margin-top: var(--space-2);
  margin-bottom: var(--space-3);
}

/* --- Voice Replay Button (儿童友好语音重播) --- */
.voice-replay-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-5);
  background: linear-gradient(135deg, #FF6B9D 0%, #FF8FA3 50%, #FFA94D 100%);
  border: none;
  border-radius: var(--radius-full);
  box-shadow: 0 4px 16px rgba(255, 107, 157, 0.35), 0 0 0 4px rgba(255, 143, 163, 0.12);
  cursor: pointer;
  transition: all var(--transition-base);
  position: relative;
  overflow: hidden;
  animation: voiceReplayPulse 2.5s ease-in-out infinite;
}
.voice-replay-btn:active {
  transform: scale(0.92);
  box-shadow: 0 2px 8px rgba(255, 107, 157, 0.25), 0 0 0 2px rgba(255, 143, 163, 0.1);
}
.voice-replay-btn--playing {
  animation: voiceReplayPlaying 0.6s ease-in-out infinite;
  background: linear-gradient(135deg, #FF8FA3 0%, #FFA94D 100%);
}
.voice-replay-icon {
  font-size: 1.5rem;
  line-height: 1;
}
.voice-replay-label {
  font-size: var(--font-body);
  font-weight: var(--weight-bold);
  color: #FFFFFF;
  text-shadow: 0 1px 2px rgba(0,0,0,0.15);
}
.voice-replay-ripple {
  position: absolute;
  inset: -4px;
  border-radius: var(--radius-full);
  border: 2px solid rgba(255,255,255,0.4);
  opacity: 0;
  animation: voiceRipple 2s ease-out infinite;
  pointer-events: none;
}
@keyframes voiceReplayPulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.04); }
}
@keyframes voiceReplayPlaying {
  0%, 100% { transform: scale(1); }
  25% { transform: scale(1.06); }
  75% { transform: scale(0.96); }
}
@keyframes voiceRipple {
  0% { opacity: 0.6; transform: scale(1); }
  100% { opacity: 0; transform: scale(1.2); }
}

/* --- 34.1b Inline Speak Button (v3.1.1) — small 🔊 in modals/cards --- */
.voice-inline-speak-btn {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  background: rgba(255, 143, 163, 0.12);
  border: 1.5px solid rgba(255, 143, 163, 0.3);
  border-radius: var(--radius-full);
  padding: 2px 10px 2px 6px;
  cursor: pointer;
  transition: all 0.2s;
  font-family: inherit;
  position: relative;
  flex-shrink: 0;
}
.voice-inline-speak-btn:hover,
.voice-inline-speak-btn:active {
  background: rgba(255, 143, 163, 0.22);
  border-color: rgba(255, 143, 163, 0.6);
  transform: scale(1.05);
}
.voice-inline-speak-btn--playing {
  animation: voiceReplayPlaying 0.6s ease-in-out infinite;
  background: linear-gradient(135deg, #FF8FA3 0%, #FFA94D 100%) !important;
  border-color: transparent !important;
}
.voice-inline-speak-btn--playing .voice-inline-icon,
.voice-inline-speak-btn--playing .voice-inline-label {
  color: #fff;
}
.voice-inline-icon {
  font-size: 1rem;
  line-height: 1;
}
.voice-inline-label {
  font-size: 0.75rem;
  font-weight: var(--weight-bold);
  color: #FF6B9D;
}

/* Dark mode */
body.dark-mode .voice-inline-speak-btn {
  background: rgba(255, 143, 163, 0.15);
  border-color: rgba(255, 143, 163, 0.25);
}
body.dark-mode .voice-inline-speak-btn:hover,
body.dark-mode .voice-inline-speak-btn:active {
  background: rgba(255, 143, 163, 0.25);
  border-color: rgba(255, 143, 163, 0.5);
}
body.dark-mode .voice-inline-label {
  color: #FF8FA3;
}

/* --- 34.2 Onboarding Overlay --- */

.onboarding-overlay {
  position: fixed;
  inset: 0;
  z-index: 2000;
  background: rgba(0, 0, 0, 0);
  transition: background 0.4s ease;
  pointer-events: none;
}

.onboarding-overlay--visible {
  background: rgba(0, 0, 0, 0.55);
  pointer-events: auto;
}

/* --- 34.3 Onboarding Highlight Ring --- */

.onboarding-highlight {
  position: fixed;
  z-index: 2001;
  border-radius: 20px;
  border: 3px solid transparent;
  box-shadow:
    0 0 0 4px rgba(255, 143, 163, 0.3),
    0 0 0 8px rgba(255, 143, 163, 0.15);
  opacity: 0;
  transform: scale(0.95);
  transition: opacity 0.35s ease, transform 0.35s ease, box-shadow 0.35s ease;
  pointer-events: none;
  animation: none;
}

.onboarding-highlight--visible {
  opacity: 1;
  transform: scale(1);
  animation: onboardingPulse 2s ease-in-out infinite;
}

@keyframes onboardingPulse {
  0%, 100% {
    box-shadow:
      0 0 0 4px rgba(255, 143, 163, 0.3),
      0 0 0 8px rgba(255, 143, 163, 0.15);
  }
  50% {
    box-shadow:
      0 0 0 6px rgba(255, 143, 163, 0.5),
      0 0 0 12px rgba(255, 143, 163, 0.25);
  }
}

/* --- 34.4 Onboarding Tooltip --- */

.onboarding-tooltip {
  position: fixed;
  z-index: 2002;
  max-width: 300px;
  width: 85%;
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 0.35s ease, transform 0.35s ease;
  pointer-events: auto;
}

.onboarding-tooltip--visible {
  opacity: 1;
  transform: translateY(0);
}

.onboarding-tooltip--final {
  /* Centered by JS */
}

.onboarding-tooltip-arrow {
  text-align: center;
  font-size: 1.5rem;
  color: #FFFFFF;
  margin-bottom: -4px;
  line-height: 1;
  animation: arrowBounce 1s ease-in-out infinite;
}

@keyframes arrowBounce {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(6px); }
}

.onboarding-tooltip-body {
  background: linear-gradient(135deg, #FFFFFF 0%, #FFF5F7 100%);
  border-radius: 20px;
  padding: 24px 20px 20px;
  text-align: center;
  box-shadow:
    0 8px 32px rgba(0, 0, 0, 0.12),
    0 2px 8px rgba(0, 0, 0, 0.06);
}

.onboarding-tooltip-step {
  display: inline-block;
  background: var(--gradient-warm);
  color: #FFFFFF;
  font-size: 0.75rem;
  font-weight: 700;
  padding: 2px 12px;
  border-radius: 12px;
  margin-bottom: 12px;
}

.onboarding-tooltip-title {
  font-size: 1.25rem;
  font-weight: 800;
  color: #333;
  margin-bottom: 6px;
  line-height: 1.4;
}

.onboarding-tooltip-subtitle {
  font-size: 0.9rem;
  color: #6A6A6A;
  margin-bottom: 18px;
  line-height: 1.4;
}

.onboarding-final-emoji {
  font-size: 3rem;
  margin-bottom: 8px;
  animation: flameBounce 0.8s ease-in-out infinite alternate;
}

/* --- 34.5 Onboarding Buttons --- */

.onboarding-tooltip-actions {
  display: flex;
  gap: 12px;
  justify-content: center;
}

.onboarding-btn {
  padding: 10px 24px;
  border-radius: 50px;
  border: none;
  font-size: 0.95rem;
  font-weight: 700;
  font-family: inherit;
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
  -webkit-tap-highlight-color: transparent;
  min-height: 44px;
}

.onboarding-btn:active {
  transform: scale(0.95);
}

.onboarding-btn-skip {
  background: #F0F0F5;
  color: #6A6A6A;
}

.onboarding-btn-next {
  background: var(--gradient-warm);
  color: #FFFFFF;
  box-shadow: 0 2px 12px rgba(255, 143, 163, 0.3);
}

.onboarding-btn-start {
  display: block;
  width: 100%;
  margin-top: 8px;
  background: var(--gradient-warm);
  color: #FFFFFF;
  box-shadow: 0 4px 16px rgba(255, 143, 163, 0.35);
  font-size: 1.1rem;
  padding: 14px 24px;
}

/* ============================================================
   35. Dark Mode — Onboarding & Voice Guide
   ============================================================ */

body.dark-mode .voice-guide-indicator {
  background: rgba(30, 30, 50, 0.85);
}

body.dark-mode .voice-guide-indicator.voice-guide-on {
  background: rgba(40, 40, 65, 0.9);
  box-shadow: 0 2px 16px rgba(116, 192, 252, 0.15);
}

body.dark-mode .voice-guide-indicator.voice-guide-off {
  background: rgba(30, 30, 50, 0.5);
}

body.dark-mode .onboarding-tooltip-body {
  background: linear-gradient(135deg, #2A2A3E 0%, #252535 100%);
}

body.dark-mode .onboarding-tooltip-title {
  color: #E8E8F0;
}

body.dark-mode .onboarding-tooltip-subtitle {
  color: #6A6A6A8A0;
}

body.dark-mode .onboarding-btn-skip {
  background: rgba(255, 255, 255, 0.08);
  color: #6A6A6A8A0;
}

body.dark-mode .onboarding-btn-next,
body.dark-mode .onboarding-btn-start {
  color: #FFFFFF;
}

body.dark-mode .onboarding-tooltip-arrow {
  color: #CCCCDD;
}

/* ===== Dark Mode: Dashboard (v3.1.3) ===== */
body.dark-mode .dash-hero { background: linear-gradient(135deg, #2d1b69 0%, #1e1040 50%, #1a0533 100%); }
body.dark-mode .dash-hero-title { color: #e9d5ff; }
body.dark-mode .dash-hero-subtitle { color: #c4b5fd; }
body.dark-mode .dash-card { background: #1e1e30; border-color: #2d2d44; }
body.dark-mode .dash-card-title { color: #e0e0f0; }
body.dark-mode .dash-insight-text { color: #c8c8d8; }
body.dark-mode .dash-insight-text .md-h4 { color: #c4b5fd; }
body.dark-mode .dash-stat-value { color: #e9d5ff; }
body.dark-mode .dash-stat-label { color: #707070  }
body.dark-mode .dash-milestone-item { background: #252540; border-color: #333; }

/* ===== Dark Mode: Co-creation (v3.1.3) ===== */
body.dark-mode .cc-card { background: #1e1e30; border-color: #2d2d44; }
body.dark-mode .cc-card-title { color: #e0e0f0; }
body.dark-mode .cc-card-desc { color: #707070  }
body.dark-mode .cc-inspiration-card { background: #252540; }
body.dark-mode .cc-message-bubble.other { background: #2d2d44; color: #c8c8d8; }

/* ===== Dark Mode: Report (v3.1.3) ===== */
body.dark-mode .report-container { background: #1a1a2e; }
body.dark-mode .report-page { background: #1e1e30; box-shadow: 0 4px 20px rgba(0,0,0,0.3); }
body.dark-mode .report-section-title { color: #e0e0f0; }
body.dark-mode .report-cover { background: linear-gradient(135deg, #2d1b69 0%, #1e1040 100%); }
body.dark-mode .report-cover-title { color: #e9d5ff; }
body.dark-mode .report-cover-child { color: #f0e0ff; }
body.dark-mode .report-cover-month { color: #c4b5fd; }
body.dark-mode .report-pages-indicator { background: #252540; }
body.dark-mode .report-page-dot { color: #777; }
body.dark-mode .report-page-dot.active { color: #c4b5fd; background: rgba(139,92,246,0.2); }
body.dark-mode .report-dim-item { color: #c8c8d8; }
body.dark-mode .report-nav-btn { background: #252540; color: #c8c8d8; }
body.dark-mode .report-nav-current { color: #707070  }

/* ================================================================
   P0 体验闭环 v4 — Challenge Page 儿童友好三区布局 (challenge.js)
   ================================================================ */
.page-challenge-v4 {
  min-height: 100vh;
  background: linear-gradient(180deg, #FFF8F0 0%, #FFF0E6 40%, #FFFDF7 100%);
}

.cv4-container {
  max-width: 600px;
  margin: 0 auto;
  padding: var(--space-4);
  padding-bottom: 100px;
}

.cv4-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--space-4);
  gap: var(--space-2);
}

.cv4-title {
  font-size: 1.8rem;
  font-weight: 800;
  color: #5B3A1A;
  letter-spacing: -0.01em;
}

/* ===== Section: 每日挑战 ===== */
.cv4-daily-card {
  position: relative;
  background: linear-gradient(145deg, #FFE8C0 0%, #FFD89B 40%, #FFC166 100%);
  border-radius: 24px;
  padding: var(--space-5) var(--space-4);
  border: 3px solid #FFB84D;
  box-shadow:
    0 8px 24px rgba(255, 150, 50, 0.18),
    inset 0 1px 0 rgba(255, 255, 255, 0.4);
  text-align: center;
  cursor: pointer;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  overflow: hidden;
}

.cv4-daily-card:active {
  transform: scale(0.97);
  box-shadow:
    0 4px 12px rgba(255, 150, 50, 0.12),
    inset 0 1px 0 rgba(255, 255, 255, 0.4);
}

.cv4-daily-glow {
  position: absolute;
  top: -40px;
  right: -40px;
  width: 120px;
  height: 120px;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.5) 0%, transparent 70%);
  border-radius: 50%;
  pointer-events: none;
}

.cv4-daily-header {
  display: flex;
  justify-content: center;
  gap: var(--space-2);
  margin-bottom: var(--space-2);
}

.cv4-daily-badge {
  font-size: 0.8rem;
  font-weight: 700;
  padding: 4px 12px;
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.7);
  color: #92400E;
  backdrop-filter: blur(4px);
}

.cv4-daily-badge-type {
  background: rgba(146, 64, 14, 0.12);
  color: #78350F;
}

.cv4-daily-emoji {
  font-size: 3.5rem;
  margin-bottom: var(--space-2);
  animation: cv4Float 2.5s ease-in-out infinite;
}

@keyframes cv4Float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-6px); }
}

.cv4-daily-name {
  font-size: 1.5rem;
  font-weight: 800;
  color: #5B3A1A;
  margin-bottom: var(--space-1);
  line-height: 1.3;
}

.cv4-daily-desc {
  font-size: 1rem;
  color: #7C5C3D;
  margin-bottom: var(--space-3);
  line-height: 1.5;
  max-width: 320px;
  margin-left: auto;
  margin-right: auto;
}

.cv4-daily-meta {
  display: flex;
  justify-content: center;
  gap: var(--space-3);
  margin-bottom: var(--space-3);
  font-size: 0.85rem;
  color: #8B6914;
  font-weight: 600;
}

.cv4-daily-actions {
  display: flex;
  justify-content: center;
  gap: var(--space-3);
  flex-wrap: wrap;
}

.cv4-daily-steps-dots {
  display: flex;
  justify-content: center;
  gap: 6px;
  margin-top: var(--space-3);
}

.cv4-step-dot {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.6);
  color: #92400E;
  font-size: 0.7rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid rgba(146, 64, 14, 0.3);
}

/* ===== Buttons (Claymorphism) ===== */
.cv4-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-1);
  padding: 14px 28px;
  border-radius: 20px;
  border: none;
  font-size: 1.05rem;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.2s ease;
  min-width: 120px;
  min-height: 52px;
  font-family: inherit;
}

.cv4-btn-start {
  background: linear-gradient(145deg, #FF6B6B 0%, #FF8FA3 100%);
  color: white;
  box-shadow:
    0 4px 14px rgba(255, 107, 107, 0.35),
    inset 0 1px 0 rgba(255, 255, 255, 0.25);
  border: 2px solid rgba(255, 107, 107, 0.3);
}

.cv4-btn-start:active {
  transform: scale(0.94);
  box-shadow:
    0 2px 6px rgba(255, 107, 107, 0.25),
    inset 0 2px 4px rgba(0, 0, 0, 0.1);
}

.cv4-btn-listen {
  background: linear-gradient(145deg, #4ECDC4 0%, #44B9B0 100%);
  color: white;
  box-shadow:
    0 4px 14px rgba(78, 205, 196, 0.35),
    inset 0 1px 0 rgba(255, 255, 255, 0.25);
  min-width: auto;
  padding: 14px 22px;
}

.cv4-btn-listen:active {
  transform: scale(0.94);
}

/* ===== Section: AI 方向选择 ===== */
.cv4-section-label {
  font-size: 1.15rem;
  font-weight: 800;
  color: #5B3A1A;
  margin-bottom: var(--space-3);
  margin-top: var(--space-5);
  padding-left: 4px;
}

.cv4-ai-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-3);
}

.cv4-ai-card {
  background: white;
  border: 2px solid #FFE0C0;
  border-radius: 20px;
  padding: var(--space-4) var(--space-3);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
  cursor: pointer;
  transition: all 0.2s ease;
  box-shadow:
    0 4px 12px rgba(255, 150, 50, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.6);
  min-height: 90px;
}

.cv4-ai-card:active {
  transform: scale(0.94);
  border-color: #FFB84D;
  box-shadow:
    0 6px 18px rgba(255, 150, 50, 0.18),
    inset 0 1px 0 rgba(255, 255, 255, 0.3);
}

.cv4-ai-card--loading {
  pointer-events: none;
  opacity: 0.7;
}

.cv4-ai-card-emoji {
  font-size: 2.2rem;
  transition: transform 0.2s ease;
}

.cv4-ai-card:active .cv4-ai-card-emoji {
  transform: scale(1.2);
}

.cv4-ai-card-label {
  font-size: 0.95rem;
  font-weight: 700;
  color: #5B3A1A;
}

/* ===== Section: AI 定制挑战卡片 ===== */
.cv4-custom-challenge-wrap {
  background: linear-gradient(135deg, #EDE7FF, #F5F0FF);
  border: 2px solid #C4B5FD;
  border-radius: 20px;
  padding: 20px;
  margin: 8px 0;
  box-shadow: 0 4px 16px rgba(139, 92, 246, 0.12),
              inset 0 1px 0 rgba(255, 255, 255, 0.8);
  position: relative;
}

.cv4-custom-challenge-badge {
  display: inline-block;
  background: linear-gradient(135deg, #7C3AED, #8B5CF6);
  color: white;
  font-size: 13px;
  font-weight: 700;
  padding: 4px 14px;
  border-radius: 20px;
  margin-bottom: 12px;
  box-shadow: 0 2px 8px rgba(124, 58, 237, 0.25);
}

.cv4-custom-challenge-card {
  background: rgba(255, 255, 255, 0.85);
  border-radius: 14px;
  padding: 16px;
  margin-bottom: 12px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

.cv4-custom-header {
  display: flex;
  gap: 8px;
  margin-bottom: 8px;
}

.cv4-custom-diff,
.cv4-custom-type {
  font-size: 12px;
  font-weight: 600;
  color: #7C3AED;
  background: rgba(139, 92, 246, 0.1);
  padding: 2px 10px;
  border-radius: 10px;
}

.cv4-custom-name {
  font-size: 22px;
  font-weight: 800;
  color: #3B0764;
  margin-bottom: 6px;
  line-height: 1.3;
}

.cv4-custom-desc {
  font-size: 14px;
  color: #6B7280;
  line-height: 1.5;
  margin-bottom: 8px;
}

.cv4-custom-meta {
  display: flex;
  gap: 12px;
  font-size: 13px;
  color: #8B5CF6;
  font-weight: 600;
}

.cv4-custom-actions {
  display: flex;
  gap: 10px;
  margin-top: 4px;
}

.cv4-custom-actions .cv4-btn {
  flex: 1;
  padding: 12px;
  border: none;
  border-radius: 14px;
  font-size: 16px;
  font-weight: 700;
  cursor: pointer;
  transition: transform 0.15s, box-shadow 0.15s;
  text-align: center;
}

.cv4-custom-actions .cv4-btn-start {
  background: linear-gradient(135deg, #7C3AED, #8B5CF6);
  color: white;
  box-shadow: 0 4px 12px rgba(124, 58, 237, 0.35);
}

.cv4-custom-actions .cv4-btn-start:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(124, 58, 237, 0.45);
}

.cv4-custom-actions .cv4-btn-secondary {
  background: rgba(139, 92, 246, 0.1);
  color: #7C3AED;
}

.cv4-custom-actions .cv4-btn-secondary:hover {
  background: rgba(139, 92, 246, 0.18);
}

/* dark mode */
body.dark-mode .cv4-custom-challenge-wrap {
  background: linear-gradient(135deg, #1E1240, #251845);
  border-color: #5B3E9E;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
}
body.dark-mode .cv4-custom-challenge-card {
  background: rgba(255, 255, 255, 0.06);
}
body.dark-mode .cv4-custom-name { color: #D4C5F9; }
body.dark-mode .cv4-custom-desc { color: #7A7A8A; }
body.dark-mode .cv4-custom-diff,
body.dark-mode .cv4-custom-type {
  color: #B49CF0;
  background: rgba(180, 156, 240, 0.12);
}

@keyframes cv4Pulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.15); }
}

/* ===== Section: 挑战网格 (3×N) ===== */
.cv4-challenge-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-2);
}

.cv4-grid-item {
  position: relative;
  background: white;
  border: 2px solid #F0E0D0;
  border-radius: 18px;
  padding: var(--space-3) var(--space-2);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  cursor: pointer;
  transition: all 0.2s ease;
  box-shadow:
    0 2px 8px rgba(0, 0, 0, 0.04),
    inset 0 1px 0 rgba(255, 255, 255, 0.5);
  min-height: 80px;
  overflow: hidden;
}

.cv4-grid-item:active {
  transform: scale(0.94);
  border-color: #FFB84D;
  box-shadow: 0 4px 14px rgba(255, 150, 50, 0.15);
}

.cv4-grid-item-done {
  background: #F0FFF0;
  border-color: #A8E6A8;
}

.cv4-grid-item-active {
  border-color: #FFB84D;
  background: #FFF8F0;
}

.cv4-grid-emoji {
  font-size: 2rem;
}

.cv4-grid-name {
  font-size: 0.85rem;
  font-weight: 700;
  color: #5B3A1A;
  text-align: center;
  line-height: 1.2;
  word-break: break-all;
}

.cv4-grid-meta {
  font-size: 0.7rem;
  color: #A0A0A0;
  display: flex;
  gap: var(--space-1);
}

.cv4-grid-check {
  position: absolute;
  top: 4px;
  right: 6px;
  font-size: 1rem;
}

.cv4-grid-pulse {
  position: absolute;
  top: 4px;
  right: 6px;
  font-size: 1rem;
  animation: cv4Pulse 1.5s ease-in-out infinite;
}

/* ===== Empty State ===== */
.cv4-empty-state {
  text-align: center;
  padding: var(--space-6) var(--space-4);
}

.cv4-empty-emoji {
  font-size: 2.5rem;
  margin-bottom: var(--space-2);
}

.cv4-empty-text {
  font-size: 0.95rem;
  color: #A0A0A0;
  font-weight: 600;
}

/* ===== Toast ===== */
.cv4-toast {
  position: fixed;
  bottom: 100px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 1500;
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(10px);
  border: 1px solid #E0D0C0;
  border-radius: 16px;
  padding: var(--space-3) var(--space-5);
  font-size: 0.95rem;
  font-weight: 700;
  color: #5B3A1A;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
  transition: opacity 0.4s ease;
  display: none;
}

/* ===== Section Divider ===== */
.cv4-section {
  margin-bottom: var(--space-1);
}

/* ================================================================
   P0 v4 — Co-Creation Banner (home.js)
   ================================================================ */
.v31-cocreation-card {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-4);
  background: linear-gradient(135deg, #FFF0F5 0%, #FDE2F0 40%, #FCE4EC 70%, #FFF0F5 100%);
  border: 2px solid #F8B4C8;
  border-radius: 20px;
  cursor: pointer;
  transition: all 0.2s ease;
  box-shadow:
    0 4px 16px rgba(255, 100, 130, 0.1),
    inset 0 1px 0 rgba(255, 255, 255, 0.5);
  overflow: hidden;
  min-height: 60px;
}

.v31-cocreation-card:active {
  transform: scale(0.97);
  border-color: #FF8FA3;
  box-shadow: 0 6px 20px rgba(255, 100, 130, 0.15);
}

.v31-cocreation-glow {
  position: absolute;
  top: -30px;
  right: -30px;
  width: 100px;
  height: 100px;
  background: radial-gradient(circle, rgba(255, 143, 163, 0.25) 0%, transparent 70%);
  border-radius: 50%;
  pointer-events: none;
}

.v31-cocreation-left {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex: 1;
  min-width: 0;
}

.v31-cocreation-icon {
  font-size: 2rem;
  flex-shrink: 0;
}

.v31-cocreation-info {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}

.v31-cocreation-badge {
  font-size: 0.75rem;
  font-weight: 700;
  color: #FF8FA3;
  background: rgba(255, 143, 163, 0.1);
  padding: 2px 10px;
  border-radius: 10px;
  display: inline-block;
  width: fit-content;
  margin-bottom: 2px;
}

.v31-cocreation-inviter {
  font-size: 0.95rem;
  font-weight: 700;
  color: #5B3A1A;
  line-height: 1.3;
}

.v31-cocreation-theme {
  font-size: 0.82rem;
  color: #92400E;
  line-height: 1.3;
  opacity: 0.85;
}

.v31-cocreation-btn {
  flex-shrink: 0;
  background: linear-gradient(145deg, #FF6B6B 0%, #FF8FA3 100%);
  color: white;
  font-size: 0.9rem;
  font-weight: 700;
  padding: 12px 18px;
  border-radius: 16px;
  box-shadow: 0 3px 10px rgba(255, 107, 107, 0.3);
  white-space: nowrap;
}

/* ================================================================
   P0 v4 — Responsive + Dark Mode
   ================================================================ */
@media (min-width: 480px) {
  .cv4-ai-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-4);
  }

  .cv4-challenge-grid {
    grid-template-columns: repeat(3, 1fr);
  }

  .cv4-ai-card {
    min-height: 100px;
  }

  .cv4-ai-card-emoji {
    font-size: 2.5rem;
  }
}

@media (min-width: 768px) {
  .cv4-container {
    padding: var(--space-6) var(--space-8);
    padding-bottom: 120px;
  }

  .cv4-daily-card {
    padding: var(--space-6) var(--space-8);
  }

  .cv4-daily-name {
    font-size: 1.8rem;
  }

  .cv4-btn {
    padding: 18px 32px;
    font-size: 1.15rem;
    min-width: 140px;
  }
}

/* Dark Mode */
body.dark-mode .page-challenge-v4 {
  background: linear-gradient(180deg, #1A1512 0%, #1E1714 40%, #1A1512 100%);
}

body.dark-mode .cv4-title {
  color: #FDE68A;
}

body.dark-mode .cv4-section-label {
  color: #FDE68A;
}

body.dark-mode .cv4-daily-card {
  background: linear-gradient(145deg, #3D2008 0%, #4A2A0C 40%, #5C3A10 100%);
  border-color: #8B6914;
}

body.dark-mode .cv4-daily-name,
body.dark-mode .cv4-daily-desc,
body.dark-mode .cv4-daily-meta {
  color: #FDE68A;
}

body.dark-mode .cv4-daily-badge {
  background: rgba(255, 255, 255, 0.1);
  color: #FDE68A;
}

body.dark-mode .cv4-daily-badge-type {
  background: rgba(253, 230, 138, 0.15);
  color: #FDE68A;
}

body.dark-mode .cv4-step-dot {
  background: rgba(253, 230, 138, 0.15);
  color: #FDE68A;
  border-color: rgba(253, 230, 138, 0.3);
}

body.dark-mode .cv4-ai-card {
  background: #2A1F18;
  border-color: #4A3520;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

body.dark-mode .cv4-ai-card-label {
  color: #FDE68A;
}

body.dark-mode .cv4-grid-item {
  background: #2A1F18;
  border-color: #3A2A18;
}

body.dark-mode .cv4-grid-name {
  color: #FDE68A;
}

body.dark-mode .cv4-grid-meta {
  color: #707070 
}

body.dark-mode .cv4-grid-item-done {
  background: #1A3018;
  border-color: #3A6A38;
}

body.dark-mode .cv4-grid-item-active {
  border-color: #8B6914;
  background: #2A1F18;
}

body.dark-mode .cv4-empty-text {
  color: #666;
}

body.dark-mode .v31-cocreation-card {
  background: linear-gradient(135deg, #2A1820 0%, #2A1A22 100%);
  border-color: #6A3A50;
}

body.dark-mode .v31-cocreation-inviter,
body.dark-mode .v31-cocreation-theme {
  color: #FDE68A;
}

/* ================================================================
   v3.2.0 — Doodle Simple Mode (共创场景简化涂鸦)
   ================================================================ */

/* 简化模式整体容器 */
.doodle-simple-mode {
  --doodle-simple-bg: #FFF8F5;
  background: var(--doodle-simple-bg);
}

/* 简化模式下画笔颜色更大 */
.doodle-simple-mode .doodle-colors {
  justify-content: center;
  gap: 12px;
  padding: var(--space-3) 0;
}

.doodle-simple-mode .doodle-color {
  width: 36px;
  height: 36px;
  border: 3px solid transparent;
}

.doodle-simple-mode .doodle-color.active {
  border-color: #333;
  transform: scale(1.15);
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}

/* 简化模式画布更大 */
.doodle-simple-mode .doodle-canvas-section {
  margin: var(--space-3) var(--space-3);
}

.doodle-simple-mode .doodle-canvas-wrapper {
  border-radius: 20px;
  overflow: hidden;
  border: 3px dashed #FFB84D;
  box-shadow: 0 4px 20px rgba(255, 150, 50, 0.12);
}

/* 魔法按钮 - 大号儿童友好按钮 */
.magic-btn {
  padding: 20px 32px !important;
  min-height: 64px !important;
  font-size: 1.3rem !important;
  font-weight: 800 !important;
  background: linear-gradient(145deg, #FF6B6B 0%, #FF8E53 40%, #FFD93D 100%) !important;
  box-shadow:
    0 6px 24px rgba(255, 107, 107, 0.4),
    0 0 0 4px rgba(255, 216, 100, 0.2) !important;
  border: 3px solid rgba(255, 255, 255, 0.5) !important;
  letter-spacing: 0.05em;
  animation: magicBtnGlow 2s ease-in-out infinite;
}

@keyframes magicBtnGlow {
  0%, 100% { box-shadow: 0 6px 24px rgba(255, 107, 107, 0.4), 0 0 0 4px rgba(255, 216, 100, 0.2); }
  50% { box-shadow: 0 6px 32px rgba(255, 107, 107, 0.55), 0 0 0 8px rgba(255, 216, 100, 0.35); }
}

.magic-btn:active {
  transform: scale(0.94);
}

/* 简化模式提示文字 */
.doodle-simple-mode .doodle-canvas-hint {
  font-size: 1.1rem;
  font-weight: 800;
  color: #FF8E53;
}

/* 简化模式 loading 动画 */
.doodle-simple-mode .drawing-loading {
  background: rgba(255, 255, 255, 0.95);
  border-radius: 24px;
  padding: var(--space-6);
  margin: var(--space-3);
}

.doodle-simple-mode .drawing-loading .loading-text {
  font-size: 1.05rem;
  font-weight: 700;
  color: #FF8E53;
}

/* 简化模式 dark mode */
body.dark-mode .doodle-simple-mode {
  --doodle-simple-bg: #1A1512;
}

body.dark-mode .doodle-simple-mode .doodle-canvas-wrapper {
  border-color: #8B6914;
  box-shadow: 0 4px 20px rgba(139, 105, 20, 0.2);
}

body.dark-mode .doodle-simple-mode .doodle-color.active {
  border-color: #FDE68A;
  box-shadow: 0 4px 12px rgba(253, 230, 138, 0.3);
}

body.dark-mode .doodle-simple-mode .doodle-canvas-hint {
  color: #FDE68A;
}

body.dark-mode .doodle-simple-mode .magic-btn {
  background: linear-gradient(145deg, #CC4444 0%, #CC7044 40%, #CCA830 100%) !important;
}

body.dark-mode .doodle-simple-mode .drawing-loading {
  background: rgba(30, 20, 15, 0.95);
}

body.dark-mode .doodle-simple-mode .drawing-loading .loading-text {
  color: #FDE68A;
}

/* ================================================================
   v2.1.0 — Paywall (PW-03) + Challenge Series (PW-02) + Subscribe (PW-03C)
   Claymorphism 风格付费墙 + 挑战系列卡片 + 定价页
   ================================================================ */

/* ========== Paywall Modal ========== */
.pw-overlay {
  position: fixed; inset: 0; z-index: 10000;
  display: flex; align-items: center; justify-content: center;
  opacity: 0; pointer-events: none;
  transition: opacity 0.3s ease;
}
.pw-overlay.pw-visible { opacity: 1; pointer-events: auto; }

.pw-backdrop {
  position: absolute; inset: 0;
  background: rgba(0, 0, 0, 0.45);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}

.pw-modal {
  position: relative; z-index: 1;
  width: 90vw; max-width: 380px; max-height: 90vh; overflow-y: auto;
  background: linear-gradient(180deg, #FFFDF7 0%, #FFF5F7 50%, #FFF0F3 100%);
  border-radius: 24px;
  padding: 24px 20px 20px;
  box-shadow:
    0 12px 40px rgba(0, 0, 0, 0.15),
    0 0 0 1px rgba(255, 255, 255, 0.5) inset,
    0 2px 0 rgba(255, 255, 255, 0.6) inset;
  transform: translateY(20px) scale(0.96);
  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.pw-overlay.pw-visible .pw-modal {
  transform: translateY(0) scale(1);
}

.pw-close-btn {
  position: absolute; top: 12px; right: 12px;
  width: 32px; height: 32px; border-radius: 50%;
  border: none; background: rgba(0,0,0,0.06);
  font-size: 18px; cursor: pointer; color: #707070 
  display: flex; align-items: center; justify-content: center;
  transition: background 0.2s;
}
.pw-close-btn:hover { background: rgba(0,0,0,0.12); }

.pw-header { text-align: center; margin-bottom: 16px; }
.pw-header-emoji { font-size: 48px; margin-bottom: 8px; }
.pw-header-title {
  font-size: 1.15rem; font-weight: 800;
  color: #333; margin-bottom: 4px;
}
.pw-header-subtitle { font-size: 0.9rem; color: #6A6A6A; }

.pw-features-card {
  background: linear-gradient(145deg, rgba(255,255,255,0.8) 0%, rgba(255,245,247,0.9) 100%);
  border-radius: 20px; padding: 16px;
  box-shadow:
    0 4px 16px rgba(255, 143, 163, 0.12),
    inset 0 1px 0 rgba(255, 255, 255, 0.8);
  border: 1px solid rgba(255, 143, 163, 0.2);
  margin-bottom: 16px;
}

.pw-plan-badge {
  display: inline-block;
  font-size: 0.85rem; font-weight: 700;
  padding: 4px 12px; border-radius: 20px;
  background: linear-gradient(135deg, #FF8FA3, #FF6B6B);
  color: #fff; margin-bottom: 12px;
}

.pw-features-list { display: flex; flex-direction: column; gap: 8px; }
.pw-feature-item {
  display: flex; align-items: center; gap: 8px;
  font-size: 0.85rem; color: #555;
}
.pw-feature-check { font-size: 1rem; }

.pw-price {
  text-align: center; font-size: 1.3rem; font-weight: 800;
  color: #FF6B6B; margin-top: 12px;
}
.pw-price-daily {
  display: block; font-size: 0.72rem; color: #707070  margin-top: 2px;
}

.pw-actions { display: flex; flex-direction: column; gap: 10px; }
.pw-btn {
  padding: 14px 24px; border-radius: 16px; border: none;
  font-size: 1rem; font-weight: 700; cursor: pointer;
  transition: all 0.2s;
}
.pw-btn-primary {
  background: linear-gradient(145deg, #FF6B6B 0%, #FF8FA3 100%);
  color: #fff;
  box-shadow: 0 4px 12px rgba(255, 107, 107, 0.3);
}
.pw-btn-primary:hover { transform: translateY(-1px); box-shadow: 0 6px 16px rgba(255, 107, 107, 0.4); }
.pw-btn-secondary {
  background: rgba(0,0,0,0.04); color: #6A6A6A;
}
.pw-btn-secondary:hover { background: rgba(0,0,0,0.08); }

/* ========== Challenge Series Cards (PW-02) ========== */
.cv4-series-subtitle {
  font-size: 0.8rem; color: #707070  margin-left: 6px;
}

.cv4-series-scroll {
  display: flex; gap: 12px;
  overflow-x: auto; scroll-snap-type: x mandatory;
  padding: 8px 0 16px;
  -webkit-overflow-scrolling: touch;
}
.cv4-series-scroll::-webkit-scrollbar { display: none; }

.cv4-series-card {
  flex: 0 0 200px; scroll-snap-align: start;
  background: linear-gradient(145deg, #FFFFFF 0%, #FFF5F7 100%);
  border-radius: 20px; padding: 16px;
  border: 2px solid rgba(255, 143, 163, 0.15);
  box-shadow: 0 4px 12px rgba(0,0,0,0.04), inset 0 1px 0 rgba(255,255,255,0.9);
  cursor: pointer;
  transition: all 0.3s;
  position: relative;
  display: flex; flex-direction: column; align-items: center;
  text-align: center;
}
.cv4-series-card:hover { transform: translateY(-2px); box-shadow: 0 8px 20px rgba(255, 143, 163, 0.15); }

.cv4-series-emoji { font-size: 36px; margin-bottom: 8px; }
.cv4-series-name {
  font-size: 0.95rem; font-weight: 700; color: #333;
  margin-bottom: 4px;
}
.cv4-series-meta {
  display: flex; gap: 8px; font-size: 0.72rem; color: #707070 
  margin-bottom: 6px;
}
.cv4-series-desc {
  font-size: 0.75rem; color: #6A6A6A; line-height: 1.4;
  margin-bottom: 10px;
}
.cv4-series-action { width: 100%; }
.cv4-series-btn-start {
  display: block; padding: 8px 12px; border-radius: 12px;
  background: linear-gradient(145deg, #FF8FA3, #FF6B6B);
  color: #fff; font-size: 0.8rem; font-weight: 700;
  text-align: center;
}
.cv4-series-btn-locked {
  display: block; padding: 8px 12px; border-radius: 12px;
  background: rgba(0,0,0,0.05); color: #aaa;
  font-size: 0.8rem;
}

/* Locked series */
.cv4-series-locked {
  background: linear-gradient(145deg, #F5F5F5 0%, #EEEEEE 100%);
  border-color: rgba(0,0,0,0.08);
}
.cv4-series-locked .cv4-series-name { color: #aaa; }
.cv4-series-locked .cv4-series-desc { color: #808080; }
.cv4-series-lock-icon {
  position: absolute; top: 12px; right: 12px;
  font-size: 18px; opacity: 0.5;
}

/* Free preview series */
.cv4-series-free {
  border-color: #4ECDC4;
  box-shadow: 0 4px 12px rgba(78, 205, 196, 0.15), inset 0 1px 0 rgba(255,255,255,0.9);
}
.cv4-series-free-badge {
  position: absolute; top: -8px; right: -8px;
  background: linear-gradient(135deg, #4ECDC4, #44B5AD);
  color: #fff; font-size: 0.75rem; font-weight: 700;
  padding: 3px 8px; border-radius: 12px;
  box-shadow: 0 2px 6px rgba(78, 205, 196, 0.3);
}

/* ========== Subscribe Page (PW-03C) ========== */
.page-subscribe {
  background: linear-gradient(180deg, #FFFDF7 0%, #FFF5F7 30%, #FFF0F3 100%);
  min-height: 100vh;
}
.sub-container { padding: 20px 16px 80px; max-width: 480px; margin: 0 auto; }

.sub-header { text-align: center; margin-bottom: 28px; }
.sub-back-btn {
  display: inline-block; padding: 8px 16px; border-radius: 12px;
  background: rgba(0,0,0,0.04); border: none;
  font-size: 0.9rem; color: #666; cursor: pointer;
  margin-bottom: 16px;
}
.sub-title {
  font-size: 1.4rem; font-weight: 800; color: #333;
  margin: 0 0 4px;
}
.sub-subtitle { font-size: 0.9rem; color: #6A6A6A; margin: 0; }

.sub-plans-grid {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 12px; margin-bottom: 32px;
}

.sub-plan-card {
  border-radius: 20px; padding: 16px 12px;
  border: 2px solid rgba(0,0,0,0.06);
  position: relative;
  display: flex; flex-direction: column; align-items: center;
  text-align: center;
}
.sub-plan-highlighted {
  border-color: #F59E0B;
  box-shadow: 0 6px 24px rgba(245, 158, 11, 0.2), inset 0 1px 0 rgba(255,255,255,0.9);
  transform: scale(1.03);
}
.sub-plan-current { border-color: #4ECDC4; }

.sub-current-badge {
  position: absolute; top: -8px; left: 50%; transform: translateX(-50%);
  background: #4ECDC4; color: #fff; font-size: 0.75rem; font-weight: 700;
  padding: 2px 10px; border-radius: 10px;
}
.sub-plan-badge {
  position: absolute; top: -8px; right: -8px;
  background: linear-gradient(135deg, #FF6B6B, #FF8FA3);
  color: #fff; font-size: 0.75rem; font-weight: 700;
  padding: 2px 8px; border-radius: 10px;
}

.sub-plan-emoji { font-size: 32px; margin-bottom: 8px; }
.sub-plan-name {
  font-size: 0.95rem; font-weight: 700; color: #333;
  margin-bottom: 8px;
}

.sub-plan-price { margin-bottom: 4px; }
.sub-price-amount { font-size: 1.3rem; font-weight: 800; color: #FF6B6B; }
.sub-price-period { font-size: 0.75rem; color: #707070  }
.sub-price-original {
  font-size: 0.7rem; color: #808080; text-decoration: line-through;
  margin-bottom: 10px;
}

.sub-features-list {
  list-style: none; padding: 0; margin: 0 0 12px;
  display: flex; flex-direction: column; gap: 4px;
  font-size: 0.7rem; color: #666; line-height: 1.5;
  flex: 1;
}
.sub-features-list li { text-align: center; }

/* Upgrade Diff — shows what this tier adds vs previous */
.sub-upgrade-diff {
  width: 100%;
  background: linear-gradient(145deg, #F0FDF4 0%, #E8FBF0 100%);
  border-radius: 12px; padding: 10px;
  margin-bottom: 12px;
  border: 1px solid rgba(46, 204, 113, 0.15);
  text-align: left;
}
.sub-upgrade-diff-title {
  font-size: 0.75rem; font-weight: 700; color: #27AE60;
  margin-bottom: 6px;
  text-align: center;
}
.sub-diff-item {
  font-size: 0.75rem; color: #333; line-height: 1.6;
  padding: 2px 4px;
}

/* Free tier limits display */
.sub-tier-limits {
  width: 100%;
  background: linear-gradient(145deg, #FEF9E7 0%, #FDF4D1 100%);
  border-radius: 12px; padding: 10px;
  margin-bottom: 12px;
  border: 1px solid rgba(241, 196, 15, 0.15);
  text-align: left;
}
.sub-limit-item {
  font-size: 0.75rem; color: #666; line-height: 1.6;
  padding: 2px 4px;
}

.sub-plan-btn {
  width: 100%; padding: 10px; border-radius: 14px;
  border: none; font-size: 0.82rem; font-weight: 700;
  cursor: pointer;
  background: linear-gradient(145deg, #FF8FA3, #FF6B6B);
  color: #fff;
  box-shadow: 0 3px 10px rgba(255, 107, 107, 0.25);
  transition: all 0.2s;
}
.sub-plan-btn:hover { transform: translateY(-1px); }
.sub-plan-btn:disabled {
  background: #E0E0E0; color: #707070 
  box-shadow: none; cursor: not-allowed;
}

/* Why Subscribe */
.sub-why-section { margin-bottom: 28px; }
.sub-why-title {
  text-align: center; font-size: 1.1rem; font-weight: 700;
  color: #333; margin-bottom: 16px;
}
.sub-why-grid {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.sub-why-item {
  background: #fff; border-radius: 16px; padding: 16px;
  text-align: center;
  box-shadow: 0 2px 8px rgba(0,0,0,0.04);
}
.sub-why-emoji { font-size: 28px; display: block; margin-bottom: 6px; }
.sub-why-item strong { display: block; font-size: 0.85rem; color: #333; margin-bottom: 2px; }
.sub-why-item p { font-size: 0.72rem; color: #6A6A6A; margin: 0; line-height: 1.4; }

/* CTA Banner */
.sub-cta-banner {
  background: linear-gradient(135deg, #FF8FA3, #FF6B6B);
  border-radius: 20px; padding: 16px 20px;
  text-align: center; margin-bottom: 28px;
  box-shadow: 0 4px 16px rgba(255, 143, 163, 0.3);
}
.sub-cta-text { color: #fff; font-weight: 700; font-size: 0.95rem; }
.sub-cta-emoji { margin-right: 6px; font-size: 1.1rem; }

/* FAQ */
.sub-faq { margin-bottom: 20px; }
.sub-faq h3 { font-size: 1rem; color: #333; margin-bottom: 12px; }
.sub-faq-item {
  background: #fff; border-radius: 12px; padding: 12px 16px;
  margin-bottom: 8px;
  border: 1px solid rgba(0,0,0,0.06);
}
.sub-faq-item summary {
  font-size: 0.85rem; font-weight: 600; color: #555;
  cursor: pointer; outline: none;
}
.sub-faq-item p { font-size: 0.78rem; color: #6A6A6A; margin-top: 8px; line-height: 1.5; }

/* Toast */
.sub-toast {
  position: fixed; bottom: 80px; left: 50%; transform: translateX(-50%);
  background: rgba(0,0,0,0.8); color: #fff;
  padding: 12px 24px; border-radius: 20px;
  font-size: 0.9rem; z-index: 10001;
  pointer-events: none; transition: opacity 0.4s;
}

/* ========== Dark Mode ========== */
body.dark-mode .pw-modal {
  background: linear-gradient(180deg, #2A1F18 0%, #251A15 100%);
  box-shadow:
    0 12px 40px rgba(0,0,0,0.4),
    inset 0 1px 0 rgba(255,255,255,0.05);
}
body.dark-mode .pw-header-title { color: #FDE68A; }
body.dark-mode .pw-header-subtitle { color: #8B7355; }
body.dark-mode .pw-features-card {
  background: linear-gradient(145deg, rgba(42,31,24,0.9) 0%, rgba(37,26,21,0.95) 100%);
  border-color: rgba(139, 105, 20, 0.2);
}
body.dark-mode .pw-feature-item { color: #C4A97D; }
body.dark-mode .pw-price { color: #FFD93D; }
body.dark-mode .pw-btn-secondary { background: rgba(255,255,255,0.06); color: #8B7355; }
body.dark-mode .pw-close-btn { background: rgba(255,255,255,0.08); color: #8B7355; }

body.dark-mode .cv4-series-card {
  background: linear-gradient(145deg, #2A1F18 0%, #251A15 100%);
  border-color: rgba(139, 105, 20, 0.15);
}
body.dark-mode .cv4-series-locked { background: #1E1814; border-color: rgba(255,255,255,0.05); }
body.dark-mode .cv4-series-name { color: #FDE68A; }
body.dark-mode .cv4-series-locked .cv4-series-name { color: #6A5640; }
body.dark-mode .cv4-series-desc { color: #8B7355; }
body.dark-mode .cv4-series-btn-start { background: linear-gradient(145deg, #CC7044, #B85038); }
body.dark-mode .cv4-series-free-badge { background: linear-gradient(135deg, #3A9A92, #2E7A73); }
body.dark-mode .cv4-series-free { border-color: #3A9A92; }
body.dark-mode .cv4-series-subtitle { color: #6A5640; }

body.dark-mode .page-subscribe { background: linear-gradient(180deg, #1A1512 0%, #1E1814 100%); }
body.dark-mode .sub-title { color: #FDE68A; }
body.dark-mode .sub-subtitle { color: #8B7355; }
body.dark-mode .sub-plan-card { border-color: rgba(255,255,255,0.08); }
body.dark-mode .sub-plan-highlighted { border-color: #FDE68A; }
body.dark-mode .sub-plan-name { color: #FDE68A; }
body.dark-mode .sub-price-amount { color: #FFD93D; }
body.dark-mode .sub-features-list { color: #8B7355; }
body.dark-mode .sub-upgrade-diff {
  background: linear-gradient(145deg, #1A2E1A 0%, #1A2A18 100%);
  border-color: rgba(46, 204, 113, 0.15);
}
body.dark-mode .sub-upgrade-diff-title { color: #4ECB71; }
body.dark-mode .sub-diff-item { color: #C4A97D; }
body.dark-mode .sub-tier-limits {
  background: linear-gradient(145deg, #2A2418 0%, #2A2018 100%);
  border-color: rgba(241, 196, 15, 0.15);
}
body.dark-mode .sub-limit-item { color: #8B7355; }
body.dark-mode .sub-plan-btn { background: #8B6914; color: #FDE68A; }
body.dark-mode .sub-why-item { background: #2A1F18; }
body.dark-mode .sub-why-item strong { color: #FDE68A; }
body.dark-mode .sub-why-item p { color: #8B7355; }
body.dark-mode .sub-cta-banner { background: linear-gradient(135deg, #8B6914, #6A4E10); }
body.dark-mode .sub-faq-item { background: #2A1F18; }
body.dark-mode .sub-faq-item summary { color: #C4A97D; }
body.dark-mode .sub-faq-item p { color: #8B7355; }
body.dark-mode .sub-toast { background: rgba(30,20,15,0.95); color: #FDE68A; }

/* ========== Responsive: stacking plans on mobile ========== */
@media (max-width: 768px) {
  .sub-plans-grid { grid-template-columns: 1fr; gap: 14px; }
  .sub-plan-highlighted { transform: none; }
}
@media (max-width: 400px) {
  .sub-plans-grid { grid-template-columns: 1fr; gap: 12px; }
  .sub-why-grid { grid-template-columns: 1fr; }
  .cv4-series-card { flex: 0 0 160px; }
}

/* ========== P3: 档案限额提示 ========== */
.cp-limit-hint {
  text-align: center;
  font-size: var(--font-body-sm);
  color: var(--text-hint);
  margin-top: var(--space-2);
}

.cp-limit-hint strong {
  color: var(--color-orange);
  font-weight: var(--weight-bold);
}

.cp-limit-hint span {
  color: var(--text-primary);
  font-weight: var(--weight-bold);
}

/* 已达上限引导页 */
.cp-limit-block {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: var(--space-10) var(--space-5);
  text-align: center;
  gap: var(--space-4);
}

.cp-limit-icon {
  font-size: 4rem;
  margin-bottom: var(--space-2);
  animation: float 3s ease-in-out infinite;
}

.cp-limit-title {
  font-size: var(--font-title);
  font-weight: var(--weight-extrabold);
  color: var(--text-primary);
}

.cp-limit-desc {
  font-size: var(--font-body);
  color: var(--text-secondary);
  line-height: 1.8;
}

.cp-limit-desc strong {
  color: var(--color-orange);
  font-weight: var(--weight-bold);
}

.cp-limit-bar {
  width: 100%;
  max-width: 300px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
}

.cp-limit-bar-label {
  font-size: var(--font-body-sm);
  font-weight: var(--weight-bold);
  color: var(--text-secondary);
}

.cp-limit-bar-track {
  width: 100%;
  height: 10px;
  background: #F0F0F0;
  border-radius: 5px;
  overflow: hidden;
}

.cp-limit-bar-fill {
  height: 100%;
  background: linear-gradient(90deg, #FF8C42, #FFA94D);
  border-radius: 5px;
  transition: width 0.6s ease;
}

.cp-limit-upgrade {
  margin-top: var(--space-4);
  padding: var(--space-6);
  background: linear-gradient(135deg, #EDE7FF, #FFF0E0);
  border-radius: var(--radius-2xl);
  box-shadow: var(--shadow-clay);
  border: 1px solid rgba(180, 167, 246, 0.2);
}

.cp-limit-upgrade-icon {
  font-size: 2.5rem;
  margin-bottom: var(--space-2);
}

.cp-limit-upgrade-title {
  font-size: var(--font-subtitle);
  font-weight: var(--weight-extrabold);
  color: var(--text-primary);
  margin-bottom: var(--space-1);
}

.cp-limit-upgrade-desc {
  font-size: var(--font-body-sm);
  color: var(--text-secondary);
}

body.dark-mode .cp-limit-bar-track {
  background: #3A3A5A;
}

body.dark-mode .cp-limit-upgrade {
  background: linear-gradient(135deg, #2D2542, #332520);
  border-color: rgba(180, 167, 246, 0.1);
}

body.dark-mode .cp-limit-desc,
body.dark-mode .cp-limit-bar-label,
body.dark-mode .cp-limit-upgrade-desc {
  color: #7A7A8A;
}

/* ============================================================
   S1: 首页配额展示 (Home Quota Card) — Claymorphism 风格
   ============================================================ */

.v31-quota-card {
  border-radius: 20px;
  padding: var(--space-4, 16px);
  cursor: pointer;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.v31-quota-card:active {
  transform: scale(0.98);
}

.v31-quota-badge {
  display: inline-block;
  padding: 3px 12px;
  border-radius: 20px;
  font-size: 0.75rem;
  font-weight: 700;
  line-height: 1.4;
}

.v31-quota-header {
  display: flex;
  align-items: center;
  gap: var(--space-2, 8px);
  margin-bottom: var(--space-3, 12px);
}

.v31-quota-icon {
  font-size: 1.3rem;
}

.v31-quota-title {
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--text-primary, #2C3E50);
}

.v31-quota-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-2, 8px);
}

.v31-quota-item {
  display: flex;
  align-items: center;
  gap: var(--space-1, 6px);
  padding: var(--space-2, 8px);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.6);
}

.v31-quota-emoji {
  font-size: 1.1rem;
}

.v31-quota-label {
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--text-secondary, #666);
  flex: 1;
}

.v31-quota-count {
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--primary-color, #6C5CE7);
  background: rgba(108, 92, 231, 0.08);
  padding: 2px 10px;
  border-radius: 20px;
}

.v31-quota-count.v31-quota-empty {
  color: #E74C3C;
  background: rgba(231, 76, 60, 0.1);
  animation: v31QuotaPulse 1.5s ease-in-out infinite;
}

@keyframes v31QuotaPulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.5; }
}

/* 无限创作（付费用户） */
.v31-quota-unlimited {
  background: linear-gradient(145deg, #FFF9F0, #FFF3E0);
}

.v31-quota-unlimited-text {
  font-size: 1.4rem;
  font-weight: 800;
  text-align: center;
  background: linear-gradient(135deg, #FF6B6B, #FFD93D, #6C5CE7);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  padding: var(--space-2, 8px) 0;
}

.v31-quota-tap-hint {
  text-align: center;
  font-size: 0.75rem;
  color: var(--text-tertiary, #999);
  margin-top: var(--space-1, 4px);
}

/* ============================================================
   S2-1: 试用到期 Banner
   ============================================================ */

.v31-trial-banner {
  margin-bottom: var(--space-3, 12px);
}

.v31-trial-banner-inner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2, 8px);
  padding: var(--space-3, 12px);
  border-radius: 16px;
  background: linear-gradient(135deg, #FFF3E0, #FFECB3);
  box-shadow:
    0 2px 8px rgba(255, 152, 0, 0.15),
    inset 0 1px 0 rgba(255, 255, 255, 0.6);
  cursor: pointer;
  font-size: 0.9rem;
  font-weight: 600;
  color: #E65100;
}

.v31-trial-icon {
  font-size: 1.2rem;
}

.v31-trial-text {
  flex: 1;
}

.v31-trial-cta {
  background: #FF9800;
  color: #fff;
  padding: 4px 14px;
  border-radius: 20px;
  font-size: 0.8rem;
  font-weight: 700;
}

/* ============================================================
   S1-5: 仪表盘锁定样式
   ============================================================ */

.dash-tier-badge {
  display: inline-block;
  padding: 2px 10px;
  border-radius: 12px;
  font-size: 0.72rem;
  font-weight: 700;
  margin-left: var(--space-2, 8px);
  vertical-align: middle;
}

.dash-tier-free {
  background: rgba(108, 92, 231, 0.1);
  color: var(--primary-color, #6C5CE7);
}

.dash-tier-pro {
  background: linear-gradient(135deg, #FF6B6B, #FFD93D);
  color: #fff;
}

.dash-lock-badge {
  display: inline-block;
  padding: 3px 12px;
  border-radius: 12px;
  font-size: 0.75rem;
  font-weight: 700;
  background: rgba(150, 150, 150, 0.12);
  color: #6A6A6A;
  cursor: pointer;
  transition: background 0.2s;
}

.dash-lock-badge:hover {
  background: rgba(150, 150, 150, 0.2);
}

.dash-radar-locked {
  opacity: 0.5;
  filter: grayscale(0.5);
  cursor: pointer;
  transition: opacity 0.2s;
}

.dash-radar-locked:hover {
  opacity: 0.8;
}

.dash-radar-score-locked {
  color: #BBB !important;
  background: rgba(0, 0, 0, 0.03);
  border-radius: 8px;
  padding: 2px 6px;
}

.dash-unlock-btn {
  background: linear-gradient(135deg, #6C5CE7, #FF6B6B);
  color: #fff;
  border: none;
  padding: 10px 28px;
  border-radius: 24px;
  font-size: 0.9rem;
  font-weight: 700;
  cursor: pointer;
  box-shadow: 0 4px 12px rgba(108, 92, 231, 0.3);
  transition: transform 0.2s, box-shadow 0.2s;
  min-height: 44px;
  min-width: 44px;
}

.dash-unlock-btn:active {
  transform: scale(0.96);
  box-shadow: 0 2px 6px rgba(108, 92, 231, 0.2);
}

/* Dark mode overrides */
body.dark-mode .v31-quota-card {
  background: linear-gradient(145deg, #1E2A38, #1A2430);
  box-shadow:
    0 4px 16px rgba(0, 0, 0, 0.2),
    0 1px 3px rgba(0, 0, 0, 0.1),
    inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

body.dark-mode .v31-quota-title {
  color: #E0E0E0;
}

body.dark-mode .v31-quota-label {
  color: #B0B0B0;
}

body.dark-mode .v31-quota-item {
  background: rgba(255, 255, 255, 0.04);
}

body.dark-mode .v31-quota-unlimited {
  background: linear-gradient(145deg, #1E2830, #1A2028);
}

body.dark-mode .v31-trial-banner-inner {
  background: linear-gradient(135deg, #2A1E10, #3A2810);
  color: #FFB74D;
}

body.dark-mode .dash-radar-score-locked {
  background: rgba(255, 255, 255, 0.03);
}

/* ===== B1-5: 时间限制显示 ===== */

.v31-time-limit {
  padding: 0 16px 12px !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
}

.v31-time-limit .v31-time-card {
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
}

.v31-time-card {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  border-radius: 16px;
  background: linear-gradient(145deg, #FFFFFF, #F8FAFC);
  box-shadow: 4px 4px 10px rgba(0,0,0,0.04), -2px -2px 8px rgba(255,255,255,0.8);
  cursor: pointer;
  transition: transform 0.2s;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  min-width: 0;
}

.v31-time-card:hover {
  transform: translateY(-1px);
}

.v31-time-icon {
  font-size: 28px;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(99, 102, 241, 0.08);
  border-radius: 12px;
}

.v31-time-info {
  min-width: 0;
  flex: 1;
  overflow: hidden;
}

.v31-time-label {
  font-size: 12px;
  color: #64748B;
  margin-bottom: 2px;
}

.v31-time-value {
  font-size: 18px;
  font-weight: 700;
  color: #1E293B;
}

.v31-time-low {
  color: #EF4444;
  animation: v31Pulse 1s ease-in-out infinite;
}

.v31-time-warning .v31-time-card {
  border: 2px solid #FCA5A5;
}

.v31-time-warning .v31-time-icon {
  background: rgba(239, 68, 68, 0.1);
}

.v31-time-exhausted {
  border: 2px solid #FCA5A5;
}

.v31-time-exhausted .v31-time-icon {
  background: rgba(239, 68, 68, 0.1);
}

.v31-time-forbidden {
  border: 2px solid #C4B5FD;
}

.v31-time-forbidden .v31-time-icon {
  background: rgba(139, 92, 246, 0.1);
}

.v31-time-premium .v31-time-icon {
  background: rgba(16, 185, 129, 0.1);
}

.v31-time-skeleton {
  text-align: center;
  padding: 8px;
  font-size: 13px;
  color: #94A3B8;
}

/* Time warning toast */
.v31-time-toast {
  position: fixed;
  top: 80px;
  left: 50%;
  transform: translateX(-50%);
  background: #FEF2F2;
  border: 2px solid #FCA5A5;
  color: #EF4444;
  padding: 10px 20px;
  border-radius: 14px;
  font-size: 15px;
  font-weight: 700;
  z-index: 9998;
  white-space: nowrap;
  box-shadow: 0 4px 16px rgba(239, 68, 68, 0.2);
  display: none;
}

/* Time lock overlay */
.v31-time-lock-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(30, 41, 59, 0.6);
  backdrop-filter: blur(4px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9997;
  animation: fadeIn 0.3s ease;
}

.v31-time-lock-card {
  background: linear-gradient(145deg, #FFFFFF, #F5F8FC);
  border-radius: 24px;
  padding: 40px 32px;
  text-align: center;
  max-width: 300px;
  width: 90%;
  box-shadow: 8px 8px 24px rgba(0,0,0,0.1), -4px -4px 16px rgba(255,255,255,0.6);
  animation: slideUp 0.3s ease;
}

.v31-time-lock-emoji {
  font-size: 56px;
  margin-bottom: 12px;
}

.v31-time-lock-title {
  font-size: 20px;
  font-weight: 700;
  color: #1E293B;
  margin-bottom: 8px;
}

.v31-time-lock-sub {
  font-size: 15px;
  color: #64748B;
  margin-bottom: 16px;
}

.v31-time-lock-sun {
  font-size: 48px;
  margin-bottom: 20px;
}

.v31-time-lock-close {
  background: linear-gradient(135deg, #6366F1, #8B5CF6);
  color: white;
  border: none;
  border-radius: 14px;
  padding: 12px 40px;
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
  box-shadow: 0 4px 12px rgba(99, 102, 241, 0.3);
  transition: transform 0.15s;
}

.v31-time-lock-close:hover {
  transform: scale(1.03);
}

/* ===== B1-3: 系列锁定标签 ===== */

.cv4-series-lock-label {
  font-size: 12px;
  font-weight: 700;
  color: #EF4444;
  background: #FEF2F2;
  padding: 2px 8px;
  border-radius: 6px;
  margin-top: 4px;
  text-align: center;
}

/* Dark mode overrides for time limit */

body.dark-mode .v31-time-card {
  background: linear-gradient(145deg, #1A2028, #141820);
  box-shadow: 4px 4px 10px rgba(0,0,0,0.2);
}

body.dark-mode .v31-time-label {
  color: #8B7355;
}

body.dark-mode .v31-time-value {
  color: #FDE68A;
}

body.dark-mode .v31-time-lock-card {
  background: linear-gradient(145deg, #1E1814, #1A140E);
}

body.dark-mode .v31-time-lock-title {
  color: #FDE68A;
}

body.dark-mode .v31-time-lock-sub {
  color: #8B7355;
}

body.dark-mode .cv4-series-lock-label {
  color: #FCA5A5;
  background: rgba(239, 68, 68, 0.1);
}

/* ============================================================
   v3.2 毛玻璃高端质感升级 — Subscribe 卡片
   ============================================================ */

/* 毛玻璃通用 */
.sub-plan-card {
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.sub-plan-card:hover {
  transform: translateY(-2px);
}
.sub-plan-highlighted:hover {
  transform: scale(1.04);
}

/* 移动端降级 */
@media (max-width: 768px) {
  .sub-plan-highlighted {
    transform: scale(1.01) !important;
  }
  .sub-plan-highlighted:hover {
    transform: scale(1.02) !important;
  }
}

/* ============================================================
   34. v4.0 付费商业化模块 Claymorphism Deep Upgrade
   ============================================================ */

/* ===== 34.1 Subscribe 订阅页 Claymorphism ===== */

.sub-clay-header {
  text-align: center;
  margin-bottom: 28px;
  padding-top: 8px;
}

.sub-clay-back {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 10px 20px;
  border-radius: 999px;
  background: linear-gradient(145deg, #FFFFFF, #F8F6F3);
  box-shadow:
    4px 4px 12px rgba(0,0,0,0.06),
    -2px -2px 8px rgba(255,255,255,0.9),
    inset 0 1px 0 rgba(255,255,255,0.8);
  border: none;
  font-size: 14px;
  font-weight: 600;
  color: #78716C;
  cursor: pointer;
  margin-bottom: 20px;
  font-family: inherit;
  transition: all 0.2s ease;
}
.sub-clay-back:active {
  transform: scale(0.96);
}

.sub-clay-title {
  font-size: 28px;
  font-weight: 800;
  background: var(--gradient-sunset);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  margin-bottom: 8px;
  line-height: 1.3;
}

.sub-clay-subtitle {
  font-size: 15px;
  color: #78716C;
  font-weight: 500;
  line-height: 1.5;
}

.sub-clay-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin-bottom: 32px;
  padding: 0 4px;
}

/* Clay Card Base */
.sub-clay-card {
  position: relative;
  background: linear-gradient(160deg, rgba(255,255,255,0.92) 0%, rgba(255,250,245,0.9) 50%, rgba(255,245,235,0.88) 100%);
  border-radius: 24px;
  padding: 24px 14px 18px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  box-shadow:
    6px 6px 18px rgba(180, 140, 110, 0.12),
    -4px -4px 14px rgba(255,255,255,0.8),
    inset 0 1px 0 rgba(255,255,255,0.9),
    inset 0 -1px 2px rgba(0,0,0,0.03);
  border: 1.5px solid rgba(255, 255, 255, 0.8);
  transition: transform 0.25s cubic-bezier(0.34,1.56,0.64,1), box-shadow 0.25s ease;
  cursor: default;
  overflow: hidden;
}
.sub-clay-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 24px;
  right: 24px;
  height: 1.5px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.8), transparent);
  opacity: 0.6;
}

.sub-clay-card:active {
  transform: scale(0.97);
}

/* Current User's Tier Card — subtle purple glow */
.sub-clay-card--current {
  border: 2px solid rgba(139, 92, 246, 0.35);
  box-shadow:
    6px 6px 18px rgba(139, 92, 246, 0.12),
    -4px -4px 14px rgba(255,255,255,0.8),
    inset 0 1px 0 rgba(255,255,255,0.9),
    inset 0 -1px 2px rgba(139,92,246,0.04);
}
.sub-clay-card--current::after {
  content: '';
  position: absolute;
  top: -1px;
  left: -1px;
  right: -1px;
  bottom: -1px;
  border-radius: 25px;
  border: 1px solid rgba(139, 92, 246, 0.15);
  pointer-events: none;
}

/* Highlighted Card (Recommended) */
.sub-clay-card--featured {
  background: linear-gradient(160deg, rgba(255,252,240,0.95) 0%, rgba(255,245,220,0.92) 50%, rgba(255,232,195,0.88) 100%);
  box-shadow:
    8px 8px 28px rgba(245, 158, 11, 0.16),
    -5px -5px 18px rgba(255,255,255,0.85),
    inset 0 1px 0 rgba(255,255,255,0.95),
    inset 0 -1px 2px rgba(245,158,11,0.06);
  border: 2px solid rgba(253, 186, 49, 0.45);
  transform: scale(1.03);
  z-index: 2;
}
.sub-clay-card--featured:active {
  transform: scale(1.0);
}

/* Current Plan Indicator */
.sub-clay-current {
  position: absolute;
  top: 12px;
  right: 12px;
  background: linear-gradient(135deg, #D4C5F9, #C4B5E9);
  color: #5B3A9B;
  font-size: 12px;
  font-weight: 700;
  padding: 4px 10px;
  border-radius: 12px;
  box-shadow: 2px 2px 6px rgba(139, 92, 246, 0.15);
}

/* Badge */
.sub-clay-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: linear-gradient(135deg, #FEF3C7, #FDE68A);
  color: #92400E;
  font-size: 12px;
  font-weight: 700;
  padding: 4px 14px;
  border-radius: 16px;
  box-shadow:
    3px 3px 6px rgba(245, 158, 11, 0.15),
    -1px -1px 3px rgba(255,255,255,0.5);
  margin-bottom: 10px;
}

/* Plan Emoji */
.sub-clay-emoji {
  font-size: 40px;
  margin: 6px 0 4px;
  filter: drop-shadow(0 3px 4px rgba(0,0,0,0.08));
}

.sub-clay-name {
  font-size: 19px;
  font-weight: 800;
  color: #1E293B;
  margin-bottom: 2px;
}

.sub-clay-price {
  font-size: 32px;
  font-weight: 900;
  color: #0F172A;
  margin-bottom: 2px;
}

.sub-clay-period {
  font-size: 13px;
  font-weight: 500;
  color: #94A3B8;
}

.sub-clay-original {
  font-size: 13px;
  color: #94A3B8;
  text-decoration: line-through;
  margin-bottom: 4px;
  min-height: 18px;
}

/* Free tier quota pills */
.sub-clay-quotas {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  justify-content: center;
  margin-bottom: 12px;
}
.sub-clay-quota-pill {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  background: rgba(255,255,255,0.7);
  border: 1px solid rgba(203, 213, 225, 0.5);
  border-radius: 12px;
  padding: 4px 10px;
  font-size: 12px;
  color: #475569;
  font-weight: 500;
  box-shadow:
    2px 2px 4px rgba(0,0,0,0.04),
    -1px -1px 3px rgba(255,255,255,0.6);
}

/* Limit rows — quota display from Admin config */
.sub-clay-limit-rows {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin: 12px 0 6px;
}
.sub-clay-limit-row {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 4px 8px;
  background: rgba(255,255,255,0.5);
  border-radius: 10px;
  font-size: 12px;
  color: #334155;
}
.sub-clay-limit-emoji {
  font-size: 14px;
  flex-shrink: 0;
}
.sub-clay-limit-label {
  flex: 1;
  font-weight: 500;
}
/* @MAYBE-DEAD: 以下6行疑似孤儿CSS属性（无父选择器），原 .sub-clay-limit-count 之后的残留。 */
.sub-clay-limit-count {
  font-weight: 700;
  color: #6366F1;
}
/* @FIXME: 以下为孤儿属性，缺少选择器声明 */
/*
  font-weight: 800;
  color: #B45309;
  margin-bottom: 12px;
  box-shadow:
    2px 2px 6px rgba(245,158,11,0.12),
    -1px -1px 3px rgba(255,255,255,0.5);
}
*/

/* Free tier features */
.sub-clay-free-features {
  width: 100%;
  background: linear-gradient(145deg, rgba(255,255,255,0.7), rgba(245,248,255,0.7));
  border-radius: 16px;
  padding: 12px;
  margin-bottom: 14px;
  box-shadow:
    inset 3px 3px 6px rgba(0,0,0,0.04),
    inset -2px -2px 5px rgba(255,255,255,0.7),
    1px 1px 0 rgba(255,255,255,0.5);
  border: 1px solid rgba(255,255,255,0.8);
  text-align: center;
}

/* Upgrade diff section */
.sub-clay-diff {
  width: 100%;
  background: linear-gradient(145deg, rgba(255,255,255,0.7), rgba(245,250,240,0.7));
  border-radius: 16px;
  padding: 12px;
  margin-bottom: 14px;
  box-shadow:
    inset 3px 3px 6px rgba(0,0,0,0.04),
    inset -2px -2px 5px rgba(255,255,255,0.7),
    1px 1px 0 rgba(255,255,255,0.5);
  border: 1px solid rgba(255,255,255,0.8);
  text-align: left;
}
.sub-clay-diff-title {
  font-size: 12px;
  font-weight: 700;
  color: #059669;
  text-align: center;
  margin-bottom: 8px;
}
.sub-clay-diff-line {
  font-size: 12px;
  color: #334155;
  line-height: 1.6;
  padding: 2px 4px;
}

/* Features list */
.sub-clay-features {
  list-style: none;
  padding: 0;
  margin: 0 0 12px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 12px;
  color: #64748B;
  line-height: 1.5;
}
.sub-clay-features li {
  text-align: center;
}

/* CTA Button */
.sub-clay-btn {
  width: 100%;
  padding: 14px;
  border: none;
  border-radius: 18px;
  font-size: 15px;
  font-weight: 700;
  font-family: inherit;
  cursor: pointer;
  transition: all 0.2s ease;
  min-height: 48px;
  background: var(--gradient-sunset);
  color: #fff;
  box-shadow:
    4px 6px 16px rgba(255, 169, 77, 0.35),
    -2px -2px 6px rgba(255,255,255,0.5),
    inset 0 1px 0 rgba(255,255,255,0.3);
}
.sub-clay-btn:active {
  transform: translateY(1px);
}
.sub-clay-btn:disabled {
  background: #F1F5F9 !important;
  color: #94A3B8 !important;
  box-shadow:
    inset 2px 2px 4px rgba(0,0,0,0.06),
    inset -1px -1px 3px rgba(255,255,255,0.8) !important;
  cursor: not-allowed;
  transform: none;
}

/* Tier-specific button colors */
.sub-clay-btn--free {
  background: linear-gradient(145deg, #F1F5F9, #E2E8F0);
  color: #64748B;
  box-shadow:
    inset 2px 2px 6px rgba(0,0,0,0.05),
    inset -1px -1px 4px rgba(255,255,255,0.7);
}
.sub-clay-btn--creator {
  background: linear-gradient(135deg, #F59E0B, #D97706);
}
.sub-clay-btn--master {
  background: linear-gradient(135deg, #8B5CF6, #7C3AED);
}
.sub-clay-btn--family {
  background: linear-gradient(135deg, #10B981, #059669);
}

/* FAQ */
.sub-clay-faq {
  margin-bottom: 20px;
}
.sub-clay-faq h3 {
  font-size: 16px;
  font-weight: 700;
  color: #1E293B;
  margin-bottom: 12px;
}
.sub-clay-faq-item {
  background: linear-gradient(145deg, #FFFFFF, #F8F9FB);
  border-radius: 16px;
  padding: 14px 16px;
  margin-bottom: 8px;
  box-shadow:
    3px 3px 10px rgba(0,0,0,0.04),
    -2px -2px 8px rgba(255,255,255,0.8),
    inset 0 1px 0 rgba(255,255,255,0.9);
  border: 1px solid rgba(241, 245, 249, 0.8);
}
.sub-clay-faq-item summary {
  font-size: 14px;
  font-weight: 600;
  color: #475569;
  cursor: pointer;
  outline: none;
}
.sub-clay-faq-item p {
  font-size: 13px;
  color: #94A3B8;
  margin-top: 8px;
  line-height: 1.5;
}

/* Toast */
.sub-clay-toast {
  position: fixed;
  bottom: 80px;
  left: 50%;
  transform: translateX(-50%);
  background: linear-gradient(145deg, #1E293B, #334155);
  color: #fff;
  padding: 12px 28px;
  border-radius: 20px;
  font-size: 14px;
  font-weight: 600;
  z-index: 10001;
  pointer-events: none;
  transition: opacity 0.4s ease;
  box-shadow:
    4px 6px 20px rgba(0,0,0,0.2),
    -2px -2px 8px rgba(255,255,255,0.1);
  display: none;
}

/* ===== 34.2 Paywall 付费墙 Claymorphism ===== */

.pw-clay-overlay {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
}
.pw-clay-overlay.pw-clay-visible {
  opacity: 1;
  pointer-events: auto;
}

.pw-clay-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(80, 50, 30, 0.25);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}

.pw-clay-card {
  position: relative;
  z-index: 1;
  width: 90vw;
  max-width: 370px;
  max-height: 90vh;
  overflow-y: auto;
  background: linear-gradient(165deg, #FFFDF8 0%, #FFF7ED 40%, #FFF0E0 100%);
  border-radius: 28px;
  padding: 28px 22px 22px;
  box-shadow:
    8px 8px 32px rgba(180, 140, 100, 0.18),
    -6px -6px 20px rgba(255,255,255,0.9),
    inset 0 1px 0 rgba(255,255,255,0.95),
    inset 0 -1px 2px rgba(0,0,0,0.04);
  border: 2px solid rgba(255, 255, 255, 0.85);
  transform: translateY(20px) scale(0.96);
  transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.pw-clay-overlay.pw-clay-visible .pw-clay-card {
  transform: translateY(0) scale(1);
}

.pw-clay-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 20px;
  right: 20px;
  height: 2px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.9), transparent);
  border-radius: 2px;
  opacity: 0.8;
}

.pw-clay-close {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: none;
  background: linear-gradient(145deg, #F8F6F3, #EBE7DF);
  box-shadow:
    3px 3px 8px rgba(0,0,0,0.08),
    -2px -2px 6px rgba(255,255,255,0.8);
  color: #78716C;
  font-size: 18px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.15s;
}
.pw-clay-close:active {
  transform: scale(0.9);
}

.pw-clay-header-emoji {
  font-size: 54px;
  text-align: center;
  margin: 4px 0 8px;
  filter: drop-shadow(0 4px 6px rgba(0,0,0,0.1));
}

.pw-clay-title {
  font-size: 18px;
  font-weight: 800;
  color: #1E293B;
  text-align: center;
  margin-bottom: 4px;
  line-height: 1.4;
}

.pw-clay-subtitle {
  font-size: 14px;
  color: #78716C;
  text-align: center;
  margin-bottom: 16px;
  font-weight: 500;
}

.pw-clay-features {
  background: linear-gradient(145deg, rgba(255,255,255,0.85), rgba(255,250,245,0.85));
  border-radius: 20px;
  padding: 18px;
  margin-bottom: 16px;
  box-shadow:
    inset 4px 4px 8px rgba(180,150,120,0.08),
    inset -3px -3px 8px rgba(255,255,255,0.8),
    2px 2px 0 rgba(255,255,255,0.5);
  border: 1px solid rgba(255, 255, 255, 0.9);
}

.pw-clay-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: linear-gradient(135deg, #FEF3C7, #FDE68A);
  color: #92400E;
  font-size: 13px;
  font-weight: 700;
  padding: 5px 16px;
  border-radius: 18px;
  box-shadow:
    3px 3px 6px rgba(245,158,11,0.15),
    -1px -1px 3px rgba(255,255,255,0.5);
  margin-bottom: 12px;
}

.pw-clay-feature-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.pw-clay-feature-item {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 14px;
  color: #475569;
  font-weight: 500;
}

.pw-clay-price {
  text-align: center;
  font-size: 22px;
  font-weight: 800;
  background: var(--gradient-warm);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  margin-top: 12px;
}
.pw-clay-price-daily {
  display: block;
  font-size: 12px;
  color: #94A3B8;
  margin-top: 2px;
  font-weight: 500;
}

.pw-clay-actions {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.pw-clay-btn-primary {
  width: 100%;
  padding: 16px;
  border: none;
  border-radius: 18px;
  font-size: 16px;
  font-weight: 700;
  font-family: inherit;
  cursor: pointer;
  min-height: 52px;
  background: var(--gradient-sunset);
  color: #fff;
  box-shadow:
    4px 6px 18px rgba(255, 169, 77, 0.4),
    -2px -2px 8px rgba(255,255,255,0.6),
    inset 0 1px 0 rgba(255,255,255,0.3);
  transition: all 0.2s ease;
}
.pw-clay-btn-primary:active {
  transform: translateY(1px);
  box-shadow:
    2px 3px 10px rgba(255, 169, 77, 0.3),
    -1px -1px 4px rgba(255,255,255,0.4);
}

.pw-clay-btn-secondary {
  width: 100%;
  padding: 14px;
  border: none;
  border-radius: 18px;
  font-size: 15px;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  min-height: 48px;
  background: linear-gradient(145deg, #F1F5F9, #E2E8F0);
  color: #64748B;
  box-shadow:
    inset 3px 3px 6px rgba(0,0,0,0.06),
    inset -2px -2px 5px rgba(255,255,255,0.8);
  transition: all 0.2s ease;
}
.pw-clay-btn-secondary:active {
  transform: translateY(1px);
}

/* ===== 34.3 Payment Modal Claymorphism ===== */

.pay-clay-overlay {
  position: fixed;
  inset: 0;
  z-index: 10002;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0,0,0,0.4);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  animation: payclayFadeIn 0.25s ease;
}
@keyframes payclayFadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

.pay-clay-card {
  position: relative;
  background: linear-gradient(165deg, #FFFDFB 0%, #FFF8F3 40%, #FFF0E5 100%);
  border-radius: 28px;
  padding: 32px 24px 24px;
  max-width: 340px;
  width: 90%;
  box-shadow:
    10px 10px 32px rgba(180, 140, 100, 0.18),
    -6px -6px 20px rgba(255,255,255,0.9),
    inset 0 1px 0 rgba(255,255,255,0.95),
    inset 0 -1px 2px rgba(0,0,0,0.04);
  border: 2px solid rgba(255, 255, 255, 0.85);
  animation: payclaySlideUp 0.3s ease;
}
@keyframes payclaySlideUp {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}
.pay-clay-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 20px;
  right: 20px;
  height: 2px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.9), transparent);
  border-radius: 2px;
  opacity: 0.8;
}

.pay-clay-close {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: none;
  background: linear-gradient(145deg, #F8F6F3, #EBE7DF);
  box-shadow:
    3px 3px 8px rgba(0,0,0,0.08),
    -2px -2px 6px rgba(255,255,255,0.8);
  color: #78716C;
  font-size: 18px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.15s;
}
.pay-clay-close:active { transform: scale(0.9); }

.pay-clay-title {
  text-align: center;
  font-size: 20px;
  font-weight: 800;
  color: #1E293B;
  margin: 0 0 20px;
}

.pay-clay-qr {
  width: 180px;
  height: 180px;
  margin: 0 auto 16px;
  border-radius: 20px;
  background: #FFFFFF;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  box-shadow:
    inset 5px 5px 10px rgba(0,0,0,0.06),
    inset -3px -3px 8px rgba(255,255,255,0.9),
    3px 3px 6px rgba(180,140,100,0.1);
}

.pay-clay-qr-placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}
.pay-clay-qr-emoji {
  font-size: 44px; line-height: 1;
}
.pay-clay-qr-text {
  font-size: 12px; color: #94A3B8; font-weight: 500;
}

.pay-clay-instructions {
  text-align: center;
  color: #475569;
  font-size: 14px;
  font-weight: 500;
  margin: 0 0 4px;
}

.pay-clay-amount {
  text-align: center;
  font-size: 28px;
  font-weight: 900;
  margin: 10px 0 2px;
  background: var(--gradient-sunset);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.pay-clay-expire {
  text-align: center;
  color: #94A3B8;
  font-size: 12px;
  margin: 0 0 14px;
  font-weight: 500;
}

.pay-clay-status {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  color: #78716C;
  font-size: 14px;
  font-weight: 500;
}

.pay-clay-dot {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #FFA94D;
  animation: payclayPulse 1.5s ease-in-out infinite;
}
@keyframes payclayPulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%      { opacity: 0.4; transform: scale(0.8); }
}

/* Mock mode badge */
.pay-clay-mock-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: linear-gradient(135deg, #FEF3C7, #FDE68A);
  color: #92400E;
  font-size: 12px;
  font-weight: 700;
  padding: 3px 12px;
  border-radius: 12px;
  margin-bottom: 14px;
  box-shadow:
    2px 2px 4px rgba(245,158,11,0.12),
    -1px -1px 2px rgba(255,255,255,0.5);
}

/* Provider tag */
.pay-clay-provider-tag {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: linear-gradient(135deg, rgba(7,193,96,0.12), rgba(7,193,96,0.06));
  color: #059669;
  font-size: 12px;
  font-weight: 600;
  padding: 4px 14px;
  border-radius: 14px;
  border: 1px solid rgba(7,193,96,0.15);
  margin-bottom: 12px;
}

/* ===== 34.4 Profile Membership Card Claymorphism ===== */

.profile-membership-card {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 18px;
  background: linear-gradient(145deg, #FFFDF7, #FFF8ED);
  border-radius: 20px;
  box-shadow:
    4px 6px 16px rgba(200, 160, 100, 0.1),
    -3px -3px 12px rgba(255,255,255,0.8),
    inset 0 1px 0 rgba(255,255,255,0.9);
  border: 2px solid rgba(253, 186, 49, 0.25);
  cursor: pointer;
  transition: all 0.2s ease;
}
.profile-membership-card:active {
  transform: scale(0.98);
}

.profile-membership-emoji {
  font-size: 38px;
  flex-shrink: 0;
  filter: drop-shadow(0 2px 4px rgba(0,0,0,0.06));
}

.profile-membership-info {
  flex: 1;
  min-width: 0;
}

.profile-membership-title {
  font-size: 15px;
  font-weight: 700;
  color: #92400E;
  margin-bottom: 2px;
}

.profile-membership-desc {
  font-size: 12px;
  color: #A16207;
  font-weight: 500;
}

.profile-membership-arrow {
  font-size: 20px;
  color: #F59E0B;
  flex-shrink: 0;
}

/* ===== 34.5 Home Time Limit Claymorphism ===== */

/* Time card — warm orange instead of sharp red */
.v31-time-card--clay {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 18px;
  border-radius: 18px;
  background: linear-gradient(145deg, #FFFFFF, #FFFBF5);
  box-shadow:
    4px 4px 10px rgba(180,150,120,0.08),
    -2px -2px 8px rgba(255,255,255,0.9),
    inset 0 1px 0 rgba(255,255,255,0.95);
  border: 1.5px solid rgba(255, 235, 200, 0.5);
  cursor: pointer;
  transition: transform 0.2s, box-shadow 0.2s;
  width: 100%;
  box-sizing: border-box;
}
.v31-time-card--clay:active {
  transform: scale(0.98);
}

.v31-time-icon--clay {
  font-size: 30px;
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 14px;
  background: linear-gradient(145deg, rgba(255,169,77,0.1), rgba(255,189,80,0.06));
  box-shadow:
    3px 3px 6px rgba(0,0,0,0.04),
    -1px -1px 4px rgba(255,255,255,0.6);
  flex-shrink: 0;
}

.v31-time-info--clay {
  flex: 1;
  min-width: 0;
}

.v31-time-label--clay {
  font-size: 12px;
  font-weight: 600;
  color: #92400E;
  margin-bottom: 2px;
}

.v31-time-value--clay {
  font-size: 20px;
  font-weight: 800;
  color: #1E293B;
}

/* Time warning — warm orange (not sharp red) */
.v31-time-card--clay.v31-time-warning--clay {
  border-color: rgba(255, 169, 77, 0.45);
  background: linear-gradient(145deg, #FFFBF5, #FFF7ED);
}
.v31-time-warning--clay .v31-time-value--clay {
  color: #D97706;
  animation: v31clayPulse 1.5s ease-in-out infinite;
}
@keyframes v31clayPulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.65; }
}

/* Time exhausted — warm orange tint */
.v31-time-exhausted--clay {
  border-color: rgba(255, 169, 77, 0.55) !important;
  background: linear-gradient(145deg, #FFF7ED, #FFF3E0) !important;
}
.v31-time-exhausted--clay .v31-time-icon--clay {
  background: linear-gradient(145deg, rgba(255,169,77,0.15), rgba(255,189,80,0.1)) !important;
}

/* Time forbidden — soft purple */
.v31-time-forbidden--clay {
  border-color: rgba(180, 167, 246, 0.5) !important;
  background: linear-gradient(145deg, #F8F6FF, #F0ECFF) !important;
}
.v31-time-forbidden--clay .v31-time-icon--clay {
  background: linear-gradient(145deg, rgba(180,167,246,0.12), rgba(167,139,250,0.08)) !important;
}

/* Time premium — soft green */
.v31-time-premium--clay .v31-time-icon--clay {
  background: linear-gradient(145deg, rgba(16,185,129,0.1), rgba(5,150,105,0.06)) !important;
}

/* Time skeleton */
.v31-time-skeleton--clay {
  text-align: center;
  padding: 10px;
  font-size: 13px;
  color: #94A3B8;
  font-weight: 500;
}

/* Time warning toast — clay style */
.v31-time-toast--clay {
  position: fixed;
  top: 80px;
  left: 50%;
  transform: translateX(-50%);
  background: linear-gradient(145deg, #FFFBF5, #FFF7ED);
  border: 2px solid rgba(255, 169, 77, 0.35);
  color: #D97706;
  padding: 12px 22px;
  border-radius: 18px;
  font-size: 15px;
  font-weight: 700;
  z-index: 9998;
  white-space: nowrap;
  box-shadow:
    4px 6px 16px rgba(255, 169, 77, 0.15),
    -2px -2px 8px rgba(255,255,255,0.6);
  display: none;
}

/* Time lock overlay — clay + frosted glass */
.v31-time-lock-overlay--clay {
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(30, 41, 59, 0.5);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9997;
  animation: fadeIn 0.3s ease;
}

.v31-time-lock-card--clay {
  background: linear-gradient(165deg, #FFFDF8, #FFF5EC);
  border-radius: 28px;
  padding: 40px 32px;
  text-align: center;
  max-width: 300px;
  width: 90%;
  box-shadow:
    8px 8px 28px rgba(180,140,100,0.15),
    -6px -6px 20px rgba(255,255,255,0.7),
    inset 0 1px 0 rgba(255,255,255,0.9);
  border: 2px solid rgba(255,255,255,0.8);
  animation: slideUp 0.3s ease;
}

.v31-time-lock-emoji--clay {
  font-size: 60px;
  margin-bottom: 12px;
  filter: drop-shadow(0 4px 6px rgba(0,0,0,0.08));
}

.v31-time-lock-title--clay {
  font-size: 20px;
  font-weight: 700;
  color: #1E293B;
  margin-bottom: 8px;
}

.v31-time-lock-sub--clay {
  font-size: 15px;
  color: #78716C;
  margin-bottom: 16px;
}

.v31-time-lock-sun--clay {
  font-size: 48px;
  margin-bottom: 20px;
}

.v31-time-lock-close--clay {
  background: var(--gradient-sunset);
  color: white;
  border: none;
  border-radius: 18px;
  padding: 14px 44px;
  font-size: 15px;
  font-weight: 700;
  font-family: inherit;
  cursor: pointer;
  min-height: 48px;
  box-shadow:
    4px 6px 16px rgba(255, 169, 77, 0.3),
    -2px -2px 6px rgba(255,255,255,0.4);
  transition: transform 0.15s;
}
.v31-time-lock-close--clay:active { transform: scale(0.96); }

/* ===== 34.6 Trial Banner Claymorphism ===== */

.v31-trial-banner--clay {
  margin-bottom: 12px;
}
.v31-trial-inner--clay {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 18px;
  border-radius: 18px;
  background: linear-gradient(145deg, #FFFBF5, #FFF3E0);
  box-shadow:
    3px 3px 10px rgba(255, 152, 0, 0.1),
    -2px -2px 8px rgba(255,255,255,0.7),
    inset 0 1px 0 rgba(255,255,255,0.9);
  border: 1.5px solid rgba(255, 169, 77, 0.25);
  cursor: pointer;
  font-size: 14px;
  font-weight: 600;
  color: #D97706;
}
.v31-trial-icon--clay { font-size: 20px; }
.v31-trial-text--clay { flex: 1; }
.v31-trial-cta--clay {
  background: var(--gradient-sunset);
  color: #fff;
  padding: 5px 16px;
  border-radius: 16px;
  font-size: 13px;
  font-weight: 700;
  box-shadow: 2px 2px 6px rgba(255,169,77,0.25);
}

/* ===== 34.7 Profile: Achievements + Menus Claymorphism ===== */

/* Achievement card */
.v31-achievement-clay {
  background: linear-gradient(145deg, #FFFFFF, #FFFBF5);
  border-radius: 20px;
  padding: 16px 18px;
  box-shadow:
    4px 4px 14px rgba(200,170,130,0.08),
    -3px -3px 12px rgba(255,255,255,0.85),
    inset 0 1px 0 rgba(255,255,255,0.95);
  border: 1.5px solid rgba(255,235,200,0.4);
}

/* Menu list */
.v31-menu-clay {
  background: #FFFFFF;
  border-radius: 20px;
  box-shadow:
    4px 4px 14px rgba(180,150,120,0.06),
    -3px -3px 10px rgba(255,255,255,0.9),
    inset 0 1px 0 rgba(255,255,255,0.95);
  border: 1px solid rgba(0,0,0,0.03);
  overflow: hidden;
}

/* ===== 34.8 Dark Mode Overrides ===== */

body.dark-mode .sub-clay-card {
  background: linear-gradient(160deg, rgba(42,35,28,0.92), rgba(38,30,24,0.9));
  border-color: rgba(255,255,255,0.06);
  box-shadow:
    6px 6px 18px rgba(0,0,0,0.25),
    -4px -4px 14px rgba(255,255,255,0.03),
    inset 0 1px 0 rgba(255,255,255,0.04);
}
body.dark-mode .sub-clay-card--featured {
  border-color: rgba(253,186,49,0.3);
  box-shadow: 8px 8px 28px rgba(245,158,11,0.12);
}
body.dark-mode .sub-clay-name { color: #FDE68A; }
body.dark-mode .sub-clay-price { color: #FFF; }
body.dark-mode .sub-clay-period { color: #8B7355; }
body.dark-mode .sub-clay-original { color: #6B5A3E; }
body.dark-mode .sub-clay-quota-pill {
  background: rgba(255,255,255,0.05);
  border-color: rgba(255,255,255,0.08);
  color: #8B7355;
}
body.dark-mode .sub-clay-back {
  background: linear-gradient(145deg, #3A2F22, #2A2418);
  color: #8B7355;
}
body.dark-mode .sub-clay-subtitle { color: #8B7355; }
body.dark-mode .sub-clay-infinite {
  background: linear-gradient(135deg, rgba(245,158,11,0.1), rgba(251,191,36,0.05));
  border-color: rgba(251,191,36,0.2);
  color: #FBBF24;
}
body.dark-mode .sub-clay-diff {
  background: linear-gradient(145deg, rgba(255,255,255,0.04), rgba(255,255,255,0.02));
  border-color: rgba(255,255,255,0.05);
}
body.dark-mode .sub-clay-diff-line { color: #8B7355; }
body.dark-mode .sub-clay-free-features {
  background: linear-gradient(145deg, rgba(255,255,255,0.04), rgba(255,255,255,0.02));
  border-color: rgba(255,255,255,0.05);
}
body.dark-mode .sub-clay-faq-item {
  background: linear-gradient(145deg, #2A2418, #201A10);
  border-color: rgba(255,255,255,0.06);
}
body.dark-mode .sub-clay-faq-item summary { color: #8B7355; }
body.dark-mode .sub-clay-faq-item p { color: #6B5A3E; }
body.dark-mode .sub-clay-faq h3 { color: #FDE68A; }

body.dark-mode .pw-clay-card {
  background: linear-gradient(165deg, #2A1F16, #221A11);
  border-color: rgba(255,255,255,0.06);
}
body.dark-mode .pw-clay-title { color: #FDE68A; }
body.dark-mode .pw-clay-subtitle { color: #8B7355; }
body.dark-mode .pw-clay-features {
  background: linear-gradient(145deg, rgba(255,255,255,0.04), rgba(255,255,255,0.02));
  border-color: rgba(255,255,255,0.05);
}
body.dark-mode .pw-clay-feature-item { color: #8B7355; }
body.dark-mode .pw-clay-btn-secondary {
  background: linear-gradient(145deg, #2A2418, #1E1810);
  color: #8B7355;
}

body.dark-mode .pay-clay-card {
  background: linear-gradient(165deg, #2A1F16, #221A11);
  border-color: rgba(255,255,255,0.06);
}
body.dark-mode .pay-clay-title { color: #FDE68A; }
body.dark-mode .pay-clay-instructions { color: #8B7355; }
body.dark-mode .pay-clay-qr { background: #1E1810; }
body.dark-mode .pay-clay-amount { -webkit-text-fill-color: #FBBF24; }
body.dark-mode .pay-clay-expire { color: #6B5A3E; }
body.dark-mode .pay-clay-status { color: #8B7355; }

body.dark-mode .profile-membership-card {
  background: linear-gradient(145deg, #2A2418, #201A10);
  border-color: rgba(253,186,49,0.15);
}
body.dark-mode .profile-membership-title { color: #FBBF24; }
body.dark-mode .profile-membership-desc { color: #8B7355; }

body.dark-mode .v31-time-card--clay {
  background: linear-gradient(145deg, #1E1810, #1A140C);
  border-color: rgba(255,255,255,0.06);
  box-shadow: 4px 4px 10px rgba(0,0,0,0.2);
}
body.dark-mode .v31-time-label--clay { color: #8B7355; }
body.dark-mode .v31-time-value--clay { color: #FDE68A; }
body.dark-mode .v31-time-warning--clay .v31-time-value--clay { color: #FBBF24; }
body.dark-mode .v31-time-lock-card--clay {
  background: linear-gradient(165deg, #1E1610, #1A140C);
}
body.dark-mode .v31-time-lock-title--clay { color: #FDE68A; }
body.dark-mode .v31-time-lock-sub--clay { color: #8B7355; }
body.dark-mode .v31-time-toast--clay {
  background: linear-gradient(145deg, #2A2418, #1E1810);
  border-color: rgba(255,169,77,0.2);
}

body.dark-mode .v31-trial-inner--clay {
  background: linear-gradient(145deg, #2A1E10, #201A0C);
  border-color: rgba(255,169,77,0.15);
  color: #FBBF24;
}

body.dark-mode .v31-achievement-clay {
  background: linear-gradient(145deg, #1E1810, #1A140C);
  border-color: rgba(255,255,255,0.05);
}

body.dark-mode .v31-menu-clay {
  background: #1E1810;
  border-color: rgba(255,255,255,0.04);
  box-shadow: 4px 4px 14px rgba(0,0,0,0.2);
}

/* ===== 34.9 Mobile Responsive ===== */

@media (max-width: 768px) {
  .sub-clay-grid {
    gap: 10px;
  }
  .sub-clay-card {
    padding: 20px 10px 16px;
    border-radius: 20px;
  }
  .sub-clay-card--featured {
    transform: scale(1.01);
  }
  .sub-clay-name { font-size: 16px; }
  .sub-clay-price { font-size: 26px; }
  .sub-clay-emoji { font-size: 34px; }
  .sub-clay-title { font-size: 24px; }
  .sub-clay-btn { font-size: 14px; padding: 12px; }
  .pw-clay-card { max-width: 340px; padding: 24px 18px 18px; }
  .pay-clay-card { max-width: 300px; padding: 26px 20px 20px; }
}

@media (max-width: 360px) {
  .sub-clay-grid {
    grid-template-columns: 1fr 1fr;
    gap: 8px;
  }
  .sub-clay-card {
    padding: 16px 8px 14px;
    border-radius: 18px;
  }
  .sub-clay-emoji { font-size: 28px; }
  .sub-clay-name { font-size: 14px; }
  .sub-clay-price { font-size: 22px; }
  .sub-clay-infinite { font-size: 13px; padding: 4px 14px; }
}
/* ===== v3.3 教育模块粘土风格升级 Part 1 ===== */
/* CHALLENGE SYSTEM */

:root {
  --clay-blur-locked: blur(4px);
  --clay-blur-soft: blur(2px);
  --zpd-bg-a: #E8F5E9;
  --zpd-text-a: #2E7D32;
  --zpd-bg-b: #FFF3E0;
  --zpd-text-b: #E65100;
  --zpd-bg-c: #EDE7FF;
  --zpd-text-c: #6A1B9A;
}

/* === 创意挑战系统 (challenge.js) === */
.cv4-container{max-width:600px;margin:0 auto;padding:var(--space-3) 16px 7rem;animation:slideUp .4s ease-out}
.cv4-header{text-align:center;padding:var(--space-5) var(--space-4) var(--space-4);position:relative}
.cv4-title{font-size:var(--font-heading);font-weight:var(--weight-extrabold);background:linear-gradient(135deg,#FF8FA3,#FFA94D);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;line-height:1.3}
.cv4-section{margin-bottom:var(--space-4)}
.cv4-section-label{font-size:var(--font-title);font-weight:var(--weight-bold);color:var(--text-primary);margin-bottom:var(--space-3);display:flex;align-items:center;gap:var(--space-2);padding:0 var(--space-1)}
.cv4-series-subtitle{font-size:var(--font-body-sm);font-weight:var(--weight-semibold);color:var(--text-hint);margin-left:auto}
.cv4-daily-card{position:relative;background:linear-gradient(135deg,#FFF5F7 0%,#FFFDF7 40%,#F7F4FF 100%);border-radius:var(--radius-2xl);padding:var(--space-6);box-shadow:var(--shadow-clay-raised),var(--shadow-glow-pink);border:3px solid rgba(255,143,163,.2);text-align:center;cursor:pointer;transition:all var(--transition-spring);overflow:hidden}
.cv4-daily-card:active{transform:scale(.98);box-shadow:var(--shadow-clay-pressed)}
.cv4-daily-glow{position:absolute;top:-40px;right:-40px;width:150px;height:150px;border-radius:50%;background:radial-gradient(circle,rgba(255,143,163,.12),transparent 70%);pointer-events:none;animation:cv4GlowPulse 3s ease-in-out infinite}
@keyframes cv4GlowPulse{0%,100%{transform:scale(1);opacity:.5}50%{transform:scale(1.15);opacity:.9}}
.cv4-daily-header{display:flex;justify-content:center;gap:var(--space-2);margin-bottom:var(--space-3);flex-wrap:wrap}
.cv4-daily-badge{font-size:var(--font-caption);font-weight:var(--weight-bold);padding:4px 14px;border-radius:var(--radius-full);box-shadow:var(--shadow-clay-sm)}
.cv4-daily-badge:first-child{background:linear-gradient(135deg,#FFE0E6,#FFF0F3);color:#D6336C;border:1.5px solid rgba(255,143,163,.3)}
.cv4-daily-badge-type{background:linear-gradient(135deg,#EDE7FF,#F5F0FF);color:#6C5CE7;border:1.5px solid rgba(180,167,246,.3)}
.cv4-daily-emoji{font-size:3.5rem;margin:var(--space-3) 0;animation:cv4Float 3s ease-in-out infinite;filter:drop-shadow(0 4px 8px rgba(255,143,163,.2))}
@keyframes cv4Float{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}
.cv4-daily-name{font-size:var(--font-heading);font-weight:var(--weight-extrabold);color:var(--text-primary);margin-bottom:var(--space-2);line-height:1.3}
.cv4-daily-desc{font-size:var(--font-body);color:var(--text-secondary);line-height:1.7;margin-bottom:var(--space-3);max-width:360px;margin-left:auto;margin-right:auto}
.cv4-daily-meta{display:flex;justify-content:center;gap:var(--space-3);flex-wrap:wrap;margin-bottom:var(--space-4)}
.cv4-daily-meta span{font-size:var(--font-body-sm);color:var(--text-secondary);background:rgba(255,255,255,.7);padding:5px 14px;border-radius:var(--radius-full);box-shadow:var(--shadow-clay-sm);font-weight:var(--weight-medium)}
.cv4-daily-actions{display:flex;gap:var(--space-3);justify-content:center;margin-bottom:var(--space-3);flex-wrap:wrap}
.cv4-btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;padding:var(--space-3) var(--space-6);min-height:48px;min-width:44px;border:none;border-radius:var(--radius-2xl);font-size:var(--font-body);font-weight:var(--weight-bold);cursor:pointer;font-family:inherit;transition:all var(--transition-bouncy);-webkit-tap-highlight-color:transparent}
.cv4-btn:active{transform:scale(.94)}
.cv4-btn-start{background:var(--gradient-warm);color:#FFF;box-shadow:var(--shadow-glow-orange),0 4px 14px rgba(255,169,77,.35)}
.cv4-btn-listen{background:linear-gradient(135deg,#B4A7F6,#74C0FC);color:#FFF;box-shadow:0 4px 14px rgba(180,167,246,.35)}
.cv4-btn-secondary{background:#F5F5F5;color:var(--text-primary);border:2px solid var(--border-light);box-shadow:var(--shadow-clay-sm)}
.cv4-daily-steps-dots{display:flex;justify-content:center;gap:var(--space-2);margin-top:var(--space-4)}
.cv4-step-dot{width:32px;height:32px;border-radius:50%;background:linear-gradient(135deg,#EDE7FF,#F5F0FF);border:2.5px solid rgba(180,167,246,.3);display:flex;align-items:center;justify-content:center;font-size:var(--font-body-sm);font-weight:var(--weight-bold);color:#6C5CE7;box-shadow:var(--shadow-clay-sm);transition:all var(--transition-bouncy)}
.cv4-ai-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--space-3)}
.cv4-ai-card{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--space-2);padding:var(--space-4) var(--space-2);min-height:100px;background:#FFF;border-radius:var(--radius-2xl);border:2.5px solid transparent;box-shadow:var(--shadow-clay);cursor:pointer;transition:all var(--transition-spring);font-family:inherit;-webkit-tap-highlight-color:transparent}
.cv4-ai-card:active{transform:scale(.92);box-shadow:var(--shadow-clay-pressed)}
.cv4-ai-card:hover{transform:translateY(-2px);box-shadow:var(--shadow-clay-raised)}
.cv4-ai-card:nth-child(1){border-color:rgba(255,143,163,.1)}
.cv4-ai-card:nth-child(1):hover{border-color:#FF8FA3;box-shadow:var(--shadow-glow-pink),var(--shadow-clay-raised)}
.cv4-ai-card:nth-child(2){border-color:rgba(180,167,246,.1)}
.cv4-ai-card:nth-child(2):hover{border-color:#B4A7F6;box-shadow:var(--shadow-glow-purple),var(--shadow-clay-raised)}
.cv4-ai-card:nth-child(3){border-color:rgba(116,192,252,.1)}
.cv4-ai-card:nth-child(3):hover{border-color:#74C0FC;box-shadow:var(--shadow-glow-blue),var(--shadow-clay-raised)}
.cv4-ai-card:nth-child(4){border-color:rgba(105,219,124,.1)}
.cv4-ai-card:nth-child(4):hover{border-color:#69DB7C;box-shadow:var(--shadow-glow-green),var(--shadow-clay-raised)}
.cv4-ai-card:nth-child(5){border-color:rgba(255,169,77,.1)}
.cv4-ai-card:nth-child(5):hover{border-color:#FFA94D;box-shadow:var(--shadow-glow-orange),var(--shadow-clay-raised)}
.cv4-ai-card:nth-child(6){border-color:rgba(99,230,190,.1)}
.cv4-ai-card:nth-child(6):hover{border-color:#63E6BE;box-shadow:0 4px 20px rgba(99,230,190,.3),var(--shadow-clay-raised)}
.cv4-ai-card-emoji{font-size:2.2rem;line-height:1;transition:transform var(--transition-bouncy)}
.cv4-ai-card:active .cv4-ai-card-emoji{transform:scale(1.15)}
.cv4-ai-card-label{font-size:var(--font-body-sm);font-weight:var(--weight-bold);color:var(--text-primary)}
.cv4-ai-loading{grid-column:1/-1;text-align:center;padding:var(--space-8);background:#FFF;border-radius:var(--radius-2xl);box-shadow:var(--shadow-clay)}
.cv4-series-scroll{display:flex;gap:var(--space-3);overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;scrollbar-width:none;padding:var(--space-2) 0 var(--space-3)}
.cv4-series-scroll::-webkit-scrollbar{display:none}
.cv4-series-card{flex-shrink:0;scroll-snap-align:start;width:200px;min-height:230px;background:#FFF;border-radius:var(--radius-2xl);padding:var(--space-5) var(--space-4);box-shadow:var(--shadow-clay);border:2.5px solid rgba(255,143,163,.12);cursor:pointer;transition:all var(--transition-spring);display:flex;flex-direction:column;gap:var(--space-2);position:relative;overflow:hidden}
.cv4-series-card::before{content:'';position:absolute;top:0;left:var(--space-4);right:var(--space-4);height:4px;border-radius:0 0 4px 4px}
.cv4-series-card:nth-child(3n+1)::before{background:var(--stripe-pink)}
.cv4-series-card:nth-child(3n+2)::before{background:var(--stripe-purple)}
.cv4-series-card:nth-child(3n+3)::before{background:var(--stripe-blue)}
.cv4-series-card:active{transform:scale(.96)}
.cv4-series-card:hover{transform:translateY(-2px);box-shadow:var(--shadow-clay-raised)}
.cv4-series-locked{opacity:.55;filter:blur(2px);border-color:rgba(180,180,180,.3);background:#FAFAFA;pointer-events:auto}
.cv4-series-locked:hover{opacity:.82;filter:blur(1px)}
.cv4-series-lock-icon{position:absolute;top:var(--space-3);right:var(--space-3);font-size:1.5rem;opacity:.55;z-index:3}
.cv4-series-lock-label{position:absolute;bottom:var(--space-3);right:var(--space-3);font-size:10px;font-weight:var(--weight-bold);color:var(--text-hint);opacity:.7;z-index:3}
.cv4-series-free-badge{position:absolute;top:var(--space-2);left:var(--space-3);font-size:10px;font-weight:var(--weight-bold);color:#2E7D32;background:linear-gradient(135deg,#E8F5E9,#C8E6C9);padding:3px 10px;border-radius:var(--radius-full);z-index:3;box-shadow:0 1px 4px rgba(46,125,50,.15)}
.cv4-series-emoji{font-size:2.5rem;text-align:center;line-height:1;margin-top:var(--space-4);margin-bottom:var(--space-1)}
.cv4-series-name{font-size:var(--font-body);font-weight:var(--weight-bold);color:var(--text-primary);text-align:center;line-height:1.3}
.cv4-series-meta{display:flex;justify-content:center;gap:var(--space-2);font-size:var(--font-caption)}
.cv4-series-diff{background:linear-gradient(135deg,#EDE7FF,#F5F0FF);padding:2px 10px;border-radius:var(--radius-full);color:#6C5CE7;font-weight:var(--weight-semibold)}
.cv4-series-days{background:linear-gradient(135deg,#FFF0E0,#FFF5EC);padding:2px 10px;border-radius:var(--radius-full);color:#E65100;font-weight:var(--weight-semibold)}
.cv4-series-desc{font-size:var(--font-caption);color:var(--text-hint);text-align:center;line-height:1.4}
.cv4-series-action{margin-top:auto;text-align:center;padding-top:var(--space-2)}
.cv4-series-btn-start{display:inline-block;padding:7px 20px;background:var(--gradient-warm);color:#FFF;border-radius:var(--radius-full);font-size:var(--font-caption);font-weight:var(--weight-bold);box-shadow:0 2px 10px rgba(255,143,163,.3);transition:all var(--transition-bouncy)}
.cv4-series-btn-locked{display:inline-block;padding:7px 16px;background:#F0F0F0;color:var(--text-hint);border-radius:var(--radius-full);font-size:var(--font-caption);font-weight:var(--weight-semibold)}
.cv4-challenge-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--space-3)}
.cv4-grid-item{display:flex;flex-direction:column;align-items:center;gap:var(--space-1);padding:var(--space-4) var(--space-3);min-height:120px;background:#FFF;border-radius:var(--radius-xl);border:2.5px solid transparent;box-shadow:var(--shadow-clay);cursor:pointer;transition:all var(--transition-spring);font-family:inherit;-webkit-tap-highlight-color:transparent;position:relative}
.cv4-grid-item:active{transform:scale(.95)}
.cv4-grid-item:hover{transform:translateY(-2px);box-shadow:var(--shadow-clay-raised)}
.cv4-grid-item-done{background:linear-gradient(135deg,#F0FDF4,#F8FFF8);border-color:rgba(105,219,124,.25)}
.cv4-grid-item-active{border-color:rgba(255,169,77,.4);box-shadow:var(--shadow-glow-orange),var(--shadow-clay-raised)}
.cv4-grid-emoji{font-size:2rem;line-height:1;transition:transform var(--transition-bouncy)}
.cv4-grid-item:hover .cv4-grid-emoji{transform:scale(1.1)}
.cv4-grid-name{font-size:var(--font-body-sm);font-weight:var(--weight-bold);color:var(--text-primary);text-align:center;line-height:1.3}
.cv4-grid-meta{display:flex;gap:var(--space-2);font-size:var(--font-caption);color:var(--text-hint)}
.cv4-grid-check{position:absolute;top:8px;right:8px;font-size:1.3rem;filter:drop-shadow(0 2px 2px rgba(105,219,124,.3))}
.cv4-grid-pulse{position:absolute;top:8px;right:8px;font-size:1.1rem;animation:cv4Pulse 1.5s ease-in-out infinite}
@keyframes cv4Pulse{0%,100%{transform:scale(1);opacity:.6}50%{transform:scale(1.2);opacity:1}}
.cv4-custom-challenge-wrap{grid-column:1/-1;background:linear-gradient(135deg,#F5F0FF,#EDE7FF);border-radius:var(--radius-2xl);padding:var(--space-5);box-shadow:var(--shadow-clay-raised);border:2px solid rgba(180,167,246,.2);text-align:center}
.cv4-custom-challenge-badge{display:inline-block;padding:5px 18px;background:linear-gradient(135deg,#6C5CE7,#8B7BE8);color:#FFF;border-radius:var(--radius-full);font-size:var(--font-body-sm);font-weight:var(--weight-bold);margin-bottom:var(--space-3);box-shadow:0 3px 12px rgba(108,92,231,.3)}
.cv4-custom-challenge-card{background:#FFF;border-radius:var(--radius-xl);padding:var(--space-5);box-shadow:var(--shadow-clay);margin-bottom:var(--space-4);text-align:left}
.cv4-custom-header{display:flex;gap:var(--space-2);margin-bottom:var(--space-3);flex-wrap:wrap}
.cv4-custom-diff{font-size:var(--font-caption);padding:3px 12px;background:linear-gradient(135deg,#FFE0E6,#FFF0F3);border-radius:var(--radius-full);color:#D6336C;font-weight:var(--weight-semibold)}
.cv4-custom-type{font-size:var(--font-caption);padding:3px 12px;background:linear-gradient(135deg,#EDE7FF,#F5F0FF);border-radius:var(--radius-full);color:#6C5CE7;font-weight:var(--weight-semibold)}
.cv4-custom-name{font-size:var(--font-subtitle);font-weight:var(--weight-bold);color:var(--text-primary);margin-bottom:var(--space-1)}
.cv4-custom-desc{font-size:var(--font-body-sm);color:var(--text-secondary);line-height:1.6;margin-bottom:var(--space-2)}
.cv4-custom-meta{display:flex;gap:var(--space-3);font-size:var(--font-caption);color:var(--text-hint)}
.cv4-custom-actions{display:flex;gap:var(--space-3);justify-content:center}
.cv4-empty-state{text-align:center;padding:var(--space-10) var(--space-6);background:linear-gradient(135deg,#FFF,#FAFAFA);border-radius:var(--radius-2xl);box-shadow:var(--shadow-clay);border:2px dashed var(--border-light)}
.cv4-empty-emoji{font-size:3rem;margin-bottom:var(--space-3);animation:cv4Float 3s ease-in-out infinite}
.cv4-empty-text{font-size:var(--font-body);color:var(--text-hint);font-weight:var(--weight-semibold)}
.cv4-toast{position:fixed;top:var(--space-8);left:50%;transform:translateX(-50%);z-index:9999;padding:var(--space-3) var(--space-5);background:rgba(0,0,0,.82);color:#FFF;border-radius:var(--radius-full);font-size:var(--font-body-sm);font-weight:var(--weight-semibold);box-shadow:var(--shadow-clay-floating);pointer-events:none;transition:opacity .35s ease;display:none}
.zpd-badge{display:inline-flex;align-items:center;gap:4px;padding:4px 12px;border-radius:var(--radius-full);font-size:var(--font-caption);font-weight:var(--weight-bold);box-shadow:var(--shadow-clay-sm)}
.zpd-badge-a{background:var(--zpd-bg-a);color:var(--zpd-text-a);border:1.5px solid rgba(46,125,50,.25)}
.zpd-badge-b{background:var(--zpd-bg-b);color:var(--zpd-text-b);border:1.5px solid rgba(230,81,0,.25)}
.zpd-badge-c{background:var(--zpd-bg-c);color:var(--zpd-text-c);border:1.5px solid rgba(106,27,154,.25)}
@media(min-width:480px){.cv4-challenge-grid{grid-template-columns:repeat(3,1fr)}.cv4-series-card{width:220px}}
@media(min-width:768px){.cv4-container{max-width:700px}}
body.dark-mode .cv4-daily-card{background:linear-gradient(135deg,#2D2D3D,#252535,#2D2D3D);border-color:rgba(255,143,163,.12)}
body.dark-mode .cv4-ai-card,body.dark-mode .cv4-grid-item,body.dark-mode .cv4-series-card:not(.cv4-series-locked){background:#272741}
body.dark-mode .cv4-series-locked{background:#1E1E32;border-color:rgba(255,255,255,.05)}
body.dark-mode .cv4-custom-challenge-wrap{background:linear-gradient(135deg,#2D2542,#252035);border-color:rgba(180,167,246,.12)}
body.dark-mode .cv4-custom-challenge-card{background:#272741}
body.dark-mode .cv4-empty-state{background:#272741;border-color:rgba(255,255,255,.06)}
body.dark-mode .cv4-grid-item-done{background:linear-gradient(135deg,#1A3320,#1F2D22)}
/* ===== v3.3 教育模块粘土风格升级 Part 2 ===== */
/* DASHBOARD + REPORT + CO-CREATION + ACHIEVEMENT */

/* === 仪表盘 (dashboard.js) === */
.dash-dim-cards-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:var(--space-2);margin:0 var(--space-4) var(--space-3)}
@media(max-width:480px){.dash-dim-cards-grid{grid-template-columns:repeat(3,1fr)}}
@media(max-width:360px){.dash-dim-cards-grid{grid-template-columns:repeat(2,1fr)}}
.dash-dim-circle-card{display:flex;flex-direction:column;align-items:center;gap:var(--space-1);padding:var(--space-3) var(--space-2);background:#FFF;border-radius:var(--radius-xl);box-shadow:var(--shadow-clay);border:2px solid transparent;cursor:pointer;transition:all var(--transition-spring);text-align:center;position:relative;min-height:100px;justify-content:center}
.dash-dim-circle-card:active{transform:scale(.95)}
.dash-dim-circle-card:hover{transform:translateY(-2px);box-shadow:var(--shadow-clay-raised)}
.dash-dim-circle-icon{font-size:1.8rem;line-height:1}
.dash-dim-circle-score{font-size:var(--font-heading);font-weight:var(--weight-extrabold);color:var(--text-primary);line-height:1}
.dash-dim-circle-name{font-size:11px;font-weight:var(--weight-semibold);color:var(--text-hint)}
.dash-dim-delta-tag{font-size:10px;font-weight:var(--weight-bold);padding:2px 8px;border-radius:var(--radius-full)}
.dash-dim-delta-tag.up{background:linear-gradient(135deg,#E8F5E9,#C8E6C9);color:#2E7D32}
.dash-dim-delta-tag.down{background:linear-gradient(135deg,#FFEBEE,#FFCDD2);color:#C62828}
.dash-radar-locked{opacity:.5;filter:blur(2px);pointer-events:auto}
.dash-radar-locked:hover{opacity:.85;filter:blur(1px)}
.dash-radar-score-locked{color:var(--text-hint);font-style:italic}
.dash-card-locked-section{position:relative}
.dash-card-locked-section::after{content:'';position:absolute;bottom:0;left:0;right:0;height:50px;background:linear-gradient(transparent,rgba(255,255,255,.85));pointer-events:none;border-radius:0 0 var(--radius-2xl) var(--radius-2xl);z-index:1}
.dash-lock-badge{display:inline-flex;align-items:center;gap:4px;padding:3px 12px;background:linear-gradient(135deg,#EDE7FF,#F5F0FF);color:#7C3AED;border-radius:var(--radius-full);font-size:var(--font-caption);font-weight:var(--weight-bold);border:1.5px solid rgba(124,58,237,.25);cursor:pointer;transition:all var(--transition-base)}
.dash-lock-badge:hover{background:linear-gradient(135deg,#DDD6FE,#EDE7FF);box-shadow:0 2px 8px rgba(124,58,237,.2)}
.dash-unlock-btn{display:inline-flex;align-items:center;gap:var(--space-2);padding:var(--space-3) var(--space-6);background:linear-gradient(135deg,#7C3AED,#A78BFA);color:#FFF;border:none;border-radius:var(--radius-2xl);font-size:var(--font-body);font-weight:var(--weight-bold);cursor:pointer;font-family:inherit;box-shadow:0 4px 16px rgba(124,58,237,.3),0 0 0 4px rgba(124,58,237,.08);transition:all var(--transition-bouncy)}
.dash-unlock-btn:active{transform:scale(.95)}
.dash-unlock-btn:hover{box-shadow:0 6px 20px rgba(124,58,237,.4),0 0 0 8px rgba(124,58,237,.06)}
.dash-insight-card{background:linear-gradient(135deg,#F7F4FF,#F0F7FF);border-radius:var(--radius-2xl);padding:var(--space-5);box-shadow:var(--shadow-clay);border:2px solid rgba(180,167,246,.12);position:relative;margin:var(--space-3) var(--space-4)}
.dash-insight-card::before{content:'';position:absolute;top:-10px;left:28px;width:20px;height:20px;background:linear-gradient(135deg,#EDE7FF,#DDD6FE);transform:rotate(45deg);border-radius:4px;z-index:0}
.dash-insight-text{position:relative;z-index:1;font-size:var(--font-body);line-height:1.8;color:var(--text-primary)}
.dash-insight-footer{position:relative;z-index:1}
.dash-coc-list{display:flex;flex-direction:column;gap:var(--space-2)}
.dash-coc-item{display:flex;align-items:flex-start;gap:var(--space-3);padding:var(--space-3) var(--space-4);background:linear-gradient(135deg,#FAFBFF,#FFF5F7);border-radius:var(--radius-xl);border-left:4px solid var(--color-purple);box-shadow:var(--shadow-clay-sm);transition:all var(--transition-base);position:relative}
.dash-coc-item::after{content:'';position:absolute;left:-8px;top:20px;width:12px;height:12px;border-radius:50%;background:var(--color-purple);box-shadow:0 0 0 3px rgba(180,167,246,.2)}
.dash-coc-item--clickable{cursor:pointer}
.dash-coc-item--clickable:active{transform:scale(.98);background:#F5F0FF}
.dash-coc-item-icon{font-size:1.5rem;flex-shrink:0}
.dash-coc-item-content{flex:1;display:flex;flex-direction:column;gap:2px}
.dash-coc-item-title{font-size:var(--font-body-sm);font-weight:var(--weight-semibold);color:var(--text-primary);line-height:1.4}
.dash-coc-item-note{font-size:var(--font-caption);color:var(--text-hint);font-style:italic;line-height:1.4}
.dash-coc-item-meta{display:flex;align-items:center;gap:var(--space-3);font-size:var(--font-caption);color:var(--text-hint)}
.dash-coc-item-artwork-link{color:var(--color-purple);font-weight:var(--weight-semibold)}
.dash-tier-badge{display:inline-flex;align-items:center;gap:4px;padding:2px 10px;border-radius:var(--radius-full);font-size:11px;font-weight:var(--weight-bold)}
.dash-tier-free{background:linear-gradient(135deg,#FFF3E0,#FFE0B2);color:#E65100;border:1px solid rgba(230,81,0,.15)}
.dash-tier-pro{background:linear-gradient(135deg,#EDE7FF,#DDD6FE);color:#6C5CE7;border:1px solid rgba(108,92,231,.15)}

/* === 月度报告 (report.js) === */
.report-page{background:#FFF;border-radius:var(--radius-2xl);padding:var(--space-6);margin-bottom:var(--space-4);box-shadow:var(--shadow-clay);border:1px solid rgba(255,255,255,.5);transition:all var(--transition-spring)}
.report-page:hover{box-shadow:var(--shadow-clay-raised)}
.report-cover-score{background:linear-gradient(135deg,rgba(108,92,231,.06),rgba(118,75,162,.06));border-radius:var(--radius-2xl);padding:var(--space-6);box-shadow:var(--shadow-clay);border:2px solid rgba(180,167,246,.12);position:relative;overflow:hidden}
.report-cover-score::before{content:'';position:absolute;top:-50%;right:-50%;width:200%;height:200%;background:radial-gradient(circle,rgba(180,167,246,.08),transparent 60%);pointer-events:none;animation:reportGlowShift 4s ease-in-out infinite}
@keyframes reportGlowShift{0%,100%{transform:translate(0,0)}50%{transform:translate(-20px,-10px)}}
.report-cover-artwork-img{width:200px;height:200px;border-radius:var(--radius-2xl);box-shadow:var(--shadow-clay-raised),0 0 0 6px rgba(180,167,246,.08);border:3px solid rgba(255,255,255,.5);transition:all var(--transition-spring)}
.report-cover-artwork-img:hover{transform:scale(1.02)}
.report-stat-card{background:linear-gradient(135deg,#F8F6FF,#FFF);border-radius:var(--radius-xl);padding:var(--space-4);box-shadow:var(--shadow-clay);border:1px solid rgba(180,167,246,.1);text-align:center;transition:all var(--transition-spring)}
.report-stat-card:active{transform:scale(.97)}
.report-artwork-card{background:linear-gradient(135deg,#FAFBFF,#FFF5F7);border-radius:var(--radius-xl);padding:var(--space-4);box-shadow:var(--shadow-clay);border:1px solid rgba(180,167,246,.08);transition:all var(--transition-spring)}
.report-artwork-card:hover{box-shadow:var(--shadow-clay-raised)}
.report-artwork-img{width:60px;height:60px;border-radius:var(--radius-lg);box-shadow:var(--shadow-clay-sm);border:2px solid rgba(255,255,255,.5)}
.report-share-btn{background:linear-gradient(135deg,#667eea,#764ba2);color:#FFF;border:none;border-radius:var(--radius-2xl);padding:var(--space-4);font-size:var(--font-body);font-weight:var(--weight-bold);cursor:pointer;box-shadow:0 4px 16px rgba(108,92,231,.3);transition:all var(--transition-bouncy)}
.report-share-btn:active{transform:scale(.95)}
.report-share-btn:hover{box-shadow:0 6px 20px rgba(108,92,231,.45)}
.report-download-btn-full{background:rgba(108,92,231,.08);color:#6C5CE7;border:2px solid rgba(108,92,231,.15);border-radius:var(--radius-2xl);padding:var(--space-4);font-size:var(--font-body);font-weight:var(--weight-bold);cursor:pointer;transition:all var(--transition-bouncy)}
.report-download-btn-full:active{transform:scale(.95)}
.report-progress-bar{height:12px;background:#F0F0F0;border-radius:var(--radius-full);overflow:hidden;box-shadow:inset 0 1px 3px rgba(0,0,0,.06)}
.report-progress-fill{height:100%;background:linear-gradient(90deg,#6C5CE7,#FF6B6B);border-radius:var(--radius-full);transition:width .5s cubic-bezier(.22,.61,.36,1);position:relative}
.report-progress-fill::after{content:'';position:absolute;top:0;right:0;bottom:0;width:16px;background:linear-gradient(90deg,transparent,rgba(255,255,255,.3));border-radius:0 var(--radius-full) var(--radius-full) 0}
.report-milestone-card{border-radius:var(--radius-xl);box-shadow:var(--shadow-clay-sm);border:2px solid rgba(0,200,83,.15);transition:all var(--transition-spring)}
.report-milestone-card:hover{box-shadow:var(--shadow-clay)}
.report-pages-indicator{gap:var(--space-2)}
.report-page-dot{padding:var(--space-2) var(--space-4);border-radius:var(--radius-full);font-size:var(--font-caption);font-weight:var(--weight-bold);background:rgba(108,92,231,.06);color:var(--text-hint);cursor:pointer;transition:all var(--transition-bouncy);border:2px solid transparent}
.report-page-dot.active{background:linear-gradient(135deg,#6C5CE7,#8B7BE8);color:#FFF;box-shadow:0 2px 8px rgba(108,92,231,.3)}

/* === 共创模式 (co-creation.js) === */
.coc-mode-card{border-radius:var(--radius-2xl);box-shadow:var(--shadow-clay);border:3px solid transparent;transition:all var(--transition-spring);cursor:pointer;position:relative;overflow:hidden}
.coc-mode-card:hover{transform:translateY(-2px);box-shadow:var(--shadow-clay-raised)}
.coc-mode-card:active{transform:scale(.98)}
.coc-mode-card:nth-child(1){border-color:rgba(255,143,163,.15)}
.coc-mode-card:nth-child(1):hover{border-color:#FF8FA3;box-shadow:var(--shadow-glow-pink),var(--shadow-clay-raised)}
.coc-mode-card:nth-child(2){border-color:rgba(108,92,231,.15)}
.coc-mode-card:nth-child(2):hover{border-color:#6C5CE7;box-shadow:0 4px 20px rgba(108,92,231,.25),var(--shadow-clay-raised)}
.coc-mode-card:nth-child(3){border-color:rgba(255,140,66,.15)}
.coc-mode-card:nth-child(3):hover{border-color:#FF8C42;box-shadow:0 4px 20px rgba(255,140,66,.25),var(--shadow-clay-raised)}
.coc-mode-icon{font-size:2.5rem;line-height:1;transition:transform var(--transition-bouncy)}
.coc-mode-card:hover .coc-mode-icon{transform:scale(1.1)}
.coc-mode-name{font-size:var(--font-title);transition:color var(--transition-base)}
.coc-mode-card:hover .coc-mode-name{color:var(--text-primary)}
.coc-step-tag{padding:4px 14px;border-radius:var(--radius-full);background:rgba(255,255,255,.7);font-size:var(--font-caption);font-weight:var(--weight-semibold);box-shadow:var(--shadow-clay-sm);color:var(--text-secondary)}
.coc-btn-start{background:linear-gradient(135deg,#6C5CE7,#a29bfe);box-shadow:0 4px 20px rgba(108,92,231,.3);transition:all var(--transition-bouncy)}
.coc-btn-start:active{transform:scale(.96)}
.coc-btn-primary{background:linear-gradient(135deg,#FF9A9E,#FF8FA3);box-shadow:0 4px 14px rgba(255,143,163,.3)}
.coc-guide-card{border-radius:var(--radius-2xl);box-shadow:var(--shadow-clay);overflow:hidden;transition:all var(--transition-spring)}
.coc-guide-card:hover{box-shadow:var(--shadow-clay-raised)}
.coc-guide-card-inner{padding:var(--space-6) var(--space-5);background:linear-gradient(135deg,#FFE0E6,#FFF5F7,#EDE7FF);position:relative}
.coc-guide-card-inner::after{content:'';position:absolute;bottom:0;left:0;right:0;height:3px;background:linear-gradient(90deg,#FF8FA3,#B4A7F6,#74C0FC);border-radius:3px}
.coc-guide-card-quote{font-size:2rem;margin-bottom:var(--space-2)}
.coc-guide-card-text{font-size:var(--font-body);line-height:1.9;color:var(--text-primary);font-weight:var(--weight-medium)}
.coc-guide-card-meta{display:flex;justify-content:center;gap:var(--space-3);padding:var(--space-3) var(--space-5);flex-wrap:wrap}
.coc-meta-tag{font-size:var(--font-caption);font-weight:var(--weight-semibold);color:var(--text-hint);background:rgba(255,255,255,.7);padding:3px 12px;border-radius:var(--radius-full)}
.coc-guide-card-tips{padding:var(--space-3) var(--space-5);background:linear-gradient(135deg,#FFF9E6,#FFF3E0);border-top:2px solid rgba(255,169,77,.15);font-size:var(--font-body-sm);color:#E65100;text-align:center;font-weight:var(--weight-semibold)}
.coc-round{border-radius:var(--radius-xl);background:linear-gradient(135deg,#FAFBFF,#FFF5F7);box-shadow:var(--shadow-clay-sm);transition:all var(--transition-base)}
.coc-round:hover{box-shadow:var(--shadow-clay);transform:translateX(4px)}
.coc-round-num{width:36px;height:36px;border-radius:50%;box-shadow:0 2px 10px rgba(108,92,231,.3)}
.coc-ai-workshop{border-radius:var(--radius-2xl);box-shadow:var(--shadow-clay);border:2px solid rgba(180,167,246,.15)}
.coc-ai-card{border-radius:var(--radius-xl);box-shadow:var(--shadow-clay);border:2.5px solid transparent;transition:all var(--transition-spring)}
.coc-ai-card:hover{transform:translateY(-2px);box-shadow:var(--shadow-clay-raised);border-color:rgba(180,167,246,.3)}
.coc-ai-card:active{transform:scale(.95)}
.coc-inspiration-card{border-radius:var(--radius-xl);box-shadow:var(--shadow-clay);border:2px solid transparent}
.coc-inspiration-card:hover{transform:translateY(-2px);box-shadow:var(--shadow-clay-raised);border-color:#FF8FA3}
.coc-btn-secondary{border-radius:var(--radius-2xl);box-shadow:var(--shadow-clay-sm);transition:all var(--transition-bouncy)}
.coc-btn-secondary:active{transform:scale(.96)}
.coc-ai-btn-random{border-radius:var(--radius-2xl);box-shadow:0 4px 16px rgba(102,126,234,.3);transition:all var(--transition-bouncy)}
.coc-ai-btn-custom{border-radius:var(--radius-2xl);box-shadow:0 4px 16px rgba(255,143,163,.3);transition:all var(--transition-bouncy)}

/* === 成就系统 (achievement.js) === */
.achievement-card{border-radius:var(--radius-2xl);box-shadow:var(--shadow-clay);border:2px solid transparent;transition:all var(--transition-spring);overflow:hidden;position:relative;padding:var(--space-5) var(--space-3)}
.achievement-card::before{content:'';position:absolute;top:0;left:var(--space-3);right:var(--space-3);height:4px;border-radius:0 0 4px 4px;opacity:0;transition:opacity var(--transition-base)}
.achievement-card.achieved::before{background:linear-gradient(90deg,#FFD43B,#FFA94D);opacity:1}
.achievement-card.achieved{background:linear-gradient(135deg,#FFFDF7,#FFF9E0,#FFF0E0);border-color:rgba(255,169,77,.2)}
.achievement-card:not(.achieved){background:linear-gradient(135deg,#FAFAFA,#F5F5F5);border-color:rgba(200,200,200,.15);opacity:.8}
.achievement-card:not(.achieved):hover{opacity:.95;transform:translateY(-2px);box-shadow:var(--shadow-clay-raised)}
.achievement-card:not(.achieved) .achievement-icon{opacity:.5;filter:grayscale(30%)}
.achievement-card.achieved:hover{transform:translateY(-2px);box-shadow:var(--shadow-clay-raised)}
.achievement-icon{width:60px;height:60px;border-radius:50%;background:linear-gradient(135deg,#EDE7FF,#F5F0FF);display:flex;align-items:center;justify-content:center;font-size:1.6rem;box-shadow:var(--shadow-clay-sm);border:2px solid rgba(180,167,246,.15);transition:all var(--transition-spring)}
.achievement-card.achieved .achievement-icon{background:linear-gradient(135deg,#FFF9E0,#FFF0E0);border-color:rgba(255,169,77,.3);box-shadow:var(--shadow-glow-orange)}
.achievement-name{font-size:var(--font-body-sm);font-weight:var(--weight-bold)}
.achievement-desc{font-size:var(--font-caption);color:var(--text-hint)}
.achievement-summary{display:flex;gap:var(--space-2);margin-bottom:var(--space-4)}
.summary-item{flex:1;background:linear-gradient(135deg,#FFF,#FAFAFA);border-radius:var(--radius-xl);padding:var(--space-4);box-shadow:var(--shadow-clay);border:1px solid rgba(255,255,255,.5);text-align:center;transition:all var(--transition-spring)}
.summary-num{font-size:var(--font-heading);font-weight:var(--weight-extrabold);background:linear-gradient(135deg,#FFA94D,#FF8FA3);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}

/* === PAYWALL 粘土升级 === */
.paywall-clay-overlay{position:fixed;inset:0;z-index:10000;display:flex;align-items:center;justify-content:center;background:rgba(0,0,0,.4);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);animation:fadeIn .25s ease}
.paywall-clay-card{background:#FFF;border-radius:var(--radius-3xl);padding:var(--space-8) var(--space-6);max-width:360px;width:90%;text-align:center;box-shadow:var(--shadow-clay-floating),0 0 0 1px rgba(255,255,255,.5);animation:modalSlideUp .4s cubic-bezier(.34,1.56,.64,1);position:relative;overflow:hidden}
.paywall-clay-card::before{content:'';position:absolute;top:0;left:0;right:0;height:6px;background:linear-gradient(90deg,#FF8FA3,#FFA94D,#FFD43B,#69DB7C,#74C0FC,#B4A7F6);border-radius:var(--radius-3xl) var(--radius-3xl) 0 0}
.paywall-clay-icon{font-size:3.5rem;margin-bottom:var(--space-3);animation:cv4Float 3s ease-in-out infinite}
.paywall-clay-title{font-size:var(--font-title);font-weight:var(--weight-extrabold);color:var(--text-primary);margin-bottom:var(--space-2)}
.paywall-clay-desc{font-size:var(--font-body);color:var(--text-secondary);line-height:1.7;margin-bottom:var(--space-4)}
.paywall-clay-features{display:flex;flex-direction:column;gap:var(--space-2);margin-bottom:var(--space-5);text-align:left}
.paywall-clay-feature{display:flex;align-items:center;gap:var(--space-2);font-size:var(--font-body-sm);color:var(--text-primary);padding:var(--space-2) var(--space-3);background:linear-gradient(135deg,#F8F6FF,#FFF);border-radius:var(--radius-lg)}
.paywall-clay-btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--space-2);padding:var(--space-4) var(--space-8);width:100%;min-height:52px;background:var(--gradient-warm);color:#FFF;border:none;border-radius:var(--radius-2xl);font-size:var(--font-subtitle);font-weight:var(--weight-extrabold);cursor:pointer;font-family:inherit;box-shadow:var(--shadow-glow-orange),0 4px 20px rgba(255,169,77,.35);transition:all var(--transition-bouncy)}
.paywall-clay-btn:active{transform:scale(.96)}
.paywall-clay-close{position:absolute;top:var(--space-3);right:var(--space-3);width:36px;height:36px;border-radius:50%;border:none;background:rgba(0,0,0,.06);color:var(--text-hint);font-size:1rem;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all var(--transition-base)}
.paywall-clay-close:hover{background:rgba(0,0,0,.1)}

/* === 庆祝弹窗 === */
.celebration-clay-overlay{position:fixed;inset:0;z-index:10001;display:flex;align-items:center;justify-content:center;background:rgba(0,0,0,.45);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);animation:fadeIn .3s ease}
.celebration-clay-card{background:linear-gradient(135deg,#FFF,#FFF9F0,#FFF5F7);border-radius:var(--radius-3xl);padding:var(--space-8);max-width:340px;width:85%;text-align:center;box-shadow:var(--shadow-clay-floating);border:2px solid rgba(255,169,77,.2);animation:badgeBounceIn .5s cubic-bezier(.34,1.56,.64,1);position:relative;overflow:hidden}
.celebration-clay-card::before{content:'';position:absolute;inset:0;background:radial-gradient(circle at 50% 30%,rgba(255,212,59,.15),transparent 60%);pointer-events:none}
.celebration-clay-emoji{font-size:4rem;margin-bottom:var(--space-3);animation:cv4Float 2s ease-in-out infinite;filter:drop-shadow(0 4px 8px rgba(255,169,77,.3))}
.celebration-clay-title{font-size:var(--font-heading);font-weight:var(--weight-extrabold);color:var(--text-primary);margin-bottom:var(--space-2)}
.celebration-clay-subtitle{font-size:var(--font-body);color:var(--text-secondary);line-height:1.6;margin-bottom:var(--space-4)}
.celebration-clay-badge{display:inline-block;padding:var(--space-2) var(--space-5);background:linear-gradient(135deg,#FFD43B,#FFA94D);color:#FFF;border-radius:var(--radius-full);font-weight:var(--weight-bold);font-size:var(--font-body);box-shadow:0 2px 12px rgba(255,169,77,.3)}

/* === 空状态 粘土 === */
.empty-state-clay{padding:var(--space-12) var(--space-6);text-align:center;background:linear-gradient(135deg,#FFF,#FAFAFA);border-radius:var(--radius-2xl);box-shadow:var(--shadow-clay);border:2px dashed var(--border-light);margin:var(--space-4)}
.empty-state-clay-icon{font-size:4rem;margin-bottom:var(--space-4);animation:cv4Float 3s ease-in-out infinite}
.empty-state-clay-title{font-size:var(--font-subtitle);font-weight:var(--weight-bold);color:var(--text-primary);margin-bottom:var(--space-2)}
.empty-state-clay-desc{font-size:var(--font-body-sm);color:var(--text-hint);line-height:1.6;max-width:280px;margin:0 auto var(--space-4)}
.empty-state-clay-btn{display:inline-flex;align-items:center;gap:var(--space-2);padding:var(--space-3) var(--space-6);background:var(--gradient-warm);color:#FFF;border:none;border-radius:var(--radius-2xl);font-size:var(--font-body);font-weight:var(--weight-bold);cursor:pointer;box-shadow:0 4px 14px rgba(255,169,77,.3);transition:all var(--transition-bouncy)}
.empty-state-clay-btn:active{transform:scale(.95)}

/* Challenge daily AI fallback button */
.cv4-daily-ai-fallback {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  margin-top: var(--space-4);
  padding: var(--space-2) var(--space-5);
  background: var(--gradient-ai, linear-gradient(135deg, #6C63FF, #A855F7));
  color: #FFF;
  border: none;
  border-radius: var(--radius-2xl);
  font-size: var(--font-body);
  font-weight: var(--weight-bold);
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(108,99,255,.3);
  transition: all var(--transition-bouncy);
}
.cv4-daily-ai-fallback:active {
  transform: scale(.95);
}
.cv4-daily-ai-fallback:disabled {
  opacity: .6;
  cursor: not-allowed;
}

/* === 通用粘土过渡动画 === */
.clay-enter{animation:slideUp .4s ease-out}
.clay-bounce{transition:all var(--transition-spring)}
.clay-bounce:active{transform:scale(.96)}
.clay-hover-lift{transition:all var(--transition-spring)}
.clay-hover-lift:hover{transform:translateY(-2px);box-shadow:var(--shadow-clay-raised)}

/* @MAYBE-DEAD: v3.3 局部暗黑覆盖片段，可能已被 dark-mode.css 全面覆盖取代。保留以维持向后兼容。 */
/* === 暗黑模式覆盖 === */
body.dark-mode .dash-dim-circle-card{background:#272741}
body.dark-mode .dash-coc-item{background:linear-gradient(135deg,#252535,#2D2D3D)}
/* === 仪表盘增强 (dashboard.js v3.5) === */

/* ---- 环形进度条 ---- */
.dash-progress-ring-section {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-5);
  padding: var(--space-4) 0;
  margin-bottom: var(--space-3);
}
.dash-ring-container {
  flex-shrink: 0;
}
.dash-ring-svg {
  filter: drop-shadow(0 2px 8px rgba(108,92,231,0.15));
}
.dash-ring-progress {
  transition: stroke-dashoffset 1s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.dash-progress-ring-text {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.dash-progress-ring-count {
  font-size: 2.4rem;
  font-weight: 800;
  background: linear-gradient(135deg, #FF6B6B, #6C5CE7);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  line-height: 1;
}
.dash-progress-ring-total {
  font-size: 1rem;
  font-weight: 600;
  color: var(--text-hint);
  margin-left: 4px;
}
.dash-progress-ring-label {
  font-size: 0.75rem;
  color: var(--text-hint);
  margin-top: 2px;
  font-weight: 500;
}

/* ---- 里程碑子标题 ---- */
.dash-milestone-subheader {
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--text-hint);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: var(--space-2);
  padding: 0 var(--space-1);
}

/* ---- 解锁里程碑加日期 ---- */
.dash-milestone-item.unlocked {
  flex-direction: row;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  text-align: left;
}
.dash-milestone-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-width: 0;
}

/* ---- 锁定里程碑条件文字 ---- */
.dash-milestone-condition {
  font-size: 12px;
  color: var(--text-hint);
  text-align: center;
  line-height: 1.3;
  margin-top: 2px;
}
.dash-milestone-progress {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  width: 100%;
  margin: 4px 0;
}
.dash-milestone-progress .dash-progress-bar {
  flex: 1;
}
.dash-milestone-progress-text {
  font-size: 12px;
  font-weight: 700;
  color: var(--color-purple);
  white-space: nowrap;
}

/* ---- 空图表状态 ---- */
.dash-empty-chart {
  text-align: center;
  padding: var(--space-8) var(--space-4);
  animation: dashEmptyIn 0.4s ease;
}
@keyframes dashEmptyIn {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}
.dash-empty-chart-icon {
  font-size: 2.8rem;
  margin-bottom: var(--space-3);
  animation: dashFloat 3s ease-in-out infinite;
}
@keyframes dashFloat {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-6px); }
}
.dash-empty-chart-text {
  font-size: var(--font-body-sm);
  color: var(--text-secondary);
  line-height: 1.6;
  max-width: 260px;
  margin: 0 auto;
  font-weight: 500;
}

/* ---- 空作品引导卡片 ---- */
.dash-empty-artworks {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: var(--space-6) var(--space-4);
  text-align: center;
  background: linear-gradient(135deg, #FFF5F7, #FFF0F3);
  border-radius: var(--radius-xl);
  border: 2px dashed rgba(255,143,163,0.3);
}
.dash-empty-artworks-icon {
  font-size: 2.4rem;
  margin-bottom: var(--space-2);
  animation: dashFloat 3s ease-in-out infinite;
}
.dash-empty-artworks-text {
  font-size: var(--font-body-sm);
  color: var(--text-secondary);
  line-height: 1.5;
  margin-bottom: var(--space-3);
  font-weight: 500;
}
.dash-empty-artworks-action {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-5);
  background: linear-gradient(135deg, #FF8FA3, #FF6B6B);
  color: #FFF;
  border-radius: var(--radius-2xl);
  font-size: var(--font-body-sm);
  font-weight: 700;
  cursor: pointer;
  box-shadow: 0 4px 12px rgba(255,107,107,0.25);
  transition: all var(--transition-bouncy);
}
.dash-empty-artworks-action:active {
  transform: scale(0.95);
}

/* ---- 分类建议 ---- */
.dash-suggestions-categories {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}
.dash-suggestion-category {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.dash-suggestion-cat-label {
  font-size: 0.7rem;
  font-weight: 700;
  color: var(--text-hint);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  padding: 0 var(--space-1);
}
.dash-suggestion-item {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-3);
  background: linear-gradient(135deg, #F8FBFF, #FFF5F7);
  border-radius: var(--radius-lg);
  border-left: 3px solid var(--color-purple);
  position: relative;
}
.dash-suggestion-btn {
  flex-shrink: 0;
  padding: 4px 14px;
  background: linear-gradient(135deg, #6C5CE7, #a29bfe);
  color: #fff;
  border: none;
  border-radius: var(--radius-2xl);
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
  transition: all var(--transition-bouncy);
  box-shadow: 0 2px 8px rgba(108,92,231,0.2);
  font-family: inherit;
}
.dash-suggestion-btn:active {
  transform: scale(0.95);
}
.dash-suggestions-empty {
  text-align: center;
  padding: var(--space-5);
  color: var(--text-hint);
  font-weight: 500;
  font-size: var(--font-body-sm);
}

/* ---- 挑战系列订阅徽章 ---- */
.cv4-tier-badge {
  position: absolute;
  top: 8px;
  left: 8px;
  padding: 2px 8px;
  border-radius: var(--radius-sm);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.3px;
  z-index: 3;
  white-space: nowrap;
}
.cv4-tier-creator {
  background: linear-gradient(135deg, #EDE7FF, #DDD6FE);
  color: #6C5CE7;
  border: 1px solid rgba(108,92,231,0.2);
  box-shadow: 0 1px 4px rgba(108,92,231,0.15);
}
.cv4-tier-master {
  background: linear-gradient(135deg, #FEF3C7, #FDE68A);
  color: #92400E;
  border: 1px solid rgba(251,191,36,0.3);
  box-shadow: 0 1px 4px rgba(251,191,36,0.2);
}
.cv4-tier-family {
  background: linear-gradient(135deg, #D1FAE5, #A7F3D0);
  color: #065F46;
  border: 1px solid rgba(16,185,129,0.3);
  box-shadow: 0 1px 4px rgba(16,185,129,0.2);
}

/* ---- 锁定系列优化 ---- */
.cv4-series-lock-banner {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 6px 4px;
  background: rgba(200,200,200,0.5);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  font-size: 12px;
  font-weight: 700;
  color: #6A6A6A;
  text-align: center;
  border-radius: 0 0 var(--radius-2xl) var(--radius-2xl);
  z-index: 2;
}
.cv4-series-locked {
  opacity: 0.75;
  position: relative;
  overflow: hidden;
}
.cv4-series-locked::after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(245,245,245,0.3);
  pointer-events: none;
  z-index: 1;
  border-radius: var(--radius-2xl);
}
.cv4-series-lock-icon {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 28px;
  opacity: 0.6;
  z-index: 3;
  animation: none;
}

/* ---- Dark mode 新增 ---- */
body.dark-mode .dash-progress-ring-count {
  background: linear-gradient(135deg, #FF6B6B, #6C5CE7);
  -webkit-background-clip: text;
  background-clip: text;
}
body.dark-mode .dash-empty-artworks {
  background: linear-gradient(135deg, #2D2530, #2D2D3D);
  border-color: rgba(255,143,163,0.15);
}
body.dark-mode .dash-suggestion-item {
  background: linear-gradient(135deg, #252535, #2D2D3D);
}
body.dark-mode .dash-milestone-item.unlocked {
  background: linear-gradient(135deg, #2D2825, #2D2A20);
}
body.dark-mode .dash-milestone-item.locked {
  background: #222;
}
body.dark-mode .dash-empty-chart-text {
  color: #aaa;
}
body.dark-mode .cv4-series-locked::after {
  background: rgba(30,30,30,0.3);
}

body.dark-mode .report-page{background:#272741}
body.dark-mode .report-stat-card{background:linear-gradient(135deg,#252535,#272741)}
body.dark-mode .report-artwork-card{background:linear-gradient(135deg,#252535,#2D2D3D)}
body.dark-mode .paywall-clay-card{background:#272741}
body.dark-mode .celebration-clay-card{background:linear-gradient(135deg,#272741,#2D2A2A,#272741)}
body.dark-mode .achievement-card:not(.achieved){background:linear-gradient(135deg,#1E1E32,#222238)}
body.dark-mode .coc-round{background:linear-gradient(135deg,#252535,#2D2D3D)}
body.dark-mode .empty-state-clay{background:#272741;border-color:rgba(255,255,255,.06)}
body.dark-mode .coc-guide-card-inner{background:linear-gradient(135deg,#2D2542,#252535,#252035)}

/* ===== v3.4 首页深度粘土升级 ===== */

/* ========== 7.1 首页全局布局优化 ========== */

/* 背景渐变过渡层 */
.page-home-v31 {
  background: linear-gradient(180deg, #FEF7F0 0%, #FFF5F8 15%, #FEFAF5 40%, #FFFDF8 70%, #F5F9FC 100%) !important;
  position: relative;
  overflow-x: hidden;
}

.page-home-v31::before {
  content: '';
  position: absolute;
  top: -60px;
  left: 50%;
  transform: translateX(-50%);
  width: 320px;
  height: 320px;
  background: radial-gradient(circle, rgba(255,143,163,0.08) 0%, rgba(255,169,77,0.04) 40%, transparent 70%);
  border-radius: 50%;
  pointer-events: none;
  z-index: 0;
}

.page-home-v31::after {
  content: '';
  position: absolute;
  top: 180px;
  right: -40px;
  width: 200px;
  height: 200px;
  background: radial-gradient(circle, rgba(180,167,246,0.06) 0%, rgba(116,192,252,0.03) 40%, transparent 70%);
  border-radius: 50%;
  pointer-events: none;
  z-index: 0;
}

.home-v31-container {
  position: relative;
  z-index: 1;
  padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 80px);
}

/* Section 间距节奏优化 (4+8+12+16+24) */
.home-v31-section {
  padding: 0 var(--space-4);
  margin-bottom: var(--space-5);
}

/* 桌面端居中 max-width 限制 */
@media (min-width: 768px) {
  .home-v31-section {
    max-width: 560px;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: var(--space-6);
  }
  .home-v31-hero {
    max-width: 560px;
    margin: 0 auto;
  }
  .v34-big-btns {
    max-width: 480px;
    margin: 0 auto;
  }
}

/* ========== 7.2 角色动画区 (hero) — 首页视觉焦点 ========== */

.home-v31-hero {
  position: relative;
  text-align: center;
  padding: var(--space-8) var(--space-4) var(--space-5);
  cursor: pointer;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
  z-index: 1;
}

.home-v31-hero:active {
  transform: scale(0.97);
}

/* 背景装饰泡泡 */
.v34-hero-bg-bubbles {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  pointer-events: none;
  z-index: 0;
  overflow: hidden;
}

.v34-hero-bubble {
  position: absolute;
  border-radius: 50%;
  opacity: 0.15;
  animation: v34BubbleFloat 6s ease-in-out infinite;
}

.v34-hero-bubble:nth-child(1) {
  width: 60px;
  height: 60px;
  background: radial-gradient(circle, rgba(255,143,163,0.5), transparent);
  top: 15%;
  left: 10%;
  animation-delay: 0s;
}

.v34-hero-bubble:nth-child(2) {
  width: 40px;
  height: 40px;
  background: radial-gradient(circle, rgba(180,167,246,0.5), transparent);
  top: 40%;
  right: 15%;
  animation-delay: 1.5s;
  animation-duration: 5s;
}

.v34-hero-bubble:nth-child(3) {
  width: 50px;
  height: 50px;
  background: radial-gradient(circle, rgba(255,169,77,0.5), transparent);
  top: 65%;
  left: 20%;
  animation-delay: 3s;
  animation-duration: 7s;
}

.v34-hero-bubble:nth-child(4) {
  width: 30px;
  height: 30px;
  background: radial-gradient(circle, rgba(116,192,252,0.5), transparent);
  top: 20%;
  right: 25%;
  animation-delay: 4s;
  animation-duration: 4.5s;
}

@keyframes v34BubbleFloat {
  0%, 100% { transform: translateY(0px) scale(1); opacity: 0.15; }
  50% { transform: translateY(-12px) scale(1.1); opacity: 0.25; }
}

/* Emoji 粘土圆圈 — 双层阴影 + 更大尺寸 + 光晕 */
.v34-hero-avatar-ring {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 110px;
  height: 110px;
  margin-bottom: var(--space-4);
  z-index: 1;
}

.v34-hero-avatar-ring::before {
  content: '';
  position: absolute;
  inset: -6px;
  border-radius: 50%;
  background: linear-gradient(135deg, rgba(255,143,163,0.25), rgba(255,169,77,0.15), rgba(180,167,246,0.2));
  z-index: 0;
  animation: v34GlowPulse 3s ease-in-out infinite;
}

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

.v34-hero-emoji {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 110px;
  height: 110px;
  font-size: 64px;
  background: linear-gradient(145deg, #FFFFFF, #F8F4FF);
  border-radius: 50%;
  position: relative;
  z-index: 2;
  box-shadow:
    8px 8px 20px rgba(180,167,246,0.15),
    -4px -4px 14px rgba(255,255,255,0.9),
    0 2px 8px rgba(0,0,0,0.04),
    inset 0 1px 0 rgba(255,255,255,0.8);
  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.v34-hero-emoji.hero-wave {
  animation: v34HeroBounce 2.5s ease-in-out infinite;
}

@keyframes v34HeroBounce {
  0%, 100% { transform: translateY(0); }
  10% { transform: translateY(-6px) rotate(-5deg); }
  20% { transform: translateY(0) rotate(5deg); }
  30% { transform: translateY(-6px) rotate(-5deg); }
  40% { transform: translateY(0) rotate(3deg); }
  60%, 100% { transform: translateY(0) rotate(0); }
}

/* 问候语 — 更大字号 + 渐变 */
.v34-hero-greeting {
  font-size: 1.5rem;
  font-weight: var(--weight-bold);
  color: var(--text-primary);
  margin-bottom: var(--space-2);
  position: relative;
  z-index: 1;
  animation: v34FadeInUp 0.6s ease-out both;
  animation-delay: 0.1s;
}

.v34-hero-greeting strong {
  font-weight: var(--weight-extrabold);
  background: linear-gradient(135deg, #FF8FA3 0%, #FFA94D 50%, #B4A7F6 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

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

/* 连续天数粘土徽章 */
.v34-streak-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: var(--font-body-sm);
  font-weight: var(--weight-bold);
  color: #B45309;
  background: linear-gradient(135deg, #FFF7E0 0%, #FDE68A 50%, #FEF3C7 100%);
  padding: 4px 16px;
  border-radius: var(--radius-full);
  box-shadow:
    2px 2px 6px rgba(180,83,9,0.08),
    -2px -2px 4px rgba(255,255,255,0.7),
    inset 0 1px 0 rgba(255,255,255,0.6);
  animation: v34FadeInUp 0.6s ease-out both;
  animation-delay: 0.2s;
}

.v34-streak-hint {
  font-size: var(--font-caption);
  color: var(--text-hint);
  font-weight: var(--weight-medium);
  animation: v34FadeInUp 0.6s ease-out both;
  animation-delay: 0.2s;
}

/* 点击提示 — 粘土脉动卡片 */
.v34-hero-tap-hint {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: var(--space-3);
  padding: 6px 18px;
  font-size: var(--font-caption);
  font-weight: var(--weight-semibold);
  color: var(--text-hint);
  background: rgba(255,255,255,0.6);
  border-radius: var(--radius-full);
  box-shadow: 0 1px 4px rgba(0,0,0,0.04), inset 0 1px 0 rgba(255,255,255,0.8);
  animation: v34TapPulse 2.5s ease-in-out infinite;
  position: relative;
  z-index: 1;
  cursor: pointer;
}

@keyframes v34TapPulse {
  0%, 100% { transform: scale(1); opacity: 0.6; box-shadow: 0 1px 4px rgba(0,0,0,0.04), inset 0 1px 0 rgba(255,255,255,0.8); }
  50% { transform: scale(1.05); opacity: 0.95; box-shadow: 0 3px 12px rgba(255,143,163,0.15), inset 0 1px 0 rgba(255,255,255,0.8); }
}

/* 移动端 hero 适配 */
@media (min-width: 480px) {
  .v34-hero-avatar-ring,
  .v34-hero-emoji {
    width: 130px;
    height: 130px;
  }
  .v34-hero-emoji {
    font-size: 76px;
  }
  .v34-hero-greeting {
    font-size: 1.75rem;
  }
}

@media (min-width: 768px) {
  .v34-hero-avatar-ring,
  .v34-hero-emoji {
    width: 140px;
    height: 140px;
  }
  .v34-hero-emoji {
    font-size: 84px;
  }
  .v34-hero-greeting {
    font-size: var(--font-hero);
  }
}

/* ========== 7.3 共创 Banner — 完全重做 ========== */

.v34-cocreation-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-4) var(--space-4);
  background: linear-gradient(145deg, #FFFFFF 0%, #FFF8FA 40%, #FFF5FF 100%);
  border-radius: var(--radius-2xl);
  box-shadow:
    8px 8px 20px rgba(0,0,0,0.05),
    -4px -4px 14px rgba(255,255,255,0.9),
    inset 0 1px 0 rgba(255,255,255,0.8);
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.3s ease;
}

.v34-cocreation-card:active {
  transform: scale(0.97);
  box-shadow:
    2px 2px 8px rgba(0,0,0,0.06),
    -1px -1px 6px rgba(255,255,255,0.7),
    inset 0 2px 6px rgba(0,0,0,0.04);
}

/* 微光扫描动画 */
.v34-cocreation-card::after {
  content: '';
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: linear-gradient(
    105deg,
    transparent 40%,
    rgba(255,255,255,0.3) 45%,
    rgba(255,255,255,0.5) 50%,
    rgba(255,255,255,0.3) 55%,
    transparent 60%
  );
  animation: v34Shine 3s ease-in-out infinite;
  pointer-events: none;
}

@keyframes v34Shine {
  0% { transform: translateX(-100%) translateY(-100%) rotate(45deg); }
  100% { transform: translateX(100%) translateY(100%) rotate(45deg); }
}

/* 共创图标区 */
.v34-cocreation-left {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  min-width: 0;
  flex: 1;
  position: relative;
  z-index: 1;
}

.v34-cocreation-emoji {
  font-size: 44px;
  flex-shrink: 0;
  filter: drop-shadow(0 2px 4px rgba(0,0,0,0.08));
  animation: v34Float 3s ease-in-out infinite;
}

@keyframes v34Float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-4px); }
}

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

.v34-cocreation-badge {
  display: inline-flex;
  align-self: flex-start;
  font-size: 12px;
  font-weight: var(--weight-bold);
  color: #6D28D9;
  background: linear-gradient(135deg, rgba(180,167,246,0.2), rgba(255,143,163,0.15));
  padding: 2px 10px;
  border-radius: var(--radius-full);
  margin-bottom: 2px;
}

.v34-cocreation-inviter {
  font-size: var(--font-body-sm);
  font-weight: var(--weight-bold);
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.v34-cocreation-theme {
  font-size: var(--font-caption);
  color: var(--text-secondary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* 共创按钮 — magic 渐变粘土 */
.v34-cocreation-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 10px 18px;
  font-size: var(--font-body-sm);
  font-weight: var(--weight-bold);
  color: #FFF;
  background: linear-gradient(135deg, #FF8FA3 0%, #B4A7F6 100%);
  border-radius: var(--radius-full);
  white-space: nowrap;
  flex-shrink: 0;
  position: relative;
  z-index: 1;
  box-shadow:
    4px 4px 10px rgba(180,167,246,0.25),
    -1px -1px 4px rgba(255,255,255,0.6),
    inset 0 1px 0 rgba(255,255,255,0.3);
  transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.v34-cocreation-btn:active {
  transform: scale(0.94);
  box-shadow:
    1px 1px 4px rgba(180,167,246,0.2),
    inset 0 2px 6px rgba(0,0,0,0.08);
}

/* 共创区域 entrance 动画 */
.v34-cocreation-entrance {
  animation: v34SlideInRight 0.5s ease-out both;
}

@keyframes v34SlideInRight {
  from { opacity: 0; transform: translateX(30px); }
  to { opacity: 1; transform: translateX(0); }
}

/* ========== 7.4 今日挑战卡片 — 粘土风格 ========== */

.v34-challenge-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-4) var(--space-4);
  background: linear-gradient(145deg, #FFFFFF 0%, #FFFDFA 100%);
  border-radius: var(--radius-2xl);
  box-shadow:
    8px 8px 20px rgba(0,0,0,0.05),
    -4px -4px 14px rgba(255,255,255,0.9),
    inset 0 1px 0 rgba(255,255,255,0.8);
  cursor: pointer;
  transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.3s ease;
  position: relative;
  overflow: hidden;
}

.v34-challenge-card:hover {
  transform: scale(1.01);
}

.v34-challenge-card:active {
  transform: scale(0.96);
  box-shadow:
    2px 2px 8px rgba(0,0,0,0.06),
    -1px -1px 6px rgba(255,255,255,0.7),
    inset 0 2px 6px rgba(0,0,0,0.04);
}

/* 挑战卡左侧色条 */
.v34-challenge-accent-easy {
  border-left: 5px solid transparent;
  border-image: linear-gradient(to bottom, #69DB7C, #63E6BE) 1;
  border-radius: var(--radius-2xl);
}

.v34-challenge-accent-medium {
  border-left: 5px solid transparent;
  border-image: linear-gradient(to bottom, #FFA94D, #FFD43B) 1;
  border-radius: var(--radius-2xl);
}

.v34-challenge-accent-hard {
  border-left: 5px solid transparent;
  border-image: linear-gradient(to bottom, #B4A7F6, #7C3AED) 1;
  border-radius: var(--radius-2xl);
}

.v34-challenge-left {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  min-width: 0;
  flex: 1;
}

.v34-challenge-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  font-size: 32px;
  background: linear-gradient(145deg, #F0F4FF, #E8ECFB);
  border-radius: var(--radius-xl);
  flex-shrink: 0;
  box-shadow:
    3px 3px 8px rgba(0,0,0,0.04),
    -2px -2px 6px rgba(255,255,255,0.8),
    inset 0 1px 0 rgba(255,255,255,0.7);
}

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

.v34-challenge-tag {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  gap: 4px;
  font-size: 12px;
  font-weight: var(--weight-bold);
  padding: 2px 10px;
  border-radius: var(--radius-full);
  margin-bottom: 1px;
}

.v34-challenge-tag-easy {
  color: #065F46;
  background: linear-gradient(135deg, rgba(105,219,124,0.18), rgba(99,230,190,0.12));
}

.v34-challenge-tag-medium {
  color: #92400E;
  background: linear-gradient(135deg, rgba(255,169,77,0.18), rgba(255,212,59,0.12));
}

.v34-challenge-tag-hard {
  color: #5B21B6;
  background: linear-gradient(135deg, rgba(180,167,246,0.18), rgba(139,92,246,0.12));
}

.v34-challenge-name {
  font-size: var(--font-body);
  font-weight: var(--weight-bold);
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.v34-challenge-desc {
  font-size: var(--font-caption);
  color: var(--text-secondary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* 箭头动画 */
.v34-challenge-go {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  font-size: 20px;
  font-weight: var(--weight-bold);
  color: #FFF;
  background: linear-gradient(135deg, #B4A7F6, #74C0FC);
  border-radius: 50%;
  flex-shrink: 0;
  box-shadow:
    4px 4px 10px rgba(180,167,246,0.25),
    -1px -1px 4px rgba(255,255,255,0.6);
  animation: v34ArrowPulse 2s ease-in-out infinite;
}

@keyframes v34ArrowPulse {
  0%, 100% { transform: translateX(0); }
  50% { transform: translateX(4px); }
}

/* ========== 7.5 核心入口 3个大按钮 — 粘土双层阴影 ========== */

.v34-big-btns {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-3);
}

.v34-big-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-height: 130px;
  padding: var(--space-4) var(--space-2);
  border: none;
  border-radius: var(--radius-2xl);
  cursor: pointer;
  font-family: inherit;
  position: relative;
  transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.3s ease;
  overflow: hidden;
}

/* 顶部高光 */
.v34-big-btn::before {
  content: '';
  position: absolute;
  top: 4px;
  left: 16px;
  right: 16px;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.7), transparent);
  border-radius: 1px;
  opacity: 0.6;
}

.v34-big-btn:active {
  transform: scale(0.92);
}

/* 聊天按钮 — 蓝色系粘土 */
.v34-big-btn-chat {
  background: linear-gradient(145deg, #EDF4FF 0%, #E0EEFF 40%, #D6E8FF 100%);
  box-shadow:
    6px 6px 14px rgba(116,192,252,0.12),
    -4px -4px 12px rgba(255,255,255,0.9),
    inset 0 1px 0 rgba(255,255,255,0.8);
}

.v34-big-btn-chat:active {
  background: linear-gradient(145deg, #E0EEFF 0%, #D6E8FF 40%, #C5DFFB 100%);
  box-shadow:
    2px 2px 6px rgba(116,192,252,0.15),
    inset 0 3px 8px rgba(0,0,0,0.05),
    inset 0 1px 0 rgba(255,255,255,0.5);
}

/* 画画按钮 — 粉色系粘土 */
.v34-big-btn-draw {
  background: linear-gradient(145deg, #FFF0F4 0%, #FEE8EE 40%, #FFDEE6 100%);
  box-shadow:
    6px 6px 14px rgba(255,143,163,0.12),
    -4px -4px 12px rgba(255,255,255,0.9),
    inset 0 1px 0 rgba(255,255,255,0.8);
}

.v34-big-btn-draw:active {
  background: linear-gradient(145deg, #FEE8EE 0%, #FFDEE6 40%, #FDD0DA 100%);
  box-shadow:
    2px 2px 6px rgba(255,143,163,0.15),
    inset 0 3px 8px rgba(0,0,0,0.05),
    inset 0 1px 0 rgba(255,255,255,0.5);
}

/* 涂鸦按钮 — 紫色系粘土 */
.v34-big-btn-doodle {
  background: linear-gradient(145deg, #F5F2FF 0%, #EDE7FF 40%, #E0D9FC 100%);
  box-shadow:
    6px 6px 14px rgba(180,167,246,0.12),
    -4px -4px 12px rgba(255,255,255,0.9),
    inset 0 1px 0 rgba(255,255,255,0.8);
}

.v34-big-btn-doodle:active {
  background: linear-gradient(145deg, #EDE7FF 0%, #E0D9FC 40%, #D5CCF5 100%);
  box-shadow:
    2px 2px 6px rgba(180,167,246,0.15),
    inset 0 3px 8px rgba(0,0,0,0.05),
    inset 0 1px 0 rgba(255,255,255,0.5);
}

.v34-big-icon {
  font-size: 48px;
  filter: drop-shadow(0 2px 4px rgba(0,0,0,0.08));
  transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
  position: relative;
  z-index: 1;
}

.v34-big-btn:active .v34-big-icon {
  transform: scale(0.9);
}

.v34-big-label {
  font-size: var(--font-body-sm);
  font-weight: var(--weight-bold);
  color: var(--text-primary);
  text-align: center;
  line-height: 1.3;
  position: relative;
  z-index: 1;
}

.v34-big-label-sub {
  font-size: 12px;
  font-weight: var(--weight-medium);
  color: var(--text-secondary);
  text-align: center;
  line-height: 1.2;
  position: relative;
  z-index: 1;
}

/* 平板+大按钮 */
@media (min-width: 480px) {
  .v34-big-btns {
    max-width: 540px;
    margin: 0 auto;
  }
  .v34-big-btn {
    min-height: 150px;
  }
  .v34-big-icon {
    font-size: 54px;
  }
  .v34-big-label {
    font-size: var(--font-body);
  }
}

@media (min-width: 768px) {
  .v34-big-btn {
    min-height: 160px;
  }
  .v34-big-icon {
    font-size: 60px;
  }
  .v34-big-label {
    font-size: var(--font-subtitle);
  }
}

/* 按钮 entrance stagger 动画 */
.v34-big-btn:nth-child(1) { animation: v34ScaleIn 0.4s ease-out both; animation-delay: 0.3s; }
.v34-big-btn:nth-child(2) { animation: v34ScaleIn 0.4s ease-out both; animation-delay: 0.4s; }
.v34-big-btn:nth-child(3) { animation: v34ScaleIn 0.4s ease-out both; animation-delay: 0.5s; }

@keyframes v34ScaleIn {
  from { opacity: 0; transform: scale(0.9); }
  to { opacity: 1; transform: scale(1); }
}

/* ========== 7.6 更多入口 — 粘土卡片 ========== */

.v34-secondary-entries {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-3);
}

.v34-secondary-btn {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: var(--space-3);
  padding: var(--space-4) var(--space-5);
  border: none;
  border-radius: var(--radius-2xl);
  cursor: pointer;
  font-size: var(--font-body);
  font-weight: var(--weight-bold);
  color: var(--text-primary);
  font-family: inherit;
  background: linear-gradient(145deg, #FFFFFF 0%, #FEFEFE 100%);
  box-shadow:
    4px 4px 12px rgba(0,0,0,0.04),
    -2px -2px 8px rgba(255,255,255,0.9),
    inset 0 1px 0 rgba(255,255,255,0.8);
  transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.3s ease;
  position: relative;
}

.v34-secondary-btn:active {
  transform: scale(0.95);
  box-shadow:
    1px 1px 4px rgba(0,0,0,0.06),
    inset 0 2px 6px rgba(0,0,0,0.04);
}

/* 故事按钮 — 温黄渐变图标背景 */
.v34-secondary-btn-story .v34-secondary-icon-bg {
  background: linear-gradient(135deg, #FFF4DE 0%, #FFE5B4 50%, #FFDDA1 100%);
  box-shadow:
    2px 2px 6px rgba(255,169,77,0.12),
    inset 0 1px 0 rgba(255,255,255,0.6);
}

/* 灵感按钮 — 紫蓝渐变图标背景 */
.v34-secondary-btn-inspire .v34-secondary-icon-bg {
  background: linear-gradient(135deg, #F0ECFF 0%, #E2DAFE 50%, #D6CCFB 100%);
  box-shadow:
    2px 2px 6px rgba(180,167,246,0.12),
    inset 0 1px 0 rgba(255,255,255,0.6);
}

.v34-secondary-icon-bg {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  font-size: 24px;
  border-radius: var(--radius-lg);
  flex-shrink: 0;
}

.v34-secondary-label {
  font-size: var(--font-body);
  font-weight: var(--weight-bold);
  color: var(--text-primary);
}

/* 次级按钮 entrance stagger */
.v34-secondary-btn:nth-child(1) { animation: v34ScaleIn 0.4s ease-out both; animation-delay: 0.55s; }
.v34-secondary-btn:nth-child(2) { animation: v34ScaleIn 0.4s ease-out both; animation-delay: 0.6s; }

/* ========== 7.7 最近作品条 — 粘土缩略图 ========== */

.v34-artworks-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--space-2);
}

.v34-artworks-label {
  font-size: var(--font-body);
  font-weight: var(--weight-bold);
  color: var(--text-primary);
}

.v34-artworks-viewall {
  font-size: var(--font-caption);
  font-weight: var(--weight-semibold);
  color: #B4A7F6;
  cursor: pointer;
  padding: 4px 12px;
  border-radius: var(--radius-full);
  background: rgba(180,167,246,0.08);
  transition: background 0.2s;
}

.v34-artworks-viewall:active {
  background: rgba(180,167,246,0.18);
}

.v34-artworks-strip {
  display: flex;
  gap: var(--space-3);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  -ms-overflow-style: none;
  padding-bottom: var(--space-1);
}

.v34-artworks-strip::-webkit-scrollbar {
  display: none;
}

.v34-artwork-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-1);
  flex-shrink: 0;
  scroll-snap-align: start;
  cursor: pointer;
  transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.v34-artwork-item:active {
  transform: scale(0.94);
}

.v34-artwork-thumb {
  width: 96px;
  height: 96px;
  border-radius: var(--radius-lg);
  object-fit: cover;
  background: #F5F5F5;
  box-shadow:
    4px 4px 10px rgba(0,0,0,0.06),
    -2px -2px 6px rgba(255,255,255,0.8);
}

.v34-artwork-emoji-fallback {
  width: 96px;
  height: 96px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 40px;
  background: linear-gradient(145deg, #F8F8FF 0%, #F0F0F5 100%);
  border-radius: var(--radius-lg);
  box-shadow:
    4px 4px 10px rgba(0,0,0,0.05),
    -2px -2px 6px rgba(255,255,255,0.8),
    inset 0 1px 0 rgba(255,255,255,0.7);
}

.v34-artwork-title {
  font-size: var(--font-caption);
  font-weight: var(--weight-medium);
  color: var(--text-secondary);
  text-align: center;
  max-width: 96px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* 空状态粘土卡片 */
.v34-artworks-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: var(--space-6) var(--space-4);
  width: 100%;
  background: linear-gradient(145deg, #FFF 0%, #FEFEFE 100%);
  border-radius: var(--radius-2xl);
  box-shadow:
    6px 6px 16px rgba(0,0,0,0.04),
    -4px -4px 12px rgba(255,255,255,0.9),
    inset 0 1px 0 rgba(255,255,255,0.7);
  cursor: pointer;
  transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.v34-artworks-empty:active {
  transform: scale(0.97);
}

.v34-artworks-empty-icon {
  font-size: 48px;
  animation: v34Float 3s ease-in-out infinite;
}

.v34-artworks-empty-text {
  font-size: var(--font-body-sm);
  font-weight: var(--weight-semibold);
  color: var(--text-secondary);
}

.v34-artworks-empty-hint {
  font-size: var(--font-caption);
  color: var(--text-hint);
}

/* 作品条 entrance 动画 */
.v34-artworks-entrance {
  animation: v34FadeInUp 0.5s ease-out both;
  animation-delay: 0.65s;
}

/* ========== 7.8 全局微交互动画增强 ========== */

/* 粘土按压通用类 */
.clay-press:active {
  transform: scale(0.94);
  box-shadow: var(--shadow-clay-pressed);
}

/* 模块延时浮现 */
.v34-stagger-1 { animation: v34FadeInUp 0.5s ease-out both; animation-delay: 0.15s; }
.v34-stagger-2 { animation: v34FadeInUp 0.5s ease-out both; animation-delay: 0.25s; }
.v34-stagger-3 { animation: v34FadeInUp 0.5s ease-out both; animation-delay: 0.35s; }
.v34-stagger-4 { animation: v34FadeInUp 0.5s ease-out both; animation-delay: 0.45s; }
.v34-stagger-5 { animation: v34FadeInUp 0.5s ease-out both; animation-delay: 0.55s; }
.v34-stagger-6 { animation: v34FadeInUp 0.5s ease-out both; animation-delay: 0.65s; }

/* 移动端全宽 + 大触控 */
@media (max-width: 480px) {
  .home-v31-section {
    padding: 0 var(--space-3);
    margin-bottom: var(--space-4);
  }
  .v34-big-btn {
    min-height: 120px;
  }
  .v34-big-icon {
    font-size: 42px;
  }
  .v34-challenge-icon {
    width: 44px;
    height: 44px;
    font-size: 26px;
  }
}

/* 保留旧版样式的向下兼容 */
.hero-character, .hero-emoji, .hero-greeting, .hero-streak, .hero-tap-hint,
.v31-challenge-card, .v31-challenge-left, .v31-challenge-icon, .v31-challenge-info,
.v31-challenge-tag, .v31-challenge-name, .v31-challenge-desc, .v31-challenge-go,
.v31-big-btns, .v31-big-btn, .v31-big-icon, .v31-big-label,
.v31-secondary-entries, .v31-secondary-btn, .v31-secondary-icon,
.v31-artworks-label, .v31-artworks-strip, .v31-artwork-item,
.v31-artwork-thumb, .v31-artwork-emoji-fallback, .v31-artwork-title,
.v31-artworks-empty, .v31-cocreation-card {
  /* kept for backward compatibility — v3.4 uses v34- prefixed classes */
}

/* ===== v3.5 核心创作流程粘土升级 ===== */

/* ================================================================
   v3.5 共享粘土组件 (跨页面复用)
   ================================================================ */

/* @NOTE: clay-btn-* 颜色变体已提取至 Section 22 (粘土风格通用装饰类)。此处保留副本以维持向后兼容。 */
/* --- 粘土圆角按钮变色方案 (副本 - 主定义在 Section 22) --- */
.clay-btn-gradient {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
  padding: var(--space-4) var(--space-6); min-height: 56px;
  border: none; border-radius: var(--radius-3xl);
  font-size: var(--font-subtitle); font-weight: var(--weight-extrabold);
  color: #FFFFFF; cursor: pointer; transition: all var(--transition-bouncy);
  box-shadow: var(--shadow-clay-floating);
  font-family: inherit; width: 100%;
}
.clay-btn-gradient:active { transform: scale(0.96); box-shadow: var(--shadow-clay-pressed); }
.clay-btn-gradient:disabled { background: #CCC !important; box-shadow: none; opacity: 0.6; cursor: not-allowed; }

.clay-btn-magic { background: var(--gradient-magic); box-shadow: var(--shadow-glow-purple), 0 4px 20px rgba(180,167,246,0.3); }
.clay-btn-warm { background: var(--gradient-warm); box-shadow: var(--shadow-glow-pink), 0 4px 20px rgba(255,143,163,0.3); }
.clay-btn-sunset { background: var(--gradient-sunset); box-shadow: var(--shadow-glow-orange), 0 4px 20px rgba(255,169,77,0.3); }
.clay-btn-cool { background: var(--gradient-cool); box-shadow: var(--shadow-glow-purple), 0 4px 20px rgba(180,167,246,0.3); }

/* --- 粘土空状态引导卡片 --- */
.clay-empty-guide {
  background: #FFFFFF; border-radius: var(--radius-2xl);
  padding: var(--space-6) var(--space-5);
  box-shadow: var(--shadow-clay-raised);
  border: 1px solid rgba(255,255,255,0.5);
  text-align: center; margin: var(--space-4) var(--space-5);
  animation: scaleIn 0.4s cubic-bezier(0.34,1.56,0.64,1);
  position: relative; overflow: hidden;
}
.clay-empty-guide::before {
  content: ''; position: absolute; top: 0; left: 50%;
  transform: translateX(-50%); width: 60px; height: 5px;
  border-radius: 0 0 5px 5px;
}
.clay-empty-guide-pink::before { background: var(--stripe-pink); }
.clay-empty-guide-purple::before { background: var(--stripe-purple); }
.clay-empty-guide-blue::before { background: var(--stripe-blue); }
.clay-empty-guide-orange::before { background: var(--stripe-orange); }
.clay-empty-guide .guide-icon { font-size: 3rem; margin-bottom: var(--space-3); display: block; }
.clay-empty-guide .guide-text { font-size: var(--font-subtitle); font-weight: var(--weight-bold); color: var(--text-primary); margin-bottom: var(--space-2); line-height: 1.4; }
.clay-empty-guide .guide-hint { font-size: var(--font-body-sm); color: var(--text-hint); line-height: 1.6; }

/* --- 粘土横向滚动标签 --- */
.clay-tag-strip {
  display: flex; gap: var(--space-2); overflow-x: auto;
  padding: var(--space-2) 0; -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.clay-tag-strip::-webkit-scrollbar { display: none; }
.clay-tag {
  flex-shrink: 0; display: flex; flex-direction: column; align-items: center; gap: var(--space-1);
  padding: var(--space-4) var(--space-3); min-width: 76px; min-height: 84px;
  background: #FFFFFF; border-radius: var(--radius-xl);
  border: 3px solid transparent; box-shadow: var(--shadow-clay-sm);
  cursor: pointer; transition: all var(--transition-bouncy);
  -webkit-tap-highlight-color: transparent; text-align: center;
}
.clay-tag:active { transform: scale(0.92); }
.clay-tag.active { border-color: var(--color-purple); box-shadow: var(--shadow-glow-purple), var(--shadow-clay-raised); transform: translateY(-2px); background: #FFFFFF; }
.clay-tag .tag-emoji { font-size: 1.8rem; line-height: 1; }
.clay-tag .tag-label { font-size: var(--font-caption); font-weight: var(--weight-semibold); color: var(--text-primary); line-height: 1.3; }

/* --- 粘土面板 (圆角+双层阴影+微渐变背景) --- */
.clay-panel {
  background: #FFFFFF; border-radius: var(--radius-2xl);
  padding: var(--space-5); box-shadow: var(--shadow-clay-raised);
  border: 1px solid rgba(255,255,255,0.5);
}
.clay-panel-sm { padding: var(--space-4); border-radius: var(--radius-xl); box-shadow: var(--shadow-clay); }

/* --- 粘土脉动光环 --- */
@keyframes clayPulseGlow {
  0%, 100% { box-shadow: 0 0 0 0 rgba(180,167,246,0.5); }
  50% { box-shadow: 0 0 0 14px rgba(180,167,246,0); }
}
@keyframes clayPulsePink {
  0%, 100% { box-shadow: 0 0 0 0 rgba(255,143,163,0.5); }
  50% { box-shadow: 0 0 0 14px rgba(255,143,163,0); }
}
@keyframes clayPulseOrange {
  0%, 100% { box-shadow: 0 0 0 0 rgba(255,169,77,0.5); }
  50% { box-shadow: 0 0 0 14px rgba(255,169,77,0); }
}
@keyframes clayShimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* ================================================================
   1. create.js — 创作中心入口 (ctr-clay-*)
   ================================================================ */

/* 👋 欢迎粘土大卡片 已移除 — 由 stats 行作为开门区 */

/* 2x2 网格大粘土按钮 */
.ctr-clay-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-3); padding: 0 var(--space-3); margin-bottom: var(--space-6); }
.ctr-clay-card {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--space-3);
  padding: var(--space-5) var(--space-3); min-height: 130px;
  border-radius: var(--radius-2xl);
  box-shadow: var(--shadow-clay);
  border: 1px solid rgba(255,255,255,0.5);
  cursor: pointer; transition: all var(--transition-spring);
  -webkit-tap-highlight-color: transparent; text-align: center;
  position: relative; overflow: hidden;
}
.ctr-clay-card::before {
  content: ''; position: absolute; top: 0; left: var(--space-4); right: var(--space-4);
  height: 4px; border-radius: 0 0 4px 4px; opacity: 0.9;
}
.ctr-clay-card:active { transform: scale(0.94); box-shadow: var(--shadow-clay-pressed); }
.ctr-clay-card .c-emoji { font-size: 3rem; line-height: 1; transition: transform var(--transition-bouncy); }
.ctr-clay-card:active .c-emoji { transform: scale(0.88); }
.ctr-clay-card .c-title { font-size: var(--font-subtitle); font-weight: var(--weight-bold); color: var(--text-primary); line-height: 1.3; }
.ctr-clay-card .c-desc { font-size: var(--font-caption); color: var(--text-hint); line-height: 1.4; margin-top: 2px; }

/* 配色 - v3.5.1 高饱和度渐变色 (儿童友好) */
.ctr-clay-dialog { background: linear-gradient(135deg, #FFF0F6 0%, #FCE4EC 100%); }
.ctr-clay-dialog::before { background: var(--gradient-cool); }
.ctr-clay-drawing { background: linear-gradient(135deg, #FFF8E1 0%, #FFE0B2 100%); }
.ctr-clay-drawing::before { background: var(--gradient-warm); }
.ctr-clay-doodle { background: linear-gradient(135deg, #F3E5F5 0%, #E1BEE7 100%); }
.ctr-clay-doodle::before { background: var(--gradient-magic); }
.ctr-clay-story { background: linear-gradient(135deg, #E3F2FD 0%, #BBDEFB 100%); }
.ctr-clay-story::before { background: var(--gradient-sunset); }
.ctr-clay-challenge { background: linear-gradient(135deg, #E8F5E9 0%, #C8E6C9 100%); }
.ctr-clay-challenge::before { background: var(--gradient-nature); }
.ctr-clay-inspiration { background: linear-gradient(135deg, #FFD43B 0%, #FF9A9E 50%, #B4A7F6 100%); }
.ctr-clay-inspiration::before { background: linear-gradient(135deg, #FFD43B, #B4A7F6); }

/* 最近使用标签 */
.ctr-clay-recent { margin-top: var(--space-4); padding: 0 var(--space-3); }
.ctr-clay-recent .recent-label { font-size: var(--font-body-sm); font-weight: var(--weight-bold); color: var(--text-secondary); margin-bottom: var(--space-2); }
.ctr-clay-chips { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.ctr-clay-chip {
  padding: var(--space-2) var(--space-4); min-height: 40px;
  display: flex; align-items: center; gap: var(--space-1);
  background: #FFFFFF; border-radius: var(--radius-full);
  font-size: var(--font-body-sm); color: var(--text-primary);
  box-shadow: var(--shadow-clay-sm); cursor: pointer;
  transition: all var(--transition-bouncy); border: 2px solid transparent;
}
.ctr-clay-chip:active { transform: scale(0.94); border-color: var(--color-purple); box-shadow: var(--shadow-glow-purple); }

/* 3-column grid at ≥480px */
@media (min-width: 480px) {
  .ctr-clay-grid { grid-template-columns: repeat(3, 1fr); }
}

/* ================================================================
   2. dialog.js — AI 对话页 (dlg-clay-*)
   ================================================================ */

/* 角色状态栏 */
.dlg-clay-bar {
  display: flex; align-items: center; gap: var(--space-3);
  padding: var(--space-3) var(--space-4); margin: var(--space-2) var(--space-3);
  background: #FFFFFF; border-radius: var(--radius-2xl);
  box-shadow: var(--shadow-clay);
  border: 1px solid rgba(255,255,255,0.5);
  animation: slideDown 0.3s ease-out;
}
.dlg-clay-avatar {
  width: 56px; height: 56px; border-radius: var(--radius-round);
  display: flex; align-items: center; justify-content: center;
  font-size: 2rem; flex-shrink: 0;
  background: linear-gradient(135deg, var(--color-purple-light), #EDE7FF);
  box-shadow: var(--shadow-clay-sm), inset 0 1px 0 rgba(255,255,255,0.8);
  position: relative;
}
.dlg-clay-avatar::after {
  content: ''; position: absolute; inset: -3px; border-radius: var(--radius-round);
  background: var(--gradient-cool); z-index: -1; opacity: 0.3;
}
.dlg-clay-info { flex: 1; min-width: 0; }
.dlg-clay-name {
  font-size: var(--font-subtitle); font-weight: var(--weight-extrabold);
  background: var(--gradient-cool); -webkit-background-clip: text;
  -webkit-text-fill-color: transparent; background-clip: text;
  line-height: 1.2;
}
.dlg-clay-status {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: var(--font-caption); color: var(--color-green); font-weight: var(--weight-semibold);
}
.dlg-clay-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--color-green); display: inline-block; animation: pulse 2s ease-in-out infinite; }

/* 对话气泡加强 */
.dlg-clay-msg-left .content {
  box-shadow: var(--shadow-clay); border: 1px solid rgba(255,255,255,0.5);
}
.dlg-clay-msg-right .content {
  box-shadow: var(--shadow-glow-pink), var(--shadow-clay-sm);
}

/* 底部输入栏 */
.dlg-clay-input-bar {
  margin: var(--space-2) var(--space-3);
  padding: var(--space-2) var(--space-2);
  background: #FFFFFF; border-radius: var(--radius-2xl);
  box-shadow: var(--shadow-clay-floating);
  border: 1px solid rgba(255,255,255,0.6);
}
/* 语音按钮区域 — v3.8: 内联到 input-row 左侧 */
.dlg-clay-voice {
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.dlg-clay-voice .voice-button .voice-btn-circle {
  width: 40px; height: 40px;
}
.dlg-clay-voice .voice-btn-circle .voice-icon {
  font-size: 1rem;
}
.dlg-clay-voice .voice-status {
  display: none;  /* 隐藏"按住说话"文字，节省空间 */
}
.dlg-clay-voice .voice-wave-container {
  display: none;  /* 内联模式下隐藏波形 */
}

/* 文字输入行 — v3.8: 语音丨输入丨发送 单行三区域 */
.dlg-clay-input-row {
  display: flex; gap: var(--space-2); align-items: center;
  background: #F5F5F7;
  border-radius: var(--radius-2xl);
  padding: 4px;
}
.dlg-clay-input {
  flex: 1; min-height: 40px; padding: var(--space-2) var(--space-3);
  background: transparent;
  border: none; font-size: var(--font-body);
  font-family: inherit; outline: none;
  transition: all var(--transition-base);
}
.dlg-clay-input:focus { background: transparent; border-color: transparent; box-shadow: none; }
.dlg-clay-send {
  min-width: 44px; min-height: 44px; display: flex; align-items: center; justify-content: center;
  background: var(--gradient-warm); border: none; border-radius: var(--radius-round);
  font-size: var(--font-subtitle); font-weight: var(--weight-bold); color: #FFFFFF;
  cursor: pointer; box-shadow: var(--shadow-glow-pink), var(--shadow-clay-sm);
  transition: all var(--transition-bouncy);
  flex-shrink: 0;
}
.dlg-clay-send:active { transform: scale(0.9); }
.dlg-clay-send:disabled { background: #CCC !important; box-shadow: none; opacity: 0.5; }

/* ================================================================
   3. drawing.js — AI 画画页 (drw-clay-*)
   ================================================================ */

/* 顶部粘土面板 */
.drw-clay-header {
  margin: 0 var(--space-3) var(--space-4);
  padding: var(--space-5); background: #FFFFFF;
  border-radius: var(--radius-2xl); box-shadow: var(--shadow-clay);
  border: 1px solid rgba(255,255,255,0.5); text-align: center;
}
.drw-clay-header .h-icon { font-size: 2rem; }
.drw-clay-header .h-title { font-size: var(--font-subtitle); font-weight: var(--weight-bold); color: var(--text-primary); margin-top: var(--space-2); }
.drw-clay-header .h-hint { font-size: var(--font-body-sm); color: var(--text-hint); margin-top: var(--space-1); }

/* 输入区域粘土卡片 */
.drw-clay-input-card {
  margin: 0 var(--space-3) var(--space-4);
  padding: var(--space-5); background: #FFFFFF;
  border-radius: var(--radius-2xl); box-shadow: var(--shadow-clay);
  border: 1px solid rgba(255,255,255,0.5);
}
.drw-clay-input-card .ic-emoji { font-size: 2.5rem; display: block; text-align: center; margin-bottom: var(--space-3); }
.drw-clay-textarea {
  width: 100%; min-height: 100px; padding: var(--space-4);
  background: #F8F8F8; border-radius: var(--radius-xl);
  border: 2px solid rgba(255,143,163,0.15); font-size: var(--font-body);
  font-family: inherit; line-height: 1.7; outline: none; resize: vertical;
  box-shadow: var(--shadow-clay-sm); transition: all var(--transition-base);
}
.drw-clay-textarea:focus { background: #FFFFFF; border-color: var(--color-pink); box-shadow: 0 0 0 6px rgba(255,143,163,0.08); }
.drw-clay-char-count { text-align: right; font-size: var(--font-caption); color: var(--text-hint); margin-top: var(--space-1); }

/* 风格选择器 */
.drw-clay-styles { display: flex; gap: var(--space-2); overflow-x: auto; padding: var(--space-2) 0; scrollbar-width: none; margin: 0 var(--space-3) var(--space-3); }
.drw-clay-styles::-webkit-scrollbar { display: none; }
.drw-clay-style {
  flex-shrink: 0; display: flex; flex-direction: column; align-items: center; gap: var(--space-1);
  padding: var(--space-4) var(--space-3); min-width: 76px; min-height: 84px;
  background: #FFFFFF; border-radius: var(--radius-xl);
  border: 3px solid transparent; box-shadow: var(--shadow-clay-sm);
  cursor: pointer; transition: all var(--transition-bouncy); text-align: center;
}
.drw-clay-style:active { transform: scale(0.9); }
.drw-clay-style.active { border-color: var(--color-pink); box-shadow: var(--shadow-glow-pink), var(--shadow-clay-raised); transform: translateY(-2px); }
.drw-clay-style .st-icon { font-size: 1.8rem; }
.drw-clay-style .st-label { font-size: var(--font-caption); font-weight: var(--weight-semibold); color: var(--text-primary); }

/* 生成按钮大粘土 */
.drw-clay-btn {
  margin: 0 var(--space-3) var(--space-4);
  display: flex; align-items: center; justify-content: center; gap: var(--space-2);
  padding: var(--space-4) var(--space-8); min-height: 60px;
  background: var(--gradient-magic); border: none; border-radius: var(--radius-3xl);
  font-size: var(--font-subtitle); font-weight: var(--weight-extrabold); color: #FFFFFF;
  box-shadow: var(--shadow-glow-purple), 0 4px 20px rgba(180,167,246,0.35), var(--shadow-clay-sm);
  cursor: pointer; transition: all var(--transition-bouncy); width: calc(100% - var(--space-6));
  font-family: inherit;
}
.drw-clay-btn:active { transform: scale(0.95); box-shadow: var(--shadow-glow-purple), 0 2px 10px rgba(180,167,246,0.2); }
.drw-clay-btn:disabled { background: #CCC !important; box-shadow: none; opacity: 0.55; }

/* 加载动画 */
.drw-clay-loading { display: flex; flex-direction: column; align-items: center; gap: var(--space-4); padding: var(--space-8) var(--space-5); }
.drw-clay-loading .l-icon {
  font-size: 4rem; animation: bounce 1s ease-in-out infinite;
  filter: drop-shadow(0 4px 12px rgba(180,167,246,0.3));
}
.drw-clay-loading .l-text { font-size: var(--font-body); color: var(--text-secondary); }
.drw-clay-loading .l-bar {
  width: 200px; height: 8px; background: #F0F0F0; border-radius: var(--radius-full);
  overflow: hidden; box-shadow: var(--shadow-clay-sm);
}
.drw-clay-loading .l-bar-inner {
  height: 100%; border-radius: var(--radius-full);
  background: var(--gradient-magic);
  animation: clayShimmer 1.8s ease-in-out infinite;
  background-size: 200% 100%;
}

/* 结果画作卡片 */
.drw-clay-result {
  margin: 0 var(--space-3) var(--space-4); padding: var(--space-5);
  background: #FFFFFF; border-radius: var(--radius-2xl);
  box-shadow: var(--shadow-clay-floating);
  border: 1px solid rgba(255,255,255,0.5);
  display: flex; flex-direction: column; gap: var(--space-4);
  animation: scaleIn 0.4s cubic-bezier(0.34,1.56,0.64,1);
}
.drw-clay-result-img-wrap {
  border-radius: var(--radius-xl); overflow: hidden;
  box-shadow: var(--shadow-clay), 0 0 0 4px rgba(255,143,163,0.08);
}
.drw-clay-result-img { width: 100%; display: block; }
.drw-clay-result-actions { display: flex; gap: var(--space-2); justify-content: center; flex-wrap: wrap; }
.drw-clay-result-actions button {
  padding: var(--space-3) var(--space-5); min-height: 44px;
  border-radius: var(--radius-xl); font-size: var(--font-body-sm); font-weight: var(--weight-bold);
  cursor: pointer; transition: all var(--transition-bouncy); border: none; font-family: inherit;
}
.drw-clay-result-actions .r-save { background: var(--gradient-warm); color: #FFF; box-shadow: var(--shadow-glow-pink); }
.drw-clay-result-actions .r-secondary { background: #F5F5F5; color: var(--text-primary); box-shadow: var(--shadow-clay-sm); }
.drw-clay-result-actions button:active { transform: scale(0.94); }

/* ================================================================
   4. doodle.js — 涂鸦变艺术页 (ddl-clay-*)
   ================================================================ */

/* 画布区域 */
.ddl-clay-canvas-wrap {
  position: relative; background: #FFFFFF;
  border-radius: var(--radius-2xl);
  box-shadow: var(--shadow-clay-raised), 0 0 0 4px rgba(147,112,219,0.12);
  overflow: hidden; touch-action: none; margin: 0 0 var(--space-4);
  width: 100%; max-width: 600px; margin-left: auto; margin-right: auto;
}
.ddl-clay-canvas-wrap canvas { display: block; cursor: crosshair; touch-action: none; width: 100%; height: auto; }

/* 工具选择/颜色区域 */
.ddl-clay-tools {
  margin: 0 var(--space-3) var(--space-3); padding: var(--space-4);
  background: #FFFFFF; border-radius: var(--radius-2xl);
  box-shadow: var(--shadow-clay); border: 1px solid rgba(255,255,255,0.5);
}
.ddl-clay-colors { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-bottom: var(--space-3); }
.ddl-clay-color-dot {
  width: 36px; height: 36px; border-radius: var(--radius-round);
  cursor: pointer; border: 3px solid transparent;
  transition: all var(--transition-bouncy); box-shadow: var(--shadow-clay-sm);
  position: relative;
}
.ddl-clay-color-dot.active { border-color: var(--color-purple); transform: scale(1.15); box-shadow: 0 0 0 4px rgba(180,167,246,0.2), var(--shadow-clay); }
.ddl-clay-color-dot:active { transform: scale(1.25); }

/* 工具操作按钮 */
.ddl-clay-actions { display: flex; gap: var(--space-2); margin-bottom: var(--space-2); }
.ddl-clay-action {
  flex: 1; display: flex; align-items: center; justify-content: center; gap: var(--space-1);
  padding: var(--space-3); min-height: 48px;
  background: #F5F5F5; border: 2px solid transparent;
  border-radius: var(--radius-xl); font-size: var(--font-body-sm);
  font-weight: var(--weight-semibold); color: var(--text-secondary);
  cursor: pointer; transition: all var(--transition-bouncy);
  font-family: inherit; box-shadow: var(--shadow-clay-sm);
}
.ddl-clay-action.active { border-color: #FF9800; background: #FFF3E0; color: #E65100; box-shadow: 0 0 0 4px rgba(255,152,0,0.15); }
.ddl-clay-action:active { transform: scale(0.94); }
.ddl-clay-action:disabled { opacity: 0.4; cursor: not-allowed; }

/* 风格转换按钮大粘土 */
.ddl-clay-btn {
  margin: 0 var(--space-3) var(--space-4);
  display: flex; align-items: center; justify-content: center; gap: var(--space-2);
  padding: var(--space-4) var(--space-8); min-height: 60px;
  background: var(--gradient-sunset); border: none; border-radius: var(--radius-3xl);
  font-size: var(--font-subtitle); font-weight: var(--weight-extrabold); color: #FFFFFF;
  box-shadow: var(--shadow-glow-orange), 0 4px 20px rgba(255,169,77,0.35), var(--shadow-clay-sm);
  cursor: pointer; transition: all var(--transition-bouncy); width: calc(100% - var(--space-6));
  font-family: inherit;
}
.ddl-clay-btn:active { transform: scale(0.95); }
.ddl-clay-btn:disabled { background: #CCC !important; box-shadow: none; opacity: 0.55; }

/* 结果预览粘土卡片 */
.ddl-clay-result {
  margin: 0 var(--space-3) var(--space-4); padding: var(--space-5);
  background: #FFFFFF; border-radius: var(--radius-2xl);
  box-shadow: var(--shadow-clay-floating);
  border: 1px solid rgba(255,255,255,0.5);
  display: flex; flex-direction: column; gap: var(--space-4);
  animation: scaleIn 0.4s cubic-bezier(0.34,1.56,0.64,1);
}

/* 全宽画布适配 */
.ddl-clay-fullwidth { margin: 0; max-width: none; }
@media (max-width: 374px) {
  .ddl-clay-canvas-wrap { margin-left: 0; margin-right: 0; border-radius: var(--radius-xl); max-width: none; }
}

/* ================================================================
   5. story.js — 故事创作页 (sty-clay-*)
   ================================================================ */

/* 主题选择标签 */
.sty-clay-themes { display: flex; gap: var(--space-2); overflow-x: auto; padding: var(--space-2) 0; scrollbar-width: none; margin: 0 var(--space-3) var(--space-3); }
.sty-clay-themes::-webkit-scrollbar { display: none; }
.sty-clay-theme {
  flex-shrink: 0; display: flex; flex-direction: column; align-items: center; gap: var(--space-1);
  padding: var(--space-4) var(--space-3); min-width: 76px; min-height: 84px;
  background: #FFFFFF; border-radius: var(--radius-xl);
  border: 3px solid transparent; box-shadow: var(--shadow-clay-sm);
  cursor: pointer; transition: all var(--transition-bouncy); text-align: center;
}
.sty-clay-theme:active { transform: scale(0.9); }
.sty-clay-theme.active { border-color: var(--color-purple); box-shadow: var(--shadow-glow-purple), var(--shadow-clay-raised); transform: translateY(-2px); }
.sty-clay-theme .t-emoji { font-size: 1.8rem; }
.sty-clay-theme .t-label { font-size: var(--font-caption); font-weight: var(--weight-semibold); color: var(--text-primary); line-height: 1.3; }

/* 输入卡片 */
.sty-clay-input-card {
  margin: 0 var(--space-3) var(--space-4); padding: var(--space-5);
  background: #FFFFFF; border-radius: var(--radius-2xl);
  box-shadow: var(--shadow-clay); border: 1px solid rgba(255,255,255,0.5);
}
.sty-clay-input {
  width: 100%; min-height: 52px; padding: var(--space-3) var(--space-5);
  background: #F8F8F8; border-radius: var(--radius-3xl);
  border: 2px solid rgba(180,167,246,0.15); font-size: var(--font-body);
  font-family: inherit; outline: none; box-shadow: var(--shadow-clay-sm);
  transition: all var(--transition-base);
}
.sty-clay-input:focus { background: #FFFFFF; border-color: var(--color-purple); box-shadow: 0 0 0 6px rgba(180,167,246,0.08), var(--shadow-clay); }

/* 长度选择 */
.sty-clay-lengths { display: flex; gap: var(--space-2); margin: 0 var(--space-3) var(--space-4); }
.sty-clay-length {
  flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  padding: var(--space-4) var(--space-2); min-height: 80px;
  background: #FFFFFF; border-radius: var(--radius-xl);
  border: 3px solid transparent; box-shadow: var(--shadow-clay-sm);
  cursor: pointer; transition: all var(--transition-bouncy); text-align: center;
}
.sty-clay-length:active { transform: scale(0.94); }
.sty-clay-length.active { border-color: var(--color-blue); box-shadow: var(--shadow-glow-blue), var(--shadow-clay-raised); transform: translateY(-2px); }
.sty-clay-length .l-num { font-size: var(--font-subtitle); font-weight: var(--weight-extrabold); color: var(--text-primary); }
.sty-clay-length .l-desc { font-size: var(--font-caption); color: var(--text-hint); }

/* 生成按钮 */
.sty-clay-btn {
  margin: 0 var(--space-3) var(--space-4);
  display: flex; align-items: center; justify-content: center; gap: var(--space-2);
  padding: var(--space-4) var(--space-8); min-height: 60px;
  background: var(--gradient-ocean); border: none; border-radius: var(--radius-3xl);
  font-size: var(--font-subtitle); font-weight: var(--weight-extrabold); color: #FFFFFF;
  box-shadow: var(--shadow-glow-blue), 0 4px 20px rgba(116,192,252,0.35), var(--shadow-clay-sm);
  cursor: pointer; transition: all var(--transition-bouncy); width: calc(100% - var(--space-6));
  font-family: inherit;
}
.sty-clay-btn:active { transform: scale(0.94); box-shadow: var(--shadow-clay-inset), 0 2px 10px rgba(116,192,252,0.2); }

/* ===== v3.5 辅助账户粘土升级 ===== */

/* ========== 8.1 Gallery 画廊粘土升级 (gal-clay-*) ========== */

/* 画廊标题粘土卡片 */
.gal-clay-header {
  background: linear-gradient(135deg, #FFF0E8 0%, #EDE7FF 50%, #E3F0FD 100%);
  border-radius: var(--radius-2xl);
  padding: var(--space-5);
  margin: 0 var(--space-4) var(--space-3);
  box-shadow: var(--shadow-clay), inset 0 1px 0 rgba(255,255,255,0.8);
  text-align: center;
  border: 2px solid rgba(255,143,163,0.1);
}

.gal-clay-header-title {
  font-size: var(--font-heading);
  font-weight: var(--weight-extrabold);
  color: var(--text-primary);
  margin-bottom: var(--space-1);
}

.gal-clay-header-sub {
  font-size: var(--font-body-sm);
  color: var(--text-secondary);
}

.gal-clay-stats {
  display: flex;
  justify-content: center;
  gap: var(--space-5);
  margin-top: var(--space-3);
  padding-top: var(--space-3);
  border-top: 1px solid rgba(0,0,0,0.05);
}

.gal-clay-stat {
  text-align: center;
}

.gal-clay-stat-val {
  font-size: var(--font-title-sm);
  font-weight: var(--weight-extrabold);
  color: var(--color-purple);
}

.gal-clay-stat-lbl {
  font-size: var(--font-caption);
  color: var(--text-hint);
}

/* 画廊作品粘土卡片 */
.gal-clay-card {
  position: relative;
  border-radius: 20px;
  overflow: hidden;
  background: #FFFFFF;
  box-shadow: var(--shadow-clay), inset 0 1px 0 rgba(255,255,255,0.7);
  transition: all var(--transition-spring);
  cursor: default;
  animation: cardFadeUp 0.4s ease both;
}

.gal-clay-card:nth-child(2) { animation-delay: 0.05s; }
.gal-clay-card:nth-child(3) { animation-delay: 0.1s; }
.gal-clay-card:nth-child(4) { animation-delay: 0.15s; }

.gal-clay-card--clickable {
  cursor: pointer;
}

.gal-clay-card:hover,
.gal-clay-card:focus-within {
  transform: translateY(-3px);
  box-shadow: var(--shadow-clay-floating);
}

.gal-clay-card:active {
  transform: scale(0.97);
  box-shadow: var(--shadow-clay-pressed);
}

/* 图片加载 shimmer */
.gal-clay-card-body {
  display: flex;
  flex-direction: column;
}

.gal-clay-img-wrap {
  width: 100%;
  aspect-ratio: 1;
  overflow: hidden;
  position: relative;
  background: linear-gradient(135deg, #F8F6FF 0%, #FFF5F7 50%, #FFFDF7 100%);
}

.gal-clay-img-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--transition-slow);
}

.gal-clay-card:hover .gal-clay-img-wrap img {
  transform: scale(1.06);
}

.gal-clay-img-shimmer {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,0.5) 50%, transparent 100%);
  background-size: 200% 100%;
  animation: galShimmer 1.8s ease-in-out infinite;
  pointer-events: none;
}

@keyframes galShimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

.gal-clay-img-bg {
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(180,167,246,0.08), rgba(255,143,163,0.06));
  pointer-events: none;
}

.gal-clay-img-fallback {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 3rem;
  opacity: 0.4;
}

/* 故事卡片 — 渐变封面 */
.gal-clay-img-wrap--story {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
}

.gal-clay-story-cover-overlay {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 20% 30%, rgba(255,255,255,0.25) 0%, transparent 60%),
    radial-gradient(circle at 80% 70%, rgba(255,255,255,0.15) 0%, transparent 50%);
  pointer-events: none;
}
.gal-clay-img-wrap--story::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 30%;
  background: linear-gradient(0deg, rgba(0,0,0,0.08) 0%, transparent 100%);
  pointer-events: none;
}

.gal-clay-story-icon {
  font-size: 3.5rem;
  animation: floatSoft 2.8s ease-in-out infinite;
  position: relative;
  z-index: 1;
  line-height: 1.2;
  margin-bottom: 4px;
}

.gal-clay-story-summary {
  font-size: 12px;
  font-weight: 600;
  color: rgba(255,255,255,0.85);
  text-align: center;
  padding: 0 8px;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  position: relative;
  z-index: 1;
  text-shadow: 0 1px 3px rgba(0,0,0,0.2);
  line-height: 1.3;
}

/* 装饰星点 */
.gal-clay-story-deco {
  position: absolute;
  bottom: 8px;
  left: 0;
  right: 0;
  display: flex;
  justify-content: center;
  gap: 6px;
  z-index: 1;
}
.gal-clay-story-deco-dot {
  display: inline-block;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: rgba(255,255,255,0.5);
  animation: decoPulse 1.6s ease-in-out infinite;
}
.gal-clay-story-deco-dot:nth-child(2) { animation-delay: 0.2s; }
.gal-clay-story-deco-dot:nth-child(3) { animation-delay: 0.4s; }
.gal-clay-story-deco-dot:nth-child(4) { animation-delay: 0.6s; }
.gal-clay-story-deco-dot:nth-child(5) { animation-delay: 0.8s; }

@keyframes decoPulse {
  0%, 100% { transform: scale(1); opacity: 0.5; }
  50% { transform: scale(1.6); opacity: 0.9; }
}

/* 类型标签 */
.gal-clay-type-badge {
  position: absolute;
  top: 10px;
  left: 10px;
  z-index: 2;
  font-size: var(--font-caption);
  padding: 3px 10px;
  border-radius: var(--radius-full);
  background: rgba(255,255,255,0.88);
  backdrop-filter: blur(6px);
  box-shadow: var(--shadow-clay-sm);
  color: var(--text-secondary);
  font-weight: var(--weight-semibold);
}

/* 卡片底部 */
.gal-clay-footer {
  padding: var(--space-3);
  display: flex;
  flex-direction: column;
  gap: 4px;
  border-top: 1px solid rgba(0,0,0,0.03);
}

.gal-clay-label {
  font-size: var(--font-body-sm);
  font-weight: var(--weight-bold);
  color: var(--text-primary);
  line-height: 1.3;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.gal-clay-comment {
  font-size: var(--font-caption);
  color: #8B7EC8;
  line-height: 1.5;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  font-style: italic;
}

/* 删除按钮 */
.gal-clay-delete {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0,0,0,0.35);
  border: none;
  border-radius: var(--radius-round);
  font-size: 13px;
  color: #FFFFFF;
  cursor: pointer;
  z-index: 2;
  transition: all var(--transition-base);
  opacity: 0;
  transform: scale(0.8);
}

.gal-clay-card:hover .gal-clay-delete,
.gal-clay-card:active .gal-clay-delete {
  opacity: 1;
  transform: scale(1);
}

.gal-clay-delete:active {
  background: rgba(255,0,0,0.6);
  transform: scale(1.15) !important;
}

/* 画廊筛选标签粘土版 */
.gal-clay-filter-row {
  display: flex;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-4) var(--space-3);
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.gal-clay-filter-row::-webkit-scrollbar { display: none; }

.gal-clay-filter-chip {
  flex-shrink: 0;
  padding: var(--space-2) var(--space-4);
  min-height: 44px;
  display: flex;
  align-items: center;
  border: none;
  border-radius: var(--radius-full);
  font-size: var(--font-body-sm);
  font-weight: var(--weight-semibold);
  color: var(--text-secondary);
  background: rgba(255,255,255,0.85);
  box-shadow: var(--shadow-clay-sm);
  cursor: pointer;
  transition: all var(--transition-base);
}

.gal-clay-filter-chip.active {
  background: var(--color-purple);
  color: #FFFFFF;
  box-shadow: var(--shadow-glow-purple), var(--shadow-clay-sm);
}

.gal-clay-filter-chip:active:not(.active) {
  transform: scale(0.94);
  background: #E5E7EB;
}

/* 加载更多按钮 */
.gal-clay-load-more {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  width: 100%;
  max-width: 280px;
  margin: var(--space-5) auto;
  padding: var(--space-4);
  min-height: 52px;
  border: none;
  border-radius: var(--radius-xl);
  font-size: var(--font-body);
  font-weight: var(--weight-bold);
  color: var(--text-primary);
  background: var(--gradient-magic);
  color: #FFFFFF;
  box-shadow: var(--shadow-clay), var(--shadow-glow-purple);
  cursor: pointer;
  transition: all var(--transition-spring);
  font-family: inherit;
}

.gal-clay-load-more:active {
  transform: scale(0.94);
  box-shadow: var(--shadow-clay-pressed);
}

/* 空状态 */
.gal-clay-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--space-12) var(--space-6);
  text-align: center;
  background: linear-gradient(135deg, #FFF0E8 0%, #EDE7FF 50%, #E3F0FD 100%);
  border-radius: var(--radius-2xl);
  box-shadow: var(--shadow-clay), inset 0 1px 0 rgba(255,255,255,0.8);
  margin: var(--space-4);
  border: 2px dashed rgba(180,167,246,0.3);
}

.gal-clay-empty-icon {
  font-size: 4rem;
  margin-bottom: var(--space-4);
}

.gal-clay-empty-title {
  font-size: var(--font-title);
  font-weight: var(--weight-bold);
  color: var(--text-primary);
  margin-bottom: var(--space-2);
}

.gal-clay-empty-desc {
  font-size: var(--font-body);
  color: var(--text-secondary);
  margin-bottom: var(--space-4);
  line-height: 1.6;
}

.gal-clay-empty-cta {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-6);
  background: var(--gradient-magic);
  color: #FFFFFF;
  border: none;
  border-radius: var(--radius-full);
  font-size: var(--font-body);
  font-weight: var(--weight-bold);
  box-shadow: var(--shadow-clay), var(--shadow-glow-purple);
  cursor: pointer;
  transition: all var(--transition-spring);
  font-family: inherit;
}

.gal-clay-empty-cta:active {
  transform: scale(0.94);
  box-shadow: var(--shadow-clay-pressed);
}

/* 画廊分段控件粘土版 */
.gal-clay-seg-control {
  display: flex;
  gap: var(--space-1);
  padding: var(--space-3) var(--space-4) var(--space-2);
  background: rgba(255,255,255,0.6);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-radius: var(--radius-xl);
  margin: var(--space-3) var(--space-4);
  box-shadow: var(--shadow-clay-sm);
}

.gal-clay-seg-btn {
  flex: 1;
  padding: var(--space-3);
  min-height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  border: none;
  border-radius: var(--radius-lg);
  font-size: var(--font-body);
  font-weight: var(--weight-semibold);
  color: var(--text-hint);
  background: #F3F4F6;
  cursor: pointer;
  transition: all var(--transition-bouncy);
}

.gal-clay-seg-btn.active {
  background: #FFFFFF;
  color: var(--text-primary);
  box-shadow: var(--shadow-clay-sm), var(--shadow-clay-pressed);
}

.gal-clay-seg-btn:active:not(.active) {
  background: #E5E7EB;
  transform: scale(0.97);
}

/* ========== 8.2 Diary 创作日记粘土升级 (dry-clay-*) ========== */

/* 日记头部粘土卡片 */
.dry-clay-header {
  background: linear-gradient(135deg, #EDE7FF 0%, #E3F0FD 50%, #FFF0E8 100%);
  border-radius: var(--radius-2xl);
  padding: var(--space-5);
  margin: 0 var(--space-4) var(--space-3);
  box-shadow: var(--shadow-clay), inset 0 1px 0 rgba(255,255,255,0.8);
  border: 2px solid rgba(180,167,246,0.15);
}

.dry-clay-header-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--space-3);
}

.dry-clay-title {
  font-size: var(--font-heading);
  font-weight: var(--weight-extrabold);
  color: var(--text-primary);
}

.dry-clay-character {
  font-size: 2.5rem;
  line-height: 1;
}

.dry-clay-stats-row {
  display: flex;
  justify-content: space-around;
  gap: var(--space-3);
}

.dry-clay-stat {
  text-align: center;
  flex: 1;
}

.dry-clay-stat-num {
  font-size: var(--font-title-sm);
  font-weight: var(--weight-extrabold);
  color: var(--color-purple);
  display: block;
}

.dry-clay-stat-label {
  font-size: var(--font-caption);
  color: var(--text-hint);
}

/* 日历粘土卡片 */
.dry-clay-cal-card {
  background: #FFFFFF;
  border-radius: var(--radius-xl);
  padding: var(--space-4);
  box-shadow: var(--shadow-clay);
  margin-bottom: var(--space-3);
}

.dry-clay-cal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--space-3);
}

.dry-clay-cal-month {
  font-size: var(--font-body);
  font-weight: var(--weight-bold);
  color: var(--text-primary);
}

.dry-clay-cal-nav {
  display: flex;
  gap: var(--space-1);
}

.dry-clay-cal-nav-btn {
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: var(--radius-full);
  background: rgba(180,167,246,0.1);
  color: var(--color-purple);
  font-size: var(--font-body);
  cursor: pointer;
  transition: all var(--transition-base);
  font-family: inherit;
}

.dry-clay-cal-nav-btn:active {
  background: var(--color-purple-light);
  transform: scale(0.92);
}

.dry-clay-cal-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 4px;
  text-align: center;
}

.dry-clay-cal-day-header {
  font-size: var(--font-caption);
  color: var(--text-hint);
  padding: var(--space-1) 0;
  font-weight: var(--weight-semibold);
}

.dry-clay-cal-day {
  aspect-ratio: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--font-body-sm);
  font-weight: var(--weight-medium);
  color: var(--text-primary);
  border-radius: var(--radius-round);
  transition: all var(--transition-base);
  position: relative;
}

.dry-clay-cal-day--today {
  background: var(--color-purple);
  color: #FFF;
  font-weight: var(--weight-bold);
  box-shadow: var(--shadow-glow-purple);
}

.dry-clay-cal-day--has-art {
  background: rgba(180,167,246,0.12);
}

.dry-clay-cal-day--has-art::after {
  content: '';
  position: absolute;
  bottom: 2px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--color-purple);
}

.dry-clay-cal-day--has-art.dry-clay-cal-day--today::after {
  background: var(--color-yellow);
}

/* 连续性统计粘土卡片 */
.dry-clay-streak-card {
  background: linear-gradient(135deg, #FFF9E0 0%, #FFF0E0 50%, #FFE8F0 100%);
  border-radius: var(--radius-2xl);
  padding: var(--space-5);
  margin: var(--space-4);
  box-shadow: var(--shadow-clay-raised), inset 0 1px 0 rgba(255,255,255,0.8);
  text-align: center;
  border: 2px solid rgba(255,169,77,0.2);
}

.dry-clay-streak-fire {
  display: inline-block;
  font-size: 3rem;
  animation: dryFirePulse 1.5s ease-in-out infinite;
  margin-bottom: var(--space-2);
}

@keyframes dryFirePulse {
  0%, 100% { transform: scale(1); filter: drop-shadow(0 0 4px rgba(255,169,77,0.3)); }
  50% { transform: scale(1.1); filter: drop-shadow(0 0 12px rgba(255,143,163,0.5)); }
}

.dry-clay-streak-num {
  font-size: var(--font-hero);
  font-weight: var(--weight-extrabold);
  background: linear-gradient(135deg, #FF8FA3, #FFA94D);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.dry-clay-streak-label {
  font-size: var(--font-body);
  color: var(--text-secondary);
  margin-top: var(--space-1);
}

/* 日记条目粘土卡片 */
.dry-clay-entry {
  display: flex;
  gap: var(--space-3);
  padding: var(--space-4);
  background: #FFFFFF;
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-clay), inset 0 1px 0 rgba(255,255,255,0.7);
  transition: all var(--transition-base);
  margin-bottom: var(--space-3);
}

.dry-clay-entry:active {
  transform: scale(0.98);
  box-shadow: var(--shadow-clay-pressed);
}

.dry-clay-entry--milestone {
  background: linear-gradient(135deg, #FFFDF7 0%, #FFF0E0 100%);
  border: 2px solid rgba(255,169,77,0.3);
}

.dry-clay-entry-thumb {
  width: 64px;
  height: 64px;
  border-radius: 16px;
  overflow: hidden;
  flex-shrink: 0;
  background: linear-gradient(135deg, #F8F6FF 0%, #FFF5F7 100%);
  position: relative;
  box-shadow: var(--shadow-clay-sm);
}

.dry-clay-entry-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.dry-clay-entry-thumb-fallback {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.8rem;
  opacity: 0.4;
}

.dry-clay-entry-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.dry-clay-entry-type {
  font-size: var(--font-caption);
  color: var(--text-hint);
  font-weight: var(--weight-semibold);
}

.dry-clay-entry-comment {
  font-size: var(--font-body-sm);
  color: var(--text-primary);
  line-height: 1.5;
}

.dry-clay-entry-time {
  font-size: var(--font-caption);
  color: var(--text-hint);
  margin-top: 2px;
}

/* 空状态 */
.dry-clay-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--space-10) var(--space-6);
  text-align: center;
  background: linear-gradient(135deg, #EDE7FF 0%, #E3F0FD 50%, #FFF0E8 100%);
  border-radius: var(--radius-2xl);
  box-shadow: var(--shadow-clay), inset 0 1px 0 rgba(255,255,255,0.8);
  margin: var(--space-4);
  border: 2px dashed rgba(180,167,246,0.3);
}

.dry-clay-empty-icon {
  font-size: 4rem;
  margin-bottom: var(--space-4);
}

.dry-clay-empty-title {
  font-size: var(--font-title);
  font-weight: var(--weight-bold);
  color: var(--text-primary);
  margin-bottom: var(--space-2);
}

.dry-clay-empty-desc {
  font-size: var(--font-body-sm);
  color: var(--text-secondary);
  line-height: 1.6;
}

/* ========== 8.3 Profile 粘土补充升级 (pfl-clay-*) ========== */
/* v3.3 会员卡+时间限制已优化，这部分不动 */

/* 用户信息粘土卡片 */
.pfl-clay-user-card {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-5);
  background: linear-gradient(135deg, #EDE7FF 0%, #E3F0FD 50%, #FFF0E8 100%);
  border-radius: var(--radius-2xl);
  box-shadow: var(--shadow-clay), inset 0 1px 0 rgba(255,255,255,0.8);
  border: 2px solid rgba(180,167,246,0.12);
  margin: var(--space-3) var(--space-4);
}

.pfl-clay-avatar {
  width: 72px;
  height: 72px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255,255,255,0.7);
  border-radius: 50%;
  box-shadow: var(--shadow-clay-sm), inset 0 1px 0 rgba(255,255,255,0.8);
}

.pfl-clay-avatar-text {
  font-size: 42px;
  line-height: 1;
}

.pfl-clay-user-info {
  flex: 1;
  min-width: 0;
}

.pfl-clay-user-name {
  font-size: var(--font-title);
  font-weight: var(--weight-bold);
  color: var(--text-primary);
  margin-bottom: 2px;
}

.pfl-clay-user-meta {
  font-size: var(--font-body-sm);
  color: var(--text-secondary);
}

/* 档案添加引导粘土卡 */
.pfl-clay-add-card {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-5);
  background: linear-gradient(135deg, #FFF8E1 0%, #FFF0E8 50%, #E8F5FF 100%);
  border-radius: var(--radius-2xl);
  box-shadow: var(--shadow-clay), inset 0 1px 0 rgba(255,255,255,0.8);
  border: 2px dashed rgba(255,169,77,0.3);
  margin: var(--space-3) var(--space-4);
}

.pfl-clay-add-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-4);
  background: var(--gradient-warm);
  color: #FFF;
  border: none;
  border-radius: var(--radius-full);
  font-size: var(--font-body-sm);
  font-weight: var(--weight-bold);
  box-shadow: var(--shadow-clay-sm), var(--shadow-glow-orange);
  cursor: pointer;
  transition: all var(--transition-spring);
  font-family: inherit;
  margin-top: var(--space-2);
}

.pfl-clay-add-btn:active {
  transform: scale(0.94);
  box-shadow: var(--shadow-clay-pressed);
}

/* 菜单列表粘土版 */
.pfl-clay-menu-list {
  background: #FFFFFF;
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-clay), inset 0 1px 0 rgba(255,255,255,0.7);
  overflow: hidden;
  border: 1px solid rgba(0,0,0,0.04);
}

.pfl-clay-menu-item {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-4);
  cursor: pointer;
  transition: all var(--transition-base);
  border-bottom: 1px solid rgba(0,0,0,0.03);
  font-size: var(--font-body);
  color: var(--text-primary);
  min-height: 56px;
}

.pfl-clay-menu-item:last-child { border-bottom: none; }

.pfl-clay-menu-item:active {
  background: rgba(180,167,246,0.06);
}

.pfl-clay-menu-item.pfl-clay-menu-toggle {
  cursor: default;
}

.pfl-clay-menu-item.pfl-clay-menu-toggle:active {
  background: transparent;
}

.pfl-clay-menu-emoji {
  font-size: 1.4rem;
  flex-shrink: 0;
}

.pfl-clay-menu-label {
  flex: 1;
  font-weight: var(--weight-medium);
  color: var(--text-primary);
}

.pfl-clay-menu-arrow {
  font-size: var(--font-caption);
  color: var(--text-hint);
  flex-shrink: 0;
}

.pfl-clay-menu-value {
  font-size: var(--font-caption);
  color: var(--text-hint);
  flex-shrink: 0;
}

/* 功能入口粘土图标网格 */
.pfl-clay-entry-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-3);
  padding: 0 var(--space-4);
  margin-bottom: var(--space-3);
}

.pfl-clay-entry-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-4) var(--space-2);
  background: #FFFFFF;
  border: none;
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-clay), inset 0 1px 0 rgba(255,255,255,0.7);
  cursor: pointer;
  transition: all var(--transition-spring);
  font-family: inherit;
  text-align: center;
}

.pfl-clay-entry-btn:active {
  transform: scale(0.94);
  box-shadow: var(--shadow-clay-pressed);
}

.pfl-clay-entry-icon {
  font-size: 2rem;
  line-height: 1;
}

.pfl-clay-entry-label {
  font-size: var(--font-caption);
  font-weight: var(--weight-semibold);
  color: var(--text-primary);
}

.pfl-clay-entry-sublabel {
  font-size: 12px;
  color: var(--text-hint);
}

/* 设置粘土入口 */
.pfl-clay-settings-list {
  background: #FFFFFF;
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-clay), inset 0 1px 0 rgba(255,255,255,0.7);
  overflow: hidden;
  border: 1px solid rgba(0,0,0,0.04);
}

/* 家长模式粘土按钮 */
.pfl-clay-parent-btn {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  width: 100%;
  padding: var(--space-4) var(--space-5);
  background: var(--gradient-cool);
  color: #FFF;
  border: none;
  border-radius: var(--radius-xl);
  font-size: var(--font-body);
  font-weight: var(--weight-bold);
  box-shadow: var(--shadow-clay), var(--shadow-glow-blue);
  cursor: pointer;
  transition: all var(--transition-spring);
  font-family: inherit;
  min-height: 56px;
  margin: var(--space-3) var(--space-0);
}

.pfl-clay-parent-btn:active {
  transform: scale(0.96);
  box-shadow: var(--shadow-clay-pressed);
}

.pfl-clay-parent-icon {
  font-size: 1.5rem;
}

.pfl-clay-parent-text {
  flex: 1;
  text-align: left;
}

.pfl-clay-parent-title {
  font-weight: var(--weight-bold);
}

.pfl-clay-parent-desc {
  font-size: var(--font-caption);
  opacity: 0.85;
}

/* 退出登录粘土按钮 */
.pfl-clay-logout-btn {
  width: 100%;
  padding: var(--space-4);
  min-height: 52px;
  background: transparent;
  border: 2px solid rgba(255, 107, 107, 0.2);
  border-radius: var(--radius-xl);
  font-size: var(--font-body);
  font-weight: var(--weight-medium);
  color: #E03131;
  cursor: pointer;
  transition: all var(--transition-base);
  font-family: inherit;
  box-shadow: var(--shadow-clay-sm);
}

.pfl-clay-logout-btn:active {
  background: rgba(255, 107, 107, 0.06);
  transform: scale(0.97);
}

/* ========== 8.4 Settings 设置页粘土升级 (stg-clay-*) ========== */

/* 设置分组粘土卡片 */
.stg-clay-section {
  margin: var(--space-3) var(--space-4);
}

.stg-clay-group-card {
  background: #FFFFFF;
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-clay), inset 0 1px 0 rgba(255,255,255,0.7);
  overflow: hidden;
  border: 1px solid rgba(0,0,0,0.04);
}

.stg-clay-section-title {
  font-size: var(--font-body-sm);
  font-weight: var(--weight-bold);
  color: var(--text-hint);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: var(--space-2);
  margin-top: var(--space-1);
}

.stg-clay-menu-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-4);
  border-bottom: 1px solid rgba(0,0,0,0.03);
  cursor: pointer;
  transition: all var(--transition-base);
  min-height: 56px;
  gap: var(--space-3);
}

.stg-clay-menu-item:last-child { border-bottom: none; }

.stg-clay-menu-item:active {
  background: rgba(180,167,246,0.06);
}

.stg-clay-menu-item.stg-clay-menu-toggle {
  cursor: default;
}

.stg-clay-menu-item.stg-clay-menu-toggle:active {
  background: transparent;
}

.stg-clay-menu-left {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex: 1;
  min-width: 0;
}

.stg-clay-menu-icon {
  font-size: 1.5rem;
  flex-shrink: 0;
}

.stg-clay-menu-info {
  min-width: 0;
}

.stg-clay-menu-label {
  font-size: var(--font-body);
  font-weight: var(--weight-semibold);
  color: var(--text-primary);
  line-height: 1.4;
}

.stg-clay-menu-desc {
  font-size: var(--font-caption);
  color: var(--text-hint);
  line-height: 1.4;
}

.stg-clay-menu-arrow {
  font-size: var(--font-body);
  color: var(--text-hint);
  flex-shrink: 0;
}

/* 设置页头部粘土 */
.stg-clay-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-4);
  background: rgba(255,255,255,0.5);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-radius: var(--radius-xl);
  margin: var(--space-3) var(--space-4);
  box-shadow: var(--shadow-clay-sm);
  gap: var(--space-3);
}

.stg-clay-header-title {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--font-subtitle);
  font-weight: var(--weight-bold);
  color: var(--text-primary);
}

/* 粘土开关 */
.stg-clay-toggle {
  position: relative;
  display: inline-block;
  width: 56px;
  height: 32px;
  flex-shrink: 0;
}

.stg-clay-toggle input {
  opacity: 0;
  width: 0;
  height: 0;
}

.stg-clay-toggle-slider {
  position: absolute;
  inset: 0;
  background: #E0E0E0;
  border-radius: var(--radius-full);
  cursor: pointer;
  transition: all var(--transition-base);
  box-shadow: inset 0 1px 3px rgba(0,0,0,0.1);
}

.stg-clay-toggle-slider::before {
  content: '';
  position: absolute;
  top: 3px;
  left: 3px;
  width: 26px;
  height: 26px;
  background: #FFFFFF;
  border-radius: 50%;
  transition: all var(--transition-bouncy);
  box-shadow: var(--shadow-clay-sm);
}

.stg-clay-toggle input:checked + .stg-clay-toggle-slider {
  background: var(--color-purple);
}

.stg-clay-toggle input:checked + .stg-clay-toggle-slider::before {
  transform: translateX(24px);
}

/* PIN 管理粘土卡片 */
.stg-clay-pin-card {
  background: linear-gradient(135deg, #FFF0E8 0%, #EDE7FF 100%);
  border-radius: var(--radius-xl);
  padding: var(--space-4);
  box-shadow: var(--shadow-clay), inset 0 1px 0 rgba(255,255,255,0.7);
  margin: var(--space-4);
  border: 2px solid rgba(180,167,246,0.12);
}
.stg-clay-pin-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  width: 100%;
  padding: var(--space-4);
  background: var(--gradient-warm);
  color: #FFF;
  border: none;
  border-radius: var(--radius-lg);
  font-size: var(--font-body);
  font-weight: var(--weight-bold);
  box-shadow: var(--shadow-clay-sm), var(--shadow-glow-orange);
  cursor: pointer;
  transition: all var(--transition-spring);
  font-family: inherit;
  min-height: 52px;
}
.stg-clay-pin-btn:active {
  transform: scale(0.94);
  box-shadow: var(--shadow-clay-pressed);
}

.stg-clay-logout-btn {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: var(--space-4);
  background: #FFF;
  border: 2px solid rgba(255,107,107,0.25);
  border-radius: var(--radius-xl);
  color: #FF6B6B;
  font-size: var(--font-body);
  font-weight: var(--weight-semibold);
  cursor: pointer;
  box-shadow: var(--shadow-clay-sm), inset 0 1px 0 rgba(255,255,255,0.7);
  transition: all var(--transition-base);
}
.stg-clay-logout-btn:active {
  background: #FFF5F5;
  transform: scale(0.97);
}

.stg-clay-theme-row {
  background: #FFF;
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-clay), inset 0 1px 0 rgba(255,255,255,0.7);
  padding: var(--space-3);
}

/* ========== 8.5 Create Profile 创建档案粘土升级 (cpr-clay-*) ========== */

.cpr-clay-form-card {
  background: #FFFFFF;
  border-radius: var(--radius-2xl);
  padding: var(--space-5);
  box-shadow: var(--shadow-clay-raised), inset 0 1px 0 rgba(255,255,255,0.8);
  border: 2px solid rgba(180,167,246,0.08);
}

.cpr-clay-input {
  width: 100%;
  padding: var(--space-3) var(--space-4);
  border: 2px solid rgba(0,0,0,0.06);
  border-radius: var(--radius-lg);
  font-size: var(--font-body);
  font-family: inherit;
  background: #FAFAFA;
  color: var(--text-primary);
  transition: all var(--transition-base);
  min-height: 50px;
  box-shadow: inset 0 1px 3px rgba(0,0,0,0.04);
}
.cpr-clay-input:focus {
  outline: none;
  border-color: var(--color-purple);
  background: #FFF;
  box-shadow: inset 0 1px 3px rgba(0,0,0,0.04), 0 0 0 4px rgba(180,167,246,0.12);
}

.cpr-clay-char-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-3);
}
.cpr-clay-char-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-4) var(--space-2);
  background: #FFF;
  border: 2px solid rgba(0,0,0,0.06);
  border-radius: var(--radius-xl);
  cursor: pointer;
  transition: all var(--transition-spring);
  font-family: inherit;
  text-align: center;
  box-shadow: var(--shadow-clay-sm);
}
.cpr-clay-char-btn:active {
  transform: scale(0.92);
  box-shadow: var(--shadow-clay-pressed);
}
.cpr-clay-char-btn.selected {
  border-color: var(--color-purple);
  background: var(--color-purple-light);
  box-shadow: var(--shadow-glow-purple), var(--shadow-clay-sm);
}
.cpr-clay-char-avatar {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2rem;
  box-shadow: var(--shadow-clay-sm);
}
.cpr-clay-char-avatar-emoji {
  font-size: 2rem;
  line-height: 1;
}
.cpr-clay-char-name {
  font-size: var(--font-body-sm);
  font-weight: var(--weight-bold);
  color: var(--text-primary);
}
.cpr-clay-char-desc {
  font-size: 12px;
  color: var(--text-hint);
  line-height: 1.3;
}

.cpr-clay-age-row {
  display: flex;
  gap: var(--space-2);
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.cpr-clay-age-row::-webkit-scrollbar { display: none; }
.cpr-clay-age-chip {
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: var(--space-3) var(--space-4);
  background: #FFF;
  border: 2px solid rgba(0,0,0,0.06);
  border-radius: var(--radius-xl);
  cursor: pointer;
  transition: all var(--transition-spring);
  font-family: inherit;
  box-shadow: var(--shadow-clay-sm);
  min-width: 64px;
}
.cpr-clay-age-chip.active {
  border-color: var(--color-orange);
  background: var(--color-orange-light);
  box-shadow: var(--shadow-glow-orange), var(--shadow-clay-sm);
}
.cpr-clay-age-chip:active {
  transform: scale(0.9);
  box-shadow: var(--shadow-clay-pressed);
}
.cpr-clay-age-emoji { font-size: 1.5rem; }
.cpr-clay-age-num {
  font-size: var(--font-subtitle);
  font-weight: var(--weight-bold);
  color: var(--text-primary);
}
.cpr-clay-age-label { font-size: 12px; color: var(--text-hint); }

.cpr-clay-submit-btn {
  width: 100%;
  padding: var(--space-4);
  min-height: 56px;
  border: none;
  border-radius: var(--radius-xl);
  font-size: var(--font-subtitle);
  font-weight: var(--weight-bold);
  color: #FFF;
  background: var(--gradient-magic);
  box-shadow: var(--shadow-clay), var(--shadow-glow-purple);
  cursor: pointer;
  transition: all var(--transition-spring);
  font-family: inherit;
}
.cpr-clay-submit-btn:active {
  transform: scale(0.95);
  box-shadow: var(--shadow-clay-pressed);
}
.cpr-clay-submit-btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

/* ========== 8.6 Review 作品审核粘土升级 (rvw-clay-*) ========== */

.rvw-clay-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-2);
  margin-bottom: var(--space-4);
}
.rvw-clay-stat-card {
  background: #FFFFFF;
  border-radius: var(--radius-xl);
  padding: var(--space-4);
  text-align: center;
  box-shadow: var(--shadow-clay), inset 0 1px 0 rgba(255,255,255,0.7);
}
.rvw-clay-stat-val {
  font-size: var(--font-heading);
  font-weight: var(--weight-extrabold);
}
.rvw-clay-stat-val--pending { color: var(--color-orange); }
.rvw-clay-stat-val--approved { color: var(--color-green); }
.rvw-clay-stat-val--rejected { color: var(--color-pink); }
.rvw-clay-stat-lbl {
  font-size: var(--font-caption);
  color: var(--text-hint);
}

.rvw-clay-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 12px;
  border-radius: var(--radius-full);
  font-size: var(--font-caption);
  font-weight: var(--weight-semibold);
  box-shadow: var(--shadow-clay-sm);
}
.rvw-clay-badge--pending {
  background: linear-gradient(135deg, #FFF0E0, #FFE0C0);
  color: #92400E;
}
.rvw-clay-badge--approved {
  background: linear-gradient(135deg, #E0FBE6, #C6F6D5);
  color: #276749;
}
.rvw-clay-badge--rejected {
  background: linear-gradient(135deg, #FFE0E6, #FFCCD5);
  color: #9B2C2C;
}

.rvw-clay-card {
  background: #FFFFFF;
  border-radius: var(--radius-xl);
  padding: var(--space-4);
  margin-bottom: var(--space-3);
  box-shadow: var(--shadow-clay), inset 0 1px 0 rgba(255,255,255,0.7);
  transition: all var(--transition-base);
}
.rvw-clay-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--space-2);
  flex-wrap: wrap;
  gap: var(--space-2);
}
.rvw-clay-card-type {
  font-size: var(--font-body-sm);
  font-weight: var(--weight-semibold);
  color: var(--color-purple);
}
.rvw-clay-card-time {
  font-size: var(--font-caption);
  color: var(--text-hint);
}
.rvw-clay-card-preview {
  font-size: var(--font-body-sm);
  color: var(--text-primary);
  line-height: 1.6;
  margin-bottom: var(--space-2);
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.rvw-clay-card-meta {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex-wrap: wrap;
}
.rvw-clay-card-risk {
  font-size: var(--font-caption);
  padding: 2px 10px;
  border-radius: var(--radius-full);
  font-weight: var(--weight-semibold);
}
.rvw-clay-card-risk--low {
  background: rgba(105,219,124,0.15);
  color: #276749;
}
.rvw-clay-card-risk--mid {
  background: rgba(255,169,77,0.15);
  color: #92400E;
}
.rvw-clay-card-risk--high {
  background: rgba(255,107,107,0.15);
  color: #9B2C2C;
}
.rvw-clay-card-reject-reason {
  margin-top: var(--space-2);
  padding: var(--space-2) var(--space-3);
  background: rgba(255,107,107,0.06);
  border-radius: var(--radius-md);
  font-size: var(--font-caption);
  color: #9B2C2C;
}
.rvw-clay-card-actions {
  display: flex;
  gap: var(--space-2);
  margin-top: var(--space-3);
}
.rvw-clay-btn-approve {
  flex: 1;
  min-height: 40px;
  border: none;
  border-radius: var(--radius-lg);
  font-size: var(--font-body-sm);
  font-weight: var(--weight-bold);
  background: var(--gradient-nature);
  color: #FFF;
  cursor: pointer;
  transition: all var(--transition-base);
  font-family: inherit;
  box-shadow: var(--shadow-clay-sm);
}
.rvw-clay-btn-approve:active { transform: scale(0.95); }
.rvw-clay-btn-reject {
  flex: 1;
  min-height: 40px;
  border: 2px solid rgba(255,107,107,0.2);
  border-radius: var(--radius-lg);
  font-size: var(--font-body-sm);
  font-weight: var(--weight-bold);
  background: #FFF;
  color: #FF6B6B;
  cursor: pointer;
  transition: all var(--transition-base);
  font-family: inherit;
  box-shadow: var(--shadow-clay-sm);
}
.rvw-clay-btn-reject:active {
  background: #FFF5F5;
  transform: scale(0.95);
}

.rvw-clay-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--space-10) var(--space-6);
  text-align: center;
  background: linear-gradient(135deg, #EDE7FF 0%, #E3F0FD 50%, #FFF0E8 100%);
  border-radius: var(--radius-2xl);
  box-shadow: var(--shadow-clay), inset 0 1px 0 rgba(255,255,255,0.8);
  margin: var(--space-4);
  border: 2px dashed rgba(180,167,246,0.3);
}
.rvw-clay-empty-icon { font-size: 3.5rem; margin-bottom: var(--space-3); }

.rvw-clay-tabs {
  display: flex;
  gap: var(--space-2);
  margin-bottom: var(--space-3);
  overflow-x: auto;
  scrollbar-width: none;
}
.rvw-clay-tabs::-webkit-scrollbar { display: none; }
.rvw-clay-tab {
  flex-shrink: 0;
  padding: var(--space-2) var(--space-4);
  min-height: 44px;
  display: flex;
  align-items: center;
  border: none;
  border-radius: var(--radius-full);
  font-size: var(--font-body-sm);
  font-weight: var(--weight-semibold);
  color: var(--text-secondary);
  background: rgba(255,255,255,0.85);
  box-shadow: var(--shadow-clay-sm);
  cursor: pointer;
  transition: all var(--transition-base);
  font-family: inherit;
}
.rvw-clay-tab.active {
  background: var(--color-purple);
  color: #FFF;
  box-shadow: var(--shadow-glow-purple);
}
.rvw-clay-tab:active:not(.active) { transform: scale(0.94); }

/* ========== 8.7 Bind Phone 手机绑定粘土升级 (bph-clay-*) ========== */

.bph-clay-card {
  background: #FFFFFF;
  border-radius: var(--radius-2xl);
  padding: var(--space-6) var(--space-5);
  box-shadow: var(--shadow-clay-raised), inset 0 1px 0 rgba(255,255,255,0.8);
  border: 2px solid rgba(116,192,252,0.1);
  margin: var(--space-4);
  text-align: center;
}

.bph-clay-icon {
  font-size: 4rem;
  margin-bottom: var(--space-4);
}

.bph-clay-desc {
  font-size: var(--font-body);
  color: var(--text-secondary);
  line-height: 1.6;
  margin-bottom: var(--space-6);
}

.bph-clay-input {
  width: 100%;
  padding: var(--space-4);
  border: 2px solid rgba(0,0,0,0.06);
  border-radius: var(--radius-xl);
  font-size: var(--font-subtitle);
  font-family: inherit;
  background: #FAFAFA;
  color: var(--text-primary);
  text-align: center;
  transition: all var(--transition-base);
  min-height: 54px;
  box-shadow: inset 0 1px 3px rgba(0,0,0,0.04);
}
.bph-clay-input:focus {
  outline: none;
  border-color: var(--color-blue);
  background: #FFF;
  box-shadow: inset 0 1px 3px rgba(0,0,0,0.04), 0 0 0 4px rgba(116,192,252,0.12);
}

.bph-clay-code-row {
  display: flex;
  justify-content: center;
  gap: var(--space-3);
  margin-bottom: var(--space-4);
}
.bph-clay-code-cell {
  width: 48px;
  height: 56px;
  border: 2px solid rgba(0,0,0,0.08);
  border-radius: var(--radius-lg);
  text-align: center;
  font-size: var(--font-heading);
  font-weight: var(--weight-bold);
  font-family: inherit;
  color: var(--text-primary);
  background: #FAFAFA;
  transition: all var(--transition-base);
  box-shadow: inset 0 1px 3px rgba(0,0,0,0.04);
}
.bph-clay-code-cell:focus {
  outline: none;
  border-color: var(--color-blue);
  background: #FFF;
  box-shadow: inset 0 1px 3px rgba(0,0,0,0.04), 0 0 0 4px rgba(116,192,252,0.12);
}

.bph-clay-btn {
  width: 100%;
  padding: var(--space-4);
  min-height: 54px;
  border: none;
  border-radius: var(--radius-xl);
  font-size: var(--font-subtitle);
  font-weight: var(--weight-bold);
  color: #FFF;
  background: var(--gradient-cool);
  box-shadow: var(--shadow-clay), var(--shadow-glow-blue);
  cursor: pointer;
  transition: all var(--transition-spring);
  font-family: inherit;
  margin-top: var(--space-3);
}
.bph-clay-btn:active {
  transform: scale(0.94);
  box-shadow: var(--shadow-clay-pressed);
}
.bph-clay-btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.bph-clay-btn-text {
  background: none;
  border: none;
  color: var(--color-blue);
  font-size: var(--font-body-sm);
  font-weight: var(--weight-semibold);
  cursor: pointer;
  padding: var(--space-2);
  font-family: inherit;
  transition: all var(--transition-base);
}
.bph-clay-btn-text:active { opacity: 0.6; }
.bph-clay-btn-text:disabled {
  color: var(--text-hint);
  cursor: not-allowed;
}

.bph-clay-success {
  text-align: center;
  padding: var(--space-8) var(--space-4);
}
.bph-clay-success-icon { font-size: 4.5rem; margin-bottom: var(--space-3); }
.bph-clay-success-title {
  font-size: var(--font-heading);
  font-weight: var(--weight-extrabold);
  color: var(--text-primary);
  margin-bottom: var(--space-2);
}
.bph-clay-success-desc {
  font-size: var(--font-body);
  color: var(--text-secondary);
  margin-bottom: var(--space-6);
}

/* ========== 8.8 Invite 邀请裂变粘土升级 (inv-clay-*) ========== */

.inv-clay-hero {
  text-align: center;
  padding: var(--space-6) 0 var(--space-4);
}
.inv-clay-hero-icon {
  font-size: 4.5rem;
  margin-bottom: var(--space-3);
  animation: floatSoft 2.5s ease-in-out infinite;
}
.inv-clay-hero-title {
  font-size: var(--font-heading);
  font-weight: var(--weight-extrabold);
  color: var(--text-primary);
  margin-bottom: var(--space-1);
}
.inv-clay-hero-desc {
  font-size: var(--font-body);
  color: var(--text-secondary);
  line-height: 1.6;
}

.inv-clay-stats-card {
  display: flex;
  justify-content: center;
  gap: var(--space-6);
  background: linear-gradient(135deg, #FFFDF7 0%, #FFF5F7 50%, #F7F4FF 100%);
  border-radius: var(--radius-2xl);
  padding: var(--space-5);
  margin-bottom: var(--space-4);
  box-shadow: var(--shadow-clay), inset 0 1px 0 rgba(255,255,255,0.8);
  border: 2px solid rgba(180,167,246,0.1);
}
.inv-clay-stat { text-align: center; }
.inv-clay-stat-val {
  font-size: var(--font-heading);
  font-weight: var(--weight-extrabold);
  background: linear-gradient(135deg, #B4A7F6, #74C0FC);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.inv-clay-stat-lbl { font-size: var(--font-caption); color: var(--text-hint); }
.inv-clay-stat-div {
  width: 1px;
  background: rgba(0,0,0,0.08);
  align-self: stretch;
}

.inv-clay-code-card {
  text-align: center;
  background: #FFFFFF;
  border-radius: var(--radius-xl);
  padding: var(--space-5);
  margin-bottom: var(--space-4);
  box-shadow: var(--shadow-clay), inset 0 1px 0 rgba(255,255,255,0.7);
  border: 2px dashed var(--color-purple);
}
.inv-clay-code-label {
  font-size: var(--font-caption);
  color: var(--text-hint);
  margin-bottom: var(--space-2);
}
.inv-clay-code-value {
  font-size: var(--font-heading);
  font-weight: var(--weight-extrabold);
  color: var(--color-purple);
  letter-spacing: 6px;
  font-family: monospace;
  margin-bottom: var(--space-3);
}
.inv-clay-copy-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-5);
  background: var(--gradient-magic);
  color: #FFF;
  border: none;
  border-radius: var(--radius-full);
  font-size: var(--font-body-sm);
  font-weight: var(--weight-bold);
  box-shadow: var(--shadow-clay-sm), var(--shadow-glow-purple);
  cursor: pointer;
  transition: all var(--transition-spring);
  font-family: inherit;
}
.inv-clay-copy-btn:active {
  transform: scale(0.94);
  box-shadow: var(--shadow-clay-pressed);
}

.inv-clay-actions {
  display: flex;
  gap: var(--space-3);
  margin-bottom: var(--space-5);
}
.inv-clay-share-btn {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: var(--space-4);
  min-height: 54px;
  border: none;
  border-radius: var(--radius-xl);
  font-size: var(--font-body);
  font-weight: var(--weight-bold);
  color: #FFF;
  background: var(--gradient-sunset);
  box-shadow: var(--shadow-clay), var(--shadow-glow-orange);
  cursor: pointer;
  transition: all var(--transition-spring);
  font-family: inherit;
}
.inv-clay-share-btn:active {
  transform: scale(0.94);
  box-shadow: var(--shadow-clay-pressed);
}
.inv-clay-copy-link-btn {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: var(--space-4);
  min-height: 54px;
  border: 2px solid rgba(180,167,246,0.2);
  border-radius: var(--radius-xl);
  font-size: var(--font-body);
  font-weight: var(--weight-bold);
  color: var(--color-purple);
  background: #FFF;
  box-shadow: var(--shadow-clay-sm), inset 0 1px 0 rgba(255,255,255,0.7);
  cursor: pointer;
  transition: all var(--transition-spring);
  font-family: inherit;
}
.inv-clay-copy-link-btn:active {
  background: var(--color-purple-light);
  transform: scale(0.94);
}

.inv-clay-records-title {
  font-size: var(--font-body);
  font-weight: var(--weight-bold);
  color: var(--text-primary);
  margin-bottom: var(--space-3);
  padding: 0 var(--space-1);
}
.inv-clay-record {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-4);
  background: #FFFFFF;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-clay-sm), inset 0 1px 0 rgba(255,255,255,0.7);
  margin-bottom: var(--space-2);
  transition: all var(--transition-base);
}
.inv-clay-record:active { background: rgba(180,167,246,0.04); }
.inv-clay-record-name {
  font-size: var(--font-body);
  color: var(--text-primary);
  font-weight: var(--weight-medium);
}
.inv-clay-record-status {
  font-size: var(--font-caption);
  font-weight: var(--weight-semibold);
}
.inv-clay-record-status--rewarded {
  color: var(--color-green);
}
.inv-clay-record-status--pending {
  color: var(--color-orange);
}

.inv-clay-rewards-card {
  background: linear-gradient(135deg, #EDE7FF 0%, #E3F0FD 50%, #FFF0E8 100%);
  border-radius: var(--radius-xl);
  padding: var(--space-4);
  box-shadow: var(--shadow-clay), inset 0 1px 0 rgba(255,255,255,0.8);
  border: 2px solid rgba(180,167,246,0.1);
}
.inv-clay-rewards-title {
  font-size: var(--font-body);
  font-weight: var(--weight-bold);
  color: var(--text-primary);
  margin-bottom: var(--space-3);
}
.inv-clay-reward-item {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-2) 0;
  font-size: var(--font-body-sm);
  color: var(--text-secondary);
}
.inv-clay-reward-icon { font-size: 1.3rem; }

/* ==== 响应式适配 ==== */
@media (min-width: 768px) {
  .gal-clay-header,
  .dry-clay-header,
  .dry-clay-streak-card,
  .pfl-clay-user-card,
  .pfl-clay-add-card,
  .stg-clay-section,
  .bph-clay-card,
  .inv-clay-hero,
  .inv-clay-stats-card,
  .inv-clay-code-card {
    max-width: 560px;
    margin-left: auto;
    margin-right: auto;
  }

  .cpr-clay-char-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* ============================================================
   Admin Desktop v3.0 — 独立桌面端管理后台
   ============================================================ */

/* 容器 — 覆盖移动端 max-width 限制 */
.admin-container {
  max-width: none !important;
  width: 100% !important;
  min-height: 100vh !important;
  margin: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  background: linear-gradient(135deg, #F0F4FF 0%, #F8FAFC 50%, #F0F4FF 100%) !important;
}

/* 布局系统 */
.admin-layout {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

.admin-body {
  display: flex;
  flex: 1;
  gap: 0;
}

/* 顶部栏 */
.admin-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 24px;
  height: 56px;
  background: #FFFFFF;
  border-bottom: 1px solid rgba(0,0,0,0.06);
  box-shadow: 0 1px 4px rgba(0,0,0,0.04);
  position: sticky;
  top: 0;
  z-index: 100;
}

.admin-topbar-left {
  display: flex;
  align-items: center;
  gap: 10px;
}

.admin-topbar-icon {
  font-size: 22px;
}

.admin-topbar-title {
  font-size: 16px;
  font-weight: 800;
  color: #1E293B;
  letter-spacing: 0.5px;
}

.admin-topbar-right {
  display: flex;
  gap: 8px;
}

.admin-topbar-btn {
  padding: 6px 14px;
  border: 1px solid #E2E8F0;
  border-radius: 10px;
  background: #FFFFFF;
  color: #475569;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s ease;
  font-family: inherit;
}

.admin-topbar-btn:hover {
  background: #F8FAFC;
  border-color: #CBD5E1;
}

.admin-topbar-btn:active {
  transform: scale(0.96);
}

.admin-topbar-btn-danger {
  color: #EF4444;
  border-color: #FECACA;
}

.admin-topbar-btn-danger:hover {
  background: #FEF2F2;
}

/* 侧边栏 */
.admin-sidebar {
  width: 180px;
  min-width: 180px;
  background: #FFFFFF;
  border-right: 1px solid rgba(0,0,0,0.04);
  padding: 16px 0;
  min-height: calc(100vh - 56px);
}

.admin-nav {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 0 8px;
}

.admin-nav-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border: none;
  border-radius: 10px;
  background: transparent;
  color: #475569;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s ease;
  text-align: left;
  width: 100%;
  font-family: inherit;
}

.admin-nav-item:hover {
  background: rgba(99,102,241,0.06);
  color: #1E293B;
}

.admin-nav-item.active {
  background: #FFFFFF;
  color: #6366F1;
  box-shadow: 0 1px 4px rgba(0,0,0,0.06);
  border: 1px solid rgba(99,102,241,0.12);
}

.nav-icon {
  font-size: 18px;
  width: 24px;
  text-align: center;
}

.nav-label {
  white-space: nowrap;
}

/* 内容区 */
.admin-content {
  flex: 1;
  padding: 24px;
  overflow-y: auto;
  max-width: calc(100vw - 180px);
}

/* 卡片表格包装器 */
.admin-card-table-wrap {
  background: linear-gradient(145deg, #FFFFFF, #F5F8FC);
  border-radius: 20px;
  box-shadow: 8px 8px 16px rgba(0,0,0,0.06), -4px -4px 12px rgba(255,255,255,0.8);
  overflow: hidden;
}

.admin-card-table-header {
  padding: 20px 24px 12px;
  border-bottom: 1px solid #F1F5F9;
}

/* 工具栏 */
.admin-table-toolbar {
  padding: 16px 24px 8px;
}

.admin-search-box {
  position: relative;
  max-width: 360px;
}

.search-icon {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 14px;
  pointer-events: none;
}

.admin-search-input {
  width: 100%;
  padding: 8px 12px 8px 36px;
  border: 2px solid #E2E8F0;
  border-radius: 10px;
  font-size: 13px;
  outline: none;
  background: #F8FAFC;
  color: #1E293B;
  transition: border-color 0.2s;
  box-sizing: border-box;
  font-family: inherit;
}

.admin-search-input:focus {
  border-color: #6366F1;
  background: #FFFFFF;
  box-shadow: 0 0 0 3px rgba(99,102,241,0.1);
}

/* 筛选栏 */
.admin-filter-bar {
  display: flex;
  align-items: flex-end;
  gap: 12px;
  padding: 8px 24px 16px;
  flex-wrap: wrap;
  border-bottom: 1px solid #F1F5F9;
}

.filter-group {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.filter-label {
  font-size: 12px;
  font-weight: 600;
  color: #64748B;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.admin-select {
  padding: 6px 12px;
  border: 2px solid #E2E8F0;
  border-radius: 8px;
  font-size: 14px;
  outline: none;
  background: #F8FAFC;
  color: #1E293B;
  cursor: pointer;
  transition: border-color 0.2s;
  font-family: inherit;
  min-height: 44px;
}

.admin-select:focus {
  border-color: #6366F1;
}

.admin-btn-sm {
  border-radius: 8px !important;
}

/* 表格样式 */
.admin-table-container {
  overflow-x: auto;
  margin-bottom: 12px;
}

.admin-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-size: 14px;
  overflow: hidden;
}

.admin-table thead tr:first-child th:first-child {
  border-top-left-radius: 14px;
}

.admin-table thead tr:first-child th:last-child {
  border-top-right-radius: 14px;
}

.admin-table tbody tr:last-child td:first-child {
  border-bottom-left-radius: 14px;
}

.admin-table tbody tr:last-child td:last-child {
  border-bottom-right-radius: 14px;
}

.admin-table-row {
  transition: background 0.15s ease;
}

.admin-table-row:hover {
  background: #EEF2FF;
}

.admin-table-row:last-child td {
  border-bottom: none;
}

/* 分页 */
.admin-pagination {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 16px;
  padding: 16px 24px;
  border-top: 1px solid #F1F5F9;
}

.admin-pagination-btn {
  padding: 6px 16px;
  border: 1px solid #E2E8F0;
  border-radius: 8px;
  background: #FFFFFF;
  color: #475569;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s ease;
  font-family: inherit;
}

.admin-pagination-btn:hover {
  background: #F1F5F9;
  border-color: #CBD5E1;
}

.admin-page-info {
  font-size: 13px;
  color: #64748B;
}

/* 空状态 */
.admin-empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 60px 20px;
  text-align: center;
  color: #64748B;
}

.admin-empty-state .empty-icon {
  font-size: 40px;
  margin-bottom: 12px;
  opacity: 0.5;
}

/* 面包屑 */
.admin-breadcrumb {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 0 0 16px;
  font-size: 13px;
  color: #64748B;
}

.admin-breadcrumb-link {
  background: none;
  border: none;
  color: #6366F1;
  font-weight: 600;
  cursor: pointer;
  padding: 4px 8px;
  border-radius: 6px;
  font-size: 13px;
  transition: background 0.15s ease;
  font-family: inherit;
}

.admin-breadcrumb-link:hover {
  background: rgba(99,102,241,0.08);
}

.admin-breadcrumb-sep {
  color: #94A3B8;
  font-size: 16px;
}

.admin-breadcrumb-current {
  color: #475569;
}

/* 详情卡片 — Claymorphism 粘土风格 */
.admin-detail-card {
  background: linear-gradient(145deg, #FFFFFF, #F5F8FC);
  border-radius: 24px;
  box-shadow: 8px 8px 20px rgba(0,0,0,0.05), -5px -5px 14px rgba(255,255,255,0.8);
  padding: 20px 24px;
  margin-bottom: 16px;
}

.admin-detail-card-title {
  font-size: 16px;
  font-weight: 700;
  color: #1E293B;
  margin-bottom: 12px;
  padding-bottom: 10px;
  border-bottom: 1px solid #F1F5F9;
  display: flex;
  align-items: center;
  gap: 8px;
}

/* 信息网格 */
.admin-info-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px 24px;
}

.info-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border-radius: 8px;
  transition: background 0.15s ease;
}

.info-row:hover {
  background: rgba(99,102,241,0.03);
}

.info-label {
  font-size: 12px;
  font-weight: 600;
  color: #64748B;
  min-width: 72px;
  flex-shrink: 0;
}

.info-value {
  font-size: 14px;
  color: #1E293B;
  flex: 1;
}

.info-edit-btn {
  flex-shrink: 0;
}

/* 订单详情弹窗内容 */
.admin-order-detail-content {
  font-size: 14px;
}

.order-detail-row {
  display: flex;
  padding: 8px 0;
  border-bottom: 1px solid #F1F5F9;
}

.order-detail-row:last-child {
  border-bottom: none;
}

.od-label {
  font-size: 12px;
  font-weight: 600;
  color: #64748B;
  min-width: 80px;
  flex-shrink: 0;
}

.od-value {
  color: #1E293B;
  flex: 1;
}

/* 返回按钮 */
.admin-back-btn {
  display: inline-block;
}

/* 响应式：小屏折叠侧边栏 */
@media (max-width: 768px) {
  .admin-sidebar {
    width: 56px;
    min-width: 56px;
  }
  .admin-nav-item .nav-label {
    display: none;
  }
  .admin-nav-item {
    justify-content: center;
    padding: 10px;
  }
  .nav-icon {
    font-size: 20px;
  }
  .admin-content {
    padding: 16px;
    max-width: calc(100vw - 56px);
  }
  .admin-info-grid {
    grid-template-columns: 1fr;
  }
  .admin-filter-bar {
    gap: 8px;
  }
  .admin-topbar-title {
    font-size: 14px;
  }
}

@media (max-width: 480px) {
  .admin-sidebar {
    display: none;
  }
  .admin-content {
    max-width: 100vw;
  }
  .admin-topbar {
    padding: 0 12px;
  }
  .admin-topbar-title {
    font-size: 13px;
  }
  .admin-topbar-btn {
    font-size: 12px;
    padding: 4px 10px;
  }
}

/* ============================================================
   v3.6 伙伴页 + 首页重构 (partner-/v36- 前缀)
   ============================================================ */

/* ---- v3.6: 伙伴页快捷创作卡片 (partner-qcc-*) ---- */

.partner-qcc-wrap {
  margin: var(--space-3) var(--space-4);
  transition: all var(--transition-base);
}

.partner-qcc-collapsed {
  margin-bottom: 0;
}

.partner-qcc-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-2);
  cursor: pointer;
  user-select: none;
}

.partner-qcc-toggle-text {
  font-size: var(--font-caption);
  color: var(--text-hint);
  font-weight: var(--weight-semibold);
  transition: all var(--transition-base);
}

.partner-qcc-toggle:active .partner-qcc-toggle-text {
  opacity: 0.6;
}

.partner-qcc-grid {
  display: flex;
  flex-direction: row;
  gap: 8px;
  padding: 2px 0;
  justify-content: space-between;
}

.partner-qcc-card {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 5px;
  padding: 9px 14px;
  border-radius: 999px;
  cursor: pointer;
  transition: all 0.25s cubic-bezier(0.34,1.56,0.64,1);
  -webkit-tap-highlight-color: transparent;
  position: relative;
  overflow: hidden;
  flex: 1;
  min-width: 0;
  max-width: calc(25% - 6px);
  white-space: nowrap;
}

.partner-qcc-card:active {
  transform: scale(0.93);
}

/* 卡片渐变底色 + 玻璃高光 */
.partner-qcc-card::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 999px;
  opacity: 0.85;
  z-index: 0;
}
.partner-qcc-card::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 50%;
  background: linear-gradient(180deg, rgba(255,255,255,0.55) 0%, rgba(255,255,255,0) 100%);
  border-radius: 999px 999px 0 0;
  z-index: 1;
  pointer-events: none;
}

/* 4 色渐变底色 */
.partner-qcc-card-0 {
  background: linear-gradient(135deg, #FFF3E6 0%, #FFE4C4 100%);
  box-shadow: 0 2px 10px rgba(255,142,83,0.15), 0 -1px 3px rgba(255,255,255,0.9), inset 0 1px 0 rgba(255,255,255,0.7);
  border: 1px solid rgba(255,142,83,0.15);
  color: #D2691E;
}
.partner-qcc-card-0::before {
  background: linear-gradient(135deg, #FFF3E6 0%, #FFE4C4 100%);
}
.partner-qcc-card-1 {
  background: linear-gradient(135deg, #F3E8FF 0%, #E8D5FF 100%);
  box-shadow: 0 2px 10px rgba(139,92,246,0.15), 0 -1px 3px rgba(255,255,255,0.9), inset 0 1px 0 rgba(255,255,255,0.7);
  border: 1px solid rgba(139,92,246,0.15);
  color: #7C3AED;
}
.partner-qcc-card-1::before {
  background: linear-gradient(135deg, #F3E8FF 0%, #E8D5FF 100%);
}
.partner-qcc-card-2 {
  background: linear-gradient(135deg, #E0F7FA 0%, #B2EBF2 100%);
  box-shadow: 0 2px 10px rgba(0,172,193,0.15), 0 -1px 3px rgba(255,255,255,0.9), inset 0 1px 0 rgba(255,255,255,0.7);
  border: 1px solid rgba(0,172,193,0.15);
  color: #00838F;
}
.partner-qcc-card-2::before {
  background: linear-gradient(135deg, #E0F7FA 0%, #B2EBF2 100%);
}
.partner-qcc-card-3 {
  background: linear-gradient(135deg, #FCE4EC 0%, #F8BBD0 100%);
  box-shadow: 0 2px 10px rgba(233,30,99,0.15), 0 -1px 3px rgba(255,255,255,0.9), inset 0 1px 0 rgba(255,255,255,0.7);
  border: 1px solid rgba(233,30,99,0.15);
  color: #C2185B;
}
.partner-qcc-card-3::before {
  background: linear-gradient(135deg, #FCE4EC 0%, #F8BBD0 100%);
}

.partner-qcc-emoji {
  font-size: 1rem;
  line-height: 1;
  flex-shrink: 0;
  position: relative;
  z-index: 2;
  transition: transform 0.2s ease;
}

.partner-qcc-card:active .partner-qcc-emoji {
  transform: scale(0.85) rotate(-10deg);
}

.partner-qcc-label {
  font-size: 12px;
  font-weight: var(--weight-bold);
  color: inherit;
  position: relative;
  z-index: 2;
  white-space: nowrap;
}

/* ---- v3.6: 首页挑战卡片粘土升级 (v36-challenge-*) ---- */

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

.v36-section-challenge {
  margin-top: var(--space-2);
}

.v36-challenge-section-title {
  font-size: var(--font-title);
  font-weight: var(--weight-bold);
  color: var(--text-primary);
  padding: 0 var(--space-1);
  margin-bottom: var(--space-3);
}

.v36-challenge-clay {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--space-5) var(--space-5);
  background: #FFFFFF;
  border-radius: var(--radius-2xl);
  box-shadow: var(--shadow-clay);
  border: 1px solid rgba(255,255,255,0.5);
  cursor: pointer;
  transition: all var(--transition-spring);
  position: relative;
  overflow: hidden;
}

.v36-challenge-clay:active {
  transform: scale(0.98);
  box-shadow: var(--shadow-clay-pressed);
}

/* 顶部行：图标徽章 + 元标签行 (难度/主题/奖励) */
.v36-challenge-top-row {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.v36-challenge-icon-badge {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-lg);
  font-size: 1.3rem;
  flex-shrink: 0;
}
.v36-challenge-icon-easy {
  background: rgba(105,219,124,0.2);
}
.v36-challenge-icon-medium {
  background: rgba(255,169,77,0.2);
}
.v36-challenge-icon-hard {
  background: rgba(255,82,82,0.12);
}

.v36-challenge-meta-tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1);
  flex: 1;
}

.v36-challenge-tag {
  font-size: var(--font-caption);
  font-weight: var(--weight-semibold);
  padding: 2px 10px;
  border-radius: var(--radius-full);
  display: inline-block;
  width: fit-content;
}

.v36-challenge-tag-easy {
  background: rgba(105,219,124,0.15);
  color: #2F9E44;
}

.v36-challenge-tag-medium {
  background: rgba(255,169,77,0.15);
  color: #E8590C;
}

.v36-challenge-tag-hard {
  background: rgba(255,82,82,0.1);
  color: #C92A2A;
}

.v36-challenge-theme-tag {
  font-size: var(--font-caption);
  font-weight: var(--weight-semibold);
  padding: 2px 10px;
  border-radius: var(--radius-full);
  background: rgba(180,167,246,0.12);
  color: #7C3AED;
}

.v36-challenge-reward-tag {
  font-size: var(--font-caption);
  font-weight: var(--weight-semibold);
  padding: 2px 10px;
  border-radius: var(--radius-full);
  background: rgba(255,212,59,0.15);
  color: #B58900;
}

.v36-challenge-body {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  padding-left: 0;
}

.v36-challenge-name {
  font-size: var(--font-subtitle);
  font-weight: var(--weight-bold);
  color: var(--text-primary);
  font-family: var(--font-family-heading);
}

.v36-challenge-desc {
  font-size: var(--font-caption);
  color: var(--text-hint);
  line-height: 1.4;
}

.v36-challenge-bottom-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.v36-challenge-countdown {
  font-size: var(--font-body-sm);
  font-weight: var(--weight-semibold);
  color: var(--color-purple);
  background: rgba(180,167,246,0.1);
  padding: 3px 12px;
  border-radius: var(--radius-full);
}
.v36-challenge-countdown-expired {
  color: var(--danger);
  background: rgba(255,82,82,0.08);
}

.v36-challenge-go {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  flex-shrink: 0;
}

.v36-challenge-go-text {
  font-size: var(--font-body-sm);
  font-weight: var(--weight-semibold);
  color: var(--color-orange);
}

.v36-challenge-go-arrow {
  font-size: var(--font-body);
  color: var(--color-orange);
}

.v36-challenge-partner-hint {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: var(--space-3);
  margin-top: var(--space-2);
  cursor: pointer;
  transition: all var(--transition-base);
  -webkit-tap-highlight-color: transparent;
}

.v36-challenge-partner-hint:active {
  opacity: 0.7;
}

.v36-challenge-hint-icon {
  font-size: 1.2rem;
}

.v36-challenge-hint-text {
  font-size: var(--font-body-sm);
  color: var(--text-hint);
  font-weight: var(--weight-medium);
}

.v36-challenge-hint-arrow {
  font-size: var(--font-body-sm);
  color: var(--text-hint);
}

/* ---- v3.6: 共创三态入口 (v36-coc-*) ---- */

.v36-coc-entry {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-5);
  border-radius: var(--radius-2xl);
  box-shadow: var(--shadow-clay);
  border: 1px solid rgba(255,255,255,0.5);
  transition: all var(--transition-spring);
  cursor: pointer;
}

.v36-coc-entry:active {
  transform: scale(0.98);
}

.v36-coc-idle {
  background: linear-gradient(135deg, rgba(237,231,255,0.3), rgba(255,255,255,0.8));
}

.v36-coc-enter, .v36-coc-invited {
  background: rgba(255,255,255,0.95);
}

.v36-coc-active {
  background: linear-gradient(135deg, rgba(105,219,124,0.08), rgba(255,255,255,0.9));
  border-color: rgba(105,219,124,0.2);
}

.v36-coc-icon {
  font-size: 2.2rem;
  flex-shrink: 0;
}

.v36-coc-text {
  flex: 1;
  min-width: 0;
}

.v36-coc-title {
  font-size: var(--font-body);
  font-weight: var(--weight-bold);
  color: var(--text-primary);
  margin-bottom: 2px;
}

.v36-coc-desc {
  font-size: var(--font-caption);
  color: var(--text-hint);
  line-height: 1.4;
}

.v36-coc-arrow {
  font-size: var(--font-body);
  color: var(--text-hint);
  flex-shrink: 0;
}

.v36-coc-actions {
  display: flex;
  gap: var(--space-2);
  flex-shrink: 0;
}

.v36-coc-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-2) var(--space-4);
  min-height: 40px;
  border: none;
  border-radius: var(--radius-2xl);
  font-size: var(--font-body-sm);
  font-weight: var(--weight-bold);
  cursor: pointer;
  transition: all var(--transition-spring);
  font-family: inherit;
  white-space: nowrap;
}

.v36-coc-btn:active {
  transform: scale(0.94);
}

.v36-coc-btn-enter {
  background: var(--gradient-warm);
  color: #FFF;
  box-shadow: var(--shadow-glow-pink);
}

.v36-coc-btn-invite {
  background: #FFFFFF;
  color: var(--color-purple);
  border: 2px solid rgba(180,167,246,0.2);
  box-shadow: var(--shadow-clay-sm);
}

.v36-coc-btn-cancel {
  background: rgba(239,68,68,0.06);
  color: #EF4444;
  border: 1px solid rgba(239,68,68,0.15);
}

/* ---- v3.6: AI 教练建议 (v36-coach-*) ---- */

.v36-coach-card {
  background: #FFFFFF;
  border-radius: var(--radius-2xl);
  padding: var(--space-5);
  box-shadow: var(--shadow-clay);
  border: 1px solid rgba(255,255,255,0.5);
  cursor: pointer;
  transition: all var(--transition-spring);
}

.v36-coach-card:active {
  transform: scale(0.98);
}

.v36-coach-header {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: var(--space-3);
}

.v36-coach-icon {
  font-size: 1.3rem;
}

.v36-coach-title {
  font-size: var(--font-body);
  font-weight: var(--weight-bold);
  color: var(--text-primary);
}

.v36-coach-text {
  font-size: var(--font-body);
  color: var(--text-secondary);
  line-height: 1.7;
  margin-bottom: var(--space-3);
}

.v36-coach-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.v36-coach-tts-btn {
  font-size: 1.2rem;
  cursor: pointer;
  padding: var(--space-1);
  border-radius: var(--radius-round);
  transition: all var(--transition-base);
  user-select: none;
}

.v36-coach-tts-btn:active {
  transform: scale(1.2);
  background: rgba(180,167,246,0.1);
}

.v36-coach-hint {
  font-size: var(--font-caption);
  color: var(--color-blue);
  font-weight: var(--weight-semibold);
}

/* ---- v3.6: 统计行 (v36-stats-*) ---- */

.v36-stats-row {
  display: flex;
  justify-content: center;
  gap: var(--space-3);
  margin-bottom: var(--space-4);
}

.v36-stats-card {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-1);
  padding: var(--space-3) var(--space-2);
  background: #FFFFFF;
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-clay-sm);
  border: 1px solid rgba(255,255,255,0.5);
}

.v36-stats-num {
  font-size: var(--font-title-sm);
  font-weight: var(--weight-extrabold);
  color: var(--color-orange);
  line-height: 1;
}

.v36-stats-label {
  font-size: var(--font-caption);
  color: var(--text-hint);
  font-weight: var(--weight-medium);
}

/* ================================================================
   v4.0: 意图细化 (Refinement) 组件样式
   ================================================================ */

/* ---- 细化气泡容器 ---- */
.refinement-bubble {
  background: #FFF8E1;
  border-radius: 16px;
  padding: 12px 16px;
  margin: 8px 0;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
  animation: messageSlideIn 0.35s ease-out;
}

.refinement-text {
  font-size: var(--font-body);
  color: var(--text-primary);
  line-height: 1.7;
  margin-bottom: 8px;
}

/* 阶段标题 / 问题 */
.refinement-stage-header {
  font-size: var(--font-subtitle);
  font-weight: var(--weight-extrabold);
  color: var(--text-primary);
  margin-bottom: 12px;
  line-height: 1.5;
}

/* ---- 选项网格 ---- */
.refinement-option-grid {
  display: grid;
  gap: 10px;
  margin: 12px 0;
}

/* 单个选项按钮 — 粘土风格大按钮 */
.refinement-option-chip {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 14px 10px;
  background: #FFFFFF;
  border: 2px solid #E8E0D0;
  border-radius: 14px;
  cursor: pointer;
  transition: transform 0.15s, box-shadow 0.15s;
  font-size: var(--font-body);
  min-height: 52px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.08);
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  gap: 6px;
}

.refinement-option-chip:active {
  transform: scale(0.95);
  box-shadow: 0 1px 2px rgba(0,0,0,0.12);
}

/* 高亮选项 */
.refinement-option-chip.highlight {
  border-color: #FF9800;
  background: #FFF3E0;
  box-shadow: 0 2px 8px rgba(255,152,0,0.3);
  animation: pulse-highlight 1.5s infinite;
}

@keyframes pulse-highlight {
  0%, 100% { box-shadow: 0 2px 8px rgba(255,152,0,0.3); }
  50% { box-shadow: 0 2px 16px rgba(255,152,0,0.5); }
}

/* 选项内 emoji */
.option-emoji {
  font-size: 22px;
  line-height: 1;
}

/* 选项文本 */
.option-label {
  font-weight: var(--weight-semibold);
  color: var(--text-primary);
  line-height: 1.2;
}

/* 跳过选项 */
.refinement-option-chip.skip-option {
  background: #F5F5F5;
  border-style: dashed;
  border-color: #CCC;
  color: #6A6A6A;
}

.refinement-option-chip.skip-option .option-label {
  color: #6A6A6A;
  font-size: var(--font-body-sm);
}

/* ---- 进度指示器 ---- */
.refinement-progress-bar {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 4px;
  margin-top: 12px;
  padding: 8px 0;
}

/* 进度圆点 */
.rfn-progress-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #DDD;
  transition: all var(--transition-base);
  flex-shrink: 0;
}

.rfn-progress-dot.active {
  background: #FF9800;
  width: 28px;
  border-radius: 5px;
}

.rfn-progress-dot.done {
  background: #4CAF50;
}

/* 进度连线 */
.rfn-progress-line {
  width: 20px;
  height: 3px;
  background: #DDD;
  border-radius: 2px;
  transition: all var(--transition-base);
}

.rfn-progress-line.done {
  background: #4CAF50;
}

/* ---- 预览气泡 ---- */
.preview-bubble {
  background: linear-gradient(135deg, #FFE0B2, #FFCC80);
  border-radius: 16px;
  padding: 16px;
  margin: 8px 0;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
  animation: messageSlideIn 0.35s ease-out;
}

.preview-summary {
  font-size: var(--font-heading);
  font-weight: var(--weight-extrabold);
  color: #E65100;
  margin-bottom: 8px;
  text-align: center;
  line-height: 1.4;
}

.preview-prompt-detail {
  font-size: var(--font-body-sm);
  color: #795548;
  text-align: center;
  margin-bottom: 16px;
  line-height: 1.6;
}

/* 预览操作按钮组 */
.preview-actions {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.go-create-btn {
  background: #FF9800;
  color: white;
  border: none;
  border-radius: 24px;
  padding: 14px 24px;
  font-size: 18px;
  font-weight: var(--weight-bold);
  cursor: pointer;
  box-shadow: 0 4px 12px rgba(255,152,0,0.4);
  transition: transform 0.15s;
  width: 100%;
}

.go-create-btn:active {
  transform: scale(0.96);
}

.secondary-btn {
  background: white;
  color: #666;
  border: 1px solid #DDD;
  border-radius: 20px;
  padding: 10px 20px;
  font-size: var(--font-body);
  cursor: pointer;
  transition: transform 0.15s;
  width: 100%;
}

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

/* ---- 底部快捷栏（细化模式） ---- */
.refinement-bottom-bar {
  margin: var(--space-2) var(--space-3);
  padding: var(--space-3) var(--space-4);
  background: #FFFFFF;
  border-radius: var(--radius-2xl);
  box-shadow: var(--shadow-clay-floating);
  border: 1px solid rgba(255,255,255,0.6);
  animation: slideUp 0.3s ease-out;
}

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

.refinement-bottom-progress {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 4px;
  margin-bottom: 12px;
}

.refinement-bottom-actions {
  display: flex;
  gap: 10px;
}

/* 底部 "去创作" 按钮 */
.rfn-go-create-btn {
  flex: 1;
  background: #FF9800;
  color: white;
  border: none;
  border-radius: 24px;
  padding: 12px 20px;
  font-size: 16px;
  font-weight: var(--weight-bold);
  cursor: pointer;
  box-shadow: 0 4px 12px rgba(255,152,0,0.35);
  transition: transform 0.15s;
  min-height: 48px;
}

.rfn-go-create-btn:active {
  transform: scale(0.96);
}

/* 底部 "再想想" 按钮 */
.rfn-rethink-btn {
  flex: 1;
  background: white;
  color: #666;
  border: 1px solid #DDD;
  border-radius: 24px;
  padding: 12px 20px;
  font-size: 16px;
  cursor: pointer;
  transition: transform 0.15s;
  min-height: 48px;
}

.rfn-rethink-btn:active {
  transform: scale(0.96);
}

/* 底部进度圆点（复用上面定义） */
.refinement-bottom-bar .rfn-progress-dot {
  width: 8px;
  height: 8px;
}

.refinement-bottom-bar .rfn-progress-dot.active {
  width: 20px;
}

/* ---- 响应式适配 ---- */

/* 3列网格在小屏自动降为2列 */
@media (max-width: 360px) {
  .refinement-option-grid {
    grid-template-columns: 1fr 1fr !important;
  }
}

/* 大屏优化 */
@media (min-width: 480px) {
  .refinement-option-grid {
    gap: 12px;
  }
  .refinement-option-chip {
    padding: 16px 12px;
    min-height: 56px;
    font-size: var(--font-subtitle);
  }
}

/* 暗色模式适配 */
body.dark-mode .refinement-bubble {
  background: #3A3A30;
}
body.dark-mode .refinement-stage-header {
  color: #EEE;
}
body.dark-mode .refinement-option-chip {
  background: #4A4A40;
  border-color: #666;
  color: #EEE;
}
body.dark-mode .refinement-option-chip .option-label {
  color: #EEE;
}
body.dark-mode .refinement-option-chip.skip-option {
  background: #3A3A35;
  border-color: #555;
}
body.dark-mode .refinement-bottom-bar {
  background: #3A3A35;
}
body.dark-mode .rfn-rethink-btn {
  background: #4A4A40;
  color: #CCC;
  border-color: #555;
}
body.dark-mode .preview-bubble {
  background: linear-gradient(135deg, #5A4030, #6A5040);
}
body.dark-mode .preview-summary {
  color: #FFB74D;
}
body.dark-mode .preview-prompt-detail {
  color: #BBA;
}

/* ============================================================
   Challenge v4 UX 重构 — 引导横幅·进度卡片·挑战折叠·庆祝弹窗
   风格：Claymorphism · 儿童友好
   版本：2026-06-05
   ============================================================ */

/* ---- 页面引导横幅 ---- */
.cv4-intro-banner {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-5) var(--space-6);
  background: linear-gradient(135deg, #FFF5F7, #FFF);
  border-radius: var(--radius-2xl);
  box-shadow: var(--shadow-clay);
  border: 2px solid rgba(255,143,163,0.15);
  margin-bottom: var(--space-4);
}
.cv4-intro-icon {
  font-size: 2.8rem;
  line-height: 1;
  animation: cv4Float 3s ease-in-out infinite;
}
.cv4-intro-text {
  flex: 1;
}
.cv4-intro-title {
  font-size: var(--font-subtitle);
  font-weight: var(--weight-extrabold);
  color: var(--text-primary);
  line-height: 1.3;
}
.cv4-intro-subtitle {
  font-size: var(--font-body-sm);
  color: var(--text-hint);
  margin-top: 2px;
}

/* ---- 挑战进度卡片 ---- */
.cv4-progress-card {
  display: flex;
  align-items: center;
  justify-content: space-around;
  padding: var(--space-4) var(--space-3);
  background: linear-gradient(135deg, #F8F0FF, #F0F8FF);
  border-radius: var(--radius-2xl);
  box-shadow: var(--shadow-clay);
  border: 2px solid rgba(180,167,246,0.12);
  margin-bottom: var(--space-5);
  gap: var(--space-1);
}
.cv4-progress-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  flex: 1;
}
.cv4-progress-num {
  font-size: 1.5rem;
  font-weight: var(--weight-extrabold);
  color: #6C5CE7;
  line-height: 1.2;
}
.cv4-progress-label {
  font-size: var(--font-caption);
  color: var(--text-hint);
  font-weight: var(--weight-semibold);
  text-align: center;
  white-space: nowrap;
}
.cv4-progress-divider {
  width: 1px;
  height: 32px;
  background: linear-gradient(180deg, transparent, rgba(108,92,231,0.2), transparent);
  flex-shrink: 0;
}

/* ---- 每日挑战增强 ---- */
.cv4-daily-inprogress {
  border-color: rgba(255,169,77,0.5) !important;
  box-shadow: var(--shadow-glow-orange), var(--shadow-clay-raised) !important;
}
.cv4-daily-inprogress-badge {
  position: absolute;
  top: 8px;
  right: 8px;
  font-size: 12px;
  font-weight: var(--weight-bold);
  color: #E65100;
  background: linear-gradient(135deg, #FFF0E0, #FFE8D0);
  padding: 3px 10px;
  border-radius: var(--radius-full);
  z-index: 2;
  box-shadow: 0 1px 4px rgba(255,169,77,0.2);
  animation: cv4Pulse 2s ease-in-out infinite;
}
.cv4-daily-step-preview {
  font-size: var(--font-caption);
  color: var(--text-hint);
  text-align: center;
  padding: 4px 12px;
  background: linear-gradient(135deg, #F5F5FF, #FAFAFF);
  border-radius: var(--radius-lg);
  margin: 0 var(--space-4) var(--space-2);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.cv4-daily-dim-score {
  display: block;
  text-align: center;
  font-size: var(--font-caption);
  color: #6C5CE7;
  font-weight: var(--weight-semibold);
  padding: 3px 0;
  margin: 0 var(--space-4);
}
.cv4-daily-dim-score strong {
  color: #FF8FA3;
}
.cv4-step-dot-active {
  background: #FFA94D !important;
  color: #FFF !important;
  box-shadow: 0 0 8px rgba(255,169,77,0.5) !important;
}

/* ---- 挑战系列折叠 ---- */
.cv4-series-toggle-wrap {
  text-align: center;
  margin-top: var(--space-2);
}
.cv4-series-toggle-btn {
  background: transparent;
  border: 2px solid rgba(180,167,246,0.25);
  border-radius: var(--radius-full);
  padding: 8px 24px;
  font-size: var(--font-body-sm);
  font-weight: var(--weight-semibold);
  color: #6C5CE7;
  cursor: pointer;
  transition: all var(--transition-spring);
  font-family: inherit;
  -webkit-tap-highlight-color: transparent;
}
.cv4-series-toggle-btn:active {
  transform: scale(0.95);
  background: rgba(180,167,246,0.1);
}
.cv4-series-toggle-btn:hover {
  border-color: #B4A7F6;
  background: rgba(180,167,246,0.08);
}
.cv4-series-active {
  border-color: #FFA94D !important;
  box-shadow: 0 0 0 2px rgba(255,169,77,0.2), var(--shadow-clay-raised) !important;
  animation: cv4ActivePulse 2s ease-in-out infinite;
}
.cv4-series-active-badge {
  position: absolute;
  top: var(--space-2);
  left: var(--space-3);
  font-size: 12px;
  font-weight: var(--weight-bold);
  color: #E65100;
  background: linear-gradient(135deg, #FFF0E0, #FFE8D0);
  padding: 2px 10px;
  border-radius: var(--radius-full);
  z-index: 3;
  box-shadow: 0 1px 4px rgba(255,169,77,0.2);
}
@keyframes cv4ActivePulse {
  0%, 100% { box-shadow: 0 0 0 2px rgba(255,169,77,0.2), var(--shadow-clay-raised); }
  50% { box-shadow: 0 0 0 4px rgba(255,169,77,0.3), var(--shadow-clay-raised); }
}

/* ---- 挑战网格折叠 ---- */
.cv4-grid-toggle-wrap {
  text-align: center;
  margin-top: var(--space-3);
}
.cv4-grid-toggle-btn {
  background: transparent;
  border: 2px dashed rgba(180,167,246,0.3);
  border-radius: var(--radius-full);
  padding: 10px 28px;
  font-size: var(--font-body-sm);
  font-weight: var(--weight-semibold);
  color: #6C5CE7;
  cursor: pointer;
  transition: all var(--transition-spring);
  font-family: inherit;
  width: 100%;
  max-width: 320px;
  -webkit-tap-highlight-color: transparent;
}
.cv4-grid-toggle-btn:active {
  transform: scale(0.95);
  background: rgba(180,167,246,0.08);
}
.cv4-grid-toggle-btn:hover {
  border-style: solid;
  border-color: #B4A7F6;
  background: rgba(180,167,246,0.06);
}

/* ---- 庆祝弹窗 ---- */
.cv4-celebration-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.45);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10000;
  opacity: 0;
  transition: opacity 0.35s ease;
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
}
.cv4-celebration-card {
  background: linear-gradient(145deg, #FFF, #FFF9F5, #FFF5F7);
  border-radius: var(--radius-3xl, 24px);
  padding: var(--space-8) var(--space-6);
  max-width: 340px;
  width: 90%;
  text-align: center;
  box-shadow: var(--shadow-clay-floating), 0 8px 40px rgba(255,143,163,0.15);
  border: 2.5px solid rgba(255,143,163,0.2);
  transform: scale(0.85);
  transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
  position: relative;
}
.cv4-celebration-emoji {
  font-size: 3.5rem;
  margin-bottom: var(--space-3);
  animation: cv4Bounce 0.6s ease-out;
}
.cv4-celebration-title {
  font-size: var(--font-heading, 1.5rem);
  font-weight: var(--weight-extrabold);
  color: #FF8FA3;
  margin-bottom: var(--space-2);
}
.cv4-celebration-message {
  font-size: var(--font-body);
  color: var(--text-primary);
  margin-bottom: var(--space-1);
  line-height: 1.5;
  font-weight: var(--weight-semibold);
}
.cv4-celebration-score {
  font-size: var(--font-subtitle);
  font-weight: var(--weight-bold);
  color: #6C5CE7;
  margin: var(--space-3) 0 var(--space-5);
  padding: var(--space-2) var(--space-4);
  background: linear-gradient(135deg, #EDE7FF, #F5F0FF);
  border-radius: var(--radius-xl);
  display: inline-block;
}
.cv4-celebration-actions {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
.cv4-celebration-actions .cv4-btn-start {
  width: 100%;
  justify-content: center;
  font-size: var(--font-body);
  padding: var(--space-3) var(--space-6);
}
.cv4-celebration-actions .cv4-btn-secondary {
  width: 100%;
  justify-content: center;
  font-size: var(--font-body);
  padding: var(--space-3) var(--space-6);
}
.cv4-celebration-close {
  position: absolute;
  top: var(--space-3);
  right: var(--space-3);
  background: transparent;
  border: none;
  font-size: 1.4rem;
  color: var(--text-hint);
  cursor: pointer;
  padding: var(--space-1);
  line-height: 1;
  border-radius: 50%;
  transition: background var(--transition-fast);
  -webkit-tap-highlight-color: transparent;
}
.cv4-celebration-close:active {
  background: rgba(0,0,0,0.06);
}
.cv4-celebration-fadeout {
  opacity: 0 !important;
  transition: opacity 0.3s ease;
}

/* Celebration animations */
@keyframes cv4Bounce {
  0% { transform: scale(0); opacity: 0; }
  50% { transform: scale(1.2); }
  70% { transform: scale(0.95); }
  100% { transform: scale(1); opacity: 1; }
}

/* Dark mode */
body.dark-mode .cv4-intro-banner {
  background: linear-gradient(135deg, #2D2530, #272741);
  border-color: rgba(255,143,163,0.1);
}
body.dark-mode .cv4-progress-card {
  background: linear-gradient(135deg, #252545, #252535);
  border-color: rgba(180,167,246,0.1);
}
body.dark-mode .cv4-progress-num {
  color: #B4A7F6;
}
body.dark-mode .cv4-celebration-card {
  background: linear-gradient(145deg, #272741, #252535, #2D2530);
  border-color: rgba(255,143,163,0.12);
}
body.dark-mode .cv4-celebration-score {
  background: linear-gradient(135deg, #2D2542, #252035);
  color: #B4A7F6;
}
body.dark-mode .cv4-celebration-close {
  color: #AAA;
}
body.dark-mode .cv4-daily-step-preview {
  background: rgba(255,255,255,0.05);
}
body.dark-mode .cv4-series-toggle-btn {
  color: #B4A7F6;
  border-color: rgba(180,167,246,0.2);
}
body.dark-mode .cv4-series-toggle-btn:hover {
  background: rgba(180,167,246,0.1);
}
body.dark-mode .cv4-grid-toggle-btn {
  color: #B4A7F6;
  border-color: rgba(180,167,246,0.15);
}

/* ========== Bug B: Challenge Prompt Overlay ========== */
.challenge-prompt-overlay {
  position: fixed;
  inset: 0;
  z-index: 10000;
  background: rgba(0, 0, 0, 0.45);
  display: flex;
  align-items: center;
  justify-content: center;
  animation: fadeIn 0.2s ease;
}

.challenge-prompt-card {
  background: #fff;
  border-radius: 20px;
  padding: var(--space-6) var(--space-5);
  max-width: 320px;
  width: 88%;
  text-align: center;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15);
  animation: scaleIn 0.25s ease;
}

.challenge-prompt-emoji {
  font-size: 3rem;
  margin-bottom: var(--space-2);
}

.challenge-prompt-title {
  font-size: var(--font-subtitle);
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: var(--space-1);
}

.challenge-prompt-name {
  font-size: var(--font-body-sm);
  color: var(--text-secondary);
  margin-bottom: var(--space-4);
  line-height: 1.5;
}

.challenge-prompt-actions {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.challenge-prompt-actions .cv4-btn {
  width: 100%;
  padding: var(--space-3) var(--space-4);
  font-size: var(--font-body);
  border-radius: var(--radius-md);
  border: none;
  cursor: pointer;
  font-weight: 600;
  transition: transform 0.15s, box-shadow 0.15s;
}

.challenge-prompt-actions .cv4-btn:active {
  transform: scale(0.97);
}

/* cv4-btn-ghost (light, no border) */
.cv4-btn-ghost {
  background: transparent;
  color: var(--text-tertiary, #999);
  font-size: var(--font-body-sm);
}
.cv4-btn-ghost:hover {
  color: var(--text-secondary);
  background: rgba(0, 0, 0, 0.04);
}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes scaleIn {
  from { transform: scale(0.85); opacity: 0; }
  to { transform: scale(1); opacity: 1; }
}

body.dark-mode .challenge-prompt-card {
  background: #2a2a3a;
}
body.dark-mode .challenge-prompt-title {
  color: #e8e8f0;
}
body.dark-mode .challenge-prompt-name {
  color: #b0b0c0;
}
body.dark-mode .cv4-btn-ghost {
  color: #6A6A6A8aa;
}
body.dark-mode .cv4-btn-ghost:hover {
  background: rgba(255, 255, 255, 0.06);
}

/* @NOTE: 此区段与 dark-mode.css 内容部分重复，但为 style.css 内联版本，保留作为 fallback。 */
/* ==================== 深色模式全面覆盖 ==================== */
body.dark-mode {
  --bg-primary: #1a1a2e;
  --bg-secondary: #16213e;
  --bg-card: #1e1e36;
  --text-primary: #e8e8f0;
  --text-secondary: #b0b0c0;
  --text-tertiary: #808098;
  --border-color: #2a2a44;
}

body.dark-mode .page {
  background: var(--bg-primary);
  color: var(--text-primary);
}

body.dark-mode .page-dialog,
body.dark-mode .page-drawing,
body.dark-mode .page-story,
body.dark-mode .page-challenge,
body.dark-mode .page-gallery,
body.dark-mode .page-profile-v31,
body.dark-mode .page-dashboard,
body.dark-mode .page-achievement,
body.dark-mode .page-invite,
body.dark-mode .page-login,
body.dark-mode .page-bind-phone,
body.dark-mode .page-subscribe,
body.dark-mode .page-create-profile,
body.dark-mode .page-report,
body.dark-mode .page-diary,
body.dark-mode .page-co-creation,
body.dark-mode .page-doodle,
body.dark-mode .page-settings,
body.dark-mode .page-reset-password,
body.dark-mode .page-create-drawing,
body.dark-mode .page-create-story {
  background: var(--bg-primary);
}

body.dark-mode .dialog-container,
body.dark-mode .dlg-bar-fixed,
body.dark-mode .dlg-input-bar,
body.dark-mode .dash-card,
body.dark-mode .pfl-clay-menu-list,
body.dark-mode .pfl-clay-user-card,
body.dark-mode .pfl-clay-add-card,
body.dark-mode .inv-clay-stats-card,
body.dark-mode .inv-clay-code-card,
body.dark-mode .inv-clay-hero,
body.dark-mode .achievement-card,
body.dark-mode .bp-body,
body.dark-mode .bph-clay-card,
body.dark-mode .challenge-card,
body.dark-mode .story-card,
body.dark-mode .gallery-item,
body.dark-mode .profile-membership-card,
body.dark-mode .dash-hero,
body.dark-mode .dash-banner,
body.dark-mode .dash-back-child-btn,
body.dark-mode .profile-logout-btn,
body.dark-mode .subscribe-card,
body.dark-mode .diary-card,
body.dark-mode .co-creation-card,
body.dark-mode .report-card {
  background: var(--bg-card);
  color: var(--text-primary);
  box-shadow: 0 4rpx 24rpx rgba(0,0,0,0.2);
}

body.dark-mode .dialog-messages {
  background: var(--bg-primary);
}

body.dark-mode .msg-bubble.bubble-left {
  background: #2a2a44;
  color: var(--text-primary);
}

body.dark-mode .msg-bubble.bubble-right {
  background: #3a3a5a;
  color: var(--text-primary);
}

body.dark-mode .dlg-input {
  background: #2a2a44;
  color: var(--text-primary);
  border-color: #3a3a5a;
}

body.dark-mode .dlg-clay-bar {
  background: var(--bg-card);
  border-bottom-color: #2a2a44;
}

body.dark-mode .pfl-clay-menu-item {
  border-bottom-color: #2a2a44;
}

body.dark-mode .pfl-clay-menu-label {
  color: var(--text-primary);
}

body.dark-mode .pfl-clay-menu-value {
  color: var(--text-tertiary);
}

body.dark-mode .section-title {
  color: var(--text-secondary);
}

body.dark-mode .dash-card-header {
  border-bottom-color: #2a2a44;
}

body.dark-mode .dash-card-title {
  color: var(--text-primary);
}

body.dark-mode .dash-trend-btn {
  background: #2a2a44;
  color: var(--text-tertiary);
}

body.dark-mode .dash-trend-btn.active {
  background: #667eea;
  color: #fff;
}

body.dark-mode .dash-trend-label {
  color: var(--text-secondary);
}

body.dark-mode .dash-detail-label {
  color: var(--text-secondary);
}

body.dark-mode .dash-detail-bar-bg {
  background: #2a2a44;
}

body.dark-mode .dash-insight-text {
  color: var(--text-secondary);
}

body.dark-mode .dash-artwork-title {
  color: var(--text-secondary);
}

body.dark-mode .dash-sug-title {
  color: var(--text-primary);
}

body.dark-mode .dash-sug-desc {
  color: var(--text-tertiary);
}

body.dark-mode .dash-cohistory-theme {
  color: var(--text-primary);
}

body.dark-mode .dash-cohistory-date {
  color: var(--text-tertiary);
}

body.dark-mode .inv-clay-stat-val {
  color: var(--text-primary);
}

body.dark-mode .inv-clay-stat-lbl {
  color: var(--text-tertiary);
}

body.dark-mode .inv-clay-code-label {
  color: var(--text-secondary);
}

body.dark-mode .inv-clay-code-value {
  color: var(--text-primary);
  background: #2a2a44;
}

body.dark-mode .inv-clay-record {
  border-bottom-color: #2a2a44;
}

body.dark-mode .inv-clay-record-name {
  color: var(--text-primary);
}

body.dark-mode .achievement-summary .summary-item {
  background: var(--bg-card);
}

body.dark-mode .achievement-summary .summary-num {
  color: var(--text-primary);
}

body.dark-mode .achievement-summary .summary-label {
  color: var(--text-tertiary);
}

body.dark-mode .achievement-name {
  color: var(--text-primary);
}

body.dark-mode .achievement-desc {
  color: var(--text-tertiary);
}

body.dark-mode .empty-state-title {
  color: var(--text-primary);
}

body.dark-mode .empty-state-desc {
  color: var(--text-tertiary);
}

body.dark-mode .challenge-prompt-card {
  background: var(--bg-card);
}

body.dark-mode .challenge-prompt-title {
  color: var(--text-primary);
}

body.dark-mode .challenge-prompt-name {
  color: var(--text-secondary);
}

body.dark-mode .challenge-series-title {
  color: var(--text-primary);
}

body.dark-mode .challenge-series-desc {
  color: var(--text-secondary);
}

body.dark-mode .story-theme {
  background: var(--bg-card);
  color: var(--text-primary);
}

body.dark-mode .story-theme.active {
  background: linear-gradient(135deg, #667eea, #764ba2);
  color: #fff;
}

body.dark-mode .gallery-filter-chip {
  background: #2a2a44;
  color: var(--text-secondary);
}

body.dark-mode .gallery-filter-chip.active {
  background: linear-gradient(135deg, #667eea, #764ba2);
  color: #fff;
}

body.dark-mode .gallery-item-title {
  color: var(--text-primary);
}

body.dark-mode .gallery-item-date {
  color: var(--text-tertiary);
}

body.dark-mode .partner-quick-cards .quick-card {
  background: var(--bg-card);
  color: var(--text-primary);
}

body.dark-mode .toast {
  background: #2a2a44;
  color: var(--text-primary);
}

body.dark-mode .skeleton-shimmer {
  background: linear-gradient(90deg, #2a2a44 25%, #3a3a5a 50%, #2a2a44 75%);
}

body.dark-mode .dlg-clear-btn {
  color: var(--text-secondary);
}

body.dark-mode .dlg-clay-name {
  color: var(--text-primary);
}

body.dark-mode .dlg-clay-status {
  color: var(--text-tertiary);
}

body.dark-mode .dash-hero-title-hero {
  color: var(--text-primary);
}

body.dark-mode .dash-h…hero {
  color: var(--text-secondary);
}

body.dark-mode .dash-empty-chart-text {
  color: var(--text-tertiary);
}

body.dark-mode .dash-milestone-encourage {
  background: #2a2a44;
  color: var(--text-secondary);
}

body.dark-mode .dash-mile-grid-name {
  color: var(--text-primary);
}

body.dark-mode .dash-mile-grid-name.dim {
  color: var(--text-tertiary);
}

body.dark-mode .dash-cohistory-item {
  border-bottom-color: #2a2a44;
}

body.dark-mode .dash-suggestion-item {
  border-bottom-color: #2a2a44;
}

body.dark-mode .dash-trend-empty {
  color: var(--text-tertiary);
}

body.dark-mode .dash-trend-loading {
  color: var(--text-tertiary);
}

body.dark-mode .dash-loading-text {
  color: var(--text-tertiary);
}

body.dark-mode .dash-error-title {
  color: var(--text-primary);
}

body.dark-mode .dash-error-desc {
  color: var(--text-tertiary);
}

body.dark-mode .dash-empty-title {
  color: var(--text-primary);
}

body.dark-mode .dash-empty-desc {
  color: var(--text-tertiary);
}

body.dark-mode .inv-clay-hero-title {
  color: var(--text-primary);
}

body.dark-mode .inv-clay-hero-desc {
  color: var(--text-secondary);
}

body.dark-mode .inv-clay-records-title {
  color: var(--text-primary);
}

body.dark-mode .inv-clay-record-status {
  color: var(--text-secondary);
}

body.dark-mode .bph-clay-desc {
  color: var(--text-secondary);
}

body.dark-mode .form-label {
  color: var(--text-secondary);
}

body.dark-mode .bph-clay-input {
  background: #2a2a44;
  color: var(--text-primary);
  border-color: #3a3a5a;
}

body.dark-mode .profile-membership-title {
  color: #ffd700;
}

body.dark-mode .profile-membership-desc {
  color: #b8860b;
}

body.dark-mode .subscribe-card {
  border-color: #2a2a44;
}

body.dark-mode .subscribe-price {
  color: var(--text-primary);
}

body.dark-mode .subscribe-desc {
  color: var(--text-secondary);
}

body.dark-mode .diary-entry-title {
  color: var(--text-primary);
}

body.dark-mode .diary-entry-date {
  color: var(--text-tertiary);
}

body.dark-mode .diary-entry-preview {
  color: var(--text-secondary);
}

body.dark-mode .co-creation-card-title {
  color: var(--text-primary);
}

body.dark-mode .co-creation-card-desc {
  color: var(--text-secondary);
}

body.dark-mode .report-card-title {
  color: var(--text-primary);
}

body.dark-mode .report-card-date {
  color: var(--text-tertiary);
}

body.dark-mode .report-card-score {
  color: var(--text-primary);
}

body.dark-mode .pfl-clay-user-name {
  color: var(--text-primary);
}

body.dark-mode .pfl-clay-user-meta {
  color: var(--text-tertiary);
}

body.dark-mode .pfl-profile-chip {
  background: var(--bg-card);
}

body.dark-mode .pfl-profile-chip.active {
  border-color: #667eea;
}

body.dark-mode .pfl-profile-chip-name {
  color: var(--text-primary);
}

body.dark-mode .profile-mode-tab {
  background: var(--bg-card);
}

body.dark-mode .profile-mode-tab--active {
  border-color: #667eea;
}

body.dark-mode .profile-mode-tab-label {
  color: var(--text-secondary);
}

body.dark-mode .profile-mode-tab--active .profile-mode-tab-label {
  color: #667eea;
}

body.dark-mode .dash-header-title {
  color: var(--text-primary);
}

body.dark-mode .dash-header-subtitle {
  color: var(--text-secondary);
}

body.dark-mode .dash-progress-ring-label {
  color: var(--text-tertiary);
}

body.dark-mode .dash-insight-footer {
  color: var(--text-tertiary);
}

body.dark-mode .dash-banner-title {
  color: var(--text-primary);
}

body.dark-mode .dash-banner-desc {
  color: var(--text-secondary);
}

body.dark-mode .dash-free-lock-text {
  color: var(--text-secondary);
}

body.dark-mode .dash-locked-overlay {
  background: rgba(26, 26, 46, 0.9);
}

body.dark-mode .dash-card-badge {
  color: var(--text-secondary);
}

body.dark-mode .dash-badge {
  color: var(--text-secondary);
}

body.dark-mode .dash-tier-badge {
  color: var(--text-primary);
}

body.dark-mode .dash-tier-free {
  background: #2a2a44;
}

body.dark-mode .dash-tier-pro {
  background: #3a3a5a;
}

body.dark-mode .dash-dim-btn {
  background: #2a2a44;
  color: var(--text-tertiary);
}

body.dark-mode .dash-dim-btn.active {
  background: #667eea;
  color: #fff;
}

body.dark-mode .dash-trend-events {
  border-top-color: #2a2a44;
}

body.dark-mode .dash-event-item {
  color: var(--text-secondary);
}

body.dark-mode .dash-event-date {
  color: var(--text-tertiary);
}

body.dark-mode .dash-event-label {
  color: var(--text-primary);
}

body.dark-mode .dash-artwork-item {
  background: var(--bg-card);
}

body.dark-mode .dash-artwork-fallback {
  color: var(--text-tertiary);
}

body.dark-mode .dash-banner-report {
  background: #1e2e1e;
}

body.dark-mode .dash-cohistory-icon-wrap {
  background: #2a2a44;
}

body.dark-mode .dash-milestones-grid .dash-m…item.locked .dash-mile-grid-inner {
  background: #2a2a44 !important;
}

body.dark-mode .dash-milestones-grid .dash-m…item.unlocked .dash-mile-grid-inner {
  border-color: #3a3a5a;
}

body.dark-mode .dash-mile-grid-progress-bar {
  background: #3a3a5a;
}

body.dark-mode .dash-mile-grid-progress-fill {
  background: #667eea;
}

body.dark-mode .dash-progress-ring-bar-bg {
  background: #2a2a44;
}

body.dark-mode .dash-progress-ring-count {
  color: #fff;
}

body.dark-mode .dash-progress-ring-label {
  color: var(--text-tertiary);
}

body.dark-mode .dash-free-lock-trend .dash-f…text {
  color: var(--text-secondary);
  background: #2a2a44;
}

body.dark-mode .dash-free-lock .dash-f…text {
  color: var(--text-secondary);
  background: #2a2a44;
}

body.dark-mode .dash-empty-chart-icon {
  color: var(--text-tertiary);
}

body.dark-mode .dash-empty-chart-text {
  color: var(--text-tertiary);
}

body.dark-mode .dash-error-icon {
  color: var(--text-tertiary);
}

body.dark-mode .dash-error-title {
  color: var(--text-primary);
}

body.dark-mode .dash-error-desc {
  color: var(--text-tertiary);
}

body.dark-mode .dash-retry-btn {
  background: #667eea;
  color: #fff;
}

body.dark-mode .dash-back-child-btn {
  background: var(--bg-card);
  color: #667eea;
}

body.dark-mode .profile-logout-btn {
  color: #ff6b6b;
}

body.dark-mode .inv-clay-share-btn,
body.dark-mode .inv-clay-copy-link-btn {
  background: #2a2a44;
  color: var(--text-primary);
}

body.dark-mode .bph-clay-btn {
  background: linear-gradient(135deg, #667eea, #764ba2);
  color: #fff;
}

body.dark-mode .bp-header {
  background: var(--bg-card);
}

body.dark-mode .bp-title {
  color: var(--text-primary);
}

body.dark-mode .bp-back {
  color: var(--text-primary);
}

body.dark-mode .text-error {
  color: #ff6b6b;
}

body.dark-mode .inv-header {
  background: var(--bg-card);
}

body.dark-mode .inv-title {
  color: var(--text-primary);
}

body.dark-mode .inv-back {
  color: var(--text-primary);
}

body.dark-mode .achievement-header {
  background: var(--bg-card);
}

body.dark-mode .achievement-title {
  color: var(--text-primary);
}

body.dark-mode .achievement-back {
  color: var(--text-primary);
}

body.dark-mode .achievement-card.achieved {
  border-color: #667eea;
}

body.dark-mode .status-claimed {
  color: #52c41a;
}

body.dark-mode .status-unlocked {
  color: #ffa94d;
}

body.dark-mode .status-locked {
  color: var(--text-tertiary);
}

body.dark-mode .rare-badge {
  color: #ffd700;
}

body.dark-mode .login-section {
  background: var(--bg-card);
}

body.dark-mode .login-title {
  color: var(--text-primary);
}

body.dark-mode .login-desc {
  color: var(--text-tertiary);
}

body.dark-mode .modal-switch {
  color: var(--text-secondary);
}

body.dark-mode .modal-switch a {
  color: #667eea;
}

body.dark-mode .v31-menu-item {
  border-bottom-color: #2a2a44;
}

body.dark-mode .v31-menu-item .pfl-clay-menu-label {
  color: var(--text-primary);
}

body.dark-mode .v31-menu-item .pfl-clay-menu-value {
  color: var(--text-tertiary);
}

body.dark-mode .v31-menu-item .pfl-clay-menu-arrow {
  color: var(--text-tertiary);
}

body.dark-mode .pfl-clay-add-btn {
  background: linear-gradient(135deg, #667eea, #764ba2);
  color: #fff;
}

body.dark-mode .pfl-clay-add-card {
  border-color: #3a3a5a;
}

body.dark-mode .pfl-profile-chip-add {
  border-color: #3a3a5a;
}

body.dark-mode .pfl-profile-chip-add .pfl-profile-chip-name {
  color: var(--text-tertiary);
}

body.dark-mode .pfl-clay-avatar {
  background: #2a2a44;
}

body.dark-mode .profile-membership-card {
  background: #2a2a30;
  border-color: #3a3a40;
}

body.dark-mode .profile-membership-emoji {
  color: #ffd700;
}

body.dark-mode .profile-membership-arrow {
  color: #ffd700;
}

body.dark-mode .dash-progress-ring-percent {
  background: linear-gradient(135deg, #667eea, #764ba2);
}

body.dark-mode .dash-progress-ring-bar-fill {
  background: linear-gradient(90deg, #667eea, #764ba2);
}

body.dark-mode .dash-m…item.unlocked .dash-mile-grid-inner {
  background: #2a2a44 !important;
}

body.dark-mode .dash-m…item.locked .dash-mile-grid-inner.locked-bg {
  background: #1e1e36 !important;
}

body.dark-mode .dash-m…lock-icon {
  color: var(--text-tertiary);
}

body.dark-mode .dash-m…date {
  color: var(--text-tertiary);
}

body.dark-mode .dash-m…icon {
  color: var(--text-primary);
}

body.dark-mode .dash-milestone-encourage {
  background: #2a2a44;
  color: var(--text-secondary);
}

body.dark-mode .dash-cohistory-status.done {
  color: #52c41a;
}

body.dark-mode .dash-cohistory-status.pending {
  color: #ffa94d;
}

body.dark-mode .dash-banner {
  background: #2a2a30;
  border-color: #3a3a40;
}

body.dark-mode .dash-banner-report {
  background: #1e2e1e;
}

body.dark-mode .dash-banner-go {
  color: #667eea;
}

body.dark-mode .dash-suggestion-item {
  border-bottom-color: #2a2a44;
}

body.dark-mode .dash-sug-icon {
  color: var(--text-primary);
}

body.dark-mode .dash-artworks-grid .dash-artwork-item {
  background: var(--bg-card);
}

body.dark-mode .dash-artwork-img {
  background: #2a2a44;
}

body.dark-mode .dash-insight-card {
  background: var(--bg-card);
}

body.dark-mode .dash-trend-dimensions {
  border-top-color: #2a2a44;
}

body.dark-mode .dash-trend-container {
  background: var(--bg-card);
}

body.dark-mode .dash-trend-canvas {
  background: var(--bg-card);
}

body.dark-mode .dash-radar-container {
  background: var(--bg-card);
}

body.dark-mode .dash-radar-legend {
  color: var(--text-secondary);
}

body.dark-mode .dash-radar-legend-line {
  color: var(--text-tertiary);
}

body.dark-mode .dash-lock-badge {
  background: #2a2a44;
  color: var(--text-secondary);
}

body.dark-mode .dash-unlock-btn {
  background: linear-gradient(135deg, #667eea, #764ba2);
  color: #fff;
}

body.dark-mode .dash-empty-chart {
  background: var(--bg-card);
}

body.dark-mode .dash-empty-chart-icon {
  color: var(--text-tertiary);
}

body.dark-mode .dash-empty-chart-text {
  color: var(--text-tertiary);
}

body.dark-mode .dash-loading {
  background: var(--bg-primary);
}

body.dark-mode .dash-loading-spinner {
  color: var(--text-tertiary);
}

body.dark-mode .dash-loading-text {
  color: var(--text-tertiary);
}

body.dark-mode .dash-error {
  background: var(--bg-card);
}

body.dark-mode .dash-error-icon {
  color: var(--text-tertiary);
}

body.dark-mode .dash-error-title {
  color: var(--text-primary);
}

body.dark-mode .dash-error-desc {
  color: var(--text-tertiary);
}

body.dark-mode .dash-retry-btn {
  background: #667eea;
  color: #fff;
}

body.dark-mode .dash-empty {
  background: var(--bg-card);
}

body.dark-mode .dash-empty-icon {
  color: var(--text-tertiary);
}

body.dark-mode .dash-empty-title {
  color: var(--text-primary);
}

body.dark-mode .dash-empty-desc {
  color: var(--text-tertiary);
}

body.dark-mode .dash-back-child-btn {
  background: var(--bg-card);
  color: #667eea;
}

body.dark-mode .dash-back-child-btn:active {
  background: #2a2a44;
}

body.dark-mode .dash-header {
  background: var(--bg-card);
}

body.dark-mode .dash-header-title {
  color: var(--text-primary);
}

body.dark-mode .dash-header-subtitle {
  color: var(--text-secondary);
}

body.dark-mode .dash-tier-badge {
  color: var(--text-primary);
}

body.dark-mode .dash-tier-free {
  background: #2a2a44;
}

body.dark-mode .dash-tier-pro {
  background: #3a3a5a;
}

body.dark-mode .dash-hero {
  background: var(--bg-card);
}

body.dark-mode .dash-hero-icon {
  color: var(--text-primary);
}

body.dark-mode .dash-hero-title {
  color: var(--text-primary);
}

body.dark-mode .dash-hero-subtitle {
  color: var(--text-secondary);
}

body.dark-mode .dash-card {
  background: var(--bg-card);
}

body.dark-mode .dash-card-header {
  border-bottom-color: #2a2a44;
}

body.dark-mode .dash-card-title {
  color: var(--text-primary);
}

body.dark-mode .dash-card-link {
  color: #667eea;
}

body.dark-mode .dash-card-count {
  color: #667eea;
}

body.dark-mode .dash-card-badge {
  color: var(--text-secondary);
  background: #2a2a44;
}

body.dark-mode .dash-badge {
  color: var(--text-secondary);
  background: #2a2a44;
}

body.dark-mode .dash-badge-insufficient {
  color: #ffa94d;
}

body.dark-mode .dash-badge-limited {
  color: #ff6b6b;
}

body.dark-mode .dash-lock-badge {
  background: #2a2a44;
  color: var(--text-tertiary);
}

body.dark-mode .dash-unlock-btn {
  background: linear-gradient(135deg, #667eea, #764ba2);
  color: #fff;
}

body.dark-mode .dash-locked-overlay {
  background: rgba(26, 26, 46, 0.9);
}

body.dark-mode .dash-trend-periods {
  border-bottom-color: #2a2a44;
}

body.dark-mode .dash-trend-btn {
  background: #2a2a44;
  color: var(--text-tertiary);
}

body.dark-mode .dash-trend-btn.active {
  background: #667eea;
  color: #fff;
}

body.dark-mode .dash-dim-btn {
  background: #2a2a44;
  color: var(--text-tertiary);
}

body.dark-mode .dash-dim-btn.active {
  background: #667eea;
  color: #fff;
}

body.dark-mode .dash-trend-container {
  background: var(--bg-card);
}

body.dark-mode .dash-trend-canvas {
  background: var(--bg-card);
}

body.dark-mode .dash-trend-events {
  border-top-color: #2a2a44;
}

body.dark-mode .dash-event-item {
  color: var(--text-secondary);
}

body.dark-mode .dash-event-date {
  color: var(--text-tertiary);
}

body.dark-mode .dash-event-label {
  color: var(--text-primary);
}

body.dark-mode .dash-trend-loading {
  color: var(--text-tertiary);
}

body.dark-mode .dash-trend-empty {
  color: var(--text-tertiary);
}

body.dark-mode .dash-trend-label {
  color: var(--text-secondary);
}

body.dark-mode .dash-trend-score {
  color: var(--text-primary);
}

body.dark-mode .dash-trend-direction {
  color: var(--text-primary);
}

body.dark-mode .dash-trend-bar-bg {
  background: #2a2a44;
}

body.dark-mode .dash-trend-bar-fill {
  background: #667eea;
}

body.dark-mode .dash-detail-grid {
  background: var(--bg-card);
}

body.dark-mode .dash-detail-item {
  border-bottom-color: #2a2a44;
}

body.dark-mode .dash-detail-label {
  color: var(--text-secondary);
}

body.dark-mode .dash-detail-label.dim {
  color: var(--text-tertiary);
}

body.dark-mode .dash-detail-score {
  color: var(--text-primary);
}

body.dark-mode .dash-detail-delta {
  color: var(--text-secondary);
}

body.dark-mode .dash-detail-bar-bg {
  background: #2a2a44;
}

body.dark-mode .dash-detail-bar-bg.dash-bar-blur {
  background: #2a2a44;
}

body.dark-mode .dash-detail-bar-fill {
  background: #667eea;
}

body.dark-mode .dash-detail-locked {
  opacity: 0.4;
}

body.dark-mode .dash-free-lock {
  border-top-color: #2a2a44;
}

body.dark-mode .dash-free-lock .dash-f…text {
  color: var(--text-secondary);
  background: #2a2a44;
}

body.dark-mode .dash-free-lock-trend .dash-f…text {
  color: var(--text-secondary);
  background: #2a2a44;
}

body.dark-mode .dash-insight-text {
  color: var(--text-secondary);
}

body.dark-mode .dash-insight-footer {
  color: var(--text-tertiary);
}

body.dark-mode .dash-artworks-grid {
  background: var(--bg-card);
}

body.dark-mode .dash-artwork-item {
  background: var(--bg-card);
}

body.dark-mode .dash-artwork-title {
  color: var(--text-secondary);
}

body.dark-mode .dash-suggestions {
  background: var(--bg-card);
}

body.dark-mode .dash-suggestion-item {
  border-bottom-color: #2a2a44;
}

body.dark-mode .dash-sug-title {
  color: var(--text-primary);
}

body.dark-mode .dash-sug-desc {
  color: var(--text-tertiary);
}

body.dark-mode .dash-cohistory-list {
  background: var(--bg-card);
}

body.dark-mode .dash-cohistory-item {
  border-bottom-color: #2a2a44;
}

body.dark-mode .dash-cohistory-theme {
  color: var(--text-primary);
}

body.dark-mode .dash-cohistory-date {
  color: var(--text-tertiary);
}

body.dark-mode .dash-cohistory-icon-wrap {
  background: #2a2a44;
}

body.dark-mode .dash-milestones-grid {
  background: var(--bg-card);
}

body.dark-mode .dash-mile-grid-inner {
  background: #2a2a44;
}

body.dark-mode .dash-mile-grid-name {
  color: var(--text-primary);
}

body.dark-mode .dash-mile-grid-name.dim {
  color: var(--text-tertiary);
}

body.dark-mode .dash-m…icon {
  color: var(--text-primary);
}

body.dark-mode .dash-m…date {
  color: var(--text-tertiary);
}

body.dark-mode .dash-m…lock-icon {
  color: var(--text-tertiary);
}

body.dark-mode .dash-mile-grid-progress-bar {
  background: #3a3a5a;
}

body.dark-mode .dash-mile-grid-progress-fill {
  background: #667eea;
}

body.dark-mode .dash-progress-ring-wrap {
  background: var(--bg-card);
}

body.dark-mode .dash-progress-ring-bar-bg {
  background: #2a2a44;
}

body.dark-mode .dash-progress-ring-bar-fill {
  background: linear-gradient(90deg, #667eea, #764ba2);
}

body.dark-mode .dash-progress-ring-label {
  color: var(--text-tertiary);
}

body.dark-mode .dash-milestone-encourage {
  background: #2a2a44;
  color: var(--text-secondary);
}

body.dark-mode .dash-banner {
  background: #2a2a30;
  border-color: #3a3a40;
}

body.dark-mode .dash-banner-report {
  background: #1e2e1e;
}

body.dark-mode .dash-banner-title {
  color: var(--text-primary);
}

body.dark-mode .dash-banner-desc {
  color: var(--text-secondary);
}

body.dark-mode .dash-banner-go {
  color: #667eea;
}

body.dark-mode .dash-back-child-btn {
  background: var(--bg-card);
  color: #667eea;
}

body.dark-mode .dash-back-child-btn:active {
  background: #2a2a44;
}

body.dark-mode .dash-loading {
  background: var(--bg-primary);
}

body.dark-mode .dash-loading-spinner {
  color: var(--text-tertiary);
}

body.dark-mode .dash-loading-text {
  color: var(--text-tertiary);
}

body.dark-mode .dash-error {
  background: var(--bg-card);
}

body.dark-mode .dash-error-icon {
  color: var(--text-tertiary);
}

body.dark-mode .dash-error-title {
  color: var(--text-primary);
}

body.dark-mode .dash-error-desc {
  color: var(--text-tertiary);
}

body.dark-mode .dash-retry-btn {
  background: #667eea;
  color: #fff;
}

body.dark-mode .dash-empty {
  background: var(--bg-card);
}

body.dark-mode .dash-empty-icon {
  color: var(--text-tertiary);
}

body.dark-mode .dash-empty-title {
  color: var(--text-primary);
}

body.dark-mode .dash-empty-desc {
  color: var(--text-tertiary);
}

body.dark-mode .dash-header {
  background: var(--bg-card);
}

body.dark-mode .dash-header-title {
  color: var(--text-primary);
}

body.dark-mode .dash-header-subtitle {
  color: var(--text-secondary);
}

body.dark-mode .dash-tier-badge {
  color: var(--text-primary);
}

body.dark-mode .dash-tier-free {
  background: #2a2a44;
}

body.dark-mode .dash-tier-pro {
  background: #3a3a5a;
}

body.dark-mode .dash-hero {
  background: var(--bg-card);
}

body.dark-mode .dash-hero-icon {
  color: var(--text-primary);
}

body.dark-mode .dash-hero-title {
  color: var(--text-primary);
}

body.dark-mode .dash-hero-subtitle {
  color: var(--text-secondary);
}

body.dark-mode .dash-card {
  background: var(--bg-card);
}

body.dark-mode .dash-card-header {
  border-bottom-color: #2a2a44;
}

body.dark-mode .dash-card-title {
  color: var(--text-primary);
}

body.dark-mode .dash-card-link {
  color: #667eea;
}

body.dark-mode .dash-card-count {
  color: #667eea;
}

body.dark-mode .dash-card-badge {
  color: var(--text-secondary);
  background: #2a2a44;
}

body.dark-mode .dash-badge {
  color: var(--text-secondary);
  background: #2a2a44;
}

body.dark-mode .dash-badge-insufficient {
  color: #ffa94d;
}

body.dark-mode .dash-badge-limited {
  color: #ff6b6b;
}

body.dark-mode .dash-lock-badge {
  background: #2a2a44;
  color: var(--text-tertiary);
}

body.dark-mode .dash-unlock-btn {
  background: linear-gradient(135deg, #667eea, #764ba2);
  color: #fff;
}

body.dark-mode .dash-locked-overlay {
  background: rgba(26, 26, 46, 0.9);
}

body.dark-mode .dash-trend-periods {
  border-bottom-color: #2a2a44;
}

body.dark-mode .dash-trend-btn {
  background: #2a2a44;
  color: var(--text-tertiary);
}

body.dark-mode .dash-trend-btn.active {
  background: #667eea;
  color: #fff;
}

body.dark-mode .dash-dim-btn {
  background: #2a2a44;
  color: var(--text-tertiary);
}

body.dark-mode .dash-dim-btn.active {
  background: #667eea;
  color: #fff;
}

body.dark-mode .dash-trend-container {
  background: var(--bg-card);
}

body.dark-mode .dash-trend-canvas {
  background: var(--bg-card);
}

body.dark-mode .dash-trend-events {
  border-top-color: #2a2a44;
}

body.dark-mode .dash-event-item {
  color: var(--text-secondary);
}

body.dark-mode .dash-event-date {
  color: var(--text-tertiary);
}

body.dark-mode .dash-event-label {
  color: var(--text-primary);
}

body.dark-mode .dash-trend-loading {
  color: var(--text-tertiary);
}

body.dark-mode .dash-trend-empty {
  color: var(--text-tertiary);
}

body.dark-mode .dash-trend-label {
  color: var(--text-secondary);
}

body.dark-mode .dash-trend-score {
  color: var(--text-primary);
}

body.dark-mode .dash-trend-direction {
  color: var(--text-primary);
}

body.dark-mode .dash-trend-bar-bg {
  background: #2a2a44;
}

body.dark-mode .dash-trend-bar-fill {
  background: #667eea;
}

body.dark-mode .dash-detail-grid {
  background: var(--bg-card);
}

body.dark-mode .dash-detail-item {
  border-bottom-color: #2a2a44;
}

body.dark-mode .dash-detail-label {
  color: var(--text-secondary);
}

body.dark-mode .dash-detail-label.dim {
  color: var(--text-tertiary);
}

body.dark-mode .dash-detail-score {
  color: var(--text-primary);
}

body.dark-mode .dash-detail-delta {
  color: var(--text-secondary);
}

body.dark-mode .dash-detail-bar-bg {
  background: #2a2a44;
}

body.dark-mode .dash-detail-bar-bg.dash-bar-blur {
  background: #2a2a44;
}

body.dark-mode .dash-detail-bar-fill {
  background: #667eea;
}

body.dark-mode .dash-detail-locked {
  opacity: 0.4;
}

body.dark-mode .dash-free-lock {
  border-top-color: #2a2a44;
}

body.dark-mode .dash-free-lock .dash-f…text {
  color: var(--text-secondary);
  background: #2a2a44;
}

body.dark-mode .dash-free-lock-trend .dash-f…text {
  color: var(--text-secondary);
  background: #2a2a44;
}

body.dark-mode .dash-insight-text {
  color: var(--text-secondary);
}

body.dark-mode .dash-insight-footer {
  color: var(--text-tertiary);
}

body.dark-mode .dash-artworks-grid {
  background: var(--bg-card);
}

body.dark-mode .dash-artwork-item {
  background: var(--bg-card);
}

body.dark-mode .dash-artwork-title {
  color: var(--text-secondary);
}

body.dark-mode .dash-suggestions {
  background: var(--bg-card);
}

body.dark-mode .dash-suggestion-item {
  border-bottom-color: #2a2a44;
}

body.dark-mode .dash-sug-title {
  color: var(--text-primary);
}

body.dark-mode .dash-sug-desc {
  color: var(--text-tertiary);
}

body.dark-mode .dash-cohistory-list {
  background: var(--bg-card);
}

body.dark-mode .dash-cohistory-item {
  border-bottom-color: #2a2a44;
}

body.dark-mode .dash-cohistory-theme {
  color: var(--text-primary);
}

body.dark-mode .dash-cohistory-date {
  color: var(--text-tertiary);
}

body.dark-mode .dash-cohistory-icon-wrap {
  background: #2a2a44;
}

body.dark-mode .dash-milestones-grid {
  background: var(--bg-card);
}

body.dark-mode .dash-mile-grid-inner {
  background: #2a2a44;
}

body.dark-mode .dash-mile-grid-name {
  color: var(--text-primary);
}

body.dark-mode .dash-mile-grid-name.dim {
  color: var(--text-tertiary);
}

body.dark-mode .dash-m…icon {
  color: var(--text-primary);
}

body.dark-mode .dash-m…date {
  color: var(--text-tertiary);
}

body.dark-mode .dash-m…lock-icon {
  color: var(--text-tertiary);
}

body.dark-mode .dash-mile-grid-progress-bar {
  background: #3a3a5a;
}

body.dark-mode .dash-mile-grid-progress-fill {
  background: #667eea;
}

body.dark-mode .dash-progress-ring-wrap {
  background: var(--bg-card);
}

body.dark-mode .dash-progress-ring-bar-bg {
  background: #2a2a44;
}

body.dark-mode .dash-progress-ring-bar-fill {
  background: linear-gradient(90deg, #667eea, #764ba2);
}

body.dark-mode .dash-progress-ring-label {
  color: var(--text-tertiary);
}

body.dark-mode .dash-milestone-encourage {
  background: #2a2a44;
  color: var(--text-secondary);
}

body.dark-mode .dash-banner {
  background: #2a2a30;
  border-color: #3a3a40;
}

body.dark-mode .dash-banner-report {
  background: #1e2e1e;
}

body.dark-mode .dash-banner-title {
  color: var(--text-primary);
}

body.dark-mode .dash-banner-desc {
  color: var(--text-secondary);
}

body.dark-mode .dash-banner-go {
  color: #667eea;
}

body.dark-mode .dash-back-child-btn {
  background: var(--bg-card);
  color: #667eea;
}

body.dark-mode .dash-back-child-btn:active {
  background: #2a2a44;
}


/* @NOTE: 此区段与 dark-mode.css 内容部分重复，但包含 style.css 专有选择器覆盖。保留作为 fallback。 */
/* ==================== 深色模式 v3.x 页面覆盖 ==================== */

/* ---- 首页 (home) ---- */
body.dark-mode .home-feature-card {
  background: var(--bg-card);
  color: var(--text-primary);
}
body.dark-mode .home-feature-name {
  color: var(--text-primary);
}
body.dark-mode .home-feature-desc {
  color: var(--text-tertiary);
}
body.dark-mode .home-stat-item {
  background: var(--bg-card);
}
body.dark-mode .home-stat-num {
  color: var(--text-primary);
}
body.dark-mode .home-stat-label {
  color: var(--text-tertiary);
}
body.dark-mode .home-section-title {
  color: var(--text-secondary);
}
body.dark-mode .home-section-subtitle {
  color: var(--text-tertiary);
}
body.dark-mode .home-hero {
  background: var(--bg-card);
}
body.dark-mode .home-hero-title {
  color: var(--text-primary);
}
body.dark-mode .home-hero-subtitle {
  color: var(--text-secondary);
}
body.dark-mode .home-banner {
  background: var(--bg-card);
}
body.dark-mode .home-banner-title {
  color: var(--text-primary);
}
body.dark-mode .home-banner-desc {
  color: var(--text-secondary);
}
body.dark-mode .home-quick-actions {
  background: var(--bg-primary);
}
body.dark-mode .home-quick-btn {
  background: var(--bg-card);
  color: var(--text-primary);
}
body.dark-mode .home-quick-btn-label {
  color: var(--text-secondary);
}
body.dark-mode .home-create-card {
  background: var(--bg-card);
}
body.dark-mode .home-create-title {
  color: var(--text-primary);
}
body.dark-mode .home-create-desc {
  color: var(--text-secondary);
}
body.dark-mode .home-grid {
  background: var(--bg-primary);
}
body.dark-mode .home-grid-item {
  background: var(--bg-card);
}
body.dark-mode .home-grid-item-title {
  color: var(--text-primary);
}
body.dark-mode .home-grid-item-desc {
  color: var(--text-tertiary);
}
body.dark-mode .home-today-time {
  background: var(--bg-card);
  color: var(--text-primary);
}
body.dark-mode .home-today-time-label {
  color: var(--text-secondary);
}
body.dark-mode .home-today-time-value {
  color: var(--text-primary);
}
body.dark-mode .home-card {
  background: var(--bg-card);
}
body.dark-mode .home-card-title {
  color: var(--text-primary);
}
body.dark-mode .home-card-desc {
  color: var(--text-secondary);
}

/* ---- 伙伴页 (dialog v3.x dlg-*) ---- */
body.dark-mode .dlg-clay-bar {
  background: var(--bg-card);
  border-bottom-color: #2a2a44;
}
body.dark-mode .dlg-clay-avatar {
  background: #2a2a44;
}
body.dark-mode .dlg-clay-name {
  color: var(--text-primary);
}
body.dark-mode .dlg-clay-status {
  color: var(--text-tertiary);
}
body.dark-mode .dlg-clay-clear-btn {
  color: var(--text-secondary);
}
body.dark-mode .dlg-messages {
  background: var(--bg-primary);
}
body.dark-mode .dlg-msg-bubble {
  background: var(--bg-card);
  color: var(--text-primary);
}
body.dark-mode .dlg-msg-bubble.ai {
  background: #2a2a44;
}
body.dark-mode .dlg-msg-bubble.user {
  background: #3a3a5a;
}
body.dark-mode .dlg-msg-content {
  color: var(--text-primary);
}
body.dark-mode .dlg-msg-time {
  color: var(--text-tertiary);
}
body.dark-mode .dlg-input-bar {
  background: var(--bg-card);
  border-top-color: #2a2a44;
}
body.dark-mode .dlg-input {
  background: #2a2a44;
  color: var(--text-primary);
  border-color: #3a3a5a;
}
body.dark-mode .dlg-input::placeholder {
  color: var(--text-tertiary);
}
body.dark-mode .dlg-send-btn {
  background: linear-gradient(135deg, #667eea, #764ba2);
  color: #fff;
}
body.dark-mode .dlg-send-btn:disabled {
  opacity: 0.5;
}
body.dark-mode .dlg-quick-cards {
  background: var(--bg-primary);
}
body.dark-mode .dlg-quick-card {
  background: var(--bg-card);
  color: var(--text-primary);
}
body.dark-mode .dlg-quick-card-icon {
  color: var(--text-primary);
}
body.dark-mode .dlg-quick-card-label {
  color: var(--text-secondary);
}
body.dark-mode .dlg-typing-indicator {
  color: var(--text-tertiary);
}
body.dark-mode .dlg-empty-state {
  background: var(--bg-primary);
}
body.dark-mode .dlg-empty-title {
  color: var(--text-primary);
}
body.dark-mode .dlg-empty-desc {
  color: var(--text-tertiary);
}
body.dark-mode .dlg-bottom-bar {
  background: var(--bg-card);
  border-top-color: #2a2a44;
}
body.dark-mode .dlg-bottom-quick-bar {
  background: var(--bg-card);
}
body.dark-mode .dlg-intent-btn {
  background: #2a2a44;
  color: var(--text-primary);
}
body.dark-mode .dlg-intent-btn.active {
  background: linear-gradient(135deg, #667eea, #764ba2);
  color: #fff;
}
body.dark-mode .dlg-refinement-panel {
  background: var(--bg-card);
  border-color: #2a2a44;
}
body.dark-mode .dlg-refinement-title {
  color: var(--text-primary);
}
body.dark-mode .dlg-refinement-option {
  background: #2a2a44;
  color: var(--text-primary);
}
body.dark-mode .dlg-refinement-option.selected {
  background: linear-gradient(135deg, #667eea, #764ba2);
  color: #fff;
}
body.dark-mode .dlg-onboarding-bubble {
  background: #2a2a44;
  color: var(--text-primary);
}
body.dark-mode .dlg-coach-greeting {
  background: #2a2a44;
  color: var(--text-primary);
}
body.dark-mode .dlg-quick-create-cards {
  background: var(--bg-primary);
}
body.dark-mode .dlg-quick-create-card {
  background: var(--bg-card);
  color: var(--text-primary);
}
body.dark-mode .dlg-quick-create-icon {
  color: var(--text-primary);
}
body.dark-mode .dlg-quick-create-label {
  color: var(--text-secondary);
}

/* ---- 伙伴页 (旧版 dialog-* 兼容) ---- */
body.dark-mode .dialog-container {
  background: var(--bg-primary);
}
body.dark-mode .dialog-header {
  background: var(--bg-card);
  border-bottom-color: #2a2a44;
}
body.dark-mode .dialog-messages {
  background: var(--bg-primary);
}
body.dark-mode .dialog-input-area {
  background: var(--bg-card);
  border-top-color: #2a2a44;
}
body.dark-mode .dialog-input {
  background: #2a2a44;
  color: var(--text-primary);
  border-color: #3a3a5a;
}
body.dark-mode .dialog-send-btn {
  background: linear-gradient(135deg, #667eea, #764ba2);
  color: #fff;
}
body.dark-mode .msg-bubble {
  background: var(--bg-card);
  color: var(--text-primary);
}
body.dark-mode .msg-bubble.bubble-left {
  background: #2a2a44;
}
body.dark-mode .msg-bubble.bubble-right {
  background: #3a3a5a;
}
body.dark-mode .msg-content {
  color: var(--text-primary);
}
body.dark-mode .msg-time {
  color: var(--text-tertiary);
}
body.dark-mode .quick-cards {
  background: var(--bg-primary);
}
body.dark-mode .quick-card {
  background: var(--bg-card);
  color: var(--text-primary);
}
body.dark-mode .quick-card-label {
  color: var(--text-secondary);
}
body.dark-mode .partner-quick-cards {
  background: var(--bg-primary);
}
body.dark-mode .partner-quick-card {
  background: var(--bg-card);
  color: var(--text-primary);
}
body.dark-mode .partner-quick-card-label {
  color: var(--text-secondary);
}

/* ---- 创作页 (drawing/story) ---- */
body.dark-mode .drawing-container {
  background: var(--bg-primary);
}
body.dark-mode .drawing-header {
  background: var(--bg-card);
  border-bottom-color: #2a2a44;
}
body.dark-mode .drawing-canvas-area {
  background: var(--bg-primary);
}
body.dark-mode .drawing-toolbar {
  background: var(--bg-card);
  border-top-color: #2a2a44;
}
body.dark-mode .drawing-tool-btn {
  background: #2a2a44;
  color: var(--text-primary);
}
body.dark-mode .drawing-tool-btn.active {
  background: linear-gradient(135deg, #667eea, #764ba2);
  color: #fff;
}
body.dark-mode .drawing-color-btn {
  border-color: #2a2a44;
}
body.dark-mode .drawing-color-btn.active {
  border-color: #667eea;
}
body.dark-mode .drawing-textarea {
  background: #2a2a44;
  color: var(--text-primary);
  border-color: #3a3a5a;
}
body.dark-mode .drawing-generate-btn {
  background: linear-gradient(135deg, #667eea, #764ba2);
  color: #fff;
}
body.dark-mode .drawing-result {
  background: var(--bg-card);
}
body.dark-mode .drawing-result-title {
  color: var(--text-primary);
}
body.dark-mode .drawing-actions {
  background: var(--bg-card);
}
body.dark-mode .drawing-action-btn {
  background: #2a2a44;
  color: var(--text-primary);
}
body.dark-mode .drawing-prompt-chip {
  background: #2a2a44;
  color: var(--text-primary);
}
body.dark-mode .drawing-prompt-chip.active {
  background: linear-gradient(135deg, #667eea, #764ba2);
  color: #fff;
}
body.dark-mode .drawing-style-option {
  background: #2a2a44;
  color: var(--text-primary);
}
body.dark-mode .drawing-style-option.selected {
  background: linear-gradient(135deg, #667eea, #764ba2);
  color: #fff;
}
body.dark-mode .drawing-card {
  background: var(--bg-card);
}
body.dark-mode .drawing-card-title {
  color: var(--text-primary);
}
body.dark-mode .drawing-card-desc {
  color: var(--text-secondary);
}

/* ---- 故事页 ---- */
body.dark-mode .story-container {
  background: var(--bg-primary);
}
body.dark-mode .story-header {
  background: var(--bg-card);
  border-bottom-color: #2a2a44;
}
body.dark-mode .story-theme {
  background: var(--bg-card);
  color: var(--text-primary);
}
body.dark-mode .story-theme.active {
  background: linear-gradient(135deg, #667eea, #764ba2);
  color: #fff;
}
body.dark-mode .story-theme-emoji {
  color: var(--text-primary);
}
body.dark-mode .story-theme-label {
  color: var(--text-secondary);
}
body.dark-mode .story-input {
  background: #2a2a44;
  color: var(--text-primary);
  border-color: #3a3a5a;
}
body.dark-mode .story-generate-btn {
  background: linear-gradient(135deg, #667eea, #764ba2);
  color: #fff;
}
body.dark-mode .story-result {
  background: var(--bg-card);
}
body.dark-mode .story-result-title {
  color: var(--text-primary);
}
body.dark-mode .story-result-content {
  color: var(--text-secondary);
}
body.dark-mode .story-actions {
  background: var(--bg-card);
}
body.dark-mode .story-action-btn {
  background: #2a2a44;
  color: var(--text-primary);
}
body.dark-mode .story-length-option {
  background: #2a2a44;
  color: var(--text-primary);
}
body.dark-mode .story-length-option.selected {
  background: linear-gradient(135deg, #667eea, #764ba2);
  color: #fff;
}
body.dark-mode .story-card {
  background: var(--bg-card);
}
body.dark-mode .story-card-title {
  color: var(--text-primary);
}
body.dark-mode .story-card-desc {
  color: var(--text-secondary);
}

/* ---- 作品页 (gallery) ---- */
body.dark-mode .gallery-container {
  background: var(--bg-primary);
}
body.dark-mode .gallery-header {
  background: var(--bg-card);
  border-bottom-color: #2a2a44;
}
body.dark-mode .gallery-filter-bar {
  background: var(--bg-card);
  border-bottom-color: #2a2a44;
}
body.dark-mode .gallery-filter-chip {
  background: #2a2a44;
  color: var(--text-secondary);
}
body.dark-mode .gallery-filter-chip.active {
  background: linear-gradient(135deg, #667eea, #764ba2);
  color: #fff;
}
body.dark-mode .gallery-grid {
  background: var(--bg-primary);
}
body.dark-mode .gallery-item {
  background: var(--bg-card);
}
body.dark-mode .gallery-item-title {
  color: var(--text-primary);
}
body.dark-mode .gallery-item-date {
  color: var(--text-tertiary);
}
body.dark-mode .gallery-item-type {
  color: var(--text-secondary);
}
body.dark-mode .gallery-empty {
  background: var(--bg-primary);
}
body.dark-mode .gallery-empty-title {
  color: var(--text-primary);
}
body.dark-mode .gallery-empty-desc {
  color: var(--text-tertiary);
}
body.dark-mode .gallery-detail {
  background: var(--bg-primary);
}
body.dark-mode .gallery-detail-header {
  background: var(--bg-card);
}
body.dark-mode .gallery-detail-title {
  color: var(--text-primary);
}
body.dark-mode .gallery-detail-info {
  background: var(--bg-card);
}
body.dark-mode .gallery-detail-label {
  color: var(--text-secondary);
}
body.dark-mode .gallery-detail-value {
  color: var(--text-primary);
}
body.dark-mode .gallery-card {
  background: var(--bg-card);
}
body.dark-mode .gallery-card-title {
  color: var(--text-primary);
}
body.dark-mode .gallery-card-desc {
  color: var(--text-secondary);
}

/* ---- 挑战页 ---- */
body.dark-mode .challenge-container {
  background: var(--bg-primary);
}
body.dark-mode .challenge-header {
  background: var(--bg-card);
}
body.dark-mode .challenge-series-card {
  background: var(--bg-card);
}
body.dark-mode .challenge-series-title {
  color: var(--text-primary);
}
body.dark-mode .challenge-series-desc {
  color: var(--text-secondary);
}
body.dark-mode .challenge-series-progress {
  color: var(--text-tertiary);
}
body.dark-mode .challenge-card {
  background: var(--bg-card);
}
body.dark-mode .challenge-card-title {
  color: var(--text-primary);
}
body.dark-mode .challenge-card-desc {
  color: var(--text-secondary);
}
body.dark-mode .challenge-card-difficulty {
  color: var(--text-tertiary);
}
body.dark-mode .challenge-card-reward {
  color: var(--text-secondary);
}
body.dark-mode .challenge-prompt-card {
  background: var(--bg-card);
}
body.dark-mode .challenge-prompt-title {
  color: var(--text-primary);
}
body.dark-mode .challenge-prompt-name {
  color: var(--text-secondary);
}
body.dark-mode .challenge-prompt-desc {
  color: var(--text-tertiary);
}
body.dark-mode .challenge-empty {
  background: var(--bg-primary);
}
body.dark-mode .challenge-empty-title {
  color: var(--text-primary);
}
body.dark-mode .challenge-empty-desc {
  color: var(--text-tertiary);
}
body.dark-mode .challenge-locked-overlay {
  background: rgba(26, 26, 46, 0.9);
}
body.dark-mode .challenge-locked-title {
  color: var(--text-primary);
}
body.dark-mode .challenge-locked-desc {
  color: var(--text-secondary);
}
body.dark-mode .challenge-unlock-btn {
  background: linear-gradient(135deg, #667eea, #764ba2);
  color: #fff;
}

/* ---- 涂鸦页 ---- */
body.dark-mode .doodle-container {
  background: var(--bg-primary);
}
body.dark-mode .doodle-header {
  background: var(--bg-card);
}
body.dark-mode .doodle-canvas-wrapper {
  background: var(--bg-primary);
}
body.dark-mode .doodle-toolbar {
  background: var(--bg-card);
  border-top-color: #2a2a44;
}
body.dark-mode .doodle-tool-btn {
  background: #2a2a44;
  color: var(--text-primary);
}
body.dark-mode .doodle-tool-btn.active {
  background: linear-gradient(135deg, #667eea, #764ba2);
  color: #fff;
}
body.dark-mode .doodle-color {
  border-color: #2a2a44;
}
body.dark-mode .doodle-color.active {
  border-color: #667eea;
}
body.dark-mode .doodle-action-btn {
  background: #2a2a44;
  color: var(--text-primary);
  border-color: #3a3a5a;
}
body.dark-mode .doodle-prompt-input {
  background: #2a2a44;
  color: var(--text-primary);
  border-color: #3a3a5a;
}
body.dark-mode .doodle-generate-btn {
  background: linear-gradient(135deg, #667eea, #764ba2);
  color: #fff;
}
body.dark-mode .doodle-result {
  background: var(--bg-card);
}
body.dark-mode .doodle-card {
  background: var(--bg-card);
}
body.dark-mode .doodle-card-title {
  color: var(--text-primary);
}
body.dark-mode .doodle-card-desc {
  color: var(--text-secondary);
}

/* ---- 日记页 ---- */
body.dark-mode .diary-container {
  background: var(--bg-primary);
}
body.dark-mode .diary-header {
  background: var(--bg-card);
}
body.dark-mode .diary-card {
  background: var(--bg-card);
}
body.dark-mode .diary-entry-title {
  color: var(--text-primary);
}
body.dark-mode .diary-entry-date {
  color: var(--text-tertiary);
}
body.dark-mode .diary-entry-preview {
  color: var(--text-secondary);
}
body.dark-mode .diary-empty {
  background: var(--bg-primary);
}
body.dark-mode .diary-empty-title {
  color: var(--text-primary);
}
body.dark-mode .diary-empty-desc {
  color: var(--text-tertiary);
}

/* ---- 共创页 ---- */
body.dark-mode .co-creation-container {
  background: var(--bg-primary);
}
body.dark-mode .co-creation-header {
  background: var(--bg-card);
}
body.dark-mode .co-creation-card {
  background: var(--bg-card);
}
body.dark-mode .co-creation-card-title {
  color: var(--text-primary);
}
body.dark-mode .co-creation-card-desc {
  color: var(--text-secondary);
}
body.dark-mode .co-creation-mode-btn {
  background: #2a2a44;
  color: var(--text-primary);
}
body.dark-mode .co-creation-mode-btn.active {
  background: linear-gradient(135deg, #667eea, #764ba2);
  color: #fff;
}
body.dark-mode .co-creation-empty {
  background: var(--bg-primary);
}
body.dark-mode .co-creation-empty-title {
  color: var(--text-primary);
}
body.dark-mode .co-creation-empty-desc {
  color: var(--text-tertiary);
}

/* ---- 订阅页 ---- */
body.dark-mode .subscribe-container {
  background: var(--bg-primary);
}
body.dark-mode .subscribe-header {
  background: var(--bg-card);
}
body.dark-mode .subscribe-card {
  background: var(--bg-card);
  border-color: #2a2a44;
}
body.dark-mode .subscribe-card.featured {
  border-color: #667eea;
}
body.dark-mode .subscribe-tier-name {
  color: var(--text-primary);
}
body.dark-mode .subscribe-price {
  color: var(--text-primary);
}
body.dark-mode .subscribe-price-period {
  color: var(--text-tertiary);
}
body.dark-mode .subscribe-desc {
  color: var(--text-secondary);
}
body.dark-mode .subscribe-feature {
  color: var(--text-secondary);
}
body.dark-mode .subscribe-feature-icon {
  color: var(--text-primary);
}
body.dark-mode .subscribe-btn {
  background: linear-gradient(135deg, #667eea, #764ba2);
  color: #fff;
}
body.dark-mode .subscribe-btn.secondary {
  background: #2a2a44;
  color: var(--text-primary);
}
body.dark-mode .subscribe-empty {
  background: var(--bg-primary);
}
body.dark-mode .subscribe-empty-title {
  color: var(--text-primary);
}
body.dark-mode .subscribe-empty-desc {
  color: var(--text-tertiary);
}

/* ---- 月报页 ---- */
body.dark-mode .report-container {
  background: var(--bg-primary);
}
body.dark-mode .report-header {
  background: var(--bg-card);
}
body.dark-mode .report-card {
  background: var(--bg-card);
}
body.dark-mode .report-card-title {
  color: var(--text-primary);
}
body.dark-mode .report-card-date {
  color: var(--text-tertiary);
}
body.dark-mode .report-card-score {
  color: var(--text-primary);
}
body.dark-mode .report-card-desc {
  color: var(--text-secondary);
}
body.dark-mode .report-empty {
  background: var(--bg-primary);
}
body.dark-mode .report-empty-title {
  color: var(--text-primary);
}
body.dark-mode .report-empty-desc {
  color: var(--text-tertiary);
}

/* ---- 设置页 ---- */
body.dark-mode .settings-container {
  background: var(--bg-primary);
}
body.dark-mode .settings-header {
  background: var(--bg-card);
}
body.dark-mode .settings-item {
  background: var(--bg-card);
}
body.dark-mode .settings-item-label {
  color: var(--text-primary);
}
body.dark-mode .settings-item-desc {
  color: var(--text-secondary);
}
body.dark-mode .settings-section-title {
  color: var(--text-secondary);
}
body.dark-mode .settings-card {
  background: var(--bg-card);
}
body.dark-mode .settings-card-title {
  color: var(--text-primary);
}
body.dark-mode .settings-card-desc {
  color: var(--text-secondary);
}

/* ---- 通用组件 ---- */
body.dark-mode .tab-bar {
  background: rgba(26, 26, 46, 0.95);
  border-top-color: #2a2a44;
}
body.dark-mode .tab-item {
  color: rgba(255, 255, 255, 0.35);
}
body.dark-mode .tab-item.active {
  color: #FFA94D;
}
body.dark-mode .btn-primary {
  background: linear-gradient(135deg, #667eea, #764ba2);
  color: #fff;
}
body.dark-mode .btn-secondary {
  background: #2a2a44;
  color: var(--text-primary);
}
body.dark-mode .btn-ghost {
  color: var(--text-secondary);
}
body.dark-mode .btn-danger {
  background: #ff6b6b;
  color: #fff;
}
body.dark-mode .modal-overlay {
  background: rgba(0, 0, 0, 0.6);
}
body.dark-mode .modal-content {
  background: var(--bg-card);
}
body.dark-mode .modal-title {
  color: var(--text-primary);
}
body.dark-mode .modal-desc {
  color: var(--text-secondary);
}
body.dark-mode .modal-close {
  color: var(--text-tertiary);
}
body.dark-mode .toast {
  background: #2a2a44;
  color: var(--text-primary);
}
body.dark-mode .loading-spinner {
  color: var(--text-tertiary);
}
body.dark-mode .empty-state {
  background: var(--bg-primary);
}
body.dark-mode .empty-state-title {
  color: var(--text-primary);
}
body.dark-mode .empty-state-desc {
  color: var(--text-tertiary);
}
body.dark-mode .skeleton-shimmer {
  background: linear-gradient(90deg, #2a2a44 25%, #3a3a5a 50%, #2a2a44 75%);
}
body.dark-mode .page-voice-area {
  background: var(--bg-primary);
}
body.dark-mode .voice-replay-btn {
  background: #2a2a44;
  color: var(--text-primary);
}
body.dark-mode .scroll-to-bottom-btn {
  background: #2a2a44;
  color: var(--text-primary);
}
body.dark-mode .pin-modal {
  background: var(--bg-card);
}
body.dark-mode .pin-title {
  color: var(--text-primary);
}
body.dark-mode .pin-desc {
  color: var(--text-secondary);
}
body.dark-mode .pin-input {
  background: #2a2a44;
  color: var(--text-primary);
}
body.dark-mode .pin-btn-cancel {
  background: #2a2a44;
  color: var(--text-secondary);
}
body.dark-mode .pin-btn-confirm {
  background: linear-gradient(135deg, #667eea, #764ba2);
  color: #fff;
}
body.dark-mode .login-sheet {
  background: var(--bg-card);
}
body.dark-mode .login-sheet-title {
  color: var(--text-primary);
}
body.dark-mode .login-sheet-desc {
  color: var(--text-secondary);
}
body.dark-mode .paywall {
  background: var(--bg-card);
}
body.dark-mode .paywall-title {
  color: var(--text-primary);
}
body.dark-mode .paywall-desc {
  color: var(--text-secondary);
}
body.dark-mode .paywall-price {
  color: var(--text-primary);
}
body.dark-mode .paywall-btn {
  background: linear-gradient(135deg, #667eea, #764ba2);
  color: #fff;
}
body.dark-mode .paywall-btn.secondary {
  background: #2a2a44;
  color: var(--text-primary);
}
body.dark-mode .login-form {
  background: var(--bg-card);
}
body.dark-mode .login-form-title {
  color: var(--text-primary);
}
body.dark-mode .login-form-desc {
  color: var(--text-secondary);
}
body.dark-mode .login-form-input {
  background: #2a2a44;
  color: var(--text-primary);
  border-color: #3a3a5a;
}
body.dark-mode .login-form-btn {
  background: linear-gradient(135deg, #667eea, #764ba2);
  color: #fff;
}
body.dark-mode .login-form-link {
  color: #667eea;
}
body.dark-mode .login-form-error {
  color: #ff6b6b;
}
body.dark-mode .login-form-tab {
  color: var(--text-secondary);
}
body.dark-mode .login-form-tab.active {
  color: var(--text-primary);
}
body.dark-mode .login-form-divider {
  color: var(--text-tertiary);
}
body.dark-mode .login-form-agreement {
  color: var(--text-tertiary);
}
body.dark-mode .login-form-agreement a {
  color: #667eea;
}
body.dark-mode .login-form-other {
  color: var(--text-tertiary);
}
body.dark-mode .login-form-other-btn {
  background: #2a2a44;
  color: var(--text-primary);
  border-color: #3a3a5a;
}
body.dark-mode .login-form-footer {
  color: var(--text-tertiary);
}
body.dark-mode .login-form-footer a {
  color: #667eea;
}