/* =====================================================================
   seekn-final-pack.css — final fixes (loaded LAST)

   Covers:
   1) Profile avatar inside the card (no bleed off the top).
   2) Discord sync card avatar contained in rounded corners.
   3) Profile + Discord badges = pure icon glyphs (no boxes).
   4) Remove buttons hide cleanly when nothing is set.
   5) Volume slider made transparent and minimal.
   6) Music card: progress bar + time stamps, neat dark theme.
   7) Discord presence dot (online / idle / dnd / offline).
   8) Loading overlay auto-fades quickly so the page feels fast.
   9) Globally darker base theme.
   10) Click-to-enter overlay always above music / cursor and clickable.
   ===================================================================== */

/* ---------- 9) Darker base theme ---------- */
:root {
  --fp-bg-deep:   #050507;
  --fp-bg-card:   #0a0a0e;
  --fp-bg-card-2: #0d0d12;
  --fp-line:      rgba(255,255,255,0.06);
  --fp-line-2:    rgba(255,255,255,0.10);
  --fp-text:      #ededf2;
  --fp-text-mut:  #8c8c98;
  --fp-accent:    #a78bfa;
}
html, body {
  background: var(--fp-bg-deep) !important;
}
body {
  color: var(--fp-text);
}
.profileScreen,
.menuScreen,
.editScreen,
.dashScreen,
.authScreen {
  background: transparent !important;
}
.profileCard,
.editCard,
.card {
  background: var(--fp-bg-card) !important;
  border: 1px solid var(--fp-line) !important;
}
.editCard {
  background: var(--fp-bg-card-2) !important;
}
.editTabsBar button {
  background: transparent !important;
  border: 1px solid transparent !important;
  color: var(--fp-text-mut) !important;
}
.editTabsBar button.active {
  background: rgba(167,139,250,0.10) !important;
  border-color: rgba(167,139,250,0.35) !important;
  color: #fff !important;
}
input, select, textarea {
  background-color: rgba(255,255,255,0.03) !important;
  border-color: var(--fp-line-2) !important;
  color: var(--fp-text) !important;
}
input:focus, select:focus, textarea:focus {
  border-color: rgba(167,139,250,0.55) !important;
  box-shadow: 0 0 0 3px rgba(167,139,250,0.18) !important;
}
.muted, .hint, p.muted {
  color: var(--fp-text-mut) !important;
}
#topbar, .topbar, header.topbar {
  background: rgba(5,5,7,0.78) !important;
  border-bottom: 1px solid var(--fp-line) !important;
  backdrop-filter: blur(14px) saturate(140%) !important;
}

/* ---------- 1) Profile card avatar fully inside the card ---------- */
.profileCard {
  position: relative !important;
  padding-top: 26px !important;
}
.profileCard .avatar,
#profileAvatar.avatar {
  position: relative !important;
  top: 0 !important;
  left: 0 !important;
  margin: 0 auto 14px !important;
  transform: none !important;
  width: 120px !important;
  height: 120px !important;
  font-size: 44px !important;
  border-radius: 999px !important;
  background-size: cover !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex: 0 0 auto !important;
  overflow: hidden !important;
}
@media (max-width: 640px) {
  .profileCard .avatar,
  #profileAvatar.avatar {
    width: 96px !important;
    height: 96px !important;
    font-size: 36px !important;
  }
}
.profileCard .avatar { animation: none !important; }

