/* ============================================================================
   MUSIC PAL — Riviera Dusk / Daylight adapter (R6, Fable 5.1 Music-Pal build 2026-09-14; R5 base). Coral primary, amber secondary.
   Authoritative design: AUFTRAG-SOL-DESIGN-R6-2026-09-14.md (§1 Karla, §2 solid data surfaces, §3 "Design", §4 flat header,
   §5 Music Pal shell as the template) and the Riviera Dusk Design Studio (artboards Main / Releases / Typografie / Komponenten).
   Loads after themes.css and tailwind-remap.css. Scoped to html[data-music-app="music-pal"][data-theme=riviera|daylight].
   Re-owns the inline styles the JSX writes for shell chrome (root font, ambient orbs, sidebar, header, modal shell, stat cards,
   cards, login) and the app's own index.css specials (glass utilities, glow, stat accents, forced select colours).
   Selector evidence (work/INLINE-STYLE-PROBE.json, Chromium 153): React writes inline styles through the CSSOM, so the `style`
   attribute a browser exposes is the SERIALISED declaration — colours as "rgba(255, 255, 255, 0.08)" (spaces), lengths as "0px",
   shadows as "<color> 0px 1px 0px inset". Every [style*=…] fallback therefore carries the serialised form; the JSX-source form
   is kept only where it costs nothing. Where a semantic hook (data-mos-role) or a stable structure exists it is used first.
   ========================================================================== */

