/* ============================================================
   base.css —— 企业电子名片 H5 基础样式
   1. CSS 变量（全局唯一样式来源，架构 §8.2）
   2. Reset 与排版
   3. 通用组件：.btn 系列 / .card / .section-title /
      .toast / .lightbox / .confirm-dialog / 入场动效 .reveal
   注：全项目 z-index 统一在 layout.css 底部「层级表」维护，
       本文件不书写任何 z-index。
   ============================================================ */

/* ---------- 1. CSS 变量 ---------- */
/* v73：:root 默认值随默认主题换代 —— 由「藏蓝金」改为「冷白铂金 cool-platinum」
   （与 themes.css 第 1 套、theme.js DEFAULT_THEME 三者同值）。
   作用：在 applyTheme 写入 data-theme 之前的那一帧，页面已是新默认主题的浅色底，
   不会闪一下深蓝。 */
:root {
  --c-primary: #5C6773;        /* 铂金银灰主色 */
  --c-primary-2: #8A96A3;      /* 渐变辅助银灰 */
  --c-primary-deep: #3E4753;   /* 渐变深端 */
  --c-gold: #A9B3BF;           /* 银灰点缀 */
  --c-gold-light: #C6CED7;     /* 银灰渐变亮端 */
  --c-gold-soft: rgba(169, 179, 191, 0.18);
  --c-bg: #F6F7F9;             /* 月白纸底 */
  --c-card: #FFFFFF;
  --c-text: #1F242B;
  --c-text-2: #5A626C;
  --c-text-3: #98A0AA;
  --c-line: #E4E7EB;
  --c-danger: #C9433F;

  /* v57（手机端四页展示布局重设计）新增 token：浅色主题默认取设计稿原值；
     历史深色主题（graphite，v73 已随主题换代移除）曾在 themes.css 逐项覆盖 ——
     深色底上直接用 #2B3A67 深蓝字或 #EEF0F4 细线会变成「看不见」，
     故一律走变量不走字面量（这条纪律对将来任何深色主题仍然成立）。 */
  --c-title: #232A33;          /* 板块标题主色（中文） */
  --c-eyebrow: #AEB6C0;        /* 板块标题英文眉标 */
  --c-line-soft: #EEF0F3;      /* 细边线（板块卡描边） */
  --c-gold-bar-1: #C6CED7;     /* 标题金线渐变（亮端） */
  --c-gold-bar-2: #A9B3BF;     /* 标题金线渐变（暗端） */
  --c-price: #8A6A3A;          /* 价格/强调暖色（商品价） */

  --radius-card: 16px;
  --radius-btn: 999px;
  --shadow-card: 0 4px 16px rgba(92, 103, 115, .08);
  --shadow-float: 0 12px 40px rgba(62, 71, 83, .20);
  --shadow-soft: 0 2px 10px rgba(92, 103, 115, .05);  /* v57：细边线卡轻投影 */

  --safe-bottom: env(safe-area-inset-bottom, 0px);
  /* 页签安全区规范（R4/U1 治本，唯一定义处）：三页顶部内容偏移一律 var(--safe-top)，
     禁止手写顶部像素；改页签尺寸时同步 --tabbar-top/--tabbar-h */
  --tabbar-top: 12px;                                          /* 页签顶偏移（与 layout.css .top-tab{top} 同源） */
  --tabbar-h: 44px;                                            /* 页签胶囊高度 */
  --safe-top: calc(var(--tabbar-top) + var(--tabbar-h) + 8px); /* ≈64px：三页顶部内容安全区下限 */
  --font-base: -apple-system, 'PingFang SC', 'HarmonyOS Sans SC', 'Microsoft YaHei', Inter, sans-serif;
}

/* ---------- 2. Reset 与排版 ---------- */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }

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

body {
  font-family: var(--font-base);
  font-size: 14px;
  line-height: 1.6;
  color: var(--c-text);
  background: var(--c-bg);
  -webkit-font-smoothing: antialiased;
  overflow: hidden; /* 页面滚动发生在 .page 内部 */
}

