/* NivaPlay v16 — PNG icons, white filter, clean layout */
:root {
  --bg: #000000;
  --card: #122540;
  --elev: #0c1c33;
  --line: rgba(255, 255, 255, 0.12);
  --text: #eaf6ff;
  --muted: #a8a8b2;
  --sky: rgba(255,255,255,0.85);
  --sky2: rgba(255,255,255,0.8);
  --sky-soft: rgba(255, 255, 255, 0.12);
  --amb-r: 200; --amb-g: 210; --amb-b: 220;
  --amb2-r: 160; --amb2-g: 170; --amb2-b: 185;
  --nav: 72px;
  --pad: 16px;
  --top-gap: max(12px, env(safe-area-inset-top, 0px));
  --bot-gap: calc(64px + 20px + env(safe-area-inset-bottom, 0px));
  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --manage-bar: 56px;
  --header-h: 52px;
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body {
  margin: 0;
  width: 100%;
  max-width: 100%;
  height: 100%;
  height: 100dvh;
  min-height: 100%;
  min-height: 100dvh;
  background: #000000; color: var(--text);
  font-family: var(--font);
  overflow: hidden;
  overflow-x: hidden;
  overscroll-behavior: none;
  -webkit-text-size-adjust: 100%;
}
*::-webkit-scrollbar { width: 0; height: 0; display: none; }
* { scrollbar-width: none; -ms-overflow-style: none; }

#app {
  width: 100%; max-width: 430px; height: 100%; margin: 0 auto;
  display: flex; flex-direction: column; position: relative; overflow: hidden;
  background: #000000;
  --ambient-a: rgba(40, 40, 44, 0.35);
  --ambient-b: rgba(28, 28, 32, 0.25);
  --ambient-c: rgba(50, 50, 55, 0.18);
  --amb-r: 200; --amb-g: 210; --amb-b: 220;
  --amb2-r: 160; --amb2-g: 170; --amb2-b: 185;
  transition: background 1.2s ease, --ambient-a 1.2s ease, --ambient-b 1.2s ease, --ambient-c 1.2s ease, --amb-r 1.2s ease, --amb-g 1.2s ease, --amb-b 1.2s ease, --amb2-r 1.2s ease, --amb2-g 1.2s ease, --amb2-b 1.2s ease;
}
#app.has-ambient {
  background:
    radial-gradient(ellipse 90% 55% at 50% 8%, var(--ambient-a), transparent 68%),
    radial-gradient(ellipse 70% 45% at 18% 78%, var(--ambient-b), transparent 62%),
    radial-gradient(ellipse 60% 40% at 88% 68%, var(--ambient-c), transparent 58%),
    var(--bg);
}
#app-ambient {
  position: absolute; inset: 0; z-index: 0;
  pointer-events: none; overflow: hidden;
  opacity: 0; transition: opacity 0.9s ease;
}
#app-ambient.on { opacity: 1; }
#app-ambient .amb-blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(60px);
  opacity: 0.55;
  will-change: transform;
}
#app-ambient .amb-blob.a {
  width: 70%; height: 55%;
  left: 15%; top: -5%;
  background: var(--ambient-a);
  animation: ambFloatA 14s ease-in-out infinite;
}
#app-ambient .amb-blob.b {
  width: 55%; height: 45%;
  left: -10%; bottom: 15%;
  background: var(--ambient-b);
  animation: ambFloatB 18s ease-in-out infinite;
}
#app-ambient .amb-blob.c {
  width: 50%; height: 40%;
  right: -8%; bottom: 25%;
  background: var(--ambient-c);
  animation: ambFloatC 16s ease-in-out infinite;
}
#app-ambient .amb-cover {
  position: absolute;
  left: 50%; top: -5%;
  width: 140%; height: 70%;
  transform: translateX(-50%);
  background-image: var(--ambient-img, none);
  background-size: cover;
  background-position: center top;
  filter: blur(48px) saturate(1.45) brightness(0.5);
  opacity: 0.5;
  border-radius: 45%;
  animation: ambCoverDrift 20s ease-in-out infinite;
}
#app-ambient .amb-veil {
  position: absolute; inset: 0;
  /* equal brightness top → bottom so nav stays colorful */
  background: linear-gradient(180deg, rgba(0,0,0,0.04) 0%, rgba(0,0,0,0.04) 50%, rgba(0,0,0,0.04) 100%);
}
#app-ambient {
  z-index: 0;
}
#app-ambient .amb-blob.b,
#app-ambient .amb-blob.c {
  opacity: 0.85;
}
/* stretch cover blur into lower half so ambient reaches nav */
#app-ambient .amb-cover {
  top: -8% !important;
  height: 110% !important;
  width: 160% !important;
  opacity: 0.55 !important;
  filter: blur(52px) saturate(1.5) brightness(0.65) !important;
  border-radius: 40% !important;
}
#app-ambient .amb-blob.a {
  opacity: 0.7;
}
/* ambient shows through nav glass */
.nav {
  background: rgba(12, 28, 48, 0.18) !important;
  -webkit-backdrop-filter: saturate(200%) blur(22px) !important;
  backdrop-filter: saturate(200%) blur(22px) !important;
}
@keyframes ambFloatA {
  0%, 100% { transform: translate(0, 0) scale(1); }
  33% { transform: translate(8%, 6%) scale(1.08); }
  66% { transform: translate(-6%, 10%) scale(0.95); }
}
@keyframes ambFloatB {
  0%, 100% { transform: translate(0, 0) scale(1); }
  40% { transform: translate(12%, -8%) scale(1.1); }
  70% { transform: translate(-5%, 5%) scale(0.92); }
}
@keyframes ambFloatC {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50% { transform: translate(-10%, -6%) scale(1.12); }
}
@keyframes ambCoverDrift {
  0%, 100% { transform: translateX(-50%) translateY(0) scale(1); }
  50% { transform: translateX(-48%) translateY(4%) scale(1.06); }
}

/* Black PNG → white */
img.ico,
img.nav-ico {
  filter: brightness(0) invert(1);
  object-fit: contain;
  display: block;
  pointer-events: none;
}
img.ico { width: 22px; height: 22px; }
.cbtn.main img.ico { width: 26px; height: 26px; filter: brightness(0) invert(1); }
.act-btn img.ico { width: 22px; height: 22px; }
.nav-ico { width: 24px; height: 24px; flex-shrink: 0; }

.header {
  flex: 0 0 auto;
  padding: 0;
  z-index: 30;
  position: relative;
  background: transparent !important;
  pointer-events: none;
  display: flex;
  flex-direction: column;
  align-items: stretch;
}
.header-logo-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px var(--pad) 6px;
  /* Only real notch inset — avoid double gap on iOS Web Clip / standalone */
  padding-top: max(10px, calc(env(safe-area-inset-top, 0px) + 6px));
  min-height: calc(38px + 12px);
  pointer-events: none;
  isolation: isolate;
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
}
.header .logo-mark,
.header .logo-text {
  pointer-events: auto;
  cursor: pointer;
  -webkit-user-select: none;
  user-select: none;
}
.logo-img {
  width: 32px;
  height: 32px;
  border-radius: 0;
  object-fit: contain;
  display: block;
  flex-shrink: 0;
  pointer-events: auto;
  cursor: pointer;
  /* Never use CSS filter on this img — WebKit blurs filtered bitmaps on iOS */
  filter: none !important;
  -webkit-filter: none !important;
  -webkit-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}
.logo-mark {
  width: 26px; height: 26px; border-radius: 8px;
  background: linear-gradient(145deg, rgba(255,255,255,0.88), var(--sky2));
  color: #042033; font-weight: 800; font-size: 0.85rem;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.logo-text {
  font-weight: 700;
  font-size: 1.08rem;
  letter-spacing: -0.02em;
  text-align: center;
  -webkit-font-smoothing: subpixel-antialiased;
  -moz-osx-font-smoothing: auto;
  text-rendering: geometricPrecision;
  -webkit-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  filter: none !important;
}

/* Title bar slot inside header (list pages only) */
.header-title-slot {
  display: none;
  width: 100%;
  padding: 0 var(--pad);
  pointer-events: auto;
  box-sizing: border-box;
}
#app.is-list-page .header-title-slot {
  display: block;
}
#app.is-list-page .header {
  border-bottom: none;
  padding-bottom: 4px;
  position: relative;
  overflow: hidden;
}
/* Glass layer as pseudo so content stays fully visible while bg fades 0→100 transparent */
#app.is-list-page .header::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: linear-gradient(
    to bottom,
    rgba(0, 0, 0, 0.88) 0%,
    rgba(0, 0, 0, 0.62) 30%,
    rgba(0, 0, 0, 0.32) 58%,
    rgba(0, 0, 0, 0.10) 80%,
    rgba(0, 0, 0, 0.00) 100%
  );
  -webkit-backdrop-filter: saturate(180%) blur(22px);
  backdrop-filter: saturate(180%) blur(22px);
  /* fade the blur strength toward the bottom (iOS-like) */
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 50%, transparent 100%);
  mask-image: linear-gradient(to bottom, #000 0%, #000 50%, transparent 100%);
}
#app.is-list-page .header > * {
  position: relative;
  z-index: 1;
}
#app.is-player .header,
#app:not(.is-list-page) .header {
  background: transparent !important;
  padding-bottom: 0;
}
#app.is-player .header::before,
#app:not(.is-list-page) .header::before {
  display: none;
}

/* When title is mounted in header — SAME height & alignment for all list pages */
.header-title-slot .page-head,
.header-title-slot .search-sticky .page-head {
  position: relative !important;
  top: auto !important;
  margin: 0 0 8px 0 !important;
  background: transparent !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
  border-bottom: none !important;
  box-shadow: none !important;
  z-index: 1;
  /* fixed identical title row for Queue / Search / Favorites / Lists */
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  box-sizing: border-box !important;
  height: 44px !important;
  min-height: 44px !important;
  max-height: 44px !important;
  padding: 0 !important;
}
/* no hard line under title row — elevation comes from header box-shadow */
.header-title-slot .page-head::after,
.header-title-slot .search-sticky .page-head::after {
  display: none !important;
  content: none !important;
}
.header-title-slot .search-sticky {
  position: relative !important;
  top: auto !important;
  margin: 0 !important;
  background: transparent !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
  border-bottom: none !important;
  padding: 0 0 8px 0 !important;
  z-index: 1;
}
.header-title-slot .search-sticky .page-head {
  margin-bottom: 12px !important;
}
.header-title-slot .search-sticky .search-row {
  margin: 0 !important;
}
.header-title-slot .page-title,
.header-title-slot .page-title-row {
  height: 100%;
  display: flex;
  align-items: center;
}
.header-title-slot .pl-head-actions {
  height: 100%;
  display: flex;
  align-items: center;
}

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

/* ONLY one page visible */
.page {
  position: absolute; inset: 0; z-index: 5;
  display: none; flex-direction: column;
  pointer-events: none; overflow: hidden;
  background: transparent;
}
.page.active {
  display: flex; pointer-events: auto;
}
.page-content {
  flex: 1; overflow-y: auto;
  padding: 0 var(--pad) calc(var(--bot-gap) + 16px);
  -webkit-overflow-scrolling: touch;
}
.page-head,
#page-queue .page-head,
#page-playlists .page-head,
#page-liked .page-head,
#page-search .page-head,
#page-search .search-sticky .page-head {
  display: flex !important;
  justify-content: space-between;
  align-items: center;
  min-height: 44px !important;
  height: 44px !important;
  padding: 10px 0 12px !important; /* same baseline for all pages */
  margin: 0 0 7px !important;
  border-bottom: none !important;
  flex-shrink: 0;
  box-sizing: border-box;
  background: transparent !important;
  position: relative;
  z-index: 12;
  cursor: default;
}
.page-title {
  font-size: 1.08rem;
  font-weight: 700;
  line-height: 1.2;
  display: flex;
  align-items: center;
  cursor: pointer;
  user-select: none;
  -webkit-user-select: none;
}
.page-title-row {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  height: 100%;
}
.pl-head {
  gap: 8px;
  align-items: center;
}
.pl-head-actions {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-shrink: 0;
  height: 100%;
}
.dim { font-size: 0.78rem; color: var(--muted); font-weight: 600; }

/* Empty */
.view-empty {
  position: absolute; inset: 0; z-index: 2;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; padding: 24px; background: transparent;
}
.view-empty.hidden { display: none !important; }
.big-logo {
  width: 84px; height: 84px; border-radius: 24px; margin-bottom: 16px;
  background: linear-gradient(145deg, rgba(255,255,255,0.88), var(--sky2));
  color: #042033; font-size: 2.2rem; font-weight: 800;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 14px 36px rgba(14, 165, 233, 0.35);
}
.view-empty h1 { margin: 0 0 8px; font-size: 1.45rem; }
.view-empty p { margin: 0 0 20px; color: var(--muted); font-size: 0.9rem; line-height: 1.45; max-width: 260px; }
.btn-primary {
  border: 1px solid rgba(255, 255, 255, 0.28); border-radius: 999px; padding: 12px 24px; font-weight: 700; font-size: 0.92rem; cursor: pointer;
  background: linear-gradient(145deg, rgba(255,255,255,0.22), rgba(255,255,255,0.08));
  color: #eaf6ff;
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.3), 0 6px 18px rgba(0,0,0,0.2);
}

/* PLAYER — ambient is full-app (#app-ambient); page itself transparent */
#page-player {
  background: transparent !important;
}
#page-player.active {
  background: transparent !important;
}
.ambient-bg { display: none !important; }
.player-page {
  position: relative; z-index: 1;
  display: flex !important; flex-direction: column;
  padding: 0 var(--pad) calc(var(--bot-gap) + 8px) !important;
  height: 100%; overflow: hidden !important;
  background: transparent !important;
}
.player-stage {
  flex: 1 1 auto; min-height: 0;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  width: 100%; padding: 8px 0;
}
.cover-box {
  width: min(62vw, 240px); aspect-ratio: 1;
  margin: 0 auto 18px; border-radius: 20px; overflow: hidden;
  background: var(--card);
  box-shadow: 0 20px 48px rgba(0, 0, 0, 0.5), 0 0 0 1px var(--line);
  position: relative;
}
.cover-box > img#cover {
  width: 100%; height: 100%; object-fit: cover; display: block;
  position: relative; z-index: 0;
}
/* Bottom black gradient bar when official video is available */
.cover-video-shade {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 38%;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(
    180deg,
    rgba(0, 0, 0, 0) 0%,
    rgba(0, 0, 0, 0.35) 42%,
    rgba(0, 0, 0, 0.72) 100%
  );
}
.cover-video-shade[hidden] { display: none !important; }
/* video.png badge — bottom-right on cover */
.cover-video-btn {
  position: absolute;
  right: 10px;
  bottom: 10px;
  z-index: 3;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.32);
  background: rgba(0, 0, 0, 0.45);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  cursor: pointer;
  -webkit-backdrop-filter: saturate(180%) blur(12px);
  backdrop-filter: saturate(180%) blur(12px);
  box-shadow:
    0 6px 16px rgba(0, 0, 0, 0.4),
    inset 0 1px 0 rgba(255, 255, 255, 0.22);
}
.cover-video-btn.hidden,
.cover-video-btn[hidden] {
  display: none !important;
}
.cover-video-btn img.ico {
  width: 20px;
  height: 20px;
  filter: brightness(0) invert(1) !important;
  opacity: 1 !important;
  pointer-events: none;
}
.cover-video-btn:active { transform: scale(0.94); }

/* Official music video: same HEIGHT as cover, wider landscape frame */
.track-video-layer {
  /* height matches .cover-box (square side = min(62vw, 240px)) */
  --cover-side: min(62vw, 240px);
  width: min(94vw, 400px);
  height: var(--cover-side);
  max-width: 100%;
  margin: 0 auto 18px;
  border-radius: 16px;
  overflow: hidden;
  position: relative;
  z-index: 4;
  background: #000;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 20px 48px rgba(0, 0, 0, 0.5), 0 0 0 1px var(--line);
  flex-shrink: 0;
}
.track-video-layer.hidden {
  display: none !important;
}
.track-video-layer video {
  width: 100%;
  height: 100%;
  /* Fill placeholder completely (no black bars); crop overflow if aspect differs */
  object-fit: cover;
  object-position: center center;
  background: #000;
  display: block;
}
.track-video-chrome {
  position: absolute;
  top: 8px;
  left: 8px;
  right: 8px;
  z-index: 5;
  display: flex;
  justify-content: space-between;
  align-items: center;
  pointer-events: none;
}
.track-video-chrome-btn {
  pointer-events: auto;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.3);
  background: rgba(0, 0, 0, 0.5);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  cursor: pointer;
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.2);
}
.track-video-chrome-btn img.ico {
  width: 16px;
  height: 16px;
  filter: brightness(0) invert(1) !important;
  pointer-events: none;
}
.track-video-chrome-btn:active { transform: scale(0.94); }

/* Video mode: hide square cover, show wide video frame */
#app.video-mode .cover-box {
  display: none !important;
}
#app.video-mode .cover-video-btn,
#app.video-mode .cover-video-shade {
  display: none !important;
}

/* True fullscreen of the video layer */
.track-video-layer.is-fs {
  position: fixed !important;
  inset: 0 !important;
  z-index: 2000 !important;
  width: 100vw !important;
  height: 100dvh !important;
  max-height: 100dvh !important;
  max-width: none !important;
  margin: 0 !important;
  border-radius: 0 !important;
  background: #000 !important;
}
.track-video-layer.is-fs video {
  /* Fullscreen: keep full frame visible */
  object-fit: contain;
  object-position: center center;
}
.track-video-layer.is-fs .track-video-chrome {
  top: max(12px, env(safe-area-inset-top, 0px));
  left: max(12px, env(safe-area-inset-left, 0px));
  right: max(12px, env(safe-area-inset-right, 0px));
}

html[data-theme="light"] .cover-video-btn {
  border: 1px solid rgba(255, 255, 255, 0.32);
  background: rgba(0, 0, 0, 0.45);
}
html[data-theme="light"] .cover-video-btn img.ico {
  filter: brightness(0) invert(1) !important;
}
.meta-block { text-align: center; padding: 0 8px; width: 100%; max-width: 340px; }
.player-page .title {
  font-size: 1.2rem; font-weight: 700; line-height: 1.35; margin-bottom: 6px;
  word-break: break-word; overflow-wrap: anywhere; white-space: normal;
  max-height: 2.8em; overflow: hidden;
}
.player-page .artist {
  color: var(--muted); font-size: 0.9rem; line-height: 1.35;
  word-break: break-word; overflow-wrap: anywhere;
}

.player-dock {
  flex: 0 0 auto; width: 100%; max-width: 340px; margin: 0 auto;
}

/* Actions above seek */
.actions {
  display: flex; justify-content: center; gap: 12px;
  margin-bottom: 14px;
}
.act-btn {
  width: 44px; height: 44px; border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.18);
  background: rgba(14, 28, 48, 0.4);
  display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer; padding: 0;
  transition: background 0.15s, border-color 0.15s, transform 0.12s, box-shadow 0.15s;
  -webkit-backdrop-filter: saturate(180%) blur(16px);
  backdrop-filter: saturate(180%) blur(16px);
  box-shadow:
    0 6px 16px rgba(0, 0, 0, 0.28),
    inset 0 1px 0 rgba(255, 255, 255, 0.2),
    inset 0 -1px 0 rgba(0, 0, 0, 0.15);
}
.act-btn:active { transform: scale(0.94) translateY(1px); }
.act-btn:disabled { opacity: 0.35; cursor: default; }
.act-btn.on {
  border-color: rgba(255, 255, 255, 0.34);
  background:
    linear-gradient(160deg, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0.06)),
    rgba(var(--amb-r, 180), var(--amb-g, 180), var(--amb-b, 180), 0.1);
  box-shadow:
    0 8px 20px rgba(0, 0, 0, 0.25),
    inset 0 1px 0 rgba(255, 255, 255, 0.38),
    0 0 0 1px rgba(255, 255, 255, 0.1);
}

/* Seek — glassy unfilled track + dark→bright fill + glassy thumb */
.seek-wrap { width: 100%; margin-bottom: 4px; }
.seek-track {
  position: relative; height: 28px;
  display: flex; align-items: center;
}
.seek-track::before {
  content: "";
  position: absolute; left: 0; right: 0; top: 50%;
  transform: translateY(-50%);
  height: 6px; border-radius: 999px;
  /* glassy unfilled rail */
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.16) 0%, rgba(255, 255, 255, 0.06) 100%);
  border: 1px solid rgba(255, 255, 255, 0.14);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.18),
    inset 0 -1px 0 rgba(0, 0, 0, 0.2),
    0 1px 4px rgba(0, 0, 0, 0.2);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  pointer-events: none; z-index: 0;
  box-sizing: border-box;
}
.seek-track input[type="range"] {
  position: relative; z-index: 2;
  -webkit-appearance: none; appearance: none;
  width: 100%; height: 6px; border-radius: 999px;
  background: transparent; outline: none; margin: 0; cursor: pointer;
}
.seek-track input[type="range"]::-webkit-slider-runnable-track {
  height: 6px; border-radius: 999px; background: transparent;
}
.seek-track input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 18px; height: 18px; border-radius: 50%;
  /* glassy pointer */
  background: linear-gradient(160deg, rgba(255, 255, 255, 0.6) 0%, rgba(255, 255, 255, 0.22) 55%, rgba(255, 255, 255, 0.1) 100%);
  border: 1px solid rgba(255, 255, 255, 0.55);
  box-shadow:
    0 0 0 3px rgba(255, 255, 255, 0.12),
    0 2px 10px rgba(0, 0, 0, 0.35),
    inset 0 1px 0 rgba(255, 255, 255, 0.7),
    inset 0 -1px 2px rgba(0, 0, 0, 0.15);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  margin-top: -6px; cursor: pointer;
  transition: box-shadow 0.15s ease, transform 0.12s ease;
}
.seek-track input[type="range"]::-moz-range-track {
  height: 6px; border-radius: 999px; background: transparent; border: 0;
}
.seek-track input[type="range"]::-moz-range-thumb {
  width: 18px; height: 18px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, 0.55);
  background: linear-gradient(160deg, rgba(255, 255, 255, 0.6) 0%, rgba(255, 255, 255, 0.22) 55%, rgba(255, 255, 255, 0.1) 100%);
  box-shadow:
    0 0 0 3px rgba(255, 255, 255, 0.12),
    0 2px 10px rgba(0, 0, 0, 0.35),
    inset 0 1px 0 rgba(255, 255, 255, 0.7);
}
.seek-fill {
  position: absolute; left: 0; top: 50%; transform: translateY(-50%);
  height: 6px; border-radius: 999px; width: 0%;
  /* ambient-tinted dark → light gradient */
  background: linear-gradient(
    90deg,
    rgba(var(--amb2-r, 14), var(--amb2-g, 165), var(--amb2-b, 233), 0.55) 0%,
    rgba(var(--amb-r, 56), var(--amb-g, 189), var(--amb-b, 248), 0.85) 45%,
    rgba(var(--amb-r, 56), var(--amb-g, 189), var(--amb-b, 248), 1) 78%,
    rgba(255, 255, 255, 0.92) 100%
  );
  box-shadow:
    0 0 12px rgba(var(--amb-r, 56), var(--amb-g, 189), var(--amb-b, 248), 0.5),
    inset 0 1px 0 rgba(255, 255, 255, 0.28);
  pointer-events: none; z-index: 1;
  max-width: 100%;
  transition: width 0.08s linear, background 0.4s ease, box-shadow 0.4s ease;
  opacity: 0;
}
/* Glow while dragging the pointer */
.seek-wrap.seeking .seek-fill {
  box-shadow:
    0 0 18px rgba(var(--amb-r, 180), var(--amb-g, 180), var(--amb-b, 180), 0.55),
    0 0 36px rgba(255, 255, 255, 0.2),
    inset 0 1px 0 rgba(255, 255, 255, 0.35);
  transition: width 0s, box-shadow 0.15s ease;
}
.seek-wrap.seeking .seek-track input[type="range"]::-webkit-slider-thumb {
  transform: scale(1.12);
  box-shadow:
    0 0 0 5px rgba(255, 255, 255, 0.22),
    0 0 22px rgba(var(--amb-r, 180), var(--amb-g, 180), var(--amb-b, 180), 0.45),
    0 2px 12px rgba(0, 0, 0, 0.4),
    inset 0 1px 0 rgba(255, 255, 255, 0.75),
    inset 0 -1px 2px rgba(0, 0, 0, 0.15);
}
.seek-wrap.seeking .seek-track input[type="range"]::-moz-range-thumb {
  transform: scale(1.12);
  box-shadow:
    0 0 0 5px rgba(255, 255, 255, 0.22),
    0 0 22px rgba(var(--amb-r, 180), var(--amb-g, 180), var(--amb-b, 180), 0.45),
    0 2px 12px rgba(0, 0, 0, 0.4),
    inset 0 1px 0 rgba(255, 255, 255, 0.75);
}
.seek-wrap.seeking .seek-track::before {
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.22),
    0 0 14px rgba(255, 255, 255, 0.12);
}
.times {
  display: flex; justify-content: space-between;
  font-size: 0.7rem; color: var(--muted); margin-top: 2px;
  font-variant-numeric: tabular-nums;
}

/* Controls — centered play */
.controls {
  display: flex; align-items: center; justify-content: center; gap: 20px;
  margin: 10px 0 4px;
}
.cbtn {
  width: 48px; height: 48px; border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.18);
  background: rgba(14, 28, 48, 0.42);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; padding: 0;
  -webkit-backdrop-filter: saturate(180%) blur(16px);
  backdrop-filter: saturate(180%) blur(16px);
  box-shadow:
    0 8px 20px rgba(0, 0, 0, 0.3),
    inset 0 1px 0 rgba(255, 255, 255, 0.22),
    inset 0 -2px 4px rgba(0, 0, 0, 0.18);
  transition: transform 0.12s, box-shadow 0.15s, background 0.15s;
}
.cbtn.main {
  width: 64px; height: 64px;
  border: 1px solid rgba(var(--amb-r, 56), var(--amb-g, 189), var(--amb-b, 248), 0.5);
  /* default = paused (darker); .is-playing makes it brighter */
  background: linear-gradient(
    145deg,
    rgba(var(--amb-r, 56), var(--amb-g, 189), var(--amb-b, 248), 0.45),
    rgba(var(--amb2-r, 14), var(--amb2-g, 165), var(--amb2-b, 233), 0.32)
  );
  box-shadow:
    0 10px 28px rgba(var(--amb-r, 56), var(--amb-g, 189), var(--amb-b, 248), 0.22),
    0 4px 12px rgba(0, 0, 0, 0.28),
    inset 0 1px 0 rgba(255, 255, 255, 0.28),
    inset 0 -2px 6px rgba(0, 0, 0, 0.2);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  transition: background 0.35s ease, box-shadow 0.35s ease, border-color 0.35s ease, filter 0.35s ease;
  filter: brightness(0.88) saturate(0.95);
}
.cbtn.main.is-playing {
  background: linear-gradient(
    145deg,
    rgba(var(--amb-r, 56), var(--amb-g, 189), var(--amb-b, 248), 1),
    rgba(var(--amb2-r, 14), var(--amb2-g, 165), var(--amb2-b, 233), 0.92),
    rgba(255, 255, 255, 0.35)
  );
  border-color: rgba(255, 255, 255, 0.55);
  box-shadow:
    0 16px 40px rgba(var(--amb-r, 56), var(--amb-g, 189), var(--amb-b, 248), 0.55),
    0 0 28px rgba(var(--amb-r, 56), var(--amb-g, 189), var(--amb-b, 248), 0.4),
    0 4px 12px rgba(0, 0, 0, 0.22),
    inset 0 1px 0 rgba(255, 255, 255, 0.65),
    inset 0 -2px 6px rgba(var(--amb-r, 56), var(--amb-g, 189), var(--amb-b, 248), 0.3);
  filter: brightness(1.28) saturate(1.2) contrast(1.05);
}
.cbtn.main.is-paused {
  filter: brightness(0.78) saturate(0.88);
}
.cbtn:active {
  transform: scale(0.94) translateY(1px);
  box-shadow:
    0 4px 12px rgba(0, 0, 0, 0.3),
    inset 0 1px 0 rgba(255, 255, 255, 0.15);
}

/* Lists */
.list { display: flex; flex-direction: column; gap: 6px; width: 100%; padding-bottom: 0; }
.track {
  display: grid;
  grid-template-columns: 28px 46px minmax(0, 1fr) auto auto;
  gap: 8px; align-items: center;
  padding: 10px;
  background: rgba(14, 28, 48, 0.42);
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, 0.10);
  cursor: pointer;
  -webkit-backdrop-filter: saturate(160%) blur(16px);
  backdrop-filter: saturate(160%) blur(16px);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.06);
}
.track.no-num { grid-template-columns: 46px minmax(0, 1fr) auto auto; }
.track .num { font-size: 0.7rem; color: var(--muted); text-align: center; font-weight: 600; }
.track.playing {
  border-color: rgba(var(--amb-r, 180), var(--amb-g, 180), var(--amb-b, 180), 0.95) !important;
  background:
    linear-gradient(160deg,
      rgba(var(--amb-r, 180), var(--amb-g, 180), var(--amb-b, 180), 0.85) 0%,
      rgba(var(--amb-r, 180), var(--amb-g, 180), var(--amb-b, 180), 0.55) 45%,
      rgba(var(--amb-r, 180), var(--amb-g, 180), var(--amb-b, 180), 0.35) 100%) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.4),
    0 0 0 1.5px rgba(var(--amb-r, 180), var(--amb-g, 180), var(--amb-b, 180), 0.55),
    0 12px 32px rgba(var(--amb-r, 180), var(--amb-g, 180), var(--amb-b, 180), 0.45) !important;
}
.track.playing .num { color: #fff !important; }
.track.playing .t .n { color: #fff !important; }
.track > img,
.track img.art {
  width: 46px; height: 46px; border-radius: 10px; object-fit: cover;
  background: #183252; flex-shrink: 0;
  filter: none;
}
.track .track-actions img.ico {
  width: 18px !important;
  height: 18px !important;
  border-radius: 0 !important;
  object-fit: contain !important;
  background: transparent !important;
  filter: brightness(0) invert(1) !important;
}
.track .t { min-width: 0; overflow: hidden; }
.track .t .n {
  font-size: 0.86rem; font-weight: 600; line-height: 1.3;
  word-break: break-word; overflow-wrap: anywhere;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.track .t .a {
  font-size: 0.72rem; color: var(--muted); margin-top: 3px;
  word-break: break-word;
  display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden;
}
.track .d { font-size: 0.68rem; color: var(--muted); flex-shrink: 0; }
.track .track-actions { flex-shrink: 0; display: flex; align-items: center; gap: 4px; }
.track .track-actions .icon-act {
  width: 34px; height: 34px; border-radius: 10px;
  display: inline-flex; align-items: center; justify-content: center;
  background: rgba(255,255,255,0.08); border: 0; padding: 0;
}
.track .track-actions .icon-act img.ico {
  width: 16px; height: 16px;
  filter: brightness(0) invert(1);
  opacity: 0.9;
}
.track .track-actions .track-fav.on img.ico { opacity: 1; }
/* Artist result / favorite tile — own layout (not track grid) */
.artist-tile {
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  padding: 12px 10px;
  margin-bottom: 8px;
  background: rgba(255,255,255,0.07);
  border: 1px solid rgba(255,255,255,0.14);
  border-radius: 16px;
  cursor: pointer;
  -webkit-backdrop-filter: saturate(160%) blur(16px);
  backdrop-filter: saturate(160%) blur(16px);
}
.artist-tile .art {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  object-fit: cover;
  background: #183252;
  flex-shrink: 0;
}
.artist-tile .t {
  min-width: 0;
  overflow: hidden;
}
.artist-tile .t .n {
  font-size: 0.95rem;
  font-weight: 700;
  line-height: 1.25;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: #fff;
}
.artist-tile .t .a {
  font-size: 0.72rem;
  color: var(--muted);
  margin-top: 3px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.artist-tile .artist-actions {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}
.artist-tile .artist-actions .icon-act {
  width: 36px;
  height: 36px;
  border-radius: 11px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(255,255,255,0.1);
  border: 0;
  padding: 0;
}
.artist-tile .artist-actions .icon-act img.ico {
  width: 17px;
  height: 17px;
  filter: brightness(0) invert(1);
  opacity: 0.95;
}



.queue-controls { display: flex; gap: 8px; margin-bottom: 14px; }
.queue-btn {
  flex: 1; border: 1px solid var(--line); background: var(--card); color: var(--text);
  border-radius: 12px; padding: 10px; font-size: 0.85rem; font-weight: 600; cursor: pointer;
}
.queue-btn.active {
  background: rgba(255, 255, 255, 0.12);
  color: #eaf6ff;
  border-color: rgba(255, 255, 255, 0.28);
}

#searchHistoryContainer { margin-bottom: 12px; }
.hist-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 6px; }
.hist-label { font-size: 0.8rem; color: var(--muted); }
.hist { display: flex; flex-direction: column; gap: 4px; }
.hist-item {
  display: flex; align-items: center; justify-content: space-between;
  background: rgba(14, 28, 48, 0.42);
  border: 1px solid rgba(255, 255, 255, 0.10);
  border-radius: 12px; padding: 9px 12px;
  -webkit-backdrop-filter: saturate(160%) blur(14px);
  backdrop-filter: saturate(160%) blur(14px);
}
.hist-item .q {
  flex: 1; border: 0; background: transparent; color: var(--text);
  font-size: 0.85rem; text-align: left; cursor: pointer; padding: 0;
}
.hist-item .del-hist {
  border: 0; background: transparent; color: var(--muted);
  font-size: 0.72rem; font-weight: 600; cursor: pointer; padding: 4px 6px;
}
#histHint { display: none; }
#histHint:not(:empty) { display: block; }

/* NAV — floating glass (template-style: filler covers safe-area under it) */
.nav {
  position: fixed;
  left: 50%;
  transform: translate3d(-50%, 0, 0);
  bottom: 0;
  width: calc(100% - 24px);
  max-width: 406px;
  height: 64px;
  min-height: 64px;
  padding: 6px;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  gap: 0;
  z-index: 50;
  border-radius: 24px;
  background: rgba(16, 32, 56, 0.55);
  border: 1px solid rgba(255, 255, 255, 0.18);
  -webkit-backdrop-filter: saturate(200%) blur(32px);
  backdrop-filter: saturate(200%) blur(32px);
  box-shadow:
    0 18px 48px rgba(0, 0, 0, 0.55),
    0 6px 16px rgba(0, 0, 0, 0.35),
    0 0 0 1px rgba(255, 255, 255, 0.06),
    inset 0 1.5px 0 rgba(255, 255, 255, 0.22),
    inset 0 -2px 6px rgba(0, 0, 0, 0.25);
  isolation: isolate;
}
.nav::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(255,255,255,0.14) 0%, transparent 42%, transparent 70%, rgba(0,0,0,0.12) 100%);
  z-index: 2;
}
.nav-pill {
  position: absolute;
  top: 6px;
  left: 6px;
  height: calc(100% - 12px);
  width: calc((100% - 12px) / 5);
  border-radius: 18px;
  /* glassy transparent + ambient tint (not fixed blue) */
  background:
    linear-gradient(165deg, rgba(255,255,255,0.22) 0%, rgba(255,255,255,0.06) 100%),
    rgba(var(--amb-r, 180), var(--amb-g, 180), var(--amb-b, 180), 0.14);
  border: 1px solid rgba(255, 255, 255, 0.28);
  box-shadow:
    0 6px 18px rgba(0, 0, 0, 0.25),
    inset 0 1px 0 rgba(255, 255, 255, 0.38),
    inset 0 -1px 0 rgba(0, 0, 0, 0.15);
  -webkit-backdrop-filter: saturate(160%) blur(18px);
  backdrop-filter: saturate(160%) blur(18px);
  transition: transform 0.7s cubic-bezier(0.22, 1, 0.36, 1), background 0.45s ease, border-color 0.45s ease;
  z-index: 5;
  pointer-events: auto;
  will-change: transform;
  cursor: grab;
  touch-action: none;
  -webkit-user-select: none;
  user-select: none;
}
.nav-pill.dragging {
  transition: none !important;
  cursor: grabbing;
  z-index: 6;
  background:
    linear-gradient(165deg, rgba(255,255,255,0.28) 0%, rgba(255,255,255,0.08) 100%),
    rgba(var(--amb-r, 180), var(--amb-g, 180), var(--amb-b, 180), 0.2);
  box-shadow:
    0 10px 28px rgba(0, 0, 0, 0.32),
    inset 0 1px 0 rgba(255, 255, 255, 0.45);
}
.nav.dragging-pill button {
  pointer-events: none;
}
.nav button {
  flex: 1;
  position: relative;
  z-index: 7; /* above highlight pill */
  border: 0;
  background: transparent;
  color: rgba(255, 255, 255, 0.92);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  padding: 6px 2px;
  cursor: pointer;
  min-height: 50px;
  border-radius: 16px;
  transition: color 0.25s ease;
}
.nav button span {
  font-size: 0.55rem;
  font-weight: 600;
  line-height: 1.1;
  display: block;
}
.nav button,
.nav button.active {
  color: rgba(255, 255, 255, 0.92) !important;
}
.nav button .nav-ico,
.nav button.active .nav-ico {
  filter: brightness(0) invert(1) !important;
  opacity: 0.95;
}
.nav-ico { width: 22px; height: 22px; }

/* Sheets */
.sheet {
  position: fixed; inset: 0; z-index: 80; max-width: 430px; margin: 0 auto;
  background: rgba(2, 8, 18, 0.75);
  display: flex; align-items: flex-end; justify-content: center;
}
.sheet.hidden { display: none !important; }
.sheet-card {
  width: 100%; max-height: 82vh;
  background: rgba(12, 24, 44, 0.55);
  border-radius: 22px 22px 0 0;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-bottom: 0;
  padding: 10px 14px calc(12px + env(safe-area-inset-bottom, 0px));
  display: flex; flex-direction: column; overflow: hidden;
  -webkit-backdrop-filter: saturate(190%) blur(28px);
  backdrop-filter: saturate(190%) blur(28px);
  box-shadow:
    0 -12px 40px rgba(0,0,0,0.35),
    inset 0 1px 0 rgba(255,255,255,0.14);
}
.sheet-card.small { max-height: 55vh; }
.grab {
  width: 36px; height: 4px; border-radius: 4px;
  background: rgba(255, 255, 255, 0.22); margin: 2px auto 12px;
}
.sheet-title { font-size: 1.02rem; font-weight: 700; margin: 0 0 12px; }
.sheet-info { margin-bottom: 12px; color: var(--muted); font-size: 0.9rem; line-height: 1.4; }
.sheet-actions { display: flex; flex-direction: row; gap: 8px; }
.sheet-actions .btn-close,
.sheet-actions .btn-confirm,
.sheet-actions .btn-danger { flex: 1; }
.modal-pl-list { display: flex; flex-direction: column; gap: 6px; margin-bottom: 10px; max-height: 50vh; overflow-y: auto; }
.modal-pick-pl {
  width: 100%; text-align: left;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(14, 28, 48, 0.4);
  color: var(--text);
  border-radius: 12px; padding: 14px; font-size: 0.92rem; font-weight: 600; cursor: pointer;
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
}
.modal-pick-pl:active { background: rgba(255, 255, 255, 0.14); border-color: rgba(255, 255, 255, 0.3); }
.modal-pl-item {
  display: flex; align-items: center; justify-content: space-between;
  background: rgba(14, 28, 48, 0.4);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 12px; padding: 12px 14px; gap: 8px;
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
}
.modal-pl-item .pl-info { flex: 1; min-width: 0; }
.modal-pl-item .pl-name { font-weight: 600; font-size: 0.9rem; word-break: break-word; }
.modal-pl-item .pl-count { font-size: 0.75rem; color: var(--muted); }
.modal-pl-item .pl-actions { display: flex; gap: 6px; flex-shrink: 0; }
.modal-pl-item .pl-actions button {
  border: 0; background: rgba(255, 255, 255, 0.1); color: #eaf6ff;
  border-radius: 8px; padding: 6px 10px; font-size: 0.7rem; font-weight: 600; cursor: pointer;
}
.modal-pl-item .pl-actions .del { color: #e74c3c; background: rgba(231, 76, 60, 0.12); }
.modal-pl-item .pl-id { font-size: 0.6rem; color: var(--muted); font-family: monospace; margin-top: 2px; }

.search-row, .row { display: flex; gap: 8px; margin-bottom: 10px; }
.search-row input, .row input {
  flex: 1; min-width: 0;
  background: rgba(14, 28, 48, 0.42);
  border: 1px solid rgba(255, 255, 255, 0.14);
  color: var(--text);
  border-radius: 14px;
  padding: 12px 14px;
  font-size: 0.95rem;
  outline: 0;
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  backdrop-filter: saturate(180%) blur(20px);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.08);
}
.search-row input::placeholder { color: rgba(234, 246, 255, 0.4); }
.search-row input:focus, .row input:focus {
  border-color: rgba(255, 255, 255, 0.35);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.1), 0 0 0 3px rgba(255, 255, 255, 0.08);
}
.search-row button {
  border: 1px solid rgba(255, 255, 255, 0.22);
  background: linear-gradient(160deg, rgba(255, 255, 255, 0.16), rgba(255, 255, 255, 0.06));
  color: #eaf6ff;
  font-weight: 700;
  border-radius: 14px;
  padding: 0 14px;
  cursor: pointer;
  flex-shrink: 0;
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  backdrop-filter: saturate(180%) blur(14px);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.25), 0 4px 14px rgba(0, 0, 0, 0.18);
}
.btn-close {
  width: 100%; border: 1px solid var(--line); background: transparent; color: var(--muted);
  border-radius: 12px; padding: 12px; font-size: 0.9rem; cursor: pointer;
}
.btn-confirm {
  border: 1px solid rgba(255, 255, 255, 0.28);
  background: linear-gradient(145deg, rgba(255,255,255,0.22), rgba(255,255,255,0.08));
  color: #eaf6ff; border-radius: 12px;
  padding: 12px; font-weight: 700; cursor: pointer; font-size: 0.9rem;
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
}
.btn-danger {
  border: 0; background: #e74c3c; color: #fff; border-radius: 12px;
  padding: 12px; font-weight: 700; cursor: pointer; font-size: 0.9rem;
}
.link { border: 0; background: transparent; color: rgba(255,255,255,0.85); font-weight: 600; font-size: 0.75rem; cursor: pointer; }
.hint { text-align: center; color: var(--muted); font-size: 0.84rem; padding: 18px 8px; line-height: 1.4; }
.chips-wrap {
  position: relative;
  margin-bottom: 10px;
}
.chips {
  display: flex;
  flex-wrap: nowrap;
  gap: 6px;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  padding: 2px 2px 6px;
  mask-image: linear-gradient(to right, transparent 0, #000 18px, #000 calc(100% - 18px), transparent 100%);
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 18px, #000 calc(100% - 18px), transparent 100%);
}
.chips::-webkit-scrollbar { display: none; height: 0; }
.chip {
  flex: 0 0 auto;
  white-space: nowrap;
}
.chip {
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: rgba(14, 28, 48, 0.42);
  color: var(--text);
  border-radius: 999px;
  padding: 7px 14px;
  font-size: 0.78rem;
  cursor: pointer;
  -webkit-backdrop-filter: saturate(180%) blur(16px);
  backdrop-filter: saturate(180%) blur(16px);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.1), 0 4px 12px rgba(0,0,0,0.12);
}
.chip.on {
  background:
    linear-gradient(160deg, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0.06)),
    rgba(var(--amb-r, 180), var(--amb-g, 180), var(--amb-b, 180), 0.1);
  color: #eaf6ff;
  border-color: rgba(255, 255, 255, 0.3);
  font-weight: 600;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.3), 0 4px 14px rgba(0,0,0,0.18);
}
.toast {
  position: fixed; left: 50%; transform: translateX(-50%);
  bottom: calc(var(--bot-gap) + 12px); z-index: 100;
  background: #183252; color: var(--text); border: 1px solid var(--line);
  border-radius: 999px; padding: 11px 16px; font-size: 0.84rem; max-width: 90%;
}
.toast.hidden { display: none !important; }
.loading { text-align: center; color: var(--muted); padding: 16px; }
.sc-embed, .sc-embed.on, .sc-embed.hidden {
  position: fixed !important; left: -10000px !important; top: 0 !important;
  width: 1px !important; height: 1px !important; opacity: 0 !important;
  pointer-events: none !important; border: 0 !important; z-index: -1 !important;
}

