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

:root {
  --bg:        #0d1117;
  --bg2:       #161b22;
  --bg3:       #21262d;
  --border:    #30363d;
  --text:      #e6edf3;
  --muted:     #8b949e;
  --green:     #3fb950;
  --green-bg:  #1a4a2e;
  --red:       #f85149;
  --red-bg:    #4a1a1a;
  --blue:      #58a6ff;
  --blue-bg:   #1a3a5c;
  --yellow:    #d29922;
  --yellow-bg: #2d2a1a;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
body { background: var(--bg); color: var(--text); font-family: 'IBM Plex Sans', sans-serif; font-size: 13px; }

header {
  background: var(--bg2); border-bottom: 1px solid var(--border);
  display: flex; align-items: center; padding: 0 24px; gap: 14px; height: 54px;
  position: sticky; top: 0; z-index: 100;
}
.logo { font-family: 'IBM Plex Mono', monospace; font-weight: 600; font-size: 14px; border: 1px solid var(--border); padding: 3px 9px; border-radius: 4px; flex-shrink: 0; }
.logo em { color: var(--blue); font-style: normal; }
.header-title { font-size: 12px; color: var(--muted); flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.header-title strong { color: var(--text); font-weight: 500; }
.pill { font-family: 'IBM Plex Mono', monospace; font-size: 10px; padding: 2px 8px; border-radius: 10px; border: 1px solid; flex-shrink: 0; }
.pill-blue   { color: var(--blue);   border-color: var(--blue);   background: var(--blue-bg); }
.pill-green  { color: var(--green);  border-color: var(--green);  background: var(--green-bg); }
.pill-yellow { color: var(--yellow); border-color: var(--yellow); background: var(--yellow-bg); }
.pill-red    { color: var(--red);    border-color: var(--red);    background: var(--red-bg); }

.page { max-width: 1400px; margin: 0 auto; padding: 20px 20px 40px; }
.sec {
  font-family: 'IBM Plex Mono', monospace; font-size: 10px; font-weight: 500;
  color: var(--muted); text-transform: uppercase; letter-spacing: .08em;
  margin-bottom: 10px; padding-bottom: 6px; border-bottom: 1px solid var(--border);
  display: flex; align-items: center; justify-content: space-between;
}

/* KPIs */
.kpi-row { display: grid; grid-template-columns: repeat(4,1fr); gap: 12px; margin-bottom: 20px; }
@media(max-width:800px){ .kpi-row { grid-template-columns: repeat(2,1fr); } }
.kpi { background: var(--bg2); border: 1px solid var(--border); border-radius: 6px; padding: 14px 16px; position: relative; }
.kpi::after { content:''; position:absolute; top:0; left:0; right:0; height:2px; border-radius:6px 6px 0 0; }
.kpi.c-blue::after   { background: var(--blue); }
.kpi.c-green::after  { background: var(--green); }
.kpi.c-red::after    { background: var(--red); }
.kpi.c-yellow::after { background: var(--yellow); }
.kpi-lbl { font-family: 'IBM Plex Mono', monospace; font-size: 10px; color: var(--muted); text-transform: uppercase; letter-spacing:.06em; margin-bottom:6px; }
.kpi-num { font-family: 'IBM Plex Mono', monospace; font-size: 22px; font-weight: 600; line-height:1; margin-bottom:5px; }
.kpi-sub { font-size: 11px; color: var(--muted); display:flex; align-items:center; gap:6px; flex-wrap:wrap; }
.delta { font-family:'IBM Plex Mono',monospace; font-size:10px; font-weight:500; padding:1px 5px; border-radius:3px; }
.d-pos { color:var(--green); background:var(--green-bg); }
.d-neg { color:var(--red);   background:var(--red-bg); }

/* Charts */
.charts-2col { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-bottom: 14px; }
@media(max-width:900px){ .charts-2col { grid-template-columns: 1fr; } }
.chart-card { background: var(--bg2); border: 1px solid var(--border); border-radius: 6px; padding: 14px 16px; }
.chart-head { display:flex; align-items:flex-start; justify-content:space-between; margin-bottom:12px; gap:8px; }
.chart-title { font-family:'IBM Plex Mono',monospace; font-size:10px; font-weight:500; color:var(--muted); text-transform:uppercase; letter-spacing:.06em; line-height:1.4; }
.legend { display:flex; gap:10px; flex-shrink:0; }
.legend-item { font-family:'IBM Plex Mono',monospace; font-size:10px; color:var(--muted); display:flex; align-items:center; gap:4px; }
.dot { width:8px; height:8px; border-radius:2px; flex-shrink:0; }
.chart-wrap { position:relative; height:230px; width:100%; }

/* Table */
.table-card { background: var(--bg2); border: 1px solid var(--border); border-radius: 6px; overflow: hidden; margin-bottom: 20px; }
.table-toolbar { display:flex; align-items:center; justify-content:space-between; padding:10px 14px; border-bottom:1px solid var(--border); background:var(--bg3); gap:12px; flex-wrap:wrap; }
.toolbar-title { font-family:'IBM Plex Mono',monospace; font-size:10px; color:var(--muted); text-transform:uppercase; letter-spacing:.06em; }
.filter-btns { display:flex; gap:6px; flex-wrap:wrap; }
.fbtn { font-family:'IBM Plex Mono',monospace; font-size:10px; padding:3px 9px; border-radius:3px; border:1px solid var(--border); background:transparent; color:var(--muted); cursor:pointer; transition:all .12s; }
.fbtn:hover, .fbtn.on { border-color:var(--blue); color:var(--blue); background:var(--blue-bg); }
.tbl-scroll { overflow-x:auto; }
table { width:100%; border-collapse:collapse; font-family:'IBM Plex Mono',monospace; font-size:11.5px; }
thead th { background:var(--bg3); color:var(--muted); font-size:9px; font-weight:500; text-transform:uppercase; letter-spacing:.05em; padding:7px 10px; text-align:right; border-bottom:1px solid var(--border); white-space:nowrap; }
thead th:first-child, thead th:nth-child(2) { text-align:left; }
thead th.th-input { color:var(--yellow); }
tbody tr { border-bottom:1px solid var(--border); }
tbody tr:hover { background:var(--bg3); }
td { padding:6px 10px; text-align:right; color:var(--text); white-space:nowrap; }
td:first-child { text-align:left; color:var(--muted); font-weight:500; }
td:nth-child(2) { text-align:left; font-weight:500; }
.tv-pos { color:var(--green); }
.tv-neg { color:var(--red); }
.tv-dim { color:var(--muted); }
.td-input { color:var(--yellow) !important; }

/* Footer */
footer { border-top:1px solid var(--border); padding:14px 20px; display:flex; align-items:center; justify-content:space-between; font-family:'IBM Plex Mono',monospace; font-size:10px; color:var(--muted); gap:12px; flex-wrap:wrap; }
footer a { color:var(--blue); text-decoration:none; }
.footer-pills { display:flex; gap:6px; flex-wrap:wrap; }
.fpill { padding:2px 7px; border-radius:10px; border:1px solid var(--border); font-size:9.5px; }

/* Loading/error states */
.state-msg { font-family:'IBM Plex Mono',monospace; font-size:12px; color:var(--muted); padding:40px; text-align:center; }
.state-msg.error { color:var(--red); }