/* 哈尔斯真空器皿 · 网络防伪查询中心 —— 样式表 */

:root {
  --c-blue: #0b4fe8;
  --c-blue-deep: #0a41cf;
  --c-navy: #123a86;
  --c-yellow: #ffd21e;
  --c-yellow-deep: #ffc400;
  --c-ink: #12275c;
  /* 标签示意卡宽度，卡内尺寸依此等比缩放 */
  --label-w: clamp(240px, 23vw, 442px);
  --frame: clamp(10px, 1.85vw, 36px);
  --font-sans: "PingFang SC", "Microsoft YaHei", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }
html, body { height: 100%; }

body {
  margin: 0;
  font-family: var(--font-sans);
  color: #fff;
  background: #f5f5f5;
  -webkit-font-smoothing: antialiased;
}
/* ---------- 页面容器 ---------- */
.app {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: calc(100vh - 2 * var(--frame));
  min-height: calc(100dvh - 2 * var(--frame));
  margin: var(--frame);
  padding: clamp(16px, 2.2vw, 42px) clamp(16px, 3.6vw, 70px) clamp(24px, 14vh, 156px);
  border-radius: 20px;
  overflow: hidden;
  background: #1049f3 url("../images/pc_bg.png") center / cover no-repeat;
}

/* ---------- 顶部栏 ---------- */
.topbar {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: 20px;
}

