/* RiffBank styles.css (FULL REPLACE)
   - Fixes mini player covering bottom nav (proper spacing + centered max-width bar)
   - Fixes padding selector mismatch (.view vs #view)
   - De-dupes splash CSS (removed repeated jump/shimmer blocks + keyframe name collisions)
*/

:root{
  --bg: #0d0e12;
  --panel: rgba(255,255,255,.06);
  --panel2: rgba(255,255,255,.10);
  --line: rgba(255,255,255,.12);
  --text: rgba(255,255,255,.92);
  --muted: rgba(255,255,255,.62);

  /* #nowPlayingOverlay, .nowPlayingOverlay, .overlay {
  outline: 4px solid red !important;
  background: rgba(255,0,0,0.08) !important;
} */

  /* Bottom nav + mini player */
  --tabbar-h: 74px;          /* approx bottomNav visible height (excluding safe area) */
  --bottom-nav-height: calc(var(--tabbar-h) + env(safe-area-inset-bottom));
  --mini-gap: 10px;
  --mini-h: 92px;            /* mini bar visual height */
  --app-maxw: 820px;

  --rCard: 18px;
  --rPill: 999px;

  /* Splash timing knobs */
  --splash-logo-solo-ms: 820ms;      /* logo alone time */
  --splash-title-settle-ms: 560ms;   /* slide title into place */
  --splash-sub-in-ms: 420ms;         /* sub fade in */
  --splash-jump-ms: 520ms;           /* unified jump */
  --splash-glow-ms: 1650ms;          /* glow breathe loop */
  --splash-ellipsis-ms: 700ms;       /* dot dance */
}

*{ box-sizing:border-box; -webkit-tap-highlight-color: transparent; }

/* ── View Transitions (native bitmap captures) ─────────────────── */
::view-transition-old(root),
::view-transition-new(root){
  animation-duration: 0.3s;
  animation-timing-function: cubic-bezier(.4,0,.2,1);
}
/* Forward: new slides in from right, old parallax left */
.vt-forward::view-transition-old(root){ animation-name: vt-ace-left; }
.vt-forward::view-transition-new(root){ animation-name: vt-queen-from-right; }
/* Back: old slides off right, new parallax in from left */
.vt-back::view-transition-old(root){ animation-name: vt-queen-right; }
.vt-back::view-transition-new(root){ animation-name: vt-ace-from-left; }
/* Jump home: old slides off right, new instant */
.vt-jumpHome::view-transition-old(root){ animation-name: vt-queen-right; }
.vt-jumpHome::view-transition-new(root){ animation-name: none; }

/* Bottom nav + mini player stay stationary during all transitions */
::view-transition-old(bottom-nav),
::view-transition-new(bottom-nav),
::view-transition-old(mini-player),
::view-transition-new(mini-player){
  animation: none;
}

@keyframes vt-ace-left      { to   { transform: translateX(-30px); } }
@keyframes vt-queen-from-right { from { transform: translateX(100%); } }
@keyframes vt-queen-right   { to   { transform: translateX(100%); } }
@keyframes vt-ace-from-left { from { transform: translateX(-30px); } }

html,body{
  height:100%;
  background: linear-gradient(180deg, #0f1014 0%, #090a0d 100%) fixed;
  overflow:hidden;
  /* Keep the app in "native app" mode: prevent the page itself from rubber-banding.
     The .view element is the scroll container instead. */
  overscroll-behavior:none;
}

body{
  margin:0;
  color: var(--text);
  font-family: "Montserrat", ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial;
  -webkit-user-select: none;
  user-select: none;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

input, textarea, select, button { font-size: 16px; }
input, textarea { -webkit-user-select: text; user-select: text; }

.app{
  max-width: var(--app-maxw);
  margin: 0 auto;

  /* CRITICAL: lock the app shell to the viewport height
     so #view becomes the scroll container instead of the whole app growing */
  height: 100dvh;

  padding: 0 16px;
  display:flex;
  flex-direction:column;
  position: relative;
}

.topbar{
  display:flex;
  align-items:center;
  justify-content:center;
  padding: calc(env(safe-area-inset-top) + 22px) 6px 10px;
  position:relative;
  background: var(--bg);
  transition: background .2s ease;
}

.titleblock h1{
  margin:0;
  font-size: 34px;
  font-weight: 900;
  letter-spacing: -0.8px;
  color: var(--text);
}

.top-actions{ display:none; }

/* Back button — absolute-positioned over the left side of the topbar */
.headerBack{
  position: absolute;
  left: 0px;
  top: calc(env(safe-area-inset-top, 0px) + 4px);
  background: none;
  border: none;
  color: #fff;
  display: none; /* shown by JS when needed */
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  z-index: 1;               /* render above topbar ::after cover band */
}
.headerBack:active{ opacity: 0.5; }
.headerBackBadge {
  position: absolute; top: 4px; right: 0;
  min-width: 16px; height: 16px; padding: 0 4px;
  background: #ef4444; border-radius: 999px;
  font-size: 9px; font-weight: 800; color: #fff;
  display: flex; align-items: center; justify-content: center;
  line-height: 1;
}

.view{
  flex:1;
  min-height:0;
  position: relative;
  overflow:hidden;
}

.screen{
  position:absolute;
  inset:0;

  overflow-x:hidden;
  overflow-y:scroll;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  -ms-overflow-style: none;
  overscroll-behavior-y: none;

  padding: 10px 0 12px;
  touch-action: pan-y;

  opacity:0;
  pointer-events:none;
}

.screen.is-active{
  opacity:1;
  pointer-events:auto;
}

.screen::-webkit-scrollbar{ width:0; height:0; }

/* Home: no scrolling, no screen padding (homeTopbar handles safe-area itself) */
body.isHome #screen-home.is-active{
  overflow: hidden;
  padding: 0;
}

/* Hide standard topbar on home — replaced by homeTopbar */
body.isHome .topbar{ display: none; }

/* ── Master header gradient ──────────────────────────────────────
   Applied directly to body so it lives OUTSIDE the 16px .app padding
   and fills the full viewport edge-to-edge with no black side bars.
   All child elements (topbar, view, screens) are transparent and let
   this body gradient show through naturally.
   ──────────────────────────────────────────────────────────────── */
/* Gradient removed — body stays solid var(--bg) on all screens */

/* Player: last song never buried under mini-player / bottom nav */
#screen-player.is-active {
  padding-bottom: calc(var(--dock-h, 64px) + 16px);
}

/* Home topbar (YT Music style) */
.homeWrap{
  display: grid;
  grid-template-rows: auto 1fr;
  height: calc(100dvh - var(--dock-h, var(--bottom-nav-height)) - 12px);
  box-sizing: border-box;
  overflow: hidden;
  transition: height 0.3s cubic-bezier(.4,0,.2,1);
}

.homeTopbar{
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: calc(env(safe-area-inset-top) + 10px) 16px 16px;
}

.homeTopbarLeft{
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1;
}

.homeTopTitle{
  font-size: 22px;
  font-weight: 800;
  color: rgba(255,255,255,0.94);
  letter-spacing: -0.4px;
  line-height: 1.1;
}

.rbLogoClip{
  width: 30px;
  height: 30px;
  border-radius: 7px;
  overflow: hidden;
  flex-shrink: 0;
  display: block;
  background: var(--bg);
  position: relative;
}

.rbLogoClip::after{
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 7px;
  box-shadow: inset 0 0 0 5px var(--bg);
  pointer-events: none;
  z-index: 1;
}

.rbLogo{
  width: 120%;
  height: 120%;
  margin: -10%;
  display: block;
  object-fit: cover;
}

.rbBrand{
  font-size: 18px;
  font-weight: 800;
  color: #fff;
  letter-spacing: -0.4px;
}

.homeTopbarRight{
  display: flex;
  align-items: center;
  gap: 2px;
}

.htbBtn{
  width: 38px;
  height: 38px;
  border: none;
  background: transparent;
  color: rgba(255,255,255,.72);
  display: grid;
  place-items: center;
  border-radius: 50%;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.htbBtn:active{ background: rgba(255,255,255,.1); }
.htbBtn svg{ width: 20px; height: 20px; }

.card{
  background: linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.02));
  border: 1px solid var(--line);
  border-radius: var(--rCard);
  padding: 14px;
  box-shadow: 0 10px 30px rgba(0,0,0,.25);
  margin: 12px 0;
}

.card h2{ margin:0 0 10px; font-size:16px; }
.small{ color: var(--muted); font-size:12px; }
.hr{ height:1px; background:rgba(255,255,255,.08); margin:10px 0; }

.row{ display:flex; gap:12px; flex-wrap:wrap; }
.col{ flex:1; min-width:240px; }

.label{ color: var(--muted); font-size:12px; margin-bottom:6px; }

input[type="number"], input[type="text"], textarea, select{
  width:100%;
  background: rgba(7,6,16,.72);
  border:1px solid var(--line);
  color:var(--text);
  padding: 12px 12px;
  border-radius: 14px;
  outline:none;
}
textarea{ min-height:100px; resize:vertical; }

.btn, .ghost{
  border:1px solid var(--line);
  color:var(--text);
  padding: 10px 12px;
  border-radius: 14px;
  cursor:pointer;
  background: rgba(255,255,255,.08);
}
.ghost{ background:transparent; }
.btn.primary{
  background: rgba(255,255,255,.92);
  color: #0b0b0f;
  border-color: rgba(255,255,255,.20);
}

.list{ display:flex; flex-direction:column; gap:10px; }
.item{
  border:1px solid rgba(255,255,255,.08);
  background: rgba(0,0,0,.18);
  border-radius: 16px;
  padding: 12px;
  cursor:pointer;
}
.item:hover{ filter:brightness(1.05); }
.item .title{ font-size:15px; }
.item .meta{ color:var(--muted); font-size:12px; margin-top:4px; }

.badge{
  display:inline-flex;
  padding: 4px 8px;
  border-radius: 999px;
  border:1px solid rgba(255,255,255,.10);
  color:var(--muted);
  font-size:12px;
  gap:6px;
  align-items:center;
}
.badge.good{ border-color: rgba(34,197,94,.35); color: var(--text); background: rgba(34,197,94,.12); }
.badge.warn{ border-color: rgba(255,209,102,.35); color: var(--text); background: rgba(255,209,102,.10); }
.badge.bad{ border-color: rgba(255,92,119,.35); color: var(--text); background: rgba(255,92,119,.10); }

.mono{ font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; }

/* =========================
   Bottom nav — YT Music style, 4 flat tabs
   ========================= */
.bottomNav{
  position: fixed;
  left: 50%;
  transform: translateX(-50%);
  bottom: 0;

  width: min(var(--app-maxw), 100vw);
  max-width: 100vw;

  padding: 8px 0 env(safe-area-inset-bottom);
  background: #212121;
  border-top: 1px solid rgba(255,255,255,.08);

  display: flex;
  align-items: flex-start;
  justify-content: space-around;
  z-index: 550; /* above transition overlays (z:500) so nav is always visible */

  /* Exclude from View Transition root group — stays stationary during nav slides */
  view-transition-name: bottom-nav;
}

.navBtn{
  flex: 1;
  border: 0;
  background: transparent;
  color: rgba(255,255,255,.28);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 8px 6px;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: color 0.15s, filter 0.15s;
}

.navBtn.active{
  color: rgba(255,255,255,.90);
  filter: drop-shadow(0 0 5px rgba(255,255,255,.18));
}

.navBtn:active{
  opacity: 0.7;
}

/* Create button — accent color */
.createNavBtn{
  color: rgba(255,255,255,.55);
}

/* Sal mascot nav button */
.salNavIcon{
  display: flex;
  align-items: center;
  justify-content: center;
}
.salNavIcon svg{
  width: 26px;
  height: auto;
  display: block;
  opacity: 0.55;
  transition: opacity 0.15s;
}
.salNavBtn:active .salNavIcon svg,
.salNavBtn.active .salNavIcon svg{
  opacity: 1;
}

/* ── Sal SVG Animations ─────────────────────────────────── */
.salSvg{
  filter: drop-shadow(0 4px 16px rgba(0,0,0,0.5));
}

/* Idle float (gentle bob up and down) */
.salAnim{
  animation: salFloat 3s ease-in-out infinite;
}
@keyframes salFloat{
  0%,100%{ transform: translateY(0); }
  50%{ transform: translateY(-6px); }
}

/* Shadow pulse synced with float */
.salAnim .salShadow{
  animation: salShadowPulse 3s ease-in-out infinite;
}
@keyframes salShadowPulse{
  0%,100%{ rx: 28; opacity: 0.25; }
  50%{ rx: 24; opacity: 0.15; }
}

/* Blink every ~4s */
.salAnim .salBlink{
  animation: salBlink 4s ease-in-out infinite;
}
@keyframes salBlink{
  0%,90%,100%{ opacity: 0; }
  94%,96%{ opacity: 1; }
}

/* Wave arm swing */
.salAnim .salWaveArm{
  transform-origin: 76px 58px;
  animation: salWave 1.2s ease-in-out infinite;
}
@keyframes salWave{
  0%,100%{ transform: translate(76px,48px) rotate(0deg); }
  25%{ transform: translate(76px,48px) rotate(-15deg); }
  50%{ transform: translate(76px,48px) rotate(10deg); }
  75%{ transform: translate(76px,48px) rotate(-10deg); }
}

/* ── Sal Dance Animation ─────────────────────────────────── */
.salDance{
  animation: salDanceBounce 0.6s ease-in-out infinite;
}
.salDance .salBlink{
  animation: salBlink 3s ease-in-out infinite;
}
@keyframes salDanceBounce{
  0%,100%{ transform: translateY(0) rotate(0deg); }
  25%{ transform: translateY(-10px) rotate(-4deg); }
  50%{ transform: translateY(0) rotate(0deg); }
  75%{ transform: translateY(-10px) rotate(4deg); }
}
.salDance .salDanceArmR{
  animation: salDanceArmR 0.6s ease-in-out infinite;
}
.salDance .salDanceArmL{
  animation: salDanceArmL 0.6s ease-in-out infinite;
}
@keyframes salDanceArmR{
  0%,100%{ transform: translate(76px,46px) rotate(0deg); }
  25%{ transform: translate(76px,38px) rotate(-12deg); }
  50%{ transform: translate(76px,46px) rotate(0deg); }
  75%{ transform: translate(76px,40px) rotate(8deg); }
}
@keyframes salDanceArmL{
  0%,100%{ transform: translate(24px,46px) rotate(0deg); }
  25%{ transform: translate(24px,40px) rotate(8deg); }
  50%{ transform: translate(24px,46px) rotate(0deg); }
  75%{ transform: translate(24px,38px) rotate(-12deg); }
}
.salDance .salFeet{
  animation: salDanceFeet 0.6s ease-in-out infinite;
}
@keyframes salDanceFeet{
  0%,50%,100%{ transform: translateY(0); }
  25%{ transform: translateY(-3px); }
  75%{ transform: translateY(-3px); }
}
.salDance .salShadow{
  animation: salDanceShadow 0.6s ease-in-out infinite;
}
@keyframes salDanceShadow{
  0%,50%,100%{ rx: 28; opacity: 0.25; }
  25%,75%{ rx: 22; opacity: 0.12; }
}

