/* ------------------------------------------------------------------
   EarInk 手机页样式 ——「广播提词器」风格

   两条硬约束决定了这套设计怎么做：
   1. 服务器在国内，外部字体（Google Fonts 之类）经常加载不出来。
      面试时字体请求超时会拖慢首屏，所以这里一个网络字体都不引，
      个性由排版结构、色板、留白来承担；字体只走本地优先栈。
   2. 手机是举着看的，回答必须一眼能读。所以正文 17px / 行高 1.78，
      题号单独立成左侧导轨，翻长回答时知道自己在第几题。
   ------------------------------------------------------------------ */

@font-face {
  /* 设备自带衬线时用它做品牌字，不产生任何网络请求 */
  font-family: "EarInk Display";
  src: local("Hoefler Text"), local("Georgia"), local("Charter"),
       local("Songti SC"), local("Source Han Serif SC"), local("Noto Serif SC");
}

:root {
  --sans: "PingFang SC", "HarmonyOS Sans SC", "MiSans", "Microsoft YaHei",
          -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --mono: ui-monospace, "SF Mono", "JetBrains Mono", "Cascadia Mono",
          Consolas, "Liberation Mono", monospace;
  --display: "EarInk Display", Georgia, serif;

  /* 移动端整体系数。桌面 100%，窄屏整体乘 0.76。
     刻意不用 body{zoom}：zoom 会把 fixed 定位的顶栏/底栏/遮罩一起缩成 76% 宽，
     屏幕上会空出一条。乘系数只改「尺寸变量」，布局宽度一点不受影响。 */
  --mk: 1;

  /* 流体等比缩放：每个尺寸都写成 calc(截距rem + 斜率vw) 再乘 --mk。
     375px 时等于后面注释里的原值（再乘 --mk），1440px 时放大到 1.35 倍，
     中间连续变化。每个值都是按同一个比例推出来的，所以整页一起缩放，
     不会出现「宽度变了字号没变」的割裂。
     斜率 = 原值 × 0.35 / 1065，截距 = 原值 × 0.0548rem */
  --fs-h1: calc((1.644rem + 0.986vw) * var(--mk));      /* 30 */
  --fs-code: calc((1.753rem + 1.052vw) * var(--mk));    /* 32 */
  --fs-q: calc((0.877rem + 0.526vw) * var(--mk));       /* 16 */
  --fs-body: calc((0.931rem + 0.559vw) * var(--mk));    /* 17 */
  --fs-btn: calc((0.767rem + 0.46vw) * var(--mk));      /* 14 */
  --fs-mid: calc((0.712rem + 0.427vw) * var(--mk));     /* 13 */
  --fs-small: calc((0.658rem + 0.394vw) * var(--mk));   /* 12 */
  --fs-tiny: calc((0.603rem + 0.361vw) * var(--mk));    /* 11 */

  --space-xs: calc((0.219rem + 0.131vw) * var(--mk));   /* 4 */
  --space-sm: calc((0.438rem + 0.263vw) * var(--mk));   /* 8 */
  --space-md: calc((0.657rem + 0.394vw) * var(--mk));   /* 12 */
  --space-lg: calc((0.877rem + 0.526vw) * var(--mk));   /* 16 */
  --space-xl: calc((1.205rem + 0.723vw) * var(--mk));   /* 22 */
  --space-2xl: calc((1.315rem + 0.789vw) * var(--mk));  /* 24 */

  --radius-sm: calc((0.493rem + 0.296vw) * var(--mk));  /* 9 */
  --radius-md: calc((0.657rem + 0.394vw) * var(--mk));  /* 12 */
  --radius-lg: calc((0.767rem + 0.46vw) * var(--mk));   /* 14 */

  --icon-box: calc((1.644rem + 0.986vw) * var(--mk));   /* 30 */
  --icon-box-lg: calc((1.753rem + 1.052vw) * var(--mk));/* 32 */
  --dot: calc((0.384rem + 0.23vw) * var(--mk));         /* 7 */
  --hairline: calc((0.11rem + 0.066vw) * var(--mk));    /* 2 */
  --sheet-w: calc((18.63rem + 11.17vw) * var(--mk));    /* 340 → 459 */
  --r: var(--radius-lg);
}

