/* =========================================================
   DSP LEADERBOARD — STYLES
   Sister site to join + submit. Same cinematic aesthetic,
   Enzy/VOLT-style ranked list with filter controls.
========================================================== */

:root {
  --bg:           #050507;
  --bg-deep:      #000000;
  --ink:          #f5f5f7;
  --ink-soft:     #a8a8b0;
  --ink-faint:    #6b6b75;
  --line:         rgba(255, 255, 255, 0.08);
  --line-strong:  rgba(255, 255, 255, 0.18);
  --card-bg:      rgba(8, 10, 18, 0.55);
  --row-bg:       rgba(255, 255, 255, 0.02);
  --row-bg-hi:    rgba(255, 255, 255, 0.04);
  --control-bg:   rgba(255, 255, 255, 0.025);
  --shadow-soft:  0 30px 80px -20px rgba(0, 0, 0, 0.6);
  --radius:       14px;
  --radius-sm:    10px;

  --gold:         #d4af37;
  --gold-soft:    rgba(212, 175, 55, 0.14);
  --silver:       #c0c0c8;
  --silver-soft:  rgba(192, 192, 200, 0.12);
  --bronze:       #c87f4b;
  --bronze-soft:  rgba(200, 127, 75, 0.14);

  --ease:         cubic-bezier(0.22, 1, 0.36, 1);
  --ease-soft:    cubic-bezier(0.4, 0, 0.2, 1);

  --font-display: 'Geist', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-body:    'Geist', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  --font-mono:    'Geist Mono', 'SF Mono', Menlo, monospace;
}

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

html { background: #000000; }

html, body {
  color: var(--ink);
  font-family: var(--font-body);
  font-feature-settings: 'cv11', 'ss01', 'ss03';
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
  min-height: 100%;
}
body { background: transparent; min-height: 100dvh; }

/* =========================================================
   BACKGROUND LAYERS (shared with sister sites)
========================================================== */
.bg-base, .bg-mesh, .bg-particles, .bg-horizon, .bg-grain, .bg-aura {
  position: fixed; inset: 0; pointer-events: none; z-index: 0;
}
.bg-base { background: #000000; z-index: -5; }
.bg-mesh { z-index: -4; overflow: hidden; }
.orb { position: absolute; border-radius: 50%; filter: blur(110px); will-change: transform; }
.orb-1 {
  width: 130vw; height: 80vh;
  bottom: -40vh; left: 50%;
  transform: translateX(-50%);
  background: radial-gradient(ellipse at center,
    rgba(160, 185, 220, 0.32) 0%,
    rgba(60, 80, 130, 0.16) 35%,
    transparent 70%);
  opacity: 0.85;
}
.orb-2 {
  width: 60vw; height: 50vh;
  top: -15vh; right: -10vw;
  background: radial-gradient(circle, rgba(120, 100, 200, 0.22) 0%, transparent 60%);
  opacity: 0.6;
}
.orb-3 {
  width: 50vw; height: 50vh;
  top: 40vh; left: -15vw;
  background: radial-gradient(circle, rgba(80, 140, 200, 0.18) 0%, transparent 65%);
  opacity: 0.7;
}
.orb-4 {
  width: 35vw; height: 35vh;
  bottom: 20vh; right: 10vw;
  background: radial-gradient(circle, rgba(200, 170, 100, 0.10) 0%, transparent 70%);
  opacity: 0.45;
}
.bg-aura {
  z-index: -3;
  background:
    radial-gradient(ellipse at 50% 0%, rgba(255, 255, 255, 0.04) 0%, transparent 50%),
    radial-gradient(ellipse at 50% 100%, rgba(255, 255, 255, 0.025) 0%, transparent 60%);
}
.bg-particles { z-index: -2; opacity: 0.6; }
.bg-horizon {
  z-index: -1;
  top: auto; bottom: 0; height: 1px;
  background: linear-gradient(90deg,
    transparent 0%, rgba(255, 255, 255, 0.12) 50%, transparent 100%);
}
.bg-grain {
  z-index: -1;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence baseFrequency='0.9' /%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.4'/%3E%3C/svg%3E");
  opacity: 0.045;
  mix-blend-mode: overlay;
}

/* =========================================================
   FIXED CORNER MARKS
========================================================== */
.corner {
  position: fixed; z-index: 50;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-faint);
  user-select: none;
}
.corner-tl {
  top: 24px; left: 24px;
  display: flex; align-items: center; gap: 10px;
}
.corner-burst { width: 22px; height: 22px; opacity: 0.85; }
.corner-wordmark { color: var(--ink-soft); font-weight: 500; }
.corner-tr { top: 28px; right: 24px; color: var(--ink-faint); }

/* =========================================================
   STAGE / HERO
========================================================== */
.stage {
  position: relative;
  z-index: 10;
  max-width: 880px;
  margin: 0 auto;
  padding: 80px 24px 64px;
  display: flex;
  flex-direction: column;
}
.hero { text-align: center; margin-bottom: 32px; }

.pill {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink-soft);
  padding: 7px 14px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.02);
  margin-bottom: 28px;
}