.playlist-page { padding-bottom: calc(var(--bot-gap) + 16px) !important; }
.pl-manage-bar { display: none !important; }



/* Header icon buttons (queue shuffle/loop, playlist add/import) */
.icon-head-btn {
  width: 38px; height: 38px; min-width: 38px; padding: 0;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: rgba(14, 28, 48, 0.42);
  color: #eaf6ff;
  display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, transform 0.12s;
  -webkit-backdrop-filter: saturate(180%) blur(16px);
  backdrop-filter: saturate(180%) blur(16px);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.1), 0 4px 12px rgba(0,0,0,0.15);
  position: relative;
  overflow: hidden;
}
.icon-head-btn img.ico { width: 20px; height: 20px; }
.icon-head-btn:active { transform: scale(0.94); }
.icon-head-btn.active {
  background:
    linear-gradient(160deg, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0.06)),
    rgba(var(--amb-r, 180), var(--amb-g, 180), var(--amb-b, 180), 0.12);
  border-color: rgba(255, 255, 255, 0.32);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.3), 0 4px 14px rgba(0,0,0,0.18);
}
.icon-head-btn.active img.ico {
  filter: brightness(0) invert(1);
}




/* Manage sheet share/delete icon buttons */
.modal-pl-item .pl-actions button.icon-act {
  width: 34px; height: 34px; padding: 0;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 9px;
}
.modal-pl-item .pl-actions button.icon-act img.ico {
  width: 16px; height: 16px;
}
.modal-pl-item .pl-actions .share.icon-act img.ico {
  filter: brightness(0) invert(1);
}
.modal-pl-item .pl-actions .del.icon-act {
  color: #e74c3c; background: rgba(231, 76, 60, 0.12);
}
.modal-pl-item .pl-actions .del.icon-act img.ico {
  filter: brightness(0) saturate(100%) invert(35%) sepia(70%) saturate(2000%) hue-rotate(340deg);
}

.hist-item .del-hist {
  width: 32px; height: 32px; padding: 0;
  border: 1px solid rgba(231, 76, 60, 0.25);
  background: rgba(231, 76, 60, 0.1);
  border-radius: 8px;
  display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer; flex-shrink: 0;
}


/* Mobile-safe icon sizing */
img.ico, img.nav-ico {
  -webkit-user-select: none;
  user-select: none;
  max-width: 100%;
  max-height: 100%;
}

.search-row button.search-go {
  width: 48px; min-width: 48px; padding: 0;
  display: inline-flex; align-items: center; justify-content: center;
}
.search-row button.search-go img.ico {
  width: 20px; height: 20px;
  filter: brightness(0) invert(1);
}

/* Unified delete / action icon buttons (same as Manage sheet) */
.track-actions .icon-act,
.hist-item .icon-act,
.modal-pl-item .pl-actions button.icon-act {
  width: 34px;
  height: 34px;
  min-width: 34px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 9px;
  border: 0;
  cursor: pointer;
  flex-shrink: 0;
}
.track-actions .icon-act img.ico,
.hist-item .icon-act img.ico,
.modal-pl-item .pl-actions button.icon-act img.ico {
  width: 16px;
  height: 16px;
  object-fit: contain;
  display: block;
  filter: brightness(0) invert(1);
}
.track-actions .del.icon-act,
.hist-item .del.icon-act,
.modal-pl-item .pl-actions .del.icon-act {
  background: rgba(231, 76, 60, 0.12);
}
.track-actions .del.icon-act:active,
.hist-item .del.icon-act:active {
  background: rgba(231, 76, 60, 0.25);
}
.modal-pl-item .pl-actions .share.icon-act {
  background: rgba(255, 255, 255, 0.1);
}
.modal-pl-item .pl-actions .share.icon-act img.ico {
  filter: brightness(0) invert(1);
}

/* Queue — whole page scrolls; title lives in header on list pages */
#page-queue .page-content {
  display: block;
  overflow-y: auto !important;
  -webkit-overflow-scrolling: touch;
  padding-bottom: calc(var(--nav) + env(safe-area-inset-bottom, 0px) + 16px) !important;
  background: transparent !important;
}
#page-queue .page-head.pl-head {
  position: relative !important;
  top: auto !important;
  background: transparent !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
  margin-bottom: 7px !important;
}
#page-queue #upList {
  overflow: visible !important;
  padding-top: 0;
  padding-bottom: 0;
}

/* Genre tiles — 2 per row */
.genre-section {
  margin: 4px 0 16px;
}
.genre-section-title {
  font-size: 0.8rem;
  color: var(--muted);
  font-weight: 600;
  margin-bottom: 10px;
}
.genre-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.genre-tile {
  position: relative;
  border: 0;
  border-radius: 14px;
  overflow: hidden;
  aspect-ratio: 1.55 / 1;
  cursor: pointer;
  padding: 0;
  background: linear-gradient(135deg, #1e3a5f, #0c1c33);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25);
  transition: transform 0.12s ease;
}
.genre-tile:active { transform: scale(0.97); }
.genre-tile .genre-bg {
  position: absolute; inset: 0;
  background: var(--g-grad, linear-gradient(135deg, #1e3a5f, #0c1c33));
}
.genre-tile .genre-bg::after {
  content: "";
  position: absolute; inset: 0;
  background:
    radial-gradient(circle at 20% 30%, rgba(255,255,255,0.18), transparent 45%),
    radial-gradient(circle at 80% 70%, rgba(0,0,0,0.25), transparent 50%);
}
.genre-tile .genre-label {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: 20px 12px 11px;
  background: linear-gradient(to top, rgba(0,0,0,0.55), transparent);
  color: #fff;
  font-weight: 700;
  font-size: 0.9rem;
  text-align: left;
  letter-spacing: -0.01em;
  z-index: 2;
}
.genre-tile .genre-icon {
  position: absolute;
  top: 12px; right: 12px;
  font-size: 1.4rem;
  opacity: 0.85;
  z-index: 2;
  filter: drop-shadow(0 2px 6px rgba(0,0,0,0.35));
}

/* Language pick sheet buttons */
.lang-pick-row {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 12px;
}
.lang-pick-btn {
  width: 100%;
  border: 1px solid var(--line);
  background: var(--card);
  color: var(--text);
  border-radius: 12px;
  padding: 14px 16px;
  font-size: 0.95rem;
  font-weight: 600;
  cursor: pointer;
  text-align: left;
}
.lang-pick-btn:active {
  background: rgba(255, 255, 255, 0.12);
  border-color: rgba(255, 255, 255, 0.28);
}
.lang-pick-btn .sub {
  display: block;
  font-size: 0.75rem;
  color: var(--muted);
  font-weight: 500;
  margin-top: 3px;
}

/* Header sits above ambient; content transparent when player */
#app > .header { z-index: 30; }
#app > .content { z-index: 5; position: relative; }
.page { background: transparent; }
/* all pages transparent — ambient shows through */


/* Boot loading overlay — fixed fullscreen so Android always paints it */
.view-loading {
  position: fixed !important;
  inset: 0 !important;
  left: 0 !important; right: 0 !important; top: 0 !important; bottom: 0 !important;
  width: 100% !important;
  height: 100% !important;
  z-index: 1000 !important;
  display: flex !important;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0;
  background-color: #05050a !important;
  background-image: none !important;
  pointer-events: none;
  opacity: 1;
  visibility: visible;
}
html[data-theme="light"] .view-loading {
  background-color: #f5f5f7 !important;
  background-image: none !important;
}
.view-loading.hidden {
  display: none !important;
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}
/* Same position/size as iOS splash mark: centered, 56vmin */
.view-loading .load-stage {
  position: relative;
  width: 56vmin;
  height: 56vmin;
    flex-shrink: 0;
}
.view-loading .load-logo {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 100%;
  height: 100%;
  transform: translate(-50%, -50%);
  object-fit: contain;
  opacity: 1 !important;
  display: block !important;
  visibility: visible !important;
  pointer-events: none;
}
.view-loading .load-below {
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  margin-top: 22px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}
.load-spin {
  width: 36px; height: 36px;
  border-radius: 50%;
  border: 3px solid rgba(255, 255, 255, 0.15);
  border-top-color: rgba(255, 255, 255, 0.7);
  animation: spin 0.8s linear infinite;
}
html[data-theme="light"] .load-spin {
  border-color: rgba(17, 24, 39, 0.15);
  border-top-color: #111827;
}
.load-text {
  color: rgba(255, 255, 255, 0.72);
  font-size: 0.88rem;
  font-weight: 600;
}
html[data-theme="light"] .load-text {
  color: #111827;
}
@keyframes spin {
  to { transform: rotate(360deg); }
}

/* Ensure lists scroll under glass footer */
#page-queue .page-content,
#page-liked .page-content,
#page-playlists .page-content,
#page-search .page-content {
  background: transparent !important;
  padding-bottom: calc(var(--nav) + env(safe-area-inset-bottom, 0px) + 16px);
}
#page-queue #upList,
#page-liked #likedList,
#page-playlists #plTracks {
  padding-bottom: 0;
}

/* Search history hidden by default via .hidden */
#searchHistoryContainer.hidden { display: none !important; }


/* Lists scroll under nav; soft fade at top under title */
#page-liked .page-content,
#page-playlists .page-content,
#page-search .page-content {
  padding-bottom: calc(var(--nav) + env(safe-area-inset-bottom, 0px) + 16px) !important;
  background: transparent !important;
}
#page-liked #likedList,
#page-playlists #plTracks,
#page-search #searchList {
  padding-top: 0;
}
.list { gap: 8px; }

/* Track fade when sliding under page title */
.track.fade-under {
  transition: none;
  will-change: opacity;
}


/* Search page — fixed title + bar, scrolling results */
#page-search .page-content.search-page {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  padding-bottom: 0 !important;
  background: transparent !important;
}
#page-search .search-sticky {
  flex: 0 0 auto;
  z-index: 12;
  background: transparent;
  padding-bottom: 4px;
}
#page-search .search-sticky .page-head {
  margin-bottom: 8px;
}
#page-search .search-sticky .search-row {
  margin-bottom: 4px;
}
#page-search .search-scroll {
  flex: 1 1 auto;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding-bottom: calc(var(--nav) + env(safe-area-inset-bottom, 0px) + 16px);
  /* soft fade handled in JS — no hard mask cut */
}

/* Liked / playlists also soft-fade near nav via mask on content */
#page-liked .page-content,
#page-playlists .page-content {
  /* soft fade handled in JS — no hard mask cut */
}

.list-end-spacer {
  height: 12px;
  flex-shrink: 0;
  pointer-events: none;
  visibility: hidden;
}


/* List pages: content scrolls; titles live in header when is-list-page */
#page-liked .page-content,
#page-playlists .page-content,
#page-queue .page-content {
  overflow-y: auto !important;
  -webkit-overflow-scrolling: touch;
}
/* When title is still in-page (before first navigation), keep previous sticky behavior safe */
#page-liked .page-head,
#page-playlists .page-head,
#page-queue .page-head.pl-head {
  position: relative !important;
  top: auto !important;
  background: transparent !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}
#page-search .page-content.search-page {
  overflow-y: auto !important;
  display: block !important;
}
#page-search .search-scroll {
  overflow: visible !important;
  mask-image: none !important;
  -webkit-mask-image: none !important;
}

/* Player button press + glow fill */
.act-btn, .cbtn {
  position: relative;
  overflow: hidden;
}
.act-btn.pressed, .cbtn.pressed {
  transform: scale(0.92) translateY(1px);
  filter: brightness(1.18);
  transition: transform 0.18s cubic-bezier(0.22, 0.61, 0.36, 1), filter 0.25s ease;
}
.act-btn, .cbtn {
  transition: transform 0.22s cubic-bezier(0.22, 0.61, 0.36, 1), filter 0.28s ease, background 0.15s, border-color 0.15s, box-shadow 0.15s;
}

.act-btn img.ico, .cbtn img.ico {
  position: relative;
  z-index: 3;
}

.chip, .search-go, .btn-primary, .btn-close, .btn-confirm, .btn-danger,
.genre-tile, .modal-pick-pl, .queue-btn, button.link {
  position: relative;
  overflow: hidden;
}
.chip.pressed, .search-go.pressed, .btn-primary.pressed,
.icon-head-btn.pressed, .genre-tile.pressed {
  transform: scale(0.94);
  filter: brightness(1.14);
  transition: transform 0.2s cubic-bezier(0.22, 0.61, 0.36, 1), filter 0.28s ease;
}
.nav button.pressed {
  transform: none !important;
  filter: none !important;
}
.track.fade-under {
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
}

.genre-tile.fade-under,
.genre-section.fade-under,
.track.fade-under,
.hist-item.fade-under {
  will-change: opacity, mask-image;
}
.genre-section {
  position: relative;
}






/* Button glow — long smooth burst that completes even on quick tap */





/* iOS-style edge fade — JS sets opacity + mask; keep compositing smooth */
.track.fade-under,
.genre-tile.fade-under,
.genre-section.fade-under,
.hist-item.fade-under,
.genre-section-title.fade-under {
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
  /* promote layer so mask/opacity don't glitch mid-scroll */
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
}

/* Titles stay transparent — ambient shows through; boundary is the underline / search bar */
#page-queue .page-head.pl-head,
#page-liked .page-head.pl-head,
#page-playlists .page-head.pl-head,
#page-search .search-sticky,
#page-search .search-sticky .page-head {
  background: transparent !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
  box-shadow: none !important;
}


/* Tap glow uses ambient cover colors */
.btn-glow-burst {
  position: absolute;
  width: 10px;
  height: 10px;
  margin-left: -5px;
  margin-top: -5px;
  border-radius: 50%;
  pointer-events: none;
  background: radial-gradient(
    circle,
    rgba(255, 255, 255, 0.95) 0%,
    rgba(var(--amb-r, 200), var(--amb-g, 210), var(--amb-b, 220), 0.65) 35%,
    rgba(var(--amb-r, 200), var(--amb-g, 210), var(--amb-b, 220), 0) 70%
  );
  opacity: 0;
  transform: scale(0);
  z-index: 2;
}
.btn-glow-burst.run {
  animation: btnGlowFill 1.1s cubic-bezier(0.22, 0.61, 0.36, 1) forwards;
}
@keyframes btnGlowFill {
  0%   { opacity: 0; transform: scale(0); }
  10%  { opacity: 1; transform: scale(2.5); }
  30%  { opacity: 0.85; transform: scale(9); }
  55%  { opacity: 0.45; transform: scale(15); }
  100% { opacity: 0; transform: scale(24); }
}
.cbtn.main .btn-glow-burst {
  background: radial-gradient(
    circle,
    rgba(255, 255, 255, 0.98) 0%,
    rgba(var(--amb-r, 200), var(--amb-g, 210), var(--amb-b, 220), 0.7) 32%,
    rgba(var(--amb-r, 200), var(--amb-g, 210), var(--amb-b, 220), 0) 70%
  );
}


/* Playlist chips horizontal scroll with edge fade */
.chip {
  flex: 0 0 auto;
  white-space: nowrap;
}

/* Manage playlist drag rows */
.modal-pl-item {
  display: flex;
  align-items: center;
  gap: 8px;
}
.modal-pl-item .pl-drag-handle {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  min-width: 36px;
  padding: 6px 4px;
  cursor: grab;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.1);
}
.modal-pl-item .pl-drag-handle:active { cursor: grabbing; }
.modal-pl-item .pl-num {
  font-size: 0.7rem;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.75);
  line-height: 1;
}
.modal-pl-item .drag-ico {
  width: 16px !important;
  height: 16px !important;
  filter: brightness(0) invert(1);
  opacity: 0.75;
}
.modal-pl-item .drag-fallback {
  font-size: 14px;
  color: rgba(255,255,255,0.7);
  line-height: 1;
}
.modal-pl-item.dragging-pl {
  opacity: 0.85;
  background: rgba(255, 255, 255, 0.12) !important;
  border-color: rgba(255, 255, 255, 0.28) !important;
  box-shadow: 0 8px 24px rgba(0,0,0,0.35);
  z-index: 5;
}

/* Kill remaining blue chrome → pure glass */
.nav-pill,
.act-btn.on,
.chip.on,
.icon-head-btn.active,
.track.playing {
  /* ensure glass base wins over any leftover blue gradients */
}
.nav {
  background: rgba(16, 32, 56, 0.45) !important;
}


/* ===== Pure glass (no blue / no color accent) ===== */
.nav-pill {
  position: absolute !important;
  top: 6px !important;
  left: 6px !important;
  height: calc(100% - 12px) !important;
  border-radius: 18px !important;
  background: linear-gradient(165deg, rgba(255,255,255,0.2) 0%, rgba(255,255,255,0.06) 100%) !important;
  border: 1px solid rgba(255, 255, 255, 0.28) !important;
  box-shadow:
    0 6px 18px rgba(0, 0, 0, 0.28),
    inset 0 1px 0 rgba(255, 255, 255, 0.4),
    inset 0 -1px 0 rgba(0, 0, 0, 0.15) !important;
  -webkit-backdrop-filter: saturate(140%) blur(18px) !important;
  backdrop-filter: saturate(140%) blur(18px) !important;
}
.nav-pill.dragging {
  background: linear-gradient(165deg, rgba(255,255,255,0.28) 0%, rgba(255,255,255,0.1) 100%) !important;
  box-shadow:
    0 10px 28px rgba(0, 0, 0, 0.35),
    inset 0 1px 0 rgba(255, 255, 255, 0.5) !important;
}
.nav {
  background: rgba(12, 20, 36, 0.35) !important;
  border: 1px solid rgba(255, 255, 255, 0.16) !important;
  -webkit-backdrop-filter: saturate(160%) blur(28px) !important;
  backdrop-filter: saturate(160%) blur(28px) !important;
}

.act-btn,
.cbtn:not(.main),
.icon-head-btn,
.chip,
.search-row button,
.btn-primary,
.btn-confirm,
.btn-close,
.modal-pick-pl,
.queue-btn,
.modal-pl-item,
.hist-item,
.track {
  background: rgba(255, 255, 255, 0.07) !important;
  border-color: rgba(255, 255, 255, 0.14) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.12),
    0 4px 14px rgba(0, 0, 0, 0.15) !important;
  -webkit-backdrop-filter: saturate(150%) blur(14px) !important;
  backdrop-filter: saturate(150%) blur(14px) !important;
  color: #eaf6ff !important;
}
/* Add-to-playlist modal: no drop shadow behind playlist names */
#sheet-modal .modal-pick-pl,
#sheet-modal #modalList .modal-pick-pl,
#modalList .modal-pick-pl {
  box-shadow: none !important;
  background: rgba(255, 255, 255, 0.06) !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
}
html[data-theme="light"] #sheet-modal .modal-pick-pl,
html[data-theme="light"] #modalList .modal-pick-pl {
  box-shadow: none !important;
  background: rgba(15, 25, 45, 0.04) !important;
  border: 1px solid rgba(15, 25, 45, 0.08) !important;
  color: #101828 !important;
}
.act-btn.on,
.chip.on,
.icon-head-btn.active,
.queue-btn.active {
  background: linear-gradient(160deg, rgba(255,255,255,0.18), rgba(255,255,255,0.06)) !important;
  border-color: rgba(255, 255, 255, 0.3) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.28),
    0 6px 18px rgba(0, 0, 0, 0.2) !important;
}
/* Now-playing: strong ambient-colored tile highlight */
.track.playing,
#upList .track.playing {
  background:
    linear-gradient(160deg,
      rgba(var(--amb-r, 180), var(--amb-g, 180), var(--amb-b, 180), 0.88) 0%,
      rgba(var(--amb-r, 180), var(--amb-g, 180), var(--amb-b, 180), 0.58) 45%,
      rgba(var(--amb-r, 180), var(--amb-g, 180), var(--amb-b, 180), 0.38) 100%) !important;
  border-color: rgba(var(--amb-r, 180), var(--amb-g, 180), var(--amb-b, 180), 0.98) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.42),
    0 0 0 1.5px rgba(var(--amb-r, 180), var(--amb-g, 180), var(--amb-b, 180), 0.6),
    0 14px 36px rgba(var(--amb-r, 180), var(--amb-g, 180), var(--amb-b, 180), 0.5) !important;
}
.track.playing .t .n,
#upList .track.playing .t .n {
  color: #fff !important;
}
.track.playing .num,
#upList .track.playing .num {
  color: #fff !important;
}
.track.playing .t .a,
#upList .track.playing .t .a,
.track.playing .d,
#upList .track.playing .d {
  color: rgba(255, 255, 255, 0.8) !important;
}
/* Play main still ambient-based for play state, but paused is pure glass */
.cbtn.main.is-paused,
.cbtn.main:not(.is-playing) {
  background: linear-gradient(145deg, rgba(255,255,255,0.16), rgba(255,255,255,0.06)) !important;
  border: 1px solid rgba(255, 255, 255, 0.28) !important;
  box-shadow:
    0 10px 28px rgba(0, 0, 0, 0.28),
    inset 0 1px 0 rgba(255, 255, 255, 0.3) !important;
  filter: brightness(0.95) !important;
}
.sheet-card,
.sheet-card.small {
  background: rgba(0, 0, 0, 0.55) !important;
  border-color: rgba(255, 255, 255, 0.14) !important;
  -webkit-backdrop-filter: saturate(160%) blur(28px) !important;
  backdrop-filter: saturate(160%) blur(28px) !important;
}
.sheet {
  background: rgba(0, 0, 0, 0.55) !important;
}
.search-row input,
.row input {
  background: rgba(255, 255, 255, 0.07) !important;
  border-color: rgba(255, 255, 255, 0.14) !important;
  color: #eaf6ff !important;
}
.btn-glow-burst {
  background: radial-gradient(circle, rgba(255,255,255,0.95) 0%, rgba(255,255,255,0.35) 40%, rgba(255,255,255,0) 70%) !important;
}
.cbtn.main .btn-glow-burst {
  background: radial-gradient(circle, rgba(255,255,255,0.98) 0%, rgba(255,255,255,0.4) 35%, rgba(255,255,255,0) 70%) !important;
}
.seek-fill {
  background: linear-gradient(
    90deg,
    rgba(var(--amb2-r, 80), var(--amb2-g, 140), var(--amb2-b, 200), 0.75) 0%,
    rgba(var(--amb-r, 56), var(--amb-g, 180), var(--amb-b, 248), 0.95) 50%,
    rgba(var(--amb-r, 56), var(--amb-g, 180), var(--amb-b, 248), 1) 100%
  ) !important;
  box-shadow:
    0 0 14px rgba(var(--amb-r, 56), var(--amb-g, 180), var(--amb-b, 248), 0.55),
    inset 0 1px 0 rgba(255, 255, 255, 0.28) !important;
}

.link { color: rgba(255,255,255,0.85) !important; }

/* Manage playlists: [drag] [num] [name] [actions] — compact, ambient sheet */
#sheet-manage.sheet {
  background: rgba(0, 0, 0, 0.35) !important;
}
#sheet-manage .sheet-card {
  background: rgba(0, 0, 0, 0.28) !important;
  border-color: rgba(255, 255, 255, 0.12) !important;
  -webkit-backdrop-filter: saturate(160%) blur(28px) !important;
  backdrop-filter: saturate(160%) blur(28px) !important;
  box-shadow: 0 -8px 40px rgba(0,0,0,0.35);
}
.modal-pl-item {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  background: rgba(255, 255, 255, 0.06) !important;
  border: 1px solid rgba(255, 255, 255, 0.10) !important;
  padding: 6px 10px !important;
  min-height: 0 !important;
  border-radius: 12px !important;
}
.modal-pl-item .pl-drag-handle {
  position: relative;
  flex: 0 0 auto;
  width: 36px;
  height: 36px;
  display: flex !important;
  align-items: center;
  justify-content: center;
  cursor: grab;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
  border-radius: 0;
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
  box-shadow: none !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}
.modal-pl-item .pl-drag-handle .drag-ico,
.modal-pl-item .pl-drag-handle .drag-fallback {
  position: static;
  transform: none;
  width: 28px !important;
  height: 28px !important;
  opacity: 0.85;
  filter: brightness(0) invert(1);
  pointer-events: none;
  z-index: 0;
}
.modal-pl-item .pl-drag-handle .drag-fallback {
  font-size: 26px;
  opacity: 0.85;
  width: auto !important;
  height: auto !important;
  filter: none;
  line-height: 1;
}
.modal-pl-item .pl-num {
  flex: 0 0 auto;
  min-width: 20px;
  text-align: center;
  font-size: 0.78rem;
  font-weight: 700;
  color: rgba(255,255,255,0.7);
  line-height: 1;
}
.modal-pl-item .pl-info {
  flex: 1;
  min-width: 0;
}
.modal-pl-item .pl-name {
  font-weight: 600;
  font-size: 0.86rem;
  line-height: 1.2;
}
.modal-pl-item .pl-count {
  font-size: 0.68rem;
  color: var(--muted);
  margin-top: 1px;
}
.modal-pl-item .pl-id { display: none !important; }
.modal-pl-item.dragging-pl {
  opacity: 0.9;
  background: rgba(255, 255, 255, 0.12) !important;
  border-color: rgba(255, 255, 255, 0.28) !important;
}

/* Chips: force horizontal drag-scroll */
.chips-wrap {
  position: relative;
  margin-bottom: 10px;
  overflow: hidden;
}
.chips {
  display: flex !important;
  flex-wrap: nowrap !important;
  gap: 6px;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  -webkit-overflow-scrolling: touch;
  touch-action: pan-x;
  cursor: grab;
  scrollbar-width: none;
  padding: 4px 2px 8px;
  mask-image: linear-gradient(to right, transparent 0, #000 16px, #000 calc(100% - 16px), transparent 100%);
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 16px, #000 calc(100% - 16px), transparent 100%);
}
.chips:active { cursor: grabbing; }
.chips::-webkit-scrollbar { display: none; }
.chip {
  flex: 0 0 auto !important;
  white-space: nowrap !important;
  pointer-events: auto !important;
  position: relative;
  z-index: 2;
}
.chips-wrap, .chips {
  pointer-events: auto !important;
}



/* List pages only: 3D elevated header (smooth shadow = closer). Player stays flat. */
#app.is-list-page .header {
  box-shadow:
    0 2px 4px rgba(0, 0, 0, 0.18),
    0 8px 24px rgba(0, 0, 0, 0.32),
    0 16px 40px rgba(0, 0, 0, 0.18);
  z-index: 30;
}
#app.is-list-page .header::after {
  display: none !important;
  content: none !important;
}

/* Kill leftover pseudo-line shadows on search / chips */
#app.is-list-page .header-title-slot .search-sticky::after {
  display: none !important;
  content: none !important;
}
#page-playlists .chips-wrap {
  position: relative;
  z-index: 5;
  padding-bottom: 6px;
  margin-bottom: 8px;
  border: none !important;
}
#page-playlists .chips-wrap::after {
  display: none !important;
  content: none !important;
}
#page-playlists .page-head,
#page-playlists .page-head.pl-head {
  border-bottom: none !important;
  border-top: none !important;
}

/* Player: no elevation shadow */
#app.is-player .header,
#app:not(.is-list-page) .header {
  box-shadow: none !important;
}

/* 8px gap under elevated header so content doesn't sit on the shadow */
#app.is-list-page #page-queue .page-content,
#app.is-list-page #page-liked .page-content,
#app.is-list-page #page-playlists .page-content,
#app.is-list-page #page-search .page-content,
#app.is-list-page #page-search .search-scroll {
  padding-top: 8px !important;
}

/* List pages only: compact header (logo collapsed); titles ~original+1px; player untouched */
#app.is-list-page .header-logo-row {
  padding-top: max(0px, calc(env(safe-area-inset-top, 0px) + 6px + 1px)) !important;
  padding-bottom: 0 !important;
  min-height: max(0px, calc(env(safe-area-inset-top, 0px) + 6px + 1px)) !important;
  gap: 0 !important;
}
#app.is-list-page .header-logo-row .logo-img,
#app.is-list-page .header-logo-row .logo-text,
#app.is-list-page .header-logo-row .logo-mark {
  width: 0 !important;
  height: 0 !important;
  max-width: 0 !important;
  max-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
  border: none !important;
  position: absolute !important;
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}
#app.is-list-page .header {
  padding-bottom: 0 !important;
}
#app.is-list-page .header-title-slot {
  margin-top: 1px !important;
  position: relative;
  z-index: 2;
}
#app.is-list-page .header-title-slot .page-head,
#app.is-list-page .header-title-slot .search-sticky .page-head {
  margin-bottom: 6px !important;
}
#app.is-list-page #page-queue .page-content,
#app.is-list-page #page-liked .page-content,
#app.is-list-page #page-playlists .page-content,
#app.is-list-page #page-search .page-content,
#app.is-list-page #page-search .search-scroll {
  padding-top: 8px !important;
  margin-top: 0 !important;
}
#app.is-list-page #page-profile .page-content {
  margin-top: 1px !important;
}



/* Boot loading: no placeholder flash — only spinner from first paint */
#app.boot-loading .header {
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}
#app.boot-loading #page-player,
#app.boot-loading #page-player .player-page,
#app.boot-loading #page-player .cover-box,
#app.boot-loading #page-player .meta-block,
#app.boot-loading #page-player .player-dock,
#app.boot-loading #page-player .player-stage {
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}
#app.boot-loading #view-empty {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
}
#app.boot-loading .nav {
  opacity: 0.35;
}
#app.boot-loading .view-loading {
  display: flex !important;
  z-index: 50;
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: none;
}
/* solid black under spinner so nothing peeks through */
#app.boot-loading {
  background: #000 !important;
}
#app.boot-loading #app-ambient {
  opacity: 0 !important;
}


/* Genre covers from /static/genres/ */
.genre-tile .genre-cover {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 1;
}
.genre-tile .genre-bg {
  z-index: 0;
}
.genre-tile .genre-label,
.genre-tile .genre-icon {
  z-index: 2;
}
.genre-tile.has-cover .genre-icon {
  display: none;
}
.genre-tile.has-cover .genre-bg {
  opacity: 0.35;
}
.genre-tile.has-cover .genre-bg::after {
  background: linear-gradient(to top, rgba(0,0,0,0.75) 0%, rgba(0,0,0,0.15) 55%, transparent 100%);
}


/* Playlist names tab bar — no background on the bar itself */
#page-playlists .chips-wrap,
#page-playlists .chips,
.chips-wrap,
.chips {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}
#page-playlists .chips-wrap {
  padding-bottom: 6px;
  margin-bottom: 8px;
}
/* manage: edit button matches share style */
.modal-pl-item .pl-actions .edit.icon-act {
  background: rgba(255, 255, 255, 0.1) !important;
}
.modal-pl-item .pl-actions .edit.icon-act img.ico {
  filter: brightness(0) invert(1) !important;
}


/* Search back button (left of input) */
.search-row {
  align-items: center;
}
.search-row .search-back {
  width: 44px;
  min-width: 44px;
  height: 44px;
  padding: 0;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: rgba(255, 255, 255, 0.07);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
  -webkit-backdrop-filter: saturate(150%) blur(14px);
  backdrop-filter: saturate(150%) blur(14px);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12);
}
.search-row .search-back.hidden {
  display: none !important;
}
.search-row .search-back img.ico {
  width: 20px;
  height: 20px;
  filter: brightness(0) invert(1) !important;
}
.search-row .search-back:active {
  transform: scale(0.94);
}


/* ========== HOTFIXES v3 ========== */

/* 1) Hide nav completely while search keyboard open */
#app.search-kb-open .nav {
  display: none !important;
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
  transform: translateY(150%) !important;
}

/* 2) Rename clear: no background, no animation */
.row.input-with-clear {
  position: relative;
  display: flex;
  align-items: center;
}
.row.input-with-clear input {
  flex: 1;
  padding-right: 42px !important;
}
.row.input-with-clear .input-clear {
  position: absolute;
  right: 4px;
  top: 50%;
  transform: translateY(-50%) !important;
  width: 36px;
  height: 36px;
  padding: 0;
  margin: 0;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 2;
  overflow: visible !important;
}
.row.input-with-clear .input-clear:active,
.row.input-with-clear .input-clear.pressed {
  transform: translateY(-50%) !important;
  filter: none !important;
  background: transparent !important;
  opacity: 0.7;
}
.row.input-with-clear .input-clear .btn-glow-burst {
  display: none !important;
}
.row.input-with-clear .input-clear img.ico {
  width: 16px !important;
  height: 16px !important;
  filter: brightness(0) invert(1) !important;
}

/* 3) Unified tap animation = next/prev style for ALL buttons incl. play */
.btn-glow-burst {
  position: absolute !important;
  width: 10px !important;
  height: 10px !important;
  margin-left: -5px !important;
  margin-top: -5px !important;
  border-radius: 50% !important;
  pointer-events: none !important;
  background: radial-gradient(
    circle,
    rgba(255, 255, 255, 0.45) 0%,
    rgba(255, 255, 255, 0.18) 40%,
    rgba(255, 255, 255, 0) 70%
  ) !important;
  opacity: 0;
  transform: scale(0);
  z-index: 2 !important;
}
.btn-glow-burst.run {
  animation: btnGlowFill 0.45s cubic-bezier(0.22, 0.61, 0.36, 1) forwards !important;
}
@keyframes btnGlowFill {
  0%   { opacity: 0; transform: scale(0); }
  20%  { opacity: 0.85; transform: scale(3); }
  50%  { opacity: 0.4; transform: scale(9); }
  100% { opacity: 0; transform: scale(16); }
}
/* play uses same glow as next/prev — no special white blast */
.cbtn.main .btn-glow-burst {
  background: radial-gradient(
    circle,
    rgba(255, 255, 255, 0.45) 0%,
    rgba(255, 255, 255, 0.18) 40%,
    rgba(255, 255, 255, 0) 70%
  ) !important;
}
/* press = scale only, never brightness (keeps icons white) */
.act-btn.pressed,
.cbtn.pressed,
.cbtn.main.pressed,
.chip.pressed,
.search-go.pressed,
.btn-primary.pressed,
.icon-head-btn.pressed,
.genre-tile.pressed,
.btn-confirm.pressed,
.btn-danger.pressed,
.btn-close.pressed,
.modal-pick-pl.pressed,
.queue-btn.pressed,
.lang-pick-btn.pressed {
  transform: scale(0.94) !important;
  filter: none !important;
}
/* icons always white above glow */
img.ico,
img.nav-ico,
.act-btn img.ico,
.cbtn img.ico,
.cbtn.main img.ico,
.cbtn.main.pressed img.ico,
.cbtn.pressed img.ico,
.icon-head-btn img.ico,
.search-go img.ico,
button img.ico {
  filter: brightness(0) invert(1) !important;
  -webkit-filter: brightness(0) invert(1) !important;
  position: relative;
  z-index: 5 !important;
}
/* kill parent filter inheritance on play button states */
.cbtn.main.is-paused,
.cbtn.main:not(.is-playing),
.cbtn.main.is-playing,
.cbtn.main.pressed {
  filter: none !important;
}

