:root {
  color-scheme: dark;
  --red: #e41e25;
  --ink: #111111;
  --panel: #191919;
  --line: rgba(255, 255, 255, 0.12);
  --soft: #a5a5a5;
  --white: #f7f7f4;
}

* { box-sizing: border-box; }

html, body { min-height: 100%; overscroll-behavior-y: none; }

body {
  margin: 0;
  background:
    radial-gradient(circle at 18% 16%, rgba(228, 30, 37, 0.12), transparent 26rem),
    linear-gradient(140deg, #0d0d0d 0%, #151515 58%, #0a0a0a 100%);
  color: var(--white);
  font-family: Pretendard, -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo", "Noto Sans KR", sans-serif;
  overflow-x: hidden;
}

button, a { -webkit-tap-highlight-color: transparent; }
button { font: inherit; }

.brand-bar {
  width: min(1380px, calc(100% - 40px));
  height: 84px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid var(--line);
}

.brand {
  color: inherit;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 12px;
}

.brand-mark {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
}

.brand-mark img { width: 42px; height: 42px; object-fit: contain; display: block; }

.brand-name { font-size: 21px; font-weight: 820; letter-spacing: -0.045em; }
.brand-name i { color: var(--red); font-style: normal; margin: 0 3px; }
.brand-name small { font-size: 15px; font-weight: 630; letter-spacing: 0.01em; color: #cfcfca; }

.live-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: #d7d7d2;
  font-size: 13px;
}

.live-pill i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--red);
  box-shadow: 0 0 0 5px rgba(228, 30, 37, 0.12);
}

.shorts-shell {
  width: min(1380px, calc(100% - 40px));
  min-height: calc(100svh - 84px);
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(320px, 1fr) 390px;
  gap: clamp(34px, 6vw, 92px);
  align-items: start;
  padding: 28px 0 38px;
}

.stage {
  position: sticky;
  top: 84px;
  min-height: calc(100svh - 84px);
  display: grid;
  grid-template-columns: minmax(260px, 1fr);
  gap: 22px;
  align-items: start;
}

.player-frame {
  width: auto;
  height: calc(100svh - 112px);
  max-width: 100%;
  max-height: calc(100svh - 112px);
  aspect-ratio: 9 / 16;
  position: relative;
  overflow: hidden;
  justify-self: center;
  border-radius: 28px;
  background: #050505;
  border: 1px solid rgba(255, 255, 255, 0.16);
  box-shadow: 0 40px 100px rgba(0, 0, 0, 0.62), 0 0 0 8px rgba(255, 255, 255, 0.025);
}

/* Keep navigation outside the YouTube surface so CC, settings and branding stay usable. */
.player-frame {
  display: flex;
  flex-direction: column;
}
.video-surface { flex: 1; min-height: 200px; position: relative; }
#player, #player iframe { display: block; width: 100%; height: 100%; border: 0; }
.video-surface > #player { position: absolute; inset: 0; }

