@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;500;600;700&display=swap');

/* ═══════════════════════════════════════════
   QELARA DESIGN SYSTEM — Pulse Dashboard
   Institutional dark • Amber accent • Graphite
   ═══════════════════════════════════════════ */

:root {
  /* Core palette */
  --q-black: #0E0E10;
  --q-dark: #161618;
  --q-surface: #1C1C1F;
  --q-elevated: #222225;
  --q-border: #2A2A2E;
  --q-border-subtle: rgba(255, 255, 255, 0.04);

  /* Text */
  --q-text: #E8E6E3;
  --q-text-secondary: #A8A5A0;
  --q-muted: #8F8B86;
  --q-text-dim: #6B6863;
  --q-text-faint: #4A4845;

  /* Accent */
  --q-amber: #B68A5A;
  --q-amber-light: #D4A66A;
  --q-amber-glow: rgba(182, 138, 90, 0.08);
  --q-amber-border: rgba(182, 138, 90, 0.18);

  /* Semantic */
  --q-green: #4A9E52;
  --q-green-muted: rgba(74, 158, 82, 0.10);
  --q-red: #C94040;
  --q-red-muted: rgba(201, 64, 64, 0.10);

  /* Noise overlay */
  --noise: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

* { margin: 0; padding: 0; box-sizing: border-box }

body {
  background: var(--q-black);
  color: var(--q-text);
  font-family: 'Inter', -apple-system, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  min-height: 100vh;
}

/* ── NAV ── */
.nav {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(14, 14, 16, 0.85);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--q-border);
}

.nav-inner {
  max-width: 1080px;
  margin: 0 auto;
  padding: 0 24px;
  height: 52px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.nav-brand {
  display: flex;
  align-items: center;
  gap: 8px;
}

.brand-mark {
  font-family: 'Inter', sans-serif;
  font-size: 20px;
  font-weight: 800;
  color: var(--q-amber);
  line-height: 1;
}

.brand-name {
  font-family: 'Inter', sans-serif;
  font-size: 15px;
  font-weight: 600;
  color: var(--q-text);
  letter-spacing: -0.3px;
}

.brand-sep {
  color: var(--q-border);
  font-weight: 300;
  font-size: 18px;
  margin: 0 2px;
}

.brand-product {
  font-size: 14px;
  font-weight: 400;
  color: var(--q-muted);
  letter-spacing: 0;
}

.nav-status {
  display: flex;
  align-items: center;
  gap: 6px;
}

.status-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--q-text-dim);
  transition: background .3s, box-shadow .3s;
}
.status-dot.live {
  background: var(--q-green);
  box-shadow: 0 0 8px rgba(74, 158, 82, 0.4);
}
.status-dot.error { background: var(--q-red) }

.status-text {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  font-weight: 500;
  color: var(--q-text-dim);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  transition: color .3s;
}
.status-text.live { color: var(--q-green) }
.status-text.error { color: var(--q-red) }

/* ── MAIN ── */
.main {
  min-height: calc(100vh - 52px);
}

.container {
  max-width: 1080px;
  margin: 0 auto;
  padding: 32px 24px 48px;
}

/* ── TAGLINE ── */
.tagline {
  font-size: 11px;
  font-weight: 500;
  color: var(--q-text-dim);
  letter-spacing: 2.5px;
  text-transform: uppercase;
  margin-bottom: 28px;
}

/* ── METRIC CARDS ── */
.metrics {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
  margin-bottom: 32px;
}

.metric-card {
  position: relative;
  background: var(--q-dark);
  border: 1px solid var(--q-border);
  padding: 22px 20px 18px;
  overflow: hidden;
  transition: border-color .3s, transform .2s;
}
.metric-card::after {
  content: '';
  position: absolute;
  inset: 0;
  opacity: 0.02;
  background-image: var(--noise);
  pointer-events: none;
}

.metric-card:hover {
  border-color: var(--q-amber-border);
  transform: translateY(-1px);
}

.metric-accent {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--q-amber) 0%, transparent 100%);
  opacity: 0;
  transition: opacity .3s;
}
.metric-card:hover .metric-accent,
.metric-card--highlight .metric-accent {
  opacity: 1;
}

.metric-value {
  font-family: 'JetBrains Mono', monospace;
  font-size: 30px;
  font-weight: 700;
  color: var(--q-text);
  letter-spacing: -1px;
  margin-bottom: 6px;
  position: relative;
  z-index: 1;
}

