/* ═══════════════════════════════════════════════
   worldlines 发现页 · 黑曜石暗色 / 新粗野 × 玻璃拟态
   主题来源：themes/*.json（5 套官方 + 社区主题同形 · 统一 JSON）
           加载器：theme.js
             fetch → 编译 [data-theme="x"]{--var:..;--halos:..;--vignette:..}
             → 注入 <style id="theme-style">

   ┌────────────────────────────────────────────────────┐
   │  公开 token 表（用户可改）                          │
   │  · 节奏  --space-* / --r-* / --t-* / --ease        │
   │  · 排版  --text-* / --leading-* / --tracking-*      │
   │  · 容器  --max-w / --pad-x / --hero-aspect         │
   │  · 模糊  --blur-*                                   │
   │  · 组件  --topbar-* / --hero-* / --card-* / --chip-*│
   │          --filterbar-* / --tuner-* / --foot-*       │
   │          --bottombar-* / --cta-* / --fav-*          │
   │  · 复合  --accent-grad / --surface / --line           │
   │          --accent-primary / --accent-secondary 等（base.css 顶层定义）  │
   │  · 主题色  --accent-rgb / --accent-2-rgb / --glass-rgb         │
   │             --bg / --bg-rgb / --text / --halos      │
   │             --vignette（从 themes/<id>.json 来）   │
   └────────────────────────────────────────────────────┘
   ┌────────────────────────────────────────────────────┐
   │  公开 class 表（用户可改 · 都标了 data-public）     │
   │  · 顶栏  .topbar .logo .logo-text .search          │
   │          .credits-badge .avatar .main-nav          │
   │          .nav-item .nav-item.active                │
   │          .preset-rail .preset-btn .preset-btn.is-on│
   │          .preset-btn-community（社区主题视觉区分）   │
   │          .preset-gear                              │
   │  · 用户面板  .user-panel .user-panel-head          │
   │          .user-panel-avatar .user-panel-id         │
   │          .user-panel-name .user-panel-tier         │
   │          .user-panel-stats .user-panel-row         │
   │          .user-panel-label .user-panel-value       │
   │          .user-panel-value-accent                  │
   │  · Hero  .hero .hero-arrow .hero-dots             │
   │          .ooc-badge .cta-btn .cta-break            │
   │  · 统计  .stat（hero-meta / card-stats 共用）       │
   │          .model-chip（hero / card 共用）            │
   │  · 筛选  .filterbar .fpill .fpill.active          │
   │          .fpill-18（NSFW 18+ 标记）                 │
   │  · 卡片  .char-card .card-visual .card-body       │
   │          .card-name .card-creator .verified        │
   │          .card-intro .card-stats                   │
   │  · 收藏  .fav-btn .fav-btn.liked                  │
   │  · 芯片  .chip .chip.ooc .chip.hot                │
   │  · 底栏  .bottombar .tab .tab.active              │
   │  · 脚部  .page-foot .foot-mark .foot-meta         │
   │          .foot-sig .foot-sig[data-sig="..."]      │
   │                                                    │
   │  不应改（内部结构）：                               │
   │  .topbar-row .hero-track .hero-slide .hero-shade   │
   │  .hero-content .card-chips .card-name-row         │
   │  .tuner / .tuner-*                                 │
   │  动画 .markFlicker .heartPop                       │
   │                                                    │
   │  data-attr 钩子（用户可按此差异风格）：             │
   │  body[data-ori] body[data-nsfw]                   │
   │  .grid[data-layout] .hero-slide[data-align]        │
   │  .char-card[data-ori] .foot-sig[data-sig]          │
   └────────────────────────────────────────────────────┘
   ═══════════════════════════════════════════════ */

