@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&display=swap');

/* ==========================================================================
   DiNERBOX - Apple iOS Human Interface Guidelines (HIG) Native Design System
   iOS 风格极致轻快、纯粹移动端体验与 120Hz ProMotion 极速响应
   全部字体统一为 Inter，比例严格参考 HOME2.svg
   ========================================================================== */

:root {
  /* 浅色锁定（全站唯一与浏览器协商的声明）：本页只有浅色，禁止 Edge/Chrome 的
     「网页自动变暗」给整页反色。它不参与任何配色，页面始终按下方自写 CSS 原样呈现 */
  color-scheme: only light;

  /* ==========================================================================
     设计刻度（Design Tokens）— 全站唯一标准
     规则：页面与组件的 间距 / 圆角 / 描边 / 字号 / 按钮 一律引用下列变量，
     不在别处写字面量。要调风格只改这一块，全站自动同步。
     ========================================================================== */

  /* 间距刻度（4 的倍数） */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 20px;
  --sp-6: 24px;
  --sp-7: 32px;

  /* 版心（页面左右留白）与区块节奏 */
  --gutter: 20px;
  /* 板块之间的留白：整屏分页（一屏一板块）后不再需要额外间距 */
  --section-gap: 0px;
  /* 板块高度：每个主要板块占满整屏（移动端一屏一板块，滚动分页）。
     用 svh（小视口高度）而不是 dvh：dvh 会随移动端地址栏/工具栏收放实时变化，
     滚动时板块高度被不断重算 → 内容看起来在「变形/伸缩」；svh 恒定，滚动不再变形 */
  --section-min-h: 100vh;
  --section-min-h: 100svh;
  /* NFC 卡砖（屏 2 LATEST MOMENT）尺寸：固定像素，不随视口宽 / 高变化，
     也不随地址栏收放重算（用户要求：卡砖不要太大、不要动态缩放、再小一点）。
     宽 180px，高按原始 208:330 比例换算，尺寸恒定 */
  --nfc-card-w: 180px;
  --nfc-card-h: calc(var(--nfc-card-w) * 330 / 208);
  /* 收藏卡砖（屏 3 MY COLLECTION）尺寸：一屏横向露出约 2.5 张（用户要求），
     163px 为容器满宽 480px 时的 2.5 张宽度上限，窄屏按视口等比收敛 */
  --collection-card-w: min(163px, calc((100vw - 2 * var(--sp-5) - 2 * var(--sp-4)) / 2.5));
  --collection-card-h: calc(var(--collection-card-w) * 330 / 208);

  /* 圆角刻度 */
  --r-2xs: 4px;
  --r-xs: 6px;
  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 16px;
  --r-xl: 20px;
  --r-2xl: 24px;
  --r-pill: 999px;

  /* 描边：全站卡片/输入框共用一条线；纯分隔线用 hairline */
  --bw: 1px;
  --border-card: var(--bw) solid var(--line);
  --border-hair: 0.5px solid var(--line-tertiary);
  /* 幽灵按钮/次级控件的描边：比卡片线更重一档 */
  --border-strong: var(--bw) solid var(--line-strong);
  /* 反色（黑卡）表面的细描边：卡框 / 图标圈 / 箭头圈共用同一道线 */
  --inv-ring: rgba(255, 255, 255, 0.26);

  /* 常暗面（品牌黑卡 / LED 屏 / 媒体砖）：不随深浅模式翻转，深色模式下抬高一档避免与画布同色隐形 */
  --dark-bg: #222226;
  --dark-bg-deep: #111113;
  --dark-ink: #FFFFFF;
  --dark-ink-dim: #A1A1AA;
  --dark-ink-soft: rgba(255, 255, 255, 0.72);
  --dark-ink-mute: rgba(255, 255, 255, 0.56);
  --dark-tint: rgba(255, 255, 255, 0.16);
  --dark-line: rgba(255, 255, 255, 0.12);
  /* 常暗面内的分隔线（LED 屏行分隔 / 信息条上描边） */
  --border-dark: var(--bw) solid var(--dark-line);
  /* 白色媒体砖（商品图 / 棚拍图托底）：深浅模式均保持纯白 */
  --media-tile: #FFFFFF;

  /* ==========================================================================
     点阵面（.dbx-dot-surface）——2026-10-16 全站视觉统一
     --------------------------------------------------------------------------
     目标：所有卡片 / 弹层底色统一成「黑底 + LED 点阵」，**不再区分日间夜间**。
     参考实现是 store.html 的 .topmoments-board（见该文件内联 <style>），
     这里把它抽成全站复用的类，并顺手解决一个隐患：

     ⚠ 光把 background 钉成黑底不够 —— 日间模式下卡片内的文字走 var(--color-label)
        （浅色主题是深色 #222226），深字压黑底会看不见。所以 .dbx-dot-surface
        必须在**自身作用域内重定义整套令牌**，让所有后代自动读到一个自洽的深色上下文：
        文字浅色、嵌套卡片仍是深色、反色控件（--inv-bg）翻成白底深字以保持对比。
     --------------------------------------------------------------------------
     这套局部令牌就是深色主题那一套的值；等于把这块「抠」出主题系统之外，
     页面其余部分仍随系统日夜间变（用户确认：页底保持现状，只改卡片）。
     ========================================================================== */
  --dot-bg: #111113;                       /* 底色（比 --dark-bg-deep 再压一档，全站统一） */
  --dot-ink: #F2F2F7;                      /* 卡内主文字 */
  --dot-ink-dim: #A1A1AA;
  --dot-ink-mute: rgba(255, 255, 255, 0.56);
  --dot-cell: rgba(255, 255, 255, 0.06);   /* 灯珠点 */
  --dot-size: 4px 4px;
  --dot-line: rgba(255, 255, 255, 0.08);   /* 卡框 */
  --dot-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
  /* 票据纸：浅色模式微灰以区分画布，深色模式随主题变暗，保证纸面文字可见 */
  --paper: #F9F9FB;

  /* 卡片规格：会员卡 / 等级卡 / about 面板 / 子页卡片共用 */
  --radius-card: var(--r-lg);
  --card-pad: var(--sp-5);

  /* 字号刻度 */
  --fs-3xs: 8px;
  --fs-2xs: 9px;
  --fs-micro: 10px;
  --fs-cap: 11px;
  --fs-note: 12px;
  --fs-sub: 13px;
  --fs-sm: 14px;
  --fs-body: 15px;
  --fs-title: 17px;
  --fs-h3: 20px;
  --fs-h2: 24px;
  --fs-h1: 30px;
  --fs-display: 34px;

  /* 按钮统一规格：--btn-h 主操作，--btn-h-sm 次级，--btn-h-xs 行内紧凑 */
  --btn-h: 50px;
  --btn-h-sm: 44px;
  --btn-h-compact: 40px;
  --btn-h-xs: 32px;
  --btn-radius: var(--r-md);
  --btn-pad-x: var(--sp-5);
  --btn-fs: var(--fs-body);

  /* 调色板与画布背景 */
  --bg-canvas: #FFFFFF;
  /* 画布色的 RGB 分量：底部内容渐隐层需要按分量调 alpha，无法用 hex 变量 */
  --bg-canvas-rgb: 255, 255, 255;
  --bg-card: #FFFFFF;
  --bg-secondary: #F4F4F5;
  --bg-tertiary: #E5E5EA;
  --bg-soft: #FAFAFA;
  --bg-inset: rgba(0, 0, 0, 0.03);
  --bg-inset-strong: rgba(0, 0, 0, 0.05);
  --bg-frosted: rgba(255, 255, 255, 0.94);
  /* 底栏专用不透明实底：底栏 position:fixed 常驻在滚动内容之上，
     半透明会让下方滚动的内容逐帧透出（96% 也仍有 4% 变化），
     视觉上就是底部一条「一闪一闪」的带子，故改为完全不透明 */
  --bg-tabbar: #FFFFFF;
  --bg-frosted-soft: rgba(255, 255, 255, 0.85);

  --color-black: #222226;
  --color-white: #FFFFFF;
  --color-label: #222226;
  --color-secondary-label: #71717A;
  --color-tertiary-label: #A1A1AA;

  --ink-strong: #222226;
  --ink-deep: #52525B;
  --ink-deep-2: #3F3F46;
  --ink-dim-2: #8E8E93;
  --ink-mute-2: #6E6E73;
  --ink-alpha: rgba(0, 0, 0, 0.68);

  --ios-separator: rgba(60, 60, 67, 0.15);
  --line: #E4E4E7;
  --line-tertiary: #E5E5EA;
  --line-strong: #D4D4D8;
  --line-heavy: #C8C8C8;
  --line-soft: rgba(34, 34, 38, 0.08);
  --line-tint: rgba(60, 60, 67, 0.12);
  --line-mid: rgba(60, 60, 67, 0.22);
  --line-grabber: rgba(60, 60, 67, 0.3);
  --wave-line: rgba(13, 19, 34, 0.18);

  /* 反色控件：黑底白字（按钮 / 胶囊 / 徽章 / 选中态 / 头像） */
  --inv-bg: #222226;
  --inv-bg-pure: #222226;
  --inv-ink: #FFFFFF;
  --inv-ink-soft: rgba(255, 255, 255, 0.65);
  --inv-tint: rgba(255, 255, 255, 0.16);
  --inv-tint-weak: rgba(255, 255, 255, 0.3);
  --inv-tint-weak-2: rgba(255, 255, 255, 0.4);
  --inv-tint-500: rgba(255, 255, 255, 0.5);

  --ios-red: #C53C3C;
  --ios-blue: #007AFF;
  --ios-green: #34C759;
  /* 品牌辅色：海军蓝（archive / curator 主题）、冷银（moment 主题） */
  --brand-navy: #2C4A6F;
  --brand-silver: #7E8A96;

  /* 用户明确要求：全部字体用 Inter */
  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
  --font-mono: 'Inter', -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Segoe UI', Roboto, 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', sans-serif;
}

/* 已废弃：卡砖改为固定像素尺寸（见 :root --nfc-card-w / --collection-card-w），不再按视口高度收缩 */

/* ==========================================================================
   点阵面 .dbx-dot-surface —— 2026-10-16 全站视觉统一
   --------------------------------------------------------------------------
   所有卡片 / 弹层底色统一成「黑底 + LED 点阵」，**不再区分日间夜间**。
   纹样取自 store.html 的 .topmoments-board（1px 点 / 1.4px 收口 / 4px 间距），
   这里抽成全站复用的类。

   ⚠ 关键点：光把 background 钉成黑底是不够的。日间模式下卡内文字走
     var(--color-label)（浅色主题里是深色 #222226），深字压黑底会直接看不见。
     所以下面第一段在**元素自身作用域内重定义整套令牌**，让所有后代自动读到
     一个自洽的深色上下文：文字浅色、嵌套卡片仍是深色、反色控件（--inv-bg）
     翻成白底深字以维持对比度。

   页面主背景不受影响，仍随系统日夜间变（用户确认：页底保持现状，只改卡片）。
   例外（用户确认保留原样）：.membership-card / .tier-card 的 6 档等级配色、
   按钮与选中胶囊的高对比反色控件。
   ========================================================================== */
.dbx-dot-surface {
  /* —— 局部令牌：等同深色主题那一套，把这块抠出主题系统之外 —— */
  --color-label: var(--dot-ink);
  --color-secondary-label: var(--dot-ink-dim);
  --color-tertiary-label: rgba(255, 255, 255, 0.45);
  --bg-canvas: var(--dot-bg);
  --bg-card: #1C1C1E;
  --bg-secondary: #1C1C1E;
  --bg-tertiary: #2C2C2E;
  --bg-soft: #141416;
  --bg-inset: rgba(255, 255, 255, 0.06);
  --bg-inset-strong: rgba(255, 255, 255, 0.10);
  --bg-frosted: rgba(28, 28, 30, 0.94);
  --bg-frosted-soft: rgba(28, 28, 30, 0.85);
  --bg-tabbar: #1C1C1E;
  /* 黑底上的反色控件应是白底深字 */
  --inv-bg: #F2F2F7;
  --inv-ink: #0A0A0C;
  --inv-ring: rgba(0, 0, 0, 0.26);
  --border-card: var(--bw) solid rgba(255, 255, 255, 0.10);
  --line: #3F3F46;
  --line-mid: #52525B;
  --line-strong: #52525B;
  --line-heavy: #3F3F46;
  --media-tile: #1C1C1E;
  --paper: #1C1C1E;

  position: relative;
  /* !important 是有意为之：各页面原本用 background-color: var(--bg-card) 之类写法，
     同特异度下按书写顺序会盖掉这里的 background。这个类的职责就是「强制这块是黑底」，
     必须压得住页面自身的规则。 */
  background: var(--dot-bg) !important;
  color: var(--dot-ink);
  /* isolation 隔离层叠上下文：::before 与后代各自成层，不会互相干扰 */
  isolation: isolate;
}

/* LED 灯珠网格底纹。
   不需要额外给子元素抬 z-index —— isolation 建出的层叠上下文里，
   ::before 在 DOM 顺序上先于所有子元素，静态/相对定位的内容天然画在它上面。
   （早前一版写了 .dbx-dot-surface > * { position: relative; z-index: 1 }，
     那会把卡片里原本的 position:absolute 装饰子元素改成 relative 而错位，已移除。）
   border-radius: inherit 是必须的：inset:0 的伪元素默认是**方角**，
   而宿主卡片几乎都带圆角 —— 少了这一行，方角处的灯珠会画到圆角之外，
   看起来就是「圆点溢出容器」。（2026-10-17 用户反馈） */
.dbx-dot-surface::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background-image: radial-gradient(circle, var(--dot-cell) 1px, transparent 1.4px);
  background-size: var(--dot-size);
  pointer-events: none;
  z-index: 0;
}

/* 全局触摸与盒模型规范 + 用户要求去掉全部阴影 */
*,
*::before,
*::after {
  box-sizing: border-box;
  -webkit-tap-highlight-color: transparent;
  margin: 0;
  padding: 0;
  box-shadow: none !important;
}

html {
  font-size: 16px;
  -webkit-text-size-adjust: 100%;
  height: 100%;
  overflow-y: auto;
  background-color: var(--bg-canvas);
}

body {
  background-color: var(--bg-canvas);
  font-family: var(--font-sans);
  color: var(--color-label);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  margin: 0;
  padding: 0;
  width: 100%;
  /* 用 svh 而非 dvh：dvh 随移动端工具栏收放变化会让页面高度反复重算 → 滚动变形 */
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  align-items: center;
  user-select: none;
  -webkit-user-select: none;
  touch-action: manipulation;
  /* 用 clip 而非 hidden：hidden 会让另一轴隐式变成 auto，使 body 也成为一个
     （并不滚动的）滚动容器，移动端多持一层合成 backstore，滚动重栅格时闪烁 */
  overflow-x: clip;
}

/* 表单控件默认不继承字体（UA 会回退到 13.3333px Arial），统一强制继承全站 Inter */
button,
input,
select,
textarea {
  font-family: inherit;
  font-size: inherit;
}

/* ==========================================================================
   真实 iOS 视口容器 (无外部生硬黑边/假外壳)
   ========================================================================== */
.mobile-app-container {
  width: 100%;
  max-width: 480px;
  /* svh 恒定，避免移动端工具栏收放导致容器高度反复重算 */
  min-height: 100vh;
  min-height: 100svh;
  background-color: var(--bg-canvas);
  position: relative;
  /* clip 而非 hidden：同上，避免把容器变成多余的（空）滚动层 */
  overflow-x: clip;
  display: flex;
  flex-direction: column;
  box-shadow: none;
  border-radius: 0;
  border: none;
}

/* 页面内容区：真正的滚动者是 document（视口），本层并不滚动。
   历史上这里写了 overflow-y:auto + -webkit-overflow-scrolling:touch，
   使本层成为一层「永远不会滚动的滚动容器」，移动端每层各持独立合成 backstore，
   滚动时反复重栅格 → 「一闪一闪」。故本层不再产生滚动容器。 */
.app-screen-body {
  flex: 1;
  overflow: visible;
  padding-bottom: calc(84px + env(safe-area-inset-bottom, 0px));
}

/* scroll-snap 让一次 fling 滑动自动定位到下一屏（屏 1 / 屏 2 / 屏 3 / MY COLLECTION）
   关键：snap 必须挂在滚动容器（document = html）上才有意义；不能挂在 .app-screen-body，
   否则会重新成为滚动容器，触发任务 A 已修过的「一闪一闪」。
   - 用 proximity（就近吸附）而非 mandatory（强制吸附）：
     屏 2/屏 3 为紧凑布局（min-height: auto，见 L510/L524），其 snap 落点会被
     浏览器钳制到 maxScroll，与屏 1 落点(0) 之间形成「死区」；
     mandatory 下任意小的滑动都会被一次性弹到 maxScroll → 「延迟 + 卡顿」。
     proximity 只在滑动接近吸附点时轻轻归位，滑动量与手势成正比，消除强制跳变。
   - 不再声明 scroll-snap-stop：它只对 snap area（子元素）有效，写在滚动容器 html 上
     本就不生效；若移到子元素反而会在 proximity 下强制截停产生新的跳变。 */
html.page-home-snap {
  /* 2026-10-15 用户反馈：首页不要磁吸（上下滑动被吸附归位很难受）→ 关闭纵向 snap。
     子元素上的 scroll-snap-align 在无 snap 容器时不生效，无需一起删。 */
  scroll-snap-type: none;
}

.home-screen {
  scroll-snap-align: start;
}

/* ==========================================================================
   iOS 原生磨砂玻璃导航栏 (Navigation Bar / Header)
   ========================================================================== */
.app-top-header {
  /* 参考微信小程序导航栏布局：状态栏高度交给系统安全区（env），
     内容区独立加高到 52px，LOGO/购物袋在其内垂直居中——
     胶囊式呼吸感：20px logo 上下各留 16px，不再贴边发挤 */
  height: calc(52px + env(safe-area-inset-top, 0px));
  padding: env(safe-area-inset-top, 0px) var(--sp-4) 0 var(--sp-4);
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-shrink: 0;
  /* LOGO 始终置顶（sticky 吸附视口顶）。显示形式 2：整条实底——
     浅色页面白底黑标、深色页面黑底白标（跟随 --bg-canvas 日夜切换）。
     形式 1（复杂多色照片背景 → 无底色 + 按图深浅取黑白标）见下方 page-home 覆盖块 */
  position: sticky;
  top: 0;
  z-index: 50;
  border-bottom: none;
  background: var(--bg-canvas);
  color: var(--color-label);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  transition: background-color 0.25s ease, color 0.25s ease;
}

/* 首页屏 1：header fixed 悬浮在轮播照片上（不占文档流，照片顶到页顶），显示形式 1：
   无底色；默认照片为暗色调 → 白标白字。滚过屏 1 后加 .is-solid → 回归形式 2 实底 */
body.page-home .app-top-header {
  position: fixed;
  left: 0;
  right: 0;
  background: transparent;
  color: #FFFFFF;
  border-bottom: none;
}

/* 照片上（未实底）：白标 + 白字 */
body.page-home .app-top-header:not(.is-solid) .dinerbox-brand-logo {
  filter: brightness(0) invert(1);
}

body.page-home .app-top-header:not(.is-solid) :is(.desktop-nav-link, .desktop-nav-lang, .desktop-nav-cart) {
  color: #FFFFFF;
}

/* 后台配置当前轮播图为浅色图（.is-light-photo）→ 照片上也用黑标黑字（按背景深浅判断） */
body.page-home .app-top-header.is-light-photo {
  color: var(--color-label);
}

body.page-home .app-top-header.is-light-photo .dinerbox-brand-logo {
  filter: none;
}

body.page-home .app-top-header.is-light-photo :is(.desktop-nav-link, .desktop-nav-lang, .desktop-nav-cart) {
  color: var(--color-label);
}

