/* 自动生成，勿手改 —— 由 scripts/bundle-css.mjs 合并（改样式请改 public/css/ 下的分文件） */
/* ===== tokens.css ===== */
/* ==========================================================================
   设计 token
   规则：组件 CSS 里不允许出现自由 hex，一切颜色/间距/圆角都必须来自这里。
   暗色是默认主题（霓虹身份建立在暗底上），亮色在 themes.css 里同名覆盖。
   ========================================================================== */

/* --------------------------------------------------------------------------
   自托管 Inter（只覆盖拉丁/数字，4 个字重共 68KB）。
   为什么自托管而不是外链：外链字体 = 首屏多一次跨域往返，且国内不一定通。
   为什么限定 unicode-range：中文有 MiSans/鸿蒙/PingFang，Inter 不掺和中文，
   浏览器按字形回退 —— 拉丁与数字走 Inter，中文落到系统黑体。
   -------------------------------------------------------------------------- */
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/fonts/inter-latin-400-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("/fonts/inter-latin-600-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("/fonts/inter-latin-700-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url("/fonts/inter-latin-800-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  /* --- 字体：自托管 Inter（只覆盖拉丁/数字，共 68KB）---
     中文继续用系统黑体（MiSans/鸿蒙/PingFang）——中文 webfont 动辄十几 MB，
     不适合塞进 App；而系统那几套本身就是很好的中文字体。
     浏览器按字形逐个回退：拉丁/数字用 Inter，中文落到系统黑体。 */
  /* --- 背景层级 ---
     暖色的深底。原来是深蓝黑（#070a14 那一系），
     和「温馨」是打架的 —— 冷底会把任何暖色都压下去。 */
  --bg-0: #120d0a;          /* 页面底 */
  --bg-1: #1b1512;          /* 卡片面 */
  --bg-2: #29201a;          /* 抬升面 / 输入框 */
  --bg-3: #3a2c22;          /* 悬停抬升 */

  /* --- 玻璃拟态 --- */
  --glass-bg: rgba(41, 32, 26, 0.55);
  --glass-bg-strong: rgba(27, 21, 18, 0.85);
  --glass-border: rgba(255, 236, 214, 0.10);
  --glass-highlight: rgba(255, 236, 214, 0.06);

  /* --- 文字 --- */
  --text-0: #f2f5ff;        /* 主要 */
  --text-1: #aab3d0;        /* 次要 */
  --text-2: #6c7799;        /* 弱化 / 占位 */
  --text-inverse: #120d0a;

  /* --- 强调色：暖色系 ---
     变量名保留（pink/cyan/violet）是为了不动几十处引用 ——
     但值已经全部换成暖色：玫瑰 / 琥珀 / 陶土 / 橄榄 / 暖金。
     原来的紫青粉是霓虹那套，和「温馨」相冲。 */
  --neon-pink: #e2586b;    /* 玫瑰 */
  --neon-cyan: #e8963c;    /* 琥珀（正文链接色） */
  --neon-violet: #cf6a3e;  /* 陶土 */
  --neon-lime: #a3a03a;    /* 橄榄 */
  --neon-amber: #f0b429;   /* 暖金 */

  /* --- 语义色 ---
     语义色不能全暖：成功和警告都变成橙黄就分不清了。
     所以保留可辨识的色相，只把纯度降下来、往暖里偏一点。 */
  --ok: #7fb069;           /* 暖绿 */
  --warn: #e8963c;         /* 琥珀 */
  --danger: #d9534f;       /* 暖红 */
  --info: #cf6a3e;         /* 陶土 */

  /* --- 渐变 --- */
  --grad-primary: linear-gradient(135deg, #f0b429 0%, #e8963c 48%, #e2586b 100%);
  --grad-cta: linear-gradient(135deg, #e8963c 0%, #e2586b 100%);
  --grad-warm: linear-gradient(135deg, #f0b429 0%, #e2586b 100%);
  --grad-cool: linear-gradient(135deg, #a3a03a 0%, #e8963c 100%);

  /* 用于渐变描边（配合 padding + background-clip 技巧） */
  --grad-border: linear-gradient(135deg,
    rgba(240, 180, 41, 0.62), rgba(207, 106, 62, 0.50), rgba(226, 88, 107, 0.62));

  /* --- 辉光（昂贵，仅用于 hover/focus 与少数 hero 元素） --- */
  --glow-pink: 0 0 12px rgba(226, 88, 107, 0.55);
  --glow-cyan: 0 0 12px rgba(232, 150, 60, 0.50);
  --glow-violet: 0 0 12px rgba(207, 106, 62, 0.55);
  --glow-soft: 0 0 24px rgba(207, 106, 62, 0.30);
  --glow-lift: 0 12px 32px rgba(0, 0, 0, 0.55);

  /* --- 阴影（朴素，静态元素只用这个） --- */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.35);
  --shadow-md: 0 8px 24px rgba(0, 0, 0, 0.40);
  --shadow-lg: 0 16px 48px rgba(0, 0, 0, 0.50);

  /* --- 圆角 --- */
  --r-xs: 6px;
  --r-sm: 8px;
  --r-md: 14px;
  --r-lg: 22px;
  --r-xl: 28px;
  --r-pill: 999px;

  /* --- 间距（8px 基线，排列整齐的根本） --- */
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 24px;
  --s-6: 32px;
  --s-7: 48px;
  --s-8: 64px;

  /* --- 字体 --- */
  --font-sans: "Inter", "MiSans", "HarmonyOS Sans SC", "PingFang SC", "Microsoft YaHei",
    system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: "JetBrains Mono", "Cascadia Code", Consolas, monospace;
  /* 编辑排版层用。只用系统自带的衬线字体 —— 引外链字体等于给首屏加一次
     网络往返，和「零额外请求」的取向相反。中文回退到宋体系（宋体才是衬线）。 */
  --font-editorial: Georgia, "Times New Roman", "Songti SC", STSong, SimSun, serif;

  /* 正文固定，标题**流体**：小屏不挤、大屏更有气势 */
  --fs-xs: 12px;
  --fs-sm: 14px;
  --fs-md: 16px;
  --fs-lg: clamp(19px, 1.6vw, 22px);
  --fs-xl: clamp(23px, 3.2vw, 32px);
  --fs-2xl: clamp(28px, 4.4vw, 42px);
  --fs-3xl: clamp(34px, 5.6vw, 58px);

  --lh-tight: 1.22;
  --lh-normal: 1.6;

  --fw-normal: 400;
  --fw-medium: 500;
  --fw-bold: 700;
  --fw-black: 800;

  /* --- 布局 --- */
  /* 展示栏宽度：桌面/平板上内容区的最大宽度。
     调宽一点，信息流能多排一列、图片也更大（手机上本来就是满宽，不受影响）。 */
  --container: 1440px;
  --nav-h: 64px;
  --tabbar-h: 56px;         /* 手机底部 tab 的高度，正文要按它留出下边距 */
  --grid-gap: 20px;
  --feed-min-col: 260px;    /* 信息流最小列宽，决定「整齐」 */

  /* --- 层级 --- */
  --z-nav: 100;
  --z-dropdown: 200;
  --z-modal: 1000;
  --z-toast: 1100;

  /* --- 动效 --- */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --dur-fast: 120ms;
  --dur: 220ms;
  --dur-slow: 380ms;
}

/* 尊重系统的减少动效设置 */
@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-fast: 0ms;
    --dur: 0ms;
    --dur-slow: 0ms;
  }
}

/* ===== palettes.css ===== */
/* ==========================================================================
   风格配色系统
   ==========================================================================
   分工：**DB 决定有哪些风格，这里决定风格长什么样。**
   styles 表里每行带一个 palette_key；这里按 html[data-style="<key>"] 提供配色。
   新增风格时即便没有对应 CSS 块也能立刻用（回退 default），补一段就是专属配色。

   为什么配色不存 DB：DB 写不了 CSS，运行时注入必然导致首屏闪烁。
   放在 CSS 里，index.html 的内联脚本在首帧前就设好属性，零闪烁。

   与 themes.css 的关系：两个正交属性。
   - data-theme 管表面色（--bg-* / --text-*）
   - data-style 只管氛围层与强调色（--aurora-* / --style-*）
   互不干扰，所以明暗切换逻辑不用改。亮色变体靠选择器权重天然覆盖。

   变量值是「空格分隔的 RGB 三元组」而不是颜色本身，
   这样同一个色相能喂给渐变里的多个透明度停靠点：rgb(var(--aurora-1) / 0.34)。
   ========================================================================== */

/* ---------------------------------------------------------------- 默认（暖调） */
/* 原来是紫青粉那套霓虹。改成暖色系 —— 琥珀 / 暖金 / 陶土。
   和暖色斑块、暖底色是一套的；霓虹那套和「温馨」是相冲的。
   注意：其他风格（通勤的蓝、复古的赭……）不动 ——
   「选风格换配色」是这个站的功能，默认色只是默认。 */
:root,
html[data-style="default"] {
  --aurora-1: 255 152 88;
  --aurora-2: 255 196 92;
  --aurora-3: 214 106 74;
  --style-accent: #d97a4a;
  --style-accent-ink: #f2c9a4;
}

/* ---------------------------------------------------------------- 通勤：冷静利落的蓝 */
html[data-style="commute"] {
  --aurora-1: 59 130 246;
  --aurora-2: 34 211 238;
  --aurora-3: 99 102 241;
  --style-accent: #3b82f6;
  --style-accent-ink: #9cc3ff;
}

/* ---------------------------------------------------------------- 日常：明快暖调 */
html[data-style="daily"] {
  --aurora-1: 255 138 61;
  --aurora-2: 255 210 61;
  --aurora-3: 255 92 138;
  --style-accent: #ff8a3d;
  --style-accent-ink: #ffc79a;
}

/* ---------------------------------------------------------------- 复古：胶片感的芥黄 / 橄榄 / 赭红 */
html[data-style="retro"] {
  --aurora-1: 212 160 23;
  --aurora-2: 124 143 78;
  --aurora-3: 193 85 46;
  --style-accent: #d4a017;
  --style-accent-ink: #e8cf8a;
}

/* ==========================================================================
   005 迁移补的 7 个风格
   每个用一组能一眼分开的色相，避免切了跟没切一样。
   配色块缺了也不会坏 —— 前端回退 default（见文件头的说明）。
   ========================================================================== */

/* ---------------------------------------------------------------- 极简：冷灰蓝，低饱和 */
html[data-style="minimal"] {
  --aurora-1: 148 163 184;
  --aurora-2: 100 116 139;
  --aurora-3: 71 85 105;
  --style-accent: #94a3b8;
  --style-accent-ink: #cbd5e1;
}

/* ---------------------------------------------------------------- 街头：高饱和紫 / 青 / 玫红 */
html[data-style="street"] {
  --aurora-1: 139 92 246;
  --aurora-2: 34 211 238;
  --aurora-3: 244 63 94;
  --style-accent: #8b5cf6;
  --style-accent-ink: #c4b5fd;
}

/* ---------------------------------------------------------------- 学院：藏青 / 酒红 / 芥黄 */
html[data-style="preppy"] {
  --aurora-1: 37 99 235;
  --aurora-2: 190 24 93;
  --aurora-3: 245 158 11;
  --style-accent: #e0407a;
  --style-accent-ink: #f9a8d4;
}

/* ---------------------------------------------------------------- 运动：荧光绿 / 青 */
html[data-style="sporty"] {
  --aurora-1: 132 204 22;
  --aurora-2: 6 182 212;
  --aurora-3: 250 204 21;
  --style-accent: #84cc16;
  --style-accent-ink: #bef264;
}

/* ---------------------------------------------------------------- 甜美：粉 / 淡紫 */
html[data-style="sweet"] {
  --aurora-1: 244 114 182;
  --aurora-2: 192 132 252;
  --aurora-3: 251 207 232;
  --style-accent: #f472b6;
  --style-accent-ink: #fbcfe8;
}

/* ---------------------------------------------------------------- 优雅：香槟金 / 紫 */
html[data-style="elegant"] {
  --aurora-1: 212 175 55;
  --aurora-2: 124 92 160;
  --aurora-3: 200 170 220;
  --style-accent: #d4af37;
  --style-accent-ink: #ecd28a;
}

/* ---------------------------------------------------------------- 户外：橄榄 / 卡其 */
html[data-style="outdoor"] {
  --aurora-1: 168 162 158;
  --aurora-2: 120 113 108;
  --aurora-3: 101 163 13;
  --style-accent: #84a13c;
  --style-accent-ink: #c3d69b;
}

/* ==========================================================================
   亮色变体
   同色相压深降饱和 —— 亮底上直接用霓虹色对比度不够，读不清。
   双属性选择器的权重高于上面的单属性选择器，所以无需 !important 就能覆盖。
   ========================================================================== */

html[data-theme="light"][data-style="default"] {
  --aurora-1: 214 106 74;
  --aurora-2: 196 138 48;
  --aurora-3: 176 82 62;
  --style-accent: #c2663c;
  --style-accent-ink: #9a4526;
}
html[data-theme="light"][data-style="commute"] {
  --aurora-1: 37 99 235;
  --aurora-2: 8 145 178;
  --aurora-3: 79 70 229;
  --style-accent: #2563eb;
  --style-accent-ink: #1d4ed8;
}
html[data-theme="light"][data-style="daily"] {
  --aurora-1: 234 88 12;
  --aurora-2: 202 138 4;
  --aurora-3: 219 39 119;
  --style-accent: #c2410c;
  --style-accent-ink: #9a3412;
}
html[data-theme="light"][data-style="retro"] {
  --aurora-1: 161 98 7;
  --aurora-2: 77 94 43;
  --aurora-3: 154 52 18;
  --style-accent: #a16207;
  --style-accent-ink: #854d0e;
}
html[data-theme="light"][data-style="minimal"] {
  --aurora-1: 100 116 139;
  --aurora-2: 71 85 105;
  --aurora-3: 51 65 85;
  --style-accent: #475569;
  --style-accent-ink: #334155;
}
html[data-theme="light"][data-style="street"] {
  --aurora-1: 124 58 237;
  --aurora-2: 14 116 144;
  --aurora-3: 225 29 72;
  --style-accent: #7c3aed;
  --style-accent-ink: #5b21b6;
}
html[data-theme="light"][data-style="preppy"] {
  --aurora-1: 29 78 216;
  --aurora-2: 157 23 77;
  --aurora-3: 180 83 9;
  --style-accent: #be185d;
  --style-accent-ink: #9d174d;
}
html[data-theme="light"][data-style="sporty"] {
  --aurora-1: 77 124 15;
  --aurora-2: 14 116 144;
  --aurora-3: 161 98 7;
  --style-accent: #4d7c0f;
  --style-accent-ink: #3f6212;
}
html[data-theme="light"][data-style="sweet"] {
  --aurora-1: 219 39 119;
  --aurora-2: 147 51 234;
  --aurora-3: 190 24 93;
  --style-accent: #db2777;
  --style-accent-ink: #be185d;
}
html[data-theme="light"][data-style="elegant"] {
  --aurora-1: 161 98 7;
  --aurora-2: 107 33 168;
  --aurora-3: 126 34 206;
  --style-accent: #a16207;
  --style-accent-ink: #854d0e;
}
html[data-theme="light"][data-style="outdoor"] {
  --aurora-1: 87 83 78;
  --aurora-2: 68 64 60;
  --aurora-3: 77 124 15;
  --style-accent: #57534e;
  --style-accent-ink: #44403c;
}

/* ==========================================================================
   风格强调色的应用点
   只用在筛选 chip 和少数标记上，不碰品牌渐变（--grad-*）——
   否则切个筛选会把站标也换色，品牌一致性就没了。
   ========================================================================== */

.chip--style.is-active {
  color: #fff;
  background: var(--style-accent);
  border-color: transparent;
}

.tag--style {
  color: var(--style-accent-ink);
  border-color: color-mix(in srgb, var(--style-accent) 45%, transparent);
}

/* 风格徽章上的一个小色点，让标签本身带出该风格的颜色 */
.style-dot {
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--style-accent);
  flex-shrink: 0;
}

/* ===== base.css ===== */
/* ==========================================================================
   基础重置与排版
   ========================================================================== */

*,
*::before,
*::after {
  box-sizing: border-box;
}

/* 让 HTML 的 hidden 属性真正生效。
   作者样式里的 display:flex / grid 会盖过浏览器默认的 [hidden]{display:none}，
   结果是「设了 hidden 却收不回去」。这一条把它压回来。 */
[hidden] { display: none !important; }

html,
body {
  margin: 0;
  padding: 0;
}

html {
  -webkit-text-size-adjust: 100%;
  scrollbar-gutter: stable;

  /* 底色铺在 html 上而不是 body：
     氛围层（effects.css 的 .atmosphere / .grain）用 z-index:-1，
     如果 body 自己带背景，绘制顺序会把它们整个盖住。 */
  background-color: var(--bg-0);
  min-height: 100%;
}

body {
  min-height: 100vh;
  font-family: var(--font-sans);
  font-size: var(--fs-md);
  line-height: var(--lh-normal);
  color: var(--text-0);

  /* 字体渲染：更清晰的字形、连字与字距微调 —— 细节更「高级」 */
  font-feature-settings: "kern" 1, "liga" 1, "calt" 1;
  text-rendering: optimizeLegibility;

  /* 必须透明，见上面的说明 */
  background: transparent;

  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6 {
  margin: 0;
  font-weight: var(--fw-black);          /* 800：展示级字重，标题更有"设计感" */
  line-height: var(--lh-tight);
  letter-spacing: -0.022em;
  font-feature-settings: "kern" 1, "liga" 1, "calt" 1;
}

/* 越大的字越要紧一点（光学字距）：这是「高级排版」最容易被忽略的一条 */
h1 { font-size: var(--fs-2xl); letter-spacing: -0.032em; }
h2 { font-size: var(--fs-xl); letter-spacing: -0.026em; }
h3 { font-size: var(--fs-lg); letter-spacing: -0.018em; font-weight: var(--fw-bold); }
h4, h5, h6 { font-weight: var(--fw-bold); }

p { margin: 0; }

a {
  color: var(--neon-cyan);
  text-decoration: none;
  transition: color var(--dur-fast) var(--ease-out);
}
a:hover { color: var(--neon-pink); }

img {
  max-width: 100%;
  display: block;
}

button {
  font: inherit;
  color: inherit;
  cursor: pointer;
}

input,
textarea,
select {
  font: inherit;
  color: inherit;
}

/* 键盘可达性：只在键盘导航时显示焦点环 */
:focus-visible {
  outline: 2px solid var(--neon-cyan);
  outline-offset: 2px;
  border-radius: var(--r-xs);
}
:focus:not(:focus-visible) { outline: none; }

/* 滚动条 */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--bg-0); }
::-webkit-scrollbar-thumb {
  background: var(--bg-3);
  border-radius: var(--r-pill);
  border: 2px solid var(--bg-0);
}
::-webkit-scrollbar-thumb:hover { background: var(--neon-violet); }

::selection {
  background: rgba(226, 88, 107, 0.35);
  color: var(--text-0);
}

/* 工具类 */
.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.text-gradient {
  background: var(--grad-primary);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.muted { color: var(--text-1); }
.dim { color: var(--text-2); }
.tiny { font-size: var(--fs-xs); }
.small { font-size: var(--fs-sm); }
.bold { font-weight: var(--fw-bold); }
.center { text-align: center; }
.mono { font-family: var(--font-mono); }

/* ===== layout.css ===== */
/* ==========================================================================
   布局：容器、导航、页脚、栅格
   「排列整齐」的实现在这一层：等宽栅格 + 统一间距 + 统一宽高比。
   ========================================================================== */

.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--s-4);
}

.app-main {
  padding-block: var(--s-6) var(--s-8);
  min-height: calc(100vh - var(--nav-h));
}

/* --- 垂直节奏：子元素之间统一间距 --- */
.stack > * + * { margin-block-start: var(--s-4); }
.stack-lg > * + * { margin-block-start: var(--s-6); }
.stack-sm > * + * { margin-block-start: var(--s-2); }

/* --- 水平分组 --- */
.cluster {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-3);
}
.cluster-sm { gap: var(--s-2); }
.cluster-between { justify-content: space-between; }
.cluster-end { justify-content: flex-end; }
.push-right { margin-inline-start: auto; }