img, video { display: block; max-width: 100%; }
img { -webkit-user-drag: none; user-select: none; }

ul, ol { list-style: none; }
a { color: inherit; text-decoration: none; }
button, input, textarea, select {
  font-family: inherit;
  font-size: inherit;
  color: inherit;
  -webkit-tap-highlight-color: transparent;
}
button { cursor: pointer; background: none; border: 0; }
button:disabled { opacity: .5; cursor: not-allowed; }
/* v46（用户报告按键点击不灵敏）：全部可点元素禁用双击缩放手势——
   iOS Safari（部分安卓 WebView 同）在快速连点时会等待第二击判定缩放，
   首击 click 被延迟/吞掉，观感即"点了多次没反应"；manipulation 保留
   平移/缩放基础手势（页面滚动不受影响，滚动由 .page 的 pan-y 管）。 */
button, a, [role="button"] { touch-action: manipulation; }

/* ---------- 3. 通用组件 ---------- */

/* 3.1 按钮系列 */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 12px 20px;
  border-radius: var(--radius-btn);
  border: 0;
  font-size: 14px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: .5px;
  cursor: pointer;
  user-select: none;
  -webkit-user-select: none;
  transition: transform .18s ease, opacity .18s ease, box-shadow .18s ease;
}
.btn:active { transform: scale(.96); }

.btn-primary {
  background: linear-gradient(135deg, var(--c-primary) 0%, var(--c-primary-2) 100%);
  color: #fff;
  box-shadow: 0 4px 12px rgba(15, 43, 91, .28);
}
.btn-ghost {
  background: transparent;
  color: var(--c-primary);
  border: 1px solid var(--c-line);
}
.btn-sm { padding: 9px 16px; font-size: 13px; }

/* 3.2 卡片 */
.card {
  background: var(--c-card);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
}

/* 3.3 板块标题：金色竖线 + 深色粗体（+ 可选英文小字）
 * v57：四页统一「金线竖条 3×12 渐变 + 中文 14.5/700 + 英文眉标 9px」——
 *   间距收紧（gap 10→6、margin-bottom 14→10），金线由 4×18 改 3×12 并换用
 *   --c-gold-bar-1/2（设计稿 #d9b76a→#c9a35c）。 */
.section-title {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 10px;
}
.section-title::before {
  content: '';
  flex: none;
  width: 3px;
  height: 12px;
  border-radius: 2px;
  background: linear-gradient(180deg, var(--c-gold-bar-1) 0%, var(--c-gold-bar-2) 100%);
}
.section-title-text {
  font-size: 14.5px;
  font-weight: 700;
  color: var(--c-title);
  letter-spacing: .3px;
}
.section-title-sub {
  font-size: 9px;
  font-weight: 600;
  color: var(--c-eyebrow);
  letter-spacing: 1px;
}

/* 3.5 Toast 轻提示（单例，挂在 .overlay-root） */
.toast {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%) scale(.92);
  max-width: 76%;
  padding: 12px 22px;
  border-radius: 12px;
  background: rgba(17, 24, 39, .88);
  color: #fff;
  font-size: 14px;
  line-height: 1.5;
  text-align: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity .22s ease, transform .22s ease;
}
.toast.is-show { opacity: 1; transform: translate(-50%, -50%) scale(1); }

/* 3.6 灯箱：全屏图片预览
   v154（需求③）：支持多图浏览 —— 左右箭头 + 计数；单图时两者都不渲染（hidden）。 */
