:root {
  color-scheme: dark;
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display", system-ui, sans-serif;
  background: #070b0f;
  color: #f2f7f3;
  --sidebar-width: 204px;
  --sidebar-compact-width: 76px;
  --spring: cubic-bezier(0.2, 0.8, 0.2, 1);
  --press: cubic-bezier(0.34, 1.56, 0.64, 1);
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  min-height: 100vh;
  background: #070b0f;
}

/* When a mobile overlay (drawer sidebar or settings gate) is showing, lock
   the underlying feed so it doesn't scroll behind the overlay. Toggled by
   render() so the class faithfully tracks overlay state and cleans up on
   its own — nothing else should be poking at body.overflow directly. */
body.overlay-lock {
  overflow: hidden;
}

.search-empty h1 {
  margin: 0 0 8px;
}

.search-empty p {
  margin: 0;
  color: rgba(255, 255, 255, 0.65);
  font-size: 0.95rem;
}

.app-update-toast {
  position: fixed;
  left: 50%;
  bottom: 24px;
  transform: translateX(-50%);
  z-index: 200;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  border-radius: 12px;
  background: rgba(20, 24, 30, 0.94);
  color: #f4f6fa;
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.42);
  font-size: 0.9rem;
}

.app-update-toast button {
  border: none;
  border-radius: 8px;
  padding: 6px 12px;
  font: inherit;
  cursor: pointer;
}

.app-update-toast button[data-action="update-reload"] {
  background: #ff0033;
  color: #fff;
}

.app-update-toast button[data-action="update-dismiss"] {
  background: transparent;
  color: rgba(255, 255, 255, 0.7);
  font-size: 1.2rem;
  line-height: 1;
  padding: 2px 8px;
}

#app {
  min-width: 0;
  min-height: 100vh;
  background: #070b0f;
}

.privacy-page {
  overflow: auto;
}

.privacy-shell {
  display: grid;
  min-height: 100vh;
  place-items: start center;
  padding: clamp(24px, 5vw, 64px);
}

.privacy-shell .panel {
  width: min(760px, 100%);
}

.privacy-shell h2 {
  margin: 28px 0 8px;
}

.policy-page {
  overflow: auto;
}

.policy-shell {
  display: grid;
  width: min(820px, calc(100% - 32px));
  min-height: 100vh;
  margin: 0 auto;
  padding: 36px 0;
}

.mobile-splash {
  display: none;
}

button,
input,
select {
  font: inherit;
}

h1,
h2,
h3,
strong,
button {
  letter-spacing: 0;
}

button {
  border: 1px solid #2b3738;
  background: #10181c;
  color: #f2f7f3;
  border-radius: 8px;
  min-height: 44px;
  padding: 0 16px;
  cursor: pointer;
  transform: translateZ(0);
  transition:
    background 180ms var(--spring),
    border-color 180ms var(--spring),
    box-shadow 220ms var(--spring),
    opacity 180ms var(--spring),
    transform 160ms var(--press);
  -webkit-tap-highlight-color: transparent;
}

button:hover {
  border-color: #7ab7a9;
}

button:disabled {
  opacity: 0.65;
  cursor: wait;
}

button:active:not(:disabled) {
  transform: scale(0.975);
}

input:not([type="checkbox"]) {
  width: 100%;
  min-height: 48px;
  border: 1px solid #2b3738;
  border-radius: 8px;
  padding: 0 14px;
  background: #0b1215;
  color: #f2f7f3;
  transition:
    background 180ms var(--spring),
    border-color 180ms var(--spring),
    box-shadow 220ms var(--spring);
}

select {
  min-height: 42px;
  border: 1px solid #2b3738;
  border-radius: 8px;
  background: #0b1215;
  color: #f2f7f3;
  padding: 0 34px 0 12px;
  font: inherit;
}

input::placeholder {
  color: #7d8c8d;
}

input:focus,
button:focus-visible {
  outline: 3px solid #74c7ff;
  outline-offset: 2px;
  box-shadow: 0 0 0 5px rgba(116, 199, 255, 0.14);
}

input:focus {
  border-color: #5fbfae;
  box-shadow: 0 0 0 4px rgba(70, 199, 164, 0.12);
}

/* Thin indeterminate progress bar shown above the topbar while Firestore
   hydration is in flight after sign-in. The app shell renders immediately
   beneath it from cached localStorage state, so this is the only visual
   signal that fresh data is on the way. */
.app-sync-bar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  z-index: 90;
  pointer-events: none;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(70, 199, 164, 0.85) 50%,
    transparent 100%
  );
  background-size: 40% 100%;
  background-repeat: no-repeat;
  background-position: -40% 0;
  animation: app-sync-bar-slide 1.4s linear infinite;
}

@keyframes app-sync-bar-slide {
  from { background-position: -40% 0; }
  to   { background-position: 140% 0; }
}

@media (prefers-reduced-motion: reduce) {
  .app-sync-bar {
    animation: none;
    background: rgba(70, 199, 164, 0.65);
    background-size: 100% 100%;
    background-position: 0 0;
  }
}

/* Transient single-slot toast. Sits top-right, slides in, click-to-dismiss.
   Used for non-blocking status messages such as cloud-sync failures, where
   the user doesn't need to act but should know something happened. */
.app-toast {
  position: fixed;
  top: 18px;
  right: 18px;
  z-index: 100;
  max-width: min(360px, calc(100vw - 36px));
  padding: 12px 16px;
  background: rgba(26, 26, 26, 0.96);
  color: #fff;
  border-radius: 10px;
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.35);
  font-size: 0.92rem;
  line-height: 1.35;
  cursor: pointer;
  animation: app-toast-enter 0.28s ease-out;
}

.app-toast-error {
  background: linear-gradient(180deg, #b8341f 0%, #9d2a17 100%);
}

.app-toast-leaving {
  animation: app-toast-leave 0.24s ease-out forwards;
}

@keyframes app-toast-enter {
  from { transform: translateY(-12px); opacity: 0; }
  to   { transform: translateY(0);     opacity: 1; }
}

@keyframes app-toast-leave {
  from { transform: translateY(0);     opacity: 1; }
  to   { transform: translateY(-12px); opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .app-toast {
    animation: none;
  }
  .app-toast-leaving {
    animation: none;
    opacity: 0;
  }
}

@media (max-width: 480px) {
  .app-toast {
    top: 12px;
    left: 12px;
    right: 12px;
    max-width: none;
  }
}

.topbar {
  position: sticky;
  top: 0;
  z-index: 80;
  display: grid;
  grid-template-columns: var(--sidebar-compact-width) auto minmax(260px, 720px) minmax(20px, 1fr) auto 44px;
  align-items: center;
  justify-content: start;
  gap: 14px;
  min-height: 72px;
  padding: 12px clamp(20px, 3vw, 36px) 12px 0;
  border-bottom: 1px solid #1d282b;
  background: rgba(7, 11, 15, 0.94);
  backdrop-filter: blur(14px);
}

.topbar .header-profile-picker {
  grid-column: 6;
  justify-self: end;
  width: 40px;
  min-width: 40px;
  margin-right: 0;
}

.topbar .header-profile-avatar {
  display: grid;
  width: 40px;
  height: 40px;
  min-height: 40px;
  padding: 0;
  border: 2px solid transparent;
  font-size: 0.95rem;
  transition: border-color 180ms var(--spring), box-shadow 180ms var(--spring), background 180ms var(--spring);
}

.topbar .header-profile-avatar:hover,
.topbar .header-profile-avatar:focus-visible {
  border-color: #46c7a4;
  box-shadow: 0 0 0 3px rgba(70, 199, 164, 0.2);
  outline: none;
}

/* Hamburger — visible on all viewports, toggles the side menu */
.hamburger-btn {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
  width: 40px;
  height: 40px;
  min-height: 40px;
  padding: 0;
  border: 0;
  border-radius: 10px;
  background: transparent;
  flex-shrink: 0;
}

.hamburger-btn:hover {
  background: #172226;
  border-color: transparent;
}

.hamburger-btn span {
  display: block;
  width: 22px;
  height: 2px;
  border-radius: 2px;
  background: #f2f7f3;
  transition:
    transform 260ms var(--spring),
    opacity 180ms ease;
}

.topbar > .hamburger-btn {
  grid-column: 1;
  justify-self: center;
}

.topbar > .brand {
  grid-column: 2;
}

/* Backdrop — only rendered when sidebar is open on mobile */
.sidebar-backdrop {
  display: none;
}

.header-search {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  width: 100%;
  min-width: 0;
  border: 1px solid #263235;
  border-radius: 999px;
  background: #0b1215;
  overflow: hidden;
}

.header-search-wrap {
  position: relative;
  grid-column: 3;
  width: 100%;
  min-width: 0;
}

.header-search.placeholder {
  border: 0;
  background: transparent;
}

.search-suggestions {
  position: absolute;
  z-index: 20;
  top: calc(100% + 8px);
  left: 0;
  right: 0;
  display: grid;
  gap: 4px;
  border: 1px solid #263235;
  border-radius: 12px;
  background: #0b1215;
  padding: 8px;
  box-shadow: 0 18px 42px rgba(0, 0, 0, 0.4);
  animation: menuIn 220ms var(--spring);
  transform-origin: top center;
}

.search-suggestions > button,
.suggestion-section > button {
  display: grid;
  grid-template-columns: 74px minmax(0, 1fr);
  align-items: center;
  gap: 12px;
  min-height: 56px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  padding: 6px;
  text-align: left;
}

.search-suggestions > button.recent-search-row {
  grid-template-columns: 32px minmax(0, 1fr);
  min-height: 48px;
}

.search-suggestions > button:hover,
.search-suggestions > button:focus-visible,
.suggestion-section > button:hover,
.suggestion-section > button:focus-visible {
  background: #172226;
}

.parent-suggestions {
  gap: 8px;
  max-height: min(620px, calc(100vh - 96px));
  overflow-y: auto;
  overscroll-behavior: contain;
}

.suggestion-section {
  display: grid;
  gap: 4px;
}

.suggestion-section-label,
.suggestion-message {
  margin: 0;
  padding: 4px 6px;
  color: #98a6a6;
  font-size: 0.74rem;
  font-weight: 700;
  text-transform: uppercase;
}

.suggestion-section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.clear-history-btn {
  border: 0;
  background: transparent;
  color: #98a6a6;
  font-size: 0.74rem;
  font-weight: 600;
  padding: 4px 8px;
  border-radius: 6px;
  cursor: pointer;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.search-suggestions > .clear-history-btn {
  width: 100%;
  margin-top: 2px;
  border-top: 1px solid #1e2d32;
  border-radius: 0 0 8px 8px;
  padding: 8px 6px;
  text-align: center;
}

.clear-history-btn:hover,
.clear-history-btn:focus-visible {
  background: #172226;
  color: #cdd8d8;
}

.suggestion-message.warning {
  color: #ffb2a8;
  text-transform: none;
}

.parent-suggestion {
  display: grid;
  grid-template-columns: 74px minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  min-height: 64px;
  border-radius: 8px;
  padding: 6px;
}

.parent-suggestion:hover {
  background: #172226;
}

.parent-suggestion span {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.parent-suggestion strong,
.parent-suggestion small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.parent-suggestion small {
  color: #98a6a6;
}

.parent-suggestion .primary {
  min-height: 36px;
  padding: 0 12px;
}

.search-suggestions img,
.suggestion-icon {
  width: 74px;
  aspect-ratio: 16 / 9;
  border-radius: 6px;
  background: #1e2a2e;
  object-fit: cover;
}

.suggestion-icon {
  display: grid;
  place-items: center;
  color: #98a6a6;
  font-weight: 700;
}

.suggestion-icon.recent-icon {
  width: 32px;
  height: 32px;
  aspect-ratio: auto;
  border-radius: 999px;
}

.suggestion-icon.recent-icon .clock-icon {
  width: 16px;
  height: 16px;
}

.search-suggestions span {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.search-suggestions strong {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 0.92rem;
}

.search-suggestions small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: #98a6a6;
}

.header-time {
  grid-column: 5;
  justify-self: start;
  display: grid;
  grid-template-columns: auto 54px;
  align-items: center;
  gap: 8px;
  min-width: 0;
  min-height: 44px;
  border: 1px solid #263235;
  border-radius: 999px;
  background: #0b1215;
  padding: 0 12px;
  color: #98a6a6;
  font-size: 0.78rem;
  white-space: nowrap;
  transition: border-color 180ms var(--spring), background 180ms var(--spring);
}

.header-time.watched-time {
  grid-template-columns: auto auto;
  justify-content: start;
  width: max-content;
  min-width: 0;
  padding: 0 14px 0 11px;
  border-color: #263235;
  background: #0b1215;
  color: #dbe6e1;
}

.header-time.watched-time .clock-icon {
  color: #8ccfbe;
}

.clock-icon {
  width: 18px;
  height: 18px;
  color: #8ccfbe;
}

button.header-time {
  cursor: pointer;
}

button.header-time:hover,
button.header-time:focus-visible {
  border-color: #46c7a4;
  background: #101a1d;
}

.header-time.placeholder {
  visibility: hidden;
}

.header-time strong {
  color: #f2f7f3;
  font-size: 0.9rem;
}

.header-time .time-meter {
  height: 6px;
  width: 54px;
}

.header-search input:not([type="checkbox"]) {
  min-height: 44px;
  border: 0;
  border-radius: 0;
  background: transparent;
}

.header-search button,
.header-search span {
  display: grid;
  place-items: center;
  min-height: 44px;
  border: 0;
  border-left: 1px solid #263235;
  border-radius: 0;
  background: #172226;
  padding: 0 18px;
  color: #dbe6e1;
  font-weight: 700;
}

.search-icon {
  width: 20px;
  height: 20px;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  border: 0;
  background: transparent;
  padding: 0 8px 0 0;
  color: #f2f7f3;
  font-weight: 600;
  font-size: 1rem;
  white-space: nowrap;
}

.brand-mark {
  display: grid;
  place-items: center;
  position: relative;
  width: 38px;
  height: 27px;
  border-radius: 8px;
  background: #ff0033;
  box-shadow: 0 10px 22px rgba(255, 0, 51, 0.24);
}

.brand-mark::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 52%;
  transform: translate(-42%, -50%);
  border-top: 7px solid transparent;
  border-bottom: 7px solid transparent;
  border-left: 11px solid #ffffff;
}

main {
  min-height: calc(100vh - 72px);
  overflow: hidden;
}

.youtube-shell {
  display: grid;
  grid-template-columns: var(--sidebar-width) 1fr;
  height: calc(100vh - 72px);
  min-height: 0;
}

/* Desktop: collapsed side menu becomes a compact icon rail. Scoped to ≥821px
   so the mobile drawer animation in the smaller breakpoint stays untouched.
   The topbar's column template stays fixed in both states so the hamburger,
   brand, search, and avatar do not shift when the sidebar toggles. */
@media (min-width: 821px) {
  #app.sidebar-collapsed .youtube-shell {
    grid-template-columns: var(--sidebar-compact-width) 1fr;
  }

  #app.sidebar-collapsed .admin-layout {
    padding-left: var(--sidebar-compact-width);
  }

  #app.sidebar-collapsed .yt-sidebar {
    width: var(--sidebar-compact-width);
    padding: 10px;
  }

  #app.sidebar-collapsed .yt-sidebar .sidebar-label {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }

  #app.sidebar-collapsed .yt-sidebar button,
  #app.sidebar-collapsed .yt-sidebar button.sidebar-accordion {
    justify-content: center;
    padding: 0;
  }

  #app.sidebar-collapsed .yt-sidebar .sidebar-chevron {
    display: none;
  }

  #app.sidebar-collapsed .admin-layout .yt-sidebar {
    width: var(--sidebar-compact-width);
  }

  /* Watch-page max width applies to ALL desktop sizes (>820px), not just
     the 821-1180 band where the rest of the watch-page layout tweaks
     live. Without this here, monitors >1180px had no horizontal cap and
     the player stretched to ~the full content column.

     Third term keeps the player + 2-line title above the fold on short
     viewports: it's the widest 16:9 player whose height + chrome budget
     (--watch-vertical-chrome ≈ topbar + paddings + meta block + safety
     margin) still fits in 100dvh. */
  .watch-page {
    width: min(
      100%,
      750px,
      calc((100dvh - var(--watch-vertical-chrome, 15rem)) * 16 / 9)
    );
    margin: 0 auto;
  }
}