/* 4) Sheet close/cancel: no accidental glow visuals */
.btn-close .btn-glow-burst,
.sheet .btn-close .btn-glow-burst {
  display: none !important;
}
.btn-close.pressed {
  transform: none !important;
  filter: none !important;
}

/* Glass surfaces — no blue */
.lang-pick-btn {
  background: rgba(255, 255, 255, 0.07) !important;
  border: 1px solid rgba(255, 255, 255, 0.14) !important;
  color: #eaf6ff !important;
  -webkit-backdrop-filter: saturate(150%) blur(14px) !important;
  backdrop-filter: saturate(150%) blur(14px) !important;
}
.toast {
  background: rgba(20, 20, 24, 0.55) !important;
  border: 1px solid rgba(255, 255, 255, 0.18) !important;
  -webkit-backdrop-filter: saturate(160%) blur(20px) !important;
  backdrop-filter: saturate(160%) blur(20px) !important;
  box-shadow: 0 8px 28px rgba(0,0,0,0.35), inset 0 1px 0 rgba(255,255,255,0.15) !important;
}

/* Queue playing — darker */
.track.playing,
#upList .track.playing {
  background:
    linear-gradient(160deg,
      rgba(var(--amb-r, 180), var(--amb-g, 180), var(--amb-b, 180), 0.2) 0%,
      rgba(var(--amb-r, 180), var(--amb-g, 180), var(--amb-b, 180), 0.1) 45%,
      rgba(8, 8, 10, 0.75) 100%) !important;
  border-color: rgba(var(--amb-r, 180), var(--amb-g, 180), var(--amb-b, 180), 0.4) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.1),
    0 0 0 1px rgba(var(--amb-r, 180), var(--amb-g, 180), var(--amb-b, 180), 0.22),
    0 8px 20px rgba(0,0,0,0.35) !important;
}

/* Search equal heights */
.search-row { align-items: center !important; }
.search-row input {
  height: 44px !important;
  min-height: 44px !important;
  padding: 0 14px !important;
  box-sizing: border-box !important;
  line-height: 44px !important;
  background: rgba(255,255,255,0.07) !important;
  border-color: rgba(255,255,255,0.14) !important;
}
.search-row button.search-go,
.search-row .search-go {
  width: 44px !important;
  min-width: 44px !important;
  height: 44px !important;
  padding: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0 !important;
  box-sizing: border-box !important;
  border-radius: 12px !important;
}
.search-row button.search-recognize,
.search-row #btn-recognize {
  width: 44px !important;
  min-width: 44px !important;
  height: 44px !important;
  padding: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0 !important;
  box-sizing: border-box !important;
  border-radius: 12px !important;
}
.search-row button.search-recognize img.ico,
.search-row #btn-recognize img.ico {
  width: 20px;
  height: 20px;
  filter: brightness(0) invert(1);
}
.search-row button.search-recognize.listening,
.search-row #btn-recognize.listening {
  border-color: rgba(255, 80, 80, 0.55) !important;
  box-shadow: 0 0 0 2px rgba(255, 80, 80, 0.25), inset 0 1px 0 rgba(255,255,255,0.25) !important;
  animation: recognizePulse 1.1s ease-in-out infinite;
}
@keyframes recognizePulse {
  0%, 100% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.06); opacity: 0.9; }
}

.search-row .search-back {
  width: 44px !important;
  min-width: 44px !important;
  height: 44px !important;
  padding: 0 !important;
}
.search-row .search-back.hidden {
  display: none !important;
  pointer-events: none !important;
}

#sheet-rename-pl,
#sheet-create-pl,
#sheet-import-pl,
#sheet-remove,
#sheet-modal,
#sheet-lang {
  z-index: 95 !important;
}
#sheet-manage { z-index: 80 !important; }


/* ========== HOTFIXES v9 ========== */

/* Playing: black gradient 0.1 → 0.7 */
.track.playing,
#upList .track.playing {
  background: linear-gradient(160deg, rgba(0, 0, 0, 0.1) 0%, rgba(0, 0, 0, 0.7) 100%) !important;
  border: 1px solid #000000 !important;
  border-color: #000000 !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    0 8px 22px rgba(0, 0, 0, 0.35) !important;
}
.track.playing .t .n,
.track.playing .num,
#upList .track.playing .t .n,
#upList .track.playing .num {
  color: #fff !important;
}
.track.playing .t .a,
.track.playing .d,
#upList .track.playing .t .a,
#upList .track.playing .d {
  color: rgba(255, 255, 255, 0.75) !important;
}

/* Nav: hidden while search active — NO global enter animation */
#app.search-kb-open .nav,
#app.search-kb-open #nav {
  display: none !important;
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}
/* Enter animation ONLY when JS adds these classes (Back button) */
.nav.nav-enter-from {
  display: flex !important;
  opacity: 0 !important;
  visibility: visible !important;
  pointer-events: none !important;
  transform: translate3d(-50%, 140%, 0) !important;
  transition: none !important;
}
.nav.nav-enter-active {
  display: flex !important;
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
  transform: translate3d(-50%, 0, 40px) !important;
  transition:
    opacity 0.3s ease,
    transform 0.34s cubic-bezier(0.22, 0.61, 0.36, 1) !important;
}

/* Fixed shell + #app sizing consolidated near end of file
   (search "iOS PWA bottom safe-area — FINAL") to avoid duplicate
   conflicting html/body/#app rules fighting each other. */

/* Sheets: full-screen overlay, card pinned to BOTTOM */
.sheet {
  display: block !important;
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  width: 100% !important;
  height: var(--app-h, 100%) !important;
  max-height: var(--app-h, 100%) !important;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.28s ease, visibility 0.28s ease;
  background: rgba(0, 0, 0, 0.5) !important;
  transform: none !important;
  margin: 0 !important;
  padding: 0 !important;
  z-index: 90 !important;
  overflow: hidden !important;
}
.sheet.hidden {
  display: block !important;
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}
.sheet:not(.hidden) {
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
}
.sheet .sheet-card {
  position: absolute !important;
  left: 0 !important;
  right: 0 !important;
  bottom: var(--kb, 0px) !important; /* 0 = page bottom; kb = on top of keyboard */
  width: 100% !important;
  max-width: 430px !important;
  margin: 0 auto !important;
  transform: translate3d(0, 110%, 0);
  transition: transform 0.34s cubic-bezier(0.22, 0.61, 0.36, 1),
              bottom 0.22s ease !important;
  will-change: transform, bottom;
}
.sheet:not(.hidden) .sheet-card {
  transform: translate3d(0, 0, 0) !important;
}

/* stable extras */
.chips, #page-playlists .chips, .chips-wrap .chips {
  mask-image: none !important;
  -webkit-mask-image: none !important;
}
.chip { box-shadow: none !important; background: rgba(255,255,255,0.08) !important; border: 1px solid rgba(255,255,255,0.14) !important; }
.chip.on {
  background: rgba(0,0,0,0.32) !important;
  border-color: rgba(255,255,255,0.26) !important;
  box-shadow: none !important;
  color: #eaf6ff !important;
  font-weight: 700 !important;
}
.cover-box, .cover-box img, .track > img, .track img.art { background: transparent !important; }
.player-page .title {
  max-height: none !important; overflow: hidden !important; white-space: nowrap !important;
  word-break: normal !important; overflow-wrap: normal !important; text-align: center; position: relative;
}
.player-page .title .marquee-inner {
  display: inline-flex; align-items: center; white-space: nowrap;
  will-change: transform;
  transform: translate3d(0, 0, 0);
}
.player-page .title .marquee-inner .m-seg { flex-shrink: 0; white-space: nowrap; }
.player-page .title .marquee-inner .m-gap { flex-shrink: 0; width: 48px; }
.track .t .n {
  display: block !important; -webkit-line-clamp: unset !important; -webkit-box-orient: unset !important;
  white-space: nowrap !important; overflow: hidden !important; text-overflow: clip !important; max-height: none !important;
}
.track .t .n .marquee-inner {
  display: inline-flex; align-items: center; white-space: nowrap;
  transform: translate3d(0, 0, 0);
}
.track .t .n .marquee-inner .m-seg { flex-shrink: 0; white-space: nowrap; }
.track .t .n .marquee-inner .m-gap { flex-shrink: 0; width: 40px; }
/* Marquee motion is JS-driven (no CSS animation restart = no blink) */
.load-spin { border: 3px solid rgba(255,255,255,0.22) !important; border-top-color: #fff !important; }
.load-text { color: #fff !important; }


/* (Fixed shell + #app sizing consolidated near end of file —
   see "iOS PWA bottom safe-area — FINAL" — removed duplicate here.) */

/* Reinforce bottom sheet card */
.sheet .sheet-card,
.sheet-card {
  position: absolute !important;
  left: 0 !important;
  right: 0 !important;
  bottom: var(--kb, 0px) !important;
  top: auto !important;
  width: 100% !important;
  margin-bottom: 0 !important;
}


/* ========== Profile / More / Queue panel / hard blur ========== */

#app:has(.sheet:not(.hidden)) > .header,
#app:has(.sheet:not(.hidden)) > .content,
#app:has(.sheet:not(.hidden)) > .nav,
#app:has(.queue-panel:not(.hidden)) > .header,
#app:has(.queue-panel:not(.hidden)) > .content,
#app:has(.queue-panel:not(.hidden)) > .nav {
  filter: blur(14px) saturate(0.85);
  transition: filter 0.28s ease;
  pointer-events: none;
}
#app:has(.sheet:not(.hidden))::after,
#app:has(.queue-panel:not(.hidden))::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 40;
  background: rgba(0, 0, 0, 0.35);
  pointer-events: none;
}

.more-sheet-card { padding-bottom: 12px !important; }
.more-menu {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 4px 0 8px;
}
.more-item {
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  padding: 14px 16px;
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(255, 255, 255, 0.07);
  color: #eaf6ff;
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  -webkit-backdrop-filter: saturate(150%) blur(14px);
  backdrop-filter: saturate(150%) blur(14px);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.12);
  text-align: left;
}
.more-item:active { transform: scale(0.98); opacity: 0.9; }
.more-item img.ico {
  width: 22px; height: 22px;
  filter: brightness(0) invert(1) !important;
}

.queue-panel {
  position: absolute;
  inset: 0;
  z-index: 48;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.28s ease, visibility 0.28s ease;
  background: rgba(0, 0, 0, 0.35);
}
.queue-panel:not(.hidden) {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}
.queue-panel.hidden { display: flex !important; }
.queue-panel-card {
  position: relative;
  width: 100%;
  max-width: 430px;
  margin: 0 auto;
  max-height: min(78%, calc(var(--app-h, 100%) - 90px));
  background: rgba(12, 20, 32, 0.92);
  border-radius: 20px 20px 0 0;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-bottom: none;
  -webkit-backdrop-filter: saturate(180%) blur(24px);
  backdrop-filter: saturate(180%) blur(24px);
  box-shadow: 0 -12px 40px rgba(0,0,0,0.45);
  display: flex;
  flex-direction: column;
  transform: translateY(110%);
  transition: transform 0.34s cubic-bezier(0.22, 0.61, 0.36, 1);
  overflow: hidden;
  pointer-events: auto;
}
.queue-panel:not(.hidden) .queue-panel-card {
  transform: translateY(0);
}
.queue-panel-head {
  padding: 4px 16px 8px !important;
  margin: 0 !important;
  flex-shrink: 0;
}
.queue-panel-body {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  padding: 0 16px calc(var(--bot-gap) + 12px);
  -webkit-overflow-scrolling: touch;
}

.profile-card {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  text-align: center;
  padding: 12px 8px 20px;
  gap: 8px;
}
.profile-card > .profile-avatar-wrap,
.profile-card > .profile-name-row,
.profile-card > .profile-user,
.profile-card > .profile-logout-btn,
.profile-card > .profile-install-btn {
  align-self: center;
}
.profile-card > .profile-remaining {
  align-self: stretch !important;
  width: 100% !important;
  max-width: 100% !important;
  justify-content: flex-start !important;
  text-align: left !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}
.profile-avatar-wrap {
  width: 96px;
  height: 96px;
  border-radius: 50%;
  overflow: hidden;
  border: 2px solid rgba(255,255,255,0.18);
  box-shadow: 0 10px 28px rgba(0,0,0,0.35);
  background: rgba(255,255,255,0.06);
  margin-bottom: 6px;
}
.profile-avatar {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.profile-name {
  font-size: 1.25rem;
  font-weight: 700;
  letter-spacing: -0.02em;
}
.profile-user {
  font-size: 0.88rem;
  color: var(--muted);
  margin-bottom: 6px;
}
.profile-login-hint {
  font-size: 0.95rem;
  color: var(--muted);
  margin: 8px 0 4px;
}
.profile-otp-box {
  width: 100%;
  max-width: 280px;
  margin: 10px 0 6px;
  padding: 14px 16px;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,0.14);
  background: rgba(255,255,255,0.07);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
}
.profile-otp-label {
  font-size: 0.78rem;
  color: var(--muted);
  margin-bottom: 6px;
  font-weight: 600;
}
.profile-otp-code {
  font-size: 1.8rem;
  font-weight: 800;
  letter-spacing: 0.28em;
  font-variant-numeric: tabular-nums;
  color: #fff;
}
.profile-otp-help {
  font-size: 0.75rem;
  color: var(--muted);
  margin-top: 8px;
  line-height: 1.4;
}
.profile-login-btn {
  display: inline-flex !important;
  align-items: center;
  gap: 10px;
  margin-top: 10px;
}
.profile-login-btn img.ico {
  width: 20px;
  height: 20px;
  filter: brightness(0) invert(1) !important;
}
.sessions-section {
  margin-top: 8px;
  padding: 0 4px 24px;
}
.sessions-title {
  font-size: 0.92rem;
  font-weight: 700;
  margin-bottom: 10px;
  padding: 0 4px;
}
.sessions-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.session-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,0.12);
  background: rgba(255,255,255,0.06);
}
.session-meta {
  flex: 1;
  min-width: 0;
}
.session-label {
  font-weight: 600;
  font-size: 0.92rem;
}
.session-sub {
  font-size: 0.75rem;
  color: var(--muted);
  margin-top: 2px;
}
.session-del {
  width: 40px;
  height: 40px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,0.12);
  background: rgba(255,255,255,0.06);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
  padding: 0;
}
.session-del img.ico {
  width: 18px;
  height: 18px;
  filter: brightness(0) invert(1) !important;
}
.session-del:active { transform: scale(0.94); }

.sheet { z-index: 50 !important; }

/* ========== FIX: sheets above nav, centered, backdrop close ========== */
.sheet {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  inset: 0 !important;
  width: 100% !important;
  max-width: none !important;
  height: var(--app-h, 100%) !important;
  max-height: none !important;
  margin: 0 !important;
  padding: 0 !important;
  z-index: 300 !important;
  display: block !important;
  background: rgba(0, 0, 0, 0.5) !important;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.28s ease, visibility 0.28s ease;
}
.sheet.hidden {
  display: block !important;
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}
.sheet:not(.hidden) {
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
}
.sheet .sheet-card,
.sheet-card {
  position: absolute !important;
  left: 50% !important;
  right: auto !important;
  transform: translate3d(-50%, 110%, 0) !important;
  bottom: var(--kb, 0px) !important;
  top: auto !important;
  width: 100% !important;
  max-width: 430px !important;
  margin: 0 !important;
  transition:
    transform 0.34s cubic-bezier(0.22, 0.61, 0.36, 1),
    bottom 0.22s ease !important;
}
.sheet:not(.hidden) .sheet-card,
.sheet:not(.hidden) .sheet-card.small {
  transform: translate3d(-50%, 0, 0) !important;
}

/* Queue panel also above nav */
.queue-panel {
  position: fixed !important;
  inset: 0 !important;
  z-index: 280 !important;
  max-width: none !important;
}
.queue-panel-card {
  left: 50% !important;
  right: auto !important;
  transform: translate3d(-50%, 110%, 0) !important;
  width: 100% !important;
  max-width: 430px !important;
  margin: 0 !important;
}
.queue-panel:not(.hidden) .queue-panel-card {
  transform: translate3d(-50%, 0, 0) !important;
}

/* Nav below sheets */
.nav, #nav {
  z-index: 50 !important;
}

/* When keyboard sheet is open: hide chrome, keep ambient background only */
#app.kb-sheet-open > .header,
#app.kb-sheet-open > .content,
#app.kb-sheet-open ~ .nav,
#app.kb-sheet-open ~ #nav {
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
  transition: opacity 0.2s ease, visibility 0.2s ease;
}
#app.kb-sheet-open > #app-ambient {
  opacity: 1 !important;
  filter: none !important;
}

/* Hard blur for non-keyboard sheets still via :has — but overlays are outside #app now */
body:has(.sheet:not(.hidden)) #app > .header,
body:has(.sheet:not(.hidden)) #app > .content,
body:has(.sheet:not(.hidden)) .nav,
body:has(.queue-panel:not(.hidden)) #app > .header,
body:has(.queue-panel:not(.hidden)) #app > .content,
body:has(.queue-panel:not(.hidden)) .nav {
  filter: blur(14px) saturate(0.85);
  transition: filter 0.28s ease;
  pointer-events: none;
}

/* Toast above everything */
.toast {
  z-index: 400 !important;
}

/* ========== Auth gate (browser only) ========== */
.auth-gate {
  position: fixed;
  inset: 0;
  z-index: 500;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: transparent;
  overflow: hidden;
}
.auth-gate.hidden {
  display: none !important;
}
/* Colorful dark gradient + blur background (no blue dominant) */
.auth-gate-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse 80% 60% at 12% 18%, rgba(180, 60, 140, 0.55) 0%, transparent 55%),
    radial-gradient(ellipse 70% 55% at 88% 22%, rgba(120, 50, 200, 0.5) 0%, transparent 52%),
    radial-gradient(ellipse 65% 50% at 50% 95%, rgba(200, 90, 40, 0.4) 0%, transparent 55%),
    radial-gradient(ellipse 55% 45% at 70% 60%, rgba(40, 160, 140, 0.35) 0%, transparent 50%),
    radial-gradient(ellipse 50% 40% at 20% 70%, rgba(90, 40, 160, 0.35) 0%, transparent 48%),
    linear-gradient(165deg, #0a0610 0%, #12081a 35%, #0c0a12 70%, #08060c 100%);
  -webkit-backdrop-filter: blur(36px) saturate(160%);
  backdrop-filter: blur(36px) saturate(160%);
  animation: authBgShift 18s ease-in-out infinite alternate;
}
@keyframes authBgShift {
  0%   { filter: hue-rotate(0deg) saturate(1); }
  50%  { filter: hue-rotate(12deg) saturate(1.08); }
  100% { filter: hue-rotate(-8deg) saturate(1.05); }
}
.auth-gate-bg::before {
  content: "";
  position: absolute;
  inset: -20%;
  background:
    radial-gradient(circle at 30% 40%, rgba(255, 120, 180, 0.12), transparent 40%),
    radial-gradient(circle at 70% 30%, rgba(160, 80, 255, 0.14), transparent 42%),
    radial-gradient(circle at 50% 80%, rgba(255, 150, 80, 0.1), transparent 40%);
  -webkit-filter: blur(40px);
  filter: blur(40px);
  pointer-events: none;
}
.auth-gate-bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(4, 2, 8, 0.28);
  -webkit-backdrop-filter: blur(24px) saturate(140%);
  backdrop-filter: blur(24px) saturate(140%);
}
/* Glassy login card */
.auth-gate-card {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 380px;
  text-align: center;
  padding: 32px 24px 28px;
  border-radius: 26px;
  border: 1px solid rgba(255,255,255,0.18);
  background: linear-gradient(
    155deg,
    rgba(28, 18, 36, 0.55) 0%,
    rgba(18, 12, 28, 0.48) 50%,
    rgba(22, 14, 30, 0.52) 100%
  );
  -webkit-backdrop-filter: blur(40px) saturate(180%);
  backdrop-filter: blur(40px) saturate(180%);
  box-shadow:
    0 28px 80px rgba(0,0,0,0.55),
    0 0 0 1px rgba(255,255,255,0.04) inset,
    inset 0 1px 0 rgba(255,255,255,0.16);
  animation: authCardIn 0.55s cubic-bezier(0.22, 1, 0.36, 1) both;
}
@keyframes authCardIn {
  from { opacity: 0; transform: translateY(18px) scale(0.96); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
.auth-gate-card.hidden {
  display: none !important;
}
.auth-gate-logo {
  width: 64px;
  height: 64px;
  border-radius: 16px;
  object-fit: contain;
  margin: 0 auto 12px;
  display: block;
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  image-rendering: -webkit-optimize-contrast;
}
.auth-gate-title {
  font-size: 1.4rem;
  font-weight: 800;
  margin-bottom: 6px;
  color: #f6eef8;
  letter-spacing: -0.02em;
}
.auth-gate-msg {
  color: rgba(200, 210, 230, 0.75);
  font-size: 0.92rem;
  margin-bottom: 18px;
  line-height: 1.4;
}
.auth-gate-otp-label {
  font-size: 0.75rem;
  font-weight: 600;
  color: rgba(180, 190, 210, 0.7);
  margin-bottom: 8px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.auth-gate-otp {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 6px;
  font-size: 2.1rem;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  color: #fff;
  margin-bottom: 12px;
  padding: 8px 0;
  min-height: 52px;
}
.auth-gate-otp .otp-digit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.2em;
  height: 1.6em;
  border-radius: 12px;
  background: rgba(255,255,255,0.07);
  border: 1px solid rgba(255,255,255,0.14);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.14),
    0 4px 12px rgba(0,0,0,0.2);
  transition: transform 0.25s cubic-bezier(0.34, 1.4, 0.64, 1), opacity 0.2s ease, background 0.2s ease;
  perspective: 400px;
  transform-style: preserve-3d;
}
.auth-gate-otp .otp-digit.flip {
  animation: otpDigitFlip 0.45s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}
@keyframes otpDigitFlip {
  0%   { transform: translateY(16px) scale(0.55) rotateX(-55deg); opacity: 0; filter: blur(4px); }
  40%  { transform: translateY(-6px) scale(1.12) rotateX(12deg); opacity: 1; filter: blur(0); }
  70%  { transform: translateY(2px) scale(0.97) rotateX(-4deg); }
  100% { transform: translateY(0) scale(1) rotateX(0); opacity: 1; filter: none; }
}
.auth-otp-timer-wrap {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 6px;
  margin: 0 8px 16px;
}
.auth-otp-progress-track {
  height: 4px;
  border-radius: 999px;
  background: rgba(255,255,255,0.1);
  overflow: hidden;
  border: 1px solid rgba(255,255,255,0.08);
}
.auth-otp-progress-fill {
  height: 100%;
  width: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(220, 100, 160, 0.9), rgba(180, 100, 255, 0.95), rgba(255, 160, 100, 0.9));
  box-shadow: 0 0 12px rgba(200, 100, 180, 0.35);
  transition: width 0.35s linear, background 0.4s ease;
}
.auth-otp-progress-fill.urgent {
  background: linear-gradient(90deg, rgba(240, 120, 80, 0.9), rgba(255, 180, 120, 0.95));
  box-shadow: 0 0 10px rgba(240, 120, 80, 0.35);
}
.auth-otp-countdown {
  font-size: 0.78rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: rgba(200, 210, 230, 0.7);
  text-align: center;
  letter-spacing: 0.02em;
}
.auth-otp-countdown.urgent {
  color: #ffb89a;
}
.auth-gate-help {
  font-size: 0.8rem;
  color: rgba(180, 190, 210, 0.72);
  line-height: 1.45;
  margin-bottom: 14px;
}
.auth-gate-status {
  font-size: 0.78rem;
  color: rgba(255,255,255,0.5);
}
/* Install hint steps */
.auth-install-steps {
  display: flex;
  flex-direction: column;
  gap: 10px;
  text-align: left;
  margin: 0 0 16px;
}
.auth-install-step {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 0.84rem;
  color: rgba(210, 220, 235, 0.88);
  line-height: 1.4;
  padding: 10px 12px;
  border-radius: 12px;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.08);
}
.auth-step-num {
  flex: 0 0 auto;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.72rem;
  font-weight: 800;
  background: rgba(80, 180, 255, 0.2);
  color: #9fd6ff;
  border: 1px solid rgba(120, 200, 255, 0.35);
}
body.auth-locked #app,
body.auth-locked .nav,
body.auth-locked #nav {
  visibility: hidden !important;
  pointer-events: none !important;
  opacity: 0 !important;
}
/* ONLY the login gate — never force #sub-gate open (it also has .auth-gate) */
body.auth-locked #auth-gate {
  display: flex !important;
}
body.auth-locked #sub-gate {
  display: none !important;
}


/* Only when body.desktop-layout is set (wide non-mobile non-TG early script) */
@media (min-width: 900px) {
  html.desktop-layout,
  body.desktop-layout {
    background: #05070c !important;
  }
  body.desktop-layout #app {
    max-width: 430px !important;
    width: min(430px, 100%) !important;
    margin: 0 auto !important;
    border-left: 1px solid rgba(255,255,255,0.06);
    border-right: 1px solid rgba(255,255,255,0.06);
    box-shadow: 0 0 80px rgba(0,0,0,0.45);
  }
  body.desktop-layout .nav {
    max-width: 430px !important;
    left: 50% !important;
    right: auto !important;
    transform: translateX(-50%) !important;
    width: 100% !important;
  }
  body.desktop-layout .cover-box {
    width: min(42vw, 320px) !important;
  }
  body.desktop-layout .player-dock,
  body.desktop-layout .meta-block {
    max-width: 420px !important;
  }
  body.desktop-layout .sheet,
  body.desktop-layout .queue-panel {
    max-width: none !important;
    left: 0 !important;
    right: 0 !important;
    margin: 0 !important;
  }
  body.desktop-layout .sheet .sheet-card,
  body.desktop-layout .sheet-card,
  body.desktop-layout .queue-panel-card {
    max-width: 480px !important;
  }
  body.desktop-layout #app-ambient .amb-cover {
    width: 120% !important;
  }
  body.desktop-layout .page-content {
    max-width: 720px;
    margin-left: auto;
    margin-right: auto;
  }
  body.desktop-layout #page-player .page-content.player-page {
    max-width: none;
  }
}
/* Mobile / TG / standalone: keep original 430px shell — no desktop overrides */
body.tg-client.desktop-layout #app,
body.is-mobile-ua #app {
  max-width: 430px !important;
}

.profile-logout-btn {
  display: inline-flex !important;
  align-items: center;
  gap: 10px;
  margin-top: 8px;
  background: rgba(255,80,80,0.12) !important;
  border-color: rgba(255,120,120,0.28) !important;
}
.profile-logout-btn img.ico {
  width: 20px;
  height: 20px;
  filter: brightness(0) invert(1) !important;
}
.profile-login-btn {
  display: inline-flex !important;
  align-items: center;
  gap: 10px;
  margin-top: 10px;
}

/* Boot: never stack empty + player */
#app.boot-loading #view-empty,
#app.boot-loading #page-player {
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}
#view-empty:not(.hidden) ~ #page-player,
#app:has(#view-empty:not(.hidden)) #page-player {
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}


/* Empty state logo image */
.view-empty .big-logo-img {
  width: 168px;
  height: 168px;
  border-radius: 36px;
  margin-bottom: 16px;
  object-fit: contain;
  display: block;
  background: transparent !important;
  box-shadow: none !important;
  border: none !important;
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  image-rendering: -webkit-optimize-contrast;
}
/* Empty only on player page */
#app:not(.is-player) #view-empty,
#app:not(.is-player) .view-empty {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
}
#page-player:not(.active) ~ #view-empty,
.page:not(#page-player).active ~ #view-empty {
  display: none !important;
}
/* view-empty is sibling of pages inside content — hide unless player active */
#app:not(.is-player) #view-empty {
  display: none !important;
}


/* Queue panel — ambient glass, not blue card */
.queue-panel-card {
  background: rgba(8, 10, 14, 0.72) !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  -webkit-backdrop-filter: saturate(180%) blur(28px) !important;
  backdrop-filter: saturate(180%) blur(28px) !important;
  box-shadow: 0 -12px 40px rgba(0,0,0,0.45), inset 0 1px 0 rgba(255,255,255,0.1) !important;
}
.queue-panel {
  background: rgba(0, 0, 0, 0.4) !important;
}


/* Hard rules: Telegram vs browser profile chrome */
body.tg-client #btn-logout {
  display: none !important;
  visibility: hidden !important;
}
body.browser-client #btn-add-session,
body.browser-client #sessionsSection {
  display: none !important;
  visibility: hidden !important;
}
/* Add session removed — always hide in mini app */
body.tg-client #btn-add-session {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
}
body.tg-client #sessionsSection:not(.hidden) {
  display: block !important;
}


/* Queue panel uses same ambient colors as the player */
.queue-panel-card {
  background:
    radial-gradient(ellipse 120% 80% at 50% -10%,
      rgba(var(--amb-r, 180), var(--amb-g, 180), var(--amb-b, 180), 0.38) 0%,
      transparent 62%),
    radial-gradient(ellipse 90% 70% at 15% 100%,
      rgba(var(--amb2-r, 140), var(--amb2-g, 140), var(--amb2-b, 140), 0.28) 0%,
      transparent 55%),
    rgba(10, 12, 18, 0.82) !important;
  border: 1px solid rgba(255, 255, 255, 0.14) !important;
  -webkit-backdrop-filter: saturate(180%) blur(28px) !important;
  backdrop-filter: saturate(180%) blur(28px) !important;
  box-shadow:
    0 -16px 48px rgba(0,0,0,0.5),
    inset 0 1px 0 rgba(255,255,255,0.14) !important;
}
.queue-panel {
  background: rgba(0, 0, 0, 0.45) !important;
}


/* Boot: hide nav hard */
#app.boot-loading ~ .nav,
#app.boot-loading ~ #nav,
body.boot-loading .nav,
body.boot-loading #nav,
body.auth-locked .nav,
body.auth-locked #nav {
  display: none !important;
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

/* Loading logo — match splash (56vmin, centered, themed API image) */
.view-loading .load-logo,
#view-loading .load-logo {
  position: absolute !important;
  left: 50% !important;
  top: 50% !important;
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  max-height: none !important;
  margin: 0 !important;
  border-radius: 0 !important;
  transform: translate(-50%, -50%) !important;
  object-fit: contain !important;
  opacity: 1 !important;
  display: block !important;
  visibility: visible !important;
  background: transparent !important;
  box-shadow: none !important;
}
.view-loading {
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

/* Red logout under profile name */
.profile-logout-btn {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-top: 12px;
  padding: 12px 22px;
  border-radius: 999px;
  border: 1px solid rgba(255, 80, 80, 0.45) !important;
  background: linear-gradient(145deg, rgba(220, 50, 50, 0.55), rgba(140, 20, 20, 0.45)) !important;
  color: #fff !important;
  font-weight: 700;
  font-size: 0.92rem;
  cursor: pointer;
  box-shadow: 0 8px 22px rgba(180, 0, 0, 0.25), inset 0 1px 0 rgba(255,255,255,0.15);
}
.profile-logout-btn.hidden {
  display: none !important;
}
.profile-logout-btn img.ico {
  width: 20px;
  height: 20px;
  filter: brightness(0) invert(1) !important;
}
.profile-logout-btn:active {
  transform: scale(0.96);
}
body.tg-client #btn-logout {
  display: none !important;
}
body.browser-client #btn-logout:not(.hidden) {
  display: inline-flex !important;
}


/* Centered logout under profile */
body.browser-client #page-profile .profile-card {
  justify-content: flex-start;
}
body.browser-client #btn-logout:not(.hidden) {
  display: inline-flex !important;
  margin-left: auto;
  margin-right: auto;
  margin-top: 18px;
}

/* Centered confirm sheet (logout etc.) */
.sheet-center-card {
  /* keep bottom sheet style but slightly higher content feel */
}
.sheet .sheet-card.sheet-center-card {
  text-align: center;
}
.sheet .sheet-card.sheet-center-card .sheet-info {
  text-align: center;
  margin: 8px 4px 16px;
}

/* No press/glow animation on modal/sheet buttons */
.sheet button.pressed,
.sheet .btn-glow-burst,
.sheet button .btn-glow-burst {
  animation: none !important;
  transform: none !important;
}
.sheet button.pressed {
  filter: none !important;
  opacity: 1 !important;
}

/* Queue list: less empty bottom space */
.queue-panel-body {
  padding-bottom: calc(12px + env(safe-area-inset-bottom, 0px)) !important;
}
#panel-queue #upList .list-end-spacer {
  height: 4px !important;
}
.queue-title-jump {
  cursor: pointer;
  user-select: none;
}
.queue-title-jump:active {
  opacity: 0.75;
}

/* Loop / Shuffle / Endless active: dark background, icon stays white (no color shift) */
#btn-loop-track.active,
#btn-endless.active,
#btn-loop.active,
#btn-shuffle.active,
.icon-head-btn.active {
  opacity: 1;
  filter: none;
  background: rgba(0, 0, 0, 0.55) !important;
  border-color: rgba(255, 255, 255, 0.28) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.12),
    0 4px 14px rgba(0, 0, 0, 0.35) !important;
}
#btn-loop-track.active img.ico,
#btn-endless.active img.ico,
#btn-loop.active img.ico,
#btn-shuffle.active img.ico,
.icon-head-btn.active img.ico {
  filter: brightness(0) invert(1) !important;
}
/* Light theme: shuffle active must match loop (override light .icon-head-btn white bg) */
html[data-theme="light"] #btn-shuffle.active,
html[data-theme="light"] #btn-loop.active,
html[data-theme="light"] #btn-loop-track.active,
html[data-theme="light"] #btn-endless.active {
  background: rgba(0, 0, 0, 0.55) !important;
  border-color: rgba(255, 255, 255, 0.28) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.12),
    0 4px 14px rgba(0, 0, 0, 0.35) !important;
  color: #eaf6ff !important;
}
html[data-theme="light"] #btn-shuffle.active img.ico,
html[data-theme="light"] #btn-loop.active img.ico,
html[data-theme="light"] #btn-loop-track.active img.ico,
html[data-theme="light"] #btn-endless.active img.ico {
  filter: brightness(0) invert(1) !important;
}


/* Green glassy profile hints */
.profile-glass-hint {
  width: 100%;
  max-width: 340px;
  margin: 12px auto 0;
  padding: 14px 16px;
  border-radius: 16px;
  text-align: left;
  background: linear-gradient(145deg, rgba(40, 180, 100, 0.22), rgba(20, 120, 70, 0.16));
  border: 1px solid rgba(120, 230, 160, 0.32);
  box-shadow:
    0 10px 28px rgba(0, 40, 20, 0.22),
    inset 0 1px 0 rgba(200, 255, 220, 0.18);
  -webkit-backdrop-filter: saturate(160%) blur(16px);
  backdrop-filter: saturate(160%) blur(16px);
  color: rgba(230, 255, 240, 0.95);
  line-height: 1.45;
}
.profile-glass-hint.hidden {
  display: none !important;
}
.profile-glass-hint-title {
  font-weight: 800;
  font-size: 0.95rem;
  margin-bottom: 8px;
  color: #d8ffe8;
  letter-spacing: 0.01em;
  text-align: center;
}
.profile-glass-hint-body {
  font-size: 0.82rem;
  color: rgba(220, 250, 230, 0.9);
  text-align: left;
}
.profile-glass-hint-body b {
  color: #fff;
  font-weight: 700;
}
.profile-glass-hint-body .hint-hl {
  color: #ffffff !important;
  font-weight: 700;
}
#page-profile .page-content {
  display: flex;
  flex-direction: column;
  align-items: center;
}
#sessionsSection {
  width: 100%;
  max-width: 360px;
}


/* ========== Working template port (tuned: nav slightly up + ambient bg) ==========
   What fixed the black gap:
   - body is position:relative (NOT fixed) — fixed body blocked bottom bleed on Web Clip
   - html::before with bottom: -100px paints past the layout edge
   - #ios-bottom-filler covers env(safe-area-inset-bottom, 34px) + 40px
   - nav at bottom (now slightly lifted for looks)
*/

:root {
  --safe-bottom: env(safe-area-inset-bottom, 34px);
  /* nav is ~8px up + 64px tall */
  --bot-gap: calc(64px + 8px + 16px + var(--safe-bottom));
}

html {
  height: 100%;
  background: #000 !important;
}

body {
  min-height: 100dvh !important;
  min-height: 100lvh !important;
  height: auto !important;
  position: relative !important;
  inset: auto !important;
  overflow-x: hidden !important;
  overflow-y: hidden !important;
  background: #000 !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* Full-bleed past bottom edge */
html::before {
  content: "" !important;
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: -100px !important;
  z-index: -2 !important;
  background: #000 !important;
  pointer-events: none !important;
}

/* Ambient must also reach the home-indicator zone (same bg as page) */
#app-ambient {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: -100px !important; /* bleed like the template */
  z-index: 0 !important;
  pointer-events: none !important;
}

/* Filler: transparent so ambient shows through (not solid black) */
#ios-bottom-filler {
  position: fixed !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  height: calc(var(--safe-bottom) + 40px) !important;
  min-height: 74px !important;
  background: transparent !important;
  z-index: 40 !important;
  pointer-events: none !important;
  display: block !important;
}

/* Nav slightly up from the physical edge */
.nav, #nav {
  position: fixed !important;
  left: 50% !important;
  bottom: max(2px, calc(env(safe-area-inset-bottom, 0px) - 14px)) !important;
  margin-bottom: 0 !important;
  width: calc(100% - 24px) !important;
  max-width: 406px !important;
  height: 64px !important;
  min-height: 64px !important;
  max-height: 64px !important;
  padding: 6px !important;
  transform: translate3d(-50%, 0, 0) !important;
  z-index: 50 !important;
  /* glass over ambient — keep translucent so page bg shows through */
  background: rgba(12, 20, 36, 0.28) !important;
  -webkit-backdrop-filter: saturate(180%) blur(28px) !important;
  backdrop-filter: saturate(180%) blur(28px) !important;
}

.nav-pill {
  top: 6px !important;
  height: 52px !important;
  max-height: 52px !important;
}
.nav button {
  height: 52px !important;
  max-height: 52px !important;
}

#app {
  min-height: 100dvh;
  min-height: 100lvh;
  background: #000 !important;
}

.sheet .sheet-card,
.sheet-card {
  bottom: var(--kb, 0px) !important;
}