:root {
  /* ───────── 字体（不变） ───────── */
  --font-display: 'Space Grotesk', 'Noto Sans SC', 'PingFang SC', sans-serif;
  --font-body: 'Noto Sans SC', 'Space Grotesk', 'PingFang SC', sans-serif;
  --font-mono: 'JetBrains Mono', 'Noto Sans SC', monospace;

  /* ───────── 节奏：圆角 ───────── */
  --r-xs: 4px;          /* kbd */
  --r-sm: 6px;          /* chip / ooc-badge / hero-dot */
  --r-md: 12px;         /* cta-btn */
  --r-card: 16px;       /* 卡片 / 通用 */
  --r-pill: 999px;
  --r-tuner: 14px;
  --r-hero: 22px;
  --ease: cubic-bezier(.22, .8, .3, 1);

  /* ───────── 节奏：空间步进（4px 基准） ───────── */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --pad-x: clamp(16px, 3vw, 40px);

  /* ───────── 节奏：过渡时长 ───────── */
  --t-fast: 0.15s;
  --t-base: 0.22s;
  --t-card: 0.3s;
  --t-slow: 0.4s;
  --t-card-reveal: 0.55s;
  --t-bg: 0.8s;
  --t-hero: 1.1s;

  /* ───────── 节奏：模糊半径 ───────── */
  --blur-sm: 6px;
  --blur-md: 10px;
  --blur-lg: 18px;
  --blur-xl: 20px;

  /* ───────── 排版：字号 ───────── */
  --text-3xs: 8px;
  --text-2xs: 10px;
  --text-xs: 11px;
  --text-sm: 12.5px;
  --text-base: 13.5px;
  --text-md: 14px;
  --text-card-name: 16.5px;
  --text-body: 16px;
  --text-lg: 18px;
  --text-xl: 22px;
  --text-2xl: 28px;
  --text-3xl: 36px;
  --text-4xl: 48px;
  --text-5xl: 64px;

  /* ───────── 语义色（不随主题切换） ───────── */
  --state-online: #34D399;       /* 在线点 */
  --warn-nsfw: #F43F5E;         /* NSFW 18+ 警告 */

  /* ───────── 排版：行高 ───────── */
  --leading-tight: 1.08;
  --leading-snug: 1.35;
  --leading-normal: 1.5;
  --leading-relaxed: 1.65;
  --leading-loose: 1.7;

  /* ───────── 排版：字距 ───────── */
  --tracking-tight: -0.01em;
  --tracking-normal: 0.02em;
  --tracking-wide: 0.05em;
  --tracking-wider: 0.14em;

  /* ───────── 容器 ───────── */
  --max-w: 1440px;
  --max-w-content: 640px;
  --max-w-quote: 46ch;
  --hero-aspect: 1440 / 520;

  /* ───────── 顶栏 ───────── */
  --topbar-py: 12px;
  --topbar-gap: 18px;
  --topbar-blur: 18px;
  --topbar-mb: 84px;        /* body padding-bottom 顶栏占用 */
  --topbar-mb-mobile: 76px;
  --logo-fs: 20px;
  --logo-tracking: 0.04em;
  --search-py: 8px;
  --search-px: 16px;
  --search-gap: 10px;
  --search-mw: 460px;
  --nav-fs: 12.5px;
  --nav-py: 7px;
  --nav-px: 12px;
  --nav-gap: 4px;
  --preset-fs: 12.5px;
  --preset-tracking: 0.06em;
  --preset-py: 7px;
  --preset-px: 12px;
  --preset-pad: 3px;
  --preset-gap: 4px;
  --gear-size: 28px;
  --avatar-size: 38px;
  --avatar-border: 1.5px;
  --credits-fs: 12.5px;
  --credits-py: 7px;
  --credits-px: 13px;
  --credits-gap: 5px;

  /* ───────── User panel popover ───────── */
  --userpanel-w: 240px;
  --userpanel-p: 14px;
  --userpanel-blur: 20px;
  --userpanel-gap: 10px;
  --userpanel-top-offset: 10px;
  --userpanel-name-fs: 14px;
  --userpanel-tier-fs: 10.5px;
  --userpanel-avatar-size: 40px;
  --userpanel-label-fs: 11px;
  --userpanel-value-fs: 12.5px;

  /* ───────── Tuner popover ───────── */
  --tuner-w: 260px;
  --tuner-p: 14px;
  --tuner-pb: 12px;
  --tuner-blur: 20px;
  --tuner-gap: 10px;
  --tuner-top-offset: 10px;
  --tuner-label-fs: 11px;
  --tuner-seg-fs: 11px;
  --tuner-seg-py: 4px;
  --tuner-seg-px: 11px;
  --tuner-dot-size: 18px;

  /* ───────── Hero ───────── */
  --hero-mt: 22px;
  --hero-min-h: 380px;
  --hero-mh-mobile: 280px;
  --hero-r-mobile: 18px;
  --hero-pad-x-mobile: 14px;
  --hero-content-gap: 14px;
  --hero-content-px: clamp(24px, 5vw, 72px);
  --hero-title-fs: clamp(34px, 4.6vw, 60px);
  --hero-title-fs-mobile: clamp(28px, 7vw, 38px);
  --hero-title-mb: 6px;
  --hero-sub-fs: clamp(14px, 1.4vw, 18px);
  --hero-quote-fs: clamp(13.5px, 1.25vw, 16px);
  --hero-meta-gap: 14px;
  --hero-meta-fs: 13px;
  --hero-meta-fs-mobile: 12px;
  --cta-fs: 15.5px;
  --cta-fs-mobile: 13.5px;
  --cta-py: 14px;
  --cta-px: 28px;
  --cta-py-mobile: 11px;
  --cta-px-mobile: 20px;
  --cta-mt: 6px;
  --cta-lift: -2px;
  --arrow-size: 44px;
  --arrow-fs: 18px;
  --arrow-offset: 14px;
  --dot-w: 22px;
  --dot-h: 4px;
  --dot-gap: 8px;
  --dots-bottom: 18px;

  /* ───────── Filterbar ───────── */
  --filterbar-top: 62px;
  --filterbar-top-mobile: 104px;
  --filterbar-mt: 26px;
  --filterbar-blur: 16px;
  --filterbar-py: 13px;
  --filterbar-gap: 9px;
  --fpill-fs: 13.5px;
  --fpill-py: 8px;
  --fpill-px: 18px;
  --fpill-gap: 6px;
  --filter-count-fs: 11.5px;

  /* ───────── Grid ───────── */
  --grid-mt: 22px;
  --grid-mt-mobile: 16px;
  --grid-gap: 18px;
  --grid-gap-md: 20px;
  --grid-gap-mobile: 12px;

  /* ───────── Card ───────── */
  --card-reveal-y: 18px;
  --card-hover-y: -4px;
  --card-hover-scale: 1.045;
  --card-aspect: 4 / 5;
  --card-name-fs: 16.5px;
  --card-name-fs-mobile: 15px;
  --card-name-tracking: 0.01em;
  --card-intro-fs: 12.8px;
  --card-intro-fs-mobile: 12px;
  --card-intro-lines: 2;
  --card-stats-fs: 11.5px;
  --card-stats-gap: 12px;
  --card-stats-gap-mobile: 8px;
  --card-chip-fs: 10.5px;
  --card-p: 14px;
  --card-p-top: 13px;
  --card-p-x: 14px;
  --card-gap: 8px;

  /* ───────── 收藏按钮 ───────── */
  --fav-size: 34px;
  --fav-offset: 10px;
  --fav-icon: 16px;

  /* ───────── Chip（卡片内） ───────── */
  --chip-r: 6px;
  --chip-py: 3px;
  --chip-px: 8px;
  --chip-gap: 6px;
  --chip-blur: 6px;

  /* ───────── ooc-badge / model-chip ───────── */
  --ooc-badge-fs: 12px;
  --ooc-badge-py: 5px;
  --ooc-badge-px: 11px;
  --ooc-badge-r: 6px;
  --ooc-badge-blur: 6px;
  --model-fs: 10px;
  --model-fs-card: 11px;
  --model-py: 2px;
  --model-px: 7px;
  --model-r: 5px;

  /* ───────── CTA ───────── */
  --cta-r: 12px;
  --cta-tracking: 0.05em;

  /* ───────── Foot ───────── */
  --foot-mt: 56px;
  --foot-mb: 28px;
  --foot-pt: 18px;
  --foot-fs: 10.5px;
  --foot-tracking: 0.14em;
  --foot-gap: 18px;
  --foot-sig-r: 4px;
  --foot-sig-py: 4px;
  --foot-sig-px: 10px;

  /* ───────── Bottombar（移动） ───────── */
  --bottombar-py: 8px;
  --bottombar-px: 6px;
  --tab-fs: 10.5px;
  --tab-gap: 3px;
  --tab-py: 5px;
  --tab-icon: 22px;
}

body {
  /* ─────────── 复合变量（所有主题共享 · 必须在 body 而非 :root 定义，因为 var() 嵌套会在定义时锁定
     当时的 --accent-rgb/--accent-2-rgb；body 才是 [data-theme="x"] 命中的元素，复合变量需要跟主题联动） ─────────── */
  --card-tint-top: rgba(var(--accent-rgb), 0.06);
  --card-tint-bottom: rgba(var(--accent-2-rgb), 0.04);
  --cta-shadow:
    0 0 14px rgba(var(--accent-rgb), 0.32),
    0 0 32px rgba(var(--accent-2-rgb), 0.14);
  --cta-shadow-hover:
    0 0 22px rgba(var(--accent-rgb), 0.5),
    0 0 50px rgba(var(--accent-2-rgb), 0.22);
  --accent-grad: linear-gradient(135deg, rgb(var(--accent-rgb)) 0%, rgb(var(--accent-2-rgb)) 100%);
  --accent-soft-1: rgba(var(--accent-rgb), 0.13);
  --accent-soft-2: rgba(var(--accent-2-rgb), 0.07);
  --selection-bg: rgba(var(--accent-rgb), 0.4);
  --accent-primary: rgb(var(--accent-rgb));
  --accent-secondary: rgb(var(--accent-2-rgb));
  --surface: rgba(var(--glass-rgb), 0.045);
  --surface-hover: rgba(var(--glass-rgb), 0.07);
  --line: rgba(var(--glass-rgb), 0.08);
  --line-strong: rgba(var(--glass-rgb), 0.16);
}

/* ─────────── 基础 reset ─────────── */

* { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  background:
    var(--halos),
    var(--vignette),
    var(--bg);
  color: var(--fg);
  font-family: var(--font-body);
  font-size: var(--text-body);
  line-height: var(--leading-loose);
  letter-spacing: var(--tracking-normal);
  min-height: 100vh;
  padding-bottom: var(--topbar-mb);
  transition: background var(--t-bg) var(--ease);
}

::selection { background: var(--selection-bg); }

/* ─────────── 顶部导航栏 ─────────── */

.topbar {
  position: sticky;
  top: 0;
  z-index: 60;
  background: rgba(var(--bg-rgb), 0.78);
  -webkit-backdrop-filter: blur(var(--topbar-blur));
  backdrop-filter: blur(var(--topbar-blur));
  border-bottom: 1px solid rgba(var(--accent-rgb), 0.28);
  box-shadow: 0 1px 32px rgba(var(--accent-rgb), 0.1);
}

.topbar-row {
  display: flex;
  align-items: center;
  gap: var(--topbar-gap);
  padding: var(--topbar-py) var(--pad-x);
  max-width: var(--max-w);
  margin: 0 auto;
}

.logo {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  text-decoration: none;
  color: var(--fg);
  flex-shrink: 0;
}

.logo-mark {
  font-size: var(--text-md);
  color: var(--accent-primary);
  text-shadow: 0 0 12px rgba(var(--accent-rgb), 0.9);
  animation: markFlicker 4s infinite;
}

@keyframes markFlicker {
  0%, 91%, 94%, 100% { opacity: 1; }
  92% { opacity: 0.35; }
  93% { opacity: 0.75; }
}

