/* ============================================================
   轴轴控 · 公众号 H5 防伪查询 · 样式
   原生 CSS（不引入任何构建工具与框架）
   2026-10-14：设计令牌与官网首页（zhouzhoukong.com）对齐，
   统一品牌色 / 衬线展示字体 / 卡片顶栏渐变 / 胶囊按钮 / 深蓝页脚。
   ============================================================ */

:root {
  /* —— 品牌色（与官网首页对齐） —— */
  --brand: #0f6fd6;
  --brand-600: #0b57ad;
  --brand-deep: #0a2149;
  --brand-deep-2: #14408f;
  --accent: #8fc3ff;

  /* —— 中性色（与官网对齐） —— */
  --ink: #141c2b;
  --ink-2: #33415c;
  --muted: #5b6b85;
  --line: #e2e9f4;

  /* —— 浅色域 / 背景（与官网对齐） —— */
  --soft: #f2f6fd;
  --bg: #f2f6fd;
  --surface: #ffffff;
  --brand-soft: #e8f1ff;

  /* —— 兼容旧类名别名：H5 既有规则引用，统一重定向到品牌色 —— */
  --blue-50: #e8f1ff;
  --blue-500: #0f6fd6;
  --blue-600: #0b57ad;
  --blue-700: #0a2149;
  --gray-50: #f3f7fd;
  --gray-100: #eef3fa;
  --gray-200: #e2e9f4;
  --gray-400: #7e8da6;
  --gray-500: #5b6b85;
  --gray-600: #33415c;
  --gray-800: #141c2b;
  --gray-900: #0a1730;

  /* —— 状态色（保持可辨识，略向品牌靠拢） —— */
  --green-50: #eefaf1;
  --green-200: #bcf0c8;
  --green-500: #1fae57;
  --green-600: #15914a;
  --green-700: #117a3d;
  --orange-50: #fff3e6;
  --orange-500: #f08000;
  --orange-700: #c25a00;
  --orange-800: #9a4500;
  --red-50: #fdecec;
  --red-500: #ec4d4d;
  --red-600: #d73636;

  /* —— 渐变（与官网英雄区 / 页脚对齐） —— */
  --gradient-primary: linear-gradient(135deg, #0a2149 0%, #14408f 55%, #0b57ad 100%);
  --gradient-banner: linear-gradient(150deg, #0a2149 0%, #14408f 55%, #0b57ad 100%);
  --gradient-btn: linear-gradient(135deg, #0f6fd6 0%, #0b57ad 100%);
  --gradient-footer: linear-gradient(180deg, #0b244f 0%, #081a3a 100%);

  /* —— 字体：标题用衬线展示体（与官网一致，建立戏剧化层级），正文用黑体 —— */
  --font-sans: "Source Han Sans SC", "Noto Sans SC", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
  --font-display: "Source Han Serif SC", "Noto Serif SC", "Songti SC", "STSong", "SimSun", serif;

  --radius: 16px;
  --shadow-sm: 0 1px 2px rgba(16, 36, 74, .06), 0 10px 26px -14px rgba(16, 36, 74, .22);
  --shadow-lg: 0 22px 48px -20px rgba(10, 33, 73, .5);
  --shadow-cta: 0 12px 26px -12px rgba(10, 33, 73, .55);
  --shadow-card: var(--shadow-sm);
}

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

html, body {
  min-height: 100%;
  /* 背景氛围：两道斜向光晕（与官网首页一致），取代纯色平涂 */
  background-color: var(--bg);
  background-image:
    radial-gradient(700px 360px at 8% -8%, rgba(15, 111, 214, .12), transparent 60%),
    radial-gradient(560px 320px at 100% 0%, rgba(143, 195, 255, .14), transparent 58%);
  background-repeat: no-repeat;
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: 15px;
  line-height: 1.6;
  -webkit-text-size-adjust: 100%;
}

/* 统一可见焦点态（与官网一致，无障碍可达） */
a:focus-visible, button:focus-visible, .tab:focus-visible {
  outline: 3px solid var(--brand);
  outline-offset: 3px;
  border-radius: 8px;
}

.page { min-height: 100vh; padding-bottom: 24px; }
.hidden { display: none !important; }
.text-muted { color: var(--gray-400); }
.text-danger { color: var(--red-600); }
.text-blue { color: var(--blue-600); }

/* ===== 顶部 Banner（对齐官网首页 Hero：深蓝渐变 + 斜切光带 + 缓动扫描线） ===== */
.topbar {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  background: var(--gradient-banner);
  padding: 20px 16px 24px;
  display: flex;
  flex-direction: column;
  align-items: center;
}
/* 斜切光带 */
.topbar::before {
  content: "";
  position: absolute;
  inset: -30% -12%;
  z-index: -2;
  background: linear-gradient(105deg, transparent 42%, rgba(255, 255, 255, .10) 47%, rgba(143, 195, 255, .20) 52%, transparent 58%);
  transform: skewY(-6deg);
}
/* 缓动扫描线：隐喻「扫码验真」，与官网首页 Hero 扫描线同源 */
.topbar::after {
  content: "";
  position: absolute;
  left: 0; right: 0; top: 8%;
  height: 2px;
  z-index: 0;
  pointer-events: none;
  background: linear-gradient(90deg, transparent, rgba(143, 195, 255, .85), transparent);
  animation: topbar-scan 7s ease-in-out infinite;
}
@keyframes topbar-scan {
  0% { top: 8%; opacity: 0; }
  12% { opacity: .9; }
  88% { opacity: .9; }
  100% { top: 96%; opacity: 0; }
}
.brand, .brand-sub { position: relative; z-index: 1; }
.brand { display: flex; align-items: center; justify-content: center; gap: 8px; }
/* 品牌 logo：满铺显示 + 半透明白描边（与官网首页 Hero logo 同源），
   不再用白色衬底框——白块在深蓝 Banner 上过跳 */
.brand-logo {
  width: 38px; height: 38px; box-sizing: border-box;
  background: transparent; border-radius: 10px; object-fit: cover;
  border: 1px solid rgba(255, 255, 255, .28);
  box-shadow: 0 4px 14px rgba(4, 18, 44, .45);
}
/* 品牌名用衬线展示体，与官网首页 logo 字体一致 */
.brand-name { font-size: 21px; font-weight: 700; color: #fff; font-family: var(--font-display); letter-spacing: 2px; }
.brand-sub { text-align: center; color: rgba(255, 255, 255, .9); font-size: 12px; margin-top: 6px; }
/* 顶部 Banner 徽标（与官网首页 Hero 徽标同源：胶囊 + 浅色描边 + 天蓝圆点） */
.topbar-badge {
  display: inline-flex; align-items: center; gap: 7px;
  margin: 0 0 12px; padding: 6px 14px;
  border-radius: 999px; border: 1px solid rgba(255, 255, 255, .30);
  background: rgba(255, 255, 255, .10);
  color: #fff; font-size: 12px; letter-spacing: 1px; position: relative; z-index: 1;
}
.topbar-badge .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); flex: none; }

/* 结果页 / 异常页顶栏（带返回）：沿用深蓝渐变，与 Banner 同源 */
.navbar {
  display: flex; align-items: center; gap: 10px;
  position: relative;
  background: var(--gradient-banner); color: #fff; padding: 14px 16px;
}
.navbar .back { font-size: 22px; color: #fff; text-decoration: none; line-height: 1; }
.navbar .nav-title { font-size: 17px; font-weight: 600; font-family: var(--font-display); letter-spacing: 1px; }

/* ===== 容器与卡片（对齐官网首页卡片：16px 圆角 + 顶栏渐变描边 + 浅阴影） ===== */
.content { padding: 16px; }
.card {
  position: relative;
  overflow: hidden;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 16px;
  margin-bottom: 12px;
  box-shadow: var(--shadow-card);
  transition: box-shadow .2s ease, transform .2s ease, border-color .2s ease;
}
/* 卡片顶栏渐变描边（与官网首页能力卡片同源） */
.card::before {
  content: "";
  position: absolute;
  left: 0; right: 0; top: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--brand) 0%, var(--accent) 100%);
}
.card-title {
  font-size: 16px; font-weight: 700; color: var(--ink);
  margin-bottom: 12px; font-family: var(--font-display); letter-spacing: .5px;
}
.card-title .sub { font-size: 12px; font-weight: 400; color: var(--gray-400); margin-left: 6px; }
.row-between { display: flex; align-items: center; justify-content: space-between; }

/* ===== Tab ===== */
.tabs { display: flex; background: #fff; border-radius: 12px; overflow: hidden; margin-bottom: 12px; border: 1px solid var(--line); }
.tab {
  flex: 1; text-align: center; padding: 12px 0; font-size: 14px;
  color: var(--gray-500); border-bottom: 2px solid transparent; cursor: pointer;
}
.tab.active { color: var(--blue-600); font-weight: 700; border-bottom-color: var(--blue-500); }
.tab-pane { display: none; }
.tab-pane.active { display: block; }

/* ===== 扫码区 ===== */
.scan-area { text-align: center; padding: 24px 0 8px; }
.scan-circle {
  width: 110px; height: 110px; border-radius: 50%; margin: 0 auto 14px;
  /* 深蓝渐变描边（与官网卡片描边同源）：白底 + 渐变环 + 深蓝字 */
  background:
    linear-gradient(#fff, #fff) padding-box,
    var(--gradient-primary) border-box;
  border: 3px solid transparent;
  color: var(--brand-600);
  font-size: 44px; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 4px 16px rgba(10, 33, 73, .18);
}
.scan-title { font-size: 19px; font-weight: 700; color: var(--ink); font-family: var(--font-display); }
.scan-desc { font-size: 13px; color: var(--gray-500); margin-top: 6px; }

/* ===== 表单 ===== */
.form-group { margin-bottom: 14px; }
.form-label { display: block; font-size: 13px; color: var(--gray-600); margin-bottom: 6px; }
.form-label .req { color: var(--red-600); }
.input {
  width: 100%; height: 46px; border: 1px solid var(--gray-200); border-radius: 10px;
  padding: 0 14px; font-size: 15px; color: var(--gray-800); background: var(--gray-50);
  outline: none; -webkit-appearance: none;
}
.input:focus { border-color: var(--blue-500); background: #fff; }
.input.error { border-color: var(--red-500); background: var(--red-50); }
textarea.input { height: 92px; padding: 10px 14px; line-height: 1.5; resize: none; }
/* 首页「防伪编码查询」输入框加高（对齐小程序 104rpx≈52px，仅作用于 index.html 的 #inp-code） */
#inp-code { height: 52px; padding: 0 16px; font-size: 16px; font-weight: 500; letter-spacing: 1px; }
.err-text { font-size: 12px; color: var(--red-600); margin-top: 6px; }
.hint-text { font-size: 12px; color: var(--gray-400); margin-top: 6px; }
.select {
  width: 100%; height: 46px; border: 1px solid var(--gray-200); border-radius: 10px;
  padding: 0 14px; font-size: 15px; background: var(--gray-50); color: var(--gray-800);
  -webkit-appearance: none; appearance: none; outline: none;
}

/* ===== 按钮（对齐官网首页：胶囊形 + 品牌渐变 + 悬浮微抬升） ===== */
.btn {
  display: block; width: 100%; height: 50px; line-height: 50px; text-align: center;
  border: none; border-radius: 999px; font-size: 16px; font-weight: 700; color: #fff;
  background: var(--gradient-btn); box-shadow: var(--shadow-cta); cursor: pointer;
  font-family: var(--font-sans);
  transition: transform .18s ease, box-shadow .18s ease, opacity .18s ease, background .18s ease;
}
.btn:hover { text-decoration: none; transform: translateY(-2px); box-shadow: 0 18px 34px -14px rgba(10, 33, 73, .6); }
.btn:active { transform: translateY(0); opacity: .92; }
.btn.ghost { background: #fff; color: var(--brand-600); border: 1px solid var(--brand); box-shadow: none; }
.btn.ghost:hover { background: var(--brand-soft); border-color: var(--brand-600); }
.btn.disabled, .btn:disabled { background: var(--gray-200); color: var(--gray-400); box-shadow: none; cursor: not-allowed; transform: none; }
.btn-row { display: flex; gap: 10px; }
.btn-row .btn { flex: 1; }

/* ===== 防伪码展示（4 段 × 5 位，强制单行不换行） ===== */
.code-box { display: flex; justify-content: center; gap: 6px; flex-wrap: nowrap; margin: 14px 0; }
.code-seg {
  flex: 1 1 0; min-width: 0; white-space: nowrap; text-align: center;
  background: var(--gray-50); border: 1px solid var(--gray-200); border-radius: 6px;
  padding: 8px 4px; font-size: 17px; font-weight: 700; color: var(--gray-800); letter-spacing: 1px;
}
/* 窄屏兜底（iPhone SE 1 代 320px 等）：H5 无 rpx 等比缩放，字号需显式降档，
   否则 5 位数字 + 内距会超过每段可用宽度（375px 下无需降档，余量充足） */
@media (max-width: 359px) {
  .code-seg { font-size: 15px; letter-spacing: 0; padding: 8px 2px; }
  .code-box { gap: 4px; }
}

/* ===== 结论区 ===== */
.result-head { text-align: center; }
.result-icon {
  width: 56px; height: 56px; border-radius: 50%; margin: 0 auto 10px;
  background: var(--green-500); color: #fff; font-size: 30px;
  display: flex; align-items: center; justify-content: center;
}
.result-icon.warn { background: var(--orange-500); }
.result-icon.err { background: var(--red-500); }
.result-title { font-size: 21px; font-weight: 700; color: var(--ink); font-family: var(--font-display); }
.result-desc { font-size: 13px; color: var(--gray-500); margin-top: 6px; }

/* ===== 信息行 ===== */
.info-row { display: flex; font-size: 13px; padding: 8px 0; }
.info-row .k { color: var(--gray-500); min-width: 84px; flex-shrink: 0; }
.info-row .v { color: var(--gray-800); flex: 1; word-break: break-all; }
.info-row + .info-row { border-top: 1px solid var(--gray-100); }

/* ===== 警示框 ===== */
.warn-box {
  display: flex; gap: 10px; align-items: flex-start; background: var(--orange-50);
  border-radius: 10px; padding: 12px; margin-top: 12px;
}
.warn-box .ic {
  width: 22px; height: 22px; border-radius: 50%; background: var(--orange-700);
  color: #fff; font-size: 14px; text-align: center; line-height: 22px; flex-shrink: 0;
}
.warn-box .tx { font-size: 12px; color: var(--orange-800); line-height: 1.7; }
.warn-box.red { background: var(--red-50); }
.warn-box.red .ic { background: var(--red-500); }
.warn-box.red .tx { color: var(--red-600); }
.warn-box.green { background: var(--green-50); }
.warn-box.green .ic { background: var(--green-500); }
.warn-box.green .tx { color: var(--green-700); }

/* ===== 左右眼 Tab ===== */
.eye-tabs { display: flex; border-bottom: 1px solid var(--gray-200); margin-bottom: 12px; }
.eye-tab {
  flex: 1; text-align: center; padding: 8px 0; font-size: 13px;
  color: var(--gray-500); border-bottom: 2px solid transparent; margin-bottom: -1px; cursor: pointer;
}
.eye-tab.active { color: #fff; background: var(--blue-500); border-bottom-color: var(--blue-500); font-weight: 700; }
.eye-tag {
  display: inline-block; background: var(--blue-50); color: var(--blue-600);
  font-size: 12px; font-weight: 700; border-radius: 4px; padding: 1px 8px;
}

/* ===== 佩戴者 ===== */
.wearer {
  display: flex; align-items: center; gap: 12px; padding: 10px 0;
}
.wearer + .wearer { border-top: 1px solid var(--gray-100); }
.wearer-avatar {
  width: 44px; height: 44px; border-radius: 50%; background: var(--blue-50);
  color: var(--blue-600); font-size: 15px; font-weight: 700;
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.wearer-name { font-size: 14px; color: var(--blue-500); }
.wearer-phone { font-size: 12px; color: var(--gray-400); }
.flag-main {
  display: inline-block; background: var(--blue-500); color: #fff; font-size: 11px;
  border-radius: 4px; padding: 0 6px; margin-left: 6px; vertical-align: middle;
}

/* ===== 开关 ===== */
.switch-row { display: flex; align-items: center; justify-content: space-between; }
.switch-row .tx { font-size: 13px; color: var(--gray-600); }
.switch-row .sub { font-size: 12px; color: var(--gray-400); margin-top: 2px; }
.switch {
  position: relative; width: 46px; height: 26px; border-radius: 13px;
  background: var(--gray-200); transition: background .2s; flex-shrink: 0;
}
.switch .knob {
  position: absolute; top: 2px; left: 2px; width: 22px; height: 22px;
  border-radius: 50%; background: #fff; transition: left .2s; box-shadow: 0 1px 3px rgba(0, 0, 0, .2);
}
.switch.on { background: var(--blue-500); }
.switch.on .knob { left: 22px; }
.switch.disabled { opacity: .45; }

/* ===== 去小程序引导 ===== */
.jump-box { text-align: center; padding: 8px 0 0; }
.jump-qr { width: 160px; height: 160px; margin: 12px auto; display: block; }
.jump-tip { font-size: 12px; color: var(--gray-500); line-height: 1.8; }
.jump-fallback {
  border: 1px dashed var(--gray-200); border-radius: 10px; padding: 24px 12px;
  color: var(--gray-400); font-size: 13px; margin: 12px auto; max-width: 200px;
}

/* ===== 弹层 ===== */
.mask {
  position: fixed; left: 0; top: 0; right: 0; bottom: 0; background: rgba(0, 0, 0, .45);
  z-index: 1000; display: flex; align-items: flex-end; justify-content: center;
}
.sheet {
  background: #fff; width: 100%; border-radius: 20px 20px 0 0; padding: 0 20px 24px;
  max-height: 88vh; overflow-y: auto;
}
.sheet-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 0 12px; border-bottom: 1px solid var(--gray-100); margin-bottom: 16px;
}
.sheet-title { font-size: 17px; font-weight: 600; font-family: var(--font-display); }
.sheet-close {
  width: 28px; height: 28px; border: none; background: var(--gray-100);
  border-radius: 50%; color: var(--gray-400); font-size: 16px; line-height: 28px;
}

/* ===== 空态 / 加载 ===== */
.empty { padding: 32px 16px; text-align: center; color: var(--gray-400); font-size: 13px; }
/* 加载态：转圈动画过渡（与小程序 .loading-box 三件套一致） */
.loading-box { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 60px 0; }
.loading-spinner {
  width: 32px; height: 32px; border-radius: 50%; box-sizing: border-box;
  /* 轨道用 gray-200：白卡片与浅蓝底上都能看清；蓝色弧线为旋转可见部分 */
  border: 3px solid var(--gray-200); border-top-color: var(--blue-500);
  animation: loading-spin 0.8s linear infinite;
}
@keyframes loading-spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
.loading-text { margin-top: 12px; text-align: center; color: var(--gray-500); font-size: 14px; }

/* ===== 引导页 ===== */
.guide-wrap { padding: 80px 24px; text-align: center; }
/* 引导页品牌标识：不使用微信气泡等近似微信的视觉元素（外链规范 2.16.2） */
.guide-logo {
  display: block; width: 64px; height: 64px; margin: 0 auto 16px;
  border-radius: 16px; background: #fff; object-fit: contain;
  box-shadow: 0 4px 14px rgba(10, 33, 73, .18);
}
.guide-icon { font-size: 56px; margin-bottom: 16px; }
.guide-title { font-size: 19px; font-weight: 700; color: var(--ink); margin-bottom: 10px; font-family: var(--font-display); }
.guide-desc { font-size: 13px; color: var(--gray-500); line-height: 1.9; }
.guide-url {
  margin-top: 16px; padding: 10px; background: var(--gray-50); border-radius: 8px;
  font-size: 12px; color: var(--gray-600); word-break: break-all;
}

/* ===== 非微信环境提示条（外链规范 3.2.3：仅提示、不阻断） ===== */
.env-tip { background: var(--orange-50); border-radius: 10px; padding: 12px 14px; margin-bottom: 12px; }
.env-tip-tx { font-size: 13px; color: var(--orange-800); line-height: 1.7; }
.env-tip-link {
  margin-top: 6px; padding: 0; border: none; background: none;
  font-size: 13px; font-weight: 700; color: var(--blue-600); text-decoration: underline;
}

/* ===== 合规信息区（外链规范 2.18.4：运营主体 / 备案号 / 联系方式须可追溯） ===== */
.compliance { padding: 0 8px; }
.cp-line { text-align: center; font-size: 12px; color: var(--gray-400); line-height: 1.9; }
.cp-line b { color: var(--gray-500); font-weight: 600; }
.cp-link { color: var(--gray-400); text-decoration: none; }
.cp-sep { margin: 0 6px; color: var(--gray-200); }
/* 备案徽章：与官网首页页脚同款——徽标与备案号同处一个边框内，ICP 与公安备案两个徽章样式完全一致 */
.cp-badges { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; justify-content: center; margin-top: 6px; }
.cp-badge {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 3px 9px; border: 1px solid var(--gray-200); border-radius: 5px;
  background: var(--gray-50); font-size: 12px; line-height: 1.6;
  color: var(--gray-500); text-decoration: none;
}
.cp-badge img { width: 14px; height: 16px; display: block; flex: none; object-fit: contain; }
.cp-badge:active { background: var(--brand-soft); }
.cp-toggle {
  display: block; margin: 6px auto 0; padding: 0; border: none; background: none;
  font-size: 12px; color: var(--blue-600); text-decoration: underline;
}
.cp-body {
  margin-top: 8px; padding: 12px 14px; background: #fff; border-radius: 10px;
  box-shadow: var(--shadow-card); text-align: left;
}
.cp-body h4 { font-size: 13px; color: var(--gray-800); margin-bottom: 6px; }
.cp-body p { font-size: 12px; color: var(--gray-500); line-height: 1.8; margin-bottom: 8px; }
.cp-body p:last-child { margin-bottom: 0; }

/* ===== 底部版权（对齐官网首页页脚：深蓝渐变收口，与 Banner 呼应） ===== */
.footer {
  text-align: center; font-size: 12px; color: rgba(232, 238, 251, .8);
  margin: 8px -16px -24px;            /* 出血至页面两侧，全宽收口 */
  padding: 24px 16px 28px;
  background: var(--gradient-footer);
}

/* 开放标签容器（微信内跳转小程序） */
#launch-holder { min-height: 1px; }
wx-open-launch-weapp { display: block; width: 100%; }

/* ===== 动效降级：尊重 prefers-reduced-motion ===== */
@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
  .topbar::after { display: none; }
}