/* Design tokens lifted from videostats.communitrics.com (styles.b839c46d27.css) */
:root {
  --font-sans: "Manrope", "Hanken Grotesk", system-ui, sans-serif;
  --font-numeric: "Manrope", "Hanken Grotesk", system-ui, sans-serif;

  --color-page: #121315;
  --color-surface: #191b1e;
  --color-surface-raised: #212428;
  --color-border: #2a2d32;
  --color-border-strong: #3a3e44;
  --color-text: #eceef0;
  --color-text-muted: #9097a0;
  --color-brand: #db421f;
  --channel-accent: #3fbf8f;
  --color-accent: var(--channel-accent, var(--color-brand));
  --color-accent-soft: color-mix(in oklab, var(--color-accent) 55%, #fff);
  --color-success: #4ade80;
  --color-danger: #f87171;
  --color-info: #63b1e9;

  --font-size-11: .6875rem;
  --font-size-12: .75rem;
  --font-size-13: .8125rem;
  --font-size-14: .875rem;
  --font-size-16: 1rem;
  --font-size-20: 1.25rem;
  --font-size-24: 1.5rem;
  --font-size-32: 2rem;
  --font-size-hero: clamp(1.7rem, 3.6vw, 2.5rem);

  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
  --font-weight-heavy: 800;

  --radius-card: 12px;
  --radius-panel: 10px;
  --radius-control: 8px;
  --radius-inner: 6px;
  --radius-pill: 999px;

  --container-padding: 1.5rem;
  --container-max: 1180px;
  --transition-fast: .12s ease;
  --shadow-card: 0 1px 0 rgb(255 255 255 / .03) inset;
}

@font-face {
  font-family: "Manrope";
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url("fonts/Manrope-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+2000-206F, U+2192, U+2212, U+2215;
}
@font-face {
  font-family: "Manrope";
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url("fonts/Manrope-cyrillic.woff2") format("woff2");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--color-page);
  color: var(--color-text);
  font-family: var(--font-sans);
  font-size: var(--font-size-14);
  line-height: 1.4;
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }

/* ---------------------------------------------------------------- header */
.site-header {
  position: sticky;
  top: 0;
  z-index: 30;
  background: color-mix(in srgb, var(--color-page) 88%, transparent);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--color-border);
}
.header-inner {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 var(--container-padding);
  height: 60px;
  display: flex;
  align-items: center;
  gap: 1.25rem;
}
.brand-lockup { display: inline-flex; align-items: baseline; gap: .1rem; }
.brand-wordmark {
  display: inline-flex;
  align-items: baseline;
  font-size: var(--font-size-20);
  font-weight: var(--font-weight-heavy);
  letter-spacing: -.03em;
  line-height: 1;
}
.brand-dim { font-weight: var(--font-weight-regular); color: var(--color-text-muted); }
.brand-dot {
  display: inline-block;
  width: .2em; height: .2em;
  margin-left: .06em;
  border-radius: 50%;
  background: var(--color-brand);
}
.channel-tabs { display: flex; gap: .25rem; overflow-x: auto; scrollbar-width: none; }
.channel-tabs::-webkit-scrollbar { display: none; }
.tab-button {
  position: relative;
  height: 34px;
  padding: 0 .6rem;
  border-radius: var(--radius-control);
  color: var(--color-text-muted);
  font-size: var(--font-size-13);
  font-weight: var(--font-weight-semibold);
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  white-space: nowrap;
  transition: background-color var(--transition-fast), color var(--transition-fast);
}
.tab-button:hover { background: #ffffff0f; color: var(--color-text); }
.tab-button.active { color: var(--color-text); background: var(--color-surface-raised); }
.tab-button img { width: 20px; height: 20px; border-radius: 50%; object-fit: cover; }
.header-right { margin-left: auto; display: flex; align-items: center; gap: .5rem; }
.pill-mode {
  font-size: var(--font-size-11);
  font-weight: var(--font-weight-semibold);
  letter-spacing: .06em;
  text-transform: uppercase;
  padding: .3rem .55rem;
  border-radius: var(--radius-pill);
  border: 1px solid var(--color-border-strong);
  color: var(--color-text-muted);
}
.pill-mode.live { color: var(--color-success); border-color: color-mix(in srgb, var(--color-success) 40%, transparent); }

/* --------------------------------------------------------------- layout */
.container { max-width: var(--container-max); margin: 0 auto; padding: 0 var(--container-padding) 4rem; }
.section-label {
  margin: 2.25rem 0 .75rem;
  font-size: var(--font-size-11);
  font-weight: var(--font-weight-semibold);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}
.panel {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
}

/* ----------------------------------------------------------------- hero */
.hero { padding: 3.25rem 0 .5rem; }
.hero h1 {
  margin: 0 0 .75rem;
  font-size: var(--font-size-hero);
  font-weight: var(--font-weight-heavy);
  letter-spacing: -.03em;
  line-height: 1.1;
  max-width: 26ch;
}
.hero p { margin: 0; color: var(--color-text-muted); font-size: var(--font-size-16); max-width: 52ch; }

.latest-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }
.latest-item { display: flex; align-items: center; gap: .75rem; min-width: 0; }
.latest-item img {
  width: 104px; aspect-ratio: 16 / 9; object-fit: cover;
  border-radius: var(--radius-inner); flex: none;
  background: var(--color-surface-raised);
}
.latest-item .t {
  font-size: var(--font-size-14); font-weight: var(--font-weight-semibold);
  overflow: hidden; text-overflow: ellipsis; display: -webkit-box;
  -webkit-line-clamp: 2; -webkit-box-orient: vertical;
}
.latest-item .s { font-size: var(--font-size-12); color: var(--color-text-muted); margin-top: .15rem; }