/* Telegram: original layout */
body.tg-client .nav,
body.tg-client #nav {
  bottom: max(6px, env(safe-area-inset-bottom, 0px)) !important;
  height: 64px !important;
  min-height: 64px !important;
  max-height: 64px !important;
  padding: 6px !important;
}
body.tg-client #ios-bottom-filler {
  display: none !important;
}
body.tg-client #app-ambient {
  position: absolute !important;
  inset: 0 !important;
  bottom: 0 !important;
}
body.tg-client {
  --bot-gap: calc(64px + 36px + env(safe-area-inset-bottom, 0px)) !important;
}

.profile-install-btn {
  display: none !important;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-top: 14px;
  padding: 12px 22px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.28);
  background: linear-gradient(145deg, rgba(255,255,255,0.18), rgba(255,255,255,0.06));
  color: #eaf6ff;
  font-weight: 700;
  font-size: 0.92rem;
  cursor: pointer;
}
/* Install app button permanently removed */
#btn-install-pwa,
.profile-install-btn,
body.tg-client.ios-device #btn-install-pwa,
body.tg-client.ios-device #btn-install-pwa:not(.hidden) {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
  height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
}


/* ========== Web Clip modals: extend into bottom safe-area ==========
   Sheet cards used bottom:0 relative to the layout viewport, so they
   sat on top of the home-indicator strip. Pull them down by safe-bottom
   and add the same amount as padding so content stays tappable.
   Telegram (body.tg-client) is left unchanged.
*/
body:not(.tg-client) .sheet .sheet-card,
body:not(.tg-client) .sheet-card {
  bottom: var(--kb, 0px) !important;
  padding-bottom: calc(16px + env(safe-area-inset-bottom, 0px)) !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  margin-bottom: 0 !important;
}
body:not(.tg-client) .sheet {
  bottom: 0 !important;
  top: 0 !important;
}

/* more menu was forcing padding-bottom: 12px and skipping safe-area */
body:not(.tg-client) .more-sheet-card {
  padding-bottom: calc(16px + var(--safe-bottom, env(safe-area-inset-bottom, 34px))) !important;
}

/* Queue panel card — same treatment */
body:not(.tg-client) .queue-panel-card {
  padding-bottom: calc(12px + var(--safe-bottom, env(safe-area-inset-bottom, 34px))) !important;
}

/* Sheet overlay itself can bleed so backdrop covers the strip */
body:not(.tg-client) .sheet {
  bottom: 0 !important;
}
body:not(.tg-client) .queue-panel {
  bottom: 0 !important;
}


/* ========== Web Clip: loading page true center (only while booting) ========== */
/* IMPORTANT: do not match #view-loading without .boot-loading — that kept loader forever */
body:not(.tg-client) #app.boot-loading #view-loading.view-loading:not(.hidden),
body:not(.tg-client) #app.boot-loading .view-loading:not(.hidden) {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  inset: 0 !important;
  width: 100% !important;
  max-width: none !important;
  height: 100% !important;
  height: 100dvh !important;
  height: 100lvh !important;
  min-height: 100dvh !important;
  margin: 0 !important;
  padding: 0 !important;
  transform: none !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 14px !important;
  background: #000 !important;
  z-index: 1000 !important;
  box-sizing: border-box !important;
}
/* Light theme loader MUST win over the rule above */
html[data-theme="light"] body:not(.tg-client) #app.boot-loading #view-loading.view-loading:not(.hidden),
html[data-theme="light"] body:not(.tg-client) #app.boot-loading .view-loading:not(.hidden),
html[data-theme="light"] #app.boot-loading #view-loading.view-loading:not(.hidden),
html[data-theme="light"] #app.boot-loading #view-loading,
html[data-theme="light"] #view-loading.view-loading {
  background: #ffffff !important;
  background-color: #f5f5f7 !important;
}
html[data-theme="light"] body:not(.tg-client) #app.boot-loading .load-text,
html[data-theme="light"] #app.boot-loading .load-text,
html[data-theme="light"] #view-loading .load-text {
  color: #111827 !important;
}
html[data-theme="light"] #app.boot-loading .load-spin,
html[data-theme="light"] #view-loading .load-spin {
  border-color: rgba(17,24,39,0.14) !important;
  border-top-color: #111827 !important;
}

/* Allow hide when boot ends */
body:not(.tg-client) #view-loading.view-loading.hidden,
body:not(.tg-client) #app:not(.boot-loading) #view-loading {
  display: none !important;
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
  z-index: -1 !important;
}

body:not(.tg-client) #app.boot-loading {
  padding: 0 !important;
  margin: 0 auto !important;
  top: 0 !important;
  bottom: 0 !important;
  transform: none !important;
}

body:not(.tg-client) #app.boot-loading ~ #ios-bottom-filler,
body:not(.tg-client).boot-loading #ios-bottom-filler {
  opacity: 0 !important;
}

/* Nav ~14px lower than mini-app (Web Clip / iOS web app only) */
body:not(.tg-client) .nav,
body:not(.tg-client) #nav {
  bottom: max(2px, calc(env(safe-area-inset-bottom, 0px) - 14px)) !important;
}


/* ========== Theme icons: centered, no motion, instant swap ========== */
.theme-toggle,
.theme-auto-btn {
  position: relative !important;
  overflow: hidden !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  /* match .icon-head-btn (playlist header) size */
  width: 38px !important;
  height: 38px !important;
  min-width: 38px !important;
  padding: 0 !important;
  box-sizing: border-box !important;
}
/* Profile title actions: identical size to Playlists header buttons */
#page-profile .pl-head-actions .icon-head-btn,
#page-profile .pl-head-actions .theme-toggle,
#page-profile .pl-head-actions .theme-auto-btn,
#page-playlists .pl-head-actions .icon-head-btn {
  width: 38px !important;
  height: 38px !important;
  min-width: 38px !important;
  min-height: 38px !important;
  max-width: 38px !important;
  max-height: 38px !important;
  padding: 0 !important;
  box-sizing: border-box !important;
}
#page-profile .pl-head-actions .icon-head-btn img.ico,
#page-playlists .pl-head-actions .icon-head-btn img.ico {
  width: 20px !important;
  height: 20px !important;
}
.theme-ico-wrap {
  position: relative !important;
  width: 22px !important;
  height: 22px !important;
  display: block !important;
  margin: 0 !important;
  flex-shrink: 0 !important;
}
.theme-ico {
  position: absolute !important;
  left: 0 !important;
  top: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  width: 22px !important;
  height: 22px !important;
  margin: 0 !important;
  padding: 0 !important;
  object-fit: contain !important;
  object-position: center center !important;
  transform: none !important;
  transition: opacity 0.05s linear !important;
  animation: none !important;
  pointer-events: none !important;
}
/* Show the TARGET theme icon (light icon in dark mode, dark icon in light mode) */
html[data-theme="dark"] .theme-ico-light,
html:not([data-theme]) .theme-ico-light {
  opacity: 1 !important;
  z-index: 2 !important;
  filter: none !important;
}
html[data-theme="dark"] .theme-ico-dark,
html:not([data-theme]) .theme-ico-dark {
  opacity: 0 !important;
  z-index: 1 !important;
}
html[data-theme="light"] .theme-ico-dark {
  opacity: 1 !important;
  z-index: 2 !important;
  filter: brightness(0) invert(0) !important;
}
html[data-theme="light"] .theme-ico-light {
  opacity: 0 !important;
  z-index: 1 !important;
}
.theme-toggle.theme-spin .theme-ico-wrap {
  animation: none !important;
}
.theme-toggle img.ico,
.theme-toggle img.theme-ico {
  /* never inherit global invert on both in a broken way */
}
html[data-theme="light"] .theme-toggle img.theme-ico-light {
  filter: none !important;
}
html[data-theme="dark"] .theme-toggle img.theme-ico-dark,
html:not([data-theme]) .theme-toggle img.theme-ico-dark {
  filter: brightness(0) invert(1) !important;
}

.theme-auto-btn img.theme-auto-ico {
  width: 22px !important;
  height: 22px !important;
  margin: 0 auto !important;
  object-fit: contain !important;
}
html[data-theme="dark"] .theme-auto-btn img.theme-auto-ico,
html:not([data-theme]) .theme-auto-btn img.theme-auto-ico {
  filter: brightness(0) invert(1) !important;
}
html[data-theme="light"] .theme-auto-btn img.theme-auto-ico {
  filter: brightness(0) invert(0) !important;
}
.theme-auto-btn.active {
  background: rgba(255, 255, 255, 0.18) !important;
  border-color: rgba(255, 255, 255, 0.35) !important;
}
html[data-theme="light"] .theme-auto-btn.active {
  background: rgba(255, 255, 255, 0.65) !important;
  border-color: rgba(15, 25, 45, 0.14) !important;
}

/* ========== Light theme ========== */
html[data-theme="light"] {
  --bg: #f4f6fa;
  --text: #101828;
  --muted: #374151;
  color-scheme: light;
}
html[data-theme="light"],
html[data-theme="light"] body {
  background: #ffffff !important;
  color: var(--text) !important;
}
html[data-theme="light"]::before { background: #ffffff !important; }
html[data-theme="light"] #app { background: transparent !important; }

html[data-theme="light"] #app.has-ambient {
  background:
    radial-gradient(ellipse 95% 60% at 50% 6%, var(--ambient-a), transparent 70%),
    radial-gradient(ellipse 75% 50% at 12% 80%, var(--ambient-b), transparent 65%),
    radial-gradient(ellipse 65% 45% at 90% 70%, var(--ambient-c), transparent 60%),
    #f4f6fa !important;
}
html[data-theme="light"] #app-ambient .amb-veil {
  background: linear-gradient(180deg, rgba(255,255,255,0.05) 0%, rgba(255,255,255,0.1) 100%) !important;
}
html[data-theme="light"] #app-ambient {
  /* background ambient only: 50% less saturation */
  filter: saturate(0.5);
}
html[data-theme="light"] #app-ambient .amb-cover {
  opacity: 0.55 !important;
  filter: blur(48px) saturate(1.2) brightness(1.12) !important;
}
html[data-theme="light"] #app-ambient .amb-blob { opacity: 0.6 !important; }
html[data-theme="light"] #app-ambient .amb-veil {
  filter: none;
}

html[data-theme="light"] img.ico,
html[data-theme="light"] img.nav-ico {
  filter: brightness(0) invert(0) !important;
}
/* Search / list track fav + playlist: black icons + visible glass background */
html[data-theme="light"] .track .track-actions img.ico,
html[data-theme="light"] .track .track-actions .icon-act img.ico,
html[data-theme="light"] .track-actions .icon-act img.ico,
html[data-theme="light"] .artist-tile .artist-actions .icon-act img.ico {
  filter: brightness(0) invert(0) !important;
  opacity: 0.92;
}
html[data-theme="light"] .track .track-actions .track-fav.on img.ico {
  opacity: 1 !important;
}
html[data-theme="light"] .track .track-actions .icon-act:not(.del),
html[data-theme="light"] .track-actions .icon-act:not(.del),
html[data-theme="light"] .artist-tile .artist-actions .icon-act:not(.del),
html[data-theme="light"] #searchList .track .track-actions .icon-act:not(.del),
html[data-theme="light"] #likedList .track .track-actions .icon-act:not(.del),
html[data-theme="light"] #plTracks .track .track-actions .icon-act:not(.del),
html[data-theme="light"] #upList .track .track-actions .icon-act:not(.del) {
  background: rgba(255, 255, 255, 0.55) !important;
  border: 1px solid rgba(15, 25, 45, 0.1) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.65), 0 2px 8px rgba(15, 25, 45, 0.06) !important;
  -webkit-backdrop-filter: saturate(180%) blur(12px) !important;
  backdrop-filter: saturate(180%) blur(12px) !important;
}

/* Search back button: black icon in light theme */
html[data-theme="light"] .search-row .search-back img.ico,
html[data-theme="light"] #btn-search-back img.ico {
  filter: brightness(0) invert(0) !important;
}
html[data-theme="light"] .search-row .search-back,
html[data-theme="light"] #btn-search-back {
  background: rgba(255, 255, 255, 0.55) !important;
  border: 1px solid rgba(15, 25, 45, 0.1) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.65) !important;
}

html[data-theme="light"] .theme-toggle img.theme-ico-light { filter: none !important; }
html[data-theme="light"] .logo-img {
  filter: none !important;
  -webkit-filter: none !important;
}
html[data-theme="light"] .logo-text { color: #101828 !important; }
html[data-theme="light"] .profile-logout-btn img.ico,
html[data-theme="light"] #btn-logout img.ico {
  filter: brightness(0) invert(1) !important;
}

/* Loading white */
html[data-theme="light"] #view-loading,
html[data-theme="light"] #view-loading.view-loading,
html[data-theme="light"] #app.boot-loading #view-loading,
html[data-theme="light"] #app.boot-loading .view-loading,
html[data-theme="light"] .view-loading,
html[data-theme="light"] body:not(.tg-client) #app.boot-loading #view-loading.view-loading:not(.hidden),
html[data-theme="light"] body:not(.tg-client) #app.boot-loading .view-loading:not(.hidden),
html[data-theme="light"] #app.boot-loading #view-loading.view-loading:not(.hidden) {
  background: #ffffff !important;
  background-color: #f5f5f7 !important;
}
html[data-theme="light"] .load-text { color: #111827 !important; }
html[data-theme="light"] .load-spin {
  border-color: rgba(17,24,39,0.14) !important;
  border-top-color: #111827 !important;
}
html[data-theme="light"] #view-loading .load-logo {
  filter: brightness(0) invert(0) !important;
}

/* Nav glassy */
html[data-theme="light"] .nav,
html[data-theme="light"] #nav {
  background: rgba(255, 255, 255, 0.14) !important;
  border: 1px solid rgba(255, 255, 255, 0.35) !important;
  box-shadow: 0 10px 32px rgba(15, 25, 45, 0.06), inset 0 1px 0 rgba(255,255,255,0.45) !important;
  -webkit-backdrop-filter: saturate(220%) blur(32px) !important;
  backdrop-filter: saturate(220%) blur(32px) !important;
}
html[data-theme="light"] .nav-pill {
  background: linear-gradient(165deg, rgba(255,255,255,0.55) 0%, rgba(255,255,255,0.22) 100%) !important;
  border: 1px solid rgba(255, 255, 255, 0.5) !important;
  box-shadow: 0 4px 14px rgba(15, 25, 45, 0.06), inset 0 1px 0 rgba(255,255,255,0.7) !important;
  -webkit-backdrop-filter: blur(18px) !important;
  backdrop-filter: blur(18px) !important;
}
html[data-theme="light"] .nav button,
html[data-theme="light"] .nav button.active,
html[data-theme="light"] .nav button span {
  color: #101828 !important;
}
html[data-theme="light"] .nav button .nav-ico {
  filter: brightness(0) invert(0) !important;
}

/* Play button: ambient color ONLY while playing (pause icon) */
html[data-theme="light"] .cbtn.main,
html[data-theme="light"] .cbtn.main.is-paused,
html[data-theme="light"] .cbtn.main:not(.is-playing) {
  background: rgba(14, 28, 48, 0.35) !important;
  border: 1px solid rgba(255, 255, 255, 0.18) !important;
  box-shadow: 0 6px 16px rgba(0,0,0,0.2), inset 0 1px 0 rgba(255,255,255,0.15) !important;
  filter: none !important;
}
html[data-theme="light"] .cbtn.main.is-playing {
  background: linear-gradient(
    145deg,
    rgba(var(--amb-r, 56), var(--amb-g, 189), var(--amb-b, 248), 1),
    rgba(var(--amb2-r, 14), var(--amb2-g, 165), var(--amb2-b, 233), 0.92),
    rgba(255, 255, 255, 0.35)
  ) !important;
  border-color: rgba(255, 255, 255, 0.5) !important;
  box-shadow:
    0 16px 40px rgba(var(--amb-r, 56), var(--amb-g, 189), var(--amb-b, 248), 0.5),
    0 0 24px rgba(var(--amb-r, 56), var(--amb-g, 189), var(--amb-b, 248), 0.35),
    inset 0 1px 0 rgba(255, 255, 255, 0.55) !important;
  filter: brightness(1.15) saturate(1.15) !important;
}
html[data-theme="light"] .cbtn.main img.ico {
  filter: brightness(0) invert(1) !important;
}

/* Seek fill: real ambient gradient (no white end) */
html[data-theme="light"] .seek-fill,
.seek-fill {
  background: linear-gradient(
    90deg,
    rgba(var(--amb2-r, 30), var(--amb2-g, 100), var(--amb2-b, 200), 1) 0%,
    rgba(var(--amb-r, 40), var(--amb-g, 170), var(--amb-b, 255), 1) 45%,
    rgba(var(--amb-r, 100), var(--amb-g, 200), var(--amb-b, 255), 1) 100%
  ) !important;
  box-shadow:
    0 0 16px rgba(var(--amb-r, 40), var(--amb-g, 170), var(--amb-b, 255), 0.65),
    inset 0 1px 0 rgba(255,255,255,0.3) !important;
}

/* Playing light: gradient, NO border */
html[data-theme="light"] .track.playing,
html[data-theme="light"] #upList .track.playing,
html[data-theme="light"] #likedList .track.playing,
html[data-theme="light"] #plTracks .track.playing,
html[data-theme="light"] #searchList .track.playing {
  background: linear-gradient(90deg, #ffffff 0%, rgba(40,44,52,0.45) 50%, #000000 100%) !important;
  border: none !important;
  border-color: transparent !important;
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.12) !important;
  outline: none !important;
  -webkit-backdrop-filter: blur(16px) !important;
  backdrop-filter: blur(16px) !important;
}
html[data-theme="light"] .track.playing .t .n,
html[data-theme="light"] .track.playing .num,
html[data-theme="light"] #likedList .track.playing .t .n,
html[data-theme="light"] #plTracks .track.playing .t .n,
html[data-theme="light"] #upList .track.playing .t .n,
html[data-theme="light"] #searchList .track.playing .t .n {
  color: #101828 !important;
}
html[data-theme="light"] .track.playing .t .a,
html[data-theme="light"] #likedList .track.playing .t .a,
html[data-theme="light"] #plTracks .track.playing .t .a {
  color: #1f2937 !important;
}
html[data-theme="light"] .track.playing .d,
html[data-theme="light"] #likedList .track.playing .d,
html[data-theme="light"] #plTracks .track.playing .d,
html[data-theme="light"] #upList .track.playing .d,
html[data-theme="light"] #searchList .track.playing .d {
  color: #ffffff !important;
}

/* Playing DARK theme: reverse gradient black → white, no border */
html[data-theme="dark"] .track.playing,
html:not([data-theme]) .track.playing,
html[data-theme="dark"] #upList .track.playing,
html[data-theme="dark"] #likedList .track.playing,
html[data-theme="dark"] #plTracks .track.playing,
html[data-theme="dark"] #searchList .track.playing,
html:not([data-theme]) #upList .track.playing,
html:not([data-theme]) #likedList .track.playing,
html:not([data-theme]) #plTracks .track.playing {
  background: linear-gradient(90deg, #000000 0%, rgba(40,44,52,0.55) 50%, #ffffff 100%) !important;
  border: none !important;
  border-color: transparent !important;
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.35) !important;
  outline: none !important;
}
html[data-theme="dark"] .track.playing .t .n,
html[data-theme="dark"] .track.playing .num,
html:not([data-theme]) .track.playing .t .n,
html:not([data-theme]) .track.playing .num,
html[data-theme="dark"] #likedList .track.playing .t .n,
html[data-theme="dark"] #plTracks .track.playing .t .n,
html[data-theme="dark"] #upList .track.playing .t .n {
  color: #ffffff !important;
}
html[data-theme="dark"] .track.playing .t .a,
html:not([data-theme]) .track.playing .t .a {
  color: rgba(255,255,255,0.75) !important;
}
html[data-theme="dark"] .track.playing .d,
html:not([data-theme]) .track.playing .d,
html[data-theme="dark"] #likedList .track.playing .d,
html[data-theme="dark"] #plTracks .track.playing .d,
html[data-theme="dark"] #upList .track.playing .d {
  color: #101828 !important;
}

/* Search input readable on light */
html[data-theme="light"] .search-row input,
html[data-theme="light"] #q,
html[data-theme="light"] input[type="search"],
html[data-theme="light"] input[type="text"],
html[data-theme="light"] .row input {
  background: rgba(255, 255, 255, 0.85) !important;
  color: #101828 !important;
  border-color: rgba(15, 25, 45, 0.12) !important;
  -webkit-text-fill-color: #101828 !important;
  caret-color: #101828 !important;
}
html[data-theme="light"] .search-row input::placeholder,
html[data-theme="light"] #q::placeholder {
  color: #6b7280 !important;
  -webkit-text-fill-color: #6b7280 !important;
  opacity: 1 !important;
}

/* Manage playlist modal light — names readable */
html[data-theme="light"] #sheet-manage.sheet {
  background: rgba(15, 25, 45, 0.25) !important;
}
html[data-theme="light"] #sheet-manage .sheet-card,
html[data-theme="light"] #sheet-manage.sheet .sheet-card {
  background: rgba(255, 255, 255, 0.95) !important;
  border-color: rgba(15, 25, 45, 0.1) !important;
  color: #101828 !important;
}
html[data-theme="light"] #sheet-manage .sheet-title,
html[data-theme="light"] #sheet-manage .pl-name,
html[data-theme="light"] #sheet-manage .modal-pl-item .pl-name,
html[data-theme="light"] .modal-pl-item .pl-name,
html[data-theme="light"] #sheet-rename-pl .sheet-title,
html[data-theme="light"] #sheet-rename-pl input,
html[data-theme="light"] #renamePlName {
  color: #101828 !important;
  -webkit-text-fill-color: #101828 !important;
}
html[data-theme="light"] #sheet-rename-pl .sheet-card,
html[data-theme="light"] #sheet-create-pl .sheet-card,
html[data-theme="light"] #sheet-import-pl .sheet-card {
  background: rgba(255, 255, 255, 0.95) !important;
  color: #101828 !important;
}
html[data-theme="light"] #sheet-manage .modal-pl-item {
  color: #101828 !important;
  background: rgba(255, 255, 255, 0.5) !important;
}

/* Modals flush to bottom (Web Clip) */
body:not(.tg-client) .sheet {
  top: 0 !important;
  bottom: 0 !important;
  left: 0 !important;
  right: 0 !important;
}
body:not(.tg-client) .sheet .sheet-card,
body:not(.tg-client) .sheet-card {
  bottom: 0 !important;
  margin-bottom: 0 !important;
  padding-bottom: max(12px, env(safe-area-inset-bottom, 0px)) !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
}
body:not(.tg-client) .sheet .sheet-card {
  /* keyboard still lifts */
  bottom: var(--kb, 0px) !important;
}

html[data-theme="light"] .sheet-card,
html[data-theme="light"] .queue-panel-card {
  background: rgba(255, 255, 255, 0.92) !important;
  color: #101828 !important;
}
html[data-theme="light"] .sheet-title,
html[data-theme="light"] .page-title,
html[data-theme="light"] .title {
  color: #101828 !important;
}
html[data-theme="light"] .dim,
html[data-theme="light"] .hint,
html[data-theme="light"] .artist,
html[data-theme="light"] .sheet-info {
  color: #4b5563 !important;
}
html[data-theme="light"] .more-item {
  background: rgba(255, 255, 255, 0.55) !important;
  color: #101828 !important;
}
html[data-theme="light"] .more-item span { color: #101828 !important; }
html[data-theme="light"] .more-item img.ico { filter: brightness(0) invert(0) !important; }
html[data-theme="light"] .profile-card {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}
html[data-theme="light"] .act-btn,
html[data-theme="light"] .cbtn:not(.main),
html[data-theme="light"] .icon-head-btn,
html[data-theme="light"] .chip {
  background: rgba(255, 255, 255, 0.4) !important;
  color: #101828 !important;
}
html[data-theme="light"] .btn-primary,
html[data-theme="light"] .btn-confirm {
  background: rgba(255, 255, 255, 0.85) !important;
  color: #101828 !important;
}
html[data-theme="light"] .btn-close {
  color: #101828 !important;
  background: rgba(255,255,255,0.6) !important;
}
html[data-theme="light"] .times,
html[data-theme="light"] #t0,
html[data-theme="light"] #t1 {
  color: #1f2937 !important;
  font-weight: 600 !important;
}
html[data-theme="light"] .track {
  background: rgba(255, 255, 255, 0.42) !important;
  color: #101828 !important;
}
html[data-theme="light"] .track .t .n,
html[data-theme="light"] .track .num { color: #101828 !important; }
html[data-theme="light"] .track .t .a,
html[data-theme="light"] .track .d { color: #4b5563 !important; }
html[data-theme="light"] .toast {
  background: rgba(255,255,255,0.92) !important;
  color: #101828 !important;
}
html[data-theme="light"] #ios-bottom-filler { background: transparent !important; }


/* Play/pause: ambient color only when .is-playing (pause icon visible) */
.cbtn.main.is-paused,
.cbtn.main:not(.is-playing) {
  background: rgba(14, 28, 48, 0.42) !important;
  border-color: rgba(255, 255, 255, 0.18) !important;
  filter: brightness(0.92) saturate(0.9) !important;
  box-shadow:
    0 6px 16px rgba(0, 0, 0, 0.28),
    inset 0 1px 0 rgba(255, 255, 255, 0.15) !important;
}


/* ========== Light theme polish v21 ========== */

/* App name black on all pages */
html[data-theme="light"] .logo-text,
html[data-theme="light"] .header .logo-text,
html[data-theme="light"] .logo-mark {
  color: #101828 !important;
}

/* Browse genres title black */
html[data-theme="light"] .genre-section-title,
html[data-theme="light"] #genreSection .genre-section-title,
html[data-theme="light"] .hist-label,
html[data-theme="light"] .sessions-title {
  color: #101828 !important;
}
/* Search history Clear text — readable in light theme */
html[data-theme="light"] .link,
html[data-theme="light"] #histClear,
html[data-theme="light"] button.link {
  color: #4b5563 !important;
}
html[data-theme="light"] .link:active,
html[data-theme="light"] #histClear:active {
  color: #1f2937 !important;
}


/* Playing row: number black, title white */
html[data-theme="light"] .track.playing .num,
html[data-theme="light"] #likedList .track.playing .num,
html[data-theme="light"] #plTracks .track.playing .num,
html[data-theme="light"] #upList .track.playing .num,
html[data-theme="light"] #searchList .track.playing .num {
  color: #101828 !important;
}
html[data-theme="light"] .track.playing .t .n,
html[data-theme="light"] #likedList .track.playing .t .n,
html[data-theme="light"] #plTracks .track.playing .t .n,
html[data-theme="light"] #upList .track.playing .t .n,
html[data-theme="light"] #searchList .track.playing .t .n {
  color: #ffffff !important;
  text-shadow: 0 1px 2px rgba(0,0,0,0.35);
}
html[data-theme="light"] .track.playing .t .a,
html[data-theme="light"] #likedList .track.playing .t .a,
html[data-theme="light"] #plTracks .track.playing .t .a {
  color: rgba(255,255,255,0.85) !important;
  text-shadow: 0 1px 2px rgba(0,0,0,0.3);
}
html[data-theme="light"] .track.playing .d,
html[data-theme="light"] #likedList .track.playing .d,
html[data-theme="light"] #plTracks .track.playing .d,
html[data-theme="light"] #upList .track.playing .d {
  color: #ffffff !important;
}

/* Player page: title black, artist darker gray */
html[data-theme="light"] .player-page .title,
html[data-theme="light"] #title {
  color: #101828 !important;
}
html[data-theme="light"] .player-page .artist,
html[data-theme="light"] #artist {
  color: #4b5563 !important;
}

/* Header glass light (list pages) — top of ambient was too dark */
html[data-theme="light"] #app.is-list-page .header::before {
  background: linear-gradient(
    to bottom,
    rgba(255, 255, 255, 0.88) 0%,
    rgba(255, 255, 255, 0.55) 35%,
    rgba(255, 255, 255, 0.2) 70%,
    rgba(255, 255, 255, 0) 100%
  ) !important;
  -webkit-backdrop-filter: saturate(160%) blur(18px) !important;
  backdrop-filter: saturate(160%) blur(18px) !important;
}
html[data-theme="light"] .header-logo-row,
html[data-theme="light"] .header {
  color: #101828 !important;
}
/* Soften top ambient so header area isn't dark */
html[data-theme="light"] #app-ambient .amb-cover {
  opacity: 0.42 !important;
  filter: blur(52px) saturate(1.45) brightness(1.25) !important;
  top: -12% !important;
}
html[data-theme="light"] #app-ambient .amb-veil {
  background: linear-gradient(
    180deg,
    rgba(255,255,255,0.55) 0%,
    rgba(255,255,255,0.22) 28%,
    rgba(255,255,255,0.1) 55%,
    rgba(255,255,255,0.12) 100%
  ) !important;
}
html[data-theme="light"] #app.has-ambient {
  background:
    radial-gradient(ellipse 95% 50% at 50% 0%, rgba(255,255,255,0.65), transparent 55%),
    radial-gradient(ellipse 90% 55% at 50% 18%, var(--ambient-a), transparent 70%),
    radial-gradient(ellipse 75% 50% at 12% 80%, var(--ambient-b), transparent 65%),
    radial-gradient(ellipse 65% 45% at 90% 70%, var(--ambient-c), transparent 60%),
    #f4f6fa !important;
}

/* Play button idle = same as prev/next */
html[data-theme="light"] .cbtn.main.is-paused,
html[data-theme="light"] .cbtn.main:not(.is-playing),
.cbtn.main.is-paused,
.cbtn.main:not(.is-playing) {
  background: rgba(14, 28, 48, 0.42) !important;
  border: 1px solid rgba(255, 255, 255, 0.18) !important;
  box-shadow:
    0 6px 16px rgba(0, 0, 0, 0.28),
    inset 0 1px 0 rgba(255, 255, 255, 0.2),
    inset 0 -1px 0 rgba(0, 0, 0, 0.15) !important;
  filter: none !important;
}
html[data-theme="light"] .cbtn.main.is-paused,
html[data-theme="light"] .cbtn.main:not(.is-playing) {
  background: rgba(255, 255, 255, 0.4) !important;
  border-color: rgba(255, 255, 255, 0.5) !important;
  box-shadow: 0 4px 14px rgba(15, 25, 45, 0.08), inset 0 1px 0 rgba(255,255,255,0.7) !important;
}
html[data-theme="light"] .cbtn.main.is-paused img.ico,
html[data-theme="light"] .cbtn.main:not(.is-playing) img.ico {
  filter: brightness(0) invert(0) !important;
}
html[data-theme="light"] .cbtn.main.is-playing img.ico {
  filter: brightness(0) invert(1) !important;
}
html[data-theme="light"] .cbtn:not(.main) {
  background: rgba(255, 255, 255, 0.4) !important;
  border-color: rgba(255, 255, 255, 0.5) !important;
}
html[data-theme="light"] .cbtn:not(.main) img.ico {
  filter: brightness(0) invert(0) !important;
}

/* Nav pill alignment — match button row */
.nav-pill {
  top: 6px !important;
  left: 6px !important;
  height: 52px !important;
  max-height: 52px !important;
  box-sizing: border-box !important;
}
.nav button {
  height: 52px !important;
  max-height: 52px !important;
  align-self: flex-start !important;
}
html[data-theme="light"] .nav-pill {
  background: linear-gradient(165deg, rgba(255,255,255,0.55) 0%, rgba(255,255,255,0.22) 100%) !important;
  border: 1px solid rgba(255, 255, 255, 0.5) !important;
}

/* Web Clip modals: fill to physical bottom / safe area */
body:not(.tg-client) .sheet {
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  height: auto !important;
  max-height: none !important;
}
body:not(.tg-client) .sheet .sheet-card,
body:not(.tg-client) .sheet-card {
  bottom: var(--kb, 0px) !important;
  margin-bottom: 0 !important;
  max-height: min(92vh, 100%) !important;
  padding-bottom: max(20px, calc(12px + env(safe-area-inset-bottom, 0px))) !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
}
body:not(.tg-client) .sheet-card.small {
  max-height: min(70vh, 100%) !important;
}
body:not(.tg-client) #sheet-manage .sheet-card {
  max-height: min(92vh, 100%) !important;
  padding-bottom: max(24px, calc(16px + env(safe-area-inset-bottom, 0px))) !important;
}


/* ========== UI polish v22 ========== */

/* Unfilled progress rail: no border line */
.seek-track::before {
  border: none !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.12),
    inset 0 -1px 0 rgba(0, 0, 0, 0.15) !important;
}
html[data-theme="light"] .seek-track::before {
  border: none !important;
  background: linear-gradient(180deg, rgba(15,25,45,0.1) 0%, rgba(15,25,45,0.05) 100%) !important;
  box-shadow: none !important;
}

/* Nav pill 2px up */
.nav-pill {
  top: 4px !important;
}
html[data-theme="light"] .nav-pill {
  top: 4px !important;
}

/* Play icon 3px right */
#btn-play img.ico,
#playIco,
.cbtn.main img.ico {
  transform: translateX(3px) !important;
}
/* pause icon often looks better centered — keep 3px as user asked for play icon;
   apply to both for consistency */

html[data-theme="light"] .cbtn.main.is-paused #playIco,
html[data-theme="light"] .cbtn.main:not(.is-playing) #playIco {
  filter: brightness(0) invert(0) !important;
  transition: none !important;
  -webkit-filter: brightness(0) invert(0) !important;
}
html[data-theme="light"] .cbtn.main.is-playing #playIco,
html[data-theme="light"] #btn-play.is-playing #playIco {
  filter: brightness(0) invert(1) !important;
  transition: none !important;
  -webkit-filter: brightness(0) invert(1) !important;
}

/* Dark theme: always white - INSTANT */
.cbtn.main #playIco {
  filter: brightness(0) invert(1) !important;
  transition: none !important;
  -webkit-filter: brightness(0) invert(1) !important;
}

/* Idle play button = same as prev/next (both themes) */
.cbtn.main.is-paused,
.cbtn.main:not(.is-playing) {
  background: rgba(14, 28, 48, 0.42) !important;
  border: 1px solid rgba(255, 255, 255, 0.18) !important;
  box-shadow:
    0 6px 16px rgba(0, 0, 0, 0.28),
    inset 0 1px 0 rgba(255, 255, 255, 0.2),
    inset 0 -1px 0 rgba(0, 0, 0, 0.15) !important;
  filter: none !important;
}
html[data-theme="light"] .cbtn.main.is-paused,
html[data-theme="light"] .cbtn.main:not(.is-playing) {
  background: rgba(255, 255, 255, 0.4) !important;
  border-color: rgba(255, 255, 255, 0.5) !important;
  box-shadow: 0 4px 14px rgba(15, 25, 45, 0.08), inset 0 1px 0 rgba(255,255,255,0.7) !important;
  filter: none !important;
}
html[data-theme="light"] .cbtn:not(.main) {
  background: rgba(255, 255, 255, 0.4) !important;
  border-color: rgba(255, 255, 255, 0.5) !important;
}

/* Modals fill bottom like nav (Web Clip) — extend into safe area */
body:not(.tg-client) .sheet {
  top: 0 !important;
  bottom: 0 !important;
  left: 0 !important;
  right: 0 !important;
}
body:not(.tg-client) .sheet .sheet-card,
body:not(.tg-client) .sheet-card {
  bottom: var(--kb, 0px) !important;
  margin-bottom: 0 !important;
  /* same trick as nav: pad into safe-area so card fills physical bottom */
  padding-bottom: max(20px, calc(12px + env(safe-area-inset-bottom, 0px))) !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  max-height: calc(100% - 8px) !important;
}
body:not(.tg-client) .sheet-card.small {
  max-height: min(75vh, calc(100% - 8px)) !important;
}

/* Theme icon reverse (extra specificity) */
html[data-theme="dark"] .theme-toggle .theme-ico-light,
html:not([data-theme]) .theme-toggle .theme-ico-light {
  opacity: 1 !important;
  z-index: 3 !important;
  filter: none !important;
}
html[data-theme="dark"] .theme-toggle .theme-ico-dark,
html:not([data-theme]) .theme-toggle .theme-ico-dark {
  opacity: 0 !important;
  z-index: 1 !important;
}
html[data-theme="light"] .theme-toggle .theme-ico-dark {
  opacity: 1 !important;
  z-index: 3 !important;
  filter: brightness(0) invert(0) !important;
}
html[data-theme="light"] .theme-toggle .theme-ico-light {
  opacity: 0 !important;
  z-index: 1 !important;
}


/* ========== UI polish v23 ========== */

/* Play icon 3px LEFT */
#btn-play img.ico,
#playIco,
.cbtn.main img.ico {
  transform: translateX(-3px) !important;
}

/* Nav pill 1px down from previous (was 4px → 5px) */
.nav-pill {
  top: 5px !important;
}
html[data-theme="light"] .nav-pill {
  top: 5px !important;
}

/* Modals: force fill bottom safe area (same idea as nav bleed) */
body:not(.tg-client) .sheet {
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  height: 100% !important;
  max-height: none !important;
}
body:not(.tg-client) .sheet .sheet-card,
body:not(.tg-client) .sheet-card {
  bottom: var(--kb, 0px) !important;
  margin-bottom: 0 !important;
  /* extend card paint into home-indicator zone */
  padding-bottom: max(28px, calc(16px + env(safe-area-inset-bottom, 34px))) !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  max-height: calc(100dvh - 12px) !important;
  max-height: calc(100lvh - 12px) !important;
}
body:not(.tg-client) .sheet-card.small {
  max-height: min(78vh, calc(100dvh - 12px)) !important;
}
body:not(.tg-client) #sheet-manage .sheet-card,
body:not(.tg-client) #sheet-share-pl .sheet-card,
body:not(.tg-client) #sheet-pl-info .sheet-card {
  padding-bottom: max(32px, calc(20px + env(safe-area-inset-bottom, 34px))) !important;
  max-height: calc(100dvh - 8px) !important;
  max-height: calc(100lvh - 8px) !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  margin-bottom: 0 !important;
  bottom: 0 !important;
}

/* Dark theme: idle play = same as prev/next */
html[data-theme="dark"] .cbtn.main.is-paused,
html[data-theme="dark"] .cbtn.main:not(.is-playing),
html:not([data-theme]) .cbtn.main.is-paused,
html:not([data-theme]) .cbtn.main:not(.is-playing),
.cbtn.main.is-paused,
.cbtn.main:not(.is-playing) {
  background: rgba(14, 28, 48, 0.42) !important;
  border: 1px solid rgba(255, 255, 255, 0.18) !important;
  box-shadow:
    0 6px 16px rgba(0, 0, 0, 0.28),
    inset 0 1px 0 rgba(255, 255, 255, 0.2),
    inset 0 -1px 0 rgba(0, 0, 0, 0.15) !important;
  filter: none !important;
}
html[data-theme="dark"] .cbtn.main.is-paused img.ico,
html[data-theme="dark"] .cbtn.main:not(.is-playing) img.ico,
html:not([data-theme]) .cbtn.main.is-paused img.ico,
html:not([data-theme]) .cbtn.main:not(.is-playing) img.ico {
  filter: brightness(0) invert(1) !important;
}

