/* ═══ DESIGN SYSTEM ═══ */
:root {
  --bg: #080a0f;
  --bg-elevated: #0c111a;
  --sf: #0c111a;
  --sf2: #101722;
  --bd: #1c2533;
  --bd2: #2a3546;
  --tx: #e6edf3;
  --tx2: #c5cdd8;
  --mt: #8b95a5;
  --ac: #4f8cff;
  --ac2: #7aa7ff;
  --gn: #3dd68c;
  --gn2: #5ee0a0;
  --rd: #f07178;
  --rd2: #f59a9f;
  --yl: #e6b450;
  --fd: #4f8cff;
  --fd2: #7aa7ff;
  --glass: rgba(8, 10, 15, 0.86);
  --glass-border: rgba(230,237,243,0.08);
  --shadow: none;
  --shadow-lg: none;
  --radius: 2px;
  --radius-lg: 2px;
  --mono: ui-monospace, SFMono-Regular, "Cascadia Mono", Menlo, Consolas, monospace;
}
.light {
  --bg: #f5f5f7;
  --bg-elevated: #eeeef0;
  --sf: #ffffff;
  --sf2: #f8f8fa;
  --bd: #e2e2ea;
  --bd2: #d4d4dc;
  --tx: #1a1a2e;
  --tx2: #3a3a50;
  --mt: #6b6b80;
  --ac: #2563eb;
  --ac2: #1d4ed8;
  --gn: #16a34a;
  --gn2: #15803d;
  --rd: #dc2626;
  --rd2: #b91c1c;
  --yl: #ca8a04;
  --fd: #2563eb;
  --fd2: #1d4ed8;
  --glass: rgba(255,255,255,0.8);
  --glass-border: rgba(0,0,0,0.06);
  --shadow: 0 4px 24px rgba(0,0,0,0.06);
  --shadow-lg: 0 8px 40px rgba(0,0,0,0.1);
}

/* ═══ BASE ═══ */
*{margin:0;padding:0;box-sizing:border-box}
body{background:var(--bg);color:var(--tx);font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;min-height:100vh;-webkit-font-smoothing:antialiased}
a{color:var(--ac);text-decoration:none;transition:color .15s}
a:hover{color:var(--ac2)}

/* ═══ SKELETON LOADING ═══ */
@keyframes shimmer {
  0%{background-position:-200px 0}
  100%{background-position:calc(200px + 100%) 0}
}
.skeleton{
  background:linear-gradient(90deg,var(--sf) 25%,var(--sf2) 50%,var(--sf) 75%);
  background-size:200px 100%;
  animation:shimmer 1.5s ease-in-out infinite;
  border-radius:8px;
}
.skeleton-card{height:100px;border-radius:var(--radius)}
.skeleton-chart{height:320px;border-radius:var(--radius)}
.skeleton-table{height:400px;border-radius:var(--radius)}
.loading-overlay{position:fixed;inset:0;background:var(--bg);display:flex;align-items:center;justify-content:center;z-index:1000;flex-direction:column;gap:20px;transition:opacity .4s,visibility .4s}
.loading-overlay.hidden{opacity:0;visibility:hidden;pointer-events:none}

/* Skeleton grid for initial load */
.skeleton-grid{width:100%;max-width:1600px;padding:20px 24px}
.skeleton-summary{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:12px;margin-bottom:20px}
.skeleton-charts{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-bottom:20px}
.skeleton-charts .skeleton:first-child{grid-column:1/-1}

.load-status{font-size:.8rem;color:var(--mt);letter-spacing:.3px}

/* ═══ HEADER ═══ */
.header{
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:10px 20px;
  border-bottom:1px solid var(--glass-border);
  background:var(--glass);
  backdrop-filter:blur(20px);
  -webkit-backdrop-filter:blur(20px);
  position:sticky;top:0;z-index:100;
}
.header h1{
  font-size:1.15rem;font-weight:700;
  letter-spacing:-.02em;
  color:var(--tx);
}
.header-actions{display:flex;gap:8px;align-items:center;flex-shrink:0}

/* ═══ BUTTONS ═══ */
.btn{
  padding:7px 16px;border-radius:8px;
  border:1px solid var(--bd);background:var(--sf);color:var(--tx);
  cursor:pointer;font-size:.8rem;font-weight:500;
  transition:all .2s ease;letter-spacing:.01em;
  display:inline-flex;align-items:center;gap:6px;
}
.btn:hover{border-color:var(--ac);color:var(--ac)}
.btn-primary{
  background:#2E5CFF;
  color:#fff;border-color:transparent;
}
.btn-primary:hover{filter:brightness(1.08)}