.channel-strip { display: flex; gap: .75rem; flex-wrap: wrap; margin-top: 1.75rem; }
.channel-avatar-lg {
  width: 56px; height: 56px; border-radius: 50%; object-fit: cover;
  border: 2px solid transparent; outline: 1px solid var(--color-border-strong);
}
.channel-avatar-lg.active { border-color: var(--color-accent); outline-color: transparent; }

/* --------------------------------------------------------- channel head */
.channel-head { display: flex; align-items: center; gap: 1rem; padding: 2rem 0 1.25rem; }
.channel-head img { width: 64px; height: 64px; border-radius: 50%; object-fit: cover; }
.channel-head h1 { margin: 0; font-size: var(--font-size-24); font-weight: var(--font-weight-heavy); letter-spacing: -.02em; }
.channel-head .meta { color: var(--color-text-muted); font-size: var(--font-size-13); margin-top: .2rem; }

/* ----------------------------------------------------------- stat cards */
.stats-row {
  display: flex;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-card);
  overflow: hidden;
}
.stat-card {
  flex: 1 1 0;
  min-width: 0;
  padding: .9rem 1.25rem 1rem;
  border-left: 1px solid var(--color-border);
  display: flex; flex-direction: column; gap: .3rem;
}
.stat-card:first-child { border-left: 0; }
.stat-card h3 {
  margin: 0;
  font-size: var(--font-size-13);
  font-weight: var(--font-weight-medium);
  color: var(--color-text-muted);
  white-space: nowrap;
}
.stat-value {
  font-size: var(--font-size-32);
  font-weight: var(--font-weight-bold);
  letter-spacing: -.02em;
  line-height: 1.2;
  font-variant-numeric: tabular-nums;
}
.stat-delta { font-size: var(--font-size-12); color: var(--color-text-muted); }
.stat-delta b { color: var(--color-success); font-weight: var(--font-weight-semibold); }
.stat-delta.down b { color: var(--color-danger); }

/* ---------------------------------------------------------------- tabs */
.view-tabs {
  display: flex; gap: .25rem; margin: 1.25rem 0 .75rem;
  border-bottom: 1px solid var(--color-border);
  overflow-x: auto; scrollbar-width: none;
}
.view-tabs::-webkit-scrollbar { display: none; }
.view-tab {
  white-space: nowrap;
  padding: .55rem .75rem;
  font-size: var(--font-size-13);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-muted);
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  transition: color var(--transition-fast), border-color var(--transition-fast);
}
.view-tab:hover { color: var(--color-text); }
.view-tab.active { color: var(--color-text); border-bottom-color: var(--color-accent); }

