/* ==========================================================================
   Vela 设计标准 v2 —— 研究站与 OA 共用
   本文件由 v2/build_css.py 从 v2/css/ 五层源文件生成，不要手改。
   --------------------------------------------------------------------------
   规则出处（读自开源仓库源码）：
   · Shopify Polaris   页标题 20px semibold，卡片用凸起内阴影，按钮底边内阴影，设置页左说明右表单
   · GitHub Primer     圆角按角色：徽章小，按钮与输入中，容器大
   · IBM Carbon        字距：12px +0.32px，14px +0.16px，16px 以上 0
   · Semi Design       行高绑定固定 px，4 的倍数
   · WCAG 2.1          文字对比度 ≥ 4.5:1（1.4.3），图形 ≥ 3:1（1.4.11）；控件高度常规 40、触屏与登录 44
   --------------------------------------------------------------------------
   约定：
   · 全部类名 v- 前缀，变量 --v- 前缀；样式只在 .v-app 内生效。
   · 只有一套品牌主题（海军蓝 + 铜色）与它的深色模式；探索用的其他配色只在演示页。
   · 说明文字用 --v-ink-3；纯装饰（图标、箭头）才用 --v-ink-deco。
   · 选中态写语义属性（aria-pressed / aria-selected / aria-current），is-on 只作兼容。
   · 数字、日期、代码、金额走等宽（v-mono）；研究稿正文走衬线（v-prose）；其余一律无衬线。
   ========================================================================== */

/* ---- tokens.css ---- */
/* ==========================================================================
   第 1 层 · 变量
   正式版只有一套品牌主题：海军蓝 + 铜色。另外六套配色只在演示页的「探索」里，不进业务设置。
   深色模式是同一套主题的暗版（颜色角色不变），由个人设置「主题」切换。
   对比度与控件尺寸的验收：python v2/check.py（写在 ACCEPTANCE.md）。
   ========================================================================== */

:root {
  /* ---- 基础色 ---- */
  --v-navy:      #0C1C2E;   /* 顶栏、主按钮 */
  --v-navy-2:    #16324A;   /* 主按钮悬停 */
  --v-accent:    #A3542B;   /* 铜色：链接、当前导航图标 */
  --v-paper:     #EDF3F8;   /* 页面底色 */
  --v-surface:   #FFFFFF;   /* 卡片 */
  --v-surface-2: #F6FAFD;   /* 表头、卡片脚 */
  --v-hair:      #E1E9F0;   /* 分隔线 */
  --v-hair-2:    #B8C9D8;   /* 输入框边 */
  --v-ink:       #152433;   /* 正文 */
  --v-ink-2:     #4A5D70;   /* 次要文字 */
  --v-ink-3:     #55677A;   /* 说明、时间、标签：真实文字，任何底色上 ≥ 4.5:1 */
  --v-ink-deco:  #7A8C9C;   /* 纯装饰：图标、箭头、占位图形；不能用来写字（白底 3.47:1） */
  --v-ok:        #246344;
  --v-warn:      #805700;
  --v-bad:       #A5362C;
  --v-info:      #205D8C;

  /* ---- 推导色：跟随基础色，不要单独改 ---- */
  --v-side:  color-mix(in srgb, var(--v-paper) 93%, var(--v-ink) 7%);
  --v-hover: color-mix(in srgb, var(--v-ink) 5%, transparent);
  --v-line:  color-mix(in srgb, var(--v-ink) 8%, transparent);
  --v-card-sh:
    0 0 0 1px color-mix(in srgb, var(--v-ink) 8%, transparent),
    0 1px 0 0 color-mix(in srgb, var(--v-ink) 8%, transparent),
    0 2px 3px -1px color-mix(in srgb, var(--v-ink) 5%, transparent);
  --v-btn-sh:
    inset 0 -1px 0 0 color-mix(in srgb, var(--v-ink) 22%, transparent),
    inset 0 0 0 1px color-mix(in srgb, var(--v-ink) 13%, transparent),
    0 1px 0 0 color-mix(in srgb, var(--v-ink) 5%, transparent);
  --v-btn-pri-sh:
    inset 0 -1px 0 1px rgba(0,0,0,.45),
    inset 0 0 0 1px var(--v-navy),
    inset 0 1px 0 0 rgba(255,255,255,.14);
  --v-pop-sh:
    0 0 0 1px color-mix(in srgb, var(--v-ink) 9%, transparent),
    0 12px 28px -8px color-mix(in srgb, var(--v-ink) 26%, transparent);
  --v-focus: 0 0 0 2px var(--v-surface), 0 0 0 4px var(--v-info);

  /* ---- 字体 ---- */
  --v-sans:  "IBM Plex Sans", "PingFang SC", "Microsoft YaHei", sans-serif;
  --v-mono:  "IBM Plex Mono", ui-monospace, "PingFang SC", monospace;
  --v-serif: "Source Han Serif SC", "Noto Serif SC", "Songti SC", Georgia, serif;

  /* ---- 圆角（按角色） ---- */
  --v-r-badge: 6px;
  --v-r-ctl:   8px;
  --v-r-card:  12px;

  /* ---- 间距：4px 栅格 ---- */
  --v-s1: 4px;  --v-s2: 8px;  --v-s3: 12px; --v-s4: 16px;
  --v-s5: 20px; --v-s6: 24px; --v-s8: 32px; --v-s10: 40px;

  /* ---- 控件高度（按使用场景，所有可点的东西都从这里取）----
     常规 40：按钮、输入框、下拉、搜索框、侧栏项、页签、分段选择
     紧凑 32：只用在桌面上信息密集的位置——表格行内操作、卡片头的小按钮、筛选标签、行内下拉
     触屏 44：手指操作（pointer: coarse）时常规与紧凑一律抬到 44；登录页始终 44 */
  --v-ctl:       40px;
  --v-ctl-sm:    32px;
  --v-ctl-touch: 44px;

  /* ---- 尺寸 ---- */
  --v-top-h:   56px;
  --v-side-w:  232px;
  --v-page-w:  1080px;
  --v-page-wide: 1280px;
}

@media (pointer: coarse) {
  :root { --v-ctl: var(--v-ctl-touch); --v-ctl-sm: var(--v-ctl-touch); }
}

/* ---- 深色模式：同一套主题的暗版（个人设置选「深色」或「跟随系统」时） ---- */
:root[data-theme="dark"] {
  color-scheme: dark;
  --v-navy: #0A1522; --v-navy-2: #1B3A55; --v-accent: #E0915F;
  --v-paper: #0E151D; --v-surface: #16202B; --v-surface-2: #1B2733; --v-hair: #263444; --v-hair-2: #4A5D72;
  --v-ink: #E3EAF1; --v-ink-2: #B4C2CF; --v-ink-3: #9AAABA; --v-ink-deco: #6F8193;
  --v-ok: #5DBB8A; --v-warn: #E0B04F; --v-bad: #EE8A7E; --v-info: #7DB6E6;
}
@media (prefers-color-scheme: dark) {
  :root[data-theme="system"] {
    color-scheme: dark;
    --v-navy: #0A1522; --v-navy-2: #1B3A55; --v-accent: #E0915F;
    --v-paper: #0E151D; --v-surface: #16202B; --v-surface-2: #1B2733; --v-hair: #263444; --v-hair-2: #4A5D72;
    --v-ink: #E3EAF1; --v-ink-2: #B4C2CF; --v-ink-3: #9AAABA; --v-ink-deco: #6F8193;
    --v-ok: #5DBB8A; --v-warn: #E0B04F; --v-bad: #EE8A7E; --v-info: #7DB6E6;
  }
}

