:root {
  --navy-950: #0d1d2b;
  --navy-900: #12283b;
  --navy-800: #17324d;
  --teal: #18a999;
  --teal-dark: #148f84;
  --paper: #f4f7fa;
  --ink: #1c2733;
  --muted: #687989;
  --line: #dce4eb;
  --amber: #d99a2b;
  --coral: #dc6b5c;
}

* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; background: var(--paper); color: var(--ink); }
body { font-family: "Microsoft YaHei", "PingFang SC", sans-serif; }
button, input { font: inherit; }
button { cursor: pointer; }
.demo-ribbon { position: fixed; top: 0; left: 50%; z-index: 80; transform: translateX(-50%); padding: 5px 18px 6px; color: #f8e9ba; background: #89611c; border-radius: 0 0 9px 9px; font-size: 10px; letter-spacing: .08em; }
.sidebar { position: fixed; inset: 0 auto 0 0; z-index: 40; width: 230px; display: flex; flex-direction: column; color: white; background: var(--navy-950); }
.brand { height: 72px; padding: 0 18px; display: flex; align-items: center; gap: 11px; border-bottom: 1px solid rgba(255,255,255,.08); }
.brand-mark { width: 37px; height: 37px; display: grid; place-items: center; color: var(--navy-900); background: #67d9cc; border-radius: 10px; font: 800 12px/1 Bahnschrift, sans-serif; }
.brand strong, .brand small { display: block; }.brand strong { font-size: 15px; }.brand small { margin-top: 3px; color: #8fa5b6; font-size: 10px; letter-spacing: .12em; }
nav { flex: 1; padding: 17px 12px; overflow: auto; }
.nav-label { padding: 15px 12px 6px; color: #607689; font: 700 9px/1 Bahnschrift, sans-serif; letter-spacing: .16em; }
.nav-item { width: 100%; height: 42px; padding: 0 12px; display: flex; align-items: center; gap: 12px; color: #9fb0be; background: transparent; border: 0; border-radius: 8px; font-size: 12px; text-align: left; }
.nav-item span { width: 18px; color: #6e8596; font: 700 15px/1 Arial, sans-serif; text-align: center; }.nav-item:hover { color: white; background: rgba(255,255,255,.05); }.nav-item.active { color: #cefff9; background: rgba(24,169,153,.18); box-shadow: inset 3px 0 0 #4bd0c1; }.nav-item.active span { color: #54d5c6; }
.sidebar-foot { padding: 15px 18px; display: flex; justify-content: space-between; color: #63798a; border-top: 1px solid rgba(255,255,255,.08); font-size: 9px; }
.main-column { min-height: 100vh; margin-left: 230px; }.topbar { height: 72px; padding: 0 28px; display: flex; align-items: center; gap: 20px; background: rgba(255,255,255,.95); border-bottom: 1px solid var(--line); }.menu-button { display: none; border: 0; background: transparent; }
.global-search { width: min(410px, 45vw); height: 37px; padding: 0 13px; display: flex; align-items: center; gap: 9px; color: #8c99a5; background: #f3f6f8; border: 1px solid #e5ebef; border-radius: 9px; font-size: 11px; }.global-search span { flex: 1; }.global-search kbd { padding: 2px 6px; background: white; border: 1px solid #dfe6eb; border-radius: 4px; font-size: 9px; }
.account { margin-left: auto; display: flex; align-items: center; gap: 9px; }.account strong, .account small { display: block; }.account strong { font-size: 11px; }.account small { margin-top: 2px; color: var(--muted); font-size: 9px; }.account button { color: #80909d; background: transparent; border: 0; }.avatar { width: 34px; height: 34px; display: grid; place-items: center; color: white; background: var(--navy-800); border-radius: 9px; font-size: 11px; }
main { padding: 27px 28px 48px; }.page-header { margin-bottom: 20px; display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; }.eyebrow { color: var(--teal-dark); font: 700 9px/1.2 Bahnschrift, sans-serif; letter-spacing: .16em; }.page-header h1 { margin: 5px 0 4px; font-size: 29px; letter-spacing: -.04em; }.page-header p { margin: 0; color: var(--muted); font-size: 11px; }.period { padding: 9px 12px; color: #465e72; background: white; border: 1px solid var(--line); border-radius: 8px; font-size: 10px; }
.metrics { display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px; }.metric { min-height: 126px; padding: 16px; position: relative; overflow: hidden; background: white; border: 1px solid var(--line); border-radius: 12px; }.metric::after { content: ''; position: absolute; inset: auto 0 0; height: 3px; background: currentColor; }.metric i { width: 34px; height: 34px; display: grid; place-items: center; color: white; background: currentColor; border-radius: 9px; font-style: normal; }.metric span { display: block; margin-top: 11px; color: var(--muted); font-size: 10px; }.metric strong { display: block; margin-top: 8px; color: var(--ink); font: 700 28px/1 Bahnschrift, sans-serif; }.metric strong small { margin-left: 4px; color: var(--muted); font: 500 9px/1 "Microsoft YaHei", sans-serif; }.mint { color: var(--teal); }.blue { color: #3d78c5; }.amber { color: var(--amber); }.purple { color: #7669b5; }.coral { color: var(--coral); }
.lifecycle { margin-top: 13px; padding: 20px 22px; display: grid; grid-template-columns: 230px 1fr; gap: 25px; align-items: center; color: white; background: var(--navy-800); border-radius: 13px; }.lifecycle h2 { margin: 5px 0 4px; font-size: 16px; }.lifecycle p { margin: 0; color: #9fb4c3; font-size: 9px; line-height: 1.5; }.lifecycle .eyebrow { color: #6ed9cd; }.rail { display: grid; grid-template-columns: repeat(6, 1fr); position: relative; }.rail::before { content: ''; position: absolute; left: 5%; right: 5%; top: 16px; border-top: 1px solid #48657b; }.rail div { position: relative; text-align: center; }.rail span { width: 33px; height: 33px; margin: 0 auto 8px; display: grid; place-items: center; color: #6ed9cd; background: var(--navy-800); border: 1px solid #4e7084; border-radius: 50%; font: 700 9px/1 Bahnschrift, sans-serif; }.rail div:nth-child(4) span { color: var(--navy-900); background: #64d6c9; border-color: #64d6c9; box-shadow: 0 0 0 5px rgba(100,214,201,.12); }.rail strong { color: #d4e2e9; font-size: 9px; font-weight: 500; }
.split { margin-top: 13px; display: grid; grid-template-columns: 1fr 1fr; gap: 13px; }.card { overflow: hidden; background: white; border: 1px solid var(--line); border-radius: 12px; }.card-head { min-height: 63px; padding: 14px 16px; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid #e8edf1; }.card-head h2 { margin: 4px 0 0; font-size: 14px; }.card-head a { color: var(--teal-dark); font-size: 9px; font-weight: 700; }.compact-list { padding: 3px 16px 9px; }.compact-row { min-height: 54px; display: grid; grid-template-columns: 8px 1fr auto; gap: 9px; align-items: center; border-bottom: 1px solid #edf1f4; }.compact-row:last-child { border: 0; }.dot { width: 6px; height: 6px; background: var(--teal); border-radius: 50%; box-shadow: 0 0 0 4px #def2ef; }.dot.warning { background: var(--amber); box-shadow: 0 0 0 4px #f8edd9; }.compact-row strong, .compact-row small { display: block; }.compact-row strong { font-size: 10px; }.compact-row small, .compact-row time { margin-top: 3px; color: var(--muted); font-size: 8px; }
.toolbar { min-height: 61px; padding: 11px 13px; display: flex; align-items: center; gap: 8px; border-bottom: 1px solid var(--line); }.search { width: 280px; height: 35px; padding: 0 11px; display: flex; align-items: center; gap: 8px; color: #8795a1; background: #f7f9fa; border: 1px solid #e3e9ed; border-radius: 8px; font-size: 10px; }.search input { width: 100%; border: 0; outline: 0; background: transparent; font-size: 10px; }.button { min-height: 35px; padding: 0 13px; display: inline-flex; align-items: center; gap: 6px; border-radius: 8px; font-size: 10px; font-weight: 700; }.button.primary { margin-left: auto; color: white; background: var(--teal-dark); border: 1px solid var(--teal-dark); }.button.secondary { color: #536675; background: white; border: 1px solid var(--line); }
.table-card { overflow: auto; background: white; border: 1px solid var(--line); border-radius: 12px; }.table-card table { width: 100%; border-collapse: collapse; }.table-card th { height: 43px; padding: 0 12px; color: #526474; background: #f8fafb; border-bottom: 1px solid var(--line); font-size: 10px; text-align: left; white-space: nowrap; }.table-card td { height: 55px; padding: 10px 12px; color: #4f6070; border-bottom: 1px solid #e9eef2; font-size: 10px; white-space: nowrap; }.table-card tr:last-child td { border-bottom: 0; }.table-card tbody tr:hover td { background: #f9fbfc; }.table-card td strong, .table-card td small { display: block; }.table-card td strong { color: var(--ink); font-size: 10px; }.table-card td small { margin-top: 3px; color: #8b99a4; font-size: 8px; }.mono { font-family: Bahnschrift, Consolas, monospace; }.badge { display: inline-flex; min-height: 22px; padding: 0 8px; align-items: center; color: #08776c; background: #ddf4f0; border-radius: 20px; font-size: 8px; font-weight: 700; }.badge.warning { color: #8b5e11; background: #fff1d7; }.badge.gray { color: #727e87; background: #edf0f2; }.amount { color: var(--ink); font: 700 10px/1 Bahnschrift, sans-serif; }
.summary-strip { margin-bottom: 13px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }.summary-strip div { padding: 14px; background: white; border: 1px solid var(--line); border-radius: 10px; }.summary-strip span, .summary-strip strong { display: block; }.summary-strip span { color: var(--muted); font-size: 9px; }.summary-strip strong { margin-top: 7px; font: 700 21px/1 Bahnschrift, sans-serif; }.summary-strip small { margin-left: 4px; color: var(--muted); font-size: 8px; }

/* 展示给非技术人员看，字号宁可舒展一档，不做 9px/10px 的极限密度。 */
body { font-size: 15px; }
.brand strong { font-size: 17px; }
.brand small { font-size: 12px; }
.nav-label { font-size: 11px; }
.nav-item { font-size: 14px; }
.sidebar-foot { font-size: 11px; }
.global-search, .account strong { font-size: 13px; }
.account small { font-size: 11px; }
.eyebrow { font-size: 11px; }
.page-header h1 { font-size: 34px; }
.page-header p { font-size: 14px; line-height: 1.6; }
.period { font-size: 12px; }
.metric span { font-size: 13px; }
.metric strong { font-size: 34px; }
.metric strong small { font-size: 11px; }
.lifecycle h2, .card-head h2 { font-size: 18px; }
.lifecycle p, .rail strong { font-size: 12px; }
.card-head a { font-size: 12px; }
.compact-row strong { font-size: 13px; }
.compact-row small, .compact-row time { font-size: 11px; }
.search, .search input, .button { font-size: 13px; }
.table-card th, .table-card td, .table-card td strong { font-size: 13px; }
.table-card td { height: 59px; line-height: 1.5; }
.table-card td small, .badge { font-size: 11px; }
.amount { font-size: 13px; }
.summary-strip span { font-size: 12px; }
.summary-strip strong { font-size: 25px; }
.summary-strip small { font-size: 10px; }

@media (max-width: 1050px) { .metrics { grid-template-columns: repeat(3, 1fr); }.lifecycle { grid-template-columns: 1fr; }.split { grid-template-columns: 1fr; } }
@media (max-width: 760px) { .sidebar { transform: translateX(-100%); transition: transform .2s ease; }.sidebar.open { transform: translateX(0); box-shadow: 18px 0 55px rgba(8,22,32,.3); }.main-column { margin-left: 0; }.menu-button { display: block; }.topbar { padding: 0 15px; }.global-search { display: none; }main { padding: 22px 14px 40px; }.page-header { align-items: flex-start; flex-direction: column; }.metrics { grid-template-columns: 1fr 1fr; }.summary-strip { grid-template-columns: 1fr 1fr; }.rail { grid-template-columns: repeat(3, 1fr); gap: 15px 0; }.rail::before { display: none; }.demo-ribbon { left: auto; right: 8px; transform: none; }.account div { display: none; } }