.display {
  font-family: var(--font-display);
  font-weight: 900;
  line-height: 0.92;
  letter-spacing: -0.04em;
  margin-bottom: 22px;
}
.display-line {
  display: block;
  font-size: clamp(48px, 9vw, 80px);
}
.shimmer {
  background-image: linear-gradient(
    100deg,
    #d8d8de 0%, #f5f5f7 35%, #ffffff 50%, #f5f5f7 65%, #d8d8de 100%);
  background-size: 220% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  animation: shimmer 8s linear infinite;
}
@keyframes shimmer {
  0%   { background-position: 200% center; }
  100% { background-position: -100% center; }
}
.display-sub {
  display: block;
  font-size: clamp(28px, 5vw, 44px);
  font-weight: 800;
  letter-spacing: -0.03em;
  color: var(--ink-soft);
  margin-top: 4px;
}
.display-sub .word { margin: 0 0.08em; }
.word { display: inline-block; }

.kicker {
  font-family: var(--font-body);
  font-size: clamp(14px, 1.6vw, 16px);
  color: var(--ink-soft);
  margin-top: 18px;
  letter-spacing: 0.005em;
}
.rule {
  width: 60px; height: 1px;
  margin: 28px auto 0;
  background: linear-gradient(90deg, transparent, var(--line-strong), transparent);
}

/* =========================================================
   FADE-IN
========================================================== */
.fade-in {
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.8s var(--ease), transform 0.8s var(--ease);
}
.fade-in.visible { opacity: 1; transform: translateY(0); }

/* =========================================================
   NAV ROW (Onboarding + Submit a Deal)
========================================================== */
.nav-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin-bottom: 28px;
}
.nav-btn {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 18px 20px;
  border-radius: var(--radius);
  border: 1px solid var(--line-strong);
  background: var(--card-bg);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  color: var(--ink);
  text-decoration: none;
  transition: transform 0.18s var(--ease-soft),
              border-color 0.18s var(--ease-soft),
              background 0.18s var(--ease-soft),
              box-shadow 0.18s var(--ease-soft);
  cursor: pointer;
}
.nav-btn:hover, .nav-btn:focus-visible {
  outline: none;
  transform: translateY(-1px);
  border-color: rgba(255, 255, 255, 0.32);
  background: rgba(20, 24, 36, 0.72);
  box-shadow: 0 12px 36px -12px rgba(0, 0, 0, 0.7);
}
.nav-btn:active { transform: translateY(0); }

.nav-btn-icon {
  flex-shrink: 0;
  width: 36px; height: 36px;
  border-radius: 50%;
  display: grid; place-items: center;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--line);
  color: var(--ink-soft);
}
.nav-btn-label {
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1.1;
  display: block;
}
.nav-btn-sub {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-faint);
  display: block;
  margin-top: 3px;
}
.nav-btn-primary {
  border-color: rgba(255, 255, 255, 0.28);
  background: linear-gradient(180deg,
    rgba(40, 50, 80, 0.55) 0%, rgba(20, 24, 36, 0.55) 100%);
}
.nav-btn-primary .nav-btn-icon {
  background: rgba(120, 160, 220, 0.18);
  color: #e6eef8;
  border-color: rgba(160, 200, 255, 0.28);
}
.nav-btn-primary:hover, .nav-btn-primary:focus-visible {
  border-color: rgba(160, 200, 255, 0.5);
  background: linear-gradient(180deg,
    rgba(50, 70, 110, 0.7) 0%, rgba(25, 30, 50, 0.7) 100%);
}

