* { box-sizing: border-box; margin: 0; padding: 0; }
body { background: #0f1117; color: #e2e8f0; font-family: system-ui, sans-serif; }
.tabs { display: flex; gap: 4px; padding: 16px 20px 0; border-bottom: 1px solid #2d3148; }
.tab-btn { padding: 10px 20px; border: none; border-radius: 6px 6px 0 0; cursor: pointer;
           background: #1e2130; color: #94a3b8; font-size: 14px; transition: all .2s; }
.tab-btn.active { background: #2d3148; color: #e2e8f0; }
.tab-content { display: none; padding: 20px; }
.tab-content.active { display: block; }
.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 12px; margin-bottom: 20px; }
.card { background: #1e2130; border-radius: 8px; padding: 16px; border: 1px solid #2d3148; }
.card .label { font-size: 12px; color: #64748b; text-transform: uppercase; letter-spacing: .5px; }
.card .value { font-size: 28px; font-weight: 700; margin: 4px 0; }
.card .sub { font-size: 11px; color: #94a3b8; }
.chart-wrap { background: #1e2130; border-radius: 8px; padding: 16px; margin-bottom: 16px; border: 1px solid #2d3148; }
.chart-wrap h3 { font-size: 13px; color: #94a3b8; margin-bottom: 12px; }
.range-bar { display: flex; gap: 8px; align-items: center; margin-bottom: 16px; flex-wrap: wrap; }
.range-bar button { padding: 6px 12px; border: 1px solid #2d3148; background: #1e2130; color: #94a3b8;
                    border-radius: 4px; cursor: pointer; font-size: 12px; transition: all .15s; }
.range-bar button:hover, .range-bar button.active { background: #2d3148; color: #e2e8f0; }
.subtabs { display: flex; gap: 8px; margin-bottom: 16px; }
.subtab-btn { padding: 7px 16px; border: 1px solid #2d3148; background: #1e2130; color: #94a3b8;
              border-radius: 4px; cursor: pointer; font-size: 13px; transition: all .15s; }
.subtab-btn.active { background: #2d3148; color: #e2e8f0; border-color: #4f5b8a; }
.subtab-content { display: none; }
.subtab-content.active { display: block; }
table { width: 100%; border-collapse: collapse; font-size: 13px; }
th { text-align: left; padding: 8px 12px; color: #64748b; font-size: 11px; text-transform: uppercase;
     border-bottom: 1px solid #2d3148; }
td { padding: 8px 12px; border-bottom: 1px solid #1e2130; }
tr:hover td { background: #1e2130; }
.badge { display: inline-block; padding: 2px 8px; border-radius: 12px; font-size: 11px; }
.badge.green { background: #064e3b; color: #34d399; }
.badge.amber { background: #451a03; color: #f59e0b; }
.badge.red   { background: #450a0a; color: #f87171; }
.refresh-note { font-size: 11px; color: #4b5563; float: right; }