/* CMOC L2 PBI报表开发平台 · 报表页 / 语义模型 / 指标映射工作台 */
:root {
  --sidebar: #2A1B52;
  --sidebar-2: #1B1038;
  --sidebar-text: #CBC5E3;
  --sidebar-muted: #8C82B0;
  --sidebar-line: rgba(255, 255, 255, .10);
  --bg: #F7F6FB;
  --surface: #FFFFFF;
  --primary: #4C3B8C;
  --primary-dark: #372770;
  --primary-soft: #EFEDF8;
  --ink: #1F1B2E;
  --muted: #6B6778;
  --line: #E5E1EF;
  --line-soft: #F0EDF7;
  --accent: #8D6A44;
  --good: #5B8C3A;
  --bad: #B42318;
  --warn: #9A6A1F;
  --radius: 10px;
  --shadow: 0 1px 2px rgba(42, 27, 82, .06), 0 10px 28px rgba(42, 27, 82, .08);
  --font: "Source Han Sans CN", "思源黑体", "Noto Sans SC", "Microsoft YaHei", "微软雅黑", "PingFang SC", sans-serif;
  --mono: ui-monospace, "Cascadia Mono", Consolas, "Courier New", monospace;
  --sidebar-w: 250px;
  --topbar-h: 54px;
  --detail-bar-h: 52px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0; background: var(--bg); color: var(--ink);
  font-family: var(--font); font-size: 13.5px; line-height: 1.6;
  font-variant-numeric: tabular-nums; -webkit-font-smoothing: antialiased;
}
a { color: inherit; text-decoration: none; }
button { font: inherit; }
h1, h2, h3, h4, p, ul { margin: 0; }
ul { padding: 0; list-style: none; }
kbd { font-family: var(--mono); font-size: 10px; border: 1px solid currentColor; border-radius: 3px; padding: 0 4px; opacity: .7; }

/* ---------- 外壳 ---------- */
.shell { display: flex; min-height: 100vh; }
.sidebar {
  position: fixed; inset: 0 auto 0 0; z-index: 50;
  display: flex; flex-direction: column; width: var(--sidebar-w);
  background: linear-gradient(180deg, var(--sidebar), var(--sidebar-2));
  color: var(--sidebar-text); border-right: 1px solid rgba(255, 255, 255, .04);
}
.workspace { display: flex; flex-direction: column; flex: 1; min-width: 0; margin-left: var(--sidebar-w); min-height: 100vh; }

.sb-brand { display: flex; align-items: center; gap: 11px; height: 64px; padding: 0 18px; flex: 0 0 auto; border-bottom: 1px solid var(--sidebar-line); }
.sb-mark { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 8px; background: var(--primary); color: #fff; font-size: 14px; font-weight: 800; letter-spacing: .5px; }
.sb-brand-text strong { display: block; font-size: 14.5px; color: #fff; letter-spacing: .5px; line-height: 1.25; }
.sb-brand-text small { display: block; font-size: 10px; color: var(--sidebar-muted); letter-spacing: .4px; }
.sb-nav { flex: 1; overflow-y: auto; padding: 10px 10px 18px; }
.sb-nav::-webkit-scrollbar { width: 6px; }
.sb-nav::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, .12); border-radius: 3px; }

