/* ══════════════════════════════════════════════════════════════
   学霸基本法 · 设计令牌与基础组件  ui-v2/tokens.css
   所有变量前缀 --xb-，不污染 style.css 现有 --color-* / --brand
   ══════════════════════════════════════════════════════════════ */

/* 字体说明（2026-08-06 上线体检）：自托管字体文件尚未入库（/static/fonts/ 不存在），
   原 @font-face 每次加载产生 404。已移除字体声明，字体栈自动回退到系统中文字体，
   待字体文件落地后再恢复 @font-face。 */

:root{
  /* ── 字体栈（禁用 Inter/Roboto/Arial/Open Sans） ── */
  --xb-font-display:'XB Display','LXGW WenKai Screen','LXGW WenKai','Source Han Serif SC','Noto Serif SC','Songti SC',serif;
  --xb-font-sans:'HarmonyOS Sans SC','Source Han Sans SC','Noto Sans SC','PingFang SC','Hiragino Sans GB','Microsoft YaHei',sans-serif;
  --xb-font-num:'XB Numeric','Bahnschrift','DIN Alternate',var(--xb-font-sans);

  /* ── 字阶：移动优先 clamp，正文 17px 起，标题 2 倍以上跳跃 ── */
  --xb-fs-caption:.8125rem;   /* 13 */
  --xb-fs-body:1.0625rem;     /* 17 */
  --xb-fs-body-lg:1.125rem;   /* 18 */
  --xb-fs-h3:1.375rem;        /* 22 */
  --xb-fs-h2:clamp(1.75rem,1.2rem + 2.2vw,2.25rem);   /* 28→36 */
  --xb-fs-h1:clamp(2.25rem,1.4rem + 4.2vw,3.5rem);    /* 36→56，对正文 2.1~3.3x */
  --xb-lh-tight:1.25; --xb-lh-body:1.65; --xb-lh-loose:1.75;
  --xb-track-title:.02em; --xb-track-brand:.28em;

  /* ── 色彩 70/20/10 ── */
  /* 70% 中性纸面 */
  --xb-paper:#FBFCFF; --xb-paper-2:#F2F5FC; --xb-paper-3:#E7EDF9;
  --xb-ink:#111827; --xb-ink-2:#3F4A5F; --xb-ink-3:#64748B; --xb-line:#DEE5F1;
  /* 20% 品牌靛蓝 */
  --xb-brand:#1D4ED8; --xb-brand-600:#2563EB; --xb-brand-700:#1A3FB0;
  --xb-brand-50:#EEF3FF; --xb-brand-100:#DBE5FF;
  /* 10% 琥珀点缀（CTA 与关键指标） */
  --xb-accent:#F0900B; --xb-accent-600:#D97706; --xb-accent-50:#FFF6E6;
  /* 语义 */
  --xb-ok:#0F8A4D; --xb-ok-50:#E8F8EF;
  --xb-danger:#C81E3A; --xb-danger-50:#FDF0F2;
  --xb-focus:#F0900B;

  /* 纵深背景：双径向渐变 + 纸纹噪点，绝不纯白平铺 */
  --xb-bg-deep:
    radial-gradient(1100px 520px at 8% -10%, #E3ECFF 0%, rgba(227,236,255,0) 62%),
    radial-gradient(900px 640px at 108% 10%, #FFF1DC 0%, rgba(255,241,220,0) 58%),
    linear-gradient(168deg,#F7F9FF 0%,#EFF3FC 52%,#F9FAFE 100%);
  --xb-noise:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)' opacity='.035'/%3E%3C/svg%3E");
  --xb-glass:rgba(255,255,255,.72);

  /* ── 间距 4pt 体系 ── */
  --xb-s1:.25rem; --xb-s2:.5rem; --xb-s3:.75rem; --xb-s4:1rem;
  --xb-s5:1.25rem; --xb-s6:1.5rem; --xb-s8:2rem; --xb-s10:2.5rem; --xb-s12:3rem;

  /* ── 圆角 / 阴影 / 动效 ── */
  --xb-r-sm:.5rem; --xb-r:.875rem; --xb-r-lg:1.25rem; --xb-r-xl:1.75rem; --xb-r-full:999px;
  --xb-sh-1:0 1px 2px rgba(16,32,72,.06);
  --xb-sh-2:0 4px 14px rgba(16,32,72,.08);
  --xb-sh-3:0 12px 36px rgba(16,32,72,.12);
  --xb-sh-brand:0 10px 26px rgba(29,78,216,.28);
  --xb-sh-accent:0 10px 26px rgba(240,144,11,.30);
  --xb-dur-fast:.12s; --xb-dur:.24s; --xb-dur-slow:.42s;
  --xb-ease:cubic-bezier(.22,.7,.28,1);
  --xb-tap:44px; /* 最小触摸目标 */
}

/* ── 基础 ── */
.xb-scope,.xb-scope *{box-sizing:border-box}
.xb-body{
  margin:0;min-height:100dvh;color:var(--xb-ink);
  font-family:var(--xb-font-sans);font-size:var(--xb-fs-body);line-height:var(--xb-lh-body);
  background-color:var(--xb-paper);background-image:var(--xb-noise),var(--xb-bg-deep);
  background-attachment:fixed;-webkit-text-size-adjust:100%;
}
.xb-display{font-family:var(--xb-font-display);letter-spacing:var(--xb-track-title);line-height:var(--xb-lh-tight)}
.xb-num{font-family:var(--xb-font-num);font-variant-numeric:tabular-nums;letter-spacing:.01em}

/* 焦点态：琥珀双环，任意背景上都可见 */
.xb-scope :focus-visible{outline:3px solid var(--xb-focus);outline-offset:2px;border-radius:var(--xb-r-sm)}
.xb-scope :focus:not(:focus-visible){outline:none}

/* ── 按钮组件：primary / secondary / ghost / danger ── */
.xb-btn{
  --_bg:var(--xb-brand);--_fg:#fff;--_bd:transparent;--_sh:var(--xb-sh-brand);
  position:relative;display:inline-flex;align-items:center;justify-content:center;gap:.5em;
  min-height:var(--xb-tap);padding:.75rem 1.25rem;width:auto;
  font-family:var(--xb-font-sans);font-size:1rem;font-weight:700;line-height:1.2;
  color:var(--_fg);background:var(--_bg);border:1.5px solid var(--_bd);border-radius:var(--xb-r);
  box-shadow:var(--_sh);cursor:pointer;user-select:none;text-decoration:none;
  transition:transform var(--xb-dur-fast) var(--xb-ease),box-shadow var(--xb-dur) var(--xb-ease),background var(--xb-dur) var(--xb-ease),filter var(--xb-dur) var(--xb-ease);
  -webkit-tap-highlight-color:transparent;touch-action:manipulation;
}
.xb-btn:hover{filter:brightness(1.05);box-shadow:var(--xb-sh-3)}
.xb-btn:active{transform:translateY(1px) scale(.985);box-shadow:var(--xb-sh-1)} /* <100ms 压感反馈 */
.xb-btn--block{display:flex;width:100%}
.xb-btn--lg{min-height:52px;font-size:1.0625rem;padding:.9rem 1.5rem}
.xb-btn--primary{--_bg:linear-gradient(135deg,var(--xb-brand-600),var(--xb-brand-700))}
.xb-btn--cta{--_bg:linear-gradient(135deg,#FFB020,var(--xb-accent-600));--_fg:#3B2300;--_sh:var(--xb-sh-accent)}
.xb-btn--secondary{--_bg:#fff;--_fg:var(--xb-brand-700);--_bd:var(--xb-brand-100);--_sh:var(--xb-sh-1)}
.xb-btn--secondary:hover{--_bg:var(--xb-brand-50)}
.xb-btn--ghost{--_bg:transparent;--_fg:var(--xb-ink-2);--_bd:var(--xb-line);--_sh:none}
.xb-btn--ghost:hover{--_bg:var(--xb-brand-50);--_fg:var(--xb-brand-700);--_bd:var(--xb-brand-100)}
.xb-btn--danger{--_bg:var(--xb-danger);--_fg:#fff;--_sh:0 10px 24px rgba(200,30,58,.26)}
.xb-btn[disabled],.xb-btn[aria-disabled="true"]{
  filter:none;cursor:not-allowed;opacity:1;transform:none;
  background:var(--xb-paper-3)!important;color:#8A94A6!important;border-color:transparent!important;box-shadow:none!important;
}
/* 加载态：文字保留占位，避免布局跳动 */
.xb-btn.is-loading{pointer-events:none;color:transparent!important}
.xb-btn.is-loading::after{
  content:"";position:absolute;width:1.15em;height:1.15em;border-radius:50%;
  border:2.5px solid rgba(255,255,255,.45);border-top-color:#fff;animation:xb-spin .7s linear infinite;
}
.xb-btn--secondary.is-loading::after,.xb-btn--ghost.is-loading::after{border-color:rgba(29,78,216,.25);border-top-color:var(--xb-brand)}
@keyframes xb-spin{to{transform:rotate(360deg)}}

/* ── 表单 ── */
.xb-field{display:flex;flex-direction:column;gap:.375rem;margin-bottom:var(--xb-s4)}
.xb-label{font-size:var(--xb-fs-caption);font-weight:700;color:var(--xb-ink-2);letter-spacing:.02em}
.xb-label .req{color:var(--xb-danger);margin-right:2px}
.xb-input,.xb-select,.xb-textarea{
  width:100%;min-height:var(--xb-tap);padding:.7rem .875rem;
  font-family:inherit;font-size:1rem;color:var(--xb-ink);line-height:1.4;
  background:#fff;border:1.5px solid var(--xb-line);border-radius:var(--xb-r-sm);outline:none;
  transition:border-color var(--xb-dur),box-shadow var(--xb-dur),background var(--xb-dur);
}
.xb-input::placeholder{color:#9AA5B8}
.xb-input:hover,.xb-select:hover{border-color:#C3D0E8}
.xb-input:focus,.xb-select:focus,.xb-textarea:focus{border-color:var(--xb-brand);box-shadow:0 0 0 4px var(--xb-brand-100)}
.xb-select{appearance:none;cursor:pointer;padding-right:2.25rem;
  background-image:url("data:image/svg+xml,%3Csvg width='12' height='8' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1.5 6 6.5 11 1.5' stroke='%2364748B' stroke-width='1.6' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right .875rem center}
/* 错误：只染边框 + 字段下方内联提示，绝不清空输入 */
.xb-field.is-error .xb-input,.xb-field.is-error .xb-select{border-color:var(--xb-danger);background:var(--xb-danger-50)}
.xb-field.is-error .xb-input:focus{box-shadow:0 0 0 4px rgba(200,30,58,.14)}
.xb-msg{display:none;font-size:var(--xb-fs-caption);line-height:1.45;color:var(--xb-danger);font-weight:600}
.xb-field.is-error .xb-msg{display:block;animation:xb-shake .3s var(--xb-ease)}
.xb-msg--ok{color:var(--xb-ok);display:block}
@keyframes xb-shake{0%,100%{transform:translateX(0)}25%{transform:translateX(-4px)}75%{transform:translateX(4px)}}

/* 栅格：移动端单列，≥640 双列，≥1024 三列 */
.xb-grid{display:grid;grid-template-columns:1fr;gap:var(--xb-s3) var(--xb-s4)}
@media(min-width:640px){.xb-grid--2{grid-template-columns:repeat(2,1fr)}.xb-grid--3{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1024px){.xb-grid--3{grid-template-columns:repeat(3,1fr)}}
.xb-col-full{grid-column:1/-1}

/* 卡片 / 毛玻璃 */
.xb-card{background:var(--xb-glass);backdrop-filter:blur(14px) saturate(1.25);-webkit-backdrop-filter:blur(14px) saturate(1.25);
  border:1px solid rgba(255,255,255,.85);border-radius:var(--xb-r-xl);box-shadow:var(--xb-sh-3)}

.xb-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* 尊重降级动效偏好 */
@media(prefers-reduced-motion:reduce){
  .xb-scope *,.xb-scope *::before,.xb-scope *::after{
    animation-duration:.01ms!important;animation-iteration-count:1!important;
    transition-duration:.01ms!important;scroll-behavior:auto!important}
}
/* 高对比模式兜底 */
@media(prefers-contrast:more){
  :root{--xb-ink-3:#4B5565;--xb-line:#9AA5B8}
  .xb-card{background:#fff}
}