/* ---------- 日间：纸感 ---------- */
html[data-theme="light"] {
  --bg: #f5f3ee;
  --surface: #fffdf9;
  --raise: #ebe6db;
  --line: #ded7c8;
  --ink: #1b1a17;
  --ink-dim: #625d53;
  --ink-faint: #9c968a;
  --accent: #2f5597;
  --accent-bg: #e6ecf7;
  --accent-fg: #ffffff;
  --live: #1c7040;
  --live-bg: #dcefe3;
  --dead: #9d2f2f;
  --dead-bg: #f6e0de;
  --shadow: 0 1px 2px rgba(40,32,18,.05), 0 10px 28px rgba(40,32,18,.06);
  /* 毛玻璃底：刻意不透——字要压在上面还读得清 */
  --glass: rgba(245, 243, 238, .64);
  /* 底栏按钮：比整条底栏再透一阶，看着像贴在玻璃上的片，不是实心块 */
  --glass-btn: rgba(255, 253, 249, .42);
  --glass-btn-line: rgba(40, 32, 18, .12);
  --glass-accent: rgba(47, 85, 151, .82);
}

/* ---------- 夜间：炭黑 + 琥珀 ---------- */
html[data-theme="dark"] {
  --bg: #0d0f12;
  --surface: #14171b;
  --raise: #1c2026;
  --line: #262b32;
  --ink: #eae7e0;
  --ink-dim: #98a0a9;
  --ink-faint: #666e77;
  --accent: #7aa5e8;
  --accent-bg: #18222f;
  --accent-fg: #0f1216;
  --live: #58d38d;
  --live-bg: #14301f;
  --dead: #f0766f;
  --dead-bg: #331b1a;
  --shadow: 0 1px 2px rgba(0,0,0,.45), 0 14px 34px rgba(0,0,0,.38);
  --glass: rgba(13, 15, 18, .64);
  --glass-btn: rgba(255, 255, 255, .065);
  --glass-btn-line: rgba(255, 255, 255, .1);
  --glass-accent: rgba(122, 165, 232, .85);
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { height: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  font-size: var(--fs-body);
  line-height: 1.7;
  display: flex;
  flex-direction: column;
  overscroll-behavior: none;
  -webkit-font-smoothing: antialiased;
  transition: background .2s, color .2s;
}

/* ================= 顶部：工具条 + 读数条 ================= */
/* 顶栏：固定 + 毛玻璃。正文从它底下滚过去，糊着透出来。
   刻意不画分隔线：有那条线就变成「一块盖在上面的板」，
   而现在想要的是「内容自然虚化出去」 */
header {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 20;
  background: var(--glass);
  backdrop-filter: blur(18px) saturate(180%);
  -webkit-backdrop-filter: blur(18px) saturate(180%);
  /* 不用 env(safe-area-inset-top)：浏览器自己有地址栏、手机状态栏也占着一块，
     这一层再留就会被推下去，看着像没贴顶 */
}
/* 不支持毛玻璃就退回不透明底 + 分隔线：半透明却没模糊的话，
   底下的字会直接透上来，反而比不用毛玻璃还难读 */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  header { background: var(--surface); border-bottom: 1px solid var(--line); }
  /* 按钮没有模糊就只能退回实心；底栏本身不加底，两边一致 */
  footer button { background: var(--raise); border-color: transparent; }
  footer button.primary { background: var(--accent); }
}
/* 第一行：信息 + 操作按钮全挤在一行。
   放不下时优先把电脑名截短，绝不折行 */
.bar {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  padding: var(--space-sm) var(--space-md);
  overflow: hidden;
}
.brand {
  flex: none;
  font-family: var(--display);
  font-size: var(--fs-body);
  font-weight: 700;
  letter-spacing: .03em;
}
/* 电脑名：可伸缩、可省略，放不下时先把尾巴截掉 */
.host {
  flex: 0 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: var(--fs-small);
  letter-spacing: .02em;
  color: var(--ink-dim);
}
.host:empty { display: none; }

