:root {
  --ink: #18201d;
  --muted: #68716d;
  --line: #d9dfdc;
  --surface: #f7f9f8;
  --paper: #ffffff;
  --green: #157a54;
  --teal: #268c8c;
  --gold: #c38a28;
  --red: #b5473c;
}

* { box-sizing: border-box; }
body { margin: 0; background: var(--surface); color: var(--ink); font-family: "IBM Plex Sans", "Segoe UI", sans-serif; letter-spacing: 0; }
button, select, input { font: inherit; letter-spacing: 0; }
.topbar { min-height: 108px; padding: 24px clamp(20px, 5vw, 72px); background: var(--ink); color: white; display: flex; align-items: center; justify-content: space-between; border-bottom: 4px solid var(--green); }
h1, h2, p { margin: 0; }
h1 { font-family: Georgia, serif; font-size: 34px; font-weight: 500; }
h2 { font-family: Georgia, serif; font-size: 23px; font-weight: 500; }
.eyebrow { color: #8ea49a; font-size: 11px; font-weight: 700; margin-bottom: 5px; }
.connection { display: flex; align-items: center; gap: 9px; color: #cbd5d0; font-size: 13px; }
#health-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--gold); }
#health-dot.online { background: #47c98b; }
main { width: min(1480px, 100%); margin: 0 auto; padding: 24px clamp(16px, 4vw, 56px) 56px; }
.portfolio-head, .section-title { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.portfolio-head { margin-bottom: 18px; }
.segmented, .periods { display: flex; border: 1px solid var(--line); background: var(--paper); }
.segmented button, .periods button { min-height: 38px; padding: 0 16px; border: 0; border-right: 1px solid var(--line); color: var(--muted); background: transparent; cursor: pointer; }
.segmented button:last-child, .periods button:last-child { border-right: 0; }
.segmented button.active, .periods button.active { color: white; background: var(--green); }
.metrics { display: grid; grid-template-columns: repeat(6, minmax(130px, 1fr)); border: 1px solid var(--line); background: var(--paper); }
.metrics article { min-height: 112px; padding: 20px; border-right: 1px solid var(--line); display: flex; flex-direction: column; }
.metrics article:last-child { border-right: 0; }
.metrics span, .metrics small { color: var(--muted); font-size: 12px; }
.metrics strong { margin: 10px 0 5px; font-family: Georgia, serif; font-size: 24px; font-weight: 500; white-space: nowrap; }
.positive { color: var(--green) !important; }.negative { color: var(--red) !important; }
.chart-section, .stats-section { margin-top: 24px; padding: 24px; border: 1px solid var(--line); background: var(--paper); }
.legend { display: flex; gap: 18px; color: var(--muted); font-size: 12px; }
.legend span::before { content: ""; display: inline-block; width: 18px; height: 3px; margin: 0 6px 3px 0; }
.equity-key::before { background: var(--green); }.cash-key::before { background: var(--teal); }.invested-key::before { background: var(--gold); }
.chart-wrap { position: relative; height: 340px; margin-top: 22px; }
#portfolio-chart { width: 100%; height: 100%; }
#chart-empty { position: absolute; inset: 0; display: none; place-items: center; color: var(--muted); font-size: 13px; }
.stats-controls { display: flex; gap: 8px; flex-wrap: wrap; }
.stats-controls select, .stats-controls input { height: 38px; border: 1px solid var(--line); background: white; color: var(--ink); padding: 0 10px; }
.table-wrap { overflow-x: auto; margin-top: 18px; }
table { width: 100%; border-collapse: collapse; font-size: 13px; }
th { color: var(--muted); text-align: left; font-size: 11px; text-transform: uppercase; border-bottom: 1px solid var(--line); padding: 11px 12px; }
td { border-bottom: 1px solid #edf0ee; padding: 13px 12px; white-space: nowrap; }
td:first-child { white-space: normal; min-width: 220px; }
.empty { color: var(--muted); text-align: center; padding: 32px; }

@media (max-width: 1050px) { .metrics { grid-template-columns: repeat(3, 1fr); }.metrics article:nth-child(3) { border-right: 0; }.metrics article:nth-child(-n+3) { border-bottom: 1px solid var(--line); } }
@media (max-width: 680px) { .topbar { min-height: 112px; padding: 18px 20px; align-items: flex-start; flex-direction: column; gap: 12px; }.topbar h1 { font-size: 27px; }.connection { width: 100%; }.portfolio-head, .section-title { align-items: flex-start; flex-direction: column; }.metrics { grid-template-columns: repeat(2, 1fr); }.metrics article { border-bottom: 1px solid var(--line); }.metrics article:nth-child(odd) { border-right: 1px solid var(--line); }.metrics article:nth-child(even) { border-right: 0; }.chart-section, .stats-section { padding: 18px; }.chart-wrap { height: 270px; }.legend { flex-wrap: wrap; }.stats-controls { width: 100%; }.stats-controls select, .stats-controls input { width: 100%; } }