/* ═══ CONTAINER ═══ */
.container{max-width:1600px;margin:0 auto;padding:20px 28px}

/* ═══ SUMMARY CARDS ═══ */
.summary-bar{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(175px,1fr));
  gap:12px;margin-bottom:24px;
}
.card{
  background:var(--sf);
  border:1px solid var(--glass-border);
  border-radius:var(--radius);
  padding:14px 16px 12px;
  position:relative;
  overflow:hidden;
}
.card::before{
  content:'';position:absolute;left:0;right:0;top:0;height:1px;
  background:rgba(230,237,243,.08);
}
.card-accent-green::before{background:rgba(61,214,140,.55)}
.card-accent-red::before{background:rgba(240,113,120,.55)}
.card-accent-purple::before{background:rgba(79,140,255,.55)}
.card-accent-blue::before{background:rgba(79,140,255,.55)}
.card-accent-yellow::before{background:rgba(230,180,80,.55)}
.card-accent-neutral::before{background:rgba(139,149,165,.35)}
.card-label{
  font-size:.62rem;color:var(--mt);
  text-transform:uppercase;letter-spacing:.14em;
  margin-bottom:8px;font-weight:600;
}
.card-value{font-size:1.28rem;font-weight:650;letter-spacing:-.03em;line-height:1.15;font-variant-numeric:tabular-nums;font-family:var(--mono)}
.card-sub{font-size:.7rem;color:var(--mt);margin-top:4px;line-height:1.4}
.card-sub-2{font-size:.65rem;color:var(--mt);opacity:.75;margin-top:2px;line-height:1.3}
/* Period-context caption that pins to the bottom of every card so the
   user can tell at a glance which window the value is for. Subtle on
   purpose — it should answer "what window is this?" without competing
   with the headline value. The leading dot+border treatment mimics
   a legend chip ("• Period: Since Jan 1, 2026") rather than another
   stat row. */
.card-period{
  margin-top:8px;padding-top:6px;
  border-top:1px dashed rgba(255,255,255,.06);
  font-size:.62rem;color:var(--mt);opacity:.7;
  letter-spacing:.3px;line-height:1.25;
  text-transform:uppercase;font-weight:500;
}
.card-period .card-period-val{color:var(--tx);opacity:.85;text-transform:none;letter-spacing:0;font-weight:600}
.positive{color:var(--gn)}.negative{color:var(--rd)}

/* Privacy mode — see the matching block in app.css for the rationale.
   Mirrored here so /performance can stand on its own without app.css. */
.priv-num{transition:color .15s ease;position:relative;display:inline-block}
html.priv-on .priv-num,
body.priv-on .priv-num{
  color:transparent!important;
  user-select:none;
  cursor:default;
}
html.priv-on .priv-num::after,
body.priv-on .priv-num::after{
  content:"––––";
  color:var(--tx);
  position:absolute;
  inset:0;
  display:inline-flex;
  align-items:center;
  justify-content:flex-start;
  font-family:ui-monospace,SFMono-Regular,"Cascadia Mono",Menlo,Consolas,monospace;
  font-variant-numeric:tabular-nums;
  font-weight:600;
  letter-spacing:.14em;
  opacity:.62;
}
html.priv-obf-on:not(.priv-on) .priv-num,
body.priv-obf-on:not(.priv-on) .priv-num,
html.priv-obf-on:not(.priv-on) .obf-num,
body.priv-obf-on:not(.priv-on) .obf-num{
  color:transparent!important;
  font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;
  letter-spacing:-.02em;
}
html.priv-obf-on:not(.priv-on) .priv-num::after,
body.priv-obf-on:not(.priv-on) .priv-num::after,
html.priv-obf-on:not(.priv-on) .obf-num::after,
body.priv-obf-on:not(.priv-on) .obf-num::after{
  content:attr(data-obf);
  color:var(--priv-obf-fg,var(--tx));
  position:absolute;
  inset:0;
  display:inline-flex;
  align-items:center;
  justify-content:flex-start;
  font-family:ui-monospace,SFMono-Regular,"Cascadia Mono",Menlo,Consolas,monospace;
  font-variant-numeric:tabular-nums;
  letter-spacing:-.02em;
}
html.priv-on .venue-bal .priv-num,
html.priv-obf-on .venue-bal .priv-num,
body.priv-on .venue-bal .priv-num,
body.priv-obf-on .venue-bal .priv-num{
  color:inherit!important;
  font-family:inherit;
  letter-spacing:inherit;
  user-select:none;
  cursor:default;
}
html.priv-obf-on:not(.priv-on) .priv-num.positive::after,
body.priv-obf-on:not(.priv-on) .priv-num.positive::after{
  color:var(--gn);
}
html.priv-obf-on:not(.priv-on) .priv-num.negative::after,
body.priv-obf-on:not(.priv-on) .priv-num.negative::after{
  color:var(--rd);
}
html.priv-on .venue-bal .priv-num::after,
html.priv-obf-on .venue-bal .priv-num::after,
body.priv-on .venue-bal .priv-num::after,
body.priv-obf-on .venue-bal .priv-num::after{
  content:none!important;
}
.btn-priv.on{background:rgba(79,140,255,.18);border-color:var(--ac);color:var(--ac)}
.btn-obf.on{background:rgba(88,166,255,.16);border-color:rgba(88,166,255,.7);color:var(--ac)}