/* 没登录（还没验证访问码）就只留品牌和主题按钮：
   访问码、电脑名、状态、历史、转写占位框那时候都没意义 */
header:not(.authed) #code-chip,
header:not(.authed) .host,
header:not(.authed) .flag,
header:not(.authed) #hist-btn,
header:not(.authed) #logout,
header:not(.authed) .asr-row { display: none; }

.icon-btn {
  flex: none;
  width: var(--icon-box); height: var(--icon-box);
  display: grid; place-items: center;
  background: transparent;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  color: var(--ink-dim);
  padding: 0;
  cursor: pointer;
}
.icon-btn:active { background: var(--raise); }
/* 图标尺寸跟着容器走，两者一起缩放 */
.icon-btn svg { width: 50%; height: 50%; display: block; }

.text-btn {
  flex: none;
  font-family: var(--sans);
  font-size: var(--fs-small);
  letter-spacing: .04em;
  color: var(--ink-dim);
  background: transparent;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: var(--space-xs) var(--space-md);
  cursor: pointer;
}
.text-btn:active { background: var(--raise); }

/* 历史入口。文案永远只是「历史」——轮数和「在看哪轮」交给弹框内部说，
   按钮上变来变去会让人以为它坏了 */
.hist-btn {
  flex: none;
  font-family: var(--sans);
  font-size: var(--fs-tiny);
  line-height: 1.4;
  padding: var(--space-xs) var(--space-md);
  border-radius: 999px;
  border: 1px solid var(--line);
  background: transparent;
  color: var(--ink-dim);
  white-space: nowrap;
  cursor: pointer;
}
.hist-btn:active { background: var(--raise); }

/* 访问码：一行里就它要显眼 */
.code-chip {
  flex: none;
  font-family: var(--mono);
  font-size: var(--fs-body);
  font-weight: 600;
  letter-spacing: .06em;
  line-height: 1.2;
  color: var(--accent);
  background: transparent;
  border: 0;
  padding: 0 1px;
  cursor: pointer;
}
.code-chip:active { opacity: .55; }
.code-chip.empty { color: var(--ink-faint); }

.flag {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  font-size: var(--fs-tiny);
  letter-spacing: .04em;
  padding: var(--space-xs) var(--space-sm);
  border-radius: 999px;
  background: var(--raise);
  color: var(--ink-faint);
  white-space: nowrap;
}

/* ================= 历史记录抽屉 ================= */
.sheet-mask {
  position: fixed;
  inset: 0;
  z-index: 40;
  background: rgba(0, 0, 0, .38);
  opacity: 0;
  transition: opacity .18s ease;
}
.sheet-mask.show { opacity: 1; }
.sheet-mask[hidden] { display: none; }

/* 历史记录弹框：居中弹，不从底下滑。底部抽屉是「贴着当前上下文」的语义，
   而历史是一个独立的选择动作，居中的对话框更贴合它 */
.sheet {
  position: fixed;
  left: 50%;
  top: 50%;
  z-index: 41;
  width: min(86vw, var(--sheet-w));
  max-height: 70vh;
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: 0 18px 48px rgba(0, 0, 0, .28);
  opacity: 0;
  transform: translate(-50%, -50%) scale(.94);
  transition: transform .18s ease, opacity .18s ease;
}
.sheet.show {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
}
.sheet[hidden] { display: none; }

.sheet-head {
  flex: none;
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  padding: var(--space-md) var(--space-md) var(--space-sm) var(--space-lg);
  border-bottom: 1px solid var(--line);
}
/* 标题右边的灰字：顺手交代一句保留期，省得用户以为记录会一直在 */
.sheet-hint {
  font-size: var(--fs-tiny);
  letter-spacing: .02em;
  color: var(--ink-faint);
}
.sheet-head .spacer { flex: 1; }
.sheet-title {
  font-size: var(--fs-btn);
  font-weight: 700;
  letter-spacing: .04em;
}
.sheet-close {
  width: var(--icon-box-lg); height: var(--icon-box-lg);
  display: grid; place-items: center;
  background: transparent;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  color: var(--ink-dim);
  font-size: var(--fs-mid);
  cursor: pointer;
}
.sheet-close:active { background: var(--raise); }

