:root {
  --bg: #0f1117; --surface: #1a1d27; --surface2: #242836;
  --border: #2d3248; --text: #e8eaed; --text2: #9aa0b4;
  --accent: #4fc3f7; --accent2: #81d4fa;
  --green: #66bb6a; --red: #ef5350; --yellow: #ffd54f;
  --radius: 12px;
}
* { margin:0; padding:0; box-sizing:border-box; }
body { font-family:'Inter',system-ui,sans-serif; background:var(--bg); color:var(--text); min-height:100vh; line-height:1.6; }
#app { max-width:1400px; margin:0 auto; padding:0 20px 40px; }

.header { display:flex; justify-content:space-between; align-items:center; padding:28px 0 16px; border-bottom:1px solid var(--border); margin-bottom:24px; flex-wrap:wrap; gap:12px; }
.header h1 { font-size:1.6rem; font-weight:700; background:linear-gradient(135deg,var(--accent),var(--accent2)); -webkit-background-clip:text; -webkit-text-fill-color:transparent; }
.subtitle { color:var(--text2); font-size:.85rem; margin-top:2px; }

.btn-primary { padding:10px 24px; border-radius:8px; font-weight:600; font-size:.9rem; cursor:pointer; border:none; background:linear-gradient(135deg,var(--accent),#29b6f6); color:#000; transition:all .2s; }
.btn-primary:hover { transform:translateY(-1px); box-shadow:0 4px 16px rgba(79,195,247,.3); }
.btn-primary:disabled { opacity:.4; cursor:not-allowed; }

.metrics-row { display:grid; grid-template-columns:repeat(4,1fr); gap:12px; margin-bottom:24px; }
@media(max-width:768px) { .metrics-row { grid-template-columns:1fr 1fr; } }
.metric-card { background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); padding:16px; }
.metric-label { font-size:.75rem; color:var(--text2); text-transform:uppercase; letter-spacing:.4px; margin-bottom:4px; }
.metric-value { font-size:1.5rem; font-weight:700; }
.metric-delta { font-size:.8rem; margin-top:2px; }

.status { padding:12px 20px; border-radius:8px; margin-bottom:16px; font-size:.9rem; display:flex; align-items:center; gap:10px; }
.status.loading { background:rgba(79,195,247,.1); border:1px solid rgba(79,195,247,.3); color:var(--accent); }
.status.error { background:rgba(239,83,80,.1); border:1px solid rgba(239,83,80,.3); color:var(--red); }
.status.success { background:rgba(102,187,106,.1); border:1px solid rgba(102,187,106,.3); color:var(--green); }
.hidden { display:none !important; }
.spinner { width:18px; height:18px; border:2px solid transparent; border-top-color:var(--accent); border-radius:50%; animation:spin .8s linear infinite; }
@keyframes spin { to { transform:rotate(360deg); } }

.tabs { display:flex; gap:4px; margin-bottom:20px; background:var(--surface); padding:6px; border-radius:var(--radius); border:1px solid var(--border); overflow-x:auto; }
.tab { padding:10px 18px; background:transparent; border:none; color:var(--text2); font-size:.85rem; font-weight:500; cursor:pointer; border-radius:8px; transition:all .2s; white-space:nowrap; }
.tab:hover { color:var(--text); background:var(--surface2); }
.tab.active { background:var(--accent); color:#000; font-weight:600; }

.tab-content { min-height:300px; }
.panel { display:none; }
.panel.active { display:block; }
.panel h2 { font-size:1.2rem; margin-bottom:8px; color:var(--accent); }
.panel h3 { font-size:1rem; margin:16px 0 8px; color:var(--text); }
.panel .caption { color:var(--text2); font-size:.8rem; margin-bottom:12px; }
.panel .info-box { background:rgba(79,195,247,.08); border:1px solid rgba(79,195,247,.2); border-radius:8px; padding:10px 14px; font-size:.85rem; color:var(--accent); margin-top:8px; }
.panel .warn-box { background:rgba(255,213,79,.08); border:1px solid rgba(255,213,79,.2); border-radius:8px; padding:10px 14px; font-size:.85rem; color:var(--yellow); margin-top:8px; }

.chart-row { display:grid; grid-template-columns:1fr 1fr; gap:20px; margin-bottom:20px; }
@media(max-width:900px) { .chart-row { grid-template-columns:1fr; } }
.chart-card { background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); padding:16px; }
.chart-placeholder { min-height:300px; }

.footer { text-align:center; padding:24px 0; color:var(--text2); font-size:.8rem; border-top:1px solid var(--border); margin-top:32px; }