.logo-text {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--logo-fs);
  letter-spacing: var(--logo-tracking);
}

.logo-text em {
  font-style: normal;
  background: var(--accent-grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.search {
  flex: 1;
  max-width: var(--search-mw);
  display: flex;
  align-items: center;
  gap: var(--search-gap);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  padding: var(--search-py) var(--search-px);
  transition: border-color var(--t-base) var(--ease), box-shadow var(--t-base) var(--ease);
}

.search:focus-within {
  border-color: rgba(var(--accent-rgb), 0.55);
  box-shadow: 0 0 0 3px rgba(var(--accent-rgb), 0.14), 0 0 24px rgba(var(--accent-rgb), 0.12);
}

.search-icon { width: 16px; height: 16px; color: var(--fg-3); flex-shrink: 0; }

.search input {
  flex: 1;
  background: none;
  border: none;
  outline: none;
  color: var(--fg);
  font-family: var(--font-body);
  font-size: var(--text-md);
  letter-spacing: var(--tracking-normal);
}

.search input::placeholder { color: var(--fg-3); }

.search kbd {
  font-family: var(--font-mono);
  font-size: var(--text-2xs);
  color: var(--fg-3);
  border: 1px solid var(--line);
  border-radius: var(--r-xs);
  padding: 2px 6px;
}

.topbar-right {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-left: auto;
  flex-shrink: 0;
  position: relative;
}

.main-nav {
  display: flex;
  gap: var(--nav-gap);
  align-items: center;
}

.nav-item {
  font-family: var(--font-mono);
  font-size: var(--nav-fs);
  letter-spacing: var(--tracking-normal);
  color: var(--fg-2);
  text-decoration: none;
  padding: var(--nav-py) var(--nav-px);
  border-radius: var(--r-pill);
  transition: color var(--t-base) var(--ease), background var(--t-base) var(--ease);
  position: relative;
}

.nav-item:hover {
  color: var(--fg);
  background: var(--surface-hover);
}

.nav-item.active {
  color: #fff;
  background: rgba(var(--accent-rgb), 0.14);
  box-shadow: inset 0 0 0 1px rgba(var(--accent-rgb), 0.45);
}

/* ─────────── 预设（5 颗 chip + 齿轮） ─────────── */

.preset-rail {
  display: flex;
  align-items: center;
  gap: var(--preset-gap);
  padding: var(--preset-pad);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
}

.preset-btn {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--preset-fs);
  letter-spacing: var(--preset-tracking);
  color: var(--fg-2);
  background: transparent;
  border: none;
  border-radius: var(--r-pill);
  padding: var(--preset-py) var(--preset-px);
  cursor: pointer;
  transition: color var(--t-base) var(--ease), background var(--t-base) var(--ease), box-shadow var(--t-base) var(--ease);
}

.preset-btn:hover { color: var(--fg); }

.preset-btn.is-on {
  color: #fff;
  background: var(--accent-grad);
  box-shadow: 0 0 12px rgba(var(--accent-rgb), 0.35);
}

/* 社区主题 chip：虚线边框 + 弱化文字，区别于 5 套官方预设 */
.preset-btn-community {
  border: 1px dashed var(--fg-3);
  color: var(--fg-2);
}
.preset-btn-community:hover {
  border-color: var(--fg-2);
  color: var(--fg);
  background: var(--surface);
}
.preset-btn-community.is-on {
  border-style: solid;
  border-color: transparent;
  color: #fff;
  background: var(--accent-grad);
  box-shadow: 0 0 14px rgba(var(--accent-rgb), 0.45),
              0 0 28px rgba(var(--accent-2-rgb), 0.22);
}

.preset-gear {
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--gear-size);
  height: var(--gear-size);
  background: transparent;
  border: none;
  border-radius: 50%;
  color: var(--fg-3);
  cursor: pointer;
  padding: 0;
  transition: color var(--t-base), background var(--t-base), transform var(--t-slow) var(--ease);
}

.preset-gear svg { width: 14px; height: 14px; }

.preset-gear:hover { color: var(--fg-2); background: var(--surface-hover); }
.preset-gear.is-spin { transform: rotate(90deg); color: var(--fg); }

/* ─────────── 移动端 preset 行（桌面隐藏，≤860px 显示） ─────────── */

.preset-rail-mobile {
  display: none;
  position: sticky;
  top: var(--topbar-h-mobile, 58px);
  z-index: 59;
  align-items: center;
  gap: 6px;
  padding: 8px var(--hero-pad-x-mobile, 14px);
  background: rgba(var(--bg-rgb), 0.85);
  -webkit-backdrop-filter: blur(var(--blur-xl, 18px));
  backdrop-filter: blur(var(--blur-xl, 18px));
  border-bottom: 1px solid rgba(var(--accent-rgb), 0.2);
  overflow-x: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
  -webkit-overflow-scrolling: touch;
}
.preset-rail-mobile::-webkit-scrollbar { display: none; }

/* 移动端齿轮重复，桌面/移动都隐藏 */
.preset-gear-mobile { display: none; }

.preset-rail-mobile .preset-btn {
  font-size: 13px;
  padding: 7px 14px;
  flex-shrink: 0;
  white-space: nowrap;
}

.preset-rail-mobile .preset-gear {
  flex-shrink: 0;
  margin-left: auto;
  width: 32px;
  height: 32px;
}
.preset-rail-mobile .preset-gear svg { width: 16px; height: 16px; }

/* HTML 钩子：grid 布局模式 */
.grid[data-layout="fixed-2"] { grid-template-columns: repeat(2, 1fr) !important; }
.grid[data-layout="fixed-3"] { grid-template-columns: repeat(3, 1fr) !important; }
.grid[data-layout="fixed-4"] { grid-template-columns: repeat(4, 1fr) !important; }
.grid[data-layout="masonry"] { grid-template-columns: repeat(auto-fill, minmax(var(--grid-min-w, 220px), 1fr)) !important; }

/* HTML 钩子：hero 对齐 */
.hero-slide[data-align="center"] .hero-content {
  margin: 0 auto;
  align-items: center;
  text-align: center;
}
.hero-slide[data-align="right"] .hero-content {
  margin-left: auto;
  align-items: flex-end;
  text-align: right;
}

/* HTML 钩子：卡片自身 ori（用户 CSS 可按此差异风格） */
.char-card[data-ori="F"] { --card-tint-top: rgba(var(--accent-rgb), 0.06); }
.char-card[data-ori="M"] { --card-tint-top: rgba(var(--accent-2-rgb), 0.06); }
.char-card[data-ori="N"] { --card-tint-top: rgba(var(--glass-rgb), 0.03); }

/* tuner popover（手动调节） */
.tuner {
  position: absolute;
  top: calc(100% + var(--tuner-top-offset));
  right: 0;
  z-index: 70;
  min-width: var(--tuner-w);
  padding: var(--tuner-p) var(--tuner-p) var(--tuner-pb);
  background: rgba(var(--bg-rgb), 0.92);
  -webkit-backdrop-filter: blur(var(--tuner-blur));
  backdrop-filter: blur(var(--tuner-blur));
  border: 1px solid var(--line-strong);
  border-radius: var(--r-tuner);
  box-shadow: 0 12px 40px rgba(var(--bg-rgb), 0.6),
              0 0 0 1px rgba(var(--accent-rgb), 0.12);
  display: flex;
  flex-direction: column;
  gap: var(--tuner-gap);
}

.tuner[hidden] { display: none; }

.tuner-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.tuner-label {
  font-family: var(--font-mono);
  font-size: var(--tuner-label-fs);
  color: var(--fg-3);
  letter-spacing: 0.05em;
}

.tuner-seg {
  display: flex;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  padding: 2px;
  gap: 2px;
}