/* ==========================================================================
   顶部导航
   玻璃效果只用在这里（加弹窗），不逐卡片上，避免拖垮滚动
   ========================================================================== */

.nav {
  position: sticky;
  top: 0;
  z-index: var(--z-nav);
  height: var(--nav-h);
  display: flex;
  align-items: center;

  background: var(--glass-bg-strong);
  backdrop-filter: blur(16px) saturate(150%);
  -webkit-backdrop-filter: blur(16px) saturate(150%);
  border-bottom: 1px solid var(--glass-border);
}

/* 不支持 backdrop-filter 时退回实色，否则文字会糊在内容上 */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .nav { background: var(--bg-1); }
}
@media (prefers-reduced-transparency: reduce) {
  .nav { background: var(--bg-1); backdrop-filter: none; -webkit-backdrop-filter: none; }
}

.nav__inner {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--s-4);
  display: flex;
  align-items: center;
  gap: var(--s-4);
}

/* 品牌：整页静态辉光元素之一 */
.nav__brand {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  font-size: var(--fs-lg);
  font-weight: var(--fw-bold);
  letter-spacing: -0.02em;
  color: var(--text-0);
  white-space: nowrap;
  flex-shrink: 0;
}
.nav__brand:hover { color: var(--text-0); }

.nav__mark {
  width: 32px;
  height: 32px;
  border-radius: 10px;
  /* 深色玻璃底：三张彩色卡才跳得出来 */
  background: linear-gradient(150deg, #131a30 0%, #0b0f1c 58%, #181b33 100%);
  border: 1px solid rgba(255, 255, 255, .16);
  display: grid;
  place-items: center;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .18), 0 4px 12px rgba(0, 0, 0, .35);
}
.nav__mark svg { display: block; }

.nav__links {
  display: flex;
  align-items: center;
  gap: var(--s-1);
  flex-shrink: 0;
}

.nav__link {
  position: relative;
  padding: var(--s-2) var(--s-3);
  border-radius: var(--r-pill);
  font-size: var(--fs-sm);
  font-weight: 600;
  color: hsl(var(--h, 24) 42% 70%);
  white-space: nowrap;
  transition: color var(--dur-fast) var(--ease-out),
              background-color var(--dur-fast) var(--ease-out),
              box-shadow var(--dur) var(--ease-out),
              transform var(--dur-fast) var(--ease-out);
}
.nav__link:hover { color: hsl(var(--h, 24) 62% 84%); background: var(--bg-2); transform: translateY(-1px); }

/* 当前页：该色相的柔和渐变胶囊（与分类栏呼应） */
.nav__link.is-active {
  color: #fff;
  background: linear-gradient(135deg, hsl(var(--h, 24) 58% 58%), hsl(calc(var(--h, 24) + 30) 58% 50%));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .22), 0 6px 16px hsl(var(--h, 24) 55% 45% / .3);
}
html[data-theme="light"] .nav__link { color: hsl(var(--h, 24) 50% 40%); }
html[data-theme="light"] .nav__link.is-active { color: #fff; }

.nav__search {
  flex: 1;
  max-width: 280px;
  margin-inline: auto;
}

.nav__actions {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  flex-shrink: 0;
  margin-inline-start: auto;
}

@media (max-width: 860px) {
  .nav__links { display: none; }
  .nav__search { max-width: none; }
}

/* 手机：导航只留 品牌标 + 搜索 + 主题切换。
   390px 宽下把「衣格 / ÉLAN」两行字和 登录/注册 一起挤进来，
   搜索框会被压成一个字宽 —— 与其留个残废的搜索框，不如把位置还给搜索。
   登录/注册 收进「我的」tab：未登录时那页本来就是登录引导页。 */
@media (max-width: 640px) {
  .nav__latin { display: none; }
  /* 写成 .nav__actions .nav__auth 是为了压过 components.css 里的 .btn ——
     layout.css 在 index.html 里排在 components.css **之前**，
     两边又都是 (0,1,0)，后加载的 .btn { display: inline-flex } 会赢。
     和 .post-card:hover 遇到的是同一类坑：同特异性 + 文件顺序。 */
  /* 顶部按键「展开」：登录/注册也显示出来（此前收进「我的」tab，现按需求展开） */
  .nav__actions .nav__auth { display: inline-flex; }
}

/* ==========================================================================
   手机底部 tab
   桌面整块不显示 —— 导航在顶部那条。
   断点沿用 .nav__links 隐藏的那一档（860px），保证「顶部链接消失」和
   「底部 tab 出现」是同一时刻，中间不会出现两边都没有导航的空档。
   ========================================================================== */

.tabbar { display: none; }

@media (max-width: 860px) {
  .tabbar {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: var(--z-nav);
    display: flex;
    background: var(--glass-bg-strong);
    backdrop-filter: blur(16px) saturate(150%);
    -webkit-backdrop-filter: blur(16px) saturate(150%);
    border-top: 1px solid var(--glass-border);
    /* iPhone 的横条区域，不占开的话 tab 会被压到横条底下 */
    padding-bottom: env(safe-area-inset-bottom, 0px);
  }

  .tabbar__item {
    flex: 1;
    min-width: 0;
    /* 44px 是手指能可靠点中的下限，这里给到 56px */
    min-height: var(--tabbar-h);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    font-size: 11px;
    line-height: 1.2;
    color: var(--text-2);
    position: relative;
    transition: color var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out);
  }
  .tabbar__item svg {
    width: 22px;
    height: 22px;
    transition: transform var(--dur) var(--ease-spring), filter var(--dur) var(--ease-out);
  }
  /* 激活态：图标上浮 + 发光，文字加粗，背后一层柔光（高级感） */
  .tabbar__item.is-active {
    color: var(--style-accent, var(--neon-violet));
    font-weight: 800;
    letter-spacing: .01em;
  }
  .tabbar__item.is-active svg {
    transform: translateY(-1px) scale(1.08);
    filter: drop-shadow(0 0 8px var(--neon-violet));
  }
  .tabbar__item.is-active::before {
    content: '';
    position: absolute;
    top: 6px;
    left: 50%;
    width: 46px;
    height: 26px;
    transform: translateX(-50%);
    border-radius: 999px;
    background: radial-gradient(60% 80% at 50% 40%, var(--glass-highlight), transparent 72%);
    pointer-events: none;
    animation: tab-pop .34s cubic-bezier(.2,.8,.3,1);
  }
  @keyframes tab-pop {
    from { opacity: 0; transform: translateX(-50%) scale(.7); }
    to { opacity: 1; transform: translateX(-50%) scale(1); }
  }
  @media (prefers-reduced-motion: reduce) { .tabbar__item.is-active::before { animation: none; } }
  .tabbar__item:active { transform: scale(0.94); }

  /* tab 是 fixed 的，会把页面最后一段盖住 —— 正文让出这一条 */
  body { padding-bottom: calc(var(--tabbar-h) + env(safe-area-inset-bottom, 0px)); }
}

/* 不支持 backdrop-filter 时退回实色，否则文字会糊在内容上 */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  @media (max-width: 860px) {
    .tabbar { background: var(--bg-1); }
  }
}

/* ==========================================================================
   信息流栅格 —— 整个「整齐」诉求的核心
   刻意不用瀑布流：瀑布流配霓虹色必然显乱，等宽网格才对得齐。
   ========================================================================== */

.feed-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(var(--feed-min-col), 1fr));
  gap: var(--grid-gap);
  align-items: start;
}

/* 紧凑网格（个人主页），列更窄 */
.feed-grid--dense {
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: var(--s-3);
}

/* ==========================================================================
   双列瀑布流
   刻意**不复用** .feed-grid —— 那个类被十来个视图共用，动它等于全站一起改。
   这里只给内容浏览类页面（信息流 / 主页 / 搜索）用，后台、审核台那些密集列表
   继续走等宽网格。
   实现细节见 js/masonry.js：两列 flex + 卡片轮转追加。
   ========================================================================== */

.feed-masonry {
  display: flex;
  flex-wrap: wrap;          /* 让 appendFull 的空态能换行独占一整行 */
  align-items: flex-start;  /* 两列各自从顶部开始，不被拉平 */
  gap: var(--grid-gap);
}
.feed-masonry__col {
  flex: 1 1 0;
  min-width: 0;             /* 长文案不许把列撑爆 */
  display: flex;
  flex-direction: column;
  gap: var(--grid-gap);
}

/* 手机上两列要挤一点，20px 的间距太占地方 */
@media (max-width: 560px) {
  .feed-masonry,
  .feed-masonry__col { gap: var(--s-3); }
}

/* 三栏：主内容 + 侧栏 */
.layout-split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 300px;
  gap: var(--s-5);
  align-items: start;
}
@media (max-width: 980px) {
  .layout-split { grid-template-columns: minmax(0, 1fr); }
  .layout-split > aside { display: none; }
}

/* 帖子详情：图 + 评论区 */
.layout-post {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
  gap: var(--s-5);
  align-items: start;
}
@media (max-width: 900px) {
  .layout-post { grid-template-columns: minmax(0, 1fr); }
}

/* 统计卡片行 */
.stat-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: var(--s-3);
}

/* --- 页脚 --- */
.site-footer {
  border-top: 1px solid var(--glass-border);
  padding-block: var(--s-5);
  margin-top: var(--s-7);
  color: var(--text-2);
  font-size: var(--fs-xs);
}
.site-footer__inner {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-3);
  align-items: center;
  justify-content: space-between;
}
.site-footer a { color: var(--text-1); }
.site-footer a:hover { color: var(--neon-cyan); }

/* 公安联网备案入口：图标 + 备案号（没填号时显示「公安备案」入口）。
   图标是 data URI，零额外请求，和颗粒背景一个路数。 */
.beian {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.beian__icon {
  width: 13px;
  height: 13px;
  flex-shrink: 0;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2 20 5v7c0 4.9-3.4 8.6-8 10-4.6-1.4-8-5.1-8-10V5z' fill='%232f6fd0'/%3E%3Cpath d='m12 6.4 1.5 3.1 3.4.3-2.5 2.2.7 3.3-3.1-1.8-3.1 1.8.7-3.3-2.5-2.2 3.4-.3z' fill='%23fff'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* --- 加载/空态 --- */
.placeholder {
  padding: var(--s-7) var(--s-4);
  text-align: center;
  color: var(--text-2);
}

/* --- 骨架屏 --- */
/* 微光用「位移的伪元素」扫过，而不是动 background-position。
   动 background-position 属于重绘型动画：每一帧都要把整块区域的像素重新画一遍。
   首屏有 8 张骨架同时在动，就是 8 块大面积逐帧重绘 —— 偏偏这个时刻主线程
   还在解析 JSON、建 DOM，两件事抢在一起，观感就是「一进首页先卡一下」。
   换成 transform 之后整条动画交给合成器，主线程和光栅线程都不参与。 */
.skeleton {
  position: relative;
  overflow: hidden;
  border-radius: var(--r-md);
  background: var(--bg-1);
}
.skeleton::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent 0%, var(--bg-2) 50%, transparent 100%);
  transform: translate3d(-100%, 0, 0);
  animation: skeleton-shimmer 1.4s infinite linear;
}
@keyframes skeleton-shimmer {
  from { transform: translate3d(-100%, 0, 0); }
  to   { transform: translate3d(100%, 0, 0); }
}
@media (prefers-reduced-motion: reduce) {
  .skeleton::after { animation: none; }
}

/* ===== components.css ===== */
/* ==========================================================================
   组件
   纪律：辉光只在 hover/focus/active 出现；静态卡片只用边框 + 内高光。
   每屏常驻发光元素不超过 3 个（品牌标、主 CTA、激活态导航）。
   ========================================================================== */

/* ---------------------------------------------------------------- 玻璃面 */
.glass {
  background: var(--glass-bg);
  backdrop-filter: blur(16px) saturate(140%);
  -webkit-backdrop-filter: blur(16px) saturate(140%);
  border: 1px solid var(--glass-border);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-md), inset 0 1px 0 var(--glass-highlight);
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .glass { background: var(--bg-1); }
}
@media (prefers-reduced-transparency: reduce) {
  .glass { background: var(--bg-1); backdrop-filter: none; -webkit-backdrop-filter: none; }
}

/* 素面卡片：静态元素用这个，不挂 box-shadow */
.card {
  background: var(--bg-1);
  border: 1px solid var(--glass-border);
  border-radius: var(--r-lg);
  box-shadow: inset 0 1px 0 var(--glass-highlight);
}
.card--pad { padding: var(--s-5); }
.card--pad-sm { padding: var(--s-4); }

/* 渐变描边卡片：用 padding + background-clip 实现，
   比大半径 box-shadow 便宜得多，是霓虹描边的正确做法 */
.card--edge {
  position: relative;
  background: var(--bg-1);
  border: 1px solid transparent;
  background-clip: padding-box;
}
.card--edge::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: var(--grad-border);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite: exclude;
  pointer-events: none;
}

/* ---------------------------------------------------------------- 按钮 */
/* 全站按键统一质感：胶囊形 + 内高光 + 悬停上浮 + 光泽扫过 + 焦点环。
   一处定义，所有页面（发布/登录/编辑/后台/商城）同时升级。 */
.btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-2);
  padding: var(--s-2) var(--s-4);
  min-height: 40px;
  border: 1px solid var(--glass-border);
  border-radius: var(--r-pill);
  font-size: var(--fs-sm);
  font-weight: 650;
  letter-spacing: .012em;
  line-height: 1;
  white-space: nowrap;
  overflow: hidden;
  background: var(--bg-2);
  color: var(--text-0);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .05), var(--shadow-sm);
  transition: transform var(--dur-fast) var(--ease-out),
              background-color var(--dur-fast) var(--ease-out),
              box-shadow var(--dur) var(--ease-out),
              border-color var(--dur-fast) var(--ease-out),
              color var(--dur-fast) var(--ease-out),
              filter var(--dur-fast) var(--ease-out);
}
/* 悬停时一道柔光扫过 —— 让按钮「活」起来 */
.btn::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(115deg, transparent 32%, rgba(255, 255, 255, .26) 50%, transparent 68%);
  transform: translateX(-130%);
  transition: transform .6s var(--ease-out);
}
.btn:hover::after { transform: translateX(130%); }
.btn:hover { background: var(--bg-3); border-color: rgba(255, 255, 255, .16); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .07), var(--shadow-md); transform: translateY(-2px); }
.btn:active { transform: translateY(0) scale(.975); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .04); }
.btn:disabled { opacity: .45; cursor: not-allowed; transform: none; }
.btn:disabled::after { display: none; }
.btn:focus-visible { outline: none; border-color: var(--neon-violet); box-shadow: 0 0 0 3px rgba(122, 92, 255, .35), var(--shadow-md); }

/* 主 CTA：品牌渐变 + 内高光 + 柔和辉光 */
.btn--primary {
  background: var(--grad-cta);
  color: #fff;
  border-color: transparent;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .28), var(--glow-soft);
}
.btn--primary:hover {
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .34), var(--glow-pink);
  filter: brightness(1.06) saturate(1.05);
  transform: translateY(-2px);
}
.btn--primary:focus-visible { box-shadow: 0 0 0 3px rgba(255, 45, 155, .35), var(--glow-pink); }

/* 次要：玻璃拟态，悬停才显形 */
.btn--ghost {
  background: var(--glass-bg);
  border-color: var(--glass-border);
  color: var(--text-1);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .04);
}
.btn--ghost:hover { color: var(--text-0); border-color: var(--neon-violet); background: var(--glass-bg-strong); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08), var(--shadow-md); }

/* 危险：平时低调，悬停才变实 —— 降低误触 */
.btn--danger { background: transparent; border-color: rgba(217, 83, 79, .45); color: #ff8fa3; box-shadow: none; }
.btn--danger:hover { background: linear-gradient(135deg, #ff4d6d, #d9534f); color: #fff; border-color: transparent; box-shadow: 0 10px 24px rgba(255, 77, 109, .35); }
.btn--danger:focus-visible { box-shadow: 0 0 0 3px rgba(255, 77, 109, .35); }

/* 品牌质感按钮：柔和玻璃 + 彩色渐变字体（顶部「发布 / 登录」等） */
.btn--brand {
  background: var(--glass-bg);
  border-color: var(--glass-border);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06), var(--shadow-sm);
}
.btn--brand .text-gradient { font-weight: 700; letter-spacing: .01em; }
.btn--brand:hover {
  border-color: var(--neon-violet);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .09), var(--shadow-md);
}

.btn--sm { min-height: 32px; padding: var(--s-1) var(--s-3); font-size: var(--fs-xs); border-radius: var(--r-pill); }
.btn--lg { min-height: 48px; padding: var(--s-3) var(--s-6); font-size: var(--fs-md); }
.btn--block { width: 100%; }
.btn--icon { padding: 0; width: 40px; height: 40px; min-height: 0; border-radius: var(--r-pill); }
.btn--icon .icon { display: inline-flex; align-items: center; justify-content: center; }
.btn--icon svg { display: block; }
.btn--icon::after { display: none; }

/* 图标按钮质感：玻璃 + 悬停微光（顶部主题/退出等） */
.btn--icon.btn--ghost {
  background: var(--glass-bg);
  border-color: var(--glass-border);
  color: var(--text-1);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}
.btn--icon.btn--ghost:hover {
  color: var(--text-0);
  border-color: var(--neon-violet);
  background: var(--glass-bg-strong);
  box-shadow: 0 0 0 1px rgba(122, 92, 255, 0.28), var(--glow-soft);
  transform: translateY(-2px);
}
.btn--icon.btn--ghost:active { transform: translateY(0) scale(0.96); }

/* 已激活的图标按钮（已点赞/已关注） */
.btn--active { color: var(--neon-pink); border-color: rgba(226, 88, 107, 0.45); }

@media (prefers-reduced-motion: reduce) {
  .btn, .btn::after { transition: none; }
  .btn:hover { transform: none; }
  .btn:hover::after { transform: translateX(-130%); }
}

/* ---------------------------------------------------------------- 标签 / 徽章 */
.tag {
  display: inline-flex;
  align-items: center;
  gap: var(--s-1);
  padding: 2px var(--s-2);
  border-radius: var(--r-pill);
  font-size: var(--fs-xs);
  font-weight: var(--fw-medium);
  background: var(--bg-2);
  color: var(--text-1);
  border: 1px solid var(--glass-border);
  transition: color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out);
}
a.tag:hover { color: var(--neon-cyan); border-color: var(--neon-cyan); }

.tag--cyan  { color: var(--neon-cyan);   border-color: rgba(232, 150, 60, 0.35); }
.tag--pink  { color: var(--neon-pink);   border-color: rgba(226, 88, 107, 0.35); }
.tag--violet{ color: var(--neon-violet); border-color: rgba(207, 106, 62, 0.35); }
.tag--lime  { color: var(--neon-lime);   border-color: rgba(163, 160, 58, 0.35); }
.tag--amber { color: var(--neon-amber);  border-color: rgba(240, 180, 41, 0.35); }

.tag--ok     { color: var(--ok);     border-color: rgba(127, 176, 105, 0.4); }
.tag--warn   { color: var(--warn);   border-color: rgba(240, 180, 41, 0.4); }
.tag--danger { color: var(--danger); border-color: rgba(217, 83, 79, 0.4); }

/* 性别筛选用 */
.chip {
  padding: var(--s-2) var(--s-4);
  border-radius: var(--r-pill);
  font-size: var(--fs-sm);
  font-weight: 500;
  letter-spacing: .01em;
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  color: var(--text-1);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  transition: transform var(--dur-fast) var(--ease-out),
              color var(--dur-fast) var(--ease-out),
              border-color var(--dur-fast) var(--ease-out),
              box-shadow var(--dur) var(--ease-out);
}
.chip:hover { color: var(--text-0); border-color: rgba(207, 106, 62, .45); transform: translateY(-1px); }
.chip.is-active {
  color: #fff;
  background: var(--grad-cta);
  border-color: transparent;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .22), var(--glow-soft);
}