/* ---------- 2) Discord sync card containment ---------- */
#discordSyncBlock,
.discordSync {
  width: auto !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
  overflow: visible !important;
  background: transparent;
  border: 1px solid rgba(88,101,242,0.30);
  border-radius: 14px;
  padding: 10px 14px;
}
.discordSyncRow {
  display: flex !important;
  align-items: center !important;
  flex-wrap: nowrap !important;
  gap: 12px !important;
  min-width: 0 !important;
  max-width: 100% !important;
  overflow: hidden !important;
  border-radius: inherit !important;
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
  box-shadow: none !important;
}
.dsAvatar {
  position: relative !important;
  flex: 0 0 36px !important;
  width: 36px !important;
  height: 36px !important;
  min-width: 36px !important;
  border-radius: 50% !important;
  background-color: rgba(255,255,255,0.06) !important;
  background-position: center !important;
  background-size: cover !important;
  background-repeat: no-repeat !important;
  border: 2px solid rgba(255,255,255,0.18) !important;
  overflow: visible !important;
  box-shadow: 0 0 12px rgba(88,101,242,0.35) !important;
}
.dsInfo {
  flex: 1 1 auto !important;
  min-width: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 2px !important;
}
.dsHead {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  flex-wrap: wrap !important;
  min-width: 0 !important;
}
.dsUsername {
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  max-width: 100% !important;
}