.tuner-seg button {
  font-family: var(--font-mono);
  font-size: var(--tuner-seg-fs);
  letter-spacing: 0.03em;
  color: var(--fg-3);
  background: transparent;
  border: none;
  border-radius: var(--r-pill);
  padding: var(--tuner-seg-py) var(--tuner-seg-px);
  cursor: pointer;
  transition: color var(--t-fast), background var(--t-fast);
}

.tuner-seg button:hover { color: var(--fg-2); }
.tuner-seg button.is-on {
  color: #fff;
  background: rgba(var(--accent-rgb), 0.2);
  box-shadow: inset 0 0 0 1px rgba(var(--accent-rgb), 0.45);
}

.tuner-dots {
  display: flex;
  gap: 7px;
  align-items: center;
}

.tuner-dots button {
  width: var(--tuner-dot-size);
  height: var(--tuner-dot-size);
  border-radius: 50%;
  border: 1.5px solid var(--line-strong);
  background: var(--bg-elevated);
  cursor: pointer;
  padding: 0;
  transition: transform var(--t-fast), border-color var(--t-fast), box-shadow var(--t-fast);
}

.tuner-dots button:nth-child(1) { background: linear-gradient(135deg, rgb(99,102,241), rgb(168,85,247)); }
.tuner-dots button:nth-child(2) { background: linear-gradient(135deg, rgb(34,211,238), rgb(59,130,246)); }
.tuner-dots button:nth-child(3) { background: linear-gradient(135deg, rgb(217,247,29), rgb(132,204,22)); }
.tuner-dots button:nth-child(4) { background: linear-gradient(135deg, rgb(245,158,11), rgb(239,68,68)); }
.tuner-dots button:nth-child(5) { background: linear-gradient(135deg, rgb(16,185,129), rgb(6,182,212)); }
.tuner-dots button:nth-child(6) { background: linear-gradient(135deg, rgb(180,83,9), rgb(15,118,110)); }
/* 社区主题点：虚线外圈 */
.tuner-dots button.tuner-dot-community {
  border-style: dashed;
}

.tuner-dots button:hover { transform: scale(1.12); }
.tuner-dots button.is-on {
  border-color: #fff;
  box-shadow: 0 0 0 2px var(--bg-elevated), 0 0 0 3.5px rgba(255,255,255,0.85);
}

/* credits */
.credits-badge {
  display: flex;
  align-items: center;
  gap: var(--credits-gap);
  font-family: var(--font-mono);
  font-size: var(--credits-fs);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: color-mix(in srgb, rgb(var(--accent-rgb)) 30%, #fff);
  background: linear-gradient(135deg, rgba(var(--accent-rgb),.10), rgba(var(--accent-2-rgb),.07));
  border: 1px solid rgba(var(--accent-rgb), 0.3);
  border-radius: var(--r-pill);
  padding: var(--credits-py) var(--credits-px);
}

.credits-badge svg { width: 13px; height: 13px; filter: drop-shadow(0 0 5px rgba(var(--accent-rgb), 0.6)); }

.avatar {
  position: relative;
  width: var(--avatar-size);
  height: var(--avatar-size);
  border-radius: 50%;
  border: var(--avatar-border) solid var(--line-strong);
  overflow: hidden;
  cursor: pointer;
  padding: 0;
  background: var(--bg-elevated);
  transition: border-color var(--t-base), box-shadow var(--t-base);
}

.avatar:hover { border-color: var(--accent-primary); box-shadow: 0 0 14px rgba(var(--accent-rgb),.4); }

.avatar img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 20%; }

/* ─────────── User panel popover ─────────── */

.user-panel {
  position: absolute;
  top: calc(100% + var(--userpanel-top-offset));
  right: 0;
  z-index: 70;
  width: var(--userpanel-w);
  padding: var(--userpanel-p);
  background: rgba(var(--bg-rgb), 0.92);
  -webkit-backdrop-filter: blur(var(--userpanel-blur));
  backdrop-filter: blur(var(--userpanel-blur));
  border: 1px solid var(--line-strong);
  border-radius: var(--r-tuner);
  box-shadow: 0 12px 40px rgba(var(--bg-rgb), 0.6),
              0 0 0 1px rgba(var(--accent-rgb), 0.12);
  display: flex;
  flex-direction: column;
  gap: var(--userpanel-gap);
}

.user-panel[hidden] { display: none; }

.user-panel-head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding-bottom: var(--userpanel-gap);
  border-bottom: 1px solid var(--line);
}

.user-panel-avatar {
  width: var(--userpanel-avatar-size);
  height: var(--userpanel-avatar-size);
  border-radius: 50%;
  object-fit: cover;
  object-position: 50% 20%;
  border: 1.5px solid var(--line-strong);
  flex-shrink: 0;
}

.user-panel-id {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.user-panel-name {
  font-family: var(--font-display);
  font-size: var(--userpanel-name-fs);
  font-weight: 600;
  color: var(--fg);
  letter-spacing: 0.01em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.user-panel-tier {
  font-family: var(--font-mono);
  font-size: var(--userpanel-tier-fs);
  color: var(--fg-3);
  letter-spacing: 0.05em;
  margin-top: 2px;
}

.user-panel-stats {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.user-panel-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
}

.user-panel-label {
  font-family: var(--font-mono);
  font-size: var(--userpanel-label-fs);
  color: var(--fg-3);
  letter-spacing: 0.05em;
}

.user-panel-value {
  font-family: var(--font-mono);
  font-size: var(--userpanel-value-fs);
  color: var(--fg);
  font-variant-numeric: tabular-nums;
}

.user-panel-value b {
  font-weight: 700;
  color: var(--fg);
}

.user-panel-value-accent {
  color: color-mix(in srgb, rgb(var(--accent-rgb)) 35%, #fff);
  text-shadow: 0 0 6px rgba(var(--accent-rgb), 0.35);
}

/* ─────────── Hero 轮播 ─────────── */

.hero {
  position: relative;
  max-width: var(--max-w);
  margin: var(--hero-mt) auto 0;
  padding: 0 var(--pad-x);
}

.hero-track {
  position: relative;
  border-radius: var(--r-hero);
  overflow: hidden;
  border: 1px solid var(--line);
  aspect-ratio: var(--hero-aspect);
  min-height: var(--hero-min-h);
  background: var(--bg-elevated);
}

.hero-slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  transform: scale(1.03);
  transition: opacity var(--t-bg) var(--ease), transform var(--t-hero) var(--ease);
  pointer-events: none;
}

.hero-slide.current {
  opacity: 1;
  transform: scale(1);
  pointer-events: auto;
}

.hero-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}

.hero-shade {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(var(--bg-rgb), 0.88) 0%, rgba(var(--bg-rgb), 0.55) 38%, rgba(var(--bg-rgb), 0.05) 68%);
}

.hero-shade.shade-right {
  background: linear-gradient(270deg, rgba(var(--bg-rgb), 0.88) 0%, rgba(var(--bg-rgb), 0.62) 32%, rgba(var(--bg-rgb), 0.18) 62%, rgba(var(--bg-rgb), 0.02) 88%);
}

.hero-content {
  position: relative;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  gap: var(--hero-content-gap);
  padding: 0 var(--hero-content-px);
  max-width: var(--max-w-content);
}

.hero-content.align-right {
  margin-left: auto;
  align-items: flex-end;
  text-align: right;
}

.ooc-badge {
  font-family: var(--font-mono);
  font-size: var(--ooc-badge-fs);
  font-weight: 500;
  letter-spacing: var(--preset-tracking);
  color: color-mix(in srgb, rgb(var(--accent-rgb)) 35%, #fff);
  background: rgba(var(--accent-rgb), 0.16);
  border: 1px solid rgba(var(--accent-rgb), 0.5);
  border-radius: var(--ooc-badge-r);
  padding: var(--ooc-badge-py) var(--ooc-badge-px);
  text-shadow: 0 0 12px rgba(var(--accent-rgb), 0.5);
  -webkit-backdrop-filter: blur(var(--ooc-badge-blur));
  backdrop-filter: blur(var(--ooc-badge-blur));
  display: none;
}

.hero-title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--hero-title-fs);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  text-shadow: 0 4px 30px rgba(0, 0, 0, 0.6);
  display: flex;
  flex-direction: column;
  gap: var(--hero-title-mb);
}

