:root {
  --ink: #172026;
  --muted: #5a6872;
  --paper: #f7f5ef;
  --surface: #ffffff;
  --line: #d9dedf;
  --charcoal: #10181d;
  --teal: #00a6a6;
  --coral: #e85d4f;
  --yellow: #f2c14e;
  --violet: #7056b8;
  --shadow: 0 24px 70px rgba(16, 24, 29, 0.16);
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  color: var(--ink);
  background: var(--paper);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  line-height: 1.5;
}

a {
  color: inherit;
}

.site-header {
  position: fixed;
  z-index: 10;
  top: 0;
  right: 0;
  left: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  min-height: 72px;
  padding: 14px clamp(18px, 5vw, 64px);
  color: #fff;
  background: rgba(16, 24, 29, 0.72);
  border-bottom: 1px solid rgba(255, 255, 255, 0.14);
  backdrop-filter: blur(18px);
}

.brand,
.top-nav,
.hero-actions,
.site-footer {
  display: flex;
  align-items: center;
}

.brand {
  gap: 10px;
  font-weight: 800;
  text-decoration: none;
}

.brand-mark {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  overflow: hidden;
  background: #141920;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.18);
}

.brand-mark img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.top-nav {
  gap: 6px;
}

.top-nav a,
.hero-actions a {
  border-radius: 8px;
  text-decoration: none;
  font-weight: 800;
}

.top-nav a {
  padding: 9px 12px;
  color: rgba(255, 255, 255, 0.84);
  font-size: 0.94rem;
}

.top-nav a:hover {
  color: #fff;
  background: rgba(255, 255, 255, 0.1);
}

.top-nav .nav-action {
  color: var(--charcoal);
  background: #fff;
}

.hero {
  position: relative;
  display: grid;
  align-items: end;
  min-height: 92vh;
  padding: 132px clamp(20px, 6vw, 80px) 72px;
  color: #fff;
  background:
    linear-gradient(90deg, rgba(16, 24, 29, 0.95) 0%, rgba(16, 24, 29, 0.72) 42%, rgba(16, 24, 29, 0.2) 100%),
    url("/site/hero-checkins.png") center / cover no-repeat,
    var(--charcoal);
}

.hero::after {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  height: 120px;
  content: "";
  background: linear-gradient(180deg, rgba(247, 245, 239, 0), var(--paper));
  pointer-events: none;
}

.hero-copy {
  position: relative;
  z-index: 1;
  width: min(680px, 100%);
}

.eyebrow {
  margin: 0 0 14px;
  color: var(--yellow);
  font-size: 0.78rem;
  font-weight: 900;
  letter-spacing: 0;
  text-transform: uppercase;
}

h1,
h2,
h3,
p {
  overflow-wrap: anywhere;
}

h1 {
  margin: 0;
  max-width: 11ch;
  font-size: clamp(3rem, 8vw, 6.8rem);
  line-height: 0.92;
  letter-spacing: 0;
}

.hero-lede {
  max-width: 640px;
  margin: 28px 0 0;
  color: rgba(255, 255, 255, 0.84);
  font-size: clamp(1.05rem, 2vw, 1.3rem);
}

.maker-note {
  display: inline-flex;
  align-items: center;
  margin: 18px 0 0;
  color: rgba(255, 255, 255, 0.88);
  font-size: 0.95rem;
  font-weight: 900;
}

.maker-note::before {
  width: 8px;
  height: 8px;
  margin-right: 10px;
  content: "";
  background: var(--yellow);
  border-radius: 999px;
  box-shadow: 0 0 0 6px rgba(242, 193, 78, 0.16);
}

.hero-actions {
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 34px;
}

.hero-actions a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 0 18px;
}

.primary-action {
  color: var(--charcoal);
  background: var(--yellow);
}

.secondary-action {
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.36);
}

.metrics,
.feature-band,
.streamer-section {
  width: min(1180px, calc(100% - 40px));
  margin: 0 auto;
}

.metrics {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
  transform: translateY(-28px);
}

.metric-card {
  position: relative;
  display: grid;
  grid-template-columns: 58px minmax(0, 1fr);
  gap: 16px;
  align-items: start;
  min-height: 156px;
  overflow: hidden;
  padding: 26px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 8px;
  box-shadow: 0 20px 60px rgba(16, 24, 29, 0.12);
}

