/* ============================================================
   unibest.cc 资料页共享设计系统 v3 · 2026-11-09
   ------------------------------------------------------------
   单一正本：/downloads/ 下所有资料页只引用本文件，不许每页手写一套。
   改这里 = 全站资料页一起变。主站应用（首页、/academy、各业务子域）
   是另一套组件，不在本文件覆盖范围。

   v3 设计取向（苹果式秩序 + 太一云品牌轴）：
     · 字体、留白、层级、质感对齐 Apple 官网：SF/PingFang、
       半透明毛玻璃、18px 大圆角、1px 极淡描边、克制的文字色阶。
     · 去掉 v2 的浅紫胶囊、彩色分类签、大间距字标等视觉噪音；
       当前位置用文字字重表达，不用色块。
     · 品牌色不丢：太一紫 #514FB9 → 太一品红 #BB29BC 是唯一渐变轴，
       所有页头统一到这条轴（VIS 正本 vis/unibest-vis-tokens.css）。
     · 交互态用 0.2s 缓动，focus-visible 有清晰焦点环；
       尊重「减少动态效果」，打印时隐藏导航。

   前置依赖：nginx 的 /downloads/ 必须给 .css/.svg 正确类型，
   否则本文件会被浏览器按二进制拒收，页面退回裸 HTML。
   ============================================================ */

/* ---------- 一、设计令牌 ---------- */
:root {
  --ub-font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display",
             "PingFang SC", "Helvetica Neue", "Microsoft YaHei", Arial, sans-serif;
  --ub-ink:        #1d1d1f;   /* 主文字 */
  --ub-ink-2:      #3a3a3f;   /* 正文 */
  --ub-ink-3:      #6e6e73;   /* 次要 */
  --ub-ink-4:      #86868b;   /* 辅助 */
  --ub-hairline:   rgba(0, 0, 0, .07);
  --ub-surface:    #ffffff;   /* 卡片 / 内容面 */
  --ub-bg:         #fafafc;   /* 页面底：浅灰托白卡片，保留层次 */
  --ub-surface-2:  #f5f5f7;
  --ub-brand:      #514fb9;   /* 太一紫 */
  --ub-brand-end:  #bb29bc;   /* 太一品红 */
  --ub-radius:     18px;
  --ub-ease:       cubic-bezier(.28, .11, .32, 1);
}
.ub-bar *, .ub-bar *::before, .ub-bar *::after { box-sizing: border-box; }