.hero-sub {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: var(--hero-sub-fs);
  letter-spacing: var(--tracking-wider);
  color: var(--fg-2);
}

.hero-quote {
  font-size: var(--hero-quote-fs);
  color: var(--fg);
  text-shadow: 0 2px 14px rgba(0, 0, 0, 0.7);
  max-width: var(--max-w-quote);
}

.hero-meta {
  display: flex;
  align-items: center;
  gap: var(--hero-meta-gap);
  font-family: var(--font-mono);
  font-size: var(--hero-meta-fs);
  font-variant-numeric: tabular-nums;
  color: var(--fg-2);
}

.hero-meta .stat { display: inline-flex; align-items: center; gap: 5px; }
.hero-meta .stat svg { width: 13px; height: 13px; color: var(--accent-secondary); }

.model-chip {
  font-size: var(--model-fs);
  color: var(--accent-secondary);
  border: 1px dashed rgba(var(--accent-rgb), 0.45);
  border-radius: var(--model-r);
  padding: var(--model-py) var(--model-px);
  display: none;
}

.cta-btn {
  margin-top: var(--cta-mt);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--cta-fs);
  letter-spacing: var(--cta-tracking);
  color: #fff;
  background: var(--accent-grad);
  border: none;
  border-radius: var(--cta-r);
  padding: var(--cta-py) var(--cta-px);
  cursor: pointer;
  box-shadow: var(--cta-shadow);
  transition: transform var(--t-base) var(--ease), box-shadow var(--t-base) var(--ease);
}

.cta-btn:hover {
  transform: translateY(var(--cta-lift));
  box-shadow: var(--cta-shadow-hover);
}

.cta-btn:active { transform: translateY(0); }

.cta-break {
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: var(--text-xs);
  opacity: 0.85;
}

.hero-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 5;
  width: var(--arrow-size);
  height: var(--arrow-size);
  border-radius: 50%;
  border: 1px solid var(--line-strong);
  background: rgba(var(--bg-rgb), 0.55);
  -webkit-backdrop-filter: blur(var(--blur-md));
  backdrop-filter: blur(var(--blur-md));
  color: var(--fg);
  font-size: var(--arrow-fs);
  cursor: pointer;
  transition: all var(--t-base) var(--ease);
}

.hero-arrow:hover { border-color: var(--accent-primary); box-shadow: 0 0 18px rgba(var(--accent-rgb),.45); }
.hero-arrow.prev { left: calc(var(--pad-x) + var(--arrow-offset)); }
.hero-arrow.next { right: calc(var(--pad-x) + var(--arrow-offset)); }

.hero-dots {
  position: absolute;
  bottom: var(--dots-bottom);
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: var(--dot-gap);
  z-index: 5;
}

.hero-dots button {
  width: var(--dot-w);
  height: var(--dot-h);
  border-radius: 2px;
  border: none;
  background: rgba(255, 255, 255, 0.25);
  cursor: pointer;
  transition: all var(--t-card) var(--ease);
}

.hero-dots button.current {
  background: var(--accent-grad);
  box-shadow: 0 0 10px rgba(var(--accent-2-rgb), 0.7);
}

/* ─────────── 分类筛选器 ─────────── */

.filterbar {
  position: sticky;
  top: var(--filterbar-top);
  z-index: 50;
  margin-top: var(--filterbar-mt);
  background: rgba(var(--bg-rgb), 0.72);
  -webkit-backdrop-filter: blur(var(--filterbar-blur));
  backdrop-filter: blur(var(--filterbar-blur));
  border-top: 1px solid rgba(var(--accent-rgb), 0.35);
  box-shadow: 0 1px 24px rgba(var(--accent-rgb), 0.12);
}

.filterbar-wrap {
  position: relative;
  max-width: var(--max-w);
  margin: 0 auto;
}

.filter-scroll {
  display: flex;
  align-items: center;
  gap: var(--filterbar-gap);
  padding: var(--filterbar-py) var(--pad-x);
  padding-right: calc(var(--pad-x) + 52px);
  overflow-x: auto;
  scrollbar-width: none;
  mask-image: linear-gradient(to right, #000 calc(100% - 140px), transparent calc(100% - 50px));
  -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 140px), transparent calc(100% - 50px));
}

.filter-scroll::-webkit-scrollbar { display: none; }

.fpill {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  gap: var(--fpill-gap);
  font-family: var(--font-body);
  font-weight: 500;
  font-size: var(--fpill-fs);
  letter-spacing: var(--tracking-normal);
  color: var(--fg-2);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  padding: var(--fpill-py) var(--fpill-px);
  cursor: pointer;
  transition: all var(--t-base) var(--ease);
  white-space: nowrap;
}

.fpill svg { width: 13px; height: 13px; }

.fpill:hover { color: var(--fg); border-color: var(--line-strong); transform: translateY(-1px); }

.fpill.active {
  color: #fff;
  background: var(--accent-grad);
  border-color: transparent;
  box-shadow: 0 0 20px rgba(var(--accent-rgb), 0.45);
}

.fpill-18.active {
  background: linear-gradient(135deg, rgb(var(--accent-2-rgb)), var(--warn-nsfw));
  box-shadow: 0 0 20px rgba(var(--accent-2-rgb), 0.5);
}

.filter-count {
  font-family: var(--font-mono);
  font-size: var(--filter-count-fs);
  color: var(--fg-3);
  font-variant-numeric: tabular-nums;
}

.grid-head {
  max-width: var(--max-w);
  margin: var(--grid-mt) auto 0;
  padding: 0 var(--pad-x);
  display: flex;
  justify-content: flex-end;
}

.fpill-sep {
  flex-shrink: 0;
  width: 1px;
  height: 16px;
  margin: 0 var(--space-2);
  background: var(--line);
}

.fpill-tag {
  font-weight: 400;
  letter-spacing: 0.01em;
  color: var(--fg-3);
  background: transparent;
  border-color: transparent;
  font-family: var(--font-mono);
}

.fpill-tag.is-on {
  color: var(--fg);
  background: transparent;
  border-color: rgba(var(--accent-rgb), 0.45);
  box-shadow: none;
}

.fpill-more {
  position: absolute;
  right: var(--pad-x);
  top: 50%;
  transform: translateY(-50%);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  color: var(--fg-2);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 50%;
  cursor: pointer;
  transition: all var(--t-base) var(--ease);
  z-index: 2;
}

.fpill-more:hover {
  color: var(--fg);
  border-color: var(--line-strong);
  background: var(--surface-hover);
  transform: translateY(calc(-50% - 1px));
}

.fpill-more svg { width: 16px; height: 16px; }

/* ─────────── 主卡片流 ─────────── */

.grid {
  max-width: var(--max-w);
  margin: var(--grid-mt) auto 0;
  padding: 0 var(--pad-x);
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--grid-gap);
}

@media (min-width: 760px) {
  .grid { grid-template-columns: repeat(3, 1fr); gap: var(--grid-gap-md); }
}
@media (min-width: 1080px) {
  .grid { grid-template-columns: repeat(4, 1fr); }
}

.char-card {
  position: relative;
  border-radius: var(--r-card);
  overflow: hidden;
  background: var(--bg-elevated);
  border: 1px solid var(--line);
  cursor: pointer;
  transition: transform var(--t-card) var(--ease), border-color var(--t-card) var(--ease), box-shadow var(--t-card) var(--ease);
  opacity: 0;
  translate: 0 var(--card-reveal-y);
}

