/* ===========================================================================
 * ChatRoom · 下载落地页样式（dl.html 专用）
 * ---------------------------------------------------------------------------
 * 为什么单独一个文件，不复用 app.css：
 *   落地页要在**微信内建浏览器**里第一时间渲染出来。app.css 里大半是主应用
 *   （房内、留言弹层）的样式，落地页一个都用不上。
 *   而且落地页是「用户第一眼看到的东西」，值得用最保守的写法。
 *
 * ⚠ 三条老内核铁律（Chrome 55 / vivo X9 自带浏览器）：
 *   ① 不写 `inset`（除非四条边都另写一遍）—— 不认识就整条丢弃，
 *      定位和尺寸一起没 → 元素跑到文档流末尾，视口之外 →「点了没反应」。
 *   ② `clamp()` / `max()` / `min()` / `env()` 前面**必须**有一条纯单位兜底。
 *   ③ `display:grid` 的居中在 57 之前不默认开启 → 改用 flex 居中。
 * =========================================================================== */

:root {
  --bg: #f5f6f8;
  --surface: #ffffff;
  --text: #14171a;
  --muted: #697586;
  --line: #e3e6ea;
  --accent: #2f6df6;
  --accent-ink: #ffffff;
  --ok: #12a150;
  --radius: 14px;
  --radius-sm: 10px;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0f1115;
    --surface: #171a21;
    --text: #e8eaed;
    --muted: #98a2b3;
    --line: #262b36;
    --accent: #4a83ff;
  }
}

[hidden] { display: none !important; }
* { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: 15px/1.6 -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC",
        "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans CJK SC", sans-serif;
  -webkit-font-smoothing: antialiased;
}

.hide { display: none !important; }

/* 卡片：整个页面只有一件事要做，所以让它尽量短。
   上下留白用 padding 而不是 margin —— 老 WebView 上 body 的 margin 折叠
   行为不一致，padding 更稳。 */
.wrap {
  max-width: 420px;
  margin: 0 auto;
  padding: 34px 20px 40px;
}

.title {
  margin: 0;
  font-size: 20px;
  font-size: clamp(20px, 5.4vw, 23px);
  font-weight: 700;
  letter-spacing: .01em;
}

.sub {
  margin: 6px 0 20px;
  color: var(--muted);
  font-size: 13px;
  font-size: clamp(13px, 3.6vw, 14px);
}

.box {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 16px 16px 18px;
}

/* 主按钮：够大够好按（手机上 16px 的字根本点不中），手指命中率优先。 */
.btn {
  display: block;
  width: 100%;
  border: 0;
  border-radius: var(--radius-sm);
  background: var(--accent);
  color: var(--accent-ink);
  padding: 13px 18px;
  font: inherit;
  font-weight: 600;
  text-align: center;
  text-decoration: none;
  -webkit-appearance: none;
  appearance: none;
}
.btn:active { filter: brightness(.94); }

/* 次级按钮（复制链接）：描边款，视觉上低于主按钮，但一样好按。 */
.btn-ghost {
  margin-top: 14px;
  background: transparent;
  color: var(--accent);
  border: 1px solid var(--accent);
}

.hint {
  margin: 12px 0 0;
  color: var(--muted);
  font-size: 13px;
  font-size: clamp(13px, 3.5vw, 14px);
  line-height: 1.7;
}

/* 微信那句「下载不了」是本页最重要的一句 —— 用户扫完码第一眼就要知道
   不是网站坏了，是微信拦的。用主色加重，别用红色（那是错误语气）。 */
.wx-lead {
  margin: 0;
  color: var(--accent);
  font-size: 15px;
  font-size: clamp(15px, 4.2vw, 16px);
  font-weight: 700;
}

/* 步骤用有序列表：数字自带顺序，比手写「1. 2. 3.」更稳。 */
.steps {
  margin: 12px 0 0;
  padding-left: 22px;
  color: var(--text);
  font-size: 13px;
  font-size: clamp(13px, 3.5vw, 14px);
  line-height: 1.85;
}
.steps li { margin: 0; }
.steps b { color: var(--accent); }

.copied {
  margin: 10px 0 0;
  color: var(--ok);
  font-size: 13px;
  font-size: clamp(13px, 3.5vw, 14px);
}

/* 自动复制没成功时的明文链接：必须**显示出来且能长按选中**，
   所以不能是灰掉的装饰样式 —— 给足对比度和下划线。 */
.dl-manual {
  display: block;
  margin-top: 6px;
  color: var(--accent);
  font-size: 12px;
  font-size: clamp(12px, 3.3vw, 13px);
  word-break: break-all;
  text-decoration: underline;
}

.foot {
  margin: 18px 0 0;
  color: var(--muted);
  font-size: 12px;
  font-size: clamp(12px, 3.3vw, 13px);
  text-align: center;
}
.foot-muted { margin-top: 6px; }
.dot { margin: 0 6px; }