/* Investing Model — glassmorphism dark, mirroring PlusEVData aesthetic. */
:root {
  --bg: #07080d;
  --bg-2: #0d0f17;
  --panel: rgba(255, 255, 255, 0.04);
  --panel-2: rgba(255, 255, 255, 0.07);
  --border: rgba(255, 255, 255, 0.08);
  --fg: #e7e9ee;
  --dim: #8a90a0;
  --accent: #6df0a3;
  --accent-2: #5cb8ff;
  --warn: #ffc857;
  --bad: #ff6b6b;
  --good: #6df0a3;
  --radius: 14px;
  --radius-sm: 8px;
  --shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
  --font: 'Inter', 'Roboto', system-ui, -apple-system, sans-serif;
  --mono: 'JetBrains Mono', 'SF Mono', Menlo, Consolas, monospace;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: var(--font);
  background:
    radial-gradient(1200px 600px at 10% -10%, rgba(108, 240, 163, 0.08), transparent 60%),
    radial-gradient(900px 500px at 100% 0%, rgba(92, 184, 255, 0.07), transparent 60%),
    var(--bg);
  color: var(--fg);
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
}

.bg-bg { background: var(--bg); }
.text-fg { color: var(--fg); }
.dim { color: var(--dim); }

a { color: var(--accent-2); text-decoration: none; }
a:hover { color: var(--accent); }

.topbar {
  position: sticky;
  top: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  gap: 24px;
  padding: 14px 24px;
  background: rgba(7, 8, 13, 0.7);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--border);
}
.brand { display: flex; align-items: center; gap: 10px; font-weight: 600; }
.brand .logo {
  display: inline-flex; align-items: center; justify-content: center;
  width: 28px; height: 28px;
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  color: #042;
  border-radius: 8px;
  font-weight: 800;
}
.brand-text { color: var(--fg); }
.brand-text .dim { font-weight: 400; }

.topnav { display: flex; align-items: center; gap: 18px; flex: 1; flex-wrap: wrap; }
@media (max-width: 768px) {
  .topbar { padding: 10px 12px; gap: 12px; }
  .topnav { gap: 10px; }
  .navlink { padding: 4px 6px; font-size: 13px; }
  .search-input { width: 140px; font-size: 12px; }
  .content { padding: 12px; }
  .card { padding: 14px; }
  .table { font-size: 11px; }
  .table th, .table td { padding: 6px 4px; }
}
.navlink {
  color: var(--dim);
  font-size: 14px;
  padding: 6px 10px;
  border-radius: 8px;
}
.navlink:hover { color: var(--fg); background: var(--panel); }

.search-form { margin-left: auto; }
.search-input {
  background: var(--panel);
  border: 1px solid var(--border);
  color: var(--fg);
  padding: 8px 12px;
  border-radius: var(--radius-sm);
  font-family: var(--mono);
  font-size: 13px;
  width: 220px;
  outline: none;
}
.search-input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(108, 240, 163, 0.15); }
[x-cloak] { display: none !important; }
.search-dropdown {
  position: absolute;
  top: calc(100% + 4px);
  right: 0;
  width: 360px;
  max-height: 400px;
  overflow: auto;
  background: rgba(13, 15, 23, 0.96);
  backdrop-filter: blur(16px);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow);
  z-index: 60;
}
.search-item {
  display: grid;
  grid-template-columns: 80px 1fr auto;
  gap: 12px;
  padding: 8px 12px;
  border-bottom: 1px solid var(--border);
  font-size: 13px;
  color: var(--fg);
  text-decoration: none;
  align-items: center;
}
.search-item:hover, .search-item.active { background: var(--panel); color: var(--fg); }
.search-item .sym { color: var(--accent-2); font-weight: 600; font-family: var(--mono); }
.search-item .name { color: var(--fg); }
.search-item .dim { font-size: 11px; }

.content { padding: 24px; max-width: 1600px; margin: 0 auto; }

