style.css

/*!
 * Bootstrap v3.3.7 (http://getbootstrap.com)
 * Copyright 2011-2016 Twitter,
 Inc.
 * Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
 */
/*!
 * Generated using the Bootstrap Customizer (http://getbootstrap.com/customize/?id=35378cd201a131f69c68a64bc4438544)
 * Config saved to config.json and https://gist.github.com/35378cd201a131f69c68a64bc4438544
 */

@import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/variable/pretendardvariable.min.css");

:root {
  --iv-motion-ease-standard: cubic-bezier(0.22, 1, 0.36, 1);
  --iv-motion-ease-emphasis: cubic-bezier(0.2, 0.9, 0.2, 1);
  --iv-motion-duration-fast: 260ms;
  --iv-motion-duration-medium: 420ms;
  --iv-motion-duration-slow: 640ms;
  --iv-motion-distance-sm: 10px;
  --iv-motion-distance-md: 18px;
  --iv-motion-distance-lg: 28px;
  --iv-fullscreen-controls-height: 228px;
  --iv-fullscreen-progress-height: 56px;
  --iv-layer-marketplace: 300;
  --iv-layer-floating-toolbar: 900;
  --iv-layer-floating-toolbar-menu: 901;
  --iv-layer-update-banner: 1000;
  --iv-layer-internal-dialog: 1200;
  --iv-layer-fullscreen: 2147483600;
  --iv-layer-modal: 2147483647;
  --iv-layer-toast: 2147483647;
}

.ivlyrics-settings-overlay.motion-reduced,
#ivLyrics-config-container.motion-reduced {
  --iv-motion-duration-fast: 1ms;
  --iv-motion-duration-medium: 1ms;
  --iv-motion-duration-slow: 1ms;
  --iv-motion-distance-sm: 0px;
  --iv-motion-distance-md: 0px;
}

@keyframes ivlyricsSoftRiseIn {
  from {
    opacity: 0;
    transform: translateY(var(--iv-motion-distance-lg)) scale(0.985);
  }

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

@keyframes ivlyricsSoftFadeIn {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

@keyframes ivlyricsPulseDot {
  0%, 100% {
    transform: scale(1);
    opacity: 0.75;
  }

  50% {
    transform: scale(1.45);
    opacity: 1;
  }
}

/* Shared motion layer across settings, community UI, and marketplace */
#ivLyrics-config-container button,
#ivLyrics-config-container .btn,
.lyrics-tooltip-wrapper button,
.community-video-selector button,
.community-video-overlay button,
.ivlyrics-marketplace-root button,
.ivlyrics-marketplace-root .ivlyrics-marketplace-btn,
.ivlyrics-marketplace-root .ivlyrics-marketplace-confirm-btn {
  transition:
    transform var(--iv-motion-duration-fast) var(--iv-motion-ease-emphasis),
    opacity var(--iv-motion-duration-medium) var(--iv-motion-ease-standard),
    background var(--iv-motion-duration-fast) var(--iv-motion-ease-standard),
    border-color var(--iv-motion-duration-fast) var(--iv-motion-ease-standard),
    color var(--iv-motion-duration-fast) var(--iv-motion-ease-standard),
    box-shadow var(--iv-motion-duration-fast) var(--iv-motion-ease-standard);
}

#ivLyrics-config-container button:hover:not(:disabled),
#ivLyrics-config-container .btn:hover:not(:disabled),
.lyrics-tooltip-wrapper button:hover:not(:disabled),
.community-video-selector button:hover:not(:disabled),
.community-video-overlay button:hover:not(:disabled),
.ivlyrics-marketplace-root button:hover:not(:disabled),
.ivlyrics-marketplace-root .ivlyrics-marketplace-btn:hover:not(:disabled),
.ivlyrics-marketplace-root .ivlyrics-marketplace-confirm-btn:hover:not(:disabled) {
  transform: translateY(-2px);
}

#ivLyrics-config-container button:active:not(:disabled),
#ivLyrics-config-container .btn:active:not(:disabled),
.lyrics-tooltip-wrapper button:active:not(:disabled),
.community-video-selector button:active:not(:disabled),
.community-video-overlay button:active:not(:disabled),
.ivlyrics-marketplace-root button:active:not(:disabled),
.ivlyrics-marketplace-root .ivlyrics-marketplace-btn:active:not(:disabled),
.ivlyrics-marketplace-root .ivlyrics-marketplace-confirm-btn:active:not(:disabled) {
  transform: translateY(0) scale(0.97);
}

#ivLyrics-config-container input,
#ivLyrics-config-container select,
#ivLyrics-config-container textarea,
.community-video-submit-form input,
.ivlyrics-marketplace-search-input,
.ivlyrics-marketplace-disclaimer-checkbox input[type="checkbox"] {
  transition:
    transform var(--iv-motion-duration-fast) var(--iv-motion-ease-emphasis),
    opacity var(--iv-motion-duration-medium) var(--iv-motion-ease-standard),
    background var(--iv-motion-duration-fast) var(--iv-motion-ease-standard),
    border-color var(--iv-motion-duration-fast) var(--iv-motion-ease-standard),
    box-shadow var(--iv-motion-duration-fast) var(--iv-motion-ease-standard);
}

#ivLyrics-config-container input:focus,
#ivLyrics-config-container select:focus,
#ivLyrics-config-container textarea:focus,
.community-video-submit-form input:focus,
.ivlyrics-marketplace-search-input:focus {
  transform: translateY(-1px);
}

#ivLyrics-config-container .setting-row,
.lyrics-tooltip-wrapper .setting-row,
.community-video-item,
.community-video-submit-form,
.community-video-embed,
.ivlyrics-marketplace-card,
.ivlyrics-marketplace-sidebar-dev,
.ivlyrics-marketplace-sidebar-minicard,
.ivlyrics-marketplace-notice,
.ivlyrics-marketplace-confirm-modal {
  transition:
    transform var(--iv-motion-duration-slow) var(--iv-motion-ease-emphasis),
    opacity var(--iv-motion-duration-medium) var(--iv-motion-ease-standard),
    background var(--iv-motion-duration-medium) var(--iv-motion-ease-standard),
    border-color var(--iv-motion-duration-medium) var(--iv-motion-ease-standard),
    box-shadow var(--iv-motion-duration-medium) var(--iv-motion-ease-standard);
}

#ivLyrics-config-container .setting-row:hover,
.lyrics-tooltip-wrapper .setting-row:hover,
.community-video-item:hover,
.ivlyrics-marketplace-sidebar-dev:hover,
.ivlyrics-marketplace-sidebar-minicard:hover {
  transform: translateY(-2px);
}

.ivlyrics-settings-overlay {
  position: fixed;
  inset: 0;
  z-index: var(--iv-layer-modal);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(0, 0, 0, 0.28);
  backdrop-filter: blur(0px);
  -webkit-backdrop-filter: blur(0px);
  opacity: 0;
  transition:
    opacity var(--iv-motion-duration-medium) var(--iv-motion-ease-standard),
    backdrop-filter var(--iv-motion-duration-medium) var(--iv-motion-ease-standard),
    -webkit-backdrop-filter var(--iv-motion-duration-medium) var(--iv-motion-ease-standard),
    background var(--iv-motion-duration-medium) var(--iv-motion-ease-standard);
}

.ivlyrics-settings-overlay.is-open {
  opacity: 1;
  background: rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.ivlyrics-settings-modal-shell {
  background: rgba(17, 19, 22, 0.98);
  backdrop-filter: blur(40px) saturate(180%);
  -webkit-backdrop-filter: blur(40px) saturate(180%);
  border-radius: 0;
  max-width: 96vw;
  max-height: 88vh;
  width: min(96vw, 1180px);
  overflow: hidden;
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.42);
  border: 1px solid rgba(255, 255, 255, 0.1);
  opacity: 0;
  transform: translateY(var(--iv-motion-distance-md)) scale(0.985);
  transition:
    opacity var(--iv-motion-duration-medium) var(--iv-motion-ease-standard),
    transform var(--iv-motion-duration-medium) var(--iv-motion-ease-standard);
}

.ivlyrics-settings-overlay.is-open .ivlyrics-settings-modal-shell {
  opacity: 1;
  transform: translateY(0) scale(1);
}

/* 좁은 화면: 오버레이/모달 반응형 */
@media (max-width: 800px) {
  .ivlyrics-settings-overlay {
    padding: 16px;
  }

  .ivlyrics-settings-modal-shell {
    max-height: 92vh;
  }
}

@media (max-width: 650px) {
  .ivlyrics-settings-overlay {
    padding: 8px;
  }

  .ivlyrics-settings-modal-shell {
    max-width: 100vw;
    max-height: 96vh;
    width: 100vw;
    border-radius: 0;
    border: none;
  }
}

/* Translation Loading Indicator */
/* Translation Loading Indicator */
.lyrics-translation-loading-indicator {
  position: fixed;
  top: 24px;
  left: 24px;
  z-index: 9999;
  background: rgba(var(--spice-rgb-card), 0.6);
  border: 1px solid rgba(var(--spice-rgb-text), 0.1);
  border-radius: 12px;
  padding: 16px 20px;
  box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.2);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  max-width: 320px;
  animation: slideDown 0.4s cubic-bezier(0.16, 1, 0.3, 1);
  margin-top: 50px;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.lyrics-translation-loading-indicator:hover {
  background: rgba(var(--spice-rgb-card), 0.8);
  box-shadow: 0 12px 40px 0 rgba(0, 0, 0, 0.25);
  transform: translateY(2px);
}

.lyrics-translation-loading-content {
  display: flex;
  align-items: center;
  gap: 16px;
  color: var(--spice-text);
  font-family: var(--font-family);
  font-size: 14px;
  font-weight: 600;
  line-height: 1.5;
  letter-spacing: -0.01em;
}

.lyrics-translation-loading-spinner {
  width: 18px;
  height: 18px;
  border: 2px solid rgba(var(--spice-rgb-text), 0.2);
  border-top: 2px solid var(--spice-text);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
  flex-shrink: 0;
}

@keyframes fadeInSlide {
  from {
    opacity: 0;
    transform: translateX(-20px);
  }

  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes spin {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}

@keyframes slideDown {
  from {
    opacity: 0;
    transform: translateY(-12px);
  }

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

@keyframes expandDown {
  from {
    opacity: 0;
    max-height: 0;
  }

  to {
    opacity: 1;
    max-height: 500px;
  }
}

/* Update Banner Styles - Fluent Design */
.ivLyrics-update-banner {
  animation: slideDown 0.4s cubic-bezier(0.16, 1, 0.3, 1);
  z-index: var(--iv-layer-update-banner);
}

/* Hide Spotify top bar on ivLyrics page to prevent click interception */
body.ivlyrics-page-active .main-topBar-container {
  display: none !important;
  pointer-events: none !important;
}

/* 전체화면 모드에서 업데이트 배너 숨기기 */
#lyrics-fullscreen-container .ivLyrics-update-banner {
  display: none !important;
}

.lyrics-update-button-primary:hover {
  background: rgba(255, 255, 255, 0.22) !important;
  transform: scale(1.02);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.lyrics-update-button-primary:active {
  transform: scale(0.98);
}

.lyrics-update-button-secondary:hover:not(:disabled) {
  background: rgba(255, 255, 255, 0.12) !important;
  transform: translateY(-1px);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.lyrics-update-button-secondary:active:not(:disabled) {
  transform: translateY(0);
}

.lyrics-update-button-close:hover {
  background: rgba(255, 255, 255, 0.1) !important;
  color: rgba(255, 255, 255, 0.9) !important;
}

.lyrics-update-button-close:active {
  transform: scale(0.9);
}

@media (min-width: 768px) {
  .container {
    width: 750px;
  }
}

@media (min-width: 992px) {
  .container {
    width: 970px;
  }
}

@media (min-width: 1200px) {
  .container {
    width: 1170px;
  }
}

@media (min-width: 1500px) {
  .container {
    width: 1450px;
  }
}

.row {
  margin-left: -16px;
  margin-right: -16px;
}

.container:after,
.row:after {
  clear: both;
}

.hide {
  display: none !important;
}

.show {
  display: block !important;
}

.hidden {
  display: none !important;
}

.lyrics-lyricsContainer-LyricsContainer {
  display: grid;
  grid-template-rows: 1fr;
  position: absolute;
  height: 100%;
  width: 100%;
  top: 0;
  background: transparent;
  overflow: hidden;
  /* 배경 요소 오버플로우 방지 - 스크롤은 내부 가사 요소에서 처리 */
  /* Isolate the lyrics subtree from outside layout/paint queries. Every karaoke
     frame mutates child transforms, fills, and layer state — without containment,
     anything outside that reads layout (e.g. Spotify's wrapper measuring scrollWidth
     in microtasks) forces a full reflow because the engine treats those mutations
     as global invalidation. With contain:layout paint the engine knows changes
     inside cannot affect outer geometry, so those external reads can use cached
     layout instead of recomputing. Safe here because we already overflow:hidden
     and width/height are 100% (no children rely on bubbling size out). */
  contain: layout paint;
}


.lyrics-lyricsContainer-Loading {
  align-self: center;
  grid-area: 1 / 1 / -1 / -1;
  z-index: 2;
}

.lyrics-lyricsContainer-LyricsUnavailablePage {
  align-items: center;
  color: var(--lyrics-color-inactive);
  display: flex;
  grid-area: 1 / 1 / -1 / -1;
  height: 100%;
  justify-content: center;
  padding: 20px;
  font-size: 88px;
  letter-spacing: 0.1em;
  font-weight: 700;
  z-index: 2;
  position: relative;
}

.lyrics-lyricsContainer-LyricsUnavailableMessage--motion {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 0;
  letter-spacing: 0;
}

.lyrics-noLyricsMotion {
  width: clamp(180px, 28vw, 360px);
  max-width: min(72vw, 420px);
  height: auto;
  overflow: visible;
  color: currentColor;
  opacity: 0.88;
}

.lyrics-noLyricsMotion-staff {
  opacity: 0.13;
}

.lyrics-noLyricsMotion-wave,
.lyrics-noLyricsMotion-note,
.lyrics-noLyricsMotion-particle {
  transform-box: fill-box;
  transform-origin: center;
}

.lyrics-noLyricsMotion-wave-soft {
  opacity: 0.22;
  animation: lyricsNoLyricsWaveFloat 7s ease-in-out infinite;
}

.lyrics-noLyricsMotion-wave-main {
  opacity: 0.55;
  stroke-dasharray: 76 28;
  animation:
    lyricsNoLyricsWaveFlow 5.2s linear infinite,
    lyricsNoLyricsWaveFloat 7s ease-in-out infinite;
}

.lyrics-noLyricsMotion-particle {
  opacity: 0;
  animation: lyricsNoLyricsParticleFloat var(--particle-duration, 8s) ease-in-out infinite;
  animation-delay: var(--particle-delay, 0s);
}

.lyrics-noLyricsMotion-note {
  opacity: 0.2;
  animation: lyricsNoLyricsNoteFloat 4.8s ease-in-out infinite;
}

.lyrics-noLyricsMotion-note-2 {
  animation-delay: -2.4s;
}

.lyrics-lyricsContainer-LyricsContainer.playback-paused .lyrics-noLyricsMotion *,
.lyrics-lyricsContainer-LyricsContainer.motion-reduced .lyrics-noLyricsMotion * {
  animation-play-state: paused;
}

.lyrics-lyricsContainer-LyricsContainer.motion-reduced .lyrics-noLyricsMotion * {
  animation: none !important;
}

@media (prefers-reduced-motion: reduce) {
  .lyrics-noLyricsMotion * {
    animation: none !important;
  }
}

@keyframes lyricsNoLyricsWaveFlow {
  from {
    stroke-dashoffset: 0;
  }

  to {
    stroke-dashoffset: -104;
  }
}

@keyframes lyricsNoLyricsWaveFloat {
  0%,
  100% {
    transform: translateY(-6px);
  }

  50% {
    transform: translateY(7px);
  }
}

@keyframes lyricsNoLyricsParticleFloat {
  0% {
    transform: translate(0, 0) scale(0.72);
    opacity: 0;
  }

  14% {
    opacity: var(--particle-opacity, 0.7);
  }

  74% {
    opacity: var(--particle-opacity, 0.7);
  }

  100% {
    transform: translate(var(--particle-x, 0), -150px) scale(1.18);
    opacity: 0;
  }
}

@keyframes lyricsNoLyricsNoteFloat {
  0%,
  100% {
    transform: translateY(8px) rotate(-4deg);
    opacity: 0.12;
  }

  50% {
    transform: translateY(-10px) rotate(4deg);
    opacity: 0.36;
  }
}

.lyrics-lyricsContainer-UnsyncedLyricsPage {
  grid-area: 1 / 1 / -1 / -1;
  grid-template-rows: 1fr 20px;
  user-select: text;
  text-align: var(--lyrics-align-text);
  z-index: 2;
  position: relative;
  /* 자체 스크롤 가능하도록 설정 */
  overflow-y: auto;
  overflow-x: hidden;
  height: 100%;
  /* 스크롤바 스타일링 */
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, 0.3) transparent;
}

/* 웹킷 브라우저용 스크롤바 스타일 */
.lyrics-lyricsContainer-UnsyncedLyricsPage::-webkit-scrollbar {
  width: 8px;
}

.lyrics-lyricsContainer-UnsyncedLyricsPage::-webkit-scrollbar-track {
  background: transparent;
}

.lyrics-lyricsContainer-UnsyncedLyricsPage::-webkit-scrollbar-thumb {
  background-color: rgba(255, 255, 255, 0.3);
  border-radius: 4px;
  transition: background-color 0.2s;
}

.lyrics-lyricsContainer-UnsyncedLyricsPage::-webkit-scrollbar-thumb:hover {
  background-color: rgba(255, 255, 255, 0.5);
}

.lyrics-lyricsContainer-LyricsUnsyncedPadding {
  display: flex;
  /* 2 padding blocks & 1 line height & Provider block */
  height: calc(50vh - 91px - 8px - var(--lyrics-font-size));
}

.lyrics-lyricsContainer-UnsyncedLyricsPage:has(.lyrics-versionSelector,
  .lyrics-lyricsContainer-LyricsLine:nth-child(4)) .lyrics-lyricsContainer-LyricsUnsyncedPadding {
  height: 10vh;
}

.lyrics-lyricsContainer-SyncedLyricsPage {
  display: grid;
  grid-area: 1 / 1 / -1 / -1;
  grid-template-rows: 1fr 30px;
  overflow: hidden;
  text-align: var(--lyrics-align-text);
  user-select: text;
  z-index: 2;
  position: relative;
}

.lyrics-lyricsContainer-LyricsBackground {
  background-color: var(--lyrics-color-background);
  background-image: var(--lyrics-background-noise);
  grid-area: 1 / 1 / -1 / -1;
  transition: background-color 0.25s ease-out;
  z-index: 1;
  pointer-events: none;
}

.lyrics-lyricsContainer-Provider {
  align-self: end;
  color: var(--lyrics-color-inactive);
  grid-area: 2 / 1 / -1 / -1;
  justify-self: stretch;
  height: 25px;
  overflow: hidden;
  background: linear-gradient(0deg, transparent 30%, transparent);
  /* transparent footer */
  z-index: 3;
  padding: 60px 20px 30px;
  pointer-events: none;
}

.lyrics-lyricsContainer-SyncedLyrics {
  --lyrics-line-height: calc(4px + var(--lyrics-font-size));
  grid-area: 1 / 1 / -2 / -1;
  height: 0;
}

.lyrics-lyricsContainer-SyncedLyrics .lyrics-lyricsContainer-LyricsLine {
  transform: translateY(calc(var(--position-index) * var(--lyrics-line-height) + var(--offset)));
  transform-origin: var(--lyrics-align-text);
  color: var(--lyrics-color-inactive);
  transition-timing-function: cubic-bezier(0.22, 1, 0.36, 1);
  transition-duration: var(--line-shift-duration, calc(var(--animation-index) * var(--animation-tempo) + 0.3s));
  transition-delay: var(--line-shift-delay, 0s);
  /* Skip `filter` here: blur snaps to new value when --blur-index changes instead of
     transitioning across every visible line in parallel (huge GPU spike during scroll). */
  transition-property: transform, color, opacity;
  opacity: 1;
  will-change: transform;
}

.lyrics-lyricsContainer-SyncedLyrics .lyrics-lyricsContainer-LyricsLine:not(.lyrics-lyricsContainer-LyricsLine-active) {
  letter-spacing: -0.005em;
}

.lyrics-lyricsContainer-LyricsContainer.blur-enabled .lyrics-lyricsContainer-SyncedLyrics .lyrics-lyricsContainer-LyricsLine {
  filter: blur(calc(var(--blur-index) * 1.5px));
}

/* 하이라이트 모드: 현재 가사만 밝게, 나머지는 희미하게 */
.lyrics-lyricsContainer-LyricsContainer.highlight-mode-enabled .lyrics-lyricsContainer-SyncedLyrics .lyrics-lyricsContainer-LyricsLine,
.lyrics-lyricsContainer-LyricsContainer.highlight-mode-enabled .lyrics-lyricsContainer-SyncedScrollView .lyrics-lyricsContainer-LyricsLine {
  opacity: var(--highlight-inactive-opacity, 0.3);
  transition: opacity 0.4s cubic-bezier(0.16, 1, 0.3, 1),
    transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94), color 0.3s ease;
}

.lyrics-lyricsContainer-LyricsContainer.highlight-mode-enabled .lyrics-lyricsContainer-SyncedLyrics .lyrics-lyricsContainer-LyricsLine.lyrics-lyricsContainer-LyricsLine-active,
.lyrics-lyricsContainer-LyricsContainer.highlight-mode-enabled .lyrics-lyricsContainer-SyncedScrollView .lyrics-lyricsContainer-LyricsLine.lyrics-lyricsContainer-LyricsLine-active {
  opacity: 1 !important;
  text-shadow: 0 0 20px rgba(255, 255, 255, 0.3), 0 3px 10px rgba(0, 0, 0, 0.7);
}

/* 하이라이트 모드: Unsynced 가사에도 적용 */
.lyrics-lyricsContainer-LyricsContainer.highlight-mode-enabled .lyrics-lyricsContainer-UnsyncedLyricsPage .lyrics-lyricsContainer-LyricsLine {
  opacity: var(--highlight-inactive-opacity, 0.3);
  transition: opacity 0.4s cubic-bezier(0.16, 1, 0.3, 1), color 0.3s ease;
}

.lyrics-lyricsContainer-LyricsContainer.highlight-mode-enabled .lyrics-lyricsContainer-UnsyncedLyricsPage .lyrics-lyricsContainer-LyricsLine.lyrics-lyricsContainer-LyricsLine-active {
  opacity: 1 !important;
  text-shadow: 0 0 20px rgba(255, 255, 255, 0.3), 0 3px 10px rgba(0, 0, 0, 0.7);
}

/* 하이라이트 모드 + 호버 효과: 마우스 올리면 밝게 */
.lyrics-lyricsContainer-LyricsContainer.highlight-mode-enabled .lyrics-lyricsContainer-LyricsLine:hover {
  opacity: 0.8 !important;
}

.lyrics-lyricsContainer-UnsyncedLyricsPage .lyrics-lyricsContainer-LyricsLine a {
  color: var(--lyrics-color-active);
}

/* 일반 가사: 기본적으로 비활성화 상태 (투명도 낮음) */
.lyrics-lyricsContainer-UnsyncedLyricsPage .lyrics-lyricsContainer-LyricsLine {
  color: var(--lyrics-color-inactive);
  opacity: 0.5;
  filter: blur(0px);
  transform: translateY(0);
  transition:
    color var(--iv-motion-duration-fast) var(--iv-motion-ease-standard),
    opacity var(--iv-motion-duration-medium) var(--iv-motion-ease-standard),
    filter var(--iv-motion-duration-medium) var(--iv-motion-ease-standard),
    transform var(--iv-motion-duration-fast) var(--iv-motion-ease-emphasis),
    text-shadow var(--iv-motion-duration-medium) var(--iv-motion-ease-standard);
}

/* 일반 가사: active 클래스 제거 (더 이상 사용하지 않음) */
.lyrics-lyricsContainer-UnsyncedLyricsPage .lyrics-lyricsContainer-LyricsLine-active {
  /* 기본 상태와 동일하게 설정 */
  color: var(--lyrics-color-inactive);
  opacity: 0.5;
}

/* 일반 가사: 마우스 호버 시 진하게 표시 */
.lyrics-lyricsContainer-UnsyncedLyricsPage .lyrics-lyricsContainer-LyricsLine:hover {
  color: var(--lyrics-color-active);
  opacity: 1;
  transform: translateX(4px);
}

.lyrics-lyricsContainer-SyncedLyrics .lyrics-lyricsContainer-LyricsLine:hover,
.lyrics-lyricsContainer-SyncedScrollView .lyrics-lyricsContainer-LyricsLine:hover {
  color: var(--lyrics-color-active);
}

.lyrics-lyricsContainer-SyncedLyrics .lyrics-lyricsContainer-LyricsLine.lyrics-lyricsContainer-LyricsLine-active,
.lyrics-lyricsContainer-SyncedScrollView .lyrics-lyricsContainer-LyricsLine.lyrics-lyricsContainer-LyricsLine-active {
  color: var(--lyrics-color-active);
  opacity: 1;
  filter: none !important;
  transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.lyrics-lyricsContainer-LyricsLine > p,
.lyrics-lyricsContainer-LyricsLine-phonetic,
.lyrics-lyricsContainer-LyricsLine-translation,
.lyrics-karaoke-line {
  transition:
    transform var(--iv-motion-duration-slow) var(--iv-motion-ease-emphasis),
    opacity var(--iv-motion-duration-medium) var(--iv-motion-ease-standard),
    letter-spacing var(--iv-motion-duration-medium) var(--iv-motion-ease-standard),
    text-shadow var(--iv-motion-duration-medium) var(--iv-motion-ease-standard);
}

.lyrics-lyricsContainer-LyricsLine > p:has(.lyrics-karaoke-stack),
.lyrics-lyricsContainer-LyricsLine > p:has(.lyrics-karaoke-line) {
  overflow: visible;
}

.lyrics-lyricsContainer-LyricsLine-active > p,
.lyrics-lyricsContainer-LyricsLine-active .lyrics-lyricsContainer-LyricsLine-phonetic,
.lyrics-lyricsContainer-LyricsLine-active .lyrics-lyricsContainer-LyricsLine-translation,
.lyrics-lyricsContainer-LyricsLine-active .lyrics-karaoke-line {
  transform: translateY(-2px);
}

.lyrics-lyricsContainer-SyncedLyrics .lyrics-lyricsContainer-LyricsLine.lyrics-lyricsContainer-LyricsLine-active {
  transform: translateY(calc(var(--position-index) * var(--lyrics-line-height) + var(--offset)));
}

.lyrics-lyricsContainer-SyncedLyricsPage.is-karaoke:not(.karaoke-line-transition-enabled) .lyrics-lyricsContainer-SyncedLyrics .lyrics-lyricsContainer-LyricsLine,
.lyrics-lyricsContainer-SyncedLyricsPage.is-karaoke:not(.karaoke-line-transition-enabled) .lyrics-lyricsContainer-SyncedLyrics .lyrics-lyricsContainer-LyricsLine.lyrics-lyricsContainer-LyricsLine-active,
.lyrics-lyricsContainer-UnsyncedLyricsPage.is-karaoke:not(.karaoke-line-transition-enabled) .lyrics-lyricsContainer-LyricsLine,
.lyrics-lyricsContainer-UnsyncedLyricsPage.is-karaoke:not(.karaoke-line-transition-enabled) .lyrics-lyricsContainer-LyricsLine.lyrics-lyricsContainer-LyricsLine-active {
  transition: none;
  will-change: auto;
}

.lyrics-lyricsContainer-SyncedLyricsPage.is-karaoke:not(.karaoke-line-transition-enabled) .lyrics-lyricsContainer-LyricsLine > p,
.lyrics-lyricsContainer-SyncedLyricsPage.is-karaoke:not(.karaoke-line-transition-enabled) .lyrics-lyricsContainer-LyricsLine-phonetic,
.lyrics-lyricsContainer-SyncedLyricsPage.is-karaoke:not(.karaoke-line-transition-enabled) .lyrics-lyricsContainer-LyricsLine-translation,
.lyrics-lyricsContainer-SyncedLyricsPage.is-karaoke:not(.karaoke-line-transition-enabled) .lyrics-karaoke-line,
.lyrics-lyricsContainer-UnsyncedLyricsPage.is-karaoke:not(.karaoke-line-transition-enabled) .lyrics-lyricsContainer-LyricsLine > p,
.lyrics-lyricsContainer-UnsyncedLyricsPage.is-karaoke:not(.karaoke-line-transition-enabled) .lyrics-lyricsContainer-LyricsLine-phonetic,
.lyrics-lyricsContainer-UnsyncedLyricsPage.is-karaoke:not(.karaoke-line-transition-enabled) .lyrics-lyricsContainer-LyricsLine-translation,
.lyrics-lyricsContainer-UnsyncedLyricsPage.is-karaoke:not(.karaoke-line-transition-enabled) .lyrics-karaoke-line {
  transition: none;
}

.lyrics-lyricsContainer-SyncedLyricsPage.is-karaoke:not(.karaoke-line-transition-enabled) .lyrics-lyricsContainer-LyricsLine-active > p,
.lyrics-lyricsContainer-SyncedLyricsPage.is-karaoke:not(.karaoke-line-transition-enabled) .lyrics-lyricsContainer-LyricsLine-active .lyrics-karaoke-line,
.lyrics-lyricsContainer-UnsyncedLyricsPage.is-karaoke:not(.karaoke-line-transition-enabled) .lyrics-lyricsContainer-LyricsLine-active > p,
.lyrics-lyricsContainer-UnsyncedLyricsPage.is-karaoke:not(.karaoke-line-transition-enabled) .lyrics-lyricsContainer-LyricsLine-active .lyrics-karaoke-line {
  transform: none;
}

.lyrics-lyricsContainer-SyncedLyrics>.lyrics-lyricsContainer-LyricsLine-paddingLine {
  opacity: 0 !important;
  filter: none !important;
  pointer-events: none;
  visibility: hidden !important;
}

.lyrics-lyricsContainer-SyncedLyricsPage:not(.scrolling-active) .lyrics-lyricsContainer-SyncedLyrics>.lyrics-lyricsContainer-LyricsLine-paddingBefore {
  min-height: 0 !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  /* Keep outgoing multi-line lyrics in flow while hidden so the remaining lines
     do not visually fall when a tall line leaves the compact window. */
  height: auto !important;
  overflow: visible;
}

.lyrics-lyricsContainer-LyricsLine,
.lyrics-versionSelector {
  margin-left: 40px;
  margin-right: 40px;
}

@media (min-width: 1024px) {

  .lyrics-lyricsContainer-LyricsLine,
  .lyrics-versionSelector {
    margin-left: 80px;
    margin-right: 80px;
  }
}

@media (min-width: 1280px) {

  .lyrics-lyricsContainer-LyricsLine,
  .lyrics-versionSelector {
    margin-left: 120px;
    margin-right: 120px;
  }
}

.lyrics-lyricsContainer-UnsyncedLyricsPage .lyrics-lyricsContainer-LyricsLine {
  font-size: var(--lyrics-original-font-size, var(--lyrics-font-size));
  font-weight: var(--lyrics-original-font-weight, 700);
  font-family: var(--lyrics-original-font-family,
      var(--lyrics-font-family, var(--font-family)));
  letter-spacing: var(--lyrics-original-letter-spacing, 0);
  line-height: 1.2;
  text-shadow: var(--lyrics-text-shadow);
  opacity: var(--lyrics-original-opacity, 1);
  overflow-wrap: break-word;
  margin-bottom: 32px;
  /* Increased spacing between lyrics lines */
}

/* 첫 번째 가사 줄이 패딩 요소와 겹치지 않도록 margin-top 추가 */
.lyrics-lyricsContainer-UnsyncedLyricsPage .lyrics-lyricsContainer-LyricsLine:first-of-type {
  margin-top: 16px;
}

.lyrics-lyricsContainer-UnsyncedLyricsPage .lyrics-lyricsContainer-LyricsLine>p {
  display: block;
  margin: 0;
  padding: 0;
  line-height: inherit;
  white-space: normal;
  overflow-wrap: break-word;
  width: 100%;
}

/* Phonetic text style for Unsynced lyrics */
.lyrics-lyricsContainer-UnsyncedLyricsPage .lyrics-lyricsContainer-LyricsLine-phonetic {
  font-size: var(--lyrics-phonetic-font-size,
      calc(var(--lyrics-font-size) * 0.6));
  font-weight: var(--lyrics-phonetic-font-weight, 400);
  font-family: var(--lyrics-phonetic-font-family,
      var(--lyrics-font-family, var(--font-family)));
  margin-top: var(--lyrics-phonetic-spacing, 4px);
  opacity: var(--lyrics-phonetic-opacity, 0.7);
  letter-spacing: var(--lyrics-phonetic-letter-spacing, 0);
  line-height: calc(var(--lyrics-phonetic-font-size, calc(var(--lyrics-font-size) * 0.6)) * 1.3);
}

/* Translation text style for Unsynced lyrics */
.lyrics-lyricsContainer-UnsyncedLyricsPage .lyrics-lyricsContainer-LyricsLine-translation {
  font-size: var(--lyrics-translation-font-size,
      calc(var(--lyrics-font-size) * 0.7));
  font-weight: var(--lyrics-translation-font-weight, 600);
  font-family: var(--lyrics-translation-font-family,
      var(--lyrics-font-family, var(--font-family)));
  margin-top: var(--lyrics-translation-spacing, 8px);
  opacity: var(--lyrics-translation-opacity, 0.6);
  letter-spacing: var(--lyrics-translation-letter-spacing, 0);
  line-height: calc(var(--lyrics-translation-font-size, calc(var(--lyrics-font-size) * 0.7)) * 1.4);
}

.lyrics-lyricsContainer-SyncedLyrics .lyrics-lyricsContainer-LyricsLine,
.lyrics-lyricsContainer-SyncedScrollView .lyrics-lyricsContainer-LyricsLine {
  font-size: var(--lyrics-original-font-size, var(--lyrics-font-size));
  font-weight: var(--lyrics-original-font-weight, 700);
  font-family: var(--lyrics-original-font-family,
      var(--lyrics-font-family, var(--font-family)));
  letter-spacing: var(--lyrics-original-letter-spacing, 0);
  text-shadow: var(--lyrics-text-shadow);
  line-height: 1;
  opacity: var(--lyrics-original-opacity, 1);
  white-space: normal;
  /* Allow text wrapping */
  margin-bottom: 0;
  /* Remove any bottom margin */
}

.lyrics-lyricsContainer-SyncedLyrics .lyrics-lyricsContainer-LyricsLine>p,
.lyrics-lyricsContainer-SyncedScrollView .lyrics-lyricsContainer-LyricsLine>p {
  display: block;
  padding: 0;
  white-space: normal;
  /* Allow text wrapping */
  overflow-wrap: break-word;
  width: 100%;
  /* Ensure full width for wrapping */
}

@media (min-width: 1280px) {
  .lyrics-lyricsContainer-SyncedLyrics .lyrics-lyricsContainer-LyricsLine,
  .lyrics-lyricsContainer-SyncedScrollView .lyrics-lyricsContainer-LyricsLine {
    font-weight: var(--lyrics-original-font-weight, 900);
  }
}

/* Phonetic text style for Synced lyrics */
.lyrics-lyricsContainer-SyncedLyrics .lyrics-lyricsContainer-LyricsLine-phonetic,
.lyrics-lyricsContainer-SyncedScrollView .lyrics-lyricsContainer-LyricsLine-phonetic {
  font-size: var(--lyrics-phonetic-font-size,
      calc(var(--lyrics-font-size) * 0.6));
  font-weight: var(--lyrics-phonetic-font-weight, 400);
  font-family: var(--lyrics-phonetic-font-family,
      var(--lyrics-font-family, var(--font-family)));
  margin-top: var(--lyrics-phonetic-spacing, 4px);
  opacity: var(--lyrics-phonetic-opacity, 0.7);
  letter-spacing: var(--lyrics-phonetic-letter-spacing, 0);
  line-height: calc(var(--lyrics-phonetic-font-size, calc(var(--lyrics-font-size) * 0.6)) * 1.3);
}

/* Translation text style for Synced lyrics */
.lyrics-lyricsContainer-SyncedLyrics .lyrics-lyricsContainer-LyricsLine-translation,
.lyrics-lyricsContainer-SyncedScrollView .lyrics-lyricsContainer-LyricsLine-translation {
  font-size: var(--lyrics-translation-font-size,
      calc(var(--lyrics-font-size) * 0.7));
  font-weight: var(--lyrics-translation-font-weight, 600);
  font-family: var(--lyrics-translation-font-family,
      var(--lyrics-font-family, var(--font-family)));
  margin-top: var(--lyrics-translation-spacing, 8px);
  opacity: var(--lyrics-translation-opacity, 0.6);
  letter-spacing: var(--lyrics-translation-letter-spacing, 0);
  line-height: calc(var(--lyrics-translation-font-size, calc(var(--lyrics-font-size) * 0.7)) * 1.4);
}

/* Tab bar hidden - modes are now auto-detected */
.lyrics-tabBar,
.lyrics-tabBar-nav,
.lyrics-tabBar-header {
  display: none !important;
}

.lyrics-tabBar-headerItem {
  -webkit-app-region: no-drag;
  display: inline-block;
  pointer-events: auto;
}

.lyrics-tabBar-headerItemLink {
  margin: 0 8px 0 0;
}

.lyrics-tabBar-active {
  background-color: var(--spice-tab-active);
  border-radius: 4px;
}

.lyrics-tabBar-headerItemLink {
  border-radius: 4px;
  color: var(--spice-text);
  display: inline-block;
  margin: 0 8px;
  padding: 8px 16px;
  position: relative;
  text-decoration: none !important;
  cursor: pointer;
}

.lyrics-tabBar-headerItemLink .main-type-mestoBold {
  text-transform: capitalize;
}

.lyrics-tabBar-headerItemLink-locked::before {
  content: "• ";
}

.lyrics-tabBar-nav {
  -webkit-app-region: drag;
  pointer-events: none;
  width: 100%;
  position: relative;
  z-index: 10;
}

.lyrics-tabBar-header {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: flex-start;
  position: relative;
  z-index: 10;
}

.lyrics-tabBar-headerItem .optionsMenu-dropBox {
  color: var(--spice-text);
  border: 0;
  max-width: 150px;
  height: 42px;
  padding: 0 30px 0 12px;
  background-color: initial;
  cursor: pointer;
  appearance: none;
}

.lyrics-tabBar-headerItem .optionsMenu-dropBox svg {
  position: absolute;
  margin-left: 8px;
}

div.lyrics-tabBar-headerItemLink {
  padding: 0;
}

.lyrics-tabBar-header button.switch {
  margin-inline-end: 12px;
  margin-inline-start: 0;
}

.lyrics-lyricsContainer-Karaoke-WordActive {
  color: var(--lyrics-color-active) !important;
  background-position: top left !important;
}

.lyrics-lyricsContainer-Karaoke-Word {
  color: var(--lyrics-color-inactive);
  background-image: linear-gradient(to right,
      var(--lyrics-color-active),
      var(--lyrics-color-active) 45%,
      var(--lyrics-color-inactive) 55%,
      var(--lyrics-color-inactive));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  background-size: 225% 100%;
  background-position: top left 100%;
  transition-property: color, background-position;
  transition-duration: calc(var(--word-duration) + 0.05s);
  transition-timing-function: linear;
}

/* 새로운 노래방 스타일 - synced 모드 기반 */
.lyrics-karaoke-line {
  display: block;
  width: 100%;
  max-width: 100%;
  --karaoke-glyph-bleed-x: 0.16em;
  letter-spacing: var(--lyrics-original-letter-spacing, 0);
  line-height: 1.38;
  color: var(--lyrics-color-inactive);
  overflow: visible;
  /* Apply the configured shadow once per line instead of once per karaoke char. */
  filter: var(--lyrics-text-drop-shadow, none);
  text-shadow: none !important;
  /* Force grayscale antialiasing so active (background-clip:text, transparent fill)
     and done (solid color) chars share the same AA mode. Without this, done chars
     pick up sub-pixel AA and visibly thicken at the active→done transition. */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.lyrics-karaoke-line.is-text-run {
  letter-spacing: 0;
  unicode-bidi: plaintext;
}

.lyrics-karaoke-line.is-rtl {
  direction: ltr;
}

.lyrics-karaoke-line.has-word-wrap {
  word-break: normal;
  overflow-wrap: normal;
}

.lyrics-karaoke-stack {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.24em;
  width: 100%;
  overflow: visible;
  padding-block: 0.08em;
}

.lyrics-lyricsContainer-SyncedLyricsPage.is-karaoke
  .lyrics-lyricsContainer-SyncedLyrics:has(.lyrics-karaoke-part.active-vocal-row)
  > .lyrics-lyricsContainer-LyricsLine {
  transition-property: transform, color, opacity;
  transition-duration: 520ms !important;
  transition-timing-function: cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.lyrics-karaoke-part {
  display: block;
  width: 100%;
  overflow: visible;
  padding-block: 0.03em;
}

.lyrics-karaoke-part.background {
  font-size: 0.92em;
  opacity: 0.9;
}

.lyrics-karaoke-part.effect,
.lyrics-karaoke-part.speaker-sfx {
  font-style: italic;
}

.lyrics-karaoke-part-subline {
  display: block;
  width: 100%;
  margin-top: 0.12em;
}

.lyrics-karaoke-part .lyrics-karaoke-part-subline {
  color: var(--lyrics-color-active);
}

.lyrics-lyricsContainer-LyricsLine-active .lyrics-karaoke-part-subline {
  transform: none;
}

.lyrics-karaoke-part.speaker-b {
  --lyrics-color-active: #8bd3ff;
  --lyrics-color-inactive: rgba(139, 211, 255, 0.46);
}

.lyrics-karaoke-part.speaker-c {
  --lyrics-color-active: #ffd166;
  --lyrics-color-inactive: rgba(255, 209, 102, 0.48);
}

.lyrics-karaoke-part.speaker-d {
  --lyrics-color-active: #c4a7ff;
  --lyrics-color-inactive: rgba(196, 167, 255, 0.48);
}

.lyrics-karaoke-part.speaker-sfx {
  --lyrics-color-active: #f4a6c8;
  --lyrics-color-inactive: rgba(244, 166, 200, 0.46);
}

.lyrics-karaoke-part.speaker-male-1,
.lyrics-lyricsContainer-LyricsLine.speaker-male-1 {
  --lyrics-color-active: var(--ivlyrics-multi-vocal-speaker-color-male-1, #e6f2ff);
  --lyrics-color-inactive: color-mix(in srgb, var(--ivlyrics-multi-vocal-speaker-color-male-1, #e6f2ff) 52%, transparent);
}

.lyrics-karaoke-part.speaker-male-2,
.lyrics-lyricsContainer-LyricsLine.speaker-male-2 {
  --lyrics-color-active: var(--ivlyrics-multi-vocal-speaker-color-male-2, #d7ecff);
  --lyrics-color-inactive: color-mix(in srgb, var(--ivlyrics-multi-vocal-speaker-color-male-2, #d7ecff) 50%, transparent);
}

.lyrics-karaoke-part.speaker-male-3,
.lyrics-lyricsContainer-LyricsLine.speaker-male-3 {
  --lyrics-color-active: var(--ivlyrics-multi-vocal-speaker-color-male-3, #edf7ff);
  --lyrics-color-inactive: color-mix(in srgb, var(--ivlyrics-multi-vocal-speaker-color-male-3, #edf7ff) 50%, transparent);
}

.lyrics-karaoke-part.speaker-male-4,
.lyrics-lyricsContainer-LyricsLine.speaker-male-4 {
  --lyrics-color-active: var(--ivlyrics-multi-vocal-speaker-color-male-4, #dbe7ff);
  --lyrics-color-inactive: color-mix(in srgb, var(--ivlyrics-multi-vocal-speaker-color-male-4, #dbe7ff) 50%, transparent);
}

.lyrics-karaoke-part.speaker-male-5,
.lyrics-lyricsContainer-LyricsLine.speaker-male-5 {
  --lyrics-color-active: var(--ivlyrics-multi-vocal-speaker-color-male-5, #e2f8ff);
  --lyrics-color-inactive: color-mix(in srgb, var(--ivlyrics-multi-vocal-speaker-color-male-5, #e2f8ff) 50%, transparent);
}

.lyrics-karaoke-part.speaker-female-1,
.lyrics-lyricsContainer-LyricsLine.speaker-female-1 {
  --lyrics-color-active: var(--ivlyrics-multi-vocal-speaker-color-female-1, #ffe7ef);
  --lyrics-color-inactive: color-mix(in srgb, var(--ivlyrics-multi-vocal-speaker-color-female-1, #ffe7ef) 52%, transparent);
}

.lyrics-karaoke-part.speaker-female-2,
.lyrics-lyricsContainer-LyricsLine.speaker-female-2 {
  --lyrics-color-active: var(--ivlyrics-multi-vocal-speaker-color-female-2, #ffe0e8);
  --lyrics-color-inactive: color-mix(in srgb, var(--ivlyrics-multi-vocal-speaker-color-female-2, #ffe0e8) 50%, transparent);
}

.lyrics-karaoke-part.speaker-female-3,
.lyrics-lyricsContainer-LyricsLine.speaker-female-3 {
  --lyrics-color-active: var(--ivlyrics-multi-vocal-speaker-color-female-3, #fff0f5);
  --lyrics-color-inactive: color-mix(in srgb, var(--ivlyrics-multi-vocal-speaker-color-female-3, #fff0f5) 50%, transparent);
}

.lyrics-karaoke-part.speaker-female-4,
.lyrics-lyricsContainer-LyricsLine.speaker-female-4 {
  --lyrics-color-active: var(--ivlyrics-multi-vocal-speaker-color-female-4, #ffdfe0);
  --lyrics-color-inactive: color-mix(in srgb, var(--ivlyrics-multi-vocal-speaker-color-female-4, #ffdfe0) 50%, transparent);
}

.lyrics-karaoke-part.speaker-female-5,
.lyrics-lyricsContainer-LyricsLine.speaker-female-5 {
  --lyrics-color-active: var(--ivlyrics-multi-vocal-speaker-color-female-5, #fbe5ff);
  --lyrics-color-inactive: color-mix(in srgb, var(--ivlyrics-multi-vocal-speaker-color-female-5, #fbe5ff) 50%, transparent);
}

.lyrics-karaoke-part.speaker-duet-1,
.lyrics-lyricsContainer-LyricsLine.speaker-duet-1 {
  --lyrics-color-active: var(--ivlyrics-multi-vocal-speaker-color-duet-1, #eadfff);
  --lyrics-color-inactive: color-mix(in srgb, var(--ivlyrics-multi-vocal-speaker-color-duet-1, #eadfff) 52%, transparent);
}

.lyrics-karaoke-part.speaker-duet-2,
.lyrics-lyricsContainer-LyricsLine.speaker-duet-2 {
  --lyrics-color-active: var(--ivlyrics-multi-vocal-speaker-color-duet-2, #e2d2ff);
  --lyrics-color-inactive: color-mix(in srgb, var(--ivlyrics-multi-vocal-speaker-color-duet-2, #e2d2ff) 50%, transparent);
}

.lyrics-karaoke-part.speaker-duet-3,
.lyrics-lyricsContainer-LyricsLine.speaker-duet-3 {
  --lyrics-color-active: var(--ivlyrics-multi-vocal-speaker-color-duet-3, #f0e8ff);
  --lyrics-color-inactive: color-mix(in srgb, var(--ivlyrics-multi-vocal-speaker-color-duet-3, #f0e8ff) 50%, transparent);
}

.lyrics-karaoke-part.speaker-duet-4,
.lyrics-lyricsContainer-LyricsLine.speaker-duet-4 {
  --lyrics-color-active: var(--ivlyrics-multi-vocal-speaker-color-duet-4, #dec9ff);
  --lyrics-color-inactive: color-mix(in srgb, var(--ivlyrics-multi-vocal-speaker-color-duet-4, #dec9ff) 50%, transparent);
}

.lyrics-karaoke-part.speaker-duet-5,
.lyrics-lyricsContainer-LyricsLine.speaker-duet-5 {
  --lyrics-color-active: var(--ivlyrics-multi-vocal-speaker-color-duet-5, #e9dcff);
  --lyrics-color-inactive: color-mix(in srgb, var(--ivlyrics-multi-vocal-speaker-color-duet-5, #e9dcff) 50%, transparent);
}

@keyframes ivlyrics-kind-effect-tremble {
  0%, 100% { translate: 0 0; }
  25% { translate: -0.5px 0.25px; }
  50% { translate: 0.45px -0.25px; }
  75% { translate: -0.25px -0.35px; }
}

@keyframes ivlyrics-kind-adlib-float {
  0%, 100% { translate: 0 0; }
  50% { translate: 0 -1.5px; }
}

@keyframes ivlyrics-kind-pulse {
  0%, 100% {
    scale: 1;
    filter: brightness(1);
  }
  45% {
    scale: 1.025;
    filter: brightness(1.12);
  }
}

@keyframes ivlyrics-kind-wave {
  0%, 100% { translate: 0 0; }
  35% { translate: 0 -0.11em; }
  70% { translate: 0 0.03em; }
}

@keyframes ivlyrics-kind-sparkle {
  0%, 100% {
    filter: brightness(1);
    text-shadow: 0 0 0 rgba(255, 255, 255, 0);
  }
  42% {
    filter: brightness(1.22);
    text-shadow: 0 0 0.18em rgba(255, 255, 255, 0.34), 0 0 0.42em currentColor;
  }
  58% {
    filter: brightness(0.96);
    text-shadow: 0 0 0.08em rgba(255, 255, 255, 0.16);
  }
}

@keyframes ivlyrics-kind-echo {
  0%, 100% {
    text-shadow: 0 0 0 rgba(255, 255, 255, 0);
  }
  50% {
    text-shadow:
      0.07em 0.04em 0 rgba(255, 255, 255, 0.18),
      0.14em 0.08em 0.22em color-mix(in srgb, var(--lyrics-color-active, #fff) 36%, transparent);
  }
}

@keyframes ivlyrics-kind-whisper {
  0%, 100% {
    opacity: 0.86;
    filter: blur(0);
    translate: 0 0;
  }
  45% {
    opacity: 0.72;
    filter: blur(0.55px);
    translate: 0.04em -0.02em;
  }
}

@keyframes ivlyrics-kind-bounce {
  0%, 100% { translate: 0 0; }
  32% { translate: 0 -0.16em; }
  58% { translate: 0 0.035em; }
  76% { translate: 0 -0.045em; }
}

@keyframes ivlyrics-kind-sway {
  0%, 100% {
    translate: 0 0;
    rotate: 0deg;
  }
  30% {
    translate: -0.0245em 0;
    rotate: -0.84deg;
  }
  70% {
    translate: 0.0245em 0;
    rotate: 0.84deg;
  }
}

@keyframes ivlyrics-kind-glow {
  0%, 100% {
    filter: brightness(1.08);
    text-shadow:
      0 0 0.12em rgba(255, 255, 255, 0.3),
      0 0 0.48em color-mix(in srgb, var(--lyrics-color-active, #fff) 42%, transparent),
      0 0 0.76em color-mix(in srgb, var(--lyrics-color-active, #fff) 20%, transparent);
  }
  50% {
    filter: brightness(1.03);
    text-shadow:
      0 0 0.1em rgba(255, 255, 255, 0.24),
      0 0 0.4em color-mix(in srgb, var(--lyrics-color-active, #fff) 36%, transparent),
      0 0 0.68em color-mix(in srgb, var(--lyrics-color-active, #fff) 16%, transparent);
  }
}

@keyframes ivlyrics-kind-glitch {
  0%, 100% {
    translate: 0 0;
    text-shadow: 0 0 0 transparent;
  }
  16% {
    translate: -0.035em 0.01em;
    text-shadow: 0.045em 0 rgba(111, 211, 255, 0.34), -0.045em 0 rgba(255, 116, 172, 0.3);
  }
  18% {
    translate: 0.03em -0.01em;
    text-shadow: -0.04em 0 rgba(111, 211, 255, 0.26), 0.04em 0 rgba(255, 116, 172, 0.28);
  }
  20%, 64% {
    translate: 0 0;
    text-shadow: 0 0 0 transparent;
  }
  66% {
    translate: 0.025em 0;
    text-shadow: 0.035em 0 rgba(111, 211, 255, 0.24), -0.035em 0 rgba(255, 116, 172, 0.24);
  }
  68% {
    translate: 0 0;
    text-shadow: 0 0 0 transparent;
  }
}

@keyframes ivlyrics-kind-flicker {
  0%, 100% {
    opacity: 1;
    filter: brightness(1);
  }
  12% {
    opacity: 0.76;
    filter: brightness(0.92);
  }
  15%, 48% {
    opacity: 1;
    filter: brightness(1.08);
  }
  52% {
    opacity: 0.82;
    filter: brightness(0.96);
  }
  56% {
    opacity: 1;
    filter: brightness(1.06);
  }
}

@keyframes ivlyrics-kind-float {
  0%, 100% {
    translate: 0 0;
    rotate: 0deg;
  }
  50% {
    translate: 0 -0.09em;
    rotate: 0.45deg;
  }
}

@keyframes ivlyrics-kind-blur {
  0%, 100% {
    filter: blur(0) brightness(1);
    opacity: 0.98;
  }
  50% {
    filter: blur(0.65px) brightness(1.08);
    opacity: 0.9;
  }
}

@keyframes ivlyrics-kind-pop {
  0%, 100% {
    scale: 1;
    filter: brightness(1);
  }
  18% {
    scale: 1.035;
    filter: brightness(1.09);
  }
  34% {
    scale: 0.996;
    filter: brightness(1);
  }
}

.lyrics-karaoke-part.effect .lyrics-karaoke-line.is-active,
.lyrics-lyricsContainer-LyricsLine.effect.lyrics-lyricsContainer-LyricsLine-active .lyrics-karaoke-line,
.lyrics-lyricsContainer-LyricsLine.effect.lyrics-lyricsContainer-LyricsLine-active > p {
  animation: ivlyrics-kind-effect-tremble 180ms steps(2, end) infinite;
  will-change: translate;
}

.lyrics-karaoke-part.adlib .lyrics-karaoke-line.is-active,
.lyrics-lyricsContainer-LyricsLine.adlib.lyrics-lyricsContainer-LyricsLine-active .lyrics-karaoke-line,
.lyrics-lyricsContainer-LyricsLine.adlib.lyrics-lyricsContainer-LyricsLine-active > p {
  animation: ivlyrics-kind-adlib-float 1.05s ease-in-out infinite;
  will-change: translate;
}

.lyrics-karaoke-part.pulse .lyrics-karaoke-line.is-active,
.lyrics-lyricsContainer-LyricsLine.pulse.lyrics-lyricsContainer-LyricsLine-active .lyrics-karaoke-line {
  animation: ivlyrics-kind-pulse 940ms ease-in-out infinite;
  transform-origin: center;
  will-change: scale, filter;
}

.lyrics-karaoke-part.wave .lyrics-karaoke-line.is-active .lyrics-karaoke-char,
.lyrics-karaoke-part.wave .lyrics-karaoke-line.is-active .lyrics-karaoke-text-run-segment,
.lyrics-lyricsContainer-LyricsLine.wave.lyrics-lyricsContainer-LyricsLine-active .lyrics-karaoke-line .lyrics-karaoke-char,
.lyrics-lyricsContainer-LyricsLine.wave.lyrics-lyricsContainer-LyricsLine-active .lyrics-karaoke-line .lyrics-karaoke-text-run-segment {
  animation: ivlyrics-kind-wave 920ms ease-in-out infinite;
  will-change: translate;
}

.lyrics-karaoke-part.wave .lyrics-karaoke-line.is-active .lyrics-karaoke-char:nth-child(2n),
.lyrics-karaoke-part.wave .lyrics-karaoke-line.is-active .lyrics-karaoke-text-run-segment:nth-child(2n),
.lyrics-lyricsContainer-LyricsLine.wave.lyrics-lyricsContainer-LyricsLine-active .lyrics-karaoke-line .lyrics-karaoke-char:nth-child(2n),
.lyrics-lyricsContainer-LyricsLine.wave.lyrics-lyricsContainer-LyricsLine-active .lyrics-karaoke-line .lyrics-karaoke-text-run-segment:nth-child(2n) {
  animation-delay: -120ms;
}

.lyrics-karaoke-part.wave .lyrics-karaoke-line.is-active .lyrics-karaoke-char:nth-child(3n),
.lyrics-karaoke-part.wave .lyrics-karaoke-line.is-active .lyrics-karaoke-text-run-segment:nth-child(3n),
.lyrics-lyricsContainer-LyricsLine.wave.lyrics-lyricsContainer-LyricsLine-active .lyrics-karaoke-line .lyrics-karaoke-char:nth-child(3n),
.lyrics-lyricsContainer-LyricsLine.wave.lyrics-lyricsContainer-LyricsLine-active .lyrics-karaoke-line .lyrics-karaoke-text-run-segment:nth-child(3n) {
  animation-delay: -240ms;
}

.lyrics-karaoke-part.sparkle .lyrics-karaoke-line.is-active .lyrics-karaoke-char,
.lyrics-karaoke-part.sparkle .lyrics-karaoke-line.is-active .lyrics-karaoke-text-run-segment,
.lyrics-lyricsContainer-LyricsLine.sparkle.lyrics-lyricsContainer-LyricsLine-active .lyrics-karaoke-line .lyrics-karaoke-char,
.lyrics-lyricsContainer-LyricsLine.sparkle.lyrics-lyricsContainer-LyricsLine-active .lyrics-karaoke-line .lyrics-karaoke-text-run-segment {
  animation: ivlyrics-kind-sparkle 1.18s ease-in-out infinite;
  will-change: filter, text-shadow;
}

.lyrics-karaoke-part.echo .lyrics-karaoke-line.is-active .lyrics-karaoke-char,
.lyrics-karaoke-part.echo .lyrics-karaoke-line.is-active .lyrics-karaoke-text-run-segment,
.lyrics-lyricsContainer-LyricsLine.echo.lyrics-lyricsContainer-LyricsLine-active .lyrics-karaoke-line .lyrics-karaoke-char,
.lyrics-lyricsContainer-LyricsLine.echo.lyrics-lyricsContainer-LyricsLine-active .lyrics-karaoke-line .lyrics-karaoke-text-run-segment {
  animation: ivlyrics-kind-echo 1.28s ease-in-out infinite;
  will-change: text-shadow;
}

.lyrics-karaoke-part.whisper .lyrics-karaoke-line.is-active,
.lyrics-lyricsContainer-LyricsLine.whisper.lyrics-lyricsContainer-LyricsLine-active .lyrics-karaoke-line {
  animation: ivlyrics-kind-whisper 1.45s ease-in-out infinite;
  will-change: opacity, filter, translate;
}

.lyrics-karaoke-part.bounce .lyrics-karaoke-line.is-active,
.lyrics-lyricsContainer-LyricsLine.bounce.lyrics-lyricsContainer-LyricsLine-active .lyrics-karaoke-line,
.lyrics-lyricsContainer-LyricsLine.bounce.lyrics-lyricsContainer-LyricsLine-active > p {
  animation: ivlyrics-kind-bounce 780ms cubic-bezier(0.2, 0.85, 0.24, 1) infinite;
  will-change: translate;
}

.lyrics-karaoke-part.sway .lyrics-karaoke-line.is-active,
.lyrics-lyricsContainer-LyricsLine.sway.lyrics-lyricsContainer-LyricsLine-active .lyrics-karaoke-line,
.lyrics-lyricsContainer-LyricsLine.sway.lyrics-lyricsContainer-LyricsLine-active > p {
  animation: ivlyrics-kind-sway 1.35s ease-in-out infinite;
  transform-origin: center bottom;
  will-change: translate, rotate;
}

.lyrics-karaoke-part.float .lyrics-karaoke-line.is-active,
.lyrics-lyricsContainer-LyricsLine.float.lyrics-lyricsContainer-LyricsLine-active .lyrics-karaoke-line,
.lyrics-lyricsContainer-LyricsLine.float.lyrics-lyricsContainer-LyricsLine-active > p {
  animation: ivlyrics-kind-float 1.65s ease-in-out infinite;
  transform-origin: center;
  will-change: translate, rotate;
}

.lyrics-karaoke-part.blur .lyrics-karaoke-line.is-active,
.lyrics-lyricsContainer-LyricsLine.blur.lyrics-lyricsContainer-LyricsLine-active .lyrics-karaoke-line,
.lyrics-lyricsContainer-LyricsLine.blur.lyrics-lyricsContainer-LyricsLine-active > p {
  animation: ivlyrics-kind-blur 1.5s ease-in-out infinite;
  will-change: filter, opacity;
}

.lyrics-karaoke-part.pop .lyrics-karaoke-line.is-active .lyrics-karaoke-char,
.lyrics-karaoke-part.pop .lyrics-karaoke-line.is-active .lyrics-karaoke-text-run-segment,
.lyrics-lyricsContainer-LyricsLine.pop.lyrics-lyricsContainer-LyricsLine-active .lyrics-karaoke-line .lyrics-karaoke-char,
.lyrics-lyricsContainer-LyricsLine.pop.lyrics-lyricsContainer-LyricsLine-active .lyrics-karaoke-line .lyrics-karaoke-text-run-segment {
  animation: ivlyrics-kind-pop 1.08s cubic-bezier(0.18, 0.9, 0.36, 1) infinite;
  transform-origin: center;
  will-change: scale, filter;
}

.lyrics-karaoke-part.glow .lyrics-karaoke-line.is-active .lyrics-karaoke-char,
.lyrics-karaoke-part.glow .lyrics-karaoke-line.is-active .lyrics-karaoke-text-run-segment,
.lyrics-lyricsContainer-LyricsLine.glow.lyrics-lyricsContainer-LyricsLine-active .lyrics-karaoke-line .lyrics-karaoke-char,
.lyrics-lyricsContainer-LyricsLine.glow.lyrics-lyricsContainer-LyricsLine-active .lyrics-karaoke-line .lyrics-karaoke-text-run-segment,
.lyrics-lyricsContainer-LyricsLine.glow.lyrics-lyricsContainer-LyricsLine-active > p {
  animation: ivlyrics-kind-glow 2.8s ease-in-out infinite;
  will-change: filter, text-shadow;
}

.lyrics-karaoke-part.glitch .lyrics-karaoke-line.is-active,
.lyrics-lyricsContainer-LyricsLine.glitch.lyrics-lyricsContainer-LyricsLine-active .lyrics-karaoke-line,
.lyrics-lyricsContainer-LyricsLine.glitch.lyrics-lyricsContainer-LyricsLine-active > p {
  animation: ivlyrics-kind-glitch 1.12s steps(1, end) infinite;
  will-change: translate, text-shadow;
}

.lyrics-karaoke-part.flicker .lyrics-karaoke-line.is-active,
.lyrics-lyricsContainer-LyricsLine.flicker.lyrics-lyricsContainer-LyricsLine-active .lyrics-karaoke-line,
.lyrics-lyricsContainer-LyricsLine.flicker.lyrics-lyricsContainer-LyricsLine-active > p {
  animation: ivlyrics-kind-flicker 1.22s steps(1, end) infinite;
  will-change: opacity, filter;
}

.lyrics-karaoke-part.text-effects-disabled,
.lyrics-karaoke-part.text-effects-disabled *,
.lyrics-lyricsContainer-LyricsLine.text-effects-disabled,
.lyrics-lyricsContainer-LyricsLine.text-effects-disabled * {
  animation: none !important;
}

.ivlyrics-sync-kind-preview {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.01em;
  transform-origin: center;
  will-change: transform, opacity, filter, text-shadow;
}

.ivlyrics-sync-effect-card,
.ivlyrics-sync-effect-card:focus,
.ivlyrics-sync-effect-card:focus-visible {
  outline: none;
}

.ivlyrics-sync-kind-preview-char {
  display: inline-block;
  transform-origin: center;
  will-change: transform, opacity, filter, text-shadow;
}

.ivlyrics-sync-kind-preview-char.effect {
  animation: ivlyrics-kind-effect-tremble 180ms steps(2, end) infinite;
}

.ivlyrics-sync-kind-preview-char.adlib {
  animation: ivlyrics-kind-adlib-float 1.05s ease-in-out infinite;
}

.ivlyrics-sync-kind-preview-char.pulse {
  animation: ivlyrics-kind-pulse 940ms ease-in-out infinite;
}

.ivlyrics-sync-kind-preview-char.wave {
  animation: ivlyrics-kind-wave 920ms ease-in-out infinite;
}

.ivlyrics-sync-kind-preview-char.sparkle {
  animation: ivlyrics-kind-sparkle 1.18s ease-in-out infinite;
}

.ivlyrics-sync-kind-preview-char.echo {
  animation: ivlyrics-kind-echo 1.28s ease-in-out infinite;
}

.ivlyrics-sync-kind-preview-char.whisper {
  animation: ivlyrics-kind-whisper 1.45s ease-in-out infinite;
}

.ivlyrics-sync-kind-preview-char.bounce {
  animation: ivlyrics-kind-bounce 780ms cubic-bezier(0.2, 0.85, 0.24, 1) infinite;
}

.ivlyrics-sync-kind-preview-char.sway {
  animation: ivlyrics-kind-sway 1.35s ease-in-out infinite;
}

.ivlyrics-sync-kind-preview-char.glow {
  animation: ivlyrics-kind-glow 2.8s ease-in-out infinite;
}

.ivlyrics-sync-kind-preview-char.glitch {
  animation: ivlyrics-kind-glitch 1.12s steps(1, end) infinite;
}

.ivlyrics-sync-kind-preview-char.flicker {
  animation: ivlyrics-kind-flicker 1.22s steps(1, end) infinite;
}

.ivlyrics-sync-kind-preview-char.float {
  animation: ivlyrics-kind-float 1.65s ease-in-out infinite;
}

.ivlyrics-sync-kind-preview-char.blur {
  animation: ivlyrics-kind-blur 1.5s ease-in-out infinite;
}

.ivlyrics-sync-kind-preview-char.pop {
  animation: ivlyrics-kind-pop 1.08s cubic-bezier(0.18, 0.9, 0.36, 1) infinite;
}

.ivlyrics-sync-kind-preview-char:nth-child(2n) {
  animation-delay: -110ms;
}

.ivlyrics-sync-kind-preview-char:nth-child(3n) {
  animation-delay: -220ms;
}

.lyrics-karaoke-word {
  display: inline-block;
  white-space: nowrap;
  vertical-align: baseline;
  overflow: visible;
}

.lyrics-karaoke-text-run-segment {
  display: inline-block;
  white-space: pre;
  padding-inline: var(--karaoke-glyph-bleed-x, 0.16em);
  margin-inline: calc(var(--karaoke-glyph-bleed-x, 0.16em) * -1);
  color: var(--lyrics-color-inactive);
  filter: none;
  text-shadow: none;
  vertical-align: baseline;
  unicode-bidi: isolate;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

.lyrics-karaoke-text-run-segment.is-bouncing {
  transform: translate3d(0, var(--karaoke-bounce-y, 0), 0) scale(var(--karaoke-bounce-scale, 1));
  transition: transform 150ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

/* done segments stay on the transparent + background-clip:text paint path so the
   glyph rasterization matches the active segment exactly — without this, the
   active→done transition visibly thickens because the engine switches text paths.
   background-color is a single solid value, so there's no per-frame interpolation. */
.lyrics-karaoke-text-run-segment--done {
  color: transparent;
  background-color: var(--lyrics-color-active);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.lyrics-karaoke-text-run-segment--active {
  color: transparent;
  background-image: linear-gradient(var(--karaoke-gradient-direction, to right),
      var(--lyrics-color-active) 0,
      var(--lyrics-color-active) var(--karaoke-char-fill-soft-start, var(--karaoke-char-fill, 0%)),
      var(--lyrics-color-inactive) var(--karaoke-char-fill-soft-end, var(--karaoke-char-fill, 0%)),
      var(--lyrics-color-inactive) 100%);
  background-repeat: no-repeat;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.lyrics-karaoke-text-run-space {
  white-space: pre-wrap;
}

.lyrics-karaoke-line.is-active .lyrics-karaoke-text-run-segment--active {
  filter: none;
}

.lyrics-karaoke-char {
  display: inline-block;
  white-space: pre-wrap;
  padding-inline: var(--karaoke-glyph-bleed-x, 0.16em);
  margin-inline: calc(var(--karaoke-glyph-bleed-x, 0.16em) * -1);
  color: var(--lyrics-color-inactive);
  filter: none;
  text-shadow: none;
  vertical-align: baseline;
  overflow: visible;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

.lyrics-karaoke-char.is-bouncing {
  transform: translate3d(0, var(--karaoke-bounce-y, 0), 0) scale(var(--karaoke-bounce-scale, 1));
  transition: transform 150ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

/* Mirror of --done segment: keep the same paint path as --active to prevent
   the active→done thickening. Solid background-color, no gradient interpolation. */
.lyrics-karaoke-char--done {
  color: transparent;
  background-color: var(--lyrics-color-active);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.lyrics-karaoke-char--active {
  color: transparent;
  background-image: linear-gradient(var(--karaoke-gradient-direction, to right),
      var(--lyrics-color-active) 0,
      var(--lyrics-color-active) var(--karaoke-char-fill-soft-start, var(--karaoke-char-fill, 0%)),
      var(--lyrics-color-inactive) var(--karaoke-char-fill-soft-end, var(--karaoke-char-fill, 0%)),
      var(--lyrics-color-inactive) 100%);
  background-repeat: no-repeat;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.lyrics-karaoke-line.is-active .lyrics-karaoke-char--active {
  filter: none;
}

/* Stay on the transparent + background-clip:text paint path even after the line
   completes. Falling back to a solid color here would re-rasterize every glyph
   in the line at once when is-complete is added, making the whole line visibly
   thicken/snap. background-color is solid so there's no gradient cost. */
.lyrics-karaoke-line.is-complete .lyrics-karaoke-char,
.lyrics-karaoke-line.is-complete .lyrics-karaoke-text-run-segment {
  color: transparent;
  background-image: none;
  background-color: var(--lyrics-color-active);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.lyrics-karaoke-ruby {
  ruby-position: over;
  overflow: visible;
  padding-inline: var(--karaoke-glyph-bleed-x, 0.16em);
  margin-inline: calc(var(--karaoke-glyph-bleed-x, 0.16em) * -1);
}

/* Keep pending rt on the same transparent + background-clip:text path the active
   and done rt rules use. Without this, the rt switches paint paths on first activation
   (solid color → text-masked) and the glyph briefly re-rasterizes — visible as the
   furigana suddenly darkening / sharpening right when the char starts being sung.
   No opacity fade here: background-clip:text already softens the glyph (no sub-pixel
   AA on transparent fill), so adding 0.8 on top read as semi-transparent gray. The
   inactive color's own alpha applies as the user configures it. */
.lyrics-karaoke-ruby rt {
  color: transparent;
  background-color: var(--lyrics-color-inactive);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  user-select: none;
  white-space: nowrap;
  text-shadow: none;
}

/* Same trick on furigana rt: keep transparent + background-clip:text so the
   ruby text doesn't thicken when crossing into done state. */
.lyrics-karaoke-ruby--done rt {
  color: transparent;
  background-color: var(--lyrics-color-active);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.lyrics-karaoke-ruby--active rt {
  color: transparent;
  background-image: linear-gradient(to right,
      var(--lyrics-color-active) 0,
      var(--lyrics-color-active) var(--karaoke-char-fill-soft-start, var(--karaoke-char-fill, 0%)),
      var(--lyrics-color-inactive) var(--karaoke-char-fill-soft-end, var(--karaoke-char-fill, 0%)),
      var(--lyrics-color-inactive) 100%);
  background-repeat: no-repeat;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.lyrics-lyricsContainer-LyricsLine a {
  background-color: transparent;
  transition: background-color 0.25s cubic-bezier(0, 0, 0, 1);
}

.lyrics-lyricsContainer-LyricsLine a.fetched {
  background-color: var(--lyrics-highlight-background);
}

.lyrics-lyricsContainer-LyricsLine a,
.lyrics-lyricsContainer-LyricsLine a:hover {
  text-decoration: none !important;
}

.lyrics-lyricsContainer-LyricsLine a:hover {
  border-bottom: 2px solid var(--lyrics-color-active);
}

.lyrics-Searchbar {
  position: sticky;
  width: 300px;
  height: 40px;
  bottom: 10px;
  display: flex;
  background-color: var(--lyrics-color-active) !important;
  color: var(--lyrics-highlight-background);
  margin-left: 10px;
  border-radius: 3px;
  box-shadow: 0 10px 15px 5px rgb(0, 0, 0, 0.2);
}

.lyrics-Searchbar input {
  width: 300px;
  height: 40px;
  bottom: 10px;
  border: 0;
  color: var(--lyrics-highlight-background) !important;
  padding: 0 36px;
}

.lyrics-Searchbar svg {
  position: absolute;
  left: 0;
  height: 40px;
  margin-left: 10px;
}

.lyrics-Searchbar span {
  position: relative;
  right: 0;
  line-height: 40px;
  margin-right: 10px;
  font-weight: 400;
  font-size: 16px;
  letter-spacing: 0.2em;
}

.lyrics-Searchbar-highlight {
  position: fixed;
  width: 100%;
  height: var(--search-highlight-height);
  left: 0;
  top: var(--search-highlight-top);
  background-color: var(--lyrics-highlight-background);
  opacity: 0.5;
  pointer-events: none;
}

.lyrics-versionSelector {
  max-width: 500px;
  border-radius: 4px;
  display: inline-block;
  position: relative;
  cursor: pointer;
  box-shadow: 0 10px 15px 5px rgb(0, 0, 0, 0.2);
  background-color: var(--lyrics-highlight-background);
  margin-bottom: 75px;
}

.lyrics-versionSelector select {
  border: 0;
  border-radius: 4px;
  max-width: 500px;
  height: 42px;
  padding: 0 30px 0 12px;
  cursor: pointer;
  appearance: none;
  font-size: 18px;
  background-color: var(--lyrics-color-active);
  color: var(--lyrics-highlight-background);
}

.lyrics-versionSelector option {
  background-color: var(--lyrics-color-active);
}

.lyrics-versionSelector svg {
  position: absolute;
  height: 42px;
  right: 10px;
  pointer-events: none;
  fill: var(--lyrics-highlight-background);
}

/** Setting menu */
.lyrics-tooltip-wrapper .setting-row::after {
  content: "";
  display: table;
  clear: both;
}

.lyrics-tooltip-wrapper .setting-row {
  border-radius: 14px;
  transition:
    transform var(--iv-motion-duration-fast) var(--iv-motion-ease-emphasis),
    background var(--iv-motion-duration-medium) var(--iv-motion-ease-standard),
    box-shadow var(--iv-motion-duration-medium) var(--iv-motion-ease-standard);
}

.lyrics-tooltip-wrapper .setting-row:hover {
  background: rgba(255, 255, 255, 0.03);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

.lyrics-tooltip-wrapper .setting-row .col {
  padding: 16px 0 4px;
  align-items: center;
  transition:
    transform var(--iv-motion-duration-fast) var(--iv-motion-ease-emphasis),
    opacity var(--iv-motion-duration-medium) var(--iv-motion-ease-standard);
}

.lyrics-tooltip-wrapper .setting-row .col.description {
  float: left;
  padding-right: 15px;
  cursor: default;
}

.lyrics-tooltip-wrapper .setting-row .col.action {
  float: right;
  display: flex;
  justify-content: flex-end;
  align-items: center;
}

.lyrics-tooltip-wrapper .setting-row:hover .col.description {
  transform: translateX(2px);
}

.lyrics-tooltip-wrapper .setting-row:hover .col.action {
  transform: translateX(-2px);
}

.lyrics-tooltip-wrapper button.switch {
  align-items: center;
  border: 0px;
  border-radius: 50%;
  background-color: rgba(var(--spice-rgb-shadow), 0.7);
  color: var(--spice-text);
  cursor: pointer;
  margin-inline-start: 12px;
  padding: 8px;
  width: 32px;
  height: 32px;
}

.lyrics-tooltip-wrapper button.switch.disabled,
.lyrics-tooltip-wrapper button.switch[disabled] {
  color: rgba(var(--spice-rgb-text), 0.3);
}

.lyrics-tooltip-wrapper button.switch.small {
  width: 22px;
  height: 22px;
  padding: 3px;
}

.lyrics-tooltip-wrapper input {
  width: 100%;
  padding: 0 5px;
  height: 32px;
  border: 0;
  color: var(--spice-text);
  background-color: initial;
  border-bottom: 1px solid var(--spice-text);
}

.lyrics-tooltip-wrapper .col.action .adjust-value {
  margin-inline-start: 12px;
  min-width: 22px;
  text-align: center;
}

.lyrics-tooltip-wrapper .col.action span {
  font-size: 14px;
  opacity: 0.8;
}

.lyrics-tooltip-wrapper .col.action .btn {
  font-weight: 700;
  background-color: transparent;
  border-radius: 500px;
  transition-duration: 33ms;
  transition-property: background-color, border-color, color, box-shadow, filter,
    transform;
  padding-inline: 15px;
  border: 1px solid #727272;
  color: var(--spice-text);
  min-block-size: 32px;
  cursor: pointer;
}

.lyrics-tooltip-wrapper .col.action .btn:hover {
  transform: scale(1.04);
  border-color: var(--spice-text);
}

.lyrics-tooltip-wrapper .col.action .btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.lyrics-tooltip-wrapper .col.action .main-dropDown-dropDown,
.lyrics-tooltip-wrapper .col.action input {
  width: 150px;
}

#lyrics-fullscreen-container {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  height: 100dvh;
  cursor: default;
  left: 0;
  top: 0;
  z-index: var(--iv-layer-fullscreen);
  overflow: hidden;
}

/* 전체화면에서 배경 요소 오버플로우 방지 */
#lyrics-fullscreen-container #ivLyrics-gradient-background {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

#lyrics-fullscreen-container .lyrics-lyricsContainer-LyricsBackground {
  position: absolute;
  overflow: hidden;
}

#lyrics-fullscreen-container .lyrics-lyricsContainer-LyricsContainer {
  height: 100vh;
  margin-bottom: 0;
  margin-top: 0;
  overflow-y: auto;
}

#lyrics-fullscreen-container .lyrics-lyricsContainer-LyricsContainer::-webkit-scrollbar {
  background-color: transparent;
  /* transparent scrollbar track */
}

.lyrics-lyricsContainer-LyricsContainer.fad-enabled {
  height: 100vh;
  margin-top: 0;
  margin-bottom: 0;
  overflow-y: scroll;
}

.lyrics-lyricsContainer-LyricsContainer.fad-enabled .lyrics-lyricsContainer-LyricsLine {
  margin-left: 100px;
  margin-right: 100px;
}

.lyrics-lyricsContainer-LyricsContainer.fad-enabled .lyrics-lyricsContainer-LyricsBackground,
.lyrics-lyricsContainer-LyricsContainer.fad-enabled .lyrics-lyricsContainer-Provider {
  display: none;
}

.lyrics-lyricsContainer-LyricsContainer.fad-enabled .lyrics-lyricsContainer-SyncedLyricsPage {
  width: 100%;
}

.lyrics-lyricsContainer-LyricsContainer.fad-enabled .lyrics-config-button-container {
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1), transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  transform: translateX(10px) scale(0.95);
}

.lyrics-lyricsContainer-LyricsContainer.fad-enabled:hover .lyrics-config-button-container {
  opacity: 1;
  pointer-events: auto;
  transform: translateX(0) scale(1);
}

.lyrics-idling-indicator {
  display: inline-block;
  opacity: 1;
  transition: opacity 0.2s cubic-bezier(0, 0, 0.58, 1);
}

.lyrics-idling-indicator-hidden {
  opacity: 0;
}

.lyrics-idling-indicator__circle {
  background-color: var(--lyrics-color-active);
  border-radius: 50%;
  display: inline-block;
  opacity: 0.5;
  margin-right: calc(var(--lyrics-font-size) / 4);

  transform-origin: center;
  transition-timing-function: linear;
  transition-duration: var(--indicator-delay);
  transition-property: transform, opacity;
  height: var(--lyrics-font-size);
  width: var(--lyrics-font-size);
  transform: scale(0.5);
}

.lyrics-idling-indicator__circle.active {
  opacity: 1;
  transform: scale(0.7);
}

@keyframes lyricsBreakBarPulse {
  0%,
  100% {
    transform: scaleY(0.32);
    opacity: 0.42;
  }

  50% {
    transform: scaleY(1);
    opacity: 1;
  }
}

@keyframes lyricsBreakDotWave {
  0%,
  100% {
    transform: translateY(0.15em) scale(0.7);
    opacity: 0.38;
  }

  50% {
    transform: translateY(-0.15em) scale(1);
    opacity: 1;
  }
}

@keyframes lyricsBreakRingBreathe {
  0% {
    transform: scale(0.35);
    opacity: 0;
  }

  45% {
    opacity: 0.9;
  }

  100% {
    transform: scale(1.3);
    opacity: 0;
  }
}

@keyframes lyricsBreakOrbitOne {
  from {
    transform: rotate(0deg) translateX(0.42em);
  }

  to {
    transform: rotate(360deg) translateX(0.42em);
  }
}

@keyframes lyricsBreakOrbitTwo {
  from {
    transform: rotate(120deg) translateX(0.42em);
  }

  to {
    transform: rotate(480deg) translateX(0.42em);
  }
}

@keyframes lyricsBreakOrbitThree {
  from {
    transform: rotate(240deg) translateX(0.42em);
  }

  to {
    transform: rotate(600deg) translateX(0.42em);
  }
}

@keyframes lyricsBreakDiamondStep {
  0%,
  100% {
    opacity: 0.35;
    transform: rotate(45deg) scale(0.72);
  }

  50% {
    opacity: 1;
    transform: rotate(45deg) scale(1.05);
  }
}

@keyframes lyricsBreakScanMove {
  from {
    transform: translateX(0);
  }

  to {
    transform: translateX(2em);
  }
}

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

@keyframes lyricsBreakSignalFlow {
  0% {
    opacity: 0.48;
    stroke-dashoffset: 0;
  }

  45% {
    opacity: 1;
  }

  100% {
    opacity: 0.48;
    stroke-dashoffset: -48;
  }
}

@keyframes lyricsBreakDotPulse {
  0% {
    transform: scale(0.25);
    opacity: 0.8;
  }

  100% {
    transform: scale(1.75);
    opacity: 0;
  }
}

@keyframes lyricsBreakStackShift {
  0%,
  100% {
    opacity: 0.38;
    transform: scaleX(0.6);
  }

  50% {
    opacity: 1;
    transform: scaleX(1);
  }
}

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

@keyframes lyricsBreakSplitBar {
  0%,
  100% {
    transform: scaleY(0.24);
    opacity: 0.36;
  }

  50% {
    transform: scaleY(1);
    opacity: 1;
  }
}

@keyframes lyricsBreakMetronome {
  from {
    transform: rotate(-24deg);
  }

  to {
    transform: rotate(24deg);
  }
}

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

@keyframes lyricsBreakBeatHit {
  0% {
    transform: scale(0.5);
    opacity: 0.5;
  }

  9% {
    transform: scale(1.28);
    opacity: 1;
  }

  45% {
    transform: scale(0.82);
    opacity: 0.7;
  }

  100% {
    transform: scale(0.5);
    opacity: 0.5;
  }
}

@keyframes lyricsBreakTrianglePulse {
  0%,
  100% {
    transform: scale(0.7);
    opacity: 0.45;
  }

  50% {
    transform: scale(1.1);
    opacity: 1;
  }
}

@keyframes lyricsBreakMorphShape {
  0%,
  100% {
    border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%;
    transform: rotate(0deg);
  }

  25% {
    border-radius: 70% 30% 50% 50% / 30% 70% 30% 70%;
    transform: rotate(90deg);
  }

  50% {
    border-radius: 50% 50% 30% 70% / 70% 30% 70% 30%;
    transform: rotate(180deg);
  }

  75% {
    border-radius: 30% 70% 70% 30% / 50% 50% 50% 50%;
    transform: rotate(270deg);
  }
}

@keyframes lyricsBreakStringPluck {
  0% {
    transform: translateY(0);
    opacity: 0.4;
  }

  4% {
    transform: translateY(-0.08em);
    opacity: 1;
  }

  9% {
    transform: translateY(0.06em);
  }

  14% {
    transform: translateY(-0.04em);
  }

  19% {
    transform: translateY(0.03em);
    opacity: 0.75;
  }

  28%,
  100% {
    transform: translateY(0);
    opacity: 0.4;
  }
}

@keyframes lyricsBreakKeyPress {
  0%,
  35%,
  100% {
    transform: translateY(0);
    opacity: 0.55;
  }

  5% {
    transform: translateY(0.12em);
    opacity: 1;
  }

  20% {
    transform: translateY(0);
    opacity: 0.85;
  }
}

@keyframes lyricsBreakBloomPulse {
  0%,
  100% {
    opacity: 0.25;
  }

  50% {
    opacity: 1;
  }
}

@keyframes lyricsBreakSpeakerRing {
  0%,
  100% {
    transform: scale(0.9);
    opacity: 0.4;
  }

  18% {
    transform: scale(1.05);
    opacity: 1;
  }
}

@keyframes lyricsBreakSpeakerCenter {
  0%,
  100% {
    transform: scale(0.68);
  }

  18% {
    transform: scale(1.2);
  }
}

@keyframes lyricsBreakCrossfadeBreathe {
  0%,
  100% {
    transform: scale(0.55);
  }

  50% {
    transform: scale(1);
  }
}

.lyrics-break-indicator {
  display: inline-flex;
  align-items: center;
  gap: 0.3em;
  max-width: 100%;
  color: currentColor;
  vertical-align: middle;
  white-space: nowrap;
}

.lyrics-lyricsContainer-LyricsLine-interludeMain {
  display: flex;
  align-items: center;
  min-height: 1.2em;
}

.lyrics-break-icon {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.16em;
  height: 1.16em;
  min-width: 18px;
  min-height: 18px;
  flex: 0 0 auto;
  overflow: visible;
  color: currentColor;
}

.lyrics-break-icon span,
.lyrics-break-icon svg {
  flex: 0 0 auto;
}

.lyrics-break-label {
  font-family: var(--break-label-font-family, var(--lyrics-original-font-family, inherit));
  font-size: var(--break-label-font-size, 20px);
  font-weight: var(--break-label-font-weight, 200);
  line-height: 1;
  letter-spacing: 0;
  opacity: var(--break-label-opacity, 0.65);
}

.lyrics-break-icon-equalizer,
.lyrics-break-icon-dotWave,
.lyrics-break-icon-diamonds,
.lyrics-break-icon-splitBars,
.lyrics-break-icon-reels,
.lyrics-break-icon-piano {
  display: inline-flex;
}

.lyrics-break-icon-equalizer,
.lyrics-break-icon-splitBars {
  align-items: center;
  gap: 0.09em;
}

.lyrics-break-icon-equalizer span,
.lyrics-break-icon-splitBars span {
  display: block;
  width: 0.11em;
  min-width: 2px;
  height: 0.76em;
  border-radius: 999px;
  background: currentColor;
  transform: scaleY(0.4);
  transform-origin: center;
}

.lyrics-break-icon-equalizer span {
  animation: lyricsBreakBarPulse var(--break-duration, 1100ms) ease-in-out infinite;
}

.lyrics-break-icon-equalizer span:nth-child(2) {
  animation-delay: calc(var(--break-duration, 1100ms) * -0.18);
}

.lyrics-break-icon-equalizer span:nth-child(3) {
  animation-delay: calc(var(--break-duration, 1100ms) * -0.36);
}

.lyrics-break-icon-equalizer span:nth-child(4) {
  animation-delay: calc(var(--break-duration, 1100ms) * -0.54);
}

.lyrics-break-icon-dotWave {
  align-items: center;
  gap: 0.1em;
}

.lyrics-break-icon-dotWave span {
  width: 0.14em;
  height: 0.14em;
  border-radius: 50%;
  background: currentColor;
  animation: lyricsBreakDotWave var(--break-duration-fast, 790ms) ease-in-out infinite;
}

.lyrics-break-icon-dotWave span:nth-child(2) {
  animation-delay: calc(var(--break-duration-fast, 790ms) * 0.1);
}

.lyrics-break-icon-dotWave span:nth-child(3) {
  animation-delay: calc(var(--break-duration-fast, 790ms) * 0.2);
}

.lyrics-break-icon-dotWave span:nth-child(4) {
  animation-delay: calc(var(--break-duration-fast, 790ms) * 0.3);
}

.lyrics-break-icon-dotWave span:nth-child(5) {
  animation-delay: calc(var(--break-duration-fast, 790ms) * 0.4);
}

.lyrics-break-icon-ripples::before,
.lyrics-break-icon-ripples::after,
.lyrics-break-icon-ripples span {
  content: "";
  position: absolute;
  inset: 0.28em;
  border: 0.055em solid currentColor;
  border-radius: 50%;
  animation: lyricsBreakRingBreathe var(--break-duration-slow, 1815ms) ease-in-out infinite;
}

.lyrics-break-icon-ripples::after {
  animation-delay: calc(var(--break-duration-slow, 1815ms) * -0.33);
}

.lyrics-break-icon-ripples span {
  animation-delay: calc(var(--break-duration-slow, 1815ms) * -0.66);
}

.lyrics-break-icon-orbit::before,
.lyrics-break-icon-orbit::after,
.lyrics-break-icon-orbit span {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0.14em;
  height: 0.14em;
  margin: -0.07em;
  border-radius: 50%;
  background: currentColor;
  transform-origin: center;
}

.lyrics-break-icon-orbit::before {
  animation: lyricsBreakOrbitOne var(--break-duration-slow, 1815ms) linear infinite;
}

.lyrics-break-icon-orbit::after {
  animation: lyricsBreakOrbitTwo var(--break-duration-slow, 1815ms) linear infinite;
}

.lyrics-break-icon-orbit span {
  animation: lyricsBreakOrbitThree var(--break-duration-slow, 1815ms) linear infinite;
}

.lyrics-break-icon-diamonds {
  align-items: center;
  gap: 0.17em;
}

.lyrics-break-icon-diamonds span {
  width: 0.2em;
  height: 0.2em;
  background: currentColor;
  transform: rotate(45deg) scale(0.72);
  animation: lyricsBreakDiamondStep var(--break-duration, 1100ms) ease-in-out infinite;
}

.lyrics-break-icon-diamonds span:nth-child(2) {
  animation-delay: calc(var(--break-duration, 1100ms) * 0.13);
}

.lyrics-break-icon-diamonds span:nth-child(3) {
  animation-delay: calc(var(--break-duration, 1100ms) * 0.25);
}

.lyrics-break-icon-scan {
  width: 1.22em;
  height: 0.5em;
  border-left: 0.06em solid currentColor;
  border-right: 0.06em solid currentColor;
  overflow: hidden;
}

.lyrics-break-icon-scan::before {
  content: "";
  position: absolute;
  top: calc(50% - 0.05em);
  left: -0.76em;
  width: 0.72em;
  height: 0.1em;
  border-radius: 999px;
  background: currentColor;
  box-shadow: 0.32em 0 0 currentColor, 0.64em 0 0 currentColor;
  animation: lyricsBreakScanMove var(--break-duration, 1100ms) ease-in-out infinite;
}

.lyrics-break-icon-arcs::before,
.lyrics-break-icon-arcs::after {
  content: "";
  position: absolute;
  inset: 0.16em;
  border: 0.07em solid transparent;
  border-top-color: currentColor;
  border-right-color: currentColor;
  border-radius: 50%;
  animation: lyricsBreakArcSpin var(--break-duration-slow, 1815ms) linear infinite;
}

.lyrics-break-icon-arcs::after {
  inset: 0.34em;
  border-width: 0.055em;
  border-top-color: transparent;
  border-right-color: currentColor;
  border-bottom-color: currentColor;
  animation-direction: reverse;
  animation-duration: var(--break-duration, 1100ms);
}

.lyrics-break-icon-signal {
  width: 1.32em;
  height: 0.52em;
  overflow: visible;
}

.lyrics-break-icon-signal svg {
  display: block;
  width: 1.32em;
  height: 0.52em;
  fill: none;
  stroke: currentColor;
  stroke-width: 4;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.lyrics-break-icon-signal path {
  stroke-dasharray: 18 14;
  animation: lyricsBreakSignalFlow var(--break-duration-slow, 1815ms) linear infinite;
}

.lyrics-break-icon-pulseDot::before,
.lyrics-break-icon-pulseDot::after {
  content: "";
  position: absolute;
  inset: 0.4em;
  border-radius: 50%;
  background: currentColor;
}

.lyrics-break-icon-pulseDot::after {
  inset: 0.26em;
  background: transparent;
  border: 0.04em solid currentColor;
  animation: lyricsBreakDotPulse var(--break-duration, 1100ms) ease-out infinite;
}

.lyrics-break-icon-stack {
  display: grid;
  place-items: center;
  gap: 0.08em;
}

.lyrics-break-icon-stack span {
  display: block;
  width: 0.78em;
  height: 0.09em;
  border-radius: 999px;
  background: currentColor;
  animation: lyricsBreakStackShift var(--break-duration, 1100ms) ease-in-out infinite;
}

.lyrics-break-icon-stack span:nth-child(2) {
  width: 0.52em;
  animation-delay: calc(var(--break-duration, 1100ms) * -0.17);
}

.lyrics-break-icon-stack span:nth-child(3) {
  width: 0.92em;
  animation-delay: calc(var(--break-duration, 1100ms) * -0.34);
}

.lyrics-break-icon-spark {
  animation: lyricsBreakSparkRotate var(--break-duration-xslow, 4180ms) linear infinite;
}

.lyrics-break-icon-spark span {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0.1em;
  height: 0.1em;
  margin: -0.05em;
  border-radius: 50%;
  background: currentColor;
  transform: rotate(calc(var(--i) * 45deg)) translateX(0.42em) scale(calc(0.45 + var(--i) * 0.06));
  opacity: calc(0.22 + var(--i) * 0.08);
}

.lyrics-break-icon-splitBars span {
  animation: lyricsBreakSplitBar var(--break-duration, 1100ms) ease-in-out infinite;
}

.lyrics-break-icon-splitBars span:nth-child(1),
.lyrics-break-icon-splitBars span:nth-child(4) {
  animation-delay: calc(var(--break-duration, 1100ms) * -0.22);
}

.lyrics-break-icon-splitBars span:nth-child(2),
.lyrics-break-icon-splitBars span:nth-child(3) {
  animation-delay: calc(var(--break-duration, 1100ms) * -0.06);
}

.lyrics-break-icon-metronome::before {
  content: "";
  position: absolute;
  left: calc(50% - 0.05em);
  bottom: 0.2em;
  width: 0.1em;
  height: 0.76em;
  border-radius: 999px;
  background: currentColor;
  transform-origin: bottom center;
  animation: lyricsBreakMetronome var(--break-duration-fast, 790ms) ease-in-out infinite alternate;
}

.lyrics-break-icon-metronome::after {
  content: "";
  position: absolute;
  left: calc(50% - 0.25em);
  bottom: 0.14em;
  width: 0.5em;
  height: 0.07em;
  border-radius: 999px;
  background: currentColor;
  opacity: 0.55;
}

.lyrics-break-icon-vinyl {
  border: 0.04em solid currentColor;
  border-radius: 50%;
  animation: lyricsBreakSpin var(--break-duration-xslow, 4180ms) linear infinite;
}

.lyrics-break-icon-vinyl::before {
  content: "";
  position: absolute;
  inset: 0.22em;
  border: 0.025em solid currentColor;
  border-radius: 50%;
  opacity: 0.45;
}

.lyrics-break-icon-vinyl::after {
  content: "";
  position: absolute;
  inset: 0.47em;
  border-radius: 50%;
  background: currentColor;
}

.lyrics-break-icon-vinyl > span {
  position: absolute;
  top: 0.08em;
  left: 50%;
  width: 0.08em;
  height: 0.08em;
  margin-left: -0.04em;
  border-radius: 50%;
  background: currentColor;
}

.lyrics-break-icon-beat {
  width: 0.68em;
  height: 0.68em;
  border-radius: 50%;
  background: currentColor;
  animation: lyricsBreakBeatHit var(--break-duration-fast, 790ms) cubic-bezier(0.18, 0.9, 0.36, 1) infinite;
}

.lyrics-break-icon-reels {
  align-items: center;
  gap: 0.2em;
}

.lyrics-break-icon-reels span {
  position: relative;
  width: 0.42em;
  height: 0.42em;
  border: 0.04em solid currentColor;
  border-radius: 50%;
  animation: lyricsBreakSpin var(--break-duration-slow, 1815ms) linear infinite;
}

.lyrics-break-icon-reels span:nth-child(2) {
  animation-direction: reverse;
}

.lyrics-break-icon-reels span::before,
.lyrics-break-icon-reels span::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  background: currentColor;
}

.lyrics-break-icon-reels span::before {
  width: 0.3em;
  height: 0.035em;
  margin: -0.0175em 0 0 -0.15em;
}

.lyrics-break-icon-reels span::after {
  width: 0.035em;
  height: 0.3em;
  margin: -0.15em 0 0 -0.0175em;
}

.lyrics-break-icon-triangle::before {
  content: "";
  width: 0;
  height: 0;
  border-left: 0.56em solid currentColor;
  border-top: 0.34em solid transparent;
  border-bottom: 0.34em solid transparent;
  animation: lyricsBreakTrianglePulse var(--break-duration, 1100ms) ease-in-out infinite;
}

.lyrics-break-icon-morph {
  width: 0.88em;
  height: 0.88em;
  background: currentColor;
  border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%;
  animation: lyricsBreakMorphShape var(--break-duration-xslow, 4180ms) ease-in-out infinite;
}

.lyrics-break-icon-strings {
  display: flex;
  flex-direction: column;
  gap: 0.13em;
}

.lyrics-break-icon-strings span {
  display: block;
  width: 1em;
  height: 0.035em;
  border-radius: 999px;
  background: currentColor;
  animation: lyricsBreakStringPluck var(--break-duration-slow, 1815ms) ease-out infinite;
}

.lyrics-break-icon-strings span:nth-child(2) {
  animation-delay: calc(var(--break-duration-slow, 1815ms) * 0.05);
}

.lyrics-break-icon-strings span:nth-child(3) {
  animation-delay: calc(var(--break-duration-slow, 1815ms) * 0.1);
}

.lyrics-break-icon-strings span:nth-child(4) {
  animation-delay: calc(var(--break-duration-slow, 1815ms) * 0.15);
}

.lyrics-break-icon-piano {
  align-items: center;
  gap: 0.08em;
}

.lyrics-break-icon-piano span {
  display: block;
  width: 0.12em;
  height: 0.76em;
  border-radius: 0 0 0.04em 0.04em;
  background: currentColor;
  animation: lyricsBreakKeyPress var(--break-duration-slow, 1815ms) ease-in-out infinite;
}

.lyrics-break-icon-piano span:nth-child(2) {
  animation-delay: calc(var(--break-duration-slow, 1815ms) * 0.45);
}

.lyrics-break-icon-piano span:nth-child(3) {
  animation-delay: calc(var(--break-duration-slow, 1815ms) * 0.14);
}

.lyrics-break-icon-piano span:nth-child(4) {
  animation-delay: calc(var(--break-duration-slow, 1815ms) * 0.68);
}

.lyrics-break-icon-piano span:nth-child(5) {
  animation-delay: calc(var(--break-duration-slow, 1815ms) * 0.28);
}

.lyrics-break-icon-bloom span {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0.2em;
  height: 0.2em;
  margin: -0.1em;
  border-radius: 50%;
  background: currentColor;
  animation: lyricsBreakBloomPulse var(--break-duration-slow, 1815ms) ease-in-out infinite;
}

.lyrics-break-icon-bloom span:nth-child(1) {
  transform: translateX(-0.32em);
}

.lyrics-break-icon-bloom span:nth-child(2) {
  transform: translateX(0.32em);
  animation-delay: calc(var(--break-duration-slow, 1815ms) * 0.25);
}

.lyrics-break-icon-bloom span:nth-child(3) {
  transform: translateY(-0.32em);
  animation-delay: calc(var(--break-duration-slow, 1815ms) * 0.13);
}

.lyrics-break-icon-bloom span:nth-child(4) {
  transform: translateY(0.32em);
  animation-delay: calc(var(--break-duration-slow, 1815ms) * 0.38);
}

.lyrics-break-icon-speaker {
  border: 0.04em solid currentColor;
  border-radius: 50%;
}

.lyrics-break-icon-speaker::before {
  content: "";
  position: absolute;
  inset: 0.22em;
  border: 0.04em solid currentColor;
  border-radius: 50%;
  animation: lyricsBreakSpeakerRing var(--break-duration-fast, 790ms) cubic-bezier(0.2, 0.85, 0.4, 1) infinite;
}

.lyrics-break-icon-speaker::after {
  content: "";
  position: absolute;
  inset: 0.44em;
  border-radius: 50%;
  background: currentColor;
  animation: lyricsBreakSpeakerCenter var(--break-duration-fast, 790ms) cubic-bezier(0.2, 0.85, 0.4, 1) infinite;
}

.lyrics-break-icon-crossfade::before,
.lyrics-break-icon-crossfade::after {
  content: "";
  position: absolute;
  top: 50%;
  width: 0.5em;
  height: 0.5em;
  margin-top: -0.25em;
  border-radius: 50%;
  background: currentColor;
  opacity: 0.55;
  animation: lyricsBreakCrossfadeBreathe var(--break-duration-slow, 1815ms) ease-in-out infinite;
}

.lyrics-break-icon-crossfade::before {
  left: 0.24em;
}

.lyrics-break-icon-crossfade::after {
  right: 0.24em;
  animation-delay: calc(var(--break-duration-slow, 1815ms) * -0.5);
}

.lyrics-lyricsContainer-LyricsLine-interlude:not(.lyrics-lyricsContainer-LyricsLine-active) .lyrics-break-icon,
.lyrics-lyricsContainer-LyricsLine-interlude:not(.lyrics-lyricsContainer-LyricsLine-active) .lyrics-break-icon *,
.lyrics-lyricsContainer-LyricsLine-interlude:not(.lyrics-lyricsContainer-LyricsLine-active) .lyrics-break-icon::before,
.lyrics-lyricsContainer-LyricsLine-interlude:not(.lyrics-lyricsContainer-LyricsLine-active) .lyrics-break-icon::after,
.lyrics-lyricsContainer-LyricsLine-interlude:not(.lyrics-lyricsContainer-LyricsLine-active) .lyrics-break-icon *::before,
.lyrics-lyricsContainer-LyricsLine-interlude:not(.lyrics-lyricsContainer-LyricsLine-active) .lyrics-break-icon *::after {
  animation-play-state: paused;
}

.lyrics-lyricsContainer-LyricsContainer.playback-paused .lyrics-break-icon,
.lyrics-lyricsContainer-LyricsContainer.playback-paused .lyrics-break-icon *,
.lyrics-lyricsContainer-LyricsContainer.playback-paused .lyrics-break-icon::before,
.lyrics-lyricsContainer-LyricsContainer.playback-paused .lyrics-break-icon::after,
.lyrics-lyricsContainer-LyricsContainer.playback-paused .lyrics-break-icon *::before,
.lyrics-lyricsContainer-LyricsContainer.playback-paused .lyrics-break-icon *::after {
  animation-play-state: paused;
}

.lyrics-lyricsContainer-LyricsContainer.motion-reduced .lyrics-break-icon,
.lyrics-lyricsContainer-LyricsContainer.motion-reduced .lyrics-break-icon *,
.lyrics-lyricsContainer-LyricsContainer.motion-reduced .lyrics-break-icon::before,
.lyrics-lyricsContainer-LyricsContainer.motion-reduced .lyrics-break-icon::after,
.lyrics-lyricsContainer-LyricsContainer.motion-reduced .lyrics-break-icon *::before,
.lyrics-lyricsContainer-LyricsContainer.motion-reduced .lyrics-break-icon *::after {
  animation: none !important;
}

.lyrics-config-button-container {
  --iv-floating-toolbar-top-gap: calc(env(safe-area-inset-top, 0px) + 176px);
  --iv-floating-toolbar-bottom-gap: 20px;
  --iv-floating-toolbar-padding: 10px;
  --iv-floating-toolbar-padding-block: 50px;
  --iv-floating-toolbar-menu-offset: 0px;
  --iv-floating-menu-content-top-offset: 0px;
  pointer-events: auto;
  position: fixed;
  bottom: var(--iv-floating-toolbar-bottom-gap);
  right: 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  z-index: var(--iv-layer-floating-toolbar);
  padding: 10px;
  border-radius: 0;
  background: rgba(18, 22, 28, 0.9);
  backdrop-filter: blur(24px) saturate(120%);
  -webkit-backdrop-filter: blur(24px) saturate(120%);
  border: 1px solid rgba(255, 255, 255, 0.12);
  box-shadow: 0 16px 32px rgba(0, 0, 0, 0.28), 0 4px 12px rgba(0, 0, 0, 0.16);
  box-sizing: border-box;
  max-height: calc(100vh - var(--iv-floating-toolbar-top-gap) - var(--iv-floating-toolbar-bottom-gap));
  max-height: calc(100dvh - var(--iv-floating-toolbar-top-gap) - var(--iv-floating-toolbar-bottom-gap));
  overflow: visible;

  /* Auto-hide functionality */
  opacity: 1;
  transform: translateY(0) scale(1);
  transition:
    opacity var(--iv-motion-duration-medium) var(--iv-motion-ease-standard),
    transform var(--iv-motion-duration-medium) var(--iv-motion-ease-standard),
    box-shadow var(--iv-motion-duration-fast) ease;
}

.lyrics-config-button-container:hover {
  box-shadow: 0 18px 36px rgba(0, 0, 0, 0.3), 0 6px 16px rgba(0, 0, 0, 0.18);
}

/* Hide controls when mouse is idle */
.lyrics-lyricsContainer-LyricsContainer.controls-hidden .lyrics-config-button-container {
  opacity: 0;
  transform: translateY(var(--iv-motion-distance-md)) scale(0.98);
  pointer-events: none;
}

/* Keep controls visible when hovering directly on them */
.lyrics-lyricsContainer-LyricsContainer.controls-hidden .lyrics-config-button-container:hover,
.lyrics-lyricsContainer-LyricsContainer.controls-hidden .lyrics-config-button-container:focus-within {
  opacity: 1;
  transform: translateY(0) scale(1);
  pointer-events: auto;
}

.lyrics-config-button-container>* {
  pointer-events: auto;
  flex-shrink: 0;
}

@-webkit-keyframes spin {
  0% {
    -webkit-transform: rotate(0deg);
  }

  100% {
    -webkit-transform: rotate(360deg);
  }
}

@keyframes spin {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}

.lyrics-config-button {
  align-items: center;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.1);
  margin: 0;
  border-radius: 0;
  color: rgba(255, 255, 255, 0.9);
  cursor: pointer;
  display: flex;
  gap: 0;
  justify-content: center;
  padding: 0;
  height: 44px;
  width: 44px;
  position: relative;
  flex-shrink: 0;
  transition: all var(--iv-motion-duration-fast) var(--iv-motion-ease-standard);
  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.22);
}

.lyrics-config-button::before {
  display: none;
}

.lyrics-config-button:hover {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.16);
  color: #fff;
  transform: translateY(-1px);
  box-shadow: 0 10px 22px rgba(0, 0, 0, 0.24), 0 0 0 1px rgba(255, 255, 255, 0.03);
}

.lyrics-config-button:active {
  transform: translateY(0);
  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.22);
}

.lyrics-config-button:disabled {
  opacity: 0.4;
  cursor: not-allowed;
  transform: none;
}

.lyrics-config-button:disabled:hover {
  background: rgba(255, 255, 255, 0.06);
  transform: none;
  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.22);
}

.lyrics-config-button svg {
  transition: transform var(--iv-motion-duration-fast) var(--iv-motion-ease-standard);
}

.lyrics-config-button:hover svg {
  transform: none;
}

/* Loading spin animation for regenerate button */
.lyrics-config-button.loading-spin svg {
  animation: spin 1s linear infinite;
}

/* Accent color highlight on specific buttons */
.lyrics-config-button[data-active="true"] {
  background: rgba(var(--spice-rgb-accent, 30, 215, 96), 0.16);
  border-color: rgba(var(--spice-rgb-accent, 30, 215, 96), 0.4);
}

.lyrics-config-button[data-active="true"]:hover {
  background: rgba(var(--spice-rgb-accent, 30, 215, 96), 0.2);
  box-shadow: 0 10px 22px rgba(0, 0, 0, 0.22), 0 0 0 1px rgba(var(--spice-rgb-accent, 30, 215, 96), 0.12);
}

/* Separator between tools and mode buttons */
.lyrics-config-separator {
  width: 28px;
  height: 1px;
  background: rgba(255, 255, 255, 0.18);
  border-radius: 0;
  margin: 4px 0;
  pointer-events: none;
}

/* Mode switching buttons */
.lyrics-mode-button {
  width: 38px !important;
  height: 38px !important;
  opacity: 0.6;
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

.lyrics-mode-button:hover {
  opacity: 1;
}

.lyrics-mode-button.active {
  opacity: 1;
  background: rgba(var(--spice-rgb-accent, 30, 215, 96), 0.16) !important;
  border-color: rgba(var(--spice-rgb-accent, 30, 215, 96), 0.5) !important;
  box-shadow: 0 10px 22px rgba(0, 0, 0, 0.22), 0 0 0 1px rgba(var(--spice-rgb-accent, 30, 215, 96), 0.12);
}

.lyrics-mode-button.active:hover {
  box-shadow: 0 10px 22px rgba(0, 0, 0, 0.22), 0 0 0 1px rgba(var(--spice-rgb-accent, 30, 215, 96), 0.12);
}

.lyrics-mode-button.active svg {
  color: var(--spice-accent, #1ed760);
}

.lyrics-config-button-container .main-contextMenu-menu {
  color: var(--spice-text);
  padding: 12px 12px 6px;
}

.lyrics-lyricsContainer-UnsyncedLyricsPage .split {
  display: flex;
}

.lyrics-lyricsContainer-UnsyncedLyricsPage .split>div {
  flex: 50%;
}

.lyrics-lyricsContainer-UnsyncedLyricsPage .split>div>div:not(.lyrics-versionSelector) {
  margin-left: 0;
  margin-right: 0;
}

.split .lyrics-lyricsContainer-LyricsLine {
  padding-left: 50px;
  padding-right: 50px;
}

.split .lyrics-versionSelector {
  margin-right: 50px;
  margin-left: 50px;
}

.split .lyrics-versionSelector select {
  width: 100%;
}

.main-content-view {
  height: 100%;
}

@media (min-width: 1024px) {
  .split .lyrics-lyricsContainer-LyricsLine {
    padding-left: 75px;
    padding-right: 75px;
  }

  .split .lyrics-versionSelector {
    margin-right: 75px;
    margin-left: 75px;
  }
}

@media (min-width: 1280px) {
  .split .lyrics-lyricsContainer-LyricsLine {
    padding-left: 100px;
    padding-right: 100px;
  }

  .split .lyrics-versionSelector {
    margin-right: 100px;
    margin-left: 100px;
  }
}

/* Readability on transparent background */
.lyrics-lyricsContainer-LyricsLine,
/* Lyrics sub-lines base style (backwards compatibility) */
.lyrics-lyricsContainer-LyricsLine-sub {
  text-shadow: var(--lyrics-text-shadow,
      0 2px 6px rgba(0, 0, 0, 0.55),
      0 0 14px rgba(0, 0, 0, 0.45));
  -webkit-text-stroke: 0px rgba(0, 0, 0, 0.35);
  font-family: "Pretendard Variable", Pretendard, -apple-system,
    BlinkMacSystemFont, system-ui, Roboto, "Helvetica Neue", "Segoe UI",
    "Apple SD Gothic Neo", "Noto Sans KR", "Malgun Gothic", "Apple Color Emoji",
    "Segoe UI Emoji", "Segoe UI Symbol", sans-serif;
  margin-bottom: 0px;
}

/* Remove default p tag margins */
.lyrics-lyricsContainer-LyricsLine>p {
  padding: 0;
}

/* Phonetic text style (romaji, romaja, pinyin) */
.lyrics-lyricsContainer-LyricsLine-phonetic {
  font-size: var(--lyrics-phonetic-font-size,
      calc(var(--lyrics-font-size) * 0.6));
  font-weight: var(--lyrics-phonetic-font-weight, 400);
  margin-top: var(--lyrics-phonetic-spacing, 4px);
  opacity: var(--lyrics-phonetic-opacity, 0.7);
  line-height: calc(var(--lyrics-phonetic-font-size, calc(var(--lyrics-font-size) * 0.6)) * 1.3);
  text-shadow: var(--lyrics-text-shadow,
      0 2px 6px rgba(0, 0, 0, 0.55),
      0 0 14px rgba(0, 0, 0, 0.45));
  -webkit-text-stroke: 0px rgba(0, 0, 0, 0.35);
  font-family: "Pretendard Variable", Pretendard, -apple-system,
    BlinkMacSystemFont, system-ui, Roboto, "Helvetica Neue", "Segoe UI",
    "Apple SD Gothic Neo", "Noto Sans KR", "Malgun Gothic", "Apple Color Emoji",
    "Segoe UI Emoji", "Segoe UI Symbol", sans-serif;
  margin-bottom: 0px;
}

/* Translation text style (korean, etc) */
.lyrics-lyricsContainer-LyricsLine-translation {
  font-size: var(--lyrics-translation-font-size,
      calc(var(--lyrics-font-size) * 0.7));
  font-weight: var(--lyrics-translation-font-weight, 600);
  margin-top: var(--lyrics-translation-spacing, 8px);
  opacity: var(--lyrics-translation-opacity, 0.6);
  line-height: calc(var(--lyrics-translation-font-size, calc(var(--lyrics-font-size) * 0.7)) * 1.4);
  text-shadow: var(--lyrics-text-shadow,
      0 2px 6px rgba(0, 0, 0, 0.55),
      0 0 14px rgba(0, 0, 0, 0.45));
  -webkit-text-stroke: 0px rgba(0, 0, 0, 0.35);
  font-family: "Pretendard Variable", Pretendard, -apple-system,
    BlinkMacSystemFont, system-ui, Roboto, "Helvetica Neue", "Segoe UI",
    "Apple SD Gothic Neo", "Noto Sans KR", "Malgun Gothic", "Apple Color Emoji",
    "Segoe UI Emoji", "Segoe UI Symbol", sans-serif;
  margin-bottom: 0px;
}

/* Legacy support: .lyrics-lyricsContainer-LyricsLine-sub uses translation style */
.lyrics-lyricsContainer-LyricsLine-sub {
  font-size: var(--lyrics-translation-font-size,
      calc(var(--lyrics-font-size) * 0.7));
  font-weight: var(--lyrics-translation-font-weight, 600);
  margin-top: var(--lyrics-line-spacing, 8px);
  opacity: var(--lyrics-translation-opacity, 0.6);
  text-shadow: var(--lyrics-text-shadow);
  line-height: calc(var(--lyrics-translation-font-size, calc(var(--lyrics-font-size) * 0.7)) * 1.4);
}

.lyrics-lyricsContainer-LyricsLine-active {
  text-shadow: 0 3px 10px rgba(0, 0, 0, 0.7), 0 0 18px rgba(0, 0, 0, 0.65);
  -webkit-text-stroke: 0px rgba(0, 0, 0, 0.45);
}

#ivLyrics-gradient-background {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  overflow: hidden;
  transition: background-color 0.5s ease, background-image 0.5s ease,
    filter 0.5s ease, background 1.5s ease;
  pointer-events: none;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  transform: translateZ(0);
  will-change: filter, transform, opacity;
  contain: paint;
}

/* Color Gradient Background */
#ivLyrics-gradient-background.color-gradient-bg {
  --c1: var(--ivLyrics-c1, 30, 30, 40);
  --c2: var(--ivLyrics-c2, 60, 40, 70);
  --c3: var(--ivLyrics-c3, 20, 50, 60);
  background-color: rgba(var(--c1), 1);
  transition: background-color 1.5s ease, filter 0.5s ease;
}

#ivLyrics-gradient-background.color-gradient-bg::before,
#ivLyrics-gradient-background.color-gradient-bg::after {
  display: none;
}

/* 공통 블롭 스타일 */
.gradient-blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(80px);
  opacity: 0.85;
  mix-blend-mode: screen;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  will-change: transform, filter;
}

.color-gradient-bg .blob-1 {
  width: 80%;
  height: 80%;
  background: rgba(var(--c2), 1);
  animation: blob-move-1 18s ease-in-out infinite;
}

.color-gradient-bg .blob-2 {
  width: 70%;
  height: 70%;
  background: rgba(var(--c3), 1);
  animation: blob-move-2 22s ease-in-out infinite;
}

.color-gradient-bg .blob-3 {
  width: 55%;
  height: 55%;
  background: rgba(var(--c2), 0.9);
  filter: blur(60px);
  animation: blob-move-3 15s ease-in-out infinite;
}

.color-gradient-bg .blob-4 {
  width: 75%;
  height: 75%;
  background: rgba(var(--c3), 0.8);
  filter: blur(60px);
  animation: blob-move-4 25s ease-in-out infinite;
}

.color-gradient-bg .blob-5 {
  width: 50%;
  height: 50%;
  background: rgba(var(--c2), 0.7);
  filter: blur(50px);
  animation: blob-move-5 16s ease-in-out infinite;
}

.color-gradient-bg .blob-6 {
  width: 90%;
  height: 90%;
  background: rgba(var(--c3), 0.6);
  filter: blur(70px);
  animation: blob-move-6 20s ease-in-out infinite;
}

@keyframes blob-move-1 {

  0%,
  100% {
    top: -20%;
    left: -20%;
    transform: scale(1);
  }

  20% {
    top: 10%;
    left: 50%;
    transform: scale(1.1);
  }

  40% {
    top: 50%;
    left: 30%;
    transform: scale(0.9);
  }

  60% {
    top: 30%;
    left: -10%;
    transform: scale(1.15);
  }

  80% {
    top: -10%;
    left: 20%;
    transform: scale(0.95);
  }
}

@keyframes blob-move-2 {

  0%,
  100% {
    top: 50%;
    left: 60%;
    transform: scale(1);
  }

  25% {
    top: 20%;
    left: -15%;
    transform: scale(1.2);
  }

  50% {
    top: -15%;
    left: 40%;
    transform: scale(0.85);
  }

  75% {
    top: 40%;
    left: 70%;
    transform: scale(1.1);
  }
}

@keyframes blob-move-3 {

  0%,
  100% {
    top: 60%;
    left: -10%;
    transform: scale(1);
  }

  33% {
    top: -20%;
    left: 60%;
    transform: scale(1.3);
  }

  66% {
    top: 40%;
    left: 40%;
    transform: scale(0.8);
  }
}

@keyframes blob-move-4 {

  0%,
  100% {
    top: -30%;
    left: 70%;
    transform: scale(1);
  }

  20% {
    top: 60%;
    left: 50%;
    transform: scale(0.9);
  }

  40% {
    top: 40%;
    left: -20%;
    transform: scale(1.2);
  }

  60% {
    top: -10%;
    left: 30%;
    transform: scale(1.05);
  }

  80% {
    top: 20%;
    left: 80%;
    transform: scale(0.85);
  }
}

@keyframes blob-move-5 {

  0%,
  100% {
    top: 70%;
    left: 50%;
    transform: scale(1);
  }

  25% {
    top: 30%;
    left: 80%;
    transform: scale(1.25);
  }

  50% {
    top: -10%;
    left: 20%;
    transform: scale(0.9);
  }

  75% {
    top: 50%;
    left: -15%;
    transform: scale(1.1);
  }
}

@keyframes blob-move-6 {

  0%,
  100% {
    top: 30%;
    left: 30%;
    transform: scale(1);
  }

  33% {
    top: -20%;
    left: -20%;
    transform: scale(1.15);
  }

  66% {
    top: 60%;
    left: 60%;
    transform: scale(0.9);
  }
}

/* Furigana Ruby Styles */
ruby {
  display: ruby;
  ruby-position: over;
  ruby-align: center;
}

ruby rt {
  font-size: 0.5em;
  line-height: 1;
  text-align: center;
  font-weight: normal;
  opacity: 0.85;
  letter-spacing: 0.05em;
  user-select: none;
}

.lyrics-lyricsContainer-LyricsLine ruby {
  display: ruby;
  ruby-position: over;
}

.lyrics-lyricsContainer-LyricsLine ruby rt {
  display: ruby-text;
  font-size: 0.5em;
  user-select: none;
  white-space: nowrap;
}

/* Active line furigana styling */
.lyrics-lyricsContainer-LyricsLine-active ruby rt {
  opacity: 0.9;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.5);
}


.lyrics-karaoke-line ruby {
  ruby-position: over;
}

.lyrics-karaoke-line ruby rt {
  font-size: 0.5em;
  opacity: 0.85;
  user-select: none;
  white-space: nowrap;
}


/* Furigana (Ruby) Styling */
.lyrics-lyricsContainer-LyricsLine ruby {
  ruby-align: center;
}

.lyrics-lyricsContainer-LyricsLine ruby rt {
  font-size: var(--lyrics-furigana-font-size, 14px);
  font-weight: var(--lyrics-furigana-font-weight, 300);
  opacity: var(--lyrics-furigana-opacity, 0.8);
  line-height: 1;
  margin-bottom: var(--lyrics-furigana-spacing, 2px);
  user-select: none;
  -webkit-user-select: none;
}

.lyrics-lyricsContainer-LyricsLine-sub ruby rt {
  font-size: calc(var(--lyrics-furigana-font-size, 14px) * 0.85);
}

/* Preview styles for settings */
#furigana-preview ruby {
  ruby-align: center;
}

#furigana-preview ruby rt {
  font-size: inherit;
  font-weight: inherit;
  opacity: inherit;
  line-height: 1;
  user-select: none;
  -webkit-user-select: none;
}

/* Font Preview Styles */
.font-preview-container {
  padding: 16px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px;
}

.font-preview {
  background: rgba(0, 0, 0, 0.3);
  border-radius: 8px;
  padding: 20px;
  min-height: 120px;
}

#lyrics-preview {
  color: var(--spice-text);
  margin-bottom: 8px;
}

#phonetic-preview {
  color: rgba(255, 255, 255, 0.7);
  margin-top: -10px;
}

#translation-preview {
  color: rgba(255, 255, 255, 0.7);
}

/* iOS Style Toggle Switch */
.ios-toggle-switch {
  position: relative;
  display: inline-block;
  width: 42px;
  height: 24px;
  flex-shrink: 0;
}

.ios-toggle-switch input {
  opacity: 0;
  width: 0;
  height: 0;
  position: absolute;
}

.ios-toggle-slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(120, 120, 128, 0.32);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  border-radius: 24px;
}

.ios-toggle-slider:before {
  position: absolute;
  content: "";
  height: 20px;
  width: 20px;
  left: 2px;
  bottom: 2px;
  background-color: white;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  border-radius: 50%;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.ios-toggle-switch input:checked+.ios-toggle-slider {
  background-color: var(--spice-button, #1db954);
}

.ios-toggle-switch input:checked+.ios-toggle-slider:before {
  transform: translateX(18px);
}

.ios-toggle-switch input:focus+.ios-toggle-slider {
  box-shadow: 0 0 0 3px rgba(29, 185, 84, 0.3);
}

.ios-toggle-switch:hover .ios-toggle-slider {
  opacity: 0.9;
}

/* Font Selector Container */
.font-selector-container {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-direction: row !important;
}

.font-toggle-label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: var(--spice-subtext);
  white-space: nowrap;
  user-select: none;
  flex-shrink: 0;
}

.font-selector-container>div:last-child {
  flex: 1;
  min-width: 0;
}

/* Settings Header Buttons */
/* Settings Header Buttons */
.settings-buttons {
  display: flex;
  gap: 8px;
  align-items: center;
  /* Ensure vertical alignment */
}

.settings-github-btn,
.settings-coffee-btn,
.settings-discord-btn {
  display: inline-flex;
  /* Use inline-flex to respect height/width better */
  align-items: center;
  justify-content: center;
  /* Center content */
  gap: 8px;
  /* Slightly increased gap */
  padding: 0 16px;
  /* Horizontal padding only, height handles vertical */
  height: 36px;
  /* Fixed height for consistency */
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  color: var(--spice-text);
  cursor: pointer;
  font-size: 13px;
  font-weight: 600;
  transition: all 0.2s ease;
  box-sizing: border-box;
  /* Ensure padding doesn't affect total size */
  line-height: 1;
  /* Reset line-height */
}

.settings-github-btn:hover,
.settings-coffee-btn:hover,
.settings-discord-btn:hover {
  background: rgba(255, 255, 255, 0.1);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  /* Add subtle shadow on hover */
}

.settings-discord-btn {
  color: #5865f2;
  /* Discord Brand Color */
}

.settings-coffee-btn {
  color: #ffdd00;
  /* Coffee Brand Color */
}

/* Ensure SVGs are sized correctly */
.settings-github-btn svg,
.settings-coffee-btn svg,
.settings-discord-btn svg {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}

/* Patch Notes Images */
#patch-notes-container img {
  max-width: 100%;
  height: auto !important;
  border-radius: 8px;
  margin: 12px 0;
  display: block;
}

/* Scrolling mode styles */
.lyrics-lyricsContainer-SyncedLyricsPage.scrolling-active {
  overflow-y: overlay !important;
  scrollbar-gutter: stable both-edges;
  /* scroll-behavior: smooth; 제거 - JS로 제어 */
}

#lyrics-fullscreen-container,
#lyrics-fullscreen-container .lyrics-lyricsContainer-LyricsContainer {
  overflow-x: hidden;
}

#lyrics-fullscreen-container .lyrics-lyricsContainer-LyricsContainer:has(.lyrics-lyricsContainer-SyncedLyricsPage.scrolling-active) {
  overflow: hidden;
}

#lyrics-fullscreen-container .lyrics-lyricsContainer-SyncedLyricsPage.scrolling-active {
  width: 100%;
  max-width: min(1200px, 85vw);
  margin: 0 auto;
}

.lyrics-lyricsContainer-SyncedLyricsPage.scrolling-active::-webkit-scrollbar {
  width: 4px;
}

.lyrics-lyricsContainer-SyncedLyricsPage.scrolling-active::-webkit-scrollbar-track {
  background: transparent;
}

.lyrics-lyricsContainer-SyncedLyricsPage.scrolling-active::-webkit-scrollbar-thumb {
  background-color: var(--spice-button-disabled);
  border-radius: 2px;
}

.lyrics-lyricsContainer-SyncedLyricsPage.scrolling-active::-webkit-scrollbar-thumb:hover {
  background-color: var(--spice-text);
}

.lyrics-lyricsContainer-SyncedLyricsPage.scrolling-active .lyrics-lyricsContainer-SyncedLyrics {
  box-sizing: border-box;
  min-height: 100%;
  width: 100%;
  height: auto;
  padding: 46vh 0 46vh;
  --scroll-line-gap: clamp(10px, calc(var(--lyrics-font-size, 26px) * 0.26), 22px);
  --scroll-line-gap-karaoke: clamp(16px, calc(var(--lyrics-font-size, 26px) * 0.42), 32px);
}

.lyrics-lyricsContainer-SyncedLyricsPage.scrolling-active .lyrics-lyricsContainer-SyncedLyrics:has(.lyrics-karaoke-line) {
  --scroll-line-gap: var(--scroll-line-gap-karaoke);
}

.lyrics-lyricsContainer-SyncedLyricsPage.scrolling-active .lyrics-lyricsContainer-SyncedLyrics>.lyrics-lyricsContainer-LyricsLine-scrollView {
  color: var(--lyrics-color-inactive);
  transform: none !important;
  cursor: pointer;
  margin-bottom: var(--scroll-line-gap);
  padding: 0;
  position: relative;
  filter: none !important;
  opacity: 0.72;
  transition:
    color var(--iv-motion-duration-fast) var(--iv-motion-ease-standard),
    opacity var(--iv-motion-duration-medium) var(--iv-motion-ease-standard),
    text-shadow var(--iv-motion-duration-medium) var(--iv-motion-ease-standard),
    background-color var(--iv-motion-duration-medium) var(--iv-motion-ease-standard),
    transform var(--iv-motion-duration-fast) var(--iv-motion-ease-emphasis),
    padding-inline var(--iv-motion-duration-medium) var(--iv-motion-ease-standard),
    box-shadow var(--iv-motion-duration-medium) var(--iv-motion-ease-standard);
}

.lyrics-lyricsContainer-SyncedLyricsPage.scrolling-active .lyrics-lyricsContainer-SyncedLyrics>.lyrics-lyricsContainer-LyricsLine-scrollView:hover {
  transform: translateX(4px);
}

.lyrics-lyricsContainer-SyncedLyricsPage.scrolling-active .lyrics-lyricsContainer-SyncedLyrics>.lyrics-lyricsContainer-LyricsLine-scrollView:last-child {
  margin-bottom: 0;
}

.lyrics-lyricsContainer-SyncedLyricsPage.scrolling-active .lyrics-lyricsContainer-SyncedLyrics>.lyrics-lyricsContainer-LyricsLine-scrollView.lyrics-lyricsContainer-LyricsLine-hasSubLine {
  margin-bottom: calc(var(--scroll-line-gap) + clamp(4px, 0.5vw, 10px));
}

.lyrics-lyricsContainer-SyncedLyricsPage.scrolling-active .lyrics-lyricsContainer-SyncedLyrics>.lyrics-lyricsContainer-LyricsLine-scrollView.lyrics-lyricsContainer-LyricsLine-active {
  transform: none !important;
  opacity: 1;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0));
  border-radius: 14px;
  padding-inline: clamp(10px, 1.2vw, 18px);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04), 0 12px 30px rgba(0, 0, 0, 0.12);
}

.lyrics-lyricsContainer-SyncedLyricsPage.scrolling-active .lyrics-lyricsContainer-SyncedLyrics>.lyrics-lyricsContainer-LyricsLine-scrollCurrent::before {
  content: "";
  position: absolute;
  top: 0.5em;
  inset-inline-start: calc(clamp(10px, 1.2vw, 18px) * -1 - 12px);
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: var(--lyrics-color-active);
  box-shadow: 0 0 10px var(--lyrics-color-active);
  animation: ivlyricsPulseDot 1.6s ease-in-out infinite;
}

.lyrics-lyricsContainer-SyncedLyricsPage.scrolling-active .lyrics-lyricsContainer-Provider {
  display: none;
}

/* Hover 효과는 기존 스타일(.lyrics-lyricsContainer-SyncedLyrics .lyrics-lyricsContainer-LyricsLine:hover)을 따름 */
/* Active 효과도 기존 스타일(.lyrics-lyricsContainer-LyricsLine-active)을 따름 */

/* Fullscreen Mode Styles */
.lyrics-lyricsContainer-LyricsContainer.fullscreen-active {
  --ivfs-lyrics-anchor-ratio: 0.5;
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: stretch;
  padding: 0;
  box-sizing: border-box;
  background-color: var(--spice-main);
  overflow: hidden;
  width: 100%;
  height: 100vh;
  transition: grid-template-columns var(--iv-motion-duration-slow) var(--iv-motion-ease-standard);
  isolation: isolate;
}

/* Background elements in fullscreen should cover entire area */
.lyrics-lyricsContainer-LyricsContainer.fullscreen-active .lyrics-lyricsContainer-LyricsBackground {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  grid-area: unset;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  will-change: background-color, opacity;
  contain: paint;
}

.lyrics-lyricsContainer-LyricsContainer.fullscreen-active #ivLyrics-gradient-background {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

/* Reversed layout - Album on right, Lyrics on left */
.lyrics-lyricsContainer-LyricsContainer.fullscreen-active.layout-reversed {
  direction: rtl;
}

.lyrics-lyricsContainer-LyricsContainer.fullscreen-active.layout-reversed>* {
  direction: ltr;
}

/* Left Panel (Album Art & Info) */
.lyrics-fullscreen-left-panel {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  /* Reserve space for ticker */
  padding: 40px;
  box-sizing: border-box;
  z-index: 10;
  transition:
    opacity var(--iv-motion-duration-medium) var(--iv-motion-ease-standard),
    transform var(--iv-motion-duration-slow) var(--iv-motion-ease-standard),
    padding var(--iv-motion-duration-medium) var(--iv-motion-ease-standard);
}

.lyrics-fullscreen-left-panel.tmi-mode {
  padding: 0;
  overflow: hidden;
  justify-content: flex-start;
}

.lyrics-fullscreen-left-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  /* Center align content */
  text-align: center;
  max-width: 90%;
  width: 100%;
  transition:
    transform var(--iv-motion-duration-slow) var(--iv-motion-ease-emphasis),
    opacity var(--iv-motion-duration-medium) var(--iv-motion-ease-standard);
}

.lyrics-fullscreen-album-art {
  aspect-ratio: 1/1;
  border-radius: 12px;
  margin-bottom: 32px;
  object-fit: cover;
  flex-shrink: 0;
  transition:
    transform var(--iv-motion-duration-slow) var(--iv-motion-ease-emphasis),
    box-shadow var(--iv-motion-duration-medium) var(--iv-motion-ease-standard),
    margin var(--iv-motion-duration-medium) var(--iv-motion-ease-standard);
}

.lyrics-fullscreen-album-art.with-shadow {
  box-shadow: 0 8px 40px rgba(0, 0, 0, 0.5);
}

.lyrics-fullscreen-track-info {
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: 100%;
  transition:
    transform var(--iv-motion-duration-slow) var(--iv-motion-ease-emphasis),
    opacity var(--iv-motion-duration-medium) var(--iv-motion-ease-standard),
    gap var(--iv-motion-duration-medium) var(--iv-motion-ease-standard);
}

.lyrics-fullscreen-title {
  font-size: 48px;
  font-weight: 800;
  color: var(--spice-text);
  line-height: 1.1;
  word-break: keep-all;
  text-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
  transition:
    transform var(--iv-motion-duration-slow) var(--iv-motion-ease-emphasis),
    opacity var(--iv-motion-duration-medium) var(--iv-motion-ease-standard),
    letter-spacing var(--iv-motion-duration-medium) var(--iv-motion-ease-standard);
}

.lyrics-fullscreen-artist {
  font-size: 24px;
  font-weight: 500;
  color: var(--spice-subtext);
  opacity: 0.9;
  transition:
    transform var(--iv-motion-duration-slow) var(--iv-motion-ease-emphasis),
    opacity var(--iv-motion-duration-medium) var(--iv-motion-ease-standard);
}

/* Normal Fullscreen Album Name */
.lyrics-fullscreen-album-name {
  font-size: 18px;
  font-weight: 400;
  color: var(--spice-subtext);
  opacity: 0.7;
  margin-top: 4px;
  transition:
    transform var(--iv-motion-duration-slow) var(--iv-motion-ease-emphasis),
    opacity var(--iv-motion-duration-medium) var(--iv-motion-ease-standard);
}

.fullscreen-navigation-link {
  cursor: pointer;
  border-radius: 6px;
}

.fullscreen-navigation-link:hover {
  color: var(--spice-text);
  opacity: 1;
  text-decoration: none;
}

.fullscreen-navigation-link:focus-visible {
  outline: 2px solid rgba(255, 255, 255, 0.48);
  outline-offset: 4px;
}

/* Right Panel (Lyrics) Adjustments */
.lyrics-lyricsContainer-LyricsContainer.fullscreen-active .lyrics-lyricsContainer-SyncedLyricsPage {
  grid-area: auto;
  height: 100vh;
  /* Reserve space for ticker */
  width: 100%;
  padding: 0 var(--lyrics-fullscreen-right-padding, 40px) 0 40px;
  box-sizing: border-box;
  display: grid;
  grid-template-rows: 1fr 30px;
  overflow: hidden;
  text-align: var(--lyrics-align-text);
  transition:
    opacity var(--iv-motion-duration-medium) var(--iv-motion-ease-standard),
    transform var(--iv-motion-duration-slow) var(--iv-motion-ease-standard),
    padding-top var(--iv-motion-duration-medium) var(--iv-motion-ease-standard),
    padding-bottom var(--iv-motion-duration-medium) var(--iv-motion-ease-standard),
    padding-left var(--iv-motion-duration-medium) var(--iv-motion-ease-standard),
    padding-right var(--iv-motion-duration-medium) var(--iv-motion-ease-standard);
}

/* UnsyncedLyricsPage는 스크롤 가능하도록 별도 스타일 */
.lyrics-lyricsContainer-LyricsContainer.fullscreen-active .lyrics-lyricsContainer-UnsyncedLyricsPage {
  grid-area: auto;
  height: 100vh;
  /* Reserve space for ticker */
  width: 100%;
  padding: 60px var(--lyrics-fullscreen-right-padding, 40px) 60px 40px;
  box-sizing: border-box;
  display: block;
  overflow-y: auto;
  overflow-x: hidden;
  text-align: var(--lyrics-align-text);
  transition:
    opacity var(--iv-motion-duration-medium) var(--iv-motion-ease-standard),
    transform var(--iv-motion-duration-slow) var(--iv-motion-ease-standard),
    padding-top var(--iv-motion-duration-medium) var(--iv-motion-ease-standard),
    padding-bottom var(--iv-motion-duration-medium) var(--iv-motion-ease-standard),
    padding-left var(--iv-motion-duration-medium) var(--iv-motion-ease-standard),
    padding-right var(--iv-motion-duration-medium) var(--iv-motion-ease-standard);
  /* 스크롤바 스타일링 */
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, 0.3) transparent;
}

/* 전체화면 UnsyncedLyricsPage 스크롤바 스타일 */
.lyrics-lyricsContainer-LyricsContainer.fullscreen-active .lyrics-lyricsContainer-UnsyncedLyricsPage::-webkit-scrollbar {
  width: 8px;
}

.lyrics-lyricsContainer-LyricsContainer.fullscreen-active .lyrics-lyricsContainer-UnsyncedLyricsPage::-webkit-scrollbar-track {
  background: transparent;
}

.lyrics-lyricsContainer-LyricsContainer.fullscreen-active .lyrics-lyricsContainer-UnsyncedLyricsPage::-webkit-scrollbar-thumb {
  background-color: rgba(255, 255, 255, 0.3);
  border-radius: 4px;
}

.lyrics-lyricsContainer-LyricsContainer.fullscreen-active .lyrics-lyricsContainer-UnsyncedLyricsPage::-webkit-scrollbar-thumb:hover {
  background-color: rgba(255, 255, 255, 0.5);
}

/* 전체화면 UnsyncedLyricsPage 패딩 요소 높이 조정 */
.lyrics-lyricsContainer-LyricsContainer.fullscreen-active .lyrics-lyricsContainer-UnsyncedLyricsPage .lyrics-lyricsContainer-LyricsUnsyncedPadding {
  height: 20px;
}

/* Reversed layout: Left padding instead of right */
.lyrics-lyricsContainer-LyricsContainer.fullscreen-active.layout-reversed .lyrics-lyricsContainer-SyncedLyricsPage {
  padding: 0 40px 0 var(--lyrics-fullscreen-right-padding, 40px);
}

.lyrics-lyricsContainer-LyricsContainer.fullscreen-active.layout-reversed .lyrics-lyricsContainer-UnsyncedLyricsPage {
  padding: 60px 40px 60px var(--lyrics-fullscreen-right-padding, 40px);
}

/* Adjust lyrics text size and alignment in fullscreen */
.lyrics-lyricsContainer-LyricsContainer.fullscreen-active .lyrics-lyricsContainer-LyricsLine {
  text-align: var(--lyrics-align-text);
  margin-left: 0 !important;
  margin-right: 0 !important;
  transform-origin: var(--lyrics-align-text) center;
}

.lyrics-lyricsContainer-LyricsContainer.fullscreen-active .lyrics-lyricsContainer-SyncedLyrics .lyrics-lyricsContainer-LyricsLine {
  transform-origin: var(--lyrics-align-text) center;
}



/* Fullscreen scrolling mode fixes */
.lyrics-lyricsContainer-LyricsContainer.fullscreen-active .lyrics-lyricsContainer-SyncedLyricsPage.scrolling-active {
  overflow-y: auto !important;
  overflow-x: hidden;
  padding: 0 var(--lyrics-fullscreen-right-padding, 40px) 0 40px;
  margin: 0;
  width: 100%;
  max-width: none;
  display: block;
  box-sizing: border-box;
}

/* Reversed layout: Scrolling mode left padding */
.lyrics-lyricsContainer-LyricsContainer.fullscreen-active.layout-reversed .lyrics-lyricsContainer-SyncedLyricsPage.scrolling-active {
  padding: 0 40px 0 var(--lyrics-fullscreen-right-padding, 40px);
}

.lyrics-lyricsContainer-LyricsContainer.fullscreen-active .lyrics-lyricsContainer-SyncedLyricsPage.scrolling-active .lyrics-lyricsContainer-SyncedScrollView {
  width: 100%;
  padding: 50vh 0 50vh;
}

.lyrics-lyricsContainer-LyricsContainer.fullscreen-active.fullscreen-page-ui {
  inset: 0;
  width: 100%;
  height: 100% !important;
  min-height: 0;
  max-height: 100%;
}

.lyrics-lyricsContainer-LyricsContainer.fullscreen-active.fullscreen-page-ui:has(.lyrics-lyricsContainer-SyncedLyricsPage.scrolling-active) {
  overflow: hidden;
}

.lyrics-lyricsContainer-LyricsContainer.fullscreen-active.fullscreen-page-ui .lyrics-lyricsContainer-SyncedLyricsPage,
.lyrics-lyricsContainer-LyricsContainer.fullscreen-active.fullscreen-page-ui .lyrics-lyricsContainer-UnsyncedLyricsPage {
  height: 100% !important;
  min-height: 0;
}

.lyrics-lyricsContainer-LyricsContainer.fullscreen-active.fullscreen-page-ui .fullscreen-bottom-left,
.lyrics-lyricsContainer-LyricsContainer.fullscreen-active.fullscreen-page-ui .fullscreen-top-right,
.lyrics-lyricsContainer-LyricsContainer.fullscreen-active.fullscreen-page-ui .fullscreen-bottom,
.lyrics-lyricsContainer-LyricsContainer.fullscreen-active.fullscreen-page-ui .fullscreen-lyrics-progress-container,
.lyrics-lyricsContainer-LyricsContainer.fullscreen-active.fullscreen-page-ui .fullscreen-queue-wrapper,
.lyrics-lyricsContainer-LyricsContainer.fullscreen-active.fullscreen-page-ui .fullscreen-queue-trigger-area,
.lyrics-lyricsContainer-LyricsContainer.fullscreen-active.fullscreen-page-ui .fullscreen-queue-panel,
.lyrics-lyricsContainer-LyricsContainer.fullscreen-active.fullscreen-page-ui .fullscreen-tv-tmi-overlay,
.lyrics-lyricsContainer-LyricsContainer.fullscreen-active.fullscreen-page-ui .fullscreen-tv-song-info,
.lyrics-lyricsContainer-LyricsContainer.fullscreen-active.fullscreen-page-ui .fullscreen-tv-controls-wrapper,
.lyrics-lyricsContainer-LyricsContainer.fullscreen-active.fullscreen-page-ui .portrait-overlay-top,
.lyrics-lyricsContainer-LyricsContainer.fullscreen-active.fullscreen-page-ui .portrait-overlay-bottom,
.lyrics-lyricsContainer-LyricsContainer.fullscreen-active.fullscreen-page-ui .lyrics-config-button-container {
  position: absolute !important;
}

.lyrics-lyricsContainer-LyricsContainer.fullscreen-active.fullscreen-page-ui .fullscreen-queue-wrapper,
.lyrics-lyricsContainer-LyricsContainer.fullscreen-active.fullscreen-page-ui .fullscreen-queue-trigger-area,
.lyrics-lyricsContainer-LyricsContainer.fullscreen-active.fullscreen-page-ui .fullscreen-queue-panel {
  height: 100%;
}

.lyrics-lyricsContainer-LyricsContainer.fullscreen-active.fullscreen-page-ui .fullscreen-tv-tmi-overlay {
  inset: 0;
}

/* Hide other elements in fullscreen */
.lyrics-lyricsContainer-LyricsContainer.fullscreen-active .lyrics-tabBar-header {
  display: none;
  /* Hide tab bar in fullscreen for clean look */
}

/* Menu buttons in fullscreen - hidden by default, show on mouse move */
.lyrics-lyricsContainer-LyricsContainer.fullscreen-active .lyrics-config-button-container {
  --iv-floating-toolbar-top-gap: 20px;
  --iv-floating-toolbar-bottom-gap: 40px;
  --iv-floating-menu-content-top-offset: 130px;
  opacity: 1;
  transform: translateY(0) scale(1);
  transition:
    opacity var(--iv-motion-duration-medium) var(--iv-motion-ease-standard),
    transform var(--iv-motion-duration-medium) var(--iv-motion-ease-standard),
    box-shadow var(--iv-motion-duration-fast) ease;
  pointer-events: auto;
  position: fixed;
  bottom: 40px;
  right: 24px;
  margin: 0;
  z-index: var(--iv-layer-floating-toolbar);
}

/* Hide controls and cursor in fullscreen when mouse is idle */
.lyrics-lyricsContainer-LyricsContainer.fullscreen-active.controls-hidden {
  cursor: none;
}

.lyrics-lyricsContainer-LyricsContainer.fullscreen-active.controls-hidden .lyrics-config-button-container {
  opacity: 0;
  transform: translateY(var(--iv-motion-distance-md)) scale(0.98);
  pointer-events: none;
}

/* Keep controls visible when hovering directly on them in fullscreen */
.lyrics-lyricsContainer-LyricsContainer.fullscreen-active.controls-hidden .lyrics-config-button-container:hover,
.lyrics-lyricsContainer-LyricsContainer.fullscreen-active.controls-hidden .lyrics-config-button-container:focus-within {
  opacity: 1;
  transform: translateY(0) scale(1);
  pointer-events: auto;
}

.lyrics-lyricsContainer-LyricsContainer.fullscreen-active .lyrics-config-button-container>* {
  pointer-events: auto;
}

/* Ensure menus/dropdowns in fullscreen are visible and accessible */
.lyrics-lyricsContainer-LyricsContainer.fullscreen-active .lyrics-config-button-container .main-contextMenu-menu {
  z-index: var(--iv-layer-floating-toolbar-menu);
  position: fixed;
  bottom: auto;
  top: auto;
}

/* Add a way to exit fullscreen (ESC hint or button could be added later) */

/* Fullscreen - single column mode (no left panel) */
.lyrics-lyricsContainer-LyricsContainer.fullscreen-single-column {
  grid-template-columns: 1fr;
}

.lyrics-lyricsContainer-LyricsContainer.fullscreen-active.marketplace-active {
  grid-template-columns: 1fr !important;
  grid-template-rows: 1fr !important;
}

.lyrics-lyricsContainer-LyricsContainer.fullscreen-active.marketplace-active .ivlyrics-marketplace-root {
  grid-area: 1 / 1 / -1 / -1;
  width: 100%;
  height: 100%;
  min-height: 100vh;
  min-height: 100dvh;
  z-index: var(--iv-layer-marketplace);
}

.lyrics-lyricsContainer-LyricsContainer.fullscreen-active.marketplace-active .ivlyrics-marketplace-header-left,
.lyrics-lyricsContainer-LyricsContainer.fullscreen-active.marketplace-active .ivlyrics-marketplace-detail-back {
  margin-left: calc(env(safe-area-inset-left, 0px) + 32px);
}

.lyrics-lyricsContainer-LyricsContainer.fullscreen-single-column .lyrics-lyricsContainer-SyncedLyricsPage {
  padding: 0 10%;
}

.lyrics-lyricsContainer-LyricsContainer.fullscreen-single-column .lyrics-lyricsContainer-UnsyncedLyricsPage {
  padding: 60px 10%;
}

/* Fullscreen - no lyrics state */
.lyrics-lyricsContainer-LyricsContainer.fullscreen-no-lyrics {
  grid-template-columns: 1fr;
}

.lyrics-lyricsContainer-LyricsContainer.fullscreen-no-lyrics .lyrics-fullscreen-left-panel {
  grid-column: 1;
  justify-content: center;
  align-items: center;
}

.lyrics-lyricsContainer-LyricsContainer.fullscreen-no-lyrics .lyrics-lyricsContainer-SyncedLyricsPage,
.lyrics-lyricsContainer-LyricsContainer.fullscreen-no-lyrics .lyrics-lyricsContainer-UnsyncedLyricsPage,
.lyrics-lyricsContainer-LyricsContainer.fullscreen-no-lyrics .lyrics-lyricsContainer-LyricsUnavailablePage {
  display: none !important;
}

/* ==========================================
   Fullscreen Enhanced UI Components
   ========================================== */

/* Bottom-left corner - Context info */
.fullscreen-bottom-left {
  position: fixed;
  bottom: 24px;
  left: 24px;
  z-index: 50;
  transition:
    opacity var(--iv-motion-duration-medium) var(--iv-motion-ease-standard),
    transform var(--iv-motion-duration-medium) var(--iv-motion-ease-standard);
}

.fullscreen-bottom-left.hidden {
  opacity: 0;
  transform: translateY(var(--iv-motion-distance-sm));
  pointer-events: none;
}

/* Top-right corner - Clock & Next track */
.fullscreen-top-right {
  position: fixed;
  top: 24px;
  right: 24px;
  z-index: 50;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 16px;
  transition:
    opacity var(--iv-motion-duration-medium) var(--iv-motion-ease-standard),
    transform var(--iv-motion-duration-medium) var(--iv-motion-ease-standard);
}

.fullscreen-top-right.hidden {
  opacity: 0;
  transform: translateY(calc(var(--iv-motion-distance-sm) * -1));
  pointer-events: none;
}

/* Clock wrapper for auto-hide */
.fullscreen-clock-wrapper {
  transition:
    opacity var(--iv-motion-duration-medium) var(--iv-motion-ease-standard),
    transform var(--iv-motion-duration-medium) var(--iv-motion-ease-standard);
}

.fullscreen-clock-wrapper.hidden {
  opacity: 0;
  transform: translateY(calc(var(--iv-motion-distance-sm) * -1));
  pointer-events: none;
}

/* Clock */
.fullscreen-clock {
  font-size: 48px;
  font-weight: 300;
  color: var(--spice-text);
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
  letter-spacing: 2px;
  opacity: 0.9;
}

/* Context info (playlist/album name) */
.fullscreen-context-info {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  background: rgba(0, 0, 0, 0.4);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-radius: 12px;
  max-width: 350px;
  transition:
    transform var(--iv-motion-duration-slow) var(--iv-motion-ease-emphasis),
    opacity var(--iv-motion-duration-medium) var(--iv-motion-ease-standard),
    gap var(--iv-motion-duration-medium) var(--iv-motion-ease-standard),
    background var(--iv-motion-duration-medium) var(--iv-motion-ease-standard);
}

.fullscreen-context-image {
  width: 48px;
  height: 48px;
  border-radius: 6px;
  object-fit: cover;
  flex-shrink: 0;
  transition:
    transform var(--iv-motion-duration-slow) var(--iv-motion-ease-emphasis),
    border-radius var(--iv-motion-duration-medium) var(--iv-motion-ease-standard),
    box-shadow var(--iv-motion-duration-medium) var(--iv-motion-ease-standard);
}

.fullscreen-context-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  overflow: hidden;
  transition:
    transform var(--iv-motion-duration-slow) var(--iv-motion-ease-emphasis),
    opacity var(--iv-motion-duration-medium) var(--iv-motion-ease-standard);
}

.fullscreen-context-type {
  font-size: 11px;
  color: var(--spice-subtext);
  text-transform: uppercase;
  letter-spacing: 1px;
  opacity: 0.8;
}

.fullscreen-context-name {
  font-size: 14px;
  font-weight: 500;
  color: var(--spice-text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Next track preview */
.fullscreen-next-track {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 16px;
  background: rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-radius: 12px;
  animation: slideInRight var(--iv-motion-duration-medium) var(--iv-motion-ease-standard);
  max-width: 300px;
  transition:
    transform var(--iv-motion-duration-slow) var(--iv-motion-ease-emphasis),
    opacity var(--iv-motion-duration-medium) var(--iv-motion-ease-standard),
    background var(--iv-motion-duration-medium) var(--iv-motion-ease-standard),
    border-radius var(--iv-motion-duration-medium) var(--iv-motion-ease-standard);
}

@keyframes slideInRight {
  from {
    opacity: 0;
    transform: translateX(var(--iv-motion-distance-md));
  }

  to {
    opacity: 1;
    transform: translateX(0);
  }
}

.fullscreen-next-track-label {
  font-size: 11px;
  color: var(--spice-subtext);
  text-transform: uppercase;
  letter-spacing: 1px;
  opacity: 0.8;
}

.fullscreen-next-track-content {
  display: flex;
  align-items: center;
  gap: 12px;
  transition:
    transform var(--iv-motion-duration-slow) var(--iv-motion-ease-emphasis),
    gap var(--iv-motion-duration-medium) var(--iv-motion-ease-standard);
}

.fullscreen-next-track-image {
  width: 56px;
  height: 56px;
  border-radius: 8px;
  object-fit: cover;
  flex-shrink: 0;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
  transition:
    transform var(--iv-motion-duration-slow) var(--iv-motion-ease-emphasis),
    box-shadow var(--iv-motion-duration-medium) var(--iv-motion-ease-standard),
    border-radius var(--iv-motion-duration-medium) var(--iv-motion-ease-standard);
}

.fullscreen-next-track-info {
  display: flex;
  flex-direction: column;
  gap: 4px;
  overflow: hidden;
  transition:
    transform var(--iv-motion-duration-slow) var(--iv-motion-ease-emphasis),
    opacity var(--iv-motion-duration-medium) var(--iv-motion-ease-standard);
}

.fullscreen-next-track-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--spice-text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.fullscreen-next-track-artist {
  font-size: 12px;
  color: var(--spice-subtext);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Bottom - Player controls */
.fullscreen-bottom {
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 50;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  overflow: hidden;
  transform-origin: bottom center;
  max-height: var(--iv-fullscreen-controls-height);
  transition:
    opacity var(--iv-motion-duration-medium) var(--iv-motion-ease-standard),
    transform var(--iv-motion-duration-slow) var(--iv-motion-ease-emphasis),
    max-height var(--iv-motion-duration-slow) var(--iv-motion-ease-emphasis);
}

.fullscreen-bottom.hidden {
  opacity: 0;
  transform: translateX(-50%) translateY(var(--iv-motion-distance-md)) scale(0.985);
  max-height: 0;
  pointer-events: none;
}

.fullscreen-bottom.hidden .fullscreen-player-controls,
.fullscreen-bottom.hidden .fullscreen-progress-standalone {
  transform: translateY(var(--iv-motion-distance-sm)) scale(0.985);
  opacity: 0;
}

/* Player controls container */
.fullscreen-player-controls {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 16px 24px;
  min-width: 350px;
  transition:
    transform var(--iv-motion-duration-medium) var(--iv-motion-ease-standard),
    opacity var(--iv-motion-duration-medium) var(--iv-motion-ease-standard);
}

/* Compact mode for left panel */
.fullscreen-player-controls.compact {
  min-width: unset;
  width: 100%;
  max-width: 400px;
  padding: 16px 0;
  gap: 12px;
}

/* Controls in left panel (under album) */
.fullscreen-left-controls {
  margin-top: 24px;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
  overflow: visible;
  position: relative;
  z-index: 70;
  transform-origin: top center;
  max-height: var(--iv-fullscreen-controls-height);
  transition:
    opacity var(--iv-motion-duration-medium) var(--iv-motion-ease-standard),
    transform var(--iv-motion-duration-slow) var(--iv-motion-ease-emphasis),
    margin-top var(--iv-motion-duration-slow) var(--iv-motion-ease-emphasis),
    max-height var(--iv-motion-duration-slow) var(--iv-motion-ease-emphasis);
}

.fullscreen-left-controls.left-controls-progress-only {
  max-height: var(--iv-fullscreen-progress-height);
}

.fullscreen-left-controls.hidden {
  opacity: 0;
  transform: translateY(var(--iv-motion-distance-md)) scale(0.985);
  margin-top: 0;
  max-height: 0;
  overflow: hidden;
  pointer-events: none;
}

/* Lyrics progress container (bottom right) */
.fullscreen-lyrics-progress-container {
  position: fixed;
  bottom: 24px;
  right: 24px;
  z-index: 50;
  transition:
    opacity var(--iv-motion-duration-medium) var(--iv-motion-ease-standard),
    transform var(--iv-motion-duration-slow) var(--iv-motion-ease-emphasis);
}

.fullscreen-lyrics-progress-container.hidden {
  opacity: 0;
  transform: translateY(var(--iv-motion-distance-md));
  pointer-events: none;
}

/* Progress bar container */
.fullscreen-progress-container,
.fullscreen-progress-standalone {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  max-width: 400px;
  margin-bottom: 12px;
  transition:
    transform var(--iv-motion-duration-slow) var(--iv-motion-ease-emphasis),
    opacity var(--iv-motion-duration-medium) var(--iv-motion-ease-standard),
    gap var(--iv-motion-duration-medium) var(--iv-motion-ease-standard);
}

.fullscreen-time {
  font-size: 13px;
  color: var(--spice-subtext);
  font-variant-numeric: tabular-nums;
  min-width: 45px;
  text-align: center;
}

.fullscreen-progress-bar {
  flex: 1;
  height: 6px;
  background: rgba(255, 255, 255, 0.2);
  border-radius: 3px;
  cursor: pointer;
  position: relative;
  transition:
    height var(--iv-motion-duration-fast) var(--iv-motion-ease-emphasis),
    transform var(--iv-motion-duration-medium) var(--iv-motion-ease-standard),
    background var(--iv-motion-duration-medium) var(--iv-motion-ease-standard);
}

.fullscreen-progress-bar:hover {
  height: 8px;
}

.fullscreen-progress-fill {
  width: 100%;
  height: 100%;
  background: var(--spice-text);
  border-radius: 3px;
  transform-origin: left center;
  transition: transform var(--iv-motion-duration-medium) var(--iv-motion-ease-emphasis);
}

.fullscreen-progress-handle {
  position: absolute;
  top: 50%;
  width: 14px;
  height: 14px;
  background: var(--spice-text);
  border-radius: 50%;
  transform: translate(-50%, -50%);
  opacity: 0;
  transition:
    opacity var(--iv-motion-duration-fast) var(--iv-motion-ease-standard),
    transform var(--iv-motion-duration-fast) var(--iv-motion-ease-emphasis);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
}

.fullscreen-progress-bar:hover .fullscreen-progress-handle {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1.06);
}

/* Player controls - 개선된 레이아웃 */
.fullscreen-player-controls {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  width: 100%;
  transition:
    transform var(--iv-motion-duration-slow) var(--iv-motion-ease-emphasis),
    opacity var(--iv-motion-duration-medium) var(--iv-motion-ease-standard),
    gap var(--iv-motion-duration-medium) var(--iv-motion-ease-standard);
}

.fullscreen-player-controls.with-background {
  background: rgba(0, 0, 0, 0.4);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  padding: 16px 20px;
  border-radius: 16px;
  transition:
    transform var(--iv-motion-duration-slow) var(--iv-motion-ease-emphasis),
    opacity var(--iv-motion-duration-medium) var(--iv-motion-ease-standard),
    background var(--iv-motion-duration-medium) var(--iv-motion-ease-standard),
    border-radius var(--iv-motion-duration-medium) var(--iv-motion-ease-standard),
    box-shadow var(--iv-motion-duration-medium) var(--iv-motion-ease-standard);
}

/* Control rows */
.fullscreen-control-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  transition:
    transform var(--iv-motion-duration-slow) var(--iv-motion-ease-emphasis),
    opacity var(--iv-motion-duration-medium) var(--iv-motion-ease-standard),
    gap var(--iv-motion-duration-medium) var(--iv-motion-ease-standard);
}

.fullscreen-control-main-row {
  gap: 6px;
}

.fullscreen-control-volume-row {
  margin-top: 8px;
  padding-top: 8px;
}

/* Control buttons */
.fullscreen-control-btn {
  background: transparent;
  border: none;
  color: var(--spice-text);
  cursor: pointer;
  padding: 8px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  transition:
    transform var(--iv-motion-duration-fast) var(--iv-motion-ease-emphasis),
    opacity var(--iv-motion-duration-medium) var(--iv-motion-ease-standard),
    background var(--iv-motion-duration-fast) var(--iv-motion-ease-standard),
    box-shadow var(--iv-motion-duration-fast) var(--iv-motion-ease-standard),
    color var(--iv-motion-duration-fast) var(--iv-motion-ease-standard);
  opacity: 0.7;
}

.fullscreen-control-btn:hover {
  opacity: 1;
  background: rgba(255, 255, 255, 0.1);
  transform: translateY(-2px) scale(1.08);
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.18);
}

.fullscreen-control-btn:active {
  transform: translateY(0) scale(0.94);
}

.fullscreen-control-btn svg {
  width: 100%;
  height: 100%;
}

.fullscreen-control-btn.active {
  opacity: 1;
  color: var(--spice-button-active, #1db954);
}

/* Play button - 메인 버튼 강조 */
.fullscreen-control-btn.fullscreen-control-play {
  background: var(--spice-text);
  color: var(--spice-main);
  opacity: 1;
  padding: 10px;
}

.fullscreen-control-btn.fullscreen-control-play:hover {
  transform: translateY(-2px) scale(1.08);
  box-shadow: 0 4px 20px rgba(255, 255, 255, 0.25);
  background: var(--spice-text);
}

/* Like button */
.fullscreen-like-btn.liked {
  color: #1db954;
  opacity: 1;
}

.fullscreen-like-btn.liked svg {
  filter: drop-shadow(0 0 4px rgba(29, 185, 84, 0.5));
}

.fullscreen-playlist-control {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
}

.fullscreen-playlist-popover {
  position: absolute;
  right: 0;
  bottom: calc(100% + 12px);
  width: min(280px, 78vw);
  max-height: 320px;
  padding: 10px;
  overflow: auto;
  z-index: 1000;
  background: rgba(18, 18, 18, 0.96);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 12px;
  box-shadow: 0 18px 48px rgba(0, 0, 0, 0.42);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
}

.fullscreen-left-controls:has(.fullscreen-playlist-popover),
.portrait-overlay-bottom:has(.fullscreen-playlist-popover) {
  z-index: 140;
  overflow: visible;
}

.fullscreen-playlist-popover-title {
  padding: 6px 8px 10px;
  color: var(--spice-text);
  font-size: 13px;
  font-weight: 700;
}

.fullscreen-playlist-state {
  padding: 14px 10px;
  color: var(--spice-subtext);
  font-size: 12px;
  line-height: 1.45;
}

.fullscreen-playlist-state.error {
  color: #ff9b9b;
}

.fullscreen-playlist-item {
  width: 100%;
  min-height: 46px;
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  padding: 7px 8px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--spice-text);
  cursor: pointer;
  text-align: left;
}

.fullscreen-playlist-item:hover {
  background: rgba(255, 255, 255, 0.08);
}

.fullscreen-playlist-item.contains-current-track {
  background: rgba(29, 185, 84, 0.08);
}

.fullscreen-playlist-item.contains-current-track:hover {
  background: rgba(255, 82, 82, 0.10);
}

.fullscreen-playlist-item:disabled {
  cursor: default;
  opacity: 0.72;
}

.fullscreen-playlist-item-image,
.fullscreen-playlist-item-fallback {
  width: 34px;
  height: 34px;
  border-radius: 4px;
  flex: 0 0 auto;
}

.fullscreen-playlist-item-image {
  object-fit: cover;
}

.fullscreen-playlist-item-fallback {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.10);
  color: var(--spice-subtext);
  font-size: 16px;
}

.fullscreen-playlist-item-text {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.fullscreen-playlist-item-name {
  overflow: hidden;
  color: var(--spice-text);
  font-size: 13px;
  font-weight: 600;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.fullscreen-playlist-item-count,
.fullscreen-playlist-item-loading {
  color: var(--spice-subtext);
  font-size: 11px;
}

.fullscreen-playlist-item-status {
  justify-self: end;
  max-width: 84px;
  padding: 3px 7px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  line-height: 1.2;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.fullscreen-playlist-item-status.checking {
  background: rgba(255, 255, 255, 0.10);
  color: var(--spice-subtext);
}

.fullscreen-playlist-item-status.contains {
  background: rgba(29, 185, 84, 0.18);
  color: #1ed760;
}

.fullscreen-playlist-item-status-remove {
  display: none;
}

.fullscreen-playlist-item.contains-current-track:hover .fullscreen-playlist-item-status.contains {
  background: rgba(255, 82, 82, 0.18);
  color: #ff6b6b;
}

.fullscreen-playlist-item.contains-current-track:hover .fullscreen-playlist-item-status-default {
  display: none;
}

.fullscreen-playlist-item.contains-current-track:hover .fullscreen-playlist-item-status-remove {
  display: inline;
}

/* Volume wrapper */
.fullscreen-volume-wrapper {
  display: flex;
  align-items: center;
  gap: 8px;
  transition:
    transform var(--iv-motion-duration-slow) var(--iv-motion-ease-emphasis),
    opacity var(--iv-motion-duration-medium) var(--iv-motion-ease-standard);
}

.fullscreen-volume-slider {
  width: 80px;
  height: 4px;
  -webkit-appearance: none;
  appearance: none;
  background: rgba(255, 255, 255, 0.2);
  border-radius: 2px;
  outline: none;
  cursor: pointer;
  transition:
    width var(--iv-motion-duration-medium) var(--iv-motion-ease-emphasis),
    opacity var(--iv-motion-duration-medium) var(--iv-motion-ease-standard),
    transform var(--iv-motion-duration-medium) var(--iv-motion-ease-standard);
}

.fullscreen-volume-wrapper:hover .fullscreen-volume-slider {
  width: 108px;
}

.fullscreen-volume-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--spice-text);
  cursor: pointer;
  transition: transform var(--iv-motion-duration-fast) var(--iv-motion-ease-emphasis);
}

.fullscreen-volume-slider::-webkit-slider-thumb:hover {
  transform: scale(1.3);
}

.fullscreen-volume-slider::-moz-range-thumb {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--spice-text);
  cursor: pointer;
  border: none;
}

/* Player controls with background */
.fullscreen-player-controls.with-background {
  background: rgba(0, 0, 0, 0.4);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  padding: 16px 20px;
  border-radius: 16px;
}

/* Lyrics progress indicator */
.fullscreen-lyrics-progress {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 16px;
  background: rgba(0, 0, 0, 0.3);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-radius: 20px;
  transition:
    transform var(--iv-motion-duration-slow) var(--iv-motion-ease-emphasis),
    opacity var(--iv-motion-duration-medium) var(--iv-motion-ease-standard),
    background var(--iv-motion-duration-medium) var(--iv-motion-ease-standard),
    border-radius var(--iv-motion-duration-medium) var(--iv-motion-ease-standard);
}

.fullscreen-lyrics-progress-bar {
  width: 120px;
  height: 4px;
  background: rgba(255, 255, 255, 0.2);
  border-radius: 2px;
  overflow: hidden;
}

.fullscreen-lyrics-progress-fill {
  width: 100%;
  height: 100%;
  background: var(--spice-text);
  border-radius: 2px;
  transform-origin: left center;
  transition: transform var(--iv-motion-duration-medium) var(--iv-motion-ease-emphasis);
}

.fullscreen-bottom-left.hidden .fullscreen-context-info {
  transform: translateY(var(--iv-motion-distance-sm)) scale(0.985);
  opacity: 0;
}

.fullscreen-bottom-left.hidden .fullscreen-context-image {
  transform: scale(0.92);
}

.fullscreen-bottom-left.hidden .fullscreen-context-text {
  transform: translateY(6px);
  opacity: 0;
}

.fullscreen-top-right>* {
  transition:
    transform var(--iv-motion-duration-slow) var(--iv-motion-ease-emphasis),
    opacity var(--iv-motion-duration-medium) var(--iv-motion-ease-standard);
}

.fullscreen-top-right.hidden .fullscreen-next-track {
  transform: translateY(calc(var(--iv-motion-distance-sm) * -1)) scale(0.985);
  opacity: 0;
}

.fullscreen-top-right.hidden .fullscreen-next-track-image {
  transform: scale(0.92);
}

.fullscreen-top-right.hidden .fullscreen-next-track-info,
.fullscreen-top-right.hidden .fullscreen-next-track-label {
  transform: translateY(-6px);
  opacity: 0;
}

.fullscreen-lyrics-progress-text {
  font-size: 12px;
  color: var(--spice-subtext);
  font-variant-numeric: tabular-nums;
}

/* Left panel controls hidden state */
.lyrics-fullscreen-left-panel.controls-hidden .fullscreen-left-controls {
  opacity: 0;
  transform: translateY(var(--iv-motion-distance-md)) scale(0.985);
  margin-top: 0;
  max-height: 0;
  overflow: hidden;
  pointer-events: none;
}

.lyrics-fullscreen-left-panel.controls-hidden .lyrics-fullscreen-left-content {
  transform: translateY(18px);
}

.lyrics-fullscreen-left-panel.controls-hidden .lyrics-fullscreen-album-container {
  transform: translateY(14px) scale(0.99);
}

.lyrics-fullscreen-left-panel.controls-hidden .lyrics-fullscreen-track-info {
  transform: translateY(12px);
  opacity: 0.975;
}

.lyrics-fullscreen-left-panel.controls-hidden .lyrics-fullscreen-title {
  transform: translateY(10px);
  letter-spacing: 0.01em;
}

.lyrics-fullscreen-left-panel.controls-hidden .lyrics-fullscreen-artist,
.lyrics-fullscreen-left-panel.controls-hidden .lyrics-fullscreen-album-name {
  transform: translateY(8px);
  opacity: 0.88;
}

/* Responsive adjustments */
@media (max-width: 1200px) {
  .lyrics-fullscreen-title {
    font-size: 36px;
  }

  .fullscreen-clock {
    font-size: 36px;
  }

  .fullscreen-control-row {
    gap: 8px;
  }

  .fullscreen-control-main-row {
    gap: 10px;
  }
}

@media (max-width: 768px) {
  .fullscreen-clock {
    font-size: 28px;
  }

  .fullscreen-control-row {
    gap: 6px;
  }

  .fullscreen-control-main-row {
    gap: 8px;
  }

  .fullscreen-volume-slider {
    width: 60px;
  }

  .fullscreen-volume-wrapper:hover .fullscreen-volume-slider {
    width: 80px;
  }
}

/* ==========================================
   PORTRAIT MODE - Overlay Design (세로 모드)
   가사가 전체 화면을 차지하고, 곡정보/컨트롤이
   반투명 오버레이로 떠있는 방식
   ========================================== */

/* 컨테이너: 그리드 분할 없이 가사가 전체 화면 차지 */
.lyrics-lyricsContainer-LyricsContainer.fullscreen-active.portrait-mode {
  grid-template-columns: 1fr !important;
  grid-template-rows: 1fr !important;
  gap: 0 !important;
}

/* 기존 left-panel 세로모드에서 숨김 */
.portrait-mode .lyrics-fullscreen-left-panel {
  display: none !important;
}

/* 가사 페이지: 전체 화면, 상하 패딩으로 오버레이 공간 확보 */
.portrait-mode .lyrics-lyricsContainer-SyncedLyricsPage,
.portrait-mode .lyrics-lyricsContainer-UnsyncedLyricsPage {
  grid-row: 1 !important;
  grid-column: 1 !important;
  width: 100% !important;
  height: 100% !important;
  padding: clamp(100px, 18svh, 180px) 5vw clamp(80px, 14svh, 150px) 5vw !important;
  box-sizing: border-box;
  display: block;
  transform: none !important;
  mask-image: none !important;
  -webkit-mask-image: none !important;
  margin-top: 0 !important;
  z-index: 10;
  transition: padding 0.4s cubic-bezier(0.25, 0.1, 0.25, 1);
}

.portrait-mode .lyrics-lyricsContainer-SyncedLyrics {
  transform: none !important;
  margin-top: 0 !important;
  mask-image: none !important;
  -webkit-mask-image: none !important;
}

.portrait-mode .lyrics-lyricsContainer-SyncedLyricsPage.scrolling-active {
  padding: clamp(100px, 18svh, 180px) 5vw clamp(80px, 14svh, 150px) 5vw !important;
}

.portrait-mode .lyrics-lyricsContainer-SyncedLyricsPage.scrolling-active .lyrics-lyricsContainer-SyncedScrollView {
  padding: 0 !important;
}

/* UI 숨김 시 가사 패딩 최소화 → 풀스크린 효과 */
.portrait-mode.ui-hidden .lyrics-lyricsContainer-SyncedLyricsPage,
.portrait-mode.ui-hidden .lyrics-lyricsContainer-UnsyncedLyricsPage {
  padding-top: clamp(100px, 18svh, 180px) !important;
  padding-bottom: clamp(80px, 14svh, 150px) !important;
}

.portrait-mode.ui-hidden .lyrics-lyricsContainer-SyncedLyricsPage.scrolling-active {
  padding-top: clamp(100px, 18svh, 180px) !important;
  padding-bottom: clamp(80px, 14svh, 150px) !important;
}

/* layout-reversed: 가사 패딩 반전 */
.portrait-mode.layout-reversed .lyrics-lyricsContainer-SyncedLyricsPage,
.portrait-mode.layout-reversed .lyrics-lyricsContainer-UnsyncedLyricsPage {
  padding-top: clamp(80px, 14svh, 150px) !important;
  padding-bottom: clamp(100px, 18svh, 180px) !important;
}

.portrait-mode.layout-reversed .lyrics-lyricsContainer-SyncedLyricsPage.scrolling-active {
  padding-top: clamp(80px, 14svh, 150px) !important;
  padding-bottom: clamp(100px, 18svh, 180px) !important;
}

/* ---- [상단 오버레이] 곡정보 ---- */
.portrait-overlay-top {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 60;
  display: flex;
  align-items: center;
  gap: clamp(12px, 2.5vw, 20px);
  padding: clamp(16px, 3svh, 28px) clamp(20px, 5vw, 32px);
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0.6) 0%, rgba(0, 0, 0, 0.3) 60%, transparent 100%);
  opacity: 1;
  transform: translateY(0);
  transition:
    opacity var(--iv-motion-duration-medium) var(--iv-motion-ease-standard),
    transform var(--iv-motion-duration-medium) var(--iv-motion-ease-standard),
    padding var(--iv-motion-duration-medium) var(--iv-motion-ease-standard);
  pointer-events: auto;
}

.portrait-overlay-top.hidden {
  opacity: 0;
  transform: translateY(calc(var(--iv-motion-distance-md) * -1));
  pointer-events: none;
}

/* 상단 오버레이 내 앨범아트 */
.portrait-overlay-top .portrait-album-art {
  width: clamp(48px, 8svh, 80px);
  height: clamp(48px, 8svh, 80px);
  border-radius: 8px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4);
  flex-shrink: 0;
  object-fit: cover;
}

/* 상단 오버레이 내 앨범아트 컨테이너 (TMI 클릭 지원) */
.portrait-overlay-top .portrait-album-container {
  flex-shrink: 0;
  position: relative;
  cursor: pointer;
}

/* 상단 오버레이 내 곡정보 */
.portrait-overlay-top .portrait-track-info {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.portrait-overlay-top .portrait-track-title {
  font-weight: 800;
  font-size: clamp(16px, 2.5svh, 24px);
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: var(--spice-text, #fff);
}

.portrait-overlay-top .portrait-track-title-sub {
  font-weight: 600;
  font-size: clamp(11px, 1.6svh, 16px);
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  opacity: 0.7;
  color: var(--spice-text, #fff);
}

.portrait-overlay-top .portrait-track-artist {
  font-size: clamp(12px, 1.8svh, 18px);
  opacity: 0.85;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: var(--spice-text, #fff);
}

.portrait-overlay-top .portrait-track-artist-sub {
  font-size: clamp(10px, 1.4svh, 14px);
  opacity: 0.6;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: var(--spice-text, #fff);
}

.portrait-overlay-top .portrait-track-album-name {
  font-size: clamp(10px, 1.4svh, 14px);
  opacity: 0.6;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: var(--spice-text, #fff);
  margin-top: 2px;
}

/* ---- [하단 오버레이] 컨트롤 ---- */
.portrait-overlay-bottom {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 60;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: clamp(12px, 2svh, 20px) clamp(20px, 5vw, 32px) clamp(20px, 3svh, 36px);
  background: linear-gradient(to top, rgba(0, 0, 0, 0.6) 0%, rgba(0, 0, 0, 0.3) 60%, transparent 100%);
  opacity: 1;
  transform: translateY(0);
  transition:
    opacity var(--iv-motion-duration-medium) var(--iv-motion-ease-standard),
    transform var(--iv-motion-duration-medium) var(--iv-motion-ease-standard),
    padding var(--iv-motion-duration-medium) var(--iv-motion-ease-standard);
  pointer-events: auto;
}

.portrait-overlay-bottom.hidden {
  opacity: 0;
  transform: translateY(var(--iv-motion-distance-md));
  pointer-events: none;
}

.portrait-overlay-bottom .fullscreen-player-controls,
.portrait-overlay-bottom .fullscreen-progress-container,
.portrait-overlay-bottom .fullscreen-progress-standalone {
  max-width: min(92vw, 500px);
  width: 100%;
}

.portrait-overlay-bottom .fullscreen-player-controls.with-background {
  background: transparent !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

/* ---- layout-reversed: 곡정보 하단, 컨트롤 상단 ---- */
.portrait-overlay-top.layout-reversed {
  top: auto;
  bottom: 0;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.6) 0%, rgba(0, 0, 0, 0.3) 60%, transparent 100%);
}

.portrait-overlay-top.layout-reversed.hidden {
  transform: translateY(var(--iv-motion-distance-md));
}

.portrait-overlay-bottom.layout-reversed {
  bottom: auto;
  top: 0;
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0.6) 0%, rgba(0, 0, 0, 0.3) 60%, transparent 100%);
}

.portrait-overlay-bottom.layout-reversed.hidden {
  transform: translateY(calc(var(--iv-motion-distance-md) * -1));
}

/* ---- 코너 요소 위치 조정 ---- */
.portrait-mode .fullscreen-top-right {
  top: 20px;
  right: 20px;
}

.portrait-mode .fullscreen-bottom-left {
  bottom: 20px;
  left: 20px;
}

.portrait-mode .fullscreen-clock {
  font-size: clamp(24px, 4vw, 32px);
}

.portrait-mode .lyrics-config-button-container {
  --iv-floating-toolbar-top-gap: 20px;
  --iv-floating-toolbar-bottom-gap: 20px;
  bottom: 20px;
  right: 20px;
}

.portrait-mode .fullscreen-lyrics-progress {
  bottom: 64px;
  left: 20px;
}

/* ---- 가사 없을 때 ---- */
.portrait-mode.fullscreen-no-lyrics {
  grid-template-rows: 1fr !important;
}

.portrait-mode.fullscreen-no-lyrics .portrait-overlay-top {
  position: fixed;
  top: 50%;
  left: 50%;
  right: auto;
  bottom: auto;
  width: min(90vw, 400px);
  transform: translate(-50%, -50%);
  flex-direction: column;
  align-items: center;
  text-align: center;
  background: transparent;
  gap: clamp(12px, 2svh, 20px);
}

.portrait-mode.fullscreen-no-lyrics .portrait-overlay-top .portrait-album-art {
  width: clamp(120px, 28svh, 280px);
  height: clamp(120px, 28svh, 280px);
  border-radius: 12px;
}

.portrait-mode.fullscreen-no-lyrics .portrait-overlay-top .portrait-track-info {
  align-items: center;
}

.portrait-mode.fullscreen-no-lyrics .portrait-overlay-top .portrait-track-title {
  font-size: clamp(20px, 3.5svh, 36px);
  white-space: normal;
  text-align: center;
}

.portrait-mode.fullscreen-no-lyrics .portrait-overlay-top .portrait-track-artist {
  font-size: clamp(14px, 2.2svh, 22px);
  white-space: normal;
  text-align: center;
}

.portrait-mode.fullscreen-no-lyrics .portrait-overlay-top.hidden {
  opacity: 0;
  transform: translate(-50%, calc(-50% - var(--iv-motion-distance-md)));
}

/* ---- 태블릿 (>= 768px) 확장 ---- */
@media (orientation: portrait) and (min-width: 768px) {
  .portrait-overlay-top .portrait-album-art {
    width: clamp(64px, 10svh, 100px);
    height: clamp(64px, 10svh, 100px);
  }

  .portrait-overlay-bottom .fullscreen-player-controls,
  .portrait-overlay-bottom .fullscreen-progress-container,
  .portrait-overlay-bottom .fullscreen-progress-standalone {
    max-width: min(80vw, 640px);
  }

  .portrait-mode .lyrics-lyricsContainer-SyncedLyricsPage,
  .portrait-mode .lyrics-lyricsContainer-UnsyncedLyricsPage {
    padding-left: 10vw !important;
    padding-right: 10vw !important;
  }
}

/* =============================================
   Community Video Selector
   ============================================= */

.community-video-selector {
  width: 100%;
  height: 100%;
  max-height: 70vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  color: #f8fafc;
  font-family: "Segoe UI Variable Text", "Segoe UI", "Pretendard Variable", Pretendard, sans-serif;
}

.community-video-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  padding: 20px 24px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.community-video-header h3 {
  margin: 0;
  font-size: 22px;
  font-weight: 700;
  color: inherit;
  letter-spacing: -0.02em;
}

.community-video-close {
  width: 36px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(255, 255, 255, 0.04);
  color: inherit;
  cursor: pointer;
  border-radius: 0;
}

.community-video-close:hover {
  background: rgba(255, 255, 255, 0.08);
}

.community-video-content {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 16px 24px 24px;
}

.community-video-content::-webkit-scrollbar {
  width: 8px;
}

.community-video-content::-webkit-scrollbar-track {
  background: transparent;
}

.community-video-content::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.2);
}

.community-video-content::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, 0.3);
}

.community-video-loading,
.community-video-error,
.community-video-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 48px 24px;
  color: rgba(248, 250, 252, 0.58);
  font-size: 14px;
  text-align: center;
}

.community-video-loading .spinner {
  width: 24px;
  height: 24px;
  border: 2px solid rgba(255, 255, 255, 0.12);
  border-top-color: rgba(255, 255, 255, 0.6);
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

.community-video-local-note {
  margin-bottom: 12px;
  padding: 10px 12px;
  border: 1px solid rgba(148, 163, 184, 0.18);
  border-radius: 8px;
  background: rgba(15, 23, 42, 0.26);
  color: rgba(248, 250, 252, 0.72);
  font-size: 13px;
  line-height: 1.45;
}

.community-video-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 16px;
}

.community-video-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.03);
  cursor: pointer;
  border-radius: 0;
  transition: background 0.2s ease, border-color 0.2s ease;
}

.community-video-item:hover {
  background: rgba(255, 255, 255, 0.05);
  border-color: rgba(255, 255, 255, 0.14);
}

.community-video-item.active {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.18);
  box-shadow: inset 2px 0 0 rgba(255, 255, 255, 0.45);
}

.community-video-item.best {
  border-color: rgba(255, 255, 255, 0.12);
}

.community-video-rank {
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(255, 255, 255, 0.04);
  color: rgba(248, 250, 252, 0.72);
  font-size: 12px;
  font-weight: 700;
  border-radius: 0;
}

.community-video-rank.gold,
.community-video-rank.silver,
.community-video-rank.bronze {
  border-color: rgba(255, 255, 255, 0.18);
}

.community-video-info {
  flex: 1;
  min-width: 0;
}

.community-video-title {
  display: flex;
  align-items: center;
  gap: 8px;
  color: inherit;
  font-size: 14px;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.community-video-title .auto-badge {
  flex-shrink: 0;
  padding: 2px 6px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  background: rgba(255, 255, 255, 0.08);
  color: #f8fafc;
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  border-radius: 0;
}

.community-video-meta {
  display: flex;
  gap: 12px;
  margin-top: 4px;
  color: rgba(248, 250, 252, 0.58);
  font-size: 12px;
}

.community-video-actions {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}

.community-video-actions .action-btn,
.community-video-actions .vote-btn,
.community-video-submit-btn,
.community-video-add-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  min-height: 32px;
  padding: 6px 10px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(255, 255, 255, 0.04);
  color: inherit;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  border-radius: 0;
  box-shadow: none;
  transition: background 0.2s ease, border-color 0.2s ease;
}

.community-video-actions .vote-btn span {
  font-size: 11px;
  font-weight: 600;
}

.community-video-actions .action-btn:hover,
.community-video-actions .vote-btn:hover,
.community-video-submit-btn:hover:not(:disabled),
.community-video-add-btn:hover {
  background: rgba(255, 255, 255, 0.08);
}

.community-video-actions .action-btn.preview.active,
.community-video-actions .action-btn.apply,
.community-video-actions .vote-btn.like.active,
.community-video-submit-btn {
  border-color: rgba(255, 255, 255, 0.18);
  background: rgba(255, 255, 255, 0.12);
  color: #f8fafc;
}

.community-video-actions .action-btn.delete,
.community-video-actions .vote-btn.dislike.active {
  border-color: rgba(239, 68, 68, 0.32);
  background: rgba(239, 68, 68, 0.1);
  color: #fca5a5;
}

.community-video-actions .action-btn.delete:hover {
  background: rgba(239, 68, 68, 0.16);
}

.community-video-actions .action-btn:disabled,
.community-video-actions .vote-btn:disabled,
.community-video-submit-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.community-video-embed {
  position: relative;
  margin: 8px 0;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: #000;
  border-radius: 0;
}

.community-video-embed.submit-preview {
  margin-top: 12px;
}

.community-video-embed.synced-preview .preview-loading {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: rgba(255, 255, 255, 0.7);
  font-size: 13px;
}

.community-video-embed iframe {
  display: block;
  border-radius: 0;
  pointer-events: none;
}

.community-video-embed.submit-preview iframe {
  pointer-events: auto;
}

.form-hint,
.loading-title {
  color: rgba(248, 250, 252, 0.58);
  font-size: 11px;
  line-height: 1.4;
}

.loading-title {
  padding: 8px 0;
  font-size: 12px;
  font-style: italic;
}

.video-title-preview .video-title-text {
  padding: 10px 12px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.03);
  color: inherit;
  font-size: 13px;
  line-height: 1.4;
  border-radius: 0;
}

.community-video-add-btn {
  width: 100%;
  margin-top: 8px;
  padding: 12px 16px;
}

.community-video-submit-form {
  margin-top: 16px;
  padding: 18px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.03);
  border-radius: 0;
}

.community-video-submit-form .form-group {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.community-video-submit-form label {
  color: rgba(248, 250, 252, 0.56);
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.community-video-submit-form input {
  padding: 10px 14px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(255, 255, 255, 0.04);
  color: inherit;
  font-size: 14px;
  border-radius: 0;
}

.community-video-submit-form input:focus {
  outline: none;
  border-color: rgba(255, 255, 255, 0.2);
  background: rgba(255, 255, 255, 0.08);
}

.community-video-submit-form input::placeholder {
  color: rgba(248, 250, 252, 0.42);
}

.community-video-overlay {
  position: fixed !important;
  inset: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  background: rgba(0, 0, 0, 0.72);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  z-index: var(--iv-layer-modal) !important;
}

.confirm-dialog-overlay {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.72);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  z-index: var(--iv-layer-modal);
}

.confirm-dialog {
  min-width: 320px;
  max-width: 400px;
  padding: 24px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(12, 12, 12, 0.96);
  box-shadow: 0 32px 80px rgba(0, 0, 0, 0.48);
  border-radius: 0;
}

.confirm-dialog-title {
  margin-bottom: 12px;
  color: #f8fafc;
  font-size: 18px;
  font-weight: 600;
}

.confirm-dialog-message {
  margin-bottom: 24px;
  color: rgba(248, 250, 252, 0.62);
  font-size: 14px;
  line-height: 1.5;
  white-space: pre-wrap;
  word-break: break-word;
}

.confirm-dialog-buttons {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
}

.confirm-dialog-btn {
  padding: 10px 20px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(255, 255, 255, 0.04);
  color: #f8fafc;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  border-radius: 0;
}

.confirm-dialog-btn:focus-visible {
  outline: 2px solid rgba(248, 250, 252, 0.72);
  outline-offset: 2px;
}

.confirm-dialog-btn.cancel:hover {
  background: rgba(255, 255, 255, 0.08);
}

.confirm-dialog-btn.confirm {
  border-color: rgba(239, 68, 68, 0.32);
  background: rgba(239, 68, 68, 0.1);
  color: #fecaca;
}

.confirm-dialog-btn.confirm:hover {
  background: rgba(239, 68, 68, 0.16);
}

#ivLyrics-community-video-overlay[data-ui-theme="light"] .community-video-selector {
  color: #0f172a;
}

#ivLyrics-community-video-overlay[data-ui-theme="light"] .community-video-header,
#ivLyrics-community-video-overlay[data-ui-theme="light"] .community-video-item,
#ivLyrics-community-video-overlay[data-ui-theme="light"] .community-video-submit-form,
#ivLyrics-community-video-overlay[data-ui-theme="light"] .video-title-preview .video-title-text,
#ivLyrics-community-video-overlay[data-ui-theme="light"] .community-video-embed,
#ivLyrics-community-video-overlay[data-ui-theme="light"] .community-video-add-btn,
#ivLyrics-community-video-overlay[data-ui-theme="light"] .confirm-dialog {
  border-color: rgba(15, 23, 42, 0.08);
}

#ivLyrics-community-video-overlay[data-ui-theme="light"] .community-video-close,
#ivLyrics-community-video-overlay[data-ui-theme="light"] .community-video-item,
#ivLyrics-community-video-overlay[data-ui-theme="light"] .community-video-submit-form,
#ivLyrics-community-video-overlay[data-ui-theme="light"] .community-video-submit-form input,
#ivLyrics-community-video-overlay[data-ui-theme="light"] .community-video-actions .action-btn,
#ivLyrics-community-video-overlay[data-ui-theme="light"] .community-video-actions .vote-btn,
#ivLyrics-community-video-overlay[data-ui-theme="light"] .community-video-submit-btn,
#ivLyrics-community-video-overlay[data-ui-theme="light"] .community-video-add-btn,
#ivLyrics-community-video-overlay[data-ui-theme="light"] .video-title-preview .video-title-text,
#ivLyrics-community-video-overlay[data-ui-theme="light"] .confirm-dialog,
#ivLyrics-community-video-overlay[data-ui-theme="light"] .confirm-dialog-btn {
  background: rgba(15, 23, 42, 0.04);
  color: #0f172a;
}

#ivLyrics-community-video-overlay[data-ui-theme="light"] .community-video-loading,
#ivLyrics-community-video-overlay[data-ui-theme="light"] .community-video-error,
#ivLyrics-community-video-overlay[data-ui-theme="light"] .community-video-empty,
#ivLyrics-community-video-overlay[data-ui-theme="light"] .community-video-local-note,
#ivLyrics-community-video-overlay[data-ui-theme="light"] .community-video-meta,
#ivLyrics-community-video-overlay[data-ui-theme="light"] .form-hint,
#ivLyrics-community-video-overlay[data-ui-theme="light"] .loading-title,
#ivLyrics-community-video-overlay[data-ui-theme="light"] .community-video-submit-form label,
#ivLyrics-community-video-overlay[data-ui-theme="light"] .confirm-dialog-message {
  color: rgba(15, 23, 42, 0.58);
}

#ivLyrics-community-video-overlay[data-ui-theme="light"] .community-video-title .auto-badge,
#ivLyrics-community-video-overlay[data-ui-theme="light"] .community-video-actions .action-btn.preview.active,
#ivLyrics-community-video-overlay[data-ui-theme="light"] .community-video-actions .action-btn.apply,
#ivLyrics-community-video-overlay[data-ui-theme="light"] .community-video-actions .vote-btn.like.active,
#ivLyrics-community-video-overlay[data-ui-theme="light"] .community-video-submit-btn {
  background: rgba(15, 23, 42, 0.08);
  border-color: rgba(15, 23, 42, 0.18);
  color: #0f172a;
}

#ivLyrics-community-video-overlay[data-ui-theme="light"] .community-video-actions .action-btn.delete,
#ivLyrics-community-video-overlay[data-ui-theme="light"] .community-video-actions .vote-btn.dislike.active,
#ivLyrics-community-video-overlay[data-ui-theme="light"] .confirm-dialog-btn.confirm {
  color: #b91c1c;
}

#ivLyrics-community-video-overlay[data-ui-theme="light"] .confirm-dialog-title {
  color: #0f172a;
}

/* ========================================
   Queue Panel - Premium Glassmorphism Design
   ======================================== */

/* Queue Wrapper */
.fullscreen-queue-wrapper {
  position: fixed;
  top: 0;
  right: 0;
  height: 100vh;
  width: 0;
  z-index: 1000;
  pointer-events: none;
}

/* Trigger Area */
.fullscreen-queue-trigger-area {
  position: fixed;
  top: 0;
  right: 0;
  width: 12px;
  height: 100vh;
  background: transparent;
  transition:
    width var(--iv-motion-duration-medium) var(--iv-motion-ease-standard),
    background-color var(--iv-motion-duration-fast) var(--iv-motion-ease-standard);
  pointer-events: auto;
  z-index: 1000;
}

.fullscreen-queue-trigger-area:hover {
  width: 12px;
  background: transparent;
}

/* Main Panel */
.fullscreen-queue-panel {
  position: fixed;
  top: 0;
  right: 0;
  width: 380px;
  height: 100vh;
  background: rgba(14, 18, 24, 0.96);
  backdrop-filter: blur(20px) saturate(120%);
  -webkit-backdrop-filter: blur(20px) saturate(120%);
  border-left: 1px solid rgba(255, 255, 255, 0.12);
  box-shadow: -16px 0 32px rgba(0, 0, 0, 0.28);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  z-index: 1001;
  pointer-events: auto;
  font-family: var(--font-family, 'Pretendard Variable', -apple-system, BlinkMacSystemFont, sans-serif);

  /* Slide animation */
  transform: translateX(100%);
  opacity: 0;
  transition:
    transform var(--iv-motion-duration-slow) var(--iv-motion-ease-emphasis),
    opacity var(--iv-motion-duration-medium) var(--iv-motion-ease-standard);
}

.fullscreen-queue-panel.visible {
  transform: translateX(0);
  opacity: 1;
}

/* Footer with Tabs */
.fullscreen-queue-footer {
  display: flex;
  gap: 8px;
  padding: 16px 20px 20px;
  background: rgba(255, 255, 255, 0.02);
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.fullscreen-queue-tab {
  flex: 1;
  padding: 12px 14px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: rgba(255, 255, 255, 0.68);
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 0;
  cursor: pointer;
  transition:
    background var(--iv-motion-duration-fast) var(--iv-motion-ease-standard),
    border-color var(--iv-motion-duration-fast) var(--iv-motion-ease-standard),
    color var(--iv-motion-duration-fast) var(--iv-motion-ease-standard);
  text-align: center;
}

.fullscreen-queue-tab:hover {
  color: rgba(255, 255, 255, 0.92);
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.14);
}

.fullscreen-queue-tab.active {
  color: var(--spice-accent, #1ed760);
  background: rgba(var(--spice-rgb-accent, 30, 215, 96), 0.16);
  border-color: rgba(var(--spice-rgb-accent, 30, 215, 96), 0.34);
}

.fullscreen-queue-tab:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px rgba(var(--spice-rgb-accent, 30, 215, 96), 0.24);
}

/* Queue Content */
.fullscreen-queue-content {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 8px 0;
}

.fullscreen-queue-content::-webkit-scrollbar {
  width: 8px;
}

.fullscreen-queue-content::-webkit-scrollbar-track {
  background: transparent;
  margin: 8px 0;
}

.fullscreen-queue-content::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.14);
  border-radius: 0;
  transition: background var(--iv-motion-duration-fast) var(--iv-motion-ease-standard);
}

.fullscreen-queue-content::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, 0.22);
}

/* Queue Sections */
.fullscreen-queue-section {
  padding: 16px 20px 10px;
}

.fullscreen-queue-section-title {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: rgba(255, 255, 255, 0.42);
  margin-bottom: 14px;
  padding-left: 0;
  display: flex;
  align-items: center;
  gap: 8px;
}

.fullscreen-queue-section-title::after {
  content: '';
  flex: 1;
  height: 1px;
  background: rgba(255, 255, 255, 0.08);
}

/* Queue List */
.fullscreen-queue-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 0 20px;
}

/* Queue Item */
.fullscreen-queue-item {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 14px;
  margin: 0;
  border-radius: 0;
  cursor: pointer;
  transition:
    background var(--iv-motion-duration-fast) var(--iv-motion-ease-standard),
    border-color var(--iv-motion-duration-fast) var(--iv-motion-ease-standard),
    color var(--iv-motion-duration-fast) var(--iv-motion-ease-standard);
  position: relative;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.06);
}

.fullscreen-queue-item:hover {
  background: rgba(255, 255, 255, 0.05);
  border-color: rgba(255, 255, 255, 0.12);
}

.fullscreen-queue-item:active {
  background: rgba(255, 255, 255, 0.08);
}

/* Current Playing Item */
.fullscreen-queue-item.current {
  cursor: default;
  background: rgba(var(--spice-rgb-accent, 30, 215, 96), 0.1);
  border-color: rgba(var(--spice-rgb-accent, 30, 215, 96), 0.28);
}

.fullscreen-queue-item.current:hover {
  background: rgba(var(--spice-rgb-accent, 30, 215, 96), 0.12);
}

/* Album Art */
.fullscreen-queue-item-image {
  width: 48px;
  height: 48px;
  border-radius: 0;
  object-fit: cover;
  flex-shrink: 0;
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: none;
}

.fullscreen-queue-item.current .fullscreen-queue-item-image {
  border-color: rgba(var(--spice-rgb-accent, 30, 215, 96), 0.34);
}

/* Track Info */
.fullscreen-queue-item-info {
  flex: 1;
  min-width: 0;
  overflow: hidden;
}

.fullscreen-queue-item-title {
  font-size: 14px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.9);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.4;
  letter-spacing: -0.01em;
  transition: color var(--iv-motion-duration-fast) var(--iv-motion-ease-standard);
}

.fullscreen-queue-item.current .fullscreen-queue-item-title {
  color: var(--spice-accent, #1ed760);
  font-weight: 600;
}

.fullscreen-queue-item-artist {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.4);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.4;
  margin-top: 3px;
  transition: color var(--iv-motion-duration-fast) var(--iv-motion-ease-standard);
}

/* Playing Indicator */
.fullscreen-queue-item-playing {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  background: rgba(var(--spice-rgb-accent, 30, 215, 96), 0.12);
  border: 1px solid rgba(var(--spice-rgb-accent, 30, 215, 96), 0.24);
  border-radius: 0;
}

.fullscreen-queue-playing-icon {
  color: var(--spice-accent, #1ed760);
  font-size: 16px;
}

/* Empty State */
.fullscreen-queue-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 60px 24px;
  color: rgba(255, 255, 255, 0.42);
  font-size: 14px;
  text-align: center;
  font-weight: 500;
  gap: 0;
}

/* ========================================
   TMI Full View (Fullscreen Left Panel)
   ======================================== */

/* Album art clickable hint */
/* Album art clickable container */
.clickable-album-container {
  transition: all 0.3s ease;
  overflow: hidden;
}

.clickable-album-container:hover {
  transform: scale(1.02);
  box-shadow: 0 0 0 3px rgba(30, 215, 96, 0.4), 0 8px 40px rgba(0, 0, 0, 0.5);
}

.album-tmi-hint {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(4px);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: all 0.3s ease;
}

.clickable-album-container:hover .album-tmi-hint {
  opacity: 1;
}

.album-tmi-hint-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  transform: translateY(10px);
  transition: all 0.3s ease;
}

.clickable-album-container:hover .album-tmi-hint-content {
  transform: translateY(0);
}

.album-tmi-icon {
  font-size: 32px;
}

.album-tmi-text {
  font-family: 'Pretendard Variable', Pretendard, sans-serif;
  font-size: 14px;
  font-weight: 700;
  color: white;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.album-tmi-disclaimer {
  font-family: 'Pretendard Variable', Pretendard, sans-serif;
  font-size: 11px;
  font-weight: 400;
  color: rgba(255, 255, 255, 0.7);
  text-align: center;
  line-height: 1.4;
  margin-top: 8px;
  padding: 0 8px;
  text-transform: none;
  letter-spacing: 0;
}

/* TMI Full View Container */
.tmi-fullview {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  padding: 40px;
  box-sizing: border-box;
  animation: tmiViewIn 0.4s cubic-bezier(0.16, 1, 0.3, 1);
  --tmi-scale: var(--fullscreen-tmi-font-size, 1);
}

@keyframes tmiViewIn {
  from {
    opacity: 0;
    transform: scale(0.95);
  }

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

/* Header */
.tmi-fullview-header {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 24px;
  margin-bottom: 28px;
}

.tmi-fullview-cover {
  width: calc(100px * var(--tmi-scale, 1));
  height: calc(100px * var(--tmi-scale, 1));
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
  object-fit: cover;
}

.tmi-fullview-info {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  flex: 1;
}

.tmi-fullview-label {
  display: inline-block;
  font-family: 'Pretendard Variable', Pretendard, sans-serif;
  font-size: calc(11px * var(--tmi-scale, 1));
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: #1ed760;
  background: rgba(30, 215, 96, 0.15);
  padding: calc(6px * var(--tmi-scale, 1)) calc(12px * var(--tmi-scale, 1));
  border-radius: 4px;
  margin-bottom: calc(8px * var(--tmi-scale, 1));
}

.tmi-fullview-track {
  font-family: 'Pretendard Variable', Pretendard, sans-serif;
  font-size: calc(24px * var(--tmi-scale, 1));
  font-weight: 700;
  color: white;
  margin: 0 0 calc(4px * var(--tmi-scale, 1)) 0;
  line-height: 1.2;
}

.tmi-fullview-artist {
  font-family: 'Pretendard Variable', Pretendard, sans-serif;
  font-size: calc(16px * var(--tmi-scale, 1));
  font-weight: 500;
  color: rgba(255, 255, 255, 0.6);
  margin: 0;
}

/* Content */
.tmi-fullview-content {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  padding-right: 8px;
}

.tmi-fullview-content::-webkit-scrollbar {
  width: 4px;
}

.tmi-fullview-content::-webkit-scrollbar-track {
  background: transparent;
}

.tmi-fullview-content::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.15);
  border-radius: 2px;
}

.tmi-fullview-content::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, 0.25);
}

.tmi-fullview-description {
  margin-bottom: 28px;
  padding: 20px;
  background: rgba(255, 255, 255, 0.03);
  border-radius: 12px;
  border-left: 3px solid rgba(30, 215, 96, 0.5);
}

.tmi-fullview-description p {
  font-family: 'Pretendard Variable', Pretendard, sans-serif;
  font-size: calc(15px * var(--tmi-scale, 1));
  line-height: 1.7;
  color: rgba(255, 255, 255, 0.85);
  margin: 0;
}

/* Trivia List */
.tmi-fullview-trivia-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.tmi-fullview-trivia-label {
  font-family: 'Pretendard Variable', Pretendard, sans-serif;
  font-size: calc(11px * var(--tmi-scale, 1));
  font-weight: 700;
  color: rgba(255, 255, 255, 0.4);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  margin-bottom: calc(8px * var(--tmi-scale, 1));
}

.tmi-fullview-trivia-item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 16px;
  background: rgba(255, 255, 255, 0.03);
  border-radius: 10px;
  transition: background 0.2s ease;
}

.tmi-fullview-trivia-item:hover {
  background: rgba(255, 255, 255, 0.06);
}

.tmi-trivia-bullet {
  color: #1ed760;
  font-size: calc(12px * var(--tmi-scale, 1));
  flex-shrink: 0;
  margin-top: 2px;
}

.tmi-trivia-text {
  font-family: 'Pretendard Variable', Pretendard, sans-serif;
  font-size: calc(14px * var(--tmi-scale, 1));
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.85);
}

/* Footer with Close Button */
.tmi-fullview-footer {
  margin-top: 24px;
  padding-top: 20px;
  display: flex;
  justify-content: center;
  flex-shrink: 0;
}

.tmi-fullview-close-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 28px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 24px;
  color: rgba(255, 255, 255, 0.8);
  font-family: 'Pretendard Variable', Pretendard, sans-serif;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
}

.tmi-fullview-close-btn:hover {
  background: rgba(255, 255, 255, 0.15);
  border-color: rgba(255, 255, 255, 0.2);
  color: white;
}

.tmi-fullview-close-btn span:first-child {
  font-size: 12px;
}

/* Empty State */
.tmi-fullview-empty {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 150px;
}

.tmi-fullview-empty p {
  font-family: 'Pretendard Variable', Pretendard, sans-serif;
  font-size: 14px;
  color: rgba(255, 255, 255, 0.35);
}

/* Loading State */
.tmi-fullview-loading .tmi-loading-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  gap: 20px;
}

.tmi-loading-spinner {
  width: 40px;
  height: 40px;
  border: 3px solid rgba(255, 255, 255, 0.1);
  border-top-color: #1ed760;
  border-radius: 50%;
  animation: tmiSpin 0.8s linear infinite;
}

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

.tmi-loading-content p {
  font-family: 'Pretendard Variable', Pretendard, sans-serif;
  font-size: 14px;
  color: rgba(255, 255, 255, 0.5);
}

/* ========================================
   Song Info Sidebar
   ======================================== */

.song-info-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  z-index: var(--iv-layer-modal);
  animation: sidebarOverlayIn 0.25s ease;
}

@keyframes sidebarOverlayIn {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

.song-info-modal {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: 380px;
  max-width: 90vw;
  background: linear-gradient(180deg,
      rgba(28, 28, 28, 0.98) 0%,
      rgba(18, 18, 18, 0.98) 100%);
  border-left: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: -10px 0 40px rgba(0, 0, 0, 0.5);
  animation: sidebarSlideIn 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  overflow-y: auto;
  overflow-x: hidden;
}

@keyframes sidebarSlideIn {
  from {
    opacity: 0;
    transform: translateX(100%);
  }

  to {
    opacity: 1;
    transform: translateX(0);
  }
}

.song-info-modal-close {
  position: sticky;
  top: 16px;
  margin-left: auto;
  margin-right: 16px;
  margin-bottom: -48px;
  width: 36px;
  height: 36px;
  border: none;
  background: rgba(255, 255, 255, 0.08);
  color: rgba(255, 255, 255, 0.6);
  border-radius: 50%;
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10;
}

.song-info-modal-close:hover {
  background: rgba(255, 255, 255, 0.15);
  color: white;
}

.song-info-modal-header {
  padding: 24px 24px 20px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.song-info-modal-title {
  font-size: 20px;
  font-weight: 700;
  color: white;
  margin: 0 0 6px 0;
  line-height: 1.3;
  padding-right: 48px;
}

.song-info-modal-artist {
  font-size: 13px;
  color: rgba(255, 255, 255, 0.45);
  margin: 0;
  font-weight: 500;
}

.song-info-modal-description {
  padding: 20px 24px;
  font-size: 14px;
  line-height: 1.7;
  color: rgba(255, 255, 255, 0.75);
  margin: 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.song-info-modal-trivia {
  padding: 20px 24px 32px;
}

.song-info-modal-trivia h3 {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #1ed760;
  margin: 0 0 16px 0;
}

.song-info-modal-trivia ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.song-info-modal-trivia li {
  position: relative;
  padding-left: 18px;
  font-size: 13px;
  line-height: 1.65;
  color: rgba(255, 255, 255, 0.7);
}

.song-info-modal-trivia li::before {
  content: '✦';
  position: absolute;
  left: 0;
  color: #1ed760;
  font-size: 9px;
  top: 4px;
}

/* ========================================
   TMI Full View Styles (Fixed)
   ======================================== */

.tmi-fullview {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 0;
  /* Allow shrinking */
  width: 100%;
  overflow: hidden;
  /* Prevent outer scroll */
  color: var(--spice-text);
  padding: 40px;
  /* Consistent padding */
  box-sizing: border-box;
  animation: tmiViewIn 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes tmiViewIn {
  from {
    opacity: 0;
    transform: scale(0.95);
  }

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

.tmi-fullview-header {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 24px;
  margin-bottom: 24px;
  margin-top: 20px;
}

.tmi-fullview-cover {
  width: calc(100px * var(--tmi-scale, 1));
  height: calc(100px * var(--tmi-scale, 1));
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
  object-fit: cover;
}

.tmi-fullview-info {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  flex: 1;
}

.tmi-header-top {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 8px;
}

.tmi-fullview-label {
  display: inline-block;
  font-family: 'Pretendard Variable', Pretendard, sans-serif;
  font-size: calc(11px * var(--tmi-scale, 1));
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: #1ed760;
  background: rgba(30, 215, 96, 0.15);
  padding: calc(6px * var(--tmi-scale, 1)) calc(12px * var(--tmi-scale, 1));
  border-radius: 4px;
}

.tmi-regenerate-btn {
  background: transparent;
  border: none;
  color: rgba(255, 255, 255, 0.6);
  cursor: pointer;
  font-size: 18px;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
  padding: 0;
  line-height: 1;
}

.tmi-regenerate-btn:hover {
  color: white;
  background: rgba(255, 255, 255, 0.1);
  transform: rotate(180deg);
}

.tmi-fullview-track {
  font-family: 'Pretendard Variable', Pretendard, sans-serif;
  font-size: calc(24px * var(--tmi-scale, 1));
  font-weight: 700;
  color: white;
  margin: 0 0 calc(4px * var(--tmi-scale, 1)) 0;
  line-height: 1.2;
}

.tmi-fullview-artist {
  font-family: 'Pretendard Variable', Pretendard, sans-serif;
  font-size: calc(16px * var(--tmi-scale, 1));
  font-weight: 500;
  color: rgba(255, 255, 255, 0.6);
  margin: 0;
}

.tmi-fullview-content {
  flex: 1;
  overflow-y: auto;
  /* Enable inner scroll */
  overflow-x: hidden;
  padding-right: 12px;
  margin-right: -12px;
  /* Compensate padding for scrollbar */
  padding-bottom: 10px;

  /* Scrollbar styling */
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, 0.3) transparent;
}

.tmi-fullview-content::-webkit-scrollbar {
  width: 6px;
}

.tmi-fullview-content::-webkit-scrollbar-track {
  background: transparent;
}

.tmi-fullview-content::-webkit-scrollbar-thumb {
  background-color: rgba(255, 255, 255, 0.2);
  border-radius: 3px;
  transition: background-color 0.2s;
}

.tmi-fullview-content::-webkit-scrollbar-thumb:hover {
  background-color: rgba(255, 255, 255, 0.4);
}

.tmi-fullview-description {
  margin-bottom: 24px;
  padding: 20px;
  background: rgba(255, 255, 255, 0.03);
  border-radius: 12px;
  border-left: 3px solid rgba(30, 215, 96, 0.5);
}

.tmi-fullview-description p {
  font-family: 'Pretendard Variable', Pretendard, sans-serif;
  font-size: calc(15px * var(--tmi-scale, 1));
  line-height: 1.7;
  color: rgba(255, 255, 255, 0.85);
  margin: 0;
}

.tmi-fullview-trivia-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.tmi-fullview-trivia-label {
  font-family: 'Pretendard Variable', Pretendard, sans-serif;
  font-size: calc(11px * var(--tmi-scale, 1));
  font-weight: 700;
  color: rgba(255, 255, 255, 0.4);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  margin-bottom: calc(4px * var(--tmi-scale, 1));
}

.tmi-fullview-trivia-item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 16px;
  background: rgba(255, 255, 255, 0.03);
  border-radius: 10px;
  transition: background 0.2s ease;
}

.tmi-fullview-trivia-item:hover {
  background: rgba(255, 255, 255, 0.06);
}

.tmi-trivia-bullet {
  color: #1ed760;
  font-size: calc(12px * var(--tmi-scale, 1));
  flex-shrink: 0;
  margin-top: 3px;
}

.tmi-trivia-text {
  font-family: 'Pretendard Variable', Pretendard, sans-serif;
  font-size: calc(14px * var(--tmi-scale, 1));
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.85);
}

.tmi-fullview-footer {
  flex-shrink: 0;
  padding-top: 20px;
  padding-bottom: 10px;
  display: flex;
  justify-content: center;
  gap: 16px;
}

.tmi-btn-regenerate {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  background: rgba(229, 9, 20, 0.15);
  border: 1px solid rgba(229, 9, 20, 0.3);
  border-radius: 50%;
  color: #e50914;
  cursor: pointer;
  transition: all 0.2s ease;
}

.tmi-btn-regenerate:hover {
  background: #e50914;
  color: white;
  transform: scale(1.05);
  box-shadow: 0 4px 12px rgba(229, 9, 20, 0.4);
}

.tmi-btn-regenerate:hover span {
  transform: rotate(180deg);
  transition: transform 0.4s ease;
}

.tmi-btn-regenerate:active {
  transform: scale(0.95);
}

.tmi-btn-close {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 24px;
  height: 42px;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 21px;
  color: rgba(255, 255, 255, 0.9);
  font-family: 'Pretendard Variable', Pretendard, sans-serif;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
}

.tmi-btn-close:hover {
  background: rgba(255, 255, 255, 0.2);
  color: white;
}

/* Loading Spinner for Regenerate/Loading */
.tmi-loading-spinner {
  width: 40px;
  height: 40px;
  border: 3px solid rgba(255, 255, 255, 0.1);
  border-top-color: #1ed760;
  border-radius: 50%;
  animation: tmiSpin 0.8s linear infinite;
}

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

.tmi-loading-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  gap: 20px;
}

/* ========================================
   TMI Verification & Source Styles
   ======================================== */

/* Reliability Badge (replaces Verification Badge) */
.tmi-reliability-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 8px;
  border-radius: 12px;
  font-family: 'Pretendard Variable', Pretendard, sans-serif;
  font-size: calc(10px * var(--tmi-scale, 1));
  font-weight: 600;
  letter-spacing: 0.02em;
  transition: all 0.2s ease;
}

.tmi-reliability-badge.very-high {
  background: rgba(30, 215, 96, 0.2);
  color: #1ed760;
  border: 1px solid rgba(30, 215, 96, 0.5);
  box-shadow: 0 0 8px rgba(30, 215, 96, 0.3);
}

.tmi-reliability-badge.high {
  background: rgba(30, 215, 96, 0.15);
  color: #1ed760;
  border: 1px solid rgba(30, 215, 96, 0.3);
}

.tmi-reliability-badge.medium {
  background: rgba(100, 180, 255, 0.15);
  color: #64b4ff;
  border: 1px solid rgba(100, 180, 255, 0.3);
}

.tmi-reliability-badge.low {
  background: rgba(255, 170, 50, 0.12);
  color: #ffaa32;
  border: 1px solid rgba(255, 170, 50, 0.25);
}

.tmi-reliability-badge.none {
  background: rgba(255, 255, 255, 0.08);
  color: rgba(255, 255, 255, 0.5);
  border: 1px solid rgba(255, 255, 255, 0.15);
}

/* Legacy Verification Badge - kept for backward compatibility */
.tmi-verification-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 8px;
  border-radius: 12px;
  font-family: 'Pretendard Variable', Pretendard, sans-serif;
  font-size: calc(10px * var(--tmi-scale, 1));
  font-weight: 600;
  letter-spacing: 0.02em;
  transition: all 0.2s ease;
}

.tmi-verification-badge.verified {
  background: rgba(30, 215, 96, 0.15);
  color: #1ed760;
  border: 1px solid rgba(30, 215, 96, 0.3);
}

.tmi-verification-badge.unverified {
  background: rgba(255, 170, 50, 0.12);
  color: #ffaa32;
  border: 1px solid rgba(255, 170, 50, 0.25);
}

.tmi-badge-icon {
  font-size: calc(10px * var(--tmi-scale, 1));
  line-height: 1;
}

.tmi-badge-text {
  font-size: calc(9px * var(--tmi-scale, 1));
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* Description Header */
.tmi-description-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
}

/* Description with confidence level */
.tmi-fullview-description.high {
  border-left-color: rgba(30, 215, 96, 0.6);
}

.tmi-fullview-description.medium {
  border-left-color: rgba(100, 180, 255, 0.5);
}

.tmi-fullview-description.low {
  border-left-color: rgba(255, 170, 50, 0.5);
}

.tmi-fullview-description.none {
  border-left-color: rgba(255, 255, 255, 0.2);
}

/* Legacy verified/unverified styles */
.tmi-fullview-description.verified {
  border-left-color: rgba(30, 215, 96, 0.6);
}

.tmi-fullview-description.unverified {
  border-left-color: rgba(255, 170, 50, 0.5);
}

/* Sources Section */
.tmi-sources-section {
  margin-top: 24px;
  padding-top: 20px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.tmi-sources-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
}

.tmi-sources-label {
  font-family: 'Pretendard Variable', Pretendard, sans-serif;
  font-size: calc(13px * var(--tmi-scale, 1));
  font-weight: 600;
  color: rgba(255, 255, 255, 0.85);
  letter-spacing: 0.02em;
}

/* Source Groups */
.tmi-sources-group {
  margin-bottom: 16px;
}

.tmi-sources-group:last-child {
  margin-bottom: 0;
}

.tmi-sources-group-label {
  display: block;
  font-family: 'Pretendard Variable', Pretendard, sans-serif;
  font-size: calc(11px * var(--tmi-scale, 1));
  font-weight: 500;
  color: rgba(255, 255, 255, 0.5);
  margin-bottom: 8px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.tmi-sources-group.verified .tmi-sources-group-label {
  color: rgba(30, 215, 96, 0.8);
}

.tmi-sources-group.related .tmi-sources-group-label {
  color: rgba(100, 180, 255, 0.8);
}

.tmi-sources-group.other .tmi-sources-group-label {
  color: rgba(255, 255, 255, 0.4);
}

/* Source Links Container */
.tmi-sources {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.tmi-source-link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 10px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 14px;
  color: rgba(255, 255, 255, 0.55);
  font-family: 'Pretendard Variable', Pretendard, sans-serif;
  font-size: calc(11px * var(--tmi-scale, 1));
  text-decoration: none;
  transition: all 0.2s ease;
  cursor: pointer;
}

.tmi-sources-group.verified .tmi-source-link {
  background: rgba(30, 215, 96, 0.08);
  border-color: rgba(30, 215, 96, 0.2);
  color: rgba(30, 215, 96, 0.9);
}

.tmi-sources-group.verified .tmi-source-link:hover {
  background: rgba(30, 215, 96, 0.15);
  border-color: rgba(30, 215, 96, 0.35);
  color: #1ed760;
}

.tmi-sources-group.related .tmi-source-link {
  background: rgba(100, 180, 255, 0.08);
  border-color: rgba(100, 180, 255, 0.2);
  color: rgba(100, 180, 255, 0.9);
}

.tmi-sources-group.related .tmi-source-link:hover {
  background: rgba(100, 180, 255, 0.15);
  border-color: rgba(100, 180, 255, 0.35);
  color: #64b4ff;
}

.tmi-source-link:hover {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.15);
  color: rgba(255, 255, 255, 0.85);
  transform: translateY(-1px);
}

.tmi-source-icon {
  font-size: calc(10px * var(--tmi-scale, 1));
  opacity: 0.7;
}

.tmi-source-text {
  max-width: 140px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Trivia Item Structure */
.tmi-trivia-content {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  width: 100%;
}

.tmi-trivia-body {
  flex: 1;
  min-width: 0;
}

.tmi-trivia-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}

/* Trivia item with verification status */
.tmi-fullview-trivia-item.verified {
  border-left: 2px solid rgba(30, 215, 96, 0.4);
  padding-left: 14px;
}

.tmi-fullview-trivia-item.unverified {
  border-left: 2px solid rgba(255, 170, 50, 0.35);
  padding-left: 14px;
}

/* Trivia Summary */
.tmi-trivia-summary {
  font-weight: 400;
  font-size: calc(10px * var(--tmi-scale, 1));
  color: rgba(255, 255, 255, 0.35);
  margin-left: 4px;
}

/* ==================== Share Image Modal ==================== */
@keyframes shareImageFadeIn {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

#ivLyrics-share-image-overlay {
  animation: shareImageFadeIn 0.2s ease-out;
}

/* ============================================
   Custom Toast Notification System
   ============================================ */
.ivlyrics-toast-container {
  position: fixed;
  top: 80px;
  right: 24px;
  z-index: var(--iv-layer-toast);
  display: flex;
  flex-direction: column;
  gap: 10px;
  pointer-events: none;
  max-width: 400px;
}

.ivlyrics-toast {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 18px;
  border-radius: 12px;
  background: rgba(30, 30, 30, 0.95);
  border: 1px solid rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4), 0 2px 8px rgba(0, 0, 0, 0.2);
  color: #fff;
  font-family: var(--font-family, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif);
  font-size: 14px;
  font-weight: 500;
  line-height: 1.4;
  cursor: pointer;
  pointer-events: auto;
  opacity: 0;
  transform: translateX(100%) scale(0.9);
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  max-width: 100%;
}

.ivlyrics-toast-show {
  opacity: 1;
  transform: translateX(0) scale(1);
}

.ivlyrics-toast-hide {
  opacity: 0;
  transform: translateX(100%) scale(0.9);
}

.ivlyrics-toast:hover {
  background: rgba(40, 40, 40, 0.98);
  border-color: rgba(255, 255, 255, 0.15);
  transform: translateX(0) scale(1.02);
}

.ivlyrics-toast-success {
  border-left: 3px solid #10b981;
}

.ivlyrics-toast-success .ivlyrics-toast-icon {
  color: #10b981;
}

.ivlyrics-toast-error {
  border-left: 3px solid #ef4444;
}

.ivlyrics-toast-error .ivlyrics-toast-icon {
  color: #ef4444;
}

.ivlyrics-toast-icon {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.ivlyrics-toast-icon svg {
  width: 100%;
  height: 100%;
}

.ivlyrics-toast-message {
  flex: 1;
  min-width: 0;
  word-wrap: break-word;
  overflow-wrap: break-word;
}

.ivlyrics-toast-close {
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  padding: 0;
  border: none;
  background: transparent;
  color: rgba(255, 255, 255, 0.5);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
  transition: all 0.2s ease;
}

.ivlyrics-toast-close:hover {
  background: rgba(255, 255, 255, 0.1);
  color: rgba(255, 255, 255, 0.9);
}

.ivlyrics-toast-close svg {
  width: 16px;
  height: 16px;
}

/* Progress Toast */
.ivlyrics-toast-progress {
  flex-wrap: wrap;
  border-left: 3px solid var(--spice-button, #1db954);
}

.ivlyrics-toast-progress .ivlyrics-toast-icon {
  color: var(--spice-button, #1db954);
}

.ivlyrics-toast-progress-container {
  width: 100%;
  height: 3px;
  background: rgba(255, 255, 255, 0.15);
  border-radius: 2px;
  margin-top: 10px;
  overflow: hidden;
  flex-basis: 100%;
  order: 4;
}

.ivlyrics-toast-progress-bar {
  height: 100%;
  background: var(--spice-button, #1db954);
  border-radius: 2px;
  transition: width 0.15s ease-out;
}

/* Toast animation for stacking */
.ivlyrics-toast-container .ivlyrics-toast:nth-child(n+4) {
  opacity: 0.5;
  transform: translateX(0) scale(0.95);
}

.ivlyrics-toast-container .ivlyrics-toast:nth-child(n+5) {
  display: none;
}

/* =============================================
   TV Mode - Fullscreen Layout
   ============================================= */

/* TV Mode TMI Overlay */
.fullscreen-tv-tmi-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.85);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  animation: tvTmiOverlayIn 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes tvTmiOverlayIn {
  from {
    opacity: 0;
    backdrop-filter: blur(0px);
  }

  to {
    opacity: 1;
    backdrop-filter: blur(20px);
  }
}

.fullscreen-tv-tmi-overlay .tmi-fullview,
.fullscreen-tv-tmi-overlay .tmi-loading-view {
  max-width: 90vw;
  max-height: 90vh;
}

/* TV Mode Album Wrapper - Clickable for TMI */
.fullscreen-tv-album-wrapper {
  position: relative;
  overflow: hidden;
  transition: transform 0.3s ease;
}

.fullscreen-tv-album-wrapper:hover {
  transform: scale(1.02);
}

.fullscreen-tv-album-wrapper .album-tmi-hint {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.3s ease;
  pointer-events: none;
}

.fullscreen-tv-album-wrapper:hover .album-tmi-hint {
  opacity: 1;
}

/* TV Mode Song Info - Bottom Left */
.fullscreen-tv-song-info {
  position: fixed;
  bottom: 48px;
  left: 48px;
  z-index: 100;
  display: flex;
  align-items: flex-end;
  gap: 20px;
  transition:
    opacity var(--iv-motion-duration-medium) var(--iv-motion-ease-standard),
    transform var(--iv-motion-duration-medium) var(--iv-motion-ease-standard);
  pointer-events: auto;
}

.fullscreen-tv-song-info.hidden {
  opacity: 0;
  transform: translateY(var(--iv-motion-distance-md));
  pointer-events: none;
}

/* TV Mode Album Art */
.fullscreen-tv-album {
  flex-shrink: 0;
  object-fit: cover;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5),
    0 4px 16px rgba(0, 0, 0, 0.3);
  transition: transform 0.3s ease;
}

/* TV Mode Track Info */
.fullscreen-tv-track-info {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 4px;
  padding-bottom: 8px;
  max-width: 50vw;
}

/* TV Mode Title */
.fullscreen-tv-title {
  font-weight: 700;
  color: var(--spice-text, #fff);
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.6),
    0 4px 16px rgba(0, 0, 0, 0.4);
  line-height: 1.2;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  font-family: "Pretendard Variable", Pretendard, -apple-system,
    BlinkMacSystemFont, system-ui, Roboto, "Helvetica Neue", "Segoe UI",
    "Apple SD Gothic Neo", "Noto Sans KR", "Malgun Gothic", sans-serif;
  transition:
    transform var(--iv-motion-duration-slow) var(--iv-motion-ease-emphasis),
    opacity var(--iv-motion-duration-medium) var(--iv-motion-ease-standard);
}

/* TV Mode Artist */
.fullscreen-tv-artist {
  font-weight: 500;
  color: rgba(255, 255, 255, 0.85);
  text-shadow: 0 2px 6px rgba(0, 0, 0, 0.5);
  line-height: 1.3;
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: "Pretendard Variable", Pretendard, -apple-system,
    BlinkMacSystemFont, system-ui, Roboto, "Helvetica Neue", "Segoe UI",
    "Apple SD Gothic Neo", "Noto Sans KR", "Malgun Gothic", sans-serif;
  transition:
    transform var(--iv-motion-duration-slow) var(--iv-motion-ease-emphasis),
    opacity var(--iv-motion-duration-medium) var(--iv-motion-ease-standard);
}

/* TV Mode Album Name */
.fullscreen-tv-album-name {
  font-size: 14px;
  font-weight: 400;
  color: rgba(255, 255, 255, 0.6);
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: "Pretendard Variable", Pretendard, -apple-system,
    BlinkMacSystemFont, system-ui, Roboto, "Helvetica Neue", "Segoe UI",
    "Apple SD Gothic Neo", "Noto Sans KR", "Malgun Gothic", sans-serif;
}

/* TV Mode - Hide left panel when active */
.lyrics-lyricsContainer-LyricsContainer.fullscreen-active.tv-mode-active .lyrics-fullscreen-left-panel {
  display: none !important;
}

/* TV Mode - Lyrics take full width */
.lyrics-lyricsContainer-LyricsContainer.fullscreen-active.tv-mode-active {
  grid-template-columns: 1fr !important;
}

.lyrics-lyricsContainer-LyricsContainer.fullscreen-active.tv-mode-active .lyrics-lyricsContainer-SyncedLyricsPage,
.lyrics-lyricsContainer-LyricsContainer.fullscreen-active.tv-mode-active .lyrics-lyricsContainer-UnsyncedLyricsPage {
  grid-column: 1 !important;
  padding-bottom: 200px;
}

/* TV Mode - Scrolling mode fixes (no left/right padding, full width) */
.lyrics-lyricsContainer-LyricsContainer.fullscreen-active.tv-mode-active .lyrics-lyricsContainer-SyncedLyricsPage.scrolling-active,
#lyrics-fullscreen-container .lyrics-lyricsContainer-LyricsContainer.tv-mode-active .lyrics-lyricsContainer-SyncedLyricsPage.scrolling-active {
  padding-left: 0 !important;
  padding-right: 0 !important;
  margin: 0 !important;
  max-width: 100% !important;
  width: 100% !important;
}

/* TV Mode - SyncedLyrics inner container full width */
.lyrics-lyricsContainer-LyricsContainer.fullscreen-active.tv-mode-active .lyrics-lyricsContainer-SyncedLyricsPage.scrolling-active .lyrics-lyricsContainer-SyncedScrollView,
#lyrics-fullscreen-container .lyrics-lyricsContainer-LyricsContainer.tv-mode-active .lyrics-lyricsContainer-SyncedLyricsPage.scrolling-active .lyrics-lyricsContainer-SyncedScrollView {
  padding-left: clamp(24px, 4vw, 64px) !important;
  padding-right: clamp(24px, 4vw, 64px) !important;
}

/* TV Mode - 가사 라인에 사용자 정렬 설정 적용 */
.lyrics-lyricsContainer-LyricsContainer.fullscreen-active.tv-mode-active .lyrics-lyricsContainer-SyncedLyricsPage.scrolling-active .lyrics-lyricsContainer-LyricsLine,
#lyrics-fullscreen-container .lyrics-lyricsContainer-LyricsContainer.tv-mode-active .lyrics-lyricsContainer-SyncedLyricsPage.scrolling-active .lyrics-lyricsContainer-LyricsLine {
  text-align: var(--lyrics-align-text, center);
  width: 100%;
}

/* TV Mode - Responsive adjustments */
@media (max-width: 1200px) {
  .fullscreen-tv-song-info {
    bottom: 36px;
    left: 36px;
    gap: 16px;
  }
}

@media (max-width: 768px) {
  .fullscreen-tv-song-info {
    bottom: 24px;
    left: 24px;
    gap: 12px;
  }

  .fullscreen-tv-track-info {
    max-width: 60vw;
  }
}

/* TV Mode - Portrait orientation override */
@media (orientation: portrait) {

  /* TV Mode: Keep single column layout, lyrics take full height */
  .lyrics-lyricsContainer-LyricsContainer.fullscreen-active.tv-mode-active {
    grid-template-columns: 100% !important;
    grid-template-rows: 1fr !important;
    gap: 0 !important;
  }

  /* TV Mode: Lyrics container takes full space */
  .lyrics-lyricsContainer-LyricsContainer.fullscreen-active.tv-mode-active .lyrics-lyricsContainer-SyncedLyricsPage,
  .lyrics-lyricsContainer-LyricsContainer.fullscreen-active.tv-mode-active .lyrics-lyricsContainer-UnsyncedLyricsPage {
    grid-row: 1 !important;
    grid-column: 1 !important;
    height: 100% !important;
    padding-bottom: 220px;
  }

  /* TV Mode: Song info at bottom-left in portrait */
  .lyrics-lyricsContainer-LyricsContainer.fullscreen-active.tv-mode-active .fullscreen-tv-song-info {
    bottom: 24px;
    left: 24px;
  }
}

/* TV Mode Controls */
/* TV Mode Controls Wrapper (right side) */
.fullscreen-tv-controls-wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin-left: auto;
  padding-left: 24px;
  pointer-events: auto;
}

/* TV Mode Controls */
.fullscreen-tv-controls {
  display: flex;
  align-items: center;
  gap: 8px;
}

.fullscreen-tv-control-btn {
  background: transparent;
  border: none;
  color: rgba(255, 255, 255, 0.8);
  cursor: pointer;
  padding: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  transition:
    color var(--iv-motion-duration-fast) var(--iv-motion-ease-standard),
    background var(--iv-motion-duration-fast) var(--iv-motion-ease-standard),
    transform var(--iv-motion-duration-fast) var(--iv-motion-ease-emphasis),
    box-shadow var(--iv-motion-duration-fast) var(--iv-motion-ease-standard);
}

.fullscreen-tv-control-btn:hover {
  color: white;
  background: rgba(255, 255, 255, 0.1);
  transform: translateY(-2px) scale(1.05);
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.16);
}

.fullscreen-tv-control-btn:active {
  transform: translateY(0) scale(0.94);
}

.fullscreen-tv-control-btn.play-pause {
  padding: 6px;
  background: rgba(255, 255, 255, 0.1);
  margin: 0 4px;
}

.fullscreen-tv-control-btn.play-pause:hover {
  background: rgba(255, 255, 255, 0.2);
}

/* TV Mode Progress bar */
.fullscreen-tv-progress {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 200px;
  transition:
    transform var(--iv-motion-duration-slow) var(--iv-motion-ease-emphasis),
    opacity var(--iv-motion-duration-medium) var(--iv-motion-ease-standard);
}

.fullscreen-tv-time {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.7);
  min-width: 36px;
  font-variant-numeric: tabular-nums;
}

.fullscreen-tv-time.total {
  text-align: right;
}

.fullscreen-tv-progress-bar {
  flex: 1;
  height: 4px;
  background: rgba(255, 255, 255, 0.2);
  border-radius: 2px;
  overflow: hidden;
  cursor: pointer;
  transition:
    height var(--iv-motion-duration-fast) var(--iv-motion-ease-emphasis),
    background var(--iv-motion-duration-medium) var(--iv-motion-ease-standard);
}

.fullscreen-tv-progress-bar:hover {
  height: 6px;
}

.fullscreen-tv-progress-fill {
  height: 100%;
  background: rgba(255, 255, 255, 0.8);
  border-radius: 2px;
  transition: width var(--iv-motion-duration-medium) var(--iv-motion-ease-emphasis);
}

.fullscreen-tv-controls-wrapper {
  transition:
    opacity var(--iv-motion-duration-medium) var(--iv-motion-ease-standard),
    transform var(--iv-motion-duration-medium) var(--iv-motion-ease-emphasis);
}

.fullscreen-tv-controls-wrapper.hidden {
  opacity: 0;
  transform: translateY(8px);
  pointer-events: none;
}

.fullscreen-tv-controls-wrapper.hidden .fullscreen-tv-controls,
.fullscreen-tv-controls-wrapper.hidden .fullscreen-tv-progress {
  opacity: 0;
}

/* Sync Creator Glitter & Hint */
@keyframes glitter {
  0% {
    box-shadow: 0 0 2px rgba(255, 255, 255, 0.2);
  }

  50% {
    box-shadow: 0 0 10px rgba(255, 255, 255, 0.6), 0 0 5px rgba(255, 255, 255, 0.4) inset;
  }

  100% {
    box-shadow: 0 0 2px rgba(255, 255, 255, 0.2);
  }
}

.sync-creator-hint {
  position: absolute;
  right: calc(100% + 10px);
  top: 50%;
  transform: translateY(-50%);
  background: var(--spice-card);
  color: var(--spice-text);
  padding: 8px 12px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: bold;
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  animation: hint-fade-in-out 4s ease-in-out forwards;
  z-index: 2;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
  border: 1px solid var(--iv-sync-accent, #3182f6);
}

.sync-creator-hint--portal {
  position: fixed;
  left: var(--sync-creator-hint-left);
  top: var(--sync-creator-hint-top);
  right: auto;
  max-width: min(280px, calc(100vw - 24px));
  white-space: normal;
  transform: translate(-100%, -50%);
  animation: hint-portal-fade-in-out 4s ease-in-out forwards;
  z-index: calc(var(--iv-layer-fullscreen) + 8);
}

.ivlyrics-sync-creator-overlay {
  position: fixed;
  inset: 0;
  z-index: var(--iv-layer-modal);
}

/* === Sync Creator: cohesive Toss-style polish === */
.ivlyrics-sync-creator-shell {
  animation: ivlyricsSoftFadeIn var(--iv-motion-duration-medium) var(--iv-motion-ease-standard);
}

.ivlyrics-sync-creator-shell *,
.ivlyrics-sync-creator-shell *::before,
.ivlyrics-sync-creator-shell *::after {
  box-sizing: border-box;
}

.ivlyrics-sync-creator-shell button {
  font-family: inherit;
  outline: none;
  transition:
    transform var(--iv-motion-duration-fast) var(--iv-motion-ease-emphasis),
    background var(--iv-motion-duration-fast) var(--iv-motion-ease-standard),
    border-color var(--iv-motion-duration-fast) var(--iv-motion-ease-standard),
    color var(--iv-motion-duration-fast) var(--iv-motion-ease-standard),
    box-shadow var(--iv-motion-duration-fast) var(--iv-motion-ease-standard),
    opacity var(--iv-motion-duration-fast) var(--iv-motion-ease-standard);
  will-change: transform;
}

.ivlyrics-sync-creator-shell button:hover:not(:disabled) {
  transform: translateY(-1px);
  filter: brightness(1.04);
}

.ivlyrics-sync-creator-shell button:active:not(:disabled) {
  transform: translateY(0) scale(0.97);
  filter: brightness(0.96);
}

.ivlyrics-sync-creator-shell button:focus-visible {
  box-shadow: 0 0 0 3px rgba(var(--iv-sync-accent-rgb, 49, 130, 246), 0.34);
}

.ivlyrics-sync-creator-shell button:disabled {
  cursor: not-allowed;
  opacity: 0.5;
}

.ivlyrics-sync-creator-shell select,
.ivlyrics-sync-creator-shell textarea {
  font-family: inherit;
  outline: none;
  transition:
    background var(--iv-motion-duration-fast) var(--iv-motion-ease-standard),
    border-color var(--iv-motion-duration-fast) var(--iv-motion-ease-standard),
    box-shadow var(--iv-motion-duration-fast) var(--iv-motion-ease-standard);
}

.ivlyrics-sync-creator-shell select:hover,
.ivlyrics-sync-creator-shell textarea:hover {
  background: rgba(255, 255, 255, 0.085) !important;
  border-color: rgba(148, 163, 184, 0.22) !important;
}

.ivlyrics-sync-creator-shell select:focus-visible,
.ivlyrics-sync-creator-shell textarea:focus {
  border-color: rgba(var(--iv-sync-accent-rgb, 49, 130, 246), 0.62) !important;
  box-shadow: 0 0 0 3px rgba(var(--iv-sync-accent-rgb, 49, 130, 246), 0.18);
}

.ivlyrics-sync-creator-shell select option {
  background: #1a1c20;
  color: var(--spice-text);
}

/* Scrollable surfaces */
.ivlyrics-sync-creator-shell *::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

.ivlyrics-sync-creator-shell *::-webkit-scrollbar-track {
  background: transparent;
}

.ivlyrics-sync-creator-shell *::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.14);
  border-radius: 999px;
  transition: background 200ms ease;
}

.ivlyrics-sync-creator-shell *::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, 0.24);
}

/* Playback progress bar thumb on hover */
.ivlyrics-sync-creator-shell [data-iv-progress-bar] {
  position: relative;
}

.ivlyrics-sync-creator-shell [data-iv-progress-bar]::after {
  content: '';
  position: absolute;
  top: 50%;
  left: var(--iv-progress, 0%);
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--iv-sync-accent, #3182f6);
  box-shadow: 0 2px 10px rgba(var(--iv-sync-accent-rgb, 49, 130, 246), 0.55);
  transform: translate(-50%, -50%) scale(0);
  transition: transform 180ms var(--iv-motion-ease-emphasis);
  pointer-events: none;
}

.ivlyrics-sync-creator-shell [data-iv-progress-bar]:hover::after {
  transform: translate(-50%, -50%) scale(1);
}

.sync-creator-hint::after {
  content: '';
  position: absolute;
  top: 50%;
  right: -6px;
  transform: translateY(-50%);
  border-width: 6px 0 6px 6px;
  border-style: solid;
  border-color: transparent transparent transparent var(--iv-sync-accent, #3182f6);
}

@keyframes hint-fade-in-out {
  0% {
    opacity: 0;
    transform: translateY(-50%) translateX(10px);
  }

  15% {
    opacity: 1;
    transform: translateY(-50%) translateX(0);
  }

  85% {
    opacity: 1;
    transform: translateY(-50%) translateX(0);
  }

  100% {
    opacity: 0;
    transform: translateY(-50%) translateX(10px);
  }
}

@keyframes hint-portal-fade-in-out {
  0% {
    opacity: 0;
    transform: translate(calc(-100% + 10px), -50%);
  }

  15% {
    opacity: 1;
    transform: translate(-100%, -50%);
  }

  85% {
    opacity: 1;
    transform: translate(-100%, -50%);
  }

  100% {
    opacity: 0;
    transform: translate(calc(-100% + 10px), -50%);
  }
}

/* Fluent floating toolbar refresh */
.lyrics-fluent-floating-toolbar {
  --iv-floating-toolbar-shell: transparent;
  --iv-floating-toolbar-border: transparent;
  --iv-floating-button-shell: rgba(255, 255, 255, 0.06);
  --iv-floating-button-shell-hover: rgba(255, 255, 255, 0.1);
  --iv-floating-button-border: rgba(255, 255, 255, 0.1);
  --iv-floating-button-shadow:
    0 8px 18px rgba(0, 0, 0, 0.22);
  position: fixed;
  gap: 10px;
  padding: 10px;
  border-radius: 0;
  background: var(--iv-floating-toolbar-shell);
  border: 1px solid var(--iv-floating-toolbar-border);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  box-shadow: none;
  isolation: isolate;
}

.lyrics-fluent-floating-toolbar::before {
  display: none;
}

.lyrics-fluent-floating-toolbar:hover {
  box-shadow: none;
}

.lyrics-config-button-container.lyrics-fluent-floating-toolbar,
.lyrics-config-button-container.lyrics-fluent-floating-toolbar:hover,
.lyrics-lyricsContainer-LyricsContainer.fullscreen-active .lyrics-config-button-container.lyrics-fluent-floating-toolbar {
  background: transparent !important;
  border: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  box-shadow: none !important;
  outline: none !important;
}

.lyrics-fluent-floating-toolbar .lyrics-floating-menu-content {
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  width: 100%;
  min-height: 0;
  max-height: calc(
    100vh
    - var(--iv-floating-toolbar-top-gap, 20px)
    - var(--iv-floating-toolbar-bottom-gap, 20px)
    - var(--iv-floating-toolbar-padding-block, 20px)
    - var(--iv-floating-toolbar-menu-offset, 0px)
    - var(--iv-floating-menu-content-top-offset, 0px)
  );
  max-height: calc(
    100dvh
    - var(--iv-floating-toolbar-top-gap, 20px)
    - var(--iv-floating-toolbar-bottom-gap, 20px)
    - var(--iv-floating-toolbar-padding-block, 20px)
    - var(--iv-floating-toolbar-menu-offset, 0px)
    - var(--iv-floating-menu-content-top-offset, 0px)
  );
  margin-top: var(--iv-floating-menu-content-top-offset, 0px);
  padding: 25px 3px;
  scroll-padding-block: 25px;
  overflow-x: hidden;
  overflow-y: auto;
  overflow-anchor: none;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, 0.28) transparent;
  touch-action: pan-y;
  background: transparent;
  border: none;
  box-shadow: none;
}

.lyrics-config-button-container>.lyrics-floating-menu-content {
  flex-shrink: 1;
}

.lyrics-fluent-floating-toolbar .lyrics-floating-menu-content>* {
  flex-shrink: 0;
}

.lyrics-fluent-floating-toolbar .lyrics-floating-menu-content::-webkit-scrollbar {
  width: 6px;
}

.lyrics-fluent-floating-toolbar .lyrics-floating-menu-content::-webkit-scrollbar-track {
  background: transparent;
}

.lyrics-fluent-floating-toolbar .lyrics-floating-menu-content::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.22);
  border-radius: 999px;
}

.lyrics-fluent-floating-toolbar .lyrics-floating-menu-content::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, 0.34);
}

.lyrics-fluent-floating-toolbar .lyrics-config-button {
  width: 44px;
  height: 44px;
  border-radius: 0;
  border: 1px solid var(--iv-floating-button-border);
  background: var(--iv-floating-button-shell);
  color: var(--spice-text, rgba(255, 255, 255, 0.92));
  box-shadow: var(--iv-floating-button-shadow);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  transition:
    transform var(--iv-motion-duration-fast) var(--iv-motion-ease-standard),
    background var(--iv-motion-duration-fast) var(--iv-motion-ease-standard),
    border-color var(--iv-motion-duration-fast) var(--iv-motion-ease-standard),
    box-shadow var(--iv-motion-duration-fast) var(--iv-motion-ease-standard),
    color var(--iv-motion-duration-fast) var(--iv-motion-ease-standard),
    opacity var(--iv-motion-duration-fast) var(--iv-motion-ease-standard);
}

.lyrics-fluent-floating-toolbar .lyrics-config-button::before {
  display: none;
}

.lyrics-fluent-floating-toolbar .lyrics-config-button:hover {
  transform: translateY(-1px);
  background: var(--iv-floating-button-shell-hover);
  border-color: rgba(255, 255, 255, 0.16);
  color: #fff;
  box-shadow:
    0 10px 22px rgba(0, 0, 0, 0.24),
    0 0 0 1px rgba(255, 255, 255, 0.03);
}

.lyrics-fluent-floating-toolbar .lyrics-config-button:active {
  transform: translateY(0);
}

.lyrics-fluent-floating-toolbar .lyrics-config-button:focus-visible {
  outline: none;
  border-color: rgba(var(--spice-rgb-accent, 30, 215, 96), 0.7);
  box-shadow:
    0 0 0 3px rgba(var(--spice-rgb-accent, 30, 215, 96), 0.2),
    0 8px 18px rgba(0, 0, 0, 0.2);
}

.lyrics-fluent-floating-toolbar .lyrics-config-button svg {
  transition:
    transform var(--iv-motion-duration-fast) var(--iv-motion-ease-standard),
    color var(--iv-motion-duration-fast) var(--iv-motion-ease-standard),
    opacity var(--iv-motion-duration-fast) var(--iv-motion-ease-standard);
}

.lyrics-fluent-floating-toolbar .lyrics-config-button:hover svg {
  transform: none;
}

.lyrics-fluent-floating-toolbar .lyrics-config-button[data-active="true"],
.lyrics-fluent-floating-toolbar .lyrics-config-button.active,
.lyrics-fluent-floating-toolbar .lyrics-marketplace-button.active,
.lyrics-fluent-floating-toolbar .lyrics-mode-button.active {
  background: rgba(var(--spice-rgb-accent, 30, 215, 96), 0.16);
  border-color: rgba(var(--spice-rgb-accent, 30, 215, 96), 0.42);
  color: var(--spice-text, #fff);
  box-shadow:
    0 10px 22px rgba(0, 0, 0, 0.22),
    0 0 0 1px rgba(var(--spice-rgb-accent, 30, 215, 96), 0.12);
}

.lyrics-fluent-floating-toolbar .lyrics-mode-button.active svg,
.lyrics-fluent-floating-toolbar .lyrics-marketplace-button.active svg {
  color: var(--spice-accent, #1ed760);
}

.lyrics-fluent-floating-toolbar .lyrics-fullscreen-toggle-button {
  background: rgba(255, 112, 112, 0.14);
  border-color: rgba(255, 122, 122, 0.32);
}

.lyrics-fluent-floating-toolbar .lyrics-fullscreen-toggle-button:hover {
  box-shadow:
    0 14px 28px rgba(0, 0, 0, 0.3),
    0 0 0 1px rgba(255, 112, 112, 0.16);
}

.lyrics-fluent-floating-toolbar .lyrics-config-mode-section {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  width: 100%;
}

.lyrics-fluent-floating-toolbar .lyrics-config-separator {
  width: 32px;
  height: 1px;
  margin: 0;
  border-radius: 0;
  background: rgba(255, 255, 255, 0.18);
}

.lyrics-fluent-floating-toolbar .lyrics-config-mode-group {
  display: flex;
  flex-direction: column;
  gap: 6px;
  width: 100%;
  padding: 6px;
  border-radius: 0;
  background: rgba(255, 255, 255, 0.035);
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: none;
}

.lyrics-fluent-floating-toolbar .lyrics-config-mode-group .main-tooltipWrapper-container {
  display: flex;
}

.lyrics-fluent-floating-toolbar .lyrics-config-mode-group .lyrics-mode-button {
  width: 42px !important;
  height: 42px !important;
  opacity: 0.92;
}

.lyrics-fluent-floating-toolbar.fullscreen-mode-container {
  top: auto;
  right: 24px;
  bottom: var(--iv-floating-toolbar-bottom-gap, 40px);
  left: auto;
  width: 52px;
  height: 52px;
  padding: 0;
  gap: 0;
  border-radius: 0;
}

.lyrics-fluent-floating-toolbar.fullscreen-mode-container .lyrics-floating-menu-toggle {
  width: 52px;
  height: 52px;
  border-radius: 0;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}

.lyrics-fluent-floating-toolbar.fullscreen-mode-container .lyrics-floating-menu-toggle:hover {
  transform: none;
  background: rgba(255, 255, 255, 0.04) !important;
}

.lyrics-fluent-floating-toolbar.fullscreen-mode-container.menu-open,
.lyrics-fluent-floating-toolbar.fullscreen-mode-container.menu-closing {
  --iv-floating-toolbar-menu-offset: 0px;
  top: auto;
  right: 24px;
  bottom: var(--iv-floating-toolbar-bottom-gap, 40px);
  left: auto;
  width: auto;
  height: auto;
  max-height: calc(
    100vh
    - var(--iv-floating-toolbar-top-gap, 20px)
    - var(--iv-floating-toolbar-bottom-gap, 40px)
    - var(--iv-floating-menu-content-top-offset, 0px)
  );
  max-height: calc(
    100dvh
    - var(--iv-floating-toolbar-top-gap, 20px)
    - var(--iv-floating-toolbar-bottom-gap, 40px)
    - var(--iv-floating-menu-content-top-offset, 0px)
  );
  padding: 10px;
  gap: 10px;
  border-radius: 0;
  flex-direction: column-reverse;
  justify-content: flex-start;
  overflow: visible;
}

.lyrics-fluent-floating-toolbar.fullscreen-mode-container.menu-open .lyrics-floating-menu-content,
.lyrics-fluent-floating-toolbar.fullscreen-mode-container.menu-closing .lyrics-floating-menu-content {
  flex: 0 1 auto;
  height: auto;
  max-height: calc(
    100vh
    - var(--iv-floating-toolbar-top-gap, 20px)
    - var(--iv-floating-toolbar-bottom-gap, 40px)
    - var(--iv-floating-menu-content-top-offset, 0px)
    - 86px
  );
  max-height: calc(
    100dvh
    - var(--iv-floating-toolbar-top-gap, 20px)
    - var(--iv-floating-toolbar-bottom-gap, 40px)
    - var(--iv-floating-menu-content-top-offset, 0px)
    - 86px
  );
  min-height: 0;
  margin-top: 0;
}

.lyrics-fluent-floating-toolbar.fullscreen-mode-container.menu-open .lyrics-floating-menu-toggle {
  width: 44px;
  height: 44px;
  border-radius: 0;
  background: var(--iv-floating-button-shell) !important;
  border: 1px solid var(--iv-floating-button-border) !important;
  box-shadow: var(--iv-floating-button-shadow) !important;
}

.lyrics-fluent-floating-toolbar.fullscreen-mode-container.menu-open .lyrics-floating-menu-content>* {
  opacity: 1;
  transform: translateY(0);
}

.lyrics-fluent-floating-toolbar.fullscreen-mode-container.menu-closing .lyrics-floating-menu-content>* {
  opacity: 0;
  transform: translateY(var(--iv-motion-distance-sm));
}

.lyrics-fluent-floating-toolbar .main-contextMenu-menu {
  padding: 12px 12px 6px;
  border-radius: 0;
  backdrop-filter: blur(24px) saturate(135%);
  -webkit-backdrop-filter: blur(24px) saturate(135%);
}

@media (max-width: 900px) {
  .lyrics-fluent-floating-toolbar {
    right: 14px;
    bottom: 14px;
  }
}

.lyrics-cache-edit-button[data-active="true"] {
  background: rgba(96, 165, 250, 0.18) !important;
  border-color: rgba(96, 165, 250, 0.36) !important;
}

.ivlyrics-cache-edit-overlay {
  position: fixed;
  inset: 0;
  z-index: var(--iv-layer-modal);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(7, 10, 14, 0.72);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.ivlyrics-cache-edit-modal {
  width: min(1180px, calc(100vw - 48px));
  max-height: min(880px, calc(100vh - 48px));
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: rgba(18, 22, 28, 0.96);
  border: 1px solid rgba(255, 255, 255, 0.12);
  box-shadow: 0 28px 80px rgba(0, 0, 0, 0.42);
}

.ivlyrics-cache-edit-header,
.ivlyrics-cache-edit-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 18px 22px;
  background: rgba(255, 255, 255, 0.03);
}

.ivlyrics-cache-edit-header {
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.ivlyrics-cache-edit-footer {
  justify-content: flex-end;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.ivlyrics-cache-edit-header-copy {
  min-width: 0;
}

.ivlyrics-cache-edit-title {
  margin: 0;
  font-size: 18px;
  font-weight: 700;
  color: var(--spice-text);
}

.ivlyrics-cache-edit-subtitle,
.ivlyrics-cache-edit-meta {
  margin: 6px 0 0;
  color: rgba(255, 255, 255, 0.72);
  font-size: 13px;
}

.ivlyrics-cache-edit-body {
  flex: 1;
  min-height: 0;
  padding: 22px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  overflow: hidden;
}

.ivlyrics-cache-edit-content {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
  overflow: hidden;
}

.ivlyrics-cache-edit-status {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  flex-shrink: 0;
}

.ivlyrics-cache-edit-status-item {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  background: rgba(255, 255, 255, 0.035);
  border: 1px solid rgba(255, 255, 255, 0.08);
}

.ivlyrics-cache-edit-list {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding-right: 4px;
}

.ivlyrics-cache-edit-item {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr);
  gap: 14px;
  padding: 14px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
}

.ivlyrics-cache-edit-item-index {
  display: inline-flex;
  align-items: flex-start;
  justify-content: center;
  padding-top: 4px;
  font-size: 12px;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.68);
}

.ivlyrics-cache-edit-item-fields {
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr);
  gap: 12px;
}

.ivlyrics-cache-edit-field {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.ivlyrics-cache-edit-field-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 30px;
  font-size: 13px;
  font-weight: 600;
  color: var(--spice-text);
}

.ivlyrics-cache-edit-badge {
  padding: 4px 8px;
  font-size: 11px;
  color: rgba(255, 255, 255, 0.7);
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.08);
}

.ivlyrics-cache-edit-shift-button {
  width: 28px;
  height: 28px;
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 8px;
  color: rgba(255, 255, 255, 0.86);
  background: rgba(255, 255, 255, 0.06);
  cursor: pointer;
  font-size: 15px;
  line-height: 1;
}

.ivlyrics-cache-edit-shift-button:hover:not(:disabled) {
  border-color: rgba(var(--spice-rgb-accent, 30, 215, 96), 0.42);
  background: rgba(var(--spice-rgb-accent, 30, 215, 96), 0.14);
}

.ivlyrics-cache-edit-shift-button:disabled {
  opacity: 0.38;
  cursor: not-allowed;
}

.ivlyrics-cache-edit-original-line,
.ivlyrics-cache-edit-line-input {
  padding: 14px;
  background: rgba(0, 0, 0, 0.22);
  border: 1px solid rgba(255, 255, 255, 0.08);
  color: var(--spice-text);
  font: 13px/1.65 "Cascadia Code", Consolas, "Courier New", monospace;
}

.ivlyrics-cache-edit-original-line {
  min-height: 74px;
  white-space: pre-wrap;
  word-break: break-word;
  color: rgba(255, 255, 255, 0.78);
  background: rgba(255, 255, 255, 0.04);
}

.ivlyrics-cache-edit-line-input {
  min-height: 74px;
  resize: vertical;
}

.ivlyrics-cache-edit-line-input:focus {
  outline: none;
  border-color: rgba(var(--spice-rgb-accent, 30, 215, 96), 0.52);
  box-shadow: 0 0 0 2px rgba(var(--spice-rgb-accent, 30, 215, 96), 0.14);
}

.ivlyrics-cache-edit-close,
.ivlyrics-cache-edit-button {
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: var(--spice-text);
  background: rgba(255, 255, 255, 0.06);
  cursor: pointer;
}

.ivlyrics-cache-edit-close {
  width: 36px;
  height: 36px;
  font-size: 20px;
  line-height: 1;
}

.ivlyrics-cache-edit-button {
  min-width: 112px;
  padding: 10px 16px;
  font-size: 13px;
  font-weight: 600;
}

.ivlyrics-cache-edit-button.primary {
  background: rgba(var(--spice-rgb-accent, 30, 215, 96), 0.18);
  border-color: rgba(var(--spice-rgb-accent, 30, 215, 96), 0.36);
}

.ivlyrics-cache-edit-close:disabled,
.ivlyrics-cache-edit-button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.ivlyrics-cache-edit-error {
  margin: 0;
  color: #fca5a5;
  font-size: 13px;
}

.ivlyrics-cache-edit-loading {
  min-height: 220px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(255, 255, 255, 0.72);
  font-size: 14px;
}

@media (max-width: 980px) {
  .ivlyrics-cache-edit-overlay {
    padding: 14px;
  }

  .ivlyrics-cache-edit-modal {
    width: calc(100vw - 28px);
    max-height: calc(100vh - 28px);
  }

  .ivlyrics-cache-edit-body {
    padding: 16px;
  }

  .ivlyrics-cache-edit-item {
    grid-template-columns: 1fr;
    gap: 10px;
  }

  .ivlyrics-cache-edit-item-index {
    justify-content: flex-start;
    padding-top: 0;
  }

  .ivlyrics-cache-edit-item-fields {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* AI Addon Settings Styles */
.ai-addon-settings {
  padding: 16px;
  background-color: rgba(var(--spice-rgb-card), 0.3);
  border-radius: 8px;
  margin-bottom: 24px;
}

.ai-addon-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
}

.ai-addon-title {
  font-size: 18px;
  font-weight: 700;
  margin: 0;
}

.ai-addon-description {
  font-size: 14px;
  opacity: 0.8;
  margin-bottom: 16px;
  line-height: 1.5;
}

.ai-addon-input-group {
  margin-bottom: 16px;
}

.ai-addon-input-group label {
  display: block;
  font-size: 14px;
  font-weight: 600;
  margin-bottom: 8px;
}

.ai-addon-input-group input[type="text"],
.ai-addon-input-group input[type="password"],
.ai-addon-input-group select {
  width: 100%;
  padding: 8px 12px;
  border-radius: 4px !important;
  background-color: rgba(var(--spice-rgb-selected-row), 0.1) !important;
  border: 1px solid transparent !important;
  color: var(--spice-text) !important;
  transition: all 0.2s ease;
}

.ai-addon-input-group input:focus,
.ai-addon-input-group select:focus {
  background-color: rgba(var(--spice-rgb-selected-row), 0.2) !important;
  border-color: var(--spice-button) !important;
  outline: none;
}

.ai-addon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 8px 16px;
  border-radius: 4px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  border: none;
  transition: all 0.2s ease;
}

.ai-addon-btn-primary {
  background-color: var(--spice-button);
  color: var(--spice-text);
}

.ai-addon-btn-primary:hover {
  background-color: var(--spice-button-active);
}

.ai-addon-btn-secondary {
  background-color: transparent;
  border: 1px solid var(--spice-button);
  color: var(--spice-text);
}

.ai-addon-btn-secondary:hover {
  background-color: rgba(var(--spice-rgb-button), 0.1);
}

.ai-addon-checkbox {
  display: flex;
  align-items: center;
  margin-bottom: 8px;
  cursor: pointer;
}

.ai-addon-checkbox input[type="checkbox"] {
  margin-right: 12px;
  width: 18px;
  height: 18px;
  accent-color: var(--spice-button);
  cursor: pointer;
}

.ai-addon-checkbox span {
  font-size: 14px;
}

.ai-addon-checkbox:hover span {
  text-decoration: underline;
}

.ai-addon-capabilities-group {
  margin-top: 20px;
  padding: 16px;
  background-color: rgba(0, 0, 0, 0.2);
  border-radius: 8px;
}

.ai-addon-capabilities-title {
  font-size: 14px;
  font-weight: 600;
  margin-bottom: 12px;
  opacity: 0.9;
}

/* AI Addon Capabilities Chips (Toggle Buttons) */
.ai-addon-caps-container {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 5px;
}

.ai-addon-cap-chip {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  border-radius: 16px;
  cursor: pointer;
  font-size: 12px;
  font-weight: 500;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: var(--spice-text);
  opacity: 0.7;
  user-select: none;
}

.ai-addon-cap-chip:hover {
  background: rgba(255, 255, 255, 0.1);
  opacity: 0.9;
}

/* Translate - Green */
.ai-addon-cap-chip.active.cap-translate {
  background: rgba(34, 197, 94, 0.15);
  border-color: rgba(34, 197, 94, 0.5);
  color: #4ade80;
  opacity: 1;
}

/* Metadata - Neutral */
.ai-addon-cap-chip.active.cap-metadata {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.18);
  color: #e5e7eb;
  opacity: 1;
}

/* TMI - Indigo/Purple */
.ai-addon-cap-chip.active.cap-tmi {
  background: rgba(99, 102, 241, 0.15);
  border-color: rgba(99, 102, 241, 0.5);
  color: #818cf8;
  opacity: 1;
}

/* ============================================
   Marketplace Styles
   ============================================ */

.ivlyrics-marketplace-root {
  grid-area: 1 / 1 / -1 / -1;
  position: relative;
  z-index: var(--iv-layer-marketplace);
  width: 100%;
  height: 100%;
  min-height: 0;
  isolation: isolate;
  box-sizing: border-box;
}

.ivlyrics-marketplace-root:has(.ivlyrics-marketplace-confirm-overlay) {
  z-index: var(--iv-layer-internal-dialog);
}

.ivlyrics-marketplace-root *,
.ivlyrics-marketplace-root *::before,
.ivlyrics-marketplace-root *::after {
  box-sizing: border-box;
}

.ivlyrics-marketplace-container {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  min-height: 0;
  padding: 24px 32px;
  overflow: hidden;
  color: var(--spice-text);
  animation: fadeInSlide 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.ivlyrics-marketplace-top {
  flex-shrink: 0;
}

.ivlyrics-marketplace-content {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
}

@keyframes fadeInSlide {
  from {
    opacity: 0;
    transform: translateY(12px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Header */
.ivlyrics-marketplace-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 20px;
  flex-shrink: 0;
}

.ivlyrics-marketplace-header-left {
  display: flex;
  align-items: center;
  gap: 12px;
}

.ivlyrics-marketplace-back-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border: none;
  border-radius: 50%;
  background: rgba(var(--spice-rgb-text), 0.1);
  color: var(--spice-text);
  cursor: pointer;
  transition: background 0.2s ease, transform 0.2s ease;
  flex-shrink: 0;
}

.ivlyrics-marketplace-back-btn:hover {
  background: rgba(var(--spice-rgb-text), 0.2);
  transform: scale(1.05);
}

.ivlyrics-marketplace-title {
  font-size: 24px;
  font-weight: 700;
  margin: 0;
  white-space: nowrap;
}

/* Search */
.ivlyrics-marketplace-search-wrapper {
  position: relative;
  flex: 0 1 300px;
  min-width: 180px;
}

.ivlyrics-marketplace-search-icon {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  opacity: 0.5;
  pointer-events: none;
}

.ivlyrics-marketplace-search-input {
  width: 100%;
  padding: 8px 12px 8px 36px;
  border: 1px solid rgba(var(--spice-rgb-text), 0.15);
  border-radius: 20px;
  background: rgba(var(--spice-rgb-text), 0.06);
  color: var(--spice-text);
  font-size: 14px;
  outline: none;
  transition:
    transform var(--iv-motion-duration-fast) var(--iv-motion-ease-emphasis),
    border-color var(--iv-motion-duration-fast) var(--iv-motion-ease-standard),
    background var(--iv-motion-duration-fast) var(--iv-motion-ease-standard),
    box-shadow var(--iv-motion-duration-fast) var(--iv-motion-ease-standard);
}

.ivlyrics-marketplace-search-input:focus {
  border-color: rgba(var(--spice-rgb-text), 0.3);
  background: rgba(var(--spice-rgb-text), 0.1);
  transform: translateY(-1px);
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.14);
}

.ivlyrics-marketplace-search-input::placeholder {
  color: rgba(var(--spice-rgb-text), 0.4);
}

/* Filter Tabs */
.ivlyrics-marketplace-filter-tabs {
  display: flex;
  gap: 8px;
  margin-bottom: 20px;
  flex-shrink: 0;
}

.ivlyrics-marketplace-filter-tab {
  padding: 6px 16px;
  border: 1px solid rgba(var(--spice-rgb-text), 0.15);
  border-radius: 20px;
  background: transparent;
  color: rgba(var(--spice-rgb-text), 0.7);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition:
    transform var(--iv-motion-duration-fast) var(--iv-motion-ease-emphasis),
    background var(--iv-motion-duration-fast) var(--iv-motion-ease-standard),
    border-color var(--iv-motion-duration-fast) var(--iv-motion-ease-standard),
    color var(--iv-motion-duration-fast) var(--iv-motion-ease-standard),
    box-shadow var(--iv-motion-duration-fast) var(--iv-motion-ease-standard);
}

.ivlyrics-marketplace-filter-tab:hover {
  background: rgba(var(--spice-rgb-text), 0.08);
  color: var(--spice-text);
  transform: translateY(-2px);
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.14);
}

.ivlyrics-marketplace-filter-tab.active {
  background: rgba(var(--spice-rgb-text), 0.15);
  color: var(--spice-text);
  border-color: rgba(var(--spice-rgb-text), 0.3);
}

/* Card Grid */
.ivlyrics-marketplace-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 16px;
  padding-bottom: 80px;
}

/* Card */
.ivlyrics-marketplace-card {
  position: relative;
  border-radius: 12px;
  background: rgba(var(--spice-rgb-card), 0.5);
  border: 1px solid rgba(var(--spice-rgb-text), 0.08);
  overflow: hidden;
  cursor: pointer;
  transition:
    transform var(--iv-motion-duration-fast) var(--iv-motion-ease-emphasis),
    box-shadow var(--iv-motion-duration-medium) var(--iv-motion-ease-standard),
    border-color var(--iv-motion-duration-medium) var(--iv-motion-ease-standard);
}

.ivlyrics-marketplace-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
  border-color: rgba(var(--spice-rgb-text), 0.15);
}

.ivlyrics-marketplace-grid .ivlyrics-marketplace-card {
  animation: ivlyricsSoftRiseIn var(--iv-motion-duration-slow) var(--iv-motion-ease-emphasis) both;
}

.ivlyrics-marketplace-grid .ivlyrics-marketplace-card:nth-child(1) { animation-delay: 20ms; }
.ivlyrics-marketplace-grid .ivlyrics-marketplace-card:nth-child(2) { animation-delay: 40ms; }
.ivlyrics-marketplace-grid .ivlyrics-marketplace-card:nth-child(3) { animation-delay: 60ms; }
.ivlyrics-marketplace-grid .ivlyrics-marketplace-card:nth-child(4) { animation-delay: 80ms; }
.ivlyrics-marketplace-grid .ivlyrics-marketplace-card:nth-child(5) { animation-delay: 100ms; }
.ivlyrics-marketplace-grid .ivlyrics-marketplace-card:nth-child(6) { animation-delay: 120ms; }

.ivlyrics-marketplace-card:focus-visible {
  outline: 2px solid var(--spice-text);
  outline-offset: 2px;
}

/* Card Image */
.ivlyrics-marketplace-card-image {
  width: 100%;
  aspect-ratio: 16 / 9;
  background: rgba(var(--spice-rgb-text), 0.05);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.ivlyrics-marketplace-card-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition:
    transform var(--iv-motion-duration-slow) var(--iv-motion-ease-emphasis),
    filter var(--iv-motion-duration-medium) var(--iv-motion-ease-standard);
}

.ivlyrics-marketplace-card:hover .ivlyrics-marketplace-card-image img {
  transform: scale(1.04);
  filter: saturate(1.06);
}

.ivlyrics-marketplace-card-image-placeholder {
  opacity: 0.2;
}

/* Card Info */
.ivlyrics-marketplace-card-info {
  padding: 12px 14px;
}

.ivlyrics-marketplace-card-title {
  font-size: 15px;
  font-weight: 600;
  margin-bottom: 4px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ivlyrics-marketplace-card-author {
  font-size: 12px;
  opacity: 0.6;
  margin-bottom: 6px;
}

.ivlyrics-marketplace-card-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  opacity: 0.5;
}

.ivlyrics-marketplace-card-type {
  padding: 2px 8px;
  border-radius: 10px;
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.ivlyrics-marketplace-card-type-overlay {
  position: absolute;
  top: 10px;
  left: 10px;
  z-index: 1;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.ivlyrics-marketplace-card-type-lyrics {
  background: rgba(34, 197, 94, 0.15);
  color: #4ade80;
}

.ivlyrics-marketplace-card-type-ai {
  background: rgba(168, 85, 247, 0.15);
  color: #c084fc;
}

.ivlyrics-marketplace-card-type-style {
  background: rgba(255, 255, 255, 0.12);
  color: #e5e7eb;
}

/* Star Count */
.ivlyrics-marketplace-stars {
  position: absolute;
  top: 10px;
  right: 10px;
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 4px 10px;
  border-radius: 12px;
  font-size: 12px;
  font-weight: 600;
  background: rgba(0, 0, 0, 0.55);
  color: #fbbf24;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.ivlyrics-marketplace-detail-stars {
  display: inline-flex;
  align-items: center;
  color: #fbbf24;
  opacity: 1;
}

/* Detail View */
.ivlyrics-marketplace-detail {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  min-height: 0;
  padding: 24px 32px;
  overflow: hidden;
  color: var(--spice-text);
  animation: fadeInSlide 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.ivlyrics-marketplace-detail-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 24px;
  flex-shrink: 0;
  gap: 12px;
  min-width: 0;
  flex-wrap: wrap;
}

.ivlyrics-marketplace-detail-header-actions {
  display: flex;
  gap: 8px;
  align-items: center;
  justify-content: flex-end;
  flex: 0 1 auto;
  min-width: min-content;
  max-width: 100%;
  flex-wrap: wrap;
  margin-left: auto;
}

.ivlyrics-marketplace-detail-back {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  border: none;
  border-radius: 20px;
  background: rgba(var(--spice-rgb-text), 0.1);
  color: var(--spice-text);
  font-size: 14px;
  cursor: pointer;
  flex: 0 1 auto;
  min-width: 0;
  max-width: 100%;
  white-space: nowrap;
  transition:
    transform var(--iv-motion-duration-fast) var(--iv-motion-ease-emphasis),
    background var(--iv-motion-duration-fast) var(--iv-motion-ease-standard),
    box-shadow var(--iv-motion-duration-fast) var(--iv-motion-ease-standard);
}

.ivlyrics-marketplace-detail-back:hover {
  background: rgba(var(--spice-rgb-text), 0.2);
  transform: translateX(-2px);
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.14);
}

/* Detail content (used by DeveloperProfile) */
.ivlyrics-marketplace-detail-content {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
  gap: 20px;
  overflow-y: auto;
  overflow-x: hidden;
  padding-bottom: 80px;
}

/* Two-column layout for AddonDetail */
.ivlyrics-marketplace-detail-layout {
  display: flex;
  flex: 1 1 auto;
  min-height: 0;
  min-width: 0;
  gap: 24px;
  overflow: hidden;
}

/* Main content (left) */
.ivlyrics-marketplace-detail-main {
  flex: 1 1 0%;
  min-width: 0;
  width: 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
  overflow-y: auto;
  overflow-x: hidden;
  padding-bottom: 80px;
  padding-right: 8px;
}

/* Ensure markdown content doesn't overflow */
.ivlyrics-marketplace-detail-main .ivlyrics-marketplace-md {
  max-width: 100%;
  overflow-wrap: break-word;
  word-break: break-word;
}

.ivlyrics-marketplace-detail-main .ivlyrics-marketplace-md img {
  max-width: 100%;
  height: auto;
}

.ivlyrics-marketplace-detail-main .ivlyrics-marketplace-md pre {
  max-width: 100%;
  overflow-x: auto;
}

.ivlyrics-marketplace-detail-main .ivlyrics-marketplace-md table {
  max-width: 100%;
  display: block;
  overflow-x: auto;
}

/* Sidebar (right) */
.ivlyrics-marketplace-detail-sidebar {
  flex: 0 0 260px;
  width: 260px;
  min-width: 260px;
  display: flex;
  flex-direction: column;
  gap: 20px;
  overflow-y: auto;
  overflow-x: hidden;
  padding-bottom: 80px;
}

/* Hide sidebar on narrow viewports */
@media (max-width: 720px) {
  .ivlyrics-marketplace-detail-sidebar {
    display: none;
  }
}

/* Sidebar sections */
.ivlyrics-marketplace-sidebar-section {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.ivlyrics-marketplace-sidebar-title {
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  opacity: 0.5;
  margin-top: 4px;
}

/* Sidebar developer card */
.ivlyrics-marketplace-sidebar-dev {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px;
  border-radius: 12px;
  background: rgba(var(--spice-rgb-text), 0.05);
  border: 1px solid rgba(var(--spice-rgb-text), 0.08);
  cursor: pointer;
  transition:
    transform var(--iv-motion-duration-fast) var(--iv-motion-ease-emphasis),
    background var(--iv-motion-duration-fast) var(--iv-motion-ease-standard),
    box-shadow var(--iv-motion-duration-fast) var(--iv-motion-ease-standard);
}

.ivlyrics-marketplace-sidebar-dev:hover {
  background: rgba(var(--spice-rgb-text), 0.1);
}

.ivlyrics-marketplace-sidebar-dev-avatar {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
}

.ivlyrics-marketplace-sidebar-dev-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.ivlyrics-marketplace-sidebar-dev-name {
  font-size: 14px;
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ivlyrics-marketplace-sidebar-dev-label {
  font-size: 11px;
  opacity: 0.5;
}

/* Sidebar mini cards */
.ivlyrics-marketplace-sidebar-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 4px;
}

.ivlyrics-marketplace-sidebar-minicard {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px;
  border-radius: 10px;
  cursor: pointer;
  transition:
    transform var(--iv-motion-duration-fast) var(--iv-motion-ease-emphasis),
    background var(--iv-motion-duration-fast) var(--iv-motion-ease-standard),
    box-shadow var(--iv-motion-duration-fast) var(--iv-motion-ease-standard);
}

.ivlyrics-marketplace-sidebar-minicard:hover {
  background: rgba(var(--spice-rgb-text), 0.08);
}

.ivlyrics-marketplace-sidebar-list .ivlyrics-marketplace-sidebar-minicard {
  animation: ivlyricsSoftRiseIn var(--iv-motion-duration-slow) var(--iv-motion-ease-emphasis) both;
}

.ivlyrics-marketplace-sidebar-list .ivlyrics-marketplace-sidebar-minicard:nth-child(1) { animation-delay: 20ms; }
.ivlyrics-marketplace-sidebar-list .ivlyrics-marketplace-sidebar-minicard:nth-child(2) { animation-delay: 40ms; }
.ivlyrics-marketplace-sidebar-list .ivlyrics-marketplace-sidebar-minicard:nth-child(3) { animation-delay: 60ms; }
.ivlyrics-marketplace-sidebar-list .ivlyrics-marketplace-sidebar-minicard:nth-child(4) { animation-delay: 80ms; }

.ivlyrics-marketplace-sidebar-minicard-img {
  width: 36px;
  height: 36px;
  border-radius: 6px;
  object-fit: cover;
  flex-shrink: 0;
}

.ivlyrics-marketplace-sidebar-minicard-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(var(--spice-rgb-text), 0.06);
  opacity: 0.4;
}

.ivlyrics-marketplace-sidebar-minicard-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.ivlyrics-marketplace-sidebar-minicard-name {
  font-size: 13px;
  font-weight: 500;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ivlyrics-marketplace-sidebar-minicard-meta {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  opacity: 0.5;
}

/* Detail content elements */
.ivlyrics-marketplace-detail-image {
  width: 100%;
  max-width: 600px;
  border-radius: 12px;
  overflow: hidden;
}

.ivlyrics-marketplace-detail-image img {
  width: 100%;
  height: auto;
  display: block;
}

.ivlyrics-marketplace-detail-title {
  font-size: 28px;
  font-weight: 700;
  margin: 0;
}

.ivlyrics-marketplace-detail-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  font-size: 13px;
  opacity: 0.6;
}

.ivlyrics-marketplace-detail-description {
  font-size: 15px;
  line-height: 1.6;
  opacity: 0.85;
}

/* Markdown loading */
.ivlyrics-marketplace-md-loading {
  display: flex;
  justify-content: center;
  padding: 24px 0;
}

/* Markdown rendered content */
.ivlyrics-marketplace-md {
  white-space: normal;
  user-select: text;
  -webkit-user-select: text;
}

.ivlyrics-marketplace-md h1 {
  font-size: 22px;
  font-weight: 700;
  margin: 20px 0 10px;
  padding-bottom: 6px;
  border-bottom: 1px solid rgba(var(--spice-rgb-text), 0.1);
}

.ivlyrics-marketplace-md h2 {
  font-size: 19px;
  font-weight: 700;
  margin: 18px 0 8px;
  padding-bottom: 4px;
  border-bottom: 1px solid rgba(var(--spice-rgb-text), 0.08);
}

.ivlyrics-marketplace-md h3 {
  font-size: 16px;
  font-weight: 600;
  margin: 14px 0 6px;
}

.ivlyrics-marketplace-md h4,
.ivlyrics-marketplace-md h5,
.ivlyrics-marketplace-md h6 {
  font-size: 14px;
  font-weight: 600;
  margin: 12px 0 4px;
}

.ivlyrics-marketplace-md p {
  margin: 8px 0;
}

.ivlyrics-marketplace-md a {
  color: rgba(248, 250, 252, 0.92);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.ivlyrics-marketplace-md a:hover {
  color: #ffffff;
}

.ivlyrics-marketplace-md img {
  max-width: 100%;
  border-radius: 8px;
  margin: 8px 0;
}

.ivlyrics-marketplace-md pre {
  background: rgba(var(--spice-rgb-text), 0.06);
  border: 1px solid rgba(var(--spice-rgb-text), 0.08);
  border-radius: 8px;
  padding: 12px 16px;
  overflow-x: auto;
  margin: 10px 0;
  font-size: 13px;
  line-height: 1.5;
  user-select: text;
  -webkit-user-select: text;
}

.ivlyrics-marketplace-md code {
  font-family: 'Cascadia Code', 'Fira Code', 'JetBrains Mono', monospace;
  font-size: 0.9em;
  background: rgba(var(--spice-rgb-text), 0.08);
  padding: 2px 6px;
  border-radius: 4px;
  user-select: text;
  -webkit-user-select: text;
}

.ivlyrics-marketplace-md pre code {
  background: none;
  padding: 0;
  border-radius: 0;
}

.ivlyrics-marketplace-code-block {
  position: relative;
}

.ivlyrics-marketplace-code-toolbar {
  position: absolute;
  top: 10px;
  left: 10px;
  right: 10px;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  pointer-events: none;
}

.ivlyrics-marketplace-code-language {
  min-width: 0;
  color: rgba(var(--spice-rgb-text), 0.56);
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ivlyrics-marketplace-code-language.is-empty {
  visibility: hidden;
}

.ivlyrics-marketplace-code-block pre {
  padding-top: 46px;
}

.ivlyrics-marketplace-code-copy {
  border: 1px solid rgba(var(--spice-rgb-text), 0.12);
  background: rgba(var(--spice-rgb-text), 0.08);
  color: rgba(var(--spice-rgb-text), 0.9);
  border-radius: 999px;
  padding: 5px 10px;
  font-size: 11px;
  font-weight: 600;
  line-height: 1;
  cursor: pointer;
  transition: background 0.18s ease, border-color 0.18s ease, color 0.18s ease;
  pointer-events: auto;
  flex-shrink: 0;
}

.ivlyrics-marketplace-code-copy:hover {
  background: rgba(var(--spice-rgb-text), 0.14);
  border-color: rgba(var(--spice-rgb-text), 0.2);
}

.ivlyrics-marketplace-code-copy[data-copied="true"] {
  background: rgba(29, 185, 84, 0.16);
  border-color: rgba(29, 185, 84, 0.34);
  color: #b7f7cf;
}

.ivlyrics-marketplace-md blockquote {
  border-left: 3px solid rgba(var(--spice-rgb-text), 0.25);
  margin: 10px 0;
  padding: 4px 16px;
  color: rgba(var(--spice-rgb-text), 0.7);
}

.ivlyrics-marketplace-md ul,
.ivlyrics-marketplace-md ol {
  padding-left: 24px;
  margin: 8px 0;
}

.ivlyrics-marketplace-md li {
  margin: 4px 0;
}

.ivlyrics-marketplace-md hr {
  border: none;
  border-top: 1px solid rgba(var(--spice-rgb-text), 0.1);
  margin: 16px 0;
}

.ivlyrics-marketplace-md table {
  width: 100%;
  border-collapse: collapse;
  margin: 10px 0;
  font-size: 13px;
}

.ivlyrics-marketplace-md th,
.ivlyrics-marketplace-md td {
  border: 1px solid rgba(var(--spice-rgb-text), 0.12);
  padding: 8px 12px;
  text-align: left;
}

.ivlyrics-marketplace-md th {
  background: rgba(var(--spice-rgb-text), 0.06);
  font-weight: 600;
}

.ivlyrics-marketplace-md del {
  opacity: 0.5;
}

.ivlyrics-marketplace-md strong {
  font-weight: 700;
}

.ivlyrics-marketplace-md em {
  font-style: italic;
}


/* Buttons */
.ivlyrics-marketplace-btn {
  padding: 10px 24px;
  border: none;
  border-radius: 20px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  flex: 0 0 auto;
  white-space: nowrap;
  transition: all 0.2s ease;
}

.ivlyrics-marketplace-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.ivlyrics-marketplace-btn-install {
  background: rgba(255, 255, 255, 0.14);
  color: #fff;
}

.ivlyrics-marketplace-btn-install:hover:not(:disabled) {
  background: rgba(255, 255, 255, 0.22);
  transform: scale(1.03);
}

.ivlyrics-marketplace-btn-uninstall {
  background: rgba(239, 68, 68, 0.15);
  color: #ef4444;
  border: 1px solid rgba(239, 68, 68, 0.3);
}

.ivlyrics-marketplace-btn-uninstall:hover:not(:disabled) {
  background: rgba(239, 68, 68, 0.25);
}

.ivlyrics-marketplace-btn-update {
  background: rgba(245, 158, 11, 0.9);
  color: #fff;
}

.ivlyrics-marketplace-btn-update:hover:not(:disabled) {
  background: rgba(245, 158, 11, 1);
  transform: scale(1.03);
}

/* Loading / Error / Empty States */
.ivlyrics-marketplace-loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  padding: 60px 0;
  opacity: 0.6;
}

.ivlyrics-marketplace-spinner {
  width: 32px;
  height: 32px;
  border: 3px solid rgba(var(--spice-rgb-text), 0.15);
  border-top-color: var(--spice-text);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}

.ivlyrics-marketplace-error {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 60px 0;
  text-align: center;
}

.ivlyrics-marketplace-error-detail {
  font-size: 12px;
  opacity: 0.5;
  max-width: 400px;
}

.ivlyrics-marketplace-empty {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 60px 0;
  opacity: 0.5;
  font-size: 15px;
}

/* Author Link */
.ivlyrics-marketplace-author-link {
  cursor: pointer;
  text-decoration: underline;
  text-decoration-color: rgba(var(--spice-rgb-text), 0.3);
  text-underline-offset: 2px;
  transition: text-decoration-color 0.2s ease, color 0.2s ease;
}

.ivlyrics-marketplace-author-link:hover {
  text-decoration-color: var(--spice-text);
  color: var(--spice-text);
  opacity: 1;
}

/* Developer Profile */
.ivlyrics-marketplace-dev-profile {
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 24px;
  border-radius: 16px;
  background: rgba(var(--spice-rgb-text), 0.05);
  border: 1px solid rgba(var(--spice-rgb-text), 0.08);
}

.ivlyrics-marketplace-dev-avatar {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid rgba(var(--spice-rgb-text), 0.15);
  flex-shrink: 0;
}

.ivlyrics-marketplace-dev-info {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}

.ivlyrics-marketplace-dev-name {
  font-size: 24px;
  font-weight: 700;
  margin: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ivlyrics-marketplace-dev-github-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: rgba(var(--spice-rgb-text), 0.6);
  text-decoration: none;
  transition: color 0.2s ease;
  width: fit-content;
}

.ivlyrics-marketplace-dev-github-link:hover {
  color: var(--spice-text);
}

.ivlyrics-marketplace-dev-addon-count {
  font-size: 13px;
  color: rgba(var(--spice-rgb-text), 0.5);
}

.ivlyrics-marketplace-dev-section-title {
  font-size: 18px;
  font-weight: 600;
  margin: 8px 0 16px;
}

.lyrics-credit-footer-link,
.lyrics-credit-footer-name {
  pointer-events: auto;
}

.lyrics-credit-footer-content {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  pointer-events: auto;
  row-gap: 4px;
}

.lyrics-credit-footer-group {
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
  min-width: 0;
}

.lyrics-credit-footer-label {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  opacity: 0.44;
  white-space: nowrap;
}

.lyrics-credit-footer-value,
.lyrics-credit-footer-contributors {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0;
  min-width: 0;
}

.lyrics-credit-footer-divider {
  opacity: 0.3;
  font-size: 10px;
  transform: translateY(-0.5px);
}

.lyrics-credit-footer-separator {
  opacity: 0.45;
}

.lyrics-credit-footer-link {
  border: none;
  background: none;
  color: inherit;
  font: inherit;
  padding: 0;
  margin: 0;
  cursor: pointer;
  text-decoration: none;
  opacity: 0.82;
  transition: color 0.2s ease, opacity 0.2s ease;
}

.lyrics-credit-footer-link:hover {
  color: var(--spice-text);
  opacity: 1;
}

.lyrics-creator-profile-overlay {
  position: fixed;
  inset: 0;
  z-index: var(--iv-layer-modal);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(0, 0, 0, 0.72);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

.lyrics-creator-profile-overlay[data-ui-theme="light"] {
  background: rgba(248, 250, 252, 0.82);
}

.lyrics-creator-profile-modal {
  width: min(860px, 100%);
  max-height: min(88vh, 920px);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: rgba(12, 12, 12, 0.96);
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: 0 32px 80px rgba(0, 0, 0, 0.48);
  border-radius: 0;
}

.lyrics-creator-profile-modal[data-ui-theme="light"] {
  background: rgba(255, 255, 255, 0.96);
  border-color: rgba(15, 23, 42, 0.12);
  box-shadow: 0 28px 72px rgba(15, 23, 42, 0.16);
}

.lyrics-creator-profile-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
  padding: 20px 24px 16px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.lyrics-creator-profile-modal[data-ui-theme="light"] .lyrics-creator-profile-header {
  border-bottom-color: rgba(15, 23, 42, 0.08);
}

.lyrics-creator-profile-title-wrap {
  min-width: 0;
}

.lyrics-creator-profile-header-label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: rgba(248, 250, 252, 0.54);
}

.lyrics-creator-profile-modal[data-ui-theme="light"] .lyrics-creator-profile-header-label {
  color: rgba(15, 23, 42, 0.48);
}

.lyrics-creator-profile-header-title {
  margin: 6px 0 0;
  font-size: 24px;
  font-weight: 700;
  letter-spacing: -0.03em;
  color: #f8fafc;
}

.lyrics-creator-profile-modal[data-ui-theme="light"] .lyrics-creator-profile-header-title {
  color: #0f172a;
}

.lyrics-creator-profile-header-subtitle {
  margin: 8px 0 0;
  color: rgba(248, 250, 252, 0.62);
  font-size: 13px;
  line-height: 1.5;
}

.lyrics-creator-profile-modal[data-ui-theme="light"] .lyrics-creator-profile-header-subtitle {
  color: rgba(15, 23, 42, 0.62);
}

.lyrics-creator-profile-close,
.lyrics-creator-profile-footer-btn {
  min-height: 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: rgba(255, 255, 255, 0.04);
  color: #f8fafc;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  border-radius: 0;
  transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.lyrics-creator-profile-modal[data-ui-theme="light"] .lyrics-creator-profile-close,
.lyrics-creator-profile-modal[data-ui-theme="light"] .lyrics-creator-profile-footer-btn {
  border-color: rgba(15, 23, 42, 0.12);
  background: rgba(15, 23, 42, 0.04);
  color: #0f172a;
}

.lyrics-creator-profile-close {
  width: 38px;
  padding: 0;
  flex: 0 0 auto;
}

.lyrics-creator-profile-footer-btn {
  padding: 0 14px;
}

.lyrics-creator-profile-close:hover,
.lyrics-creator-profile-footer-btn:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.22);
}

.lyrics-creator-profile-modal[data-ui-theme="light"] .lyrics-creator-profile-close:hover,
.lyrics-creator-profile-modal[data-ui-theme="light"] .lyrics-creator-profile-footer-btn:hover {
  background: rgba(15, 23, 42, 0.08);
  border-color: rgba(15, 23, 42, 0.18);
}

.lyrics-creator-profile-body {
  flex: 1 1 auto;
  min-height: 0;
  overflow: auto;
  padding: 20px 24px 24px;
}

.lyrics-creator-profile-footer {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  padding: 16px 24px 20px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.lyrics-creator-profile-modal[data-ui-theme="light"] .lyrics-creator-profile-footer {
  border-top-color: rgba(15, 23, 42, 0.08);
}

.lyrics-creator-profile-hero {
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 24px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 0;
}

.lyrics-creator-profile-modal[data-ui-theme="light"] .lyrics-creator-profile-hero {
  background: rgba(15, 23, 42, 0.04);
  border-color: rgba(15, 23, 42, 0.08);
}

.lyrics-creator-profile-avatar {
  width: 88px;
  height: 88px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
  border: 2px solid rgba(255, 255, 255, 0.16);
}

.lyrics-creator-profile-avatar-fallback {
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, rgba(88, 101, 242, 0.95), rgba(122, 132, 245, 0.78));
  color: #fff;
  font-size: 30px;
  font-weight: 700;
}

.lyrics-creator-profile-info {
  min-width: 0;
  flex: 1;
}

.lyrics-creator-profile-name-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
}

.lyrics-creator-profile-title-block {
  min-width: 0;
  flex: 1 1 240px;
}

.lyrics-creator-profile-actions {
  display: flex;
  flex: 0 0 auto;
  flex-direction: column;
  align-items: stretch;
  gap: 8px;
  min-width: 136px;
}

.lyrics-creator-profile-eyebrow {
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.56);
}

.lyrics-creator-profile-modal[data-ui-theme="light"] .lyrics-creator-profile-eyebrow {
  color: rgba(15, 23, 42, 0.5);
}

.lyrics-creator-profile-name {
  margin: 6px 0 4px;
  font-size: 30px;
  line-height: 1.12;
  color: #f8fafc;
  min-width: 0;
}

.lyrics-creator-profile-modal[data-ui-theme="light"] .lyrics-creator-profile-name {
  color: #0f172a;
}

.lyrics-creator-profile-handle {
  color: rgba(255, 255, 255, 0.64);
  font-size: 14px;
}

.lyrics-creator-profile-modal[data-ui-theme="light"] .lyrics-creator-profile-handle {
  color: rgba(15, 23, 42, 0.6);
}

.lyrics-creator-profile-stats {
  display: flex;
  gap: 12px;
  margin-top: 16px;
  flex-wrap: wrap;
}

.lyrics-creator-profile-stat {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 110px;
  padding: 10px 12px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 0;
}

.lyrics-creator-profile-modal[data-ui-theme="light"] .lyrics-creator-profile-stat {
  background: rgba(15, 23, 42, 0.04);
  border-color: rgba(15, 23, 42, 0.08);
}

.lyrics-creator-profile-stat strong {
  font-size: 20px;
  line-height: 1;
  color: #f8fafc;
}

.lyrics-creator-profile-modal[data-ui-theme="light"] .lyrics-creator-profile-stat strong {
  color: #0f172a;
}

.lyrics-creator-profile-stat span {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.6);
}

.lyrics-creator-profile-modal[data-ui-theme="light"] .lyrics-creator-profile-stat span {
  color: rgba(15, 23, 42, 0.56);
}

.lyrics-creator-profile-like-inline {
  min-height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 0 12px;
  margin-top: 4px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(255, 255, 255, 0.05);
  color: #f8fafc;
  border-radius: 0;
  cursor: pointer;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.01em;
  flex: 0 0 auto;
  transition: background 0.2s ease, border-color 0.2s ease, opacity 0.2s ease, color 0.2s ease;
}

.lyrics-creator-profile-like-inline:hover:not(:disabled) {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.22);
}

.lyrics-creator-profile-like-inline svg {
  flex: 0 0 auto;
}

.lyrics-creator-profile-like-inline.is-liked {
  color: #8bb4ff;
  border-color: rgba(139, 180, 255, 0.36);
  background: rgba(88, 101, 242, 0.12);
}

.lyrics-creator-profile-modal[data-ui-theme="light"] .lyrics-creator-profile-like-inline {
  border-color: rgba(15, 23, 42, 0.12);
  background: rgba(15, 23, 42, 0.04);
  color: #0f172a;
}

.lyrics-creator-profile-modal[data-ui-theme="light"] .lyrics-creator-profile-like-inline:hover:not(:disabled) {
  background: rgba(15, 23, 42, 0.08);
  border-color: rgba(15, 23, 42, 0.18);
}

.lyrics-creator-profile-modal[data-ui-theme="light"] .lyrics-creator-profile-like-inline.is-liked {
  color: #365bd6;
  border-color: rgba(54, 91, 214, 0.24);
  background: rgba(54, 91, 214, 0.1);
}

.lyrics-creator-profile-like-inline:disabled {
  opacity: 0.72;
  cursor: not-allowed;
}

.lyrics-creator-profile-like-inline.is-loading:disabled {
  cursor: wait;
}

.lyrics-creator-profile-public-link {
  min-height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 12px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(255, 255, 255, 0.04);
  color: rgba(248, 250, 252, 0.9);
  border-radius: 0;
  text-decoration: none;
  font-size: 12px;
  font-weight: 700;
  transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.lyrics-creator-profile-public-link:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.22);
  color: #f8fafc;
  text-decoration: none;
}

.lyrics-creator-profile-modal[data-ui-theme="light"] .lyrics-creator-profile-public-link {
  border-color: rgba(15, 23, 42, 0.12);
  background: rgba(15, 23, 42, 0.04);
  color: rgba(15, 23, 42, 0.84);
}

.lyrics-creator-profile-modal[data-ui-theme="light"] .lyrics-creator-profile-public-link:hover {
  background: rgba(15, 23, 42, 0.08);
  border-color: rgba(15, 23, 42, 0.18);
  color: #0f172a;
}

.lyrics-creator-profile-section-title {
  margin: 0;
  font-size: 18px;
  color: #f8fafc;
}

.lyrics-creator-profile-modal[data-ui-theme="light"] .lyrics-creator-profile-section-title {
  color: #0f172a;
}

.lyrics-creator-profile-section-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin: 24px 0 14px;
  flex-wrap: wrap;
}

.lyrics-creator-profile-section-meta {
  font-size: 12px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.58);
}

.lyrics-creator-profile-modal[data-ui-theme="light"] .lyrics-creator-profile-section-meta {
  color: rgba(15, 23, 42, 0.58);
}

.lyrics-creator-profile-section-header-tight {
  margin-top: 18px;
  margin-bottom: 12px;
}

.lyrics-creator-profile-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
  flex-wrap: wrap;
}

.lyrics-creator-profile-toolbar-group {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.lyrics-creator-profile-toolbar-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.52);
}

.lyrics-creator-profile-modal[data-ui-theme="light"] .lyrics-creator-profile-toolbar-label {
  color: rgba(15, 23, 42, 0.5);
}

.lyrics-creator-profile-sort-controls,
.lyrics-creator-profile-artist-stats {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.lyrics-creator-profile-artist-stats {
  margin-bottom: 22px;
}

.lyrics-creator-profile-sort-btn,
.lyrics-creator-profile-artist-chip,
.lyrics-creator-profile-filter-badge {
  min-height: 32px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 0 12px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(255, 255, 255, 0.04);
  color: #f8fafc;
  cursor: pointer;
  border-radius: 0;
  transition: background 0.18s ease, border-color 0.18s ease, color 0.18s ease;
}

.lyrics-creator-profile-modal[data-ui-theme="light"] .lyrics-creator-profile-sort-btn,
.lyrics-creator-profile-modal[data-ui-theme="light"] .lyrics-creator-profile-artist-chip,
.lyrics-creator-profile-modal[data-ui-theme="light"] .lyrics-creator-profile-filter-badge {
  border-color: rgba(15, 23, 42, 0.12);
  background: rgba(15, 23, 42, 0.04);
  color: #0f172a;
}

.lyrics-creator-profile-sort-btn:hover,
.lyrics-creator-profile-artist-chip:hover,
.lyrics-creator-profile-filter-badge:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.22);
}

.lyrics-creator-profile-modal[data-ui-theme="light"] .lyrics-creator-profile-sort-btn:hover,
.lyrics-creator-profile-modal[data-ui-theme="light"] .lyrics-creator-profile-artist-chip:hover,
.lyrics-creator-profile-modal[data-ui-theme="light"] .lyrics-creator-profile-filter-badge:hover {
  background: rgba(15, 23, 42, 0.08);
  border-color: rgba(15, 23, 42, 0.18);
}

.lyrics-creator-profile-sort-btn.is-active,
.lyrics-creator-profile-artist-chip.is-active {
  border-color: rgba(88, 101, 242, 0.34);
  background: rgba(88, 101, 242, 0.12);
  color: #8bb4ff;
}

.lyrics-creator-profile-modal[data-ui-theme="light"] .lyrics-creator-profile-sort-btn.is-active,
.lyrics-creator-profile-modal[data-ui-theme="light"] .lyrics-creator-profile-artist-chip.is-active {
  border-color: rgba(54, 91, 214, 0.26);
  background: rgba(54, 91, 214, 0.1);
  color: #365bd6;
}

.lyrics-creator-profile-artist-chip {
  justify-content: space-between;
}

.lyrics-creator-profile-artist-chip-name {
  max-width: 240px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.lyrics-creator-profile-artist-chip-count {
  font-size: 11px;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.6);
}

.lyrics-creator-profile-modal[data-ui-theme="light"] .lyrics-creator-profile-artist-chip-count {
  color: rgba(15, 23, 42, 0.58);
}

.lyrics-creator-profile-filter-badge {
  font-size: 12px;
  font-weight: 600;
}

.lyrics-creator-profile-grid {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.lyrics-creator-profile-grid.is-refreshing {
  opacity: 0.68;
}

.lyrics-creator-profile-grid-footer {
  display: flex;
  justify-content: center;
  margin-top: 12px;
  min-height: 24px;
}

.lyrics-creator-profile-load-more {
  min-height: 24px;
  color: rgba(248, 250, 252, 0.54);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.01em;
}

.lyrics-creator-profile-modal[data-ui-theme="light"] .lyrics-creator-profile-load-more {
  color: rgba(15, 23, 42, 0.5);
}

.lyrics-creator-profile-list-status,
.lyrics-creator-profile-inline-state {
  font-size: 12px;
  font-weight: 600;
  color: rgba(248, 250, 252, 0.54);
}

.lyrics-creator-profile-modal[data-ui-theme="light"] .lyrics-creator-profile-list-status,
.lyrics-creator-profile-modal[data-ui-theme="light"] .lyrics-creator-profile-inline-state {
  color: rgba(15, 23, 42, 0.5);
}

.lyrics-creator-profile-list-status {
  margin: 0 0 10px;
}

.lyrics-creator-profile-inline-state {
  margin-top: 14px;
}

.lyrics-creator-profile-track {
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.03);
  color: #f8fafc;
  padding: 12px 14px;
  text-align: left;
  cursor: pointer;
  border-radius: 0;
  transition: border-color 0.18s ease, background 0.18s ease, transform 0.18s ease;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 14px;
}

.lyrics-creator-profile-modal[data-ui-theme="light"] .lyrics-creator-profile-track {
  background: rgba(15, 23, 42, 0.03);
  border-color: rgba(15, 23, 42, 0.08);
  color: #0f172a;
}

.lyrics-creator-profile-track:hover {
  border-color: rgba(88, 101, 242, 0.4);
  background: rgba(88, 101, 242, 0.08);
  transform: translateX(2px);
}

.lyrics-creator-profile-track-main {
  min-width: 0;
}

.lyrics-creator-profile-track-side {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 4px;
  text-align: right;
  flex: 0 0 auto;
}

.lyrics-creator-profile-track-title {
  font-size: 15px;
  font-weight: 600;
  line-height: 1.35;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.lyrics-creator-profile-track-artist {
  margin-top: 4px;
  font-size: 13px;
  color: rgba(255, 255, 255, 0.66);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.lyrics-creator-profile-modal[data-ui-theme="light"] .lyrics-creator-profile-track-artist {
  color: rgba(15, 23, 42, 0.64);
}

.lyrics-creator-profile-track-meta {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 14px;
  font-size: 11px;
  color: rgba(255, 255, 255, 0.5);
}

.lyrics-creator-profile-modal[data-ui-theme="light"] .lyrics-creator-profile-track-meta {
  color: rgba(15, 23, 42, 0.5);
}

.lyrics-creator-profile-track-provider {
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.lyrics-creator-profile-track-updated {
  font-size: 11px;
  color: rgba(255, 255, 255, 0.5);
  white-space: nowrap;
}

.lyrics-creator-profile-modal[data-ui-theme="light"] .lyrics-creator-profile-track-updated {
  color: rgba(15, 23, 42, 0.5);
}

.lyrics-creator-profile-state,
.lyrics-creator-profile-empty {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 220px;
  text-align: center;
  color: rgba(255, 255, 255, 0.72);
}

.lyrics-creator-profile-modal[data-ui-theme="light"] .lyrics-creator-profile-state,
.lyrics-creator-profile-modal[data-ui-theme="light"] .lyrics-creator-profile-empty {
  color: rgba(15, 23, 42, 0.66);
}

.lyrics-creator-profile-state-compact {
  min-height: 140px;
}

.lyrics-creator-profile-empty-compact {
  min-height: 0;
  justify-content: flex-start;
  padding: 8px 0 2px;
}

.lyrics-creator-profile-error {
  color: #ff9b9b;
}

.lyrics-creator-profile-modal[data-ui-theme="light"] .lyrics-creator-profile-error {
  color: #b42318;
}

@media (max-width: 720px) {
  .lyrics-creator-profile-track {
    grid-template-columns: minmax(0, 1fr);
    gap: 8px;
  }

  .lyrics-creator-profile-track-side {
    align-items: flex-start;
    text-align: left;
  }

  .lyrics-creator-profile-toolbar {
    align-items: flex-start;
  }

  .lyrics-creator-profile-overlay {
    padding: 16px;
  }

  .lyrics-creator-profile-hero {
    flex-direction: column;
    align-items: flex-start;
  }

  .lyrics-creator-profile-name-row {
    width: 100%;
    flex-direction: column;
    align-items: flex-start;
  }

  .lyrics-creator-profile-like-inline {
    margin-top: 8px;
  }

  .lyrics-creator-profile-name {
    font-size: 24px;
  }

  .lyrics-creator-profile-header,
  .lyrics-creator-profile-body,
  .lyrics-creator-profile-footer {
    padding-left: 18px;
    padding-right: 18px;
  }
}

/* Creator Profile: template matched final override */
.lyrics-creator-profile-overlay {
  background: rgba(15, 18, 24, 0.32);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  padding: 24px;
}

.lyrics-creator-profile-modal,
.lyrics-creator-profile-modal[data-ui-theme="light"] {
  --creator-bg: #FBFBFC;
  --creator-surface: #FFFFFF;
  --creator-surface-2: #F4F5F7;
  --creator-surface-3: #ECEDF0;
  --creator-line: #ECEEF1;
  --creator-line-2: #E3E5EA;
  --creator-ink: #0E1116;
  --creator-ink-2: #2B3038;
  --creator-muted: #6B7280;
  --creator-muted-2: #9AA1AC;
  --creator-shadow-1: 0 1px 0 rgba(14, 17, 22, 0.04), 0 2px 8px rgba(14, 17, 22, 0.04);
  --creator-shadow-3: 0 24px 64px rgba(14, 17, 22, 0.18), 0 8px 24px rgba(14, 17, 22, 0.10);
  --creator-solid: #0E1116;
  --creator-solid-hover: #1A1F26;
  --creator-solid-text: #FFFFFF;
  --creator-placeholder-a: #E8EAF0;
  --creator-placeholder-b: #D6D9E0;
  --creator-placeholder-stripe-a: #E0E2E7;
  --creator-placeholder-stripe-b: #D6D9DF;
  --creator-placeholder-glyph: rgba(14, 17, 22, 0.35);
  --creator-error: #B42318;
  width: 100%;
  max-width: 520px;
  max-height: calc(100vh - 48px);
  padding: 24px 16px 20px;
  color: var(--creator-ink);
  background: var(--creator-bg);
  border: 0;
  border-radius: 26px;
  box-shadow: var(--creator-shadow-3);
  overflow: hidden;
  letter-spacing: 0;
}

.lyrics-creator-profile-overlay[data-ui-theme="dark"] {
  background: rgba(3, 7, 18, 0.72);
}

.lyrics-creator-profile-modal[data-ui-theme="dark"] {
  --creator-bg: #0F1117;
  --creator-surface: #171A22;
  --creator-surface-2: #20242E;
  --creator-surface-3: #2A303B;
  --creator-line: #282E39;
  --creator-line-2: #394150;
  --creator-ink: #F5F7FB;
  --creator-ink-2: #D8DDE7;
  --creator-muted: #9CA6B8;
  --creator-muted-2: #717D90;
  --creator-shadow-1: 0 1px 0 rgba(255, 255, 255, 0.04), 0 10px 28px rgba(0, 0, 0, 0.22);
  --creator-shadow-3: 0 24px 68px rgba(0, 0, 0, 0.55), 0 8px 24px rgba(0, 0, 0, 0.34);
  --creator-solid: #F5F7FB;
  --creator-solid-hover: #FFFFFF;
  --creator-solid-text: #10131A;
  --creator-placeholder-a: #2A303B;
  --creator-placeholder-b: #222833;
  --creator-placeholder-stripe-a: #303747;
  --creator-placeholder-stripe-b: #252C39;
  --creator-placeholder-glyph: rgba(245, 247, 251, 0.34);
  --creator-error: #FF8A80;
}

.lyrics-creator-profile-modal *,
.lyrics-creator-profile-modal[data-ui-theme="light"] * {
  letter-spacing: 0;
}

.lyrics-creator-profile-header,
.lyrics-creator-profile-modal[data-ui-theme="light"] .lyrics-creator-profile-header {
  height: 44px;
  min-height: 44px;
  padding: 0 4px 10px;
  align-items: center;
  background: transparent;
  border-bottom: 0;
}

.lyrics-creator-profile-header-actions,
.lyrics-creator-profile-modal[data-ui-theme="light"] .lyrics-creator-profile-header-actions {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.lyrics-creator-profile-theme-toggle,
.lyrics-creator-profile-modal[data-ui-theme="light"] .lyrics-creator-profile-theme-toggle {
  height: 38px;
  min-width: 38px;
  padding: 0 12px;
  color: var(--creator-ink-2);
  background: transparent;
  border: 0;
  border-radius: 999px;
  box-shadow: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  font-family: inherit;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
}

.lyrics-creator-profile-theme-toggle:hover,
.lyrics-creator-profile-modal[data-ui-theme="light"] .lyrics-creator-profile-theme-toggle:hover {
  color: var(--creator-ink-2);
  background: var(--creator-surface-2);
  transform: none;
}

.lyrics-creator-profile-header-title,
.lyrics-creator-profile-modal[data-ui-theme="light"] .lyrics-creator-profile-header-title {
  color: var(--creator-ink-2);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0;
}

.lyrics-creator-profile-close,
.lyrics-creator-profile-modal[data-ui-theme="light"] .lyrics-creator-profile-close {
  width: 38px;
  height: 38px;
  color: var(--creator-ink-2);
  background: transparent;
  border: 0;
  border-radius: 999px;
  box-shadow: none;
}

.lyrics-creator-profile-close:hover,
.lyrics-creator-profile-modal[data-ui-theme="light"] .lyrics-creator-profile-close:hover {
  color: var(--creator-ink-2);
  background: var(--creator-surface-2);
  transform: none;
}

.lyrics-creator-profile-body,
.lyrics-creator-profile-modal[data-ui-theme="light"] .lyrics-creator-profile-body {
  padding: 0;
  color: var(--creator-ink);
  background: transparent;
  display: block;
}

.lyrics-creator-profile-footer {
  display: none;
}

.lyrics-creator-profile-hero,
.lyrics-creator-profile-modal[data-ui-theme="light"] .lyrics-creator-profile-hero {
  display: grid;
  grid-template-columns: 78px minmax(0, 1fr);
  align-items: center;
  gap: 18px;
  margin: 0;
  padding: 22px 22px 18px;
  color: var(--creator-ink);
  background: var(--creator-surface);
  border: 1px solid var(--creator-line);
  border-radius: 22px;
  box-shadow: var(--creator-shadow-1);
}

.lyrics-creator-profile-avatar,
.lyrics-creator-profile-avatar-fallback,
.lyrics-creator-profile-modal[data-ui-theme="light"] .lyrics-creator-profile-avatar,
.lyrics-creator-profile-modal[data-ui-theme="light"] .lyrics-creator-profile-avatar-fallback {
  width: 78px;
  height: 78px;
  border-radius: 50%;
  border: 1px solid var(--creator-line);
  box-shadow: none;
  object-fit: cover;
}

.lyrics-creator-profile-avatar-fallback,
.lyrics-creator-profile-modal[data-ui-theme="light"] .lyrics-creator-profile-avatar-fallback {
  display: grid;
  place-items: center;
  color: var(--creator-ink);
  background: linear-gradient(135deg, var(--creator-placeholder-a) 0%, var(--creator-placeholder-b) 100%);
  font-size: 28px;
  font-weight: 700;
}

.lyrics-creator-profile-info,
.lyrics-creator-profile-modal[data-ui-theme="light"] .lyrics-creator-profile-info {
  display: contents;
}

.lyrics-creator-profile-name-row,
.lyrics-creator-profile-modal[data-ui-theme="light"] .lyrics-creator-profile-name-row {
  grid-column: 2;
  align-self: center;
  min-width: 0;
  width: 100%;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin: 0;
}

.lyrics-creator-profile-title-block,
.lyrics-creator-profile-modal[data-ui-theme="light"] .lyrics-creator-profile-title-block {
  min-width: 0;
  flex: 1 1 auto;
}

.lyrics-creator-profile-name,
.lyrics-creator-profile-modal[data-ui-theme="light"] .lyrics-creator-profile-name {
  margin: 0;
  color: var(--creator-ink);
  font-size: 22px;
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: 0;
  overflow-wrap: anywhere;
}

.lyrics-creator-profile-handle,
.lyrics-creator-profile-modal[data-ui-theme="light"] .lyrics-creator-profile-handle {
  margin-top: 4px;
  color: var(--creator-muted);
  font-size: 14px;
  font-weight: 500;
}

.lyrics-creator-profile-actions,
.lyrics-creator-profile-modal[data-ui-theme="light"] .lyrics-creator-profile-actions {
  flex: 0 0 auto;
  display: inline-flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: flex-start;
  gap: 10px;
  min-width: 0;
}

.lyrics-creator-profile-like-inline,
.lyrics-creator-profile-public-link,
.lyrics-creator-profile-modal[data-ui-theme="light"] .lyrics-creator-profile-like-inline,
.lyrics-creator-profile-modal[data-ui-theme="light"] .lyrics-creator-profile-public-link {
  height: 44px;
  min-width: 0;
  padding: 0 18px;
  color: var(--creator-ink-2) !important;
  background: var(--creator-surface-2);
  border: 1px solid transparent;
  border-radius: 999px;
  box-shadow: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
  opacity: 1;
  pointer-events: auto;
  margin-top: 0;
}

.lyrics-creator-profile-public-link,
.lyrics-creator-profile-modal[data-ui-theme="light"] .lyrics-creator-profile-public-link {
  color: var(--creator-ink-2) !important;
  background: var(--creator-surface-2);
  border-color: var(--creator-line-2);
  min-width: 126px;
}

.lyrics-creator-profile-like-inline:hover:not(:disabled),
.lyrics-creator-profile-public-link:hover,
.lyrics-creator-profile-modal[data-ui-theme="light"] .lyrics-creator-profile-like-inline:hover:not(:disabled),
.lyrics-creator-profile-modal[data-ui-theme="light"] .lyrics-creator-profile-public-link:hover {
  color: var(--creator-ink-2);
  background: var(--creator-surface-3);
  transform: none;
}

.lyrics-creator-profile-like-inline.is-liked,
.lyrics-creator-profile-modal[data-ui-theme="light"] .lyrics-creator-profile-like-inline.is-liked {
  color: var(--creator-solid-text) !important;
  background: var(--creator-solid);
  border-color: var(--creator-solid);
}

.lyrics-creator-profile-bio,
.lyrics-creator-profile-modal[data-ui-theme="light"] .lyrics-creator-profile-bio {
  grid-column: 1 / -1;
  margin: 14px 0 0;
  color: var(--creator-ink-2);
  font-size: 14.5px;
  line-height: 1.55;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.lyrics-creator-profile-greeting-block,
.lyrics-creator-profile-modal[data-ui-theme="light"] .lyrics-creator-profile-greeting-block {
  grid-column: 1 / -1;
  margin-top: 14px;
}

.lyrics-creator-profile-greeting-block .lyrics-creator-profile-bio,
.lyrics-creator-profile-modal[data-ui-theme="light"] .lyrics-creator-profile-greeting-block .lyrics-creator-profile-bio {
  margin: 0;
}

.lyrics-creator-profile-greeting-status,
.lyrics-creator-profile-modal[data-ui-theme="light"] .lyrics-creator-profile-greeting-status {
  margin: 8px 0 0;
  color: var(--creator-muted);
  font-size: 12px;
  line-height: 1.45;
  overflow-wrap: anywhere;
}

.lyrics-creator-profile-greeting-edit,
.lyrics-creator-profile-greeting-cancel,
.lyrics-creator-profile-greeting-save,
.lyrics-creator-profile-modal[data-ui-theme="light"] .lyrics-creator-profile-greeting-edit,
.lyrics-creator-profile-modal[data-ui-theme="light"] .lyrics-creator-profile-greeting-cancel,
.lyrics-creator-profile-modal[data-ui-theme="light"] .lyrics-creator-profile-greeting-save {
  height: 34px;
  border-radius: 999px;
  border: 0;
  padding: 0 13px;
  font-family: inherit;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
}

.lyrics-creator-profile-greeting-edit,
.lyrics-creator-profile-modal[data-ui-theme="light"] .lyrics-creator-profile-greeting-edit {
  margin-top: 10px;
  color: var(--creator-ink-2);
  background: var(--creator-surface-2);
}

.lyrics-creator-profile-greeting-edit:hover,
.lyrics-creator-profile-modal[data-ui-theme="light"] .lyrics-creator-profile-greeting-edit:hover {
  background: var(--creator-surface-3);
}

.lyrics-creator-profile-greeting-editor,
.lyrics-creator-profile-modal[data-ui-theme="light"] .lyrics-creator-profile-greeting-editor {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.lyrics-creator-profile-greeting-input,
.lyrics-creator-profile-modal[data-ui-theme="light"] .lyrics-creator-profile-greeting-input {
  width: 100%;
  min-height: 104px;
  resize: vertical;
  padding: 12px 14px;
  color: var(--creator-ink);
  background: var(--creator-surface-2);
  border: 1px solid var(--creator-line-2);
  border-radius: 16px;
  outline: none;
  font-family: inherit;
  font-size: 14px;
  line-height: 1.55;
}

.lyrics-creator-profile-greeting-input:focus,
.lyrics-creator-profile-modal[data-ui-theme="light"] .lyrics-creator-profile-greeting-input:focus {
  background: var(--creator-surface);
  border-color: var(--creator-line-2);
}

.lyrics-creator-profile-greeting-editor-bar,
.lyrics-creator-profile-modal[data-ui-theme="light"] .lyrics-creator-profile-greeting-editor-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.lyrics-creator-profile-greeting-count,
.lyrics-creator-profile-modal[data-ui-theme="light"] .lyrics-creator-profile-greeting-count {
  color: var(--creator-muted);
  font-size: 12px;
  font-variant-numeric: tabular-nums;
}

.lyrics-creator-profile-greeting-editor-actions,
.lyrics-creator-profile-modal[data-ui-theme="light"] .lyrics-creator-profile-greeting-editor-actions {
  display: inline-flex;
  gap: 8px;
}

.lyrics-creator-profile-greeting-cancel,
.lyrics-creator-profile-modal[data-ui-theme="light"] .lyrics-creator-profile-greeting-cancel {
  color: var(--creator-ink-2);
  background: var(--creator-surface-2);
}

.lyrics-creator-profile-greeting-save,
.lyrics-creator-profile-modal[data-ui-theme="light"] .lyrics-creator-profile-greeting-save {
  color: var(--creator-solid-text);
  background: var(--creator-solid);
}

.lyrics-creator-profile-greeting-cancel:disabled,
.lyrics-creator-profile-greeting-save:disabled,
.lyrics-creator-profile-modal[data-ui-theme="light"] .lyrics-creator-profile-greeting-cancel:disabled,
.lyrics-creator-profile-modal[data-ui-theme="light"] .lyrics-creator-profile-greeting-save:disabled {
  opacity: 0.58;
  cursor: default;
}

.lyrics-creator-profile-stats,
.lyrics-creator-profile-modal[data-ui-theme="light"] .lyrics-creator-profile-stats {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0;
  margin: 18px 0 0;
  padding: 14px 6px 4px;
  background: transparent;
  border: 0;
  border-top: 1px solid var(--creator-line);
  border-radius: 0;
}

.lyrics-creator-profile-stat,
.lyrics-creator-profile-modal[data-ui-theme="light"] .lyrics-creator-profile-stat {
  min-width: 0;
  padding: 6px 8px;
  text-align: center;
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

.lyrics-creator-profile-stat + .lyrics-creator-profile-stat,
.lyrics-creator-profile-modal[data-ui-theme="light"] .lyrics-creator-profile-stat + .lyrics-creator-profile-stat {
  border-left: 1px solid var(--creator-line);
}

.lyrics-creator-profile-stat strong,
.lyrics-creator-profile-modal[data-ui-theme="light"] .lyrics-creator-profile-stat strong {
  display: block;
  color: var(--creator-ink);
  font-size: 18px;
  font-weight: 700;
  line-height: 1.15;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0;
}

.lyrics-creator-profile-stat span,
.lyrics-creator-profile-modal[data-ui-theme="light"] .lyrics-creator-profile-stat span {
  display: block;
  margin-top: 4px;
  color: var(--creator-muted);
  font-size: 12px;
  font-weight: 500;
}

.lyrics-creator-profile-section-header,
.lyrics-creator-profile-section-header-tight,
.lyrics-creator-profile-modal[data-ui-theme="light"] .lyrics-creator-profile-section-header,
.lyrics-creator-profile-modal[data-ui-theme="light"] .lyrics-creator-profile-section-header-tight {
  margin: 0;
  padding: 18px 4px 6px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.lyrics-creator-profile-section-title,
.lyrics-creator-profile-modal[data-ui-theme="light"] .lyrics-creator-profile-section-title {
  color: var(--creator-ink);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0;
}

.lyrics-creator-profile-section-meta,
.lyrics-creator-profile-modal[data-ui-theme="light"] .lyrics-creator-profile-section-meta {
  color: var(--creator-muted);
  background: var(--creator-surface-2);
  border: 0;
  border-radius: 999px;
  padding: 2px 8px;
  font-size: 12px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.lyrics-creator-profile-artist-stats,
.lyrics-creator-profile-modal[data-ui-theme="light"] .lyrics-creator-profile-artist-stats {
  display: flex;
  gap: 8px;
  margin: 0;
  padding: 0 4px 4px;
  overflow-x: auto;
}

.lyrics-creator-profile-artist-chip,
.lyrics-creator-profile-filter-badge,
.lyrics-creator-profile-modal[data-ui-theme="light"] .lyrics-creator-profile-artist-chip,
.lyrics-creator-profile-modal[data-ui-theme="light"] .lyrics-creator-profile-filter-badge {
  color: var(--creator-ink-2);
  background: var(--creator-surface-2);
  border: 1px solid transparent;
  border-radius: 999px;
  padding: 8px 12px;
  font-size: 12px;
  font-weight: 600;
}

.lyrics-creator-profile-artist-chip.is-active,
.lyrics-creator-profile-filter-badge,
.lyrics-creator-profile-modal[data-ui-theme="light"] .lyrics-creator-profile-artist-chip.is-active,
.lyrics-creator-profile-modal[data-ui-theme="light"] .lyrics-creator-profile-filter-badge {
  color: var(--creator-solid-text);
  background: var(--creator-solid);
  border-color: var(--creator-solid);
}

.lyrics-creator-profile-toolbar,
.lyrics-creator-profile-modal[data-ui-theme="light"] .lyrics-creator-profile-toolbar {
  margin: 10px 0 0;
  padding: 8px;
  background: var(--creator-surface);
  border: 1px solid var(--creator-line);
  border-radius: 18px;
  box-shadow: var(--creator-shadow-1);
}

.lyrics-creator-profile-toolbar-label,
.lyrics-creator-profile-modal[data-ui-theme="light"] .lyrics-creator-profile-toolbar-label {
  color: var(--creator-muted);
  font-size: 13px;
  font-weight: 500;
  padding-left: 6px;
}

.lyrics-creator-profile-sort-controls,
.lyrics-creator-profile-modal[data-ui-theme="light"] .lyrics-creator-profile-sort-controls {
  gap: 4px;
  padding: 0;
  background: transparent;
  border: 0;
}

.lyrics-creator-profile-sort-btn,
.lyrics-creator-profile-modal[data-ui-theme="light"] .lyrics-creator-profile-sort-btn {
  min-height: 34px;
  padding: 0 12px;
  color: var(--creator-muted);
  background: transparent;
  border: 0;
  border-radius: 12px;
  font-size: 13px;
  font-weight: 600;
}

.lyrics-creator-profile-sort-btn.is-active,
.lyrics-creator-profile-modal[data-ui-theme="light"] .lyrics-creator-profile-sort-btn.is-active {
  color: var(--creator-ink);
  background: var(--creator-surface-2);
  box-shadow: none;
}

.lyrics-creator-profile-grid,
.lyrics-creator-profile-modal[data-ui-theme="light"] .lyrics-creator-profile-grid {
  display: block;
  gap: 0;
  background: var(--creator-surface);
  border: 1px solid var(--creator-line);
  border-radius: 22px;
  overflow: hidden;
  box-shadow: var(--creator-shadow-1);
}

.lyrics-creator-profile-track,
.lyrics-creator-profile-modal[data-ui-theme="light"] .lyrics-creator-profile-track {
  display: grid;
  grid-template-columns: 56px minmax(0, 1fr) auto;
  align-items: center;
  gap: 14px;
  width: 100%;
  min-height: 84px;
  padding: 14px 16px;
  color: var(--creator-ink);
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  text-align: left;
  transition: background 0.2s cubic-bezier(0.22, 0.61, 0.36, 1);
}

.lyrics-creator-profile-track + .lyrics-creator-profile-track,
.lyrics-creator-profile-modal[data-ui-theme="light"] .lyrics-creator-profile-track + .lyrics-creator-profile-track {
  border-top: 1px solid var(--creator-line);
}

.lyrics-creator-profile-track:hover,
.lyrics-creator-profile-modal[data-ui-theme="light"] .lyrics-creator-profile-track:hover {
  background: var(--creator-surface-2);
  border-color: transparent;
  transform: none;
}

.lyrics-creator-profile-track-cover,
.lyrics-creator-profile-modal[data-ui-theme="light"] .lyrics-creator-profile-track-cover {
  position: relative;
  width: 56px;
  height: 56px;
  overflow: hidden;
  border-radius: 12px;
  background: var(--creator-surface-3);
  box-shadow: none;
}

.lyrics-creator-profile-track-cover-ph,
.lyrics-creator-profile-modal[data-ui-theme="light"] .lyrics-creator-profile-track-cover-ph {
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(135deg, var(--creator-placeholder-stripe-a) 0 6px, var(--creator-placeholder-stripe-b) 6px 12px);
}

.lyrics-creator-profile-track-cover-glyph,
.lyrics-creator-profile-modal[data-ui-theme="light"] .lyrics-creator-profile-track-cover-glyph {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--creator-placeholder-glyph);
  font-size: 24px;
  font-weight: 700;
}

.lyrics-creator-profile-track-cover img,
.lyrics-creator-profile-modal[data-ui-theme="light"] .lyrics-creator-profile-track-cover img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 180ms cubic-bezier(0.22, 0.61, 0.36, 1);
}

.lyrics-creator-profile-track-cover.is-loaded img,
.lyrics-creator-profile-modal[data-ui-theme="light"] .lyrics-creator-profile-track-cover.is-loaded img {
  opacity: 1;
}

.lyrics-creator-profile-track-title,
.lyrics-creator-profile-modal[data-ui-theme="light"] .lyrics-creator-profile-track-title {
  color: var(--creator-ink);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.lyrics-creator-profile-track-artist,
.lyrics-creator-profile-modal[data-ui-theme="light"] .lyrics-creator-profile-track-artist {
  margin-top: 3px;
  color: var(--creator-muted);
  font-size: 13px;
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.lyrics-creator-profile-track-side,
.lyrics-creator-profile-modal[data-ui-theme="light"] .lyrics-creator-profile-track-side {
  align-items: flex-end;
  color: var(--creator-muted);
  text-align: right;
}

.lyrics-creator-profile-track-provider,
.lyrics-creator-profile-modal[data-ui-theme="light"] .lyrics-creator-profile-track-provider {
  color: var(--creator-solid-text);
  background: var(--creator-solid);
  border: 0;
  border-radius: 999px;
  padding: 5px 10px;
  font-size: 11px;
  font-weight: 700;
}

.lyrics-creator-profile-track-updated,
.lyrics-creator-profile-modal[data-ui-theme="light"] .lyrics-creator-profile-track-updated {
  color: var(--creator-muted);
  font-size: 12px;
  font-weight: 500;
}

.lyrics-creator-profile-state,
.lyrics-creator-profile-inline-state,
.lyrics-creator-profile-empty,
.lyrics-creator-profile-list-status,
.lyrics-creator-profile-load-more,
.lyrics-creator-profile-modal[data-ui-theme="light"] .lyrics-creator-profile-state,
.lyrics-creator-profile-modal[data-ui-theme="light"] .lyrics-creator-profile-inline-state,
.lyrics-creator-profile-modal[data-ui-theme="light"] .lyrics-creator-profile-empty,
.lyrics-creator-profile-modal[data-ui-theme="light"] .lyrics-creator-profile-list-status,
.lyrics-creator-profile-modal[data-ui-theme="light"] .lyrics-creator-profile-load-more {
  color: var(--creator-muted);
  background: var(--creator-surface);
  border: 1px solid var(--creator-line);
  border-radius: 22px;
}

.lyrics-creator-profile-error,
.lyrics-creator-profile-modal[data-ui-theme="light"] .lyrics-creator-profile-error {
  color: var(--creator-error);
}

@media (max-width: 720px) {
  .lyrics-creator-profile-overlay {
    padding: 16px;
  }

  .lyrics-creator-profile-modal,
  .lyrics-creator-profile-modal[data-ui-theme="light"] {
    max-height: calc(100vh - 32px);
    padding: 18px 12px 16px;
  }

  .lyrics-creator-profile-theme-toggle,
  .lyrics-creator-profile-modal[data-ui-theme="light"] .lyrics-creator-profile-theme-toggle {
    width: 38px;
    padding: 0;
  }

  .lyrics-creator-profile-theme-toggle span,
  .lyrics-creator-profile-modal[data-ui-theme="light"] .lyrics-creator-profile-theme-toggle span {
    display: none;
  }

  .lyrics-creator-profile-hero,
  .lyrics-creator-profile-modal[data-ui-theme="light"] .lyrics-creator-profile-hero {
    grid-template-columns: 68px minmax(0, 1fr);
    gap: 14px;
    padding: 18px;
  }

  .lyrics-creator-profile-avatar,
  .lyrics-creator-profile-avatar-fallback,
  .lyrics-creator-profile-modal[data-ui-theme="light"] .lyrics-creator-profile-avatar,
  .lyrics-creator-profile-modal[data-ui-theme="light"] .lyrics-creator-profile-avatar-fallback {
    width: 68px;
    height: 68px;
  }

  .lyrics-creator-profile-name-row,
  .lyrics-creator-profile-modal[data-ui-theme="light"] .lyrics-creator-profile-name-row {
    flex-direction: row;
    align-items: center;
  }

  .lyrics-creator-profile-track,
  .lyrics-creator-profile-modal[data-ui-theme="light"] .lyrics-creator-profile-track {
    grid-template-columns: 56px minmax(0, 1fr);
  }

  .lyrics-creator-profile-track-side,
  .lyrics-creator-profile-modal[data-ui-theme="light"] .lyrics-creator-profile-track-side {
    grid-column: 2;
    align-items: flex-start;
    text-align: left;
  }
}

/* Confirm Modal */
.ivlyrics-marketplace-confirm-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.6);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: var(--iv-layer-internal-dialog);
  backdrop-filter: blur(4px);
  animation: ivlyricsSoftFadeIn var(--iv-motion-duration-medium) var(--iv-motion-ease-standard);
}

.ivlyrics-marketplace-confirm-modal {
  background: var(--spice-card, #282828);
  border-radius: 12px;
  padding: 28px 32px 24px;
  min-width: 320px;
  max-width: 420px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
  animation: ivlyricsSoftRiseIn var(--iv-motion-duration-slow) var(--iv-motion-ease-emphasis);
}

.ivlyrics-marketplace-confirm-message {
  font-size: 15px;
  line-height: 1.5;
  color: var(--spice-text, #fff);
  margin-bottom: 24px;
  text-align: center;
}

.ivlyrics-marketplace-confirm-buttons {
  display: flex;
  gap: 10px;
  justify-content: flex-end;
}

.ivlyrics-marketplace-confirm-btn {
  padding: 8px 20px;
  border-radius: 20px;
  border: none;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: opacity 0.15s, transform 0.1s;
}

.ivlyrics-marketplace-confirm-btn:hover {
  opacity: 0.85;
}

.ivlyrics-marketplace-confirm-btn:active {
  transform: scale(0.97);
}

.ivlyrics-marketplace-confirm-btn-cancel {
  background: rgba(var(--spice-rgb-text), 0.1);
  color: var(--spice-text, #fff);
}

.ivlyrics-marketplace-confirm-btn-ok {
  background: #e74c3c;
  color: #fff;
}

.ivlyrics-marketplace-confirm-btn-warn {
  background: #f59e0b;
  color: #000;
}

/* Disclaimer Notice Banner */
.ivlyrics-marketplace-notice {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 12px 16px;
  margin: 0 0 16px;
  background: rgba(245, 158, 11, 0.08);
  border: 1px solid rgba(245, 158, 11, 0.2);
  border-radius: 10px;
  font-size: 12px;
  line-height: 1.6;
  color: var(--spice-text, #fff);
  opacity: 0.75;
}

.ivlyrics-marketplace-notice-icon {
  flex-shrink: 0;
  margin-top: 2px;
  color: #f59e0b;
}

/* Disclaimer Modal */
.ivlyrics-marketplace-disclaimer-modal {
  max-width: 440px;
  text-align: center;
}

.ivlyrics-marketplace-disclaimer-icon {
  margin-bottom: 12px;
}

.ivlyrics-marketplace-disclaimer-title {
  font-size: 17px;
  font-weight: 700;
  color: var(--spice-text, #fff);
  margin-bottom: 12px;
}

.ivlyrics-marketplace-disclaimer-checkbox {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-bottom: 20px;
  font-size: 13px;
  color: var(--spice-text, #fff);
  opacity: 0.7;
  cursor: pointer;
}

.ivlyrics-marketplace-disclaimer-checkbox input[type="checkbox"] {
  width: 16px;
  height: 16px;
  accent-color: #f59e0b;
  cursor: pointer;
}

/* Marketplace button active state */
.lyrics-marketplace-button.active {
  background: rgba(var(--spice-rgb-text), 0.2) !important;
}