.metric-card::before {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  height: 4px;
  content: "";
  background: linear-gradient(90deg, var(--yellow), var(--teal), var(--violet));
}

.metric-card--streamer::before {
  background: linear-gradient(90deg, var(--teal), var(--violet), var(--coral));
}

.metric-icon {
  position: relative;
  display: grid;
  place-items: center;
  width: 58px;
  height: 58px;
  background: #f7f3df;
  border: 1px solid rgba(16, 24, 29, 0.1);
  border-radius: 8px;
}

.metric-card--streamer .metric-icon {
  background: #edf7f6;
}

.metric-icon::before,
.metric-icon::after {
  position: absolute;
  content: "";
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.metric-card--viewer .metric-icon::before {
  width: 40px;
  height: 40px;
  background: var(--charcoal);
  mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 64 64' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='32' cy='20' r='12'/%3E%3Cpath d='M6 60C6 44 18 36 32 36C46 36 58 44 58 60Z'/%3E%3C/svg%3E") center / contain no-repeat;
}

.metric-card--viewer .metric-icon::after {
  display: none;
}

.metric-card--streamer .metric-icon::before {
  width: 40px;
  height: 40px;
  background: var(--charcoal);
  mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 64 64' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' d='M4 4A4 4 0 0 1 8 0H56A4 4 0 0 1 60 4V40A4 4 0 0 1 56 44H8A4 4 0 0 1 4 40ZM10 6V38H54V6Z'/%3E%3Cpath d='M27 44L23 54H41L37 44Z'/%3E%3Cpath d='M18 54H46V58H18Z'/%3E%3C/svg%3E") center / contain no-repeat;
}

.metric-card--streamer .metric-icon::after {
  display: none;
}

.metrics strong,
.metrics span {
  display: block;
}

.metrics strong {
  grid-column: 2;
  margin-top: 2px;
  font-size: clamp(1.2rem, 2vw, 1.55rem);
  line-height: 1.12;
}

.metrics .metric-card > span:last-child {
  grid-column: 2;
  margin-top: 8px;
  color: var(--muted);
  font-size: 1rem;
}

.feature-band,
.streamer-section {
  padding: 68px 0;
  scroll-margin-top: 96px;
}

.section-heading {
  max-width: 760px;
  margin-bottom: 28px;
}

.section-heading h2 {
  margin: 0;
  font-size: clamp(2rem, 4vw, 4rem);
  line-height: 1;
  letter-spacing: 0;
}

.feature-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1px;
  background: var(--line);
}

.feature-grid article {
  display: grid;
  grid-template-columns: 86px minmax(0, 1fr);
  gap: 22px;
  align-items: center;
  min-height: 142px;
  padding: 28px;
  background: var(--surface);
}

.feature-grid h3 {
  margin: 0;
  font-size: clamp(1.35rem, 2vw, 1.8rem);
  line-height: 1.1;
}

.feature-copy {
  min-width: 0;
}

.feature-icon {
  position: relative;
  display: inline-grid;
  flex: 0 0 auto;
  place-items: center;
  width: 74px;
  height: 74px;
  color: var(--charcoal);
  background: var(--yellow);
  border: 1px solid rgba(16, 24, 29, 0.12);
  border-radius: 8px;
  font-size: 0.76rem;
  font-weight: 900;
}

.feature-icon::before,
.feature-icon::after {
  position: absolute;
  content: "";
}

.feature-icon--streak::before {
  width: 44px;
  height: 52px;
  background: var(--charcoal);
  mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 64 80' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M33 1C18 14 13 27 16 43C9 37 8 30 9 25C1 36 -2 53 9 68C17 79 29 82 32 79C22 67 27 55 35 47C42 40 40 31 35 24C47 32 52 46 48 61C58 52 63 35 53 20C50 32 48 35 45 39C43 25 37 16 33 1Z'/%3E%3C/svg%3E") center / contain no-repeat;
}

.feature-icon--first::before {
  width: 48px;
  height: 48px;
  background: var(--charcoal);
  mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 64 64' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M19 6H45V13H56C56 28 50 38 39 40C38 44 36 47 34 49V54H45V60H19V54H30V49C28 47 26 44 25 40C14 38 8 28 8 13H19V6ZM14 19C15 27 19 32 24 34C22 30 20 25 20 19H14ZM44 19C44 25 42 30 40 34C45 32 49 27 50 19H44Z'/%3E%3C/svg%3E") center / contain no-repeat;
}