/* 滚过屏 1（.is-solid）→ 实底回归默认配色；logo 不写 filter：
   日间原色黑标，夜间由深色块 .dinerbox-brand-logo 统一 invert 成白标 */
body.page-home .app-top-header.is-solid {
  background: var(--bg-canvas);
  color: var(--color-label);
}

.dinerbox-logo-link {
  display: flex;
  align-items: center;
  text-decoration: none;
}

.dinerbox-brand-logo {
  height: 20px;
  width: auto;
  display: block;
}

/* ==========================================================================
   首页 4 屏整屏分页（屏 1 轮播 / 屏 2 用户名进度 / 屏 3 NFC / 屏 4 MY COLLECTION）
   - 统一高度 100svh，间距 0；全部固定比例，不再被内容/字号/视口动态调节
   - 整页是 document 滚动（.app-screen-body 不再产生自己的滚动容器，参见 L256 注释），
     故每屏均无 swap/transform，参与 任务 A 已修过的「滚动闪烁」无关
   ========================================================================== */
.home-screen {
  position: relative;
  width: 100%;
  min-height: 100svh;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  /* 各屏内容顶部对齐：用户要求 NFC / MY COLLECTION 标题上方间距小一点，
     不能再让 flex justify-content: center 把内容垂直居中（会撑出大段空白）。
     屏 1（轮播）有专门的 .screen-hero 内部布局，不会受影响。 */
  justify-content: flex-start;
}

/* 屏 1：满屏轮播图（参考 Mandarin Oriental 首屏：图铺满 + 中下方浮层 + 底部圆点指示器）
   - 屏高 = 100svh：图直接做到屏顶，顶部不预留顶栏空间（顶栏透明叠在图上）
   - 当前用纯色占位（用户先用纯色做，未来直接换成图 URL 即可）
   - 浮层（用户名进度条 + How to Enjoy 入口）absolute 定位到屏底偏中，与参考图一致
   - 圆点指示器 absolute 定位到屏最底部
   - 固定比例：背景色与屏高是 100svh，所有 padding/margin 全部固定 px */
.screen-hero {
  position: relative;
  background: var(--bg-canvas);
  overflow: hidden;
  /* 用户 2026-10-15：第一屏＝整屏底图（全屏海报），高度锁一屏 */
  height: 100svh;
  min-height: 100svh;
}

/* 轮播背景层：5 张海报 absolute 叠放，每 4.5s fade 切换。
   fade 用 opacity 过渡（不用 transform），不重新触发任务 A 已修过的「滚动闪烁」 */
.screen-hero-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.screen-hero-bg-slide {
  position: absolute;
  inset: 0;
  /* 用户 2026-10-15：底图**全屏 9:16 铺满**。
     海报图后续会换成 9:16 版；现阶段是 3:4 旧图，cover 会左右裁一点（用户已确认可接受）。
     换图后无需再动这里。 */
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  background-color: transparent;
  opacity: 0;
  transition: opacity 0.9s ease;
  will-change: opacity;
  pointer-events: none;
}

.screen-hero-bg-slide.is-active {
  opacity: 1;
}

/* 首页屏 1 的压暗层，两段渐变叠在一起：
   ① 顶部：压一层淡暗，保证左上角 LOGO 在浅色海报上仍可读（原有，2026-10-15）
   ② 底部：**底图向下渐隐**（用户 2026-10-16 要求恢复）。
      渐隐目标取 var(--bg-canvas)，即「化进页面本身的底色」而不是写死某个颜色：
      深色模式下与底部的黑底点阵卡片无缝衔接；浅色模式下则自然过渡到白色页面底。
      当年 10-15 去掉底部渐隐是因为当时底部是泛白的版面；现在底部已是黑底点阵，
      同样的渐隐反而成了衔接手段，所以可以加回来。 */
.screen-hero-fade {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  background-image:
    linear-gradient(to bottom,
      rgba(0, 0, 0, 0.30) 0%,
      rgba(0, 0, 0, 0.12) 9%,
      rgba(0, 0, 0, 0) 22%),
    linear-gradient(to top,
      var(--bg-canvas) 0%,
      color-mix(in srgb, var(--bg-canvas) 55%, transparent) 14%,
      rgba(0, 0, 0, 0) 34%);
  pointer-events: none;
  z-index: 1;
}

/* ==========================================================================
   原「屏 1 浮动 VIEW 按钮」已于 2026-10-16 随按钮本身一起移除，
   会员卡与 HOW TO ENJOY 改为直接浮在照片底部（见下方 .screen-hero-overlay）。

   注：index.html 的 updateHomeHeader() 里仍有取 #heroViewBtn 的分支，
   元素已不存在所以走 if (vb) 为 false 的空分支，属无害残留；
   heroViewInk() / pickViewInk() 的亮度网格逻辑保留，将来加回浮动控件可直接复用。
   ========================================================================== */

/* ==========================================================================
   屏 1 底部浮层（会员卡 + HOW TO ENJOY）
   —— 用户 2026-10-16 改版：VIEW 按钮移除，这两块从第二屏搬回照片底部。
   两块都是不透明白卡片，压在任意深浅的照片上都读得清，
   所以 .screen-hero-fade 只需要在顶部压一层给 LOGO 用，不必再加底部渐变。
   ========================================================================== */
.screen-hero-overlay {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 3;
  display: flex;
  flex-direction: column;
  /* 12px → 8px（2026-10-16 用户反馈「往下挪一点点，和 how to enjoy 的间距小一点」）。
     浮层是 bottom 锚定的，缩小间距整块会自动下移，正好一箭双雕。 */
  gap: var(--sp-2);
  /* 底部 tab bar 高 52px（+ 安全区），浮层抬到它之上，否则底边会盖住卡片 */
  padding: 0 var(--gutter) calc(52px + env(safe-area-inset-bottom, 0px) + var(--sp-3)) var(--gutter);
  box-sizing: border-box;
  /* 宽屏不拉伸：与第二屏 .screen-member-inner 同上限，手机上就是满宽减两侧留白 */
  max-width: 520px;
  margin: 0 auto;
  pointer-events: none;
}

/* 浮层里两块等宽（内部元素恢复可点，避免整块被 pointer-events:none 吃掉点击） */
.screen-hero-overlay .home-profile-card,
.screen-hero-overlay .about-entry-card {
  width: 100%;
  margin-left: 0;
  margin-right: 0;
  pointer-events: auto;
}

/* 照片上的 HOW TO ENJOY：与会员卡同语言（白底卡片 + 浅灰描边） */
.screen-hero-overlay .about-entry-card {
  background: var(--bg-card);
  border: var(--border-card);
  border-radius: var(--radius-card);
  padding: 13px var(--sp-5);
  min-height: 48px;
  color: var(--color-label);
}

.screen-hero-overlay .about-entry-card .about-entry-title {
  color: var(--color-label);
}

.screen-hero-overlay .about-entry-card .about-entry-ico {
  border: var(--bw) solid var(--line-mid);
}

.screen-hero-overlay .about-entry-card .about-entry-ico svg {
  color: var(--color-label);
}

/* ==========================================================================
   屏 2：ACTIVATION 卡砖 + MY COLLECTION（正常流布局）
   ========================================================================== */
.screen-member {
  justify-content: flex-start;
  gap: 0;
  /* 顶部固定 header 高 52px（+.app-top-header 同源）且带白色底、z-index:50，
     滚到第二屏时会把第一个板块压掉一截（实测被遮 8px）。
     所以上边距直接按 header 高度 + 一点呼吸位来算，整屏内容不会再被压住。 */
  padding: calc(52px + env(safe-area-inset-top, 0px) + var(--sp-3)) var(--gutter) var(--sp-7) var(--gutter);
  background: var(--bg-canvas);
  box-sizing: border-box;
  min-height: 100svh;
}

.screen-member-inner {
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
  width: 100%;
  /* 宽屏不拉伸：上限内收窄并居中（手机上就是满宽减去 --gutter 的两侧留白） */
  max-width: 520px;
  margin: 0 auto;
}

/* 第二屏内的板块：与 .home-profile-card 用同一套左右留白，保证等宽。
   （.home-profile-card 与 .about-entry-card 已于 2026-10-16 移回第一屏浮层，
   它们的样式改由上面的 .screen-hero-overlay 规则接管，这里不再重复定义。） */
.screen-member .latest-moment-block,
.screen-member .my-collection-section {
  margin-left: 0;
  margin-right: 0;
  width: 100%;
}

/* 圆点指示器的样式。容器元素 .screen-hero-dots 目前在 index.html 里缺失，
   所以圆点实际不渲染（既有遗留问题）；将来把容器加回来即可直接生效。 */
.hero-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: rgba(128, 128, 128, 0.35);
  transition: background 0.3s ease, width 0.3s ease;
}

.hero-dot.is-active {
  background: var(--color-label, #111111);
  width: 18px;
  border-radius: 999px;
}

/* 圆点指示器在浮层内的容器：水平居中，紧跟 how-to 下方，与下方卡/输入框留 8px gap */
/* 轮播圆点指示器：用户 2026-10-15 要求移到浮层**右上角**并进一步降低透明度
   （原来是在两张卡片上方居中、灰色 0.35）。 */
.screen-hero-dots {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 8px;
  padding: 4px 0;
}

.screen-hero-dots .hero-dot {
  background: rgba(128, 128, 128, 0.2);
}

.screen-hero-dots .hero-dot.is-active {
  background: rgba(34, 34, 38, 0.42);
}

/* 浮层里的圆点（2026-10-16 补回 .screen-hero-dots 容器时一并适配配色）。
   上面的 rgba(34,34,38,.42) 是为白底浮层写的深色；现在圆点落在深色卡片上，
   几乎看不见。改用 currentColor + opacity：color 继承 var(--color-label)，
   浅色主题自动是深色点、深色主题自动是浅色点，两套主题都不用写死。
   选择器刻意多带一层类名（0,3,0 / 0,4,0）压过上面的 (0,2,0 / 0,3,0)，不依赖书写顺序。 */
.screen-hero-overlay .screen-hero-dots .hero-dot {
  background: currentColor;
  opacity: 0.30;
}

.screen-hero-overlay .screen-hero-dots .hero-dot.is-active {
  background: currentColor;
  opacity: 0.95;
  width: 18px;
  border-radius: 999px;
}

/* 圆点行：压住触控区，别让它顶到 tab bar；点它可跳转到对应那张 */
.screen-hero-overlay .screen-hero-dots {
  justify-content: center;
  padding: 2px 0 0;
  cursor: pointer;
}

/* 居中 hero logo 已移除（用户要求 LOGO 放回左上角 header，与其他页眉一致） */

/* 第二屏内的 ACTIVATION 块（原「屏 2：NFC 板块」，现并入 .screen-member）。
   - 覆盖 .latest-moment-block 的 min-height: 100svh 默认值，否则会各占一整屏
   - 与上方 How to Enjoy 卡片留出正常间距 */
.screen-member .latest-moment-block {
  margin-top: var(--sp-6);
  min-height: auto;
}

/* 第二屏内的 MY COLLECTION 块（原「屏 3」，现并入 .screen-member） */
.screen-member .my-collection-section {
  margin-top: var(--sp-6);
  min-height: auto;
  padding-bottom: 0;
}

/* ==========================================================================
   iOS Inset Grouped 卡片风格 (Profile & Challenge - Exact match to HOME2.svg: width: 350, height: 152, rx: 6)
   ========================================================================== */
.home-profile-card {
  width: auto;
  background-color: var(--bg-card);
  border: var(--border-card);
  border-radius: var(--radius-card);
  margin: var(--sp-3) var(--gutter) 0;
  padding: var(--card-pad);
  box-shadow: none;
  position: relative;
}

.profile-user-row {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
}

.profile-avatar-circle {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background-color: var(--inv-bg);
  color: var(--inv-ink);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  font-size: var(--fs-body);
  flex-shrink: 0;
  box-shadow: none;
}

.profile-user-info {
  display: flex;
  flex-direction: column;
}

.profile-user-name {
  font-family: var(--font-sans);
  font-size: var(--fs-title);
  font-weight: 700;
  color: var(--color-label);
  letter-spacing: 0px;
  line-height: 1.25;
}

.profile-status-badge.collector {
  background-color: var(--inv-bg);
}

/* 100 Moments 进度条 (Exact match to HOME2.svg: track width 330, height 7, fill 114) */
.challenge-progress-section {
  margin-top: var(--sp-4);
}

.challenge-header-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-family: var(--font-sans);
  font-size: var(--fs-micro);
  font-weight: 600;
  color: var(--color-label);
  margin-bottom: var(--sp-2);
  letter-spacing: 0px;
}

.challenge-milestone-track-wrap {
  position: relative;
  width: 100%;
  height: 16px;
  display: flex;
  align-items: center;
  margin: var(--sp-2) 0 var(--sp-2) 0;
  cursor: pointer;
}

.challenge-track {
  width: 100%;
  height: 7px;
  background-color: var(--line-heavy);
  border-radius: var(--r-pill);
  overflow: hidden;
  position: relative;
}

.challenge-fill {
  height: 100%;
  background-color: var(--inv-bg);
  border-radius: var(--r-2xs);
  transition: width 0.5s cubic-bezier(0.2, 0.8, 0.2, 1);
}

/* 桌面端专属页脚（版权 + ICP 备案占位）：手机端隐藏，仅电脑端在内容最底部显示 */
.desktop-footer {
  display: none;
}

/* 轨道上的内嵌节点：五个节点尺寸统一（用户要求大小一致）；此前 25/50/75 为大一号奖牌圆牌，
   现保留 node-medal 类名（达成态逻辑仍按里程碑区分），仅尺寸/字号全部跟随基础节点 */
.milestone-node {
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  min-width: 24px;    /* 2026-10-17：原圆点 -> 横板（盒子） */
  height: 12px;
  padding: 0 var(--sp-1);
  box-sizing: border-box;
  border-radius: 3px;
  /* 未达成节点：实色灰底深灰字（不要白底；也不能用 rgba 半透明灰，会透出下面的进度条） */
  background-color: var(--line);
  box-shadow: inset 0 0 0 1px var(--line-strong);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
}

.milestone-node.reached {
  background-color: var(--inv-bg);
  box-shadow: none;
}

.milestone-node .node-label {
  color: var(--color-secondary-label);
  font-size: var(--fs-3xs);
  font-weight: 700;
  font-family: var(--font-mono);
  line-height: 1;
  letter-spacing: 0;
}

/* 已达成节点是反色底，数字跟反色前景；未达成节点是灰底，数字用常规前景 */
.milestone-node.reached .node-label {
  color: var(--inv-ink);
}

/* 半圆里程碑仪表：仅桌面端启用（手机端沿用上面的线性轨道） */
.challenge-gauge-wrap {
  display: none;
}

/* 桌面代码墙背景画布（手机端一律隐藏，JS 内部也按断点启停） */
.hero-code-canvas {
  display: none;
}

/* ==========================================================================
   iOS 风格区块标题与 Segmented Control 药丸切换
   ========================================================================== */
/* 2026-10-16 用户反馈：ACTIVATION 等 h2 标题左右各 20px padding，
   视觉上没和 HOW TO ENJOY 这类**卡片容器**的左边缘对齐（容器在 x=20，文字被推到 x=40）。
   去掉左右 padding，让所有 h2 标题文字与卡片外框齐平。
   注意只动上下内边距，垂直节奏保持原样。 */
.section-title-wrap {
  padding: var(--sp-1) 0 var(--sp-2) 0;
}

.section-main-title {
  font-family: var(--font-sans);
  font-size: var(--fs-h2);
  font-weight: 700;
  color: var(--color-label);
  letter-spacing: 0px;
  line-height: 1.5;
}

/* 桌面首页标语（仅电脑版 hero 显示，手机端隐藏） */
.home-hero-slogan {
  display: none;
}

/* ABOUT US 入口卡（首页 My Collection 下方：全站唯一黑卡入口，NFC 雷达图标 + 文案层级 + 圆形箭头）
   手机端点击弹「玩法」底部面板；电脑版直达 about 分区 */
.about-entry-card {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  /* 两端与上方版心对齐（section-title-wrap 同为 20px 边距），不再顶满屏幕；
     上边距 8px：上方卡片区自带 16px 底部留白，叠加后总间距约 24px，与全站板块节奏一致 */
  margin: var(--sp-1) var(--gutter) 0;
  padding: var(--sp-4) var(--sp-5);
  background: var(--inv-bg);
  color: var(--inv-ink);
  border: var(--bw) solid var(--inv-ring);
  border-radius: var(--radius-card);
  text-decoration: none;
  cursor: pointer;
}

/* 左侧 NFC 雷达圆标：细线同心弧，与卡面 NFC 雷达同语言 */
.about-entry-ico {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: var(--bw) solid var(--inv-ring);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.about-entry-ico svg {
  width: 16px;
  height: 16px;
  color: var(--inv-ink);
}

.about-entry-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1;
  min-width: 0;
}

.about-entry-title {
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  font-weight: 700;
  letter-spacing: 0px;
  color: var(--inv-ink);
}

.about-entry-arrow {
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  border: var(--bw) solid var(--inv-ring);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--fs-body);
  font-weight: 500;
  color: var(--inv-ink);
  transition: transform 0.25s ease;
}

/* iOS Segmented Control 药丸胶囊 (高 23px, 紧凑精致 padding) */
.filter-pills-row {
  display: flex;
  gap: var(--sp-2);
  margin-top: var(--sp-4);
}

.pill-btn {
  height: 23px;
  padding: 0 var(--sp-3);
  border-radius: var(--r-pill);
  font-size: var(--fs-cap);
  font-weight: 500;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  text-decoration: none;
  border: 0.5px solid var(--line-mid);
  background-color: transparent;
  color: var(--color-label);
  transition: transform 0.12s cubic-bezier(0.25, 1, 0.5, 1), background-color 0.15s ease, border-color 0.15s ease;
  box-sizing: border-box;
  line-height: 1;
}

.pill-btn.active {
  background-color: var(--inv-bg);
  color: var(--inv-ink);
  border-color: var(--ink-strong);
  font-weight: 600;
  box-shadow: none;
}

.pill-btn.outline {
  background-color: transparent;
  border: 0.5px solid var(--line-mid);
  color: var(--color-label);
  gap: var(--sp-1);
}

/* ==========================================================================
   Apple App Store / Music 风格卡片横向轮播 (Zero Jank, 120Hz ProMotion)
   ========================================================================== */
.carousel-scroll-area {
  display: flex;
  gap: var(--sp-4);
  overflow-x: auto;
  overflow-y: hidden;
  padding: var(--sp-3) var(--sp-5) var(--sp-5) var(--sp-5);
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
  -ms-overflow-style: none;
  scrollbar-width: none;
  touch-action: pan-x;
}

/* LATEST MOMENT 板块：与 MY COLLECTION 统一节奏
   占满整屏（移动端一屏一板块），内容纵向居中；板块间距由 --section-gap 控制 */
.latest-moment-block {
  margin-top: var(--section-gap);
  min-height: var(--section-min-h);
  display: flex;
  flex-direction: column;
  justify-content: center;
}

/* Featured Card & Collection Cards (Exact 1:1 match to HOME2.svg: 208px x 330px, rx=5px) */
.featured-card-wrapper {
  padding: var(--sp-3) var(--sp-5) var(--sp-3) var(--sp-5);
  display: flex;
  justify-content: center;
}

.featured-card-brick {
  width: var(--nfc-card-w);
  height: var(--nfc-card-h);
  /* 固定尺寸，不被 flex 容器压缩（用户要求：尺寸恒定、不动态缩放） */
  flex-shrink: 0;
  position: relative;
  /* 与 SVG 外框半径（viewBox 16 / 宽 208.156 单位）精确对齐，避免裁切出锯齿 */
  border-radius: calc(var(--nfc-card-w) * 16 / 208.156);
  box-shadow: none;
  display: block;
  text-decoration: none;
  color: inherit;
  cursor: pointer;
  transition: transform 0.2s cubic-bezier(0.25, 1, 0.5, 1);
  user-select: none;
  -webkit-user-drag: none;
  box-sizing: border-box;
}

