/* ============================================================
   璇玑 Armilla — V10 商用通用主题 Design Tokens v2.1
   定位：可商业售卖的大厂风主题底座
   升级点（2026-09-03 评审）：高级蓝选型 · 精密排印 · 留白节奏
   ============================================================ */

:root {
  /* —— 品牌色：Google Material Blue 600 系（明快且沉稳，规避电光蓝） —— */
  --brand:        #0B57D0;   /* 主强调 */
  --brand-hover:  #0A47B0;   /* 悬停 */
  --brand-active: #08398F;   /* 按下 */
  --brand-soft:   #E8F0FE;   /* 浅蓝底 */
  --brand-tint:   rgba(11, 87, 208, .06);  /* 更浅的渲染底 */
  --brand-text:   #FFFFFF;

  /* —— 中性灰阶 —— */
  --ink:        #14171C;     /* 主文字（近纯黑提纯） */
  --ink-2:      #4E5560;     /* 次级文字 */
  --ink-3:      #78808D;     /* 弱文字（对比度提升一档） */
  --ink-4:      #B7BDC8;     /* 禁用 */
  --border:     #E5E8EF;     /* 常规描边 */
  --border-strong: #C6CCD8;  /* 强调描边 */
  --bg:         #FFFFFF;
  --bg-gray:    #F5F6FA;     /* 分区底 */
  --bg-gray-2:  #EBEEF5;     /* 悬停/深一档 */
  --surface:    #FFFFFF;
  --footer-bg:  #14171C;

  /* —— 语义 —— */
  --success: #1E9E6A;
  --danger:  #DA1E28;
  --warning: #F1C21B;

  /* —— 字体 —— */
  --font-sans: -apple-system, "PingFang SC", "Microsoft YaHei", "Noto Sans SC", "Segoe UI", Roboto, sans-serif;
  --font-num:  "Inter", "SF Pro Text", "Segoe UI", Roboto, -apple-system, sans-serif;
  --font-mono: "JetBrains Mono", "SF Mono", Consolas, "Liberation Mono", monospace;
  --fs-xs: 12px; --fs-sm: 13px; --fs-base: 14px; --fs-md: 15px;
  --fs-lg: 16px; --fs-xl: 18px; --fs-2xl: 30px; --fs-3xl: 40px; --fs-hero: 52px;
  --lh-tight: 1.25; --lh-base: 1.7;
  --track-head: -.02em;   /* 大标题收紧（现代大厂字幕距） */
  --track-sm: .02em;      /* 小字号微字距 */

  /* —— 圆角 —— */
  --r-sm: 4px; --r-md: 6px; --r-lg: 10px; --r-full: 999px;

  /* —— 阴影 —— */
  --shadow-sm: 0 1px 2px rgba(20, 23, 28, .04);
  --shadow-md: 0 2px 4px rgba(20, 23, 28, .04), 0 8px 20px rgba(20, 23, 28, .06);
  --shadow-lg: 0 4px 8px rgba(20, 23, 28, .05), 0 20px 48px rgba(20, 23, 28, .09);

  /* —— 8px 网格 —— */
  --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px;
  --sp-5: 24px; --sp-6: 32px; --sp-7: 48px; --sp-8: 64px; --sp-9: 96px;

  /* —— 布局 —— */
  --container: 1200px;
  --header-h: 68px;
  --btn-h: 46px;
  --ease: cubic-bezier(.2, .6, .2, 1);
}

body { margin: 0; background: var(--bg); color: var(--ink);
       font-family: var(--font-sans); font-size: var(--fs-base); line-height: var(--lh-base);
       -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
a { color: var(--brand); text-decoration: none; transition: color .15s var(--ease); }
a:hover { color: var(--brand-hover); }
*, *::before, *::after { box-sizing: border-box; }
.num { font-family: var(--font-num); font-variant-numeric: tabular-nums; }
.mono { font-family: var(--font-mono); font-size: 12.5px; letter-spacing: .02em; }
.small { font-size: var(--fs-xs); color: var(--ink-3); letter-spacing: var(--track-sm); }

/* —— 按钮（46px 统一高度，hover 微抬） —— */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: var(--btn-h);
       padding: 0 26px; border-radius: var(--r-md); font-size: var(--fs-md); font-weight: 500;
       border: 1px solid transparent; cursor: pointer; letter-spacing: .01em;
       transition: all .2s var(--ease); }
