/* Public app palette: charcoal surfaces, soft neutrals and a restrained rose accent. */
body.app-page {
  --canvas:#f4f1ef;
  --canvas-top:#eee8e6;
  --canvas-glow:#f3e5e7;
  --panel:#fffdfc;
  --ink:#343135;
  --muted:#6f6870;
  --line:#e3dcda;
  --accent:#a43b49;
  --accent-soft:#f8e9ec;
  --accent-line:#e9c4cb;
  --action:#b74755;
  --action-hover:#a33d49;
  --action-text:#ffffff;
  --surface-soft:#eee9e7;
  --row-hover:#faf0f1;
  --chrome:#2e2a2d;
  --chrome-line:#494247;
  --chrome-ink:#f3eff1;
  --chrome-muted:#c7bec4;
  --footer-background:#2e2a2d;
  --footer-line:#494247;
  --footer-ink:#f3eff1;
  --footer-muted:#c7bec4;
  --footer-accent:#efb0b8;
  --scrollbar:#959aa3;
  --scrollbar-hover:#767c86;
  background-color:var(--canvas);
  color:var(--ink);
}
html.dark body.app-page {
  --canvas:#262326;
  --canvas-top:#2e272c;
  --canvas-glow:#49303855;
  --panel:#302c30;
  --ink:#f3eff1;
  --muted:#beb5bc;
  --line:#4a4349;
  --accent:#eea5af;
  --accent-soft:#453239;
  --accent-line:#76515b;
  --action:#b74755;
  --action-hover:#a33d49;
  --surface-soft:#393438;
  --row-hover:#3c3037;
  --chrome:#242124;
  --footer-background:#242124;
  --scrollbar:#626873;
  --scrollbar-hover:#828894;
  background-color:var(--canvas);
  color:var(--ink);
}

/* Match header and footer to the light palette when the admin switch is on. */
html:not(.dark).theme-chrome-match body.app-page {
  --chrome:var(--panel);
  --chrome-line:var(--line);
  --chrome-ink:var(--ink);
  --chrome-muted:var(--muted);
  --footer-background:var(--panel);
  --footer-line:var(--line);
  --footer-ink:var(--ink);
  --footer-muted:var(--muted);
  --footer-accent:var(--accent);
}

/* One restrained background across the full page; cards stay solid for readability. */
html body.app-page,html.dark body.app-page {
  background-color:var(--canvas);
  background-image:radial-gradient(ellipse 85% 480px at 50% 0,var(--canvas-glow),transparent 72%),
                   linear-gradient(180deg,var(--canvas-top),var(--canvas) 480px);
  background-repeat:no-repeat;
  background-size:100% 560px,100% 100%;
}

/* Existing utility classes and dynamic selections share the same color tokens. */
.app-page .bg-blue-600 { background-color:var(--action); color:var(--action-text); }
.app-page .hover\:bg-blue-500:hover { background-color:var(--action-hover); }
.app-page .text-blue-600,.app-page .text-blue-400,
html.dark .app-page .dark\:text-blue-400 { color:var(--accent); }
.app-page .border-blue-500 { border-color:var(--accent-line); }
.app-page .wave-bar { background:var(--accent); }