.yt-sidebar {
  position: sticky;
  top: 72px;
  height: 100%;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
  border-right: 1px solid #1d282b;
  background: #070b0f;
  padding: 14px 10px;
  overflow: hidden;
}

.yt-sidebar button {
  position: relative;
  display: flex;
  align-items: center;
  gap: 18px;
  justify-content: flex-start;
  width: 100%;
  min-height: 50px;
  border: 0;
  border-radius: 12px;
  background: transparent;
  padding: 0 18px;
  text-align: left;
}

.yt-sidebar .sidebar-label {
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.yt-sidebar button.active,
.yt-sidebar button:hover {
  background: #172226;
}

.yt-sidebar .sidebar-nav button.active {
  background: #eaf7f2;
  color: #06110e;
  font-weight: 700;
  box-shadow: 0 8px 22px rgba(70, 199, 164, 0.18), inset 0 0 0 1px rgba(255, 255, 255, 0.24);
}

.sidebar-nav {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  scroll-behavior: smooth;
  padding-right: 2px;
}

.sidebar-group {
  display: grid;
  gap: 8px;
}

.sidebar-channels-group {
  margin-top: 10px;
  border-top: 1px solid #1d282b;
  padding-top: 14px;
}

.sidebar-section-label {
  display: block;
  margin: 10px 10px 2px;
  color: #7d8c8d;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0;
  text-transform: uppercase;
}

.yt-sidebar button.sidebar-accordion {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 18px;
  min-height: 48px;
  margin-top: 0;
  padding: 0 18px;
  color: #f2f7f3;
  font-size: 0.92rem;
  font-weight: 700;
  text-transform: none;
}

.sidebar-chevron {
  flex: 0 0 auto;
  width: 8px;
  height: 8px;
  margin-left: -8px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  opacity: 0.7;
  transform: rotate(45deg) translateY(-1px);
  transition: transform 180ms var(--spring), opacity 180ms var(--spring);
}

.sidebar-accordion[aria-expanded="true"] .sidebar-chevron {
  opacity: 0.95;
  transform: rotate(225deg) translateY(-1px);
}

.yt-sidebar button.sidebar-accordion:hover {
  color: #f2f7f3;
}

.yt-sidebar button.sidebar-child {
  width: 100%;
  margin-left: 0;
  padding-left: 18px;
}

.sidebar-icon,
.sidebar-channel-avatar {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 26px;
  height: 26px;
  border-radius: 999px;
  color: currentColor;
}

.sidebar-icon svg {
  width: 24px;
  height: 24px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.25;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.sidebar-channel-section-icon {
  background: #f2f7f3;
  color: #06110e;
}

.sidebar-channel-section-icon svg {
  width: 16px;
  height: 16px;
}

.sidebar-initial {
  background: #142023;
  color: #a8f5df;
  font-size: 0.78rem;
  font-weight: 800;
}

.sidebar-channel-avatar {
  position: relative;
  overflow: hidden;
  background: #142023;
}

.sidebar-channel-avatar img,
.channel-avatar img,
.home-channel-avatar img {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.channel-avatar-fallback {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: #9ff0d7;
  font-size: 0.78rem;
  font-weight: 800;
  line-height: 1;
}

.sidebar-channel-avatar.image-failed,
.channel-avatar.image-failed,
.home-channel-avatar.image-failed {
  background: #21453d;
}

.home-channel-strip {
  margin: 0 0 24px;
}

.home-channel-row {
  display: flex;
  gap: 14px;
  overflow-x: auto;
  padding: 2px 0 10px;
  scrollbar-width: none;
  scroll-snap-type: x proximity;
  -webkit-overflow-scrolling: touch;
}

.home-channel-row::-webkit-scrollbar {
  display: none;
}

.home-channel-chip {
  flex: 0 0 66px;
  display: grid;
  justify-items: center;
  min-height: 0;
  border: 0;
  border-radius: 999px;
  background: transparent;
  padding: 4px;
  color: #f2f7f3;
  text-align: center;
  scroll-snap-align: start;
}

.home-channel-chip:hover,
.home-channel-chip:focus-visible {
  background: #172226;
}

.home-channel-avatar {
  position: relative;
  display: grid;
  place-items: center;
  width: 58px;
  height: 58px;
  overflow: hidden;
  border-radius: 999px;
  background: #142023;
}

.sidebar-footer {
  flex: 0 0 auto;
  position: sticky;
  bottom: 0;
  display: grid;
  gap: 10px;
  margin-top: auto;
  border-top: 1px solid #1d282b;
  background: #070b0f;
  padding: 14px 0 4px;
  color: #98a6a6;
}

.admin-account-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 0 12px;
  border-bottom: 1px solid #1d282b;
}

.yt-sidebar .sidebar-footer:has(.admin-account-row) {
  border-top: none;
}

.admin-account-email {
  flex: 1;
  min-width: 0;
  font-size: 0.75rem;
  color: #5a6e6f;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.admin-signout-btn {
  flex: 0 0 auto;
  font-size: 0.75rem;
  padding: 3px 8px;
  border-radius: 4px;
  border: 1px solid #2a3a3c;
  background: transparent;
  color: #98a6a6;
  cursor: pointer;
  white-space: nowrap;
}

.admin-signout-btn:hover {
  background: #1a2628;
  color: #e2ecec;
}

.profile-picker {
  position: relative;
  display: grid;
  padding: 0;
}

.profile-picker-button {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  box-sizing: border-box;
  min-height: 42px;
  border: 1px solid #263235;
  border-radius: 10px;
  background: #10181c;
  color: #f2f7f3;
  padding: 6px 38px 6px 8px;
  line-height: 1;
  transition:
    background 180ms var(--spring),
    border-color 180ms var(--spring),
    box-shadow 220ms var(--spring);
}

.profile-picker-current {
  display: inline-flex;
  align-items: center;
  min-width: 0;
  gap: 12px;
  line-height: 1;
}

.profile-picker-current > span:last-child {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.profile-picker-button:hover {
  border-color: #3f5255;
  background: #131d22;
}

.profile-picker-button:focus-visible {
  outline: 3px solid #74c7ff;
  outline-offset: 2px;
  border-color: #5fbfae;
  box-shadow: 0 0 0 4px rgba(70, 199, 164, 0.12);
}

.profile-picker::after {
  content: "";
  position: absolute;
  right: 17px;
  bottom: 17px;
  width: 8px;
  height: 8px;
  border-right: 2px solid #98a6a6;
  border-bottom: 2px solid #98a6a6;
  transform: rotate(45deg);
  pointer-events: none;
}

.header-profile-picker::after {
  display: none;
}

.profile-menu {
  position: absolute;
  left: 0;
  right: 0;
  bottom: calc(100% + 10px);
  z-index: 30;
  display: grid;
  gap: 5px;
  border: 1px solid #263235;
  border-radius: 14px;
  background: rgba(11, 18, 21, 0.98);
  padding: 0;
  box-shadow: 0 22px 54px rgba(0, 0, 0, 0.52);
  backdrop-filter: blur(18px);
  animation: switcherIn 220ms var(--spring);
  transform-origin: bottom center;
}

.header-profile-picker .profile-menu {
  top: calc(100% + 10px);
  right: 0;
  bottom: auto;
  left: auto;
  width: min(228px, calc(100vw - 24px));
  transform-origin: top right;
}

.profile-menu-section {
  display: grid;
  gap: 0;
}

.profile-menu-label {
  padding: 0 6px;
  color: #98a6a6;
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
}

.profile-menu button {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 40px;
  align-items: center;
  gap: 10px;
  min-height: 50px;
  border: 0;
  border-radius: 12px;
  background: transparent;
  padding: 6px 0 6px 18px;
  text-align: left;
}

.profile-menu button > span:first-child {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.profile-menu button .profile-avatar {
  justify-self: end;
  width: 40px;
  height: 40px;
}

.profile-menu button:hover,
.profile-menu button.active {
  background: #172226;
}

.profile-menu button.active {
  color: #ffffff;
  box-shadow: inset 0 0 0 1px rgba(70, 199, 164, 0.45);
}

.profile-avatar {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 999px;
  background: #21453d;
  color: #9ff0d7;
  font-size: 1rem;
  font-weight: 700;
  line-height: 1;
}

.settings-avatar {
  background: #2c3238;
  color: #f2f7f3;
  line-height: 0;
}

.gear-icon {
  display: block;
  width: 18px;
  height: 18px;
  overflow: visible;
  flex: 0 0 auto;
}

.time-meter {
  width: 100%;
  height: 8px;
  overflow: hidden;
  border-radius: 999px;
  background: #1b272b;
}

.time-meter span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: #46c7a4;
  transition: width 420ms var(--spring);
}

.time-meter.good span {
  background: #34c759;
}

.time-meter.warning span {
  background: #ffd60a;
}

.time-meter.danger span {
  background: #ff453a;
}

.time-meter.unlimited span {
  background: linear-gradient(90deg, #46c7a4, #74c7ff);
  opacity: 0.45;
}

.yt-main {
  padding: 0 clamp(18px, 3vw, 36px) 42px;
  min-width: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  scroll-behavior: smooth;
}

.feed-header {
  position: sticky;
  top: 0;
  z-index: 4;
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 18px;
  margin: 0 0 8px;
  padding: 14px 0 10px;
  background: rgba(7, 11, 15, 0.96);
  backdrop-filter: blur(12px);
}

.feed-header h1 {
  margin: 0;
  font-size: clamp(1.42rem, 2vw, 2rem);
  font-weight: 700;
  line-height: 1.08;
}

.feed-header .help {
  margin: 4px 0 0;
}

.view-toggle-button {
  display: none;
  place-items: center;
  flex: 0 0 auto;
  width: 42px;
  height: 42px;
  min-height: 42px;
  border-radius: 999px;
  padding: 0;
  color: #f2f7f3;
  background: #111a1f;
}

.view-toggle-button svg {
  width: 21px;
  height: 21px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.15;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.compact {
  margin: 0;
  font-size: 0.86rem;
}

.usage {
  display: block;
  margin-top: 4px;
  color: #98a6a6;
}

.eyebrow {
  margin: 0 0 6px;
  color: #98a6a6;
  font-size: 0.73rem;
  font-weight: 700;
  letter-spacing: 0;
  text-transform: uppercase;
}

.video-button[hidden],
.video-card[hidden],
.video-button-shell[hidden],
.video-card-shell[hidden] {
  display: none;
}

.video-button-shell,
.video-card-shell {
  position: relative;
  min-width: 0;
}

.video-button {
  display: grid;
  grid-template-columns: 112px 1fr;
  align-items: center;
  gap: 12px;
  min-height: 82px;
  padding: 8px;
  text-align: left;
  background: #111a1f;
  transition:
    background 180ms var(--spring),
    box-shadow 220ms var(--spring),
    transform 180ms var(--press);
}

.video-button:hover {
  background: #162127;
}

.video-button.active {
  border-color: #46c7a4;
  box-shadow: inset 0 0 0 2px #46c7a4;
}

.thumbnail-wrap {
  position: relative;
  display: block;
  overflow: hidden;
  border-radius: 12px;
  background: #1e2a2e;
}

.video-button .thumbnail-wrap {
  width: 112px;
  border-radius: 6px;
}

.video-button img {
  width: 112px;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: 6px;
  background: #1e2a2e;
}

.thumbnail-wrap img {
  display: block;
}

/* Direct/Dropbox videos have no thumbnail — show a film-icon placeholder */
.thumbnail-wrap img[src=""] {
  visibility: hidden;
}
.thumbnail-wrap:has(img[src=""]) {
  display: flex;
  align-items: center;
  justify-content: center;
}
.thumbnail-wrap:has(img[src=""])::after {
  content: "▶";
  position: absolute;
  font-size: 1.8rem;
  color: rgba(255,255,255,0.25);
  pointer-events: none;
}

.playback-progress {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 4px;
  background: rgba(0, 0, 0, 0.5);
}

.playback-progress span {
  display: block;
  height: 100%;
  background: #ff0033;
}

.played-badge {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 2;
  border-radius: 999px;
  background: rgba(12, 18, 20, 0.86);
  padding: 6px 10px;
  color: #ffffff;
  font-size: 0.78rem;
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: 0.02em;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.38);
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.22);
  backdrop-filter: blur(8px);
}

.duration-overlay {
  position: absolute;
  bottom: 6px;
  right: 6px;
  z-index: 2;
  background: rgba(0, 0, 0, 0.8);
  color: #fff;
  font-size: 0.75rem;
  font-weight: 700;
  line-height: 1;
  padding: 2px 5px;
  border-radius: 3px;
  letter-spacing: 0.02em;
  pointer-events: none;
}

.circle-action-button {
  flex-shrink: 0;
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  min-width: 36px;
  min-height: 36px;
  aspect-ratio: 1;
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.06);
  padding: 0;
  color: rgba(255, 255, 255, 0.55);
  transition: background 0.15s, border-color 0.15s, color 0.15s;
}

.circle-action-button:hover,
.circle-action-button:focus-visible {
  border-color: rgba(255, 69, 96, 0.6);
  background: rgba(255, 69, 96, 0.1);
  color: #ff4560;
}

.favorite-button.active {
  background: rgba(255, 69, 96, 0.15);
  color: #ff4560;
}

.like-icon,
.plus-icon,
.check-icon {
  width: 18px;
  height: 18px;
}

.watch-meta-title-row {
  display: flex;
  align-items: flex-start;
  gap: 10px;
}

.watch-meta-title-row h1 {
  flex: 1;
  min-width: 0;
}

.watch-actions {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 8px;
}

.video-button strong {
  display: -webkit-box;
  overflow: hidden;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  line-height: 1.25;
}

.video-button small {
  display: block;
  margin-top: 5px;
  color: #98a6a6;
}

.video-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(255px, 1fr));
  gap: 22px 18px;
}

