/* Midnight Bloom — coordinated public + PrusCMS skin. Loaded after legacy component CSS. */
:root {
  --ng-bg: var(--mb-bg);
  --ng-surface: var(--mb-surface);
  --ng-line: var(--mb-border);
}

html, body { background-color: var(--mb-bg); color: var(--mb-text); }
::selection { background: color-mix(in srgb, var(--mb-primary) 42%, transparent); color: var(--mb-text); }
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 3px solid var(--mb-focus);
  outline-offset: 3px;
}
:where(input, select, textarea) {
  color: var(--mb-text);
  background-color: var(--mb-surface);
  border-color: var(--mb-border);
}
:where(input, select, textarea)::placeholder { color: var(--mb-text-muted); opacity: .82; }
:where(button, input, select, textarea) { accent-color: var(--mb-primary); }

/* Public shell and navigation */
.app-shell { background: var(--mb-bg) !important; }
.sidebar, .main-content { background-color: var(--mb-bg) !important; color: var(--mb-text); }
.sidebar { border-right: 1px solid var(--mb-border) !important; }
.topbar, .home-topbar { background: color-mix(in srgb, var(--mb-surface) 94%, transparent) !important; border-color: var(--mb-border) !important; color: var(--mb-text) !important; }
.top-search, .search-box, .search-input, .sort-control select, .page-size-control select,
.catalog-view-tab, .catalog-filter, .filter-chip, .genre-chip, .icon-btn, .history-btn,
.sidebar-settings:hover, .library-add:hover, .quick-card, .quick-icon, .genre-tile,
.quote-section, .quote-next, .custom-home-content, .spotlight-card, .spotlight-play,
.song-card.search-match, .queue-pager button, .now-playing-queue, .now-playing-bottom-nav {
  background-color: var(--mb-surface) !important;
  color: var(--mb-text);
  border-color: var(--mb-border) !important;
}
.main-content { background: linear-gradient(180deg, #241B32 0%, #1D1728 300px, #17131F 700px) !important; }
.sidebar-brand, .brand-wordmark, .home-brand-name, .home-brand-wordmark, .section-heading h2,
.section-heading h2 span, .quick-card b, .genre-tile b, .spotlight-meta b, .quote-copy p,
.song-title, .playlist-row-meta strong, .top-search input, .top-search-submit,
.now-playing-screen, .now-playing-track-copy, .now-playing-controls button { color: var(--mb-text) !important; }
.sidebar-brand small, .sidebar-bottom p, .sidebar-library-head, .side-label, .nav-item,
.nav-item .nav-icon, .section-heading p, .section-link, .quick-card small, .quick-arrow,
.spotlight-meta small, .spotlight-meta .spotlight-genre, .genre-tile small, .sort-control,
.page-size-control, .playlist-row-meta p, .playlist-row-meta .song-category-label,
.now-playing-time, .now-playing-track-copy p, .queue-pager { color: var(--mb-text-muted) !important; }
.nav-item:hover, .nav-item.active, .nav-item:hover .nav-icon, .nav-item.active .nav-icon,
.mobile-nav a.active, .mobile-nav a[aria-current="page"] { color: var(--mb-primary) !important; }
.nav-item.active, .catalog-view-tab[aria-selected="true"], .catalog-view-tab.active,
.genre-chip.active, .filter-chip.active, .song-card.playlist-row.is-playing {
  background: color-mix(in srgb, var(--mb-primary) 14%, var(--mb-surface)) !important;
  border-color: color-mix(in srgb, var(--mb-primary) 48%, var(--mb-border)) !important;
  color: var(--mb-primary) !important;
}
.hero-banner, .hero-banner.home-hero, .concert-feature {
  background: linear-gradient(125deg, #241B32 0%, #39264D 58%, #493044 100%) !important;
  border-color: var(--mb-border) !important;
  color: var(--mb-text) !important;
}
.hero-banner h1 span, .section-heading h2 span, .hero-spark, .section-kicker,
.hero-banner .hero-eyebrow, .concert-feature-copy > span { color: var(--mb-primary) !important; }
.hero-banner p, .concert-feature-copy small { color: var(--mb-text-muted) !important; }
.hero-cta, .top-search-submit, .spotlight-play > span, .vinyl-label,
.now-playing-controls .now-playing-main-play, .concert-feature-play {
  background: linear-gradient(135deg, var(--mb-primary), #9D7FE8) !important;
  color: var(--mb-on-primary) !important;
  border-color: transparent !important;
}
.top-admin-link { background: var(--mb-secondary) !important; color: var(--mb-on-secondary) !important; }
.brand-mark, .sidebar-brand-mark { background: var(--mb-primary) !important; color: var(--mb-on-primary) !important; }
.mobile-nav, .now-playing-bottom-nav { background: #17131FF2 !important; border-color: var(--mb-border) !important; }
.mobile-nav a { color: var(--mb-text-muted) !important; }
.mobile-nav a.active, .mobile-nav a[aria-current="page"] { color: var(--mb-primary) !important; }
.now-playing-screen { background: radial-gradient(ellipse at 50% 25%, #39264D 0%, #241B32 45%, #17131F 82%) !important; }
.now-playing-glow { background: var(--mb-primary) !important; opacity: .16 !important; }
.now-playing-progress input { accent-color: var(--mb-primary) !important; }
.catalog-section { border-color: var(--mb-border) !important; }
.song-card.playlist-row { border-bottom-color: var(--mb-border) !important; }
.song-card.playlist-row:hover, .song-card.playlist-row.is-playing { background: color-mix(in srgb, var(--mb-primary) 10%, transparent) !important; }

/* Public request form and notification surfaces */
.request-page, .request-card, .notice-panel, .notice-panel-heading, .request-form,
.request-form label, .request-private-note { color: var(--mb-text); }
.request-card, .notice-panel { background: var(--mb-surface) !important; border-color: var(--mb-border) !important; }
.request-form input, .request-form textarea, .request-form select { background: #1D1728 !important; color: var(--mb-text) !important; border-color: var(--mb-border) !important; }
.request-submit { background: var(--mb-primary) !important; color: var(--mb-on-primary) !important; }
.request-error { background: color-mix(in srgb, var(--mb-danger) 13%, var(--mb-surface)) !important; color: var(--mb-danger) !important; border-color: color-mix(in srgb, var(--mb-danger) 50%, var(--mb-border)) !important; }

/* PrusCMS admin: replace the legacy light-purple panel palette with dark plum. */
.admin-page, .admin-login {
  background: radial-gradient(ellipse at 92% 0%, color-mix(in srgb, var(--mb-primary) 11%, transparent) 0, transparent 31%),
              radial-gradient(ellipse at 0% 24%, color-mix(in srgb, var(--mb-surface-elevated) 48%, transparent) 0, transparent 27%), var(--mb-bg) !important;
  color: var(--mb-text) !important;
}
.admin-top, .admin-panel, .admin-module, .admin-stats > div, .admin-module-card,
.admin-module-group, .admin-module-directory, .admin-nav-group, .login-card,
.admin-song-list, .admin-table, .table-wrap, .admin-page-return, .stat-card,
.admin-dashboard .admin-panel, .notice-compose-panel, .admin-nav-shell {
  background: var(--mb-surface) !important;
  color: var(--mb-text) !important;
  border-color: var(--mb-border) !important;
}
.admin-nav-shell { border-left-color: var(--mb-border) !important; box-shadow: -8px 8px 24px #08051066 !important; }
.admin-nav-group { background: color-mix(in srgb, var(--mb-surface-elevated) 48%, var(--mb-surface)) !important; }
.admin-nav-item { color: var(--mb-text-muted) !important; }
.admin-nav-item:hover, .admin-nav-item.is-current {
  background: color-mix(in srgb, var(--mb-primary) 14%, var(--mb-surface)) !important;
  border-color: color-mix(in srgb, var(--mb-primary) 40%, var(--mb-border)) !important;
  color: var(--mb-primary) !important;
}
.admin-nav-icon, .admin-module > span, .panel-icon { background: var(--mb-surface-elevated) !important; color: var(--mb-primary) !important; }
.admin-nav-item:nth-child(3n) .admin-nav-icon, .admin-nav-item:nth-child(4n) .admin-nav-icon,
.admin-module:nth-child(3n+2) > span, .admin-module:nth-child(3n) > span { background: var(--mb-surface-elevated) !important; color: var(--mb-secondary) !important; }
.admin-wrap h1, .login-card h1, .admin-panel h2, .admin-module b, .admin-stats strong,
.admin-page-heading, .admin-top-context strong, .admin-top-brand-copy strong { color: var(--mb-text) !important; }
.admin-wrap h1 span, .login-card h1 span, .admin-wrap .eyebrow, .login-card .eyebrow,
.admin-nav-caption, .section-kicker, .admin-module-card-icon { color: var(--mb-primary) !important; }
.admin-top .quiet-btn { background: var(--mb-surface-elevated) !important; border-color: var(--mb-border) !important; color: var(--mb-text) !important; }
.admin-top .quiet-btn:hover { background: var(--mb-primary) !important; color: var(--mb-on-primary) !important; }
.form-grid label, .login-card label, .category-form, .inline-form, .delete-category,
.admin-page label { color: var(--mb-text-muted) !important; }
.form-grid input, .form-grid select, .form-grid textarea, .login-card input,
.category-form input, .inline-form input, .delete-category select,
.admin-page input:not([type="checkbox"]):not([type="radio"]), .admin-page select, .admin-page textarea {
  background: #1D1728 !important; color: var(--mb-text) !important; border-color: var(--mb-border) !important;
}
.form-grid input::placeholder, .login-card input::placeholder { color: var(--mb-text-muted) !important; }
.form-grid input:focus, .form-grid select:focus, .form-grid textarea:focus, .login-card input:focus {
  border-color: var(--mb-primary) !important; outline: 3px solid color-mix(in srgb, var(--mb-primary) 35%, transparent) !important;
}
.primary-btn { background: linear-gradient(120deg, var(--mb-primary), #9D7FE8) !important; color: var(--mb-on-primary) !important; box-shadow: 0 5px 14px color-mix(in srgb, var(--mb-primary) 16%, transparent) !important; }
.primary-btn:hover { background: var(--mb-primary-hover) !important; color: var(--mb-on-primary) !important; }
.quiet-btn, .count-pill { background: var(--mb-surface-elevated) !important; color: var(--mb-text) !important; border-color: var(--mb-border) !important; }
.quiet-btn:hover { border-color: var(--mb-primary) !important; color: var(--mb-primary) !important; }
.danger-btn { background: color-mix(in srgb, var(--mb-danger) 13%, var(--mb-surface)) !important; color: var(--mb-danger) !important; border-color: color-mix(in srgb, var(--mb-danger) 42%, var(--mb-border)) !important; }
.notice { background: color-mix(in srgb, var(--mb-success) 12%, var(--mb-surface)) !important; color: var(--mb-success) !important; border-color: color-mix(in srgb, var(--mb-success) 40%, var(--mb-border)) !important; }
.notice.error { background: color-mix(in srgb, var(--mb-danger) 12%, var(--mb-surface)) !important; color: var(--mb-danger) !important; border-color: color-mix(in srgb, var(--mb-danger) 42%, var(--mb-border)) !important; }
.notice.warning { background: color-mix(in srgb, var(--mb-warning) 12%, var(--mb-surface)) !important; color: var(--mb-warning) !important; border-color: color-mix(in srgb, var(--mb-warning) 42%, var(--mb-border)) !important; }
.admin-table th, .admin-table td, .admin-song-list article, .audit-list article,
.category-form, .admin-page-return { border-color: var(--mb-border) !important; }
.admin-table th { background: var(--mb-surface-elevated) !important; color: var(--mb-text-muted) !important; }
.admin-table td { color: var(--mb-text) !important; }
.status-badge, .count-pill, .admin-module-count { border-color: var(--mb-border) !important; }
.admin-module:hover, .admin-module-card:hover { border-color: var(--mb-primary) !important; box-shadow: 0 15px 32px color-mix(in srgb, var(--mb-primary) 12%, transparent) !important; }
.admin-page a:not(.primary-btn):not(.quiet-btn):not(.danger-btn) { color: var(--mb-primary); }
.admin-page a:not(.primary-btn):not(.quiet-btn):not(.danger-btn):hover { color: var(--mb-primary-hover); }
.admin-page .muted, .admin-page small, .admin-page .field-hint { color: var(--mb-text-muted); }

/* Error and maintenance surfaces share the same theme. */
.error-page { background: radial-gradient(ellipse at 50% 0%, #39264D 0%, var(--mb-bg) 68%) !important; color: var(--mb-text) !important; }
.error-brand, .error-home { color: var(--mb-primary) !important; }
.error-copy, .error-foot { color: var(--mb-text-muted) !important; }


/* Player source URL and compact, readable public catalog pagination. */
.catalog-pagination{gap:12px}
.catalog-page-status{min-width:116px;color:var(--mb-text,#F7F2FF);font-size:12px;font-weight:700;text-align:center;white-space:nowrap}
.catalog-pagination .pagination-arrow{min-width:42px;min-height:40px;border-radius:12px}
@media(max-width:420px){.catalog-pagination{gap:8px}.catalog-page-status{min-width:104px;font-size:11px}.catalog-pagination .pagination-arrow{min-width:38px;min-height:38px}}

/* Waveform Focus — compact header and unified playback panel. Uses existing Midnight Bloom tokens. */
.now-playing-screen {
  padding-top: calc(8px + env(safe-area-inset-top));
  padding-left: clamp(14px, 4vw, 40px);
  padding-right: clamp(14px, 4vw, 40px);
}
.now-playing-header {
  width: min(100%, 760px);
  min-height: 46px;
  grid-template-columns: 42px minmax(0, 1fr) 42px;
  gap: 10px;
  padding: 0 0 10px;
  border-bottom: 1px solid color-mix(in srgb, var(--mb-border) 72%, transparent);
}
.now-playing-icon {
  width: 40px;
  height: 40px;
  min-width: 40px;
  min-height: 40px;
  border-radius: 13px;
  background: color-mix(in srgb, var(--mb-surface-elevated) 72%, transparent) !important;
  border-color: var(--mb-border) !important;
  color: var(--mb-text) !important;
}
.now-playing-heading { text-align: center; }
.now-playing-heading b { font-size: 13px; letter-spacing: .01em; }
.now-playing-content {
  width: min(100%, 760px);
  padding-top: clamp(12px, 3vh, 24px);
  padding-bottom: 16px;
}
.now-playing-wave-progress {
  width: min(100%, 560px);
  margin: 0 auto;
  padding: 15px 16px 12px;
  border: 1px solid var(--mb-border);
  border-bottom: 0;
  border-radius: 20px 20px 0 0;
  background: color-mix(in srgb, var(--mb-surface) 94%, transparent);
  box-shadow: 0 12px 30px color-mix(in srgb, #000 12%, transparent);
}
.now-playing-wave-progress .waveform,
.now-playing-wave-progress .waveform svg { height: 42px; }
.now-playing-wave-progress .waveform-track {
  stroke: color-mix(in srgb, var(--mb-text-muted) 44%, transparent);
  stroke-width: 2.2;
}
.now-playing-wave-progress .waveform-progress {
  stroke: var(--mb-primary);
  stroke-width: 3;
  filter: drop-shadow(0 0 3px color-mix(in srgb, var(--mb-primary) 35%, transparent));
}
.now-playing-wave-progress .waveform-thumb {
  width: 10px;
  height: 10px;
  border: 2px solid var(--mb-surface);
  background: var(--mb-primary);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--mb-primary) 25%, transparent);
}
.now-playing-time {
  margin-top: 8px;
  font-size: 10px;
  color: var(--mb-text-muted) !important;
}
.now-playing-controls {
  width: min(100%, 560px);
  margin: 0 auto 8px;
  padding: 14px 14px 16px;
  gap: clamp(5px, 2.2vw, 16px);
  border: 1px solid var(--mb-border);
  border-top: 1px solid color-mix(in srgb, var(--mb-border) 65%, transparent);
  border-radius: 0 0 20px 20px;
  background: color-mix(in srgb, var(--mb-surface) 94%, transparent);
}
.now-playing-controls button {
  background: color-mix(in srgb, var(--mb-surface-elevated) 34%, transparent) !important;
  border: 1px solid color-mix(in srgb, var(--mb-border) 82%, transparent) !important;
  color: var(--mb-text) !important;
  transition: background-color .16s ease, border-color .16s ease, transform .16s ease;
}
.now-playing-controls button:hover {
  background: color-mix(in srgb, var(--mb-primary) 12%, var(--mb-surface-elevated)) !important;
  border-color: color-mix(in srgb, var(--mb-primary) 42%, var(--mb-border)) !important;
}
.now-playing-controls .now-playing-main-play {
  background: var(--mb-primary) !important;
  border-color: transparent !important;
  color: var(--mb-on-primary) !important;
  box-shadow: 0 7px 22px color-mix(in srgb, var(--mb-primary) 25%, transparent) !important;
}
.now-playing-controls .now-playing-main-play:hover {
  background: var(--mb-primary-hover) !important;
}
@media (max-width: 420px) {
  .now-playing-screen { padding-left: 12px; padding-right: 12px; }
  .now-playing-header { grid-template-columns: 40px minmax(0, 1fr) 40px; gap: 8px; }
  .now-playing-icon { width: 38px; height: 38px; min-width: 38px; min-height: 38px; }
  .now-playing-wave-progress { padding: 12px 12px 10px; }
  .now-playing-controls { padding: 12px 8px 13px; gap: 5px; }
  .now-playing-controls button { flex-basis: 40px; width: 40px; height: 40px; min-width: 40px; min-height: 40px; font-size: 20px; }
  .now-playing-controls #nowPlayingToggle { flex-basis: 58px; width: 58px; height: 58px; min-width: 58px; min-height: 58px; font-size: 27px; }
}
@media (prefers-reduced-motion: reduce) {
  .now-playing-controls button { transition: none; }
}