.metric-label {
  font-size: 11px;
  font-weight: 500;
  color: var(--q-text-dim);
  letter-spacing: 0.5px;
  position: relative;
  z-index: 1;
}

/* ── PANELS ── */
.panel {
  background: var(--q-dark);
  border: 1px solid var(--q-border);
  margin-bottom: 16px;
  position: relative;
  overflow: hidden;
}
.panel::after {
  content: '';
  position: absolute;
  inset: 0;
  opacity: 0.02;
  background-image: var(--noise);
  pointer-events: none;
}

.panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 24px;
  border-bottom: 1px solid var(--q-border);
  position: relative;
  z-index: 1;
}

.panel-title {
  display: flex;
  align-items: center;
  gap: 10px;
}

.panel-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--q-amber);
  flex-shrink: 0;
}
.panel-dot--whale {
  background: var(--q-text-secondary);
}

.panel-header h2 {
  font-family: 'Inter', sans-serif;
  font-size: 13px;
  font-weight: 600;
  color: var(--q-text-secondary);
  letter-spacing: 0.3px;
}

.panel-badge {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  font-weight: 600;
  color: var(--q-text-dim);
  letter-spacing: 1px;
  padding: 3px 8px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--q-border-subtle);
}

.panel-body {
  padding: 0;
  position: relative;
  z-index: 1;
}

.panel-body--chart {
  padding: 16px 24px 20px;
}

/* ── TABLES ── */
.table-wrap { overflow-x: auto }

table {
  width: 100%;
  border-collapse: collapse;
}

thead th {
  font-family: 'Inter', sans-serif;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  color: var(--q-text-dim);
  text-align: left;
  padding: 12px 20px;
  border-bottom: 1px solid var(--q-border);
  position: sticky;
  top: 0;
  background: var(--q-dark);
}
thead th.num { text-align: right }

tbody td {
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  padding: 10px 20px;
  color: var(--q-text-secondary);
  border-bottom: 1px solid var(--q-border-subtle);
  transition: background .15s;
}
tbody td.num { text-align: right }

tbody td:first-child {
  font-family: 'Inter', sans-serif;
  font-weight: 500;
  font-size: 12px;
  color: var(--q-muted);
  letter-spacing: 0.3px;
}

tbody tr:hover td {
  background: var(--q-amber-glow);
}

tbody tr:last-child td {
  border-bottom: none;
}

/* Direction badges — softer */
.dir-long {
  display: inline-block;
  color: var(--q-green);
  background: var(--q-green-muted);
  padding: 2px 7px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.5px;
}

.dir-short {
  display: inline-block;
  color: var(--q-red);
  background: var(--q-red-muted);
  padding: 2px 7px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.5px;
}

/* Win rate colors */
.wr-good { color: var(--q-green) }
.wr-mid { color: var(--q-amber-light) }
.wr-bad { color: var(--q-red) }

/* ── CHART ── */
#trend-chart {
  width: 100%;
  height: 180px;
  display: block;
}

/* ── FOOTER ── */
.footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 24px 0 0;
  margin-top: 8px;
  border-top: 1px solid var(--q-border-subtle);
}

.footer-brand {
  display: flex;
  align-items: baseline;
  gap: 5px;
}

.footer-q {
  font-family: 'Inter', sans-serif;
  font-size: 12px;
  font-weight: 600;
  color: var(--q-amber);
  letter-spacing: 0.3px;
}

.footer-p {
  font-size: 12px;
  font-weight: 400;
  color: var(--q-text-dim);
}

.footer-v {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  color: var(--q-text-faint);
  margin-left: 4px;
}

.footer-updated {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  color: var(--q-text-dim);
}

/* ── RESPONSIVE ── */
@media (max-width: 768px) {
  .metrics { grid-template-columns: repeat(2, 1fr) }
  .metric-value { font-size: 24px }
  .container { padding: 20px 16px 32px }
  .nav-inner { padding: 0 16px }
  thead th, tbody td { padding: 8px 12px }
  .panel-header { padding: 12px 16px }
  .panel-body--chart { padding: 12px 16px 16px }
}

@media (max-width: 480px) {
  .metrics { grid-template-columns: 1fr 1fr }
  .metric-value { font-size: 20px }
  table { font-size: 11px }
  .tagline { font-size: 9px; letter-spacing: 1.5px }
}

/* ── LOADING STATE ── */
@keyframes pulse {
  0%, 100% { opacity: .4 }
  50% { opacity: .8 }
}
.loading {
  animation: pulse 1.8s ease-in-out infinite;
}