/* --------------------------------------------------------------- chart */
.chart-card { padding: 1.25rem 1.25rem 1rem; }
.chart-head { display: flex; flex-wrap: wrap; align-items: flex-start; gap: .75rem 1rem; margin-bottom: .75rem; }
.chart-title { margin: 0; font-size: var(--font-size-16); font-weight: var(--font-weight-bold); letter-spacing: -.01em; }
.chart-sub { margin: .25rem 0 0; font-size: var(--font-size-13); color: var(--color-text-muted); }
.chart-tools { margin-left: auto; display: flex; gap: .35rem; flex-wrap: wrap; }
.seg {
  display: inline-flex; padding: 2px; gap: 2px;
  background: var(--color-surface-raised);
  border-radius: var(--radius-control);
}
.seg button {
  padding: .3rem .6rem; border-radius: var(--radius-inner);
  font-size: var(--font-size-12); font-weight: var(--font-weight-semibold);
  color: var(--color-text-muted); transition: var(--transition-fast);
}
.seg button:hover { color: var(--color-text); }
.seg button.active { background: var(--color-page); color: var(--color-text); }

.chart-wrap { position: relative; height: 320px; margin-top: .5rem; }
.chart-wrap svg { display: block; width: 100%; height: 100%; overflow: visible; }
.chart-tip {
  position: absolute; pointer-events: none; z-index: 5;
  background: var(--color-page);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-control);
  padding: .5rem .65rem;
  font-size: var(--font-size-12);
  box-shadow: 0 8px 24px #00000066;
  transform: translate(-50%, -120%);
  white-space: nowrap;
  opacity: 0; transition: opacity .1s ease;
}
.chart-tip.show { opacity: 1; }
.chart-tip .v { font-weight: var(--font-weight-bold); font-size: var(--font-size-14); font-variant-numeric: tabular-nums; }
.chart-tip .d { color: var(--color-text-muted); }

/* --------------------------------------------------------------- table */
.table-panel { margin-top: 1rem; overflow: hidden; }
.video-table { width: 100%; border-collapse: collapse; }
.video-table thead th {
  padding: .7rem .75rem;
  font-size: var(--font-size-11);
  font-weight: var(--font-weight-semibold);
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  text-align: right;
  white-space: nowrap;
  border-bottom: 1px solid var(--color-border);
  cursor: pointer;
  user-select: none;
}
.video-table thead th:first-child, .video-table thead th.title-col { text-align: left; }
.video-table thead th.sorted { color: var(--color-text); }
.video-table tbody td {
  padding: .5rem .75rem;
  border-bottom: 1px solid var(--color-border);
  text-align: right;
  font-variant-numeric: tabular-nums;
  color: var(--color-text);
  white-space: nowrap;
}
.video-table tbody tr:last-child td { border-bottom: 0; }
.video-table tbody tr:hover { background: color-mix(in srgb, var(--color-accent) 8%, transparent); }
.video-table .rank { color: var(--color-text-muted); width: 3rem; font-size: var(--font-size-13); }
.video-table .title-col { text-align: left; white-space: normal; }
.v-cell { display: flex; align-items: center; gap: .75rem; min-width: 0; }
.v-cell img {
  width: 96px; aspect-ratio: 16 / 9; object-fit: cover;
  border-radius: var(--radius-inner); flex: none; background: var(--color-surface-raised);
}
.v-cell .v-title {
  font-size: var(--font-size-13); font-weight: var(--font-weight-medium);
  line-height: 1.35; display: -webkit-box; -webkit-line-clamp: 2;
  -webkit-box-orient: vertical; overflow: hidden;
}
.v-cell .v-date { font-size: var(--font-size-11); color: var(--color-text-muted); margin-top: .2rem; }
.num { font-weight: var(--font-weight-medium); }
.num.muted { color: var(--color-text-muted); font-weight: var(--font-weight-regular); }
.gain.up { color: var(--color-success); }
.gain.down { color: var(--color-danger); }
.dur {
  font-size: var(--font-size-11);
  color: var(--color-text-muted);
  background: var(--color-surface-raised);
  border-radius: var(--radius-xs, 3px);
  padding: .1rem .3rem;
}
.empty-state { padding: 2.5rem 1.25rem; text-align: center; color: var(--color-text-muted); font-size: var(--font-size-13); }
footer {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 2rem var(--container-padding) 3rem;
  color: var(--color-text-muted);
  font-size: var(--font-size-12);
  border-top: 1px solid var(--color-border);
}
footer a { color: var(--color-text); text-decoration: underline; text-decoration-color: var(--color-border-strong); text-underline-offset: 3px; }
footer a:hover { text-decoration-color: var(--color-accent); }