.video-list {
  display: grid;
  gap: 10px;
}

.continue-section {
  display: grid;
  gap: 12px;
  margin: 2px 0 28px;
  padding-bottom: 24px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.section-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.section-heading h2 {
  margin: 0;
  font-size: 1.18rem;
  font-weight: 700;
}

/* Horizontal-scroll row of in-progress videos. Same flex + scroll-snap
   pattern as .home-row so the strip feels like a sibling of the channel
   chips and the per-channel rows below it. */
.continue-row {
  display: flex;
  gap: 18px;
  overflow-x: auto;
  padding-bottom: 8px;
  scrollbar-width: thin;
  scroll-snap-type: x proximity;
  -webkit-overflow-scrolling: touch;
}

.continue-row::-webkit-scrollbar {
  height: 8px;
}

.continue-row::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.18);
  border-radius: 4px;
}

.continue-row > .video-card-shell {
  flex: 0 0 255px;
  width: 255px;
  min-width: 0;
  scroll-snap-align: start;
}

.shorts-section {
  display: grid;
  gap: 12px;
  margin: 0 0 32px;
}

.shorts-row {
  display: flex;
  gap: 14px;
  overflow-x: auto;
  padding-bottom: 6px;
  scrollbar-width: thin;
  scrollbar-color: #2a3c41 transparent;
}

.shorts-row::-webkit-scrollbar {
  height: 4px;
}

.shorts-row::-webkit-scrollbar-track {
  background: transparent;
}

.shorts-row::-webkit-scrollbar-thumb {
  background: #2a3c41;
  border-radius: 2px;
}

.home-row-section {
  display: grid;
  gap: 12px;
  margin: 0 0 32px;
}

.home-row-section[hidden] {
  display: none;
}

.home-row {
  display: flex;
  gap: 18px;
  overflow-x: auto;
  padding-bottom: 8px;
  scrollbar-width: thin;
  scrollbar-color: #2a3c41 transparent;
  scroll-snap-type: x proximity;
  -webkit-overflow-scrolling: touch;
}

.home-row::-webkit-scrollbar {
  height: 4px;
}

.home-row::-webkit-scrollbar-track {
  background: transparent;
}

.home-row::-webkit-scrollbar-thumb {
  background: #2a3c41;
  border-radius: 2px;
}

.home-row > .video-card-shell {
  flex: 0 0 255px;
  width: 255px;
  min-width: 0;
  scroll-snap-align: start;
}

.section-title-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 0;
  background: transparent;
  padding: 0;
  margin: 0;
  cursor: pointer;
  color: inherit;
  font: inherit;
  text-align: left;
  transition: opacity 180ms var(--spring);
}

.section-title-link:hover,
.section-title-link:focus-visible {
  opacity: 0.85;
}

.section-title-link h2 {
  margin: 0;
  font-size: 1.18rem;
  font-weight: 700;
}

.section-title-chevron {
  font-size: 1.5rem;
  color: #98a6a6;
  font-weight: 600;
  line-height: 1;
  transform: translateY(-1px);
}

.short-card-shell {
  flex: 0 0 auto;
  width: 128px;
  position: relative;
  min-width: 0;
}

.short-card {
  display: grid;
  gap: 8px;
  border: 0;
  background: transparent;
  padding: 0;
  text-align: left;
  cursor: pointer;
  width: 100%;
  transition: transform 180ms var(--press);
}

.short-card:hover {
  transform: translateY(-2px);
}

.short-card:active {
  transform: scale(0.985);
}

.short-card .thumbnail-wrap,
.short-card img {
  width: 100%;
  aspect-ratio: 9 / 16;
}

.short-card img {
  object-fit: cover;
  border-radius: 12px;
  background: #1e2a2e;
  transition: filter 180ms var(--spring), transform 220ms var(--spring);
}

.short-card:hover img {
  filter: brightness(1.08);
}

.short-card strong {
  display: -webkit-box;
  overflow: hidden;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  line-height: 1.2;
  font-size: 0.85rem;
  color: #f2f7f3;
  font-weight: 600;
}

.video-card {
  display: grid;
  gap: 10px;
  min-height: 0;
  border: 0;
  background: transparent;
  padding: 0;
  text-align: left;
  transition: transform 180ms var(--press);
}

