: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;
  --shadow: 0 4px 24px rgba(0,0,0,.4);
}

* { 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 */
.header {
  padding: 32px 0 16px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 24px;
}
.header h1 {
  font-size: 1.8rem;
  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: .9rem; margin-top: 4px; }

/* Controls */
.controls {
  display: flex;
  gap: 16px;
  align-items: flex-end;
  flex-wrap: wrap;
  margin-bottom: 24px;
  padding: 20px;
  background: var(--surface);
  border-radius: var(--radius);
  border: 1px solid var(--border);
}
.control-group { display:flex; flex-direction:column; gap:6px; }
.control-group label { font-size:.75rem; font-weight:600; text-transform:uppercase; color:var(--text2); letter-spacing:.5px; }
.control-group select {
  background: var(--surface2);
  color: var(--text);
  border: 1px solid var(--border);
  padding: 10px 14px;
  border-radius: 8px;
  font-size: .9rem;
  min-width: 180px;
  cursor: pointer;
}
.control-group select:focus { outline:none; border-color:var(--accent); }

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

/* Status */
.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 */
.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 */
.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; }

/* Panels */
.tab-content { min-height: 300px; }
.panel { display:none; }
.panel.active { display:block; }
.panel h2 { font-size:1.2rem; margin-bottom:16px; color:var(--accent); }
.panel h3 { font-size:1rem; margin: 20px 0 12px; color:var(--text); }

/* Data table */
.table-wrap {
  overflow-x: auto;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  margin-bottom: 20px;
}
table {
  width: 100%;
  border-collapse: collapse;
  font-size: .8rem;
}
thead th {
  position: sticky;
  top: 0;
  background: var(--surface2);
  padding: 10px 12px;
  text-align: left;
  font-weight: 600;
  color: var(--accent);
  border-bottom: 2px solid var(--border);
  white-space: nowrap;
}
tbody td {
  padding: 8px 12px;
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
}
tbody tr:hover { background: rgba(79,195,247,.05); }

/* Correlation matrix */
.matrix-wrap {
  overflow: auto;
  max-height: 600px;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  margin-bottom: 20px;
}
.matrix-wrap table { font-size: .7rem; }
.matrix-wrap th, .matrix-wrap td {
  padding: 4px 6px;
  text-align: center;
  min-width: 50px;
}
.matrix-wrap th { font-size: .65rem; }

/* Gems ranking */
.gems-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
@media (max-width:768px) { .gems-grid { grid-template-columns:1fr; } }

.gem-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 16px;
}
.gem-card h3 { margin-top:0; }

/* Snapshot cards */
.snapshot-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); gap:12px; }
.snap-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 14px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.snap-label { color: var(--text2); font-size:.85rem; }
.snap-value { font-weight:600; font-size:1rem; }

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

/* Glossary */
.glossary-grid { display:grid; grid-template-columns:1fr 1fr; gap:20px; }
@media (max-width:768px) { .glossary-grid { grid-template-columns:1fr; } }

/* European number format helper */
.num-positive { color: var(--green); }
.num-negative { color: var(--red); }