:root {
  --color-fg: #1c2530; --color-fg-muted: #5b6876; --color-bg: #f6f8fa; --color-panel: #ffffff; --color-border-line: #dde3ea;
  --color-ok: #17794a; --color-bad: #b3372f;
  --font-anthropic-sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-anthropic-serif: Georgia, "Times New Roman", serif;
  --cds-font-size-caption: 0.8125rem; --cds-font-size-body: 0.9375rem; --cds-font-size-heading: 1.125rem; --cds-font-size-title: 1.75rem;
  --cds-font-weight-medium: 600;
  --cds-gap-xs: 4px; --cds-gap-sm: 8px; --cds-gap-md: 12px; --cds-gap-lg: 20px; --cds-gap-xl: 36px;
  --cds-pad-sm: 8px; --cds-pad-lg: 20px; --cds-radius: 8px;
  --cds-chart-grid: #e6ebf0; --cds-chart-axis: #c3ccd6; --cds-text-secondary: #5b6876;
  --cds-surface-popover: #ffffff; --cds-border: #dde3ea; --cds-shadow-popover: 0 4px 16px rgba(20, 30, 45, .14);
  --s0: #1f5f8b; --s1: #c9772b; --s2: #6aa6c9; --s3: #5d6b7a;
}
@media (prefers-color-scheme: dark) {
  :root {
    color-scheme: dark;
    --color-fg: #e8edf2; --color-fg-muted: #9aa7b5; --color-bg: #12171d; --color-panel: #1a2129; --color-border-line: #2c3642;
    --color-ok: #5fcf96; --color-bad: #f0877e;
    --cds-chart-grid: #26303b; --cds-chart-axis: #3a4654; --cds-text-secondary: #9aa7b5;
    --cds-surface-popover: #222b35; --cds-border: #34404d; --cds-shadow-popover: 0 4px 16px rgba(0, 0, 0, .5);
    --s0: #5aa5d6; --s1: #e39a55; --s2: #9cc8e3; --s3: #8a98a8;
  }
}
html { font-size: 16px; }
body { margin: 0; background: var(--color-bg); color: var(--color-fg); font-family: var(--font-anthropic-sans); font-size: var(--cds-font-size-body); line-height: 1.45; }
.pf-page { max-width: 1080px; margin: 0 auto; padding-block: 32px 48px; padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)); }
.pf-live { margin: 0; display: flex; align-items: center; gap: 8px; font-size: var(--cds-font-size-caption); color: var(--color-fg-muted); font-variant-numeric: tabular-nums; }
.pf-live-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--color-ok); flex: none; }
.pf-live-off .pf-live-dot { background: var(--color-bad); }
.pf-export { margin: 28px 0 0; font-size: var(--cds-font-size-caption); color: var(--color-fg-muted); }
[hidden] { display: none !important; }

.pf { display: flex; flex-direction: column; gap: var(--cds-gap-xl); font-family: var(--font-anthropic-sans); color: var(--color-fg); }
.pf-head { display: flex; flex-direction: column; gap: var(--cds-gap-sm); }
.pf-title { font-family: var(--font-anthropic-serif); font-weight: 400; font-size: var(--cds-font-size-title); margin: 0; text-wrap: balance; }
.pf-lede { margin: 0; font-size: var(--cds-font-size-body); max-width: 65ch; }
.pf-meta { margin: 0; font-size: var(--cds-font-size-caption); color: var(--color-fg-muted); }
.pf-num { font-variant-numeric: tabular-nums; }
.pf-total { font-family: var(--font-anthropic-serif); font-weight: 400; font-size: 2.4rem; line-height: 1.1; font-variant-numeric: tabular-nums; }
.pf-h2 { font-size: var(--cds-font-size-heading); font-weight: var(--cds-font-weight-medium); margin: 0; text-wrap: balance; }
.pf-sec { display: flex; flex-direction: column; gap: var(--cds-gap-md); min-width: 0; }
.pf-note { margin: 0; font-size: var(--cds-font-size-caption); color: var(--color-fg-muted); max-width: 70ch; }
.pf-split { position: relative; display: flex; height: 28px; border-radius: var(--cds-radius); overflow: hidden; background: var(--color-panel); min-height: 28px; }
.pf-split-seg { height: 100%; }
.pf-splitbox { position: relative; min-height: 28px; }
.pf-layers { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: var(--cds-gap-lg); }
.pf-card { background: var(--color-panel); border: 1px solid var(--color-border-line); border-radius: var(--cds-radius); padding: var(--cds-pad-lg); display: flex; flex-direction: column; gap: var(--cds-gap-md); min-width: 0; }
.pf-card-top { display: flex; align-items: baseline; justify-content: space-between; gap: var(--cds-gap-sm); flex-wrap: wrap; }
.pf-label { display: flex; align-items: center; gap: var(--cds-gap-sm); font-size: var(--cds-font-size-body); font-weight: var(--cds-font-weight-medium); }
.pf-sw { width: 10px; height: 10px; border-radius: 2px; display: inline-block; flex: none; }
.pf-big { font-family: var(--font-anthropic-serif); font-weight: 400; font-size: 1.7rem; font-variant-numeric: tabular-nums; }
.pf-share { font-size: var(--cds-font-size-body); color: var(--color-fg-muted); font-variant-numeric: tabular-nums; }
.pf-bars { display: flex; flex-direction: column; gap: var(--cds-gap-sm); min-height: 60px; }
.pf-bar-row { display: grid; grid-template-columns: 1fr auto; gap: 2px var(--cds-gap-sm); font-size: var(--cds-font-size-caption); }
.pf-bar-name { min-width: 0; overflow-wrap: anywhere; }
.pf-bar-val { font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap; }
.pf-bar-val small { color: var(--color-fg-muted); font-size: inherit; }
.pf-bar-track { grid-column: 1 / -1; height: 6px; border-radius: 3px; background: var(--cds-chart-grid); overflow: hidden; }
.pf-bar-fill { height: 100%; border-radius: 3px; }
.pf-ladderbox { position: relative; min-height: 240px; }
.pf-ladderbox svg { display: block; width: 100%; height: 240px; }
.pf-ladderbox svg text { font-family: var(--font-anthropic-sans); font-size: var(--cds-font-size-caption); fill: var(--cds-text-secondary); font-variant-numeric: tabular-nums; }
.pf-legend { display: flex; flex-wrap: wrap; gap: var(--cds-gap-md); font-size: var(--cds-font-size-caption); color: var(--color-fg-muted); }
.pf-legend span { display: inline-flex; align-items: center; gap: var(--cds-gap-xs); }
.pf-tip { position: absolute; pointer-events: none; background: var(--cds-surface-popover); border: 1px solid var(--cds-border); box-shadow: var(--cds-shadow-popover); border-radius: var(--cds-radius); padding: var(--cds-pad-sm); font-size: var(--cds-font-size-caption); color: var(--color-fg); white-space: nowrap; z-index: 2; font-variant-numeric: tabular-nums; }
.pf-tip b { font-weight: var(--cds-font-weight-medium); }
.pf-tip span { color: var(--cds-text-secondary); }
.pf-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: var(--cds-gap-md); }
.pf-kpi { display: flex; flex-direction: column; gap: 2px; }
.pf-kpi-l { font-size: var(--cds-font-size-caption); color: var(--color-fg-muted); }
.pf-kpi-v { font-size: var(--cds-font-size-heading); font-variant-numeric: tabular-nums; }
.pf-tablewrap { overflow-x: auto; min-width: 0; }
.pf-table { border-collapse: collapse; width: 100%; font-size: var(--cds-font-size-caption); font-variant-numeric: tabular-nums; }
.pf-table th { text-align: left; font-weight: var(--cds-font-weight-medium); color: var(--color-fg-muted); padding: var(--cds-pad-sm); border-bottom: 1px solid var(--color-border-line); white-space: nowrap; }
.pf-table td { padding: var(--cds-pad-sm); border-bottom: 1px solid var(--color-border-line); vertical-align: top; }
.pf-table .pf-r { text-align: right; white-space: nowrap; }
.pf-table .pf-pos { min-width: 170px; }
.pf-sub { display: block; color: var(--color-fg-muted); }
.pf-up { color: var(--color-ok); }
.pf-down { color: var(--color-bad); }
.pf [data-dash-source-state=refreshing] { opacity: .5; }

