@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;500;600&family=IBM+Plex+Sans:wght@400;500;600&display=swap');

body { margin: 0; font-family: var(--font-sans); font-size: 14px; line-height: 20px; background: var(--bg); color: var(--ink); -webkit-font-smoothing: antialiased; }
.fb-row { display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: center; padding: var(--space-4); }
.fb-stack { display: flex; flex-direction: column; gap: var(--space-3); padding: var(--space-4); }
:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }

/* numbers */
.fb-coins, .fb-delta, .fb-kpi-value, .fb-table td.is-mono, .fb-seg-count, .fb-status-code, .fb-kbd { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.fb-num-sm { font-size: 11px; line-height: 16px; }
.fb-num-md { font-size: 13px; line-height: 20px; }
.fb-num-lg { font-size: 18px; line-height: 24px; font-weight: 500; }
.fb-num-xl { font-size: 28px; line-height: 32px; font-weight: 500; letter-spacing: -0.02em; }

/* Button */
.fb-btn { display: inline-flex; align-items: center; gap: var(--space-2); font: inherit; font-weight: 500; border: 1px solid transparent; border-radius: var(--radius-md); cursor: pointer; white-space: nowrap; transition: background-color .12s, border-color .12s; }
.fb-btn-md { height: var(--control-md); padding: 0 var(--space-3); font-size: 14px; }
.fb-btn-sm { height: var(--control-sm); padding: 0 10px; font-size: 13px; }
.fb-btn-primary { background: var(--brand); color: var(--on-brand); }
.fb-btn-primary:hover { background: var(--brand-strong); }
.fb-btn-secondary { background: var(--surface-raised); border-color: var(--line-strong); color: var(--ink); }
.fb-btn-secondary:hover { border-color: var(--ink-muted); }
.fb-btn-ghost { background: transparent; color: var(--ink-muted); }
.fb-btn-ghost:hover { background: var(--surface-raised); color: var(--ink); }
.fb-btn-danger { background: var(--loss-soft); border-color: var(--loss-soft); color: var(--loss); }
.fb-btn-danger:hover { border-color: var(--loss); }
.fb-btn:disabled { opacity: .45; cursor: not-allowed; }
.fb-btn-icon { display: inline-flex; font-size: 1.05em; line-height: 1; }

/* tones shared by StatusBadge and Tag */
.fb-tone-gain { --tone: var(--gain); --tone-bg: var(--gain-soft); }
.fb-tone-loss { --tone: var(--loss); --tone-bg: var(--loss-soft); }
.fb-tone-warn { --tone: var(--warn); --tone-bg: var(--warn-soft); }
.fb-tone-info { --tone: var(--info); --tone-bg: var(--info-soft); }
.fb-tone-brand { --tone: var(--brand-text); --tone-bg: var(--surface-raised); }
.fb-tone-neutral { --tone: var(--ink-muted); --tone-bg: var(--surface-raised); }

/* StatusBadge */
.fb-status { display: inline-flex; align-items: center; gap: 6px; height: 22px; padding: 0 var(--space-2); border-radius: var(--radius-sm); background: var(--tone-bg); color: var(--tone); font-size: 11px; font-weight: 600; letter-spacing: .06em; white-space: nowrap; }
.fb-status-dot { width: 6px; height: 6px; border-radius: var(--radius-pill); background: currentColor; }
.fb-status.is-live .fb-status-dot { box-shadow: 0 0 0 0 currentColor; animation: fb-pulse 1.6s ease-out infinite; }
.fb-status-code { font-weight: 500; letter-spacing: 0; opacity: .9; padding-left: 6px; border-left: 1px solid currentColor; }
@keyframes fb-pulse { 0% { box-shadow: 0 0 0 0 currentColor; } 70%, 100% { box-shadow: 0 0 0 5px transparent; } }
@media (prefers-reduced-motion: reduce) { .fb-status.is-live .fb-status-dot { animation: none; } }

/* Tag */
.fb-tag { display: inline-flex; align-items: center; height: 20px; padding: 0 6px; border-radius: var(--radius-sm); background: var(--tone-bg); color: var(--tone); font-size: 11px; font-weight: 500; letter-spacing: .04em; white-space: nowrap; }

/* Coins */
.fb-coins { display: inline-flex; align-items: center; gap: 5px; color: var(--ink); white-space: nowrap; }
.fb-coin-glyph { flex: none; }
.fb-coin-glyph circle { fill: none; stroke: var(--warn); stroke-width: 1.5; }
.fb-coin-glyph path { fill: none; stroke: var(--warn); stroke-width: 1.4; stroke-linecap: round; }

/* Delta */
.fb-delta { white-space: nowrap; }
.fb-delta-gain { color: var(--gain); }
.fb-delta-loss { color: var(--loss); }
.fb-delta-flat { color: var(--ink-muted); }

/* Sparkline */
.fb-spark { display: block; overflow: visible; }
.fb-spark-line { fill: none; stroke-width: 1.5; stroke-linejoin: round; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.fb-spark-area { stroke: none; opacity: .12; }
.fb-spark-brand .fb-spark-line { stroke: var(--chart-1); } .fb-spark-brand .fb-spark-area { fill: var(--chart-1); }
.fb-spark-info .fb-spark-line { stroke: var(--chart-2); } .fb-spark-info .fb-spark-area { fill: var(--chart-2); }
.fb-spark-gain .fb-spark-line { stroke: var(--gain); } .fb-spark-gain .fb-spark-area { fill: var(--gain); }
.fb-spark-loss .fb-spark-line { stroke: var(--loss); } .fb-spark-loss .fb-spark-area { fill: var(--loss); }

/* KpiCard */
.fb-kpi { display: flex; flex-direction: column; gap: 6px; min-width: 0; padding: var(--space-4); background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); }
.fb-kpi-label { font-size: 11px; line-height: 16px; font-weight: 500; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-muted); }
.fb-kpi-row { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--space-3); }
.fb-kpi-value { font-size: 28px; line-height: 32px; font-weight: 500; letter-spacing: -0.02em; color: var(--ink); white-space: nowrap; }
.fb-kpi-value .fb-coins { font-size: inherit; line-height: inherit; }
.fb-kpi-value .fb-coin-glyph { width: 16px; height: 16px; }
.fb-kpi-foot { display: flex; align-items: center; gap: var(--space-2); }
.fb-kpi-hint { font-size: 11px; line-height: 16px; color: var(--ink-subtle); }