/* ---------------------------------------------------------------- 头像 */
.avatar {
  flex-shrink: 0;
  border-radius: var(--r-pill);
  object-fit: cover;
  background: var(--bg-2);
  border: 1px solid var(--glass-border);
  display: grid;
  place-items: center;
  overflow: hidden;
  color: var(--text-1);
  font-weight: var(--fw-bold);
  text-transform: uppercase;
  user-select: none;
}
.avatar--xs { width: 24px; height: 24px; font-size: 10px; }
.avatar--sm { width: 32px; height: 32px; font-size: var(--fs-xs); }
.avatar--md { width: 44px; height: 44px; font-size: var(--fs-md); }
.avatar--lg { width: 88px; height: 88px; font-size: var(--fs-xl); }
.avatar--xl { width: 120px; height: 120px; font-size: var(--fs-3xl); }

/* 头像用渐变字面，避免加载图前是一片灰 */
.avatar--fallback { background: var(--grad-primary); color: #fff; }

/* 头像 + 文本的作者行 */
.author {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  min-width: 0;
}
.author__name {
  font-weight: var(--fw-medium);
  font-size: var(--fs-sm);
  color: var(--text-0);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ---------------------------------------------------------------- 穿搭卡片 */
.post-card {
  position: relative;
  z-index: 0;                /* 建立层叠上下文，hover 抬起来时才盖得住邻居 */
  display: flex;
  flex-direction: column;
  border-radius: var(--r-lg);
  overflow: hidden;
  background: var(--bg-1);
  border: 1px solid var(--glass-border);
  box-shadow: inset 0 1px 0 var(--glass-highlight);
  transition: transform var(--dur) var(--ease-out),
              box-shadow var(--dur) var(--ease-out),
              border-color var(--dur) var(--ease-out);
}

/* 悬停上浮。
   选择器故意写成 .post-card.post-card:hover（特异性 0,3,0）来压过
   effects.css 的 .reveal.is-in { transform: none }（0,2,0）。
   两者原本同为 (0,2,0)，而 effects.css 后加载 —— 结果是所有带入场动画的卡片
   悬停都不上浮，只有首屏那几张跳过动画的会动。提高一档特异性是这里最干净的解法。 */
.post-card.post-card:hover {
  transform: translateY(-4px);
  border-color: rgba(207, 106, 62, 0.45);
  box-shadow: var(--glow-lift), var(--glow-soft);
  z-index: 2;                /* 上浮和辉光不能被同一列的下一张盖住 */
}

/* 封面宽高比。
   默认 3:4 是等宽网格时代留下的「行行对齐」方案；
   瀑布流按三档比例错落（见 postCard.js 的 coverRatio）。
   修饰类特异性 (0,2,0) 高于 .post-card__media (0,1,0)，所以能覆盖默认值。
   --tall 不写规则：它就是下面这个 3/4。 */
.post-card__media {
  position: relative;
  aspect-ratio: 3 / 4;
  background: var(--bg-2);
  overflow: hidden;
}
.post-card--square .post-card__media { aspect-ratio: 1 / 1; }
.post-card--wide   .post-card__media { aspect-ratio: 4 / 3; }
.post-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--dur-slow) var(--ease-out);
}
.post-card:hover .post-card__media img { transform: scale(1.04); }