/* ═══ FILTERS ═══ */
.filters{
  display:flex;gap:12px;margin-bottom:20px;flex-wrap:wrap;align-items:center;
  padding:12px 16px;
  background:var(--sf);border:1px solid var(--glass-border);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
}
.filter-group{display:flex;gap:6px;align-items:center}
.filter-group label{font-size:.75rem;color:var(--mt);font-weight:500}
.venue-tag{
  display:inline-block;font-size:10px;font-weight:700;letter-spacing:.02em;
  padding:1px 6px;border-radius:4px;margin-right:6px;vertical-align:middle;
  border:1px solid var(--bd);color:var(--mt);background:transparent;
}
a.venue-tag-link{text-decoration:none;cursor:pointer}
a.venue-tag-link:hover{filter:brightness(1.18)}
.venue-break{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin:-8px 0 16px;
}
.venue-break-card{
  min-width:0;padding:12px 14px;border-radius:var(--radius);
  border:1px solid var(--glass-border);background:var(--sf);
}
.venue-break-card .vb-name{font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;margin-bottom:10px}
.venue-break-card .vb-pnl{font-size:1.05rem;font-weight:700;font-variant-numeric:tabular-nums;font-family:var(--mono)}
.venue-break-card .vb-sub{font-size:11px;color:var(--mt);margin-top:10px;padding-top:8px;border-top:1px solid rgba(230,237,243,.06)}
.vb-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px 12px}
.vb-k{font-size:10px;color:var(--mt);letter-spacing:.08em;text-transform:uppercase;margin-bottom:4px}
.vb-v{font-size:13px;font-weight:650;font-variant-numeric:tabular-nums;font-family:var(--mono);line-height:1.2;overflow-wrap:anywhere}
select,input[type=number],input[type=date]{
  padding:6px 10px;border-radius:8px;
  border:1px solid var(--bd);background:var(--bg);color:var(--tx);
  font-size:.8rem;transition:border-color .2s;outline:none;
}
.section-filters{
  display:flex;gap:10px 14px;flex-wrap:wrap;align-items:center;
  padding:8px 2px 12px;
}
.tabs-container .section-filters{
  padding:8px 14px 12px;
  border-bottom:1px solid var(--glass-border);
}
.section-filters .filter-group label{min-width:auto}
.section-filters select{min-width:8.5rem}
.section-filters input[type=date]{min-width:9.5rem;color-scheme:dark}
.light .section-filters input[type=date]{color-scheme:light}
#periodSelect{min-width:12rem}
#filterType{min-width:12rem}
select:focus,input[type=number]:focus{border-color:var(--ac)}
.preset-btn{
  padding:5px 12px;border-radius:8px;border:1px solid var(--bd);
  background:transparent;color:var(--mt);cursor:pointer;
  font-size:.76rem;font-weight:500;transition:all .2s;
}
.preset-btn.active,.preset-btn:hover{
  border-color:var(--ac);color:var(--tx);
  background:rgba(79,140,255,.1);
}

/* ═══ CHARTS ═══ */
.charts-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-bottom:24px}
.chart-card{
  background:var(--sf);
  border:1px solid var(--glass-border);
  border-radius:var(--radius);
  padding:16px 18px;
}
.chart-card h3{
  font-size:.82rem;font-weight:600;margin-bottom:12px;color:var(--mt);
  text-transform:uppercase;letter-spacing:.5px;
  display:flex;align-items:center;gap:8px;
}
.chart-card h3 .chart-icon{font-size:1rem}
.chart-card.full{grid-column:1/-1}
.chart-wrap{position:relative;height:320px}