.player-toolbar {
  flex: none;
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 60px;
  padding: 8px 12px;
  background: #050505;
  /* Reserve downward drags here for refresh; retain pinch zoom and sideways gestures. */
  touch-action: pan-x pinch-zoom;
}
.player-toolbar button {
  min-width: 64px;
  min-height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 0 12px;
  border: 1px solid rgba(255,255,255,.3);
  border-radius: 12px;
  color: #fff;
  background: #202020;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  opacity: 1;
  transition: opacity 160ms ease;
}
.player-toolbar button span { font-size: 26px; line-height: 1; }
.player-toolbar #prevButton, .player-toolbar #nextButton { flex: 0 1 144px; min-width: 0; }
.player-toolbar .fullscreen-button { flex: none; margin-left: auto; min-width: 44px; }
.player-toolbar button:hover { background: #363636; }
.player-toolbar button:focus-visible {
  outline: 3px solid #fff;
  outline-offset: 2px;
  background: #b5151b;
}
.player-frame.controls-idle .player-toolbar button { opacity: 0; }
/* The black toolbar remains a wake target; its first tap never skips a video. */
.player-frame.controls-idle .player-toolbar button { pointer-events: none; }

#playerFrame:fullscreen,
#playerFrame.is-app-fullscreen {
  width: 100vw;
  height: 100vh;
  height: 100dvh;
  max-width: none;
  max-height: none;
  margin: 0;
  aspect-ratio: auto;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  /* Safe areas belong inside the full viewport, not in an extra height deduction. */
  padding: env(safe-area-inset-top, 0px) env(safe-area-inset-right, 0px) env(safe-area-inset-bottom, 0px) env(safe-area-inset-left, 0px);
}
#playerFrame:fullscreen .player-toolbar,
.player-frame.is-app-fullscreen .player-toolbar,
.player-frame.is-embedded-fullscreen .player-toolbar,
#playerFrame:has(iframe:fullscreen) .player-toolbar {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 2;
  background: transparent;
}
iframe:fullscreen,
#playerFrame:fullscreen iframe {
  transform: scale(var(--fullscreen-crop-scale, 1.24));
  transform-origin: center center;
}
.player-frame.is-embedded-fullscreen .player-toolbar,
#playerFrame:has(iframe:fullscreen) .player-toolbar { display: none; }
.player-frame.is-app-fullscreen { position: fixed; inset: 0; z-index: 100; }
body.has-player-fullscreen { overflow: hidden; }
body.has-player-fullscreen > .shorts-shell > .queue { display: none; }
body.has-player-fullscreen .player-help { display: none; }
.player-help { margin: 12px 0 0; text-align: center; color: var(--soft); font-size: 14px; line-height: 1.5; }
.player-frame.is-horizontal-video:not(:fullscreen):not(.is-app-fullscreen) {
  width: 100%;
  height: auto;
  max-height: none;
  aspect-ratio: auto;
}
.player-frame.is-horizontal-video:not(:fullscreen):not(.is-app-fullscreen) .video-surface {
  flex: none;
  aspect-ratio: 16 / 9;
}
/* YouTube fits both orientations inside the available surface, without cropping its settings. */
@media (prefers-reduced-motion: reduce) {
  .player-toolbar button { transition: none; }
}
@media (min-width: 1200px) and (min-height: 650px) {
  .player-toolbar { min-height: 72px; gap: 12px; padding: 10px 20px; }
  .player-toolbar button { min-height: 52px; min-width: 80px; font-size: 18px; }
  .player-toolbar #prevButton, .player-toolbar #nextButton { flex-basis: 160px; }
  .player-toolbar .fullscreen-button { min-width: 52px; }
}

.start-cover, .resume-cover, .empty-state {
  position: absolute;
  inset: 0;
  z-index: 3;
  border: 0;
  color: var(--white);
  background:
    linear-gradient(180deg, rgba(14, 14, 14, 0.3), rgba(5, 5, 5, 0.94)),
    radial-gradient(circle at 50% 32%, rgba(228, 30, 37, 0.26), transparent 42%);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 11px;
  cursor: pointer;
}

.start-cover { display: none !important; }