/* ---- base.css ---- */
/* ==========================================================================
   第 2 层 · 基础：只在 .v-app 内生效，不改全局元素
   ========================================================================== */
.v-app {
  background: var(--v-paper); color: var(--v-ink);
  font: 400 14px/20px var(--v-sans); letter-spacing: .16px;
  -webkit-font-smoothing: antialiased;
}
.v-app *, .v-app *::before, .v-app *::after { box-sizing: border-box; }
.v-app a { color: inherit; text-decoration: none; }
.v-app button, .v-app input, .v-app select, .v-app textarea { font: inherit; color: inherit; letter-spacing: inherit; }
.v-app ::placeholder { color: var(--v-ink-3); opacity: 1; }
.v-app[hidden], .v-app [hidden] { display: none !important; }
.v-app :focus-visible { outline: none; box-shadow: var(--v-focus); border-radius: var(--v-r-ctl); }
/* 读屏专用：看不见但读得到（给只有图标的按钮、只有占位提示的搜索框写名字） */
.v-sr { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
/* 跳到正文：键盘第一下 Tab 出现 */
.v-skip { position: absolute; left: 12px; top: -64px; z-index: 300; display: inline-flex; align-items: center; min-height: var(--v-ctl); padding: 8px 14px; border-radius: var(--v-r-ctl); background: var(--v-surface); color: var(--v-ink); box-shadow: var(--v-pop-sh); font-weight: 600; }
.v-skip:focus { top: 8px; }
/* 目录、页内跳转的目标：程序聚焦时不画焦点框，跳过去的位置留出顶栏 */
.v-app [tabindex="-1"]:focus { box-shadow: none; }
.v-app :target, .v-app [data-anchor] { scroll-margin-top: 16px; }

/* 字阶 */
.v-h1    { margin: 0; font: 600 20px/28px var(--v-sans); letter-spacing: 0; text-wrap: balance; }
.v-h2    { margin: 0; font: 600 16px/24px var(--v-sans); letter-spacing: 0; text-wrap: balance; }
.v-h3    { margin: 0; font: 600 14px/20px var(--v-sans); }
.v-body  { font: 400 14px/20px var(--v-sans); }
.v-small { font: 400 12px/16px var(--v-sans); letter-spacing: .32px; }
.v-muted { color: var(--v-ink-3); }
.v-sub   { color: var(--v-ink-2); }
.v-mono  { font-family: var(--v-mono); font-variant-numeric: tabular-nums; letter-spacing: 0; }
.v-link  { color: var(--v-accent); text-decoration: underline; text-underline-offset: 2px; text-decoration-thickness: 1px; }
.v-link:hover { text-decoration-thickness: 2px; }

/* 图标：16px 线性，描边随文字色 */
.v-ico { width: 16px; height: 16px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
@media (prefers-reduced-motion: reduce) { .v-app * { transition: none !important; animation: none !important; scroll-behavior: auto !important; } }

/* ---- components.css ---- */
/* ==========================================================================
   第 3 层 · 基础组件：页头、按钮、徽章、提示、卡片、列表、指标、表格、工具条、表单、保存状态、登录
   选中态统一写语义属性（aria-pressed / aria-selected / aria-current），is-on 只作兼容。
   ========================================================================== */
/* ==========================================================================
   页头
   ========================================================================== */
.v-ph { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--v-s3) var(--v-s4); padding-bottom: 4px; }
.v-ph-main { flex: 1 1 320px; min-width: 0; }
.v-crumb { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-bottom: 6px; font: 400 13px/20px var(--v-sans); color: var(--v-ink-3); }
.v-crumb a { color: var(--v-ink-2); }
.v-crumb a:hover { color: var(--v-ink); text-decoration: underline; }
.v-ph-title { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.v-ph-sub { margin: 2px 0 0; font-size: 13px; color: var(--v-ink-2); }
.v-ph-actions { display: flex; flex-wrap: wrap; gap: var(--v-s2); }

/* ==========================================================================
   按钮
   ========================================================================== */
.v-btn {
  appearance: none; display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  min-height: var(--v-ctl); padding: 8px 14px; border: 0; border-radius: var(--v-r-ctl);
  background: var(--v-surface); color: var(--v-ink); box-shadow: var(--v-btn-sh);
  font: 500 13px/20px var(--v-sans); letter-spacing: 0; cursor: pointer; white-space: nowrap;
}
.v-btn:hover { background: color-mix(in srgb, var(--v-surface) 94%, var(--v-ink) 6%); }
.v-btn:active { box-shadow: inset 0 1px 2px 0 color-mix(in srgb, var(--v-ink) 25%, transparent); }
.v-btn.is-pri { background: var(--v-navy); color: #fff; box-shadow: var(--v-btn-pri-sh); }
.v-btn.is-pri:hover { background: var(--v-navy-2); }
.v-btn.is-danger { color: var(--v-bad); }
.v-btn.is-sm { min-height: var(--v-ctl-sm); padding: 6px 12px; font-size: 13px; line-height: 20px; }
.v-btn[aria-busy="true"] { cursor: progress; opacity: .75; }
.v-btn.is-plain { background: none; box-shadow: none; color: var(--v-accent); padding-inline: 6px; }
.v-btn.is-plain:hover { background: color-mix(in srgb, var(--v-accent) 8%, transparent); }
.v-btn:disabled { opacity: .55; cursor: not-allowed; }

/* 分段选择 */
.v-seg { display: inline-flex; padding: 3px; gap: 2px; border-radius: var(--v-r-ctl); background: color-mix(in srgb, var(--v-ink) 6%, var(--v-surface)); }
.v-seg > button, .v-seg > a { appearance: none; display: inline-flex; align-items: center; justify-content: center; min-height: calc(var(--v-ctl) - 6px); border: 0; background: none; padding: 4px 14px; border-radius: 6px; font: 500 13px/20px var(--v-sans); color: var(--v-ink-2); cursor: pointer; white-space: nowrap; }
.v-seg > .is-on, .v-seg > [aria-pressed="true"], .v-seg > [aria-current], .v-seg > [aria-selected="true"] { background: var(--v-surface); color: var(--v-ink); box-shadow: var(--v-card-sh); }

/* ==========================================================================
   徽章与提示
   ========================================================================== */
.v-badge {
  display: inline-flex; align-items: center; gap: 5px; height: 20px; padding-inline: 8px;
  border-radius: var(--v-r-badge); font: 500 12px/16px var(--v-sans); letter-spacing: 0; white-space: nowrap;
  background: color-mix(in srgb, var(--v-ink) 7%, var(--v-surface)); color: var(--v-ink-2);
}
.v-badge.is-ok   { background: color-mix(in srgb, var(--v-ok)   13%, var(--v-surface)); color: var(--v-ok); }
.v-badge.is-warn { background: color-mix(in srgb, var(--v-warn) 15%, var(--v-surface)); color: var(--v-warn); }
.v-badge.is-bad  { background: color-mix(in srgb, var(--v-bad)  13%, var(--v-surface)); color: var(--v-bad); }
.v-badge.is-info { background: color-mix(in srgb, var(--v-info) 12%, var(--v-surface)); color: var(--v-info); }
.v-badge.is-dot::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }

.v-banner {
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px 12px; padding: 12px 14px;
  border-radius: var(--v-r-card);
  background: color-mix(in srgb, var(--v-warn) 9%, var(--v-surface));
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--v-warn) 22%, transparent);
}
.v-banner > .v-ico { color: var(--v-warn); }
.v-banner.is-bad  { background: color-mix(in srgb, var(--v-bad)  7%, var(--v-surface)); box-shadow: 0 0 0 1px color-mix(in srgb, var(--v-bad)  22%, transparent); }
.v-banner.is-bad > .v-ico { color: var(--v-bad); }
.v-banner.is-ok   { background: color-mix(in srgb, var(--v-ok)   8%, var(--v-surface)); box-shadow: 0 0 0 1px color-mix(in srgb, var(--v-ok)   20%, transparent); }
.v-banner.is-ok > .v-ico { color: var(--v-ok); }
.v-banner.is-info { background: color-mix(in srgb, var(--v-info) 7%, var(--v-surface)); box-shadow: 0 0 0 1px color-mix(in srgb, var(--v-info) 20%, transparent); }
.v-banner.is-info > .v-ico { color: var(--v-info); }
.v-banner-tx { flex: 1 1 280px; min-width: 0; }
.v-banner-tx b { font-weight: 600; }
.v-banner-tx span { color: var(--v-ink-2); }