.video-card:hover {
  transform: translateY(-2px);
}

.video-card:active {
  transform: scale(0.985);
}

.video-card .thumbnail-wrap,
.video-card img {
  width: 100%;
  aspect-ratio: 16 / 9;
}

.video-card img {
  object-fit: cover;
  border-radius: 12px;
  background: #1e2a2e;
  transition: filter 180ms var(--spring), transform 220ms var(--spring);
}

.video-card:hover img {
  filter: brightness(1.08);
}

.video-card strong {
  display: -webkit-box;
  overflow: hidden;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  line-height: 1.25;
}

.video-card small {
  display: block;
  margin-top: 5px;
  color: #98a6a6;
}

.watch-page {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 22px;
  align-items: start;
  padding-top: 14px;
}

.watch-primary {
  display: grid;
  gap: 16px;
}

.player-frame {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  background: #000000;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 22px 70px rgba(0, 0, 0, 0.48);
}

.player-frame::before {
  content: "";
  position: absolute;
  inset: 50% auto auto 50%;
  width: 28px;
  height: 28px;
  margin: -14px 0 0 -14px;
  border: 3px solid rgba(255, 255, 255, 0.22);
  border-top-color: rgba(255, 255, 255, 0.9);
  border-radius: 999px;
  animation: playerSpinner 800ms linear infinite;
  pointer-events: none;
}

@keyframes playerSpinner {
  to {
    transform: rotate(360deg);
  }
}

.watch-meta h1 {
  margin: 0;
  /* Tuned to roughly match YouTube's own watch-page title size (~20px).
     The previous clamp(1.35rem, 2.1vw, 2.2rem) topped out at ~35px on
     wide monitors and dominated the page under the player. The mobile
     breakpoint (max-width: 820px) has its own smaller override. */
  font-size: clamp(1.25rem, 1.4vw, 1.5rem);
  line-height: 1.2;
}

.watch-meta {
  /* Title scrolls away with the up-next list on every breakpoint -
     no longer pinned under the topbar. The blur backdrop and z-index
     were only needed for the previous sticky overlap behaviour. */
  padding: 10px 0 12px;
}

.watch-meta p {
  margin: 8px 0 0;
  color: #98a6a6;
}

.player-frame iframe,
.player-frame video {
  position: relative;
  z-index: 1;
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}

/* Transparent layer above the YouTube iframe that intercepts taps so they
   toggle play/pause via the IFrame API instead of summoning YouTube's
   overlay. The bottom inset leaves a "control corridor" where YouTube's
   own seek bar / fullscreen / captions / settings stay clickable. */
.player-tap-shield {
  position: absolute;
  inset: 0 0 56px 0;
  z-index: 2;
  cursor: pointer;
  background: transparent;
}

.player-notice {
  display: grid;
  place-items: center;
  align-content: center;
  gap: 18px;
  width: 100%;
  height: 100%;
  padding: 24px;
  background: #050708;
  text-align: center;
}

.player-notice h2 {
  margin: 0;
  font-size: clamp(1.5rem, 3vw, 2.8rem);
}

.up-next {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(255px, 1fr));
  gap: 22px 18px;
  align-content: start;
  scroll-margin-top: 92px;
}

.up-next .video-button {
  grid-template-columns: 1fr;
  gap: 10px;
  min-height: 0;
  border: 0;
  background: transparent;
  padding: 0;
}

.up-next .video-button .thumbnail-wrap,
.up-next .video-button img {
  width: 100%;
}

.up-next .video-button .thumbnail-wrap,
.up-next .video-button img {
  border-radius: 12px;
}

.now-playing h1,
.panel h1,
.empty-state h1 {
  margin: 0;
  max-width: 880px;
  font-size: clamp(2rem, 4vw, 4.4rem);
  font-weight: 700;
  line-height: 1.02;
}

.parent-shell {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
  width: min(1320px, calc(100% - 32px));
  margin: 0 auto;
  padding: 34px 0;
}

.settings-layout {
  min-height: calc(100vh - 72px);
}

.settings-nav {
  position: sticky;
  top: 72px;
  z-index: 6;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  grid-column: 1 / -1;
  padding: 0 0 2px;
  background: #070b0f;
}

.settings-page-header {
  position: sticky;
  top: 0;
  z-index: 8;
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) 44px;
  align-items: center;
  min-height: 58px;
  margin: -8px 0 0;
  padding: 4px 0 10px;
  background: rgba(7, 11, 15, 0.96);
  backdrop-filter: blur(16px);
}

.settings-page-header h1 {
  grid-column: 2;
  margin: 0;
  color: #f3f7f4;
  font-size: 1.18rem;
  font-weight: 700;
  text-align: center;
}

.settings-back-button {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  min-height: 42px;
  border: 0;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
  color: #f3f7f4;
  padding: 0;
}

.settings-back-button span {
  transform: translateY(-1px);
  font-size: 2.2rem;
  font-weight: 400;
  line-height: 1;
}

.settings-nav button {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 40px;
  border-radius: 999px;
  padding: 0 14px;
  color: #d7dfdd;
  font-size: 0.95rem;
  font-weight: 650;
}

.settings-nav button.active {
  border-color: #46c7a4;
  background: #eaf7f2;
  color: #06110e;
}

.admin-layout {
  display: grid;
  grid-template-columns: var(--sidebar-width) 1fr;
  min-height: calc(100vh - 72px);
}

.admin-sidebar {
  grid-column: 1;
  align-self: start;
  height: calc(100vh - 72px);
}

.admin-sidebar .sidebar-nav {
  display: flex;
  flex-direction: column;
  align-content: start;
  justify-content: flex-start;
}

.admin-sidebar .sidebar-nav button {
  flex: 0 0 auto;
}

.parent-shell.narrow {
  width: min(520px, calc(100% - 32px));
  min-height: calc(100vh - 72px);
  align-content: center;
}

.parent-auth-shell {
  display: grid;
  place-items: center;
  min-height: calc(100vh - 72px);
  padding: 24px;
}

.parent-auth-card {
  display: grid;
  gap: 18px;
  width: min(360px, 100%);
  padding: 28px;
  border: 1px solid #223035;
  border-radius: 16px;
  background: #10181c;
  box-shadow: 0 22px 56px rgba(0, 0, 0, 0.42);
}

.parent-auth-icon {
  display: inline-grid;
  place-items: center;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: rgba(70, 199, 164, 0.14);
  color: #8df2d1;
  font-size: 1.15rem;
  font-weight: 800;
  letter-spacing: 0.08em;
}

.parent-auth-card h1 {
  margin: 0;
  color: #f3f7f4;
  font-size: clamp(1.7rem, 2.2vw, 2.15rem);
  font-weight: 750;
  line-height: 1.08;
  letter-spacing: 0;
}

.parent-auth-form {
  display: grid;
  gap: 12px;
}

.parent-auth-form input {
  width: 100%;
  min-height: 50px;
  border-radius: 10px;
  font-size: 1rem;
}

.parent-auth-form input[aria-invalid="true"] {
  border-color: #ff8f8f;
  outline: 2px solid #ff8f8f;
  outline-offset: -1px;
}

.parent-auth-form input.pin-error-shake {
  animation: pin-shake 0.42s cubic-bezier(.36,.07,.19,.97);
}

@keyframes pin-shake {
  10%, 90% { transform: translate3d(-1px, 0, 0); }
  20%, 80% { transform: translate3d(2px, 0, 0); }
  30%, 50%, 70% { transform: translate3d(-4px, 0, 0); }
  40%, 60% { transform: translate3d(4px, 0, 0); }
}

@media (prefers-reduced-motion: reduce) {
  .parent-auth-form input.pin-error-shake { animation: none; }
}

.parent-auth-form button.primary {
  width: 100%;
  min-height: 50px;
  border-radius: 10px;
  font-size: 1rem;
}

.parent-auth-form .message {
  min-height: 1.25em;
  margin: 0;
  color: #ff8f8f;
  font-size: 0.9rem;
  line-height: 1.35;
}

.settings-gate-backdrop {
  position: fixed;
  inset: 0;
  z-index: 120;
  display: grid;
  place-items: center;
  padding: 24px;
  background: rgba(2, 5, 7, 0.64);
  backdrop-filter: blur(10px);
}

.settings-gate {
  position: relative;
  display: grid;
  justify-items: center;
  gap: 18px;
  width: min(360px, calc(100vw - 48px));
  padding: 30px;
  border: 1px solid #26383d;
  border-radius: 18px;
  background: #10181c;
  box-shadow: 0 28px 80px rgba(0, 0, 0, 0.52);
  text-align: center;
}

.settings-gate h1 {
  margin: 0;
  color: #f3f7f4;
  font-size: clamp(1.7rem, 2.2vw, 2.1rem);
  font-weight: 750;
  line-height: 1.05;
}

.settings-gate .parent-auth-form {
  width: 100%;
}

.settings-gate-close {
  position: absolute;
  top: 10px;
  right: 10px;
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  min-height: 36px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: #9aa8a8;
  font-size: 1.5rem;
  line-height: 1;
}

.settings-gate-close:hover,
.settings-gate-close:focus-visible {
  background: #182327;
  color: #f3f7f4;
}

.parent-section-shell {
  grid-template-columns: 1fr;
  align-content: start;
  align-items: start;
  width: min(760px, calc(100% - 32px));
}

.parent-section-shell .rules-panel {
  width: 100%;
}

.parent-section-shell .panel h1 {
  font-size: clamp(1.55rem, 1.8vw, 2.2rem);
  font-weight: 700;
  line-height: 1.08;
}

.parent-section-shell .panel h2 {
  margin: 0;
  font-size: 1.08rem;
  font-weight: 650;
}

.panel,
.approval-card {
  border: 1px solid #1e2a2e;
  border-radius: 14px;
  background: #151d21;
  padding: 20px;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.28);
}

.parent-section-shell .panel,
.parent-section-shell .approval-card {
  padding: 16px 18px;
  box-shadow: none;
}

.settings-home-groups {
  display: grid;
  /* Was 18px gap and 18px margin-top. The 18px gap between the two
     row groups was wider than the 12px panel-to-panel gap, which
     inverted the visual hierarchy (groups inside one panel felt
     further apart than separate panels). Both reduced to 12px. */
  gap: 12px;
  margin-top: 12px;
}

.settings-home-group {
  overflow: hidden;
  border: 1px solid #263235;
  border-radius: 14px;
  background: #0b1215;
}

.settings-home-row {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  width: 100%;
  min-height: 58px;
  border: 0;
  border-radius: 0;
  background: transparent;
  padding: 9px 12px;
  color: #f2f7f3;
  text-align: left;
}

.settings-home-row + .settings-home-row {
  border-top: 1px solid #1e2a2e;
}

.settings-home-row:hover,
.settings-home-row:focus-visible {
  background: #141f24;
}

.settings-row-icon {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 7px;
  color: #fff;
}