.featured-card-brick img {
  width: 100%;
  height: 100%;
  display: block;
  border-radius: calc(var(--nfc-card-w) * 16 / 208.156);
  pointer-events: none;
}

/* 仅在鼠标设备按住时缩放；触摸设备上 :active 会在滑动开始/结束时反复触发，
   使产品图跟着「缩放→回弹」，看起来就是一闪一闪，故触摸设备不启用 */
@media (hover: hover) and (pointer: fine) {
  .featured-card-brick:active {
    transform: scale3d(0.97, 0.97, 1);
  }
}

/* 卡面 NFC 雷达循环扩散：圆心 = SVG viewBox(208.156×330) 中 (104.018,135.746)，
   外圈直径 84 → 40.35% 卡宽；三圈错开 1s 无缝循环，与 NFC 弹窗的 radarPing 同源 */
.brick-nfc-radar {
  position: absolute;
  left: 49.97%;
  top: 41.14%;
  width: 40.35%;
  aspect-ratio: 1 / 1;
  transform: translate(-50%, -50%);
  pointer-events: none;
}

.brick-radar-wave {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  /* card_locked.svg 重画后波圈扩散区域几乎全落在白色圆角 box 上，
     白描边会隐形，改走深色（黑徽章重叠的弧段极小，可忽略） */
  border: 1px solid rgba(34, 34, 38, 0.32);
  /* 常驻无限动画：提升为独立合成层，避免每帧重绘其父级卡砖（含产品图），
     否则滚动时产品图会跟着被反复重栅格 → 闪 */
  will-change: transform, opacity;
  animation: brickRadarPing 3s cubic-bezier(0, 0.2, 0.8, 1) infinite;
}

.brick-radar-wave:nth-child(2) {
  animation-delay: 1s;
}

.brick-radar-wave:nth-child(3) {
  animation-delay: 2s;
}

/* 起点 0.55 保证光圈永远在黑底 NFC 徽章之外（徽章 r=18 / 外圈 r=42） */
@keyframes brickRadarPing {
  0% {
    transform: scale(0.55);
    opacity: 1;
  }

  100% {
    transform: scale(1.16);
    opacity: 0;
  }
}

/* 卡砖内嵌 Tap NFC：占据 SVG 底部原白底占位区（SVG 内该 rect 已移除）
   几何换算：rect x=106 y=590 w=178 h=51 → 相对 208×330 卡砖
   left/right=7.2438%、bottom=6.055%、height=15.4545%
   （用户要求按钮高度小一点，height 由 15.4545% 收到 13%） */
.brick-nfc-btn {
  position: absolute;
  left: 7.2438%;
  right: 7.2438%;
  bottom: 6.055%;
  height: 13%;
  background: var(--inv-bg);
  color: var(--inv-ink);
  border: none;
  border-radius: var(--r-pill);
  font-family: var(--font-sans);
  font-size: var(--fs-sub);
  font-weight: 600;
  letter-spacing: 0;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: none;
  transition: transform 0.12s cubic-bezier(0.25, 1, 0.5, 1), background-color 0.15s ease;
}

.brick-nfc-btn:active {
  transform: scale(0.96);
  background-color: var(--inv-bg);
}

/* 统一 NFC 操作按键与文案 (卡砖下方紧凑留白) */
.tap-nfc-btn-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: var(--sp-4) var(--sp-5) var(--sp-2) var(--sp-5);
}

.tap-nfc-btn {
  width: 204px;
  height: var(--btn-h-xs);
  background: var(--inv-bg);
  color: var(--inv-ink);
  border: none;
  border-radius: var(--r-pill);
  font-family: var(--font-sans);
  font-size: var(--fs-sub);
  font-weight: 600;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: none;
  transition: transform 0.12s cubic-bezier(0.25, 1, 0.5, 1), background-color 0.15s ease;
  text-decoration: none;
  letter-spacing: 0px;
}

.tap-nfc-btn:active {
  transform: scale(0.96);
  background-color: var(--inv-bg);
}

/* MY COLLECTION 区域 (左右滑动横向流，标准 iOS 舒缓留白)
   与 LATEST MOMENT 统一：占满整屏（移动端一屏一板块），内容纵向居中 */
.my-collection-section {
  margin-top: var(--section-gap);
  padding-bottom: var(--sp-3);
  min-height: var(--section-min-h);
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.pill-dropdown-btn {
  height: 23px;
  padding: 0 var(--sp-2) 0 var(--sp-3);
  border-radius: var(--r-pill);
  font-size: var(--fs-cap);
  font-weight: 500;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-1);
  cursor: pointer;
  border: 0.5px solid var(--line-mid);
  background-color: transparent;
  color: var(--color-label);
  transition: background-color 0.15s ease, border-color 0.15s ease;
  box-sizing: border-box;
  line-height: 1;
}

.pill-dropdown-btn:active {
  background-color: var(--bg-inset-strong);
}

.pill-dropdown-btn.active {
  background-color: var(--inv-bg);
  color: var(--inv-ink);
  border-color: var(--ink-strong);
  font-weight: 600;
}

.pill-dropdown-btn.active .dropdown-chevron {
  color: var(--inv-ink);
}

/* 优雅精细的 SVG 下拉箭头指示器 */
.dropdown-chevron {
  width: 7.5px;
  height: 7.5px;
  display: inline-block;
  color: var(--color-secondary-label);
  stroke: currentColor;
  stroke-width: 1.8px;
  transition: transform 0.2s cubic-bezier(0.25, 1, 0.5, 1), color 0.15s ease;
  pointer-events: none;
  flex-shrink: 0;
}

.filter-button-anchor.active-open .dropdown-chevron,
.pill-dropdown-btn.active-open .dropdown-chevron {
  transform: rotate(180deg);
  color: var(--color-label);
}

.collection-carousel-scroll {
  display: flex;
  gap: var(--sp-4);
  overflow-x: auto;
  overflow-y: hidden;
  /* 从左到右展示卡砖与占位，优雅底部留白 16px，不与底栏贴紧 */
  padding: var(--sp-2) var(--sp-5) var(--sp-4) var(--sp-5);
  /* 吸附时保留左右内边距，首卡不会贴死屏幕边缘（与标题缩进对齐） */
  scroll-padding-left: var(--sp-5);
  scroll-padding-right: var(--sp-5);
  scroll-snap-type: x proximity;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
  -ms-overflow-style: none;
  scrollbar-width: none;
  box-sizing: border-box;
}

/* 统一惯性拖拽轨道（app.js attachMomentumDrag 自动挂类） */
.momentum-drag {
  cursor: grab;
  user-select: none;
  -webkit-user-select: none;
}

.momentum-drag.is-dragging {
  cursor: grabbing;
}

.collection-carousel-scroll::-webkit-scrollbar {
  display: none;
}

.collection-card-item {
  width: var(--collection-card-w);
  height: var(--collection-card-h);
  /* 与 SVG 外框半径（viewBox 16 / 宽 208.156 单位）精确对齐，避免裁切出锯齿 */
  border-radius: calc(var(--collection-card-w) * 16 / 208.156);
  flex-shrink: 0;
  display: block;
  scroll-snap-align: start;
  box-shadow: none;
  text-decoration: none;
  color: inherit;
  transition: transform 0.2s cubic-bezier(0.25, 1, 0.5, 1), opacity 0.2s ease;
  box-sizing: border-box;
  user-select: none;
  -webkit-user-drag: none;
  cursor: pointer;
}

.collection-card-item img {
  width: 100%;
  height: 100%;
  display: block;
  border-radius: calc(var(--collection-card-w) * 16 / 208.156);
  pointer-events: none;
}

/* 触摸设备不启用按下缩放，避免滑动时产品图反复「缩放→回弹」而闪烁 */
@media (hover: hover) and (pointer: fine) {
  .collection-card-item:active {
    transform: scale3d(0.97, 0.97, 1);
  }
}

/* 没有任何卡砖时的提示占位行 (选项与标签均无浅灰底色) */
.collection-empty-prompt {
  width: 100%;
  margin: var(--sp-2) 0 var(--sp-2) 0;
  padding: 20px var(--sp-5);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  border: none;
  border-radius: var(--r-md);
  background: transparent;
  box-sizing: border-box;
  cursor: default;
  transition: none;
}

.empty-prompt-title {
  font-family: var(--font-sans);
  font-size: var(--fs-sub);
  font-weight: 600;
  color: var(--color-label);
  margin-bottom: var(--sp-1);
}

.cm-stamp-box.black {
  background-color: var(--inv-bg);
  color: var(--inv-ink);
  border: none;
}

/* ==========================================================================
   底部 TabBar：菜单栏自身无底色（transparent），由 ::before 的 alpha 渐变
   让底部内容自然「渐隐」到页面画布色，不出现实色底板与硬边。
   ========================================================================== */
.app-bottom-tabbar {
  position: fixed;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  max-width: 480px;
  height: calc(52px + env(safe-area-inset-bottom, 0px));
  /* 层级结构（从下往上）：
     1) 滚动内容（页面本身）
     2) ::before —— 底部渐隐层（纯 alpha 渐变，见下）
     3) tabbar 内容层（icon / 文字，z-index 高于 ::before，完全不透明） */
  background-color: transparent;
  border-top: none;
  display: flex;
  align-items: center;
  justify-content: space-around;
  padding: 0 6px env(safe-area-inset-bottom, 0px) 6px;
  z-index: 100;
  box-sizing: border-box;
  /* 不能加 overflow: hidden —— 渐隐层 ::before 需要向上越界到菜单栏上方 */
}

/* 底部渐隐层：滚动内容进入菜单栏上方区域后，由内容自身逐渐淡入到页面画布色，
   内容在底部自然「渐隐」，不出现任何实色底板与硬边。
   （用户要求：去掉菜单栏底色，改由底部内容做渐隐）
   ① 渐隐带从 96px → 56px → **32px**：用户连续反馈「白色部分太高，图片显短」。
      现在只有菜单栏本体(52px) + 顶部 32px 过渡，合计 84px，最大程度把海报露出来。
   ② 曲线重排为更顺的 S 形：顶部 6px 内几乎看不出变化（alpha<0.02），
      中段加速、到菜单栏中段就收到 0.97，避免原来"先快后慢"造成的台阶感。 */
.app-bottom-tabbar::before {
  content: "";
  position: absolute;
  top: -32px;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 0;
  pointer-events: none;
  background-image: linear-gradient(to bottom,
      rgba(var(--bg-canvas-rgb), 0) 0px,
      rgba(var(--bg-canvas-rgb), 0.004) 4px,
      rgba(var(--bg-canvas-rgb), 0.016) 8px,
      rgba(var(--bg-canvas-rgb), 0.045) 13px,
      rgba(var(--bg-canvas-rgb), 0.100) 18px,
      rgba(var(--bg-canvas-rgb), 0.190) 23px,
      rgba(var(--bg-canvas-rgb), 0.330) 28px,
      rgba(var(--bg-canvas-rgb), 0.520) 33px,
      rgba(var(--bg-canvas-rgb), 0.720) 39px,
      rgba(var(--bg-canvas-rgb), 0.880) 46px,
      rgba(var(--bg-canvas-rgb), 0.960) 55px,
      rgba(var(--bg-canvas-rgb), 0.975) 70px,
      rgba(var(--bg-canvas-rgb), 0.975) 100%);
}

/* tabbar 内容层：始终位于渐隐层之上，保持完全不透明（icon / 文字不受渐隐影响） */
.app-bottom-tabbar>* {
  position: relative;
  z-index: 1;
}

.tabbar-item {
  flex: 1;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  /* 浅色模式：tabbar 文字/icon 为纯黑（用户要求"浅色时黑色"） */
  color: #000000;
  transition: transform 0.12s cubic-bezier(0.25, 1, 0.5, 1), color 0.15s ease;
  -webkit-tap-highlight-color: transparent;
  padding: var(--sp-1) 0;
  box-sizing: border-box;
}

.tabbar-item:active {
  transform: scale(0.96);
}

.tabbar-pill-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--sp-1);
  padding: var(--sp-1) var(--sp-2);
  background: transparent !important;
  box-sizing: border-box;
}

.tabbar-item.active .tabbar-pill-box {
  background: transparent !important;
  width: auto;
  height: auto;
}

.tabbar-item.active {
  /* 浅色模式 active 也是纯黑（无对比变化、保持纯净） */
  color: #000000;
}

.tabbar-label {
  font-family: var(--font-sans);
  font-size: var(--fs-micro);
  font-weight: 500;
  letter-spacing: 0px;
  line-height: 1.1;
  /* 浅色模式：tabbar 文字为纯黑（自动跟随 .tabbar-item 的 color） */
  color: inherit;
}

.tabbar-item.active .tabbar-label {
  font-weight: 600;
  color: inherit;
}

/* 微信小程序精细矢量图标 */
.nav-icon {
  width: 20px;
  height: 20px;
  stroke-width: 1.8px;
  /* 浅色模式：tabbar icon 描边为纯黑（自动跟随父级 color） */
  stroke: currentColor;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: stroke-width 0.15s ease, stroke 0.15s ease;
}

.tabbar-item.active .nav-icon {
  stroke-width: 2.3px;
  stroke: currentColor;
}

/* ==========================================================================
   卡砖底部归属信息 (Collected by Larry Luk / 16 Sep 2026 · Kyoto)
   统一左对齐选项，上方横线去除
   ========================================================================== */
.card-provenance-collector-footer {
  width: 100%;
  margin-top: var(--sp-4);
  padding: var(--sp-2) 0;
  border-top: none;
  box-sizing: border-box;
  user-select: none;
}

/* 品牌档案底板块 (参考图排版：左侧四行参数+版权，右侧 logo.svg) */
.prov-brand-plate {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--sp-3);
  width: 100%;
  box-sizing: border-box;
  padding: 0 var(--sp-1);
}

.plate-meta-side {
  display: flex;
  flex-direction: column;
  gap: 3.5px;
  text-align: left;
}

.plate-row {
  display: flex;
  align-items: baseline;
  gap: 12px;
  line-height: 1.35;
}

.plate-key {
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 700;
  color: var(--ink-deep);
  min-width: 62px;
}

.plate-val {
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 400;
  color: var(--ink-deep);
}

.plate-copyright {
  font-family: var(--font-sans);
  font-size: 8.5px;
  font-weight: 500;
  color: var(--color-secondary-label);
  letter-spacing: 0.4px;
  margin-top: 6px;
  text-transform: uppercase;
}

.plate-logo-side {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-shrink: 0;
}

.plate-logo-img {
  width: clamp(90px, 25vw, 115px);
  height: auto;
  display: block;
  object-fit: contain;
}

/* ==========================================================================
   iOS 触控与按压微交互 (0延迟，120Hz 极速微缩放)
   ========================================================================== */
button,
a,
.pill-btn,
.tabbar-item,
.card-brick-item {
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

button:active,
a:active,
.pill-btn:active,
.tabbar-item:active {
  transform: scale3d(0.96, 0.96, 1);
  opacity: 0.82;
  transition: transform 0.1s cubic-bezier(0.25, 1, 0.5, 1), opacity 0.1s ease;
}

.slide-drawer.visible {
  transform: translateY(0);
}

/* ==========================================================================
   Apple 原生 NFC Scanning Sheet (极高拟真度交互浮层)
   ========================================================================== */
.nfc-scan-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.45);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  z-index: 2000;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.28s cubic-bezier(0.25, 1, 0.5, 1), visibility 0.28s;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}

.nfc-scan-backdrop.active {
  opacity: 1;
  visibility: visible;
}

.nfc-scan-modal {
  width: 100%;
  max-width: 440px;
  background: var(--bg-card);
  border-top-left-radius: var(--r-2xl);
  border-top-right-radius: var(--r-2xl);
  padding: var(--sp-6) var(--sp-6) calc(var(--sp-7) + env(safe-area-inset-bottom, 20px)) var(--sp-6);
  box-shadow: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  transform: translateY(100%);
  transition: transform 0.36s cubic-bezier(0.32, 0.72, 0, 1);
}

.nfc-scan-backdrop.active .nfc-scan-modal {
  transform: translateY(0);
}

.nfc-modal-grabber {
  width: 36px;
  height: 5px;
  border-radius: var(--r-pill);
  background-color: var(--line-grabber);
  margin-bottom: var(--sp-5);
}

.nfc-radar-pulse-box {
  width: 130px;
  height: 130px;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: var(--sp-4) 0 var(--sp-6) 0;
}

.radar-wave {
  position: absolute;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  border: 2px solid var(--wave-line);
  animation: radarPing 2s cubic-bezier(0, 0.2, 0.8, 1) infinite;
}

.radar-wave:nth-child(2) {
  animation-delay: 0.6s;
}

.radar-wave:nth-child(3) {
  animation-delay: 1.2s;
}

@keyframes radarPing {
  0% {
    transform: scale(0.45);
    opacity: 1;
  }

  100% {
    transform: scale(1.18);
    opacity: 0;
  }
}

.nfc-radar-core {
  width: 68px;
  height: 68px;
  border-radius: 50%;
  background: var(--inv-bg);
  color: var(--inv-ink);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--fs-body);
  font-weight: 700;
  letter-spacing: 1.2px;
  box-shadow: none;
  z-index: 2;
  transition: background-color 0.3s ease, transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.nfc-radar-pulse-box.success .nfc-radar-core {
  background-color: #34C759;
  transform: scale(1.1);
}

.nfc-radar-pulse-box.success .radar-wave {
  border-color: rgba(52, 199, 89, 0.4);
}

.nfc-modal-title {
  font-size: var(--fs-h3);
  font-weight: 700;
  color: var(--color-label);
  letter-spacing: 0px;
  margin-bottom: var(--sp-2);
}

.nfc-modal-desc {
  font-size: var(--fs-sub);
  color: var(--ink-mute-2);
  line-height: 1.45;
  max-width: 290px;
  margin-bottom: var(--sp-6);
}

.nfc-modal-cancel-btn {
  width: 100%;
  max-width: 280px;
  height: var(--btn-h-sm);
  border-radius: var(--r-pill);
  background-color: transparent;
  border: var(--border-card);
  color: var(--color-label);
  font-size: var(--fs-body);
  font-weight: 600;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background-color 0.15s ease;
}

.nfc-modal-cancel-btn:active {
  background-color: var(--bg-inset-strong);
}

.ios-action-sheet-backdrop.active {
  opacity: 1;
  visibility: visible;
}

.ios-action-sheet-backdrop.active .ios-action-sheet-panel {
  transform: translateY(0);
}

.ios-sheet-item.active {
  font-weight: 600;
}

/* ==========================================================================
   iOS 风格 Toast 浮层
   ========================================================================== */
.ios-toast {
  position: fixed;
  top: calc(54px + env(safe-area-inset-top, 0px));
  left: 50%;
  transform: translateX(-50%) translateY(-20px);
  background: rgba(28, 28, 30, 0.94);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  color: #FFFFFF;
  padding: var(--sp-3) var(--sp-6);
  border-radius: var(--r-lg);
  font-size: var(--fs-sub);
  font-weight: 600;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  line-height: 1.5;
  white-space: pre-line;
  gap: var(--sp-1);
  box-shadow: none;
  z-index: 3000;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.25s ease, transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1), visibility 0.25s;
  pointer-events: none;
  max-width: 90%;
  box-sizing: border-box;
}

.ios-toast.show {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
}

/* ==========================================================================
   失败弹窗（iOS Action Sheet 风格 + 强提示）
   - 用于每个失败检测：必填/库存/未登录/网络错/字段格式/重复注册 等
   - 不阻塞后续动作（type=info/warn/error 都可点关闭）
   - 居中卡片，主操作（黑）+ 次要操作（透明边框）
   ========================================================================== */