/* =========================================================
   LEADERBOARD CARD
========================================================== */
.lb-card {
  background: var(--card-bg);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  padding: 24px;
  box-shadow: var(--shadow-soft);
}

.lb-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 16px;
}
.lb-title {
  font-family: var(--font-display);
  font-size: 17px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--ink);
}
.lb-meta {
  display: flex;
  align-items: center;
  gap: 14px;
}
.lb-asof {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
.lb-refresh {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 11px;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-soft);
  background: var(--control-bg);
  border: 1px solid var(--line);
  border-radius: 999px;
  cursor: pointer;
  transition: color 0.15s, border-color 0.15s, background 0.15s;
}
.lb-refresh:hover, .lb-refresh:focus-visible {
  outline: none;
  color: var(--ink);
  border-color: var(--line-strong);
  background: rgba(255, 255, 255, 0.05);
}
.lb-refresh svg { transition: transform 0.4s var(--ease); }
.lb-refresh.is-loading svg { transform: rotate(360deg); }

/* =========================================================
   CONTROL BLOCKS — Date / Role / Sort
========================================================== */
.lb-control-block {
  margin-bottom: 12px;
}
.lb-control-label {
  display: block;
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin-bottom: 6px;
}

/* =========================================================
   DATE FILTER — two views: pills (desktop) / select (mobile)
   Default: pills shown, select hidden. Mobile media query
   below flips this so the dropdown takes over.
========================================================== */

/* Date filter pills (desktop) — single row inside rounded container */
.lb-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  padding: 4px;
  background: var(--control-bg);
  border: 1px solid var(--line);
  border-radius: 999px;
}

/* Native dropdown wrapper — hidden on desktop, shown on mobile */
.lb-period-select-wrap {
  display: none;            /* hidden on desktop; shown via mobile media query */
  position: relative;
  width: 100%;
}
.lb-period-select {
  /* Strip native chrome so we can theme it consistently */
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;

  width: 100%;
  padding: 12px 38px 12px 14px;        /* extra right padding for chevron */
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink);
  background: var(--control-bg);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  cursor: pointer;
  outline: none;
  color-scheme: dark;
  transition: border-color 0.18s var(--ease-soft), background 0.18s var(--ease-soft);
}
.lb-period-select:focus {
  border-color: var(--line-strong);
  background: rgba(255, 255, 255, 0.05);
}
.lb-period-select option {
  background: #0a0a10;           /* native picker doesn't always honor this on iOS, fine */
  color: var(--ink);
}
.lb-period-chevron {
  position: absolute;
  right: 14px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--ink-soft);
  pointer-events: none;            /* clicks pass through to the select */
  display: flex;
  align-items: center;
}
.lb-filters button {
  flex: 0 1 auto;
  padding: 7px 12px;
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-faint);
  background: transparent;
  border: none;
  border-radius: 999px;
  cursor: pointer;
  transition: color 0.18s var(--ease-soft), background 0.18s var(--ease-soft);
  white-space: nowrap;
}
.lb-filters button:hover, .lb-filters button:focus-visible {
  outline: none;
  color: var(--ink-soft);
  background: rgba(255, 255, 255, 0.04);
}
.lb-filters button[aria-selected="true"] {
  color: var(--ink);
  background: rgba(255, 255, 255, 0.09);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.06) inset;
}

/* Custom date range pickers — visible ONLY when user selects "Custom" */
.lb-custom-range {
  display: flex;
  align-items: flex-end;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 10px;
  padding: 12px;
  background: var(--control-bg);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
}
/* Author rule must explicitly re-apply [hidden] = display:none, because
   .lb-custom-range { display: flex } above otherwise beats the UA's
   default [hidden] { display: none } rule. Without this, the From/To
   panel always shows regardless of the JS toggling .hidden. */