.lightbox {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  padding: 24px;
  background: rgba(10, 14, 22, .92);
  animation: ui-fade-in .2s ease;
}
.lightbox-img {
  max-width: 94%;
  max-height: 74%;
  object-fit: contain;
  border-radius: 8px;
  box-shadow: 0 18px 60px rgba(0, 0, 0, .5);
  /* 多图时避免长按弹系统菜单挡住滑动手势（单图同样只影响交互，不改视觉） */
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
  /* iOS 上禁止图片被单独拖动，横向手势交给滑动手势处理 */
  -webkit-user-drag: none;
}
/* v154：多图箭头。绝对定位在左右两侧垂直居中，不参与 .lightbox 的纵向 flex 流。 */
.lightbox-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 40px;
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 12px;
  background: rgba(255, 255, 255, .14);
  color: #fff;
  font-size: 26px;
  line-height: 1;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: background .16s ease, opacity .16s ease;
}
.lightbox-nav.is-prev { left: 8px; }
.lightbox-nav.is-next { right: 8px; }
.lightbox-nav:active { background: rgba(255, 255, 255, .26); }
/* ⚠ 必须显式写：`.lightbox-nav` 自带 display:flex，其类选择器会**压过** UA 样式
   `[hidden] { display: none }`（0,1,0 vs 0,1,0 但作者样式优先）⇒ 单图场景箭头仍可见。
   `[hidden]` 属性选择器与类组合后特异性更高，才真正隐藏。 */
.lightbox-nav[hidden] { display: none; }
/* 到头了：变淡 + 不可点（不做首尾循环，避免"下一页突然回到第一张"的困惑） */
.lightbox-nav[disabled] { opacity: .26; pointer-events: none; }
/* v154：计数「第 N / 共 M 张」。与标题同列，标题为空时计数单独占位。 */
.lightbox-counter {
  color: rgba(255, 255, 255, .62);
  font-size: 12px;
  letter-spacing: .02em;
}
.lightbox-caption {
  max-width: 82%;
  color: rgba(255, 255, 255, .86);
  font-size: 13px;
  text-align: center;
}
.lightbox-close {
  position: absolute;
  top: 16px;
  right: 16px;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .16);
  color: #fff;
  font-size: 17px;
  line-height: 1;
}