/* light.png must be WHITE when shown in dark theme */
html[data-theme="dark"] .theme-toggle .theme-ico-light,
html:not([data-theme]) .theme-toggle .theme-ico-light,
html[data-theme="dark"] .theme-ico-light,
html:not([data-theme]) .theme-ico-light {
  opacity: 1 !important;
  z-index: 3 !important;
  filter: brightness(0) invert(1) !important; /* force white */
}
html[data-theme="dark"] .theme-toggle .theme-ico-dark,
html:not([data-theme]) .theme-toggle .theme-ico-dark {
  opacity: 0 !important;
}
/* light mode still shows dark.png (black) */
html[data-theme="light"] .theme-toggle .theme-ico-dark {
  opacity: 1 !important;
  z-index: 3 !important;
  filter: brightness(0) invert(0) !important;
}
html[data-theme="light"] .theme-toggle .theme-ico-light {
  opacity: 0 !important;
}

/* Playing dark: reverse gradient — LEFT white, RIGHT black */
html[data-theme="dark"] .track.playing,
html:not([data-theme]) .track.playing,
html[data-theme="dark"] #upList .track.playing,
html[data-theme="dark"] #likedList .track.playing,
html[data-theme="dark"] #plTracks .track.playing,
html[data-theme="dark"] #searchList .track.playing,
html:not([data-theme]) #upList .track.playing,
html:not([data-theme]) #likedList .track.playing,
html:not([data-theme]) #plTracks .track.playing {
  background: linear-gradient(90deg, #ffffff 0%, rgba(40,44,52,0.5) 50%, #000000 100%) !important;
  border: none !important;
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.35) !important;
}
html[data-theme="dark"] .track.playing .num,
html:not([data-theme]) .track.playing .num {
  color: #101828 !important;
}
html[data-theme="dark"] .track.playing .t .n,
html:not([data-theme]) .track.playing .t .n,
html[data-theme="dark"] #likedList .track.playing .t .n,
html[data-theme="dark"] #plTracks .track.playing .t .n {
  color: #101828 !important;
  text-shadow: none !important;
}
html[data-theme="dark"] .track.playing .t .a,
html:not([data-theme]) .track.playing .t .a {
  color: #374151 !important;
}
html[data-theme="dark"] .track.playing .d,
html:not([data-theme]) .track.playing .d,
html[data-theme="dark"] #likedList .track.playing .d,
html[data-theme="dark"] #plTracks .track.playing .d {
  color: #ffffff !important;
}

/* Manage playlist light: transparent list area, dark-style glass buttons */
html[data-theme="light"] #sheet-manage .sheet-card,
html[data-theme="light"] #sheet-manage.sheet .sheet-card {
  background: rgba(255, 255, 255, 0.92) !important;
}
html[data-theme="light"] #sheet-manage .modal-pl-item,
html[data-theme="light"] .modal-pl-item {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  color: #101828 !important;
}
html[data-theme="light"] #sheet-manage .modal-pl-item .pl-name,
html[data-theme="light"] .modal-pl-item .pl-name {
  color: #101828 !important;
}
html[data-theme="light"] #sheet-manage .modal-pl-item button:not(.del),
html[data-theme="light"] #sheet-manage .modal-pl-item .icon-act:not(.del),
html[data-theme="light"] #sheet-manage .modal-pl-item .share.icon-act,
html[data-theme="light"] #sheet-manage .modal-pl-item .edit.icon-act,
html[data-theme="light"] #sheet-manage .icon-head-btn,
html[data-theme="light"] #sheet-manage .act-btn,
html[data-theme="light"] #sheet-manage button.icon-head-btn {
  /* same glass bg as search track fav/playlist buttons */
  background: rgba(255, 255, 255, 0.55) !important;
  border: 1px solid rgba(15, 25, 45, 0.1) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.65), 0 2px 8px rgba(15, 25, 45, 0.06) !important;
  -webkit-backdrop-filter: saturate(180%) blur(12px) !important;
  backdrop-filter: saturate(180%) blur(12px) !important;
}
html[data-theme="light"] #sheet-manage .modal-pl-item button:not(.del) img.ico,
html[data-theme="light"] #sheet-manage .modal-pl-item .icon-act:not(.del) img.ico,
html[data-theme="light"] #sheet-manage .icon-head-btn img.ico,
html[data-theme="light"] #sheet-manage .act-btn img.ico {
  filter: brightness(0) invert(0) !important;
}
html[data-theme="light"] #sheet-manage .sheet-title {
  color: #101828 !important;
}


/* ========== UI polish v24 — modal safe-area FORCE ========== */

/* Web Clip: layout bottom sits above home indicator — pull card into it */
body:not(.tg-client) .sheet {
  position: fixed !important;
  inset: 0 !important;
  bottom: 0 !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
}
body:not(.tg-client) .sheet .sheet-card,
body:not(.tg-client) .sheet-card {
  position: absolute !important;
  left: 0 !important;
  right: 0 !important;
  width: 100% !important;
  /* negative bottom = into safe-area / home indicator */
  bottom: calc(var(--kb, 0px) - env(safe-area-inset-bottom, 34px) - 24px) !important;
  margin-bottom: 0 !important;
  padding-bottom: calc(32px + env(safe-area-inset-bottom, 34px) + 24px) !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  max-height: none !important;
}
body:not(.tg-client) .sheet-card.small {
  max-height: 80vh !important;
}

/* Play icon 2px right */
#btn-play img.ico,
#playIco,
.cbtn.main img.ico {
  transform: translateX(2px) !important;
}

/* Dark idle play = same as prev/next */
html[data-theme="dark"] .cbtn.main.is-paused,
html[data-theme="dark"] .cbtn.main:not(.is-playing),
html:not([data-theme]) .cbtn.main.is-paused,
html:not([data-theme]) .cbtn.main:not(.is-playing) {
  background: rgba(14, 28, 48, 0.42) !important;
  background-image: none !important;
  border: 1px solid rgba(255, 255, 255, 0.18) !important;
  box-shadow:
    0 6px 16px rgba(0, 0, 0, 0.28),
    inset 0 1px 0 rgba(255, 255, 255, 0.2),
    inset 0 -1px 0 rgba(0, 0, 0, 0.15) !important;
  filter: none !important;
}
html[data-theme="dark"] .cbtn.main.is-paused img.ico,
html[data-theme="dark"] .cbtn.main:not(.is-playing) img.ico,
html:not([data-theme]) .cbtn.main.is-paused img.ico,
html:not([data-theme]) .cbtn.main:not(.is-playing) img.ico {
  filter: brightness(0) invert(1) !important;
}

/* Playing dark texts */
html[data-theme="dark"] .track.playing,
html:not([data-theme]) .track.playing,
html[data-theme="dark"] #upList .track.playing,
html[data-theme="dark"] #likedList .track.playing,
html[data-theme="dark"] #plTracks .track.playing,
html[data-theme="dark"] #searchList .track.playing {
  background: linear-gradient(90deg, #ffffff 0%, rgba(40,44,52,0.5) 50%, #000000 100%) !important;
  border: none !important;
}
html[data-theme="dark"] .track.playing .t .n,
html:not([data-theme]) .track.playing .t .n,
html[data-theme="dark"] #likedList .track.playing .t .n,
html[data-theme="dark"] #plTracks .track.playing .t .n,
html[data-theme="dark"] #upList .track.playing .t .n {
  color: #ffffff !important;
  text-shadow: 0 1px 3px rgba(0,0,0,0.45) !important;
}
html[data-theme="dark"] .track.playing .t .a,
html:not([data-theme]) .track.playing .t .a,
html[data-theme="dark"] #likedList .track.playing .t .a,
html[data-theme="dark"] #plTracks .track.playing .t .a {
  color: #d1d5db !important;
  text-shadow: 0 1px 2px rgba(0,0,0,0.35) !important;
}
html[data-theme="dark"] .track.playing .num,
html:not([data-theme]) .track.playing .num {
  color: #101828 !important;
}
html[data-theme="dark"] .track.playing .d,
html:not([data-theme]) .track.playing .d {
  color: #ffffff !important;
}

/* Light theme delete buttons — same glassy red as profile logout */
html[data-theme="light"] #sheet-manage button.del,
html[data-theme="light"] #sheet-manage .del.icon-act,
html[data-theme="light"] #sheet-manage button.del.icon-act,
html[data-theme="light"] .modal-pl-item button.del,
html[data-theme="light"] .track-actions .del.icon-act,
html[data-theme="light"] .track-actions button.del,
html[data-theme="light"] .track-actions .remove-from-pl,
html[data-theme="light"] .hist-item .del-hist,
html[data-theme="light"] .hist-item button.del,
html[data-theme="light"] .del.icon-act.del-hist,
html[data-theme="light"] #searchList .del.icon-act,
html[data-theme="light"] #likedList .del.icon-act,
html[data-theme="light"] #plTracks .del.icon-act,
html[data-theme="light"] #histList .del.icon-act,
html[data-theme="light"] #recognizeHistList .del.icon-act,
html[data-theme="light"] #likedList .track .track-actions .del.icon-act,
html[data-theme="light"] #plTracks .track .track-actions .del.icon-act {
  background: linear-gradient(145deg, rgba(220, 50, 50, 0.55), rgba(140, 20, 20, 0.45)) !important;
  border: 1px solid rgba(255, 80, 80, 0.45) !important;
  box-shadow: 0 8px 22px rgba(180, 0, 0, 0.25), inset 0 1px 0 rgba(255,255,255,0.15) !important;
  -webkit-backdrop-filter: saturate(180%) blur(12px) !important;
  backdrop-filter: saturate(180%) blur(12px) !important;
}
html[data-theme="light"] #sheet-manage button.del img.ico,
html[data-theme="light"] #sheet-manage .del.icon-act img.ico,
html[data-theme="light"] .modal-pl-item button.del img.ico,
html[data-theme="light"] .track-actions .del.icon-act img.ico,
html[data-theme="light"] .track-actions button.del img.ico,
html[data-theme="light"] .track-actions .remove-from-pl img.ico,
html[data-theme="light"] .hist-item .del-hist img.ico,
html[data-theme="light"] .hist-item button.del img.ico,
html[data-theme="light"] .del.icon-act.del-hist img.ico,
html[data-theme="light"] #searchList .del.icon-act img.ico,
html[data-theme="light"] #likedList .del.icon-act img.ico,
html[data-theme="light"] #plTracks .del.icon-act img.ico,
html[data-theme="light"] #histList .del.icon-act img.ico,
html[data-theme="light"] #recognizeHistList .del.icon-act img.ico {
  filter: brightness(0) invert(1) !important;
}

/* Manage row number + info sheet + share options */
html[data-theme="light"] #sheet-manage .modal-pl-item .pl-num,
html[data-theme="light"] .modal-pl-item .pl-num {
  color: #101828 !important;
}
body:not(.tg-client) #sheet-share-pl .sheet-card,
body:not(.tg-client) #sheet-pl-info .sheet-card {
  /* same bottom fill as manage playlist modal */
  padding-bottom: max(32px, calc(20px + env(safe-area-inset-bottom, 34px))) !important;
  max-height: calc(100dvh - 8px) !important;
  max-height: calc(100lvh - 8px) !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  margin-bottom: 0 !important;
  bottom: 0 !important;
}
.pl-info-body {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 4px 0 14px;
}
.pl-info-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 12px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.1);
}
.pl-info-label {
  font-size: 0.8rem;
  color: var(--muted);
  font-weight: 600;
}
.pl-info-value {
  font-size: 0.88rem;
  font-weight: 600;
  text-align: right;
}
html[data-theme="light"] #sheet-pl-info .sheet-title,
html[data-theme="light"] #sheet-pl-info .pl-info-value {
  color: #101828 !important;
}
html[data-theme="light"] #sheet-pl-info .pl-info-label {
  color: #64748b !important;
}
html[data-theme="light"] #sheet-pl-info .pl-info-row {
  background: rgba(15, 25, 45, 0.04) !important;
  border-color: rgba(15, 25, 45, 0.08) !important;
}
html[data-theme="light"] #sheet-pl-info .sheet-card {
  background: rgba(255, 255, 255, 0.92) !important;
}
.share-pl-options {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 6px 0 14px;
}
.share-pl-option {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 14px 16px;
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: rgba(255, 255, 255, 0.08);
  color: var(--text);
  font-weight: 600;
  font-size: 0.92rem;
  cursor: pointer;
  text-align: left;
}
.share-pl-option img.ico {
  width: 22px;
  height: 22px;
  filter: brightness(0) invert(1);
  flex-shrink: 0;
}
.share-pl-option:active {
  transform: scale(0.98);
}
html[data-theme="light"] .share-pl-option {
  background: rgba(255, 255, 255, 0.65) !important;
  border-color: rgba(15, 25, 45, 0.1) !important;
  color: #101828 !important;
}
html[data-theme="light"] .share-pl-option img.ico {
  filter: brightness(0) invert(0) !important;
}
html[data-theme="light"] #sheet-share-pl .sheet-title {
  color: #101828 !important;
}
html[data-theme="light"] #sheet-share-pl .sheet-card {
  background: rgba(255, 255, 255, 0.92) !important;
}
html[data-theme="light"] #sheet-manage .modal-pl-item .info.icon-act {
  background: rgba(255, 255, 255, 0.55) !important;
  border: 1px solid rgba(15, 25, 45, 0.1) !important;
}



/* ========== UI polish v25 — modal align + dark play + smooth playing ========== */

/* Modal / sheet-card: centered to app (max 430px), never shift left */
.sheet {
  left: 0 !important;
  right: 0 !important;
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  display: block !important;
}
.sheet .sheet-card,
.sheet-card,
body:not(.tg-client) .sheet .sheet-card,
body:not(.tg-client) .sheet-card {
  position: absolute !important;
  left: 50% !important;
  right: auto !important;
  width: 100% !important;
  max-width: 430px !important;
  margin: 0 !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  box-sizing: border-box !important;
  /* keep bottom fill for Web Clip / keyboard */
  bottom: var(--kb, 0px) !important;
  top: auto !important;
  transform: translate3d(-50%, 110%, 0) !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
}
.sheet:not(.hidden) .sheet-card,
.sheet:not(.hidden) .sheet-card.small,
body:not(.tg-client) .sheet:not(.hidden) .sheet-card,
body:not(.tg-client) .sheet:not(.hidden) .sheet-card.small {
  transform: translate3d(-50%, 0, 0) !important;
}
/* Web Clip: still extend into home indicator, but stay centered */
body:not(.tg-client) .sheet .sheet-card,
body:not(.tg-client) .sheet-card {
  bottom: calc(var(--kb, 0px) - env(safe-area-inset-bottom, 34px) - 8px) !important;
  padding-bottom: calc(28px + env(safe-area-inset-bottom, 34px) + 12px) !important;
  max-height: none !important;
}
body:not(.tg-client) .sheet-card.small {
  max-height: min(80vh, calc(100dvh - 12px)) !important;
}
body:not(.tg-client) #sheet-manage .sheet-card {
  padding-bottom: calc(32px + env(safe-area-inset-bottom, 34px) + 12px) !important;
}

/* Queue panel same centering (already similar, reinforce) */
.queue-panel-card {
  left: 50% !important;
  right: auto !important;
  width: 100% !important;
  max-width: 430px !important;
  margin: 0 !important;
  transform: translate3d(-50%, 110%, 0) !important;
}
.queue-panel:not(.hidden) .queue-panel-card {
  transform: translate3d(-50%, 0, 0) !important;
}

/* Dark theme: idle / paused play button EXACT same as prev/next (.cbtn) */
html[data-theme="dark"] .cbtn.main.is-paused,
html[data-theme="dark"] .cbtn.main:not(.is-playing),
html:not([data-theme]) .cbtn.main.is-paused,
html:not([data-theme]) .cbtn.main:not(.is-playing),
.cbtn.main.is-paused,
.cbtn.main:not(.is-playing) {
  background: rgba(14, 28, 48, 0.42) !important;
  background-image: none !important;
  border: 1px solid rgba(255, 255, 255, 0.18) !important;
  box-shadow:
    0 6px 16px rgba(0, 0, 0, 0.28),
    inset 0 1px 0 rgba(255, 255, 255, 0.2),
    inset 0 -1px 0 rgba(0, 0, 0, 0.15) !important;
  filter: none !important;
  -webkit-filter: none !important;
}
html[data-theme="dark"] .cbtn.main.is-paused img.ico,
html[data-theme="dark"] .cbtn.main:not(.is-playing) img.ico,
html:not([data-theme]) .cbtn.main.is-paused img.ico,
html:not([data-theme]) .cbtn.main:not(.is-playing) img.ico,
html[data-theme="dark"] .cbtn.main.is-paused #playIco,
html[data-theme="dark"] .cbtn.main:not(.is-playing) #playIco,
html:not([data-theme]) .cbtn.main.is-paused #playIco,
html:not([data-theme]) .cbtn.main:not(.is-playing) #playIco {
  filter: brightness(0) invert(1) !important;
}

/* Match non-main cbtn (prev/next) in case pure-glass overrode them */
html[data-theme="dark"] .cbtn:not(.main),
html:not([data-theme]) .cbtn:not(.main),
.cbtn:not(.main) {
  background: rgba(14, 28, 48, 0.42) !important;
  background-image: none !important;
  border: 1px solid rgba(255, 255, 255, 0.18) !important;
  box-shadow:
    0 6px 16px rgba(0, 0, 0, 0.28),
    inset 0 1px 0 rgba(255, 255, 255, 0.2),
    inset 0 -1px 0 rgba(0, 0, 0, 0.15) !important;
  filter: none !important;
}

/* Playing row: smoother gradient (same direction as light theme), time text white */
html[data-theme="dark"] .track.playing,
html:not([data-theme]) .track.playing,
html[data-theme="dark"] #upList .track.playing,
html[data-theme="dark"] #likedList .track.playing,
html[data-theme="dark"] #plTracks .track.playing,
html[data-theme="dark"] #searchList .track.playing,
html:not([data-theme]) #upList .track.playing,
html:not([data-theme]) #likedList .track.playing,
html:not([data-theme]) #plTracks .track.playing,
html:not([data-theme]) #searchList .track.playing {
  background: linear-gradient(
    90deg,
    #ffffff 0%,
    #f3f4f6 12%,
    rgba(180, 185, 195, 0.85) 28%,
    rgba(80, 86, 98, 0.7) 48%,
    rgba(40, 44, 52, 0.85) 68%,
    #1a1d24 85%,
    #000000 100%
  ) !important;
  border: none !important;
  border-color: transparent !important;
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.35) !important;
}
html[data-theme="light"] .track.playing,
html[data-theme="light"] #upList .track.playing,
html[data-theme="light"] #likedList .track.playing,
html[data-theme="light"] #plTracks .track.playing,
html[data-theme="light"] #searchList .track.playing {
  background: linear-gradient(
    90deg,
    #ffffff 0%,
    #f3f4f6 12%,
    rgba(180, 185, 195, 0.85) 28%,
    rgba(80, 86, 98, 0.7) 48%,
    rgba(40, 44, 52, 0.85) 68%,
    #1a1d24 85%,
    #000000 100%
  ) !important;
  border: none !important;
  border-color: transparent !important;
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.12) !important;
}

/* Dark: title/artist/num readable; time (.d) WHITE like light theme */
html[data-theme="dark"] .track.playing .t .n,
html:not([data-theme]) .track.playing .t .n,
html[data-theme="dark"] #upList .track.playing .t .n,
html[data-theme="dark"] #likedList .track.playing .t .n,
html[data-theme="dark"] #plTracks .track.playing .t .n,
html[data-theme="dark"] #searchList .track.playing .t .n,
html:not([data-theme]) #upList .track.playing .t .n {
  color: #101828 !important;
  text-shadow: none !important;
}
html[data-theme="dark"] .track.playing .t .a,
html:not([data-theme]) .track.playing .t .a,
html[data-theme="dark"] #upList .track.playing .t .a,
html[data-theme="dark"] #likedList .track.playing .t .a,
html[data-theme="dark"] #plTracks .track.playing .t .a {
  color: #374151 !important;
  text-shadow: none !important;
}
html[data-theme="dark"] .track.playing .num,
html:not([data-theme]) .track.playing .num,
html[data-theme="dark"] #upList .track.playing .num {
  color: #101828 !important;
}
html[data-theme="dark"] .track.playing .d,
html:not([data-theme]) .track.playing .d,
html[data-theme="dark"] #upList .track.playing .d,
html[data-theme="dark"] #likedList .track.playing .d,
html[data-theme="dark"] #plTracks .track.playing .d,
html[data-theme="dark"] #searchList .track.playing .d,
html:not([data-theme]) #upList .track.playing .d,
html:not([data-theme]) #likedList .track.playing .d {
  color: #ffffff !important;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.35) !important;
}

/* Light already has .d white — reinforce */
html[data-theme="light"] .track.playing .d,
html[data-theme="light"] #upList .track.playing .d,
html[data-theme="light"] #likedList .track.playing .d,
html[data-theme="light"] #plTracks .track.playing .d,
html[data-theme="light"] #searchList .track.playing .d {
  color: #ffffff !important;
}


/* ========== Queue modal: keep previous size, only fill bottom safe-area ========== */
/* Overlay still covers full screen; card keeps original height and only
   extends into the home-indicator strip (same idea as other sheets). */
body:not(.tg-client) .queue-panel {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  inset: 0 !important;
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  /* keep flex + end alignment so card sits at bottom at previous height */
  display: flex !important;
  flex-direction: column !important;
  justify-content: flex-end !important;
  z-index: 300 !important;
}

body:not(.tg-client) .queue-panel-card,
body:not(.tg-client) .queue-panel .queue-panel-card {
  position: relative !important;
  left: auto !important;
  right: auto !important;
  width: 100% !important;
  max-width: 430px !important;
  margin: 0 auto !important;
  box-sizing: border-box !important;
  /* previous size restored */
  max-height: min(78%, calc(var(--app-h, 100dvh) - 90px)) !important;
  /* pull paint into safe-area without growing the content box upward */
  margin-bottom: calc(0px - env(safe-area-inset-bottom, 34px) - 8px) !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  /* pad so last rows stay above home indicator */
  padding-bottom: calc(20px + env(safe-area-inset-bottom, 34px) + 8px) !important;
  transform: translateY(110%) !important;
}

body:not(.tg-client) .queue-panel:not(.hidden) .queue-panel-card {
  transform: translateY(0) !important;
}

/* Body: modest pad only (safe-area already on card) */
body:not(.tg-client) .queue-panel-body {
  padding-bottom: 12px !important;
}

/* Light theme: same size + safe-area fill */
html[data-theme="light"] body:not(.tg-client) .queue-panel-card,
html[data-theme="light"] body:not(.tg-client) .queue-panel .queue-panel-card {
  max-height: min(78%, calc(var(--app-h, 100dvh) - 90px)) !important;
  margin-bottom: calc(0px - env(safe-area-inset-bottom, 34px) - 8px) !important;
  padding-bottom: calc(20px + env(safe-area-inset-bottom, 34px) + 8px) !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
}


/* ========== Dark only: prev / idle-play / next = same bg as favorite (act-btn) ========== */
html[data-theme="dark"] .act-btn,
html:not([data-theme]) .act-btn {
  background: rgba(255, 255, 255, 0.07) !important;
  background-image: none !important;
  border: 1px solid rgba(255, 255, 255, 0.14) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.12),
    0 4px 14px rgba(0, 0, 0, 0.15) !important;
  filter: none !important;
}

html[data-theme="dark"] .cbtn:not(.main),
html:not([data-theme]) .cbtn:not(.main),
html[data-theme="dark"] .cbtn.main.is-paused,
html[data-theme="dark"] .cbtn.main:not(.is-playing),
html:not([data-theme]) .cbtn.main.is-paused,
html:not([data-theme]) .cbtn.main:not(.is-playing) {
  background: rgba(255, 255, 255, 0.07) !important;
  background-image: none !important;
  border: 1px solid rgba(255, 255, 255, 0.14) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.12),
    0 4px 14px rgba(0, 0, 0, 0.15) !important;
  filter: none !important;
  -webkit-filter: none !important;
}

/* Playing state: keep ambient color (do not touch is-playing) */
html[data-theme="dark"] .cbtn.main.is-playing,
html:not([data-theme]) .cbtn.main.is-playing {
  /* leave existing ambient gradient / glow rules alone */
}


/* ========== Light theme: genre/lang pick modal text black ========== */
html[data-theme="light"] .lang-pick-btn,
html[data-theme="light"] #sheet-lang .lang-pick-btn,
html[data-theme="light"] .lang-pick-btn span,
html[data-theme="light"] .lang-pick-btn .sub {
  color: #101828 !important;
  -webkit-text-fill-color: #101828 !important;
}
html[data-theme="light"] .lang-pick-btn {
  background: rgba(255, 255, 255, 0.75) !important;
  border-color: rgba(15, 25, 45, 0.12) !important;
}
html[data-theme="light"] .lang-pick-btn .sub {
  color: #4b5563 !important;
  -webkit-text-fill-color: #4b5563 !important;
}
/* any other modal option rows that stayed light-blue in light theme */
html[data-theme="light"] .modal-pick-pl,
html[data-theme="light"] .sheet .modal-pick-pl,
html[data-theme="light"] .sheet-card button:not(.btn-danger):not(.del) {
  color: #101828 !important;
}
html[data-theme="light"] .sheet-card,
html[data-theme="light"] .sheet-title,
html[data-theme="light"] #sheet-lang .sheet-title {
  color: #101828 !important;
}


/* ========== All modals: background +24px taller downward, content stays put ========== */
/* Pull card paint further down; add the same amount as padding so options don't move */
body:not(.tg-client) .sheet .sheet-card,
body:not(.tg-client) .sheet-card,
body:not(.tg-client) .more-sheet-card {
  bottom: calc(var(--kb, 0px) - env(safe-area-inset-bottom, 34px) - 8px - 24px) !important;
  padding-bottom: calc(28px + env(safe-area-inset-bottom, 34px) + 12px + 24px) !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
}
body:not(.tg-client) #sheet-manage .sheet-card {
  bottom: calc(var(--kb, 0px) - env(safe-area-inset-bottom, 34px) - 8px - 24px) !important;
  padding-bottom: calc(32px + env(safe-area-inset-bottom, 34px) + 12px + 24px) !important;
}
/* Queue: same extra 24px down, content fixed */
body:not(.tg-client) .queue-panel-card,
body:not(.tg-client) .queue-panel .queue-panel-card {
  margin-bottom: calc(0px - env(safe-area-inset-bottom, 34px) - 8px - 24px) !important;
  padding-bottom: calc(20px + env(safe-area-inset-bottom, 34px) + 8px + 24px) !important;
}


/* ========== FORCE light theme: genre/lang modal option text BLACK ========== */
html[data-theme="light"] .lang-pick-btn,
html[data-theme="light"] .lang-pick-btn *,
html[data-theme="light"] #sheet-lang .lang-pick-btn,
html[data-theme="light"] #sheet-lang .lang-pick-btn *,
html[data-theme="light"] #sheet-lang button,
html[data-theme="light"] #sheet-lang button *,
html[data-theme="light"] .sheet-card .lang-pick-btn,
html[data-theme="light"] .sheet-card .lang-pick-btn *,
html[data-theme="light"] .lang-pick-row button,
html[data-theme="light"] .lang-pick-row button * {
  color: #101828 !important;
  -webkit-text-fill-color: #101828 !important;
}
html[data-theme="light"] .lang-pick-btn .sub,
html[data-theme="light"] #sheet-lang .lang-pick-btn .sub,
html[data-theme="light"] .lang-pick-row .sub {
  color: #4b5563 !important;
  -webkit-text-fill-color: #4b5563 !important;
}
html[data-theme="light"] .lang-pick-btn,
html[data-theme="light"] #sheet-lang .lang-pick-btn,
html[data-theme="light"] .lang-pick-row button {
  background: rgba(15, 25, 45, 0.06) !important;
  border: 1px solid rgba(15, 25, 45, 0.12) !important;
}
html[data-theme="light"] #sheet-lang .sheet-title,
html[data-theme="light"] #sheet-lang .sheet-info {
  color: #101828 !important;
  -webkit-text-fill-color: #101828 !important;
}


/* ========== Web app modals: background to physical bottom + behind keyboard ==========
   - bottom stays at physical page bottom (safe-area pull), independent of --kb
   - padding-bottom absorbs --kb so options/content sit above the keyboard
   - background therefore fills the strip behind the keyboard when it is open
*/
body:not(.tg-client) .sheet .sheet-card,
body:not(.tg-client) .sheet-card,
body:not(.tg-client) .more-sheet-card,
body:not(.tg-client) #sheet-manage .sheet-card,
body:not(.tg-client) #sheet-lang .sheet-card,
body:not(.tg-client) #sheet-create-pl .sheet-card,
body:not(.tg-client) #sheet-rename-pl .sheet-card,
body:not(.tg-client) #sheet-import-pl .sheet-card,
body:not(.tg-client) #sheet-remove .sheet-card,
body:not(.tg-client) #sheet-modal .sheet-card {
  /* pin to physical bottom — do NOT lift with --kb */
  bottom: calc(0px - env(safe-area-inset-bottom, 34px) - 32px) !important;
  /* content stays above keyboard + safe area; +32px extra fill */
  padding-bottom: calc(28px + env(safe-area-inset-bottom, 34px) + 32px + var(--kb, 0px)) !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  margin-bottom: 0 !important;
  max-height: none !important;
}

/* Queue panel: same physical-bottom fill; content pad absorbs --kb if ever set */
body:not(.tg-client) .queue-panel-card,
body:not(.tg-client) .queue-panel .queue-panel-card {
  margin-bottom: calc(0px - env(safe-area-inset-bottom, 34px) - 32px) !important;
  padding-bottom: calc(20px + env(safe-area-inset-bottom, 34px) + 32px + var(--kb, 0px)) !important;
}


/* ========== Light theme only: no border on prev / play / next ========== */
html[data-theme="light"] .cbtn,
html[data-theme="light"] .cbtn:not(.main),
html[data-theme="light"] .cbtn.main,
html[data-theme="light"] .cbtn.main.is-paused,
html[data-theme="light"] .cbtn.main:not(.is-playing),
html[data-theme="light"] .cbtn.main.is-playing {
  border: none !important;
  border-color: transparent !important;
  border-width: 0 !important;
}


/* ========== Unified playing track: ambient light → dark, white text (all pages + queue) ========== */
.track.playing,
#upList .track.playing,
#likedList .track.playing,
#plTracks .track.playing,
#searchList .track.playing,
html[data-theme="dark"] .track.playing,
html[data-theme="light"] .track.playing,
html:not([data-theme]) .track.playing,
html[data-theme="dark"] #upList .track.playing,
html[data-theme="dark"] #likedList .track.playing,
html[data-theme="dark"] #plTracks .track.playing,
html[data-theme="dark"] #searchList .track.playing,
html[data-theme="light"] #upList .track.playing,
html[data-theme="light"] #likedList .track.playing,
html[data-theme="light"] #plTracks .track.playing,
html[data-theme="light"] #searchList .track.playing,
html:not([data-theme]) #upList .track.playing,
html:not([data-theme]) #likedList .track.playing,
html:not([data-theme]) #plTracks .track.playing,
html:not([data-theme]) #searchList .track.playing {
  background: linear-gradient(
    90deg,
    rgba(var(--amb-r, 180), var(--amb-g, 180), var(--amb-b, 180), 0.95) 0%,
    rgba(var(--amb-r, 180), var(--amb-g, 180), var(--amb-b, 180), 0.55) 42%,
    rgba(var(--amb2-r, 40), var(--amb2-g, 44), var(--amb2-b, 52), 0.85) 72%,
    rgba(0, 0, 0, 0.92) 100%
  ) !important;
  border: none !important;
  border-color: transparent !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.22),
    0 8px 22px rgba(0, 0, 0, 0.28) !important;
  outline: none !important;
}

/* All text on playing row → white */
.track.playing .t .n,
.track.playing .t .a,
.track.playing .num,
.track.playing .d,
#upList .track.playing .t .n,
#upList .track.playing .t .a,
#upList .track.playing .num,
#upList .track.playing .d,
#likedList .track.playing .t .n,
#likedList .track.playing .t .a,
#likedList .track.playing .num,
#likedList .track.playing .d,
#plTracks .track.playing .t .n,
#plTracks .track.playing .t .a,
#plTracks .track.playing .num,
#plTracks .track.playing .d,
#searchList .track.playing .t .n,
#searchList .track.playing .t .a,
#searchList .track.playing .num,
#searchList .track.playing .d,
html[data-theme="dark"] .track.playing .t .n,
html[data-theme="dark"] .track.playing .t .a,
html[data-theme="dark"] .track.playing .num,
html[data-theme="dark"] .track.playing .d,
html[data-theme="light"] .track.playing .t .n,
html[data-theme="light"] .track.playing .t .a,
html[data-theme="light"] .track.playing .num,
html[data-theme="light"] .track.playing .d,
html:not([data-theme]) .track.playing .t .n,
html:not([data-theme]) .track.playing .t .a,
html:not([data-theme]) .track.playing .num,
html:not([data-theme]) .track.playing .d,
html[data-theme="dark"] #upList .track.playing .t .n,
html[data-theme="dark"] #likedList .track.playing .t .n,
html[data-theme="dark"] #plTracks .track.playing .t .n,
html[data-theme="dark"] #searchList .track.playing .t .n,
html[data-theme="light"] #upList .track.playing .t .n,
html[data-theme="light"] #likedList .track.playing .t .n,
html[data-theme="light"] #plTracks .track.playing .t .n,
html[data-theme="light"] #searchList .track.playing .t .n,
html[data-theme="dark"] #upList .track.playing .t .a,
html[data-theme="dark"] #likedList .track.playing .t .a,
html[data-theme="dark"] #plTracks .track.playing .t .a,
html[data-theme="light"] #upList .track.playing .t .a,
html[data-theme="light"] #likedList .track.playing .t .a,
html[data-theme="light"] #plTracks .track.playing .t .a,
html[data-theme="dark"] #upList .track.playing .num,
html[data-theme="light"] #upList .track.playing .num,
html[data-theme="dark"] #upList .track.playing .d,
html[data-theme="dark"] #likedList .track.playing .d,
html[data-theme="dark"] #plTracks .track.playing .d,
html[data-theme="dark"] #searchList .track.playing .d,
html[data-theme="light"] #upList .track.playing .d,
html[data-theme="light"] #likedList .track.playing .d,
html[data-theme="light"] #plTracks .track.playing .d,
html[data-theme="light"] #searchList .track.playing .d {
  color: #ffffff !important;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.35) !important;
}
.track.playing .t .a,
#upList .track.playing .t .a,
#likedList .track.playing .t .a,
#plTracks .track.playing .t .a,
#searchList .track.playing .t .a {
  color: rgba(255, 255, 255, 0.88) !important;
}


/* ========== Playing row number: force white (favorites + playlists + all lists) ========== */
.track.playing .num,
#likedList .track.playing .num,
#plTracks .track.playing .num,
#upList .track.playing .num,
#searchList .track.playing .num,
html[data-theme="dark"] .track.playing .num,
html[data-theme="light"] .track.playing .num,
html:not([data-theme]) .track.playing .num,
html[data-theme="dark"] #likedList .track.playing .num,
html[data-theme="dark"] #plTracks .track.playing .num,
html[data-theme="dark"] #upList .track.playing .num,
html[data-theme="dark"] #searchList .track.playing .num,
html[data-theme="light"] #likedList .track.playing .num,
html[data-theme="light"] #plTracks .track.playing .num,
html[data-theme="light"] #upList .track.playing .num,
html[data-theme="light"] #searchList .track.playing .num,
html:not([data-theme]) #likedList .track.playing .num,
html:not([data-theme]) #plTracks .track.playing .num,
html:not([data-theme]) #upList .track.playing .num {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.35) !important;
  opacity: 1 !important;
}


/* ========== Playing highlight: smooth light→dark (white left → black right) ========== */
.track.playing,
#upList .track.playing,
#likedList .track.playing,
#plTracks .track.playing,
#searchList .track.playing,
html[data-theme="dark"] .track.playing,
html[data-theme="light"] .track.playing,
html:not([data-theme]) .track.playing,
html[data-theme="dark"] #upList .track.playing,
html[data-theme="dark"] #likedList .track.playing,
html[data-theme="dark"] #plTracks .track.playing,
html[data-theme="dark"] #searchList .track.playing,
html[data-theme="light"] #upList .track.playing,
html[data-theme="light"] #likedList .track.playing,
html[data-theme="light"] #plTracks .track.playing,
html[data-theme="light"] #searchList .track.playing,
html:not([data-theme]) #upList .track.playing,
html:not([data-theme]) #likedList .track.playing,
html:not([data-theme]) #plTracks .track.playing,
html:not([data-theme]) #searchList .track.playing {
  background: linear-gradient(
    90deg,
    #ffffff 0%,
    rgba(255, 255, 255, 0.92) 6%,
    rgba(var(--amb-r, 180), var(--amb-g, 180), var(--amb-b, 180), 0.95) 18%,
    rgba(var(--amb-r, 180), var(--amb-g, 180), var(--amb-b, 180), 0.72) 34%,
    rgba(var(--amb-r, 140), var(--amb-g, 140), var(--amb-b, 140), 0.55) 48%,
    rgba(var(--amb2-r, 60), var(--amb2-g, 64), var(--amb2-b, 72), 0.7) 62%,
    rgba(var(--amb2-r, 30), var(--amb2-g, 32), var(--amb2-b, 38), 0.88) 78%,
    rgba(12, 12, 14, 0.96) 90%,
    #000000 100%
  ) !important;
  border: none !important;
  border-color: transparent !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.18),
    0 8px 22px rgba(0, 0, 0, 0.28) !important;
  outline: none !important;
}

/* Text stays white across the smooth gradient */
.track.playing .t .n,
.track.playing .num,
.track.playing .d,
#upList .track.playing .t .n,
#likedList .track.playing .t .n,
#plTracks .track.playing .t .n,
#searchList .track.playing .t .n,
#upList .track.playing .num,
#likedList .track.playing .num,
#plTracks .track.playing .num,
#searchList .track.playing .num,
#upList .track.playing .d,
#likedList .track.playing .d,
#plTracks .track.playing .d,
#searchList .track.playing .d {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.4) !important;
}
.track.playing .t .a,
#upList .track.playing .t .a,
#likedList .track.playing .t .a,
#plTracks .track.playing .t .a,
#searchList .track.playing .t .a {
  color: rgba(255, 255, 255, 0.9) !important;
  -webkit-text-fill-color: rgba(255, 255, 255, 0.9) !important;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.35) !important;
}


