/* U-design · Lianghua Terminal. 语义类/组件结构沿用 U02。
   默认深色；宿主可在 html 设置 data-theme="light"，无需换组件。
   页面注册与生产入口接线见 U-design/design.md、wire-request.md。 */
:root {
  color-scheme: dark;
  --uf-bg: #0b1018;
  --uf-surface: #121b29;
  --uf-surface-hover: #1c2a3d;
  --uf-accent: #eec16b;
  --uf-ok: #65d49a;
  --uf-warn: #edbe68;
  --uf-err: #ff9393;
  --uf-info: #8ab9ff;
  --uf-muted: #a4b3c7;
  --uf-border: #64758b;
  --uf-text: #e8eef7;
  --uf-divider: #2c3b50;
  --uf-demo: #bfccde;
  --uf-paper: #b5a0f5;
  --uf-on-badge: #0b1018;
  --uf-radius-card: 12px;
  --uf-radius-button: 8px;
  --uf-radius-pill: 999px;
  --uf-unit: 4px;
  --uf-font-kpi: 32px;
  --uf-font-body: 14px;
  --uf-font-meta: 12px;
  --uf-font: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
  --uf-motion: 120ms;
  --uf-motion-modal: 160ms;
}
:root[data-theme="light"] {
  color-scheme: light;
  --uf-bg: #eef2f7;
  --uf-surface: #ffffff;
  --uf-surface-hover: #e1e8f2;
  --uf-accent: #805400;
  --uf-ok: #16603e;
  --uf-warn: #805400;
  --uf-err: #a02734;
  --uf-info: #245b9e;
  --uf-muted: #526177;
  --uf-border: #738299;
  --uf-text: #172438;
  --uf-divider: #c5cfdd;
  --uf-demo: #526177;
  --uf-paper: #6944a5;
  --uf-on-badge: #ffffff;
}
/* html/body 属性限定设计系统宿主；不污染尚未接线的旧业务页面。 */
html[data-ui="foundation"] { background: var(--uf-bg); }
html[data-ui="foundation"] body {
  margin: 0; color: var(--uf-text); background: var(--uf-bg);
  font: var(--uf-font-body)/1.6 var(--uf-font);
  font-variant-numeric: tabular-nums lining-nums;
  -webkit-font-smoothing: antialiased;
}
.uf-sidebar {
  box-sizing: border-box; flex: 0 0 auto;
  background: var(--uf-bg); color: var(--uf-text);
  border-right: 1px solid var(--uf-divider);
  padding: calc(var(--uf-unit) * 5) calc(var(--uf-unit) * 3);
  overflow-y: auto; font: var(--uf-font-body)/1.5 var(--uf-font);
}
.uf-sidebar--collapsed { display: none; }
.uf-brand {
  font-size: 15px; font-weight: 700; letter-spacing: .035em;
  margin-bottom: calc(var(--uf-unit) * 7); padding-inline: calc(var(--uf-unit) * 3);
}
.uf-nav-group { margin-bottom: calc(var(--uf-unit) * 5); }
.uf-nav-group-title {
  font-size: var(--uf-font-meta); color: var(--uf-muted);
  letter-spacing: .06em; text-transform: none;
  margin: calc(var(--uf-unit) * 3) calc(var(--uf-unit) * 3) calc(var(--uf-unit) * 2);
}
.uf-nav-item {
  display: flex; align-items: center; justify-content: space-between;
  gap: calc(var(--uf-unit) * 2); min-height: 40px; box-sizing: border-box;
  padding: calc(var(--uf-unit) * 2) calc(var(--uf-unit) * 3);
  border-radius: var(--uf-radius-button); color: var(--uf-text); text-decoration: none;
  transition: background var(--uf-motion) ease-out, box-shadow var(--uf-motion) ease-out;
}
.uf-nav-item:hover { background: var(--uf-surface-hover); }
.uf-nav-item--active {
  background: var(--uf-surface-hover); box-shadow: inset 3px 0 0 var(--uf-accent);
  font-weight: 600;
}
.uf-nav-item .badge { font-size: 10px; padding-inline: 6px; line-height: 16px; }
.uf-topbar {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 0 calc(var(--uf-unit) * 5); border-bottom: 1px solid var(--uf-divider);
  color: var(--uf-text); background: var(--uf-bg); box-sizing: border-box;
  font: var(--uf-font-body)/1.5 var(--uf-font);
}
.uf-title { font-weight: 650; letter-spacing: .015em; min-width: 0; overflow-wrap: anywhere; }
.uf-badges { display: flex; gap: calc(var(--uf-unit) * 2); flex-wrap: wrap; align-items: center; }
.uf-panel, .uf-card {
  background: var(--uf-surface); color: var(--uf-text);
  border: 1px solid var(--uf-divider); border-radius: var(--uf-radius-card);
  padding: calc(var(--uf-unit) * 5); box-sizing: border-box;
  font: var(--uf-font-body)/1.6 var(--uf-font);
  font-variant-numeric: tabular-nums lining-nums;
}
.uf-state-panel { display: flex; align-items: center; gap: calc(var(--uf-unit) * 3); flex-wrap: wrap; }
.uf-state-count { color: var(--uf-muted); font-size: var(--uf-font-meta); margin-left: auto; }
.uf-field { display: flex; flex-direction: column; gap: calc(var(--uf-unit) * 2); margin-bottom: calc(var(--uf-unit) * 4); }
.uf-field-label { font-size: var(--uf-font-meta); color: var(--uf-muted); font-weight: 600; }
.uf-input {
  box-sizing: border-box; width: 100%; min-width: 0; min-height: 40px;
  background: var(--uf-bg); border: 1px solid var(--uf-border);
  border-radius: var(--uf-radius-button); padding: calc(var(--uf-unit) * 2) calc(var(--uf-unit) * 3);
  color: var(--uf-text); font: inherit; font-variant-numeric: tabular-nums;
  transition: border-color var(--uf-motion) ease-out;
}
.uf-input::placeholder { color: var(--uf-muted); opacity: 1; }
.uf-input:hover:not(:disabled) { border-color: var(--uf-accent); }
.uf-field--invalid .uf-input { border-color: var(--uf-err); }
.uf-field-error { color: var(--uf-err); font-size: var(--uf-font-meta); }
.uf-modal-backdrop {
  position: fixed; inset: 0; z-index: 100; background: rgb(2 6 12 / 78%);
  display: flex; align-items: center; justify-content: center; padding: 16px; box-sizing: border-box;
}
.uf-modal {
  background: var(--uf-surface); color: var(--uf-text);
  border: 1px solid var(--uf-border); border-radius: var(--uf-radius-card);
  padding: calc(var(--uf-unit) * 6); min-width: 0; width: min(440px, 100%);
  box-sizing: border-box; box-shadow: 0 24px 80px rgb(0 0 0 / 38%);
  font: var(--uf-font-body)/1.6 var(--uf-font);
}
.uf-modal--danger { border-top: 3px solid var(--uf-err); }
.uf-modal-actions { display: flex; justify-content: flex-end; gap: calc(var(--uf-unit) * 3); margin-top: 24px; flex-wrap: wrap; }
.uf-btn {
  border: 1px solid var(--uf-border); border-radius: var(--uf-radius-button);
  background: var(--uf-surface); color: var(--uf-text);
  padding: calc(var(--uf-unit) * 2) calc(var(--uf-unit) * 4); min-height: 40px;
  cursor: pointer; font: inherit; font-weight: 550;
  transition: background var(--uf-motion) ease-out, border-color var(--uf-motion) ease-out;
}
.uf-btn:hover:not(:disabled) { background: var(--uf-surface-hover); border-color: var(--uf-accent); }
.uf-btn-primary { border-color: var(--uf-accent); background: var(--uf-accent); color: var(--uf-on-badge); }
.uf-btn-primary:hover:not(:disabled) { background: var(--uf-accent); }
.uf-btn-danger { border-color: var(--uf-err); color: var(--uf-err); }
.uf-btn:disabled, .uf-input:disabled, .uf-btn[aria-disabled="true"] { opacity: .65; cursor: not-allowed; }
/* 加载采用静态状态字与 aria-busy；不靠无限旋转/闪烁制造进度。 */
.uf-btn[aria-busy="true"] { cursor: progress; border-style: dashed; }
.uf-nav-item:focus-visible, .uf-btn:focus-visible, .uf-input:focus-visible {
  outline: 2px solid var(--uf-accent); outline-offset: 3px;
}
.badge {
  display: inline-flex; align-items: center; white-space: normal; overflow-wrap: anywhere;
  padding: 2px calc(var(--uf-unit) * 2); border-radius: var(--uf-radius-pill);
  font: 600 var(--uf-font-meta)/20px var(--uf-font); border: 1px solid transparent;
}
.badge.b-available, .badge.b-live { color: var(--uf-on-badge); background: var(--uf-ok); }
.badge.b-process { color: var(--uf-on-badge); background: var(--uf-info); }
/* paper 专用紫色、demo 中性、live 绿色(仅已有业务 available/live)。
   env/mode live 仍由 U02 返回 b-unknown 红色「未启用」，样式不能开权。 */
