/* =========================================================
 * tokens.css — 全局视觉规范（第 1.5 章）
 * 单位统一使用逻辑像素 pt（本项目 1pt = 1px）
 * ========================================================= */
:root {
  /* ---- 系统色板 表1-4 / 附录B ---- */
  --red: #FF3B30;
  --orange: #FF9500;
  --yellow: #FFCC00;
  --green: #34C759;
  --blue: #007AFF;
  --purple: #AF52DE;
  --wx: #07C160;
  --shop: #FF6A00;
  --price: #FF4A22;

  --bg: #FFFFFF;
  --bg2: #F2F2F7;
  --card: #FFFFFF;
  --group: #F2F2F7;
  --text: #000000;
  --text2: #8E8E93;
  --text3: #C7C7CC;
  --sep: #E5E5EA;
  --dark-bg: #000000;
  --dark-card: #1C1C1E;
  --dark-card2: #2C2C2E;
  --dark-text: #FFFFFF;
  --dark-text2: #98989F;

  /* ---- 圆角 1.5.3 ---- */
  --r-app: 22.5%;
  --r-card: 16px;
  --r-alert: 14px;
  --r-btn: 12px;
  --r-tag: 6px;
  --r-input: 10px;
  --r-bubble: 18px;

  /* ---- 尺寸常量 ---- */
  --sb-h: 54px;
  --nav-h: 44px;
  --tab-h: 49px;
  --safe-b: 34px;
  --screen-w: 440px;
  --screen-h: 956px;
  --stage-w: 100%;          /* 全屏模式：屏幕在真实视口里占的可见尺寸 */
  --stage-h: 100%;
  --ui-scale: 1;            /* 全屏自适应缩放比（设计稿 440 → 真实视口宽度） */
  --corner: 55px;

  /* ---- 动效 2.3 ---- */
  --ease: cubic-bezier(0.32, 0.72, 0, 1);
  --t-push: 350ms;
  --t-modal: 400ms;
  --t-overlay: 500ms;

  /* ---- 字体 1.5.1 ---- */
  --font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "PingFang SC",
          "Helvetica Neue", "Microsoft YaHei", "Segoe UI", Roboto, Arial, sans-serif;
  --shadow-card: 0 4px 16px rgba(0, 0, 0, .08);
  --blur: blur(20px);
}

