/* ==========================================================================
   CC号商 · 售后指南 — 统一设计系统
   theme.css  |  六个页面共用，改这一处 = 全站生效
   --------------------------------------------------------------------------
   目录
   01 设计令牌    02 基础重置    03 页面背景    04 版面骨架
   05 顶栏        06 页面头部    07 卡片        08 列表行
   09 快捷格      10 步骤        11 提示块      12 按钮
   13 分段控件    14 标签        15 媒体        16 弹窗
   17 页脚        18 工具类      19 降级与适配
   20 液态玻璃 · 镜面高光边（务必放在最后）
   ========================================================================== */

/* ============================ 01 设计令牌 ============================ */
:root {
  /* 版面宽度：两种，按内容性质取，不再各页乱写 */
  --measure-page: 720px;   /* 首页——快捷格需要横向空间 */
  --measure-read: 640px;   /* 教程/阅读页——控制行长，读着舒服 */
  --gutter: 16px;

  /* 间距（8pt 体系） */
  --s1: 4px;  --s2: 8px;  --s3: 12px; --s4: 16px;
  --s5: 20px; --s6: 24px; --s7: 32px; --s8: 40px;

  /* 圆角 */
  --r-sm: 10px; --r-md: 14px; --r-lg: 18px; --r-xl: 24px; --r-pill: 999px;

  /* 文字层级 */
  --fs-display: 30px;   /* 页面大标题 */
  --fs-title: 22px;     /* 头部标题 */
  --fs-head: 17px;      /* 卡片标题 / 列表主文案 */
  --fs-body: 15px;      /* 正文 */
  --fs-sub: 13.5px;     /* 辅助说明 */
  --fs-cap: 12px;       /* 小标签 */

  /* 语义色 —— 浅色主题 */
  --text-1: #16161a;                 /* 一级：标题 */
  --text-2: #46464e;                 /* 二级：正文（白底 9.1:1） */
  /* 三级文字：#636366 而非 #6c6c70 —— 卡片透出底色后，#6c6c70 会掉到 4.3:1 跌破 AA。
     这是卡片透明度能往下走的前提。 */
  --text-3: #636366;

  --accent: #007aff;
  --accent-deep: #0062cc;
  /* 主按钮填充：#007aff 上白字仅 4.02:1（17px 粗体够不到"大字"门槛，需 4.5:1）。
     压深到 rgb(0,100,214) 且 90% 不透明，白字 5.5:1，仍留 10% 透光做玻璃感。 */
  --btn-primary: rgba(0, 100, 214, 0.80);
  --accent-soft: #e8f1ff;

  /* soft 色一律用不透明合成色：半透明暖色叠在冷色渐变上会发浑出脏色。
     直接用最终色值，卡片内 / 渐变上都呈现同一种观感。
     --ok 取 #1f7a35 而非 iOS 的 #34c759：后者配浅绿底只有 3.96:1，正文级文字不过 AA。 */
  --ok: #1f7a35;      --ok-soft: #e6f6eb;
  --warn: #9a4a00;    --warn-soft: #fcf1de;
  --danger: #d70015;  --danger-soft: #fdeaea;

  /* ---- 液态玻璃材质 ----
     三层结构：
       ① backdrop-filter 本体（模糊 + 提饱和 + 微提亮）
       ② ::before 镜面高光边（mask 渐变描边，左上受光）
       ③ inset 内高光 + 冷色焦散投影，制造"玻璃有厚度"
     关键：浅色底上纯白高光边是看不见的（对照实验台实测），
     所以浅色模式的边缘靠 --rim-line 的暗色描边来定义，
     白亮线只保留在上沿 —— 这正是 iOS 液态玻璃的自适应逻辑。 */
  --glass-blur: 28px;
  --glass-sat: 1.9;
  --glass-bright: 1.05;
  --glass: rgba(255, 255, 255, 0.58);        /* 浮动层：吸顶导航 */
  /* 卡片 .66：原本是 .78，那是在快捷格还刷白底的前提下定的。
     现在快速解答已经是一块块真玻璃，卡片若还停在 .78 就显得发死，
     两种材质并排能看出来不是一套。降到 .66，缺的透光交给它本来就有的
     28px 模糊 —— 模糊够重，正文对比度不受影响，也不会把整页染花。 */
  --glass-strong: rgba(255, 255, 255, 0.66);
  /* 分段控件选中丸：轨道现在自带 .34 白纱，丸子若还是 .50 就只差 .16，
     选中态读不出来。提到 .74 —— 它自己带 backdrop-filter，玻璃感来自那层模糊
     和内高光，不靠透明度；和轨道之间有 .40 的落差，选中位置一眼可辨。 */
  --glass-pill: rgba(255, 255, 255, 0.74);
  --glass-float: rgba(255, 255, 255, 0.74);  /* 弹窗：焦平面，比卡片实一点 */
  --glass-solid: rgba(255, 255, 255, 0.90);  /* 不支持模糊时的实底 */
  --glass-nav-scrolled: rgba(255, 255, 255, 0.80); /* 滚动吸住：有渐隐条兜底，不必做到全实 */
  --glass-track: rgba(118, 118, 128, 0.12);
  --glass-edge: rgba(255, 255, 255, 0.72);
  --hairline: rgba(60, 60, 67, 0.10);
  --tile-bg: rgba(255, 255, 255, 0.46);

  /* 镜面高光边 */
  --rim-line: rgba(12, 26, 54, 0.14);
  --rim-top: rgba(255, 255, 255, 0.98);
  --rim-mid: rgba(255, 255, 255, 0.32);
  --rim-bottom: rgba(255, 255, 255, 0.68);

  /* 内高光 */
  --inner-top: rgba(255, 255, 255, 0.95);
  --inner-bottom: rgba(255, 255, 255, 0.30);
  --inner-shade: rgba(18, 32, 60, 0.10);   /* 下沿内侧微暗 = 玻璃厚度 */

  /* 焦散投影：玻璃下方透出的冷色光斑 */
  --caustic: rgba(70, 120, 255, 0.16);

  /* 页面底色 */
  /* 底色必须"有颜色"，否则 62% 白叠纯白还是白，玻璃等于不存在。
     这是液态玻璃成立的前提：背景得先有色可透。 */
  --bg-base: #d5e3f7;
  --bg-top: #eaf4ff;
  --bg-mid: #e4eefb;
  /* 光晕加强：玻璃下面必须有饱和的颜色，才透得出液态感 */
  /* 顶部与边缘给足颜色（浮动控件在这里，玻璃才看得出），
     中部刻意留淡，保证大面积卡片不被染色 */
  --glow-1: rgba(0, 110, 255, 0.42);
  --glow-2: rgba(160, 70, 235, 0.30);
  --glow-3: rgba(70, 190, 255, 0.30);
  --glow-4: rgba(255, 120, 185, 0.20);

  /* 投影三级 */
  --sh-1: 0 1px 2px rgba(16, 24, 40, 0.04), 0 4px 12px rgba(16, 24, 40, 0.05);
  --sh-2: 0 2px 6px rgba(16, 24, 40, 0.05), 0 10px 26px rgba(16, 24, 40, 0.07);
  --sh-3: 0 18px 44px rgba(16, 24, 40, 0.14);
  --sh-accent: 0 8px 20px rgba(0, 122, 255, 0.24);

  --ease: cubic-bezier(0.2, 0.8, 0.3, 1);
  --spring: cubic-bezier(0.34, 1.42, 0.5, 1);   /* 按下/抬起的果冻回弹 */
}