.badge.b-paper { color: var(--uf-on-badge); background: var(--uf-paper); border-radius: var(--uf-radius-button); }
.badge.b-demo, .badge.b-disabled { color: var(--uf-on-badge); background: var(--uf-demo); }
.badge.b-shadow, .badge.b-degraded { color: var(--uf-on-badge); background: var(--uf-warn); }
.badge.b-unavailable, .badge.b-unknown { color: var(--uf-on-badge); background: var(--uf-err); }
.uf-topbar .badge.b-demo { border: 1px dashed var(--uf-text); }
.uf-topbar .badge.b-paper { border: 1px solid var(--uf-text); }
.uf-topbar .badge.b-unknown { border: 2px solid var(--uf-err); box-shadow: 0 0 0 2px var(--uf-bg), 0 0 0 3px var(--uf-err); }
@media (max-width: 639px) {
  .uf-topbar { align-items: flex-start; flex-direction: column; justify-content: center; gap: 6px; padding: 12px; height: auto !important; min-height: 76px; }
  .uf-panel, .uf-card { padding: 16px; }
  .uf-badges { gap: 6px; }
}
@media (prefers-reduced-motion: reduce) {
  :root { --uf-motion: 0ms; --uf-motion-modal: 0ms; }
  .uf-nav-item, .uf-btn, .uf-input, .uf-modal { transition: none; animation: none; scroll-behavior: auto; }
}
@media (forced-colors: active) {
  .uf-nav-item--active { outline: 2px solid Highlight; }
  .badge { border-color: CanvasText; }
  .uf-btn:focus-visible, .uf-input:focus-visible, .uf-nav-item:focus-visible { outline-color: Highlight; }
}
/* ── D2 试点视图所需的基础件（只消费上面已声明的 --uf-* 令牌，不新增令牌）── */
.uf-stack { display: flex; flex-direction: column; gap: calc(var(--uf-unit) * 5); }
.uf-section-title { margin: 0 0 calc(var(--uf-unit) * 4); font-size: 15px; font-weight: 650; letter-spacing: .015em; }
.uf-note, .uf-disclosure { margin: 0; color: var(--uf-muted); font-size: var(--uf-font-meta); }
.uf-disclosure {
  border: 1px dashed var(--uf-border); border-radius: var(--uf-radius-button);
  padding: calc(var(--uf-unit) * 3) calc(var(--uf-unit) * 4); background: var(--uf-surface);
}
/* 语义数字色：只把已有的状态色复用到数字上做强调，文字判据始终并存。 */
.uf-tone-ok { color: var(--uf-ok); }
.uf-tone-warn { color: var(--uf-warn); }
.uf-tone-demo { color: var(--uf-demo); }
.uf-tone-err { color: var(--uf-err); }
.uf-tone-muted { color: var(--uf-muted); }
/* 折叠区：技术信息默认收起；展开后标题与正文之间留出节奏。 */
.uf-details {
  background: var(--uf-surface); color: var(--uf-text);
  border: 1px solid var(--uf-divider); border-radius: var(--uf-radius-card);
  padding: calc(var(--uf-unit) * 4);
}
.uf-details > summary { cursor: pointer; font-weight: 600; color: var(--uf-muted); }
.uf-details > summary:hover { color: var(--uf-text); }
.uf-details > summary:focus-visible { outline: 2px solid var(--uf-accent); outline-offset: 3px; }
.uf-details[open] > summary { color: var(--uf-text); margin-bottom: calc(var(--uf-unit) * 4); }