/* ==========================================================================
   卡片、列表、指标
   ========================================================================== */
.v-grid-2-1 { display: grid; grid-template-columns: minmax(0,2fr) minmax(0,1fr); gap: var(--v-s4); align-items: start; }
.v-grid-1-1 { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: var(--v-s4); align-items: start; }
.v-grid-1-2 { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,2fr); gap: var(--v-s4); align-items: start; }
.v-row.is-sel, .v-row.is-sel:hover { background: color-mix(in srgb, var(--v-info) 8%, var(--v-surface)); }
.v-row.is-sel .v-row-main b { font-weight: 600; }
.v-stack    { display: flex; flex-direction: column; gap: var(--v-s4); min-width: 0; }

.v-card { background: var(--v-surface); border-radius: var(--v-r-card); box-shadow: var(--v-card-sh); overflow: hidden; min-width: 0; }
.v-card-h { display: flex; flex-wrap: wrap; align-items: center; gap: var(--v-s2); padding: 14px 16px 10px; }
.v-card-h .v-h3 { margin-right: 2px; }
.v-card-h .is-end { margin-left: auto; }
.v-card-b { padding: 4px 16px 16px; }
.v-card-f { padding: 10px 16px; border-top: 1px solid var(--v-hair); background: var(--v-surface-2); color: var(--v-ink-3); font-size: 12px; line-height: 16px; }

.v-row { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; padding: 11px 16px; border-top: 1px solid var(--v-hair); }
.v-row:hover { background: color-mix(in srgb, var(--v-surface-2) 70%, var(--v-surface)); }
.v-row-main { flex: 1 1 120px; min-width: 0; display: flex; flex-direction: column; }
.v-row-main b { font-weight: 500; }
.v-row-main small { font-size: 12px; line-height: 16px; color: var(--v-ink-3); }
.v-row-time { font: 400 12px/16px var(--v-mono); color: var(--v-ink-3); white-space: nowrap; }

.v-metrics { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(140px,100%),1fr)); margin: 0 16px 12px; border-radius: 10px; background: var(--v-surface-2); box-shadow: inset 0 0 0 1px var(--v-hair); }
.v-metrics > div { padding: 10px 14px; }
.v-metrics > div + div { border-left: 1px solid var(--v-hair); }
.v-metrics dt, .v-kpi dt { font-size: 12px; line-height: 16px; color: var(--v-ink-3); }
.v-metrics dd { margin: 2px 0 0; font: 500 20px/28px var(--v-mono); letter-spacing: -.3px; }
.v-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(150px,100%),1fr)); gap: var(--v-s3); margin: 0; }
.v-kpi { background: var(--v-surface); border-radius: var(--v-r-card); box-shadow: var(--v-card-sh); padding: 12px 14px; }
.v-kpi dd { margin: 4px 0 0; font: 500 22px/28px var(--v-mono); letter-spacing: -.4px; }
.v-metrics dd small, .v-kpi dd small { font: 400 12px/16px var(--v-sans); color: var(--v-ink-3); margin-left: 3px; letter-spacing: 0; }
.v-kpi.is-bad dd { color: var(--v-bad); } .v-kpi.is-warn dd { color: var(--v-warn); } .v-kpi.is-ok dd { color: var(--v-ok); }

.v-kv { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(140px,100%),1fr)); gap: 10px 12px; margin: 0; padding: 12px 16px 16px; }
.v-kv dt { font-size: 12px; line-height: 16px; color: var(--v-ink-3); }
.v-kv dd { margin: 2px 0 0; }

.v-progress { height: 6px; border-radius: 6px; background: color-mix(in srgb, var(--v-ink) 8%, var(--v-surface)); overflow: hidden; margin-top: 6px; }
.v-progress i { display: block; height: 100%; border-radius: 6px; background: var(--v-navy); }
.v-progress i.is-warn { background: var(--v-warn); }
.v-progress i.is-bad { background: var(--v-bad); }
/* ==========================================================================
   表格与工具条
   ========================================================================== */
.v-table-wrap { overflow-x: auto; border-top: 1px solid var(--v-hair); }
.v-table { width: 100%; border-collapse: collapse; }
.v-table th { padding: 8px 16px; text-align: left; background: var(--v-surface-2); font: 500 12px/16px var(--v-sans); letter-spacing: .32px; color: var(--v-ink-2); border-bottom: 1px solid var(--v-hair); white-space: nowrap; }
.v-table td { padding: 10px 16px; border-bottom: 1px solid var(--v-hair); vertical-align: middle; }
.v-table tr:last-child td { border-bottom: 0; }
.v-table tbody tr:hover td { background: color-mix(in srgb, var(--v-surface-2) 70%, var(--v-surface)); }
.v-table .is-num { text-align: right; }
.v-table td.is-num { font-family: var(--v-mono); font-size: 13px; letter-spacing: 0; white-space: nowrap; }
.v-table td b { font-weight: 500; }
.v-table .v-code { display: block; font: 400 12px/16px var(--v-mono); color: var(--v-ink-3); letter-spacing: 0; }