.sb-item { display: flex; align-items: center; gap: 9px; padding: 9px 12px; border-radius: 7px; color: var(--sidebar-text); font-size: 12.5px; transition: background .16s, color .16s; }
.sb-item:hover { background: rgba(255, 255, 255, .06); color: #fff; }
.sb-item.active { background: rgba(15, 108, 189, .22); color: #fff; box-shadow: inset 3px 0 0 #4FA3E8; }
.sb-label { padding: 12px 12px 4px; font-size: 9.5px; letter-spacing: 1.4px; font-weight: 700; color: #526C85; text-transform: uppercase; }
.sb-divider { height: 1px; margin: 12px 10px; background: var(--sidebar-line); }

.sb-group { margin-top: 1px; }
.sb-group-row { display: flex; align-items: center; border-radius: 7px; }
.sb-group-row:hover, .sb-group.open .sb-group-row { background: rgba(255, 255, 255, .05); }
.sb-group-head { display: flex; align-items: center; gap: 8px; flex: 1; min-width: 0; padding: 9px 12px; color: var(--sidebar-text); font-size: 12.5px; }
.sb-group-head:hover { color: #fff; }
.sb-group-head.active { color: #fff; font-weight: 600; }
.sb-group-head.active .sb-name { color: #fff; }
.sb-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sb-count { font-size: 10px; color: var(--sidebar-muted); background: rgba(255, 255, 255, .07); border-radius: 9px; padding: 0 6px; }
.sb-chev { width: 30px; height: 34px; flex: 0 0 auto; border: 0; background: transparent; color: var(--sidebar-muted); font-size: 15px; line-height: 1; cursor: pointer; border-radius: 5px; transition: transform .18s, color .18s; }
.sb-chev:hover { color: #fff; background: rgba(255, 255, 255, .08); }
.sb-group.open .sb-chev { transform: rotate(90deg); color: #9ED0FF; }
.sb-sub { display: none; padding: 2px 0 6px; }
.sb-group.open .sb-sub { display: block; }
.sb-sub-item { display: block; margin-left: 14px; padding: 6px 10px 6px 12px; border-left: 2px solid transparent; border-radius: 0 5px 5px 0; font-size: 11.5px; color: #8FA8BF; transition: background .16s, color .16s, border-color .16s; }
.sb-sub-item:hover { color: #fff; background: rgba(255, 255, 255, .04); }
.sb-sub-item.active { color: #fff; border-left-color: #4FA3E8; background: rgba(15, 108, 189, .14); }
.sb-foot { flex: 0 0 auto; display: flex; flex-direction: column; gap: 2px; padding: 13px 18px; border-top: 1px solid var(--sidebar-line); font-size: 10px; color: var(--sidebar-muted); }
.sb-foot-note { color: #526C85; }
.sb-user { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 9px; padding-top: 9px; border-top: 1px solid var(--sidebar-line); }
.sb-user-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--sidebar-text); font-size: 10.5px; }
.sb-logout { flex: 0 0 auto; border: 1px solid rgba(255, 255, 255, .16); background: transparent; color: var(--sidebar-text); font-size: 10px; padding: 3px 8px; border-radius: 5px; cursor: pointer; }
.sb-logout:hover { background: rgba(255, 255, 255, .08); color: #fff; }
.sb-user-links { display: flex; gap: 6px; width: 100%; margin-top: 6px; }
.sb-user-link { flex: 1; text-align: center; border: 1px solid rgba(255, 255, 255, .16); background: transparent; color: var(--sidebar-text); font-size: 10px; padding: 3px 6px; border-radius: 5px; text-decoration: none; }
.sb-user-link:hover { background: rgba(255, 255, 255, .08); color: #fff; }
.sb-user-links[hidden], .sb-user-link[hidden] { display: none; }

/* ---------- 顶栏 ---------- */
.topbar { position: sticky; top: 0; z-index: 40; display: flex; align-items: center; gap: 14px; height: var(--topbar-h); padding: 0 24px; background: rgba(255, 255, 255, .94); backdrop-filter: blur(10px); border-bottom: 1px solid var(--line); }
.topbar-crumb { display: flex; align-items: center; gap: 7px; min-width: 0; font-size: 12.5px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.topbar-crumb a:hover { color: var(--primary); }
.topbar-crumb .crumb-sep { color: #B9C4D0; }
.topbar-crumb b { color: var(--ink); font-weight: 600; }
.icon-btn { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border: 1px solid transparent; border-radius: 7px; background: transparent; color: var(--ink); cursor: pointer; font-size: 15px; }
.icon-btn:hover { background: #F0F4F9; border-color: var(--line); }
.menu-btn { display: none; }

.search { position: relative; width: 320px; flex: 0 1 320px; margin-left: auto; }
.search input { width: 100%; height: 34px; border: 1px solid var(--line); border-radius: 7px; background: #fff; color: var(--ink); padding: 0 34px 0 32px; font-size: 12.5px; outline: none; transition: border-color .16s, box-shadow .16s; }
.search input::placeholder { color: #9AA8B6; }
.search input:focus { border-color: #9DC4E8; box-shadow: 0 0 0 3px rgba(15, 108, 189, .10); }
.search-icon { position: absolute; left: 11px; top: 50%; transform: translateY(-50%); color: #8FA0B2; font-size: 13px; pointer-events: none; }
.search kbd { position: absolute; right: 9px; top: 50%; transform: translateY(-50%); color: #9AA8B6; }
.search-results { position: absolute; top: 40px; left: 0; right: 0; display: none; background: #fff; border: 1px solid var(--line); border-radius: 9px; box-shadow: 0 18px 40px rgba(10, 30, 60, .18); overflow: hidden; z-index: 80; }
.search-results.open { display: block; }
.sr-item { display: flex; align-items: center; gap: 9px; width: 100%; padding: 9px 12px; border: 0; border-bottom: 1px solid var(--line-soft); background: #fff; text-align: left; cursor: pointer; }
.sr-item:last-child { border-bottom: 0; }
.sr-item:hover, .sr-item:focus { background: #F2F7FC; outline: none; }
.sr-item .sr-name { font-size: 12.5px; font-weight: 600; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sr-item .sr-kind { margin-left: auto; flex: 0 0 auto; font-size: 10px; color: var(--muted); background: #F3F6FA; border-radius: 3px; padding: 0 5px; }
.sr-empty { padding: 12px; font-size: 12px; color: var(--muted); }

/* ---------- 通用 ---------- */
main { flex: 1; width: 100%; max-width: 1600px; margin: 0 auto; padding: 24px 28px 56px; }
.page-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; flex-wrap: wrap; }
.page-kicker { font-size: 10.5px; letter-spacing: 2px; font-weight: 700; color: var(--primary); }
.page-head h1 { font-size: 26px; letter-spacing: .4px; margin: 6px 0 5px; }
.page-head p { max-width: 820px; color: var(--muted); font-size: 12.5px; }
.head-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.section { margin-top: 28px; }
#model-measures { scroll-margin-top: 92px; }
.section-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 14px; margin-bottom: 12px; }
.section-head h2 { font-size: 16px; letter-spacing: .3px; }
.section-head p { margin-top: 2px; color: var(--muted); font-size: 11.5px; }
.section-link { font-size: 12px; color: var(--primary); font-weight: 600; }
.section-link:hover { text-decoration: underline; }

.btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 34px; padding: 0 13px; border: 1px solid var(--line); border-radius: 7px; background: #fff; color: var(--ink); font-size: 12.5px; cursor: pointer; transition: border-color .16s, background .16s, color .16s; white-space: nowrap; }
.btn:hover { border-color: #9DC4E8; color: var(--primary); }
.btn.primary { background: var(--primary); border-color: var(--primary); color: #fff; }
.btn.primary:hover { background: var(--primary-dark); border-color: var(--primary-dark); color: #fff; }
.btn.small { height: 28px; padding: 0 10px; font-size: 11.5px; }
.icon-btn:focus-visible, .btn:focus-visible, .seg button:focus-visible, .sb-chev:focus-visible, summary:focus-visible { outline: 2px solid #7FB4E4; outline-offset: 1px; }

.code { display: inline-block; font-family: var(--mono); font-size: 10.5px; font-weight: 700; letter-spacing: .2px; color: var(--primary); background: var(--primary-soft); border-radius: 4px; padding: 1px 7px; white-space: nowrap; }
.chips { display: flex; flex-wrap: wrap; gap: 5px; align-items: center; }
.chip { font-size: 10px; color: #41566B; background: #F3F6FA; border: 1px solid #E3EAF2; border-radius: 4px; padding: 1px 6px; }
.chip.src { background: #EEF7EF; border-color: #CFE5D2; color: #1F6E3A; }
.badges { display: flex; gap: 4px; flex-wrap: wrap; }
.badge { font-size: 9px; font-weight: 700; letter-spacing: .3px; padding: 1px 5px; border-radius: 3px; }
.badge.html { background: #E8F1FA; color: #0F6CBD; }
.badge.pbip { background: #E6F6EE; color: #047857; }
.badge.muted { background: #F3F6FA; color: #5F6B6D; }

.status-dot { display: inline-flex; align-items: center; gap: 5px; max-width: 100%; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: 10.5px; color: var(--muted); }
.status-dot::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: #94A3B8; flex: 0 0 auto; }
.status-dot.st-real::before { background: var(--good); }
.status-dot.st-empty::before { background: #94A3B8; }
.hint { margin-top: 14px; padding: 9px 13px; font-size: 11.5px; color: #7A5C00; background: #FFF8EC; border: 1px solid #F0DFC0; border-radius: 8px; }
.protocol-hint { padding: 8px 24px; font-size: 11.5px; color: #7A5C00; background: #FFF8EC; border-bottom: 1px solid #F0DFC0; }
.protocol-hint[hidden] { display: none; }
.empty-state { padding: 60px 20px; text-align: center; color: var(--muted); }
.empty-state a { color: var(--primary); font-weight: 600; }

/* ---------- 首页 ---------- */
.hero-report { position: relative; display: flex; align-items: flex-end; min-height: 264px; margin-top: 18px; border-radius: 14px; overflow: hidden; background: #0B1F33; box-shadow: var(--shadow); }
.hero-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center top; filter: blur(1px) saturate(.85); transform: scale(1.02); }
.hero-overlay { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(8, 26, 45, .97) 0%, rgba(8, 26, 45, .90) 46%, rgba(8, 26, 45, .60) 100%); }
.hero-inner { position: relative; z-index: 1; max-width: 760px; padding: 28px 30px; color: #fff; }
.hero-inner .page-kicker { color: #9ED0FF; }
.hero-inner h1 { font-size: 34px; letter-spacing: .5px; margin: 8px 0 6px; }
.hero-inner p { font-size: 12.5px; color: #CFE2F5; }
.hero-actions { display: flex; gap: 8px; margin-top: 16px; flex-wrap: wrap; }
.hero-actions .btn { background: rgba(255, 255, 255, .10); border-color: rgba(255, 255, 255, .26); color: #fff; }
.hero-actions .btn:hover { background: rgba(255, 255, 255, .18); color: #fff; }
.hero-actions .btn.primary { background: var(--primary); border-color: var(--primary); }
.hero-meta { position: relative; z-index: 1; margin-left: auto; padding: 0 30px 26px; color: #A9C9E8; font-size: 11px; text-align: right; line-height: 1.9; }

.kpi-strip { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-top: 18px; }
.kpi-card { display: flex; align-items: baseline; gap: 9px; padding: 14px 16px; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); }
.kpi-card b { font-size: 26px; line-height: 1; letter-spacing: .3px; }
.kpi-card span { font-size: 11.5px; color: var(--muted); }
.kpi-card small { margin-left: auto; font-size: 10px; color: #9AA8B6; }

.group-block { margin-top: 18px; }
.group-block h3 { display: flex; align-items: baseline; gap: 8px; font-size: 13px; margin-bottom: 10px; }
.group-block h3 span { font-size: 10.5px; color: var(--muted); font-weight: 400; }
.report-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.report-card { display: flex; flex-direction: column; overflow: hidden; background: #fff; border: 1px solid var(--line); border-radius: 11px; transition: transform .18s, box-shadow .18s, border-color .18s; }
.report-card:hover { transform: translateY(-2px); box-shadow: var(--shadow); border-color: #9DC4E8; }
.rc-thumb { position: relative; aspect-ratio: 16 / 9; overflow: hidden; background: #EEF2F7; border-bottom: 1px solid var(--line-soft); }
.rc-thumb img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top center; }
.rc-badge { position: absolute; right: 8px; bottom: 8px; padding: 1px 6px; font-size: 9.5px; color: #fff; background: rgba(11, 31, 51, .78); border-radius: 4px; }
.rc-badge.svc { left: 8px; right: auto; background: rgba(15, 108, 189, .92); }
.rc-badge.pbip { left: 8px; right: auto; background: rgba(95, 107, 109, .85); }

/* 有在线报表的页面：不再截图，用在线入口卡代替缩略图 */
.rc-thumb.is-online {
  position: relative;
  background: radial-gradient(120% 150% at 18% 0%, #5B4A9E 0%, #3A2A70 48%, #241A45 100%);
}
.rc-thumb.is-online::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image:
    linear-gradient(rgba(255, 255, 255, .055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, .055) 1px, transparent 1px);
  background-size: 26px 26px;
}
.rc-online {
  position: relative; z-index: 1; height: 100%; padding: 8px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px;
  color: #fff; text-align: center;
}
.rc-online-icon {
  width: 34px; height: 34px; margin-bottom: 1px;
  display: grid; place-items: center; border-radius: 50%;
  font-size: 13px; line-height: 1; color: #B9E28C;
  background: rgba(131, 181, 82, .16);
  border: 1px solid rgba(131, 181, 82, .55);
  box-shadow: 0 0 0 6px rgba(131, 181, 82, .06);
}
.rc-online b { font-size: 12.5px; font-weight: 600; letter-spacing: .1em; }
.rc-online small { font-size: 9.5px; letter-spacing: .08em; color: rgba(255, 255, 255, .62); }
.report-card.is-online:hover { border-color: #8E7BCB; }
.rc-body { padding: 11px 13px 13px; }
.rc-body h3 { font-size: 13.5px; line-height: 1.4; margin: 5px 0 4px; }
.rc-meta { font-size: 10.5px; color: var(--muted); }

.two-col { display: grid; grid-template-columns: 1.25fr 1fr; gap: 14px; margin-top: 14px; }
.two-col > * { min-width: 0; }
.panel { padding: 16px 18px; background: #fff; border: 1px solid var(--line); border-radius: 12px; }
.panel h3 { margin-bottom: 8px; font-size: 12px; letter-spacing: .8px; color: var(--muted); }
.mini-list { display: flex; flex-direction: column; }
.mini-row { display: flex; align-items: center; gap: 9px; padding: 7px 0; border-bottom: 1px dashed var(--line-soft); font-size: 12px; }
.mini-row:last-child { border-bottom: 0; }
.mini-row:hover { color: var(--primary); }
.mini-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mini-arrow { color: #B9C4D0; }

/* ---------- 报表页详情 ---------- */
main.detail-mode { padding: 0; max-width: none; height: calc(100vh - var(--topbar-h)); display: flex; flex-direction: column; overflow: hidden; }
.detail-bar { display: flex; align-items: center; gap: 12px; flex: 0 0 auto; padding: 9px 16px; background: #fff; border-bottom: 1px solid var(--line); flex-wrap: wrap; }
.db-back { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; border: 1px solid var(--line); border-radius: 7px; background: #fff; color: var(--ink); cursor: pointer; font-size: 14px; }
.db-back:hover { border-color: #9DC4E8; color: var(--primary); }
.db-title { display: flex; align-items: center; gap: 9px; min-width: 0; flex-wrap: wrap; }
.db-title h1 { font-size: 16px; letter-spacing: .2px; white-space: nowrap; }
.db-meta { display: flex; align-items: center; gap: 6px; font-size: 10.5px; color: var(--muted); }
.db-meta .sep { color: #C9D4E0; }
.db-actions { display: flex; align-items: center; gap: 7px; margin-left: auto; flex-wrap: wrap; }
.seg { display: flex; padding: 2px; background: #EDF1F6; border-radius: 6px; }
.seg button { border: 0; background: transparent; padding: 4px 11px; font-size: 11.5px; color: var(--muted); border-radius: 4px; cursor: pointer; }
.seg button.on { background: #fff; color: var(--primary); font-weight: 700; box-shadow: 0 1px 2px rgba(0, 0, 0, .08); }
.report-view { flex: 1; min-height: 0; overflow: auto; padding: 18px; background: #DCE3EB; display: flex; align-items: flex-start; justify-content: center; position: relative; }
.report-shot { display: block; max-width: 100%; height: auto; background: #fff; border-radius: 3px; box-shadow: 0 10px 34px rgba(10, 30, 60, .20); }
.report-note { padding: 40px; color: var(--muted); text-align: center; }
.service-frame { display: block; width: 100%; height: 100%; border: 0; background: #fff; }
.report-view.service-mode { display: block; padding: 0; background: #0B1F33; }
.report-view.service-mode .report-shot { display: none; }
.report-view:not(.service-mode) .service-frame { display: none; }
.report-loading { position: absolute; inset: 0; z-index: 2; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 9px; padding: 20px; background: var(--bg); color: var(--muted); font-size: 12.5px; text-align: center; }
.report-loading b { color: var(--ink); font-size: 13.5px; }
.spinner { width: 26px; height: 26px; border: 2.5px solid var(--line); border-top-color: var(--primary); border-radius: 50%; animation: l2spin .8s linear infinite; }
@keyframes l2spin { to { transform: rotate(360deg); } }
.report-timeout { position: absolute; z-index: 3; left: 50%; top: 16px; transform: translateX(-50%); display: flex; align-items: center; gap: 10px; max-width: calc(100% - 32px); padding: 9px 12px; background: #fff; border: 1px solid var(--line); border-radius: 10px; box-shadow: var(--shadow); color: var(--muted); font-size: 11.5px; }
.report-timeout b { color: var(--ink); white-space: nowrap; }
.report-timeout span { line-height: 1.45; }
.report-help {
  position: absolute; z-index: 4; top: 16px; right: 16px; width: min(470px, calc(100% - 32px));
  max-height: calc(100% - 32px); overflow: auto; padding: 14px 16px;
  background: #fff; border: 1px solid var(--line); border-radius: 12px;
  box-shadow: 0 18px 44px rgba(10, 30, 60, .22); font-size: 12px; line-height: 1.75; color: #33415C;
}
.report-help-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 6px; }
.report-help-head b { font-size: 13px; color: var(--ink); }
.report-help-list { margin: 0; padding-left: 18px; list-style: decimal; }
.report-help-list li { margin-bottom: 6px; }
.report-help code { font-family: var(--mono); font-size: 10.5px; background: var(--primary-soft); border-radius: 4px; padding: 1px 5px; word-break: break-all; }
.report-help-foot { margin-top: 10px; padding-top: 8px; border-top: 1px solid var(--line-soft); font-size: 11px; color: var(--muted); }
.btn.on { border-color: var(--primary); color: var(--primary); background: var(--primary-soft); }
[hidden] { display: none !important; }

/* ---------- 语义模型 ---------- */
.model-summary { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-top: 14px; }
.ms-card { padding: 14px 16px; background: #fff; border: 1px solid var(--line); border-radius: 10px; }
.ms-card b { display: block; font-size: 24px; line-height: 1.15; }
.ms-card span { font-size: 11px; color: var(--muted); }
.list-card { margin-top: 14px; background: #fff; border: 1px solid var(--line); border-radius: 12px; overflow: hidden; }
.list-head { display: grid; align-items: center; gap: 12px; padding: 9px 16px; grid-template-columns: 86px minmax(200px, 1.7fr) 64px 64px 130px 56px 18px; background: #F8FAFD; border-bottom: 1px solid var(--line); font-size: 10px; letter-spacing: .7px; color: var(--muted); }
.model-row { display: grid; align-items: center; gap: 12px; padding: 9px 16px; grid-template-columns: 86px minmax(200px, 1.7fr) 64px 64px 130px 56px 18px; border-bottom: 1px solid var(--line-soft); font-size: 12.5px; transition: background .14s; }
.model-row:last-child { border-bottom: 0; }
.model-row:hover { background: #F5F9FD; }
.mr-code { font-family: var(--mono); font-size: 10.5px; font-weight: 700; color: var(--primary); }
.mr-name { font-weight: 600; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mr-num { font-size: 11px; color: var(--muted); text-align: right; }
.mr-src, .mr-pages { font-size: 10.5px; color: var(--muted); }
.mr-arrow { color: #B9C4D0; text-align: right; }
.model-row:hover .mr-arrow { color: var(--primary); }

.table-wrap { overflow-x: auto; margin-top: 12px; border: 1px solid var(--line); border-radius: 10px; background: #fff; }
.data-table { width: 100%; border-collapse: collapse; font-size: 12px; }
.data-table th { padding: 8px 10px; text-align: left; white-space: nowrap; background: #F8FAFD; color: var(--muted); font-size: 10px; letter-spacing: .5px; border-bottom: 1px solid var(--line); }
.data-table td { padding: 7px 10px; border-bottom: 1px solid var(--line-soft); vertical-align: top; }
.data-table tr:last-child td { border-bottom: 0; }
.data-table .mono { font-family: var(--mono); font-size: 10.5px; }
.data-table .muted { color: var(--muted); }

/* 加工过程：摘要 + 折叠 M 代码 */
.process-grid { display: grid; grid-template-columns: 1fr 1.15fr; align-items: start; gap: 14px; margin-top: 12px; }
.process-card { padding: 15px 17px; background: #fff; border: 1px solid var(--line); border-radius: 11px; }
.process-card h3 { font-size: 12px; letter-spacing: .6px; color: var(--muted); margin-bottom: 10px; }
.process-card h3.process-sub { margin-top: 14px; }
.process-meta { display: grid; grid-template-columns: auto 1fr; gap: 6px 12px; font-size: 12px; }
.process-meta dt { color: var(--muted); white-space: nowrap; }
.process-meta dd { color: var(--ink); word-break: break-word; }
.process-notes, .process-steps { margin: 0; padding-left: 18px; font-size: 12px; line-height: 1.65; color: #3D4653; }
.process-notes li, .process-steps li { margin-bottom: 4px; }
.process-notes { margin-top: 10px; }
.process-steps b { display: block; font-size: 11.5px; color: var(--primary); font-weight: 600; }
.process-steps span { display: block; color: var(--muted); font-size: 11.5px; }
.mcode-block { margin-top: 12px; background: #fff; border: 1px solid var(--line); border-radius: 11px; overflow: hidden; }
.mcode-block summary { display: flex; align-items: center; gap: 10px; padding: 12px 16px; font-size: 12.5px; font-weight: 600; cursor: pointer; list-style: none; }
.mcode-block summary::-webkit-details-marker { display: none; }
.mcode-block summary .mcode-meta { margin-left: auto; font-size: 10.5px; font-weight: 400; color: var(--muted); }
.mcode-block summary .chev { color: #B9C4D0; font-size: 11px; }
.mcode-block[open] summary .chev { transform: rotate(90deg); }
.mcode-actions { padding: 0 16px 10px; }
.mcode { margin: 0; padding: 14px 16px; max-height: 460px; overflow: auto; background: #F7F6FB; border-top: 1px solid var(--line-soft); color: #2F3440; font-family: var(--mono); font-size: 11px; line-height: 1.55; white-space: pre; }

.measure-group { margin-top: 18px; }
.measure-group h3 { display: flex; align-items: baseline; gap: 8px; font-size: 13px; margin-bottom: 8px; }
.measure-group h3 span { font-size: 10.5px; color: var(--muted); font-weight: 400; }
.measure-item { margin-bottom: 7px; background: #fff; border: 1px solid var(--line); border-radius: 8px; overflow: hidden; }
.measure-item summary { display: flex; align-items: center; gap: 10px; padding: 9px 12px; font-size: 12.5px; cursor: pointer; list-style: none; }
.measure-item summary::-webkit-details-marker { display: none; }
.measure-item summary b { font-weight: 600; }
.measure-item summary .fmt { margin-left: auto; font-size: 9.5px; color: var(--accent); background: #F8EDE5; border-radius: 3px; padding: 1px 5px; }
.measure-item summary .chev { color: #B9C4D0; font-size: 11px; }
.measure-item[open] summary .chev { transform: rotate(90deg); }
.measure-body { padding: 0 12px 12px; }
.measure-desc { margin-bottom: 6px; font-size: 11.5px; color: var(--muted); }
.expr { margin: 0; padding: 10px 12px; max-height: 280px; overflow: auto; background: #0F1D2E; color: #D7E6F5; border-radius: 7px; font-family: var(--mono); font-size: 11px; line-height: 1.65; white-space: pre-wrap; word-break: break-word; }

.rel-row { display: flex; align-items: center; gap: 8px; padding: 6px 0; border-bottom: 1px dashed var(--line-soft); font-size: 11.5px; flex-wrap: wrap; }
.rel-row:last-child { border-bottom: 0; }
.rel-from, .rel-to { font-family: var(--mono); font-size: 10.5px; }
.rel-arrow { color: var(--primary); }
.param-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; margin-top: 10px; }
.param-card { padding: 10px 12px; background: #F8FAFD; border: 1px solid #E7EDF4; border-radius: 8px; }
.param-card b { display: block; font-size: 12px; }
.param-card code { display: block; margin-top: 3px; font-family: var(--mono); font-size: 10.5px; color: var(--primary); word-break: break-all; }
.param-card span { display: block; margin-top: 3px; font-size: 10.5px; color: var(--muted); }

/* ---------- 指标映射 ---------- */
.mapping-item { margin-bottom: 8px; background: #fff; border: 1px solid var(--line); border-radius: 9px; overflow: hidden; }
.mapping-item summary { display: flex; align-items: center; gap: 10px; padding: 10px 13px; cursor: pointer; list-style: none; font-size: 12.5px; }
.mapping-item summary::-webkit-details-marker { display: none; }
.mapping-item summary .mm-count { margin-left: auto; font-size: 10.5px; color: var(--muted); }
.mapping-body { padding: 0 13px 13px; }
.sheet-card { margin-top: 8px; padding: 9px 11px; border: 1px solid var(--line-soft); border-radius: 7px; }
.sheet-card h4 { font-size: 12px; margin: 0 0 2px; }
.sheet-meta { font-size: 10.5px; color: var(--muted); margin-bottom: 6px; }
.sample-table { width: 100%; border-collapse: collapse; font-size: 10.5px; }
.sample-table td, .sample-table th { padding: 3px 6px; border-bottom: 1px solid var(--line-soft); text-align: left; }
.sample-table th { color: var(--muted); font-weight: 500; background: #F8FAFD; }

/* ---------- 交付成果 ---------- */
.deliver-list { display: flex; flex-direction: column; margin-top: 14px; background: #fff; border: 1px solid var(--line); border-radius: 12px; overflow: hidden; }
.deliver-item { display: grid; align-items: center; gap: 14px; padding: 11px 16px; grid-template-columns: 38px 1fr minmax(200px, 1.5fr) 126px 28px; border-bottom: 1px solid var(--line-soft); transition: background .14s; }
.deliver-item:last-child { border-bottom: 0; }
.deliver-item:hover { background: #F5F9FD; }
.di-icon { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 8px; background: #F8EDE5; color: #9A5427; font-size: 9.5px; font-weight: 800; }
.di-name { font-weight: 600; font-size: 12.5px; }
.di-name small { display: block; font-size: 10px; color: var(--muted); font-weight: 400; }
.di-path { font-family: var(--mono); font-size: 10px; color: var(--muted); word-break: break-all; }
.di-meta { font-size: 10.5px; color: var(--muted); white-space: nowrap; }
.di-arrow { color: #B9C4D0; text-align: right; }
.deliver-item:hover .di-arrow { color: var(--primary); }
.pbip-panel, .pbix-panel { margin-top: 18px; padding: 22px; background: #fff; border: 1px solid var(--line); border-radius: 12px; }
.pbip-panel h2, .pbix-panel h2 { font-size: 18px; margin-top: 4px; }
.pbip-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin: 16px 0; }
.pbip-stat { padding: 12px 14px; background: #F7F9FC; border: 1px solid #E7EDF4; border-radius: 9px; }
.pbip-stat b { display: block; font-size: 22px; line-height: 1.2; }
.pbip-stat span { font-size: 11px; color: var(--muted); }
.kv-block { display: grid; grid-template-columns: 92px 1fr; gap: 6px 14px; font-size: 12px; }
.kv-block dt { color: var(--muted); }
.kv-block dd { margin: 0; }
.path { display: inline-block; font-family: var(--mono); font-size: 10.5px; color: var(--muted); word-break: break-all; background: #F5F7FA; border: 1px solid #E6EBF1; border-radius: 5px; padding: 3px 7px; }
.pbip-list { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.pbip-list span { font-size: 11px; color: #33415C; background: #F3F6FA; border: 1px solid #E3EAF2; border-radius: 5px; padding: 2px 8px; }

/* ---------- 抽屉 ---------- */
.drawer { position: fixed; top: var(--drawer-top, calc(var(--topbar-h) + var(--detail-bar-h))); right: 0; bottom: 0; z-index: 55; display: flex; flex-direction: column; width: 390px; max-width: 100%; background: #fff; border-left: 1px solid var(--line); box-shadow: -14px 0 40px rgba(10, 30, 60, .12); transform: translateX(102%); transition: transform .22s ease; }
body.drawer-open .drawer { transform: none; }
.drawer-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex: 0 0 auto; padding: 13px 18px; border-bottom: 1px solid var(--line); }
.drawer-head h2 { font-size: 13px; letter-spacing: .4px; }
.drawer-head .code { margin-left: 4px; }
.drawer-body { flex: 1; overflow-y: auto; padding: 2px 18px 28px; }
.drawer-body section { padding: 13px 0; border-bottom: 1px solid var(--line-soft); }
.drawer-body section:last-child { border-bottom: 0; }
.drawer-body h3 { font-size: 10px; letter-spacing: 1.2px; color: var(--primary); margin-bottom: 5px; }
.drawer-body p { font-size: 12px; line-height: 1.8; color: #33415C; }
.drawer-meta { display: grid; grid-template-columns: 78px 1fr; gap: 6px 10px; font-size: 11.5px; }
.drawer-meta dt { color: var(--muted); }
.drawer-meta dd { margin: 0; }
.deliver-row { display: flex; align-items: center; gap: 8px; padding: 6px 0; font-size: 11.5px; border-bottom: 1px dashed var(--line-soft); }
.deliver-row:last-child { border-bottom: 0; }
.deliver-row .dr-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.deliver-row a { color: var(--primary); font-weight: 600; white-space: nowrap; }
.deliver-row a:hover { text-decoration: underline; }
.drawer-backdrop { position: fixed; inset: var(--drawer-top, calc(var(--topbar-h) + var(--detail-bar-h))) 0 0 0; z-index: 54; background: rgba(11, 31, 51, .26); opacity: 0; pointer-events: none; transition: opacity .2s; }
body.drawer-open .drawer-backdrop { opacity: 1; pointer-events: auto; }

/* ---------- 移动端 ---------- */
.mobile-backdrop { position: fixed; inset: 0; z-index: 45; background: rgba(11, 31, 51, .38); opacity: 0; pointer-events: none; transition: opacity .2s; }
body.nav-open .mobile-backdrop { opacity: 1; pointer-events: auto; }

@media (max-width: 1400px) {
  .report-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 1180px) {
  .report-grid { grid-template-columns: repeat(2, 1fr); }
  .two-col { grid-template-columns: 1fr; }
  .model-row, .list-head { grid-template-columns: 82px minmax(180px, 1.5fr) 60px 60px 18px; }
  .mr-src, .mr-pages, .list-head span:nth-child(5), .list-head span:nth-child(6) { display: none; }
  .db-meta { display: none; }
}
@media (max-width: 980px) {
  .sidebar { transform: translateX(-102%); transition: transform .22s ease; width: 270px; }
  body.nav-open .sidebar { transform: none; }
  .workspace { margin-left: 0; }
  .menu-btn { display: inline-flex; }
  .search { width: 240px; flex: 0 1 240px; }
  .process-grid { grid-template-columns: 1fr; }
  .kpi-strip { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 720px) {
  .topbar { padding: 0 14px; gap: 10px; }
  .topbar-crumb { display: none; }
  .topbar-period { display: none; }
  .search { flex: 1; width: auto; }
  main { padding: 18px 16px 44px; }
  .page-head h1 { font-size: 22px; }
  .hero-report { min-height: 300px; }
  .hero-inner { padding: 22px 18px; }
  .hero-inner h1 { font-size: 28px; }
  .hero-meta { display: none; }
  .kpi-card { padding: 12px 14px; }
  .kpi-card b { font-size: 22px; }
  .report-grid { grid-template-columns: 1fr; }
  .model-summary { grid-template-columns: repeat(2, 1fr); }
  .model-row, .list-head { grid-template-columns: 72px 1fr 18px; gap: 8px; }
  .mr-num, .mr-src, .mr-pages, .list-head { display: none; }
  .param-grid { grid-template-columns: 1fr; }
  .report-view { padding: 8px; }
  .detail-bar { padding: 8px 12px; }
  .db-title h1 { font-size: 14.5px; }
  .db-actions { gap: 5px; }
  .drawer { width: 100%; top: var(--topbar-h); }
  .drawer-backdrop { inset: var(--topbar-h) 0 0 0; }
  .pbip-stats { grid-template-columns: repeat(2, 1fr); }
  .deliver-item { grid-template-columns: 34px 1fr 24px; gap: 10px; }
  .deliver-item .di-path, .deliver-item .di-meta { display: none; }
  .kv-block { grid-template-columns: 1fr; gap: 2px 0; }
  .kv-block dt { margin-top: 6px; }
}
@media (min-width: 1700px) {
  :root { --sidebar-w: 272px; }
  main { padding: 28px 40px 64px; }
  .kpi-card b { font-size: 30px; }
  .report-grid { grid-template-columns: repeat(4, 1fr); }
}

/* ================= CMOC brand theme ================= */
.sb-brand {
  height: 88px; flex-direction: column; align-items: flex-start; justify-content: center;
  gap: 9px; padding: 0 18px; position: relative;
}
.sb-brand::after {
  content: ""; position: absolute; left: 18px; bottom: 0;
  width: 46px; height: 2px; background: #83B552; border-radius: 2px;
}
.sb-logo { display: block; height: 22px; width: auto; max-width: 210px; }
.sb-brand-sub { display: block; font-size: 9.5px; letter-spacing: .7px; color: var(--sidebar-muted); }

.topbar-brand { display: none; align-items: center; flex: 0 0 auto; }
.topbar-brand img { display: block; height: 19px; width: auto; }

.sb-item.active {
  background: rgba(152, 146, 205, .20);
  box-shadow: inset 3px 0 0 #83B552;
}
.sb-sub-item.active { border-left-color: #83B552; background: rgba(152, 146, 205, .16); }
.sb-group-row:hover, .sb-group.open .sb-group-row { background: rgba(152, 146, 205, .12); }
.sb-chev { color: #7F75A4; }
.sb-chev:hover { color: #fff; background: rgba(255, 255, 255, .10); }
.sb-group.open .sb-chev { color: #C9C2E4; }
.sb-tag { color: #C9C2E4; border-color: rgba(201, 194, 228, .38); }
.sb-count { color: #9A90BE; background: rgba(255, 255, 255, .09); }
.sb-foot-note { color: #6F6595; }

.search input:focus { border-color: #A79BD0; box-shadow: 0 0 0 3px rgba(76, 59, 140, .13); }
.btn:hover { border-color: #B9B0D8; color: var(--primary); }
.code { color: var(--primary); background: var(--primary-soft); }
.chip { color: #4A4560; background: #F3F0FA; border-color: #E5E1EF; }
.chip.src { color: #4F7A32; background: #EEF6E8; border-color: #D5E7C6; }
.badge.html { color: #4C3B8C; background: #EFEDF8; }
.badge.pbip { color: #4F7A32; background: #EAF4E3; }
.badge.muted { color: #6B6778; background: #F3F0FA; }

.hero-report { background: #1B1038; min-height: 300px; }
.hero-bg { filter: brightness(.72) saturate(.9); }
.hero-overlay {
  background: linear-gradient(90deg, rgba(27, 16, 56, .96) 0%, rgba(42, 27, 82, .84) 46%, rgba(42, 27, 82, .36) 100%);
}
.hero-inner { max-width: 840px; padding: 30px 32px; }
.hero-logo { display: block; height: 28px; width: auto; max-width: 280px; margin-bottom: 14px; }
.hero-rule { width: 46px; height: 3px; background: #83B552; border-radius: 2px; margin: 0 0 16px; }
.hero-inner .page-kicker { color: #C9C2E4; }
.hero-inner h1 { font-size: 38px; font-weight: 600; letter-spacing: 1px; }
.hero-inner p { color: #DCD6EE; max-width: 700px; }
.hero-actions .btn { background: rgba(255, 255, 255, .08); border-color: rgba(255, 255, 255, .30); color: #fff; }
.hero-actions .btn:hover { background: rgba(255, 255, 255, .16); color: #fff; }
.hero-actions .btn.primary { background: #fff; border-color: #fff; color: var(--primary); }
.hero-actions .btn.primary:hover { background: #EFEDF8; border-color: #EFEDF8; color: var(--primary-dark); }
.hero-meta { color: #A9A0C9; font-size: 10.5px; }

.kpi-card b, .ms-card b, .pbip-stat b { color: var(--primary); }
.kpi-card { border-color: var(--line); }
.report-card:hover { border-color: #B9B0D8; }
.rc-badge { background: rgba(42, 27, 82, .84); }
.rc-badge.svc { background: rgba(91, 140, 58, .94); }
.rc-badge.pbip { background: rgba(95, 107, 109, .82); }
.list-row:hover, .model-row:hover, .deliver-item:hover { background: #F7F5FC; }
.data-table th, .pbip-stat, .param-card { background: #F7F5FC; }
.pbip-stat, .param-card { border-color: #E7E2F2; }
.expr { background: #1B1038; color: #DCD6EE; }
.seg { background: #F0EDF7; }
.seg button.on { color: var(--primary); }
.status-pill .dot.blue { background: var(--primary); }
.protocol-hint { color: #6B4E8C; background: #F7F3FC; border-bottom-color: #E4DAF2; }

@media (max-width: 980px) {
  .topbar-brand { display: inline-flex; }
}
@media (max-width: 720px) {
  .hero-report { min-height: 320px; }
  .hero-inner { padding: 22px 18px; }
  .hero-inner h1 { font-size: 28px; }
  .hero-logo { height: 22px; margin-bottom: 12px; }
  .hero-rule { margin-bottom: 12px; }
}
@media (max-width: 720px) {
  .topbar { padding: 0 12px; gap: 8px; }
  .topbar-brand img { height: 17px; max-width: 160px; }
}

/* 侧边栏展开/折叠与报表状态 */
.sb-group-head {
  border: 0; background: transparent; cursor: pointer; text-align: left;
  font-family: inherit; font-size: 12.5px;
}
.sb-sub-item { display: flex; align-items: center; gap: 6px; }
.sb-sub-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sb-dot { width: 6px; height: 6px; border-radius: 50%; flex: 0 0 auto; background: #8C82B0; }
.sb-dot.online { background: #83B552; }
.sb-dot.shot { background: #8C82B0; }
.sb-overview { font-weight: 600; color: #D6D0E8; }
.sb-overview:hover { color: #fff; }

.report-legend { display: flex; flex-wrap: wrap; gap: 16px; margin: -4px 0 14px; font-size: 11px; color: var(--muted); }
.report-legend span { display: inline-flex; align-items: center; gap: 6px; }
.report-legend b { color: var(--ink); }
.report-legend .dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; }
.report-legend .dot.online { background: #83B552; }
.report-legend .dot.shot { background: #8C82B0; }

.db-status { font-size: 9.5px; font-weight: 700; letter-spacing: .3px; padding: 2px 8px; border-radius: 999px; white-space: nowrap; }
.db-status.online { color: #4F7A32; background: #EAF4E3; border: 1px solid #D5E7C6; }
.db-status.shot { color: #6B6778; background: #F3F0FA; border: 1px solid #E5E1EF; }

/* 状态胶囊 */
.status-strip { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 13px; }
.status-pill {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 5px 12px; background: #fff; border: 1px solid var(--line);
  border-radius: 999px; font-size: 11px; color: var(--muted);
}
.status-pill b { font-size: 12.5px; color: var(--ink); }
.status-pill .dot { width: 6px; height: 6px; border-radius: 50%; background: #94A3B8; }
.status-pill .dot.good, .status-pill .dot.green { background: var(--good); }
.status-pill .dot.blue { background: var(--primary); }
.status-pill .dot.brown { background: var(--accent); }

/* ================= 指标映射 · 在线 Excel ================= */
.mapping-toolbar { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; margin-top: 9px; }
.excel-file {
  margin-left: auto; max-width: 46%; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
  font-family: var(--mono); font-size: 10px; color: var(--muted);
}
.excel-panel { position: relative; margin-top: 10px; height: 520px; background: #FBFCFE; border: 1px solid var(--line); border-radius: 9px; overflow: hidden; }
.excel-frame { display: block; width: 100%; height: 100%; border: 0; background: #fff; }
.excel-loading {
  position: absolute; inset: 0; z-index: 1; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 9px; padding: 20px; background: #FBFCFE; color: var(--muted); font-size: 12px; text-align: center;
}
.excel-loading b { color: var(--ink); font-size: 13px; }
@media (max-width: 720px) {
  .excel-panel { height: 68vh; }
  .excel-file { max-width: 100%; margin-left: 0; }
}

/* ================= UI 规范 ================= */
.ui-nav {
  position: sticky; top: var(--topbar-h); z-index: 20; display: flex; gap: 5px; flex-wrap: wrap;
  margin: 16px 0 -8px; padding: 9px 0;
  background: linear-gradient(var(--bg) 72%, rgba(247, 246, 251, 0));
}
.ui-nav-item {
  font-size: 11.5px; padding: 4px 11px; background: #fff; color: var(--muted);
  border: 1px solid var(--line); border-radius: 999px; transition: border-color .16s, color .16s;
}
.ui-nav-item:hover { color: var(--primary); border-color: #B9B0D8; }
.ui-section { scroll-margin-top: 112px; }

.ui-quote {
  margin: 0 0 14px; padding: 16px 18px; background: #fff; color: #3D4653;
  border: 1px solid var(--line); border-left: 3px solid var(--primary);
  border-radius: 0 10px 10px 0; font-size: 12.5px; line-height: 1.85;
}
.principle-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 12px; }
.principle { padding: 13px 16px 15px; background: #fff; border: 1px solid var(--line); border-top: 3px solid var(--primary); border-radius: 4px 4px 10px 10px; }
.principle b { font-size: 13px; }
.principle p { margin-top: 4px; font-size: 11.5px; line-height: 1.7; color: var(--muted); }

.rule-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 12px; }
.rule-card { position: relative; padding: 15px 18px 16px 54px; background: #fff; border: 1px solid var(--line); border-radius: 10px; }
.rule-card b { font-size: 12.5px; }
.rule-card p { margin-top: 5px; font-size: 11.5px; line-height: 1.7; color: var(--muted); }
.rule-n { position: absolute; left: 16px; top: 15px; font-family: var(--mono); font-size: 12px; font-weight: 700; color: var(--primary); opacity: .55; }

.ui-scope { margin-top: 12px; background: #fff; border: 1px solid var(--line); border-radius: 9px; overflow: hidden; }
.ui-scope summary { display: flex; align-items: center; justify-content: space-between; padding: 11px 15px; font-size: 12px; font-weight: 600; cursor: pointer; list-style: none; }
.ui-scope summary::-webkit-details-marker { display: none; }
.ui-scope summary .chev { color: #B9C4D0; font-size: 11px; }
.ui-scope[open] summary .chev { transform: rotate(90deg); }
.ui-scope-list { padding: 0 15px 13px 34px; list-style: disc; font-size: 11.5px; line-height: 1.9; color: var(--muted); }

.split { display: grid; grid-template-columns: minmax(260px, .95fr) 1.35fr; gap: 14px; align-items: start; }
.split > * { min-width: 0; }
.spec-panel { padding: 14px 16px; background: #fff; border: 1px solid var(--line); border-radius: 10px; }
.spec-panel h3 { margin-bottom: 8px; font-size: 11px; letter-spacing: .6px; color: var(--muted); }
.kv-table { width: 100%; border-collapse: collapse; font-size: 12px; }
.kv-table th, .kv-table td { padding: 6px 10px 6px 0; text-align: left; vertical-align: top; border-bottom: 1px solid var(--line-soft); }
.kv-table th { width: 34%; font-weight: 400; color: var(--muted); white-space: nowrap; }
.kv-table td { color: var(--ink); }
.kv-table tr:last-child th, .kv-table tr:last-child td { border-bottom: 0; }
.kv-table.wide th { width: 168px; white-space: normal; }
.kv-table .mono { font-family: var(--mono); font-size: 10.5px; }
.spec-note { margin-top: 8px; font-size: 12px; line-height: 1.8; color: var(--muted); }
.sub-h { margin: 18px 0 10px; padding-left: 9px; border-left: 3px solid var(--primary); font-size: 12px; letter-spacing: .5px; }

.swatch-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(232px, 1fr)); gap: 10px; }
.swatch-grid.two { grid-template-columns: repeat(auto-fit, minmax(310px, 1fr)); }
.swatch { display: flex; align-items: flex-start; gap: 11px; padding: 11px 12px; font: inherit; text-align: left; background: #fff; border: 1px solid var(--line); border-radius: 9px; cursor: pointer; transition: border-color .16s; }
.swatch:hover { border-color: #B9B0D8; }
.swatch.copied { border-color: var(--good); }
.swatch-chip { flex: 0 0 auto; width: 40px; height: 40px; border-radius: 7px; border: 1px solid rgba(0, 0, 0, .08); transition: box-shadow .16s; }
.swatch.copied .swatch-chip { box-shadow: 0 0 0 3px rgba(91, 140, 58, .2); }
.swatch-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.swatch-body b { font-size: 12px; }
.swatch-body code { font-family: var(--mono); font-size: 10.5px; color: var(--primary); }
.swatch-body small { font-size: 10.5px; line-height: 1.55; color: var(--muted); }
.swatch.copied .swatch-body code::after { content: " · 已复制"; color: var(--good); }

.ui-list { margin: 0; padding-left: 17px; list-style: disc; font-size: 12px; line-height: 1.8; color: #3D4653; }
.ui-list li { margin-bottom: 5px; }
.ui-code { white-space: pre; font-size: 11px; line-height: 1.9; background: #F7F6FB; color: #3D4653; }

.type-table { background: #fff; border: 1px solid var(--line); border-radius: 10px; overflow: hidden; }
.type-row { display: grid; grid-template-columns: minmax(150px, 1.4fr) minmax(140px, 1fr) 122px 168px; gap: 14px; align-items: center; padding: 10px 16px; border-bottom: 1px solid var(--line-soft); }
.type-row:last-child { border-bottom: 0; }
.type-sample { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-weight: 600; line-height: 1.25; }
.type-meta b { display: block; font-size: 12px; }
.type-meta span { font-size: 10.5px; color: var(--muted); }
.type-color { display: inline-flex; align-items: center; gap: 6px; font-family: var(--mono); font-size: 10.5px; color: var(--muted); }
.type-color i { width: 12px; height: 12px; border-radius: 3px; border: 1px solid rgba(0, 0, 0, .08); }
.type-align { font-size: 11px; color: var(--muted); }

.spec-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 12px; }
.spec-card { padding: 14px 16px; background: #fff; border: 1px solid var(--line); border-radius: 10px; }
.spec-card-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 8px; }
.spec-card-head h3 { font-size: 13px; }
.spec-card ul { padding-left: 16px; list-style: disc; font-size: 11.5px; line-height: 1.75; color: #3D4653; }
.spec-card li { margin-bottom: 4px; }

.layout-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(296px, 1fr)); gap: 14px; }
.layout-fig { margin: 0; }
.layout-canvas { position: relative; width: 100%; aspect-ratio: 16 / 9; background: #fff; border: 1px solid var(--line); border-radius: 8px; overflow: hidden; box-shadow: 0 1px 2px rgba(42, 27, 82, .05); }
.layout-fig figcaption { display: flex; flex-direction: column; gap: 2px; padding: 8px 2px 0; }
.layout-fig figcaption b { font-size: 11.5px; font-weight: 600; }
.layout-fig figcaption span { font-size: 10.5px; line-height: 1.55; color: var(--muted); }
.lb { position: absolute; display: block; overflow: hidden; }
.lb i { display: block; padding: 1px 3px; font-style: normal; font-size: 8px; line-height: 1.15; color: #334155; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lb-title { background: #1A2538; border-radius: 2px; }
.lb-title i { padding: 1px 4px; font-size: 7px; color: #fff; }
.lb-filter { background: #F4F7FB; border: 1px solid #C9D6E4; border-radius: 2px; }
.lb-card { background: #EDF2F8; border: 1px solid #D5E1EE; border-radius: 2px; }
.lb-matrix { background: rgba(26, 37, 56, .07); border-top: 2px solid #1A2538; }
.lb-chart { background: rgba(26, 37, 56, .04); border-top: 2px solid rgba(26, 37, 56, .42); }
.legend-row { display: flex; flex-wrap: wrap; gap: 16px; margin-top: 12px; font-size: 11px; color: var(--muted); }
.legend-row span { display: inline-flex; align-items: center; gap: 6px; }
.legend-row i { display: inline-block; width: 14px; height: 9px; border-radius: 2px; }
.lg-title { background: #1A2538; }
.lg-filter { background: #F4F7FB; border: 1px solid #C9D6E4; }
.lg-card { background: #EDF2F8; border: 1px solid #D5E1EE; }
.lg-matrix { background: rgba(26, 37, 56, .07); border-top: 2px solid #1A2538; }
.lg-chart { background: rgba(26, 37, 56, .04); border-top: 2px solid rgba(26, 37, 56, .42); }

.theme-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0 4px; }
.theme-chip { display: inline-flex; align-items: center; gap: 7px; padding: 5px 9px; background: #F8FAFD; border: 1px solid var(--line); border-radius: 6px; font-family: var(--mono); font-size: 10.5px; color: #41566B; }
.theme-chip i { width: 14px; height: 14px; border-radius: 3px; border: 1px solid rgba(0, 0, 0, .08); }
.theme-chip small { font-size: 9px; color: var(--muted); }

.check-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(430px, 1fr)); gap: 8px; }
.check-item { position: relative; display: flex; align-items: flex-start; gap: 9px; padding: 10px 13px; background: #fff; border: 1px solid var(--line); border-radius: 8px; cursor: pointer; font-size: 12px; }
.check-item:hover { border-color: #B9B0D8; }
.check-item input { position: absolute; width: 0; height: 0; opacity: 0; }
.check-box { position: relative; flex: 0 0 auto; width: 16px; height: 16px; margin-top: 1px; background: #fff; border: 1.5px solid #C3CBD8; border-radius: 4px; transition: background .14s, border-color .14s; }
.check-item input:checked + .check-box { background: var(--good); border-color: var(--good); }
.check-item input:checked + .check-box::after { content: "✓"; position: absolute; inset: 0; display: grid; place-items: center; color: #fff; font-size: 11px; line-height: 1; }
.check-item input:checked ~ .check-text { color: var(--muted); text-decoration: line-through; }
.check-item input:focus-visible + .check-box { outline: 2px solid #7FB4E4; outline-offset: 1px; }
.check-no { flex: 0 0 auto; width: 15px; margin-top: 2px; font-family: var(--mono); font-size: 10px; color: var(--muted); text-align: right; }
.check-text { line-height: 1.55; }

.issue-table td { font-size: 11.5px; line-height: 1.6; }
.issue-name { width: 32%; font-weight: 600; color: #33415C; }
.issue-impact { width: 33%; color: var(--muted); }

.log-list { margin-left: 6px; padding: 0; list-style: none; border-left: 2px solid var(--line); }
.log-row { position: relative; display: grid; grid-template-columns: 62px 92px 1fr; gap: 12px; padding: 8px 0 8px 18px; font-size: 12px; }
.log-row::before { content: ""; position: absolute; left: -6px; top: 14px; width: 7px; height: 7px; border-radius: 50%; background: #fff; border: 2px solid #B9B0D8; }
.log-row:last-child::before { background: var(--primary); border-color: var(--primary); }
.log-v { font-family: var(--mono); font-weight: 700; color: var(--primary); }
.log-date { padding-top: 2px; font-size: 10.5px; color: var(--muted); }
.log-text { line-height: 1.65; color: #3D4653; }

@media (max-width: 980px) {
  .split { grid-template-columns: 1fr; }
  .check-list { grid-template-columns: 1fr; }
}
@media (max-width: 720px) {
  .type-row { grid-template-columns: 1fr; gap: 3px; padding: 10px 13px; }
  .type-color, .type-align { font-size: 10.5px; }
  .log-row { grid-template-columns: 58px 1fr; }
  .log-text { grid-column: 1 / -1; }
}