/* ========== Playing highlight: true smooth 0→100 ambient light→dark ========== */
/* Many equal stops: mix white→ambient→black so no hard color bands */
.track.playing,
#upList .track.playing,
#likedList .track.playing,
#plTracks .track.playing,
#searchList .track.playing,
html[data-theme="dark"] .track.playing,
html[data-theme="light"] .track.playing,
html:not([data-theme]) .track.playing,
html[data-theme="dark"] #upList .track.playing,
html[data-theme="dark"] #likedList .track.playing,
html[data-theme="dark"] #plTracks .track.playing,
html[data-theme="dark"] #searchList .track.playing,
html[data-theme="light"] #upList .track.playing,
html[data-theme="light"] #likedList .track.playing,
html[data-theme="light"] #plTracks .track.playing,
html[data-theme="light"] #searchList .track.playing,
html:not([data-theme]) #upList .track.playing,
html:not([data-theme]) #likedList .track.playing,
html:not([data-theme]) #plTracks .track.playing,
html:not([data-theme]) #searchList .track.playing {
  background: linear-gradient(
    90deg,
    /* left: near-white tinted with ambient */
    color-mix(in srgb, #ffffff 92%, rgb(var(--amb-r, 180), var(--amb-g, 180), var(--amb-b, 180)) 8%) 0%,
    color-mix(in srgb, #ffffff 78%, rgb(var(--amb-r, 180), var(--amb-g, 180), var(--amb-b, 180)) 22%) 8%,
    color-mix(in srgb, #ffffff 62%, rgb(var(--amb-r, 180), var(--amb-g, 180), var(--amb-b, 180)) 38%) 16%,
    color-mix(in srgb, #ffffff 45%, rgb(var(--amb-r, 180), var(--amb-g, 180), var(--amb-b, 180)) 55%) 24%,
    color-mix(in srgb, #ffffff 28%, rgb(var(--amb-r, 180), var(--amb-g, 180), var(--amb-b, 180)) 72%) 32%,
    /* mid: full ambient, then blend toward amb2 / darker */
    rgb(var(--amb-r, 180), var(--amb-g, 180), var(--amb-b, 180)) 40%,
    color-mix(in srgb, rgb(var(--amb-r, 180), var(--amb-g, 180), var(--amb-b, 180)) 82%, rgb(var(--amb2-r, 80), var(--amb2-g, 84), var(--amb2-b, 92)) 18%) 48%,
    color-mix(in srgb, rgb(var(--amb-r, 180), var(--amb-g, 180), var(--amb-b, 180)) 58%, rgb(var(--amb2-r, 50), var(--amb2-g, 52), var(--amb2-b, 58)) 42%) 56%,
    color-mix(in srgb, rgb(var(--amb-r, 180), var(--amb-g, 180), var(--amb-b, 180)) 38%, #1a1a1e 62%) 64%,
    color-mix(in srgb, rgb(var(--amb2-r, 40), var(--amb2-g, 42), var(--amb2-b, 48)) 45%, #0c0c0e 55%) 72%,
    color-mix(in srgb, rgb(var(--amb2-r, 30), var(--amb2-g, 32), var(--amb2-b, 36)) 28%, #050506 72%) 82%,
    color-mix(in srgb, #000000 70%, rgb(var(--amb2-r, 20), var(--amb2-g, 22), var(--amb2-b, 26)) 30%) 92%,
    /* right: pure black */
    #000000 100%
  ) !important;
  border: none !important;
  border-color: transparent !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.16),
    0 8px 22px rgba(0, 0, 0, 0.28) !important;
  outline: none !important;
}

/* Fallback without color-mix (older WebViews) — still many soft stops */
@supports not (background: linear-gradient(90deg, color-mix(in srgb, red 50%, blue 50%) 0%, black 100%)) {
  .track.playing,
  #upList .track.playing,
  #likedList .track.playing,
  #plTracks .track.playing,
  #searchList .track.playing {
    background: linear-gradient(
      90deg,
      rgba(255, 255, 255, 1) 0%,
      rgba(var(--amb-r, 180), var(--amb-g, 180), var(--amb-b, 180), 0.35) 12%,
      rgba(var(--amb-r, 180), var(--amb-g, 180), var(--amb-b, 180), 0.55) 24%,
      rgba(var(--amb-r, 180), var(--amb-g, 180), var(--amb-b, 180), 0.75) 36%,
      rgba(var(--amb-r, 180), var(--amb-g, 180), var(--amb-b, 180), 0.9) 48%,
      rgba(var(--amb2-r, 80), var(--amb2-g, 84), var(--amb2-b, 92), 0.85) 60%,
      rgba(40, 42, 48, 0.92) 72%,
      rgba(18, 18, 20, 0.96) 86%,
      rgba(0, 0, 0, 1) 100%
    ) !important;
  }
}


/* ========== Playing: ambient-only smooth light→dark (no white/black edges) ========== */
.track.playing,
#upList .track.playing,
#likedList .track.playing,
#plTracks .track.playing,
#searchList .track.playing,
html[data-theme="dark"] .track.playing,
html[data-theme="light"] .track.playing,
html:not([data-theme]) .track.playing,
html[data-theme="dark"] #upList .track.playing,
html[data-theme="dark"] #likedList .track.playing,
html[data-theme="dark"] #plTracks .track.playing,
html[data-theme="dark"] #searchList .track.playing,
html[data-theme="light"] #upList .track.playing,
html[data-theme="light"] #likedList .track.playing,
html[data-theme="light"] #plTracks .track.playing,
html[data-theme="light"] #searchList .track.playing,
html:not([data-theme]) #upList .track.playing,
html:not([data-theme]) #likedList .track.playing,
html:not([data-theme]) #plTracks .track.playing,
html:not([data-theme]) #searchList .track.playing {
  /* single continuous blend: light ambient → mid ambient → dark ambient */
  background: linear-gradient(
    90deg,
    color-mix(in srgb, rgb(var(--amb-r, 180), var(--amb-g, 180), var(--amb-b, 180)) 55%, white 45%),
    color-mix(in srgb, rgb(var(--amb-r, 180), var(--amb-g, 180), var(--amb-b, 180)) 70%, white 30%),
    color-mix(in srgb, rgb(var(--amb-r, 180), var(--amb-g, 180), var(--amb-b, 180)) 88%, white 12%),
    rgb(var(--amb-r, 180), var(--amb-g, 180), var(--amb-b, 180)),
    color-mix(in srgb, rgb(var(--amb-r, 180), var(--amb-g, 180), var(--amb-b, 180)) 75%, rgb(var(--amb2-r, 60), var(--amb2-g, 64), var(--amb2-b, 72)) 25%),
    color-mix(in srgb, rgb(var(--amb-r, 180), var(--amb-g, 180), var(--amb-b, 180)) 45%, rgb(var(--amb2-r, 40), var(--amb2-g, 44), var(--amb2-b, 52)) 55%),
    color-mix(in srgb, rgb(var(--amb2-r, 50), var(--amb2-g, 54), var(--amb2-b, 62)) 70%, black 30%),
    color-mix(in srgb, rgb(var(--amb2-r, 40), var(--amb2-g, 44), var(--amb2-b, 52)) 45%, black 55%)
  ) !important;
  border: none !important;
  border-color: transparent !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.12),
    0 8px 22px rgba(0, 0, 0, 0.25) !important;
  outline: none !important;
}

/* Older engines: no color-mix — opacity ramp on ambient only (still one hue family) */
@supports not (background: linear-gradient(in srgb, red, blue)) {
  .track.playing,
  #upList .track.playing,
  #likedList .track.playing,
  #plTracks .track.playing,
  #searchList .track.playing {
    background: linear-gradient(
      90deg,
      rgba(var(--amb-r, 180), var(--amb-g, 180), var(--amb-b, 180), 0.95) 0%,
      rgba(var(--amb-r, 180), var(--amb-g, 180), var(--amb-b, 180), 0.88) 14%,
      rgba(var(--amb-r, 180), var(--amb-g, 180), var(--amb-b, 180), 0.78) 28%,
      rgba(var(--amb-r, 160), var(--amb-g, 160), var(--amb-b, 160), 0.7) 42%,
      rgba(var(--amb2-r, 80), var(--amb2-g, 84), var(--amb2-b, 92), 0.75) 58%,
      rgba(var(--amb2-r, 50), var(--amb2-g, 54), var(--amb2-b, 60), 0.85) 74%,
      rgba(var(--amb2-r, 28), var(--amb2-g, 30), var(--amb2-b, 36), 0.95) 100%
    ) !important;
  }
}


/* ========== Light theme: play button same 3D shadow as prev/next ========== */
html[data-theme="light"] .cbtn:not(.main),
html[data-theme="light"] .cbtn.main,
html[data-theme="light"] .cbtn.main.is-paused,
html[data-theme="light"] .cbtn.main:not(.is-playing),
html[data-theme="light"] .cbtn.main.is-playing {
  box-shadow:
    0 8px 20px rgba(15, 25, 45, 0.18),
    0 2px 6px rgba(15, 25, 45, 0.1),
    inset 0 1px 0 rgba(255, 255, 255, 0.75),
    inset 0 -2px 4px rgba(15, 25, 45, 0.12) !important;
}


/* ========== Close buttons: sit at nav height (come down) ========== */
/* Nav is ~64px floating above safe-area — place Close in that same band */
body:not(.tg-client) .sheet-card .btn-close,
body:not(.tg-client) .sheet .btn-close,
body:not(.tg-client) .sheet-card .sheet-actions,
body:not(.tg-client) .sheet .sheet-actions,
body:not(.tg-client) .more-sheet-card .btn-close {
  position: relative !important;
  top: 20px !important;
  margin-top: 10px !important;
  margin-bottom: calc(12px + env(safe-area-inset-bottom, 34px)) !important;
  z-index: 2 !important;
}

/* More options modal: ensure close row at bottom, same place as other modals */
.more-sheet-card {
  display: flex !important;
  flex-direction: column !important;
}
.more-sheet-card .more-menu {
  flex: 0 0 auto !important;
}
.more-sheet-card .btn-close {
  flex: 0 0 auto !important;
  width: 100% !important;
  margin-top: 12px !important;
  display: block !important;
}
html[data-theme="light"] .more-sheet-card .btn-close {
  color: #101828 !important;
  background: rgba(255, 255, 255, 0.6) !important;
  border: 1px solid rgba(15, 25, 45, 0.12) !important;
}


/* ========== FIX: modal action buttons equal size + sit in safe-area ========== */
.sheet-actions {
  display: flex !important;
  flex-direction: row !important;
  align-items: stretch !important;
  gap: 8px !important;
  width: 100% !important;
}
.sheet-actions .btn-close,
.sheet-actions .btn-confirm,
.sheet-actions .btn-danger,
.sheet-actions button {
  flex: 1 1 0 !important;
  width: auto !important;
  min-width: 0 !important;
  max-width: none !important;
  height: 48px !important;
  min-height: 48px !important;
  max-height: 48px !important;
  padding: 0 14px !important;
  box-sizing: border-box !important;
  font-size: 0.9rem !important;
  font-weight: 700 !important;
  line-height: 1 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}

/* Single full-width close (no pair) — same height */
.sheet-card > .btn-close,
.sheet .btn-close:not(.sheet-actions .btn-close),
.more-sheet-card .btn-close {
  height: 48px !important;
  min-height: 48px !important;
  max-height: 48px !important;
  padding: 0 14px !important;
  box-sizing: border-box !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 0.9rem !important;
  font-weight: 700 !important;
}

/* Put Close / Import+Cancel ON the safe-area band (bottom of physical screen) */
body:not(.tg-client) .sheet-card .btn-close,
body:not(.tg-client) .sheet .btn-close,
body:not(.tg-client) .sheet-card .sheet-actions,
body:not(.tg-client) .sheet .sheet-actions,
body:not(.tg-client) .more-sheet-card .btn-close {
  position: relative !important;
  top: auto !important;
  /* pull into safe-area so controls sit where the home indicator / nav band is */
  margin-top: 14px !important;
  margin-bottom: calc(10px + env(safe-area-inset-bottom, 34px)) !important;
  z-index: 2 !important;
}

/* Reduce card bottom padding so buttons aren't floating high above safe-area */
body:not(.tg-client) .sheet .sheet-card,
body:not(.tg-client) .sheet-card,
body:not(.tg-client) .more-sheet-card,
body:not(.tg-client) #sheet-manage .sheet-card,
body:not(.tg-client) #sheet-import-pl .sheet-card,
body:not(.tg-client) #sheet-create-pl .sheet-card,
body:not(.tg-client) #sheet-rename-pl .sheet-card,
body:not(.tg-client) #sheet-lang .sheet-card,
body:not(.tg-client) #sheet-more .sheet-card,
body:not(.tg-client) #sheet-remove .sheet-card,
body:not(.tg-client) #sheet-modal .sheet-card {
  bottom: calc(0px - env(safe-area-inset-bottom, 34px) - 4px) !important;
  /* small residual pad; button margin-bottom owns the safe-area sit */
  padding-bottom: calc(8px + var(--kb, 0px)) !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
}


/* ========== Queue: fill safe-area in BOTH themes (dark was still gapped) ========== */
body:not(.tg-client) .queue-panel,
html[data-theme="dark"] body:not(.tg-client) .queue-panel,
html[data-theme="light"] body:not(.tg-client) .queue-panel,
html:not([data-theme]) body:not(.tg-client) .queue-panel {
  position: fixed !important;
  inset: 0 !important;
  bottom: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: flex-end !important;
  z-index: 300 !important;
}

body:not(.tg-client) .queue-panel-card,
body:not(.tg-client) .queue-panel .queue-panel-card,
html[data-theme="dark"] body:not(.tg-client) .queue-panel-card,
html[data-theme="light"] body:not(.tg-client) .queue-panel-card,
html:not([data-theme]) body:not(.tg-client) .queue-panel-card,
html[data-theme="dark"] .queue-panel-card,
html:not([data-theme]) .queue-panel-card {
  position: relative !important;
  width: 100% !important;
  max-width: 430px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  max-height: min(78%, calc(var(--app-h, 100dvh) - 90px)) !important;
  /* same fill as light: pull into home indicator */
  margin-bottom: calc(0px - env(safe-area-inset-bottom, 34px) - 12px) !important;
  padding-bottom: calc(16px + env(safe-area-inset-bottom, 34px) + 12px) !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  box-sizing: border-box !important;
}

body:not(.tg-client) .queue-panel:not(.hidden) .queue-panel-card,
html[data-theme="dark"] body:not(.tg-client) .queue-panel:not(.hidden) .queue-panel-card,
html:not([data-theme]) body:not(.tg-client) .queue-panel:not(.hidden) .queue-panel-card {
  transform: translateY(0) !important;
}


/* ========== Modal buttons: FIXED at bottom = nav band ========== */
/* Pin action row to the same vertical place as the floating nav */
body:not(.tg-client) .sheet:not(.hidden) .sheet-card .sheet-actions,
body:not(.tg-client) .sheet:not(.hidden) .sheet-card > .btn-close,
body:not(.tg-client) .sheet:not(.hidden) .more-sheet-card > .btn-close,
body:not(.tg-client) #sheet-more:not(.hidden) .btn-close,
body:not(.tg-client) #sheet-import-pl:not(.hidden) .sheet-actions,
body:not(.tg-client) #sheet-create-pl:not(.hidden) .sheet-actions,
body:not(.tg-client) #sheet-rename-pl:not(.hidden) .sheet-actions,
body:not(.tg-client) #sheet-remove:not(.hidden) .sheet-actions,
body:not(.tg-client) #sheet-lang:not(.hidden) .btn-close,
body:not(.tg-client) #sheet-manage:not(.hidden) .btn-close {
  position: fixed !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  width: calc(100% - 32px) !important;
  max-width: 398px !important;
  /* same band as nav: above home indicator */
  bottom: max(12px, calc(env(safe-area-inset-bottom, 34px) + 8px)) !important;
  top: auto !important;
  margin: 0 !important;
  z-index: 320 !important;
  box-sizing: border-box !important;
}

/* When keyboard is open, sit above keyboard */
body:not(.tg-client) .sheet:not(.hidden) .sheet-card .sheet-actions,
body:not(.tg-client) .sheet:not(.hidden) .sheet-card > .btn-close {
  bottom: max(12px, calc(env(safe-area-inset-bottom, 34px) + 8px + var(--kb, 0px))) !important;
}

/* Equal Import + Cancel (and any action pair) */
body:not(.tg-client) .sheet-actions {
  display: flex !important;
  flex-direction: row !important;
  align-items: stretch !important;
  justify-content: stretch !important;
  gap: 10px !important;
}
body:not(.tg-client) .sheet-actions > button,
body:not(.tg-client) .sheet-actions .btn-close,
body:not(.tg-client) .sheet-actions .btn-confirm,
body:not(.tg-client) .sheet-actions .btn-danger,
body:not(.tg-client) .sheet-actions #plImport,
body:not(.tg-client) .sheet-actions #plCreate,
body:not(.tg-client) .sheet-actions #plRename {
  flex: 1 1 0 !important;
  width: 0 !important; /* equal columns with flex */
  min-width: 0 !important;
  height: 48px !important;
  min-height: 48px !important;
  max-height: 48px !important;
  padding: 0 12px !important;
  margin: 0 !important;
  box-sizing: border-box !important;
  font-size: 0.9rem !important;
  font-weight: 700 !important;
  line-height: 1 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 12px !important;
}

/* Single close button full width when fixed */
body:not(.tg-client) .sheet-card > .btn-close,
body:not(.tg-client) .more-sheet-card > .btn-close,
body:not(.tg-client) #btn-more-close {
  height: 48px !important;
  min-height: 48px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

/* Leave room inside sheet so content isn't hidden under fixed buttons */
body:not(.tg-client) .sheet:not(.hidden) .sheet-card,
body:not(.tg-client) .sheet:not(.hidden) .more-sheet-card {
  padding-bottom: calc(72px + env(safe-area-inset-bottom, 34px) + var(--kb, 0px)) !important;
}


/* ========== Options above Close; Import/Cancel ABOVE safe-area only ========== */

/* More content padding so list options never sit under fixed Close */
body:not(.tg-client) .sheet:not(.hidden) .sheet-card,
body:not(.tg-client) .sheet:not(.hidden) .more-sheet-card {
  padding-bottom: calc(88px + env(safe-area-inset-bottom, 34px) + var(--kb, 0px)) !important;
}

/* Close (single): keep in nav/safe band */
body:not(.tg-client) .sheet:not(.hidden) .sheet-card > .btn-close,
body:not(.tg-client) .sheet:not(.hidden) .more-sheet-card > .btn-close,
body:not(.tg-client) #sheet-more:not(.hidden) .btn-close,
body:not(.tg-client) #btn-more-close {
  bottom: max(12px, calc(env(safe-area-inset-bottom, 34px) + 8px + var(--kb, 0px))) !important;
  z-index: 320 !important;
}

/* Import + Cancel pair ONLY: sit ON TOP of safe-area (not into home indicator) */
body:not(.tg-client) .sheet:not(.hidden) .sheet-card .sheet-actions,
body:not(.tg-client) #sheet-import-pl:not(.hidden) .sheet-actions,
body:not(.tg-client) #sheet-create-pl:not(.hidden) .sheet-actions,
body:not(.tg-client) #sheet-rename-pl:not(.hidden) .sheet-actions,
body:not(.tg-client) #sheet-remove:not(.hidden) .sheet-actions {
  position: fixed !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  width: calc(100% - 32px) !important;
  max-width: 398px !important;
  /* above safe-area — bottom edge of buttons rests on top of home-indicator zone */
  bottom: max(16px, calc(env(safe-area-inset-bottom, 34px) + var(--kb, 0px))) !important;
  top: auto !important;
  margin: 0 !important;
  z-index: 320 !important;
  box-sizing: border-box !important;
}

/* Ensure option lists / inputs scroll above the fixed bar */
body:not(.tg-client) .sheet-card .more-menu,
body:not(.tg-client) .sheet-card .lang-pick-row,
body:not(.tg-client) .sheet-card .modal-pl-list,
body:not(.tg-client) .sheet-card .row,
body:not(.tg-client) .sheet-card .sheet-info {
  position: relative !important;
  z-index: 1 !important;
}


/* ========== Modal actions: normal flow as LAST option (no fixed, no overlap) ========== */
body:not(.tg-client) .sheet .sheet-card .sheet-actions,
body:not(.tg-client) .sheet .sheet-card > .btn-close,
body:not(.tg-client) .sheet .more-sheet-card > .btn-close,
body:not(.tg-client) #sheet-more .btn-close,
body:not(.tg-client) #btn-more-close,
body:not(.tg-client) #sheet-import-pl .sheet-actions,
body:not(.tg-client) #sheet-create-pl .sheet-actions,
body:not(.tg-client) #sheet-rename-pl .sheet-actions,
body:not(.tg-client) #sheet-remove .sheet-actions,
body:not(.tg-client) #sheet-lang .btn-close,
body:not(.tg-client) #sheet-manage .btn-close,
body:not(.tg-client) .sheet:not(.hidden) .sheet-card .sheet-actions,
body:not(.tg-client) .sheet:not(.hidden) .sheet-card > .btn-close,
body:not(.tg-client) .sheet:not(.hidden) .more-sheet-card > .btn-close {
  position: relative !important;
  left: auto !important;
  right: auto !important;
  top: auto !important;
  bottom: auto !important;
  transform: none !important;
  width: 100% !important;
  max-width: none !important;
  margin: 12px 0 0 0 !important;
  margin-bottom: calc(12px + env(safe-area-inset-bottom, 34px)) !important;
  z-index: 1 !important;
  box-sizing: border-box !important;
}

/* Equal pair: Import/Cancel, Confirm/Cancel, etc. — last row in flow */
.sheet-actions {
  display: flex !important;
  flex-direction: row !important;
  align-items: stretch !important;
  gap: 10px !important;
  width: 100% !important;
}
.sheet-actions > button,
.sheet-actions .btn-close,
.sheet-actions .btn-confirm,
.sheet-actions .btn-danger,
.sheet-actions #plImport,
.sheet-actions #plCreate,
.sheet-actions #plRename {
  position: relative !important;
  flex: 1 1 0 !important;
  width: 0 !important;
  min-width: 0 !important;
  height: 48px !important;
  min-height: 48px !important;
  max-height: 48px !important;
  padding: 0 12px !important;
  margin: 0 !important;
  top: auto !important;
  bottom: auto !important;
  left: auto !important;
  transform: none !important;
  box-sizing: border-box !important;
  font-size: 0.9rem !important;
  font-weight: 700 !important;
  line-height: 1 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 12px !important;
}

/* Single Close = full-width last option */
.sheet-card > .btn-close,
.more-sheet-card > .btn-close,
#btn-more-close {
  position: relative !important;
  width: 100% !important;
  height: 48px !important;
  min-height: 48px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  top: auto !important;
  bottom: auto !important;
  left: auto !important;
  transform: none !important;
}

/* Card: only modest bottom pad (safe-area via button margin) — no huge pad */
body:not(.tg-client) .sheet .sheet-card,
body:not(.tg-client) .sheet-card,
body:not(.tg-client) .more-sheet-card,
body:not(.tg-client) .sheet:not(.hidden) .sheet-card,
body:not(.tg-client) .sheet:not(.hidden) .more-sheet-card {
  padding-bottom: calc(8px + var(--kb, 0px)) !important;
}

/* Keep sheet background filling physical bottom */
body:not(.tg-client) .sheet .sheet-card,
body:not(.tg-client) .sheet-card {
  bottom: calc(0px - env(safe-area-inset-bottom, 34px) - 4px) !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
}


/* ========== FINAL: options ABOVE actions; actions last; 14px from page bottom ========== */

/* Sheet card = column: content scrolls, actions pinned at end of card flow */
body:not(.tg-client) .sheet .sheet-card,
body:not(.tg-client) .sheet-card,
body:not(.tg-client) .more-sheet-card {
  display: flex !important;
  flex-direction: column !important;
  /* fill physical bottom */
  bottom: calc(0px - env(safe-area-inset-bottom, 34px)) !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  /* 14px gap from physical page bottom (safe-area + 14px) */
  padding-bottom: calc(14px + env(safe-area-inset-bottom, 34px) + var(--kb, 0px)) !important;
  padding-left: 14px !important;
  padding-right: 14px !important;
  box-sizing: border-box !important;
  overflow: hidden !important;
}

/* Scrollable body: everything except the action row */
body:not(.tg-client) .sheet-card .grab,
body:not(.tg-client) .sheet-card .sheet-title,
body:not(.tg-client) .sheet-card .sheet-info,
body:not(.tg-client) .sheet-card .more-menu,
body:not(.tg-client) .sheet-card .lang-pick-row,
body:not(.tg-client) .sheet-card .modal-pl-list,
body:not(.tg-client) .sheet-card .row,
body:not(.tg-client) .sheet-card form,
body:not(.tg-client) .sheet-card .modal-pick-pl {
  flex: 0 0 auto !important;
}

/* If options list is long, allow it to shrink/scroll above buttons */
body:not(.tg-client) .sheet-card .more-menu,
body:not(.tg-client) .sheet-card .lang-pick-row,
body:not(.tg-client) .sheet-card .modal-pl-list {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  overflow-y: auto !important;
  -webkit-overflow-scrolling: touch !important;
  margin-bottom: 0 !important;
  padding-bottom: 8px !important;
}

/* Action row / Close: ALWAYS last in flex, never fixed, never overlapping */
body:not(.tg-client) .sheet-card .sheet-actions,
body:not(.tg-client) .sheet-card > .btn-close,
body:not(.tg-client) .more-sheet-card > .btn-close,
body:not(.tg-client) #btn-more-close,
body:not(.tg-client) .sheet .sheet-actions,
body:not(.tg-client) .sheet .btn-close {
  position: relative !important;
  left: auto !important;
  right: auto !important;
  top: auto !important;
  bottom: auto !important;
  transform: none !important;
  flex: 0 0 auto !important;
  align-self: stretch !important;
  width: 100% !important;
  max-width: none !important;
  margin: 10px 0 0 0 !important;
  margin-bottom: 0 !important;
  z-index: 2 !important;
  order: 99 !important; /* force last among siblings */
}

/* Equal Import / Cancel / Remove pairs */
body:not(.tg-client) .sheet-actions {
  display: flex !important;
  flex-direction: row !important;
  align-items: stretch !important;
  gap: 10px !important;
}
body:not(.tg-client) .sheet-actions > * {
  position: relative !important;
  flex: 1 1 0 !important;
  width: 0 !important;
  min-width: 0 !important;
  height: 48px !important;
  min-height: 48px !important;
  max-height: 48px !important;
  margin: 0 !important;
  top: auto !important;
  bottom: auto !important;
  left: auto !important;
  transform: none !important;
  padding: 0 12px !important;
  box-sizing: border-box !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 0.9rem !important;
  font-weight: 700 !important;
  border-radius: 12px !important;
}

body:not(.tg-client) .sheet-card > .btn-close,
body:not(.tg-client) .more-sheet-card > .btn-close,
body:not(.tg-client) #btn-more-close {
  height: 48px !important;
  min-height: 48px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}


/* ========== Modal buttons: fixed INSIDE modal band, 14px from page bottom ========== */

/* Card fills to page bottom; room reserved for fixed action bar */
body:not(.tg-client) .sheet:not(.hidden) .sheet-card,
body:not(.tg-client) .sheet:not(.hidden) .more-sheet-card {
  display: flex !important;
  flex-direction: column !important;
  bottom: 0 !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  /* space for fixed bar: 48px btn + 14px gap + safe-area */
  padding-bottom: calc(48px + 14px + 14px + env(safe-area-inset-bottom, 34px) + var(--kb, 0px)) !important;
  padding-left: 14px !important;
  padding-right: 14px !important;
  box-sizing: border-box !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  -webkit-overflow-scrolling: touch !important;
  max-height: min(92vh, calc(100dvh - 8px)) !important;
}

/* Options / lists scroll inside card — never under the bar */
body:not(.tg-client) .sheet:not(.hidden) .sheet-card .more-menu,
body:not(.tg-client) .sheet:not(.hidden) .sheet-card .lang-pick-row,
body:not(.tg-client) .sheet:not(.hidden) .sheet-card .modal-pl-list {
  position: relative !important;
  z-index: 1 !important;
  margin-bottom: 0 !important;
}

/* ONLY when sheet is open: fix action row to bottom of PAGE, aligned to modal width */
body:not(.tg-client) .sheet:not(.hidden) .sheet-card > .sheet-actions,
body:not(.tg-client) .sheet:not(.hidden) .sheet-card > .btn-close,
body:not(.tg-client) .sheet:not(.hidden) .more-sheet-card > .btn-close,
body:not(.tg-client) .sheet:not(.hidden) #btn-more-close {
  position: fixed !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  width: calc(100% - 28px) !important;
  max-width: 402px !important; /* 430 - 28 */
  /* 14px from physical bottom (+ keyboard if open) */
  bottom: calc(14px + var(--kb, 0px)) !important;
  top: auto !important;
  margin: 0 !important;
  z-index: 310 !important;
  box-sizing: border-box !important;
  /* sit on modal glass — not floating outside */
  background: transparent !important;
}

/* Equal Import / Cancel / Remove */
body:not(.tg-client) .sheet:not(.hidden) .sheet-actions {
  display: flex !important;
  flex-direction: row !important;
  align-items: stretch !important;
  gap: 10px !important;
  background: transparent !important;
}
body:not(.tg-client) .sheet:not(.hidden) .sheet-actions > * {
  flex: 1 1 0 !important;
  width: 0 !important;
  min-width: 0 !important;
  height: 48px !important;
  min-height: 48px !important;
  max-height: 48px !important;
  margin: 0 !important;
  padding: 0 12px !important;
  box-sizing: border-box !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 0.9rem !important;
  font-weight: 700 !important;
  border-radius: 12px !important;
}

body:not(.tg-client) .sheet:not(.hidden) .sheet-card > .btn-close,
body:not(.tg-client) .sheet:not(.hidden) .more-sheet-card > .btn-close,
body:not(.tg-client) .sheet:not(.hidden) #btn-more-close {
  height: 48px !important;
  min-height: 48px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

/* Hidden sheets: never show fixed buttons */
body:not(.tg-client) .sheet.hidden .sheet-actions,
body:not(.tg-client) .sheet.hidden .btn-close,
body:not(.tg-client) .sheet.hidden #btn-more-close {
  display: none !important;
  pointer-events: none !important;
  visibility: hidden !important;
}


/* ========== FINAL FIX: buttons = last IN-FLOW option inside modal (no fixed overlay) ========== */
/* Kill every previous fixed / absolute on action buttons */
body:not(.tg-client) .sheet .sheet-actions,
body:not(.tg-client) .sheet .btn-close,
body:not(.tg-client) .sheet-card .sheet-actions,
body:not(.tg-client) .sheet-card > .btn-close,
body:not(.tg-client) .more-sheet-card > .btn-close,
body:not(.tg-client) #btn-more-close,
body:not(.tg-client) .sheet:not(.hidden) .sheet-card > .sheet-actions,
body:not(.tg-client) .sheet:not(.hidden) .sheet-card > .btn-close,
body:not(.tg-client) .sheet:not(.hidden) .more-sheet-card > .btn-close,
body:not(.tg-client) .sheet:not(.hidden) #btn-more-close,
body:not(.tg-client) .sheet:not(.hidden) .sheet-actions,
body:not(.tg-client) .sheet:not(.hidden) .btn-close {
  position: static !important;
  left: auto !important;
  right: auto !important;
  top: auto !important;
  bottom: auto !important;
  transform: none !important;
  z-index: auto !important;
  float: none !important;
  width: 100% !important;
  max-width: none !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

/* Modal card: column layout, sits 14px above page bottom */
body:not(.tg-client) .sheet:not(.hidden) .sheet-card,
body:not(.tg-client) .sheet:not(.hidden) .more-sheet-card {
  display: flex !important;
  flex-direction: column !important;
  position: absolute !important;
  left: 50% !important;
  right: auto !important;
  width: 100% !important;
  max-width: 430px !important;
  transform: translate3d(-50%, 0, 0) !important;
  /* 14px gap from physical bottom of the page */
  bottom: calc(14px + var(--kb, 0px)) !important;
  top: auto !important;
  max-height: min(85vh, calc(100dvh - 28px - var(--kb, 0px))) !important;
  padding: 10px 14px 14px 14px !important;
  box-sizing: border-box !important;
  overflow: hidden !important;
  border-bottom-left-radius: 16px !important;
  border-bottom-right-radius: 16px !important;
}

/* Scroll zone = everything before the action row */
body:not(.tg-client) .sheet:not(.hidden) .sheet-card > .grab,
body:not(.tg-client) .sheet:not(.hidden) .sheet-card > .sheet-title,
body:not(.tg-client) .sheet:not(.hidden) .sheet-card > .sheet-info,
body:not(.tg-client) .sheet:not(.hidden) .sheet-card > .row,
body:not(.tg-client) .sheet:not(.hidden) .sheet-card > form {
  flex: 0 0 auto !important;
}

body:not(.tg-client) .sheet:not(.hidden) .sheet-card > .more-menu,
body:not(.tg-client) .sheet:not(.hidden) .sheet-card > .lang-pick-row,
body:not(.tg-client) .sheet:not(.hidden) .sheet-card > .modal-pl-list {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  overflow-y: auto !important;
  -webkit-overflow-scrolling: touch !important;
  margin-bottom: 12px !important;
  padding-bottom: 4px !important;
}

/* Action row = LAST child in the column (true last option) */
body:not(.tg-client) .sheet:not(.hidden) .sheet-card > .sheet-actions,
body:not(.tg-client) .sheet:not(.hidden) .sheet-card > .btn-close,
body:not(.tg-client) .sheet:not(.hidden) .more-sheet-card > .btn-close,
body:not(.tg-client) .sheet:not(.hidden) #btn-more-close {
  flex: 0 0 auto !important;
  order: 999 !important;
  margin-top: 4px !important;
  margin-bottom: 0 !important;
  position: static !important;
  display: flex !important;
}

body:not(.tg-client) .sheet:not(.hidden) .sheet-actions {
  flex-direction: row !important;
  align-items: stretch !important;
  gap: 10px !important;
  width: 100% !important;
}
body:not(.tg-client) .sheet:not(.hidden) .sheet-actions > * {
  position: static !important;
  flex: 1 1 0 !important;
  width: 0 !important;
  min-width: 0 !important;
  height: 48px !important;
  min-height: 48px !important;
  max-height: 48px !important;
  margin: 0 !important;
  padding: 0 12px !important;
  box-sizing: border-box !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 0.9rem !important;
  font-weight: 700 !important;
  border-radius: 12px !important;
  transform: none !important;
}

body:not(.tg-client) .sheet:not(.hidden) .sheet-card > .btn-close,
body:not(.tg-client) .sheet:not(.hidden) .more-sheet-card > .btn-close,
body:not(.tg-client) .sheet:not(.hidden) #btn-more-close {
  width: 100% !important;
  height: 48px !important;
  min-height: 48px !important;
  align-items: center !important;
  justify-content: center !important;
}


/* ========== ALL modals = same logic as more-options (in-flow last buttons) ========== */
body:not(.tg-client) .sheet:not(.hidden) .sheet-card,
body:not(.tg-client) .sheet:not(.hidden) .more-sheet-card,
body:not(.tg-client) #sheet-more:not(.hidden) .sheet-card,
body:not(.tg-client) #sheet-more:not(.hidden) .more-sheet-card,
body:not(.tg-client) #sheet-import-pl:not(.hidden) .sheet-card,
body:not(.tg-client) #sheet-create-pl:not(.hidden) .sheet-card,
body:not(.tg-client) #sheet-rename-pl:not(.hidden) .sheet-card,
body:not(.tg-client) #sheet-remove:not(.hidden) .sheet-card,
body:not(.tg-client) #sheet-lang:not(.hidden) .sheet-card,
body:not(.tg-client) #sheet-manage:not(.hidden) .sheet-card,
body:not(.tg-client) #sheet-modal:not(.hidden) .sheet-card,
body:not(.tg-client) #sheet-add-session:not(.hidden) .sheet-card,
body:not(.tg-client) #sheet-logout:not(.hidden) .sheet-card {
  display: flex !important;
  flex-direction: column !important;
  position: absolute !important;
  left: 50% !important;
  right: auto !important;
  width: 100% !important;
  max-width: 430px !important;
  margin: 0 !important;
  transform: translate3d(-50%, 0, 0) !important;
  top: auto !important;
  /* same as more-options: 14px from page bottom */
  bottom: calc(14px + var(--kb, 0px)) !important;
  max-height: min(85vh, calc(100dvh - 28px - var(--kb, 0px))) !important;
  padding: 10px 14px 14px 14px !important;
  box-sizing: border-box !important;
  overflow: hidden !important;
  border-bottom-left-radius: 16px !important;
  border-bottom-right-radius: 16px !important;
}

/* Kill fixed/absolute on action ROWS (not individual Cancel inside pairs) */
body:not(.tg-client) .sheet:not(.hidden) .sheet-actions,
body:not(.tg-client) .sheet:not(.hidden) .sheet-card .sheet-actions,
body:not(.tg-client) #sheet-import-pl:not(.hidden) .sheet-actions,
body:not(.tg-client) #sheet-create-pl:not(.hidden) .sheet-actions,
body:not(.tg-client) #sheet-rename-pl:not(.hidden) .sheet-actions,
body:not(.tg-client) #sheet-remove:not(.hidden) .sheet-actions,
body:not(.tg-client) #sheet-modal:not(.hidden) .sheet-actions,
body:not(.tg-client) #sheet-add-session:not(.hidden) .sheet-actions,
body:not(.tg-client) #sheet-logout:not(.hidden) .sheet-actions {
  position: static !important;
  left: auto !important;
  right: auto !important;
  top: auto !important;
  bottom: auto !important;
  transform: none !important;
  z-index: auto !important;
  float: none !important;
  width: 100% !important;
  max-width: none !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  flex: 0 0 auto !important;
  order: 999 !important; /* whole row last in card — NOT individual buttons */
  margin-top: 8px !important;
  margin-bottom: 0 !important;
}
/* Lone full-width Close only (not inside .sheet-actions) */
body:not(.tg-client) .sheet:not(.hidden) .sheet-card > .btn-close,
body:not(.tg-client) .sheet:not(.hidden) .more-sheet-card > .btn-close,
body:not(.tg-client) .sheet:not(.hidden) #btn-more-close,
body:not(.tg-client) #sheet-lang:not(.hidden) .sheet-card > .btn-close,
body:not(.tg-client) #sheet-manage:not(.hidden) .sheet-card > .btn-close,
body:not(.tg-client) #sheet-modal:not(.hidden) .sheet-card > .btn-close,
body:not(.tg-client) #sheet-logout:not(.hidden) .sheet-card > .btn-close {
  position: static !important;
  left: auto !important;
  right: auto !important;
  top: auto !important;
  bottom: auto !important;
  transform: none !important;
  z-index: auto !important;
  float: none !important;
  width: 100% !important;
  max-width: none !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  flex: 0 0 auto !important;
  order: 999 !important;
  margin-top: 8px !important;
  margin-bottom: 0 !important;
}

/* Scrollable middle content in every modal */
body:not(.tg-client) .sheet:not(.hidden) .sheet-card > .more-menu,
body:not(.tg-client) .sheet:not(.hidden) .sheet-card > .lang-pick-row,
body:not(.tg-client) .sheet:not(.hidden) .sheet-card > .modal-pl-list,
body:not(.tg-client) .sheet:not(.hidden) .more-sheet-card > .more-menu {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  overflow-y: auto !important;
  -webkit-overflow-scrolling: touch !important;
  margin-bottom: 8px !important;
}

/* Equal action pairs everywhere */
body:not(.tg-client) .sheet:not(.hidden) .sheet-actions {
  display: flex !important;
  flex-direction: row !important;
  align-items: stretch !important;
  gap: 10px !important;
  width: 100% !important;
}
body:not(.tg-client) .sheet:not(.hidden) .sheet-actions > * {
  position: static !important;
  flex: 1 1 0 !important;
  width: 0 !important;
  min-width: 0 !important;
  height: 48px !important;
  min-height: 48px !important;
  max-height: 48px !important;
  margin: 0 !important;
  padding: 0 12px !important;
  box-sizing: border-box !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 0.9rem !important;
  font-weight: 700 !important;
  border-radius: 12px !important;
  transform: none !important;
  top: auto !important;
  bottom: auto !important;
  left: auto !important;
}