.v-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: var(--v-s2) var(--v-s3); padding: 12px 16px; }
.v-search { flex: 1 1 240px; display: flex; align-items: center; gap: var(--v-s2); min-height: var(--v-ctl); padding-inline: 12px; border-radius: var(--v-r-ctl); background: var(--v-surface); box-shadow: inset 0 0 0 1px var(--v-hair-2); color: var(--v-ink-3); }
.v-search:focus-within { box-shadow: inset 0 0 0 2px var(--v-info); }
/* 单独放在页面里的大搜索框（知识库等） */
.v-search.is-lg { flex: none; width: 100%; max-width: 640px; min-height: var(--v-ctl-touch); }
.v-search input { flex: 1; min-width: 0; align-self: stretch; border: 0; background: none; outline: none; color: var(--v-ink); }
.v-search input:focus-visible { box-shadow: none; }
.v-chip { display: inline-flex; align-items: center; gap: 6px; min-height: var(--v-ctl-sm); padding-inline: 12px; border-radius: 999px; border: 0; background: var(--v-surface); box-shadow: inset 0 0 0 1px var(--v-hair-2); font: 500 13px/16px var(--v-sans); color: var(--v-ink-2); cursor: pointer; }
.v-chip.is-on, .v-chip[aria-pressed="true"], .v-chip[aria-current] { background: var(--v-navy); color: #fff; box-shadow: none; }
.v-chip .v-mono { opacity: .75; }

.v-tabs { display: flex; gap: 2px; padding: 8px 8px 0; border-bottom: 1px solid var(--v-hair); overflow-x: auto; }
.v-tabs button, .v-tabs a { appearance: none; display: inline-flex; align-items: center; min-height: var(--v-ctl); border: 0; background: none; padding: 8px 12px; font: 500 13px/20px var(--v-sans); color: var(--v-ink-2); border-bottom: 2px solid transparent; white-space: nowrap; cursor: pointer; }
.v-tabs .is-on, .v-tabs [aria-selected="true"], .v-tabs [aria-current] { color: var(--v-ink); border-bottom-color: var(--v-navy); }

/* ==========================================================================
   表单
   ========================================================================== */
.v-form { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 14px 16px; padding: 16px; }
.v-field { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.v-field.is-full { grid-column: 1 / -1; }
.v-field > label { font: 500 13px/20px var(--v-sans); }
.v-input { display: flex; align-items: stretch; min-height: var(--v-ctl); border-radius: var(--v-r-ctl); background: var(--v-surface); box-shadow: inset 0 0 0 1px var(--v-hair-2), inset 0 1px 0 0 color-mix(in srgb, var(--v-ink) 6%, transparent); overflow: hidden; }
.v-input:focus-within { box-shadow: inset 0 0 0 2px var(--v-info); }
.v-input input, .v-input select, .v-input textarea { flex: 1; min-width: 0; border: 0; background: none; padding: 9px 12px; outline: none; }
.v-input :focus-visible { box-shadow: none; }
.v-input textarea { min-height: 88px; resize: vertical; }
.v-input input[type=number] { font-family: var(--v-mono); text-align: right; }
.v-suffix { display: flex; align-items: center; padding-inline: 10px; border-left: 1px solid var(--v-hair); background: var(--v-surface-2); color: var(--v-ink-3); font-size: 13px; white-space: nowrap; }
.v-help { font-size: 12px; line-height: 16px; color: var(--v-ink-3); }
.v-check { display: inline-flex; align-items: center; gap: 8px; min-height: var(--v-ctl-sm); cursor: pointer; }
.v-check input { width: 16px; height: 16px; margin: 0; accent-color: var(--v-navy); }

/* 设置页：左说明右表单 */
.v-annotated { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,2fr); gap: var(--v-s4) 28px; padding-block: var(--v-s5); border-top: 1px solid var(--v-line); }
.v-annotated:first-child { border-top: 0; padding-top: 4px; }
.v-annotated-l p { margin: 4px 0 8px; font-size: 13px; line-height: 20px; color: var(--v-ink-2); }
/* ==========================================================================
   登录
   ========================================================================== */
.v-login { min-height: 100%; display: grid; place-items: center; padding: 48px 16px; background: var(--v-paper); }
.v-login-card { width: min(400px, 100%); padding: 28px 28px 24px; border-radius: 16px; background: var(--v-surface); box-shadow: var(--v-pop-sh); display: flex; flex-direction: column; gap: 16px; }
.v-login-card .v-brand { width: auto; }
.v-login-card .v-brand b { color: var(--v-ink); }
.v-login-card .v-brand small { color: var(--v-ink-3); }
.v-login-card .v-btn { min-height: var(--v-ctl-touch); font-size: 14px; }
.v-login-card .v-input { min-height: var(--v-ctl-touch); }
.v-login-foot { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px; font-size: 12px; color: var(--v-ink-3); }

/* ==========================================================================
   保存状态：表单旁边一行，说清楚现在存没存上
   data-state = dirty（未保存）/ saving（保存中）/ saved（已保存）/ pending（待同步）/ error（失败可重试）
   外层要有 role="status" aria-live="polite"，读屏会念出变化
   ========================================================================== */
.v-savestate { display: inline-flex; align-items: center; gap: 6px; min-height: 20px; font: 500 12px/16px var(--v-sans); color: var(--v-ink-3); }
.v-savestate::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: currentColor; flex: none; }
.v-savestate[data-state="dirty"]   { color: var(--v-warn); }
.v-savestate[data-state="saving"]  { color: var(--v-info); }
.v-savestate[data-state="saving"]::before { width: 10px; height: 10px; background: none; border: 2px solid currentColor; border-right-color: transparent; animation: v-spin .8s linear infinite; }
.v-savestate[data-state="saved"]   { color: var(--v-ok); }
.v-savestate[data-state="pending"] { color: var(--v-warn); }
.v-savestate[data-state="error"]   { color: var(--v-bad); }
.v-savestate button { appearance: none; border: 0; background: none; padding: 0 2px; min-height: 24px; color: inherit; font: inherit; text-decoration: underline; cursor: pointer; }
.v-savestate:empty, .v-savestate[data-state=""] { display: none; }
@keyframes v-spin { to { transform: rotate(360deg); } }

/* 手指操作：分段选择里的每一格、整行可点的列表行也要 44 */
@media (pointer: coarse) {
  .v-seg > button, .v-seg > a { min-height: var(--v-ctl-touch); }
  a.v-row, button.v-row { min-height: var(--v-ctl-touch); }
}

/* ---- patterns.css ---- */
/* ==========================================================================
   第 4 层 · 业务模式：日期块、流程步骤、公告板、研究阅读（目录 / 正文 / 表格）、持仓三态、个股卡、
   AI 草稿、预审结果、时间线、上传区、全局检索、AI 路线、权限
   ========================================================================== */
/* 日期块：合规日历、请假 */
.v-date { width: 44px; height: 44px; flex: none; display: flex; flex-direction: column; align-items: center; justify-content: center; border-radius: 10px; background: var(--v-surface-2); box-shadow: inset 0 0 0 1px var(--v-hair); }
.v-date b { font: 600 16px/18px var(--v-mono); letter-spacing: 0; }
.v-date small { font: 400 11px/14px var(--v-sans); color: var(--v-ink-3); letter-spacing: 0; }
.v-date.is-bad  { background: color-mix(in srgb, var(--v-bad) 9%, var(--v-surface));  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--v-bad) 30%, transparent); }
.v-date.is-bad b { color: var(--v-bad); }
.v-date.is-warn { background: color-mix(in srgb, var(--v-warn) 10%, var(--v-surface)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--v-warn) 30%, transparent); }
.v-date.is-warn b { color: var(--v-warn); }
.v-date.is-ok { opacity: .6; }