.btn-primary { background: var(--brand); color: #fff; box-shadow: 0 1px 2px rgba(11,87,208,.25); }
.btn-primary:hover { background: var(--brand-hover); color: #fff; transform: translateY(-1px);
                     box-shadow: 0 3px 8px rgba(11,87,208,.3); text-decoration: none; }
.btn-primary:active { background: var(--brand-active); transform: translateY(0); }
.btn-outline { background: #fff; color: var(--brand); border-color: rgba(11,87,208,.4); }
.btn-outline:hover { background: var(--brand-tint); color: var(--brand-hover); border-color: var(--brand); transform: translateY(-1px); text-decoration: none; }
.btn-white { background: #fff; color: var(--ink); border-color: var(--border); }
.btn-white:hover { background: var(--bg-gray-2); transform: translateY(-1px); text-decoration: none; }
.btn-link { background: none; padding: 0 8px; color: var(--brand); }
.btn-link:hover { color: var(--brand-hover); text-decoration: underline; }

/* —— 标签 —— */
.tag { display: inline-flex; align-items: center; height: 22px; padding: 0 10px; border-radius: var(--r-full);
       font-size: 12px; letter-spacing: .01em; line-height: 1; }
.tag-blue { background: var(--brand-soft); color: var(--brand); }
.tag-green { background: rgba(30,158,106,.1); color: #177A52; }
.tag-red { background: rgba(218,30,40,.08); color: #B4232B; }
.tag-gray { background: var(--bg-gray); color: var(--ink-2); }
.tag-gold { background: rgba(241,194,27,.16); color: #9A7B0E; }

/* —— 卡片 —— */
.card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); }
.card-hover { transition: border-color .2s var(--ease), box-shadow .2s var(--ease), transform .2s var(--ease); }
.card-hover:hover { border-color: rgba(11,87,208,.45); box-shadow: var(--shadow-md); transform: translateY(-2px); }

/* —— 分区标题 —— */
.sec-head { display: flex; align-items: flex-end; justify-content: space-between; margin-bottom: var(--sp-6); }
.sec-head h2 { margin: 0; font-size: var(--fs-2xl); font-weight: 600; line-height: 1.3; letter-spacing: var(--track-head); }
.sec-head .en { font-family: var(--font-num); font-size: 12px; color: var(--ink-3); letter-spacing: .22em; margin-top: 8px; }
.sec-head .more { font-size: var(--fs-sm); color: var(--ink-2); }
.sec-head .more:hover { color: var(--brand); }
/* ===== 璇玑主题 · 会员中心交互补充样式（v1） ===== */
#xj-toast {
  position: fixed; left: 50%; bottom: 46px; transform: translateX(-50%) translateY(14px);
  background: #1E2736; color: #fff; font-size: 13.5px; line-height: 1.5;
  padding: 10px 18px; border-radius: 10px; opacity: 0; pointer-events: none;
  transition: opacity .22s ease, transform .22s ease; z-index: 10000; max-width: 72vw;
  box-shadow: 0 12px 32px rgba(15, 23, 42, .22);
}
#xj-toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }
#xj-toast.ok { background: #0B57D0; }

#xj-cap-modal { position: fixed; inset: 0; background: rgba(15, 23, 42, .45); display: none; z-index: 9998; }
#xj-cap-modal.show { display: flex; align-items: center; justify-content: center; }
/* 弹窗容器不设 transform（避免组件 fixed 层相对它定位）；白卡样式在 .captcha-content 上 */
#xj-cap-box { position: static; }

/* 组件自带全屏遮罩：改透明包装（外层 modal 已提供遮罩） */
#xj-cap-box #captcha-outer {
  position: static !important;
  left: auto !important; top: auto !important;
  width: auto !important; height: auto !important;
  background: none !important;
  z-index: auto !important;
  filter: none !important;
}

/* 内容卡：桌面级白卡（组件为移动端 rem 布局，此处全量 px 覆写） */
#xj-cap-box .captcha-content {
  position: static !important;
  transform: none !important;
  left: auto !important; top: auto !important;
  margin: 0 !important;
  width: 402px !important;
  max-width: 92vw !important;
  box-sizing: border-box !important;
  background: #fff !important;
  border-radius: 14px !important;
  padding: 22px 22px 16px !important;
  box-shadow: 0 24px 64px rgba(15, 23, 42, .28) !important;
}
#xj-cap-box .captcha-title { font-size: 17px !important; line-height: 24px !important; font-weight: 600 !important; color: #1F2937 !important; }
#xj-cap-box .captcha-main { display: flex !important; flex-direction: row !important; align-items: center !important; gap: 10px !important; margin: 16px 0 0 !important; padding: 0 !important; }
#xj-cap-box #captcha-input {
  flex: 1 !important; width: auto !important; min-width: 0 !important;
  height: 42px !important; margin: 0 !important; padding: 0 12px !important;
  font-size: 14px !important; color: #1F2937 !important;
  border: 1px solid #D0D5DD !important; border-radius: 9px !important;
  background: #fff !important; box-sizing: border-box !important; outline: none;
}
#xj-cap-box #captcha-input:focus { border-color: #0B57D0 !important; box-shadow: 0 0 0 3px rgba(11, 87, 208, .12) !important; }
#xj-cap-box #captcha-img { height: 42px !important; width: auto !important; box-sizing: border-box !important; border: 1px solid #E4E7EC !important; border-radius: 9px !important; cursor: pointer; display: block; }
#xj-cap-box .captcha-error-text, #xj-cap-box #captcha-error-text { min-height: 19px !important; margin-top: 10px !important; font-size: 12.5px !important; line-height: 19px !important; color: #D92D20 !important; }
#xj-cap-box .captcha-footer { display: flex !important; flex-direction: row !important; justify-content: flex-end !important; gap: 10px !important; margin-top: 12px !important; }
#xj-cap-box #check-btn, #xj-cap-box #cancel-btn {
  width: auto !important; min-width: 84px !important; height: 38px !important;
  padding: 0 20px !important; font-size: 14px !important;
  border: none !important; border-radius: 9px !important; cursor: pointer;
}
#xj-cap-box #check-btn { background: #0B57D0 !important; color: #fff !important; }
#xj-cap-box #check-btn:hover { background: #0A4DB8 !important; }
#xj-cap-box #cancel-btn { background: #F2F4F7 !important; color: #344054 !important; }
#xj-cap-box #cancel-btn:hover { background: #E4E7EC !important; }