/* ---------- 品牌标志 ---------- */
.topbar__brand { justify-self: start; display: block; line-height: 0; }
.brand__img { display: block; width: clamp(96px, 6.4vw, 124px); height: auto; }
/* ---------- 页面底部品牌标志（手机端显示） ---------- */
.footer { display: none; }
/* ---------- 底部翻页指示条（手机端显示） ---------- */
.pager { display: none; }
.footer__logo { display: block; width: 23vw; max-width: 110px; height: auto; }
/* ---------- 查询方式切换 ---------- */
.tabs {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .18);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12);
}
.tab {
  appearance: none;
  border: 0;
  cursor: pointer;
  border-radius: 999px;
  padding: clamp(4px, .42vw, 8px) clamp(12px, 1.5vw, 29px);
  font: inherit;
  font-size: clamp(12px, 1.06vw, 20px);
  font-weight: 700;
  white-space: nowrap;
  color: rgba(255, 255, 255, .94);
  background: transparent;
  transition: background-color .25s ease, color .25s ease;
}
.tab:hover { background-color: rgba(255, 255, 255, .16); }
.tab.is-active {
  background: linear-gradient(180deg, #ffd93f 0%, var(--c-yellow-deep) 100%);
  color: var(--c-navy);
  box-shadow: 0 6px 18px rgba(6, 30, 90, .22);
}
/* ---------- 语言切换 ---------- */
.langs { justify-self: end; display: flex; align-items: center; gap: clamp(8px, 1vw, 16px); }
.lang {
  appearance: none;
  border: 0;
  padding: 2px 0;
  background: none;
  cursor: pointer;
  font: inherit;
  font-size: clamp(12px, .85vw, 16px);
  font-weight: 700;
  letter-spacing: .06em;
  color: rgba(255, 255, 255, .68);
  transition: color .2s ease;
}
.lang:hover, .lang.is-active { color: #fff; }
.langs__sep { font-size: clamp(12px, .92vw, 20px); color: rgba(255, 255, 255, .5); }

/* ---------- 主体 ---------- */
.stage {
  position: relative;
  z-index: 1;
  flex: 1;
  display: grid;
  grid-template-columns: minmax(0, 792fr) minmax(0, 802fr);
  align-items: center;
  gap: 0;
  padding: 0 6.2vw 0 0;
}
/* ---------- 取景框 ---------- */
.visual { display: flex; align-items: center; justify-content: center; margin-top: min(30px, 1.55vw); padding-right: 2.9vw; }
.scan { position: relative; padding: 0; }
.scan__corner {
  position: absolute;
  width: clamp(20px, 1.56vw, 32px);
  height: clamp(20px, 1.56vw, 32px);
  border: 0 solid #fff;
}
.scan[data-mode="sn"] .scan__corner { width: clamp(15px, 1.2vw, 23px); height: clamp(15px, 1.2vw, 23px); }
.scan[data-mode="sn"] { margin-left: -4.42vw; }
.scan__corner--tl { top: 0; left: 0; border-top-width: 3px; border-left-width: 3px; }
.scan__corner--tr { top: 0; right: 0; border-top-width: 3px; border-right-width: 3px; }
.scan__corner--bl { bottom: 0; left: 0; border-bottom-width: 3px; border-left-width: 3px; }
.scan__corner--br { bottom: 0; right: 0; border-bottom-width: 3px; border-right-width: 3px; }
/* ---------- 左侧示意图（防伪标签 / SN码铭牌） ---------- */
.scan__stage {
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--label-w);
  height: calc(var(--label-w) * .674);
  transition: width .28s ease, height .28s ease;
}
.scan__stage[data-mode="sn"] { width: calc(var(--label-w) * 1.1991); height: calc(var(--label-w) * .457); }
.scan__img { display: block; width: 100%; height: 100%; object-fit: fill; }

/* ---------- 右侧查询区 ---------- */
.panel { display: flex; flex-direction: column; align-items: flex-start; max-width: 100%; }
.panel__title {
  margin: 0;
  font-size: clamp(23px, 3.12vw, 60px);
  font-weight: 800;
  line-height: 1.23;
  text-shadow: 0 8px 26px rgba(6, 30, 90, .18);
}
.panel__title span { display: block; }

.panel__desc {
  max-width: 36.3em;
  margin: clamp(10px, .87vw, 17px) 0 0;
  font-size: clamp(12px, .96vw, 18.5px);
  line-height: 1.19;
  color: rgba(255, 255, 255, .95);
}
.query { width: 100%; margin-top: clamp(36px, 5vw, 100px); }
.query__field {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 8px 8px clamp(14px, .95vw, 18px);
  border-radius: 999px;
  background: #fff;
  box-shadow: 0 12px 32px rgba(4, 22, 70, .2);
  transition: box-shadow .22s ease;
}
.query__field:focus-within {
  box-shadow: 0 12px 32px rgba(4, 22, 70, .2), 0 0 0 3px rgba(255, 210, 30, .55);
}

.query__input {
  flex: 1;
  min-width: 0;
  padding: clamp(6px, .42vw, 11px) 0;
  border: 0;
  outline: 0;
  background: transparent;
  font: inherit;
  font-size: clamp(14px, 1.15vw, 25px);
  font-weight: 700;
  color: var(--c-ink);
}
.query__input::placeholder { color: #a8a8a8; }
.query__btn {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: .2em;
  padding: clamp(9px, .54vw, 13px) clamp(16px, 1.25vw, 24px);
  border: 0;
  border-radius: 999px;
  cursor: pointer;
  font: inherit;
  font-size: clamp(12px, .96vw, 21px);
  font-weight: 800;
  color: var(--c-navy);
  background: linear-gradient(180deg, #ffd93f 0%, var(--c-yellow-deep) 100%);
  transition: filter .2s ease, transform .12s ease;
}

.query__btn:hover { filter: brightness(1.05); }
.query__btn:active { transform: translateY(1px); }
/* 查询中：按钮内箭头换成转圈提示（按钮保持可点，以最后一次查询为准） */
.query__btn.is-busy { cursor: progress; filter: saturate(.85); }
.query__btn.is-busy .query__arrow { display: none; }
.query__spinner {
  display: none;
  flex: none;
  width: 1em;
  height: 1em;
  box-sizing: border-box;
  border: .16em solid currentColor;
  border-top-color: transparent;
  border-radius: 50%;
  animation: querySpin .72s linear infinite;
}
.query__btn.is-busy .query__spinner { display: block; }
@keyframes querySpin { to { transform: rotate(360deg); } }
.query__arrow {
  width: 1em;
  height: 1em;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.panel__hint {
  margin: clamp(18px, 1.45vw, 28px) 0 0;
  font-size: clamp(11px, .8vw, 15.5px);
  font-weight: 500;
  line-height: 1.5;
  color: rgba(255, 255, 255, .74);
}
/* ---------- 结果弹窗 ---------- */
.topbar, .stage, .footer { transition: opacity .25s ease; }
.app.is-modal > .topbar,
.app.is-modal > .stage,
.app.is-modal > .footer { opacity: .35; pointer-events: none; }

.modal {
  position: absolute;
  inset: 0;
  z-index: 5;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(14px, 1.4vw, 27px) clamp(16px, 2vw, 38px) clamp(42px, 4.27vw, 82px);
}
.modal[hidden] { display: none; }
.modal__card:focus { outline: none; }
.modal__card {
  width: min(896px, 100%);
  padding: clamp(22px, 3.07vw, 59px) clamp(18px, 2vw, 38px) clamp(20px, 2.65vw, 51px);
  border-radius: clamp(16px, 1.56vw, 30px);
  background: #f6fcf9;
  color: #202020;
  text-align: center;
}
.modal__icon {
  display: block;
  width: clamp(30px, 3.17vw, 61px);
  height: clamp(30px, 3.17vw, 61px);
  margin: 0 auto;
}
.modal__text {
  margin: clamp(16px, 2.34vw, 45px) 0 0;
  font-size: clamp(13px, 1.14vw, 22px);
  font-weight: 500;
  line-height: 1.6;
}
.modal__line { display: block; }
.modal__line[hidden] { display: none; }
.modal__line--strong { font-weight: 700; }
.modal__code { font-weight: 700; color: #124df3; }
.modal__btn {
  min-width: clamp(112px, 9.63vw, 185px);
  height: clamp(34px, 2.65vw, 51px);
  margin-top: clamp(20px, 3.07vw, 59px);
  padding: 0 clamp(14px, 1.56vw, 30px);
  border: 0;
  border-radius: 999px;
  cursor: pointer;
  font: inherit;
  font-size: clamp(13px, 1.14vw, 22px);
  font-weight: 700;
  color: #f6fcf9;
  background: #124df5;
  transition: filter .2s ease, transform .12s ease;
}
.modal__btn:hover { filter: brightness(1.06); }
.modal__btn:active { transform: translateY(1px); }

/* ---------- 键盘焦点 ---------- */
.tab:focus-visible,
.lang:focus-visible,
.query__btn:focus-visible,
.topbar__brand:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
.modal__btn:focus-visible { outline: 2px solid #124df5; outline-offset: 3px; }

/* ---------- 响应式：中屏改为上下布局 ---------- */
@media (max-width: 1180px) {
  .stage {
    grid-template-columns: minmax(0, 1fr);
    justify-items: center;
    gap: clamp(26px, 4vh, 46px);
    padding: clamp(26px, 4vh, 48px) 0 0;
  }
  .panel { order: 1; align-items: center; text-align: center; width: 100%; max-width: 640px; }
  .visual { order: 2; margin-top: 0; padding-right: 0; }
  .scan[data-mode="sn"] { margin-left: 0; }
  .panel__desc { max-width: 34em; }
  .query { max-width: 560px; }
}
/* ---------- 响应式：小屏 ---------- */
@media (max-width: 820px) {
  .topbar { grid-template-columns: minmax(0, 1fr) auto; row-gap: clamp(14px, 2.4vh, 22px); }
  .topbar__brand { grid-area: 1 / 1; }
  .langs { grid-area: 1 / 2; }
  .tabs { grid-area: 2 / 1 / 3 / 3; justify-self: center; width: 100%; max-width: 420px; }
  .tab { flex: 1 1 0; min-width: 0; padding-left: 10px; padding-right: 10px; }
}

@media (max-width: 520px) {
  :root { --label-w: clamp(200px, 70vw, 320px); --frame: 8px; }
  .query__field { padding: 6px 6px 6px 16px; gap: 8px; }
  .query__btn { padding: 11px 16px; }
}

@media (max-height: 620px) and (min-width: 1181px) {
  .app { padding-top: 22px; padding-bottom: 24px; }
  .query { margin-top: 26px; }
  .panel__hint { margin-top: 16px; }
}

@media (prefers-reduced-motion: reduce) {
  * { transition-duration: .01ms !important; }
}


/* ---------- 响应式：手机端（按手机端设计稿等比还原） ----------
   设计稿里蓝色面板 749 × 1334，手机屏 778 宽（面板左右各留 15），
   面板下方再留 44 给底部翻页指示条；--u = 设计稿 1px 对应的实际尺寸。
   下面所有数字都直接取自设计稿像素，因此任意屏宽都等比缩放、版式一致。
   若想整体（含文字）再放大一档，把 --u 改成 calc(100vw / 778 * 1.15) 即可。 */
@media (max-width: 700px) {
  :root {
    --frame: 0px;
    --u: calc(100vw / 778);
    /* 防伪标签示意卡宽度（取自设计稿标签图盒宽度） */
    --label-w: calc(318 * var(--u));
    --corner: calc(24 * var(--u));
  }

  /* 蓝色面板：圆角卡片，左右留边、底部留出翻页指示条的位置 */
  body { background: #f5f5f5; }
  .app {
    margin: 0 calc(15 * var(--u)) calc(44 * var(--u));
    border-radius: 0 0 calc(15 * var(--u)) calc(15 * var(--u));
    min-height: calc(100vh - 44 * var(--u));
    min-height: calc(100dvh - 44 * var(--u));
    padding: calc(55 * var(--u) + env(safe-area-inset-top, 0px)) calc(36 * var(--u)) calc(126 * var(--u));
    background-image: url("../images/ppc_bg.png");
    background-position: center top;
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
  }

  /* 底部翻页指示条（设计稿：两条 56 × 8，间距 12，当前页为黄色） */
  .pager {
    display: flex;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 6;
    align-items: flex-start;
    justify-content: center;
    gap: calc(12 * var(--u));
    padding-top: calc(22 * var(--u));
    height: calc(44 * var(--u) + env(safe-area-inset-bottom, 0px));
    padding-bottom: env(safe-area-inset-bottom, 0px);
  }
  .pager__bar {
    appearance: none;
    border: 0;
    padding: 0;
    cursor: pointer;
    width: calc(56 * var(--u));
    height: calc(8 * var(--u));
    border-radius: 999px;
    background: #e5e5e5;
    transition: background-color .25s ease;
  }
  .pager__bar.is-active { background: #ffcf2b; }
  .app.is-modal ~ .pager { opacity: .35; pointer-events: none; }

  /* 翻页动效：示意图左右滑动 */
  .visual { transition: transform .2s ease, opacity .2s ease; }
  .visual.is-flip-out-next { transform: translateX(-16%); opacity: 0; }
  .visual.is-flip-out-prev { transform: translateX(16%); opacity: 0; }
  .visual.is-flip-in-next { transform: translateX(16%); opacity: 0; transition: none; }
  .visual.is-flip-in-prev { transform: translateX(-16%); opacity: 0; transition: none; }

  /* 顶栏：切换胶囊居中（414×45），语言靠右，顶部 logo 隐藏 */
  .topbar { position: relative; display: flex; justify-content: center; gap: 0; }
  .topbar__brand { display: none; }
  .tabs {
    width: calc(414 * var(--u));
    max-width: none;
    gap: calc(4 * var(--u));
    padding: calc(4 * var(--u));
  }
  .tab {
    flex: 1 1 0;
    min-width: 0;
    padding: calc(8 * var(--u)) calc(2 * var(--u));
    font-size: calc(17.5 * var(--u));
    line-height: 1.2;
  }
  .langs {
    position: absolute;
    top: 50%;
    right: 0;
    transform: translateY(-50%);
    gap: calc(8 * var(--u));
    white-space: nowrap;
  }
  .lang, .langs__sep { font-size: calc(14 * var(--u)); }

  /* 主体：标题 → 说明 → 示意图 → 输入行 → 提示 → 底部 logo */
  .stage {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0;
    padding: 0;
    text-align: center;
  }
  .panel { display: contents; }

  .panel__title {
    order: 1;
    margin: calc(142.6 * var(--u)) 0 0;
    font-size: calc(49.4 * var(--u));
    line-height: 1.26;
  }
  .panel__desc {
    order: 2;
    max-width: calc(501 * var(--u));
    margin: calc(32.8 * var(--u)) 0 0;
    font-size: calc(13.7 * var(--u));
    line-height: 1.24;
    white-space: pre-line;
    text-wrap: balance;
  }

  /* 示意图区固定为标签模式的高度，两种模式的图片都在此区域内垂直居中，
     这样切换标签/SN 码时输入行位置保持不动（与设计稿一致）。 */
  .visual { order: 3; height: calc(var(--label-w) * .674); margin: calc(112 * var(--u)) 0 0; padding: 0; }
  .query {
    order: 4;
    align-self: stretch;
    width: auto;
    max-width: none;
    margin: calc(74 * var(--u)) calc(16 * var(--u)) 0;
  }
  .panel__hint {
    order: 5;
    margin: calc(25.4 * var(--u)) 0 0;
    font-size: calc(13 * var(--u));
    line-height: 1.2;
    text-wrap: balance;
  }

  .footer { display: flex; justify-content: center; margin-top: auto; padding-top: calc(40 * var(--u)); }
  .footer__logo { width: calc(175 * var(--u)); max-width: none; }

  /* 取景框：角标紧贴示意图外框 */
  .scan { padding: 0; }
  .scan[data-mode="sn"] { margin-left: 0; }
  .scan__corner { border-color: rgba(255, 255, 255, .5); }
  .scan__corner { width: var(--corner); height: var(--corner); }
  .scan[data-mode="sn"] .scan__corner { width: calc(var(--corner) * .78); height: calc(var(--corner) * .78); }
  .scan__corner--tl { border-top-width: calc(4 * var(--u)); border-left-width: calc(4 * var(--u)); }
  .scan__corner--tr { border-top-width: calc(4 * var(--u)); border-right-width: calc(4 * var(--u)); }
  .scan__corner--bl { border-bottom-width: calc(4 * var(--u)); border-left-width: calc(4 * var(--u)); }
  .scan__corner--br { border-bottom-width: calc(4 * var(--u)); border-right-width: calc(4 * var(--u)); }

  /* 输入行（设计稿：642 × 74，黄色按钮 104 × 61） */
  .query__field {
    gap: calc(4 * var(--u));
    padding: calc(6 * var(--u)) calc(6 * var(--u)) calc(6 * var(--u)) calc(20 * var(--u));
    box-shadow: 0 calc(10 * var(--u)) calc(30 * var(--u)) rgba(4, 22, 70, .18);
  }
  .query__input { padding: calc(16.6 * var(--u)) 0; font-size: calc(24 * var(--u)); font-weight: 700; line-height: 1.2; }
  .query__btn { flex: none; padding: calc(18 * var(--u)) calc(18.4 * var(--u)); font-size: calc(21 * var(--u)); line-height: 1.2; }

  /* 结果弹窗（设计稿：白卡 644 宽、圆角 30、图标 39、按钮 207 × 54） */
  .modal { padding: 0 calc(53 * var(--u)) calc(95 * var(--u)); }
  .modal__card {
    width: 100%;
    max-width: none;
    padding: calc(45 * var(--u)) calc(30 * var(--u)) calc(34 * var(--u));
    border-radius: calc(30 * var(--u));
  }
  .modal__icon { width: calc(39 * var(--u)); height: calc(40 * var(--u)); }
  .modal__text { margin-top: calc(48 * var(--u)); font-size: calc(24 * var(--u)); line-height: 1.5; }
  .modal__line--strong { font-size: calc(26 * var(--u)); }
  .modal__btn {
    min-width: calc(207 * var(--u));
    height: calc(54 * var(--u));
    margin-top: calc(66 * var(--u));
    padding: 0 calc(20 * var(--u));
    font-size: calc(25 * var(--u));
    line-height: 1.2;
  }

  /* ---------- 英文版：文案更长（标题 3 行、说明 4 行），
     等比收一点留白与标签字号，让英文版和中文版一样一屏放得下，
     底部圆角与灰色留白不会被挤出屏幕。 ---------- */
  :lang(en) .tab { font-size: calc(14 * var(--u)); }
  :lang(en) .panel__title { margin-top: calc(110.5 * var(--u)); }
  :lang(en) .panel__desc { margin-top: calc(25.4 * var(--u)); }
  :lang(en) .visual { margin-top: calc(86.8 * var(--u)); }
  :lang(en) .query { margin-top: calc(57.4 * var(--u)); }
  :lang(en) .panel__hint { margin-top: calc(19.7 * var(--u)); }
  :lang(en) .footer { padding-top: calc(31 * var(--u)); }
}