/* ═══════════════════════════════════════════════════════════════
   BuyBridge 品牌层 —— 设计论点：提单美学 Bill of Lading
   ---------------------------------------------------------------
   国际贸易通行的视觉语言是单据：提单、报关单、装箱单。
   精确细线分栏 · 等宽编号 · 极少量印章红 · 天然多语言并排。
   代购最缺的是可信度，而单据感本身就是可信度。

   接法：只重定义 tokens.css 的 --tj-* 变量，不改任何组件源码。
   认证页 / 后台 / 收银台因此自动继承本品牌，全站一处改。
   ═══════════════════════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@400;450;500;600;700&family=IBM+Plex+Mono:wght@400;500;600&family=IBM+Plex+Sans+Arabic:wght@400;500;600&family=Noto+Sans+SC:wght@400;500;700&display=swap');

:root{
  /* —— 纸：单据不是纯白，是微暖的纸白 —— */
  --tj-bg:        #FBFAF7;
  --tj-surface:   #FFFFFF;
  --tj-surface-2: #F4F3EF;
  --tj-line:      #DAD8D1;
  --tj-line-soft: #EAE8E2;

  /* —— 墨：海军蓝，国际航运与金融的权威色 —— */
  --tj-ink:       #0A2540;
  --tj-ink-2:     #4A5B6E;
  --tj-ink-3:     #8794A1;

  /* —— 唯一满饱和：印章朱红。全站只有它敢亮 —— */
  --tj-accent:      #C8102E;
  --tj-accent-ink:  #FFFFFF;
  --tj-accent-soft: #FBECEE;
  --tj-accent-line: #F0CDD3;
  --tj-accent-hover:#A80D26;

  /* —— 状态色：全部脱饱和，不许比印章红抢眼 —— */
  --tj-ok:   #2E6B4F;
  --tj-warn: #8A6A2B;
  --tj-err:  #A3323F;
  --tj-ok-bg:   #EDF4F0;  --tj-ok-line:   #D6E6DD;  --tj-ok-ink:   #235340;
  --tj-warn-bg: #F7F2E6;  --tj-warn-line: #EAE0C9;  --tj-warn-ink: #6B5322;
  --tj-err-bg:  #F9EDEE;  --tj-err-line:  #EED6D9;  --tj-err-ink:  #7E2831;

  /* —— 字体：IBM Plex，IBM 为全球企业设计，实测覆盖西里尔 —— */
  --tj-font-display: 'IBM Plex Sans', 'Noto Sans SC', -apple-system, 'PingFang SC', system-ui, sans-serif;
  --tj-font-body:    'IBM Plex Sans', 'Noto Sans SC', -apple-system, 'PingFang SC', system-ui, sans-serif;
  --tj-font-mono:    'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

  /* —— 间距沿用 8 倍数 —— */
  --tj-s1:4px; --tj-s2:8px; --tj-s3:12px; --tj-s4:16px;
  --tj-s5:24px; --tj-s6:32px; --tj-s7:48px; --tj-s8:64px; --tj-s9:96px;

  /* —— 单据的圆角很小，几乎是直角 —— */
  --tj-r1:2px; --tj-r2:3px; --tj-r3:4px; --tj-r4:6px; --tj-rf:999px;

  /* —— 光学一致：高光左上，阴影右下，全站一个方向 —— */
  --tj-sh1: 0 1px 2px rgba(10,37,64,.05);
  --tj-sh2: 0 2px 8px rgba(10,37,64,.06), 0 1px 2px rgba(10,37,64,.04);
  --tj-sh3: 0 12px 32px rgba(10,37,64,.10), 0 2px 6px rgba(10,37,64,.05);
  --tj-ring: 0 0 0 3px var(--tj-accent-soft);

  --tj-maxw: 1200px;
  --tj-ease: cubic-bezier(.22,.61,.36,1);
  --tj-dur: .22s;

  /* —— 提单美学专用 —— */
  --bb-hair: 1px solid var(--tj-line);
  --bb-rule: 2px solid var(--tj-ink);
  --bb-grid: rgba(10,37,64,.055);
}

/* 阿拉伯语切到 Plex Arabic，并整站转 RTL */
html[lang="ar"], html[dir="rtl"]{
  --tj-font-display:'IBM Plex Sans Arabic','IBM Plex Sans',system-ui,sans-serif;
  --tj-font-body:   'IBM Plex Sans Arabic','IBM Plex Sans',system-ui,sans-serif;
}

/* ── 基础 ───────────────────────────────────────────── */
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--tj-bg); color:var(--tj-ink);
  font-family:var(--tj-font-body); font-size:16px; line-height:1.6;
  font-feature-settings:"cv05" 1,"ss01" 1;
  -webkit-font-smoothing:antialiased;
}
img,svg{max-width:100%; display:block}
a{color:inherit}

/* 编号、金额、单号 —— 一律等宽，这是单据的灵魂 */
.mono,.bb-no,.bb-amt{font-family:var(--tj-font-mono); font-variant-numeric:tabular-nums}
.bb-no{font-size:.75rem; letter-spacing:.06em; color:var(--tj-ink-3); text-transform:uppercase}

.wrap{max-width:var(--tj-maxw); margin:0 auto; padding:0 var(--tj-s5)}