.char-card.shown {
  opacity: 1;
  translate: 0 0;
  transition: opacity var(--t-card-reveal) var(--ease), translate var(--t-card-reveal) var(--ease), transform var(--t-card) var(--ease), border-color var(--t-card) var(--ease), box-shadow var(--t-card) var(--ease);
}

.char-card:hover {
  transform: translateY(var(--card-hover-y));
  border-color: rgba(var(--accent-rgb), 0.55);
  box-shadow:
    0 14px 40px rgba(0, 0, 0, 0.5),
    0 0 0 1px rgba(var(--accent-rgb), 0.25),
    0 0 32px rgba(var(--accent-rgb), 0.22);
}

.card-visual {
  position: relative;
  aspect-ratio: var(--card-aspect);
  overflow: hidden;
}

.card-visual img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s var(--ease);
}

.char-card:hover .card-visual img { transform: scale(var(--card-hover-scale)); }

/* 主题色 tint（很淡，让图跟主题更融合） */
.card-visual::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(180deg, var(--card-tint-top), var(--card-tint-bottom));
  mix-blend-mode: overlay;
  pointer-events: none;
  transition: opacity 0.4s var(--ease);
}

.char-card:hover .card-visual::before { opacity: 0.6; }

.card-visual::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 2;
  background: linear-gradient(180deg, transparent 46%, rgba(var(--bg-rgb), 0.62) 78%, rgba(var(--bg-rgb), 0.92) 100%);
  pointer-events: none;
}

/* 收藏心跳 */
.fav-btn {
  position: absolute;
  top: var(--fav-offset);
  right: var(--fav-offset);
  z-index: 4;
  width: var(--fav-size);
  height: var(--fav-size);
  border-radius: 50%;
  border: 1px solid var(--line-strong);
  background: rgba(var(--bg-rgb), 0.55);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  color: var(--fg-2);
  display: grid;
  place-items: center;
  cursor: pointer;
  opacity: 0;
  transition: all var(--t-base) var(--ease);
}

.fav-btn svg { width: var(--fav-icon); height: var(--fav-icon); }

.fav-btn:hover { color: var(--accent-secondary); border-color: rgba(var(--accent-2-rgb), 0.6); transform: scale(1.1); }

.fav-btn.liked {
  color: var(--accent-secondary);
  border-color: rgba(var(--accent-2-rgb), 0.7);
  background: rgba(var(--accent-2-rgb), 0.16);
  animation: heartPop 0.38s var(--ease);
}

.char-card:hover .fav-btn,
.fav-btn.liked { opacity: 1; }

@keyframes heartPop {
  0% { transform: scale(1); }
  40% { transform: scale(1.35); }
  100% { transform: scale(1); }
}

.card-chips {
  position: absolute;
  left: var(--fav-offset);
  bottom: var(--fav-offset);
  z-index: 3;
  display: none;
  gap: var(--chip-gap);
  flex-wrap: wrap;
}

.chip {
  font-family: var(--font-mono);
  font-size: var(--card-chip-fs);
  letter-spacing: 0.03em;
  color: var(--fg);
  background: rgba(var(--bg-rgb), 0.62);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: var(--chip-r);
  padding: var(--chip-py) var(--chip-px);
  -webkit-backdrop-filter: blur(var(--chip-blur));
  backdrop-filter: blur(var(--chip-blur));
}

.chip.ooc {
  color: color-mix(in srgb, rgb(var(--accent-rgb)) 35%, #fff);
  border-color: rgba(var(--accent-rgb), 0.55);
  background: rgba(var(--accent-rgb), 0.2);
  text-shadow: 0 0 8px rgba(var(--accent-rgb), 0.5);
}

.chip.hot {
  color: color-mix(in srgb, rgb(var(--accent-2-rgb)) 35%, #fff);
  border-color: rgba(var(--accent-2-rgb), 0.55);
  background: rgba(var(--accent-2-rgb), 0.16);
}

.card-body {
  position: relative;
  padding: var(--card-p-top) var(--card-p-x) var(--card-p);
  display: flex;
  flex-direction: column;
  gap: var(--card-gap);
}

.card-name-row {
  display: flex;
  align-items: baseline;
  gap: var(--space-2);
  flex-wrap: wrap;
}

.card-name {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--card-name-fs);
  letter-spacing: var(--card-name-tracking);
  line-height: var(--leading-snug);
}

.card-creator {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--fg-3);
  display: inline-flex;
  align-items: center;
  gap: 3px;
}

.verified {
  display: inline-grid;
  place-items: center;
  width: 13px;
  height: 13px;
  border-radius: 50%;
  background: var(--accent-grad);
  color: #fff;
  font-size: var(--text-3xs);
  font-weight: 700;
}

.card-intro {
  font-size: var(--card-intro-fs);
  line-height: var(--leading-relaxed);
  color: var(--fg-2);
  display: -webkit-box;
  -webkit-line-clamp: var(--card-intro-lines);
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.card-stats {
  display: flex;
  align-items: center;
  gap: var(--card-stats-gap);
  margin-top: 2px;
  font-family: var(--font-mono);
  font-size: var(--card-stats-fs);
  font-variant-numeric: tabular-nums;
  color: var(--fg-2);
}

.card-stats .stat { display: inline-flex; align-items: center; gap: var(--space-1); }
.card-stats .stat svg { width: 12px; height: 12px; color: var(--accent-primary); }

.card-stats .model {
  margin-left: auto;
  font-size: var(--text-2xs);
  color: var(--fg-3);
  border: 1px dashed rgba(255, 255, 255, 0.18);
  border-radius: var(--model-r);
  padding: var(--model-py) var(--model-px);
  white-space: nowrap;
}

.grid-empty {
  max-width: var(--max-w);
  margin: 40px auto;
  padding: 0 var(--pad-x);
  text-align: center;
  color: var(--fg-3);
  font-size: var(--text-md);
}

.page-foot {
  max-width: var(--max-w);
  margin: var(--foot-mt) auto var(--foot-mb);
  padding: var(--foot-pt) var(--pad-x) 0;
  border-top: 1px solid var(--line);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--foot-gap);
  font-family: var(--font-mono);
  font-size: var(--foot-fs);
  letter-spacing: var(--foot-tracking);
  color: var(--fg-3);
}