/* ═══ TABS ═══ */
.tabs-container{
  background:var(--sf);
  border:1px solid var(--glass-border);
  border-radius:var(--radius-lg) var(--radius-lg) 0 0;
  box-shadow:var(--shadow);
  overflow:hidden;
}
.tabs{
  display:flex;gap:0;
  border-bottom:1px solid var(--bd);
  padding:0 8px;
}
.tab{
  padding:12px 20px;cursor:pointer;
  font-size:.82rem;font-weight:500;color:var(--mt);
  border-bottom:2px solid transparent;margin-bottom:-1px;
  transition:all .2s;
  display:flex;align-items:center;gap:6px;
}
.tab.active{color:var(--ac);border-bottom-color:var(--ac)}
.tab:hover{color:var(--tx)}
.tab .tab-icon{font-size:.95rem}
.tab .badge-count{
  background:var(--bg);color:var(--mt);
  font-size:.68rem;font-weight:600;
  padding:2px 7px;border-radius:10px;
}
.tab.active .badge-count{background:rgba(79,140,255,.15);color:var(--ac)}

.tab-actions{
  display:flex;align-items:center;gap:8px;
  margin-left:auto;padding:8px 12px;
}

/* ═══ TABLE ═══ */
.table-container{
  background:var(--sf);
  border:1px solid var(--glass-border);
  border-top:none;
  border-radius:0 0 var(--radius-lg) var(--radius-lg);
  overflow:auto;max-height:320px;
}
table{width:100%;border-collapse:collapse;font-size:.8rem}
th{
  position:sticky;top:0;z-index:10;
  background:var(--sf2);
  padding:10px 12px;text-align:left;
  font-weight:600;color:var(--mt);
  border-bottom:1px solid var(--bd);
  cursor:pointer;white-space:nowrap;user-select:none;
  font-size:.73rem;text-transform:uppercase;letter-spacing:.5px;
  transition:color .15s;
}
th:hover{color:var(--ac)}
th::after{content:' ↕';font-size:.55rem;opacity:.25;color:var(--mt)}
th.sorted-asc::after{content:' ▲';font-size:.6rem;color:var(--ac);opacity:1}
th.sorted-desc::after{content:' ▼';font-size:.6rem;color:var(--ac);opacity:1}
th:hover::after{opacity:.7;color:var(--ac)}
td{padding:9px 12px;border-bottom:1px solid var(--glass-border);white-space:nowrap;transition:background .15s}
tr:nth-child(even){background:rgba(255,255,255,.01)}
.light tr:nth-child(even){background:rgba(0,0,0,.015)}
tr:hover{background:rgba(79,140,255,.05) !important}
.badge{display:inline-block;padding:3px 8px;border-radius:6px;font-size:.72rem;font-weight:600}
.badge-win{background:rgba(34,197,94,.1);color:var(--gn)}
.badge-loss{background:rgba(239,68,68,.1);color:var(--rd)}
.badge-flat{background:rgba(148,163,184,.12);color:var(--mt)}
.badge-maker{background:rgba(79,140,255,.1);color:var(--ac)}
.badge-taker{background:rgba(234,179,8,.1);color:var(--yl)}

/* Market column: separates the line label (BOS -7.5) from the
   matchup (LAL vs OKC), rendering the matchup as small grey context. */