/* 深色主题 —— 跟随系统 */
@media (prefers-color-scheme: dark) {
  :root {
    --text-1: #f2f2f7;
    --text-2: #c3c3cc;
    --text-3: #9a9aa5;

    --accent: #0a84ff;
    --accent-deep: #409cff;
    --btn-primary: rgba(10, 118, 235, 0.78);
    --accent-soft: #16273f;

    --ok: #56d47a;      --ok-soft: #142c1d;
    --warn: #ffb340;    --warn-soft: #33260f;
    --danger: #ff6961;  --danger-soft: #33191a;

    /* 深色底：玻璃本体更透，边缘改用亮线（深色底上亮边才看得见） */
    --glass-blur: 30px;
    --glass-sat: 1.8;
    --glass-bright: 1.12;
    --glass: rgba(24, 26, 34, 0.55);
    --glass-strong: rgba(24, 26, 34, 0.62);
    /* 深色下选中丸走"提亮"而非"压深"：轨道本身已经暗，
       再暗一层就分不出选中态了，所以用低透明度白提起来。 */
    --glass-pill: rgba(255, 255, 255, 0.16);
    --glass-float: rgba(26, 28, 36, 0.76);
    --glass-solid: rgba(24, 26, 34, 0.90);
    --glass-nav-scrolled: rgba(24, 26, 34, 0.82);
    --glass-track: rgba(120, 120, 128, 0.24);
    --glass-edge: rgba(255, 255, 255, 0.10);
    --hairline: rgba(255, 255, 255, 0.10);
    --tile-bg: rgba(255, 255, 255, 0.04);

    --rim-line: rgba(255, 255, 255, 0.16);
    --rim-top: rgba(255, 255, 255, 0.42);
    --rim-mid: rgba(255, 255, 255, 0.09);
    --rim-bottom: rgba(255, 255, 255, 0.26);

    --inner-top: rgba(255, 255, 255, 0.14);
    --inner-bottom: rgba(255, 255, 255, 0.05);
    --inner-shade: rgba(0, 0, 0, 0.34);
    --caustic: rgba(60, 110, 255, 0.30);

    --bg-base: #090b11;
    --bg-top: #161b2b;
    --bg-mid: #0d1119;
    --glow-1: rgba(10, 132, 255, 0.28);
    --glow-2: rgba(175, 82, 222, 0.22);
    --glow-3: rgba(90, 200, 250, 0.14);
    --glow-4: rgba(255, 120, 190, 0.14);

    --sh-1: 0 1px 2px rgba(0, 0, 0, 0.30), 0 4px 12px rgba(0, 0, 0, 0.24);
    --sh-2: 0 2px 6px rgba(0, 0, 0, 0.30), 0 10px 26px rgba(0, 0, 0, 0.30);
    --sh-3: 0 18px 44px rgba(0, 0, 0, 0.50);
    --sh-accent: 0 8px 20px rgba(10, 132, 255, 0.30);
  }
}

/* ============================ 02 基础重置 ============================ */
*, *::before, *::after { box-sizing: border-box; }

* { margin: 0; padding: 0; }

html {
  height: 100%;
  /* 必须给根元素自己的背景色：否则 body 的背景会被提升到 canvas，
     渐变只按视口高度绘制一次，长页面底部会露出一条纯色接缝 */
  background-color: var(--bg-base);
  -webkit-text-size-adjust: 100%;   /* 取代 user-scalable=no，允许用户缩放 */
  text-size-adjust: 100%;
  scroll-behavior: smooth;
}

html, body {
  /* clip 不产生滚动容器，因此不会破坏 position:sticky；hidden 作老浏览器兜底 */
  overflow-x: hidden;
  overflow-x: clip;
  max-width: 100%;
}

body {
  min-height: 100%;
  color: var(--text-1);
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "PingFang SC",
               "HarmonyOS Sans SC", "Source Han Sans SC", "Noto Sans SC",
               "Microsoft YaHei", "Helvetica Neue", Arial, sans-serif;
  font-size: var(--fs-body);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-variant-numeric: tabular-nums;
}

a { color: inherit; text-decoration: none; }
button, input, textarea, select { font: inherit; color: inherit; }
button { background: none; border: none; cursor: pointer; }
img, video { display: block; max-width: 100%; }

/* 键盘可达性：统一焦点环 */
:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: var(--r-sm);
}
/* 卡片与视频框是 overflow:hidden，向外偏移的焦点环会被裁得只剩一条边：
   贴边的列表行、视频封面改为向内描边 */
.row:focus-visible,
.video-wrap :focus-visible { outline-offset: -3px; }

/* ============================ 03 页面背景 ============================ */
/* 固定背景避免长页面滚动时出现接缝；渐变层先铺底，壁纸再以低对比度叠加，
   让主题色和玻璃卡片仍然清晰。浅色/深色各自加柔和色罩，不额外模糊整屏以减轻移动端绘制负担。 */
body::before,
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -2;
  pointer-events: none;
}
body::before {
  background:
    radial-gradient(75% 50% at 0% 0%, var(--glow-1), transparent 70%),
    radial-gradient(65% 45% at 100% 2%, var(--glow-2), transparent 70%),
    radial-gradient(70% 50% at 100% 100%, var(--glow-3), transparent 72%),
    radial-gradient(60% 45% at 0% 82%, var(--glow-4), transparent 70%),
    linear-gradient(180deg, var(--bg-top) 0%, var(--bg-mid) 48%, var(--bg-base) 100%);
}
body::after {
  z-index: -1;
  background:
    linear-gradient(180deg,
      rgba(250, 252, 255, 0.54) 0%,
      rgba(244, 248, 255, 0.66) 42%,
      rgba(229, 239, 253, 0.80) 100%),
    url("wall-light.webp") center 10% / cover no-repeat;
}
/* 宽屏下 cover 会裁掉更多纵向画面，略向下取景，避免背景焦点贴在屏幕顶缘。 */
@media (orientation: landscape) {
  body::after { background-position: center top, center 18%; }
}
@media (prefers-color-scheme: dark) {
  body::after {
    background-image:
      linear-gradient(180deg,
        rgba(9, 11, 17, 0.66) 0%,
        rgba(9, 11, 17, 0.78) 48%,
        rgba(9, 11, 17, 0.90) 100%),
      url("wall-dark.webp");
  }
}

body {
  background-color: transparent;
  background-image: none;
}
/* ============================ 04 版面骨架 ============================ */
.page {
  width: 100%;
  max-width: var(--measure-page);
  margin: 0 auto;
  padding: var(--s5) var(--gutter) var(--s8);
  /* viewport-fit=cover 下内容会铺进刘海与 Home 指示条区域：左右、底部各让出安全区 */
  padding-left: max(var(--gutter), env(safe-area-inset-left));
  padding-right: max(var(--gutter), env(safe-area-inset-right));
  padding-bottom: calc(var(--s8) + env(safe-area-inset-bottom));
}
.page--read { max-width: var(--measure-read); }