body:not(.tg-client) .sheet:not(.hidden) .btn-close {
  height: 48px !important;
  min-height: 48px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
}


/* ========== NUCLEAR FIX v43: fill safe-area + buttons last + 14px from page bottom ========== */

/* 1) Open modal card: paint into safe-area, column layout */
body:not(.tg-client) .sheet:not(.hidden) .sheet-card,
body:not(.tg-client) .sheet:not(.hidden) .more-sheet-card {
  display: flex !important;
  flex-direction: column !important;
  position: absolute !important;
  left: 50% !important;
  right: auto !important;
  width: 100% !important;
  max-width: 430px !important;
  margin: 0 !important;
  transform: translate3d(-50%, 0, 0) !important;
  top: auto !important;
  /* fill physical bottom / safe-area */
  bottom: 0 !important;
  max-height: min(90vh, 100dvh) !important;
  /* 14px from physical page bottom for last content (buttons) */
  padding: 10px 14px calc(14px + var(--kb, 0px)) 14px !important;
  box-sizing: border-box !important;
  overflow: hidden !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
}

/* 2) Options list scrolls above buttons */
body:not(.tg-client) .sheet:not(.hidden) .sheet-card > .more-menu,
body:not(.tg-client) .sheet:not(.hidden) .more-sheet-card > .more-menu,
body:not(.tg-client) .sheet:not(.hidden) .sheet-card > .lang-pick-row,
body:not(.tg-client) .sheet:not(.hidden) .sheet-card > .modal-pl-list {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  overflow-y: auto !important;
  -webkit-overflow-scrolling: touch !important;
  margin-bottom: 12px !important;
}

/* 3) ALL action rows / close = static, last row inside card */
body:not(.tg-client) .sheet:not(.hidden) .sheet-actions,
body:not(.tg-client) .sheet:not(.hidden) .sheet-card > .btn-close,
/* Lone close only — NOT .sheet-actions .btn-close (that was pushing Cancel right) */
body:not(.tg-client) .sheet:not(.hidden) .more-sheet-card > .btn-close,
body:not(.tg-client) .sheet:not(.hidden) .sheet-card > .btn-close,
body:not(.tg-client) .sheet:not(.hidden) #btn-more-close {
  position: static !important;
  left: auto !important;
  right: auto !important;
  top: auto !important;
  bottom: auto !important;
  transform: none !important;
  z-index: auto !important;
  float: none !important;
  flex: 0 0 auto !important;
  order: 999 !important;
  width: 100% !important;
  max-width: none !important;
  margin: 8px 0 0 0 !important;
  display: flex !important;
}
/* Explicit reset: Cancel inside a pair must NOT inherit order 999 */
body:not(.tg-client) .sheet:not(.hidden) .sheet-actions > .btn-close,
body:not(.tg-client) .sheet:not(.hidden) .sheet-actions > .btn-confirm,
body:not(.tg-client) .sheet:not(.hidden) .sheet-actions > .btn-danger {
  order: 0 !important;
  width: auto !important;
  max-width: none !important;
  margin: 0 !important;
  flex: 1 1 0 !important;
}

/* 4) Equal Import / Cancel / Remove / Confirm pairs */
body:not(.tg-client) .sheet:not(.hidden) .sheet-actions {
  flex-direction: row !important;
  align-items: stretch !important;
  justify-content: stretch !important;
  gap: 10px !important;
}
body:not(.tg-client) .sheet:not(.hidden) .sheet-actions > button,
body:not(.tg-client) .sheet:not(.hidden) .sheet-actions > .btn-close,
body:not(.tg-client) .sheet:not(.hidden) .sheet-actions > .btn-confirm,
body:not(.tg-client) .sheet:not(.hidden) .sheet-actions > .btn-danger,
body:not(.tg-client) .sheet:not(.hidden) .sheet-actions > #plImport,
body:not(.tg-client) .sheet:not(.hidden) .sheet-actions > #plCreate,
body:not(.tg-client) .sheet:not(.hidden) .sheet-actions > #plRename {
  position: static !important;
  flex: 1 1 0 !important;
  -webkit-flex: 1 1 0 !important;
  width: 0 !important;
  min-width: 0 !important;
  max-width: none !important;
  height: 48px !important;
  min-height: 48px !important;
  max-height: 48px !important;
  margin: 0 !important;
  padding: 0 10px !important;
  box-sizing: border-box !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 0.9rem !important;
  font-weight: 700 !important;
  line-height: 1 !important;
  border-radius: 12px !important;
  transform: none !important;
  top: auto !important;
  bottom: auto !important;
  left: auto !important;
  right: auto !important;
}

/* Single Close full width, same height */
body:not(.tg-client) .sheet:not(.hidden) .sheet-card > .btn-close,
body:not(.tg-client) .sheet:not(.hidden) .more-sheet-card > .btn-close,
body:not(.tg-client) .sheet:not(.hidden) #btn-more-close {
  height: 48px !important;
  min-height: 48px !important;
  width: 100% !important;
  align-items: center !important;
  justify-content: center !important;
}

/* Hidden: no leftover fixed ghosts */
body:not(.tg-client) .sheet.hidden .sheet-actions,
body:not(.tg-client) .sheet.hidden .btn-close {
  position: static !important;
}


/* ========== v44: modal fills safe-area; buttons live IN safe-area; kb = above keyboard ========== */

body:not(.tg-client) .sheet:not(.hidden) .sheet-card,
body:not(.tg-client) .sheet:not(.hidden) .more-sheet-card {
  display: flex !important;
  flex-direction: column !important;
  position: absolute !important;
  left: 50% !important;
  right: auto !important;
  width: 100% !important;
  max-width: 430px !important;
  margin: 0 !important;
  transform: translate3d(-50%, 0, 0) !important;
  top: auto !important;
  /* pull card INTO safe-area / home indicator */
  bottom: calc(0px - env(safe-area-inset-bottom, 34px) + var(--kb, 0px)) !important;
  max-height: min(92vh, calc(100dvh + env(safe-area-inset-bottom, 34px))) !important;
  /* buttons sit in safe-area, 14px above physical bottom; when kb open, 14px above keyboard */
  padding: 10px 14px calc(14px + env(safe-area-inset-bottom, 34px)) 14px !important;
  box-sizing: border-box !important;
  overflow: hidden !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
}

/* Keyboard open: card rests on keyboard; pad only 14px (no extra safe-area) so buttons sit on top of kb */
body:not(.tg-client) .sheet:not(.hidden) .sheet-card,
body:not(.tg-client) .sheet:not(.hidden) .more-sheet-card {
  padding-bottom: calc(14px + env(safe-area-inset-bottom, 34px) * (1 - min(var(--kb, 0px), 1px) / max(var(--kb, 1px), 1px))) !important;
}

/* Simpler kb pad: when --kb > 0, use 14px only; CSS can't easily branch — use max trick */
body:not(.tg-client) .sheet:not(.hidden) .sheet-card,
body:not(.tg-client) .sheet:not(.hidden) .more-sheet-card {
  /* base: safe-area + 14px. When keyboard open JS sets --kb; bottom already includes +var(--kb).
     padding keeps 14px so last row clears the keyboard top / home indicator. */
  padding-bottom: calc(14px + max(0px, env(safe-area-inset-bottom, 34px) - var(--kb, 0px))) !important;
}

/* Import / create / rename / session = keyboard sheets: always 14px above keyboard when open */
body:not(.tg-client) #sheet-import-pl:not(.hidden) .sheet-card,
body:not(.tg-client) #sheet-create-pl:not(.hidden) .sheet-card,
body:not(.tg-client) #sheet-rename-pl:not(.hidden) .sheet-card,
body:not(.tg-client) #sheet-add-session:not(.hidden) .sheet-card {
  bottom: var(--kb, 0px) !important;
  padding-bottom: 14px !important;
  border-bottom-left-radius: 16px !important;
  border-bottom-right-radius: 16px !important;
}

/* Non-keyboard modals: fill safe-area, buttons in safe-area */
body:not(.tg-client) #sheet-more:not(.hidden) .sheet-card,
body:not(.tg-client) #sheet-more:not(.hidden) .more-sheet-card,
body:not(.tg-client) #sheet-lang:not(.hidden) .sheet-card,
body:not(.tg-client) #sheet-manage:not(.hidden) .sheet-card,
body:not(.tg-client) #sheet-modal:not(.hidden) .sheet-card,
body:not(.tg-client) #sheet-remove:not(.hidden) .sheet-card,
body:not(.tg-client) #sheet-logout:not(.hidden) .sheet-card {
  bottom: calc(0px - env(safe-area-inset-bottom, 34px)) !important;
  padding-bottom: calc(14px + env(safe-area-inset-bottom, 34px)) !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
}

/* Buttons stay in-flow last row
   IMPORTANT: order:999 only on the whole .sheet-actions row (and lone full-width close),
   NEVER on .btn-close inside a pair — that forced Cancel to the right. */
body:not(.tg-client) .sheet:not(.hidden) .sheet-actions {
  position: static !important;
  flex: 0 0 auto !important;
  order: 999 !important;
  width: 100% !important;
  margin: 8px 0 0 0 !important;
  transform: none !important;
  top: auto !important;
  bottom: auto !important;
  left: auto !important;
}
/* Lone full-width Close (More menu, Manage, Lang, etc.) — not paired with an action */
body:not(.tg-client) .sheet:not(.hidden) .sheet-card > .btn-close,
body:not(.tg-client) .sheet:not(.hidden) .more-sheet-card > .btn-close,
body:not(.tg-client) .sheet:not(.hidden) #btn-more-close {
  position: static !important;
  flex: 0 0 auto !important;
  order: 999 !important;
  width: 100% !important;
  margin: 8px 0 0 0 !important;
  transform: none !important;
  top: auto !important;
  bottom: auto !important;
  left: auto !important;
}

body:not(.tg-client) .sheet:not(.hidden) .sheet-actions {
  display: flex !important;
  flex-direction: row !important;
  gap: 10px !important;
}
body:not(.tg-client) .sheet:not(.hidden) .sheet-actions > * {
  flex: 1 1 0 !important;
  width: 0 !important;
  height: 48px !important;
  min-height: 48px !important;
  margin: 0 !important;
  padding: 0 10px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-sizing: border-box !important;
  font-weight: 700 !important;
  font-size: 0.9rem !important;
  border-radius: 12px !important;
  position: static !important;
  transform: none !important;
}


/* ========== Recognize / Shazam overlay ========== */
.recognize-overlay {
  position: fixed;
  inset: 0;
  z-index: 1200;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 24px 20px calc(14px + env(safe-area-inset-bottom, 0px));
  background: rgba(0, 0, 0, 0.72);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
  backdrop-filter: blur(18px) saturate(140%);
  box-sizing: border-box;
  pointer-events: auto;
}
.recognize-overlay.hidden {
  display: none !important;
  pointer-events: none !important;
}

.recognize-stage {
  position: relative;
  display: block;
  width: 100%;
  max-width: 340px;
  flex: 1 1 auto;
  min-height: 0;
  margin: 0 auto;
}

/* Theme tokens for overlay (default = dark) */
.recognize-overlay {
  --rec-bg: #0A0A0C;
  --rec-surface: #151519;
  --rec-line: #26262C;
  --rec-sky: #3FB6EE;
  --rec-sky-dim: #1E4B63;
  --rec-ok: #3ECF9A;
  --rec-ok-dim: #123B2E;
  --rec-err: #F0654B;
  --rec-err-dim: #3E1D17;
  --rec-text: #F2F4F6;
  --rec-text-dim: #7A8189;
  --rec-panel: rgba(21, 21, 25, 0.92);
}
html[data-theme="light"] .recognize-overlay {
  --rec-bg: #FFFFFF;
  --rec-surface: #F4F9FC;
  --rec-line: #E1EDF4;
  --rec-sky: #2EA8E0;
  --rec-sky-dim: #B9E2F3;
  --rec-ok: #2FBE8F;
  --rec-ok-dim: #CFF3E6;
  --rec-err: #F0654B;
  --rec-err-dim: #FBDAD3;
  --rec-text: #16232B;
  --rec-text-dim: #7C8D97;
  --rec-panel: rgba(244, 249, 252, 0.96);
  background: rgba(255, 255, 255, 0.78);
}

.recognize-overlay .listener {
  position: relative;
  width: 220px;
  height: 220px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.recognize-overlay .ring {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 1.5px solid var(--rec-sky-dim);
  pointer-events: none;
}
.recognize-overlay .ring.pulse { animation: recPulse 2.4s ease-out infinite; }
.recognize-overlay .ring.pulse.delay1 { animation-delay: .8s; }
.recognize-overlay .ring.pulse.delay2 { animation-delay: 1.6s; }
@keyframes recPulse {
  0%   { transform: scale(.55); opacity: 0; }
  18%  { opacity: .8; }
  100% { transform: scale(1.15); opacity: 0; }
}

.recognize-overlay .core {
  position: relative;
  width: 132px;
  height: 132px;
  border-radius: 50%;
  background: var(--rec-surface);
  box-shadow:
    0 0 0 1px var(--rec-sky-dim),
    0 0 40px -10px rgba(63, 182, 238, 0.45);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: box-shadow .4s ease, background .4s ease, transform .35s ease;
}
html[data-theme="light"] .recognize-overlay .core {
  box-shadow:
    0 0 0 1px var(--rec-sky-dim),
    0 18px 32px -18px rgba(46, 168, 224, 0.35);
}

.recognize-overlay .bars {
  display: flex;
  align-items: center;
  gap: 5px;
  height: 46px;
}
.recognize-overlay .bars span {
  width: 4px;
  border-radius: 2px;
  background: var(--rec-sky);
  animation: recBar 1.1s ease-in-out infinite;
  transform-origin: bottom;
}
.recognize-overlay .bars span:nth-child(1){ height:18px; animation-delay:-1.1s; }
.recognize-overlay .bars span:nth-child(2){ height:34px; animation-delay:-0.9s; }
.recognize-overlay .bars span:nth-child(3){ height:46px; animation-delay:-0.7s; }
.recognize-overlay .bars span:nth-child(4){ height:28px; animation-delay:-0.5s; }
.recognize-overlay .bars span:nth-child(5){ height:14px; animation-delay:-0.3s; }
.recognize-overlay .bars span:nth-child(6){ height:38px; animation-delay:-0.1s; }
@keyframes recBar {
  0%, 100% { transform: scaleY(.35); opacity: .55; }
  50%      { transform: scaleY(1);   opacity: 1; }
}

.recognize-overlay .core.found { transform: none; }

.recognize-overlay .core.found {
  background: var(--rec-ok-dim);
  box-shadow: 0 0 0 1px var(--rec-ok), 0 0 40px -8px rgba(62, 207, 154, 0.5);
}
.recognize-overlay .core.found .bars { display: none; }

.recognize-overlay .core.failed {
  background: var(--rec-err-dim);
  box-shadow: 0 0 0 1px var(--rec-err), 0 0 40px -8px rgba(240, 101, 75, 0.5);
  animation: recShake .45s ease;
}
.recognize-overlay .core.failed .bars { display: none; }
@keyframes recShake {
  0%, 100% { transform: translateX(0); }
  20% { transform: translateX(-6px); }
  40% { transform: translateX(5px); }
  60% { transform: translateX(-4px); }
  80% { transform: translateX(3px); }
}

.recognize-overlay .icon-stack {
  position: relative;
  width: 64px;
  height: 64px;
  display: none;
}
.recognize-overlay .core.found .icon-stack,
.recognize-overlay .core.failed .icon-stack { display: block; }

.recognize-overlay .icon {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
}
@keyframes recIconFade {
  0%   { opacity: 0; transform: scale(.7); }
  12%  { opacity: 1; transform: scale(1); }
  72%  { opacity: 1; transform: scale(1); }
  100% { opacity: 0; transform: scale(.92); }
}
@keyframes recIconReveal { to { opacity: 1; } }
@keyframes recDraw { to { stroke-dashoffset: 0; } }

.recognize-overlay img.icon.smile,
.recognize-overlay img.icon.face {
  position: absolute;
  inset: 0;
  width: 64px !important;
  height: 64px !important;
  max-width: 64px;
  max-height: 64px;
  object-fit: contain;
  opacity: 0;
  display: block;
  margin: 0;
  padding: 0;
  pointer-events: none;
}
/* match previous SVG face colors: smile = ok green, face = err red */
.recognize-overlay img.icon.smile {
  filter: brightness(0) saturate(100%) invert(68%) sepia(42%) saturate(500%) hue-rotate(110deg) brightness(95%) contrast(95%);
}
.recognize-overlay img.icon.face {
  filter: brightness(0) saturate(100%) invert(48%) sepia(70%) saturate(1200%) hue-rotate(330deg) brightness(105%) contrast(95%);
}
html[data-theme="light"] .recognize-overlay img.icon.smile {
  filter: brightness(0) saturate(100%) invert(58%) sepia(45%) saturate(550%) hue-rotate(110deg) brightness(95%) contrast(95%);
}
html[data-theme="light"] .recognize-overlay img.icon.face {
  filter: brightness(0) saturate(100%) invert(48%) sepia(70%) saturate(1200%) hue-rotate(330deg) brightness(105%) contrast(95%);
}
.recognize-overlay .core.found .icon.smile { animation: recIconFade 1.3s ease forwards; }

.recognize-overlay .icon.check circle {
  stroke: var(--rec-ok); stroke-width: 3; fill: none;
  stroke-dasharray: 151; stroke-dashoffset: 151;
}
.recognize-overlay .icon.check path {
  stroke: var(--rec-ok); stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; fill: none;
  stroke-dasharray: 34; stroke-dashoffset: 34;
}
.recognize-overlay .core.found .icon.check { animation: recIconReveal .01s linear forwards 1.15s; }
.recognize-overlay .core.found .icon.check circle { animation: recDraw .45s ease forwards 1.15s; }
.recognize-overlay .core.found .icon.check path { animation: recDraw .3s ease forwards 1.55s; }

.recognize-overlay img.icon.face { transform-origin: 50% 50%; }
.recognize-overlay .core.failed .icon.face {
  animation: recIconFade 1.3s ease forwards;
}

.recognize-overlay .icon.cross circle {
  stroke: var(--rec-err); stroke-width: 3; fill: none;
  stroke-dasharray: 151; stroke-dashoffset: 151;
}
.recognize-overlay .icon.cross line {
  stroke: var(--rec-err); stroke-width: 4; stroke-linecap: round;
  stroke-dasharray: 23; stroke-dashoffset: 23;
}
.recognize-overlay .core.failed .icon.cross { animation: recIconReveal .01s linear forwards 1.15s; }
.recognize-overlay .core.failed .icon.cross circle { animation: recDraw .45s ease forwards 1.15s; }
.recognize-overlay .core.failed .icon.cross .x1 { animation: recDraw .25s ease forwards 1.55s; }
.recognize-overlay .core.failed .icon.cross .x2 { animation: recDraw .25s ease forwards 1.75s; }

.recognize-overlay .core.found ~ .ring,
.recognize-overlay .core.failed ~ .ring {
  animation: none !important;
  opacity: 0;
  transition: opacity .4s ease;
}

.recognize-overlay .recognize-copy {
  text-align: center;
}
.recognize-overlay .status {
  font-size: 15px;
  letter-spacing: .02em;
  color: var(--rec-text-dim);
  transition: color .3s ease;
  min-height: 22px;
}
.recognize-overlay .status.found { color: var(--rec-ok); }
.recognize-overlay .status.failed { color: var(--rec-err); }
.recognize-overlay .title,
.recognize-overlay .artist,
.recognize-overlay .hint {
  opacity: 0;
  transform: translateY(6px);
  transition: opacity .4s ease, transform .4s ease;
  text-align: center;
}
.recognize-overlay .title {
  font-size: 19px;
  font-weight: 600;
  color: var(--rec-text);
  transition-delay: .15s;
  margin-top: 6px;
}
.recognize-overlay .artist {
  font-size: 14px;
  color: var(--rec-text-dim);
  transition-delay: .25s;
  margin-top: 4px;
}
.recognize-overlay .hint {
  font-size: 13px;
  color: var(--rec-err);
  margin-top: 8px;
}
.recognize-overlay .title.show,
.recognize-overlay .artist.show,
.recognize-overlay .hint.show {
  opacity: 1;
  transform: translateY(0);
}

/* Track tail under success animation */
.rec-track-tail {
  display: none;
  align-items: center;
  gap: 12px;
  width: 100%;
  max-width: 320px;
  margin-top: 4px;
  padding: 10px 12px;
  border-radius: 14px;
  border: 1px solid var(--rec-line);
  background: var(--rec-panel);
  color: var(--rec-text);
  cursor: pointer;
  text-align: left;
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  box-shadow: 0 10px 28px rgba(0,0,0,0.22);
  transition: transform .15s ease, opacity .35s ease;
  opacity: 0;
  pointer-events: none;
  box-sizing: border-box;
}
.rec-track-tail.show {
  display: flex !important;
  opacity: 1 !important;
  pointer-events: auto !important;
}
.rec-track-tail.hidden {
  display: none !important;
  opacity: 0 !important;
  pointer-events: none !important;
}
.rec-track-tail:active { transform: scale(0.98); }
.rec-track-art {
  width: 48px;
  height: 48px;
  border-radius: 10px;
  object-fit: cover;
  background: var(--rec-surface);
  flex-shrink: 0;
}
.rec-track-meta { flex: 1 1 auto; min-width: 0; }
.rec-track-title {
  font-size: 0.95rem;
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: var(--rec-text);
}
.rec-track-artist {
  font-size: 0.8rem;
  color: var(--rec-text-dim);
  margin-top: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.rec-track-play {
  width: 22px;
  height: 22px;
  flex-shrink: 0;
  filter: brightness(0) invert(1);
  opacity: 0.9;
}
html[data-theme="light"] .rec-track-play {
  filter: none;
  opacity: 0.75;
}

/* Cancel — bottom of page, 14px above physical bottom (+ safe-area) */
.recognize-cancel {
  flex: 0 0 auto;
  width: min(100%, 340px);
  height: 48px;
  margin-top: 18px;
  border-radius: 14px;
  border: 1px solid var(--rec-line);
  background: var(--rec-panel);
  color: var(--rec-text);
  font-weight: 700;
  font-size: 0.95rem;
  cursor: pointer;
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  box-shadow: 0 8px 22px rgba(0,0,0,0.18);
}
.recognize-cancel:active { transform: scale(0.98); }



/* Search history tabs (Recent / Recognize) — two equal-width pills */
.hist-tabs {
  display: flex;
  width: 100%;
  gap: 8px;
  margin: 0 0 12px 0;
  padding: 0;
  box-sizing: border-box;
}
.hist-tab {
  flex: 1 1 0;
  width: 0;
  min-width: 0;
  height: 40px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: rgba(255, 255, 255, 0.08);
  color: var(--muted, #a8a8b2);
  font-weight: 600;
  font-size: 0.84rem;
  cursor: pointer;
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  padding: 0 10px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  box-shadow: none;
}
/* Match playlist .chip.on (selected favorite/list chip) — not blue */
.hist-tab.active {
  background: rgba(0, 0, 0, 0.32) !important;
  border-color: rgba(255, 255, 255, 0.26) !important;
  box-shadow: none !important;
  color: #eaf6ff !important;
  font-weight: 700 !important;
}
html[data-theme="light"] .hist-tab {
  background: rgba(255, 255, 255, 0.4) !important;
  color: #101828 !important;
  border: 1px solid rgba(16, 24, 40, 0.12) !important;
}
html[data-theme="light"] .hist-tab.active {
  /* same selected treatment as .chip.on under light theme */
  background: rgba(0, 0, 0, 0.32) !important;
  border-color: rgba(16, 24, 40, 0.22) !important;
  color: #ffffff !important;
  font-weight: 700 !important;
  box-shadow: none !important;
}

/* Critical: app has no global .hidden — force hide hist panels */
#histList.hidden,
#recognizeHistList.hidden,
.hist.hidden,
.hist-recognize-list.hidden {
  display: none !important;
}
#recognizeHistList:not(.hidden) {
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
  width: 100% !important;
}
#histList:not(.hidden) {
  display: flex !important;
  flex-direction: column !important;
  gap: 4px !important;
}

.hist-recognize-list .track {
  cursor: pointer;
}
.hist-recognize-list .track.no-num {
  grid-template-columns: 46px minmax(0, 1fr) auto !important;
}

/* Recognize overlay: reserve tail slot so page/stage does not jump */
.recognize-overlay .recognize-stage {
  justify-content: center;
}
.recognize-overlay .rec-tail-slot {
  width: 100%;
  max-width: 320px;
  min-height: 72px;
  margin-top: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.recognize-overlay .rec-track-tail {
  margin-top: 0;
  width: 100%;
}

.hist-recognize-list .track {
  cursor: pointer;
}

/* Recognize overlay: reserve tail slot so page/stage does not jump */
.recognize-overlay .recognize-stage {
  justify-content: center;
}
.recognize-overlay .rec-tail-slot {
  width: 100%;
  max-width: 320px;
  min-height: 72px;
  margin-top: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.recognize-overlay .rec-track-tail {
  margin-top: 0;
}



/* Try again under no-match — fixed slot so layout never jumps */
.rec-retry-slot {
  width: 100%;
  min-height: 56px;
  margin-top: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}
.recognize-retry {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 148px;
  height: 42px;
  padding: 0 22px;
  border-radius: 999px;
  font-weight: 700;
  font-size: 0.9rem;
  cursor: pointer;
  border: 1px solid transparent;
  /* fade only — never toggle display (avoids page shift) */
  opacity: 0;
  transform: translateY(4px);
  transition: opacity .4s ease, transform .4s ease, background .2s ease, border-color .2s ease, color .2s ease;
  pointer-events: none;
  visibility: hidden;
}
.recognize-retry.show {
  opacity: 1;
  transform: translateY(0);
  visibility: visible;
  pointer-events: auto;
}
.rec-retry-slot:has(.recognize-retry.show) {
  pointer-events: auto;
}
.recognize-overlay .recognize-retry {
  background: rgba(240, 101, 75, 0.16);
  border-color: rgba(240, 101, 75, 0.45);
  color: #ffb3a6;
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.28);
}
.recognize-overlay .recognize-retry:active {
  transform: scale(0.98);
}
html[data-theme="light"] .recognize-overlay .recognize-retry {
  background: rgba(240, 101, 75, 0.12);
  border-color: rgba(240, 101, 75, 0.4);
  color: #c24735;
  box-shadow: 0 8px 20px rgba(240, 101, 75, 0.12);
}


.recognize-overlay .status.failed {
  color: var(--rec-err) !important;
  font-weight: 700;
  font-size: 16px;
  letter-spacing: 0.01em;
}
html[data-theme="light"] .recognize-overlay .status.failed {
  color: #c24735 !important;
}
.recognize-overlay .hint:empty {
  display: none !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  opacity: 0 !important;
}



/* ==========================================================================
   DESKTOP LAYOUT — last rules win over mobile 430px constraints
   ========================================================================== */
@media (min-width: 768px) {
  html.desktop-layout,
  body.desktop-layout {
    background: #05070c !important;
  }

  body.desktop-layout #app,
  html.desktop-layout body #app,
  body.desktop-layout #app.is-player,
  body.desktop-layout #app.is-list-page {
    max-width: min(430px, 100vw) !important;
    width: min(430px, 100vw) !important;
    margin-left: auto !important;
    margin-right: auto !important;
    border-left: 1px solid rgba(255, 255, 255, 0.07) !important;
    border-right: 1px solid rgba(255, 255, 255, 0.07) !important;
    box-shadow: 0 0 100px rgba(0, 0, 0, 0.5) !important;
  }

  body.desktop-layout .nav,
  body.desktop-layout #nav,
  html.desktop-layout body .nav,
  html.desktop-layout body #nav {
    max-width: min(430px, 100vw) !important;
    width: min(430px, 100vw) !important;
    left: 50% !important;
    right: auto !important;
    transform: translate3d(-50%, 0, 0) !important;
  }

  /* Full-width content inside desktop shell */
  body.desktop-layout .content,
  body.desktop-layout #content,
  body.desktop-layout .page,
  body.desktop-layout .page.active,
  body.desktop-layout .page-content,
  body.desktop-layout .search-page,
  body.desktop-layout .search-scroll,
  body.desktop-layout #searchScroll,
  body.desktop-layout .search-sticky,
  body.desktop-layout #searchSticky,
  body.desktop-layout .header,
  body.desktop-layout #appHeader,
  body.desktop-layout .header-title-slot {
    max-width: none !important;
    width: 100% !important;
  }

  body.desktop-layout .page-content {
    padding-left: 28px !important;
    padding-right: 28px !important;
  }

  /* Genre grid: more columns on desktop */
  body.desktop-layout .genre-grid,
  body.desktop-layout #genreGrid {
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 14px !important;
  }
  body.desktop-layout .genre-tile {
    aspect-ratio: 1.4 / 1 !important;
  }
  body.desktop-layout .genre-tile .genre-label {
    font-size: 1rem !important;
  }

  /* Track lists full width */
  body.desktop-layout .list,
  body.desktop-layout #searchList,
  body.desktop-layout #likedList,
  body.desktop-layout #plTracks,
  body.desktop-layout #upList,
  body.desktop-layout .hist,
  body.desktop-layout #histList,
  body.desktop-layout #recognizeHistList,
  body.desktop-layout .track {
    max-width: none !important;
    width: 100% !important;
  }

  body.desktop-layout .chips-wrap,
  body.desktop-layout .chips,
  body.desktop-layout #plChips,
  body.desktop-layout .genre-section,
  body.desktop-layout #genreSection,
  body.desktop-layout #searchHistoryContainer,
  body.desktop-layout .profile-card,
  body.desktop-layout .sessions-section {
    max-width: none !important;
    width: 100% !important;
  }

  body.desktop-layout .sheet,
  body.desktop-layout .queue-panel {
    max-width: none !important;
    width: 100% !important;
    left: 0 !important;
    right: 0 !important;
    margin: 0 !important;
  }

  body.desktop-layout .sheet .sheet-card,
  body.desktop-layout .sheet-card,
  body.desktop-layout .sheet:not(.hidden) .sheet-card,
  body.desktop-layout .sheet:not(.hidden) .more-sheet-card,
  body.desktop-layout .queue-panel-card {
    max-width: 560px !important;
    width: 100% !important;
  }

  body.desktop-layout .cover-box {
    width: min(32vw, 360px) !important;
  }

  body.desktop-layout .player-dock,
  body.desktop-layout .meta-block {
    max-width: 520px !important;
  }

  body.desktop-layout #page-player .page-content.player-page {
    max-width: none !important;
  }

  body.desktop-layout .search-row,
  body.desktop-layout #form-search {
    max-width: none !important;
    width: 100% !important;
  }

  body.desktop-layout .header-logo-row {
    padding-left: 28px !important;
    padding-right: 28px !important;
  }
}

/* Hard safety: mobile / TG keep 430 */
body.is-mobile-ua #app,
body.tg-client #app {
  max-width: 430px !important;
  width: 100% !important;
}
body.is-mobile-ua .nav,
body.is-mobile-ua #nav,
body.tg-client .nav,
body.tg-client #nav {
  max-width: 406px !important;
}

/* Recognize search button: no glow burst */
.search-recognize .btn-glow-burst,
button.search-recognize .btn-glow-burst,
#btn-recognize .btn-glow-burst {
  display: none !important;
  animation: none !important;
  opacity: 0 !important;
}
.search-recognize.pressed,
button.search-recognize.pressed,
#btn-recognize.pressed {
  transform: none !important;
}


/* ==========================================================================
   Recognize overlay — FIXED circle position for listening / failed / found
   Tail + retry fade in only; they never reflow or push the circle.
   ========================================================================== */
.recognize-overlay:not(.hidden) {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: stretch !important;
}

.recognize-overlay .recognize-stage {
  position: relative !important;
  flex: 1 1 auto !important;
  width: 100% !important;
  max-width: 340px !important;
  margin: 0 auto !important;
  min-height: 0 !important;
  /* NOT a flex column — absolute children only, no reflow */
  display: block !important;
  padding: 0 !important;
  gap: 0 !important;
}

/* Circle always at the same vertical anchor (slightly above true center) */
.recognize-overlay .listener {
  position: absolute !important;
  left: 50% !important;
  top: 38% !important;
  transform: translate(-50%, -50%) !important;
  width: 220px !important;
  height: 220px !important;
  margin: 0 !important;
  flex: none !important;
  z-index: 2 !important;
}

.recognize-overlay .core {
  /* keep optical center identical (no permanent scale offset) */
  transform: none;
}
.recognize-overlay .core.found {
  transform: none !important;
}
/* failed: allow recShake keyframes (uses transform) — do NOT force transform:none */
.recognize-overlay .core.failed {
  /* transform controlled by animation: recShake */
}

/* Status / title / artist / retry — fixed band directly under the circle */
.recognize-overlay .recognize-copy {
  position: absolute !important;
  left: 50% !important;
  top: 38% !important;
  /* listener half-height (110) + gap (18) = 128px below center anchor */
  transform: translate(-50%, 128px) !important;
  width: 100% !important;
  max-width: 320px !important;
  margin: 0 !important;
  padding: 0 !important;
  text-align: center !important;
  /* fixed box so text appearing cannot change layout height of stage */
  height: 150px !important;
  box-sizing: border-box !important;
  z-index: 2 !important;
  overflow: visible !important;
}

.recognize-overlay .status {
  min-height: 22px !important;
  margin: 0 !important;
}

.recognize-overlay .title {
  min-height: 26px !important;
  margin-top: 6px !important;
  /* keep space even when empty / opacity 0 */
  max-height: 26px !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

.recognize-overlay .artist {
  min-height: 20px !important;
  margin-top: 4px !important;
  max-height: 20px !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

.recognize-overlay .hint {
  min-height: 0 !important;
  max-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
  opacity: 0 !important;
}

/* Retry: always occupies the same slot; only opacity changes */
.recognize-overlay .rec-retry-slot {
  width: 100% !important;
  height: 56px !important;
  min-height: 56px !important;
  max-height: 56px !important;
  margin-top: 10px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  pointer-events: none !important;
}

.recognize-overlay .recognize-retry {
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
  transform: none !important;
  transition: opacity .35s ease !important;
}

.recognize-overlay .recognize-retry.show {
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
  transform: none !important;
}

.rec-retry-slot:has(.recognize-retry.show) {
  pointer-events: auto !important;
}

/* Music tail: pinned to bottom of stage — never affects circle/copy */
.recognize-overlay .rec-tail-slot {
  position: absolute !important;
  left: 50% !important;
  bottom: 4px !important;
  transform: translateX(-50%) !important;
  width: 100% !important;
  max-width: 320px !important;
  height: 72px !important;
  min-height: 72px !important;
  margin: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  pointer-events: none !important;
  z-index: 3 !important;
}

.recognize-overlay .rec-track-tail {
  margin: 0 !important;
  width: 100% !important;
  max-width: 320px !important;
  /* visibility only */
  transition: opacity .35s ease !important;
}

.recognize-overlay .rec-track-tail.hidden {
  display: flex !important;
  opacity: 0 !important;
  pointer-events: none !important;
  visibility: hidden !important;
}

.recognize-overlay .rec-track-tail.show {
  display: flex !important;
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
}

.recognize-overlay .rec-tail-slot .rec-track-tail.show {
  pointer-events: auto !important;
}

/* Cancel stays at bottom of overlay (outside stage) — unchanged */
.recognize-overlay .recognize-cancel {
  flex: 0 0 auto !important;
  position: relative !important;
  z-index: 4 !important;
}

/* Paired modal buttons: pure HTML order = Cancel left, action right */
.sheet-actions {
  display: flex !important;
  flex-direction: row !important;
  direction: ltr !important;
  gap: 10px !important;
  width: 100% !important;
}
.sheet-actions > .btn-close,
.sheet-actions > .btn-confirm,
.sheet-actions > .btn-danger {
  order: 0 !important; /* reset any leftover order so DOM order wins */
}

/* NUCLEAR: Cancel left / action right — beat every order:999 that targeted .btn-close */
body:not(.tg-client) .sheet .sheet-actions > .btn-close,
body:not(.tg-client) .sheet:not(.hidden) .sheet-actions > .btn-close,
.sheet-actions > .btn-close {
  order: 0 !important;
  width: auto !important;
  max-width: none !important;
  margin: 0 !important;
  flex: 1 1 0 !important;
}
body:not(.tg-client) .sheet .sheet-actions > .btn-confirm,
body:not(.tg-client) .sheet .sheet-actions > .btn-danger,
body:not(.tg-client) .sheet:not(.hidden) .sheet-actions > .btn-confirm,
body:not(.tg-client) .sheet:not(.hidden) .sheet-actions > .btn-danger,
.sheet-actions > .btn-confirm,
.sheet-actions > .btn-danger {
  order: 0 !important;
  width: auto !important;
  max-width: none !important;
  margin: 0 !important;
  flex: 1 1 0 !important;
}


/* Play icon position: play stays at +2px; pause only shifts 2px left */
#btn-play img.ico,
#playIco,
.cbtn.main img.ico {
  transform: translateX(2px) !important;
}
.cbtn.main.is-playing img.ico,
.cbtn.main.is-playing #playIco,
#btn-play.is-playing img.ico {
  transform: translateX(0) !important; /* 2px left vs play */
}

/* Light theme: pause icon ALWAYS white (never black flash) */
html[data-theme="light"] .cbtn.main.is-playing img.ico,
html[data-theme="light"] .cbtn.main.is-playing #playIco,
html[data-theme="light"] #btn-play.is-playing img.ico,
html[data-theme="light"] #btn-play.is-playing #playIco {
  filter: brightness(0) invert(1) !important;
  transition: none !important;
  opacity: 1 !important;
}
html[data-theme="light"] .cbtn.main.is-paused #playIco,
html[data-theme="light"] .cbtn.main:not(.is-playing) #playIco {
  transition: none !important;
}
/* Kill any transition on the play/pause icon that causes black→white flash */
html[data-theme="light"] #playIco,
html[data-theme="light"] #btn-play img.ico,
html[data-theme="light"] .cbtn.main img.ico {
  transition: none !important;
}

/* More menu: hide Download (UI only — backend kept) */
#more-download,
.more-item#more-download {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
  height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
}


/* ==========================================================================
   Sleep timer overlay
   ========================================================================== */