.lb-custom-range[hidden] { display: none; }
.lb-date-label {
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex: 1 1 140px;
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
.lb-date-label input[type="date"] {
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--ink);
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 9px 10px;
  outline: none;
  /* Native date picker uses browser styling — minimal customization for cross-browser */
  color-scheme: dark;
}
.lb-date-label input[type="date"]:focus {
  border-color: var(--line-strong);
  background: rgba(255, 255, 255, 0.06);
}
.lb-apply {
  padding: 9px 18px;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink);
  background: rgba(120, 160, 220, 0.18);
  border: 1px solid rgba(160, 200, 255, 0.28);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
}
.lb-apply:hover, .lb-apply:focus-visible {
  outline: none;
  background: rgba(120, 160, 220, 0.32);
  border-color: rgba(160, 200, 255, 0.5);
}

/* Role + Sort control row — two segmented toggles side-by-side */
.lb-control-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-bottom: 18px;
}
.lb-control-half { margin-bottom: 0; }

.lb-segmented {
  display: flex;
  gap: 2px;
  padding: 3px;
  background: var(--control-bg);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
}
.lb-segmented button {
  flex: 1 1 auto;
  padding: 7px 10px;
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-faint);
  background: transparent;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  transition: color 0.18s, background 0.18s;
  white-space: nowrap;
}
.lb-segmented button:hover, .lb-segmented button:focus-visible {
  outline: none;
  color: var(--ink-soft);
}
.lb-segmented button[aria-selected="true"] {
  color: var(--ink);
  background: rgba(255, 255, 255, 0.08);
}

/* =========================================================
   COLUMN HEADERS + ROWS
   6 cols: # / Rep / Pro Rate / Subs / Inst / Cancel
   (Funded merged into Inst — every Funded deal is also Installed,
    so a dedicated Funded column was redundant.)
========================================================== */
.lb-col-header,
.lb-row,
.lb-skeleton,
.lb-totals {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) 72px 64px 64px 64px;
  gap: 8px;
  align-items: center;
}
/* Top-3 rows get extra vertical breathing room so the crown can protrude */
.lb-row-rank-1, .lb-row-rank-2, .lb-row-rank-3 {
  padding-top: 14px;
  padding-bottom: 12px;
}

.lb-col-header {
  padding: 0 10px 10px;
  border-bottom: 1px solid var(--line);
  margin-bottom: 8px;
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
.lb-col-rank { text-align: center; }
.lb-col-name { text-align: left; }
.lb-col-stat { text-align: right; }

.lb-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.lb-row {
  padding: 12px 10px;
  border-radius: var(--radius-sm);
  background: var(--row-bg);
  transition: background 0.15s var(--ease-soft);
}
.lb-row:hover { background: var(--row-bg-hi); }

.lb-rank {
  text-align: center;
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 500;
  color: var(--ink-soft);
}

/* =========================================================
   ROYAL CREST BADGES — Top 3 rank icons
   Custom SVG: shield medallion with crown atop, metallic
   gradient, rank number etched in dark inset. King (#1)
   gets an animated halo + larger crown.
========================================================== */
.lb-rank-crest {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  /* Crest is taller than the row text — let it bleed up without breaking row height */
  height: 100%;
  min-height: 32px;
}
.lb-crest {
  display: block;
  position: relative;
  /* Slight upward shift so crown sits above the row centerline */
  margin-top: -6px;
  /* Default drop shadow gives every crest depth */
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.45));
}

/* King (#1) — animated halo behind the crest + slow shimmer */
.lb-crest-1 {
  filter:
    drop-shadow(0 0 12px rgba(212, 175, 55, 0.55))
    drop-shadow(0 2px 4px rgba(0, 0, 0, 0.45));
  animation: kingPulse 3.2s var(--ease) infinite;
}
@keyframes kingPulse {
  0%, 100% {
    filter:
      drop-shadow(0 0 8px rgba(212, 175, 55, 0.45))
      drop-shadow(0 2px 4px rgba(0, 0, 0, 0.45));
  }
  50% {
    filter:
      drop-shadow(0 0 18px rgba(255, 220, 120, 0.75))
      drop-shadow(0 2px 4px rgba(0, 0, 0, 0.45));
  }
}