.db-modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(20, 20, 22, 0.45);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  z-index: 5000;
  display: none;
  align-items: center;
  justify-content: center;
  padding: var(--sp-4);
  box-sizing: border-box;
  animation: dbModalFade 0.18s ease;
}

.db-modal-backdrop.show {
  display: flex;
}

@keyframes dbModalFade {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

.db-modal {
  width: min(420px, 100%);
  background: var(--bg-card, #FFFFFF);
  border-radius: var(--r-lg, 18px);
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.28);
  overflow: hidden;
  animation: dbModalRise 0.24s cubic-bezier(0.34, 1.56, 0.64, 1);
  max-height: 80vh;
  display: flex;
  flex-direction: column;
}

@keyframes dbModalRise {
  from {
    opacity: 0;
    transform: translateY(14px) scale(0.96);
  }

  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.db-modal-icon {
  display: flex;
  justify-content: center;
  padding: var(--sp-6) var(--sp-4) 0 var(--sp-4);
}

.db-modal-icon-dot {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: var(--fs-title, 17px);
  font-family: var(--font-sans);
}

.db-modal-icon-dot.error {
  background: rgba(255, 59, 48, 0.12);
  color: #C8102E;
}

.db-modal-icon-dot.warn {
  background: rgba(255, 149, 0, 0.14);
  color: #B86E00;
}

.db-modal-icon-dot.info {
  background: rgba(0, 122, 255, 0.12);
  color: #007AFF;
}

.db-modal-icon-dot.ok {
  background: rgba(52, 199, 89, 0.14);
  color: #138a36;
}

.db-modal-body {
  padding: var(--sp-4) var(--sp-6) var(--sp-2) var(--sp-6);
  text-align: center;
}

.db-modal-title {
  font-size: var(--fs-title, 17px);
  font-weight: 700;
  font-family: var(--font-sans);
  color: var(--ink-strong, #111);
  margin-bottom: var(--sp-2, 8px);
  line-height: 1.4;
}

.db-modal-msg {
  font-size: var(--fs-sub, 14px);
  font-family: var(--font-sans);
  color: var(--ink-deep, #333);
  line-height: 1.55;
  white-space: pre-line;
  word-break: break-word;
}

.db-modal-meta {
  margin-top: var(--sp-3, 12px);
  font-size: var(--fs-2xs, 11px);
  font-family: var(--font-mono, monospace);
  color: var(--color-tertiary-label, #8a8a8e);
  background: rgba(0, 0, 0, 0.04);
  border-radius: 6px;
  padding: 6px 8px;
  text-align: left;
  display: none;
  word-break: break-all;
}

.db-modal-meta.show {
  display: block;
}

.db-modal-actions {
  display: flex;
  gap: var(--sp-2, 8px);
  padding: var(--sp-4) var(--sp-4) var(--sp-4) var(--sp-4);
  border-top: var(--border-card, 1px solid rgba(0, 0, 0, 0.06));
  margin-top: var(--sp-4);
}

.db-modal-btn {
  flex: 1;
  padding: 12px 14px;
  border-radius: var(--r-md, 12px);
  border: none;
  font-family: var(--font-sans);
  font-size: var(--fs-sub, 14px);
  font-weight: 600;
  cursor: pointer;
  background: var(--inv-bg, #111);
  color: var(--inv-ink, #fff);
  transition: opacity 0.15s ease, transform 0.15s ease;
}

.db-modal-btn:hover {
  opacity: 0.85;
}

.db-modal-btn:active {
  transform: scale(0.98);
}

.db-modal-btn.secondary {
  background: transparent;
  color: var(--ink-strong, #111);
  border: var(--border-card, 1px solid rgba(0, 0, 0, 0.1));
}

.db-modal-btn.secondary:hover {
  background: rgba(0, 0, 0, 0.04);
}

@media (prefers-color-scheme: dark) {
  .db-modal {
    background: #1c1c1e;
  }

  .db-modal-title {
    color: #fff;
  }

  .db-modal-msg {
    color: rgba(255, 255, 255, 0.85);
  }

  .db-modal-actions {
    border-top-color: rgba(255, 255, 255, 0.08);
  }

  .db-modal-btn.secondary {
    color: #fff;
    border-color: rgba(255, 255, 255, 0.12);
  }

  .db-modal-btn.secondary:hover {
    background: rgba(255, 255, 255, 0.08);
  }

  .db-modal-meta {
    background: rgba(255, 255, 255, 0.06);
    color: rgba(255, 255, 255, 0.5);
  }
}

/* ==========================================================================
   4. DiNERBOX 自定义非原生浮动筛选气泡菜单 (Custom Filter Popovers - Crisp & Sharp)
   ========================================================================== */
.filter-pills-row {
  position: relative;
  /* 用户反馈「筛选按钮层级太高」：原来 140 会浮在底部菜单栏(100)和其它页面元素之上。
     这里压到 5（只在本区块内做层叠），配套把 anchor / backdrop 一起降下来。 */
  z-index: 5;
}

.filter-button-anchor {
  position: relative;
  display: inline-block;
  z-index: 1;
}

.filter-button-anchor.active-open {
  /* 展开时只需盖住同级 anchor（原来 1450 会盖过菜单栏和弹窗） */
  z-index: 20;
}

.dinerbox-filter-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.02);
  z-index: 10;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.15s ease, visibility 0.15s;
}

.dinerbox-filter-backdrop.active {
  opacity: 1;
  visibility: visible;
}

.dinerbox-popover-menu {
  position: absolute;
  top: 28px;
  left: 0;
  min-width: 200px;
  /* 适配小屏：不超出视口；选项多时可纵向滚动（原来固定 min-width:200px 且无上限，
     系列名较长或屏幕窄时会溢出） */
  max-width: min(280px, calc(100vw - 32px));
  max-height: 56vh;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  background: var(--bg-card);
  border-radius: var(--r-md);
  box-shadow: none;
  border: var(--border-card);
  padding: var(--sp-2);
  z-index: 30;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-4px);
  pointer-events: none;
  transition: opacity 0.15s ease, transform 0.15s ease, visibility 0.15s;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.dinerbox-popover-menu.open {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  pointer-events: auto;
}

.popover-menu-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--sp-2) var(--sp-3);
  border-radius: var(--r-sm);
  font-family: var(--font-sans);
  font-size: var(--fs-note);
  font-weight: 600;
  color: var(--ink-deep);
  cursor: pointer;
  border: none;
  background: transparent;
  width: 100%;
  text-align: left;
  transition: background-color 0.12s ease;
  -webkit-font-smoothing: antialiased;
}

.popover-menu-item:hover,
.popover-menu-item:active {
  background-color: var(--bg-secondary);
}

.popover-menu-item.active {
  background-color: var(--inv-bg);
  color: var(--inv-ink);
}

/* 计数：用户要求「数字不需要有底色」——去掉底板与胶囊内边距，只留纯文字 */
.popover-tag-badge,
.popover-count {
  font-size: var(--fs-micro);
  padding: 0;
  border-radius: 0;
  background: none;
  color: var(--color-secondary-label);
  font-family: var(--font-mono);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.popover-menu-item.active .popover-tag-badge,
.popover-menu-item.active .popover-count {
  background: none;
  color: var(--inv-ink);
}

/* ==========================================================================
   2 & 5. 点击卡砖放大并完全遮住一大半卡砖 + iOS 风格表单 + 代码风存证标签与分享
   ========================================================================== */
.provenance-modal-backdrop {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100dvh;
  background: rgba(0, 0, 0, 0.78);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  z-index: 2100;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s cubic-bezier(0.25, 1, 0.5, 1), visibility 0.3s;
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  scroll-behavior: smooth;
  scrollbar-width: none;
}

.provenance-modal-backdrop::-webkit-scrollbar {
  display: none;
}

.provenance-modal-backdrop.active {
  opacity: 1;
  visibility: visible;
}

/* 固定右上角关闭按钮 */
.provenance-close-btn-floating {
  position: fixed;
  top: 18px;
  right: 18px;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.18);
  background: rgba(0, 0, 0, 0.45);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  color: #ffffff;
  font-size: 16px;
  font-weight: 500;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 260;
  transition: transform 0.15s ease, background 0.15s ease;
}

.provenance-close-btn-floating:active {
  transform: scale(0.92);
  background: rgba(0, 0, 0, 0.7);
}

/* 第一屏：完全展示 3D 亚克力卡砖 */
.provenance-hero-card-wrap {
  position: relative;
  min-height: 100dvh;
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  box-sizing: border-box;
  padding: 48px 16px 64px 16px;
  z-index: 245;
  pointer-events: auto;
}

/* 3D 翻转容器：尺寸放大在第一屏居中大气呈现，严格锁定 208:330 黄金比例 */
.provenance-hero-card-brick {
  width: min(72vw, 290px);
  max-width: calc(62vh * 208 / 330);
  aspect-ratio: 208 / 330;
  border-radius: var(--r-sm);
  cursor: grab;
  perspective: 1200px;
  pointer-events: auto;
  position: relative;
  touch-action: pan-y;
  filter: drop-shadow(0 20px 48px rgba(0, 0, 0, 0.55));
}

/* 第一屏底部的「PROVENANCE ⌄」往下拉提示指示器 */
.provenance-scroll-hint {
  position: absolute;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 6px;
  background: rgba(255, 255, 255, 0.14);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: var(--r-pill);
  padding: 7px 16px;
  color: rgba(255, 255, 255, 0.95);
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.8px;
  cursor: pointer;
  user-select: none;
  -webkit-user-select: none;
  transition: transform 0.18s ease, background 0.18s ease;
  animation: pshPulse 2s ease-in-out infinite;
  z-index: 246;
}

.provenance-scroll-hint:active {
  transform: translateX(-50%) scale(0.96);
  background: rgba(255, 255, 255, 0.25);
}

.provenance-scroll-hint .psh-chevron {
  width: 13px;
  height: 13px;
  animation: pshBounce 1.5s ease-in-out infinite;
}

@keyframes pshBounce {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(3px); }
}

@keyframes pshPulse {
  0%, 100% { box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2); }
  50% { box-shadow: 0 4px 18px rgba(255, 255, 255, 0.18); }
}

.provenance-hero-card-brick:active {
  cursor: grabbing;
}

.provenance-hero-card-brick canvas {
  width: 100% !important;
  height: 100% !important;
  display: block;
  touch-action: none;
}

/* 3D 翻转机构 */
.provenance-3d-flipper {
  width: 100%;
  height: 100%;
  position: relative;
  transform-style: preserve-3d;
  transition: transform 0.65s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.provenance-3d-flipper.is-flipped {
  transform: rotateY(180deg);
}

/* 正面 / 反面公共 */
.brick-face-front,
.brick-face-back {
  position: absolute;
  inset: 0;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  /* 统一卡砖外轮廓圆角：与 activation / store / MY COLLECTION 同一比例
     （用户 2026-10-15：「所有卡砖的外轮廓圆角没统一比例」）*/
  border-radius: var(--brick-radius, 7.6923% / 4.8485%);
  overflow: hidden;
}

.brick-face-front img {
  width: 100%;
  height: 100%;
  display: block;
  border-radius: var(--brick-radius, 7.6923% / 4.8485%);
  object-fit: cover;
}

/* 反面：工业档案铭牌风格 (匹配 Image 2 参考设计) */
.brick-face-back {
  transform: rotateY(180deg);
  background: #0c0d0e;
  color: #e8e8e8;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 22px 18px 16px 18px;
  box-sizing: border-box;
  font-family: var(--font-sans);
  border: 1px solid rgba(255, 255, 255, 0.12);
  box-shadow: inset 0 0 24px rgba(0, 0, 0, 0.85);
}

.brick-back-brand {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 0.5px solid rgba(255, 255, 255, 0.18);
  padding-bottom: 12px;
}

.brick-back-brand-name {
  font-size: 15px;
  font-weight: 800;
  letter-spacing: 2.5px;
  color: #ffffff;
  text-transform: uppercase;
}

.brick-back-brand-icon {
  width: 20px;
  height: 20px;
  color: #ffffff;
  opacity: 0.8;
}

.brick-back-meta {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 12px;
  padding: 16px 0;
}

.brick-back-row {
  display: grid;
  grid-template-columns: 78px 1fr;
  gap: 8px;
  align-items: baseline;
}

.brick-back-key {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1px;
  color: rgba(255, 255, 255, 0.48);
  text-transform: uppercase;
  line-height: 1.4;
}

.brick-back-val {
  font-size: 12px;
  font-weight: 600;
  color: #f0f0f0;
  line-height: 1.4;
}

.brick-back-footer {
  border-top: 0.5px solid rgba(255, 255, 255, 0.12);
  padding-top: 10px;
  font-size: 8px;
  color: rgba(255, 255, 255, 0.38);
  letter-spacing: 0.8px;
  text-align: center;
}

/* 3D 翻转引导图标 (卡砖中间，初始隐形，每 5 秒渐显 1 秒引导，点击重置 5 秒倒计时) */
.brick-flip-hint-icon {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.58);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 255, 255, 0.35);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #ffffff;
  pointer-events: none; /* 点击直接穿透到卡砖 */
  z-index: 20;
  opacity: 0;
  transition: opacity 0.4s ease, transform 0.4s ease;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4);
}

.brick-flip-hint-icon.is-showing {
  opacity: 0.92;
  transform: translate(-50%, -50%) scale(1);
}

.brick-flip-hint-icon:not(.is-showing) {
  opacity: 0;
  transform: translate(-50%, -50%) scale(0.88);
}

.brick-flip-hint-icon svg {
  width: 22px;
  height: 22px;
  stroke: currentColor;
  stroke-width: 1.8;
  fill: none;
}

/* 第二屏：往下拉之后展示的底部抽屉信息区 */
.provenance-bottom-sheet {
  position: relative;
  left: 0;
  right: 0;
  margin: 0 auto;
  width: 100%;
  max-width: 480px;
  min-height: 100dvh;
  background: var(--bg-card);
  border-top-left-radius: var(--r-2xl);
  border-top-right-radius: var(--r-2xl);
  display: flex;
  flex-direction: column;
  visibility: visible;
  opacity: 1;
  z-index: 250;
  box-shadow: 0 -16px 48px rgba(0, 0, 0, 0.45);
  box-sizing: border-box;
  touch-action: auto;
}

.provenance-modal-backdrop.active .provenance-bottom-sheet {
  visibility: visible;
  opacity: 1;
}

.provenance-sheet-handle-bar {
  width: 100%;
  padding: 12px 0 10px 0;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: grab;
  flex-shrink: 0;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
}

.provenance-sheet-handle-bar:active {
  cursor: grabbing;
}

.provenance-sheet-handle {
  width: 42px;
  height: 5px;
  border-radius: var(--r-pill);
  background: var(--line);
  transition: background 0.2s ease, width 0.2s ease;
}

.provenance-sheet-handle-bar:hover .provenance-sheet-handle {
  background: var(--ink-dim-2);
}

/* ==========================================================================
   视图 A: iOS 原生美学录入表单 (#provenanceEditView)
   ========================================================================== */
.ios-drawer-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--sp-2) var(--sp-5) var(--sp-3) var(--sp-5);
  flex-shrink: 0;
}

.ios-drawer-title {
  font-family: var(--font-sans);
  font-size: var(--fs-title);
  font-weight: 700;
  color: var(--color-label);
  letter-spacing: 0px;
  margin: 0;
}

.ios-drawer-subtitle {
  font-family: var(--font-sans);
  font-size: var(--fs-cap);
  font-weight: 500;
  color: var(--color-secondary-label);
  margin: var(--sp-1) 0 0 0;
}

.ios-close-btn {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: transparent;
  border: var(--border-card);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--fs-sub);
  font-weight: 600;
  color: var(--color-secondary-label);
  cursor: pointer;
  transition: background-color 0.12s;
}

.ios-close-btn:active {
  background: var(--bg-inset-strong);
}

.ios-form-scroll-body {
  flex: 1;
  /* flex 子项默认 min-height:auto 会被内容撑开、overflow-y 永不触发 → 手机端表单滚不动 */
  min-height: 0;
  overflow-y: auto;
  /* 锁死横向：overflow-y:auto 会把横向也变成可滚，表单内容能被左右拖动 */
  overflow-x: hidden;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  padding: var(--sp-2) var(--sp-5) var(--sp-5) var(--sp-5);
}

.ios-form-scroll-body::-webkit-scrollbar {
  display: none;
}

.ios-form-group {
  margin-bottom: var(--sp-4);
}

.ios-label {
  font-family: var(--font-sans);
  font-size: var(--fs-cap);
  font-weight: 600;
  color: var(--color-label);
  letter-spacing: 1px;
  margin-bottom: var(--sp-2);
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  box-sizing: border-box;
}

.ios-req-tag {
  font-size: var(--fs-micro);
  font-weight: 600;
  color: var(--color-secondary-label);
  background: transparent;
  padding: 0;
  border-radius: 0;
  margin-left: auto;
}

/* 卡砖主题与底部标签左侧信息读取展示 (用户要求：上方的标签改成黑底白字) */
.card-theme-pill-block {
  display: none;
}

.theme-pill-header {
  font-family: var(--font-sans);
  font-size: var(--fs-micro);
  font-weight: 600;
  letter-spacing: 1px;
  color: var(--inv-ink-soft);
  text-transform: uppercase;
}

.theme-pill-content {
  font-family: var(--font-sans);
  font-size: var(--fs-note);
  font-weight: 600;
  color: var(--inv-ink);
  line-height: 1.4;
  letter-spacing: 0px;
}

.ios-input {
  width: 100%;
  height: 38px;
  border-radius: var(--r-sm);
  border: var(--border-card);
  padding: 0 var(--sp-3);
  font-family: var(--font-sans);
  font-size: var(--fs-sub);
  color: var(--color-label);
  background: transparent;
  outline: none;
  box-sizing: border-box;
  transition: border-color 0.15s, background-color 0.15s;
}

.ios-input:focus {
  border-color: var(--ink-strong);
  background: transparent;
}

/* iOS 原生日期控件按内容收缩、不占满表单两端，强制与其他字段同一宽度左右对齐 */
input[type="date"].ios-input {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  min-width: 0;
  text-align: left;
}

.ios-choice-pill.selected {
  background: var(--inv-bg);
  color: var(--inv-ink);
  border-color: var(--ink-strong);
  font-weight: 600;
}

.ios-textarea {
  width: 100%;
  min-height: 72px;
  border-radius: var(--r-sm);
  border: var(--border-card);
  padding: var(--sp-3) var(--sp-3);
  font-family: var(--font-sans);
  font-size: var(--fs-note);
  color: var(--color-label);
  background: transparent;
  outline: none;
  resize: vertical;
  line-height: 1.5;
  box-sizing: border-box;
  transition: border-color 0.15s, background-color 0.15s;
}

.ios-textarea:focus {
  border-color: var(--ink-strong);
  background: transparent;
}

/* 底部操作条 (保存 / 取消) */
/* 根治溢出：条体锁宽 + 按钮可收缩 (min-width:0) + 文字不换行，
   任何窄屏/缩放下按钮只会压缩、绝不会把操作条撑出抽屉 */
.ios-form-bottom-bar {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  padding: var(--sp-3) var(--sp-5) calc(var(--sp-3) + env(safe-area-inset-bottom, 12px)) var(--sp-5);
  background: var(--bg-card);
  border-top: var(--border-card);
  flex-shrink: 0;
}

.ios-btn-cancel {
  flex: 1;
  min-width: 0;
  height: var(--btn-h);
  background: transparent;
  border: var(--border-card);
  color: var(--color-label);
  border-radius: var(--r-pill);
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background-color 0.12s, transform 0.12s;
}

.ios-btn-cancel:active {
  background: var(--bg-inset-strong);
  transform: scale(0.98);
}