.foot-mark {
  color: color-mix(in srgb, rgb(var(--accent-rgb)) 50%, #fff);
  font-weight: 700;
  letter-spacing: 0.2em;
}

.foot-sig {
  display: none;
  margin-left: auto;
  padding: var(--foot-sig-py) var(--foot-sig-px);
  border: 1px solid rgba(var(--accent-rgb), 0.4);
  border-radius: var(--foot-sig-r);
  color: color-mix(in srgb, rgb(var(--accent-rgb)) 40%, #fff);
  background: rgba(var(--accent-rgb), 0.06);
  text-shadow: 0 0 8px rgba(var(--accent-rgb), 0.4);
}

/* 主题签名档：每个主题显示自己那条（ink = 默认，body 无 data-theme 时也走它） */
/* foot-sig 签名档：默认全隐藏，只显示匹配当前主题的那一条 */
.page-foot .foot-sig { display: none; }
body:not([data-theme]) .page-foot .foot-sig[data-sig="ink"],
[data-theme="ink"] .page-foot .foot-sig[data-sig="ink"],
[data-theme="ice"] .page-foot .foot-sig[data-sig="ice"],
[data-theme="lime"] .page-foot .foot-sig[data-sig="lime"],
[data-theme="amber"] .page-foot .foot-sig[data-sig="amber"],
[data-theme="aurora"] .page-foot .foot-sig[data-sig="aurora"] { display: inline-block; }

/* ─────────── 底部导航栏（iOS tab bar · 4 等分 · 无中心 +） ─────────── */

.bottombar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 70;
  display: none;
  grid-template-columns: repeat(4, 1fr);
  background: rgba(var(--bg-rgb), 0.72);
  -webkit-backdrop-filter: blur(24px) saturate(180%);
  backdrop-filter: blur(24px) saturate(180%);
  border-top: 0.5px solid rgba(255, 255, 255, 0.08);
  padding: 6px 4px calc(6px + env(safe-area-inset-bottom));
  box-shadow: 0 -0.5px 0 rgba(0, 0, 0, 0.04);
}

.tab {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  background: none;
  border: none;
  color: var(--fg-3);
  font-family: var(--font-body);
  font-size: 10px;
  letter-spacing: 0.01em;
  cursor: pointer;
  padding: 4px 2px;
  border-radius: 8px;
  transition: color var(--t-base) var(--ease);
  -webkit-tap-highlight-color: transparent;
}

.tab svg { width: 24px; height: 24px; }

.tab.active {
  color: var(--accent-primary);
  text-shadow: none;
}
.tab.active svg { filter: none; }

/* 中间的 + 不再走特殊描边，跟其它 tab 完全等权（iOS tab bar 规则） */
.tab-create svg {
  border: none;
  border-radius: 0;
  padding: 0;
}

/* ─────────── 响应式 ─────────── */

@media (max-width: 1080px) {
  .main-nav { gap: 2px; }
  .nav-item { padding: var(--nav-py) 9px; font-size: var(--text-sm); }
}

/* ─────────── 移动端（≤860px · iOS 系统材质风） ─────────── */

@media (max-width: 860px) {
  :root {
    --topbar-h-mobile: 52px;
    --presetbar-h-mobile: 44px;
    --filterbar-top-mobile: calc(var(--topbar-h-mobile) + var(--presetbar-h-mobile));
    /* mobile 卡片比例：瘦高 image（10/17，参考 Character.AI 实测 400:680）。
       必须放在 :root 选择器内（line 1795 之前的裸声明写法是 bug，被 CSS 解析器忽略）。 */
    --card-aspect: 10 / 17;
  }

  body { padding-bottom: 64px; }

  /* ──── Topbar：iOS navigation bar（.thinMaterial 感） ──── */
  .topbar {
    background: rgba(var(--bg-rgb), 0.72);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    backdrop-filter: blur(20px) saturate(180%);
    border-bottom: 0.5px solid rgba(255, 255, 255, 0.08);
    box-shadow: none;
  }
  .topbar-row {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    column-gap: 6px;
    padding: 0 12px;
    min-height: var(--topbar-h-mobile);
  }
  /* .topbar-right 内部 main-nav/preset-rail/tuner 都 hidden,只剩 credits visible
     · 容器 display:contents 让子元素直接进 .topbar-row 流 */
  .topbar-right { display: contents; }
  .logo, .avatar, .preset-gear-mobile { display: none; }
  .credits-badge { grid-column: 3; }
  .logo-text { font-size: 14px; letter-spacing: 0.01em; }
  .logo-mark { font-size: 15px; text-shadow: none; animation: none; }

  /* 搜索：iOS 风格圆形图标按钮（点击再展开为输入） */
  .search {
    flex: 0 0 auto;
    width: 36px;
    height: 36px;
    padding: 0;
    justify-content: center;
    border-radius: 50%;
    cursor: pointer;
    background: rgba(255, 255, 255, 0.08);
    border: 0.5px solid rgba(255, 255, 255, 0.06);
    box-shadow: none;
  }
  .search:focus-within {
    box-shadow: 0 0 0 3px rgba(var(--accent-rgb), 0.18);
    border-color: transparent;
  }
  .search input, .search kbd { display: none; }
  .search-icon { width: 17px; height: 17px; color: var(--fg-2); }

  /* 桌面 preset 群和主导航：移动端隐藏 */
  .main-nav, .topbar-right > .preset-rail { display: none; }
  /* .topbar-right 容器在 mobile 透明,让 credits/avatar 直接进 .topbar-row flex 流 */
  .topbar-right { display: contents; }

  /* Credits：iOS-style 胶囊，无描边（mobile 紧凑） */
  .credits-badge {
    padding: 4px 8px;
    font-size: 11px;
    gap: 3px;
    background: rgba(255, 255, 255, 0.08);
    border: 0.5px solid rgba(255, 255, 255, 0.06);
    color: var(--fg);
    box-shadow: none;
    text-shadow: none;
  }
  .credits-badge svg { width: 11px; height: 11px; color: var(--fg-2); }
  .avatar {
    width: 26px;
    height: 26px;
    border: 0.5px solid rgba(255, 255, 255, 0.12);
    box-shadow: none;
  }

  /* ──── Preset 行：iOS Segmented Control（嵌入 topbar-row 视觉一行 · 居中） ──── */
  .preset-rail-mobile {
    grid-column: 2;
    grid-row: 1;
    position: relative;
    top: 0;
    display: flex;
    align-items: center;
    gap: 0;
    padding: 0;
    background: rgba(255, 255, 255, 0.06);
    border: 0.5px solid rgba(255, 255, 255, 0.08);
    border-radius: 8px;
    height: 30px;
    min-width: 0;
    max-width: none;
  }
  /* 移动端 search 保留为圆形图标按钮（与 preset/credits 同列一行） */
  .search { grid-column: 1; }
  .preset-rail-mobile .preset-btn {
    position: relative;
    z-index: 1;
    flex: 1 1 0;
    min-width: 0;
    font-family: var(--font-body);
    font-weight: 500;
    font-size: 12px;
    letter-spacing: 0;
    color: var(--fg-2);
    background: transparent;
    border: none;
    border-radius: 6px;
    padding: 0 4px;
    height: 100%;
    min-height: 0;
    line-height: 1;
    box-shadow: none;
    text-shadow: none;
    transition: background var(--t-base) var(--ease), color var(--t-base) var(--ease);
  }
  .preset-rail-mobile .preset-btn.is-on {
    color: var(--fg);
    background: rgba(255, 255, 255, 0.32);
    box-shadow:
      0 0.5px 1px rgba(0, 0, 0, 0.08),
      0 1.5px 3px rgba(0, 0, 0, 0.12),
      inset 0 0 0 0.5px rgba(255, 255, 255, 0.16);
  }
  .preset-gear-mobile {
    flex: 0 0 30px;
    width: 30px;
    height: 30px;
    background: transparent;
    border: none;
    color: var(--fg-2);
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
  }
  .preset-gear-mobile { width: 26px; height: 26px; display: none; }
  .preset-gear-mobile svg { width: 16px; height: 16px; }

  /* ──── Hero：1:1 方形（与 1 屏内卡片节奏平衡，不再吃满屏） ──── */
  .hero { margin-top: 12px; padding: 0 16px; }
  .hero-track {
    aspect-ratio: 1 / 1;
    height: auto;
    min-height: 0;
    border-radius: 20px;
    border: 0.5px solid rgba(255, 255, 255, 0.08);
    box-shadow:
      0 0.5px 1px rgba(0, 0, 0, 0.04),
      0 8px 24px rgba(0, 0, 0, 0.18);
    overflow: hidden;
  }
  .hero-slide {
    align-items: flex-end;
    padding-bottom: 16px;
  }
  .hero-content {
    gap: 6px;
    padding: 0 18px;
    max-width: none;
  }
  .hero-content.align-right { align-items: flex-start; text-align: left; margin-left: 0; }

  /* iOS 风格底部渐变 + 玻璃感 */
  .hero-shade, .hero-shade.shade-right {
    background: linear-gradient(180deg,
      rgba(var(--bg-rgb), 0) 0%,
      rgba(var(--bg-rgb), 0) 30%,
      rgba(var(--bg-rgb), 0.45) 65%,
      rgba(var(--bg-rgb), 0.88) 100%);
    backdrop-filter: blur(0.5px);
  }

  .ooc-badge {
    display: inline-flex;
    font-family: var(--font-mono);
    font-size: 10.5px;
    letter-spacing: 0.04em;
    padding: 4px 9px;
    background: rgba(255, 255, 255, 0.12);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    border: 0.5px solid rgba(255, 255, 255, 0.18);
    color: #fff;
    border-radius: 6px;
    box-shadow: none;
    text-shadow: none;
  }
  .hero-title {
    font-size: 26px;
    line-height: 1.05;
    letter-spacing: -0.02em;
    font-weight: 700;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
  }
  .hero-sub { font-size: 12.5px; opacity: 0.85; font-weight: 400; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3); }
  .hero-quote {
    font-size: 12.5px;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    overflow: hidden;
    line-height: 1.45;
    opacity: 0.92;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
  }
  .hero-meta { gap: 10px; font-size: 11.5px; flex-wrap: wrap; opacity: 0.85; }
  .hero-meta .stat { text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3); }
  .hero-meta .model-chip {
    font-size: 10px;
    padding: 2px 7px;
    background: rgba(255, 255, 255, 0.1);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    border: 0.5px solid rgba(255, 255, 255, 0.15);
    color: #fff;
    border-radius: 5px;
    text-shadow: none;
  }
  .cta-btn {
    padding: 9px 18px;
    font-size: 13.5px;
    font-weight: 600;
    width: auto;
    justify-content: center;
    background: var(--accent-primary);
    border: none;
    color: #fff;
    border-radius: 11px;
    box-shadow:
      0 0.5px 1px rgba(0, 0, 0, 0.08),
      0 4px 12px rgba(var(--accent-rgb), 0.32);
    text-shadow: none;
    letter-spacing: 0.01em;
  }
  .cta-btn:hover {
    transform: none;
    filter: brightness(1.05);
    box-shadow:
      0 0.5px 1px rgba(0, 0, 0, 0.08),
      0 6px 16px rgba(var(--accent-rgb), 0.4);
  }
  .cta-break { display: none; }
  .hero-arrow { display: none; }
  .hero-dots { bottom: 8px; left: 50%; transform: translateX(-50%); }

  /* ──── Filterbar：胶囊横滑（不 sticky · 跟内容一起滚 · iOS 原生做法） ──── */
  .filterbar {
    position: static;
    margin-top: 14px;
    background: transparent;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    border: none;
    box-shadow: none;
  }
  .filterbar > .filter-scroll {
    padding: 8px 16px;
    gap: 7px;
  }
  .fpill {
    padding: 0 14px;
    font-size: 13px;
    font-weight: 500;
    min-height: 30px;
    height: 30px;
    border-radius: 15px;
    background: rgba(255, 255, 255, 0.06);
    border: 0.5px solid rgba(255, 255, 255, 0.08);
    color: var(--fg-2);
    box-shadow: none;
    text-shadow: none;
    letter-spacing: 0.01em;
    transition: background var(--t-base) var(--ease), color var(--t-base) var(--ease);
  }
  .fpill:hover { background: rgba(255, 255, 255, 0.1); color: var(--fg); }
  .fpill.active {
    background: var(--accent-primary);
    color: #fff;
    border-color: transparent;
    box-shadow: 0 1px 3px rgba(var(--accent-rgb), 0.32);
  }

  /* ──── 卡片 grid：iOS 列表卡片（2 列 + 大圆角 + 软阴影） ──── */
  --card-aspect: 10 / 17;
  .grid {
    padding: 0 16px;
    gap: 14px;
    margin-top: 16px;
  }
  .char-card {
    border-radius: 18px;
    border: 0.5px solid rgba(255, 255, 255, 0.08);
    background: rgba(var(--bg-rgb), 0.4);
    box-shadow:
      0 0.5px 1px rgba(0, 0, 0, 0.04),
      0 4px 12px rgba(0, 0, 0, 0.12);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
  }
  .card-visual {
    border-radius: 18px;
    overflow: hidden;
  }
  .card-visual::after {
    background: linear-gradient(180deg, transparent 42%, rgba(var(--bg-rgb), 0.48) 64%, rgba(var(--bg-rgb), 0.82) 88%, rgba(var(--bg-rgb), 0.92) 100%);
  }
  /* 整张卡 = image · body 绝对定位叠在 image 底部渐变上 */
  .card-body {
    position: absolute;
    z-index: 3;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 11px 12px 10px;
    gap: 4px;
    background: transparent;
    color: #fff;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.45);
  }
  .card-name-row {
    align-items: baseline;
    gap: 5px;
  }
  .card-name {
    font-size: 15px;
    font-weight: 600;
    letter-spacing: 0;
    color: #fff;
  }
  /* mobile：隐藏 creator handle 文字 · 只留 verified 单点信号 · 详情页另设入口 */
  .card-creator {
    display: none;
  }
  .verified {
    background: rgba(255, 255, 255, 0.88);
    color: #1a1a1a;
  }
  .card-intro {
    font-size: 11.5px;
    line-height: 1.4;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    overflow: hidden;
    color: rgba(255, 255, 255, 0.82);
  }
  .card-stats {
    gap: 8px;
    flex-wrap: wrap;
    font-size: 10.5px;
    color: rgba(255, 255, 255, 0.7);
  }
  .card-stats .stat svg { color: rgba(255, 255, 255, 0.75); }
  .card-stats .model {
    display: inline-flex;
    font-size: 9px;
    padding: 1.5px 6px;
    background: rgba(255, 255, 255, 0.12);
    border: 0.5px solid rgba(255, 255, 255, 0.22);
    color: rgba(255, 255, 255, 0.82);
    border-radius: 4px;
    margin-left: 0;
  }
  .fav-btn {
    width: 32px;
    height: 32px;
    background: rgba(var(--bg-rgb), 0.6);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    border: 0.5px solid rgba(255, 255, 255, 0.18);
    opacity: 1;
  }
  .fav-btn svg { width: 14px; height: 14px; }
  .fav-btn.liked {
    background: rgba(var(--bg-rgb), 0.6);
    border-color: var(--accent-primary);
  }

  .bottombar { display: grid; }
  .page-foot { display: none; }
}

