:root {
  color-scheme: dark;
  --bg: #080a0f;
  --panel: rgba(18, 21, 30, 0.78);
  --panel-strong: #151923;
  --text: #f4f7fb;
  --muted: #8d95a6;
  --line: rgba(255, 255, 255, 0.09);
  --accent: #71e5ff;
  --accent-rgb: 113, 229, 255;
  --accent-2: #9d7cff;
  --danger: #ff6c8b;
  --radius-xl: 30px;
  --safe-bottom: max(22px, env(safe-area-inset-bottom));
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }

html { min-height: 100%; background: var(--bg); }

body {
  margin: 0;
  min-height: 100vh;
  min-height: 100dvh;
  overflow-x: hidden;
  background:
    radial-gradient(circle at 50% -12%, rgba(var(--accent-rgb), 0.14), transparent 38%),
    linear-gradient(180deg, #0c0f16 0%, var(--bg) 72%);
  color: var(--text);
  transition: background 500ms ease;
}

button, input { font: inherit; }
button { color: inherit; }
button:focus-visible, input:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

.ambient {
  position: fixed;
  z-index: 0;
  width: 44vw;
  height: 44vw;
  border-radius: 50%;
  filter: blur(90px);
  opacity: 0.12;
  pointer-events: none;
}
.ambient-one { top: 18%; left: -22vw; background: var(--accent); }
.ambient-two { right: -20vw; bottom: 12%; background: var(--accent-2); }

.app-shell {
  position: relative;
  z-index: 1;
  width: min(100%, 560px);
  min-height: 100dvh;
  margin: 0 auto;
  padding: max(18px, env(safe-area-inset-top)) 18px var(--safe-bottom);
  display: flex;
  flex-direction: column;
}

.topbar {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  min-height: 52px;
  margin-bottom: 16px;
}
.brand-wrap { display: flex; align-items: center; gap: 12px; }
.brand-mark {
  position: relative;
  width: 34px;
  height: 34px;
  border: 1px solid rgba(var(--accent-rgb), 0.42);
  border-radius: 11px;
  background: rgba(var(--accent-rgb), 0.08);
  box-shadow: inset 0 0 20px rgba(var(--accent-rgb), 0.09);
}
.brand-mark::before, .brand-mark::after, .brand-mark span {
  content: "";
  position: absolute;
  bottom: 8px;
  width: 3px;
  border-radius: 99px;
  background: var(--accent);
  box-shadow: 0 0 10px rgba(var(--accent-rgb), 0.6);
}
.brand-mark::before { left: 9px; height: 9px; }
.brand-mark span { left: 15px; height: 16px; }
.brand-mark::after { left: 21px; height: 12px; }
.brand { font-size: 15px; font-weight: 850; letter-spacing: 0.13em; }
.subtitle { margin-top: 2px; color: var(--muted); font-size: 9px; font-weight: 700; letter-spacing: 0.16em; }
.topbar-actions { display: flex; align-items: center; gap: 8px; }
@keyframes rrc24-link-ping {
  0% { transform: scale(.45); opacity: 0; }
  7% { opacity: .68; }
  24% { transform: scale(2.25); opacity: 0; }
  100% { transform: scale(2.25); opacity: 0; }
}

.control-button,
.play-button {
  display: inline-grid;
  place-items: center;
  border: 0;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.player-card {
  display: flex;
  flex-direction: column;
  flex: 0 0 auto;
  padding: 20px;
  border: 1px solid var(--line);
  border-radius: var(--radius-xl);
  background: linear-gradient(180deg, rgba(24, 28, 39, 0.88), rgba(13, 16, 23, 0.84));
  box-shadow: 0 24px 70px rgba(0,0,0,0.34), inset 0 1px rgba(255,255,255,0.04);
  backdrop-filter: blur(24px);
}

.cover-stage {
  position: relative;
  width: clamp(220px, 62vw, 318px);
  max-width: 100%;
  margin: 0 auto;
  isolation: isolate;
}
.cover-halo {
  position: absolute;
  z-index: -1;
  inset: 8% 10% -6%;
  border-radius: 28px;
  background: var(--accent);
  filter: blur(40px);
  opacity: 0.22;
  transition: background 500ms ease;
}
.cover {
  display: block;
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  border-radius: 24px;
  box-shadow: 0 22px 55px rgba(0,0,0,0.42);
  user-select: none;
  -webkit-user-drag: none;
}

.track-copy { margin: 23px 2px 15px; min-height: 78px; }
.cover-stage,
.track-copy {
  will-change: opacity, transform, filter;
}
.player-card.track-transition-out .cover-stage {
  opacity: 0;
  transform: translateY(7px) scale(.975);
  filter: blur(5px) saturate(.72);
  transition: opacity 170ms ease, transform 190ms cubic-bezier(.4,0,1,1), filter 170ms ease;
}
.player-card.track-transition-out .track-copy {
  opacity: 0;
  transform: translateY(9px);
  filter: blur(4px);
  transition: opacity 145ms ease, transform 175ms cubic-bezier(.4,0,1,1), filter 145ms ease;
}
.player-card.track-transition-in .cover-stage {
  animation: ndplay-cover-enter 430ms cubic-bezier(.16,1,.3,1) both;
}
.player-card.track-transition-in .track-copy {
  animation: ndplay-copy-enter 390ms 45ms cubic-bezier(.16,1,.3,1) both;
}
@keyframes ndplay-cover-enter {
  from { opacity: 0; transform: translateY(-7px) scale(1.018); filter: blur(6px) saturate(.8); }
  to { opacity: 1; transform: translateY(0) scale(1); filter: blur(0) saturate(1); }
}
@keyframes ndplay-copy-enter {
  from { opacity: 0; transform: translateY(-7px); filter: blur(4px); }
  to { opacity: 1; transform: translateY(0); filter: blur(0); }
}
.track-context { margin: 0 0 7px; color: var(--accent); font-size: 10px; font-weight: 850; letter-spacing: 0.15em; }
.track-copy h1 { margin: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: clamp(23px, 6vw, 31px); line-height: 1.13; letter-spacing: -0.035em; }
.artist { margin: 7px 0 0; overflow: hidden; color: var(--muted); text-overflow: ellipsis; white-space: nowrap; font-size: 14px; }

.timeline { margin: 0 2px 7px; }
input[type="range"] {
  width: 100%;
  height: 22px;
  margin: 0;
  appearance: none;
  background: transparent;
  cursor: pointer;
}
input[type="range"]::-webkit-slider-runnable-track {
  height: 4px;
  border-radius: 99px;
  background: linear-gradient(90deg, var(--accent) 0 var(--progress, 0%), rgba(255,255,255,0.13) var(--progress, 0%) 100%);
}
input[type="range"]::-webkit-slider-thumb {
  width: 15px;
  height: 15px;
  margin-top: -5.5px;
  appearance: none;
  border: 3px solid #fff;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 14px rgba(var(--accent-rgb), 0.6);
}
input[type="range"]::-moz-range-track { height: 4px; border-radius: 99px; background: rgba(255,255,255,0.13); }
input[type="range"]::-moz-range-progress { height: 4px; border-radius: 99px; background: var(--accent); }
input[type="range"]::-moz-range-thumb { width: 10px; height: 10px; border: 3px solid #fff; border-radius: 50%; background: var(--accent); }
.time-row { display: flex; justify-content: space-between; color: var(--muted); font-size: 11px; font-variant-numeric: tabular-nums; }

.controls {
  display: grid;
  grid-template-columns: 1fr 1fr 1.35fr 1fr 1fr;
  align-items: center;
  gap: 7px;
  margin: 8px 0 8px;
}
.control-button {
  width: 50px;
  height: 50px;
  justify-self: center;
  border-radius: 50%;
  background: transparent;
  transition: transform 150ms ease, background 150ms ease, color 150ms ease;
}
.control-button:hover { background: rgba(255,255,255,0.06); }
.control-button:active, .play-button:active, .flow-button:active { transform: scale(0.95); }
.control-button.secondary { color: var(--muted); }
.control-button[aria-pressed="true"] { color: var(--danger); background: rgba(255,108,139,0.08); }
.control-button svg { width: 24px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.play-button {
  width: 70px;
  height: 70px;
  justify-self: center;
  border-radius: 50%;
  background: var(--text);
  color: #0b0d12;
  box-shadow: 0 12px 36px rgba(0,0,0,0.26), 0 0 28px rgba(var(--accent-rgb), 0.12);
  transition: transform 150ms ease;
}
.play-button svg { width: 30px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
#playIcon { margin-left: 3px; fill: currentColor; stroke: none; }
.play-button .pause-icon { display: none; }
.play-button.is-playing .play-icon { display: none; }
.play-button.is-playing .pause-icon { display: block; }
.like-button .heart-icon { transition: fill 160ms ease, transform 160ms ease, filter 160ms ease; }
.like-button.is-liked { color: var(--danger); background: rgba(255,108,139,0.10); }
.like-button.is-liked .heart-icon { fill: currentColor; filter: drop-shadow(0 0 7px rgba(255,108,139,.45)); transform: scale(1.04); }
.like-button.is-busy .heart-icon { animation: like-pulse 620ms ease-in-out infinite alternate; }
@keyframes like-pulse { to { transform: scale(.82); opacity: .55; } }

.flow-button {
  width: 100%;
  min-height: 72px;
  margin-top: 10px;
  display: grid;
  grid-template-columns: 42px 1fr 24px;
  align-items: center;
  gap: 12px;
  padding: 11px 16px;
  border: 1px solid rgba(var(--accent-rgb), 0.25);
  border-radius: 20px;
  background: linear-gradient(105deg, rgba(var(--accent-rgb), 0.16), rgba(var(--accent-rgb), 0.05));
  color: var(--text);
  text-align: left;
  cursor: pointer;
  box-shadow: inset 0 1px rgba(255,255,255,0.04);
  transition: transform 150ms ease, border-color 150ms ease;
}
.flow-button:hover { border-color: rgba(var(--accent-rgb), 0.48); }
.flow-button strong { display: block; font-size: 13px; letter-spacing: 0.08em; }
.flow-button small { display: block; margin-top: 4px; color: var(--muted); font-size: 11px; }
.flow-button > svg { width: 22px; fill: none; stroke: var(--accent); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.flow-symbol { display: flex; align-items: center; justify-content: center; gap: 3px; height: 32px; }
.flow-symbol i { width: 3px; border-radius: 5px; background: var(--accent); box-shadow: 0 0 10px rgba(var(--accent-rgb),0.5); }
.flow-symbol i:nth-child(1) { height: 12px; }
.flow-symbol i:nth-child(2) { height: 25px; }
.flow-symbol i:nth-child(3) { height: 17px; }
.flow-symbol i:nth-child(4) { height: 8px; }
body.is-playing .flow-symbol i { animation: pulse-bar 900ms ease-in-out infinite alternate; }
body.is-playing .flow-symbol i:nth-child(2) { animation-delay: -500ms; }
body.is-playing .flow-symbol i:nth-child(3) { animation-delay: -250ms; }
body.is-playing .flow-symbol i:nth-child(4) { animation-delay: -700ms; }
@keyframes pulse-bar { to { transform: scaleY(0.45); opacity: 0.55; } }

.status-dot { width: 8px; height: 8px; border-radius: 50%; background: #77e6a0; box-shadow: 0 0 12px rgba(119,230,160,0.6); }

.queue-panel { position: fixed; z-index: 10; inset: 0; visibility: hidden; pointer-events: none; }
.queue-panel.open { visibility: visible; pointer-events: auto; }
.queue-backdrop { position: absolute; inset: 0; width: 100%; border: 0; background: rgba(0,0,0,0.62); opacity: 0; transition: opacity 220ms ease; backdrop-filter: blur(7px); }
.queue-panel.open .queue-backdrop { opacity: 1; }
.queue-sheet {
  position: absolute;
  top: max(calc(var(--safe-top) + 16px), 16px);
  right: 0;
  left: 0;
  width: min(100% - 20px, 620px);
  max-height: min(78dvh, 720px);
  margin: 0 auto;
  padding: 9px 18px 14px;
  overflow: auto;
  border: 1px solid var(--line);
  border-radius: 28px;
  background: #11151e;
  box-shadow: 0 22px 70px rgba(0,0,0,0.56);
  transform: translateY(-112%);
  transition: transform 260ms cubic-bezier(.2,.75,.25,1);
}
.queue-panel.open .queue-sheet { transform: translateY(0); }
.sheet-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.sheet-header p { margin: 0 0 4px; color: var(--accent); font-size: 9px; font-weight: 800; letter-spacing: 0.13em; }
.sheet-header h2 { margin: 0; font-size: 22px; letter-spacing: -0.025em; }
.queue-list { list-style: none; margin: 0; padding: 0; }
.queue-item {
  display: grid;
  grid-template-columns: 48px 1fr auto;
  align-items: center;
  gap: 12px;
  width: 100%;
  min-height: 66px;
  padding: 8px 3px;
  border-bottom: 1px solid var(--line);
}
.queue-item button { display: contents; cursor: pointer; }
.queue-copy { min-width: 0; }
.queue-copy strong, .queue-copy span { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.queue-copy strong { font-size: 13px; }
.queue-copy span { margin-top: 4px; color: var(--muted); font-size: 11px; }
.queue-order { color: var(--muted); font-size: 11px; font-variant-numeric: tabular-nums; }
.queue-item.current .queue-copy strong, .queue-item.current .queue-order { color: var(--accent); }

.toast {
  position: fixed;
  z-index: 20;
  right: 18px;
  bottom: calc(var(--safe-bottom) + 8px);
  left: 18px;
  max-width: 500px;
  margin: 0 auto;
  padding: 12px 15px;
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 15px;
  background: rgba(24,28,39,0.94);
  box-shadow: 0 15px 40px rgba(0,0,0,0.34);
  color: var(--text);
  font-size: 12px;
  text-align: center;
  opacity: 0;
  transform: translateY(15px);
  pointer-events: none;
  transition: opacity 180ms ease, transform 180ms ease;
  backdrop-filter: blur(18px);
}
.toast.visible { opacity: 1; transform: translateY(0); }

@media (min-width: 720px) {
  .app-shell { padding-top: 28px; padding-bottom: 28px; }
  .player-card { padding: 24px; }
  .cover-stage { width: min(100%, 318px); }
}

@media (max-height: 770px) {
  .cover-stage { width: min(100%, 270px); }
  .track-copy { margin-top: 18px; margin-bottom: 9px; }
  .controls { margin-bottom: 6px; }
  .flow-button { min-height: 64px; }
}

@media (max-width: 560px) {
  .topbar { grid-template-columns: minmax(0, 1fr) auto; gap: 8px; }
  .topbar-actions { grid-column: 2; grid-row: 1; }
}

@media (max-width: 430px) {
  .app-shell { padding-right: 12px; padding-left: 12px; }
  .topbar { margin-bottom: 11px; }
  .brand-wrap { gap: 8px; }
  .brand-mark { width: 31px; height: 31px; }
  .brand { font-size: 13px; }
  .subtitle { font-size: 7px; }
  .topbar-actions { gap: 5px; }
  .user-button { padding-right: 7px; }
  .user-button > span:nth-child(2) { max-width: 58px; }
  .player-card { padding: 16px; border-radius: 26px; }
  .cover-stage { width: clamp(220px, 62vw, 272px); }
  .track-copy { margin-top: 17px; margin-bottom: 10px; }
  .controls { margin-top: 5px; }
  .play-button { width: 64px; height: 64px; }
  .control-button { width: 44px; height: 44px; }
  .flow-button { min-height: 64px; border-radius: 18px; }
}



/* Smooth hand-off from authorization to the personal account. */
body.screen-transition { overflow: hidden; }
.auth-shell.screen-exit {
  position: fixed;
  inset: 0;
  width: 100%;
  z-index: 12;
  pointer-events: none;
  animation: auth-screen-exit 360ms cubic-bezier(.4,0,.2,1) both;
}
.app-shell.screen-enter {
  animation: app-screen-enter 440ms cubic-bezier(.16,1,.3,1) both;
}
.auth-card.is-authorized {
  border-color: rgba(var(--accent-rgb), .38);
  box-shadow: 0 28px 90px rgba(0,0,0,.44), 0 0 34px rgba(var(--accent-rgb),.10);
}
@keyframes auth-screen-exit {
  from { opacity: 1; transform: translateY(0) scale(1); filter: blur(0); }
  to { opacity: 0; transform: translateY(-12px) scale(.985); filter: blur(7px); }
}
@keyframes app-screen-enter {
  from { opacity: 0; transform: translateY(18px) scale(.987); filter: blur(8px); }
  to { opacity: 1; transform: translateY(0) scale(1); filter: blur(0); }
}

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

.album {
  margin: 5px 0 0;
  color: var(--muted);
  font-size: 12px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.status-dot.pending { background: #ffd166; box-shadow: 0 0 12px rgba(255,209,102,0.6); }
.status-dot.online { background: #77e6a0; box-shadow: 0 0 12px rgba(119,230,160,0.6); }
.status-dot.error { background: #ff6c8b; box-shadow: 0 0 12px rgba(255,108,139,0.6); }
button:disabled {
  cursor: not-allowed;
  opacity: 0.42;
}
body.is-loading .flow-symbol i { animation: pulse-bar 650ms ease-in-out infinite alternate; }
body.is-loading .cover { filter: saturate(0.65); opacity: 0.82; }

/* ND Play v0.4.4 — smaller artwork, compact authorization and smooth account transition */
[hidden] { display: none !important; }

.auth-shell {
  position: relative;
  z-index: 2;
  min-height: 100svh;
  display: grid;
  place-items: center;
  padding: max(16px, env(safe-area-inset-top)) 14px max(16px, env(safe-area-inset-bottom));
}

.auth-card {
  width: min(100%, 460px);
  padding: clamp(22px, 5vw, 32px);
  border: 1px solid rgba(255,255,255,.09);
  border-radius: 28px;
  background: linear-gradient(145deg, rgba(19,24,35,.96), rgba(7,9,14,.94));
  box-shadow: 0 32px 100px rgba(0,0,0,.48), inset 0 1px 0 rgba(255,255,255,.04);
  backdrop-filter: blur(24px);
}

.auth-brand { display: flex; align-items: center; gap: 12px; margin-bottom: clamp(22px, 5vw, 30px); }
.brand-mark.large { width: 46px; height: 46px; }
.auth-copy .eyebrow { margin: 0 0 9px; color: var(--accent); font-size: 10px; font-weight: 850; letter-spacing: .18em; }
.auth-copy h1 { margin: 0; font-size: clamp(32px, 8vw, 46px); line-height: 1.02; letter-spacing: -.045em; }
.auth-copy > p:last-child { margin: 13px 0 21px; color: var(--muted); font-size: 13px; line-height: 1.52; }

.login-form { display: grid; gap: 13px; }
.login-form > label,
.login-form > .login-field { display: grid; gap: 6px; }
.login-form > .login-field > label { display: contents; }
.login-form label > span { color: #cbd2df; font-size: 12px; font-weight: 750; letter-spacing: .06em; text-transform: uppercase; }
.login-form input {
  width: 100%;
  min-height: 50px;
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 14px;
  background: rgba(255,255,255,.045);
  color: var(--text);
  padding: 0 16px;
  font: inherit;
  outline: none;
  transition: border-color .18s ease, background .18s ease, box-shadow .18s ease;
}
.login-form input:focus { border-color: rgba(var(--accent-rgb),.72); background: rgba(var(--accent-rgb),.07); box-shadow: 0 0 0 4px rgba(var(--accent-rgb),.09); }
.password-field { position: relative; }
.password-field input { padding-right: 108px; }
.password-toggle { position: absolute; right: 9px; top: 50%; transform: translateY(-50%); border: 0; border-radius: 10px; padding: 10px; background: transparent; color: var(--muted); font-size: 10px; font-weight: 850; letter-spacing: .08em; cursor: pointer; }
.password-toggle:hover { color: var(--text); background: rgba(255,255,255,.06); }

.login-button {
  min-height: 54px;
  margin-top: 2px;
  border: 0;
  border-radius: 15px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  color: #071017;
  font-weight: 900;
  letter-spacing: .07em;
  cursor: pointer;
  box-shadow: 0 18px 40px rgba(var(--accent-rgb),.18);
}
.login-button svg { width: 21px; fill: none; stroke: currentColor; stroke-width: 2; }
.login-button:disabled { cursor: wait; opacity: .65; }
.login-error { min-height: 18px; margin: -2px 0 0; color: #ff9cae; font-size: 12px; line-height: 1.4; }
.auth-security { display: flex; gap: 10px; align-items: flex-start; margin-top: 17px; padding-top: 16px; border-top: 1px solid rgba(255,255,255,.07); }
.auth-security p { margin: 0; color: var(--muted); font-size: 11px; line-height: 1.45; }
.auth-security strong { color: #dfe6f1; }

.user-button {
  min-height: 42px;
  border: 1px solid rgba(255,255,255,.09);
  border-radius: 14px;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 6px 10px 6px 7px;
  background: rgba(255,255,255,.045);
  color: var(--text);
  cursor: pointer;
  font: inherit;
  font-size: 12px;
  font-weight: 750;
}
.user-button:hover { background: rgba(255,255,255,.075); }
.user-button svg { width: 17px; fill: none; stroke: currentColor; stroke-width: 1.8; opacity: .66; }
.user-avatar { width: 28px; height: 28px; border-radius: 10px; background: radial-gradient(circle at 38% 30%, #fff 0 8%, transparent 9%), linear-gradient(135deg, var(--accent), var(--accent-2)); box-shadow: 0 0 18px rgba(var(--accent-rgb),.2); }

@media (max-width: 620px) {
  .auth-card { padding: 21px; border-radius: 24px; }
  .auth-brand { margin-bottom: 20px; }
  .auth-copy > p:last-child { margin-bottom: 18px; }
  .user-button > span:nth-child(2) { max-width: 92px; overflow: hidden; text-overflow: ellipsis; }
}

/* ND Play v0.4.7 — curated RRC24 playlist rail with desktop navigation and edge fades */
.flow-button.is-active {
  border-color: rgba(var(--accent-rgb), .58);
  background: linear-gradient(135deg, rgba(var(--accent-rgb), .16), rgba(255,255,255,.035));
  box-shadow: 0 16px 36px rgba(var(--accent-rgb), .10), inset 0 1px 0 rgba(255,255,255,.04);
}

.mixes-section {
  margin-top: 14px;
  min-width: 0;
}

.mixes-header {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 12px;
  margin: 0 2px 9px;
}
.mixes-header p {
  margin: 0 0 3px;
  color: var(--accent);
  font-size: 8px;
  font-weight: 850;
  letter-spacing: .16em;
}
.mixes-header h2 {
  margin: 0;
  color: #e8edf6;
  font-size: 14px;
  letter-spacing: -.01em;
}
.mixes-count {
  min-width: 26px;
  height: 22px;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 999px;
  display: grid;
  place-items: center;
  background: rgba(255,255,255,.035);
  color: var(--muted);
  font-size: 9px;
  font-weight: 850;
}

.mix-rail-shell {
  position: relative;
  min-width: 0;
}
.mix-rail-shell::before,
.mix-rail-shell::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  width: 24px;
  z-index: 2;
  pointer-events: none;
}
.mix-rail-shell::before {
  left: -1px;
  background: linear-gradient(90deg, rgba(12,17,29,.96) 0%, rgba(12,17,29,.72) 42%, rgba(12,17,29,0) 100%);
}
.mix-rail-shell::after {
  right: -1px;
  background: linear-gradient(270deg, rgba(12,17,29,.96) 0%, rgba(12,17,29,.72) 42%, rgba(12,17,29,0) 100%);
}

.mix-rail {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(150px, 43%);
  gap: 9px;
  overflow-x: auto;
  overscroll-behavior-inline: contain;
  scroll-snap-type: inline mandatory;
  scrollbar-width: none;
  padding: 2px 2px 7px;
  margin: 0 -2px -4px;
  cursor: grab;
  user-select: none;
  -webkit-user-select: none;
  touch-action: pan-y;
}
.mix-rail::-webkit-scrollbar { display: none; }

.mix-card {
  position: relative;
  min-height: 112px;
  scroll-snap-align: start;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.085);
  border-radius: 17px;
  padding: 12px;
  background:
    radial-gradient(circle at 105% -5%, rgba(var(--accent-rgb), .16), transparent 52%),
    rgba(255,255,255,.032);
  color: var(--text);
  text-align: left;
  cursor: pointer;
  transition: transform .18s ease, border-color .18s ease, background .18s ease, box-shadow .18s ease;
}
.mix-card:hover {
  transform: translateY(-2px);
  border-color: rgba(var(--accent-rgb), .34);
  background-color: rgba(255,255,255,.05);
}
.mix-card:active { transform: scale(.975); }
.mix-card.is-active {
  border-color: rgba(var(--accent-rgb), .72);
  background:
    radial-gradient(circle at 105% -5%, rgba(var(--accent-rgb), .30), transparent 56%),
    rgba(var(--accent-rgb), .075);
  box-shadow: 0 10px 26px rgba(var(--accent-rgb), .10), inset 0 0 0 1px rgba(var(--accent-rgb), .10);
}
.mix-card:disabled { transform: none; }
.mix-card-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 15px;
}
.mix-card-top b {
  color: var(--accent);
  font-size: 9px;
  letter-spacing: .10em;
}
.mix-card-top small {
  display: none;
}
.mix-card > strong {
  display: block;
  max-width: calc(100% - 15px);
  font-size: 12px;
  line-height: 1.18;
}
.mix-card > span:not(.mix-card-top) {
  display: -webkit-box;
  min-height: 25px;
  margin-top: 6px;
  overflow: hidden;
  color: var(--muted);
  font-size: 9px;
  line-height: 1.35;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.mix-card > i {
  position: absolute;
  right: 11px;
  bottom: 9px;
  color: rgba(var(--accent-rgb), .72);
  font-size: 20px;
  font-style: normal;
  line-height: 1;
}

@media (min-width: 720px) {
  .mix-rail { grid-auto-columns: minmax(168px, 24%); }
}

@media (max-width: 560px) {
  .topbar { grid-template-columns: minmax(0, 1fr) auto; gap: 8px; }
  .topbar-actions { grid-column: 2; grid-row: 1; }
}

@media (max-width: 430px) {
  .mixes-section { margin-top: 11px; }
  .mixes-header { margin-bottom: 7px; }
  .mixes-header h2 { font-size: 13px; }
  .mix-rail-shell::before, .mix-rail-shell::after { width: 18px; }
  .mix-rail { grid-auto-columns: minmax(142px, 46%); gap: 8px; }
  .mix-card { min-height: 104px; padding: 11px; border-radius: 16px; }
  .mix-card-top { margin-bottom: 12px; }
}


/* Desktop navigation for the RRC24 mixes rail. */
.mixes-tools {
  display: flex;
  align-items: center;
  gap: 8px;
}
.mix-nav {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}
.mix-nav-button {
  width: 28px;
  height: 28px;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 10px;
  display: grid;
  place-items: center;
  background: rgba(255,255,255,.035);
  color: var(--muted);
  cursor: pointer;
  transition: color .16s ease, border-color .16s ease, background .16s ease, transform .16s ease;
}
.mix-nav-button:hover:not(:disabled) {
  color: var(--text);
  border-color: rgba(var(--accent-rgb), .34);
  background: rgba(var(--accent-rgb), .08);
  transform: translateY(-1px);
}
.mix-nav-button svg {
  width: 15px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.mix-nav-button:disabled { opacity: .28; cursor: default; }
.mix-rail.is-dragging {
  cursor: grabbing;
  scroll-snap-type: none;
}
.mix-rail.is-dragging .mix-card {
  pointer-events: none;
  transform: none;
}

@media (hover: none), (pointer: coarse) {
  .mix-nav { display: none; }
  .mix-rail { cursor: auto; touch-action: pan-x pan-y; }
}

/* ND Play v0.4.10 — curated RRC24 Radio and restored bottom system status */
.topbar {
  grid-template-columns: minmax(0, 1fr) auto;
}

.status-strip {
  margin-top: 12px;
  padding: 12px 14px;
  border: 1px solid rgba(255,255,255,.075);
  border-radius: 16px;
  background: rgba(255,255,255,.025);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.025);
}
.status-strip > div {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  font-size: 11px;
}
.status-strip strong,
.status-strip p {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.status-strip strong {
  min-width: 0;
  color: #e9eef6;
  font-weight: 800;
}
.status-strip p {
  margin: 4px 0 0 16px;
  color: var(--muted);
  font-size: 10px;
}

.radio-section {
  margin-top: 16px;
  min-width: 0;
}
.radio-header {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 12px;
  margin: 0 2px 9px;
}
.radio-header p {
  margin: 0 0 3px;
  color: var(--accent);
  font-size: 8px;
  font-weight: 850;
  letter-spacing: .16em;
}
.radio-header h2 {
  margin: 0;
  color: #e8edf6;
  font-size: 14px;
  letter-spacing: -.01em;
}
.radio-tools {
  display: flex;
  align-items: center;
  gap: 8px;
}
.radio-count {
  min-width: 26px;
  height: 22px;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 999px;
  display: grid;
  place-items: center;
  background: rgba(255,255,255,.035);
  color: var(--muted);
  font-size: 9px;
  font-weight: 850;
}
.radio-nav {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}
.radio-nav-button {
  width: 28px;
  height: 28px;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 10px;
  display: grid;
  place-items: center;
  background: rgba(255,255,255,.035);
  color: var(--muted);
  cursor: pointer;
  transition: color .16s ease, border-color .16s ease, background .16s ease, transform .16s ease;
}
.radio-nav-button:hover:not(:disabled) {
  color: var(--text);
  border-color: rgba(var(--accent-rgb), .34);
  background: rgba(var(--accent-rgb), .08);
  transform: translateY(-1px);
}
.radio-nav-button svg {
  width: 15px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.radio-nav-button:disabled { opacity: .28; cursor: default; }

.radio-rail-shell {
  position: relative;
  min-width: 0;
}
.radio-rail-shell::before,
.radio-rail-shell::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  width: 24px;
  z-index: 2;
  pointer-events: none;
}
.radio-rail-shell::before {
  left: -1px;
  background: linear-gradient(90deg, rgba(12,17,29,.96) 0%, rgba(12,17,29,.72) 42%, rgba(12,17,29,0) 100%);
}
.radio-rail-shell::after {
  right: -1px;
  background: linear-gradient(270deg, rgba(12,17,29,.96) 0%, rgba(12,17,29,.72) 42%, rgba(12,17,29,0) 100%);
}
.radio-rail {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(150px, 43%);
  gap: 9px;
  overflow-x: auto;
  overscroll-behavior-inline: contain;
  scroll-snap-type: inline mandatory;
  scrollbar-width: none;
  padding: 2px 2px 7px;
  margin: 0 -2px -4px;
  cursor: grab;
  user-select: none;
  -webkit-user-select: none;
  touch-action: pan-y;
}
.radio-rail::-webkit-scrollbar { display: none; }
.radio-rail.is-dragging {
  cursor: grabbing;
  scroll-snap-type: none;
}
.radio-rail.is-dragging .radio-card {
  pointer-events: none;
  transform: none;
}

.radio-card {
  position: relative;
  min-height: 104px;
  scroll-snap-align: start;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.085);
  border-radius: 17px;
  padding: 12px;
  background:
    radial-gradient(circle at 105% -5%, rgba(var(--accent-rgb), .15), transparent 52%),
    linear-gradient(145deg, rgba(255,255,255,.038), rgba(255,255,255,.02));
  color: var(--text);
  text-align: left;
  cursor: pointer;
  transition: transform .18s ease, border-color .18s ease, background .18s ease, box-shadow .18s ease, opacity .18s ease;
}
.radio-card:hover {
  transform: translateY(-2px);
  border-color: rgba(var(--accent-rgb), .34);
  background-color: rgba(255,255,255,.05);
}
.radio-card:active { transform: scale(.975); }
.radio-card.is-active {
  border-color: rgba(var(--accent-rgb), .72);
  background:
    radial-gradient(circle at 105% -5%, rgba(var(--accent-rgb), .31), transparent 56%),
    rgba(var(--accent-rgb), .075);
  box-shadow: 0 10px 26px rgba(var(--accent-rgb), .10), inset 0 0 0 1px rgba(var(--accent-rgb), .10);
}
.radio-card.is-unavailable { opacity: .35; }
.radio-card-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 14px;
}
.radio-live {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--accent);
  font-size: 9px;
  font-weight: 900;
  letter-spacing: .12em;
}
.radio-live::before { content: none; }
.radio-card-top small {
  display: none;
}
.radio-card > strong {
  display: block;
  max-width: calc(100% - 18px);
  overflow: hidden;
  color: #edf2f9;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 12px;
  line-height: 1.2;
}
.radio-card > span:not(.radio-card-top) {
  display: block;
  margin-top: 6px;
  overflow: hidden;
  color: var(--muted);
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 9px;
}
.radio-card > i {
  position: absolute;
  right: 11px;
  bottom: 10px;
  display: flex;
  align-items: end;
  gap: 2px;
  height: 20px;
}
.radio-card > i::before,
.radio-card > i::after,
.radio-card > i b {
  content: "";
  display: block;
  width: 2px;
  border-radius: 99px;
  background: rgba(var(--accent-rgb), .75);
}
.radio-card > i::before { height: 8px; }
.radio-card > i b { height: 17px; }
.radio-card > i::after { height: 12px; }
.radio-card.is-active > i::before,
.radio-card.is-active > i b,
.radio-card.is-active > i::after {
  animation: radio-signal 650ms ease-in-out infinite alternate;
}
.radio-card.is-active > i b { animation-delay: -220ms; }
.radio-card.is-active > i::after { animation-delay: -420ms; }
@keyframes radio-signal {
  from { transform: scaleY(.45); opacity: .55; }
  to { transform: scaleY(1); opacity: 1; }
}
.player-card.is-radio .timeline input {
  opacity: .35;
  pointer-events: none;
}
.player-card.is-radio .time-row {
  color: var(--accent);
  font-size: 10px;
  font-weight: 850;
  letter-spacing: .12em;
}
.player-card.is-radio .like-button {
  opacity: .25;
}

@media (min-width: 720px) {
  .radio-rail { grid-auto-columns: minmax(168px, 24%); }
}

@media (max-width: 560px) {
  .topbar { grid-template-columns: minmax(0, 1fr) auto; }
  .topbar-actions { grid-column: 2; grid-row: 1; }
}

@media (max-width: 430px) {
  .radio-section { margin-top: 13px; }
  .radio-header { margin-bottom: 7px; }
  .radio-header h2 { font-size: 13px; }
  .radio-rail-shell::before,
  .radio-rail-shell::after { width: 18px; }
  .radio-rail { grid-auto-columns: minmax(142px, 46%); gap: 8px; }
  .radio-card { min-height: 99px; padding: 11px; border-radius: 16px; }
  .status-strip { margin-top: 10px; }
}

@media (hover: none), (pointer: coarse) {
  .radio-nav { display: none; }
  .radio-rail { cursor: auto; touch-action: pan-x pan-y; }
}

@media (prefers-reduced-motion: reduce) {
  .radio-card.is-active > i::before,
  .radio-card.is-active > i b,
  .radio-card.is-active > i::after { animation: none; }
}


/* ND Play v0.4.11 — lightweight ambient motion.
   The existing accent palette remains authoritative. Only transform and opacity animate. */
.ambient {
  will-change: transform, opacity;
  backface-visibility: hidden;
  transform: translate3d(0, 0, 0) scale(1);
  animation-play-state: paused;
}
.ambient-one {
  animation: ndplay-ambient-drift-one 31s cubic-bezier(.45, 0, .55, 1) infinite alternate;
  animation-play-state: paused;
}
.ambient-two {
  animation: ndplay-ambient-drift-two 37s cubic-bezier(.45, 0, .55, 1) infinite alternate;
  animation-play-state: paused;
}

.player-card {
  position: relative;
  isolation: isolate;
  overflow: hidden;
}
.player-card::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: -38%;
  pointer-events: none;
  background:
    radial-gradient(circle at 28% 34%, rgba(var(--accent-rgb), .12), transparent 30%),
    radial-gradient(circle at 72% 62%, color-mix(in srgb, var(--accent-2) 13%, transparent), transparent 32%);
  opacity: .28;
  transform: translate3d(-2%, -1%, 0) rotate(-4deg) scale(1.04);
  will-change: transform, opacity;
  backface-visibility: hidden;
  animation: ndplay-panel-current 28s cubic-bezier(.45, 0, .55, 1) infinite alternate;
  animation-play-state: paused;
}

.flow-button,
.mix-card,
.radio-card,
.status-strip {
  isolation: isolate;
}
.flow-button::before,
.mix-card::before,
.radio-card::before {
  content: "";
  position: absolute;
  top: 10px;
  right: 10px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: rgba(var(--accent-rgb), .34);
  box-shadow: 0 0 6px rgba(var(--accent-rgb), .18);
  transition: background 160ms ease, box-shadow 160ms ease, transform 160ms ease, opacity 160ms ease;
  opacity: .72;
}
.flow-button.is-active::before,
.mix-card.is-active::before,
.radio-card.is-active::before {
  background: var(--accent);
  box-shadow: 0 0 14px rgba(var(--accent-rgb), .72);
  transform: scale(1.12);
  opacity: 1;
}
.flow-button::after,
.mix-card::after,
.radio-card::after {
  content: "";
  position: absolute;
  z-index: 0;
  top: -45%;
  bottom: -45%;
  left: -58%;
  width: 36%;
  pointer-events: none;
  background: linear-gradient(105deg, transparent 0%, rgba(255,255,255,.025) 26%, rgba(var(--accent-rgb),.13) 50%, rgba(255,255,255,.025) 72%, transparent 100%);
  opacity: 0;
  transform: translate3d(0, 0, 0) skewX(-13deg);
  will-change: transform, opacity;
  backface-visibility: hidden;
}
.flow-button > *,
.mix-card > *,
.radio-card > * {
  position: relative;
  z-index: 1;
}
.flow-button.is-active::after,
.mix-card.is-active::after,
.radio-card.is-active::after {
  opacity: .44;
  animation: ndplay-active-sheen 9.5s cubic-bezier(.2, .7, .25, 1) infinite;
  animation-play-state: paused;
}

body.is-playing:not(.motion-suspended) .ambient-one,
body.is-playing:not(.motion-suspended) .ambient-two,
body.is-playing:not(.motion-suspended) .player-card::before,
body.is-playing:not(.motion-suspended) .flow-button.is-active::after,
body.is-playing:not(.motion-suspended) .mix-card.is-active::after,
body.is-playing:not(.motion-suspended) .radio-card.is-active::after {
  animation-play-state: running;
}

body.is-playing:not(.motion-suspended) .player-card {
  box-shadow: 0 24px 70px rgba(0,0,0,.34), inset 0 1px rgba(255,255,255,.04), 0 0 46px rgba(var(--accent-rgb),.035);
}

@keyframes ndplay-ambient-drift-one {
  0%   { transform: translate3d(-2vw, -1.5vh, 0) scale(.98); opacity: .09; }
  48%  { transform: translate3d(5vw, 2vh, 0) scale(1.06); opacity: .14; }
  100% { transform: translate3d(1vw, 7vh, 0) scale(1.02); opacity: .11; }
}
@keyframes ndplay-ambient-drift-two {
  0%   { transform: translate3d(2vw, 4vh, 0) scale(1.04); opacity: .10; }
  52%  { transform: translate3d(-5vw, -2vh, 0) scale(.97); opacity: .14; }
  100% { transform: translate3d(-1vw, -7vh, 0) scale(1.05); opacity: .11; }
}
@keyframes ndplay-panel-current {
  0%   { transform: translate3d(-3%, -2%, 0) rotate(-5deg) scale(1.04); opacity: .20; }
  50%  { transform: translate3d(3%, 1%, 0) rotate(1deg) scale(1.08); opacity: .31; }
  100% { transform: translate3d(-1%, 4%, 0) rotate(5deg) scale(1.05); opacity: .23; }
}
@keyframes ndplay-active-sheen {
  0%, 70% { transform: translate3d(0, 0, 0) skewX(-13deg); opacity: 0; }
  76%     { opacity: .16; }
  89%     { opacity: .48; }
  100%    { transform: translate3d(440%, 0, 0) skewX(-13deg); opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .ambient-one,
  .ambient-two,
  .player-card::before,
  .flow-button.is-active::after,
  .mix-card.is-active::after,
  .radio-card.is-active::after {
    animation: none !important;
  }
  .ambient { will-change: auto; }
}


/* ND Play v0.4.12 — asymmetric artwork layout and vertical RRC24 volume module. */
.cover-cluster {
  --volume-length: 166px;
  display: grid;
  grid-template-columns: minmax(0, 318px) 48px;
  align-items: stretch;
  gap: 14px;
  width: min(100%, 380px);
  margin: 0 auto;
}
.cover-cluster .cover-stage {
  width: 100%;
  max-width: none;
  margin: 0;
}
.volume-rail {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-width: 0;
  padding: 10px 5px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.075);
  border-radius: 18px;
  background:
    linear-gradient(180deg, rgba(var(--accent-rgb),.085), rgba(255,255,255,.018) 38%, rgba(7,9,14,.20)),
    rgba(255,255,255,.018);
  box-shadow: inset 0 1px rgba(255,255,255,.035), 0 14px 35px rgba(0,0,0,.16);
  transition: border-color 260ms ease, background 420ms ease, box-shadow 260ms ease;
}
body.is-playing .volume-rail {
  border-color: rgba(var(--accent-rgb),.18);
  box-shadow: inset 0 1px rgba(255,255,255,.04), 0 14px 35px rgba(0,0,0,.18), 0 0 22px rgba(var(--accent-rgb),.035);
}
.volume-rail::before {
  content: "";
  position: absolute;
  inset: -25% -80%;
  pointer-events: none;
  background: linear-gradient(115deg, transparent 38%, rgba(var(--accent-rgb),.08) 50%, transparent 62%);
  opacity: .45;
  transform: translate3d(-24%,0,0);
  animation: ndplay-volume-rail-sheen 12s ease-in-out infinite;
  animation-play-state: paused;
}
body.is-playing:not(.motion-suspended) .volume-rail::before { animation-play-state: running; }
.volume-rail > * { position: relative; z-index: 1; }
.volume-label {
  margin-bottom: 6px;
  color: var(--accent);
  font-size: 8px;
  font-weight: 900;
  letter-spacing: .18em;
  writing-mode: vertical-rl;
  transform: rotate(180deg);
}
.volume-slider-shell {
  position: relative;
  width: 28px;
  height: var(--volume-length);
  flex: 0 0 var(--volume-length);
  display: grid;
  place-items: center;
}
.volume-ticks {
  position: absolute;
  inset: 5px 5px;
  border-radius: 99px;
  opacity: .34;
  background: repeating-linear-gradient(to bottom, rgba(255,255,255,.22) 0 1px, transparent 1px 13px);
  mask: linear-gradient(90deg, transparent 0 35%, #000 35% 65%, transparent 65% 100%);
}
.volume-slider {
  position: absolute;
  left: 50%;
  top: 50%;
  width: var(--volume-length) !important;
  height: 24px !important;
  margin: 0 !important;
  transform: translate(-50%, -50%) rotate(-90deg);
  transform-origin: center;
}
.volume-slider::-webkit-slider-runnable-track { height: 3px; }
.volume-slider::-webkit-slider-thumb { width: 14px; height: 14px; margin-top: -5.5px; }
.volume-slider::-moz-range-track,
.volume-slider::-moz-range-progress { height: 3px; }
.volume-value {
  min-width: 38px;
  margin-top: 5px;
  color: var(--muted);
  font-size: 9px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  text-align: center;
}
.volume-mute {
  width: 34px;
  height: 34px;
  margin-top: 7px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(255,255,255,.075);
  border-radius: 12px;
  background: rgba(255,255,255,.025);
  color: var(--muted);
  cursor: pointer;
  transition: color 160ms ease, border-color 160ms ease, background 160ms ease, transform 160ms ease;
}
.volume-mute:hover { color: var(--text); border-color: rgba(var(--accent-rgb),.28); background: rgba(var(--accent-rgb),.07); }
.volume-mute:active { transform: scale(.94); }
.volume-mute[aria-pressed="true"] { color: var(--accent); border-color: rgba(var(--accent-rgb),.28); background: rgba(var(--accent-rgb),.09); }
.volume-mute svg { width: 17px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.controls { grid-template-columns: 1fr 1fr 1.35fr 1fr; }

.toast {
  top: calc(var(--safe-top) + 74px);
  right: 18px;
  bottom: auto;
  left: 18px;
  max-width: 390px;
  border-color: rgba(var(--accent-rgb),.22);
  background: linear-gradient(135deg, rgba(var(--accent-rgb),.11), rgba(24,28,39,.95) 42%);
  box-shadow: 0 17px 48px rgba(0,0,0,.38), 0 0 24px rgba(var(--accent-rgb),.05);
  transform: translateY(-12px) scale(.985);
}
.toast.visible { transform: translateY(0) scale(1); }

@keyframes ndplay-volume-rail-sheen {
  0%, 70% { transform: translate3d(-30%,0,0); opacity: 0; }
  78% { opacity: .45; }
  92%, 100% { transform: translate3d(30%,0,0); opacity: 0; }
}

@media (max-height: 770px) {
  .cover-cluster { --volume-length: 138px; width: min(100%, 332px); grid-template-columns: minmax(0,270px) 48px; }
}
@media (max-width: 430px) {
  .cover-cluster { --volume-length: 132px; width: min(100%, 334px); grid-template-columns: minmax(0,272px) 48px; gap: 14px; }
  .volume-rail { padding: 8px 4px; border-radius: 16px; }
  .volume-label { font-size: 7px; margin-bottom: 4px; }
  .volume-value { margin-top: 3px; font-size: 8px; }
  .volume-mute { width: 31px; height: 31px; margin-top: 5px; border-radius: 11px; }
  .toast { top: calc(var(--safe-top) + 66px); right: 12px; left: 12px; }
}
@media (max-width: 370px) {
  .cover-cluster { --volume-length: 116px; width: min(100%, 310px); grid-template-columns: minmax(0,252px) 44px; gap: 12px; }
}
@media (prefers-reduced-motion: reduce) {
  .volume-rail::before { animation: none; }
}


/* ND Play v0.4.13 — compact artwork cluster and asymmetric RRC24 Transport Deck. */

.cover-cluster {
  --volume-length: 126px;
  grid-template-columns: minmax(0, 282px) 44px;
  gap: 11px;
  width: min(100%, 337px);
}
.volume-rail {
  padding: 8px 4px;
  border-radius: 16px;
}
.volume-label {
  margin-bottom: 4px;
  font-size: 7px;
}
.volume-slider-shell { width: 25px; }
.volume-value {
  min-width: 34px;
  margin-top: 3px;
  font-size: 8px;
}
.volume-mute {
  width: 30px;
  height: 30px;
  margin-top: 5px;
  border-radius: 10px;
}
.volume-mute svg { width: 15px; }

.controls.transport-deck {
  position: relative;
  display: grid;
  grid-template-columns: minmax(112px, 1.65fr) repeat(3, minmax(54px, .72fr));
  align-items: stretch;
  gap: 8px;
  margin: 8px 0 10px;
  padding: 0;
}
.controls.transport-deck::before {
  content: "";
  position: absolute;
  inset: -5px;
  z-index: -1;
  border-radius: 23px;
  background: linear-gradient(100deg, rgba(var(--accent-rgb), .04), transparent 46%, rgba(255,255,255,.018));
  opacity: .8;
  pointer-events: none;
}
.transport-deck .play-button,
.transport-deck .control-button {
  position: relative;
  width: 100%;
  height: 62px;
  min-width: 0;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.075);
  box-shadow: inset 0 1px rgba(255,255,255,.035), 0 10px 26px rgba(0,0,0,.13);
  transition: transform 160ms ease, border-color 200ms ease, background 240ms ease, color 180ms ease, box-shadow 220ms ease;
}
.transport-deck .play-button {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 12px;
  padding: 0 17px;
  border-radius: 20px 20px 8px 20px;
  background:
    linear-gradient(120deg, rgba(var(--accent-rgb), .22), rgba(var(--accent-rgb), .075) 52%, rgba(255,255,255,.045)),
    rgba(255,255,255,.022);
  color: var(--text);
}
.transport-deck .play-button::before {
  content: "PLAY";
  order: 2;
  color: var(--text);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .15em;
}
.transport-deck .play-button.is-playing::before { content: "PAUSE"; }
.transport-deck .play-button::after {
  content: "";
  position: absolute;
  inset: -45% -25%;
  pointer-events: none;
  background: linear-gradient(110deg, transparent 40%, rgba(255,255,255,.10) 50%, transparent 60%);
  transform: translateX(-34%);
  opacity: 0;
  transition: transform 520ms ease, opacity 220ms ease;
}
body.is-playing:not(.motion-suspended) .transport-deck .play-button::after {
  transform: translateX(34%);
  opacity: .5;
}
.transport-play-icons {
  order: 1;
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  flex: 0 0 34px;
  border: 1px solid rgba(var(--accent-rgb), .28);
  border-radius: 12px;
  background: rgba(7,10,15,.26);
  box-shadow: inset 0 1px rgba(255,255,255,.04), 0 0 18px rgba(var(--accent-rgb),.09);
}
.transport-deck .play-button svg {
  width: 20px;
  height: 20px;
}
.transport-play-mark {
  position: absolute;
  right: 11px;
  top: 10px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 9px rgba(var(--accent-rgb),.72);
}
.transport-deck .transport-key {
  justify-self: stretch;
  border-radius: 18px 18px 7px 18px;
  background:
    linear-gradient(145deg, rgba(255,255,255,.045), rgba(255,255,255,.012)),
    rgba(10,13,19,.28);
  color: #d8dee9;
}
.transport-deck .transport-key::before {
  content: "";
  position: absolute;
  top: 9px;
  right: 9px;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: rgba(var(--accent-rgb),.42);
  box-shadow: 0 0 7px rgba(var(--accent-rgb),.22);
}
.transport-deck .transport-key svg {
  width: 22px;
  height: 22px;
}
.transport-deck .play-button:hover,
.transport-deck .transport-key:hover:not(:disabled) {
  border-color: rgba(var(--accent-rgb), .28);
  box-shadow: inset 0 1px rgba(255,255,255,.045), 0 12px 28px rgba(0,0,0,.16), 0 0 18px rgba(var(--accent-rgb),.04);
}
.transport-deck .play-button:active,
.transport-deck .transport-key:active:not(:disabled) { transform: translateY(1px) scale(.975); }
.transport-deck .transport-key:disabled { opacity: .34; cursor: default; }
.transport-deck .transport-key.flash-dot::before {
  background: var(--accent);
  box-shadow: 0 0 14px rgba(var(--accent-rgb),.82);
  animation: transport-dot-flash 320ms ease;
}
@keyframes transport-dot-flash {
  0% { transform: scale(1); opacity: .74; }
  45% { transform: scale(1.75); opacity: 1; }
  100% { transform: scale(1); opacity: .42; }
}
.transport-deck .like-button.is-liked {
  color: #ff7c9a;
  border-color: rgba(255,108,139,.30);
  background: linear-gradient(145deg, rgba(255,108,139,.13), rgba(255,255,255,.018));
}
.transport-deck .like-button.is-liked::before {
  background: #ff6c8b;
  box-shadow: 0 0 9px rgba(255,108,139,.55);
}

@media (max-width: 430px) {
  .cover-cluster {
    --volume-length: 104px;
    grid-template-columns: minmax(0, 248px) 42px;
    gap: 10px;
    width: min(100%, 300px);
  }
  .volume-rail { padding: 7px 3px; border-radius: 15px; }
  .volume-mute { width: 28px; height: 28px; }
  .controls.transport-deck {
    grid-template-columns: minmax(104px, 1.55fr) repeat(3, minmax(48px, .7fr));
    gap: 7px;
  }
  .transport-deck .play-button,
  .transport-deck .control-button { height: 58px; }
  .transport-deck .play-button { padding: 0 13px; gap: 9px; border-radius: 18px 18px 7px 18px; }
  .transport-deck .play-button::before { font-size: 10px; letter-spacing: .12em; }
  .transport-play-icons { width: 31px; height: 31px; flex-basis: 31px; border-radius: 11px; }
  .transport-deck .transport-key { border-radius: 16px 16px 7px 16px; }
  .transport-deck .transport-key svg { width: 20px; height: 20px; }
}
@media (max-width: 370px) {
  .cover-cluster {
    --volume-length: 92px;
    grid-template-columns: minmax(0, 226px) 40px;
    gap: 9px;
    width: min(100%, 275px);
  }
  .controls.transport-deck {
    grid-template-columns: minmax(96px, 1.48fr) repeat(3, minmax(44px, .68fr));
    gap: 6px;
  }
  .transport-deck .play-button,
  .transport-deck .control-button { height: 54px; }
  .transport-deck .play-button { padding: 0 11px; }
  .transport-deck .play-button::before { font-size: 9px; }
  .transport-play-icons { width: 29px; height: 29px; flex-basis: 29px; }
}


/* ND Play v0.4.14 — left-side volume, neon stream telemetry and compact AU link. */

.cover-cluster {
  --volume-length: 112px;
  display: grid;
  grid-template-columns: 42px minmax(0, 254px) 94px;
  align-items: stretch;
  gap: 10px;
  width: min(100%, 406px);
  margin: 0 auto;
}
.cover-cluster .cover-stage {
  grid-column: 2;
  width: 100%;
}
.cover-cluster .volume-rail {
  grid-column: 1;
  grid-row: 1;
}
.stream-info {
  position: relative;
  grid-column: 3;
  grid-row: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 13px 10px;
  overflow: hidden;
  border: 1px solid rgba(var(--accent-rgb), .20);
  border-radius: 17px;
  background:
    linear-gradient(180deg, rgba(var(--accent-rgb), .075), rgba(255,255,255,.017) 52%, rgba(5,8,13,.18)),
    rgba(255,255,255,.016);
  box-shadow: inset 0 1px rgba(255,255,255,.035), 0 13px 31px rgba(0,0,0,.14), 0 0 24px rgba(var(--accent-rgb),.025);
  isolation: isolate;
}
.stream-info::before {
  content: "";
  position: absolute;
  inset: -22% -85%;
  z-index: -1;
  pointer-events: none;
  background: linear-gradient(112deg, transparent 38%, rgba(var(--accent-rgb),.11) 50%, transparent 62%);
  opacity: .38;
  transform: translate3d(-24%,0,0);
  animation: ndplay-stream-info-sheen 13s ease-in-out infinite;
  animation-play-state: paused;
}
body.is-playing:not(.motion-suspended) .stream-info::before { animation-play-state: running; }
.stream-codec {
  color: var(--accent);
  font-size: 18px;
  line-height: 1;
  letter-spacing: -.025em;
  text-shadow: 0 0 16px rgba(var(--accent-rgb), .26);
}
.stream-info small {
  display: block;
  margin-top: 10px;
  overflow: hidden;
  color: rgba(var(--accent-rgb), .68);
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 7px;
  font-weight: 820;
  letter-spacing: .035em;
}
.track-copy {
  margin-top: 17px;
  margin-bottom: 12px;
  min-height: 62px;
}

@keyframes ndplay-stream-info-sheen {
  0%, 72% { transform: translate3d(-30%,0,0); opacity: 0; }
  80% { opacity: .42; }
  94%, 100% { transform: translate3d(30%,0,0); opacity: 0; }
}

@media (max-height: 770px) {
  .cover-cluster {
    --volume-length: 98px;
    grid-template-columns: 40px minmax(0, 232px) 88px;
    width: min(100%, 380px);
    gap: 10px;
  }
  .stream-info { padding: 11px 9px; }
  .stream-codec { font-size: 16px; }
  .stream-info small { margin-top: 8px; }
}

@media (max-width: 430px) {
  .cover-cluster {
    --volume-length: 94px;
    grid-template-columns: 38px minmax(0, 1fr) 76px;
    width: min(100%, 344px);
    gap: 8px;
  }
  .volume-rail { padding: 7px 3px; border-radius: 15px; }
  .volume-mute { width: 28px; height: 28px; }
  .stream-info { padding: 10px 7px; border-radius: 15px; }
  .stream-codec { font-size: 14px; }
  .stream-info small { margin-top: 7px; font-size: 6px; }
  .track-copy { margin-top: 14px; min-height: 57px; }
}

@media (max-width: 370px) {
  .cover-cluster {
    --volume-length: 84px;
    grid-template-columns: 36px minmax(0, 1fr) 68px;
    width: 100%;
    gap: 7px;
  }
  .stream-info { padding: 8px 6px; }
  .stream-codec { font-size: 13px; }
}

@media (prefers-reduced-motion: reduce) {
  .stream-info::before { animation: none; }
}

/* ND Play v0.4.15 — edge-aligned volume rail, square stream card and mouse-wheel volume control. */
.cover-cluster {
  --volume-width: 40px;
  --cover-size: 220px;
  --info-size: 220px;
  --volume-length: 134px;
  grid-template-columns: var(--volume-width) minmax(0, var(--cover-size)) minmax(0, var(--info-size));
  align-items: stretch;
  gap: 8px;
  width: min(100%, calc(var(--volume-width) + var(--cover-size) + var(--info-size) + 16px));
  margin: 0;
}
.cover-cluster .volume-rail {
  align-self: stretch;
  height: var(--cover-size);
  padding: 10px 3px;
  border-radius: 19px;
  justify-content: space-between;
}
.cover-cluster .cover-stage {
  width: 100%;
  aspect-ratio: 1 / 1;
}
.cover-cluster .cover {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.volume-slider-shell {
  cursor: ns-resize;
}
.volume-slider {
  cursor: ns-resize;
}
.stream-info {
  width: 100%;
  height: var(--info-size);
  min-height: 0;
  aspect-ratio: 1 / 1;
  padding: 16px;
  border-radius: 20px;
  justify-content: space-between;
}
.stream-codec {
  font-size: clamp(24px, 2.2vw, 34px);
  line-height: .92;
}
.stream-info small {
  margin-top: 0;
  white-space: normal;
  font-size: 10px;
  line-height: 1.18;
}

@media (max-height: 770px) {
  .cover-cluster {
    --cover-size: 204px;
    --info-size: 204px;
    --volume-length: 122px;
    width: min(100%, calc(var(--volume-width) + var(--cover-size) + var(--info-size) + 16px));
  }
  .stream-info { padding: 14px; }
  .stream-codec { font-size: clamp(22px, 2vw, 30px); }
  .stream-info small { font-size: 9px; }
}

@media (max-width: 560px) {
  .cover-cluster {
    --volume-width: 36px;
    --cover-size: 198px;
    --info-size: 108px;
    --volume-length: 96px;
    width: min(100%, calc(var(--volume-width) + var(--cover-size) + var(--info-size) + 16px));
  }
  .cover-cluster .volume-rail {
    height: var(--cover-size);
    padding: 8px 3px;
    border-radius: 17px;
  }
  .stream-info {
    height: var(--info-size);
    padding: 11px 9px;
    border-radius: 16px;
  }
  .stream-codec { font-size: 18px; }
  .stream-info small { font-size: 6.8px; }
}

@media (max-width: 430px) {
  .cover-cluster {
    --volume-width: 34px;
    --cover-size: 188px;
    --info-size: 102px;
    --volume-length: 88px;
    gap: 7px;
    width: min(100%, calc(var(--volume-width) + var(--cover-size) + var(--info-size) + 14px));
  }
  .cover-cluster .volume-rail {
    height: var(--cover-size);
    border-radius: 16px;
  }
  .volume-mute { width: 27px; height: 27px; }
  .stream-info { padding: 10px 8px; }
  .stream-codec { font-size: 16px; }
  .stream-info small { font-size: 6.2px; }
}

@media (max-width: 370px) {
  .cover-cluster {
    --volume-width: 32px;
    --cover-size: 174px;
    --info-size: 94px;
    --volume-length: 80px;
    gap: 6px;
    width: 100%;
  }
  .stream-info { padding: 8px 7px; }
  .stream-codec { font-size: 14px; }
}

/* ND Play v0.4.16 — fully neon stream telemetry and split PWA status console. */
.stream-info {
  justify-content: flex-start;
}
.stream-codec {
  margin-top: 19px;
  color: var(--accent);
  text-shadow:
    0 0 8px rgba(var(--accent-rgb), .42),
    0 0 22px rgba(var(--accent-rgb), .20);
}
.stream-metrics {
  display: grid;
  gap: 0;
  margin-top: auto;
}
.stream-metric {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);
  align-items: center;
  gap: 8px;
  min-width: 0;
  padding: 8px 0;
  border-top: 1px solid rgba(var(--accent-rgb), .13);
}
.stream-metric > span {
  color: rgba(var(--accent-rgb), .46);
  font-size: 7px;
  font-weight: 900;
  letter-spacing: .16em;
  text-shadow: 0 0 8px rgba(var(--accent-rgb), .12);
}
.stream-metric > b {
  min-width: 0;
  overflow: hidden;
  color: rgba(var(--accent-rgb), .84);
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 10px;
  font-weight: 850;
  letter-spacing: .035em;
  text-shadow: 0 0 10px rgba(var(--accent-rgb), .20);
}
.stream-metric:last-child > b {
  color: var(--accent);
  text-shadow: 0 0 12px rgba(var(--accent-rgb), .34);
}
.stream-pulse {
  position: absolute;
  right: 15px;
  bottom: 12px;
  left: 15px;
  height: 2px;
  overflow: hidden;
  border-radius: 99px;
  background: rgba(var(--accent-rgb), .10);
}
.stream-pulse::after {
  content: "";
  position: absolute;
  inset: 0;
  width: 38%;
  border-radius: inherit;
  background: linear-gradient(90deg, transparent, rgba(var(--accent-rgb), .82), transparent);
  box-shadow: 0 0 12px rgba(var(--accent-rgb), .36);
  transform: translateX(-130%);
  animation: ndplay-stream-pulse 7.8s ease-in-out infinite;
  animation-play-state: paused;
}
body.is-playing:not(.motion-suspended) .stream-pulse::after { animation-play-state: running; }
@keyframes ndplay-stream-pulse {
  0%, 58% { transform: translateX(-130%); opacity: 0; }
  65% { opacity: .85; }
  88%, 100% { transform: translateX(350%); opacity: 0; }
}

.status-strip.status-console {
  display: grid;
  grid-template-columns: minmax(0, 1.45fr) minmax(178px, .9fr);
  gap: 0;
  padding: 0;
  overflow: hidden;
}
.status-console .status-pane {
  min-width: 0;
  padding: 13px 15px;
}
.status-console .status-pane-navidrome {
  border-right: 1px solid rgba(255,255,255,.065);
}
.status-pane-title {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}
.status-pane-title strong,
.status-pane-navidrome p {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.status-pane-title strong {
  min-width: 0;
  color: #e9eef6;
  font-size: 11px;
  font-weight: 800;
}
.status-pane-navidrome p {
  margin: 4px 0 0 16px;
  color: var(--muted);
  font-size: 10px;
}
.status-pane-app {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  background: linear-gradient(135deg, rgba(var(--accent-rgb), .045), rgba(255,255,255,.012));
}
.app-version-row {
  display: grid;
  grid-template-columns: auto auto;
  align-items: baseline;
  gap: 2px 6px;
  min-width: 0;
}
.app-version-label {
  color: rgba(var(--accent-rgb), .68);
  font-size: 7px;
  font-weight: 900;
  letter-spacing: .16em;
}
.app-version-row strong {
  color: var(--accent);
  font-size: 12px;
  font-weight: 900;
  text-shadow: 0 0 11px rgba(var(--accent-rgb), .25);
}
.app-install-state {
  grid-column: 1 / -1;
  color: var(--muted);
  font-size: 7px;
  font-weight: 850;
  letter-spacing: .13em;
}
.app-install-state.is-installed {
  color: var(--accent);
  text-shadow: 0 0 9px rgba(var(--accent-rgb), .28);
}
.app-install-button {
  min-width: 92px;
  height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 0 10px;
  border: 1px solid rgba(var(--accent-rgb), .28);
  border-radius: 11px;
  background: rgba(var(--accent-rgb), .075);
  color: var(--accent);
  cursor: pointer;
  font-size: 7px;
  font-weight: 900;
  letter-spacing: .10em;
  box-shadow: inset 0 1px rgba(255,255,255,.035), 0 0 15px rgba(var(--accent-rgb),.035);
  transition: transform 160ms ease, border-color 180ms ease, background 180ms ease;
}
.app-install-button:hover {
  border-color: rgba(var(--accent-rgb), .48);
  background: rgba(var(--accent-rgb), .13);
}
.app-install-button:active { transform: scale(.96); }
.app-install-button svg {
  width: 14px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.app-install-button[hidden] { display: none !important; }

@media (max-width: 560px) {
  .stream-codec { margin-top: 12px; }
  .stream-metric {
    grid-template-columns: 34px minmax(0,1fr);
    gap: 5px;
    padding: 6px 0;
  }
  .stream-metric > span { font-size: 5.7px; }
  .stream-metric > b { font-size: 7.2px; }
  .stream-pulse { right: 10px; bottom: 8px; left: 10px; }
  .status-strip.status-console {
    grid-template-columns: minmax(0, 1.35fr) minmax(132px, .8fr);
  }
  .status-console .status-pane { padding: 11px 12px; }
  .status-pane-title strong { font-size: 9px; }
  .status-pane-navidrome p { margin-left: 15px; font-size: 8px; }
  .status-pane-app { gap: 7px; }
  .app-version-row strong { font-size: 10px; }
  .app-install-button {
    min-width: 72px;
    height: 31px;
    gap: 5px;
    padding: 0 7px;
    font-size: 6px;
  }
  .app-install-button svg { width: 12px; }
}

@media (max-width: 370px) {
  .status-strip.status-console {
    grid-template-columns: minmax(0, 1.25fr) minmax(112px, .75fr);
  }
  .status-console .status-pane { padding: 10px; }
  .status-pane-title strong { font-size: 8px; }
  .status-pane-navidrome p { font-size: 7px; }
  .app-install-button span { display: none; }
  .app-install-button { min-width: 34px; width: 34px; padding: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .stream-pulse::after { animation: none !important; }
}


/* ND Play v0.4.18 — WebKit-safe sizing and atomic screen visibility. */
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}
body.auth-visible #appScreen { display: none !important; }
body.app-visible #authScreen { display: none !important; }
body.app-visible #appScreen { display: flex; }
.auth-shell, .app-shell { max-width: 100%; }
.login-button svg { flex: 0 0 21px; }
@supports (-webkit-touch-callout: none) {
  .login-form input { font-size: 16px; }
  .password-toggle { font-size: 10px; }
  .login-button { font-size: 13px; }
  .auth-security p { font-size: 11px; }
}

/* ND Play v0.4.18 — strict iPhone layout and honest iOS installation guide. */
.install-guide {
  position: fixed;
  inset: 0;
  z-index: 90;
  display: grid;
  align-items: end;
  visibility: visible;
}
.install-guide[hidden] { display: none !important; }
.install-guide-backdrop {
  position: absolute;
  inset: 0;
  border: 0;
  background: rgba(2,4,8,.66);
  backdrop-filter: blur(10px);
}
.install-guide-sheet {
  position: relative;
  width: min(100%, 520px);
  margin: 0 auto;
  padding: 12px 20px calc(20px + env(safe-area-inset-bottom));
  border: 1px solid rgba(var(--accent-rgb), .22);
  border-radius: 24px 24px 0 0;
  background:
    linear-gradient(145deg, rgba(var(--accent-rgb),.10), rgba(16,20,29,.98) 38%),
    #10141d;
  box-shadow: 0 -20px 70px rgba(0,0,0,.48), inset 0 1px rgba(255,255,255,.04);
}
.install-guide-handle {
  width: 42px;
  height: 4px;
  margin: 0 auto 18px;
  border-radius: 99px;
  background: rgba(255,255,255,.18);
}
.install-guide-sheet > p {
  margin: 0 0 5px;
  color: var(--accent);
  font-size: 8px;
  font-weight: 900;
  letter-spacing: .18em;
}
.install-guide-sheet h2 {
  margin: 0;
  font-size: 23px;
  letter-spacing: -.03em;
}
.install-guide-sheet ol {
  display: grid;
  gap: 12px;
  margin: 18px 0;
  padding-left: 21px;
  color: #dce4ef;
  font-size: 14px;
  line-height: 1.45;
}
.install-guide-sheet strong { color: var(--accent); }
.install-guide-close {
  width: 100%;
  min-height: 48px;
  border: 1px solid rgba(var(--accent-rgb),.30);
  border-radius: 15px;
  background: rgba(var(--accent-rgb),.10);
  color: var(--accent);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .14em;
}
body.install-guide-open { overflow: hidden; }
.app-install-button.is-guide {
  border-color: rgba(var(--accent-rgb), .20);
  background: rgba(var(--accent-rgb), .045);
}

@media (max-width: 430px) {
  .app-shell {
    width: 100%;
    padding: max(10px, env(safe-area-inset-top)) 10px calc(14px + env(safe-area-inset-bottom));
  }

  .topbar {
    grid-template-columns: minmax(74px, 1fr) auto;
    gap: 5px;
    min-height: 42px;
    margin-bottom: 10px;
  }
  .brand-wrap { min-width: 0; gap: 6px; }
  .brand-mark { width: 28px; height: 28px; flex: 0 0 28px; border-radius: 9px; }
  .brand-mark::before { left: 7px; bottom: 6px; }
  .brand-mark span { left: 12px; bottom: 6px; }
  .brand-mark::after { left: 17px; bottom: 6px; }
  .brand { white-space: nowrap; font-size: 11px; letter-spacing: .11em; }
  .subtitle { display: none; }
  .topbar-actions { gap: 4px; }

  .user-button {
    min-height: 34px;
    gap: 5px;
    padding: 4px 6px 4px 5px;
    border-radius: 12px;
    font-size: 10px;
  }
  .user-avatar { width: 25px; height: 25px; border-radius: 8px; }
  .user-button > span:nth-child(2) { max-width: 42px; }
  .user-button svg { width: 13px; }

  .player-card {
    padding: 12px;
    border-radius: 23px;
  }

  .cover-cluster {
    --volume-length: 76px;
    grid-template-columns: 32px minmax(0, 1fr) minmax(0, 1fr);
    gap: 6px;
    width: 100%;
    margin: 0;
  }
  .cover-cluster .volume-rail {
    width: 32px;
    height: auto;
    min-height: 0;
    padding: 7px 2px;
    border-radius: 14px;
  }
  .cover-cluster .cover-stage,
  .stream-info {
    width: 100%;
    height: auto;
    min-height: 0;
    aspect-ratio: 1 / 1;
  }
  .volume-label { margin-bottom: 2px; font-size: 6px; }
  .volume-slider-shell { width: 23px; }
  .volume-value { min-width: 28px; margin-top: 1px; font-size: 6.7px; }
  .volume-mute { width: 25px; height: 25px; margin-top: 3px; border-radius: 9px; }
  .volume-mute svg { width: 13px; }

  .stream-info {
    padding: 8px;
    border-radius: 15px;
  }
  .stream-codec { margin-top: 6px; font-size: 18px; }
  .stream-metrics { margin-top: auto; }
  .stream-metric {
    grid-template-columns: 28px minmax(0, 1fr);
    gap: 4px;
    padding: 4px 0;
  }
  .stream-metric > span { font-size: 4.7px; letter-spacing: .11em; }
  .stream-metric > b { font-size: 6.6px; }
  .stream-pulse { right: 8px; bottom: 6px; left: 8px; }

  .track-copy { margin-top: 12px; margin-bottom: 8px; min-height: 0; }
  .track-context { font-size: 8px; }
  .track-copy h1 { font-size: clamp(23px, 7vw, 29px); line-height: 1.02; }
  .artist { margin-top: 8px; font-size: 13px; }
  .album { margin-top: 5px; font-size: 11px; }

  .controls.transport-deck {
    grid-template-columns: minmax(96px, 1.45fr) repeat(3, minmax(44px, .7fr));
    gap: 6px;
    margin-top: 5px;
  }
  .transport-deck .play-button,
  .transport-deck .control-button { height: 52px; }
  .transport-deck .play-button { padding: 0 10px; gap: 8px; }
  .transport-deck .play-button::before { font-size: 8.5px; }
  .transport-play-icons { width: 28px; height: 28px; flex-basis: 28px; }

  .flow-button { min-height: 58px; padding: 0 14px; }

  .status-strip.status-console {
    grid-template-columns: minmax(0, 1.42fr) minmax(112px, .82fr);
    border-radius: 15px;
  }
  .status-console .status-pane { padding: 9px 10px; }
  .status-pane-title strong { font-size: 7.8px; }
  .status-pane-navidrome p { margin-left: 14px; font-size: 6.8px; }
  .status-pane-app {
    flex-direction: column;
    align-items: stretch;
    justify-content: center;
    gap: 6px;
  }
  .app-version-row { align-self: flex-start; }
  .app-version-label { font-size: 5.7px; }
  .app-version-row strong { font-size: 9px; }
  .app-install-state { font-size: 5.8px; }
  .app-install-button {
    width: 100%;
    min-width: 0;
    height: 27px;
    padding: 0 5px;
    font-size: 5.4px;
    letter-spacing: .07em;
  }
  .app-install-button svg { width: 11px; }
}

@media (max-width: 360px) {
  .user-button > span:nth-child(2) { max-width: 34px; }
  .cover-cluster {
    --volume-length: 68px;
    grid-template-columns: 30px minmax(0, 1fr) minmax(0, 1fr);
    gap: 5px;
  }
  .cover-cluster .volume-rail { width: 30px; }
  .stream-codec { font-size: 16px; }
  .stream-metric { grid-template-columns: 25px minmax(0,1fr); gap: 3px; }
  .stream-metric > span { font-size: 4.2px; }
  .stream-metric > b { font-size: 5.9px; }
  .app-install-button span { display: inline; }
}

/* ND Play v0.4.19 — honest iOS system-volume mode. */
.ios-system-volume .volume-rail {
  cursor: help;
}
.ios-system-volume .volume-slider-shell {
  cursor: help;
}
.ios-system-volume .volume-slider {
  pointer-events: none;
  cursor: help;
  opacity: .9;
}
.ios-system-volume .volume-slider::-webkit-slider-thumb {
  width: 0;
  height: 0;
  margin-top: 1.5px;
  border: 0;
  box-shadow: none;
  opacity: 0;
}
.ios-system-volume .volume-ticks {
  opacity: .18;
}
.ios-system-volume .volume-value {
  color: var(--accent);
  font-size: 8px;
  letter-spacing: .12em;
  text-shadow: 0 0 9px rgba(var(--accent-rgb), .35);
}
.ios-system-volume .volume-label {
  letter-spacing: .13em;
}
.ios-system-volume .volume-slider-shell::after {
  content: "BUTTONS";
  position: absolute;
  left: 50%;
  bottom: 3px;
  transform: translateX(-50%) rotate(-90deg);
  transform-origin: center;
  color: rgba(var(--accent-rgb), .55);
  font-size: 5px;
  font-weight: 900;
  letter-spacing: .18em;
  white-space: nowrap;
  pointer-events: none;
}

/* ND Play v0.5.0 — full queue, position indicator and current-track auto-scroll. */

.track-context-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-width: 0;
  margin-bottom: 7px;
}
.track-context-row .track-context {
  min-width: 0;
  margin: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.queue-trigger {
  position: relative;
  flex: 0 0 auto;
  min-height: 29px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 9px;
  overflow: hidden;
  border: 1px solid rgba(var(--accent-rgb), .23);
  border-radius: 10px;
  background:
    linear-gradient(135deg, rgba(var(--accent-rgb), .09), rgba(255,255,255,.018)),
    rgba(7,10,15,.25);
  color: rgba(226,233,244,.72);
  box-shadow: inset 0 1px rgba(255,255,255,.025), 0 0 18px rgba(var(--accent-rgb),.025);
  font-size: 7px;
  font-weight: 900;
  letter-spacing: .12em;
  cursor: pointer;
  transition: transform 160ms ease, color 180ms ease, border-color 180ms ease, background 220ms ease, box-shadow 220ms ease;
}
.queue-trigger:hover {
  color: var(--text);
  border-color: rgba(var(--accent-rgb), .48);
  background: rgba(var(--accent-rgb), .09);
  box-shadow: inset 0 1px rgba(255,255,255,.035), 0 0 22px rgba(var(--accent-rgb),.07);
}
.queue-trigger:active { transform: scale(.96); }
.queue-trigger[aria-expanded="true"] {
  color: var(--accent);
  border-color: rgba(var(--accent-rgb), .62);
  background: rgba(var(--accent-rgb), .12);
}
.queue-trigger strong {
  min-width: 48px;
  color: var(--accent);
  font-size: 9px;
  font-variant-numeric: tabular-nums;
  text-align: right;
  white-space: nowrap;
}
.player-card.is-radio .queue-trigger { display: none; }

.queue-panel {
  position: fixed;
  z-index: 40;
  inset: 0;
  visibility: hidden;
  pointer-events: none;
}
.queue-panel.open {
  visibility: visible;
  pointer-events: auto;
}
.queue-backdrop {
  position: absolute;
  inset: 0;
  width: 100%;
  border: 0;
  background: rgba(3,6,10,.68);
  opacity: 0;
  backdrop-filter: blur(12px) saturate(.78);
  transition: opacity 220ms ease;
}
.queue-panel.open .queue-backdrop { opacity: 1; }
.queue-sheet {
  position: absolute;
  top: max(calc(var(--safe-top) + 18px), 18px);
  right: 18px;
  left: 18px;
  width: min(calc(100% - 36px), 620px);
  max-height: min(76dvh, 700px);
  margin: 0 auto;
  padding: 17px 17px 15px;
  overflow: hidden;
  border: 1px solid rgba(var(--accent-rgb), .34);
  border-radius: 22px;
  background:
    radial-gradient(circle at 100% 0%, rgba(var(--accent-rgb),.13), transparent 42%),
    linear-gradient(180deg, rgba(18,23,32,.97), rgba(8,12,18,.97));
  box-shadow:
    0 30px 100px rgba(0,0,0,.62),
    0 0 42px rgba(var(--accent-rgb),.07),
    inset 0 1px rgba(255,255,255,.045);
  opacity: 0;
  transform: translateY(-22px) scale(.985);
  transition: transform 240ms cubic-bezier(.2,.78,.24,1), opacity 190ms ease;
}
.queue-panel.open .queue-sheet {
  opacity: 1;
  transform: translateY(0) scale(1);
}
.queue-neon-line {
  position: absolute;
  top: 0;
  right: 22px;
  left: 22px;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--accent), transparent);
  box-shadow: 0 0 13px rgba(var(--accent-rgb),.62);
}
.queue-sheet .sheet-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin: 0 0 12px;
  padding: 2px 1px 12px;
  border-bottom: 1px solid rgba(var(--accent-rgb), .13);
}
.queue-sheet .sheet-header p {
  margin: 0 0 4px;
  color: rgba(var(--accent-rgb), .76);
  font-size: 8px;
  font-weight: 900;
  letter-spacing: .16em;
}
.queue-sheet .sheet-header h2 {
  margin: 0;
  color: #edf2fa;
  font-size: 20px;
  letter-spacing: -.025em;
}
.queue-close {
  width: 34px;
  height: 34px;
  flex: 0 0 34px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 11px;
  background: rgba(255,255,255,.025);
  color: var(--muted);
  cursor: pointer;
  transition: color 160ms ease, border-color 160ms ease, background 160ms ease, transform 160ms ease;
}
.queue-close:hover { color: var(--accent); border-color: rgba(var(--accent-rgb),.35); background: rgba(var(--accent-rgb),.07); }
.queue-close:active { transform: scale(.94); }
.queue-close svg { width: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }
.queue-column-head {
  display: grid;
  grid-template-columns: 32px minmax(0,1fr) 48px;
  gap: 10px;
  padding: 0 10px 7px;
  color: rgba(var(--accent-rgb),.45);
  font-size: 6.5px;
  font-weight: 900;
  letter-spacing: .14em;
}
.queue-column-head span:last-child { text-align: right; }
.queue-list {
  max-height: calc(min(74dvh, 690px) - 114px);
  margin: 0;
  padding: 0 3px 2px 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  list-style: none;
  scrollbar-width: thin;
  scrollbar-color: rgba(var(--accent-rgb),.35) transparent;
}
.queue-list::-webkit-scrollbar { width: 5px; }
.queue-list::-webkit-scrollbar-thumb { border-radius: 99px; background: rgba(var(--accent-rgb),.32); }
.queue-item {
  display: block;
  width: 100%;
  min-height: 0;
  padding: 0;
  border: 0;
  border-bottom: 1px solid rgba(255,255,255,.055);
}
.queue-item button {
  position: relative;
  width: 100%;
  min-height: 53px;
  display: grid;
  grid-template-columns: 32px minmax(0,1fr) 48px;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border: 0;
  border-radius: 11px;
  background: transparent;
  color: var(--text);
  text-align: left;
  cursor: pointer;
  transition: background 150ms ease, transform 150ms ease, box-shadow 180ms ease;
}
.queue-item button:hover { background: rgba(var(--accent-rgb),.055); }
.queue-item button:active { transform: scale(.988); }
.queue-order {
  color: rgba(var(--accent-rgb),.48);
  font-size: 9px;
  font-weight: 900;
  font-variant-numeric: tabular-nums;
}
.queue-copy {
  position: relative;
  display: block;
  min-width: 0;
  padding-right: 54px;
}
.queue-copy strong,
.queue-copy small {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.queue-copy strong { color: #e8edf6; font-size: 12px; line-height: 1.18; }
.queue-copy small { margin-top: 4px; color: var(--muted); font-size: 9px; }
.queue-duration {
  color: rgba(226,233,244,.52);
  font-size: 9px;
  font-variant-numeric: tabular-nums;
  text-align: right;
}
.queue-now {
  position: absolute;
  top: 1px;
  right: 0;
  color: var(--accent);
  font-size: 6px;
  font-style: normal;
  font-weight: 900;
  letter-spacing: .13em;
  text-shadow: 0 0 10px rgba(var(--accent-rgb),.42);
}
.queue-item.current button {
  background:
    linear-gradient(90deg, rgba(var(--accent-rgb),.12), rgba(var(--accent-rgb),.035) 72%, transparent);
  box-shadow: inset 2px 0 var(--accent), 0 0 20px rgba(var(--accent-rgb),.035);
}
.queue-item.current .queue-order,
.queue-item.current .queue-copy strong,
.queue-item.current .queue-duration { color: var(--accent); }

.auth-install-panel {
  display: grid;
  grid-template-columns: minmax(0,1fr) auto;
  align-items: center;
  gap: 14px;
  margin-top: 15px;
  padding: 13px 13px 13px 14px;
  overflow: hidden;
  border: 1px solid rgba(var(--accent-rgb),.20);
  border-radius: 16px;
  background:
    radial-gradient(circle at 100% 0%, rgba(var(--accent-rgb),.12), transparent 48%),
    rgba(255,255,255,.018);
  box-shadow: inset 0 1px rgba(255,255,255,.028), 0 0 22px rgba(var(--accent-rgb),.025);
}
.auth-install-panel[hidden] { display: none !important; }
.auth-install-copy { min-width: 0; }
.auth-install-copy > span {
  display: block;
  margin-bottom: 4px;
  color: var(--accent);
  font-size: 7px;
  font-weight: 900;
  letter-spacing: .16em;
}
.auth-install-copy strong {
  display: block;
  color: #edf2fa;
  font-size: 12px;
}
.auth-install-copy small {
  display: block;
  margin-top: 4px;
  color: var(--muted);
  font-size: 9px;
  line-height: 1.35;
}
.auth-install-button {
  min-height: 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 8px 11px;
  border: 1px solid rgba(var(--accent-rgb),.34);
  border-radius: 12px;
  background: rgba(var(--accent-rgb),.09);
  color: var(--accent);
  font-size: 7px;
  font-weight: 900;
  letter-spacing: .11em;
  cursor: pointer;
  box-shadow: 0 0 18px rgba(var(--accent-rgb),.045);
  transition: transform 160ms ease, border-color 160ms ease, background 160ms ease;
}
.auth-install-button:hover { border-color: rgba(var(--accent-rgb),.60); background: rgba(var(--accent-rgb),.14); }
.auth-install-button:active { transform: scale(.96); }
.auth-install-button svg { width: 14px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.auth-install-button.is-guide { color: #dfe7f2; border-color: rgba(255,255,255,.13); background: rgba(255,255,255,.035); }

@media (max-width: 560px) {
  .track-context-row { gap: 8px; }
  .queue-trigger { min-height: 27px; padding: 4px 7px; font-size: 6px; border-radius: 9px; }
  .queue-trigger strong { font-size: 8px; }
  .queue-sheet {
    top: max(calc(var(--safe-top) + 10px), 10px);
    right: 10px;
    left: 10px;
    width: calc(100% - 20px);
    max-height: min(80dvh, 700px);
    padding: 14px 12px 12px;
    border-radius: 19px;
  }
  .queue-sheet .sheet-header { margin-bottom: 9px; padding-bottom: 10px; }
  .queue-sheet .sheet-header h2 { font-size: 18px; }
  .queue-column-head { grid-template-columns: 28px minmax(0,1fr) 42px; gap: 8px; padding-right: 8px; padding-left: 8px; }
  .queue-list { max-height: calc(min(80dvh, 700px) - 102px); }
  .queue-item button { grid-template-columns: 28px minmax(0,1fr) 42px; gap: 8px; min-height: 49px; padding: 7px 8px; }
  .queue-copy { padding-right: 46px; }
  .queue-copy strong { font-size: 11px; }
  .queue-copy small { font-size: 8px; }
  .queue-order, .queue-duration { font-size: 8px; }
  .auth-install-panel { gap: 10px; padding: 11px; }
  .auth-install-copy small { font-size: 8px; }
  .auth-install-button { min-height: 36px; padding: 7px 9px; }
}

@media (max-width: 390px) {
  .queue-trigger { gap: 5px; }
  .auth-install-panel { grid-template-columns: 1fr; }
  .auth-install-button { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  .queue-sheet,
  .queue-backdrop,
  .queue-trigger,
  .auth-install-button { transition-duration: .01ms !important; }
}


/* ND Play v0.5.0 — complete Russian track-count labels. */
.mix-card-top b {
  max-width: calc(100% - 16px);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 8px;
  letter-spacing: .065em;
}
@media (max-width: 430px) {
  .mix-card-top b { font-size: 7.4px; letter-spacing: .045em; }
  .queue-trigger strong { min-width: 43px; font-size: 8px; }
}

/* ND Play v0.5.0 — two-sided Player / Editorial catalog. */
.company-signature {
  margin-top: 1px;
  color: rgba(223,230,242,.62);
  font-family: Georgia, 'Times New Roman', serif;
  font-size: 10px;
  font-style: italic;
  font-weight: 500;
  letter-spacing: .025em;
  line-height: 1.1;
  text-transform: none;
  text-shadow: 0 0 12px rgba(var(--accent-rgb),.10);
}

.catalog-flip-button {
  position: relative;
  width: 100%;
  min-height: 46px;
  display: grid;
  grid-template-columns: minmax(0,1fr) 42px minmax(0,1fr);
  align-items: center;
  gap: 7px;
  margin-top: 11px;
  padding: 5px 8px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.09);
  border-radius: 16px;
  background:
    radial-gradient(circle at 100% 0%, rgba(var(--accent-rgb),.08), transparent 46%),
    linear-gradient(145deg, rgba(255,255,255,.045), rgba(255,255,255,.014));
  color: var(--muted);
  cursor: pointer;
  isolation: isolate;
  transition: border-color 220ms ease, box-shadow 220ms ease, background 220ms ease, transform 150ms ease;
}
.catalog-flip-button::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(100deg, transparent 20%, rgba(var(--accent-rgb),.10) 50%, transparent 80%);
  opacity: 0;
  transform: translateX(-70%);
}
.catalog-flip-button:hover {
  border-color: rgba(var(--accent-rgb),.31);
  box-shadow: 0 12px 30px rgba(0,0,0,.16), 0 0 20px rgba(var(--accent-rgb),.035);
}
.catalog-flip-button:active { transform: scale(.987); }
.catalog-flip-side {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 7px;
  font-size: 8px;
  letter-spacing: .12em;
  white-space: nowrap;
  transition: color 220ms ease, opacity 220ms ease;
}
.catalog-flip-side strong {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.catalog-flip-listen { justify-content: flex-start; color: var(--accent); }
.catalog-flip-listen > i,
.catalog-flip-editorial > i {
  width: 5px;
  height: 5px;
  flex: 0 0 5px;
  border-radius: 50%;
  background: rgba(var(--accent-rgb),.38);
  box-shadow: 0 0 7px rgba(var(--accent-rgb),.20);
  transition: background 220ms ease, box-shadow 220ms ease, transform 220ms ease;
}
.catalog-flip-editorial { justify-content: flex-end; }
.catalog-flip-core {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  justify-self: center;
  border: 1px solid rgba(var(--accent-rgb),.18);
  border-radius: 12px;
  background: rgba(5,8,13,.38);
  color: rgba(var(--accent-rgb),.76);
  transition: transform 520ms cubic-bezier(.2,.78,.22,1), color 220ms ease, border-color 220ms ease;
}
.catalog-flip-core svg {
  width: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.65;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.catalog-flip-button.is-editorial .catalog-flip-core { transform: rotate(180deg); }
.catalog-flip-button.is-editorial .catalog-flip-listen { color: var(--muted); }
.catalog-flip-button.is-editorial .catalog-flip-editorial { color: var(--accent); }
.catalog-flip-button.is-editorial .catalog-flip-listen > i { background: rgba(var(--accent-rgb),.30); box-shadow: none; }
.catalog-flip-button.is-editorial .catalog-flip-editorial > i,
.catalog-flip-button.has-content:not(.is-editorial) .catalog-flip-editorial > i {
  background: var(--accent);
  box-shadow: 0 0 11px rgba(var(--accent-rgb),.55);
}
.catalog-flip-button.has-unread {
  animation: editorial-button-breathe 4.2s ease-in-out infinite;
}
.catalog-flip-button.has-unread::before {
  animation: editorial-button-sheen 4.2s ease-in-out infinite;
}
.catalog-flip-button.has-unread .catalog-flip-editorial > i {
  background: var(--accent);
  box-shadow: 0 0 15px rgba(var(--accent-rgb),.82);
  animation: editorial-dot-breathe 4.2s ease-in-out infinite;
}
@keyframes editorial-button-breathe {
  0%, 100% { border-color: rgba(255,255,255,.09); box-shadow: 0 0 0 rgba(var(--accent-rgb),0); }
  48%, 58% { border-color: rgba(var(--accent-rgb),.38); box-shadow: 0 0 28px rgba(var(--accent-rgb),.075); }
}
@keyframes editorial-button-sheen {
  0%, 18%, 100% { opacity: 0; transform: translateX(-70%); }
  48% { opacity: .52; }
  72% { opacity: 0; transform: translateX(70%); }
}
@keyframes editorial-dot-breathe {
  0%, 100% { transform: scale(.86); opacity: .70; }
  50% { transform: scale(1.34); opacity: 1; }
}

.catalog-stage {
  position: relative;
  margin-top: 2px;
  perspective: 1500px;
  perspective-origin: 50% 18%;
}
.catalog-flipper {
  position: relative;
  width: 100%;
  min-height: 1px;
  transform-style: preserve-3d;
  transition: transform 560ms cubic-bezier(.2,.76,.22,1), height 360ms cubic-bezier(.2,.76,.22,1);
  will-change: transform, height;
}
.catalog-stage.is-editorial .catalog-flipper { transform: rotateY(180deg); }
.catalog-face {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  width: 100%;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  transform-style: preserve-3d;
}
.catalog-face-player { transform: rotateY(0deg); }
.catalog-face-editorial {
  padding-top: 10px;
  transform: rotateY(180deg);
}
.catalog-stage.is-settled .catalog-face[aria-hidden="false"] {
  position: relative;
}
.catalog-stage.is-settled .catalog-face[aria-hidden="true"] {
  visibility: hidden;
  pointer-events: none;
}

.editorial-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 12px;
  padding: 13px 14px;
  border: 1px solid rgba(var(--accent-rgb),.18);
  border-radius: 17px;
  background:
    radial-gradient(circle at 100% 0%, rgba(var(--accent-rgb),.12), transparent 45%),
    rgba(255,255,255,.025);
}
.editorial-header p {
  margin: 0 0 4px;
  color: var(--accent);
  font-size: 8px;
  font-weight: 900;
  letter-spacing: .17em;
}
.editorial-header h2 {
  margin: 0;
  color: #edf2f9;
  font-size: 18px;
  letter-spacing: -.025em;
}
.editorial-header span {
  display: block;
  margin-top: 5px;
  color: var(--muted);
  font-size: 9px;
  line-height: 1.35;
}
.editorial-retention {
  width: 50px;
  height: 50px;
  flex: 0 0 50px;
  display: grid;
  place-content: center;
  border: 1px solid rgba(var(--accent-rgb),.23);
  border-radius: 15px;
  background: rgba(4,8,13,.38);
  text-align: center;
}
.editorial-retention strong { color: var(--accent); font-size: 18px; line-height: 1; }
.editorial-retention small { margin-top: 3px; color: var(--muted); font-size: 6px; font-weight: 900; letter-spacing: .13em; }

.editorial-feed { display: grid; gap: 14px; }
.editorial-card {
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.085);
  border-radius: 21px;
  background:
    radial-gradient(circle at 100% 0%, rgba(var(--accent-rgb),.09), transparent 42%),
    linear-gradient(145deg, rgba(255,255,255,.04), rgba(255,255,255,.018));
  box-shadow: inset 0 1px rgba(255,255,255,.025);
}
.editorial-card::after {
  content: "";
  position: absolute;
  z-index: 3;
  top: 11px;
  right: 11px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 11px rgba(var(--accent-rgb),.58);
}
.editorial-flowweek {
  border-color: rgba(var(--accent-rgb),.22);
  background:
    radial-gradient(circle at 100% 0%, rgba(var(--accent-rgb),.18), transparent 46%),
    linear-gradient(145deg, rgba(var(--accent-rgb),.06), rgba(255,255,255,.018));
}
.editorial-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 12px;
  padding: 12px 12px 0;
}
.editorial-visual {
  position: relative;
  min-width: 0;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.07);
  border-radius: 18px;
  background: rgba(0,0,0,.34);
  box-shadow: 0 16px 36px rgba(0,0,0,.24);
}
.editorial-visual img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
  object-position: center;
  background: rgba(3,6,10,.78);
}
.editorial-visual > span {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(145deg, rgba(255,255,255,.035), transparent 34%),
    linear-gradient(0deg, rgba(8,11,17,.16), transparent 38%);
}
.editorial-facts {
  position: relative;
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  padding: 15px 15px 14px;
  overflow: hidden;
  border: 1px solid rgba(var(--accent-rgb),.24);
  border-radius: 18px;
  background:
    radial-gradient(circle at 100% 0%, rgba(var(--accent-rgb),.11), transparent 48%),
    rgba(255,255,255,.025);
  box-shadow: inset 0 1px rgba(255,255,255,.03);
}
.editorial-facts-label {
  display: block;
  padding-right: 16px;
  color: var(--accent);
  font-size: 8px;
  font-weight: 900;
  letter-spacing: .14em;
  text-transform: uppercase;
}
.editorial-facts > p {
  margin: 12px 0 0;
  color: var(--muted);
  font-size: 10px;
  line-height: 1.55;
}
.editorial-facts ul {
  display: grid;
  gap: 0;
  margin: 14px 0 0;
  padding: 0;
  list-style: none;
}
.editorial-facts li {
  display: grid;
  grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
  align-items: center;
  gap: 8px;
  min-height: 34px;
  padding: 7px 0;
  border-top: 1px solid rgba(255,255,255,.065);
}
.editorial-facts li:first-child { border-top-color: rgba(var(--accent-rgb),.14); }
.editorial-facts li span {
  overflow: hidden;
  color: rgba(226,233,244,.42);
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 8px;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.editorial-facts li strong {
  overflow: hidden;
  color: rgba(var(--accent-rgb),.93);
  text-overflow: ellipsis;
  font-size: 10px;
  font-weight: 850;
  line-height: 1.25;
  text-align: right;
}
.editorial-facts li > strong:only-child {
  grid-column: 1 / -1;
  text-align: left;
}
.editorial-facts-pulse {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 11px rgba(var(--accent-rgb),.62);
}
.editorial-content {
  min-width: 0;
  padding: 16px 17px 17px;
}
.editorial-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding-right: 10px;
}
.editorial-meta strong {
  min-width: 0;
  overflow: hidden;
  color: var(--accent);
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 8px;
  font-weight: 900;
  letter-spacing: .14em;
}
.editorial-meta time {
  flex: 0 0 auto;
  color: rgba(226,233,244,.42);
  font-size: 8px;
  font-variant-numeric: tabular-nums;
}
.editorial-content h3 {
  margin: 10px 0 0;
  color: #f0f4fa;
  font-size: clamp(24px, 5.6vw, 31px);
  line-height: 1.04;
  letter-spacing: -.04em;
}
.editorial-subtitle {
  margin: 7px 0 0;
  color: rgba(226,233,244,.67);
  font-size: 12px;
  font-weight: 760;
}
.editorial-summary {
  margin: 13px 0 0;
  color: #dce3ee;
  font-size: 12.5px;
  line-height: 1.58;
}
.editorial-body,
.editorial-section-text {
  margin: 10px 0 0;
  color: var(--muted);
  font-size: 11.5px;
  line-height: 1.64;
}
.editorial-section-block {
  margin-top: 15px;
  padding-top: 12px;
  border-top: 1px solid rgba(255,255,255,.065);
}
.editorial-section-block h4 {
  margin: 0;
  color: rgba(var(--accent-rgb),.9);
  font-size: 8.5px;
  font-weight: 900;
  letter-spacing: .13em;
  text-transform: uppercase;
}
.editorial-section-block ul {
  display: grid;
  gap: 7px;
  margin: 10px 0 0;
  padding: 0;
  list-style: none;
}
.editorial-section-block li {
  position: relative;
  padding-left: 15px;
  color: rgba(226,233,244,.7);
  font-size: 10.5px;
  line-height: 1.45;
}
.editorial-section-block li::before {
  content: "";
  position: absolute;
  top: .58em;
  left: 1px;
  width: 5px;
  height: 1px;
  background: var(--accent);
  box-shadow: 0 0 7px rgba(var(--accent-rgb),.54);
}
.editorial-play-button {
  width: 100%;
  min-height: 43px;
  display: grid;
  grid-template-columns: 10px minmax(0,1fr) 18px;
  align-items: center;
  gap: 10px;
  margin-top: 17px;
  padding: 8px 11px;
  border: 1px solid rgba(var(--accent-rgb),.23);
  border-radius: 13px;
  background: rgba(var(--accent-rgb),.06);
  color: #edf2f9;
  text-align: left;
  cursor: pointer;
  transition: transform 150ms ease, border-color 180ms ease, background 180ms ease;
}
.editorial-play-button:hover { border-color: rgba(var(--accent-rgb),.48); background: rgba(var(--accent-rgb),.10); }
.editorial-play-button:active { transform: scale(.985); }
.editorial-play-button:disabled { opacity: .5; cursor: default; }
.editorial-play-button strong { font-size: 8.5px; letter-spacing: .12em; }
.editorial-play-button svg { width: 16px; fill: none; stroke: var(--accent); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.editorial-play-pulse {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 10px rgba(var(--accent-rgb),.62);
}
.editorial-play-button.is-loading .editorial-play-pulse { animation: editorial-dot-breathe 700ms ease-in-out infinite; }

.editorial-empty {
  min-height: 190px;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 8px;
  padding: 28px 18px;
  border: 1px dashed rgba(var(--accent-rgb),.19);
  border-radius: 19px;
  background: rgba(255,255,255,.018);
  text-align: center;
}
.editorial-empty[hidden] { display: none; }
.editorial-empty strong { color: #e8edf5; font-size: 13px; }
.editorial-empty p { max-width: 320px; margin: 0; color: var(--muted); font-size: 9px; line-height: 1.5; }
.editorial-empty-mark { height: 32px; display: flex; align-items: end; gap: 4px; }
.editorial-empty-mark i { width: 3px; border-radius: 4px; background: var(--accent); box-shadow: 0 0 9px rgba(var(--accent-rgb),.42); opacity: .6; }
.editorial-empty-mark i:nth-child(1) { height: 12px; }
.editorial-empty-mark i:nth-child(2) { height: 26px; }
.editorial-empty-mark i:nth-child(3) { height: 18px; }

@media (max-width: 520px) {
  .editorial-hero { gap: 9px; padding: 9px 9px 0; }
  .editorial-visual,
  .editorial-facts { border-radius: 15px; }
  .editorial-facts { padding: 12px 11px 10px; }
  .editorial-facts-label { font-size: 7px; letter-spacing: .11em; }
  .editorial-facts ul { margin-top: 10px; }
  .editorial-facts li { grid-template-columns: minmax(0,.82fr) minmax(0,1.18fr); gap: 5px; min-height: 29px; padding: 5px 0; }
  .editorial-facts li span { font-size: 6.5px; }
  .editorial-facts li strong { font-size: 8.5px; }
  .editorial-facts > p { margin-top: 9px; font-size: 8.5px; }
  .editorial-content { padding: 14px 13px 14px; }
  .editorial-content h3 { font-size: 23px; }
  .editorial-subtitle { font-size: 10.5px; }
  .editorial-summary { font-size: 11px; }
  .editorial-body, .editorial-section-text { font-size: 10px; }
}

@media (max-width: 350px) {
  .editorial-hero { grid-template-columns: 1fr; }
  .editorial-visual { max-height: 280px; }
}

@media (max-width: 430px) {
  .company-signature { display: block; font-size: 6.5px; letter-spacing: .01em; }
  .catalog-flip-button { grid-template-columns: minmax(0,1fr) 36px minmax(0,1.25fr); min-height: 42px; padding: 4px 6px; }
  .catalog-flip-side { gap: 5px; padding: 0 4px; font-size: 6.5px; letter-spacing: .08em; }
  .catalog-flip-core { width: 30px; height: 30px; border-radius: 10px; }
  .catalog-flip-core svg { width: 16px; }
  .editorial-header { padding: 11px; }
  .editorial-header h2 { font-size: 16px; }
  .editorial-header span { font-size: 8px; }
  .editorial-retention { width: 44px; height: 44px; flex-basis: 44px; }
}

@media (max-width: 360px) {
  .catalog-flip-editorial strong { max-width: 88px; }
}

@media (prefers-reduced-motion: reduce) {
  .catalog-flipper { transition-duration: .01ms !important; }
  .catalog-flip-button.has-unread,
  .catalog-flip-button.has-unread::before,
  .catalog-flip-button.has-unread .catalog-flip-editorial > i,
  .editorial-play-button.is-loading .editorial-play-pulse { animation: none !important; }
}


/* ND Play v0.5.3 — player-inspired news hero with cover and facts panel. */

/* ND Play v0.5.3 — magazine-style pager: one weekly issue or one date at a time. */
.editorial-retention {
  width: 62px;
  flex-basis: 62px;
}
.editorial-retention strong {
  font-size: 14px;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.editorial-pager {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) 34px;
  align-items: stretch;
  gap: 7px;
  margin: 0 0 10px;
}
.editorial-pager[hidden],
.editorial-issue-tabs[hidden] { display: none !important; }
.editorial-page-arrow {
  min-width: 0;
  display: grid;
  place-items: center;
  border: 1px solid rgba(255,255,255,.075);
  border-radius: 11px;
  background: rgba(255,255,255,.025);
  color: var(--muted);
  cursor: pointer;
  transition: color 160ms ease, border-color 160ms ease, background 160ms ease, transform 160ms ease, opacity 160ms ease;
}
.editorial-page-arrow:hover:not(:disabled) {
  color: var(--accent);
  border-color: rgba(var(--accent-rgb),.34);
  background: rgba(var(--accent-rgb),.07);
  transform: translateY(-1px);
}
.editorial-page-arrow:active:not(:disabled) { transform: scale(.95); }
.editorial-page-arrow:disabled { opacity: .25; cursor: default; }
.editorial-page-arrow svg {
  width: 15px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.editorial-page-tabs {
  display: flex;
  gap: 6px;
  min-width: 0;
  overflow-x: auto;
  overscroll-behavior-inline: contain;
  scrollbar-width: none;
  scroll-snap-type: inline proximity;
  padding: 1px;
}
.editorial-page-tabs::-webkit-scrollbar { display: none; }
.editorial-page-tab {
  position: relative;
  min-width: 68px;
  min-height: 39px;
  flex: 0 0 auto;
  display: grid;
  align-content: center;
  gap: 3px;
  padding: 6px 12px 6px 10px;
  overflow: hidden;
  scroll-snap-align: center;
  border: 1px solid rgba(255,255,255,.075);
  border-radius: 11px;
  background:
    radial-gradient(circle at 100% 0%, rgba(var(--accent-rgb),.08), transparent 52%),
    rgba(255,255,255,.025);
  color: var(--muted);
  text-align: left;
  cursor: pointer;
  transition: color 160ms ease, border-color 160ms ease, background 160ms ease, transform 160ms ease, box-shadow 180ms ease;
}
.editorial-page-tab:hover { color: #e8edf5; border-color: rgba(var(--accent-rgb),.3); transform: translateY(-1px); }
.editorial-page-tab > span {
  font-size: 5.5px;
  font-weight: 900;
  letter-spacing: .14em;
  opacity: .55;
}
.editorial-page-tab > strong {
  font-size: 8px;
  font-weight: 900;
  letter-spacing: .06em;
  white-space: nowrap;
}
.editorial-page-tab > i {
  position: absolute;
  top: 7px;
  right: 7px;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: rgba(var(--accent-rgb),.28);
  box-shadow: 0 0 5px rgba(var(--accent-rgb),.12);
}
.editorial-page-tab.has-unread > i {
  background: var(--accent);
  box-shadow: 0 0 10px rgba(var(--accent-rgb),.72);
}
.editorial-page-tab.is-active {
  color: #f0f4fa;
  border-color: rgba(var(--accent-rgb),.64);
  background:
    radial-gradient(circle at 100% 0%, rgba(var(--accent-rgb),.24), transparent 55%),
    rgba(var(--accent-rgb),.075);
  box-shadow: inset 0 0 0 1px rgba(var(--accent-rgb),.08), 0 8px 20px rgba(var(--accent-rgb),.06);
}
.editorial-page-tab.is-active > span { color: var(--accent); opacity: .82; }
.editorial-issue-tabs {
  display: flex;
  gap: 6px;
  margin: 0 0 10px;
  padding: 4px;
  border: 1px solid rgba(255,255,255,.065);
  border-radius: 13px;
  background: rgba(4,8,13,.24);
}
.editorial-issue-tab {
  min-width: 0;
  min-height: 31px;
  flex: 1 1 0;
  border: 1px solid transparent;
  border-radius: 9px;
  background: transparent;
  color: var(--muted);
  font-size: 7px;
  font-weight: 900;
  letter-spacing: .1em;
  cursor: pointer;
  transition: color 150ms ease, border-color 150ms ease, background 150ms ease, box-shadow 150ms ease;
}
.editorial-issue-tab:hover { color: #e9eef6; }
.editorial-issue-tab.is-active {
  color: var(--accent);
  border-color: rgba(var(--accent-rgb),.28);
  background: rgba(var(--accent-rgb),.08);
  box-shadow: 0 0 16px rgba(var(--accent-rgb),.035);
}
.editorial-feed {
  min-width: 0;
  touch-action: pan-y;
}
.editorial-feed .editorial-card {
  animation: editorial-page-enter 300ms cubic-bezier(.16,1,.3,1) both;
}
@keyframes editorial-page-enter {
  from { opacity: 0; transform: translateX(10px) scale(.993); filter: blur(2px); }
  to { opacity: 1; transform: translateX(0) scale(1); filter: blur(0); }
}

@media (max-width: 430px) {
  .editorial-retention { width: 55px; flex-basis: 55px; }
  .editorial-retention strong { font-size: 12px; }
  .editorial-pager { grid-template-columns: 30px minmax(0,1fr) 30px; gap: 5px; }
  .editorial-page-tab { min-width: 62px; min-height: 37px; padding: 5px 10px 5px 8px; }
  .editorial-page-tab > strong { font-size: 7.5px; }
  .editorial-issue-tab { font-size: 6.5px; }
}

@media (prefers-reduced-motion: reduce) {
  .editorial-feed .editorial-card { animation: none !important; }
}


/* ND Play v0.5.4 — prevent hidden NEWS pager from horizontally scrolling the player card. */
.player-card {
  overflow: clip;
  overflow-clip-margin: 0;
}
.catalog-stage.is-settled .catalog-face[aria-hidden="true"] {
  display: none;
}
.editorial-page-tabs {
  scroll-behavior: smooth;
}
@media (prefers-reduced-motion: reduce) {
  .editorial-page-tabs { scroll-behavior: auto; }
}


/* ND Play v0.5.5 — dual layout, stable signal states and wider activity console. */
.player-primary,
.player-secondary {
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.layout-mode-button {
  position: relative;
  width: 40px;
  height: 38px;
  flex: 0 0 40px;
  display: none;
  place-items: center;
  overflow: hidden;
  border: 1px solid rgba(var(--accent-rgb), .22);
  border-radius: 13px;
  background: rgba(var(--accent-rgb), .045);
  color: rgba(var(--accent-rgb), .68);
  cursor: pointer;
  transition: color 180ms ease, border-color 180ms ease, background 180ms ease, transform 150ms ease, opacity 180ms ease;
}
.layout-mode-button:hover:not(:disabled) {
  color: var(--accent);
  border-color: rgba(var(--accent-rgb), .46);
  background: rgba(var(--accent-rgb), .09);
}
.layout-mode-button:active:not(:disabled) { transform: scale(.95); }
.layout-mode-button:disabled { opacity: .35; cursor: default; }
.layout-mode-button .layout-icon {
  position: absolute;
  width: 21px;
  height: 21px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  transition: opacity 180ms ease, transform 260ms cubic-bezier(.2,.78,.22,1);
}
.layout-icon-wide { opacity: 0; transform: rotate(-14deg) scale(.72); }
.layout-mode-button.is-wide .layout-icon-portrait { opacity: 0; transform: rotate(14deg) scale(.72); }
.layout-mode-button.is-wide .layout-icon-wide { opacity: 1; transform: rotate(0) scale(1); }
.layout-mode-button > i {
  position: absolute;
  top: 7px;
  right: 7px;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: rgba(var(--accent-rgb), .34);
  box-shadow: 0 0 6px rgba(var(--accent-rgb), .16);
}
.layout-mode-button.is-wide > i {
  background: var(--accent);
  box-shadow: 0 0 10px rgba(var(--accent-rgb), .66);
}

.flow-button small {
  color: var(--accent);
  font-size: 9px;
  font-weight: 850;
  letter-spacing: .12em;
  text-transform: uppercase;
  text-shadow: 0 0 12px rgba(var(--accent-rgb), .34);
}

/* A steady bright dot means the side is active. A pulse means unread NEWS. */
.catalog-flip-button.has-content:not(.is-editorial) .catalog-flip-editorial > i {
  background: rgba(var(--accent-rgb), .32);
  box-shadow: 0 0 7px rgba(var(--accent-rgb), .16);
  transform: scale(1);
}
.catalog-flip-button:not(.is-editorial) .catalog-flip-listen > i,
.catalog-flip-button.is-editorial .catalog-flip-editorial > i {
  background: var(--accent);
  box-shadow: 0 0 12px rgba(var(--accent-rgb), .62);
  transform: scale(1.13);
}
.catalog-flip-button.is-editorial .catalog-flip-listen > i {
  background: rgba(var(--accent-rgb), .28);
  box-shadow: 0 0 5px rgba(var(--accent-rgb), .10);
  transform: scale(1);
}
.catalog-flip-button.has-unread:not(.is-editorial) .catalog-flip-editorial > i {
  background: var(--accent);
  box-shadow: 0 0 15px rgba(var(--accent-rgb), .82);
  animation: editorial-dot-breathe 4.2s ease-in-out infinite;
}

/* The large title is the only НОВОСТИ ND PLAY heading. */
.editorial-header h2 { margin-top: 0; }

@media (min-width: 900px) {
  .layout-mode-button { display: grid; }
  .app-shell.layout-wide {
    width: min(100%, 1180px);
    height: 100dvh;
    min-height: 0;
    overflow: hidden;
    padding-bottom: max(14px, env(safe-area-inset-bottom));
  }
  .app-shell.layout-wide .topbar,
  .app-shell.layout-wide .status-strip {
    flex: 0 0 auto;
  }
  .app-shell.layout-wide .player-card {
    flex: 1 1 auto;
    min-height: 0;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: stretch;
    gap: 22px;
    padding: 20px;
  }
  .app-shell.layout-wide .player-primary,
  .app-shell.layout-wide .player-secondary {
    min-height: 0;
    overflow-x: clip;
    overflow-y: auto;
    padding-right: 5px;
    scrollbar-width: thin;
    scrollbar-color: rgba(var(--accent-rgb), .28) transparent;
  }
  .app-shell.layout-wide .player-primary::-webkit-scrollbar,
  .app-shell.layout-wide .player-secondary::-webkit-scrollbar { width: 5px; }
  .app-shell.layout-wide .player-primary::-webkit-scrollbar-thumb,
  .app-shell.layout-wide .player-secondary::-webkit-scrollbar-thumb {
    border-radius: 99px;
    background: rgba(var(--accent-rgb), .25);
  }
  .app-shell.layout-wide .player-secondary {
    padding-left: 18px;
    border-left: 1px solid rgba(255,255,255,.065);
  }
  .app-shell.layout-wide .catalog-flip-button { margin-top: 0; }
  .app-shell.layout-wide .status-strip { margin-top: 12px; }
}

@media (max-width: 430px) {
  .flow-button small { font-size: 7.2px; letter-spacing: .075em; }
}

@media (prefers-reduced-motion: reduce) {
  .layout-mode-button .layout-icon { transition-duration: .01ms !important; }
}


/* ND Play v0.5.6 — clickable artist profile and biography overlay. */

.artist-bio-panel {
  position: fixed;
  z-index: 40;
  inset: 0;
  visibility: hidden;
  pointer-events: none;
}
.artist-bio-panel.open {
  visibility: visible;
  pointer-events: auto;
}
.artist-bio-backdrop {
  position: absolute;
  inset: 0;
  width: 100%;
  border: 0;
  background: rgba(3,6,10,.72);
  opacity: 0;
  backdrop-filter: blur(13px) saturate(.82);
  transition: opacity 220ms ease;
}
.artist-bio-panel.open .artist-bio-backdrop { opacity: 1; }
.artist-bio-sheet {
  position: absolute;
  top: max(calc(env(safe-area-inset-top) + 18px), 18px);
  right: 18px;
  left: 18px;
  width: min(calc(100% - 36px), 720px);
  max-height: min(82dvh, 760px);
  margin: 0 auto;
  padding: 20px 22px 22px;
  overflow: hidden;
  border: 1px solid rgba(var(--accent-rgb), .38);
  border-radius: 24px;
  background:
    radial-gradient(circle at 100% 0%, rgba(var(--accent-rgb),.14), transparent 44%),
    linear-gradient(180deg, rgba(18,23,32,.985), rgba(8,12,18,.985));
  box-shadow: 0 34px 110px rgba(0,0,0,.68), 0 0 48px rgba(var(--accent-rgb),.08), inset 0 1px rgba(255,255,255,.045);
  opacity: 0;
  transform: translateY(-20px) scale(.985);
  transition: transform 240ms cubic-bezier(.2,.78,.24,1), opacity 190ms ease;
}
.artist-bio-panel.open .artist-bio-sheet {
  opacity: 1;
  transform: translateY(0) scale(1);
}
.artist-bio-neon-line {
  position: absolute;
  top: 0;
  right: 24px;
  left: 24px;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--accent), transparent);
  box-shadow: 0 0 18px rgba(var(--accent-rgb),.48);
}
.artist-bio-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
  padding-bottom: 16px;
  border-bottom: 1px solid rgba(var(--accent-rgb), .15);
}
.artist-bio-header p {
  margin: 0 0 6px;
  color: var(--accent);
  font-size: 8px;
  font-weight: 900;
  letter-spacing: .16em;
}
.artist-bio-header h2 {
  margin: 0;
  color: #f1f4fa;
  font-size: clamp(22px, 4vw, 30px);
  line-height: 1.12;
  letter-spacing: -.025em;
}
.artist-bio-close {
  width: 36px;
  height: 36px;
  flex: 0 0 36px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(255,255,255,.09);
  border-radius: 12px;
  background: rgba(255,255,255,.03);
  color: var(--muted);
  cursor: pointer;
  transition: color 160ms ease, border-color 160ms ease, background 160ms ease, transform 160ms ease;
}
.artist-bio-close:hover { color: var(--accent); border-color: rgba(var(--accent-rgb),.4); background: rgba(var(--accent-rgb),.08); }
.artist-bio-close:active { transform: scale(.94); }
.artist-bio-close svg { width: 17px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }
.artist-bio-status,
.artist-bio-text {
  margin-top: 18px;
  max-height: calc(min(82dvh, 760px) - 112px);
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: rgba(var(--accent-rgb),.36) transparent;
}
.artist-bio-status {
  padding: 22px;
  border: 1px solid rgba(255,255,255,.07);
  border-radius: 16px;
  background: rgba(255,255,255,.025);
  color: var(--muted);
  font-size: 14px;
  line-height: 1.6;
}
.artist-bio-text {
  padding: 2px 7px 8px 2px;
  color: #dfe5ee;
  white-space: pre-line;
  font-size: clamp(15px, 2vw, 17px);
  line-height: 1.78;
  letter-spacing: .002em;
}
.artist-bio-text::-webkit-scrollbar { width: 6px; }
.artist-bio-text::-webkit-scrollbar-thumb { border-radius: 99px; background: rgba(var(--accent-rgb),.34); }

@media (max-width: 560px) {
  .artist-bio-sheet {
    top: max(calc(env(safe-area-inset-top) + 10px), 10px);
    right: 10px;
    left: 10px;
    width: calc(100% - 20px);
    max-height: min(86dvh, 760px);
    padding: 17px 15px 18px;
    border-radius: 20px;
  }
  .artist-bio-header h2 { font-size: 22px; }
  .artist-bio-status,
  .artist-bio-text { max-height: calc(min(86dvh, 760px) - 102px); }
  .artist-bio-text { font-size: 15px; line-height: 1.72; }
}

@media (prefers-reduced-motion: reduce) {
  .artist-bio-sheet,
.artist-bio-backdrop { transition-duration: .01ms !important; }
}

/* ND Play v0.5.7 — album dossier overlay. */
.album-trigger {
  appearance: none;
  padding: 0;
  border: 0;
  color: inherit;
  cursor: pointer;
  text-align: inherit;
}
.album-trigger:disabled { cursor: default; }
.album-trigger-label {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 3;
  padding: 5px 8px;
  border: 1px solid rgba(var(--accent-rgb), .28);
  border-radius: 999px;
  background: rgba(5,9,14,.66);
  color: var(--accent);
  font-size: 7px;
  font-weight: 900;
  letter-spacing: .12em;
  opacity: 0;
  transform: translateY(-3px);
  backdrop-filter: blur(8px);
  transition: opacity 170ms ease, transform 170ms ease, border-color 170ms ease;
}
.album-trigger:not(:disabled):hover .album-trigger-label,
.album-trigger:not(:disabled):focus-visible .album-trigger-label {
  opacity: 1;
  transform: translateY(0);
  border-color: rgba(var(--accent-rgb), .55);
}
.album-trigger:not(:disabled):focus-visible {
  outline: 2px solid rgba(var(--accent-rgb), .62);
  outline-offset: 4px;
}
.album-trigger:disabled .album-trigger-label { display: none; }

.album-panel {
  position: fixed;
  z-index: 42;
  inset: 0;
  visibility: hidden;
  pointer-events: none;
}
.album-panel.open { visibility: visible; pointer-events: auto; }
.album-backdrop {
  position: absolute;
  inset: 0;
  width: 100%;
  border: 0;
  background: rgba(3,6,10,.83);
  opacity: 0;
  transition: opacity 180ms ease;
}
.album-panel.open .album-backdrop { opacity: 1; }
.album-sheet {
  position: absolute;
  top: max(calc(env(safe-area-inset-top) + 12px), 12px);
  right: 12px;
  left: 12px;
  width: min(calc(100% - 24px), 980px);
  max-height: min(92dvh, 920px);
  margin: 0 auto;
  padding: 20px 22px 22px;
  overflow: hidden;
  border: 1px solid rgba(var(--accent-rgb), .38);
  border-radius: 25px;
  background:
    linear-gradient(rgba(var(--accent-rgb),.025) 1px, transparent 1px) 0 0 / 100% 28px,
    radial-gradient(circle at 100% 0%, rgba(var(--accent-rgb),.13), transparent 38%),
    linear-gradient(180deg, rgba(18,23,32,.995), rgba(7,11,17,.995));
  box-shadow: 0 36px 120px rgba(0,0,0,.72), 0 0 52px rgba(var(--accent-rgb),.07), inset 0 1px rgba(255,255,255,.045);
  opacity: 0;
  transform: translateY(-14px) scale(.992);
  transition: transform 210ms cubic-bezier(.2,.78,.24,1), opacity 160ms ease;
}
.album-panel.open .album-sheet { opacity: 1; transform: translateY(0) scale(1); }
.album-neon-line { position: absolute; top: 0; right: 24px; left: 24px; height: 1px; background: linear-gradient(90deg, transparent, var(--accent), transparent); box-shadow: 0 0 18px rgba(var(--accent-rgb),.48); }
.album-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; padding-bottom: 15px; border-bottom: 1px solid rgba(var(--accent-rgb), .15); }
.album-header p, .album-passport-card > p, .album-track-heading > p { margin: 0 0 6px; color: var(--accent); font-size: 8px; font-weight: 900; letter-spacing: .16em; }
.album-header h2 { margin: 0; color: #f1f4fa; font-size: clamp(22px,4vw,30px); line-height: 1.12; letter-spacing: -.025em; }
.album-close { width: 36px; height: 36px; flex: 0 0 36px; display: grid; place-items: center; border: 1px solid rgba(255,255,255,.09); border-radius: 12px; background: rgba(255,255,255,.03); color: var(--muted); cursor: pointer; }
.album-close:hover { color: var(--accent); border-color: rgba(var(--accent-rgb),.4); background: rgba(var(--accent-rgb),.08); }
.album-close svg { width: 17px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }
.album-status { margin-top: 18px; padding: 22px; border: 1px solid rgba(255,255,255,.07); border-radius: 16px; background: rgba(255,255,255,.025); color: var(--muted); font-size: 14px; line-height: 1.6; }
.album-content { max-height: calc(min(92dvh, 920px) - 104px); margin-top: 18px; padding-right: 5px; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: rgba(var(--accent-rgb),.34) transparent; }
.album-content::-webkit-scrollbar { width: 6px; }
.album-content::-webkit-scrollbar-thumb { border-radius: 99px; background: rgba(var(--accent-rgb),.34); }
.album-hero { display: grid; grid-template-columns: minmax(190px, 278px) minmax(0,1fr); gap: 26px; align-items: center; }
.album-cover-screen { position: relative; min-width: 0; margin: 0; overflow: hidden; border: 1px solid rgba(var(--accent-rgb),.25); border-radius: 21px; background: #030609; box-shadow: 0 18px 50px rgba(0,0,0,.40), inset 0 0 0 1px rgba(255,255,255,.025); }
.album-cover-screen::after { content: ''; position: absolute; inset: 0; pointer-events: none; background: repeating-linear-gradient(180deg, transparent 0 3px, rgba(255,255,255,.022) 4px); opacity: .32; }
.album-cover { display: block; width: 100%; aspect-ratio: 1/1; object-fit: cover; opacity: .12; transform: scaleY(.02); transform-origin: center; transition: opacity 240ms ease, transform 330ms cubic-bezier(.2,.76,.24,1); }
.album-cover-screen.is-locked .album-cover, .album-cover-screen.is-missing .album-cover { opacity: 1; transform: scaleY(1); }
.album-cover-screen figcaption { position: absolute; right: 8px; bottom: 8px; left: 8px; z-index: 2; display: flex; justify-content: space-between; gap: 8px; padding: 7px 9px; border: 1px solid rgba(var(--accent-rgb),.24); border-radius: 10px; background: rgba(4,8,12,.82); color: rgba(255,255,255,.58); font-size: 6px; font-weight: 850; letter-spacing: .12em; }
.album-cover-screen figcaption b { color: var(--accent); font-size: inherit; }
.album-identity { min-width: 0; }
.album-release-type { width: max-content; max-width: 100%; margin-bottom: 12px; padding: 5px 9px; overflow: hidden; border: 1px solid rgba(var(--accent-rgb),.28); border-radius: 8px; color: var(--accent); font-size: 7px; font-weight: 900; letter-spacing: .14em; text-overflow: ellipsis; white-space: nowrap; }
.album-artist-button { max-width: 100%; padding: 7px 13px; overflow: hidden; border: 1px solid rgba(var(--accent-rgb),.28); border-radius: 999px; background: rgba(var(--accent-rgb),.06); color: #e8edf5; text-overflow: ellipsis; white-space: nowrap; cursor: pointer; font-size: 15px; }
.album-artist-button:hover:not(:disabled) { border-color: rgba(var(--accent-rgb),.55); color: var(--accent); }
.album-meta { margin-top: 14px; color: var(--muted); font-size: 13px; line-height: 1.65; }
.album-genre-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 13px; }
.album-genre-tags span { padding: 5px 8px; border: 1px solid rgba(255,255,255,.075); border-radius: 8px; background: rgba(255,255,255,.025); color: rgba(228,235,245,.74); font-size: 7px; font-weight: 850; letter-spacing: .09em; text-transform: uppercase; }
.album-actions { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 20px; }
.album-action { min-height: 42px; padding: 0 15px; border: 1px solid rgba(var(--accent-rgb),.26); border-radius: 13px; background: rgba(var(--accent-rgb),.055); color: #dce4ef; cursor: pointer; font-size: 8px; font-weight: 900; letter-spacing: .10em; transition: transform 150ms ease, border-color 150ms ease, background 150ms ease; }
.album-action-primary { background: var(--accent); color: #071014; border-color: var(--accent); }
.album-action:hover:not(:disabled) { transform: translateY(-1px); border-color: rgba(var(--accent-rgb),.55); }
.album-action:disabled { opacity: .45; cursor: default; }
.album-passport-grid { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 10px; margin-top: 24px; }
.album-passport-card { min-width: 0; padding: 14px; border: 1px solid rgba(var(--accent-rgb),.13); border-radius: 16px; background: linear-gradient(135deg, rgba(var(--accent-rgb),.035), rgba(255,255,255,.012)); }
.album-passport-card-wide { grid-column: 1 / -1; }
.album-facts { display: grid; gap: 7px; margin: 10px 0 0; }
.album-facts > div { display: grid; grid-template-columns: 82px minmax(0,1fr); gap: 9px; padding-top: 7px; border-top: 1px solid rgba(255,255,255,.055); }
.album-facts dt { color: rgba(var(--accent-rgb),.58); font-size: 6px; font-weight: 900; letter-spacing: .13em; }
.album-facts dd { min-width: 0; margin: 0; color: #dce4ef; font-size: 9px; line-height: 1.35; overflow-wrap: anywhere; }
.album-quality-summary, .album-user-stats { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 7px; margin-top: 10px; }
.album-quality-summary span, .album-user-stats span { display: grid; gap: 3px; min-height: 48px; padding: 8px; border: 1px solid rgba(255,255,255,.055); border-radius: 10px; background: rgba(0,0,0,.12); }
.album-quality-summary small, .album-user-stats small { color: rgba(var(--accent-rgb),.52); font-size: 5.8px; font-weight: 900; letter-spacing: .12em; }
.album-quality-summary b, .album-user-stats b { color: #e6edf7; font-size: 10px; line-height: 1.25; }
.album-quality-profiles { display: grid; gap: 5px; margin-top: 9px; }
.album-quality-profiles > div { display: grid; gap: 3px; padding: 7px 8px; border-left: 2px solid rgba(var(--accent-rgb),.45); background: rgba(0,0,0,.11); }
.album-quality-profiles b { color: #dfe7f1; font-size: 8px; }
.album-quality-profiles span { color: var(--muted); font-size: 7px; }
.album-most-played { display: grid; gap: 6px; margin-top: 10px; }
.album-ranked-track { display: grid; grid-template-columns: 27px minmax(0,1fr) auto; align-items: center; gap: 8px; width: 100%; min-height: 39px; padding: 7px 8px; border: 1px solid rgba(255,255,255,.055); border-radius: 10px; background: rgba(0,0,0,.12); color: inherit; text-align: left; cursor: pointer; }
.album-ranked-track:hover { border-color: rgba(var(--accent-rgb),.3); }
.album-ranked-track span, .album-ranked-track small { color: rgba(var(--accent-rgb),.62); font-size: 8px; font-variant-numeric: tabular-nums; }
.album-ranked-track b { min-width: 0; overflow: hidden; color: #e2e9f3; font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
.album-similar-albums { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 7px; margin-top: 10px; }
.album-notes { max-height: 160px; overflow: auto; color: rgba(224,232,242,.74); font-size: 10px; line-height: 1.65; white-space: pre-line; }
.album-empty-data { color: rgba(255,255,255,.34); font-size: 7px; font-weight: 850; letter-spacing: .12em; }
.album-track-heading { display: flex; align-items: end; justify-content: space-between; gap: 12px; margin-top: 25px; padding-bottom: 8px; border-bottom: 1px solid rgba(var(--accent-rgb),.12); }
.album-track-heading p { margin: 0; }
.album-track-heading span { color: var(--muted); font-size: 8px; }
.album-track-header { display: grid; grid-template-columns: 44px minmax(0,1fr) 62px; gap: 10px; margin-top: 10px; padding: 0 11px 8px; color: rgba(var(--accent-rgb),.55); font-size: 7px; font-weight: 900; letter-spacing: .13em; }
.album-track-list { display: grid; gap: 5px; margin: 0; padding: 0; list-style: none; }
.album-track-item button { width: 100%; display: grid; grid-template-columns: 44px minmax(0,1fr) 62px; align-items: center; gap: 10px; min-height: 52px; padding: 7px 11px; border: 1px solid rgba(255,255,255,.055); border-radius: 13px; background: rgba(255,255,255,.018); color: #dce4ef; cursor: pointer; text-align: left; }
.album-track-item button:hover { border-color: rgba(var(--accent-rgb),.30); background: rgba(var(--accent-rgb),.055); }
.album-track-order { color: rgba(var(--accent-rgb),.65); font-size: 10px; font-variant-numeric: tabular-nums; }
.album-track-copy { min-width: 0; display: grid; gap: 3px; }
.album-track-copy strong, .album-track-copy small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.album-track-copy strong { font-size: 12px; font-weight: 780; }
.album-track-copy small { color: var(--muted); font-size: 8px; }
.album-track-duration { justify-self: end; color: var(--muted); font-size: 10px; font-variant-numeric: tabular-nums; }

@media (max-width: 760px) {
  .album-passport-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .album-passport-card-wide { grid-column: 1 / -1; }
}
@media (max-width: 560px) {
  .album-trigger-label { top: 7px; right: 7px; font-size: 6px; }
  .album-sheet { top: max(calc(env(safe-area-inset-top) + 7px),7px); right: 7px; left: 7px; width: calc(100% - 14px); max-height: 94dvh; padding: 15px 13px 16px; border-radius: 20px; }
  .album-content { max-height: calc(94dvh - 88px); }
  .album-header h2 { font-size: 22px; }
  .album-hero { grid-template-columns: 116px minmax(0,1fr); gap: 13px; align-items: start; }
  .album-cover-screen { border-radius: 15px; }
  .album-cover-screen figcaption { right: 5px; bottom: 5px; left: 5px; padding: 5px 6px; font-size: 4.5px; }
  .album-release-type { margin-bottom: 8px; font-size: 5.8px; }
  .album-artist-button { padding: 5px 9px; font-size: 12px; }
  .album-meta { margin-top: 8px; font-size: 9px; line-height: 1.45; }
  .album-genre-tags { gap: 4px; margin-top: 8px; }
  .album-genre-tags span { padding: 4px 6px; font-size: 5.5px; }
  .album-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin-top: 10px; }
  .album-action { min-height: 35px; padding: 0 8px; font-size: 6.2px; }
  .album-action-later { grid-column: 1 / -1; }
  .album-passport-grid { grid-template-columns: 1fr; gap: 8px; margin-top: 17px; }
  .album-passport-card, .album-passport-card-wide { grid-column: auto; padding: 12px; }
  .album-quality-summary, .album-user-stats { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .album-similar-albums { grid-template-columns: 1fr; }
  .album-track-header, .album-track-item button { grid-template-columns: 34px minmax(0,1fr) 48px; gap: 7px; }
  .album-track-header { padding-inline: 8px; }
  .album-track-item button { min-height: 49px; padding: 6px 8px; }
  .album-track-copy strong { font-size: 11px; }
  .album-track-copy small { font-size: 7px; }
  .album-track-duration { font-size: 9px; }
}
@media (prefers-reduced-motion: reduce) {
  .album-sheet, .album-backdrop, .album-action, .album-cover { transition-duration: .01ms !important; }
}

/* v0.5.19 · Album Archive Passport */
/* v0.5.8 · Listen Later */
.listen-later-section {
  margin-top: 12px;
  padding: 13px;
  border: 1px solid rgba(var(--accent-rgb), .16);
  border-radius: 18px;
  background:
    radial-gradient(circle at 100% 0%, rgba(var(--accent-rgb),.09), transparent 46%),
    rgba(255,255,255,.018);
}
.listen-later-section[hidden] { display: none; }
.listen-later-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 10px;
}
.listen-later-header p { margin: 0 0 4px; color: var(--accent); font-size: 7px; font-weight: 900; letter-spacing: .15em; }
.listen-later-header h2 { margin: 0; color: #edf2f9; font-size: 15px; line-height: 1.1; }
.listen-later-count {
  min-width: 29px;
  height: 25px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(var(--accent-rgb),.23);
  border-radius: 999px;
  color: var(--accent);
  font-size: 9px;
  font-weight: 900;
  font-variant-numeric: tabular-nums;
}
.listen-later-rail {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(230px, 42%);
  gap: 9px;
  overflow-x: auto;
  padding: 1px 2px 5px;
  overscroll-behavior-inline: contain;
  scroll-snap-type: x proximity;
  scrollbar-width: thin;
  scrollbar-color: rgba(var(--accent-rgb),.28) transparent;
}
.listen-later-rail::-webkit-scrollbar { height: 5px; }
.listen-later-rail::-webkit-scrollbar-thumb { border-radius: 99px; background: rgba(var(--accent-rgb),.28); }
.listen-later-card {
  position: relative;
  min-width: 0;
  scroll-snap-align: start;
  border: 1px solid rgba(255,255,255,.065);
  border-radius: 15px;
  background: rgba(255,255,255,.025);
  overflow: hidden;
}
.listen-later-card:hover { border-color: rgba(var(--accent-rgb),.28); background: rgba(var(--accent-rgb),.04); }
.listen-later-open {
  width: 100%;
  min-height: 88px;
  display: grid;
  grid-template-columns: 68px minmax(0,1fr) 16px;
  align-items: center;
  gap: 11px;
  padding: 9px 33px 9px 9px;
  border: 0;
  background: transparent;
  color: inherit;
  text-align: left;
  cursor: pointer;
}
.listen-later-open img { width: 68px; aspect-ratio: 1/1; object-fit: cover; border-radius: 11px; box-shadow: 0 9px 24px rgba(0,0,0,.28); }
.listen-later-copy { min-width: 0; display: grid; gap: 4px; }
.listen-later-copy strong, .listen-later-copy small, .listen-later-copy i { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.listen-later-copy strong { color: #e8edf5; font-size: 11px; }
.listen-later-copy small { color: var(--muted); font-size: 8.5px; }
.listen-later-copy i { color: rgba(var(--accent-rgb),.68); font-size: 6.5px; font-style: normal; font-weight: 900; letter-spacing: .10em; }
.listen-later-arrow { color: var(--accent); font-size: 22px; font-weight: 300; }
.listen-later-remove {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 24px;
  height: 24px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 8px;
  background: rgba(7,10,15,.72);
  color: rgba(222,230,241,.55);
  cursor: pointer;
}
.listen-later-remove:hover { color: var(--accent); border-color: rgba(var(--accent-rgb),.38); }
.listen-later-remove:disabled { opacity: .45; cursor: default; }
.listen-later-remove svg { width: 12px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }

.editorial-actions { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 8px; margin-top: 17px; }
.editorial-actions .editorial-play-button { margin-top: 0; }
.editorial-later-button {
  min-height: 43px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 8px 12px;
  border: 1px solid rgba(var(--accent-rgb),.20);
  border-radius: 13px;
  background: rgba(255,255,255,.025);
  color: rgba(231,237,246,.72);
  cursor: pointer;
}
.editorial-later-button:hover { border-color: rgba(var(--accent-rgb),.45); color: var(--accent); }
.editorial-later-button.is-saved { border-color: rgba(var(--accent-rgb),.44); background: rgba(var(--accent-rgb),.09); color: var(--accent); }
.editorial-later-button:disabled { opacity: .48; cursor: default; }
.editorial-later-button svg { width: 15px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linejoin: round; }
.editorial-later-button strong { font-size: 7px; letter-spacing: .10em; white-space: nowrap; }
.album-action-later.is-saved { border-color: rgba(var(--accent-rgb),.58); background: rgba(var(--accent-rgb),.11); color: var(--accent); }
.album-action-later.is-loading, .editorial-later-button.is-loading, .listen-later-remove.is-loading { opacity: .62; }

@media (max-width: 720px) {
  .listen-later-rail { grid-auto-columns: minmax(220px, 78%); }
  .editorial-actions { grid-template-columns: 1fr; }
  .editorial-later-button { width: 100%; }
}

@media (max-width: 430px) {
  .listen-later-section { padding: 11px; border-radius: 16px; }
  .listen-later-rail { grid-auto-columns: minmax(210px, 88%); }
  .listen-later-open { grid-template-columns: 61px minmax(0,1fr) 13px; min-height: 79px; gap: 9px; padding: 8px 31px 8px 8px; }
  .listen-later-open img { width: 61px; border-radius: 10px; }
}

@media (prefers-reduced-motion: reduce) {
  .listen-later-card, .listen-later-remove, .editorial-later-button { transition-duration: .01ms !important; }
}


/* v0.5.10 · Track Identity Display */
.track-identity-display {
  position: relative;
  display: grid;
  gap: 9px;
  width: min(100%, 780px);
  margin: 1px 0 0;
  isolation: isolate;
}
.track-identity-display::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: -8px;
  right: 16%;
  bottom: 26px;
  left: -14px;
  border-radius: 20px;
  background: radial-gradient(ellipse at 18% 48%, rgba(var(--accent-rgb), .13), transparent 64%);
  filter: blur(7px);
  opacity: .82;
  pointer-events: none;
}
.track-identity-display::after {
  content: "";
  position: absolute;
  z-index: 4;
  top: -2px;
  bottom: 0;
  left: -4%;
  width: 17%;
  opacity: 0;
  pointer-events: none;
  background: linear-gradient(90deg, transparent, rgba(var(--accent-rgb), .12), rgba(255,255,255,.16), transparent);
  filter: blur(4px);
  transform: translateX(-130%);
}
body.is-buffering .track-identity-display::after {
  animation: ndplay-vfd-buffer-scan 780ms ease-out 1 both;
}
.track-title-display {
  position: relative;
  width: 100%;
  min-height: 48px;
}
.track-copy .vfd-track-title {
  width: 100%;
  margin: 0;
  overflow: hidden;
  font-size: clamp(38px, 7.9vw, 46px);
  font-weight: 900;
  line-height: .99;
  letter-spacing: -.047em;
  text-wrap: balance;
  white-space: normal;
  text-overflow: clip;
}
.vfd-line {
  display: block;
  min-width: 0;
  font-family: "SFMono-Regular", Consolas, "Liberation Mono", ui-monospace, monospace;
  font-weight: 900;
}
.vfd-line-title {
  max-height: 2.02em;
  overflow: hidden;
}
.vfd-word {
  display: inline-block;
  max-width: 100%;
  white-space: nowrap;
}
.vfd-space {
  display: inline-block;
  width: .34em;
  white-space: pre;
}
.vfd-glyph {
  position: relative;
  display: inline-block;
  color: rgba(238, 248, 246, .19);
  -webkit-text-stroke: .38px rgba(var(--accent-rgb), .22);
  text-shadow: 0 0 1px rgba(var(--accent-rgb), .22);
  transform-origin: 50% 62%;
}
.vfd-glyph::after {
  content: attr(data-glyph);
  position: absolute;
  inset: 0;
  color: transparent;
  background-image: radial-gradient(circle,
    rgba(251, 255, 254, .98) 0 1.34px,
    rgba(var(--accent-rgb), .96) 1.46px 1.98px,
    transparent 2.12px);
  background-position: center 48%;
  background-size: 4.65px 4.65px;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 0 2.4px rgba(var(--accent-rgb), .28));
  opacity: .98;
  pointer-events: none;
}
.track-identity-meta {
  display: grid;
  grid-template-columns: minmax(140px, max-content) minmax(160px, 1fr);
  gap: 8px;
  width: 100%;
  align-items: stretch;
}
.track-identity-control {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0,1fr) auto;
  align-items: center;
  gap: 9px;
  min-width: 0;
  min-height: 42px;
  padding: 6px 10px;
  overflow: hidden;
  border: 1px solid rgba(var(--accent-rgb), .24);
  border-radius: 8px;
  background: linear-gradient(105deg, rgba(var(--accent-rgb), .06), rgba(255,255,255,.018));
  color: #dfe9e7;
  text-align: left;
  cursor: pointer;
  box-shadow: inset 0 1px rgba(255,255,255,.025), 0 0 0 rgba(var(--accent-rgb), 0);
  transition: border-color 160ms ease, background 160ms ease, box-shadow 160ms ease, transform 160ms ease, opacity 160ms ease;
}
.track-artist-control {
  max-width: 330px;
  border-color: rgba(var(--accent-rgb), .34);
  background: linear-gradient(105deg, rgba(var(--accent-rgb), .085), rgba(255,255,255,.018));
}
.track-album-control {
  border-color: rgba(var(--accent-rgb), .17);
  background: rgba(255,255,255,.014);
}
.track-identity-control:hover:not(:disabled),
.track-identity-control:focus-visible:not(:disabled) {
  border-color: rgba(var(--accent-rgb), .58);
  background: rgba(var(--accent-rgb), .095);
  box-shadow: 0 0 20px rgba(var(--accent-rgb), .08), inset 0 1px rgba(255,255,255,.035);
}
.track-identity-control:active:not(:disabled) { transform: translateY(1px) scale(.992); }
.track-identity-control:disabled {
  cursor: default;
  opacity: .74;
}
.track-identity-control:disabled .track-identity-arrow { display: none; }
.track-identity-code {
  align-self: center;
  color: rgba(var(--accent-rgb), .64);
  font-size: 6.4px;
  font-weight: 900;
  letter-spacing: .15em;
}
.track-identity-arrow {
  align-self: center;
  color: var(--accent);
  font-size: 10px;
  opacity: .76;
}
.vfd-line-artist,
.vfd-line-album {
  overflow: hidden;
  text-overflow: clip;
  white-space: nowrap;
  line-height: 1;
}
.vfd-line-artist {
  font-size: clamp(14px, 2.8vw, 17px);
  letter-spacing: -.025em;
}
.vfd-line-album {
  color: rgba(227,235,234,.8);
  font-size: clamp(12px, 2.45vw, 15px);
  letter-spacing: -.018em;
}
.vfd-line-artist .vfd-glyph::after,
.vfd-line-album .vfd-glyph::after {
  background-size: 3.85px 3.85px;
  background-image: radial-gradient(circle,
    rgba(249, 255, 253, .93) 0 .94px,
    rgba(var(--accent-rgb), .88) 1.02px 1.42px,
    transparent 1.55px);
  filter: drop-shadow(0 0 1.8px rgba(var(--accent-rgb), .20));
}
.vfd-line-album .vfd-glyph {
  color: rgba(229,237,236,.14);
  -webkit-text-stroke-color: rgba(var(--accent-rgb), .13);
}
.vfd-line-album .vfd-glyph::after { opacity: .72; }

.track-identity-display.identity-enter .vfd-glyph {
  animation: ndplay-vfd-glyph-base 280ms cubic-bezier(.16,1,.3,1) both;
  animation-delay: var(--ignite-delay, 0ms);
}
.track-identity-display.identity-enter .vfd-glyph::after {
  animation: ndplay-vfd-glyph-ignite 290ms steps(1,end) both;
  animation-delay: var(--ignite-delay, 0ms);
}
body.is-playing:not(.motion-suspended) .track-identity-display:not(.identity-enter) .vfd-line-title .vfd-glyph::after {
  animation: ndplay-vfd-live var(--flicker-duration, 8s) var(--flicker-delay, 0s) infinite steps(1,end);
}
body.is-playing:not(.motion-suspended) .track-identity-display:not(.identity-enter) .vfd-line-artist .vfd-glyph::after,
body.is-playing:not(.motion-suspended) .track-identity-display:not(.identity-enter) .vfd-line-album .vfd-glyph::after {
  animation: ndplay-vfd-live-secondary var(--flicker-duration, 8s) var(--flicker-delay, 0s) infinite steps(1,end);
}

@keyframes ndplay-vfd-glyph-base {
  0% { opacity: 0; transform: translateY(2px) scale(.98); }
  46% { opacity: .45; }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes ndplay-vfd-glyph-ignite {
  0%, 18% { opacity: 0; filter: blur(2px) drop-shadow(0 0 0 rgba(var(--accent-rgb),0)); }
  34% { opacity: .24; }
  48% { opacity: 1; filter: blur(0) drop-shadow(0 0 5px rgba(var(--accent-rgb),.54)); }
  62% { opacity: .46; }
  74% { opacity: .98; }
  100% { opacity: .98; filter: blur(0) drop-shadow(0 0 2.4px rgba(var(--accent-rgb),.28)); }
}
@keyframes ndplay-vfd-live {
  0%, 43%, 45%, 72%, 74%, 100% { opacity: .98; }
  44% { opacity: .94; }
  73% { opacity: .96; }
}
@keyframes ndplay-vfd-live-secondary {
  0%, 55%, 57%, 100% { opacity: .84; }
  56% { opacity: .80; }
}
@keyframes ndplay-vfd-buffer-scan {
  0% { opacity: 0; transform: translateX(-130%); }
  24% { opacity: .62; }
  100% { opacity: 0; transform: translateX(760%); }
}

/* Stronger but still compact hierarchy below the player. */
.mixes-header h2,
.radio-header h2,
.listen-later-header h2 {
  font-size: 16px;
  line-height: 1.12;
}
.mixes-header p,
.radio-header p,
.listen-later-header p {
  font-size: 8.5px;
}
.mix-card > strong,
.radio-card > strong {
  font-size: 13.5px;
  line-height: 1.18;
}
.mix-card > span:not(.mix-card-top),
.radio-card > span:not(.radio-card-top) {
  font-size: 10px;
  line-height: 1.38;
}
.listen-later-copy { gap: 5px; }
.listen-later-copy strong {
  color: #f0f3f8;
  font-size: 12.5px;
  line-height: 1.2;
}
.listen-later-copy small {
  color: rgba(213,220,231,.68);
  font-size: 9.5px;
}
.listen-later-copy i {
  font-size: 7.3px;
  letter-spacing: .095em;
}

@supports not ((-webkit-background-clip: text) or (background-clip: text)) {
  .vfd-glyph::after { display: none; }
  .vfd-glyph {
    color: #e8f4f1;
    -webkit-text-stroke: 0;
  }
}

/* ND Play v0.5.72 · ND Station */
.stream-launch-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin-top: 10px;
}
.stream-launch-grid .flow-button {
  min-width: 0;
  height: 100%;
  margin-top: 0;
  padding-inline: 15px;
}
.stream-launch-grid .flow-button > span:nth-child(2) { min-width: 0; }
.stream-launch-grid .flow-button small { overflow: hidden; line-height: 1.35; text-overflow: ellipsis; }
.station-button {
  border-color: rgba(157,124,255,.30);
  background: linear-gradient(135deg, rgba(157,124,255,.07), rgba(5,10,16,.82) 58%), rgba(8,14,21,.78);
}
.station-button:hover { border-color: rgba(157,124,255,.58); }
.station-button.is-active {
  border-color: rgba(157,124,255,.68);
  background: linear-gradient(135deg, rgba(157,124,255,.19), rgba(113,229,255,.055));
  box-shadow: 0 16px 38px rgba(110,82,196,.13), inset 0 1px 0 rgba(255,255,255,.05);
}
.station-symbol { position: relative; width: 38px; height: 38px; display: grid; place-items: center; }
.station-symbol i { position: absolute; border: 1.5px solid rgba(157,124,255,.92); border-radius: 50%; box-shadow: 0 0 12px rgba(157,124,255,.22); }
.station-symbol i:nth-child(1) { width: 8px; height: 8px; background: #9d7cff; }
.station-symbol i:nth-child(2) { width: 20px; height: 20px; border-inline-color: transparent; transform: rotate(35deg); }
.station-symbol i:nth-child(3) { width: 34px; height: 34px; border-block-color: transparent; transform: rotate(-28deg); }
body.is-playing:not(.motion-suspended) .station-button.is-active .station-symbol i:nth-child(2) { animation: nd-station-orbit 3.8s linear infinite; }
body.is-playing:not(.motion-suspended) .station-button.is-active .station-symbol i:nth-child(3) { animation: nd-station-orbit-reverse 5.4s linear infinite; }
@keyframes nd-station-orbit { to { transform: rotate(395deg); } }
@keyframes nd-station-orbit-reverse { to { transform: rotate(-388deg); } }

.station-panel { position: fixed; z-index: 212; inset: 0; visibility: hidden; pointer-events: none; }
.station-panel.open { visibility: visible; pointer-events: auto; }
.station-backdrop { position: absolute; inset: 0; border: 0; background: rgba(2,5,9,.76); backdrop-filter: blur(15px) saturate(.8); opacity: 0; transition: opacity 190ms ease; }
.station-panel.open .station-backdrop { opacity: 1; }
.station-sheet {
  position: absolute;
  top: 50%;
  left: 50%;
  width: min(760px, calc(100vw - 32px));
  max-height: min(860px, calc(100dvh - 32px));
  overflow: auto;
  padding: 22px;
  border: 1px solid rgba(157,124,255,.34);
  border-radius: 25px;
  background: radial-gradient(circle at 88% 4%, rgba(157,124,255,.15), transparent 34%), radial-gradient(circle at 6% 92%, rgba(var(--accent-rgb),.09), transparent 38%), linear-gradient(155deg, rgba(12,19,28,.985), rgba(4,8,13,.99));
  box-shadow: 0 38px 100px rgba(0,0,0,.55), inset 0 1px rgba(255,255,255,.05);
  opacity: 0;
  transform: translate(-50%, calc(-50% + 18px)) scale(.985);
  transition: opacity 190ms ease, transform 240ms cubic-bezier(.16,1,.3,1);
}
.station-panel.open .station-sheet { opacity: 1; transform: translate(-50%, -50%) scale(1); }
.station-signal { height: 3px; display: grid; grid-template-columns: 1.4fr .7fr 2fr; gap: 5px; margin: -9px 50px 17px 0; }
.station-signal i { border-radius: 999px; background: rgba(157,124,255,.32); }
.station-signal i:nth-child(2) { background: rgba(var(--accent-rgb),.52); }
.station-signal i:nth-child(3) { background: linear-gradient(90deg, rgba(157,124,255,.72), transparent); }
.station-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; }
.station-header p { margin: 0 0 7px; color: #9d7cff; font-size: 8px; font-weight: 900; letter-spacing: .17em; }
.station-header h2 { margin: 0; font-size: clamp(22px, 4vw, 32px); letter-spacing: -.03em; }
.station-close { width: 42px; height: 42px; flex: 0 0 auto; display: grid; place-items: center; border: 1px solid rgba(255,255,255,.11); border-radius: 14px; background: rgba(255,255,255,.035); color: var(--text); }
.station-close svg { width: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }
.station-seed-card { display: grid; grid-template-columns: 88px minmax(0,1fr); align-items: center; gap: 15px; margin-top: 20px; padding: 12px; border: 1px solid rgba(var(--accent-rgb),.20); border-radius: 18px; background: rgba(255,255,255,.025); }
.station-seed-card img { width: 88px; height: 88px; border-radius: 13px; object-fit: cover; box-shadow: 0 12px 30px rgba(0,0,0,.34); }
.station-seed-card > span { min-width: 0; display: grid; gap: 5px; }
.station-seed-card small { color: var(--accent); font-size: 7.5px; font-weight: 900; letter-spacing: .16em; }
.station-seed-card strong { overflow: hidden; font-size: 17px; line-height: 1.2; text-overflow: ellipsis; white-space: nowrap; }
.station-seed-card b { overflow: hidden; color: var(--muted); font-size: 10px; font-weight: 650; text-overflow: ellipsis; white-space: nowrap; }
.station-mode-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 14px; margin: 22px 2px 10px; }
.station-mode-heading > span { display: grid; gap: 4px; }
.station-mode-heading small { color: rgba(255,255,255,.43); font-size: 7px; font-weight: 900; letter-spacing: .16em; }
.station-mode-heading strong { font-size: 15px; }
.station-mode-heading > b { color: rgba(157,124,255,.88); font-size: 7px; letter-spacing: .12em; }
.station-modes { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 9px; }
.station-modes button { min-width: 0; min-height: 76px; display: grid; grid-template-columns: 29px minmax(0,1fr) 16px; align-items: center; gap: 10px; padding: 12px; border: 1px solid rgba(255,255,255,.095); border-radius: 16px; background: rgba(255,255,255,.025); color: var(--text); text-align: left; transition: border-color 160ms ease, background 160ms ease, transform 130ms ease; }
.station-modes button:first-child { grid-column: 1 / -1; }
.station-modes button:hover:not(:disabled) { border-color: rgba(157,124,255,.48); background: rgba(157,124,255,.07); }
.station-modes button:active:not(:disabled) { transform: scale(.985); }
.station-modes button > i { color: rgba(157,124,255,.72); font-size: 9px; font-style: normal; font-weight: 900; letter-spacing: .08em; }
.station-modes button > span { min-width: 0; display: grid; gap: 5px; }
.station-modes button strong { font-size: 11px; letter-spacing: .08em; }
.station-modes button small { overflow: hidden; color: var(--muted); font-size: 8px; line-height: 1.25; text-overflow: ellipsis; white-space: nowrap; }
.station-modes button > b { color: #9d7cff; font-size: 17px; }
.station-modes button.is-unavailable { opacity: .34; }
.station-footer { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-top: 14px; padding-top: 12px; border-top: 1px solid rgba(255,255,255,.07); }
.station-footer span { color: rgba(255,255,255,.58); font-size: 7px; font-weight: 850; letter-spacing: .12em; }
.station-footer span i { display: inline-block; width: 5px; height: 5px; margin-right: 5px; border-radius: 50%; background: #9d7cff; box-shadow: 0 0 9px rgba(157,124,255,.8); }
.station-footer small { max-width: 330px; color: var(--muted); font-size: 8px; line-height: 1.35; text-align: right; }
.station-panel.is-building .station-signal i { animation: nd-station-build 760ms ease-in-out infinite alternate; }
.station-panel.is-building .station-signal i:nth-child(2) { animation-delay: -380ms; }
.station-panel.is-building .station-signal i:nth-child(3) { animation-delay: -190ms; }
@keyframes nd-station-build { to { opacity: .25; transform: scaleX(.72); } }

@media (max-width: 620px) {
  .stream-launch-grid { gap: 7px; }
  .stream-launch-grid .flow-button { min-height: 70px; grid-template-columns: 34px minmax(0,1fr) 16px; gap: 7px; padding-inline: 10px; border-radius: 17px; }
  .stream-launch-grid .flow-button > svg { width: 16px; }
  .stream-launch-grid .flow-button strong { font-size: 11px; }
  .stream-launch-grid .flow-button small { font-size: 6.8px; letter-spacing: .065em; }
  .station-symbol { width: 32px; height: 32px; }
  .station-symbol i:nth-child(3) { width: 30px; height: 30px; }
  .station-sheet { top: auto; bottom: 10px; width: calc(100vw - 20px); max-height: calc(100dvh - 20px); padding: 17px; border-radius: 22px; transform: translate(-50%, 22px); }
  .station-panel.open .station-sheet { transform: translate(-50%, 0); }
  .station-seed-card { grid-template-columns: 68px minmax(0,1fr); gap: 11px; }
  .station-seed-card img { width: 68px; height: 68px; }
  .station-seed-card strong { font-size: 14px; }
  .station-mode-heading { align-items: flex-start; }
  .station-mode-heading > b { max-width: 108px; text-align: right; }
  .station-modes { grid-template-columns: minmax(0,1fr); }
  .station-modes button:first-child { grid-column: auto; }
  .station-modes button { min-height: 65px; }
  .station-footer { display: grid; }
  .station-footer small { max-width: none; text-align: left; }
}

@media (prefers-reduced-motion: reduce) {
  .station-symbol i,
  .station-panel * { animation: none !important; transition-duration: .01ms !important; }
}

/* ND Play v0.5.70 · Editorial Beacon & Archive Deck
   NEWS is a permanent channel rather than a transient twitch. Unread material
   adds one short optical sweep every nine seconds, without moving the control. */
.catalog-flip-button {
  min-height: 52px;
  border-color: rgba(var(--accent-rgb), .16);
  background:
    radial-gradient(circle at 92% 30%, rgba(var(--accent-rgb), .095), transparent 35%),
    linear-gradient(145deg, rgba(255,255,255,.043), rgba(2,6,10,.34));
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.012), 0 10px 28px rgba(0,0,0,.12);
}
.catalog-flip-editorial {
  position: relative;
  align-self: stretch;
  display: grid;
  grid-template-columns: 5px minmax(0,1fr) auto;
  align-content: center;
  justify-content: stretch;
  gap: 7px;
  padding: 5px 8px;
  overflow: hidden;
  border: 1px solid rgba(var(--accent-rgb), .16);
  border-radius: 11px;
  background:
    linear-gradient(90deg, rgba(var(--accent-rgb), .022), rgba(var(--accent-rgb), .075)),
    rgba(2,7,11,.28);
  box-shadow: inset 0 0 18px rgba(var(--accent-rgb), .025);
  transition: color 220ms ease, border-color 220ms ease, background 220ms ease, box-shadow 220ms ease;
}
.catalog-news-copy {
  min-width: 0;
  display: grid;
  gap: 2px;
  text-align: left;
}
.catalog-news-copy small {
  overflow: hidden;
  color: rgba(var(--accent-rgb), .52);
  font-size: 5.4px;
  font-weight: 900;
  line-height: 1;
  letter-spacing: .16em;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.catalog-news-copy strong {
  color: rgba(230,238,247,.74);
  font-size: 8.2px;
  line-height: 1.08;
  letter-spacing: .095em;
}
.catalog-news-badge {
  display: none;
  place-items: center;
  min-height: 19px;
  padding: 0 6px;
  border: 1px solid rgba(var(--accent-rgb), .38);
  border-radius: 999px;
  background: rgba(var(--accent-rgb), .11);
  color: var(--accent);
  font-size: 5.8px;
  font-weight: 950;
  line-height: 1;
  letter-spacing: .13em;
  box-shadow: inset 0 0 10px rgba(var(--accent-rgb), .05), 0 0 13px rgba(var(--accent-rgb), .07);
}
.catalog-flip-button.is-editorial .catalog-flip-editorial,
.catalog-flip-button.has-unread:not(.is-editorial) .catalog-flip-editorial {
  border-color: rgba(var(--accent-rgb), .38);
  background:
    linear-gradient(90deg, rgba(var(--accent-rgb), .055), rgba(var(--accent-rgb), .13)),
    rgba(2,7,11,.42);
  box-shadow: inset 0 0 22px rgba(var(--accent-rgb), .045), 0 0 18px rgba(var(--accent-rgb), .045);
}
.catalog-flip-button.is-editorial .catalog-news-copy strong,
.catalog-flip-button.has-unread .catalog-news-copy strong {
  color: #eef7f8;
  text-shadow: 0 0 12px rgba(var(--accent-rgb), .28);
}
.catalog-flip-button.has-unread {
  animation: none;
  border-color: rgba(var(--accent-rgb), .34);
  box-shadow: inset 0 0 0 1px rgba(var(--accent-rgb), .035), 0 0 22px rgba(var(--accent-rgb), .055);
}
.catalog-flip-button.has-unread::before {
  background: linear-gradient(100deg, transparent 34%, rgba(255,255,255,.08) 44%, rgba(var(--accent-rgb),.34) 50%, rgba(255,255,255,.07) 56%, transparent 66%);
  animation: ndplay-editorial-channel-sweep 9s cubic-bezier(.2,.72,.2,1) infinite;
}
.catalog-flip-button.has-unread .catalog-news-badge { display: grid; }
.catalog-flip-button.has-unread:not(.is-editorial) .catalog-flip-editorial > i {
  animation: ndplay-editorial-beacon-pulse 9s ease-in-out infinite;
}
@keyframes ndplay-editorial-channel-sweep {
  0%, 4%, 18%, 100% { opacity: 0; transform: translateX(-108%); }
  7% { opacity: .18; }
  10% { opacity: .78; }
  16% { opacity: 0; transform: translateX(108%); }
}
@keyframes ndplay-editorial-beacon-pulse {
  0%, 4%, 18%, 100% { transform: scale(1); opacity: .76; }
  8% { transform: scale(1.55); opacity: 1; }
  12% { transform: scale(1.12); opacity: .92; }
}

/* The related releases own the two free passport columns on desktop. Their
   titles wrap by words and stay readable instead of collapsing letter-wise. */
@media (min-width: 761px) {
  #albumSimilarSection { grid-column: span 2; }
  #albumSimilarSection .album-similar-albums { grid-template-columns: repeat(2, minmax(0,1fr)); }
}
@media (min-width: 900px) {
  #albumSimilarSection .album-similar-albums { grid-template-columns: repeat(3, minmax(0,1fr)); }
}
#albumSimilarSection .album-context-card {
  grid-template-columns: 62px minmax(0,1fr);
  gap: 10px;
  min-height: 78px;
  padding: 8px;
  overflow: hidden;
}
#albumSimilarSection .album-context-card img {
  width: 62px;
  border-radius: 10px;
}
#albumSimilarSection .album-context-card b {
  display: -webkit-box;
  overflow: hidden;
  overflow-wrap: normal;
  word-break: normal;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
}
#albumSimilarSection .album-context-card small {
  overflow: hidden;
  overflow-wrap: normal;
  text-overflow: ellipsis;
  white-space: nowrap;
}
#albumSimilarSection .album-context-card em {
  display: -webkit-box;
  overflow: hidden;
  overflow-wrap: normal;
  word-break: normal;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
}

@media (max-width: 430px) {
  .catalog-flip-button {
    min-height: 48px;
    grid-template-columns: minmax(0,.82fr) 36px minmax(0,1.42fr);
  }
  .catalog-flip-editorial { gap: 5px; padding: 4px 6px; }
  .catalog-news-copy { gap: 0; }
  .catalog-news-copy small { display: none; }
  .catalog-news-copy strong { font-size: 6.8px; letter-spacing: .07em; }
  .catalog-news-badge { min-height: 17px; padding-inline: 5px; font-size: 5.2px; }
  #albumSimilarSection .album-context-card { grid-template-columns: 58px minmax(0,1fr); min-height: 74px; }
  #albumSimilarSection .album-context-card img { width: 58px; }
}

@media (prefers-reduced-motion: reduce) {
  .catalog-flip-button.has-unread::before,
  .catalog-flip-button.has-unread .catalog-flip-editorial > i {
    animation: none !important;
  }
}

/* ND Play v0.5.67 · Track Insight
   A second, server-backed action shares the timeline centre with Lyrics. */
.timeline .time-row {
  grid-template-columns: minmax(70px, 1fr) auto minmax(70px, 1fr);
}
.track-context-actions {
  min-width: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}
.track-insight-button { min-width: 126px; }
.track-insight-button-icon {
  position: relative;
  width: 16px;
  height: 14px;
  flex: 0 0 16px;
}
.track-insight-button-icon::before,
.track-insight-button-icon::after {
  content: '';
  position: absolute;
  height: 1px;
  background: currentColor;
  opacity: .62;
  transform-origin: left center;
}
.track-insight-button-icon::before { top: 6px; left: 3px; width: 10px; transform: rotate(-29deg); }
.track-insight-button-icon::after { top: 6px; left: 3px; width: 10px; transform: rotate(29deg); }
.track-insight-button-icon i {
  position: absolute;
  width: 4px;
  height: 4px;
  border: 1px solid currentColor;
  border-radius: 50%;
  background: rgba(6, 10, 15, .96);
  box-shadow: 0 0 6px rgba(var(--accent-rgb), .28);
}
.track-insight-button-icon i:nth-child(1) { top: 5px; left: 0; }
.track-insight-button-icon i:nth-child(2) { top: 0; right: 0; }
.track-insight-button-icon i:nth-child(3) { right: 0; bottom: 0; }

.track-insight-panel {
  position: fixed;
  z-index: 47;
  inset: 0;
  visibility: hidden;
  pointer-events: none;
}
.track-insight-panel.open {
  visibility: visible;
  pointer-events: auto;
}
.track-insight-backdrop {
  position: absolute;
  inset: 0;
  width: 100%;
  border: 0;
  background: rgba(2, 5, 9, .80);
  opacity: 0;
  backdrop-filter: blur(14px) saturate(.78);
  transition: opacity 220ms ease;
}
.track-insight-panel.open .track-insight-backdrop { opacity: 1; }
.track-insight-sheet {
  position: absolute;
  top: max(calc(env(safe-area-inset-top) + 18px), 18px);
  right: 18px;
  bottom: max(calc(env(safe-area-inset-bottom) + 18px), 18px);
  left: 18px;
  width: min(calc(100% - 36px), 760px);
  max-height: 820px;
  margin: auto;
  display: flex;
  flex-direction: column;
  padding: 20px 22px 16px;
  overflow: hidden;
  border: 1px solid rgba(var(--accent-rgb), .38);
  border-radius: 24px;
  background:
    radial-gradient(circle at 100% 0%, rgba(255, 96, 119, .10), transparent 38%),
    radial-gradient(circle at 0% 100%, rgba(var(--accent-rgb), .09), transparent 44%),
    linear-gradient(180deg, rgba(17, 23, 31, .992), rgba(6, 10, 15, .995));
  box-shadow: 0 36px 120px rgba(0,0,0,.76), 0 0 56px rgba(var(--accent-rgb),.07), inset 0 1px rgba(255,255,255,.045);
  opacity: 0;
  transform: translateY(18px) scale(.987);
  transition: transform 250ms cubic-bezier(.2,.78,.24,1), opacity 190ms ease;
}
.track-insight-panel.open .track-insight-sheet { opacity: 1; transform: translateY(0) scale(1); }
.track-insight-signal-line {
  position: absolute;
  top: 0;
  right: 28px;
  left: 28px;
  height: 1px;
  background: linear-gradient(90deg, transparent, #ff6077 24%, var(--accent) 76%, transparent);
  box-shadow: 0 0 18px rgba(var(--accent-rgb), .42);
}
.track-insight-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
  padding-bottom: 15px;
  border-bottom: 1px solid rgba(var(--accent-rgb), .15);
}
.track-insight-header > div { min-width: 0; }
.track-insight-header p {
  margin: 0 0 6px;
  color: #ff8798;
  font-family: var(--nd-terminal-font, ui-monospace, monospace);
  font-size: 8px;
  font-weight: 900;
  letter-spacing: .16em;
}
.track-insight-header h2 {
  margin: 0;
  overflow: hidden;
  color: #f2f6fa;
  font-size: clamp(23px, 4vw, 32px);
  line-height: 1.08;
  letter-spacing: -.025em;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.track-insight-header > div > span {
  display: block;
  margin-top: 7px;
  overflow: hidden;
  color: rgba(205, 220, 228, .64);
  font-size: 12px;
  font-weight: 700;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.track-insight-close {
  width: 38px;
  height: 38px;
  flex: 0 0 38px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 12px;
  background: rgba(255,255,255,.03);
  color: var(--muted);
  cursor: pointer;
  transition: color 160ms ease, border-color 160ms ease, background 160ms ease, transform 160ms ease;
}
.track-insight-close:hover { color: var(--accent); border-color: rgba(var(--accent-rgb),.42); background: rgba(var(--accent-rgb),.08); }
.track-insight-close:active { transform: scale(.94); }
.track-insight-close svg { width: 17px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }
.track-insight-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 14px;
  padding: 11px 2px 10px;
  color: rgba(191, 207, 215, .58);
  font-family: var(--nd-terminal-font, ui-monospace, monospace);
  font-size: 8px;
  font-weight: 850;
  letter-spacing: .11em;
}
.track-insight-meta b { color: var(--accent); }
.track-insight-meta span:last-child { color: rgba(226, 234, 240, .72); }
.track-insight-status {
  position: relative;
  min-height: 210px;
  margin-top: 14px;
  display: grid;
  place-items: center;
  padding: 30px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.07);
  border-radius: 17px;
  background:
    repeating-linear-gradient(0deg, transparent 0 7px, rgba(var(--accent-rgb), .022) 8px),
    rgba(255,255,255,.018);
  color: rgba(209, 222, 228, .68);
  font-size: 14px;
  line-height: 1.65;
  text-align: center;
}
.track-insight-status.is-loading {
  min-height: 352px;
  padding: 22px 24px 20px;
  border-color: rgba(var(--accent-rgb), .20);
  background:
    radial-gradient(circle at 50% 39%, rgba(var(--accent-rgb), .09), transparent 31%),
    radial-gradient(circle at 50% 100%, rgba(255, 96, 119, .035), transparent 44%),
    rgba(5, 9, 14, .78);
  box-shadow:
    inset 0 1px rgba(255,255,255,.035),
    inset 0 0 38px rgba(var(--accent-rgb), .016),
    0 0 38px rgba(var(--accent-rgb), .045);
}
.track-insight-status.is-loading::before {
  content: '';
  position: absolute;
  inset: -18%;
  background-image:
    linear-gradient(rgba(var(--accent-rgb), .055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(var(--accent-rgb), .042) 1px, transparent 1px);
  background-size: 22px 22px;
  opacity: .24;
  mask-image: radial-gradient(circle at center, #000 0 40%, transparent 78%);
  transform: perspective(560px) rotateX(58deg) translateY(26%);
  transform-origin: center bottom;
  animation: track-insight-inference-grid 3.4s linear infinite;
  pointer-events: none;
}
.track-insight-status.is-loading::after {
  content: '';
  position: absolute;
  z-index: 2;
  right: 8%;
  left: 8%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(var(--accent-rgb), .86), #ff788d, transparent);
  box-shadow: 0 0 19px rgba(var(--accent-rgb), .38);
  opacity: 0;
  animation: track-insight-inference-scan 2.6s .18s cubic-bezier(.18,.72,.24,1) infinite;
  pointer-events: none;
}
.track-insight-process {
  position: relative;
  z-index: 3;
  width: min(100%, 430px);
  display: flex;
  flex-direction: column;
  align-items: center;
}
.track-insight-process[hidden] { display: none !important; }
.track-insight-process-heading {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  opacity: 0;
  transform: translateY(-5px);
  animation: track-insight-inference-copy 300ms 110ms ease-out forwards;
}
.track-insight-process-heading small {
  color: rgba(var(--accent-rgb), .76);
  font-family: var(--nd-terminal-font, ui-monospace, monospace);
  font-size: 7px;
  font-weight: 900;
  letter-spacing: .17em;
}
.track-insight-process-mark {
  width: 29px;
  height: 23px;
  display: flex;
  align-items: end;
  gap: 3px;
  padding: 5px;
  border: 1px solid rgba(var(--accent-rgb), .30);
  border-radius: 8px;
  background: rgba(var(--accent-rgb), .055);
}
.track-insight-process-mark i {
  width: 3px;
  border-radius: 4px;
  background: var(--accent);
  box-shadow: 0 0 8px rgba(var(--accent-rgb), .48);
  animation: track-insight-inference-bars 520ms ease-in-out infinite alternate;
}
.track-insight-process-mark i:nth-child(1) { height: 6px; }
.track-insight-process-mark i:nth-child(2) { height: 13px; animation-delay: -290ms; }
.track-insight-process-mark i:nth-child(3) { height: 9px; animation-delay: -150ms; }
.track-insight-process-mark i:nth-child(4) { height: 5px; animation-delay: -410ms; }
.track-insight-process-core {
  position: relative;
  width: 92px;
  height: 92px;
  margin: 14px auto 9px;
  display: grid;
  place-items: center;
  opacity: 0;
  transform: scale(.74) rotate(-5deg);
  filter: brightness(.62) blur(2px);
  animation: track-insight-inference-core 560ms 180ms cubic-bezier(.16,1,.3,1) forwards;
}
.track-insight-process-core::before,
.track-insight-process-core::after {
  content: '';
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
}
.track-insight-process-core::before {
  inset: 7px;
  border: 1px solid rgba(var(--accent-rgb), .19);
  box-shadow: inset 0 0 24px rgba(var(--accent-rgb), .035), 0 0 25px rgba(var(--accent-rgb), .07);
}
.track-insight-process-core::after {
  inset: 19px;
  background: radial-gradient(circle, rgba(var(--accent-rgb), .105), transparent 69%);
  box-shadow: 0 0 28px rgba(var(--accent-rgb), .08);
}
.track-insight-process-core svg {
  position: relative;
  z-index: 2;
  width: 82px;
  height: 82px;
  overflow: visible;
  fill: none;
  stroke-linecap: round;
  transform: rotate(-90deg);
  filter: drop-shadow(0 0 5px rgba(var(--accent-rgb), .30));
}
.track-insight-process-track {
  stroke: rgba(var(--accent-rgb), .13);
  stroke-width: 1;
}
.track-insight-process-ring {
  stroke: var(--accent);
  stroke-width: 1.7;
  stroke-dasharray: 22 6 7 8 31 26;
  animation: track-insight-inference-ring 3.1s linear infinite;
  transform-origin: 48px 48px;
}
.track-insight-process-ring-inner {
  stroke: #ff788d;
  stroke-width: 1.1;
  stroke-dasharray: 6 9;
  opacity: .66;
  animation: track-insight-inference-ring-reverse 2.2s linear infinite;
  transform-origin: 48px 48px;
}
.track-insight-process-core > b {
  position: absolute;
  z-index: 3;
  color: rgba(var(--accent-rgb), .90);
  font-family: var(--nd-terminal-font, ui-monospace, monospace);
  font-size: 7px;
  font-weight: 950;
  letter-spacing: .14em;
  text-shadow: 0 0 9px rgba(var(--accent-rgb), .55);
  animation: track-insight-inference-live 920ms ease-in-out infinite alternate;
}
.track-insight-process-orbit {
  position: absolute;
  z-index: 1;
  inset: 0;
  border: 1px dashed rgba(var(--accent-rgb), .16);
  border-radius: 50%;
  animation: track-insight-inference-orbit 5.4s linear infinite;
}
.track-insight-process-orbit i {
  position: absolute;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 8px rgba(var(--accent-rgb), .75);
}
.track-insight-process-orbit i:nth-child(1) { top: -2px; left: calc(50% - 2px); }
.track-insight-process-orbit i:nth-child(2) { right: 8px; bottom: 15px; }
.track-insight-process-orbit i:nth-child(3) { bottom: 15px; left: 8px; opacity: .42; }
.track-insight-process > strong,
.track-insight-process-state {
  opacity: 0;
  transform: translateY(7px);
  filter: blur(2px);
}
.track-insight-process > strong {
  display: block;
  color: #eef4f7;
  font-size: clamp(22px, 5vw, 31px);
  line-height: .94;
  letter-spacing: -.025em;
  text-shadow: 0 0 22px rgba(var(--accent-rgb), .13);
  animation: track-insight-inference-copy 390ms 460ms cubic-bezier(.2,.8,.2,1) forwards;
}
.track-insight-process > strong span { display: block; }
.track-insight-process-state {
  display: block;
  margin-top: 10px;
  color: var(--accent);
  font-family: var(--nd-terminal-font, ui-monospace, monospace);
  font-size: 7px;
  font-weight: 900;
  letter-spacing: .12em;
  animation: track-insight-inference-copy 340ms 610ms cubic-bezier(.2,.8,.2,1) forwards;
}
.track-insight-process-trace {
  width: 100%;
  margin-top: 15px;
  display: grid;
  gap: 5px;
  padding: 11px 0;
  border-top: 1px solid rgba(var(--accent-rgb), .13);
  border-bottom: 1px solid rgba(var(--accent-rgb), .13);
  text-align: left;
}
.track-insight-process-trace i {
  display: block;
  color: rgba(222, 233, 238, .48);
  font-family: var(--nd-terminal-font, ui-monospace, monospace);
  font-size: 7px;
  font-style: normal;
  letter-spacing: .065em;
  opacity: 0;
  transform: translateX(-7px);
  animation: track-insight-inference-line 280ms ease-out forwards;
}
.track-insight-process-trace i:nth-child(1) { animation-delay: 720ms; }
.track-insight-process-trace i:nth-child(2) { animation-delay: 870ms; }
.track-insight-process-trace i:nth-child(3) { animation-delay: 1020ms; }
.track-insight-process-trace i:nth-child(4) { animation-delay: 1170ms; color: rgba(var(--accent-rgb), .86); }
.track-insight-process-progress {
  width: 100%;
  height: 2px;
  margin-top: 13px;
  overflow: hidden;
  border-radius: 99px;
  background: rgba(var(--accent-rgb), .075);
}
.track-insight-process-progress b {
  display: block;
  width: 42%;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, transparent, rgba(var(--accent-rgb), .38), var(--accent), #ff788d, transparent);
  box-shadow: 0 0 15px rgba(var(--accent-rgb), .40);
  transform: translateX(-130%);
  animation: track-insight-inference-progress 1.8s .42s cubic-bezier(.38,.02,.22,1) infinite;
}
.track-insight-status-message { margin: 0; }
.track-insight-status.is-loading .track-insight-status-message {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.track-insight-content {
  min-height: 0;
  flex: 1;
  margin: 4px -5px 0 0;
  padding: 8px 8px 24px 2px;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: rgba(var(--accent-rgb), .36) transparent;
}
.track-insight-content::-webkit-scrollbar { width: 6px; }
.track-insight-content::-webkit-scrollbar-thumb { border-radius: 99px; background: rgba(var(--accent-rgb), .34); }
.track-insight-summary {
  max-width: 650px;
  margin: 8px auto 14px;
  padding: 19px 20px 20px;
  border: 1px solid rgba(var(--accent-rgb), .18);
  border-radius: 17px;
  background: linear-gradient(135deg, rgba(var(--accent-rgb), .08), rgba(255,255,255,.016));
}
.track-insight-summary > span,
.track-insight-grid section > span {
  display: block;
  margin-bottom: 9px;
  color: var(--accent);
  font-family: var(--nd-terminal-font, ui-monospace, monospace);
  font-size: 7.5px;
  font-weight: 900;
  letter-spacing: .15em;
}
.track-insight-summary p {
  margin: 0;
  color: rgba(236, 243, 246, .91);
  font-size: clamp(16px, 2.2vw, 18px);
  font-weight: 600;
  line-height: 1.62;
}
.track-insight-grid {
  max-width: 650px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}
.track-insight-grid section {
  min-width: 0;
  padding: 15px 16px;
  border: 1px solid rgba(255,255,255,.075);
  border-radius: 15px;
  background: rgba(255,255,255,.018);
}
.track-insight-grid p { margin: 0; color: rgba(219, 229, 234, .79); font-size: 13px; line-height: 1.55; }
.track-insight-themes { display: flex; flex-wrap: wrap; gap: 6px; }
.track-insight-themes i {
  padding: 6px 8px;
  border: 1px solid rgba(var(--accent-rgb), .22);
  border-radius: 999px;
  background: rgba(var(--accent-rgb), .055);
  color: rgba(226, 239, 241, .84);
  font-size: 10px;
  font-style: normal;
  font-weight: 760;
}
.track-insight-footer {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 2px 0;
  border-top: 1px solid rgba(var(--accent-rgb), .10);
  color: rgba(178, 194, 203, .48);
  font-size: 9px;
  line-height: 1.35;
}
.track-insight-footer i {
  width: 5px;
  height: 5px;
  flex: 0 0 5px;
  border-radius: 50%;
  background: #ff788d;
  box-shadow: 0 0 8px rgba(255, 96, 119, .42);
}

html.readability-large .track-insight-button { min-height: 36px; font-size: 10px; }
html.readability-large .track-insight-summary p { font-size: 20px; }
html.readability-large .track-insight-grid p { font-size: 15px; }
html.readability-large .track-insight-meta,
html.readability-large .track-insight-footer { font-size: 10px; }

@media (max-width: 560px) {
  .timeline .time-row { grid-template-columns: minmax(55px, 1fr) auto minmax(55px, 1fr); gap: 5px; }
  .track-context-actions { gap: 4px; }
  .lyrics-button { min-width: 82px; padding-inline: 7px; gap: 5px; font-size: 7.6px; }
  .track-insight-button { min-width: 100px; padding-inline: 6px; letter-spacing: .105em; }
  .track-insight-button-icon { width: 13px; flex-basis: 13px; transform: scale(.88); }
  .track-insight-sheet {
    top: max(calc(env(safe-area-inset-top) + 8px), 8px);
    right: 8px;
    bottom: max(calc(env(safe-area-inset-bottom) + 8px), 8px);
    left: 8px;
    width: calc(100% - 16px);
    padding: 17px 14px 13px;
    border-radius: 20px;
  }
  .track-insight-header { padding-bottom: 13px; }
  .track-insight-header h2 { font-size: 22px; }
  .track-insight-header > div > span { margin-top: 5px; font-size: 11px; }
  .track-insight-meta { padding-block: 9px 8px; font-size: 7.5px; }
  .track-insight-status.is-loading { min-height: 332px; margin-top: 10px; padding: 18px 14px 16px; }
  .track-insight-process-core { width: 82px; height: 82px; margin-block: 11px 7px; }
  .track-insight-process-core svg { width: 74px; height: 74px; }
  .track-insight-process > strong { font-size: clamp(21px, 7vw, 28px); }
  .track-insight-process-state { font-size: 6px; letter-spacing: .09em; }
  .track-insight-process-trace i { font-size: 6px; letter-spacing: .035em; }
  .track-insight-content { margin-right: -2px; padding-right: 3px; }
  .track-insight-summary { padding: 16px; }
  .track-insight-summary p { font-size: 16px; }
  .track-insight-grid { grid-template-columns: 1fr; gap: 8px; }
  .track-insight-grid section { padding: 13px 14px; }
  .track-insight-footer { font-size: 8px; }
}

@media (max-width: 370px) {
  .timeline .time-row { grid-template-columns: minmax(48px, 1fr) auto minmax(48px, 1fr); gap: 4px; }
  .lyrics-button { min-width: 72px; padding-inline: 5px; }
  .lyrics-button-icon { display: none; }
  .track-insight-button { min-width: 96px; }
  .track-insight-button-icon { display: none; }
}

html.nd-mobile-runtime .track-context-actions,
html.nd-mobile-runtime .track-insight-sheet,
html.nd-mobile-runtime .track-insight-content { max-width: 100% !important; }

@media (prefers-reduced-motion: reduce) {
  .track-insight-sheet,
  .track-insight-backdrop,
  .track-insight-button { transition-duration: .01ms !important; }
  .track-insight-status.is-loading::before,
  .track-insight-status.is-loading::after,
  .track-insight-process-heading,
  .track-insight-process-mark i,
  .track-insight-process-core,
  .track-insight-process-ring,
  .track-insight-process-ring-inner,
  .track-insight-process-core > b,
  .track-insight-process-orbit,
  .track-insight-process > strong,
  .track-insight-process-state,
  .track-insight-process-trace i,
  .track-insight-process-progress b { animation: none !important; }
  .track-insight-process-heading,
  .track-insight-process-core,
  .track-insight-process > strong,
  .track-insight-process-state,
  .track-insight-process-trace i { opacity: 1; transform: none; filter: none; }
  .track-insight-process-progress b { width: 100%; transform: none; }
}

@keyframes track-insight-inference-grid { to { background-position: 0 22px, 22px 0; } }
@keyframes track-insight-inference-scan {
  0% { top: 9%; opacity: 0; }
  13% { opacity: .66; }
  78% { opacity: .30; }
  100% { top: 91%; opacity: 0; }
}
@keyframes track-insight-inference-bars { from { transform: scaleY(.46); opacity: .45; } to { transform: scaleY(1); opacity: 1; } }
@keyframes track-insight-inference-core {
  0% { opacity: 0; transform: scale(.74) rotate(-5deg); filter: brightness(.62) blur(2px); }
  72% { opacity: 1; transform: scale(1.025) rotate(.5deg); filter: brightness(1.08) blur(0); }
  100% { opacity: 1; transform: none; filter: none; }
}
@keyframes track-insight-inference-ring { to { transform: rotate(360deg); } }
@keyframes track-insight-inference-ring-reverse { to { transform: rotate(-360deg); } }
@keyframes track-insight-inference-orbit { to { transform: rotate(360deg); } }
@keyframes track-insight-inference-live { from { opacity: .55; } to { opacity: 1; } }
@keyframes track-insight-inference-copy { to { opacity: 1; transform: none; filter: none; } }
@keyframes track-insight-inference-line { to { opacity: 1; transform: none; } }
@keyframes track-insight-inference-progress { to { transform: translateX(340%); } }

/* ND Play v0.5.66 · Lyrics Console */
.timeline .time-row {
  display: grid;
  grid-template-columns: minmax(70px, 1fr) auto minmax(70px, 1fr);
  align-items: center;
  gap: 12px;
}
.lyrics-button {
  position: relative;
  min-width: 104px;
  min-height: 30px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 6px 12px;
  overflow: hidden;
  border: 1px solid rgba(var(--accent-rgb), .34);
  border-radius: 10px;
  background:
    linear-gradient(180deg, rgba(var(--accent-rgb), .10), rgba(var(--accent-rgb), .025)),
    rgba(6, 10, 15, .84);
  box-shadow: inset 0 1px rgba(255,255,255,.035), 0 0 18px rgba(var(--accent-rgb), .035);
  color: rgba(226, 241, 244, .84);
  font-family: var(--nd-terminal-font, ui-monospace, monospace);
  font-size: 8.5px;
  font-weight: 900;
  letter-spacing: .16em;
  line-height: 1;
  cursor: pointer;
  transition: color 160ms ease, border-color 160ms ease, background 160ms ease, box-shadow 160ms ease, opacity 160ms ease, transform 120ms ease;
}
.lyrics-button:hover:not(:disabled),
.lyrics-button:focus-visible {
  border-color: rgba(var(--accent-rgb), .72);
  background:
    linear-gradient(180deg, rgba(var(--accent-rgb), .18), rgba(var(--accent-rgb), .045)),
    rgba(6, 10, 15, .92);
  color: #f3fbfc;
  box-shadow: inset 0 1px rgba(255,255,255,.05), 0 0 24px rgba(var(--accent-rgb), .10);
}
.lyrics-button:active:not(:disabled) { transform: scale(.97); }
.lyrics-button:disabled { opacity: .34; cursor: default; }
.lyrics-button-icon {
  width: 14px;
  display: grid;
  gap: 2px;
}
.lyrics-button-icon i {
  height: 1px;
  display: block;
  background: currentColor;
  box-shadow: 0 0 5px rgba(var(--accent-rgb), .26);
}
.lyrics-button-icon i:nth-child(2) { width: 10px; }
.lyrics-button-icon i:nth-child(3) { width: 12px; }
.lyrics-button > b {
  position: absolute;
  top: 5px;
  right: 5px;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: rgba(var(--accent-rgb), .35);
  box-shadow: 0 0 6px rgba(var(--accent-rgb), .18);
}
.lyrics-button.is-loading > b {
  background: #f7bd72;
  box-shadow: 0 0 9px rgba(247, 189, 114, .58);
  animation: lyrics-button-pulse .9s ease-in-out infinite;
}
.lyrics-button.is-ready > b {
  background: #6df2c1;
  box-shadow: 0 0 9px rgba(109, 242, 193, .62);
}
.lyrics-button.is-missing > b {
  background: #ff8a94;
  box-shadow: 0 0 8px rgba(255, 138, 148, .42);
}
.player-card.is-radio .lyrics-button { visibility: hidden; }

.lyrics-panel {
  position: fixed;
  z-index: 46;
  inset: 0;
  visibility: hidden;
  pointer-events: none;
}
.lyrics-panel.open {
  visibility: visible;
  pointer-events: auto;
}
.lyrics-backdrop {
  position: absolute;
  inset: 0;
  width: 100%;
  border: 0;
  background: rgba(2, 5, 9, .78);
  opacity: 0;
  backdrop-filter: blur(14px) saturate(.78);
  transition: opacity 220ms ease;
}
.lyrics-panel.open .lyrics-backdrop { opacity: 1; }
.lyrics-sheet {
  position: absolute;
  top: max(calc(env(safe-area-inset-top) + 18px), 18px);
  right: 18px;
  bottom: max(calc(env(safe-area-inset-bottom) + 18px), 18px);
  left: 18px;
  width: min(calc(100% - 36px), 780px);
  max-height: 860px;
  margin: auto;
  display: flex;
  flex-direction: column;
  padding: 20px 22px 16px;
  overflow: hidden;
  border: 1px solid rgba(var(--accent-rgb), .40);
  border-radius: 24px;
  background:
    radial-gradient(circle at 100% 0%, rgba(var(--accent-rgb), .13), transparent 42%),
    linear-gradient(180deg, rgba(17, 23, 31, .992), rgba(6, 10, 15, .995));
  box-shadow: 0 36px 120px rgba(0,0,0,.74), 0 0 56px rgba(var(--accent-rgb),.08), inset 0 1px rgba(255,255,255,.045);
  opacity: 0;
  transform: translateY(18px) scale(.987);
  transition: transform 250ms cubic-bezier(.2,.78,.24,1), opacity 190ms ease;
}
.lyrics-panel.open .lyrics-sheet {
  opacity: 1;
  transform: translateY(0) scale(1);
}
.lyrics-signal-line {
  position: absolute;
  top: 0;
  right: 28px;
  left: 28px;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--accent), #ff6077 76%, transparent);
  box-shadow: 0 0 18px rgba(var(--accent-rgb), .52);
}
.lyrics-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
  padding-bottom: 15px;
  border-bottom: 1px solid rgba(var(--accent-rgb), .15);
}
.lyrics-header > div { min-width: 0; }
.lyrics-header p {
  margin: 0 0 6px;
  color: var(--accent);
  font-family: var(--nd-terminal-font, ui-monospace, monospace);
  font-size: 8px;
  font-weight: 900;
  letter-spacing: .16em;
}
.lyrics-header h2 {
  margin: 0;
  overflow: hidden;
  color: #f2f6fa;
  font-size: clamp(23px, 4vw, 32px);
  line-height: 1.08;
  letter-spacing: -.025em;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.lyrics-header > div > span {
  display: block;
  margin-top: 7px;
  overflow: hidden;
  color: rgba(205, 220, 228, .64);
  font-size: 12px;
  font-weight: 700;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.lyrics-close {
  width: 38px;
  height: 38px;
  flex: 0 0 38px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 12px;
  background: rgba(255,255,255,.03);
  color: var(--muted);
  cursor: pointer;
  transition: color 160ms ease, border-color 160ms ease, background 160ms ease, transform 160ms ease;
}
.lyrics-close:hover { color: var(--accent); border-color: rgba(var(--accent-rgb),.42); background: rgba(var(--accent-rgb),.08); }
.lyrics-close:active { transform: scale(.94); }
.lyrics-close svg { width: 17px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }
.lyrics-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 14px;
  padding: 11px 2px 10px;
  color: rgba(191, 207, 215, .58);
  font-family: var(--nd-terminal-font, ui-monospace, monospace);
  font-size: 8px;
  font-weight: 850;
  letter-spacing: .11em;
}
.lyrics-meta b { color: var(--accent); }
.lyrics-meta span:last-child { color: rgba(226, 234, 240, .74); }
.lyrics-status {
  min-height: 190px;
  margin-top: 14px;
  display: grid;
  place-items: center;
  padding: 28px;
  border: 1px solid rgba(255,255,255,.07);
  border-radius: 17px;
  background:
    repeating-linear-gradient(0deg, transparent 0 7px, rgba(var(--accent-rgb), .022) 8px),
    rgba(255,255,255,.018);
  color: rgba(209, 222, 228, .66);
  font-size: 14px;
  line-height: 1.65;
  text-align: center;
}
.lyrics-content {
  min-height: 0;
  flex: 1;
  margin: 4px -5px 0 0;
  padding: 8px 8px 24px 2px;
  overflow-y: auto;
  overscroll-behavior: contain;
  scroll-behavior: smooth;
  scrollbar-width: thin;
  scrollbar-color: rgba(var(--accent-rgb), .36) transparent;
}
.lyrics-content::-webkit-scrollbar { width: 6px; }
.lyrics-content::-webkit-scrollbar-thumb { border-radius: 99px; background: rgba(var(--accent-rgb), .34); }
.lyrics-lines {
  max-width: 650px;
  margin: 0 auto;
  padding: 8px 12px 36px;
  list-style: none;
}
.lyrics-lines.is-synced { padding-bottom: 40vh; }
.lyrics-lines li {
  position: relative;
  min-height: 1.45em;
  margin: 0;
  padding: 7px 15px;
  border-left: 1px solid transparent;
  color: rgba(221, 230, 235, .80);
  font-size: clamp(16px, 2.2vw, 19px);
  font-weight: 620;
  line-height: 1.55;
  transition: color 180ms ease, opacity 180ms ease, border-color 180ms ease, background 180ms ease, transform 180ms ease;
}
.lyrics-lines li.is-blank { min-height: 19px; padding-block: 2px; }
.lyrics-lines.is-synced li { opacity: .40; }
.lyrics-lines.is-synced li.is-past { opacity: .60; }
.lyrics-lines.is-synced li.is-active {
  opacity: 1;
  border-left-color: var(--accent);
  border-radius: 0 12px 12px 0;
  background: linear-gradient(90deg, rgba(var(--accent-rgb), .12), transparent 82%);
  color: #f4fbfc;
  transform: translateX(3px);
  text-shadow: 0 0 12px rgba(var(--accent-rgb), .20);
}
.lyrics-lines.is-synced li.is-active::before {
  content: '';
  position: absolute;
  top: 50%;
  left: -3px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 10px rgba(var(--accent-rgb), .82);
  transform: translateY(-50%);
}
.lyrics-instrumental {
  min-height: 260px;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 12px;
  padding: 24px;
  text-align: center;
}
.lyrics-instrumental > span {
  width: 78px;
  height: 48px;
  display: flex;
  align-items: end;
  justify-content: center;
  gap: 7px;
}
.lyrics-instrumental > span i {
  width: 5px;
  border-radius: 9px;
  background: linear-gradient(180deg, var(--accent), rgba(var(--accent-rgb), .24));
  box-shadow: 0 0 13px rgba(var(--accent-rgb), .30);
}
.lyrics-instrumental > span i:nth-child(1) { height: 24px; }
.lyrics-instrumental > span i:nth-child(2) { height: 46px; }
.lyrics-instrumental > span i:nth-child(3) { height: 31px; }
.lyrics-instrumental strong { color: #eef7f8; font-size: 13px; letter-spacing: .08em; }
.lyrics-instrumental p { max-width: 360px; margin: 0; color: rgba(203, 216, 223, .58); font-size: 13px; line-height: 1.6; }
.lyrics-footer {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 2px 0;
  border-top: 1px solid rgba(var(--accent-rgb), .10);
  color: rgba(178, 194, 203, .44);
  font-size: 9px;
  line-height: 1.35;
}
.lyrics-footer i {
  width: 5px;
  height: 5px;
  flex: 0 0 5px;
  border-radius: 50%;
  background: rgba(var(--accent-rgb), .72);
  box-shadow: 0 0 8px rgba(var(--accent-rgb), .34);
}

html.readability-large .lyrics-button { min-height: 36px; font-size: 10px; }
html.readability-large .lyrics-lines li { font-size: clamp(18px, 2.5vw, 22px); line-height: 1.62; }
html.readability-large .lyrics-header > div > span { font-size: 14px; }
html.readability-large .lyrics-meta { font-size: 10px; }
html.readability-large .lyrics-footer { font-size: 11px; }

@media (max-width: 560px) {
  .timeline .time-row { grid-template-columns: minmax(64px, 1fr) auto minmax(64px, 1fr); gap: 7px; }
  .lyrics-button { min-width: 92px; min-height: 29px; padding-inline: 9px; gap: 6px; font-size: 8px; }
  .lyrics-sheet {
    top: max(calc(env(safe-area-inset-top) + 8px), 8px);
    right: 8px;
    bottom: max(calc(env(safe-area-inset-bottom) + 8px), 8px);
    left: 8px;
    width: calc(100% - 16px);
    padding: 17px 14px 13px;
    border-radius: 20px;
  }
  .lyrics-header { padding-bottom: 13px; }
  .lyrics-header h2 { font-size: 22px; }
  .lyrics-header > div > span { margin-top: 5px; font-size: 11px; }
  .lyrics-meta { padding-block: 9px 8px; font-size: 7.5px; }
  .lyrics-content { margin-right: -2px; padding-right: 3px; }
  .lyrics-lines { padding: 5px 3px 30px; }
  .lyrics-lines.is-synced { padding-bottom: 42vh; }
  .lyrics-lines li { padding: 7px 11px; font-size: 16px; line-height: 1.52; }
  .lyrics-footer { font-size: 8px; }
}

@media (max-width: 370px) {
  .timeline .time-row { grid-template-columns: minmax(58px, 1fr) auto minmax(58px, 1fr); gap: 5px; }
  .lyrics-button { min-width: 84px; padding-inline: 7px; letter-spacing: .12em; }
  .lyrics-button-icon { width: 12px; }
}

@media (prefers-reduced-motion: reduce) {
  .lyrics-sheet,
  .lyrics-backdrop,
  .lyrics-button,
  .lyrics-lines li { transition-duration: .01ms !important; }
  .lyrics-button.is-loading > b { animation: none !important; }
  .lyrics-content { scroll-behavior: auto; }
}

@keyframes lyrics-button-pulse {
  0%, 100% { opacity: .46; transform: scale(.82); }
  50% { opacity: 1; transform: scale(1.18); }
}

/* ND Play v0.5.53 · Compact Queue Preview
   Five nearby tracks in a small bottom console; the original full queue stays
   intact behind an explicit action. */
.queue-preview-panel {
  position: fixed;
  inset: 0;
  z-index: 45;
  visibility: hidden;
  pointer-events: none;
}
.queue-preview-panel:not(.open) {
  content-visibility: hidden;
}
.queue-preview-panel.open {
  visibility: visible;
  pointer-events: auto;
  content-visibility: visible;
}
.queue-preview-backdrop {
  position: absolute;
  inset: 0;
  width: 100%;
  padding: 0;
  border: 0;
  background: rgba(2, 5, 9, .58);
  opacity: 0;
  backdrop-filter: blur(7px) saturate(.78);
  -webkit-backdrop-filter: blur(7px) saturate(.78);
  transition: opacity 190ms ease;
}
.queue-preview-panel.open .queue-preview-backdrop {
  opacity: 1;
}
.queue-preview-sheet {
  position: absolute;
  right: 10px;
  bottom: max(10px, env(safe-area-inset-bottom));
  left: 10px;
  width: min(calc(100% - 20px), 520px);
  max-height: calc(100dvh - max(20px, env(safe-area-inset-top)) - max(20px, env(safe-area-inset-bottom)));
  margin: 0 auto;
  padding: 16px;
  overflow: hidden;
  border: 1px solid rgba(var(--accent-rgb), .36);
  border-radius: 23px;
  background:
    radial-gradient(circle at 100% 0%, rgba(var(--accent-rgb), .14), transparent 43%),
    linear-gradient(180deg, rgba(17, 23, 31, .985), rgba(7, 11, 17, .985));
  box-shadow:
    0 30px 90px rgba(0, 0, 0, .64),
    0 0 35px rgba(var(--accent-rgb), .08),
    inset 0 1px rgba(255, 255, 255, .045);
  opacity: 0;
  transform: translateY(22px) scale(.985);
  transition: opacity 170ms ease, transform 230ms cubic-bezier(.16, 1, .3, 1);
}
.queue-preview-panel.open .queue-preview-sheet {
  opacity: 1;
  transform: none;
}
.queue-preview-signal {
  position: absolute;
  top: 0;
  right: 24px;
  left: 24px;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--accent), transparent);
  box-shadow: 0 0 13px rgba(var(--accent-rgb), .64);
}
.queue-preview-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 1px 1px 12px;
  border-bottom: 1px solid rgba(var(--accent-rgb), .12);
}
.queue-preview-header p {
  margin: 0 0 5px;
  color: rgba(var(--accent-rgb), .72);
  font-family: var(--nd-mini-font, ui-monospace, monospace);
  font-size: 7px;
  font-weight: 900;
  letter-spacing: .15em;
}
.queue-preview-header h2 {
  margin: 0;
  color: #eef6f8;
  font-family: var(--nd-display-font, ui-sans-serif, sans-serif);
  font-size: 21px;
  font-weight: 700;
  letter-spacing: -.015em;
}
.queue-preview-close {
  width: 40px;
  height: 40px;
  flex: 0 0 40px;
  display: grid;
  padding: 0;
  place-items: center;
  border: 1px solid rgba(var(--accent-rgb), .24);
  border-radius: 13px;
  background: rgba(var(--accent-rgb), .045);
  color: rgba(231, 239, 244, .72);
  cursor: pointer;
}
.queue-preview-close svg {
  width: 18px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-width: 1.6;
}
.queue-preview-list {
  max-height: min(310px, 52dvh);
  margin: 0;
  padding: 4px 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  list-style: none;
  scrollbar-width: thin;
  scrollbar-color: rgba(var(--accent-rgb), .28) transparent;
}
.queue-preview-item {
  margin: 0;
  border-bottom: 1px solid rgba(255, 255, 255, .055);
}
.queue-preview-item:last-child {
  border-bottom: 0;
}
.queue-preview-item button {
  width: 100%;
  min-height: 55px;
  display: grid;
  grid-template-columns: 49px minmax(0, 1fr) auto;
  align-items: center;
  gap: 11px;
  padding: 7px 5px;
  border: 0;
  border-radius: 12px;
  background: transparent;
  color: inherit;
  text-align: left;
  cursor: pointer;
  transition: background 160ms ease, transform 140ms ease;
}
.queue-preview-item button:not(:disabled):active {
  transform: scale(.985);
}
.queue-preview-item button:not(:disabled):hover,
.queue-preview-item button:not(:disabled):focus-visible {
  background: rgba(var(--accent-rgb), .06);
  outline: none;
}
.queue-preview-item.current button,
.queue-preview-item.current button:disabled {
  background: linear-gradient(90deg, rgba(var(--accent-rgb), .075), transparent 75%);
  opacity: 1;
  cursor: default;
}
.queue-preview-order {
  min-width: 0;
  color: rgba(var(--accent-rgb), .52);
  font-family: var(--nd-mini-font, ui-monospace, monospace);
  font-size: 7px;
  font-weight: 950;
  letter-spacing: .09em;
  text-align: center;
}
.queue-preview-item.current .queue-preview-order {
  color: var(--accent);
  text-shadow: 0 0 9px rgba(var(--accent-rgb), .36);
}
.queue-preview-copy {
  min-width: 0;
  display: grid;
  gap: 4px;
}
.queue-preview-copy strong,
.queue-preview-copy small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.queue-preview-copy strong {
  color: rgba(239, 244, 248, .94);
  font-size: 12.5px;
  font-weight: 780;
  line-height: 1.1;
}
.queue-preview-copy small {
  color: rgba(202, 211, 224, .58);
  font-size: 9px;
  font-weight: 650;
}
.queue-preview-item time {
  color: rgba(var(--accent-rgb), .58);
  font-family: var(--nd-numeric-font, ui-monospace, monospace);
  font-size: 9px;
  font-weight: 850;
  font-variant-numeric: tabular-nums;
}
.queue-preview-footer {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 12px;
  padding-top: 12px;
  border-top: 1px solid rgba(var(--accent-rgb), .12);
}
.queue-preview-footer > span {
  min-width: 72px;
  display: grid;
  gap: 3px;
}
.queue-preview-footer > span small {
  color: rgba(205, 214, 227, .45);
  font-size: 5.7px;
  font-weight: 900;
  letter-spacing: .10em;
}
.queue-preview-footer > span b {
  color: var(--accent);
  font-family: var(--nd-numeric-font, ui-monospace, monospace);
  font-size: 14px;
  font-weight: 950;
  text-shadow: 0 0 9px rgba(var(--accent-rgb), .32);
}
.queue-preview-footer > button {
  min-height: 43px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 9px;
  padding: 0 14px;
  border: 1px solid rgba(var(--accent-rgb), .32);
  border-radius: 13px;
  background: rgba(var(--accent-rgb), .065);
  color: rgba(231, 247, 242, .88);
  font-size: 8px;
  font-weight: 950;
  letter-spacing: .12em;
  cursor: pointer;
}
.queue-preview-footer > button i {
  color: var(--accent);
  font-size: 17px;
  font-style: normal;
  line-height: 1;
  text-shadow: 0 0 9px rgba(var(--accent-rgb), .42);
}

html.nd-mobile-runtime .queue-preview-sheet {
  right: 5px;
  bottom: max(5px, env(safe-area-inset-bottom));
  left: 5px;
  width: calc(100% - 10px);
  padding: 14px;
  border-radius: 21px;
}
html.nd-mobile-runtime .queue-preview-list {
  max-height: min(290px, 51dvh);
}
html.nd-mobile-runtime .queue-preview-item button {
  min-height: 51px;
  grid-template-columns: 44px minmax(0, 1fr) auto;
  gap: 9px;
  padding: 6px 4px;
}
html.nd-mobile-runtime .queue-preview-copy strong { font-size: 11.5px; }
html.nd-mobile-runtime .queue-preview-copy small { font-size: 8.4px; }

@media (max-width: 370px) {
  html.nd-mobile-runtime .queue-preview-sheet { padding: 12px; }
  html.nd-mobile-runtime .queue-preview-header { padding-bottom: 10px; }
  html.nd-mobile-runtime .queue-preview-header h2 { font-size: 19px; }
  html.nd-mobile-runtime .queue-preview-close { width: 37px; height: 37px; flex-basis: 37px; }
  html.nd-mobile-runtime .queue-preview-list { max-height: min(260px, 49dvh); }
  html.nd-mobile-runtime .queue-preview-item button {
    min-height: 47px;
    grid-template-columns: 40px minmax(0, 1fr) auto;
    gap: 8px;
  }
  html.nd-mobile-runtime .queue-preview-copy strong { font-size: 10.8px; }
  html.nd-mobile-runtime .queue-preview-copy small { font-size: 7.8px; }
  html.nd-mobile-runtime .queue-preview-footer { gap: 9px; padding-top: 10px; }
  html.nd-mobile-runtime .queue-preview-footer > button { min-height: 40px; padding-inline: 11px; font-size: 7.2px; }
}

@media (prefers-reduced-motion: reduce) {
  .queue-preview-backdrop,
  .queue-preview-sheet,
  .queue-preview-item button {
    transition: none !important;
  }
}

/* ND Play v0.5.48 · Russian Help Map & Authorization Update Console */
.auth-update-panel {
  position: relative;
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  margin-top: 15px;
  padding: 12px;
  overflow: hidden;
  border: 1px solid rgba(115,240,197,.34);
  border-radius: 17px;
  background:
    linear-gradient(90deg, rgba(115,240,197,.08), transparent 42%),
    radial-gradient(circle at 100% 0%, rgba(var(--accent-rgb),.13), transparent 48%),
    rgba(255,255,255,.018);
  box-shadow: inset 0 1px rgba(255,255,255,.035), 0 0 24px rgba(115,240,197,.045);
}
.auth-update-panel[hidden] { display: none !important; }
.auth-update-panel::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(115,240,197,.72), transparent);
  transform: translateX(-70%);
  animation: auth-update-scan 3.8s ease-in-out infinite;
}
.auth-update-signal {
  width: 48px;
  height: 46px;
  display: flex;
  align-items: end;
  justify-content: center;
  gap: 4px;
  padding-bottom: 10px;
  border: 1px solid rgba(115,240,197,.28);
  border-radius: 14px;
  background: rgba(3,10,10,.42);
  box-shadow: inset 0 0 18px rgba(115,240,197,.045);
}
.auth-update-signal i {
  width: 4px;
  border-radius: 99px;
  background: #73f0c5;
  box-shadow: 0 0 9px rgba(115,240,197,.46);
}
.auth-update-signal i:nth-child(1) { height: 12px; }
.auth-update-signal i:nth-child(2) { height: 23px; }
.auth-update-signal i:nth-child(3) { height: 17px; }
.auth-update-copy { min-width: 0; }
.auth-update-copy > small {
  display: block;
  margin-bottom: 4px;
  color: #73f0c5;
  font-family: var(--nd-terminal-font, ui-monospace, monospace);
  font-size: 7px;
  font-weight: 900;
  letter-spacing: .14em;
}
.auth-update-copy > strong {
  display: block;
  color: #edf8f5;
  font-size: 12px;
}
.auth-update-copy > strong b {
  color: #73f0c5;
  font-family: var(--nd-terminal-font, ui-monospace, monospace);
  font-weight: 900;
}
.auth-update-copy > span {
  display: block;
  margin-top: 4px;
  color: var(--muted);
  font-size: 8.5px;
  line-height: 1.35;
}
.auth-update-button {
  min-width: 112px;
  min-height: 42px;
  display: grid;
  place-content: center;
  gap: 3px;
  padding: 7px 11px;
  border: 1px solid rgba(115,240,197,.43);
  border-radius: 12px;
  background: rgba(115,240,197,.09);
  color: #73f0c5;
  cursor: pointer;
  box-shadow: inset 0 1px rgba(255,255,255,.035), 0 0 18px rgba(115,240,197,.055);
  transition: transform 150ms ease, border-color 170ms ease, background 170ms ease;
}
.auth-update-button:hover,
.auth-update-button:focus-visible {
  border-color: rgba(115,240,197,.72);
  background: rgba(115,240,197,.15);
}
.auth-update-button:active { transform: scale(.965); }
.auth-update-button:disabled { cursor: wait; opacity: .68; }
.auth-update-button span {
  font-size: 7px;
  font-weight: 900;
  letter-spacing: .13em;
}
.auth-update-button b {
  font-family: var(--nd-terminal-font, ui-monospace, monospace);
  font-size: 9px;
  letter-spacing: .08em;
}

.auth-version-console {
  display: flex;
  align-items: center;
  gap: 7px;
  margin-top: 14px;
  padding: 10px 2px 0;
  border-top: 1px solid rgba(255,255,255,.06);
  color: rgba(220,230,239,.48);
  font-family: var(--nd-terminal-font, ui-monospace, monospace);
  font-size: 7px;
  font-weight: 850;
  letter-spacing: .12em;
}
.auth-version-console span { display: inline-flex; align-items: center; gap: 6px; }
.auth-version-console span i {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #73f0c5;
  box-shadow: 0 0 8px rgba(115,240,197,.52);
}
.auth-version-console strong { color: rgba(var(--accent-rgb),.86); font-size: 9px; }
.auth-version-console small { margin-left: auto; color: rgba(115,240,197,.64); font-size: 6px; }

/* Help badges reproduce the labels a listener actually sees in the interface. */
.help-grid article {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  grid-template-areas:
    "label title"
    "copy copy";
  align-items: center;
  gap: 8px 10px;
  padding: 14px 15px;
}
.help-grid article > b {
  position: static;
  grid-area: label;
  width: auto;
  min-width: 48px;
  min-height: 29px;
  justify-self: start;
  padding: 5px 9px;
  white-space: nowrap;
}
.help-grid h4 {
  grid-area: title;
  margin: 0;
}
.help-grid p { grid-area: copy; }
.help-tips p:last-child { grid-column: 1 / -1; }

@keyframes auth-update-scan {
  0%, 18% { opacity: 0; transform: translateX(-70%); }
  42% { opacity: .82; }
  72%, 100% { opacity: 0; transform: translateX(70%); }
}

@media (max-width: 560px) {
  .auth-update-panel {
    grid-template-columns: 44px minmax(0, 1fr);
    gap: 10px;
    padding: 11px;
  }
  .auth-update-signal { width: 44px; height: 43px; }
  .auth-update-button {
    grid-column: 1 / -1;
    width: 100%;
    min-height: 39px;
    grid-auto-flow: column;
    gap: 7px;
  }
  .help-grid article { padding: 13px 14px; }
}

@media (prefers-reduced-motion: reduce) {
  .auth-update-panel::after { animation: none !important; }
}

@media (max-width: 520px) {
  .track-identity-meta {
    grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr);
    gap: 7px;
  }
  .track-identity-control { padding: 6px 8px; gap: 7px; }
  .track-identity-code { font-size: 5.9px; }
  .vfd-line-artist { font-size: 14px; }
  .vfd-line-album { font-size: 12px; }
}

@media (max-width: 430px) {
  .track-title-display { min-height: 42px; }
  .track-copy .vfd-track-title {
    max-height: 2.08em;
    font-size: clamp(31px, 9.6vw, 36px);
    line-height: 1.02;
  }
  .vfd-glyph::after {
    background-size: 4.25px 4.25px;
    background-image: radial-gradient(circle,
      rgba(251,255,254,.98) 0 1.22px,
      rgba(var(--accent-rgb),.95) 1.32px 1.80px,
      transparent 1.94px);
  }
  .track-identity-meta { grid-template-columns: 1fr; }
  .track-artist-control { max-width: 100%; }
  .track-identity-control { min-height: 38px; }
  .vfd-line-artist { font-size: 14px; }
  .vfd-line-album { font-size: 12.5px; }
  .mixes-header h2,
  .radio-header h2,
  .listen-later-header h2 { font-size: 15.5px; }
  .mix-card > strong,
  .radio-card > strong { font-size: 13px; }
  .listen-later-copy strong { font-size: 12px; }
  .listen-later-copy small { font-size: 9px; }
}

@media (prefers-reduced-motion: reduce) {
  .track-identity-display.identity-enter .vfd-glyph,
  .track-identity-display.identity-enter .vfd-glyph::after,
  body.is-playing .track-identity-display .vfd-glyph::after,
  body.is-buffering .track-identity-display::after {
    animation: none !important;
  }
}


/* v0.5.11 · Artwork Signal Lock & Identity Readability */
.artwork-screen {
  overflow: hidden;
  border-radius: 24px;
  background: #05090d;
  box-shadow:
    0 22px 55px rgba(0,0,0,.42),
    inset 0 0 0 1px rgba(var(--accent-rgb), .12),
    inset 0 0 28px rgba(0,0,0,.34);
}
.artwork-screen .cover {
  border-radius: inherit;
  box-shadow: none;
  transform: translateZ(0);
  transition: filter 180ms ease, opacity 160ms ease, transform 180ms cubic-bezier(.2,.76,.25,1);
}
.artwork-screen-glass,
.artwork-signal-line,
.artwork-signal-noise,
.artwork-signal-scan,
.artwork-signal-status {
  position: absolute;
  z-index: 2;
  pointer-events: none;
}
.artwork-screen-glass {
  inset: 0;
  border-radius: inherit;
  background:
    linear-gradient(118deg, rgba(255,255,255,.055), transparent 24%, transparent 68%, rgba(255,255,255,.025)),
    repeating-linear-gradient(180deg, rgba(255,255,255,.014) 0 1px, transparent 1px 4px);
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.045),
    inset 0 -20px 34px rgba(0,0,0,.12);
  mix-blend-mode: screen;
  opacity: .52;
}
.artwork-signal-line {
  top: 50%;
  right: 9%;
  left: 9%;
  height: 1px;
  border-radius: 99px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.92), var(--accent), rgba(255,255,255,.72), transparent);
  box-shadow: 0 0 12px rgba(var(--accent-rgb),.62), 0 0 28px rgba(var(--accent-rgb),.28);
  opacity: 0;
  transform: scaleX(.08);
}
.artwork-signal-noise {
  inset: 0;
  border-radius: inherit;
  opacity: 0;
  background:
    repeating-linear-gradient(0deg, transparent 0 5px, rgba(255,255,255,.11) 5px 6px, transparent 6px 13px),
    linear-gradient(90deg, transparent 0 9%, rgba(var(--accent-rgb),.19) 10% 11%, transparent 12% 56%, rgba(255,255,255,.12) 57% 58%, transparent 59%);
  background-size: 100% 100%, 128% 100%;
  mix-blend-mode: screen;
}
.artwork-signal-scan {
  top: -12%;
  right: 0;
  left: 0;
  height: 14%;
  opacity: 0;
  background: linear-gradient(180deg, transparent, rgba(255,255,255,.11), rgba(var(--accent-rgb),.24), transparent);
  filter: blur(2px);
}
.artwork-signal-status {
  right: 9px;
  bottom: 9px;
  display: grid;
  grid-template-columns: 5px auto;
  grid-template-areas: "dot main" "dot sub";
  column-gap: 6px;
  padding: 5px 7px;
  border: 1px solid rgba(var(--accent-rgb),.20);
  border-radius: 6px;
  background: rgba(3,7,11,.58);
  color: rgba(229,242,240,.62);
  opacity: .18;
  backdrop-filter: blur(8px);
  transition: opacity 220ms ease, border-color 220ms ease, background 220ms ease;
}
.artwork-signal-status i {
  grid-area: dot;
  align-self: center;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 9px rgba(var(--accent-rgb),.68);
}
.artwork-signal-status b {
  grid-area: main;
  font-size: 6px;
  line-height: 1;
  letter-spacing: .12em;
}
.artwork-signal-status small {
  grid-area: sub;
  margin-top: 2px;
  color: rgba(214,225,225,.44);
  font-size: 4.8px;
  line-height: 1;
  letter-spacing: .16em;
}
.artwork-screen.artwork-signal-pending .cover {
  opacity: .10;
  filter: brightness(.16) saturate(.34) blur(1.6px);
  transform: scale(.992);
}
.artwork-screen.artwork-signal-pending .artwork-signal-line {
  opacity: .58;
  transform: scaleX(.22);
  animation: ndplay-artwork-pending 620ms ease-in-out infinite alternate;
}
.artwork-screen.artwork-signal-pending .artwork-signal-status,
.artwork-screen.artwork-signal-lock .artwork-signal-status,
.artwork-screen.artwork-signal-relock .artwork-signal-status {
  opacity: .92;
  border-color: rgba(var(--accent-rgb),.42);
  background: rgba(3,8,12,.76);
}
.artwork-screen.artwork-signal-lock .cover {
  animation: ndplay-artwork-signal-lock 760ms cubic-bezier(.18,.76,.22,1) both;
}
.artwork-screen.artwork-signal-lock .artwork-signal-line {
  animation: ndplay-artwork-line-lock 760ms ease-out both;
}
.artwork-screen.artwork-signal-lock .artwork-signal-noise {
  animation: ndplay-artwork-noise-lock 760ms steps(1,end) both;
}
.artwork-screen.artwork-signal-lock .artwork-signal-scan {
  animation: ndplay-artwork-scan-lock 760ms cubic-bezier(.22,.7,.28,1) both;
}
.artwork-screen.artwork-signal-lock .artwork-signal-status {
  animation: ndplay-artwork-status-lock 940ms ease-out both;
}
.artwork-screen.artwork-signal-error .artwork-signal-status i {
  opacity: .64;
}
.artwork-screen.artwork-signal-relock .cover {
  animation: ndplay-artwork-relock-cover 560ms ease-out both;
}
.artwork-screen.artwork-signal-relock .artwork-signal-line {
  animation: ndplay-artwork-relock-line 560ms ease-out both;
}
.artwork-screen.artwork-signal-relock .artwork-signal-scan {
  animation: ndplay-artwork-relock-scan 560ms ease-out both;
}
body.is-playing:not(.motion-suspended) .artwork-screen:not(.artwork-signal-lock):not(.artwork-signal-pending):not(.artwork-signal-relock) .cover-halo {
  animation: ndplay-artwork-halo-breathe 8.6s ease-in-out infinite;
}

@keyframes ndplay-artwork-pending {
  from { opacity: .24; transform: scaleX(.10); }
  to { opacity: .70; transform: scaleX(.30); }
}
@keyframes ndplay-artwork-signal-lock {
  0% { opacity: 0; filter: brightness(.04) saturate(.25) contrast(1.3); transform: scaleY(.018) scaleX(.82); }
  9% { opacity: .92; filter: brightness(.72) saturate(.52) contrast(1.18); transform: scaleY(.12) scaleX(.96) translateY(-1.4%); }
  17% { opacity: .08; filter: brightness(.12) saturate(.28) contrast(1.35); transform: scaleY(.018) scaleX(.70); }
  27% { opacity: 0; filter: brightness(.02) saturate(.20); transform: scaleY(.010) scaleX(.46); }
  42% { opacity: .36; filter: brightness(.42) saturate(.58) blur(.6px); transform: scaleY(.18) scaleX(.94); }
  67% { opacity: 1; filter: brightness(1.10) saturate(1.04) contrast(1.04); transform: scaleY(1.012) scaleX(1); }
  82% { filter: brightness(.96) saturate(.98); transform: scaleY(.996); }
  100% { opacity: 1; filter: brightness(1) saturate(1) contrast(1); transform: scale(1); }
}
@keyframes ndplay-artwork-line-lock {
  0% { opacity: 0; transform: scaleX(.04); }
  7% { opacity: .96; transform: scaleX(.72); }
  18% { opacity: .12; transform: scaleX(.16); }
  28% { opacity: 0; transform: scaleX(.04); }
  39% { opacity: .74; transform: scaleX(.34); }
  61% { opacity: .92; transform: scaleX(1); }
  76%, 100% { opacity: 0; transform: scaleX(1); }
}
@keyframes ndplay-artwork-noise-lock {
  0%, 5%, 21%, 30%, 47%, 100% { opacity: 0; background-position: 0 0, 0 0; }
  6% { opacity: .42; background-position: 0 3px, 15% 0; }
  12% { opacity: .15; background-position: 0 -4px, 55% 0; }
  22% { opacity: .54; background-position: 0 7px, 82% 0; }
  31% { opacity: .20; background-position: 0 -2px, 33% 0; }
  48% { opacity: .22; background-position: 0 4px, 64% 0; }
  59% { opacity: .08; }
}
@keyframes ndplay-artwork-scan-lock {
  0%, 39% { opacity: 0; transform: translateY(-50%); }
  48% { opacity: .70; }
  80% { opacity: .12; }
  100% { opacity: 0; transform: translateY(850%); }
}
@keyframes ndplay-artwork-status-lock {
  0%, 8% { opacity: 0; transform: translateY(3px); }
  13% { opacity: .92; transform: translateY(0); }
  25% { opacity: .30; }
  37% { opacity: .94; }
  72% { opacity: .88; }
  100% { opacity: .18; }
}
@keyframes ndplay-artwork-relock-cover {
  0% { filter: brightness(1) saturate(1); }
  18% { filter: brightness(.54) saturate(.66); }
  37% { filter: brightness(.88) saturate(.82); }
  100% { filter: brightness(1) saturate(1); }
}
@keyframes ndplay-artwork-relock-line {
  0% { opacity: 0; transform: scaleX(.08); }
  24% { opacity: .78; transform: scaleX(.86); }
  100% { opacity: 0; transform: scaleX(1); }
}
@keyframes ndplay-artwork-relock-scan {
  0% { opacity: 0; transform: translateY(-30%); }
  30% { opacity: .42; }
  100% { opacity: 0; transform: translateY(820%); }
}
@keyframes ndplay-artwork-halo-breathe {
  0%, 100% { opacity: .20; filter: blur(40px); }
  50% { opacity: .245; filter: blur(43px); }
}


.track-identity-display.identity-armed .vfd-glyph,
.track-identity-display.identity-armed .vfd-glyph::after {
  opacity: 0 !important;
  animation: none !important;
}

/* Higher-resolution secondary VFD fields. */
.track-identity-meta {
  grid-template-columns: minmax(172px, max-content) minmax(190px, 1fr);
  gap: 9px;
}
.track-identity-control {
  min-height: 48px;
  padding: 7px 11px;
  gap: 10px;
}
.track-artist-control { max-width: 390px; }
.track-identity-code {
  font-size: 7px;
  letter-spacing: .16em;
}
.track-identity-arrow { font-size: 11px; }
.vfd-line-artist {
  font-size: clamp(16.5px, 3vw, 19px);
  letter-spacing: -.018em;
}
.vfd-line-album {
  font-size: clamp(14.5px, 2.7vw, 17px);
  letter-spacing: -.012em;
}
.vfd-line-artist .vfd-glyph,
.vfd-line-album .vfd-glyph {
  color: rgba(236,245,243,.22);
  -webkit-text-stroke: .30px rgba(var(--accent-rgb),.22);
}
.vfd-line-artist .vfd-glyph::after,
.vfd-line-album .vfd-glyph::after {
  background-size: 3.18px 3.18px;
  background-image: radial-gradient(circle,
    rgba(252,255,254,.98) 0 .74px,
    rgba(var(--accent-rgb),.95) .84px 1.22px,
    transparent 1.34px);
  filter: drop-shadow(0 0 1.35px rgba(var(--accent-rgb),.19));
  opacity: .96;
}
.vfd-line-album .vfd-glyph::after { opacity: .84; }
body.is-playing:not(.motion-suspended) .track-identity-display:not(.identity-enter) .vfd-line-artist .vfd-glyph::after,
body.is-playing:not(.motion-suspended) .track-identity-display:not(.identity-enter) .vfd-line-album .vfd-glyph::after {
  animation-name: ndplay-vfd-live-secondary-hires;
}
@keyframes ndplay-vfd-live-secondary-hires {
  0%, 61%, 63%, 100% { opacity: .94; }
  62% { opacity: .90; }
}

@media (max-width: 520px) {
  .track-identity-meta { grid-template-columns: minmax(0,.93fr) minmax(0,1.07fr); gap: 7px; }
  .track-identity-control { min-height: 45px; padding: 7px 8px; gap: 7px; }
  .track-identity-code { font-size: 6.2px; }
  .vfd-line-artist { font-size: 15.5px; }
  .vfd-line-album { font-size: 14px; }
  .artwork-signal-status { right: 7px; bottom: 7px; transform: scale(.92); transform-origin: 100% 100%; }
}
@media (max-width: 450px) {
  .track-identity-meta { grid-template-columns: 1fr; }
  .track-artist-control { max-width: 100%; }
  .track-identity-control { min-height: 43px; }
  .vfd-line-artist { font-size: 15.5px; }
  .vfd-line-album { font-size: 14.5px; }
}
@media (prefers-reduced-motion: reduce) {
  .artwork-screen .cover,
  .artwork-screen .cover-halo,
  .artwork-signal-line,
  .artwork-signal-noise,
  .artwork-signal-scan,
  .artwork-signal-status {
    animation: none !important;
    transition-duration: .01ms !important;
  }
  .artwork-screen.artwork-signal-pending .cover { opacity: .72; filter: none; transform: none; }
  .artwork-screen.artwork-signal-pending .artwork-signal-line { opacity: 0; }
}


/* v0.5.12 · Editorial Signal Deck */
.catalog-stage {
  --catalog-route-duration: 660ms;
  isolation: isolate;
}
.catalog-signal-overlay {
  position: absolute;
  z-index: 8;
  inset: 0;
  display: grid;
  place-items: center;
  overflow: hidden;
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  transition: opacity 120ms ease, visibility 0s linear 720ms;
}
.catalog-signal-overlay::before {
  content: '';
  position: absolute;
  inset: 3px 0;
  border-radius: 18px;
  background:
    linear-gradient(90deg, transparent, rgba(var(--accent-rgb),.045) 34%, rgba(var(--accent-rgb),.11) 50%, rgba(var(--accent-rgb),.045) 66%, transparent),
    rgba(4,8,13,.44);
  backdrop-filter: blur(7px);
  -webkit-backdrop-filter: blur(7px);
  opacity: .88;
}
.catalog-signal-overlay.is-active {
  opacity: 1;
  visibility: visible;
  transition-delay: 0s;
}
.catalog-signal-line {
  position: absolute;
  left: 4%;
  right: 4%;
  top: 50%;
  height: 1px;
  overflow: hidden;
  background: linear-gradient(90deg, transparent, rgba(var(--accent-rgb),.45), var(--accent), rgba(var(--accent-rgb),.45), transparent);
  box-shadow: 0 0 10px rgba(var(--accent-rgb),.62), 0 0 34px rgba(var(--accent-rgb),.18);
  transform: scaleX(.08);
  opacity: 0;
}
.catalog-signal-line::after {
  content: '';
  position: absolute;
  inset: -4px 0;
  background: linear-gradient(90deg, transparent 0 30%, rgba(255,255,255,.82) 49%, transparent 68%);
  transform: translateX(-100%);
}
.catalog-signal-copy {
  position: relative;
  z-index: 2;
  min-width: min(78%, 290px);
  display: grid;
  gap: 6px;
  padding: 11px 16px;
  border: 1px solid rgba(var(--accent-rgb),.24);
  border-radius: 12px;
  background: rgba(4,8,13,.82);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.018), 0 0 28px rgba(var(--accent-rgb),.08);
  text-align: center;
  opacity: 0;
  transform: translateY(7px) scale(.985);
}
.catalog-signal-copy small {
  color: rgba(var(--accent-rgb),.7);
  font-size: 5.5px;
  font-weight: 900;
  letter-spacing: .22em;
}
.catalog-signal-copy strong {
  color: #edf4fa;
  font-size: 8px;
  font-weight: 900;
  letter-spacing: .13em;
  text-shadow: 0 0 12px rgba(var(--accent-rgb),.26);
}
.catalog-signal-pulse {
  position: absolute;
  z-index: 3;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 15px rgba(var(--accent-rgb),.8);
  opacity: 0;
}
.catalog-stage.is-switching .catalog-signal-line {
  animation: ndplay-catalog-route-line var(--catalog-route-duration) cubic-bezier(.22,.72,.2,1) both;
}
.catalog-stage.is-switching .catalog-signal-line::after {
  animation: ndplay-catalog-route-scan 520ms 55ms cubic-bezier(.2,.8,.2,1) both;
}
.catalog-stage.is-switching .catalog-signal-copy {
  animation: ndplay-catalog-route-copy var(--catalog-route-duration) ease both;
}
.catalog-stage.is-switching .catalog-signal-pulse {
  animation: ndplay-catalog-route-pulse var(--catalog-route-duration) ease both;
}
.catalog-stage.switch-to-editorial .catalog-flipper {
  animation: ndplay-catalog-to-editorial 680ms cubic-bezier(.2,.76,.22,1) both;
}
.catalog-stage.switch-to-player .catalog-flipper {
  animation: ndplay-catalog-to-player 600ms cubic-bezier(.2,.76,.22,1) both;
}
.catalog-stage.switch-to-editorial .catalog-face-player > *,
.catalog-stage.switch-to-player .catalog-face-editorial > * {
  animation: ndplay-catalog-module-release 235ms ease both;
}
.catalog-stage.switch-to-editorial .catalog-face-editorial > *,
.catalog-stage.switch-to-player .catalog-face-player > * {
  animation: ndplay-catalog-module-acquire 410ms 245ms cubic-bezier(.16,1,.3,1) both;
}
.catalog-flip-button.is-routing .catalog-flip-core {
  animation: ndplay-router-core-pulse 640ms cubic-bezier(.16,1,.3,1) both;
}
.catalog-flip-button.is-routing::after {
  opacity: .72;
  transform: translateX(42%);
  transition-duration: 560ms;
}
@keyframes ndplay-catalog-to-editorial {
  0% { transform: rotateY(0deg) scale(1); filter: brightness(1); }
  34% { transform: rotateY(58deg) scale(.978); filter: brightness(.62) saturate(.72); }
  52% { transform: rotateY(104deg) scale(.966); filter: brightness(.38) saturate(.55); }
  100% { transform: rotateY(180deg) scale(1); filter: brightness(1) saturate(1); }
}
@keyframes ndplay-catalog-to-player {
  0% { transform: rotateY(180deg) scale(1); filter: brightness(1); }
  38% { transform: rotateY(116deg) scale(.974); filter: brightness(.46) saturate(.62); }
  58% { transform: rotateY(62deg) scale(.971); filter: brightness(.58) saturate(.74); }
  100% { transform: rotateY(0deg) scale(1); filter: brightness(1) saturate(1); }
}
@keyframes ndplay-catalog-route-line {
  0%, 9% { opacity: 0; transform: scaleX(.05); }
  23% { opacity: 1; transform: scaleX(.18); }
  48% { opacity: 1; transform: scaleX(1); }
  78% { opacity: .72; transform: scaleX(.64); }
  100% { opacity: 0; transform: scaleX(.08); }
}
@keyframes ndplay-catalog-route-scan {
  0% { transform: translateX(-100%); opacity: 0; }
  20% { opacity: 1; }
  100% { transform: translateX(100%); opacity: 0; }
}
@keyframes ndplay-catalog-route-copy {
  0%, 15% { opacity: 0; transform: translateY(7px) scale(.985); }
  34%, 68% { opacity: 1; transform: translateY(0) scale(1); }
  100% { opacity: 0; transform: translateY(-5px) scale(.99); }
}
@keyframes ndplay-catalog-route-pulse {
  0%, 22%, 100% { opacity: 0; transform: scale(.5); }
  42% { opacity: 1; transform: scale(1.15); }
  63% { opacity: .68; transform: scale(.82); }
}
@keyframes ndplay-catalog-module-release {
  0% { opacity: 1; transform: translateZ(0) scale(1); filter: blur(0); }
  100% { opacity: .08; transform: translateZ(-50px) scale(.982); filter: blur(3px); }
}
@keyframes ndplay-catalog-module-acquire {
  0% { opacity: 0; transform: translateZ(-48px) scale(.984); filter: blur(4px); }
  65% { opacity: 1; filter: blur(0); }
  100% { opacity: 1; transform: translateZ(0) scale(1); filter: blur(0); }
}
@keyframes ndplay-router-core-pulse {
  0% { box-shadow: 0 0 0 rgba(var(--accent-rgb),0); }
  28% { color: #fff; border-color: rgba(var(--accent-rgb),.7); box-shadow: 0 0 0 5px rgba(var(--accent-rgb),.07), 0 0 25px rgba(var(--accent-rgb),.22); }
  52% { transform: rotate(132deg) scale(.93); }
  100% { box-shadow: 0 0 0 rgba(var(--accent-rgb),0); }
}

.editorial-heading-stack { min-width: 0; }
.editorial-channel-state {
  display: block;
  margin-bottom: 5px;
  color: rgba(var(--accent-rgb),.72);
  font-size: 5.5px;
  font-weight: 900;
  letter-spacing: .19em;
  text-transform: uppercase;
}
.catalog-stage.switch-to-editorial .editorial-channel-state {
  animation: ndplay-editorial-channel-ignite 520ms 280ms ease both;
}
@keyframes ndplay-editorial-channel-ignite {
  0% { opacity: 0; letter-spacing: .28em; filter: blur(2px); }
  62% { opacity: 1; filter: blur(0); }
  100% { opacity: .82; letter-spacing: .19em; }
}

.editorial-feed {
  --editorial-drag-x: 0px;
  position: relative;
  transform: translateX(var(--editorial-drag-x));
  transition: transform 190ms cubic-bezier(.2,.76,.22,1);
  will-change: transform, opacity, filter;
}
.editorial-feed.is-dragging { transition: none; }

.editorial-feed.is-page-entering .editorial-card,
.editorial-feed.is-issue-entering .editorial-card { animation: none; }
.editorial-feed.is-page-leaving.direction-forward { animation: ndplay-editorial-page-leave-forward 215ms ease-in both; }
.editorial-feed.is-page-leaving.direction-backward { animation: ndplay-editorial-page-leave-backward 215ms ease-in both; }
.editorial-feed.is-page-entering.direction-forward { animation: ndplay-editorial-page-enter-forward 545ms cubic-bezier(.16,1,.3,1) both; }
.editorial-feed.is-page-entering.direction-backward { animation: ndplay-editorial-page-enter-backward 545ms cubic-bezier(.16,1,.3,1) both; }
.editorial-feed.is-issue-leaving { animation: ndplay-editorial-issue-leave 155ms ease-in both; }
.editorial-feed.is-issue-entering { animation: ndplay-editorial-issue-enter 400ms cubic-bezier(.16,1,.3,1) both; }
.editorial-feed.is-page-entering .editorial-visual { animation: ndplay-editorial-layer-cover 440ms 30ms cubic-bezier(.16,1,.3,1) both; }
.editorial-feed.is-page-entering .editorial-facts { animation: ndplay-editorial-layer-facts 450ms 90ms cubic-bezier(.16,1,.3,1) both; }
.editorial-feed.is-page-entering .editorial-content { animation: ndplay-editorial-layer-copy 470ms 145ms cubic-bezier(.16,1,.3,1) both; }
.editorial-feed.is-issue-entering .editorial-card::before {
  content: '';
  position: absolute;
  z-index: 4;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(180deg, transparent, rgba(var(--accent-rgb),.12) 46%, rgba(var(--accent-rgb),.28) 50%, rgba(var(--accent-rgb),.08) 54%, transparent);
  transform: translateY(-110%);
  animation: ndplay-editorial-chapter-scan 390ms cubic-bezier(.2,.8,.2,1) both;
}
.editorial-feed.is-issue-entering .editorial-visual { animation: none; }
.editorial-feed.is-issue-entering .editorial-facts,
.editorial-feed.is-issue-entering .editorial-content { animation: ndplay-editorial-chapter-copy 360ms 35ms ease both; }
.editorial-retention.is-rolling strong { animation: ndplay-editorial-counter-roll 410ms cubic-bezier(.16,1,.3,1) both; }
.editorial-page-tab.is-active { animation: ndplay-editorial-date-lock 390ms 150ms cubic-bezier(.16,1,.3,1) both; }
.editorial-issue-tab.is-active::after {
  content: '';
  position: absolute;
  left: 12%;
  right: 12%;
  bottom: 4px;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--accent), transparent);
  box-shadow: 0 0 8px rgba(var(--accent-rgb),.58);
  transform-origin: left;
  animation: ndplay-editorial-tab-ignite 310ms ease both;
}
.editorial-issue-tab { position: relative; overflow: hidden; }
@keyframes ndplay-editorial-page-leave-forward {
  to { opacity: 0; transform: translateX(-34px) rotateZ(-.7deg) scale(.992); filter: blur(2px) brightness(.72); }
}
@keyframes ndplay-editorial-page-leave-backward {
  to { opacity: 0; transform: translateX(34px) rotateZ(.7deg) scale(.992); filter: blur(2px) brightness(.72); }
}
@keyframes ndplay-editorial-page-enter-forward {
  0% { opacity: 0; transform: translateX(38px) rotateZ(.8deg) scale(.986); filter: blur(4px) brightness(.66); }
  58% { opacity: 1; filter: blur(0) brightness(1.04); }
  100% { opacity: 1; transform: translateX(0) rotateZ(0) scale(1); filter: blur(0) brightness(1); }
}
@keyframes ndplay-editorial-page-enter-backward {
  0% { opacity: 0; transform: translateX(-38px) rotateZ(-.8deg) scale(.986); filter: blur(4px) brightness(.66); }
  58% { opacity: 1; filter: blur(0) brightness(1.04); }
  100% { opacity: 1; transform: translateX(0) rotateZ(0) scale(1); filter: blur(0) brightness(1); }
}
@keyframes ndplay-editorial-issue-leave {
  to { opacity: .06; transform: scale(.994); filter: contrast(.78) brightness(.68); }
}
@keyframes ndplay-editorial-issue-enter {
  0% { opacity: .15; filter: brightness(.64) contrast(.82); }
  58% { opacity: 1; filter: brightness(1.08) contrast(1.02); }
  100% { opacity: 1; filter: none; }
}
@keyframes ndplay-editorial-layer-cover {
  from { opacity: 0; transform: translateX(22px) scale(.97); }
  to { opacity: 1; transform: translateX(0) scale(1); }
}
@keyframes ndplay-editorial-layer-facts {
  from { opacity: 0; transform: translateX(31px) scale(.985); }
  to { opacity: 1; transform: translateX(0) scale(1); }
}
@keyframes ndplay-editorial-layer-copy {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes ndplay-editorial-chapter-scan {
  0% { transform: translateY(-110%); opacity: 0; }
  18% { opacity: 1; }
  100% { transform: translateY(110%); opacity: 0; }
}
@keyframes ndplay-editorial-chapter-copy {
  from { opacity: .2; transform: translateY(5px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes ndplay-editorial-counter-roll {
  0% { opacity: .15; transform: translateY(-7px); filter: blur(2px); }
  48% { opacity: 1; transform: translateY(3px); filter: blur(0); }
  100% { transform: translateY(0); }
}
@keyframes ndplay-editorial-date-lock {
  0% { box-shadow: inset 0 0 0 1px rgba(var(--accent-rgb),0), 0 0 0 rgba(var(--accent-rgb),0); }
  55% { box-shadow: inset 0 0 0 1px rgba(var(--accent-rgb),.24), 0 0 24px rgba(var(--accent-rgb),.13); }
  100% { box-shadow: inset 0 0 0 1px rgba(var(--accent-rgb),.08), 0 8px 20px rgba(var(--accent-rgb),.06); }
}
@keyframes ndplay-editorial-tab-ignite {
  from { opacity: 0; transform: scaleX(.05); }
  to { opacity: .9; transform: scaleX(1); }
}

@media (max-width: 430px) {
  .catalog-signal-copy { min-width: 76%; padding: 9px 12px; }
  .catalog-signal-copy strong { font-size: 7px; }
  .editorial-channel-state { font-size: 5px; }
}

@media (prefers-reduced-motion: reduce) {
  .catalog-stage.switch-to-editorial .catalog-flipper,
  .catalog-stage.switch-to-player .catalog-flipper,
  .catalog-stage.is-switching .catalog-signal-line,
  .catalog-stage.is-switching .catalog-signal-line::after,
  .catalog-stage.is-switching .catalog-signal-copy,
  .catalog-stage.is-switching .catalog-signal-pulse,
  .catalog-stage.switch-to-editorial .catalog-face-player > *,
  .catalog-stage.switch-to-player .catalog-face-editorial > *,
  .catalog-stage.switch-to-editorial .catalog-face-editorial > *,
  .catalog-stage.switch-to-player .catalog-face-player > *,
  .catalog-flip-button.is-routing .catalog-flip-core,
  .editorial-feed,
  .editorial-feed *,
  .editorial-retention.is-rolling strong,
  .editorial-page-tab.is-active,
  .editorial-issue-tab.is-active::after {
    animation: none !important;
    transition-duration: .01ms !important;
  }
  .catalog-signal-overlay { display: none !important; }
}

/* v0.5.13 · Performance and startup geometry hotfix */
.catalog-flipper { will-change: auto; }
.catalog-stage.is-switching .catalog-flipper { will-change: transform, height; }

/* The active face must own the layout even before JS restores persisted state. */
.catalog-stage.is-settled:not(.is-editorial) .catalog-face-player,
.catalog-stage.is-settled.is-editorial .catalog-face-editorial {
  position: relative;
  display: block;
  visibility: visible;
  pointer-events: auto;
}
.catalog-stage.is-settled:not(.is-editorial) .catalog-face-editorial,
.catalog-stage.is-settled.is-editorial .catalog-face-player {
  display: none;
  visibility: hidden;
  pointer-events: none;
}

/* A closed 250-track queue should not participate in style/layout work. */
.queue-panel:not(.open) { content-visibility: hidden; }
.queue-panel.open { content-visibility: visible; }

/* Only a small deterministic subset of VFD glyphs remains alive during playback. */
body.is-playing:not(.motion-suspended) .track-identity-display:not(.identity-enter) .vfd-glyph::after {
  animation: none !important;
}
body.is-playing:not(.motion-suspended) .track-identity-display:not(.identity-enter) .vfd-line-title .vfd-glyph.vfd-flicker::after {
  animation: ndplay-vfd-live var(--flicker-duration, 8s) var(--flicker-delay, 0s) infinite steps(1,end) !important;
}
body.is-playing:not(.motion-suspended) .track-identity-display:not(.identity-enter) .vfd-line-artist .vfd-glyph.vfd-flicker::after,
body.is-playing:not(.motion-suspended) .track-identity-display:not(.identity-enter) .vfd-line-album .vfd-glyph.vfd-flicker::after {
  animation: ndplay-vfd-live-secondary-hires var(--flicker-duration, 8s) var(--flicker-delay, 0s) infinite steps(1,end) !important;
}

/* During a track hand-off, reserve the animation budget for artwork and identity ignition. */
body.track-switching .ambient-one,
body.track-switching .ambient-two,
body.track-switching .player-card::before,
body.track-switching .flow-symbol i,
body.track-switching .flow-button.is-active::after,
body.track-switching .mix-card.is-active::after,
body.track-switching .radio-card.is-active::after,
body.track-switching .volume-rail::before,
body.track-switching .stream-info::before,
body.track-switching .stream-pulse::after,
body.track-switching .transport-deck .play-button::after,
body.track-switching .artwork-screen .cover-halo {
  animation-play-state: paused !important;
}
body.track-switching .track-identity-display:not(.identity-enter) .vfd-glyph::after {
  animation: none !important;
}

/* Static tiny labels do not need a persistent backdrop-filter layer. */
.artwork-signal-status { backdrop-filter: none; -webkit-backdrop-filter: none; }
.catalog-signal-overlay::before { backdrop-filter: none; -webkit-backdrop-filter: none; }

/* Keep the new editorial motion while avoiding full-panel blur/filter animation. */
@keyframes ndplay-catalog-to-editorial {
  0% { transform: rotateY(0deg) scale(1); opacity: 1; }
  34% { transform: rotateY(58deg) scale(.978); opacity: .78; }
  52% { transform: rotateY(104deg) scale(.966); opacity: .56; }
  100% { transform: rotateY(180deg) scale(1); opacity: 1; }
}
@keyframes ndplay-catalog-to-player {
  0% { transform: rotateY(180deg) scale(1); opacity: 1; }
  38% { transform: rotateY(116deg) scale(.974); opacity: .62; }
  58% { transform: rotateY(62deg) scale(.971); opacity: .76; }
  100% { transform: rotateY(0deg) scale(1); opacity: 1; }
}
@keyframes ndplay-catalog-module-release {
  0% { opacity: 1; transform: translateZ(0) scale(1); }
  100% { opacity: .08; transform: translateZ(-50px) scale(.982); }
}
@keyframes ndplay-catalog-module-acquire {
  0% { opacity: 0; transform: translateZ(-48px) scale(.984); }
  65% { opacity: 1; }
  100% { opacity: 1; transform: translateZ(0) scale(1); }
}
@keyframes ndplay-editorial-page-leave-forward {
  to { opacity: 0; transform: translateX(-34px) rotateZ(-.7deg) scale(.992); }
}
@keyframes ndplay-editorial-page-leave-backward {
  to { opacity: 0; transform: translateX(34px) rotateZ(.7deg) scale(.992); }
}
@keyframes ndplay-editorial-page-enter-forward {
  0% { opacity: 0; transform: translateX(38px) rotateZ(.8deg) scale(.986); }
  58% { opacity: 1; }
  100% { opacity: 1; transform: translateX(0) rotateZ(0) scale(1); }
}
@keyframes ndplay-editorial-page-enter-backward {
  0% { opacity: 0; transform: translateX(-38px) rotateZ(-.8deg) scale(.986); }
  58% { opacity: 1; }
  100% { opacity: 1; transform: translateX(0) rotateZ(0) scale(1); }
}
@keyframes ndplay-editorial-issue-leave {
  to { opacity: .06; transform: scale(.994); }
}
@keyframes ndplay-editorial-issue-enter {
  0% { opacity: .15; }
  58% { opacity: 1; }
  100% { opacity: 1; }
}
body.track-switching.is-playing:not(.motion-suspended) .track-identity-display:not(.identity-enter) .vfd-glyph.vfd-flicker::after,
body.track-switching .catalog-flip-button.has-unread,
body.track-switching .catalog-flip-button.has-unread::before,
body.track-switching .catalog-flip-button.has-unread .catalog-flip-editorial > i {
  animation: none !important;
}

/* v0.5.14 · Artist Portrait & Editorial Shutter */
.artist-bio-body {
  margin-top: 18px;
  max-height: calc(min(82dvh, 760px) - 112px);
  padding: 1px 6px 8px 1px;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: rgba(var(--accent-rgb),.36) transparent;
}
.artist-bio-body::after {
  content: '';
  display: block;
  clear: both;
}
.artist-bio-body::-webkit-scrollbar { width: 6px; }
.artist-bio-body::-webkit-scrollbar-thumb {
  border-radius: 99px;
  background: rgba(var(--accent-rgb),.34);
}
.artist-bio-status,
.artist-bio-text {
  max-height: none;
  overflow: visible;
  margin-top: 0;
}
.artist-bio-text {
  padding: 2px 4px 8px 1px;
  white-space: pre-line;
}
.artist-bio-status:not([hidden]) {
  min-height: 168px;
  margin-left: 188px;
  display: flex;
  align-items: center;
}
.artist-portrait {
  position: relative;
  z-index: 1;
  float: left;
  width: 170px;
  margin: 0 18px 12px 0;
  color: var(--accent);
}
.artist-portrait-screen {
  position: relative;
  width: 100%;
  aspect-ratio: 1;
  overflow: hidden;
  border: 1px solid rgba(var(--accent-rgb),.34);
  border-radius: 18px;
  background:
    radial-gradient(circle at 50% 35%, rgba(var(--accent-rgb),.10), transparent 56%),
    linear-gradient(155deg, rgba(19,26,34,.96), rgba(5,8,13,.99));
  box-shadow:
    0 18px 42px rgba(0,0,0,.34),
    0 0 26px rgba(var(--accent-rgb),.065),
    inset 0 0 0 1px rgba(255,255,255,.025);
  isolation: isolate;
}
.artist-portrait-screen img,
.artist-portrait-glass,
.artist-portrait-line,
.artist-portrait-noise,
.artist-portrait-scan,
.artist-portrait-empty,
.artist-portrait-status {
  position: absolute;
}
.artist-portrait-screen img {
  z-index: 1;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transform: scaleY(.015) scaleX(.86);
  transform-origin: 50% 50%;
}
.artist-portrait-screen img[hidden] { display: none; }
.artist-portrait-glass {
  z-index: 2;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(180deg, rgba(255,255,255,.055), transparent 15%, transparent 82%, rgba(0,0,0,.22)),
    repeating-linear-gradient(180deg, rgba(255,255,255,.018) 0 1px, transparent 1px 4px);
  mix-blend-mode: screen;
  opacity: .45;
}
.artist-portrait-line {
  z-index: 4;
  left: 11%;
  right: 11%;
  top: 50%;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--accent), transparent);
  box-shadow: 0 0 11px rgba(var(--accent-rgb),.75);
  opacity: 0;
  transform: scaleX(.08);
}
.artist-portrait-noise {
  z-index: 3;
  inset: 0;
  pointer-events: none;
  opacity: 0;
  background:
    linear-gradient(180deg, transparent 0 18%, rgba(var(--accent-rgb),.18) 19% 20%, transparent 21% 63%, rgba(255,255,255,.10) 64% 65%, transparent 66%),
    repeating-linear-gradient(90deg, transparent 0 13px, rgba(255,255,255,.028) 13px 14px);
}
.artist-portrait-scan {
  z-index: 5;
  left: 0;
  right: 0;
  top: -12%;
  height: 10%;
  pointer-events: none;
  opacity: 0;
  background: linear-gradient(180deg, transparent, rgba(var(--accent-rgb),.34), rgba(255,255,255,.30), transparent);
  box-shadow: 0 0 18px rgba(var(--accent-rgb),.18);
}
.artist-portrait-empty {
  z-index: 1;
  inset: 0;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 7px;
  color: rgba(223,233,241,.62);
  text-align: center;
}
.artist-portrait-empty[hidden] { display: none; }
.artist-portrait-empty i {
  width: 7px;
  height: 7px;
  border: 1px solid rgba(var(--accent-rgb),.55);
  border-radius: 50%;
  box-shadow: 0 0 12px rgba(var(--accent-rgb),.20);
}
.artist-portrait-empty strong {
  color: rgba(235,241,247,.72);
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .16em;
}
.artist-portrait-empty small {
  color: rgba(var(--accent-rgb),.54);
  font-size: 6px;
  font-weight: 900;
  letter-spacing: .18em;
}
.artist-portrait-status {
  z-index: 6;
  right: 8px;
  bottom: 8px;
  left: 8px;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 6px 8px;
  border: 1px solid rgba(var(--accent-rgb),.22);
  border-radius: 9px;
  background: rgba(4,8,13,.76);
  box-shadow: 0 0 20px rgba(var(--accent-rgb),.06);
}
.artist-portrait-status > i {
  width: 5px;
  height: 5px;
  flex: 0 0 5px;
  border-radius: 50%;
  background: rgba(var(--accent-rgb),.35);
}
.artist-portrait-status span { min-width: 0; display: grid; gap: 2px; }
.artist-portrait-status small,
.artist-portrait-status b {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 900;
  letter-spacing: .13em;
}
.artist-portrait-status small { color: rgba(var(--accent-rgb),.58); font-size: 4.5px; }
.artist-portrait-status b { color: rgba(237,244,249,.82); font-size: 6px; }
.artist-portrait.is-pending .artist-portrait-line,
.artist-portrait.is-acquiring .artist-portrait-line {
  animation: ndplay-portrait-wait-line 1.45s ease-in-out infinite;
}
.artist-portrait.is-pending .artist-portrait-status > i,
.artist-portrait.is-acquiring .artist-portrait-status > i {
  background: var(--accent);
  box-shadow: 0 0 10px rgba(var(--accent-rgb),.72);
  animation: ndplay-portrait-status-pulse 1.2s ease-in-out infinite;
}
.artist-portrait.is-locking .artist-portrait-screen img {
  animation: ndplay-portrait-signal-lock 520ms cubic-bezier(.18,.76,.22,1) both;
}
.artist-portrait.is-locking .artist-portrait-line {
  animation: ndplay-portrait-lock-line 430ms cubic-bezier(.2,.8,.2,1) both;
}
.artist-portrait.is-locking .artist-portrait-noise {
  animation: ndplay-portrait-lock-noise 300ms 42ms steps(2,end) both;
}
.artist-portrait.is-locking .artist-portrait-scan {
  animation: ndplay-portrait-lock-scan 470ms 105ms cubic-bezier(.2,.8,.2,1) both;
}
.artist-portrait.is-locking .artist-portrait-status > i,
.artist-portrait.is-locked .artist-portrait-status > i {
  background: var(--accent);
  box-shadow: 0 0 10px rgba(var(--accent-rgb),.72);
}
.artist-portrait.is-locked .artist-portrait-screen img {
  opacity: 1;
  transform: none;
}
.artist-portrait.is-missing .artist-portrait-screen {
  animation: ndplay-portrait-no-data 410ms ease both;
}
.artist-portrait.is-missing .artist-portrait-line {
  animation: ndplay-portrait-missing-line 380ms ease both;
}
.artist-portrait.is-missing .artist-portrait-status > i {
  background: rgba(255,255,255,.18);
}
@keyframes ndplay-portrait-wait-line {
  0%,100% { opacity: .12; transform: scaleX(.08); }
  50% { opacity: .72; transform: scaleX(.78); }
}
@keyframes ndplay-portrait-status-pulse {
  0%,100% { opacity: .48; transform: scale(.82); }
  50% { opacity: 1; transform: scale(1.16); }
}
@keyframes ndplay-portrait-signal-lock {
  0% { opacity: 0; transform: scaleY(.012) scaleX(.72); filter: brightness(.5); }
  16% { opacity: .48; transform: scaleY(.12) scaleX(.94); }
  24% { opacity: 0; transform: scaleY(.02) scaleX(.82); }
  39% { opacity: .74; transform: scaleY(.28) scaleX(.97); filter: brightness(1.25); }
  48% { opacity: .18; transform: scaleY(.08) scaleX(.9); }
  70% { opacity: 1; transform: scaleY(1.02) scaleX(1); filter: brightness(1.08); }
  100% { opacity: 1; transform: none; filter: none; }
}
@keyframes ndplay-portrait-lock-line {
  0% { opacity: 0; transform: scaleX(.04); }
  22% { opacity: 1; transform: scaleX(.26); }
  62% { opacity: .92; transform: scaleX(1); }
  100% { opacity: 0; transform: scaleX(.82); }
}
@keyframes ndplay-portrait-lock-noise {
  0%,100% { opacity: 0; transform: translateY(0); }
  30% { opacity: .78; transform: translateY(-3px); }
  65% { opacity: .32; transform: translateY(5px); }
}
@keyframes ndplay-portrait-lock-scan {
  0% { opacity: 0; transform: translateY(0); }
  18% { opacity: .8; }
  100% { opacity: 0; transform: translateY(1120%); }
}
@keyframes ndplay-portrait-no-data {
  0% { opacity: .5; transform: scaleY(.04); }
  26% { opacity: .85; transform: scaleY(.17); }
  42% { opacity: .45; transform: scaleY(.03); }
  100% { opacity: 1; transform: none; }
}
@keyframes ndplay-portrait-missing-line {
  0% { opacity: 0; transform: scaleX(.05); }
  42% { opacity: .65; transform: scaleX(.72); }
  100% { opacity: 0; transform: scaleX(.14); }
}

/* Editorial Shutter: no blur, no 3D page flip, only composited transforms. */
.catalog-stage {
  --catalog-route-duration: 520ms;
  perspective: none;
}
.catalog-flipper,
.catalog-stage.is-editorial .catalog-flipper {
  transform: none !important;
  transform-style: flat;
  transition: height 260ms cubic-bezier(.2,.76,.22,1);
}
.catalog-face,
.catalog-face-player,
.catalog-face-editorial {
  transform: none !important;
  transform-style: flat;
  backface-visibility: visible;
  -webkit-backface-visibility: visible;
}
.catalog-signal-overlay {
  background: transparent;
  transition: opacity 90ms linear, visibility 0s linear 560ms;
}
.catalog-signal-overlay::before {
  background: rgba(4,8,13,.20);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  opacity: 1;
}
.catalog-shutter {
  position: absolute;
  z-index: 1;
  left: 0;
  width: 100%;
  height: 33.45%;
  opacity: 0;
  background:
    linear-gradient(90deg, rgba(var(--accent-rgb),.025), rgba(var(--accent-rgb),.13) 48%, rgba(var(--accent-rgb),.035)),
    rgba(5,9,14,.93);
  box-shadow: inset 0 1px rgba(255,255,255,.025), inset 0 -1px rgba(var(--accent-rgb),.12);
  will-change: transform, opacity;
}
.catalog-shutter-top { top: 0; }
.catalog-shutter-middle { top: 33.3%; }
.catalog-shutter-bottom { bottom: 0; }
.catalog-stage.switch-to-editorial .catalog-shutter-top,
.catalog-stage.switch-to-editorial .catalog-shutter-bottom,
.catalog-stage.switch-to-player .catalog-shutter-middle {
  animation: ndplay-shutter-right-left var(--catalog-route-duration) cubic-bezier(.22,.72,.2,1) both;
}
.catalog-stage.switch-to-editorial .catalog-shutter-middle,
.catalog-stage.switch-to-player .catalog-shutter-top,
.catalog-stage.switch-to-player .catalog-shutter-bottom {
  animation: ndplay-shutter-left-right var(--catalog-route-duration) cubic-bezier(.22,.72,.2,1) both;
}
.catalog-signal-line {
  z-index: 3;
  top: 7%;
  bottom: 7%;
  left: 50%;
  right: auto;
  width: 1px;
  height: auto;
  transform: scaleY(.05);
  background: linear-gradient(180deg, transparent, rgba(var(--accent-rgb),.55), var(--accent), rgba(var(--accent-rgb),.55), transparent);
}
.catalog-signal-line::after {
  inset: 0 -4px;
  background: linear-gradient(180deg, transparent 0 30%, rgba(255,255,255,.86) 49%, transparent 68%);
  transform: translateY(-100%);
}
.catalog-stage.is-switching .catalog-signal-line {
  animation: ndplay-shutter-spine var(--catalog-route-duration) ease both;
}
.catalog-stage.is-switching .catalog-signal-line::after {
  animation: ndplay-shutter-spine-scan 430ms 45ms cubic-bezier(.2,.8,.2,1) both;
}
.catalog-signal-copy {
  z-index: 4;
  background: rgba(4,8,13,.90);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
.catalog-signal-pulse { display: none; }
.catalog-stage.switch-to-editorial .catalog-flipper,
.catalog-stage.switch-to-player .catalog-flipper,
.catalog-stage.switch-to-editorial .catalog-face-player > *,
.catalog-stage.switch-to-player .catalog-face-editorial > *,
.catalog-stage.switch-to-editorial .catalog-face-editorial > *,
.catalog-stage.switch-to-player .catalog-face-player > * {
  animation: none !important;
  filter: none !important;
}
.catalog-stage.switch-to-editorial .catalog-face-player,
.catalog-stage.switch-to-player .catalog-face-editorial {
  animation: ndplay-shutter-face-release 175ms ease-in both;
}
.catalog-stage.switch-to-editorial .catalog-face-editorial,
.catalog-stage.switch-to-player .catalog-face-player {
  animation: ndplay-shutter-face-acquire 330ms 160ms cubic-bezier(.16,1,.3,1) both;
}
.catalog-stage.switch-to-editorial .editorial-channel-state {
  animation: ndplay-editorial-channel-shutter-ignite 320ms 195ms ease both;
}
.catalog-flip-button.is-routing .catalog-flip-core {
  animation: ndplay-shutter-router-pulse 500ms cubic-bezier(.16,1,.3,1) both;
}
@keyframes ndplay-shutter-right-left {
  0% { opacity: 0; transform: translateX(105%); }
  28% { opacity: 1; transform: translateX(0); }
  55% { opacity: 1; transform: translateX(0); }
  100% { opacity: 0; transform: translateX(-105%); }
}
@keyframes ndplay-shutter-left-right {
  0% { opacity: 0; transform: translateX(-105%); }
  28% { opacity: 1; transform: translateX(0); }
  55% { opacity: 1; transform: translateX(0); }
  100% { opacity: 0; transform: translateX(105%); }
}
@keyframes ndplay-shutter-spine {
  0%,14%,100% { opacity: 0; transform: scaleY(.04); }
  36% { opacity: 1; transform: scaleY(.3); }
  56% { opacity: 1; transform: scaleY(1); }
  78% { opacity: .48; transform: scaleY(.72); }
}
@keyframes ndplay-shutter-spine-scan {
  0% { opacity: 0; transform: translateY(-100%); }
  22% { opacity: 1; }
  100% { opacity: 0; transform: translateY(100%); }
}
@keyframes ndplay-shutter-face-release {
  to { opacity: 0; transform: translateX(-12px) scale(.995); }
}
@keyframes ndplay-shutter-face-acquire {
  from { opacity: 0; transform: translateX(14px) scale(.996); }
  to { opacity: 1; transform: none; }
}
@keyframes ndplay-editorial-channel-shutter-ignite {
  from { opacity: 0; letter-spacing: .25em; transform: translateX(8px); }
  to { opacity: .82; letter-spacing: .19em; transform: none; }
}
@keyframes ndplay-shutter-router-pulse {
  0%,100% { box-shadow: 0 0 0 rgba(var(--accent-rgb),0); transform: rotate(0); }
  38% { color: #fff; border-color: rgba(var(--accent-rgb),.7); box-shadow: 0 0 0 4px rgba(var(--accent-rgb),.06), 0 0 20px rgba(var(--accent-rgb),.18); transform: rotate(86deg) scale(.94); }
  64% { transform: rotate(94deg) scale(.97); }
}

/* Cassette-like editorial page feed without blur/filter animation. */
.editorial-feed {
  overflow: hidden;
  border-radius: 18px;
  will-change: transform, opacity;
}
.editorial-feed::before,
.editorial-feed::after {
  content: '';
  position: absolute;
  z-index: 8;
  left: 0;
  width: 100%;
  height: 50%;
  pointer-events: none;
  opacity: 0;
  background:
    linear-gradient(90deg, rgba(var(--accent-rgb),.02), rgba(var(--accent-rgb),.12), rgba(var(--accent-rgb),.025)),
    rgba(5,9,14,.92);
  box-shadow: inset 0 1px rgba(255,255,255,.02), inset 0 -1px rgba(var(--accent-rgb),.10);
}
.editorial-feed::before { top: 0; transform: translateX(-104%); }
.editorial-feed::after { bottom: 0; transform: translateX(104%); }
.editorial-feed.is-page-leaving::before,
.editorial-feed.is-page-entering::before {
  animation: ndplay-editorial-cassette-left 390ms ease both;
}
.editorial-feed.is-page-leaving::after,
.editorial-feed.is-page-entering::after {
  animation: ndplay-editorial-cassette-right 390ms ease both;
}
.editorial-feed.is-page-leaving.direction-forward {
  animation: ndplay-editorial-page-release-forward 185ms ease-in both;
}
.editorial-feed.is-page-leaving.direction-backward {
  animation: ndplay-editorial-page-release-backward 185ms ease-in both;
}
.editorial-feed.is-page-entering.direction-forward {
  animation: ndplay-editorial-page-acquire-forward 410ms cubic-bezier(.16,1,.3,1) both;
}
.editorial-feed.is-page-entering.direction-backward {
  animation: ndplay-editorial-page-acquire-backward 410ms cubic-bezier(.16,1,.3,1) both;
}
.editorial-feed.is-issue-leaving {
  animation: ndplay-editorial-issue-release-lite 135ms ease-in both;
}
.editorial-feed.is-issue-entering {
  animation: ndplay-editorial-issue-acquire-lite 310ms cubic-bezier(.16,1,.3,1) both;
}
.editorial-feed.is-page-entering .editorial-visual,
.editorial-feed.is-page-entering .editorial-facts,
.editorial-feed.is-page-entering .editorial-content,
.editorial-feed.is-issue-entering .editorial-facts,
.editorial-feed.is-issue-entering .editorial-content {
  filter: none !important;
}
.editorial-retention.is-rolling strong {
  animation: ndplay-editorial-counter-roll-lite 320ms cubic-bezier(.16,1,.3,1) both;
}
@keyframes ndplay-editorial-cassette-left {
  0% { opacity: 0; transform: translateX(-104%); }
  34%,54% { opacity: 1; transform: translateX(0); }
  100% { opacity: 0; transform: translateX(104%); }
}
@keyframes ndplay-editorial-cassette-right {
  0% { opacity: 0; transform: translateX(104%); }
  34%,54% { opacity: 1; transform: translateX(0); }
  100% { opacity: 0; transform: translateX(-104%); }
}
@keyframes ndplay-editorial-page-release-forward {
  to { opacity: 0; transform: translateX(-24px) scale(.995); }
}
@keyframes ndplay-editorial-page-release-backward {
  to { opacity: 0; transform: translateX(24px) scale(.995); }
}
@keyframes ndplay-editorial-page-acquire-forward {
  from { opacity: 0; transform: translateX(28px) scale(.994); }
  to { opacity: 1; transform: none; }
}
@keyframes ndplay-editorial-page-acquire-backward {
  from { opacity: 0; transform: translateX(-28px) scale(.994); }
  to { opacity: 1; transform: none; }
}
@keyframes ndplay-editorial-issue-release-lite {
  to { opacity: .12; transform: translateY(-4px); }
}
@keyframes ndplay-editorial-issue-acquire-lite {
  from { opacity: .18; transform: translateY(6px); }
  to { opacity: 1; transform: none; }
}
@keyframes ndplay-editorial-counter-roll-lite {
  0% { opacity: .2; transform: translateY(-7px); }
  55% { opacity: 1; transform: translateY(2px); }
  100% { transform: none; }
}

@media (max-width: 560px) {
  .artist-bio-body { max-height: calc(min(86dvh, 760px) - 102px); }
  .artist-portrait {
    float: none;
    width: min(58vw, 190px);
    margin: 0 auto 16px;
  }
  .artist-bio-status:not([hidden]) {
    min-height: 0;
    margin-left: 0;
  }
  .artist-bio-text { font-size: 15px; line-height: 1.72; }
  .catalog-signal-copy { min-width: 74%; }
}

@media (prefers-reduced-motion: reduce) {
  .artist-portrait *,
  .catalog-shutter,
  .catalog-stage.is-switching .catalog-signal-line,
  .catalog-stage.is-switching .catalog-signal-line::after,
  .catalog-stage.switch-to-editorial .catalog-face-player,
  .catalog-stage.switch-to-player .catalog-face-editorial,
  .catalog-stage.switch-to-editorial .catalog-face-editorial,
  .catalog-stage.switch-to-player .catalog-face-player,
  .editorial-feed::before,
  .editorial-feed::after {
    animation: none !important;
    transition-duration: .01ms !important;
  }
  .artist-portrait.is-locked .artist-portrait-screen img { opacity: 1; transform: none; }
}

/* The legacy editorial-card blur entrance is replaced entirely by the shutter/cassette deck. */
.editorial-feed .editorial-card {
  animation: none !important;
  filter: none !important;
}


/* v0.5.15 · Stream Telemetry Boot — lightweight staged acquisition. */
.stream-info { contain: layout paint; }
.stream-telemetry-status { position:absolute; z-index:3; top:46%; right:11px; left:11px; display:flex; align-items:center; gap:6px; min-width:0; pointer-events:none; opacity:0; transform:translateY(4px); transition:opacity 150ms ease,transform 180ms ease; }
.stream-telemetry-status>i { flex:0 0 auto; width:4px; height:4px; border-radius:50%; background:var(--accent); box-shadow:0 0 7px rgba(var(--accent-rgb),.55); }
.stream-telemetry-status>b { min-width:0; overflow:hidden; color:rgba(var(--accent-rgb),.66); text-overflow:ellipsis; white-space:nowrap; font-size:6px; font-weight:900; letter-spacing:.13em; }
.stream-info.stream-telemetry-booting .stream-telemetry-status,.stream-info.telemetry-locked .stream-telemetry-status,.stream-info.stream-telemetry-local-status .stream-telemetry-status,.stream-info.stream-telemetry-reconfig .stream-telemetry-status { opacity:1; transform:translateY(0); }
.stream-info.stream-telemetry-armed .stream-codec { opacity:0; transform:translateY(-4px) scaleX(.93); }
.stream-info.stream-telemetry-armed.telemetry-codec-on .stream-codec { opacity:1; transform:translateY(0) scaleX(1); transition:opacity 120ms ease,transform 180ms cubic-bezier(.2,.8,.2,1); animation:ndplay-stream-codec-lock 230ms ease-out both; }
.stream-metric { position:relative; padding-right:9px; }
.stream-metric::before { content:""; position:absolute; top:-1px; right:0; left:0; height:1px; pointer-events:none; background:linear-gradient(90deg,rgba(var(--accent-rgb),.58),rgba(var(--accent-rgb),.12)); opacity:0; transform:scaleX(0); transform-origin:left center; }
.stream-metric::after { content:""; position:absolute; top:50%; right:0; width:3px; height:3px; border-radius:50%; background:var(--accent); box-shadow:0 0 6px rgba(var(--accent-rgb),.48); opacity:.24; transform:translateY(-50%); }
.stream-info.stream-telemetry-armed .stream-metric { opacity:0; transform:translateX(-6px); }
.stream-info.stream-telemetry-armed .stream-metric::after { opacity:0; transform:translateY(-50%) scale(.35); }
.stream-info.stream-telemetry-armed.telemetry-depth-on .stream-metric[data-stream-metric="depth"],.stream-info.stream-telemetry-armed.telemetry-frequency-on .stream-metric[data-stream-metric="frequency"],.stream-info.stream-telemetry-armed.telemetry-bitrate-on .stream-metric[data-stream-metric="bitrate"] { opacity:1; transform:translateX(0); transition:opacity 150ms ease,transform 200ms cubic-bezier(.2,.8,.2,1); }
.stream-info.stream-telemetry-armed.telemetry-depth-on .stream-metric[data-stream-metric="depth"]::before,.stream-info.stream-telemetry-armed.telemetry-frequency-on .stream-metric[data-stream-metric="frequency"]::before,.stream-info.stream-telemetry-armed.telemetry-bitrate-on .stream-metric[data-stream-metric="bitrate"]::before { opacity:1; transform:scaleX(1); transition:opacity 90ms ease,transform 210ms cubic-bezier(.2,.8,.2,1); }
.stream-info.stream-telemetry-armed.telemetry-depth-on .stream-metric[data-stream-metric="depth"]::after,.stream-info.stream-telemetry-armed.telemetry-frequency-on .stream-metric[data-stream-metric="frequency"]::after,.stream-info.stream-telemetry-armed.telemetry-bitrate-on .stream-metric[data-stream-metric="bitrate"]::after { opacity:.88; transform:translateY(-50%) scale(1); transition:opacity 120ms ease,transform 180ms ease; }
.stream-metric.is-calibrating { animation:ndplay-stream-row-calibrate 560ms ease-out both; }
.stream-metric.is-calibrating::before { opacity:1; transform:scaleX(1); animation:ndplay-stream-line-calibrate 560ms ease-out both; }
.stream-metric.is-calibrating::after { opacity:1; animation:ndplay-stream-dot-confirm 560ms ease-out both; }
.stream-info.stream-telemetry-reconfig .stream-pulse::after { animation:ndplay-stream-reconfig 500ms cubic-bezier(.2,.8,.2,1) 1 both!important; animation-play-state:running!important; }
@keyframes ndplay-stream-codec-lock { 0%{opacity:.18;transform:translateY(-4px) scaleX(.9)} 58%{opacity:1;transform:translateY(0) scaleX(1.035)} 100%{opacity:1;transform:translateY(0) scaleX(1)} }
@keyframes ndplay-stream-row-calibrate { 0%{opacity:.48;transform:translateX(-4px)} 48%{opacity:1;transform:translateX(1px)} 100%{opacity:1;transform:translateX(0)} }
@keyframes ndplay-stream-line-calibrate { 0%{opacity:0;transform:scaleX(0)} 48%{opacity:1;transform:scaleX(1)} 100%{opacity:.18;transform:scaleX(1)} }
@keyframes ndplay-stream-dot-confirm { 0%,28%{opacity:0;transform:translateY(-50%) scale(.25)} 52%{opacity:1;transform:translateY(-50%) scale(1.35)} 100%{opacity:.24;transform:translateY(-50%) scale(1)} }
@keyframes ndplay-stream-reconfig { 0%{transform:translateX(-130%);opacity:0} 28%{opacity:.92} 100%{transform:translateX(350%);opacity:0} }
@media(max-width:560px){.stream-telemetry-status{top:43%;right:7px;left:7px;gap:4px}.stream-telemetry-status>b{font-size:4.7px;letter-spacing:.09em}.stream-telemetry-status>i{width:3px;height:3px}.stream-metric{padding-right:6px}.stream-metric::after{width:2px;height:2px}}
@media(prefers-reduced-motion:reduce){.stream-telemetry-status,.stream-info .stream-codec,.stream-info .stream-metric,.stream-info .stream-metric::before,.stream-info .stream-metric::after{animation:none!important;transition:none!important}}

/* v0.5.16 · Session Continuity — lightweight restored-session console. */
.session-resume {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  margin: 10px 0 12px;
  padding: 11px 12px;
  overflow: hidden;
  border: 1px solid rgba(var(--accent-rgb), .22);
  border-radius: 14px;
  background:
    linear-gradient(90deg, rgba(var(--accent-rgb), .065), transparent 35%),
    rgba(9, 12, 18, .86);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.018);
  opacity: 0;
  transform: translateY(-5px);
  transition: opacity 180ms ease, transform 180ms ease, border-color 180ms ease;
  contain: layout paint;
}
.session-resume[hidden] { display: none; }
.session-resume.is-visible { opacity: 1; transform: translateY(0); }
.session-resume::after {
  content: '';
  position: absolute;
  inset: 0 auto 0 0;
  width: 2px;
  background: var(--accent);
  opacity: .72;
  transform-origin: center;
  animation: session-continuity-lock 520ms ease-out both;
}
.session-resume-signal {
  width: 31px;
  height: 31px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  align-items: end;
  gap: 3px;
  padding: 6px;
  border: 1px solid rgba(var(--accent-rgb), .24);
  border-radius: 9px;
  background: rgba(0,0,0,.28);
}
.session-resume-signal i {
  display: block;
  min-height: 4px;
  border-radius: 2px 2px 0 0;
  background: var(--accent);
  opacity: .35;
  transform-origin: bottom;
  animation: session-continuity-meter 660ms steps(3,end) both;
}
.session-resume-signal i:nth-child(1) { height: 42%; animation-delay: 40ms; }
.session-resume-signal i:nth-child(2) { height: 78%; animation-delay: 95ms; }
.session-resume-signal i:nth-child(3) { height: 58%; animation-delay: 150ms; }
.session-resume-copy { min-width: 0; display: grid; gap: 3px; }
.session-resume-copy small {
  color: rgba(var(--accent-rgb), .78);
  font-size: 6.5px;
  font-weight: 900;
  letter-spacing: .16em;
}
.session-resume-copy strong,
.session-resume-copy span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.session-resume-copy strong { color: #eef4fb; font-size: 11.5px; line-height: 1.2; }
.session-resume-copy span { color: var(--muted); font-size: 8.5px; }
.session-resume-actions { display: flex; align-items: center; gap: 6px; }
.session-resume-button,
.session-resume-dismiss {
  border: 1px solid rgba(var(--accent-rgb), .24);
  color: #eaf8ff;
  background: rgba(var(--accent-rgb), .07);
  cursor: pointer;
}
.session-resume-button {
  min-height: 31px;
  padding: 0 12px;
  border-radius: 9px;
  font-size: 7px;
  font-weight: 900;
  letter-spacing: .11em;
}
.session-resume-dismiss {
  width: 29px;
  height: 29px;
  border-radius: 50%;
  font-size: 17px;
  line-height: 1;
}
.session-resume-button:hover,
.session-resume-dismiss:hover { border-color: rgba(var(--accent-rgb), .48); background: rgba(var(--accent-rgb), .12); }
.session-resume.is-playing .session-resume-button { opacity: .7; }
@keyframes session-continuity-lock {
  0% { transform: scaleY(.08); opacity: 0; }
  45% { transform: scaleY(1); opacity: .9; }
  100% { transform: scaleY(.54); opacity: .72; }
}
@keyframes session-continuity-meter {
  0% { transform: scaleY(.08); opacity: .1; }
  60% { transform: scaleY(1); opacity: .9; }
  100% { transform: scaleY(.72); opacity: .48; }
}
@media (max-width: 560px) {
  .session-resume { grid-template-columns: auto minmax(0, 1fr); gap: 9px; padding: 10px; }
  .session-resume-actions { grid-column: 1 / -1; justify-content: flex-end; }
  .session-resume-button { flex: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .session-resume,
  .session-resume::after,
  .session-resume-signal i { animation: none !important; transition-duration: .01ms !important; }
}


/* v0.5.17 · Queue Intelligence */
.queue-sheet { max-height: min(84dvh, 780px); }
.queue-flow-continue {
  min-width: 0;
  display: grid;
  grid-template-columns: 9px minmax(0,1fr) auto;
  align-items: center;
  gap: 9px;
  padding: 9px 11px;
  border: 1px solid rgba(var(--accent-rgb),.22);
  border-radius: 12px;
  background: rgba(255,255,255,.018);
  color: rgba(226,233,244,.68);
  text-align: left;
  cursor: pointer;
  transition: border-color 150ms ease, background 150ms ease, color 150ms ease;
}
.queue-flow-continue > i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: rgba(226,233,244,.28);
}
.queue-flow-continue span { min-width: 0; }
.queue-flow-continue small,
.queue-flow-continue strong { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.queue-flow-continue small { color: rgba(var(--accent-rgb),.52); font-size: 6px; font-weight: 900; letter-spacing: .14em; }
.queue-flow-continue strong { margin-top: 2px; font-size: 8px; letter-spacing: .1em; }
.queue-flow-continue b { color: rgba(226,233,244,.44); font-size: 7px; letter-spacing: .12em; }
.queue-flow-continue.is-active {
  border-color: rgba(var(--accent-rgb),.42);
  background: linear-gradient(90deg, rgba(var(--accent-rgb),.11), rgba(var(--accent-rgb),.025));
  color: var(--text);
}
.queue-flow-continue.is-active > i { background: var(--accent); box-shadow: 0 0 10px rgba(var(--accent-rgb),.68); }
.queue-flow-continue.is-active b { color: var(--accent); }
.queue-tool-row { display: flex; gap: 6px; }
.queue-tool-row button,
.queue-save-form button {
  min-height: 38px;
  padding: 7px 9px;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 10px;
  background: rgba(255,255,255,.025);
  color: rgba(226,233,244,.66);
  font-size: 6.5px;
  font-weight: 900;
  letter-spacing: .09em;
  cursor: pointer;
  transition: color 140ms ease, border-color 140ms ease, background 140ms ease, transform 140ms ease;
}
.queue-tool-row button:hover,
.queue-save-form button:hover { color: var(--accent); border-color: rgba(var(--accent-rgb),.36); background: rgba(var(--accent-rgb),.07); }
.queue-tool-row button:active,
.queue-save-form button:active { transform: scale(.96); }
.queue-save-form {
  display: grid;
  grid-template-columns: auto minmax(0,1fr) auto auto;
  align-items: center;
  gap: 7px;
  margin: 0 0 10px;
  padding: 8px;
  border: 1px solid rgba(var(--accent-rgb),.24);
  border-radius: 12px;
  background: rgba(var(--accent-rgb),.045);
}
.queue-save-form label { color: rgba(var(--accent-rgb),.55); font-size: 6px; font-weight: 900; letter-spacing: .12em; }
.queue-save-form input {
  min-width: 0;
  height: 36px;
  padding: 0 10px;
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 9px;
  outline: none;
  background: rgba(3,6,10,.42);
  color: var(--text);
  font: inherit;
  font-size: 10px;
}
.queue-save-form input:focus { border-color: rgba(var(--accent-rgb),.55); box-shadow: 0 0 0 2px rgba(var(--accent-rgb),.08); }
.queue-column-head { grid-template-columns: 32px minmax(0,1fr) 48px 28px; }
.queue-list { max-height: calc(min(84dvh, 780px) - 190px); }
.queue-item { position: relative; overflow: hidden; }
.queue-item .queue-track-select {
  grid-template-columns: 32px minmax(0,1fr) 48px;
  padding-right: 42px;
}
.queue-copy { padding-right: 72px; }
.queue-source-tag {
  position: absolute;
  right: 0;
  bottom: 1px;
  max-width: 68px;
  padding: 2px 4px;
  overflow: hidden;
  border: 1px solid rgba(var(--accent-rgb),.16);
  border-radius: 5px;
  color: rgba(var(--accent-rgb),.56);
  font-size: 5.5px;
  font-weight: 900;
  letter-spacing: .07em;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.queue-item-menu {
  position: absolute;
  z-index: 2;
  top: 10px;
  right: 7px;
  width: 30px;
  height: 32px;
  display: grid;
  place-content: center;
  gap: 3px;
  padding: 0;
  border: 1px solid transparent;
  border-radius: 9px;
  background: transparent;
  cursor: pointer;
}
.queue-item-menu i { width: 3px; height: 3px; border-radius: 50%; background: rgba(226,233,244,.42); }
.queue-item-menu:hover,
.queue-item-menu[aria-expanded="true"] { border-color: rgba(var(--accent-rgb),.28); background: rgba(var(--accent-rgb),.07); }
.queue-item-menu:hover i,
.queue-item-menu[aria-expanded="true"] i { background: var(--accent); }
@media (max-width: 560px) {
  .queue-tool-row { display: grid; grid-template-columns: repeat(3,1fr); }
  .queue-tool-row button { min-height: 34px; padding: 6px 5px; }
  .queue-save-form { grid-template-columns: 1fr 1fr; }
  .queue-save-form label, .queue-save-form input { grid-column: 1 / -1; }
  .queue-list { max-height: calc(min(80dvh, 700px) - 236px); }
  .queue-column-head { grid-template-columns: 28px minmax(0,1fr) 42px 26px; }
  .queue-item .queue-track-select { grid-template-columns: 28px minmax(0,1fr) 42px; padding-right: 39px; }
  .queue-copy { padding-right: 62px; }
}
@media (prefers-reduced-motion: reduce) {
  .queue-flow-continue,
.queue-tool-row button,
.queue-save-form button { transition-duration: .01ms !important; }
}


/* v0.5.18 · Queue Actions Popover */
.queue-column-head { grid-template-columns: 32px minmax(0,1fr) 44px 34px; gap: 8px; }
.queue-list { max-height: calc(min(84dvh, 780px) - 190px); }
.queue-item {
  display: grid;
  grid-template-columns: minmax(0,1fr) 34px;
  align-items: center;
  overflow: visible;
}
.queue-item .queue-track-select {
  grid-column: 1;
  min-width: 0;
  min-height: 56px;
  grid-template-columns: 32px minmax(0,1fr) 44px;
  gap: 8px;
  padding: 8px 5px 8px 10px;
  border-radius: 11px 7px 7px 11px;
}
.queue-copy { min-width: 0; padding-right: 0; }
.queue-item.current .queue-copy { padding-right: 44px; }
.queue-copy-meta {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 4px;
}
.queue-copy-meta small {
  min-width: 0;
  flex: 1 1 auto;
  margin: 0;
}
.queue-source-tag {
  position: static;
  flex: 0 0 auto;
  max-width: 58px;
  padding: 2px 5px;
  font-size: 5.5px;
  line-height: 1.15;
}
.queue-item .queue-item-menu {
  position: relative;
  z-index: 2;
  top: auto;
  right: auto;
  grid-column: 2;
  justify-self: end;
  width: 32px;
  min-width: 32px;
  height: 34px;
  min-height: 34px;
  display: flex;
  place-content: initial;
  align-items: center;
  justify-content: center;
  flex-direction: row;
  gap: 3px;
  padding: 0;
  border: 1px solid transparent;
  border-radius: 9px;
  background: transparent;
  transform: none;
}
.queue-item .queue-item-menu:hover,
.queue-item .queue-item-menu[aria-expanded="true"] {
  background: rgba(var(--accent-rgb),.07);
  transform: none;
}
.queue-item .queue-item-menu i { width: 3px; height: 3px; }
.queue-action-popover[hidden] { display: none !important; }
.queue-action-popover {
  position: fixed;
  z-index: 48;
  width: min(218px, calc(100vw - 24px));
  padding: 8px;
  overflow: hidden;
  border: 1px solid rgba(var(--accent-rgb),.34);
  border-radius: 14px;
  background:
    linear-gradient(180deg, rgba(25,31,42,.985), rgba(8,12,18,.99));
  box-shadow: 0 18px 48px rgba(0,0,0,.48), 0 0 24px rgba(var(--accent-rgb),.06), inset 0 1px rgba(255,255,255,.045);
  opacity: 0;
  pointer-events: none;
  transform: translateY(-5px) scale(.985);
  transform-origin: 100% 0;
  transition: opacity 120ms ease, transform 150ms cubic-bezier(.2,.78,.24,1);
  contain: layout paint style;
}
.queue-action-popover.is-above { transform-origin: 100% 100%; }
.queue-action-popover.open {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0) scale(1);
}
.queue-action-popover-head {
  min-width: 0;
  padding: 5px 7px 8px;
  border-bottom: 1px solid rgba(var(--accent-rgb),.13);
}
.queue-action-popover-head span,
.queue-action-popover-head strong {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.queue-action-popover-head span {
  color: rgba(var(--accent-rgb),.55);
  font-size: 6px;
  font-weight: 900;
  letter-spacing: .15em;
}
.queue-action-popover-head strong {
  margin-top: 4px;
  color: rgba(234,240,248,.84);
  font-size: 9px;
  font-weight: 750;
}
.queue-action-popover > button {
  width: 100%;
  min-height: 38px;
  display: grid;
  grid-template-columns: 25px minmax(0,1fr);
  align-items: center;
  gap: 7px;
  padding: 6px 9px;
  border: 0;
  border-radius: 9px;
  background: transparent;
  color: rgba(226,233,244,.68);
  text-align: left;
  cursor: pointer;
  transition: color 120ms ease, background 120ms ease, transform 120ms ease;
}
.queue-action-popover > button:hover,
.queue-action-popover > button:focus-visible {
  outline: none;
  color: var(--accent);
  background: rgba(var(--accent-rgb),.075);
}
.queue-action-popover > button:active { transform: scale(.98); }
.queue-action-popover > button i {
  color: rgba(var(--accent-rgb),.58);
  font-size: 15px;
  font-style: normal;
  line-height: 1;
  text-align: center;
}
.queue-action-popover > button span {
  font-size: 7px;
  font-weight: 900;
  letter-spacing: .10em;
}
.queue-action-popover > button.is-danger:hover,
.queue-action-popover > button.is-danger:focus-visible {
  color: #ff8da5;
  background: rgba(255,108,139,.07);
}
@media (max-width: 560px) {
  .queue-column-head { grid-template-columns: 28px minmax(0,1fr) 40px 32px; gap: 7px; }
  .queue-item { grid-template-columns: minmax(0,1fr) 32px; }
  .queue-item .queue-track-select {
    grid-template-columns: 28px minmax(0,1fr) 40px;
    gap: 7px;
    min-height: 58px;
    padding: 8px 3px 8px 8px;
  }
  .queue-item .queue-item-menu { width: 30px; min-width: 30px; height: 34px; min-height: 34px; }
  .queue-copy strong { font-size: 12px; }
  .queue-copy small { font-size: 9px; }
  .queue-source-tag { max-width: 52px; padding-inline: 4px; font-size: 5.2px; }
  .queue-action-popover { width: min(210px, calc(100vw - 20px)); }
}
@media (prefers-reduced-motion: reduce) {
  .queue-action-popover,
  .queue-action-popover > button { transition-duration: .01ms !important; }
}
.queue-item.current .queue-item-menu {
  background: transparent;
  box-shadow: none;
  color: inherit;
}
.queue-item.current .queue-item-menu[aria-expanded="true"],
.queue-item.current .queue-item-menu:hover {
  background: rgba(var(--accent-rgb),.07);
  box-shadow: none;
}
.queue-item .queue-item-menu:active { transform: scale(.94); }


/* v0.5.20 · FlowWeek */
.flowweek-issue {
  container-type: inline-size;
  overflow: hidden;
  border-color: rgba(var(--accent-rgb), .3);
  background:
    linear-gradient(180deg, rgba(var(--accent-rgb), .075), transparent 180px),
    linear-gradient(145deg, rgba(255,255,255,.036), rgba(255,255,255,.014));
}
.flowweek-content { padding: 22px; }
.flowweek-masthead { display: grid; gap: 6px; margin-bottom: 18px; }
.flowweek-signal { display: flex; justify-content: space-between; gap: 10px 16px; align-items: center; flex-wrap: wrap; }
.flowweek-signal strong, .flowweek-signal span {
  color: var(--accent); font-size: 8px; font-weight: 900; letter-spacing: .16em; text-transform: uppercase;
}
.flowweek-signal span { color: rgba(255,255,255,.48); }
.flowweek-masthead h3 { margin: 0; font-size: clamp(30px, 6vw, 56px); line-height: .95; letter-spacing: -.04em; }
.flowweek-masthead > p { margin: 0; color: rgba(255,255,255,.58); font-size: 14px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.flowweek-hero { display: grid; grid-template-columns: 164px minmax(0, 1fr); gap: 16px; align-items: stretch; }
.flowweek-cover-screen {
  position: relative; width: 100%; min-width: 0; aspect-ratio: 1; overflow: hidden;
  border: 1px solid rgba(var(--accent-rgb), .34); border-radius: 18px;
  background: rgba(0,0,0,.4); box-shadow: inset 0 1px rgba(255,255,255,.04);
}
.flowweek-cover-screen img { width: 100%; height: 100%; display: block; object-fit: cover; }
.flowweek-cover-screen span {
  position: absolute; left: 10px; right: 10px; bottom: 9px; padding: 6px 8px;
  border: 1px solid rgba(var(--accent-rgb), .25); border-radius: 8px;
  background: rgba(5,9,14,.84); color: var(--accent); font-size: 7px; font-weight: 900;
  letter-spacing: .13em; text-align: center;
}
.flowweek-intro {
  display: flex; flex-direction: column; justify-content: space-between; min-width: 0; padding: 16px;
  border: 1px solid rgba(255,255,255,.075); border-radius: 18px; background: rgba(255,255,255,.022);
}
.flowweek-intro p { max-width: 38ch; margin: 0; color: rgba(255,255,255,.80); font-size: 15px; line-height: 1.52; overflow-wrap: anywhere; }
.flowweek-intro time { margin-top: 18px; color: rgba(255,255,255,.40); font-size: 8px; font-weight: 900; letter-spacing: .13em; }
.flowweek-stats { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 8px; margin: 14px 0 22px; }
.flowweek-stats span { min-width: 0; padding: 12px; border: 1px solid rgba(var(--accent-rgb),.18); border-radius: 13px; background: rgba(var(--accent-rgb),.035); }
.flowweek-stats b { display: block; color: var(--accent); font-size: 24px; line-height: 1; }
.flowweek-stats small { display: block; margin-top: 6px; color: rgba(255,255,255,.45); font-size: 7px; font-weight: 900; letter-spacing: .11em; overflow-wrap: anywhere; }
.flowweek-section { margin-top: 20px; }
.flowweek-section > header { display: flex; justify-content: space-between; gap: 14px; align-items: end; margin-bottom: 10px; }
.flowweek-section h4 { margin: 0; color: rgba(255,255,255,.92); font-size: 12px; letter-spacing: .1em; }
.flowweek-section header span { color: rgba(255,255,255,.37); font-size: 8px; letter-spacing: .08em; text-align: right; }
.flowweek-album-rail { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 9px; }
.flowweek-album-card {
  min-width: 0; display: grid; grid-template-columns: 58px minmax(0,1fr); gap: 10px; align-items: center; padding: 8px;
  border: 1px solid rgba(255,255,255,.07); border-radius: 14px; background: rgba(255,255,255,.018); color: inherit; text-align: left;
}
.flowweek-album-card:hover, .flowweek-album-card:focus-visible { border-color: rgba(var(--accent-rgb),.4); background: rgba(var(--accent-rgb),.055); }
.flowweek-album-card img { width: 58px; aspect-ratio: 1; object-fit: cover; border-radius: 10px; background: rgba(0,0,0,.35); }
.flowweek-album-card span { min-width: 0; display: block; }
.flowweek-album-card small { display: block; margin-bottom: 5px; color: var(--accent); font-size: 6px; font-weight: 900; letter-spacing: .11em; }
.flowweek-album-card b, .flowweek-album-card em { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.flowweek-album-card b { font-size: 11px; }
.flowweek-album-card em { margin-top: 4px; color: rgba(255,255,255,.42); font-size: 8px; font-style: normal; }
.flowweek-signal-list { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 8px; }
.flowweek-signal-list > span { min-width: 0; padding: 11px 12px; border: 1px solid rgba(255,255,255,.065); border-radius: 12px; background: rgba(255,255,255,.015); }
.flowweek-signal-list b, .flowweek-signal-list small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.flowweek-signal-list b { font-size: 11px; }
.flowweek-signal-list small { margin-top: 4px; color: rgba(255,255,255,.4); font-size: 7px; letter-spacing: .08em; }
.flowweek-editorial-log small { color: var(--accent); }
.flowweek-actions { margin-top: 24px; }

/* v0.5.21 · FlowWeek Layout Hotfix */
@container (max-width: 520px) {
  .flowweek-content { padding: 18px; }
  .flowweek-signal { align-items: flex-start; flex-direction: column; gap: 5px; }
  .flowweek-masthead h3 { font-size: clamp(34px, 13cqw, 54px); }
  .flowweek-hero { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .flowweek-cover-screen { width: min(100%, 230px); justify-self: start; }
  .flowweek-intro { padding: 0; border: 0; border-radius: 0; background: transparent; }
  .flowweek-intro p { max-width: 34ch; font-size: 14px; line-height: 1.48; }
  .flowweek-intro time { margin-top: 10px; font-size: 7px; }
  .flowweek-stats { grid-template-columns: repeat(2, minmax(0,1fr)); margin-top: 18px; }
  .flowweek-album-rail { grid-template-columns: 1fr; }
  .flowweek-signal-list { grid-template-columns: 1fr; }
  .flowweek-section > header { align-items: flex-start; flex-direction: column; gap: 4px; }
  .flowweek-section header span { text-align: left; }
}

@media (max-width: 720px) {
  .flowweek-content { padding: 18px; }
  .flowweek-signal { align-items: flex-start; flex-direction: column; gap: 5px; }
  .flowweek-hero { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .flowweek-cover-screen { width: min(100%, 230px); }
  .flowweek-intro { padding: 0; border: 0; background: transparent; }
  .flowweek-intro p { font-size: 14px; line-height: 1.48; }
  .flowweek-intro time { margin-top: 10px; font-size: 7px; }
  .flowweek-stats { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .flowweek-album-rail { grid-template-columns: 1fr; }
  .flowweek-signal-list { grid-template-columns: 1fr; }
  .flowweek-section > header { align-items: flex-start; flex-direction: column; gap: 4px; }
  .flowweek-section header span { text-align: left; }
}


/* ND Play v0.5.22 · Listening Log + FlowWeek split module. */
.flowweek-hero {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  align-items: stretch;
}
.flowweek-cover-screen,
.flowweek-intro {
  width: 100%;
  aspect-ratio: 1;
  min-width: 0;
}
.flowweek-intro {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: clamp(14px, 3.5cqw, 22px);
  overflow: hidden;
  border: 1px solid rgba(var(--accent-rgb),.24);
  border-radius: 18px;
  background:
    linear-gradient(90deg, transparent, rgba(var(--accent-rgb),.09), transparent) 0 0 / 100% 1px no-repeat,
    radial-gradient(circle at 100% 0%, rgba(var(--accent-rgb),.12), transparent 48%),
    rgba(255,255,255,.024);
  box-shadow: inset 0 1px rgba(255,255,255,.025);
}
.flowweek-intro::before {
  content: "СВОДКА";
  color: var(--accent);
  font-size: 7px;
  font-weight: 900;
  letter-spacing: .16em;
}
.flowweek-intro::after {
  content: "";
  position: absolute;
  top: 13px;
  right: 13px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 10px rgba(var(--accent-rgb),.56);
}
.flowweek-intro p {
  max-width: 24ch;
  margin: auto 0;
  color: rgba(255,255,255,.82);
  font-size: clamp(11px, 2.45cqw, 15px);
  line-height: 1.48;
}
.flowweek-intro time {
  margin-top: 10px;
  font-size: 7px;
  line-height: 1.35;
}
@container (max-width: 520px) {
  .flowweek-hero { grid-template-columns: repeat(2, minmax(0,1fr)); gap: 8px; }
  .flowweek-cover-screen { width: 100%; justify-self: stretch; }
  .flowweek-intro {
    aspect-ratio: 1;
    padding: 12px;
    border: 1px solid rgba(var(--accent-rgb),.22);
    border-radius: 16px;
    background:
      radial-gradient(circle at 100% 0%, rgba(var(--accent-rgb),.10), transparent 48%),
      rgba(255,255,255,.022);
  }
  .flowweek-intro p { max-width: 22ch; font-size: clamp(9px, 3.1cqw, 12px); line-height: 1.42; }
  .flowweek-intro time { margin-top: 6px; font-size: 6px; }
}
@media (max-width: 370px) {
  .flowweek-hero { grid-template-columns: minmax(0,1fr); }
  .flowweek-cover-screen, .flowweek-intro { width: min(100%, 240px); }
}

.listening-log-launch {
  width: 100%;
  min-height: 58px;
  display: grid;
  grid-template-columns: 42px minmax(0,1fr) auto;
  align-items: center;
  gap: 12px;
  margin: 10px 0 0;
  padding: 9px 14px;
  border: 1px solid rgba(var(--accent-rgb),.18);
  border-radius: 17px;
  background:
    radial-gradient(circle at 100% 0%, rgba(var(--accent-rgb),.10), transparent 44%),
    linear-gradient(145deg, rgba(255,255,255,.035), rgba(255,255,255,.012));
  color: #e9eef6;
  text-align: left;
  cursor: pointer;
  transition: border-color 180ms ease, background 180ms ease, transform 140ms ease;
}
.listening-log-launch:hover { border-color: rgba(var(--accent-rgb),.38); background-color: rgba(var(--accent-rgb),.035); }
.listening-log-launch:active { transform: scale(.99); }
.listening-log-launch > span:nth-child(2) { min-width: 0; display: grid; gap: 4px; }
.listening-log-launch small { color: var(--accent); font-size: 7px; font-weight: 900; letter-spacing: .14em; }
.listening-log-launch strong { overflow: hidden; font-size: 12px; letter-spacing: .05em; text-overflow: ellipsis; white-space: nowrap; }
.listening-log-launch > b { color: rgba(var(--accent-rgb),.82); font-size: 7px; letter-spacing: .13em; }
.listening-log-launch-mark { width: 42px; height: 38px; display: flex; align-items: end; justify-content: center; gap: 3px; padding-bottom: 8px; border: 1px solid rgba(var(--accent-rgb),.20); border-radius: 12px; background: rgba(2,6,10,.38); }
.listening-log-launch-mark i { width: 3px; border-radius: 2px; background: var(--accent); box-shadow: 0 0 7px rgba(var(--accent-rgb),.38); }
.listening-log-launch-mark i:nth-child(1) { height: 8px; }
.listening-log-launch-mark i:nth-child(2) { height: 15px; }
.listening-log-launch-mark i:nth-child(3) { height: 22px; }
.listening-log-launch-mark i:nth-child(4) { height: 12px; }
.listening-log-launch-mark i:nth-child(5) { height: 18px; }

.listening-log-panel { position: fixed; inset: 0; z-index: 180; pointer-events: none; visibility: hidden; }
.listening-log-panel.open { pointer-events: auto; visibility: visible; }
.listening-log-backdrop { position: absolute; inset: 0; border: 0; background: rgba(3,6,10,.76); opacity: 0; transition: opacity 200ms ease; }
.listening-log-panel.open .listening-log-backdrop { opacity: 1; }
.listening-log-sheet {
  position: absolute;
  top: max(12px, env(safe-area-inset-top));
  right: max(12px, env(safe-area-inset-right));
  bottom: max(12px, env(safe-area-inset-bottom));
  left: max(12px, env(safe-area-inset-left));
  width: min(920px, calc(100vw - 24px));
  margin: auto;
  padding: 22px;
  overflow: auto;
  overscroll-behavior: contain;
  border: 1px solid rgba(var(--accent-rgb),.28);
  border-radius: 24px;
  background:
    radial-gradient(circle at 100% 0%, rgba(var(--accent-rgb),.12), transparent 34%),
    linear-gradient(145deg, #151c26, #0b1017 70%);
  box-shadow: 0 32px 80px rgba(0,0,0,.52);
  opacity: 0;
  transform: translateY(18px) scale(.985);
  transition: opacity 220ms ease, transform 260ms cubic-bezier(.2,.78,.22,1);
}
.listening-log-panel.open .listening-log-sheet { opacity: 1; transform: none; }
.listening-log-neon-line { position: absolute; top: 0; right: 36px; left: 36px; height: 1px; background: linear-gradient(90deg, transparent, var(--accent), transparent); box-shadow: 0 0 12px rgba(var(--accent-rgb),.46); }
.listening-log-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; padding-bottom: 16px; border-bottom: 1px solid rgba(255,255,255,.075); }
.listening-log-header p, .listening-log-module header p, .listening-log-timeline-module header p { margin: 0 0 6px; color: var(--accent); font-size: 7px; font-weight: 900; letter-spacing: .17em; }
.listening-log-header h2 { margin: 0; font-size: clamp(24px, 5vw, 42px); letter-spacing: -.035em; }
.listening-log-header span { display: block; margin-top: 7px; color: rgba(255,255,255,.43); font-size: 10px; }
.listening-log-close { width: 44px; height: 44px; flex: 0 0 44px; display: grid; place-items: center; border: 1px solid rgba(255,255,255,.10); border-radius: 14px; background: rgba(255,255,255,.025); color: rgba(255,255,255,.62); cursor: pointer; }
.listening-log-close svg { width: 20px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; }
.listening-log-period { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 8px; margin: 16px 0; }
.listening-log-period button { min-height: 42px; border: 1px solid rgba(255,255,255,.08); border-radius: 13px; background: rgba(255,255,255,.018); color: rgba(255,255,255,.46); font-size: 8px; font-weight: 900; letter-spacing: .11em; cursor: pointer; }
.listening-log-period button.is-active { border-color: rgba(var(--accent-rgb),.44); background: rgba(var(--accent-rgb),.08); color: var(--accent); box-shadow: inset 0 0 18px rgba(var(--accent-rgb),.035); }
.listening-log-status, .listening-log-empty { min-height: 180px; display: grid; place-content: center; text-align: center; color: rgba(255,255,255,.48); }
.listening-log-empty span { display: flex; justify-content: center; gap: 7px; margin-bottom: 14px; }
.listening-log-empty span i { width: 6px; height: 6px; border-radius: 50%; background: rgba(var(--accent-rgb),.62); box-shadow: 0 0 8px rgba(var(--accent-rgb),.30); }
.listening-log-empty strong { color: #e9eef6; font-size: 18px; }
.listening-log-empty p { max-width: 34ch; margin: 8px auto 0; font-size: 11px; line-height: 1.5; }
.listening-log-content { display: grid; gap: 14px; }
.listening-log-stats { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 9px; }
.listening-log-stats span { min-width: 0; padding: 15px; border: 1px solid rgba(var(--accent-rgb),.19); border-radius: 15px; background: rgba(var(--accent-rgb),.035); }
.listening-log-stats b { display: block; overflow: hidden; color: var(--accent); font-size: clamp(20px, 4vw, 32px); line-height: 1; text-overflow: ellipsis; white-space: nowrap; }
.listening-log-stats small { display: block; margin-top: 8px; color: rgba(255,255,255,.43); font-size: 7px; font-weight: 900; letter-spacing: .1em; }
.listening-log-dashboard { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 12px; }
.listening-log-module, .listening-log-timeline-module { min-width: 0; padding: 16px; border: 1px solid rgba(255,255,255,.075); border-radius: 17px; background: rgba(255,255,255,.018); }
.listening-log-module header h3, .listening-log-timeline-module header h3 { margin: 0; font-size: 15px; }
.listening-log-album-list, .listening-log-artist-list, .listening-log-return-list { display: grid; gap: 6px; margin-top: 12px; }
.listening-log-album { width: 100%; min-width: 0; display: grid; grid-template-columns: 42px minmax(0,1fr) auto; align-items: center; gap: 10px; padding: 7px; border: 1px solid transparent; border-radius: 12px; background: rgba(255,255,255,.015); color: inherit; text-align: left; cursor: pointer; }
.listening-log-album:hover { border-color: rgba(var(--accent-rgb),.20); background: rgba(var(--accent-rgb),.035); }
.listening-log-album img { width: 42px; aspect-ratio: 1; object-fit: cover; border-radius: 9px; background: rgba(0,0,0,.35); }
.listening-log-album span, .listening-log-artist-list > span > span { min-width: 0; display: grid; gap: 4px; }
.listening-log-album strong, .listening-log-album small, .listening-log-artist-list strong, .listening-log-artist-list small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.listening-log-album strong, .listening-log-artist-list strong { font-size: 10px; }
.listening-log-album small, .listening-log-artist-list small { color: rgba(255,255,255,.39); font-size: 7px; }
.listening-log-album > b { color: var(--accent); font-size: 12px; }
.listening-log-artist-list > span { display: grid; grid-template-columns: 28px minmax(0,1fr); align-items: center; gap: 8px; min-height: 48px; padding: 7px 8px; border-bottom: 1px solid rgba(255,255,255,.055); }
.listening-log-artist-list > span > b { color: rgba(var(--accent-rgb),.72); font-size: 10px; }
.listening-log-return-list { grid-template-columns: repeat(3, minmax(0,1fr)); }
.listening-log-return-list button { min-width: 0; display: grid; grid-template-columns: 48px minmax(0,1fr); align-items: center; gap: 10px; padding: 8px; border: 1px solid rgba(255,255,255,.065); border-radius: 13px; background: rgba(255,255,255,.014); color: inherit; text-align: left; cursor: pointer; }
.listening-log-return-list img { width: 48px; aspect-ratio: 1; object-fit: cover; border-radius: 10px; }
.listening-log-return-list span { min-width: 0; display: grid; gap: 4px; }
.listening-log-return-list strong, .listening-log-return-list small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.listening-log-return-list strong { font-size: 10px; }
.listening-log-return-list small { color: rgba(255,255,255,.40); font-size: 7px; }
.listening-log-timeline-module > header { display: flex; align-items: end; justify-content: space-between; gap: 12px; }
.listening-log-timeline-module > header > span { color: rgba(255,255,255,.38); font-size: 8px; letter-spacing: .09em; }
.listening-log-timeline { display: grid; gap: 17px; margin-top: 15px; }
.listening-log-day > header { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 6px; }
.listening-log-day > header strong { color: rgba(255,255,255,.68); font-size: 9px; letter-spacing: .10em; }
.listening-log-day > header small { color: var(--accent); font-size: 8px; }
.listening-log-day > div { display: grid; }
.listening-log-entry { width: 100%; min-width: 0; display: grid; grid-template-columns: 48px 40px minmax(0,1fr) auto; align-items: center; gap: 10px; min-height: 58px; padding: 8px 4px; border: 0; border-top: 1px solid rgba(255,255,255,.055); background: transparent; color: inherit; text-align: left; cursor: pointer; }
.listening-log-entry time { color: rgba(var(--accent-rgb),.70); font-size: 8px; font-variant-numeric: tabular-nums; }
.listening-log-entry img { width: 40px; aspect-ratio: 1; object-fit: cover; border-radius: 9px; background: rgba(0,0,0,.3); }
.listening-log-entry > span { min-width: 0; display: grid; gap: 4px; }
.listening-log-entry strong, .listening-log-entry small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.listening-log-entry strong { font-size: 11px; }
.listening-log-entry small { color: rgba(255,255,255,.39); font-size: 8px; }
.listening-log-entry > b { color: rgba(255,255,255,.47); font-size: 8px; font-weight: 700; }
body.listening-log-open { overflow: hidden; }
@media (max-width: 700px) {
  .listening-log-sheet { padding: 18px; border-radius: 21px; }
  .listening-log-stats { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .listening-log-dashboard { grid-template-columns: minmax(0,1fr); }
  .listening-log-return-list { grid-template-columns: minmax(0,1fr); }
}
@media (max-width: 470px) {
  .listening-log-period { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .listening-log-entry { grid-template-columns: 40px 36px minmax(0,1fr); gap: 8px; }
  .listening-log-entry > b { grid-column: 3; justify-self: start; margin-top: -5px; }
  .listening-log-entry img { width: 36px; }
  .listening-log-header span { max-width: 30ch; }
}
@media (prefers-reduced-motion: reduce) {
  .listening-log-backdrop, .listening-log-sheet { transition: none; }
}

/* ND Play v0.5.23 · Intelligent Stream Quality — click-to-reveal telemetry. */
.stream-info {
  cursor: pointer;
}
.stream-info:focus-within {
  border-color: rgba(var(--accent-rgb), .58);
  box-shadow:
    inset 0 0 0 1px rgba(var(--accent-rgb), .16),
    0 13px 31px rgba(0,0,0,.14),
    0 0 26px rgba(var(--accent-rgb),.10);
}
.stream-compact {
  position: relative;
  z-index: 2;
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  justify-content: space-between;
  width: 100%;
  min-width: 0;
  min-height: 0;
  transition: opacity 170ms ease, transform 220ms cubic-bezier(.2,.8,.2,1), filter 190ms ease;
}
.stream-info.stream-quality-reconnecting {
  border-color: rgba(255, 190, 92, .42);
}
.stream-info.stream-quality-lost {
  border-color: rgba(255, 104, 126, .48);
}
@keyframes ndplay-quality-status-pulse {
  from { opacity: .38; transform: scale(.78); }
  to { opacity: 1; transform: scale(1.18); }
}
@media (prefers-reduced-motion: reduce) {
  .stream-compact {
    animation: none !important;
    transition: none !important;
  }
}

/* ND Play v0.5.25 · Mobile Stream Fit — details stay inside the original square. */

/* ND Play v0.5.24 · Radio Identity & Authorization Signal hotfix. */
.auth-shell.auth-success-active .auth-card {
  opacity: .08;
  transform: scale(.982);
  filter: blur(4px);
  pointer-events: none;
  transition: opacity 180ms ease, transform 260ms cubic-bezier(.2,.8,.2,1), filter 180ms ease;
}
.auth-success-matrix {
  position: fixed;
  z-index: 20;
  inset: 0;
  display: grid;
  place-items: center;
  padding: max(18px, env(safe-area-inset-top)) 16px max(18px, env(safe-area-inset-bottom));
  overflow: hidden;
  background:
    radial-gradient(circle at 50% 45%, rgba(var(--accent-rgb),.085), transparent 34%),
    rgba(4,6,9,.93);
  opacity: 0;
  pointer-events: none;
}
.auth-success-matrix[hidden] { display: none !important; }
.auth-success-matrix.is-visible { animation: ndplay-auth-success-enter 230ms ease-out both; }
.auth-success-grid {
  position: absolute;
  inset: -12%;
  opacity: .22;
  background-image:
    linear-gradient(rgba(var(--accent-rgb),.07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(var(--accent-rgb),.055) 1px, transparent 1px);
  background-size: 24px 24px;
  mask-image: radial-gradient(circle at center, #000 0 36%, transparent 76%);
  transform: perspective(560px) rotateX(58deg) translateY(28%);
  transform-origin: center bottom;
  animation: ndplay-auth-grid-drift 3.2s linear infinite;
}
.auth-success-matrix::before {
  content: "";
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(180deg, transparent 0 3px, rgba(255,255,255,.018) 4px);
  opacity: .7;
  pointer-events: none;
}
.auth-success-matrix::after {
  content: "";
  position: absolute;
  right: 0;
  left: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, rgba(var(--accent-rgb),.92), transparent);
  box-shadow: 0 0 18px rgba(var(--accent-rgb),.42);
  opacity: .72;
  animation: ndplay-auth-scan 940ms cubic-bezier(.2,.7,.25,1) both;
}
.auth-success-console {
  position: relative;
  z-index: 2;
  width: min(100%, 490px);
  padding: clamp(24px, 6vw, 38px);
  overflow: hidden;
  border: 1px solid rgba(var(--accent-rgb),.42);
  border-radius: 24px;
  background:
    linear-gradient(145deg, rgba(var(--accent-rgb),.075), transparent 48%),
    rgba(7,10,14,.94);
  box-shadow:
    0 34px 110px rgba(0,0,0,.58),
    inset 0 0 0 1px rgba(255,255,255,.025),
    0 0 42px rgba(var(--accent-rgb),.08);
  transform: translateY(10px) scale(.985);
  opacity: 0;
}
.auth-success-matrix.is-visible .auth-success-console {
  animation: ndplay-auth-console-lock 420ms 70ms cubic-bezier(.16,1,.3,1) both;
}
.auth-success-heading { display: flex; align-items: center; gap: 11px; }
.auth-success-heading small {
  color: rgba(var(--accent-rgb),.72);
  font-size: 8px;
  font-weight: 900;
  letter-spacing: .16em;
}
.auth-success-mark {
  display: flex;
  align-items: end;
  gap: 3px;
  width: 30px;
  height: 24px;
  padding: 5px;
  border: 1px solid rgba(var(--accent-rgb),.35);
  border-radius: 8px;
  background: rgba(var(--accent-rgb),.06);
}
.auth-success-mark i { width: 3px; border-radius: 4px; background: var(--accent); box-shadow: 0 0 8px rgba(var(--accent-rgb),.48); }
.auth-success-mark i:nth-child(1) { height: 7px; }
.auth-success-mark i:nth-child(2) { height: 14px; }
.auth-success-mark i:nth-child(3) { height: 10px; }
.auth-success-mark i:nth-child(4) { height: 5px; }
.auth-success-matrix.is-visible .auth-success-mark i { animation: ndplay-auth-bars 470ms ease-in-out infinite alternate; }
.auth-success-matrix.is-visible .auth-success-mark i:nth-child(2) { animation-delay: -270ms; }
.auth-success-matrix.is-visible .auth-success-mark i:nth-child(3) { animation-delay: -130ms; }
.auth-success-matrix.is-visible .auth-success-mark i:nth-child(4) { animation-delay: -390ms; }
.auth-success-console > strong {
  display: block;
  margin-top: 24px;
  color: #eef4f7;
  font-size: clamp(28px, 7.4vw, 48px);
  line-height: .98;
  letter-spacing: -.035em;
  text-shadow: 0 0 22px rgba(var(--accent-rgb),.13);
}
.auth-success-console > span {
  display: block;
  margin-top: 15px;
  color: var(--accent);
  font-size: 9px;
  font-weight: 900;
  letter-spacing: .13em;
}
.auth-success-trace {
  display: grid;
  gap: 7px;
  margin-top: 25px;
  padding: 15px 0;
  border-top: 1px solid rgba(var(--accent-rgb),.17);
  border-bottom: 1px solid rgba(var(--accent-rgb),.17);
}
.auth-success-trace i {
  display: block;
  color: rgba(222,233,238,.50);
  font-family: ui-monospace, "SFMono-Regular", Consolas, monospace;
  font-size: 8px;
  font-style: normal;
  letter-spacing: .08em;
  opacity: 0;
  transform: translateX(-7px);
}
.auth-success-matrix.is-visible .auth-success-trace i { animation: ndplay-auth-line 170ms ease-out forwards; }
.auth-success-matrix.is-visible .auth-success-trace i:nth-child(1) { animation-delay: 180ms; }
.auth-success-matrix.is-visible .auth-success-trace i:nth-child(2) { animation-delay: 275ms; }
.auth-success-matrix.is-visible .auth-success-trace i:nth-child(3) { animation-delay: 370ms; }
.auth-success-matrix.is-visible .auth-success-trace i:nth-child(4) { animation-delay: 465ms; color: rgba(var(--accent-rgb),.83); }
.auth-success-progress {
  height: 3px;
  margin-top: 18px;
  overflow: hidden;
  border-radius: 99px;
  background: rgba(var(--accent-rgb),.10);
}
.auth-success-progress b {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, rgba(var(--accent-rgb),.28), var(--accent));
  box-shadow: 0 0 14px rgba(var(--accent-rgb),.42);
  transform: scaleX(0);
  transform-origin: left center;
}
.auth-success-matrix.is-visible .auth-success-progress b { animation: ndplay-auth-progress 700ms 120ms cubic-bezier(.2,.75,.25,1) forwards; }

/* A disabled album action must not dim the radio avatar or station identity. */
.player-card.is-radio .artwork-screen:disabled,
.player-card.is-radio .track-identity-control:disabled { opacity: 1; }
.player-card.is-radio .artwork-screen.is-radio-avatar .cover {
  object-fit: contain;
  padding: 8%;
  background:
    radial-gradient(circle at center, rgba(var(--accent-rgb),.10), transparent 57%),
    #05090d;
}
.player-card.is-radio .track-identity-control:disabled { cursor: default; }

/* Keep the compact FLOW scan line below the bitrate value instead of crossing it. */
.stream-compact .stream-pulse { bottom: 1px; }

@keyframes ndplay-auth-success-enter { from { opacity: 0; } to { opacity: 1; } }
@keyframes ndplay-auth-console-lock {
  0% { opacity: 0; transform: translateY(12px) scale(.982); filter: brightness(.5); }
  58% { opacity: 1; transform: translateY(-1px) scale(1.006); filter: brightness(1.12); }
  100% { opacity: 1; transform: none; filter: none; }
}
@keyframes ndplay-auth-grid-drift { to { background-position: 0 24px, 24px 0; } }
@keyframes ndplay-auth-scan { 0% { top: 8%; opacity: 0; } 18% { opacity: .8; } 100% { top: 92%; opacity: 0; } }
@keyframes ndplay-auth-bars { from { transform: scaleY(.48); opacity: .48; } to { transform: scaleY(1); opacity: 1; } }
@keyframes ndplay-auth-line { to { opacity: 1; transform: none; } }
@keyframes ndplay-auth-progress { to { transform: scaleX(1); } }

@media (max-width: 560px) {
  .auth-success-console { padding: 23px 20px; border-radius: 20px; }
  .auth-success-console > strong { margin-top: 21px; font-size: clamp(27px, 9.4vw, 39px); }
  .auth-success-console > span { font-size: 7.4px; letter-spacing: .10em; }
  .auth-success-trace i { font-size: 6.7px; letter-spacing: .045em; }
  .stream-compact .stream-pulse { bottom: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .auth-success-matrix,
  .auth-success-console,
  .auth-success-grid,
  .auth-success-matrix::after,
  .auth-success-mark i,
  .auth-success-trace i,
  .auth-success-progress b { animation: none !important; transition: none !important; }
  .auth-success-matrix.is-visible,
  .auth-success-matrix.is-visible .auth-success-console,
  .auth-success-matrix.is-visible .auth-success-trace i { opacity: 1; transform: none; filter: none; }
  .auth-success-matrix.is-visible .auth-success-progress b { transform: scaleX(1); }
}



/* ND Play v0.5.26 · Stream Quality Polish — Russian two-page telemetry. */
@keyframes ndplay-stream-page-enter {
  from { opacity: 0; transform: translateX(6px); filter: blur(2px); }
  to { opacity: 1; transform: none; filter: none; }
}


/* ND Play v0.5.27 · Stream Telemetry Typography — full Russian labels and stronger hierarchy. */

/* ND Play v0.5.29 · Rate UX Polish */
.app-utility-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 6px;
}
.app-diagnostics-button {
  min-height: 30px;
  padding: 0 10px;
  border: 1px solid rgba(var(--accent-rgb), .24);
  border-radius: 10px;
  color: rgba(var(--accent-rgb), .86);
  background: rgba(var(--accent-rgb), .045);
  font-size: 6.8px;
  font-weight: 950;
  letter-spacing: .105em;
  cursor: pointer;
  transition: transform 150ms ease, border-color 170ms ease, background 170ms ease, color 170ms ease;
}
.app-diagnostics-button:hover,
.app-diagnostics-button:focus-visible {
  border-color: rgba(var(--accent-rgb), .48);
  color: var(--accent);
  background: rgba(var(--accent-rgb), .10);
}
.app-diagnostics-button:active { transform: scale(.965); }
.app-diagnostics-button[hidden] { display: none !important; }

/* The success console follows the visual viewport and stays in its upper area while iOS closes the keyboard. */
.auth-success-matrix {
  inset: auto 0 auto 0;
  top: var(--auth-success-top, 0px);
  width: 100%;
  height: var(--auth-success-height, 100dvh);
  place-items: start center;
  padding-top: max(14px, env(safe-area-inset-top));
  padding-bottom: max(10px, env(safe-area-inset-bottom));
  overflow-y: auto;
  overscroll-behavior: contain;
}
.auth-success-console {
  max-height: calc(var(--auth-success-height, 100dvh) - max(34px, env(safe-area-inset-top)) - max(20px, env(safe-area-inset-bottom)));
  margin-top: clamp(10px, 4.5vh, 44px);
}

/* Denser VFD dots and slightly calmer title scale preserve space for long names. */
.track-copy .vfd-track-title {
  font-size: clamp(36px, 7.55vw, 44px);
}
.vfd-line-title .vfd-glyph::after {
  background-size: 4.08px 4.08px;
  background-image: radial-gradient(circle,
    rgba(251,255,254,.98) 0 1.12px,
    rgba(var(--accent-rgb),.96) 1.22px 1.68px,
    transparent 1.82px);
}
.track-copy .vfd-track-title.is-long-title {
  font-size: clamp(33px, 7.0vw, 40px);
  letter-spacing: -.041em;
}
.track-copy .vfd-track-title.is-very-long-title {
  font-size: clamp(29px, 6.25vw, 36px);
  line-height: 1.015;
  letter-spacing: -.034em;
}

@media (max-width: 560px) {
  .status-pane-app { align-items: flex-start; }
  .app-utility-actions { gap: 5px; }
  .app-diagnostics-button {
    min-height: 27px;
    padding-inline: 8px;
    font-size: 6.1px;
  }
  .auth-success-console {
    width: min(100%, 470px);
    margin-top: 6px;
  }
}

@media (max-width: 430px) {
  .track-copy .vfd-track-title {
    font-size: clamp(29px, 9.05vw, 34px);
  }
  .track-copy .vfd-track-title.is-long-title {
    font-size: clamp(27px, 8.35vw, 31.5px);
  }
  .track-copy .vfd-track-title.is-very-long-title {
    font-size: clamp(24px, 7.45vw, 28.5px);
    line-height: 1.035;
  }
  .vfd-line-title .vfd-glyph::after {
    background-size: 3.72px 3.72px;
    background-image: radial-gradient(circle,
      rgba(251,255,254,.98) 0 1.00px,
      rgba(var(--accent-rgb),.95) 1.08px 1.48px,
      transparent 1.60px);
  }
}

@media (max-height: 560px) and (max-width: 700px) {
  .auth-success-console {
    margin-top: 2px;
    padding: 16px 18px;
    overflow: hidden;
  }
  .auth-success-console > strong { margin-top: 15px; }
  .auth-success-console > span { margin-top: 10px; }
  .auth-success-trace { display: none; }
  .auth-success-progress { margin-top: 13px; }
}

/* ND Play v0.5.30 · Паспорт релиза */
.album-header > div { min-width: 0; }
.album-header p,
.album-passport-card > p,
.album-track-heading > p {
  font-size: 9px;
  letter-spacing: .18em;
}
.album-hero {
  align-items: start;
}
.album-identity {
  align-self: start;
}
.album-release-type {
  padding: 6px 11px;
  font-size: 8px;
  letter-spacing: .16em;
  box-shadow: 0 0 22px rgba(var(--accent-rgb),.06);
}
.album-artist-button {
  font-size: 17px;
  font-weight: 650;
}
.album-meta {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 7px;
  margin-top: 14px;
  color: inherit;
  font-size: inherit;
  line-height: normal;
}
.album-meta-item {
  position: relative;
  min-width: 0;
  min-height: 54px;
  display: grid;
  align-content: center;
  gap: 5px;
  padding: 9px 10px 9px 13px;
  overflow: hidden;
  border: 1px solid rgba(var(--accent-rgb),.18);
  border-radius: 11px;
  background:
    linear-gradient(90deg, rgba(var(--accent-rgb),.065), transparent 72%),
    rgba(0,0,0,.13);
  box-shadow: inset 2px 0 rgba(var(--accent-rgb),.52);
}
.album-meta-item::after {
  content: '';
  position: absolute;
  right: 9px;
  bottom: 8px;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 10px rgba(var(--accent-rgb),.72);
  opacity: .6;
}
.album-meta-item.is-wide { grid-column: 1 / -1; }
.album-meta-item small {
  color: rgba(var(--accent-rgb),.66);
  font-size: 6.5px;
  font-weight: 900;
  letter-spacing: .15em;
}
.album-meta-item b {
  min-width: 0;
  color: var(--accent);
  font-size: 11px;
  font-weight: 850;
  line-height: 1.25;
  letter-spacing: .035em;
  overflow-wrap: anywhere;
  text-shadow: 0 0 15px rgba(var(--accent-rgb),.24);
}
.album-actions {
  grid-column: 2;
  margin-top: -2px;
}
.album-action {
  font-size: 8.5px;
}
.album-passport-card {
  padding: 16px;
}
.album-facts dt {
  font-size: 7px;
}
.album-facts dd {
  font-size: 10.5px;
}
.album-quality-summary small,
.album-user-stats small {
  font-size: 6.5px;
}
.album-quality-summary b,
.album-user-stats b {
  font-size: 11.5px;
}
.album-credits-card {
  padding: 17px 16px 15px;
  background:
    radial-gradient(circle at 100% 0%, rgba(var(--accent-rgb),.07), transparent 35%),
    linear-gradient(135deg, rgba(var(--accent-rgb),.035), rgba(255,255,255,.012));
}
.album-credits-head,
.album-credit-row {
  display: grid;
  grid-template-columns: minmax(150px, .9fr) minmax(0, 1.25fr);
  column-gap: 20px;
}
.album-credits-head {
  margin-top: 14px;
  padding: 0 12px 9px;
  border-bottom: 1px solid rgba(var(--accent-rgb),.24);
  color: rgba(var(--accent-rgb),.72);
  font-size: 8px;
  font-weight: 900;
  letter-spacing: .17em;
}
.album-credits {
  display: grid;
  gap: 0;
  margin-top: 0;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.055);
  border-radius: 13px;
  background: rgba(0,0,0,.10);
}
.album-credit-row {
  min-height: 50px;
  align-items: center;
  padding: 10px 12px;
  border-bottom: 1px solid rgba(255,255,255,.055);
}
.album-credit-row:last-child { border-bottom: 0; }
.album-credit-row:nth-child(even) { background: rgba(255,255,255,.018); }
.album-credit-row b {
  min-width: 0;
  color: #edf2f9;
  font-size: 13px;
  font-weight: 760;
  line-height: 1.3;
  overflow-wrap: anywhere;
}
.album-credit-row span {
  min-width: 0;
  color: var(--accent);
  font-size: 10.5px;
  font-weight: 750;
  line-height: 1.35;
  letter-spacing: .025em;
  overflow-wrap: anywhere;
  text-shadow: 0 0 13px rgba(var(--accent-rgb),.16);
}
.album-credit-empty {
  padding: 16px 12px;
}
.album-track-header,
.album-track-item button {
  grid-template-columns: 44px minmax(0,1fr) 86px;
}
.album-track-header span:last-child {
  justify-self: end;
}

@media (max-width: 560px) {
  .album-header p,
  .album-passport-card > p,
  .album-track-heading > p {
    font-size: 8px;
  }
  .album-header h2 { font-size: 24px; }
  .album-hero {
    grid-template-columns: 116px minmax(0,1fr);
    gap: 13px;
  }
  .album-release-type {
    margin-bottom: 7px;
    padding: 5px 8px;
    font-size: 6.8px;
  }
  .album-artist-button {
    padding: 6px 10px;
    font-size: 13.5px !important;
  }
  .album-meta {
    gap: 5px;
    margin-top: 9px;
  }
  .album-meta-item {
    min-height: 48px;
    gap: 4px;
    padding: 7px 8px 7px 10px;
    border-radius: 9px;
  }
  .album-meta-item small {
    font-size: 5.7px;
    letter-spacing: .12em;
  }
  .album-meta-item b {
    font-size: 9.2px;
    line-height: 1.2;
  }
  .album-meta-item::after {
    right: 7px;
    bottom: 6px;
    width: 3px;
    height: 3px;
  }
  .album-genre-tags { margin-top: 7px; }
  .album-actions {
    grid-column: 1 / -1;
    grid-template-columns: 1fr 1fr;
    width: 100%;
    margin-top: 1px;
  }
  .album-action {
    min-height: 39px;
    font-size: 7px;
  }
  .album-action-later { grid-column: 1 / -1; }
  .album-passport-card,
  .album-passport-card-wide {
    padding: 14px;
  }
  .album-facts > div {
    grid-template-columns: 94px minmax(0,1fr);
    gap: 10px;
    padding-top: 9px;
  }
  .album-facts dt { font-size: 6.5px; }
  .album-facts dd { font-size: 10.5px; }
  .album-quality-summary small,
  .album-user-stats small { font-size: 6.2px; }
  .album-quality-summary b,
  .album-user-stats b { font-size: 11.5px; }
  .album-credits-card { padding: 15px 13px 13px; }
  .album-credits-head,
  .album-credit-row {
    grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr);
    column-gap: 12px;
  }
  .album-credits-head {
    margin-top: 12px;
    padding: 0 9px 8px;
    font-size: 7px;
  }
  .album-credit-row {
    min-height: 54px;
    padding: 10px 9px;
  }
  .album-credit-row b {
    font-size: 11.5px;
    line-height: 1.28;
  }
  .album-credit-row span {
    font-size: 9.5px;
    line-height: 1.3;
  }
  .album-track-header,
  .album-track-item button {
    grid-template-columns: 34px minmax(0,1fr) 64px;
  }
  .album-track-header {
    font-size: 5.8px;
    letter-spacing: .09em;
  }
}

@media (max-width: 390px) {
  .album-hero { grid-template-columns: 108px minmax(0,1fr); gap: 10px; }
  .album-meta-item { min-height: 45px; padding-inline: 8px; }
  .album-meta-item small { font-size: 5.2px; }
  .album-meta-item b { font-size: 8.5px; }
  .album-actions { gap: 5px; }
  .album-action { padding-inline: 6px; font-size: 6.4px; }
  .album-credit-row b { font-size: 10.8px; }
  .album-credit-row span { font-size: 9px; }
}

/* ND Play v0.5.31 · Desktop Comfort Polish — larger desktop typography, stronger queue and matrix login. */
.auth-card {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  border-color: rgba(var(--accent-rgb), .25);
  background:
    radial-gradient(circle at 10% 0%, rgba(var(--accent-rgb), .14), transparent 34%),
    linear-gradient(145deg, rgba(17,24,31,.98), rgba(5,9,13,.97));
  box-shadow:
    0 32px 100px rgba(0,0,0,.52),
    inset 0 1px 0 rgba(255,255,255,.045),
    0 0 46px rgba(var(--accent-rgb), .055);
}
.auth-card::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: .46;
  background-image:
    linear-gradient(rgba(var(--accent-rgb), .055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(var(--accent-rgb), .045) 1px, transparent 1px),
    radial-gradient(circle at center, rgba(var(--accent-rgb), .19) 0 1px, transparent 1.3px);
  background-size: 28px 28px, 28px 28px, 7px 7px;
  mask-image: linear-gradient(to bottom, #000 0 34%, rgba(0,0,0,.56) 63%, transparent 100%);
}
.auth-card::after {
  content: "";
  position: absolute;
  z-index: 1;
  top: -32%;
  right: -12%;
  left: -12%;
  height: 30%;
  pointer-events: none;
  opacity: .55;
  background: linear-gradient(180deg, transparent, rgba(var(--accent-rgb), .10) 42%, rgba(var(--accent-rgb), .52) 50%, rgba(var(--accent-rgb), .08) 58%, transparent);
  filter: blur(.25px);
  animation: ndplay-auth-card-scan 6.4s 900ms linear infinite;
}
.auth-card > * { position: relative; z-index: 2; }
.auth-brand {
  padding-bottom: 15px;
  border-bottom: 1px solid rgba(var(--accent-rgb), .15);
}
.auth-copy .eyebrow {
  text-shadow: 0 0 15px rgba(var(--accent-rgb), .28);
}
.auth-copy h1 {
  text-shadow: 0 0 24px rgba(var(--accent-rgb), .10);
}
.auth-copy > p:last-child {
  color: rgba(217,225,234,.72);
  font-size: 13.5px;
}
.auth-matrix-readout {
  display: grid;
  grid-template-columns: 42px minmax(0,1fr) auto;
  align-items: center;
  gap: 11px;
  min-height: 55px;
  margin: 0 0 16px;
  padding: 9px 11px;
  overflow: hidden;
  border: 1px solid rgba(var(--accent-rgb), .24);
  border-radius: 14px;
  background:
    linear-gradient(100deg, rgba(var(--accent-rgb), .10), rgba(var(--accent-rgb), .025) 56%, transparent),
    rgba(2,7,10,.55);
  box-shadow: inset 0 1px rgba(255,255,255,.025), 0 0 18px rgba(var(--accent-rgb),.035);
}
.auth-matrix-bars {
  height: 34px;
  display: flex;
  align-items: end;
  justify-content: center;
  gap: 3px;
  padding: 6px;
  border: 1px solid rgba(var(--accent-rgb), .22);
  border-radius: 10px;
  background: rgba(var(--accent-rgb), .05);
}
.auth-matrix-bars i {
  width: 3px;
  border-radius: 4px;
  background: var(--accent);
  box-shadow: 0 0 8px rgba(var(--accent-rgb), .48);
  animation: ndplay-auth-matrix-bars 1.25s ease-in-out infinite alternate;
}
.auth-matrix-bars i:nth-child(1) { height: 8px; animation-delay: -700ms; }
.auth-matrix-bars i:nth-child(2) { height: 19px; animation-delay: -330ms; }
.auth-matrix-bars i:nth-child(3) { height: 27px; animation-delay: -920ms; }
.auth-matrix-bars i:nth-child(4) { height: 15px; animation-delay: -510ms; }
.auth-matrix-bars i:nth-child(5) { height: 22px; animation-delay: -110ms; }
.auth-matrix-copy { min-width: 0; display: grid; gap: 4px; }
.auth-matrix-copy small {
  overflow: hidden;
  color: rgba(var(--accent-rgb), .65);
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 7.5px;
  font-weight: 900;
  letter-spacing: .13em;
}
.auth-matrix-copy strong {
  overflow: hidden;
  color: #eaf2f5;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 11px;
  font-weight: 850;
  letter-spacing: .055em;
}
.auth-matrix-readout > b {
  color: var(--accent);
  font-size: 8px;
  font-weight: 950;
  letter-spacing: .12em;
  text-shadow: 0 0 12px rgba(var(--accent-rgb),.34);
}
.login-form label > span { font-size: 12.5px; }
.login-form input { font-size: 15px; }
.auth-security p { font-size: 11.5px; }
@keyframes ndplay-auth-card-scan {
  0%, 18% { transform: translateY(-15%); opacity: 0; }
  25% { opacity: .52; }
  66% { opacity: .34; }
  78%, 100% { transform: translateY(470%); opacity: 0; }
}
@keyframes ndplay-auth-matrix-bars { to { transform: scaleY(.48); opacity: .58; } }

@media (min-width: 900px) {
  /* Give artist and album the full available width instead of squeezing two long names into one row. */
  .track-identity-meta {
    grid-template-columns: minmax(0, 1fr);
    gap: 9px;
  }
  .track-artist-control { max-width: none; }
  .track-identity-control {
    grid-template-columns: 106px minmax(0,1fr) auto;
    min-height: 54px;
    padding: 9px 12px;
    gap: 12px;
    border-radius: 10px;
  }
  .track-identity-code {
    font-size: 8px;
    letter-spacing: .12em;
  }
  .track-identity-arrow { font-size: 13px; }
  .vfd-line-artist,
  .vfd-line-album {
    max-height: 2.15em;
    overflow: hidden;
    white-space: normal;
    line-height: 1.07;
  }
  .vfd-line-artist { font-size: clamp(18px, 1.65vw, 21px); }
  .vfd-line-album { font-size: clamp(16.5px, 1.48vw, 19px); }

  /* Queue is a primary navigation action, not a tiny metadata chip. */
  .track-context-row { align-items: stretch; margin-bottom: 9px; }
  .track-context-row .track-context {
    align-self: center;
    font-size: 11px;
    letter-spacing: .14em;
  }
  .queue-trigger {
    min-height: 39px;
    padding: 6px 8px 6px 11px;
    gap: 8px;
    border-color: rgba(var(--accent-rgb), .48);
    border-radius: 12px;
    background:
      radial-gradient(circle at 100% 0%, rgba(var(--accent-rgb), .20), transparent 48%),
      linear-gradient(135deg, rgba(var(--accent-rgb), .14), rgba(var(--accent-rgb), .045));
    color: #e8f2f1;
    box-shadow: inset 0 1px rgba(255,255,255,.04), 0 0 24px rgba(var(--accent-rgb),.07);
    font-size: 8.5px;
  }
  .queue-trigger strong {
    min-width: 66px;
    min-height: 27px;
    display: grid;
    place-items: center;
    padding: 0 8px;
    border: 1px solid rgba(var(--accent-rgb), .28);
    border-radius: 8px;
    background: rgba(2,8,11,.48);
    font-size: 11px;
    text-align: center;
  }

  /* Desktop comfort scale: use the existing generous frames instead of tiny type. */
  .app-shell.layout-wide .stream-metric { grid-template-columns: 50px minmax(0,1fr); padding-block: 9px; }
  .app-shell.layout-wide .stream-metric > span { font-size: 8px; letter-spacing: .13em; }
  .app-shell.layout-wide .stream-metric > b { font-size: 11.3px; }

  .app-shell.layout-wide .catalog-flip-side {
    padding-inline: 9px;
    font-size: 9.2px;
    letter-spacing: .10em;
  }
  .app-shell.layout-wide .flow-button {
    min-height: 78px;
    grid-template-columns: 48px 1fr 26px;
    padding: 12px 17px;
  }
  .app-shell.layout-wide .flow-button strong { font-size: 15px; }
  .app-shell.layout-wide .flow-button small { font-size: 10px; line-height: 1.25; }
  .app-shell.layout-wide .listening-log-launch {
    min-height: 66px;
    grid-template-columns: 46px minmax(0,1fr) auto;
    padding: 10px 15px;
  }
  .app-shell.layout-wide .listening-log-launch small { font-size: 8px; }
  .app-shell.layout-wide .listening-log-launch strong { font-size: 14.5px; }
  .app-shell.layout-wide .listening-log-launch > b { font-size: 8.2px; }

  .app-shell.layout-wide .mixes-header h2,
  .app-shell.layout-wide .radio-header h2,
  .app-shell.layout-wide .listen-later-header h2 { font-size: 18px; }
  .app-shell.layout-wide .mixes-header p,
  .app-shell.layout-wide .radio-header p,
  .app-shell.layout-wide .listen-later-header p { font-size: 9.2px; }
  .app-shell.layout-wide .mix-card,
  .app-shell.layout-wide .radio-card { min-height: 118px; padding: 13px; }
  .app-shell.layout-wide .mix-card-top b,
  .app-shell.layout-wide .radio-live { font-size: 9.5px; }
  .app-shell.layout-wide .mix-card > strong,
  .app-shell.layout-wide .radio-card > strong { font-size: 15px; line-height: 1.2; }
  .app-shell.layout-wide .mix-card > span:not(.mix-card-top),
  .app-shell.layout-wide .radio-card > span:not(.radio-card-top) { font-size: 11px; line-height: 1.35; }

  .app-shell.layout-wide .status-pane-title strong { font-size: 12.5px; }
  .app-shell.layout-wide .status-pane-navidrome p { font-size: 11px; }
  .app-shell.layout-wide .app-version-label,
  .app-shell.layout-wide .app-install-state { font-size: 7.8px; }
  .app-shell.layout-wide .app-version-row strong { font-size: 13.5px; }
  .app-shell.layout-wide .app-diagnostics-button,
.app-shell.layout-wide .app-install-button { font-size: 7.8px; }
}

@media (max-width: 560px) {
  .auth-matrix-readout {
    grid-template-columns: 38px minmax(0,1fr) auto;
    min-height: 51px;
    gap: 9px;
    padding: 8px 9px;
  }
  .auth-matrix-bars { height: 31px; padding: 5px; }
  .auth-matrix-copy small { font-size: 6.5px; letter-spacing: .09em; }
  .auth-matrix-copy strong { font-size: 9.5px; }
  .auth-matrix-readout > b { font-size: 6.8px; }
}

@media (max-width: 390px) {
  .auth-matrix-readout > b { display: none; }
  .auth-matrix-readout { grid-template-columns: 36px minmax(0,1fr); }
}

@media (prefers-reduced-motion: reduce) {
  .auth-card::after,
  .auth-matrix-bars i { animation: none !important; }
  .auth-card::after { opacity: .16; transform: translateY(210%); }
}


/* ND Play v0.5.33 · Мой журнал 2 — server-side listening sessions with lazy track details. */
.auth-matrix-readout[data-channel="secure"] .auth-matrix-copy strong,
.auth-matrix-readout[data-channel="secure"] > b {
  color: var(--accent);
}
.auth-matrix-readout[data-channel="local"] .auth-matrix-copy strong,
.auth-matrix-readout[data-channel="local"] > b {
  color: #ffb86b;
}
.auth-matrix-readout[data-channel="local"] {
  border-color: rgba(255,184,107,.28);
  box-shadow: inset 0 0 22px rgba(255,184,107,.025);
}
.auth-success-console > strong span { display: block; }
.auth-success-matrix[data-channel="local"] .auth-success-console {
  border-color: rgba(255,184,107,.42);
  background:
    linear-gradient(145deg, rgba(255,184,107,.065), transparent 48%),
    rgba(7,10,14,.94);
  box-shadow:
    0 34px 110px rgba(0,0,0,.58),
    inset 0 0 0 1px rgba(255,255,255,.025),
    0 0 42px rgba(255,184,107,.065);
}
.auth-success-matrix[data-channel="local"] .auth-success-heading small,
.auth-success-matrix[data-channel="local"] .auth-success-console > span,
.auth-success-matrix[data-channel="local"] .auth-success-trace i:nth-child(4) {
  color: #ffb86b;
}
.auth-success-matrix[data-channel="local"] .auth-success-mark {
  border-color: rgba(255,184,107,.36);
  background: rgba(255,184,107,.055);
}
.auth-success-matrix[data-channel="local"] .auth-success-mark i {
  background: #ffb86b;
  box-shadow: 0 0 8px rgba(255,184,107,.46);
}
.auth-success-matrix[data-channel="local"] .auth-success-progress b {
  background: linear-gradient(90deg, rgba(255,184,107,.25), #ffb86b);
  box-shadow: 0 0 14px rgba(255,184,107,.34);
}


/* ND Play v0.5.33 · Мой журнал 2 */
.listening-log-highlight {
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 18px 20px;
  border: 1px solid rgba(var(--accent-rgb),.30);
  border-radius: 17px;
  background:
    linear-gradient(110deg, rgba(var(--accent-rgb),.095), rgba(var(--accent-rgb),.018) 56%, transparent),
    rgba(255,255,255,.015);
  box-shadow: inset 0 0 28px rgba(var(--accent-rgb),.025);
}
.listening-log-highlight > span { min-width: 0; display: grid; gap: 5px; }
.listening-log-highlight small { color: var(--accent); font-size: 8px; font-weight: 900; letter-spacing: .14em; }
.listening-log-highlight strong { overflow: hidden; font-size: 18px; text-overflow: ellipsis; white-space: nowrap; }
.listening-log-highlight p { overflow: hidden; margin: 0; color: rgba(255,255,255,.48); font-size: 10px; line-height: 1.45; text-overflow: ellipsis; white-space: nowrap; }
.listening-log-highlight > b { flex: 0 0 auto; color: var(--accent); font-size: clamp(22px,4vw,36px); font-variant-numeric: tabular-nums; }
.listening-log-session-list { display: grid; gap: 9px !important; }
.listening-log-session {
  min-width: 0;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.075);
  border-radius: 15px;
  background: rgba(255,255,255,.016);
  transition: border-color 160ms ease, background-color 160ms ease;
}
.listening-log-session.is-open {
  border-color: rgba(var(--accent-rgb),.26);
  background: rgba(var(--accent-rgb),.025);
}
.listening-log-session > header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin: 0;
  padding: 14px 15px 8px;
}
.listening-log-session > header > span { min-width: 0; display: grid; gap: 4px; }
.listening-log-session > header strong { color: #edf2f8; font-size: 14px; letter-spacing: .035em; }
.listening-log-session > header small { color: var(--accent); font-size: 10px; font-variant-numeric: tabular-nums; letter-spacing: .08em; }
.listening-log-session > header > b { flex: 0 0 auto; color: rgba(255,255,255,.74); font-size: 13px; font-variant-numeric: tabular-nums; }
.listening-log-session-summary { min-width: 0; display: grid; gap: 6px; padding: 0 15px 12px; }
.listening-log-session-summary p { overflow: hidden; margin: 0; color: rgba(255,255,255,.53); font-size: 10px; line-height: 1.45; text-overflow: ellipsis; white-space: nowrap; }
.listening-log-session-summary .listening-log-session-route { color: rgba(255,255,255,.77); font-size: 11px; }
.listening-log-session-summary small { overflow: hidden; color: rgba(var(--accent-rgb),.68); font-size: 8px; font-weight: 800; letter-spacing: .08em; text-overflow: ellipsis; white-space: nowrap; }
.listening-log-session-action {
  width: 100%;
  min-height: 38px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 0 15px;
  border: 0;
  border-top: 1px solid rgba(255,255,255,.055);
  background: rgba(0,0,0,.10);
  color: rgba(255,255,255,.48);
  font-size: 8px;
  font-weight: 900;
  letter-spacing: .12em;
  cursor: pointer;
}
.listening-log-session-action:hover { color: var(--accent); background: rgba(var(--accent-rgb),.025); }
.listening-log-session-action i { width: 8px; height: 8px; border-right: 1px solid currentColor; border-bottom: 1px solid currentColor; transform: rotate(45deg) translateY(-2px); transition: transform 160ms ease; }
.listening-log-session.is-open .listening-log-session-action i { transform: rotate(225deg) translate(-2px,-2px); }
.listening-log-session-detail { display: grid; padding: 0 12px 10px; color: rgba(255,255,255,.45); font-size: 10px; }
.listening-log-session-detail .listening-log-entry:first-child { border-top: 0; }
.listening-log-day > header { margin-top: 3px; }
.listening-log-day > header strong { font-size: 10px; }
.listening-log-day > header small { font-size: 9px; }
.listening-log-module header h3, .listening-log-timeline-module header h3 { font-size: 16px; }
.listening-log-album strong, .listening-log-artist-list strong { font-size: 11px; }
.listening-log-album small, .listening-log-artist-list small { font-size: 8px; }

@media (max-width: 620px) {
  .listening-log-highlight { align-items: flex-start; padding: 15px; }
  .listening-log-highlight strong { font-size: 15px; }
  .listening-log-highlight p { white-space: normal; }
  .listening-log-highlight > b { font-size: 22px; }
  .listening-log-session > header { align-items: flex-start; }
  .listening-log-session > header strong { font-size: 12px; }
  .listening-log-session-summary p { white-space: normal; }
  .listening-log-session-summary .listening-log-session-route { display: -webkit-box; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
  .listening-log-session-detail { padding-right: 8px; padding-left: 8px; }
}

@media (prefers-reduced-motion: reduce) {
  .listening-log-session, .listening-log-session-action i { transition: none; }
}


/* v0.5.34 · Playback Queue & Readability */
.track-identity-meta {
  grid-template-columns: minmax(0, 1fr) !important;
  gap: 9px;
}
.track-artist-control { max-width: none !important; }
.track-identity-control {
  grid-template-columns: minmax(92px, 112px) minmax(0, 1fr) auto;
  min-height: 52px;
  padding: 8px 11px;
  gap: 11px;
}
.track-identity-code {
  font-size: 7.5px;
  letter-spacing: .13em;
}
.vfd-line-artist,
.vfd-line-album {
  max-height: 2.16em;
  overflow: hidden;
  white-space: normal;
  line-height: 1.08;
}
.vfd-line-artist { font-size: clamp(17px, 2.45vw, 21px); }
.vfd-line-album { font-size: clamp(16px, 2.2vw, 19px); }

.time-row {
  align-items: end;
  margin-top: 8px;
  color: var(--text);
  font-size: inherit;
}
.time-readout {
  min-width: 88px;
  display: grid;
  gap: 3px;
}
.time-readout:last-child { text-align: right; }
.time-readout small {
  color: rgba(var(--accent-rgb), .66);
  font-size: 7.5px;
  font-weight: 900;
  letter-spacing: .14em;
}
.time-readout b {
  color: rgba(231, 238, 247, .84);
  font-size: 15px;
  font-weight: 760;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.time-readout-remaining b { color: var(--accent); }

.queue-trigger {
  min-height: 38px;
  padding: 6px 8px 6px 11px;
  gap: 8px;
  border-color: rgba(var(--accent-rgb), .44);
  border-radius: 12px;
  background:
    radial-gradient(circle at 100% 0%, rgba(var(--accent-rgb), .18), transparent 52%),
    linear-gradient(135deg, rgba(var(--accent-rgb), .13), rgba(var(--accent-rgb), .035));
  color: #e8f2f1;
  box-shadow: inset 0 1px rgba(255,255,255,.04), 0 0 22px rgba(var(--accent-rgb),.06);
  font-size: 8.5px;
}
.queue-trigger strong {
  min-width: 64px;
  min-height: 26px;
  display: grid;
  place-items: center;
  padding: 0 7px;
  border: 1px solid rgba(var(--accent-rgb), .28);
  border-radius: 8px;
  background: rgba(5,9,13,.34);
  font-size: 11px;
}

.queue-sheet {
  width: min(860px, calc(100vw - 24px));
  max-height: min(90dvh, 860px);
}
.queue-sheet .sheet-header p {
  font-size: 8px;
  letter-spacing: .15em;
}
.queue-sheet .sheet-header h2 {
  font-size: clamp(24px, 3vw, 34px);
  line-height: 1.02;
}
.album-archive-passport-deck {
  gap: 10px;
}
.queue-flow-continue {
  min-height: 54px;
  padding: 11px 13px;
  border-radius: 14px;
}
.queue-flow-continue small {
  font-size: 8px;
  letter-spacing: .13em;
}
.queue-flow-continue strong {
  margin-top: 3px;
  font-size: 12px;
  letter-spacing: .08em;
}
.queue-flow-continue b {
  font-size: 10px;
  letter-spacing: .10em;
}
.queue-tool-row {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.queue-tool-row button,
.queue-save-form button {
  min-height: 46px;
  padding: 8px 10px;
  font-size: 8px;
  line-height: 1.25;
  letter-spacing: .08em;
}
.queue-summary {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin: 0 0 11px;
}
.queue-summary > div {
  min-width: 0;
  padding: 10px 11px;
  border: 1px solid rgba(var(--accent-rgb), .18);
  border-radius: 12px;
  background: linear-gradient(135deg, rgba(var(--accent-rgb), .065), rgba(255,255,255,.014));
}
.queue-summary small,
.queue-summary strong { display: block; }
.queue-summary small {
  color: rgba(var(--accent-rgb), .62);
  font-size: 7px;
  font-weight: 900;
  letter-spacing: .14em;
}
.queue-summary strong {
  margin-top: 5px;
  overflow: hidden;
  color: #e8edf6;
  font-size: clamp(12px, 1.7vw, 16px);
  line-height: 1.12;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.queue-save-form label { font-size: 8px; }
.queue-save-form input { height: 42px; font-size: 13px; }
.queue-column-head {
  grid-template-columns: 40px minmax(0,1fr) 64px 42px;
  gap: 10px;
  padding-inline: 12px;
  font-size: 8px;
}
.queue-list { max-height: calc(min(90dvh, 860px) - 310px); }
.queue-item { grid-template-columns: minmax(0,1fr) 42px; }
.queue-item .queue-track-select {
  grid-template-columns: 40px minmax(0,1fr) 64px;
  gap: 10px;
  min-height: 70px;
  padding: 10px 8px 10px 12px;
}
.queue-order { font-size: 11px; }
.queue-copy { padding-right: 88px; }
.queue-copy strong {
  font-size: 15px;
  line-height: 1.2;
  white-space: normal;
}
.queue-copy small {
  margin-top: 5px;
  font-size: 11px;
}
.queue-duration { font-size: 12px; }
.queue-source-tag {
  max-width: 82px;
  padding: 3px 5px;
  font-size: 6.5px;
}
.queue-now { font-size: 7px; }
.queue-item-menu {
  width: 38px;
  height: 42px;
  border-radius: 11px;
}
.queue-action-popover {
  width: min(300px, calc(100vw - 22px));
}
.queue-action-popover-head span { font-size: 7.5px; }
.queue-action-popover-head strong { font-size: 13px; }
.queue-action-popover > button {
  min-height: 45px;
}
.queue-action-popover > button span { font-size: 9px; }
.queue-action-popover > button:disabled {
  opacity: .32;
  pointer-events: none;
}

@media (max-width: 700px) {
  .track-identity-control {
    grid-template-columns: minmax(82px, 96px) minmax(0,1fr) auto;
  }
  .queue-sheet { width: calc(100vw - 14px); }
  .queue-summary { grid-template-columns: 1fr 1fr; }
  .queue-summary > div:last-child { grid-column: 1 / -1; }
  .queue-tool-row { grid-template-columns: 1fr; }
  .queue-tool-row button { min-height: 42px; }
  .queue-list { max-height: calc(min(90dvh, 860px) - 430px); }
}

@media (max-width: 460px) {
  .track-identity-control {
    grid-template-columns: minmax(76px, 88px) minmax(0,1fr) auto;
    min-height: 48px;
    padding: 7px 9px;
    gap: 8px;
  }
  .track-identity-code { font-size: 6.4px; }
  .vfd-line-artist { font-size: 15.5px; }
  .vfd-line-album { font-size: 14.5px; }
  .time-readout small { font-size: 6.7px; }
  .time-readout b { font-size: 14px; }
  .queue-trigger strong { min-width: 52px; font-size: 9px; }
  .queue-sheet .sheet-header h2 { font-size: 22px; }
  .queue-summary strong { font-size: 12px; }
  .queue-column-head { grid-template-columns: 30px minmax(0,1fr) 48px 36px; gap: 7px; padding-inline: 8px; }
  .queue-item { grid-template-columns: minmax(0,1fr) 36px; }
  .queue-item .queue-track-select {
    grid-template-columns: 30px minmax(0,1fr) 48px;
    gap: 7px;
    min-height: 66px;
    padding: 9px 4px 9px 8px;
  }
  .queue-copy { padding-right: 62px; }
  .queue-copy strong { font-size: 13px; }
  .queue-copy small { font-size: 10px; }
  .queue-duration { font-size: 10px; }
  .queue-source-tag { max-width: 56px; font-size: 5.5px; }
  .queue-list { max-height: calc(min(92dvh, 820px) - 420px); }
}


/* ND Play v0.5.35 · Альбомный контекст */
.album-passport-card-span-two { grid-column: span 2; }
.album-progress-card {
  background:
    radial-gradient(circle at 100% 0%, rgba(var(--accent-rgb),.11), transparent 40%),
    linear-gradient(135deg, rgba(var(--accent-rgb),.045), rgba(255,255,255,.012));
}
.album-progress-main {
  display: grid;
  grid-template-columns: auto minmax(0,1fr);
  align-items: end;
  gap: 13px;
  margin-top: 12px;
}
.album-progress-main strong {
  color: var(--accent);
  font-size: 31px;
  line-height: 1;
  letter-spacing: -.04em;
  text-shadow: 0 0 22px rgba(var(--accent-rgb),.30);
}
.album-progress-main span {
  color: #dce5ef;
  font-size: 10px;
  font-weight: 800;
  line-height: 1.35;
  letter-spacing: .06em;
}
.album-progress-rail {
  height: 7px;
  margin-top: 13px;
  overflow: hidden;
  border: 1px solid rgba(var(--accent-rgb),.20);
  border-radius: 999px;
  background: rgba(0,0,0,.23);
}
.album-progress-rail i {
  display: block;
  width: 0;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, rgba(var(--accent-rgb),.62), var(--accent));
  box-shadow: 0 0 16px rgba(var(--accent-rgb),.45);
  transition: width .28s ease;
}
.album-progress-stats {
  display: grid;
  grid-template-columns: repeat(2,minmax(0,1fr));
  gap: 7px;
  margin-top: 12px;
}
.album-progress-stats span {
  display: grid;
  gap: 4px;
  min-height: 49px;
  padding: 8px 9px;
  border: 1px solid rgba(255,255,255,.055);
  border-radius: 10px;
  background: rgba(0,0,0,.12);
}
.album-progress-stats small {
  color: rgba(var(--accent-rgb),.60);
  font-size: 6.4px;
  font-weight: 900;
  letter-spacing: .12em;
}
.album-progress-stats b {
  color: #edf3f9;
  font-size: 13px;
  line-height: 1;
}
.album-context-albums,
.album-similar-albums {
  display: grid;
  grid-template-columns: repeat(2,minmax(0,1fr));
  gap: 8px;
  margin-top: 11px;
}
.album-context-card {
  display: grid;
  grid-template-columns: 58px minmax(0,1fr);
  align-items: center;
  gap: 10px;
  min-width: 0;
  min-height: 72px;
  padding: 7px;
  border: 1px solid rgba(255,255,255,.065);
  border-radius: 12px;
  background: rgba(0,0,0,.13);
  color: inherit;
  text-align: left;
  cursor: pointer;
}
.album-context-card:hover {
  border-color: rgba(var(--accent-rgb),.32);
  background: rgba(var(--accent-rgb),.055);
}
.album-context-card img {
  width: 58px;
  aspect-ratio: 1;
  object-fit: cover;
  border-radius: 9px;
}
.album-context-card > span {
  min-width: 0;
  display: grid;
  gap: 3px;
}
.album-context-card b {
  color: #e9eff7;
  font-size: 10.5px;
  line-height: 1.25;
  overflow-wrap: anywhere;
}
.album-context-card small {
  color: var(--muted);
  font-size: 8px;
  line-height: 1.25;
  overflow-wrap: anywhere;
}
.album-context-card em {
  color: var(--accent);
  font-size: 6.5px;
  font-style: normal;
  font-weight: 900;
  line-height: 1.25;
  letter-spacing: .09em;
  text-transform: uppercase;
}
.album-track-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 2px;
}
.album-track-badges i {
  padding: 3px 6px;
  border: 1px solid rgba(255,255,255,.07);
  border-radius: 999px;
  color: var(--muted);
  background: rgba(0,0,0,.16);
  font-size: 5.8px;
  font-style: normal;
  font-weight: 900;
  line-height: 1;
  letter-spacing: .09em;
}
.album-track-badges .is-complete { color: var(--accent); border-color: rgba(var(--accent-rgb),.24); }
.album-track-badges .is-favorite { color: #ff8fb2; border-color: rgba(255,105,153,.25); }
.album-track-badges .is-partial { color: #ffd27b; border-color: rgba(255,190,92,.24); }
.album-track-badges .is-unplayed { opacity: .72; }
.album-track-item button { min-height: 62px; }
.album-track-copy strong { white-space: normal; overflow: visible; text-overflow: clip; }
.album-track-copy small { white-space: normal; overflow: visible; text-overflow: clip; }

@media (max-width: 760px) {
  .album-passport-card-span-two { grid-column: auto; }
  .album-context-albums,
  .album-similar-albums { grid-template-columns: 1fr; }
}

@media (max-width: 560px) {
  .album-progress-main strong { font-size: 28px; }
  .album-progress-main span { font-size: 9px; }
  .album-progress-stats small { font-size: 6px; }
  .album-progress-stats b { font-size: 12px; }
  .album-context-card { grid-template-columns: 54px minmax(0,1fr); min-height: 68px; }
  .album-context-card img { width: 54px; }
  .album-context-card b { font-size: 10px; }
  .album-context-card small { font-size: 7.5px; }
  .album-track-badges i { font-size: 5.5px; }
}

@media (prefers-reduced-motion: reduce) {
  .album-progress-rail i { transition: none; }
}

/* ND Play v0.5.36 · Personal Archive */
.personal-launch-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap: 10px;
  margin-top: 10px;
}
.archive-launch,
.personal-launch-grid .listening-log-launch {
  min-height: 72px;
  margin: 0;
}
.archive-launch {
  width: 100%;
  display: grid;
  grid-template-columns: 46px minmax(0,1fr) auto;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  border: 1px solid rgba(var(--accent-rgb),.24);
  border-radius: 17px;
  background:
    linear-gradient(135deg, rgba(var(--accent-rgb),.075), transparent 52%),
    radial-gradient(circle at 100% 0%, rgba(var(--accent-rgb),.14), transparent 46%),
    linear-gradient(145deg, rgba(255,255,255,.04), rgba(255,255,255,.012));
  color: #edf5ff;
  text-align: left;
  cursor: pointer;
  transition: border-color 180ms ease, background 180ms ease, transform 140ms ease;
}
.archive-launch:hover { border-color: rgba(var(--accent-rgb),.48); background-color: rgba(var(--accent-rgb),.045); }
.archive-launch:active { transform: scale(.99); }
.archive-launch > span:nth-child(2) { min-width: 0; display: grid; gap: 5px; }
.archive-launch small,
.personal-launch-grid .listening-log-launch small { color: var(--accent); font-size: 8px; font-weight: 900; letter-spacing: .13em; }
.archive-launch strong,
.personal-launch-grid .listening-log-launch strong { overflow: hidden; font-size: 14px; line-height: 1.15; letter-spacing: .04em; text-overflow: ellipsis; white-space: nowrap; }
.archive-launch > b,
.personal-launch-grid .listening-log-launch > b { color: rgba(var(--accent-rgb),.88); font-size: 8px; letter-spacing: .12em; }
.archive-launch-mark {
  width: 46px;
  height: 44px;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 4px;
  padding: 8px;
  border: 1px solid rgba(var(--accent-rgb),.28);
  border-radius: 13px;
  background: rgba(2,6,10,.42);
}
.archive-launch-mark i { border: 1px solid rgba(var(--accent-rgb),.42); border-radius: 3px; background: rgba(var(--accent-rgb),.18); box-shadow: inset 0 0 8px rgba(var(--accent-rgb),.10); }
.archive-launch-mark i:nth-child(2), .archive-launch-mark i:nth-child(3) { background: rgba(var(--accent-rgb),.34); box-shadow: 0 0 8px rgba(var(--accent-rgb),.22); }

.archive-panel { position: fixed; inset: 0; z-index: 185; pointer-events: none; visibility: hidden; }
.archive-panel.open { pointer-events: auto; visibility: visible; }
.archive-backdrop { position: absolute; inset: 0; border: 0; background: rgba(2,5,9,.79); opacity: 0; transition: opacity 200ms ease; }
.archive-panel.open .archive-backdrop { opacity: 1; }
.archive-sheet {
  position: absolute;
  top: max(10px, env(safe-area-inset-top));
  right: max(10px, env(safe-area-inset-right));
  bottom: max(10px, env(safe-area-inset-bottom));
  left: max(10px, env(safe-area-inset-left));
  width: min(1180px, calc(100vw - 20px));
  margin: auto;
  padding: 24px;
  overflow: auto;
  overscroll-behavior: contain;
  border: 1px solid rgba(var(--accent-rgb),.31);
  border-radius: 25px;
  background:
    radial-gradient(circle at 100% 0%, rgba(var(--accent-rgb),.13), transparent 32%),
    radial-gradient(circle at 0% 100%, rgba(157,124,255,.07), transparent 37%),
    linear-gradient(145deg, #151d28, #090f16 72%);
  box-shadow: 0 34px 90px rgba(0,0,0,.58);
  opacity: 0;
  transform: translateY(18px) scale(.987);
  transition: opacity 220ms ease, transform 260ms cubic-bezier(.2,.78,.22,1);
}
.archive-panel.open .archive-sheet { opacity: 1; transform: none; }
.archive-neon-line { position: absolute; top: 0; right: 42px; left: 42px; height: 1px; background: linear-gradient(90deg, transparent, var(--accent), transparent); box-shadow: 0 0 14px rgba(var(--accent-rgb),.5); }
.archive-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; padding-bottom: 18px; border-bottom: 1px solid rgba(255,255,255,.08); }
.archive-header p { margin: 0 0 7px; color: var(--accent); font-size: 9px; font-weight: 900; letter-spacing: .17em; }
.archive-header h2 { margin: 0; font-size: clamp(30px, 5vw, 52px); line-height: .98; letter-spacing: -.045em; }
.archive-header span { display: block; max-width: 68ch; margin-top: 10px; color: rgba(255,255,255,.52); font-size: 13px; line-height: 1.45; }
.archive-close { width: 48px; height: 48px; flex: 0 0 48px; display: grid; place-items: center; border: 1px solid rgba(255,255,255,.11); border-radius: 15px; background: rgba(255,255,255,.028); color: rgba(255,255,255,.68); cursor: pointer; }
.archive-close svg { width: 21px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; }

.archive-stats { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 10px; margin: 18px 0 12px; }
.archive-stats span { min-width: 0; padding: 17px; border: 1px solid rgba(var(--accent-rgb),.2); border-radius: 16px; background: rgba(var(--accent-rgb),.038); }
.archive-stats b { display: block; overflow: hidden; color: var(--accent); font-size: clamp(25px, 4vw, 39px); line-height: 1; font-variant-numeric: tabular-nums; text-overflow: ellipsis; white-space: nowrap; }
.archive-stats small { display: block; margin-top: 9px; color: rgba(255,255,255,.5); font-size: 9px; font-weight: 900; line-height: 1.3; letter-spacing: .09em; }

.archive-signals { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 10px; margin-bottom: 14px; }
.archive-signals button { min-width: 0; min-height: 102px; display: grid; align-content: center; gap: 7px; padding: 15px; border: 1px solid rgba(255,255,255,.08); border-radius: 16px; background: linear-gradient(145deg, rgba(255,255,255,.027), rgba(255,255,255,.01)); color: inherit; text-align: left; cursor: pointer; }
.archive-signals button:hover { border-color: rgba(var(--accent-rgb),.31); background: rgba(var(--accent-rgb),.035); }
.archive-signals small { color: var(--accent); font-size: 8px; font-weight: 900; letter-spacing: .11em; }
.archive-signals strong { overflow: hidden; font-size: 14px; line-height: 1.25; text-overflow: ellipsis; white-space: nowrap; }
.archive-signals span { overflow: hidden; color: rgba(255,255,255,.48); font-size: 11px; line-height: 1.35; text-overflow: ellipsis; white-space: nowrap; }

.archive-controls { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 10px; margin: 14px 0 10px; }
.archive-search { min-width: 0; display: grid; gap: 7px; }
.archive-search span, .archive-sort-row > span { color: rgba(255,255,255,.45); font-size: 9px; font-weight: 900; letter-spacing: .11em; }
.archive-search input { width: 100%; min-height: 50px; padding: 0 16px; border: 1px solid rgba(255,255,255,.11); border-radius: 14px; outline: 0; background: rgba(0,0,0,.18); color: #f3f7fb; font: inherit; font-size: 15px; }
.archive-search input:focus { border-color: rgba(var(--accent-rgb),.52); box-shadow: 0 0 0 3px rgba(var(--accent-rgb),.08); }
.archive-search input::placeholder { color: rgba(255,255,255,.29); }
.archive-refresh { align-self: end; min-height: 50px; padding: 0 16px; border: 1px solid rgba(var(--accent-rgb),.23); border-radius: 14px; background: rgba(var(--accent-rgb),.04); color: rgba(var(--accent-rgb),.86); font-size: 9px; font-weight: 900; letter-spacing: .09em; cursor: pointer; }
.archive-refresh:disabled { opacity: .45; cursor: wait; }

.archive-filters { display: grid; grid-template-columns: repeat(6, minmax(0,1fr)); gap: 7px; margin: 12px 0; }
.archive-filters button, .archive-sort button { min-height: 43px; padding: 0 10px; border: 1px solid rgba(255,255,255,.08); border-radius: 12px; background: rgba(255,255,255,.015); color: rgba(255,255,255,.48); font-size: 9px; font-weight: 900; line-height: 1.2; letter-spacing: .07em; cursor: pointer; }
.archive-filters button.is-active, .archive-sort button.is-active { border-color: rgba(var(--accent-rgb),.46); background: rgba(var(--accent-rgb),.085); color: var(--accent); box-shadow: inset 0 0 18px rgba(var(--accent-rgb),.035); }
.archive-sort-row { display: grid; grid-template-columns: auto minmax(0,1fr); align-items: center; gap: 13px; margin-bottom: 15px; }
.archive-sort { display: grid; grid-template-columns: repeat(5, minmax(0,1fr)); gap: 7px; }
.archive-sort button { min-height: 39px; font-size: 8px; }

.archive-status { min-height: 76px; display: grid; place-items: center; color: rgba(255,255,255,.49); font-size: 13px; text-align: center; }
.archive-grid { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 13px; }
.archive-card { position: relative; min-width: 0; overflow: hidden; border: 1px solid rgba(255,255,255,.075); border-radius: 18px; background: linear-gradient(150deg, rgba(255,255,255,.03), rgba(255,255,255,.012)); color: inherit; cursor: pointer; transition: transform 160ms ease, border-color 180ms ease, background 180ms ease; }
.archive-card:hover { transform: translateY(-2px); border-color: rgba(var(--accent-rgb),.34); background: rgba(var(--accent-rgb),.035); }
.archive-card-cover { position: relative; aspect-ratio: 1; overflow: hidden; background: rgba(0,0,0,.28); }
.archive-card-cover img { width: 100%; height: 100%; display: block; object-fit: cover; transition: transform 280ms ease; }
.archive-card:hover .archive-card-cover img { transform: scale(1.025); }
.archive-card-cover::after { content: ''; position: absolute; inset: 55% 0 0; background: linear-gradient(transparent, rgba(7,11,16,.88)); pointer-events: none; }
.archive-card-badge { position: absolute; z-index: 2; top: 10px; left: 10px; max-width: calc(100% - 20px); padding: 7px 9px; border: 1px solid rgba(0,0,0,.28); border-radius: 10px; background: rgba(5,9,14,.78); backdrop-filter: blur(10px); color: #f2f7fb; font-size: 9px; font-weight: 900; letter-spacing: .06em; }
.archive-card-badge.is-new { color: var(--accent); }
.archive-card-badge.is-mastered { color: #8ff0c8; }
.archive-card-progress { position: absolute; z-index: 2; right: 10px; bottom: 10px; left: 10px; height: 5px; overflow: hidden; border-radius: 999px; background: rgba(255,255,255,.15); }
.archive-card-progress i { display: block; height: 100%; border-radius: inherit; background: var(--accent); box-shadow: 0 0 9px rgba(var(--accent-rgb),.52); }
.archive-card-copy { display: grid; gap: 6px; min-height: 126px; padding: 14px; }
.archive-card-copy strong { display: -webkit-box; overflow: hidden; font-size: 15px; line-height: 1.25; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.archive-card-copy > span { overflow: hidden; color: rgba(255,255,255,.62); font-size: 12px; line-height: 1.35; text-overflow: ellipsis; white-space: nowrap; }
.archive-card-copy small { display: -webkit-box; overflow: hidden; color: rgba(255,255,255,.4); font-size: 10px; line-height: 1.4; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.archive-card-copy em { align-self: end; color: rgba(var(--accent-rgb),.78); font-size: 9px; font-style: normal; font-weight: 900; letter-spacing: .07em; }
.archive-empty { min-height: 250px; display: grid; place-content: center; text-align: center; color: rgba(255,255,255,.48); }
.archive-empty span { display: flex; justify-content: center; gap: 7px; margin-bottom: 15px; }
.archive-empty span i { width: 7px; height: 7px; border-radius: 50%; background: rgba(var(--accent-rgb),.62); box-shadow: 0 0 9px rgba(var(--accent-rgb),.32); }
.archive-empty strong { color: #eef4fa; font-size: 21px; }
.archive-empty p { margin: 9px 0 0; font-size: 13px; }
.archive-load-zone { display: grid; place-items: center; gap: 9px; padding: 22px 0 4px; }
.archive-load-zone button { min-width: 210px; min-height: 46px; padding: 0 18px; border: 1px solid rgba(var(--accent-rgb),.27); border-radius: 13px; background: rgba(var(--accent-rgb),.045); color: var(--accent); font-size: 9px; font-weight: 900; letter-spacing: .1em; cursor: pointer; }
.archive-load-zone button:disabled { opacity: .5; cursor: wait; }
.archive-load-zone span { color: rgba(255,255,255,.4); font-size: 10px; }
body.archive-open { overflow: hidden; }
.archive-panel:not(.open) { content-visibility: hidden; }
.archive-panel.open { content-visibility: visible; }

@media (max-width: 980px) {
  .archive-grid { grid-template-columns: repeat(3, minmax(0,1fr)); }
  .archive-filters { grid-template-columns: repeat(3, minmax(0,1fr)); }
  .archive-sort { grid-template-columns: repeat(3, minmax(0,1fr)); }
}
@media (max-width: 720px) {
  .personal-launch-grid { grid-template-columns: minmax(0,1fr); }
  .archive-sheet { padding: 18px; border-radius: 21px; }
  .archive-stats { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .archive-signals { grid-template-columns: minmax(0,1fr); }
  .archive-signals button { min-height: 86px; }
  .archive-controls { grid-template-columns: minmax(0,1fr); }
  .archive-refresh { width: 100%; }
  .archive-sort-row { grid-template-columns: minmax(0,1fr); }
  .archive-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
}
@media (max-width: 470px) {
  .archive-header span { font-size: 12px; }
  .archive-filters, .archive-sort { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .archive-grid { gap: 9px; }
  .archive-card { border-radius: 15px; }
  .archive-card-copy { min-height: 122px; padding: 11px; }
  .archive-card-copy strong { font-size: 13px; }
  .archive-card-copy > span { font-size: 11px; }
  .archive-card-copy small { font-size: 9px; }
  .archive-card-badge { top: 7px; left: 7px; padding: 6px 7px; font-size: 8px; }
}
@media (max-width: 360px) {
  .archive-grid { grid-template-columns: minmax(0,1fr); }
}
@media (prefers-reduced-motion: reduce) {
  .archive-backdrop, .archive-sheet, .archive-card, .archive-card-cover img { transition: none; }
}

/* ND Play v0.5.37 · Large Interface & Readability Audit */
.readability-mode-button {
  position: relative;
  width: 40px;
  height: 38px;
  flex: 0 0 40px;
  display: grid;
  place-items: center;
  overflow: hidden;
  border: 1px solid rgba(var(--accent-rgb), .22);
  border-radius: 13px;
  background: rgba(var(--accent-rgb), .045);
  color: rgba(var(--accent-rgb), .72);
  cursor: pointer;
  transition: color 180ms ease, border-color 180ms ease, background 180ms ease, transform 150ms ease, box-shadow 180ms ease;
}
.readability-mode-button:hover {
  color: var(--accent);
  border-color: rgba(var(--accent-rgb), .46);
  background: rgba(var(--accent-rgb), .09);
}
.readability-mode-button:active { transform: scale(.95); }
.readability-mode-button > span {
  font-size: 11px;
  font-weight: 950;
  letter-spacing: -.08em;
  transform: translateX(-.5px);
}
.readability-mode-button > i {
  position: absolute;
  top: 7px;
  right: 7px;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: rgba(var(--accent-rgb), .34);
  box-shadow: 0 0 6px rgba(var(--accent-rgb), .16);
}
.readability-mode-button.is-large {
  color: var(--accent);
  border-color: rgba(var(--accent-rgb), .52);
  background: rgba(var(--accent-rgb), .10);
  box-shadow: inset 0 0 18px rgba(var(--accent-rgb), .045), 0 0 18px rgba(var(--accent-rgb), .055);
}
.readability-mode-button.is-large > span { font-size: 13px; }
.readability-mode-button.is-large > i {
  background: var(--accent);
  box-shadow: 0 0 10px rgba(var(--accent-rgb), .66);
}

/* Baseline readability floor: the normal mode is no longer allowed to become microscopic. */
.subtitle { font-size: 9.5px; }
.track-context { font-size: 10.5px; }
.track-identity-code { font-size: 8.5px; }
.time-readout small { font-size: 8.5px; }
.time-readout b { font-size: 16px; }
.queue-trigger strong { font-size: 12px; }
.flow-button strong { font-size: 14px; }
.flow-button small { font-size: 10px; line-height: 1.35; }
.archive-launch small,
.personal-launch-grid .listening-log-launch small { font-size: 8.8px; }
.archive-launch strong,
.personal-launch-grid .listening-log-launch strong { font-size: 15px; }
.archive-launch > b,
.personal-launch-grid .listening-log-launch > b { font-size: 8.8px; }
.mixes-header p,
.radio-header p,
.listen-later-header p { font-size: 8.5px; }
.mixes-header h2,
.radio-header h2,
.listen-later-header h2 { font-size: 16px; }
.mix-card-top b,
.radio-live { font-size: 9px; }
.mix-card > strong,
.radio-card > strong { font-size: 14px; }
.mix-card > span:not(.mix-card-top),
.radio-card > span:not(.radio-card-top) { font-size: 10.5px; line-height: 1.38; }
.catalog-flip-side { font-size: 8.5px; }
.status-pane-title strong { font-size: 11px; }
.status-pane-navidrome p { font-size: 9.5px; }
.app-version-label,
.app-install-state { font-size: 7.5px; }
.app-version-row strong { font-size: 12px; }
.app-diagnostics-button,
.app-install-button { min-height: 34px; font-size: 7.8px; }
.stream-metric > span { font-size: 7.2px; }
.stream-metric > b { font-size: 9.5px; }

.editorial-header p { font-size: 8.5px; }
.editorial-header span { font-size: 10.5px; }
.editorial-retention small { font-size: 7px; }
.editorial-page-tab > span { font-size: 6.5px; }
.editorial-page-tab > strong { font-size: 9px; }
.editorial-issue-tab { min-height: 35px; font-size: 8px; }
.editorial-meta strong { font-size: 9px; }
.editorial-meta time { font-size: 8px; }
.editorial-subtitle { font-size: 11px; }
.editorial-summary,
.editorial-body,
.editorial-section-text { font-size: 12px; line-height: 1.62; }
.editorial-section-block h4 { font-size: 10px; }
.editorial-section-block li { font-size: 11px; }
.editorial-play-button strong { font-size: 9.5px; }

.queue-sheet .sheet-header p { font-size: 9px; }
.queue-flow-continue small { font-size: 9px; }
.queue-flow-continue strong { font-size: 13px; }
.queue-tool-row button,
.queue-save-form button { font-size: 9px; }
.queue-summary small { font-size: 8px; }
.queue-summary strong { font-size: clamp(13px, 1.8vw, 17px); }
.queue-save-form label,
.queue-column-head { font-size: 9px; }
.queue-copy strong { font-size: 15.5px; }
.queue-copy small { font-size: 11.5px; }
.queue-duration { font-size: 12.5px; }
.queue-source-tag { font-size: 7px; }
.queue-now { font-size: 7.5px; }
.queue-action-popover-head span { font-size: 8.5px; }
.queue-action-popover-head strong { font-size: 14px; }
.queue-action-popover > button span { font-size: 10px; }

.listening-log-header p,
.listening-log-module header p,
.listening-log-timeline-module header p { font-size: 8.5px; }
.listening-log-header span { font-size: 11px; }
.listening-log-period button { min-height: 44px; font-size: 9px; }
.listening-log-stats small { font-size: 8.5px; }
.listening-log-module header h3,
.listening-log-timeline-module header h3 { font-size: 16px; }
.listening-log-album strong,
.listening-log-artist-list strong,
.listening-log-return-list strong { font-size: 11px; }
.listening-log-album small,
.listening-log-artist-list small,
.listening-log-return-list small { font-size: 8px; }
.listening-log-timeline-module > header > span,
.listening-log-day > header small,
.listening-log-entry time,
.listening-log-entry > b { font-size: 9px; }
.listening-log-day > header strong { font-size: 10px; }
.listening-log-entry strong { font-size: 12px; }
.listening-log-entry small { font-size: 9px; }
.listening-log-highlight small { font-size: 9px; }
.listening-log-highlight p { font-size: 11px; }
.listening-log-session > header strong { font-size: 14.5px; }
.listening-log-session > header small { font-size: 10.5px; }
.listening-log-session-summary p { font-size: 11px; }
.listening-log-session-summary small { font-size: 9px; }
.listening-log-session-action { min-height: 42px; font-size: 9px; }

.album-header p,
.album-passport-card > p,
.album-track-heading > p { font-size: 9px; }
.album-facts dt { font-size: 7.5px; }
.album-facts dd { font-size: 10.5px; }
.album-quality-summary small,
.album-user-stats small,
.album-progress-stats small { font-size: 7.5px; }
.album-quality-summary b,
.album-user-stats b,
.album-progress-stats b { font-size: 13px; }
.album-ranked-track b,
.album-context-card b { font-size: 10px; }
.album-ranked-track small,
.album-context-card small { font-size: 8px; }
.album-notes { font-size: 11px; }
.album-empty-data { font-size: 8px; }
.album-track-heading span { font-size: 9px; }
.album-track-header { font-size: 8px; }
.album-track-copy strong { font-size: 12.5px; }
.album-track-copy small { font-size: 8.5px; }
.album-track-duration { font-size: 10.5px; }
.album-track-badges i { font-size: 6.5px; }
.artist-bio-header p { font-size: 9px; }

.archive-header p { font-size: 10px; }
.archive-header span { font-size: 14px; }
.archive-stats small { font-size: 10px; }
.archive-signals small { font-size: 9px; }
.archive-signals strong { font-size: 15px; }
.archive-signals span { font-size: 12px; }
.archive-search span,
.archive-sort-row > span { font-size: 10px; }
.archive-refresh,
.archive-filters button,
.archive-sort button { font-size: 10px; }
.archive-card-badge { font-size: 9.5px; }
.archive-card-copy strong { font-size: 16px; }
.archive-card-copy > span { font-size: 12.5px; }
.archive-card-copy small { font-size: 10.5px; }
.archive-card-copy em { font-size: 9.5px; }
.archive-load-zone button { font-size: 10px; }
.archive-load-zone span { font-size: 11px; }

.auth-matrix-copy small { font-size: 8px; }
.auth-matrix-copy strong { font-size: 11px; }
.auth-matrix-readout > b { font-size: 8px; }
.auth-copy > p:last-child { font-size: 14px; }
.login-form label > span { font-size: 13px; }
.auth-security p { font-size: 12px; }
.auth-install-copy span { font-size: 8px; }
.auth-install-copy small { font-size: 11px; }

/* Deliberate large mode: a second step, not a browser-wide zoom. */
html.readability-large .app-shell { width: min(100%, 600px); }
html.readability-large .brand { font-size: 17px; }
html.readability-large .subtitle { font-size: 10.5px; }
html.readability-large .user-button { min-height: 42px; font-size: 13px; }
html.readability-large .track-context { font-size: 12px; }
html.readability-large .track-identity-control { min-height: 58px; grid-template-columns: minmax(104px, 124px) minmax(0, 1fr) auto; }
html.readability-large .track-identity-code { font-size: 9.5px; }
html.readability-large .vfd-line-title { font-size: clamp(28px, 6vw, 37px); }
html.readability-large .vfd-line-artist { font-size: clamp(19px, 2.7vw, 23px); }
html.readability-large .vfd-line-album { font-size: clamp(18px, 2.45vw, 21px); }
html.readability-large .time-readout small { font-size: 10px; }
html.readability-large .time-readout b { font-size: 19px; }
html.readability-large .queue-trigger { min-height: 44px; }
html.readability-large .queue-trigger strong { font-size: 13px; }
html.readability-large .transport-deck .play-button,
html.readability-large .transport-deck .control-button { min-height: 62px; }
html.readability-large .transport-deck .play-button::before { font-size: 11px; }
html.readability-large .flow-button { min-height: 78px; }
html.readability-large .flow-button strong { font-size: 16px; }
html.readability-large .flow-button small { font-size: 11.5px; }
html.readability-large .archive-launch,
html.readability-large .personal-launch-grid .listening-log-launch { min-height: 82px; }
html.readability-large .archive-launch small,
html.readability-large .personal-launch-grid .listening-log-launch small { font-size: 10px; }
html.readability-large .archive-launch strong,
html.readability-large .personal-launch-grid .listening-log-launch strong { font-size: 17px; }
html.readability-large .archive-launch > b,
html.readability-large .personal-launch-grid .listening-log-launch > b { font-size: 9.5px; }
html.readability-large .mixes-header h2,
html.readability-large .radio-header h2,
html.readability-large .listen-later-header h2 { font-size: 19px; }
html.readability-large .mixes-header p,
html.readability-large .radio-header p,
html.readability-large .listen-later-header p { font-size: 10px; }
html.readability-large .mix-card,
html.readability-large .radio-card { min-height: 122px; }
html.readability-large .mix-card-top b,
html.readability-large .radio-live { font-size: 10px; }
html.readability-large .mix-card > strong,
html.readability-large .radio-card > strong { font-size: 16px; }
html.readability-large .mix-card > span:not(.mix-card-top),
html.readability-large .radio-card > span:not(.radio-card-top) { font-size: 12px; }
html.readability-large .catalog-flip-side { font-size: 10px; }
html.readability-large .status-pane-title strong { font-size: 13px; }
html.readability-large .status-pane-navidrome p { font-size: 11px; }
html.readability-large .app-version-label,
html.readability-large .app-install-state,
html.readability-large .app-diagnostics-button,
html.readability-large .app-install-button { font-size: 9px; }
html.readability-large .app-version-row strong { font-size: 14px; }
html.readability-large .stream-metric > span { font-size: 8px; }
html.readability-large .stream-metric > b { font-size: 10.5px; }

html.readability-large .sheet-header p,
html.readability-large .listening-log-header p,
html.readability-large .listening-log-module header p,
html.readability-large .listening-log-timeline-module header p,
html.readability-large .album-header p,
html.readability-large .album-passport-card > p,
html.readability-large .album-track-heading > p { font-size: 10px; }
html.readability-large .sheet-header h2,
html.readability-large .album-header h2,
html.readability-large .artist-bio-header h2 { font-size: clamp(27px, 4vw, 37px); }
html.readability-large .listening-log-header h2 { font-size: clamp(30px, 5vw, 48px); }
html.readability-large .queue-flow-continue small { font-size: 10px; }
html.readability-large .queue-flow-continue strong { font-size: 15px; }
html.readability-large .queue-tool-row button,
html.readability-large .queue-save-form button { min-height: 50px; font-size: 10px; }
html.readability-large .queue-summary small { font-size: 9px; }
html.readability-large .queue-summary strong { font-size: clamp(15px, 2vw, 19px); }
html.readability-large .queue-column-head,
html.readability-large .queue-save-form label { font-size: 10px; }
html.readability-large .queue-item .queue-track-select { min-height: 78px; }
html.readability-large .queue-copy strong { font-size: 17px; }
html.readability-large .queue-copy small { font-size: 12.5px; }
html.readability-large .queue-duration { font-size: 13.5px; }
html.readability-large .queue-source-tag { font-size: 8px; }
html.readability-large .queue-now { font-size: 8.5px; }
html.readability-large .queue-action-popover-head span { font-size: 9.5px; }
html.readability-large .queue-action-popover-head strong { font-size: 16px; }
html.readability-large .queue-action-popover > button { min-height: 50px; }
html.readability-large .queue-action-popover > button span { font-size: 11px; }

html.readability-large .listening-log-period button { min-height: 48px; font-size: 10px; }
html.readability-large .listening-log-stats small { font-size: 9.5px; }
html.readability-large .listening-log-module header h3,
html.readability-large .listening-log-timeline-module header h3 { font-size: 18px; }
html.readability-large .listening-log-album strong,
html.readability-large .listening-log-artist-list strong,
html.readability-large .listening-log-return-list strong { font-size: 12.5px; }
html.readability-large .listening-log-album small,
html.readability-large .listening-log-artist-list small,
html.readability-large .listening-log-return-list small { font-size: 9px; }
html.readability-large .listening-log-entry { min-height: 66px; }
html.readability-large .listening-log-entry time,
html.readability-large .listening-log-entry > b { font-size: 10px; }
html.readability-large .listening-log-entry strong { font-size: 13.5px; }
html.readability-large .listening-log-entry small { font-size: 10px; }
html.readability-large .listening-log-highlight small { font-size: 10px; }
html.readability-large .listening-log-highlight strong { font-size: 20px; }
html.readability-large .listening-log-highlight p { font-size: 12px; }
html.readability-large .listening-log-session > header strong { font-size: 16px; }
html.readability-large .listening-log-session > header small { font-size: 11px; }
html.readability-large .listening-log-session-summary p { font-size: 12px; }
html.readability-large .listening-log-session-summary small { font-size: 10px; }
html.readability-large .listening-log-session-action { min-height: 46px; font-size: 10px; }

html.readability-large .album-facts dt { font-size: 8.5px; }
html.readability-large .album-facts dd { font-size: 12px; }
html.readability-large .album-quality-summary small,
html.readability-large .album-user-stats small,
html.readability-large .album-progress-stats small { font-size: 8.5px; }
html.readability-large .album-quality-summary b,
html.readability-large .album-user-stats b,
html.readability-large .album-progress-stats b { font-size: 15px; }
html.readability-large .album-ranked-track b,
html.readability-large .album-context-card b { font-size: 11.5px; }
html.readability-large .album-ranked-track small,
html.readability-large .album-context-card small { font-size: 9px; }
html.readability-large .album-notes { font-size: 12.5px; }
html.readability-large .album-track-heading span { font-size: 10px; }
html.readability-large .album-track-header { font-size: 9px; }
html.readability-large .album-track-item button { min-height: 70px; }
html.readability-large .album-track-copy strong { font-size: 14px; }
html.readability-large .album-track-copy small { font-size: 10px; }
html.readability-large .album-track-duration { font-size: 12px; }
html.readability-large .album-track-badges i { font-size: 7.5px; }
html.readability-large .artist-bio-header p { font-size: 10px; }
html.readability-large .artist-bio-text { font-size: clamp(17px, 2vw, 19px); line-height: 1.82; }

html.readability-large .archive-grid { grid-template-columns: repeat(3, minmax(0,1fr)); }
html.readability-large .archive-header p { font-size: 11px; }
html.readability-large .archive-header span { font-size: 15px; }
html.readability-large .archive-stats small { font-size: 11px; }
html.readability-large .archive-signals button { min-height: 112px; }
html.readability-large .archive-signals small { font-size: 10px; }
html.readability-large .archive-signals strong { font-size: 17px; }
html.readability-large .archive-signals span { font-size: 13px; }
html.readability-large .archive-search span,
html.readability-large .archive-sort-row > span { font-size: 11px; }
html.readability-large .archive-search input { min-height: 54px; font-size: 17px; }
html.readability-large .archive-refresh,
html.readability-large .archive-filters button,
html.readability-large .archive-sort button { min-height: 47px; font-size: 11px; }
html.readability-large .archive-card-badge { font-size: 10.5px; }
html.readability-large .archive-card-copy { min-height: 142px; }
html.readability-large .archive-card-copy strong { font-size: 18px; }
html.readability-large .archive-card-copy > span { font-size: 14px; }
html.readability-large .archive-card-copy small { font-size: 12px; }
html.readability-large .archive-card-copy em { font-size: 10.5px; }
html.readability-large .archive-load-zone button { min-height: 50px; font-size: 11px; }
html.readability-large .archive-load-zone span { font-size: 12px; }

html.readability-large .auth-copy > p:last-child { font-size: 15px; }
html.readability-large .login-form label > span { font-size: 14px; }
html.readability-large .login-form input { min-height: 56px; font-size: 18px; }
html.readability-large .login-button { min-height: 58px; font-size: 14px; }
html.readability-large .auth-security p { font-size: 13px; }
html.readability-large .auth-matrix-copy small { font-size: 9px; }
html.readability-large .auth-matrix-copy strong { font-size: 12px; }
html.readability-large .auth-matrix-readout > b { font-size: 9px; }
html.readability-large .auth-install-copy span { font-size: 9px; }
html.readability-large .auth-install-copy strong { font-size: 15px; }
html.readability-large .auth-install-copy small { font-size: 12px; }

@media (min-width: 900px) {
  .readability-mode-button { display: grid; }
}

@media (max-width: 980px) {
  html.readability-large .archive-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
}

@media (max-width: 720px) {
  html.readability-large .listening-log-dashboard { grid-template-columns: minmax(0,1fr); }
  html.readability-large .listening-log-return-list { grid-template-columns: minmax(0,1fr); }
}

@media (max-width: 560px) {
  .readability-mode-button { width: 34px; height: 34px; flex-basis: 34px; border-radius: 11px; }
  .readability-mode-button > span { font-size: 10px; }
  .readability-mode-button.is-large > span { font-size: 12px; }
  .readability-mode-button > i { top: 6px; right: 6px; }
  .stream-metric > span { font-size: 6px; }
  .stream-metric > b { font-size: 8px; }
  .track-identity-code { font-size: 7.4px; }
  .time-readout small { font-size: 7.8px; }
  .time-readout b { font-size: 15.5px; }
  .archive-launch small,
  .personal-launch-grid .listening-log-launch small { font-size: 8.5px; }
  .archive-launch strong,
  .personal-launch-grid .listening-log-launch strong { font-size: 14.5px; }
  .archive-launch > b,
  .personal-launch-grid .listening-log-launch > b { font-size: 8px; }
  .editorial-page-tab > span { font-size: 6px; }
  .editorial-page-tab > strong { font-size: 8.5px; }
  .editorial-issue-tab { font-size: 7.5px; }
  .album-release-type { font-size: 7px; }
  .album-meta { font-size: 10px; }
  .album-genre-tags span { font-size: 6.5px; }
  .album-action { min-height: 40px; font-size: 7.5px; }
  .album-progress-main span { font-size: 10px; }
  .album-progress-stats small { font-size: 7px; }
  .album-context-card b { font-size: 11px; }
  .album-context-card small { font-size: 8.5px; }
  .album-track-badges i { font-size: 6.5px; }

  html.readability-large .brand { font-size: 12px; }
  html.readability-large .user-button { min-height: 36px; font-size: 11px; }
  html.readability-large .track-context { font-size: 10px; }
  html.readability-large .track-identity-control { min-height: 54px; grid-template-columns: minmax(84px, 98px) minmax(0,1fr) auto; }
  html.readability-large .track-identity-code { font-size: 8px; }
  html.readability-large .vfd-line-title { font-size: clamp(25px, 7.6vw, 32px); }
  html.readability-large .vfd-line-artist { font-size: 17px; }
  html.readability-large .vfd-line-album { font-size: 16px; }
  html.readability-large .time-readout small { font-size: 8.8px; }
  html.readability-large .time-readout b { font-size: 17px; }
  html.readability-large .transport-deck .play-button,
  html.readability-large .transport-deck .control-button { min-height: 56px; }
  html.readability-large .flow-button { min-height: 70px; }
  html.readability-large .flow-button strong { font-size: 15px; }
  html.readability-large .flow-button small { font-size: 10.5px; }
  html.readability-large .archive-launch,
  html.readability-large .personal-launch-grid .listening-log-launch { min-height: 76px; }
  html.readability-large .archive-launch small,
  html.readability-large .personal-launch-grid .listening-log-launch small { font-size: 9px; }
  html.readability-large .archive-launch strong,
  html.readability-large .personal-launch-grid .listening-log-launch strong { font-size: 15.5px; }
  html.readability-large .stream-metric > span { font-size: 6.4px; }
  html.readability-large .stream-metric > b { font-size: 8.5px; }
  html.readability-large .queue-sheet .sheet-header h2,
  html.readability-large .album-header h2,
  html.readability-large .artist-bio-header h2 { font-size: 24px; }
  html.readability-large .listening-log-header h2 { font-size: 31px; }
  html.readability-large .queue-copy strong { font-size: 15px; }
  html.readability-large .queue-copy small { font-size: 11px; }
  html.readability-large .album-track-copy strong { font-size: 13px; }
  html.readability-large .album-track-copy small { font-size: 9px; }
  html.readability-large .archive-header span { font-size: 13.5px; }
  html.readability-large .archive-signals strong { font-size: 16px; }
  html.readability-large .archive-signals span { font-size: 12px; }
  html.readability-large .archive-filters button,
  html.readability-large .archive-sort button { font-size: 10px; }
  html.readability-large .archive-card-copy strong { font-size: 15px; }
  html.readability-large .archive-card-copy > span { font-size: 12px; }
  html.readability-large .archive-card-copy small { font-size: 10.5px; }
}

@media (max-width: 390px) {
  .topbar-actions { gap: 3px; }
  .readability-mode-button { width: 32px; height: 34px; flex-basis: 32px; }
  html.readability-large .archive-grid { grid-template-columns: minmax(0,1fr); }
  html.readability-large .archive-card-copy { min-height: 132px; }
}

.readability-mode-button:focus-visible {
  outline: 2px solid rgba(var(--accent-rgb), .78);
  outline-offset: 3px;
}
@media (max-width: 360px) {
  .user-button > span:nth-child(2) { display: none; }
  .user-button { padding-right: 5px; }
}


/* ND Play v0.5.38 · Mobile Fit & Navigation Polish */
html {
  width: 100%;
  max-width: 100%;
  overflow-x: clip;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}
body {
  width: 100%;
  max-width: 100%;
  overflow-x: clip;
  overscroll-behavior-x: none;
}
.app-shell,
.topbar,
.topbar-actions,
.player-card,
.player-primary,
.player-secondary,
.catalog-stage,
.catalog-flipper,
.catalog-face,
.personal-launch-grid,
.mixes-section,
.radio-section,
.listen-later-section,
.mix-rail-shell,
.radio-rail-shell {
  min-width: 0;
  max-width: 100%;
}
.brand-wrap,
.brand-wrap > div:last-child,
.topbar-actions {
  min-width: 0;
}

/* The compact launch names remain readable in both columns of the wide layout. */
@media (min-width: 900px) {
  html.readability-large .app-shell.layout-wide { width: min(100%, 1180px); }
  .app-shell.layout-wide .archive-launch,
  .app-shell.layout-wide .personal-launch-grid .listening-log-launch {
    grid-template-columns: 42px minmax(0,1fr) auto;
    gap: 10px;
    padding-inline: 12px;
  }
  .app-shell.layout-wide .archive-launch-mark,
  .app-shell.layout-wide .personal-launch-grid .listening-log-launch-mark {
    width: 42px;
  }
  .app-shell.layout-wide .archive-launch strong,
  .app-shell.layout-wide .personal-launch-grid .listening-log-launch strong {
    overflow: visible;
    text-overflow: clip;
  }
}

/* iOS must fit the CSS viewport without font inflation or a root horizontal pan. */
@media (max-width: 560px) {
  .app-shell,
  html.readability-large .app-shell {
    width: 100%;
    max-width: 100%;
    padding-left: max(10px, env(safe-area-inset-left));
    padding-right: max(10px, env(safe-area-inset-right));
  }
  .topbar,
  .player-card,
  .player-primary,
  .player-secondary,
  .catalog-stage,
  .catalog-flipper,
  .catalog-face {
    width: 100%;
    max-width: 100%;
  }
  .player-card { overflow-x: clip; }
  .mix-rail,
  .radio-rail,
  .listen-later-rail {
    max-width: 100%;
    contain: inline-size;
  }
  .archive-launch strong,
  .personal-launch-grid .listening-log-launch strong,
  html.readability-large .archive-launch strong,
  html.readability-large .personal-launch-grid .listening-log-launch strong {
    white-space: nowrap;
    overflow: visible;
    text-overflow: clip;
  }
}

@supports not (overflow: clip) {
  html, body { overflow-x: hidden; }
}

/* ND Play v0.5.39 · ND Archive Type System
   The release uses a custom vector wordmark plus a self-contained CSS type system.
   No external webfont or font binary is loaded. */
:root {
  --nd-display-font: "Avenir Next", "Century Gothic", Futura, "Ubuntu Sans", "Segoe UI Variable Display", "Segoe UI", ui-sans-serif, system-ui, sans-serif;
  --nd-mini-font: "Avenir Next", "Ubuntu Sans", "Segoe UI Variable Text", "Segoe UI", ui-sans-serif, system-ui, sans-serif;
  --nd-numeric-font: "SFMono-Regular", "Cascadia Mono", "Liberation Mono", Consolas, ui-monospace, monospace;
  --nd-type-gradient: linear-gradient(108deg, #71e5ff 0%, #f7f9ff 46%, #9d7cff 100%);
  --nd-type-gradient-vertical: linear-gradient(180deg, #fcfdff 0%, #e7f5ff 42%, #9d7cff 100%);
  --nd-type-glow: drop-shadow(0 0 7px rgba(113,229,255,.12)) drop-shadow(0 0 11px rgba(157,124,255,.08));
}

.nd-typeface-defs {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
  pointer-events: none;
}
.sr-only {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0,0,0,0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}
.nd-brand-wordmark {
  width: 112px;
  height: 18px;
  display: block;
  font-size: 0;
  letter-spacing: 0;
  line-height: 0;
}
.nd-brand-wordmark svg {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
  filter: drop-shadow(0 0 5px rgba(113,229,255,.18)) drop-shadow(0 0 7px rgba(157,124,255,.12));
}
.auth-brand .nd-brand-wordmark {
  width: min(204px, 52vw);
  height: 30px;
}

/* ND Archive Display: titles keep the approved geometric form and cyan-to-violet light. */
.vfd-line {
  font-family: var(--nd-display-font);
  font-weight: 650;
  font-synthesis: none;
}
.track-copy .vfd-track-title {
  font-weight: 650;
  letter-spacing: -.034em;
}
.vfd-glyph {
  color: transparent;
  -webkit-text-stroke: 0;
  text-shadow: none;
}
.vfd-glyph::after {
  background-image: linear-gradient(180deg,
    #fcfdff 0%,
    #e9f6ff 41%,
    var(--nd-glyph-accent, #9d7cff) 100%);
  background-position: center;
  background-size: 100% 100%;
  filter: drop-shadow(0 0 2px var(--nd-glyph-glow, rgba(113,229,255,.28)))
          drop-shadow(0 0 7px rgba(157,124,255,.10));
  opacity: 1;
}
.vfd-line-artist,
.vfd-line-album {
  font-family: var(--nd-mini-font);
  font-weight: 650;
  letter-spacing: .006em;
}
.vfd-line-artist .vfd-glyph::after {
  background-image: linear-gradient(180deg, #fbfdff 0%, #dff6ff 62%, var(--nd-glyph-accent, #71e5ff) 100%);
  background-size: 100% 100%;
  filter: drop-shadow(0 0 2px rgba(113,229,255,.18));
  opacity: .97;
}
.vfd-line-album .vfd-glyph::after {
  background-image: linear-gradient(180deg, #f5f7ff 0%, #dfe6f6 58%, var(--nd-glyph-accent, #9d7cff) 100%);
  background-size: 100% 100%;
  filter: drop-shadow(0 0 1.5px rgba(157,124,255,.13));
  opacity: .83;
}

/* Approved display treatment for short, structural interface headings. */
:is(
  .auth-copy h1,
  .auth-success-console > strong,
  .flow-button strong,
  .archive-launch strong,
  .personal-launch-grid .listening-log-launch strong,
  .listen-later-header h2,
  .mixes-header h2,
  .radio-header h2,
  .editorial-header h2,
  .archive-header h2,
  .listening-log-header h2,
  .queue-sheet .sheet-header h2,
  .artist-bio-header h2,
  .album-header h2,
  .install-guide-sheet h2,
  .listening-log-module h3,
  .listening-log-timeline-module h3
) {
  font-family: var(--nd-display-font);
  font-weight: 650;
  font-synthesis: none;
  letter-spacing: .012em;
  background-image: var(--nd-type-gradient);
  background-size: 100% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  filter: var(--nd-type-glow);
}

/* Mini face: technical labels remain compact, clean and consistent in Russian and English. */

/* ND Numeric: tabular telemetry and timing are the second member of the family. */
:is(
  .time-readout b,
  .stream-codec,
  .queue-summary strong,
  .archive-stats b,
  .listening-log-stats b,
  .app-version-row strong
) {
  background-image: var(--nd-type-gradient);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 0 5px rgba(113,229,255,.10));
}

/* The signature is strongest on short titles; long editorial and metadata copy stays neutral. */
.flow-button strong { letter-spacing: .075em; }
.archive-launch strong,
.personal-launch-grid .listening-log-launch strong { letter-spacing: .055em; }
.listen-later-header h2,
.mixes-header h2,
.radio-header h2 { letter-spacing: -.008em; }
.archive-header h2,
.listening-log-header h2,
.queue-sheet .sheet-header h2,
.artist-bio-header h2,
.album-header h2 { letter-spacing: -.018em; }

/* A quiet glass highlight keeps the gradient from looking like flat coloured text. */
:is(
  .flow-button strong,
  .archive-launch strong,
  .personal-launch-grid .listening-log-launch strong,
  .listen-later-header h2,
  .mixes-header h2,
  .radio-header h2,
  .archive-header h2,
  .listening-log-header h2,
  .queue-sheet .sheet-header h2,
  .artist-bio-header h2,
  .album-header h2
) {
  text-shadow: 0 1px 0 rgba(255,255,255,.04);
}

@supports not ((-webkit-background-clip: text) or (background-clip: text)) {
  :is(
    .auth-copy h1,
    .auth-success-console > strong,
    .flow-button strong,
    .archive-launch strong,
    .personal-launch-grid .listening-log-launch strong,
    .listen-later-header h2,
    .mixes-header h2,
    .radio-header h2,
    .editorial-header h2,
    .archive-header h2,
    .listening-log-header h2,
    .queue-sheet .sheet-header h2,
    .artist-bio-header h2,
    .album-header h2,
    .install-guide-sheet h2,
    .listening-log-module h3,
    .listening-log-timeline-module h3,
    .time-readout b,
    .stream-codec,
    .queue-summary strong,
    .archive-stats b,
    .listening-log-stats b,
    .app-version-row strong
  ) {
    color: #eaf7ff;
    -webkit-text-fill-color: currentColor;
    background-image: none;
    filter: none;
  }
  .vfd-glyph::after { display: none; }
  .vfd-glyph { color: #eaf7ff; }
}

@media (max-width: 560px) {
  .nd-brand-wordmark { width: 92px; height: 15px; }
  .auth-brand .nd-brand-wordmark { width: min(184px, 54vw); height: 27px; }
  .track-copy .vfd-track-title { letter-spacing: -.028em; }
  .flow-button strong { letter-spacing: .06em; }
  .archive-launch strong,
  .personal-launch-grid .listening-log-launch strong { letter-spacing: .04em; }
}

@media (max-width: 370px) {
  .nd-brand-wordmark { width: 84px; height: 14px; }
  .archive-launch strong,
  .personal-launch-grid .listening-log-launch strong { letter-spacing: .025em; }
}

@media (prefers-reduced-motion: reduce) {
  .nd-brand-wordmark svg,
  :is(
    .auth-copy h1,
    .auth-success-console > strong,
    .flow-button strong,
    .archive-launch strong,
    .personal-launch-grid .listening-log-launch strong,
    .listen-later-header h2,
    .mixes-header h2,
    .radio-header h2,
    .archive-header h2,
    .listening-log-header h2,
    .queue-sheet .sheet-header h2,
    .artist-bio-header h2,
    .album-header h2
  ) { filter: none; }
}

/* v0.5.39 final specificity and compact-header corrections. */
.vfd-line-title .vfd-glyph::after {
  background-image: linear-gradient(180deg,
    #fcfdff 0%,
    #e9f6ff 41%,
    var(--nd-glyph-accent, #9d7cff) 100%);
  background-position: center;
  background-size: 100% 100%;
  filter: drop-shadow(0 0 2px var(--nd-glyph-glow, rgba(113,229,255,.28)))
          drop-shadow(0 0 7px rgba(157,124,255,.10));
  opacity: 1;
}

@media (max-width: 560px) {
  .brand-wrap { gap: 8px; }
  .nd-brand-wordmark { width: 80px; height: 13px; }
  .brand-wrap .company-signature {
    max-width: 92px;
    overflow: hidden;
    font-size: 6.6px;
    letter-spacing: .10em;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}

@media (max-width: 390px) {
  .nd-brand-wordmark { width: 74px; height: 12px; }
  .brand-wrap .company-signature { max-width: 82px; font-size: 6.2px; }
}

@media (max-width: 560px) {
  .brand-wrap .company-signature {
    max-width: 100px;
    font-size: 5.4px;
    letter-spacing: .025em;
  }
}
@media (max-width: 390px) {
  .brand-wrap .company-signature { max-width: 92px; font-size: 5.2px; }
}


/* ND Play v0.5.40 · Matrix Music Polish
   The interface owns the geometric display face; live music returns to the VFD matrix voice. */

/* Music identity: restore the dense dot-matrix texture for title, artist and album. */
.track-copy .vfd-line {
  font-family: "SFMono-Regular", "Cascadia Mono", Consolas, "Liberation Mono", ui-monospace, monospace;
  font-weight: 900;
  font-synthesis: none;
}
.track-copy .vfd-track-title {
  font-weight: 900;
  letter-spacing: -.047em;
}
.track-copy .vfd-glyph {
  color: rgba(238,248,246,.18);
  -webkit-text-stroke: .38px rgba(var(--accent-rgb),.21);
  text-shadow: 0 0 1px rgba(var(--accent-rgb),.22);
}
.track-copy .vfd-glyph::after {
  background-image: radial-gradient(circle,
    rgba(251,255,254,.98) 0 1.12px,
    rgba(var(--accent-rgb),.96) 1.22px 1.68px,
    transparent 1.82px);
  background-position: center 48%;
  background-size: 4.08px 4.08px;
  filter: drop-shadow(0 0 2.4px rgba(var(--accent-rgb),.28));
  opacity: .98;
}
.track-copy .vfd-line-artist,
.track-copy .vfd-line-album {
  font-family: "SFMono-Regular", "Cascadia Mono", Consolas, "Liberation Mono", ui-monospace, monospace;
  font-weight: 900;
  letter-spacing: -.025em;
}
.track-copy .vfd-line-artist .vfd-glyph::after,
.track-copy .vfd-line-album .vfd-glyph::after {
  background-image: radial-gradient(circle,
    rgba(249,255,253,.93) 0 .94px,
    rgba(var(--accent-rgb),.88) 1.02px 1.42px,
    transparent 1.55px);
  background-size: 3.85px 3.85px;
  filter: drop-shadow(0 0 1.8px rgba(var(--accent-rgb),.20));
}
.track-copy .vfd-line-artist .vfd-glyph::after { opacity: .96; }
.track-copy .vfd-line-album .vfd-glyph::after { opacity: .76; }

/* Progress readout: labels are gone; the two large matrix values carry the meaning. */
.time-row {
  align-items: center;
  margin-top: 10px;
}
.time-readout {
  min-width: 70px;
  display: block;
}
.time-readout b {
  display: inline-block;
  min-width: 4.6ch;
  font-family: "SFMono-Regular", "Cascadia Mono", Consolas, "Liberation Mono", ui-monospace, monospace;
  font-size: clamp(19px, 2.15vw, 23px);
  font-weight: 900;
  line-height: 1;
  letter-spacing: .035em;
  font-variant-numeric: tabular-nums;
  background-image: radial-gradient(circle,
    rgba(251,255,254,.98) 0 1.02px,
    rgba(var(--accent-rgb),.95) 1.10px 1.48px,
    transparent 1.60px);
  background-position: center;
  background-size: 3.72px 3.72px;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 0 2px rgba(var(--accent-rgb),.24));
}
.time-readout-remaining b {
  background-image: radial-gradient(circle,
    rgba(248,246,255,.97) 0 1.02px,
    rgba(157,124,255,.94) 1.10px 1.48px,
    transparent 1.60px);
}
.player-card.is-radio .time-row {
  font-size: inherit;
  letter-spacing: normal;
}

/* Personal routes: icon plus one unambiguous word, nothing else. */
.archive-launch,
.personal-launch-grid .listening-log-launch,
.app-shell.layout-wide .archive-launch,
.app-shell.layout-wide .personal-launch-grid .listening-log-launch {
  grid-template-columns: 46px minmax(0,1fr);
  gap: 13px;
}
.archive-launch > span:nth-child(2),
.personal-launch-grid .listening-log-launch > span:nth-child(2) {
  display: flex;
  align-items: center;
  min-width: 0;
}
.archive-launch strong,
.personal-launch-grid .listening-log-launch strong,
html.readability-large .archive-launch strong,
html.readability-large .personal-launch-grid .listening-log-launch strong {
  font-size: clamp(17px, 2vw, 21px);
  letter-spacing: .055em;
  overflow: visible;
  text-overflow: clip;
  white-space: nowrap;
}

/* Journal headline figures must never ellipsize. The time cell uses H:MM. */
.listening-log-stats b,
html.readability-large .listening-log-stats b {
  overflow: visible;
  font-family: "SFMono-Regular", "Cascadia Mono", Consolas, "Liberation Mono", ui-monospace, monospace;
  font-size: clamp(22px, 3.25vw, 31px);
  letter-spacing: .025em;
  text-overflow: clip;
  white-space: nowrap;
}
.listening-log-stats span:first-child b {
  font-size: clamp(23px, 3.45vw, 33px);
}

@media (max-width: 560px) {
  .track-copy .vfd-track-title { letter-spacing: -.042em; }
  .time-readout b { font-size: 19px; background-size: 3.55px 3.55px; }
  .archive-launch,
  .personal-launch-grid .listening-log-launch { grid-template-columns: 46px minmax(0,1fr); }
  .archive-launch strong,
  .personal-launch-grid .listening-log-launch strong,
  html.readability-large .archive-launch strong,
  html.readability-large .personal-launch-grid .listening-log-launch strong { font-size: 18px; }
  .listening-log-stats b,
  html.readability-large .listening-log-stats b { font-size: clamp(22px, 7vw, 29px); }
}

@media (max-width: 390px) {
  .time-readout b { font-size: 18px; }
  .archive-launch strong,
  .personal-launch-grid .listening-log-launch strong,
  html.readability-large .archive-launch strong,
  html.readability-large .personal-launch-grid .listening-log-launch strong { font-size: 17px; }
}

@supports not ((-webkit-background-clip: text) or (background-clip: text)) {
  .time-readout b {
    background-image: none;
    color: #eaf7ff;
    -webkit-text-fill-color: currentColor;
    filter: none;
  }
}


/* ND Play v0.5.41 · Terminal Clarity
   The system speaks in a restrained terminal voice; live music keeps the VFD matrix. */
:root {
  --nd-terminal-font: "SFMono-Regular", "Cascadia Mono", "IBM Plex Mono", "Liberation Mono", Consolas, ui-monospace, monospace;
  --nd-terminal-ink: #e6f2f5;
  --nd-terminal-soft: #b9d9df;
  --nd-terminal-accent: #83e9ff;
}

/* Wordmark: cold white body with one restrained cyan signal, no purple gradient. */
.nd-wordmark-main { stroke: #e5f2f6; }
.nd-wordmark-accent { stroke: #82e8ff; }
.nd-brand-wordmark svg {
  filter: drop-shadow(0 0 4px rgba(130,232,255,.14));
}

/* Structural headings return to an instrument-like terminal face. */
:is(
  .auth-copy h1,
  .auth-success-console > strong,
  .flow-button strong,
  .archive-launch strong,
  .personal-launch-grid .listening-log-launch strong,
  .listen-later-header h2,
  .mixes-header h2,
  .radio-header h2,
  .editorial-header h2,
  .archive-header h2,
  .listening-log-header h2,
  .queue-sheet .sheet-header h2,
  .artist-bio-header h2,
  .album-header h2,
  .install-guide-sheet h2,
  .listening-log-module h3,
  .listening-log-timeline-module h3
) {
  font-family: var(--nd-terminal-font);
  font-weight: 760;
  font-synthesis: none;
  letter-spacing: .015em;
  background-image: none;
  color: var(--nd-terminal-ink);
  -webkit-text-fill-color: currentColor;
  filter: none;
  text-shadow: 0 0 8px rgba(131,233,255,.045);
}
.flow-button strong,
.archive-launch strong,
.personal-launch-grid .listening-log-launch strong { color: #aeefff; }
.archive-header h2,
.listening-log-header h2,
.queue-sheet .sheet-header h2,
.artist-bio-header h2,
.album-header h2 { letter-spacing: -.025em; }

/* Numeric system readouts stay terminal and solid; the playback clock is handled below. */
:is(
  .stream-codec,
  .queue-summary strong,
  .archive-stats b,
  .listening-log-stats b,
  .app-version-row strong
) {
  font-family: var(--nd-terminal-font);
  background-image: none;
  color: #c9eef4;
  -webkit-text-fill-color: currentColor;
  filter: none;
  text-shadow: none;
}

/* High-resolution secondary VFD: smaller pitch, smaller emitters, less bloom. */
.track-copy .vfd-line-artist,
.track-copy .vfd-line-album {
  font-family: var(--nd-terminal-font);
  font-weight: 860;
  letter-spacing: -.012em;
}
.track-copy .vfd-line-artist .vfd-glyph,
.track-copy .vfd-line-album .vfd-glyph {
  color: rgba(236,248,246,.25);
  -webkit-text-stroke: .24px rgba(var(--accent-rgb),.17);
  text-shadow: none;
}
.track-copy .vfd-line-artist .vfd-glyph::after,
.track-copy .vfd-line-album .vfd-glyph::after {
  background-image: radial-gradient(circle,
    rgba(252,255,254,.98) 0 .54px,
    rgba(var(--accent-rgb),.93) .62px .92px,
    transparent 1.02px);
  background-position: center 49%;
  background-size: 2.72px 2.72px;
  filter: drop-shadow(0 0 1.05px rgba(var(--accent-rgb),.18));
}
.track-copy .vfd-line-artist .vfd-glyph::after { opacity: .98; }
.track-copy .vfd-line-album .vfd-glyph::after { opacity: .86; }
body.is-playing:not(.motion-suspended) .track-identity-display:not(.identity-enter) .vfd-line-artist .vfd-glyph::after,
body.is-playing:not(.motion-suspended) .track-identity-display:not(.identity-enter) .vfd-line-album .vfd-glyph::after {
  animation-name: none;
}

/* High-resolution playback clock and radio status. */
.time-readout { min-width: 78px; }
.time-readout b {
  min-width: 4.7ch;
  font-family: var(--nd-terminal-font);
  font-size: clamp(22px, 2.35vw, 26px);
  font-weight: 900;
  line-height: 1;
  letter-spacing: .055em;
  background-image: radial-gradient(circle,
    rgba(252,255,254,.99) 0 .56px,
    rgba(var(--accent-rgb),.96) .64px .96px,
    transparent 1.06px);
  background-position: center;
  background-size: 2.68px 2.68px;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 0 1.15px rgba(var(--accent-rgb),.18));
}
.time-readout-remaining b {
  background-image: radial-gradient(circle,
    rgba(250,249,255,.99) 0 .56px,
    rgba(168,145,255,.95) .64px .96px,
    transparent 1.06px);
}

/* New albums receive one compact, unmistakable label. */
.archive-card-badge.is-new {
  top: 10px;
  right: 10px;
  left: auto;
  width: auto;
  max-width: none;
  padding: 7px 11px;
  border: 1px solid rgba(255,255,255,.42);
  border-radius: 9px;
  background: rgb(var(--accent-rgb));
  color: #071014;
  font-family: var(--nd-terminal-font);
  font-size: 9px;
  font-weight: 900;
  letter-spacing: .11em;
  line-height: 1;
  white-space: nowrap;
  box-shadow: 0 0 0 1px rgba(0,0,0,.20), 0 0 18px rgba(var(--accent-rgb),.34);
  backdrop-filter: none;
}

@media (max-width: 560px) {
  .track-copy .vfd-line-artist { font-size: 18px; }
  .track-copy .vfd-line-album { font-size: 17px; }
  .track-copy .vfd-line-artist .vfd-glyph::after,
  .track-copy .vfd-line-album .vfd-glyph::after {
    background-size: 2.62px 2.62px;
  }
  .time-readout { min-width: 82px; }
  .time-readout b { font-size: 22px; background-size: 2.58px 2.58px; }
  .archive-card-badge.is-new { top: 8px; right: 8px; padding: 7px 9px; font-size: 8.5px; }
}

@media (max-width: 390px) {
  .track-copy .vfd-line-artist { font-size: 17px; }
  .track-copy .vfd-line-album { font-size: 16px; }
  .time-readout b { font-size: 21px; }
}

@supports not ((-webkit-background-clip: text) or (background-clip: text)) {
  .time-readout b {
    background-image: none;
    color: #eaf7ff;
    -webkit-text-fill-color: currentColor;
    filter: none;
  }
}


/* ND Play v0.5.42 · Final Mobile & Auth Polish
   Safari must never promote internal carousel or decorative overflow to the page viewport. */
.auth-access-title {
  margin: 0 0 12px;
  color: var(--accent);
  font-family: var(--nd-terminal-font, ui-monospace, monospace);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .18em;
  line-height: 1.2;
  text-transform: uppercase;
}
.auth-copy .auth-access-title + p { margin-top: 0; }

html,
body {
  width: 100%;
  max-width: 100%;
  overflow-x: hidden !important;
}
body {
  position: relative;
  overscroll-behavior-x: none;
}
#authScreen,
#appScreen,
.auth-shell,
.app-shell {
  max-width: 100%;
  overflow-x: hidden;
}

@media (max-width: 560px) {
  html,
  body,
  #authScreen,
  #appScreen,
  .auth-shell,
  .app-shell {
    width: 100%;
    max-width: 100vw;
  }
  .app-shell,
  html.readability-large .app-shell {
    overflow-x: hidden;
  }
  .player-card,
  .player-primary,
  .player-secondary,
  .catalog-stage,
  .catalog-flipper,
  .catalog-face,
  .topbar {
    min-width: 0;
    max-width: 100%;
    overflow-x: hidden;
  }
  .mix-rail-shell,
.radio-rail-shell,
.personal-launch-grid {
    min-width: 0;
    max-width: 100%;
    overflow: hidden;
  }
  .mix-rail,
  .radio-rail,
  .listen-later-rail {
    width: 100%;
    max-width: 100%;
  }
  .ambient {
    max-width: 100vw;
    contain: paint;
  }
}

@supports (width: 100dvw) {
  @media (max-width: 560px) {
    html,
    body,
    #authScreen,
    #appScreen,
    .auth-shell,
    .app-shell {
      max-width: 100dvw;
    }
  }
}

/* ND Play v0.5.43 · Mobile Scroll & Queue Compact
   On phones the document is the only vertical scroller. The queue reserves space for music first. */
.queue-title-mobile,
.queue-tool-mobile { display: none; }

@media (max-width: 899px) {
  /* A persisted desktop layout preference must never create nested mobile scrolling. */
  .app-shell.layout-wide {
    width: 100%;
    height: auto;
    min-height: 100dvh;
    overflow: visible;
  }
  .app-shell.layout-wide .player-card {
    display: flex;
    height: auto;
    min-height: 0;
    max-height: none;
    grid-template-columns: none;
    gap: 0;
  }
  .app-shell.layout-wide .player-primary,
  .app-shell.layout-wide .player-secondary,
  .player-primary,
  .player-secondary {
    height: auto;
    min-height: 0;
    max-height: none;
    overflow-x: hidden;
    overflow-y: visible !important;
    overscroll-behavior-y: auto;
    touch-action: pan-y;
    scrollbar-width: none;
  }
  .app-shell.layout-wide .player-primary::-webkit-scrollbar,
  .app-shell.layout-wide .player-secondary::-webkit-scrollbar,
  .player-primary::-webkit-scrollbar,
  .player-secondary::-webkit-scrollbar { display: none; }
  .app-shell.layout-wide .player-primary,
  .app-shell.layout-wide .player-secondary {
    padding-right: 0;
  }
  .app-shell.layout-wide .player-secondary {
    padding-left: 0;
    border-left: 0;
  }
  .catalog-stage,
  .catalog-flipper,
  .catalog-face {
    max-height: none;
    overflow-y: visible;
    overscroll-behavior-y: auto;
  }
}

@media (max-width: 700px) {
  .queue-panel.open { overflow: hidden; }
  .queue-sheet {
    top: max(calc(env(safe-area-inset-top) + 5px), 5px);
    bottom: max(calc(env(safe-area-inset-bottom) + 5px), 5px);
    width: calc(100vw - 10px);
    max-height: none;
    display: flex;
    flex-direction: column;
    padding: 12px 12px 10px;
    overflow: hidden;
    border-radius: 22px;
  }
  .queue-sheet .sheet-header {
    flex: 0 0 auto;
    align-items: flex-start;
    margin-bottom: 8px;
    padding-bottom: 9px;
  }
  .queue-sheet .sheet-header p {
    margin-bottom: 4px;
    font-size: 7px;
    letter-spacing: .13em;
  }
  .queue-sheet .sheet-header h2 {
    font-size: clamp(27px, 9vw, 34px);
    line-height: 1;
  }
  .queue-title-full { display: none; }
  .queue-title-mobile { display: inline; }
  .queue-close {
    width: 42px;
    height: 42px;
    flex-basis: 42px;
    border-radius: 13px;
  }
  .album-archive-passport-deck,
  .queue-summary,
  .queue-save-form,
  .queue-column-head { flex: 0 0 auto; }
  .album-archive-passport-deck {
    display: grid;
    gap: 7px;
    margin-bottom: 7px;
  }
  .queue-flow-continue {
    min-height: 52px;
    grid-template-columns: 8px minmax(0,1fr) auto;
    gap: 8px;
    padding: 8px 10px;
    border-radius: 13px;
  }
  .queue-flow-continue small { font-size: 6.5px; }
  .queue-flow-continue strong {
    margin-top: 1px;
    font-size: 10px;
    letter-spacing: .075em;
  }
  .queue-flow-continue b { font-size: 8px; }
  .queue-tool-row {
    display: grid;
    grid-template-columns: repeat(3, minmax(0,1fr));
    gap: 6px;
  }
  .queue-tool-row button {
    min-height: 40px;
    padding: 5px 4px;
    border-radius: 10px;
    font-size: 6.6px;
    line-height: 1.15;
    letter-spacing: .07em;
  }
  .queue-tool-full { display: none; }
  .queue-tool-mobile { display: inline; }
  .queue-summary {
    grid-template-columns: repeat(3, minmax(0,1fr));
    gap: 6px;
    margin-bottom: 7px;
  }
  .queue-summary > div,
  .queue-summary > div:last-child {
    grid-column: auto;
    padding: 7px 8px;
    border-radius: 10px;
  }
  .queue-summary small {
    font-size: 6px;
    letter-spacing: .11em;
  }
  .queue-summary strong {
    margin-top: 3px;
    font-size: 10px;
    line-height: 1.1;
    text-overflow: clip;
  }
  .queue-save-form {
    grid-template-columns: minmax(0,1fr) auto auto;
    gap: 6px;
    margin-bottom: 7px;
    padding: 7px;
  }
  .queue-save-form label { display: none; }
  .queue-save-form input {
    grid-column: auto;
    height: 36px;
    font-size: 11px;
  }
  .queue-save-form button {
    min-height: 36px;
    padding: 6px 7px;
    font-size: 6.5px;
  }
  .queue-column-head {
    min-height: 24px;
    grid-template-columns: 29px minmax(0,1fr) 45px 31px;
    gap: 6px;
    padding: 3px 7px;
    font-size: 6.5px;
  }
  .queue-list {
    flex: 1 1 auto;
    min-height: 150px;
    max-height: none !important;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
  }
  .queue-item { grid-template-columns: minmax(0,1fr) 34px; }
  .queue-item .queue-track-select {
    grid-template-columns: 29px minmax(0,1fr) 45px;
    gap: 6px;
    min-height: 60px;
    padding: 7px 3px 7px 7px;
  }
  .queue-copy strong { font-size: 12px; }
  .queue-copy small { margin-top: 3px; font-size: 9px; }
  .queue-order,
  .queue-duration { font-size: 9px; }
  .queue-item .queue-item-menu {
    width: 32px;
    min-width: 32px;
    height: 32px;
    min-height: 32px;
  }
}

@media (max-width: 370px) {
  .queue-sheet { padding-inline: 9px; }
  .queue-tool-row { gap: 4px; }
  .queue-tool-row button { font-size: 6px; letter-spacing: .055em; }
  .queue-summary { gap: 4px; }
  .queue-summary > div { padding-inline: 6px; }
  .queue-summary strong { font-size: 9px; }
}


/* ND Play v0.5.44 · True Mobile Width & Help Center
   Mobile geometry is physically contained instead of merely hiding root overflow. */

.help-button {
  position: relative;
  width: 40px;
  height: 40px;
  flex: 0 0 40px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(var(--accent-rgb), .24);
  border-radius: 13px;
  background: rgba(var(--accent-rgb), .045);
  color: #eaf5fb;
  cursor: pointer;
  box-shadow: inset 0 1px rgba(255,255,255,.025);
  transition: transform 150ms ease, border-color 180ms ease, background 180ms ease, color 180ms ease;
}
.help-button > span {
  font-family: var(--nd-terminal-font, ui-monospace, monospace);
  font-size: 18px;
  font-weight: 900;
  line-height: 1;
}
.help-button > i {
  position: absolute;
  top: 5px;
  right: 5px;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: rgba(var(--accent-rgb), .55);
  box-shadow: 0 0 7px rgba(var(--accent-rgb), .32);
}
.help-button:hover,
.help-button:focus-visible {
  border-color: rgba(var(--accent-rgb), .52);
  background: rgba(var(--accent-rgb), .10);
  color: var(--accent);
}
.help-button:active { transform: scale(.96); }

/* Personal sections are peers and must have identical geometry. */
.personal-launch-grid {
  grid-auto-rows: 1fr;
  align-items: stretch;
}
.archive-launch,
.personal-launch-grid .listening-log-launch {
  width: 100%;
  height: 100%;
  min-height: 72px;
  grid-template-columns: 46px minmax(0,1fr);
  gap: 12px;
  padding: 10px 14px;
}
.personal-launch-grid .listening-log-launch {
  border-radius: 17px;
}
.archive-launch > span:nth-child(2),
.personal-launch-grid .listening-log-launch > span:nth-child(2) {
  min-width: 0;
}

/* Compact three-part status console: server, link, application. */
.status-strip.status-console {
  grid-template-columns: minmax(0, 1.15fr) minmax(118px, .78fr) minmax(190px, 1fr);
  min-height: 50px;
  align-items: stretch;
}
.status-console .status-pane { padding: 9px 12px; }
.status-pane-navidrome {
  display: flex;
  align-items: center;
}
.status-pane-navidrome p { display: none; }
.status-pane-app {
  min-width: 0;
  padding-block: 7px !important;
}
.app-version-row {
  grid-template-columns: auto auto auto;
  gap: 3px 6px;
  white-space: nowrap;
}
.app-install-state { grid-column: auto; }
.utility-label-short { display: none; }

/* Help center */
body.help-open { overflow: hidden; }
.help-panel {
  position: fixed;
  inset: 0;
  z-index: 210;
  pointer-events: none;
  visibility: hidden;
}
.help-panel.open { pointer-events: auto; visibility: visible; }
.help-backdrop {
  position: absolute;
  inset: 0;
  border: 0;
  background: rgba(2,5,9,.82);
  opacity: 0;
  transition: opacity 200ms ease;
}
.help-panel.open .help-backdrop { opacity: 1; }
.help-sheet {
  position: absolute;
  top: max(10px, env(safe-area-inset-top));
  right: max(10px, env(safe-area-inset-right));
  bottom: max(10px, env(safe-area-inset-bottom));
  left: max(10px, env(safe-area-inset-left));
  width: min(940px, calc(100vw - 20px));
  margin: auto;
  padding: 24px;
  overflow: auto;
  overscroll-behavior: contain;
  border: 1px solid rgba(var(--accent-rgb), .28);
  border-radius: 27px;
  background:
    radial-gradient(circle at 88% 6%, rgba(var(--accent-rgb), .10), transparent 27%),
    linear-gradient(180deg, rgba(24,28,38,.985), rgba(10,13,19,.995));
  box-shadow: 0 34px 100px rgba(0,0,0,.58), inset 0 1px rgba(255,255,255,.035);
  opacity: 0;
  transform: translateY(12px) scale(.99);
  transition: opacity 190ms ease, transform 220ms cubic-bezier(.2,.8,.2,1);
}
.help-panel.open .help-sheet { opacity: 1; transform: translateY(0) scale(1); }
.help-signal-line {
  position: sticky;
  z-index: 3;
  top: -24px;
  display: block;
  height: 2px;
  margin: -24px -24px 22px;
  background: linear-gradient(90deg, transparent, rgba(var(--accent-rgb), .34), var(--accent), rgba(var(--accent-rgb), .34), transparent);
  box-shadow: 0 0 14px rgba(var(--accent-rgb), .26);
}
.help-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
  padding-bottom: 20px;
  border-bottom: 1px solid rgba(255,255,255,.075);
}
.help-header > div { min-width: 0; }
.help-header p,
.help-section-heading small {
  margin: 0;
  color: #ffb56b;
  font-family: var(--nd-terminal-font, ui-monospace, monospace);
  font-size: 8px;
  font-weight: 900;
  letter-spacing: .18em;
}
.help-header h2 {
  margin: 7px 0 5px;
  color: #edf7fb;
  font-family: var(--nd-terminal-font, ui-monospace, monospace);
  font-size: clamp(30px, 5vw, 48px);
  line-height: 1.02;
}
.help-header span { color: var(--muted); font-size: 12px; line-height: 1.5; }
.help-close {
  width: 48px;
  height: 48px;
  flex: 0 0 48px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 15px;
  background: rgba(255,255,255,.035);
  cursor: pointer;
}
.help-close svg { width: 22px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; }
.help-start,
.help-navigation,
.help-controls,
.help-tips { margin-top: 22px; }
.help-section-heading { margin-bottom: 12px; }
.help-section-heading h3 {
  margin: 5px 0 0;
  color: #e9f6fb;
  font-family: var(--nd-terminal-font, ui-monospace, monospace);
  font-size: 20px;
}
.help-start ol {
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0,1fr));
  gap: 10px;
  list-style: none;
}
.help-start li {
  min-width: 0;
  display: grid;
  grid-template-columns: 34px minmax(0,1fr);
  gap: 9px;
  padding: 13px;
  border: 1px solid rgba(var(--accent-rgb), .16);
  border-radius: 15px;
  background: rgba(var(--accent-rgb), .025);
}
.help-start li > b {
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(var(--accent-rgb), .28);
  border-radius: 10px;
  color: var(--accent);
  font-family: var(--nd-terminal-font, ui-monospace, monospace);
}
.help-start li span { min-width: 0; display: grid; gap: 5px; }
.help-start li strong { color: #edf4f8; font-size: 11px; line-height: 1.25; }
.help-start li small { color: var(--muted); font-size: 9px; line-height: 1.45; }
.help-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap: 10px;
}
.help-grid article {
  position: relative;
  min-width: 0;
  padding: 15px 16px 15px 76px;
  border: 1px solid rgba(255,255,255,.075);
  border-radius: 16px;
  background: rgba(255,255,255,.022);
}
.help-grid article > b {
  position: absolute;
  top: 15px;
  left: 15px;
  width: 48px;
  min-height: 30px;
  display: grid;
  place-items: center;
  padding: 5px;
  border: 1px solid rgba(var(--accent-rgb), .22);
  border-radius: 9px;
  color: var(--accent);
  font-family: var(--nd-terminal-font, ui-monospace, monospace);
  font-size: 7px;
  letter-spacing: .08em;
}
.help-grid h4 { margin: 0 0 6px; color: #f0f5f8; font-size: 13px; }
.help-grid p,
.help-tips p { margin: 0; color: var(--muted); font-size: 10px; line-height: 1.55; }
.help-control-list {
  display: grid;
  grid-template-columns: repeat(4, minmax(0,1fr));
  gap: 10px;
}
.help-control-list > span {
  min-width: 0;
  display: grid;
  grid-template-columns: 44px minmax(0,1fr);
  gap: 10px;
  align-items: center;
  padding: 12px;
  border: 1px solid rgba(255,255,255,.07);
  border-radius: 14px;
  background: rgba(255,255,255,.018);
}
.help-control-list > span > b {
  min-height: 40px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(var(--accent-rgb), .25);
  border-radius: 11px;
  color: var(--accent);
  font-family: var(--nd-terminal-font, ui-monospace, monospace);
  font-size: 10px;
}
.help-control-list i { min-width: 0; display: grid; gap: 4px; font-style: normal; }
.help-control-list strong { font-size: 10px; }
.help-control-list small { color: var(--muted); font-size: 8px; line-height: 1.4; }
.help-tips {
  display: grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap: 10px;
}
.help-tips .help-section-heading { grid-column: 1 / -1; }
.help-tips p {
  padding: 13px 14px;
  border-left: 2px solid rgba(var(--accent-rgb), .42);
  background: rgba(var(--accent-rgb), .022);
}
.help-tips strong { color: #edf4f8; }
.help-footer {
  margin-top: 22px;
  padding-top: 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  border-top: 1px solid rgba(255,255,255,.075);
}
.help-footer span {
  color: var(--muted);
  font-family: var(--nd-terminal-font, ui-monospace, monospace);
  font-size: 7px;
  font-weight: 800;
  letter-spacing: .13em;
}
.help-footer button {
  min-width: 132px;
  min-height: 42px;
  border: 1px solid rgba(var(--accent-rgb), .35);
  border-radius: 12px;
  background: rgba(var(--accent-rgb), .07);
  color: var(--accent);
  font-size: 8px;
  font-weight: 900;
  letter-spacing: .14em;
  cursor: pointer;
}

/* Actual mobile containment. No oversized pseudo layer may alter inline geometry. */
@media (max-width: 899px) {
  html,
  body,
  #appScreen,
  .app-shell {
    width: 100%;
    max-width: 100%;
  }
  .app-shell {
    contain: inline-size;
  }
  .player-card {
    contain: inline-size layout paint;
    overflow: clip;
  }
  .player-card::before { display: none; }
  .player-primary,
  .player-secondary,
  .catalog-stage,
  .catalog-flipper,
  .catalog-face {
    min-width: 0;
    max-width: 100%;
    contain: inline-size layout paint;
  }
  .controls.transport-deck { overflow: clip; }
  .controls.transport-deck::before { inset: 0; }
  .catalog-signal-overlay:not(.is-active) { display: none !important; }
  .ambient { display: none; }
  .mix-rail-shell,
  .radio-rail-shell,
  .listen-later-section { overflow: clip; }
  .mix-rail,
  .radio-rail,
  .listen-later-rail {
    contain: inline-size layout paint;
    overscroll-behavior-inline: contain;
  }
}

@media (max-width: 700px) {
  .topbar-actions { gap: 5px; }
  .help-button { width: 38px; height: 38px; flex-basis: 38px; }
  .personal-launch-grid { gap: 10px; }
  .archive-launch,
  .personal-launch-grid .listening-log-launch {
    min-height: 92px;
    grid-template-columns: 58px minmax(0,1fr);
    padding: 15px 16px;
  }
  .archive-launch-mark,
  .personal-launch-grid .listening-log-launch-mark {
    width: 58px;
    height: 54px;
  }

  .status-strip.status-console {
    grid-template-columns: minmax(0, 1.08fr) minmax(92px, .82fr) minmax(116px, 1fr);
    min-height: 52px;
  }
  .status-console .status-pane { padding: 8px 9px; }
  .status-pane-title strong {
    max-width: 100%;
    font-size: 8px;
  }
  .status-pane-app { gap: 5px; }
  .app-version-row { gap: 2px 4px; }
  .app-version-label,
  .app-install-state { font-size: 5.8px; }
  .app-version-row strong { font-size: 9px; }
  .app-utility-actions { gap: 3px; flex-wrap: nowrap; }
  .utility-label-full { display: none; }
  .utility-label-short { display: inline; }
  .app-diagnostics-button {
    min-height: 27px;
    padding-inline: 6px;
    font-size: 5.5px;
  }
  .app-install-button {
    min-width: 29px;
    width: 29px;
    height: 27px;
    padding: 0;
  }
  .app-install-button span { display: none; }

  .help-sheet {
    top: max(5px, env(safe-area-inset-top));
    right: max(5px, env(safe-area-inset-right));
    bottom: max(5px, env(safe-area-inset-bottom));
    left: max(5px, env(safe-area-inset-left));
    width: calc(100dvw - 10px);
    padding: 16px;
    border-radius: 22px;
  }
  .help-signal-line { top: -16px; margin: -16px -16px 17px; }
  .help-header { gap: 10px; padding-bottom: 15px; }
  .help-header h2 { font-size: clamp(29px, 9vw, 38px); }
  .help-header span { font-size: 10px; }
  .help-close { width: 44px; height: 44px; flex-basis: 44px; }
  .help-start,
  .help-navigation,
  .help-controls,
  .help-tips { margin-top: 18px; }
  .help-start ol,
  .help-grid,
  .help-control-list,
  .help-tips { grid-template-columns: 1fr; }
  .help-start li { padding: 12px; }
  .help-grid article { padding: 14px 14px 14px 72px; }
  .help-tips .help-section-heading { grid-column: auto; }
  .help-footer { align-items: stretch; flex-direction: column; }
  .help-footer button { width: 100%; }
}

@media (max-width: 370px) {
  .brand-wrap { gap: 7px; }
  .brand-mark { width: 31px; height: 31px; }
  .nd-brand-wordmark { width: 94px; }
  .topbar { gap: 7px; }
  .topbar-actions { gap: 3px; }
  .help-button,
  .readability-mode-button,
  .layout-mode-button { width: 34px; height: 35px; flex-basis: 34px; }
  .status-strip.status-console {
    grid-template-columns: minmax(0, 1fr) minmax(82px, .8fr) minmax(104px, 1fr);
  }
  .status-console .status-pane { padding-inline: 7px; }
  .app-diagnostics-button { padding-inline: 5px; }
}

/* ND Play v0.5.45 · Mobile Width Lock
   A real phone runtime must stay mobile even when WebKit exposes a stale or desktop-like CSS viewport. */
html.nd-mobile-runtime {
  --nd-phone-inline: 100%;
  width: var(--nd-phone-inline) !important;
  min-width: 0 !important;
  max-width: var(--nd-phone-inline) !important;
  overflow-x: hidden !important;
  overscroll-behavior-x: none;
}
html.nd-mobile-runtime body {
  width: var(--nd-phone-inline) !important;
  min-width: 0 !important;
  max-width: var(--nd-phone-inline) !important;
  margin-inline: 0 !important;
  overflow-x: hidden !important;
  overscroll-behavior-x: none;
}
html.nd-mobile-runtime body::before,
html.nd-mobile-runtime body::after { max-width: var(--nd-phone-inline); }

html.nd-mobile-runtime #authScreen,
html.nd-mobile-runtime #appScreen,
html.nd-mobile-runtime .auth-shell,
html.nd-mobile-runtime .app-shell {
  width: var(--nd-phone-inline) !important;
  min-width: 0 !important;
  max-width: var(--nd-phone-inline) !important;
  margin-inline: 0 !important;
  overflow-x: hidden !important;
}
html.nd-mobile-runtime #appScreen.app-shell,
html.nd-mobile-runtime #appScreen.app-shell.layout-wide,
html.nd-mobile-runtime.readability-large #appScreen.app-shell,
html.nd-mobile-runtime.readability-large #appScreen.app-shell.layout-wide {
  width: var(--nd-phone-inline) !important;
  min-height: 100dvh;
  height: auto !important;
  max-height: none !important;
  padding: max(10px, env(safe-area-inset-top)) max(10px, env(safe-area-inset-right)) calc(14px + env(safe-area-inset-bottom)) max(10px, env(safe-area-inset-left));
  overflow: hidden visible !important;
  contain: none !important;
}

/* Do not allow a persisted desktop layout to survive on a physical phone. */
html.nd-mobile-runtime .app-shell.layout-wide .player-card,
html.nd-mobile-runtime .player-card {
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  display: flex !important;
  flex-direction: column !important;
  grid-template-columns: none !important;
  gap: 0 !important;
  padding: 12px;
  overflow-x: hidden !important;
  overflow-y: visible !important;
  contain: none !important;
  clip-path: inset(0 round 23px);
}
html.nd-mobile-runtime .player-card::before { display: none !important; }
html.nd-mobile-runtime .app-shell.layout-wide .player-primary,
html.nd-mobile-runtime .app-shell.layout-wide .player-secondary,
html.nd-mobile-runtime .player-primary,
html.nd-mobile-runtime .player-secondary {
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  padding-inline: 0 !important;
  border-inline: 0 !important;
  overflow-x: hidden !important;
  overflow-y: visible !important;
  touch-action: pan-y;
  overscroll-behavior: auto;
  contain: none !important;
}
html.nd-mobile-runtime .player-primary::-webkit-scrollbar,
html.nd-mobile-runtime .player-secondary::-webkit-scrollbar { display: none !important; }

/* Every structural flex/grid child may shrink. */
html.nd-mobile-runtime :is(
  .topbar, .topbar > *, .topbar-actions, .brand-wrap,
  .cover-cluster, .cover-cluster > *, .stream-info,
  .track-context-row, .track-copy, .track-identity-control, .track-identity-meta,
  .timeline, .time-row, .controls, .catalog-flip-button,
  .catalog-stage, .catalog-flipper, .catalog-face,
  .flow-button, .personal-launch-grid, .archive-launch, .listening-log-launch,
  .listen-later-section, .mixes-section, .radio-section,
  .mixes-header, .radio-header, .mixes-tools, .radio-tools,
  .status-strip, .status-pane
) {
  min-width: 0 !important;
  max-width: 100% !important;
}

/* Mobile header is compact even if the CSS viewport temporarily looks desktop-sized. */
html.nd-mobile-runtime .topbar {
  width: 100%;
  grid-template-columns: minmax(0, 1fr) auto !important;
  gap: 4px !important;
  min-height: 42px;
  margin-bottom: 10px;
  overflow: hidden;
}
html.nd-mobile-runtime .brand-wrap { gap: 6px; overflow: hidden; }
html.nd-mobile-runtime .brand-mark { width: 28px; height: 28px; flex: 0 0 28px; border-radius: 9px; }
html.nd-mobile-runtime .nd-brand-wordmark { width: 98px; max-width: 98px !important; }
html.nd-mobile-runtime .subtitle { display: none; }
html.nd-mobile-runtime .topbar-actions { gap: 3px; flex-wrap: nowrap; }
html.nd-mobile-runtime :is(.help-button, .readability-mode-button, .layout-mode-button) {
  width: 34px !important;
  height: 36px !important;
  flex: 0 0 34px !important;
}
html.nd-mobile-runtime .layout-mode-button { display: none !important; }
html.nd-mobile-runtime .user-button {
  min-width: 42px;
  max-width: 48px !important;
  min-height: 36px;
  gap: 0;
  padding: 4px 5px;
}
html.nd-mobile-runtime .user-avatar { width: 27px; height: 27px; flex: 0 0 27px; }
html.nd-mobile-runtime .user-button > span:nth-child(2),
html.nd-mobile-runtime .user-button svg { display: none; }

/* The three-part cover row uses fractions, never old fixed desktop widths. */
html.nd-mobile-runtime .cover-cluster {
  --volume-width: 32px;
  --volume-length: 76px;
  width: 100% !important;
  grid-template-columns: 32px minmax(0, 1fr) minmax(0, 1fr) !important;
  gap: 6px !important;
  margin: 0 !important;
  overflow: hidden;
}
html.nd-mobile-runtime .cover-cluster .volume-rail {
  width: 32px;
  height: auto;
  min-height: 0;
  padding: 7px 2px;
}
html.nd-mobile-runtime .cover-cluster .cover-stage,
html.nd-mobile-runtime .cover-cluster .stream-info {
  width: 100% !important;
  height: auto !important;
  min-width: 0 !important;
  min-height: 0 !important;
  max-width: 100% !important;
  aspect-ratio: 1 / 1;
}
html.nd-mobile-runtime .stream-info { padding: 8px; border-radius: 15px; overflow: hidden; }
html.nd-mobile-runtime .stream-codec { font-size: 18px; }
html.nd-mobile-runtime .stream-metric { grid-template-columns: 28px minmax(0,1fr); gap: 4px; padding: 4px 0; }
html.nd-mobile-runtime .stream-metric > span { font-size: 4.7px; }
html.nd-mobile-runtime .stream-metric > b { min-width: 0; font-size: 6.6px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

html.nd-mobile-runtime .track-copy { width: 100%; margin: 12px 0 8px; overflow: hidden; }
html.nd-mobile-runtime .track-identity-control { width: 100%; overflow: hidden; }
html.nd-mobile-runtime .vfd-line,
html.nd-mobile-runtime .vfd-glyph { max-width: 100%; }
html.nd-mobile-runtime .timeline,
html.nd-mobile-runtime .time-row,
html.nd-mobile-runtime .controls.transport-deck,
html.nd-mobile-runtime .catalog-flip-button { width: 100% !important; }
html.nd-mobile-runtime .controls.transport-deck {
  grid-template-columns: minmax(96px, 1.45fr) repeat(3, minmax(44px, .7fr));
  gap: 6px;
  overflow: hidden !important;
}

/* The document owns vertical scrolling; catalog layers never become a second viewport. */
html.nd-mobile-runtime :is(.catalog-stage, .catalog-flipper, .catalog-face) {
  width: 100% !important;
  height: auto;
  max-height: none !important;
  overflow-x: hidden !important;
  overflow-y: visible !important;
  contain: none !important;
}
html.nd-mobile-runtime .catalog-stage.is-settled .catalog-face[aria-hidden="true"] { display: none !important; }
html.nd-mobile-runtime .catalog-signal-overlay:not(.is-active) { display: none !important; }
html.nd-mobile-runtime .catalog-flip-button {
  position: relative !important;
  inset: auto !important;
  margin-inline: 0 !important;
  transform: none;
}

html.nd-mobile-runtime .personal-launch-grid {
  width: 100%;
  grid-template-columns: minmax(0,1fr) !important;
  grid-auto-rows: auto;
  gap: 10px;
  overflow: hidden;
}
html.nd-mobile-runtime :is(.archive-launch, .personal-launch-grid .listening-log-launch) {
  width: 100% !important;
  height: auto !important;
  min-height: 92px;
  grid-template-columns: 58px minmax(0,1fr) !important;
  padding: 15px 16px;
  overflow: hidden;
}

/* Horizontal rails are isolated scrollports. Their content must never enlarge the page. */
html.nd-mobile-runtime :is(.mix-rail-shell, .radio-rail-shell, .listen-later-section) {
  position: relative;
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
  overflow: hidden !important;
  clip-path: inset(0);
  contain: paint;
}
html.nd-mobile-runtime :is(.mix-rail, .radio-rail, .listen-later-rail) {
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  overscroll-behavior-inline: contain;
  -webkit-overflow-scrolling: touch;
}

/* Dialogs also use the physical phone inline size rather than 100vw. */
html.nd-mobile-runtime :is(.queue-sheet, .help-sheet) {
  max-width: calc(var(--nd-phone-inline) - 10px) !important;
}
html.nd-mobile-runtime .queue-sheet { width: calc(var(--nd-phone-inline) - 10px) !important; }
html.nd-mobile-runtime .help-sheet { width: calc(var(--nd-phone-inline) - 10px) !important; }

/* Last-resort WebKit barrier: visible transforms may paint, but cannot become root scroll area. */
html.nd-mobile-runtime :is(
  #appScreen, .player-card, .player-primary, .player-secondary,
  .catalog-stage, .catalog-face, .personal-launch-grid,
  .mixes-section, .radio-section, .status-strip
) {
  overflow-x: hidden !important;
  -webkit-mask-image: -webkit-radial-gradient(white, black);
}

/* ND Play v0.5.46 · Single Mobile Scroll
   `hidden` on one overflow axis turns `visible` on the other axis into `auto`.
   Use `clip` for inline containment so only the document owns vertical scrolling. */
@media (max-width: 899px) {
  html {
    overflow-x: clip !important;
    overflow-y: auto !important;
  }
  body {
    height: auto !important;
    min-height: 100dvh;
    overflow-x: clip !important;
    overflow-y: visible !important;
  }
  #appScreen,
  .app-shell,
  .player-card,
  .player-primary,
  .player-secondary,
  .catalog-stage,
  .catalog-flipper,
  .catalog-face {
    height: auto !important;
    max-height: none !important;
    overflow-x: clip !important;
    overflow-y: visible !important;
    overscroll-behavior-y: auto;
    scrollbar-width: none !important;
  }
  :is(
    #appScreen, .app-shell, .player-card, .player-primary, .player-secondary,
    .catalog-stage, .catalog-flipper, .catalog-face
  )::-webkit-scrollbar {
    display: none !important;
  }
}

html.nd-mobile-runtime {
  overflow-x: clip !important;
  overflow-y: auto !important;
}
html.nd-mobile-runtime body {
  height: auto !important;
  min-height: 100dvh;
  overflow-x: clip !important;
  overflow-y: visible !important;
}
html.nd-mobile-runtime #appScreen.app-shell,
html.nd-mobile-runtime #appScreen.app-shell.layout-wide,
html.nd-mobile-runtime.readability-large #appScreen.app-shell,
html.nd-mobile-runtime.readability-large #appScreen.app-shell.layout-wide,
html.nd-mobile-runtime .player-card,
html.nd-mobile-runtime .app-shell.layout-wide .player-card,
html.nd-mobile-runtime .player-primary,
html.nd-mobile-runtime .player-secondary,
html.nd-mobile-runtime .app-shell.layout-wide .player-primary,
html.nd-mobile-runtime .app-shell.layout-wide .player-secondary,
html.nd-mobile-runtime .catalog-stage,
html.nd-mobile-runtime .catalog-flipper,
html.nd-mobile-runtime .catalog-face {
  height: auto !important;
  max-height: none !important;
  overflow-x: clip !important;
  overflow-y: visible !important;
  overscroll-behavior-y: auto;
  scrollbar-width: none !important;
}
html.nd-mobile-runtime :is(
  #appScreen, .player-card, .player-primary, .player-secondary,
  .catalog-stage, .catalog-flipper, .catalog-face, .personal-launch-grid,
  .mixes-section, .radio-section, .status-strip
) {
  overflow-x: clip !important;
}
html.nd-mobile-runtime :is(
  #appScreen, .player-card, .player-primary, .player-secondary,
  .catalog-stage, .catalog-flipper, .catalog-face
)::-webkit-scrollbar {
  display: none !important;
}

/* ND Play v0.5.47 · Viewport Fit & Compact Routes
   The live layout viewport owns inline size. `screen.width` must never become
   an explicit application width because Safari can expose a wider screen box. */
@media (max-width: 899px) {
  html,
  body,
  #appScreen,
  .app-shell {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    margin-inline: 0 !important;
  }
}

html.nd-mobile-runtime {
  --nd-phone-inline: 100%;
  width: 100% !important;
  max-width: 100% !important;
}
html.nd-mobile-runtime body,
html.nd-mobile-runtime #authScreen,
html.nd-mobile-runtime #appScreen,
html.nd-mobile-runtime .auth-shell,
html.nd-mobile-runtime .app-shell,
html.nd-mobile-runtime #appScreen.app-shell,
html.nd-mobile-runtime #appScreen.app-shell.layout-wide,
html.nd-mobile-runtime.readability-large #appScreen.app-shell,
html.nd-mobile-runtime.readability-large #appScreen.app-shell.layout-wide {
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
  margin-inline: 0 !important;
}

html.nd-mobile-runtime .personal-launch-grid {
  gap: 8px;
  margin-top: 8px;
}
html.nd-mobile-runtime :is(.archive-launch, .personal-launch-grid .listening-log-launch),
html.nd-mobile-runtime.readability-large :is(.archive-launch, .personal-launch-grid .listening-log-launch) {
  min-height: 68px !important;
  grid-template-columns: 44px minmax(0, 1fr) !important;
  gap: 10px;
  padding: 9px 13px;
  border-radius: 16px;
}
html.nd-mobile-runtime :is(.archive-launch-mark, .personal-launch-grid .listening-log-launch-mark) {
  width: 44px !important;
  height: 42px !important;
}
html.nd-mobile-runtime .archive-launch-mark {
  gap: 3px;
  padding: 7px;
  border-radius: 12px;
}
html.nd-mobile-runtime .personal-launch-grid .listening-log-launch-mark {
  padding-bottom: 7px;
  border-radius: 12px;
}
html.nd-mobile-runtime :is(.archive-launch, .personal-launch-grid .listening-log-launch) strong {
  font-size: 15px !important;
}
html.nd-mobile-runtime.readability-large :is(.archive-launch, .personal-launch-grid .listening-log-launch) strong {
  font-size: 16px !important;
}

@media (max-width: 360px) {
  html.nd-mobile-runtime :is(.archive-launch, .personal-launch-grid .listening-log-launch),
  html.nd-mobile-runtime.readability-large :is(.archive-launch, .personal-launch-grid .listening-log-launch) {
    min-height: 64px !important;
    grid-template-columns: 40px minmax(0, 1fr) !important;
    gap: 9px;
    padding: 8px 11px;
  }
  html.nd-mobile-runtime :is(.archive-launch-mark, .personal-launch-grid .listening-log-launch-mark) {
    width: 40px !important;
    height: 39px !important;
  }
}

/* ND Play v0.5.49 · Help Geometry & Codec Signal
   Keep the help badge in normal flow. This final override intentionally sits
   after the older absolute-positioned help rules used by previous layouts. */
.help-grid article {
  display: flex !important;
  flex-direction: column;
  align-items: flex-start;
  gap: 0;
  padding: 15px 16px !important;
}
.help-grid article > b {
  position: static !important;
  inset: auto !important;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  width: auto !important;
  max-width: 100%;
  min-width: 48px;
  min-height: 29px;
  margin: 0 0 10px;
  padding: 5px 9px;
  white-space: normal;
  overflow-wrap: anywhere;
  text-align: left;
  line-height: 1.25;
}
.help-grid article > h4 {
  margin: 0 0 7px !important;
}
.help-grid article > p {
  margin: 0 !important;
}

/* The codec is a restrained signal badge: strong type, translucent light and
   a nearly square hairline frame. Opacity stays animation-controlled. */
.stream-codec {
  display: inline-flex;
  align-self: flex-start;
  align-items: center;
  width: fit-content;
  max-width: 100%;
  padding: 5px 8px 4px;
  border: 1px solid rgba(var(--accent-rgb), .27);
  border-radius: 3px;
  background: rgba(var(--accent-rgb), .028);
  background-image: none;
  color: rgba(var(--accent-rgb), .84);
  -webkit-text-fill-color: rgba(var(--accent-rgb), .84);
  font-weight: 950;
  letter-spacing: .055em;
  line-height: 1;
  text-shadow:
    0 0 7px rgba(var(--accent-rgb), .55),
    0 0 18px rgba(var(--accent-rgb), .22);
  filter: none;
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.014),
    0 0 12px rgba(var(--accent-rgb), .09);
}

html.nd-mobile-runtime .stream-codec {
  padding: 4px 7px 3px;
  border-radius: 2px;
  font-size: 17px;
}

/* ND Play v0.5.50 · Unified Stream Console
   One permanent screen: mode, codec and four readable live values. */
.stream-info {
  cursor: default;
}
.stream-compact {
  justify-content: flex-start;
}
.stream-codec {
  margin-top: 8px;
  padding: 6px 9px 5px;
  font-size: clamp(25px, 2.2vw, 34px);
}
.stream-metrics {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px 11px;
  width: 100%;
  margin-top: auto;
}
.stream-metric {
  position: relative;
  display: flex;
  min-width: 0;
  padding: 0 !important;
  border: 0 !important;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-end;
  gap: 4px;
}
.stream-metric::before,
.stream-metric::after {
  display: none !important;
  content: none !important;
}
.stream-metric > span {
  color: rgba(var(--accent-rgb), .52);
  font-size: 7.4px;
  font-weight: 950;
  letter-spacing: .16em;
  line-height: 1;
  text-shadow: 0 0 8px rgba(var(--accent-rgb), .16);
}
.stream-metric > b,
.stream-metric:last-child > b {
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
  background: none;
  color: rgba(var(--accent-rgb), .86);
  -webkit-text-fill-color: rgba(var(--accent-rgb), .86);
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 12.5px;
  font-weight: 950;
  line-height: 1.05;
  letter-spacing: .015em;
  text-shadow:
    0 0 7px rgba(var(--accent-rgb), .34),
    0 0 15px rgba(var(--accent-rgb), .14);
  filter: none;
}
.stream-pulse {
  display: none !important;
}
.stream-info.stream-telemetry-armed.telemetry-buffer-on .stream-metric[data-stream-metric="buffer"] {
  opacity: 1;
  transform: translateX(0);
  transition: opacity 150ms ease, transform 200ms cubic-bezier(.2,.8,.2,1);
}

html.readability-large .stream-metric > b {
  font-size: 13.5px;
}

html.nd-mobile-runtime .stream-info {
  padding: 9px;
}
html.nd-mobile-runtime .stream-codec {
  margin-top: 7px;
  padding: 5px 8px 4px;
  font-size: 20px;
}
html.nd-mobile-runtime .stream-metrics {
  gap: 10px 7px;
}
html.nd-mobile-runtime .stream-metric {
  gap: 3px;
}
html.nd-mobile-runtime .stream-metric > span {
  font-size: 5.4px;
  letter-spacing: .13em;
}
html.nd-mobile-runtime .stream-metric > b,
html.nd-mobile-runtime .stream-metric:last-child > b {
  font-size: 9.2px;
  letter-spacing: 0;
}
html.nd-mobile-runtime.readability-large .stream-metric > b {
  font-size: 9.8px;
}

@media (max-width: 370px) {
  html.nd-mobile-runtime .stream-info { padding: 8px; }
  html.nd-mobile-runtime .stream-codec { margin-top: 6px; font-size: 18px; }
  html.nd-mobile-runtime .stream-metrics { gap: 8px 6px; }
  html.nd-mobile-runtime .stream-metric > b,
  html.nd-mobile-runtime .stream-metric:last-child > b { font-size: 8.4px; }
}

/* ND Play v0.5.51 · Brand Signature & Stream Mode
   Reveal the company line below the mobile wordmark and separate delivery
   mode from bitrate so four-digit quality values always have room. */
.brand-wrap > div:last-child {
  display: flex;
  min-width: 0;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
}
.brand-wrap .company-signature {
  display: flex !important;
  align-items: center;
  gap: 5px;
  max-width: none;
  margin-top: 3px;
  overflow: visible;
  color: rgba(var(--accent-rgb), .61);
  font-family: var(--nd-mini-font, ui-monospace, monospace);
  font-size: 6.3px;
  font-style: normal;
  font-weight: 900;
  letter-spacing: .095em;
  line-height: 1;
  text-transform: uppercase;
  text-overflow: clip;
  white-space: nowrap;
  text-shadow:
    0 0 7px rgba(var(--accent-rgb), .32),
    0 0 15px rgba(var(--accent-rgb), .12);
}
.brand-wrap .company-signature::before {
  content: "";
  width: 11px;
  height: 1px;
  flex: 0 0 11px;
  background: linear-gradient(90deg, var(--accent), rgba(var(--accent-rgb), .18));
  box-shadow: 0 0 7px rgba(var(--accent-rgb), .34);
}

.stream-codec {
  margin-top: 0;
}
.stream-mode-line {
  display: flex;
  align-items: baseline;
  gap: 7px;
  margin-top: 8px;
  min-width: 0;
  font-family: var(--nd-mini-font, ui-monospace, monospace);
  line-height: 1;
}
.stream-mode-line > span {
  color: rgba(var(--accent-rgb), .48);
  font-size: 7px;
  font-weight: 950;
  letter-spacing: .15em;
}
.stream-mode-line > b {
  color: rgba(var(--accent-rgb), .87);
  font-size: 9px;
  font-weight: 950;
  letter-spacing: .10em;
  text-shadow:
    0 0 7px rgba(var(--accent-rgb), .42),
    0 0 14px rgba(var(--accent-rgb), .16);
}
.stream-metrics {
  gap: 11px 12px;
}
.stream-metric > b,
.stream-metric:last-child > b {
  font-size: 14px;
  font-variant-numeric: tabular-nums;
}

html.nd-mobile-runtime .brand-wrap > div:last-child {
  width: 98px;
  max-width: 98px;
}
html.nd-mobile-runtime .brand-wrap .company-signature {
  display: block !important;
  max-width: 98px;
  margin-top: 3px;
  overflow: hidden;
  font-size: 4.7px;
  letter-spacing: .045em;
  text-overflow: clip;
}
html.nd-mobile-runtime .brand-wrap .company-signature::before {
  display: none;
}
html.nd-mobile-runtime .stream-codec {
  margin-top: 0;
}
html.nd-mobile-runtime .stream-mode-line {
  gap: 5px;
  margin-top: 6px;
}
html.nd-mobile-runtime .stream-mode-line > span {
  font-size: 5.2px;
  letter-spacing: .12em;
}
html.nd-mobile-runtime .stream-mode-line > b {
  font-size: 7.4px;
  letter-spacing: .075em;
}
html.nd-mobile-runtime .stream-metrics {
  gap: 9px 8px;
}
html.nd-mobile-runtime .stream-metric > b,
html.nd-mobile-runtime .stream-metric:last-child > b {
  font-size: 11.3px;
}

@media (max-width: 370px) {
  html.nd-mobile-runtime .brand-wrap > div:last-child {
    width: 90px;
    max-width: 90px;
  }
  html.nd-mobile-runtime .nd-brand-wordmark {
    width: 90px;
    max-width: 90px !important;
  }
  html.nd-mobile-runtime .brand-wrap .company-signature {
    max-width: 90px;
    font-size: 4.35px;
    letter-spacing: .025em;
  }
  html.nd-mobile-runtime .stream-mode-line { margin-top: 5px; }
  html.nd-mobile-runtime .stream-metric > b,
  html.nd-mobile-runtime .stream-metric:last-child > b { font-size: 10.4px; }
}

/* ND Play v0.5.52 · Intelligent Signal States & Synchronized Handoff
   The existing artwork acquisition and signal-lock effect remains untouched.
   Only the neighboring console follows the same track handoff rhythm. */
.stream-info {
  transition:
    border-color 220ms ease,
    box-shadow 260ms ease,
    opacity 180ms ease,
    transform 220ms cubic-bezier(.2,.8,.2,1),
    filter 180ms ease;
}
.stream-info::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  border-radius: inherit;
  pointer-events: none;
  opacity: .28;
  box-shadow: inset 0 0 24px rgba(var(--accent-rgb), .045);
  transition: opacity 220ms ease, box-shadow 260ms ease, background 260ms ease;
}
.stream-quality-beacon {
  width: 5px;
  height: 5px;
  flex: 0 0 5px;
  border-radius: 50%;
  background: rgba(var(--accent-rgb), .72);
  box-shadow: 0 0 7px rgba(var(--accent-rgb), .44);
  transition: background 180ms ease, box-shadow 220ms ease, opacity 180ms ease, transform 180ms ease;
}

.stream-info[data-quality-status="stable"] {
  border-color: rgba(103, 239, 194, .36);
  box-shadow:
    inset 0 1px rgba(255,255,255,.035),
    0 13px 31px rgba(0,0,0,.14),
    0 0 24px rgba(103,239,194,.06);
}
.stream-info[data-quality-status="stable"]::after {
  opacity: .52;
  background: radial-gradient(circle at 84% 14%, rgba(103,239,194,.075), transparent 48%);
  box-shadow: inset 0 0 25px rgba(103,239,194,.035);
}
.stream-info[data-quality-status="stable"] .stream-quality-beacon {
  background: #67efc2;
  box-shadow: 0 0 7px rgba(103,239,194,.72), 0 0 15px rgba(103,239,194,.26);
  animation: ndplay-quality-stable-breathe 2.8s ease-in-out infinite;
}

.stream-info[data-quality-status="buffering"],
.stream-info[data-quality-status="reconnecting"] {
  border-color: rgba(255, 190, 92, .52);
  box-shadow:
    inset 0 1px rgba(255,255,255,.035),
    0 13px 31px rgba(0,0,0,.14),
    0 0 27px rgba(255,190,92,.10);
}
.stream-info[data-quality-status="buffering"]::after,
.stream-info[data-quality-status="reconnecting"]::after {
  opacity: .72;
  background: linear-gradient(112deg, transparent 18%, rgba(255,190,92,.075) 48%, transparent 76%);
  box-shadow: inset 0 0 27px rgba(255,190,92,.045);
}
.stream-info[data-quality-status="buffering"] .stream-quality-beacon,
.stream-info[data-quality-status="reconnecting"] .stream-quality-beacon {
  background: #ffbe5c;
  box-shadow: 0 0 8px rgba(255,190,92,.82), 0 0 17px rgba(255,190,92,.32);
  animation: ndplay-quality-waiting-pulse .82s ease-in-out infinite alternate;
}
.stream-info[data-quality-status="buffering"] .stream-mode-line > b,
.stream-info[data-quality-status="reconnecting"] .stream-mode-line > b {
  color: #ffca72;
  text-shadow: 0 0 9px rgba(255,190,92,.34);
}

.stream-info[data-quality-status="connection-lost"] {
  border-color: rgba(255, 104, 126, .58);
  box-shadow:
    inset 0 1px rgba(255,255,255,.025),
    0 13px 31px rgba(0,0,0,.16),
    0 0 28px rgba(255,104,126,.11);
}
.stream-info[data-quality-status="connection-lost"]::after {
  opacity: .72;
  background: radial-gradient(circle at 84% 14%, rgba(255,104,126,.11), transparent 48%);
  box-shadow: inset 0 0 28px rgba(255,104,126,.055);
}
.stream-info[data-quality-status="connection-lost"] .stream-quality-beacon {
  background: #ff687e;
  box-shadow: 0 0 9px rgba(255,104,126,.86), 0 0 18px rgba(255,104,126,.34);
  animation: ndplay-quality-lost-pulse 1.45s steps(2,end) infinite;
}
.stream-info[data-quality-status="connection-lost"] .stream-mode-line > b {
  color: #ff8b9b;
  text-shadow: 0 0 9px rgba(255,104,126,.36);
}

.stream-info[data-quality-status="paused"] .stream-quality-beacon,
.stream-info[data-quality-status="standby"] .stream-quality-beacon,
.stream-info[data-quality-status="complete"] .stream-quality-beacon {
  opacity: .40;
  transform: scale(.82);
  animation: none;
}
.stream-info[data-quality-status="seeking"] .stream-quality-beacon {
  animation: ndplay-quality-seeking-pulse .54s ease-in-out infinite alternate;
}

/* The cover keeps its original Signal Lock sequence. The console simply fades
   with the existing card handoff and boots its own values after artwork lock. */
.player-card.track-transition-out .stream-info {
  opacity: .28;
  transform: translateY(4px) scale(.982);
  filter: saturate(.68);
}
.player-card.track-transition-in .stream-info {
  animation: ndplay-stream-console-handoff 440ms 35ms cubic-bezier(.16,1,.3,1) both;
}
body.track-switching .stream-quality-beacon {
  animation-play-state: paused !important;
}

@keyframes ndplay-quality-stable-breathe {
  0%, 100% { opacity: .66; transform: scale(.90); }
  50% { opacity: 1; transform: scale(1.06); }
}
@keyframes ndplay-quality-waiting-pulse {
  from { opacity: .46; transform: scale(.76); }
  to { opacity: 1; transform: scale(1.16); }
}
@keyframes ndplay-quality-lost-pulse {
  0%, 42% { opacity: 1; }
  43%, 100% { opacity: .34; }
}
@keyframes ndplay-quality-seeking-pulse {
  from { opacity: .44; transform: translateX(-1px) scale(.82); }
  to { opacity: 1; transform: translateX(1px) scale(1.08); }
}
@keyframes ndplay-stream-console-handoff {
  from { opacity: .20; transform: translateY(-4px) scale(1.012); filter: saturate(.72); }
  to { opacity: 1; transform: none; filter: none; }
}

html.nd-mobile-runtime .stream-quality-beacon {
  width: 4px;
  height: 4px;
  flex-basis: 4px;
}

@media (prefers-reduced-motion: reduce) {
  .stream-quality-beacon,
  .player-card.track-transition-in .stream-info {
    animation: none !important;
  }
  .player-card.track-transition-out .stream-info,
  .player-card.track-transition-in .stream-info {
    opacity: 1;
    transform: none;
    filter: none;
  }
}

/* ND Play v0.5.54 · Current Track Quick Actions
   The title gets a compact command entry point while the original artwork
   Signal Lock and its album-cover interaction remain unchanged. */
.track-title-display {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
  gap: 9px;
  -webkit-touch-callout: none;
  user-select: none;
  touch-action: pan-y;
}
.track-copy .vfd-track-title {
  min-width: 0;
}
.track-quick-actions-button {
  width: 35px;
  height: 35px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 3px;
  flex: 0 0 35px;
  margin-top: 3px;
  padding: 0;
  border: 1px solid rgba(var(--accent-rgb), .27);
  border-radius: 11px;
  background:
    radial-gradient(circle at 75% 20%, rgba(var(--accent-rgb), .12), transparent 48%),
    rgba(10, 16, 23, .78);
  color: var(--accent);
  box-shadow: inset 0 1px rgba(255,255,255,.035), 0 0 14px rgba(var(--accent-rgb), .035);
  cursor: pointer;
  transition: border-color 160ms ease, background 160ms ease, box-shadow 160ms ease, opacity 160ms ease, transform 140ms ease;
}
.track-quick-actions-button i {
  width: 3px;
  height: 3px;
  display: block;
  border-radius: 50%;
  background: currentColor;
  box-shadow: 0 0 6px rgba(var(--accent-rgb), .64);
}
.track-quick-actions-button:hover,
.track-quick-actions-button:focus-visible,
.track-quick-actions-button[aria-expanded="true"] {
  border-color: rgba(var(--accent-rgb), .58);
  background: rgba(var(--accent-rgb), .10);
  box-shadow: 0 0 17px rgba(var(--accent-rgb), .10), inset 0 0 13px rgba(var(--accent-rgb), .05);
  outline: none;
}
.track-quick-actions-button:active { transform: scale(.94); }
.track-quick-actions-button:disabled {
  opacity: .22;
  cursor: default;
  box-shadow: none;
}

.track-quick-actions-panel {
  position: fixed;
  inset: 0;
  z-index: 47;
  visibility: hidden;
  pointer-events: none;
}
.track-quick-actions-panel:not(.open) { content-visibility: hidden; }
.track-quick-actions-panel.open {
  visibility: visible;
  pointer-events: auto;
  content-visibility: visible;
}
.track-quick-actions-backdrop {
  position: absolute;
  inset: 0;
  width: 100%;
  padding: 0;
  border: 0;
  background: rgba(2, 5, 9, .62);
  opacity: 0;
  backdrop-filter: blur(8px) saturate(.76);
  -webkit-backdrop-filter: blur(8px) saturate(.76);
  transition: opacity 190ms ease;
}
.track-quick-actions-panel.open .track-quick-actions-backdrop { opacity: 1; }
.track-quick-actions-sheet {
  position: absolute;
  right: 10px;
  bottom: max(10px, env(safe-area-inset-bottom));
  left: 10px;
  width: min(calc(100% - 20px), 460px);
  max-height: calc(100dvh - max(20px, env(safe-area-inset-top)) - max(20px, env(safe-area-inset-bottom)));
  margin: 0 auto;
  padding: 17px;
  overflow: auto;
  overscroll-behavior: contain;
  border: 1px solid rgba(var(--accent-rgb), .38);
  border-radius: 23px;
  background:
    radial-gradient(circle at 100% 0%, rgba(var(--accent-rgb), .16), transparent 43%),
    linear-gradient(180deg, rgba(17, 23, 31, .99), rgba(7, 11, 17, .99));
  box-shadow:
    0 30px 90px rgba(0, 0, 0, .68),
    0 0 38px rgba(var(--accent-rgb), .09),
    inset 0 1px rgba(255, 255, 255, .05);
  opacity: 0;
  transform: translateY(24px) scale(.985);
  transition: opacity 170ms ease, transform 235ms cubic-bezier(.16, 1, .3, 1);
}
.track-quick-actions-panel.open .track-quick-actions-sheet {
  opacity: 1;
  transform: none;
}
.track-quick-actions-signal {
  position: absolute;
  top: 0;
  right: 25px;
  left: 25px;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--accent), transparent);
  box-shadow: 0 0 14px rgba(var(--accent-rgb), .66);
}
.track-quick-actions-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 13px;
  padding: 2px 1px 14px;
  border-bottom: 1px solid rgba(var(--accent-rgb), .13);
}
.track-quick-actions-header > div { min-width: 0; }
.track-quick-actions-header p {
  margin: 0 0 5px;
  color: rgba(var(--accent-rgb), .74);
  font-family: var(--nd-mini-font, ui-monospace, monospace);
  font-size: 7px;
  font-weight: 950;
  letter-spacing: .15em;
}
.track-quick-actions-header h2,
.track-quick-actions-header span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.track-quick-actions-header h2 {
  margin: 0;
  color: #eff7f8;
  font-family: var(--nd-display-font, ui-sans-serif, sans-serif);
  font-size: 21px;
  font-weight: 790;
  letter-spacing: -.02em;
}
.track-quick-actions-header span {
  display: block;
  margin-top: 5px;
  color: rgba(202, 211, 224, .55);
  font-size: 10px;
  font-weight: 620;
}
.track-quick-actions-close {
  width: 40px;
  height: 40px;
  flex: 0 0 40px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 1px solid rgba(var(--accent-rgb), .25);
  border-radius: 13px;
  background: rgba(var(--accent-rgb), .045);
  color: rgba(231, 239, 244, .75);
  cursor: pointer;
}
.track-quick-actions-close svg {
  width: 18px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-width: 1.6;
}
.track-quick-actions-list {
  display: grid;
  gap: 4px;
  padding: 8px 0 5px;
}
.track-quick-actions-list > button {
  width: 100%;
  min-height: 55px;
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr) 20px;
  align-items: center;
  gap: 11px;
  padding: 7px 8px 7px 6px;
  border: 1px solid transparent;
  border-radius: 14px;
  background: transparent;
  color: inherit;
  text-align: left;
  cursor: pointer;
  transition: border-color 150ms ease, background 150ms ease, transform 130ms ease, opacity 150ms ease;
}
.track-quick-actions-list > button:hover,
.track-quick-actions-list > button:focus-visible {
  border-color: rgba(var(--accent-rgb), .18);
  background: rgba(var(--accent-rgb), .055);
  outline: none;
}
.track-quick-actions-list > button:active { transform: scale(.985); }
.track-quick-actions-list > button > i {
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(var(--accent-rgb), .25);
  border-radius: 11px;
  background: rgba(var(--accent-rgb), .045);
  color: var(--accent);
  font-family: var(--nd-mini-font, ui-monospace, monospace);
  font-size: 16px;
  font-style: normal;
  font-weight: 850;
  text-shadow: 0 0 8px rgba(var(--accent-rgb), .42);
}
.track-quick-actions-list > button > span {
  min-width: 0;
  display: grid;
  gap: 4px;
}
.track-quick-actions-list > button strong,
.track-quick-actions-list > button small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.track-quick-actions-list > button strong {
  color: rgba(238, 245, 248, .94);
  font-size: 10.5px;
  font-weight: 850;
  letter-spacing: .075em;
}
.track-quick-actions-list > button small {
  color: rgba(196, 206, 219, .52);
  font-size: 8.5px;
  font-weight: 560;
}
.track-quick-actions-list > button > b {
  color: rgba(var(--accent-rgb), .31);
  font-family: var(--nd-mini-font, ui-monospace, monospace);
  font-size: 6.5px;
  font-weight: 900;
  letter-spacing: .08em;
  text-align: right;
}
.track-quick-actions-list > button.is-active {
  border-color: rgba(var(--accent-rgb), .28);
  background: linear-gradient(90deg, rgba(var(--accent-rgb), .075), transparent 82%);
}
.track-quick-actions-list > button.is-active > i {
  border-color: rgba(var(--accent-rgb), .52);
  background: rgba(var(--accent-rgb), .10);
  box-shadow: 0 0 15px rgba(var(--accent-rgb), .08);
}
.track-quick-actions-list > button:disabled {
  opacity: .28;
  cursor: default;
  transform: none;
}
.track-quick-actions-hint {
  display: flex;
  align-items: center;
  gap: 7px;
  margin: 3px 3px 0;
  padding-top: 10px;
  border-top: 1px solid rgba(255,255,255,.055);
  color: rgba(194, 204, 216, .43);
  font-size: 7.5px;
  font-weight: 620;
  line-height: 1.35;
}
.track-quick-actions-hint i {
  width: 5px;
  height: 5px;
  flex: 0 0 5px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 7px rgba(var(--accent-rgb), .52);
}

@media (max-width: 430px) {
  .track-title-display { gap: 7px; }
  .track-quick-actions-button {
    width: 31px;
    height: 31px;
    flex-basis: 31px;
    margin-top: 2px;
    border-radius: 10px;
  }
  .track-quick-actions-sheet {
    right: 7px;
    bottom: max(7px, env(safe-area-inset-bottom));
    left: 7px;
    width: min(calc(100% - 14px), 460px);
    padding: 14px;
    border-radius: 21px;
  }
  .track-quick-actions-header { padding-bottom: 12px; }
  .track-quick-actions-header h2 { font-size: 19px; }
  .track-quick-actions-list > button {
    min-height: 52px;
    grid-template-columns: 35px minmax(0, 1fr) 18px;
    gap: 9px;
    padding-inline: 4px 5px;
  }
  .track-quick-actions-list > button > i {
    width: 34px;
    height: 34px;
  }
  .track-quick-actions-list > button strong { font-size: 9.5px; }
  .track-quick-actions-list > button small { font-size: 7.8px; }
}

@media (prefers-reduced-motion: reduce) {
  .track-quick-actions-backdrop,
  .track-quick-actions-sheet,
  .track-quick-actions-button,
  .track-quick-actions-list > button {
    transition: none !important;
  }
}

/* ND Play v0.5.60 · One-time Update Ready Notice */
body.version-handoff-active { overflow: hidden !important; }
.version-handoff {
  position: fixed;
  top: var(--version-service-top, 0px);
  left: var(--version-service-left, 0px);
  z-index: 110;
  display: grid;
  place-items: center;
  width: var(--version-service-width, 100vw);
  height: var(--version-service-height, 100dvh);
  min-height: 0;
  padding:
    max(10px, env(safe-area-inset-top))
    max(9px, env(safe-area-inset-right))
    max(10px, env(safe-area-inset-bottom))
    max(9px, env(safe-area-inset-left));
  overflow: auto;
  overscroll-behavior: contain;
  background:
    radial-gradient(circle at 50% 34%, rgba(var(--accent-rgb), .105), transparent 36%),
    linear-gradient(180deg, rgba(4, 8, 13, .985), rgba(2, 5, 9, .995));
  opacity: 0;
  transition: opacity 210ms ease;
}
.version-handoff[hidden] { display: none !important; }
.version-handoff.is-visible { opacity: 1; }
.version-handoff-grid {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: .23;
  background-image:
    linear-gradient(rgba(var(--accent-rgb), .07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(var(--accent-rgb), .07) 1px, transparent 1px);
  background-size: 28px 28px;
  mask-image: radial-gradient(circle at 50% 42%, #000 0 18%, transparent 70%);
  -webkit-mask-image: radial-gradient(circle at 50% 42%, #000 0 18%, transparent 70%);
  animation: ndplay-version-grid 9s linear infinite;
}
.version-handoff::after {
  content: "";
  position: absolute;
  right: 0;
  left: 0;
  height: 1px;
  top: 18%;
  pointer-events: none;
  opacity: 0;
  background: linear-gradient(90deg, transparent, rgba(var(--accent-rgb), .72), transparent);
  box-shadow: 0 0 16px rgba(var(--accent-rgb), .32);
  animation: ndplay-version-scan 1.45s 120ms ease-out 1 both;
}
.version-handoff-console {
  position: relative;
  width: min(100%, 470px);
  max-height: calc(var(--version-service-height, 100dvh) - max(20px, env(safe-area-inset-top)) - max(20px, env(safe-area-inset-bottom)));
  padding: clamp(20px, 5.8vw, 34px);
  overflow: auto;
  overscroll-behavior: contain;
  border: 1px solid rgba(var(--accent-rgb), .38);
  border-radius: 25px;
  background:
    radial-gradient(circle at 100% 0%, rgba(var(--accent-rgb), .15), transparent 42%),
    linear-gradient(145deg, rgba(18, 25, 33, .98), rgba(7, 11, 17, .99));
  box-shadow:
    0 35px 95px rgba(0,0,0,.68),
    0 0 44px rgba(var(--accent-rgb), .09),
    inset 0 1px rgba(255,255,255,.055);
  text-align: center;
  opacity: 0;
  transform: translateY(14px) scale(.978);
}
.version-handoff.is-visible .version-handoff-console {
  animation: ndplay-version-console 460ms 70ms cubic-bezier(.16,1,.3,1) forwards;
}
.version-handoff-heading {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
}
.version-handoff-heading > span {
  height: 15px;
  display: flex;
  align-items: end;
  gap: 2px;
}
.version-handoff-heading > span i {
  width: 2px;
  border-radius: 99px;
  background: var(--accent);
  box-shadow: 0 0 7px rgba(var(--accent-rgb), .56);
  animation: ndplay-version-bars .48s ease-in-out infinite alternate;
}
.version-handoff-heading > span i:nth-child(1) { height: 6px; }
.version-handoff-heading > span i:nth-child(2) { height: 13px; animation-delay: -.21s; }
.version-handoff-heading > span i:nth-child(3) { height: 9px; animation-delay: -.34s; }
.version-handoff-heading > span i:nth-child(4) { height: 15px; animation-delay: -.12s; }
.version-handoff-heading small {
  color: rgba(var(--accent-rgb), .77);
  font-family: var(--nd-terminal-font, ui-monospace, monospace);
  font-size: 7px;
  font-weight: 950;
  letter-spacing: .15em;
}
.version-handoff-mark {
  width: 75px;
  height: 75px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin: 24px auto 20px;
  border: 1px solid rgba(var(--accent-rgb), .38);
  border-radius: 22px;
  background:
    radial-gradient(circle at 50% 45%, rgba(var(--accent-rgb), .13), transparent 64%),
    rgba(3, 9, 13, .48);
  box-shadow: 0 0 28px rgba(var(--accent-rgb), .075), inset 0 0 22px rgba(var(--accent-rgb), .035);
}
.version-handoff-mark > span {
  display: grid;
  grid-template-columns: repeat(3, 8px);
  gap: 4px;
  padding: 8px 7px;
  border: 1px solid rgba(var(--accent-rgb), .27);
  border-radius: 9px;
  background: rgba(var(--accent-rgb), .045);
}
.version-handoff-mark > span i {
  width: 8px;
  height: 8px;
  border: 1px solid rgba(var(--accent-rgb), .68);
  background: rgba(var(--accent-rgb), .16);
  box-shadow: 0 0 9px rgba(var(--accent-rgb), .20);
}
.version-handoff-mark > span i:nth-child(2) { background: var(--accent); box-shadow: 0 0 12px rgba(var(--accent-rgb), .66); }
.version-handoff-mark > b {
  color: var(--accent);
  font-family: var(--nd-numeric-font, ui-monospace, monospace);
  font-size: 25px;
  font-weight: 500;
  line-height: 1;
  text-shadow: 0 0 12px rgba(var(--accent-rgb), .48);
  animation: ndplay-version-ready-mark 1.35s ease-in-out infinite;
}
.version-handoff-console > strong {
  display: block;
  color: #eef8f6;
  font-family: var(--nd-display-font, ui-sans-serif, sans-serif);
  font-size: clamp(23px, 7.4vw, 34px);
  font-weight: 820;
  line-height: 1.05;
  letter-spacing: -.035em;
  text-wrap: balance;
}
.version-handoff-console > p {
  margin: 9px 0 0;
  color: rgba(214, 224, 232, .72);
  font-size: clamp(14px, 4.4vw, 18px);
  font-weight: 660;
}
.version-handoff-console > p b {
  display: inline-block;
  margin-left: 3px;
  color: var(--accent);
  font-family: var(--nd-numeric-font, ui-monospace, monospace);
  font-weight: 950;
  letter-spacing: .035em;
  text-shadow: 0 0 12px rgba(var(--accent-rgb), .36);
}
.version-handoff-copy {
  display: block;
  max-width: 340px;
  margin: 18px auto 0;
  color: rgba(205, 215, 225, .62);
  font-size: 10px;
  font-weight: 610;
  line-height: 1.5;
  letter-spacing: .01em;
  text-wrap: balance;
}
.version-handoff-platform {
  width: fit-content;
  max-width: 100%;
  margin: 12px auto 0;
  padding: 6px 10px;
  overflow: hidden;
  border: 1px solid rgba(var(--accent-rgb), .24);
  border-radius: 8px;
  background: rgba(var(--accent-rgb), .05);
  color: rgba(var(--accent-rgb), .80);
  font-family: var(--nd-terminal-font, ui-monospace, monospace);
  font-size: 6.5px;
  font-weight: 950;
  letter-spacing: .095em;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.version-handoff[data-platform="android"] .version-handoff-platform {
  border-color: rgba(169, 239, 116, .28);
  background: rgba(169, 239, 116, .055);
  color: rgba(185, 245, 139, .86);
  box-shadow: 0 0 14px rgba(169, 239, 116, .045);
}
.version-handoff[data-platform="web"] .version-handoff-platform {
  color: rgba(205, 215, 225, .60);
  border-color: rgba(205, 215, 225, .15);
  background: rgba(205, 215, 225, .025);
}
.version-handoff-continue {
  width: 100%;
  min-height: 50px;
  margin-top: 16px;
  border: 1px solid rgba(var(--accent-rgb), .42);
  border-radius: 14px;
  background:
    linear-gradient(90deg, rgba(var(--accent-rgb), .10), rgba(var(--accent-rgb), .035)),
    rgba(3, 10, 14, .72);
  color: rgba(225, 255, 246, .94);
  box-shadow: inset 0 1px rgba(255,255,255,.04), 0 0 22px rgba(var(--accent-rgb), .055);
  font-family: var(--nd-terminal-font, ui-monospace, monospace);
  font-size: 8px;
  font-weight: 950;
  letter-spacing: .15em;
  cursor: pointer;
  transition: border-color 160ms ease, background 160ms ease, box-shadow 160ms ease, transform 130ms ease;
}
.version-handoff-continue:hover,
.version-handoff-continue:focus-visible {
  border-color: rgba(var(--accent-rgb), .72);
  outline: none;
  background:
    linear-gradient(90deg, rgba(var(--accent-rgb), .17), rgba(var(--accent-rgb), .065)),
    rgba(3, 10, 14, .78);
  box-shadow: inset 0 1px rgba(255,255,255,.055), 0 0 25px rgba(var(--accent-rgb), .10);
}
.version-handoff-continue:active { transform: scale(.988); }
.version-handoff-continue:disabled { opacity: .56; cursor: wait; transform: none; }
.version-handoff-state {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: 16px;
  padding-top: 13px;
  border-top: 1px solid rgba(var(--accent-rgb), .12);
  color: rgba(var(--accent-rgb), .69);
  font-family: var(--nd-terminal-font, ui-monospace, monospace);
  font-size: 6.5px;
  font-weight: 920;
  letter-spacing: .105em;
}

/* ND Play v0.5.58 · Unified Search */
.search-button {
  position: relative;
  width: 40px;
  height: 40px;
  flex: 0 0 40px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(var(--accent-rgb), .24);
  border-radius: 13px;
  background: rgba(var(--accent-rgb), .045);
  color: #eaf5fb;
  cursor: pointer;
  box-shadow: inset 0 1px rgba(255,255,255,.025);
  transition: transform 150ms ease, border-color 180ms ease, background 180ms ease, color 180ms ease;
}
.search-button svg {
  width: 19px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
}
.search-button > i {
  position: absolute;
  top: 5px;
  right: 5px;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: rgba(var(--accent-rgb), .55);
  box-shadow: 0 0 7px rgba(var(--accent-rgb), .32);
}
.search-button:hover,
.search-button:focus-visible {
  border-color: rgba(var(--accent-rgb), .52);
  background: rgba(var(--accent-rgb), .10);
  color: var(--accent);
}
.search-button:active { transform: scale(.96); }

body.search-open { overflow: hidden; }
.search-panel {
  position: fixed;
  inset: 0;
  z-index: 208;
  pointer-events: none;
  visibility: hidden;
}
.search-panel.open { pointer-events: auto; visibility: visible; }
.search-backdrop {
  position: absolute;
  inset: 0;
  border: 0;
  background: rgba(2, 5, 9, .84);
  opacity: 0;
  transition: opacity 200ms ease;
}
.search-panel.open .search-backdrop { opacity: 1; }
.search-sheet {
  position: absolute;
  top: max(10px, env(safe-area-inset-top));
  right: max(10px, env(safe-area-inset-right));
  bottom: max(10px, env(safe-area-inset-bottom));
  left: max(10px, env(safe-area-inset-left));
  width: min(1080px, calc(100vw - 20px));
  margin: auto;
  padding: 24px;
  overflow: auto;
  overscroll-behavior: contain;
  border: 1px solid rgba(var(--accent-rgb), .31);
  border-radius: 27px;
  background:
    radial-gradient(circle at 94% 4%, rgba(var(--accent-rgb), .12), transparent 30%),
    radial-gradient(circle at 4% 96%, rgba(157, 124, 255, .055), transparent 36%),
    linear-gradient(160deg, rgba(22, 29, 39, .995), rgba(7, 11, 17, .998) 72%);
  box-shadow: 0 36px 110px rgba(0,0,0,.62), inset 0 1px rgba(255,255,255,.035);
  opacity: 0;
  transform: translateY(14px) scale(.989);
  transition: opacity 190ms ease, transform 230ms cubic-bezier(.2,.8,.2,1);
}
.search-panel.open .search-sheet { opacity: 1; transform: none; }
.search-signal-line {
  position: sticky;
  z-index: 5;
  top: -24px;
  height: 2px;
  margin: -24px -24px 22px;
  background: linear-gradient(90deg, transparent, rgba(var(--accent-rgb), .32), var(--accent), rgba(var(--accent-rgb), .32), transparent);
  box-shadow: 0 0 15px rgba(var(--accent-rgb), .32);
}
.search-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
  padding-bottom: 19px;
  border-bottom: 1px solid rgba(255,255,255,.075);
}
.search-header > div { min-width: 0; }
.search-header p,
.search-section-heading small {
  margin: 0;
  color: var(--accent);
  font-family: var(--nd-terminal-font, ui-monospace, monospace);
  font-size: 8px;
  font-weight: 950;
  letter-spacing: .17em;
}
.search-header h2 {
  margin: 7px 0 5px;
  color: #eef8fb;
  font-family: var(--nd-terminal-font, ui-monospace, monospace);
  font-size: clamp(31px, 5vw, 50px);
  line-height: 1;
  letter-spacing: -.04em;
}
.search-header span { color: var(--muted); font-size: 12px; line-height: 1.5; }
.search-close {
  width: 48px;
  height: 48px;
  flex: 0 0 48px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 15px;
  background: rgba(255,255,255,.03);
  color: rgba(255,255,255,.72);
  cursor: pointer;
}
.search-close svg { width: 22px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; }

.global-search-form {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  margin: 20px 0 13px;
}
.global-search-field {
  min-width: 0;
  min-height: 58px;
  display: grid;
  grid-template-columns: 25px minmax(0,1fr) 36px;
  align-items: center;
  gap: 10px;
  padding: 0 10px 0 17px;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 16px;
  background: rgba(0,0,0,.20);
  transition: border-color 180ms ease, box-shadow 180ms ease, background 180ms ease;
}
.global-search-field:focus-within {
  border-color: rgba(var(--accent-rgb), .54);
  background: rgba(var(--accent-rgb), .025);
  box-shadow: 0 0 0 3px rgba(var(--accent-rgb), .075), inset 0 0 25px rgba(var(--accent-rgb), .02);
}
.global-search-field > svg { width: 22px; fill: none; stroke: rgba(var(--accent-rgb), .78); stroke-width: 1.7; stroke-linecap: round; }
.global-search-field input {
  width: 100%;
  min-width: 0;
  height: 54px;
  padding: 0;
  border: 0;
  outline: 0;
  background: transparent;
  color: #f2f8fb;
  font: inherit;
  font-size: 17px;
  font-weight: 650;
}
.global-search-field input::placeholder { color: rgba(255,255,255,.30); font-weight: 500; }
.global-search-field > button {
  width: 34px;
  height: 34px;
  border: 1px solid rgba(255,255,255,.09);
  border-radius: 10px;
  background: rgba(255,255,255,.025);
  color: rgba(255,255,255,.55);
  font-size: 21px;
  line-height: 1;
  cursor: pointer;
}
.global-search-submit {
  min-width: 124px;
  min-height: 58px;
  padding: 0 20px;
  border: 1px solid rgba(var(--accent-rgb), .38);
  border-radius: 16px;
  background: linear-gradient(145deg, rgba(var(--accent-rgb), .12), rgba(var(--accent-rgb), .035));
  color: var(--accent);
  font-family: var(--nd-terminal-font, ui-monospace, monospace);
  font-size: 9px;
  font-weight: 950;
  letter-spacing: .14em;
  cursor: pointer;
}
.global-search-submit:disabled { opacity: .55; cursor: wait; }
.global-search-form.is-searching .global-search-field > svg { animation: ndplay-search-scan .8s ease-in-out infinite alternate; }
@keyframes ndplay-search-scan { to { opacity: .45; transform: scale(.92); } }

.search-recent {
  margin: 13px 0 18px;
  padding: 15px;
  border: 1px solid rgba(var(--accent-rgb), .12);
  border-radius: 16px;
  background: rgba(var(--accent-rgb), .018);
}
.search-section-heading {
  min-width: 0;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 11px;
}
.search-section-heading > div { min-width: 0; }
.search-section-heading h3 {
  margin: 4px 0 0;
  color: #edf5f9;
  font-size: 19px;
  line-height: 1.1;
}
.search-section-heading > span {
  color: rgba(var(--accent-rgb), .72);
  font-family: var(--nd-numeric-font, ui-monospace, monospace);
  font-size: 12px;
  font-weight: 900;
}
.search-section-heading > button {
  border: 0;
  background: transparent;
  color: rgba(255,255,255,.38);
  font-size: 7px;
  font-weight: 900;
  letter-spacing: .1em;
  cursor: pointer;
}
.search-recent-list { display: flex; flex-wrap: wrap; gap: 7px; }
.search-recent-list button {
  max-width: 100%;
  min-height: 35px;
  padding: 0 12px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.085);
  border-radius: 999px;
  background: rgba(255,255,255,.022);
  color: rgba(235,243,248,.72);
  font-size: 10px;
  text-overflow: ellipsis;
  white-space: nowrap;
  cursor: pointer;
}
.search-recent-list button:hover { border-color: rgba(var(--accent-rgb), .34); color: var(--accent); }
.search-recent > p { margin: 2px 0 0; color: rgba(255,255,255,.35); font-size: 10px; }

.search-filters {
  display: grid;
  grid-template-columns: repeat(4, minmax(0,1fr));
  gap: 7px;
  margin: 13px 0 19px;
}
.search-filters button {
  min-width: 0;
  min-height: 43px;
  padding: 0 10px;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 12px;
  background: rgba(255,255,255,.014);
  color: rgba(255,255,255,.46);
  font-family: var(--nd-terminal-font, ui-monospace, monospace);
  font-size: 8px;
  font-weight: 900;
  letter-spacing: .07em;
  cursor: pointer;
}
.search-filters button b { margin-left: 5px; color: rgba(var(--accent-rgb), .68); font-weight: 950; }
.search-filters button.is-active { border-color: rgba(var(--accent-rgb), .45); background: rgba(var(--accent-rgb), .075); color: var(--accent); }
.search-filters button:disabled { opacity: .28; cursor: default; }
.search-status {
  min-height: 110px;
  display: grid;
  place-items: center;
  color: rgba(255,255,255,.47);
  font-size: 12px;
  text-align: center;
}
.search-results { display: grid; gap: 26px; }
.search-result-section { min-width: 0; }

.search-track-list { display: grid; gap: 8px; }
.search-track-result {
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(0,1fr) auto;
  gap: 10px;
  align-items: stretch;
  padding: 8px;
  border: 1px solid rgba(255,255,255,.075);
  border-radius: 16px;
  background: linear-gradient(110deg, rgba(255,255,255,.027), rgba(255,255,255,.009));
}
.search-track-primary {
  min-width: 0;
  display: grid;
  grid-template-columns: 58px minmax(0,1fr) auto;
  align-items: center;
  gap: 12px;
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  text-align: left;
  cursor: pointer;
}
.search-track-primary img {
  width: 58px;
  height: 58px;
  display: block;
  border: 1px solid rgba(var(--accent-rgb), .18);
  border-radius: 11px;
  object-fit: cover;
}
.search-track-copy { min-width: 0; display: grid; gap: 4px; }
.search-track-copy strong,
.search-track-copy span,
.search-track-copy small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.search-track-copy strong { color: #eef4f8; font-size: 14px; }
.search-track-copy span { color: rgba(255,255,255,.62); font-size: 11px; }
.search-track-copy small { color: rgba(255,255,255,.35); font-size: 8px; letter-spacing: .025em; }
.search-track-primary > b {
  padding: 7px 9px;
  border: 1px solid rgba(var(--accent-rgb), .23);
  border-radius: 9px;
  color: rgba(var(--accent-rgb), .78);
  font-family: var(--nd-terminal-font, ui-monospace, monospace);
  font-size: 7px;
  letter-spacing: .11em;
}
.search-result-actions { display: flex; align-items: stretch; gap: 6px; }
.search-result-action {
  min-width: 74px;
  min-height: 42px;
  padding: 0 10px;
  border: 1px solid rgba(var(--accent-rgb), .18);
  border-radius: 11px;
  background: rgba(var(--accent-rgb), .025);
  color: rgba(var(--accent-rgb), .78);
  font-size: 7px;
  font-weight: 900;
  line-height: 1.2;
  letter-spacing: .075em;
  cursor: pointer;
}
.search-result-action:hover { border-color: rgba(var(--accent-rgb), .42); background: rgba(var(--accent-rgb), .07); color: var(--accent); }
.search-result-action:disabled,
.search-result-action.is-loading { opacity: .45; cursor: wait; }
.search-favorite-action { min-width: 43px; padding: 0; font-size: 19px; letter-spacing: 0; }
.search-favorite-action.is-active { border-color: rgba(var(--accent-rgb), .44); color: var(--accent); text-shadow: 0 0 12px rgba(var(--accent-rgb), .55); }

.search-album-grid { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 11px; }
.search-album-result {
  min-width: 0;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.075);
  border-radius: 17px;
  background: linear-gradient(150deg, rgba(255,255,255,.027), rgba(255,255,255,.009));
}
.search-album-primary { width: 100%; min-width: 0; display: grid; grid-template-columns: 82px minmax(0,1fr); gap: 12px; align-items: center; padding: 10px; border: 0; background: transparent; color: inherit; text-align: left; cursor: pointer; }
.search-album-primary img { width: 82px; height: 82px; display: block; border-radius: 12px; object-fit: cover; }
.search-album-primary > span { min-width: 0; display: grid; gap: 6px; }
.search-album-primary strong,
.search-album-primary span span,
.search-album-primary small { overflow: hidden; text-overflow: ellipsis; }
.search-album-primary strong { display: -webkit-box; color: #edf4f8; font-size: 13px; line-height: 1.25; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.search-album-primary span span { color: rgba(255,255,255,.57); font-size: 10px; white-space: nowrap; }
.search-album-primary small { color: rgba(255,255,255,.34); font-size: 7px; line-height: 1.4; white-space: nowrap; }
.search-album-result > .search-result-actions { padding: 0 10px 10px; }
.search-album-result > .search-result-actions .search-result-action { min-width: 0; flex: 1; }

.search-artist-grid { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 10px; }
.search-artist-result {
  min-width: 0;
  display: grid;
  grid-template-columns: 52px minmax(0,1fr) auto;
  align-items: center;
  gap: 10px;
  padding: 9px;
  border: 1px solid rgba(255,255,255,.075);
  border-radius: 15px;
  background: rgba(255,255,255,.017);
  color: inherit;
  text-align: left;
  cursor: pointer;
}
.search-artist-result:hover { border-color: rgba(var(--accent-rgb), .34); background: rgba(var(--accent-rgb), .035); }
.search-artist-result img { width: 52px; height: 52px; border-radius: 50%; object-fit: cover; filter: saturate(.86); }
.search-artist-result > span { min-width: 0; display: grid; gap: 5px; }
.search-artist-result strong,
.search-artist-result small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.search-artist-result strong { color: #edf4f8; font-size: 12px; }
.search-artist-result small { color: rgba(var(--accent-rgb), .58); font-size: 7px; font-weight: 900; letter-spacing: .07em; }
.search-artist-result > b { color: rgba(var(--accent-rgb), .66); font-size: 18px; font-weight: 400; }

.search-empty { min-height: 240px; display: grid; place-content: center; text-align: center; color: rgba(255,255,255,.46); }
.search-empty > span { display: flex; justify-content: center; gap: 7px; margin-bottom: 16px; }
.search-empty > span i { width: 7px; height: 7px; border-radius: 50%; background: rgba(var(--accent-rgb), .62); box-shadow: 0 0 9px rgba(var(--accent-rgb), .32); }
.search-empty strong { color: #eef5f8; font-size: 20px; }
.search-empty p { margin: 8px 0 0; font-size: 11px; }
.search-footer { margin-top: 24px; padding-top: 14px; display: flex; justify-content: space-between; gap: 15px; border-top: 1px solid rgba(255,255,255,.07); }
.search-footer span { display: flex; align-items: center; gap: 7px; color: rgba(var(--accent-rgb), .62); font-family: var(--nd-terminal-font, ui-monospace, monospace); font-size: 6.5px; font-weight: 900; letter-spacing: .1em; }
.search-footer span i { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 9px rgba(var(--accent-rgb), .55); }
.search-footer small { max-width: 54ch; color: rgba(255,255,255,.34); font-size: 8px; line-height: 1.45; text-align: right; }

.help-control-list { grid-template-columns: repeat(5, minmax(0,1fr)); }

@media (max-width: 900px) {
  .search-album-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .search-artist-grid { grid-template-columns: repeat(3, minmax(0,1fr)); }
  .help-control-list { grid-template-columns: repeat(3, minmax(0,1fr)); }
}

@media (max-width: 700px) {
  .search-button { width: 38px; height: 38px; flex-basis: 38px; }
  .search-sheet {
    top: max(5px, env(safe-area-inset-top));
    right: max(5px, env(safe-area-inset-right));
    bottom: max(5px, env(safe-area-inset-bottom));
    left: max(5px, env(safe-area-inset-left));
    width: calc(100dvw - 10px);
    padding: 16px;
    border-radius: 22px;
  }
  .search-signal-line { top: -16px; margin: -16px -16px 17px; }
  .search-header { gap: 10px; padding-bottom: 15px; }
  .search-header h2 { font-size: clamp(29px, 9vw, 38px); }
  .search-header span { font-size: 10px; }
  .search-close { width: 44px; height: 44px; flex-basis: 44px; }
  .global-search-form { grid-template-columns: minmax(0,1fr) 82px; gap: 7px; margin-top: 15px; }
  .global-search-field { min-height: 52px; grid-template-columns: 20px minmax(0,1fr) 32px; gap: 7px; padding-left: 12px; border-radius: 14px; }
  .global-search-field input { height: 49px; font-size: 14px; }
  .global-search-field > svg { width: 19px; }
  .global-search-field > button { width: 30px; height: 30px; }
  .global-search-submit { min-width: 0; min-height: 52px; padding: 0 8px; border-radius: 14px; font-size: 7px; }
  .search-filters { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .search-track-result { grid-template-columns: minmax(0,1fr); gap: 7px; }
  .search-track-primary { grid-template-columns: 52px minmax(0,1fr) auto; gap: 9px; }
  .search-track-primary img { width: 52px; height: 52px; }
  .search-track-copy strong { font-size: 12px; }
  .search-track-copy span { font-size: 9px; }
  .search-track-copy small { font-size: 7px; }
  .search-track-primary > b { padding-inline: 7px; font-size: 6px; }
  .search-track-result > .search-result-actions { display: grid; grid-template-columns: 1fr 1fr 43px; }
  .search-result-action { min-width: 0; min-height: 38px; }
  .search-album-grid { grid-template-columns: repeat(2, minmax(0,1fr)); gap: 8px; }
  .search-album-primary { grid-template-columns: 62px minmax(0,1fr); gap: 9px; padding: 8px; }
  .search-album-primary img { width: 62px; height: 62px; border-radius: 10px; }
  .search-album-primary strong { font-size: 11px; }
  .search-album-primary span span { font-size: 8px; }
  .search-album-primary small { font-size: 6px; }
  .search-album-result > .search-result-actions { padding: 0 8px 8px; gap: 4px; }
  .search-album-result > .search-result-actions .search-result-action { padding-inline: 5px; font-size: 6px; letter-spacing: .045em; }
  .search-artist-grid { grid-template-columns: repeat(2, minmax(0,1fr)); gap: 7px; }
  .search-artist-result { grid-template-columns: 43px minmax(0,1fr) auto; gap: 8px; padding: 8px; }
  .search-artist-result img { width: 43px; height: 43px; }
  .search-artist-result strong { font-size: 10px; }
  .search-footer { align-items: flex-start; flex-direction: column; }
  .search-footer small { max-width: none; text-align: left; }
  .help-control-list { grid-template-columns: 1fr; }
}

@media (max-width: 370px) {
  .search-button { width: 34px; height: 35px; flex-basis: 34px; }
  .search-button svg { width: 17px; }
  .search-album-grid { grid-template-columns: minmax(0,1fr); }
}

html.nd-mobile-runtime :is(.search-button, .help-button, .readability-mode-button, .layout-mode-button) {
  width: 34px !important;
  height: 36px !important;
  flex: 0 0 34px !important;
}
html.nd-mobile-runtime body.search-open {
  height: 100dvh !important;
  overflow: hidden !important;
}
html.nd-mobile-runtime .search-panel,
html.nd-mobile-runtime .search-sheet { max-width: 100dvw !important; }

@media (prefers-reduced-motion: reduce) {
  .search-panel.open .search-sheet,
  .search-panel.open .search-backdrop,
  .global-search-form.is-searching .global-search-field > svg { transition: none !important; animation: none !important; }
}
.version-handoff-state i {
  width: 6px;
  height: 6px;
  flex: 0 0 6px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 9px rgba(var(--accent-rgb), .62);
  animation: ndplay-version-state 1.3s ease-in-out infinite alternate;
}

@keyframes ndplay-version-grid { to { background-position: 0 28px, 28px 0; } }
@keyframes ndplay-version-scan {
  0% { top: 18%; opacity: 0; }
  22% { opacity: .75; }
  100% { top: 82%; opacity: 0; }
}
@keyframes ndplay-version-console {
  0% { opacity: 0; transform: translateY(14px) scale(.978); filter: brightness(.68); }
  64% { opacity: 1; transform: translateY(-1px) scale(1.004); filter: brightness(1.07); }
  100% { opacity: 1; transform: none; filter: none; }
}
@keyframes ndplay-version-bars { from { transform: scaleY(.48); opacity: .48; } to { transform: scaleY(1); opacity: 1; } }
@keyframes ndplay-version-ready-mark {
  0%, 100% { opacity: .55; transform: scale(.94); }
  50% { opacity: 1; transform: scale(1.04); }
}
@keyframes ndplay-version-state { from { opacity: .38; } to { opacity: 1; } }

@media (max-width: 430px) {
  .version-handoff-console { border-radius: 22px; }
  .version-handoff-mark { width: 66px; height: 66px; margin-block: 18px 16px; border-radius: 20px; }
  .version-handoff-copy { margin-top: 15px; font-size: 9.2px; }
  .version-handoff-platform { margin-top: 10px; padding: 5px 8px; font-size: 5.8px; }
  .version-handoff-continue { min-height: 48px; margin-top: 13px; }
}

@media (prefers-reduced-motion: reduce) {
  .version-handoff,
  .version-handoff-console,
  .version-handoff-grid,
  .version-handoff::after,
  .version-handoff-heading > span i,
  .version-handoff-mark > b,
  .version-handoff-state i {
    animation: none !important;
    transition: none !important;
  }
  .version-handoff.is-visible,
  .version-handoff.is-visible .version-handoff-console { opacity: 1; transform: none; filter: none; }
}

/* ND Play v0.5.59 · Parser-time Viewport Preflight
   This class is attached before CSS is requested, so WebKit never receives a
   desktop-sized first frame on a physical phone. */
html.nd-viewport-preflight {
  width: 100% !important;
  height: 100% !important;
  overflow: hidden !important;
  background:
    radial-gradient(circle at 50% 46%, rgba(var(--accent-rgb), .08), transparent 34%),
    #080a0f;
}
html.nd-viewport-preflight body {
  opacity: 0 !important;
  pointer-events: none !important;
}
html.nd-viewport-preflight::before {
  content: 'ND PLAY · VIEWPORT 1:1';
  position: fixed;
  z-index: 2147483647;
  top: 50%;
  left: 50%;
  width: min(280px, calc(100vw - 48px));
  padding: 21px 18px 18px;
  transform: translate(-50%, -50%);
  border: 1px solid rgba(var(--accent-rgb), .25);
  border-radius: 17px;
  background:
    linear-gradient(90deg, rgba(var(--accent-rgb), .04), transparent 28%, transparent 72%, rgba(var(--accent-rgb), .04)),
    rgba(5, 10, 15, .94);
  color: rgba(var(--accent-rgb), .82);
  box-shadow: 0 22px 70px rgba(0,0,0,.52), inset 0 1px rgba(255,255,255,.025), 0 0 28px rgba(var(--accent-rgb), .045);
  font-family: var(--nd-terminal-font, ui-monospace, monospace);
  font-size: 8px;
  font-weight: 950;
  line-height: 1.4;
  letter-spacing: .16em;
  text-align: center;
  pointer-events: none;
}
html.nd-viewport-preflight::after {
  content: '';
  position: fixed;
  z-index: 2147483647;
  top: calc(50% + 18px);
  left: 50%;
  width: min(224px, calc(100vw - 92px));
  height: 2px;
  transform: translateX(-50%);
  background: linear-gradient(90deg, transparent, rgba(var(--accent-rgb), .24), var(--accent), rgba(var(--accent-rgb), .24), transparent);
  background-size: 48% 100%;
  background-repeat: no-repeat;
  box-shadow: 0 0 12px rgba(var(--accent-rgb), .38);
  animation: ndplay-viewport-preflight-scan .72s ease-in-out infinite alternate;
  pointer-events: none;
}
html.nd-viewport-ready body {
  animation: ndplay-viewport-ready 360ms cubic-bezier(.2,.8,.2,1) both;
}
@keyframes ndplay-viewport-preflight-scan {
  from { background-position: -38% 0; opacity: .38; }
  to { background-position: 138% 0; opacity: 1; }
}
@keyframes ndplay-viewport-ready {
  from { opacity: .01; filter: brightness(.72); }
  to { opacity: 1; filter: none; }
}
@media (prefers-reduced-motion: reduce) {
  html.nd-viewport-preflight::after,
  html.nd-viewport-ready body { animation: none !important; }
}

/* ND Play v0.5.60 · iOS Focus Zoom Guard
   Mobile Safari zooms a page when a focused text control computes below 16px.
   Only mobile/touch runtimes receive this floor; desktop typography is unchanged. */
html.nd-mobile-runtime :is(
  input[type="text"],
  input[type="password"],
  input[type="search"],
  input[type="email"],
  input[type="url"],
  input[type="tel"],
  input[type="number"],
  textarea,
  select
) {
  font-size: 16px !important;
}

@media (hover: none) and (pointer: coarse) {
  :is(
    input[type="text"],
    input[type="password"],
    input[type="search"],
    input[type="email"],
    input[type="url"],
    input[type="tel"],
    input[type="number"],
    textarea,
    select
  ) {
    font-size: 16px !important;
  }
}

/* ND Play v0.5.61 · Mobile Overscroll Guard
   Stops browser pull-to-refresh at the root boundary on Android and iOS.
   Native page scrolling, horizontal rails and pinch zoom remain untouched. */
html.nd-mobile-runtime,
html.nd-mobile-runtime body {
  overscroll-behavior-y: none;
}

@media (hover: none) and (pointer: coarse) {
  html,
  body {
    overscroll-behavior-y: none;
  }
}

/* ND Play v0.5.62 · Locked Mobile Scale
   Pan gestures stay native; pinch zoom is intentionally excluded. */
html.nd-mobile-runtime,
html.nd-mobile-runtime body {
  touch-action: pan-x pan-y;
}

@media (hover: none) and (pointer: coarse) {
  html,
  body {
    touch-action: pan-x pan-y;
  }
}

/* ND Play v0.5.62 · Authorization Signal Lock
   A slower staged confirmation: channel, seal, identity and final lock. */
.auth-success-matrix {
  --auth-signal: var(--accent);
  --auth-signal-rgb: var(--accent-rgb);
  background:
    radial-gradient(circle at 50% 38%, rgba(var(--auth-signal-rgb), .105), transparent 31%),
    radial-gradient(circle at 50% 100%, rgba(var(--auth-signal-rgb), .035), transparent 44%),
    rgba(3, 6, 10, .955);
}
.auth-success-matrix[data-channel="local"] {
  --auth-signal: #ffb86b;
  --auth-signal-rgb: 255, 184, 107;
}
.auth-success-matrix.is-visible {
  animation: ndplay-auth-scene-enter 320ms cubic-bezier(.2,.75,.25,1) both;
}
.auth-success-matrix::after {
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(var(--auth-signal-rgb), .88), transparent);
  box-shadow: 0 0 22px rgba(var(--auth-signal-rgb), .38);
}
.auth-success-matrix.is-visible::after {
  animation: ndplay-auth-scene-scan 1380ms 80ms cubic-bezier(.18,.72,.24,1) both;
}
.auth-success-matrix .auth-success-console,
.auth-success-matrix[data-channel="local"] .auth-success-console {
  width: min(100%, 440px);
  padding: clamp(23px, 5.6vw, 34px);
  border-color: rgba(var(--auth-signal-rgb), .32);
  border-radius: 27px;
  background:
    radial-gradient(circle at 50% 30%, rgba(var(--auth-signal-rgb), .075), transparent 34%),
    linear-gradient(145deg, rgba(var(--auth-signal-rgb), .045), transparent 52%),
    rgba(6, 10, 15, .965);
  box-shadow:
    0 34px 105px rgba(0,0,0,.64),
    inset 0 1px rgba(255,255,255,.045),
    inset 0 0 38px rgba(var(--auth-signal-rgb), .018),
    0 0 48px rgba(var(--auth-signal-rgb), .065);
}
.auth-success-matrix.is-visible .auth-success-console {
  animation: ndplay-auth-signal-console 560ms 80ms cubic-bezier(.16,1,.3,1) both;
}
.auth-success-heading {
  justify-content: center;
  opacity: 0;
  transform: translateY(-5px);
}
.auth-success-matrix.is-visible .auth-success-heading {
  animation: ndplay-auth-signal-copy 300ms 170ms ease-out forwards;
}
.auth-success-heading small {
  color: rgba(var(--auth-signal-rgb), .74);
  font-size: 7px;
  letter-spacing: .17em;
}
.auth-success-seal {
  position: relative;
  width: 104px;
  height: 104px;
  display: grid;
  place-items: center;
  margin: 21px auto 15px;
  opacity: 0;
  transform: scale(.72) rotate(-4deg);
  filter: brightness(.65) blur(2px);
}
.auth-success-matrix.is-visible .auth-success-seal {
  animation: ndplay-auth-seal-enter 520ms 240ms cubic-bezier(.16,1,.3,1) forwards;
}
.auth-success-seal::before,
.auth-success-seal::after {
  content: '';
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
}
.auth-success-seal::before {
  inset: 7px;
  border: 1px solid rgba(var(--auth-signal-rgb), .20);
  box-shadow: inset 0 0 24px rgba(var(--auth-signal-rgb), .035), 0 0 24px rgba(var(--auth-signal-rgb), .055);
}
.auth-success-seal::after {
  inset: 17px;
  background: radial-gradient(circle, rgba(var(--auth-signal-rgb), .075), transparent 68%);
  box-shadow: 0 0 28px rgba(var(--auth-signal-rgb), .075);
}
.auth-success-seal > svg {
  position: relative;
  z-index: 2;
  width: 88px;
  height: 88px;
  overflow: visible;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.auth-success-seal-track {
  stroke: rgba(var(--auth-signal-rgb), .14);
  stroke-width: 1;
}
.auth-success-seal-ring {
  stroke: var(--auth-signal);
  stroke-width: 1.8;
  stroke-dasharray: 100;
  stroke-dashoffset: 100;
  transform: rotate(-90deg);
  transform-origin: 44px 44px;
  filter: drop-shadow(0 0 5px rgba(var(--auth-signal-rgb), .48));
}
.auth-success-matrix.is-visible .auth-success-seal-ring {
  animation: ndplay-auth-seal-ring 720ms 330ms cubic-bezier(.22,.75,.24,1) forwards;
}
.auth-success-seal-check {
  stroke: var(--auth-signal);
  stroke-width: 3.2;
  stroke-dasharray: 100;
  stroke-dashoffset: 100;
  filter: drop-shadow(0 0 6px rgba(var(--auth-signal-rgb), .56));
}
.auth-success-matrix.is-visible .auth-success-seal-check {
  animation: ndplay-auth-seal-check 390ms 790ms cubic-bezier(.2,.8,.2,1) forwards;
}
.auth-success-seal > b {
  position: absolute;
  z-index: 3;
  bottom: 6px;
  padding: 3px 6px;
  border: 1px solid rgba(var(--auth-signal-rgb), .24);
  border-radius: 5px;
  background: rgba(5, 11, 15, .90);
  color: rgba(var(--auth-signal-rgb), .84);
  font-family: var(--nd-terminal-font, ui-monospace, monospace);
  font-size: 5.5px;
  font-weight: 950;
  line-height: 1;
  letter-spacing: .15em;
  opacity: 0;
}
.auth-success-matrix.is-visible .auth-success-seal > b {
  animation: ndplay-auth-signal-copy 260ms 930ms ease-out forwards;
}
.auth-success-seal-orbit {
  position: absolute;
  z-index: 1;
  inset: 0;
  border: 1px dashed rgba(var(--auth-signal-rgb), .16);
  border-radius: 50%;
}
.auth-success-matrix.is-visible .auth-success-seal-orbit {
  animation: ndplay-auth-orbit 5.2s 280ms linear infinite;
}
.auth-success-seal-orbit i {
  position: absolute;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--auth-signal);
  box-shadow: 0 0 8px rgba(var(--auth-signal-rgb), .72);
}
.auth-success-seal-orbit i:nth-child(1) { top: -2px; left: calc(50% - 2px); }
.auth-success-seal-orbit i:nth-child(2) { right: 10px; bottom: 17px; }
.auth-success-seal-orbit i:nth-child(3) { bottom: 17px; left: 10px; opacity: .42; }
.auth-success-console > strong,
.auth-success-console > span {
  opacity: 0;
  transform: translateY(8px);
  filter: blur(2px);
}
.auth-success-console > strong {
  margin-top: 4px;
  font-size: clamp(27px, 7vw, 42px);
  text-align: center;
}
.auth-success-console > span {
  margin-top: 13px;
  color: var(--auth-signal);
  text-align: center;
}
.auth-success-matrix.is-visible .auth-success-console > strong {
  animation: ndplay-auth-signal-copy 390ms 650ms cubic-bezier(.2,.8,.2,1) forwards;
}
.auth-success-matrix.is-visible .auth-success-console > span {
  animation: ndplay-auth-signal-copy 340ms 805ms cubic-bezier(.2,.8,.2,1) forwards;
}
.auth-success-trace {
  margin-top: 21px;
  border-color: rgba(var(--auth-signal-rgb), .13);
}
.auth-success-matrix.is-visible .auth-success-trace i {
  animation: ndplay-auth-signal-line 280ms ease-out forwards;
}
.auth-success-matrix.is-visible .auth-success-trace i:nth-child(1) { animation-delay: 900ms; }
.auth-success-matrix.is-visible .auth-success-trace i:nth-child(2) { animation-delay: 1030ms; }
.auth-success-matrix.is-visible .auth-success-trace i:nth-child(3) { animation-delay: 1160ms; }
.auth-success-matrix.is-visible .auth-success-trace i:nth-child(4) { animation-delay: 1290ms; color: rgba(var(--auth-signal-rgb), .86); }
.auth-success-progress {
  height: 2px;
  margin-top: 17px;
  background: rgba(var(--auth-signal-rgb), .075);
}
.auth-success-progress b,
.auth-success-matrix[data-channel="local"] .auth-success-progress b {
  background: linear-gradient(90deg, rgba(var(--auth-signal-rgb), .18), var(--auth-signal));
  box-shadow: 0 0 15px rgba(var(--auth-signal-rgb), .42);
}
.auth-success-matrix.is-visible .auth-success-progress b {
  animation: ndplay-auth-signal-progress 1430ms 110ms cubic-bezier(.18,.72,.22,1) forwards;
}
.auth-success-matrix.is-complete .auth-success-console {
  animation: none;
  opacity: 1;
  transform: scale(.994);
  filter: brightness(1.04);
  transition: transform 220ms ease, filter 220ms ease;
}
.auth-success-matrix.is-complete .auth-success-seal::before {
  border-color: rgba(var(--auth-signal-rgb), .38);
  box-shadow: inset 0 0 28px rgba(var(--auth-signal-rgb), .055), 0 0 32px rgba(var(--auth-signal-rgb), .11);
}

@keyframes ndplay-auth-scene-enter { from { opacity: 0; } to { opacity: 1; } }
@keyframes ndplay-auth-scene-scan {
  0% { top: 7%; opacity: 0; }
  14% { opacity: .72; }
  86% { opacity: .38; }
  100% { top: 93%; opacity: 0; }
}
@keyframes ndplay-auth-signal-console {
  0% { opacity: 0; transform: translateY(15px) scale(.972); filter: brightness(.56) blur(4px); }
  64% { opacity: 1; transform: translateY(-1px) scale(1.003); filter: brightness(1.06) blur(0); }
  100% { opacity: 1; transform: none; filter: none; }
}
@keyframes ndplay-auth-seal-enter {
  0% { opacity: 0; transform: scale(.72) rotate(-4deg); filter: brightness(.65) blur(2px); }
  72% { opacity: 1; transform: scale(1.025) rotate(.5deg); filter: brightness(1.08) blur(0); }
  100% { opacity: 1; transform: none; filter: none; }
}
@keyframes ndplay-auth-seal-ring { to { stroke-dashoffset: 0; } }
@keyframes ndplay-auth-seal-check { to { stroke-dashoffset: 0; } }
@keyframes ndplay-auth-orbit { to { transform: rotate(360deg); } }
@keyframes ndplay-auth-signal-copy { to { opacity: 1; transform: none; filter: none; } }
@keyframes ndplay-auth-signal-line { to { opacity: 1; transform: none; } }
@keyframes ndplay-auth-signal-progress { to { transform: scaleX(1); } }

@media (max-width: 560px) {
  .auth-success-matrix .auth-success-console,
  .auth-success-matrix[data-channel="local"] .auth-success-console {
    padding: 20px 18px;
    border-radius: 23px;
  }
  .auth-success-seal { width: 90px; height: 90px; margin-block: 17px 12px; }
  .auth-success-seal > svg { width: 78px; height: 78px; }
  .auth-success-seal > b { bottom: 2px; }
  .auth-success-console > strong { margin-top: 3px; font-size: clamp(26px, 8.6vw, 36px); }
  .auth-success-console > span { font-size: 7px; }
}

@media (max-height: 560px) and (max-width: 700px) {
  .auth-success-seal { width: 66px; height: 66px; margin-block: 10px 8px; }
  .auth-success-seal > svg { width: 60px; height: 60px; }
  .auth-success-seal > b { display: none; }
  .auth-success-console > strong { margin-top: 2px; }
}

@media (prefers-reduced-motion: reduce) {
  .auth-success-seal,
  .auth-success-seal-ring,
  .auth-success-seal-check,
  .auth-success-seal-orbit,
  .auth-success-heading,
  .auth-success-console > strong,
  .auth-success-console > span,
  .auth-success-seal > b {
    animation: none !important;
    opacity: 1;
    transform: none;
    filter: none;
  }
  .auth-success-seal-ring,
  .auth-success-seal-check { stroke-dashoffset: 0; }
}

/* ND Play v0.5.63 · Brand Identity & Status Breathing Room
   The compact header is one coherent lockup, while volatile status values
   receive dedicated rows instead of competing for a single line. */
.brand-wrap {
  position: relative;
  gap: 9px;
}
.brand-wrap .brand-mark {
  border-color: rgba(var(--accent-rgb), .55);
  border-radius: 9px 13px 9px 13px;
  background:
    linear-gradient(145deg, rgba(var(--accent-rgb), .14), rgba(var(--accent-rgb), .025) 56%),
    rgba(4, 10, 15, .76);
  box-shadow:
    inset 0 0 18px rgba(var(--accent-rgb), .10),
    0 0 16px rgba(var(--accent-rgb), .07);
}
.brand-wrap .nd-brand-wordmark {
  width: 124px;
  height: 18px;
}
.brand-wrap .nd-brand-wordmark svg {
  filter:
    drop-shadow(0 0 4px rgba(130, 232, 255, .22))
    drop-shadow(0 0 10px rgba(157, 140, 255, .08));
}
.brand-wrap .company-signature {
  display: flex !important;
  max-width: none;
  margin-top: 4px;
  overflow: visible;
  color: rgba(190, 236, 245, .78);
  font-family: var(--nd-terminal-font, ui-monospace, monospace);
  font-size: 6.8px;
  font-weight: 850;
  letter-spacing: .045em;
  line-height: 1;
  text-transform: uppercase;
  text-shadow: 0 0 8px rgba(var(--accent-rgb), .24);
}
.brand-wrap .company-signature::before {
  content: none;
  display: none !important;
}

.status-pane-navidrome {
  display: flex;
  align-items: center;
}
.status-pane-navidrome .status-pane-title {
  width: 100%;
  align-items: center;
}
.status-service-copy {
  display: grid;
  min-width: 0;
  gap: 3px;
  line-height: 1;
}
.status-service-copy strong,
.status-service-copy small {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.status-service-copy strong {
  color: #e9f3f6;
  font-family: var(--nd-terminal-font, ui-monospace, monospace);
  font-size: 9.5px;
  font-weight: 900;
  letter-spacing: .035em;
}
.status-service-copy small {
  color: rgba(var(--accent-rgb), .72);
  font-family: var(--nd-terminal-font, ui-monospace, monospace);
  font-size: 7.4px;
  font-weight: 800;
  letter-spacing: .045em;
}

/* These two peer routes must use the exact same type recipe in every mode. */
.personal-launch-grid > .archive-launch strong,
.personal-launch-grid > .listening-log-launch strong,
html.readability-large .personal-launch-grid > .archive-launch strong,
html.readability-large .personal-launch-grid > .listening-log-launch strong {
  font-family: var(--nd-terminal-font, ui-monospace, monospace);
  font-style: normal;
  font-weight: 900;
  line-height: 1;
  letter-spacing: .065em;
  text-transform: uppercase;
}

@media (max-width: 700px) {
  .brand-wrap .nd-brand-wordmark {
    width: 112px;
    max-width: 112px !important;
    height: 16px;
  }
  .brand-wrap > div:last-child,
  html.nd-mobile-runtime .brand-wrap > div:last-child {
    width: 112px;
    max-width: 112px;
  }
  .brand-wrap .company-signature,
  html.nd-mobile-runtime .brand-wrap .company-signature {
    max-width: 112px;
    margin-top: 3px;
    overflow: visible;
    font-size: 5.55px;
    letter-spacing: .018em;
  }
  .status-service-copy strong { font-size: 7.7px; }
  .status-service-copy small { font-size: 6.3px; }
}

@media (max-width: 370px) {
  .brand-wrap,
  html.nd-mobile-runtime .brand-wrap { gap: 6px; }
  .brand-wrap .nd-brand-wordmark,
  html.nd-mobile-runtime .nd-brand-wordmark {
    width: 104px;
    max-width: 104px !important;
    height: 15px;
  }
  .brand-wrap > div:last-child,
  html.nd-mobile-runtime .brand-wrap > div:last-child {
    width: 104px;
    max-width: 104px;
  }
  .brand-wrap .company-signature,
  html.nd-mobile-runtime .brand-wrap .company-signature {
    max-width: 104px;
    font-size: 5.15px;
    letter-spacing: 0;
  }
}

/* ND Play v0.5.64 · Brand Legibility
   NDPLAY is a single uninterrupted wordmark. The company signature and the
   bottom system console keep their hierarchy without relying on microtype. */
.brand-wrap .nd-brand-wordmark {
  width: 136px;
  max-width: 136px !important;
  height: 20px;
}
.brand-wrap > div:last-child {
  width: 136px;
  max-width: 136px;
}
.brand-wrap .company-signature,
html.nd-mobile-runtime .brand-wrap .company-signature {
  display: block !important;
  max-width: none;
  margin-top: 4px;
  overflow: visible;
  color: rgba(203, 238, 245, .86);
  font-family: var(--nd-terminal-font, ui-monospace, monospace);
  font-size: 8px;
  font-weight: 800;
  letter-spacing: .025em;
  line-height: 1.08;
  text-transform: none;
  text-shadow: 0 0 8px rgba(var(--accent-rgb), .20);
  white-space: nowrap;
}
.brand-wrap .company-signature::before,
html.nd-mobile-runtime .brand-wrap .company-signature::before {
  content: none !important;
  display: none !important;
}

.status-strip.status-console {
  min-height: 58px;
}
.status-console .status-pane {
  padding-block: 10px;
}
.status-service-copy {
  gap: 4px;
}
.status-service-copy strong {
  font-size: 11.5px;
  line-height: 1.05;
}
.status-service-copy small {
  font-size: 8.8px;
  line-height: 1.05;
}
.app-version-label,
.app-install-state {
  font-size: 8.4px;
}
.app-version-row strong {
  font-size: 13.5px;
}
.app-shell.layout-wide .app-version-label,
.app-shell.layout-wide .app-install-state {
  font-size: 8.4px;
}
.app-shell.layout-wide .app-version-row strong {
  font-size: 14px;
}
.app-diagnostics-button,
.app-install-button,
.app-shell.layout-wide .app-diagnostics-button,
.app-shell.layout-wide .app-install-button {
  min-height: 34px;
  font-size: 8.2px;
}

@media (max-width: 700px) {
  .brand-wrap .nd-brand-wordmark,
  html.nd-mobile-runtime .brand-wrap .nd-brand-wordmark {
    width: 110px;
    max-width: 110px !important;
    height: 16.5px;
  }
  .brand-wrap > div:last-child,
  html.nd-mobile-runtime .brand-wrap > div:last-child {
    width: 110px;
    max-width: 110px;
  }
  .brand-wrap .company-signature,
  html.nd-mobile-runtime .brand-wrap .company-signature {
    max-width: 110px;
    margin-top: 3px;
    font-size: 6.2px;
    letter-spacing: .012em;
  }

  .status-strip.status-console {
    grid-template-columns: minmax(0, 1fr) minmax(96px, .82fr) minmax(120px, 1fr);
    min-height: 60px;
  }
  .status-console .status-pane {
    padding: 9px 8px;
  }
  .status-service-copy strong {
    font-size: 9.3px;
  }
  .status-service-copy small {
    font-size: 7.4px;
  }
  .app-version-label,
  .app-install-state {
    font-size: 6.8px;
  }
  .app-version-row strong {
    font-size: 10.5px;
  }
  .app-diagnostics-button {
    min-height: 29px;
    font-size: 6.5px;
  }
}

@media (max-width: 370px) {
  .brand-wrap .nd-brand-wordmark,
  html.nd-mobile-runtime .brand-wrap .nd-brand-wordmark {
    width: 100px;
    max-width: 100px !important;
    height: 15px;
  }
  .brand-wrap > div:last-child,
  html.nd-mobile-runtime .brand-wrap > div:last-child {
    width: 100px;
    max-width: 100px;
  }
  .brand-wrap .company-signature,
  html.nd-mobile-runtime .brand-wrap .company-signature {
    max-width: 100px;
    font-size: 5.9px;
  }
  .status-strip.status-console {
    grid-template-columns: minmax(0, 1fr) minmax(86px, .8fr) minmax(108px, 1fr);
  }
  .status-console .status-pane {
    padding-inline: 7px;
  }
  .status-service-copy strong { font-size: 8.6px; }
  .status-service-copy small { font-size: 6.9px; }
  .app-version-label,
  .app-install-state { font-size: 6.3px; }
  .app-version-row strong { font-size: 9.7px; }
}

/* ND Play v0.5.65 · Command Wordmark
   A custom wide, forward-cut wordmark is shared by the player header and the
   authorization card. It borrows the confidence of aerospace identification
   systems without reproducing an existing game mark or font. */
.nd-wordmark-main,
.nd-wordmark-accent,
.nd-wordmark-rail,
.nd-wordmark-signal {
  stroke: none;
}
.nd-wordmark-main { fill: #edf5f7; }
.nd-wordmark-accent { fill: #82e8ff; }
.nd-wordmark-rail { fill: rgba(130, 232, 255, .76); }
.nd-wordmark-signal { fill: #ff6077; }
.nd-brand-wordmark svg {
  filter:
    drop-shadow(0 0 4px rgba(130, 232, 255, .22))
    drop-shadow(0 0 11px rgba(255, 96, 119, .08));
}
.brand-wrap .nd-brand-wordmark {
  width: 140px;
  max-width: 140px !important;
  height: 22px;
}
.brand-wrap > div:last-child {
  width: 140px;
  max-width: 140px;
}
.auth-brand .nd-brand-wordmark {
  width: min(238px, 61vw);
  max-width: 238px !important;
  height: 38px;
}

@media (max-width: 700px) {
  .brand-wrap .nd-brand-wordmark,
  html.nd-mobile-runtime .brand-wrap .nd-brand-wordmark {
    width: 112px;
    max-width: 112px !important;
    height: 18px;
  }
  .brand-wrap > div:last-child,
  html.nd-mobile-runtime .brand-wrap > div:last-child {
    width: 112px;
    max-width: 112px;
  }
  .auth-brand .nd-brand-wordmark {
    width: min(224px, 60vw);
    max-width: 224px !important;
    height: 35px;
  }
}

@media (max-width: 370px) {
  .brand-wrap .nd-brand-wordmark,
  html.nd-mobile-runtime .brand-wrap .nd-brand-wordmark {
    width: 102px;
    max-width: 102px !important;
    height: 16px;
  }
  .brand-wrap > div:last-child,
  html.nd-mobile-runtime .brand-wrap > div:last-child {
    width: 102px;
    max-width: 102px;
  }
  .auth-brand .nd-brand-wordmark {
    width: min(206px, 59vw);
    max-width: 206px !important;
    height: 32px;
  }
}

/* v0.5.67 final layout lock: later legacy polish blocks must not expand the
   two-button timeline beyond the mobile viewport. */
.timeline .time-row { grid-template-columns: minmax(70px, 1fr) auto minmax(70px, 1fr); }
.track-insight-button { min-width: 126px; }

@media (max-width: 560px) {
  .timeline .time-row { grid-template-columns: minmax(55px, 1fr) auto minmax(55px, 1fr); gap: 5px; }
  .track-context-actions { gap: 4px; }
  .track-context-actions .lyrics-button { min-width: 82px; padding-inline: 7px; gap: 5px; font-size: 7.6px; }
  .track-context-actions .track-insight-button { min-width: 100px; padding-inline: 6px; letter-spacing: .105em; }
}

@media (max-width: 370px) {
  .timeline .time-row { grid-template-columns: minmax(48px, 1fr) auto minmax(48px, 1fr); gap: 4px; }
  .track-context-actions .lyrics-button { min-width: 72px; padding-inline: 5px; }
  .track-context-actions .track-insight-button { min-width: 96px; }
  .track-context-actions :is(.lyrics-button-icon, .track-insight-button-icon) { display: none; }
}

/* ND Play v0.5.69 · Mobile Timing Lock
   Playback clocks own their complete glyph width; the centre controls absorb
   the remaining space. Synced lyrics are followed inside the real scrollport. */
.timeline .time-row {
  grid-template-columns: max-content minmax(0, 1fr) max-content;
}
.time-readout {
  width: max-content;
  min-width: 0;
  overflow: visible;
  white-space: nowrap;
}
.time-readout:first-child {
  justify-self: start;
  text-align: left;
}
.time-readout-remaining {
  justify-self: end;
  text-align: right;
}
.time-readout b {
  box-sizing: content-box;
  min-width: 4.7ch;
  white-space: nowrap;
}
.track-context-actions {
  width: max-content;
  max-width: 100%;
  justify-self: center;
}
.lyrics-content {
  scroll-padding-block: clamp(24px, 10vh, 88px);
}
.lyrics-lines.is-synced li {
  scroll-margin-block: clamp(24px, 10vh, 88px);
}

@media (max-width: 560px) {
  .timeline .time-row {
    grid-template-columns: max-content minmax(0, 1fr) max-content;
  }
  .time-readout b {
    min-width: 4.5ch;
    font-size: clamp(18px, 5.7vw, 22px);
    letter-spacing: .025em;
  }
}

@media (max-width: 370px) {
  .timeline .time-row {
    grid-template-columns: max-content minmax(0, 1fr) max-content;
    gap: 4px;
  }
  .track-context-actions { gap: 4px; }
  .track-context-actions .lyrics-button { min-width: 64px; }
  .track-context-actions .track-insight-button { min-width: 88px; }
  .time-readout b {
    min-width: 4.4ch;
    font-size: 18px;
  }
}

/* ND Station keeps both launchers side by side even in the enlarged mobile UI. */
@media (max-width: 620px) {
  html.readability-large .stream-launch-grid .flow-button { min-height: 76px; grid-template-columns: 34px minmax(0,1fr) 16px; padding-inline: 9px; }
  html.readability-large .stream-launch-grid .flow-button strong { font-size: 12px; }
  html.readability-large .stream-launch-grid .flow-button small { font-size: 8px; letter-spacing: .055em; }
}

/* ND Play v0.5.73 · Station UX + UI Accent
   One-click station launch, explicit seed selector and a cleaner editorial beacon. */
.station-launch-control {
  min-width: 0;
  height: 100%;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 48px;
  gap: 6px;
}
.station-launch-control .station-button {
  width: 100%;
  border-radius: 18px 12px 12px 18px;
}
.station-options-button {
  position: relative;
  min-width: 0;
  min-height: 72px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(157,124,255,.34);
  border-radius: 12px 18px 18px 12px;
  background:
    radial-gradient(circle at 50% 30%, rgba(157,124,255,.16), transparent 58%),
    linear-gradient(160deg, rgba(20,16,39,.90), rgba(6,10,17,.92));
  color: #b7a6ff;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.045), 0 12px 30px rgba(36,22,82,.10);
  cursor: pointer;
  transition: transform 140ms ease, border-color 180ms ease, background 180ms ease, box-shadow 180ms ease;
}
.station-options-button::before {
  content: "";
  position: absolute;
  inset: 9px 7px;
  border-radius: 10px;
  background: radial-gradient(circle, rgba(157,124,255,.12), transparent 68%);
  opacity: .7;
  pointer-events: none;
}
.station-options-button svg {
  position: relative;
  z-index: 1;
  width: 22px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.station-options-button:hover:not(:disabled) {
  border-color: rgba(157,124,255,.70);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06), 0 0 24px rgba(157,124,255,.12);
}
.station-options-button:active:not(:disabled) { transform: scale(.975); }
.station-options-button.is-active {
  border-color: rgba(157,124,255,.78);
  color: #ded6ff;
  background:
    radial-gradient(circle at 50% 34%, rgba(157,124,255,.28), transparent 62%),
    linear-gradient(160deg, rgba(36,25,74,.96), rgba(8,12,20,.94));
  box-shadow: 0 0 28px rgba(157,124,255,.14), inset 0 1px 0 rgba(255,255,255,.07);
}
.station-options-button:disabled { opacity: .38; cursor: default; }

.station-status-bar {
  position: relative;
  display: grid;
  grid-template-columns: 42px minmax(0,1fr) auto;
  align-items: center;
  gap: 12px;
  margin-top: 9px;
  padding: 11px 12px;
  overflow: hidden;
  border: 1px solid rgba(157,124,255,.30);
  border-radius: 17px;
  background:
    radial-gradient(circle at 7% 50%, rgba(157,124,255,.16), transparent 27%),
    linear-gradient(100deg, rgba(157,124,255,.075), rgba(var(--accent-rgb),.025) 58%, rgba(3,8,13,.54));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.035), 0 12px 34px rgba(25,15,65,.09);
}
.station-status-bar[hidden] { display: none !important; }
.station-status-bar::after {
  content: "";
  position: absolute;
  inset: auto 10% 0 10%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(157,124,255,.56), rgba(var(--accent-rgb),.38), transparent);
  box-shadow: 0 0 13px rgba(157,124,255,.30);
}
.station-status-signal {
  position: relative;
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
}
.station-status-signal i {
  position: absolute;
  border: 1px solid rgba(157,124,255,.75);
  border-radius: 50%;
}
.station-status-signal i:nth-child(1) { width: 7px; height: 7px; background: #a98dff; box-shadow: 0 0 13px rgba(157,124,255,.65); }
.station-status-signal i:nth-child(2) { width: 21px; height: 21px; border-inline-color: transparent; }
.station-status-signal i:nth-child(3) { width: 35px; height: 35px; border-block-color: transparent; }
body.is-playing:not(.motion-suspended) .station-status-signal i:nth-child(2) { animation: nd-station-orbit 4.3s linear infinite; }
body.is-playing:not(.motion-suspended) .station-status-signal i:nth-child(3) { animation: nd-station-orbit-reverse 6.1s linear infinite; }
.station-status-copy { min-width: 0; display: grid; gap: 3px; }
.station-status-copy small { color: rgba(177,156,255,.78); font-size: 6.6px; font-weight: 950; letter-spacing: .15em; }
.station-status-copy strong { overflow: hidden; color: #f0edff; font-size: 12px; line-height: 1.2; text-overflow: ellipsis; white-space: nowrap; }
.station-status-copy b { overflow: hidden; color: var(--muted); font-size: 7.6px; font-weight: 700; text-overflow: ellipsis; white-space: nowrap; }
.station-status-actions { display: flex; align-items: center; gap: 6px; }
.station-status-actions button {
  min-height: 34px;
  padding: 0 10px;
  border: 1px solid rgba(157,124,255,.30);
  border-radius: 11px;
  background: rgba(157,124,255,.075);
  color: #ded7ff;
  font-size: 6.8px;
  font-weight: 950;
  letter-spacing: .10em;
  white-space: nowrap;
}
.station-status-actions button:hover { border-color: rgba(157,124,255,.66); background: rgba(157,124,255,.14); }
.station-status-actions #stationRestoreButton { border-color: rgba(var(--accent-rgb),.26); background: rgba(var(--accent-rgb),.055); color: var(--accent); }
.station-modes button:last-child { grid-column: 1 / -1; }
.album-action-station {
  border-color: rgba(157,124,255,.42);
  background: linear-gradient(135deg, rgba(157,124,255,.14), rgba(157,124,255,.045));
  color: #ded7ff;
  box-shadow: inset 0 0 16px rgba(157,124,255,.035);
}
.track-quick-actions-list [data-track-quick-action="station"] {
  border-color: rgba(157,124,255,.30);
  background: linear-gradient(100deg, rgba(157,124,255,.085), rgba(255,255,255,.018));
}
.track-quick-actions-list [data-track-quick-action="station"] > i { color: #ad94ff; text-shadow: 0 0 12px rgba(157,124,255,.42); }

/* The channel switch is one luminous control. The former bordered panel inside
   the bordered button is intentionally removed. */
.catalog-flip-button {
  min-height: 64px;
  grid-template-columns: minmax(0,.86fr) 44px minmax(0,1.42fr);
  gap: 8px;
  padding: 7px 9px;
  border-color: rgba(var(--accent-rgb),.28);
  border-radius: 19px;
  background:
    radial-gradient(circle at 14% 50%, rgba(var(--accent-rgb),.12), transparent 28%),
    radial-gradient(circle at 85% 50%, rgba(95,177,255,.09), transparent 35%),
    linear-gradient(130deg, rgba(12,23,31,.94), rgba(4,8,14,.90));
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.05),
    inset 0 0 28px rgba(var(--accent-rgb),.025),
    0 16px 42px rgba(0,0,0,.18),
    0 0 28px rgba(var(--accent-rgb),.07);
}
.catalog-flip-button:hover {
  border-color: rgba(var(--accent-rgb),.52);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.06),
    inset 0 0 30px rgba(var(--accent-rgb),.04),
    0 17px 44px rgba(0,0,0,.20),
    0 0 34px rgba(var(--accent-rgb),.105);
}
.catalog-flip-side {
  align-self: stretch;
  min-height: 48px;
  padding: 0 10px;
  border: 0;
  border-radius: 14px;
  background: transparent;
  box-shadow: none;
}
.catalog-flip-listen {
  justify-content: flex-start;
  color: #eafcff;
  text-shadow: 0 0 14px rgba(var(--accent-rgb),.25);
}
.catalog-flip-listen strong { font-size: 12px; letter-spacing: .14em; }
.catalog-flip-editorial {
  position: relative;
  align-self: stretch;
  display: grid;
  grid-template-columns: 6px minmax(0,1fr) auto;
  align-content: center;
  justify-content: stretch;
  gap: 8px;
  padding: 0 10px;
  overflow: hidden;
  border: 0;
  border-radius: 14px;
  background: transparent;
  box-shadow: none;
}
.catalog-news-copy { gap: 3px; }
.catalog-news-copy small { color: rgba(var(--accent-rgb),.62); font-size: 6.2px; letter-spacing: .18em; }
.catalog-news-copy strong { color: #edf6f8; font-size: 11px; line-height: 1.05; letter-spacing: .11em; text-shadow: 0 0 14px rgba(var(--accent-rgb),.20); }
.catalog-flip-core {
  width: 40px;
  height: 40px;
  border-color: rgba(var(--accent-rgb),.32);
  border-radius: 14px;
  background: radial-gradient(circle, rgba(var(--accent-rgb),.12), rgba(4,10,15,.72));
  color: var(--accent);
  box-shadow: inset 0 0 15px rgba(var(--accent-rgb),.045), 0 0 17px rgba(var(--accent-rgb),.06);
}
.catalog-flip-button:not(.is-editorial) .catalog-flip-listen {
  background: linear-gradient(90deg, rgba(var(--accent-rgb),.115), rgba(var(--accent-rgb),.025));
}
.catalog-flip-button.is-editorial .catalog-flip-editorial,
.catalog-flip-button.has-unread:not(.is-editorial) .catalog-flip-editorial {
  border: 0;
  background: linear-gradient(90deg, rgba(var(--accent-rgb),.035), rgba(var(--accent-rgb),.13));
  box-shadow: none;
}
.catalog-flip-button.is-editorial .catalog-flip-listen { color: rgba(206,220,227,.52); text-shadow: none; background: transparent; }
.catalog-flip-button.is-editorial {
  border-color: rgba(var(--accent-rgb),.48);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.055),
    inset 0 0 34px rgba(var(--accent-rgb),.04),
    0 17px 46px rgba(0,0,0,.20),
    0 0 36px rgba(var(--accent-rgb),.115);
}
.catalog-flip-button.has-unread {
  border-color: rgba(var(--accent-rgb),.46);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.055),
    inset 0 0 30px rgba(var(--accent-rgb),.04),
    0 16px 42px rgba(0,0,0,.18),
    0 0 34px rgba(var(--accent-rgb),.11);
}
.catalog-news-badge { min-height: 22px; padding-inline: 8px; font-size: 6px; }

@media (max-width: 620px) {
  .station-launch-control { grid-template-columns: minmax(0,1fr) 40px; gap: 4px; }
  .station-options-button { min-height: 70px; border-radius: 10px 17px 17px 10px; }
  .station-options-button svg { width: 19px; }
  .station-launch-control .station-button { border-radius: 17px 10px 10px 17px; }
  .station-status-bar { grid-template-columns: 34px minmax(0,1fr); gap: 8px; padding: 10px; }
  .station-status-signal { width: 32px; height: 32px; }
  .station-status-signal i:nth-child(3) { width: 31px; height: 31px; }
  .station-status-actions { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr 1fr; }
  .station-status-actions button { min-height: 36px; }
  .station-status-copy strong { font-size: 10px; }
  .station-status-copy b { font-size: 6.8px; }
  .station-modes button:last-child { grid-column: auto; }
  .catalog-flip-button {
    min-height: 58px;
    grid-template-columns: minmax(0,.76fr) 38px minmax(0,1.55fr);
    gap: 4px;
    padding: 5px 6px;
    border-radius: 17px;
  }
  .catalog-flip-side { min-height: 46px; padding-inline: 6px; }
  .catalog-flip-listen strong { font-size: 9.2px; letter-spacing: .10em; }
  .catalog-flip-editorial { grid-template-columns: 5px minmax(0,1fr) auto; gap: 5px; padding-inline: 6px; }
  .catalog-news-copy small { display: none; }
  .catalog-news-copy strong { font-size: 8.5px; letter-spacing: .075em; }
  .catalog-flip-core { width: 34px; height: 34px; border-radius: 12px; }
  .catalog-news-badge { min-height: 18px; padding-inline: 5px; font-size: 5px; }
}

@media (max-width: 370px) {
  .station-launch-control { grid-template-columns: minmax(0,1fr) 36px; }
  .station-options-button { min-height: 68px; }
  .catalog-flip-button { grid-template-columns: minmax(0,.70fr) 34px minmax(0,1.65fr); }
  .catalog-flip-listen strong { font-size: 8.4px; }
  .catalog-news-copy strong { font-size: 7.7px; }
  .catalog-news-badge { display: none !important; }
}

@media (prefers-reduced-motion: reduce) {
  .station-status-signal i,
  .station-options-button,
  .station-launch-control .station-button { animation: none !important; transition-duration: .01ms !important; }
}

/* v0.5.73 portrait readability lock: the app can stay narrow on a desktop,
   therefore these rules follow the layout mode rather than only viewport size. */
.station-launch-control { grid-template-columns: minmax(0,1fr) 42px; gap: 4px; }
.station-launch-control .station-button {
  grid-template-columns: 34px minmax(0,1fr) 14px;
  gap: 6px;
  padding-inline: 9px;
}
.station-launch-control .station-button .station-symbol { width: 34px; height: 34px; }
.station-launch-control .station-button strong {
  font-size: 11px;
  letter-spacing: .065em;
  white-space: nowrap;
}
.station-launch-control .station-button small {
  font-size: 7px;
  letter-spacing: .055em;
  white-space: normal;
}
.app-shell:not(.layout-wide) .station-status-bar {
  grid-template-columns: 34px minmax(0,1fr);
  gap: 8px;
}
.app-shell:not(.layout-wide) .station-status-actions {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: 1fr 1fr;
}
.app-shell:not(.layout-wide) .station-status-actions button { min-height: 36px; }

@media (max-width: 620px) {
  .station-launch-control { grid-template-columns: minmax(0,1fr) 38px; }
  .station-launch-control .station-button { grid-template-columns: 32px minmax(0,1fr) 12px; padding-inline: 7px; }
  .station-launch-control .station-button strong { font-size: 10px; }
  .station-launch-control .station-button small { font-size: 6.4px; }
}

/* ND Play v0.5.74 · ReplayGain Console + clean ND Station hierarchy
   Compact lossless loudness control and a single source of station context. */
.stream-compact { position: relative; }
.stream-codec {
  max-width: calc(100% - 48px);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.replay-gain-button {
  position: absolute;
  z-index: 7;
  top: 7px;
  right: 7px;
  width: 42px;
  min-width: 42px;
  height: 34px;
  display: grid;
  grid-template-columns: 17px minmax(0,1fr);
  align-items: center;
  gap: 3px;
  padding: 3px 4px;
  border: 1px solid rgba(255,255,255,.105);
  border-radius: 10px;
  background:
    radial-gradient(circle at 35% 35%, rgba(157,124,255,.08), transparent 58%),
    rgba(4,8,14,.72);
  color: rgba(222,229,237,.62);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.025);
  cursor: pointer;
  transition: border-color 160ms ease, background 160ms ease, color 160ms ease, box-shadow 160ms ease, transform 130ms ease;
}
.replay-gain-button:hover {
  border-color: rgba(157,124,255,.42);
  color: #d9d0ff;
  background: rgba(157,124,255,.075);
}
.replay-gain-button:active { transform: scale(.965); }
.replay-gain-button > span:last-child { min-width: 0; display: grid; gap: 0; line-height: 1; text-align: left; }
.replay-gain-button > span:last-child strong { font-size: 6px; font-weight: 950; letter-spacing: .12em; }
.replay-gain-button > span:last-child small { margin-top: 2px; overflow: hidden; font-size: 5.2px; font-weight: 950; letter-spacing: .035em; text-overflow: clip; white-space: nowrap; }
.replay-gain-current-glyph {
  position: relative;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 2px;
}
.replay-gain-current-glyph i {
  width: 3px;
  border-radius: 2px 2px 1px 1px;
  background: currentColor;
  opacity: .62;
  box-shadow: 0 0 5px currentColor;
}
.replay-gain-current-glyph b {
  position: absolute;
  right: 0;
  bottom: 8px;
  left: 0;
  height: 1px;
  background: currentColor;
  box-shadow: 0 0 6px currentColor;
  opacity: .72;
}
.replay-gain-button.is-active {
  border-color: rgba(157,124,255,.62);
  color: #b89fff;
  background:
    radial-gradient(circle at 30% 35%, rgba(157,124,255,.22), transparent 65%),
    rgba(31,21,65,.78);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.045), 0 0 18px rgba(157,124,255,.14);
}
.replay-gain-button.is-missing { border-color: rgba(255,255,255,.13); color: rgba(201,207,217,.46); }
.replay-gain-button.is-unavailable { color: rgba(255,167,167,.58); border-color: rgba(255,110,110,.18); }

.replay-gain-panel { position: fixed; z-index: 216; inset: 0; visibility: hidden; pointer-events: none; }
.replay-gain-panel.open { visibility: visible; pointer-events: auto; }
.replay-gain-backdrop { position: absolute; inset: 0; border: 0; background: rgba(2,5,9,.76); backdrop-filter: blur(15px) saturate(.82); opacity: 0; transition: opacity 180ms ease; }
.replay-gain-panel.open .replay-gain-backdrop { opacity: 1; }
.replay-gain-sheet {
  position: absolute;
  top: 50%;
  left: 50%;
  width: min(440px, calc(100vw - 28px));
  max-height: min(720px, calc(100dvh - 28px));
  padding: 20px;
  overflow: auto;
  border: 1px solid rgba(157,124,255,.31);
  border-radius: 24px;
  background:
    radial-gradient(circle at 8% 8%, rgba(157,124,255,.15), transparent 30%),
    radial-gradient(circle at 92% 88%, rgba(var(--accent-rgb),.075), transparent 34%),
    linear-gradient(155deg, rgba(13,15,28,.985), rgba(4,8,14,.99));
  box-shadow: 0 28px 90px rgba(0,0,0,.58), inset 0 1px 0 rgba(255,255,255,.045);
  opacity: 0;
  transform: translate(-50%, -47%) scale(.98);
  transition: opacity 180ms ease, transform 210ms cubic-bezier(.2,.8,.2,1);
}
.replay-gain-panel.open .replay-gain-sheet { opacity: 1; transform: translate(-50%, -50%) scale(1); }
.replay-gain-sheet-signal { height: 3px; display: grid; grid-template-columns: .8fr 1.5fr 2.2fr; gap: 5px; margin: -8px 52px 17px 0; }
.replay-gain-sheet-signal i { border-radius: 999px; background: rgba(157,124,255,.30); }
.replay-gain-sheet-signal i:nth-child(2) { background: rgba(var(--accent-rgb),.42); }
.replay-gain-sheet-signal i:nth-child(3) { background: linear-gradient(90deg, rgba(157,124,255,.72), transparent); }
.replay-gain-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.replay-gain-header p { margin: 0 0 7px; color: #9d7cff; font-size: 7px; font-weight: 950; letter-spacing: .17em; }
.replay-gain-header h2 { margin: 0; font-size: clamp(21px, 5vw, 29px); letter-spacing: -.035em; }
.replay-gain-close { width: 42px; height: 42px; flex: 0 0 auto; display: grid; place-items: center; border: 1px solid rgba(255,255,255,.11); border-radius: 14px; background: rgba(255,255,255,.035); color: var(--text); }
.replay-gain-close svg { width: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }
.replay-gain-current {
  display: grid;
  grid-template-columns: 54px minmax(0,1fr);
  align-items: center;
  gap: 13px;
  margin-top: 18px;
  padding: 13px;
  border: 1px solid rgba(157,124,255,.19);
  border-radius: 17px;
  background: linear-gradient(100deg, rgba(157,124,255,.075), rgba(255,255,255,.018));
}
.replay-gain-current-glyph { width: 48px; height: 42px; color: #a98dff; }
.replay-gain-current-glyph i { width: 6px; }
.replay-gain-current-glyph i:nth-child(1) { height: 18px; }
.replay-gain-current-glyph i:nth-child(2) { height: 36px; }
.replay-gain-current-glyph i:nth-child(3) { height: 25px; }
.replay-gain-current-glyph b { bottom: 19px; }
.replay-gain-current > span:last-child { min-width: 0; display: grid; gap: 4px; }
.replay-gain-current small { color: rgba(177,156,255,.72); font-size: 6.5px; font-weight: 950; letter-spacing: .15em; }
.replay-gain-current strong { overflow: hidden; font-size: 13px; line-height: 1.25; text-overflow: ellipsis; white-space: nowrap; }
.replay-gain-current span > b { overflow: hidden; color: var(--muted); font-size: 7.2px; line-height: 1.35; text-overflow: ellipsis; white-space: nowrap; }
.replay-gain-modes { display: grid; gap: 8px; margin-top: 14px; }
.replay-gain-modes button {
  min-height: 68px;
  display: grid;
  grid-template-columns: 28px minmax(0,1fr) 17px;
  align-items: center;
  gap: 10px;
  padding: 11px 12px;
  border: 1px solid rgba(255,255,255,.09);
  border-radius: 15px;
  background: rgba(255,255,255,.022);
  color: var(--text);
  text-align: left;
  transition: border-color 160ms ease, background 160ms ease, transform 130ms ease;
}
.replay-gain-modes button:hover { border-color: rgba(157,124,255,.42); background: rgba(157,124,255,.055); }
.replay-gain-modes button:active { transform: scale(.986); }
.replay-gain-modes button > i { color: rgba(157,124,255,.62); font-size: 8px; font-style: normal; font-weight: 950; letter-spacing: .08em; }
.replay-gain-modes button > span { min-width: 0; display: grid; gap: 4px; }
.replay-gain-modes button strong { font-size: 10px; letter-spacing: .09em; }
.replay-gain-modes button small { color: var(--muted); font-size: 7.4px; line-height: 1.35; }
.replay-gain-modes button > b { width: 13px; height: 13px; border: 1px solid rgba(255,255,255,.22); border-radius: 50%; box-shadow: inset 0 0 0 3px rgba(5,8,14,.95); }
.replay-gain-modes button.is-selected { border-color: rgba(157,124,255,.52); background: linear-gradient(100deg, rgba(157,124,255,.12), rgba(157,124,255,.025)); }
.replay-gain-modes button.is-selected > b { border-color: #aa91ff; background: #aa91ff; box-shadow: inset 0 0 0 3px rgba(13,11,24,.98), 0 0 11px rgba(157,124,255,.46); }
.replay-gain-footer { display: grid; grid-template-columns: 5px minmax(0,1fr); align-items: start; gap: 8px; margin-top: 14px; padding-top: 12px; border-top: 1px solid rgba(255,255,255,.07); }
.replay-gain-footer > i { width: 5px; height: 5px; margin-top: 3px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 9px rgba(var(--accent-rgb),.7); }
.replay-gain-footer span { color: rgba(214,222,230,.58); font-size: 7px; line-height: 1.5; letter-spacing: .035em; }

/* ND Station is one split control: action on the left, direction selector on the right. */
.station-launch-control {
  grid-template-columns: minmax(0,1fr) 40px !important;
  gap: 0 !important;
  overflow: hidden;
  border: 1px solid rgba(157,124,255,.35);
  border-radius: 19px;
  background: linear-gradient(145deg, rgba(30,23,57,.86), rgba(7,10,17,.94));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.045), 0 13px 32px rgba(30,17,70,.10);
}
.station-launch-control .station-button {
  min-height: 100%;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent;
  box-shadow: none !important;
}
.station-launch-control .station-button:hover { background: rgba(157,124,255,.055); }
.station-options-button {
  min-height: 100% !important;
  border: 0 !important;
  border-left: 1px solid rgba(157,124,255,.24) !important;
  border-radius: 0 !important;
  background: linear-gradient(180deg, rgba(157,124,255,.08), rgba(157,124,255,.025)) !important;
  box-shadow: none !important;
}
.station-options-button::before { inset: 7px 5px; }
.station-options-button:hover:not(:disabled) { background: rgba(157,124,255,.14) !important; }
.station-options-button.is-active { background: rgba(157,124,255,.17) !important; }
.station-launch-control:has(.station-button.is-active) {
  border-color: rgba(157,124,255,.68);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.055), 0 0 28px rgba(157,124,255,.13);
}
.station-launch-control .station-button small {
  max-width: 18ch;
  color: rgba(190,172,255,.82);
  line-height: 1.35;
}
.station-status-copy strong {
  display: -webkit-box;
  overflow: hidden;
  white-space: normal;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
}
.station-status-copy b { color: rgba(189,193,207,.62); letter-spacing: .035em; }

@media (max-width: 620px) {
  .replay-gain-button { top: 6px; right: 6px; width: 38px; min-width: 38px; height: 31px; grid-template-columns: 15px minmax(0,1fr); padding-inline: 3px; border-radius: 9px; }
  .replay-gain-button > span:last-child strong { font-size: 5.4px; }
  .replay-gain-button > span:last-child small { font-size: 4.7px; }
  .stream-codec { max-width: calc(100% - 42px); }
  .replay-gain-sheet { top: auto; bottom: 10px; width: calc(100vw - 20px); max-height: calc(100dvh - 20px); padding: 17px; border-radius: 22px; transform: translate(-50%, 22px); }
  .replay-gain-panel.open .replay-gain-sheet { transform: translate(-50%, 0); }
  .replay-gain-current { grid-template-columns: 45px minmax(0,1fr); gap: 10px; padding: 11px; }
  .replay-gain-current-glyph { width: 40px; height: 37px; }
  .replay-gain-current strong { font-size: 11px; }
  .replay-gain-current span > b { font-size: 6.4px; }
  .replay-gain-modes button { min-height: 64px; }
  .station-launch-control { grid-template-columns: minmax(0,1fr) 38px !important; border-radius: 18px; }
  .station-status-copy strong { font-size: 10px; line-height: 1.25; }
}

@media (max-width: 370px) {
  .replay-gain-button { width: 36px; min-width: 36px; }
  .replay-gain-current span > b { white-space: normal; }
  .station-launch-control { grid-template-columns: minmax(0,1fr) 36px !important; }
}

@media (prefers-reduced-motion: reduce) {
  .replay-gain-button,
  .replay-gain-backdrop,
  .replay-gain-sheet,
  .replay-gain-modes button { animation: none !important; transition-duration: .01ms !important; }
}


/* ND Play v0.5.75 · Interface Polish
   One final, authoritative layer for stream legibility, discoverable layout
   switching, unified timing colour and an explicit loudness control. */
.topbar-brand-zone {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 11px;
}
.topbar-brand-zone .brand-wrap { flex: 0 1 auto; }

.layout-mode-button .layout-mode-visual {
  position: relative;
  width: 25px;
  height: 25px;
  display: grid;
  place-items: center;
}
.layout-mode-button .layout-mode-visual .layout-icon {
  inset: 2px;
  width: 21px;
  height: 21px;
}

@media (min-width: 900px) {
  .topbar-brand-zone .layout-mode-button {
    width: auto;
    min-width: 101px;
    height: 42px;
    flex: 0 0 auto;
    grid-template-columns: 25px minmax(0, 1fr);
    align-items: center;
    gap: 7px;
    padding: 5px 10px 5px 8px;
  }
}

/* The two clocks use the active ND Play accent consistently. */
.time-readout-remaining b {
  background-image: radial-gradient(circle,
    rgba(252,255,254,.99) 0 .56px,
    rgba(var(--accent-rgb),.96) .64px .96px,
    transparent 1.06px);
  filter: drop-shadow(0 0 1.15px rgba(var(--accent-rgb),.18));
}

/* Stream console: larger codec, mode and live values without changing its data model. */
.stream-info { padding: 18px 14px; }
.stream-codec {
  max-width: calc(100% - 98px);
  padding: 7px 10px 6px;
  font-size: clamp(29px, 2.55vw, 38px);
}
.stream-mode-line { gap: 8px; margin-top: 10px; }
.stream-mode-line > span { font-size: 7.8px; }
.stream-mode-line > b { font-size: 10.6px; }
.stream-metrics { gap: 15px 13px; }
.stream-metric { gap: 5px; }
.stream-metric > span { font-size: 8.2px; }
.stream-metric > b,
.stream-metric:last-child > b { font-size: 15.5px; }

.replay-gain-button {
  top: 8px;
  right: 8px;
  width: 90px;
  min-width: 90px;
  height: 43px;
  grid-template-columns: 23px minmax(0, 1fr);
  gap: 7px;
  padding: 5px 8px;
  border-radius: 12px;
}
.replay-gain-button > span:last-child { gap: 3px; }
.replay-gain-button > span:last-child strong {
  font-size: 7.2px;
  letter-spacing: .075em;
}
.replay-gain-button > span:last-child small {
  margin-top: 0;
  font-size: 6.1px;
  letter-spacing: .035em;
}

/* The iPhone-only SYS volume behaviour is intentionally unchanged. */
[role="dialog"][tabindex="-1"]:focus { outline: none; }

@media (max-width: 620px) {
  html.nd-mobile-runtime .stream-info { padding: 10px 9px; }
  html.nd-mobile-runtime .stream-codec {
    max-width: calc(100% - 82px);
    padding: 5px 7px 4px;
    font-size: 20px;
  }
  html.nd-mobile-runtime .stream-mode-line { gap: 5px; margin-top: 8px; }
  html.nd-mobile-runtime .stream-mode-line > span { font-size: 5.7px; }
  html.nd-mobile-runtime .stream-mode-line > b { font-size: 8.2px; }
  html.nd-mobile-runtime .stream-metrics { gap: 11px 8px; }
  html.nd-mobile-runtime .stream-metric > span { font-size: 5.9px; }
  html.nd-mobile-runtime .stream-metric > b,
  html.nd-mobile-runtime .stream-metric:last-child > b { font-size: 11.8px; }

  .replay-gain-button {
    top: 6px;
    right: 6px;
    width: 76px;
    min-width: 76px;
    height: 37px;
    grid-template-columns: 19px minmax(0, 1fr);
    gap: 5px;
    padding: 4px 6px;
    border-radius: 10px;
  }
  .replay-gain-button > span:last-child strong { font-size: 6.2px; }
  .replay-gain-button > span:last-child small { font-size: 5.3px; }
}

@media (max-width: 370px) {
  .replay-gain-button { width: 72px; min-width: 72px; padding-inline: 5px; }
  .replay-gain-button > span:last-child strong { font-size: 5.9px; }
  .replay-gain-button > span:last-child small { font-size: 5px; }
  html.nd-mobile-runtime .stream-metric > b,
  html.nd-mobile-runtime .stream-metric:last-child > b { font-size: 10.8px; }
}


/* ND Play v0.5.76 · Control Row Polish
   ReplayGain leaves the stream console and joins the queue in one stable,
   single-border control row. The desktop layout switch is icon-only. */

/* The stream card now owns only stream information. */
.stream-codec {
  max-width: 100%;
}

/* The layout switch remains discoverable through its icon, title and aria-label. */
.topbar-brand-zone .layout-mode-button {
  width: 42px;
  min-width: 42px;
  height: 42px;
  flex-basis: 42px;
  grid-template-columns: 1fr;
  gap: 0;
  padding: 0;
}
.topbar-brand-zone .layout-mode-button .layout-mode-visual {
  width: 27px;
  height: 27px;
}

/* One functional row: ReplayGain at left, queue at right. */
.track-context-row.control-row {
  display: grid;
  grid-template-columns: minmax(0, 1.12fr) minmax(0, .88fr);
  align-items: stretch;
  gap: 10px;
  margin-bottom: 9px;
}
.track-context-row.control-row .track-context[hidden] {
  display: none !important;
}
.control-row-button {
  position: relative;
  top: auto;
  right: auto;
  width: 100%;
  min-width: 0;
  min-height: 39px;
  height: 39px;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 7px;
  padding: 6px 11px;
  overflow: hidden;
  border: 1px solid rgba(var(--accent-rgb), .40);
  border-radius: 12px;
  background:
    radial-gradient(circle at 100% 0%, rgba(var(--accent-rgb), .15), transparent 54%),
    linear-gradient(135deg, rgba(var(--accent-rgb), .10), rgba(var(--accent-rgb), .025));
  color: rgba(226, 239, 241, .76);
  box-shadow: inset 0 1px rgba(255,255,255,.035), 0 0 20px rgba(var(--accent-rgb),.045);
  font-family: var(--nd-terminal-font, ui-monospace, monospace);
  line-height: 1;
  cursor: pointer;
  transition: transform 150ms ease, color 180ms ease, border-color 180ms ease, background 200ms ease, box-shadow 200ms ease;
}
.control-row-button:hover {
  color: var(--text);
  border-color: rgba(var(--accent-rgb), .58);
  background: rgba(var(--accent-rgb), .09);
  box-shadow: inset 0 1px rgba(255,255,255,.045), 0 0 22px rgba(var(--accent-rgb),.08);
}
.control-row-button:active {
  transform: scale(.975);
}
.control-row-button[aria-expanded="true"] {
  color: var(--accent);
  border-color: rgba(var(--accent-rgb), .68);
  background: rgba(var(--accent-rgb), .12);
}
.control-row-label {
  flex: 0 1 auto;
  min-width: 0;
  overflow: hidden;
  color: rgba(216, 229, 233, .70);
  font-size: 8.6px;
  font-weight: 900;
  letter-spacing: .12em;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.control-row-button > strong {
  flex: 0 0 auto;
  min-width: 0;
  min-height: 0;
  display: inline;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  color: var(--accent);
  font-size: 10.6px;
  font-weight: 950;
  font-variant-numeric: tabular-nums;
  letter-spacing: .055em;
  line-height: 1;
  text-align: left;
  white-space: nowrap;
}
.replay-gain-button.control-row-button {
  grid-template-columns: none;
}
.replay-gain-button.control-row-button.is-active {
  border-color: rgba(157,124,255,.58);
  color: #c8b9ff;
  background:
    radial-gradient(circle at 100% 0%, rgba(157,124,255,.18), transparent 56%),
    linear-gradient(135deg, rgba(157,124,255,.11), rgba(157,124,255,.025));
  box-shadow: inset 0 1px rgba(255,255,255,.04), 0 0 20px rgba(157,124,255,.10);
}
.replay-gain-button.control-row-button.is-active > strong {
  color: #bda9ff;
}
.replay-gain-button.control-row-button.is-missing {
  border-color: rgba(255,255,255,.14);
  color: rgba(201,207,217,.52);
}
.replay-gain-button.control-row-button.is-unavailable {
  color: rgba(255,167,167,.68);
  border-color: rgba(255,110,110,.24);
}
.queue-trigger.control-row-button {
  justify-content: flex-end;
  padding-inline: 10px;
}
.queue-trigger.control-row-button > strong {
  min-width: 6.3ch;
  min-height: 0;
  display: inline;
  place-items: initial;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  font-size: 10.6px;
  text-align: right;
}

@media (max-width: 620px) {
  html.nd-mobile-runtime .stream-codec {
    max-width: 100%;
  }
  html.nd-mobile-runtime .track-context-row.control-row {
    grid-template-columns: minmax(0, 1.12fr) minmax(0, .88fr);
    gap: 7px;
    margin-bottom: 10px;
  }
  html.nd-mobile-runtime .control-row-button {
    min-height: 39px;
    height: 39px;
    gap: 5px;
    padding-inline: 9px;
    border-radius: 11px;
  }
  html.nd-mobile-runtime .control-row-label {
    font-size: 7.1px;
    letter-spacing: .09em;
  }
  html.nd-mobile-runtime .control-row-button > strong,
  html.nd-mobile-runtime .queue-trigger.control-row-button > strong {
    font-size: 8.7px;
    letter-spacing: .02em;
  }
  html.nd-mobile-runtime .queue-trigger.control-row-button {
    padding-inline: 8px;
  }
}

@media (max-width: 370px) {
  html.nd-mobile-runtime .track-context-row.control-row {
    grid-template-columns: minmax(0, 1.16fr) minmax(0, .84fr);
    gap: 5px;
  }
  html.nd-mobile-runtime .control-row-button {
    gap: 4px;
    padding-inline: 7px;
  }
  html.nd-mobile-runtime .control-row-label {
    font-size: 6.5px;
    letter-spacing: .065em;
  }
  html.nd-mobile-runtime .control-row-button > strong,
  html.nd-mobile-runtime .queue-trigger.control-row-button > strong {
    font-size: 8px;
  }
}

/* ND Play v0.5.77 · Mobile Navigation & Desktop Stream Polish
   Compact personal navigation on phones, calmer mobile footer geometry,
   and a desktop-only readability lift for live stream telemetry. */

/* Desktop stream console: use the available panel instead of microtype. */
@media (min-width: 900px) {
  html:not(.nd-mobile-runtime) .app-shell .stream-info {
    padding: 20px 16px 18px;
  }
  html:not(.nd-mobile-runtime) .app-shell .stream-info .stream-codec {
    padding: 8px 11px 7px;
    font-size: clamp(34px, 3vw, 42px);
    line-height: .98;
  }
  html:not(.nd-mobile-runtime) .app-shell .stream-info .stream-mode-line {
    gap: 9px;
    margin-top: 12px;
  }
  html:not(.nd-mobile-runtime) .app-shell .stream-info .stream-mode-line > span {
    font-size: 9px;
    letter-spacing: .15em;
  }
  html:not(.nd-mobile-runtime) .app-shell .stream-info .stream-mode-line > b {
    font-size: 12.4px;
    letter-spacing: .08em;
  }
  html:not(.nd-mobile-runtime) .app-shell .stream-info .stream-metrics {
    gap: 16px 14px;
  }
  html:not(.nd-mobile-runtime) .app-shell .stream-info .stream-metric {
    gap: 6px;
  }
  html:not(.nd-mobile-runtime) .app-shell .stream-info .stream-metric > span {
    font-size: 9.2px;
    letter-spacing: .14em;
  }
  html:not(.nd-mobile-runtime) .app-shell .stream-info .stream-metric > b,
  html:not(.nd-mobile-runtime) .app-shell .stream-info .stream-metric:last-child > b {
    font-size: 18.5px;
    line-height: 1.05;
    letter-spacing: .025em;
  }
}

/* Physical phones: Archive and Listening Log are peer actions in one compact row. */
@media (max-width: 720px) {
  html.nd-mobile-runtime .personal-launch-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    grid-auto-rows: 82px !important;
    gap: 8px;
    margin-top: 8px;
  }
  html.nd-mobile-runtime .personal-launch-grid > .archive-launch,
  html.nd-mobile-runtime .personal-launch-grid > .listening-log-launch {
    width: 100%;
    height: 82px !important;
    min-height: 82px !important;
    grid-template-columns: 42px minmax(0, 1fr) !important;
    gap: 9px;
    padding: 9px 10px;
    border-radius: 16px;
  }
  html.nd-mobile-runtime .personal-launch-grid .archive-launch-mark,
  html.nd-mobile-runtime .personal-launch-grid .listening-log-launch-mark {
    width: 42px !important;
    height: 42px !important;
    min-width: 42px;
    border-radius: 12px;
  }
  html.nd-mobile-runtime .personal-launch-grid > .archive-launch strong,
  html.nd-mobile-runtime .personal-launch-grid > .listening-log-launch strong,
  html.readability-large.nd-mobile-runtime .personal-launch-grid > .archive-launch strong,
  html.readability-large.nd-mobile-runtime .personal-launch-grid > .listening-log-launch strong {
    min-width: 0;
    overflow: hidden;
    font-size: clamp(14px, 4.35vw, 17px) !important;
    letter-spacing: .04em;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  html.nd-mobile-runtime .personal-launch-grid + .listen-later-section[hidden] + .mixes-section,
  html.nd-mobile-runtime .personal-launch-grid + .mixes-section {
    margin-top: 10px;
  }

  /* Three sectors stay intact; diagnostics becomes a compact utility action. */
  html.nd-mobile-runtime .status-strip.status-console {
    grid-template-columns: minmax(68px, 1fr) minmax(82px, .75fr) minmax(170px, 1.35fr) !important;
    min-height: 58px;
  }
  html.nd-mobile-runtime .status-console .status-pane {
    padding: 9px 10px;
  }
  html.nd-mobile-runtime .status-pane-app {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 7px;
    padding-inline: 10px !important;
  }
  html.nd-mobile-runtime .app-version-row {
    min-width: 0;
    grid-template-columns: auto minmax(5.4ch, 1fr);
    gap: 2px 5px;
  }
  html.nd-mobile-runtime .app-version-row strong {
    min-width: 5.4ch;
    overflow: visible;
    text-overflow: clip;
  }
  html.nd-mobile-runtime .app-install-state {
    grid-column: 1 / -1;
    grid-row: 2;
  }
  html.nd-mobile-runtime .app-utility-actions {
    flex-wrap: wrap;
    gap: 4px;
  }
  html.nd-mobile-runtime .utility-label-full {
    display: none;
  }
  html.nd-mobile-runtime .utility-label-short {
    display: inline;
  }
  html.nd-mobile-runtime .app-diagnostics-button {
    min-width: 57px;
    min-height: 29px;
    height: 29px;
    padding-inline: 8px;
    border-radius: 10px;
    font-size: 6.7px;
    letter-spacing: .08em;
  }
}

@media (max-width: 370px) {
  html.nd-mobile-runtime .personal-launch-grid {
    grid-auto-rows: 76px !important;
    gap: 6px;
  }
  html.nd-mobile-runtime .personal-launch-grid > .archive-launch,
  html.nd-mobile-runtime .personal-launch-grid > .listening-log-launch {
    height: 76px !important;
    min-height: 76px !important;
    grid-template-columns: 38px minmax(0, 1fr) !important;
    gap: 7px;
    padding-inline: 8px;
  }
  html.nd-mobile-runtime .personal-launch-grid .archive-launch-mark,
  html.nd-mobile-runtime .personal-launch-grid .listening-log-launch-mark {
    width: 38px !important;
    height: 38px !important;
    min-width: 38px;
  }
  html.nd-mobile-runtime .personal-launch-grid > .archive-launch strong,
  html.nd-mobile-runtime .personal-launch-grid > .listening-log-launch strong,
  html.readability-large.nd-mobile-runtime .personal-launch-grid > .archive-launch strong,
  html.readability-large.nd-mobile-runtime .personal-launch-grid > .listening-log-launch strong {
    font-size: 13.5px !important;
  }
  html.nd-mobile-runtime .status-strip.status-console {
    grid-template-columns: minmax(62px, 1fr) minmax(76px, .72fr) minmax(160px, 1.3fr) !important;
  }
  html.nd-mobile-runtime .app-diagnostics-button {
    min-width: 52px;
    padding-inline: 6px;
    font-size: 6.2px;
  }
}


/* ND Play v0.5.78 · ND PLAY Reporter */
.flowweek-reporter-trigger {
  width: 100%;
  color: inherit;
  text-align: left;
  font: inherit;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  transition: border-color 180ms ease, background 180ms ease, transform 140ms ease, box-shadow 180ms ease;
}
.flowweek-reporter-trigger:hover,
.flowweek-reporter-trigger:focus-visible {
  border-color: rgba(var(--accent-rgb),.48);
  background:
    linear-gradient(90deg, transparent, rgba(var(--accent-rgb),.12), transparent) 0 0 / 100% 1px no-repeat,
    radial-gradient(circle at 100% 0%, rgba(var(--accent-rgb),.18), transparent 48%),
    rgba(var(--accent-rgb),.038);
  box-shadow: inset 0 1px rgba(255,255,255,.04), 0 0 24px rgba(var(--accent-rgb),.07);
}
.flowweek-reporter-trigger:active { transform: scale(.992); }
.flowweek-reporter-cta {
  display: block;
  margin-top: auto;
  padding-top: 8px;
  color: var(--accent);
  font-size: 7px;
  font-weight: 900;
  letter-spacing: .13em;
}
.flowweek-reporter-trigger > p {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 7;
  overflow: hidden;
}
.flowweek-reporter-trigger time { margin-top: 6px; }

.flowweek-reporter-panel {
  position: fixed;
  z-index: 170;
  inset: 0;
  visibility: hidden;
  pointer-events: none;
}
.flowweek-reporter-panel.open { visibility: visible; pointer-events: auto; }
.flowweek-reporter-backdrop {
  position: absolute;
  inset: 0;
  width: 100%;
  border: 0;
  background: rgba(2,5,9,.88);
  opacity: 0;
  transition: opacity 180ms ease;
}
.flowweek-reporter-panel.open .flowweek-reporter-backdrop { opacity: 1; }
.flowweek-reporter-sheet {
  position: absolute;
  top: max(12px, env(safe-area-inset-top));
  right: 12px;
  bottom: max(12px, env(safe-area-inset-bottom));
  left: 12px;
  width: min(900px, calc(100vw - 24px));
  margin: auto;
  overflow: hidden;
  border: 1px solid rgba(var(--accent-rgb),.32);
  border-radius: 26px;
  background:
    linear-gradient(180deg, rgba(var(--accent-rgb),.085), transparent 230px),
    radial-gradient(circle at 100% 0%, rgba(var(--accent-rgb),.12), transparent 38%),
    #090c12;
  box-shadow: 0 28px 90px rgba(0,0,0,.55), inset 0 1px rgba(255,255,255,.04);
  opacity: 0;
  transform: translateY(14px) scale(.992);
  transition: opacity 180ms ease, transform 260ms cubic-bezier(.16,1,.3,1);
}
.flowweek-reporter-panel.open .flowweek-reporter-sheet { opacity: 1; transform: none; }
.flowweek-reporter-header {
  position: absolute;
  z-index: 4;
  top: 0;
  right: 0;
  left: 0;
  min-height: 72px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 16px 18px;
  border-bottom: 1px solid rgba(var(--accent-rgb),.14);
  background: rgba(7,10,15,.94);
}
.flowweek-reporter-header div { min-width: 0; }
.flowweek-reporter-header p {
  margin: 0 0 5px;
  color: var(--accent);
  font-size: 9px;
  font-weight: 900;
  letter-spacing: .2em;
}
.flowweek-reporter-header span {
  color: rgba(255,255,255,.52);
  font-size: 8px;
  font-weight: 900;
  letter-spacing: .12em;
}
.flowweek-reporter-close {
  position: relative;
  width: 40px;
  height: 40px;
  flex: 0 0 40px;
  border: 1px solid rgba(var(--accent-rgb),.25);
  border-radius: 13px;
  background: rgba(var(--accent-rgb),.035);
}
.flowweek-reporter-close span { position: absolute; top: 19px; left: 11px; width: 17px; height: 1px; background: rgba(255,255,255,.8); }
.flowweek-reporter-close span:first-child { transform: rotate(45deg); }
.flowweek-reporter-close span:last-child { transform: rotate(-45deg); }
.flowweek-reporter-status,
.flowweek-reporter-content {
  position: absolute;
  inset: 73px 0 0;
  overflow: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: rgba(var(--accent-rgb),.34) transparent;
}
.flowweek-reporter-status {
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 12px;
  padding: 32px;
  text-align: center;
}
.flowweek-reporter-status[hidden], .flowweek-reporter-content[hidden] { display: none; }
.flowweek-reporter-status strong { color: var(--accent); font-size: 11px; letter-spacing: .17em; }
.flowweek-reporter-status p { max-width: 48ch; margin: 0; color: rgba(255,255,255,.58); font-size: 13px; line-height: 1.55; }
.flowweek-reporter-process { width: min(310px, 72vw); height: 34px; display: flex; align-items: end; gap: 5px; padding: 5px; }
.flowweek-reporter-process i { width: 25%; height: 4px; border-radius: 99px; background: rgba(var(--accent-rgb),.2); }
.flowweek-reporter-status.is-loading .flowweek-reporter-process i { animation: ndplay-reporter-process 1.35s ease-in-out infinite; }
.flowweek-reporter-status.is-loading .flowweek-reporter-process i:nth-child(2) { animation-delay: 120ms; }
.flowweek-reporter-status.is-loading .flowweek-reporter-process i:nth-child(3) { animation-delay: 240ms; }
.flowweek-reporter-status.is-loading .flowweek-reporter-process i:nth-child(4) { animation-delay: 360ms; }
@keyframes ndplay-reporter-process { 0%,100% { height: 4px; opacity: .28; } 50% { height: 28px; opacity: 1; background: var(--accent); box-shadow: 0 0 14px rgba(var(--accent-rgb),.35); } }
.flowweek-reporter-content { padding: clamp(24px, 5vw, 58px); }
.flowweek-reporter-masthead { max-width: 720px; margin: 0 auto 34px; }
.flowweek-reporter-masthead > p { margin: 0 0 12px; color: var(--accent); font-size: 9px; font-weight: 900; letter-spacing: .16em; text-transform: uppercase; }
.flowweek-reporter-masthead h2 { max-width: 15ch; margin: 0; font-size: clamp(42px, 8vw, 82px); line-height: .94; letter-spacing: -.055em; text-wrap: balance; }
.flowweek-reporter-lead { max-width: 58ch; margin-top: 24px; color: rgba(255,255,255,.78); font-size: clamp(16px, 2.2vw, 21px); line-height: 1.58; }
.flowweek-reporter-masthead > span { display: block; margin-top: 18px; color: rgba(255,255,255,.37); font-size: 7px; font-weight: 900; letter-spacing: .13em; }
.flowweek-reporter-body { max-width: 680px; margin: 0 auto; }
.flowweek-reporter-body p { margin: 0 0 1.25em; color: rgba(244,247,250,.84); font-size: clamp(15px, 1.8vw, 18px); line-height: 1.78; text-wrap: pretty; }
.flowweek-reporter-body p:first-child::first-letter { float: left; margin: .07em .13em 0 0; color: var(--accent); font-size: 4.4em; font-weight: 900; line-height: .72; }
.flowweek-reporter-facts { max-width: 720px; margin: 42px auto 0; padding-top: 24px; border-top: 1px solid rgba(var(--accent-rgb),.2); }
.flowweek-reporter-facts header { display: flex; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.flowweek-reporter-facts header span { color: var(--accent); font-size: 8px; font-weight: 900; letter-spacing: .16em; }
.flowweek-reporter-facts header small { color: rgba(255,255,255,.34); font-size: 7px; font-weight: 900; letter-spacing: .12em; }
.flowweek-reporter-facts > div { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 8px; }
.flowweek-reporter-facts > div span { min-width: 0; padding: 13px; border: 1px solid rgba(var(--accent-rgb),.16); border-radius: 14px; background: rgba(var(--accent-rgb),.028); }
.flowweek-reporter-facts b { display: block; color: var(--accent); font-size: 26px; line-height: 1; }
.flowweek-reporter-facts small { display: block; margin-top: 7px; color: rgba(255,255,255,.42); font-size: 7px; font-weight: 900; letter-spacing: .1em; }
.flowweek-reporter-content footer { max-width: 720px; display: grid; gap: 10px; margin: 36px auto 0; padding: 22px 0 10px; border-top: 1px solid rgba(255,255,255,.07); }
.flowweek-reporter-content footer strong { color: rgba(255,255,255,.78); font-size: 14px; line-height: 1.55; }
.flowweek-reporter-content footer span { color: rgba(255,255,255,.32); font-size: 7px; font-weight: 900; letter-spacing: .11em; text-transform: uppercase; }
@media (max-width: 620px) {
  .flowweek-reporter-sheet { top: max(7px, env(safe-area-inset-top)); right: 7px; bottom: max(7px, env(safe-area-inset-bottom)); left: 7px; width: calc(100vw - 14px); border-radius: 21px; }
  .flowweek-reporter-header { min-height: 64px; padding: 12px 13px; }
  .flowweek-reporter-status, .flowweek-reporter-content { top: 65px; }
  .flowweek-reporter-content { padding: 25px 18px 32px; }
  .flowweek-reporter-masthead { margin-bottom: 27px; }
  .flowweek-reporter-masthead h2 { font-size: clamp(39px, 13vw, 58px); }
  .flowweek-reporter-lead { margin-top: 18px; font-size: 15px; }
  .flowweek-reporter-body p { font-size: 15px; line-height: 1.68; }
  .flowweek-reporter-facts > div { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .flowweek-reporter-facts header { align-items: flex-start; flex-direction: column; gap: 5px; }
}
@media (prefers-reduced-motion: reduce) {
  .flowweek-reporter-backdrop, .flowweek-reporter-sheet, .flowweek-reporter-trigger { transition: none !important; }
  .flowweek-reporter-process i { animation: none !important; }
}

/* ND Play v0.5.80 · Continuity Placement & FLOWWEEK Play Cover */
.player-primary > .session-resume {
  width: 100%;
  margin: 2px 0 0;
}
.player-secondary > .session-resume { display: none !important; }

.flowweek-play-cover {
  display: block;
  padding: 0;
  color: inherit;
  text-align: inherit;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  transition: transform 170ms ease, border-color 190ms ease, box-shadow 220ms ease;
}
.flowweek-play-cover:not(:disabled):hover,
.flowweek-play-cover:not(:disabled):focus-visible {
  transform: translateY(-1px);
  border-color: rgba(var(--accent-rgb), .58);
  box-shadow: inset 0 1px rgba(255,255,255,.06), 0 13px 30px rgba(0,0,0,.22), 0 0 24px rgba(var(--accent-rgb),.09);
}
.flowweek-play-cover:not(:disabled):focus-visible {
  outline: 2px solid rgba(var(--accent-rgb), .72);
  outline-offset: 3px;
}
.flowweek-play-cover:disabled { cursor: default; opacity: .72; }
.flowweek-cover-screen .flowweek-cover-action {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 30px;
  color: #effffb;
  background: linear-gradient(90deg, rgba(5,9,14,.91), rgba(var(--accent-rgb),.18), rgba(5,9,14,.91));
  box-shadow: inset 0 1px rgba(255,255,255,.035), 0 0 16px rgba(var(--accent-rgb),.06);
}
.flowweek-cover-action i {
  width: 0;
  height: 0;
  border-top: 4px solid transparent;
  border-bottom: 4px solid transparent;
  border-left: 7px solid var(--accent);
  filter: drop-shadow(0 0 5px rgba(var(--accent-rgb),.52));
}
.flowweek-cover-action strong {
  font-size: 7px;
  font-weight: 900;
  letter-spacing: .16em;
}
.flowweek-play-cover:not(:disabled):hover .flowweek-cover-action,
.flowweek-play-cover:not(:disabled):focus-visible .flowweek-cover-action {
  border-color: rgba(var(--accent-rgb), .48);
  background: linear-gradient(90deg, rgba(5,9,14,.94), rgba(var(--accent-rgb),.25), rgba(5,9,14,.94));
}

@media (max-width: 560px) {
  .player-primary > .session-resume { margin-top: 0; }
  .flowweek-cover-screen .flowweek-cover-action { min-height: 28px; }
}

/* ND Play v0.5.81 · Private Footer & Quiet Diagnostics
   Public users see only service state and application identity. RRC24 latency
   and active listeners live in the owner-only diagnostics console. */
.status-strip.status-console.status-console-private,
html.nd-mobile-runtime .status-strip.status-console.status-console-private {
  grid-template-columns: minmax(0, 1.05fr) minmax(220px, 1fr) !important;
  min-height: 58px;
}
.status-console-private .status-pane-app {
  border-left: 1px solid rgba(255,255,255,.065);
}
@media (max-width: 720px) {
  .status-strip.status-console.status-console-private,
  html.nd-mobile-runtime .status-strip.status-console.status-console-private {
    grid-template-columns: minmax(0, 1fr) minmax(150px, 1.1fr) !important;
  }
  html.nd-mobile-runtime .status-console-private .status-pane-app {
    grid-template-columns: minmax(0, 1fr) auto;
  }
}
@media (max-width: 370px) {
  .status-strip.status-console.status-console-private,
  html.nd-mobile-runtime .status-strip.status-console.status-console-private {
    grid-template-columns: minmax(0, .92fr) minmax(145px, 1.08fr) !important;
  }
}