/* 多图角标 */
.post-card__count {
  position: absolute;
  top: var(--s-2);
  right: var(--s-2);
  padding: 2px var(--s-2);
  border-radius: var(--r-pill);
  font-size: var(--fs-xs);
  color: #fff;
  background: rgba(7, 10, 20, 0.72);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

/* 状态角标（待审核/已隔离） */
.post-card__status {
  position: absolute;
  top: var(--s-2);
  left: var(--s-2);
  padding: 2px var(--s-2);
  border-radius: var(--r-pill);
  font-size: var(--fs-xs);
  background: var(--glass-bg-strong);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

.post-card__body {
  padding: var(--s-3);
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
  flex: 1;
}

/* 标题。比正文重一档，但只有一行 —— 卡片高度要整齐 */
.post-card__title {
  font-size: var(--fs-sm);
  font-weight: var(--fw-bold);
  line-height: var(--lh-tight);
  color: var(--text-0);
  display: -webkit-box;
  -webkit-line-clamp: 1;
  line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.post-card__caption {
  font-size: var(--fs-sm);
  color: var(--text-1);
  line-height: var(--lh-normal);
  /* 固定两行，卡片高度才整齐 */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.post-card__foot {
  margin-top: auto;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  padding-top: var(--s-3);
  border-top: 1px solid var(--glass-border);
  font-size: var(--fs-xs);
  color: var(--text-2);
}

/* 卡片底部的动作胶囊：图标嵌在圆底里、hover 上浮
   —— 和详情页 .post-action 同一套设计语言（旧版是裸文字 .metric，太简陋） */
.post-stat {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 32px;
  padding: 0 12px 0 5px;
  border: 1px solid var(--glass-border);
  border-radius: 999px;
  background: var(--bg-1);
  color: var(--text-2);
  font-size: var(--fs-xs);
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: transform var(--dur-fast) var(--ease-out),
              border-color var(--dur-fast) var(--ease-out),
              color var(--dur-fast) var(--ease-out),
              background-color var(--dur-fast) var(--ease-out);
}
.post-stat:hover {
  transform: translateY(-1px);
  color: var(--text-0);
  border-color: var(--neon-violet);
}
.post-stat:active { transform: translateY(0) scale(.96); }

.post-stat__icon {
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--bg-2);
  color: var(--text-2);
  transition: color var(--dur-fast) var(--ease-out), background-color var(--dur-fast) var(--ease-out);
}
.post-stat:hover .post-stat__icon { color: var(--neon-violet); }
.post-stat__count { line-height: 1; }

/* 已点赞：爱心点亮成红粉渐变 */
.post-stat--like.is-on {
  color: #fff;
  border-color: transparent;
  background: linear-gradient(135deg, #ff4d6d, #ff2d9b);
  box-shadow: 0 6px 16px rgba(255, 45, 155, .32);
}
.post-stat--like.is-on .post-stat__icon { color: #fff; background: rgba(255, 255, 255, .22); }

/* 已收藏：点亮成紫渐变（私有动作，安静但明显） */
.post-stat--bookmark.is-on {
  color: #fff;
  border-color: transparent;
  background: var(--grad-cool);
  box-shadow: 0 6px 16px rgba(122, 92, 255, .3);
}
.post-stat--bookmark.is-on .post-stat__icon { color: #fff; background: rgba(255, 255, 255, .22); }

/* 删除：低调危险色，hover 才变实 */
.post-stat--danger { color: #ff9db1; border-color: rgba(255, 77, 109, .3); }
.post-stat--danger .post-stat__icon { color: #ff6b83; background: rgba(255, 77, 109, .14); }
.post-stat--danger:hover {
  color: #fff;
  border-color: transparent;
  background: linear-gradient(135deg, #ff4d6d, #ff2d55);
}
.post-stat--danger:hover .post-stat__icon { color: #fff; background: rgba(255, 255, 255, .2); }
.post-stat--danger:disabled { opacity: .5; cursor: not-allowed; transform: none; }

.post-card__time { white-space: nowrap; }

/* 视频标识：封面中央的播放圆钮 */
.post-card__play {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: #fff;
  font-size: 15px;
  background: rgba(10, 12, 22, .52);
  border: 1px solid rgba(255, 255, 255, .35);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  pointer-events: none;
}

/* 配乐标识：列表卡片底部的小胶囊（左边可带歌曲自带封面） */
.post-card__music {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  max-width: 42%;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: var(--fs-xs);
  color: var(--text-2);
  background: var(--bg-2);
}
.post-card__music-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.post-card__music-cover {
  width: 16px;
  height: 16px;
  border-radius: 4px;
  object-fit: cover;
  flex: none;
}
.post-card__music-note { flex: none; }

/* 单品条：小缩略图 + 名称，点进单品页看同款搭配 */
.item-strip { gap: var(--s-2); }
.item-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--s-1);
  padding: 2px var(--s-2) 2px 2px;
  border-radius: var(--r-pill);
  background: var(--bg-2);
  border: 1px solid var(--glass-border);
  font-size: var(--fs-xs);
  color: var(--text-1);
  max-width: 100%;
  transition: border-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.item-chip:hover { color: var(--text-0); border-color: rgb(var(--aurora-1) / 0.5); }
.item-chip img {
  width: 20px; height: 20px;
  border-radius: var(--r-pill);
  object-fit: cover;
  flex-shrink: 0;
}
.item-chip span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 9ch; }

/* 点赞时的一次性脉冲 */
@keyframes like-pop {
  0% { transform: scale(1); }
  45% { transform: scale(1.35); }
  100% { transform: scale(1); }
}
.metric.just-liked .metric__icon { animation: like-pop 380ms var(--ease-spring); }

/* ---------------------------------------------------------------- 表单 */
.field { display: flex; flex-direction: column; gap: var(--s-2); }

.label {
  font-size: var(--fs-sm);
  font-weight: 600;
  letter-spacing: .01em;
  color: var(--text-1);
}

.input,
.textarea,
.select {
  width: 100%;
  padding: var(--s-3);
  background: var(--bg-2);
  border: 1px solid var(--glass-border);
  border-radius: var(--r-md);
  color: var(--text-0);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .03);
  transition: border-color var(--dur-fast) var(--ease-out),
              box-shadow var(--dur-fast) var(--ease-out),
              background-color var(--dur-fast) var(--ease-out);
}
.input::placeholder,
.textarea::placeholder { color: var(--text-2); }
.input:hover,
.textarea:hover,
.select:hover { border-color: rgba(255, 255, 255, .14); }

.input:focus,
.textarea:focus,
.select:focus {
  outline: none;
  border-color: var(--neon-violet);
  background: var(--bg-1);
  box-shadow: 0 0 0 3px rgba(207, 106, 62, .18), inset 0 1px 0 rgba(255, 255, 255, .04);
}

.textarea { resize: vertical; min-height: 92px; line-height: var(--lh-normal); }

.select {
  appearance: none;
  cursor: pointer;
  background-image: linear-gradient(45deg, transparent 50%, var(--text-1) 50%),
                    linear-gradient(135deg, var(--text-1) 50%, transparent 50%);
  background-position: calc(100% - 19px) 50%, calc(100% - 14px) 50%;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
  padding-right: var(--s-7);
}

/* ---------------------------------------------------------------- 自定义下拉（彩色字体 + 柔和玻璃） */
.cselect { position: relative; width: 100%; }
.cselect__trigger {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-2);
  padding: var(--s-3);
  background: var(--bg-2);
  border: 1px solid var(--glass-border);
  border-radius: var(--r-md);
  color: hsl(var(--h, 24) 55% 78%);
  font: inherit;
  font-weight: 600;
  letter-spacing: .01em;
  text-align: left;
  cursor: pointer;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .03);
  transition: border-color var(--dur-fast) var(--ease-out),
              box-shadow var(--dur-fast) var(--ease-out),
              background-color var(--dur-fast) var(--ease-out),
              transform var(--dur-fast) var(--ease-out);
}
.cselect__trigger:hover { border-color: hsl(var(--h, 24) 55% 60% / .5); transform: translateY(-1px); }
.cselect.is-open .cselect__trigger {
  border-color: var(--neon-violet);
  background: var(--bg-1);
  box-shadow: 0 0 0 3px rgba(207, 106, 62, .18);
}
.cselect__value.is-placeholder { color: var(--text-2); font-weight: 500; }
.cselect__caret { color: var(--text-2); display: inline-flex; transition: transform var(--dur) var(--ease-out); }
.cselect.is-open .cselect__caret { transform: rotate(180deg); }

.cselect__menu {
  position: absolute;
  z-index: var(--z-dropdown);
  left: 0;
  right: 0;
  top: calc(100% + 6px);
  max-height: 300px;
  overflow-y: auto;
  padding: var(--s-1);
  background: var(--glass-bg-strong);
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
  border: 1px solid var(--glass-border);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-lg);
  animation: cselect-in .16s var(--ease-out);
}
/* 双保险：无论 JS 有没有设 hidden，收起态一律不显示 */
.cselect__menu[hidden] { display: none !important; }
/* 空间不够时向上翻（见 select.js 的 place()） */
.cselect.is-up .cselect__menu { top: auto; bottom: calc(100% + 6px); }
@keyframes cselect-in { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
.cselect__option {
  display: block;
  width: 100%;
  text-align: left;
  padding: var(--s-2) var(--s-3);
  border: 0;
  background: none;
  border-radius: var(--r-sm);
  font: inherit;
  font-weight: 600;
  letter-spacing: .01em;
  color: hsl(var(--h, 24) 55% 76%);
  cursor: pointer;
  transition: background-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.cselect__option:hover { background: hsl(var(--h, 24) 55% 55% / .14); color: hsl(var(--h, 24) 70% 86%); }
.cselect__option.is-active {
  color: #fff;
  background: linear-gradient(135deg, hsl(var(--h, 24) 58% 58%), hsl(calc(var(--h, 24) + 30) 58% 50%));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .22);
}
.cselect__empty { padding: var(--s-2) var(--s-3); }
.cselect.is-disabled { opacity: .55; }
.cselect.is-disabled .cselect__trigger { cursor: not-allowed; transform: none; }
.cselect__trigger:disabled { cursor: not-allowed; }
html[data-theme="light"] .cselect__trigger { color: hsl(var(--h, 24) 50% 40%); }
html[data-theme="light"] .cselect__option { color: hsl(var(--h, 24) 50% 38%); }

/* ---------------------------------------------------------------- 语言切换（全站） */
.langpick { position: relative; display: inline-flex; --h: 285; }
/* 语种切换：玻璃胶囊 + 渐变语言码 + 悬停时一圈柔和渐变描边（细节更高级） */
.langpick__btn {
  gap: 6px;
  padding: 7px 12px;
  height: auto;
  border-radius: 999px;
  border: 1px solid var(--glass-border);
  background: var(--glass-bg);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  backdrop-filter: blur(14px) saturate(140%);
  box-shadow: inset 0 1px 0 var(--glass-highlight);
  transition: transform var(--dur-fast) var(--ease-out),
    border-color var(--dur-fast) var(--ease-out),
    box-shadow var(--dur-fast) var(--ease-out);
}
.langpick__btn:hover {
  transform: translateY(-1px);
  border-color: hsl(var(--h) 62% 62% / .45);
  box-shadow: inset 0 1px 0 var(--glass-highlight), var(--glow-soft);
}
.langpick__globe {
  position: relative;
  display: inline-grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border-radius: 9px;
  color: hsl(var(--h) 78% 80%);
  /* 玻璃：渐变底 + 内高光 + 细描边 */
  background: linear-gradient(150deg, hsl(var(--h) 70% 60% / .28), hsl(var(--h) 60% 40% / .14));
  border: 1px solid hsl(var(--h) 70% 75% / .28);
  box-shadow: inset 0 1px 0 hsl(var(--h) 90% 92% / .35), 0 4px 14px hsl(var(--h) 60% 30% / .35);
  -webkit-backdrop-filter: blur(8px) saturate(150%);
  backdrop-filter: blur(8px) saturate(150%);
  transition: transform var(--dur) var(--ease-spring), box-shadow var(--dur) var(--ease-out);
}
.langpick__globe svg { filter: drop-shadow(0 0 4px hsl(var(--h) 90% 70% / .5)); }
.langpick__btn:hover .langpick__globe {
  transform: rotate(-8deg) scale(1.06);
  box-shadow: inset 0 1px 0 hsl(var(--h) 90% 92% / .45), 0 6px 18px hsl(var(--h) 70% 50% / .5);
}
/* 环绕微粒：三颗小点缓慢上浮（粒子感），不阻挡点击 */
.langpick__spark {
  position: absolute;
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: hsl(var(--h) 95% 84%);
  box-shadow: 0 0 6px hsl(var(--h) 95% 75% / .9);
  opacity: 0;
  pointer-events: none;
  animation: langpick-spark 3.2s ease-in-out infinite;
}
.langpick__spark:nth-of-type(1) { left: 3px; bottom: 3px; animation-delay: 0s; }
.langpick__spark:nth-of-type(2) { right: 3px; bottom: 6px; animation-delay: 1.1s; }
.langpick__spark:nth-of-type(3) { left: 50%; top: 2px; animation-delay: 2.2s; }
@keyframes langpick-spark {
  0% { opacity: 0; transform: translateY(2px) scale(.6); }
  25% { opacity: .95; }
  70% { opacity: .5; transform: translateY(-7px) scale(1); }
  100% { opacity: 0; transform: translateY(-11px) scale(.7); }
}
@media (prefers-reduced-motion: reduce) { .langpick__spark { animation: none; opacity: .7; } }
.langpick__code { font-size: 11px; font-weight: 800; letter-spacing: .08em; }
.langpick__caret {
  display: inline-flex;
  color: var(--text-2);
  transition: transform var(--dur) var(--ease-out);
}
.langpick__btn[aria-expanded="true"] .langpick__caret { transform: rotate(180deg); }

/* ---------------------------------------------------------------- 图标：统一跟着主题走
   默认继承文字色（安静）；**悬停 / 激活**时取主题强调色 + 一层柔和辉光。
   顶部图标按钮统一成玻璃芯片，和语言胶囊同一套语言，整排看起来更"高级"。 */
.nav__actions svg,
.tabbar__item svg,
.btn--icon svg,
.post-action svg,
.music-chip svg {
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: color var(--dur-fast) var(--ease-out),
    filter var(--dur-fast) var(--ease-out),
    transform var(--dur-fast) var(--ease-out);
}
.nav__actions .btn--icon:hover svg,
.btn--icon:hover svg,
.post-action:hover svg,
.tabbar__item:hover svg {
  color: var(--neon-violet);
  filter: drop-shadow(0 0 7px var(--neon-violet));
}
.tabbar__item.is-active svg { color: var(--style-accent, var(--neon-violet)); }

/* 搜索图标入口：**只在手机端出现**（桌面端本来就有搜索框）——保证两端功能一致 */
.nav__searchbtn { display: none; }
@media (max-width: 860px) { .nav__searchbtn { display: inline-flex; } }

.nav__actions .btn--icon {
  border-radius: 12px;
  border: 1px solid var(--glass-border);
  background: var(--glass-bg);
  box-shadow: inset 0 1px 0 var(--glass-highlight);
}
.nav__actions .btn--icon:hover {
  transform: translateY(-1px);
  border-color: var(--glass-border);
  box-shadow: inset 0 1px 0 var(--glass-highlight), var(--glow-soft);
}
.langpick__menu {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  z-index: var(--z-dropdown, 60);
  min-width: 172px;
  max-height: 62vh;
  overflow-y: auto;
  padding: var(--s-1);
  background: var(--glass-bg-strong);
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
  border: 1px solid var(--glass-border);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-lg);
  animation: cselect-in .16s var(--ease-out);
}
.langpick__opt {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-3);
  width: 100%;
  text-align: left;
  padding: var(--s-2) var(--s-3);
  border: 0;
  background: none;
  border-radius: var(--r-sm);
  font: inherit;
  font-weight: 600;
  letter-spacing: .01em;
  color: hsl(var(--h, 24) 55% 76%);
  cursor: pointer;
  transition: background-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.langpick__opt:hover { background: hsl(var(--h, 24) 55% 55% / .14); color: hsl(var(--h, 24) 70% 86%); }
.langpick__opt.is-active {
  color: #fff;
  background: linear-gradient(135deg, hsl(var(--h, 24) 58% 58%), hsl(calc(var(--h, 24) + 30) 58% 50%));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .22);
}
.langpick__short { font-size: 11px; opacity: .7; }
html[data-theme="light"] .langpick__opt { color: hsl(var(--h, 24) 50% 38%); }

/* ---------------------------------------------------------------- 通知铃铛 */
.notif { position: relative; display: inline-flex; }
.notif__btn { position: relative; }
.notif__badge {
  position: absolute;
  top: -4px;
  right: -4px;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  font-weight: 800;
  line-height: 1;
  color: #fff;
  border-radius: 999px;
  background: linear-gradient(135deg, #ff5d8f, #ff2d55);
  box-shadow: 0 0 0 2px var(--bg-1, #0b0f1c), 0 2px 6px rgba(255, 45, 85, .5);
}
.notif__panel {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  z-index: var(--z-dropdown, 60);
  width: min(340px, 86vw);
  max-height: 64vh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  background: var(--glass-bg-strong);
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
  border: 1px solid var(--glass-border);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-lg);
  animation: cselect-in .16s var(--ease-out);
}
.notif__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--s-3) var(--s-4);
  border-bottom: 1px solid var(--glass-border);
}
.notif__read {
  border: 0;
  background: none;
  cursor: pointer;
  font: inherit;
  font-size: var(--fs-sm, .85rem);
  font-weight: 600;
  color: var(--neon-violet, #cf6a3e);
}
.notif__list { overflow-y: auto; padding: var(--s-1); }
.notif__item {
  display: flex;
  gap: var(--s-3);
  align-items: flex-start;
  padding: var(--s-2) var(--s-3);
  border-radius: var(--r-sm);
  text-decoration: none;
  color: inherit;
  transition: background-color var(--dur-fast) var(--ease-out);
}
.notif__item:hover { background: var(--bg-2); }
.notif__item.is-unread { background: rgba(207, 106, 62, .10); }
.notif__main { min-width: 0; }
.notif__text { font-size: var(--fs-sm, .85rem); line-height: 1.4; }
.notif__time { margin-top: 2px; }
.notif__dot {
  width: 32px;
  height: 32px;
  flex: none;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--bg-2);
}
.notif__empty { padding: var(--s-4); text-align: center; }
html[data-theme="light"] .notif__item.is-unread { background: rgba(207, 106, 62, .12); }

/* 邀请链接 */
.invite-link {
  display: inline-block;
  max-width: 100%;
  overflow-x: auto;
  white-space: nowrap;
  padding: var(--s-2) var(--s-3);
  background: var(--bg-2);
  border: 1px solid var(--glass-border);
  border-radius: var(--r-md);
  font-size: var(--fs-sm, .85rem);
  color: var(--neon-violet, #cf6a3e);
}

/* ---------------------------------------------------------------- 搜索联想词 */
.nav__search { position: relative; }
.search-suggest {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  z-index: var(--z-dropdown, 60);
  display: flex;
  flex-direction: column;
  min-width: 260px;
  padding: var(--s-1);
  background: var(--glass-bg-strong);
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
  border: 1px solid var(--glass-border);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-lg);
  animation: cselect-in .16s var(--ease-out);
}
.search-suggest__item {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  width: 100%;
  text-align: left;
  padding: var(--s-2) var(--s-3);
  border: 0;
  background: none;
  border-radius: var(--r-sm);
  font: inherit;
  color: var(--text-1);
  cursor: pointer;
  transition: background-color var(--dur-fast) var(--ease-out);
}
.search-suggest__item:hover { background: var(--bg-2); }
.search-suggest__mark { width: 18px; flex: none; text-align: center; color: var(--neon-violet, #cf6a3e); }
.search-suggest__label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.search-suggest__sub { color: var(--text-2); font-size: var(--fs-xs, .75rem); }

/* ---------------------------------------------------------------- 数据看板 */
.stat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: var(--s-3);
}
.stat-card {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: var(--s-4);
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  border-radius: var(--r-lg);
}
.stat-card__value { font-size: 1.6rem; font-weight: 800; letter-spacing: -.01em; }
.stat-card__label { font-size: var(--fs-xs, .78rem); color: var(--text-2); }
.stat-card__sub { font-size: var(--fs-xs, .72rem); color: var(--text-2); }

/* 数据看板：趋势折线 */
.trend-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: var(--s-3);
}
.trend-card {
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
  padding: var(--s-4);
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  border-radius: var(--r-lg);
}
.trend-card__head { display: flex; align-items: baseline; justify-content: space-between; }
.trend-card__title { color: var(--text-2); font-size: var(--fs-sm, .85rem); }
.trend-card__total { font-weight: 800; font-size: 1.1rem; }
.trend-card__svg { display: block; line-height: 0; }
.trend-card__svg svg { display: block; width: 100%; height: auto; }
.trend-card__axis { display: flex; justify-content: space-between; }

/* ---------------------------------------------------------------- 页面切换过渡（不闪屏） */
/* 有 View Transitions 时：让「旧页 → 新页」的交叉淡入平滑一点 */
::view-transition-old(root),
::view-transition-new(root) {
  animation-duration: .12s;
  animation-timing-function: cubic-bezier(.22, 1, .36, 1);
}
/* 交叉淡入时给整屏一块底色，杜绝中间那一帧白屏/空屏 */
::view-transition { background: var(--bg-0, #070A14); }

/* ---------------------------------------------------------------- 帖子底部动作条 */
.post-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-top: var(--s-4);
  padding-top: var(--s-4);
  border-top: 1px solid var(--glass-border);
}

/* 底部动作按钮：图标嵌在圆底里、hover 上浮、按下回弹 —— 统一的「高级感」语言。
   （旧版是普通 btn，视觉层级弱，这里改用专门的 .post-action） */
.post-action {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 42px;
  padding: 0 16px 0 8px;
  border-radius: 999px;
  border: 1px solid var(--glass-border);
  background: var(--bg-2);
  color: var(--text-1);
  font: inherit;
  font-size: var(--fs-sm);
  font-weight: 600;
  letter-spacing: .01em;
  text-decoration: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: transform var(--dur-fast) var(--ease-out),
              border-color var(--dur-fast) var(--ease-out),
              background-color var(--dur-fast) var(--ease-out),
              box-shadow var(--dur-fast) var(--ease-out);
}
.post-action:hover {
  transform: translateY(-2px);
  border-color: var(--neon-violet);
  box-shadow: 0 8px 22px rgba(122, 92, 255, .22);
}
.post-action:active { transform: translateY(0) scale(.97); }
.post-action:disabled { opacity: .5; cursor: default; transform: none; }

.post-action__icon {
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  color: var(--text-2);
  background: var(--bg-1);
  transition: color var(--dur-fast) var(--ease-out), background-color var(--dur-fast) var(--ease-out);
}
.post-action:hover .post-action__icon { color: var(--neon-violet); }

/* 已收藏：整个按钮点亮成品牌渐变，图标反白 */
.post-action.is-on {
  color: #fff;
  border-color: transparent;
  background: var(--grad-primary);
  box-shadow: 0 8px 22px rgba(122, 92, 255, .32);
}
.post-action.is-on .post-action__icon { color: #fff; background: rgba(255, 255, 255, .22); }

/* 删除：平时低调的危险色，hover 才变实 —— 降低误触 */
.post-action--danger { color: #ff9db1; border-color: rgba(255, 77, 109, .32); }
.post-action--danger .post-action__icon { color: #ff6b83; background: rgba(255, 77, 109, .14); }
.post-action--danger:hover {
  color: #fff;
  border-color: transparent;
  background: linear-gradient(135deg, #ff4d6d, #ff2d55);
  box-shadow: 0 8px 22px rgba(255, 45, 85, .34);
}
.post-action--danger:hover .post-action__icon { color: #fff; background: rgba(255, 255, 255, .2); }

/* 作者那一组靠右，和公开动作分开 */
.post-actions__gap { flex: 1 1 0; min-width: 0; }

/* ---------------------------------------------------------------- 主题市场 */
.skin-cats { display: flex; gap: 6px; overflow-x: auto; padding-bottom: 4px; }
.skin-cats .chip { flex: none; }
.skin-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(84px, 1fr));
  gap: var(--s-2);
}
.skin-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 8px;
  border-radius: var(--r-md);
  border: 1px solid var(--glass-border);
  background: var(--bg-2);
  color: var(--text-2);
  font: inherit;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: transform var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out);
}
.skin-card:hover { transform: translateY(-2px); border-color: var(--neon-violet); }
.skin-card.is-active { border-color: var(--neon-violet); color: var(--text-0); box-shadow: 0 0 0 2px hsl(var(--h, 24) 60% 50% / .0), inset 0 0 0 1px var(--neon-violet); }
.skin-card__sw {
  width: 100%;
  height: 36px;
  border-radius: 9px;
  /* 用壁纸本身做预览：点之前就知道整屏会变成什么样 */
  background: var(--skin-swatch, var(--grad-primary));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .25), 0 2px 8px rgba(0, 0, 0, .25);
}
.skin-card__name { font-size: var(--fs-xs); }

/* 会员专属主题：VIP 角标 + 未开通时压暗上锁 */
.skin-card { position: relative; }
.skin-card__vip {
  position: absolute;
  top: 6px;
  right: 6px;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .06em;
  padding: 2px 6px;
  border-radius: 999px;
  color: #1a1206;
  background: linear-gradient(135deg, var(--neon-amber, #f0b429), var(--neon-cyan, #e8963c));
  box-shadow: 0 0 10px hsl(40 90% 60% / .5);
}
.skin-card.is-locked .skin-card__sw { filter: grayscale(.55) brightness(.55); }
.skin-card.is-locked::after {
  content: '🔒';
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-size: 18px;
  pointer-events: none;
}

/* 主题入口：当前主题的实时预览（「主题用自己的 UI」） */
.skin-now {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  padding: var(--s-3);
  border-radius: var(--r-md);
  border: 1px solid var(--glass-border);
  background: var(--glass-highlight);
}
.skin-now__sw {
  width: 56px;
  height: 74px;
  border-radius: 12px;
  flex: none;
  background-size: cover;
  background-position: center;
  box-shadow: inset 0 0 0 1px var(--glass-border), 0 8px 20px rgba(0, 0, 0, .35);
}
.skin-now__meta { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.skin-now__name { font-size: var(--fs-lg); font-weight: var(--fw-bold); }
.skin-now__sub { font-size: var(--fs-xs); color: var(--text-2); }

/* 会员/达人状态胶囊：可点、带倒计时，一眼看出还剩多久 */
.member-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: var(--s-2);
  padding: 8px 14px;
  border-radius: 999px;
  text-decoration: none;
  color: #fff;
  font-size: var(--fs-sm);
  font-weight: 700;
  background: linear-gradient(135deg, var(--neon-amber, #f0b429), var(--neon-pink, #ff2d9b));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .28), 0 6px 18px rgba(255, 45, 155, .28);
  transition: transform var(--dur-fast) var(--ease-out), filter var(--dur-fast) var(--ease-out);
}
.member-chip:hover { transform: translateY(-2px); filter: brightness(1.06); }
.member-chip__icon { font-size: 14px; }
.member-chip__go { opacity: .8; font-size: 16px; }
.member-chip.is-expired { background: linear-gradient(135deg, #6b7280, #4b5563); box-shadow: none; }

/* 壁纸式皮肤：固定铺满一整屏，位于内容之下（负 z-index 盖住 html 底色但不挡内容）。
   没选主题时 --skin-bg 不存在 → 保持原样，什么都不变。 */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: var(--skin-bg, transparent);
}

/* ---------------------------------------------------------------- 会员特权表 */
.priv-scroll { overflow-x: auto; }
.priv-table { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); }
.priv-table th,
.priv-table td { padding: 10px 12px; text-align: center; white-space: nowrap; }
.priv-table th { font-weight: 700; color: var(--text-2); border-bottom: 1px solid var(--glass-border); }
.priv-table th.is-pro { color: #ffd166; }
.priv-table td { border-bottom: 1px solid var(--glass-border); color: var(--text-1); }
.priv-table td.is-pro { background: rgba(255, 209, 102, .06); }
.priv-table__name { text-align: left; color: var(--text-2); }
.priv-table tr:last-child td { border-bottom: 0; }

/* ---------------------------------------------------------------- 会员档位卡 */
/* 每档一个鲜艳色相（基础=青 / 中级=紫 / 高级=玫红），
   卡片描边、标题、圆点、按钮全部取自同一个 --h —— 整体统一又有层次。 */
.tier-card { border-color: hsl(var(--h, 262) 70% 60% / .34); }
.tier-card__head { display: flex; align-items: center; gap: var(--s-2); }
.tier-card__head h3 { color: hsl(var(--h, 262) 82% 74%); }
.tier-card__dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: hsl(var(--h, 262) 88% 62%);
  box-shadow: 0 0 0 4px hsl(var(--h, 262) 88% 62% / .18), 0 0 14px hsl(var(--h, 262) 88% 62% / .55);
}
.tier-card__perks { margin: 0; padding-left: 18px; color: var(--text-2); font-size: var(--fs-sm); }
.tier-card__perks li { margin-bottom: 4px; }
.tier-card__cta {
  color: #fff;
  border-color: transparent;
  background: linear-gradient(135deg, hsl(var(--h, 262) 86% 58%), hsl(calc(var(--h, 262) + 34) 86% 52%));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .26), 0 8px 20px hsl(var(--h, 262) 70% 45% / .38);
}
.tier-card__cta:hover { filter: brightness(1.07) saturate(1.05); transform: translateY(-2px); }

/* ---------------------------------------------------------------- 分享面板 */
.share-sheet { max-width: min(94vw, 420px); padding: var(--s-5); }
.share-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--s-3);
}
.share-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  border: 0;
  background: none;
  cursor: pointer;
  font: inherit;
  color: var(--text-1);
}
.share-item__dot {
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: #fff;
  font-weight: 700;
  font-size: 18px;
  background: hsl(var(--h, 24) 62% 52%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .3), 0 3px 10px hsl(var(--h, 24) 62% 40% / .45);
  transition: transform var(--dur-fast) var(--ease-out);
}
.share-item:hover .share-item__dot { transform: translateY(-2px) scale(1.05); }
.share-item__name { font-size: var(--fs-xs); color: var(--text-2); }

@keyframes view-fade-in { from { opacity: 0; } to { opacity: 1; } }
/* 不支持 View Transitions 的浏览器才用「新页淡入」兜底 ——
   两者同时开会让内容先透明再出现，反而更像闪。 */
@supports not (view-transition-name: root) {
  .app-main > * { animation: none; }
}

@media (prefers-reduced-motion: reduce) {
  .app-main > * { animation: none; }
  ::view-transition-old(root),
  ::view-transition-new(root) { animation: none; }
}

.field-error {
  font-size: var(--fs-xs);
  color: var(--danger);
}

/* 输入框外的搜索条 */
.search {
  position: relative;
  display: flex;
  align-items: center;
}
.search .input { padding-left: var(--s-6); }
.search__icon {
  position: absolute;
  left: var(--s-3);
  color: var(--text-2);
  pointer-events: none;
  font-size: var(--fs-sm);
}

/* ---------------------------------------------------------------- 上传区 */
.dropzone {
  position: relative;
  border: 1.5px dashed var(--glass-border);
  border-radius: var(--r-lg);
  padding: var(--s-5);
  text-align: center;
  color: var(--text-2);
  background: var(--bg-1);
  cursor: pointer;
  transition: border-color var(--dur) var(--ease-out), background-color var(--dur) var(--ease-out);
}
.dropzone:hover,
.dropzone.is-dragover {
  border-color: var(--neon-cyan);
  background: var(--bg-2);
  color: var(--text-1);
}
.dropzone__hint { font-size: var(--fs-sm); margin-top: var(--s-2); }

/* 预览缩略图栅格 —— 同样用等宽网格保持整齐 */
.preview-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
  gap: var(--s-3);
  margin-top: var(--s-4);
}
.preview {
  position: relative;
  aspect-ratio: 3 / 4;
  border-radius: var(--r-md);
  overflow: hidden;
  border: 1px solid var(--glass-border);
  background: var(--bg-2);
}
.preview img { width: 100%; height: 100%; object-fit: cover; }
.preview__remove {
  position: absolute;
  top: var(--s-1);
  right: var(--s-1);
  width: 24px;
  height: 24px;
  border-radius: var(--r-pill);
  border: 0;
  background: rgba(7, 10, 20, 0.78);
  color: #fff;
  font-size: var(--fs-sm);
  line-height: 1;
  display: grid;
  place-items: center;
}
.preview__remove:hover { background: var(--danger); }
.preview__cover {
  position: absolute;
  bottom: var(--s-1);
  left: var(--s-1);
  padding: 1px var(--s-2);
  border-radius: var(--r-pill);
  font-size: 10px;
  background: var(--glass-bg-strong);
  color: var(--text-1);
}

/* ---------------------------------------------------------------- 模态框 */
.modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: var(--z-modal);
  display: grid;
  place-items: center;
  padding: var(--s-4);
  background: rgba(18, 12, 9, 0.72);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  animation: fade-in var(--dur) var(--ease-out);
}
.modal {
  width: 100%;
  max-width: 460px;
  max-height: 88vh;
  overflow-y: auto;
  padding: var(--s-5);
  border-radius: var(--r-xl);
  background: var(--bg-1);
  border: 1px solid var(--glass-border);
  box-shadow: var(--shadow-lg);
  animation: modal-in var(--dur) var(--ease-spring);
}
.modal__title { margin-bottom: var(--s-4); font-size: var(--fs-lg); }
.modal__actions {
  display: flex;
  gap: var(--s-3);
  justify-content: flex-end;
  margin-top: var(--s-5);
}

@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes modal-in {
  from { opacity: 0; transform: translateY(12px) scale(0.97); }
  to   { opacity: 1; transform: none; }
}

/* ---------------------------------------------------------------- Toast */
.toast-stack {
  position: fixed;
  right: var(--s-5);
  bottom: var(--s-5);
  z-index: var(--z-toast);
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
  pointer-events: none;
}
.toast {
  min-width: 220px;
  max-width: 360px;
  padding: var(--s-3) var(--s-4);
  border-radius: var(--r-md);
  background: var(--glass-bg-strong);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid var(--glass-border);
  border-left: 3px solid var(--neon-cyan);
  box-shadow: var(--shadow-lg);
  font-size: var(--fs-sm);
  animation: toast-in var(--dur) var(--ease-spring);
  pointer-events: auto;
}
.toast--ok     { border-left-color: var(--ok); }
.toast--error  { border-left-color: var(--danger); }
.toast--warn   { border-left-color: var(--warn); }
.toast.is-leaving { animation: toast-out var(--dur) var(--ease-out) forwards; }

@keyframes toast-in {
  from { opacity: 0; transform: translateX(24px); }
  to   { opacity: 1; transform: none; }
}
@keyframes toast-out {
  to { opacity: 0; transform: translateX(24px); }
}
@media (max-width: 640px) {
  .toast-stack { left: var(--s-4); right: var(--s-4); bottom: var(--s-4); }
  .toast { max-width: none; }
}

/* ---------------------------------------------------------------- 侧栏面板 */
.panel {
  padding: var(--s-4);
  border-radius: var(--r-lg);
  background: var(--bg-1);
  border: 1px solid var(--glass-border);
}
.panel__title {
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
  color: var(--text-2);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  margin-bottom: var(--s-3);
}

.list-row {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  padding: var(--s-2);
  border-radius: var(--r-md);
  transition: background-color var(--dur-fast) var(--ease-out);
}
.list-row:hover { background: var(--bg-2); }
.list-row__main { min-width: 0; flex: 1; }
.list-row__title {
  font-size: var(--fs-sm);
  color: var(--text-0);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.list-row__sub { font-size: var(--fs-xs); color: var(--text-2); }

/* ---------------------------------------------------------------- 统计块 */
.stat {
  padding: var(--s-4);
  border-radius: var(--r-lg);
  background: var(--bg-1);
  border: 1px solid var(--glass-border);
}
.stat__value {
  font-size: var(--fs-xl);
  font-weight: var(--fw-bold);
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
}
.stat__label { font-size: var(--fs-xs); color: var(--text-2); margin-top: var(--s-1); }

/* ---------------------------------------------------------------- 个人主页头部 */
.profile-header {
  display: flex;
  gap: var(--s-5);
  align-items: flex-start;
  flex-wrap: wrap;
  padding: var(--s-6);
  border-radius: var(--r-xl);
  border: 1px solid var(--glass-border);
  background:
    radial-gradient(30rem 16rem at 0% 0%, rgba(207, 106, 62, 0.18), transparent 60%),
    radial-gradient(26rem 14rem at 100% 0%, rgba(232, 150, 60, 0.14), transparent 60%),
    var(--bg-1);
}
.profile-header__main { flex: 1; min-width: 220px; }
.profile-header__name {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  flex-wrap: wrap;
}
.profile-stats {
  display: flex;
  gap: var(--s-5);
  margin-top: var(--s-3);
  font-size: var(--fs-sm);
}
.profile-stats b { font-variant-numeric: tabular-nums; }
/* 统计项。base.css 给所有 a 上了青色，这里要让它看起来还是普通文字。
   可点的那几个悬停才变色，靠这个区分「能点的」和「纯数字」。 */
.profile-stat { display: inline-flex; align-items: baseline; gap: 3px; }
a.profile-stat { color: inherit; }
a.profile-stat:hover { color: var(--text-0); }
a.profile-stat:hover .dim { color: var(--text-1); }

/* ---------------------------------------------------------------- 评论区 */
.comment {
  display: flex;
  gap: var(--s-3);
  padding: var(--s-3) 0;
  border-bottom: 1px solid var(--glass-border);
}
.comment:last-child { border-bottom: 0; }
.comment__main { flex: 1; min-width: 0; }
.comment__head {
  display: flex;
  align-items: baseline;
  gap: var(--s-2);
  flex-wrap: wrap;
}
.comment__author { font-size: var(--fs-sm); font-weight: var(--fw-medium); color: var(--text-0); }
.comment__time { font-size: var(--fs-xs); color: var(--text-2); }
.comment__body { font-size: var(--fs-sm); color: var(--text-1); margin-top: var(--s-1); word-break: break-word; }

/* 待审核/已隔离的评论在作者和管理员眼里加个标记，避免误以为发布失败 */
.comment.is-pending .comment__body { opacity: 0.7; }

/* ---------------------------------------------------------------- 评论区改版：折叠 · 回复 · 投票 */
.comment-list { display: flex; flex-direction: column; }
.comment-thread { display: flex; flex-direction: column; }
.comment--reply { padding-left: var(--s-4); border-left: 2px solid var(--glass-border); border-bottom: 0; }
.comment-replies { display: flex; flex-direction: column; margin: 0 0 var(--s-3) var(--s-5); }
.comment-more { padding-top: var(--s-3); text-align: center; }
.comment__body { white-space: pre-wrap; }
.comment__body.is-clamped {
  display: -webkit-box;
  -webkit-line-clamp: 4;
  line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.comment__votes { display: flex; gap: var(--s-4); margin-top: var(--s-2); }
.vote-btn {
  font: inherit;
  font-size: var(--fs-xs);
  color: var(--text-2);
  background: none;
  border: 0;
  cursor: pointer;
  padding: 2px 6px;
  border-radius: var(--r-sm);
  font-variant-numeric: tabular-nums;
  transition: background-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.vote-btn:hover { background: var(--bg-2); color: var(--text-0); }
.vote-btn.is-on { color: var(--neon-cyan); font-weight: var(--fw-bold); }
.link-btn {
  font: inherit;
  font-size: var(--fs-xs);
  color: var(--text-2);
  background: none;
  border: 0;
  cursor: pointer;
  padding: 2px 0;
  align-self: flex-start;
}
.link-btn:hover { color: var(--text-0); }

/* 正文里的表情 */
.sticker-inline {
  width: 1.7em;
  height: 1.7em;
  vertical-align: -0.45em;
  object-fit: contain;
  display: inline-block;
}

/* ---------------------------------------------------------------- 表情选择面板 */
.sticker-picker { margin-top: var(--s-2); }
.sticker-tabs { display: flex; gap: var(--s-2); flex-wrap: wrap; margin-bottom: var(--s-3); }
.sticker-tab {
  font: inherit;
  font-size: var(--fs-xs);
  padding: 4px 10px;
  border: 1px solid var(--glass-border);
  border-radius: var(--r-pill);
  background: var(--bg-2);
  color: var(--text-1);
  cursor: pointer;
}
.sticker-tab.is-active { background: var(--grad-cta); color: var(--text-inverse); border-color: transparent; font-weight: var(--fw-bold); }
.sticker-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(44px, 1fr));
  gap: var(--s-2);
  max-height: 220px;
  overflow-y: auto;
}
.sticker-cell { padding: 4px; border: 0; background: none; cursor: pointer; border-radius: var(--r-sm); }
.sticker-cell:hover { background: var(--bg-2); }
.sticker-cell img { width: 100%; aspect-ratio: 1 / 1; object-fit: contain; display: block; }
.sticker-footer { margin-top: var(--s-3); display: flex; justify-content: flex-end; }
.sticker-hint { margin-top: var(--s-2); }

/* ---------------------------------------------------------------- @ 联想下拉 */
.mention-box {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--glass-border);
  border-radius: var(--r-md);
  overflow: hidden;
  background: var(--bg-1);
}
.mention-item {
  display: flex;
  gap: var(--s-2);
  align-items: baseline;
  width: 100%;
  text-align: left;
  padding: var(--s-2) var(--s-3);
  border: 0;
  background: none;
  color: var(--text-0);
  cursor: pointer;
  font: inherit;
  font-size: var(--fs-sm);
}
.mention-item:hover { background: var(--bg-2); }

/* 选中的卡片（如会员套餐选择） */
.card.is-selected {
  box-shadow: 0 0 0 2px var(--neon-amber), var(--shadow-lg);
  border-color: transparent;
}

/* ---------------------------------------------------------------- 录音组件 */
.recorder { margin-top: var(--s-2); }
.recorder audio { max-width: 240px; height: 32px; }
.recorder .btn.is-recording { color: var(--danger); border-color: var(--danger); }

/* ---------------------------------------------------------------- 私聊 */
.chat-box {
  background: var(--bg-1);
  border: 1px solid var(--glass-border);
  border-radius: var(--r-lg);
  padding: var(--s-4);
}
.chat-list {
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
  max-height: 60vh;
  overflow-y: auto;
  padding-right: var(--s-2);
}
.chat-row { display: flex; }
.chat-row.is-mine { justify-content: flex-end; }
.chat-stack { display: flex; flex-direction: column; gap: 2px; max-width: 78%; }
.chat-row.is-mine .chat-stack { align-items: flex-end; }
.chat-bubble {
  background: var(--bg-2);
  border: 1px solid var(--glass-border);
  border-radius: var(--r-md);
  padding: var(--s-2) var(--s-3);
  font-size: var(--fs-sm);
  color: var(--text-0);
  white-space: pre-wrap;
  word-break: break-word;
}
.chat-bubble.is-mine { background: var(--grad-cta); color: var(--text-inverse); border-color: transparent; }
.chat-image { max-width: 200px; border-radius: var(--r-sm); display: block; }
.chat-composer { margin-top: var(--s-4); }

/* ---------------------------------------------------------------- 详情页大图 */
.detail-media {
  border-radius: var(--r-lg);
  overflow: hidden;
  border: 1px solid var(--glass-border);
  background: var(--bg-2);
}
.detail-media img { width: 100%; height: auto; display: block; }

/* ---------------------------------------------------------------- 图片时间地点 */
/* 只在用户填过的时候出现。空着就不显示「未标注」—— 那只是噪音。 */
.media-caption {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-3);
  align-items: center;
  margin-top: var(--s-2);
  padding-inline: var(--s-1);
  font-size: var(--fs-xs);
  color: var(--text-2);
}
.media-caption__place { display: inline-flex; align-items: center; gap: var(--s-1); }
.media-caption__time { font-variant-numeric: tabular-nums; }

