html[data-palette="palette-7"] { --palette-base:#202734; --palette-1:#202734; --palette-2:#36415a; --palette-3:#b7d894; --palette-4:#e0f8c7; --primary-color:#b7d894; }
html[data-palette="palette-9"] { --palette-base:#205f5b; --palette-1:#287a74; --palette-2:#55a9a0; --palette-3:#aeeed3; --palette-4:#fff8b0; --primary-color:#55a9a0; }


html[data-theme="dark"][data-palette="palette-16"] { --palette-base:#1b1012; --palette-1:#000000; --palette-2:#830000; --palette-3:#bc0202; --palette-4:#ff0000; --primary-color:#ef494f; --page-bg:#1a1517; --surface-bg:#1d1517; --surface-soft-bg:#2b1b1e; --surface-hover-bg:#402024; --line-color:#693238; --muted-color:#d7c9cb; }
html[data-palette="palette-17"] { --palette-base:#092328; --palette-1:#092328; --palette-2:#12544f; --palette-3:#2a835f; --palette-4:#8bbb92; --primary-color:#2a835f; }
html[data-palette="palette-18"] { --palette-base:#1b211a; --palette-1:#1b211a; --palette-2:#628141; --palette-3:#8bae66; --palette-4:#ebd5ab; --primary-color:#8bae66; }

html[data-palette="palette-19"] { --palette-base:#594341; --palette-1:#fff7eb; --palette-2:#f9f0e0; --palette-3:#a2ab73; --palette-4:#cc3a63; --primary-color:#cc3a63; }
html[data-palette="palette-22"] { --palette-base:#574456; --palette-1:#fbefef; --palette-2:#ffe2e2; --palette-3:#f5cbcb; --palette-4:#c5b3d3; --primary-color:#c5b3d3; }
html[data-palette="palette-25"] { --palette-base:#623f3e; --palette-1:#fffbf1; --palette-2:#fff2d0; --palette-3:#ffb2b2; --palette-4:#e36a6a; --primary-color:#e36a6a; }

html[data-palette] { --page-bg: color-mix(in srgb, var(--palette-base) 52%, #080b12); --surface-bg: color-mix(in srgb, var(--palette-base) 72%, #10121a); --surface-soft-bg: color-mix(in srgb, var(--palette-base) 80%, #27242c); --surface-hover-bg: color-mix(in srgb, var(--palette-2) 35%, var(--surface-bg)); --line-color: color-mix(in srgb, var(--palette-3) 30%, var(--surface-bg)); --heading-color:#fff; --text-color:#f5f4f3; --muted-color:#d5d4d4; }
html[data-palette] body, html[data-palette] .site-footer { background:var(--page-bg); color:var(--text-color); }
html[data-palette] .head, html[data-palette] .dmenu { background:var(--surface-bg); border-color:var(--line-color); }
html[data-palette] .headgrid div:not(:last-child) a, html[data-palette] .header-search, html[data-palette] .color-picker summary, html[data-palette] .color-picker-options, html[data-palette] .app-global-player--bar, html[data-palette] .app-global-player--queue { background:var(--surface-soft-bg); border-color:var(--line-color); color:var(--text-color); }
html[data-palette] .item-slider-lastpost > div { background:var(--surface-bg); border-color:var(--line-color); }
html[data-palette] .item-slider-lastpost > div:hover { background:var(--surface-hover-bg); border-color:var(--primary-color); }
html[data-palette] .section-title > div:first-child:after { background:var(--primary-color); }
html[data-palette] .app-global-player--track small { color:var(--muted-color); }

/* Palette-aware footer banner, retaining the existing moving pattern and shine. */
html[data-theme="dark"][data-palette] .footer-app {
    --footer-light-color-start: color-mix(in srgb, var(--palette-3) 30%, transparent);
    --footer-light-color-end: color-mix(in srgb, var(--palette-4) 25%, transparent);
    border-color: var(--line-color);
    background: radial-gradient(circle at 78% 20%, color-mix(in srgb, var(--primary-color) 20%, transparent), transparent 34%), linear-gradient(115deg, var(--page-bg), var(--surface-soft-bg) 55%, var(--surface-bg));
}
html[data-theme="dark"][data-palette] .footer-wave { border-color: var(--line-color); }
html[data-theme="dark"][data-palette] .footer-app-button {
    color: #fff;
    background-image: linear-gradient(110deg, color-mix(in srgb, var(--primary-color) 42%, #10121a), color-mix(in srgb, var(--primary-color) 58%, #10121a) 45%, color-mix(in srgb, var(--primary-color) 42%, #10121a));
    animation-name: palette-footer-button-attention;
}
@keyframes palette-footer-button-attention {
    0%, 100% { background-position: 0 0; box-shadow: 0 10px 24px color-mix(in srgb, var(--primary-color) 24%, transparent), 0 0 0 0 color-mix(in srgb, var(--primary-color) 25%, transparent); transform: translateY(0) scale(1); }
    50% { background-position: 100% 0; box-shadow: 0 16px 32px color-mix(in srgb, var(--primary-color) 38%, transparent), 0 0 0 11px transparent; transform: translateY(-4px) scale(1.045); }
}

/* Match the featured cover placeholder to the selected palette. */
html[data-palette] .item-slider-special > div > a > img.app-image-pending { background-color: var(--surface-soft-bg); }

/* Shared image placeholders and controls use the current palette; loaded artwork is unchanged. */
html[data-theme="dark"][data-palette] img.app-image-pending,
html[data-theme="dark"][data-palette] .app-global-player--track img.app-image-pending,
html[data-theme="dark"][data-palette] .app-global-player--track img.is-fallback-cover { background-color: var(--surface-soft-bg); }
html[data-theme="dark"][data-palette] .item-slider-special > div > .app-home-play,
html[data-theme="dark"][data-palette] .item-slider-post > div > .app-home-play,
html[data-theme="dark"][data-palette] .item-slider-lastpost > div > .app-home-play { background: color-mix(in srgb, var(--primary-color) 60%, #16131c); box-shadow: 0 1px 5px color-mix(in srgb, var(--primary-color) 50%, transparent); }
html[data-theme="dark"][data-palette] .sidebarbox,
html[data-theme="dark"][data-palette] .download-item,
html[data-theme="dark"][data-palette] .single-tag,
html[data-theme="dark"][data-palette] .footer-social a { background: var(--surface-bg); border-color: var(--line-color); color: var(--text-color); }
html[data-theme="dark"][data-palette] .download-item:hover,
html[data-theme="dark"][data-palette] .single-tag:hover,
html[data-theme="dark"][data-palette] .header-search button:hover { background: var(--surface-hover-bg); border-color: var(--primary-color); }
html[data-theme="dark"][data-palette] .header-search button,
html[data-theme="dark"][data-palette] .sidetitle-icon,
html[data-theme="dark"][data-palette] .footer-social a { color: var(--primary-color); }
html[data-theme="dark"][data-palette] .app-global-player--bar,
html[data-theme="dark"][data-palette] .app-global-player--queue { background: var(--surface-soft-bg); border-color: var(--line-color); }

html[data-theme="dark"][data-palette] .app-global-player--toggle,
html[data-theme="dark"][data-palette] .app-global-player--discover { background: color-mix(in srgb, var(--primary-color) 60%, #16131c); color:#fff; }
html[data-theme="dark"][data-palette] .app-global-player input[type="range"] { accent-color: var(--primary-color); }
html[data-theme="dark"][data-palette] .app-global-player--timeline input::-webkit-slider-thumb,
html[data-theme="dark"][data-palette] .app-global-player--volume input::-webkit-slider-thumb { background: var(--primary-color); }
html[data-theme="dark"][data-palette] .app-global-player--timeline input::-moz-range-thumb,
html[data-theme="dark"][data-palette] .app-global-player--volume input::-moz-range-thumb { background: var(--primary-color); }

html[data-theme="dark"][data-palette] .track-player-toggle { background: color-mix(in srgb, var(--primary-color) 60%, #16131c); color:#fff; box-shadow: 0 6px 18px color-mix(in srgb, var(--primary-color) 25%, transparent); }
html[data-theme="dark"][data-palette] .download-item-button,
html[data-theme="dark"][data-palette] .karaoke-controls--single,
html[data-theme="dark"][data-palette] .karaoke-controls--global,
html[data-theme="dark"][data-palette] .karaoke-popover { background:var(--surface-soft-bg); border-color:var(--line-color); color:var(--text-color); }
html[data-theme="dark"][data-palette] .karaoke-controls input { accent-color:var(--primary-color); }

/* Light palettes use their lightest supplied color as the page foundation. */
html[data-theme="light"][data-palette] {
    color-scheme: light;
    --page-bg: var(--palette-light-bg);
    --surface-bg: color-mix(in srgb, var(--palette-light-bg) 88%, white);
    --surface-soft-bg: color-mix(in srgb, var(--palette-light-bg) 78%, white);
    --surface-hover-bg: color-mix(in srgb, var(--palette-light-bg) 76%, var(--palette-light-accent));
    --line-color: color-mix(in srgb, var(--palette-light-accent) 28%, var(--palette-light-bg));
    --heading-color: #20242b;
    --text-color: #262b31;
    --muted-color: #555e66;
    --primary-color: var(--palette-light-accent);
    --shadow-color: rgba(42, 39, 45, .12);
}
html[data-theme="light"][data-palette="palette-19"] { --palette-light-bg:#fff7eb; --palette-light-accent:#a32d4f; }
html[data-theme="light"][data-palette="palette-22"] { --palette-light-bg:#fbefef; --palette-light-accent:#755d83; }
html[data-theme="light"][data-palette="palette-25"] { --palette-light-bg:#fffbf1; --palette-light-accent:#a63e45; }

html[data-theme="light"][data-palette] body,
html[data-theme="light"][data-palette] .site-footer { background:var(--page-bg); color:var(--text-color); }
html[data-theme="light"][data-palette] .head,
html[data-theme="light"][data-palette] .dmenu { background:var(--surface-bg); border-color:var(--line-color); }
html[data-theme="light"][data-palette] .headgrid div:not(:last-child) a,
html[data-theme="light"][data-palette] .header-search,
html[data-theme="light"][data-palette] .color-picker summary,
html[data-theme="light"][data-palette] .color-picker-options,
html[data-theme="light"][data-palette] .app-global-player--bar,
html[data-theme="light"][data-palette] .app-global-player--queue,
html[data-theme="light"][data-palette] .sidebarbox,
html[data-theme="light"][data-palette] .download-item { background:var(--surface-soft-bg); border-color:var(--line-color); color:var(--text-color); }
html[data-theme="light"][data-palette] .color-picker-options button { color:var(--text-color); }
html[data-theme="light"][data-palette] .color-picker-options button[aria-pressed="true"],
html[data-theme="light"][data-palette] .color-picker-options button:hover { background:var(--surface-hover-bg); }
html[data-theme="light"][data-palette] .color-picker summary:focus-visible,
html[data-theme="light"][data-palette] .color-picker-options button:focus-visible { outline-color:var(--primary-color); }
html[data-theme="light"][data-palette] img.app-image-pending,
html[data-theme="light"][data-palette] .app-global-player--track img.app-image-pending,
html[data-theme="light"][data-palette] .app-global-player--track img.is-fallback-cover { background-color:var(--surface-hover-bg); }
html[data-theme="light"][data-palette] .item-slider-lastpost > div { background:var(--surface-bg); border-color:var(--line-color); }
html[data-theme="light"][data-palette] .item-slider-special > div > .app-home-play,
html[data-theme="light"][data-palette] .item-slider-post > div > .app-home-play,
html[data-theme="light"][data-palette] .item-slider-lastpost > div > .app-home-play,
html[data-theme="light"][data-palette] .track-player-toggle { background:var(--primary-color); color:white; box-shadow:none; }
html[data-theme="light"][data-palette] .footer-app { --footer-light-color-start:color-mix(in srgb,var(--palette-3) 30%,transparent); --footer-light-color-end:color-mix(in srgb,var(--palette-4) 25%,transparent); background:linear-gradient(115deg,var(--surface-bg),var(--surface-hover-bg),var(--surface-soft-bg)); border-color:var(--line-color); }
html[data-theme="light"][data-palette] .footer-app-button { background-image:linear-gradient(110deg,var(--primary-color),color-mix(in srgb,var(--primary-color) 75%,#20242b),var(--primary-color)); animation-name:palette-footer-button-attention; }
html[data-theme="light"][data-palette] .app-global-player input[type="range"] { accent-color:var(--primary-color); }

html[data-theme="light"][data-palette] .item-slider-special > div > a > div { background:color-mix(in srgb,var(--primary-color) 65%,#1c2026); backdrop-filter:none; color:#fff; }
html[data-theme="light"][data-palette] .item-slider-special > div > a > div > span { color:#fff; }
html[data-theme="light"][data-palette] .app-global-player--toggle,
html[data-theme="light"][data-palette] .app-global-player--discover { background:var(--primary-color); color:#fff; }
html[data-theme="light"][data-palette] .app-global-player--timeline input::-webkit-slider-thumb,
html[data-theme="light"][data-palette] .app-global-player--volume input::-webkit-slider-thumb { background:var(--primary-color); }

/* Keep the shared header and navigation distinct from the page in every theme. */
html[data-theme="light"][data-palette] .head,
html[data-theme="light"][data-palette] .dmenu { background: color-mix(in srgb, var(--page-bg) 92%, var(--primary-color)); border-color: var(--line-color); }
html[data-theme="dark"][data-palette] .head,
html[data-theme="dark"][data-palette] .dmenu { background: color-mix(in srgb, var(--page-bg) 78%, black); }
html[data-theme="dark"][data-palette="palette-16"] .head,
html[data-theme="dark"][data-palette="palette-16"] .dmenu { background: #0d0a0b; }

/* Flat, palette-aware track tags. */
html[data-theme="light"][data-palette] .single-tag {
    color: var(--primary-color);
    background: color-mix(in srgb, var(--primary-color) 12%, var(--surface-bg));
    border-color: color-mix(in srgb, var(--primary-color) 28%, var(--surface-bg));
    box-shadow: none;
}
html[data-theme="dark"] .single-tag,
html[data-theme="dark"][data-palette] .single-tag {
    color: var(--text-color);
    background: color-mix(in srgb, var(--primary-color) 25%, var(--surface-bg));
    border-color: color-mix(in srgb, var(--primary-color) 45%, var(--surface-bg));
    box-shadow: none;
}
html[data-theme][data-palette] .single-tag:hover,
html[data-theme][data-palette] .single-tag:focus-visible,
html[data-theme="dark"] .single-tag:hover,
html[data-theme="dark"] .single-tag:focus-visible {
    color: var(--text-color);
    background: var(--surface-hover-bg);
    border-color: var(--primary-color);
    box-shadow: none;
}
html[data-theme] .single-tag:focus-visible { outline: 2px solid var(--primary-color); outline-offset: 3px; }

/* Section icons follow the chosen palette in light and dark mode. */
html[data-theme][data-palette] .sidetitle-icon,
html[data-theme][data-palette] .single-release-details__icon,
html[data-theme][data-palette] .single-post-text__icon,
html[data-theme][data-palette] .lyrics-section-icon,
html[data-theme][data-palette] .single-track-about__icon,
html[data-theme][data-palette] .app-comments-title-icon { color:var(--primary-color); }

/* Track action uses the selected palette while keeping a readable white icon. */
html[data-theme][data-palette] .single-action-play > button .single-action-box {
    color: #fff;
    background: color-mix(in srgb, var(--primary-color) 45%, #15151a);
    border-color: transparent;
    box-shadow: 0 5px 16px color-mix(in srgb, var(--primary-color) 22%, transparent);
}
html[data-theme][data-palette] .single-action-play > button:hover .single-action-box,
html[data-theme][data-palette] .single-action-play > button:focus-visible .single-action-box {
    color: #fff;
    background: color-mix(in srgb, var(--primary-color) 55%, #15151a);
    border-color: transparent;
    box-shadow: 0 9px 22px color-mix(in srgb, var(--primary-color) 35%, transparent);
}
html[data-theme][data-palette] .single-action-play > button:focus-visible .single-action-box { outline: 2px solid var(--primary-color); outline-offset: 3px; }

/* Playlist artwork and caption use the active palette for hover and focus shadows. */
html[data-theme] .item-slider-playlist > div > a:hover > img,
html[data-theme] .item-slider-playlist > div > a:focus-visible > img,
html[data-theme] .item-slider-playlist > div > a:hover > div,
html[data-theme] .item-slider-playlist > div > a:focus-visible > div {
    box-shadow: 0 6px 16px color-mix(in srgb, var(--primary-color) 25%, transparent);
}

/* Palette-aware carousel controls and main slider. */
html[data-theme][data-palette] [id^="yan-yana-"] > .yan-yana-right,
html[data-theme][data-palette] [id^="yan-yana-"] > .yan-yana-left {
    color: var(--text-color);
    background: var(--surface-soft-bg);
    border: 1px solid var(--line-color);
    box-shadow: 0 5px 16px color-mix(in srgb, var(--primary-color) 25%, transparent);
}
html[data-theme][data-palette] [id^="yan-yana-"] > .yan-yana-right:hover,
html[data-theme][data-palette] [id^="yan-yana-"] > .yan-yana-left:hover,
html[data-theme][data-palette] [id^="yan-yana-"] > .yan-yana-right:focus-visible,
html[data-theme][data-palette] [id^="yan-yana-"] > .yan-yana-left:focus-visible {
    color: var(--text-color);
    background: var(--surface-hover-bg);
    border-color: var(--primary-color);
    outline: 2px solid var(--primary-color);
    outline-offset: 2px;
}
html[data-theme][data-palette] #slider { background-color:var(--surface-bg); border-color:var(--line-color); box-shadow:0 14px 34px color-mix(in srgb,var(--primary-color) 18%,transparent); }
html[data-theme][data-palette] .slider-navigation button { background:var(--line-color); }
html[data-theme][data-palette] .slider-navigation button.is-active,
html[data-theme][data-palette] .slider-navigation button:hover,
html[data-theme][data-palette] .slider-navigation button:focus-visible { background:var(--primary-color); }
html[data-theme][data-palette] .slider-actions .slider-play,
html[data-theme][data-palette] .slider-actions .slider-play:hover,
html[data-theme][data-palette] .slider-actions .slider-play:focus-visible { color:#fff; background:color-mix(in srgb,var(--primary-color) 45%,#15151a); box-shadow:0 11px 24px color-mix(in srgb,var(--primary-color) 35%,transparent); }
html[data-theme][data-palette] .slider-actions .slider-action:not(.slider-play) { background:color-mix(in srgb,var(--primary-color) 20%,#15151a); border-color:color-mix(in srgb,var(--primary-color) 55%,#fff); color:#fff; }
html[data-theme][data-palette] .slider-actions .slider-action:focus-visible { outline:2px solid var(--primary-color); outline-offset:3px; }

/* Download interactions follow the active palette. */
html[data-theme][data-palette] .download-item:hover,
html[data-theme][data-palette] .download-item:focus-visible {
    background:var(--surface-hover-bg);
    border-color:var(--primary-color);
}
html[data-theme][data-palette] .download-item:hover .download-item-button,
html[data-theme][data-palette] .download-item:focus-visible .download-item-button {
    color:#fff;
    background:color-mix(in srgb,var(--primary-color) 45%,#15151a);
    border-color:transparent;
    box-shadow:none;
}
html[data-theme][data-palette] .download-item:focus-visible { outline:2px solid var(--primary-color); outline-offset:3px; }

/* Global player palette: bar, controls, progress, queue and vocal fader. */
html[data-theme][data-palette] .app-global-player { --player-active:color-mix(in srgb,var(--primary-color) 45%,#15151a); color:var(--text-color); }
html[data-theme][data-palette] .app-global-player--bar,
html[data-theme][data-palette] .app-global-player--queue,
html[data-theme][data-palette] .app-global-player--pip-notice { color:var(--text-color); background:var(--surface-soft-bg); border-color:var(--line-color); }
html[data-theme][data-palette] .app-global-player--track small,
html[data-theme][data-palette] .app-global-player--timeline > div,
html[data-theme][data-palette] .app-global-player--queue-list p { color:var(--muted-color); }
html[data-theme][data-palette] .app-global-player button:not(.app-global-player--toggle):not(.app-global-player--queue-item) { color:var(--text-color); }
html[data-theme][data-palette] .app-global-player button:not(.app-global-player--toggle):not(.app-global-player--queue-item):hover,
html[data-theme][data-palette] .app-global-player button:not(.app-global-player--toggle):not(.app-global-player--queue-item)[aria-pressed="true"],
html[data-theme][data-palette] .app-global-player button:not(.app-global-player--toggle):not(.app-global-player--queue-item):focus-visible { color:var(--text-color); background:var(--surface-hover-bg); }
html[data-theme][data-palette] .app-global-player .app-global-player--toggle { color:#fff !important; background:var(--player-active) !important; }
html[data-theme][data-palette] .app-global-player .app-global-player--toggle:hover { background:color-mix(in srgb,var(--primary-color) 55%,#15151a) !important; }
html[data-theme][data-palette] .app-global-player button:focus-visible,
html[data-theme][data-palette] .app-global-player input:focus-visible { outline:2px solid var(--primary-color); outline-offset:2px; }
html[data-theme][data-palette] .app-global-player--timeline input,
html[data-theme][data-palette] .app-global-player--volume input { --range-fill:var(--primary-color); --range-track:var(--line-color); accent-color:var(--primary-color); }
html[data-theme][data-palette] .app-global-player--timeline input::-webkit-slider-runnable-track { background:linear-gradient(to right,var(--primary-color) 0 var(--seek-progress,0%),var(--line-color) var(--seek-progress,0%) 100%); }
html[data-theme][data-palette] .app-global-player--volume input::-webkit-slider-runnable-track { background:linear-gradient(to right,var(--primary-color) 0 var(--volume-progress,100%),var(--line-color) var(--volume-progress,100%) 100%); }
html[data-theme][data-palette] .app-global-player--timeline input::-moz-range-track,
html[data-theme][data-palette] .app-global-player--volume input::-moz-range-track { background:var(--line-color); }
html[data-theme][data-palette] .app-global-player--timeline input::-moz-range-progress,
html[data-theme][data-palette] .app-global-player--volume input::-moz-range-progress { background:var(--primary-color); }
html[data-theme][data-palette] .app-global-player--timeline input::-webkit-slider-thumb,
html[data-theme][data-palette] .app-global-player--volume input::-webkit-slider-thumb { background:var(--primary-color); }
html[data-theme][data-palette] .app-global-player--timeline input::-moz-range-thumb,
html[data-theme][data-palette] .app-global-player--volume input::-moz-range-thumb { background:var(--primary-color); }
html[data-theme][data-palette] .app-global-player--queue header { border-color:var(--line-color); }
html[data-theme][data-palette] .app-global-player button.app-global-player--queue-item { color:var(--text-color); }
html[data-theme][data-palette] .app-global-player button.app-global-player--queue-item:hover:not(.is-current) { color:var(--text-color) !important; background:var(--surface-hover-bg) !important; }
html[data-theme][data-palette] .app-global-player button.app-global-player--queue-item.is-current,
html[data-theme][data-palette] .app-global-player button.app-global-player--queue-item.is-current:hover { color:#fff !important; background:var(--player-active) !important; }
html[data-theme][data-palette] .app-global-player--queue [data-global-player-queue-list] { scrollbar-color:var(--primary-color) transparent; }
html[data-theme][data-palette] .app-global-player--queue [data-global-player-queue-list]::-webkit-scrollbar-thumb { background:var(--primary-color); }
html[data-theme][data-palette] .app-global-player.is-empty .app-global-player--discover,
html[data-theme][data-palette] .app-global-player.is-empty .app-global-player--discover:hover { color:#fff; background:var(--player-active); }
html[data-theme][data-palette] .app-global-player .karaoke-popover,
html[data-theme][data-palette] .app-global-player .karaoke-controls { --fader-track:var(--line-color); --fader-fill:var(--primary-color); --fader-quiet-icon:var(--text-color); color:var(--text-color); background:var(--surface-soft-bg); border-color:var(--line-color); }
html[data-theme][data-palette] .app-global-player .karaoke-fader:focus-within { outline-color:var(--primary-color); }

/* Keep the original light default control in the light theme. */
html[data-theme="light"]:not([data-palette]) .color-picker summary,
html[data-theme="light"]:not([data-palette]) .color-picker-options { background:var(--surface-soft-bg); border-color:var(--line-color); color:var(--text-color); }
html[data-theme="light"]:not([data-palette]) .color-picker-options button { color:var(--text-color); }
html[data-theme="light"]:not([data-palette]) .color-picker summary:focus-visible,
html[data-theme="light"]:not([data-palette]) .color-picker-options button:focus-visible { outline-color:var(--primary-color); }

/* Keep mobile navigation labels legible when dark palette accents are muted. */
@media (max-width: 760px) {
    html[data-theme="dark"][data-palette] .dmenu > div > ul > li > a:hover,
    html[data-theme="dark"][data-palette] .dmenu > div > ul > li > a:focus-visible { color:var(--text-color); }
}

/* Artist archive accents use the selected palette. */
html[data-theme="light"][data-palette] .app-artists-archive__header span { color:var(--primary-color); }
html[data-theme="dark"][data-palette] .app-artists-archive__header span { color:color-mix(in srgb,var(--primary-color) 65%,white); }
html[data-theme][data-palette] .app-artists-archive .page-numbers.current,
html[data-theme][data-palette] .app-artists-archive .page-numbers:hover { border-color:var(--primary-color); color:#fff; background:color-mix(in srgb,var(--primary-color) 45%,#15151a); }

/* Social links follow the selected palette in their resting and interactive states. */
html[data-theme][data-palette] .footer-social a {
    color: var(--primary-color);
    background: var(--surface-bg);
    border-color: var(--line-color);
}
html[data-theme="dark"][data-palette] .footer-social a {
    color: color-mix(in srgb, var(--primary-color) 70%, white);
}
html[data-theme][data-palette] .footer-social a:hover,
html[data-theme][data-palette] .footer-social a:focus-visible {
    color: var(--text-color);
    background: var(--surface-hover-bg);
    border-color: var(--primary-color);
    box-shadow: 0 8px 18px color-mix(in srgb, var(--primary-color) 22%, transparent);
}
html[data-theme][data-palette] .footer-social a:focus-visible {
    outline: 2px solid var(--primary-color);
    outline-offset: 3px;
}

/* Account screens share the active palette while preserving their layouts. */
html[data-theme][data-palette] .app-login {
    --login-primary: var(--primary-color);
    --login-primary-light: var(--primary-color);
    --login-surface: var(--surface-bg);
    --login-input-bg: var(--surface-soft-bg);
    --login-text: var(--text-color);
    --login-label: var(--text-color);
    --login-muted: var(--muted-color);
    --login-placeholder: var(--muted-color);
    --login-border: var(--line-color);
    --login-icon: var(--text-color);
    --login-divider: var(--line-color);
    --login-signup-text: var(--muted-color);
    --login-card-shadow: 0 8px 25px color-mix(in srgb, var(--primary-color) 12%, transparent);
    --login-control-shadow: none;
}
html[data-theme][data-palette] .app-login--submit,
html[data-theme][data-palette] .app-profile--button.is-primary,
html[data-theme][data-palette] .app-profile-edit--upload,
html[data-theme][data-palette] .app-profile-edit--actions button,
html[data-theme][data-palette] .app-profile-edit--password-actions button,
html[data-theme][data-palette] .app-profile-cropper--apply {
    color: #fff;
    background: color-mix(in srgb, var(--primary-color) 70%, #15121f);
    box-shadow: 0 7px 18px color-mix(in srgb, var(--primary-color) 24%, transparent);
}
html[data-theme][data-palette] .app-login--control:focus-within,
html[data-theme][data-palette] .app-login--submit:focus-visible {
    border-color: var(--primary-color);
    outline-color: var(--primary-color);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary-color) 25%, transparent);
}
html[data-theme][data-palette] .app-profile {
    --ps: var(--surface-bg); --psoft: var(--surface-soft-bg); --pt: var(--text-color);
    --pm: var(--muted-color); --pl: var(--line-color); --ph: var(--surface-hover-bg);
    --pp: var(--primary-color); --pps: color-mix(in srgb, var(--primary-color) 16%, transparent);
}
html[data-theme][data-palette] .app-profile-edit {
    --es: var(--surface-bg); --esoft: var(--surface-soft-bg); --et: var(--text-color);
    --em: var(--muted-color); --el: var(--line-color); --eh: var(--surface-hover-bg);
    --ep: var(--primary-color); --eps: color-mix(in srgb, var(--primary-color) 16%, transparent);
}
html[data-theme][data-palette] .app-profile--cover {
    background-color: var(--surface-soft-bg);
    background-image: linear-gradient(120deg, color-mix(in srgb, var(--surface-bg) 88%, transparent), color-mix(in srgb, var(--primary-color) 38%, var(--surface-bg))), url('../img/logo-pattern-transparent.svg');
}
html[data-theme][data-palette] .app-profile-cropper {
    color: var(--text-color); background: var(--surface-bg);
}
html[data-theme][data-palette] .app-profile-cropper--tools button,
html[data-theme][data-palette] .app-profile-cropper footer button {
    color: var(--text-color); background: var(--surface-soft-bg); border-color: var(--line-color);
}
html[data-theme][data-palette] .app-profile-cropper footer .app-profile-cropper--apply {
    color: #fff; background: color-mix(in srgb, var(--primary-color) 70%, #15121f);
}

html[data-theme][data-palette] .app-login--forgot,
html[data-theme][data-palette] .app-login--signup a {
    color: var(--primary-color); border-color: var(--line-color);
}
html[data-theme="dark"][data-palette] .app-login--forgot,
html[data-theme="dark"][data-palette] .app-login--signup a {
    color: color-mix(in srgb, var(--primary-color) 70%, white);
}
html[data-theme][data-palette] .app-login--forgot:hover,
html[data-theme][data-palette] .app-login--signup a:hover {
    color: var(--text-color); background: var(--surface-hover-bg);
}

/* The color picker follows the active theme on desktop and mobile. */
html[data-theme] .color-picker summary {
    color: var(--text-color);
    background: var(--surface-soft-bg);
    border-color: var(--line-color);
}
html[data-theme] .color-picker summary span { color: var(--primary-color); }
html[data-theme] .color-picker summary:hover,
html[data-theme] .color-picker[open] summary {
    background: var(--surface-hover-bg);
    border-color: var(--primary-color);
}
html[data-theme] .color-picker summary:focus-visible {
    outline-color: var(--primary-color);
}


/* Header controls share the same palette-aware interaction states. */
html[data-theme] .headgrid > div.desktop-header-control > a,
html[data-theme] .headgrid > .color-picker > summary,
html[data-theme] .headgrid .app-header-account [data-header-user] > button {
    color: var(--text-color);
    background: var(--surface-soft-bg);
    border-color: var(--line-color);
    transition: background-color .18s ease, border-color .18s ease, color .18s ease;
}
html[data-theme] .headgrid > div.desktop-header-control > a:hover,
html[data-theme] .headgrid > div.desktop-header-control > a:focus-visible,
html[data-theme] .headgrid > .color-picker > summary:hover,
html[data-theme] .headgrid > .color-picker > summary:focus-visible,
html[data-theme] .headgrid > .color-picker[open] > summary,
html[data-theme] .headgrid .app-header-account [data-header-user] > button:hover,
html[data-theme] .headgrid .app-header-account [data-header-user] > button:focus-visible {
    color: var(--text-color);
    background: color-mix(in srgb, var(--primary-color) 22%, var(--surface-soft-bg));
    border-color: var(--primary-color);
}
html[data-theme] .headgrid > div.desktop-header-control > a:active,
html[data-theme] .headgrid > .color-picker > summary:active,
html[data-theme] .headgrid .app-header-account [data-header-user] > button:active {
    background: color-mix(in srgb, var(--primary-color) 38%, var(--surface-soft-bg));
    border-color: var(--primary-color);
}
/* The signed-in account link has legacy important declarations. */
html[data-theme] .headgrid .app-header-account [data-header-user] > a {
    color: var(--text-color) !important;
    background: var(--surface-soft-bg) !important;
    border-color: var(--line-color) !important;
}
html[data-theme] .headgrid .app-header-account [data-header-user] > a:hover,
html[data-theme] .headgrid .app-header-account [data-header-user] > a:focus-visible {
    background: color-mix(in srgb, var(--primary-color) 22%, var(--surface-soft-bg)) !important;
    border-color: var(--primary-color) !important;
}
html[data-theme] .headgrid .app-header-account [data-header-user] > a:active {
    background: color-mix(in srgb, var(--primary-color) 38%, var(--surface-soft-bg)) !important;
    border-color: var(--primary-color) !important;
}