.sleep-timer-overlay {
  position: fixed;
  inset: 0;
  z-index: 1200;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: stretch;
  background: rgba(0, 0, 0, 0.72);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
  backdrop-filter: blur(18px) saturate(140%);
  color: #F1F0FF;
  padding: 0;
  /* bottom inset handled by .sleep-actions (same as recognize Cancel) */
  padding-bottom: var(--sleep-kb, 0px);
  box-sizing: border-box;
  pointer-events: auto;
  transition: padding-bottom 0.2s ease;
}
.sleep-timer-overlay.hidden {
  display: none !important;
  pointer-events: none !important;
  visibility: hidden !important;
}
/* Keyboard open: only the minute input stays visible above the keyboard */
.sleep-timer-overlay.kb-open .sleep-stars,
.sleep-timer-overlay.kb-open .sleep-ring-wrap,
.sleep-timer-overlay.kb-open .sleep-section-label,
.sleep-timer-overlay.kb-open .sleep-chips,
.sleep-timer-overlay.kb-open .sleep-actions,
.sleep-timer-overlay.kb-open .sleep-timer-x {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
  opacity: 0 !important;
}
.sleep-timer-overlay.kb-open .sleep-timer-stage,
.sleep-timer-overlay.kb-open .sleep-timer-body {
  display: flex !important;
  flex-direction: column !important;
  justify-content: flex-end !important;
  flex: 1 1 auto !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 22px 12px !important;
}
.sleep-timer-overlay.kb-open .sleep-duration-controls {
  display: block !important;
  margin: 0 !important;
  padding: 0 !important;
  max-height: none !important;
  opacity: 1 !important;
  overflow: visible !important;
  pointer-events: auto !important;
  flex: 0 0 auto !important;
}
.sleep-timer-overlay.kb-open .sleep-stepper {
  margin: 0 !important;
  width: 100%;
}

html[data-theme="light"] .sleep-timer-overlay {
  background: rgba(255, 255, 255, 0.72);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
  backdrop-filter: blur(18px) saturate(140%);
  color: #16232B;
}

.sleep-timer-stage {
  position: relative;
  flex: 1 1 auto;
  width: 100%;
  max-width: 430px;
  margin: 0 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.sleep-stars {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
}
.sleep-stars .star {
  position: absolute;
  width: 2px;
  height: 2px;
  background: #fff;
  border-radius: 50%;
  opacity: 0.5;
  animation-name: sleepTwinkle;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
}
@keyframes sleepTwinkle {
  0%, 100% { opacity: 0.1; transform: scale(0.8); }
  50% { opacity: 0.9; transform: scale(1.15); }
}

.sleep-timer-body {
  position: relative;
  z-index: 1;
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  padding: 28px 22px 8px;
  min-height: 0;
  overflow: hidden;
}

.sleep-ring-wrap {
  margin: 18px auto 8px;
  position: relative;
  width: min(252px, 68vw);
  height: min(252px, 68vw);
  flex-shrink: 0;
  transition: transform .65s cubic-bezier(.34,.06,.24,1);
  transform: translateY(24px);
}
/* ring shifts further down while running or done — returns only on reset */
.sleep-timer-overlay.is-running .sleep-ring-wrap,
.sleep-timer-overlay.is-done .sleep-ring-wrap {
  transform: translateY(96px); /* idle 24 + previous 48 + extra 24 */
}
.sleep-ring-svg {
  width: 100%;
  height: 100%;
  transform: rotate(-90deg);
  display: block;
}
/* track (empty circle) — more visible in light theme */
.sleep-ring-svg > circle:first-of-type {
  stroke: rgba(255, 255, 255, 0.12);
}
html[data-theme="light"] .sleep-ring-svg > circle:first-of-type {
  stroke: rgba(100, 116, 139, 0.45);
}
.sleep-ring-center {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  pointer-events: none;
  overflow: visible;
}
.sleep-time-readout {
  font-weight: 700;
  font-size: clamp(2.2rem, 10vw, 3.2rem);
  color: #F1F0FF;
  line-height: 1;
  letter-spacing: 0.5px;
  font-variant-numeric: tabular-nums;
}
html[data-theme="light"] .sleep-time-readout { color: #16232B; }

.sleep-face {
  display: none;
  position: relative;
  align-items: center;
  justify-content: center;
  width: 116px;
  height: 116px;
  overflow: visible;
}
.sleep-face-img {
  width: 116px;
  height: 116px;
  object-fit: contain;
  /* dark theme: sky blue */
  filter: brightness(0) saturate(100%) invert(72%) sepia(42%) saturate(1200%) hue-rotate(175deg) brightness(105%) contrast(98%);
  display: block;
}
html[data-theme="light"] .sleep-face-img {
  /* light theme: pure black */
  filter: brightness(0);
}
.sleep-zzz {
  position: absolute;
  /* top-right corner of the face, rising upward */
  top: -4px;
  left: auto;
  right: -6px;
  width: 52px;
  height: 96px;
  pointer-events: none;
  overflow: visible;
}
.sleep-zzz .z {
  position: absolute;
  left: 0;
  top: 0;
  font-weight: 800;
  color: #7dd3fc;
  text-shadow: 0 0 12px rgba(125, 211, 252, 0.55);
  opacity: 0;
  animation: sleepFloatZ 2.4s ease-out infinite;
  will-change: transform, opacity;
}
.sleep-zzz .z1 { font-size: 16px; left: 0;  animation-delay: 0s; }
.sleep-zzz .z2 { font-size: 20px; left: 10px; animation-delay: 0.8s; }
.sleep-zzz .z3 { font-size: 26px; left: 18px; animation-delay: 1.6s; }
html[data-theme="light"] .sleep-zzz .z {
  color: #000000;
  text-shadow: none;
}
/* rise + fade out; staggered so a new Z appears as the top one fades */
@keyframes sleepFloatZ {
  0%   { opacity: 0;    transform: translate(0, 0) scale(0.7) rotate(-10deg); }
  15%  { opacity: 1;    transform: translate(4px, -12px) scale(0.9) rotate(-8deg); }
  60%  { opacity: 0.7;  transform: translate(10px, -42px) scale(1.08) rotate(-4deg); }
  100% { opacity: 0;    transform: translate(14px, -70px) scale(1.2) rotate(-2deg); }
}

.sleep-timer-overlay.is-done .sleep-time-readout { display: none; }
.sleep-timer-overlay.is-done .sleep-face { display: flex; }
.sleep-timer-overlay.is-done .sleep-ring-wrap {
  animation: sleepPulseDone 1.6s ease-in-out infinite;
}
@keyframes sleepPulseDone {
  0%, 100% { filter: drop-shadow(0 0 0 rgba(125, 211, 252, 0)); }
  50% { filter: drop-shadow(0 0 18px rgba(125, 211, 252, 0.4)); }
}

.sleep-section-label {
  font-size: 12px;
  color: #8A8FB3;
  margin: 10px 0 8px 2px;
}
.sleep-duration-controls > .sleep-section-label:first-child {
  margin-top: 0;
}
html[data-theme="light"] .sleep-section-label { color: #7C8D97; }
.sleep-chips {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 9px;
}
.sleep-chip {
  padding: 11px 0;
  border-radius: 14px;
  background: rgba(255,255,255,0.08);
  border: none;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.18);
  color: #F1F0FF;
  font-size: 13.5px;
  font-weight: 500;
  cursor: pointer;
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  transition: background .18s ease, box-shadow .18s ease, transform .12s ease;
}
html[data-theme="light"] .sleep-chip {
  background: rgba(255,255,255,0.55);
  color: #16232B;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,0.08);
}
.sleep-chip:active { transform: scale(0.96); }
.sleep-chip.active {
  background: linear-gradient(135deg, #0B3D91, #5EC5FF);
  box-shadow: none;
  color: #0B0E1F;
  font-weight: 700;
}

.sleep-stepper {
  margin-top: 4px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: rgba(255,255,255,0.08);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.18);
  border-radius: 16px;
  padding: 6px;
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}
html[data-theme="light"] .sleep-stepper {
  background: rgba(255,255,255,0.55);
  box-shadow: inset 0 0 0 1px rgba(0,0,0,0.08);
}
.sleep-step-btn {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  border: none;
  background: rgba(255,255,255,0.06);
  color: #F1F0FF;
  font-size: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
html[data-theme="light"] .sleep-step-btn { color: #16232B; }
.sleep-step-btn:active { transform: scale(0.92); background: rgba(255,255,255,0.12); }
.sleep-step-display {
  flex: 1;
  text-align: center;
  color: #F1F0FF;
  font-weight: 600;
  font-size: 15px;
  border: none;
  background: transparent;
  outline: none;
  width: 100%;
  -moz-appearance: textfield;
}
html[data-theme="light"] .sleep-step-display { color: #16232B; }
.sleep-step-display::-webkit-outer-spin-button,
.sleep-step-display::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

.sleep-duration-controls {
  overflow: visible;
  max-height: 520px;
  opacity: 1;
  transition: max-height .5s cubic-bezier(.4,0,.2,1), opacity .35s ease;
  flex-shrink: 0;
  min-height: 0;
  /* sit near the Start button (bottom of stage), not under the ring */
  margin-top: auto;
  margin-bottom: 4px;
  padding-bottom: 4px;
}
/* hide duration while running OR finished — only reset brings them back */
.sleep-timer-overlay.is-running .sleep-duration-controls,
.sleep-timer-overlay.is-done .sleep-duration-controls {
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  pointer-events: none;
}

.sleep-actions {
  flex: 0 0 auto;
  position: relative;
  z-index: 4;
  width: min(100%, 340px);
  max-width: 340px;
  margin: 18px auto 0;
  padding: 0;
  /* same bottom placement as recognize Cancel */
  padding-bottom: calc(14px + env(safe-area-inset-bottom, 0px));
  box-sizing: border-box;
}
.sleep-primary-btn {
  width: 100%;
  padding: 17px 0;
  border-radius: 18px;
  border: none;
  font-weight: 700;
  font-size: 15.5px;
  color: #ffffff !important;
  background: linear-gradient(135deg, #0B3D91, #5EC5FF);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  box-shadow: 0 12px 30px rgba(94,197,255,0.28);
}
.sleep-primary-btn #sleepPlayIcon,
.sleep-primary-btn #sleepPlayLabel {
  color: #ffffff !important;
}
.sleep-primary-btn:active { transform: scale(0.98); }
.sleep-primary-btn.is-running {
  /* same solid gradient as Start — only label changes to Pause */
  background: linear-gradient(135deg, #0B3D91, #5EC5FF);
  color: #ffffff !important;
  box-shadow: 0 12px 30px rgba(94,197,255,0.28);
  border: none;
}
.sleep-primary-btn.is-running #sleepPlayIcon,
.sleep-primary-btn.is-running #sleepPlayLabel {
  color: #ffffff !important;
}
.sleep-secondary-row {
  display: flex;
  justify-content: center;
  gap: 18px;
  margin: 0 0 10px;
  min-height: 28px;
}
.sleep-ghost-btn {
  background: none;
  border: none;
  color: #8A8FB3;
  font-size: 13px;
  cursor: pointer;
  padding: 6px 4px;
}
html[data-theme="light"] .sleep-ghost-btn { color: #7C8D97; }
.sleep-ghost-btn:active { color: #F1F0FF; }
html[data-theme="light"] .sleep-ghost-btn:active { color: #16232B; }
.sleep-ghost-btn.hidden { visibility: hidden; pointer-events: none; }

/* top-right close (delete.png) */
.sleep-timer-x {
  position: absolute;
  top: calc(10px + env(safe-area-inset-top, 0px));
  right: 14px;
  z-index: 6;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,0.18);
  background: rgba(255,255,255,0.10);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0;
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
}
.sleep-timer-x img.ico {
  width: 20px;
  height: 20px;
  filter: brightness(0) invert(1);
  display: block;
  pointer-events: none;
}
.sleep-timer-x:active { transform: scale(0.94); }
html[data-theme="light"] .sleep-timer-x {
  background: rgba(255,255,255,0.65);
  border-color: rgba(0,0,0,0.1);
}
html[data-theme="light"] .sleep-timer-x img.ico {
  filter: brightness(0);
}




/* === Splash continuity (logo stays: loading uses same full splash image) === */
#view-loading.view-loading,
#app.boot-loading #view-loading.view-loading:not(.hidden),
body:not(.tg-client) #app.boot-loading #view-loading.view-loading:not(.hidden) {
  background-color: #05050a !important;
  background-image: none !important;
}
html[data-theme="light"] #view-loading.view-loading,
html[data-theme="light"] #app.boot-loading #view-loading.view-loading:not(.hidden),
html[data-theme="light"] body:not(.tg-client) #app.boot-loading #view-loading.view-loading:not(.hidden) {
  background-color: #f5f5f7 !important;
}
#view-loading .load-logo,
.view-loading .load-logo {
  opacity: 1 !important;
  display: block !important;
  visibility: visible !important;
}
#view-loading .load-stage,
.view-loading .load-stage {
  width: 56vmin !important;
  height: 56vmin !important;
}


/* Loading logo FINAL — always visible, same as splash size */
#view-loading .load-stage {
  position: relative !important;
  width: 56vmin !important;
  height: 56vmin !important;
}
#view-loading .load-logo {
  position: absolute !important;
  left: 50% !important;
  top: 50% !important;
  width: 100% !important;
  height: 100% !important;
  transform: translate(-50%, -50%) !important;
  object-fit: contain !important;
  opacity: 1 !important;
  visibility: visible !important;
  display: block !important;
  margin: 0 !important;
  border-radius: 0 !important;
}
#view-loading .load-below {
  position: absolute !important;
  top: 100% !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  margin-top: 22px !important;
}

/* === Loading matches splash: solid app-theme bg + single centered logo === */
#view-loading.view-loading,
#app.boot-loading #view-loading.view-loading:not(.hidden) {
  background-color: #05050a !important;
  background-image: none !important;
}
html[data-theme="light"] #view-loading.view-loading,
html[data-theme="light"] #app.boot-loading #view-loading.view-loading:not(.hidden) {
  background-color: #f5f5f7 !important;
  background-image: none !important;
}
#view-loading .load-stage {
  position: relative !important;
  /* size set in px by JS to match splash 0.56 * min(innerW,innerH) */
  width: 56vmin;
  height: 56vmin;
}
#view-loading .load-logo {
  position: absolute !important;
  left: 50% !important;
  top: 50% !important;
  transform: translate(-50%, -50%) !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  opacity: 1 !important;
  visibility: visible !important;
  display: block !important;
  margin: 0 !important;
  border-radius: 0 !important;
}
#view-loading .load-below {
  position: absolute !important;
  top: 100% !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  margin-top: 22px !important;
}


/* Hide header logo + title text (iOS 27 Safari blur bug) — keep header layout/spacing */
.header-logo-row .logo-img,
.header-logo-row .logo-text,
.header .logo-img,
.header .logo-text,
.header-logo-row .logo-mark {
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
  /* keep box size so header height/spacing does not shift */
}

/* iOS logo/title crisp — no CSS filter on logo (filter = soft blur on WebKit) */
@supports (-webkit-touch-callout: none) {
  .header-logo-row {
    isolation: isolate;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
  .header .logo-img,
  .logo-img,
  .auth-gate-logo,
  .view-empty .big-logo-img {
    filter: none !important;
    -webkit-filter: none !important;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
  }
  .header .logo-text,
  .logo-text,
  .auth-gate-title,
  .view-empty h1 {
    -webkit-font-smoothing: subpixel-antialiased;
    text-rendering: geometricPrecision;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    filter: none !important;
  }
}


/* ========== Auth gate redesign: Telegram login + code ========== */
.auth-tg-btn {
  width: 100%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 14px 18px;
  border-radius: 14px;
  border: none;
  cursor: pointer;
  font-weight: 700;
  font-size: 0.98rem;
  color: #fff;
  background: linear-gradient(135deg, #2AABEE 0%, #229ED9 100%);
  box-shadow: 0 10px 28px rgba(34, 158, 217, 0.35);
  transition: transform 0.12s ease, box-shadow 0.15s ease;
}
.auth-tg-btn:active { transform: scale(0.98); }
.auth-tg-ico { flex-shrink: 0; }
.auth-tg-block { margin: 0 0 14px; }
.auth-tg-widget-host {
  margin-top: 10px;
  min-height: 0;
  display: flex;
  justify-content: center;
}
.auth-tg-widget-host:empty { display: none; }
.auth-or-row {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 4px 0 14px;
  color: rgba(180, 190, 210, 0.55);
  font-size: 0.78rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.auth-or-row::before,
.auth-or-row::after {
  content: "";
  flex: 1;
  height: 1px;
  background: rgba(255,255,255,0.12);
}
.auth-link-btn {
  width: 100%;
  border: 1px solid rgba(255,255,255,0.12);
  background: rgba(255,255,255,0.05);
  color: rgba(230, 220, 240, 0.9);
  font-size: 0.88rem;
  font-weight: 600;
  padding: 12px 14px;
  cursor: pointer;
  border-radius: 14px;
  text-decoration: none;
  transition: background 0.2s ease, border-color 0.2s ease, transform 0.15s ease;
}
.auth-link-btn:hover {
  background: rgba(255,255,255,0.09);
  border-color: rgba(255,255,255,0.2);
}
.auth-link-btn:active { transform: scale(0.98); }
.auth-link-btn.hidden { display: none !important; }
.auth-code-panel {
  overflow: hidden;
  max-height: 280px;
  opacity: 1;
  transform: translateY(0);
  transition:
    max-height 0.55s cubic-bezier(0.22, 1, 0.36, 1),
    opacity 0.4s ease,
    transform 0.45s cubic-bezier(0.22, 1, 0.36, 1),
    margin 0.4s ease;
}
.auth-code-panel.collapsed {
  max-height: 0 !important;
  opacity: 0;
  transform: translateY(-12px);
  margin: 0 !important;
  pointer-events: none;
}
.auth-code-panel.code-opening {
  animation: codePanelReveal 0.6s cubic-bezier(0.22, 1, 0.36, 1) both;
}
@keyframes codePanelReveal {
  0%   { opacity: 0; transform: translateY(-16px) scale(0.96); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}
.auth-gate-otp {
  cursor: pointer;
  user-select: none;
  -webkit-user-select: none;
  border-radius: 12px;
  padding: 6px 4px;
  transition: background 0.15s ease;
}
.auth-gate-otp:active {
  background: rgba(255,255,255,0.06);
}
.auth-copy-hint {
  font-weight: 500;
  text-transform: none;
  letter-spacing: 0;
  opacity: 0.65;
  margin-left: 6px;
  font-size: 0.7rem;
}
/* Desktop: code first — reorder with flex */
#auth-gate-otp-panel.auth-otp-panel {
  display: flex;
  flex-direction: column;
  align-items: stretch;
}
#auth-gate-otp-panel:not(.auth-layout-mobile) .auth-code-block { order: 1; }
#auth-gate-otp-panel:not(.auth-layout-mobile) .auth-or-row { order: 2; }
#auth-gate-otp-panel:not(.auth-layout-mobile) .auth-tg-block { order: 3; }
#auth-gate-otp-panel:not(.auth-layout-mobile) .auth-gate-status { order: 4; }
/* Mobile web app: Telegram first (DOM order already), keep code under "or" */
#auth-gate-otp-panel.auth-layout-mobile .auth-tg-block { order: 1; }
#auth-gate-otp-panel.auth-layout-mobile .auth-or-row { order: 2; }
#auth-gate-otp-panel.auth-layout-mobile .auth-code-block { order: 3; }
#auth-gate-otp-panel.auth-layout-mobile .auth-gate-status { order: 4; }

html[data-theme="light"] .auth-tg-btn {
  box-shadow: 0 10px 28px rgba(34, 158, 217, 0.28);
}
html[data-theme="light"] .auth-or-row { color: rgba(80, 90, 110, 0.55); }
html[data-theme="light"] .auth-or-row::before,
html[data-theme="light"] .auth-or-row::after { background: rgba(0,0,0,0.1); }
html[data-theme="light"] .auth-link-btn { color: rgba(40, 30, 50, 0.85); background: rgba(0,0,0,0.04); border-color: rgba(0,0,0,0.08); }

/* Telegram mini-app only: page titles (non-player) sit 34px lower — player/web unchanged */
body.tg-client #app.is-list-page .header-logo-row {
  padding-top: max(0px, calc(env(safe-area-inset-top, 0px) + 6px + 1px + 34px)) !important;
  min-height: max(0px, calc(env(safe-area-inset-top, 0px) + 6px + 1px + 34px)) !important;
}


/* ========== Artist / Album pages ========== */
.list-section-title {
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted);
  padding: 10px 4px 6px;
  margin: 4px 0 2px;
}

/* Circle back/close — always white icons (light + dark) */
.circle-nav-btn {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,0.28) !important;
  background: rgba(0,0,0,0.38) !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  cursor: pointer;
  -webkit-backdrop-filter: blur(14px) saturate(160%);
  backdrop-filter: blur(14px) saturate(160%);
  box-shadow:
    0 6px 16px rgba(0,0,0,0.35),
    inset 0 1px 0 rgba(255,255,255,0.22);
  z-index: 8;
}
.circle-nav-btn img.ico {
  width: 18px;
  height: 18px;
  filter: brightness(0) invert(1) !important;
  opacity: 1 !important;
  pointer-events: none;
}
.circle-nav-btn:active { transform: scale(0.94); }

html[data-theme="light"] .circle-nav-btn,
html[data-theme="light"] #page-artist .circle-nav-btn,
html[data-theme="light"] #page-album .circle-nav-btn {
  border: 1px solid rgba(255,255,255,0.28) !important;
  background: rgba(0,0,0,0.38) !important;
}
html[data-theme="light"] .circle-nav-btn img.ico {
  filter: brightness(0) invert(1) !important;
}

/* Search results / non-genre: hide nav */
#app.search-results-open #nav,
#app.search-results-open .nav {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
}


/* Hide app header + nav while artist/album open */
#app.artist-page-open .header,
#app.album-page-open .header {
  display: none !important;
  height: 0 !important;
  min-height: 0 !important;
  overflow: hidden !important;
  padding: 0 !important;
  margin: 0 !important;
}
#app.artist-page-open #nav,
#app.album-page-open #nav {
  display: none !important;
  pointer-events: none !important;
}

/* ---- Artist page ---- */
#page-artist.page {
  background: transparent !important;
  width: 100% !important;
}
#page-artist.page.has-artist-ambient {
  background:
    radial-gradient(120% 70% at 50% -5%, var(--artist-amb-a, transparent) 0%, transparent 70%),
    radial-gradient(80% 50% at 10% 90%, var(--artist-amb-b, transparent) 0%, transparent 65%),
    radial-gradient(70% 45% at 95% 70%, var(--artist-amb-c, transparent) 0%, transparent 60%) !important;
}
#page-artist .artist-page-content {
  padding: 0 !important;
  margin: 0 !important;
  max-width: none !important;
  width: 100% !important;
  height: 100% !important;
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;
  background: transparent !important;
}

.artist-hero {
  flex: 0 0 auto;
  position: relative;
  z-index: 6;
  width: 100%;
  margin-bottom: 0 !important;
  padding-bottom: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}
.artist-cover-wrap {
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1;
  max-height: min(100vw, 400px);
  overflow: visible; /* buttons stick out over list — no ambient strip */
  background: transparent !important;
  box-shadow: none !important;
}
.artist-cover {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  display: block;
  pointer-events: none;
  border-radius: 0 0 18px 18px;
  /* 3D shadow on the IMAGE only */
  box-shadow:
    0 18px 40px rgba(0,0,0,0.5),
    0 6px 16px rgba(0,0,0,0.28);
}
.artist-cover-shade {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  border-radius: 0 0 18px 18px;
  pointer-events: none;
  /* soft dark only over the photo for text readability — no solid bar below */
  background: linear-gradient(
    180deg,
    rgba(0,0,0,0.45) 0%,
    rgba(0,0,0,0.05) 30%,
    rgba(0,0,0,0.15) 58%,
    rgba(0,0,0,0.72) 100%
  );
  z-index: 1;
}

.artist-back-btn,
.artist-close-btn {
  position: absolute;
  top: max(14px, calc(env(safe-area-inset-top, 0px) + 12px));
  z-index: 8;
}
.artist-back-btn { left: 14px; }
.artist-close-btn { right: 14px; }

.artist-cover-bottom {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 4;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 14px 14px; /* name stays ON the image */
  background: transparent !important; /* no black bar */
  border-radius: 0;
  pointer-events: none;
  transform: none;
}
.artist-cover-meta {
  min-width: 0;
  flex: 1;
  text-align: left;
  transform: none;
  padding-bottom: 28px; /* lift name/count above bottom edge, stay on photo */
  margin-bottom: 0;
  pointer-events: none;
}
.artist-name {
  font-size: 1.55rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.15;
  color: #fff;
  text-shadow: 0 2px 10px rgba(0,0,0,0.7);
  word-break: break-word;
}
.artist-sub {
  margin-top: 4px;
  font-size: 0.82rem;
  font-weight: 650;
  color: rgba(255,255,255,0.9);
  text-shadow: 0 1px 6px rgba(0,0,0,0.6);
}
.artist-cover-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
  pointer-events: auto;
  z-index: 6;
  /* half of buttons hang below the photo edge */
  transform: translateY(50%);
  margin-bottom: 0;
}

/* Share / Fav — same glassy circle, white icons always */
#page-artist .artist-act.act-btn,
#page-album .artist-act.act-btn {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  flex-shrink: 0;
  border: 1px solid rgba(255,255,255,0.28) !important;
  background: rgba(0,0,0,0.38) !important;
  background-image: none !important;
  box-shadow:
    0 8px 20px rgba(0,0,0,0.35),
    inset 0 1px 0 rgba(255,255,255,0.22) !important;
  filter: none !important;
}
#page-artist .artist-act.act-btn img.ico,
#page-album .artist-act.act-btn img.ico {
  filter: brightness(0) invert(1) !important;
  opacity: 1 !important;
}
#page-artist .artist-act.act-btn.on,
#page-album .artist-act.act-btn.on {
  border-color: rgba(255,255,255,0.4) !important;
  background: rgba(0,0,0,0.5) !important;
}
html[data-theme="light"] #page-artist .artist-act.act-btn,
html[data-theme="light"] #page-album .artist-act.act-btn {
  border: 1px solid rgba(255,255,255,0.28) !important;
  background: rgba(0,0,0,0.38) !important;
}
html[data-theme="light"] #page-artist .artist-act.act-btn img.ico,
html[data-theme="light"] #page-album .artist-act.act-btn img.ico {
  filter: brightness(0) invert(1) !important;
}

.artist-play-glass {
  width: 56px !important;
  height: 56px !important;
  border-radius: 50% !important;
  border: 1px solid rgba(255,255,255,0.3) !important;
  background:
    linear-gradient(160deg, rgba(255,255,255,0.36), rgba(255,255,255,0.1)),
    rgba(0,0,0,0.28) !important;
  -webkit-backdrop-filter: saturate(200%) blur(18px) !important;
  backdrop-filter: saturate(200%) blur(18px) !important;
  box-shadow:
    0 10px 28px rgba(0,0,0,0.4),
    inset 0 1px 0 rgba(255,255,255,0.45) !important;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  margin: 0 !important;
  padding: 0 !important;
}
.artist-play-glass img.ico {
  width: 22px;
  height: 22px;
  filter: brightness(0) invert(1) !important;
  margin-left: 2px;
  pointer-events: none;
}
html[data-theme="light"] .artist-play-glass {
  border: 1px solid rgba(255,255,255,0.3) !important;
  background:
    linear-gradient(160deg, rgba(255,255,255,0.36), rgba(255,255,255,0.1)),
    rgba(0,0,0,0.28) !important;
}
html[data-theme="light"] .artist-play-glass img.ico {
  filter: brightness(0) invert(1) !important;
}
.artist-play-glass:active { transform: scale(0.94); }

.artist-body {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  /* nav hidden on this page — only safe-area + small gap under last tile */
  padding: 32px var(--pad, 16px) max(16px, calc(env(safe-area-inset-bottom, 0px) + 12px));
  background: transparent !important;
}

.artist-section-title {
  font-size: 0.95rem;
  font-weight: 700;
  margin: 10px 0 8px;
  padding: 0 2px;
}

.album-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 8px;
}
.album-tile {
  display: grid;
  grid-template-columns: 56px minmax(0, 1fr) 20px;
  gap: 12px;
  align-items: center;
  width: 100%;
  text-align: left;
  padding: 10px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,0.12);
  background: rgba(255,255,255,0.06);
  color: var(--text);
  cursor: pointer;
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
}
.album-tile:active { transform: scale(0.99); }
.album-tile .album-art {
  width: 56px;
  height: 56px;
  border-radius: 10px;
  object-fit: cover;
  background: rgba(255,255,255,0.08);
}
.album-tile .t { min-width: 0; }
.album-tile .n {
  font-weight: 700;
  font-size: 0.92rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.album-tile .a {
  font-size: 0.72rem;
  color: var(--muted);
  margin-top: 3px;
}

/* ---- Album page: cover photo header (half height of artist) ---- */
#page-album.page {
  background: transparent !important;
  width: 100% !important;
  max-width: none !important;
}
#page-album.page.has-artist-ambient {
  background:
    radial-gradient(120% 70% at 50% -5%, var(--artist-amb-a, transparent) 0%, transparent 70%),
    radial-gradient(80% 50% at 10% 90%, var(--artist-amb-b, transparent) 0%, transparent 65%),
    radial-gradient(70% 45% at 95% 70%, var(--artist-amb-c, transparent) 0%, transparent 60%) !important;
}
#page-album .album-page-content {
  display: flex !important;
  flex-direction: column !important;
  height: 100% !important;
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
  background: transparent !important;
  box-sizing: border-box !important;
}

.album-page-header {
  flex: 0 0 auto;
  position: relative;
  z-index: 10;
  width: 100%;
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  border-radius: 0;
  overflow: visible;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}

.album-cover-wrap {
  position: relative;
  width: 100%;
  /* half height of artist cover + 24px */
  aspect-ratio: 2 / 1;
  max-height: min(calc(50vw + 24px), 224px);
  height: min(calc(50vw + 24px), 224px);
  overflow: visible;
  background: transparent !important;
  box-shadow: none !important;
  border-radius: 0 0 18px 18px;
}
.album-cover-full {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top; /* show top of photo, crop bottom */
  display: block;
  pointer-events: none;
  border-radius: 0 0 18px 18px;
  /* 3D shadow on the IMAGE only */
  box-shadow:
    0 18px 40px rgba(0,0,0,0.5),
    0 6px 16px rgba(0,0,0,0.28);
}
.album-cover-shade {
  position: absolute;
  inset: 0;
  border-radius: 0 0 18px 18px;
  pointer-events: none;
  background: linear-gradient(
    180deg,
    rgba(0,0,0,0.45) 0%,
    rgba(0,0,0,0.05) 35%,
    rgba(0,0,0,0.2) 60%,
    rgba(0,0,0,0.72) 100%
  );
  z-index: 1;
}

/* Same top alignment as artist page back/close */
#page-album .artist-back-btn,
#page-album .artist-close-btn {
  position: absolute;
  top: max(14px, calc(env(safe-area-inset-top, 0px) + 12px));
  z-index: 8;
}
#page-album .artist-back-btn { left: 14px; }
#page-album .artist-close-btn { right: 14px; }

.album-cover-bottom {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 4;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 14px 14px;
  background: transparent !important;
  pointer-events: none;
}
.album-cover-meta {
  min-width: 0;
  flex: 1;
  text-align: left;
  /* image + name sit 10px lower on the cover */
  padding-top: 10px;
  padding-bottom: 28px;
  pointer-events: none;
}
.album-name {
  font-size: 0.92rem;
  font-weight: 800;
  line-height: 1.2;
  word-break: break-word;
  color: #fff !important;
  text-shadow: 0 2px 10px rgba(0,0,0,0.7);
}
.album-sub {
  margin-top: 2px;
  font-size: 0.7rem;
  color: rgba(255,255,255,0.9);
  font-weight: 600;
  text-shadow: 0 1px 6px rgba(0,0,0,0.6);
}
.album-header-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
  pointer-events: auto;
  z-index: 6;
  transform: translateY(50%);
}
.album-play-btn {
  width: 52px !important;
  height: 52px !important;
}

.album-track-list {
  flex: 1 1 auto;
  min-height: 0;
  width: 100%;
  overflow-y: auto !important;
  -webkit-overflow-scrolling: touch;
  /* nav hidden on this page — last track near bottom */
  padding: 32px var(--pad, 16px) max(16px, calc(env(safe-area-inset-bottom, 0px) + 12px));
  box-sizing: border-box;
  background: transparent !important;
  -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 12px, #000 100%);
  mask-image: linear-gradient(180deg, transparent 0, #000 12px, #000 100%);
}

#artistAlbumHint[hidden],
#albumHint[hidden] {
  display: none !important;
}


/* ========== Telegram mini app only: artist/album chrome ========== */
/* Back/Close 14px lower than web app */
body.tg-client #page-artist .artist-back-btn,
body.tg-client #page-artist .artist-close-btn,
body.tg-client #page-album .artist-back-btn,
body.tg-client #page-album .artist-close-btn,
body.tg-client #page-album .circle-nav-btn.artist-back-btn,
body.tg-client #page-album .circle-nav-btn.artist-close-btn {
  top: max(38px, calc(env(safe-area-inset-top, 0px) + 36px)) !important;
}

/* Shared artist/album open: never show bottom nav in mini app */
body.tg-client #app.artist-page-open #nav,
body.tg-client #app.album-page-open #nav,
body.tg-client #app.artist-page-open .nav,
body.tg-client #app.album-page-open .nav,
body.tg-client.artist-page-open #nav,
body.tg-client.album-page-open #nav {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
  height: 0 !important;
  min-height: 0 !important;
  max-height: 0 !important;
  overflow: hidden !important;
}



/* Light theme: favorite artist delete = same red glass + white icon as song delete */
html[data-theme="light"] #likedList .track .track-actions .del.icon-act,
html[data-theme="light"] #likedList .artist-fav-row .track-actions .del.icon-act,
html[data-theme="light"] #likedList .track.artist-fav-row .track-actions .del.icon-act,
html[data-theme="light"] .track.artist-fav-row .track-actions .del.icon-act {
  background: linear-gradient(145deg, rgba(220, 50, 50, 0.55), rgba(140, 20, 20, 0.45)) !important;
  border: 1px solid rgba(255, 80, 80, 0.45) !important;
  box-shadow: 0 8px 22px rgba(180, 0, 0, 0.25), inset 0 1px 0 rgba(255,255,255,0.15) !important;
  -webkit-backdrop-filter: saturate(180%) blur(12px) !important;
  backdrop-filter: saturate(180%) blur(12px) !important;
}
html[data-theme="light"] #likedList .track .track-actions .del.icon-act img.ico,
html[data-theme="light"] #likedList .artist-fav-row .track-actions .del.icon-act img.ico,
html[data-theme="light"] #likedList .track.artist-fav-row .track-actions .del.icon-act img.ico,
html[data-theme="light"] .track.artist-fav-row .track-actions .del.icon-act img.ico,
html[data-theme="light"] #likedList .track .track-actions .del.icon-act img,
html[data-theme="light"] .track-actions .del.icon-act img.ico {
  filter: brightness(0) invert(1) !important;
  opacity: 1 !important;
}


/* ========== Premium / remaining (profile) ========== */
.profile-name-row {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 8px;
  flex-wrap: nowrap;
  direction: ltr;
  unicode-bidi: isolate;
}
.profile-name-row .profile-name { order: 0; }
.profile-premium-badge {
  width: 22px;
  height: 22px;
  object-fit: contain;
  flex-shrink: 0;
  order: 1;
  filter: brightness(0) invert(1) !important;
}
html[data-theme="light"] .profile-premium-badge {
  filter: brightness(0) !important;
}
.profile-premium-badge.hidden { display: none !important; }

/* Remaining: LEFT, no bubble, half-line under */
.profile-remaining,
#page-profile .profile-remaining,
#page-profile .profile-card .profile-remaining {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: flex-start !important;
  align-self: stretch !important;
  width: 100% !important;
  max-width: none !important;
  margin: 6px 0 0 0 !important;
  padding: 6px 0 10px 0 !important;
  gap: 6px !important;
  border: none !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
  text-align: left !important;
  direction: ltr !important;
  unicode-bidi: isolate !important;
  border-bottom: 1px solid rgba(255,255,255,0.2) !important;
}
html[data-theme="light"] .profile-remaining,
html[data-theme="light"] #page-profile .profile-remaining {
  border-bottom: 1px solid rgba(0,0,0,0.14) !important;
  background: transparent !important;
}
.profile-remaining.hidden { display: none !important; }
.profile-remaining-ico,
.profile-endless-ico {
  width: 18px;
  height: 18px;
  object-fit: contain;
  flex-shrink: 0;
  filter: brightness(0) invert(1);
}
/* Player page only: endless mode button icon +1px down */
#page-player #btn-endless img.ico {
  position: relative;
  top: 1px;
}
html[data-theme="light"] .profile-remaining-ico,
html[data-theme="light"] .profile-endless-ico {
  filter: brightness(0);
}
.profile-endless-ico.hidden { display: none !important; }
.profile-remaining-text {
  font-weight: 650;
  opacity: 0.92;
  white-space: nowrap;
  text-align: left !important;
}
.profile-remaining-label {
  font-variant-numeric: tabular-nums;
  font-weight: 800;
  letter-spacing: 0.02em;
  text-align: left !important;
}

/* Subscription ended — reuses auth-gate look */
.sub-gate.auth-gate {
  z-index: 99990;
}
.sub-gate .sub-gate-btn,
.sub-gate a.auth-tg-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-top: 14px;
  text-decoration: none;
  color: #fff !important;
}
body.sub-locked #app {
  pointer-events: none;
  filter: blur(2px);
}
/* Only show sub-gate when explicitly sub-locked; hide login gate */
body.sub-locked #sub-gate {
  display: flex !important;
}
body.sub-locked #auth-gate {
  display: none !important;
}
/* Never show both locks at once (auth wins for guests) */
body.auth-locked.sub-locked #sub-gate {
  display: none !important;
}
body.auth-locked.sub-locked #auth-gate {
  display: flex !important;
}


/* Remaining days — full width of profile page content, ALWAYS left */
#page-profile .page-content > .profile-remaining,
#page-profile .profile-remaining {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: flex-start !important;
  width: 100% !important;
  max-width: 100% !important;
  margin: 4px 0 0 0 !important;
  padding: 8px 0 10px 0 !important;
  box-sizing: border-box !important;
  gap: 6px !important;
  border: none !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  text-align: left !important;
  direction: ltr !important;
  unicode-bidi: isolate !important;
  border-bottom: 1px solid rgba(255,255,255,0.2) !important;
  position: relative !important;
  left: 0 !important;
  right: auto !important;
  transform: none !important;
  align-self: stretch !important;
}
html[data-theme="light"] #page-profile .profile-remaining {
  border-bottom: 1px solid rgba(0,0,0,0.14) !important;
}
#page-profile .profile-remaining.hidden { display: none !important; }
#page-profile .profile-remaining * {
  text-align: left !important;
}


/* Banned account gate — same pattern as subscription gate */
.ban-gate.auth-gate {
  z-index: 99991;
}
.ban-gate .ban-gate-btn,
.ban-gate a.auth-tg-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-top: 14px;
  text-decoration: none;
  color: #fff !important;
}
.ban-gate .ban-gate-btn.hidden {
  display: none !important;
}
body.ban-locked #app,
body.ban-locked .nav,
body.ban-locked #nav {
  visibility: hidden !important;
  pointer-events: none !important;
  opacity: 0 !important;
}
body.ban-locked #ban-gate {
  display: flex !important;
}
body.ban-locked #auth-gate,
body.ban-locked #sub-gate {
  display: none !important;
}
/* auth wins only for pure guests */
body.auth-locked.ban-locked #ban-gate {
  display: flex !important;
}
body.auth-locked.ban-locked #auth-gate {
  display: none !important;
}