.pf-topbar { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.pf-btn { font: inherit; font-weight: var(--cds-font-weight-medium); padding: 9px 16px; border-radius: var(--cds-radius); border: 1px solid var(--s0); background: var(--s0); color: #fff; cursor: pointer; }
.pf-btn:hover { filter: brightness(1.08); }
.pf-btn:focus-visible, .pf-tab:focus-visible, .pf-field input:focus-visible, .pf-field select:focus-visible, summary:focus-visible { outline: 2px solid var(--s0); outline-offset: 2px; }
.pf-btn-quiet { background: transparent; color: var(--color-fg); border-color: var(--color-border-line); font-weight: 400; padding: 6px 12px; font-size: var(--cds-font-size-caption); }
.pf-tabs { display: flex; flex-wrap: wrap; gap: 6px; }
.pf-tab { font: inherit; font-size: var(--cds-font-size-caption); padding: 6px 12px; border-radius: 999px; border: 1px solid var(--color-border-line); background: var(--color-panel); color: var(--color-fg); cursor: pointer; }
.pf-tab[aria-pressed="true"] { background: var(--s0); border-color: var(--s0); color: #fff; }
.pf-sw-0 { background: var(--s0); } .pf-sw-1 { background: var(--s1); } .pf-sw-3 { background: var(--s3); }
.pf-form { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: var(--cds-gap-md); align-items: end; }
.pf-field { display: flex; flex-direction: column; gap: 4px; font-size: var(--cds-font-size-caption); color: var(--color-fg-muted); min-width: 0; }
.pf-field-wide { grid-column: span 2; }
@media (max-width: 480px) { .pf-field-wide { grid-column: auto; } }
.pf-field input, .pf-field select { font: inherit; font-size: var(--cds-font-size-body); color: var(--color-fg); background: var(--color-bg); border: 1px solid var(--color-border-line); border-radius: 6px; padding: 8px 10px; min-width: 0; width: 100%; box-sizing: border-box; }
.pf-form-foot { grid-column: 1 / -1; display: flex; align-items: center; gap: var(--cds-gap-md); flex-wrap: wrap; }
.pf-msg { font-size: var(--cds-font-size-caption); color: var(--color-fg-muted); }
.pf-msg-bad { color: var(--color-bad); } .pf-msg-ok { color: var(--color-ok); }
.pf-details summary { cursor: pointer; font-size: var(--cds-font-size-body); padding: 6px 0; }
.pf-details[open] summary { margin-bottom: var(--cds-gap-sm); }
.pf-note a { color: inherit; }
.pf-login { max-width: 380px; margin: 12vh auto 0; padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)); display: flex; flex-direction: column; gap: var(--cds-gap-lg); }
.pf-login .pf-form { grid-template-columns: 1fr; }
.pf-page > .pf-sec { margin-top: var(--cds-gap-xl); }