.app-page #app-header {
  background:var(--chrome);
  border-color:var(--chrome-line);
  color:var(--chrome-ink);
  box-shadow:0 2px 12px #00000008;
}
.app-page .app-brand > span { color:var(--chrome-ink); }
.app-page .app-brand > div { background:var(--action); }
.app-page #mode-navigation { background:#ffffff08; border-color:var(--chrome-line); }
.app-page #mode-navigation button { color:var(--chrome-muted); }
.app-page #mode-navigation button.bg-blue-600 { background:var(--action); color:var(--action-text); }
.app-page .header-tools > * { background:#ffffff06; border-color:var(--chrome-line); color:var(--chrome-muted); }
.app-page .header-tools > :is(button,a):hover { background:#ffffff12; color:var(--chrome-ink); }
.app-page .header-tools .language-trigger { background:#ffffff06; border-color:var(--chrome-line); border-radius:12px; color:var(--chrome-muted); }
.app-page .header-tools .language-trigger:hover,.app-page .header-tools .language-trigger[aria-expanded="true"] { background:#ffffff12; border-color:var(--chrome-line); color:var(--chrome-ink); }
.app-page .header-tools i { color:inherit; }
html:not(.dark).theme-chrome-match .app-page #mode-navigation,
html:not(.dark).theme-chrome-match .app-page .header-tools > *,
html:not(.dark).theme-chrome-match .app-page .header-tools .language-trigger { background:var(--surface-soft); }
html:not(.dark).theme-chrome-match .app-page .header-tools > :is(button,a):hover,
html:not(.dark).theme-chrome-match .app-page .header-tools .language-trigger:hover,
html:not(.dark).theme-chrome-match .app-page .header-tools .language-trigger[aria-expanded="true"] { background:var(--row-hover); }

.app-page .search-hero h1,.app-page #search-empty h3 { color:var(--ink); }
.app-page #search-input,.app-page #url-input { color:var(--ink); }
.app-page #search-input::placeholder,.app-page #url-input::placeholder { color:var(--muted); opacity:1; }
.app-page #search-input[aria-invalid="true"] { color:var(--accent); }
.app-page .search-field > div { background:var(--panel); border-color:var(--line); box-shadow:0 4px 18px #00000004; }
.app-page .search-field > div:focus-within { border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-soft); }
.app-page .search-field > div > i { color:var(--muted); }
.app-page #btn-search { background:var(--action); color:var(--action-text); }
.app-page #btn-search:hover:not(:disabled) { background:var(--action-hover); }
.app-page #section-url > div:last-child { background:var(--panel); border-color:var(--line); }
.app-page .url-field { background:var(--surface-soft); border-color:var(--line); }
.app-page .source-filters button,.app-page #advanced-filters-panel button {
  background:var(--surface-soft); border-color:var(--line); color:var(--muted); box-shadow:none;
}
.app-page .source-filters button:hover,.app-page #advanced-filters-panel button:hover { color:var(--ink); border-color:var(--accent-line); }
.app-page .source-filters button i { color:inherit; }
.app-page .source-filters button[aria-pressed="true"],.app-page #advanced-filters-panel button[aria-pressed="true"] {
  background:var(--accent-soft); border-color:var(--accent-line); color:var(--accent); box-shadow:none;
}
.app-page #btn-toggle-filters { background:var(--panel); color:var(--muted); border-color:var(--line); }
.app-page #search-empty > div { background:var(--accent-soft); color:var(--accent); }
.app-page #search-loading { color:var(--muted); }
.app-page #search-loading i { color:var(--accent); }

.app-page #results-list { background:var(--panel); border-color:var(--line); box-shadow:0 4px 18px #00000004; }
.app-page .track-card { background:var(--panel); }
.app-page .track-card:hover { background:var(--row-hover); }
.app-page .track-title { color:var(--ink); }
.app-page .track-card:hover .track-title { color:var(--accent); }
.app-page .track-artist,.app-page .track-separator,.app-page .results-actions-label { color:var(--muted); }
.app-page #results-list .track-badges > span { background:var(--surface-soft); border-color:var(--line); color:var(--muted); }
.app-page .track-play { background:var(--surface-soft); border-color:var(--line); color:var(--muted); }
.app-page .track-play:hover,.app-page .track-play[aria-pressed="true"] { background:var(--accent-soft); border-color:var(--accent-line); color:var(--accent); }
.app-page .track-card.is-current { background:var(--accent-soft); }
.app-page .track-card.is-current .track-play { background:var(--action); color:var(--action-text); border-color:var(--action); }
.app-page .track-download { background:var(--action); color:var(--action-text); box-shadow:none; }
.app-page .track-download:hover { background:var(--action-hover); }
.app-page #pagination-buttons button { background:var(--panel); border-color:var(--line); color:var(--muted); }
.app-page #pagination-buttons button.bg-blue-600 { background:var(--accent-soft); border-color:var(--accent-line); color:var(--accent); }

.app-page #app-footer {
  --ink:var(--footer-ink);
  --muted:var(--footer-muted);
  --line:var(--footer-line);
  --accent:var(--footer-accent);
  background:var(--footer-background);
  border-color:var(--footer-line);
  color:var(--footer-ink);
}
.app-page .footer-logo { background:#ffffff0c; color:var(--footer-accent); box-shadow:none; }
.app-page .footer-nav i { color:var(--footer-accent); }
.app-page .footer-bottom { border-color:var(--footer-line); }
html:not(.dark).theme-chrome-match .app-page .footer-logo { background:var(--accent-soft); }
.app-page #player-download-btn,.app-page #player-details button,.app-page .player-art { background:var(--accent-soft); color:var(--accent); }
.app-page #btn-play-toggle { background:var(--action); color:var(--action-text); }

/* Neutral scrollbars in both themes. */
body.app-page { scrollbar-color:var(--scrollbar) transparent; }
html:has(body.app-page) ::-webkit-scrollbar-track { background:var(--canvas); }
body.app-page::-webkit-scrollbar-thumb,body.app-page ::-webkit-scrollbar-thumb { background:var(--scrollbar); }
body.app-page::-webkit-scrollbar-thumb:hover,body.app-page ::-webkit-scrollbar-thumb:hover { background:var(--scrollbar-hover); }

.app-page .text-emerald-400, .app-page .text-emerald-500, .app-page .text-emerald-600 { color:var(--success); }
.app-page .bg-emerald-500\/5, .app-page .bg-emerald-500\/10, .app-page .bg-emerald-500\/15, .app-page .bg-emerald-500\/20, .app-page .bg-emerald-500\/30 { background-color:var(--success-soft); }
.app-page .border-emerald-500\/20, .app-page .border-emerald-500\/30, .app-page .border-emerald-500\/40 { border-color:var(--success-line); }
.app-page .bg-emerald-500,.app-page .bg-emerald-400 { background-color:var(--success); }

.app-page .text-amber-400, .app-page .text-amber-500 { color:var(--warning); }
.app-page .bg-amber-500\/5, .app-page .bg-amber-500\/10, .app-page .bg-amber-500\/15, .app-page .bg-amber-500\/20, .app-page .bg-amber-500\/30 { background-color:var(--warning-soft); }
.app-page .border-amber-500\/20, .app-page .border-amber-500\/30, .app-page .border-amber-500\/40 { border-color:var(--warning-line); }
.app-page .bg-amber-500,.app-page .bg-amber-400 { background-color:var(--warning); }

.app-page .text-red-400, .app-page .text-red-500, .app-page .text-red-600 { color:var(--error); }
.app-page .bg-red-500\/5, .app-page .bg-red-500\/10, .app-page .bg-red-500\/15, .app-page .bg-red-500\/20, .app-page .bg-red-500\/30 { background-color:var(--error-soft); }
.app-page .border-red-500\/20, .app-page .border-red-500\/30, .app-page .border-red-500\/40 { border-color:var(--error-line); }
.app-page .bg-red-500,.app-page .bg-red-400 { background-color:var(--error); }

.app-page .text-sky-300, .app-page .text-sky-400, .app-page .text-sky-500, .app-page .text-sky-600 { color:var(--info); }
.app-page .bg-sky-500\/5, .app-page .bg-sky-500\/10, .app-page .bg-sky-500\/15, .app-page .bg-sky-500\/20, .app-page .bg-sky-500\/30 { background-color:var(--info-soft); }
.app-page .border-sky-500\/20, .app-page .border-sky-500\/30, .app-page .border-sky-500\/40 { border-color:var(--info-line); }
.app-page .bg-sky-500,.app-page .bg-sky-400 { background-color:var(--info); }

.app-page #search-input[aria-invalid="true"] { color:var(--error); }
.app-page .bg-blue-500\/5 { background-color:var(--info-soft); }
.app-page .border-blue-500\/20 { border-color:var(--info-line); }
.app-page .text-orange-400,.app-page .text-orange-500,.app-page .text-orange-600 { color:var(--warning); }
.app-page .bg-orange-500\/10 { background-color:var(--warning-soft); }
.app-page .border-orange-500\/20,.app-page .border-orange-500\/30 { border-color:var(--warning-line); }

/* Download errors stay in the page; progress stays on the corresponding button. */
.app-page #download-feedback {
  max-width: 80rem;
  margin: 0 auto 1rem;
  padding: .8rem 1rem;
  border: 1px solid var(--error-line);
  border-radius: .75rem;
  background: var(--error-soft);
  color: var(--error);
  font-size: .875rem;
}
.app-page .track-download[aria-busy="true"] {
  opacity: .8;
  cursor: progress;
}