/* ---------------------------------------------------------------- 表格 */
/* 表格要能读。加了照片背景之后，不铺底的话整张表会被背景透上来糊掉 ——
   后台的表格尤其明显，那里一屏都是文字。 */
.table-wrap {
  overflow-x: auto;
  border-radius: var(--r-lg);
  border: 1px solid var(--glass-border);
  background: var(--bg-1);
}
.table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--fs-sm);
}
.table th,
.table td {
  padding: var(--s-3);
  text-align: left;
  border-bottom: 1px solid var(--glass-border);
  white-space: nowrap;
}
.table th {
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-2);
  background: var(--bg-2);
  position: sticky;
  top: 0;
}
.table tbody tr:hover { background: var(--bg-2); }
.table tbody tr:last-child td { border-bottom: 0; }

/* ---------------------------------------------------------------- 标签页 */
.tabs {
  display: flex;
  gap: var(--s-1);
  padding: var(--s-1);
  border-radius: var(--r-pill);
  background: var(--glass-bg);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  border: 1px solid var(--glass-border);
  width: fit-content;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .04);
}
.tab {
  padding: var(--s-2) var(--s-4);
  border: 0;
  border-radius: var(--r-pill);
  background: transparent;
  color: var(--text-2);
  font-size: var(--fs-sm);
  font-weight: 600;
  letter-spacing: .01em;
  transition: color var(--dur-fast) var(--ease-out), background-color var(--dur-fast) var(--ease-out), box-shadow var(--dur) var(--ease-out);
}
.tab:hover { color: var(--text-0); }
.tab.is-active { color: #fff; background: var(--grad-cta); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .22), var(--glow-soft); }

/* ---------------------------------------------------------------- 类目选择器 */
/* 「先选大类目，再展开小类目」。
   大类目那排直接复用 .tabs / .tab，这里只补展开态和值后缀。 */
.catbar {
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
}
/* 手机上大类目多了可以横滑，别把筛选栏撑出横向滚动条 */
.catbar__groups {
  max-width: 100%;
  overflow-x: auto;
  scrollbar-width: none;
}
.catbar__groups::-webkit-scrollbar { display: none; }

.catbar__caret {
  margin-left: 2px;
  font-size: 12px;
  line-height: 1;
  opacity: .65;
  transition: transform var(--dur-fast) var(--ease-out);
}
.catbar__group.is-open .catbar__caret { transform: rotate(180deg); opacity: 1; }

.catbar__group {
  display: inline-flex;
  align-items: center;
  gap: var(--s-1);
  white-space: nowrap;
}
/* 展开中的大类目：明显但克制地"亮起来" */
.catbar__group.is-open {
  color: var(--text-0);
  background: var(--bg-2);
  box-shadow: inset 0 0 0 1px rgba(207, 106, 62, .35);
}
/* 选过值就挂在标签后面，收起时也知道当前筛的是什么 */
.catbar__value { color: var(--style-accent, var(--neon-violet)); font-weight: var(--fw-bold); }

/* 展开的小类目：独立的一块玻璃面板，有种"抽屉拉开"的质感 */
.catbar__chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2);
  padding: var(--s-3);
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  border-radius: var(--r-lg);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .04);
  animation: catbar-in .22s var(--ease-out);
}
@keyframes catbar-in { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }

/* 展开的小类目：柔和彩色字体（低饱和色相），选中态是对应色相的柔和渐变。
   仍然克制，不刺眼。 */
.catbar__chips .chip {
  color: hsl(var(--h, 24) 58% 74%);
  border-color: hsl(var(--h, 24) 52% 60% / .26);
  background: hsl(var(--h, 24) 52% 55% / .10);
}
.catbar__chips .chip:hover {
  color: hsl(var(--h, 24) 68% 84%);
  border-color: hsl(var(--h, 24) 58% 62% / .5);
  transform: translateY(-1px);
}
.catbar__chips .chip.is-active {
  color: #fff;
  background: linear-gradient(135deg, hsl(var(--h, 24) 60% 60%), hsl(calc(var(--h, 24) + 30) 60% 52%));
  border-color: transparent;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .28), 0 8px 20px hsl(var(--h, 24) 55% 45% / .3);
}
html[data-theme="light"] .catbar__chips .chip { color: hsl(var(--h, 24) 55% 40%); }
html[data-theme="light"] .catbar__chips .chip.is-active { color: #fff; }

/* 手机：小类目横滑一排，不换行。
   风格补到 10 个之后，换行会占掉四排，把刚收回来的竖向空间又吐回去。
   横滑是这类筛选条的常规做法（chip 不缩，靠滑动看全）。 */
@media (max-width: 700px) {
  .catbar__chips {
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
    /* 让最左/最右的 chip 贴边时不至于被裁掉半个 */
    padding-inline: 2px;
    margin-inline: -2px;
  }
  .catbar__chips::-webkit-scrollbar { display: none; }
  .catbar__chips > .chip { flex-shrink: 0; }
}

/* ---------------------------------------------------------------- 分段条 */
.hero {
  position: relative;
  overflow: hidden;
  padding: var(--s-7) var(--s-6);
  border-radius: var(--r-xl);
  border: 1px solid var(--glass-border);
  background:
    radial-gradient(44rem 22rem at 8% -10%, rgba(226, 88, 107, 0.20), transparent 62%),
    radial-gradient(40rem 20rem at 92% 6%, rgba(232, 150, 60, 0.17), transparent 60%),
    radial-gradient(36rem 22rem at 55% 120%, rgba(207, 106, 62, 0.18), transparent 64%),
    var(--bg-1);
  margin-bottom: var(--s-5);
}
/* 右上角一枚装饰性光环，纯 CSS，给画面加层次 */
.hero::after {
  content: "";
  position: absolute;
  top: -70px;
  right: -70px;
  width: 260px;
  height: 260px;
  border-radius: 50%;
  border: 1px solid rgba(207, 106, 62, 0.28);
  box-shadow: inset 0 0 60px rgba(207, 106, 62, 0.12);
  pointer-events: none;
}
.hero__title {
  font-size: var(--fs-3xl);
  line-height: 1.1;
  letter-spacing: -0.035em;
  margin-bottom: var(--s-3);
}
.hero__sub {
  color: var(--text-1);
  max-width: 46ch;
  font-size: var(--fs-md);
}
/* 品牌拉丁名，做小字距拉开的装饰行 */
.hero__eyebrow {
  display: inline-block;
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--text-2);
  margin-bottom: var(--s-4);
}
@media (max-width: 640px) {
  .hero { padding: var(--s-6) var(--s-5); }
  .hero__title { font-size: var(--fs-2xl); }
}

/* ---------------------------------------------------------------- 提示条 */
.notice {
  padding: var(--s-3) var(--s-4);
  border-radius: var(--r-md);
  font-size: var(--fs-sm);
  border: 1px solid var(--glass-border);
  background: var(--bg-2);
  color: var(--text-1);
}
.notice--warn { border-color: rgba(240, 180, 41, 0.4); background: rgba(240, 180, 41, 0.08); color: var(--warn); }
.notice--danger { border-color: rgba(217, 83, 79, 0.4); background: rgba(217, 83, 79, 0.08); color: var(--danger); }
.notice--ok { border-color: rgba(127, 176, 105, 0.4); background: rgba(127, 176, 105, 0.08); color: var(--ok); }

/* ---------------------------------------------------------------- 分割线 */
.divider {
  height: 1px;
  background: var(--glass-border);
  border: 0;
  margin-block: var(--s-4);
}

/* ---------------------------------------------------------------- 空态 */
/* 站点不预置示例内容，所以这一屏是很多人的第一印象。
   做成一页有分量的引导，而不是敷衍的一句「暂无内容」。 */
.empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: var(--s-8) var(--s-5);
  border-radius: var(--r-xl);
  border: 1px dashed var(--glass-border);
  background:
    radial-gradient(28rem 16rem at 50% 0%, rgb(var(--aurora-1) / 0.10), transparent 62%),
    var(--bg-1);
}
.empty__icon {
  width: 72px;
  height: 72px;
  display: grid;
  place-items: center;
  border-radius: var(--r-pill);
  font-size: 30px;
  color: var(--style-accent, var(--neon-violet));
  background: rgb(var(--aurora-1) / 0.12);
  border: 1px solid rgb(var(--aurora-1) / 0.28);
  margin-bottom: var(--s-5);
}
.empty__title {
  font-size: var(--fs-lg);
  margin-bottom: var(--s-2);
}
.empty__desc {
  color: var(--text-1);
  max-width: 46ch;
  font-size: var(--fs-sm);
  line-height: var(--lh-normal);
}
.empty__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-3);
  justify-content: center;
  margin-top: var(--s-5);
}
.empty__hint {
  margin-top: var(--s-5);
  font-size: var(--fs-xs);
  color: var(--text-2);
  max-width: 40ch;
}

/* ---------------------------------------------------------------- 单品卡 */
.item-card {
  display: flex;
  flex-direction: column;
  border-radius: var(--r-lg);
  overflow: hidden;
  background: var(--bg-1);
  border: 1px solid var(--glass-border);
  transition: transform var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease-out),
              border-color var(--dur) var(--ease-out);
}
.item-card:hover {
  transform: translateY(-4px);
  border-color: rgb(var(--aurora-1) / 0.45);
  box-shadow: var(--glow-lift);
}
/* 单品图用正方形，和信息流的 3:4 区分开 —— 一眼能看出这是另一种内容 */
.item-card__media {
  position: relative;
  aspect-ratio: 1 / 1;
  background: var(--bg-2);
  overflow: hidden;
  display: grid;
  place-items: center;
}
.item-card__media img { width: 100%; height: 100%; object-fit: cover; }
.item-card__placeholder { font-size: 34px; color: var(--text-2); }
.item-card__body { padding: var(--s-3); display: flex; flex-direction: column; gap: var(--s-2); flex: 1; }
.item-card__name { font-size: var(--fs-sm); font-weight: var(--fw-medium); }
.item-card__brand { font-size: var(--fs-xs); color: var(--text-2); }

/* 可塑性星级 */
.versatility { display: inline-flex; gap: 2px; font-size: var(--fs-xs); color: var(--text-2); }
.versatility__dot { color: rgb(var(--aurora-1) / 0.85); }

/* 主页「关于」栏的资料列表 */
.about-list {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--s-3) var(--s-5);
  margin: 0;
  font-size: var(--fs-sm);
}
.about-list dt { color: var(--text-2); white-space: nowrap; }
.about-list dd { margin: 0; color: var(--text-0); word-break: break-word; }

/* ---------------------------------------------------------------- 商品卡 */
.product-card {
  display: flex;
  flex-direction: column;
  border-radius: var(--r-lg);
  overflow: hidden;
  background: var(--bg-1);
  border: 1px solid var(--glass-border);
  transition: transform var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease-out);
}
.product-card:hover { transform: translateY(-4px); box-shadow: var(--glow-lift); }

/* 淘宝式商品卡：价格最抢眼，店名/销量次之 */
.product-card__media { position: relative; }
.product-card__badge {
  position: absolute;
  top: 8px;
  left: 8px;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  color: #fff;
  background: var(--grad-cta);
  box-shadow: 0 2px 8px rgba(255, 45, 85, .38);
}
.product-card__priceRow {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s-2);
  margin-top: 2px;
}
.product-card__priceRow .price {
  color: #ff2d55;
  font-weight: 800;
  font-size: 1.22em;
  letter-spacing: -.01em;
}
.product-card__priceRow .price__symbol { font-size: .72em; font-weight: 700; }
.product-card__sold { font-size: var(--fs-xs); color: var(--text-3); white-space: nowrap; }
.product-card__shop {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 2px;
  font-size: var(--fs-xs);
  color: var(--text-3);
}
.product-card__shopIcon { font-size: 12px; opacity: .85; }
.product-card__shop .tag { margin-left: auto; }

