:root { font-family: system-ui, sans-serif; }
body { margin: 0; background: #0f1115; color: #e6e6e6; }
header { display: flex; justify-content: space-between; align-items: center; padding: 16px 24px; border-bottom: 1px solid #232733; }
h1 { font-size: 18px; margin: 0; }
.nav { display: flex; gap: 16px; }
.nav a { color: #9aa4b2; text-decoration: none; font-size: 14px; font-weight: 600; padding: 4px 0; border-bottom: 2px solid transparent; }
.nav a.active { color: #e6e6e6; border-bottom-color: #6ea8fe; }
.controls { display: flex; gap: 8px; align-items: center; }
.controls label { font-size: 12px; color: #9aa4b2; display: flex; gap: 4px; align-items: center; }

/* funnel cards (Metabase-576 style) */
.funnelcards { display: flex; align-items: stretch; gap: 8px; flex-wrap: wrap; }
.fcard { flex: 1 1 0; min-width: 130px; background: #0f1320; border: 1px solid #2b303d; border-radius: 8px; padding: 14px; text-align: center; }
.fcard-name { font-size: 12px; color: #9aa4b2; min-height: 2.4em; }
.fcard-num { font-size: 26px; font-weight: 700; font-variant-numeric: tabular-nums; margin: 6px 0; }
.fcard-sub { font-size: 11px; color: #6ea8fe; }
.farrow { display: flex; align-items: center; color: #3a4150; font-size: 22px; }
.controls input, .controls select { background: #161922; color: #e6e6e6; border: 1px solid #2b303d; border-radius: 6px; padding: 6px 8px; }

#dash { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; padding: 24px; align-items: start; }
.card { background: #161922; border: 1px solid #232733; border-radius: 10px; padding: 16px; }
.card.wide { grid-column: 1 / -1; }
.card h2 { font-size: 13px; text-transform: uppercase; letter-spacing: .04em; color: #9aa4b2; margin: 0 0 12px; }

table { width: 100%; border-collapse: collapse; font-size: 14px; }
th, td { text-align: left; padding: 7px 8px; border-bottom: 1px solid #20242f; }
th { color: #9aa4b2; font-weight: 600; font-size: 12px; }
td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; }
tr:last-child td { border-bottom: none; }
tr.leak td { background: rgba(248, 113, 113, .12); }
tr.total td { border-top: 1px solid #2b303d; }

.delta.up { color: #4ade80; }
.delta.down { color: #f87171; }
.err { color: #f87171; font-size: 13px; }
.loading { color: #6b7280; font-size: 13px; padding: 24px; }
.hint { color: #6b7280; font-size: 12px; }
.wtd { font-size: 10px; color: #c9a227; border: 1px solid #5a4d12; border-radius: 4px; padding: 0 4px; }
td.up { color: #4ade80; } td.down { color: #f87171; }

/* ---- Mobile ---- */
@media (max-width: 760px) {
  /* Stack the header: nav on top, controls below */
  header { flex-direction: column; align-items: stretch; gap: 12px; padding: 12px 16px; }
  .nav { gap: 14px; overflow-x: auto; -webkit-overflow-scrolling: touch; padding-bottom: 2px; }
  .nav a { white-space: nowrap; flex: 0 0 auto; }
  .controls { flex-wrap: wrap; gap: 8px; }
  .controls label { flex: 1 1 auto; }
  .controls input, .controls select { flex: 1 1 auto; min-width: 0; width: 100%; box-sizing: border-box; }

  /* Single-column dashboard, tighter spacing */
  #dash { grid-template-columns: 1fr; gap: 12px; padding: 16px; }
  .card { padding: 12px; }
  .card h2 { margin-bottom: 8px; }

  /* Wide tables scroll horizontally inside their card instead of overflowing the page */
  .card { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  table { font-size: 13px; }
  th, td { padding: 6px; white-space: nowrap; }

  /* Funnel arrows don't fit between wrapped cards */
  .farrow { display: none; }
  .fcard { min-width: calc(50% - 4px); padding: 12px; }
  .fcard-num { font-size: 22px; }
}

@media (max-width: 420px) {
  /* On very small phones, funnel cards go full width */
  .fcard { min-width: 100%; }
}