:root {
  /* 华港财富品牌颜色使用规范指南 2025 */
  --brand-red: #e60000;
  --table-red: #c0504d;
  --table-red-deep: #a8403d;
  --grey: #a6a6a6;
  --grey-light: #f2f2f2;
  --sand: #d5d0c2;
  --taupe: #87796c;
  --ink: #000000;
  --ink-2: #404040;
  --ink-3: #87796c;
  --line: #e6e6e6;
  --tint: #fbf8f4;
  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "PingFang SC", "Microsoft YaHei", sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: calc(var(--top-h, 60px) + 12px); }
html, body { margin: 0; }
body { background: var(--grey-light); color: var(--ink); font-family: var(--font); -webkit-font-smoothing: antialiased; }
.neg { color: var(--brand-red); }

/* ---------- top bar ---------- */
.topbar {
  position: sticky; top: 0; z-index: 20; height: 60px;
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 16px;
  padding: 0 28px; background: #fff; border-bottom: 1px solid var(--line);
}
.brand img { height: 30px; display: block; }
.nav { display: flex; gap: 4px; }
.nav a {
  position: relative; color: var(--ink-2); text-decoration: none; font-size: 15px; padding: 8px 18px; white-space: nowrap;
}
.nav a::after {
  content: ""; position: absolute; left: 18px; right: 18px; bottom: -2px; height: 3px;
  background: var(--table-red); transform: scaleX(0); transition: transform .2s;
}
.nav a:hover { color: var(--table-red-deep); }
.nav a.active { color: var(--table-red); font-weight: 600; }
.nav a.active::after { transform: scaleX(1); }
.top-meta { justify-self: end; text-align: right; display: flex; flex-direction: column; line-height: 1.35; white-space: nowrap; }
.top-meta b { font-size: 13.5px; letter-spacing: .06em; }
.top-meta small { font-size: 11.5px; color: var(--ink-3); font-variant-numeric: tabular-nums; }