/* 7) Discord presence dot (overlayed on the dsAvatar) */
.dsAvatar .dsPresenceDot,
.discordPresenceDot {
  position: absolute !important;
  bottom: -2px !important;
  right: -2px !important;
  width: 12px !important;
  height: 12px !important;
  border-radius: 50% !important;
  border: 2px solid var(--fp-bg-card) !important;
  background: #6b7280;
  box-shadow: 0 0 8px rgba(0,0,0,0.5);
}
.dsAvatar .dsPresenceDot[data-status="online"],
.discordPresenceDot[data-status="online"]   { background: #23a55a !important; box-shadow: 0 0 10px rgba(35,165,90,0.7) !important; }
.dsAvatar .dsPresenceDot[data-status="idle"],
.discordPresenceDot[data-status="idle"]     { background: #f0b232 !important; box-shadow: 0 0 10px rgba(240,178,50,0.7) !important; }
.dsAvatar .dsPresenceDot[data-status="dnd"],
.discordPresenceDot[data-status="dnd"]      { background: #f23f43 !important; box-shadow: 0 0 10px rgba(242,63,67,0.7) !important; }
.dsAvatar .dsPresenceDot[data-status="offline"],
.discordPresenceDot[data-status="offline"]  { background: #6b7280 !important; box-shadow: 0 0 6px rgba(0,0,0,0.4) !important; }

.dsActivity {
  font-size: 11px !important;
  color: var(--fp-text-mut) !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  max-width: 100% !important;
}
.dsActivity .dot { display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--fp-accent); margin-right: 6px; vertical-align: middle; }

/* ---------- 3) Profile badges: pure icon glyphs ---------- */
.badgesRow {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 10px !important;
  justify-content: flex-end !important;
  align-items: center !important;
}
.badgeChip,
.badgeChip.badgeIcon,
.badgeIcon {
  width: auto !important;
  min-width: 0 !important;
  height: auto !important;
  padding: 0 !important;
  margin: 0 !important;
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  border: 0 !important;
  border-color: transparent !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  outline: none !important;
  filter: drop-shadow(0 0 6px var(--badge-glow, rgba(167,139,250,0.55)));
  cursor: default;
  transition: transform 0.18s ease, filter 0.18s ease;
  position: relative;
}
.badgeChip:hover,
.badgeChip.badgeIcon:hover {
  transform: translateY(-2px) scale(1.08) !important;
  filter: drop-shadow(0 0 10px var(--badge-glow, rgba(167,139,250,0.85))) !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}
.badgeChip svg,
.badgeChip.badgeIcon svg,
.badgeIcon svg {
  width: 22px !important;
  height: 22px !important;
  display: block !important;
  color: var(--badge-color, #fff) !important;
  fill: currentColor;
}
.badgeChip[title]::after {
  content: attr(title);
  position: absolute;
  bottom: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%) translateY(4px);
  background: rgba(12,12,14,0.95);
  color: #fff;
  font-size: 11px;
  font-weight: 600;
  padding: 4px 10px;
  border-radius: 6px;
  white-space: nowrap;
  border: 1px solid rgba(255,255,255,0.10);
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.18s ease, transform 0.18s ease;
  z-index: 99;
}
.badgeChip[title]:hover::after {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/* 3b) Discord badges (inside discord sync card) */
#discordSyncBlock .dsBadges {
  display: inline-flex !important;
  gap: 8px !important;
  flex-wrap: wrap !important;
  align-items: center !important;
}
#discordSyncBlock .dsBadge,
#discordSyncBlock .dsBadgeIcon {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: auto !important;
  min-width: 0 !important;
  height: auto !important;
  padding: 0 !important;
  margin: 0 !important;
  background: transparent !important;
  background-color: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  font-size: 0 !important;
  color: var(--badge-color, #fff);
  filter: drop-shadow(0 0 6px var(--badge-glow, rgba(88,101,242,0.55)));
  position: relative;
}
#discordSyncBlock .dsBadge svg,
#discordSyncBlock .dsBadgeIcon svg {
  width: 18px !important;
  height: 18px !important;
  display: block !important;
  color: var(--badge-color, #fff) !important;
  fill: currentColor;
}
#discordSyncBlock .dsBadge:hover,
#discordSyncBlock .dsBadgeIcon:hover {
  filter: drop-shadow(0 0 10px var(--badge-glow, rgba(88,101,242,0.85))) !important;
  transform: translateY(-1px);
}
#discordSyncBlock .dsBadge[title]::after,
#discordSyncBlock .dsBadgeIcon[title]::after {
  content: attr(title);
  position: absolute;
  bottom: calc(100% + 6px);
  left: 50%;
  transform: translateX(-50%);
  background: rgba(12,12,14,0.95);
  color: #fff;
  font-size: 11px;
  font-weight: 600;
  padding: 3px 8px;
  border-radius: 5px;
  white-space: nowrap;
  border: 1px solid rgba(255,255,255,0.10);
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.18s ease;
  z-index: 99;
}
#discordSyncBlock .dsBadge:hover[title]::after,
#discordSyncBlock .dsBadgeIcon:hover[title]::after { opacity: 1; }

/* ---------- 4) Remove buttons ---------- */
.removeBtn[hidden],
.removeBtn[data-empty="1"],
button.removeBtn[hidden],
button.removeBtn[data-empty="1"] {
  display: none !important;
  visibility: hidden !important;
  height: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  border: 0 !important;
  pointer-events: none !important;
}
.removeBtn {
  margin-top: 8px !important;
  background: rgba(242,63,67,0.10) !important;
  border: 1px solid rgba(242,63,67,0.35) !important;
  color: #fca5a5 !important;
  padding: 6px 12px !important;
  border-radius: 8px !important;
  font-size: 12px !important;
  cursor: pointer !important;
}
.removeBtn:hover {
  background: rgba(242,63,67,0.18) !important;
  color: #fff !important;
}

/* ---------- 5) Volume slider transparent + minimal ---------- */
.musicVolumeRow {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  padding: 6px 4px 2px !important;
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
}
.musicVolumeIcon {
  width: 14px !important;
  height: 14px !important;
  color: rgba(255,255,255,0.55) !important;
  flex: 0 0 auto !important;
}
.musicVolume,
input.musicVolume {
  -webkit-appearance: none !important;
  appearance: none !important;
  background: transparent !important;
  flex: 1 1 auto !important;
  height: 14px !important;
  cursor: pointer !important;
  outline: none !important;
  border: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  box-shadow: none !important;
}
.musicVolume::-webkit-slider-runnable-track {
  height: 3px !important;
  background: linear-gradient(to right, rgba(167,139,250,0.65) var(--vol-pct,100%), rgba(255,255,255,0.10) var(--vol-pct,100%)) !important;
  border-radius: 2px !important;
  border: 0 !important;
}
.musicVolume::-moz-range-track {
  height: 3px !important;
  background: rgba(255,255,255,0.10) !important;
  border-radius: 2px !important;
  border: 0 !important;
}
.musicVolume::-moz-range-progress {
  height: 3px !important;
  background: rgba(167,139,250,0.65) !important;
  border-radius: 2px !important;
}
.musicVolume::-webkit-slider-thumb {
  -webkit-appearance: none !important;
  appearance: none !important;
  width: 11px !important;
  height: 11px !important;
  border-radius: 50% !important;
  background: #a78bfa !important;
  border: 2px solid #fff !important;
  margin-top: -4px !important;
  box-shadow: 0 0 8px rgba(167,139,250,0.55) !important;
  cursor: pointer !important;
}
.musicVolume::-moz-range-thumb {
  width: 11px !important;
  height: 11px !important;
  border-radius: 50% !important;
  background: #a78bfa !important;
  border: 2px solid #fff !important;
  box-shadow: 0 0 8px rgba(167,139,250,0.55) !important;
  cursor: pointer !important;
}

/* ---------- 6) Music progress bar + timestamps ---------- */
.musicProgressRow {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 4px 6px 0 !important;
  font-size: 10px !important;
  font-variant-numeric: tabular-nums !important;
  color: rgba(255,255,255,0.55) !important;
  user-select: none;
}
.musicProgressBar {
  flex: 1 1 auto !important;
  -webkit-appearance: none !important;
  appearance: none !important;
  height: 14px !important;
  background: transparent !important;
  cursor: pointer !important;
  outline: none !important;
  border: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
}
.musicProgressBar::-webkit-slider-runnable-track {
  height: 3px !important;
  background: linear-gradient(to right, rgba(167,139,250,0.65) var(--prog-pct,0%), rgba(255,255,255,0.10) var(--prog-pct,0%)) !important;
  border-radius: 2px !important;
  border: 0 !important;
}
.musicProgressBar::-moz-range-track {
  height: 3px !important;
  background: rgba(255,255,255,0.10) !important;
  border-radius: 2px !important;
}
.musicProgressBar::-moz-range-progress {
  height: 3px !important;
  background: rgba(167,139,250,0.65) !important;
  border-radius: 2px !important;
}
.musicProgressBar::-webkit-slider-thumb {
  -webkit-appearance: none !important;
  appearance: none !important;
  width: 10px !important;
  height: 10px !important;
  border-radius: 50% !important;
  background: #a78bfa !important;
  border: 1px solid #fff !important;
  margin-top: -3.5px !important;
  cursor: pointer !important;
  box-shadow: 0 0 6px rgba(167,139,250,0.6) !important;
}
.musicProgressBar::-moz-range-thumb {
  width: 10px !important;
  height: 10px !important;
  border-radius: 50% !important;
  background: #a78bfa !important;
  border: 1px solid #fff !important;
  cursor: pointer !important;
  box-shadow: 0 0 6px rgba(167,139,250,0.6) !important;
}

/* ---------- 8) Loading overlay quick-fade ---------- */
#overlay,
#loaderOverlay,
.loaderOverlay,
[data-loader="profile"],
.profileLoader {
  transition: opacity 0.25s ease !important;
}
#overlay.hidden,
#loaderOverlay.hidden {
  display: none !important;
  opacity: 0 !important;
  pointer-events: none !important;
}
body.fp-render-skip #overlay,
body.fp-render-skip #loaderOverlay,
body.fp-render-skip .loaderOverlay,
body.fp-render-skip [data-loader="profile"],
body.fp-render-skip .profileLoader {
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

/* ---------- 10) Click-to-enter overlay always clickable & on top ---------- */
#entryOverlay {
  z-index: 99999 !important;
  pointer-events: auto !important;
  cursor: pointer !important;
  background: radial-gradient(ellipse at center, rgba(10,10,14,0.85), rgba(0,0,0,0.96)) !important;
}
#entryOverlay.hidden {
  display: none !important;
}
#entryOverlay * {
  pointer-events: none;
}
#entryOverlay > * {
  user-select: none;
}