.uf-actions { display: flex; gap: calc(var(--uf-unit) * 3); flex-wrap: wrap; margin-top: calc(var(--uf-unit) * 4); }
.uf-facts {
  margin: 0; display: grid; grid-template-columns: auto 1fr;
  gap: calc(var(--uf-unit) * 2) calc(var(--uf-unit) * 3); align-items: baseline;
}
.uf-facts dt { color: var(--uf-muted); font-size: var(--uf-font-meta); font-weight: 600; }
.uf-facts dd { margin: 0; min-width: 0; overflow-wrap: anywhere; }
.uf-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.uf-row {
  display: flex; flex-wrap: wrap; align-items: center; gap: calc(var(--uf-unit) * 3);
  padding: calc(var(--uf-unit) * 3) 0; border-top: 1px solid var(--uf-divider);
}
.uf-row:first-child { border-top: 0; }
.uf-row-main { display: flex; align-items: center; gap: calc(var(--uf-unit) * 3); min-width: 0; flex: 1 1 260px; flex-wrap: wrap; }
.uf-row-kind {
  flex: 0 0 auto; color: var(--uf-muted); font-size: var(--uf-font-meta);
  border: 1px solid var(--uf-divider); border-radius: var(--uf-radius-button);
  padding: 0 calc(var(--uf-unit) * 2);
}
.uf-row-title { font-weight: 600; overflow-wrap: anywhere; }
.uf-row-ref { color: var(--uf-muted); font-size: var(--uf-font-meta); overflow-wrap: anywhere; }
.uf-row-value {
  font-weight: 650; font-variant-numeric: tabular-nums lining-nums;
  margin-left: auto; overflow-wrap: anywhere;
}
.uf-row-note { flex: 1 1 100%; margin: 0; color: var(--uf-muted); font-size: var(--uf-font-meta); }
.uf-group-title {
  margin: 0; display: flex; align-items: center; gap: calc(var(--uf-unit) * 3);
  font-size: var(--uf-font-meta); font-weight: 650; color: var(--uf-muted);
  text-transform: none; letter-spacing: .02em;
}
.uf-group-title::after { content: ""; flex: 1 1 auto; height: 1px; background: var(--uf-divider); }
/* 共享标签页：全组只有一个 tabindex="0"；选中态用 accent 下划线，不靠颜色单独表意。 */
.uf-tabs { display: flex; flex-direction: column; }
.uf-tablist { display: flex; flex-wrap: wrap; gap: calc(var(--uf-unit) * 2); border-bottom: 1px solid var(--uf-divider); }
.uf-tab {
  appearance: none; border: 0; background: none; cursor: pointer;
  color: var(--uf-muted); font: inherit; font-weight: 550;
  padding: calc(var(--uf-unit) * 2) calc(var(--uf-unit) * 3);
  border-bottom: 2px solid transparent; border-radius: var(--uf-radius-button) var(--uf-radius-button) 0 0;
  transition: color var(--uf-motion) ease-out, border-color var(--uf-motion) ease-out;
}
.uf-tab:hover { color: var(--uf-text); background: var(--uf-surface-hover); }
.uf-tab--active { color: var(--uf-text); border-bottom-color: var(--uf-accent); font-weight: 650; }
.uf-tab:focus-visible { outline: 2px solid var(--uf-accent); outline-offset: 2px; }
.uf-tabpanel { padding-top: calc(var(--uf-unit) * 4); }
.uf-tabpanel:focus-visible { outline: 2px solid var(--uf-accent); outline-offset: 3px; }
/* 行内占比条：轨道恒有底衬，避免 0% 与「未计算」看起来一样。 */
.uf-ratio { display: flex; align-items: center; gap: calc(var(--uf-unit) * 3); padding: calc(var(--uf-unit) * 2) 0; flex-wrap: wrap; }
.uf-ratio-label { flex: 1 1 140px; min-width: 0; overflow-wrap: anywhere; }
.uf-ratio-track { flex: 2 1 200px; height: 8px; background: var(--uf-divider); border-radius: var(--uf-radius-pill); overflow: hidden; }
.uf-ratio-fill { display: block; height: 100%; background: var(--uf-accent); }
.uf-ratio-value { flex: 0 0 auto; color: var(--uf-muted); font-size: var(--uf-font-meta); }
/* 价格路径：原生 SVG，不引图表库。描边不随容器缩放变粗细。 */
.uf-chart { margin: 0; display: flex; flex-direction: column; gap: calc(var(--uf-unit) * 2); }
.uf-chart-svg { display: block; width: 100%; height: auto; background: var(--uf-bg); border: 1px solid var(--uf-divider); border-radius: var(--uf-radius-button); }
.uf-chart-line { stroke: var(--uf-accent); stroke-width: 1.6; stroke-linejoin: round; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.uf-chart-marker { fill: var(--uf-surface); stroke: var(--uf-accent); stroke-width: 2; vector-effect: non-scaling-stroke; }
.uf-chart-caption { color: var(--uf-muted); font-size: var(--uf-font-meta); }
.uf-chart-empty { margin: 0; color: var(--uf-muted); font-size: var(--uf-font-meta); }
@media (prefers-reduced-motion: reduce) {
  .uf-tab { transition: none; }
}
@media (forced-colors: active) {
  .uf-tab--active { border-bottom-color: Highlight; outline: 2px solid Highlight; }
  .uf-chart-line { stroke: CanvasText; }
  .uf-chart-marker { stroke: Highlight; }
  .uf-ratio-track { border: 1px solid CanvasText; }
  .uf-ratio-fill { background: Highlight; }
}