.settings-row-icon svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.1;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.settings-row-icon.library { background: #ff0033; }
.settings-row-icon.history { background: #5856d6; }
.settings-row-icon.categories { background: #ff9f0a; }
.settings-row-icon.kids { background: #ff2d55; }
.settings-row-icon.rules { background: #34c759; }

.settings-row-text {
  display: grid;
  min-width: 0;
  gap: 2px;
}

.settings-row-text strong {
  overflow: hidden;
  color: #f2f7f3;
  font-size: 1rem;
  font-weight: 600;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.settings-row-text small {
  overflow: hidden;
  color: #98a6a6;
  font-size: 0.82rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.settings-row-chevron {
  color: #7d8c8d;
  font-size: 1.7rem;
  font-weight: 300;
  line-height: 1;
}

.parent-section-shell .approval-card.focused {
  border-color: #46c7a4;
  box-shadow: 0 0 0 1px rgba(70, 199, 164, 0.35), 0 6px 22px rgba(0, 0, 0, 0.24);
}

.parent-section-shell .panel-heading,
.parent-section-shell .approval-card {
  gap: 12px;
}

.wide-panel,
.approval-grid {
  grid-column: 1 / -1;
}

.panel-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
}

.approval-card {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) minmax(220px, auto) auto;
  align-items: start;
  gap: 14px;
}

.toolbar {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.profile-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 16px;
}

.profile-tabs button.active {
  border-color: #46c7a4;
  background: #132923;
  color: #7ee0c5;
}

.user-list {
  display: grid;
  gap: 10px;
  margin-top: 16px;
}

.user-card {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr);
  align-items: center;
  gap: 12px;
  border: 1px solid #1e2a2e;
  border-radius: 8px;
  background: #0b1215;
  padding: 10px 12px;
}

.user-edit-form {
  display: grid;
  grid-template-columns: minmax(160px, 1fr) minmax(180px, 1.4fr) auto auto;
  align-items: end;
  gap: 10px 14px;
  min-width: 0;
}

.user-edit-form label {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.user-edit-form label span {
  color: #7d8c8d;
  font-size: 0.72rem;
  font-weight: 700;
}

.user-edit-form input {
  width: 100%;
}

.user-rule-text,
.user-card small {
  color: #98a6a6;
}

.user-rule-cell {
  align-self: center;
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.user-rule-text {
  overflow-wrap: anywhere;
  line-height: 1.35;
}

.user-rule-link {
  background: none;
  border: none;
  padding: 0;
  color: #7fd7d7;
  font: inherit;
  font-size: 0.78rem;
  text-align: left;
  cursor: pointer;
  align-self: flex-start;
  min-height: 0;
}

.user-rule-link:hover,
.user-rule-link:focus-visible {
  color: #a3ecec;
  text-decoration: underline;
}

.user-active-tag {
  display: inline-block;
  margin-left: 6px;
  padding: 1px 6px;
  border-radius: 999px;
  background: rgba(127, 215, 215, 0.15);
  color: #7fd7d7;
  font-size: 0.62rem;
  font-style: normal;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  vertical-align: middle;
}

.user-card small {
  align-self: center;
  justify-self: end;
  white-space: nowrap;
}

.user-card-actions {
  display: flex;
  flex-direction: column;
  gap: 6px;
  align-self: center;
  justify-self: end;
}

.user-card-actions button {
  min-width: 84px;
}

.user-edit-form button {
  min-height: 40px;
}

.user-settings-row-highlight {
  animation: user-rule-row-flash 2.2s ease-out;
}

@keyframes user-rule-row-flash {
  0%   { box-shadow: 0 0 0 2px rgba(127, 215, 215, 0.75); background: rgba(127, 215, 215, 0.14); }
  60%  { box-shadow: 0 0 0 2px rgba(127, 215, 215, 0.35); background: rgba(127, 215, 215, 0.06); }
  100% { box-shadow: 0 0 0 0 rgba(127, 215, 215, 0);      background: transparent; }
}

@media (prefers-reduced-motion: reduce) {
  .user-settings-row-highlight {
    animation: none;
    box-shadow: 0 0 0 2px rgba(127, 215, 215, 0.55);
  }
}

.approval-form {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 10px;
  margin-top: 18px;
}

.library-health-panel {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.library-health-panel h2 {
  margin: 0 0 4px;
}

.library-health-panel .help {
  margin: 0;
}

.library-health-panel button {
  flex: 0 0 auto;
}

.parent-section-shell .approval-form,
.parent-section-shell .settings-grid {
  margin-top: 14px;
}

.form-error {
  grid-column: 1 / -1;
  margin: 4px 0 0;
  font-size: 0.88rem;
  color: #ff6b6b;
}

button.primary.is-in-library {
  opacity: 0.6;
  cursor: default;
}

button.primary.is-in-library:not([disabled]):hover {
  opacity: 1;
}

.settings-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin-top: 18px;
}

.settings-grid label {
  display: grid;
  gap: 6px;
  color: #98a6a6;
  font-size: 0.9rem;
}

.settings-grid .checkline {
  display: flex;
  align-items: center;
  gap: 8px;
}

.settings-grid button {
  align-self: end;
}

.rules-form {
  display: grid;
  gap: 16px;
}

.rules-form .panel-heading {
  position: sticky;
  top: 0;
  z-index: 2;
  padding-bottom: 10px;
  background: #10181c;
}

.rules-list {
  display: grid;
  gap: 10px;
}

.settings-toggle-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 18px;
  min-height: 52px;
  border: 1px solid #1e2a2e;
  border-radius: 8px;
  background: #0b1215;
  padding: 10px 12px;
}

.settings-toggle-row strong,
.settings-toggle-row small {
  display: block;
}

.settings-toggle-row strong {
  color: #f2f7f3;
  font-weight: 600;
}

.settings-toggle-row small {
  margin-top: 2px;
  color: #98a6a6;
  font-size: 0.82rem;
}

.switch-input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.switch-ui {
  position: relative;
  width: 46px;
  height: 28px;
  border-radius: 999px;
  background: #2f3a3d;
  transition: background 180ms var(--spring);
}

.switch-ui::after {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  width: 24px;
  height: 24px;
  border-radius: 999px;
  background: #ffffff;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35);
  transition: transform 180ms var(--spring);
}

.switch-input:checked + .switch-ui {
  background: #34c759;
}

.switch-input:checked + .switch-ui::after {
  transform: translateX(18px);
}

.rules-fields {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 168px));
  gap: 10px;
  margin: -2px 0 4px;
  padding-left: 12px;
  transition: opacity 180ms var(--spring), filter 180ms var(--spring);
}

.rules-fields label {
  display: grid;
  gap: 5px;
  color: #98a6a6;
  font-size: 0.84rem;
}

.daily-limit-fields {
  grid-template-columns: minmax(0, 140px);
}

.rules-form:has(input[name="dailyLimitEnabled"]:not(:checked)) .daily-limit-fields,
.rules-form:has(input[name="bedtimeEnabled"]:not(:checked)) .bedtime-fields {
  opacity: 0.38;
  filter: grayscale(0.25);
  pointer-events: none;
}

.stack {
  display: grid;
  gap: 12px;
  margin-top: 18px;
}

.primary {
  border-color: #39a88d;
  background: #23866f;
  color: #ffffff;
  font-weight: 700;
}

.danger {
  border-color: #74423e;
  color: #ff9c92;
}

.help,
.approval-card p,
.muted p,
.message {
  color: #98a6a6;
  line-height: 1.5;
}

.parent-section-shell .help {
  margin: 12px 0 0;
  font-size: 0.92rem;
}

.approval-grid {
  display: grid;
  gap: 12px;
}

.parent-section-shell .approval-grid {
  gap: 10px;
}

.settings-filter {
  margin-top: 2px;
}

.collection-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 10px;
  margin-top: 16px;
}

.channel-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 8px;
  margin-top: 12px;
}

.preview-video-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 8px;
  margin-top: 10px;
}

.preview-video-card {
  display: grid;
  gap: 7px;
  min-width: 0;
}

.preview-video-card img {
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: 7px;
  object-fit: cover;
  background: #081013;
}

.preview-video-card strong,
.preview-video-card small {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
}

.preview-video-card strong {
  color: #f2f7f3;
  font-size: 0.88rem;
  line-height: 1.25;
}

.preview-video-card small {
  margin-top: 2px;
  color: #98a6a6;
  font-size: 0.78rem;
  white-space: nowrap;
}

.library-filter {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.history-filter {
  margin-top: 14px;
}

.library-filter button {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border-radius: 999px;
}

.library-filter button.active {
  border-color: #46c7a4;
  background: #eaf7f2;
  color: #06110e;
  font-weight: 700;
}

.library-filter small {
  display: grid;
  min-width: 22px;
  min-height: 22px;
  place-items: center;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.09);
  font-size: 0.76rem;
}

.channel-summary-card {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  min-width: 0;
  padding: 10px;
}

.channel-summary-card img,
.channel-avatar {
  position: relative;
  overflow: hidden;
  width: 44px;
  height: 44px;
  border-radius: 999px;
  object-fit: cover;
  background: #1e2a2e;
}

.channel-avatar {
  display: grid;
  place-items: center;
  color: #9ff0d7;
  font-weight: 700;
}

.channel-summary-card small {
  display: block;
  margin-top: 3px;
  color: #98a6a6;
}

.channel-summary-card strong,
.channel-summary-card small {
  overflow: hidden;
  text-overflow: ellipsis;
}

.channel-summary-card strong {
  display: block;
  color: #f2f7f3;
  font-size: 0.98rem;
  white-space: nowrap;
}

.channel-summary-card small {
  white-space: nowrap;
}

.channel-summary-actions {
  display: inline-flex;
  gap: 6px;
  justify-self: end;
}

.channel-summary-actions button {
  min-height: 34px;
  border-radius: 7px;
  padding: 0 10px;
}

.diagnostic-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 10px;
  margin-top: 16px;
}

.status-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 10px;
  margin-top: 14px;
}

.dashboard-grid {
  display: grid;
  /* Auto-fit lets each tile claim a 200px minimum, then fills the row.
     At the 750px settings width that yields 3 across; on narrower
     phones it drops to 2 then 1 (the mobile media query still forces
     1fr explicitly). No band-specific override needed. */
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 10px;
  margin-top: 12px;
}

.mini-card {
  display: grid;
  gap: 4px;
  border: 1px solid #1e2a2e;
  border-radius: 8px;
  background: #0b1215;
  padding: 10px 12px;
}

.mini-card span {
  color: #98a6a6;
}

.account-sync-panel .panel-heading {
  align-items: start;
}

.account-sync-panel .help {
  margin-top: 6px;
}

.account-user {
  margin-bottom: 0;
}