/* ── Welcome Screen ──────────────────────────────────────── */
.welcomeScreen{
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: linear-gradient(180deg, #0d0e12 0%, #1a0a2e 50%, #0d0e12 100%);
  opacity: 0;
  transition: opacity 0.4s ease;
}
.welcomeScreen.welcomeIn{
  opacity: 1;
  transition: none;
}
.welcomeScreen.welcomeOut{
  animation: welcomeFadeOut 0.4s ease forwards;
}
@keyframes welcomeFadeOut{
  to{ opacity: 0; }
}

.welcomeSalWrap{
  margin-bottom: 32px;
  filter: drop-shadow(0 8px 32px rgba(168,85,247,0.3));
}

.welcomeTitle{
  font-size: 42px;
  font-weight: 900;
  letter-spacing: -1px;
  color: #fff;
  background: linear-gradient(135deg, #a855f7, #ec4899, #a855f7);
  background-size: 200% 200%;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: welcomeTitleShimmer 3s ease infinite;
  margin-bottom: 8px;
}
@keyframes welcomeTitleShimmer{
  0%,100%{ background-position: 0% 50%; }
  50%{ background-position: 100% 50%; }
}

.welcomeSub{
  font-size: 16px;
  color: rgba(255,255,255,0.45);
  letter-spacing: 0.5px;
  margin-bottom: 0;
}

.welcomeBtns{
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 0 20px calc(env(safe-area-inset-bottom, 12px) + 16px);
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.welcomeBtn{
  width: 100%;
  padding: 18px 24px;
  border-radius: 16px;
  font-size: 15px;
  font-weight: 800;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  border: none;
  cursor: pointer;
  transition: transform 0.12s, opacity 0.12s;
  -webkit-tap-highlight-color: transparent;
}
.welcomeBtn:active{
  transform: scale(0.97);
  opacity: 0.85;
}

.welcomeBtnPrimary{
  background: linear-gradient(135deg, #a855f7, #7c3aed);
  color: #fff;
  box-shadow: 0 4px 24px rgba(168,85,247,0.4);
}

.welcomeBtnSecondary{
  background: transparent;
  color: rgba(255,255,255,0.45);
  border: 1.5px solid rgba(255,255,255,0.12);
  box-shadow: none;
}

/* ── Drive connect screen (Duolingo-style) ─── */
.driveScreen{
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  flex-direction: column;
  align-items: center;
  background: linear-gradient(180deg, #0d0e12 0%, #1a0a2e 50%, #0d0e12 100%);
  opacity: 0;
  transition: opacity 0.4s ease;
}
.driveScreen.welcomeIn{ opacity: 1; transition: none; }
.driveScreen.welcomeOut{ animation: welcomeFadeOut 0.4s ease forwards; }

.driveBackBtn{
  position: absolute;
  top: calc(env(safe-area-inset-top, 0px) + 12px);
  left: 12px;
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  background: none;
  border: none;
  color: rgba(255,255,255,0.5);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.driveBackBtn svg{ width: 24px; height: 24px; }

.driveBubbleArea{
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 0 32px;
  gap: 28px;
}

.driveBubble{
  position: relative;
  background: rgba(255,255,255,0.06);
  border: 1.5px solid rgba(255,255,255,0.12);
  border-radius: 20px;
  padding: 28px 26px;
  max-width: 340px;
  text-align: center;
  font-size: 17px;
  line-height: 1.65;
  color: rgba(255,255,255,0.75);
}
.driveBubble strong{
  color: #fff;
  font-weight: 800;
}
/* speech bubble tail */
.driveBubble::after{
  content: "";
  position: absolute;
  bottom: -12px;
  left: 50%;
  transform: translateX(-50%);
  width: 0;
  height: 0;
  border-left: 13px solid transparent;
  border-right: 13px solid transparent;
  border-top: 13px solid rgba(255,255,255,0.06);
}
.driveBubble::before{
  content: "";
  position: absolute;
  bottom: -14px;
  left: 50%;
  transform: translateX(-50%);
  width: 0;
  height: 0;
  border-left: 14px solid transparent;
  border-right: 14px solid transparent;
  border-top: 14px solid rgba(255,255,255,0.12);
}

.driveSalWrap{
  filter: drop-shadow(0 8px 32px rgba(168,85,247,0.3));
}

.driveBtns{
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 0 20px calc(env(safe-area-inset-bottom, 12px) + 16px);
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.driveBtnConnect{
  width: 100%;
  padding: 18px 24px;
  border-radius: 16px;
  font-size: 15px;
  font-weight: 800;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  border: none;
  cursor: pointer;
  background: linear-gradient(135deg, #a855f7, #7c3aed);
  color: #fff;
  box-shadow: 0 4px 24px rgba(168,85,247,0.4);
  transition: transform 0.12s, opacity 0.12s;
  -webkit-tap-highlight-color: transparent;
}
.driveBtnConnect:active{
  transform: scale(0.97);
  opacity: 0.85;
}

.driveBtnSkip{
  width: 100%;
  padding: 14px 24px;
  border-radius: 16px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.5px;
  border: none;
  cursor: pointer;
  background: transparent;
  color: rgba(255,255,255,0.35);
  -webkit-tap-highlight-color: transparent;
}

/* ── Sal PiP (picture-in-picture during picker) ─── */
.salPip{
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%) translateY(120px);
  z-index: 10001;
  display: flex;
  align-items: flex-end;
  gap: 10px;
  pointer-events: none;
  transition: transform 0.4s cubic-bezier(0.34,1.56,0.64,1), opacity 0.3s ease;
  opacity: 0;
}
.salPip.salPipIn{
  transform: translateX(-50%) translateY(0);
  opacity: 1;
}
.salPip.salPipOut{
  animation: salPipSlideOut 0.3s ease forwards;
}
@keyframes salPipSlideOut{
  to{ transform: translateX(-50%) translateY(120px); opacity: 0; }
}
.salPipBubble{
  background: rgba(30,20,50,0.92);
  border: 1.5px solid rgba(168,85,247,0.35);
  border-radius: 16px 16px 4px 16px;
  padding: 14px 18px;
  font-size: 14px;
  line-height: 1.5;
  color: rgba(255,255,255,0.8);
  max-width: 240px;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: 0 8px 32px rgba(0,0,0,0.4), 0 0 0 1px rgba(168,85,247,0.1);
}
.salPipBubble strong{
  color: #fff;
  font-weight: 700;
}
.salPip img{
  filter: drop-shadow(0 4px 12px rgba(168,85,247,0.3));
}

.navIcon{
  width: 24px;
  height: 24px;
  display: grid;
  place-items: center;
}
.navIcon svg{ width: 24px; height: 24px; color: currentColor; }

.navLabel{
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .2px;
}

/* =========================
   Mini player (YT Music style: flush against bottom nav)
   ========================= */
.miniPlayer{
  position: fixed;
  left: 50%;
  transform: translateX(-50%) translateY(10px);
  bottom: var(--nav-h, calc(var(--tabbar-h) + env(safe-area-inset-bottom)));

  width: min(var(--app-maxw), 100vw);
  z-index: 560;

  display: flex;
  flex-direction: column;
  gap: 0;

  padding: 8px 14px 0;
  border-radius: 0;

  background: #212121;
  border-top: 1px solid rgba(255,255,255,.08);

  opacity: 0;
  pointer-events: none;
  transition: transform .18s ease, opacity .18s ease;

  /* Exclude from View Transition root group — stays stationary during nav slides */
  view-transition-name: mini-player;
}

.miniPlayer.hidden{ display:none; }

.miniPlayer.visible{
  transform: translateX(-50%) translateY(0);
  opacity: 1;
  pointer-events: auto;
}

.playerRow.playing{
  background: none;
}

.miniTop{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 12px;
}

.miniArt{
  width: 42px;
  height: 42px;
  border-radius: 10px;
  overflow:hidden;
  flex: 0 0 auto;
  border: 1px solid rgba(255,255,255,.08);
  background: rgba(255,255,255,.04);
  box-shadow: 0 2px 10px rgba(0,0,0,0.4), 0 0 8px rgba(255,255,255,0.04);
}
.miniArt svg{ width: 100%; height: 100%; display:block; }

.miniMeta{
  flex: 1 1 auto;
  min-width: 0;
  display:flex;
  flex-direction:column;
  gap: 2px;
  padding-right: 6px;
}

.miniTitle{
  font-weight: 900;
  font-size: 13px;
  line-height: 1.1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.miniSub{
  color: rgba(255,255,255,.62);
  font-weight: 800;
  font-size: 11.5px;
  line-height: 1.1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.miniMeta{
  flex: 1 1 auto;
  min-width: 0;
  display:flex;
  flex-direction:column;
  gap: 2px;
  padding-right: 6px;
}
.miniTitle{
  font-weight: 900;
  font-size: 13px;
  line-height: 1.1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.miniSub{
  color: rgba(255,255,255,.62);
  font-weight: 800;
  font-size: 11.5px;
  line-height: 1.1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}


.miniSwipeZone{
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  position: relative;
}

.miniSwipeInner{
  display: flex;
  align-items: center;
  gap: 12px;
  will-change: transform;
}

.miniControls{
  display:flex;
  align-items:center;
  flex: 0 0 auto;
}

.miniBtn{
  background: transparent;
  border: none;
  color: #fff;
  padding: 8px;
  font-size: 14px;
  display: grid;
  place-items: center;
}

.miniPlay{
  font-size: 20px;
}

.miniScrub{
  -webkit-appearance: none;
  appearance: none;
  width: calc(100% + 28px);
  margin: 8px -14px 0;
  height: 3px;
  border-radius: 0;
  background: rgba(255,255,255,.12);
  pointer-events: none;
  cursor: default;
  display: block;
  flex-shrink: 0;
}
.miniScrub::-webkit-slider-thumb{
  -webkit-appearance: none;
  width: 0;
  height: 0;
}
.miniScrub::-moz-range-thumb{
  width: 0;
  height: 0;
  border: none;
  background: transparent;
}
.miniScrub::-webkit-slider-runnable-track{
  height: 3px;
  background: transparent;
}
.miniScrub::-moz-range-track{
  height: 3px;
  background: transparent;
}

/* =========================
   Drawer
   ========================= */
.iconbtn { padding: 10px 12px; min-height: 44px; border-radius: 14px; }


/* =========================
   Create sheet
   ========================= */
.sheetOverlay{
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.55);
  opacity: 0;
  pointer-events: none;
  transition: opacity .18s ease;
  z-index: 580;
}

.sheet{
  position: fixed;
  left: 50%;
  transform: translateX(-50%) translateY(110%);
  bottom: 0;
  z-index: 581;

  width: min(var(--app-maxw), 100vw);
  max-height: calc(100dvh - env(safe-area-inset-top) - 40px);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  background: #121212;

  border-top-left-radius: 22px;
  border-top-right-radius: 22px;
  box-shadow: 0 -18px 50px rgba(0,0,0,.65);

  transition: transform .22s ease;
  padding: 10px 16px calc(env(safe-area-inset-bottom) + 18px);
}

.sheetOpen .sheetOverlay{
  opacity: 1;
  pointer-events: auto;
}

.sheetOpen .sheet{
  transform: translateX(-50%) translateY(0);
}

.sheetHandle{
  width: 46px;
  height: 5px;
  border-radius: 99px;
  background: rgba(255,255,255,.18);
  margin: 6px auto 10px;
}

.sheetTitle{
  font-size: 16px;
  font-weight: 900;
  color: #fff;
  margin: 4px 0 10px;
  letter-spacing: -.2px;
}

.sheetRow{
  display:flex;
  gap: 10px;
}

.sheetChoice{
  flex:1;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.06);
  border-radius: 14px;
  padding: 14px 12px;
  color: #fff;
  font-weight: 900;
  text-align:left;
}

.sheetChoice .sub{
  display:block;
  margin-top: 4px;
  color: rgba(255,255,255,.55);
  font-weight: 700;
  font-size: 13px;
}

.sheetForm{
  margin-top: 12px;
  display:flex;
  flex-direction:column;
  gap: 10px;
}

.sheetForm input,
.sheetForm textarea{
  width:100%;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.10);
  color: #fff;
  border-radius: 14px;
  padding: 12px 12px;
  outline:none;
}
.sheetForm textarea{ min-height: 110px; resize: none; }

.sheetActions{
  display:flex;
  gap: 10px;
  margin-top: 6px;
}

.sheetBtn{
  flex:1;
  border: 0;
  border-radius: 14px;
  padding: 14px 12px;
  font-weight: 900;
}

.sheetBtn.primary{
  background: #ffffff;
  color: #0b0b0f;
}

.sheetBtn.ghost{
  background: rgba(255,255,255,.08);
  color: #fff;
}

/* Release sheet — song picker */
.sheetPickScroll{
  max-height: 220px;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 14px;
  padding: 4px 0;
}

.sheetPickGroup{
  padding: 6px 12px 2px;
}

.sheetPickLabel{
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: rgba(255,255,255,.38);
  padding: 4px 0 2px;
}

.sheetSongPick{
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 0;
  border-bottom: 1px solid rgba(255,255,255,.05);
  cursor: pointer;
  font-size: 14px;
  color: rgba(255,255,255,.85);
  -webkit-user-select: none;
  user-select: none;
}

.sheetSongPick:last-child{ border-bottom: none; }

.sheetSongPick input[type="checkbox"]{
  width: 18px;
  height: 18px;
  accent-color: #a855f7;
  flex-shrink: 0;
}

/* =========================
   Home — SoundCloud-style staggered grid
   ========================= */
.homeScene{
  min-height: 0;
  overflow: hidden;
  padding: 0;
  display: grid;
  grid-template-rows: 1fr;
  box-sizing: border-box;
}

.homeGreet{
  font-size: 28px;
  font-weight: 800;
  letter-spacing: -0.3px;
  line-height: 1.18;
  margin-bottom: 20px;
  color: rgba(255,255,255,0.94);
}

.homeGreetSub{
  font-size: 14px;
  font-weight: 600;
  color: rgba(255,255,255,.45);
  margin-top: 4px;
  letter-spacing: 0;
}

.homeGrid{
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr 0.5fr 0.5fr;
  gap: 12px;
  padding: 2px;
  min-height: 0;
}

/* Base card */
.hCard{
  position: relative;
  border-radius: 22px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  text-align: left;
  cursor: pointer;
  border: none;
  padding: 0;
  min-height: 0;
  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none;
  box-shadow:
    0 0 0 1px var(--card-border, transparent),
    0 6px 28px rgba(0,0,0,0.55),
    0 0 12px rgba(255,255,255,0.04),
    inset 0 1px 1px rgba(255,255,255,0.05);
}
.hCard img {
  -webkit-touch-callout: none;
  pointer-events: none;
}


/* Full-bleed neon art background */
.hArt{
  position: absolute;
  inset: -6%;
  overflow: hidden;
  transform-origin: center center;
  scale: 1;
  transition: scale 4s cubic-bezier(.25,.46,.45,.94);
}
.hCard.is-touched .hArt {
  scale: 1.015;
}

.hArt svg{
  width: 100%;
  height: 100%;
  display: block;
}

/* Dark gradient so text stays legible */
.hGrad{
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, rgba(0,0,0,.62) 0%, rgba(0,0,0,.08) 55%, transparent 100%);
  z-index: 1;
}

.hBody{
  position: relative;
  z-index: 2;
  padding: 14px 16px;
}

.hLabel{
  font-size: 15px;
  font-weight: 700;
  color: #fff;
  letter-spacing: 0.3px;
  line-height: 1.1;
}

.hSub{
  font-size: 11px;
  font-weight: 500;
  color: rgba(255,255,255,.45);
  margin-top: 3px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  letter-spacing: 0.2px;
}

/* Per-card accent gradients */
.hSongs    { background: linear-gradient(145deg, #6d28d9 0%, #db2777 100%); grid-row: span 2; min-height: 0; }
.hProjects { background: linear-gradient(145deg, #c2410c 0%, #b45309 100%); }
.hPlayer   { background: linear-gradient(145deg, #0e7490 0%, #1d4ed8 100%); }
.hLyrics   { background: linear-gradient(145deg, #1e40af 0%, #5b21b6 100%); }
.hNext     { background: linear-gradient(145deg, #9d174d 0%, #4c1d95 100%); }

/* Wide = full-width row */
.hWide{
  grid-column: 1 / -1;
  min-height: 0;
}

/* Next actions: no artwork, just the gradient */
.hNext .hGrad{
  background: rgba(0,0,0,.25);
}

/* =========================
   Micro-motion — home cards
   ========================= */

/* 1. Slow gradient drift — looping 5-stop gradients, each card its own speed */
@keyframes gradDrift {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

.hSongs    { background: linear-gradient(135deg, #3b1475, #5b21b6, #9d1a5c, #5b21b6, #3b1475); background-size: 300% 300%; animation: gradDrift 22s ease infinite; --card-border: #ec4899; }
.hProjects { background: linear-gradient(135deg, #6b2209, #9a3412, #7d3a08, #9a3412, #6b2209); background-size: 300% 300%; animation: gradDrift 26s ease infinite; --card-border: #a855f7; }
.hPlayer   { background: linear-gradient(135deg, #0d3d4f, #0e5e70, #152f6e, #0e5e70, #0d3d4f); background-size: 300% 300%; animation: gradDrift 28s ease infinite; --card-border: #22d3ee; }
.hLyrics   { background: linear-gradient(135deg, #12256b, #1e3a8a, #3b1475, #1e3a8a, #12256b); background-size: 300% 300%; animation: gradDrift 24s ease infinite; --card-border: #eab308; }
.hNext     { background: linear-gradient(135deg, #560f30, #7b1038, #31115e, #7b1038, #560f30); background-size: 300% 300%; animation: gradDrift 20s ease infinite; --card-border: #f97316; }

/* ── Collab pill tabs ── */
.collabPillBar {
  display: flex;
  gap: 8px;
  padding: 8px 2px 4px;
}
.collabPill {
  flex: 1;
  padding: 10px 0;
  border: none;
  border-radius: 999px;
  background: rgba(255,255,255,.06);
  color: var(--muted);
  font-family: 'Montserrat', sans-serif;
  font-weight: 700;
  font-size: 13px;
  letter-spacing: -0.2px;
  cursor: pointer;
  transition: background .2s, color .2s;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}
.collabPill:active { opacity: .8; }
.collabPillActive {
  background: rgba(255,255,255,.14);
  color: var(--text);
}
.collabPillBadge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 999px;
  background: #ef4444;
  color: #fff;
  font-size: 11px;
  font-weight: 800;
  line-height: 1;
}
.collabPillBody {
  padding: 12px 2px 0;
  position: relative;
}

/* Legacy collab card grid (kept for reference, no longer rendered) */
.collabGrid{
  display:grid;
  grid-template-columns:1fr;
  gap:12px;
  padding:12px 2px 2px;
}
.collabGrid .hCard{ min-height:120px; }
.collabGrid .hCard .hLabel{ font-size:18px; }
.collabGrid .hCard .hSub{ font-size:12px; }
.hCollabFriends  { background: linear-gradient(135deg, #0d3d4f, #0e7490, #155e75, #0e7490, #0d3d4f); background-size: 300% 300%; animation: gradDrift 24s ease infinite; --card-border: #22d3ee; }
.hCollabSongs    { background: linear-gradient(135deg, #3b1475, #5b21b6, #7c3aed, #5b21b6, #3b1475); background-size: 300% 300%; animation: gradDrift 22s ease infinite; --card-border: #a78bfa; }
.hCollabMessages { background: linear-gradient(135deg, #12256b, #1e3a8a, #1d4ed8, #1e3a8a, #12256b); background-size: 300% 300%; animation: gradDrift 26s ease infinite; --card-border: #60a5fa; }
.hCollabAdd      { background: linear-gradient(135deg, #560f30, #9d174d, #be185d, #9d174d, #560f30); background-size: 300% 300%; animation: gradDrift 20s ease infinite; --card-border: #f472b6; }

/* 2. Ambient glow breathing — subtle internal energy pulse */
@keyframes glowBreathe {
  0%   { opacity: 0.22; transform: scale(1)   translate(0%, 0%); }
  25%  { opacity: 0.38; transform: scale(1.06) translate(3%, -2%); }
  50%  { opacity: 0.42; transform: scale(1.10) translate(-2%, 3%); }
  75%  { opacity: 0.30; transform: scale(1.04) translate(-3%, -1%); }
  100% { opacity: 0.22; transform: scale(1)   translate(0%, 0%); }
}

/* Internal shimmer layer — lives inside each card */
.hShimmer {
  position: absolute;
  inset: -20%;
  z-index: 1;
  pointer-events: none;
  border-radius: 50%;
  filter: blur(30px);
  opacity: 0.25;
  animation: glowBreathe 6s ease-in-out infinite;
  will-change: opacity, transform;
  transition: opacity 0.4s ease, transform 0.4s ease;
}
.hSongs .hShimmer    { background: radial-gradient(circle, rgba(220,38,38,.55), transparent 70%); animation-duration: 6s; }
.hProjects .hShimmer { background: radial-gradient(circle, rgba(147,51,234,.5), transparent 70%); animation-duration: 7.5s; }
.hPlayer .hShimmer   { background: radial-gradient(circle, rgba(37,99,235,.5), transparent 70%); animation-duration: 8s; }
.hLyrics .hShimmer   { background: radial-gradient(circle, rgba(234,179,8,.45), transparent 70%); animation-duration: 7s; }
.hNext .hShimmer     { background: radial-gradient(circle, rgba(234,88,12,.5), transparent 70%); animation-duration: 6.5s; }

/* Shimmer brightens + energy drawn toward finger on touch */
.hCard.is-touched .hShimmer {
  opacity: 0.18 !important;
  animation-play-state: paused;
  filter: blur(28px);
}

/* Warp canvas — localized rubber-sheet distortion on touch */
.hWarp {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  width: 100%;
  height: 100%;
  opacity: 0;
}

/* Particle canvas — overlays the art */
.hParticles {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  width: 100%;
  height: 100%;
}

/* Static top-edge highlight — studio-matte feel */
.hGrad::before{
  content:'';
  position:absolute;
  inset:0;
  z-index: 3;
  pointer-events:none;
  background: radial-gradient(240px 100px at 30% 0%,
    rgba(255,255,255,.07),
    rgba(255,255,255,0) 70%);
  opacity: 1;
}

/* Touch darken overlay — controlled entirely by JS, not CSS transitions */
.hDarken {
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  background: #000;
  opacity: 0;
  border-radius: inherit;
}

/* =========================
   Back-peek layer (swipe-back preview)
   ========================= */
#back-peek {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  display: none;
  padding: 0;
}


/* =========================
   Global Search overlay
   ========================= */
/* ── Alerts ── */
.alertRow{display:flex;align-items:flex-start;gap:12px;padding:14px 0;border-bottom:1px solid rgba(255,255,255,.06)}
.alertIcon{flex-shrink:0;width:24px;text-align:center;font-size:16px;padding-top:1px}
.alertBody{flex:1;min-width:0}
.alertTitle{font-size:15px;font-weight:600;color:rgba(255,255,255,.9);letter-spacing:-.1px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.alertMsg{font-size:13px;color:rgba(255,255,255,.4);margin-top:3px}
.alertTime{flex-shrink:0;font-size:11px;color:#555;padding-top:2px}
@keyframes alertSpin{to{transform:rotate(360deg)}}
.alertSpinner{display:inline-block;width:14px;height:14px;border:2px solid rgba(255,255,255,.15);border-top-color:#60a5fa;border-radius:50%;animation:alertSpin .8s linear infinite}
.alertUnread{background:rgba(168,85,247,.08);border-radius:8px;padding:12px 10px;margin:0 -10px}
.alertSectionLabel{font-size:16px;font-weight:700;letter-spacing:-.2px;color:rgba(255,255,255,.85);margin-bottom:10px}
.alertFriendActions{display:flex;gap:8px;margin-top:8px}
.alertAcceptBtn{background:#3b82f6;color:#fff;border:none;border-radius:8px;padding:6px 16px;font-size:13px;font-weight:600;cursor:pointer}
.alertAcceptBtn:active{opacity:.8}
.alertDeclineBtn{background:rgba(255,255,255,.08);color:#aaa;border:none;border-radius:8px;padding:6px 16px;font-size:13px;font-weight:600;cursor:pointer}
.alertDeclineBtn:active{opacity:.7}

.collabPendingSection{padding:0 16px 8px}
.collabPendingSectionLabel{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:#666;margin-bottom:8px;padding-top:4px}
.collabPendingRow{display:flex;align-items:center;gap:10px;padding:10px 12px;background:rgba(255,255,255,.04);border-radius:12px;margin-bottom:8px}

.hCardBadge{display:inline-flex;align-items:center;justify-content:center;min-width:20px;height:20px;background:#f43f5e;border-radius:10px;font-size:12px;font-weight:700;color:#fff;padding:0 6px;margin-left:8px;vertical-align:middle;line-height:1}

.alertAvatar{flex-shrink:0;width:36px;height:36px;border-radius:50%;overflow:hidden;background:linear-gradient(135deg,#3b82f6,#8b5cf6);display:flex;align-items:center;justify-content:center}
.alertAvatar img{width:100%;height:100%;object-fit:cover}
.alertAvatar span{color:#fff;font-weight:700;font-size:15px}
.alertProgress{width:100%;height:4px;background:rgba(255,255,255,.08);border-radius:2px;margin-top:6px;overflow:hidden}
.alertProgressFill{height:100%;background:linear-gradient(90deg,#a855f7,#ec4899);border-radius:2px;transition:width .4s ease}
.alertRowClickable{cursor:pointer;border-radius:10px;padding:12px 10px;margin:0 -10px;transition:background .15s}
.alertRowClickable:active{background:rgba(255,255,255,.06)}

.alertBatchRow{display:flex;align-items:center;position:relative}
.alertBatchRow .alertChevron{flex-shrink:0;color:rgba(255,255,255,.3);transition:transform .2s;margin-left:4px}
.alertBatchRow.alertBatchExpanded .alertChevron{transform:rotate(90deg)}
.alertBatchItems{padding-left:16px;border-left:2px solid rgba(255,255,255,.06);margin-left:11px}
.alertBatchChild{padding:10px 0}
.alertBatchChild .alertTitle{font-size:14px}
.alertBatchChild .alertMsg{font-size:12px}

.iqRetryBtn{display:inline-block;margin-top:8px;padding:6px 16px;border:none;border-radius:8px;background:rgba(248,113,113,.15);color:#f87171;font-size:12px;font-weight:600;cursor:pointer;transition:background .15s}
.iqRetryBtn:active{background:rgba(248,113,113,.25)}
.iqRetryAllBtn{padding:4px 12px;border:none;border-radius:6px;background:rgba(248,113,113,.12);color:#f87171;font-size:11px;font-weight:600;cursor:pointer;white-space:nowrap;transition:background .15s}
.iqRetryAllBtn:active{background:rgba(248,113,113,.22)}

.friendActionBar{position:sticky;bottom:0;left:0;right:0;display:flex;gap:10px;padding:16px;background:linear-gradient(transparent,rgba(15,15,20,.95) 30%);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);transition:opacity .3s}
.friendActionAccept{flex:1;padding:14px;border:none;border-radius:12px;background:linear-gradient(135deg,#3b82f6,#8b5cf6);color:#fff;font-size:15px;font-weight:700;cursor:pointer}
.friendActionAccept:active{opacity:.85}
.friendActionDecline{padding:14px 20px;border:none;border-radius:12px;background:rgba(255,255,255,.08);color:#aaa;font-size:15px;font-weight:600;cursor:pointer}
.friendActionDecline:active{opacity:.7}

.gsWrap{
  display: flex;
  flex-direction: column;
  height: 100%;
  padding-top: env(safe-area-inset-top);
}

.gsTopbar{
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 16px 10px;
  flex-shrink: 0;
}

.gsInputWrap{
  flex: 1;
  position: relative;
  display: flex;
  align-items: center;
}

.gsInputIcon{
  position: absolute;
  left: 10px;
  width: 16px;
  height: 16px;
  color: rgba(255,255,255,.45);
  pointer-events: none;
}
.gsInputIcon svg{ width: 16px; height: 16px; display: block; }

.gsInput{
  width: 100%;
  background: rgba(255,255,255,.1);
  border: none;
  border-radius: 10px;
  padding: 11px 14px 11px 34px;
  font-size: 16px;
  color: #fff;
  outline: none;
  font-family: inherit;
}
.gsInput::placeholder{ color: rgba(255,255,255,.38); }

.gsCancel{
  background: none;
  border: none;
  color: rgba(255,255,255,.7);
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  padding: 6px 0;
  -webkit-tap-highlight-color: transparent;
}

.gsBody{
  flex: 1;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding-bottom: 120px;
}

.gsEmpty{
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 64px 32px 32px;
  text-align: center;
}
.gsEmptyTitle{
  font-size: 22px;
  font-weight: 800;
  color: #fff;
  margin-bottom: 10px;
  letter-spacing: -0.4px;
}
.gsEmptySub{
  font-size: 14px;
  color: rgba(255,255,255,.45);
  line-height: 1.6;
}

.gsSection{ padding: 12px 0 4px; }

.gsSectionTitle{
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.9px;
  color: rgba(255,255,255,.38);
  padding: 0 16px 6px;
}

.gsRow{
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 16px;
  background: none;
  border: none;
  width: 100%;
  text-align: left;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.gsRow:active{ background: rgba(255,255,255,.06); }

.gsRowArt{
  width: 44px;
  height: 44px;
  border-radius: 8px;
  overflow: hidden;
  flex-shrink: 0;
}
.gsRowArt svg{ width: 100%; height: 100%; display: block; }

.gsRowIcon{
  width: 44px;
  height: 44px;
  border-radius: 8px;
  background: rgba(255,255,255,.08);
  display: grid;
  place-items: center;
  flex-shrink: 0;
}
.gsRowIcon svg{ width: 20px; height: 20px; color: rgba(255,255,255,.65); }
.gsRowIconPurple{ background: rgba(139,92,246,.2); }
.gsRowIconPurple svg{ color: #a78bfa; }
.gsRowIconGreen{ background: rgba(16,185,129,.15); }
.gsRowIconGreen svg{ color: #34d399; }
.gsRowIconOrange{ background: rgba(249,115,22,.15); }
.gsRowIconOrange svg{ color: #fb923c; }

.gsRowMeta{ flex: 1; min-width: 0; }
.gsRowTitle{
  font-size: 15px;
  font-weight: 600;
  color: #fff;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.gsRowSub{
  font-size: 12px;
  color: rgba(255,255,255,.42);
  margin-top: 2px;
}

/* =========================
   Songs list (kept)
   ========================= */
/* ── Collapsing large→small title ── */
.app.collapseTitle .topbar{
  z-index: 10;               /* paint above .view so ::after + descenders aren't covered */
}
/* Extend the topbar's visual cover area without changing its layout height */
.app.collapseTitle .topbar::after,
.topbar[data-tb-ext]::after{
  content: "";
  position: absolute;
  left: 0; right: 0;
  bottom: -14px;             /* extend below topbar to cover descenders + buffer */
  height: 14px;
  background: var(--bg);
}
.app.collapseTitle .titleblock{
  position: absolute;
  left: 38px;                                         /* right of back chevron */
  top: calc(env(safe-area-inset-top, 0px) + 4px);    /* match headerBack top */
  height: 44px;                                       /* match headerBack height */
  display: flex;
  align-items: center;
  overflow: visible;
  z-index: 1;               /* render above topbar ::after so descenders aren't covered */
}
.app.collapseTitle .titleblock h1{
  font-size: 17px;
  font-weight: 600;
  letter-spacing: 0;
  transition: none;           /* override .topbar h1 transition — JS drives opacity directly */
  opacity: 0;                 /* JS sets opacity directly via scroll position */
}

/* ── Owner filter dropdown (inline with page title) ── */
.songsTitleRow{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:24px 2px 0;
  gap:12px;
}
.songsTitleRow .songsPageTitle{ padding:0; }

.ownerDropWrap{ position:relative; flex-shrink:0; }
.ownerDropBtn{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:6px;
  min-width:108px;
  background:rgba(255,255,255,.1);
  border:1px solid rgba(255,255,255,.15);
  border-radius:999px;
  padding:7px 12px 7px 14px;
  color:rgba(255,255,255,.85);
  font-size:16px;
  font-weight:700;
  letter-spacing:-.2px;
  -webkit-tap-highlight-color:transparent;
}
.ownerDropBtn svg{ width:14px; height:14px; opacity:.6; flex-shrink:0; }
.ownerDropBtn:active{ background:rgba(255,255,255,.16); }

.ownerDropMenu{
  position:absolute;
  right:0;
  top:calc(100% + 6px);
  background:rgba(30,30,34,.96);
  border:1px solid rgba(255,255,255,.12);
  border-radius:14px;
  padding:4px;
  z-index:100;
  min-width:120px;
  backdrop-filter:blur(20px);
  -webkit-backdrop-filter:blur(20px);
  box-shadow:0 8px 32px rgba(0,0,0,.5);
  animation:ownerDropIn .15s ease-out;
}
@keyframes ownerDropIn{
  from{ opacity:0; transform:translateY(-6px) scale(.96); }
  to{ opacity:1; transform:none; }
}
.ownerDropItem{
  display:flex;
  align-items:center;
  gap:8px;
  width:100%;
  padding:10px 14px;
  border:none;
  background:none;
  color:rgba(255,255,255,.7);
  font-size:15px;
  font-weight:600;
  letter-spacing:-.1px;
  border-radius:10px;
  -webkit-tap-highlight-color:transparent;
}
.ownerDropItem:active{ background:rgba(255,255,255,.08); }
.ownerDropItem.active{ color:#fff; background:rgba(255,255,255,.1); }
.ownerDropItem.active::after{
  content:"";
  margin-left:auto;
  width:6px; height:6px;
  border-radius:50%;
  background:var(--accent, #a78bfa);
}
.songsPageTitle{
  font-size:34px;
  font-weight:700;
  letter-spacing:-.2px;
  color:rgba(255,255,255,.85);
  padding:24px 2px 0;
}
.songsHead{
  padding: 8px 0 12px;
  display:flex;
  flex-direction:column;
  gap:10px;
}

.songsBar{
  display:flex;
  gap:10px;
  align-items:center;
}

.filterBtn{
  width: 46px;
  height: 46px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.06);
  color: rgba(255,255,255,.88);
  display:grid;
  place-items:center;
  flex: 0 0 auto;
}

.filterBtn svg{ width: 22px; height: 22px; }
.filterBtn:active{ transform: scale(.98); }

.segTabs{
  display:inline-flex;
  align-items:center;
  gap:6px;
  width:max-content;
  padding:4px;
  border-radius:999px;
  background:rgba(0,0,0,.25);
  border:1px solid rgba(255,255,255,.10);
}

.segTab{
  border:1px solid transparent;
  color:var(--muted);
  padding:7px 12px;
  border-radius:999px;
  background:transparent;
  text-transform:lowercase;
  font-weight: 900;
}

.segTab.active{
  color:var(--text);
  border-color:rgba(255,255,255,.25);
  background:rgba(255,255,255,.08);
}

.songsFilters{
  display:grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, .8fr) minmax(0, .8fr);
  gap:10px;
}

.songsList{
  width:100%;
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px 10px;
  margin-top:10px;
  overflow-x:hidden;
  container-type:inline-size;
}

/* ── Artist group headers ── */
.songsGroup{
  margin-bottom:20px;
  overflow:hidden;
}
.songsGroupHead{
  font-size:16px;
  font-weight:700;
  letter-spacing:-.2px;
  color:rgba(255,255,255,.85);
  padding:0 2px;
}
.songsGroupLine{
  height:1px;
  background:linear-gradient(90deg,rgba(255,255,255,.18),rgba(255,255,255,.04));
  margin-top:6px;
}

/* ── Stacked song card ── */
.songCard{
  position:relative;
  cursor:pointer;
  -webkit-tap-highlight-color:transparent;
  overflow:hidden;
  min-width:0;
  -webkit-touch-callout:none;
  -webkit-user-select:none;
  user-select:none;
}
.songCardArt img{
  -webkit-touch-callout:none;
  pointer-events:none;
}
.songCard:active .songCardFront{ transform:scale(.97); }

.songCardStack{
  position:relative;
  aspect-ratio: 1;
  margin-bottom:6px;
  padding-top:5px;
  padding-right:5px;
}

.songCardLayer{
  position:absolute;
  inset:0;
  border-radius:10px;
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.08);
}
.songCardLayer2{
  transform: translate(6px, -6px) scale(.95);
  opacity:.35;
}
.songCardLayer1{
  transform: translate(3px, -3px) scale(.975);
  opacity:.6;
}
.songCardFront{
  position:relative;
  width:100%;
  height:100%;
  border-radius:10px;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.1);
  transition: transform .15s ease;
}
.songCardArt{
  width:100%;
  height:100%;
}
.songCardArt svg{
  width:100%;
  height:100%;
  display:block;
}
.songCard[style*="span"] .songCardStack{
  aspect-ratio:auto;
  height:calc((100cqi - 20px) / 3);
  overflow:hidden;
}
.songCard[style*="span"] .songCardFront{
  border-radius:10px;
}
.songCard[style*="span"] .songCardArt svg{
  width:100%;
  height:100%;
  object-fit:cover;
}

/* ── Release mosaic (composite album art) ── */
.relMosaic{
  width:100%; height:100%;
  display:grid; gap:1px;
  overflow:hidden;
  border-radius:inherit;
  background:rgba(0,0,0,.3);
}
.relMosaicCell{
  overflow:hidden;
  min-width:0; min-height:0;
}
.relMosaicCell svg,
.relMosaicCell img{
  width:100%; height:100%;
  display:block; object-fit:cover;
}
/* 2 songs — side by side */
.relMosaic2{
  grid-template-columns:1fr 1fr;
  grid-template-rows:1fr;
}
/* 3 songs — first takes left half, other two stack on right */
.relMosaic3{
  grid-template-columns:1fr 1fr;
  grid-template-rows:1fr 1fr;
}
.relMosaic3 .relMosaicCell:first-child{
  grid-row:1 / -1;
}
/* 4 songs — 2×2 grid */
.relMosaic4{
  grid-template-columns:1fr 1fr;
  grid-template-rows:1fr 1fr;
}

.songCardInfo{
  padding: 0 2px;
  min-width:0;
}
.songCardTitle{
  font-weight:600;
  font-size:12px;
  line-height:1.25;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.songCardTitleRow{
  display:flex;
  align-items:baseline;
  gap:6px;
  min-width:0;
}
.songCardTitleRow .songCardTitle{
  flex:1;
  min-width:0;
}
.songCardSub{
  font-size:11px;
  color:rgba(255,255,255,.45);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  margin-top:2px;
}
.songCardMore{
  position:absolute;
  top:3px;
  right:3px;
  width:24px;
  height:24px;
  border-radius:50%;
  border:none;
  background:rgba(0,0,0,.55);
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
  color:#fff;
  font-size:14px;
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  opacity:0;
  transition:opacity .15s;
  z-index:2;
}
.songCard:hover .songCardMore,
.songCardMore:focus{ opacity:1; }
@media (hover:none){
  .songCardMore{ opacity:.7; }
}

@media (max-width:720px){
  .songsFilters{ grid-template-columns:1fr; }
}

/* =========================
   Toast
   ========================= */
.toast{
  position:fixed;
  left:50%;
  transform:translateX(-50%);
  bottom: calc(var(--tabbar-h) + env(safe-area-inset-bottom) + 32px);
  background: rgba(0,0,0,.65);
  border: 1px solid rgba(255,255,255,.12);
  color: var(--text);
  padding: 10px 12px;
  border-radius: 12px;
  opacity:0;
  pointer-events:none;
  transition: opacity .2s ease;
  z-index: 99999;
}
.toast.show{ opacity:1; }

/* =========================================================
   ✅ SPLASH / LOADING (single source of truth)
   ========================================================= */

/* Fullscreen overlay */
#splash{
  position: fixed;
  inset: 0;
  background: var(--bg);
  z-index: 9999;
  display: grid;
  place-items: center;
  transition: opacity 420ms ease, transform 420ms ease;
}

body.splashing .bottomNav,
body.splashing .miniPlayer,
body.splashing .topbar,
body.splashing .view,
body.splashing #toast {
  visibility: hidden;
}

#splash.hide{
  opacity: 0;
  pointer-events: none;
  transform: translateY(-6px);
}

/* Locked layout so text swaps never move stuff */
#splash .splashInner{
  width: min(520px, 86vw);
  padding: 26px 18px;
  display: grid;
  grid-template-rows: auto 28px 22px; /* title, sub slot, spinner slot */
  justify-items: center;
  align-items: center;
  row-gap: 14px;
  text-align: center;
}

/* Title: hidden until font is ready, then settles upward + glow breathes */
#splashTitle{
  font-weight: 900;
  font-size: 52px;
  line-height: 1.02;
  letter-spacing: -1.1px;
  color: #fff;
  background: linear-gradient(135deg, #a855f7, #ec4899, #a855f7);
  background-size: 200% 200%;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;

  opacity: 0;
  transform: translateY(26px);
}
#splashTitle.ready{
  opacity: 1;
  animation:
    splashTitleSettle var(--splash-title-settle-ms) cubic-bezier(.2,.9,.2,1) forwards,
    welcomeTitleShimmer 3s ease infinite;
}

/* Subtext: JS controls show + jump */
#splashSub{
  min-height: 28px;

  /* ✅ Inline text + dancing dots on the SAME LINE */
  display: inline-flex;
  align-items: center;
  justify-content: center;

  font-size: 14px;
  font-weight: 800;
  letter-spacing: .2px;
  color: rgba(255,255,255,0.45);

  opacity: 0;
  transform: translateY(10px);
  will-change: transform, opacity;
}

/* When shown normally */
#splashSub.show{
  opacity: 1;
  transform: translateY(0);
}

#splashSub.static{
  animation: none !important;
}

/* Jump IN (enter) */
#splashSub.jumpIn{
  animation: splashJumpIn var(--splash-jump-ms) cubic-bezier(.2,.8,.2,1) forwards;
}

/* Jump OUT (leave) */
#splashSub.jumpOut{
  animation: splashJumpOut var(--splash-jump-ms) cubic-bezier(.2,.8,.2,1) forwards;
}

@keyframes splashJumpOut{
  0%   { opacity: 1; transform: translateY(0); }
  100% { opacity: 0; transform: translateY(-14px); }
}

@keyframes splashJumpIn{
  0%   { opacity: 0; transform: translateY(14px); }
  100% { opacity: 1; transform: translateY(0); }
}

/* Inline "typed" dancing ellipsis */
.splashEllipsis {
  display: inline;
  margin-left: 2px;
}

.splashEllipsis span {
  display: inline-block;
  font-size: 1em;        /* same size as subtext */
  line-height: 1;
  transform: translateY(0);
  opacity: 0.6;
  animation: textDot 1.2s infinite ease-in-out;
}

/* Actually render the dot character */
.splashEllipsis span::before {
  content: ".";
}

.splashEllipsis span:nth-child(1) { animation-delay: 0s; }
.splashEllipsis span:nth-child(2) { animation-delay: 0.15s; }
.splashEllipsis span:nth-child(3) { animation-delay: 0.3s; }

@keyframes textDot {
  0%, 80%, 100% {
    opacity: 0.4;
    transform: translateY(0);
  }
  40% {
    opacity: 1;
    transform: translateY(-2px);
  }
}

#splashSpinner.show{
  opacity: 1;
  transform: translateY(0);
}

/* Horizontal dot pulse */
#splashSpinner span{
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: rgba(255,255,255,.78);
  display: block;
  animation: splashDot 1.05s infinite ease-in-out both;
  transform: translateZ(0);
}

#splashSpinner span:nth-child(1){ animation-delay: 0ms; }
#splashSpinner span:nth-child(2){ animation-delay: 90ms; }
#splashSpinner span:nth-child(3){ animation-delay: 180ms; }
#splashSpinner span:nth-child(4){ animation-delay: 270ms; }
#splashSpinner span:nth-child(5){ animation-delay: 360ms; }
#splashSpinner span:nth-child(6){ animation-delay: 450ms; }
#splashSpinner span:nth-child(7){ animation-delay: 540ms; }
#splashSpinner span:nth-child(8){ animation-delay: 630ms; }

@keyframes splashDot{
  0%, 80%, 100% { transform: scale(.65); opacity: .35; }
  40% { transform: scale(1); opacity: 1; }
}

/* Ellipsis loading dance */
.splashEllipsis{
  display: inline-flex;
  gap: 2px;
  margin-left: 2px;
}

.splashEllipsis > span{
  display: inline-block;
  opacity: .8;
  transform: translateY(0);
  animation: ellipsisBounce var(--splash-ellipsis-ms) ease-in-out infinite;
}

.splashEllipsis > span:nth-child(1){ animation-delay: 160ms; }
.splashEllipsis > span:nth-child(2){ animation-delay: 280ms; }
.splashEllipsis > span:nth-child(3){ animation-delay: 400ms; }

@keyframes ellipsisBounce{
  0%, 100% { transform: translateY(0); opacity: .7; }
  50%      { transform: translateY(-4px); opacity: 1; }
}

@keyframes splashTitleSettle{
  from { transform: translateY(26px); }
  to   { transform: translateY(0px); }
}

@keyframes splashJump{
  0%   { transform: translateY(10px); opacity: 0; }
  45%  { transform: translateY(-8px); opacity: 1; }
  100% { transform: translateY(0px); opacity: 1; }
}

/* Glow breathe (subtle, classy) */
@keyframes splashGlowBreathe{
  0%, 100%{
    text-shadow:
      0 0 10px rgba(120, 90, 255, 0.16),
      0 0 22px rgba(70, 160, 255, 0.12);
    filter:
      drop-shadow(0 0 0px rgba(120, 90, 255, 0.0))
      drop-shadow(0 0 10px rgba(70, 160, 255, 0.16));
  }
  50%{
    text-shadow:
      0 0 16px rgba(120, 90, 255, 0.26),
      0 0 30px rgba(70, 160, 255, 0.20);
    filter:
      drop-shadow(0 0 10px rgba(120, 90, 255, 0.20))
      drop-shadow(0 0 18px rgba(70, 160, 255, 0.18));
  }
}

/* Subtext shimmer helper (optional) */
.splashSubText{
  position: relative;
  display: inline-block;
}

/* =========================================================
   🐹 Neon Border Runner (ACTUALLY iOS-safe)
   - ::after = rainbow ring ONLY (center cut out with mask)
   - ::before = bright “hamster” that runs the perimeter (no offset-path)
   ========================================================= */

.hCard{
  position: relative;
  border-radius: 22px;
  overflow: hidden;        /* keeps glow clean */
  isolation: isolate;
}

/* Rainbow ring removed — each card now has its own solid accent border */

.splashSubText.pulse{
  color: rgba(255,255,255,0.45);
}

.splashSubText.pulse::after{
  content: attr(data-text);
  position: absolute;
  inset: 0;
  pointer-events: none;

  background: linear-gradient(
    90deg,
    rgba(255,255,255,0) 0%,
    rgba(255,255,255,.28) 30%,
    rgba(255,255,255,.85) 50%,
    rgba(255,255,255,.28) 70%,
    rgba(255,255,255,0) 100%
  );
  background-size: 220% 100%;
  background-position: -120% 0;

  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;

  filter: drop-shadow(0 0 10px rgba(255,255,255,.25));
  animation: splashSubShimmer 1.35s ease-in-out infinite;
  opacity: .95;
}

@keyframes splashSubShimmer{
  0%   { background-position: -120% 0; opacity: .35; }
  45%  { opacity: .95; }
  100% { background-position: 120% 0; opacity: .35; }
}

/* When splashing, prevent interactions beneath */
body.splashing .app{
  pointer-events: none;
}

/* =========================
   Song detail (Spotify-ish album view)
   ========================= */

.albumHero{
  position: relative;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 18px;
  overflow: hidden;
  padding: 14px;
  margin: 10px 0 12px;
  background: rgba(255,255,255,.04);
}

/* Blurry cover background should NOT take up layout space */
.albumBg{
  position: absolute;
  inset: 0;
  filter: blur(22px) saturate(1.1);
  opacity: .18;
  transform: scale(1.08);
  pointer-events: none;
}

/* Blurry cover as background */
@media (max-width: 520px){
  .albumBg{
    inset: -10px;
    filter: blur(16px) saturate(1.1);
    opacity: .22;
  }
}

.albumBg svg,
.albumBg .relMosaic{
  width: 100%;
  height: 100%;
  display: block;
}

/* Keep everything above the bg */
.albumHero > *:not(.albumBg){
  position: relative;
  z-index: 1;
}

.songHeroBack{
  position: absolute;
  top: 10px;
  left: 10px;
  width: 40px;
  height: 40px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(0,0,0,.25);
  color: var(--text);
  display: grid;
  place-items: center;
}

.albumTop{
  display: grid;
  grid-template-columns: 92px 1fr;
  gap: 12px;
  align-items: center;
  padding-top: 24px; /* room for back button */
}

.albumArt{
  width: 92px;
  height: 92px;
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.10);
  box-shadow: 0 10px 24px rgba(0,0,0,.35);
}

.albumArt svg,
.albumArt .relMosaic{
  width: 100%;
  height: 100%;
  display: block;
}

.albumTitle{
  font-size: 34px;
  font-weight: 900;
  letter-spacing: -0.9px;
  line-height: 1.05;
}

.albumMeta{
  margin-top: 6px;
  color: rgba(255,255,255,.70);
  font-size: 13px;
  font-weight: 800;
}

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

.songHeroPlay,
.songHeroQueue,
.songHeroDetails{
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 14px;
  padding: 10px 12px;
  font-weight: 900;
  cursor: pointer;
}

.songHeroPlay{
  background: #fff;
  color: #0b0b0f;
  border-color: rgba(255,255,255,.35);
}

.songHeroQueue,
.songHeroDetails{
  background: rgba(255,255,255,.08);
  color: var(--text);
}

.songHeroPlay:disabled,
.songHeroQueue:disabled{
  opacity: .45;
  cursor: not-allowed;
}

/* =========================
   Versions list (Spotify track list vibe)
   ========================= */

.versionsWrap{
  border: 1px solid rgba(255,255,255,.08);
  background: rgba(255,255,255,.03);
  border-radius: 18px;
  overflow: hidden;
}

.versionsHeader{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 10px;
  padding: 12px 14px;
  border-bottom: 1px solid rgba(255,255,255,.08);
  background: rgba(0,0,0,.12);
}

.versionsTitle{
  font-weight: 900;
  letter-spacing: -.2px;
}

.versionsRows{
  display:flex;
  flex-direction:column;
}

.vRow{
  display:grid;
  grid-template-columns: 56px 1fr 44px;
  gap: 10px;
  align-items:center;
  padding: 12px 14px;
  border-bottom: 1px solid rgba(255,255,255,.06);
  cursor: pointer;
}

.vRow:hover{
  background: rgba(255,255,255,.04);
}

.vThumb{
  width: 46px;
  height: 46px;
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.10);
  opacity: .95;
  position: relative;
  cursor: pointer;
}

.vThumb svg{
  width:100%;
  height:100%;
  display:block;
}

.vThumb.is-active {
  border-color: rgba(34,197,94,.5);
}

.vThumbCheck {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,.45);
  border-radius: 11px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.vDur{
  display:none; /* keep your markup but hide for cleaner Spotify-like list */
}

.vMain{
  min-width: 0;
}

/* Version detail rows (modernized version detail view) */
.vDetailRows{
  display: flex;
  flex-direction: column;
}

.vDetailRow{
  display: grid;
  grid-template-columns: 90px 1fr;
  gap: 10px;
  align-items: center;
  padding: 12px 14px;
  border-bottom: 1px solid rgba(255,255,255,.06);
}

.vDetailRow:last-child{
  border-bottom: none;
}

.vDetailLabel{
  font-size: 12px;
  font-weight: 700;
  color: rgba(255,255,255,.45);
  text-transform: uppercase;
  letter-spacing: .4px;
  flex-shrink: 0;
}

.vDetailValue{
  font-size: 14px;
  color: rgba(255,255,255,.85);
  min-width: 0;
}

.vDetailRow input{
  width: 100%;
  box-sizing: border-box;
}

/* Version detail — active chip */
.vdChip{
  display: inline-flex;
  align-items: center;
  padding: 6px 16px;
  border-radius: 20px;
  font-size: 13px;
  font-weight: 700;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.06);
  color: rgba(255,255,255,.7);
  cursor: pointer;
  transition: all .2s;
}
.vdChip:active{ transform: scale(.96); }
.vdChipActive{
  background: rgba(30,215,96,.15);
  border-color: rgba(30,215,96,.35);
  color: rgba(30,215,96,.95);
}

/* Version detail — audio section */
.vdAudioSection{
  padding: 16px;
}

/* Big upload button (no file yet) */
.vdUploadBtn{
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: 32px 20px;
  border-radius: 16px;
  border: 2px dashed rgba(255,255,255,.12);
  background: rgba(255,255,255,.03);
  color: rgba(255,255,255,.55);
  cursor: pointer;
  transition: all .25s;
}
.vdUploadBtn:active{
  transform: scale(.97);
  border-color: rgba(168,85,247,.5);
  background: rgba(168,85,247,.08);
}
.vdUploadIcon{
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: rgba(168,85,247,.12);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 12px;
  color: rgba(168,85,247,.8);
}
.vdUploadLabel{
  font-size: 16px;
  font-weight: 800;
  color: rgba(255,255,255,.85);
  margin-bottom: 4px;
}
.vdUploadSub{
  font-size: 12px;
  color: rgba(255,255,255,.35);
  letter-spacing: .3px;
}

/* Audio card (file attached) */
.vdAudioCard{
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  border-radius: 14px;
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.08);
}
.vdAudioIcon{
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: linear-gradient(135deg, rgba(168,85,247,.2), rgba(59,130,246,.2));
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: rgba(168,85,247,.8);
}
.vdAudioInfo{
  flex: 1;
  min-width: 0;
}
.vdAudioName{
  font-size: 14px;
  font-weight: 700;
  color: rgba(255,255,255,.85);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.vdAudioMeta{
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 3px;
  font-size: 12px;
  color: rgba(255,255,255,.4);
}
.vdAudioBadge{
  display: inline-block;
  padding: 1px 7px;
  border-radius: 8px;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .3px;
}
.vdBadgeLocal{
  background: rgba(30,215,96,.12);
  color: rgba(30,215,96,.85);
}
.vdBadgeDrive{
  background: rgba(78,205,196,.12);
  color: rgba(78,205,196,.85);
}
.vdBadgeLink{
  background: rgba(59,130,246,.12);
  color: rgba(59,130,246,.85);
}

.vdAudioActions{
  display: flex;
  gap: 6px;
  flex-shrink: 0;
}
.vdAudioActionBtn{
  width: 36px;
  height: 36px;
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,.1);
  background: rgba(255,255,255,.05);
  color: rgba(255,255,255,.6);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all .2s;
  text-decoration: none;
}
.vdAudioActionBtn:active{ transform: scale(.9); background: rgba(255,255,255,.1); }
.vdAudioDanger{ color: rgba(255,100,100,.7); }
.vdAudioDanger:active{ background: rgba(255,60,60,.15); }
.vdAudioCloud{ color: rgba(78,205,196,.7); }
.vdAudioCloud:active{ background: rgba(78,205,196,.15); }

/* Create sheet — file pick button */
.sheetFileBtn{
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 14px 16px;
  border-radius: 14px;
  border: 2px dashed rgba(255,255,255,.1);
  background: rgba(255,255,255,.03);
  color: rgba(255,255,255,.55);
  cursor: pointer;
  transition: all .25s;
  text-align: left;
  margin-bottom: 6px;
}
.sheetFileBtn:active{ transform: scale(.98); border-color: rgba(168,85,247,.4); }
.sheetFilePicked{
  border-style: solid;
  border-color: rgba(168,85,247,.35);
  background: rgba(168,85,247,.08);
}
.sheetFileIcon{
  width: 40px;
  height: 40px;
  border-radius: 10px;
  background: rgba(168,85,247,.12);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: rgba(168,85,247,.75);
}
.sheetFilePicked .sheetFileIcon{
  background: rgba(30,215,96,.15);
  color: rgba(30,215,96,.85);
}
.sheetFileMeta{ min-width: 0; }
.sheetFileLabel{
  font-size: 14px;
  font-weight: 700;
  color: rgba(255,255,255,.8);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.sheetFilePicked .sheetFileLabel{ color: rgba(255,255,255,.95); }
.sheetFileSub{
  font-size: 12px;
  color: rgba(255,255,255,.35);
  margin-top: 1px;
}

.vTitle{
  font-weight: 900;
  font-size: 14px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.vSub{
  margin-top: 4px;
  font-size: 12px;
  color: rgba(255,255,255,.62);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.vPills{
  display:flex;
  gap: 6px;
  flex-wrap: wrap;
  margin-top: 6px;
}

.vPill{
  font-size: 11px;
  font-weight: 900;
  padding: 2px 8px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.06);
  color: rgba(255,255,255,.82);
}

.vPill.good{
  border-color: rgba(34,197,94,.35);
  background: rgba(34,197,94,.12);
  color: rgba(255,255,255,.92);
}

.vPill.warn{
  border-color: rgba(255,209,102,.35);
  background: rgba(255,209,102,.10);
  color: rgba(255,255,255,.92);
}

.vMore{
  width: 40px;
  height: 40px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.06);
  color: rgba(255,255,255,.90);
  cursor: pointer;
}

/* =========================
   Songs list row internals (FIX)
   ========================= */

.songThumb{
  width: 48px;
  height: 48px;
  border-radius: 6px;
  overflow: hidden;
  flex: 0 0 auto;
  border: 1px solid rgba(255,255,255,.08);
  background: rgba(255,255,255,.04);
}

.songThumb img,
.songThumb svg{
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

.songMain{
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.songTop{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-width: 0;
}

.songTitleRow{
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
  overflow: hidden;
}
.songTitleBadge{
  display: flex;
  align-items: baseline;
  gap: 6px;
  min-width: 0;
}
.songTitleBadge .songTitle{
  flex: 1;
  min-width: 0;
}

.songTitle{
  font-weight: 600;
  font-size: 15px;
  letter-spacing: -0.1px;
  line-height: 1.2;
  min-height: 18px;            /* prevent zero-height collapse in WebKit sticky contexts */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.songSub{
  font-weight: 400;
  font-size: 13px;
  color: rgba(255,255,255,.48);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.songMore{
  flex: 0 0 auto;
  width: 32px;
  height: 32px;
  border-radius: 0;
  border: none;
  background: none;
  color: rgba(255,255,255,.45);
  display: grid;
  place-items: center;
  cursor: pointer;
  font-size: 18px;
  letter-spacing: 1px;
}

.songMore:active{ opacity: 0.6; }

.songPills{
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

.pill{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.06);
  color: rgba(255,255,255,.86);
  font-size: 12px;
  font-weight: 900;
}

.pill.muted{
  color: rgba(255,255,255,.70);
  background: rgba(0,0,0,.18);
}

.pill.good{
  border-color: rgba(34,197,94,.35);
  background: rgba(34,197,94,.12);
  color: rgba(255,255,255,.92);
}

.pill.warn{
  border-color: rgba(255,209,102,.35);
  background: rgba(255,209,102,.10);
  color: rgba(255,255,255,.92);
}

.songMetaRow{
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  color: rgba(255,255,255,.62);
  font-size: 12px;
  font-weight: 800;
}

.songMetaRow .sep{
  opacity: .6;
}

.songRow{
  width:100%;
  padding: 8px 2px;
  border-bottom: 1px solid rgba(255,255,255,.06);
  cursor:pointer;
  display:flex;
  align-items:center;
  gap: 12px;
}
.songRow:hover{ background:rgba(255,255,255,.03); }
.songRow:active{ background:rgba(255,255,255,.04); }

/* =========================
   Player (Spotify-style list)
   ========================= */

.playerHeader {
  padding: 18px 16px 10px;
}

.playerTitleRow{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:12px;
}

.playerTitle{
  font-size: 28px;
  font-weight: 800;
  letter-spacing: -0.02em;
  margin: 0;
}

.playerCount{
  margin-top: 6px;
  color: var(--muted);
  font-size: 13px;
}

/* Remove screen top padding so sticky top:0 truly means the visual top */
.screen--player{
  padding-top: 0;
}
.playerHead{
  padding: 22px 2px 0; /* 12 + 10 to compensate removed screen padding */
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.playerTitleRow{
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.playerPageTitle{
  font-size: 34px;
  font-weight: 700;
  letter-spacing: -.2px;
  color: rgba(255,255,255,.85);
}
.playerHead input[type="text"]{
  width: 100%;
}
.playerChipsSticky{
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  z-index: 10;
  background: var(--bg);
  padding-top: 6px;
  padding-bottom: 4px;
}
.playerChipsSticky .chipsRow{
  padding-left: 0;
  padding-right: 0;
}
.playerActions{
  display:flex;
  align-items: center;
  gap: 18px;
}

/* Spotify-style play — big green circle, right-aligned */
.playerPlayBtn{
  width: 64px;
  height: 64px;
  border-radius: 999px;
  border: 0;
  cursor: pointer;
  background: #fff;
  color: #0b0b0f;
  display:flex;
  align-items:center;
  justify-content:center;
  box-shadow: 0 8px 24px rgba(0,0,0,.4), 0 0 0 0 rgba(255,255,255,.1);
  flex-shrink: 0;
}
.playerPlayBtn:active{ transform: scale(0.94); }

/* Spotify-style shuffle — bare icon, no circle/border */
.playerShuffleBtn{
  width: 40px;
  height: 40px;
  border: none;
  background: transparent;
  color: rgba(255,255,255,.55);
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  flex-shrink: 0;
}
.playerShuffleBtn.is-active{ color: #fff; }
.playerShuffleBtn:active{ opacity: 0.6; }

.chipsRow{
  display:flex;
  gap: 10px;
  padding: 8px 16px 6px;
  overflow:auto;
  -webkit-overflow-scrolling: touch;
}
.chipsRow::-webkit-scrollbar{ display:none; }

.chip{
  padding: 9px 14px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: rgba(255,255,255,.06);
  color: var(--text);
  font-size: 13px;
  white-space: nowrap;
  cursor: pointer;
}
.chip.active{
  background: rgba(255,255,255,.12);
  border-color: rgba(255,255,255,.20);
}

.playerList{
  padding: 4px 2px 4px; /* .screen handles bottom clearance via --dock-h */
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.playerRow{
  display: grid;
  grid-template-columns: 48px 1fr auto;
  gap: 12px;
  align-items: center;
  padding: 8px 2px;
  border-radius: 10px;
  cursor: pointer;
  background: none;
  border: none;
  -webkit-user-select: none;
  user-select: none;
}
.playerMore{
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  background: none;
  border: none;
  color: rgba(255,255,255,.45);
  padding: 0;
  flex-shrink: 0;
}
.playerRow:active{
  opacity: .7;
}

.playerCover{
  width: 48px;
  height: 48px;
  border-radius: 6px;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.10);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.playerCover img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.playerMain{
  min-width: 0;
}
.playerName{
  font-weight: 600;
  font-size: 15px;
  line-height: 1.25;
  color: var(--text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.playerMeta{
  margin-top: 3px;
  display: flex;
  gap: 10px;
  align-items: center;
  color: var(--muted);
  font-size: 12.5px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.playerBadge{
  font-size: 11px;
  padding: 3px 8px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.06);
  color: rgba(255,255,255,.8);
}
.playerBadge.fav{
  border-color: rgba(255,255,255,.3);
  background: rgba(255,255,255,.1);
  color: rgba(255,255,255,.9);
}

/* ── Lyrics view ── */
.lyricsHead{
  padding: 22px 2px 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.lyricsTitleRow{
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.lyricsPageTitle{
  font-size: 34px;
  font-weight: 700;
  letter-spacing: -.2px;
  color: rgba(255,255,255,.85);
}
.lyricsHead input[type="text"]{
  width: 100%;
}
.lyricsList{
  padding: 12px 2px 4px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.lyricsRow{
  display: grid;
  grid-template-columns: 48px 1fr auto;
  gap: 12px;
  align-items: center;
  padding: 8px 2px;
  border-radius: 10px;
  cursor: pointer;
  background: none;
  border: none;
  -webkit-user-select: none;
  user-select: none;
}
.lyricsRow:active{ opacity: .7; }
.lyricsCover{
  width: 48px;
  height: 48px;
  border-radius: 6px;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.10);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.lyricsCover svg{ width: 100%; height: 100%; }
.lyricsMain{ min-width: 0; }
.lyricsName{
  font-weight: 600;
  font-size: 15px;
  line-height: 1.25;
  color: var(--text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.lyricsMeta{
  margin-top: 3px;
  color: var(--muted);
  font-size: 12.5px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.lyricsMore{
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  background: none;
  border: none;
  color: rgba(255,255,255,.45);
  padding: 0;
  flex-shrink: 0;
}

/* Lyrics edit view */
.lyricsEditHead{
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 22px 2px 16px;
}
.lyricsEditCover{
  width: 56px;
  height: 56px;
  border-radius: 8px;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.10);
  overflow: hidden;
  flex-shrink: 0;
}
.lyricsEditCover svg{ width: 100%; height: 100%; }
.lyricsEditInfo{ min-width: 0; }
.lyricsEditTitle{
  font-weight: 700;
  font-size: 18px;
  color: var(--text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.lyricsEditSub{
  margin-top: 2px;
  color: var(--muted);
  font-size: 13px;
}
.lyricsEditArea{
  width: 100%;
  min-height: 300px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 10px;
  color: var(--text);
  font-size: 15px;
  line-height: 1.6;
  padding: 14px;
  resize: vertical;
  font-family: inherit;
}
.lyricsEditArea::placeholder{ color: rgba(255,255,255,.3); }
.lyricsEditActions{
  padding: 14px 0;
  display: flex;
  gap: 10px;
}

/* Action sheet (long-press menu) */
.actionSheetBackdrop{
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.55);
  z-index: 60;
}

.actionSheet{
  position: fixed;
  left: 50%;
  transform: translateX(-50%);
  bottom: calc(var(--tabbar-h) + var(--mini-gap) + 10px);
  width: min(520px, calc(100vw - 24px));
  border-radius: 18px;
  background: rgba(18,18,22,.92);
  backdrop-filter: blur(16px);
  border: 1px solid rgba(255,255,255,.10);
  z-index: 61;
  overflow:hidden;
}

.actionSheetHeader{
  padding: 14px 14px 10px;
  border-bottom: 1px solid rgba(255,255,255,.08);
}

.actionSheetBtn{
  width:100%;
  text-align:left;
  padding: 14px;
  background: transparent;
  border: 0;
  border-top: 1px solid rgba(255,255,255,.06);
  color: rgba(255,255,255,.90);
  font-size: 14px;
  cursor:pointer;
}
.actionSheetBtn:hover{ background: rgba(255,255,255,.05); }
.actionSheetBtn.danger{ color: rgba(255,120,120,.92); }

.emptyState{
  padding: 22px 16px;
  color: rgba(255,255,255,.70);
  font-size: 14px;
}

/* --- FULLSCREEN LAYOUT + NO "BLANK BOTTOM" --- */

/* Spotify-ish background layer that always fills the whole screen */
/* body::before gradient disabled — position:fixed pseudo on body
   breaks iOS safe-area rendering (no full-bleed, sticky, elastic) */
/*
body::before{
  content:"";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(900px 520px at 30% -10%, rgba(115,155,255,.22), transparent 60%),
    radial-gradient(900px 520px at 85% 10%, rgba(160,95,255,.18), transparent 60%),
    linear-gradient(180deg, rgba(255,255,255,.06), transparent 30%),
    var(--bg);
}
*/

/* Keep inner content containers transparent so the screen background shows through. */
.page, .panel, .content {
  background: transparent;
}

/* Fullscreen Now Playing */
.npWrap{
  padding: 14px 6px 24px;
  display:flex;
  flex-direction:column;
  gap: 14px;
}

.npBack{
  width: 44px;
  height: 44px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.06);
  color: rgba(255,255,255,.92);

  /* 👇 make the arrow look “right” */
  display: grid;
  place-items: center;
  padding: 0;
  line-height: 1;
  font-size: 18px;
  font-weight: 900;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.npBack:active{
  transform: translateY(1px);
}

.npArt{
  width: min(360px, 76vw);
  aspect-ratio: 1 / 1;
  border-radius: 22px;
  overflow:hidden;
  border: 1px solid rgba(255,255,255,.10);
  box-shadow: 0 18px 50px rgba(0,0,0,.55);
  align-self:center;
}

.npArt svg{ width:100%; height:100%; display:block; }

.npText{
  text-align:center;
}

.npTitle{
  font-size: 26px;
  font-weight: 900;
  letter-spacing: -0.6px;
}

.npSub{
  margin-top: 6px;
  color: rgba(255,255,255,.65);
  font-weight: 800;
  font-size: 13px;
}

.npScrub{
  width: 100%;
  margin-top: 6px;
}

.npControls{
  display:flex;
  justify-content:center;
  align-items:center;
  gap: 14px;
  margin-top: 4px;
}

.npBtn{
  width: 54px;
  height: 54px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.06);
  color: rgba(255,255,255,.92);
  font-size: 16px;
}

.npPlay{
  width: 64px;
  height: 64px;
  background: rgba(255,255,255,.92);
  color: #0b0b0f;
  border-color: rgba(255,255,255,.22);
  font-size: 18px;
}

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

/* ✅ Fullscreen player: no mini-player space reserved, ever */
body.fullplayer-open .screen{
  padding-bottom: calc(var(--tabbar-h) + env(safe-area-inset-bottom) + 22px) !important;
}

/* ✅ Hard-kill mini player while fullscreen is open */
body.fullplayer-open #miniPlayer{
  display: none !important;
}

/* ✅ Hide the entire bottom dock (not just the buttons) while fullscreen player is open */
body.fullplayer-open #bottomDock{
  display: none !important;
}

/* Fullscreen Now Playing (YouTube Music-ish) */
.fp {
  position: fixed;
  inset: 0;
  z-index: 9999;

  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 14px;

  /* push art below the absolute header (safe-area + 44px btn + 8px gap) */
  padding: calc(env(safe-area-inset-top) + 62px) 14px calc(14px + env(safe-area-inset-bottom));
  overflow: hidden; /* ✅ never scroll */

  background: #07070b; /* prevents underlying UI bleed-through */
}

body.fullplayer-open #view,
body.fullplayer-open .screen{
  overflow: hidden !important;
  padding-bottom: 0 !important;
}

body.fullplayer-open #bottomNav{
  display: none !important;
}

body.fullplayer-open #miniPlayer{
  display: none !important;
}

/* Hide the topbar when full player is open — prevents back button bleeding through */
body.fullplayer-open .topbar {
  display: none !important;
}

.fpBg{
  position: fixed;
  inset: -10px;
  z-index: -1;
  filter: blur(44px) saturate(1.25) brightness(0.72);
  transform: scale(1.1);
  opacity: 1;
}

.fpTop {
  display: flex;
  width: 100%;
  justify-content: space-between;
  align-items: center;
}

.fpIconBtn {
  background: none;
  border: none;
  color: rgba(255,255,255,.8);
  padding: 8px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

.fpTopRight {
  display: flex;
  gap: 8px;
}

.fpCoverWrap {
  width: calc(100% + 28px);
  margin-left: -14px;
  margin-right: -14px;
  aspect-ratio: 1;
  border-radius: 0;
  overflow: hidden;
  box-shadow: 0 20px 60px rgba(0,0,0,.5);
  flex-shrink: 0;
}

.fpCover {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.fp::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:-1;
  background: radial-gradient(1200px 700px at 40% -10%, rgba(255,255,255,.10), transparent 60%),
              linear-gradient(180deg, rgba(0,0,0,.68), rgba(0,0,0,.92));
}

.fpCtrl.is-active {
  background: transparent;
  border: none;
  color: #fff;
}

.fpCtrl.is-active::after {
  content: '';
  position: absolute;
  bottom: 2px;
  left: 50%;
  transform: translateX(-50%);
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: #fff;
}

/* Hide dot when repeat-1 badge is showing */
.fpCtrl.is-active:has(.r1b)::after { display: none; }

.fpHeader{
  position: absolute;
  top: calc(6px + env(safe-area-inset-top));
  left: 0;
  right: 0;
  display: grid;
  grid-template-columns: 44px 1fr 44px;
  align-items: center;
  padding: 0 6px;
  z-index: 10;
}

.fpHeaderTitle {
  text-align: center;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  color: rgba(255,255,255,0.65);
  pointer-events: none;
}

.fpNavBtn{
  background: transparent;
  border: none;
  color: rgba(255,255,255,.92);
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  font-size: 22px;
  padding: 0;
  -webkit-tap-highlight-color: transparent;
  pointer-events: auto;
}

.fpNavBtn:active{ opacity: 0.7; }

.fpSeg{
  justify-self: center;
  display:flex;
  gap: 8px;
  padding: 4px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(0,0,0,.18);
}

.fpSegBtn{
  border: 0;
  background: transparent;
  color: rgba(255,255,255,.75);
  padding: 8px 14px;
  border-radius: 999px;
  font-weight: 900;
  letter-spacing: .2px;
}

.fpSegBtn.is-active{
  background: rgba(255,255,255,.16);
  color: rgba(255,255,255,.95);
}

.fpArtCard{
  width: min(400px, 90vw);
  flex: 1 1 auto;
  min-height: min(300px, 72vw);
  max-height: min(500px, 56vh);
  border-radius: 26px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.05);
  box-shadow: 0 18px 55px rgba(0,0,0,.55);
}

.fpArt {
  width: 100%;
  height: 100%;
  display: block;
}

.fpArt svg{ width:100%; height:100%; display:block; }

.fpMeta{ text-align: center; }

.fpTitle{
  font-size: 28px;
  font-weight: 1000;
  letter-spacing: -0.6px;
}

.fpSub{
  margin-top: 6px;
  color: rgba(255,255,255,.68);
  font-weight: 850;
  font-size: 13px;
}

.fpActions{
  width: 100%;
  display:flex;
  justify-content:center;
  gap: 10px;
  flex-wrap: wrap;
}

.fpPill{
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.07);
  color: rgba(255,255,255,.92);
  padding: 10px 14px;
  font-weight: 900;
  font-size: 13px;
}

.fpPill:disabled,
.fpIcon:disabled,
.fpCtrl:disabled,
.fpTab:disabled{
  opacity: .45;
}

.fpScrub{
  width: 100%;
  display:grid;
  grid-template-columns: 44px 1fr 44px;
  gap: 10px;
  align-items: center;
  margin-top: 2px;
}

.fpTime{
  font-variant-numeric: tabular-nums;
  font-size: 12px;
  color: rgba(255,255,255,.75);
}

.fpScrubBar{ width: 100%; }

.fpControls{
  width: 100%;
  display:flex;
  justify-content:center;
  align-items:center;
  gap: 4px;
  margin-top: 6px;
}

.fpCtrl{
  width: 60px;
  height: 60px;
  border-radius: 0;
  border: none;
  background: transparent;
  color: rgba(255,255,255,.75);
  font-size: 22px;
  display:grid;
  place-items:center;
  padding:0;
  position: relative;
}
/* Repeat-1 badge */
.r1b {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 10px;
  font-weight: 900;
  color: #fff;
  line-height: 1;
  pointer-events: none;
}

.fpPlay{
  width: 90px;
  height: 90px;
  background: transparent;
  color: #fff;
  border: none;
  font-size: 34px;
}
.fpPlay svg{ width: 55px; height: 55px; }

.fpBottomTabs{
  width: 100%;
  display:flex;
  justify-content: space-around;
  gap: 8px;
  margin-top: 18px;
  padding-top: 10px;
}

.fpTab{
  border: 0;
  background: transparent;
  color: rgba(255,255,255,.65);
  font-weight: 900;
  letter-spacing: .6px;
  font-size: 12px;
  padding: 10px 8px;
}

.fpTab.is-active{ color: rgba(255,255,255,.95); }
.fpTab.is-active{
  border-bottom: 2px solid rgba(255,255,255,.95);
}

/* ── Lyrics collapsed bar (hidden in normal player) ── */
.fpLyricsBar{
  display: none;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 0 4px;
}
.fpLyricsBarArt{
  width: 48px;
  height: 48px;
  border-radius: 8px;
  overflow: hidden;
  flex-shrink: 0;
  background: rgba(255,255,255,.05);
}
.fpLyricsBarArt svg{ width:100%; height:100%; display:block; }
.fpLyricsBarMeta{
  flex: 1;
  min-width: 0;
}
.fpLyricsBarTitle{
  font-size: 15px;
  font-weight: 800;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.fpLyricsBarSub{
  font-size: 12px;
  color: rgba(255,255,255,.55);
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.fpLyricsBarPlay{
  width: 44px;
  height: 44px;
  background: none;
  border: none;
  color: #fff;
  display: grid;
  place-items: center;
  flex-shrink: 0;
  padding: 0;
}
.fpLyricsBarPlay svg{ width: 28px; height: 28px; }

/* Thin progress scrub under lyrics bar */
.fpLyricsScrub{
  display: none;
  width: 100%;
  height: 2px;
  background: rgba(255,255,255,.15);
  border-radius: 1px;
  overflow: hidden;
}
.fpLyricsScrubFill{
  height: 100%;
  width: 0%;
  background: rgba(255,255,255,.7);
  transition: width 0.3s linear;
}

/* Lyrics body (hidden by default) */
.fpLyricsBody{
  display: none;
  flex: 1;
  width: 100%;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 20px 8px 40px;
  mask-image: linear-gradient(to bottom, transparent 0%, black 3%, black 90%, transparent 100%);
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, black 3%, black 90%, transparent 100%);
}
.fpLyricsText{
  font-size: 28px;
  font-weight: 800;
  line-height: 1.55;
  color: rgba(255,255,255,.45);
  white-space: pre-wrap;
  word-break: break-word;
}
.fpLyricsEmpty{
  font-size: 16px;
  font-weight: 600;
  color: rgba(255,255,255,.3);
}

/* ── fp--lyrics: collapsed state ── */
.fp.fp--lyrics{
  padding-top: calc(env(safe-area-inset-top) + 62px);
  gap: 0;
}
.fp.fp--lyrics .fpArtCard,
.fp.fp--lyrics .fpMeta,
.fp.fp--lyrics .fpActions,
.fp.fp--lyrics .fpScrub,
.fp.fp--lyrics .fpControls{
  display: none;
}
.fp.fp--lyrics .fpLyricsBar{
  display: flex;
}
.fp.fp--lyrics .fpLyricsScrub{
  display: block;
  margin-top: 10px;
}
.fp.fp--lyrics .fpBottomTabs{
  margin-top: 14px;
}
.fp.fp--lyrics .fpLyricsBody{
  display: flex;
  flex-direction: column;
}

/* ---- iOS Safari viewport fix ---- */
html, body {
  height: 100%;
  margin: 0;
  background: var(--bg);
}

body {
  /* dynamic vh driven by JS; fixes Safari toolbar height changes */
  min-height: calc(var(--vh, 1vh) * 100);
  background: var(--bg);
}

/* ---- Single bottom dock that owns the bottom layout ---- */
#bottomDock{
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;

  /* paint the whole “URL bar area” so there’s no dead gutter */
  background: rgba(10,11,15,0.94);

  /* respect iPhone home indicator */
  padding-bottom: env(safe-area-inset-bottom);

  /* spacing */
  display: flex;
  flex-direction: column;
  gap: 10px;

  /* keep it above everything */
  z-index: 9999;
}

/* mini player & bottom nav should NOT be fixed anymore ONLY when inside the dock */
#bottomDock #miniPlayer,
#bottomDock #bottomNav{
  position: relative !important;
  left: auto !important;
  right: auto !important;
  bottom: auto !important;
}

/* Your main content must make room for the dock */
.screen{
  padding-bottom: calc(var(--dock-h, 160px) + 16px);
}.miniMeta{
  flex: 1 1 auto;
  min-width: 0;
  display:flex;
  flex-direction:column;
  gap: 2px;
  padding-right: 6px;
}

.miniTitle{
  font-weight: 900;
  font-size: 13px;
  line-height: 1.1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.miniSub{
  color: rgba(255,255,255,.62);
  font-weight: 800;
  font-size: 11.5px;
  line-height: 1.1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* HARD OVERRIDE: mini player must behave like a normal block inside the dock */
#bottomDock #miniPlayer{
  position: relative !important;
  inset: auto !important;
  top: auto !important;
  left: auto !important;
  right: auto !important;
  bottom: auto !important;
  transform: none !important;
}

#nowPlayingOverlay {
  position: fixed;
  inset: 0;
  transform: translateY(100%);
  z-index: 9999;
  pointer-events: none;
  transition: transform 450ms cubic-bezier(.32,0,.2,1);
  overflow: hidden;
}

#nowPlayingOverlay.is-open {
  pointer-events: auto;
  transform: translateY(0);
}

.viewSlideOverlay {
  position: fixed;
  z-index: 500;
  overflow: hidden;
  background: var(--bg, #0b0b0f);
  transition: transform 260ms ease, opacity 260ms ease;
  pointer-events: none;
}

.viewSlideOverlay.out {
  transform: translateX(100%);
  opacity: 0;
}

/* ─── Evolution View ─── */

.evoToggle {
  display: flex;
  background: rgba(255,255,255,.06);
  border-radius: 10px;
  padding: 3px;
  gap: 2px;
}

.evoToggle button {
  flex: 1;
  padding: 6px 12px;
  border: none;
  background: transparent;
  color: var(--muted);
  font-size: 12px;
  font-weight: 600;
  border-radius: 8px;
  cursor: pointer;
  transition: all .2s;
}

.evoToggle button.is-active {
  background: rgba(255,255,255,.12);
  color: var(--text);
}

.evoCanvas {
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1;
  max-height: 420px;
  border-radius: 16px;
  overflow: hidden;
  background: radial-gradient(ellipse at 50% 40%, #0e1225 0%, #08090e 70%, #050507 100%);
  touch-action: none;
  user-select: none;
}

.evoCanvas canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.evoCanvas svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

/* constellation lines */
.evoLine {
  stroke: rgba(140,160,255,.18);
  stroke-width: 1.2;
  stroke-linecap: round;
}

.evoCanvas.stage-nebula .evoLine {
  stroke: rgba(140,160,255,.30);
  stroke-width: 1.5;
}

.evoCanvas.stage-complete .evoLine {
  stroke: rgba(180,200,255,.45);
  stroke-width: 2;
  filter: drop-shadow(0 0 3px rgba(140,160,255,.4));
}

/* nodes */
.evoNode {
  cursor: pointer;
  transition: transform .25s ease;
}

.evoNode:active {
  transform: scale(1.25);
}

.evoNodeGlow {
  fill: rgba(140,170,255,.08);
  transition: r .3s ease;
}

.evoNode:hover .evoNodeGlow,
.evoNode.is-active .evoNodeGlow {
  fill: rgba(140,170,255,.18);
}

.evoNodeCore {
  transition: r .2s ease;
}

.evoNode.is-active .evoNodeCore {
  filter: drop-shadow(0 0 6px rgba(140,180,255,.7));
}

.evoNodeLabel {
  fill: rgba(255,255,255,.7);
  font-size: 11px;
  font-weight: 600;
  text-anchor: middle;
  pointer-events: none;
}

.evoNode.is-active .evoNodeLabel {
  fill: rgba(255,255,255,.95);
}

/* node entrance animation */
@keyframes evoNodeIn {
  0% { opacity: 0; transform: scale(0); }
  60% { opacity: 1; transform: scale(1.15); }
  100% { opacity: 1; transform: scale(1); }
}

.evoNode {
  animation: evoNodeIn .5s ease both;
}

/* stagger via inline --delay */

/* nebula glow overlay */
.evoNebula {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0;
  transition: opacity .8s ease;
}

.evoCanvas.stage-nebula .evoNebula,
.evoCanvas.stage-complete .evoNebula {
  opacity: 1;
}

/* node pulse for active */
@keyframes evoPulse {
  0%, 100% { r: 6; opacity: .3; }
  50% { r: 10; opacity: .08; }
}

.evoNodePulse {
  animation: evoPulse 2.5s ease-in-out infinite;
}

/* empty state */
.evoEmpty {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--muted);
  font-size: 13px;
  font-style: italic;
}

/* long press menu */
.evoActionMenu {
  position: absolute;
  z-index: 10;
  background: rgba(20,22,30,.95);
  backdrop-filter: blur(12px);
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 14px;
  padding: 6px;
  min-width: 160px;
  box-shadow: 0 8px 32px rgba(0,0,0,.6);
  animation: evoMenuIn .2s ease;
}

@keyframes evoMenuIn {
  from { opacity: 0; transform: scale(.9) translateY(-4px); }
  to { opacity: 1; transform: scale(1) translateY(0); }
}

.evoActionMenu button {
  display: block;
  width: 100%;
  padding: 10px 14px;
  border: none;
  background: transparent;
  color: var(--text);
  font-size: 14px;
  text-align: left;
  border-radius: 10px;
  cursor: pointer;
}

.evoActionMenu button:hover {
  background: rgba(255,255,255,.08);
}

/* =========================
   Full-screen Create Overlay
   ========================= */
.createOverlay{
  position: fixed;
  inset: 0;
  z-index: 600;
  background: var(--bg);
  display: flex;
  flex-direction: column;
  opacity: 0;
  transform: translateY(100%);
  transition: opacity .25s ease, transform .3s cubic-bezier(.32,.72,.32,1);
  overflow: hidden;
}
.createOverlay.open{
  opacity: 1;
  transform: translateY(0);
}

.coHeader{
  display: flex;
  align-items: center;
  padding: calc(env(safe-area-inset-top, 0px) + 12px) 16px 0;
  gap: 12px;
}
.coTabs{
  display: flex;
  gap: 0;
  flex: 1;
  background: rgba(255,255,255,.06);
  border-radius: 12px;
  padding: 3px;
}
.coTab{
  flex: 1;
  border: none;
  background: transparent;
  color: rgba(255,255,255,.5);
  font-size: 14px;
  font-weight: 700;
  padding: 10px 0;
  border-radius: 10px;
  cursor: pointer;
  transition: all .15s ease;
}
.coTab.active{
  background: rgba(255,255,255,.12);
  color: #fff;
  font-weight: 800;
}
.coClose{
  width: 40px;
  height: 40px;
  border: none;
  background: rgba(255,255,255,.08);
  color: rgba(255,255,255,.7);
  border-radius: 50%;
  font-size: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
}

.coBody{
  flex: 1;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 20px 16px calc(env(safe-area-inset-bottom, 0px) + 24px);
}

/* Fields */
.coField{
  margin-bottom: 20px;
}
.coLabel{
  display: block;
  font-size: 13px;
  font-weight: 800;
  color: rgba(255,255,255,.5);
  text-transform: uppercase;
  letter-spacing: .8px;
  margin-bottom: 8px;
}
.coInput{
  width: 100%;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.10);
  color: #fff;
  border-radius: 14px;
  padding: 14px 14px;
  font-size: 16px;
  outline: none;
  font-family: inherit;
  transition: border-color .15s;
}
.coInput:focus{
  border-color: rgba(255,255,255,.25);
}
.coInput::placeholder{
  color: rgba(255,255,255,.3);
}

/* Project horizontal scroll */
.coProjScroll{
  display: flex;
  gap: 10px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  padding-bottom: 4px;
  scrollbar-width: none;
}
.coProjScroll::-webkit-scrollbar{ display: none; }

.coProjCard{
  flex-shrink: 0;
  width: 100px;
  border: 2px solid transparent;
  background: rgba(255,255,255,.04);
  border-radius: 14px;
  padding: 8px 8px 10px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  transition: border-color .15s, background .15s;
  text-align: center;
}
.coProjCard:hover{ background: rgba(255,255,255,.08); }
.coProjCard.selected{
  border-color: rgba(255,255,255,.6);
  background: rgba(255,255,255,.10);
}
.coProjArt{
  width: 68px;
  height: 68px;
  border-radius: 10px;
  overflow: hidden;
  flex-shrink: 0;
}
.coProjName{
  font-size: 12px;
  font-weight: 800;
  color: #fff;
  line-height: 1.2;
  max-width: 84px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.coProjCount{
  font-size: 11px;
  color: rgba(255,255,255,.4);
  font-weight: 600;
}

/* Genre chips + dropdown */
.coGenreChips{
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 8px;
}
.coGenreChip{
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 6px 10px;
  background: rgba(255,255,255,.10);
  border: 1px solid rgba(255,255,255,.15);
  border-radius: 20px;
  color: #fff;
  font-size: 13px;
  font-weight: 700;
}
.coGenreChipX{
  background: none;
  border: none;
  color: rgba(255,255,255,.5);
  font-size: 16px;
  cursor: pointer;
  padding: 0 0 0 2px;
  line-height: 1;
}
.coGenreWrap{
  position: relative;
}
.coGenreDropdown{
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  z-index: 10;
  margin-top: 4px;
  background: #1a1a22;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 14px;
  max-height: 220px;
  overflow-y: auto;
  padding: 4px;
}
.coGenreOption{
  display: block;
  width: 100%;
  border: none;
  background: transparent;
  color: rgba(255,255,255,.85);
  font-size: 14px;
  font-weight: 600;
  padding: 10px 12px;
  text-align: left;
  border-radius: 10px;
  cursor: pointer;
}
.coGenreOption:hover{ background: rgba(255,255,255,.08); }

/* File pick button in create overlay */
.coFileBtn{
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 16px;
  border-radius: 14px;
  border: 2px dashed rgba(255,255,255,.1);
  background: rgba(255,255,255,.03);
  color: rgba(255,255,255,.55);
  cursor: pointer;
  transition: all .25s;
  text-align: left;
  margin-bottom: 20px;
  position: relative;
}
.coFileBtn:active{ transform: scale(.98); border-color: rgba(168,85,247,.4); }
.coFileBtn.picked{
  border-style: solid;
  border-color: rgba(168,85,247,.3);
  background: rgba(168,85,247,.06);
}
.coFileIcon{
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: rgba(168,85,247,.12);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: rgba(168,85,247,.75);
}
.coFileBtn.picked .coFileIcon{
  background: rgba(30,215,96,.12);
  color: rgba(30,215,96,.85);
}
.coFileMeta{ flex: 1; min-width: 0; }
.coFileName{
  font-size: 14px;
  font-weight: 700;
  color: rgba(255,255,255,.75);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.coFileBtn.picked .coFileName{ color: rgba(255,255,255,.95); }
.coFileSub{
  font-size: 12px;
  color: rgba(255,255,255,.3);
  margin-top: 2px;
}
.coFileClear{
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: none;
  background: rgba(255,255,255,.08);
  color: rgba(255,255,255,.5);
  font-size: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
}
.coFileClear:active{ background: rgba(255,60,60,.2); color: rgba(255,120,120,1); }

/* Create button */
.coCreateBtn{
  width: 100%;
  padding: 16px;
  border: none;
  border-radius: 16px;
  background: #fff;
  color: #0b0b0f;
  font-size: 16px;
  font-weight: 900;
  cursor: pointer;
  margin-top: 8px;
  letter-spacing: -.3px;
}

/* Placeholder for under-construction tabs */
.coPlaceholder{
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 60vh;
  gap: 12px;
  text-align: center;
}
.coPlaceholderText{
  font-size: 18px;
  font-weight: 800;
  color: rgba(255,255,255,.4);
}
.coPlaceholderSub{
  font-size: 14px;
  color: rgba(255,255,255,.25);
}

/* =========================
   Projects – Card Grid
   ========================= */
.pGrid{
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
  padding: 10px 0 24px;
}
.pCard{
  position: relative;
  border-radius: 14px;
  overflow: hidden;
  animation: pCardIn .4s ease both;
  will-change: transform;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
}
.pArt img{
  -webkit-touch-callout: none;
  pointer-events: none;
}
@keyframes pCardIn{
  from{ opacity:0; transform: translateY(16px) scale(.96); }
  to{ opacity:1; transform: translateY(0) scale(1); }
}
.pCardInner{
  position: relative;
  border-radius: 14px;
  overflow: hidden;
  background: rgba(255,255,255,.04);
  box-shadow:
    0 4px 16px rgba(0,0,0,.35),
    0 0 0 1px rgba(255,255,255,.06),
    inset 0 1px 0 rgba(255,255,255,.08);
  transition: transform .35s cubic-bezier(.25,.46,.45,.94),
              box-shadow .35s ease;
  will-change: transform, box-shadow;
}
.pCard:hover .pCardInner{
  box-shadow:
    0 6px 20px rgba(0,0,0,.4),
    0 0 0 1px rgba(255,255,255,.08),
    inset 0 1px 0 rgba(255,255,255,.1);
}
.pCardActive .pCardInner{
  box-shadow:
    0 12px 32px rgba(0,0,0,.45),
    0 0 0 1px rgba(255,255,255,.1),
    inset 0 1px 0 rgba(255,255,255,.12);
}

/* ── Artwork ── */
.pArt{
  position: relative;
  aspect-ratio: 1;
  overflow: hidden;
  z-index: 2;
  background: rgba(0,0,0,.2);
  will-change: transform;
  transition: transform .35s cubic-bezier(.25,.46,.45,.94);
}
.pArt svg{
  width: 100%;
  height: 100%;
  display: block;
}

.pShimmer{ display: none; }

/* ── Idle float ── */
.pCard:nth-child(odd){ animation: pCardIn .4s ease both, pFloat 5s ease-in-out infinite; }
.pCard:nth-child(even){ animation: pCardIn .4s ease both, pFloat 5s ease-in-out 2.5s infinite; }
.pCard.noAnim{ animation: none !important; opacity: 1; }
@keyframes pFloat{
  0%, 100%{ transform: translateY(0); }
  50%{ transform: translateY(-2px); }
}

/* ── Info bar ── */
.pInfo{
  padding: 10px 12px 12px;
  position: relative;
  z-index: 2;
}
.pNameRow{
  display: flex;
  align-items: baseline;
  gap: 14px;
  min-width: 0;
}
.pNameRow .pName{
  flex: 1;
  min-width: 0;
}
.pName{
  font-size: 14px;
  font-weight: 700;
  color: #fff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.pMeta{
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 3px;
  font-size: 12px;
  color: rgba(255,255,255,.45);
}

/* ── Shared badge (cloud icon) ── */
.sharedBadge{
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
  opacity: .7;
  vertical-align: baseline;
  position: relative;
  top: 6px;
  margin-left: .25em;
}
.sharedBadge svg{
  display: block;
}
.sharedBadgeOut{ opacity: .65; }
.sharedBadgeIn{ opacity: .7; }

/* ── More button ── */
.pMore{
  position: absolute;
  top: 8px;
  right: 8px;
  z-index: 5;
  background: rgba(0,0,0,.5);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(255,255,255,.1);
  color: #fff;
  font-size: 16px;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  opacity: 0;
  transition: opacity .2s ease;
}
.pCard:hover .pMore,
.pCardActive .pMore{
  opacity: 1;
}
/* Always show on touch devices */
@media (hover: none){
  .pMore{ opacity: 1; }
}

/* ── Vinyl sleeve (underneath artwork) ── */
.pSleeve{
  position: absolute;
  inset: 0;
  bottom: auto;
  aspect-ratio: 1;
  z-index: 1;
  background: rgba(0,0,0,.6);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px 20px 16px 60px;
}
.pSleeveContent{
  display: flex;
  flex-direction: column;
  gap: 6px;
  width: 100%;
}
.pSleeveSong{
  font-size: 11px;
  font-weight: 600;
  color: rgba(255,255,255,.7);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  padding: 3px 0;
  border-bottom: 1px solid rgba(255,255,255,.08);
}
.pSleeveMore{
  color: rgba(255,255,255,.35);
  font-weight: 500;
  border-bottom: none;
}

/* ── Card expand transition ── */
.pCardExpanding{
  border-radius: 14px;
  overflow: hidden;
  background: rgba(0,0,0,.8);
}
.pCardExpanding .pCardInner{
  width: 100%;
  height: 100%;
  border-radius: inherit;
}
.pCardExpanding .pArt{
  width: 100%;
  height: 100%;
}
.pCardExpanding .pInfo,
.pCardExpanding .pMore,
.pCardExpanding .pSleeve{
  display: none;
}

/* =========================
   Project Detail – Spotify Artist Style
   ========================= */

/* Hide global particles canvas during project/song detail to avoid iOS layout interference */
.app.pdActive #globalParticles{
  display: none;
}
/* ── Transparent topbar for project detail ── */
.app.pdActive .topbar{
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 20;
  background: transparent;
  padding-left: 22px;
  padding-right: 22px;
}
.app.pdActive .topbar h1{
  opacity: 0;
}
.app.pdActive .topbar .headerBack{
  left: 16px;
  color: #fff;
  filter: drop-shadow(0 1px 3px rgba(0,0,0,.6));
}
/* Screen: remove top padding, extend full width behind app padding */
.app.pdActive .view{
  margin: 0 -16px;
  width: calc(100% + 32px);
}
.app.pdActive .screen{
  padding-top: 0;
  padding-bottom: 0 !important;
  overscroll-behavior-y: none;
}
/* When hero scrolled away, show solid topbar */
.app.pdScrolled .topbar{
  background: var(--bg);
}
.app.pdScrolled .topbar h1{
  opacity: 1;
}
.topbar h1{
  transition: opacity .2s ease;
}

/* ── Hero header ── */
.pdHero{
  position: relative;
  height: 100vw;
  overflow: hidden;
  display: flex;
  align-items: flex-end;
  background: #000;
}
.pdHeroBg{
  position: absolute;
  inset: 0;
  z-index: 0;
}
.pdHeroBg svg,
.pdHeroBg img{
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}
.pdHeroBg::after{
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
    transparent 35%,
    rgba(0,0,0,.5) 70%,
    var(--bg) 100%
  );
}
.pdHeroContent{
  position: relative;
  z-index: 1;
  padding: 0 20px 16px;
  width: 100%;
}
.pdHeroTitle{
  font-size: 38px;
  font-weight: 900;
  letter-spacing: -1px;
  line-height: 1.05;
  color: #fff;
  text-shadow: 0 2px 16px rgba(0,0,0,.6);
}
.pdHeroMeta{
  margin-top: 6px;
  font-size: 13px;
  font-weight: 600;
  color: rgba(255,255,255,.65);
}

/* ── Actions row ── */
.pdActions{
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px 20px 8px;
  background: #000;
}
.pdPlayBtn{
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: #fff;
  color: #0b0b0f;
  border: none;
  display: grid;
  place-items: center;
  cursor: pointer;
  box-shadow: 0 4px 16px rgba(255,255,255,.15);
  transition: transform .15s ease, box-shadow .15s ease;
}
.pdPlayBtn:active{ transform: scale(.93); }
.pdPlayBtn:disabled{
  opacity: .4;
  cursor: not-allowed;
  box-shadow: none;
}
.pdShuffleBtn,
.pdShareBtn,
.pdMoreBtn{
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: transparent;
  border: none;
  color: rgba(255,255,255,.6);
  display: grid;
  place-items: center;
  cursor: pointer;
  transition: color .15s ease;
}
.pdShuffleBtn:hover,
.pdShareBtn:hover,
.pdMoreBtn:hover{ color: #fff; }
.pdShuffleBtn:disabled{
  opacity: .35;
  cursor: not-allowed;
}

/* ── Sticky bar (simple sticky, no inner scroll — elastic bounce) ── */
.pdStickyBar{
  position: sticky;
  top: var(--pd-topbar-h, 0px);
  z-index: 10;
  background: var(--bg);
}

/* ── Sticky panel: tabs + content stick at top ── */
.pdSticky{
  position: sticky;
  top: var(--pd-topbar-h, 0px);
  z-index: 10;
  display: flex;
  flex-direction: column;
  background: var(--bg);
  min-height: calc(100vh - var(--pd-topbar-h, 0px));
}

.pdTabs{
  display: flex;
  gap: 0;
  border-bottom: 1px solid rgba(255,255,255,.08);
  padding: 0 20px;
  flex-shrink: 0;
  background: var(--bg);
}
.pdTab{
  background: none;
  border: none;
  color: rgba(255,255,255,.45);
  font-size: 14px;
  font-weight: 700;
  padding: 12px 16px;
  cursor: pointer;
  position: relative;
  transition: color .2s ease;
}
.pdTab::after{
  content: "";
  position: absolute;
  bottom: -1px;
  left: 16px;
  right: 16px;
  height: 2px;
  border-radius: 1px;
  background: transparent;
  transition: background .2s ease;
}
.pdTabActive{
  color: #fff;
}
.pdTabActive::after{
  background: #fff;
}

/* ── Tab body ── */
.pdTabBody{
  padding: 0;
  flex: 1;
  overflow-y: scroll;
  -webkit-overflow-scrolling: touch;
  min-height: 0;
}

/* ── Song list rows ── */
.pdSongList{
  padding: 8px 16px;
  padding-bottom: calc(var(--dock-h, 160px) + 16px);
}
.pdSongRow{
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 4px;
  cursor: pointer;
  border-radius: 8px;
  transition: background .15s ease;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
}
.pdSongRow:hover{ background: rgba(255,255,255,.04); }
.pdSongRow:active{ background: rgba(255,255,255,.06); }

.pdSongNum{
  width: 22px;
  text-align: center;
  font-size: 14px;
  font-weight: 600;
  color: rgba(255,255,255,.35);
  flex-shrink: 0;
}

/* ── Placeholder for under-construction tabs ── */
.pdPlaceholder{
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 60px 20px;
  text-align: center;
  gap: 8px;
}
.pdPlaceholderIcon{
  margin-bottom: 4px;
}
.pdPlaceholderTitle{
  font-size: 18px;
  font-weight: 800;
  color: rgba(255,255,255,.35);
}
.pdPlaceholderSub{
  font-size: 13px;
  color: rgba(255,255,255,.2);
}

/* ── Song detail FAB ── */
.sdFab{
  position: fixed;
  bottom: calc(var(--dock-h, 80px) + 24px);
  right: 20px;
  z-index: 30;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: #a855f7;
  color: #fff;
  border: none;
  display: grid;
  place-items: center;
  cursor: pointer;
  box-shadow: 0 4px 20px rgba(168,85,247,.4), 0 2px 8px rgba(0,0,0,.3);
  transition: transform .15s ease, box-shadow .15s ease;
}
.sdFab:active{ transform: scale(.9); }
.sdFab svg{ pointer-events: none; }

/* ── Active version checkmark in song detail rows ── */
.sdVersionSub{
  display: flex;
  align-items: center;
  gap: 4px;
}
.sdActiveCheck{
  flex-shrink: 0;
}

/* ── Sync debug dots ── */
.syncDot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
  margin-right: 4px;
  vertical-align: middle;
  box-shadow: 0 0 4px currentColor;
}
.syncDot--green  { background: #4ade80; color: #4ade80; }
.syncDot--yellow { background: #facc15; color: #facc15; }
.syncDot--red    { background: #f87171; color: #f87171; }

/* ── Settings (iOS-style) ─────────────────────────── */
.setPage { padding: 0 2px 100px; }
.setPageTitle {
  font-size: 34px; font-weight: 700; letter-spacing: -0.2px;
  color: rgba(255,255,255,.85); padding: 24px 0 16px;
}
.setSection { margin-bottom: 28px; }
.setSectionLabel {
  font-size: 13px; font-weight: 600; letter-spacing: 0.4px;
  text-transform: uppercase; color: rgba(255,255,255,.35);
  padding: 0 4px 8px;
}
.setGroup {
  background: rgba(255,255,255,.04);
  border-radius: 14px;
  overflow: hidden;
}
.setRow {
  display: flex; align-items: center; gap: 12px;
  padding: 14px 16px; min-height: 48px;
  cursor: pointer; -webkit-tap-highlight-color: transparent;
  transition: background .15s;
}
.setRow:active { background: rgba(255,255,255,.06); }
.setRow + .setRow { border-top: 1px solid rgba(255,255,255,.06); }
.setRowIcon {
  width: 30px; height: 30px; border-radius: 7px;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.setRowIcon svg { width: 18px; height: 18px; }
.setRowLabel { flex: 1; font-size: 15px; font-weight: 500; color: #fff; }
.setRowValue {
  font-size: 14px; color: rgba(255,255,255,.35); font-weight: 400;
  max-width: 140px; text-align: right; overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap;
}
.setRowChev {
  width: 14px; height: 14px; flex-shrink: 0;
  color: rgba(255,255,255,.2);
}
.setRowChev svg { width: 14px; height: 14px; }
/* Danger row */
.setRow.setDanger .setRowLabel { color: #f87171; }
/* Tinted icon backgrounds */
.setIconTeal    { background: rgba(78,205,196,.15); color: #4ecdc4; }
.setIconAmber   { background: rgba(255,184,77,.15); color: #ffb84d; }
.setIconPurple  { background: rgba(167,139,250,.15); color: #a78bfa; }
.setIconBlue    { background: rgba(96,165,250,.15); color: #60a5fa; }
.setIconRed     { background: rgba(248,113,113,.15); color: #f87171; }
.setIconGray    { background: rgba(160,160,160,.12); color: #999; }
.setIconGreen   { background: rgba(74,222,128,.15); color: #4ade80; }

/* Sub-screen content */
.setContent { padding: 0; }
.setContent .setSection:first-child { margin-top: 8px; }
.setBtn {
  display: flex; align-items: center; justify-content: center;
  width: 100%; padding: 14px 16px; border-radius: 12px;
  font-size: 15px; font-weight: 600; border: none;
  cursor: pointer; transition: opacity .15s;
  -webkit-tap-highlight-color: transparent;
}
.setBtn:active { opacity: .7; }
.setBtnTeal  { background: rgba(78,205,196,.1); color: #4ecdc4; }
.setBtnAmber { background: rgba(255,184,77,.1); color: #ffb84d; }
.setBtnRed   { background: rgba(248,113,113,.1); color: #f87171; }
.setBtnGray  { background: rgba(160,160,160,.08); color: #999; }
.setDesc {
  font-size: 13px; color: rgba(255,255,255,.35);
  padding: 6px 4px 0; line-height: 1.5;
}
/* Settings input fields */
.setInput {
  width: 100%; padding: 12px 16px; border-radius: 10px;
  background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.08);
  color: #fff; font-size: 15px; font-weight: 400;
  outline: none; -webkit-appearance: none;
}
.setInput:focus { border-color: rgba(78,205,196,.4); }
.setInputLabel {
  font-size: 13px; font-weight: 600; color: rgba(255,255,255,.5);
  padding: 0 4px 6px;
}
.setInputGroup { margin-bottom: 14px; }
/* Status badge in row */
.setStatusBadge {
  font-size: 11px; font-weight: 700; padding: 2px 8px;
  border-radius: 6px;
}

/* ── Bulk Import ─────────────────────────────────── */
.biFooter {
  position: fixed; left: 0; right: 0; bottom: 0;
  padding: 16px 16px calc(16px + var(--dock-h, 70px));
  background: linear-gradient(transparent, var(--bg, #0d0d0f) 30%);
  z-index: 50;
}
/* Import queue sections */
.biSection { margin-bottom: 20px; }
.biSectionHeader {
  display: flex; align-items: center; gap: 8px;
  padding: 0 2px 10px;
}
.biSectionLabel {
  font-size: 14px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .04em;
}
.biSectionCount {
  font-size: 12px; font-weight: 600;
  padding: 2px 8px; border-radius: 10px;
  line-height: 1.2;
}
.biSectionReview .biSectionLabel { color: rgba(255,255,255,.45); }
.biSectionReview .biSectionCount {
  background: rgba(255,255,255,.08); color: rgba(255,255,255,.4);
}
.biSectionReady .biSectionLabel { color: #4ecdc4; }
.biSectionReady .biSectionCount {
  background: rgba(78,205,196,.12); color: #4ecdc4;
}
.biImportBtn {
  width: 100%; padding: 16px; border: none; border-radius: 14px;
  background: rgba(78,205,196,.12); color: #4ecdc4;
  font-size: 17px; font-weight: 700; letter-spacing: -0.2px;
  cursor: pointer; -webkit-tap-highlight-color: transparent;
}
.biImportBtn:active { opacity: .7; }
/* Bulk edit modal (centered, iOS notification style) */
.biModalBackdrop {
  position: fixed; inset: 0; z-index: 99990;
  background: rgba(0,0,0,.55); opacity: 0;
  transition: opacity .2s ease;
}
.biModalBackdrop.open { opacity: 1; }
.biModal {
  position: fixed; z-index: 99991;
  left: 16px; right: 16px;
  top: 50%; transform: translateY(-50%) scale(.92);
  max-height: 80vh; max-height: 80dvh;
  overflow-y: auto; -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  background: #1a1a1e; border-radius: 20px;
  opacity: 0; transition: opacity .2s ease, transform .25s ease;
}
.biModal.open { opacity: 1; transform: translateY(-50%) scale(1); }
.biModalHeader {
  padding: 20px 20px 12px; text-align: center;
}
.biModalTitle {
  font-size: 17px; font-weight: 700; color: #fff;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.biModalSub { font-size: 13px; color: rgba(255,255,255,.35); margin-top: 2px; }
.biModalBody { padding: 0 20px; }
.biField { margin-bottom: 16px; }
.biFieldLabel {
  font-size: 13px; font-weight: 600; color: rgba(255,255,255,.5);
  margin-bottom: 6px;
}
.biModalActions {
  display: flex; gap: 10px; padding: 16px 20px 20px;
}
.biModalBtn {
  flex: 1; padding: 14px; border: none; border-radius: 12px;
  font-size: 15px; font-weight: 600; cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.biModalBtn:active { opacity: .7; }
.biModalRemove { background: rgba(248,113,113,.1); color: #f87171; }
.biModalNext { background: rgba(255,255,255,.08); color: rgba(255,255,255,.6); }
.biModalDone { flex: 2; background: rgba(78,205,196,.12); color: #4ecdc4; }
.biModalDone:disabled { opacity: .35; pointer-events: none; }
/* Selected project card in bulk import — teal border */
.coProjCard.biProjSelected {
  border-color: #4ecdc4;
  background: rgba(78,205,196,.1);
}
/* Duplicate match rows */
.dupMatchRow {
  padding: 12px 20px; cursor: pointer;
  border-bottom: 1px solid rgba(255,255,255,.04);
  -webkit-tap-highlight-color: transparent;
}
.dupMatchRow:active { background: rgba(255,255,255,.04); }
.dupMatchTitle {
  font-size: 15px; font-weight: 600; color: #4ecdc4;
  text-decoration: underline; text-decoration-color: rgba(78,205,196,.3);
}
.dupMatchSub { font-size: 12px; color: rgba(255,255,255,.35); margin-top: 2px; }
/* Duplicate warning banner in bulk edit / create */
.dupWarnBanner {
  background: rgba(251,191,36,.08); border: 1px solid rgba(251,191,36,.2);
  border-radius: 10px; padding: 10px 14px; margin-top: 8px;
  font-size: 13px; color: #fbbf24; line-height: 1.4;
}
.dupWarnBanner a {
  color: #4ecdc4; text-decoration: underline; cursor: pointer;
  text-decoration-color: rgba(78,205,196,.3);
}
/* Song picker button */
.biPickSongBtn {
  width: 100%; padding: 12px 16px; border-radius: 10px;
  background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.08);
  color: rgba(255,255,255,.35); font-size: 14px; text-align: left;
  cursor: pointer; -webkit-tap-highlight-color: transparent;
}
.biPickSongBtn:active { background: rgba(255,255,255,.07); }
.biPickedSong {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 16px; border-radius: 10px;
  background: rgba(78,205,196,.08); border: 1px solid rgba(78,205,196,.2);
  color: #fff; font-size: 14px; font-weight: 500;
}
.biPickedClear {
  background: none; border: none; color: rgba(255,255,255,.4);
  font-size: 20px; padding: 0 0 0 12px; cursor: pointer;
  line-height: 1;
}
/* Song picker popup (inside modal) */
.biSongPopup {
  position: absolute; inset: 0; z-index: 5;
  background: #1a1a1e; border-radius: 20px;
  display: flex; flex-direction: column;
}
.biSongPopupHeader { padding: 16px 16px 8px; }
.biSongPopupList {
  flex: 1; overflow-y: auto; padding: 0 8px;
  min-height: 0;
}
.biSongPopupRow {
  padding: 12px 12px; border-radius: 10px;
  cursor: pointer; -webkit-tap-highlight-color: transparent;
}
.biSongPopupRow:active { background: rgba(255,255,255,.06); }
.biSongPopupTitle { font-size: 15px; font-weight: 600; color: #fff; }
.biSongPopupMeta { font-size: 12px; color: rgba(255,255,255,.35); margin-top: 2px; }
.biSongPopupCancel {
  margin: 8px 16px 16px; padding: 12px; border: none; border-radius: 12px;
  background: rgba(255,255,255,.06); color: rgba(255,255,255,.5);
  font-size: 15px; font-weight: 600; cursor: pointer;
}

.coBulkBtn {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  width: 100%; margin-top: 10px; padding: 14px;
  border: 1px dashed rgba(255,255,255,.12); border-radius: 14px;
  background: transparent; color: rgba(255,255,255,.4);
  font-size: 15px; font-weight: 600; cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.coBulkBtn:active { background: rgba(255,255,255,.04); }

/* ── Auth Screen ─────────────────────────────────── */
.authScreen {
  position: fixed;
  left: 0; right: 0;
  top: 0; bottom: 0;
  z-index: 99999;
  background: var(--bg);
  display: flex; align-items: flex-start; justify-content: center;
  padding: 24px;
  padding-top: max(env(safe-area-inset-top), 20px);
  transition: opacity .3s ease;
  overflow: hidden;
  touch-action: none;
  overscroll-behavior: none;
}
.authScreen.authFadeOut { opacity: 0; pointer-events: none; }

.authCard {
  width: 100%; max-width: 380px;
  display: flex; flex-direction: column; gap: 20px;
  align-items: center;
  margin-top: auto; margin-bottom: auto;
}

.authSalWrap {
  display: flex; justify-content: center;
}

.authLogo {
  font-family: 'Montserrat', sans-serif;
  font-weight: 900; font-size: 36px;
  text-align: center;
  background: linear-gradient(135deg, #a78bfa, #f472b6);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
  background-clip: text;
}

.authToggle {
  display: flex; gap: 0; width: 100%;
  background: var(--panel); border-radius: var(--rPill);
  padding: 4px; overflow: hidden;
}
.authToggleBtn {
  flex: 1; padding: 10px 0;
  background: none; border: none; color: var(--muted);
  font-family: 'Montserrat', sans-serif;
  font-weight: 700; font-size: 14px;
  border-radius: var(--rPill); cursor: pointer;
  transition: all .2s ease;
}
.authToggleBtn.active {
  background: rgba(255,255,255,.12); color: var(--text);
}

#authForm {
  display: flex; flex-direction: column; gap: 14px;
  width: 100%;
}
#authForm input {
  width: 100%; padding: 14px 16px;
  background: var(--panel); border: 1px solid var(--line);
  border-radius: 12px; color: var(--text);
  font-family: 'Montserrat', sans-serif;
  font-size: 15px; font-weight: 500;
  outline: none; transition: border-color .2s;
  box-sizing: border-box;
}
#authForm input::placeholder { color: var(--muted); }
#authForm input:focus { border-color: #a78bfa; }

/* Password field wrapper with eye toggle */
.authPassWrap {
  position: relative; width: 100%;
}
.authPassWrap input {
  padding-right: 48px;
}
.authPassMasked {
  -webkit-text-security: disc;
  text-security: disc;
}
.authEyeBtn {
  position: absolute; right: 8px; top: 50%; transform: translateY(-50%);
  background: none; border: none; padding: 8px;
  color: var(--muted); cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: color .2s;
}
.authEyeBtn:active { color: var(--text); }
.authEyeBtn svg { width: 20px; height: 20px; }
.authEyeBtn .authEyeClosed { display: none; }
.authEyeBtn.showing .authEyeOpen { display: none; }
.authEyeBtn.showing .authEyeClosed { display: block; }

.authInlineLink {
  background: none; border: none; padding: 0;
  color: #a78bfa; font-family: 'Montserrat', sans-serif;
  font-size: 13px; font-weight: 700;
  cursor: pointer; text-decoration: underline;
}

.authError {
  font-size: 13px; color: #f87171;
  min-height: 18px; text-align: center;
  font-family: 'Montserrat', sans-serif;
}

.authSubmitBtn {
  width: 100%; padding: 14px 0;
  background: linear-gradient(135deg, #a78bfa, #f472b6);
  border: none; border-radius: var(--rPill);
  color: #fff; font-family: 'Montserrat', sans-serif;
  font-weight: 800; font-size: 16px;
  cursor: pointer; transition: opacity .2s;
}
.authSubmitBtn:disabled { opacity: .5; cursor: not-allowed; }
.authSubmitBtn:active:not(:disabled) { opacity: .8; }

/* OTP verification */
.authOtpHint {
  font-family: 'Montserrat', sans-serif;
  font-size: 14px; color: var(--muted);
  text-align: center; line-height: 1.6;
}
.authOtpHint strong { color: var(--text); }

.authOtpRow {
  display: flex; gap: 8px; justify-content: center;
}
.authOtpDigit {
  width: 46px; height: 56px;
  background: var(--panel); border: 1px solid var(--line);
  border-radius: 12px; color: var(--text);
  font-family: 'Montserrat', sans-serif;
  font-size: 24px; font-weight: 700;
  text-align: center; outline: none;
  transition: border-color .2s;
  -webkit-appearance: none;
}
.authOtpDigit:focus { border-color: #a78bfa; }

.authOtpLinks {
  display: flex; gap: 20px; justify-content: center;
}
.authLinkBtn {
  background: none; border: none;
  color: var(--muted); font-family: 'Montserrat', sans-serif;
  font-size: 14px; font-weight: 600;
  cursor: pointer; transition: color .2s;
}
.authLinkBtn:active { color: var(--text); }

/* ── Profile Setup ──────────────────────────────── */
.profileSetup {
  position: fixed;
  inset: 0;
  z-index: 99998;
  background: linear-gradient(180deg, #0d0e12 0%, #1a0a2e 50%, #0d0e12 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  touch-action: none;
  overscroll-behavior: none;
  opacity: 0;
  transition: opacity .3s ease;
}
.profileSetup.open { opacity: 1; }

.profileSetupInner {
  width: 100%;
  max-width: 400px;
  padding: 0 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}

.profileSetupSal {
  filter: drop-shadow(0 8px 32px rgba(168,85,247,0.3));
  margin-bottom: 8px;
}
.profileSetupTitle {
  font-family: 'Montserrat', sans-serif;
  font-weight: 900;
  font-size: 28px;
  text-align: center;
  background: linear-gradient(135deg, #a78bfa, #f472b6);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.profileSetupSub {
  font-family: 'Montserrat', sans-serif;
  font-size: 14px;
  color: rgba(255,255,255,.45);
  text-align: center;
  margin-bottom: 16px;
}

.profileSetupForm {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.profileSetupRow {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.profileSetupField {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.profileSetupLabel {
  font-family: 'Montserrat', sans-serif;
  font-weight: 700;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .6px;
  color: rgba(255,255,255,.4);
  padding-left: 2px;
}
.profileSetupInput {
  width: 100%;
  padding: 14px 16px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 12px;
  color: var(--text);
  font-family: 'Montserrat', sans-serif;
  font-size: 15px;
  font-weight: 500;
  outline: none;
  transition: border-color .2s;
  box-sizing: border-box;
}
.profileSetupInput::placeholder {
  color: rgba(255,255,255,.25);
}
.profileSetupInput:focus {
  border-color: rgba(167, 139, 250, .5);
}

/* Username @ prefix */
.profileSetupInputWrap {
  position: relative;
}
.profileSetupAt {
  position: absolute;
  left: 16px;
  top: 50%;
  transform: translateY(-50%);
  color: rgba(167, 139, 250, .6);
  font-family: 'Montserrat', sans-serif;
  font-weight: 700;
  font-size: 15px;
  pointer-events: none;
  z-index: 1;
}
.profileSetupInputAt {
  padding-left: 36px !important;
}

/* Avatar picker */
.psAvatarPicker {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  margin-bottom: 8px;
  -webkit-tap-highlight-color: transparent;
}
.psAvatarPreview {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: rgba(255,255,255,.06);
  border: 2px dashed rgba(255,255,255,.15);
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(255,255,255,.3);
  overflow: hidden;
  transition: border-color .2s;
}
.psAvatarPreview.hasImg {
  border-style: solid;
  border-color: rgba(167, 139, 250, .4);
}
.psAvatarPreview img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.psAvatarLabel {
  font-family: 'Montserrat', sans-serif;
  font-size: 12px;
  font-weight: 600;
  color: rgba(167, 139, 250, .7);
}

/* Username availability status */
.psUsernameStatus {
  font-family: 'Montserrat', sans-serif;
  font-size: 13px;
  font-weight: 600;
  min-height: 20px;
  margin-top: 6px;
  padding-left: 2px;
  transition: color .2s;
}
.psUsernameStatus.checking { color: rgba(255,255,255,.35); }
.psUsernameStatus.available { color: #22c55e; }
.psUsernameStatus.taken { color: #f87171; }
.psUsernameStatus.existing { color: #fbbf24; }

/* Duplicate name validation status (create forms) */
.coDupeStatus {
  font-size: 12px;
  font-weight: 600;
  min-height: 0;
  padding-left: 2px;
  margin-top: 4px;
  transition: color .2s;
  color: transparent;
}
.coDupeStatus.taken { color: #f87171; min-height: 18px; }
.coCreateBtn:disabled, .sheetBtn.primary:disabled {
  opacity: 0.35;
  pointer-events: none;
}

/* Submit button — matches authSubmitBtn */
.profileSetupBtn {
  width: 100%;
  padding: 16px 0;
  margin-top: 24px;
  background: linear-gradient(135deg, #a78bfa, #f472b6);
  border: none;
  border-radius: 999px;
  color: #fff;
  font-family: 'Montserrat', sans-serif;
  font-weight: 800;
  font-size: 16px;
  letter-spacing: .5px;
  cursor: pointer;
  transition: opacity .2s, transform .12s;
  box-shadow: 0 4px 24px rgba(168,85,247,0.35);
}
.profileSetupBtn:active:not(:disabled) {
  transform: scale(0.97);
  opacity: .85;
}
.profileSetupBtn:disabled {
  opacity: .35;
  cursor: not-allowed;
  box-shadow: none;
}
.profileSetupSkip {
  background: none;
  border: none;
  color: rgba(255,255,255,.35);
  font-family: 'Montserrat', sans-serif;
  font-weight: 600;
  font-size: 14px;
  cursor: pointer;
  padding: 12px 20px;
  transition: color .2s;
}
.profileSetupSkip:active { color: rgba(255,255,255,.55); }

@keyframes psAvatarBounceIn {
  0%   { transform: scale(0) rotate(-15deg); opacity: 0; }
  60%  { transform: scale(1.15) rotate(5deg); opacity: 1; }
  100% { transform: scale(1) rotate(0deg); opacity: 1; }
}

/* ── Sync Splash ─────────────────────────────────── */

.syncSplash {
  position: fixed; inset: 0;
  z-index: 99998;
  background: var(--bg);
  display: flex; align-items: center; justify-content: center;
  animation: syncSplashIn .4s ease both;
}
.syncSplashInner {
  display: flex; flex-direction: column; align-items: center;
  gap: 18px;
  text-align: center;
}
.syncSplashSal {
  margin-bottom: 4px;
}
.syncSplashTitle {
  font-family: 'Montserrat', sans-serif;
  font-size: 34px;
  font-weight: 900;
  letter-spacing: -1.5px;
  color: #fff;
}
.syncSplashSub {
  display: flex; align-items: center; justify-content: center; gap: 2px;
}
.syncSplashText {
  font-family: 'Montserrat', sans-serif;
  font-size: 14px;
  font-weight: 500;
  color: rgba(255,255,255,.45);
  letter-spacing: 0.3px;
}
.syncSplash .splashEllipsis {
  display: inline-flex;
}
.syncSplashOut {
  animation: syncSplashFade .4s ease both;
}
@keyframes syncSplashIn {
  from { opacity: 0; }
  to { opacity: 1; }
}
@keyframes syncSplashFade {
  from { opacity: 1; }
  to { opacity: 0; pointer-events: none; }
}

/* ── Sal Import Flow ──────────────────────────────── */

/* Shared full-screen overlay base */
.salImportOffer,
.salImportScreen {
  position: fixed; inset: 0;
  z-index: 99998;
  background: var(--bg);
  display: flex; align-items: center; justify-content: center;
  padding: 24px;
  padding-top: max(env(safe-area-inset-top), 20px);
  transition: opacity .3s ease;
}
.salImportOffer.salImportFadeOut,
.salImportScreen.salImportFadeOut {
  opacity: 0; pointer-events: none;
}

/* Offer card */
.salImportOfferCard {
  width: 100%; max-width: 380px;
  display: flex; flex-direction: column; gap: 20px;
  align-items: center; text-align: center;
}
.salImportOfferSal { display: flex; justify-content: center; }
.salImportOfferMsg {
  font-family: 'Montserrat', sans-serif;
  font-size: 16px; font-weight: 500;
  color: rgba(255,255,255,.7);
  line-height: 1.7; max-width: 320px;
}
.salImportOfferMsg strong { color: #fff; font-weight: 800; }

/* Primary button (reuses auth gradient) */
.salImportBtn {
  width: 100%; max-width: 320px; padding: 14px 0;
  background: linear-gradient(135deg, #a78bfa, #f472b6);
  border: none; border-radius: var(--rPill);
  color: #fff; font-family: 'Montserrat', sans-serif;
  font-weight: 800; font-size: 16px;
  cursor: pointer; transition: opacity .2s;
}
.salImportBtn:active { opacity: .8; }

/* Skip / ghost button */
.salImportSkipBtn {
  background: none; border: none;
  color: var(--muted); font-family: 'Montserrat', sans-serif;
  font-size: 14px; font-weight: 600;
  cursor: pointer; transition: color .2s;
}
.salImportSkipBtn:active { color: var(--text); }

/* Import progress screen */
.salImportCard {
  width: 100%; max-width: 400px;
  display: flex; flex-direction: column; gap: 16px;
  align-items: center;
}
.salImportSalWrap { display: flex; justify-content: center; }
.salImportProgress {
  font-family: 'Montserrat', sans-serif;
  font-size: 15px; font-weight: 600;
  color: rgba(255,255,255,.7); text-align: center;
}

/* Scrollable song list during import */
.salImportList {
  width: 100%;
  max-height: 340px;
  overflow-y: auto;
  display: flex; flex-direction: column; gap: 8px;
  -webkit-overflow-scrolling: touch;
}

/* Individual song row */
.salImportItem {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 14px;
  background: var(--panel);
  border-radius: 12px;
  animation: salItemIn .3s ease both;
}
@keyframes salItemIn {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: translateY(0); }
}

.salImportArt {
  width: 44px; height: 44px; min-width: 44px;
  border-radius: 8px; overflow: hidden;
}
.salImportArt svg { width: 100%; height: 100%; display: block; }

.salImportMeta { flex: 1; min-width: 0; }
.salImportTitle {
  font-family: 'Montserrat', sans-serif;
  font-size: 14px; font-weight: 700; color: #fff;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.salImportSub {
  font-family: 'Montserrat', sans-serif;
  font-size: 12px; font-weight: 500; color: var(--muted);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* Status icons */
.salImportStatus { width: 22px; height: 22px; min-width: 22px; }

.salImportSpinner {
  border: 2.5px solid rgba(255,255,255,.15);
  border-top-color: #a78bfa;
  border-radius: 50%;
  animation: salSpin .8s linear infinite;
}
@keyframes salSpin { to { transform: rotate(360deg); } }

.salImportCheck {
  position: relative;
}
.salImportCheck::after {
  content: "✓";
  display: flex; align-items: center; justify-content: center;
  width: 22px; height: 22px;
  color: #22c55e; font-size: 16px; font-weight: 900;
}

.salImportFail {
  position: relative;
}
.salImportFail::after {
  content: "✗";
  display: flex; align-items: center; justify-content: center;
  width: 22px; height: 22px;
  color: #f87171; font-size: 16px; font-weight: 900;
}

/* Overall progress bar */
.salImportOverallBar {
  width: 100%; height: 4px;
  background: rgba(255,255,255,.08);
  border-radius: 2px; overflow: hidden;
}
.salImportOverallFill {
  height: 100%; width: 0;
  background: linear-gradient(90deg, #a78bfa, #f472b6);
  border-radius: 2px;
  transition: width .4s ease;
}

/* Retry screen */
.salRetryList {
  width: 100%;
  max-height: 280px;
  overflow-y: auto;
  display: flex; flex-direction: column; gap: 8px;
  -webkit-overflow-scrolling: touch;
}
.salRetryItem {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 14px;
  background: var(--panel);
  border-radius: 12px;
  transition: opacity .3s;
}
.salRetryItem.salRetryDone { opacity: .5; }

.salRetryActions { display: flex; gap: 8px; }
.salRetryBtn {
  padding: 6px 14px;
  background: rgba(255,255,255,.1);
  border: none; border-radius: var(--rPill);
  color: #fff; font-family: 'Montserrat', sans-serif;
  font-size: 12px; font-weight: 700;
  cursor: pointer; transition: opacity .2s;
}
.salRetryBtn:active { opacity: .7; }
.salRetryBtn:disabled { opacity: .4; cursor: not-allowed; }
.salRetryBtnDanger { color: #f87171; }

/* ── Sal idle animations ──────────────────────────── */
.salIdle { display: inline-block; }

.salBounce {
  animation: salBounceKf 1.5s ease infinite;
}
@keyframes salBounceKf {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-8px); }
}

.salSpin {
  animation: salSpinKf 3s linear infinite;
}
@keyframes salSpinKf { to { transform: rotate(360deg); } }

.salSlide {
  animation: salSlideKf 2s ease infinite alternate;
}
@keyframes salSlideKf {
  0% { transform: translateX(-20px); }
  100% { transform: translateX(20px); }
}

.salPeek {
  animation: salPeekKf 1.8s ease infinite;
}
@keyframes salPeekKf {
  0%, 100% { transform: scale(1) rotate(0deg); }
  30% { transform: scale(0.85) rotate(-8deg); }
  60% { transform: scale(1.05) rotate(4deg); }
}

/* ── Profile Tab ──────────────────────────────────── */
.profileWrap {
  padding: 0 16px calc(var(--dock-h, 160px) + 16px);
  display: flex; flex-direction: column; gap: 28px;
}

/* Hero: avatar left, name right — Spotify style */
.profHero {
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 20px 0 0;
}
.profHeroAvatar { flex-shrink: 0; }
.profHeroImg {
  width: 100px; height: 100px;
  border-radius: 50%;
  object-fit: cover;
  display: block;
  border: 2px solid rgba(255,255,255,.08);
}
.profHeroFallback {
  width: 100px; height: 100px;
  border-radius: 50%;
  background: linear-gradient(135deg, #a78bfa, #f472b6);
  display: flex; align-items: center; justify-content: center;
  font-family: 'Montserrat', sans-serif;
  font-weight: 900; font-size: 40px; color: #fff;
}
.profHeroInfo { min-width: 0; }
.profHeroName {
  font-family: 'Montserrat', sans-serif;
  font-weight: 900; font-size: 24px;
  color: var(--text);
  letter-spacing: -.3px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.profHeroStats {
  font-family: 'Montserrat', sans-serif;
  font-size: 13px; font-weight: 500;
  color: var(--muted);
  margin-top: 4px;
}

/* Action buttons row */
.profActions {
  display: flex;
  align-items: center;
  gap: 12px;
}
.profActionBtn {
  padding: 8px 20px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.2);
  background: none;
  color: var(--text);
  font-family: 'Montserrat', sans-serif;
  font-weight: 700; font-size: 13px;
  cursor: pointer;
  transition: background .15s;
}
.profActionBtn:active { background: rgba(255,255,255,.08); }
.profActionIcon {
  width: 36px; height: 36px;
  border-radius: 50%;
  border: none;
  background: none;
  color: rgba(255,255,255,.5);
  display: grid; place-items: center;
  cursor: pointer;
}
.profActionIcon:active { color: var(--text); }

/* Nav icon profile image */
.profileNavIcon { position: relative; }
.profileNavImg {
  width: 24px; height: 24px;
  border-radius: 50%;
  object-fit: cover;
  display: block;
  border: 1.5px solid rgba(255,255,255,.2);
}
.profileNavBtn.active .profileNavImg {
  border-color: rgba(255,255,255,.6);
}

/* Sections */
.profileSection {
  display: flex; flex-direction: column; gap: 10px;
}
.profileSectionTitle {
  font-family: 'Montserrat', sans-serif;
  font-weight: 800; font-size: 18px;
  color: var(--text);
  letter-spacing: -.2px;
  padding-left: 2px;
}

/* Detail rows — like playlist/song rows */
.profDetailList {
  display: flex; flex-direction: column; gap: 2px;
}
.profDetailRow {
  display: grid;
  grid-template-columns: 44px 1fr;
  gap: 12px;
  align-items: center;
  padding: 10px 4px;
  border-radius: 10px;
}
.profDetailIcon {
  width: 44px; height: 44px;
  border-radius: 8px;
  background: rgba(255,255,255,.06);
  display: flex; align-items: center; justify-content: center;
  color: #a78bfa;
  flex-shrink: 0;
}
.profDetailInfo { min-width: 0; }
.profDetailValue {
  font-family: 'Montserrat', sans-serif;
  font-weight: 600; font-size: 15px;
  color: var(--text);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.profDetailLabel {
  font-family: 'Montserrat', sans-serif;
  font-size: 12.5px; font-weight: 500;
  color: var(--muted);
  margin-top: 1px;
}
.profDetailEmpty {
  font-size: 14px; color: var(--muted);
  padding: 12px 4px; font-weight: 500;
}

/* Account choices */
.profileChoice {
  display: flex; flex-direction: column; gap: 2px;
  padding: 14px 16px;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 12px;
  color: var(--text);
  font-family: 'Montserrat', sans-serif;
  font-weight: 700; font-size: 14px;
  text-align: left;
  cursor: pointer;
  transition: background .15s;
  width: 100%;
}
.profileChoice:active { background: rgba(255,255,255,.08); }
.profileChoice .sub {
  font-weight: 500; font-size: 12px;
  color: var(--muted);
}

/* ── Edit Profile Overlay ── */
.profEditOverlay {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: var(--bg);
  display: flex;
  flex-direction: column;
  opacity: 0;
  transform: translateY(100%);
  transition: opacity .3s ease, transform .3s cubic-bezier(.25,.46,.45,.94);
}
.profEditOverlay.open {
  opacity: 1;
  transform: translateY(0);
}

.profEditHeader {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px;
  padding-top: calc(env(safe-area-inset-top, 14px) + 10px);
  border-bottom: 1px solid rgba(255,255,255,.08);
}
.profEditCancel {
  background: none; border: none;
  color: var(--muted);
  font-family: 'Montserrat', sans-serif;
  font-weight: 600; font-size: 15px;
  cursor: pointer;
}
.profEditTitle {
  font-family: 'Montserrat', sans-serif;
  font-weight: 800; font-size: 17px;
  color: var(--text);
}
.profEditSave {
  background: none; border: none;
  color: #a78bfa;
  font-family: 'Montserrat', sans-serif;
  font-weight: 800; font-size: 15px;
  cursor: pointer;
}
.profEditSave:disabled { opacity: .4; }

.profEditBody {
  flex: 1;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 24px 20px calc(env(safe-area-inset-bottom, 20px) + 24px);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
}

/* Edit avatar */
.profEditAvatarBtn {
  position: relative;
  width: 110px; height: 110px;
  border-radius: 50%;
  background: none; border: none;
  cursor: pointer; padding: 0;
  -webkit-tap-highlight-color: transparent;
}
.profEditAvatarImg {
  width: 110px; height: 110px;
  border-radius: 50%;
  object-fit: cover;
  display: block;
}
.profEditAvatarFallback {
  width: 110px; height: 110px;
  border-radius: 50%;
  background: linear-gradient(135deg, #a78bfa, #f472b6);
  display: flex; align-items: center; justify-content: center;
  font-family: 'Montserrat', sans-serif;
  font-weight: 900; font-size: 42px; color: #fff;
}
.profEditAvatarBadge {
  position: absolute;
  bottom: 2px; right: 2px;
  width: 32px; height: 32px;
  border-radius: 50%;
  background: #fff;
  color: #0b0b0f;
  display: flex; align-items: center; justify-content: center;
  border: 2px solid var(--bg);
}

/* Edit fields */
.profEditFields {
  width: 100%;
  display: flex; flex-direction: column;
  gap: 0;
}
.profEditField {
  display: flex; flex-direction: column;
  padding: 14px 0;
  border-bottom: 1px solid rgba(255,255,255,.06);
}
.profEditLabel {
  font-family: 'Montserrat', sans-serif;
  font-weight: 700; font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .5px;
  color: rgba(255,255,255,.35);
  margin-bottom: 6px;
}
.profEditInput {
  width: 100%;
  padding: 0;
  background: none;
  border: none;
  color: var(--text);
  font-family: 'Montserrat', sans-serif;
  font-size: 16px; font-weight: 500;
  outline: none;
  box-sizing: border-box;
}
.profEditInput::placeholder { color: rgba(255,255,255,.2); }
.profEditTextarea {
  resize: none;
  line-height: 1.5;
  font-size: 15px;
}

/* ── Collab Tab ──────────────────────────────────── */
.collabWrap {
  padding: 0 0 120px;
  display: flex; flex-direction: column; gap: 28px;
}
.collabWrap .playerHead {
  padding: 0;
}
.collabSection { display: flex; flex-direction: column; gap: 12px; padding: 0 2px; }
.collabSectionTitle {
  font-family: 'Montserrat', sans-serif;
  font-weight: 800; font-size: 18px;
  color: var(--text); letter-spacing: -0.3px;
}

/* Invite card */
.collabInviteCard {
  background: var(--panel2);
  border-radius: 16px;
  padding: 18px;
  display: flex; flex-direction: column; gap: 14px;
}
.collabInviteDesc {
  font-size: 14px; color: var(--muted); line-height: 1.5;
}
.collabInviteRow {
  display: flex; gap: 10px; align-items: center;
}
.collabProjectPick {
  flex: 1; padding: 10px 12px;
  background: var(--panel); border: 1px solid var(--line);
  border-radius: 10px; color: var(--text);
  font-family: 'Montserrat', sans-serif;
  font-size: 13px; font-weight: 600;
  outline: none; -webkit-appearance: none;
  appearance: none;
}
.collabInviteBtn {
  display: flex; align-items: center; gap: 6px;
  padding: 10px 16px;
  background: linear-gradient(135deg, #a78bfa, #f472b6);
  border: none; border-radius: 999px;
  color: #fff; font-family: 'Montserrat', sans-serif;
  font-weight: 700; font-size: 13px;
  white-space: nowrap; cursor: pointer;
  transition: opacity .2s;
}
.collabInviteBtn:active { opacity: .8; }

/* Collaborator rows */
.collabRow {
  display: flex; align-items: center; gap: 14px;
  padding: 12px 14px;
  background: var(--panel);
  border-radius: 14px;
  cursor: pointer;
  transition: background .15s;
}
.collabRow:active { background: var(--panel2); }
.collabAvatar {
  width: 40px; height: 40px;
  background: linear-gradient(135deg, #a78bfa, #f472b6);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-family: 'Montserrat', sans-serif;
  font-weight: 800; font-size: 16px; color: #fff;
  flex-shrink: 0;
}
.collabInfo { display: flex; flex-direction: column; gap: 2px; }
.collabName {
  font-family: 'Montserrat', sans-serif;
  font-weight: 700; font-size: 15px; color: var(--text);
}
.collabMeta {
  font-family: 'Montserrat', sans-serif;
  font-size: 12px; color: var(--muted); font-weight: 500;
}
.collabEmpty {
  font-size: 14px; color: var(--muted);
  line-height: 1.6; padding: 8px 0;
}

/* Shared data loading shimmer */
.sharedLoadingShimmer {
  height: 72px; border-radius: 14px; margin-bottom: 10px;
  background: linear-gradient(90deg, rgba(255,255,255,.04) 25%, rgba(255,255,255,.08) 50%, rgba(255,255,255,.04) 75%);
  background-size: 200% 100%;
  animation: sharedShimmer 1.4s ease-in-out infinite;
}
.sharedLoadingHint {
  text-align: center; padding: 16px 0; font-size: 13px;
  color: var(--muted); opacity: .7;
  animation: sharedPulse 1.6s ease-in-out infinite;
}
@keyframes sharedShimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}
@keyframes sharedPulse {
  0%, 100% { opacity: .4; }
  50% { opacity: .8; }
}

/* Loading spinner */
.collabSpinner {
  width: 32px; height: 32px;
  border: 3px solid rgba(255,255,255,.1);
  border-top-color: #a78bfa;
  border-radius: 50%;
  animation: collabSpin .7s linear infinite;
  margin: 0 auto;
}
@keyframes collabSpin { to { transform: rotate(360deg); } }

/* Shared content cards */
.sharedCard {
  display: flex; gap: 14px;
  padding: 12px 14px;
  background: var(--panel);
  border-radius: 14px;
  cursor: pointer;
  transition: background .15s;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
}
.sharedCard:active { background: var(--panel2); }
.sharedCardArt {
  width: 56px; height: 56px;
  border-radius: 10px;
  overflow: hidden; flex-shrink: 0;
}
.sharedCardArt svg { width: 100%; height: 100%; display: block; }
.sharedCardBody {
  display: flex; flex-direction: column; justify-content: center; gap: 3px;
  min-width: 0;
}
.sharedCardTitle {
  font-family: 'Montserrat', sans-serif;
  font-weight: 700; font-size: 15px; color: var(--text);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.sharedCardMeta {
  font-family: 'Montserrat', sans-serif;
  font-size: 12px; color: var(--muted); font-weight: 500;
}

/* Role badges */
.sharedRoleBadge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 999px;
  font-family: 'Montserrat', sans-serif;
  font-weight: 700; font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  width: fit-content;
}
.sharedRoleBadge.collab {
  background: rgba(167, 139, 250, .15);
  color: #a78bfa;
  border: 1px solid rgba(167, 139, 250, .25);
}
.sharedRoleBadge.viewer {
  background: rgba(34, 197, 94, .12);
  color: #22c55e;
  border: 1px solid rgba(34, 197, 94, .2);
}

/* ── Friends Sidebar (Collab tab) ────────────────── */
.collabShell {
  position: relative;
  width: 100%; height: 100%;
  overflow: hidden;
  overflow-x: hidden;
}
.collabSidebar {
  position: absolute;
  top: 0; left: 0; bottom: 0;
  width: 72px;
  background: rgba(0,0,0,.6);
  display: flex; flex-direction: column;
  align-items: center;
  padding: 24px 0 40px;
  gap: 28px;
  z-index: 1;
  opacity: 0;
  pointer-events: none;
}
.collabShell.sidebarOpen .collabSidebar {
  opacity: 1;
  pointer-events: auto;
}
.collabMain {
  position: relative;
  width: 100%; height: 100%;
  overflow-y: auto;
  overflow-x: hidden;
  z-index: 2;
  background: var(--bg);
}
/* Collab title row with menu button */
.collabTitleRow {
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 2px 0 0;
}
.collabMenuBtn {
  position: relative;
  background: none; border: none;
  color: rgba(255,255,255,.5);
  padding: 8px;
  cursor: pointer;
  border-radius: 8px;
  transition: background .15s;
}
.collabMenuBtn:active { background: rgba(255,255,255,.06); }
.collabMenuBadge {
  position: absolute; top: 2px; right: 2px;
  min-width: 16px; height: 16px; padding: 0 4px;
  background: #ef4444; border-radius: 999px;
  font-size: 9px; font-weight: 800; color: #fff;
  display: flex; align-items: center; justify-content: center;
  line-height: 1;
}

/* Inline back/menu button that slides with content */
.collabInlineBack {
  position: relative;
  background: none; border: none;
  color: #fff;
  padding: 4px 0;
  margin: 0 0 0 -4px;
  cursor: pointer;
  display: inline-flex; align-items: center;
  width: 32px;
}
.collabInlineBack:active { opacity: .5; }
.collabInlineBadge {
  position: absolute; top: -4px; left: 16px;
  min-width: 16px; height: 16px; padding: 0 4px;
  background: #ef4444; border-radius: 999px;
  font-size: 9px; font-weight: 800; color: #fff;
  display: flex; align-items: center; justify-content: center;
  line-height: 1;
  pointer-events: none;
}

.collabShell.sidebarOpen .collabMain {
  transform: translateX(72px);
}
.collabSidebarBtn {
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  background: none; border: none;
  color: rgba(255,255,255,.6);
  font-family: 'Montserrat', sans-serif;
  font-weight: 700; font-size: 9px;
  letter-spacing: 0.3px;
  cursor: pointer; padding: 8px 4px;
  transition: color .15s;
  position: relative;
}
.collabSidebarBtn:active,
.collabSidebarBtn:hover { color: #fff; }
.collabSidebarBtn svg { width: 22px; height: 22px; }

/* Pending badge on sidebar button */
.friendsBadge {
  position: absolute;
  top: 2px; right: 0;
  min-width: 16px; height: 16px;
  background: #f472b6;
  border-radius: 999px;
  font-size: 9px; font-weight: 800;
  color: #fff;
  display: flex; align-items: center; justify-content: center;
  padding: 0 4px;
  line-height: 1;
}

/* ── Bottom-nav notification badge ────────────── */
.navBadge {
  position: absolute;
  top: -2px; right: -6px;
  min-width: 16px; height: 16px;
  background: #ef4444;
  border-radius: 999px;
  font-size: 9px; font-weight: 800;
  color: #fff;
  display: flex; align-items: center; justify-content: center;
  padding: 0 4px;
  line-height: 1;
  pointer-events: none;
}
.navIcon { position: relative; }

/* ── Header back-button badge (collab notifications) ── */
.headerBackBadge {
  top: 4px; right: 0;
}

/* ── Friends Full-Screen Views ──────────────────── */
.friendsOverlay {
  position: fixed;
  top: 0; left: 0; right: 0;
  bottom: var(--dock-h, var(--bottom-nav-height));
  z-index: 500;
  background: var(--bg);
  display: flex; flex-direction: column;
  transform: translateX(100%);
  transition: transform .3s cubic-bezier(.4,0,.2,1);
}
.friendsOverlay.open { transform: translateX(0); }
.friendsHeader {
  display: flex; align-items: center; gap: 12px;
  padding: 16px;
  padding-top: calc(env(safe-area-inset-top, 0px) + 16px);
  flex-shrink: 0;
}
.friendsBackBtn {
  background: none; border: none;
  color: var(--text); cursor: pointer;
  display: flex; align-items: center;
}
.friendsTitle {
  font-family: 'Montserrat', sans-serif;
  font-weight: 800; font-size: 20px;
  color: var(--text); flex: 1;
}
.friendsBody {
  flex: 1; overflow-y: auto;
  padding: 0 16px 40px;
  display: flex; flex-direction: column; gap: 10px;
}

/* Friend row */
.friendRow {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 0;
  background: none;
  cursor: pointer;
  transition: background .15s;
}
.friendRow:active { background: rgba(255,255,255,.04); }
.friendAvatar {
  width: 56px; height: 56px;
  background: linear-gradient(135deg, #a78bfa, #f472b6);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-family: 'Montserrat', sans-serif;
  font-weight: 800; font-size: 20px; color: #fff;
  flex-shrink: 0;
  overflow: hidden;
}
.friendAvatar img { width: 100%; height: 100%; object-fit: cover; }
.friendInfo { display: flex; flex-direction: column; gap: 1px; flex: 1; min-width: 0; }
.friendName {
  font-family: 'Montserrat', sans-serif;
  font-weight: 700; font-size: 14px; color: var(--text);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.friendMeta {
  font-family: 'Montserrat', sans-serif;
  font-size: 13px; color: var(--muted); font-weight: 500;
}
.friendMsgBtn {
  padding: 7px 16px;
  background: rgba(255,255,255,.12);
  border: none; border-radius: 8px;
  color: var(--text); font-family: 'Montserrat', sans-serif;
  font-weight: 700; font-size: 13px;
  cursor: pointer; flex-shrink: 0;
}
.friendMsgBtn:active { opacity: .7; }

/* Request action buttons */
.friendActions { display: flex; gap: 8px; flex-shrink: 0; }
.friendAcceptBtn {
  padding: 6px 14px;
  background: linear-gradient(135deg, #a78bfa, #f472b6);
  border: none; border-radius: 999px;
  color: #fff; font-family: 'Montserrat', sans-serif;
  font-weight: 700; font-size: 12px;
  cursor: pointer;
}
.friendAcceptBtn:active { opacity: .8; }
.friendDeclineBtn {
  padding: 6px 14px;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 999px;
  color: var(--muted); font-family: 'Montserrat', sans-serif;
  font-weight: 700; font-size: 12px;
  cursor: pointer;
}
.friendDeclineBtn:active { opacity: .7; }

/* Add friend search */
.friendSearchWrap {
  padding: 0 16px 12px;
  flex-shrink: 0;
}
.friendInviteBtn {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  width: 100%;
  padding: 14px 16px;
  margin-bottom: 10px;
  background: linear-gradient(135deg, rgba(167,139,250,.15), rgba(244,114,182,.15));
  border: 1px solid rgba(167,139,250,.3);
  border-radius: 14px;
  color: #c4b5fd;
  font-family: 'Montserrat', sans-serif;
  font-weight: 700; font-size: 14px;
  cursor: pointer;
  transition: opacity .15s, background .15s;
}
.friendInviteBtn:active {
  opacity: .7;
  background: linear-gradient(135deg, rgba(167,139,250,.25), rgba(244,114,182,.25));
}
.friendInviteBtn svg { flex-shrink: 0; }

.friendSearchInput {
  width: 100%;
  padding: 12px 16px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 12px;
  color: var(--text);
  font-family: 'Montserrat', sans-serif;
  font-size: 14px; font-weight: 600;
  outline: none;
}
.friendSearchInput::placeholder { color: var(--muted); }

.friendsEmpty {
  text-align: center;
  padding: 40px 20px;
  color: var(--muted);
  font-size: 14px; line-height: 1.6;
}

/* Remove friend button (in friends list) */
.friendRemoveBtn {
  background: none; border: none;
  color: rgba(255,255,255,.25);
  font-size: 20px; cursor: pointer;
  padding: 4px 6px; flex-shrink: 0;
  font-weight: 300;
}
.friendRemoveBtn:active { color: #ef4444; }

.friendRowClickable { cursor: pointer; }
.friendRowClickable:active { background: rgba(255,255,255,.04); }

/* ── Messages badge ── */
.msgBadge {
  position: absolute; top: 2px; right: 2px;
  min-width: 16px; height: 16px; padding: 0 4px;
  background: #ef4444; border-radius: 999px;
  font-size: 10px; font-weight: 800; color: #fff;
  display: flex; align-items: center; justify-content: center;
  line-height: 1;
}

/* ── Conversation List ── */
.msgConvoRow {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 0;
  border-bottom: 1px solid rgba(255,255,255,.06);
  cursor: pointer;
  transition: background .15s;
}
.msgConvoRow:active { background: rgba(255,255,255,.04); }
.msgConvoInfo { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.msgConvoTop { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.msgConvoName {
  font-family: 'Montserrat', sans-serif; font-size: 14px; font-weight: 600; color: var(--text);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.msgConvoBold { font-weight: 800; color: #fff; }
.msgConvoTime { font-size: 12px; color: var(--muted); flex-shrink: 0; }
.msgConvoPreview {
  font-size: 13px; color: var(--muted); font-weight: 500;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  display: flex; align-items: center; gap: 8px;
}
.msgUnread {
  min-width: 18px; height: 18px; padding: 0 5px;
  background: #6366f1; border-radius: 999px;
  font-size: 11px; font-weight: 800; color: #fff;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0; margin-left: auto;
}

/* ── Chat View ── */
.chatWrap {
  display: flex; flex-direction: column;
  height: 100%; min-height: 0;
}
.chatMessages {
  flex: 1; overflow-y: auto; -webkit-overflow-scrolling: touch;
  padding: 16px 16px 8px;
  display: flex; flex-direction: column; gap: 6px;
}
.chatEmpty {
  text-align: center; color: var(--muted); padding: 40px 0;
  font-size: 14px;
}
.chatBubble {
  max-width: 75%; padding: 10px 14px;
  border-radius: 18px;
  font-size: 15px; line-height: 1.4;
  word-wrap: break-word;
}
.chatBubbleMine {
  align-self: flex-end;
  background: #6366f1; color: #fff;
  border-bottom-right-radius: 6px;
}
.chatBubbleTheirs {
  align-self: flex-start;
  background: rgba(255,255,255,.1); color: var(--text);
  border-bottom-left-radius: 6px;
}
.chatInputBar {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 12px;
  padding-bottom: max(8px, env(safe-area-inset-bottom));
  border-top: 1px solid rgba(255,255,255,.08);
  background: var(--bg);
  flex-shrink: 0;
}
.chatInput {
  flex: 1; padding: 10px 16px;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 999px;
  color: var(--text); font-size: 15px;
  font-family: 'Montserrat', sans-serif;
  outline: none;
}
.chatInput::placeholder { color: var(--muted); }
.chatInput:focus { border-color: rgba(99,102,241,.5); }
.chatSendBtn {
  width: 38px; height: 38px;
  background: #6366f1; border: none; border-radius: 50%;
  color: #fff; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  transition: opacity .15s;
}
.chatSendBtn:active { opacity: .7; }

/* ── Friend Profile View ──────────────────────────── */
.friendProfileOverlay { background: var(--bg); }
.fpScreen {
  height: 100%; overflow-y: auto; -webkit-overflow-scrolling: touch;
  display: flex; flex-direction: column;
}
.fpHero { position: relative; min-height: 320px; }
.fpHeroBg {
  position: absolute; inset: 0; overflow: hidden;
}
.fpHeroBg img.fpHeroImg {
  width: 100%; height: 100%; object-fit: cover;
  filter: blur(0px) brightness(.7);
}
.fpHeroFallback {
  width: 100%; height: 100%;
  display: flex; align-items: center; justify-content: center;
  font-size: 96px; font-weight: 800; color: rgba(255,255,255,.15);
  background: linear-gradient(135deg, #7c3aed 0%, #a855f7 50%, #ec4899 100%);
}
.fpBackBtn {
  position: absolute; top: env(safe-area-inset-top, 12px); left: 8px;
  z-index: 2; background: none; border: none; color: #fff;
  padding: 12px; cursor: pointer;
  filter: drop-shadow(0 1px 3px rgba(0,0,0,.5));
}
.fpSticky { flex: 1 1 auto; min-height: 0; }
.fpLoading {
  display: flex; justify-content: center; padding: 48px 0;
}
.fpSongRow { cursor: pointer; }
.fpSongRow:active { background: rgba(255,255,255,.04); }
.fpSongThumb { width: 44px; height: 44px; border-radius: 6px; overflow: hidden; flex-shrink: 0; }
.fpSongThumb svg { width: 100%; height: 100%; }
.fpHeroPreset { padding: 0; background: none; }
.fpHeroPreset svg { width: 100%; height: 100%; }
.fpAddFriendBtn {
  display: inline-block;
  background: rgba(168,85,247,.25); color: #c084fc;
  border: 1px solid rgba(168,85,247,.4);
  border-radius: 20px; padding: 4px 14px;
  font-family: 'Montserrat', sans-serif; font-weight: 700; font-size: 12px;
  cursor: pointer; vertical-align: middle;
  transition: background .15s, color .15s;
}
.fpAddFriendBtn:active { background: rgba(168,85,247,.4); }
.fpAddFriendBtn:disabled { opacity: .6; cursor: default; }

/* ── Invite Share Screen (Venmo-style) ──────────── */
.inviteShareScreen {
  position: fixed;
  inset: 0;
  z-index: 10000;
  background: var(--bg);
  display: flex; flex-direction: column;
  transform: translateY(100%);
  transition: transform .35s cubic-bezier(.4,0,.2,1);
}
.inviteShareScreen.open { transform: translateY(0); }

.issHeader {
  display: flex; justify-content: flex-end;
  padding: 16px;
  padding-top: calc(env(safe-area-inset-top, 0px) + 16px);
  flex-shrink: 0;
}
.issCloseBtn {
  background: none; border: none;
  color: var(--muted); cursor: pointer;
  width: 36px; height: 36px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%;
  background: rgba(255,255,255,.08);
}
.issCloseBtn:active { background: rgba(255,255,255,.15); }

.issBody {
  flex: 1;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  padding: 0 32px;
  gap: 12px;
}
.issAvatar {
  width: 72px; height: 72px;
  background: linear-gradient(135deg, #a78bfa, #f472b6);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-family: 'Montserrat', sans-serif;
  font-weight: 800; font-size: 28px; color: #fff;
  overflow: hidden;
  margin-bottom: 4px;
}
.issAvatar img { width: 100%; height: 100%; object-fit: cover; }
.issName {
  font-family: 'Montserrat', sans-serif;
  font-weight: 800; font-size: 24px;
  color: var(--text);
}
.issSub {
  font-family: 'Montserrat', sans-serif;
  font-size: 14px; color: var(--muted); font-weight: 500;
  margin-bottom: 16px;
}
.issQrCard {
  background: #fff;
  border-radius: 20px;
  padding: 24px;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 8px 40px rgba(0,0,0,.3);
}
.issQrCard canvas {
  display: block;
  border-radius: 4px;
}
.issUrl {
  font-family: 'Montserrat', sans-serif;
  font-size: 11px; color: rgba(255,255,255,.3);
  font-weight: 600;
  margin-top: 12px;
  word-break: break-all;
  text-align: center;
  max-width: 280px;
}

.issActions {
  display: flex; gap: 16px;
  justify-content: center;
  padding: 24px 32px;
  padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 32px);
  flex-shrink: 0;
}
.issActionBtn {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  padding: 14px 28px;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 999px;
  color: var(--text);
  font-family: 'Montserrat', sans-serif;
  font-weight: 700; font-size: 14px;
  cursor: pointer;
  transition: background .15s;
  min-width: 120px;
}
.issActionBtn:active { background: rgba(255,255,255,.15); }

/* ── Share Overlay (full-screen, Player-style) ── */
.shareOverlay {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: var(--bg);
  display: flex;
  flex-direction: column;
  opacity: 0;
  transform: translateY(20px);
  transition: opacity .25s ease, transform .25s ease;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
.shareOverlay.open {
  opacity: 1;
  transform: translateY(0);
}

.shareOverlayHeader {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 16px 8px;
  padding-top: calc(env(safe-area-inset-top, 16px) + 12px);
}
.shareOverlayClose {
  width: 36px; height: 36px;
  border-radius: 50%;
  background: rgba(255,255,255,.08);
  border: none;
  color: var(--text);
  display: grid; place-items: center;
  cursor: pointer;
  flex-shrink: 0;
}
.shareOverlayClose:active { opacity: .6; }
.shareOverlayTitle {
  font-family: 'Montserrat', sans-serif;
  font-weight: 800; font-size: 20px;
  color: var(--text);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* Search bar */
.shareSearchWrap {
  position: relative;
  margin: 12px 16px 0;
}
.shareSearchIcon {
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  color: rgba(255,255,255,.3);
  pointer-events: none;
}
input.shareSearchInput {
  width: 100%;
  box-sizing: border-box;
  padding: 14px 14px 14px 48px;
  background: rgba(255,255,255,.06);
  border: 1px solid var(--line);
  border-radius: 14px;
  color: var(--text);
  font-family: 'Montserrat', sans-serif;
  font-size: 15px; font-weight: 600;
  outline: none;
  transition: border-color .2s;
}
.shareSearchInput:focus {
  border-color: rgba(167, 139, 250, .5);
}
.shareSearchInput::placeholder {
  color: rgba(255,255,255,.3);
}

/* Results list */
.shareResults {
  flex: 1;
  padding: 12px 16px;
}
.shareResultsEmpty {
  padding: 40px 0;
  text-align: center;
  color: rgba(255,255,255,.35);
  font-size: 14px;
  font-weight: 500;
}
.shareResultsList {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

/* User rows — Player-style grid */
.shareUserRow {
  display: grid;
  grid-template-columns: 48px 1fr;
  gap: 12px;
  align-items: center;
  padding: 10px 4px;
  border-radius: 10px;
  cursor: pointer;
  background: none;
  border: none;
  -webkit-user-select: none;
  user-select: none;
  text-align: left;
  width: 100%;
  color: var(--text);
}
.shareUserRow:active { background: rgba(255,255,255,.04); }

.shareUserAvatar {
  width: 48px; height: 48px;
  border-radius: 50%;
  overflow: hidden;
  flex-shrink: 0;
  object-fit: cover;
}
.shareUserAvatarFallback {
  background: linear-gradient(135deg, #a78bfa, #f472b6);
  display: flex; align-items: center; justify-content: center;
  font-family: 'Montserrat', sans-serif;
  font-weight: 800; font-size: 18px; color: #fff;
}
.shareUserInfo { min-width: 0; }
.shareUserName {
  font-family: 'Montserrat', sans-serif;
  font-weight: 700; font-size: 15px;
  color: var(--text);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.shareUserMeta {
  margin-top: 2px;
  font-family: 'Montserrat', sans-serif;
  font-size: 12.5px; font-weight: 500;
  color: var(--muted);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* Selected user card */
.shareSelected {
  margin: 16px 16px 0;
  display: flex; flex-direction: column; gap: 16px;
}
.shareSelectedInfo {
  display: flex; align-items: center; gap: 12px;
  padding: 14px 16px;
  background: rgba(167, 139, 250, .08);
  border: 1px solid rgba(167, 139, 250, .2);
  border-radius: 16px;
}
.shareSelectedInfo .shareUserAvatar {
  width: 44px; height: 44px;
}
.shareSelectedName {
  font-family: 'Montserrat', sans-serif;
  font-weight: 700; font-size: 15px; color: var(--text);
}
.shareSelectedMeta {
  font-family: 'Montserrat', sans-serif;
  font-size: 12px; color: var(--muted); font-weight: 500;
  margin-top: 1px;
}
.shareSelectedClear {
  margin-left: auto;
  background: none; border: none;
  color: rgba(255,255,255,.35);
  font-size: 22px; cursor: pointer;
  padding: 4px 8px;
}

/* Role picker */
.shareRolePicker {
  display: flex; flex-direction: column; gap: 8px;
}
.shareRoleLabel {
  font-family: 'Montserrat', sans-serif;
  font-weight: 700; font-size: 13px;
  color: rgba(255,255,255,.5);
  text-transform: uppercase;
  letter-spacing: .5px;
}
.shareRoleOption {
  display: flex; align-items: center; gap: 14px;
  padding: 16px;
  background: rgba(255,255,255,.04);
  border: 1px solid var(--line);
  border-radius: 14px;
  cursor: pointer;
  transition: background .15s, border-color .15s;
  color: var(--text);
  text-align: left;
  width: 100%;
}
.shareRoleOption:active {
  background: rgba(167, 139, 250, .12);
  border-color: rgba(167, 139, 250, .3);
}
.shareRoleIcon {
  width: 40px; height: 40px;
  border-radius: 10px;
  background: rgba(167, 139, 250, .12);
  display: flex; align-items: center; justify-content: center;
  color: #a78bfa;
  flex-shrink: 0;
}
.shareRoleOptionTitle {
  font-family: 'Montserrat', sans-serif;
  font-weight: 700; font-size: 15px;
}
.shareRoleOptionSub {
  font-family: 'Montserrat', sans-serif;
  font-size: 12px; color: var(--muted);
  font-weight: 500; margin-top: 2px;
}

/* ── Sharing management overlay ─────────────────────── */
.sharingBody {
  padding: 16px;
  display: flex; flex-direction: column; gap: 16px;
}
.sharingAddBtn {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  width: 100%;
  padding: 14px 16px;
  background: linear-gradient(135deg, rgba(167,139,250,.15), rgba(244,114,182,.15));
  border: 1px solid rgba(167,139,250,.3);
  border-radius: 14px;
  color: #c4b5fd;
  font-family: 'Montserrat', sans-serif;
  font-weight: 700; font-size: 14px;
  cursor: pointer;
  transition: opacity .15s, background .15s;
}
.sharingAddBtn:active {
  opacity: .7;
  background: linear-gradient(135deg, rgba(167,139,250,.25), rgba(244,114,182,.25));
}
.sharingAddBtn svg { flex-shrink: 0; }
.sharingList {
  display: flex; flex-direction: column; gap: 4px;
}
.sharingRow {
  padding: 10px 0;
}
.sharingRoleBadge {
  display: flex; align-items: center; gap: 6px;
  padding: 6px 12px;
  background: rgba(167,139,250,.1);
  border: 1px solid rgba(167,139,250,.2);
  border-radius: 999px;
  color: #c4b5fd;
  font-family: 'Montserrat', sans-serif;
  font-weight: 700; font-size: 12px;
  cursor: pointer;
  flex-shrink: 0;
  white-space: nowrap;
  transition: background .15s;
}
.sharingRoleBadge:active { background: rgba(167,139,250,.2); }
.sharingRoleBadge svg { flex-shrink: 0; }
.sharingRevokeBtn {
  margin-left: 4px;
}

/* ── Role dropdown ─────────────────────────────────── */
.shareRoleScrim {
  position: fixed; inset: 0;
  z-index: 100001;
  background: rgba(0,0,0,.55);
  opacity: 0;
  transition: opacity .2s ease;
}
.shareRoleScrim.open { opacity: 1; }
.shareRoleDropdown {
  position: fixed;
  z-index: 100002;
  background: var(--panel2, #1e1e2e);
  border: 1px solid rgba(167,139,250,.2);
  border-radius: 14px;
  padding: 6px;
  min-width: 180px;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity .15s ease, transform .15s ease;
}
.shareRoleDropdown.open {
  opacity: 1;
  transform: translateY(0);
}
.shareRoleDropItem {
  display: flex; align-items: center; gap: 8px;
  width: 100%;
  padding: 10px 12px;
  background: none;
  border: none; border-radius: 10px;
  color: var(--text);
  font-family: 'Montserrat', sans-serif;
  font-weight: 600; font-size: 14px;
  cursor: pointer;
  text-align: left;
  transition: background .1s;
}
.shareRoleDropItem:active { background: rgba(255,255,255,.06); }
.shareRoleDropItem.active {
  color: #c4b5fd;
}
.shareRoleDropItem svg { flex-shrink: 0; }
.shareRoleCheck { margin-left: auto; color: #a78bfa; }

/* ── Sal role-change confirmation dialog ───────────── */
.shareConfirmBackdrop {
  position: fixed; inset: 0;
  z-index: 100010;
  background: rgba(0,0,0,.6);
  display: flex; align-items: center; justify-content: center;
  padding: 24px;
  opacity: 0;
  transition: opacity .2s ease;
}
.shareConfirmBackdrop.open { opacity: 1; }
.shareConfirmDialog {
  background: var(--panel2, #1e1e2e);
  border: 1px solid rgba(167,139,250,.15);
  border-radius: 20px;
  padding: 28px 24px 20px;
  max-width: 320px;
  width: 100%;
  text-align: center;
  display: flex; flex-direction: column; align-items: center; gap: 12px;
}
.shareConfirmSal {
  width: 64px; height: 64px;
  border-radius: 50%;
  object-fit: cover;
  margin-bottom: 4px;
}
.shareConfirmTitle {
  font-family: 'Montserrat', sans-serif;
  font-weight: 800; font-size: 17px;
  color: var(--text);
}
.shareConfirmBlurb {
  font-family: 'Montserrat', sans-serif;
  font-size: 13.5px; font-weight: 500;
  color: var(--muted);
  line-height: 1.5;
}
.shareConfirmActions {
  display: flex; gap: 10px;
  width: 100%;
  margin-top: 8px;
}
.shareConfirmCancel {
  flex: 1;
  padding: 12px;
  background: rgba(255,255,255,.08);
  border: none; border-radius: 12px;
  color: var(--muted);
  font-family: 'Montserrat', sans-serif;
  font-weight: 700; font-size: 14px;
  cursor: pointer;
}
.shareConfirmCancel:active { opacity: .7; }
.shareConfirmOk {
  flex: 1;
  padding: 12px;
  background: linear-gradient(135deg, #a78bfa, #f472b6);
  border: none; border-radius: 12px;
  color: #fff;
  font-family: 'Montserrat', sans-serif;
  font-weight: 700; font-size: 14px;
  cursor: pointer;
}
.shareConfirmOk:active { opacity: .85; }

/* ── Avatar Crop Overlay ────────────────────────────── */
.avatarCropOverlay {
  position: fixed;
  inset: 0;
  z-index: 299999;
  background: #000;
  display: flex;
  flex-direction: column;
  opacity: 0;
  transition: opacity .25s ease;
}
.avatarCropOverlay.open { opacity: 1; }

.avCropHeader {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px;
  padding-top: calc(env(safe-area-inset-top, 14px) + 10px);
}
.avCropCancel {
  background: none; border: none;
  color: rgba(255,255,255,.7);
  font-family: 'Montserrat', sans-serif;
  font-weight: 600; font-size: 15px;
  cursor: pointer;
}
.avCropTitle {
  font-family: 'Montserrat', sans-serif;
  font-weight: 800; font-size: 17px;
  color: #fff;
}
.avCropDone {
  background: none; border: none;
  color: #a78bfa;
  font-family: 'Montserrat', sans-serif;
  font-weight: 800; font-size: 15px;
  cursor: pointer;
}

.avCropBody {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.avCropFrame {
  position: relative;
  width: min(80vw, 320px);
  height: min(80vw, 320px);
  overflow: hidden;
  border-radius: 50%;
  touch-action: none;
  box-shadow: 0 0 0 9999px rgba(0,0,0,.6);
}
.avCropImg {
  position: absolute;
  top: 0; left: 0;
  transform-origin: 0 0;
  pointer-events: none;
  -webkit-user-select: none;
  user-select: none;
}
.avCropMask {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  box-shadow: 0 0 0 2px rgba(255,255,255,.25);
  pointer-events: none;
}

.avCropControls {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 20px 32px calc(env(safe-area-inset-bottom, 16px) + 20px);
  justify-content: center;
}
.avCropZoom {
  flex: 1;
  max-width: 240px;
  -webkit-appearance: none;
  appearance: none;
  height: 3px;
  background: rgba(255,255,255,.2);
  border-radius: 2px;
  outline: none;
}
.avCropZoom::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 22px; height: 22px;
  border-radius: 50%;
  background: #fff;
  cursor: pointer;
  box-shadow: 0 1px 4px rgba(0,0,0,.4);
}

/* ── Avatar Picker Sheet ────────────────────────────── */
.avatarPickerBackdrop {
  position: fixed; inset: 0;
  z-index: 199990;
  background: rgba(0,0,0,.5);
  opacity: 0;
  transition: opacity .25s ease;
}
.avatarPickerBackdrop.open { opacity: 1; }

.avatarPickerSheet {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 199991;
  background: #1c1c1e;
  border-radius: 20px 20px 0 0;
  padding: 8px 16px calc(env(safe-area-inset-bottom, 16px) + 16px);
  transform: translateY(100%);
  transition: transform .3s cubic-bezier(.25,.46,.45,.94);
  max-height: 70vh;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
.avatarPickerSheet.open { transform: translateY(0); }

.avPickerHandle {
  width: 36px; height: 4px;
  border-radius: 2px;
  background: rgba(255,255,255,.2);
  margin: 4px auto 16px;
}

/* Tabs: current photo + avatar preset toggle */
.avPickerTabs {
  display: flex;
  justify-content: center;
  gap: 24px;
  margin-bottom: 20px;
  padding-bottom: 12px;
  border-bottom: 1px solid rgba(255,255,255,.08);
}
.avPickerTab {
  width: 56px; height: 56px;
  border-radius: 50%;
  border: 2px solid transparent;
  background: none;
  cursor: pointer;
  padding: 0;
  overflow: hidden;
  transition: border-color .2s;
  display: flex; align-items: center; justify-content: center;
}
.avPickerTab.active {
  border-color: #a78bfa;
}
.avPickerTabImg {
  width: 100%; height: 100%;
  object-fit: cover; border-radius: 50%;
}
.avPickerTabFallback {
  width: 52px; height: 52px;
  border-radius: 50%;
  background: rgba(255,255,255,.08);
  display: flex; align-items: center; justify-content: center;
  font-family: 'Montserrat', sans-serif;
  font-weight: 800; font-size: 20px; color: rgba(255,255,255,.4);
}

/* Photo tab options */
.avPickerOptions {
  display: flex; flex-direction: column; gap: 2px;
}
.avPickerOption {
  display: flex; align-items: center; gap: 14px;
  padding: 14px 8px;
  background: none; border: none;
  color: var(--text);
  font-family: 'Montserrat', sans-serif;
  font-weight: 600; font-size: 15px;
  cursor: pointer;
  text-align: left; width: 100%;
  border-radius: 10px;
  transition: background .15s;
}
.avPickerOption:active { background: rgba(255,255,255,.06); }
.avPickerOption svg { color: rgba(255,255,255,.5); flex-shrink: 0; }
.avPickerOptionDanger { color: #ef4444; }
.avPickerOptionDanger svg { color: #ef4444; }

/* Avatar preset grid */
.avPresetGrid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  padding: 4px 0;
}
.avPresetBtn {
  aspect-ratio: 1;
  border-radius: 50%;
  border: 2px solid transparent;
  background: none;
  cursor: pointer;
  padding: 0;
  overflow: hidden;
  transition: border-color .15s, transform .12s;
}
.avPresetBtn:active {
  transform: scale(.92);
  border-color: #a78bfa;
}

/* ── Cover Crop Overlay ────────────────────────────── */
.cropOverlay {
  position: fixed; inset: 0; z-index: 9999;
  background: #000;
  display: flex; flex-direction: column;
  opacity: 0; transition: opacity .25s ease;
}
.cropOverlay.cropVisible { opacity: 1; }

.cropHeader {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 16px;
  padding-top: calc(env(safe-area-inset-top, 0px) + 12px);
  background: rgba(0,0,0,.85);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  z-index: 1;
}
.cropHeader .cropTitle {
  font-family: 'Montserrat', sans-serif;
  font-size: 16px; font-weight: 600; color: #fff;
}
.cropHeader .cropCancel,
.cropHeader .cropDone {
  background: none; border: none;
  font-family: 'Montserrat', sans-serif;
  font-size: 15px; font-weight: 600;
  padding: 6px 12px; border-radius: 8px;
  cursor: pointer;
}
.cropHeader .cropCancel { color: #aaa; }
.cropHeader .cropDone {
  color: #fff;
  background: linear-gradient(135deg, #a855f7, #6366f1);
}

.cropArea {
  flex: 1; display: flex; align-items: center; justify-content: center;
  overflow: hidden; position: relative;
}
.cropFrame {
  width: min(80vw, 80vh, 400px);
  height: min(80vw, 80vh, 400px);
  border-radius: 16px;
  overflow: hidden;
  position: relative;
  box-shadow: 0 0 0 9999px rgba(0,0,0,.6);
  touch-action: none;
}
.cropFrame::after {
  content: "";
  position: absolute; inset: 0;
  border: 2px solid rgba(255,255,255,.25);
  border-radius: 16px;
  pointer-events: none;
}
.cropImg {
  position: absolute;
  transform-origin: 0 0;
  user-select: none;
  -webkit-user-drag: none;
}

.cropControls {
  display: flex; align-items: center; gap: 10px;
  justify-content: center;
  padding: 16px 24px calc(env(safe-area-inset-bottom, 0px) + 16px);
  background: rgba(0,0,0,.85);
}
.cropZoomIcon { color: #888; flex-shrink: 0; }
.cropZoom {
  -webkit-appearance: none; appearance: none;
  width: 200px; max-width: 60vw;
  height: 4px; border-radius: 2px;
  background: rgba(255,255,255,.15);
  outline: none;
}
.cropZoom::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 22px; height: 22px; border-radius: 50%;
  background: #fff; cursor: pointer;
  box-shadow: 0 1px 4px rgba(0,0,0,.4);
}
.cropZoom::-moz-range-thumb {
  width: 22px; height: 22px; border-radius: 50%;
  background: #fff; cursor: pointer; border: none;
  box-shadow: 0 1px 4px rgba(0,0,0,.4);
}

/* ── Pull-to-refresh spinner ── */
.ptrSpinner{
  position:fixed; top:0; left:50%;
  transform:translate(-50%, 0) scale(0);
  z-index:999998;
  opacity:0;
  color:rgba(167,139,250,.7);
  pointer-events:none;
  will-change:transform,opacity;
  filter:drop-shadow(0 2px 8px rgba(167,139,250,.35));
}
.ptrSpinner.ptrReady{
  color:#a78bfa;
  filter:drop-shadow(0 2px 12px rgba(167,139,250,.6));
}
.ptrSpinner.ptrRefreshing svg{
  animation:ptrSpin .6s linear infinite;
}
@keyframes ptrSpin{
  to{ transform:rotate(360deg); }
}

/* Cascading shimmer on refresh */
.ptrShimmer{
  animation:ptrShimmerFlash .5s ease both;
}
.pCard.ptrShimmer,
.pCard:nth-child(odd).ptrShimmer,
.pCard:nth-child(even).ptrShimmer{
  animation:ptrShimmerFlash .5s ease both;
}
@keyframes ptrShimmerFlash{
  0%  { opacity:1; filter:brightness(1); }
  40% { opacity:.85; filter:brightness(1.5) saturate(1.2); }
  100%{ opacity:1; filter:brightness(1); }
}

/* ── Loaded Invite Builder Overlay ─────────────────────── */

.liBuilderOverlay{
  position:fixed; inset:0; z-index:9999;
  background:var(--bg, #0d0e12);
  display:flex; flex-direction:column;
  opacity:0; transform:translateY(20px);
  transition:opacity .25s ease, transform .25s ease;
  padding:env(safe-area-inset-top) 0 env(safe-area-inset-bottom);
}
.liBuilderOverlay.open{ opacity:1; transform:translateY(0); }

.liBuilderHeader{
  display:flex; align-items:center; gap:12px;
  padding:16px 20px 12px;
  border-bottom:1px solid rgba(255,255,255,.08);
  flex-shrink:0;
}
.liBuilderClose{
  background:none; border:none; color:rgba(255,255,255,.7);
  width:36px; height:36px; display:flex; align-items:center; justify-content:center;
  cursor:pointer; border-radius:50%;
  transition:background .15s;
}
.liBuilderClose:active{ background:rgba(255,255,255,.1); }
.liBuilderTitle{
  font-weight:800; font-size:18px; color:rgba(255,255,255,.92);
  flex:1;
}
.liBuilderCount{
  font-size:13px; font-weight:700; color:rgba(167,139,250,.9);
}

.liBuilderBody{
  flex:1; overflow-y:auto; -webkit-overflow-scrolling:touch;
  padding:16px 20px 120px;
  display:flex; flex-direction:column; gap:20px;
}

.liBuilderSection{ display:flex; flex-direction:column; gap:8px; }
.liBuilderSectionLabel{
  font-weight:800; font-size:12px; text-transform:uppercase;
  letter-spacing:.5px; color:rgba(255,255,255,.45);
  margin-bottom:2px;
}

/* Role bar */
.liBuilderRoleBar{
  display:flex; gap:8px;
}
.liRoleBtn{
  flex:1; display:flex; align-items:center; justify-content:center; gap:8px;
  padding:12px 16px;
  background:rgba(255,255,255,.06);
  border:1.5px solid rgba(255,255,255,.1);
  border-radius:12px;
  color:rgba(255,255,255,.7); font-family:inherit;
  font-weight:700; font-size:14px;
  cursor:pointer; transition:all .15s;
}
.liRoleBtn:active{ transform:scale(.97); }
.liRoleBtn.liRoleActive{
  background:rgba(167,139,250,.15);
  border-color:rgba(167,139,250,.5);
  color:#a78bfa;
}

/* Selectable item rows */
.liBuilderItem{
  display:flex; align-items:center; gap:12px;
  padding:12px 14px;
  background:rgba(255,255,255,.05);
  border:1.5px solid transparent;
  border-radius:12px;
  cursor:pointer; transition:all .15s;
  text-align:left; font-family:inherit;
  color:rgba(255,255,255,.92);
}
.liBuilderItem:active{ transform:scale(.98); }
.liBuilderItem.liSelected{
  background:rgba(167,139,250,.1);
  border-color:rgba(167,139,250,.4);
}
.liBuilderItem.liDimmed{
  opacity:.4; pointer-events:none;
}
.liBuilderCheck{
  width:24px; height:24px;
  border:2px solid rgba(255,255,255,.2);
  border-radius:6px;
  display:flex; align-items:center; justify-content:center;
  flex-shrink:0;
  transition:all .15s;
}
.liSelected .liBuilderCheck{
  background:#a78bfa;
  border-color:#a78bfa;
  color:#fff;
}
.liBuilderItemBody{ flex:1; min-width:0; }
.liBuilderItemTitle{
  font-weight:700; font-size:15px;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.liBuilderItemSub{
  font-size:13px; color:rgba(255,255,255,.5); margin-top:2px;
}

/* Footer */
.liBuilderFooter{
  position:fixed; bottom:0; left:0; right:0;
  padding:16px 20px calc(16px + env(safe-area-inset-bottom));
  background:linear-gradient(transparent, var(--bg, #0d0e12) 20%);
  display:flex; flex-direction:column; gap:10px;
  z-index:10;
}
.liBuilderBtn{
  width:100%; padding:16px;
  background:linear-gradient(135deg, #a78bfa, #f472b6);
  border:none; border-radius:999px;
  color:#fff; font-family:inherit;
  font-weight:800; font-size:16px;
  cursor:pointer; transition:opacity .2s;
}
.liBuilderBtn:active{ opacity:.8; }
.liBuilderBtn:disabled{ opacity:.4; cursor:not-allowed; }

.liBuilderDelete{
  width:100%; padding:14px;
  background:rgba(239,68,68,.12);
  border:1px solid rgba(239,68,68,.25);
  border-radius:999px;
  color:#f87171; font-family:inherit;
  font-weight:700; font-size:14px;
  cursor:pointer; transition:opacity .2s;
}
.liBuilderDelete:active{ opacity:.7; }

/* ── Loaded Invite Welcome Screen ──────────────────────── */

.liWelcomeOverlay{
  position:fixed; inset:0; z-index:10000;
  background:var(--bg, #0d0e12);
  display:flex; flex-direction:column; align-items:center;
  opacity:0; transform:translateY(20px);
  transition:opacity .35s ease, transform .35s ease;
  padding:env(safe-area-inset-top) 0 env(safe-area-inset-bottom);
  overflow-y:auto; -webkit-overflow-scrolling:touch;
}
.liWelcomeOverlay.open{ opacity:1; transform:translateY(0); }

.liWelcomeInner{
  width:100%; max-width:380px;
  padding:48px 24px 40px;
  display:flex; flex-direction:column; align-items:center;
  text-align:center;
}

.liWelcomeSal{ margin-bottom:20px; }
.liWelcomeSal img{ height:auto; filter:drop-shadow(0 4px 20px rgba(167,139,250,.3)); }

.liWelcomeTitle{
  font-weight:900; font-size:28px;
  background:linear-gradient(135deg, #a78bfa, #f472b6);
  -webkit-background-clip:text; -webkit-text-fill-color:transparent;
  background-clip:text;
  margin-bottom:6px;
}
.liWelcomeSub{
  font-size:15px; color:rgba(255,255,255,.6); line-height:1.6;
  margin-bottom:28px;
}
.liWelcomeSub strong{ color:rgba(255,255,255,.92); }

.liWelcomeSender{
  display:flex; align-items:center; gap:14px;
  background:rgba(255,255,255,.06); border-radius:16px;
  padding:16px 20px; width:100%; margin-bottom:24px;
  text-align:left;
}
.liWelcomeSenderAvatar{
  width:48px; height:48px; border-radius:50%;
  background:linear-gradient(135deg, rgba(167,139,250,.3), rgba(244,114,182,.3));
  display:flex; align-items:center; justify-content:center;
  flex-shrink:0; overflow:hidden;
}
.liWelcomeSenderAvatar img{
  width:100%; height:100%; object-fit:cover; border-radius:50%;
}
.liWelcomeSenderAvatarFallback{
  font-weight:800; font-size:20px; color:rgba(255,255,255,.7);
}
.liWelcomeSenderInfo{ flex:1; min-width:0; }
.liWelcomeSenderName{
  font-weight:800; font-size:17px; color:rgba(255,255,255,.92);
}
.liWelcomeSenderRole{
  font-size:13px; color:rgba(167,139,250,.8); font-weight:600; margin-top:2px;
}

.liWelcomeItems{
  width:100%; display:flex; flex-direction:column; gap:8px;
  margin-bottom:28px;
}
.liWelcomeItemLabel{
  font-weight:800; font-size:11px; text-transform:uppercase;
  letter-spacing:.5px; color:rgba(255,255,255,.4);
  text-align:left; margin:6px 0 0;
}
.liWelcomeItem{
  display:flex; align-items:center; gap:14px;
  background:rgba(255,255,255,.06); border-radius:14px;
  padding:14px 16px; text-align:left;
}
.liWelcomeItemIcon{
  width:40px; height:40px; border-radius:10px;
  background:linear-gradient(135deg, rgba(167,139,250,.2), rgba(244,114,182,.2));
  display:flex; align-items:center; justify-content:center;
  flex-shrink:0; color:#a78bfa;
}
.liWelcomeItemBody{ flex:1; min-width:0; }
.liWelcomeItemTitle{
  font-weight:700; font-size:15px; color:rgba(255,255,255,.92);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.liWelcomeItemSub{
  font-size:13px; color:rgba(255,255,255,.45); margin-top:2px;
}

.liWelcomeBtn{
  width:100%; padding:16px 0;
  background:linear-gradient(135deg, #a78bfa, #f472b6);
  border:none; border-radius:999px;
  color:#fff; font-family:inherit;
  font-weight:800; font-size:16px;
  cursor:pointer; transition:opacity .2s;
}
.liWelcomeBtn:active{ opacity:.8; }

/* ── Loaded Invite Cards (Collab tab) ──────────────────── */

.liInvSection{
  display:flex; flex-direction:column; gap:8px;
  margin-bottom:20px; padding:0 2px;
}
.liInvSectionLabel{
  font-weight:800; font-size:12px; text-transform:uppercase;
  letter-spacing:.5px; color:rgba(255,255,255,.4);
  margin-bottom:2px;
}
.liInvCard{
  display:flex; align-items:center; gap:14px;
  padding:14px 16px;
  background:rgba(167,139,250,.08);
  border:1px solid rgba(167,139,250,.18);
  border-radius:16px;
  cursor:pointer; transition:all .15s;
  animation:pCardIn .4s ease both;
}
.liInvCard:active{ transform:scale(.98); background:rgba(167,139,250,.14); }

.liInvIcon{
  width:44px; height:44px; border-radius:12px;
  background:linear-gradient(135deg, rgba(167,139,250,.2), rgba(244,114,182,.2));
  display:flex; align-items:center; justify-content:center;
  flex-shrink:0; color:#a78bfa;
}
.liInvBody{ flex:1; min-width:0; }
.liInvTitle{
  font-weight:700; font-size:15px; color:rgba(255,255,255,.92);
  display:flex; align-items:center; gap:8px;
}
.liInvMeta{
  font-size:13px; color:rgba(255,255,255,.5); margin-top:2px;
}
.liInvBadge{
  display:inline-block; padding:2px 8px;
  border-radius:999px; font-size:11px; font-weight:700;
  text-transform:uppercase; letter-spacing:.3px;
}
.liInvBadgeViewer{
  background:rgba(34,197,94,.12); color:#22c55e;
  border:1px solid rgba(34,197,94,.2);
}
.liInvBadgeCollab{
  background:rgba(167,139,250,.15); color:#a78bfa;
  border:1px solid rgba(167,139,250,.25);
}
.liInvShareBtn{
  width:40px; height:40px; border-radius:50%;
  background:rgba(255,255,255,.06);
  border:none; color:rgba(255,255,255,.6);
  display:flex; align-items:center; justify-content:center;
  cursor:pointer; flex-shrink:0;
  transition:all .15s;
}
.liInvShareBtn:active{ background:rgba(255,255,255,.12); color:#a78bfa; }