.market-matchup{
  color:var(--mt);
  font-size:.78em;
  font-weight:400;
  margin-left:4px;
  letter-spacing:.01em;
}
/* Position column: "20,000 YES" with side colored as a chip. */
.position-cell{display:inline-flex;align-items:center;gap:6px;font-variant-numeric:tabular-nums}
.position-qty{color:var(--tx);font-weight:600}
.side-tag{
  display:inline-block;padding:1px 6px;border-radius:4px;
  font-size:.66rem;font-weight:700;letter-spacing:.04em;
  border:1px solid transparent;
}
.side-yes{background:rgba(34,197,94,.12);color:var(--gn);border-color:rgba(34,197,94,.25)}
.side-no{background:rgba(239,68,68,.12);color:var(--rd);border-color:rgba(239,68,68,.25)}
.side-flat{background:rgba(107,107,128,.12);color:var(--mt);border-color:rgba(107,107,128,.25)}
.perf-hedge{color:var(--mt);font-weight:600;font-size:10px;margin-left:8px;letter-spacing:.2px}
.perf-net-money{color:var(--mt);font-weight:600;font-size:10px;margin-left:8px;letter-spacing:.2px}
.perf-odds{color:var(--mt);font-variant-numeric:tabular-nums;white-space:nowrap;font-size:.82em}
.game-cat:hover{background:rgba(79,140,255,.07) !important}
.game-mkt td:first-child{color:var(--tx)}
.side-both{background:rgba(234,179,8,.12);color:var(--yl);border-color:rgba(234,179,8,.25)}
.pagination{display:flex;justify-content:center;gap:4px;padding:12px}
.page-btn{
  padding:4px 10px;border-radius:6px;
  border:1px solid var(--bd);background:transparent;
  color:var(--mt);cursor:pointer;font-size:.75rem;
  transition:all .15s;
}
.page-btn.active{background:var(--ac);color:#fff;border-color:var(--ac)}
.page-btn:hover:not(.active){border-color:var(--ac);color:var(--ac)}
.no-data{text-align:center;padding:50px;color:var(--mt);font-size:.85rem}
.table-footer{padding:8px 14px;color:var(--mt);font-size:.76rem;border-top:1px solid var(--glass-border);display:flex;justify-content:space-between;align-items:center}

/* Settled table — per-event group header rows */
.settled-event-row>td{
  background:rgba(79,140,255,.08) !important;
  padding:7px 14px;
  border-top:1px solid var(--glass-border);
}
.light .settled-event-row>td{background:rgba(79,140,255,.06) !important}
.settled-event-title{font-weight:700;font-size:.82rem;color:var(--tx)}
.settled-event-date{color:var(--mt);font-size:.74rem;margin-left:8px}
.settled-event-money{float:right;display:inline-flex;align-items:baseline;gap:12px;font-size:.8rem}
.settled-event-cost{color:var(--mt);font-weight:600}
.settled-event-pnl{font-weight:700}

/* Settled table — expand row for per-order fills */
.settled-parent{cursor:pointer}
.settled-parent:hover{background:rgba(79,140,255,.07) !important}
.settled-open{background:rgba(79,140,255,.04)}
.settled-caret{display:inline-block;width:14px;color:var(--mt);font-size:10px;margin-right:5px;vertical-align:middle}
.settled-fill-row>td{padding:0 !important;background:rgba(0,0,0,.14)}
.light .settled-fill-row>td{background:rgba(0,0,0,.04)}
.settled-fill-panel{padding:12px 16px}
.settled-fill-panel-title{font-size:.68rem;color:var(--mt);text-transform:uppercase;letter-spacing:.6px;margin-bottom:10px;font-weight:600}
.fill-order-block{margin-bottom:14px}
.fill-order-block:last-child{margin-bottom:0}
.fill-order-head{font-size:.74rem;font-weight:600;color:var(--tx2);margin-bottom:6px}
.fill-mini-table{width:100%;font-size:.72rem;border-collapse:collapse}
.fill-mini-table th{
  position:static;background:var(--sf2);padding:6px 8px;font-size:.68rem;
  border-bottom:1px solid var(--bd);cursor:default;
}
.fill-mini-table th::after{content:none}
.fill-mini-table td{padding:5px 8px;border-bottom:1px solid var(--glass-border)}
.fill-mini-table .muted-txt,.muted-txt{color:var(--mt);font-size:.72rem}
.game-cat-row{cursor:pointer}
.game-cat-row:hover td{background:rgba(79,140,255,.07) !important}
.game-cat-row.is-open td{background:rgba(79,140,255,.04)}
.game-markets-panel{padding:8px 16px 12px 34px}
.perf-avg-odds{color:var(--mt);font-weight:400;font-size:.72rem;margin-left:4px}
.settled-fill-panel.err{color:var(--rd);padding:12px 16px}
td.num{font-variant-numeric:tabular-nums;text-align:right}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
.fade-in{animation:fadeIn .25s ease forwards}
.delay-1{animation-delay:.05s;opacity:0}
.delay-2{animation-delay:.1s;opacity:0}
.delay-3{animation-delay:.15s;opacity:0}
.delay-4{animation-delay:.2s;opacity:0}

/* ═══ RESPONSIVE ═══ */
@media(max-width:1100px){
  .charts-grid{grid-template-columns:1fr}
  .summary-bar{grid-template-columns:repeat(auto-fit,minmax(150px,1fr))}
  .venue-break{grid-template-columns:1fr}
}
@media(max-width:600px){
  .header{padding:12px 16px}
  .container{padding:16px}
  .summary-bar{grid-template-columns:repeat(2,1fr);gap:8px}
  .filters{padding:10px 12px;gap:8px}
  .tab{padding:10px 12px;font-size:.78rem}
  .vb-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}

/* ═══ SCROLLBAR ═══ */
::-webkit-scrollbar{width:6px;height:6px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:var(--bd);border-radius:3px}
::-webkit-scrollbar-thumb:hover{background:var(--bd2)}

/* P&L by Sport / by Market Type — capped height, scroll inside card */
.card-list-scroll{
  max-height:320px;
  overflow:auto;
  padding:4px 0;
}

/* ═══ EXPORT BTN ═══ */
.export-btn{
  padding:5px 12px;border-radius:6px;
  border:1px solid var(--bd);background:transparent;
  color:var(--mt);cursor:pointer;font-size:.74rem;font-weight:500;
  transition:all .2s;display:flex;align-items:center;gap:4px;
}
.export-btn:hover{border-color:var(--gn);color:var(--gn)}

/* Breakdown rows — Volume / Fees / ROI / P&L. minmax keeps eight-figure
   money cells from colliding the way the old 90px flex cells did. */
.bdr-head,.bdr-row{
  display:grid;
  grid-template-columns:minmax(88px,1.3fr) repeat(4,minmax(80px,1fr));
  gap:10px;
  padding:7px 4px;
  align-items:center;
  min-width:520px;
}
.bdr-head{
  border-bottom:1px solid var(--bd);
  font-size:10px;text-transform:uppercase;letter-spacing:.08em;
  color:var(--mt);font-weight:700;
  position:sticky;top:0;z-index:1;background:var(--sf);
}
.bdr-row{border-bottom:1px solid rgba(230,237,243,.04);font-size:12px}
.bdr-clickable{cursor:pointer}
.bdr-clickable:hover .bdr-row:first-child{background:rgba(79,140,255,.04)}
.bdr-label{color:var(--tx);display:flex;align-items:center;gap:6px;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.bdr-num{text-align:right;font-variant-numeric:tabular-nums;font-family:var(--mono);color:var(--tx2);white-space:nowrap}
.bdr-pnl{font-weight:650}
.bdr-caret{color:var(--mt);font-size:9px;width:10px;display:inline-block;flex:0 0 auto}
.bdr-sub{font-size:12px;color:var(--mt);background:rgba(255,255,255,.015)}
.bdr-sub .bdr-label{padding-left:8px}
.bdr-sub-wrap{padding:2px 0 4px}

/* Breakdown panel: 10 rows visible (header ~24px + 10 × ~24px), the
   rest is scrollable so the chart-grid layout stays compact while
   still letting the user reach every row. */
.breakdown-scroll{max-height:280px;overflow:auto;padding:0}

/* Heatmap host: fills the chart-wrap when the heatmap chart-mode is
   active. The canvas and the heatmap host are siblings; we toggle
   visibility based on mode. */
.heatmap-host{width:100%;height:100%;overflow:auto;padding:4px 8px}
.heatmap-table{border-collapse:separate;border-spacing:2px;font-size:.7rem;table-layout:fixed;width:100%}
.heatmap-table th{
  background:transparent;color:var(--mt);font-weight:500;
  padding:2px 4px;text-align:center;font-size:.62rem;
  text-transform:uppercase;letter-spacing:.5px;
  border:none;cursor:default;
}
.heatmap-table th::after{content:''}
.heatmap-table td{
  padding:0;border:none;text-align:center;
  font-variant-numeric:tabular-nums;font-size:.62rem;
  border-radius:3px;height:22px;color:var(--tx);
  white-space:nowrap;
}
.heatmap-table .row-label{
  color:var(--mt);font-weight:600;text-align:right;padding-right:6px;
  background:transparent;width:36px;
}
.heatmap-legend{
  display:flex;align-items:center;gap:8px;
  margin-top:8px;font-size:.7rem;color:var(--mt);
}
.heatmap-legend-bar{
  flex:0 0 200px;height:10px;border-radius:3px;
  background:linear-gradient(90deg,rgba(239,68,68,.6),rgba(255,255,255,.04),rgba(34,197,94,.6));
}