.sheet-list {
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: var(--space-sm) var(--space-sm) var(--space-md);
}
.sheet-list button {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  width: 100%;
  text-align: left;
  font-family: var(--sans);
  font-size: var(--fs-btn);
  padding: var(--space-md) var(--space-sm);
  border: 0;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--ink);
  cursor: pointer;
}
.sheet-list button:active { background: var(--raise); }
.sheet-list button.on { background: var(--raise); }
/* 小圆点只在「正在看」那条亮，一眼知道现在在看哪轮 */
.sheet-list button .dot {
  flex: none;
  width: var(--dot); height: var(--dot);
  border-radius: 50%;
  background: var(--accent);
  opacity: 0;
}
.sheet-list button.on .dot { opacity: 1; }
.sheet-list button .turns {
  font-size: var(--fs-tiny);
  letter-spacing: .02em;
  color: var(--ink-faint);
}
.sheet-list button .sub {
  margin-left: auto;
  font-size: var(--fs-tiny);
  letter-spacing: .04em;
  color: var(--ink-faint);
}
/* 状态点跟着状态色走；在线时呼吸一下，一眼看出是活的 */
.flag i { width: var(--dot); height: var(--dot); border-radius: 50%; background: currentColor; flex: none; }
.flag.on { background: var(--live-bg); color: var(--live); }
.flag.off { background: var(--dead-bg); color: var(--dead); }
.flag.on i { animation: pulse 2.2s ease-in-out infinite; }
@keyframes pulse { 0%,100% { opacity: 1 } 50% { opacity: .35 } }

/* 识别文本：固定一行，超长就左右滑。
   外面这层只干一件事：让左边那条竖线不跟着内容滚跑。
   没内容时也留着这一格（虚线框 + 占位字）——空着一块反而像没做完 */
.asr-row {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  margin: 0 var(--space-md) var(--space-md);
  /* 左边留出：竖线起点 + 线宽 + 跟文字的间距 */
  padding: var(--space-xs) var(--space-sm) var(--space-xs)
           calc(var(--space-sm) + var(--hairline) + var(--space-xs));
  border: 1px dashed var(--line);
  border-radius: var(--radius-sm);
}
.caption {
  flex: 1;
  min-width: 0;
  font-size: var(--fs-mid);
  line-height: 1.55;
  color: var(--ink-dim);
  white-space: nowrap;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
/* 看历史时右边那个出口。样式跟顶栏那几个按钮保持一致——本来就是同一类东西，
   长得不一样会让人以为它点不动 */
.asr-exit {
  flex: none;
  font-family: var(--sans);
  font-size: var(--fs-tiny);
  line-height: 1.4;
  padding: var(--space-xs) var(--space-md);
  border-radius: 999px;
  border: 1px solid var(--line);
  background: transparent;
  color: var(--ink-dim);
  white-space: nowrap;
  cursor: pointer;
}
.asr-exit:active { background: var(--raise); }
/* 看历史时这一行是固定文案，不是要横滑的长文本，超出就用省略号 */
.caption.hist {
  overflow-x: hidden;
  text-overflow: ellipsis;
}
.caption::-webkit-scrollbar { display: none; }
/* 竖线高度跟着字号走（1em），太低看着像掉了半截 */
.caption::before {
  content: "";
  position: absolute;
  left: var(--space-sm);
  top: 50%;
  transform: translateY(-50%);
  width: var(--hairline); height: 1em;
  background: var(--accent);
  border-radius: 1px;
}
/* 还没识别到东西：一句灰字交代这块是干嘛的；
   这时候不画竖线，免得和占位文字挤在一起 */
.caption:empty::before { display: none; }
.caption:empty::after {
  content: "实时转写";
  color: var(--ink-faint);
}

/* ================= 登录 ================= */
#login {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--space-xl);
  /* 顶栏改成固定定位后已经不在文档流里，这里得自己把它的高度让出来 */
  padding: calc(var(--head-h, 0px) + var(--space-2xl)) var(--space-xl)
           calc(var(--space-2xl) * 2 + env(safe-area-inset-bottom));
}
#login .lede { display: flex; flex-direction: column; gap: var(--space-sm); }
#login h1 {
  margin: 0;
  font-family: var(--display);
  font-size: var(--fs-h1);
  font-weight: 700;
  line-height: 1.15;
}
#login p { margin: 0; font-size: var(--fs-btn); color: var(--ink-dim); }