.ios-btn-save {
  flex: 1.6;
  min-width: 0;
  height: var(--btn-h);
  background: var(--inv-bg);
  color: var(--inv-ink);
  border: none;
  border-radius: var(--r-pill);
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  font-weight: 700;
  letter-spacing: 1.2px;
  cursor: pointer;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: none;
  transition: opacity 0.2s ease, transform 0.12s ease;
}

.ios-btn-save:disabled {
  opacity: 0.35;
  cursor: not-allowed;
  box-shadow: none;
}

.ios-btn-save:not(:disabled):active {
  transform: scale(0.98);
  opacity: 0.9;
}

.ios-segment-btn.active {
  background: var(--bg-card);
  color: var(--color-label);
  box-shadow: none;
  font-weight: 600;
}

/* ==========================================================================
   一行一个选项栏 (Spacious One-Option-Per-Line iOS List Items - 无浅灰底色)
   ========================================================================== */
.ios-option-list {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: var(--sp-2);
  width: 100%;
}

.ios-list-option {
  /* 一行 3 个：宽度须精确扣除两侧共 16px 间隙后三等分（33.33%-4px 会溢出 4px 导致每行只放 2 个） */
  width: calc((100% - 16px) / 3);
  min-width: 0;
  min-height: 40px;
  padding: var(--sp-2) 6px;
  border-radius: var(--r-sm);
  border: var(--border-card);
  background: transparent;
  color: var(--color-label);
  font-family: var(--font-sans);
  font-size: var(--fs-cap);
  font-weight: 500;
  cursor: pointer;
  user-select: none;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  box-sizing: border-box;
  transition: all 0.15s ease;
}

.ios-list-option:active {
  transform: scale(0.985);
  background: var(--bg-inset);
}

.ios-list-option .opt-label {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-1);
  font-size: var(--fs-cap);
  line-height: 1.25;
  white-space: normal;
}

.ios-list-option .opt-indicator {
  display: none;
}

.ios-list-option.multi .opt-indicator {
  border-radius: var(--r-2xs);
}

.ios-list-option.selected {
  background: var(--inv-bg);
  color: var(--inv-ink);
  border-color: var(--ink-strong);
  font-weight: 600;
}

.ios-list-option.selected .opt-indicator {
  background: var(--bg-card);
  border-color: var(--inv-ink);
}

.ios-list-option.selected .opt-indicator::after {
  content: '✓';
  font-size: var(--fs-cap);
  font-weight: 700;
  color: var(--color-label);
}

/* ==========================================================================
   视图 B: 保存后渐显的代码风格存证标签 (文字全部居中)
   ========================================================================== */
.provenance-label-view {
  display: none;
  flex-direction: column;
  /* flex:1 占据把手条以外的剩余高度；height:100% 会与把手条叠加超出抽屉，导致底部按钮被裁掉 */
  flex: 1 1 0;
  min-height: 0;
  animation: labelFadeIn 0.35s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.provenance-label-view.active {
  display: flex;
}

.code-label-scroll-body {
  flex: 1;
  /* 同 ios-form-scroll-body：缺 min-height:0 会让手机端存证内容无法上下滚动 */
  min-height: 0;
  overflow-y: auto;
  /* 锁死横向：与 ios-form-scroll-body 同规则 */
  overflow-x: hidden;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  padding: var(--sp-4) var(--sp-5) var(--sp-6) var(--sp-5);
  display: flex;
  flex-direction: column;
  align-items: stretch;
  text-align: left;
}

.code-label-scroll-body::-webkit-scrollbar {
  display: none;
}

/* ===== 同一卡砖多条 MOMENT：计数行 + 横滑卡片轨道 ===== */
/* 卡片上方 Moment 数量展示（小字距 mono，档案语言） */
.prov-moment-count {
  font-family: var(--font-sans);
  font-size: var(--fs-2xs);
  font-weight: 600;
  letter-spacing: 2px;
  color: var(--color-tertiary-label);
  text-transform: uppercase;
  width: 100%;
  text-align: center;
  margin-bottom: var(--sp-1);
  flex-shrink: 0;
}

/* 瞬间卡片轨道：整宽卡片横滑（拖拽/惯性由 attachMomentumDrag 统一接管） */
.prov-moments-track {
  display: flex;
  width: 100%;
  gap: var(--sp-3);
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
  /* pan-x 会把纵向手势整段吞掉：手指落在卡砖上时外层滚动体收不到手势 → 上下滑不动。
     改 pan-x pan-y：横向仍由轨道自己滚，纵向手势交还给 .code-label-scroll-body */
  touch-action: pan-x pan-y;
  /* 纵向 flex（存证滚动体）里轨道默认 flex-shrink:1 会被压扁，内容再被自身 overflow-y:hidden 裁掉，
     表现为「卡砖信息显示不全且滚不动」；必须保持内容高度，让滚动体自身滚动 */
  flex-shrink: 0;
  padding: var(--sp-1) 0 var(--sp-2);
  scroll-padding: 0 50%;
}

.prov-moments-track::-webkit-scrollbar {
  display: none;
}

/* 单张瞬间卡：占满轨道宽度，标签内容自适应高度 */
.prov-moment-slide {
  flex: 0 0 100%;
  min-width: 0;
  scroll-snap-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.prov-moment-slide .moment-code-block {
  width: 100%;
  box-sizing: border-box;
  margin-top: var(--sp-1);
  margin-bottom: var(--sp-1);
}

/* ==========================================================================
   全新 Provenance 存证标签结构化排版 (信息分层、主次分明、字号与粗细层次化)
   ========================================================================== */
.moment-code-block {
  margin-top: var(--sp-2);
  margin-bottom: var(--sp-4);
  font-family: var(--font-sans);
  background: transparent;
  border: var(--border-card);
  border-radius: var(--r-md);
  padding: var(--sp-4);
  text-align: left;
  width: 100%;
  box-sizing: border-box;
}

/* ==========================================================================
   MY PROVENANCE 整洁档案标签 (Image 2 右侧设计)
   ========================================================================== */
.my-prov-header {
  font-family: var(--font-sans);
  font-size: var(--fs-title);
  font-weight: 800;
  letter-spacing: 0.5px;
  color: var(--ink-deep);
  margin: 0 0 var(--sp-4) 0;
}

/* 2列 label-value 网格 */
.my-prov-dossier {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 6px 14px;
  align-items: baseline;
  margin-bottom: var(--sp-1);
}

.my-prov-key {
  font-size: var(--fs-sub);
  font-weight: 700;
  color: var(--ink-deep);
  white-space: nowrap;
  line-height: 1.5;
}

.my-prov-val {
  font-size: var(--fs-sub);
  font-weight: 400;
  color: var(--ink-deep-2);
  line-height: 1.5;
}

/* 分隔线 */
.my-prov-hr {
  border: none;
  border-top: 0.5px solid var(--line);
  margin: var(--sp-3) 0;
}

/* 引用的笔记 */
.my-prov-quote {
  font-size: var(--fs-note);
  font-style: italic;
  color: var(--ink-deep-2);
  line-height: 1.55;
  margin: 0;
}

/* 标签底部操作条: 编辑 / 添加瞬间 / 分享 (三键等宽，同款防溢出约束) */
.label-bottom-bar {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  padding: var(--sp-3) var(--sp-5) calc(var(--sp-3) + env(safe-area-inset-bottom, 12px)) var(--sp-5);
  background: var(--bg-card);
  border-top: var(--border-card);
  flex-shrink: 0;
}

.label-btn-edit,
.label-btn-add {
  flex: 1;
  min-width: 0;
  height: var(--btn-h-sm);
  background: transparent;
  color: var(--color-label);
  border: var(--border-card);
  border-radius: var(--r-pill);
  font-family: var(--font-sans);
  font-size: var(--fs-sub);
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-1);
  transition: all 0.12s;
}

.label-btn-edit:active,
.label-btn-add:active {
  background: var(--bg-inset-strong);
  transform: scale(0.98);
}

.label-btn-edit svg,
.label-btn-add svg {
  flex-shrink: 0;
}

.label-btn-share {
  flex: 1;
  min-width: 0;
  height: var(--btn-h-sm);
  background: var(--inv-bg);
  color: var(--inv-ink);
  border: none;
  border-radius: var(--r-pill);
  font-family: var(--font-sans);
  font-size: var(--fs-sub);
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  cursor: pointer;
  box-shadow: none;
  transition: transform 0.12s, opacity 0.15s;
}

.label-btn-share:active {
  transform: scale(0.98);
  opacity: 0.9;
}

.label-btn-share svg {
  flex-shrink: 0;
}

/* ==========================================================================
   视图 C: 分享海报预览模态窗 (iOS 风格重构)
   (卡砖本体在上 + 居中代码标签在下面)
   ========================================================================== */
.share-poster-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.75);
  backdrop-filter: blur(25px);
  -webkit-backdrop-filter: blur(25px);
  z-index: 2200;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.25s ease, visibility 0.25s;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--sp-5);
  box-sizing: border-box;
  /* 海报内容高于视口时可上下滚动（flex + margin: auto 安全居中，不会裁掉两端） */
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

.share-poster-backdrop.active {
  opacity: 1;
  visibility: visible;
}

.share-poster-wrap {
  width: 100%;
  max-width: 330px;
  display: flex;
  flex-direction: column;
  align-items: center;
  /* margin: auto 在内容不超高时居中、超高时贴边可滚，避免 fixed 居中裁切 */
  margin: auto;
  transform: scale(0.94);
  transition: transform 0.3s cubic-bezier(0.34, 1.3, 0.64, 1);
}

.share-poster-backdrop.active .share-poster-wrap {
  transform: scale(1);
}

/* 海报主体：卡砖本体 + 标签卡片合体 (文字居中) */
/* ===== 9:16 竖版分享海报（品牌行 + 卡砖大图 + 精简存证） ===== */
.share-poster-card {
  width: 100%;
  /* 严格 9:16 比例（Story 版式），内部 flex 分配高度 */
  aspect-ratio: 9 / 16;
  background: var(--bg-card);
  border-radius: var(--r-2xl);
  overflow: hidden;
  box-shadow: none;
  border: var(--border-card);
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: var(--sp-7) var(--sp-5) var(--sp-4);
  box-sizing: border-box;
  text-align: center;
}

/* 顶部品牌行：官方 logo 居中 */
.sp-brand-row {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-shrink: 0;
}

.sp-logo {
  height: 15px;
  width: auto;
  display: block;
}

/* 卡砖大图区：占据海报主视觉（剩余高度自适应，图完整显示） */
.sp-brick-wrap {
  flex: 1;
  min-height: 0;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--sp-3) 0;
}

.sp-brick-img {
  max-width: 68%;
  max-height: 100%;
  object-fit: contain;
  /* 统一卡砖外轮廓：圆角比例 + 浅灰描边（用户 2026-10-15：含卡砖图的容器也要同步） */
  border: var(--brick-outline-w, 1px) solid var(--brick-outline, #D4D4D8);
  border-radius: var(--brick-radius, 7.6923% / 4.8485%);
}

/* 存证信息层级：eyebrow(类别) → 主标题(地点) → 副标题(卡砖名) → 底部归属(收藏者/时间/编号) */
.sp-info {
  width: 100%;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* 顶层眉题：认证类别，mono 小字距拉开，证书语言 */
.sp-eyebrow {
  font-family: var(--font-sans);
  font-size: var(--fs-3xs);
  font-weight: 600;
  letter-spacing: 2.4px;
  color: var(--color-tertiary-label);
  text-transform: uppercase;
  margin-bottom: 7px;
}

.sp-title {
  font-family: var(--font-sans);
  font-size: var(--fs-h1);
  font-weight: 800;
  letter-spacing: -0.03em;
  color: var(--ink-strong);
  margin: 0 0 5px;
  line-height: 1.02;
}

.sp-subtitle {
  font-family: var(--font-sans);
  font-size: var(--fs-cap);
  font-weight: 500;
  color: var(--color-secondary-label);
  letter-spacing: 0.2px;
}

/* 底部归属：收藏者 → 日期地点 → 存证编号（mono，像证书页脚） */
.sp-footer {
  width: 100%;
  flex-shrink: 0;
  margin-top: var(--sp-4);
  padding-top: var(--sp-3);
  border-top: var(--border-hair);
}

.sp-collected {
  font-family: var(--font-sans);
  font-size: var(--fs-note);
  font-weight: 500;
  color: var(--color-secondary-label);
}

.sp-collected span:last-child {
  font-weight: 700;
  color: var(--ink-strong);
}

.sp-meta {
  font-family: var(--font-sans);
  font-size: var(--fs-micro);
  color: var(--color-secondary-label);
  margin-top: 3px;
}

.sp-registry {
  font-family: var(--font-sans);
  font-size: var(--fs-2xs);
  font-weight: 600;
  letter-spacing: 1.6px;
  color: var(--color-tertiary-label);
  margin-top: 7px;
}

/* 海报标签区（旧版）已废弃：9:16 海报使用 sp-* 精简字段 */

/* 海报底部分享操作按键 (iOS 胶囊设计) */
.share-poster-actions {
  display: flex;
  gap: var(--sp-3);
  width: 100%;
  margin-top: var(--sp-4);
}

.share-action-btn-primary {
  flex: 1;
  height: var(--btn-h-sm);
  background: var(--bg-card);
  color: var(--color-label);
  border: var(--border-card);
  border-radius: var(--r-pill);
  font-family: var(--font-sans);
  font-size: var(--fs-sub);
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  cursor: pointer;
  box-shadow: none;
  transition: transform 0.12s;
}

.share-action-btn-primary:active {
  transform: scale(0.98);
}

.share-action-btn-close {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.18);
  color: #FFFFFF;
  border: 1px solid rgba(255, 255, 255, 0.3);
  font-size: var(--fs-title);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background-color 0.12s;
}

.share-action-btn-close:active {
  background: rgba(255, 255, 255, 0.3);
}

/* iOS Grouped List (Settings / Profile) */
.ios-grouped-card {
  background: var(--bg-card);
  border-radius: var(--radius-card);
  border: var(--border-card);
  overflow: hidden;
  margin-bottom: var(--sp-4);
  box-shadow: none;
}

.ios-cell {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--sp-3) var(--sp-4);
  border-bottom: var(--border-hair);
  font-family: var(--font-sans);
  font-size: var(--fs-sub);
  color: var(--color-label);
  transition: background-color 0.12s;
}

.ios-cell:last-child {
  border-bottom: none;
}

.ios-cell-title {
  font-weight: 500;
  color: var(--color-label);
}

.ios-cell-right {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  font-size: var(--fs-note);
  color: var(--ink-dim-2);
}

.ios-cell-arrow {
  color: var(--color-tertiary-label);
  font-size: var(--fs-h3);
  font-weight: 600;
  line-height: 1;
}

/* 全站方向 icon 统一：返回上一层同款细线 chevron（› / ‹ 家族，同字重） */
.dir-arrow {
  font-size: var(--fs-body);
  font-weight: 600;
  line-height: 1;
  transform: translateY(-1px);
}

/* ==========================================================================
   Store 购物车浮动按钮与抽屉及完整闭环链路
   ========================================================================== */
.store-floating-cart-btn {
  position: fixed;
  bottom: calc(68px + env(safe-area-inset-bottom, 0px));
  right: 20px;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--inv-bg);
  color: var(--inv-ink);
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 150;
  transition: transform 0.15s cubic-bezier(0.25, 1, 0.5, 1);
  box-shadow: none;
}

.store-floating-cart-btn:active {
  transform: scale(0.92);
}

.cart-badge-count {
  position: absolute;
  top: -2px;
  right: -2px;
  background: #C53C3C;
  color: var(--inv-ink);
  font-family: var(--font-sans);
  font-size: var(--fs-micro);
  font-weight: 700;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1.5px solid var(--inv-ink);
  box-sizing: border-box;
}

/* 购物车抽屉 (iOS Bottom Presentation Sheet) */
.cart-drawer-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: 2100;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.28s ease, visibility 0.28s;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}

.cart-drawer-backdrop.active {
  opacity: 1;
  visibility: visible;
}

.cart-drawer-panel {
  width: 100%;
  max-width: 480px;
  max-height: 82vh;
  background: var(--bg-card);
  border-top-left-radius: var(--r-2xl);
  border-top-right-radius: var(--r-2xl);
  display: flex;
  flex-direction: column;
  transform: translateY(100%);
  transition: transform 0.32s cubic-bezier(0.22, 1, 0.36, 1);
  box-sizing: border-box;
  overflow: hidden;
}

.cart-drawer-backdrop.active .cart-drawer-panel {
  transform: translateY(0);
}

.cart-drawer-header {
  padding: var(--sp-4) var(--sp-5) var(--sp-4) var(--sp-5);
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: var(--border-hair);
  flex-shrink: 0;
}

.pd-body {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  padding: 0 var(--sp-5) var(--sp-4) var(--sp-5);
}

.pd-bottom-actions {
  flex-shrink: 0;
  padding: var(--sp-3) var(--sp-5) calc(var(--sp-4) + env(safe-area-inset-bottom, 12px)) var(--sp-5);
  background: var(--bg-card);
  border-top: var(--border-hair);
  position: relative;
  z-index: 10;
}

.cart-drawer-title {
  font-size: var(--fs-title);
  font-weight: 700;
  color: var(--color-label);
}

.cart-drawer-items-list {
  flex: 1;
  overflow-y: auto;
  padding: var(--sp-4) var(--sp-5);
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
}

.cart-empty-state {
  padding: 40px var(--sp-5);
  text-align: center;
  color: var(--color-secondary-label);
  font-size: var(--fs-sub);
}

.cart-item-row {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding-bottom: var(--sp-3);
  border-bottom: 0.5px solid #F2F2F7;
}

.cart-item-img {
  width: 52px;
  height: 72px;
  border-radius: var(--r-2xs);
  object-fit: contain;
  flex-shrink: 0;
}

.cart-item-info {
  flex: 1;
}

.cart-item-title {
  font-size: var(--fs-sub);
  font-weight: 600;
  color: var(--ink-deep);
  line-height: 1.3;
}

.cart-item-edition {
  font-size: var(--fs-micro);
  color: var(--color-secondary-label);
  margin-top: 2px;
}

.cart-item-price {
  font-size: var(--fs-sub);
  font-weight: 700;
  color: var(--color-label);
  margin-top: var(--sp-1);
}

/* 购物袋行内 Commerce 状态：行小计 / 移除 / 预售与售罄标识（Store 改造） */
.cart-item-side {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 6px;
  flex-shrink: 0;
}

.cart-item-subtotal {
  font-size: var(--fs-note);
  font-weight: 700;
  color: var(--ink-deep);
}

.cart-item-remove {
  background: none;
  border: none;
  padding: 0;
  font-size: var(--fs-micro);
  font-weight: 600;
  letter-spacing: 1px;
  color: var(--color-secondary-label);
  cursor: pointer;
  text-transform: uppercase;
  transition: color 0.12s;
}

.cart-item-remove:active {
  color: var(--ink-deep);
}

.cart-item-flag {
  font-family: var(--font-mono);
  font-size: var(--fs-2xs);
  font-weight: 600;
  letter-spacing: 1px;
  color: var(--color-secondary-label);
  margin-top: 3px;
}

.cart-item-flag.flag-danger {
  color: #FF3B30;
}

.cart-item-off .cart-item-img {
  opacity: 0.45;
}

.cart-item-off .cart-item-title {
  color: var(--color-secondary-label);
}

.cart-empty-btn {
  margin-top: var(--sp-4);
  height: var(--btn-h-xs);
  padding: 0 var(--sp-5);
  border-radius: var(--r-pill);
  border: var(--border-card);
  background: transparent;
  font-size: var(--fs-cap);
  font-weight: 700;
  letter-spacing: 1px;
  color: var(--color-label);
  cursor: pointer;
  transition: background-color 0.12s;
}

.cart-empty-btn:active {
  background: var(--bg-secondary);
}

.cart-qty-controls {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
}