.build-info {
  margin-top: 8px;
  margin-bottom: 0;
  font-size: 11px;
  letter-spacing: 0.02em;
  color: var(--muted, #7a7f88);
  font-variant-numeric: tabular-nums;
}

.stat-card strong {
  font-size: 1.45rem;
  line-height: 1.1;
}

.activity-list,
.kid-stat-list {
  display: grid;
  gap: 10px;
  margin-top: 14px;
}

.history-list {
  max-height: calc(100vh - 230px);
  overflow-y: auto;
  padding-right: 4px;
}

.activity-row {
  display: grid;
  grid-template-columns: 96px minmax(0, 1fr);
  align-items: center;
  gap: 12px;
  border: 1px solid #1e2a2e;
  border-radius: 8px;
  background: #0b1215;
  padding: 8px;
}

.activity-row img {
  width: 96px;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: 6px;
  background: #1e2a2e;
}

.activity-row strong,
.activity-row span {
  display: block;
}

.activity-row strong {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.activity-row span,
.kid-stat-row span {
  margin-top: 3px;
  color: #98a6a6;
  font-size: 0.88rem;
}

.kid-stat-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 160px auto;
  align-items: center;
  gap: 14px;
  border: 1px solid #1e2a2e;
  border-radius: 8px;
  background: #0b1215;
  padding: 10px 12px;
}

.user-settings-list {
  display: grid;
  gap: 12px;
  margin: 14px 0;
}

.user-settings-row {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
  border: 1px solid #1e2a2e;
  border-radius: 14px;
  background: linear-gradient(180deg, #0d171a, #091013);
  padding: 14px 16px 16px;
}

.user-rule-summary {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) minmax(132px, 180px);
  align-items: center;
  gap: 12px;
}

.user-rule-summary .profile-avatar {
  width: 42px;
  height: 42px;
  font-size: 1rem;
}

.user-rule-summary strong {
  display: block;
  color: #f2f7f3;
  font-size: 1.02rem;
}

.user-rule-summary span {
  min-width: 0;
  color: #98a6a6;
  font-size: 0.86rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.user-rule-meter {
  display: grid;
  justify-items: stretch;
  gap: 6px;
}

.user-rule-meter > span {
  color: #f2f7f3;
  font-size: 0.82rem;
  font-weight: 800;
  text-align: right;
}

.user-rule-meter .time-meter {
  height: 5px;
}

.user-rule-controls {
  display: grid;
  grid-template-columns: minmax(136px, 0.9fr) minmax(112px, 0.65fr) minmax(136px, 0.9fr) minmax(104px, 0.62fr) minmax(104px, 0.62fr);
  align-items: end;
  gap: 10px;
}

.user-rule-controls label {
  display: grid;
  min-width: 0;
  gap: 5px;
}

.user-rule-controls label span {
  margin-top: 3px;
  color: #98a6a6;
  font-size: 0.84rem;
}

.user-settings-row select,
.user-settings-row input {
  width: 100%;
}

.muted-control {
  opacity: 0.48;
}

.time-adjust-actions {
  display: inline-flex;
  justify-content: flex-end;
  gap: 6px;
}

.time-adjust-actions button {
  min-height: 32px;
  border-radius: 999px;
  padding: 0 10px;
  color: #fff;
  font-size: 0.82rem;
  font-weight: 700;
}

.warning-card {
  border-color: #64413f;
  background: #171316;
}

.search-results {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: 12px;
  margin-top: 16px;
}

.search-result {
  display: grid;
  grid-template-rows: auto 1fr auto;
  gap: 10px;
  border: 1px solid #1e2a2e;
  border-radius: 8px;
  background: #0b1215;
  padding: 10px;
}

.search-result img {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: 6px;
  background: #1e2a2e;
}

.search-result h3 {
  margin: 0;
  font-size: 1rem;
  line-height: 1.25;
  display: -webkit-box;
  overflow: hidden;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.search-result p {
  margin: 6px 0 0;
  color: #98a6a6;
  line-height: 1.4;
}

.approval-card h2,
.muted h2 {
  margin: 8px 0 0;
  font-size: 1.15rem;
}

.parent-section-shell .approval-card h2,
.parent-section-shell .muted h2 {
  margin-top: 6px;
  font-size: 1.04rem;
  line-height: 1.2;
}

.approval-card.unavailable {
  border-color: #64413f;
  background: #171316;
}

.pending-review-section {
  grid-column: 1 / -1;
  border-top: 1px solid #3a3a3a;
  padding-top: 12px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.pending-review-heading {
  display: flex;
  align-items: center;
  gap: 6px;
  color: #f0a040;
  font-size: 0.9rem;
}

.pending-review-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.pending-review-item {
  display: grid;
  grid-template-columns: 48px 1fr auto auto;
  align-items: center;
  gap: 10px;
}

.pending-thumb {
  width: 48px;
  height: 27px;
  object-fit: cover;
  border-radius: 4px;
  background: #222;
}

.pending-title {
  font-size: 0.85rem;
  line-height: 1.3;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pending-more {
  font-size: 0.82rem;
  color: #888;
  margin: 0;
}

button.compact {
  padding: 4px 10px;
  font-size: 0.8rem;
}

.pending-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 9px;
  background: #f0a040;
  color: #000;
  font-size: 0.7rem;
  font-weight: 700;
  vertical-align: middle;
}

.approval-main {
  min-width: 0;
}

.approval-thumb {
  position: relative;
  display: inline-block;
  overflow: hidden;
  flex-shrink: 0;
  background: #1d272b;
  color: #cfdadc;
  font-weight: 700;
  text-align: center;
}

.approval-thumb img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.approval-thumb-video {
  width: 128px;
  aspect-ratio: 16 / 9;
  border-radius: 6px;
}

.approval-thumb-channel {
  width: 64px;
  height: 64px;
  border-radius: 50%;
}

.approval-thumb-fallback {
  display: grid;
  place-items: center;
  font-size: 1.4rem;
  letter-spacing: 0.02em;
}

.approval-thumb .duration-overlay {
  bottom: 4px;
  right: 4px;
}

.approval-controls {
  display: grid;
  grid-template-columns: 1fr;
  align-items: start;
  gap: 12px;
  min-width: 0;
}

.approval-status-row {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.approval-card p {
  margin: 8px 0 0;
  overflow-wrap: anywhere;
}

.parent-section-shell .approval-card p {
  margin-top: 5px;
  font-size: 0.92rem;
  line-height: 1.35;
}

.parent-section-shell .approval-card .approval-url {
  max-width: 420px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.status-note {
  color: #ffb2a8;
}

.status-note.neutral {
  color: #98a6a6;
}

.status-note.neutral {
  color: #98a6a6;
}

.profile-checks,
.collection-checks {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 14px;
}

.parent-section-shell .profile-checks,
.parent-section-shell .collection-checks {
  gap: 8px;
  margin-top: 0;
}

.assignment-group {
  display: grid;
  gap: 6px;
  margin-top: 0;
}

.collection-assignment-group {
  margin-top: 0;
}

.category-select,
.video-limit-select {
  width: min(260px, 100%);
}

.video-limit-group {
  margin-top: 0;
}

.video-limit-hint {
  color: #7d8c8d;
  font-size: 0.72rem;
  font-style: italic;
}

.video-limit-select[disabled] {
  opacity: 0.6;
  cursor: progress;
}

.assignment-label {
  color: #7d8c8d;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0;
  text-transform: uppercase;
}

.profile-checks button,
.profile-checks label,
.collection-checks label {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 34px;
  border: 1px solid #263235;
  border-radius: 8px;
  padding: 0 10px;
  background: #0b1215;
  color: #dbe6e1;
}

.parent-section-shell .profile-checks button,
.parent-section-shell .profile-checks label,
.parent-section-shell .collection-checks label {
  min-height: 30px;
  border-radius: 999px;
  padding: 0 11px;
  font-size: 0.92rem;
}

.profile-checks button.active,
.profile-checks label:has(input:checked),
.collection-checks label:has(input:checked) {
  border-color: #46c7a4;
  background: #eaf7f2;
  color: #06110e;
  font-weight: 700;
}

.profile-checks input,
.collection-checks input,
.checkline input {
  width: 16px;
  height: 16px;
  accent-color: #46c7a4;
}

.profile-checks input,
.collection-checks input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.pill {
  display: inline-flex;
  align-items: center;
  min-height: 26px;
  border-radius: 999px;
  padding: 0 10px;
  background: #132923;
  color: #7ee0c5;
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
}

.parent-section-shell .pill,
.parent-section-shell .status-pill {
  min-height: 24px;
  padding: 0 9px;
  font-size: 0.72rem;
}

@media (min-width: 761px) {
  .brand {
    font-size: 1.22rem;
    padding-right: 10px;
  }

  .admin-layout {
    display: block;
    height: calc(100vh - 72px);
    overflow: hidden;
    padding-left: var(--sidebar-width);
  }

  .admin-layout .parent-shell {
    height: 100%;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    scroll-behavior: smooth;
  }

  .settings-layout .parent-shell {
    min-height: calc(100vh - 72px);
  }

  .admin-layout .parent-auth-shell {
    height: 100%;
    min-height: 0;
  }

  .youtube-shell .yt-sidebar,
  .admin-layout .yt-sidebar {
    padding: 10px;
  }

  .admin-layout .yt-sidebar {
    position: fixed;
    top: 72px;
    bottom: 0;
    left: 0;
    width: var(--sidebar-width);
    height: auto;
    border-right: 1px solid #1d282b;
  }

  .admin-layout .sidebar-nav {
    flex: 0 1 auto;
    padding-bottom: 88px;
  }

  .admin-layout .sidebar-footer {
    position: fixed;
    left: 0;
    bottom: 0;
    z-index: 9;
    width: var(--sidebar-width);
    margin-top: 0;
    border-top: 1px solid #1d282b;
    border-right: 0;
    background: #070b0f;
    padding: 12px 10px 10px;
  }

  .youtube-shell .yt-sidebar button,
  .admin-layout .yt-sidebar button {
    min-height: 36px;
    border-radius: 8px;
    padding: 0 12px;
    font-size: 0.94rem;
  }

  .youtube-shell .yt-sidebar button.sidebar-accordion {
    min-height: 36px;
    margin-top: 0;
    font-size: 0.94rem;
  }

  .parent-section-shell {
    /* Match the watch-page horizontal cap (750px on every desktop size)
       so switching between /watch and /settings doesn't visibly change
       the content column width. */
    width: min(750px, calc(100% - 28px));
    gap: 12px;
    padding: 20px 0 28px;
  }

  .parent-section-shell .rules-panel {
    width: 100%;
    max-width: 100%;
  }

  .parent-section-shell .rules-form {
    width: 100%;
  }

  .parent-section-shell .panel,
  .parent-section-shell .approval-card {
    padding: 14px 16px;
  }

  .parent-section-shell .panel h1 {
    font-size: clamp(1.35rem, 1.45vw, 1.75rem);
    font-weight: 700;
  }

  .parent-section-shell .eyebrow {
    margin-bottom: 4px;
    font-size: 0.68rem;
  }

  .parent-section-shell button {
    min-height: 36px;
    border-radius: 7px;
    padding: 0 12px;
    font-size: 0.92rem;
  }

  /* Settings home rows are buttons too, so the rule above was zeroing
     their vertical padding and shrinking them to 36px on desktop. The
     icon (30px) plus 2-line text (~31px) needs comfortable breathing
     room. Specificity (0,2,0) beats .parent-section-shell button (0,1,1). */
  .parent-section-shell .settings-home-row {
    min-height: 64px;
    padding: 14px 14px;
  }

  .parent-section-shell input:not([type="checkbox"]),
  .parent-section-shell select {
    min-height: 40px;
    border-radius: 7px;
    padding: 0 12px;
    font-size: 0.92rem;
  }

  .parent-section-shell .approval-form {
    gap: 8px;
    margin-top: 12px;
  }

  .parent-section-shell .rules-form .panel-heading button {
    width: fit-content;
    min-width: 138px;
  }

  .parent-section-shell .toolbar {
    gap: 8px;
  }

  .parent-section-shell .approval-card {
    display: grid;
    grid-template-columns: auto minmax(220px, 1fr) minmax(330px, auto) auto;
    align-items: center;
  }

  .parent-section-shell .approval-card h2 {
    font-size: 1rem;
  }

  .parent-section-shell .profile-checks button,
  .parent-section-shell .profile-checks label,
  .parent-section-shell .collection-checks label {
    min-height: 28px;
    border-radius: 999px;
    padding: 0 10px;
    font-size: 0.88rem;
  }
}

@media (min-width: 821px) and (max-width: 1180px) {
  .topbar {
    grid-template-columns: var(--sidebar-compact-width) minmax(142px, auto) minmax(220px, 1fr) auto 44px;
    gap: 12px;
    padding-right: 18px;
  }

  .topbar > .hamburger-btn {
    grid-column: 1;
    justify-self: center;
  }

  .topbar > .brand {
    grid-column: 2;
    min-width: max-content;
    font-size: 1.16rem;
  }

  .brand span:last-child {
    display: inline;
  }

  .topbar > .header-search-wrap {
    grid-column: 3;
  }

  .topbar > .header-time {
    grid-column: 4;
    justify-self: end;
  }

  .topbar > .header-profile-picker {
    grid-column: 5;
  }

  .topbar > .header-time.placeholder {
    display: none;
  }

  .youtube-shell {
    grid-template-columns: var(--sidebar-width) minmax(0, 1fr);
  }

  #app.sidebar-collapsed .youtube-shell {
    grid-template-columns: var(--sidebar-compact-width) minmax(0, 1fr);
  }

  .admin-layout {
    padding-left: var(--sidebar-width);
  }

  #app.sidebar-collapsed .admin-layout {
    padding-left: var(--sidebar-compact-width);
  }

  .yt-main {
    width: 100%;
    padding-right: clamp(18px, 3vw, 34px);
    padding-left: clamp(18px, 3vw, 34px);
  }

  #app.has-selected-video .yt-main {
    display: block;
    overflow-x: hidden;
  }

  #app.has-selected-video .watch-page {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    justify-items: stretch;
  }

  .player-frame {
    width: 100%;
    max-width: none;
  }

  .video-list {
    width: min(100%, 760px);
  }
}

.status-pill {
  display: inline-flex;
  align-items: center;
  min-height: 26px;
  border-radius: 999px;
  padding: 0 10px;
  background: #172226;
  color: #a8b9b9;
  font-size: 0.75rem;
  font-weight: 700;
}

.status-pill.warning {
  background: #3c2423;
  color: #ffb2a8;
}

.empty-state {
  min-height: calc(100vh - 72px);
  display: grid;
  place-items: center;
  padding: 24px;
  text-align: center;
}

.time-up-state > div {
  display: grid;
  gap: 10px;
  max-width: 420px;
  border: 1px solid #1e2a2e;
  border-radius: 14px;
  background: #10181c;
  padding: 28px;
  box-shadow: 0 18px 60px rgba(0, 0, 0, 0.32);
}

.time-up-state p {
  margin: 0;
  color: #9ff0d7;
  font-weight: 700;
}

.lock-screen {
  min-height: calc(100vh - 72px);
  display: grid;
  place-items: center;
  padding: 32px 24px;
  position: relative;
  overflow: hidden;
}

.lock-screen::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background: radial-gradient(circle at 20% 25%, rgba(101, 119, 199, 0.18), transparent 55%),
              radial-gradient(circle at 80% 75%, rgba(73, 90, 161, 0.18), transparent 55%);
  pointer-events: none;
}

.lock-screen.lock-timeup::before {
  background: radial-gradient(circle at 25% 20%, rgba(255, 162, 109, 0.16), transparent 55%),
              radial-gradient(circle at 75% 80%, rgba(255, 122, 89, 0.16), transparent 55%);
}

.lock-card {
  position: relative;
  z-index: 1;
  display: grid;
  gap: 14px;
  justify-items: center;
  text-align: center;
  max-width: 460px;
  padding: 40px 36px 36px;
  background: linear-gradient(180deg, #131b22 0%, #0d141a 100%);
  border: 1px solid #1f2b32;
  border-radius: 22px;
  box-shadow: 0 24px 80px rgba(0, 0, 0, 0.5);
}

.lock-illustration {
  margin-bottom: 4px;
  filter: drop-shadow(0 6px 18px rgba(255, 228, 168, 0.12));
}

.lock-timeup .lock-illustration {
  filter: drop-shadow(0 6px 18px rgba(255, 162, 109, 0.18));
}

.lock-headline {
  margin: 0;
  font-size: 1.85rem;
  font-weight: 800;
  letter-spacing: -0.01em;
  color: #f2f7f3;
}

.lock-detail {
  margin: 0;
  color: #98a6a6;
  font-size: 1rem;
  line-height: 1.5;
  max-width: 360px;
}

.lock-meta-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
  margin-top: 6px;
}

.lock-meta {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 10px 18px;
  background: #0a1015;
  border: 1px solid #1d2730;
  border-radius: 12px;
  min-width: 140px;
}

.lock-meta-label {
  font-size: 0.7rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #5a6e6f;
  font-weight: 600;
}

.lock-meta-value {
  font-size: 1.05rem;
  font-weight: 700;
  color: #e2ecec;
}

.lock-saved {
  margin: 8px 0 0;
  color: #9ff0d7;
  font-weight: 600;
  font-size: 0.9rem;
}

.compact-empty {
  min-height: calc(100vh - 72px - 96px);
  width: 100%;
  padding-bottom: 84px;
}

.no-results {
  display: none;
  margin: 16px 0 0;
  color: #98a6a6;
  line-height: 1.4;
}

.no-results.visible {
  display: block;
}

@keyframes menuIn {
  from {
    opacity: 0;
    transform: translateY(-4px) scale(0.985);
  }

  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes switcherIn {
  from {
    opacity: 0;
    transform: translateY(8px) scale(0.98);
  }

  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes splashOut {
  0%,
  62% {
    opacity: 1;
    transform: scale(1);
  }

  100% {
    opacity: 0;
    transform: scale(1.015);
    visibility: hidden;
  }
}

/* ─── Login gate ────────────────────────────────────────────────────────── */

.login-gate {
  display: grid;
  place-items: center;
  min-height: 100dvh;
  padding: 24px;
  background: #070b0f;
}

.login-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  width: min(400px, 100%);
  padding: 48px 40px;
  border: 1px solid #1d282b;
  border-radius: 20px;
  background: #0b1215;
  box-shadow: 0 32px 80px rgba(0, 0, 0, 0.5);
  text-align: center;
}

.login-brand {
  display: flex;
  align-items: center;
  gap: 12px;
}

.login-brand-mark {
  width: 57px;
  height: 40px;
  border-radius: 10px;
}

.login-brand-mark::after {
  border-top: 10px solid transparent;
  border-bottom: 10px solid transparent;
  border-left: 16px solid #ffffff;
}

.login-brand-name {
  font-size: 1.9rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: #f2f7f3;
}

.login-tagline {
  margin: 0;
  color: #7d8c8d;
  font-size: 0.97rem;
  line-height: 1.5;
}

.login-google-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  width: 100%;
  min-height: 52px;
  padding: 0 24px;
  border: 1px solid #2b3738;
  border-radius: 999px;
  background: #131d22;
  color: #f2f7f3;
  font-size: 1rem;
  font-weight: 600;
  transition:
    background 180ms var(--spring),
    border-color 180ms var(--spring),
    box-shadow 180ms var(--spring);
}

.login-google-btn:hover {
  background: #172226;
  border-color: #3f5255;
}

.login-google-btn:focus-visible {
  outline: 3px solid #74c7ff;
  outline-offset: 2px;
}

.google-logo {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
}

.login-status {
  margin: 0;
  color: #7d8c8d;
  font-size: 0.9rem;
}

.login-error {
  margin: 0;
  color: #ff6b6b;
  font-size: 0.88rem;
  line-height: 1.4;
}

/* ── Loading spinner (3 bouncing dots) ── */
.login-spinner {
  display: flex;
  align-items: center;
  gap: 7px;
}

.login-spinner span {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #46c7a4;
  animation: spinnerBounce 1.1s ease-in-out infinite;
}

.login-spinner span:nth-child(2) {
  animation-delay: 0.18s;
}

.login-spinner span:nth-child(3) {
  animation-delay: 0.36s;
}

@keyframes spinnerBounce {
  0%, 80%, 100% { transform: scale(0.7); opacity: 0.4; }
  40%           { transform: scale(1);   opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 1ms !important;
    scroll-behavior: auto !important;
    transition-duration: 1ms !important;
  }
}

/* ─── Mobile (≤ 820 px) ─────────────────────────────────────────────────── */

@media (max-width: 820px) {

  /* ── Splash screen ── */
  .mobile-splash {
    position: fixed;
    inset: 0;
    z-index: 100;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    background: #070b0f;
    animation: splashOut 1.35s var(--spring) 0.45s forwards;
    pointer-events: none;
  }

  .splash-play {
    position: relative;
    width: 58px;
    height: 40px;
    border-radius: 12px;
    background: #ff0033;
    box-shadow: 0 16px 36px rgba(255, 0, 51, 0.28);
  }

  .splash-play::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 52%;
    transform: translate(-42%, -50%);
    border-top: 10px solid transparent;
    border-bottom: 10px solid transparent;
    border-left: 16px solid #ffffff;
  }

  .mobile-splash strong {
    color: #ffffff;
    font-size: 2rem;
    font-weight: 700;
  }

  /* ── Touch targets ── */
  button {
    min-height: 48px;
  }

  .header-search input:not([type="checkbox"]),
  .header-search button,
  .header-search span {
    min-height: 46px;
  }

  /* ── Search suggestion dropdown ──
     Positioned below the 2-row topbar (~116 px tall).        */
  .search-suggestions {
    position: fixed;
    top: 120px;
    left: 12px;
    right: 12px;
    max-height: calc(100dvh - 140px);
    overflow-y: auto;
    overscroll-behavior: contain;
  }

  .settings-gate-backdrop {
    align-items: end;
    padding: 0;
    background: rgba(2, 5, 7, 0.72);
  }

  .settings-gate {
    width: 100%;
    max-width: none;
    max-height: calc(100dvh - 20px);
    overflow-y: auto;
    padding: 24px 20px calc(24px + env(safe-area-inset-bottom));
    border-right: 0;
    border-bottom: 0;
    border-left: 0;
    border-radius: 24px 24px 0 0;
    box-shadow: 0 -20px 60px rgba(0, 0, 0, 0.5);
  }

  .settings-gate h1 {
    font-size: 1.65rem;
  }

  .settings-gate-backdrop:has(input:focus) {
    align-items: center;
    padding: 14px;
  }

  .settings-gate-backdrop:has(input:focus) .settings-gate {
    width: min(420px, 100%);
    border: 1px solid #1d282b;
    border-radius: 24px;
    padding-bottom: 24px;
  }

  .settings-nav {
    position: static;
    flex-wrap: nowrap;
    margin: 0 -14px;
    padding: 0 14px 2px;
    overflow-x: auto;
    scrollbar-width: none;
  }

  .settings-nav::-webkit-scrollbar {
    display: none;
  }

  .settings-nav button {
    flex: 0 0 auto;
    min-height: 42px;
  }

  /* ── Page layout — sidebar is now an overlay, so full-width ── */
  .youtube-shell,
  .watch-page,
  .admin-layout {
    grid-template-columns: 1fr;
    height: auto;
    padding-left: 0;
  }

  main {
    min-height: 0;
  }

  /* ── Hamburger button ── */
  .hamburger-btn {
    display: flex;
  }

  /* ── Topbar: hamburger | brand | (space) | time | avatar  row 1
                search bar (full width)                     row 2  ── */
  .topbar {
    grid-template-columns: 44px max-content minmax(0, 1fr) auto 40px;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    min-height: 0;
  }

  .topbar > .hamburger-btn {
    grid-column: 1;
    grid-row: 1;
  }

  .topbar > .brand {
    grid-column: 2;
    grid-row: 1;
    min-width: max-content;
    gap: 10px;
    padding: 0;
    color: #f2f7f3;
    font-size: clamp(1.28rem, 4.8vw, 1.65rem);
    font-weight: 700;
  }

  .topbar > .brand span:last-child {
    display: inline !important;
    color: #f2f7f3;
  }

  .topbar > .header-time {
    grid-column: 4;
    grid-row: 1;
    justify-self: end;
    width: auto;
    min-width: 0;
    min-height: 40px;
    padding: 0 10px;
  }

  .topbar > .header-time.placeholder {
    display: none;
  }

  .topbar > .header-search-wrap {
    grid-column: 1 / -1;
    grid-row: 2;
  }

  /* ── Profile avatar chip in topbar ── */
  .topbar > .header-profile-picker {
    grid-column: 5;
    grid-row: 1;
    justify-self: end;
  }

  .topbar .header-profile-avatar {
    width: 36px;
    height: 36px;
    min-height: 36px;
    font-size: 0.9rem;
  }

  .brand-mark {
    width: 44px;
    height: 31px;
    border-radius: 9px;
  }

  .brand-mark::after {
    border-top-width: 8px;
    border-bottom-width: 8px;
    border-left-width: 13px;
  }

  .topbar > .header-profile-avatar {
    display: grid;
    grid-column: 5;
    grid-row: 1;
    width: 36px;
    height: 36px;
    min-height: 36px;
    padding: 0;
    border: 2px solid transparent;
    font-size: 0.9rem;
    transition: border-color 180ms var(--spring), box-shadow 180ms var(--spring);
  }

  .topbar .header-profile-avatar:hover,
  .topbar .header-profile-avatar:focus-visible {
    border-color: #46c7a4;
    box-shadow: 0 0 0 3px rgba(70, 199, 164, 0.2);
    outline: none;
  }

  .topbar .header-profile-picker {
    width: 40px;
    min-width: 40px;
  }

  .header-profile-picker .profile-menu {
    top: calc(100% + 12px);
    right: -2px;
    left: auto;
    width: min(286px, calc(100vw - 28px));
    padding: 8px;
    gap: 4px;
    border-radius: 22px;
    border-color: rgba(70, 199, 164, 0.32);
    background:
      linear-gradient(180deg, rgba(19, 32, 35, 0.98), rgba(8, 12, 17, 0.98));
    box-shadow: 0 18px 42px rgba(0, 0, 0, 0.46);
  }

  .profile-menu button {
    grid-template-columns: minmax(0, 1fr) 44px;
    min-height: 58px;
    gap: 14px;
    padding: 7px 8px 7px 16px;
    border-radius: 16px;
    font-size: 1.04rem;
  }

  .profile-menu button .profile-avatar {
    width: 44px;
    height: 44px;
    font-size: 1.05rem;
  }

  .profile-menu button.active {
    background: rgba(70, 199, 164, 0.12);
    box-shadow: inset 0 0 0 1px rgba(70, 199, 164, 0.42);
  }

  /* ── Sidebar → slide-in drawer overlay ── */
  .yt-sidebar {
    position: fixed;
    top: 0;
    left: 0;
    height: 100dvh;
    width: 260px;
    z-index: 50;
    flex-direction: column;
    gap: 6px;
    border-right: 1px solid #1d282b;
    padding: 72px 12px 14px;
    overflow-y: auto;
    transform: translateX(-100%);
    transition: transform 280ms var(--spring), box-shadow 280ms var(--spring);
    box-shadow: none;
  }

  .yt-sidebar.is-open {
    transform: translateX(0);
    box-shadow: 8px 0 32px rgba(0, 0, 0, 0.5);
  }

  /* Sidebar nav stays vertical */
  .sidebar-nav {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    gap: 6px;
    overflow-y: auto;
    padding-right: 2px;
  }

  .yt-sidebar button {
    min-height: 44px;
    width: 100%;
    white-space: normal;
  }

  .sidebar-footer {
    position: sticky;
    bottom: 0;
    background: #070b0f;
    border-top: 1px solid #1d282b;
    padding: 14px 0 4px;
    margin-top: auto;
  }

  /* ── Backdrop overlay ── */
  .sidebar-backdrop {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 40;
    background: rgba(0, 0, 0, 0.55);
    backdrop-filter: blur(2px);
    animation: fadeIn 200ms ease;
  }

  @keyframes fadeIn {
    from { opacity: 0; }
    to   { opacity: 1; }
  }

  .profile-picker-button {
    min-height: 44px;
    padding: 4px 36px 4px 8px;
    font-size: 0.9rem;
  }

  /* ── Parent / admin panels ── */
  .approval-form,
  .settings-grid,
  .approval-card,
  .approval-controls,
  .user-card,
  .panel-heading,
  .parent-shell {
    grid-template-columns: 1fr;
    align-items: stretch;
  }

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

  .user-card small {
    justify-self: start;
  }

  .user-edit-form {
    grid-template-columns: 1fr;
  }

  .user-edit-form button {
    width: 100%;
  }

  .user-card-actions {
    flex-direction: row;
    justify-self: stretch;
  }

  .user-card-actions button {
    flex: 1;
    width: auto;
  }

  .panel-heading,
  .approval-card {
    flex-direction: column;
  }

  .toolbar {
    width: 100%;
    justify-content: stretch;
  }

  .toolbar button {
    flex: 1;
  }

  .approval-form {
    display: grid;
  }

  .parent-shell {
    width: calc(100% - 24px);
    padding: 18px 0 28px;
  }

  .panel,
  .approval-card {
    padding: 16px;
  }

  .approval-card {
    grid-template-columns: 64px minmax(0, 1fr);
    gap: 12px;
  }

  .approval-card .approval-controls,
  .approval-card .pending-review-section,
  .approval-card > .danger {
    grid-column: 1 / -1;
  }

  .approval-card > .danger {
    width: 100%;
    min-height: 44px;
  }

  .approval-thumb-video,
  .approval-thumb-channel {
    width: 64px;
    height: 64px;
    aspect-ratio: auto;
    border-radius: 12px;
  }

  .settings-page-header {
    top: 0;
    margin-top: 0;
    padding-top: 0;
  }

  /* ── Suggestions & channel cards ── */
  .parent-suggestion {
    grid-template-columns: 64px minmax(0, 1fr);
  }

  .parent-suggestion .primary {
    grid-column: 1 / -1;
    width: 100%;
    min-height: 44px;
  }

  .channel-summary-card {
    grid-template-columns: 44px minmax(0, 1fr);
  }

  .channel-summary-actions {
    grid-column: 1 / -1;
    width: 100%;
  }

  .channel-summary-actions button {
    flex: 1;
    min-height: 44px;
  }

  .search-results {
    grid-template-columns: 1fr;
  }

  /* ── Continue-watching row: single column on mobile (show 1 video only) ── */
  .continue-row {
    gap: 14px;
  }

  .continue-row > .video-card-shell {
    flex: 0 0 210px;
    width: 210px;
  }

  /* ── Home rows: slightly narrower cards on tablets/phones ── */
  .home-row {
    gap: 14px;
  }

  .home-row > .video-card-shell {
    flex: 0 0 210px;
    width: 210px;
  }

  /* ── Dashboard & stats ── */
  .dashboard-grid,
  .kid-stat-row,
  .user-settings-row,
  .user-rule-controls {
    grid-template-columns: 1fr;
  }

  .user-rule-summary {
    grid-template-columns: 38px minmax(0, 1fr);
    gap: 10px;
  }

  .user-rule-meter {
    grid-column: 1 / -1;
    justify-items: stretch;
  }

  .user-rule-meter > span {
    text-align: left;
  }

  .user-rule-summary div > span {
    white-space: normal;
  }

  .activity-row {
    grid-template-columns: 82px minmax(0, 1fr);
  }

  .activity-row img {
    width: 82px;
  }

  /* ── Video feed: reduce side padding ── */
  .yt-main {
    padding: 0 14px 36px;
    /* Neutralize the base overflow-y: auto so the document scrolls (not
       .yt-main). Required for `position: sticky` on .player-frame below
       to attach to the viewport instead of this element, which never
       actually scrolls on mobile. */
    overflow: visible;
  }

  .feed-header {
    align-items: center;
    padding-top: 10px;
  }

  .view-toggle-button {
    display: grid;
  }

  .watch-meta .circle-action-button {
    width: 44px;
    height: 44px;
    min-width: 44px;
    min-height: 44px;
    border-radius: 999px;
    background: #111a1f;
  }

  /* ── Watch page: full-bleed player, pinned under the topbar ──
     Player stays at the top of the viewport while .watch-meta + .up-next
     scroll under it. Topbar (sticky, z-index 80) sits above the player.
     The 110px default reflects the mobile two-row topbar
     (hamburger/brand/time/avatar row + full-width search row); tunable
     via :root { --mobile-topbar-height: ... } if the actual height
     drifts after a topbar redesign. */
  .player-frame {
    border-radius: 0;
    margin: 0 -14px;
    width: calc(100% + 28px);
    position: sticky;
    top: var(--mobile-topbar-height, 110px);
    z-index: 5;
  }

  /* YouTube's bottom control bar is slightly taller on touch devices.
     Bump the corridor so seek bar / fullscreen stay reachable. */
  .player-tap-shield {
    inset: 0 0 64px 0;
  }

  /* Slightly tighter top/bottom padding under the sticky player on
     mobile. (The base rule is now non-sticky on every breakpoint, so
     no position/background reset is needed here.) */
  .watch-meta {
    padding: 12px 0 8px;
  }

  /* Down from clamp(1.35rem, 2.1vw, 2.2rem) which floored at ~21.6px on
     phones and read as oversized. New range ~16-22.4px depending on
     phone width. */
  .watch-meta h1 {
    font-size: clamp(1rem, 4vw, 1.4rem);
  }

  /* Related-videos card titles - down from inherited browser default
     (~16px) so they read as secondary card subtitles, not body copy
     competing with the playing video's title. */
  .up-next .video-button strong {
    font-size: 0.9rem;
  }

  /* ── History list ── */
  .history-list {
    max-height: none;
  }
}