/* ============================ 05 顶栏 ============================ */
/* 毛玻璃吸顶胶囊：长教程滚动时始终能一键返回 */
.navbar {
  position: sticky;
  top: var(--s2);
  z-index: 40;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: var(--s2);
  padding: var(--s2) var(--s3);
  margin-bottom: var(--s5);
  border-radius: var(--r-pill);
  background: var(--glass);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat)) brightness(var(--glass-bright));
  backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat)) brightness(var(--glass-bright));
  border: 0.5px solid var(--rim-line);
  box-shadow:
    0 1px 1px rgba(16, 24, 40, 0.04),
    0 8px 22px rgba(16, 24, 40, 0.08),
    0 18px 40px -14px var(--caustic),
    inset 0 1px 0 var(--inner-top),
    inset 0 -1px 0 var(--inner-bottom);
  transition: background-color 0.3s var(--ease), box-shadow 0.3s var(--ease);
}

/* 页面一滚动，玻璃变实：模拟 iOS「有内容压过来时提高不透明度保可读性」 */
.navbar.is-scrolled {
  background: var(--glass-nav-scrolled);
  box-shadow:
    0 1px 1px rgba(16, 24, 40, 0.05),
    0 12px 30px rgba(16, 24, 40, 0.12),
    0 22px 48px -16px var(--caustic),
    inset 0 1px 0 var(--inner-top),
    inset 0 -1px 0 var(--inner-bottom);
}

.navbar__back,
.navbar__act {
  display: inline-flex;
  align-items: center;
  gap: var(--s2);
  height: 34px;
  padding: 0 var(--s3);
  border-radius: var(--r-pill);
  font-size: var(--fs-sub);
  font-weight: 600;
  color: var(--accent);
  transition: background 0.16s var(--ease);
}
/* 顶部渐隐条：内容滚近吸顶栏时柔化掉，
   否则胶囊上方那条缝隙里会露出一截没被处理过的生文字，很毛糙。
   只给有吸顶栏的阅读页挂（首页 .page 没有导航，不需要）。 */
.page--read::after {
  content: "";
  position: fixed;
  top: 0; left: 0; right: 0;
  height: 64px;
  z-index: 30;                 /* 低于导航栏(40)，高于正文 */
  pointer-events: none;
  -webkit-backdrop-filter: blur(7px);
  backdrop-filter: blur(7px);
  -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 44%, transparent 100%);
          mask-image: linear-gradient(180deg, #000 0%, #000 44%, transparent 100%);
}

.navbar__back { justify-self: start; }
.navbar__act  { justify-self: end; }
.navbar__back:hover, .navbar__act:hover { background: var(--accent-soft); }
.navbar__back:active, .navbar__act:active { background: var(--accent-soft); transform: scale(0.97); }
.navbar__back i, .navbar__act i { font-size: 12px; }
.navbar__act i { font-size: 13px; }

.navbar__title {
  grid-column: 2;
  font-size: var(--fs-head);
  font-weight: 600;
  color: var(--text-1);
  white-space: nowrap;
}
/* 无右侧按钮时保持标题居中 */
.navbar__spacer { grid-column: 3; }

/* ============================ 06 页面头部 ============================ */
/* 左对齐，不用居中——居中是小站最容易显旧的排版 */
.hero { padding: var(--s2) var(--s1) var(--s6); }