.cart-qty-btn {
  width: 26px;
  height: 26px;
  padding: 0;
  border-radius: 50%;
  border: var(--border-card);
  background: transparent;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-label);
  line-height: 0;
  cursor: pointer;
  transition: background-color 0.12s;
}

.cart-qty-btn svg {
  display: block;
}

.cart-qty-btn:active {
  background-color: var(--bg-secondary);
}

.cart-qty-num {
  font-size: var(--fs-note);
  font-weight: 600;
  min-width: 16px;
  text-align: center;
}

.cart-drawer-footer {
  padding: var(--sp-4) var(--sp-5) calc(var(--sp-4) + env(safe-area-inset-bottom, 12px)) var(--sp-5);
  border-top: var(--border-hair);
  background: var(--bg-card);
}

.cart-summary-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--sp-2);
  font-size: var(--fs-sub);
  color: var(--color-secondary-label);
}

.cart-total-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: var(--sp-3) 0 var(--sp-4) 0;
  font-size: var(--fs-title);
  font-weight: 700;
  color: var(--ink-deep);
}

.cart-checkout-btn {
  width: 100%;
  height: var(--btn-h);
  background: var(--inv-bg);
  color: var(--inv-ink);
  border: none;
  border-radius: var(--r-pill);
  font-size: var(--fs-body);
  font-weight: 700;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  transition: transform 0.12s;
}

.cart-checkout-btn:active {
  transform: scale(0.98);
}

.cart-checkout-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

/* 订单成功提示模态窗 (Full Store Loop Success Modal) */
.checkout-success-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  z-index: 2200;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.28s ease, visibility 0.28s;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--sp-6);
  box-sizing: border-box;
}

.checkout-success-backdrop.active {
  opacity: 1;
  visibility: visible;
}

.checkout-success-card {
  width: 100%;
  max-width: 360px;
  background: var(--bg-card);
  border-radius: var(--r-lg);
  padding: var(--sp-6) var(--sp-6);
  text-align: center;
  box-sizing: border-box;
}

.success-icon-badge {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--inv-bg);
  color: var(--inv-ink);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--fs-h2);
  margin: 0 auto var(--sp-4) auto;
}

.success-title {
  font-size: var(--fs-title);
  font-weight: 700;
  color: var(--ink-deep);
  margin-bottom: var(--sp-2);
}

.success-desc {
  font-size: var(--fs-note);
  color: var(--color-secondary-label);
  line-height: 1.5;
  margin-bottom: var(--sp-5);
}

.success-order-num {
  font-family: var(--font-sans);
  font-size: var(--fs-note);
  font-weight: 600;
  color: var(--color-label);
  background: var(--bg-secondary);
  padding: var(--sp-2) var(--sp-3);
  border-radius: var(--r-sm);
  display: inline-block;
  margin-bottom: var(--sp-5);
}

.success-close-btn {
  width: 100%;
  height: var(--btn-h-sm);
  border-radius: var(--r-pill);
  background: var(--inv-bg);
  color: var(--inv-ink);
  border: none;
  font-size: var(--fs-sub);
  font-weight: 600;
  cursor: pointer;
}

/* ==========================================================================
   桌面端展厅式重设计 (Desktop Exhibition ≥900px)
   手机端 (<900px) 一行不动，服务小程序；桌面走另一套编辑式版式
   骨架：顶栏 64px（logo 左 / 主菜单中 / 语言+购物袋+用户 右）+ 1440px 有限宽网格
   反馈：无阴影，悬停一律用位移 / 边框变深 / 透明度 / 底色微变
   ========================================================================== */
/* 桌面专属 DOM/JS 注入件在手机端一律隐藏（JS 注入不分视口，靠 CSS 收口） */
.desktop-nav-menu,
.desktop-nav-actions {
  display: none;
}

@media (min-width: 900px) {

  /* ---- 骨架：有限宽网格，左右 48px；小程序 chrome 隐藏（DOM 保留给小程序） ---- */
  .mobile-app-container {
    max-width: 1440px;
  }

  /* 手机端登录 chip 在桌面隐藏（桌面右上已有 .desktop-nav-login，避免重复） */


  .app-bottom-tabbar {
    display: none;
  }

  .app-screen-body {
    padding-bottom: 72px;
  }

  /* 顶栏：64px，完全透明（与移动端一致：无实底、无毛玻璃） */
  .app-top-header {
    height: 64px;
    padding: 0 48px;
    border-bottom: none;
    /* 桌面端同样 sticky 吸顶（用户要求 LOGO 始终置顶），不再 relative 随流 */
  }

  .dinerbox-brand-logo {
    height: 17px;
  }

  .desktop-nav-menu {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 36px;
  }

  .desktop-nav-link {
    font-size: var(--fs-cap);
    font-weight: 600;
    letter-spacing: 1px;
    color: var(--color-tertiary-label);
    text-decoration: none;
    transition: color 0.15s ease;
  }

  .desktop-nav-link:hover {
    color: var(--color-label);
  }

  .desktop-nav-link.active {
    color: var(--color-label);
  }

  .desktop-nav-actions {
    margin-left: 36px;
    display: flex;
    align-items: center;
    gap: var(--sp-5);
  }

  .desktop-nav-lang {
    background: transparent;
    border: 0.5px solid var(--line-mid);
    border-radius: var(--r-pill);
    height: 28px;
    padding: 0 var(--sp-3);
    font-family: var(--font-sans);
    font-size: var(--fs-cap);
    font-weight: 600;
    color: var(--color-label);
    cursor: pointer;
    transition: background-color 0.15s ease;
  }

  .desktop-nav-lang:hover {
    background-color: var(--bg-secondary);
  }

  .desktop-nav-cart {
    position: relative;
    width: 32px;
    height: 32px;
    box-sizing: border-box;
    border: 1.5px solid var(--line-mid);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-label);
    text-decoration: none;
    transition: background-color 0.15s ease, border-color 0.15s ease;
  }

  .desktop-nav-cart:hover {
    background-color: var(--bg-secondary);
    border-color: var(--ink-strong);
  }

  .desktop-cart-badge {
    position: absolute;
    top: -2px;
    right: -5px;
    min-width: 15px;
    height: 15px;
    padding: 0 var(--sp-1);
    border-radius: var(--r-pill);
    background: var(--inv-bg);
    color: var(--inv-ink);
    font-family: var(--font-sans);
    font-size: var(--fs-micro);
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
  }



  /* ---- 桌面弹窗：底部抽屉一律改为居中模态（缩放 + 淡入入场） ---- */
  .cart-drawer-backdrop,
  .nfc-scan-backdrop {
    align-items: center;
    padding: var(--sp-6);
    box-sizing: border-box;
  }

  .cart-drawer-panel {
    border-radius: var(--r-2xl);
    transform: translateY(24px) scale(0.96);
    opacity: 0;
    transition: transform 0.32s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.24s ease;
  }

  .cart-drawer-backdrop.active .cart-drawer-panel {
    transform: translateY(0) scale(1);
    opacity: 1;
  }

  .nfc-modal-grabber {
    display: none;
  }

  .nfc-scan-modal {
    border-radius: var(--r-2xl);
    transform: translateY(24px) scale(0.96);
    opacity: 0;
    transition: transform 0.36s cubic-bezier(0.32, 0.72, 0, 1), opacity 0.26s ease;
  }

  .nfc-scan-backdrop.active .nfc-scan-modal {
    transform: translateY(0) scale(1);
    opacity: 1;
  }

  /* ---- 首页 hero：左编辑式文案 + 右未解锁卡砖（约 68vh 通栏感） ---- */
  .page-home .app-screen-body,
  .page-home-unlocked .app-screen-body {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(300px, 420px);
    grid-template-areas:
      "user    brick"
      "title   brick"
      "nfc     brick"
      "band    band"
      "coll    coll";
    column-gap: clamp(48px, 6vw, 96px);
    align-content: start;
    padding-left: 48px;
    padding-right: 48px;
  }

  /* 打穿卡片容器：user-row 与 challenge 各自成 grid item */
  .page-home .home-profile-card,
  .page-home-unlocked .home-profile-card {
    display: contents;
  }

  .page-home .latest-moment-block,
  .page-home-unlocked .latest-moment-block {
    display: contents;
  }

  /* eyebrow：头像 + 名字 + 等级 */
  .page-home .profile-user-row,
  .page-home-unlocked .profile-user-row {
    grid-area: user;
    margin-top: 44px;
    gap: var(--sp-4);
  }

  .page-home .profile-avatar-circle,
  .page-home-unlocked .profile-avatar-circle {
    width: 54px;
    height: 54px;
    font-size: var(--fs-title);
  }

  .page-home .profile-user-name,
  .page-home-unlocked .profile-user-name {
    font-size: var(--fs-h3);
    letter-spacing: 0px;
  }

  .page-home .tier-badge {
    height: 20px;
    padding: 0 var(--sp-3);
    font-size: var(--fs-micro);
  }

  /* hero 大标题：LATEST MOMENT 编辑式放大 */
  .page-home .latest-moment-block .section-title-wrap,
  .page-home-unlocked .latest-moment-block .section-title-wrap {
    grid-area: title;
    padding: var(--sp-7) 0 0 0;
  }

  .page-home .latest-moment-block .section-main-title,
  .page-home-unlocked .latest-moment-block .section-main-title {
    font-size: clamp(44px, 5vw, 68px);
    font-weight: 800;
    letter-spacing: -0.03em;
    line-height: 1.02;
    max-width: 12ch;
  }

  .page-home .latest-moment-block .section-sub-title,
  .page-home-unlocked .latest-moment-block .section-sub-title {
    font-size: var(--fs-body);
    margin-top: var(--sp-4);
    letter-spacing: 0px;
  }

  .page-home .latest-moment-block .filter-pills-row,
  .page-home-unlocked .latest-moment-block .filter-pills-row {
    margin-top: var(--sp-6);
  }

  /* hero 右：未解锁卡砖（比例 208:330 不变，高度随视口） */
  .page-home .featured-card-wrapper,
  .page-home-unlocked .featured-card-wrapper {
    grid-area: brick;
    margin-top: 44px;
    padding: 0;
    justify-content: flex-end;
  }

  .page-home .featured-card-brick,
  .page-home-unlocked .featured-card-brick {
    width: auto;
    height: min(46vh, 480px);
    aspect-ratio: 208 / 330;
    transition: transform 0.25s cubic-bezier(0.25, 1, 0.5, 1);
  }

  .page-home .featured-card-brick img,
  .page-home-unlocked .featured-card-brick img {
    width: 100%;
    height: 100%;
  }

  .page-home .featured-card-brick:hover,
  .page-home-unlocked .featured-card-brick:hover {
    transform: translateY(-6px);
  }

  /* Tap NFC：左对齐编辑式 */
  .page-home .tap-nfc-btn-wrap,
  .page-home-unlocked .tap-nfc-btn-wrap {
    grid-area: nfc;
    align-self: start;
    align-items: flex-start;
    padding: 40px 0 0 0;
  }

  .page-home .tap-nfc-btn,
  .page-home-unlocked .tap-nfc-btn {
    width: auto;
    min-width: 204px;
    padding: 0 36px;
    transition: background-color 0.15s ease, transform 0.12s cubic-bezier(0.25, 1, 0.5, 1);
  }

  .page-home .tap-nfc-btn:hover,
  .page-home-unlocked .tap-nfc-btn:hover {
    background-color: var(--inv-bg);
  }

  /* 卡砖内嵌 Tap NFC：桌面卡砖放大后字号同步放大（≈0.0394×卡高，1.8vh 对应 46vh 卡高） */
  .page-home .brick-nfc-btn,
  .page-home-unlocked .brick-nfc-btn {
    font-size: clamp(13px, 1.8vh, 19px);
  }

  .page-home .tap-nfc-subtext,
  .page-home-unlocked .tap-nfc-subtext {
    font-size: var(--fs-note);
    margin-top: var(--sp-3);
    text-align: left;
  }

  /* 状态带：挑战进度横向长轨，上下细线通栏 */
  .page-home .challenge-progress-section,
  .page-home-unlocked .challenge-progress-section {
    grid-area: band;
    margin-top: 76px;
    padding: var(--sp-6) 0 var(--sp-6) 0;
    border-top: var(--border-hair);
    border-bottom: var(--border-hair);
    display: grid;
    grid-template-columns: minmax(240px, 340px) 1fr;
    grid-template-areas:
      "head track"
      "sub  sub";
    column-gap: 56px;
    row-gap: var(--sp-3);
    align-items: center;
  }

  .page-home .challenge-header-row,
  .page-home-unlocked .challenge-header-row {
    grid-area: head;
    font-size: var(--fs-sub);
    margin-bottom: 0;
  }

  .page-home .challenge-milestone-track-wrap,
  .page-home-unlocked .challenge-milestone-track-wrap {
    grid-area: track;
    margin: 0;
  }

  .page-home .challenge-subtitle-row,
  .page-home-unlocked .challenge-subtitle-row {
    grid-area: sub;
    font-size: var(--fs-note);
    margin-top: 0;
  }

  /* ---- 首页（未解锁）桌面：编辑式 hero 重构 ----
     左列：大标语 + Tap NFC 大按钮；右列：无框半圆仪表；
     全程 clamp(900→2560px) 平滑缩放；hero 区垫 WebGL 墨色流场底纹 */
  .page-home .app-screen-body {
    position: relative;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    grid-template-areas:
      "hero card"
      "nfc  card"
      "coll coll";
    column-gap: clamp(48px, 6.5vw, 128px);
  }

  /* 电脑版隐藏用户行（Hi, xxx + USER 徽章） */
  .page-home .profile-user-row {
    display: none;
  }

  /* 代码墙背景：fixed 铺满视口，透明度由 shader 控制——
     只有鼠标附近一圈代码显现（中心约 20%），其余全透明（preloader 同款代码雨）
     全站桌面页生效：未预置画布的页面由 hero-code-wall.js 自动创建 */
  .hero-code-canvas {
    display: block;
    position: fixed;
    inset: 0;
    width: 100vw;
    height: 100vh;
    height: 100dvh;
    z-index: 0;
    pointer-events: none;
  }

  /* 页面主体整体抬到代码墙之上（canvas 为 fixed 定位会盖住普通流内容） */
  .mobile-app-container {
    position: relative;
    z-index: 1;
  }

  /* 桌面首页 header：z-index 不再压到 1（fixed header 需保持 50 悬浮于照片之上） */

  /* 左侧 hero：标语替代 LATEST MOMENT 标题与副标题 */
  .page-home .latest-moment-block .section-title-wrap {
    grid-area: hero;
    margin-top: clamp(48px, 9.5vh, 104px);
    padding: 0;
  }

  .page-home .latest-moment-block .section-main-title,
  .page-home .latest-moment-block .section-sub-title {
    display: none;
  }

  .page-home .home-hero-slogan {
    display: block;
    font-family: var(--font-sans);
    font-size: clamp(52px, 7vw, 104px);
    font-weight: 800;
    letter-spacing: -0.03em;
    line-height: 0.98;
    color: var(--color-label);
    max-width: 10ch;
  }

  /* 标语打字机：打字中/打完后跟随一枚闪烁竖条光标（app.js playSloganTypewriter） */
  .page-home .home-hero-slogan.is-typing::after,
  .page-home .home-hero-slogan.is-typed::after {
    content: '';
    display: inline-block;
    width: 0.09em;
    height: 0.8em;
    margin-left: 0.07em;
    background: var(--color-label);
    vertical-align: -0.04em;
    animation: sloganCaretBlink 0.85s steps(1, end) infinite;
  }

  @keyframes sloganCaretBlink {

    0%,
    55% {
      opacity: 1;
    }

    56%,
    100% {
      opacity: 0;
    }
  }

  /* ABOUT US 入口卡（黑卡）：电脑版横跨整行新网格行，放大版式 */
  .about-entry-card {
    gap: var(--sp-5);
    grid-column: 1 / -1;
    margin-top: var(--sp-3);
    padding: var(--sp-6) var(--sp-7);
    border-radius: var(--radius-card);
    transition: transform 0.25s ease, box-shadow 0.25s ease;
  }

  .about-entry-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 18px 44px rgba(34, 34, 38, 0.18);
  }

  .about-entry-ico {
    width: 52px;
    height: 52px;
  }

  .about-entry-ico svg {
    width: 24px;
    height: 24px;
  }

  .about-entry-text {
    display: flex;
    flex-direction: column;
    gap: 5px;
  }

  .about-entry-title {
    font-size: clamp(24px, 2.3vw, 36px);
    font-weight: 800;
    letter-spacing: -0.03em;
    line-height: 1.05;
  }



  .about-entry-arrow {
    width: 40px;
    height: 40px;
    font-size: var(--fs-h3);
    transition: transform 0.25s ease;
  }

  .about-entry-card:hover .about-entry-arrow {
    transform: translateX(6px);
  }

  /* 电脑版隐藏 Tap NFC 下方说明文字 */
  .page-home .tap-nfc-subtext {
    display: none;
  }

  .page-home .featured-card-wrapper {
    display: none;
  }

  /* 仪表板块：去边框改编辑式——小字眉行 + 细线 + 半圆，白场留白承担分区 */
  .page-home .challenge-progress-section {
    grid-area: card;
    align-self: start;
    margin-top: clamp(48px, 9.5vh, 104px);
    padding: 0;
    border: none;
    border-radius: 0;
    display: block;
  }

  .page-home .challenge-header-row {
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: var(--fs-cap);
    font-weight: 600;
    letter-spacing: 1px;
    font-family: var(--font-sans);
    color: var(--color-tertiary-label);
    margin-bottom: clamp(var(--sp-5), 3vh, 36px);
  }

  /* 读数已落在半圆中央，标题行不再重复 38 / 100 */
  .page-home .challenge-header-row span:last-child {
    display: none;
  }

  .page-home .challenge-milestone-track-wrap {
    display: none;
  }

  .page-home .challenge-gauge-wrap {
    display: block;
    width: clamp(340px, 36vw, 620px);
    margin: 0 auto;
  }

  .page-home .challenge-subtitle-row {
    text-align: center;
    margin-top: clamp(var(--sp-4), 2.4vh, var(--sp-6));
    font-size: var(--fs-note);
    letter-spacing: 0px;
    color: var(--color-secondary-label);
  }

  /* Tap NFC：从手机小药丸升格为桌面主行动按钮（描边悬停反白） */
  .page-home .tap-nfc-btn-wrap {
    grid-area: nfc;
    align-self: start;
    align-items: flex-start;
    padding: clamp(36px, 6vh, 76px) 0 0 0;
  }

  .page-home .tap-nfc-btn {
    width: auto;
    min-width: clamp(224px, 19vw, 296px);
    height: clamp(48px, 5.4vh, 60px);
    padding: 0 clamp(var(--sp-7), 2.8vw, 48px);
    border: 1px solid var(--inv-bg);
    border-radius: var(--r-pill);
    font-size: var(--fs-note);
    letter-spacing: 1px;
    text-transform: uppercase;
    transition: background-color 0.18s ease, color 0.18s ease,
      transform 0.12s cubic-bezier(0.25, 1, 0.5, 1);
  }

  .page-home .tap-nfc-btn:hover {
    background: transparent;
    color: var(--inv-bg);
  }

  .gauge-dial {
    position: relative;
    width: 100%;
  }

  .gauge-svg {
    display: block;
    width: 100%;
    height: auto;
  }

  .gauge-track {
    fill: none;
    stroke: #E4E4E7;
    stroke-width: 10;
    stroke-linecap: round;
  }

  .gauge-fill {
    fill: none;
    stroke: var(--color-label);
    stroke-width: 10;
    stroke-linecap: round;
    stroke-dasharray: 282.74;
    stroke-dashoffset: calc(282.74 - 282.74 * var(--gauge-p, 0) / 100);
    transition: stroke-dashoffset 0.6s cubic-bezier(0.2, 0.8, 0.2, 1);
  }

  .gauge-tick {
    fill: var(--inv-ink);
    stroke: #D4D4D8;
    stroke-width: 2;
    /* 缩放原点必须锚定圆自身（fill-box）：若缺失会退化为 SVG (0,0)，
       悬停放大时圆漂移出指针范围 → hover 退出 → 回弹 → 再触发，形成闪烁循环 */
    transform-box: fill-box;
    transform-origin: center;
    transition: transform 0.28s cubic-bezier(0.25, 1, 0.5, 1), fill 0.2s ease,
      stroke 0.2s ease;
  }

  .gauge-tick.is-reached {
    fill: var(--color-label);
    stroke: var(--color-label);
  }

  /* 里程碑数字嵌在节点圆内 */
  .gauge-tick-node {
    cursor: pointer;
  }

  .gauge-tick-num {
    font-family: var(--font-mono);
    font-size: var(--fs-micro);
    font-weight: 600;
    letter-spacing: 1px;
    text-anchor: middle;
    dominant-baseline: central;
    fill: var(--color-tertiary-label);
    pointer-events: none;
    user-select: none;
  }

  .gauge-tick-node.is-reached .gauge-tick-num {
    fill: var(--inv-ink);
  }

  /* 节点悬停微交互：圆放大 + 数字点亮（无阴影，纯位移/填充变化） */
  .gauge-tick-node:hover .gauge-tick {
    transform: scale(1.22);
  }

  .gauge-tick-node:hover .gauge-tick-num {
    fill: var(--color-label);
  }

  /* 已达成（黑底）节点悬停时保持白字：上面的全局 hover 会染成 #222226，黑字落黑底不可见 */
  .gauge-tick-node.is-reached:hover .gauge-tick-num {
    fill: var(--inv-ink);
  }

  .gauge-readout {
    position: absolute;
    left: 50%;
    bottom: 19%;
    transform: translateX(-50%);
    display: flex;
    align-items: baseline;
    gap: var(--sp-1);
  }

  .gauge-num {
    font-size: clamp(60px, 6vw, 104px);
    font-weight: 700;
    letter-spacing: -0.03em;
    line-height: 1;
    color: var(--color-label);
  }

  .gauge-total {
    font-family: var(--font-mono);
    font-size: var(--fs-sub);
    font-weight: 600;
    letter-spacing: 1.2px;
    color: var(--color-tertiary-label);
  }

  /* 桌面端页脚：main 内 app-screen-body 之后的文档最底部一行，版权 + ICP 备案占位。
     抬到代码墙 canvas（fixed z-0）之上，左右 48px 与内容栅格对齐 */
  .page-home .desktop-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--sp-6) 48px var(--sp-7);
    border-top: var(--border-hair);
    font-family: var(--font-sans);
    font-size: var(--fs-micro);
    letter-spacing: 0.5px;
    color: var(--color-tertiary-label);
    position: relative;
    z-index: 1;
  }

  /* MY COLLECTION：画廊墙网格（悬停浮出信息，空槽位为加号砖） */
  .page-home .my-collection-section,
  .page-home-unlocked .my-collection-section {
    grid-area: coll;
    margin-top: 96px;
    /* 桌面画廊网格已自成节奏，取消移动端的「占满整屏」高度约束 */
    min-height: 0;
  }

  .page-home .my-collection-section .section-title-wrap,
  .page-home-unlocked .my-collection-section .section-title-wrap {
    padding: 0;
  }

  /* MY COLLECTION 与筛选条两端对齐（标题居左，筛选条居右） */
  .page-home .my-collection-section .section-title-wrap {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    column-gap: var(--sp-6);
    row-gap: var(--sp-3);
  }

  .page-home .my-collection-section .section-sub-title {
    order: 3;
    flex-basis: 100%;
    margin-top: 0;
  }

  .page-home .collection-carousel-scroll,
  .page-home-unlocked .collection-carousel-scroll {
    display: grid;
    /* 卡砖固定 208px 轨道（与移动端同尺寸），不随列数拉伸；不足处右侧留白 */
    grid-template-columns: repeat(auto-fill, 208px);
    gap: var(--sp-6);
    overflow: visible;
    padding: var(--sp-6) 0 0 0;
    cursor: default;
  }

  .page-home .collection-card-item,
  .page-home-unlocked .collection-card-item {
    position: relative;
    width: auto;
    height: auto;
    aspect-ratio: 208 / 330;
    scroll-snap-align: none;
  }

  .page-home .collection-card-item img,
  .page-home-unlocked .collection-card-item img {
    width: 100%;
    height: 100%;
  }

  .page-home .collection-card-item:hover,
  .page-home-unlocked .collection-card-item:hover {
    transform: translateY(-6px);
  }

  /* 悬停浮出：卡砖下缘浮现系列与年份 */
  .page-home .collection-card-item::after,
  .page-home-unlocked .collection-card-item::after {
    content: attr(data-label);
    position: absolute;
    left: 2px;
    right: 2px;
    bottom: -24px;
    font-family: var(--font-sans);
    font-size: var(--fs-micro);
    font-weight: 600;
    letter-spacing: 0.5px;
    color: var(--color-secondary-label);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    opacity: 0;
    transform: translateY(-4px);
    transition: opacity 0.2s ease, transform 0.2s cubic-bezier(0.25, 1, 0.5, 1);
    pointer-events: none;
  }

  .page-home .collection-card-item:hover::after,
  .page-home-unlocked .collection-card-item:hover::after {
    opacity: 1;
    transform: none;
  }

  .page-home .collection-card-placeholder,
  .page-home-unlocked .collection-card-placeholder {
    width: auto;
    height: auto;
    aspect-ratio: 208 / 330;
    scroll-snap-align: none;
  }

  .page-home .collection-card-placeholder:hover,
  .page-home-unlocked .collection-card-placeholder:hover {
    transform: translateY(-6px);
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.4);
  }

  .page-home .collection-empty-prompt,
  .page-home-unlocked .collection-empty-prompt {
    max-width: 660px;
    margin-left: auto;
    margin-right: auto;
  }

  /* ---- 其他页面保底（后续逐页重做；此处仅保持有限宽观感） ---- */
  .page-store .store-screen-body {
    padding-left: 48px;
    padding-right: 48px;
  }

  /* 桌面收藏卡 2×2 网格；展开票据时跨全宽 */
  .page-store .plans-container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--sp-4);
  }

  .page-store .plan-unit.expanded {
    grid-column: 1 / -1;
  }

  .page-store .store-products-grid {
    grid-template-columns: repeat(auto-fill, minmax(236px, 1fr));
    gap: var(--sp-4);
  }

  .store-floating-cart-btn {
    right: max(20px, calc((100vw - 1440px) / 2 + 20px));
  }

  .page-archive .app-screen-body,
  .page-checkout .app-screen-body,
  .page-auth .app-screen-body,
  .page-drawer .app-screen-body,
  .page-nfc .app-screen-body,
  .page-events .app-screen-body,
  .page-orders .app-screen-body,
  .page-info .app-screen-body,
  .page-address .app-screen-body,
  .page-terms .app-screen-body,
  .page-contact .app-screen-body,
  .page-milestones .app-screen-body {
    max-width: 660px;
    width: 100%;
    margin: 0 auto;
  }

  .page-account .account-screen-body {
    max-width: 720px;
    width: 100%;
    margin: 0 auto;
  }
}