/* Silver (#2) — softer glow */
.lb-crest-2 {
  filter:
    drop-shadow(0 0 6px rgba(192, 192, 200, 0.35))
    drop-shadow(0 2px 4px rgba(0, 0, 0, 0.45));
}

/* Bronze (#3) — warm glow */
.lb-crest-3 {
  filter:
    drop-shadow(0 0 6px rgba(200, 127, 75, 0.40))
    drop-shadow(0 2px 4px rgba(0, 0, 0, 0.45));
}

/* Reduced motion — kill the King pulse */
@media (prefers-reduced-motion: reduce) {
  .lb-crest-1 { animation: none; }
}
.lb-name {
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: -0.005em;
  color: var(--ink);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.lb-stat {
  text-align: right;
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 500;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.lb-stat-pct { font-weight: 600; }
.lb-stat-zero { color: var(--ink-faint); }

/* Top 3 — medal styling */
.lb-row-rank-1 {
  background: linear-gradient(90deg, var(--gold-soft), transparent 70%);
  border: 1px solid rgba(212, 175, 55, 0.28);
}
.lb-row-rank-1 .lb-rank { color: var(--gold); font-weight: 700; }
.lb-row-rank-1 .lb-name { color: #fff8e0; }
.lb-row-rank-2 {
  background: linear-gradient(90deg, var(--silver-soft), transparent 70%);
  border: 1px solid rgba(192, 192, 200, 0.22);
}
.lb-row-rank-2 .lb-rank { color: var(--silver); font-weight: 700; }
.lb-row-rank-2 .lb-name { color: #f0f0f4; }
.lb-row-rank-3 {
  background: linear-gradient(90deg, var(--bronze-soft), transparent 70%);
  border: 1px solid rgba(200, 127, 75, 0.22);
}
.lb-row-rank-3 .lb-rank { color: var(--bronze); font-weight: 700; }
.lb-row-rank-3 .lb-name { color: #fde6d5; }

/* Skeleton */
.lb-skeleton {
  padding: 12px 10px;
  border-radius: var(--radius-sm);
  background: var(--row-bg);
}
.lb-sk-rank, .lb-sk-name, .lb-sk-bar {
  height: 12px;
  border-radius: 4px;
  background: linear-gradient(90deg,
    rgba(255, 255, 255, 0.04) 0%,
    rgba(255, 255, 255, 0.09) 50%,
    rgba(255, 255, 255, 0.04) 100%);
  background-size: 200% 100%;
  animation: skLoad 1.4s var(--ease-soft) infinite;
}
.lb-sk-rank { width: 16px; margin: 0 auto; }
.lb-sk-name { width: 60%; }
.lb-sk-bar { justify-self: end; width: 42px; }
@keyframes skLoad {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* Totals row */
.lb-totals {
  margin-top: 10px;
  padding: 14px 10px;
  border-top: 1px solid var(--line-strong);
}
.lb-totals-rank { /* spacer */ }
.lb-totals-name {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.lb-totals-stat {
  text-align: right;
  font-family: var(--font-mono);
  font-size: 14px;
  font-weight: 600;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}

/* Empty + error states */
.lb-empty, .lb-error {
  padding: 32px 10px;
  text-align: center;
  font-family: var(--font-body);
  font-size: 13px;
  color: var(--ink-soft);
}
.lb-error { color: #f0a0a0; }
.lb-retry {
  display: inline-block;
  margin-left: 6px;
  padding: 4px 10px;
  background: var(--control-bg);
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--ink);
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  cursor: pointer;
}
.lb-retry:hover { border-color: var(--line-strong); }

.lb-footer {
  margin-top: 18px;
  padding-top: 14px;
  border-top: 1px solid var(--line);
  text-align: center;
}
.lb-footer-meta {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

/* =========================================================
   MOBILE OPTIMIZATIONS
========================================================== */
@media (max-width: 720px) {
  .stage { padding: 70px 16px 56px; }

  .lb-card { padding: 16px; }

  /* Swap date filter: hide pill row, show native dropdown */
  .lb-filters { display: none; }
  .lb-period-select-wrap { display: block; }

  /* Stack role + sort vertically on smaller screens */
  .lb-control-row {
    grid-template-columns: 1fr;
    gap: 10px;
  }

  .lb-segmented button {
    padding: 7px 8px;
    font-size: 9px;
    letter-spacing: 0.14em;
  }

  /* Column grid: 6 cols (Funded removed). More room per stat col since
     we shed one column, while Rep column min-width stays robust. */
  .lb-col-header,
  .lb-row, .lb-skeleton,
  .lb-totals {
    grid-template-columns:
      32px
      minmax(100px, 1fr)
      minmax(46px, 54px)
      minmax(40px, 48px)
      minmax(40px, 48px)
      minmax(40px, 48px);
    gap: 5px;
  }
  .lb-col-header {
    padding: 0 6px 8px;
    font-size: 8px;
    letter-spacing: 0.12em;
  }
  .lb-row, .lb-skeleton { padding: 10px 6px; }
  .lb-totals { padding: 12px 6px; }
  .lb-name { font-size: 13px; }
  .lb-stat { font-size: 12px; }
  .lb-totals-stat { font-size: 13px; }

  /* Lower background-blur perf cost on mobile */
  .orb { filter: blur(80px); opacity: 0.7; }
  .bg-grain { display: none; }

  .corner-tl { top: 18px; left: 18px; }
  .corner-tr { top: 22px; right: 18px; }
}

@media (max-width: 480px) {
  /* Narrow phones — 6 cols. Names get a generous min-width floor since
     we lost the Funded column, freeing up real estate. */
  .lb-card { padding: 14px 10px; }
  .lb-row, .lb-skeleton { padding: 10px 4px; }
  .lb-col-header { padding: 0 4px 8px; }
  .lb-totals { padding: 12px 4px; }

  .lb-col-header,
  .lb-row, .lb-skeleton,
  .lb-totals {
    grid-template-columns:
      28px
      minmax(110px, 1fr)
      minmax(40px, 46px)
      minmax(34px, 40px)
      minmax(34px, 40px)
      minmax(34px, 40px);
    gap: 4px;
  }
  /* Shrink crest slightly on narrow phones so it doesn't crowd the rank col */
  .lb-crest { transform: scale(0.85); transform-origin: center; }
  .lb-name { font-size: 13px; }
  .lb-stat { font-size: 11.5px; }
  .lb-totals-stat { font-size: 12.5px; }

  /* nav buttons stack */
  .nav-row { grid-template-columns: 1fr; gap: 10px; }

  /* Custom range row stacks */
  .lb-custom-range {
    flex-direction: column;
    align-items: stretch;
  }
  .lb-apply { width: 100%; }
}

/* Very small phones (iPhone SE class, ~375px and below) —
   6 cols still fit comfortably. Name col stays generous. */
@media (max-width: 380px) {
  .lb-card { padding: 12px 8px; }
  .lb-row, .lb-skeleton { padding: 10px 3px; }

  .lb-col-header,
  .lb-row, .lb-skeleton,
  .lb-totals {
    grid-template-columns:
      26px
      minmax(96px, 1fr)
      minmax(36px, 42px)
      minmax(32px, 38px)
      minmax(32px, 38px)
      minmax(32px, 38px);
    gap: 3px;
  }
  .lb-name { font-size: 12.5px; }
  .lb-stat { font-size: 11px; }
  .lb-totals-stat { font-size: 11.5px; }
  .lb-col-header { font-size: 7.5px; letter-spacing: 0.08em; }
}

/* =========================================================
   ACCESSIBILITY
========================================================== */
@media (prefers-reduced-motion: reduce) {
  .fade-in { opacity: 1; transform: none; transition: none; }
  .lb-sk-rank, .lb-sk-name, .lb-sk-bar { animation: none; }
  .nav-btn { transition: none; }
  .shimmer { animation: none; }
}