/* ---------- Live preview side panel (real-time) ---------- */
.fpLivePreview {
  position: sticky;
  top: 80px;
  align-self: flex-start;
  background: var(--fp-bg-card);
  border: 1px solid var(--fp-line);
  border-radius: 14px;
  padding: 14px;
  margin-top: 16px;
}
.fpLivePreview h4 {
  margin: 0 0 10px;
  font-size: 12px;
  font-weight: 600;
  color: var(--fp-text-mut);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.fpPreviewSurface {
  border-radius: 12px;
  padding: 18px 14px 14px;
  background: rgba(255,255,255,0.02);
  border: 1px solid var(--fp-line);
}
.fpPreviewAvatar {
  width: 64px;
  height: 64px;
  margin: 0 auto 10px;
  border-radius: 999px;
  background: #1a1a22 center/cover no-repeat;
  border: 2px solid rgba(255,255,255,0.10);
}
.fpPreviewName {
  text-align: center;
  font-weight: 700;
  font-size: 15px;
  margin-bottom: 4px;
}
.fpPreviewBio {
  text-align: center;
  font-size: 12px;
  color: var(--fp-text-mut);
}
.fpPreviewMusic,
.fpPreviewDiscord {
  margin-top: 10px;
  border-radius: 10px;
  padding: 8px 10px;
  border: 1px solid rgba(255,255,255,0.10);
  font-size: 12px;
  color: rgba(255,255,255,0.85);
  display: flex;
  align-items: center;
  gap: 8px;
}
.fpPreviewMusic .lab,
.fpPreviewDiscord .lab {
  font-size: 10px;
  text-transform: uppercase;
  color: rgba(255,255,255,0.5);
  letter-spacing: 0.06em;
}

/* ===================================================================
   v25 additions:
   - even darker, balanced UI vars
   - profile card width override (narrow / normal / wide / full)
   - avatar placement modes (outside | inside)
   - music sound color (--mus-accent)
   - cover art animations (spin/pulse/bounce/tilt)
   - lyrics panel
   =================================================================== */

/* Slightly darker, but balanced (not full black). */
:root {
  --fp-bg-deep:   #07070b;
  --fp-bg-card:   #0c0c12;
  --fp-bg-card-2: #0f0f17;
  --fp-line:      rgba(255,255,255,0.05);
  --fp-line-2:    rgba(255,255,255,0.09);
  --fp-text:      #e8e8ee;
  --fp-text-mut:  #84848f;
  --fp-accent:    #a78bfa;
}
body { background: linear-gradient(180deg, #08080d 0%, #050508 100%) fixed !important; }

/* ---------- Profile card: width override ---------- */
.profileCard {
  /* Override the legacy 580px max-width with a wider default. */
  max-width: 720px !important;
  width: calc(100% - 32px) !important;
  padding: 64px 36px 30px !important;
}
.profileCard.fp-card-narrow { max-width: 480px !important; }
.profileCard.fp-card-normal { max-width: 600px !important; }
.profileCard.fp-card-wide   { max-width: 720px !important; }
.profileCard.fp-card-full   { max-width: 940px !important; }

/* ---------- Avatar placement: outside vs inside ---------- */
/* OUTSIDE: avatar overlaps the top edge of the card (pre-existing).   */
.profileCard.fp-avatar-outside {
  padding-top: 64px !important;
}
.profileCard.fp-avatar-outside .avatar,
.profileCard.fp-avatar-outside #profileAvatar.avatar {
  position: absolute !important;
  top: -50px !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  margin: 0 !important;
  width: 100px !important;
  height: 100px !important;
  font-size: 38px !important;
  border: 3px solid var(--fp-bg-card) !important;
  z-index: 4;
}

/* INSIDE: avatar sits cleanly inside the card, centered on top.       */
.profileCard.fp-avatar-inside {
  padding-top: 28px !important;
}
.profileCard.fp-avatar-inside .avatar,
.profileCard.fp-avatar-inside #profileAvatar.avatar {
  position: relative !important;
  top: 0 !important;
  left: 0 !important;
  transform: none !important;
  margin: 0 auto 14px !important;
  width: 110px !important;
  height: 110px !important;
  font-size: 40px !important;
  border: 2px solid rgba(255,255,255,0.12) !important;
}

/* ---------- Music sound color (accent) ---------- */
/* The volume + progress bars use --mus-accent if set; falls back to     */
/* the default purple.                                                   */
.musicPlayer { --mus-accent: #a78bfa; }
.musicVolume::-webkit-slider-runnable-track {
  background: linear-gradient(to right,
    var(--mus-accent) var(--vol-pct,0%),
    rgba(255,255,255,0.10) var(--vol-pct,0%)) !important;
}
.musicVolume::-moz-range-progress { background: var(--mus-accent) !important; }
.musicVolume::-webkit-slider-thumb {
  background: var(--mus-accent) !important;
  box-shadow: 0 0 6px color-mix(in srgb, var(--mus-accent) 70%, transparent) !important;
}
.musicVolume::-moz-range-thumb {
  background: var(--mus-accent) !important;
  box-shadow: 0 0 6px color-mix(in srgb, var(--mus-accent) 70%, transparent) !important;
}
.musicProgressBar::-webkit-slider-runnable-track {
  background: linear-gradient(to right,
    var(--mus-accent) var(--prog-pct,0%),
    rgba(255,255,255,0.10) var(--prog-pct,0%)) !important;
}
.musicProgressBar::-moz-range-progress { background: var(--mus-accent) !important; }
.musicProgressBar::-webkit-slider-thumb {
  background: var(--mus-accent) !important;
  box-shadow: 0 0 6px color-mix(in srgb, var(--mus-accent) 70%, transparent) !important;
}
.musicProgressBar::-moz-range-thumb {
  background: var(--mus-accent) !important;
  box-shadow: 0 0 6px color-mix(in srgb, var(--mus-accent) 70%, transparent) !important;
}
.musicPlayBtn { color: var(--mus-accent) !important; }

/* ---------- Cover art animations ---------- */
@keyframes fpCoverSpin   { from { transform: rotate(0); } to { transform: rotate(360deg); } }
@keyframes fpCoverPulse  { 0%,100% { transform: scale(1); } 50% { transform: scale(1.06); } }
@keyframes fpCoverBounce { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-4px); } }
@keyframes fpCoverTilt   { 0%,100% { transform: rotate(-3deg); } 50% { transform: rotate(3deg); } }

