* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body {
  display: flex;
  flex-direction: column;
  width: 100vw;
  height: 100vh;
  background: #0b0b0c;
  color: #f2f2f2;
  font-family: -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Helvetica, Arial, sans-serif;
  overflow: hidden;
}
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.12); border-radius: 6px; }
::-webkit-scrollbar-track { background: transparent; }

.header {
  height: 68px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 24px;
}
.header-left { display: flex; align-items: center; gap: 12px; flex-shrink: 0; }
.logo-mark {
  width: 34px;
  height: 34px;
  border-radius: 10px;
  background: linear-gradient(140deg, #FF7A5C 0%, #FF3B30 55%, #D81D12 100%);
  box-shadow: 0 3px 10px rgba(255, 59, 48, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.25);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.logo-mark svg { margin-left: 1px; }
.logo-text {
  display: flex;
  flex-direction: column;
  line-height: 1.25;
}
.logo-text .title { font-size: 14px; font-weight: 700; letter-spacing: 0.02em; color: #f5f5f5; white-space: nowrap; }
.logo-text .subtitle { font-size: 11.5px; color: #85858a; white-space: nowrap; }

.header-account { display: flex; align-items: center; gap: 12px; flex-shrink: 0; }
.account-email { font-size: 12.5px; font-weight: 600; color: #b4b4b8; }
.account-logout {
  font-family: inherit;
  font-size: 12px;
  font-weight: 600;
  color: #b4b4b8;
  background: transparent;
  border: 1px solid rgba(255,255,255,0.14);
  border-radius: 8px;
  padding: 6px 12px;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.account-logout:hover { background: rgba(255,255,255,0.05); color: #f5f5f5; border-color: rgba(255,255,255,0.24); }

.divider { height: 1px; flex-shrink: 0; background: linear-gradient(90deg, rgba(255,255,255,0.1), rgba(255,255,255,0.02)); }

.body-row { flex: 1; display: flex; overflow: hidden; }

.sidebar {
  width: 232px;
  flex-shrink: 0;
  border-right: 1px solid rgba(255,255,255,0.07);
  padding: 16px 10px;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
}
.sidebar-nav {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

/* Dismissible daily-fill countdown, pinned to the bottom of the
   sidebar (margin-top:auto) rather than living in the header — a
   notification-style card here is easy to notice without forcing it
   into everyone's view on every tab, and gives it somewhere obvious
   to be dismissed to. */
.sidebar-timer {
  position: relative;
  margin-top: auto;
  background: #141416;
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 12px;
  padding: 14px 14px 12px;
  display: flex;
  flex-direction: column;
  gap: 9px;
}
.sidebar-timer-close {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 18px;
  height: 18px;
  border-radius: 5px;
  border: none;
  background: transparent;
  color: #6b6b70;
  font-size: 14px;
  line-height: 1;
  cursor: pointer;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.sidebar-timer-close:hover { background: rgba(255,255,255,0.08); color: #eaeaea; }
.sidebar-timer-row { display: flex; align-items: center; gap: 7px; padding-right: 16px; }
.sidebar-timer-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #34C759;
  flex-shrink: 0;
  animation: niche-timer-pulse 1.8s ease-out infinite;
}
@keyframes niche-timer-pulse {
  0% { box-shadow: 0 0 0 0 rgba(52,199,89,0.55); }
  70% { box-shadow: 0 0 0 6px rgba(52,199,89,0); }
  100% { box-shadow: 0 0 0 0 rgba(52,199,89,0); }
}
.sidebar-timer-label {
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: #85858a;
}
.sidebar-timer-value {
  font-size: 17px;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: #f5f5f5;
  font-variant-numeric: tabular-nums;
}
.sidebar-timer-track {
  width: 100%;
  height: 4px;
  border-radius: 3px;
  background: rgba(255,255,255,0.08);
  overflow: hidden;
}
.sidebar-timer-fill {
  height: 100%;
  width: 0%;
  border-radius: 3px;
  background: linear-gradient(90deg, #1f9e46, #34C759);
  transition: width 1s linear;
}

.nav-item {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 7px 9px;
  border-radius: 8px;
  cursor: pointer;
  background: transparent;
  border-left: 2px solid transparent;
  transition: background 0.15s ease, border-color 0.15s ease;
}
.nav-item:hover { background: rgba(255,255,255,0.04); }
.nav-item.active { background: rgba(255,59,48,0.10); border-left-color: #FF3B30; }
.nav-mono {
  width: 22px;
  height: 22px;
  border-radius: 6px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255,255,255,0.05);
  color: #85858a;
  transition: background 0.15s ease, color 0.15s ease;
}
.nav-item.active .nav-mono { background: #FF3B30; color: #fff; }
.nav-label { font-size: 12.5px; color: #b4b4b8; font-weight: 500; }
.nav-item.active .nav-label { color: #f5f5f5; font-weight: 600; }

.nav-item.locked { cursor: not-allowed; }
.nav-item.locked .nav-mono,
.nav-item.locked.active .nav-mono {
  background: rgba(255,255,255,0.04);
  color: rgba(255,255,255,0.28);
}
.nav-item.locked .nav-label,
.nav-item.locked.active .nav-label {
  color: rgba(255,255,255,0.28);
  font-weight: 500;
}
.nav-item.locked.active {
  background: rgba(255,255,255,0.03);
  border-left-color: transparent;
}

.content {
  flex: 1;
  overflow-y: auto;
}

.coming-soon-wrap {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.coming-soon {
  font-size: 32px;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: #f5f5f5;
}

/* Channels view */
.channels-view { padding: 28px 32px 40px; max-width: 680px; margin: 0 auto; }

.date-slider {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin: 0 0 28px 0;
}
.date-arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 8px;
  border: 1px solid rgba(255,255,255,0.08);
  background: #141416;
  color: #b4b4b8;
  cursor: pointer;
  flex-shrink: 0;
  padding: 0;
  transition: background 0.15s ease, color 0.15s ease;
}
.date-arrow:hover { background: #1c1c1f; color: #f5f5f5; }
.date-arrow.disabled { opacity: 0.3; cursor: not-allowed; pointer-events: none; }

.date-track {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}
.date-slot {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 10px 18px;
  border-radius: 10px;
  background: #141416;
  border: 1px solid rgba(255,255,255,0.08);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: #8f8f93;
  white-space: nowrap;
  cursor: pointer;
  text-align: center;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.date-slot:hover { background: #1c1c1f; color: #eaeaea; }
.date-slot.active {
  background: #2a2a2e;
  border-color: rgba(255,255,255,0.16);
  color: #f5f5f5;
  font-weight: 700;
  font-size: 13px;
}
.date-slot.disabled {
  cursor: default;
  pointer-events: none;
  background: transparent;
  border-color: transparent;
}
/* Today, before its 8pm GMT fill: still a real, visible slot (unlike
   the fully-invisible not-yet-existing future dates), just locked —
   the header countdown says when it opens. */
.date-slot.locked-today {
  gap: 5px;
  background: #141416;
  border-color: rgba(255,255,255,0.08);
  color: #6b6b70;
}
.date-slot.locked-today svg { width: 10px; height: 10px; flex-shrink: 0; }

/* Both collapsed by default behind their icon in the date-slider row —
   filter-toggle before the left arrow, sort-toggle after the right one
   — so the extra controls don't add visual weight for anyone happy
   with the default (unfiltered, newest-first) view. Dimmed at rest to
   match .date-arrow.disabled's opacity exactly (0.3 — the locked-today
   right arrow) so these read as equally low-priority as an arrow
   that's not even clickable right now, never more prominent. Hovering,
   opening the panel, or having an active filter set brings a toggle
   back to full opacity so it's never actually hard to find. */
.sort-toggle, .filter-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 8px;
  border: 1px solid rgba(255,255,255,0.08);
  background: #141416;
  color: #b4b4b8;
  cursor: pointer;
  flex-shrink: 0;
  padding: 0;
  position: relative;
  opacity: 0.3;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease, opacity 0.15s ease;
}
.sort-toggle { margin-left: 4px; }
.filter-toggle { margin-right: 4px; }
.sort-toggle:hover, .filter-toggle:hover { background: #1c1c1f; color: #f5f5f5; opacity: 1; }
.sort-toggle.open, .filter-toggle.open,
.filter-toggle.has-active {
  background: #2a2a2e;
  border-color: rgba(255,255,255,0.16);
  color: #f5f5f5;
  opacity: 1;
}
/* A small dot badge so a visitor who's set filters (and then closed
   the panel) can still tell the grid is filtered, without the badge
   showing up for the sort menu, which is always "active" by default. */
.filter-toggle.has-active::after {
  content: '';
  position: absolute;
  top: 4px;
  right: 4px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #FF3B30;
  border: 1.5px solid #141416;
}

.sort-bar, .filter-bar {
  display: none;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 22px 0;
}
.sort-bar.open { display: flex; }
.filter-bar.open { display: flex; flex-direction: column; align-items: stretch; gap: 10px; }
.sort-bar-label {
  font-size: 11.5px;
  font-weight: 600;
  color: #6b6b70;
  letter-spacing: 0.02em;
  margin-right: 2px;
}
.sort-btn {
  padding: 8px 14px;
  border-radius: 10px;
  background: #141416;
  border: 1px solid rgba(255,255,255,0.08);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: #b4b4b8;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.sort-btn:hover { background: #1c1c1f; color: #eaeaea; }
.sort-btn.active {
  background: rgba(255,59,48,0.14);
  border-color: rgba(255,59,48,0.4);
  color: #FF3B30;
}
.sort-arrow { font-size: 11px; }

.filter-bar {
  background: #141416;
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 12px;
  padding: 16px;
}
.filter-row + .filter-row { margin-top: 18px; }
.filter-row-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 10px;
}
.filter-label {
  font-size: 12px;
  font-weight: 600;
  color: #b4b4b8;
}
.filter-range-value {
  font-size: 11.5px;
  font-weight: 600;
  color: #FF3B30;
  white-space: nowrap;
}

/* Dual-range slider: two <input type="range"> stacked on the same
   track. Each input is fully transparent and pointer-events:none
   except its own thumb (::-webkit-slider-thumb /
   ::-moz-range-thumb, given pointer-events:auto), so both handles
   stay independently draggable without one blocking the other's
   track clicks. The visible track/fill are plain decorative divs
   positioned by updateRangeSliderVisual(), not the native styling. */
.range-slider {
  position: relative;
  height: 20px;
  display: flex;
  align-items: center;
}
.range-track {
  position: absolute;
  left: 0;
  right: 0;
  height: 4px;
  border-radius: 2px;
  background: #2a2a2e;
}
.range-track-fill {
  position: absolute;
  height: 4px;
  border-radius: 2px;
  background: #FF3B30;
}
.range-input {
  position: absolute;
  left: 0;
  right: 0;
  width: 100%;
  margin: 0;
  background: transparent;
  pointer-events: none;
  -webkit-appearance: none;
  appearance: none;
}
.range-input:focus { outline: none; }
.range-input::-webkit-slider-runnable-track {
  -webkit-appearance: none;
  height: 4px;
  background: transparent;
}
.range-input::-webkit-slider-thumb {
  -webkit-appearance: none;
  pointer-events: auto;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #FF3B30;
  border: 2px solid #0a0a0b;
  cursor: pointer;
  margin-top: -6px;
}
.range-input::-moz-range-track {
  height: 4px;
  background: transparent;
  border: none;
}
.range-input::-moz-range-thumb {
  pointer-events: auto;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: #FF3B30;
  border: 2px solid #0a0a0b;
  cursor: pointer;
}

.filter-clear {
  align-self: flex-end;
  margin-top: 2px;
  padding: 6px 12px;
  border-radius: 8px;
  border: 1px solid rgba(255,255,255,0.08);
  background: transparent;
  color: #FF3B30;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s ease;
}
.filter-clear:hover { background: rgba(255,59,48,0.1); }
.filter-clear:disabled {
  color: #6b6b70;
  cursor: default;
  pointer-events: none;
}
.sort-arrow { font-size: 11px; }

.channel-grid {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 22px;
}
.channel-empty {
  font-size: 13px;
  color: #85858a;
  padding: 24px 0;
}

.channel-card { display: flex; flex-direction: column; width: 100%; }
.channel-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: #6b6b70;
  margin-bottom: 8px;
}
.channel-card-body {
  background: #141416;
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 14px;
  padding: 18px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.channel-url {
  font-size: 13px;
  font-weight: 600;
  color: #eaeaea;
  text-decoration: none;
  word-break: break-all;
  padding-bottom: 16px;
  border-bottom: 1px solid rgba(255,255,255,0.08);
}
.channel-url:hover { color: #FF3B30; }

.stat-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.stat-box { background: #1c1c1f; border-radius: 8px; padding: 8px 10px; }
.stat-label { font-size: 9px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: #85858a; margin-bottom: 4px; white-space: nowrap; }
.stat-value { font-size: 13px; font-weight: 700; color: #f5f5f5; }

.videos-heading { font-size: 10px; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; color: #85858a; margin-bottom: -8px; }

.video-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}
.video-status {
  grid-column: 1 / -1;
  font-size: 12px;
  color: #6b6b70;
}

.video-expand {
  grid-column: 1 / -1;
  font-family: inherit;
  font-size: 11px;
  font-weight: 600;
  color: #b4b4b8;
  background: transparent;
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 8px;
  padding: 6px 10px;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}
.video-expand:hover { background: rgba(255,255,255,0.05); color: #eaeaea; }

.video-card {
  display: flex;
  flex-direction: column;
  gap: 6px;
  text-decoration: none;
  cursor: pointer;
}
.video-thumb-wrap {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: 8px;
  overflow: hidden;
  background: #1c1c1f;
}
.video-thumb {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: filter 0.15s ease;
}
.video-thumb-fallback { display: flex; align-items: center; justify-content: center; color: #6b6b70; }
.blurred-thumb {
  filter: blur(4px);
  transform: scale(1.15); /* blur softens edges into transparency — scale hides that halo past the rounded-corner clip */
  -webkit-user-drag: none;
  user-drag: none;
  user-select: none;
}
.video-duration {
  position: absolute;
  right: 5px;
  bottom: 5px;
  background: rgba(0,0,0,0.85);
  color: #fff;
  font-size: 10px;
  font-weight: 600;
  line-height: 1;
  padding: 3px 5px;
  border-radius: 4px;
}
.video-title {
  font-size: 12px;
  font-weight: 600;
  line-height: 1.35;
  color: #eaeaea;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.video-sub { font-size: 11px; color: #85858a; }
.video-card:hover .video-title { color: #fff; }
.video-card:hover .video-thumb { filter: brightness(1.1); }

/* Paywall */
.paywall-cta {
  font-family: inherit;
  font-size: 12.5px;
  font-weight: 700;
  color: #fff;
  background: #FF3B30;
  border: none;
  border-radius: 8px;
  padding: 10px 18px;
  cursor: pointer;
  flex-shrink: 0;
  transition: background 0.15s ease;
}
.paywall-cta:hover { background: #e8362c; }

.blurred-text {
  filter: blur(2.5px);
  user-select: none;
}

/* Premium tab */
.premium-view {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100%;
  padding: 40px 24px;
}
.premium-card {
  position: relative;
  width: 100%;
  max-width: 400px;
  background: #141416;
  border: 1px solid rgba(255,59,48,0.3);
  border-radius: 16px;
  padding: 32px 28px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 6px;
  box-shadow: 0 8px 32px rgba(255,59,48,0.08);
}
.premium-badge {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: #FF3B30;
  background: rgba(255,59,48,0.12);
  border-radius: 20px;
  padding: 5px 12px;
  margin-bottom: 10px;
}
.premium-price { display: flex; align-items: baseline; gap: 4px; margin-bottom: 4px; }
.premium-price-amount { font-size: 40px; font-weight: 800; color: #f5f5f5; letter-spacing: -0.02em; }
.premium-price-period { font-size: 14px; font-weight: 600; color: #85858a; }
.premium-tagline { font-size: 14px; font-weight: 600; color: #eaeaea; margin-bottom: 8px; }
.premium-sub { font-size: 12.5px; color: #85858a; line-height: 1.5; }
.premium-features {
  list-style: none;
  margin: 6px 0 22px;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 100%;
  text-align: left;
}
.premium-features li {
  font-size: 12.5px;
  color: #c4c4c8;
  line-height: 1.4;
  padding-left: 22px;
  position: relative;
}
.premium-features li::before {
  content: '✓';
  position: absolute;
  left: 0;
  color: #34C759;
  font-weight: 700;
}
.premium-cta {
  width: 100%;
  font-family: inherit;
  font-size: 13.5px;
  font-weight: 700;
  color: #fff;
  background: #FF3B30;
  border: none;
  border-radius: 10px;
  padding: 13px 18px;
  cursor: pointer;
  transition: background 0.15s ease;
}
.premium-cta:hover { background: #e8362c; }
.premium-cta:disabled { opacity: 0.6; cursor: not-allowed; }
.premium-guarantee {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin-top: 12px;
  font-size: 11.5px;
  font-weight: 600;
  color: #85858a;
  line-height: 1.3;
}
.premium-guarantee svg { width: 14px; height: 14px; color: #34C759; flex-shrink: 0; }
.auth-switch { font-size: 12px; color: #85858a; margin-top: 14px; }
.auth-switch a { color: #FF3B30; text-decoration: none; font-weight: 600; }
.auth-switch a:hover { text-decoration: underline; }

.auth-back {
  align-self: flex-start;
  display: flex;
  align-items: center;
  gap: 3px;
  font-family: inherit;
  font-size: 12px;
  font-weight: 600;
  color: #85858a;
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 0;
  margin-bottom: 8px;
}
.auth-back:hover { color: #eaeaea; }
.auth-back svg { width: 13px; height: 13px; }

.auth-form {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 14px 0 4px;
}
.auth-input {
  width: 100%;
  font-family: inherit;
  font-size: 13.5px;
  color: #f2f2f2;
  background: #0b0b0c;
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 9px;
  padding: 11px 13px;
}
.auth-input:focus { outline: none; border-color: #FF3B30; }
.auth-error {
  font-size: 12px;
  color: #FF3B30;
  text-align: left;
  line-height: 1.4;
}

/* Premium tab account dashboard (paid state) */
.account-dashboard {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin: 10px 0 22px;
  padding: 6px 0;
  border-top: 1px solid rgba(255,255,255,0.08);
  border-bottom: 1px solid rgba(255,255,255,0.08);
}
.account-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 9px 2px;
  font-size: 13px;
}
.account-row-label { color: #85858a; font-weight: 600; }
.account-row-value { color: #f5f5f5; font-weight: 600; display: flex; align-items: center; gap: 6px; }
.status-dot { width: 7px; height: 7px; border-radius: 50%; background: #34C759; flex-shrink: 0; }

/* The fake URL on a locked card is a plain <div>, not a link — :hover
   still applies to any element the mouse is over though, so without
   this override it inherits .channel-url's red hover color and looks
   like a clickable link that isn't. */
.locked-card .channel-url:hover { color: #eaeaea; }

.locked-section {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.locked-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: rgba(11,11,12,0.55);
  border-radius: 10px;
  color: #fff;
}
.locked-overlay-icon {
  width: 34px;
  height: 34px;
  border-radius: 9px;
  background: rgba(255,59,48,0.18);
  color: #FF3B30;
  display: flex;
  align-items: center;
  justify-content: center;
}
.locked-overlay-icon svg { width: 16px; height: 16px; }
.locked-overlay-text {
  font-size: 11.5px;
  font-weight: 700;
  text-align: center;
  line-height: 1.35;
}
.locked-overlay-caption {
  font-size: 9.5px;
  font-weight: 600;
  color: rgba(255,255,255,0.6);
  text-align: center;
}

/* Tier 3: grouped teaser standing in for every channel past the preview limit */
.remaining-block {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
  background: #141416;
  border: 1px solid rgba(255,59,48,0.3);
  border-radius: 14px;
  padding: 22px 20px;
}
.remaining-tiles {
  display: flex;
  gap: 10px;
  width: 100%;
  max-width: 320px;
}
.remaining-tile-wrap {
  position: relative;
  flex: 1;
  aspect-ratio: 3 / 4;
  border-radius: 10px;
  overflow: hidden;
}
.remaining-tile {
  position: absolute;
  inset: -15%;
  width: 130%;
  height: 130%;
  object-fit: cover; /* only applies when this is an <img>; harmless on a gradient <div> */
  filter: blur(11px);
  -webkit-user-drag: none;
  user-drag: none;
  user-select: none;
}
.remaining-text { text-align: center; }
.remaining-title { font-size: 14px; font-weight: 700; color: #f5f5f5; }
.remaining-sub { font-size: 12px; color: #85858a; margin-top: 4px; }
.remaining-guarantee { font-size: 10.5px; font-weight: 600; color: #6b6b70; }

/* ============================================================
   Niche Tool tab — ported from a standalone page (its own
   light/dark theme + topbar + footer), scoped under .niche-tool
   so its fairly generic class names (.card, .btn, .row, .hint...)
   can't collide with anything else in this app. Dark-only here —
   the rest of the app has no theme switch, so the tool's own
   light/dark toggle was dropped and only its dark palette kept.
   Topbar (logo/brand/theme-toggle) and footer were dropped too,
   both redundant with this app's own header — the "key saved?"
   status pill that lived in the topbar was moved into this tab's
   first card instead, right next to the key input it describes.
   ============================================================ */
.niche-tool {
  /* Same values the rest of this app already uses (body bg, .channel-card-body,
     .stat-box, borders, text tones, accent), not a separate palette. */
  --nt-bg: #0b0b0c;
  --nt-surface: #141416;
  --nt-border: rgba(255,255,255,0.08);
  --nt-border-strong: rgba(255,255,255,0.14);
  --nt-text: #f2f2f2;
  --nt-text-muted: #85858a;
  --nt-text-soft: #b4b4b8;
  --nt-accent: #FF3B30;
  --nt-accent-hover: #e8362c;
  --nt-accent-soft: rgba(255,59,48,0.14);
  --nt-green: #34C759;
  --nt-green-soft: rgba(52,199,89,0.14);
  --nt-amber: #e0a83f;
  --nt-amber-soft: rgba(224,168,63,0.14);
  --nt-shadow: 0 1px 2px rgba(0,0,0,0.2), 0 1px 8px rgba(0,0,0,0.16);

  background: var(--nt-bg);
  color: var(--nt-text);
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  font-size: 14px;
  line-height: 1.5;
  padding: 28px 0 40px;
}
.niche-tool * { box-sizing: border-box; }

.niche-tool .wrap { max-width: 980px; margin: 0 auto; padding: 0 20px; }

.niche-tool .card {
  background: var(--nt-surface);
  border: 1px solid var(--nt-border);
  border-radius: 14px;
  box-shadow: var(--nt-shadow);
  padding: 24px;
  margin-bottom: 20px;
}
.niche-tool .card-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 18px; }
.niche-tool .card-title-row { display: flex; align-items: center; gap: 10px; }
.niche-tool .step-num {
  width: 26px; height: 26px; border-radius: 50%; background: var(--nt-accent-soft); color: var(--nt-accent);
  font-size: 12.5px; font-weight: 700; display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.niche-tool .card-title { font-size: 16px; font-weight: 700; letter-spacing: -0.1px; }
.niche-tool .card-desc { font-size: 12.5px; color: var(--nt-text-muted); margin-top: 2px; }
.niche-tool .card.disabled { opacity: 0.55; pointer-events: none; }

.niche-tool .key-status {
  display: flex; align-items: center; gap: 8px;
  font-size: 12.5px; color: var(--nt-text-soft);
  background: var(--nt-bg); border: 1px solid var(--nt-border-strong);
  padding: 7px 12px; border-radius: 20px; flex-shrink: 0;
}
.niche-tool .key-dot { width: 7px; height: 7px; border-radius: 50%; background: #666; flex-shrink: 0; }
.niche-tool .key-dot.on { background: var(--nt-green); }

.niche-tool label.field-label { display: block; font-size: 12.5px; font-weight: 600; color: var(--nt-text-soft); margin-bottom: 6px; }

.niche-tool input[type=text],
.niche-tool input[type=password],
.niche-tool textarea {
  width: 100%;
  background: var(--nt-bg);
  border: 1px solid var(--nt-border-strong);
  color: var(--nt-text);
  padding: 10px 12px;
  border-radius: 8px;
  font-size: 13.5px;
  font-family: inherit;
}
.niche-tool input[type=text]:focus,
.niche-tool input[type=password]:focus,
.niche-tool textarea:focus {
  outline: none; border-color: var(--nt-accent); background: var(--nt-surface);
}
.niche-tool textarea { resize: vertical; min-height: 110px; line-height: 1.6; }

.niche-tool .key-input-wrap { position: relative; }
.niche-tool .key-input-wrap input { padding-right: 40px; width: 100%; }
.niche-tool .eye-btn {
  position: absolute; right: 4px; top: 50%; transform: translateY(-50%);
  width: 30px; height: 30px; border: none; background: none; cursor: pointer;
  color: var(--nt-text-muted); border-radius: 6px;
  display: flex; align-items: center; justify-content: center;
}
.niche-tool .eye-btn:hover { color: var(--nt-text); background: var(--nt-bg); }

.niche-tool .row { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.niche-tool .row.gap-top { margin-top: 12px; }

.niche-tool .btn {
  border: none; border-radius: 9px; padding: 10px 18px; font-size: 13px; font-weight: 600;
  cursor: pointer; white-space: nowrap; transition: background 0.15s, opacity 0.15s;
  display: inline-flex; align-items: center; gap: 6px; font-family: inherit;
}
.niche-tool .btn:disabled { opacity: 0.45; cursor: not-allowed; }
.niche-tool .btn-primary { background: var(--nt-accent); color: #fff; }
.niche-tool .btn-primary:hover:not(:disabled) { background: var(--nt-accent-hover); }
.niche-tool .btn-secondary { background: var(--nt-bg); border: 1px solid var(--nt-border-strong); color: var(--nt-text-soft); }
.niche-tool .btn-secondary:hover:not(:disabled) { border-color: var(--nt-text-muted); color: var(--nt-text); }
.niche-tool .btn-danger-ghost { background: none; color: var(--nt-text-muted); border: 1px solid var(--nt-border-strong); }
.niche-tool .btn-danger-ghost:hover:not(:disabled) { color: var(--nt-accent); border-color: var(--nt-accent); }
.niche-tool .btn-sm { padding: 7px 12px; font-size: 12px; }

.niche-tool .file-btn { position: relative; overflow: hidden; }
.niche-tool .file-btn input[type=file] {
  position: absolute; inset: 0; opacity: 0; cursor: pointer; font-size: 100px;
}

.niche-tool .hint { font-size: 11.5px; color: var(--nt-text-muted); margin-top: 6px; }

.niche-tool .progress-wrap { margin-top: 16px; display: none; }
.niche-tool .progress-wrap.show { display: block; }
.niche-tool .progress-track {
  width: 100%; height: 10px; border-radius: 20px; background: var(--nt-bg);
  border: 1px solid var(--nt-border-strong); overflow: hidden;
}
.niche-tool .progress-fill {
  height: 100%; width: 0%; background: linear-gradient(90deg, var(--nt-accent), #ff5a5a);
  border-radius: 20px; transition: width 0.3s ease;
}
.niche-tool .progress-label {
  display: flex; justify-content: space-between; font-size: 12px; color: var(--nt-text-soft);
  margin-top: 7px;
}
.niche-tool .progress-label .status { font-weight: 600; color: var(--nt-text); }

.niche-tool .stat-row { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 16px; }
.niche-tool .stat-pill {
  background: var(--nt-bg); border: 1px solid var(--nt-border-strong); border-radius: 10px;
  padding: 10px 16px; flex: 1; min-width: 110px; text-align: center;
}
.niche-tool .stat-pill .num { font-size: 19px; font-weight: 700; }
.niche-tool .stat-pill .lbl { font-size: 11px; color: var(--nt-text-muted); margin-top: 1px; }

.niche-tool .log-box {
  margin-top: 14px; background: var(--nt-bg); border: 1px solid var(--nt-border);
  border-radius: 8px; padding: 10px 12px; max-height: 130px; overflow-y: auto;
  font-size: 11.5px; color: var(--nt-text-muted); font-family: ui-monospace, monospace;
  display: none;
}
.niche-tool .log-box.show { display: block; }
.niche-tool .log-box div { padding: 1px 0; }
.niche-tool .log-box .err { color: var(--nt-accent); }
.niche-tool .log-box .ok { color: var(--nt-green); }

.niche-tool .table-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; }
.niche-tool .search-input { max-width: 260px; }
.niche-tool .table-scroll { overflow-x: auto; border: 1px solid var(--nt-border); border-radius: 10px; }
.niche-tool table { width: 100%; border-collapse: collapse; font-size: 13px; min-width: 780px; }
.niche-tool thead th {
  text-align: left; background: var(--nt-bg); color: var(--nt-text-soft); font-size: 11px;
  text-transform: uppercase; letter-spacing: 0.3px; font-weight: 700;
  padding: 10px 14px; border-bottom: 1px solid var(--nt-border); white-space: nowrap;
  cursor: pointer; user-select: none;
}
.niche-tool thead th:hover { color: var(--nt-text); }
.niche-tool thead th.sorted { color: var(--nt-accent); }
.niche-tool tbody td { padding: 11px 14px; border-bottom: 1px solid var(--nt-border); vertical-align: middle; }
.niche-tool tbody tr:last-child td { border-bottom: none; }
.niche-tool tbody tr:hover { background: var(--nt-bg); }
.niche-tool .channel-name-cell { display: flex; align-items: center; gap: 9px; max-width: 260px; }
.niche-tool .channel-name-cell a { color: var(--nt-text); font-weight: 600; text-decoration: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.niche-tool .channel-name-cell a:hover { color: var(--nt-accent); text-decoration: underline; }
.niche-tool .pill-new { background: var(--nt-green-soft); color: var(--nt-green); font-size: 10.5px; font-weight: 700; padding: 2px 8px; border-radius: 20px; }
.niche-tool .pill-opened { background: var(--nt-amber-soft); color: var(--nt-amber); font-size: 10.5px; font-weight: 700; padding: 2px 8px; border-radius: 20px; }
.niche-tool .row-remove {
  width: 24px; height: 24px; border-radius: 50%; border: none; background: none;
  color: var(--nt-text-muted); cursor: pointer; font-size: 13px;
  display: flex; align-items: center; justify-content: center;
}
.niche-tool .row-remove:hover { background: var(--nt-accent-soft); color: var(--nt-accent); }
.niche-tool .num-cell { font-variant-numeric: tabular-nums; }

.niche-tool .empty-state { text-align: center; padding: 50px 20px; color: var(--nt-text-muted); }
.niche-tool .empty-state .icon { font-size: 30px; margin-bottom: 10px; }

.niche-tool .open-tabs-control { display: flex; align-items: center; gap: 8px; }
.niche-tool .open-tabs-count-label { font-size: 12px; color: var(--nt-text-muted); white-space: nowrap; }
.niche-tool .open-tabs-count-input {
  width: 48px; text-align: center; background: var(--nt-bg); border: 1px solid var(--nt-border-strong);
  color: var(--nt-text); padding: 9px 6px; border-radius: 8px; font-size: 13px; font-family: inherit;
}
.niche-tool .open-tabs-count-input:focus { outline: none; border-color: var(--nt-accent); background: var(--nt-surface); }

.niche-tool .modal-overlay {
  position: fixed; inset: 0; background: rgba(0,0,0,0.4); display: none;
  align-items: center; justify-content: center; z-index: 50; padding: 20px;
}
.niche-tool .modal-overlay.show { display: flex; }
.niche-tool .modal {
  background: var(--nt-surface); border-radius: 14px; max-width: 480px; width: 100%;
  max-height: 80vh; overflow-y: auto; padding: 22px;
}
.niche-tool .modal h3 { font-size: 15px; margin-bottom: 4px; }
.niche-tool .modal .modal-sub { font-size: 12px; color: var(--nt-text-muted); margin-bottom: 14px; }
.niche-tool .modal pre { white-space: pre-wrap; font-size: 12.5px; line-height: 1.7; font-family: inherit; }
.niche-tool .modal-close-row { margin-top: 16px; text-align: right; }

.niche-tool .toast {
  position: fixed; bottom: 20px; left: 50%; transform: translateX(-50%);
  background: var(--nt-text); color: var(--nt-bg); padding: 10px 20px; border-radius: 30px;
  font-size: 13px; font-weight: 600; opacity: 0; transition: opacity 0.2s, transform 0.2s;
  pointer-events: none; z-index: 100; box-shadow: 0 4px 20px rgba(0,0,0,0.2);
}
.niche-tool .toast.show { opacity: 1; transform: translateX(-50%) translateY(-4px); }