/* ==========================================================================
   全局滚动条隐藏 (Global Scrollbar Suppression)
   交互逻辑以手机为准：滚动条不占显示空间，滚动位置仍可正常滚动
   ========================================================================== */
::-webkit-scrollbar {
  width: 0;
  height: 0;
  display: none;
}

* {
  scrollbar-width: none;
  -ms-overflow-style: none;
}

/* ==========================================================================
   等级色板与等级标签 (Tier Palette & Tier Badges)
   account 页权益卡 / 首页用户标签 颜色一一对应
   ========================================================================== */
:root {
  --tier-01: #9A9A93;
  --tier-02: #6F8FA7;
  --tier-03: #B0785C;
  --tier-04: #8A7190;
  --tier-05: #5C715E;
  --tier-po: #3F3F46;
}

.tier-badges {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-1);
  margin-top: var(--sp-1);
}

.tier-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-mono);
  font-size: var(--fs-3xs);
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0.6px;
  color: #FFFFFF;
  padding: var(--sp-1) var(--sp-2);
  border-radius: var(--r-pill);
}

/* 无任何称号时的默认徽章（USER / 普通用户） */
.tier-badge-default {
  background: var(--tier-01);
}

/* ==========================================================================
   子页面返回式头部 (Sub-page Back Header)
   用于 events / orders / personal / address / terms / contact 六个功能页
   ========================================================================== */
.subpage-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.subpage-back {
  display: flex;
  align-items: center;
  gap: var(--sp-1);
  text-decoration: none;
  color: var(--color-label);
}

.subpage-back-chevron {
  font-size: var(--fs-h2);
  line-height: 1;
  font-weight: 600;
  margin-top: -2px;
}

.subpage-back-title {
  font-size: var(--fs-title);
  font-weight: 700;
  letter-spacing: 0px;
}

/* 已登录用户名点击菜单（账户 / 登出）：锚定右上角小浮层，blur 渐显渐隐 */
.account-menu {
  position: fixed;
  z-index: 1300;
  min-width: 148px;
  padding: 6px;
  background: var(--bg-frosted-soft);
  -webkit-backdrop-filter: blur(25px) saturate(190%);
  backdrop-filter: blur(25px) saturate(190%);
  border: 0.5px solid var(--line-mid);
  border-radius: var(--r-md);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.14);
  opacity: 0;
  transform: translateY(-6px) scale(0.96);
  transition: opacity 0.2s ease, transform 0.2s cubic-bezier(0.32, 0.72, 0.24, 1);
}

.account-menu.open {
  opacity: 1;
  transform: translateY(0) scale(1);
}

.account-menu-item {
  display: block;
  width: 100%;
  text-align: left;
  padding: var(--sp-3) var(--sp-3);
  border: none;
  background: transparent;
  border-radius: var(--r-sm);
  font-family: inherit;
  font-size: var(--fs-sub);
  font-weight: 600;
  color: var(--color-label);
  cursor: pointer;
}

.account-menu-item:active {
  background: var(--bg-soft);
}

.account-menu-item:disabled {
  color: var(--color-tertiary-label);
  cursor: default;
}

/* ==========================================================================
   Account 子页面通用组件 (Events/Orders/Personal/Address/Terms/Contact)
   ========================================================================== */
.sub-strip {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-family: var(--font-sans);
  font-size: var(--fs-cap);
  font-weight: 600;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--ink-dim-2);
  margin-bottom: var(--sp-4);
}

.sub-strip .strip-meta {
  color: var(--color-secondary-label);
  font-weight: 600;
}

.sub-card {
  background: var(--bg-card);
  border: var(--border-card);
  border-radius: var(--radius-card);
  padding: var(--card-pad);
  margin-bottom: var(--sp-3);
}

.sub-chip {
  font-family: var(--font-mono);
  font-size: var(--fs-3xs);
  font-weight: 600;
  letter-spacing: 0.6px;
  padding: var(--sp-1) var(--sp-2);
  border-radius: var(--r-pill);
  white-space: nowrap;
}

.sub-chip.black {
  background: var(--inv-bg);
  color: var(--inv-ink);
}

.sub-chip.gray {
  background: var(--bg-secondary);
  color: var(--color-secondary-label);
}

.sub-btn.ghost {
  background: var(--bg-secondary);
  color: var(--color-label);
}

.sub-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.sub-mono {
  font-family: var(--font-mono);
  font-weight: 500;
}

.sub-body {
  padding: var(--sp-3) var(--gutter) calc(48px + env(safe-area-inset-bottom, 20px)) var(--gutter);
}

/* ==========================================================================
   页面切换过渡（全站统一）
   点击进入 = 新页原地渐显；离开 = 当前页渐隐（无位移，避免翻页感）
   ========================================================================== */
@keyframes nav-enter-fade {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

@keyframes nav-exit-fade {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
  }
}

.mobile-app-container.nav-anim-enter {
  animation: nav-enter-fade 0.32s ease-out both;
  will-change: opacity;
}

.mobile-app-container.nav-anim-exit {
  animation: nav-exit-fade 0.17s ease-in both;
  will-change: opacity;
}

@media (prefers-reduced-motion: reduce) {

  .mobile-app-container.nav-anim-enter,
  .mobile-app-container.nav-anim-exit {
    animation: none;
  }
}

/* ==========================================================================
   入口预加载过渡层 (Entry Preloader)
   进入 index 时满屏覆盖：白底灰字代码墙 + 居中白色 Box.svg + 底部进度线
   ========================================================================== */
.pl-stage {
  position: fixed;
  inset: 0;
  z-index: 9999;
  /* preloader 永远是品牌深灰黑底，与 box / 全站 #222226 黑键色一致：
     light mode 下也是黑底，造出「黑屏过渡 + 中心深色 box」的统一品牌入场 */
  background: #222226;
  opacity: 1;
  transition: opacity 0.34s ease;
}

/* 站内点回首页 / 浏览器后退：整层直接不显示，也不播动画 */
.pl-skip .pl-stage {
  display: none;
}

.pl-stage.is-done {
  opacity: 0;
  pointer-events: none;
}

.pl-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}

.pl-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* 白色 Box 始终居于页面正中，LOGO 挂在它正下方、不影响居中 */
.pl-box-wrap {
  position: relative;
}

.pl-box {
  width: min(46vw, 30vh);
  max-width: 260px;
  display: block;
  opacity: 0;
  transform: scale(0.92);
  animation: pl-box-in 0.62s cubic-bezier(0.22, 1, 0.36, 1) 0.75s forwards;
  /* SVG 本体填 #222226（夜间与代码墙同色隐身）；
     日间白墙需要白盒：brightness(0) 先压纯黑，invert(1) 再转纯白，
     在代码雨上留白色剪影（旧版「白色 Box.svg」设计的恢复，纯 CSS 日夜切换） */
  filter: brightness(0) invert(1);
}

@keyframes pl-box-in {
  from {
    opacity: 0;
    transform: scale(0.92);
  }

  to {
    opacity: 1;
    transform: scale(1);
  }
}

/* Box 正下方：LOGO —— 压在代码墙背景上（不在 Box 内），因此保持原生墨色，
   由深色模式统一反相成白标（见文件末尾 prefers-color-scheme 块） */
.pl-logo {
  position: absolute;
  left: 50%;
  top: calc(100% + clamp(18px, 3vh, 32px));
  transform: translate(-50%, 7px);
  width: min(30vw, 18vh);
  max-width: 156px;
  height: auto;
  display: block;
  opacity: 0;
  animation: pl-logo-in 0.6s cubic-bezier(0.22, 1, 0.36, 1) 1.05s forwards;
}

@keyframes pl-logo-in {
  from {
    opacity: 0;
    transform: translate(-50%, 7px);
  }

  to {
    opacity: 1;
    transform: translate(-50%, 0);
  }
}

/* 页面最底部：状态文字 + 满宽进度线 */
.pl-foot {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
}

.pl-status {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 var(--sp-5) var(--sp-3) var(--sp-5);
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  font-weight: 500;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--color-tertiary-label);
  opacity: 0;
  animation: pl-fade 0.5s ease 1.18s forwards;
}

@keyframes pl-fade {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

.pl-track {
  height: 1px;
  background: var(--line-tint);
  overflow: hidden;
}

.pl-fill {
  height: 100%;
  width: 0%;
  background: var(--inv-bg);
}

/* 深色模式：preloader 代码墙底色/字色由 js 侧（code-wall.js / preloader.js）按系统自动切换 */
/* ===== S3 touch targets: 44px invisible hotzone (visual size unchanged) ===== */
.receipt-pager-btn,
.ios-close-btn,
.pill-btn,
.pill-dropdown-btn,
.addr-action,
.track-action,
.copy-action,
.member-close-btn,
.subpage-back-chevron,
.tap-44,
.share-action-btn-close,
.sub-btn {
  position: relative;
}

.receipt-pager-btn::after,
.ios-close-btn::after,
.pill-btn::after,
.pill-dropdown-btn::after,
.addr-action::after,
.track-action::after,
.copy-action::after,
.member-close-btn::after,
.subpage-back-chevron::after,
.tap-44::after,
.share-action-btn-close::after,
.sub-btn::after {
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 44px;
  height: 44px;
}

/* ==========================================================================
   头像更换（Avatar Edit）— 可点击头像 + 相机角标 + iOS Action Sheet
   profile / personal 共用；预设配色字母头像与上传照片全站同步
   ========================================================================== */
.avatar-edit-wrap {
  position: relative;
  border: none;
  background: transparent;
  padding: 0;
  margin: 0;
  cursor: pointer;
  flex-shrink: 0;
  display: block;
  font-family: inherit;
}

.avatar-cam-badge {
  position: absolute;
  right: -2px;
  bottom: -2px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--color-label);
  color: var(--bg-canvas);
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid var(--bg-canvas);
  box-sizing: border-box;
  pointer-events: none;
}

.avatar-sheet-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.45);
  z-index: 1200;
  opacity: 0;
  pointer-events: none;
  visibility: hidden;
  transition: opacity 0.26s ease, visibility 0.26s ease;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}

.avatar-sheet-backdrop.open {
  opacity: 1;
  pointer-events: auto;
  visibility: visible;
}

.avatar-sheet {
  width: 100%;
  max-width: 720px;
  background: var(--bg-soft);
  border-radius: var(--radius-card) var(--radius-card) 0 0;
  padding: var(--sp-5) var(--sp-4) calc(var(--sp-4) + env(safe-area-inset-bottom, 20px)) var(--sp-4);
  box-sizing: border-box;
  transform: translateY(100%);
  transition: transform 0.32s cubic-bezier(0.32, 0.72, 0.24, 1);
}

.avatar-sheet-backdrop.open .avatar-sheet {
  transform: translateY(0);
}

.avatar-sheet-title {
  font-size: var(--fs-sub);
  font-weight: 600;
  color: var(--ink-dim-2);
  text-align: center;
  margin-bottom: var(--sp-4);
}

.avatar-preset-row {
  display: flex;
  justify-content: center;
  gap: var(--sp-3);
  margin-bottom: var(--sp-4);
}

.avatar-preset {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 2px solid transparent;
  font-family: var(--font-sans);
  font-size: var(--fs-sub);
  font-weight: 700;
  cursor: pointer;
  padding: 0;
  transition: transform 0.15s ease, border-color 0.15s ease;
  /* icon/字母统一圆心居中 */
  display: flex;
  align-items: center;
  justify-content: center;
}

.avatar-preset.active {
  border-color: var(--color-label);
}

/* 默认头像 icon 模式（无姓名时 DINERBOX 取景框）：圆形黑底 + 居中白标 */
[data-user-avatar].avatar-logo-mode {
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.avatar-preset svg {
  pointer-events: none;
}

.avatar-preset:active {
  transform: scale(0.92);
}

.avatar-sheet-group {
  background: var(--bg-card);
  border-radius: var(--radius-card);
  overflow: hidden;
  margin-bottom: var(--sp-3);
}

.avatar-sheet-btn {
  display: block;
  width: 100%;
  border: none;
  background: transparent;
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  color: var(--color-label);
  padding: var(--sp-4);
  text-align: center;
  cursor: pointer;
}

.avatar-sheet-btn+.avatar-sheet-btn {
  border-top: var(--border-hair);
}

.avatar-sheet-btn.bold {
  font-weight: 600;
}

.avatar-sheet-btn.danger {
  color: #B0785C;
}

/* ==========================================================================
   磨砂噪点质感 — 会员/身份卡（.mc-inner）与收藏卡（.plan-card）表面颗粒
   SVG feTurbulence 灰噪（saturate 0 去彩）低透明度叠加；父卡 overflow:hidden
   负责圆角裁剪，噪点层无需圆角；pointer-events:none 不挡卡面交互
   ========================================================================== */
.mc-inner {
  position: relative;
}

.mc-inner::after,
.plan-card::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 140px 140px;
  opacity: 0.1;
  pointer-events: none;
}