/* 3.7 确认弹窗（与分享浮层同级，避免与管理面板互相遮挡） */
.confirm-dialog {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 32px;
  background: rgba(10, 14, 22, .55);
  animation: ui-fade-in .18s ease;
}
.confirm-box {
  width: 100%;
  max-width: 320px;
  background: #fff;
  border-radius: var(--radius-card);
  padding: 24px 22px 16px;
  box-shadow: var(--shadow-float);
  text-align: center;
}
.confirm-title { font-size: 16px; font-weight: 700; color: var(--c-text); }
.confirm-message { margin-top: 8px; font-size: 13px; color: var(--c-text-2); }
/* v66（需求 2）：确认弹窗内的选填留言输入框（交换名片申请） */
.confirm-textarea {
  display: block;
  width: 100%;
  box-sizing: border-box;
  margin-top: 14px;
  padding: 10px 12px;
  min-height: 72px;
  resize: none;
  border: 1px solid var(--c-line, #e5e7eb);
  border-radius: 10px;
  background: #f8fafc;
  font-size: 13px;
  line-height: 1.5;
  color: var(--c-text);
  text-align: left;
  font-family: inherit;
}
.confirm-textarea:focus {
  outline: none;
  border-color: var(--c-primary, #2563eb);
  background: #fff;
}
.confirm-textarea-hint { margin-top: 6px; font-size: 11px; color: var(--c-text-3, #9ca3af); text-align: left; }
/* v75：举报弹层（复用 .confirm-dialog / .confirm-box 外壳） */
.rpt-target { margin-top: 6px; font-size: 12px; color: var(--c-text-3, #9ca3af); }
.rpt-rows { margin-top: 12px; display: flex; flex-direction: column; gap: 2px; text-align: left; }
.rpt-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border-radius: 8px;
  font-size: 13px;
  color: var(--c-text);
  cursor: pointer;
}
.rpt-row.is-on { background: var(--c-bg, #f1f5f9); }
.rpt-row input[type="radio"] { accent-color: var(--c-primary, #2563eb); margin: 0; flex: none; }
.confirm-actions {
  display: flex;
  gap: 12px;
  margin-top: 20px;
}
.confirm-actions .btn { flex: 1; }
.btn-danger {
  background: var(--c-danger);
  color: #fff;
  box-shadow: 0 4px 12px rgba(220, 38, 38, .28);
}

/* 3.8 入场动效（IntersectionObserver 驱动，respect reduced-motion） */
.reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity .5s ease, transform .5s ease;
}
.reveal.is-visible { opacity: 1; transform: none; }

@keyframes ui-fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes ui-slide-up {
  from { transform: translateY(100%); }
  to { transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
  .lightbox, .confirm-dialog { animation: none; }
  .toast { transition: opacity .15s ease; }
}

/* ============================================================
 * 3.9 v145（需求①）：分享深链首屏骨架
 * ------------------------------------------------------------
 * 触发条件：URL 带 m=art:<id> / m=sku:<id> ⇒ index.html 的解析期脚本给 <html>
 *   打 data-deeplink="1"（解析期即生效，不等任何外部资源）。
 * 目的：好友点开分享卡片后、卡片数据回来前（实测 0.5~1s，弱网更久）原本是**白屏**，
 *   随后又先画名片首页再跳走。这层骨架让第一眼就有内容感，与正文/抽屉交叉淡出。
 * 为什么用两个伪元素：不新增 DOM（不影响 v103 的首屏静态闭包与任何渲染断言），
 *   且 ::before/::after 天然不参与 .page 布局与滚动。
 * 层级 880：高于一切内容层（mp-detail 200 / inquiry 600），低于 Toast(900) ——
 *   保证"内容已删"那类提示不会被盖住。
 * 关闭：main.js 在正文/抽屉就绪（或降级落列表）后置 data-deeplink="out"（180ms
 *   淡出）再移除属性；普通访问（无 m 参数）永远不带这个标记，零影响。
 * ============================================================ */
html[data-deeplink] body::before,
html[data-deeplink] body::after {
  content: '';
  position: fixed;
  z-index: 880;
  pointer-events: none;
  opacity: 1;
  transition: opacity .18s ease;
}
/* 底色层：中性浅底 + 顶部主题色细条（主题由 v143 解析期 data-theme 决定，不会闪错色） */
html[data-deeplink] body::before {
  inset: 0;
  background: #f4f5f7;
  border-top: 3px solid var(--c-primary, #8c1f28);
}
/* 骨架层：一张封面块 + 三行文字占位（纯 CSS 渐变，无额外节点） */
html[data-deeplink] body::after {
  top: 96px;
  left: 20px;
  right: 20px;
  height: 182px;
  border-radius: 14px;
  background:
    linear-gradient(#e6e9ef, #e6e9ef) 0 0 / 100% 96px no-repeat,
    linear-gradient(#eceff4, #eceff4) 0 112px / 70% 14px no-repeat,
    linear-gradient(#eceff4, #eceff4) 0 136px / 88% 14px no-repeat,
    linear-gradient(#eceff4, #eceff4) 0 160px / 48% 14px no-repeat;
}
html[data-deeplink='out'] body::before,
html[data-deeplink='out'] body::after { opacity: 0; }

/* ============================================================
   §21 v151（需求一）：ICP 备案页脚**迁出全站**
   ------------------------------------------------------------
   v150 曾在 index/auth/admin/ops/org 五页挂底部固定页脚（本节即其唯一实现）；
   v151 用户指令改为「只保留名片夹首页一处，且落在页脚品牌行下方」——
   页脚本体由卡片页脚渲染（见 js/pages/page-card.js 的 buildFooter + css/card.css 的
   .card-footer-icp），因此本节所有固定页脚规则、以及底栏/落地页/企业页的让位规则
   全部删除，其余页面的布局回到 v149 原样（手机框滚动区 544 → 564）。
   备案号文本仍以 `icp.config.json` 为唯一事实源，由 `qa-test/tools/icp-apply.cjs`
   生成 `js/core/icp.js`（前端 import），改号只改配置文件一处。
   ============================================================ */