#code {
  width: 100%;
  padding: var(--space-lg);
  font-family: var(--mono);
  font-size: var(--fs-code);
  font-weight: 600;
  letter-spacing: .28em;
  text-indent: .28em;
  text-align: center;
  color: var(--ink);
  background: var(--surface);
  border: 1.5px solid var(--line);
  border-radius: var(--r);
  outline: none;
  transition: border-color .15s;
  box-shadow: var(--shadow);
}
#code::placeholder { color: var(--ink-faint); letter-spacing: .18em; }
#code:focus { border-color: var(--accent); }

#connect {
  width: 100%;
  padding: var(--space-lg);
  font-family: var(--sans);
  font-size: var(--fs-q);
  font-weight: 700;
  letter-spacing: .3em;
  text-indent: .3em;
  color: var(--accent-fg);
  background: var(--accent);
  border: 0;
  border-radius: var(--r);
  cursor: pointer;
}
#connect:disabled { background: var(--raise); color: var(--ink-faint); }
#login-err {
  margin-top: calc(var(--space-sm) * -1);
  min-height: var(--space-xl);
  font-size: var(--fs-mid);
  color: var(--dead);
}

/* ================= 正文 ================= */
#main {
  /* 铺满视口：正文区域要从头尾两块毛玻璃底下穿过去 */
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  display: none;
  flex-direction: column;
  min-height: 0;
}

/* 上下按头尾的实际高度留白：内容可以滚到毛玻璃底下，但首尾不会被挡住。
   高度不能写死——顶栏行数会变、识别那行时有时无 */
.rail {
  flex: 1;
  overflow-y: auto;
  padding: calc(var(--head-h, 0px) + var(--space-xs)) var(--space-lg)
           calc(var(--foot-h, 0px) + var(--space-md));
  -webkit-overflow-scrolling: touch;
}
/* 尾部补白：高度由 JS 算（--tail），平时是 0。
   它的作用是把滚动区撑长，让最后一题也能滚到顶栏下方——
   否则最后一题比视口短时，「贴顶」所需的位置超过最大可滚动距离，
   会被 max 卡住，翻到最后一题就只能停在屏幕下半截 */
.rail::after {
  content: "";
  display: block;
  height: var(--tail, 0px);
}

.qa {
  display: grid;
  grid-template-columns: var(--icon-box) 1fr;
  column-gap: var(--space-md);
  padding: var(--space-lg) 0;
  border-top: 1px solid var(--line);
}
.qa:first-child { border-top: 0; padding-top: var(--space-sm); }
.qa:last-child { padding-bottom: var(--space-xs); }

/* 题号用淡底 + 主色字：一整排看下来不能变成一墙色块。
   实色底（旧版是橙底白字）天然抢眼，而题号只是导航，不该是页面上最响的东西 */
.idx {
  grid-column: 1;
  width: var(--icon-box); height: var(--icon-box);
  display: grid; place-items: center;
  font-family: var(--mono);
  font-size: var(--fs-mid);
  font-weight: 600;
  color: var(--accent);
  background: var(--accent-bg);
  border-radius: var(--radius-sm);
}

.qa .q {
  grid-column: 2;
  margin: var(--space-xs) 0 var(--space-sm);
  font-size: var(--fs-q);
  font-weight: 700;
  line-height: 1.5;
  color: var(--ink);
}
.qa .a {
  /* 跨满两列：正文从最左边起排，不再给题号腾出那一段空白。
     题目本身仍然缩进，靠缩进跟正文分开层次 */
  grid-column: 1 / -1;
  margin: 0;
  font-size: var(--fs-body);
  line-height: 1.78;
  color: var(--ink);
  white-space: pre-wrap;
  word-break: break-word;
}
/* 回答还没到：只闪一个光标，不塞占位文字（免得看着像出错） */
.qa .a.pending::after {
  content: "";
  display: inline-block;
  width: .5em; height: 1.05em;
  background: var(--accent);
  vertical-align: -.18em;
  animation: blink 1.05s steps(1) infinite;
}
@keyframes blink { 0%,49% { opacity: 1 } 50%,100% { opacity: 0 } }