/* ---- 全屏模式（真机）：状态栏 / 底部安全区 跟随设备 ---- */
html.fs { --sb-h: 44px; --safe-b: 22px; --corner: 0px; }
html.fs {
  --sb-h: max(44px, env(safe-area-inset-top, 0px));
  --safe-b: max(22px, env(safe-area-inset-bottom, 0px));
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

/* =========================================================
 * 禁止长按选中界面文字（2026-10-05 用户要求）
 * ---------------------------------------------------------
 * 手机浏览器长按会选中正文并弹出「复制/全选/分享」浮层，
 * 模拟机里这些操作没有意义且很碍眼。
 *
 * 三个属性缺一不可：
 *   user-select:none        禁选区（含 -webkit- 前缀，覆盖旧版 Android/iOS）
 *   -webkit-touch-callout   iOS Safari 长按浮层（部分版本无视 user-select）
 *   touch-action:manipulation 去掉 300ms 双击缩放延迟，手感更像原生 App
 *
 * 注意：输入框必须放开 —— 否则没法选中文本、也没法粘贴，
 * 微信聊天输入框 / 设置里的输入项都依赖这个。
 * ======================================================= */
html, body, body * {
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
  -webkit-touch-drag: none;
  /* 只去掉双击缩放延迟，保留滚动与下拉手势。
     注意：.gesture-bar / .float-home 在 device.css 里是 `touch-action:none`
     （类选择器，特异性高于这里的元素选择器），手势不会被误伤。 */
  touch-action: manipulation;
}
/* 输入类元素恢复可选，否则无法粘贴/选中改写 */
html input, html textarea, html select,
html [contenteditable], html [contenteditable="true"] {
  -webkit-user-select: text;
  -moz-user-select: text;
  -ms-user-select: text;
  user-select: text;
  -webkit-touch-callout: default;
}
/* 表单控件的点选高亮块也别要 */
html input, html textarea, html select, html button {
  -webkit-touch-callout: none;
}
/* 长按图片/链接不应触发系统菜单（项目无 <img>，防止将来引入后回归） */
html img, html svg, html a {
  -webkit-touch-callout: none;
  -webkit-user-drag: none;
  user-select: none;
  -webkit-user-select: none;
}

html, body {
  height: 100%;
  margin: 0;
  padding: 0;
}

body {
  font-family: var(--font);
  background:
    radial-gradient(1200px 700px at 20% 10%, #2c2f38 0%, transparent 60%),
    radial-gradient(1000px 800px at 85% 85%, #1d2733 0%, transparent 55%),
    #0e1013;
  color: #e6e8ec;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

button, input, textarea, select {
  font-family: inherit;
  font-size: inherit;
  color: inherit;
  outline: none;
  border: none;
  background: none;
  padding: 0;
}
button { cursor: pointer; }

/* 数字等宽（1.5.1） */
.num, .mono { font-variant-numeric: tabular-nums; font-feature-settings: "tnum"; }

/* ============ 页面容器 ============ */
.page {
  position: absolute;
  inset: 0;
  background: var(--bg);
  color: var(--text);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  transition: transform var(--t-push) var(--ease), opacity var(--t-push) var(--ease);
  will-change: transform, opacity;
}
.page.theme-dark {
  background: var(--dark-bg);
  color: #fff;
  --bg: #000000;
  --card: #1C1C1E;
  --group: #1C1C1E;
  --text: #FFFFFF;
  --text2: #98989F;
  --text3: #48484A;
  --sep: #38383A;
}

/* 深色模式：跟随系统设置 */
html.dark .page:not(.theme-dark) {
  background: #000;
  color: #fff;
  --bg: #000000;
  --card: #1C1C1E;
  --group: #1C1C1E;
  --text: #FFFFFF;
  --text2: #98989F;
  --text3: #48484A;
  --sep: #38383A;
}
html.dark .page.theme-dark { /* 已是深色 */ }

.page-error {
  padding: 120px 20px;
  color: var(--red);
  font-size: 15px;
  text-align: center;
}
.page-error pre { white-space: pre-wrap; font-size: 12px; color: var(--text2); }

/* ============ 布局常量 ============ */
.sb-space { height: var(--sb-h); flex: none; }
.scroll {
  flex: 1 1 auto;
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}
.scroll::-webkit-scrollbar { width: 0; height: 0; }
.tab-safe { height: var(--safe-b); flex: none; }

/* ============ 文本阶梯 表1-3 ============ */
.t-hero { font-size: 96px; font-weight: 700; line-height: 1; letter-spacing: -2px; }
.t-title { font-size: 34px; font-weight: 700; letter-spacing: -.4px; }
.t-nav { font-size: 17px; font-weight: 600; }
.t-body { font-size: 17px; font-weight: 400; }
.t-sub { font-size: 15px; font-weight: 400; color: var(--text2); }
.t-aux { font-size: 13px; font-weight: 400; color: var(--text2); }
.t-note { font-size: 11px; font-weight: 400; color: var(--text2); }

.row-title-row { display: flex; align-items: center; }

/* ============ 通用 utility ============ */
.flex { display: flex; }
.flex-c { display: flex; align-items: center; }
.flex-b { display: flex; align-items: center; justify-content: space-between; }
.f1 { flex: 1; min-width: 0; }
.center { display: flex; align-items: center; justify-content: center; }
.trunc { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.trunc2 {
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.trunc3 {
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.mt8 { margin-top: 8px; } .mt12 { margin-top: 12px; } .mt16 { margin-top: 16px; }
.mb8 { margin-bottom: 8px; } .mb12 { margin-bottom: 12px; }
.pd12 { padding: 0 12px; }
.hr { height: 1px; background: var(--sep); }
.muted { color: var(--text2); }
.red { color: var(--red); }
.blue { color: var(--blue); }
.green { color: var(--green); }
.orange { color: var(--orange); }
.wx-green { color: var(--wx); }
.price { color: var(--price); }
.b { font-weight: 600; }
.tar { text-align: right; }
.tac { text-align: center; }
.pill {
  display: inline-block; padding: 2px 6px; border-radius: var(--r-tag);
  font-size: 11px; line-height: 1.4;
}

/* =========================================================
 * 微信主题覆盖层
 * 通过 html[data-theme="xxx"] 切换
 * ========================================================= */

/* ---- 经典绿（默认） ---- */
html[data-theme="classic"] {
  --wx: #07C160;
  --wx-nav-bg: #EDEDED;
  --wx-chat-bg: #F5F5F5;
  --wx-bubble-them: #FFFFFF;
  --wx-bubble-me: #95EC69;
  --wx-text: #000000;
  --wx-text2: #8E8E93;
  --wx-sep: #E5E5EA;
  --wx-grad-start: #3CD07A;
  --wx-grad-end: #07C160;
  --wx-radius: 18px;
  --wx-shadow: none;
  --wx-bg-texture: none;
  --wx-page-bg: #F2F2F7;
  --wx-card-bg: #FFFFFF;
  --wx-tabbar-bg: rgba(250,250,250,.94);
  --wx-search-bg: #F5F5F5;
  --wx-mehead-grad1: #07C160;
  --wx-mehead-grad2: #3CD07A;
}

/* ---- 清透蓝 ---- */
html[data-theme="aqua"] {
  --wx: #5BB8D6;
  --wx-nav-bg: #E8F4F8;
  --wx-chat-bg: #F0F8FB;
  --wx-bubble-them: #FFFFFF;
  --wx-bubble-me: #B8E4F0;
  --wx-text: #2C3E50;
  --wx-text2: #7F8C9A;
  --wx-sep: #D6EAF2;
  --wx-grad-start: #7DD3E8;
  --wx-grad-end: #5BB8D6;
  --wx-radius: 18px;
  --wx-shadow: 0 2px 8px rgba(91, 184, 214, 0.15);
  --wx-bg-texture: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M30 5 Q45 15 30 25 Q15 15 30 5' fill='none' stroke='%235BB8D6' stroke-opacity='0.05' stroke-width='1.5'/%3E%3Cpath d='M30 25 Q45 35 30 45 Q15 35 30 25' fill='none' stroke='%235BB8D6' stroke-opacity='0.05' stroke-width='1.5'/%3E%3C/svg%3E");
  --wx-page-bg: #F0F8FB;
  --wx-card-bg: #FFFFFF;
  --wx-tabbar-bg: rgba(232,244,248,.94);
  --wx-search-bg: #E8F4F8;
  --wx-mehead-grad1: #D6EEF7;
  --wx-mehead-grad2: #EAF7FB;
}

/* ---- 深色模式 ---- */
html[data-theme="dark"] {
  --wx: #07C160;
  --wx-nav-bg: #191919;
  --wx-chat-bg: #111111;
  --wx-bubble-them: #2B2B2B;
  --wx-bubble-me: #1B5E20;
  --wx-text: #ECECEC;
  --wx-text2: #98989F;
  --wx-sep: #3A3A3A;
  --wx-grad-start: #2BCB6C;
  --wx-grad-end: #07C160;
  --wx-radius: 18px;
  --wx-shadow: none;
  --wx-bg-texture: none;
  --wx-page-bg: #000000;
  --wx-card-bg: #1C1C1E;
  --wx-tabbar-bg: rgba(25,25,25,.94);
  --wx-search-bg: #191919;
  --wx-mehead-grad1: #07C160;
  --wx-mehead-grad2: #2BCB6C;
}

/* ---- 主题切换过渡动画 ---- */
html.theme-transition,
html.theme-transition * {
  transition: background-color 300ms ease,
              color 300ms ease,
              border-color 300ms ease,
              box-shadow 300ms ease !important;
}