.card {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 20px;
  box-shadow: var(--shadow);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.card h2, .card h3 { margin: 0 0 12px; }
.card .muted { color: var(--dim); font-size: 13px; }

.grid { display: grid; gap: 16px; }
.grid-2 { grid-template-columns: 1fr 1fr; }
.grid-3 { grid-template-columns: 1fr 1fr 1fr; }
.grid-4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 900px) {
  .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; }
}

.section { margin-bottom: 24px; }
.section-title {
  margin: 0 0 12px;
  font-size: 13px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--dim);
}

.table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-family: var(--mono);
  font-size: 13px;
}
.table th, .table td {
  padding: 8px 10px;
  text-align: right;
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
}
.table th:first-child, .table td:first-child { text-align: left; }
.table th {
  font-weight: 600;
  color: var(--dim);
  text-transform: uppercase;
  font-size: 11px;
  letter-spacing: 0.05em;
  position: sticky;
  top: 0;
  background: var(--bg-2);
  z-index: 1;
}
.table tbody tr:hover { background: var(--panel); }
.table .sym { font-weight: 600; color: var(--accent-2); }
.table .pos { color: var(--good); }
.table .neg { color: var(--bad); }
.table .num { font-variant-numeric: tabular-nums; }

.heatmap-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 8px;
}
.heatmap-tile {
  padding: 12px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  background: var(--panel);
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 13px;
}
.heatmap-tile .name { font-weight: 600; }
.heatmap-tile .val { font-family: var(--mono); }

.btn {
  background: var(--panel-2);
  border: 1px solid var(--border);
  color: var(--fg);
  padding: 8px 14px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  font-family: var(--font);
  font-size: 13px;
  transition: 0.15s;
}
.btn:hover { background: var(--panel); border-color: var(--accent); color: var(--accent); }
.btn-primary {
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  color: #042;
  border-color: transparent;
  font-weight: 600;
}

.input, .select {
  background: var(--bg-2);
  border: 1px solid var(--border);
  color: var(--fg);
  padding: 8px 10px;
  border-radius: var(--radius-sm);
  font-family: var(--mono);
  font-size: 13px;
  outline: none;
  width: 100%;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
}
.input:focus, .select:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(108, 240, 163, 0.12);
}
.select {
  /* Custom chevron — matches dark theme */
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%238a90a0'><path d='M3 6l5 5 5-5z'/></svg>");
  background-repeat: no-repeat;
  background-position: right 8px center;
  background-size: 14px;
  padding-right: 28px;
  cursor: pointer;
}
/* Native option styling — most browsers limit this; what we *can* do: */
.select option {
  background: var(--bg-2);
  color: var(--fg);
  padding: 6px 10px;
}
.select option:hover, .select option:checked {
  background: var(--panel);
  color: var(--accent);
}
.select optgroup {
  background: var(--bg);
  color: var(--dim);
  font-weight: 600;
}

.footer {
  padding: 16px 24px;
  border-top: 1px solid var(--border);
  font-size: 12px;
  display: flex;
  gap: 8px;
  justify-content: center;
}

/* Sortable column headers — click cycles asc → desc → original */
.table th.sortable, .table th[data-sort-key] {
  cursor: pointer;
  user-select: none;
  position: relative;
}
.table th.sortable:hover, .table th[data-sort-key]:hover {
  background: var(--panel-2);
  color: var(--accent);
}
.table th.sortable::after, .table th[data-sort-key]::after {
  content: '⇅';
  display: inline-block;
  margin-left: 4px;
  opacity: 0.35;
  font-size: 9px;
  vertical-align: middle;
}
.table th.sort-asc::after  { content: '↑'; opacity: 1; color: var(--accent); }
.table th.sort-desc::after { content: '↓'; opacity: 1; color: var(--accent); }

.skeleton {
  background: linear-gradient(90deg, var(--panel) 0%, var(--panel-2) 50%, var(--panel) 100%);
  background-size: 200% 100%;
  animation: shimmer 1.4s infinite;
  border-radius: var(--radius-sm);
}
@keyframes shimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}