#musicCover.fp-anim-spin     { animation: fpCoverSpin 6s linear infinite; }
#musicCover.fp-anim-pulse    { animation: fpCoverPulse 1.6s ease-in-out infinite; }
#musicCover.fp-anim-bounce   { animation: fpCoverBounce 1.6s ease-in-out infinite; }
#musicCover.fp-anim-tilt     { animation: fpCoverTilt 2.4s ease-in-out infinite; }

/* Pause the animation when audio is paused. */
.musicPlayer:not(.fp-playing) #musicCover { animation-play-state: paused !important; }

/* Vinyl-style hole when spin animation is on */
#musicCover.fp-anim-spin {
  border-radius: 999px !important;
  position: relative;
  overflow: hidden;
}
#musicCover.fp-anim-spin::after {
  content: "";
  position: absolute;
  top: 50%; left: 50%;
  width: 14px; height: 14px;
  margin: -7px 0 0 -7px;
  border-radius: 50%;
  background: rgba(0,0,0,0.85);
  border: 2px solid rgba(255,255,255,0.15);
  pointer-events: none;
}

/* ---------- Lyrics panel ---------- */
.fpLyricsPanel {
  margin-top: 12px;
  padding: 12px 14px;
  border-radius: 14px;
  background: rgba(12,12,18,0.78);
  border: 1px solid rgba(167,139,250,0.22);
  text-align: center;
  font-size: 14px;
  line-height: 1.5;
  color: rgba(255,255,255,0.78);
  min-height: 24px;
  transition: opacity 0.25s ease;
  backdrop-filter: blur(6px);
}
.fpLyricsPanel .fpLyricsLine {
  display: block;
  transition: opacity 0.3s ease, transform 0.3s ease;
  min-height: 1.2em;
}
.fpLyricsPanel .fpLyricsLine.dim {
  opacity: 0.4;
  font-size: 12px;
}
.fpLyricsPanel .fpLyricsLine.cur {
  opacity: 1;
  font-weight: 600;
  color: #fff;
  text-shadow: 0 0 12px color-mix(in srgb, var(--mus-accent, #a78bfa) 55%, transparent);
}
.fpLyricsPanel .fpLyricsLabel {
  display: block;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--fp-text-mut);
  margin-bottom: 6px;
}
.fpLyricsPanel.fpLyricsEmpty { display: none; }
.fpLyricsPanel.fpLyricsLoading .fpLyricsLine.cur,
.fpLyricsPanel.fpLyricsMissing .fpLyricsLine.cur {
  font-style: italic;
  font-weight: 500;
  opacity: 0.85;
  color: rgba(255,255,255,0.7);
  text-shadow: none;
}
.fpLyricsPanel.fpLyricsLoading .fpLyricsLabel::after {
  content: " · loading";
  color: var(--mus-accent, #a78bfa);
  animation: fpLyricsBlink 1.2s ease-in-out infinite;
}
@keyframes fpLyricsBlink {
  0%, 100% { opacity: 0.45; }
  50%      { opacity: 1; }
}

/* ---------- Live preview tweaks for new fields ---------- */
.fpLivePreview .fpPreviewMusic { background: rgba(167,139,250,0.06); }
.fpLivePreview .fpPreviewDiscord { background: rgba(88,101,242,0.08); }

/* ---------- v27 — lyrics search-existence badge on edit form ----- */
.fpLyricsSearchBadge {
  margin-top: 10px;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border-radius: 10px;
  font-size: 12.5px;
  line-height: 1.4;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.08);
  color: rgba(255,255,255,0.78);
  transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}
.fpLyricsSearchBadge .fpLsbDot {
  width: 8px; height: 8px; border-radius: 50%;
  background: rgba(255,255,255,0.35);
  flex: 0 0 auto;
  box-shadow: 0 0 0 0 transparent;
  transition: background 0.2s ease, box-shadow 0.2s ease;
}
.fpLyricsSearchBadge.is-loading {
  background: rgba(168,85,247,0.08);
  border-color: rgba(168,85,247,0.25);
  color: #d8c8ff;
}
.fpLyricsSearchBadge.is-loading .fpLsbDot {
  background: #a855f7;
  animation: fpLsbPulse 1.1s ease-in-out infinite;
}
@keyframes fpLsbPulse {
  0%, 100% { opacity: 0.45; box-shadow: 0 0 0 0 rgba(168,85,247,0); }
  50%      { opacity: 1;    box-shadow: 0 0 0 4px rgba(168,85,247,0.18); }
}
.fpLyricsSearchBadge.is-found {
  background: rgba(34,197,94,0.08);
  border-color: rgba(34,197,94,0.30);
  color: #b9f0c8;
}
.fpLyricsSearchBadge.is-found .fpLsbDot {
  background: #22c55e;
  box-shadow: 0 0 0 3px rgba(34,197,94,0.18);
}
.fpLyricsSearchBadge.is-missing {
  background: rgba(239,68,68,0.07);
  border-color: rgba(239,68,68,0.28);
  color: #f5b8b8;
}
.fpLyricsSearchBadge.is-missing .fpLsbDot {
  background: #ef4444;
  box-shadow: 0 0 0 3px rgba(239,68,68,0.16);
}
.fpLyricsSearchBadge.is-disabled {
  opacity: 0.55;
}
.fpLyricsSearchBadge.is-disabled .fpLsbDot { background: rgba(255,255,255,0.25); }