/* ---------- panels ---------- */
.page { padding: 10px 20px 28px; max-width: 1880px; margin: 0 auto; display: flex; flex-direction: column; gap: 16px; }
.panel { background: #fff; border-radius: 4px; overflow: clip; }
.panel-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 18px 24px 14px; }
.panel-title { border-left: 4px solid var(--brand-red); padding-left: 12px; }
.panel-title h1, .panel-title h2 { margin: 0; font-weight: 700; letter-spacing: .03em; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.panel-title h1 { font-size: 22px; }
.panel-title h2 { font-size: 19px; }
.panel-title p { margin: 4px 0 0; font-size: 12px; color: var(--ink-3); }
.tag { font-size: 12px; font-weight: 600; color: var(--table-red); border: 1px solid var(--table-red); border-radius: 999px; padding: 1px 10px; letter-spacing: 0; }
.count { font-size: 12.5px; color: var(--brand-red); border: 1px solid var(--brand-red); padding: 4px 12px; border-radius: 999px; font-weight: 600; white-space: nowrap; }
h3 { font-size: 14px; margin: 0 0 10px; color: var(--ink); letter-spacing: .03em; }

/* ---------- KPIs ---------- */
.kpis { display: grid; grid-template-columns: repeat(6, 1fr); gap: 1px; margin: 0 0 10px; background: var(--line); border: 1px solid var(--line); border-radius: 4px; overflow: hidden; }
.kpi { padding: 9px 16px; display: flex; flex-direction: column; gap: 2px; background: #fff; }
.kpi span { font-size: 12px; color: var(--ink-3); }
.kpi b { font-size: 22px; font-weight: 700; font-variant-numeric: tabular-nums; letter-spacing: .01em; }
.kpi small { font-size: 11px; color: var(--grey); font-variant-numeric: tabular-nums; }

/* ---------- overview: one screen ---------- */
.ov-panel { padding: 8px 20px 12px; background: transparent; overflow: visible; }
.ov-head { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 14px; margin-bottom: 10px; }
.ov-head h1 { margin: 0; font-size: 20px; letter-spacing: .02em; border-left: 4px solid var(--brand-red); padding-left: 10px; display: flex; align-items: center; gap: 10px; }
.ov-head p { margin: 0; font-size: 12px; color: var(--ink-3); }
.ov { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.08fr); gap: 12px; }
.ov-left { display: flex; flex-direction: column; }
.ov-right { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.card { background: #fff; border: 1px solid var(--line); border-radius: 4px; padding: 10px 16px 12px; min-width: 0; }
.card-h { margin: 0 0 6px; font-size: 14px; font-weight: 700; display: flex; align-items: baseline; gap: 10px; }
.card-h small { font-size: 11.5px; font-weight: 400; color: var(--ink-3); }

.donut { width: 100%; height: auto; display: block; overflow: visible; }
.donut path { cursor: pointer; transition: opacity .15s; }
.donut path:hover { opacity: .82; }
.donut text { font-weight: 600; pointer-events: none; }
.donut .d-in { font-size: 15px; }
.donut .d-out { font-size: 14px; }
.donut .pv { font-weight: 700; }
.donut .d-side { font-size: 14px; fill: var(--ink-2); pointer-events: auto; cursor: pointer; }
.donut .d-side:hover { fill: var(--table-red); }
.donut .leader { fill: none; stroke: #b9b2a6; stroke-width: 1; }
.donut .d-center { font-size: 23px; font-weight: 700; fill: var(--ink); }
.donut .d-center-sub { font-size: 13px; font-weight: 400; fill: var(--ink-3); }

.intro { margin-top: 4px; border-top: 1px solid var(--line); padding-top: 6px; }
.intro h3 { margin: 0 0 2px; font-size: 13px; }
.intro-item { display: flex; align-items: center; gap: 10px; padding: 4px 0; border-bottom: 1px solid #f3f3f3; }
.intro-item:last-child { border-bottom: 0; }
.intro-item .no { flex: none; width: 20px; height: 20px; background: #c9b79c; color: #fff; font-weight: 700; display: grid; place-items: center; border-radius: 2px; font-size: 11.5px; }
.intro-item > div { display: flex; align-items: baseline; gap: 10px; }
.intro-item b { font-size: 13px; flex: none; width: 56px; }
.intro-item p { margin: 0; font-size: 12.5px; color: var(--ink-2); line-height: 1.4; }

table { border-collapse: separate; border-spacing: 0; font-variant-numeric: tabular-nums; }
.mini { width: 100%; font-size: 13px; }
.mini th, .mini td { padding: 7px 10px; border-bottom: 1px solid #f0f0f0; text-align: right; white-space: nowrap; }
.mini thead th { background: var(--table-red); color: #fff; font-weight: 600; font-size: 12.5px; }
.mini thead th:first-child { text-align: left; background: var(--table-red-deep); }
.mini tbody th { text-align: left; font-weight: 600; }

/* ---------- holdings ---------- */
.table-wrap { overflow-x: auto; border-top: 1px solid var(--line); }
.hold { width: 100%; font-size: 13px; }
.hold th, .hold td { padding: 5px 10px; border-bottom: 1px solid #f3f3f3; text-align: right; white-space: nowrap; }
.hold thead th { position: sticky; top: 0; background: var(--table-red); color: #fff; font-weight: 600; font-size: 12.5px; height: 38px; border-right: 1px solid rgba(255,255,255,.22); }
.hold thead th.c-sub, .hold thead th.c-fund { text-align: left; background: var(--table-red-deep); }
.hold td.c-sub { text-align: left; vertical-align: top; background: var(--tint); border-right: 1px solid #efe9df; min-width: 92px; }
.hold td.c-sub b { font-size: 13px; margin-right: 6px; }
.hold td.c-sub small { color: var(--ink-3); font-size: 12px; }
.hold td.c-fund { text-align: left; white-space: normal; min-width: 360px; max-width: 480px; line-height: 1.3; }
.hold td.c-fund .fn { font-weight: 600; }
.hold td.c-fund small { font-size: 11px; color: var(--grey); margin-left: 8px; }
.hold td.w { color: var(--ink-2); background: #fcfcfc; }
.hold td.v { color: var(--ink-2); }
.hold td.ytd, .hold th.ytd { background: #fcefee; font-weight: 700; }
.hold thead th.ytd { background: var(--table-red-deep); }
.hold tr.sub-end td { border-bottom: 1px solid #e3e3e3; }
.hold tr.cat-row th, .hold tr.cat-row td { background: #f4f1ec; font-weight: 700; border-bottom: 1px solid #ddd6ca; border-top: 1px solid #ddd6ca; }
.hold tr.cat-row th { text-align: left; font-size: 14px; }
.hold tr.cat-row th i { display: inline-block; width: 10px; height: 10px; border-radius: 2px; margin-right: 8px; }
.hold tr.cat-row .alloc { margin-left: 10px; color: var(--table-red); }
.hold tr.cat-row td.ytd { background: #f6e3e1; }
.hold tr.total-row th, .hold tr.total-row td { background: #3f3a36; color: #fff; font-weight: 700; border: 0; }
.hold tr.total-row th { text-align: left; }
.hold tr.total-row th small { font-weight: 400; font-size: 11px; color: #cfc8c0; margin-left: 8px; }
.hold tr.total-row .neg { color: #ff8a80; }
.hold tbody tr:not(.cat-row):not(.total-row):hover td:not(.c-sub) { background: #faf0ef; }
.hold tr td, .hold tr th { transition: background-color .6s; }
.hold tr.hl td, .hold tr.hl th { background-color: #f9e4e3 !important; }
.new { font-style: normal; font-size: 10.5px; font-weight: 600; color: #fff; background: var(--table-red); border-radius: 3px; padding: 0 5px; margin-left: 6px; vertical-align: 1px; }
.lag { font-size: 9.5px; color: var(--ink-3); margin-left: 2px; font-weight: 500; }

.notes { display: flex; flex-direction: column; gap: 4px; padding: 10px 24px 14px; border-top: 1px solid var(--line); font-size: 12px; color: var(--ink-3); line-height: 1.5; }
.notes div { display: flex; gap: 6px; }
.notes div::before { content: "i"; flex: none; margin-top: 2px; width: 14px; height: 14px; border-radius: 50%; border: 1px solid var(--brand-red); color: var(--brand-red); font-size: 10px; font-weight: 700; display: grid; place-items: center; font-style: italic; }

/* ---------- performance ---------- */
.series-toggles { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; margin-bottom: 4px; }
.toggle { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--ink-2); border: 1px solid var(--line); border-radius: 999px; padding: 3px 8px; cursor: pointer; user-select: none; white-space: nowrap; }
.toggle input { display: none; }
.toggle i { width: 12px; height: 12px; border-radius: 3px; border: 1.5px solid var(--c, transparent); }
.toggle.on { border-color: var(--grey); color: var(--ink); }
.toggle.on i { background: var(--c); }
.toggle.fixed { cursor: default; font-weight: 600; color: var(--ink); }
.toggle.fixed i { height: 4px; border: 0; border-radius: 2px; }
.chart { width: 100%; }
.nav-svg { display: block; touch-action: pan-y; }
.nav-svg .grid { stroke: #eee; }
.nav-svg .grid.v { stroke-dasharray: 3 3; }
.nav-svg .base { stroke: var(--grey); stroke-dasharray: 4 3; }
.nav-svg .ax { font-size: 11px; fill: var(--ink-3); font-variant-numeric: tabular-nums; }
.nav-line { fill: none; stroke: var(--table-red); stroke-width: 2.2; stroke-linejoin: round; }
.ix-line { fill: none; stroke-width: 1.6; stroke-linejoin: round; opacity: .9; }
.hover-line { stroke: #bbb; stroke-dasharray: 3 3; }
.hover-dot { stroke: #fff; stroke-width: 1.5; }
.tt-row { display: flex; align-items: center; gap: 6px; }
.tt-row i { width: 8px; height: 8px; border-radius: 2px; }
.tt-row em { font-style: normal; margin-left: auto; padding-left: 14px; font-weight: 600; }
.tt-sub { color: #ccc; margin-top: 2px; }
.bench { overflow-x: auto; }
.bench-x { table-layout: fixed; min-width: 600px; }
.bench-x thead th { text-align: center; line-height: 1.25; padding: 5px 4px; white-space: normal; font-size: 12px; }
.bench-x thead th small { display: block; font-weight: 400; font-size: 10.5px; opacity: .8; }
.bench-x thead th:first-child { width: 96px; }
.bench-x thead th.me { background: var(--table-red-deep); }
.bench-x td, .bench-x tbody th { padding: 5px 4px; }
.bench-x td { text-align: center; }
.bench-x td.me { background: #f7f3ee; font-weight: 700; }
.bench-x tbody th { font-size: 12.5px; }
.small-note { margin: 4px 0 0; font-size: 11px; color: var(--ink-3); }

/* the overview fills exactly one screen on desktop */
@media (min-width: 1101px) {
  .ov-panel { height: calc(100dvh - var(--top-h, 61px) - 10px); min-height: 690px; display: flex; flex-direction: column; }
  .ov { flex: 1; min-height: 0; grid-template-rows: minmax(0, 1fr); }
  .ov-left, .ov-right { min-height: 0; }
  .donut-box { flex: 1; min-height: 0; position: relative; }
  .donut-box .donut { position: absolute; inset: 0; height: 100%; }
  .ov-right .card:first-child { flex: 1; min-height: 0; display: flex; flex-direction: column; }
  .ov-right .chart { flex: 1; min-height: 180px; position: relative; }
  .ov-right .chart .nav-svg { position: absolute; inset: 0; }
}

/* ---------- views ---------- */
.view-tabs { display: flex; gap: 6px; padding: 0 24px 14px; flex-wrap: wrap; }
#catTabs { padding-bottom: 12px; }
.vtab { border: 1px solid var(--line); background: #fff; color: var(--ink-2); font: inherit; font-size: 13.5px; padding: 6px 14px; border-radius: 999px; cursor: pointer; display: inline-flex; gap: 6px; align-items: center; }
.vtab span { font-weight: 700; color: var(--table-red); font-variant-numeric: tabular-nums; }
.vtab:hover { border-color: var(--table-red); }
.vtab.active { background: var(--table-red); border-color: var(--table-red); color: #fff; font-weight: 600; }
.vtab.active span { color: #fff; }
.headline { margin: 0 24px 16px; padding: 12px 16px; background: var(--tint); border-left: 3px solid #c9b79c; font-size: 13.5px; line-height: 1.7; color: var(--ink-2); }
.headline p { margin: 0; }
.headline p + p { margin-top: 6px; }
.vrows { padding: 0 24px 22px; display: flex; flex-direction: column; }
.vrow { display: grid; grid-template-columns: minmax(220px, 340px) minmax(0, 1fr); border-top: 1px solid var(--line); }
.vrow:last-child { border-bottom: 1px solid var(--line); }
.vleft { padding: 14px 16px; background: #fcfbf9; border-right: 1px solid var(--line); }
.vlabel { display: flex; align-items: baseline; gap: 10px; margin-bottom: 6px; }
.vlabel b { font-size: 15px; }
.vlabel span { font-size: 15px; font-weight: 700; color: var(--table-red); }
.prods { margin: 0; padding-left: 16px; font-size: 13px; line-height: 1.75; color: var(--ink-2); }
.vright { padding: 12px 18px; font-size: 13.5px; line-height: 1.7; }
.vright h4 { margin: 6px 0 2px; font-size: 13.5px; color: var(--table-red-deep); }
.vright h4:first-child { margin-top: 2px; }
.vright ul { margin: 0; padding-left: 18px; }
.vright li::marker { color: var(--table-red); }

.disclaimer { font-size: 11.5px; color: var(--ink-3); line-height: 1.6; padding: 4px 6px; }

.tooltip { position: fixed; z-index: 50; pointer-events: none; background: rgba(30,26,24,.92); color: #fff; font-size: 12px; line-height: 1.5; padding: 7px 10px; border-radius: 4px; white-space: nowrap; font-variant-numeric: tabular-nums; }
.tooltip[hidden] { display: none; }

/* ---------- small screens ---------- */
@media (max-width: 1100px) {
  .ov { grid-template-columns: 1fr; }
  .donut-box { max-width: 680px; width: 100%; margin: 0 auto; }
}
@media (max-width: 1200px) {
  .kpis { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 900px) {
  .topbar { height: auto; grid-template-columns: 1fr auto; grid-template-areas: "brand meta" "nav nav"; padding: 10px 14px 4px; row-gap: 6px; }
  .brand { grid-area: brand; }
  .brand img { height: 24px; }
  .top-meta { grid-area: meta; }
  .nav { grid-area: nav; overflow-x: auto; scrollbar-width: none; }
  .nav::-webkit-scrollbar { display: none; }
  .nav a { font-size: 14px; padding: 6px 12px; }
  .nav a::after { left: 12px; right: 12px; }
  .page { padding: 10px 8px 20px; gap: 10px; }
  .panel-head { padding: 14px 14px 10px; flex-wrap: wrap; }
  .panel-title h1 { font-size: 18px; }
  .panel-title h2 { font-size: 17px; }
  .ov-panel { padding: 4px 0 8px; }
  .ov-head h1 { font-size: 18px; }
  .card { padding: 10px 12px; }
  .kpis { grid-template-columns: repeat(2, 1fr); }
  .kpi { padding: 10px 12px; }
  .kpi b { font-size: 21px; }
  .donut .d-in, .donut .d-out { font-size: 16px; }
  .donut .d-side { font-size: 15px; }
  .intro-item > div { flex-direction: column; gap: 0; }
  .notes { padding: 10px 14px 12px; }
  .view-tabs { padding: 0 14px 12px; }
  .headline { margin: 0 14px 12px; }
  .vrows { padding: 0 14px 16px; }
  .vrow { grid-template-columns: 1fr; }
  .vleft { border-right: 0; border-bottom: 1px solid #f1f1f1; }
  .hold td.c-fund { min-width: 240px; }
  .hold td.c-fund small { display: block; margin-left: 0; }
}