/* 流程步骤：事故、报销、审批 */
.v-steps { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 0; margin: 0; padding: 12px 16px; list-style: none; }
.v-steps li { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--v-ink-3); }
.v-steps li + li::before { content: ""; width: 24px; height: 1px; margin: 0 10px; background: var(--v-hair-2); }
.v-steps li i { width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center; flex: none; font: 500 11px/1 var(--v-mono); font-style: normal; background: var(--v-surface-2); box-shadow: inset 0 0 0 1px var(--v-hair-2); }
.v-steps li.is-done { color: var(--v-ink-2); }
.v-steps li.is-done i { background: var(--v-ok); color: #fff; box-shadow: none; }
.v-steps li.is-now { color: var(--v-ink); font-weight: 600; }
.v-steps li.is-now i { background: var(--v-navy); color: #fff; box-shadow: none; }

/* 磁贴：知识库分类等入口 */
.v-tiles { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: var(--v-s3); }
@media (max-width: 760px) { .v-tiles { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (max-width: 440px) { .v-tiles { grid-template-columns: minmax(0,1fr); } }
.v-tile { color: inherit; text-decoration: none; display: flex; flex-direction: column; gap: 4px; padding: 14px; border-radius: var(--v-r-card); background: var(--v-surface); box-shadow: var(--v-card-sh); }
.v-tile:hover { box-shadow: var(--v-pop-sh); }
.v-tile > .v-ico { color: var(--v-accent); margin-bottom: 4px; }
.v-tile b { font-weight: 600; }
.v-tile small { font-size: 12px; line-height: 16px; color: var(--v-ink-3); }

/* 投票选项 */
.v-opt { display: grid; grid-template-columns: minmax(0,1fr) auto; align-items: baseline; gap: 4px 12px; padding: 10px 16px; border-top: 1px solid var(--v-hair); }
.v-opt .v-progress { grid-column: 1 / -1; margin: 0; }
.v-opt.is-mine b { color: var(--v-info); }
.v-opt b { font-weight: 500; }

/* 公告板：左边置顶一条，右边最新列表 */
.v-board { display: grid; grid-template-columns: minmax(0,3fr) minmax(0,2fr); border-top: 1px solid var(--v-hair); }
.v-board-lead { padding: 16px 20px 18px; display: flex; flex-direction: column; gap: 8px; }
.v-board-lead p { margin: 0; max-width: 62ch; font: 400 14px/24px var(--v-serif); letter-spacing: 0; color: var(--v-ink-2); }
.v-board-ack { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; margin-top: 4px; padding-top: 12px; border-top: 1px dashed var(--v-hair); }
.v-board-ack .v-progress { flex: 1 1 120px; margin: 0; max-width: 200px; }
.v-board-list { border-left: 1px solid var(--v-hair); }
.v-board-list .v-row:first-child { border-top: 0; }
.v-unread-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--v-info); flex: none; }

.v-empty { display: flex; flex-direction: column; align-items: center; gap: var(--v-s3); padding: 48px 24px; text-align: center; color: var(--v-ink-2); }
.v-empty .v-ico { width: 32px; height: 32px; color: var(--v-ink-deco); stroke-width: 1.5; }
.v-empty p { margin: 0; max-width: 44ch; }
/* ==========================================================================
   研究阅读
   ========================================================================== */
.v-reader { display: grid; grid-template-columns: 220px minmax(0,1fr); gap: var(--v-s6); align-items: start; }
.v-reader.no-toc { grid-template-columns: minmax(0,1fr); }
.v-toc { position: sticky; top: var(--v-s4); display: flex; flex-direction: column; gap: 2px; }
.v-toc-label { padding: 0 10px 6px; font: 500 12px/16px var(--v-sans); color: var(--v-ink-3); }
.v-toc a { display: flex; align-items: center; min-height: var(--v-ctl-sm); padding: 5px 10px; border-radius: 6px; font-size: 13px; line-height: 20px; color: var(--v-ink-2); }
.v-toc a:hover { background: var(--v-hover); color: var(--v-ink); }
.v-toc a.is-on, .v-toc a[aria-current] { background: var(--v-surface); color: var(--v-ink); font-weight: 600; box-shadow: var(--v-card-sh); }
.v-toc a.is-sub { padding-left: 22px; font-size: 12px; }

.v-prose { padding: 28px 40px 40px; }
.v-prose > :first-child { margin-top: 0; }
.v-prose h2 { margin: 28px 0 10px; font: 600 17px/24px var(--v-sans); letter-spacing: 0; padding-bottom: 6px; border-bottom: 1px solid var(--v-hair); }
.v-prose h3 { margin: 20px 0 8px; font: 600 15px/22px var(--v-sans); letter-spacing: 0; }
.v-prose p, .v-prose li { font: 400 16px/28px var(--v-serif); letter-spacing: 0; color: var(--v-ink); max-width: 68ch; }
.v-prose p { margin: 0 0 12px; }
.v-prose ul, .v-prose ol { margin: 0 0 12px; padding-left: 22px; }
.v-prose blockquote { margin: 0 0 16px; padding: 10px 14px; border-radius: 8px; background: var(--v-surface-2); box-shadow: inset 0 0 0 1px var(--v-hair); color: var(--v-ink-2); }
.v-prose blockquote p { margin: 0; font-size: 14px; line-height: 24px; color: var(--v-ink-2); }
.v-prose table { width: 100%; border-collapse: collapse; margin: 4px 0 16px; font-size: 13px; }
.v-scroll-x { max-width: 100%; overflow-x: auto; margin: 4px 0 16px; border-radius: 8px; box-shadow: inset 0 0 0 1px var(--v-hair); }
.v-scroll-x > table { margin: 0; min-width: min(560px, 100%); }
.v-scroll-x:focus-visible { box-shadow: var(--v-focus); }
@media (max-width: 860px) { .v-scroll-x > table { min-width: 560px; } }
.v-prose td.is-num { white-space: nowrap; }
.v-prose th { padding: 7px 12px; text-align: left; background: var(--v-surface-2); border-bottom: 1px solid var(--v-hair); font: 500 12px/16px var(--v-sans); color: var(--v-ink-2); }
.v-prose td { padding: 8px 12px; border-bottom: 1px solid var(--v-hair); font-family: var(--v-sans); }
.v-prose td.is-num, .v-prose th.is-num { text-align: right; font-family: var(--v-mono); }
.v-prose strong { font-weight: 600; }
.v-docmeta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; padding: 12px 16px; border-bottom: 1px solid var(--v-hair); background: var(--v-surface-2); font-size: 13px; color: var(--v-ink-2); }

/* 持仓三态 */
.v-tri { display: flex; flex-wrap: wrap; gap: 6px; }
.v-tick { display: inline-flex; align-items: center; gap: 6px; height: 24px; padding-inline: 8px; border-radius: 6px; background: var(--v-surface-2); box-shadow: inset 0 0 0 1px var(--v-hair); font-size: 12px; }
.v-tick .v-mono { color: var(--v-ink-3); font-size: 11px; }
.v-tick.is-bad  { background: color-mix(in srgb, var(--v-bad) 8%, var(--v-surface));  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--v-bad) 25%, transparent); }
.v-tick.is-warn { background: color-mix(in srgb, var(--v-warn) 9%, var(--v-surface)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--v-warn) 25%, transparent); }

/* 个股卡 */
.v-stocks { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(210px,100%),1fr)); gap: var(--v-s3); }
.v-stock { display: flex; flex-direction: column; gap: 4px; padding: 12px 14px; border-radius: var(--v-r-card); background: var(--v-surface); box-shadow: var(--v-card-sh); }
.v-stock:hover { box-shadow: var(--v-pop-sh); }
.v-stock b { font-weight: 600; line-height: 20px; }
.v-stock .v-mono { font-size: 12px; color: var(--v-ink-3); }
.v-stock small { font-size: 12px; color: var(--v-ink-3); }
.v-stock.is-unread b::after { content: ""; display: inline-block; width: 7px; height: 7px; margin-left: 6px; border-radius: 50%; background: var(--v-info); vertical-align: 2px; }
/* ==========================================================================
   记录与 AI：单据时间线、预审结果、上传区、AI 草稿、引用、命令面板
   ========================================================================== */