.feature-icon--boost::before {
  width: 26px;
  height: 50px;
  background: var(--charcoal);
  clip-path: polygon(58% 0, 100% 0, 62% 42%, 100% 42%, 34% 100%, 48% 54%, 0 54%);
}

.feature-icon--leaderboard::before {
  width: 44px;
  height: 38px;
  background:
    linear-gradient(var(--charcoal), var(--charcoal)) 2px 22px / 9px 16px no-repeat,
    linear-gradient(var(--charcoal), var(--charcoal)) 18px 12px / 9px 26px no-repeat,
    linear-gradient(var(--charcoal), var(--charcoal)) 34px 0 / 9px 38px no-repeat;
}

.feature-icon--dock::before {
  width: 46px;
  height: 32px;
  border: 6px solid var(--charcoal);
  border-radius: 5px;
}

.feature-icon--dock::after {
  width: 32px;
  height: 6px;
  background: var(--charcoal);
  border-radius: 999px;
  transform: translateY(26px);
}

.feature-icon--giveaway::before {
  width: 42px;
  height: 36px;
  background:
    linear-gradient(var(--charcoal), var(--charcoal)) center / 7px 100% no-repeat,
    var(--charcoal);
  border-radius: 5px;
  transform: translateY(7px);
}

.feature-icon--giveaway::after {
  width: 52px;
  height: 12px;
  background: var(--charcoal);
  border-radius: 5px;
  transform: translateY(-18px);
}

.coming-soon-tag {
  display: inline-block;
  padding: 2px 8px;
  background: rgba(112, 86, 184, 0.1);
  color: var(--violet);
  border: 1px solid rgba(112, 86, 184, 0.22);
  border-radius: 999px;
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  vertical-align: middle;
  white-space: nowrap;
}

.feature-grid p {
  margin: 8px 0 0;
  color: var(--muted);
  font-size: 1.02rem;
}

.feature-more {
  display: grid;
  grid-template-columns: 220px minmax(0, 1fr);
  gap: 22px;
  align-items: start;
  margin-top: 18px;
  padding: 24px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 8px;
}

.feature-more h3 {
  margin: 0;
  font-size: 1.2rem;
}

.feature-more ul {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.feature-more li {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 48px;
  padding: 7px 12px 7px 7px;
  color: var(--ink);
  background: #f8faf8;
  border: 1px solid var(--line);
  border-radius: 8px;
  font-size: 0.92rem;
  font-weight: 800;
}

.included-icon {
  position: relative;
  display: inline-grid;
  flex: 0 0 auto;
  place-items: center;
  width: 32px;
  height: 32px;
  color: #fff;
  background: linear-gradient(135deg, var(--teal), var(--violet));
  border-radius: 8px;
  font-size: 0.68rem;
}

.included-icon::before {
  width: 13px;
  height: 7px;
  content: "";
  border-bottom: 3px solid #fff;
  border-left: 3px solid #fff;
  transform: translateY(-1px) rotate(-45deg);
}

.streamer-section {
  padding-bottom: 92px;
}

.legal-page {
  width: min(860px, calc(100% - 40px));
  margin: 0 auto;
  padding: 132px 0 84px;
}

.legal-page h1 {
  max-width: none;
  margin: 0;
  color: var(--ink);
  font-size: clamp(2.6rem, 6vw, 5rem);
  line-height: 0.95;
}

.legal-page h2 {
  margin: 40px 0 10px;
  color: var(--ink);
  font-size: 1.25rem;
  line-height: 1.25;
}

.legal-page p,
.legal-page li {
  color: #34424d;
}

.legal-page ul,
.legal-page ol {
  margin: 0 0 18px;
  padding-left: 24px;
}

.legal-page li {
  margin-bottom: 7px;
}

.legal-page a {
  color: var(--teal);
  font-weight: 800;
}

.legal-subtitle {
  margin: 12px 0 44px;
  color: var(--muted);
  font-weight: 800;
}

.legal-content {
  padding: 34px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 8px;
}

.legal-content hr {
  margin: 42px 0 24px;
  border: 0;
  border-top: 1px solid var(--line);
}

.streamer-list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}

.streamer-card {
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr) auto;
  gap: 14px;
  align-items: center;
  min-height: 92px;
  padding: 18px;
  color: var(--ink);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 8px;
  text-decoration: none;
  box-shadow: 0 12px 36px rgba(16, 24, 29, 0.08);
}