/* ---------------------------------------------------------------- 配乐 */
.music-pick {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: var(--s-2);
}
.music-track {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  padding: 10px 12px;
  border-radius: var(--r-md);
  border: 1px solid var(--glass-border);
  background: var(--bg-1);
  color: var(--text-1);
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: border-color var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out);
}
.music-track:hover { transform: translateY(-1px); border-color: var(--accent, #7a5cff); }
.music-track.is-active { border-color: var(--accent, #7a5cff); box-shadow: inset 0 0 0 1px var(--accent, #7a5cff); }
.music-track__play {
  flex: none;
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  font-size: 11px;
  color: #fff;
  background: var(--grad-primary);
}
.music-track__meta { display: flex; flex-direction: column; min-width: 0; }
/* 搜索结果用歌曲自己的封面图当按钮（点封面即试听） */
.music-track__cover {
  position: relative;
  flex: none;
  width: 42px;
  height: 42px;
  border-radius: 10px;
  overflow: hidden;
  background: var(--bg-2);
  display: grid;
  place-items: center;
  cursor: pointer;
}
.music-track__art { width: 100%; height: 100%; object-fit: cover; display: block; }
.music-track__playOver {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: #fff;
  font-size: 12px;
  background: rgba(10, 10, 18, .40);
  opacity: 0;
  transition: opacity var(--dur-fast) var(--ease-out);
}
.music-track:hover .music-track__playOver,
.music-track__cover:active .music-track__playOver { opacity: 1; }
.music-track__title { font-size: var(--fs-sm); font-weight: 600; }
.music-track__artist { font-size: var(--fs-xs); color: var(--text-3); }
.music-custom { margin-top: var(--s-2); }.music-custom > summary { cursor: pointer; font-size: var(--fs-sm); color: var(--text-2); }

.music-player { display: flex; align-items: center; gap: var(--s-3); flex-wrap: wrap; margin-top: var(--s-3); }
/* 原生音频控件藏起来 —— 一律用下面的自制按钮控制 */
.music-audio { display: none; }

/* 自制播放按钮：暂停态=播放三角+渐变圆环；播放态=四根律动柱+流光圆环 */
.playbtn {
  position: relative;
  flex: none;
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 50%;
  cursor: pointer;
  color: #fff;
  background: var(--grad-primary);
  box-shadow: 0 8px 22px rgba(122, 92, 255, .38);
  transition: transform var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out);
}
.playbtn:hover { transform: translateY(-2px) scale(1.04); box-shadow: 0 12px 28px rgba(122, 92, 255, .5); }
.playbtn:active { transform: scale(.95); }

.playbtn__icon { grid-area: 1 / 1; display: grid; place-items: center; transition: opacity .18s ease; }
.playbtn__bars { grid-area: 1 / 1; display: none; align-items: flex-end; gap: 3px; height: 18px; }
.playbtn__bars i { width: 3px; height: 6px; border-radius: 2px; background: #fff; animation: eq .9s ease-in-out infinite; }
.playbtn__bars i:nth-child(2) { animation-delay: .15s; }
.playbtn__bars i:nth-child(3) { animation-delay: .3s; }
.playbtn__bars i:nth-child(4) { animation-delay: .45s; }
@keyframes eq { 0%, 100% { height: 6px; } 50% { height: 18px; } }

.playbtn__ring { position: absolute; inset: -5px; border-radius: 50%; opacity: 0; pointer-events: none; }

.music-player.is-playing .playbtn__icon { opacity: 0; }
.music-player.is-playing .playbtn__bars { display: flex; }
.music-player.is-playing .playbtn { box-shadow: 0 0 0 3px rgba(122, 92, 255, .25), 0 10px 26px rgba(255, 45, 155, .42); }
.music-player.is-playing .playbtn__ring {
  opacity: .95;
  background: conic-gradient(from 0deg, transparent 0deg, var(--neon-violet) 120deg, var(--neon-pink) 240deg, transparent 360deg);
  animation: spin 1.6s linear infinite;
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 3px));
  mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 3px));
}
@keyframes spin { to { transform: rotate(360deg); } }

/* 尊重系统的减弱动效设置 */
@media (prefers-reduced-motion: reduce) {
  .playbtn__bars i, .music-player.is-playing .playbtn__ring { animation: none; }
}
.music-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  max-width: 100%;
  padding: 6px 14px;
  border-radius: 999px;
  border: 1px solid var(--glass-border);
  background: var(--bg-1);
  color: var(--text-1);
  font-size: var(--fs-sm);
}
.music-chip__icon {
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  color: #fff;
  font-size: 12px;
  background: var(--grad-primary);
}
.music-chip__cover {
  width: 22px;
  height: 22px;
  border-radius: 6px;
  object-fit: cover;
  flex: none;
}
.music-chip__name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.music-chip__src {
  flex: none;
  padding: 1px 8px;
  border-radius: 999px;
  font-size: 11px;
  color: var(--text-2);
  background: var(--bg-2);
}

/* ---------------------------------------------------------------- 付款订单号（会员收款对账） */
/* 把"这一笔付款"和"这一条申请"绑死：用户照抄去填转账备注，管理员按号核销。 */
.pay-order {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  margin-top: var(--s-3);
  padding: var(--s-3);
  border-radius: var(--r-md);
  border: 1px dashed var(--glass-border);
  background: var(--glass-highlight);
}
.pay-order__label { font-size: var(--fs-xs); color: var(--text-2); }
.pay-order__code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 22px;
  font-weight: var(--fw-bold);
  letter-spacing: 3px;
  background: linear-gradient(135deg, var(--neon-cyan), var(--neon-violet));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.pay-order__amount { font-size: var(--fs-sm); color: var(--text-1); }

/* ---------------------------------------------------------------- 后台：玻璃质感的「为用户开通会员」扩展栏 */
.glass-grant { overflow: hidden; }
.glass-grant__head {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  padding: var(--s-4);
  cursor: pointer;
  list-style: none;
  user-select: none;
}
.glass-grant__head::-webkit-details-marker { display: none; }
.glass-grant__head:hover { background: var(--glass-highlight); }
.glass-grant__badge {
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border-radius: 9px;
  color: #fff;
  font-size: 13px;
  background: var(--grad-primary);
  box-shadow: var(--glow-violet);
  flex: none;
}
.glass-grant__title { font-size: var(--fs-md); font-weight: var(--fw-bold); letter-spacing: .01em; }
.glass-grant__chev {
  margin-left: auto;
  color: var(--text-2);
  transition: transform var(--dur) var(--ease-out);
}
.glass-grant[open] .glass-grant__chev { transform: rotate(180deg); }
.glass-grant__body {
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
  padding: 0 var(--s-4) var(--s-4);
}

/* ---------------------------------------------------------------- 动效层（原生侧，见 public/js/motion.js） *//* 按压回弹：按钮/动作条按下时缩一下再弹回，手感更「高级」 */
.is-press { animation: elan-press .34s cubic-bezier(.2,.8,.3,1); }
@keyframes elan-press {
  0% { transform: scale(1); }
  38% { transform: scale(.95); }
  100% { transform: scale(1); }
}
/* 卡片聚光：指针位置生成一处柔光（与 React 版 SpotlightCard 同观感） */
.tier-card, .product-card { position: relative; overflow: hidden; }
.tier-card::after, .product-card::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0;
  transition: opacity .28s ease;
  background: radial-gradient(220px circle at var(--mx, 50%) var(--my, 50%), hsl(var(--h, 285) 90% 70% / .22), transparent 62%);
}
.tier-card.has-spot::after, .product-card.has-spot::after { opacity: 1; }
@media (prefers-reduced-motion: reduce) {
  .is-press { animation: none; }
  .tier-card::after, .product-card::after { display: none; }
}

