/* 佐川防伪验证 H5（M2 · 2026-11-06 二版：正规、简洁、官方，零 emoji）
 * 品牌黑金 · 状态印章 SVG · 克制留白
 */
* { box-sizing: border-box; margin: 0; padding: 0; }
[hidden] { display: none !important; }

:root {
  --ink: #14130f;
  --gold: #c9a962;
  --paper: #f7f6f2;
  --card: #ffffff;
  --line: #e8e6df;
  --muted: #8a877e;
  --ok: #1a7f4b;
  --warn: #a16207;
  --miss: #6f6c64;
  --bad: #b3261e;
}

body {
  font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Hiragino Sans GB", "Helvetica Neue", "Microsoft YaHei", sans-serif;
  background: var(--paper);
  color: var(--ink);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  -webkit-font-smoothing: antialiased;
}

/* ── 品牌区：黑底金字 + 金色分隔线 ── */
.brand { background: var(--ink); padding: 30px 16px 26px; }
.brand-inner { max-width: 480px; margin: 0 auto; text-align: center; position: relative; }
.brand-mark { color: #f2ead8; font-size: 32px; font-weight: 800; letter-spacing: 8px; text-indent: 8px; }
.brand-sub { color: rgba(242, 234, 216, .62); font-size: 12px; letter-spacing: 4px; text-indent: 4px; margin-top: 8px; }
.brand-inner::after {
  content: ""; display: block; width: 48px; height: 2px; background: var(--gold);
  margin: 14px auto 0;
}

main { flex: 1; width: 100%; max-width: 480px; margin: 0 auto; padding: 26px 18px; }

/* ── 查询区 ── */
.search { display: flex; gap: 10px; }
#codeInput {
  flex: 1; height: 48px; border: 1.5px solid #c9c6bc; border-radius: 6px;
  padding: 0 14px; font-size: 16px; letter-spacing: 1.5px; background: #fff; color: var(--ink);
  transition: border-color .15s;
}
#codeInput::placeholder { color: #b5b2a8; letter-spacing: 1px; }
#codeInput:focus { outline: none; border-color: var(--ink); }
#queryBtn {
  height: 48px; padding: 0 26px; border: 0; border-radius: 6px;
  background: var(--ink); color: #f2ead8; font-size: 15px; font-weight: 600; letter-spacing: 6px; text-indent: 6px;
}
#queryBtn:active { opacity: .85; }
#queryBtn:disabled { opacity: .45; }
.tip { font-size: 12px; color: var(--muted); margin: 10px 2px 0; letter-spacing: .5px; }

/* ── 结果卡 ── */
.card {
  margin-top: 22px; background: var(--card); border-radius: 8px; overflow: hidden;
  box-shadow: 0 1px 2px rgba(20, 19, 15, .05), 0 8px 28px rgba(20, 19, 15, .06);
  text-align: center;
}
.card-bar { height: 3px; background: var(--miss); }
.card.ok .card-bar { background: var(--ok); }
.card.warn .card-bar { background: var(--warn); }
.card.bad .card-bar { background: var(--bad); }

.seal { margin: 26px auto 6px; width: 64px; height: 64px; }
.seal svg { width: 100%; height: 100%; display: block; }
.card.ok .seal { color: var(--ok); }
.card.warn .seal { color: var(--warn); }
.card.miss .seal { color: var(--miss); }
.card.bad .seal { color: var(--bad); }

.verdict-label { font-size: 11px; color: var(--muted); letter-spacing: 3px; text-indent: 3px; margin-top: 2px; }
.card h2 { font-size: 20px; font-weight: 700; margin: 6px 0 10px; letter-spacing: 1px; }
.card.ok h2 { color: var(--ok); }
.card.warn h2 { color: var(--warn); }
.card.bad h2 { color: var(--bad); }
.card p { font-size: 13.5px; color: #55534b; line-height: 1.75; padding: 0 22px; }

#productImg {
  max-width: 190px; max-height: 150px; margin: 16px auto 2px;
  border: 1px solid var(--line); border-radius: 6px; object-fit: contain; background: #fff;
}

#metaList { margin: 18px 22px 22px; text-align: left; border-top: 1px solid var(--line); }
#metaList > div {
  display: flex; justify-content: space-between; align-items: baseline; gap: 12px;
  padding: 9px 0; border-bottom: 1px solid var(--line); font-size: 13px;
}
#metaList dt { color: var(--muted); flex-shrink: 0; letter-spacing: 1px; }
#metaList dd { color: var(--ink); font-weight: 500; text-align: right; word-break: break-all; }
#metaList .mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12px; letter-spacing: .5px; }

/* 加载：CSS 环形（不用 emoji） */
.seal.spin { color: var(--muted); }
.seal.spin .ring { animation: rot 0.9s linear infinite; transform-origin: 50% 50%; }
@keyframes rot { to { transform: rotate(360deg); } }

/* ── 官方入口条 ── */
.official {
  margin-top: 26px; padding: 10px 0; text-align: center;
  font-size: 12px; color: var(--muted); letter-spacing: 1px;
  border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
}
.official .domain { color: var(--ink); font-weight: 600; letter-spacing: 1.5px; }

.help { margin-top: 18px; font-size: 12px; color: #a19d92; text-align: center; line-height: 1.9; }
.help .warn { color: var(--warn); }

footer { padding: 20px 12px calc(20px + env(safe-area-inset-bottom)); text-align: center; font-size: 10.5px; color: #b3b0a6; line-height: 1.9; }
footer a { color: #b3b0a6; text-decoration: none; }