/* ── 区段标签：单据的字段名 ─────────────────────────── */
.bb-field{
  font-family:var(--tj-font-mono); font-size:.7rem; font-weight:500;
  letter-spacing:.14em; text-transform:uppercase; color:var(--tj-ink-3);
  display:flex; align-items:center; gap:var(--tj-s3);
}
.bb-field::after{content:""; flex:1; height:1px; background:var(--tj-line)}

/* ── 标题层级 ───────────────────────────────────────── */
h1,h2,h3,h4{font-family:var(--tj-font-display); margin:0; line-height:1.12; letter-spacing:-.021em; font-weight:600}
h1{font-size:clamp(2.4rem,5.4vw,4.15rem); letter-spacing:-.032em; line-height:1.04}
h2{font-size:clamp(1.7rem,3.1vw,2.5rem); letter-spacing:-.026em}
h3{font-size:1.14rem; letter-spacing:-.012em}
p{margin:0}
.lede{font-size:1.115rem; line-height:1.62; color:var(--tj-ink-2); max-width:62ch}

/* ── 按钮 ───────────────────────────────────────────── */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:var(--tj-s2);
  font-family:var(--tj-font-body); font-size:.94rem; font-weight:600; line-height:1;
  padding:14px 22px; border-radius:var(--tj-r2); border:1px solid transparent;
  cursor:pointer; text-decoration:none; white-space:nowrap;
  transition:background var(--tj-dur) var(--tj-ease), border-color var(--tj-dur) var(--tj-ease), color var(--tj-dur) var(--tj-ease);
}
.btn-primary{background:var(--tj-accent); color:#fff; border-color:var(--tj-accent)}
.btn-primary:hover{background:var(--tj-accent-hover); border-color:var(--tj-accent-hover)}
.btn-ghost{background:transparent; color:var(--tj-ink); border-color:var(--tj-line)}
.btn-ghost:hover{border-color:var(--tj-ink); background:var(--tj-surface)}
.btn-ink{background:var(--tj-ink); color:#fff; border-color:var(--tj-ink)}
.btn-ink:hover{background:#08304f}
.btn:focus-visible{outline:none; box-shadow:var(--tj-ring)}
.btn-lg{padding:17px 30px; font-size:1rem}

/* ── 印章徽标 ───────────────────────────────────────── */
.bb-seal{
  width:34px; height:34px; flex:none; display:grid; place-items:center;
  border:2px solid var(--tj-accent); color:var(--tj-accent);
  font-family:var(--tj-font-mono); font-weight:600; font-size:.82rem; letter-spacing:-.02em;
  border-radius:var(--tj-r1);
}

/* ── 单据卡：本站最核心的视觉母题 ───────────────────── */
.bb-doc{
  background:var(--tj-surface); border:var(--bb-hair); border-radius:var(--tj-r3);
  box-shadow:var(--tj-sh2); overflow:hidden;
}
.bb-doc-head{
  padding:var(--tj-s4) var(--tj-s5); border-bottom:var(--bb-rule);
  display:flex; align-items:center; justify-content:space-between; gap:var(--tj-s4);
}
.bb-doc-body{padding:var(--tj-s5)}
/* 单据行：左字段名右值，中间点线连起来 —— 报关单的经典排法 */
.bb-row{display:flex; align-items:baseline; gap:var(--tj-s3); padding:11px 0; border-bottom:1px dashed var(--tj-line-soft)}
.bb-row:last-child{border-bottom:0}
.bb-row-k{color:var(--tj-ink-2); font-size:.9rem}
.bb-row-dot{flex:1; border-bottom:1px dotted var(--tj-line); transform:translateY(-3px); min-width:16px}
.bb-row-v{font-family:var(--tj-font-mono); font-variant-numeric:tabular-nums; font-weight:500; font-size:.94rem}
.bb-row-total{border-top:var(--bb-rule); border-bottom:0; margin-top:var(--tj-s2); padding-top:var(--tj-s4)}
.bb-row-total .bb-row-k{font-weight:600; color:var(--tj-ink); font-size:1rem}
.bb-row-total .bb-row-v{font-size:1.5rem; font-weight:600; color:var(--tj-accent)}

/* ── 分区 ───────────────────────────────────────────── */
section{padding:var(--tj-s9) 0}
.sec-head{margin-bottom:var(--tj-s7); max-width:70ch}
.sec-head h2{margin:var(--tj-s4) 0 var(--tj-s4)}

/* ── 细线网格：单据的分栏 ───────────────────────────── */
.bb-grid{display:grid; gap:0; border:var(--bb-hair); border-radius:var(--tj-r3); overflow:hidden; background:var(--tj-line)}
.bb-grid > *{background:var(--tj-surface); padding:var(--tj-s6) var(--tj-s5)}
.g3{grid-template-columns:repeat(3,1fr)}
.g4{grid-template-columns:repeat(4,1fr)}
.g2{grid-template-columns:repeat(2,1fr)}
.bb-grid{gap:1px}

@media(max-width:900px){
  .g3,.g4{grid-template-columns:repeat(2,1fr)}
  section{padding:var(--tj-s8) 0}
}
@media(max-width:560px){
  .g3,.g4,.g2{grid-template-columns:1fr}
}

/* 尊重减少动效偏好 */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important; animation-iteration-count:1!important; transition-duration:.01ms!important}
}