/* AI 草稿：来自模型、还没人确认的内容。左边一道信息色，和正式数据分开 */
.v-ai { border-radius: var(--v-r-card); background: color-mix(in srgb, var(--v-info) 5%, var(--v-surface)); box-shadow: inset 3px 0 0 var(--v-info), 0 0 0 1px color-mix(in srgb, var(--v-info) 18%, transparent); }
.v-ai-h { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; padding: 12px 16px 0 19px; }
.v-ai-tag { display: inline-flex; align-items: center; gap: 5px; height: 20px; padding-inline: 7px; border-radius: var(--v-r-badge); background: var(--v-info); color: #fff; font: 600 11px/16px var(--v-sans); }
.v-ai-tag .v-ico { width: 12px; height: 12px; stroke-width: 2; }
.v-ai-meta { font: 400 11px/16px var(--v-mono); color: var(--v-ink-3); }
.v-ai-b { padding: 10px 16px 14px 19px; }
.v-ai-b p { margin: 0 0 8px; line-height: 22px; }
.v-ai-f { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 10px 16px 12px 19px; border-top: 1px solid color-mix(in srgb, var(--v-info) 15%, transparent); }
.v-ai-f .v-help { margin-right: auto; }
.v-cite { display: inline-flex; align-items: center; height: 18px; padding-inline: 5px; margin-inline: 2px; border-radius: 5px; background: color-mix(in srgb, var(--v-info) 13%, var(--v-surface)); color: var(--v-info); font: 500 11px/16px var(--v-mono); vertical-align: 1px; }

/* 预审、对账：逐条规则，绿勾 / 黄叹号 / 红叉 */
.v-checks { list-style: none; margin: 0; padding: 0; }
.v-checks li { display: flex; gap: 10px; align-items: flex-start; padding: 9px 16px; border-top: 1px solid var(--v-hair); font-size: 13px; line-height: 20px; }
.v-checks li > i { flex: none; width: 18px; height: 18px; margin-top: 1px; border-radius: 50%; display: grid; place-items: center; font: 600 11px/1 var(--v-mono); font-style: normal; color: #fff; background: var(--v-ok); }
.v-checks li.is-warn > i { background: var(--v-warn); }
.v-checks li.is-bad > i { background: var(--v-bad); }
.v-checks li small { display: block; color: var(--v-ink-3); font-size: 12px; line-height: 16px; }

/* 时间线：一张单据发生过的每一件事，带哈希 */
.v-timeline { list-style: none; margin: 0; padding: 4px 16px 12px; }
.v-timeline li { position: relative; display: grid; grid-template-columns: 13px minmax(0,1fr) auto; gap: 0 12px; padding: 8px 0; }
.v-timeline li::before { content: ""; position: absolute; left: 6px; top: 24px; bottom: -6px; width: 1px; background: var(--v-hair-2); }
.v-timeline li:last-child::before { display: none; }
.v-timeline li > i { width: 13px; height: 13px; margin-top: 4px; border-radius: 50%; background: var(--v-surface); box-shadow: inset 0 0 0 2px var(--v-hair-2); }
.v-timeline li.is-ok > i { box-shadow: inset 0 0 0 2px var(--v-ok); }
.v-timeline li.is-warn > i { box-shadow: inset 0 0 0 2px var(--v-warn); }
.v-timeline li.is-ai > i { background: color-mix(in srgb, var(--v-info) 25%, var(--v-surface)); box-shadow: inset 0 0 0 2px var(--v-info); }
.v-timeline li.is-now > i { background: var(--v-navy); box-shadow: none; }
.v-timeline b { font-weight: 500; }
.v-timeline small { display: block; font: 400 12px/16px var(--v-sans); color: var(--v-ink-3); }
.v-timeline .v-hash { font: 400 11px/20px var(--v-mono); color: var(--v-ink-3); }

/* 上传区 */
.v-drop { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; padding: 20px 16px; border-radius: var(--v-r-card); border: 1.5px dashed var(--v-hair-2); background: var(--v-surface-2); text-align: center; color: var(--v-ink-2); font-size: 13px; line-height: 20px; }
.v-drop > .v-ico { width: 22px; height: 22px; color: var(--v-ink-deco); }
.v-drop.is-done { border-style: solid; border-color: color-mix(in srgb, var(--v-ok) 45%, transparent); background: color-mix(in srgb, var(--v-ok) 6%, var(--v-surface)); }

/* 全局检索 / 命令面板（Ctrl K） */
.v-topsearch { cursor: pointer; }
.v-palette-back[hidden] { display: none; }
.v-palette-back { position: fixed; inset: 0; z-index: 200; display: flex; justify-content: center; align-items: flex-start; padding: calc(10vh + env(safe-area-inset-top, 0px)) 16px 16px; background: color-mix(in srgb, #000 38%, transparent); }
.v-palette { width: min(640px, 100%); max-height: 72vh; display: flex; flex-direction: column; border-radius: 14px; background: var(--v-surface); box-shadow: var(--v-pop-sh); overflow: hidden; }
.v-palette-in { display: flex; align-items: center; gap: 10px; height: 52px; padding-inline: 16px; border-bottom: 1px solid var(--v-hair); color: var(--v-ink-3); }
.v-palette-in input { flex: 1; min-width: 0; border: 0; outline: none; background: none; font: 400 16px/24px var(--v-sans); color: var(--v-ink); }
.v-palette-list { overflow-y: auto; padding: 6px; }
.v-palette-grp { padding: 8px 10px 4px; font: 500 11px/16px var(--v-sans); color: var(--v-ink-3); }
.v-palette-item { display: flex; align-items: center; gap: 10px; width: 100%; min-height: var(--v-ctl); padding: 6px 10px; border: 0; border-radius: 8px; background: none; text-align: left; cursor: pointer; color: var(--v-ink); font: 400 14px/20px var(--v-sans); }
.v-palette-item > .v-ico { color: var(--v-ink-deco); }
.v-palette-item small { margin-left: auto; font: 400 11px/16px var(--v-mono); color: var(--v-ink-3); }
.v-palette-item.is-on { background: var(--v-hover); }
.v-palette-empty { padding: 24px 16px; text-align: center; color: var(--v-ink-3); }
.v-palette-f { display: flex; flex-wrap: wrap; gap: 6px 14px; padding: 8px 16px; border-top: 1px solid var(--v-hair); font: 400 11px/16px var(--v-sans); color: var(--v-ink-3); }
.v-palette-f kbd { font: 400 11px/16px var(--v-mono); border: 1px solid var(--v-hair-2); border-radius: 4px; padding: 0 4px; }

/* AI 路线：每个 AI 步骤旁边写明「谁的账户 · 哪个模型」，点开可换 */
.v-route { position: relative; display: inline-block; vertical-align: middle; }
.v-route > summary { list-style: none; display: inline-flex; align-items: center; gap: 6px; min-height: var(--v-ctl-sm); padding: 0 9px 0 4px; border-radius: var(--v-r-ctl); background: var(--v-surface); box-shadow: inset 0 0 0 1px var(--v-hair-2); font: 500 12px/16px var(--v-sans); color: var(--v-ink); cursor: pointer; white-space: nowrap; }
.v-route > summary::-webkit-details-marker { display: none; }
.v-route > summary::after { content: ""; width: 5px; height: 5px; margin-left: 2px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: translateY(-2px) rotate(45deg); opacity: .55; }
.v-route[open] > summary { box-shadow: var(--v-focus); }
.v-route-own { display: inline-flex; align-items: center; height: 20px; padding-inline: 6px; border-radius: 5px; font: 600 11px/16px var(--v-sans); background: color-mix(in srgb, var(--v-navy) 10%, var(--v-surface)); color: var(--v-navy); }
.v-route-own.is-mine { background: color-mix(in srgb, var(--v-accent) 12%, var(--v-surface)); color: color-mix(in srgb, var(--v-accent) 80%, var(--v-ink)); }
.v-route-menu { position: fixed; z-index: 150; width: min(360px, calc(100vw - 32px)); max-height: 60vh; overflow-y: auto; padding: 6px; border-radius: 12px; background: var(--v-surface); box-shadow: var(--v-pop-sh); }
.v-route-grp { padding: 8px 10px 4px; font: 500 11px/16px var(--v-sans); color: var(--v-ink-3); }
.v-route-opt { display: grid; grid-template-columns: 14px minmax(0,1fr); gap: 0 10px; width: 100%; min-height: var(--v-ctl); padding: 7px 10px; border: 0; border-radius: 8px; background: none; text-align: left; cursor: pointer; color: var(--v-ink); }
.v-route-opt:hover:not(:disabled) { background: var(--v-hover); }
.v-route-opt > i { grid-row: span 2; width: 14px; height: 14px; margin-top: 3px; border-radius: 50%; box-shadow: inset 0 0 0 1.5px var(--v-hair-2); }
.v-route-opt.is-on > i { box-shadow: inset 0 0 0 4px var(--v-navy); }
.v-route-opt b { font: 500 13px/20px var(--v-sans); }
.v-route-opt small { font: 400 11px/16px var(--v-sans); color: var(--v-ink-3); }
.v-route-opt:disabled { cursor: not-allowed; }
.v-route-opt:disabled b { color: var(--v-ink-3); }
.v-route-opt:disabled small { color: var(--v-bad); }
.v-route-foot { display: flex; align-items: center; min-height: var(--v-ctl-sm); margin-top: 4px; padding: 6px 10px; border-top: 1px solid var(--v-hair); font: 500 12px/16px var(--v-sans); color: var(--v-accent); }
.v-route-line { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: 12px; color: var(--v-ink-3); }

/* 权限：每项权限的级别与来源 */
.v-mini { min-height: var(--v-ctl-sm); padding: 0 26px 0 9px; border: 0; border-radius: var(--v-r-ctl); background: var(--v-surface); box-shadow: inset 0 0 0 1px var(--v-hair-2); font: 500 12px/16px var(--v-sans); color: var(--v-ink); }
.v-src { font: 400 11px/16px var(--v-sans); color: var(--v-ink-3); }
.v-src.is-own { color: var(--v-warn); font-weight: 500; }
.v-perm { display: grid; grid-template-columns: minmax(0,1fr) 108px minmax(0,1.3fr); align-items: center; gap: 4px 12px; padding: 8px 16px; border-top: 1px solid var(--v-hair); }
.v-perm.is-head { background: var(--v-surface-2); font: 600 12px/16px var(--v-sans); color: var(--v-ink-2); }
.v-perm.is-pending { background: color-mix(in srgb, var(--v-warn) 7%, var(--v-surface)); }
.v-roles { display: flex; flex-wrap: wrap; gap: 6px 14px; padding: 4px 16px 14px; }
.v-lvl { display: inline-grid; place-items: center; min-width: 22px; height: 20px; padding-inline: 4px; border-radius: 5px; font: 600 11px/1 var(--v-sans); }
.v-lvl.is-view { background: color-mix(in srgb, var(--v-ink) 8%, var(--v-surface)); color: var(--v-ink-2); }
.v-lvl.is-use { background: color-mix(in srgb, var(--v-info) 15%, var(--v-surface)); color: var(--v-info); }
.v-lvl.is-admin { background: var(--v-navy); color: #fff; }
.v-table td.is-c, .v-table th.is-c { text-align: center; }
@media (max-width: 700px) { .v-perm { grid-template-columns: minmax(0,1fr) 108px; } .v-perm .v-src { grid-column: 1 / -1; } }

/* 交易台分项树：基金 → 页签 → 操作 / 子页 / 列 → EOD 分节 */
.v-ptree { border-top: 1px solid var(--v-hair); }
.v-ptree > summary { list-style: none; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; min-height: var(--v-ctl); padding: 10px 16px; cursor: pointer; }
.v-ptree > summary::-webkit-details-marker { display: none; }
.v-ptree > summary::before { content: ""; width: 6px; height: 6px; border-right: 1.5px solid var(--v-ink-deco); border-bottom: 1.5px solid var(--v-ink-deco); transform: rotate(-45deg); transition: transform .15s; }
.v-ptree[open] > summary::before { transform: rotate(45deg); }
.v-ptree[open] > summary { background: var(--v-surface-2); }
.v-ptree-count { font: 400 11px/16px var(--v-mono); color: var(--v-ink-3); }
.v-ptab { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; padding: 8px 16px 8px 34px; border-top: 1px solid var(--v-hair); }
.v-ptab > .v-check { font-weight: 500; }
.v-ptab > .v-ptree-count { margin-left: auto; }
.v-pkids, .v-pcols { flex-basis: 100%; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(168px,100%),1fr)); gap: 4px 12px; padding: 2px 0 2px 24px; }
.v-pcols { grid-template-columns: repeat(auto-fill, minmax(min(112px,100%),1fr)); padding-top: 6px; }
.v-pitem { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 6px; font-size: 13px; }
.v-pitem.is-wide { grid-column: 1 / -1; }
.v-psub { display: inline-flex; flex-wrap: wrap; gap: 4px 14px; margin-left: 4px; padding-left: 12px; border-left: 1px solid var(--v-hair-2); }

/* ---- sites.css ---- */
/* ==========================================================================
   第 5 层 · 两站外壳与适配：顶栏 + 侧栏 + 主区；窄屏菜单抽屉；中英文
   研究站与 OA 用同一套外壳，差别只在导航内容（按权限与任务分组，由各站生成）。
   ========================================================================== */
.v-top {
  display: flex; align-items: center; gap: var(--v-s4);
  height: var(--v-top-h); padding-inline: var(--v-s4);
  background: var(--v-navy); color: #fff;
}
.v-brand { display: flex; align-items: center; gap: 10px; width: calc(var(--v-side-w) - var(--v-s4)); flex: none; }
.v-brand-mk {
  width: 28px; height: 28px; border-radius: 7px; display: grid; place-items: center;
  background: var(--v-accent); color: #fff;
  font: 600 11px/1 var(--v-mono);
}
.v-brand b { font: 600 14px/20px var(--v-sans); }
.v-brand small { display: block; font: 400 11px/14px var(--v-mono); color: rgba(255,255,255,.62); }
/* 顶栏搜索是一个按钮（打开全局检索），不是假输入框 */
.v-topsearch {
  appearance: none; border: 0; cursor: pointer; text-align: left; font: inherit;
  flex: 1; max-width: 520px; display: flex; align-items: center; gap: var(--v-s2);
  min-height: var(--v-ctl); padding-inline: 12px; border-radius: var(--v-r-ctl);
  background: rgba(255,255,255,.09); box-shadow: inset 0 0 0 1px rgba(255,255,255,.14);
  color: rgba(255,255,255,.72); font-size: 13px;
}
.v-topsearch:hover { background: rgba(255,255,255,.14); }
.v-topsearch:focus-visible { box-shadow: 0 0 0 2px #fff; }
.v-topsearch kbd { margin-left: auto; font: 400 11px/16px var(--v-mono); color: rgba(255,255,255,.62); border: 1px solid rgba(255,255,255,.24); border-radius: 4px; padding: 0 5px; }
.v-toptools { margin-left: auto; display: flex; align-items: center; gap: 12px; color: rgba(255,255,255,.8); }
.v-me { display: flex; align-items: center; gap: var(--v-s2); min-height: var(--v-ctl); padding: 3px 12px 3px 5px; border-radius: var(--v-r-ctl); background: rgba(255,255,255,.08); font-size: 13px; color: #fff; }
.v-me:focus-visible, .v-top a:focus-visible, .v-top button:focus-visible { box-shadow: 0 0 0 2px #fff; }
/* 窄屏的「菜单」按钮：桌面不显示 */
.v-navbtn { display: none; appearance: none; border: 0; cursor: pointer; align-items: center; justify-content: center; gap: 6px;
  min-width: var(--v-ctl-touch); min-height: var(--v-ctl-touch); padding-inline: 10px; border-radius: var(--v-r-ctl);
  background: rgba(255,255,255,.1); color: #fff; font: 500 13px/20px var(--v-sans); }
.v-navbtn .v-ico { width: 18px; height: 18px; }

.v-avatar {
  width: 28px; height: 28px; border-radius: 6px; display: grid; place-items: center; flex: none;
  background: color-mix(in srgb, var(--v-accent) 30%, var(--v-navy)); color: #fff; font: 500 12px/1 var(--v-sans);
}
.v-avatar.lg { width: 40px; height: 40px; border-radius: 10px; font-size: 16px; background: var(--v-navy); }

.v-shell { display: grid; grid-template-columns: var(--v-side-w) minmax(0,1fr); min-height: calc(100% - var(--v-top-h)); }
.v-side {
  background: var(--v-side); border-right: 1px solid var(--v-line);
  padding: var(--v-s3) 10px var(--v-s10); display: flex; flex-direction: column; gap: 14px;
}
.v-side-grp { display: flex; flex-direction: column; gap: 2px; }
.v-side-label { padding: 4px 10px; font: 500 12px/16px var(--v-sans); color: var(--v-ink-3); }
.v-side-item {
  display: flex; align-items: center; gap: 10px; width: 100%; min-height: var(--v-ctl); padding-inline: 10px;
  border: 0; border-radius: var(--v-r-ctl); background: none; text-align: left; cursor: pointer;
  font: 500 14px/20px var(--v-sans); color: var(--v-ink-2);
}
.v-side-item:hover { background: var(--v-hover); color: var(--v-ink); }
.v-side-item.is-on, .v-side-item[aria-current] { background: var(--v-surface); color: var(--v-ink); font-weight: 600; box-shadow: var(--v-card-sh); }
.v-side-item.is-on .v-ico, .v-side-item[aria-current] .v-ico { color: var(--v-accent); }
.v-side-count { margin-left: auto; font: 500 11px/16px var(--v-mono); padding: 0 6px; border-radius: var(--v-r-badge); background: color-mix(in srgb, var(--v-bad) 14%, var(--v-surface)); color: var(--v-bad); }
.v-navback, .v-navclose { display: none; }
.v-navbtn, .v-me { white-space: nowrap; }

.v-main { padding: var(--v-s6) var(--v-s8) 64px; min-width: 0; }
.v-page { max-width: var(--v-page-w); margin: 0 auto; display: flex; flex-direction: column; gap: var(--v-s4); }
.v-page.is-wide { max-width: var(--v-page-wide); }

/* ==========================================================================
   中英文：组件只有一套，语言差异只写在 :lang() 里
   页面根元素写 lang="zh-CN" 或 lang="en"；局部换语言的块自己带 lang。
   ========================================================================== */
.v-app[lang|="en"], .v-app [lang|="en"] {
  --v-serif: "IBM Plex Serif", Georgia, "Times New Roman", serif;
  letter-spacing: 0;               /* 拉丁字母自带字距，再加就散 */
}
.v-app[lang|="en"] { --v-side-w: 248px; }   /* 英文导航名更长 */
.v-small:lang(en), .v-table th:lang(en) { letter-spacing: 0; }
/* 分组标签：英文小号全大写；中文没有大小写，不变形 */
.v-side-label:lang(en), .v-toc-label:lang(en) { font-size: 11px; text-transform: uppercase; letter-spacing: .06em; }
/* 研究稿正文：中文两端对齐；英文左对齐、自动断词，行高收 2px */
.v-prose p:lang(zh), .v-prose li:lang(zh) { text-align: justify; }
.v-prose p:lang(en), .v-prose li:lang(en) { line-height: 26px; hyphens: auto; text-wrap: pretty; }

@media (max-width: 1000px) {
  .v-grid-2-1, .v-grid-1-1, .v-grid-1-2, .v-annotated, .v-board { grid-template-columns: minmax(0,1fr); }
  .v-board-list { border-left: 0; border-top: 1px solid var(--v-hair); }
  .v-reader { grid-template-columns: minmax(0,1fr); }
  .v-toc { position: static; flex-direction: row; flex-wrap: wrap; }
  .v-toc-label { width: 100%; }
}
/* 窄屏：导航收进「菜单」抽屉（分组标题照旧显示），不再是一条看不到尽头的横向滚动 */
@media (max-width: 860px) {
  .v-top { gap: var(--v-s2); padding-inline: 8px 12px; }
  .v-navbtn { display: inline-flex; }
  .v-shell { grid-template-columns: minmax(0,1fr); }
  .v-side {
    position: fixed; z-index: 130; top: 0; bottom: 0; left: 0;
    padding-top: calc(var(--v-s2) + env(safe-area-inset-top, 0px));
    width: min(320px, 86vw); overflow-y: auto; overscroll-behavior: contain;
    padding-bottom: calc(var(--v-s10) + env(safe-area-inset-bottom, 0px));
    border-right: 1px solid var(--v-line); box-shadow: var(--v-pop-sh);
    transform: translateX(-102%); visibility: hidden; transition: transform .18s ease, visibility 0s linear .18s;
  }
  .v-side.is-open { transform: none; visibility: visible; transition: transform .18s ease; }
  .v-side-item { min-height: var(--v-ctl-touch); }
  .v-navback { position: fixed; z-index: 125; inset: 0; background: color-mix(in srgb, #000 36%, transparent); }
  .v-navclose { display: flex; align-self: flex-end; align-items: center; gap: 6px; min-height: var(--v-ctl-touch); padding-inline: 12px;
    appearance: none; border: 0; border-radius: var(--v-r-ctl); background: var(--v-hover); color: var(--v-ink); font: 500 14px/20px var(--v-sans); cursor: pointer; }
  .v-navback.is-open { display: block; }
  .v-brand { width: auto; min-width: 0; }
  .v-brand small { display: none; }
  /* 搜索收成图标按钮，名字留给读屏 */
  .v-topsearch { flex: none; min-width: var(--v-ctl-touch); min-height: var(--v-ctl-touch); justify-content: center; padding: 0; }
  .v-topsearch > span, .v-topsearch kbd { display: none; }
  .v-main { padding: var(--v-s4) var(--v-s4) 48px; }
  .v-form { grid-template-columns: minmax(0,1fr); }
  .v-metrics > div + div { border-left: 0; border-top: 1px solid var(--v-hair); }
  .v-prose { padding: 20px 18px 28px; }
}
/* 很窄的手机：头像旁的名字只留给读屏，顶栏不换行 */
@media (max-width: 480px) {
  .v-me { font-size: 0; gap: 0; padding: 4px; }
  .v-me .v-avatar { font-size: 12px; }
  .v-brand > div { display: none; }            /* 品牌只留图标；页标题已说明在哪 */
  .v-navbtn { padding-inline: 0; }
  .v-navbtn > span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }  /* 「菜单」二字只给读屏 */
}