/* ═══ LIQUID GLASS DESIGN SYSTEM ═══ */
/* Light mode (default) - WHITE / frosted glass */
:root {
  --bg: #ffffff;
  --bg-gradient: linear-gradient(180deg, #ffffff 0%, #f0f2f5 100%);
  --glass: rgba(255, 255, 255, 0.7);
  --glass-hover: rgba(255, 255, 255, 0.85);
  --glass-border: rgba(255, 255, 255, 0.95);
  --glass-shadow: 0 2px 16px rgba(0, 0, 0, 0.04), 0 0 1px rgba(0, 0, 0, 0.03);
  --glass-shadow-lg: 0 8px 40px rgba(0, 0, 0, 0.06), 0 0 1px rgba(0, 0, 0, 0.04);
  --glass-inset: inset 0 1px 0 rgba(255, 255, 255, 1);
  --card: rgba(255, 255, 255, 0.65);
  --card-hover: rgba(255, 255, 255, 0.85);
  --accent: #6b7280;
  --accent-soft: rgba(107, 114, 128, 0.1);
  --accent-glow: rgba(107, 114, 128, 0.2);
  --accent-text: #374151;
  --text: #1a1a2e;
  --text-dim: #6b7280;
  --text-faint: #9ca3af;
  --green: #10b981;
  --orange: #f59e0b;
  --red: #ef4444;
  --radius: 22px;
  --blur: 24px;
  --safe-top: env(safe-area-inset-top, 20px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --hairline: rgba(0, 0, 0, 0.05);
  --hairline-strong: rgba(0, 0, 0, 0.08);
  --surface-solid: #ffffff;
  --modal-bg: rgba(0, 0, 0, 0.2);
  --terminal-bg: rgba(20, 20, 30, 0.92);
  --terminal-text: #a7f3d0;
  --scrollbar: rgba(107, 114, 128, 0.3);
  --scrollbar-hover: rgba(107, 114, 128, 0.5);
  --chip-bg: rgba(255, 255, 255, 0.6);
  --chip-border: rgba(0, 0, 0, 0.06);
  --sparkline-stroke: rgba(107, 114, 128, 0.6);
  --sparkline-fill: rgba(107, 114, 128, 0.1);
}

/* Dark mode */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #0a0a0f;
    --bg-gradient: linear-gradient(180deg, #0a0a0f 0%, #12121a 100%);
    --glass: rgba(30, 30, 42, 0.55);
    --glass-hover: rgba(40, 40, 55, 0.7);
    --glass-border: rgba(255, 255, 255, 0.12);
    --glass-shadow: 0 2px 16px rgba(0, 0, 0, 0.3), 0 0 1px rgba(0, 0, 0, 0.2);
    --glass-shadow-lg: 0 8px 40px rgba(0, 0, 0, 0.4), 0 0 1px rgba(0, 0, 0, 0.3);
    --glass-inset: inset 0 1px 0 rgba(255, 255, 255, 0.08);
    --card: rgba(30, 30, 42, 0.5);
    --card-hover: rgba(40, 40, 55, 0.7);
    --accent: #9ca3af;
    --accent-soft: rgba(156, 163, 175, 0.15);
    --accent-glow: rgba(156, 163, 175, 0.3);
    --accent-text: #d1d5db;
    --text: #e5e7eb;
    --text-dim: #9ca3af;
    --text-faint: #6b7280;
    --green: #34d399;
    --orange: #fbbf24;
    --red: #f87171;
    --hairline: rgba(255, 255, 255, 0.06);
    --hairline-strong: rgba(255, 255, 255, 0.1);
    --surface-solid: #1a1a2e;
    --modal-bg: rgba(0, 0, 0, 0.6);
    --terminal-bg: rgba(10, 10, 15, 0.95);
    --terminal-text: #6ee7b7;
    --scrollbar: rgba(156, 163, 175, 0.3);
    --scrollbar-hover: rgba(156, 163, 175, 0.5);
    --chip-bg: rgba(255, 255, 255, 0.06);
    --chip-border: rgba(255, 255, 255, 0.1);
    --sparkline-stroke: rgba(156, 163, 175, 0.7);
    --sparkline-fill: rgba(156, 163, 175, 0.12);
  }
}

html, body { overscroll-behavior-y: none; }   /* no pull-to-refresh or rubber-band; sideways is left to the browser, so its two-finger swipe goes back / forward */

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none;
  user-select: none;
}

body {
  font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'Segoe UI', system-ui, sans-serif;
  background: var(--bg-gradient);
  color: var(--text);
  overflow: hidden;
  height: 100vh;
  height: 100dvh;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ═══ SCREENS ═══ */
.screen {
  display: none;
  height: 100vh;
  height: 100dvh;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding-top: var(--safe-top);
  padding-bottom: var(--safe-bottom);
}

.screen.active { display: block; animation: liquid-glass-in 0.3s ease-out both; }
/* screen-to-screen slides (see showScreen): only a "from" frame, so no transform is left behind to trap fixed children */
@keyframes nav-in-fwd { from { transform: translate3d(100%, 0, 0); } }
@keyframes nav-in-back { from { transform: translate3d(-22%, 0, 0); opacity: .5; } }
.screen.active.nav-fwd { animation: nav-in-fwd .34s cubic-bezier(.22, .9, .28, 1) backwards; }
.screen.active.nav-back { animation: nav-in-back .3s cubic-bezier(.22, .9, .28, 1) backwards; }

/* ═══ ANIMATIONS ═══ */

/* Liquid Glass entrance - opacity fade, mobile-safe */
@keyframes liquid-glass-in {
  0%   { opacity: 0; }
  100% { opacity: 1; }
}

/* App tiles stagger on home grid */
@keyframes tile-stagger-in {
  0%   { opacity: 0; }
  100% { opacity: 1; }
}
.app-icon {
  animation: tile-stagger-in 0.35s cubic-bezier(0.22, 1, 0.36, 1) both;
}
.app-icon:nth-child(1) { animation-delay: 0ms; }
.app-icon:nth-child(2) { animation-delay: 40ms; }
.app-icon:nth-child(3) { animation-delay: 80ms; }
.app-icon:nth-child(4) { animation-delay: 120ms; }
.app-icon:nth-child(5) { animation-delay: 160ms; }
.app-icon:nth-child(6) { animation-delay: 200ms; }
.app-icon:nth-child(7) { animation-delay: 240ms; }
.app-icon:nth-child(8) { animation-delay: 280ms; }
.app-icon:nth-child(9) { animation-delay: 320ms; }
.app-icon:nth-child(10) { animation-delay: 360ms; }
.app-icon:nth-child(11) { animation-delay: 400ms; }

/* ─── Pixel Grid Loader ─────────────────────────────────── */
.pixel-loader {
  display: inline-grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 3px;
  width: 36px;
  height: 36px;
}
.pixel-loader span {
  width: 10px;
  height: 10px;
  border-radius: 3px;
  background: var(--glass-border);
  border: 1px solid var(--glass-border);
  animation: pixel-flip 0.9s infinite ease-in-out;
}
.pixel-loader span:nth-child(1) { animation-delay: 0s; }
.pixel-loader span:nth-child(2) { animation-delay: 0.1s; }
.pixel-loader span:nth-child(3) { animation-delay: 0.2s; }
.pixel-loader span:nth-child(4) { animation-delay: 0.3s; }
.pixel-loader span:nth-child(5) { animation-delay: 0.4s; }
.pixel-loader span:nth-child(6) { animation-delay: 0.5s; }
.pixel-loader span:nth-child(7) { animation-delay: 0.6s; }
.pixel-loader span:nth-child(8) { animation-delay: 0.7s; }
.pixel-loader span:nth-child(9) { animation-delay: 0.8s; }
@keyframes pixel-flip {
  0%, 100% { opacity: 0.15; transform: scale(0.85); }
  50% { opacity: 1; transform: scale(1); background: var(--accent); border-color: var(--accent); }
}

/* Centered pixel loader - no text, just the animation */
.pixel-loader-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px 20px;
  min-height: 80px;
}

/* ─── Shimmer Skeletons ────────────────────────────────── */
@keyframes shimmer-sweep {
  0%   { background-position: -150% 0; }
  100% { background-position: 250% 0; }
}
.shimmer-block {
  background: linear-gradient(90deg,
    var(--hairline) 0%,
    var(--hairline-strong) 50%,
    var(--hairline) 100%);
  background-size: 200% 100%;
  animation: shimmer-sweep 1.4s infinite linear;
  border-radius: 8px;
}
.skeleton-book {
  display: flex;
  gap: 12px;
  padding: 12px 0;
  align-items: center;
}
.skeleton-book .shimmer-block { height: 14px; }
.skeleton-book .skeleton-title { width: 60%; }
.skeleton-book .skeleton-meta { width: 35%; height: 10px; margin-top: 4px; }
.skeleton-music {
  display: flex;
  gap: 10px;
  padding: 8px 0;
  align-items: center;
}
.skeleton-music .shimmer-block { height: 12px; }
.skeleton-music .skeleton-title { width: 50%; }
.skeleton-music .skeleton-meta { width: 25%; height: 10px; margin-top: 4px; }
.skeleton-file-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
  gap: 12px;
  padding: 8px 0;
}
.skeleton-file {
  aspect-ratio: 1;
  border-radius: var(--radius);
}

/* Reduced motion: respect user preference */
@media (prefers-reduced-motion: reduce) {
  .screen.active,
  .app-icon { animation: none !important; }
  .pixel-loader span { animation-duration: 2s; }
}

/* ─── About Panel ───────────────────────────────────────── */
.about-changelog {
  font-size: 13px;
  line-height: 1.6;
  color: var(--text-dim);
}
.about-changelog h4 {
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  margin: 0 0 4px;
}
.about-changelog ul {
  list-style: none;
  padding: 0;
  margin: 0 0 16px;
}
.about-changelog li {
  padding: 2px 0 2px 16px;
  position: relative;
}
.about-changelog li::before {
  content: '•';
  position: absolute;
  left: 0;
  color: var(--accent);
}
.about-blurb {
  font-size: 13px;
  color: var(--text-dim);
  line-height: 1.6;
  padding: 4px 0;
}

/* ═══ TOP BAR (clock + notification bell) ═══ */
.top-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 24px 4px;
}

.top-bar-left {
  flex: 1;
}

.clock {
  font-size: 42px;
  font-weight: 700;
  letter-spacing: -1px;
  line-height: 1;
}

/* Notification bell */
.notif-bell {
  position: relative;
  background: var(--glass);
  backdrop-filter: blur(var(--blur));
  -webkit-backdrop-filter: blur(var(--blur));
  border: 1px solid var(--glass-border);
  color: var(--text-dim);
  width: 40px;
  height: 40px;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--glass-shadow), var(--glass-inset);
  transition: all 0.15s;
  flex-shrink: 0;
}

.notif-bell:active { transform: scale(0.9); }
.notif-bell svg { color: var(--text-dim); }

.notif-badge {
  position: absolute;
  top: 6px;
  right: 6px;
  width: 9px;
  height: 9px;
  background: var(--red);
  border-radius: 50%;
  border: 2px solid var(--surface-solid);
  display: none;
}

.notif-badge.visible { display: block; }

/* Notification panel (dropdown) */
.notif-panel {
  position: absolute;
  top: calc(var(--safe-top) + 56px);
  right: 16px;
  left: 16px;
  max-width: 420px;
  margin-left: auto;
  background: var(--glass);
  backdrop-filter: blur(40px) saturate(1.5);
  -webkit-backdrop-filter: blur(40px) saturate(1.5);
  border: 1px solid var(--glass-border);
  border-radius: 18px;
  box-shadow: var(--glass-shadow-lg), var(--glass-inset);
  z-index: 50;
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  transition: max-height 0.3s ease, opacity 0.2s ease;
}

.notif-panel.open {
  max-height: 70vh;
  opacity: 1;
}

.notif-panel-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 14px 18px 8px;
  font-size: 15px;
  font-weight: 600;
}

.notif-clear {
  background: none;
  border: none;
  color: var(--accent-text);
  font-size: 12px;
  cursor: pointer;
  padding: 4px 8px;
}

.notif-list {
  padding: 0 18px 14px;
  max-height: 50vh;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

.notif-item {
  display: flex;
  gap: 12px;
  padding: 12px 0;
  border-bottom: 1px solid var(--hairline);
  font-size: 13px;
  line-height: 1.5;
  align-items: flex-start;
}

.notif-item:last-child { border-bottom: none; }

.notif-item-icon {
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
}

.notif-item-icon.info { background: var(--accent); }
.notif-item-icon.warning { background: var(--orange); }
.notif-item-icon.error { background: var(--red); }
.notif-item-icon.success { background: var(--green); }

.notif-item-body {
  flex: 1;
  min-width: 0;
}

.notif-item-text {
  color: var(--text);
  margin-bottom: 2px;
}

.notif-item-time {
  font-size: 11px;
  color: var(--text-faint);
}

.notif-empty {
  text-align: center;
  color: var(--text-dim);
  font-size: 14px;
  padding: 24px 0;
}

/* ═══ STATUS CHIPS (Kali-style) ═══ */
.status-chips {
  display: flex;
  gap: 8px;
  padding: 8px 24px 4px;
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}

.status-chips::-webkit-scrollbar { display: none; }

.stat-chip {
  flex-shrink: 0;
  background: var(--chip-bg);
  backdrop-filter: blur(var(--blur));
  -webkit-backdrop-filter: blur(var(--blur));
  border: 1px solid var(--chip-border);
  border-radius: 12px;
  padding: 6px 12px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1px;
  min-width: 62px;
  cursor: pointer;
  transition: all 0.15s;
  position: relative;
  overflow: hidden;
}

.stat-chip:active { transform: scale(0.94); }

.stat-chip-label {
  font-size: 9px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-faint);
}

.stat-chip-value {
  font-size: 16px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  line-height: 1.2;
}

/* Color coding for values */
.stat-chip.warn .stat-chip-value { color: var(--orange); }
.stat-chip.danger .stat-chip-value { color: var(--red); }

/* Mini sparkline graph mode */
.stat-chip .chip-sparkline {
  display: none;
}

.stat-chip.graph-mode .chip-percent {
  display: none;
}

.stat-chip.graph-mode .chip-sparkline {
  display: block;
}

.chip-sparkline svg {
  display: block;
}

/* Graph mode wrapper with labels */
.chip-graph-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 2px 0;
}

.chip-graph-labels {
  display: flex;
  justify-content: space-between;
  width: 100%;
  align-items: baseline;
}

.chip-graph-name {
  font-size: 9px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-faint);
}

.chip-graph-val {
  font-size: 13px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--text);
}

.chip-graph-axis {
  font-size: 8px;
  color: var(--text-faint);
  opacity: 0.6;
}

.chip-graph-empty {
  font-size: 13px;
  color: var(--text-faint);
  padding: 8px 0;
}

/* ═══ LEGACY STATUS BAR (kept for reference, unused) ═══ */
.status-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px 24px 10px;
}

.status-info {
  font-size: 12px;
  color: var(--text-dim);
  text-align: right;
  line-height: 1.5;
}

/* ═══ APP GRID ═══ */
.app-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  padding: 30px 24px;
}

.app-icon {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.app-icon:active { transform: scale(0.88); }

.app-icon-visual {
  width: 72px;
  height: 72px;
  border-radius: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--glass);
  backdrop-filter: blur(var(--blur));
  -webkit-backdrop-filter: blur(var(--blur));
  border: 1px solid var(--glass-border);
  box-shadow: var(--glass-shadow), var(--glass-inset);
}

.app-icon-visual svg {
  color: var(--text);
  transition: color 0.2s;
}

.app-icon:active .app-icon-visual svg {
  transform: scale(0.9);
}

.app-label {
  font-size: 11px;
  color: var(--text-dim);
  text-align: center;
  max-width: 80px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ═══ APP HEADER ═══ */
.app-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 16px 20px 8px;
  position: sticky;
  top: 0;
  background: var(--glass);
  backdrop-filter: blur(var(--blur));
  -webkit-backdrop-filter: blur(var(--blur));
  border-bottom: 1px solid var(--hairline);
  z-index: 10;
}

.app-header h2 {
  font-size: 18px;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Screen title SVG icon */
.screen-title {
  display: flex;
  align-items: center;
  gap: 8px;
}

.screen-title-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.screen-title-icon svg {
  color: var(--accent);
}

/* Navigation arrows (CSS-drawn) */
.nav-arrow {
  display: inline-block;
  width: 0;
  height: 0;
  vertical-align: middle;
}

.nav-arrow.prev {
  border-top: 5px solid transparent;
  border-bottom: 5px solid transparent;
  border-right: 7px solid currentColor;
  margin-right: 4px;
}

.nav-arrow.next {
  border-top: 5px solid transparent;
  border-bottom: 5px solid transparent;
  border-left: 7px solid currentColor;
  margin-left: 4px;
}

/* Play button SVG */
.play-btn svg { color: white; }

/* Cover art SVG */
.cover-art svg {
  filter: drop-shadow(0 8px 24px var(--accent-glow));
}

/* Agent status dot (CSS circle, no text needed) */
.agent-status-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--text-faint);
  flex-shrink: 0;
}

.agent-status-dot.ready { background: var(--green); }
.agent-status-dot.error { background: var(--red); }
.agent-status-dot.paused { background: var(--orange); }
.agent-status-dot.unknown { background: var(--text-faint); }

/* ComfyUI generate button icon */
.comfy-gen-icon {
  display: inline-flex;
  vertical-align: middle;
  margin-right: 4px;
}

.app-header .back-btn {
  background: var(--glass);
  backdrop-filter: blur(var(--blur));
  -webkit-backdrop-filter: blur(var(--blur));
  border: 1px solid var(--glass-border);
  color: var(--accent-text);
  padding: 8px 14px;
  border-radius: 12px;
  font-size: 15px;
  cursor: pointer;
  flex-shrink: 0;
  box-shadow: var(--glass-shadow);
  transition: all 0.15s;
}

.app-header .back-btn:active {
  transform: scale(0.95);
  background: var(--glass-hover);
}

#reader-title {
  font-size: 15px;
  font-weight: 600;
  color: var(--text);
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ═══ BOOK LIST ═══ */
.book-list {
  padding: 16px 20px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.book-item {
  background: var(--glass);
  backdrop-filter: blur(var(--blur));
  -webkit-backdrop-filter: blur(var(--blur));
  border: 1px solid var(--glass-border);
  border-radius: 18px;
  padding: 14px 16px;
  display: flex;
  align-items: center;
  gap: 12px;
  cursor: pointer;
  box-shadow: var(--glass-shadow), var(--glass-inset);
  transition: all 0.2s;
}

.book-item:active {
  transform: scale(0.98);
  background: var(--glass-hover);
}

.book-item-info { flex: 1; min-width: 0; }

.book-item-name {
  font-size: 15px;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-bottom: 3px;
}

.book-item-meta {
  font-size: 12px;
  color: var(--text-dim);
}

.book-item-right {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

.book-status {
  font-size: 11px;
  font-weight: 600;
  padding: 4px 10px;
  border-radius: 20px;
}

.book-status.ready {
  background: rgba(16, 185, 129, 0.12);
  color: var(--green);
}

.book-status.generating {
  background: rgba(245, 158, 11, 0.12);
  color: var(--orange);
}

.book-status.new {
  background: var(--accent-soft);
  color: var(--accent-text);
}

.settings-btn {
  background: var(--glass);
  border: 1px solid var(--glass-border);
  color: var(--text-dim);
  width: 34px;
  height: 34px;
  border-radius: 10px;
  font-size: 14px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.15s;
}

.settings-btn:active { color: var(--accent); transform: scale(0.9); }

/* ═══ BOOK MODE BAR ═══ */
.book-mode-bar {
  display: flex;
  gap: 8px;
  padding: 12px 16px;
  background: var(--glass);
  backdrop-filter: blur(var(--blur));
  -webkit-backdrop-filter: blur(var(--blur));
  border-bottom: 1px solid var(--hairline);
}

.mode-btn {
  flex: 1;
  padding: 8px 12px;
  border: 1px solid var(--hairline-strong);
  border-radius: 12px;
  background: transparent;
  color: var(--text-dim);
  font-size: 14px;
  cursor: pointer;
  transition: all 0.2s;
}

.mode-btn.active {
  background: var(--accent-soft);
  border-color: var(--accent-glow);
  color: var(--accent-text);
}

.mode-btn:disabled {
  opacity: 0.3;
  cursor: not-allowed;
}

/* ═══ CHAPTER NAV ═══ */
.chapter-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 16px;
  gap: 12px;
  border-bottom: 1px solid var(--hairline);
}

.chapter-nav-btn {
  background: var(--glass);
  backdrop-filter: blur(var(--blur));
  -webkit-backdrop-filter: blur(var(--blur));
  border: 1px solid var(--glass-border);
  color: var(--text);
  padding: 6px 14px;
  border-radius: 10px;
  font-size: 13px;
  cursor: pointer;
  box-shadow: var(--glass-shadow);
  transition: all 0.15s;
}

.chapter-nav-btn:active { transform: scale(0.95); }
.chapter-nav-btn:disabled { opacity: 0.3; cursor: default; }

.chapter-nav-label {
  font-size: 13px;
  color: var(--text-dim);
  font-weight: 600;
}

/* ═══ READER PANE ═══ */
.reader-pane {
  display: flex;
  flex-direction: column;
  height: calc(100vh - 200px);
}

.reader-controls-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 16px;
  border-bottom: 1px solid var(--hairline);
  gap: 8px;
}

.reader-ctrl-btn {
  background: var(--glass);
  backdrop-filter: blur(var(--blur));
  -webkit-backdrop-filter: blur(var(--blur));
  border: 1px solid var(--glass-border);
  color: var(--text);
  padding: 5px 10px;
  border-radius: 10px;
  font-size: 13px;
  cursor: pointer;
  box-shadow: var(--glass-shadow);
  transition: all 0.15s;
}

.reader-ctrl-btn:active { transform: scale(0.95); opacity: 0.7; }

.reader-font-size {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--text-dim);
}

.reader-text {
  flex: 1;
  overflow-y: auto;
  padding: 20px 18px;
  line-height: 1.8;
  color: var(--text);
  font-size: 18px;
  word-break: break-word;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  scrollbar-color: var(--scrollbar) transparent;
}

.reader-text::-webkit-scrollbar { width: 6px; }
.reader-text::-webkit-scrollbar-track { background: transparent; }
.reader-text::-webkit-scrollbar-thumb { background: var(--scrollbar); border-radius: 6px; }
.reader-text::-webkit-scrollbar-thumb:hover { background: var(--scrollbar-hover); }

.reader-word {
  cursor: pointer;
  border-radius: 3px;
  transition: background 0.1s;
}

.reader-word:active { background: var(--accent-soft); }

.reader-word.bookmarked {
  background: rgba(245, 158, 11, 0.15);
  border-bottom: 2px solid rgba(245, 158, 11, 0.5);
}

/* ═══ BOOKMARK PANEL ═══ */
.bookmark-list-panel {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  max-height: 50vh;
  background: var(--glass);
  backdrop-filter: blur(var(--blur));
  -webkit-backdrop-filter: blur(var(--blur));
  border-top: 1px solid var(--glass-border);
  border-radius: 16px 16px 0 0;
  padding: 12px 16px 24px;
  z-index: 10;
  overflow-y: auto;
  box-shadow: var(--glass-shadow-lg);
}

.bookmark-panel-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
  font-weight: 600;
  font-size: 14px;
}

.bookmark-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 0;
  border-bottom: 1px solid var(--hairline);
  font-size: 13px;
}

.bookmark-word {
  flex: 1;
  color: var(--text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.bookmark-ch {
  color: var(--text-dim);
  font-size: 11px;
  white-space: nowrap;
}

.bookmark-goto {
  background: var(--accent-soft);
  border: 1px solid var(--accent-glow);
  color: var(--accent-text);
  padding: 3px 10px;
  border-radius: 6px;
  font-size: 12px;
  cursor: pointer;
}

.bookmark-del {
  background: rgba(239, 68, 68, 0.08);
  border: 1px solid rgba(239, 68, 68, 0.15);
  color: var(--red);
  padding: 3px 8px;
  border-radius: 6px;
  font-size: 12px;
  cursor: pointer;
}

/* ═══ AUDIO PANE ═══ */
.audio-pane { padding: 16px; }

.audio-pane .cover-art {
  text-align: center;
  padding: 20px;
}

.cover-art {
  text-align: center;
  line-height: 1;
  padding: 16px 0 4px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.book-title-display {
  font-size: 17px;
  font-weight: 600;
  text-align: center;
  color: var(--text-dim);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  padding: 0 8px;
}

/* ═══ PLAYER CONTROLS ═══ */
.player-controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 24px;
  padding: 8px 0;
}

.player-btn {
  background: var(--glass);
  backdrop-filter: blur(var(--blur));
  -webkit-backdrop-filter: blur(var(--blur));
  border: 1px solid var(--glass-border);
  color: var(--text);
  width: 52px;
  height: 52px;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--glass-shadow), var(--glass-inset);
  transition: all 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
  flex-shrink: 0;
}

.player-btn:active {
  transform: scale(0.88);
  background: var(--glass-hover);
}

.play-btn {
  width: 68px;
  height: 68px;
  background: var(--accent);
  border-color: transparent;
  color: white;
  box-shadow: 0 4px 24px var(--accent-glow);
}

.play-btn:active {
  background: var(--accent);
  transform: scale(0.92);
}

/* ═══ PROGRESS BAR ═══ */
.progress-section {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.progress-bar {
  width: 100%;
  height: 5px;
  background: var(--hairline-strong);
  border-radius: 3px;
  cursor: pointer;
  position: relative;
}

.progress-fill {
  height: 100%;
  background: var(--accent);
  border-radius: 3px;
  width: 0%;
  transition: width 0.2s;
}

.time-display {
  display: flex;
  justify-content: space-between;
  font-size: 12px;
  color: var(--text-dim);
  font-variant-numeric: tabular-nums;
}

/* ═══ CHAPTER DROPDOWN ═══ */
.chapter-dropdown-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
}

.chapter-dropdown-header label {
  font-size: 12px;
  color: var(--text-dim);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.resume-hint {
  font-size: 11px;
  color: var(--accent-text);
  font-weight: 600;
}

#chapter-dropdown {
  width: 100%;
  background: var(--glass);
  backdrop-filter: blur(var(--blur));
  -webkit-backdrop-filter: blur(var(--blur));
  color: var(--text);
  border: 1px solid var(--glass-border);
  border-radius: 12px;
  padding: 10px 14px;
  font-size: 14px;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23999' d='M6 8L2 4h8z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  margin-bottom: 8px;
  box-shadow: var(--glass-shadow);
}

#chapter-dropdown:focus {
  outline: none;
  border-color: var(--accent);
}

#chapter-dropdown option {
  background: var(--surface-solid);
  color: var(--text);
  padding: 8px;
}

#chapter-dropdown option.completed {
  color: var(--green);
  font-weight: 600;
}

#chapter-dropdown option.current {
  color: var(--accent-text);
  font-weight: 700;
}

#chapter-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 4px 0;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}

#chapter-buttons::-webkit-scrollbar { display: none; }

.chapter-btn {
  background: var(--glass);
  border: 1px solid var(--glass-border);
  color: var(--text-dim);
  padding: 7px 10px;
  border-radius: 10px;
  font-size: 12px;
  cursor: pointer;
  transition: all 0.2s;
  white-space: nowrap;
  flex-shrink: 0;
}

.chapter-btn.active {
  background: var(--accent);
  color: white;
  font-weight: 600;
  border-color: transparent;
}

.chapter-btn.done {
  background: rgba(16, 185, 129, 0.1);
  color: var(--green);
}

.chapter-btn.done.active {
  background: var(--accent);
  color: white;
}

.chapter-btn.pending { opacity: 0.4; cursor: default; }

/* ═══ TRANSCRIPT ═══ */
.transcript-box {
  width: 100%;
  background: var(--glass);
  backdrop-filter: blur(var(--blur));
  -webkit-backdrop-filter: blur(var(--blur));
  border: 1px solid var(--glass-border);
  border-radius: 14px;
  padding: 14px 16px;
  max-height: 280px;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  scrollbar-color: var(--scrollbar) transparent;
  margin-bottom: 12px;
  box-shadow: var(--glass-shadow);
}

.transcript-box::-webkit-scrollbar { width: 6px; }
.transcript-box::-webkit-scrollbar-track { background: transparent; }
.transcript-box::-webkit-scrollbar-thumb { background: var(--scrollbar); border-radius: 6px; }
.transcript-box::-webkit-scrollbar-thumb:hover { background: var(--scrollbar-hover); }

.transcript-text {
  font-size: 14px;
  line-height: 1.8;
  color: var(--text-dim);
  user-select: text;
  -webkit-user-select: text;
}

.transcript-text .tw {
  border-radius: 3px;
  padding: 1px 1px;
  transition: all 0.15s;
}

.transcript-text .tw.active {
  color: white;
  background: var(--accent);
  box-shadow: 0 2px 8px var(--accent-glow);
}

.transcript-text .tw.spoken {
  color: var(--text);
}

.transcript-text .highlight {
  background: var(--accent-soft);
  border-radius: 4px;
  padding: 2px 0;
}

/* ═══ UNIVERSE ═══ */
.universe-content {
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
#universe-canvas {
  width: 100%;
  border-radius: 16px;
  background: rgba(255,255,255,0.02);
  border: 1px solid var(--glass-border);
}
.universe-detail {
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  border-radius: 12px;
  padding: 12px;
  min-height: 60px;
  font-size: 0.85rem;
}
.universe-add-bar {
  display: flex;
  gap: 8px;
}
.universe-add-bar input {
  flex: 1;
  padding: 10px 14px;
  border: 1px solid var(--glass-border);
  border-radius: 10px;
  background: var(--glass-bg);
  color: var(--text);
  font-size: 0.9rem;
}
.universe-add-bar button {
  padding: 10px 20px;
  border: none;
  border-radius: 10px;
  background: var(--accent);
  color: white;
  font-weight: 600;
  cursor: pointer;
}
.universe-rescan-btn {
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  border-radius: 8px;
  padding: 6px 12px;
  color: var(--text);
  font-size: 0.8rem;
  cursor: pointer;
}