/* ─── Small phones (≤ 480 px) ──────────────────────────────────────────── */

@media (max-width: 480px) {
  .brand {
    gap: 9px;
    padding-right: 4px;
    color: #f2f7f3;
    font-size: clamp(1.18rem, 5.2vw, 1.42rem);
  }

  .brand span:last-child {
    display: inline !important;
  }

  .brand-mark {
    width: 40px;
    height: 28px;
  }

  .topbar {
    grid-template-columns: 38px max-content minmax(0, 1fr) auto 36px;
    gap: 8px;
    padding-right: 10px;
    padding-left: 10px;
  }

  .topbar > .header-time {
    min-height: 38px;
    padding: 0 9px;
  }

  .header-time strong {
    font-size: 0.84rem;
  }

  /* Single-column continue row on narrow phones */
  .continue-row > .video-card-shell {
    flex: 0 0 180px;
    width: 180px;
  }

  /* Home rows: smaller cards on narrow phones */
  .home-row > .video-card-shell {
    flex: 0 0 180px;
    width: 180px;
  }

  .section-title-link h2 {
    font-size: 1.05rem;
  }

  /* Settings toggles single column */
  .settings-grid {
    grid-template-columns: 1fr;
  }

  /* Tighter panel padding */
  .panel,
  .approval-card {
    padding: 14px;
  }

  /* Rules fields stacked */
  .rules-fields {
    grid-template-columns: 1fr;
  }

  /* Video button: slightly smaller thumbnail */
  .video-button {
    grid-template-columns: 96px 1fr;
  }

  .video-button img,
  .video-button .thumbnail-wrap {
    width: 96px;
  }
}