.start-cover[hidden], .resume-cover[hidden], .empty-state[hidden] { display: none; }
.start-cover img, .empty-state img { width: 114px; height: 114px; object-fit: contain; }
.empty-state img { margin-bottom: 12px; }
.start-cover strong, .resume-cover strong, .empty-state strong { font-size: 25px; letter-spacing: -0.04em; }
.start-cover span, .resume-cover span, .empty-state span { color: #b9b9b4; font-size: 14px; }

.resume-cover { inset: auto 20px 22px; min-height: 110px; border-radius: 18px; background: rgba(17, 17, 17, 0.94); }
.empty-state { cursor: default; padding: 30px; text-align: center; }

.skip-toast {
  position: absolute;
  left: 18px;
  right: 18px;
  top: 18px;
  z-index: 5;
  padding: 12px 14px;
  border-radius: 999px;
  color: #fff;
  background: rgba(228, 30, 37, 0.9);
  text-align: center;
  font-size: 13px;
  font-weight: 700;
  opacity: 0;
  transform: translateY(-10px);
  transition: 180ms ease;
  pointer-events: none;
}

.skip-toast.is-visible { opacity: 1; transform: translateY(0); }

.now-playing { align-self: start; padding-top: 0; min-width: 0; }
.eyebrow { color: var(--red); font-size: 11px; font-weight: 850; letter-spacing: 0.18em; }
.now-playing h1 { margin: 12px 0 9px; max-width: 350px; font-size: clamp(28px, 3.3vw, 52px); line-height: 1.03; letter-spacing: -0.055em; }
.now-playing p { margin: 0; color: var(--soft); font-size: 13px; line-height: 1.6; }

.queue {
  align-self: start;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  min-width: 0;
  padding: 18px 0;
}

.share-category {
  flex: none;
  min-height: 40px;
  padding: 8px 14px;
  border: 1px solid rgba(228,30,37,.62);
  border-radius: 12px;
  color: #fff;
  background: rgba(228,30,37,.16);
  font-size: 12px;
  font-weight: 800;
  cursor: pointer;
}
.share-category:hover, .share-category:focus-visible { background: var(--red); outline: 2px solid rgba(255,255,255,.62); outline-offset: 2px; }
.queue-title-button {
  display: block;
  margin: 8px 0 0;
  padding: 0;
  border: 0;
  color: var(--white);
  background: transparent;
  font-size: 29px;
  font-weight: 800;
  letter-spacing: -0.055em;
  text-align: left;
  cursor: default;
}
.queue-list {
  display: flex;
  max-height: calc(100svh - 300px);
  flex-direction: column;
  gap: 8px;
  padding-right: 6px;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: rgba(228, 30, 37, 0.65) rgba(255, 255, 255, 0.04);
}

.feed-controls {
  margin: -8px 0 18px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.11);
  border-radius: 16px;
  background: linear-gradient(135deg, rgba(255,255,255,.065), rgba(255,255,255,.025));
  box-shadow: 0 12px 32px rgba(0,0,0,.16);
}
.feed-controls:has(.taste-card.is-connected) { border-color: rgba(228,30,37,.5); }
.theme-switcher {
  display: grid;
  grid-template-columns: repeat(3, minmax(36px, auto));
  gap: 5px;
  align-items: center;
  padding: 0;
}
.theme-switcher button {
  min-height: 36px;
  padding: 6px 7px;
  border: 1px solid var(--line);
  border-radius: 9px;
  color: var(--soft);
  background: transparent;
  font-size: 11px;
  font-weight: 780;
  cursor: pointer;
}
.theme-switcher button[aria-pressed="true"] { border-color: rgba(228,30,37,.58); color: #fff; background: rgba(228,30,37,.78); }
.theme-switcher button:hover, .theme-switcher button:focus-visible { outline: 2px solid rgba(228,30,37,.55); outline-offset: 1px; }
.feed-tabs {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 4px;
  margin: 0;
  padding: 7px;
  border-top: 1px solid rgba(255,255,255,.08);
  background: rgba(0,0,0,.08);
}
.feed-tabs button {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  min-width: 0;
  min-height: 60px;
  padding: 12px 4px;
  border: 0;
  border-radius: 10px;
  color: #8e8e89;
  background: transparent;
  font-size: 11px;
  font-weight: 780;
  line-height: 1.1;
  cursor: pointer;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.feed-tabs button[aria-selected="true"] { color: #fff; background: rgba(228,30,37,.82); }
.feed-tabs button:hover, .feed-tabs button:focus-visible { color: #fff; outline: 2px solid rgba(228,30,37,.72); outline-offset: 1px; }
.feed-primary { display: inline-flex; align-items: center; justify-content: center; gap: 3px; text-align: center; }
.feed-icon { font-size: 1.5em; line-height: 1; }
.feed-icon { filter: grayscale(1); }
.feed-tabs button[aria-selected="true"] .feed-icon { filter: none; }
.feed-label { min-width: 0; }

.taste-card {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr) 44px auto;
  gap: 6px;
  align-items: center;
  margin: 0;
  padding: 10px 8px;
  border: 0;
  background: transparent;
}
.category-icon {
  width: 28px;
  height: 36px;
  display: block;
  font-size: 24px;
  line-height: 36px;
  text-align: center;
  filter: none;
}
.taste-copy { min-width: 0; }
.taste-heading { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.panel-share {
  width: 44px;
  height: 36px;
  padding: 0;
  border: 1px solid rgba(228,30,37,.62);
  border-radius: 22px;
  color: #fff;
  background: rgba(228,30,37,.16);
  font-size: 11px;
  font-weight: 800;
  cursor: pointer;
}
.taste-card .taste-state,
.taste-card #googleStatus { display: none !important; }
.panel-share:hover, .panel-share:focus-visible { background: var(--red); outline: 2px solid rgba(255,255,255,.62); outline-offset: 2px; }
.taste-copy strong { display: block; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 14px; letter-spacing: -.025em; }
.taste-copy span { display: block; margin-top: 3px; overflow: hidden; color: var(--soft); font-size: 10px; line-height: 1.35; text-overflow: ellipsis; white-space: nowrap; }
.taste-copy .taste-state {
  flex: none;
  margin: 0;
  padding: 3px 7px;
  border-radius: 999px;
  color: #bdbdb8;
  background: rgba(255,255,255,.07);
  font-size: 9px;
  font-weight: 750;
}
.taste-card > button {
  width: auto;
  margin: 0;
  padding: 9px 10px;
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 12px;
  color: #171717;
  background: #fff;
  font-weight: 800;
  font-size: 11px;
  white-space: nowrap;
  cursor: pointer;
}
.taste-card > button:hover, .taste-card > button:focus-visible { outline: 2px solid var(--red); outline-offset: 2px; }
.taste-card > button:disabled { cursor: wait; opacity: .64; }
.taste-card.is-connected .taste-state { color: #fff; background: rgba(228,30,37,.72); }
.taste-card.is-connected > button { color: #fff; border-color: rgba(228,30,37,.7); background: var(--red); }

.tv-connect-panel {
  grid-column: 1 / -1;
  margin-top: 8px;
  padding: 16px;
  border: 1px solid rgba(228,30,37,.5);
  border-radius: 14px;
  background: rgba(0,0,0,.3);
  display: grid;
  grid-template-columns: 152px minmax(0, 1fr);
  gap: 18px;
  align-items: center;
}
.tv-connect-panel[hidden] { display: none; }
.tv-connect-qr-wrap { padding: 10px; border-radius: 12px; background: #fff; }
.tv-connect-qr-wrap img { width: 100%; aspect-ratio: 1; display: block; image-rendering: pixelated; }
.tv-connect-steps { min-width: 0; text-align: center; }
.tv-connect-panel span { display: block; color: #c8c8c3; font-size: 12px; line-height: 1.55; }
.tv-connect-steps b { color: #fff; font-size: 18px; }
.tv-connect-panel .tv-connect-code-label { grid-column: 1 / -1; margin: 0; text-align: center; }
.tv-connect-panel > strong { grid-column: 1 / -1; display: block; margin: -10px 0 0; color: #fff; font-size: 26px; letter-spacing: .08em; text-align: center; white-space: nowrap; }
.tv-connect-panel > a { grid-column: 1 / -1; color: #9d9d98; font-size: 11px; font-weight: 700; text-align: center; text-underline-offset: 4px; }

.queue-item {
  width: 100%;
  display: grid;
  grid-template-columns: 86px 1fr;
  gap: 14px;
  align-items: center;
  padding: 10px;
  border: 1px solid transparent;
  border-radius: 18px;
  color: var(--white);
  background: transparent;
  text-align: left;
  cursor: pointer;
  transition: 160ms ease;
}

.queue-item:hover, .queue-item:focus-visible { background: rgba(255, 255, 255, 0.055); outline: none; }
.queue-item.is-active { border-color: rgba(228, 30, 37, 0.58); background: rgba(228, 30, 37, 0.1); }
.thumb { position: relative; display: block; aspect-ratio: 16 / 10; overflow: hidden; border-radius: 11px; background: #222; }
.thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.thumb i { position: absolute; left: 6px; bottom: 5px; padding: 2px 5px; border-radius: 4px; background: rgba(0,0,0,.72); color: #fff; font-size: 9px; font-style: normal; }
.queue-copy { min-width: 0; }
.queue-copy strong { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 14px; letter-spacing: -0.02em; }
.queue-copy small { display: block; margin-top: 7px; color: var(--soft); font-size: 11px; }
.queue-note { margin: 18px 10px 0; color: #71716d; font-size: 11px; }
.queue-note a { color: #a9a9a4; text-underline-offset: 3px; }
.queue-note a:hover, .queue-note a:focus-visible { color: var(--white); }

.policy-page { min-height: 100svh; }
.policy-shell { width: min(760px, calc(100% - 36px)); margin: 0 auto; padding: 70px 0 100px; }
.policy-shell h1 { margin: 0 0 14px; font-size: clamp(34px, 7vw, 62px); letter-spacing: -.06em; }
.policy-shell > p { color: var(--soft); line-height: 1.75; }
.policy-section { margin-top: 42px; padding-top: 28px; border-top: 1px solid var(--line); }
.policy-section h2 { margin: 0 0 12px; font-size: 20px; letter-spacing: -.035em; }
.policy-section p, .policy-section li { color: #b6b6b1; font-size: 14px; line-height: 1.8; }
.policy-section ul { margin: 0; padding-left: 20px; }
.policy-back { display: inline-flex; margin-top: 46px; color: var(--white); text-decoration-color: var(--red); text-underline-offset: 5px; }

@media (max-width: 1060px) {
  .shorts-shell { grid-template-columns: 1fr 310px; gap: 36px; }
  .stage { grid-template-columns: minmax(260px, 1fr); }
  .now-playing { display: none; }
  .feed-tabs button { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px; line-height: 1.1; }
  .feed-label { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
}

@media (max-width: 780px) {
  .brand-bar { display: none; }
  .brand-bar { width: min(100% - 28px, 560px); height: 68px; }
  .brand-name { font-size: 18px; }
  .brand-name small { font-size: 12px; }
  .brand-mark { width: 36px; height: 36px; }
  .brand-mark img { width: 36px; height: 36px; }
  .live-pill { font-size: 0; }

  .shorts-shell {
    width: min(100% - 28px, 560px);
    min-height: auto;
    display: block;
    padding: 12px 0 40px;
  }

  .stage { display: block; }
  .stage { position: static; min-height: 0; }
  .player-frame:not(:fullscreen):not(.is-app-fullscreen) { width: auto; height: calc(100svh - 24px); max-width: 100%; max-height: calc(100svh - 24px); margin: 0 auto; }
  .queue { padding: 42px 0 0; }
  .taste-card { width: min(100%, 430px); margin-left: auto; margin-right: auto; }
  .feed-tabs { gap: 6px; padding: 9px; }
  .feed-tabs button { min-height: 72px; padding: 18px 8px; font-size: 14px; }
  .tv-connect-panel { grid-template-columns: 132px minmax(0, 1fr); gap: 12px; padding: 12px; }
  .tv-connect-panel > strong { font-size: 21px; }
  .queue-list { max-height: none; flex-direction: row; overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; padding: 0 0 8px; }
  .queue-item { flex: 0 0 240px; scroll-snap-align: start; }
}

@media (max-width: 780px) {
  .is-ios .shorts-shell { padding-top: max(64px, env(safe-area-inset-top)); }
  .is-ios .player-frame:not(:fullscreen):not(.is-app-fullscreen) { height: calc(100svh - 88px); max-height: calc(100svh - 88px); }
}

@media (min-width: 1500px) and (min-height: 850px) {
  .brand-bar, .shorts-shell { width: min(1540px, calc(100% - 80px)); }
  .shorts-shell { grid-template-columns: 1fr 440px; }
  .player-frame:not(:fullscreen):not(.is-app-fullscreen) { width: auto; height: calc(100svh - 112px); }
  .stage { grid-template-columns: minmax(470px, 1fr); }
}

:root[data-theme="light"] {
  color-scheme: light;
  --ink: #f5f2ec;
  --panel: #ffffff;
  --line: rgba(30, 27, 23, 0.14);
  --soft: #6f6a63;
  --white: #211f1c;
}

:root[data-theme="light"] body {
  background:
    radial-gradient(circle at 18% 16%, rgba(228, 30, 37, 0.1), transparent 28rem),
    linear-gradient(140deg, #faf8f3 0%, #f2eee7 58%, #fffdf9 100%);
}

:root[data-theme="light"] .brand-name small, :root[data-theme="light"] .live-pill { color: #655f58; }
:root[data-theme="light"] .player-frame { border-color: rgba(25, 22, 18, 0.2); box-shadow: 0 32px 80px rgba(63, 53, 43, 0.2), 0 0 0 8px rgba(255, 255, 255, 0.52); }
:root[data-theme="light"] .start-cover, :root[data-theme="light"] .resume-cover, :root[data-theme="light"] .empty-state { color: #f7f7f4; }
:root[data-theme="light"] .start-cover span, :root[data-theme="light"] .resume-cover span, :root[data-theme="light"] .empty-state span { color: #d0d0ca; }
:root[data-theme="light"] .feed-controls { border-color: rgba(44, 38, 32, 0.14); background: linear-gradient(135deg, rgba(255,255,255,.92), rgba(247,242,234,.82)); box-shadow: 0 12px 32px rgba(73, 60, 48, 0.1); }
:root[data-theme="light"] .feed-tabs { border-top-color: rgba(44, 38, 32, 0.1); background: rgba(84, 68, 52, 0.035); }
:root[data-theme="light"] .feed-tabs button { color: #716b64; }
:root[data-theme="light"] .feed-tabs button[aria-selected="true"], :root[data-theme="light"] .feed-tabs button:hover, :root[data-theme="light"] .feed-tabs button:focus-visible { color: #fff; }
:root[data-theme="light"] .taste-card > button { border-color: rgba(44, 38, 32, 0.16); color: #fff; background: #282521; }
:root[data-theme="light"] .taste-card .taste-state { color: #625d56; background: rgba(44,38,32,.07); }
:root[data-theme="light"] .panel-share, :root[data-theme="light"] .share-category { color: #9f161b; background: rgba(228,30,37,.08); }
:root[data-theme="light"] .panel-share:hover, :root[data-theme="light"] .panel-share:focus-visible, :root[data-theme="light"] .share-category:hover, :root[data-theme="light"] .share-category:focus-visible { color: #fff; }
:root[data-theme="light"] .theme-switcher button { background: rgba(255,255,255,.7); }
:root[data-theme="light"] .theme-switcher button[aria-pressed="true"] { color: #fff; background: rgba(228,30,37,.82); }
:root[data-theme="light"] .queue-item:hover, :root[data-theme="light"] .queue-item:focus-visible { background: rgba(44, 38, 32, 0.06); }
:root[data-theme="light"] .queue-item.is-active { background: rgba(228, 30, 37, 0.08); }
:root[data-theme="light"] .thumb { background: #ded8cf; }
:root[data-theme="light"] .queue-note { color: #777169; }
:root[data-theme="light"] .queue-note a { color: #5f5a53; }
:root[data-theme="light"] .tv-connect-panel { background: rgba(255,255,255,.58); }
:root[data-theme="light"] .tv-connect-panel span, :root[data-theme="light"] .tv-connect-steps b, :root[data-theme="light"] .tv-connect-panel > strong { color: #312e29; }

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

.site-counter {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 8px;
  padding: 12px 14px max(24px, env(safe-area-inset-bottom));
  color: var(--soft);
  font-size: 12px;
  line-height: 1.6;
}
.site-counter > span { white-space: nowrap; }
.site-counter strong { color: inherit; font-variant-numeric: tabular-nums; font-weight: 750; }
.counter-divider { opacity: .4; }
body.has-player-fullscreen > .site-counter { display: none; }

#counterOpen { text-decoration: none; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px; border: 0; background: transparent; color: inherit; font: inherit; cursor: pointer; padding: 8px; }
#counterOpen > span { white-space: nowrap; }
.counter-history-link { text-decoration: underline; text-underline-offset: 3px; }
.counter-history-shell { width: min(1380px, calc(100% - 40px)); margin: 32px auto 60px; padding: 24px; border: 1px solid var(--line); border-radius: 20px; background: var(--panel); color: var(--white); }
.counter-history-heading { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; }
.counter-history-shell h1 { font-size: clamp(24px, 4vw, 32px); margin: 0; }
.counter-history-shell h3 { font-size: 18px; margin: 28px 0 10px; }
.counter-history-shell p { font-size: 16px; line-height: 1.6; color: #cbd5e1; }
.counter-history-shell a { color: inherit; text-underline-offset: 4px; }
#counterRetry { padding: 8px 12px; border: 1px solid #64748b; border-radius: 8px; background: #263445; color: #f1f5f9; cursor: pointer; }
.counter-graph { display: flex; overflow-x: auto; gap: 4px; padding: 8px 2px 12px; }
.counter-bar { flex: 1 0 42px; min-width: 42px; display: flex; flex-direction: column; align-items: center; gap: 7px; border: 0; padding: 4px 2px; color: #e2e8f0; background: transparent; font-size: 12px; cursor: pointer; }
.counter-bar-track { display: flex; align-items: flex-end; width: 22px; height: 112px; background: #ffffff09; border-bottom: 1px solid #64748b; }
.counter-bar-track > span { width: 100%; background: #67d5c3; border-radius: 4px 4px 0 0; }
.plays .counter-bar-track > span { background: #8caeff; }
.counter-bar-value { font-variant-numeric: tabular-nums; }
.counter-bar:focus-visible, #counterOpen:focus-visible { outline: 2px solid #8caeff; outline-offset: 2px; }
@media (max-width: 480px) { .counter-history-shell { padding: 16px; } }