.hero__icon {
  width: 54px;
  height: 54px;
  display: grid;
  place-items: center;
  margin-bottom: var(--s4);
  border-radius: var(--r-md);
  background: linear-gradient(160deg, #4da2ff 0%, var(--accent) 100%);
  color: #fff;
  font-size: 23px;
  box-shadow: var(--sh-accent), inset 0 1px 0 rgba(255, 255, 255, 0.4);
}
.hero__icon--ok     { background: linear-gradient(160deg, #5ad97e, #248a3d); box-shadow: 0 8px 20px rgba(36, 138, 61, 0.26), inset 0 1px 0 rgba(255,255,255,.4); }
.hero__icon--danger { background: linear-gradient(160deg, #ff6b60, #d70015); box-shadow: 0 8px 20px rgba(215, 0, 21, 0.26), inset 0 1px 0 rgba(255,255,255,.4); }

.hero__title {
  font-size: var(--fs-display);
  font-weight: 700;
  letter-spacing: -0.022em;
  line-height: 1.22;
  text-wrap: balance;
}
.hero__sub {
  margin-top: var(--s2);
  font-size: var(--fs-body);
  color: var(--text-2);
  line-height: 1.6;
  text-wrap: pretty;
}

/* 品牌头部（首页） */
/* 字标：和子页 .hero__icon 同尺寸同圆角，首页与子页的头部是同一个骨架 */
.brand__mark {
  width: 54px;
  height: 54px;
  display: grid;
  place-items: center;
  margin-bottom: var(--s4);
  border-radius: var(--r-md);
  background: linear-gradient(150deg, #5aa9ff 0%, #007aff 52%, #5856d6 100%);
  color: #fff;
  font-size: 19px;
  font-weight: 800;
  letter-spacing: -0.01em;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.45),
    inset 0 -2px 6px -2px rgba(0, 20, 80, 0.35),
    var(--sh-accent);
}
.brand__name {
  font-size: 32px;
  font-weight: 700;
  letter-spacing: -0.024em;
  line-height: 1.15;
}
.brand__tag {
  margin-top: var(--s2);
  font-size: var(--fs-sub);
  color: var(--text-2);
  letter-spacing: 0.01em;
}

/* ============================ 07 卡片 ============================ */
.card {
  margin-bottom: var(--s5);
  border-radius: var(--r-lg);
  background: var(--glass-strong);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat)) brightness(var(--glass-bright));
  backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat)) brightness(var(--glass-bright));
  border: 0.5px solid var(--rim-line);
  /* inset 顺序有讲究：先暗带后亮线。
     下沿内侧那一圈微暗是"玻璃厚度"，没有它，上沿的白色高光在浅色底上完全读不出来。 */
  box-shadow:
    inset 0 -1.5px 5px -1px var(--inner-shade),
    0 1px 1px rgba(16, 24, 40, 0.03),
    0 10px 26px rgba(16, 24, 40, 0.08),
    0 26px 56px -18px var(--caustic),
    inset 0 1px 0 var(--inner-top);
  overflow: hidden;
  position: relative;
}
.card:last-child { margin-bottom: 0; }

/* 裸卡：容器自己不刷玻璃底，只当栅格与间距的骨架。
   用在「一卡片全是快捷格」的场景 —— 格子本来就是一块块独立玻璃，
   底下再垫一层 0.78 的白，格子透出来的就只是那层白，
   玻璃感被吃掉。去掉底，格子才真的浮在背景上。 */
.card--bare {
  background: transparent;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  border-color: transparent;
  box-shadow: none;
  /* 格子自己有 1px 高光边，容器再来一圈就是双框 */
  overflow: visible;
  /* 翻开格子的玻璃：此时模糊到的是真背景 */
  --tile-bdf: blur(20px) saturate(1.7) brightness(1.06);
  --tile-bg: rgba(255, 255, 255, 0.52);
}
@media (prefers-color-scheme: dark) {
  /* 深色底上 0.52 的白会直接糊成一片亮块，玻璃改走暗色填充。
     填充 .60：壁纸的水青、紫红丝带滑到格子底下时，三级文字实测最低 4.6:1，
     再透就跌破 AA；缺的透光交给模糊，玻璃感不靠这 8% */
  .card--bare {
    --tile-bg: rgba(28, 30, 40, 0.60);
    --tile-bdf: blur(22px) saturate(1.6) brightness(1.1);
  }
}
/* 双类名提权：第 20 节的 .card::before 写在文件末尾，同优先级时后者胜，
   单写 .card--bare::before 会被覆盖，裸卡左上角就多出一道弧形高光线 */
.card.card--bare::before { content: none; }
/* 容器不再刷底，格子要顶到内容列边缘，和上面几张卡片同一条左对齐线 */
.card--bare > .tiles { padding-left: 0; padding-right: 0; padding-bottom: 0; }
/* 裸卡没有白底托着，小标题得自己站得住，所以提到二级文字色。
   左侧保留 16px 缩进：和普通卡片里的小标题（如「应用下载」）落在同一条内容线上——
   iOS 分组列表的组标题也是对齐单元格内容，而不是对齐卡片外沿 */
.card--bare .card__hd { color: var(--text-2); padding-right: 0; }

.card__hd {
  display: flex;
  align-items: center;
  gap: var(--s2);
  padding: var(--s4) var(--s4) var(--s2);
  font-size: var(--fs-cap);
  font-weight: 600;
  letter-spacing: 0.06em;
  color: var(--text-3);
  text-transform: uppercase;
}
.card__hd i { font-size: 12px; color: var(--accent); }

.card__bd { padding: var(--s3) var(--s4) var(--s4); }
.card__bd--flush { padding: 0 0 var(--s2); }
.card__bd > * + * { margin-top: var(--s4); }

/* 卡片内的普通段落 */
.card p { color: var(--text-2); line-height: 1.68; }
.card p strong { color: var(--text-1); font-weight: 600; }

/* ============================ 08 列表行 ============================ */
.row {
  display: flex;
  align-items: center;
  gap: var(--s3);
  min-height: 62px;
  padding: var(--s3) var(--s4);
  position: relative;
  transition: background 0.15s var(--ease);
}
.row + .row::before {
  content: "";
  position: absolute;
  top: 0; left: var(--s4); right: 0;
  height: 0.5px;
  background: var(--hairline);
}
/* 悬停效果只给真有指针的设备：触屏点过之后 :hover 会一直粘着，
   关掉弹窗、或从子页返回时，那一行还亮着。按下反馈交给 :active */
@media (hover: hover) {
  .row:hover { background: var(--accent-soft); }
}
.row:active { background: var(--accent-soft); }

.row__ico {
  flex: 0 0 auto;
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border-radius: var(--r-sm);
  color: #fff;
  font-size: 17px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.28);
}
.row__ico--blue   { background: linear-gradient(160deg, #4da2ff, #007aff); }
.row__ico--purple { background: linear-gradient(160deg, #c07af0, #af52de); }
.row__ico--green  { background: linear-gradient(160deg, #5ad97e, #28a745); }
.row__ico--orange { background: linear-gradient(160deg, #ffb340, #ff8a00); }

/* 行也可以是 <button>（打开弹窗的入口）：按钮默认收缩包裹、文字居中，这里拉回整行左对齐 */
button.row { width: 100%; text-align: left; }

.row__txt { flex: 1; min-width: 0; }
.row__title { display: block; font-size: var(--fs-head); font-weight: 600; color: var(--text-1); }
.row__sub {
  display: block;
  margin-top: 1px;
  font-size: var(--fs-sub);
  color: var(--text-3);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.row__chev { flex: 0 0 auto; color: var(--text-3); opacity: 0.55; font-size: 13px; }

/* ============================ 09 快捷格 ============================ */
.tiles {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--s3);
  padding: var(--s1) var(--s4) var(--s4);
}

.tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;    /* 1 行 / 2 行文案都垂直居中，整行不错位 */
  gap: var(--s2);
  min-height: 128px;
  padding: var(--s4) var(--s3);
  text-align: center;
  border-radius: var(--r-md);
  position: relative;
  /* 默认（格子叠在已经刷了玻璃底的卡片上）刻意不开 backdrop-filter：
     再模糊一次只是模糊"已模糊的东西"，视觉收益为零却多 6 个渲染表面。
     若父卡片是 .card--bare（自己不刷底），则由它翻开下面两个令牌，
     让格子自己成为玻璃面 —— 这样模糊到的是真背景，不是卡片的白。 */
  background: var(--tile-bg);
  -webkit-backdrop-filter: var(--tile-bdf, none);
  backdrop-filter: var(--tile-bdf, none);
  border: 0.5px solid var(--rim-line);
  box-shadow:
    inset 0 -1px 3px -1px var(--inner-shade),
    0 1px 1px rgba(16, 24, 40, 0.03),
    0 6px 16px rgba(16, 24, 40, 0.06),
    inset 0 1px 0 var(--inner-top);
  color: var(--text-1);
  transition: transform 0.3s var(--spring), box-shadow 0.22s var(--ease), background 0.22s var(--ease);
}
/* 上浮只在有指针的设备上做：触屏的 :hover 会粘住，从子页返回时格子还悬在半空 */
@media (hover: hover) {
  .tile:hover {
    transform: translateY(-3px);
    background: var(--glass-strong);
    box-shadow:
      0 2px 4px rgba(16, 24, 40, 0.04),
      0 14px 30px rgba(16, 24, 40, 0.12),
      0 26px 52px -18px var(--caustic),
      inset 0 1px 0 var(--inner-top);
  }
}
/* 按下回弹：弹簧缓动做出果冻感，不是生硬缩放 */
.tile:active { transform: translateY(-1px) scale(0.965); transition-duration: 0.08s; }

.tile__ico {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border-radius: 11px;
  background: var(--accent-soft);
  color: var(--accent);
  font-size: 17px;
}
.tile__label {
  font-size: var(--fs-body);
  font-weight: 600;
  line-height: 1.35;
  text-wrap: balance;
}
.tile__hint { font-size: var(--fs-cap); color: var(--text-3); line-height: 1.35; }

/* 必看项：用颜色表达"重要"，不是装饰 */
.tile--danger .tile__ico { background: var(--danger-soft); color: var(--danger); }
.tile--danger .tile__label { color: var(--danger); }

/* 格子也可以是 <button>（弹窗入口），和 <a> 格子撑满同样宽度 */
button.tile { width: 100%; }

/* 角标：取代「【必看】」塞进标题的写法——标题保持短，重要性交给角标。
   底色写死 #d70015 而不走 --danger：深色模式的 --danger 是浅红，白字压不住 */
.tile__badge {
  position: absolute;
  top: var(--s2);
  right: var(--s2);
  padding: 1px 7px;
  border-radius: var(--r-pill);
  font-size: 11px;
  font-weight: 700;
  line-height: 18px;
  letter-spacing: 0.04em;
  color: #fff;
  background: #d70015;
  box-shadow: 0 2px 6px rgba(215, 0, 21, 0.28);
}

/* ============================ 10 步骤 ============================ */
.step + .step { margin-top: var(--s6); padding-top: var(--s6); border-top: 0.5px solid var(--hairline); }

.step__hd { display: flex; align-items: center; gap: var(--s3); margin-bottom: var(--s3); }

.step__num {
  flex: 0 0 auto;
  width: 27px;
  height: 27px;
  display: grid;
  place-items: center;
  border-radius: 9px;
  background: linear-gradient(160deg, #4da2ff, var(--accent));
  color: #fff;
  font-size: var(--fs-sub);
  font-weight: 700;
  box-shadow: 0 4px 10px rgba(0, 122, 255, 0.26);
}

.step__title { font-size: var(--fs-head); font-weight: 600; line-height: 1.35; }
.step__body { color: var(--text-2); font-size: var(--fs-body); line-height: 1.68; }
.step__body + .step__body { margin-top: var(--s3); }

/* 有序条目：把长段落拆成可扫读的列表 */
.bullets { list-style: none; }
.bullets > li {
  position: relative;
  padding-left: var(--s5);
  color: var(--text-2);
  line-height: 1.68;
}
.bullets > li + li { margin-top: var(--s3); }
.bullets > li::before {
  content: "";
  position: absolute;
  left: 5px; top: 0.65em;
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--accent);
  opacity: 0.55;
}
.bullets strong { color: var(--text-1); font-weight: 600; }

/* ============================ 11 提示块 ============================ */
/* 统一取代 emoji + 彩色 span 的混排 */
.callout {
  display: flex;
  gap: var(--s3);
  padding: var(--s4);
  border-radius: var(--r-md);
  font-size: var(--fs-sub);
  line-height: 1.65;
  color: var(--text-2);
  background: var(--accent-soft);
  border: 0.5px solid transparent;
}
.callout i { flex: 0 0 auto; margin-top: 2px; font-size: 15px; color: var(--accent); }
.callout strong { color: var(--text-1); font-weight: 600; }
.callout + .callout { margin-top: var(--s3); }

.callout--info   { background: var(--accent-soft); }
.callout--ok     { background: var(--ok-soft); }
.callout--ok i   { color: var(--ok); }
.callout--warn   { background: var(--warn-soft); }
.callout--warn i { color: var(--warn); }
.callout--danger { background: var(--danger-soft); }
.callout--danger i { color: var(--danger); }
.callout--danger strong { color: var(--danger); }

/* ============================ 12 按钮 ============================ */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s2);
  height: 48px;
  padding: 0 var(--s5);
  border-radius: var(--r-md);
  position: relative;
  font-size: var(--fs-head);
  font-weight: 600;
  transition: transform 0.16s var(--ease), box-shadow 0.16s var(--ease), background 0.16s var(--ease);
}
.btn i { font-size: 15px; }
.btn:active { transform: scale(0.985); }

/* 主按钮 = 有色液态玻璃（iOS 26 的 prominent 按钮就是这个做法）。
   填充 80% 不透明：再透白字就压不住照片了（实测门槛），
   剩下的 20% 透光交给 backdrop-filter 模糊，玻璃感来自这层模糊而非透明度。 */
.btn--primary {
  background: var(--btn-primary);
  color: #fff;
  -webkit-backdrop-filter: blur(16px) saturate(1.8) brightness(1.1);
          backdrop-filter: blur(16px) saturate(1.8) brightness(1.1);
  border: 0.5px solid rgba(255, 255, 255, 0.30);
  box-shadow:
    inset 0 1.5px 0 rgba(255, 255, 255, 0.34),   /* 顶部内高光 */
    inset 0 -2px 6px -2px rgba(0, 20, 60, 0.45), /* 下沿厚度 */
    0 2px 6px rgba(0, 40, 110, 0.16),
    0 12px 28px rgba(0, 80, 200, 0.34),
    0 22px 48px -16px rgba(0, 100, 255, 0.42);
}
.btn--primary:hover {
  box-shadow:
    inset 0 1.5px 0 rgba(255, 255, 255, 0.42),
    inset 0 -2px 6px -2px rgba(0, 20, 60, 0.45),
    0 2px 6px rgba(0, 40, 110, 0.18),
    0 16px 34px rgba(0, 80, 200, 0.40),
    0 28px 60px -18px rgba(0, 100, 255, 0.50);
}

/* 危险色主按钮：停服、终止类动作。底色写死和 .tile__badge 同一支红，
   不跟 --danger 走——深色模式下 --danger 是浅红，白字压不住。 */
.btn--danger {
  background: linear-gradient(160deg, rgba(228, 32, 46, 0.92), rgba(186, 6, 22, 0.92));
  box-shadow:
    inset 0 1.5px 0 rgba(255, 255, 255, 0.34),
    inset 0 -2px 6px -2px rgba(60, 0, 6, 0.45),
    0 2px 6px rgba(110, 0, 12, 0.16),
    0 12px 28px rgba(200, 16, 32, 0.32),
    0 22px 48px -16px rgba(255, 60, 70, 0.40);
}
.btn--danger:hover {
  box-shadow:
    inset 0 1.5px 0 rgba(255, 255, 255, 0.42),
    inset 0 -2px 6px -2px rgba(60, 0, 6, 0.45),
    0 2px 6px rgba(110, 0, 12, 0.18),
    0 16px 34px rgba(200, 16, 32, 0.38),
    0 28px 60px -18px rgba(255, 60, 70, 0.48);
}

.btn--ghost {
  background: var(--glass-float);
  color: var(--text-1);
  border: 0.5px solid var(--rim-line);
  box-shadow:
    0 1px 2px rgba(16, 24, 40, 0.04),
    0 6px 16px rgba(16, 24, 40, 0.07),
    inset 0 1px 0 var(--inner-top);
  -webkit-backdrop-filter: blur(18px) saturate(var(--glass-sat));
  backdrop-filter: blur(18px) saturate(var(--glass-sat));
}
.btn--ghost:hover { background: var(--glass-solid); }

.btn--block { display: flex; width: 100%; }
.btn-row { display: grid; gap: var(--s3); }

/* ============================ 13 分段控件 ============================ */
.segmented {
  display: flex;
  gap: var(--s1);
  padding: var(--s1);
  margin-bottom: var(--s5);
  border-radius: var(--r-md);
  /* 轨道不能只有中性灰：0.12 的灰几乎不挡光，未选中那半会直接露出背景插画，
     和选中的玻璃丸不像同一个控件。补一层白纱把两半托在同一个面上，
     选中态靠更高的填充 + 自己的模糊和内高光浮起来，对比来自层次而非露底。 */
  background:
    linear-gradient(rgba(255, 255, 255, 0.34), rgba(255, 255, 255, 0.28)),
    var(--glass-track);
  -webkit-backdrop-filter: blur(18px) saturate(1.7) brightness(1.04);
  backdrop-filter: blur(18px) saturate(1.7) brightness(1.04);
  border: 0.5px solid var(--rim-line);
}
/* 暗色模式下这层白纱会把深色轨道洗亮，换成压暗 */
@media (prefers-color-scheme: dark) {
  .segmented {
    background:
      linear-gradient(rgba(0, 0, 0, 0.22), rgba(0, 0, 0, 0.16)),
      var(--glass-track);
  }
}
.segmented__btn {
  position: relative;          /* 高光边 ::before 的定位参照 */
  flex: 1;
  min-height: 40px;
  padding: var(--s2) var(--s3);
  border-radius: 11px;
  font-size: var(--fs-body);
  font-weight: 600;
  color: var(--text-2);
  transition: background 0.18s var(--ease), color 0.18s var(--ease), box-shadow 0.18s var(--ease);
}
.segmented__btn:hover { color: var(--text-1); }
/* 选中项 = 无色液态玻璃。
   原先只有 .78 实白填充，模糊层在外层 .segmented 轨道上，被这块白整个挡住，
   渲染出来就是一块平的白色块——看不出玻璃。
   现在填充降到 .50，缺的那部分透光交给它自己的 backdrop-filter，
   再补顶部内高光 + 下沿厚度，和主按钮同一套配方。 */
.segmented__btn[aria-selected="true"] {
  background: var(--glass-pill);
  color: var(--text-1);
  -webkit-backdrop-filter: blur(20px) saturate(1.9) brightness(1.06);
          backdrop-filter: blur(20px) saturate(1.9) brightness(1.06);
  box-shadow:
    inset 0 1px 0 var(--inner-top),      /* 顶部内高光 */
    inset 0 -2px 5px -3px var(--inner-shade), /* 下沿厚度 */
    var(--sh-1);
}

/* 二级分段（如「使用教程」下的教程分类）：高度、字号各收一档。
   两条一样粗的分段上下叠着分不清主次；缩小的这条读作「上一条的子选项」 */
.segmented--sub {
  margin-bottom: var(--s4);
  border-radius: 13px;
}
.segmented--sub .segmented__btn {
  min-height: 34px;
  padding: 6px var(--s3);
  border-radius: 10px;
  font-size: var(--fs-sub);
}

/* ============================ 14 标签 ============================ */
.tags { display: flex; flex-wrap: wrap; gap: var(--s2); }
.tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px var(--s3);
  border-radius: var(--r-pill);
  font-size: var(--fs-cap);
  font-weight: 600;
  background: var(--accent-soft);
  color: var(--accent-deep);
}
.tag--ok { background: var(--ok-soft); color: var(--ok); }
.tag--danger { background: var(--danger-soft); color: var(--danger); }

/* 复制框 */
.copybox {
  display: flex;
  align-items: center;
  gap: var(--s2);
  padding: var(--s2) var(--s2) var(--s2) var(--s4);
  border-radius: var(--r-md);
  background: var(--glass-track);
  border: 0.5px solid var(--hairline);
}
.copybox code {
  flex: 1;
  min-width: 0;
  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
  font-size: var(--fs-sub);
  color: var(--text-1);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.copybox .btn { height: 38px; padding: 0 var(--s4); font-size: var(--fs-sub); flex: 0 0 auto; }

/* ============================ 15 媒体 ============================ */
.video-wrap {
  position: relative;
  aspect-ratio: 16 / 9;
  border-radius: var(--r-md);
  overflow: hidden;
  background: #000;
  box-shadow: var(--sh-2);
}
.video-wrap video { width: 100%; height: 100%; object-fit: contain; background: #000; }

/* 视频封面：点了才拉流。
   没有海报图，就用深色渐变 + 玻璃播放键做一张「设计过的」封面——
   比一块黑底加原生控件体面，也省掉首屏两路 HLS 的流量。 */
.video-cover {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--s3);
  width: 100%;
  overflow: hidden;
  color: #fff;
  background:
    radial-gradient(90% 120% at 12% 0%, rgba(64, 156, 255, 0.55), transparent 58%),
    radial-gradient(80% 100% at 100% 100%, rgba(120, 90, 255, 0.45), transparent 60%),
    linear-gradient(160deg, #10203d 0%, #070b16 100%);
}
.video-cover--pink {
  background:
    radial-gradient(90% 120% at 12% 0%, rgba(255, 105, 180, 0.42), transparent 58%),
    radial-gradient(80% 100% at 100% 100%, rgba(175, 82, 222, 0.50), transparent 60%),
    linear-gradient(160deg, #2a1433 0%, #0c0714 100%);
}
/* 右下角水印图标：两张封面一眼区分，不必读字 */
.video-cover__mark {
  position: absolute;
  right: -3%;
  bottom: -16%;
  font-size: 150px;
  line-height: 1;
  opacity: 0.08;
  pointer-events: none;
}
.video-cover__play {
  width: 64px;
  height: 64px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  font-size: 22px;
  background: rgba(255, 255, 255, 0.16);
  -webkit-backdrop-filter: blur(14px) saturate(1.6);
  backdrop-filter: blur(14px) saturate(1.6);
  border: 0.5px solid rgba(255, 255, 255, 0.34);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.45), 0 12px 32px rgba(0, 0, 0, 0.35);
  transition: transform 0.34s var(--spring), background 0.2s var(--ease);
}
.video-cover__play .fa-play { margin-left: 4px; }   /* 三角形重心偏左，右移补正视觉居中 */
.video-cover:hover .video-cover__play { transform: scale(1.06); background: rgba(255, 255, 255, 0.24); }
.video-cover:active .video-cover__play { transform: scale(0.94); transition-duration: 0.08s; }
.video-cover.is-error .video-cover__play { background: rgba(255, 105, 97, 0.26); }
.video-cover__label {
  font-size: var(--fs-sub);
  font-weight: 600;
  letter-spacing: 0.02em;
  color: rgba(255, 255, 255, 0.88);
}

/* 播放器工具条：左清晰度、右下载 */
.player__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s3);
  margin-top: var(--s3);
}
/* 清晰度 = 迷你分段控件，和 .segmented 同一套「轨道 + 玻璃丸」语言 */
.quality-bar {
  display: inline-flex;
  gap: 2px;
  padding: 3px;
  border-radius: 11px;
  background: var(--glass-track);
}
.quality-btn {
  min-width: 58px;
  height: 32px;
  padding: 0 var(--s3);
  border-radius: 8px;
  font-size: var(--fs-sub);
  font-weight: 600;
  color: var(--text-2);
  transition: background 0.16s var(--ease), color 0.16s var(--ease), box-shadow 0.16s var(--ease);
}
.quality-btn:hover { color: var(--text-1); }
.quality-btn[aria-pressed="true"] {
  background: var(--glass-pill);
  color: var(--text-1);
  box-shadow: inset 0 1px 0 var(--inner-top), var(--sh-1);
}
.player__dl { height: 38px; padding: 0 var(--s4); font-size: var(--fs-sub); }
.player__dl i { font-size: 13px; }

/* 图片区 */
.shots { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s3); }
.shot { border-radius: var(--r-md); overflow: hidden; background: var(--glass-track); border: 0.5px solid var(--hairline); }
.shot img { width: 100%; height: auto; }
/* 图片缺失时的占位：加 .is-empty 才显示，避免 alt 破图图标 */
.shot__ph { display: none; }
.shot.is-empty img { display: none; }
.shot.is-empty .shot__ph { display: grid; }

.shot__ph {
  place-items: center;
  gap: var(--s2);
  aspect-ratio: 3 / 4;
  color: var(--text-3);
  font-size: var(--fs-cap);
}
.shot__ph i { font-size: 26px; opacity: 0.5; }
.shot__cap {
  padding: var(--s2) var(--s3);
  font-size: var(--fs-cap);
  color: var(--text-3);
  text-align: center;
  border-top: 0.5px solid var(--hairline);
}

.video-tip {
  margin-top: var(--s3);
  font-size: var(--fs-cap);
  color: var(--text-3);
  text-align: center;
}
.video-tip i { margin-right: 5px; }
.video-tip.is-error { color: var(--danger); font-weight: 600; }

/* ============================ 16 弹窗 ============================ */
.modal {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: grid;
  place-items: center;
  padding: var(--gutter);
  /* 遮罩不做 opacity 淡入，改为过渡底色与模糊：
     父层 opacity < 1 会成为卡片 backdrop-filter 的「背景根」，
     动画期间卡片只能模糊到遮罩自己，结束那一帧才突然模糊到页面——玻璃会「跳」一下。
     淡入交给卡片自身的 opacity，元素自己的透明度不影响它读背景。 */
  background: rgba(16, 20, 30, 0);
  -webkit-backdrop-filter: blur(0px);
  backdrop-filter: blur(0px);
  visibility: hidden;
  pointer-events: none;   /* 关闭动画期间不要继续拦截点击 */
  /* visibility 用 0s + 延迟：打开时立刻可聚焦（否则 t=0 处仍算 hidden，focus() 会失败），
     关闭时等淡出放完再隐藏 */
  transition:
    background-color 0.22s var(--ease),
    -webkit-backdrop-filter 0.22s var(--ease),
    backdrop-filter 0.22s var(--ease),
    visibility 0s linear 0.22s;
}
.modal.is-open {
  background: rgba(16, 20, 30, 0.42);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  visibility: visible;
  pointer-events: auto;
  transition:
    background-color 0.22s var(--ease),
    -webkit-backdrop-filter 0.22s var(--ease),
    backdrop-filter 0.22s var(--ease),
    visibility 0s;
}

.modal__card {
  position: relative;          /* 高光边 ::before 的定位参照 */
  width: min(360px, 100%);
  max-height: calc(100dvh - 2 * var(--gutter));
  overflow-y: auto;
  padding: var(--s6) var(--s5) var(--s5);
  border-radius: var(--r-xl);
  text-align: center;
  background: var(--glass-float);
  -webkit-backdrop-filter: blur(34px) saturate(var(--glass-sat)) brightness(var(--glass-bright));
  backdrop-filter: blur(34px) saturate(var(--glass-sat)) brightness(var(--glass-bright));
  border: 0.5px solid var(--rim-line);
  box-shadow:
    0 2px 6px rgba(16, 24, 40, 0.06),
    0 24px 60px rgba(16, 24, 40, 0.18),
    0 40px 80px -24px var(--caustic),
    inset 0 1px 0 var(--inner-top),
    inset 0 -1px 0 var(--inner-bottom);
  opacity: 0;
  transform: scale(0.94) translateY(8px);
  transition: opacity 0.2s var(--ease), transform 0.26s var(--ease);
}
.modal.is-open .modal__card { opacity: 1; transform: scale(1) translateY(0); }

/* 图标块：与子页 .hero__icon、列表行图标同一套渐变方块，默认橙色 = 提醒 */
.modal__ico {
  width: 52px;
  height: 52px;
  display: grid;
  place-items: center;
  margin: 0 auto var(--s4);
  border-radius: 15px;
  color: #fff;
  font-size: 22px;
  background: linear-gradient(160deg, #ffc35a, #ff9500);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), 0 8px 20px rgba(255, 149, 0, 0.26);
}
.modal__ico--blue   { background: linear-gradient(160deg, #4da2ff, #007aff); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), 0 8px 20px rgba(0, 122, 255, 0.26); }
.modal__ico--purple { background: linear-gradient(160deg, #c07af0, #af52de); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), 0 8px 20px rgba(175, 82, 222, 0.26); }
/* 红色 = 停止 / 不可用。和 .tile--danger 同一套语义：颜色表达状态，不做装饰 */
.modal__ico--danger { background: linear-gradient(160deg, #ff6b60, #d70015); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), 0 8px 20px rgba(215, 0, 21, 0.26); }

/* 弹窗正文里的段落：多段时给出行距，标题下第一段不再加额外边距 */
.modal__body p + p { margin-top: var(--s3); }

.modal__title { font-size: 20px; font-weight: 700; letter-spacing: -0.01em; line-height: 1.3; }
/* 一句话说明：居中、弱化，和标题成组 */
.modal__desc {
  margin-top: var(--s1);
  margin-bottom: var(--s5);
  font-size: var(--fs-sub);
  color: var(--text-3);
}
.modal__body {
  margin-top: var(--s3);
  margin-bottom: var(--s5);
  color: var(--text-2);
  font-size: var(--fs-body);
  line-height: 1.7;
  text-align: left;
}
.modal__body strong { color: var(--text-1); font-weight: 600; }
.modal__list { list-style: none; display: grid; gap: var(--s2); }
.modal__list li { display: flex; gap: var(--s2); }
.modal__list i { color: var(--accent); font-size: 12px; margin-top: 5px; flex: 0 0 auto; }

/* 有先后顺序的须知：编号比圆点更能说清「先做什么再做什么」 */
.modal__steps {
  list-style: none;
  display: grid;
  gap: var(--s3);
  padding: var(--s4);
  border-radius: var(--r-md);
  background: var(--glass-track);
  counter-reset: step;
}
.modal__steps li { display: flex; align-items: flex-start; gap: var(--s3); line-height: 1.55; }
.modal__steps li::before {
  counter-increment: step;
  content: counter(step);
  flex: 0 0 auto;
  width: 22px;
  height: 22px;
  margin-top: 1px;
  display: grid;
  place-items: center;
  border-radius: 7px;
  background: var(--accent-soft);
  color: var(--accent-deep);
  font-size: var(--fs-cap);
  font-weight: 700;
  line-height: 1;
}

/* 弹窗底部小字补充（如：苹果用户另看某处） */
.modal__note {
  margin-top: var(--s1);
  font-size: var(--fs-cap);
  color: var(--text-3);
  line-height: 1.55;
}
.modal__note i { margin-right: 4px; }
.modal__actions { display: grid; gap: var(--s2); }
.modal__cancel {
  height: 46px;
  border-radius: var(--r-md);
  font-size: var(--fs-head);
  font-weight: 600;
  color: var(--text-2);
  background: var(--glass-track);
}
.modal__cancel:hover { color: var(--text-1); }

/* ============================ 17 页脚 ============================ */
.site-foot {
  padding: var(--s7) var(--s1) var(--s2);
  text-align: center;
}
.foot-stats {
  display: inline-flex;
  align-items: center;
  gap: var(--s4);
  padding: 10px var(--s5);
  border-radius: var(--r-pill);
  position: relative;
  background: var(--glass);
  -webkit-backdrop-filter: blur(20px) saturate(var(--glass-sat)) brightness(var(--glass-bright));
  backdrop-filter: blur(20px) saturate(var(--glass-sat)) brightness(var(--glass-bright));
  border: 0.5px solid var(--rim-line);
  box-shadow:
    0 1px 2px rgba(16, 24, 40, 0.04),
    0 8px 20px rgba(16, 24, 40, 0.07),
    inset 0 1px 0 var(--inner-top);
  font-size: var(--fs-sub);
  color: var(--text-3);
}
.foot-stats i { margin-right: 5px; opacity: 0.7; }
.foot-stats b { font-weight: 700; color: var(--accent); }
.foot-sep { width: 1px; height: 13px; background: var(--hairline); }

/* 胶囊作为链接（跳转统计分享页）：可点就要有可点的样子 */
a.foot-stats {
  gap: var(--s2);
  padding: 10px var(--s4) 10px var(--s5);
  color: var(--text-2);
  font-weight: 600;
  transition: color 0.16s var(--ease), transform 0.34s var(--spring), box-shadow 0.2s var(--ease);
}
a.foot-stats i { margin-right: 0; font-size: 11px; opacity: 0.55; }
@media (hover: hover) {
  a.foot-stats:hover { color: var(--text-1); transform: translateY(-1px); }
}
a.foot-stats:active { transform: scale(0.97); transition-duration: 0.08s; }

/* 「实时」呼吸灯。
   扩散圈只动 transform / opacity，由合成器直接完成、不触发重绘；
   原先动 box-shadow 是每帧主线程重绘，还连带外面那块玻璃反复重算模糊——无限循环就是一直耗电 */
.foot-live {
  position: relative;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #34c759;
}
.foot-live::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: inherit;
  animation: live-pulse 2.4s var(--ease) infinite;
}
@keyframes live-pulse {
  0%   { transform: scale(1);   opacity: 0.55; }
  70%  { transform: scale(2.8); opacity: 0; }
  100% { transform: scale(2.8); opacity: 0; }
}
.foot-brand {
  margin-top: var(--s5);
  font-size: var(--fs-cap);
  color: var(--text-2);
  letter-spacing: 0.02em;
  opacity: 0.85;
}

/* ============================ 18 工具类 ============================ */
.visually-hidden {
  position: absolute; width: 1px; height: 1px;
  margin: -1px; padding: 0; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}
.stack > * + * { margin-top: var(--s4); }
[hidden] { display: none !important; }

/* ============================ 19 降级与适配 ============================ */
/* 尊重系统"减弱动态效果" */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;   /* 否则 infinite 动画会以 0.01ms 周期狂闪 */
    transition-duration: 0.01ms !important;
  }
  .tile:hover { transform: none; }
}

/* 平板起快捷格改三列：两列放在 720 宽的栏里，每格三百多像素宽，扁长得像按钮条 */
@media (min-width: 560px) {
  .tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* 桌面端：加宽留白、放大节奏，让窄栏看起来是"刻意"而非"没做适配" */
@media (min-width: 1024px) {
  :root { --gutter: 24px; }
  .page { padding-top: var(--s7); padding-bottom: 64px; }
  .hero { padding-top: var(--s3); padding-bottom: var(--s7); }
  .brand__name { font-size: 36px; }
  .hero__title { font-size: 32px; }
  .tiles { gap: var(--s4); }
  .tile { min-height: 136px; }
  .card { margin-bottom: var(--s6); }
}

/* 窄屏微调：更紧凑但不拥挤 */
@media (max-width: 400px) {
  :root { --gutter: 14px; }
  .page { padding-top: var(--s4); }
  .brand__name { font-size: 28px; }
  .hero__title { font-size: 26px; }
  /* 窄屏压缩间距，但不藏提示文字——375 是主流手机宽度，
     藏掉信息比稍微挤一点更亏；两行标签由 min-height + 垂直居中兜住 */
  .tiles { gap: var(--s2); }
  .tile { min-height: 112px; padding: var(--s3) var(--s2); }
  .tile__hint { font-size: 11.5px; }
}

/* 打印：去掉装饰，只留内容 */
@media print {
  body { background: #fff; }
  body::before, body::after { display: none; }
  .navbar, .segmented, .site-foot, .modal { display: none; }
  .card { box-shadow: none; border: 1px solid #ddd; }
}


/* ==========================================================================
   20 液态玻璃 · 镜面高光边
   --------------------------------------------------------------------------
   做法：padding + mask-composite:exclude 把一层渐变裁成 1px 的圈。
   渐变走「上沿最亮 → 两侧衰减到无 → 下沿回光」，
   模拟光从左上打到玻璃棱边上——这是液态玻璃最核心的识别特征。

   注意：色值走 --rim-top / --rim-mid / --rim-bottom 三个令牌，
   因为浅色底上白边不可见、深色底上才显亮边（对照实验台实测结论），
   两套主题各自给值，不能写死白色。
   ========================================================================== */
.card::before,
.navbar::before,
.tile::before,
.modal__card::before,
.foot-stats::before,
.btn::before,
.segmented__btn[aria-selected="true"]::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(150deg,
    var(--rim-top) 0%,
    var(--rim-mid) 20%,
    transparent 44%,
    transparent 58%,
    var(--rim-mid) 80%,
    var(--rim-bottom) 100%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
          mask-composite: exclude;
  pointer-events: none;
}

/* 大面板的高光边加粗到 1.5px：1px 在 1x 屏幕上太细，读不出来。
   小块控件（快捷格）保持 1px，否则会显得笨重。 */
.card::before,
.navbar::before,
.modal__card::before,
.foot-stats::before { padding: 1.5px; }
/* 按钮与分段控件用 1px，且高光更亮——它们面积小，需要更锐的棱边 */
.btn::before,
.segmented__btn[aria-selected="true"]::before { padding: 1px; }

/* 指针跟随高光：桌面端鼠标划过时玻璃表面有一团光跟着走。
   只在真有指针的设备上启用，触屏不做无谓开销。 */
:root { --specular: rgba(255, 255, 255, 0.55); }
@media (prefers-color-scheme: dark) {
  :root { --specular: rgba(255, 255, 255, 0.13); }
}
@media (hover: hover) and (pointer: fine) {
  /* 高光必须垫在文字下面：绝对定位的伪元素默认叠在内容之上，
     55% 的白光正好罩住鼠标下的图标和标题，整格发白褪色。
     isolate 让格子自成层叠上下文，z-index:-1 就落在格子底色之上、内容之下 */
  .tile { isolation: isolate; }
  .tile::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    border-radius: inherit;
    pointer-events: none;
    opacity: 0;
    background: radial-gradient(130px 95px at var(--mx, 28%) var(--my, 8%),
                var(--specular), transparent 70%);
    transition: opacity 0.25s var(--ease);
  }
  .tile:hover::after { opacity: 1; }
}

/* 回弹：按钮按下时收紧，松开用弹簧缓动弹回 */
.btn { transition: transform 0.34s var(--spring), box-shadow 0.16s var(--ease), background 0.16s var(--ease); }
.btn:active { transform: scale(0.955); transition-duration: 0.08s; }

/* ---- 降级保护 ---- */
/* 不支持 backdrop-filter：直接给实底，宁可不好看也不能读不清 */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .navbar, .card, .tile, .modal__card, .foot-stats, .btn--ghost {
    background: var(--glass-solid);
  }
}
/* 系统开启「降低透明度」时同理（Safari 17+ / 部分 Chromium） */
@media (prefers-reduced-transparency: reduce) {
  .navbar, .card, .tile, .modal__card, .foot-stats, .btn--ghost {
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    background: var(--glass-solid);
  }
}
@media (prefers-reduced-transparency: reduce) and (prefers-color-scheme: dark) {
  .navbar, .card, .tile, .modal__card, .foot-stats, .btn--ghost { background: #1a1c24; }
}
/* 打印：玻璃材质一律拍平 */
@media print {
  .card, .navbar, .tile, .foot-stats { -webkit-backdrop-filter: none; backdrop-filter: none; background: #fff; }
}