/* ==========================================================================
   深色模式完整适配（iOS 深色盘） — 第十四轮
   跟随系统 prefers-color-scheme：黑底白字、线条边框全部换色、
   icon 描边走变量自动跟随、反色控件组（黑底白字 → 白底黑字）、
   品牌黑标反相成白标。浅色模式一切不变（:root 仍声明 only light）。
   ========================================================================== */
@media (prefers-color-scheme: dark) {

  /* How to Enjoy It 入口卡：夜间不再反白，透明底 + 主题文字色（与上方用户卡同风格）；
     图标 / 标题 / 箭头全部脱离反色变量，否则夜间黑字压暗底隐形 */
  .about-entry-card {
    background: transparent;
    color: var(--color-label);
    /* 夜间不再反白 → 回归普通卡片描边色，与其它卡片同一条线 */
    border-color: var(--line);
  }

  .about-entry-card .about-entry-ico svg,
  .about-entry-card .about-entry-title,
  .about-entry-card .about-entry-arrow {
    color: var(--color-label);
  }



  :root {
    color-scheme: dark;

    /* 背景组：画布全黑，卡片逐级抬高 */
    --bg-canvas: #222226;
    --bg-canvas-rgb: 34, 34, 38;
    --bg-card: #1C1C1E;
    --bg-secondary: #1C1C1E;
    --bg-tertiary: #2C2C2E;
    --bg-soft: #141416;
    --bg-inset: rgba(255, 255, 255, 0.06);
    --bg-inset-strong: rgba(255, 255, 255, 0.1);
    --bg-frosted: rgba(28, 28, 30, 0.94);
    --bg-tabbar: #1C1C1E;
    --bg-frosted-soft: rgba(28, 28, 30, 0.85);

    /* 文字组 */
    --color-label: #F2F2F7;
    --color-secondary-label: #98989F;
    --color-tertiary-label: #636366;
    --ink-strong: #FFFFFF;
    --ink-deep: #A1A1AA;
    --ink-deep-2: #C7C7CC;
    --ink-dim-2: #8E8E93;
    --ink-mute-2: #98989F;
    --ink-alpha: rgba(255, 255, 255, 0.72);

    /* 线条组：分隔线/描边/边框全部换深色系 */
    --ios-separator: rgba(84, 84, 88, 0.6);
    --line: #3F3F46;
    --line-tertiary: #2C2C2E;
    --line-strong: #52525B;
    --line-heavy: #636366;
    --line-soft: rgba(255, 255, 255, 0.08);
    --line-tint: rgba(84, 84, 88, 0.4);
    --line-mid: rgba(84, 84, 88, 0.6);
    --line-grabber: rgba(118, 118, 128, 0.5);
    --wave-line: rgba(255, 255, 255, 0.22);

    /* 反色控件组：浅色的黑底白字在深色下整体反转为白底黑字 */
    --inv-bg: #F2F2F7;
    --inv-bg-pure: #FFFFFF;
    --inv-ink: #0A0A0C;
    --inv-ink-soft: rgba(0, 0, 0, 0.55);
    --inv-tint: rgba(0, 0, 0, 0.1);
    --inv-tint-weak: rgba(0, 0, 0, 0.25);
    --inv-tint-weak-2: rgba(0, 0, 0, 0.35);
    --inv-tint-500: rgba(0, 0, 0, 0.5);

    /* 品牌彩色：iOS 深色盘提亮版 */
    --ios-red: #FF453A;
    --ios-blue: #0A84FF;
    --ios-green: #30D158;

    /* 常暗面：深色下抬高一档，避免与 --bg-canvas(#222226) 同色而隐形 */
    --dark-bg: #2C2C2E;
    --dark-bg-deep: #141416;

    /* 票据纸：深色下变暗，与画布(#222226)拉开一档 */
    --paper: #1C1C1E;

    /* 等级徽章底：深色下提亮，避免中灰压在深底上看不清 */
    --tier-01: #636366;
    --tier-po: #2C2C2E;
  }

  /* 定向覆盖：极少数硬编码浅色值（底栏描边 / 行分隔 / 按压底 / 仪表刻度） */
  .ios-form-bottom-bar,
  .label-bottom-bar {
    border-top-color: #2C2C2E;
  }

  /* TabBar：深色模式下字/icon 强制纯白（用户要求"深色时白色"） */
  .app-bottom-tabbar .tabbar-item,
  .app-bottom-tabbar .tabbar-item.active {
    color: #FFFFFF;
  }

  /* 夜间模式：所有板块的描边全部去掉（用户要求）——
     包括卡片、输入框、按钮、list-item 等一切带 border 的元素 */
  *,
  *::before,
  *::after {
    border-color: transparent !important;
  }

  /* 例外：NFC 雷达靠描边呈现扩散动画，上面的全局规则会把它清成透明 →
     深色模式下雷达"消失"。这里显式还原（卡面雷达 / NFC 弹窗雷达 / 成功态雷达） */
  .brick-radar-wave {
    border-color: rgba(34, 34, 38, 0.32) !important;
  }

  .radar-wave {
    border-color: var(--wave-line) !important;
  }

  .nfc-radar-pulse-box.success .radar-wave {
    border-color: rgba(52, 199, 89, 0.4) !important;
  }

  .cart-item-row {
    border-bottom-color: #2C2C2E;
  }



  .gauge-track {
    stroke: #3A3A3C;
  }

  .gauge-tick {
    stroke: #5A5A5E;
  }

  /* 红底徽标：文字随 --inv-ink 会翻成黑字压红底，强制保持白字 */
  .profile-status-badge,
  .cart-badge-count {
    color: #FFFFFF;
  }

  /* 品牌黑标反相成白标（页头 / 开场 / 海报）；产品图 card_*.svg 保持原样
     .pl-logo 也在这里反相：它压在代码墙背景上（Box.svg 之外），深色墙才需要白标 */
  .dinerbox-brand-logo,
  .pl-logo,
  .sp-logo {
    filter: invert(1);
  }

  /* LATEST MOMENT 卡砖（card_locked.svg 已重画：浅灰底 + 黑大矩形 + 白圆角 box + 黑徽章）；
     light / dark 都用原色，无需滤镜 */
  .featured-card-brick img {
    /* 无滤镜 */
  }

  /* 开场 Box.svg 本身已填系统黑 #222226，与代码墙底色同一个黑，夜间隐身；
     日间白墙由 .pl-box 基础规则的 brightness(0) invert(1) 滤镜转纯白（见 4550 行），
     此处必须还原为无滤镜。原先的 grayscale(1) brightness(0.16) 会把它压成另一种深灰，不可用 */
  .pl-box {
    filter: none;
  }
}


/* ---------------------------------------------------------------------------
   ICP / 公网安备 备案号条（由 js/app.js 的 injectIcpFooter() 自动注入 body 末尾）

   设计原则：
   - 不抢眼：极小字号 + 中性色 + 底部居中
   - 不挡内容：pointer-events: auto on links, no overlay
   - 兼容底部 fixed 浮层（购物袋 drawer / 收银台 backdrop）不与备案条冲突
   - 中文/英文站点都显示中文（合规要求）
   --------------------------------------------------------------------------- */
.db-icp-footer {
  position: relative;
  z-index: 1;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 14px;
  padding: var(--sp-4) var(--sp-3) calc(var(--sp-4) + env(safe-area-inset-bottom, 0px));
  margin-top: var(--sp-6);
  border-top: var(--border-hair);
  font-family: var(--font-sans);
  font-size: 11px;
  letter-spacing: 0.3px;
  color: var(--color-tertiary-label);
  text-align: center;
  line-height: 1.6;
}

.db-icp-link {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: var(--color-tertiary-label);
  text-decoration: none;
  transition: color 0.15s ease;
}

.db-icp-link:hover,
.db-icp-link:focus-visible {
  color: var(--color-secondary-label);
}

.db-icp-glyph {
  flex-shrink: 0;
  opacity: 0.7;
}

.db-icp-text {
  font-feature-settings: "tnum";
}

.db-icp-link--alt {
  padding-left: 14px;
  border-left: 1px solid var(--line);
}

/* 部分页面（如首页）已经有 .desktop-footer（© + 旧占位），避免重复显示备案条 */
.page-home .db-icp-footer {
  margin-top: var(--sp-2);
  border-top: none;
  padding-top: var(--sp-2);
  font-size: 10px;
}

/* ==========================================================================
   NFC 订单门禁失败弹窗 + 收藏卡砖编号标签（2026-10-15）
   弹窗容器由 js/app.js 的 ensureNfcFailModal() 注入，全站共用一份。
   ========================================================================== */
.nfc-fail-backdrop {
  position: fixed;
  inset: 0;
  z-index: 10050;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--sp-5);
  background: rgba(0, 0, 0, 0.44);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.22s ease, visibility 0.22s ease;
}

.nfc-fail-backdrop.open {
  opacity: 1;
  visibility: visible;
}

.nfc-fail-card {
  width: min(360px, 100%);
  background: var(--bg-card);
  color: var(--color-label);
  border: var(--bw) solid var(--line);
  border-radius: var(--r-lg);
  padding: var(--sp-6) var(--sp-5) var(--sp-5);
  text-align: center;
  font-family: var(--font-sans);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.24);
  transform: translateY(10px) scale(0.98);
  transition: transform 0.24s cubic-bezier(0.25, 1, 0.5, 1);
}

.nfc-fail-backdrop.open .nfc-fail-card {
  transform: none;
}

.nfc-fail-glyph {
  width: 46px;
  height: 46px;
  margin: 0 auto var(--sp-4);
  display: flex;
  align-items: center;
  justify-content: center;
  border: var(--bw) solid var(--line-heavy);
  border-radius: 50%;
  font-size: 22px;
  font-weight: 700;
  color: var(--ink-strong);
}

.nfc-fail-title {
  font-size: var(--fs-title);
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--ink-strong);
}

.nfc-fail-text {
  margin: var(--sp-3) 0 0;
  font-size: var(--fs-sub);
  line-height: 1.55;
  color: var(--color-secondary-label);
}

.nfc-fail-meta {
  margin: var(--sp-3) 0 0;
  font-size: var(--fs-micro);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-tertiary-label);
}

.nfc-fail-actions {
  margin-top: var(--sp-5);
  display: flex;
  gap: var(--sp-3);
}

.nfc-fail-btn {
  flex: 1;
  height: var(--btn-h-sm);
  border-radius: var(--btn-radius);
  font-family: inherit;
  font-size: var(--fs-sub);
  font-weight: 600;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
}

.nfc-fail-btn.primary {
  background: var(--ink-strong);
  color: var(--color-white);
  border: var(--bw) solid var(--ink-strong);
}

.nfc-fail-btn.ghost {
  background: transparent;
  color: var(--ink-strong);
  border: var(--bw) solid var(--line-heavy);
}

.nfc-fail-btn:active {
  transform: scale(0.98);
}

/* 收藏卡砖：给编号标签提供定位上下文 */
.collection-card-item {
  position: relative;
}

/* 已删除（2026-10-16）：死规则 `.collection-card-item .collection-brick-edition`
   —— 用户要求去掉卡砖右下角的版数胶囊，js/app.js 已不再渲染该元素（全站 0 个），
   这条定位/胶囊样式已无任何引用，按「没有接入的旧样式一律清理」移除。 */

/* --------------------------------------------------------------------------
   MY COLLECTION 无图卡砖：用户要求「没有卡砖时不要用任何图片占位」——
   没有真图就只渲染文字（砖名 + 编号），不再放 card_locked 之类的占位图。
   -------------------------------------------------------------------------- */
.collection-card-item--noart {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 14px 12px;
  border: 1px solid var(--brick-outline, #D4D4D8);
  border-radius: 7.6923% / 4.8485%;
  background: transparent;
  box-sizing: border-box;
  text-align: center;
}

.collection-card-item--noart .collection-noart-name {
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--ink-strong);
  line-height: 1.3;
  word-break: break-word;
}

/* ==========================================================================
   统一卡砖外轮廓（用户 2026-10-15）
   —— activation 里的卡砖外框是 rx=16 / 宽 208.156 的玻璃描边（描边宽 1.4）。
   按用户要求：**所有卡砖**（activation / MY COLLECTION / store）统一用同一套外轮廓，
   描边改为浅灰色。
   圆角用百分比表达：7.6923% / 4.8485% —— 在 208:330 的比例下正好等于 rx=16（圆形角）。
   ========================================================================== */
:root {
  --brick-outline: #D4D4D8;
  --brick-outline-w: 1px;
  /* 统一卡砖圆角比例：activation 卡砖外框 rx=16 / 宽 208.156，竖向 16/330 */
  --brick-radius: 7.6923% / 4.8485%;
  /* 卡砖标准宽高比（208.156 : 330）——容器保持这个比例，上面的百分比才是正圆角 */
  --brick-aspect: 208.156 / 330;
}

.featured-card-brick,
.collection-card-item {
  border: var(--brick-outline-w) solid var(--brick-outline) !important;
  border-radius: 7.6923% / 4.8485% !important;
  overflow: hidden;
}

.featured-card-brick img,
.collection-card-item img {
  border-radius: 0 !important;
}



/* ==========================================================================
   头像 6 色（用户 2026-10-15：头像里的 box 不要只有黑白，要 6 个各自不同的色，
   可与卡片底色互补 / 饱和度不同 / 对比度强烈）
   与卡片 6 档一一对应：0/1=极简黑白，2=冷蓝，3=暖橙红，4=深绿，5=暖金，6=深紫。
   全部按 WCAG 校验：最低 4.5:1（金色/绿色用深字，其余用白字）。
   用法：给头像元素加 class av-1 … av-6（JS 按档位切换）。
   ========================================================================== */
/* 头像元素：各页在自身 <style> 里也定义了 .account-avatar/.profile-avatar-circle，
   页面内联样式排在外部 css 之后会盖掉这里 → 用 !important 保住 6 色切换 */
[data-user-avatar],
.account-avatar,
.profile-avatar-circle,
.personal-avatar {
  background: var(--av-bg, var(--inv-bg)) !important;
  color: var(--av-ink, var(--inv-ink)) !important;
  transition: background-color 0.4s ease, color 0.4s ease;
}

.av-1 { --av-bg: #111113; --av-ink: #FFFFFF; }   /* 黑 21.0:1 */
.av-2 { --av-bg: #2F6BFF; --av-ink: #FFFFFF; }   /* 蓝 4.6:1  */
.av-3 { --av-bg: #C2410C; --av-ink: #FFFFFF; }   /* 橙红（压深到达 AA）*/
.av-4 { --av-bg: #0E6B4A; --av-ink: #EAFBF3; }   /* 深绿 6.6:1 */
.av-5 { --av-bg: #F5D97A; --av-ink: #111113; }   /* 暖金 12.9:1 */
.av-6 { --av-bg: #73537C; --av-ink: #F3EEFF; }   /* 深紫 10.7:1 */


/* ==========================================================================
   全站统一进度条（用户 2026-10-17）
   —— 参考 TOP MOMENTS 深色板的语言：深底 + 细圆角轨道 + 填充 + **一个当前点** + 等宽数字。
   —— 取消所有数量刻度节点：里程碑节点（0/25/50/75/100）与桌面半圆仪表刻度全部退役。
   纯 CSS 实现：复用既有 .challenge-track / .challenge-fill / .challenge-header-row，
   用 .challenge-fill::after 画「当前点」，因此无需改任何页面的 HTML。
   ========================================================================== */

/* ① 刻度节点 / 仪表：全站退役 */
.milestone-node,
.challenge-milestone-track-wrap .milestone-node,
.gauge-svg,
.gauge-readout,
.gauge-tick-node,
.challenge-track-node {
  display: none !important;
}

/* ② 轨道：细、圆角、深色板上的低对比底 */
.challenge-track,
.mc-progress {
  position: relative !important;
  height: 4px !important;
  border-radius: 999px !important;
  background: var(--dbx-track, rgba(255, 255, 255, 0.22)) !important;
  overflow: visible !important;
}

/* ③ 填充：随进度增长，末端带「当前点」 */
.challenge-fill,
.mc-progress-fill {
  position: relative !important;
  display: block !important;
  height: 100% !important;
  border-radius: 999px !important;
  background: var(--dbx-fill, currentColor) !important;
  transition: width 0.6s cubic-bezier(0.25, 1, 0.5, 1) !important;
}

/* ④ 当前点（小圆点版）：profile.html 会员卡 .mc-progress-fill 沿用 9px 纯点 */
.mc-progress-fill::after {
  content: '';
  position: absolute;
  top: 50%;
  right: -4.5px;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--dbx-dot, currentColor);
  box-shadow: 0 0 0 3px var(--dbx-dot-halo, rgba(0, 0, 0, 0.14));
  transform: translateY(-50%);
  pointer-events: none;
}

/* ④ 当前点（带数字的圆牌）：用户 2026-10-16 要求「进度条的圆点里面显示当前数字」。
   数字取自 .challenge-fill 的 data-count，由 js/app.js 的 updateChallengeProgressUI()、
   challenge_progress 同步分支和 playChallengeIntro() 重置处写入；
   HTML 里预置 data-count="0"，避免首帧出现空圆牌。
   底色/字色用 --inv-bg / --inv-ink 这一对，浅色深色主题自动翻转。 */
.challenge-fill::after {
  content: attr(data-count);
  position: absolute;
  top: 50%;
  /* 用户 2026-10-16：圆点**左边缘**与进度条左端对齐。
     设 right: -直径（16px）时，0% 处圆点左边缘正好落在轨道左端 x=0。
     早前用的是 -半径（半直径），那是让**圆心**对齐，圆点会往左溢出半个身位。 */
  /* 2026-10-17 根据用户反馈：icon 太大；缩到 16x8 横板，radius 2px（已与进度条左边缘对齐：小尺寸 + centering） */
  left: max(0px, calc(100% - 8px));  /* left-edge pin when progress small so no overflow left of bar */
  width: 16px;
  height: 8px;
  border-radius: 2px;
  background: var(--inv-bg);
  box-shadow: 0 0 0 3px var(--dbx-dot-halo, rgba(0, 0, 0, 0.14));
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  color: var(--inv-ink);
  font-family: var(--font-mono);
  font-size: 8px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}

/* 圆牌直径 16px + 3px 光晕 = 22px，包裹层给到 22px 才刚好不被挤。
   （初版 26px 圆牌 + 32px 包裹层 → 用户两次反馈「圆点太大」，26px → 20px → 16px。） */
.challenge-milestone-track-wrap {
  height: 22px;
}

/* 首页会员卡压缩高度（2026-10-16 用户反馈「高度可以矮一点」）。
   原 156px 的构成里，有 24px 是可以省掉的空气：
     标题行 margin-bottom 8 + 轨道包裹层上下各 8 = 24px —— 轨道本体只有 4px，
     外面却包着 26px 的层再各留 8px，标题与轨道之间实际空了 16px。
   收紧后 132px（-15%），头像与文字尺寸都不动，视觉重心不变。 */
.home-profile-card {
  padding: var(--sp-4) var(--sp-4) var(--sp-4);
}

.home-profile-card .challenge-progress-section {
  margin-top: var(--sp-3);
}

.home-profile-card .challenge-header-row {
  margin-bottom: 4px;
}

.home-profile-card .challenge-milestone-track-wrap {
  margin-top: 4px;
  margin-bottom: 4px;
}

/* ⑤ 数字：等宽、与板式一致（现在显示的就是「当前收集数 / 总数」） */
.challenge-header-row,
.gauge-readout,
.mc-num {
  font-family: var(--font-mono) !important;
  font-variant-numeric: tabular-nums !important;
  letter-spacing: 0.02em !important;
}

/* ⑥ 深色板上的进度条配色（TOP MOMENTS 那种深底语言） */
.topmoments-board .challenge-track,
.pd-sheet .challenge-track {
  --dbx-track: rgba(255, 255, 255, 0.20);
}