/* 极窄屏（<360px）：输入框与验证码图改为纵向堆叠，避免挤压 */
@media (max-width: 359px) {
  #xj-cap-box .captcha-main { flex-direction: column !important; align-items: stretch !important; }
  #xj-cap-box #captcha-input { flex: 0 0 auto !important; }
  #xj-cap-box #captcha-img { align-self: flex-start !important; }
}

.f-btn-code.xj-loading, .btn.xj-loading { opacity: .62; pointer-events: none; }

/* ===== 财务中心：弹窗 / 支付 ===== */
.xj-mask { position: fixed; inset: 0; background: rgba(15,23,42,.45); display: none; z-index: 9990; }
.xj-mask.show { display: block; }
.xj-dialog { position: fixed; left: 50%; top: 50%; transform: translate(-50%,-50%); background: #fff;
  border-radius: 14px; z-index: 9991; width: 430px; max-width: 92vw; box-shadow: 0 24px 64px rgba(15,23,42,.22);
  display: none; overflow: hidden; text-align: left; }
.xj-dialog.show { display: block; }
.xj-dialog .xj-d-head { display: flex; align-items: center; justify-content: space-between; padding: 15px 20px;
  border-bottom: 1px solid var(--border, #E5E9F2); font-weight: 600; font-size: 15px; color: var(--ink, #1E2736); }
.xj-dialog .xj-d-close { cursor: pointer; color: var(--ink-3, #98A2B3); font-size: 20px; line-height: 1;
  border: 0; background: none; padding: 0 2px; font-family: inherit; }
.xj-dialog .xj-d-body { padding: 16px 20px; }
.xj-dialog .xj-d-foot { padding: 13px 20px; border-top: 1px solid var(--border, #E5E9F2); display: flex; gap: 10px; justify-content: flex-end; }
.xj-amount-row { font-size: 13px; color: var(--ink-2, #475467); display: flex; align-items: baseline; justify-content: space-between; }
.xj-amount-row b { color: var(--brand, #0B57D0); font-size: 22px; font-family: var(--font-num, inherit); }
.xj-gw-list { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0 4px; }
.xj-gw { display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--border, #E5E9F2);
  border-radius: 9px; padding: 7px 12px; cursor: pointer; font-size: 13px; color: var(--ink-2, #475467); background: #fff; }
.xj-gw img { width: 18px; height: 18px; }
.xj-gw.on { border-color: var(--brand, #0B57D0); color: var(--brand, #0B57D0); background: rgba(11,87,208,.06); }
.xj-paybox { min-height: 150px; display: flex; flex-direction: column; align-items: center; justify-content: center;
  border: 1px dashed var(--border, #E5E9F2); border-radius: 10px; margin-top: 10px; padding: 12px;
  font-size: 13px; color: var(--ink-3, #98A2B3); text-align: center; overflow: auto; max-height: 320px; }
.xj-hint { font-size: 12.5px; color: var(--ink-3, #98A2B3); margin-top: 10px; line-height: 1.7; }
.xj-btn { display: inline-flex; align-items: center; justify-content: center; height: 36px; padding: 0 18px;
  border-radius: 9px; font-size: 13.5px; cursor: pointer; border: 1px solid transparent; font-family: inherit;
  text-decoration: none; box-sizing: border-box; }
.xj-btn.xj-loading { opacity: .62; pointer-events: none; }
.xj-btn-primary { background: var(--brand, #0B57D0); color: #fff; }
.xj-btn-primary:hover { background: var(--brand-hover, #0A4CBB); text-decoration: none; }
.xj-btn-plain { background: #fff; border-color: var(--border, #E5E9F2); color: var(--ink-2, #475467); }
.xj-btn-plain:hover { border-color: var(--brand, #0B57D0); color: var(--brand, #0B57D0); text-decoration: none; }
.xj-field { margin: 8px 0 2px; }
.xj-field input { width: 100%; height: 44px; border: 1px solid var(--border, #E5E9F2); border-radius: 10px;
  padding: 0 12px; font-size: 15px; font-family: var(--font-num, inherit); box-sizing: border-box; outline: none; }
.xj-field input:focus { border-color: var(--brand, #0B57D0); box-shadow: 0 0 0 3px rgba(11,87,208,.12); }
.xj-empty { text-align: center; padding: 32px 0; color: var(--ink-3, #98A2B3); font-size: 13px; }

/* ===== 安全中心：表单控件补充 ===== */
.xj-lbl { display: block; font-size: 13px; color: var(--ink-2, #475467); margin-bottom: 6px; }
.xj-field select { width: 100%; height: 44px; border: 1px solid var(--border, #E5E9F2); border-radius: 10px; padding: 0 10px; font-size: 14px; background: #fff; font-family: inherit; box-sizing: border-box; outline: none; }
.xj-field select:focus { border-color: var(--brand, #0B57D0); }
.xj-field textarea { width: 100%; min-height: 96px; border: 1px solid var(--border, #E5E9F2); border-radius: 10px; padding: 10px 12px; font-size: 12.5px; font-family: var(--font-num, monospace); box-sizing: border-box; outline: none; resize: vertical; line-height: 1.6; }
.xj-field textarea:focus { border-color: var(--brand, #0B57D0); box-shadow: 0 0 0 3px rgba(11,87,208,.12); }
.xj-kv { display: flex; gap: 10px; align-items: flex-start; padding: 9px 0; border-bottom: 1px dashed var(--border, #E5E9F2); font-size: 13px; }
.xj-kv .k { width: 84px; color: var(--ink-3, #98A2B3); flex: none; }
.xj-kv .v { flex: 1; word-break: break-all; font-family: var(--font-num, monospace); color: var(--ink, #1E2736); font-size: 12.5px; }
.xj-warn { background: #FFF8E6; border: 1px solid #FFE7A3; color: #8A6D1D; border-radius: 10px; padding: 10px 12px; font-size: 12.5px; margin-bottom: 12px; line-height: 1.6; }