a.streamer-card:hover {
  border-color: rgba(0, 166, 166, 0.55);
  transform: translateY(-2px);
}

.avatar {
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  object-fit: cover;
  color: #fff;
  background: linear-gradient(135deg, var(--teal), var(--violet));
  border-radius: 8px;
  font-weight: 900;
}

.avatar--fallback {
  text-transform: uppercase;
}

.streamer-copy,
.streamer-name,
.streamer-meta,
.checkin-count,
.checkin-count small {
  display: block;
}

.streamer-copy {
  min-width: 0;
}

.streamer-name {
  overflow: hidden;
  font-weight: 900;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.streamer-meta {
  margin-top: 4px;
  color: var(--muted);
  font-size: 0.9rem;
}

.live-dot,
.idle-dot {
  display: inline-block;
  width: 9px;
  height: 9px;
  margin-right: 6px;
  border-radius: 999px;
}

.live-dot {
  background: var(--coral);
  box-shadow: 0 0 0 5px rgba(232, 93, 79, 0.16);
}

.idle-dot {
  background: var(--teal);
}

.checkin-count {
  min-width: 76px;
  text-align: right;
  font-weight: 900;
}

.checkin-count small {
  color: var(--muted);
  font-size: 0.75rem;
  font-weight: 800;
}

.loading-state,
.empty-state {
  grid-column: 1 / -1;
  margin: 0;
  padding: 28px;
  color: var(--muted);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 8px;
}

.site-footer {
  justify-content: center;
  gap: 18px;
  padding: 34px 20px;
  color: rgba(255, 255, 255, 0.72);
  background: var(--charcoal);
}

.site-footer span {
  color: #fff;
  font-weight: 900;
}

.site-footer a {
  text-decoration: none;
}

@media (max-width: 920px) {
  .site-header {
    position: absolute;
  }

  .top-nav a:not(.nav-action) {
    display: none;
  }

  .hero {
    min-height: 88vh;
    background:
      linear-gradient(180deg, rgba(16, 24, 29, 0.98) 0%, rgba(16, 24, 29, 0.74) 58%, rgba(16, 24, 29, 0.34) 100%),
      url("/site/hero-checkins.png") center / cover no-repeat,
      var(--charcoal);
  }

  .hero h1 {
    max-width: 10ch;
  }

  .metrics,
  .section-heading,
  .feature-grid,
  .feature-more,
  .streamer-list {
    grid-template-columns: 1fr;
  }

  .feature-more ul {
    grid-template-columns: 1fr;
  }

  .feature-grid article {
    grid-template-columns: 64px minmax(0, 1fr);
    gap: 16px;
    min-height: 118px;
    padding: 22px;
  }

  .feature-icon {
    width: 56px;
    height: 56px;
  }

  .feature-icon--streak::before {
    width: 34px;
    height: 40px;
  }

  .feature-icon--first::before {
    width: 38px;
    height: 38px;
  }

  .feature-icon--boost::before {
    width: 20px;
    height: 38px;
  }

  .feature-icon--leaderboard::before {
    width: 34px;
    height: 30px;
    background:
      linear-gradient(var(--charcoal), var(--charcoal)) 1px 17px / 7px 13px no-repeat,
      linear-gradient(var(--charcoal), var(--charcoal)) 14px 9px / 7px 21px no-repeat,
      linear-gradient(var(--charcoal), var(--charcoal)) 27px 0 / 7px 30px no-repeat;
  }

  .feature-icon--dock::before {
    width: 36px;
    height: 25px;
    border-width: 5px;
  }

  .feature-icon--dock::after {
    width: 24px;
    height: 5px;
    transform: translateY(21px);
  }

  .feature-icon--giveaway::before {
    width: 32px;
    height: 28px;
    transform: translateY(6px);
  }

  .feature-icon--giveaway::after {
    width: 40px;
    height: 10px;
    transform: translateY(-14px);
  }

  .metrics {
    transform: none;
    margin-top: 28px;
  }

  .metric-card {
    grid-template-columns: 52px minmax(0, 1fr);
    min-height: 136px;
    padding: 22px;
  }

  .metric-icon {
    width: 52px;
    height: 52px;
  }

  .feature-band,
  .streamer-section {
    padding: 48px 0;
  }
}

@media (max-width: 560px) {
  .site-header {
    min-height: 64px;
  }

  .brand span:last-child {
    max-width: 132px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .hero {
    min-height: 840px;
    padding-top: 108px;
  }

  .hero-actions a {
    width: 100%;
  }

  .streamer-card {
    grid-template-columns: 48px minmax(0, 1fr);
  }

  .checkin-count {
    grid-column: 2;
    text-align: left;
  }
}

/* Scroll reveal */
.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.55s ease, transform 0.55s ease;
}

.reveal.reveal--left  { transform: translateX(-56px); }
.reveal.reveal--right { transform: translateX(56px); }

.reveal.is-visible {
  opacity: 1;
  transform: none;
}

/* Hero entrance (fires on load) */
@keyframes fly-up {
  from { opacity: 0; transform: translateY(22px); }
  to   { opacity: 1; transform: none; }
}

.hero-copy > * {
  animation: fly-up 0.65s ease both;
}
.hero-copy > *:nth-child(1) { animation-delay: 0.05s; }
.hero-copy > *:nth-child(2) { animation-delay: 0.17s; }
.hero-copy > *:nth-child(3) { animation-delay: 0.29s; }
.hero-copy > *:nth-child(4) { animation-delay: 0.39s; }
.hero-copy > *:nth-child(5) { animation-delay: 0.49s; }

@media (prefers-reduced-motion: reduce) {
  .reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }

  .hero-copy > * {
    animation: none;
  }
}