.qa .a .skipped { color: var(--ink-dim); }

.empty {
  margin-top: 16vh;
  text-align: center;
  font-size: var(--fs-btn);
  line-height: 2;
  color: var(--ink-faint);
}
.empty::before {
  content: "";
  display: block;
  width: calc(var(--icon-box) + var(--space-xs));
  height: var(--hairline);
  margin: 0 auto var(--fs-btn);
  background: var(--line);
  border-radius: 1px;
}

/* ================= 底部操作 ================= */
/* 底部区域只是个容器：刻意不给它整条底色。
   底色一加就变成「一条盖在下面的板」，而现在要的是只看见四个按钮，
   正文从按钮后面透过去（按钮各自带模糊） */
footer {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 20;
  display: flex;
  gap: var(--space-sm);
  /* 同理不留 env(safe-area-inset-bottom)：浏览器底部栏和手机手势条已经把位置占了，
     再留一层按钮就浮在半空中，贴不到底 */
  padding: var(--space-sm) var(--space-md);
}
footer button {
  flex: 1;
  padding: var(--fs-btn) var(--space-xs);
  font-family: var(--sans);
  font-size: var(--fs-btn);
  font-weight: 600;
  letter-spacing: .06em;
  color: var(--ink-dim);
  /* 不要实心色块：一层很淡的半透底 + 自己的模糊，
     底下的正文会「微微」透出来，按钮看着像玻璃片而不是棋子 */
  background: var(--glass-btn);
  border: 1px solid var(--glass-btn-line);
  border-radius: var(--radius-md);
  backdrop-filter: blur(8px) saturate(150%);
  -webkit-backdrop-filter: blur(8px) saturate(150%);
  cursor: pointer;
}
footer button:active { color: var(--ink); background: var(--glass-btn-line); }
footer button:disabled { color: var(--ink-faint); opacity: .45; }
footer button.primary {
  background: var(--glass-accent);
  border-color: transparent;
  color: var(--accent-fg);
  letter-spacing: .08em;
}
/* 底部行最左边：当前在看第几题。不带按钮那层玻璃片——它只是个读数，
   不是个能点的东西。字比按钮文字大一点，一眼就能看见，又不至于抢戏 */
footer .qnum {
  flex: none;
  align-self: center;
  min-width: 1.6em;
  text-align: center;
  font-family: var(--sans);
  font-size: calc(var(--fs-btn) * 1.2);
  font-weight: 600;
  letter-spacing: .06em;
  color: var(--ink-dim);
}

/* ================= 浮层提示 ================= */
#toast {
  position: fixed;
  left: 50%;
  /* 底栏已经贴到底了，这里也别再单独留一层安全区，否则提示会浮高一截 */
  bottom: calc(var(--foot-h, 4.5rem) + var(--space-lg));
  /* 得压过头尾那两块（它们 z-index 20），否则提示会钻到底栏底下 */
  z-index: 30;
  transform: translateX(-50%) translateY(10px);
  max-width: 82vw;
  text-align: center;
  font-size: var(--fs-mid);
  padding: var(--space-sm) var(--space-lg);
  border-radius: 999px;
  background: var(--ink);
  color: var(--bg);
  box-shadow: var(--shadow);
  opacity: 0;
  transition: opacity .18s, transform .18s;
  pointer-events: none;
}
#toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

/* 窄屏（手机）整体缩到 76%：手机屏本来就装不下这么多信息，等比缩最省事，
   而且缩的是「所有尺寸变量」，所以头的栏、正文、底栏按钮一起变小，
   依然是等比，不是只有宽度在变 */
@media (max-width: 540px) {
  :root { --mk: 0.76; }
}

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}