/* ---------- 二、基础层 ---------- */
body {
  font-family: var(--ub-font);
  color: var(--ub-ink);
  background: var(--ub-bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  font-variant-numeric: tabular-nums;
}
a { text-underline-offset: 3px; }
::selection { background: rgba(81, 79, 185, .18); }
:focus-visible { outline: 2px solid var(--ub-brand); outline-offset: 3px; }

h2 {
  font-size: 26px; font-weight: 600; letter-spacing: -.02em;
  color: var(--ub-ink);
  margin: 40px 0 16px; padding-top: 24px;
  border-top: 1px solid var(--ub-hairline);
}
h3 { font-size: 19px; font-weight: 600; letter-spacing: -.01em; color: var(--ub-ink); }
p  { line-height: 1.75; color: var(--ub-ink-2); }
strong { color: var(--ub-ink); font-weight: 600; }
code {
  background: var(--ub-surface-2); color: var(--ub-ink);
  border-radius: 5px; padding: 2px 6px; font-size: .9em;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}
blockquote {
  margin: 16px 0; padding: 14px 18px;
  border-left: 0; border-radius: 12px;
  background: var(--ub-surface-2); color: var(--ub-ink-3); font-size: 13.5px;
}
footer { color: var(--ub-ink-4); font-size: 12px; }

/* ---------- 三、顶栏：苹果式毛玻璃单行导航 ---------- */
.ub-bar {
  position: sticky; top: 0; z-index: 30;  /* 导航条锁定在顶部，不随内容滚动（2026-11-09 太一） */
  background: rgba(250, 250, 252, .82);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  backdrop-filter: saturate(180%) blur(20px);
  border-bottom: 1px solid var(--ub-hairline);
  color-scheme: light;
  font-family: var(--ub-font);
}
.ub-in {
  /* 顶栏内容列与页面正文列同宽对齐：页面正文不是 1180 时，在本页 :root 覆盖 --ub-col */
  max-width: var(--ub-col, 1180px); margin: 0 auto;
  height: 48px; padding: 0 24px;
  display: flex; flex-wrap: nowrap; align-items: center; gap: 0;
}
/* 品牌：小标记 + 紧凑字标，不用大间距大写字 */
.ub-brand {
  order: 1; flex: none;
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 13.5px; font-weight: 600; letter-spacing: -.01em;
  color: var(--ub-ink); white-space: nowrap;
  background: none; border: 0; padding: 0;
}
.ub-brand::before {
  content: ""; width: 18px; height: 18px; flex: none;
  background: url('/downloads/vis/unibest-mark-knot.svg') center / contain no-repeat;  /* 中国结四元环官方源件（icon.svg 原样），双环 2026-10-20 已弃用禁再用 */
  opacity: .92;
}
/* 面包屑：12px 灰字，当前页靠字重区分，不用色块 */
.ub-crumb {
  order: 2; min-width: 0;
  display: flex; flex-wrap: nowrap; align-items: center; gap: 0;
  margin: 0 auto 0 0; padding-left: 16px;
  font-size: 12px; line-height: 1; color: var(--ub-ink-4);
  white-space: nowrap; overflow-x: auto;
  scrollbar-width: none;
}
.ub-crumb::-webkit-scrollbar { display: none; }
.ub-crumb::before {
  content: ""; flex: none; width: 1px; height: 16px;
  background: var(--ub-hairline); margin-right: 14px;
}
.ub-crumb a {
  flex: none; color: var(--ub-ink-3); text-decoration: none;
  padding: 6px 5px; border-radius: 6px;
  transition: color .2s var(--ub-ease), background-color .2s var(--ub-ease);
}
.ub-crumb a:hover {
  color: var(--ub-ink); background: rgba(0, 0, 0, .045);
  text-decoration: none;
}
.ub-sep { flex: none; font-size: 0; }
.ub-sep::after { content: "›"; font-size: 13px; color: #aeaeb2; padding: 0 3px; }
.ub-here {
  flex: 0 1 auto; min-width: 0;
  color: var(--ub-ink); font-weight: 500;
  background: none; border-radius: 0; padding: 6px 5px;
  overflow: hidden; text-overflow: ellipsis;
}
/* 右侧辅助信息：降到只读的轻文字，不再抢视线 */
.ub-tag, .ub-tag-arch {
  order: 3; flex: none;
  font-size: 11px; font-weight: 400; color: var(--ub-ink-4);
  background: none; border-radius: 0; padding: 4px 0 4px 14px;
  white-space: nowrap;
}
.ub-tag { border-left: 1px solid var(--ub-hairline); margin-left: 10px; }
.ub-tag-arch { order: 4; color: #a1a1a6; padding-left: 8px; }
.ub-tag-arch::before { content: "·"; margin-right: 8px; color: #c7c7cc; }
.ub-latest {
  order: 5; flex: none; margin-left: 14px;
  font-size: 11.5px; font-weight: 400; color: var(--ub-brand);
  text-decoration: none; white-space: nowrap;
}
.ub-latest:hover { text-decoration: underline; }
.ub-bar a:focus-visible { outline-offset: -2px; }

/* ---------- 四、页头：统一到太一紫 → 太一品红唯一渐变轴 ---------- */
header.hero {
  background-color: var(--ub-brand);
  background-image:
    radial-gradient(rgba(255, 255, 255, .13) 1px, transparent 1px),
    linear-gradient(135deg, #1a1c40 0%, #26285c 32%, #514fb9 68%, #bb29bc 100%);
  background-size: 22px 22px, 100% 100%;
  background-position: 0 0, center;
  color: #fff;
}
/* 两种页头形态分开给内边距：
   ① 全宽通栏型（内部有 .wrap 限宽）—— padding 落在上下，内容由 .wrap 收口；
   ② 居中卡片型（自身就是限宽容器）—— 左右必须留白，否则标题贴边。 */
header.hero:has(.wrap) { padding: 48px 0 40px; }
header.hero .wrap { position: relative; }
header.hero:not(:has(.wrap)) {
  position: relative; overflow: hidden;
  padding: 40px 36px;
  border-radius: var(--ub-radius);
  margin-bottom: 26px;
}
header.hero .wrap::after,
header.hero:not(:has(.wrap))::after {
  content: ""; position: absolute; right: -4px; top: -14px;
  width: 190px; height: 190px;
  background: url('/downloads/vis/unibest-mark-white.png') center / contain no-repeat;
  opacity: .10; pointer-events: none;
}
header.hero .eyebrow {
  font-size: 11.5px; font-weight: 500; letter-spacing: .08em;
  text-transform: none; color: #fff; opacity: .72;
  text-shadow: 0 1px 2px rgba(0, 0, 0, .18);
}
header.hero h1 {
  font-size: 34px; font-weight: 600; letter-spacing: -.02em; line-height: 1.22;
  margin: 12px 0 10px; color: #fff;
  text-shadow: 0 1px 3px rgba(0, 0, 0, .16);
}
header.hero .meta {
  font-size: 14px; font-weight: 500; color: #fff; opacity: 1;
  text-shadow: 0 1px 2px rgba(0, 0, 0, .22);
}
header.hero .verdict {
  background: rgba(255, 255, 255, .12);
  border: 1px solid rgba(255, 255, 255, .18);
  border-radius: 16px; padding: 18px 22px; margin-top: 22px;
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  font-size: 15px; line-height: 1.7; color: #fff;
}
header.hero .verdict b { color: #fff; font-weight: 600; }

/* ---------- 五、内容组件：大圆角、极淡描边、轻投影 ---------- */
main, nav.toc, .card {
  background: var(--ub-surface);
  border: 1px solid rgba(0, 0, 0, .06);
  border-radius: var(--ub-radius);
  box-shadow: 0 1px 2px rgba(0, 0, 0, .03), 0 8px 28px rgba(0, 0, 0, .035);
}
main    { padding: 32px 36px 44px; }
nav.toc { padding: 16px 12px; font-size: 12.5px; }
nav.toc a { color: var(--ub-ink-3); border-radius: 8px; padding: 5px 10px; }
nav.toc a:hover { background: var(--ub-surface-2); color: var(--ub-ink); }
.card   { padding: 20px 22px; }
.card .t { font-size: 11.5px; color: var(--ub-brand); font-weight: 600; letter-spacing: .02em; }
.card h3 { margin: 6px 0 8px; font-size: 17px; }
.card p  { font-size: 13.5px; color: var(--ub-ink-3); }
.card a  { color: var(--ub-brand); font-weight: 500; text-decoration: none; }
.card a:hover { text-decoration: underline; }

/* 章节条：毛玻璃 + pill，选中态保留品牌紫 */
nav.cnav {
  background: rgba(255, 255, 255, .86);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  backdrop-filter: saturate(180%) blur(20px);
  border-bottom: 1px solid var(--ub-hairline);
}
nav.cnav a {
  color: var(--ub-ink-3); font-size: 12.5px;
  border-radius: 980px; padding: 6px 14px;
  transition: color .2s var(--ub-ease), background-color .2s var(--ub-ease);
}
nav.cnav a:hover { background: var(--ub-surface-2); color: var(--ub-ink); }
nav.cnav a.cur   { background: var(--ub-brand); color: #fff; }

/* 表格：去掉网格线，只留行分隔 */
.tw { border-radius: 12px; }
table {
  border-collapse: separate; border-spacing: 0; width: 100%;
  font-size: 13.5px; border: 1px solid var(--ub-hairline);
  border-radius: 12px; overflow: hidden;
}
th {
  background: var(--ub-surface-2); color: var(--ub-ink-3);
  font-weight: 600; text-align: left; padding: 11px 14px;
  border: 0; border-bottom: 1px solid var(--ub-hairline);
}
td {
  padding: 11px 14px; color: var(--ub-ink-2);
  border: 0; border-bottom: 1px solid rgba(0, 0, 0, .05);
}
tbody tr:last-child td { border-bottom: 0; }
tbody tr:nth-child(even) { background: #fbfbfd; }

/* ---------- 五之二、页头下方的版本提示条：降为安静的元信息 ----------
   部分页面在页头后自带一条浅紫底提示（行内样式写死），与新体系冲突。
   统一成白底极细字，保留信息但不再形成第二条醒目横带。 */
header.hero + div[style] {
  background: var(--ub-surface) !important;
  border-bottom: 1px solid var(--ub-hairline) !important;
  font-size: 11.5px !important;
}
header.hero + div[style] > div[style] {
  padding-top: 9px !important; padding-bottom: 9px !important;
}
header.hero + div[style] a {
  color: var(--ub-brand) !important; font-weight: 500 !important;
  text-decoration: none;
}
header.hero + div[style] a:hover { text-decoration: underline; }
header.hero + div[style] span { color: var(--ub-ink-4) !important; }

/* ---------- 六、响应式 / 无障碍 / 打印 ---------- */
@media (max-width: 880px) {
  .ub-in { padding: 0 16px; }
  .ub-tag, .ub-tag-arch, .ub-latest { display: none; }
  header.hero h1 { font-size: 27px; }
  header.hero:not(:has(.wrap)) { padding-left: 28px; padding-right: 28px; }
  header.hero .wrap::after { width: 120px; height: 120px; opacity: .07; }
  main { padding: 24px 20px 34px; }
}
@media (max-width: 560px) {
  .ub-brand { font-size: 12.5px; }
  .ub-crumb { font-size: 11.5px; padding-left: 10px; }
  .ub-crumb::before { margin-right: 8px; }
  .ub-crumb a, .ub-here { padding-left: 4px; padding-right: 4px; }
  header.hero { padding: 36px 0 32px; }
  header.hero h1 { font-size: 24px; }
  h2 { font-size: 22px; }
}
@media (prefers-reduced-motion: reduce) {
  .ub-bar *, nav.cnav a { transition: none !important; animation: none !important; }
}
@media print {
  .ub-bar, nav.cnav, nav.toc, .ub-search, .ub-scrim { display: none !important; }
  main, .card { box-shadow: none; border-color: #ddd; }
}

/* ---------- 七、全局搜索（2026-11-09 太一令：每页必带，快速找材料的关键） ----------
   配套脚本 _shared/search.js：顶栏注入搜索按钮（无顶栏页挂右下悬浮），
   ⌘K / Ctrl+K / 斜杠键唤起浮层，输入即过滤，Enter 直达。 */
.ub-search {
  display: inline-flex; align-items: center; gap: 6px;
  height: 28px; padding: 0 10px;
  border: 1px solid var(--ub-hairline); border-radius: 980px;
  background: var(--ub-surface); color: var(--ub-ink-3);
  font-family: var(--ub-font); font-size: 11.5px; cursor: pointer;
  transition: border-color .2s var(--ub-ease), color .2s var(--ub-ease), background-color .2s var(--ub-ease);
}
.ub-search:hover { border-color: rgba(81, 79, 185, .35); color: var(--ub-ink); background: #fff; }
.ub-search-inbar { order: 6; flex: none; margin-left: 14px; }
.ub-search-float {
  position: fixed; right: 22px; bottom: 22px; z-index: 40;
  height: 38px; padding: 0 15px; font-size: 12.5px;
  background: var(--ub-brand); border-color: transparent; color: #fff;
  box-shadow: 0 6px 22px rgba(81, 79, 185, .32);
}
.ub-search-float:hover { background: #4540a8; color: #fff; border-color: transparent; }
.ub-search-t { white-space: nowrap; }
.ub-search-k {
  font-family: var(--ub-font); font-size: 9.5px; font-style: normal;
  color: var(--ub-ink-4); background: var(--ub-surface-2);
  border-radius: 4px; padding: 1px 5px;
}
.ub-search-float .ub-search-k { color: rgba(255, 255, 255, .85); background: rgba(255, 255, 255, .18); }

.ub-scrim {
  position: fixed; inset: 0; z-index: 60;
  background: rgba(29, 29, 31, .28);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  display: flex; justify-content: center; align-items: flex-start;
  padding: 12vh 16px 16px;
}
.ub-scrim[hidden] { display: none; }
.ub-spanel {
  width: min(620px, 100%); max-height: 72vh;
  background: var(--ub-surface); border-radius: 16px; overflow: hidden;
  box-shadow: 0 2px 6px rgba(0, 0, 0, .08), 0 24px 64px rgba(0, 0, 0, .22);
  display: flex; flex-direction: column;
  font-family: var(--ub-font);
}
.ub-sbar {
  display: flex; align-items: center; gap: 10px;
  padding: 13px 16px; border-bottom: 1px solid var(--ub-hairline);
}
.ub-sicon { flex: none; color: var(--ub-ink-4); }
.ub-sinput {
  flex: 1; min-width: 0; border: 0; outline: none; background: transparent;
  font-family: var(--ub-font); font-size: 15px; color: var(--ub-ink);
}
.ub-sinput::placeholder { color: var(--ub-ink-4); }
.ub-skbd {
  flex: none; font-family: var(--ub-font); font-size: 10px;
  color: var(--ub-ink-4); border: 1px solid var(--ub-hairline);
  border-radius: 5px; padding: 2px 6px;
}
.ub-slist { flex: 1; overflow-y: auto; padding: 6px; min-height: 60px; }
.ub-sitem {
  display: flex; flex-direction: column; gap: 2px;
  padding: 10px 12px; border-radius: 10px;
  text-decoration: none; color: inherit; cursor: pointer;
}
.ub-sitem:hover, .ub-sitem.cur { background: var(--ub-surface-2); text-decoration: none; }
.ub-sg { font-size: 10px; font-weight: 600; color: var(--ub-brand); letter-spacing: .02em; }
.ub-st { font-size: 13.5px; font-weight: 600; color: var(--ub-ink); }
.ub-sd {
  font-size: 12px; color: var(--ub-ink-3);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ub-sempty { padding: 26px 16px; text-align: center; font-size: 13px; color: var(--ub-ink-4); }
.ub-sfoot {
  padding: 8px 16px; border-top: 1px solid var(--ub-hairline);
  font-size: 11px; color: var(--ub-ink-4);
}
@media (max-width: 880px) {
  .ub-search-t, .ub-search-k { display: none; }
  .ub-search-inbar { padding: 0 8px; }
  .ub-scrim { padding-top: 8vh; }
}