/* ═══════════════════════════════════════
   Streamer Leaderboard page (/streamers)
═══════════════════════════════════════ */

/* Hero — full width, sits outside the constrained content area */
.lb-hero {
  text-align: center;
  padding: 60px 24px 52px;
  border-bottom: 1px solid var(--line);
}

.lb-hero h1 {
  margin: 0 0 12px;
  font-size: clamp(1.6rem, 4vw, 3rem);
  font-weight: 900;
  line-height: 1.08;
  white-space: nowrap;
  text-align: center;
  color: var(--ink);
}

.lb-hero p {
  margin: 0;
  color: var(--muted);
  font-size: 1.1rem;
}

.lb-page {
  max-width: 880px;
  margin: 0 auto;
  padding: 48px 24px 96px;
}

/* Hall of Fame */
.records-heading {
  margin: 0 0 18px;
  font-size: 0.8rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
}

.records-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 16px;
  margin-bottom: 52px;
}

.record-card {
  position: relative;
  padding: 22px 20px 20px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 12px;
  box-shadow: 0 4px 20px rgba(16, 24, 29, 0.05);
  overflow: hidden;
}

.record-card::before {
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  content: "";
}

.record-card--peak::before   { background: linear-gradient(90deg, var(--yellow), #e8a020); }
.record-card--total::before  { background: linear-gradient(90deg, var(--teal), var(--violet)); }
.record-card--streams::before { background: linear-gradient(90deg, var(--violet), var(--coral)); }

/* Trophy badges */
.record-badge {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border-radius: 12px;
  margin-bottom: 14px;
}

.record-badge--peak    { background: #fef9ec; }
.record-badge--total   { background: #edf7f6; }
.record-badge--streams { background: #f3f0fb; }

.record-badge-icon {
  position: relative;
  display: block;
  width: 28px;
  height: 28px;
}

/* Trophy cup (reuses the feature-icon--first path) */
.record-badge-icon--peak {
  background: var(--yellow);
  mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 64 64' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M19 6H45V13H56C56 28 50 38 39 40C38 44 36 47 34 49V54H45V60H19V54H30V49C28 47 26 44 25 40C14 38 8 28 8 13H19V6ZM14 19C15 27 19 32 24 34C22 30 20 25 20 19H14ZM44 19C44 25 42 30 40 34C45 32 49 27 50 19H44Z'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* 5-pointed star */
.record-badge-icon--total {
  background: var(--teal);
  mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 64 64' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M32 4L39 22H58L43 33L49 52L32 40L15 52L21 33L6 22H25Z'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* Flame (reuses the feature-icon--streak path) */
.record-badge-icon--streams {
  height: 34px;
  background: var(--violet);
  mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 64 80' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M33 1C18 14 13 27 16 43C9 37 8 30 9 25C1 36 -2 53 9 68C17 79 29 82 32 79C22 67 27 55 35 47C42 40 40 31 35 24C47 32 52 46 48 61C58 52 63 35 53 20C50 32 48 35 45 39C43 25 37 16 33 1Z'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* Record card text */
.record-title {
  margin: 0 0 4px;
  font-size: 1rem;
  font-weight: 800;
  color: var(--ink);
}

.record-desc {
  margin: 0 0 16px;
  font-size: 0.85rem;
  color: var(--muted);
  line-height: 1.4;
}

/* Record holder content (rendered by JS) */
.record-holder-inner {
  display: flex;
  align-items: center;
  gap: 10px;
}

.record-avatar {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
}

.record-avatar--fallback {
  display: grid;
  place-items: center;
  background: var(--charcoal);
  color: #fff;
  font-size: 0.72rem;
  font-weight: 700;
  flex-shrink: 0;
}

.record-holder-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.record-holder-name {
  font-weight: 700;
  font-size: 0.95rem;
  color: var(--ink);
  text-decoration: none;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

a.record-holder-name:hover { text-decoration: underline; }

.record-holder-stat {
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--muted);
}

.record-holder-date {
  font-size: 0.78rem;
  color: var(--muted);
}

.record-empty {
  margin: 0;
  font-size: 0.9rem;
  color: var(--muted);
}

/* Skeleton shimmer */
.record-skeleton-row {
  height: 38px;
  border-radius: 8px;
  background: linear-gradient(90deg, #ececec 0%, #e0e0e0 50%, #ececec 100%);
  background-size: 200% 100%;
  animation: lb-shimmer 1.4s infinite;
}

@keyframes lb-shimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* Tabs */
.lb-section { margin-top: 8px; }

.lb-tabs {
  display: flex;
  gap: 0;
  border-bottom: 2px solid var(--line);
  margin-bottom: 0;
}

.lb-tab {
  padding: 10px 22px;
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  margin-bottom: -2px;
  cursor: pointer;
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--muted);
  transition: color 0.15s, border-color 0.15s;
  font-family: inherit;
}

.lb-tab:hover { color: var(--ink); }

.lb-tab.is-active {
  color: var(--ink);
  border-bottom-color: var(--charcoal);
}

/* Table */
.lb-table {
  background: #fff;
  border: 1px solid var(--line);
  border-top: none;
  border-radius: 0 0 12px 12px;
  overflow: hidden;
  box-shadow: 0 6px 28px rgba(16, 24, 29, 0.07);
}

.lb-table-head {
  display: grid;
  grid-template-columns: 52px 44px 1fr 110px 80px;
  column-gap: 12px;
  align-items: center;
  padding: 10px 20px;
  background: var(--paper);
  border-bottom: 1px solid var(--line);
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--muted);
}

.lb-row {
  display: grid;
  grid-template-columns: 52px 44px 1fr 110px 80px;
  column-gap: 12px;
  align-items: center;
  padding: 12px 20px;
  border-bottom: 1px solid var(--line);
  transition: background 0.1s;
}

.lb-row:last-child { border-bottom: none; }
.lb-row:hover { background: var(--paper); }

.lb-rank {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  font-weight: 800;
  font-size: 0.88rem;
  color: var(--muted);
}

.lb-rank--1 { background: #ffd700; color: #6b4400; }
.lb-rank--2 { background: #e2e4e6; color: #4a5560; }
.lb-rank--3 { background: #ecd3b0; color: #7a5020; }

.lb-avatar {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  object-fit: cover;
}

.lb-avatar--fallback {
  display: grid;
  place-items: center;
  background: var(--charcoal);
  color: #fff;
  font-size: 0.7rem;
  font-weight: 700;
}

.lb-name-wrap {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.lb-name {
  font-weight: 700;
  font-size: 0.95rem;
  color: var(--ink);
  text-decoration: none;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

a.lb-name:hover { text-decoration: underline; }

.lb-col-right { text-align: right; }

.lb-stat {
  text-align: right;
  font-weight: 700;
  font-size: 0.95rem;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
}

.lb-stat--streams {
  color: var(--muted);
  font-weight: 600;
}

.lb-state {
  padding: 48px 24px;
  text-align: center;
  color: var(--muted);
  font-size: 0.95rem;
  margin: 0;
}

/* Responsive */
@media (max-width: 600px) {
  .lb-table-head,
  .lb-row {
    grid-template-columns: 44px 38px 1fr 90px;
    padding-left: 14px;
    padding-right: 14px;
  }

  .lb-col-streams,
  .lb-stat--streams { display: none; }

  .lb-tab { padding: 10px 16px; font-size: 0.9rem; }
}