/* 移动端 filter 横滑渐隐提示（避免「后面还有」被截的突兀感） */
@media (max-width: 860px) {
  :root {
    --fpill-fs: 12.5px;
    --fpill-py: 6px;
    --fpill-px: 14px;
  }
}

/* ─────────── 移动端 sub-breakpoint（≤480px · 小屏手机） ─────────── */

@media (max-width: 480px) {
  :root {
    --topbar-h-mobile: 48px;
    --presetbar-h-mobile: 42px;
    --fpill-fs: 11.5px;
    --fpill-py: 5px;
    --fpill-px: 12px;
  }
  .logo-mark { font-size: 16px; }
  .logo-text { font-size: 15px; }
  .search { width: 32px; height: 32px; }
  .search-icon { width: 15px; height: 15px; }
  .avatar { width: 28px; height: 28px; }
  .credits-badge { padding: 4px 8px; font-size: 11px; }
  .credits-badge svg { width: 12px; height: 12px; }

  .hero { padding: 0 14px; }
  .hero-track { aspect-ratio: 1 / 1; border-radius: 18px; }
  .hero-content { padding: 0 16px; gap: 5px; }
  .hero-title { font-size: 23px; }
  .hero-sub { font-size: 12px; }
  .hero-quote { font-size: 12px; -webkit-line-clamp: 2; line-clamp: 2; }
  .cta-btn { padding: 8px 16px; font-size: 12.5px; }

  .preset-rail-mobile { height: 30px; max-width: 200px; }
  .preset-rail-mobile .preset-btn { font-size: 12px; }

  .filter-scroll { padding: 7px 14px; padding-right: calc(14px + 44px); }
  .fpill-more { width: 32px; height: 32px; right: 14px; }
  .grid { padding: 0 14px; gap: 12px; }
}

/* ─────────── 动效尊重 ─────────── */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  html { scroll-behavior: auto; }
}