/* ═══ OSINT PRIVACY WATCHER ═══ */
.osint-content { padding: 20px; max-width: 600px; margin: 0 auto; }
.osint-section { margin-bottom: 24px; }
.osint-section h3 { font-size: 14px; color: var(--text-dim); margin-bottom: 10px; text-transform: uppercase; letter-spacing: 0.05em; }
.osint-profiles { display: flex; flex-direction: column; gap: 10px; }
.osint-profile-card {
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  border-radius: 14px;
  padding: 14px;
  cursor: pointer;
  transition: border-color 0.2s;
}
.osint-profile-card:hover { border-color: rgba(99,102,241,0.4); }
.osint-profile-header { display: flex; justify-content: space-between; align-items: center; }
.osint-profile-chevron { color: var(--text-dim); font-size: 0.8rem; }
.osint-profile-expanded { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--glass-border); }
.osint-scan-btn.delete { background: rgba(239,68,68,0.15); color: #f87171; border: 1px solid rgba(239,68,68,0.3); }
.osint-profile-scans { margin-top: 10px; font-size: 0.8rem; }

/* Scan modal */
.osint-scan-modal {
  position: fixed; inset: 0; z-index: 10001;
  background: rgba(0,0,0,0.6); backdrop-filter: blur(8px);
  display: flex; align-items: center; justify-content: center;
}
.osint-scan-modal-content {
  background: var(--bg); border: 1px solid var(--glass-border);
  border-radius: 16px; width: 90%; max-width: 500px;
  max-height: 85vh; overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
.osint-scan-modal-header {
  display: flex; justify-content: space-between; align-items: center;
  padding: 16px 20px; border-bottom: 1px solid var(--glass-border);
}
.osint-scan-modal-header h3 { font-size: 1.1rem; }
.osint-scan-modal-close {
  background: none; border: none; font-size: 1.5rem;
  color: var(--text-dim); cursor: pointer; line-height: 1;
}
.osint-scan-modal-body { padding: 16px 20px; }
.osint-scan-task {
  background: var(--glass-bg); border: 1px solid var(--glass-border);
  border-radius: 12px; padding: 12px; margin-bottom: 10px;
}
.osint-scan-task-header {
  display: flex; justify-content: space-between; align-items: center;
  margin-bottom: 8px; flex-wrap: wrap; gap: 4px;
}
.osint-scan-task-name { font-weight: 600; font-size: 0.9rem; }
.osint-scan-task-status { font-size: 0.78rem; color: var(--text-dim); }
.osint-progress-bar {
  height: 6px; background: rgba(255,255,255,0.08); border-radius: 3px;
  overflow: hidden; margin-bottom: 8px;
}
.osint-progress-fill {
  height: 100%; background: var(--accent); border-radius: 3px;
  transition: width 1s linear;
}
.osint-scan-view-btn {
  padding: 6px 14px; border: none; border-radius: 8px;
  background: var(--accent); color: white; font-size: 0.8rem;
  cursor: pointer; font-weight: 600;
}

/* Finding rows */
.osint-finding-row {
  background: var(--glass-bg); border: 1px solid var(--glass-border);
  border-radius: 10px; padding: 10px 12px; margin-bottom: 8px;
}
.osint-finding-header {
  display: flex; align-items: center; gap: 8px; margin-bottom: 6px;
}
.osint-confidence-badge {
  font-size: 0.65rem; padding: 2px 8px; border-radius: 6px;
  font-weight: 700; letter-spacing: 0.05em;
}
.osint-finding-source { font-size: 0.7rem; color: var(--text-dim); }
.osint-finding-link {
  display: block; font-size: 0.85rem; color: var(--accent);
  text-decoration: none; margin-bottom: 4px; word-break: break-all;
}
.osint-finding-link:hover { text-decoration: underline; }
.osint-finding-snippet {
  font-size: 0.75rem; color: var(--text-dim); line-height: 1.4;
  padding: 4px 0; border-top: 1px solid var(--glass-border);
}
.osint-profile-name { font-weight: 600; font-size: 15px; margin-bottom: 4px; }
.osint-profile-info { display: flex; flex-wrap: wrap; gap: 8px; font-size: 12px; color: var(--text-dim); margin-bottom: 8px; }
.osint-profile-info span { background: var(--glass-bg); padding: 2px 8px; border-radius: 8px; }
.osint-profile-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.osint-scan-btn {
  padding: 6px 14px; border-radius: 10px; border: 1px solid var(--glass-border);
  background: var(--accent); color: white; font-size: 12px; cursor: pointer; transition: all 0.15s;
}
.osint-scan-btn.deep { background: #ef4444; }
.osint-scan-btn:hover { opacity: 0.85; }
.osint-add-profile {
  display: flex; flex-direction: column; gap: 8px; margin-top: 12px;
  background: var(--glass-bg); border: 1px solid var(--glass-border); border-radius: 14px; padding: 14px;
}
.osint-add-profile input {
  padding: 10px; border-radius: 10px; border: 1px solid var(--glass-border);
  background: var(--bg); color: var(--text); font-size: 14px;
}
.osint-add-profile button {
  padding: 10px; border-radius: 10px; border: none;
  background: var(--accent); color: white; font-size: 14px; cursor: pointer;
}
.osint-empty { color: var(--text-dim); font-size: 13px; padding: 20px; text-align: center; }
.osint-scanning { color: var(--accent); font-size: 14px; padding: 20px; text-align: center; animation: pulse 1.5s infinite; }
.osint-summary-grid { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 16px; }
.osint-stat {
  display: flex; flex-direction: column; align-items: center;
  background: var(--glass-bg); border: 1px solid var(--glass-border); border-radius: 12px;
  padding: 12px 16px; min-width: 80px;
}
.osint-stat-num { font-size: 24px; font-weight: 700; color: var(--accent); }
.osint-stat-label { font-size: 10px; color: var(--text-dim); text-transform: uppercase; }
.osint-result-section { margin-bottom: 16px; }
.osint-result-section h4 { font-size: 13px; color: var(--text-dim); margin-bottom: 8px; }
.osint-broker-row {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 12px; border-radius: 10px; margin-bottom: 4px;
  background: var(--glass-bg); border: 1px solid var(--glass-border);
}
.osint-broker-row.found { border-color: #ef444440; }
.osint-broker-name { flex: 1; font-size: 13px; }
.osint-badge { font-size: 10px; padding: 2px 8px; border-radius: 6px; font-weight: 600; }
.osint-badge.found { background: #ef444420; color: #ef4444; }
.osint-badge.safe { background: #22c55e20; color: #22c55e; }
.osint-optout { font-size: 11px; color: var(--accent); text-decoration: none; }
.osint-optout:hover { text-decoration: underline; }
.osint-username-row { padding: 10px 12px; background: var(--glass-bg); border-radius: 10px; margin-bottom: 6px; }
.osint-site-link { font-size: 12px; margin-left: 16px; margin-top: 4px; }
.osint-site-link a { color: var(--accent); text-decoration: none; }
.osint-exposure-row { font-size: 13px; padding: 6px 12px; display: flex; align-items: center; gap: 8px; }
.osint-scan-row {
  display: flex; gap: 12px; padding: 10px 14px; cursor: pointer;
  background: var(--glass-bg); border: 1px solid var(--glass-border); border-radius: 10px; margin-bottom: 6px; font-size: 12px;
}
.osint-scan-row:hover { border-color: var(--accent); }
.osint-error { color: #ef4444; font-size: 14px; padding: 20px; }

/* ═══ SYSTEM MONITOR ═══ */
.system-content {
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.stat-card {
  background: var(--glass);
  backdrop-filter: blur(var(--blur));
  -webkit-backdrop-filter: blur(var(--blur));
  border: 1px solid var(--glass-border);
  border-radius: var(--radius);
  padding: 20px;
  box-shadow: var(--glass-shadow), var(--glass-inset);
}

.stat-label {
  font-size: 13px;
  color: var(--text-dim);
  margin-bottom: 8px;
}

.stat-value {
  font-size: 28px;
  font-weight: 700;
}

.stat-bar {
  width: 100%;
  height: 8px;
  background: var(--hairline-strong);
  border-radius: 4px;
  margin-top: 10px;
  overflow: hidden;
}

.stat-bar-fill {
  height: 100%;
  border-radius: 4px;
  transition: width 0.5s;
}

/* ═══ TERMINAL ═══ */
.terminal-content { padding: 20px; height: calc(100% - 60px); display: flex; flex-direction: column; }

/* xterm.js container */
.xterm-container {
  flex: 1;
  background: #0d0d12;
  border: 1px solid var(--glass-border);
  border-radius: 14px;
  padding: 8px;
  overflow: hidden;
  min-height: 400px;
}
.xterm-container .xterm {
  height: 100%;
}
.xterm-container .xterm-viewport {
  background-color: #0d0d12 !important;
}

/* Mobile key bar */
.term-keybar {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  padding: 8px 0 4px;
  justify-content: center;
}
.term-key {
  min-width: 38px;
  height: 34px;
  padding: 0 8px;
  border: 1px solid var(--glass-border);
  border-radius: 8px;
  background: var(--glass-bg);
  color: var(--text);
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.1s;
  -webkit-tap-highlight-color: transparent;
}
.term-key:active {
  background: var(--accent);
  color: white;
  transform: scale(0.95);
}
.term-key-wide {
  min-width: 56px;
}

/* Terminal tabs */
.terminal-tabs {
  display: flex;
  gap: 4px;
  margin-left: auto;
}
.terminal-tab {
  padding: 4px 12px;
  font-size: 12px;
  border: 1px solid var(--glass-border);
  border-radius: 8px;
  background: transparent;
  color: var(--text-dim);
  cursor: pointer;
  transition: all 0.15s;
}
.terminal-tab.active {
  background: var(--accent);
  color: white;
  border-color: var(--accent);
}

.terminal-output {
  background: var(--terminal-bg);
  backdrop-filter: blur(var(--blur));
  -webkit-backdrop-filter: blur(var(--blur));
  border: 1px solid var(--glass-border);
  border-radius: 14px;
  padding: 16px;
  font-family: 'SF Mono', 'Fira Code', monospace;
  font-size: 13px;
  line-height: 1.6;
  color: var(--terminal-text);
  min-height: 300px;
  max-height: 60vh;
  overflow-y: auto;
  white-space: pre-wrap;
  word-break: break-all;
  margin-bottom: 20px;
}

.command-buttons {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.command-buttons button {
  background: var(--glass);
  backdrop-filter: blur(var(--blur));
  -webkit-backdrop-filter: blur(var(--blur));
  border: 1px solid var(--glass-border);
  color: var(--text);
  padding: 14px;
  border-radius: 12px;
  font-size: 14px;
  cursor: pointer;
  box-shadow: var(--glass-shadow);
  transition: all 0.15s;
}

.command-buttons button:active {
  transform: scale(0.96);
  background: var(--glass-hover);
}

.terminal-input-row {
  display: flex;
  gap: 8px;
  margin-bottom: 12px;
}

.terminal-input {
  flex: 1;
  background: var(--terminal-bg);
  border: 1px solid var(--glass-border);
  border-radius: 10px;
  padding: 10px 14px;
  color: var(--terminal-text);
  font-family: 'SF Mono', 'Fira Code', monospace;
  font-size: 13px;
  outline: none;
  -webkit-appearance: none;
}

.terminal-input:focus { border-color: var(--accent); }

.terminal-input::placeholder {
  color: rgba(110, 231, 183, 0.3);
}

.terminal-send-btn {
  background: var(--accent);
  border: none;
  color: white;
  width: 42px;
  height: 42px;
  border-radius: 10px;
  cursor: pointer;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 12px var(--accent-glow);
}

/* ═══ MODAL ═══ */
.modal {
  display: none;
  position: fixed;
  inset: 0;
  background: var(--modal-bg);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  z-index: 100;
  justify-content: center;
  align-items: flex-end;
  padding: 20px;
  padding-bottom: env(safe-area-inset-bottom, 20px);
}

.modal-content {
  background: var(--glass);
  backdrop-filter: blur(40px) saturate(1.5);
  -webkit-backdrop-filter: blur(40px) saturate(1.5);
  border: 1px solid var(--glass-border);
  border-radius: 24px 24px 0 0;
  width: 100%;
  max-width: 500px;
  max-height: 85vh;
  overflow-y: auto;
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 24px;
  box-shadow: var(--glass-shadow-lg), var(--glass-inset);
}

.modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.modal-header h3 {
  font-size: 18px;
  font-weight: 600;
}

.modal-close {
  background: var(--glass);
  border: 1px solid var(--glass-border);
  color: var(--text-dim);
  width: 32px;
  height: 32px;
  border-radius: 50%;
  font-size: 14px;
  cursor: pointer;
  box-shadow: var(--glass-shadow);
  transition: all 0.15s;
}

.modal-close:active { transform: scale(0.9); }

/* ═══ SETTINGS SECTIONS ═══ */
.settings-section {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.settings-label {
  font-size: 12px;
  color: var(--text-dim);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* ═══ VOICE CARDS ═══ */
.voice-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}

.voice-card {
  background: var(--glass);
  backdrop-filter: blur(var(--blur));
  -webkit-backdrop-filter: blur(var(--blur));
  border: 1px solid var(--glass-border);
  border-radius: 14px;
  padding: 14px 8px 10px;
  text-align: center;
  cursor: pointer;
  border-radius: 14px;
  transition: all 0.2s;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  box-shadow: var(--glass-shadow);
}

.voice-card:active { transform: scale(0.95); }

.voice-card.selected {
  border-color: var(--accent);
  background: var(--accent-soft);
}

.voice-icon { font-size: 22px; line-height: 1; }

.voice-name {
  font-size: 11px;
  color: var(--text-dim);
  font-weight: 500;
}

.voice-active-badge {
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--accent-text);
  background: var(--accent-soft);
  padding: 2px 6px;
  border-radius: 8px;
  margin-top: 2px;
}

/* ═══ CHAPTER STATUS (settings) ═══ */
.chapter-status-list {
  display: flex;
  flex-direction: column;
  gap: 3px;
  max-height: 180px;
  overflow-y: auto;
  scrollbar-width: none;
}

.chapter-status-list::-webkit-scrollbar { display: none; }

.chapter-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  border-radius: 8px;
  font-size: 12px;
}

.chapter-row.done {
  background: rgba(16, 185, 129, 0.06);
  color: var(--green);
}

.chapter-row-num {
  width: 22px;
  font-weight: 700;
  font-size: 11px;
  opacity: 0.7;
  flex-shrink: 0;
}

.chapter-row-name {
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 12px;
}

.chapter-row-size {
  font-size: 10px;
  opacity: 0.6;
  flex-shrink: 0;
}

.chapter-none {
  font-size: 13px;
  color: var(--text-dim);
  padding: 8px 0;
  text-align: center;
}

/* ═══ GENERATE BUTTONS ═══ */
.gen-controls {
  display: flex;
  gap: 10px;
}

.gen-btn {
  background: var(--accent);
  border: none;
  color: white;
  padding: 12px 20px;
  border-radius: 12px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: opacity 0.15s;
  flex: 1;
  text-align: center;
  box-shadow: 0 2px 12px var(--accent-glow);
}

.gen-btn:active { opacity: 0.8; transform: scale(0.97); }

.gen-btn.stop {
  background: rgba(239, 68, 68, 0.12);
  color: var(--red);
  border: 1px solid rgba(239, 68, 68, 0.2);
  box-shadow: none;
}

.gen-status {
  font-size: 13px;
  color: var(--text-dim);
}

/* ═══ GENERATION BANNER ═══ */
.gen-banner {
  width: 100%;
  background: var(--accent-soft);
  border: 1px solid var(--accent-glow);
  border-radius: 12px;
  padding: 12px 16px;
  text-align: center;
}

.gen-banner-title {
  font-size: 13px;
  color: var(--accent-text);
  margin-bottom: 8px;
}

.gen-progress-bar {
  width: 100%;
  height: 4px;
  background: var(--hairline-strong);
  border-radius: 2px;
  overflow: hidden;
  margin-bottom: 6px;
}

.gen-progress-fill {
  height: 100%;
  background: var(--accent);
  border-radius: 2px;
  width: 0%;
  transition: width 0.5s;
}

.gen-banner-sub {
  font-size: 11px;
  color: var(--text-dim);
}

/* ═══ AGENTS SCREEN ═══ */
.agents-content {
  padding: 16px 20px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.agent-section-title {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--text-dim);
  margin-bottom: 6px;
  margin-top: 4px;
}

.agent-activity-card {
  background: var(--glass);
  backdrop-filter: blur(var(--blur));
  -webkit-backdrop-filter: blur(var(--blur));
  border: 1px solid var(--glass-border);
  border-radius: 14px;
  padding: 12px 14px;
  margin-bottom: 4px;
  box-shadow: var(--glass-shadow);
}

.activity-list {
  display: flex;
  flex-direction: column;
  gap: 5px;
  max-height: 160px;
  overflow-y: auto;
}

.activity-item {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: 12px;
  padding: 4px 0;
  border-bottom: 1px solid var(--hairline);
}

.activity-item:last-child { border-bottom: none; }

.activity-dir {
  font-size: 10px;
  font-weight: 700;
  padding: 1px 5px;
  border-radius: 5px;
  flex-shrink: 0;
}

.activity-dir.in { background: rgba(59, 130, 246, 0.15); color: #60a5fa; }
.activity-dir.out { background: rgba(52, 211, 153, 0.12); color: #34d399; }

.activity-time {
  font-size: 10px;
  color: var(--text-dim);
  flex-shrink: 0;
  min-width: 45px;
}

.activity-text {
  color: var(--text-dim);
  font-size: 11px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.activity-item.in .activity-text { color: var(--text); }

/* ─── Agent Cards ─── */
.agent-note {
  font-size: 12px;
  color: var(--text-dim);
  padding: 6px 0 2px;
  font-style: italic;
}

.agent-status {
  font-size: 10px;
  flex-shrink: 0;
}
.agent-status.ready { color: var(--green); }
.agent-status.error { color: var(--red); }
.agent-status.paused { color: var(--orange); }
.agent-status.unknown { color: var(--text-dim); }

.agent-card {
  background: var(--glass);
  backdrop-filter: blur(var(--blur));
  -webkit-backdrop-filter: blur(var(--blur));
  border: 1px solid var(--glass-border);
  border-radius: 16px;
  overflow: hidden;
  cursor: pointer;
  box-shadow: var(--glass-shadow), var(--glass-inset);
  transition: opacity 0.15s;
}

.agent-card:active { opacity: 0.8; }

.agent-header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
}

.agent-expand {
  color: var(--text-dim);
  font-size: 11px;
  margin-left: auto;
  transition: transform 0.2s;
}

.agent-detail { display: none; }
.agent-detail.open { display: block; }

.agent-avatar {
  width: 42px;
  height: 42px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  font-weight: 700;
  color: white;
  flex-shrink: 0;
  background: linear-gradient(135deg, #10b981, #34d399);
}

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

.agent-name {
  font-size: 16px;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 6px;
}

.agent-tag {
  font-size: 10px;
  font-weight: 600;
  background: var(--hairline-strong);
  color: var(--text-dim);
  padding: 2px 7px;
  border-radius: 8px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.agent-platform {
  font-size: 12px;
  color: var(--text-dim);
  margin-top: 2px;
}

/* Toggle switch */
.job-toggle {
  position: relative;
  width: 36px;
  height: 20px;
  flex-shrink: 0;
  margin-top: 2px;
}

.job-toggle input { opacity: 0; width: 0; height: 0; }

.job-toggle-slider {
  position: absolute;
  cursor: pointer;
  top: 0; left: 0; right: 0; bottom: 0;
  background: var(--hairline-strong);
  border-radius: 20px;
  transition: 0.2s;
}

.job-toggle-slider:before {
  position: absolute;
  content: "";
  height: 14px;
  width: 14px;
  left: 3px;
  bottom: 3px;
  background: white;
  border-radius: 50%;
  transition: 0.2s;
  box-shadow: 0 1px 3px rgba(0,0,0,0.2);
}

.job-toggle input:checked + .job-toggle-slider { background: var(--green); }
.job-toggle input:checked + .job-toggle-slider:before { transform: translateX(16px); }

.job-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  background: var(--hairline);
  border-radius: 10px;
  font-size: 12px;
}

.job-row.error { background: rgba(239, 68, 68, 0.06); }

.job-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  margin-top: 4px;
  flex-shrink: 0;
}

.job-dot.ok { background: var(--green); }
.job-dot.error { background: var(--red); }
.job-dot.paused { background: var(--orange); }

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

.job-name {
  font-weight: 600;
  font-size: 12px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.job-schedule {
  font-size: 11px;
  color: var(--text-dim);
  margin-top: 1px;
}

.job-last {
  font-size: 10px;
  color: var(--text-dim);
  opacity: 0.7;
  margin-top: 1px;
}

.job-next {
  font-size: 10px;
  color: var(--accent-text);
  margin-top: 1px;
}

.job-error {
  font-size: 10px;
  color: var(--red);
  margin-top: 2px;
  word-break: break-all;
}

.agent-summary {
  font-size: 12px;
  color: var(--text-dim);
  padding: 6px 0 2px;
}

/* ═══ SUMMARY MODAL ═══ */
.summary-modal-content {
  max-width: 600px;
  max-height: 85vh;
  display: flex;
  flex-direction: column;
}

.sofar-btn {
  margin-left: auto;
  background: var(--accent-soft) !important;
  border-color: var(--accent-glow) !important;
  color: var(--accent-text) !important;
  font-weight: 600;
  white-space: nowrap;
}

.summary-loading {
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 40px 20px;
  display: flex;
  gap: 16px;
  color: var(--text-dim);
}

.summary-spinner {
  width: 32px;
  height: 32px;
  border: 3px solid var(--accent-soft);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}

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

.summary-body {
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: var(--scrollbar) transparent;
}

.summary-body::-webkit-scrollbar { width: 6px; }
.summary-body::-webkit-scrollbar-thumb { background: var(--scrollbar); border-radius: 6px; }

.summary-tab-bar {
  display: flex;
  gap: 8px;
  margin-bottom: 12px;
}

.summary-tab {
  flex: 1;
  padding: 8px 12px;
  border: 1px solid var(--hairline-strong);
  border-radius: 10px;
  background: transparent;
  color: var(--text-dim);
  font-size: 13px;
  cursor: pointer;
  transition: all 0.2s;
}

.summary-tab.active {
  background: var(--accent-soft);
  border-color: var(--accent-glow);
  color: var(--accent-text);
}

.summary-text {
  font-size: 14px;
  line-height: 1.7;
  color: var(--text);
  padding: 4px 0 16px;
  white-space: pre-wrap;
}

.summary-qa-section {
  margin-top: 16px;
  border-top: 1px solid var(--hairline);
  padding-top: 14px;
}

.summary-qa-header {
  font-size: 13px;
  color: var(--text-dim);
  margin-bottom: 10px;
}

.summary-chat {
  max-height: 200px;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: var(--scrollbar) transparent;
  margin-bottom: 10px;
}

.summary-chat::-webkit-scrollbar { width: 4px; }
.summary-chat::-webkit-scrollbar-thumb { background: var(--scrollbar); border-radius: 4px; }

.summary-msg {
  padding: 8px 12px;
  border-radius: 10px;
  margin-bottom: 8px;
  font-size: 13px;
  line-height: 1.6;
  word-break: break-word;
}

.summary-msg.user {
  background: var(--accent-soft);
  color: var(--text);
  margin-left: 20px;
}

.summary-msg.ai {
  background: var(--hairline);
  color: var(--text);
  margin-right: 20px;
}

.summary-msg.ai.loading {
  color: var(--text-dim);
  font-style: italic;
}

.summary-ask-row {
  display: flex;
  gap: 8px;
}

/* Summary ask input inherits terminal-input but adapts colors */
.summary-ask-row .terminal-input {
  background: var(--glass);
  color: var(--text);
  border-color: var(--glass-border);
}

.summary-ask-row .terminal-input::placeholder {
  color: var(--text-faint);
}

/* ═══ LEGO FILE BROWSER ═══ */
.lego-breadcrumbs {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 10px 16px;
  flex-wrap: wrap;
  border-bottom: 1px solid var(--hairline);
}

.lego-crumb {
  font-size: 13px;
  color: var(--text-dim);
  cursor: pointer;
  padding: 2px 6px;
  border-radius: 6px;
  transition: all 0.15s;
}

.lego-crumb:active { background: var(--accent-soft); }
.lego-crumb.active { color: var(--accent-text); font-weight: 600; }

.lego-crumb-sep {
  color: var(--text-faint);
  font-size: 12px;
}

.lego-view-toggle {
  margin-left: auto;
  background: var(--glass);
  border: 1px solid var(--glass-border);
  color: var(--text-dim);
  width: 34px;
  height: 30px;
  border-radius: 8px;
  font-size: 16px;
  cursor: pointer;
  box-shadow: var(--glass-shadow);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.lego-view-toggle:active { transform: scale(0.9); }

/* Grid mode */
.lego-list.lego-grid {
  padding: 12px 12px 40px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}

.lego-card {
  cursor: pointer;
  border-radius: 14px;
  overflow: hidden;
  background: transparent;
  border: none;
  transition: transform 0.15s;
}

.lego-card:active {
  transform: scale(0.96);
}

.lego-thumb-wrap {
  position: relative;
  width: 100%;
  aspect-ratio: 1;
  overflow: hidden;
  background: rgba(0,0,0,0.04);
  display: flex;
  align-items: center;
  justify-content: center;
}

.lego-thumb {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.lego-thumb-placeholder {
  opacity: 0.4;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-dim);
}

.lego-thumb-badge {
  position: absolute;
  bottom: 6px;
  right: 6px;
  background: rgba(0,0,0,0.6);
  backdrop-filter: blur(8px);
  color: white;
  width: 24px;
  height: 24px;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
}

.lego-card-info {
  padding: 8px 10px 10px;
}

.lego-card-name {
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.3;
}

.lego-card-meta {
  font-size: 10px;
  color: var(--text-dim);
  margin-top: 2px;
}

/* List mode */
.lego-list:not(.lego-grid) {
  padding: 8px 12px 40px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.lego-list:not(.lego-grid) .lego-card {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px;
}

.lego-list:not(.lego-grid) .lego-thumb-wrap {
  width: 48px;
  height: 48px;
  aspect-ratio: unset;
  border-radius: 10px;
  flex-shrink: 0;
}

.lego-list:not(.lego-grid) .lego-thumb-placeholder {
  opacity: 0.4;
}

.lego-list:not(.lego-grid) .lego-thumb-badge {
  width: 18px;
  height: 18px;
  font-size: 9px;
  bottom: 2px;
  right: 2px;
}

.lego-list:not(.lego-grid) .lego-card-info {
  flex: 1;
  min-width: 0;
  padding: 0 4px;
}

.lego-list:not(.lego-grid) .lego-card-name {
  font-size: 14px;
  font-weight: 500;
}

.lego-list:not(.lego-grid) .lego-card-meta {
  font-size: 11px;
  margin-top: 1px;
}

/* Image viewer */
.lego-image-viewer {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.85);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px 20px;
}

.lego-image-viewer img {
  max-width: 100%;
  max-height: 100%;
  border-radius: 12px;
  box-shadow: 0 20px 60px rgba(0,0,0,0.5);
  pointer-events: auto;
  z-index: 200;
}

.lego-image-close {
  position: absolute;
  top: 20px;
  right: 20px;
  background: var(--glass);
  backdrop-filter: blur(var(--blur));
  -webkit-backdrop-filter: blur(var(--blur));
  border: 1px solid var(--glass-border);
  color: white;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  font-size: 18px;
  cursor: pointer;
  box-shadow: var(--glass-shadow);
  z-index: 210;
}

.ollama-model-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 16px;
  border-bottom: 1px solid var(--hairline);
}

.ollama-model-bar select {
  flex: 1;
  padding: 8px 12px;
  border-radius: 10px;
  border: 1px solid var(--hairline);
  background: var(--glass);
  color: var(--text);
  font-size: 14px;
  -webkit-appearance: none;
  appearance: none;
}

.ollama-model-info {
  font-size: 11px;
  color: var(--text-dim);
  white-space: nowrap;
}

.ollama-chat {
  display: flex;
  flex-direction: column;
  height: calc(100vh - 160px);
  height: calc(100dvh - 160px);
}

.ollama-messages {
  flex: 1;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 12px 16px;
}

.ollama-welcome {
  text-align: center;
  color: var(--text-dim);
  padding: 40px 20px;
  font-size: 15px;
}

.ollama-msg {
  margin-bottom: 12px;
  display: flex;
}

.ollama-msg.user {
  justify-content: flex-end;
}

.ollama-msg-content {
  max-width: 85%;
  padding: 10px 14px;
  border-radius: 16px;
  font-size: 14px;
  line-height: 1.5;
  word-wrap: break-word;
}

.ollama-msg.user .ollama-msg-content {
  background: var(--accent);
  color: white;
  border-bottom-right-radius: 4px;
}

.ollama-msg.assistant .ollama-msg-content {
  background: var(--glass);
  border: 1px solid var(--hairline);
  border-bottom-left-radius: 4px;
}

.ollama-typing {
  color: var(--text-dim);
  font-style: italic;
}

.ollama-code {
  background: rgba(0,0,0,0.1);
  padding: 10px;
  border-radius: 8px;
  overflow-x: auto;
  font-family: monospace;
  font-size: 13px;
  margin: 6px 0;
}

.ollama-inline-code {
  background: rgba(0,0,0,0.08);
  padding: 1px 5px;
  border-radius: 4px;
  font-family: monospace;
  font-size: 13px;
}

.ollama-input-bar {
  display: flex;
  gap: 8px;
  padding: 10px 16px;
  border-top: 1px solid var(--hairline);
  align-items: flex-end;
}

.ollama-input {
  flex: 1;
  padding: 10px 14px;
  border-radius: 16px;
  border: 1px solid var(--hairline);
  background: var(--glass);
  color: var(--text);
  font-size: 14px;
  resize: none;
  min-height: 40px;
  max-height: 120px;
}

.ollama-send-btn, .ollama-stop-btn {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: none;
  background: var(--accent);
  color: white;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.ollama-stop-btn {
  background: var(--red, #ef4444);
}

/* ─── ComfyUI ─── */
.comfy-content {
  padding: 16px;
  padding-bottom: 60px;
}

.comfy-status-bar {
  padding: 8px 12px;
  border-radius: 10px;
  font-size: 13px;
  margin-bottom: 16px;
  text-align: center;
}

.comfy-status-bar.online {
  background: rgba(34, 197, 94, 0.1);
  color: rgb(22, 163, 74);
}

.comfy-status-bar.offline {
  background: rgba(239, 68, 68, 0.1);
  color: var(--red, #ef4444);
}

.comfy-prompt-section {
  margin-bottom: 12px;
}

.comfy-prompt {
  width: 100%;
  padding: 12px 14px;
  border-radius: 14px;
  border: 1px solid var(--hairline);
  background: var(--glass);
  color: var(--text);
  font-size: 15px;
  resize: vertical;
  min-height: 60px;
  box-sizing: border-box;
}

.comfy-params {
  display: flex;
  gap: 10px;
  margin-bottom: 16px;
}

.comfy-param {
  flex: 1;
}

.comfy-param label {
  display: block;
  font-size: 12px;
  color: var(--text-dim);
  margin-bottom: 4px;
}

.comfy-param select, .comfy-param input {
  width: 100%;
  padding: 8px 10px;
  border-radius: 10px;
  border: 1px solid var(--hairline);
  background: var(--glass);
  color: var(--text);
  font-size: 13px;
  -webkit-appearance: none;
  appearance: none;
  box-sizing: border-box;
}

.comfy-generate-btn {
  width: 100%;
  padding: 14px;
  border-radius: 14px;
  border: none;
  background: var(--accent);
  color: white;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  margin-bottom: 16px;
  transition: transform 0.1s;
}

.comfy-generate-btn:active { transform: scale(0.98); }
.comfy-generate-btn:disabled { opacity: 0.5; }

.comfy-progress {
  margin-bottom: 16px;
}

.comfy-progress-text {
  font-size: 13px;
  color: var(--text-dim);
  text-align: center;
  margin-bottom: 8px;
}

.comfy-progress-bar {
  width: 100%;
  height: 6px;
  border-radius: 3px;
  background: var(--hairline);
  overflow: hidden;
}

.comfy-progress-fill {
  height: 100%;
  background: var(--accent);
  border-radius: 3px;
  transition: width 0.5s ease;
  width: 0%;
}

.comfy-result {
  margin-bottom: 20px;
}

.comfy-result img {
  width: 100%;
  border-radius: 12px;
  display: block;
  margin-bottom: 8px;
}

.comfy-gallery-section {
  margin-top: 20px;
}

.comfy-gallery-header {
  font-size: 14px;
  font-weight: 600;
  margin-bottom: 10px;
}

.comfy-gallery {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}

.comfy-gallery-item {
  border-radius: 10px;
  overflow: hidden;
  aspect-ratio: 1;
  cursor: pointer;
}

.comfy-gallery-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ─── Swipe Mode ─── */
/* Load more progress */
.lego-loading {
  grid-column: 1 / -1;
  padding: 60px 20px;
  text-align: center;
}

.lego-spinner {
  width: 36px;
  height: 36px;
  margin: 0 auto 12px;
  border: 3px solid var(--hairline);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: lego-spin 0.8s linear infinite;
}

@keyframes lego-spin {
  to { transform: rotate(360deg); }
}

.lego-loading-text {
  font-size: 13px;
  color: var(--text-dim);
}

.lego-load-more {
  grid-column: 1 / -1;
  padding: 24px 20px;
  text-align: center;
  cursor: pointer;
  transition: background 0.15s;
  border-radius: 12px;
}

.lego-load-more:active {
  background: var(--accent-soft);
}

.lego-load-more-text {
  font-size: 13px;
  color: var(--text-dim);
  margin-bottom: 8px;
}

.lego-load-more-bar {
  width: 200px;
  max-width: 80%;
  height: 4px;
  border-radius: 2px;
  background: var(--hairline-strong);
  margin: 0 auto;
  overflow: hidden;
}

.lego-load-more-fill {
  height: 100%;
  background: var(--accent);
  border-radius: 2px;
  transition: width 0.3s ease;
}

/* ═══ VOICE SYSTEM ═══ */

/* Floating orb button */
.voice-orb {
  position: fixed;
  bottom: 24px;
  right: 24px;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  border: 1px solid var(--glass-border);
  background: var(--glass);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  box-shadow: var(--glass-shadow), var(--glass-inset);
  cursor: pointer;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text);
  transition: transform 0.2s, box-shadow 0.3s;
}
.voice-orb:active { transform: scale(0.92); }

/* AI Spread Menu */
.ai-spread-overlay {
  position: fixed; inset: 0; z-index: 10000;
  background: rgba(0,0,0,0.3);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  opacity: 0;
  transition: opacity 0.3s ease;
  pointer-events: none;
}
.ai-spread-overlay.active {
  opacity: 1;
  pointer-events: auto;
}
.ai-spread-item {
  position: absolute;
  width: 72px; height: 72px;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  border-radius: 18px;
  background: var(--bg);
  border: 1px solid var(--glass-border);
  box-shadow: 0 4px 24px rgba(0,0,0,0.35);
  cursor: pointer;
  opacity: 0;
  transform: translate(0, 0) scale(0.15);
  transition: opacity 0.4s ease, transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
  transition-delay: var(--delay, 0s);
}
.ai-spread-item.show {
  opacity: 1;
  transform: translate(var(--tx), var(--ty)) scale(1);
}
/* Collapse: snap back to center, no stagger */
.ai-spread-overlay:not(.active) .ai-spread-item {
  transition-delay: 0s;
  transform: translate(0, 0) scale(0.15);
  opacity: 0;
}
.ai-spread-item.show:active {
  transform: translate(var(--tx), var(--ty)) scale(0.88);
}
.ai-spread-item-visual {
  width: 30px; height: 30px;
  display: flex; align-items: center; justify-content: center;
}
.ai-spread-item-visual svg {
  width: 26px; height: 26px;
}
.ai-spread-item-label {
  font-size: 0.68rem;
  color: var(--text);
  margin-top: 3px;
  font-weight: 600;
}
.app-icon.ai-spread-active .app-icon-visual {
  transform: scale(0.9);
  opacity: 0.5;
  transition: all 0.3s ease;
}

/* Journal app */
.journal-tabs {
  display: flex; gap: 0; padding: 8px 16px;
  border-bottom: 1px solid var(--glass-border);
}
.journal-tab {
  padding: 8px 20px; border: none; background: none;
  color: var(--text-dim); font-size: 0.85rem; font-weight: 600;
  cursor: pointer; border-bottom: 2px solid transparent;
  transition: color 0.2s, border-color 0.2s;
}
.journal-tab.active {
  color: var(--text);
  border-bottom-color: var(--accent);
}
.journal-panel { padding: 16px; }
.journal-voice-content {
  display: flex; flex-direction: column;
  align-items: center; gap: 16px; padding: 32px 16px;
}
.journal-record-btn {
  width: 72px; height: 72px; border-radius: 50%;
  border: 3px solid var(--glass-border); cursor: pointer;
  background: var(--glass);
  color: var(--text); display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 2px;
  box-shadow: 0 2px 12px rgba(0,0,0,0.15);
  transition: transform 0.15s, background 0.2s;
  font-size: 0.65rem; font-weight: 600;
  position: relative;
}
.journal-record-btn:active { transform: scale(0.93); }
.journal-record-btn.recording {
  background: #ef4444; border-color: #ef4444;
  color: white;
  animation: vj-pulse 1.2s ease-in-out infinite;
}
.journal-voice-status {
  font-size: 0.82rem; color: var(--text-dim);
  text-align: center; max-width: 350px;
  min-height: 1.2em;
}

/* Legos 3D */
.legos-content {
  display: flex; flex-direction: column;
  height: calc(100vh - 60px);
  position: relative;
}
#legos-canvas {
  flex: 1;
  display: block;
  width: 100%;
  touch-action: none;
}
.legos-counter {
  font-size: 0.78rem; color: var(--text-dim);
  font-weight: 500; margin-left: auto;
}
.legos-fab-row {
  position: absolute;
  bottom: 20px; right: 20px;
  display: flex; gap: 12px;
  z-index: 10;
}
.legos-fab {
  width: 52px; height: 52px;
  border-radius: 50%;
  border: 1px solid var(--glass-border);
  background: rgba(255,255,255,0.7);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: 0 4px 16px rgba(0,0,0,0.12);
  color: var(--text);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  transition: transform 0.2s, box-shadow 0.2s, background 0.2s;
}
.legos-fab:active { transform: scale(0.9); }
.legos-fab-add {
  background: linear-gradient(135deg, #6366f1, #818cf8);
  color: white;
  border-color: transparent;
  box-shadow: 0 4px 20px rgba(99,102,241,0.3);
}
.legos-fab-add:active { transform: scale(0.9); }
.legos-fab-delete.active {
  background: #ef4444; color: white; border-color: transparent;
  box-shadow: 0 4px 20px rgba(239,68,68,0.3);
  animation: legos-delete-pulse 1.5s ease-in-out infinite;
}
@keyframes legos-delete-pulse {
  0%, 100% { box-shadow: 0 4px 20px rgba(239,68,68,0.3); }
  50% { box-shadow: 0 4px 28px rgba(239,68,68,0.5); }
}

/* Keep voice-journal-btn CSS for compatibility */
.voice-journal-btn { display: none !important; }
@keyframes vj-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.4); }
  50% { box-shadow: 0 0 0 8px rgba(239, 68, 68, 0); }
}

/* vj-toast still used */
.vj-toast {
  position: fixed;
  bottom: 90px;
  right: 24px;
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  border-radius: 10px;
  padding: 10px 16px;
  font-size: 0.82rem;
  color: var(--text);
  z-index: 10002;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s;
  max-width: 280px;
  box-shadow: 0 2px 12px rgba(0,0,0,0.3);
}
.vj-toast.show {
  opacity: 1;
}

.voice-orb:active {
  transform: scale(0.92);
}

.voice-orb-inner {
  display: flex;
  align-items: center;
  justify-content: center;
}

@keyframes voice-orb-pulse {
  0%, 100% { box-shadow: 0 4px 20px var(--accent-glow), 0 0 0 0 var(--accent-glow); }
  50% { box-shadow: 0 4px 30px var(--accent-glow), 0 0 0 12px transparent; }
}

/* Voice overlay */
.voice-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 10000;
  display: none;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  padding-top: env(safe-area-inset-top, 0px);
  padding-bottom: env(safe-area-inset-bottom, 0px);
}

.voice-overlay.active {
  display: flex;
}

.voice-overlay-bg {
  position: absolute;
  inset: 0;
  background: rgba(10, 10, 15, 0.85);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
}

.voice-overlay-content {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
  max-width: 500px;
  width: 90%;
  max-height: 100%;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 20px 16px;
  padding-top: max(20px, env(safe-area-inset-top, 0px));
}

/* Animated orb in overlay */
.voice-anim {
  position: relative;
  width: 120px;
  height: 120px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.voice-anim-core {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: var(--glass);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid var(--glass-border);
  box-shadow: var(--glass-shadow), var(--glass-inset);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text);
  z-index: 2;
  transition: transform 0.3s, box-shadow 0.3s;
}

.voice-anim-ring {
  position: absolute;
  width: 80px;
  height: 80px;
  border-radius: 50%;
  border: 2px solid var(--glass-border);
  animation: voice-ring 2s ease-out infinite;
}

.voice-anim-ring2 { animation-delay: 0.5s; }
.voice-anim-ring3 { animation-delay: 1s; }

@keyframes voice-ring {
  0% { transform: scale(1); opacity: 0.6; }
  100% { transform: scale(2.2); opacity: 0; }
}

/* States */
.voice-anim-idle .voice-anim-core {
  box-shadow: var(--glass-shadow), var(--glass-inset);
}

.voice-anim-listening .voice-anim-core {
  transform: scale(1.15);
  box-shadow: 0 0 40px var(--accent-glow);
  animation: voice-listen-pulse 1s ease-in-out infinite;
}

.voice-anim-listening .voice-anim-ring {
  border-color: var(--accent);
}

@keyframes voice-listen-pulse {
  0%, 100% { transform: scale(1.15); }
  50% { transform: scale(1.25); }
}

.voice-anim-thinking .voice-anim-core {
  box-shadow: 0 0 30px var(--accent-glow), inset 0 0 15px var(--accent-soft);
  animation: voice-think-breathe 2s ease-in-out infinite;
  position: relative;
}

.voice-anim-thinking .voice-anim-core::after {
  content: '';
  position: absolute;
  inset: 8px;
  border-radius: 50%;
  background: radial-gradient(circle at 30% 30%, rgba(255, 255, 255, 0.2), transparent 70%);
  animation: voice-think-shimmer 2.5s ease-in-out infinite;
  pointer-events: none;
}

@keyframes voice-think-breathe {
  0%, 100% { transform: scale(1); box-shadow: 0 0 25px var(--accent-glow), inset 0 0 15px var(--accent-soft); }
  50% { transform: scale(1.1); box-shadow: 0 0 45px var(--accent-glow), inset 0 0 20px var(--accent-soft); }
}

@keyframes voice-think-shimmer {
  0%, 100% { opacity: 0.3; transform: rotate(0deg); }
  50% { opacity: 0.6; transform: rotate(180deg); }
}

.voice-anim-speaking .voice-anim-core {
  box-shadow: 0 0 30px var(--accent-glow);
  animation: voice-speak-pulse 0.6s ease-in-out infinite;
}

@keyframes voice-speak-pulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.08); }
}

/* Status text */
.voice-status {
  font-size: 1.1rem;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.9);
  text-align: center;
  min-height: 1.5em;
}

/* Microphone permission button */
.voice-perm-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 14px 26px;
  border: 1px solid var(--glass-border);
  border-radius: 14px;
  background: var(--glass);
  color: var(--text);
  font-size: 0.95rem;
  font-weight: 600;
  cursor: pointer;
  transition: transform 0.1s;
}
.voice-perm-btn:active { transform: scale(0.97); }

/* Transcript (user speech - subtle) */
.voice-transcript {
  font-size: 0.95rem;
  font-style: italic;
  color: var(--text-dim);
  text-align: center;
  min-height: 1.5em;
  max-width: 100%;
  opacity: 0;
  transition: opacity 0.3s;
}

.voice-transcript:not(:empty) {
  opacity: 1;
}

/* Response (AI - prominent) */
.voice-response {
  font-size: 1.35rem;
  font-weight: 700;
  color: var(--text);
  text-align: center;
  min-height: 2em;
  max-width: 100%;
  line-height: 1.4;
  opacity: 0;
  transition: opacity 0.3s;
  cursor: pointer;
}

.voice-response:not(:empty) {
  opacity: 1;
}

.voice-response.error {
  color: var(--red);
}

.voice-response.fade-out {
  opacity: 0;
  transition: opacity 1s ease-out;
}

/* Confirmation */
.voice-confirm {
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 16px;
  padding: 20px;
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.voice-confirm-text {
  color: white;
  font-size: 0.95rem;
  line-height: 1.5;
}

.voice-confirm-text strong {
  color: #fbbf24;
}

.voice-confirm-buttons {
  display: flex;
  gap: 12px;
}

.voice-btn {
  flex: 1;
  padding: 14px;
  border: none;
  border-radius: 12px;
  font-size: 0.95rem;
  font-weight: 600;
  cursor: pointer;
  transition: transform 0.1s, opacity 0.2s;
}

.voice-btn:active { transform: scale(0.96); }

.voice-btn-yes {
  background: rgba(34, 197, 94, 0.25);
  color: #4ade80;
  border: 1px solid rgba(34, 197, 94, 0.4);
}

.voice-btn-no {
  background: rgba(239, 68, 68, 0.25);
  color: #f87171;
  border: 1px solid rgba(239, 68, 68, 0.4);
}

/* Settings */
.voice-settings {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 16px;
  padding: 20px;
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.voice-setting-row {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.voice-setting-row label {
  font-size: 0.8rem;
  color: rgba(255, 255, 255, 0.6);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.voice-setting-row select {
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 10px;
  padding: 12px;
  color: white;
  font-size: 0.95rem;
  cursor: pointer;
  outline: none;
}

.voice-setting-row select:focus {
  border-color: var(--accent);
}

/* Controls */
.voice-controls {
  display: flex;
  gap: 16px;
  margin-top: 8px;
}

.voice-control-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 18px 28px;
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.06);
  color: white;
  cursor: pointer;
  transition: transform 0.1s, background 0.2s;
  min-width: 90px;
  min-height: 72px;
}

.voice-control-btn:active { transform: scale(0.95); }
.voice-control-btn:hover { background: rgba(255, 255, 255, 0.12); }

.voice-control-icon { font-size: 1.6rem; display: flex; align-items: center; justify-content: center; }
.voice-control-icon svg { color: currentColor; }
.voice-control-label { font-size: 0.75rem; opacity: 0.7; }

.voice-close-btn:hover {
  background: rgba(239, 68, 68, 0.15);
  border-color: rgba(239, 68, 68, 0.3);
}

/* Mute button states */
#voice-mute-btn.muted {
  background: rgba(239, 68, 68, 0.2);
  border-color: rgba(239, 68, 68, 0.4);
}

#voice-mute-btn:not(.muted) {
  background: var(--accent-soft);
  border-color: var(--accent);
}

/* Light mode adjustments (follow the app's data-theme) */
:root[data-theme="light"] .voice-overlay-bg { background: rgba(255, 255, 255, 0.9); }
:root[data-theme="light"] .voice-status { color: rgba(0, 0, 0, 0.8); }
:root[data-theme="light"] .voice-transcript { color: var(--text-faint); }
:root[data-theme="light"] .voice-response { color: var(--text); }
:root[data-theme="light"] .voice-confirm { background: rgba(0, 0, 0, 0.04); border-color: rgba(0, 0, 0, 0.1); }
:root[data-theme="light"] .voice-confirm-text { color: rgba(0, 0, 0, 0.8); }
:root[data-theme="light"] .voice-settings { background: rgba(0, 0, 0, 0.03); border-color: rgba(0, 0, 0, 0.1); }
:root[data-theme="light"] .voice-setting-row label { color: rgba(0, 0, 0, 0.5); }
:root[data-theme="light"] .voice-setting-row select { background: rgba(0, 0, 0, 0.05); border-color: rgba(0, 0, 0, 0.1); color: rgba(0, 0, 0, 0.85); }
:root[data-theme="light"] .voice-control-btn { background: rgba(0, 0, 0, 0.04); border-color: rgba(0, 0, 0, 0.1); color: rgba(0, 0, 0, 0.8); }
:root[data-theme="light"] .voice-control-btn:hover { background: rgba(0, 0, 0, 0.08); }
:root[data-theme="light"] .voice-mode-btn { background: rgba(0, 0, 0, 0.04); border-color: rgba(0, 0, 0, 0.1); color: rgba(0, 0, 0, 0.7); }
:root[data-theme="light"] .voice-mode-btn.active { background: var(--accent-soft); border-color: var(--accent); color: var(--accent-text); }
:root[data-theme="light"] .voice-chat-msg.user { background: var(--accent-soft); color: rgba(0, 0, 0, 0.8); }
:root[data-theme="light"] .voice-chat-msg.assistant { background: rgba(0, 0, 0, 0.04); color: rgba(0, 0, 0, 0.7); }
:root[data-theme="light"] .voice-chat-input { background: rgba(0, 0, 0, 0.05); border-color: rgba(0, 0, 0, 0.1); color: rgba(0, 0, 0, 0.85); }
:root[data-theme="light"] .voice-chat-send { background: var(--accent-soft); color: var(--accent-text); }
:root[data-theme="light"] .chat-history-content { background: rgba(255, 255, 255, 0.98); }
:root[data-theme="light"] .chat-history-header h3 { color: rgba(0, 0, 0, 0.8); }
:root[data-theme="light"] .chat-history-item.user { background: var(--accent-soft); }
:root[data-theme="light"] .chat-history-item.assistant { background: rgba(0, 0, 0, 0.04); }
:root[data-theme="light"] .chat-history-role { color: rgba(0, 0, 0, 0.5); }
:root[data-theme="light"] .chat-history-text { color: rgba(0, 0, 0, 0.75); }
:root[data-theme="light"] .chat-history-empty { color: rgba(0, 0, 0, 0.4); }

/* ═══ VOICE MODE TOGGLE ═══ */

.voice-mode-toggle {
  display: flex;
  gap: 0;
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.15);
  background: rgba(255, 255, 255, 0.04);
  padding: 4px;
}

.voice-mode-btn {
  flex: 1;
  padding: 14px 24px;
  border: none;
  background: transparent;
  color: rgba(255, 255, 255, 0.75);
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  border-radius: 10px;
  transition: all 0.2s;
  min-height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.voice-mode-btn.active {
  background: var(--accent-soft);
  color: var(--text);
  box-shadow: 0 2px 8px var(--accent-glow);
}

/* ═══ VOICE VIEW ═══ */

.voice-view {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  width: 100%;
}

/* ═══ VOICE CAPABILITIES ═══ */

.voice-capabilities {
  width: 100%;
  max-width: 400px;
}

.voice-caps-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: 10px 16px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.04);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  color: rgba(255, 255, 255, 0.55);
  font-size: 0.8rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s;
  gap: 6px;
}

.voice-caps-toggle:active { transform: scale(0.97); }
.voice-caps-toggle:hover { background: rgba(255, 255, 255, 0.08); color: rgba(255, 255, 255, 0.75); }
.voice-caps-toggle.open &::after { transform: rotate(90deg); }

.voice-caps-list {
  overflow: hidden;
  max-height: 0;
  opacity: 0;
  transition: max-height 0.3s ease, opacity 0.3s ease, padding 0.3s ease;
  padding: 0 12px;
  margin-top: 8px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.voice-caps-list.open {
  max-height: 320px;
  opacity: 1;
  padding: 12px;
}

.voice-cap-item {
  font-size: 0.78rem;
  color: rgba(255, 255, 255, 0.55);
  padding: 8px 12px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.06);
  line-height: 1.4;
  display: flex;
  align-items: flex-start;
  gap: 6px;
}

:root[data-theme="light"] .voice-caps-toggle { border-color: rgba(0, 0, 0, 0.08); background: rgba(0, 0, 0, 0.02); color: rgba(0, 0, 0, 0.5); }
:root[data-theme="light"] .voice-caps-toggle:hover { background: rgba(0, 0, 0, 0.05); color: rgba(0, 0, 0, 0.7); }
:root[data-theme="light"] .voice-cap-item { color: rgba(0, 0, 0, 0.5); background: rgba(0, 0, 0, 0.02); border-color: rgba(0, 0, 0, 0.06); }

/* ═══ TEXT VIEW ═══ */

.text-view {
  display: flex;
  flex-direction: column;
  width: 100%;
  gap: 12px;
}

.voice-chat-messages {
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-height: 50vh;
  overflow-y: auto;
  padding: 4px;
  scroll-behavior: smooth;
}

.voice-chat-messages:empty::before {
  content: 'Type a message to chat with AI';
  color: rgba(255, 255, 255, 0.3);
  text-align: center;
  padding: 40px 0;
  font-size: 0.9rem;
}

.voice-chat-msg {
  padding: 12px 16px;
  border-radius: 14px;
  font-size: 0.95rem;
  line-height: 1.4;
  max-width: 85%;
  word-wrap: break-word;
}

.voice-chat-msg.user {
  align-self: flex-end;
  background: var(--accent);
  color: white;
  border-bottom-right-radius: 4px;
}

.voice-chat-msg.assistant {
  align-self: flex-start;
  background: var(--glass);
  border: 1px solid var(--hairline);
  color: var(--text);
  border-bottom-left-radius: 4px;
}

.voice-chat-typing {
  opacity: 0.5;
  font-style: italic;
}

.voice-chat-input-bar {
  display: flex;
  gap: 8px;
  align-items: center;
}

.voice-chat-input {
  flex: 1;
  padding: 14px 16px;
  border: 1px solid var(--hairline);
  border-radius: 14px;
  background: var(--glass);
  color: var(--text);
  font-size: 1rem;
  outline: none;
  min-height: 48px;
}

.voice-chat-input:focus {
  border-color: var(--accent);
}

.voice-chat-input::placeholder {
  color: rgba(255, 255, 255, 0.3);
}

.voice-chat-send {
  width: 48px;
  height: 48px;
  border: none;
  border-radius: 50%;
  background: var(--accent-soft);
  color: var(--text);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: transform 0.1s, background 0.2s;
}

.voice-chat-send:active { transform: scale(0.9); }
.voice-chat-send:hover { background: var(--accent-soft); }

/* ═══ CHAT HISTORY MODAL ═══ */

.chat-history-modal {
  position: fixed;
  inset: 0;
  z-index: 10001;
  background: rgba(10, 10, 15, 0.8);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Full-access warning modal */
.full-access-modal {
  position: fixed;
  inset: 0;
  z-index: 10010;
  background: rgba(10, 10, 15, 0.8);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

.full-access-content {
  background: var(--surface-solid, #1a1a24);
  border: 1px solid rgba(239, 68, 68, 0.5);
  border-radius: 20px;
  width: 100%;
  max-width: 480px;
  max-height: 85vh;
  overflow-y: auto;
  padding: 24px;
  box-shadow: 0 0 60px rgba(239, 68, 68, 0.3);
}

.full-access-title {
  font-size: 1.3rem;
  font-weight: 800;
  color: #f87171;
  margin-bottom: 12px;
}

.full-access-content p {
  font-size: 0.9rem;
  color: var(--text-dim);
  line-height: 1.5;
  margin-bottom: 8px;
}

.full-access-content ul {
  margin: 0 0 12px;
  padding-left: 20px;
  color: var(--text);
  font-size: 0.9rem;
  line-height: 1.6;
}

.full-access-content code {
  background: var(--accent-soft);
  padding: 1px 6px;
  border-radius: 4px;
  font-size: 0.85em;
}

.full-access-buttons {
  display: flex;
  gap: 12px;
  margin-top: 16px;
}

.chat-history-content {
  background: rgba(20, 20, 28, 0.95);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 20px;
  width: 90%;
  max-width: 500px;
  max-height: 80vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.chat-history-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.chat-history-header h3 {
  margin: 0;
  font-size: 1.1rem;
  color: rgba(255, 255, 255, 0.9);
}

.chat-history-close {
  width: 36px;
  height: 36px;
  border: none;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.08);
  color: white;
  font-size: 1rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

.chat-history-close:active { transform: scale(0.9); }

.chat-history-list {
  flex: 1;
  overflow-y: auto;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.chat-history-item {
  padding: 12px 16px;
  border-radius: 14px;
  font-size: 0.9rem;
  line-height: 1.4;
}

.chat-history-item.user {
  align-self: flex-end;
  max-width: 85%;
  background: var(--accent-soft);
  border-bottom-right-radius: 4px;
}

.chat-history-item.assistant {
  align-self: flex-start;
  max-width: 85%;
  background: rgba(255, 255, 255, 0.06);
  border-bottom-left-radius: 4px;
}

.chat-history-role {
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  opacity: 0.5;
  margin-bottom: 4px;
}

.chat-history-text {
  color: rgba(255, 255, 255, 0.8);
}

.chat-history-empty {
  text-align: center;
  padding: 40px 0;
  color: rgba(255, 255, 255, 0.3);
  font-size: 0.9rem;
}

/* ═══ PROJECTS SECTION ═══ */
.projects-divider {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 8px 24px 4px;
  margin-top: 6px;
}

.projects-divider-line {
  flex: 1;
  height: 1px;
  background: var(--hairline-strong);
}

.projects-divider-label {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--text-faint);
  white-space: nowrap;
}

.projects-list {
  padding: 6px 20px 24px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* ─── Project Card (home screen) ─── */
.project-card {
  background: var(--glass);
  backdrop-filter: blur(var(--blur));
  -webkit-backdrop-filter: blur(var(--blur));
  border: 1px solid var(--glass-border);
  border-radius: 18px;
  padding: 14px 16px;
  cursor: pointer;
  box-shadow: var(--glass-shadow), var(--glass-inset);
  transition: all 0.2s;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.project-card:active {
  transform: scale(0.98);
  background: var(--glass-hover);
}

.project-card-header {
  display: flex;
  align-items: center;
  gap: 12px;
}

.project-card-icon {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--accent-soft);
  color: var(--accent);
  flex-shrink: 0;
}

.project-card-title {
  flex: 1;
  min-width: 0;
}

.project-card-name {
  font-size: 16px;
  font-weight: 700;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.project-card-domain {
  font-size: 12px;
  color: var(--accent-text);
  text-decoration: none;
}

.project-card-domain:active { opacity: 0.6; }

.project-card-status {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  font-weight: 600;
  padding: 4px 10px;
  border-radius: 20px;
  flex-shrink: 0;
}

.project-card-status.deployed {
  background: rgba(16, 185, 129, 0.12);
  color: var(--green);
}

.project-card-status.pending {
  background: rgba(245, 158, 11, 0.12);
  color: var(--orange);
}

.project-card-status.loading {
  background: var(--accent-soft);
  color: var(--accent-text);
}

.project-card-status svg {
  flex-shrink: 0;
}

.project-card-stack {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}

.tech-badge {
  font-size: 10px;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 6px;
  background: var(--chip-bg);
  border: 1px solid var(--chip-border);
  color: var(--text-dim);
}

.project-card-footer {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--text-dim);
  min-height: 18px;
}

.project-card-footer svg {
  flex-shrink: 0;
  color: var(--text-faint);
}

.project-card-commit-msg {
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ─── Project Detail Screen ─── */
.project-detail-content {
  padding: 16px 20px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.project-detail-header {
  background: var(--glass);
  backdrop-filter: blur(var(--blur));
  -webkit-backdrop-filter: blur(var(--blur));
  border: 1px solid var(--glass-border);
  border-radius: 18px;
  padding: 18px;
  box-shadow: var(--glass-shadow), var(--glass-inset);
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.project-detail-title-row {
  display: flex;
  align-items: center;
  gap: 14px;
}

.project-detail-icon {
  width: 56px;
  height: 56px;
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--accent-soft);
  color: var(--accent);
  flex-shrink: 0;
}

.project-detail-name {
  font-size: 22px;
  font-weight: 700;
  color: var(--text);
}

.project-detail-domain {
  font-size: 14px;
  color: var(--accent-text);
  text-decoration: none;
  margin-top: 2px;
  display: inline-block;
}

.project-detail-domain:active { opacity: 0.6; }

.project-detail-stats {
  display: flex;
  gap: 10px;
}

.project-stat {
  background: var(--chip-bg);
  border: 1px solid var(--chip-border);
  border-radius: 12px;
  padding: 8px 14px;
  text-align: center;
  flex: 1;
}

.project-stat-num {
  font-size: 20px;
  font-weight: 700;
  color: var(--text);
  line-height: 1.2;
}

.project-stat-label {
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-faint);
}

.project-detail-links {
  display: flex;
  gap: 10px;
}

.project-link-btn {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  background: var(--glass);
  border: 1px solid var(--glass-border);
  border-radius: 12px;
  padding: 10px;
  color: var(--text);
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  box-shadow: var(--glass-shadow);
  transition: all 0.15s;
}

.project-link-btn:active {
  transform: scale(0.97);
  background: var(--glass-hover);
}

.project-link-btn svg {
  color: var(--accent);
  flex-shrink: 0;
}

.project-section-title {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--text-dim);
  margin-bottom: 2px;
}

.project-card-body {
  background: var(--glass);
  backdrop-filter: blur(var(--blur));
  -webkit-backdrop-filter: blur(var(--blur));
  border: 1px solid var(--glass-border);
  border-radius: 16px;
  padding: 14px;
  box-shadow: var(--glass-shadow);
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.commit-row {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 8px 0;
  border-bottom: 1px solid var(--hairline);
}

.commit-row:last-child { border-bottom: none; }

.commit-avatar {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  flex-shrink: 0;
  background: var(--accent-soft);
}

.commit-body {
  flex: 1;
  min-width: 0;
}

.commit-msg {
  font-size: 13px;
  color: var(--text);
  line-height: 1.4;
  margin-bottom: 2px;
  word-break: break-word;
}

.commit-meta {
  font-size: 11px;
  color: var(--text-faint);
  display: flex;
  gap: 8px;
  align-items: center;
}

.commit-author {
  font-weight: 600;
  color: var(--text-dim);
}

.project-empty {
  padding: 16px;
  text-align: center;
  color: var(--text-dim);
  font-size: 13px;
}

.project-loading {
  padding: 16px;
  text-align: center;
  color: var(--text-faint);
  font-size: 13px;
}
/* ═══ SETTINGS APP ═══ */
.settings-tabs {
  display: flex; gap: 0; padding: 8px 16px;
  border-bottom: 1px solid var(--glass-border);
  overflow-x: auto; white-space: nowrap;
}
.settings-tabs::-webkit-scrollbar { display: none; }
.settings-tab {
  padding: 8px 16px; border: none; background: none;
  color: var(--text-dim); font-size: 0.82rem; font-weight: 600;
  cursor: pointer; border-bottom: 2px solid transparent;
  transition: color 0.2s, border-color 0.2s;
}
.settings-tab.active { color: var(--text); border-bottom-color: var(--accent); }
.settings-body { padding: 16px; max-width: 600px; margin: 0 auto; }
.settings-group {
  background: var(--glass); border: 1px solid var(--glass-border);
  border-radius: 16px; padding: 16px; margin-bottom: 12px;
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
}
.settings-label {
  font-size: 0.72rem; font-weight: 700; color: var(--text-dim);
  text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 10px;
}
.settings-row {
  display: flex; justify-content: space-between; align-items: center;
  padding: 8px 0; font-size: 0.85rem;
}
.settings-row input[type="checkbox"] {
  accent-color: var(--text-dim);
  width: 18px; height: 18px;
}
.settings-value { color: var(--text-dim); font-size: 0.82rem; }
.settings-theme-row { display: flex; gap: 12px; }
.theme-option {
  flex: 1; border: 2px solid var(--glass-border); border-radius: 14px;
  padding: 12px 8px; background: var(--glass); cursor: pointer;
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  transition: border-color 0.2s;
}
.theme-option.selected { border-color: var(--accent); }
.theme-preview { width: 40px; height: 40px; border-radius: 10px; }
.theme-preview.light { background: linear-gradient(135deg, #fff, #f0f2f5); border: 1px solid #ddd; }
.theme-preview.dark { background: linear-gradient(135deg, #0a0a0f, #1a1a2e); }
.theme-preview.auto { background: linear-gradient(135deg, #fff 50%, #0a0a0f 50%); }
.theme-option span { font-size: 0.75rem; color: var(--text-dim); }
.settings-device-list, .settings-usage-list, .settings-logs-view {
  max-height: 400px; overflow-y: auto;
}
.settings-device-row {
  display: flex; align-items: center; gap: 12px; padding: 10px 0;
  border-bottom: 1px solid var(--hairline);
}
.settings-device-icon {
  font-size: 0.65rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-dim);
  background: var(--hairline);
  padding: 4px 8px;
  border-radius: 8px;
  white-space: nowrap;
}
.settings-device-info { flex: 1; }
.settings-device-name { font-weight: 600; font-size: 0.85rem; }
.settings-device-ip { font-size: 0.72rem; color: var(--text-dim); }
.settings-device-status { font-size: 0.72rem; font-weight: 600; padding: 2px 8px; border-radius: 6px; }
.settings-device-status.online { color: var(--green); background: rgba(16,185,129,0.1); }
.settings-device-status.offline { color: var(--text-dim); }
.settings-usage-row {
  display: flex; justify-content: space-between; align-items: center;
  padding: 8px 0; border-bottom: 1px solid var(--hairline);
}
.settings-usage-app { font-weight: 600; font-size: 0.85rem; }
.settings-usage-stats { display: flex; gap: 12px; font-size: 0.75rem; color: var(--text-dim); }
.settings-log-row {
  display: flex; gap: 8px; padding: 4px 0; font-size: 0.72rem;
  font-family: monospace; border-bottom: 1px solid var(--hairline);
}
.log-time { color: var(--text-dim); white-space: nowrap; }
.log-level { font-weight: 700; width: 50px; }
.log-msg { flex: 1; word-break: break-all; }
.level-error .log-level, .level-err .log-level { color: var(--red); }
.level-warn .log-level { color: var(--orange); }
.level-info .log-level { color: var(--accent); }
.settings-empty { padding: 20px; text-align: center; color: var(--text-dim); font-size: 0.85rem; }
.settings-export-btn {
  margin-top: 12px; padding: 8px 16px; border-radius: 10px;
  border: 1px solid var(--glass-border); background: var(--glass);
  color: var(--text); font-size: 0.8rem; cursor: pointer; font-weight: 600;
  transition: background 0.2s;
}
.settings-export-btn:active { background: var(--glass-hover); }

.settings-feedback-btn {
  margin-top: 8px; padding: 12px 20px;
  background: var(--accent); border: none; border-radius: 10px;
  color: white; font-size: 0.85rem; font-weight: 600; cursor: pointer;
  transition: opacity 0.2s, transform 0.2s;
}
.settings-feedback-btn:hover { opacity: 0.9; transform: translateY(-1px); }

.settings-save-btn {
  margin-top: 12px; padding: 10px 16px;
  background: var(--accent); border: none; border-radius: 10px;
  color: white; font-size: 0.85rem; font-weight: 600; cursor: pointer;
  transition: opacity 0.2s;
}
.settings-save-btn:hover { opacity: 0.9; }

.settings-input {
  padding: 8px 12px;
  background: var(--card); border: 1px solid var(--glass-border);
  border-radius: 8px; color: var(--text);
  font-size: 0.85rem; font-family: inherit;
  width: 200px;
}
.settings-input:focus { outline: none; border-color: var(--accent); }

.settings-note {
  margin-top: 8px; font-size: 0.75rem;
  color: var(--text-dim); font-style: italic;
}
.settings-note-ok { color: var(--green, #4a9); font-style: normal; }
.settings-note-err { color: var(--red, #e55); font-style: normal; }

/* About - made by + socials */
.about-madeby { margin-top: 8px; font-size: 0.8rem; color: var(--text); font-weight: 600; }
.about-socials { display: flex; gap: 12px; margin-top: 4px; }
.about-social-link {
  font-size: 0.7rem; color: var(--text-dim); text-decoration: none;
  border-bottom: 1px solid transparent; transition: border-color 0.2s, color 0.2s;
}
.about-social-link:hover { color: var(--text); border-bottom-color: var(--text-dim); }

/* Forced dark mode via data-theme */
:root[data-theme="dark"] {
  --bg: #0a0a0f;
  --bg-gradient: linear-gradient(180deg, #0a0a0f 0%, #12121a 100%);
  --glass: rgba(30, 30, 42, 0.55);
  --glass-hover: rgba(40, 40, 55, 0.7);
  --glass-border: rgba(255, 255, 255, 0.12);
  --glass-shadow: 0 2px 16px rgba(0, 0, 0, 0.3), 0 0 1px rgba(0, 0, 0, 0.2);
  --glass-shadow-lg: 0 8px 40px rgba(0, 0, 0, 0.4), 0 0 1px rgba(0, 0, 0, 0.3);
  --glass-inset: inset 0 1px 0 rgba(255, 255, 255, 0.08);
  --card: rgba(30, 30, 42, 0.5);
  --card-hover: rgba(40, 40, 55, 0.7);
  --accent: #9ca3af;
  --accent-soft: rgba(156, 163, 175, 0.15);
  --accent-glow: rgba(156, 163, 175, 0.3);
  --accent-text: #d1d5db;
  --text: #e5e7eb;
  --text-dim: #9ca3af;
  --text-faint: #6b7280;
  --green: #34d399;
  --orange: #fbbf24;
  --red: #f87171;
  --hairline: rgba(255, 255, 255, 0.06);
  --hairline-strong: rgba(255, 255, 255, 0.1);
  --surface-solid: #1a1a2e;
  --modal-bg: rgba(0, 0, 0, 0.6);
  --terminal-bg: rgba(10, 10, 15, 0.95);
  --terminal-text: #6ee7b7;
  --scrollbar: rgba(156, 163, 175, 0.3);
  --scrollbar-hover: rgba(156, 163, 175, 0.5);
  --chip-bg: rgba(255, 255, 255, 0.06);
  --chip-border: rgba(255, 255, 255, 0.1);
  --sparkline-stroke: rgba(156, 163, 175, 0.7);
  --sparkline-fill: rgba(156, 163, 175, 0.12);
}

/* Forced light mode via data-theme */
:root[data-theme="light"] {
  --bg: #ffffff;
  --bg-gradient: linear-gradient(180deg, #ffffff 0%, #f0f2f5 100%);
  --glass: rgba(255, 255, 255, 0.7);
  --glass-hover: rgba(255, 255, 255, 0.85);
  --glass-border: rgba(255, 255, 255, 0.95);
  --glass-shadow: 0 2px 16px rgba(0, 0, 0, 0.04), 0 0 1px rgba(0, 0, 0, 0.03);
  --glass-shadow-lg: 0 8px 40px rgba(0, 0, 0, 0.06), 0 0 1px rgba(0, 0, 0, 0.04);
  --glass-inset: inset 0 1px 0 rgba(255, 255, 255, 1);
  --card: rgba(255, 255, 255, 0.65);
  --card-hover: rgba(255, 255, 255, 0.85);
  --accent: #6b7280;
  --accent-soft: rgba(107, 114, 128, 0.1);
  --accent-glow: rgba(107, 114, 128, 0.2);
  --accent-text: #374151;
  --text: #1a1a2e;
  --text-dim: #6b7280;
  --text-faint: #9ca3af;
  --green: #10b981;
  --orange: #f59e0b;
  --red: #ef4444;
  --hairline: rgba(0, 0, 0, 0.05);
  --hairline-strong: rgba(0, 0, 0, 0.08);
  --surface-solid: #ffffff;
  --modal-bg: rgba(0, 0, 0, 0.2);
  --terminal-bg: rgba(20, 20, 30, 0.92);
  --terminal-text: #a7f3d0;
  --scrollbar: rgba(107, 114, 128, 0.3);
  --scrollbar-hover: rgba(107, 114, 128, 0.5);
  --chip-bg: rgba(255, 255, 255, 0.6);
  --chip-border: rgba(0, 0, 0, 0.06);
  --sparkline-stroke: rgba(107, 114, 128, 0.6);
  --sparkline-fill: rgba(107, 114, 128, 0.1);
}


/* ═══ LOGIN SCREEN ═══ */
.login-screen {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg-gradient);
  padding: 24px;
}
.login-card {
  width: 100%;
  max-width: 320px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}
.login-logo {
  margin-bottom: 8px;
  opacity: 0.9;
}
.login-title {
  font-size: 28px;
  font-weight: 700;
  color: var(--text);
  letter-spacing: -0.5px;
}
.login-subtitle {
  font-size: 14px;
  color: var(--text-dim);
  margin-bottom: 20px;
}
.login-dots {
  display: flex;
  gap: 12px;
  margin-bottom: 8px;
}
.login-dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  border: 2px solid var(--text-dim);
  transition: all 0.15s ease;
}
.login-dot.filled {
  background: var(--accent);
  border-color: var(--accent);
  transform: scale(1.1);
}
.login-error {
  height: 20px;
  font-size: 13px;
  color: var(--red);
  font-weight: 500;
  opacity: 0;
  transition: opacity 0.2s;
}
.login-error.show {
  opacity: 1;
}
.login-keypad {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  width: 100%;
  margin-top: 16px;
}
.login-key {
  aspect-ratio: 1.6;
  border: none;
  border-radius: var(--radius);
  background: var(--glass);
  backdrop-filter: blur(var(--blur));
  -webkit-backdrop-filter: blur(var(--blur));
  color: var(--text);
  font-size: 24px;
  font-weight: 600;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1px;
  transition: background 0.12s, transform 0.08s;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}
.login-key:active {
  background: var(--accent-soft);
  transform: scale(0.95);
}
.login-key-sub {
  font-size: 9px;
  font-weight: 400;
  color: var(--text-dim);
  letter-spacing: 1px;
}
.login-key-blank {
  visibility: hidden;
}
.login-key-go {
  color: white;
  background: var(--accent);
  border: none;
}
.login-key-go:active {
  opacity: 0.85;
  transform: scale(0.94);
}
.login-key-back {
  color: var(--text-dim);
}
.login-key-back:active {
  background: var(--accent-soft);
}
/* Shake animation for wrong PIN */
@keyframes login-shake {
  0%, 100% { transform: translateX(0); }
  15%, 45%, 75% { transform: translateX(-12px); }
  30%, 60%, 90% { transform: translateX(12px); }
}
.login-card.shake {
  animation: login-shake 0.4s ease;
}

/* ═══ DESKTOP MODE ═══ */
body.desktop-mode .app-grid {
  max-width: 700px;
  margin: 0 auto;
}
body.desktop-mode .status-chips {
  max-width: 700px;
  margin: 0 auto;
}
body.desktop-mode .top-bar {
  max-width: 700px;
  margin: 0 auto;
}
body.desktop-mode .notif-bell[aria-label="Refresh"] {
  display: none;
}
body.desktop-mode .app-icon {
  outline: none;
}
body.desktop-mode .app-icon.desktop-focus .app-icon-visual {
  transform: scale(1.1);
  box-shadow: 0 0 0 3px var(--accent), var(--glass-shadow-lg);
  transition: transform 0.15s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.15s;
}
body.desktop-mode .app-icon.desktop-focus .app-label {
  color: var(--text);
  font-weight: 700;
}


/* ═══ MUSIC PLAYER ═══ */
.music-content {
  display: flex; flex-direction: column;
  height: calc(100vh - 60px);
  max-width: 600px; margin: 0 auto;
}
.music-list {
  flex: 1; overflow-y: auto; padding: 8px;
}
.music-empty {
  padding: 40px 20px; text-align: center;
  color: var(--text-dim); font-size: 0.85rem;
}
.music-song-row {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 14px; border-radius: 14px;
  cursor: pointer; transition: background 0.15s;
  margin-bottom: 4px;
}
.music-song-row:active { background: var(--accent-soft); }
.music-song-row.playing {
  background: var(--accent-soft);
}
.music-song-icon {
  width: 36px; height: 36px; border-radius: 10px;
  background: var(--glass); border: 1px solid var(--glass-border);
  display: flex; align-items: center; justify-content: center;
  color: var(--text-dim); flex-shrink: 0;
}
.music-song-thumb {
  width: 48px; height: 48px; border-radius: 10px;
  background: var(--glass); border: 1px solid var(--glass-border);
  background-size: cover; background-position: center;
  display: flex; align-items: center; justify-content: center;
  color: var(--text-dim); flex-shrink: 0; overflow: hidden;
}
.music-song-thumb.has-art {
  border-color: transparent;
}
.music-song-row.playing .music-song-icon {
  color: var(--accent);
}
.music-song-info { flex: 1; min-width: 0; }
.music-song-name {
  font-weight: 600; font-size: 0.88rem;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.music-song-meta {
  font-size: 0.72rem; color: var(--text-dim); margin-top: 2px;
}

/* Player bar */
.music-player {
  padding: 14px 16px; border-top: 1px solid var(--glass-border);
  background: var(--glass); backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
}
.music-player-info {
  display: flex; justify-content: space-between; align-items: center;
  margin-bottom: 8px;
}
.music-player-title {
  font-weight: 600; font-size: 0.85rem;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  flex: 1; margin-right: 12px;
}
.music-player-time {
  font-size: 0.72rem; color: var(--text-dim); white-space: nowrap;
}
.music-progress-bar {
  height: 4px; background: var(--hairline-strong);
  border-radius: 2px; cursor: pointer; margin-bottom: 12px;
}
.music-progress-fill {
  height: 100%; background: var(--accent); border-radius: 2px;
  width: 0%; transition: width 0.1s linear;
}
.music-controls {
  display: flex; align-items: center; justify-content: center; gap: 24px;
}
.music-btn {
  border: none; background: none; cursor: pointer;
  color: var(--text); padding: 8px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%; transition: background 0.15s, transform 0.15s;
}
.music-btn:active { transform: scale(0.9); }
.music-btn-play {
  width: 48px; height: 48px;
  background: var(--accent); color: white;
}
.music-btn-play:active { transform: scale(0.9); }


/* ═══ DESKTOP LAYOUT ═══ */
/* Wider grid, horizontal feel, bigger app icons */
body.desktop-mode #home-screen {
  padding-top: 8vh;
}
body.desktop-mode .top-bar {
  max-width: 720px;
  margin: 0 auto;
  padding-top: 4vh;
}
body.desktop-mode .clock {
  font-size: 56px;
}
body.desktop-mode .status-chips {
  max-width: 720px;
  margin: 24px auto 0;
}
body.desktop-mode .app-grid {
  max-width: 720px;
  margin: 0 auto;
  grid-template-columns: repeat(6, 1fr);
  gap: 24px;
  padding: 48px 24px;
  justify-content: center;
}
body.desktop-mode .app-icon-visual {
  width: 80px;
  height: 80px;
  border-radius: 22px;
}
body.desktop-mode .app-label {
  font-size: 12px;
}
body.desktop-mode .screen {
  max-width: 900px;
  margin: 0 auto;
}
/* Side-by-side layouts where it makes sense */
body.desktop-mode .music-content,
body.desktop-mode #book-list,
body.desktop-mode #osint-screen,
body.desktop-mode #system-screen {
  max-width: 700px;
  margin: 0 auto;
}
body.desktop-mode .legos-content {
  max-width: 1000px;
  margin: 0 auto;
}
/* Refresh button hidden on desktop */
body.desktop-mode .notif-bell[aria-label="Refresh"] {
  display: none !important;
}
/* Keyboard nav focus ring */
body.desktop-mode .app-icon {
  outline: none;
}
body.desktop-mode .app-icon.desktop-focus .app-icon-visual {
  transform: scale(1.12);
  box-shadow: 0 0 0 3px var(--accent), var(--glass-shadow-lg);
  transition: transform 0.15s cubic-bezier(0.34, 1.56, 0.64, 1);
}
body.desktop-mode .app-icon.desktop-focus .app-label {
  color: var(--text);
  font-weight: 700;
}


/* Music artwork */
.music-song-thumb {
  width: 48px; height: 48px; border-radius: 10px;
  background: var(--glass); border: 1px solid var(--glass-border);
  display: flex; align-items: center; justify-content: center;
  color: var(--text-dim); flex-shrink: 0; overflow: hidden;
}
.music-song-thumb.has-art {
  border-color: transparent;
}
.music-thumb-img {
  width: 100%; height: 100%; border-radius: 10px;
  object-fit: cover; display: block;
}
.music-song-artist {
  font-size: 0.75rem; color: var(--text-dim); margin-top: 2px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.music-song-more {
  color: var(--text-dim); padding: 8px; cursor: pointer;
  display: flex; align-items: center; flex-shrink: 0;
  border-radius: 50%; transition: background 0.15s;
}
.music-song-more:active { background: var(--accent-soft); }
.music-player-artist {
  font-size: 0.75rem; color: var(--text-dim); margin-top: 2px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.music-player-art {
  width: 44px; height: 44px; border-radius: 10px;
  object-fit: cover; flex-shrink: 0;
  background: var(--glass);
}
.music-player-text { flex: 1; min-width: 0; }

/* ═══ SETTINGS ═══ */
.settings-content { padding: 20px; max-width: 600px; margin: 0 auto; }
.settings-tabs { display: flex; gap: 0; border-bottom: 1px solid var(--glass-border); margin-bottom: 20px; }
.settings-tab { flex: 1; padding: 12px 16px; border: none; background: none; cursor: pointer; color: var(--text-dim); font-weight: 500; font-size: 0.85rem; border-bottom: 2px solid transparent; transition: color 0.2s, border-color 0.2s; }
.settings-tab:hover { color: var(--text); }
.settings-tab.active { color: var(--text); border-bottom-color: var(--accent); }
.settings-tab-content { display: none; }
.settings-tab-content.active { display: block; }
.settings-section { margin-bottom: 24px; }
.settings-section h3 { font-size: 0.95rem; font-weight: 700; margin-bottom: 12px; }
.settings-option { padding: 10px 0; display: flex; align-items: center; }
.settings-option label { display: flex; align-items: center; cursor: pointer; font-size: 0.88rem; gap: 8px; }
.settings-option input[type="radio"] { cursor: pointer; }
.devices-list, .usage-stats, .logs-list { background: var(--glass); border: 1px solid var(--glass-border); border-radius: 14px; padding: 12px; margin-bottom: 16px; }
.device-item, .usage-item, .log-item { padding: 12px; border-bottom: 1px solid var(--hairline); font-size: 0.85rem; }
.device-item:last-child, .usage-item:last-child, .log-item:last-child { border-bottom: none; }
.device-name { font-weight: 600; }
.device-meta { color: var(--text-dim); font-size: 0.75rem; margin-top: 4px; }
.usage-item-name { font-weight: 600; }
.usage-item-stats { color: var(--text-dim); font-size: 0.75rem; margin-top: 4px; }
.log-item { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.log-item.error { color: #ef4444; }
.log-item.warn { color: #f59e0b; }
.log-item.info { color: var(--text); }
.settings-btn { padding: 10px 20px; border-radius: 8px; border: 1px solid var(--glass-border); background: var(--glass); color: var(--text); cursor: pointer; font-weight: 600; font-size: 0.85rem; transition: background 0.2s; }

/* ─── Empty States ────────────────────────────────────────────── */
.empty-state {
  padding: 50px 24px; text-align: center;
  color: var(--text-dim);
}
.empty-icon {
  font-size: 3rem; margin-bottom: 16px;
  opacity: 0.6;
}
.empty-state h3 {
  color: var(--text); font-size: 1.1rem; font-weight: 700;
  margin: 0 0 8px 0;
}
.empty-state p {
  font-size: 0.85rem; margin: 0 0 4px 0;
  line-height: 1.5;
}
.empty-hint {
  color: var(--text-dim); opacity: 0.6; font-size: 0.75rem !important;
  margin-top: 12px !important;
}

/* ─── Onboarding Banner ───────────────────────────────────────── */
.onboarding-banner {
  padding: 20px 24px; text-align: center;
  background: var(--accent-soft);
  border-radius: 16px; margin: 16px;
}
.onboarding-banner h3 {
  font-size: 1rem; font-weight: 700; margin: 0 0 8px 0;
  color: var(--text);
}
.onboarding-banner p {
  font-size: 0.8rem; margin: 0 0 12px 0;
  color: var(--text-dim); line-height: 1.5;
}
.onboarding-banner .btn {
  display: inline-block; padding: 10px 24px;
  border-radius: 10px; font-weight: 600; font-size: 0.85rem;
  background: var(--accent); color: white;
  border: none; cursor: pointer;
  transition: transform 0.1s;
}
.onboarding-banner .btn:active { transform: scale(0.96); }
.settings-btn:hover { background: var(--accent-soft); }
.lego-image-action {
  position: absolute;
  bottom: 20px;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  cursor: pointer;
  border: 1px solid var(--glass-border);
  box-shadow: var(--glass-shadow);
  z-index: 210;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.15s;
}
.lego-image-action:active { transform: scale(0.9); }

.lego-image-shred {
  right: 20px;
  background: rgba(239, 68, 68, 0.8);
}

.lego-image-poof {
  right: 78px;
  background: rgba(99, 102, 241, 0.8);
}

.lego-image-save {
  left: 20px;
  background: rgba(34, 197, 94, 0.8);
}

/* ─── Ollama Chat ─── */

.lego-swipe {
  position: fixed;
  inset: 0;
  background: var(--bg);
  z-index: 300;
  display: flex;
  flex-direction: column;
}

.lego-swipe-header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: var(--safe-top) 16px 12px;
  background: var(--glass);
  backdrop-filter: blur(var(--blur));
  -webkit-backdrop-filter: blur(var(--blur));
  border-bottom: 1px solid var(--hairline);
}

.lego-swipe-close {
  background: var(--glass);
  border: 1px solid var(--glass-border);
  color: var(--text);
  width: 36px;
  height: 36px;
  border-radius: 50%;
  font-size: 16px;
  cursor: pointer;
}

.lego-swipe-info {
  font-size: 14px;
  color: var(--text-dim);
  flex: 1;
}

.lego-swipe-card-area {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  overflow: hidden;
  position: relative;
}

.lego-swipe-card {
  position: relative;
  max-width: 420px;
  width: 100%;
  max-height: 100%;
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 20px 60px rgba(0,0,0,0.4);
  background: rgba(0,0,0,0.06);
  touch-action: none;
  user-select: none;
  -webkit-user-drag: none;
  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.3s;
}

.lego-swipe-card.swiping {
  transition: none;
}

.lego-swipe-card.fly-left {
  transform: translateX(-150vw) rotate(-30deg);
  opacity: 0;
  transition: transform 0.4s ease-out, opacity 0.4s;
}

.lego-swipe-card.fly-right {
  transform: translateX(150vw) rotate(30deg);
  opacity: 0;
  transition: transform 0.4s ease-out, opacity 0.4s;
}

.lego-swipe-card.fly-up {
  transform: translateY(-150vh) scale(0.5);
  opacity: 0;
  transition: transform 0.4s ease-out, opacity 0.4s;
}

.lego-swipe-card img {
  width: 100%;
  max-height: 70vh;
  object-fit: contain;
  display: block;
  pointer-events: none;
}

.lego-swipe-card-name {
  padding: 10px 14px;
  font-size: 13px;
  color: var(--text-dim);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  background: var(--glass);
  backdrop-filter: blur(var(--blur));
  -webkit-backdrop-filter: blur(var(--blur));
}

.lego-swipe-hint {
  position: absolute;
  top: 20px;
  font-size: 16px;
  font-weight: 800;
  letter-spacing: 0.1em;
  padding: 8px 16px;
  border-radius: 12px;
  opacity: 0;
  transition: opacity 0.15s;
  pointer-events: none;
}

.lego-swipe-hint-left {
  left: 20px;
  background: rgba(239, 68, 68, 0.9);
  color: white;
  transform: rotate(-15deg);
}

.lego-swipe-hint-right {
  right: 20px;
  background: rgba(99, 102, 241, 0.9);
  color: white;
  transform: rotate(15deg);
}

.lego-swipe-empty {
  text-align: center;
  color: var(--text-dim);
  font-size: 18px;
  padding: 40px;
}

.lego-swipe-actions {
  display: flex;
  justify-content: center;
  gap: 24px;
  padding: 16px 20px calc(var(--safe-bottom) + 20px);
}

.lego-swipe-btn {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  cursor: pointer;
  border: 2px solid var(--glass-border);
  box-shadow: 0 4px 20px rgba(0,0,0,0.2);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.15s;
}

.lego-swipe-btn:active { transform: scale(0.85); }

.lego-swipe-btn-trash {
  background: rgba(239, 68, 68, 0.15);
}

.lego-swipe-btn-shred {
  background: rgba(239, 68, 68, 0.3);
  width: 56px;
  height: 56px;
}

.lego-swipe-btn-poof {
  background: rgba(99, 102, 241, 0.15);
}


/* ─── Motion layer (real elements, no goo clones) ─── */

:root {
  --lqd-surface: #ffffff;
  --lqd-rim: #d7d7dc;
}
:root[data-theme="dark"] {
  --lqd-surface: #16161e;
  --lqd-rim: #2f2f3a;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --lqd-surface: #16161e;
    --lqd-rim: #2f2f3a;
  }
}

/* Click ripple canvas */
.lqd-overlay {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  z-index: 500;
  pointer-events: none;
}
.lqd-ripple {
  fill: var(--lqd-surface);
  will-change: transform, opacity;
}

/* AI spread satellites - real buttons with spring physics */
.lqd-ai2-wrap {
  position: fixed;
  inset: 0;
  z-index: 450;
}
.lqd-ai2-item {
  position: absolute;
  width: 72px;
  height: 72px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  background: var(--card);
  border: 1px solid var(--glass-border);
  border-radius: 22px;
  cursor: pointer;
  will-change: transform;
  box-shadow: 0 6px 14px rgba(0, 0, 0, 0.18);
}
.lqd-ai2-icon {
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.lqd-ai2-icon svg {
  width: 22px;
  height: 22px;
}
.lqd-ai2-label {
  font-size: 10px;
  font-weight: 600;
  color: var(--text);
}

/* ─── Music Generator ─── */
.musicgen-content {
  padding: 16px;
  padding-bottom: 60px;
  max-width: 600px;
  margin: 0 auto;
}
.musicgen-status {
  padding: 10px 14px;
  border-radius: 10px;
  font-size: 13px;
  margin-bottom: 16px;
  text-align: center;
}
.musicgen-status.online {
  background: rgba(34, 197, 94, 0.1);
  color: rgb(22, 163, 74);
}
.musicgen-status.offline {
  background: rgba(239, 68, 68, 0.1);
  color: var(--red, #ef4444);
}
.musicgen-form {
  margin-bottom: 24px;
}
.musicgen-field {
  margin-bottom: 12px;
}
.musicgen-field label {
  display: block;
  font-size: 12px;
  color: var(--text-dim);
  margin-bottom: 4px;
}
.musicgen-params {
  display: flex;
  gap: 10px;
  margin-bottom: 16px;
}
.musicgen-progress {
  margin: 12px 0;
}
.musicgen-library {
  border-top: 1px solid var(--hairline);
  padding-top: 16px;
}
.musicgen-song {
  background: var(--glass);
  border: 1px solid var(--glass-border);
  border-radius: 14px;
  padding: 12px;
  margin-bottom: 10px;
}
.musicgen-song-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 8px;
}
.musicgen-song-title {
  font-weight: 600;
  font-size: 0.88rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.musicgen-song-meta {
  font-size: 0.72rem;
  color: var(--text-dim);
  white-space: nowrap;
}
.musicgen-song-lyrics {
  font-size: 0.75rem;
  color: var(--text-dim);
  margin: 6px 0;
  line-height: 1.4;
  white-space: pre-line;
}
.musicgen-player {
  width: 100%;
  margin: 6px 0;
}
.musicgen-song-actions {
  display: flex;
  gap: 8px;
  margin-top: 6px;
}
.musicgen-song-actions .settings-export-btn {
  margin-top: 0;
  flex: 1;
  text-align: center;
  text-decoration: none;
}

/* ─── AI Model Advisor ─── */
.models-content {
  padding: 12px 16px 60px;
}
.models-specs {
  font-size: 0.8rem;
  color: var(--text-dim);
  padding: 10px 12px;
  background: var(--glass);
  border: 1px solid var(--glass-border);
  border-radius: 10px;
  margin-bottom: 12px;
}
.models-add {
  display: flex;
  gap: 8px;
  margin-bottom: 12px;
}
.models-add-input {
  flex: 1;
  min-width: 0;
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid var(--hairline);
  background: var(--glass);
  color: var(--text);
  font-size: 0.8rem;
}
.models-add-select {
  padding: 8px;
  border-radius: 10px;
  border: 1px solid var(--hairline);
  background: var(--glass);
  color: var(--text);
  font-size: 0.8rem;
  -webkit-appearance: none;
  appearance: none;
}
.models-add-btn {
  padding: 8px 14px;
  border-radius: 10px;
  border: none;
  background: var(--accent);
  color: white;
  font-weight: 600;
  font-size: 0.8rem;
  cursor: pointer;
}
.models-group {
  margin-bottom: 16px;
}
.models-group-title {
  font-size: 0.85rem;
  font-weight: 700;
  margin-bottom: 8px;
}
.models-card {
  background: var(--glass);
  border: 1px solid var(--glass-border);
  border-radius: 12px;
  padding: 10px 12px;
  margin-bottom: 8px;
}
.models-card-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 8px;
}
.models-card-label {
  font-weight: 600;
  font-size: 0.85rem;
}
.models-card-total {
  font-size: 0.72rem;
  color: var(--text-dim);
  white-space: nowrap;
}
.models-card-note {
  font-size: 0.72rem;
  color: var(--text-dim);
  margin: 2px 0 8px;
}
.models-file {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 0;
  border-top: 1px solid var(--hairline);
}
.models-file-name {
  flex: 1;
  min-width: 0;
  font-size: 0.75rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.models-file-size {
  font-size: 0.72rem;
  color: var(--text-dim);
  white-space: nowrap;
}
.models-tier {
  font-size: 0.68rem;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 6px;
  white-space: nowrap;
}
.models-tier-good { color: rgb(22,163,74); background: rgba(34,197,94,0.12); }
.models-tier-tight { color: #d97706; background: rgba(245,158,11,0.12); }
.models-tier-cpu { color: var(--text-dim); background: var(--chip-bg, rgba(128,128,128,0.12)); }
.models-tier-bad { color: var(--red, #ef4444); background: rgba(239,68,68,0.12); }
.models-get-btn {
  padding: 4px 10px;
  border-radius: 8px;
  border: none;
  background: var(--accent);
  color: white;
  font-size: 0.72rem;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
}
.models-more {
  font-size: 0.7rem;
  color: var(--text-dim);
  padding-top: 4px;
}
.models-error {
  font-size: 0.75rem;
  color: var(--red, #ef4444);
}
.models-dl {
  background: var(--glass);
  border: 1px solid var(--glass-border);
  border-radius: 10px;
  padding: 10px 12px;
  margin-bottom: 8px;
}
.models-dl-name {
  font-size: 0.78rem;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.models-dl-status {
  font-size: 0.72rem;
  color: var(--text-dim);
  margin: 4px 0;
}

/* ═══ LAB OVERVIEW (System screen) ═══
   One iPhone-portrait card (9:19.5) per style; everything inside sizes in
   cqw so a screenshot looks identical on any device. Cards are deliberately
   dark in both themes (they're for sharing); --a1/--a2 come from the lab's accent. */
.lab-toolbar { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; justify-content: center; }
.lab-seg { display: inline-flex; padding: 3px; border-radius: 12px; background: var(--glass); border: 1px solid var(--glass-border); }
.lab-seg button { border: 0; background: none; color: var(--text-dim); font-family: inherit; font-size: 13px; font-weight: 600; line-height: 1; padding: 9px 12px; border-radius: 9px; cursor: pointer; }
.lab-seg button.active { background: var(--surface-solid); color: var(--text); box-shadow: var(--glass-shadow); }
.lab-btn { border: 1px solid var(--hairline-strong); background: var(--glass); color: var(--text); font-family: inherit; font-size: 13px; font-weight: 600; line-height: 1; padding: 10px 14px; border-radius: 11px; cursor: pointer; }
.lab-btn.primary { background: var(--text); color: var(--bg); border-color: transparent; }
.lab-btn:focus-visible, .lab-seg button:focus-visible { outline: 2px solid var(--text); outline-offset: 2px; }
.lab-card-wrap { display: flex; justify-content: center; }
.lab-card { container-type: inline-size; width: min(100%, 430px); aspect-ratio: 9 / 19.5; border-radius: 28px; overflow: hidden; position: relative;
  box-shadow: 0 24px 60px -28px rgba(0, 0, 0, .6); color: #e6e4ef; background: #0d0c12; --a1: #ffb454; --a2: #ff6b8b; }
.lab-card *, .lab-card *::before { box-sizing: border-box; }
.lab-loading { margin: 0; padding: 40cqw 8cqw; text-align: center; color: #9a96ad; font-size: 4cqw; }
.lab-panel { max-width: 560px; width: 100%; margin: 0 auto; background: var(--glass); border: 1px solid var(--glass-border); border-radius: 16px; padding: 14px 16px; display: grid; gap: 8px; }
.lab-panel summary { font-weight: 700; cursor: pointer; }
.lab-panel[open] { gap: 10px; }
.lab-panel label { font-size: 13px; color: var(--text-dim); }
.lab-panel input:not([type=color]) { width: 100%; padding: 10px 12px; border-radius: 10px; border: 1px solid var(--hairline-strong); background: var(--surface-solid); color: var(--text); font-family: inherit; font-size: 14px; }
.lab-panel input[type=color] { width: 56px; height: 36px; border: 0; background: none; padding: 0; }
.lab-row { display: flex; gap: 8px; } .lab-row input { flex: 1; min-width: 0; }
.lab-msg { margin: 0; font-size: 13px; color: var(--text-dim); min-height: 1em; }
.lab-help { display: grid; gap: 6px; font-size: 13px; padding: 12px; border-radius: 12px; background: var(--accent-soft); }
.lab-help p { margin: 0; }
.lab-dim { color: var(--text-dim); font-size: 13px; margin: 0; }
.lab-cmd { margin: 0; padding: 10px 12px; border-radius: 10px; background: var(--terminal-bg); color: var(--terminal-text); font: 12px/1.5 ui-monospace, Menlo, monospace; white-space: pre-wrap; word-break: break-all; }
.lab-dev { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--hairline); }
.lab-dev > div { flex: 1; min-width: 0; display: grid; } .lab-dev span { font-size: 12px; color: var(--text-dim); }
.lab-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--green); flex: 0 0 9px; } .lab-dot.off { background: var(--text-faint); }

/* Screenshot mode: just the card, edge to edge */
#system-screen.lab-share { position: fixed; inset: 0; z-index: 1000; background: #000; overflow: hidden; padding: 0; }
#system-screen.lab-share > :not(.system-content), #system-screen.lab-share .system-content > :not(.lab-card-wrap) { display: none !important; }
#system-screen.lab-share .system-content { padding: 0; height: 100%; justify-content: center; }
#system-screen.lab-share .lab-card { width: min(100vw, calc(100dvh * 9 / 19.5)); border-radius: 0; box-shadow: none; }

/* Shared chips + bars */
.lab-bar { display: block; height: .9cqw; border-radius: 1cqw; background: rgba(255,255,255,.09); overflow: hidden; }
.lab-bar s { display: block; height: 100%; background: linear-gradient(90deg, var(--a1), var(--a2)); }
.lab-run { display: flex; flex-wrap: wrap; gap: 1.4cqw; align-content: flex-start; }
.lab-chip { font-size: 2.7cqw; padding: .8cqw 2.2cqw; border-radius: 6cqw; border: 1px solid rgba(255,255,255,.12); background: rgba(255,255,255,.04); white-space: nowrap; }
.lab-chip i { display: inline-block; width: 1.5cqw; height: 1.5cqw; border-radius: 50%; margin-right: 1.2cqw; background: #5be49b; }
.lab-chip.ai i { background: #b48cff } .lab-chip.svc i { background: #5bc8e4 } .lab-chip.proc i { background: #8b86a0 }

/* A - neofetch */
.lab-neofetch { background: radial-gradient(120% 60% at 0% 0%, #1f1b2a 0%, #0d0c12 65%); font-family: 'JetBrains Mono', ui-monospace, Menlo, monospace;
  padding: 9cqw 6cqw 7cqw; display: flex; flex-direction: column; justify-content: center; gap: 3.6cqw; font-size: 3.3cqw; line-height: 1.5; }
.lab-nf-banner { margin: 0; line-height: 1; font-family: inherit; letter-spacing: 0; background: linear-gradient(90deg, var(--a1), var(--a2)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.lab-nf-who b { color: var(--a1); }
.lab-nf-rule { height: 1px; background: rgba(255,255,255,.14); margin-top: -1.5cqw; }
.lab-nf-kv { margin: 0; display: grid; grid-template-columns: 18cqw 1fr; row-gap: .4cqw; }
.lab-nf-kv dt { color: var(--a1); font-weight: 700; } .lab-nf-kv dd { margin: 0; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lab-nf-blocks { display: flex; gap: 1cqw; } .lab-nf-blocks i { width: 6cqw; height: 3cqw; }
.lab-nf-nodes { display: grid; grid-template-columns: 1fr 1fr; gap: 2cqw; }
.lab-nf-node { display: flex; gap: 2cqw; padding: 2.2cqw; border-radius: 2.4cqw; background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.08); font-size: 2.6cqw; line-height: 1.35; }
.lab-nf-node > div { flex: 1; min-width: 0; display: grid; gap: .8cqw; }
.lab-nf-node b { color: #fff; font-size: 3cqw; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lab-nf-node span { color: #9a96ad; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lab-nf-node.off { opacity: .45; }
.lab-nf-os { width: 6.5cqw; height: 6.5cqw; flex: 0 0 6.5cqw; }
.lab-neofetch .lab-run { margin-top: 2cqw; }

/* B - rack */
.lab-card.lab-rack { background: linear-gradient(180deg, #1c1e22, #0f1013); padding: 9cqw 5.5cqw 7cqw; display: flex; flex-direction: column; gap: 4cqw; font-family: 'Chakra Petch', 'JetBrains Mono', sans-serif; }
.lab-rk-title { font-size: 8cqw; font-weight: 700; color: #fff; line-height: 1; letter-spacing: .02em; overflow-wrap: anywhere; }
.lab-rk-title small { display: block; font-size: 2.7cqw; color: var(--a1); letter-spacing: .2em; margin-top: 2cqw; font-weight: 600; }
.lab-rk-frame { background: #08090a; border: 1.2cqw solid #2c2f35; border-radius: 2cqw; padding: 3cqw 7cqw; display: flex; flex-direction: column; gap: 1.4cqw; position: relative; min-height: 0; overflow: hidden; flex: 1; }
.lab-rk-frame::before, .lab-rk-frame::after { content: ""; position: absolute; top: 2cqw; bottom: 2cqw; width: 3cqw; border-radius: .5cqw; background: repeating-linear-gradient(180deg, #2c2f35 0 1cqw, transparent 1cqw 4cqw); }
.lab-rk-frame::before { left: 1.8cqw } .lab-rk-frame::after { right: 1.8cqw }
.lab-ru { background: linear-gradient(180deg, #32363d, #22252a); border: 1px solid #3f434b; border-radius: .8cqw; display: flex; align-items: center; gap: 2.4cqw; padding: 1.6cqw 2.4cqw; min-height: 10cqw; flex-shrink: 0; }
.lab-ru.sbc { min-height: 8cqw; flex: 1 1 0 } .lab-ru.server { min-height: 17cqw; flex: 2 1 0 } .lab-ru.nas { min-height: 22cqw; flex: 3 1 0 }
.lab-ru { max-height: 40cqw; }
.lab-rk-frame::after, .lab-rk-frame::before { pointer-events: none; }
.lab-ru.off { filter: grayscale(1) brightness(.6); }
.lab-ru b { font-size: 3.4cqw; line-height: 1; color: #f2f3f5; letter-spacing: .05em; width: 20cqw; flex: 0 0 20cqw; overflow: hidden; text-overflow: ellipsis; }
.lab-ru-spec { flex: 1; min-width: 0; display: grid; gap: 1.2cqw; font: 500 2.5cqw/1.4 'JetBrains Mono', ui-monospace, monospace; color: #a3a8b2; }
.lab-ru-spec span { overflow: hidden; }
.lab-bays { display: grid; grid-template-columns: repeat(8, 1fr); gap: .8cqw; }
.lab-bays i { height: 5cqw; background: #15171b; border: 1px solid #454a53; border-radius: .4cqw; position: relative; }
.lab-bays i::after { content: ""; position: absolute; right: .7cqw; top: .7cqw; width: 1cqw; height: 1cqw; border-radius: 50%; background: #39ff88; box-shadow: 0 0 1cqw #39ff88; }
.lab-bays i.empty::after { background: #3a3d44; box-shadow: none; }
.lab-leds { display: flex; flex-direction: column; gap: 1.2cqw; }
.lab-led { width: 1.8cqw; height: 1.8cqw; border-radius: 50%; background: #39ff88; box-shadow: 0 0 1.8cqw #39ff88; animation: lab-blink 1s steps(2, start) infinite; }
.lab-led.steady { animation: none; background: var(--a1); box-shadow: 0 0 1.8cqw var(--a1); }
.lab-led.dim { animation: none; background: #3a3d44; box-shadow: none; }
@keyframes lab-blink { to { opacity: .25 } }
.lab-rk-tot { display: grid; grid-template-columns: repeat(3, 1fr); gap: 3cqw 3cqw; flex-shrink: 0; }
.lab-rk-tot div { border-top: 1px solid #3a3d44; padding-top: 1.4cqw; min-width: 0; }
.lab-rk-tot b { display: block; font-size: 5cqw; color: #fff; font-weight: 600; line-height: 1.1; font-variant-numeric: tabular-nums; white-space: nowrap; }
.lab-rk-tot span { font-size: 2.2cqw; color: #8a8f99; letter-spacing: .15em; text-transform: uppercase; }
.lab-rk-run { font: 500 2.6cqw/1.7 'JetBrains Mono', ui-monospace, monospace; color: #c3c7cf; display: grid; grid-template-columns: 1fr 1fr; column-gap: 3cqw; }
.lab-rk-run div { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lab-rk-run i { font-style: normal; color: #39ff88; } .lab-rk-run .ai i { color: #b48cff } .lab-rk-run .svc i { color: #5bc8e4 } .lab-rk-run .proc i { color: #8a8f99 }
.lab-rk-run em { font-style: normal; color: #6f747e; }

/* C - constellation */
.lab-card.lab-constellation { background: radial-gradient(80% 50% at 50% 48%, #101a3a 0%, #05070f 75%); }
.lab-constellation svg { width: 100%; height: 100%; display: block; }
.lab-constellation .nm { font: 700 34px 'Chakra Petch', sans-serif; fill: #fff; letter-spacing: .03em; }
.lab-constellation .sp { font: 500 24px 'JetBrains Mono', ui-monospace, monospace; fill: #9fb3dc; }
.lab-constellation .big { font: 700 84px 'Chakra Petch', sans-serif; fill: #fff; }
.lab-constellation .cap { font: 600 22px 'JetBrains Mono', ui-monospace, monospace; fill: var(--a1); letter-spacing: .2em; }
.lab-constellation .orb { fill: none; stroke: #1c2b58; stroke-width: 1.5; }
.lab-constellation .lnk { stroke: var(--a1); stroke-width: 2.4; stroke-dasharray: 3 14; opacity: .8; animation: lab-flow 1.6s linear infinite; }
.lab-constellation .lnk.off { stroke: #3b4560; animation: none; opacity: .5; }
.lab-constellation .rbg { fill: none; stroke: #1c2a52; stroke-width: 8; }
.lab-constellation .ring { fill: none; stroke-width: 8; stroke-linecap: round; transform: rotate(-90deg); }
.lab-constellation .tw { animation: lab-tw 3s ease-in-out infinite alternate; }
@keyframes lab-flow { to { stroke-dashoffset: -34 } }
@keyframes lab-tw { from { opacity: .2 } to { opacity: 1 } }
@media (prefers-reduced-motion: reduce) { .lab-led, .lab-constellation .lnk, .lab-constellation .tw { animation: none; } }
.lab-switch { display: flex; align-items: center; gap: 10px; font-weight: 600; cursor: pointer; }
.lab-switch input { width: 20px; height: 20px; accent-color: var(--green); }
.lab-sub { border-top: 1px solid var(--hairline); padding-top: 10px; display: grid; gap: 8px; }
.lab-sub summary { font-weight: 600; font-size: 14px; cursor: pointer; }
.lab-pairing, .lab-request { text-align: center; display: grid; gap: 8px; padding: 14px; border-radius: 14px; background: var(--accent-soft); }
.lab-pairing p, .lab-request p { margin: 0; font-size: 14px; }
.lab-request { max-width: 560px; margin: 0 auto; border: 2px solid var(--green); }
.lab-request .lab-row { justify-content: center; }
.lab-num { font: 700 34px/1.1 ui-monospace, Menlo, monospace; letter-spacing: .12em; font-variant-numeric: tabular-nums; }
#lab-request-overlay { position: fixed; left: 16px; right: 16px; bottom: calc(16px + env(safe-area-inset-bottom, 0px)); z-index: 10000; display: grid; gap: 10px; }
#lab-request-overlay:empty { display: none; }
#lab-request-overlay .lab-request { background: var(--surface-solid); box-shadow: 0 20px 50px -10px rgba(0,0,0,.45); }

/* ═══ MUSIC - glossy black media player ═══ */
#music-screen { padding: 0 !important; overflow: hidden; }
body.desktop-mode #music-screen { max-width: none; margin: 0; }
.wm {
  --wm-text: #e8eaee; --wm-dim: #9aa0ab; --wm-faint: #646a76; --wm-accent: #d6dcea; --wm-glow: 150, 185, 255;
  --wm-line: rgba(255,255,255,.08);
  --wm-gloss: linear-gradient(180deg, #34373e 0%, #1d1e23 48%, #0a0a0d 52%, #17181d 100%);
  --wm-gloss-soft: linear-gradient(180deg, rgba(255,255,255,.2) 0%, rgba(255,255,255,.07) 48%, rgba(0,0,0,.25) 52%, rgba(255,255,255,.07) 100%);
  height: 100vh; height: 100dvh; display: grid; grid-template-rows: auto minmax(0, 1fr) auto;
  padding-top: var(--safe-top); box-sizing: border-box; color: var(--wm-text); font-size: 13px;
  background: radial-gradient(900px 380px at 50% 112%, rgba(var(--wm-glow), .16), transparent 70%), #07070a;
  user-select: none; -webkit-user-select: none;
}
.wm :where(button) { font: inherit; color: inherit; cursor: pointer; }
.wm ::-webkit-scrollbar { width: 10px; height: 10px; }
.wm ::-webkit-scrollbar-thumb { background: linear-gradient(90deg, #3a3d45, #24262c); border-radius: 6px; border: 2px solid #09090c; }
.wm ::-webkit-scrollbar-track { background: transparent; }

/* chrome orb buttons */
.wm-orb, .wm-ctl, .wm-play { position: relative; border: 1px solid rgba(255,255,255,.22); color: #eef1f7; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
  background: radial-gradient(circle at 50% 15%, #5d626e 0%, #23252b 62%, #101115 100%);
  box-shadow: inset 0 1px 1px rgba(255,255,255,.45), inset 0 -2px 4px rgba(0,0,0,.6), 0 1px 3px rgba(0,0,0,.85); }
.wm-orb::before, .wm-ctl::before, .wm-play::before { content: ""; position: absolute; left: 12%; right: 12%; top: 5%; height: 46%; border-radius: 50% 50% 46% 46% / 70% 70% 30% 30%;
  background: linear-gradient(180deg, rgba(255,255,255,.55), rgba(255,255,255,.04)); pointer-events: none; }
.wm-orb:hover, .wm-ctl:hover, .wm-play:hover { filter: brightness(1.25); box-shadow: inset 0 1px 1px rgba(255,255,255,.55), inset 0 -2px 4px rgba(0,0,0,.6), 0 0 10px rgba(var(--wm-glow), .5); }
.wm-orb:active, .wm-ctl:active, .wm-play:active { filter: brightness(.85); transform: translateY(1px); }
.wm-orb { width: 30px; height: 30px; border-radius: 50%; }
.wm-ctl { width: 32px; height: 32px; border-radius: 50%; }
.wm-ctl.on { color: rgb(var(--wm-glow)); box-shadow: inset 0 1px 1px rgba(255,255,255,.45), inset 0 -2px 4px rgba(0,0,0,.6), 0 0 10px rgba(var(--wm-glow), .55); }
.wm-ctl > svg, .wm-orb > svg, .wm-play > svg { position: relative; z-index: 1; filter: drop-shadow(0 1px 1px rgba(0,0,0,.7)); }
.wm-play { width: 54px; height: 54px; border-radius: 50%; border-color: rgba(255,255,255,.4);
  background: radial-gradient(circle at 50% 12%, #8b93a6 0%, #343843 55%, #14151a 100%);
  box-shadow: inset 0 1px 2px rgba(255,255,255,.6), inset 0 -3px 6px rgba(0,0,0,.65), 0 0 0 3px rgba(0,0,0,.55), 0 0 16px rgba(var(--wm-glow), .4); }

/* top bar */
.wm-top { display: flex; align-items: center; gap: 12px; padding: 10px 14px; background: var(--wm-gloss); border-bottom: 1px solid #000; box-shadow: 0 1px 0 rgba(255,255,255,.07), inset 0 1px 0 rgba(255,255,255,.22); }
.wm-navbtns { display: flex; gap: 6px; }
.wm-crumb { flex: 1; min-width: 0; font-size: 15px; font-weight: 300; letter-spacing: .02em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-shadow: 0 1px 2px #000; }
.wm-search { position: relative; width: 220px; max-width: 38vw; }
.wm-search svg { position: absolute; left: 10px; top: 50%; transform: translateY(-50%); color: var(--wm-faint); }
.wm-search input { width: 100%; height: 28px; padding: 0 12px 0 30px; border-radius: 14px; border: 1px solid rgba(255,255,255,.14); outline: none; color: var(--wm-text); font: inherit; user-select: text; -webkit-user-select: text;
  background: linear-gradient(180deg, #050507, #121318); box-shadow: inset 0 2px 4px rgba(0,0,0,.8), 0 1px 0 rgba(255,255,255,.08); }
.wm-search input:focus { border-color: rgba(var(--wm-glow), .65); box-shadow: inset 0 2px 4px rgba(0,0,0,.8), 0 0 8px rgba(var(--wm-glow), .35); }

/* main split */
.wm-main { display: grid; grid-template-columns: var(--wm-side-w, 196px) minmax(0, 1fr); min-height: 0; position: relative; }
.wm-side { overflow-y: auto; padding: 12px 8px; border-right: 1px solid #000; box-shadow: 1px 0 0 rgba(255,255,255,.05); background: linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,0) 40%), #0b0b0f; }
.wm-side h6 { margin: 14px 8px 4px; font-size: 10px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--wm-faint); }
.wm-side h6:first-child { margin-top: 2px; }
.wm-nav { display: flex; align-items: center; gap: 8px; width: 100%; height: 28px; padding: 0 10px; border: 1px solid transparent; border-radius: 4px; background: none; text-align: left; color: var(--wm-dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wm-nav:hover { color: var(--wm-text); background: rgba(255,255,255,.06); }
.wm-nav.active { color: #fff; border-color: rgba(255,255,255,.2); background: var(--wm-gloss-soft); box-shadow: inset 0 1px 0 rgba(255,255,255,.28), 0 0 8px rgba(var(--wm-glow), .15); }
.wm-nav small { margin-left: auto; color: var(--wm-faint); font-size: 11px; }

.wm-view { display: flex; flex-direction: column; min-width: 0; min-height: 0; }
.wm-bar { display: flex; align-items: center; gap: 10px; padding: 14px 18px 10px; flex-wrap: wrap; }
.wm-bar h1 { font-size: 22px; font-weight: 300; letter-spacing: .01em; margin-right: 6px; text-shadow: 0 1px 3px #000; }
.wm-bar .sub { color: var(--wm-faint); font-size: 12px; margin-right: auto; }
.wm-btn { height: 26px; padding: 0 16px; border-radius: 13px; border: 1px solid rgba(255,255,255,.25); background: var(--wm-gloss); color: var(--wm-text); font-size: 12px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.35), 0 1px 3px rgba(0,0,0,.8); }
.wm-btn:hover { box-shadow: inset 0 1px 0 rgba(255,255,255,.45), 0 0 10px rgba(var(--wm-glow), .45); }
.wm-btn:active { background: linear-gradient(180deg, #ffffff 0%, #d9dde6 48%, #b9bfcc 52%, #e3e6ee 100%); color: #1b1c21; border-color: #fff; text-shadow: none; }
.wm-content { flex: 1; min-height: 0; overflow-y: auto; padding-bottom: 12px; }
.wm-empty { padding: 60px 20px; text-align: center; color: var(--wm-faint); }

/* cover art */
.wm-art { position: relative; overflow: hidden; background: linear-gradient(135deg, hsl(var(--h, 230) 35% 28%), hsl(calc(var(--h, 230) + 40) 35% 12%)); display: flex; align-items: center; justify-content: center; color: rgba(255,255,255,.35); font-weight: 600; flex-shrink: 0; }
.wm-art img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.wm-art::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(135deg, rgba(255,255,255,.2) 0%, rgba(255,255,255,.04) 42%, transparent 43%); box-shadow: inset 0 0 0 1px rgba(255,255,255,.14); }

/* table */
.wm-table { --cols: 34px 26px minmax(160px, 3fr) 58px minmax(90px, 2fr) minmax(90px, 2fr) minmax(70px, 1fr); }
.wm-table.noalbum { --cols: 34px 26px minmax(160px, 3fr) 58px minmax(90px, 2fr) minmax(70px, 1fr); }
.wm-hdr, .wm-row { display: grid; grid-template-columns: var(--cols); align-items: center; column-gap: 8px; padding: 0 14px; }
.wm-hdr { position: sticky; top: 0; z-index: 2; height: 26px; color: var(--wm-dim); font-size: 12px; background: var(--wm-gloss); border-bottom: 1px solid #000; box-shadow: inset 0 1px 0 rgba(255,255,255,.18); }
.wm-hdr > span { cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wm-hdr > span:hover { color: #fff; }
.wm-hdr .sorted { color: #fff; }
.wm-hdr .sorted::after { content: attr(data-dir); margin-left: 4px; font-size: 9px; }
.wm-row { height: 28px; content-visibility: auto; contain-intrinsic-size: auto 28px; cursor: default; border-top: 1px solid transparent; border-bottom: 1px solid transparent; }
.wm-row:nth-child(even) { background: rgba(255,255,255,.028); }
.wm-row:hover { background: rgba(255,255,255,.075); }
.wm-row.sel { background: var(--wm-gloss-soft); border-color: rgba(255,255,255,.16); box-shadow: inset 0 1px 0 rgba(255,255,255,.18); }
.wm-row.playing { color: rgb(var(--wm-glow)); }
.wm-row > span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wm-row .dim { color: var(--wm-dim); }
.wm-row .num { text-align: right; color: var(--wm-faint); font-variant-numeric: tabular-nums; }
.wm-row .len { color: var(--wm-dim); font-variant-numeric: tabular-nums; }
.wm-row .star { cursor: pointer; color: var(--wm-faint); text-align: center; opacity: 0; }
.wm-row:hover .star, .wm-row .star.on { opacity: 1; }
.wm-row .star.on { color: #ffd24d; text-shadow: 0 0 6px rgba(255,210,77,.6); }
.wm-row.playing .num { color: transparent; background: no-repeat center / 14px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%2396b9ff'%3E%3Crect x='4' y='10' width='4' height='10'%3E%3Canimate attributeName='height' values='10;18;6;10' dur='.9s' repeatCount='indefinite'/%3E%3Canimate attributeName='y' values='10;2;14;10' dur='.9s' repeatCount='indefinite'/%3E%3C/rect%3E%3Crect x='10' y='4' width='4' height='16'%3E%3Canimate attributeName='height' values='16;6;18;16' dur='.7s' repeatCount='indefinite'/%3E%3Canimate attributeName='y' values='4;14;2;4' dur='.7s' repeatCount='indefinite'/%3E%3C/rect%3E%3Crect x='16' y='8' width='4' height='12'%3E%3Canimate attributeName='height' values='12;18;8;12' dur='.8s' repeatCount='indefinite'/%3E%3Canimate attributeName='y' values='8;2;12;8' dur='.8s' repeatCount='indefinite'/%3E%3C/rect%3E%3C/svg%3E"); }
.wm.paused .wm-row.playing .num { background-image: none; color: rgb(var(--wm-glow)); }
.wm-row.link { cursor: pointer; }
.wm-row.link { grid-template-columns: minmax(160px, 3fr) 90px 90px; }
.wm-hdr.link { grid-template-columns: minmax(160px, 3fr) 90px 90px; }

/* album grid + detail head */
.wm-albums { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 20px 16px; padding: 8px 18px 20px; }
.wm-tile { cursor: pointer; min-width: 0; }
.wm-tile .wm-art { width: 100%; aspect-ratio: 1; border-radius: 3px; box-shadow: 0 6px 16px rgba(0,0,0,.7); transition: box-shadow .15s, transform .15s; }
.wm-tile:hover .wm-art { box-shadow: 0 6px 16px rgba(0,0,0,.7), 0 0 14px rgba(var(--wm-glow), .5); transform: translateY(-2px); }
.wm-tile b { display: block; margin-top: 8px; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wm-tile small { display: block; color: var(--wm-faint); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wm-head { display: flex; gap: 18px; padding: 6px 18px 14px; align-items: flex-end; }
.wm-head .wm-art { width: 132px; height: 132px; border-radius: 3px; box-shadow: 0 8px 20px rgba(0,0,0,.75); -webkit-box-reflect: below 2px linear-gradient(transparent 72%, rgba(255,255,255,.22)); margin-bottom: 18px; }
.wm-head h2 { font-size: 24px; font-weight: 300; line-height: 1.15; text-shadow: 0 1px 3px #000; word-break: break-word; }
.wm-head p { margin-top: 4px; color: var(--wm-dim); font-size: 12px; }
.wm-head .wm-art.round { border-radius: 50%; }

/* now playing */
.wm-npv { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) var(--wm-q-w, 290px); height: 100%; min-height: 0; }
.wm-stage { position: relative; min-width: 0; overflow: hidden; background: radial-gradient(70% 90% at 50% 100%, rgba(var(--wm-glow), .16), transparent 70%), #040406; }
.wm-stage canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.wm-stage .wm-art { position: absolute; left: 22px; bottom: 56px; width: min(26%, 190px); aspect-ratio: 1; border-radius: 3px; box-shadow: 0 10px 30px rgba(0,0,0,.8); -webkit-box-reflect: below 2px linear-gradient(transparent 70%, rgba(255,255,255,.25)); }
.wm-stage .meta { position: absolute; left: 22px; top: 18px; right: 22px; text-shadow: 0 2px 6px #000; pointer-events: none; }
.wm-stage .meta b { display: block; font-size: 24px; font-weight: 300; line-height: 1.2; }
.wm-stage .meta span { color: var(--wm-dim); }
.wm-stage .hint { position: absolute; right: 14px; bottom: 10px; color: var(--wm-faint); font-size: 11px; }
.wm-qlist { overflow-y: auto; border-left: 1px solid #000; box-shadow: -1px 0 0 rgba(255,255,255,.05); background: #0b0b0f; min-height: 0; }
.wm-qlist h3 { position: sticky; top: 0; z-index: 2; height: 26px; line-height: 26px; padding: 0 12px; font-size: 12px; font-weight: 500; background: var(--wm-gloss); border-bottom: 1px solid #000; box-shadow: inset 0 1px 0 rgba(255,255,255,.18); display: flex; justify-content: space-between; }
.wm-qlist h3 a { color: var(--wm-dim); cursor: pointer; font-weight: 400; }
.wm-qlist h3 a:hover { color: #fff; }
.wm-q { display: grid; grid-template-columns: 22px minmax(0, 1fr) 42px; gap: 6px; align-items: center; height: 38px; padding: 0 12px; cursor: default; }
.wm-q:hover { background: rgba(255,255,255,.07); }
.wm-q.playing { background: var(--wm-gloss-soft); color: rgb(var(--wm-glow)); }
.wm-q .t { min-width: 0; line-height: 1.2; }
.wm-q .t div { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wm-q .t small { color: var(--wm-faint); }
.wm-q .num { color: var(--wm-faint); font-size: 11px; text-align: right; }
.wm-q .len { color: var(--wm-dim); font-size: 12px; text-align: right; }

/* transport */
.wm-transport { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 16px; padding: 8px 16px calc(8px + var(--safe-bottom)); background: var(--wm-gloss); border-top: 1px solid #000; box-shadow: 0 -1px 0 rgba(255,255,255,.08), inset 0 1px 0 rgba(255,255,255,.2); }
.wm-now { display: flex; align-items: center; gap: 12px; min-width: 0; cursor: pointer; }
.wm-now-art { width: 54px; height: 54px; border-radius: 2px; box-shadow: 0 3px 8px rgba(0,0,0,.8); }
.wm-now-text { min-width: 0; }
.wm-now-title { font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-shadow: 0 1px 2px #000; }
.wm-now-artist { color: var(--wm-dim); font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wm-center { display: flex; flex-direction: column; align-items: center; gap: 6px; width: min(46vw, 560px); }
.wm-controls { display: flex; align-items: center; gap: 8px; }
.wm-seekrow { display: flex; align-items: center; gap: 10px; width: 100%; color: var(--wm-dim); font-size: 11px; font-variant-numeric: tabular-nums; }
.wm-seekrow span { width: 34px; }
.wm-seekrow span:first-child { text-align: right; }
.wm-right { display: flex; align-items: center; justify-content: flex-end; gap: 10px; }
.wm input[type=range] { -webkit-appearance: none; appearance: none; flex: 1; height: 7px; border-radius: 4px; outline: none; cursor: pointer; border: 1px solid #000;
  background: linear-gradient(90deg, rgba(var(--wm-glow), .95), #e9f0ff) 0 / var(--p, 0%) 100% no-repeat, linear-gradient(180deg, #050507, #1a1b20);
  box-shadow: inset 0 1px 2px rgba(0,0,0,.9), 0 1px 0 rgba(255,255,255,.1); }
.wm input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; width: 14px; height: 14px; border-radius: 50%; border: 1px solid rgba(255,255,255,.5);
  background: radial-gradient(circle at 50% 20%, #fff, #8d94a6 70%); box-shadow: 0 1px 3px #000, 0 0 8px rgba(var(--wm-glow), .5); }
.wm input[type=range]::-moz-range-thumb { width: 13px; height: 13px; border-radius: 50%; border: 1px solid rgba(255,255,255,.5); background: radial-gradient(circle at 50% 20%, #fff, #8d94a6 70%); }
.wm-right input[type=range] { flex: 0 0 96px; }

/* context menu */
.wm-menu { position: fixed; z-index: 400; min-width: 190px; padding: 4px; border-radius: 6px; border: 1px solid rgba(255,255,255,.22); background: linear-gradient(180deg, #2a2c33, #121317); box-shadow: 0 10px 30px rgba(0,0,0,.85), inset 0 1px 0 rgba(255,255,255,.25); color: var(--wm-text); font-size: 13px; }
.wm-menu button { display: block; width: 100%; height: 26px; padding: 0 14px; border: 0; border-radius: 3px; background: none; text-align: left; }
.wm-menu button:hover { background: var(--wm-gloss-soft); box-shadow: inset 0 0 0 1px rgba(255,255,255,.18); }
.wm-menu hr { border: 0; border-top: 1px solid rgba(255,255,255,.1); margin: 4px 2px; }
.wm-toast { position: fixed; left: 50%; bottom: 110px; transform: translateX(-50%); z-index: 500; padding: 7px 16px; border-radius: 14px; font-size: 12px; background: var(--wm-gloss, #222); color: #fff; border: 1px solid rgba(255,255,255,.25); box-shadow: 0 6px 20px rgba(0,0,0,.8); pointer-events: none; transition: opacity .25s; }

/* narrow screens: nav strip on top, fewer columns */
@media (max-width: 760px) {
  .wm-main { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); }
  .wm-side { display: flex; gap: 4px; overflow-x: auto; overflow-y: hidden; padding: 6px 8px; border-right: 0; border-bottom: 1px solid #000; }
  .wm-side h6 { display: none; }
  .wm-nav { width: auto; flex-shrink: 0; }
  .wm-table, .wm-table.noalbum { --cols: 28px 24px minmax(0, 3fr) 48px minmax(0, 2fr); }
  .wm-table .c-album, .wm-table .c-genre, .wm-table .c-year { display: none; }
  .wm-npv { grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 1fr) 36%; }
  .wm-qlist { border-left: 0; border-top: 1px solid #000; }
  .wm-transport { grid-template-columns: minmax(0, 1fr) auto; row-gap: 6px; }
  .wm-right { display: none; }
  .wm-center { width: auto; }
  .wm-ctl:not(.wm-ctl-skip):not(#wm-shuffle) { display: none; }
  .wm-search { width: 140px; }
}
@media (prefers-reduced-motion: reduce) { .wm-tile .wm-art { transition: none; } }

/* ═══ MUSIC - theme plumbing ═══ */
.wm-topc { display: contents; }
.sp-homebtn, .sp-avatar, .sp-heart { display: none; }
.wm-menu-h { padding: 4px 14px 6px; font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: var(--wm-faint, #777); }
.wm-menu { color: var(--wm-text, #e8eaee); }

/* ═══ MUSIC - Spotify theme ═══ */
@font-face { font-family: 'Figtree'; font-weight: 400; font-display: swap; src: url(/static/vendor/fonts/figtree-400.woff2) format('woff2'); }
@font-face { font-family: 'Figtree'; font-weight: 500; font-display: swap; src: url(/static/vendor/fonts/figtree-500.woff2) format('woff2'); }
@font-face { font-family: 'Figtree'; font-weight: 700; font-display: swap; src: url(/static/vendor/fonts/figtree-700.woff2) format('woff2'); }
@font-face { font-family: 'Figtree'; font-weight: 800; font-display: swap; src: url(/static/vendor/fonts/figtree-800.woff2) format('woff2'); }

.wm[data-mzt="spotify"] {
  --sp-green: #1ed760; --sp-green-hi: #3be477; --sp-panel: #121212; --sp-sub: #b3b3b3; --sp-hover: rgba(255,255,255,.1);
  --wm-text: #fff; --wm-dim: #b3b3b3; --wm-faint: #a7a7a7; --wm-glow: 30, 215, 96;
  font-family: 'Figtree', 'Circular Std', 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 14px; color: #fff; background: #000;
  grid-template-columns: var(--wm-side-w, 320px) minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr) auto; column-gap: 8px; padding: var(--safe-top) 8px 0;
}
.wm[data-mzt="spotify"] .wm-main { display: contents; }
.wm[data-mzt="spotify"] .wm-top { grid-column: 1 / -1; grid-row: 1; }
.wm[data-mzt="spotify"] .wm-side { grid-column: 1; grid-row: 2; }
.wm[data-mzt="spotify"] .wm-view { grid-column: 2; grid-row: 2; }
.wm[data-mzt="spotify"] .wm-transport { grid-column: 1 / -1; grid-row: 3; }
.wm[data-mzt="spotify"] .wm-bar { display: none !important; }
.wm[data-mzt="spotify"] :where(button) { color: inherit; }

/* top bar */
.wm[data-mzt="spotify"] .wm-top { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; background: transparent; border: 0; box-shadow: none; padding: 8px 0; }
.wm[data-mzt="spotify"] .wm-crumb, .wm[data-mzt="spotify"] .wm-themebtn, .wm[data-mzt="spotify"] .wm-home { display: none; }
.wm[data-mzt="spotify"] .wm-navbtns { gap: 8px; }
.wm[data-mzt="spotify"] .wm-orb { width: 32px; height: 32px; background: #0d0d0d; border: 0; box-shadow: none; color: #fff; }
.wm[data-mzt="spotify"] .wm-orb::before, .wm[data-mzt="spotify"] .wm-ctl::before, .wm[data-mzt="spotify"] .wm-play::before { display: none; }
.wm[data-mzt="spotify"] .wm-orb:hover { filter: none; background: #1a1a1a; box-shadow: none; }
.wm[data-mzt="spotify"] .wm-orb > svg, .wm[data-mzt="spotify"] .wm-ctl > svg, .wm[data-mzt="spotify"] .wm-play > svg { filter: none; }
.wm[data-mzt="spotify"] .wm-topc { display: flex; align-items: center; gap: 8px; justify-self: center; }
.wm[data-mzt="spotify"] .sp-homebtn { display: inline-flex; align-items: center; justify-content: center; width: 48px; height: 48px; border-radius: 50%; border: 0; background: #1f1f1f; color: #b3b3b3; cursor: pointer; }
.wm[data-mzt="spotify"] .sp-homebtn:hover { color: #fff; transform: scale(1.06); background: #2a2a2a; }
.wm[data-mzt="spotify"] .wm-search { width: min(480px, 36vw); max-width: none; }
.wm[data-mzt="spotify"] .wm-search svg { left: 16px; width: 20px; height: 20px; color: #b3b3b3; stroke-width: 2.2; }
.wm[data-mzt="spotify"] .wm-search input { height: 48px; padding: 0 16px 0 48px; border-radius: 500px; border: 1px solid transparent; font: inherit; font-size: 16px; color: #fff; background: #1f1f1f; box-shadow: none; }
.wm[data-mzt="spotify"] .wm-search input::placeholder { color: #b3b3b3; }
.wm[data-mzt="spotify"] .wm-search input:hover { background: #2a2a2a; border-color: #3a3a3a; }
.wm[data-mzt="spotify"] .wm-search input:focus { background: #2a2a2a; border-color: #fff; box-shadow: none; }
.wm[data-mzt="spotify"] .sp-avatar { display: inline-flex; align-items: center; justify-content: center; justify-self: end; width: 48px; height: 48px; border-radius: 50%; border: 0; cursor: pointer; font: inherit; font-weight: 800; font-size: 14px; color: #000;
  background: radial-gradient(circle, #f573a0 0 16px, #1f1f1f 17px); }
.wm[data-mzt="spotify"] .sp-avatar:hover { transform: scale(1.06); }

/* panels */
.wm[data-mzt="spotify"] .wm-side { display: flex; flex-direction: column; gap: 8px; padding: 0; border: 0; box-shadow: none; background: none; overflow: hidden; min-height: 0; }
.sp-panel { background: #121212; border-radius: 8px; }
.sp-nav { padding: 8px 12px; }
.sp-navitem { display: flex; align-items: center; gap: 20px; width: 100%; height: 40px; padding: 0 12px; border: 0; background: none; border-radius: 4px; color: #b3b3b3; font: inherit; font-size: 16px; font-weight: 700; cursor: pointer; text-align: left; }
.sp-navitem:hover, .sp-navitem.on { color: #fff; }
.sp-lib { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.sp-lib-head { padding: 12px 16px 4px; }
.sp-libtitle { display: flex; align-items: center; gap: 12px; color: #b3b3b3; font-weight: 700; font-size: 16px; }
.sp-chips { display: flex; gap: 8px; padding: 8px 16px; flex-wrap: wrap; }
.sp-chip { height: 32px; padding: 0 12px; border: 0; border-radius: 16px; background: #2a2a2a; color: #fff; font: inherit; font-size: 14px; cursor: pointer; }
/* album page pieces: hidden unless the phone layout turns them on */
.sp-mmore, .sp-asub, .sp-lk { display: none; }
.sp-eb { display: inline-flex; align-items: center; justify-content: center; width: 16px; height: 16px; margin-right: 6px; border-radius: 2px; background: #b3b3b3; color: #121212; font-size: 11px; font-weight: 800; line-height: 1; vertical-align: -2px; flex-shrink: 0; }
.sp-avs { display: inline-flex; vertical-align: middle; margin-right: 8px; }
.sp-avs .wm-art { width: 24px; height: 24px; border-radius: 50%; font-size: .7rem; border: 2px solid #121212; box-sizing: content-box; }
.sp-avs .wm-art + .wm-art { margin-left: -8px; }
.sp-chip:hover { background: #3a3a3a; }
.sp-chip .n { opacity: .6; font-size: 12px; margin-left: 2px; }
.sp-schips { padding: 4px 0 16px; }
.sp-sh { color: inherit; text-decoration: none; cursor: pointer; }
.sp-sh:hover { text-decoration: underline; }
.sp-about { max-width: 640px; padding: 4px 4px 12px; }
.sp-about p { color: #d0d0d0; font-size: 15px; line-height: 1.55; margin: 0 0 8px; }
.sp-capnote { color: #b3b3b3; font-size: 13px; margin: 16px 4px; }
.sp-chip.on:hover { background: #fff; }
.sp-chip.on, .sp-chip.pr { background: #fff; color: #2a2a2a; }
@media (hover: hover) { .sp-chip:active { background: #fff; color: #2a2a2a; } }
.sp-lib-tools { display: flex; justify-content: flex-end; padding: 0 16px 4px; }
.sp-sortbtn { display: inline-flex; align-items: center; gap: 8px; height: 32px; border: 0; background: none; color: #b3b3b3; font: inherit; font-size: 14px; cursor: pointer; }
.sp-sortbtn:hover { color: #fff; transform: scale(1.04); }
.sp-lib-list { flex: 1; overflow-y: auto; padding: 0 8px 8px; }
.sp-li { display: flex; align-items: center; gap: 12px; padding: 8px; border-radius: 6px; cursor: pointer; content-visibility: auto; contain-intrinsic-size: auto 64px; }
.sp-li:hover { background: #1a1a1a; }
.sp-li.on { background: #2a2a2a; }
.sp-li .wm-art { width: 48px; height: 48px; border-radius: 4px; }
.sp-li .wm-art.round { border-radius: 50%; }
.sp-lit { min-width: 0; }
.sp-lit b { display: block; font-weight: 400; font-size: 16px; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sp-li.playing .sp-lit b { color: var(--sp-green); }
.sp-lit small { display: block; font-size: 14px; color: #b3b3b3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.wm[data-mzt="spotify"] .wm-view { background: #121212; border-radius: 8px; overflow: hidden; }
.wm[data-mzt="spotify"] .wm-content { padding: 0; }
.wm[data-mzt="spotify"] ::-webkit-scrollbar { width: 12px; height: 12px; }
.wm[data-mzt="spotify"] ::-webkit-scrollbar-thumb { background: transparent; border: 0; border-radius: 0; }
@media (pointer: coarse) { .wm, .wm * { scrollbar-width: none; } .wm ::-webkit-scrollbar { display: none; width: 0; height: 0; } }   /* touch screens scroll by finger: no scrollbar strip */
.wm[data-mzt="spotify"] .wm-content:hover::-webkit-scrollbar-thumb, .wm[data-mzt="spotify"] .sp-lib-list:hover::-webkit-scrollbar-thumb { background: rgba(255,255,255,.3); }
.wm[data-mzt="spotify"] .wm-art::after { display: none; }
.wm[data-mzt="spotify"] .wm-art { background: #282828; color: #7f7f7f; font-weight: 700; }
.wm[data-mzt="spotify"] .wm-art.round { border-radius: 50%; }

/* covers */
.sp-liked { background: linear-gradient(135deg, #450af5, #c4efd9) !important; color: #fff !important; }
.sp-allsongs { background: linear-gradient(135deg, #5b5b5b, #232323) !important; color: #fff !important; }
.sp-mix { background: linear-gradient(160deg, hsl(var(--h) 70% 45%), hsl(calc(var(--h) + 30) 70% 25%)) !important; }
.sp-mix img { mix-blend-mode: luminosity; opacity: .55; }
.sp-mix .tag { position: absolute; z-index: 2; left: 0; bottom: 0; right: 0; padding: 14% 8% 8%; color: #fff; font-weight: 800; font-size: 17px; text-align: left; line-height: 1.1;
  background: linear-gradient(transparent, rgba(0,0,0,.65)); }
.sp-art.sm { width: 40px; height: 40px; border-radius: 4px; }
.sp-art.xs { width: 24px; height: 24px; border-radius: 50%; display: inline-flex; vertical-align: middle; margin-right: 6px; }

/* page + header */
.sp-page { position: relative; min-height: 100%; background: linear-gradient(var(--tint, #333) 0, #121212 360px) #121212; }
.sp-phead { display: flex; align-items: flex-end; gap: 24px; padding: 48px 24px 24px; }
.sp-pcover .wm-art { width: 232px; height: 232px; border-radius: 4px; box-shadow: 0 4px 60px rgba(0,0,0,.5); font-size: 4rem; }
.sp-pcover .wm-art.round { border-radius: 50%; }
.sp-ptext { min-width: 0; }
.sp-kind { font-size: 14px; font-weight: 700; display: flex; align-items: center; gap: 6px; }
.sp-ptext h1 { font-weight: 800; line-height: 1.05; margin: .08em 0 .12em; letter-spacing: -.02em; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.sp-meta { font-size: 14px; color: #fff; display: flex; flex-wrap: wrap; align-items: center; gap: 4px; }
.sp-meta .dot { margin: 0 2px; }
.sp-meta b { font-weight: 700; }
.lnk { color: inherit; cursor: pointer; }
.lnk:hover { text-decoration: underline; }
.lnk.bold { font-weight: 700; }
.sp-pbody { position: relative; padding: 0 24px 32px; }
.sp-pbody::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 232px; background: linear-gradient(rgba(0,0,0,.6), rgba(0,0,0,0)); z-index: 0; }
.sp-pbody > * { position: relative; z-index: 1; }
.sp-home .sp-pbody::before { display: none; }
.sp-actions { display: flex; align-items: center; gap: 32px; padding: 24px 0; }
.sp-bigplay { width: 56px; height: 56px; border-radius: 50%; border: 0; background: var(--sp-green); color: #000; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; }
.sp-bigplay:hover { transform: scale(1.06); background: var(--sp-green-hi); }
.sp-bigplay:active { transform: scale(1); }
.sp-shufbtn { border: 0; background: none; color: #b3b3b3; cursor: pointer; display: inline-flex; padding: 0; }
.sp-shufbtn:hover { color: #fff; transform: scale(1.06); }
.sp-shufbtn.on { color: var(--sp-green); }
.sp-greet { font-size: 32px; font-weight: 800; padding: 24px 0 16px; letter-spacing: -.02em; }
.sp-gridtitle { font-size: 32px; font-weight: 800; padding: 24px 0 16px; letter-spacing: -.02em; }
.sp-h2 { font-size: 24px; font-weight: 800; margin: 8px 0 12px; letter-spacing: -.01em; }
.sp-disc { display: flex; flex-direction: column; margin-bottom: 24px; }
.sp-artistpage .sp-pbody .sp-tbl.art + .sp-h2 { margin-top: 40px; }
.sp-showmore { margin: 10px 0 0 16px; padding: 6px 0; border: 0; background: none; color: #b3b3b3; font-size: 14px; font-weight: 700; cursor: pointer; }
.sp-showmore:hover { color: #fff; }
.sp-np-text a, .sp-np-from a { color: inherit; cursor: pointer; }
.sp-disc-blk { margin-bottom: 22px; }
.sp-disc-blk .sp-row { height: 36px; contain-intrinsic-size: auto 36px; }
.sp-disc-head { display: flex; align-items: center; gap: 14px; padding: 8px; border-radius: 6px; cursor: pointer; }
.sp-disc-head:hover { background: rgba(255,255,255,.08); }
.sp-disc-head > .wm-art { width: 64px; height: 64px; flex-shrink: 0; border-radius: 4px; }
.sp-disc-head .tt { flex: 1; min-width: 0; }
.sp-disc-head .tt b { display: block; font-size: 18px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sp-disc-head .tt small { display: block; margin-top: 2px; font-size: 13px; color: #b3b3b3; }
.sp-disc-head .pl { width: 40px; height: 40px; border-radius: 50%; border: 0; background: var(--sp-green); color: #000; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; }
.sp-notice { padding: 10px 24px; font-size: 13px; color: #f5c451; background: #1a1608; }

/* artist hero */
.sp-ahead { position: relative; min-height: 340px; display: flex; align-items: flex-end; padding: 24px; overflow: hidden; }
.sp-abg { position: absolute; inset: 0; }
.sp-abg img { width: 100%; height: 100%; object-fit: cover; filter: blur(28px) saturate(1.2) brightness(.7); transform: scale(1.2); }
.sp-abg img.sp-aimg { filter: brightness(.72) saturate(1.1); transform: none; object-position: 50% 22%; }   /* a photo of the artist stays sharp; album covers keep the blur */
.sp-abg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(transparent 30%, rgba(0,0,0,.65)); }
.sp-ahead .sp-ptext { position: relative; z-index: 1; }
.sp-artistpage .sp-pbody::before { display: none; }

/* track tables */
.sp-tbl { --cols: 16px minmax(120px, 4fr) minmax(120px, 1fr); }
.sp-tbl.alb { --cols: 16px minmax(120px, 6fr) minmax(120px, 4fr) minmax(120px, 1fr); }
.sp-tbl.alb.dt { --cols: 16px minmax(120px, 6fr) minmax(120px, 4fr) minmax(120px, 3fr) minmax(120px, 1fr); }
.sp-tbl.pl { --cols: 16px minmax(120px, 6fr) minmax(90px, 2fr) minmax(120px, 1fr); }
.sp-th, .sp-row { display: grid; grid-template-columns: var(--cols); align-items: center; column-gap: 16px; padding: 0 16px; }
.sp-th { position: sticky; top: 0; z-index: 3; height: 36px; margin-bottom: 8px; color: #b3b3b3; font-size: 14px; border-bottom: 1px solid rgba(255,255,255,.1); background: #121212; }
.sp-th span { cursor: pointer; white-space: nowrap; }
.sp-th span:hover, .sp-th span.on { color: #fff; }
.sp-th .c0 { text-align: center; font-size: 16px; cursor: default; }
.sp-th .c-end { display: flex; justify-content: flex-end; padding-right: 0; }
.sp-th .clk svg { display: block; }
.sp-row { height: 56px; border-radius: 4px; content-visibility: auto; contain-intrinsic-size: auto 56px; cursor: default; color: #b3b3b3; }
.sp-tbl.compact .sp-row { height: 56px; }
.sp-row:hover { background: rgba(255,255,255,.1); }
.sp-row.sel { background: rgba(255,255,255,.3); }
.sp-row .c0 { text-align: center; position: relative; height: 16px; display: flex; align-items: center; justify-content: center; font-size: 16px; font-variant-numeric: tabular-nums; }
.sp-row .c0 .pl { display: none; border: 0; background: none; color: #fff; padding: 0; cursor: pointer; line-height: 0; }
.sp-row .c0 .eq { display: none; width: 14px; height: 14px; background: center / contain no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%231ed760'%3E%3Crect x='4' y='10' width='4' height='10'%3E%3Canimate attributeName='height' values='10;18;6;10' dur='.9s' repeatCount='indefinite'/%3E%3Canimate attributeName='y' values='10;2;14;10' dur='.9s' repeatCount='indefinite'/%3E%3C/rect%3E%3Crect x='10' y='4' width='4' height='16'%3E%3Canimate attributeName='height' values='16;6;18;16' dur='.7s' repeatCount='indefinite'/%3E%3Canimate attributeName='y' values='4;14;2;4' dur='.7s' repeatCount='indefinite'/%3E%3C/rect%3E%3Crect x='16' y='8' width='4' height='12'%3E%3Canimate attributeName='height' values='12;18;8;12' dur='.8s' repeatCount='indefinite'/%3E%3Canimate attributeName='y' values='8;2;12;8' dur='.8s' repeatCount='indefinite'/%3E%3C/rect%3E%3C/svg%3E"); }
.wm.paused[data-mzt="spotify"] .sp-row .c0 .eq { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%231ed760'%3E%3Crect x='4' y='10' width='4' height='10'/%3E%3Crect x='10' y='4' width='4' height='16'/%3E%3Crect x='16' y='8' width='4' height='12'/%3E%3C/svg%3E"); }
.sp-row:hover .c0 .n { display: none; }
.sp-row:hover .c0 .pl { display: block; }
.sp-row.playing .c0 .n { display: none; }
.sp-row.playing .c0 .eq { display: block; }
.sp-row.playing:hover .c0 .eq { display: none; }
.sp-row .c1 { display: flex; align-items: center; gap: 16px; min-width: 0; }
.sp-row .tt { min-width: 0; }
.sp-row .tt b { display: block; font-weight: 400; font-size: 16px; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sp-row.playing .tt b { color: var(--sp-green); }
.sp-row .tt small { display: block; font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sp-row:hover .tt small, .sp-row:hover .c-alb, .sp-row:hover .c-date { color: #fff; }
.sp-row .c-alb, .sp-row .c-date, .sp-row .c-plays { font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sp-row .c-end { display: flex; align-items: center; justify-content: flex-end; gap: 24px; }
.sp-row .star { color: #b3b3b3; opacity: 0; cursor: pointer; display: inline-flex; line-height: 0; }
.sp-row:hover .star { opacity: 1; }
.sp-row .star:hover { color: #fff; transform: scale(1.1); }
.sp-row .star.on { opacity: 1; color: var(--sp-green); }
.sp-row time { font-size: 14px; font-variant-numeric: tabular-nums; min-width: 40px; text-align: right; }
.sp-row .more { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; color: #b3b3b3; opacity: 0; cursor: pointer; border-radius: 50%; }
.sp-row:hover .more, .sp-row.sel .more, .sp-row .more:focus-visible { opacity: 1; }
.sp-row .more:hover { color: #fff; transform: scale(1.08); }
@media (hover: none) { .sp-row .more { opacity: 1; } }
.sp-empty { padding: 56px 24px; text-align: center; color: #b3b3b3; }
.sp-empty h2 { color: #fff; font-size: 24px; margin-bottom: 8px; }
.sp-qhead { display: flex; align-items: center; justify-content: space-between; margin-top: 24px; }
.sp-textbtn { border: 0; background: none; color: #b3b3b3; font: inherit; font-weight: 700; cursor: pointer; }
.sp-textbtn:hover { color: #fff; text-decoration: underline; }

/* shelves + cards */
.sp-shelf { margin-top: 24px; }
.sp-shelf-h { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 4px; }
.sp-shelf-h h2 { font-size: 24px; font-weight: 800; letter-spacing: -.01em; }
.sp-shelf-h a { color: #b3b3b3; font-size: 14px; font-weight: 700; cursor: pointer; }
.sp-shelf-h a:hover { text-decoration: underline; }
.sp-shelf-h h2 a.sp-sh { color: inherit; font-size: inherit; font-weight: inherit; }   /* a header that opens the full list looks like any other header */
.sp-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); grid-template-rows: 1fr; grid-auto-rows: 0; overflow-y: hidden; margin: 0 -12px; }
.sp-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); margin: 0 -12px; }
.sp-cardx { position: relative; padding: 12px; border-radius: 6px; cursor: pointer; min-width: 0; }
.sp-cardx:hover { background: #1f1f1f; }
.sp-cover { position: relative; }
.sp-cover .wm-art { width: 100%; height: auto; aspect-ratio: 1; border-radius: 4px; box-shadow: 0 8px 24px rgba(0,0,0,.5); font-size: 3rem; }
.sp-cover .wm-art.round { border-radius: 50%; }
.sp-ct { margin-top: 12px; font-size: 16px; font-weight: 700; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sp-cs { margin-top: 4px; font-size: 14px; color: #b3b3b3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.sp-cardplay { position: absolute; right: 8px; bottom: 8px; width: 48px; height: 48px; border-radius: 50%; border: 0; background: var(--sp-green); color: #000; display: flex; align-items: center; justify-content: center; cursor: pointer;
  opacity: 0; transform: translateY(8px); transition: opacity .3s, transform .3s; box-shadow: 0 8px 8px rgba(0,0,0,.3); }
.sp-cardplay svg { width: 20px; height: 20px; }
.sp-cardx:hover .sp-cardplay, .sp-quick:hover .sp-cardplay, .sp-topres:hover .sp-cardplay { opacity: 1; transform: none; }
.sp-cardplay:hover { transform: scale(1.06) !important; background: var(--sp-green-hi); }

.sp-quicks { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 8px 16px; }
.sp-quick { position: relative; display: flex; align-items: center; gap: 12px; height: 64px; padding-right: 72px; border-radius: 4px; background: rgba(255,255,255,.1); overflow: hidden; cursor: pointer; }
.sp-quick:hover { background: rgba(255,255,255,.2); }
.sp-quick .wm-art { width: 64px; height: 64px; border-radius: 0; box-shadow: 0 8px 24px rgba(0,0,0,.5); }
.sp-quick b { font-size: 16px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sp-quick .sp-cardplay { right: 16px; top: 8px; bottom: auto; }

/* search */
.sp-browse { font-size: 24px; font-weight: 800; padding: 24px 0 16px; }
.sp-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 24px; }
.sp-tile { position: relative; aspect-ratio: 1.12; border-radius: 8px; padding: 16px; overflow: hidden; cursor: pointer; background: hsl(var(--h) 62% 36%); }
.sp-tile b { position: relative; z-index: 1; font-size: 24px; font-weight: 800; letter-spacing: -.01em; line-height: 1.1; word-break: break-word; }
.sp-tile img { position: absolute; right: -18px; bottom: -6px; width: 46%; aspect-ratio: 1; object-fit: cover; border-radius: 4px; transform: rotate(25deg); box-shadow: 0 2px 4px rgba(0,0,0,.4); }
.sp-tile:hover { filter: brightness(1.08); }
.sp-sr { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 24px; padding-top: 16px; }
.sp-sr h2 { font-size: 24px; font-weight: 800; margin-bottom: 16px; }
.sp-topres { position: relative; background: #181818; border-radius: 8px; padding: 20px; cursor: pointer; }
.sp-topres:hover { background: #282828; }
.sp-topres .wm-art { width: 92px; height: 92px; border-radius: 4px; box-shadow: 0 8px 24px rgba(0,0,0,.5); }
.sp-topres .wm-art.round { border-radius: 50%; }
.sp-topres h3 { font-size: 32px; font-weight: 800; margin: 20px 0 8px; letter-spacing: -.02em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sp-topres .pill { display: inline-block; padding: 4px 12px; border-radius: 16px; background: #121212; font-weight: 700; font-size: 14px; }
.sp-topres .dim { color: #b3b3b3; }
.sp-topres .sp-cardplay { right: 20px; bottom: 20px; }

/* now playing bar */
.wm[data-mzt="spotify"] .wm-transport { background: #000; border: 0; box-shadow: none; padding: 8px 4px calc(8px + var(--safe-bottom)); grid-template-columns: minmax(180px, 30%) minmax(0, 40%) minmax(180px, 30%); height: 88px; box-sizing: border-box; gap: 16px; }
.wm[data-mzt="spotify"] .wm-now { gap: 14px; cursor: default; }
.wm[data-mzt="spotify"] .wm-now-art { width: 56px; height: 56px; border-radius: 4px; box-shadow: none; }
.wm[data-mzt="spotify"] .wm-now-title { font-size: 14px; font-weight: 400; text-shadow: none; color: #fff; }
.wm[data-mzt="spotify"] .wm-now-title:hover { text-decoration: underline; }
.wm[data-mzt="spotify"] .wm-now-artist { font-size: 11px; color: #b3b3b3; }
.wm[data-mzt="spotify"] .sp-heart { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border: 0; background: none; color: #b3b3b3; cursor: pointer; flex-shrink: 0; }
.wm[data-mzt="spotify"] .sp-heart:hover { color: #fff; }
.wm[data-mzt="spotify"] .sp-heart.on { color: var(--sp-green); }
.wm[data-mzt="spotify"] .wm-center { width: 100%; max-width: 722px; margin: 0 auto; gap: 8px; }
.wm[data-mzt="spotify"] .wm-controls { gap: 16px; }
.wm[data-mzt="spotify"] .wm-ctl { width: 32px; height: 32px; background: none; border: 0; box-shadow: none; color: #b3b3b3; }
.wm[data-mzt="spotify"] .wm-ctl:hover { filter: none; color: #fff; box-shadow: none; }
.wm[data-mzt="spotify"] .wm-ctl.on { color: var(--sp-green); box-shadow: none; }
.wm[data-mzt="spotify"] .wm-ctl.on::after { content: ""; position: absolute; bottom: 1px; left: 50%; width: 4px; height: 4px; margin-left: -2px; border-radius: 50%; background: var(--sp-green); }
.wm[data-mzt="spotify"] .wm-ctl[onclick="mzStop()"] { display: none; }
.wm[data-mzt="spotify"] .wm-play { width: 32px; height: 32px; background: #fff; border: 0; color: #000; box-shadow: none; }
.wm[data-mzt="spotify"] .wm-play:hover { filter: none; transform: scale(1.06); background: #fff; box-shadow: none; }
.wm[data-mzt="spotify"] .wm-play > svg { width: 16px; height: 16px; }
.wm[data-mzt="spotify"] .wm-seekrow { gap: 8px; color: #a7a7a7; font-size: 11px; }
.wm[data-mzt="spotify"] .wm-seekrow span { width: 40px; }
.wm[data-mzt="spotify"] .wm-right { gap: 8px; }
.wm[data-mzt="spotify"] input[type=range] { height: 4px; border: 0; border-radius: 2px; box-shadow: none; background: linear-gradient(#fff, #fff) 0 / var(--p, 0%) 100% no-repeat, #4d4d4d; }
.wm[data-mzt="spotify"] input[type=range]:hover { background: linear-gradient(var(--sp-green), var(--sp-green)) 0 / var(--p, 0%) 100% no-repeat, #4d4d4d; }
.wm[data-mzt="spotify"] input[type=range]::-webkit-slider-thumb { width: 12px; height: 12px; border: 0; background: #fff; box-shadow: none; opacity: 0; }
.wm[data-mzt="spotify"] input[type=range]:hover::-webkit-slider-thumb { opacity: 1; }
.wm[data-mzt="spotify"] input[type=range]::-moz-range-thumb { width: 12px; height: 12px; border: 0; background: #fff; }
.wm[data-mzt="spotify"] .wm-right input[type=range] { flex: 0 0 93px; }

/* menus + toast */
.wm[data-mzt="spotify"] .wm-menu { min-width: 220px; padding: 4px; border: 0; border-radius: 4px; background: #282828; box-shadow: 0 16px 24px rgba(0,0,0,.3), 0 6px 8px rgba(0,0,0,.2); font-size: 14px; }
.wm[data-mzt="spotify"] .wm-menu button { height: 40px; padding: 0 12px; border-radius: 2px; color: #e8e8e8; }
.wm[data-mzt="spotify"] .wm-menu button:hover { background: rgba(255,255,255,.1); box-shadow: none; color: #fff; }
.wm[data-mzt="spotify"] .wm-menu hr { border-top-color: rgba(255,255,255,.1); }
.wm[data-mzt="spotify"] .wm-menu-h { color: #a7a7a7; font-size: 12px; letter-spacing: 0; text-transform: none; font-weight: 700; padding: 8px 12px 4px; }
.wm-toast[data-mzt="spotify"] { background: #fff; color: #000; border: 0; font-family: 'Figtree', Helvetica, Arial, sans-serif; font-weight: 700; font-size: 14px; border-radius: 8px; padding: 12px 16px; box-shadow: 0 4px 12px rgba(0,0,0,.5); }

/* ═══ MUSIC - resizable panes ═══ */
.wm-split { grid-column: 1; grid-row: 1; justify-self: end; align-self: stretch; width: 7px; margin-right: -3px; cursor: col-resize; z-index: 6; position: relative; touch-action: none; outline: none; }
.wm-split::after { content: ""; position: absolute; left: 3px; top: 0; bottom: 0; width: 1px; border-radius: 1px; background: transparent; transition: background .15s, width .15s, left .15s; }
.wm-split:hover::after, .wm-split:focus-visible::after, .wm-split.drag::after { left: 2px; width: 3px; background: rgba(var(--wm-glow), .75); }
.wm.resizing, .wm.resizing * { cursor: col-resize !important; user-select: none !important; }
.wm.resizing iframe, .wm.resizing canvas { pointer-events: none; }
.wm-split.q { position: absolute; top: 0; bottom: 0; left: auto; right: calc(var(--wm-q-w, 290px) - 3px); margin: 0; z-index: 8; }
.wm[data-mzt="spotify"] .wm-split { grid-column: 1; grid-row: 2; width: 8px; margin-right: -8px; }
.wm[data-mzt="spotify"] .wm-split::after { left: 3px; }
.wm[data-mzt="spotify"] .wm-split:hover::after, .wm[data-mzt="spotify"] .wm-split.drag::after { left: 3px; width: 2px; background: #fff; opacity: .7; }
.wm[data-mzt="spotify"] .sp-homebtn.on { color: #fff; }

/* Spotify library collapsed to a covers-only strip */
.wm.side-collapsed .sp-libtitle span, .wm.side-collapsed .sp-chips, .wm.side-collapsed .sp-lib-tools, .wm.side-collapsed .sp-lit { display: none; }
.wm.side-collapsed .sp-lib-head { padding: 16px 0 8px; display: flex; justify-content: center; }
.wm.side-collapsed .sp-li { justify-content: center; padding: 8px 0; }
.wm.side-collapsed .sp-lib-list { padding: 0 4px 8px; overflow-x: hidden; }
@media (max-width: 760px) { .wm-split { display: none; } }

.sp-textbtn:active, .sp-sortbtn:active { color: #2a2a2a; background: #fff; border-radius: 16px; padding-left: 10px; padding-right: 10px; text-decoration: none; }
.wm[data-mzt="spotify"] .wm-btn { background: #2a2a2a; color: #fff; border: 0; box-shadow: none; }
.wm[data-mzt="spotify"] .wm-btn:hover { background: #3a3a3a; box-shadow: none; }
.wm[data-mzt="spotify"] .wm-btn:active { background: #fff; color: #2a2a2a; }

/* ═══ MUSIC - Connect (control another device) ═══ */
.wm-remote { grid-column: 1 / -1; grid-row: 4; justify-self: end; padding: 3px 14px calc(5px + var(--safe-bottom)); font-size: 12px; font-weight: 600; letter-spacing: .01em;
  color: rgb(var(--wm-glow)); text-shadow: 0 0 10px rgba(var(--wm-glow), .5); }
.wm-remote::before { content: "▶"; margin-right: 6px; font-size: 9px; vertical-align: 1px; }
.wm[data-mzt="spotify"] .wm-remote { color: var(--sp-green); text-shadow: none; background: #000; width: 100%; text-align: right; padding-right: 20px; }
.wm[data-mzt="spotify"] .wm-remote::before { content: "◉"; font-size: 11px; vertical-align: 0; }
.wm-menu .dot-on { color: rgb(var(--wm-glow)); }
.wm[data-mzt="spotify"] .wm-menu .dot-on { color: var(--sp-green); }
.wm-menu .dot-off { color: #666; }
.wm-menu small { color: #8b8f99; margin-left: 4px; }
.wm.remote .wm-now-title::after { content: ""; }

/* ═══ MUSIC - shared hidden-by-default pieces (each theme turns on what it uses) ═══ */
.mac-lights, .sp-tabbar, .sp-npclose, .sp-minifill, .wm-helpbtn, .wm-orb .lbl, .sp-expand, .sp-cp { display: none; }
@font-face { font-family: 'Inter'; font-weight: 400; font-display: swap; src: url(/static/vendor/fonts/inter-400.woff2) format('woff2'); }
@font-face { font-family: 'Inter'; font-weight: 500; font-display: swap; src: url(/static/vendor/fonts/inter-500.woff2) format('woff2'); }
@font-face { font-family: 'Inter'; font-weight: 600; font-display: swap; src: url(/static/vendor/fonts/inter-600.woff2) format('woff2'); }
@font-face { font-family: 'Inter'; font-weight: 700; font-display: swap; src: url(/static/vendor/fonts/inter-700.woff2) format('woff2'); }

/* ═══ MUSIC - "Glossy": frosted-glass panels over a blurred album backdrop (modern Apple look) ═══
   Everything below is scoped to .wm[data-mzt="glossy"]; it cannot reach any other theme. */
.wm[data-mzt="glossy"] {
  --ap: 250, 45, 72;
  --wm-text: rgba(255,255,255,.95); --wm-dim: rgba(235,235,245,.78); --wm-faint: rgba(235,235,245,.6); --wm-glow: 250, 45, 72;
  --g-fill: rgba(44,44,50,.5); --g-fill-hi: rgba(70,70,78,.55); --g-solid: rgba(22,22,26,.74);
  --g-hair: rgba(255,255,255,.1);
  --g-blur: blur(38px) saturate(190%);
  --g-spec: inset 0 1px 0 rgba(255,255,255,.26), inset 0 0 0 .5px rgba(255,255,255,.14), inset 0 -1px 0 rgba(0,0,0,.3);
  --g-shadow: 0 22px 56px rgba(0,0,0,.5), 0 3px 10px rgba(0,0,0,.32);
  position: relative; overflow: hidden; background: #08080b; color: var(--wm-text);
  font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Inter', system-ui, sans-serif; font-size: 14px; letter-spacing: -.006em;
  padding: max(10px, calc(var(--safe-top) * .5)) 10px 10px; gap: 10px; box-sizing: border-box;
  grid-template-columns: var(--wm-side-w, 232px) minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr) auto;
}
.wm[data-mzt="glossy"]::before {                      /* the blurred cover that the glass panels frost */
  content: ""; position: absolute; inset: -12%; z-index: 0; pointer-events: none;
  background: var(--wm-amb, none) center / cover no-repeat,
    radial-gradient(60% 50% at 18% 8%, rgba(250,45,72,.30), transparent 70%), radial-gradient(55% 55% at 92% 92%, rgba(70,90,255,.24), transparent 70%);
  filter: blur(64px) saturate(1.8) brightness(.66); transform: scale(1.2);
}
.wm[data-mzt="glossy"] .wm-main { display: contents; }
.wm[data-mzt="glossy"] .wm-side, .wm[data-mzt="glossy"] .wm-transport, .wm[data-mzt="glossy"] .wm-top, .wm[data-mzt="glossy"] .wm-view { position: relative; z-index: 2; }
.wm[data-mzt="glossy"] ::-webkit-scrollbar { width: 12px; height: 12px; }
.wm[data-mzt="glossy"] ::-webkit-scrollbar-thumb { background: transparent; border: 3px solid transparent; border-radius: 8px; background-clip: padding-box; }
.wm[data-mzt="glossy"] *:hover::-webkit-scrollbar-thumb { background: rgba(255,255,255,.3); background-clip: padding-box; }
.wm[data-mzt="glossy"] :where(button, [role="button"], input, a, [tabindex]):focus-visible { outline: 2px solid rgb(var(--ap)); outline-offset: 2px; }

/* window buttons */
.wm[data-mzt="glossy"] .mac-lights { display: flex; gap: 8px; position: absolute; left: 27px; top: calc(max(10px, var(--safe-top) * .5) + 16px); z-index: 9; }
.wm[data-mzt="glossy"] .mac-lights button { width: 13px; height: 13px; padding: 0; border: 0; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; color: transparent; cursor: pointer;
  box-shadow: inset 0 0 0 .5px rgba(0,0,0,.4), inset 0 1px 1px rgba(255,255,255,.4); }
.wm[data-mzt="glossy"] .mac-lights:hover button { color: rgba(0,0,0,.6); }
.wm[data-mzt="glossy"] .ml-close { background: #ff5f57; } .wm[data-mzt="glossy"] .ml-min { background: #febc2e; } .wm[data-mzt="glossy"] .ml-max { background: #28c840; }
.wm[data-mzt="glossy"] .mac-lights button:active { filter: brightness(.75); }

/* sidebar: icon + plain label for everything */
.wm[data-mzt="glossy"] .wm-side { grid-column: 1; grid-row: 1 / 3; border: 0; border-radius: 22px; padding: 58px 10px 14px; background: var(--g-fill); backdrop-filter: var(--g-blur); -webkit-backdrop-filter: var(--g-blur); box-shadow: var(--g-spec), var(--g-shadow); }
.wm[data-mzt="glossy"] .wm-side h6 { margin: 18px 10px 6px; font-size: 12px; font-weight: 600; letter-spacing: 0; text-transform: none; color: var(--wm-faint); }
.wm[data-mzt="glossy"] .wm-side h6:first-child { margin-top: 0; }
.wm[data-mzt="glossy"] .wm-nav { height: 36px; padding: 0 10px; gap: 10px; border: 0; border-radius: 10px; font-size: 14px; color: var(--wm-text); }
.wm[data-mzt="glossy"] .wm-nav svg { flex-shrink: 0; color: var(--wm-dim); }
.wm[data-mzt="glossy"] .wm-nav span { flex: 1; min-width: 0; text-align: left; overflow: hidden; text-overflow: ellipsis; }
.wm[data-mzt="glossy"] .wm-nav:hover { background: rgba(255,255,255,.1); }
.wm[data-mzt="glossy"] .wm-nav.active { background: rgba(255,255,255,.18); box-shadow: inset 0 0 0 .5px rgba(255,255,255,.16), 0 1px 3px rgba(0,0,0,.25); font-weight: 600; }
.wm[data-mzt="glossy"] .wm-nav.active svg { color: rgb(var(--ap)); }
.wm[data-mzt="glossy"] .wm-nav small { margin-left: 0; color: var(--wm-faint); font-variant-numeric: tabular-nums; }

/* top bar: back / forward, where you are, search, and labelled shortcuts */
.wm[data-mzt="glossy"] .wm-top { grid-column: 2; grid-row: 1; padding: 0 2px; border: 0; background: none; box-shadow: none; gap: 10px; }
.wm[data-mzt="glossy"] .wm-orb { width: 38px; height: 38px; border: 0; color: #fff; background: var(--g-fill-hi); backdrop-filter: blur(22px) saturate(190%); -webkit-backdrop-filter: blur(22px) saturate(190%); box-shadow: var(--g-spec), 0 4px 14px rgba(0,0,0,.3); }
.wm[data-mzt="glossy"] .wm-orb::before { display: none; }
.wm[data-mzt="glossy"] .wm-orb:hover { filter: brightness(1.25); box-shadow: var(--g-spec), 0 4px 14px rgba(0,0,0,.3); }
.wm[data-mzt="glossy"] .wm-orb:active { filter: brightness(.8); transform: none; }
.wm[data-mzt="glossy"] .wm-home, .wm[data-mzt="glossy"] .wm-helpbtn, .wm[data-mzt="glossy"] .wm-themebtn { display: inline-flex; width: auto; padding: 0 16px 0 12px; gap: 8px; border-radius: 19px; }
.wm[data-mzt="glossy"] .wm-orb .lbl { display: inline; font-size: 13px; font-weight: 500; white-space: nowrap; }
.wm[data-mzt="glossy"] .wm-crumb { font-size: 14px; font-weight: 500; color: var(--wm-dim); text-shadow: none; letter-spacing: 0; }
.wm[data-mzt="glossy"] .wm-search { width: 270px; }
.wm[data-mzt="glossy"] .wm-search svg { color: var(--wm-faint); }
.wm[data-mzt="glossy"] .wm-search input { height: 38px; border: 0; border-radius: 19px; font: inherit; color: var(--wm-text); background: rgba(255,255,255,.12); box-shadow: inset 0 0 0 .5px rgba(255,255,255,.2);
  backdrop-filter: blur(22px) saturate(190%); -webkit-backdrop-filter: blur(22px) saturate(190%); }
.wm[data-mzt="glossy"] .wm-search input::placeholder { color: var(--wm-dim); }
.wm[data-mzt="glossy"] .wm-search input:focus { background: rgba(255,255,255,.16); box-shadow: inset 0 0 0 .5px rgba(255,255,255,.3), 0 0 0 3.5px rgba(var(--ap), .5); outline: none; }

/* content panel */
.wm[data-mzt="glossy"] .wm-view { grid-column: 2; grid-row: 2; border-radius: 22px; background: var(--g-solid); backdrop-filter: var(--g-blur); -webkit-backdrop-filter: var(--g-blur); box-shadow: var(--g-spec), var(--g-shadow); overflow: hidden; }
.wm[data-mzt="glossy"] .wm-bar { padding: 22px 26px 12px; gap: 10px; }
.wm[data-mzt="glossy"] .wm-bar h1 { font-size: 30px; font-weight: 700; letter-spacing: -.025em; text-shadow: none; }
.wm[data-mzt="glossy"] .wm-bar .sub { color: var(--wm-faint); font-size: 14px; }
.wm[data-mzt="glossy"] .wm-btn { height: 34px; padding: 0 17px; border: 0; border-radius: 17px; font-size: 14px; font-weight: 500; color: #fff; background: rgba(255,255,255,.14); box-shadow: var(--g-spec); }
.wm[data-mzt="glossy"] .wm-btn:first-of-type { background: rgb(var(--ap)); }
.wm[data-mzt="glossy"] .wm-btn:hover { filter: brightness(1.18); box-shadow: var(--g-spec); }
.wm[data-mzt="glossy"] .wm-btn:active { filter: none; background: rgba(255,255,255,.92); color: #1c1c1e; }
.wm[data-mzt="glossy"] .wm-content { padding-bottom: 18px; }
.wm[data-mzt="glossy"] .wm-empty { color: var(--wm-faint); }
.wm[data-mzt="glossy"] .wm-tip { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin: 0 26px 14px; padding: 14px 18px; border-radius: 16px; font-size: 14px; line-height: 1.45; background: rgba(255,255,255,.1); box-shadow: var(--g-spec); }
.wm[data-mzt="glossy"] .wm-tip div { flex: 1 1 280px; }

/* cover art */
.wm[data-mzt="glossy"] .wm-art { background: linear-gradient(135deg, hsl(var(--h, 230) 25% 30%), hsl(calc(var(--h, 230) + 40) 25% 16%)); color: rgba(255,255,255,.45); }
.wm[data-mzt="glossy"] .wm-art::after { display: none; }
.wm[data-mzt="glossy"] .wm-albums { gap: 24px 18px; padding: 8px 26px 24px; }
.wm[data-mzt="glossy"] .wm-tile .wm-art { border-radius: 10px; box-shadow: 0 8px 22px rgba(0,0,0,.5), 0 0 0 .5px rgba(255,255,255,.1); }
.wm[data-mzt="glossy"] .wm-tile:hover .wm-art { transform: translateY(-3px) scale(1.015); box-shadow: 0 14px 30px rgba(0,0,0,.55), 0 0 0 .5px rgba(255,255,255,.18); }
.wm[data-mzt="glossy"] .wm-tile b { font-size: 14px; font-weight: 600; margin-top: 9px; }
.wm[data-mzt="glossy"] .wm-tile small { color: var(--wm-dim); font-size: 13px; }
.wm[data-mzt="glossy"] .wm-head { padding: 6px 26px 18px; gap: 22px; }
.wm[data-mzt="glossy"] .wm-head .wm-art { width: 168px; height: 168px; border-radius: 12px; margin-bottom: 0; -webkit-box-reflect: none; box-shadow: 0 16px 38px rgba(0,0,0,.55), 0 0 0 .5px rgba(255,255,255,.12); }
.wm[data-mzt="glossy"] .wm-head .wm-art.round { border-radius: 50%; }
.wm[data-mzt="glossy"] .wm-head h2 { font-size: 30px; font-weight: 700; letter-spacing: -.028em; text-shadow: none; }
.wm[data-mzt="glossy"] .wm-head p { color: var(--wm-dim); font-size: 14px; }

/* song lists: obvious controls on every row */
.wm[data-mzt="glossy"] .wm-table { --cols: 46px 34px minmax(160px, 3fr) 64px minmax(90px, 2fr) minmax(90px, 2fr) minmax(70px, 1fr) 42px; }
.wm[data-mzt="glossy"] .wm-table.noalbum { --cols: 46px 34px minmax(160px, 3fr) 64px minmax(90px, 2fr) minmax(70px, 1fr) 42px; }
.wm[data-mzt="glossy"] .wm-hdr, .wm[data-mzt="glossy"] .wm-row { margin: 0 12px; padding: 0 12px; border-radius: 8px; }
.wm[data-mzt="glossy"] .wm-hdr { height: 32px; border: 0; border-radius: 0; border-bottom: .5px solid var(--g-hair); background: rgba(24,24,28,.88); backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px); box-shadow: none; color: var(--wm-faint); font-size: 12px; font-weight: 600; }
.wm[data-mzt="glossy"] .wm-hdr > span:hover, .wm[data-mzt="glossy"] .wm-hdr .sorted { color: #fff; }
.wm[data-mzt="glossy"] .wm-row { height: 38px; border: 0; contain-intrinsic-size: auto 38px; }
.wm[data-mzt="glossy"] .wm-row:nth-child(even) { background: rgba(255,255,255,.04); }
.wm[data-mzt="glossy"] .wm-row:hover { background: rgba(255,255,255,.09); }
.wm[data-mzt="glossy"] .wm-row.sel { background: rgba(var(--ap), .92); box-shadow: none; color: #fff; }
.wm[data-mzt="glossy"] .wm-row.sel .dim, .wm[data-mzt="glossy"] .wm-row.sel .len, .wm[data-mzt="glossy"] .wm-row.sel .num { color: rgba(255,255,255,.88); }
.wm[data-mzt="glossy"] .wm-row .dim { color: var(--wm-dim); }
.wm[data-mzt="glossy"] .wm-row .num, .wm[data-mzt="glossy"] .wm-row .len { color: var(--wm-faint); }
.wm[data-mzt="glossy"] .wm-row .num { position: relative; display: flex; align-items: center; justify-content: flex-end; padding-right: 6px; }
.wm[data-mzt="glossy"] .wm-row .num i { font-style: normal; }
.wm[data-mzt="glossy"] .wm-row .rp { position: absolute; inset: 0; display: none; align-items: center; justify-content: center; border: 0; background: none; color: #fff; border-radius: 6px; }
.wm[data-mzt="glossy"] .wm-row:hover .rp, .wm[data-mzt="glossy"] .wm-row.sel .rp, .wm[data-mzt="glossy"] .wm-row .rp:focus-visible { display: flex; }
.wm[data-mzt="glossy"] .wm-row:hover .num i, .wm[data-mzt="glossy"] .wm-row.sel .num i { visibility: hidden; }
.wm[data-mzt="glossy"] .wm-row .rp:hover { background: rgba(255,255,255,.2); }
.wm[data-mzt="glossy"] .wm-row .act { display: flex; justify-content: flex-end; }
.wm[data-mzt="glossy"] .wm-row .rm { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border: 0; border-radius: 8px; background: none; color: var(--wm-dim); opacity: 0; }
.wm[data-mzt="glossy"] .wm-row:hover .rm, .wm[data-mzt="glossy"] .wm-row.sel .rm, .wm[data-mzt="glossy"] .wm-row .rm:focus-visible { opacity: 1; }
.wm[data-mzt="glossy"] .wm-row.sel .rm { color: #fff; }
.wm[data-mzt="glossy"] .wm-row .rm:hover { background: rgba(255,255,255,.2); color: #fff; }
@media (hover: none) { .wm[data-mzt="glossy"] .wm-row .rm { opacity: 1; } .wm[data-mzt="glossy"] .wm-row .rp { display: none !important; } .wm[data-mzt="glossy"] .wm-row:hover .num i { visibility: visible; } }
.wm[data-mzt="glossy"] .wm-row.playing { color: rgb(var(--ap)); }
.wm[data-mzt="glossy"] .wm-row.sel.playing { color: #fff; }
.wm[data-mzt="glossy"] .wm-row .star { font-size: 16px; }
.wm[data-mzt="glossy"] .wm-row .star.on { color: rgb(var(--ap)); text-shadow: none; }
.wm[data-mzt="glossy"] .wm-row.sel .star.on { color: #fff; }
.wm[data-mzt="glossy"] .wm-row .star { opacity: .75; }
.wm[data-mzt="glossy"] .wm-row:hover .star, .wm[data-mzt="glossy"] .wm-row .star.on { opacity: 1; }
.wm[data-mzt="glossy"] .wm-row.playing .num { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23fa2d48'%3E%3Crect x='4' y='10' width='4' height='10'%3E%3Canimate attributeName='height' values='10;18;6;10' dur='.9s' repeatCount='indefinite'/%3E%3Canimate attributeName='y' values='10;2;14;10' dur='.9s' repeatCount='indefinite'/%3E%3C/rect%3E%3Crect x='10' y='4' width='4' height='16'%3E%3Canimate attributeName='height' values='16;6;18;16' dur='.7s' repeatCount='indefinite'/%3E%3Canimate attributeName='y' values='4;14;2;4' dur='.7s' repeatCount='indefinite'/%3E%3C/rect%3E%3Crect x='16' y='8' width='4' height='12'%3E%3Canimate attributeName='height' values='12;18;8;12' dur='.8s' repeatCount='indefinite'/%3E%3Canimate attributeName='y' values='8;2;12;8' dur='.8s' repeatCount='indefinite'/%3E%3C/rect%3E%3C/svg%3E"); background-position: right 6px center; }
.wm[data-mzt="glossy"] .wm-row.playing:hover .num { background-image: none; }
.wm.paused[data-mzt="glossy"] .wm-row.playing .num { background-image: none; color: rgb(var(--ap)); }

/* Now Playing page: the circular visualizer + queue */
/* the animated page does not need a live blur behind it: cheaper to draw on every machine */
.wm[data-mzt="glossy"][data-view="now"] .wm-view { backdrop-filter: none; -webkit-backdrop-filter: none; background: rgba(14,14,18,.9); }
.wm[data-mzt="glossy"] .wm-npv { gap: 10px; padding: 12px; }
.wm[data-mzt="glossy"] .wm-stage { border-radius: 16px; background: radial-gradient(70% 90% at 50% 100%, rgba(var(--ap), .16), transparent 70%), rgba(0,0,0,.4); box-shadow: inset 0 0 0 .5px rgba(255,255,255,.1); }
.wm[data-mzt="glossy"] .wm-stage::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(ellipse at 50% 45%, transparent 35%, rgba(0,0,0,.55) 100%); }
.wm[data-mzt="glossy"] .wm-stage canvas { z-index: 0; }
.wm[data-mzt="glossy"] .wm-stage .meta { z-index: 2; }
.wm[data-mzt="glossy"] .wm-stage .meta { left: 0; right: 0; top: auto; bottom: 22px; padding: 0 24px; text-align: center; }
.wm[data-mzt="glossy"] .wm-stage .meta b { font-size: 24px; font-weight: 700; letter-spacing: -.025em; }
.wm[data-mzt="glossy"] .wm-stage .meta span { display: block; margin-top: 3px; font-size: 15px; color: var(--wm-dim); }
.wm[data-mzt="glossy"] .wm-qlist { border: 0; border-radius: 16px; background: rgba(0,0,0,.28); box-shadow: inset 0 0 0 .5px rgba(255,255,255,.1); }
.wm[data-mzt="glossy"] .wm-qlist h3 { height: 36px; line-height: 36px; border: 0; border-bottom: .5px solid var(--g-hair); background: rgba(24,24,28,.88); backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px); box-shadow: none; font-weight: 600; font-size: 13px; }
.wm[data-mzt="glossy"] .wm-q { height: 44px; margin: 0 6px; border-radius: 8px; }
.wm[data-mzt="glossy"] .wm-q.playing { background: rgba(var(--ap), .9); color: #fff; }
.wm[data-mzt="glossy"] .wm-q .t small, .wm[data-mzt="glossy"] .wm-q .len, .wm[data-mzt="glossy"] .wm-q .num { color: var(--wm-faint); }
.wm[data-mzt="glossy"] .wm-q.playing .t small, .wm[data-mzt="glossy"] .wm-q.playing .len, .wm[data-mzt="glossy"] .wm-q.playing .num { color: rgba(255,255,255,.85); }

/* Now Playing bar: at the bottom, like most music apps */
.wm[data-mzt="glossy"] .wm-transport { grid-column: 1 / -1; grid-row: 3; display: grid; grid-template-columns: minmax(200px, 1fr) minmax(300px, 640px) minmax(200px, 1fr); align-items: center; gap: 20px; min-height: 88px; padding: 10px 22px; box-sizing: border-box;
  border: 0; border-radius: 22px; background: var(--g-fill); backdrop-filter: var(--g-blur); -webkit-backdrop-filter: var(--g-blur); box-shadow: var(--g-spec), var(--g-shadow); }
.wm[data-mzt="glossy"] .wm-now { gap: 14px; min-width: 0; cursor: pointer; }
.wm[data-mzt="glossy"] .wm-now-art { width: 58px; height: 58px; border-radius: 9px; box-shadow: 0 4px 14px rgba(0,0,0,.5), 0 0 0 .5px rgba(255,255,255,.14); }
.wm[data-mzt="glossy"] .wm-now-title { font-size: 15px; font-weight: 600; text-shadow: none; }
.wm[data-mzt="glossy"] .wm-now-artist { font-size: 13px; color: var(--wm-dim); }
.wm[data-mzt="glossy"] .wm-center { width: 100%; max-width: none; gap: 6px; }
.wm[data-mzt="glossy"] .wm-controls { gap: 8px; }
.wm[data-mzt="glossy"] .wm-seekrow { width: 100%; gap: 10px; font-size: 12px; color: var(--wm-dim); }
.wm[data-mzt="glossy"] .wm-seekrow span { width: 36px; }
.wm[data-mzt="glossy"] .wm-right { gap: 6px; }
.wm[data-mzt="glossy"] .wm-ctl, .wm[data-mzt="glossy"] .wm-play { border: 0; background: none; box-shadow: none; color: var(--wm-text); }
.wm[data-mzt="glossy"] .wm-ctl::before, .wm[data-mzt="glossy"] .wm-play::before { display: none; }
.wm[data-mzt="glossy"] .wm-ctl { width: 40px; height: 40px; }
.wm[data-mzt="glossy"] .wm-ctl:hover { filter: none; background: rgba(255,255,255,.14); box-shadow: none; }
.wm[data-mzt="glossy"] .wm-ctl:active { background: rgba(255,255,255,.24); filter: none; transform: none; }
.wm[data-mzt="glossy"] .wm-ctl.on { color: rgb(var(--ap)); box-shadow: none; }
.wm[data-mzt="glossy"] .wm-ctl[onclick="mzStop()"] { display: none; }
.wm[data-mzt="glossy"] .wm-play { width: 50px; height: 50px; margin: 0 6px; background: #fff; color: #111; box-shadow: 0 6px 18px rgba(0,0,0,.4); }
.wm[data-mzt="glossy"] .wm-play:hover { filter: none; background: #fff; transform: scale(1.06); box-shadow: 0 8px 22px rgba(0,0,0,.45); }
.wm[data-mzt="glossy"] .wm-play:active { transform: scale(.97); background: #e4e4e8; }
.wm[data-mzt="glossy"] .wm-play > svg { width: 24px; height: 24px; filter: none; }
.wm[data-mzt="glossy"] .wm-ctl-skip > svg { width: 21px; height: 21px; }
.wm[data-mzt="glossy"] input[type=range] { height: 5px; border: 0; border-radius: 3px; box-shadow: none;
  background: linear-gradient(#fff, #fff) 0 / var(--p, 0%) 100% no-repeat, rgba(255,255,255,.26); }
.wm[data-mzt="glossy"] input[type=range]::-webkit-slider-thumb { width: 12px; height: 12px; border: 0; background: #fff; box-shadow: 0 1px 4px rgba(0,0,0,.55); opacity: 0; transition: opacity .15s; }
.wm[data-mzt="glossy"] input[type=range]:hover::-webkit-slider-thumb, .wm[data-mzt="glossy"] input[type=range]:focus-visible::-webkit-slider-thumb { opacity: 1; }
.wm[data-mzt="glossy"] input[type=range]::-moz-range-thumb { width: 12px; height: 12px; border: 0; background: #fff; }
.wm[data-mzt="glossy"] .wm-right input[type=range] { flex: 0 0 96px; }

/* help panel */
.wm[data-mzt="glossy"] .wm-help { position: absolute; top: calc(var(--safe-top) * .5 + 60px); right: 18px; z-index: 40; width: min(440px, calc(100% - 36px)); max-height: calc(100% - 130px); overflow-y: auto; padding: 16px 20px 18px; border-radius: 20px; color: var(--wm-text);
  background: rgba(40,40,46,.84); backdrop-filter: blur(40px) saturate(200%); -webkit-backdrop-filter: blur(40px) saturate(200%); box-shadow: inset 0 0 0 .5px rgba(255,255,255,.2), 0 24px 60px rgba(0,0,0,.6); font-size: 14px; }
.wm[data-mzt="glossy"] .wm-help-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; font-size: 16px; }
.wm[data-mzt="glossy"] .wm-help-head button { width: 30px; height: 30px; border: 0; border-radius: 50%; background: rgba(255,255,255,.12); color: #fff; }
.wm[data-mzt="glossy"] .wm-help ul { list-style: none; display: flex; flex-direction: column; gap: 14px; }
.wm[data-mzt="glossy"] .wm-help li b { display: block; margin-bottom: 2px; font-size: 14px; }
.wm[data-mzt="glossy"] .wm-help li span { display: block; color: var(--wm-dim); line-height: 1.5; }
.wm[data-mzt="glossy"] .wm-help code { display: block; margin-top: 6px; padding: 8px 10px; border-radius: 8px; font: 12px ui-monospace, 'SF Mono', Menlo, monospace; color: #fff; background: rgba(0,0,0,.35); word-break: break-all; user-select: all; -webkit-user-select: all; }
.wm[data-mzt="glossy"] .wm-help li span code + code { display: inline; padding: 1px 6px; }
.wm[data-mzt="glossy"] .wm-help kbd { display: inline-block; min-width: 20px; padding: 1px 6px; border-radius: 6px; text-align: center; font: inherit; font-size: 12px; color: #fff; background: rgba(255,255,255,.16); box-shadow: inset 0 -1px 0 rgba(0,0,0,.35); }

/* menus, toasts, handles */
.wm[data-mzt="glossy"] .wm-menu { min-width: 220px; padding: 5px; border: 0; border-radius: 12px; color: var(--wm-text); font-size: 14px;
  background: rgba(46,46,52,.74); backdrop-filter: blur(40px) saturate(200%); -webkit-backdrop-filter: blur(40px) saturate(200%); box-shadow: inset 0 0 0 .5px rgba(255,255,255,.2), 0 18px 44px rgba(0,0,0,.55); }
.wm[data-mzt="glossy"] .wm-menu button { height: 34px; padding: 0 12px; border-radius: 8px; color: var(--wm-text); }
.wm[data-mzt="glossy"] .wm-menu button:hover { background: rgb(var(--ap)); box-shadow: none; color: #fff; }
.wm[data-mzt="glossy"] .wm-menu button:hover small { color: rgba(255,255,255,.85); }
.wm[data-mzt="glossy"] .wm-menu hr { border-top-color: rgba(255,255,255,.14); margin: 5px 4px; }
.wm[data-mzt="glossy"] .wm-menu-h { padding: 6px 12px 4px; font-size: 12px; letter-spacing: 0; text-transform: none; font-weight: 600; color: var(--wm-faint); }
.wm[data-mzt="glossy"] .wm-menu .dot-on { color: rgb(var(--ap)); }
.wm-toast[data-mzt="glossy"] { background: rgba(50,50,56,.74); backdrop-filter: blur(30px) saturate(190%); -webkit-backdrop-filter: blur(30px) saturate(190%); border: 0; border-radius: 18px; color: #fff; padding: 10px 20px; font-family: -apple-system, 'SF Pro Text', 'Inter', system-ui, sans-serif; font-size: 14px; font-weight: 500;
  box-shadow: inset 0 0 0 .5px rgba(255,255,255,.2), 0 12px 30px rgba(0,0,0,.5); }
.wm[data-mzt="glossy"] .wm-split { grid-column: 1; grid-row: 1 / 3; z-index: 8; width: 10px; margin-right: -10px; }
.wm[data-mzt="glossy"] .wm-split::after { left: 4px; }
.wm[data-mzt="glossy"] .wm-split:hover::after, .wm[data-mzt="glossy"] .wm-split.drag::after { left: 4px; width: 2px; background: rgba(var(--ap), .85); }
.wm[data-mzt="glossy"] .wm-split.q { grid-column: auto; grid-row: auto; width: 10px; margin: 0; right: calc(var(--wm-q-w, 290px) - 1px); top: 0; bottom: 12px; }
.wm[data-mzt="glossy"] .wm-remote { position: absolute; right: 24px; bottom: 104px; z-index: 12; grid-column: auto; grid-row: auto; padding: 6px 14px; border-radius: 16px; font-size: 13px; font-weight: 500; color: #fff;
  background: rgba(var(--ap), .88); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); text-shadow: none; box-shadow: 0 8px 22px rgba(0,0,0,.4), inset 0 1px 0 rgba(255,255,255,.3); }
.wm[data-mzt="glossy"] .wm-remote::before { content: "◉"; margin-right: 6px; font-size: 10px; }

/* sidebar hidden (yellow window button) */
.wm.side-hidden[data-mzt="glossy"] { grid-template-columns: minmax(0, 1fr); }
.wm.side-hidden[data-mzt="glossy"] .wm-side, .wm.side-hidden[data-mzt="glossy"] .wm-split:not(.q) { display: none; }
.wm.side-hidden[data-mzt="glossy"] .wm-top, .wm.side-hidden[data-mzt="glossy"] .wm-view { grid-column: 1; }
.wm.side-hidden[data-mzt="glossy"] .wm-top { padding-left: 86px; }

/* respect "reduce transparency" */
@media (prefers-reduced-transparency: reduce) {
  .wm[data-mzt="glossy"] { --g-fill: #26262b; --g-fill-hi: #303036; --g-solid: #1a1a1e; }
  .wm[data-mzt="glossy"] *, .wm[data-mzt="glossy"]::before { backdrop-filter: none !important; -webkit-backdrop-filter: none !important; }
  .wm[data-mzt="glossy"]::before { display: none; }
}

/* medium screens: icon-only shortcuts */
@media (max-width: 1180px) {
  .wm[data-mzt="glossy"] .wm-orb .lbl { display: none; }
  .wm[data-mzt="glossy"] .wm-home, .wm[data-mzt="glossy"] .wm-helpbtn, .wm[data-mzt="glossy"] .wm-themebtn { width: 38px; padding: 0; }
}

/* narrow screens */
@media (max-width: 760px) {
  .wm[data-mzt="glossy"] { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto auto minmax(0, 1fr) auto; padding: calc(var(--safe-top) * .5) 6px 6px; gap: 6px; }
  .wm[data-mzt="glossy"] .wm-top { grid-column: 1; grid-row: 1; flex-wrap: nowrap; gap: 6px; }
  .wm[data-mzt="glossy"] .wm-orb, .wm[data-mzt="glossy"] .wm-home, .wm[data-mzt="glossy"] .wm-helpbtn, .wm[data-mzt="glossy"] .wm-themebtn { width: 36px; height: 36px; padding: 0; flex-shrink: 0; }
  .wm[data-mzt="glossy"] .wm-search input { height: 36px; }
  .wm[data-mzt="glossy"] .wm-side { grid-column: 1; grid-row: 2; display: flex; gap: 4px; padding: 6px; border-radius: 16px; overflow-x: auto; overflow-y: hidden; }
  .wm[data-mzt="glossy"] .wm-side h6 { display: none; }
  .wm[data-mzt="glossy"] .wm-nav { width: auto; flex-shrink: 0; }
  .wm[data-mzt="glossy"] .wm-view { grid-column: 1; grid-row: 3; border-radius: 16px; }
  .wm[data-mzt="glossy"] .wm-transport { grid-column: 1; grid-row: 4; grid-template-columns: minmax(0, 1fr) auto; min-height: 0; padding: 8px 12px; gap: 8px; }
  .wm[data-mzt="glossy"] .wm-now-art { width: 44px; height: 44px; }
  .wm[data-mzt="glossy"] .wm-center { display: contents; }
  .wm[data-mzt="glossy"] .wm-controls { grid-column: 2; grid-row: 1; }
  .wm[data-mzt="glossy"] .wm-seekrow { grid-column: 1 / -1; grid-row: 2; }
  .wm[data-mzt="glossy"] .wm-right, .wm[data-mzt="glossy"] .mac-lights, .wm[data-mzt="glossy"] .wm-split { display: none; }
  .wm[data-mzt="glossy"] .wm-ctl:not(.wm-ctl-skip):not(#wm-shuffle) { display: none; }
  .wm[data-mzt="glossy"] .wm-crumb { display: none; }
  .wm[data-mzt="glossy"] .wm-search { flex: 1 1 80px; min-width: 0; width: auto; }
  .wm[data-mzt="glossy"] .wm-bar { padding: 14px 16px 8px; }
  .wm[data-mzt="glossy"] .wm-tip { margin: 0 12px 12px; }
  .wm[data-mzt="glossy"] .wm-albums { padding: 6px 16px 20px; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); }
  .wm[data-mzt="glossy"] .wm-table, .wm[data-mzt="glossy"] .wm-table.noalbum { --cols: 34px 30px minmax(0, 3fr) 48px minmax(0, 2fr) 40px; }
  .wm[data-mzt="glossy"] .wm-remote { bottom: 90px; right: 12px; }
}

/* ═══ MUSIC - Spotify on a phone (≤760px): tab bar, mini player → full-screen player, scrolling shelves ═══ */
.sp-mtop, .sp-mback, .sp-np, .sp-q { display: none; }
@media (max-width: 760px) {
  .wm[data-mzt="spotify"] { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); padding: 0; column-gap: 0; --sp-mini: #3a3a3a; }
  .wm[data-mzt="spotify"] .wm-side, .wm[data-mzt="spotify"] .wm-split { display: none; }
  .wm[data-mzt="spotify"] .wm-view { grid-column: 1; grid-row: 2; border-radius: 0; }
  .wm[data-mzt="spotify"] .wm-content { padding-bottom: calc(150px + var(--safe-bottom)); }
  /* only the Search page needs the top bar (it holds the search field) */
  .wm[data-mzt="spotify"] .wm-top { display: none; grid-column: 1; grid-row: 1; padding: calc(var(--safe-top) * .5 + 6px) 12px 8px; background: #121212; }
  .wm[data-mzt="spotify"][data-view="search"] .wm-top { display: flex; }
  .wm[data-mzt="spotify"] .wm-navbtns, .wm[data-mzt="spotify"] .sp-homebtn, .wm[data-mzt="spotify"] .sp-avatar { display: none; }
  .wm[data-mzt="spotify"] .wm-topc { flex: 1; justify-self: stretch; }
  .wm[data-mzt="spotify"] .wm-search { flex: 1; width: auto; }
  .wm[data-mzt="spotify"] .wm-search input { height: 44px; font-size: 16px; }

  /* bottom tab bar */
  .wm[data-mzt="spotify"] .sp-tabbar { display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 60; height: calc(58px + var(--safe-bottom)); padding: 8px 0 var(--safe-bottom); box-sizing: border-box;
    background: linear-gradient(rgba(0,0,0,0), rgba(0,0,0,.94) 30%, #000); }
  .wm[data-mzt="spotify"] .sp-tabbar button { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 3px; border: 0; background: none; color: #b3b3b3; font: inherit; font-size: 10px; font-weight: 500; }
  .wm[data-mzt="spotify"] .sp-tabbar button.on { color: #fff; }

  /* mini player */
  .wm[data-mzt="spotify"] .wm-transport { position: fixed; left: 8px; right: 8px; bottom: calc(60px + var(--safe-bottom)); z-index: 55; height: 56px; padding: 8px; display: flex; align-items: center; gap: 0; box-sizing: border-box;
    border-radius: 8px; background: var(--sp-mini); box-shadow: 0 6px 20px rgba(0,0,0,.5); transition: background .4s; }
  .wm[data-mzt="spotify"] .wm-now { flex: 1; min-width: 0; gap: 10px; cursor: pointer; }
  .wm[data-mzt="spotify"] .wm-now-art { width: 40px; height: 40px; border-radius: 4px; }
  .wm[data-mzt="spotify"] .wm-now-title { font-size: 14px; font-weight: 700; }
  .wm[data-mzt="spotify"] .wm-now-text { flex: 1; min-width: 0; }
  .wm[data-mzt="spotify"] .wm-now-artist { font-size: 12px; }
  .wm[data-mzt="spotify"] .sp-heart { width: 36px; height: 36px; }
  .wm[data-mzt="spotify"] .wm-center { width: auto; max-width: none; margin: 0; }
  .wm[data-mzt="spotify"] .wm-seekrow, .wm[data-mzt="spotify"] .wm-right { display: none; }
  #music-screen .wm[data-mzt="spotify"] .wm-ctl { display: none; }
  .wm[data-mzt="spotify"] .wm-play { width: 40px; height: 40px; background: none; color: #fff; }
  .wm[data-mzt="spotify"] .wm-play > svg { width: 24px; height: 24px; }
  .wm[data-mzt="spotify"] .sp-minifill { display: block; position: absolute; left: 8px; right: 8px; bottom: 2px; height: 2px; border-radius: 1px; background: rgba(255,255,255,.25); }
  .wm[data-mzt="spotify"] .sp-minifill i { display: block; height: 100%; width: 0; border-radius: 1px; background: #fff; }
  .wm[data-mzt="spotify"] .wm-remote { position: fixed; left: 50%; right: auto; transform: translateX(-50%); bottom: calc(120px + var(--safe-bottom)); width: max-content; max-width: 90vw; padding: 3px 12px; text-align: center; background: rgba(0,0,0,.7); border-radius: 12px; z-index: 54; font-size: 11px; }


  /* pages */
  .sp-pbody { padding: 0 16px 24px; }
  .sp-mtop { display: flex; align-items: center; gap: 12px; padding: calc(var(--safe-top) * .5 + 8px) 0 2px; }
  .sp-mavatar { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; width: 34px; height: 34px; border-radius: 50%; border: 0; background: #f573a0; color: #000; font: inherit; font-weight: 800; font-size: 14px; }
  .sp-mtop .sp-gridtitle { padding: 0; }
  .sp-greet, .sp-gridtitle { font-size: 26px; padding: 4px 0 12px; }
  .sp-quicks { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .sp-quick { height: 56px; padding-right: 6px; }
  .sp-quick .wm-art { width: 56px; height: 56px; }
  .sp-quick b { font-size: 13px; white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
  .sp-quick .sp-cardplay, .sp-cardplay { display: none; }
  .sp-shelf-h h2 { font-size: 20px; }
  .sp-cards { display: flex; gap: 12px; overflow-x: auto; overflow-y: hidden; margin: 0 -16px; padding: 4px 16px 0; scroll-snap-type: x proximity; scroll-padding: 0 16px; scrollbar-width: none; }
  .sp-cards::-webkit-scrollbar { display: none; }
  .sp-cardx { flex: 0 0 142px; padding: 0; scroll-snap-align: start; }
  .sp-cardx:hover { background: none; }
  .sp-ct { font-size: 14px; margin-top: 8px; } .sp-cs { font-size: 12px; }
  .sp-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 12px; margin: 0; }
  .sp-grid .sp-cardx { flex: initial; }
  .sp-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .sp-tile { aspect-ratio: 1.9; padding: 12px; border-radius: 6px; } .sp-tile b { font-size: 17px; }
  .sp-browse { padding-top: calc(var(--safe-top) * .1 + 4px); }
  .sp-sr { grid-template-columns: minmax(0, 1fr); gap: 16px; }

  .sp-mback { display: inline-flex; align-items: center; justify-content: center; position: absolute; top: calc(var(--safe-top) * .5 + 8px); left: 12px; z-index: 6; width: 36px; height: 36px; border: 0; border-radius: 50%; background: rgba(0,0,0,.45); color: #fff; }
  .sp-pbody > .sp-mback { position: relative; top: auto; left: auto; margin: calc(var(--safe-top) * .5 + 8px) 0 4px -4px; background: none; }
  .sp-phead { flex-direction: column; align-items: stretch; gap: 16px; padding: calc(var(--safe-top) * .5 + 56px) 16px 8px; }
  .sp-pcover { align-self: center; }
  .sp-pcover .wm-art { width: min(62vw, 260px); height: min(62vw, 260px); font-size: 3rem; }
  .sp-ptext h1 { font-size: clamp(24px, 8vw, 34px) !important; }
  .sp-ahead { min-height: 300px; padding: 16px; }
  .sp-ahead .sp-mback { top: calc(var(--safe-top) * .5 + 8px); }
  .sp-ahead .sp-ptext h1 { font-size: clamp(34px, 12vw, 52px) !important; }
  .sp-actions { padding: 12px 0; gap: 24px; }
  /* the album page, like the Spotify app: small left-aligned title, artist avatars, "Album • year", actions on the right */
  .sp-albumpage .sp-phead { padding-top: calc(var(--safe-top) + 19px); gap: 22px; }
  .sp-albumpage .sp-pcover .wm-art { width: min(60vw, 248px); height: min(60vw, 248px); box-shadow: 0 8px 40px rgba(0,0,0,.5); }
  .sp-albumpage .sp-kind, .sp-albumpage .sp-mcount { display: none; }
  .sp-albumpage .sp-meta { display: block; }
  .sp-albumpage { background: linear-gradient(var(--tint, #333) 0, #121212 640px) #121212; }      /* one long fade, no seam where the header ends */
  .sp-albumpage .sp-pbody::before { display: none; }
  .sp-albumpage .sp-ptext h1 { font-size: 26px !important; margin: 4px 0 8px; -webkit-line-clamp: 3; }
  .sp-albumpage .sp-mby { font-size: 14px; display: flex; align-items: center; flex-wrap: wrap; row-gap: 2px; }
  .sp-albumpage .sp-mby .lnk { font-weight: 700; color: #fff; }
  .sp-albumpage .sp-mby .dot { margin: 0 4px; }
  .sp-albumpage .sp-asub { display: flex; align-items: center; margin-top: 10px; font-size: 14px; color: #b3b3b3; }
  .sp-albumpage .sp-asub .dot { margin: 0 6px; }
  .sp-albumpage .sp-mback, .sp-albumpage .sp-mmore { top: calc(var(--safe-top) + 8px); width: 40px; height: 40px; background: rgba(0,0,0,.45); }
  .sp-mmore { display: inline-flex; align-items: center; justify-content: center; position: absolute; top: calc(var(--safe-top) + 8px); right: 12px; z-index: 6; width: 40px; height: 40px; border: 0; border-radius: 50%; background: rgba(0,0,0,.45); color: #fff; }
  .sp-albumpage .sp-actions { flex-direction: row-reverse; justify-content: flex-start; gap: 20px; padding: 8px 0 4px; }
  .sp-albumpage .sp-actions .sp-shufbtn svg { width: 28px; height: 28px; }
  .sp-albumpage .sp-bigplay { width: 48px; height: 48px; }
  .sp-albumpage .sp-actions { justify-content: flex-start; }
  .sp-row .more svg { transform: rotate(90deg); }                                  /* rows use vertical dots */
  .sp-row .sp-lk { display: inline-flex; margin-right: 6px; }                    /* a green tick on liked songs */
  .sp-albumpage .sp-row { height: 64px; }
  .sp-albumpage .sp-row .tt b { font-size: 17px; }
  .sp-albumpage .sp-row .tt small { display: flex; align-items: center; font-size: 14px; }
  .sp-bigplay { width: 52px; height: 52px; }

  /* track rows: cover + title on the left, a "⋯" menu on the right */
  .sp-tbl, .sp-tbl.alb, .sp-tbl.alb.dt, .sp-tbl.pl { --cols: minmax(0, 1fr) auto; }
  .sp-th, .sp-row .c0, .sp-row .c-alb, .sp-row .c-date, .sp-row .c-plays, .sp-row .star, .sp-row time { display: none; }
  .sp-row { height: 60px; padding: 0 2px; column-gap: 8px; }
  .sp-art.sm { width: 48px; height: 48px; }
  .sp-row .tt b { font-size: 16px; } .sp-row .tt small { font-size: 13px; }
  .sp-row .more { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; color: #b3b3b3; }
  .sp-row .c-end { gap: 0; }
  .sp-row.pr { background: rgba(255,255,255,.12); }

  /* library tab */
  .sp-libpage .sp-lib-list { padding: 0; overflow: visible; }
  .sp-libpage .sp-chips { padding: 4px 0 8px; }
  .sp-libpage .sp-lib-tools { padding: 0 0 4px; justify-content: flex-start; }
  .sp-li { padding: 8px 0; } .sp-li .wm-art { width: 56px; height: 56px; }

  /* menus become bottom sheets */
  .wm[data-mzt="spotify"] .wm-menu { left: 0 !important; right: 0; top: auto !important; bottom: 0; width: 100%; min-width: 0; z-index: 300; padding: 10px 8px calc(10px + var(--safe-bottom)); border-radius: 16px 16px 0 0; background: #282828; box-shadow: 0 -12px 40px rgba(0,0,0,.6); }
  .wm[data-mzt="spotify"] .wm-menu button { height: 52px; font-size: 16px; padding: 0 16px; }
  .wm[data-mzt="spotify"] .wm-menu-h { font-size: 13px; padding: 8px 16px; }
  .wm-toast[data-mzt="spotify"] { bottom: 140px; }
  /* full-screen player = a sheet driven by drag gestures (see music-spotify.js) */
  .wm[data-mzt="spotify"] .sp-np { display: flex; flex-direction: column; position: fixed; inset: 0; z-index: 200; box-sizing: border-box; color: #fff;
    transform: translate3d(0, 100%, 0); visibility: hidden; will-change: transform; touch-action: pan-y; overscroll-behavior-y: contain; -webkit-user-select: none; user-select: none;
    padding: 0; background: #121212; }
  /* the player scrolls: the first screen is the player as before (tinted), the cards come after it */
  .sp-np-scroll { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior-y: contain; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
  .sp-np-scroll::-webkit-scrollbar { display: none; }
  .sp-np-main { min-height: calc(100% - 64px); box-sizing: border-box; display: flex; flex-direction: column;
    padding: calc(var(--safe-top) - 5px) 21px 12px; background: linear-gradient(var(--sp-mini) 0%, #121212 82%); }
  .sp-np-cards { display: flex; flex-direction: column; gap: 16px; padding: 4px 16px calc(var(--safe-bottom) + 28px); }
  .sp-npc { background: #282828; border-radius: 8px; overflow: hidden; }
  .sp-aimgwrap { position: relative; height: 254px; background: #333; cursor: pointer; }
  .sp-aimgwrap img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 22%; display: block; }
  .sp-aimgwrap::after { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 96px; background: linear-gradient(rgba(0,0,0,.6), transparent); pointer-events: none; }
  .sp-aboutlabel { position: absolute; left: 16px; top: 14px; z-index: 1; font-size: 18px; font-weight: 800; color: #fff; }
  .sp-abody { padding: 16px; }
  .sp-arow { display: flex; align-items: center; gap: 12px; }
  .sp-aname { flex: 1; min-width: 0; }
  .sp-aname b { display: block; font-size: 22px; font-weight: 800; letter-spacing: -.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .sp-aname small { display: block; margin-top: 2px; font-size: 14px; color: #b3b3b3; }
  .sp-abio { margin: 14px 0 0; color: #b3b3b3; font-size: 15px; line-height: 1.45; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
  .sp-abio:empty { display: none; }
  .sp-credits { padding: 18px 20px 8px; }
  .sp-credits-h { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 6px; }
  .sp-credits-h b { font-size: 20px; font-weight: 800; }
  .sp-credits-h a { color: var(--sp-green); font-size: 15px; font-weight: 700; cursor: pointer; }
  .sp-crow { display: flex; align-items: center; gap: 12px; min-height: 64px; padding: 8px 0; }
  .sp-crow .sp-ct { flex: 1; min-width: 0; }
  .sp-crow .sp-ct b { display: block; font-size: 17px; font-weight: 400; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .sp-crow .sp-ct small { display: block; margin-top: 2px; font-size: 14px; color: #b3b3b3; }
  .sp-crow .sp-ct b.link { cursor: pointer; }
  .wm[data-mzt="spotify"] .wm-transport { touch-action: none; }
  @keyframes sp-v-fwd { from { transform: translate3d(36%, 0, 0); opacity: 0; } }
  @keyframes sp-v-back { from { transform: translate3d(-18%, 0, 0); opacity: .4; } }
  .wm[data-mzt="spotify"] .wm-content.sp-v-fwd { animation: sp-v-fwd .3s cubic-bezier(.22, .9, .28, 1) backwards; }
  .wm[data-mzt="spotify"] .wm-content.sp-v-back { animation: sp-v-back .28s cubic-bezier(.22, .9, .28, 1) backwards; }
  /* queue sheet: slides up over the player (swipe up on the player, swipe down on its header to leave) */
  .wm[data-mzt="spotify"] .sp-q { display: flex; flex-direction: column; position: fixed; left: 0; right: 0; bottom: 0; top: calc(var(--safe-top) + 10px); z-index: 210; box-sizing: border-box; color: #fff;
    background: #121212; border-radius: 14px 14px 0 0; box-shadow: 0 -8px 30px rgba(0,0,0,.6); transform: translate3d(0, 100%, 0); visibility: hidden; will-change: transform; overscroll-behavior-y: contain; }
  .sp-q-head { flex-shrink: 0; padding: 8px 12px 0; touch-action: none; -webkit-user-select: none; user-select: none; }
  .sp-q-bar { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
  .sp-q-bar b { font-size: 16px; font-weight: 800; }
  .sp-q-list { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior-y: contain; padding: 0 12px calc(var(--safe-bottom) + 16px); }
  .sp-q-list h3 { margin: 14px 4px 6px; font-size: 14px; font-weight: 700; color: #b3b3b3; }
  .sp-q-empty { padding: 40px 16px; text-align: center; color: #b3b3b3; }
  .sp-qi { position: relative; overflow: hidden; border-radius: 6px; }
  .sp-qi-del { position: absolute; inset: 0; display: flex; align-items: center; justify-content: flex-start; padding-left: 20px; background: #e22134; color: #fff; font-weight: 700; font-size: 14px; }
  .sp-qi-row { position: relative; display: flex; align-items: center; gap: 12px; height: 60px; padding: 0 6px; background: #121212; touch-action: pan-y; cursor: pointer; }
  .sp-qi-row.playing .tt b { color: var(--sp-green); }
  .sp-qi-row .wm-art { width: 44px; height: 44px; flex-shrink: 0; border-radius: 4px; }
  .sp-qi-row .tt { flex: 1; min-width: 0; }
  .sp-qi-row .tt b { display: block; font-size: 15px; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .sp-qi-row .tt small { display: block; font-size: 13px; color: #b3b3b3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .sp-qi-row time { font-size: 12px; color: #a7a7a7; font-variant-numeric: tabular-nums; }
  .sp-np-grab { width: 38px; height: 4px; border-radius: 2px; background: rgba(255,255,255,.32); margin: 0 auto 2px; flex-shrink: 0; }
  .sp-np-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-shrink: 0; }
  .sp-np-btn { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border: 0; background: none; color: #fff; }
  .sp-np-from { flex: 1; min-width: 0; text-align: center; }
  .sp-np-from small { display: block; font-size: 13px; font-weight: 400; color: rgba(255,255,255,.85); }
  .sp-np-from b { display: block; font-size: 16px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .sp-np-artwrap { flex: 0 0 auto; display: flex; align-items: flex-start; justify-content: center; padding: clamp(30px, calc(14.14dvh - 60px), 58px) 0 0; }   /* 43px on a tall phone, shrinking to 15px on a short one so it never reaches the title; the space under the controls is kept free for lyrics later */
  .sp-np-art { width: min(100%, 44dvh); aspect-ratio: 1; border-radius: 8px; box-shadow: 0 16px 48px rgba(0,0,0,.55); overflow: hidden; }
  .sp-np-art .wm-art { width: 100%; height: 100%; border-radius: 8px; font-size: 4rem; }
  .sp-np-meta { margin-top: auto; display: flex; align-items: center; gap: 12px; flex-shrink: 0; }
  .sp-np-text { flex: 1; min-width: 0; }
  .sp-np-text b { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-size: 22px; font-weight: 800; line-height: 1.2; }
  .sp-np-text span { display: block; margin-top: 0; font-size: 16px; color: #b3b3b3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .sp-np-text span a { color: inherit; cursor: pointer; -webkit-tap-highlight-color: transparent; }
  .sp-np-text span a:active { color: #fff; text-decoration: underline; }
  .sp-np-heart { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border: 0; background: none; color: #fff; flex-shrink: 0; }
  .sp-np-heart svg { width: 26px; height: 26px; }
  .sp-np-heart.on { color: var(--sp-green); }
  .sp-np-seek { margin-top: 16px; flex-shrink: 0; }
  .sp-np-seek input[type=range] { display: block; width: 100%; }
  .wm[data-mzt="spotify"] .sp-np-seek input[type=range] { height: 4px; }
  .wm[data-mzt="spotify"] .sp-np-seek input[type=range]::-webkit-slider-thumb { opacity: 1; width: 13px; height: 13px; }
  .wm[data-mzt="spotify"] .sp-np-seek input[type=range]::-moz-range-thumb { width: 13px; height: 13px; }
  .sp-np > .sp-np-grab { display: none; }
  .sp-np-heart.on svg { filter: none; }
  .sp-np-times { display: flex; justify-content: space-between; margin-top: 10px; font-size: 11px; color: #a7a7a7; font-variant-numeric: tabular-nums; }
  .sp-np-ctl { display: flex; align-items: center; justify-content: space-between; margin-top: 10px; flex-shrink: 0; }
  .sp-np-ctl button { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 52px; height: 52px; border: 0; background: none; color: #fff; }
  .sp-np-ctl button svg { width: 28px; height: 28px; }
  .sp-np-ctl button:active { transform: scale(.92); }
  .sp-np-ctl button.on { color: var(--sp-green); }
  .sp-np-ctl button.on::after { content: ""; position: absolute; bottom: 4px; left: 50%; width: 4px; height: 4px; margin-left: -2px; border-radius: 50%; background: var(--sp-green); }
  .sp-np-ctl .play { width: 64px; height: 64px; border-radius: 50%; background: #fff; color: #000; }
  .sp-np-ctl .play svg { width: 30px; height: 30px; }
  .sp-np-foot { display: flex; align-items: center; justify-content: space-between; margin-top: 10px; margin-bottom: 0; flex-shrink: 0; }
  .sp-np-foot button { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border: 0; background: none; color: #b3b3b3; }
  .sp-np-foot button.on { color: var(--sp-green); }
  #sp-np-remote { font-size: 12px; font-weight: 600; color: var(--sp-green); }

  .sp-np img, .wm-now-art img { pointer-events: none; -webkit-user-drag: none; user-select: none; }
}

/* ═══ MUSIC - Spotify desktop: clickable now-playing text + the expandable album cover ═══ */
.wm[data-mzt="spotify"] .wm-now-title a, .wm[data-mzt="spotify"] .wm-now-artist a { color: inherit; cursor: pointer; }
.wm[data-mzt="spotify"] .wm-now-title a:hover, .wm[data-mzt="spotify"] .wm-now-artist a:hover { text-decoration: underline; color: #fff; }
@media (min-width: 761px) {
  .wm[data-mzt="spotify"] .wm-now { position: relative; cursor: default; }
  .wm[data-mzt="spotify"] .sp-expand { display: inline-flex; position: absolute; left: 36px; top: 4px; width: 22px; height: 22px; align-items: center; justify-content: center; border: 0; border-radius: 4px;
    background: rgba(0,0,0,.72); color: #fff; opacity: 0; cursor: pointer; transition: opacity .15s; z-index: 2; }
  .wm[data-mzt="spotify"] .wm-now:hover .sp-expand, .wm[data-mzt="spotify"] .sp-expand:focus-visible { opacity: 1; }
  .wm[data-mzt="spotify"] .sp-expand:hover { background: #000; transform: scale(1.08); }
  /* expanded cover (classic Spotify): a floating overlay on the bottom of the sidebar, never part of its layout, so nothing is squeezed */
  .wm[data-mzt="spotify"] .wm-side { position: relative; }
  .wm[data-mzt="spotify"] .sp-cp { display: block; position: absolute; left: 0; right: 0; bottom: 0; z-index: 5; aspect-ratio: 1; border-radius: 8px; overflow: hidden; background: #181818; box-shadow: 0 -8px 32px rgba(0,0,0,.65);
    opacity: 0; visibility: hidden; pointer-events: none; transform: translateY(16px) scale(.96); transform-origin: bottom left;
    transition: transform .3s ease-in-out, opacity .3s ease-in-out, visibility 0s linear .3s; }
  .wm[data-mzt="spotify"].cover-open .sp-cp { opacity: 1; visibility: visible; pointer-events: auto; transform: none; transition-delay: 0s; }
  @media (prefers-reduced-motion: reduce) { .wm[data-mzt="spotify"] .sp-cp { transition: none; } }
  .wm[data-mzt="spotify"] .sp-cp-art { width: 100%; height: 100%; }
  .wm[data-mzt="spotify"] .sp-cp-link { width: 100%; height: 100%; cursor: pointer; }
  .wm[data-mzt="spotify"] .sp-cp .wm-art { width: 100%; height: 100%; border-radius: 0; font-size: 5rem; }
  .wm[data-mzt="spotify"] .sp-cp-close { position: absolute; top: 8px; right: 8px; z-index: 3; display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border: 0; border-radius: 6px;
    background: rgba(0,0,0,.7); color: #fff; opacity: 0; cursor: pointer; transition: opacity .15s; }
  .wm[data-mzt="spotify"] .sp-cp:hover .sp-cp-close, .wm[data-mzt="spotify"] .sp-cp-close:focus-visible { opacity: 1; }
  .wm[data-mzt="spotify"] .sp-cp-close:hover { background: #000; transform: scale(1.08); }
  .wm[data-mzt="spotify"].cover-open:not(.side-collapsed) .wm-now-art, .wm[data-mzt="spotify"].cover-open:not(.side-collapsed) .sp-expand { display: none; }
  .wm[data-mzt="spotify"].cover-open.side-collapsed .sp-cp { display: none; }
  .wm[data-mzt="spotify"].cover-open .wm-now { gap: 0; }
  .wm[data-mzt="spotify"].cover-open:not(.side-collapsed) .wm-now-text { margin-left: 2px; }
}

/* ═══ MUSIC - Spotify, phone: green #1db954 and a white search pill; desktop (first Spotify look): flat full-height black sidebar with icon nav, edge-to-edge panels, grey player bar, outlined play button ═══ */
.wm[data-mzt="spotify"] { --sp-green: #1db954; --sp-green-hi: #1ed760; --wm-glow: 29, 185, 84; }
.wm[data-mzt="spotify"] .wm-search svg { color: #121212; }
.wm[data-mzt="spotify"] .wm-search input { color: #121212; background: #fff; }
.wm[data-mzt="spotify"] .wm-search input::placeholder { color: #757575; }
.wm[data-mzt="spotify"] .wm-search input:hover, .wm[data-mzt="spotify"] .wm-search input:focus { background: #fff; border-color: transparent; }
@media (min-width: 761px) {
  .wm[data-mzt="spotify"] { padding: var(--safe-top) 0 0; column-gap: 0; background: #121212; }

  /* the sidebar runs the full height, the top bar sits over the main view only */
  .wm[data-mzt="spotify"] .wm-side { grid-row: 1 / 3; gap: 0; background: #000; border-radius: 0; }
  .wm[data-mzt="spotify"] .wm-split { grid-row: 1 / 3; margin-right: -4px; }
  .wm[data-mzt="spotify"] .wm-top { grid-column: 2; padding: 16px 32px; background: #121212; }
  .wm[data-mzt="spotify"] .wm-view { border-radius: 0; }
  .wm[data-mzt="spotify"] .sp-panel { background: transparent; border-radius: 0; }

  /* top bar: small round buttons, white search pill */
  .wm[data-mzt="spotify"] .sp-homebtn, .wm[data-mzt="spotify"] .sp-avatar { width: 32px; height: 32px; }
  .wm[data-mzt="spotify"] .sp-avatar { font-size: 12px; background: radial-gradient(circle, #f573a0 0 11px, #282828 12px); }
  .wm[data-mzt="spotify"] .wm-search { width: min(364px, 30vw); }
  .wm[data-mzt="spotify"] .wm-search svg { left: 12px; width: 18px; height: 18px; }
  .wm[data-mzt="spotify"] .wm-search input { height: 36px; padding: 0 12px 0 40px; font-size: 14px; }

  /* sidebar: icon nav (Home, Search), small-caps library heading, rows with a small icon */
  .wm[data-mzt="spotify"] .sp-nav { padding: 24px 8px 8px; }
  .wm[data-mzt="spotify"] .sp-navitem { gap: 16px; font-size: 14px; }
  .wm[data-mzt="spotify"] .sp-navitem svg { flex-shrink: 0; }
  .wm[data-mzt="spotify"] .sp-navitem.on { background: #282828; }
  .wm[data-mzt="spotify"].side-collapsed .sp-navitem span { display: none; }
  .wm[data-mzt="spotify"].side-collapsed .sp-navitem { justify-content: center; padding: 0; }
  .wm[data-mzt="spotify"] .sp-lib-head { padding: 16px 24px 4px; }
  .wm[data-mzt="spotify"] .sp-libtitle { gap: 8px; font-size: 11px; letter-spacing: .1em; text-transform: uppercase; }
  .wm[data-mzt="spotify"] .sp-chips { padding: 8px 24px; }
  .wm[data-mzt="spotify"] .sp-chip { height: 26px; padding: 0 10px; border-radius: 13px; font-size: 12px; }
  .wm[data-mzt="spotify"] .sp-lib-list { padding: 0 8px 8px; }
  .wm[data-mzt="spotify"]:not(.side-collapsed) .sp-li { gap: 12px; padding: 6px 16px; border-radius: 4px; }
  .wm[data-mzt="spotify"]:not(.side-collapsed) .sp-li .wm-art { width: 32px; height: 32px; border-radius: 2px; }
  .wm[data-mzt="spotify"]:not(.side-collapsed) .sp-li .wm-art.round { border-radius: 50%; }
  .wm[data-mzt="spotify"]:not(.side-collapsed) .sp-lit small { display: none; }
  .wm[data-mzt="spotify"]:not(.side-collapsed) .sp-lit b { font-size: 14px; color: #b3b3b3; }
  .wm[data-mzt="spotify"] .sp-li:hover, .wm[data-mzt="spotify"] .sp-li.on { background: none; }
  .wm[data-mzt="spotify"]:not(.side-collapsed) .sp-li:hover .sp-lit b, .wm[data-mzt="spotify"]:not(.side-collapsed) .sp-li.on .sp-lit b { color: #fff; }
  .wm[data-mzt="spotify"]:not(.side-collapsed) .sp-li.playing .sp-lit b { color: var(--sp-green); }

  /* expanded cover: flush with the sidebar, square corners */
  .wm[data-mzt="spotify"] .sp-cp { border-radius: 0; box-shadow: none; }

  /* cards: grey tiles that lighten on hover */
  .wm[data-mzt="spotify"] .sp-cards { margin: 0; column-gap: 24px; }
  .wm[data-mzt="spotify"] .sp-cardx { padding: 16px; border-radius: 4px; background: #181818; transition: background .3s; }
  .wm[data-mzt="spotify"] .sp-cardx:hover { background: #282828; }

  /* player bar: #181818 with a hairline on top (outlined play button) */
  .wm[data-mzt="spotify"] .wm-transport { position: relative; background: #181818; border-top: 1px solid #282828; height: var(--sp-bar-h, 90px); padding: 0 16px calc(var(--safe-bottom)); }
  /* resizable player bar: drag its top edge; everything inside scales with the height (--sp-bs = height / 90) */
  .wm[data-mzt="spotify"] .wm-transport > .wm-now, .wm[data-mzt="spotify"] .wm-transport > .wm-center, .wm[data-mzt="spotify"] .wm-transport > .wm-right { zoom: var(--sp-bs, 1); }
  .wm[data-mzt="spotify"] .wm-split.bar { display: block; position: absolute; left: 0; right: 0; top: -4px; bottom: auto; width: auto; height: 8px; margin: 0; grid-column: auto; grid-row: auto; justify-self: stretch; align-self: auto; cursor: row-resize; z-index: 9; touch-action: none; }
  .wm[data-mzt="spotify"] .wm-split.bar::after { left: 0; right: 0; top: 3px; width: auto; height: 1px; }
  .wm[data-mzt="spotify"] .wm-split.bar:hover::after, .wm[data-mzt="spotify"] .wm-split.bar:focus-visible::after, .wm[data-mzt="spotify"] .wm-split.bar.drag::after { top: 2px; left: 0; width: auto; height: 3px; background: #fff; opacity: .7; }
  .wm[data-mzt="spotify"] .wm-now-art { border-radius: 0; }
  .wm[data-mzt="spotify"] .wm-play, .wm[data-mzt="spotify"] .wm-play:hover { background: transparent; color: #fff; border: 1px solid #b3b3b3; }
  .wm[data-mzt="spotify"] .wm-play:hover { border-color: #fff; }
}

/* ═══ MUSIC - Spotify phone: "Add to playlist" bottom sheet (the + on the player, long press on a playlist track) ═══ */
.wm[data-mzt="spotify"] .sp-addsheet { position: fixed; inset: 0; z-index: 300; font-family: inherit; -webkit-tap-highlight-color: transparent; }
.wm[data-mzt="spotify"] .sp-addback { position: absolute; inset: 0; background: rgba(0,0,0,.6); opacity: 0; transition: opacity .25s ease; }
.wm[data-mzt="spotify"] .sp-addpanel { position: absolute; left: 0; right: 0; bottom: 0; max-height: 80dvh; display: flex; flex-direction: column; box-sizing: border-box;
  background: #282828; border-radius: 12px 12px 0 0; transform: translateY(100%); transition: transform .3s cubic-bezier(.2,.8,.2,1); will-change: transform; }
.wm[data-mzt="spotify"] .sp-addsheet.open .sp-addback { opacity: 1; }
.wm[data-mzt="spotify"] .sp-addsheet.open .sp-addpanel { transform: none; }
.wm[data-mzt="spotify"] .sp-addtop { flex-shrink: 0; padding: 8px 16px 0; }
.wm[data-mzt="spotify"] .sp-addgrab { width: 38px; height: 4px; border-radius: 2px; background: rgba(255,255,255,.3); margin: 0 auto 12px; }
.wm[data-mzt="spotify"] .sp-addhead { text-align: center; font-weight: 800; font-size: 16px; padding-bottom: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wm[data-mzt="spotify"] .sp-addscroll { overflow-y: auto; min-height: 0; padding: 0 16px calc(16px + var(--safe-bottom)); overscroll-behavior-y: contain; -webkit-overflow-scrolling: touch; }
.wm[data-mzt="spotify"] .sp-addrow { display: flex; align-items: center; gap: 12px; width: 100%; box-sizing: border-box; padding: 8px 0; color: #fff; text-align: left; cursor: pointer; user-select: none; -webkit-user-select: none; transition: opacity .15s; }
.wm[data-mzt="spotify"] .sp-addrow:active { opacity: .7; }
.wm[data-mzt="spotify"] .sp-addrow.busy { opacity: .5; pointer-events: none; }
.wm[data-mzt="spotify"] .sp-addrow .wm-art, .wm[data-mzt="spotify"] .sp-addplus { width: 48px; height: 48px; border-radius: 4px; flex-shrink: 0; }
.wm[data-mzt="spotify"] .sp-addplus { display: inline-flex; align-items: center; justify-content: center; background: #3e3e3e; }
.wm[data-mzt="spotify"] .sp-addt { flex: 1; min-width: 0; }
.wm[data-mzt="spotify"] .sp-addt b { display: block; font-size: 16px; font-weight: 400; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wm[data-mzt="spotify"] .sp-addt small { display: block; font-size: 13px; color: #b3b3b3; }
.wm[data-mzt="spotify"] .sp-addrow.in .sp-addt b { color: var(--sp-green); }
/* the state mark: an empty ring, filled green with a tick when the song is in it */
.wm[data-mzt="spotify"] .sp-addchk { flex-shrink: 0; width: 24px; height: 24px; box-sizing: border-box; border-radius: 50%; border: 2px solid #7f7f7f; display: inline-flex; align-items: center; justify-content: center; color: #000;
  transition: background .18s, border-color .18s, transform .18s; }
.wm[data-mzt="spotify"] .sp-addchk svg { opacity: 0; transform: scale(.4); transition: opacity .18s, transform .22s cubic-bezier(.2,1.4,.4,1); }
.wm[data-mzt="spotify"] .sp-addrow.in .sp-addchk { background: var(--sp-green); border-color: var(--sp-green); }
.wm[data-mzt="spotify"] .sp-addrow.in .sp-addchk svg { opacity: 1; transform: none; }
.wm[data-mzt="spotify"] .sp-addrow.rm .sp-addchk, .wm[data-mzt="spotify"] .sp-addrow.new .sp-addchk { display: none; }
/* menu sheets (the ⋯ menu, device picker, settings): rows and the song header */
.wm[data-mzt="spotify"] .sp-mhead { display: flex; align-items: center; gap: 12px; padding: 0 0 14px; margin: 0 0 4px; border-bottom: 1px solid rgba(255,255,255,.1); }
.wm[data-mzt="spotify"] .sp-mhead .wm-art { width: 56px; height: 56px; border-radius: 4px; flex-shrink: 0; }
.wm[data-mzt="spotify"] .sp-mt { flex: 1; min-width: 0; }
.wm[data-mzt="spotify"] .sp-mt b { display: block; font-size: 16px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wm[data-mzt="spotify"] .sp-mt small { display: block; font-size: 14px; color: #b3b3b3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wm[data-mzt="spotify"] .sp-mrow { display: flex; align-items: center; gap: 16px; min-height: 56px; box-sizing: border-box; padding: 0 4px; color: #fff; cursor: pointer; user-select: none; -webkit-user-select: none; transition: opacity .15s; }
.wm[data-mzt="spotify"] .sp-mrow:active { opacity: .7; }
.wm[data-mzt="spotify"] .sp-mrow > svg { flex-shrink: 0; width: 24px; height: 24px; color: #b3b3b3; }
.wm[data-mzt="spotify"] .sp-mrow .sp-mt b { font-weight: 400; }
.wm[data-mzt="spotify"] .sp-mrow.on > svg, .wm[data-mzt="spotify"] .sp-mrow .sp-mtick svg { color: var(--sp-green); }
.wm[data-mzt="spotify"] .sp-mrow.on .sp-mt b { color: var(--sp-green); }
.wm[data-mzt="spotify"] .sp-mrow.info { cursor: default; min-height: 0; padding: 12px 4px 4px; }
.wm[data-mzt="spotify"] .sp-mrow.info:active { opacity: 1; }
.wm[data-mzt="spotify"] .sp-mtick { display: inline-flex; flex-shrink: 0; }
.wm[data-mzt="spotify"] .sp-msheet .sp-addsep { margin: 4px 0; }
.wm[data-mzt="spotify"] .sp-addsheet.loading .sp-addrow.pl .sp-addchk { border-color: #4a4a4a; animation: spAddPulse 1s ease-in-out infinite; }
.wm[data-mzt="spotify"] .sp-addrow.rm .sp-addt b { color: #f15e6c; }
.wm[data-mzt="spotify"] .sp-addsep { height: 1px; margin: 8px 0 12px; background: rgba(255,255,255,.12); }
/* "New playlist" row expands into a name field in place */
.wm[data-mzt="spotify"] .sp-addform { display: flex; gap: 8px; max-height: 0; opacity: 0; overflow: hidden; transition: max-height .25s ease, opacity .2s ease, margin .25s ease; }
.wm[data-mzt="spotify"] .sp-addnew.open .sp-addform { max-height: 60px; opacity: 1; margin: 4px 0 8px; }
.wm[data-mzt="spotify"] .sp-addform input { flex: 1; min-width: 0; height: 44px; padding: 0 12px; border: 0; border-radius: 4px; background: #3e3e3e; color: #fff; font: inherit; font-size: 16px; }
.wm[data-mzt="spotify"] .sp-addform button { height: 44px; padding: 0 16px; border: 0; border-radius: 22px; background: var(--sp-green); color: #000; font: inherit; font-weight: 700; cursor: pointer; }
.wm[data-mzt="spotify"] .sp-addform button:disabled { opacity: .5; }
.wm[data-mzt="spotify"] .sp-addnew { margin-bottom: 8px; }
.wm[data-mzt="spotify"] .sp-addrow.fresh { animation: spAddIn .3s ease-out; }
@keyframes spAddIn { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }
@keyframes spAddPulse { 50% { opacity: .4; } }
@media (prefers-reduced-motion: reduce) { .wm[data-mzt="spotify"] .sp-addpanel, .wm[data-mzt="spotify"] .sp-addback, .wm[data-mzt="spotify"] .sp-addform { transition: none; } .wm[data-mzt="spotify"] .sp-addrow.fresh { animation: none; } }

/* ═══ MUSIC - Spotify phone: drag a playlist's rows by the ≡ handle to rearrange them ═══ */
.wm[data-mzt="spotify"] .sp-grip { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; color: #b3b3b3; touch-action: none; cursor: grab; -webkit-tap-highlight-color: transparent; }
.wm[data-mzt="spotify"] .sp-row.moving { transition: transform .16s ease; }
.wm[data-mzt="spotify"] .sp-row.dragging { transition: none; position: relative; z-index: 5; background: #3a3a3a; box-shadow: 0 8px 24px rgba(0,0,0,.6); border-radius: 6px; }
.wm[data-mzt="spotify"] .sp-row.dragging .sp-grip { color: var(--sp-green); }
.wm[data-mzt="spotify"] .wm-content.reordering { user-select: none; -webkit-user-select: none; }
.wm[data-mzt="spotify"] .sp-row.moving, .wm[data-mzt="spotify"] .sp-row.dragging { content-visibility: visible; }

/* ═══ MUSIC - Spotify phone: playlist edit mode (pencil → Cancel / Done bar, minus + drag handle on each row) ═══ */
.wm[data-mzt="spotify"] .sp-editbtn { display: inline-flex; align-items: center; justify-content: center; width: 48px; height: 48px; border: 0; background: none; color: #b3b3b3; cursor: pointer; }
.wm[data-mzt="spotify"] .sp-editbtn:active { color: #fff; }
.wm[data-mzt="spotify"] .sp-editbar { position: sticky; top: 0; z-index: 8; display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: 0 -16px; padding: 10px 16px; background: #121212; border-bottom: 1px solid #282828; }
.wm[data-mzt="spotify"] .sp-editbar b { font-size: 14px; font-weight: 700; color: #b3b3b3; }
.wm[data-mzt="spotify"] .sp-editbar button { height: 36px; padding: 0 16px; border: 0; border-radius: 18px; font: inherit; font-weight: 700; font-size: 14px; cursor: pointer; }
.wm[data-mzt="spotify"] .sp-editbar .cancel { background: none; color: #fff; padding: 0 4px; }
.wm[data-mzt="spotify"] .sp-editbar .done { background: var(--sp-green); color: #000; }
.wm[data-mzt="spotify"] .sp-editbar button:disabled { opacity: .5; }
.wm[data-mzt="spotify"] .sp-rmbtn { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border: 0; background: none; padding: 0; cursor: pointer; }
.wm[data-mzt="spotify"] .sp-rmbtn:active { transform: scale(.9); }
.wm[data-mzt="spotify"] .sp-row[data-act="sp-edit-row"]:active { background: none; }

.wm-split.bar { display: none; }   /* only the Spotify desktop player bar can be resized */

/* ═══ MUSIC - Spotify, phone: the focused Search screen (back arrow, grey field, Recents) ═══ */
.sp-sback { display: none; }
.sp-recs h2 { font-size: 24px; font-weight: 800; margin: 18px 0 12px; }
.sp-rec { display: flex; align-items: center; gap: 14px; padding: 8px 0; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.sp-rimg { flex: none; width: 56px; height: 56px; border-radius: 4px; overflow: hidden; display: block; }
.sp-rec.art .sp-rimg { border-radius: 50%; }
.sp-rimg > * { width: 100%; height: 100%; display: block; object-fit: cover; }
.sp-rtx { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.sp-rtx b { font-size: 17px; font-weight: 400; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sp-rtx b.on { color: #1ed760; }
.sp-rtx i { font-style: normal; font-size: 14px; color: #b3b3b3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: flex; align-items: center; gap: 6px; }
.sp-rx { flex: none; width: 44px; height: 44px; border: 0; background: none; color: #b3b3b3; display: flex; align-items: center; justify-content: center; margin-right: -8px; }
.sp-rx:active { color: #fff; }
@media (max-width: 760px) {
  .wm[data-mzt="spotify"][data-sf="1"] .wm-top { gap: 14px; padding-left: 14px; }
  .wm[data-mzt="spotify"][data-sf="1"] .sp-sback { display: flex; flex: none; width: 28px; height: 40px; align-items: center; justify-content: center; border: 0; background: none; color: #fff; padding: 0; }
  .wm[data-mzt="spotify"][data-sf="1"] .wm-search svg { display: none; }
  .wm[data-mzt="spotify"][data-sf="1"] .wm-search input { height: 40px; padding: 0 14px; background: #2a2a2a; color: #fff; caret-color: #1ed760; border-radius: 500px; font-size: 16px; }
  .wm[data-mzt="spotify"][data-sf="1"] .wm-search input::placeholder { color: #a7a7a7; }
  .wm[data-mzt="spotify"][data-sf="1"] .wm-search input:focus { background: #2a2a2a; }
  .wm[data-mzt="spotify"][data-sf="1"] .wm-search input::-webkit-search-cancel-button { -webkit-appearance: none; display: none; }
  .wm[data-mzt="spotify"][data-sf="1"] .sp-page { background: #121212 !important; }
}
@media (max-width: 760px) {
  /* keyboard up in the focused search: no tab bar or mini player riding on top of it */
  .wm[data-mzt="spotify"][data-sf="1"]:has(.wm-search input:focus) .sp-tabbar,
  .wm[data-mzt="spotify"][data-sf="1"]:has(.wm-search input:focus) .wm-transport { display: none; }
}

/* touch screens: hover and :active fire the moment a finger lands, so scrolling made rows, cards and chips look pressed.
   Press feedback is the .pr class instead (set by music-spotify.js only when the finger rests), and hover effects are off. */
@media (hover: none) {
  .wm[data-mzt="spotify"], .wm[data-mzt="spotify"] * { -webkit-tap-highlight-color: transparent; }
  .sp-row:hover:not(.sel):not(.pr) { background: none; }
  .sp-row:hover .c0 .n { display: block; }
  .sp-row:hover .c0 .pl { display: none; }
  .sp-row.playing:hover .c0 .n { display: none; }
  .sp-row.playing:hover .c0 .eq { display: block; }
  .sp-row:hover .tt small, .sp-row:hover .c-alb, .sp-row:hover .c-date { color: #b3b3b3; }
  .sp-row:hover .star:not(.on) { opacity: 0; }
  .sp-cardx:hover { background: none; }
  .sp-cardx:hover .sp-cardplay, .sp-quick:hover .sp-cardplay, .sp-topres:hover .sp-cardplay { opacity: 0; transform: translateY(8px); }
  .sp-quick:hover { background: rgba(255,255,255,.1); }
  .sp-topres:hover { background: #181818; }
  .sp-tile:hover { filter: none; }
  .sp-chip:hover:not(.on) { background: #2a2a2a; }
  .sp-li:hover { background: none; }
  .sp-disc-head:hover { background: none; }
  .sp-cardx.pr, .sp-quick.pr, .sp-topres.pr, .sp-rec.pr { opacity: .72; }
  .sp-tile.pr { filter: brightness(1.08); }
}

/* feels like an app, not a page: the phone's music player */
.sp-art img { animation: sp-imgin .35s ease-out; }
@keyframes sp-imgin { from { opacity: 0; } to { opacity: 1; } }
@media (pointer: coarse) {
  html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
  #music-screen img { -webkit-user-drag: none; user-drag: none; }
  #music-screen .wm-content, #music-screen .sp-q-list, #music-screen .sp-np-scroll, #music-screen .sp-lib-list { overscroll-behavior-y: contain; scroll-behavior: auto; }
  #music-screen button, #music-screen [data-act] { touch-action: manipulation; }
  #music-screen .wm-content { scroll-padding-top: 8px; }
}
@media (prefers-reduced-motion: reduce) { .sp-art img { animation: none; } }

/* the player and page slides: promote what moves, and keep what does not move out of the way */
@media (max-width: 760px) {
  .wm[data-mzt="spotify"] .sp-np { contain: paint; backface-visibility: hidden; }
  .wm[data-mzt="spotify"] .sp-np-scroll { contain: paint; }
  .wm[data-mzt="spotify"] .wm-content.sp-v-fwd, .wm[data-mzt="spotify"] .wm-content.sp-v-back { will-change: transform, opacity; }
}

/* phone: a tap leaves the button "hovered", and the desktop hover (white disc) made the mini player's white play icon vanish into a white circle */
@media (max-width: 760px), (hover: none) {
  .wm[data-mzt="spotify"] .wm-transport .wm-play, .wm[data-mzt="spotify"] .wm-transport .wm-play:hover, .wm[data-mzt="spotify"] .wm-transport .wm-play:active,
  .wm[data-mzt="spotify"] .wm-transport .wm-play:focus { background: none; color: #fff; transform: none; box-shadow: none; }
  .wm[data-mzt="spotify"] .wm-transport .wm-ctl:hover, .wm[data-mzt="spotify"] .sp-heart:hover { color: inherit; background: none; transform: none; }
}

/* ═══ HOME — phone layout ═══ */
@media (max-width: 760px) {
  body:not(.desktop-mode) #home-screen .top-bar { padding-left: 20px; padding-right: 20px; }
  body:not(.desktop-mode) .clock-date { font-size: 13px; font-weight: 500; color: var(--text-dim); margin-top: 2px; letter-spacing: .01em; }
  body:not(.desktop-mode) .status-chips {
    display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px;
    padding: 10px 20px 4px; overflow: visible;
  }
  body:not(.desktop-mode) .stat-chip { min-width: 0; padding: 7px 2px; border-radius: 14px; }
  body:not(.desktop-mode) .stat-chip-value { font-size: 14px; }
  body:not(.desktop-mode) .app-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 22px 12px; padding: 28px 20px 24px;
  }
  body:not(.desktop-mode) .app-icon-visual { width: 100%; max-width: 76px; height: auto; aspect-ratio: 1; border-radius: 22px; }
  body:not(.desktop-mode) .app-icon-visual svg { width: 30px; height: 30px; }
  body:not(.desktop-mode) .app-label { font-size: 12px; font-weight: 500; }
}

/* ═══ HOME — now playing card ═══ */
.home-np { display: none; }
@media (max-width: 760px) {
  body:not(.desktop-mode) .home-np {
    display: flex; align-items: center; gap: 12px;
    margin: 0 20px 110px; padding: 10px 12px 10px 10px; border-radius: 22px; cursor: pointer;
    background: var(--glass); backdrop-filter: blur(var(--blur)); -webkit-backdrop-filter: blur(var(--blur));
    border: 1px solid var(--glass-border); box-shadow: var(--glass-shadow), var(--glass-inset);
    transition: transform .15s;
  }
  body:not(.desktop-mode) .home-np:active { transform: scale(.98); }
  .home-np-art { width: 56px; height: 56px; border-radius: 14px; overflow: hidden; flex: none; background: var(--accent-soft); }
  .home-np-art .wm-art { width: 100%; height: 100%; border-radius: 0; }
  .home-np-art .wm-art img { width: 100%; height: 100%; object-fit: cover; }
  .home-np-ph { width: 100%; height: 100%; }
  .home-np-text { flex: 1; min-width: 0; }
  .home-np-label { font-size: 10px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--text-faint); }
  .home-np.playing .home-np-label { color: var(--green, #1db954); }
  .home-np-title, .home-np-artist { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .home-np-title { font-size: 15px; font-weight: 600; margin-top: 1px; }
  .home-np-artist { font-size: 12.5px; color: var(--text-dim); }
  .home-np-btn { width: 44px; height: 44px; border-radius: 50%; border: 0; flex: none; display: flex; align-items: center; justify-content: center;
    background: var(--text); color: var(--bg, #fff); cursor: pointer; -webkit-tap-highlight-color: transparent; }
  .home-np-btn:active { transform: scale(.92); }
}

/* ═══ BOOKS — pages mode ═══ */
.pages-pane { padding: 0 0 80px; }
.pages-count { position: fixed; left: 50%; bottom: 14px; transform: translateX(-50%); z-index: 5; pointer-events: none;
  font-size: 12px; font-weight: 600; padding: 5px 12px; border-radius: 999px; color: var(--text);
  background: var(--glass); border: 1px solid var(--glass-border); backdrop-filter: blur(var(--blur)); -webkit-backdrop-filter: blur(var(--blur)); }
.pages-pane[style*="none"] .pages-count { display: none; }
.pages-list { display: flex; flex-direction: column; gap: 6px; max-width: 900px; margin: 0 auto; }
.pages-list .pg { width: 100%; background: var(--accent-soft); overflow: hidden; }
.pages-list .pg img { display: block; width: 100%; height: auto; }
@media (min-width: 761px) { .pages-list { gap: 12px; } .pages-list .pg { border-radius: 6px; box-shadow: var(--glass-shadow); } }

/* artist page ⋮ button (also on desktop) */
.sp-ahead .sp-mmore { display: inline-flex; align-items: center; justify-content: center; position: absolute; top: 12px; right: 12px; z-index: 6; width: 40px; height: 40px;
  border: 0; border-radius: 50%; background: rgba(0,0,0,.45); color: #fff; cursor: pointer; }
@media (max-width: 760px) { .sp-ahead .sp-mmore { top: calc(var(--safe-top) + 8px); } }

/* artist page without a real banner: blurred backdrop + the round photo */
.sp-ahead.nobanner .sp-abg img { filter: blur(34px) saturate(1.3) brightness(.62); transform: scale(1.3); }
.sp-apfp { display: block; width: 132px; height: 132px; border-radius: 50%; object-fit: cover; margin: 0 0 14px; box-shadow: 0 8px 28px rgba(0,0,0,.5); }
@media (max-width: 760px) { .sp-ahead { min-height: 340px; } .sp-apfp { width: 120px; height: 120px; } }

/* desktop: the round photo sits to the left of the name, not above it */
.sp-pinfo { min-width: 0; }
@media (min-width: 761px) {
  .sp-ahead .sp-ptext { display: flex; align-items: flex-end; gap: 28px; }
  .sp-ahead .sp-apfp { width: 192px; height: 192px; margin: 0; flex: none; }
}

/* Add to playlist on desktop: a centred card instead of a full-width sheet */
@media (min-width: 761px) {
  .wm[data-mzt="spotify"] .sp-addpanel { left: calc(50% - 240px); right: auto; width: 480px; bottom: 56px; max-height: 70dvh; border-radius: 12px; transform: translateY(calc(100% + 56px)); box-shadow: 0 16px 48px rgba(0,0,0,.6); }
  .wm[data-mzt="spotify"] .sp-addsheet.open .sp-addpanel { transform: none; }
  .wm[data-mzt="spotify"] .sp-addgrab { display: none; }
}

/* desktop: dragging a playlist row */
.wm[data-mzt="spotify"] .sp-row.dragging { cursor: grabbing; }
.wm[data-mzt="spotify"] .wm-content.reordering, .wm[data-mzt="spotify"] .wm-content.reordering * { cursor: grabbing; }

/* lyrics card under the player controls */
.sp-lyr-unused { padding: 18px 20px 12px; background: linear-gradient(180deg, var(--sp-mini, #5a4a3a), #1f1f1f 140%); }
.sp-lyr[hidden] { display: none; }
.sp-lyr-h { margin-bottom: 10px; }
.sp-lyr-h b { font-size: 20px; font-weight: 800; }
.sp-lyr-body { position: relative; max-height: 340px; overflow-y: auto; overscroll-behavior-y: contain; scrollbar-width: none; padding: 10px 0 60px; -webkit-mask-image: linear-gradient(transparent, #000 14%, #000 86%, transparent); mask-image: linear-gradient(transparent, #000 14%, #000 86%, transparent); }
.sp-lyr-body::-webkit-scrollbar { display: none; }
.sp-lyr-body p { margin: 0 0 14px; font-size: 24px; line-height: 1.25; font-weight: 800; color: rgba(255,255,255,.42); cursor: pointer; transition: color .25s; overflow-wrap: anywhere; }
.sp-lyr-body p.on { color: #fff; }
.sp-lyr.plain .sp-lyr-body p { color: #fff; font-size: 18px; font-weight: 700; cursor: default; margin-bottom: 8px; }
@media (hover: hover) { .sp-lyr-body p:hover { color: rgba(255,255,255,.8); } .sp-lyr-body p.on:hover { color: #fff; } }

/* desktop lyrics page */
.wm-lyrbtn { display: none; }
@media (min-width: 761px) { .wm[data-mzt="spotify"] .wm-lyrbtn { display: inline-flex; } .wm[data-view="lyrics"] .wm-lyrbtn { color: var(--sp-green); } }
.sp-lyricspage .sp-pbody { padding-top: 28px; }
.sp-lv-top { display: flex; align-items: center; gap: 20px; margin-bottom: 8px; }
.sp-lv-top .sp-art, .sp-lv-top > :first-child { width: 120px; height: 120px; flex: none; border-radius: 6px; overflow: hidden; }
.sp-lv-top h1 { margin: 0; font-size: 28px; font-weight: 800; }
.sp-lv-top p { margin: 4px 0 0; color: rgba(255,255,255,.65); }
.sp-lv-body { position: relative; height: calc(100vh - 360px); min-height: 280px; overflow-y: auto; padding: 14vh 4px; scrollbar-width: none;
  -webkit-mask-image: linear-gradient(transparent, #000 12%, #000 88%, transparent); mask-image: linear-gradient(transparent, #000 12%, #000 88%, transparent); }
.sp-lv-body::-webkit-scrollbar { display: none; }
.sp-lv-body p { margin: 0 0 18px; font-size: 34px; line-height: 1.2; font-weight: 800; color: rgba(255,255,255,.4); cursor: pointer; transition: color .25s; overflow-wrap: anywhere; }
.sp-lv-body p.on { color: #fff; }
.sp-lv-body p:hover { color: rgba(255,255,255,.8); } .sp-lv-body p.on:hover { color: #fff; }
.sp-lv-body.plain p { color: #fff; font-size: 20px; font-weight: 700; cursor: default; margin-bottom: 10px; }
.sp-lv-body p.sp-lv-msg { font-size: 20px; color: rgba(255,255,255,.55); cursor: default; }


/* the line being sung, between the cover art and the title: a fixed-height band, so a line appearing never moves anything */
.sp-npl { flex: 0 0 auto; height: 59px; margin: 0; display: flex; align-items: center; overflow: hidden;
  font-size: 17px; line-height: 1.25; font-weight: 800; color: #fff; opacity: .8; overflow-wrap: anywhere; }
.sp-npl > span { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.sp-npl.in { animation: sp-lyr-in .35s ease; }
@keyframes sp-lyr-in { from { opacity: 0; transform: translateY(6px); } to { opacity: .8; transform: none; } }

/* playlist page ⋮ (also on desktop) */
.sp-phead .sp-mmore { display: inline-flex; align-items: center; justify-content: center; position: absolute; top: 12px; right: 12px; z-index: 6; width: 40px; height: 40px; border: 0; border-radius: 50%; background: rgba(0,0,0,.45); color: #fff; cursor: pointer; }
@media (max-width: 760px) { .sp-phead .sp-mmore { top: calc(var(--safe-top) + 8px); } }

/* file format + bitrate under the player controls */
.sp-np-qual { display: flex; align-items: center; justify-content: center; gap: 8px; margin: -26px 0 26px; color: #a7a7a7; font-size: 11px; letter-spacing: .02em; }
.sp-np-qual[hidden] { display: none; }
.sp-q-fmt { padding: 2px 7px; border: 1px solid rgba(255,255,255,.35); border-radius: 4px; color: #e5e5e5; font-weight: 700; font-size: 10.5px; letter-spacing: .06em; }
.sp-q-txt { font-variant-numeric: tabular-nums; }

/* toast with a button (Undo) */
.wm-toast.act { pointer-events: auto; display: flex; align-items: center; gap: 14px; }
.wm-toast-act { border: 0; background: none; color: #1db954; font: inherit; font-weight: 800; letter-spacing: .02em; padding: 4px 2px; cursor: pointer; }
.wm-toast[data-mzt="spotify"] .wm-toast-act { color: #148a3c; }

/* swipe a song row right to queue it */
@media (hover: none) { #music-screen .sp-row.trk[data-act], #music-screen .sp-row.trk [data-act], #music-screen .sp-qi-row[data-act], #music-screen .sp-qi-row [data-act] { touch-action: pan-y; } }   /* beats the blanket 'manipulation' on [data-act]: sideways drags stay ours, up/down still scrolls */
.wm[data-mzt="spotify"] .sp-row.swq { background: linear-gradient(90deg, rgba(29,185,84,.55) var(--sw, 0px), transparent var(--sw, 0px)); position: relative; }
.wm[data-mzt="spotify"] .sp-row.swq::before { content: "+ Queue"; position: absolute; left: 14px; top: 50%; transform: translateY(-50%); font-size: 13px; font-weight: 800; color: #fff; opacity: .7; pointer-events: none; z-index: 2; }
.wm[data-mzt="spotify"] .sp-row.swq-ok::before { opacity: 1; }
.wm[data-mzt="spotify"] .sp-row.trk > * { transition: transform .16s ease; }
.wm[data-mzt="spotify"] .sp-row.swq > * { transform: translateX(calc(var(--sw, 0px) * .55)); transition: none; }
.sp-np-qual { cursor: pointer; -webkit-tap-highlight-color: transparent; padding: 8px 0; }

/* the format line lives in the buttons row under the controls (between the device and queue buttons), like Spotify's row */
.sp-np-foot .sp-np-qual { flex: 1; min-width: 0; margin: 0; padding: 0 6px; justify-content: center; white-space: nowrap; overflow: hidden; font-size: 10.5px; }
.sp-np-foot .sp-q-txt { overflow: hidden; text-overflow: ellipsis; }
.sp-np-foot:has(#sp-np-remote:not(:empty)) .sp-np-qual { display: none; }

/* dropping files onto the Files screen */
.fm-screen.fm-drop .fm-main { outline: 2px dashed var(--accent, #3b82f6); outline-offset: -8px; background: color-mix(in srgb, var(--accent, #3b82f6) 8%, transparent); }

/* streaming quality sheet: one slider per kind of network */
.sp-qs { padding: 4px 20px 18px; display: flex; flex-direction: column; gap: 22px; }
.sp-qs-block { display: flex; flex-direction: column; gap: 6px; }
.sp-qs-h { display: flex; align-items: center; justify-content: space-between; }
.sp-qs-h b { font-size: 17px; }
.sp-qs-now { font-size: 11px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; color: #121212; background: var(--sp-green, #1db954); padding: 3px 8px; border-radius: 99px; }
.sp-qs-val { display: flex; flex-direction: column; gap: 2px; min-height: 52px; }
.sp-qs-big { font-size: 26px; font-weight: 800; letter-spacing: -.01em; }
.sp-qs-val small { color: #a7a7a7; font-size: 13px; line-height: 1.35; }
.sp-qs input[type=range] { width: 100%; touch-action: pan-x; accent-color: var(--sp-green, #1db954); height: 32px; margin: 4px 0 0; }
.sp-qs-ends { display: flex; justify-content: space-between; color: #a7a7a7; font-size: 12px; }
.sp-qs-fine { color: #8a8a8a; font-size: 12.5px; line-height: 1.4; margin: 0; }
.sp-qs input[type=range] { -webkit-appearance: none; appearance: none; background: transparent; height: 32px; }
.sp-qs input[type=range]::-webkit-slider-runnable-track { height: 4px; border-radius: 4px; background: linear-gradient(90deg, var(--sp-green, #1db954) var(--p, 0%), #535353 var(--p, 0%)); }
.sp-qs input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; width: 24px; height: 24px; margin-top: -10px; border-radius: 50%; background: #fff; box-shadow: 0 2px 8px rgba(0,0,0,.5); }
.sp-qs input[type=range]::-moz-range-track { height: 4px; border-radius: 4px; background: #535353; }
.sp-qs input[type=range]::-moz-range-progress { height: 4px; border-radius: 4px; background: var(--sp-green, #1db954); }
.sp-qs input[type=range]::-moz-range-thumb { width: 24px; height: 24px; border: 0; border-radius: 50%; background: #fff; }
.wm[data-mzt="spotify"] .sp-qs input[type=range]::-webkit-slider-thumb { opacity: 1; width: 24px; height: 24px; margin-top: -10px; background: #fff; }
.wm[data-mzt="spotify"] .sp-qs input[type=range]::-moz-range-thumb { opacity: 1; width: 24px; height: 24px; background: #fff; }
.wm[data-mzt="spotify"] .sp-qs input[type=range] { height: 32px; }

/* the little equaliser: on the phone's song rows (the number column is hidden there) ... */
@media (max-width: 760px) {
  .wm[data-mzt="spotify"] .sp-row.playing .tt small::before { content: ""; display: inline-block; width: 13px; height: 13px; margin-right: 6px; vertical-align: -1px; background: center / contain no-repeat var(--sp-eq); }
  .wm.paused[data-mzt="spotify"] .sp-row.playing .tt small::before { background-image: var(--sp-eq-still); }
}
/* ... and on whatever is playing from: the album, playlist, artist or Liked Songs, in lists and on cards */
.wm[data-mzt="spotify"] .playing-ctx b { color: var(--sp-green); }
.wm[data-mzt="spotify"] .playing-ctx b::before { content: ""; display: inline-block; width: 13px; height: 13px; margin-right: 6px; vertical-align: -1px; background: center / contain no-repeat var(--sp-eq); }
.wm.paused[data-mzt="spotify"] .playing-ctx b::before { background-image: var(--sp-eq-still); }
.sp-rn { display: flex; gap: 10px; padding: 6px 20px 20px; }
.sp-rn input { flex: 1; min-width: 0; background: #3e3e3e; color: #fff; border: 0; border-radius: 6px; padding: 14px; font: inherit; font-size: 16px; }
.sp-rn button { border: 0; border-radius: 99px; padding: 0 22px; font: 700 15px inherit; background: #fff; color: #000; }
.sp-rn button:disabled { opacity: .5; }

.wm[data-mzt="spotify"] { --sp-eq: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%231ed760'%3E%3Crect x='4' y='10' width='4' height='10'%3E%3Canimate attributeName='height' values='10;18;6;10' dur='.9s' repeatCount='indefinite'/%3E%3Canimate attributeName='y' values='10;2;14;10' dur='.9s' repeatCount='indefinite'/%3E%3C/rect%3E%3Crect x='10' y='4' width='4' height='16'%3E%3Canimate attributeName='height' values='16;6;18;16' dur='.7s' repeatCount='indefinite'/%3E%3Canimate attributeName='y' values='4;14;2;4' dur='.7s' repeatCount='indefinite'/%3E%3C/rect%3E%3Crect x='16' y='8' width='4' height='12'%3E%3Canimate attributeName='height' values='12;18;8;12' dur='.8s' repeatCount='indefinite'/%3E%3Canimate attributeName='y' values='8;2;12;8' dur='.8s' repeatCount='indefinite'/%3E%3C/rect%3E%3C/svg%3E"); --sp-eq-still: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%231ed760'%3E%3Crect x='4' y='10' width='4' height='10'/%3E%3Crect x='10' y='4' width='4' height='16'/%3E%3Crect x='16' y='8' width='4' height='12'/%3E%3C/svg%3E"); }
.wm[data-mzt="spotify"] .sp-li.playing-ctx .sp-lit b,
.wm[data-mzt="spotify"]:not(.side-collapsed) .sp-li.playing-ctx .sp-lit b,
.wm[data-mzt="spotify"]:not(.side-collapsed) .sp-li.playing-ctx:hover .sp-lit b { color: var(--sp-green); }

/* playlist edit mode: pick several songs, then move or remove them together */
.wm[data-mzt="spotify"] .sp-selbar { display: flex; align-items: center; gap: 6px; margin: 0 -16px; padding: 8px 16px; background: #181818; border-bottom: 1px solid #282828; font-size: 13px; color: #b3b3b3; overflow-x: auto; }
.wm[data-mzt="spotify"] .sp-selbar span { flex: 1; white-space: nowrap; }
.wm[data-mzt="spotify"] .sp-selbar.on span { color: #fff; font-weight: 700; flex: 1 0 auto; }
.wm[data-mzt="spotify"] .sp-selbar button { height: 30px; padding: 0 12px; border: 1px solid #535353; border-radius: 15px; background: none; color: #fff; font: inherit; font-weight: 600; font-size: 13px; cursor: pointer; flex: none; }
.wm[data-mzt="spotify"] .sp-selbar button.rm { color: #ff6b6b; border-color: #7a3030; }
.wm[data-mzt="spotify"] .sp-selbar button:disabled { opacity: .5; }
.wm[data-mzt="spotify"] .sp-echk { flex: none; width: 20px; height: 20px; border-radius: 50%; border: 2px solid #727272; margin-right: 10px; box-sizing: border-box; display: inline-block; vertical-align: middle; }
.wm[data-mzt="spotify"] .sp-echk.on { background: var(--sp-green) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l5 5 9-10'/%3E%3C/svg%3E") center/14px no-repeat; border-color: var(--sp-green); }
.wm[data-mzt="spotify"] .sp-row.esel { background: rgba(255,255,255,.1); }

.wm[data-mzt="spotify"] .sp-row.esel { background: rgba(255,255,255,.1); }
.sp-dsel { position: absolute; left: 50%; bottom: 96px; transform: translateX(-50%); z-index: 30; display: flex; align-items: center; gap: 8px; padding: 8px 12px; border-radius: 28px; background: #282828; box-shadow: 0 8px 28px rgba(0,0,0,.6); color: #fff; font-size: 13px; white-space: nowrap; }
.sp-dsel span { font-weight: 700; padding: 0 4px; }
.sp-dsel button { height: 30px; padding: 0 14px; border: 1px solid #535353; border-radius: 15px; background: none; color: #fff; font: inherit; font-weight: 600; cursor: pointer; }
.sp-dsel button:hover { border-color: #fff; }
.sp-dsel button.rm { color: #ff6b6b; border-color: #7a3030; }
/* the playing indicator on grid cards (search results, shelves) as well as library rows */
.wm[data-mzt="spotify"] .sp-cardx.playing-ctx .sp-ct { color: var(--sp-green); }
.wm[data-mzt="spotify"] .sp-cardx.playing-ctx .sp-ct::before { content: ""; display: inline-block; width: 13px; height: 13px; margin-right: 6px; vertical-align: -1px; background: center / contain no-repeat var(--sp-eq); }
.wm.paused[data-mzt="spotify"] .sp-cardx.playing-ctx .sp-ct::before { background-image: var(--sp-eq-still); }
.wm[data-mzt="spotify"] .sp-rec.playing-ctx b, .wm[data-mzt="spotify"] .sp-quick.playing-ctx b { color: var(--sp-green); }

/* swiping the mini player sideways: whatever slides must stay inside its rounded rectangle */
.wm[data-mzt="spotify"] .wm-transport.swiping { overflow: hidden; }

/* phone: artist and album names inside song rows are plain text, so scrolling can never open them; long-press the row for "Go to artist" */
@media (max-width: 760px) {
  #music-screen .sp-row a[data-act], #music-screen .sp-qi-row a[data-act], #music-screen .qrow a[data-act] { pointer-events: none; }
}

/* touch feedback: applied on touch-down by a small script, so it shows before the tap is confirmed */
#music-screen :is(.sp-row, .sp-li, .sp-quick, .sp-rec, .sp-qi-row, .sp-addrow, .sp-mi, .sp-topres, .sp-tile).pressed { background: rgba(255,255,255,.1); transition: none; }
#music-screen .sp-cardx.pressed { opacity: .72; transition: none; }
#music-screen .sp-chip.pressed { filter: brightness(1.35); transition: none; }
#music-screen .sp-tabbar button.pressed { opacity: .6; transition: none; }

/* pull to refresh */
.sp-ptr { position: fixed; left: 50%; top: calc(var(--safe-top) + 10px); z-index: 70; width: 38px; height: 38px; margin-left: 0; display: grid; place-items: center; border-radius: 50%; background: #2c2c2c; color: #fff; box-shadow: 0 4px 14px rgba(0,0,0,.5); opacity: 0; pointer-events: none; transform: translate(-50%, -40px); }
.sp-ptr.spin svg { animation: sp-ptr-spin .8s linear infinite; }
@keyframes sp-ptr-spin { to { transform: rotate(360deg); } }

/* phone: soft shadows are nearly invisible on the dark page but costly to draw on every new cover, so they are smaller */
@media (max-width: 760px) {
  .wm[data-mzt="spotify"] .sp-np-art { box-shadow: 0 8px 20px rgba(0,0,0,.45); }
  .wm[data-mzt="spotify"] .sp-cover .wm-art { box-shadow: none; }
}

/* phone: a library row is 56px of cover plus 8px above and below, so the placeholder size is right and the scroll length never jumps */
@media (max-width: 760px) { .sp-li { contain-intrinsic-size: auto 72px; } }

/* ═══ HOME TITLE: a minimal terminal prompt, centred at the top ═══ */
.home-title { display: flex; justify-content: center; padding: 16px 24px 0; user-select: none; }
.home-title .ht-prompt { font: 500 15px/1 ui-monospace, "SF Mono", "JetBrains Mono", "DejaVu Sans Mono", Menlo, Consolas, monospace; letter-spacing: .01em; color: var(--text-dim, #8e8e93); white-space: nowrap; }
.home-title .ht-user, .home-title .ht-host { color: var(--text, #e8e8ed); }
.home-title .ht-at, .home-title .ht-colon, .home-title .ht-path { color: var(--text-dim, #8e8e93); }
.home-title .ht-sign { margin: 0 .55em 0 .1em; color: #7cf7a8; }
.home-title .ht-cursor { display: inline-block; width: .6em; height: 1.05em; margin-bottom: -.18em; background: #7cf7a8; opacity: .9; }
@media (prefers-reduced-motion: no-preference) { .home-title .ht-cursor { animation: ht-blink 1.1s steps(1) infinite; } }
@keyframes ht-blink { 50% { opacity: 0; } }
body.desktop-mode .home-title { max-width: 720px; margin: 0 auto; padding-top: 3vh; }
body.desktop-mode .home-title .ht-prompt { font-size: 17px; }

/* Right-click menu on a wide screen: a small menu at the pointer instead of the bottom sheet */
.wm[data-mzt="spotify"] .sp-msheet.sp-pop .sp-addback { background: transparent; transition: none; }
.wm[data-mzt="spotify"] .sp-msheet.sp-pop .sp-addtop { display: none; }
.wm[data-mzt="spotify"] .sp-msheet.sp-pop .sp-addpanel { right: auto; bottom: auto; width: 240px; max-height: 70dvh; padding: 4px; border-radius: 6px; transform: none; opacity: 0; transition: opacity .1s; box-shadow: 0 16px 32px rgba(0,0,0,.5); }
.wm[data-mzt="spotify"] .sp-msheet.sp-pop.open .sp-addpanel { opacity: 1; }
.wm[data-mzt="spotify"] .sp-msheet.sp-pop .sp-addscroll { padding: 0; }
.wm[data-mzt="spotify"] .sp-msheet.sp-pop .sp-mrow { min-height: 36px; gap: 12px; padding: 0 10px; border-radius: 3px; }
.wm[data-mzt="spotify"] .sp-msheet.sp-pop .sp-mrow > svg { width: 18px; height: 18px; }
.wm[data-mzt="spotify"] .sp-msheet.sp-pop .sp-mrow .sp-mt b { font-size: 14px; }
.wm[data-mzt="spotify"] .sp-msheet.sp-pop .sp-mrow:hover, .wm[data-mzt="spotify"] .sp-msheet.sp-pop .sp-mrow:focus-visible { background: rgba(255,255,255,.1); outline: none; }
.wm[data-mzt="spotify"] .sp-msheet.sp-pop .sp-addsep { margin: 4px 0; }

/* ═══ MUSIC - desktop queue panel + quality badge in the player bar ═══ */
.sp-qp { display: none; }
.wm[data-mzt="spotify"].qp-open { grid-template-columns: var(--wm-side-w, 320px) minmax(0, 1fr) var(--sp-qp-w, 340px); }
.wm[data-mzt="spotify"].qp-open .sp-qp { display: flex; flex-direction: column; grid-column: 3; grid-row: 2; min-width: 0; min-height: 0; overflow: hidden; border-radius: 8px; background: var(--sp-panel, #121212); }
.sp-qp-head { display: flex; align-items: center; gap: 4px; padding: 16px 12px 8px 16px; flex-shrink: 0; }
.sp-qp-head b { flex: 1; font-size: 16px; font-weight: 700; color: #fff; }
.sp-qp-clear { border: 0; background: none; color: #b3b3b3; font: inherit; font-size: 13px; font-weight: 700; padding: 6px 8px; border-radius: 14px; cursor: pointer; }
.sp-qp-clear:hover { color: #fff; }
.sp-qp-x { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border: 0; border-radius: 50%; background: none; color: #b3b3b3; cursor: pointer; }
.sp-qp-x:hover { color: #fff; background: rgba(255,255,255,.1); }
.sp-qp-list { flex: 1; min-height: 0; overflow-y: auto; padding: 0 8px 12px; scrollbar-width: thin; }
.sp-qp-list h3 { margin: 12px 8px 6px; font-size: 14px; font-weight: 700; color: #b3b3b3; }
.sp-qp-row { display: flex; align-items: center; gap: 12px; height: 56px; padding: 0 8px; border-radius: 4px; cursor: pointer; }
.sp-qp-row:hover { background: rgba(255,255,255,.1); }
.sp-qp-row .wm-art { width: 40px; height: 40px; flex-shrink: 0; border-radius: 4px; }
.sp-qp-row .tt { flex: 1; min-width: 0; }
.sp-qp-row .tt b, .sp-qp-row .tt small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sp-qp-row .tt b { font-size: 14px; font-weight: 400; color: #fff; }
.sp-qp-row .tt small { font-size: 12px; color: #b3b3b3; }
.sp-qp-row.playing .tt b { color: var(--sp-green, #1ed760); }
.sp-qp-row time { font-size: 12px; color: #a7a7a7; font-variant-numeric: tabular-nums; }
.sp-qp-empty { padding: 20px 8px; color: #a7a7a7; font-size: 13px; }
.sp-qp-more { display: block; margin: 8px auto 16px; padding: 8px 16px; border: 1px solid #535353; border-radius: 16px; background: none; color: #fff; font: inherit; font-size: 13px; cursor: pointer; }
.sp-qp-more:hover { border-color: #fff; }
/* a narrow desktop window has no room for a third column: the queue floats over the right of the page instead of squeezing it */
@media (min-width: 761px) and (max-width: 1100px) {
  .wm[data-mzt="spotify"].qp-open { grid-template-columns: var(--wm-side-w, 320px) minmax(0, 1fr); }
  .wm[data-mzt="spotify"].qp-open .sp-qp { grid-column: 2; justify-self: end; width: min(340px, 100%); z-index: 6; box-shadow: -8px 0 32px rgba(0,0,0,.55); }
}
@media (max-width: 760px) { .sp-qp { display: none !important; } .wm[data-mzt="spotify"].qp-open { grid-template-columns: var(--wm-side-w, 320px) minmax(0, 1fr); } }

.wm-right .wm-qual { margin: 0; padding: 0; flex: 0 1 auto; min-width: 0; white-space: nowrap; overflow: hidden; font-size: 10.5px; }
.wm-right .wm-qual .sp-q-txt { overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 1180px) { .wm-right .wm-qual .sp-q-txt { display: none; } }

/* ═══ MUSIC - Spotify "Modern" skin (desktop): rounded floating panels, a dark search pill, a floating player card, a white play button ═══
   It only undoes the classic desktop block above and rounds things off; the layout and behaviour are the same Spotify theme. */
@media (min-width: 761px) {
  .wm[data-mzt="spotify"][data-skin="modern"] { --sp-green: var(--mo-accent); --sp-green-hi: #3be477; --wm-glow: 30, 215, 96; --sp-panel: var(--mo-panel); --mo-bg: #000; --mo-panel: #121212; --mo-card: #141414; --mo-raise: #1f1f1f; --mo-raise2: #2a2a2a; --mo-raise3: #3a3a3a; --mo-muted: #b3b3b3; --mo-accent: #1ed760; padding: var(--safe-top) 8px 0; column-gap: 8px; background: var(--mo-bg); }
  .wm[data-mzt="spotify"][data-skin="modern"] .wm-side { grid-row: 2; gap: 8px; background: none; }
  .wm[data-mzt="spotify"][data-skin="modern"] .wm-split { grid-row: 2; margin-right: -3px; }
  .wm[data-mzt="spotify"][data-skin="modern"] .wm-top { grid-column: 1 / -1; padding: 8px 0; background: transparent; }
  .wm[data-mzt="spotify"][data-skin="modern"] .wm-view { border-radius: 14px; background: var(--mo-panel); }
  .wm[data-mzt="spotify"][data-skin="modern"] .sp-panel { background: var(--mo-panel); border-radius: 14px; }
  .wm[data-mzt="spotify"][data-skin="modern"] .sp-qp { border-radius: 14px; }
  .wm[data-mzt="spotify"][data-skin="modern"] .sp-homebtn, .wm[data-mzt="spotify"][data-skin="modern"] .sp-avatar { width: 48px; height: 48px; }
  .wm[data-mzt="spotify"][data-skin="modern"] .sp-avatar { font-size: 14px; background: radial-gradient(circle, #f573a0 0 16px, var(--mo-raise) 17px); }
  .wm[data-mzt="spotify"][data-skin="modern"] .wm-search { width: min(480px, 36vw); }
  .wm[data-mzt="spotify"][data-skin="modern"] .wm-search svg { left: 16px; width: 20px; height: 20px; color: var(--mo-muted); }
  .wm[data-mzt="spotify"][data-skin="modern"] .wm-search input { height: 48px; padding: 0 16px 0 48px; font-size: 16px; color: #fff; background: var(--mo-raise); border: 1px solid transparent; }
  .wm[data-mzt="spotify"][data-skin="modern"] .wm-search input::placeholder { color: var(--mo-muted); }
  .wm[data-mzt="spotify"][data-skin="modern"] .wm-search input:hover { background: var(--mo-raise2); border-color: var(--mo-raise3); }
  .wm[data-mzt="spotify"][data-skin="modern"] .wm-search input:focus { background: var(--mo-raise2); border-color: #fff; }
  .wm[data-mzt="spotify"][data-skin="modern"] .sp-nav { padding: 8px 12px; }
  .wm[data-mzt="spotify"][data-skin="modern"] .sp-navitem { gap: 20px; font-size: 16px; border-radius: 8px; }
  .wm[data-mzt="spotify"][data-skin="modern"] .sp-navitem.on { background: none; }
  .wm[data-mzt="spotify"][data-skin="modern"] .sp-lib-head { padding: 12px 16px 4px; }
  .wm[data-mzt="spotify"][data-skin="modern"] .sp-libtitle { gap: 12px; font-size: 16px; letter-spacing: 0; text-transform: none; }
  .wm[data-mzt="spotify"][data-skin="modern"] .sp-chips { padding: 8px 16px; }
  .wm[data-mzt="spotify"][data-skin="modern"] .sp-chip { height: 32px; padding: 0 12px; border-radius: 16px; font-size: 14px; background: var(--mo-raise2); }
  .wm[data-mzt="spotify"][data-skin="modern"] .sp-chip:hover { background: var(--mo-raise3); }
  .wm[data-mzt="spotify"][data-skin="modern"] .sp-chip.on, .wm[data-mzt="spotify"][data-skin="modern"] .sp-chip.pr, .wm[data-mzt="spotify"][data-skin="modern"] .sp-chip.on:hover { background: #fff; color: var(--mo-panel); }
  .wm[data-mzt="spotify"][data-skin="modern"]:not(.side-collapsed) .sp-li { gap: 12px; padding: 8px; border-radius: 8px; }
  .wm[data-mzt="spotify"][data-skin="modern"]:not(.side-collapsed) .sp-li .wm-art { width: 48px; height: 48px; border-radius: 6px; }
  .wm[data-mzt="spotify"][data-skin="modern"]:not(.side-collapsed) .sp-li .wm-art.round { border-radius: 50%; }
  .wm[data-mzt="spotify"][data-skin="modern"]:not(.side-collapsed) .sp-lit small { display: block; }
  .wm[data-mzt="spotify"][data-skin="modern"]:not(.side-collapsed) .sp-lit b { font-size: 16px; color: #fff; }
  .wm[data-mzt="spotify"][data-skin="modern"] .sp-li:hover { background: var(--mo-raise); }
  .wm[data-mzt="spotify"][data-skin="modern"] .sp-li.on { background: var(--mo-raise2); }
  .wm[data-mzt="spotify"][data-skin="modern"] .sp-cp { border-radius: 10px; }
  .wm[data-mzt="spotify"][data-skin="modern"] .sp-cards { margin: 0 -12px; column-gap: 0; }
  .wm[data-mzt="spotify"][data-skin="modern"] .sp-cardx { padding: 12px; border-radius: 12px; background: transparent; transition: background .25s; }
  .wm[data-mzt="spotify"][data-skin="modern"] .sp-cardx:hover { background: var(--mo-raise); }
  .wm[data-mzt="spotify"][data-skin="modern"] .sp-cover .wm-art { border-radius: 10px; }
  .wm[data-mzt="spotify"][data-skin="modern"] .sp-cover .wm-art.round { border-radius: 50%; }
  .wm[data-mzt="spotify"][data-skin="modern"] .sp-quick { border-radius: 8px; }
  .wm[data-mzt="spotify"][data-skin="modern"] .sp-tile { border-radius: 14px; }
  .wm[data-mzt="spotify"][data-skin="modern"] .sp-page { background: linear-gradient(var(--tint, #333) 0, var(--mo-panel) 420px) var(--mo-panel); }
  .wm[data-mzt="spotify"][data-skin="modern"] .wm-transport { background: var(--mo-card); border: 0; border-radius: 16px; margin: 8px 0 8px; padding: 0 16px; box-shadow: 0 8px 32px rgba(0,0,0,.5); }
  .wm[data-mzt="spotify"][data-skin="modern"] .wm-split.bar { top: -6px; }
  .wm[data-mzt="spotify"][data-skin="modern"] .wm-now-art { border-radius: 8px; }
  .wm[data-mzt="spotify"][data-skin="modern"] .wm-play, .wm[data-mzt="spotify"][data-skin="modern"] .wm-play:hover { background: #fff; color: #000; border: 0; }
  .wm[data-mzt="spotify"][data-skin="modern"] .wm-play:hover { transform: scale(1.06); }
  .wm[data-mzt="spotify"][data-skin="modern"] .wm-menu { border-radius: 10px; }
  /* keyboard focus must stay visible on the pill controls */
  .wm[data-mzt="spotify"][data-skin="modern"] :is(.sp-navitem, .sp-li, .sp-chip, .sp-cardx, .wm-play):focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
}