/* ---------------------------------------------------------------- 页面转场（class 驱动，最安全：动画被拦内容也正常） */
.page-enter { animation: page-in .52s cubic-bezier(.16,.84,.24,1) both; }
@keyframes page-in {
  from { opacity: 0; transform: translateY(16px) scale(.994); }
  to { opacity: 1; transform: none; }
}
/* 大标题额外给一点"落定"感（只作用于页面第一屏的 h1/h2，不动布局） */
.page-enter > h1,
.page-enter > h2,
.page-enter > .hero,
.page-enter > .auth-shell {
  animation: page-title-in .66s cubic-bezier(.16,.84,.24,1) both;
  animation-delay: .04s;
}
@keyframes page-title-in {
  from { opacity: 0; transform: translateY(22px); letter-spacing: .02em; }
  to { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .page-enter, .page-enter > h1, .page-enter > h2, .page-enter > .hero, .page-enter > .auth-shell { animation: none; }
}

/* ---------------------------------------------------------------- 拍摄界面（原创图标 · 短视频同款布局）
   全屏黑底 + 实时取景 + 底部大圆快门 + 顶部工具排 + 滤镜条。
   图标全部自绘（几何图形），不引用任何第三方 App 的素材。 */
.cam { position: fixed; inset: 0; z-index: var(--z-modal); background: #000; overflow: hidden; touch-action: none; }
.cam__preview { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; background: #000; }
.cam__flash { position: absolute; inset: 0; background: #fff; opacity: 0; pointer-events: none; transition: opacity .12s ease; }
.cam__flash.is-on { opacity: .9; }
.cam__count {
  position: absolute; top: 50%; left: 50%;
  font-size: 92px; font-weight: 800; color: #fff; opacity: 0;
  pointer-events: none; text-shadow: 0 8px 34px rgba(0, 0, 0, .55);
}
.cam__count.is-on { opacity: 1; animation: cam-pop .85s ease-out; }
@keyframes cam-pop { from { transform: translate(-50%, -50%) scale(1.55); opacity: .15; } to { transform: translate(-50%, -50%) scale(1); opacity: 1; } }

.cam__top {
  position: absolute; top: 0; left: 0; right: 0;
  display: flex; align-items: center; justify-content: flex-end; gap: 10px;
  padding: calc(env(safe-area-inset-top, 0px) + 14px) 16px 12px;
}
.cam__top-mid { flex: 1; display: flex; justify-content: center; }
.cam__top-right { display: flex; gap: 10px; }
.cam__close {
  position: absolute; z-index: 3;
  top: calc(env(safe-area-inset-top, 0px) + 14px); left: 16px;
  width: 40px; height: 40px; border-radius: 50%;
  display: grid; place-items: center;
  color: #fff; border: 0; background: rgba(0, 0, 0, .32);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
}
.cam__btn {
  width: 40px; height: 40px; border-radius: 50%;
  display: grid; place-items: center; position: relative;
  color: #fff; border: 0; background: rgba(0, 0, 0, .32);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  transition: transform var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.cam__btn:hover { transform: translateY(-1px); }
.cam__btn.is-on { color: var(--neon-amber, #f0b429); }
.cam__ico { display: inline-flex; }
.cam__badge {
  position: absolute; right: -2px; bottom: -2px;
  min-width: 16px; height: 16px; padding: 0 3px; border-radius: 999px;
  font-size: 10px; font-weight: 800; line-height: 16px; text-align: center;
  color: #111; background: var(--neon-amber, #f0b429);
}

.cam__filters {
  position: absolute; left: 0; right: 0;
  bottom: calc(env(safe-area-inset-bottom, 0px) + 150px);
  display: flex; gap: 8px; padding: 0 16px;
  overflow-x: auto; scrollbar-width: none;
}
.cam__filters::-webkit-scrollbar { display: none; }
.cam__filter {
  flex: none; padding: 6px 12px; border-radius: 999px; font-size: var(--fs-xs);
  color: #fff; border: 1px solid rgba(255, 255, 255, .22); background: rgba(0, 0, 0, .3);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
}
.cam__filter.is-on { color: #111; background: #fff; border-color: #fff; font-weight: 700; }

.cam__bottom {
  position: absolute; left: 0; right: 0;
  bottom: calc(env(safe-area-inset-bottom, 0px) + 26px);
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 30px;
}
.cam__shutter-wrap { display: flex; flex-direction: column; align-items: center; gap: 10px; }
.cam__shutter {
  width: 78px; height: 78px; border-radius: 50%; position: relative;
  border: 0; background: transparent; display: grid; place-items: center;
}
.cam__shutter-ring {
  position: absolute; inset: 0; border-radius: 50%;
  border: 3px solid rgba(255, 255, 255, .92);
  transition: transform var(--dur-fast) var(--ease-out);
}
.cam__shutter-core {
  width: 58px; height: 58px; border-radius: 50%; background: #fff;
  transition: all var(--dur-fast) var(--ease-out);
}
.cam__shutter:active .cam__shutter-core { transform: scale(.9); }
.cam__shutter.is-video .cam__shutter-core { width: 30px; height: 30px; border-radius: 8px; background: #ff3b30; }
.cam__shutter.is-rec .cam__shutter-core { width: 30px; height: 30px; border-radius: 8px; background: #ff3b30; }
.cam__shutter.is-rec .cam__shutter-ring { border-color: #ff3b30; animation: cam-rec 1.1s ease-in-out infinite; }
@keyframes cam-rec { 50% { transform: scale(1.06); } }
.cam__mode { color: #fff; font-size: var(--fs-sm); font-weight: 600; background: transparent; border: 0; }

@media (prefers-reduced-motion: reduce) {
  .cam__count.is-on, .cam__shutter.is-rec .cam__shutter-ring { animation: none; }
}
.updater-bar {
  position: fixed;
  left: 50%;
  bottom: calc(var(--tabbar-h) + env(safe-area-inset-bottom, 0px) + 14px);
  transform: translateX(-50%);
  z-index: var(--z-toast);
  display: flex;
  align-items: center;
  gap: 10px;
  max-width: min(92vw, 520px);
  padding: 10px 12px 10px 14px;
  border-radius: 999px;
  border: 1px solid var(--glass-border);
  background: var(--glass-bg-strong);
  -webkit-backdrop-filter: blur(16px) saturate(140%);
  backdrop-filter: blur(16px) saturate(140%);
  box-shadow: var(--shadow-lg);
  animation: updater-in .34s cubic-bezier(.2,.7,.3,1) both;
}
@keyframes updater-in { from { opacity: 0; transform: translate(-50%, 14px); } to { opacity: 1; transform: translate(-50%, 0); } }
.updater-bar__dot {
  width: 8px; height: 8px; border-radius: 50%; flex: none;
  background: var(--neon-amber, #f0b429);
  box-shadow: 0 0 10px var(--neon-amber, #f0b429);
}
.updater-bar__text { font-size: var(--fs-sm); color: var(--text-0); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.updater-bar__btn {
  flex: none; border: 0; cursor: pointer; padding: 7px 14px; border-radius: 999px;
  font-size: var(--fs-sm); font-weight: 700; color: #fff; background: var(--grad-cta);
}
.updater-bar__close { flex: none; border: 0; background: transparent; color: var(--text-2); font-size: var(--fs-xs); cursor: pointer; padding: 6px 4px; }
@media (prefers-reduced-motion: reduce) { .updater-bar { animation: none; } }

/* ---------------------------------------------------------------- 流畅度：离屏内容跳过渲染 */
/* 长信息流里，屏幕外的卡片不做布局/绘制 —— 滚动更顺，且给一个预估高度避免滚动条跳动。
   ⚠️ 只加在"没有下拉浮层"的卡片上：content-visibility 会带来 containment，
      加在带下拉/浮层的卡片上会把浮层裁掉（地点选择器的坑）。 */
.post-card,
.item-card,
.product-card {
  content-visibility: auto;
  contain-intrinsic-size: auto 420px;
}

/* 图片占位底色：加载完成前不是白块，减少视觉跳动 */
.post-card img,
.item-card img,
.product-card img,
.scatter .shot img {
  background: var(--bg-2);
}

/* 动画元素提示浏览器提前合成（只在真正动的元素上，别滥用） */
.page-enter,
.skin-card:hover,
.tier-card { will-change: transform; }

/* 卡片小标题：左侧一道品牌渐变短杠（纯 CSS 加法，不动结构，一眼"有设计感"） */
.card > h3 {
  display: flex;
  align-items: center;
  gap: 9px;
}
.card > h3::before {
  content: '';
  width: 4px;
  height: 1.05em;
  border-radius: 999px;
  flex: none;
  background: var(--grad-primary);
  box-shadow: var(--glow-violet);
}

/* ---------------------------------------------------------------- 排版细节（不动结构，只提升观感） */
h1, h2 { text-wrap: balance; }
h1 + p, h2 + p { text-wrap: pretty; }
/* 章节标题：更利落的字距 + 柔和高光（静态不发光，符合"辉光只在交互时"的纪律） */
h2 { letter-spacing: -.024em; }

/* ---------------------------------------------------------------- 视频 */
/* 帖子里的视频：静音循环播放，配乐单独播放（点视频一起播/停） */
.post-video {
  width: 100%;
  display: block;
  border-radius: var(--r-lg);
  background: #000;
  box-shadow: var(--shadow-lg);
}
/* 发布页的视频预览 */
.video-preview { position: relative; margin-top: var(--s-2); }
.video-preview__media {
  width: 100%;
  max-height: 320px;
  display: block;
  border-radius: var(--r-md);
  background: #000;
}
.video-preview .preview__remove { position: absolute; top: 8px; right: 8px; }

/* ---------------------------------------------------------------- 拍照美颜/特效 */
.photoedit {
  position: fixed;
  inset: 0;
  z-index: 1200;
  display: grid;
  place-items: center;
  padding: var(--s-3);
  background: rgba(0, 0, 0, .72);
}
.photoedit__panel {
  width: min(94vw, 560px);
  max-height: 92dvh;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
  padding: var(--s-4);
  border-radius: var(--r-lg);
  background: var(--bg-1);
  border: 1px solid var(--glass-border);
  box-shadow: var(--shadow-lg);
}
.photoedit__head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s-2); }
.photoedit__canvas {
  width: 100%;
  height: auto;
  max-height: 52dvh;
  object-fit: contain;
  border-radius: var(--r-md);
  background: #000;
}
.photoedit__chips { display: flex; gap: 6px; overflow-x: auto; padding-bottom: 2px; }
.photoedit__chips .chip { flex: none; }
.photoedit__range { flex: 1; min-width: 120px; accent-color: var(--neon-violet); }

/* 视频裁剪：预览 + 两条范围滑杆 */
.trim__video {
  width: 100%;
  max-height: 46dvh;
  border-radius: var(--r-md);
  background: #000;
}
.product-card__media { aspect-ratio: 4 / 5; background: var(--bg-2); overflow: hidden; }
.product-card__media img { width: 100%; height: 100%; object-fit: cover; }
.product-card__body { padding: var(--s-3); display: flex; flex-direction: column; gap: var(--s-1); }
.product-card__title {
  font-size: var(--fs-sm);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.price { font-size: var(--fs-lg); font-weight: var(--fw-bold); color: var(--style-accent, var(--neon-pink)); }
.price__symbol { font-size: var(--fs-sm); margin-right: 1px; }

/* ---------------------------------------------------------------- 留言 */
.guestbook-item {
  display: flex;
  gap: var(--s-3);
  padding: var(--s-4);
  border-radius: var(--r-lg);
  background: var(--bg-1);
  border: 1px solid var(--glass-border);
}
.guestbook-item__body { flex: 1; min-width: 0; }

/* 留言板一级回复 */
.guestbook-thread { display: flex; flex-direction: column; }
.guestbook-replies {
  display: flex;
  flex-direction: column;
  margin-left: var(--s-6);
  padding-left: var(--s-4);
  border-left: 2px solid var(--glass-border);
}
.guestbook-item--reply { padding: var(--s-2) 0; }

/* ---------------------------------------------------------------- 达人徽章 */
.creator-badge {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 1px var(--s-2);
  border-radius: var(--r-pill);
  font-size: 10px;
  font-weight: var(--fw-bold);
  color: #fff;
  background: var(--grad-warm);
  vertical-align: middle;
}

/* ---------------------------------------------------------------- 认证页 */
.auth-shell {
  max-width: 420px;
  margin: var(--s-7) auto;
}
.auth-shell__head { text-align: center; margin-bottom: var(--s-5); }

/* ---------------------------------------------------------------- iOS「添加到主屏幕」引导 */
/* iPhone 用户装 App 走的就是这条路，所以给足分量：底部面板 + 图示分步。 */
.ioshelp {
  position: fixed; inset: 0; z-index: var(--z-modal);
  display: flex; flex-direction: column; justify-content: flex-end;
  opacity: 0; transition: opacity var(--dur-slow) var(--ease-out);
}
.ioshelp.is-on { opacity: 1; }
.ioshelp.is-out { opacity: 0; }
.ioshelp__mask { position: absolute; inset: 0; background: rgba(0, 0, 0, .55); backdrop-filter: blur(3px); }
.ioshelp__sheet {
  position: relative;
  padding: var(--s-3) var(--s-5) calc(var(--s-5) + env(safe-area-inset-bottom, 0px));
  border-radius: var(--r-xl) var(--r-xl) 0 0;
  background: var(--glass-bg-strong);
  border-top: 1px solid var(--glass-border);
  box-shadow: var(--shadow-lg);
  transform: translateY(16px);
  transition: transform var(--dur-slow) var(--ease-out);
}
.ioshelp.is-on .ioshelp__sheet { transform: none; }
.ioshelp__grab { width: 40px; height: 4px; border-radius: 999px; background: var(--glass-border); margin: 0 auto var(--s-3); }
.ioshelp__title { margin: 0 0 var(--s-1); font-size: var(--fs-lg); }
.ioshelp__lead { margin: 0 0 var(--s-4); color: var(--text-2); font-size: var(--fs-sm); line-height: 1.6; }
.ioshelp__steps { list-style: none; margin: 0 0 var(--s-4); padding: 0; display: flex; flex-direction: column; gap: var(--s-3); }
.ioshelp__step { display: flex; gap: var(--s-3); align-items: flex-start; }
.ioshelp__ico {
  flex: none; width: 42px; height: 42px; border-radius: 12px;
  display: grid; place-items: center;
  background: var(--glass-bg); border: 1px solid var(--glass-border);
  color: var(--text-0, #fff);
}
.ioshelp__ico.sm { width: auto; height: auto; border: 0; background: none; }
.ioshelp__txt { display: flex; flex-direction: column; gap: 1px; font-size: var(--fs-sm); line-height: 1.4; }
.ioshelp__desc { color: var(--text-3, var(--text-2)); font-size: var(--fs-xs); }
.ioshelp__actions { display: flex; gap: var(--s-2); justify-content: flex-end; flex-wrap: wrap; }
.ioshelp__actions .btn { display: inline-flex; align-items: center; gap: 6px; }

/* iOS 一次性提示条（只在 Safari、非全屏时出现一次） */
.ios-bar {
  position: fixed; left: 50%; bottom: calc(12px + env(safe-area-inset-bottom, 0px));
  z-index: var(--z-toast);
  display: flex; align-items: center; gap: var(--s-2);
  width: min(94vw, 460px);
  padding: 10px 12px; border-radius: var(--r-lg);
  background: var(--glass-bg-strong); border: 1px solid var(--glass-border);
  box-shadow: var(--shadow-lg);
  opacity: 0; transform: translate(-50%, 16px);
  transition: opacity var(--dur-slow) var(--ease-out), transform var(--dur-slow) var(--ease-out);
}
.ios-bar.is-on { opacity: 1; transform: translate(-50%, 0); }
.ios-bar__ico { flex: none; display: grid; place-items: center; color: var(--neon-cyan, #22e4ff); }
.ios-bar__txt { flex: 1; min-width: 0; display: flex; flex-direction: column; font-size: var(--fs-sm); line-height: 1.3; }
.ios-bar__sub { color: var(--text-3, var(--text-2)); font-size: var(--fs-xs); }
.ios-bar__go {
  flex: none; border: 0; cursor: pointer; color: #fff; font-weight: var(--fw-bold);
  font-size: var(--fs-xs); padding: 7px 13px; border-radius: 999px; background: var(--grad-primary);
}
.ios-bar__x {
  flex: none; border: 0; background: none; cursor: pointer;
  color: var(--text-3, var(--text-2)); font-size: 18px; line-height: 1; padding: 2px 4px;
}

/* ===== effects.css ===== */
/* ==========================================================================
   氛围层与动效
   ==========================================================================
   性能纪律（「霓虹拉满」最大的坑就在这）：
   - 光斑用 radial-gradient，不用 filter: blur()。
     大面积 blur 在滚动时每帧重算，是这类页面卡顿的头号原因；
     radial-gradient 是静态绘制，动起来只走 transform，GPU 直接搞定。
   - 只动 transform / opacity，绝不动 box-shadow / filter / background-position。
   - 光斑只做位移，不做 scale。位移是「把已经光栅化好的图层搬个位置」，
     几乎不要钱；scale 要让合成器对满屏图层重新采样，面积还是往大里长，
     三团光叠加就是三块满屏的采样 —— 在核显上这条就是掉帧的来源。
   - 颗粒是静态的，不参与动画，否则整屏每帧重绘。
     另外它**不能挂 mix-blend-mode**：带混合模式的全屏固定层会强迫浏览器
     每一帧都把它和底下的内容重新混一遍，滚动时底下的内容一直在变，
     这个混合组就永远缓存不住。改成直接烘进噪声自身的 alpha，效果接近，代价归零。
   - 全部尊重 prefers-reduced-motion。
   ========================================================================== */

/* ---------------------------------------------------------------- 极光背景 */
.atmosphere {
  position: fixed;
  inset: 0;
  z-index: -1;              /* 沉到内容之下，不干扰交互 */
  overflow: hidden;
  pointer-events: none;
  contain: strict;          /* 隔离布局与绘制，避免影响主文档 */

  /* 切换风格配色时的交叉淡入。
     background 本身不可动画，直接换 data-style 会硬切闪一下；
     所以先让整个氛围层用 opacity 淡出（纯 GPU，不触发渐变重绘），
     在淡出期间换属性，再淡入 —— 颜色变化发生在看不见的时候。 */
  transition: opacity 260ms var(--ease-out);
}
.atmosphere.is-switching { opacity: 0.12; }

.aurora {
  position: absolute;
  border-radius: 50%;
  /* 用渐变本身做柔化，省掉 blur 滤镜 */
  will-change: transform;
  /* 整体压下去。
     极光是页面上最强的霓虹来源，而「温馨」要的恰恰不是霓虹。
     压到 0.5 之后它退成一层若有若无的光，冷暖由调色板和暖色斑块主导。 */
  opacity: 0.5;
}

/* 颜色来自 palettes.css 的 --aurora-* 变量（RGB 三元组），
   所以换 data-style 就等于换掉这三团光的颜色。 */
.aurora--1 {
  width: 62vw;
  height: 62vw;
  top: -22vw;
  left: -14vw;
  background: radial-gradient(circle,
    rgb(var(--aurora-1) / 0.34) 0%,
    rgb(var(--aurora-1) / 0.16) 38%,
    transparent 68%);
  animation: drift-1 34s ease-in-out infinite alternate;
}

.aurora--2 {
  width: 54vw;
  height: 54vw;
  top: -8vw;
  right: -16vw;
  background: radial-gradient(circle,
    rgb(var(--aurora-2) / 0.26) 0%,
    rgb(var(--aurora-2) / 0.12) 40%,
    transparent 70%);
  animation: drift-2 42s ease-in-out infinite alternate;
}

.aurora--3 {
  width: 70vw;
  height: 58vw;
  bottom: -30vw;
  left: 18vw;
  background: radial-gradient(circle,
    rgb(var(--aurora-3) / 0.24) 0%,
    rgb(var(--aurora-3) / 0.10) 42%,
    transparent 72%);
  animation: drift-3 50s ease-in-out infinite alternate;
}

/* 只走位移，不带 scale（原因见文件头的性能纪律） */
@keyframes drift-1 {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(6vw, 4vw, 0); }
}
@keyframes drift-2 {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(-5vw, 6vw, 0); }
}
@keyframes drift-3 {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(-7vw, -4vw, 0); }
}

/* 亮色主题下光斑要淡很多，否则整页发灰 */
html[data-theme="light"] .aurora--1 { opacity: 0.55; }
html[data-theme="light"] .aurora--2 { opacity: 0.5; }
html[data-theme="light"] .aurora--3 { opacity: 0.45; }

/* 窄屏上三团光几乎铺满整屏，持续位移＝每帧都在合成长满屏的三层半透明，
   而这类设备的 GPU 预算恰恰最少。保留配色、停掉位移：观感几乎不变，帧率稳了。 */
@media (max-width: 700px) {
  .aurora { animation: none; }
}

/* ---------------------------------------------------------------- 颗粒 */
/* 噪点让纯色背景有「材质」，是氛围感的关键一层。
   用 SVG feTurbulence 生成，零额外请求。

   关键：不用 mix-blend-mode，而是把噪声直接做成「白色/黑色 + 噪声 alpha」。
   混合模式的全屏固定层会强迫浏览器每帧把它和底下的内容重混一遍，
   滚动时底下一直在变，混合组就永远缓存不住 —— 这正是滚动发涩的常见来源。
   直接把 alpha 烘进噪声图，视觉效果几乎一样，但这一层退化成普通静态贴图。
   亮色主题换一张「黑噪点」，不用混合模式也能两种主题都成立。 */
.grain {
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  contain: strict;
  opacity: 0.16;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0.6 0.6 0.6 0 -0.72'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)'/%3E%3C/svg%3E");
  background-repeat: repeat;
  background-size: 200px 200px;
}
html[data-theme="light"] .grain {
  opacity: 0.1;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.6 0.6 0.6 0 -0.72'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---------------------------------------------------------------- 照片底 */
/* 铺满整页的时装摄影底图。素材来自参考海报，文字已由 scripts/make-backdrop.js 抹掉。
   两张不同排布的图缓慢交叉淡入 —— 这是「鲜活」的来源，而且只动 opacity：
   不重绘、不重采样，比动 transform 的缩放还便宜。
   沉在 z-index:-2（编辑排版层之下），卡片不透明，所以它主要在留白和页脚一带露出来。 */
.backdrop {
  position: fixed;
  inset: 0;
  z-index: -2;
  overflow: hidden;
  pointer-events: none;
  contain: strict;
  background: var(--bg-0);
}

.backdrop__layer {
  position: absolute;
  inset: 0;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  will-change: opacity;
}

.backdrop__layer--a {
  background-image: url("/img/editorial/backdrop-a.webp");
  /* 这是背景「存在感」的总开关 —— 只有一个数字，想调就改这里。
     注意这调的是**不透明度**，不是模糊。 */
  opacity: 0.42;
  /* 极慢的位移 —— 只走 transform，和极光那层同样的纪律 */
  animation: backdrop-drift 96s ease-in-out infinite alternate;
}
.backdrop__layer--b {
  background-image: url("/img/editorial/backdrop-b.webp");
  opacity: 0;
  animation: backdrop-swap 76s ease-in-out infinite;
}
/* 第三张与 b 反相：b 涨到顶时 c 在谷底，于是整页始终有一张在淡入、
   一张在淡出，两两交叠 —— 背景在缓慢「换气」，而没有任何一帧是全暗的。
   代价仍然只有 opacity。 */
.backdrop__layer--c {
  background-image: url("/img/editorial/backdrop-c.webp");
  opacity: 0;
  animation: backdrop-swap 76s ease-in-out infinite;
  animation-delay: -38s;
}

/* 内容可读性蒙版。照片再柔，正文直接压上去也会糊；这一层把背景往**页面色**
   拉回来，所以主题一变它跟着变（--bg-0 是当前主题的底色，亮色主题下自动变成
   「提亮」而不是「压暗」—— 这里不需要写两套）。
   上厚下薄：顶部是导航和首屏标题所在，需要最实的底。 */
.backdrop__scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
    color-mix(in srgb, var(--bg-0) 72%, transparent) 0%,
    color-mix(in srgb, var(--bg-0) 50%, transparent) 26%,
    color-mix(in srgb, var(--bg-0) 38%, transparent) 62%,
    color-mix(in srgb, var(--bg-0) 56%, transparent) 100%
  );
}

/* 色斑 —— 整页色调的来源。
   照片素材本身低饱和，单靠照片画面会寡淡；加几团大而柔的色，整页才有底色。

   **颜色取自 --aurora-\*，也就是当前风格配色。** 这一层原来写死了六团暖色，
   结果是「选风格换配色」只生效了一半：极光和 chip 变了色，占画面最大面积的
   这一层纹丝不动 —— 切到「通勤（蓝）」整页还是琥珀色。改成跟着风格走之后，
   换风格**整页**才会真的换色。

   为什么放在 CSS 而不是烤进图片：照片层的不透明度只有 0.4 上下，
   烤进去的颜色会跟着一起被压掉（试过，页面上完全看不见）。
   这一层不透明度是 1，颜色才是实打实的。 */
.backdrop__tint {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(48% 48% at 12% 18%, rgb(var(--aurora-1) / 0.34), transparent 72%),
    radial-gradient(44% 44% at 80% 12%, rgb(var(--aurora-2) / 0.32), transparent 72%),
    radial-gradient(50% 50% at 26% 82%, rgb(var(--aurora-3) / 0.30), transparent 72%),
    radial-gradient(46% 46% at 88% 72%, rgb(var(--aurora-1) / 0.26), transparent 72%),
    radial-gradient(40% 40% at 52% 46%, rgb(var(--aurora-2) / 0.24), transparent 72%),
    radial-gradient(38% 38% at 40% 6%,  rgb(var(--aurora-3) / 0.26), transparent 72%);
}

/* b 在 a 之上淡入淡出，两者交替，背景就一直在缓慢变化 */
@keyframes backdrop-swap {
  0%   { opacity: 0; }
  50%  { opacity: 0.50; }
  100% { opacity: 0; }
}
@keyframes backdrop-drift {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(-1.6%, -1.1%, 0); }
}

/* 亮色主题：照片要更淡，否则整页发花、文字读不清 */
html[data-theme="light"] .backdrop__layer--a { opacity: 0.40; }
html[data-theme="light"] .backdrop__layer--b,
html[data-theme="light"] .backdrop__layer--c { animation-name: backdrop-swap-light; }
@keyframes backdrop-swap-light {
  0%   { opacity: 0; }
  50%  { opacity: 0.40; }
  100% { opacity: 0; }
}

/* ---------------------------------------------------------------- 飘落的花瓣 */
/* 「鲜活」的来源之一：几片慢慢飘下来的花瓣。
   三条纪律：
   1. **只动 transform / opacity** —— 和极光、照片底同一套，合成器就能搞定。
   2. **沉在内容之下**（z-index:-1）。卡片不透明，所以它们主要在页边留白和
      卡片缝隙里飘过，不会跑到文字上面去。
   3. 数量少（8 片）、尺寸小（10–20px），代价可以忽略。
   颜色取自 --aurora-3，跟着风格配色走。 */
.petals {
  position: fixed;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
  contain: strict;
}

.petal {
  position: absolute;
  top: 0;
  width: 14px;
  height: 14px;
  /* 花瓣形：对角圆角 */
  border-radius: 100% 0 100% 0;
  background: rgb(var(--aurora-3) / 0.40);
  opacity: 0;
  will-change: transform, opacity;
  animation: petal-fall linear infinite;
}

/* 每片的位置、大小、节奏各不相同 —— 全都一样的话会像雨刷，不像花瓣。
   12 片减到 6 片：花瓣只是给留白加一点偶然性，铺满一屏反而把背景的层次搅碎，
   和照片底抢戏。少而稀才有「偶尔飘过一片」的意思。 */
.petal:nth-child(1) { left: 8%;  width: 16px; height: 16px; animation-duration: 38s; animation-delay: -3s;  --drift: 7vw;  }
.petal:nth-child(2) { left: 26%; width: 11px; height: 11px; animation-duration: 50s; animation-delay: -18s; --drift: -5vw; }
.petal:nth-child(3) { left: 44%; width: 18px; height: 18px; animation-duration: 43s; animation-delay: -27s; --drift: 9vw;  }
.petal:nth-child(4) { left: 62%; width: 12px; height: 12px; animation-duration: 56s; animation-delay: -9s;  --drift: -7vw; }
.petal:nth-child(5) { left: 79%; width: 15px; height: 15px; animation-duration: 45s; animation-delay: -33s; --drift: 6vw;  }
.petal:nth-child(6) { left: 93%; width: 10px; height: 10px; animation-duration: 52s; animation-delay: -12s; --drift: -8vw; }

@keyframes petal-fall {
  0%   { transform: translate3d(0, -14vh, 0) rotate(0deg); opacity: 0; }
  8%   { opacity: 0.55; }
  88%  { opacity: 0.55; }
  100% { transform: translate3d(var(--drift, 6vw), 114vh, 0) rotate(560deg); opacity: 0; }
}

/* 亮色主题下花瓣要更实一点，否则白底上看不见 */
html[data-theme="light"] .petal { background: rgb(var(--aurora-3) / 0.34); }

@media (prefers-reduced-motion: reduce) {
  .petal { animation: none; opacity: 0; }
}

/* ---------------------------------------------------------------- 编辑排版层 */
/* 时装杂志的版面语言：发丝分隔线 + 大字号衬线标题（词刻意断行）+ 页边拉宽字距的拉丁小标签。
   三条纪律：
   1. **全静态**。背景已经有极光在动，再塞会动的东西，合成代价成倍上去。
   2. **只用系统字体**（Georgia / 宋体）。引外链字体等于给首屏加一次网络往返，
      和这个项目「零额外请求」的取向相反。
   3. 沉在 z-index:-1，而卡片不透明 —— 所以它只在页边留白和卡片缝隙里露出来。
      换句话说：它是给「留白」做设计的，不是给内容做背景的。 */
.editorial {
  position: fixed;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
  contain: strict;

  /* 用 --text-0 而不是某个固定色：暗色主题下是浅墨、亮色下是深墨，
     两边都成立，不用为每个主题各写一套。 */
  color: var(--text-0);
  opacity: 0.13;
  font-family: var(--font-editorial);
}
html[data-theme="light"] .editorial { opacity: 0.16; }

/* 发丝分隔线。
   **只画页边那一段**，不做通栏：通栏会被卡片盖住，只在卡片缝隙里露出来，
   看起来像渲染错误而不是版面设计。参考图里这些线的作用是「切开版面」，
   放在页边当刻度用更贴切。 */
.editorial__rule {
  position: absolute;
  background: currentColor;
}
.editorial__rule--v  { left: 6%; top: 0; bottom: 0; width: 1px; opacity: 0.5; }
.editorial__rule--h1 { left: 0; width: 3.6%; top: 17%; height: 1px; opacity: 0.45; }
.editorial__rule--h2 { right: 0; width: 3.6%; bottom: 12%; height: 1px; opacity: 0.45; }

/* 大字号衬线标题 —— **竖排**。
   一开始是照参考图横排的，实测放不下：1440 视口下内容列两侧各只剩 120px 留白，
   而横排的标题动辄三四百像素宽，会被卡片压掉大半，只剩几个残字，像事故。
   竖排只占一条窄带，页边留白一定塞得下，而且杂志书脊本来就是这么排的。
   词仍按参考图的做法拆行（SILHOU / ETTE）。 */
.editorial__display {
  position: absolute;
  /* 贴着右边，留出「两列竖排字」的宽度。算过：1440 视口下两列约 84px，
     而内容列右侧留白是 120px，1.8% 刚好放得下。 */
  right: 1.8%;
  top: 12%;
  writing-mode: vertical-rl;
  font-size: clamp(26px, 2.9vw, 48px);
  line-height: 0.95;
  letter-spacing: 0.01em;
  text-transform: uppercase;
}

/* 页边小标签：小号、字距拉开，是这类版面里最出效果的一笔。
   只有竖排的能常驻 —— 横排的在小视口下必然超宽（见上面 display 的说明），
   所以横排的两条交给 ≥1520px 的媒体查询，那时两侧留白才够。 */
.editorial__label {
  position: absolute;
  font-family: var(--font-sans);
  font-size: 10px;
  font-weight: var(--fw-medium);
  letter-spacing: 0.34em;
  text-transform: uppercase;
  white-space: nowrap;
}

/* 竖排：writing-mode 比 rotate 干净 —— 行内方向、断行、标点都交给浏览器 */
.editorial__label--c {
  top: 30%;
  left: 4.4%;
  writing-mode: vertical-rl;
  letter-spacing: 0.4em;
}
.editorial__label--d {
  bottom: 16%;
  right: 4.4%;
  writing-mode: vertical-rl;
  letter-spacing: 0.4em;
}

/* 横排标签：留白够宽才出场 */
.editorial__label--a,
.editorial__label--b { display: none; }

@media (min-width: 1520px) {
  .editorial__label--a { display: block; top: 9%;  right: 4.4%; }
  .editorial__label--b { display: block; top: 21%; right: 4.4%; }
}

/* 这套东西全部住在「页边留白」里，所以留白不够就整个收掉。
   容器是 1200px，视口低于 1400px 时两侧各不到 100px —— 放不下竖排标题，
   硬放只会被卡片切成一堆残字。
   换句话说：这个效果本来就是给宽屏看的，窄屏上让它消失比让它残缺好。 */
@media (max-width: 1400px) {
  .editorial { display: none; }
}

/* ---------------------------------------------------------------- 滚动入场 */
/* 只做位移、**不做透明度** —— 从 opacity:0 淡入会在每次进页面时"闪一下"
   （尤其低端机/WebView）。改成纯位移：内容始终可见，只有轻微的落位感。 */
.reveal {
  transform: translate3d(0, 14px, 0);
  transition: transform var(--dur) var(--ease-out);
}
.reveal.is-in {
  transform: none;
}
@media (prefers-reduced-motion: reduce) {
  .reveal { transform: none; transition: none; }
}

/* ---------------------------------------------------------------- 卡片高光扫过 */
/* 卡片的「元素感」补充：hover 时一道斜向高光扫过封面。
   只动 transform，且用伪元素，不影响布局。 */
.post-card__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    105deg,
    transparent 38%,
    rgba(255, 255, 255, 0.16) 48%,
    rgba(255, 255, 255, 0.05) 54%,
    transparent 64%
  );
  transform: translate3d(-120%, 0, 0);
  opacity: 0;
  pointer-events: none;
}
.post-card:hover .post-card__media::after {
  opacity: 1;
  animation: shine-sweep 900ms var(--ease-out);
}
@keyframes shine-sweep {
  from { transform: translate3d(-120%, 0, 0); }
  to   { transform: translate3d(120%, 0, 0); }
}

/* ---------------------------------------------------------------- 霓虹描边 */
/* hover 时沿卡片外沿浮现一圈渐变光。用 mask 做出「只有边框」的效果，
   比大半径 box-shadow 便宜得多。 */
.glow-ring {
  position: relative;
}
.glow-ring::before {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  padding: 1px;
  background: var(--grad-border);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite: exclude;
  opacity: 0;
  transition: opacity var(--dur) var(--ease-out);
  pointer-events: none;
}
.glow-ring:hover::before { opacity: 1; }

/* ---------------------------------------------------------------- 顶部霓虹线 */
/* 导航底部一道渐变细线，暗示品牌的霓虹身份，且是静态的，不花性能 */
.nav::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(232, 150, 60, 0.55) 22%,
    rgba(207, 106, 62, 0.65) 50%,
    rgba(226, 88, 107, 0.55) 78%,
    transparent 100%
  );
  pointer-events: none;
}

/* ---------------------------------------------------------------- 点赞粒子 */
/* 点赞时中心扩散一圈光环。只动 transform + opacity。
   用独立元素而不是伪元素，方便按需创建销毁。 */
.like-burst {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 26px;
  height: 26px;
  margin: -13px 0 0 -13px;
  border-radius: 50%;
  border: 2px solid var(--neon-pink, #e2586b);
  pointer-events: none;
  animation: burst 520ms var(--ease-out) forwards;
}
@keyframes burst {
  from { transform: scale(0.3); opacity: 0.9; }
  to   { transform: scale(2.1); opacity: 0; }
}

/* 让点赞按钮能承载绝对定位的粒子 */
.metric { position: relative; }

/* ---------------------------------------------------------------- 品牌字 */
.nav__wordmark {
  display: flex;
  flex-direction: column;
  line-height: 1;
  gap: 2px;
}
.nav__name { font-size: var(--fs-lg); letter-spacing: -0.03em; }
.nav__latin {
  font-size: 8px;
  letter-spacing: 0.22em;
  color: var(--text-2);
  font-weight: var(--fw-medium);
}

/* ---------------------------------------------------------------- 数字滚动感 */
/* 统计数字用等宽字形，数值变化时不会左右跳动 */
.tabular { font-variant-numeric: tabular-nums; }

/* ---------------------------------------------------------------- 减少动效 */
@media (prefers-reduced-motion: reduce) {
  .aurora { animation: none; }
  .reveal { opacity: 1; transform: none; transition: none; }
  .post-card:hover .post-card__media::after { animation: none; opacity: 0; }
  .like-burst { display: none; }
  /* 照片底停掉交叉淡入，只留第一张的静态底 */
  .backdrop__layer--a { animation: none; }
  .backdrop__layer--b { animation: none; opacity: 0; }
  .backdrop__layer--c { animation: none; opacity: 0; }
}

/* ===== themes.css ===== */
/* ==========================================================================
   亮色主题
   同名覆盖 token，组件无需感知主题。
   强调色刻意压暗：霓虹色直接放在白底上对比度不足，读不清。
   ========================================================================== */

html[data-theme="light"] {
  /* 暖白纸感。原来是冷白（#f4f6ff 那一系），
     和暗色主题一样，冷底会把暖色压下去。 */
  --bg-0: #faf6f1;
  --bg-1: #fffdfa;
  --bg-2: #f4ebE1;
  --bg-3: #eadfd2;

  --glass-bg: rgba(255, 253, 250, 0.72);
  --glass-bg-strong: rgba(255, 253, 250, 0.92);
  --glass-border: rgba(60, 40, 25, 0.12);
  --glass-highlight: rgba(255, 255, 255, 0.75);

  --text-0: #0b1020;
  --text-1: #3a4363;
  --text-2: #6c7799;
  --text-inverse: #ffffff;

  /* 压暗后的暖色，保证在暖白底上的对比度 */
  --neon-pink: #c0475a;
  --neon-cyan: #b56a1f;
  --neon-violet: #a8552c;
  --neon-lime: #6f7030;
  --neon-amber: #a87a12;

  --ok: #4f7a3e;
  --warn: #a87a12;
  --danger: #b33934;
  --info: #a8552c;

  --grad-primary: linear-gradient(135deg, #d9971a 0%, #c9762f 48%, #c0475a 100%);
  --grad-cta: linear-gradient(135deg, #c9762f 0%, #c0475a 100%);
  --grad-warm: linear-gradient(135deg, #d9971a 0%, #c0475a 100%);
  --grad-cool: linear-gradient(135deg, #6f7030 0%, #c9762f 100%);
  --grad-border: linear-gradient(135deg,
    rgba(217, 151, 26, 0.55), rgba(168, 85, 44, 0.45), rgba(192, 71, 90, 0.55));

  /* 亮底上辉光要收着，否则显脏 */
  --glow-pink: 0 0 10px rgba(192, 71, 90, 0.28);
  --glow-cyan: 0 0 10px rgba(181, 106, 31, 0.26);
  --glow-violet: 0 0 10px rgba(168, 85, 44, 0.28);
  --glow-soft: 0 0 20px rgba(168, 85, 44, 0.18);
  --glow-lift: 0 12px 32px rgba(10, 15, 40, 0.14);

  --shadow-sm: 0 1px 2px rgba(10, 15, 40, 0.08);
  --shadow-md: 0 8px 24px rgba(10, 15, 40, 0.10);
  --shadow-lg: 0 16px 48px rgba(10, 15, 40, 0.14);
}

/* 亮色下背景光斑的强度在 effects.css 里按 .aurora 逐个调低 */

/* 主题切换时给全局一点过渡，避免闪白 */
html[data-theme] {
  transition: background-color var(--dur) var(--ease-out);
}
html[data-theme] body {
  transition: color var(--dur) var(--ease-out);
}

/* ===== mobile.css ===== */
/* ==========================================================================
   手机端优化：性能 + 排版
   这个文件在 index.html 里**最后加载**，所以能稳稳覆盖前面的组件样式。
   目标：
     1) 去掉手机上最耗 GPU 的东西（全屏装饰动画、毛玻璃、卡片阴影）；
     2) 排版别太小太挤，按钮够大、好点。
   ========================================================================== */

@media (max-width: 860px) {
  /* ---------------------------------------------------------------
     1) 纯装饰层：全屏 + 逐帧动画，手机上非常吃 GPU。它们只是"气氛"，
        去掉不影响任何功能。
     --------------------------------------------------------------- */
  .grain,
  .editorial,
  .petals { display: none !important; }

  /* 背景极光 / 底图的漂移动画改静态：保留画面，但不再每帧重绘 */
  .aurora,
  .backdrop__layer,
  .atmosphere { animation: none !important; }

  /* ---------------------------------------------------------------
     2) 毛玻璃（backdrop-filter）是手机上最贵的合成操作之一，滚动就掉帧。
        顶/底导航、浮层、表单统一关掉模糊，改成实色。
     --------------------------------------------------------------- */
  .nav,
  .tabbar,
  .notif__panel,
  .langpick__menu,
  .search-suggest,
  .cselect__menu,
  .modal,
  .modal-backdrop,
  .panel,
  .card,
  .input,
  .textarea,
  .select,
  .btn {
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
  }

  /* 顶/底导航：实色（原本是半透明 + 模糊） */
  .nav,
  .tabbar { background: var(--bg-1) !important; }

  /* 浮层：偏高不透明实色，去掉模糊后依然清晰 */
  .notif__panel,
  .langpick__menu,
  .search-suggest,
  .cselect__menu,
  .modal { background: var(--bg-2) !important; }

  /* 3) 长列表里每张卡的阴影很贵 —— 去掉，滚动更顺 */
  .post-card,
  .item-card,
  .product-card,
  .panel { box-shadow: none !important; }

  /* ---------------------------------------------------------------
     4) 排版：解决"页面太小太挤"。
        正文/小字各放大 1px；栅格间距收紧但按钮放大。
     --------------------------------------------------------------- */
  :root {
    --fs-xs: 13px;
    --fs-sm: 15px;
    --grid-gap: var(--s-4);
  }

  .app-main { padding-inline: var(--s-4); }
  .feed-grid { gap: var(--s-3); }

  /* 手指友好：非图标按钮至少 44px 高 */
  .btn:not(.btn--icon) { min-height: 44px; }
  .tab { padding-block: 10px; }
  .nav__link { font-size: 15px; }

  /* 列表行更松一点，别挤成一团 */
  .list-row { padding-block: 12px; }
}

/* 更窄的老手机：进一步降低装饰开销 */
@media (max-width: 560px) {
  .aurora,
  .backdrop__layer { opacity: .85; }
}

/* ==========================================================================
   一屏放下：不要横向拖动才能看到功能
   ========================================================================== */
@media (max-width: 860px) {
  /* tabs（我的/后台那些）横向排不下时**换行**，全部可见，不用左右拖 */
  .tabs { flex-wrap: wrap; }
  .tab { padding: 8px 12px; font-size: var(--fs-sm); }

  /* 顶部动作区：留出呼吸感，别挤成一团 */
  .nav__actions { gap: 10px; }
  .nav__actions .btn--icon { padding: 9px; }
  .nav__inner { gap: var(--s-3); }

  /* 手机端：去掉信息流顶部的搜索栏，把排序/清空等按键完整展示出来 */
  .feed-search { display: none !important; }
  /* 排序 tab 允许换行、不被压缩，全部可见 */
  .tabs { flex-wrap: wrap; }
  .tabs .tab { flex: 0 0 auto; }

  /* 页面留白收紧一点，内容多露一些 */
  .app-main { padding-inline: var(--s-3); }
  .card,
  .panel { padding: var(--s-3); }

  /* 类目栏也允许换行 */
  .catbar__chips { flex-wrap: wrap; }
}

/* App（原生外壳）里：状态栏已被隐藏，顶部不再留任何安全区 —— 内容直接顶到最上面。
   （之前给 .nav 加的 safe-area 顶部 padding 在 is-app 未生效时就是一条黑带，已移除。） */
html.is-app .nav {
  height: var(--nav-h);
  padding-top: 0;
}

/* ==========================================================================
   iPhone / iPad 适配（iOS Safari + 「添加到主屏幕」独立模式）
   ========================================================================== */

/* 动态视口：iOS 地址栏收起/展开时 100vh 会跳动，用 dvh 更稳 */
html, body { min-height: 100dvh; }

/* 独立模式：顶栏避开状态栏 / 刘海，底部避开 Home 指示条 */
@media (display-mode: standalone) {
  .nav {
    height: calc(var(--nav-h) + env(safe-area-inset-top, 0px));
    padding-top: env(safe-area-inset-top, 0px);
  }
  .tabbar { padding-bottom: env(safe-area-inset-bottom, 0px); }
}

/* iOS 惯性滚动 + 关掉橡皮筋露白 */
* { -webkit-overflow-scrolling: touch; }
html, body { overscroll-behavior-y: none; }

/* iOS 上按钮/输入的点击高亮与默认圆角统一压平（只碰外观，不动行为） */
button, input, textarea, select { -webkit-tap-highlight-color: transparent; }
input[type="text"], input[type="search"], input[type="password"], input[type="email"],
input[type="tel"], input[type="number"], input[type="date"], textarea {
  -webkit-appearance: none;
  appearance: none;
  border-radius: var(--r-md);
}

@media (max-width: 860px) {
  /* 顶栏不再横向溢出：搜索框可以缩小、动作区可以压缩 */
  html, body { overflow-x: hidden; }
  .nav__inner { min-width: 0; }
  .nav__search { min-width: 0; }
  .nav__search .input { min-width: 0; width: 100%; }
  .nav__actions { flex-shrink: 1; min-width: 0; }
  .search-suggest { min-width: 0; max-width: calc(100vw - 24px); }
  /* 图标按钮点按目标放大（原来 38px 偏小） */
  .btn--icon { width: 42px; height: 42px; }

  /* 顶部按键「完整展开」：不再隐藏主题按钮、不再横向挤压，每个键保持原尺寸 */
  .nav__theme { display: inline-flex !important; }
  .nav__actions { flex-wrap: nowrap; gap: 8px; }
  .nav__actions > * { flex: none; }
  .nav__brand { min-width: 0; }
  .nav__links { display: none; }

/* 玻璃质感 + 渐变彩色文字的按键（拍照/拍视频/下载 App 共用）
   —— 半透明玻璃底 + 模糊 + 内高光，标签用品牌渐变 */
.btn--glass {
  background: var(--glass-bg, rgba(255, 255, 255, .06));
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border-color: var(--glass-border, rgba(255, 255, 255, .14));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .10), 0 4px 14px rgba(0, 0, 0, .18);
}
.btn--glass .pi { display: inline-flex; align-items: center; }
.btn--glass .text-gradient { font-weight: 800; letter-spacing: .01em; }
.btn--glass:hover { border-color: var(--neon-violet); transform: translateY(-2px); }

/* 顶部「下载 App」：玻璃底 + 渐变彩色文字，永远在最显眼的位置。
   App 外壳里隐藏（本来就是 App，不需要再下载） */
.nav__download {
  flex: none;
  white-space: nowrap;
}
.nav__download .text-gradient { font-weight: 800; letter-spacing: .01em; }
html.is-app .nav__download { display: none !important; }
@media (max-width: 520px) {
  /* 窄屏只留图标 + 短语，别把导航挤爆 */
  .nav__download .text-gradient { font-size: var(--fs-xs); }
}

/* 全屏兜底：App 外壳里内容真正铺满整屏（含刘海/挖孔区），
   避免 WebView 因预留系统栏而在顶部/底部留黑带 */
html.is-app,
html.is-app body {
  width: 100%;
  height: 100%;
  max-width: none;
  margin: 0;
  padding-top: 0;
  overscroll-behavior: none;
}
html.is-app #app { min-height: 100dvh; }
}

/* ==========================================================================
   滚动流畅度（手机上最拖后腿的是「滚动时还在做动画」）
   ========================================================================== */
@media (max-width: 860px) {
  /* 卡片入场动画在滚动中会不断触发 —— 直接关掉，内容直接显示 */
  .reveal {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
    animation: none !important;
  }

  /* 点按不加 300ms 延迟，手感跟手 */
  .btn, .tab, .chip, .nav__link, .tabbar__item, a { touch-action: manipulation; }

  /* 图片异步解码，减少主线程阻塞 */
  img { decoding: async; }

  /* 长列表里的行：视口外的先不渲染 */
  .list-row { content-visibility: auto; contain-intrinsic-size: 72px; }

  /* 滚动容器用原生惯性滚动 */
  .chat-box, .notif__list { -webkit-overflow-scrolling: touch; }
}

/* ==========================================================================
   手机端：不许横向拖动 + 文字不出框 + 放不下就整体缩小
   ========================================================================== */
@media (max-width: 860px) {
  /* 1) 整页禁止横向滚动/拖动（含橡皮筋回弹）。
       用 clip 而不是 hidden：hidden 会把 body 变成滚动容器，
       从而把绝对定位的浮层（通知/下拉）裁成一条细缝。clip 只裁剪、不产生滚动容器。 */
  html, body {
    width: 100%;
    max-width: 100%;
    overflow-x: clip !important;
    overscroll-behavior-x: none;
    touch-action: pan-y;          /* 只允许上下滑，不许左右拖 */
  }
  /* 任何元素都不超过视口宽度 */
  * { max-width: 100%; }

  /* 2) flex 子项默认 min-width:auto 会把父级撑破 —— 统一归零 */
  .nav__inner > *,
  .cluster > *,
  .list-row > *,
  .field > *,
  .card > *,
  .panel > * { min-width: 0; }

  /* 3) 文字换行，别溢出方框（长英文/URL/昵称都能断） */
  a, p, span, b, strong, small, label, h1, h2, h3, h4, li, td, th,
  .card, .panel, .tag, .chip, .btn, .tab, .list-row, .item-card__name,
  .post-card__body, .comment__body, .comment__author {
    overflow-wrap: anywhere;
    word-break: break-word;
  }

  /* 4) 按钮/标签/页签这类"小方块"：不换行，超长就省略号，保证不出框 */
  .btn, .tab, .chip, .tag, .badge {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  /* 5) 输入框有自己的固有宽度，会顶破容器 */
  input, textarea, select, button { max-width: 100%; min-width: 0; }
}

/* 放不下就整体缩小：更窄的屏幕把字号/间距整体降一档 */
@media (max-width: 400px) {
  :root {
    --fs-xs: 12px;
    --fs-sm: 13px;
    --fs-md: 15px;
    --fs-lg: 18px;
    --fs-xl: 24px;
    --s-5: 14px;
    --s-6: 18px;
  }
}
@media (max-width: 340px) {
  :root {
    --fs-xs: 11px;
    --fs-sm: 12px;
    --fs-md: 14px;
    --fs-lg: 17px;
    --fs-xl: 22px;
  }
}

/* ==========================================================================
   点按即时反馈：去掉"点了要等一下才动"的感觉
   ========================================================================== */
@media (max-width: 860px) {
  /* 关掉系统自带的点击高亮（它有时间延迟），我们自己给即时反馈 */
  html, body { -webkit-tap-highlight-color: transparent; }

  /* 按下立刻缩一下 —— 这是最直接的"有反应了"信号 */
  .btn, .tab, .chip, .nav__link, .tabbar__item, .catbar__chip, .list-row, a {
    transition: transform .05s ease-out, background-color .05s ease-out, color .05s ease-out;
  }
  .btn:active, .tab:active, .chip:active, .catbar__chip:active, .list-row:active,
  .nav__link:active, .tabbar__item:active { transform: scale(.96); }
  .btn:active { filter: brightness(1.08); }
}

/* App（原生外壳）里：切页过渡几乎瞬时，避免"点了等一下才切过去" */
html.is-app ::view-transition-old(root),
html.is-app ::view-transition-new(root) { animation-duration: .1s; }

/* ==========================================================================
   手机端通知栏：做成全宽、够高的浮层（原来是窄窄一条，点了没法用）
   ========================================================================== */
@media (max-width: 860px) {
  .notif__panel {
    position: fixed;
    left: 8px;
    right: 8px;
    width: auto;
    max-width: none;
    top: calc(var(--nav-h) + env(safe-area-inset-top, 0px) + 6px);
    max-height: 76vh;
  }
  .notif__list { max-height: calc(76vh - 52px); }
  .notif__item { padding: 12px; }
  .notif__item .notif__text { font-size: var(--fs-sm); }
  .notif__head { padding: 12px 14px; }
  .notif__read { min-height: 32px; }
  .notif__empty { padding: 28px 16px; }
}

/* 自定义下拉：手机上把触发器与选项都做高，保证点得中 */
@media (max-width: 860px) {
  .cselect__trigger { min-height: 44px; }
  .cselect__option {
    min-height: 44px;
    display: flex;
    align-items: center;
    touch-action: manipulation;
  }
  .cselect__menu { max-height: 60vh; }
}

/* ==========================================================================
   自适应：整站尺寸跟着屏幕宽度等比缩放（小屏自动缩、大屏自动放）
   ========================================================================== */
@media (max-width: 860px) {
  :root {
    --fs-xs: clamp(11px, 2.9vw, 13px);
    --fs-sm: clamp(12px, 3.5vw, 15px);
    --fs-md: clamp(14px, 4.0vw, 16px);
    --fs-lg: clamp(17px, 5.0vw, 20px);
    --fs-xl: clamp(22px, 6.6vw, 27px);
    --fs-2xl: clamp(26px, 7.6vw, 32px);
    --s-3: clamp(8px, 2.6vw, 12px);
    --s-4: clamp(10px, 3.3vw, 16px);
    --s-5: clamp(14px, 4.4vw, 22px);
    /* 信息流最小列宽跟着屏幕走 —— 手机上也能摆下两列 */
    --feed-min-col: clamp(150px, 46vw, 240px);
  }
  .container { padding-inline: clamp(10px, 3.6vw, 16px); }
  .app-main { padding-block: clamp(12px, 4vw, 24px) clamp(20px, 6vw, 40px); }
}