@media (max-width: 820px) {
  :root { --container-padding: 1rem; }
  .header-inner { gap: .75rem; height: 56px; }
  .brand-wordmark { font-size: var(--font-size-16); }
  .channel-tabs { display: none; }
  .latest-grid { grid-template-columns: 1fr; }
  .stats-row { flex-wrap: wrap; }
  .stat-card { flex: 1 1 46%; border-left: 1px solid var(--color-border); }
  .stat-card:nth-child(odd) { border-left: 0; }
  .stat-value { font-size: var(--font-size-24); }
  .chart-wrap { height: 240px; }
  .video-table .hide-sm { display: none; }
  .v-cell img { width: 72px; }
  .hero { padding-top: 2rem; }
}

.table-note {
  padding: .75rem 1.25rem;
  border-top: 1px solid var(--color-border);
  color: var(--color-text-muted);
  font-size: var(--font-size-12);
}
.table-note code {
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: var(--font-size-11);
  background: var(--color-surface-raised);
  border-radius: var(--radius-xs, 3px);
  padding: .1rem .3rem;
  color: var(--color-text);
}

/* --------------------------------------------------- clickable rows / links */
.video-table tbody tr.clickable { cursor: pointer; }
.video-table tbody tr.clickable:hover { background: color-mix(in srgb, var(--color-accent) 10%, transparent); }
.crumb {
  display: inline-flex;
  align-items: center;
  margin: 1.5rem 0 .75rem;
  font-size: var(--font-size-13);
  color: var(--color-text-muted);
  transition: color var(--transition-fast);
}
.crumb:hover { color: var(--color-text); }

/* ------------------------------------------------------------- video page */
.video-hero {
  display: flex;
  gap: 1.25rem;
  align-items: flex-start;
  margin-bottom: 1.5rem;
}
.video-hero img {
  width: 280px;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: var(--radius-card);
  background: var(--color-surface-raised);
  flex: none;
}
.video-hero h1 {
  margin: 0 0 .5rem;
  font-size: var(--font-size-24);
  font-weight: var(--font-weight-heavy);
  letter-spacing: -.02em;
  line-height: 1.2;
}
.video-hero .meta { font-size: var(--font-size-13); color: var(--color-text-muted); }
.video-hero .ext { color: var(--color-text); text-decoration: underline; text-decoration-color: var(--color-border-strong); text-underline-offset: 3px; }
.video-hero .ext:hover { text-decoration-color: var(--color-accent); }

@media (max-width: 720px) {
  .video-hero { flex-direction: column; gap: .85rem; }
  .video-hero img { width: 100%; }
  .video-hero h1 { font-size: var(--font-size-20); }
}

/* stat cards double as chart-metric switches */
.stat-card[data-m] {
  cursor: pointer;
  transition: background-color var(--transition-fast), box-shadow var(--transition-fast);
}
.stat-card[data-m]:hover { background: color-mix(in srgb, var(--color-accent) 7%, transparent); }
.stat-card.active {
  background: color-mix(in srgb, var(--color-accent) 9%, transparent);
  box-shadow: inset 0 2px 0 var(--color-accent);
}
.stat-card.active h3 { color: var(--color-accent-soft); }
.stat-card[data-m]:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: -2px;
}