/* Input */
.fb-input { display: inline-flex; align-items: center; gap: var(--space-2); padding: 0 var(--space-3); background: var(--surface-sunken); border: 1px solid var(--line-strong); border-radius: var(--radius-md); color: var(--ink-muted); }
.fb-input-md { height: var(--control-md); } .fb-input-sm { height: var(--control-sm); }
.fb-input:focus-within { border-color: var(--focus-ring); box-shadow: 0 0 0 1px var(--focus-ring); }
.fb-input input { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; color: var(--ink); font: inherit; font-size: 14px; }
.fb-input input::placeholder { color: var(--ink-subtle); }
.fb-input-icon circle, .fb-input-icon path { fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; }
.fb-kbd { font-size: 11px; line-height: 16px; padding: 0 5px; border: 1px solid var(--line-strong); border-radius: var(--radius-sm); color: var(--ink-muted); }

/* SegmentedControl */
.fb-seg { display: inline-flex; gap: 2px; padding: 3px; background: var(--surface-sunken); border: 1px solid var(--line); border-radius: var(--radius-md); }
.fb-seg-item { display: inline-flex; align-items: center; gap: 6px; height: 26px; padding: 0 10px; border: 0; border-radius: 4px; background: transparent; color: var(--ink-muted); font: inherit; font-size: 13px; font-weight: 500; cursor: pointer; }
.fb-seg-item:hover { color: var(--ink); }
.fb-seg-item.is-on { background: var(--surface-raised); color: var(--ink); box-shadow: 0 0 0 1px var(--line-strong); }
.fb-seg-sm .fb-seg-item { height: 22px; padding: 0 8px; font-size: 12px; }
.fb-seg-count { font-size: 11px; color: var(--ink-subtle); }
.fb-seg-item.is-on .fb-seg-count { color: var(--brand-text); }

/* DataTable */
.fb-table-wrap { overflow: auto; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); }
.fb-table { width: 100%; border-collapse: collapse; font-size: 13px; line-height: 18px; }
.fb-table th { position: sticky; top: 0; z-index: 1; height: 32px; padding: 0 var(--space-3); background: var(--surface-raised); border-bottom: 1px solid var(--line); text-align: left; font-size: 11px; font-weight: 500; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-muted); white-space: nowrap; }
.fb-table th.is-sorted { color: var(--ink); }
.fb-table td { height: var(--row-height); padding: 0 var(--space-3); border-bottom: 1px solid var(--line); color: var(--ink); white-space: nowrap; }
.fb-table-dense td { height: 32px; }
.fb-table tbody tr:last-child td { border-bottom: 0; }
.fb-table .is-right { text-align: right; }
.fb-table tbody tr.is-clickable { cursor: pointer; }
.fb-table tbody tr:hover td { background: var(--surface-raised); }
.fb-table tbody tr.is-selected td { background: var(--surface-raised); box-shadow: inset 0 -1px 0 var(--line-strong); }
.fb-table-empty { text-align: center; color: var(--ink-muted); height: 96px !important; }
.fb-muted { color: var(--ink-muted); }
.fb-subtle { color: var(--ink-subtle); }