/* ---- shell */
html[data-music-app="music-pal"]:is([data-theme="riviera"], [data-theme="daylight"]) body { font-family: var(--mos-font-ui); font-size: 15px; letter-spacing: 0; background: var(--mos-bg); color: var(--mos-text-body); }
html[data-music-app="music-pal"]:is([data-theme="riviera"], [data-theme="daylight"]) body.bg-slate-900 { background-color: var(--mos-bg); }
html[data-music-app="music-pal"]:is([data-theme="riviera"], [data-theme="daylight"]) [style*="DM Sans"] { font-family: var(--mos-font-ui) !important; }
html[data-music-app="music-pal"]:is([data-theme="riviera"], [data-theme="daylight"]) :is([data-mos-role="ambient"], .fixed.inset-0.pointer-events-none.overflow-hidden) { display: none; }
html[data-music-app="music-pal"]:is([data-theme="riviera"], [data-theme="daylight"]) :is([data-mos-role="canvas"], .min-h-screen[style*="#0a0f1a"], .min-h-screen[style*="rgb(10, 15, 26)"], .min-h-screen.bg-\[\#080f1a\]) { background: var(--mos-bg) !important; color: var(--mos-text-body); }
html[data-music-app="music-pal"]:is([data-theme="riviera"], [data-theme="daylight"]) .fixed.inset-0.z-\[100\].bg-\[\#080f1a\] { background: var(--mos-bg) !important; }

/* ---- sidebar (template §5: 256 px, surface, 1 px line right; logo block 36-px tile + Karla 700/16 uppercase .04em + 13 px muted subtitle) */
html[data-music-app="music-pal"]:is([data-theme="riviera"], [data-theme="daylight"]) :is(aside[data-mos-role="sidebar"], aside[style*="#08121f"], aside[style*="rgb(8, 18, 31)"]) {
  background: var(--mos-surface) !important; box-shadow: 1px 0 0 var(--mos-line) !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important;
}
/* the template width is 256 px; the native w-64 / md:ml-64 resolve to 16rem = 248 px under this app's 15.5 px root font.
   Desktop only (the phone drawer keeps its native geometry); main keeps the matching margin. */
@media (min-width: 768px) {
  html[data-music-app="music-pal"]:is([data-theme="riviera"], [data-theme="daylight"]) aside[data-mos-role="sidebar"] { width: 256px; }
  html[data-music-app="music-pal"]:is([data-theme="riviera"], [data-theme="daylight"]) aside[data-mos-role="sidebar"] ~ main { margin-left: 256px; }
}
/* logo block and footer dividers: structural (first/last child of the sidebar) + serialised inline fallbacks */
html[data-music-app="music-pal"]:is([data-theme="riviera"], [data-theme="daylight"]) :is(aside[data-mos-role="sidebar"] > div:first-child, aside [style*="rgba(255, 255, 255, 0.04) 0px 1px 0px"], aside [style*="0 1px 0 rgba(255,255,255,0.04)"]) { box-shadow: 0 1px 0 var(--mos-line-soft) !important; padding: 16px 20px; gap: 12px; }
html[data-music-app="music-pal"]:is([data-theme="riviera"], [data-theme="daylight"]) :is(aside[data-mos-role="sidebar"] > div:last-child, aside [style*="rgba(255, 255, 255, 0.04) 0px -1px 0px"], aside [style*="0 -1px 0 rgba(255,255,255,0.04)"]) { box-shadow: 0 -1px 0 var(--mos-line-soft) !important; }
html[data-music-app="music-pal"]:is([data-theme="riviera"], [data-theme="daylight"]) aside[data-mos-role="sidebar"] > div:first-child img.w-9 { width: 36px; height: 36px; border-radius: var(--mos-radius-lg); box-shadow: inset 0 1px 0 rgba(255,255,255,.15), 0 2px 8px rgba(0,0,0,.4) !important; }
html[data-music-app="music-pal"]:is([data-theme="riviera"], [data-theme="daylight"]) aside[data-mos-role="sidebar"] > div:first-child .rounded-full.border-2 { background-color: var(--mos-success); border-color: var(--mos-surface) !important; box-shadow: none !important; }
html[data-music-app="music-pal"]:is([data-theme="riviera"], [data-theme="daylight"]) aside h1 { font: 700 16px/1.2 var(--mos-font-display); letter-spacing: .04em; text-transform: uppercase; color: var(--mos-text); }
html[data-music-app="music-pal"]:is([data-theme="riviera"], [data-theme="daylight"]) aside h1 + p { font-size: 13px; line-height: 1.25; color: var(--mos-text-muted); }
/* nav (template §5): entries 15 px / 500, padding 10×14, radius 12; active = accent-soft fill, 1 px accent-edge, icon accent-text,
   text cream; inactive icons dim, hover raise-1 + label text. The active button is the one carrying the bg-gradient-to-r utility
   (App.jsx: `isActive || isSubmenuActive ? "bg-gradient-to-r …"`); its gradient is switched off — no gradient behind chrome. */
html[data-music-app="music-pal"]:is([data-theme="riviera"], [data-theme="daylight"]) aside nav button { font-family: var(--mos-font-ui); }
html[data-music-app="music-pal"]:is([data-theme="riviera"], [data-theme="daylight"]) aside nav > div > button { padding: 10px 14px; gap: 12px; border-radius: var(--mos-radius-lg); }
html[data-music-app="music-pal"]:is([data-theme="riviera"], [data-theme="daylight"]) aside nav button.rounded-xl { border-radius: var(--mos-radius-lg); }
html[data-music-app="music-pal"]:is([data-theme="riviera"], [data-theme="daylight"]) aside nav button span.font-medium { font-size: 15px; font-weight: 500; }
html[data-music-app="music-pal"]:is([data-theme="riviera"], [data-theme="daylight"]) aside nav > div > button:not([class*="bg-gradient-to-r"]) { color: var(--mos-text-muted); }
html[data-music-app="music-pal"]:is([data-theme="riviera"], [data-theme="daylight"]) aside nav > div > button:not([class*="bg-gradient-to-r"]) svg { color: var(--mos-text-dim); }
html[data-music-app="music-pal"]:is([data-theme="riviera"], [data-theme="daylight"]) aside nav > div > button:not([class*="bg-gradient-to-r"]):hover { background-color: var(--mos-raise-1); color: var(--mos-text-label); }
html[data-music-app="music-pal"]:is([data-theme="riviera"], [data-theme="daylight"]) aside nav > div > button:not([class*="bg-gradient-to-r"]):hover svg { color: var(--mos-text-secondary); }
html[data-music-app="music-pal"]:is([data-theme="riviera"], [data-theme="daylight"]) aside nav button[class*="bg-gradient-to-r"],
html[data-music-app="music-pal"]:is([data-theme="riviera"], [data-theme="daylight"]) aside nav button[style*="inset 0 1px 0 rgba(255,255,255,0.08)"] {
  box-shadow: var(--mos-inset-highlight) !important; background-image: none !important; background-color: var(--mos-accent-soft) !important; border-color: var(--mos-accent-edge) !important; color: var(--mos-text) !important;
}
html[data-music-app="music-pal"]:is([data-theme="riviera"], [data-theme="daylight"]) aside nav button[class*="bg-gradient-to-r"] svg { color: var(--mos-accent-text); }
/* submenu entries: 14 px, active on raise-2 with accent text (Komponenten artboard "Sidebar-Zustände") */
html[data-music-app="music-pal"]:is([data-theme="riviera"], [data-theme="daylight"]) aside nav .ml-6 button { border-radius: var(--mos-radius-md); }
html[data-music-app="music-pal"]:is([data-theme="riviera"], [data-theme="daylight"]) aside nav .ml-6 button[class*="bg-white/"] { background-color: var(--mos-raise-2); color: var(--mos-text-label); }
html[data-music-app="music-pal"]:is([data-theme="riviera"], [data-theme="daylight"]) aside nav .ml-6 button[class*="bg-white/"] svg { color: var(--mos-accent-text); }

/* ---- header (§4: flat on surface, 1 px line below, no dusk field, no vignette, no drop shadow; §5: padding 16×32, icon tile 36 px raise-2,
   title 600/24 Karla −.01em cream, subtitle 11 px .04em text-secondary; search field 280 × 36 on surface-control) */
html[data-music-app="music-pal"]:is([data-theme="riviera"], [data-theme="daylight"]) :is(header[data-mos-role="header"], header[style*="rgba(8,15,26"], header[style*="rgba(8, 15, 26"]) {
  background: var(--mos-surface) !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important;
  box-shadow: none !important; border-bottom: 1px solid var(--mos-line);
}
@media (min-width: 768px) {
  html[data-music-app="music-pal"]:is([data-theme="riviera"], [data-theme="daylight"]) header[data-mos-role="header"] { padding: 16px 32px; }
  html[data-music-app="music-pal"]:is([data-theme="riviera"], [data-theme="daylight"]) header[data-mos-role="header"] > .flex.justify-between > div:last-child > .relative > input { width: 280px; height: 36px; }
}
html[data-music-app="music-pal"]:is([data-theme="riviera"], [data-theme="daylight"]) header h2 { font: 600 24px/1.15 var(--mos-font-display); color: var(--mos-text); letter-spacing: -.01em; }
html[data-music-app="music-pal"]:is([data-theme="riviera"], [data-theme="daylight"]) header h2 + p { font-size: var(--mos-fs-caption); letter-spacing: .04em; color: var(--mos-text-secondary); margin-top: 2px; }
/* icon tile: structural (the only w-9 h-9 tile inside the header) + serialised inline fallback */
html[data-music-app="music-pal"]:is([data-theme="riviera"], [data-theme="daylight"]) :is(header[data-mos-role="header"] .w-9.h-9.rounded-xl, header [style*="rgba(255, 255, 255, 0.08) 0px 1px 0px inset"], header [style*="inset 0 1px 0 rgba(255,255,255,0.08)"]) {
  box-shadow: var(--mos-inset-highlight) !important; background-color: var(--mos-raise-2) !important; background-image: none; border-radius: var(--mos-radius-lg); color: var(--mos-accent-text); width: 36px; height: 36px;
}
/* search field: structural under the header hook (App.jsx: header > div.flex.justify-between > div:last-child > div.relative > input) */
html[data-music-app="music-pal"]:is([data-theme="riviera"], [data-theme="daylight"]) header[data-mos-role="header"] > .flex.justify-between > div:last-child > .relative > input,
html[data-music-app="music-pal"]:is([data-theme="riviera"], [data-theme="daylight"]) header input[style*="rgba(255, 255, 255, 0.05)"] {
  background: var(--mos-surface-control) !important; box-shadow: var(--mos-shadow-control) !important; border: 1px solid var(--mos-surface-control-line); color: var(--mos-text-label); border-radius: var(--mos-radius-md);
}

/* ---- panels: modal shell, stat cards, cards, glass utilities */
html[data-music-app="music-pal"]:is([data-theme="riviera"], [data-theme="daylight"]) :is([data-mos-role="modal"], [style*="rgba(15,25,45,0.97)"], [style*="rgba(15, 25, 45, 0.97)"]) {
  background: var(--mos-surface) !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important;
  border: 1px solid var(--mos-line); border-radius: var(--mos-radius-lg) !important; box-shadow: var(--mos-shadow-float) !important;
}
/* modal head line (Komponenten: 0 1px 0 line-soft), structural first child + serialised fallback; title 600/18 Karla */
html[data-music-app="music-pal"]:is([data-theme="riviera"], [data-theme="daylight"]) :is([data-mos-role="modal"] > div:first-child, [data-mos-role="modal"] > div[style*="rgba(255, 255, 255, 0.05) 0px 1px 0px"], [style*="rgba(15,25,45,0.97)"] > div[style*="0 1px 0 rgba(255,255,255,0.05)"]) { box-shadow: 0 1px 0 var(--mos-line-soft) !important; }
html[data-music-app="music-pal"]:is([data-theme="riviera"], [data-theme="daylight"]) :is([data-mos-role="modal-title"], [style*="rgba(15,25,45,0.97)"] h3.text-\[15px\], [style*="rgba(15, 25, 45, 0.97)"] h3.text-\[15px\]) { font: 600 18px/1.3 var(--mos-font-display); color: var(--mos-text); letter-spacing: -.01em; }
/* stat cards (§5: surface-raised, 1 px line, radius 16, padding 20, shadow-panel; label 10.5 px 600 .1em muted; value 700/24 cream
   tabular; delta 14 px 500). The value size is explicit because text-2xl resolves to 23.25 px under the 15.5 px root. */
html[data-music-app="music-pal"]:is([data-theme="riviera"], [data-theme="daylight"]) :is([data-mos-role="stat-card"], [style*="rgba(255,255,255,0.07) 0%"], [style*="rgba(255, 255, 255, 0.07) 0%"]) {
  background: var(--mos-surface-raised) !important; border: 1px solid var(--mos-line); box-shadow: var(--mos-shadow-panel) !important; border-radius: var(--mos-radius-xl); padding: 20px;
}
html[data-music-app="music-pal"]:is([data-theme="riviera"], [data-theme="daylight"]) [data-mos-role="stat-card"] p.uppercase.tracking-widest { font: 600 10.5px/1 var(--mos-font-ui); letter-spacing: .1em; color: var(--mos-text-muted); margin-bottom: 10px; }
html[data-music-app="music-pal"]:is([data-theme="riviera"], [data-theme="daylight"]) [data-mos-role="stat-card"] .text-2xl { font: 700 24px/1.1 var(--mos-font-ui); font-variant-numeric: tabular-nums; letter-spacing: -.01em; color: var(--mos-text); white-space: nowrap; }
html[data-music-app="music-pal"]:is([data-theme="riviera"], [data-theme="daylight"]) [data-mos-role="stat-card"] p.text-sm.mt-2 { font-size: 14px; font-weight: 500; margin-top: 8px; }
html[data-music-app="music-pal"]:is([data-theme="riviera"], [data-theme="daylight"]) [data-mos-role="stat-card"] .w-9.h-9 { width: 36px; height: 36px; background-color: var(--mos-raise-1) !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.1) !important; border-radius: var(--mos-radius-lg); }
/* content cards / panels (§5 "Karten": surface-raised, 1 px line, radius 16, padding 20) — the white-alpha gradient containers are
   flattened to surface-raised by tailwind-remap; here they get the card radius and padding. Table containers (the same classes
   with a table inside) keep the 12 px panel radius of the Releases artboard and their zero padding. */
html[data-music-app="music-pal"]:is([data-theme="riviera"], [data-theme="daylight"]) main .rounded-xl.bg-gradient-to-br.from-white\/10.to-white\/5:is(.p-4, .p-5) { border-radius: var(--mos-radius-xl); padding: 20px; }
html[data-music-app="music-pal"]:is([data-theme="riviera"], [data-theme="daylight"]) main .rounded-xl.bg-gradient-to-br.from-white\/10.to-white\/5.overflow-hidden { border-radius: var(--mos-radius-lg); }
/* panel titles (Typografie: Panel-Titel 600 · 16 px, Karla; Main artboard .panel-h h3) — the dashboard/analytics panel headings are
   h3.text-sm.font-semibold in the JSX (13.56 px native) */
html[data-music-app="music-pal"]:is([data-theme="riviera"], [data-theme="daylight"]) main h3:is(.text-sm, .text-base):is(.font-semibold, .font-bold) { font: 600 16px/1.3 var(--mos-font-display); letter-spacing: -.01em; color: var(--mos-text); }
html[data-music-app="music-pal"]:is([data-theme="riviera"], [data-theme="daylight"]) main h3:is(.text-sm, .text-base):is(.font-semibold, .font-bold) > span.text-lg { font-size: 16px; }
/* partner / artist cards (App.jsx inline "linear-gradient(160deg, rgba(255,255,255,0.08) 0%, rgba(255,255,255,0.024) 100%)") */
html[data-music-app="music-pal"]:is([data-theme="riviera"], [data-theme="daylight"]) :is([style*="rgba(255,255,255,0.08) 0%"], [style*="rgba(255, 255, 255, 0.08) 0%"], [style*="rgba(255,255,255,0.06) 0%"], [style*="rgba(255, 255, 255, 0.06) 0%"]) {
  background: var(--mos-surface-raised) !important; border: 1px solid var(--mos-line); box-shadow: var(--mos-shadow-panel) !important; border-radius: var(--mos-radius-xl);
}
html[data-music-app="music-pal"]:is([data-theme="riviera"], [data-theme="daylight"]) :is(.glass, .glass-sm) { background: var(--mos-surface-raised); box-shadow: var(--mos-shadow-panel); backdrop-filter: none; border: 1px solid var(--mos-line); }
html[data-music-app="music-pal"]:is([data-theme="riviera"], [data-theme="daylight"]) .glass-hover:hover { background: var(--mos-surface-raised-hover) !important; box-shadow: var(--mos-shadow-panel) !important; border-color: var(--mos-line-strong); }
/* card stat strips and misc inline panels (serialised forms first, JSX-source forms second) */
html[data-music-app="music-pal"]:is([data-theme="riviera"], [data-theme="daylight"]) :is([style*="rgba(0, 0, 0, 0.22)"], [style*="rgba(0,0,0,0.22)"]) { background: var(--mos-surface-code) !important; box-shadow: var(--mos-inset-highlight) !important; }
html[data-music-app="music-pal"]:is([data-theme="riviera"], [data-theme="daylight"]) [style*="rgba(255, 255, 255, 0.04)"][style*="rgba(255, 255, 255, 0.08)"],
html[data-music-app="music-pal"]:is([data-theme="riviera"], [data-theme="daylight"]) [style*="rgba(255,255,255,0.04)"][style*="rgba(255,255,255,0.08)"],
html[data-music-app="music-pal"]:is([data-theme="riviera"], [data-theme="daylight"]) [style*="rgba(255, 255, 255, 0.03)"][style*="rgba(255, 255, 255, 0.07)"],
html[data-music-app="music-pal"]:is([data-theme="riviera"], [data-theme="daylight"]) [style*="rgba(255,255,255,0.03)"][style*="rgba(255,255,255,0.07)"],
html[data-music-app="music-pal"]:is([data-theme="riviera"], [data-theme="daylight"]) [style*="background: rgb(19, 28, 43)"],
html[data-music-app="music-pal"]:is([data-theme="riviera"], [data-theme="daylight"]) [style*="background: #131c2b"] { background: var(--mos-surface-raised) !important; border-color: var(--mos-line) !important; box-shadow: var(--mos-shadow-panel); }
html[data-music-app="music-pal"]:is([data-theme="riviera"], [data-theme="daylight"]) :is([style*="border-bottom: 1px solid rgba(255, 255, 255"], [style*="border-bottom: 1px solid rgba(255,255,255"]) { border-bottom-color: var(--mos-line-soft) !important; }
html[data-music-app="music-pal"]:is([data-theme="riviera"], [data-theme="daylight"]) :is([style*="border: 1px solid rgba(255, 255, 255, 0.08)"], [style*="border: 1px solid rgba(255,255,255,0.08)"]) { border-color: var(--mos-line) !important; }
html[data-music-app="music-pal"]:is([data-theme="riviera"], [data-theme="daylight"]) :is([style*="border: 1px solid rgba(239, 68, 68, 0.2)"], [style*="border: 1px solid rgba(239,68,68,0.2)"]) { border-color: var(--mos-danger) !important; }
html[data-music-app="music-pal"]:is([data-theme="riviera"], [data-theme="daylight"]) :is([style*="rgba(6, 182, 212, 0.06), rgba(139, 92, 246, 0.06)"], [style*="rgba(6,182,212,0.06), rgba(139,92,246,0.06)"],
  [style*="rgba(6, 182, 212, 0.05), rgba(59, 130, 246, 0.05)"], [style*="rgba(6,182,212,0.05), rgba(59,130,246,0.05)"],
  [style*="rgba(6, 182, 212, 0.08), rgba(59, 130, 246, 0.08)"], [style*="rgba(6,182,212,0.08), rgba(59,130,246,0.08)"]) { background: var(--mos-accent-soft) !important; border-color: var(--mos-line) !important; }
html[data-music-app="music-pal"]:is([data-theme="riviera"], [data-theme="daylight"]) :is([style*="rgba(6, 182, 212, 0.15)"][style*="rgba(6, 182, 212, 0.25)"], [style*="rgba(6,182,212,0.15)"][style*="rgba(6,182,212,0.25)"],
  [style*="rgba(6, 182, 212, 0.3)"][style*="rgba(6, 182, 212, 0.4)"], [style*="rgba(6,182,212,0.3)"][style*="rgba(6,182,212,0.4)"],
  [style*="rgba(6, 182, 212, 0.15)"][style*="rgba(6, 182, 212, 0.4)"]) { background: var(--mos-accent-soft-hover) !important; border-color: var(--mos-accent-edge) !important; box-shadow: none !important; }
html[data-music-app="music-pal"]:is([data-theme="riviera"], [data-theme="daylight"]) :is([style*="rgba(245, 158, 11, 0.05), rgba(234, 88, 12, 0.05)"], [style*="rgba(245,158,11,0.05), rgba(234,88,12,0.05)"],
  [style*="rgba(245, 158, 11, 0.08), rgba(234, 88, 12, 0.08)"], [style*="rgba(245,158,11,0.08), rgba(234,88,12,0.08)"],
  [style*="rgba(245, 158, 11, 0.15)"], [style*="rgba(245,158,11,0.15)"], [style*="rgba(245, 158, 11, 0.12)"], [style*="rgba(245,158,11,0.12)"]) { background: var(--mos-amber-soft) !important; border-color: var(--mos-amber) !important; color: var(--mos-amber-text) !important; }
html[data-music-app="music-pal"]:is([data-theme="riviera"], [data-theme="daylight"]) :is([style*="rgba(168, 85, 247, 0.45), rgba(6, 182, 212, 0.25)"], [style*="rgba(168,85,247,0.45), rgba(6,182,212,0.25)"]) { background: linear-gradient(135deg, var(--mos-accent-2-soft), var(--mos-accent-soft)) !important; }
html[data-music-app="music-pal"]:is([data-theme="riviera"], [data-theme="daylight"]) :is([style*="rgba(239, 68, 68, 0.08)"], [style*="rgba(239,68,68,0.08)"]) { background: var(--mos-danger-soft) !important; }
html[data-music-app="music-pal"]:is([data-theme="riviera"], [data-theme="daylight"]) :is([style*="rgba(16, 185, 129, 0.08)"], [style*="rgba(16,185,129,0.08)"]) { background: var(--mos-success-soft) !important; }
html[data-music-app="music-pal"]:is([data-theme="riviera"], [data-theme="daylight"]) :is([style*="rgba(59, 130, 246, 0.08), rgba(59, 130, 246, 0.04)"], [style*="rgba(59,130,246,0.08), rgba(59,130,246,0.04)"]) { background: var(--mos-info-soft) !important; }

/* ---- login page (AuthGate; inline styles) — panel hook data-mos-role="panel" + serialised fallbacks; the logo tile keeps a dusk
   field (the login hero is one of the two allowed gradient surfaces) */
html[data-music-app="music-pal"]:is([data-theme="riviera"], [data-theme="daylight"]) :is([data-mos-role="panel"], [style*="rgba(255, 255, 255, 0.04)"][style*="0px 24px 48px"], [style*="rgba(255,255,255,0.04)"][style*="0 24px 48px"]) { background: var(--mos-surface-raised) !important; border: 1px solid var(--mos-line) !important; box-shadow: var(--mos-shadow-float) !important; border-radius: var(--mos-radius-xl); }
html[data-music-app="music-pal"]:is([data-theme="riviera"], [data-theme="daylight"]) :is(input[style*="rgba(255, 255, 255, 0.06)"], input[style*="rgba(255,255,255,0.06)"]) {
  background: var(--mos-surface-control) !important; border: 1px solid var(--mos-surface-control-line) !important; color: var(--mos-text-label); box-shadow: var(--mos-shadow-control);
}
html[data-music-app="music-pal"]:is([data-theme="riviera"], [data-theme="daylight"]) :is(button[style*="rgb(6, 182, 212), rgb(139, 92, 246)"], button[style*="#06b6d4, #8b5cf6"]) {
  background: var(--mos-accent) !important; color: var(--mos-on-accent) !important; border: 1px solid var(--mos-accent-edge); box-shadow: none !important; font-weight: 700; letter-spacing: var(--mos-track-button); text-transform: uppercase;
}
html[data-music-app="music-pal"]:is([data-theme="riviera"], [data-theme="daylight"]) :is([style*="rgba(6, 182, 212, 0.3), rgba(139, 92, 246, 0.3)"], [style*="rgba(6,182,212,0.3), rgba(139,92,246,0.3)"]) { background: var(--mos-dusk) !important; border: 1px solid var(--mos-line); box-shadow: var(--mos-shadow-panel) !important; }

/* ---- index.css specials */
html[data-music-app="music-pal"]:is([data-theme="riviera"], [data-theme="daylight"]) [class*="from-cyan-5"][class*="to-cyan-6"] { box-shadow: var(--mos-inset-highlight); }
html[data-music-app="music-pal"]:is([data-theme="riviera"], [data-theme="daylight"]) [class*="from-cyan-5"][class*="to-cyan-6"]:hover { box-shadow: var(--mos-inset-highlight), 0 6px 18px rgba(0,0,0,.25); filter: none; }
html[data-music-app="music-pal"]:is([data-theme="riviera"], [data-theme="daylight"]) [class*="from-emerald-5"][class*="to-emerald-6"],
html[data-music-app="music-pal"]:is([data-theme="riviera"], [data-theme="daylight"]) [class*="from-purple-5"][class*="to-purple-6"] { box-shadow: var(--mos-inset-highlight); }
html[data-music-app="music-pal"]:is([data-theme="riviera"], [data-theme="daylight"]) [class*="from-emerald-5"][class*="to-emerald-6"]:hover,
html[data-music-app="music-pal"]:is([data-theme="riviera"], [data-theme="daylight"]) [class*="from-purple-5"][class*="to-purple-6"]:hover { box-shadow: var(--mos-inset-highlight), 0 6px 18px rgba(0,0,0,.25); filter: none; }
html[data-music-app="music-pal"]:is([data-theme="riviera"], [data-theme="daylight"]) .stat-accent-cyan { border-left-color: var(--mos-accent); }
html[data-music-app="music-pal"]:is([data-theme="riviera"], [data-theme="daylight"]) .stat-accent-emerald { border-left-color: var(--mos-success); }
html[data-music-app="music-pal"]:is([data-theme="riviera"], [data-theme="daylight"]) .stat-accent-orange { border-left-color: var(--mos-warn); }
html[data-music-app="music-pal"]:is([data-theme="riviera"], [data-theme="daylight"]) .stat-accent-purple { border-left-color: var(--mos-accent-2); }
html[data-music-app="music-pal"]:is([data-theme="riviera"], [data-theme="daylight"]) .stat-accent-red { border-left-color: var(--mos-danger); }
html[data-music-app="music-pal"]:is([data-theme="riviera"], [data-theme="daylight"]) .stat-accent-blue { border-left-color: var(--mos-info); }
html[data-music-app="music-pal"]:is([data-theme="riviera"], [data-theme="daylight"]) .stat-accent-amber { border-left-color: var(--mos-amber); }
html[data-music-app="music-pal"]:is([data-theme="riviera"], [data-theme="daylight"]) .stat-accent-slate { border-left-color: var(--mos-line-strong); }
html[data-music-app="music-pal"]:is([data-theme="riviera"], [data-theme="daylight"]) .animate-shimmer { background: linear-gradient(90deg, transparent, var(--mos-raise-2), transparent); background-size: 200% 100%; }
html[data-music-app="music-pal"]:is([data-theme="riviera"], [data-theme="daylight"]) ::-webkit-scrollbar-track { background: transparent; }
/* App.jsx injects `select, select option { background-color:#0f1929 !important; color:#fff !important }` — re-own it */
html[data-music-app="music-pal"]:is([data-theme="riviera"], [data-theme="daylight"]) select,
html[data-music-app="music-pal"]:is([data-theme="riviera"], [data-theme="daylight"]) select option { background-color: var(--mos-surface-control) !important; color: var(--mos-text-label) !important; }
html[data-music-app="music-pal"]:is([data-theme="riviera"], [data-theme="daylight"]) select.bg-transparent { background-color: transparent !important; }
html[data-music-app="music-pal"]:is([data-theme="riviera"], [data-theme="daylight"]) select option:checked,
html[data-music-app="music-pal"]:is([data-theme="riviera"], [data-theme="daylight"]) select option:hover { background-color: var(--mos-accent-soft-hover) !important; color: var(--mos-text) !important; }
html[data-music-app="music-pal"]:is([data-theme="riviera"], [data-theme="daylight"]) select.text-amber-400 { color: var(--mos-amber-text) !important; }

/* ---- typography inside content (Typografie artboard: display 26 · 700 for the hero level, numbers tabular) */
html[data-music-app="music-pal"]:is([data-theme="riviera"], [data-theme="daylight"]) :is(.text-2xl, .text-3xl).font-bold:not(h1):not(h2):not(h3) { font-family: var(--mos-font-ui); font-variant-numeric: tabular-nums; color: var(--mos-text); letter-spacing: -.01em; }
html[data-music-app="music-pal"]:is([data-theme="riviera"], [data-theme="daylight"]) main .text-3xl.font-bold:not(h1):not(h2):not(h3) { font-size: 26px; font-weight: 700; line-height: 1.1; }
html[data-music-app="music-pal"]:is([data-theme="riviera"], [data-theme="daylight"]) main h1 { font-size: 26px; font-weight: 700; line-height: 1.15; }
html[data-music-app="music-pal"]:is([data-theme="riviera"], [data-theme="daylight"]) :is(.text-sm, .text-xs).text-slate-400.uppercase,
html[data-music-app="music-pal"]:is([data-theme="riviera"], [data-theme="daylight"]) p.uppercase.tracking-widest { color: var(--mos-text-muted); }

/* ---- tables (§5: head on surface, 11 px uppercase .12em muted — tailwind-remap; rows 14 px, dividers line-soft, hover raise-1) */
html[data-music-app="music-pal"]:is([data-theme="riviera"], [data-theme="daylight"]) main table > tbody > tr > td { font-size: 14px; }
html[data-music-app="music-pal"]:is([data-theme="riviera"], [data-theme="daylight"]) main table > tbody > tr > td :is(.text-xs, .text-\[11px\], .text-\[10px\]) { font-size: 12px; }
html[data-music-app="music-pal"]:is([data-theme="riviera"], [data-theme="daylight"]) main table > tbody > tr > td.text-xs { font-size: 12px; }
html[data-music-app="music-pal"]:is([data-theme="riviera"], [data-theme="daylight"]) main table > tbody > tr[class*="border-"] { border-bottom-color: var(--mos-line-soft) !important; }

/* ---- chat widget (floating) */
html[data-music-app="music-pal"]:is([data-theme="riviera"], [data-theme="daylight"]) .fixed.bottom-6.right-6.w-\[400px\] { background: var(--mos-surface) !important; border-color: var(--mos-line) !important; box-shadow: var(--mos-shadow-float); backdrop-filter: none; }
html[data-music-app="music-pal"]:is([data-theme="riviera"], [data-theme="daylight"]) .fixed.bottom-6.right-6.w-14 { box-shadow: var(--mos-shadow-panel); }
@media (max-width: 640px) {
  html[data-music-app="music-pal"]:is([data-theme="riviera"], [data-theme="daylight"]) .fixed.bottom-6.right-6.w-\[400px\] { width: calc(100vw - 24px) !important; right: 12px !important; bottom: 12px !important; height: min(600px, calc(100dvh - 24px)) !important; }
}

/* ---- chat widget readability (r3): src/components/ChatWidget.jsx (untouched)
   container .fixed.bottom-6.right-6.w-[400px]; header .border-b (p.text-white name, p.text-slate-400 role); empty state (p.text-slate-300,
   p.text-slate-500); bubbles .max-w-[85%] with bg-white/5 (assistant) | from-cyan-500/20 (user) | bg-red-500/10 (error); body p.whitespace-pre-wrap;
   provider p.text-slate-500; loading bubble bg-white/5; error banner .bg-red-500/10.border-t p.text-red-400; textarea + send button. */
html[data-music-app="music-pal"]:is([data-theme="riviera"], [data-theme="daylight"]) .fixed.bottom-6.right-6.w-\[400px\] { color: var(--mos-text-body); font-family: var(--mos-font-ui); }
html[data-music-app="music-pal"]:is([data-theme="riviera"], [data-theme="daylight"]) .fixed.bottom-6.right-6.w-\[400px\] .whitespace-pre-wrap,
html[data-music-app="music-pal"]:is([data-theme="riviera"], [data-theme="daylight"]) .fixed.bottom-6.right-6.w-\[400px\] .whitespace-pre-wrap :is(p, li, ul, ol, span, em, i, blockquote) { color: var(--mos-text-body); font-size: var(--mos-fs-body); line-height: 1.5; }
html[data-music-app="music-pal"]:is([data-theme="riviera"], [data-theme="daylight"]) .fixed.bottom-6.right-6.w-\[400px\] .whitespace-pre-wrap :is(strong, b, h1, h2, h3, h4, h5, h6) { color: var(--mos-text-label); }
html[data-music-app="music-pal"]:is([data-theme="riviera"], [data-theme="daylight"]) .fixed.bottom-6.right-6.w-\[400px\] .whitespace-pre-wrap a { color: var(--mos-accent-text); text-decoration: underline; }
html[data-music-app="music-pal"]:is([data-theme="riviera"], [data-theme="daylight"]) .fixed.bottom-6.right-6.w-\[400px\] .whitespace-pre-wrap :is(code, pre) { font-family: var(--mos-font-mono); font-size: 12px; background: var(--mos-surface-code); color: var(--mos-text-label); border: 1px solid var(--mos-line); border-radius: var(--mos-radius-sm); padding: 1px 4px; }
html[data-music-app="music-pal"]:is([data-theme="riviera"], [data-theme="daylight"]) .fixed.bottom-6.right-6.w-\[400px\] .max-w-\[85\%\] { border-radius: var(--mos-radius-lg); background-color: var(--mos-surface-raised); border-color: var(--mos-line); }
html[data-music-app="music-pal"]:is([data-theme="riviera"], [data-theme="daylight"]) .fixed.bottom-6.right-6.w-\[400px\] .max-w-\[85\%\][class*="from-cyan-500/20"] { background-image: none; background-color: var(--mos-accent-soft); border-color: var(--mos-accent-edge); color: var(--mos-text-body); }
html[data-music-app="music-pal"]:is([data-theme="riviera"], [data-theme="daylight"]) .fixed.bottom-6.right-6.w-\[400px\] .max-w-\[85\%\][class*="bg-red-500/10"] { background-color: var(--mos-danger-soft); border-color: var(--mos-danger); }
html[data-music-app="music-pal"]:is([data-theme="riviera"], [data-theme="daylight"]) .fixed.bottom-6.right-6.w-\[400px\] .max-w-\[85\%\][class*="bg-red-500/10"] .whitespace-pre-wrap { color: var(--mos-danger-text); }
html[data-music-app="music-pal"]:is([data-theme="riviera"], [data-theme="daylight"]) .fixed.bottom-6.right-6.w-\[400px\] .max-w-\[85\%\] > p.text-slate-500 { color: var(--mos-text-muted); font-size: var(--mos-fs-caption); }
html[data-music-app="music-pal"]:is([data-theme="riviera"], [data-theme="daylight"]) .fixed.bottom-6.right-6.w-\[400px\] .text-center :is(.text-slate-300, .text-slate-500) { color: var(--mos-text-secondary); }
html[data-music-app="music-pal"]:is([data-theme="riviera"], [data-theme="daylight"]) .fixed.bottom-6.right-6.w-\[400px\] .border-b p.text-slate-400 { color: var(--mos-text-secondary); }
html[data-music-app="music-pal"]:is([data-theme="riviera"], [data-theme="daylight"]) .fixed.bottom-6.right-6.w-\[400px\] .border-b p.text-white { color: var(--mos-text); font-family: var(--mos-font-display); font-size: 15px; }
html[data-music-app="music-pal"]:is([data-theme="riviera"], [data-theme="daylight"]) .fixed.bottom-6.right-6.w-\[400px\] .border-t.bg-red-500\/10 p { color: var(--mos-danger-text); }
html[data-music-app="music-pal"]:is([data-theme="riviera"], [data-theme="daylight"]) .fixed.bottom-6.right-6.w-\[400px\] textarea { background-color: var(--mos-surface-control); color: var(--mos-text-label); border-color: var(--mos-surface-control-line); }
html[data-music-app="music-pal"]:is([data-theme="riviera"], [data-theme="daylight"]) .fixed.bottom-6.right-6.w-\[400px\] textarea::placeholder { color: var(--mos-text-hint); }
html[data-music-app="music-pal"]:is([data-theme="riviera"], [data-theme="daylight"]) .fixed.bottom-6.right-6.w-\[400px\] ::selection { background: var(--mos-accent-soft-hover); color: var(--mos-text); }

/* ---- R6 §2: Releases → expanded tracklisting is a solid data surface, owned here independent of the remap.
   Source (App.jsx, untouched): tr > td[colSpan=10] > div.bg-gradient-to-r.from-cyan-500/5.to-purple-500/5 > div.px-6.py-3 >
   [flex: Music icon + span.font-semibold.text-cyan-400 "Tracklisting" + span.text-slate-500] + div.rounded-lg.bg-white/5 > table
   (thead tr.border-b.border-white/10.text-slate-500; tbody tr draggable, zebra bg-white/[0.02], hover:bg-white/5, drop target
   class bg-cyan-500/20 toggled by the drag handlers; td.font-mono.text-cyan-400 = ISRC; span.rounded-full.bg-cyan-500/20 = number).
   Target: artboard "Music Pal · Releases". Riviera: cream/label text on #080c18 ≥ 12:1, amber ISRC ≥ 9:1; Daylight: navy on #edf0f3. */
html[data-music-app="music-pal"]:is([data-theme="riviera"], [data-theme="daylight"]) tr > td > .bg-gradient-to-r.from-cyan-500\/5.to-purple-500\/5 {
  background: var(--mos-surface-code) !important;
  border-top: 1px solid var(--mos-line-strong) !important;
  border-bottom: 1px solid var(--mos-line-strong) !important;
}
html[data-music-app="music-pal"]:is([data-theme="riviera"], [data-theme="daylight"]) tr > td > .bg-gradient-to-r.from-cyan-500\/5.to-purple-500\/5 span.font-semibold.text-cyan-400 { font: 600 14px/1 var(--mos-font-ui); color: var(--mos-accent-text); }
html[data-music-app="music-pal"]:is([data-theme="riviera"], [data-theme="daylight"]) tr > td > .bg-gradient-to-r.from-cyan-500\/5.to-purple-500\/5 span.font-semibold.text-cyan-400 + span { color: var(--mos-text-muted); font-size: 13px; }
html[data-music-app="music-pal"]:is([data-theme="riviera"], [data-theme="daylight"]) tr > td > .bg-gradient-to-r.from-cyan-500\/5.to-purple-500\/5 > div > svg.text-cyan-400,
html[data-music-app="music-pal"]:is([data-theme="riviera"], [data-theme="daylight"]) tr > td > .bg-gradient-to-r.from-cyan-500\/5.to-purple-500\/5 .flex > svg { color: var(--mos-accent-text); }
html[data-music-app="music-pal"]:is([data-theme="riviera"], [data-theme="daylight"]) tr > td > .bg-gradient-to-r.from-cyan-500\/5.to-purple-500\/5 .rounded-lg.bg-white\/5 {
  background-color: var(--mos-surface); border: 1px solid var(--mos-line-soft); border-radius: var(--mos-radius-md);
}
html[data-music-app="music-pal"]:is([data-theme="riviera"], [data-theme="daylight"]) tr > td > .bg-gradient-to-r.from-cyan-500\/5.to-purple-500\/5 thead tr { border-bottom-color: var(--mos-line-soft); }
html[data-music-app="music-pal"]:is([data-theme="riviera"], [data-theme="daylight"]) tr > td > .bg-gradient-to-r.from-cyan-500\/5.to-purple-500\/5 thead th {
  font: 700 var(--mos-fs-caption)/1 var(--mos-font-ui); letter-spacing: var(--mos-track-label); text-transform: uppercase; color: var(--mos-text-muted);
}
html[data-music-app="music-pal"]:is([data-theme="riviera"], [data-theme="daylight"]) tr > td > .bg-gradient-to-r.from-cyan-500\/5.to-purple-500\/5 tbody tr { background-color: transparent; border-bottom-color: var(--mos-line-soft); color: var(--mos-text-body); }
html[data-music-app="music-pal"]:is([data-theme="riviera"], [data-theme="daylight"]) tr > td > .bg-gradient-to-r.from-cyan-500\/5.to-purple-500\/5 tbody tr:last-child { border-bottom-color: transparent; }
html[data-music-app="music-pal"]:is([data-theme="riviera"], [data-theme="daylight"]) tr > td > .bg-gradient-to-r.from-cyan-500\/5.to-purple-500\/5 tbody tr:hover { background-color: var(--mos-raise-1); }
/* drag-over feedback (class toggled by the untouched onDragOver/onDragLeave handlers) keeps its highlight */
html[data-music-app="music-pal"]:is([data-theme="riviera"], [data-theme="daylight"]) tr > td > .bg-gradient-to-r.from-cyan-500\/5.to-purple-500\/5 tbody tr.bg-cyan-500\/20 { background-color: var(--mos-accent-soft); }
html[data-music-app="music-pal"]:is([data-theme="riviera"], [data-theme="daylight"]) tr > td > .bg-gradient-to-r.from-cyan-500\/5.to-purple-500\/5 tbody td { font-size: 13px; }
html[data-music-app="music-pal"]:is([data-theme="riviera"], [data-theme="daylight"]) tr > td > .bg-gradient-to-r.from-cyan-500\/5.to-purple-500\/5 tbody td.font-mono.text-cyan-400 { font-family: var(--mos-font-mono); font-size: 12.5px; color: var(--mos-amber-text); }
html[data-music-app="music-pal"]:is([data-theme="riviera"], [data-theme="daylight"]) tr > td > .bg-gradient-to-r.from-cyan-500\/5.to-purple-500\/5 tbody td.font-medium { color: var(--mos-text-label); font-weight: 500; }
html[data-music-app="music-pal"]:is([data-theme="riviera"], [data-theme="daylight"]) tr > td > .bg-gradient-to-r.from-cyan-500\/5.to-purple-500\/5 tbody span.rounded-full.bg-cyan-500\/20 {
  background-color: var(--mos-accent-soft); color: var(--mos-accent-text); font: 700 12px/1 var(--mos-font-ui);
}

/* ---- theme control inside the sidebar footer (§3: labelled "Design"; ThemeSelect.jsx + themes.css .mos-theme-control) */
html[data-music-app="music-pal"] aside .mos-theme-control { width: 100%; justify-content: space-between; font-size: 11px; }
html[data-music-app="music-pal"] aside .mos-theme-control select { max-width: 150px; min-height: 30px; }
html[data-music-app="music-pal"]:is([data-theme="riviera"], [data-theme="daylight"]) aside .mos-theme-control { color: var(--mos-text-muted); }

/* ---- mobile (≤ 767 px): two-row header (title + subtitle never clipped, search fills row 2 beside the action icons),
   dashboard stat grid 2 → 1 columns, two-column panels stacked, card padding 16, value 20 px. Themed roots only; Original keeps
   its native layout. DOM and handlers untouched. */
@media (max-width: 767px) {
  html[data-music-app="music-pal"]:is([data-theme="riviera"], [data-theme="daylight"]) header h2 { font-size: 20px; }
  html[data-music-app="music-pal"]:is([data-theme="riviera"], [data-theme="daylight"]) header[data-mos-role="header"] > .flex.justify-between { flex-wrap: wrap; row-gap: 10px; }
  html[data-music-app="music-pal"]:is([data-theme="riviera"], [data-theme="daylight"]) header[data-mos-role="header"] > .flex.justify-between > div:first-child { flex: 1 1 100%; min-width: 0; }
  html[data-music-app="music-pal"]:is([data-theme="riviera"], [data-theme="daylight"]) header[data-mos-role="header"] > .flex.justify-between > div:first-child > div:last-child { min-width: 0; }
  html[data-music-app="music-pal"]:is([data-theme="riviera"], [data-theme="daylight"]) header[data-mos-role="header"] > .flex.justify-between > div:last-child { flex: 1 1 100%; min-width: 0; }
  html[data-music-app="music-pal"]:is([data-theme="riviera"], [data-theme="daylight"]) header[data-mos-role="header"] > .flex.justify-between > div:last-child > .relative { flex: 1 1 auto; min-width: 0; }
  html[data-music-app="music-pal"]:is([data-theme="riviera"], [data-theme="daylight"]) header[data-mos-role="header"] > .flex.justify-between > div:last-child > .relative > input { width: 100%; }
  html[data-music-app="music-pal"]:is([data-theme="riviera"], [data-theme="daylight"]) main .grid.grid-cols-5:has(> [data-mos-role="stat-card"]) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  html[data-music-app="music-pal"]:is([data-theme="riviera"], [data-theme="daylight"]) main .grid.grid-cols-2:has(> .rounded-xl.bg-gradient-to-br),
  html[data-music-app="music-pal"]:is([data-theme="riviera"], [data-theme="daylight"]) main .grid.grid-cols-2.text-sm:has(> .space-y-3),
  html[data-music-app="music-pal"]:is([data-theme="riviera"], [data-theme="daylight"]) main .grid.grid-cols-3:has(> button.rounded-xl.bg-gradient-to-br) { grid-template-columns: minmax(0, 1fr); }
  html[data-music-app="music-pal"]:is([data-theme="riviera"], [data-theme="daylight"]) [data-mos-role="stat-card"] { padding: 16px; }
  html[data-music-app="music-pal"]:is([data-theme="riviera"], [data-theme="daylight"]) [data-mos-role="stat-card"] .text-2xl { font-size: 20px; }
  html[data-music-app="music-pal"]:is([data-theme="riviera"], [data-theme="daylight"]) main .rounded-xl.bg-gradient-to-br.from-white\/10.to-white\/5:is(.p-4, .p-5) { padding: 16px; }
}
@media (max-width: 419px) {
  html[data-music-app="music-pal"]:is([data-theme="riviera"], [data-theme="daylight"]) main .grid.grid-cols-5:has(> [data-mos-role="stat-card"]) { grid-template-columns: minmax(0, 1fr); }
}