/* Shared neutral canvases; accent and status roles remain independent. */
html[data-palette] {
 --ui-canvas:#f8f9fb;--ui-panel:#fff;--ui-raised:#f1f3f6;--ui-text:#181c20;--ui-muted:#43474e;--ui-line:#c6cbd2;
}
html[data-theme=dark][data-palette] {
 --ui-canvas:#111317;--ui-panel:#191c20;--ui-raised:#202225;--ui-text:#e2e4e9;--ui-muted:#c5c8ce;--ui-line:#44474b;
}
html[data-theme=dark][data-amoled=true] {--ui-canvas:#000;--ui-panel:#0e0e0e;--ui-raised:#151515;--ui-line:#303030}
html[data-palette] {
 --bs-body-bg:var(--ui-canvas);--bs-body-color:var(--ui-text);--bs-secondary-color:var(--ui-muted);--bs-heading-color:var(--ui-text);--bs-emphasis-color:var(--ui-text);
 --bs-secondary-bg:var(--ui-panel);--bs-tertiary-bg:var(--ui-raised);--bs-border-color:var(--ui-line);--bs-card-bg:var(--ui-panel);--bs-card-color:var(--ui-text);--bs-card-border-color:var(--ui-line);
 --is-bg:var(--ui-panel);--is-surface:var(--ui-canvas);--is-text:var(--ui-text);--is-muted:var(--ui-muted);--is-line:var(--ui-line);--is-primary:var(--secondary-color);
 --admin-surface:var(--ui-panel);--admin-soft:var(--ui-raised);--admin-border:var(--ui-line);--admin-text-soft:var(--ui-muted);--admin-accent:var(--secondary-color);
}
html[data-palette] body {background:var(--ui-canvas)!important;color:var(--ui-text)!important}
html[data-palette] :is(.card,.modal-content,.dropdown-menu,.offcanvas,.accordion-body,.popover,.iokul-confirm,.iokul-transfers) {background:var(--ui-panel)!important;color:var(--ui-text)!important;border-color:var(--ui-line)!important}
html[data-palette] :is(.card-header,.modal-header,.modal-footer,.list-group-item,.bg-body-tertiary,.bg-body-secondary) {background:var(--ui-raised)!important;color:var(--ui-text)!important;border-color:var(--ui-line)!important}
html[data-palette] :is(.form-control,.form-select,.input-group-text) {background:var(--ui-panel)!important;color:var(--ui-text)!important;border-color:var(--ui-line)!important}
html[data-palette] :is(.text-muted,.iokul-confirm p) {color:var(--ui-muted)!important}
html[data-palette] .admin-command-nav .card-header {background:var(--ui-raised)!important;color:var(--ui-text)!important}
html[data-palette] :is(.navbar,.mobile-bottom-nav) {background:var(--ui-panel)!important;color:var(--ui-text)!important;border-color:var(--ui-line)!important}
html[data-palette] .navbar :is(.nav-link,.navbar-brand,.navbar-toggler,.dropdown-toggle) {color:var(--ui-text)!important}
html[data-palette] .navbar :is(.nav-link:hover,.nav-link.active) {background:color-mix(in srgb,var(--secondary-color) 6%,var(--ui-panel))!important;color:var(--secondary-color)!important}
html[data-palette] .quick-period-link.active-period .quick-period-pill {background:var(--secondary-color);border-color:var(--secondary-color);color:var(--ui-on-action)}
html[data-palette] .iokul-confirm button[data-primary]:not(.unused),html[data-palette] .iokul-transfers button.iokul-transfer-primary {background:var(--secondary-color);border-color:var(--secondary-color);color:var(--ui-on-action)}
html[data-palette] .iokul-confirm[data-danger] button[data-primary] {background:#b42332;border-color:#b42332;color:#fff}

html[data-theme=light][data-palette=ocean]{--secondary-color:#155a9e;--primary-color:#155a9e;--bs-primary:#155a9e;--bs-primary-rgb:21,90,158;--ui-on-action:#ffffff}
html[data-theme=dark][data-palette=ocean]{--secondary-color:#a4c9ff;--primary-color:#a4c9ff;--bs-primary:#a4c9ff;--bs-primary-rgb:164,201,255;--ui-on-action:#111111}
html .theme-palette-item[data-palette-val=ocean]{--swatch-primary:#155a9e}
html[data-theme=dark] .theme-palette-item[data-palette-val=ocean]{--swatch-primary:#a4c9ff}
html[data-theme=light][data-palette=emerald]{--secondary-color:#087f63;--primary-color:#087f63;--bs-primary:#087f63;--bs-primary-rgb:8,127,99;--ui-on-action:#ffffff}
html[data-theme=dark][data-palette=emerald]{--secondary-color:#2ce5b5;--primary-color:#2ce5b5;--bs-primary:#2ce5b5;--bs-primary-rgb:44,229,181;--ui-on-action:#111111}
html .theme-palette-item[data-palette-val=emerald]{--swatch-primary:#087f63}
html[data-theme=dark] .theme-palette-item[data-palette-val=emerald]{--swatch-primary:#2ce5b5}
html[data-theme=light][data-palette=warm_amber]{--secondary-color:#8f4e00;--primary-color:#8f4e00;--bs-primary:#8f4e00;--bs-primary-rgb:143,78,0;--ui-on-action:#ffffff}
html[data-theme=dark][data-palette=warm_amber]{--secondary-color:#ffb866;--primary-color:#ffb866;--bs-primary:#ffb866;--bs-primary-rgb:255,184,102;--ui-on-action:#111111}
html .theme-palette-item[data-palette-val=warm_amber]{--swatch-primary:#8f4e00}
html[data-theme=dark] .theme-palette-item[data-palette-val=warm_amber]{--swatch-primary:#ffb866}
html[data-theme=light][data-palette=terracotta]{--secondary-color:#9c3a27;--primary-color:#9c3a27;--bs-primary:#9c3a27;--bs-primary-rgb:156,58,39;--ui-on-action:#ffffff}
html[data-theme=dark][data-palette=terracotta]{--secondary-color:#ffb4a4;--primary-color:#ffb4a4;--bs-primary:#ffb4a4;--bs-primary-rgb:255,180,164;--ui-on-action:#111111}
html .theme-palette-item[data-palette-val=terracotta]{--swatch-primary:#9c3a27}
html[data-theme=dark] .theme-palette-item[data-palette-val=terracotta]{--swatch-primary:#ffb4a4}
html[data-theme=light][data-palette=rose]{--secondary-color:#982956;--primary-color:#982956;--bs-primary:#982956;--bs-primary-rgb:152,41,86;--ui-on-action:#ffffff}
html[data-theme=dark][data-palette=rose]{--secondary-color:#ffb1c8;--primary-color:#ffb1c8;--bs-primary:#ffb1c8;--bs-primary-rgb:255,177,200;--ui-on-action:#111111}
html .theme-palette-item[data-palette-val=rose]{--swatch-primary:#982956}
html[data-theme=dark] .theme-palette-item[data-palette-val=rose]{--swatch-primary:#ffb1c8}
html[data-theme=light][data-palette=amethyst]{--secondary-color:#6342a6;--primary-color:#6342a6;--bs-primary:#6342a6;--bs-primary-rgb:99,66,166;--ui-on-action:#ffffff}
html[data-theme=dark][data-palette=amethyst]{--secondary-color:#cebdff;--primary-color:#cebdff;--bs-primary:#cebdff;--bs-primary-rgb:206,189,255;--ui-on-action:#111111}
html .theme-palette-item[data-palette-val=amethyst]{--swatch-primary:#6342a6}
html[data-theme=dark] .theme-palette-item[data-palette-val=amethyst]{--swatch-primary:#cebdff}
html[data-theme=light][data-palette=graphite]{--secondary-color:#343e46;--primary-color:#343e46;--bs-primary:#343e46;--bs-primary-rgb:52,62,70;--ui-on-action:#ffffff}
html[data-theme=dark][data-palette=graphite]{--secondary-color:#c4cfd8;--primary-color:#c4cfd8;--bs-primary:#c4cfd8;--bs-primary-rgb:196,207,216;--ui-on-action:#111111}
html .theme-palette-item[data-palette-val=graphite]{--swatch-primary:#343e46}
html[data-theme=dark] .theme-palette-item[data-palette-val=graphite]{--swatch-primary:#c4cfd8}
html[data-theme=light][data-palette=dynamic]{--secondary-color:#155a9e;--primary-color:#155a9e;--bs-primary:#155a9e;--bs-primary-rgb:21,90,158;--ui-on-action:#ffffff}
html[data-theme=dark][data-palette=dynamic]{--secondary-color:#a4c9ff;--primary-color:#a4c9ff;--bs-primary:#a4c9ff;--bs-primary-rgb:164,201,255;--ui-on-action:#111111}
html .theme-palette-item[data-palette-val=dynamic]{--swatch-primary:#155a9e}
html[data-theme=dark] .theme-palette-item[data-palette-val=dynamic]{--swatch-primary:#a4c9ff}
html[data-palette] .btn-primary {--bs-btn-color:var(--ui-on-action);--bs-btn-hover-color:var(--ui-on-action);--bs-btn-active-color:var(--ui-on-action);color:var(--ui-on-action)}
html[data-palette] .theme-palette-item .palette-dot {background:var(--swatch-primary)!important}
html[data-palette] .theme-palette-item .palette-dot-sub {background:color-mix(in srgb,var(--swatch-primary) 18%,var(--ui-panel))!important}
html[data-palette] .btn-primary {background:var(--secondary-color);border-color:var(--secondary-color)}
html[data-palette] :is(.card-brand-corner,.qr-box-wrapper) {background:var(--ui-raised)!important;color:var(--ui-text)!important;border-color:var(--ui-line)!important}
html[data-palette] :is(.form-label,h4,h5) {color:var(--ui-text)!important}


/* Shared action and selection surfaces — 2026-10-24, PenDF control standard. */
:root {
 --control-surface:#f1f3f6;--control-text:#181c20;--control-outline:#737982;
 --control-accent:#155a9e;--control-on-accent:#fff;
}
@media(prefers-color-scheme:dark) {
 :root {--control-surface:#282a2e;--control-text:#e2e4e9;--control-outline:#8c9199;--control-accent:#a4c9ff;--control-on-accent:#00315d}
}
html:root:is([data-theme=light],[data-color-scheme=light]) {
 --control-surface:#f1f3f6;--control-text:#181c20;--control-outline:#737982;--control-accent:#155a9e;--control-on-accent:#fff;
}
html:root:is([data-theme=dark],[data-theme=amoled],[data-color-scheme=dark],[data-color-scheme=amoled]),.dark {
 --control-surface:#282a2e;--control-text:#e2e4e9;--control-outline:#8c9199;--control-accent:#a4c9ff;--control-on-accent:#00315d;
}
html:root[data-theme=dark][data-amoled=true],html:root[data-theme=amoled],html:root[data-color-scheme=amoled] {--control-surface:#151515}
html:root[data-palette] {--control-surface:var(--ui-raised);--control-text:var(--ui-text);--control-accent:var(--secondary-color);--control-on-accent:var(--ui-on-action)}
/* Top-level navigation links share the menu controls' shape and selected state. */
html:root[data-palette] .navbar-nav > .nav-item > .nav-link {
 border:1px solid var(--control-outline);border-radius:10px;
 background-color:var(--control-surface);font-weight:600;
 min-height:40px;padding-block:6px;max-inline-size:100%;
 white-space:normal;overflow-wrap:break-word;touch-action:manipulation;
}
html:root[data-palette] .navbar-nav > .nav-item > .nav-link.active {
 border-color:var(--control-accent)!important;
 box-shadow:inset 0 0 0 1px currentColor;font-weight:750!important;
}
html:root[data-palette] .navbar-nav > .nav-item > .nav-link:focus-visible {
 outline:3px solid var(--control-accent)!important;outline-offset:3px;
}
/* Preserve destructive/status controls and compact third-party map/player chrome. */
html:root :is(button,.btn,.button,[role=button]):not(:is(.btn-close,[class*="danger"],[class*="success"],[class*="warning"],[class*="destruct"],[class*="bg-red"],[class*="bg-green"],[class*="bg-amber"],[class*="text-red"],[data-danger],.leaflet-control button,.mapboxgl-control-container button,.maplibregl-control-container button,.video-js button,.plyr button,.shaka-video-container button)) {
 border-style:solid;border-width:1px;border-color:var(--control-outline);
 border-radius:10px;background-color:var(--control-surface);color:var(--control-text);
 font-weight:600;min-height:40px;padding-block:6px;max-inline-size:100%;white-space:normal;overflow-wrap:break-word;touch-action:manipulation;
}
html:root :is(.secondary,.ghost,.btn-secondary,.btn-outline,.btn-outline-secondary,.button-secondary,.button-quiet,.btn-link,.text-button):not(:is(.btn-close,[class*="danger"],[class*="success"],[class*="warning"],[class*="destruct"],[class*="bg-red"],[class*="bg-green"],[class*="bg-amber"],[class*="text-red"],[data-danger],.leaflet-control button,.mapboxgl-control-container button,.maplibregl-control-container button,.video-js button,.plyr button,.shaka-video-container button)) {
 background:color-mix(in srgb,var(--control-accent) 6%,var(--control-surface))!important;
 color:color-mix(in srgb,var(--control-accent) 55%,var(--control-text))!important;
 border:1px solid color-mix(in srgb,var(--control-accent) 55%,var(--control-text))!important;
}
html:root :is(button:not([class]),.text-button) {padding:6px 14px;font:inherit;font-weight:600}
/* Primary action roles stay paired with their own readable foreground. */
html:root :is(.btn-primary,.button-primary,.button.primary,button.primary,button[data-primary],button[type=submit]:not(.secondary):not(.ghost):not(.btn-secondary)):not(:is(.btn-close,[class*="danger"],[class*="success"],[class*="warning"],[class*="destruct"],[class*="bg-red"],[class*="bg-green"],[class*="bg-amber"],[class*="text-red"],[data-danger],.leaflet-control button,.mapboxgl-control-container button,.maplibregl-control-container button,.video-js button,.plyr button,.shaka-video-container button)) {
 background:var(--control-accent)!important;color:var(--control-on-accent)!important;border-color:var(--control-accent);
}
html:root :is(button,[role=button],.btn,.button,[role=tab]):is([aria-pressed=true],[aria-selected=true],.is-active,.active,.selected),
html:root :is(.btn-check:checked+.btn,.segmented-control input:checked+span) {
 background:var(--control-accent)!important;color:var(--control-on-accent)!important;
 border-color:var(--control-accent)!important;box-shadow:inset 0 0 0 1px currentColor;font-weight:750!important;
}
/* A glyph supplements colour on text selection controls without replacing existing icons. */
html:root :is(.filter-chip,.tab-btn,.lang-btn,.theme-picker-btn,[role=tab]):is([aria-pressed=true],[aria-selected=true],.is-active,.active,.selected):not(:has(.theme-option-check,.check,.selection-icon))::after {
 content:"✓";display:inline-block;margin-inline-start:.4em;font-weight:900;
}
html:root :is(button,.btn,.button,[role=button],[role=tab]):focus-visible {
 outline:3px solid var(--control-accent)!important;outline-offset:3px;
}
html:root :is(button,.btn,.button,[role=button]):active:not(:disabled):not([aria-disabled=true]) {filter:brightness(.92)}
html:root :is(button,.btn,.button,[role=button]):is(:disabled,[aria-disabled=true]) {opacity:.5;cursor:not-allowed;filter:none}
@media(prefers-reduced-motion:reduce) {html:root :is(button,.btn,.button,[role=button]) {transition:none!important;animation:none!important}}

/* Destructive actions are buttons too, with semantic colours independent of the palette. */
:root {--control-danger-bg:#fde8eb;--control-danger-text:#9f1730;--control-danger-border:#b3261e}
@media(prefers-color-scheme:dark) {:root {--control-danger-bg:#3e1720;--control-danger-text:#ffb4ab;--control-danger-border:#ffb4ab}}
html:root:is([data-theme=light],[data-color-scheme=light]) {--control-danger-bg:#fde8eb;--control-danger-text:#9f1730;--control-danger-border:#b3261e}
html:root:is([data-theme=dark],[data-theme=amoled],[data-color-scheme=dark],[data-color-scheme=amoled]),.dark {--control-danger-bg:#3e1720;--control-danger-text:#ffb4ab;--control-danger-border:#ffb4ab}
html:root :is(button,.btn,.button,[role=button]):is(.danger,.btn-danger,.is-danger,[data-danger]) {
 background:var(--control-danger-bg)!important;color:var(--control-danger-text)!important;
 border:1px solid var(--control-danger-border)!important;border-radius:10px;min-height:40px;padding-block:6px;font-weight:600;
}

/* Palette-tinted masthead; expanded menus keep their neutral reading surfaces. */
html[data-palette] .navbar {
 --masthead-start:color-mix(in srgb,var(--secondary-color) 16%,var(--ui-panel));
 --masthead-end:color-mix(in srgb,var(--secondary-color) 5%,var(--ui-panel));
 background:linear-gradient(120deg,var(--masthead-start),var(--masthead-end))!important;
 border-bottom:1px solid color-mix(in srgb,var(--secondary-color) 28%,var(--ui-panel))!important;
 --bs-navbar-color:var(--ui-text);--bs-navbar-brand-color:var(--ui-text);
 --bs-navbar-hover-color:var(--secondary-color);--bs-navbar-active-color:var(--secondary-color);
}
html[data-theme=dark][data-palette] .navbar {
 --masthead-start:color-mix(in srgb,var(--secondary-color) 12%,var(--ui-panel));
 --masthead-end:color-mix(in srgb,var(--secondary-color) 4%,var(--ui-panel));
}
html[data-theme=dark][data-amoled=true][data-palette] .navbar {
 --masthead-start:color-mix(in srgb,var(--secondary-color) 6%,#000);
 --masthead-end:#000;
}
html:root[data-palette] .navbar .navbar-toggler {
 background:color-mix(in srgb,var(--secondary-color) 6%,var(--ui-panel));
 color:var(--secondary-color)!important;border-color:var(--secondary-color);
 box-shadow:none;
}
html:root[data-palette] .navbar .navbar-toggler:is(:hover,[aria-expanded=true]) {
 background:var(--ui-panel);
}
@media(max-width:1199.98px) {
html[data-palette] .navbar-collapse {
 background:var(--ui-raised);border-color:var(--ui-line);color:var(--ui-text);
}
}
html[data-palette] .mobile-nav-period-card {
 background:var(--ui-panel);border-color:var(--ui-line);color:var(--ui-text);
}
html[data-palette] :is(.mobile-nav-period-label,.mobile-nav-period-term) {
 color:var(--ui-muted);opacity:1;
}
html[data-palette] .navbar .navbar-toggler-icon {
 background-image:linear-gradient(currentColor,currentColor),linear-gradient(currentColor,currentColor),linear-gradient(currentColor,currentColor);
 background-size:100% 2px;background-position:center top,center,center bottom;background-repeat:no-repeat;
 width:1.3em;height:1em;
}
html[data-palette] .navbar .dropdown-menu {
 --bs-dropdown-color:var(--ui-text);--bs-dropdown-link-color:var(--ui-text);
 --bs-dropdown-header-color:var(--ui-muted);--bs-dropdown-link-hover-color:var(--ui-text);
 --bs-dropdown-link-hover-bg:var(--ui-raised);--bs-dropdown-link-active-color:var(--ui-on-action);
 --bs-dropdown-link-active-bg:var(--secondary-color);
}
html[data-palette] .navbar .dropdown-menu .dropdown-item {color:var(--ui-text)}
html[data-palette] .navbar .dropdown-menu :is(.dropdown-header,.quick-period-group-title) {color:var(--ui-muted)}
html[data-palette] .navbar .dropdown-menu .dropdown-item i {color:currentColor}
html[data-palette] .navbar .dropdown-menu .dropdown-item:is(:hover,:focus-visible,.active) {
 background:var(--secondary-color);color:var(--ui-on-action);
}
html[data-palette] .navbar .dropdown-menu .dropdown-item.disabled {color:var(--ui-muted);opacity:.65}
@media(max-width:1199.98px) {
 html[data-palette] .navbar-collapse {min-width:0;max-width:100%}
 html[data-palette] .mobile-nav-period-card {overflow-wrap:anywhere}
 html[data-palette] .navbar .dropdown-menu {min-width:0!important;max-width:100%;overflow-wrap:anywhere}
 html[data-palette] .navbar .dropdown-item {white-space:normal;min-height:40px}
 html[data-palette] .navbar-brand {min-width:0;white-space:normal}
 html[data-palette] .brand-logo-wrap {flex-shrink:0}
 html[data-palette] :is(.brand-period-school,.brand-period-term) {white-space:normal;overflow-wrap:anywhere}
}

/* Semantic outline buttons retain their meaning without bright text on a pale surface. */
html[data-palette] {--ui-warning:#805000;--ui-success:#12653c;--ui-info:#076477;--ui-danger:#a52132}
html[data-theme=dark][data-palette] {--ui-warning:#ffcf70;--ui-success:#80dfad;--ui-info:#82d8ec;--ui-danger:#ffb4ab}
html[data-palette] .btn-outline-warning {--ui-status:var(--ui-warning)}
html[data-palette] .btn-outline-success {--ui-status:var(--ui-success)}
html[data-palette] .btn-outline-info {--ui-status:var(--ui-info)}
html[data-palette] .btn-outline-danger {--ui-status:var(--ui-danger)}
html:root[data-palette] :is(.btn-outline-warning,.btn-outline-success,.btn-outline-info,.btn-outline-danger) {
 color:var(--ui-status)!important;background:color-mix(in srgb,var(--ui-status) 6%,var(--ui-panel))!important;
 border:1px solid var(--ui-status)!important;border-radius:10px;min-height:40px;padding-block:6px;
 font-weight:600;white-space:normal;overflow-wrap:break-word;
}
html:root[data-palette] :is(.btn-outline-warning,.btn-outline-success,.btn-outline-info,.btn-outline-danger):is(:hover,:focus-visible,.active) {
 color:var(--ui-on-action)!important;background:var(--ui-status)!important;
}

/* Media controls use the same palette without inheriting page-button geometry. */
html:root[data-palette] .shaka-video-container {
 --player-accent:var(--control-accent);--player-on-accent:var(--control-on-accent);
 --player-track:color-mix(in srgb,var(--ui-text) 24%,var(--ui-panel));
 --player-buffer:color-mix(in srgb,var(--ui-text) 48%,var(--ui-panel));
}
html:root[data-palette] .shaka-bottom-controls {
 width:calc(100% - 16px);padding:8px;margin-bottom:8px;border:1px solid var(--ui-line);
 border-radius:14px;background:var(--ui-panel);color:var(--ui-text);
 box-shadow:0 4px 20px #0004;box-sizing:border-box;
}
html:root[data-palette] .shaka-controls-button-panel {
 gap:4px;overflow:visible;flex-wrap:wrap;
}
html:root[data-palette] .shaka-controls-button-panel > * {
 color:var(--ui-text);text-shadow:none;opacity:1;
}
html:root[data-palette] .shaka-controls-button-panel > button {
 width:40px;height:40px;min-width:40px;min-height:40px;flex-shrink:0;
 padding:0;border:1px solid var(--control-outline);border-radius:10px;
 background:var(--ui-raised);color:var(--ui-text);line-height:1;
}
html:root[data-palette] .shaka-controls-button-panel > .shaka-ad-info:empty {display:none}
html:root[data-palette] .shaka-controls-button-panel > .shaka-current-time {
 width:auto;min-width:40px;padding:0 8px;font-size:.8125rem;white-space:nowrap;
}
html:root[data-palette] .shaka-controls-button-panel > .shaka-play-button {
 background:var(--player-accent);color:var(--player-on-accent);border-color:var(--player-accent);
}
html:root[data-palette] .shaka-video-container :is(.shaka-settings-menu,.shaka-overflow-menu,.shaka-context-menu) {
 background:var(--ui-panel);color:var(--ui-text);border:1px solid var(--ui-line);
 padding:6px;border-radius:14px;box-shadow:0 8px 28px #0006;gap:4px;
 max-width:calc(100% - 24px);max-height:calc(100% - 100px);bottom:94px;
 scrollbar-color:var(--control-outline) var(--ui-panel);
}
html:root[data-palette] .shaka-video-container :is(.shaka-settings-menu,.shaka-overflow-menu,.shaka-context-menu) button {
 background:var(--ui-raised);color:var(--ui-text);border:1px solid transparent;
 border-radius:9px;min-height:40px;padding:8px 12px;font-size:.875rem;
 line-height:1.4;white-space:normal;overflow-wrap:break-word;text-align:start;
}
html:root[data-palette] .shaka-video-container button:is(:hover,:focus-visible) {
 background:color-mix(in srgb,var(--player-accent) 12%,var(--ui-panel));color:var(--ui-text);
 border-color:var(--player-accent);
}
html:root[data-palette] .shaka-video-container button[aria-selected=true] {
 background:var(--player-accent)!important;color:var(--player-on-accent)!important;
 border-color:var(--player-accent)!important;box-shadow:none;font-weight:700;
}
html:root[data-palette] .shaka-video-container button:focus-visible {
 outline-offset:-3px;outline-color:currentColor!important;
}
html:root[data-palette] .shaka-range-element {accent-color:var(--player-accent)}
html:root[data-palette] .shaka-range-element::-webkit-slider-thumb {background:var(--player-accent);border:2px solid var(--ui-panel);box-shadow:0 0 0 1px var(--player-accent)}
html:root[data-palette] .shaka-range-element::-moz-range-thumb {background:var(--player-accent);border:2px solid var(--ui-panel);box-shadow:0 0 0 1px var(--player-accent)}
html:root[data-palette] :is(#videoPlayerModal,#imgPreviewModal,#audioPlayerModal) .modal-header .btn-close {
 filter:none!important;opacity:1;width:40px;height:40px;padding:0;margin-block:0;
 flex-shrink:0;box-sizing:border-box;background-color:var(--ui-raised);
 background-position:center;background-size:12px;border:1px solid var(--control-outline);border-radius:10px;
}
html:root[data-palette][data-theme=dark] :is(#videoPlayerModal,#imgPreviewModal,#audioPlayerModal) .modal-header .btn-close {
 --bs-btn-close-bg:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath stroke='%23e2e4e9' stroke-width='2' d='m3 3 10 10M13 3 3 13'/%3e%3c/svg%3e");
}
html:root[data-palette] :is(video,audio) {color-scheme:light}
html:root[data-palette][data-theme=dark] :is(video,audio) {color-scheme:dark}
@media(max-width:575px) {
 html:root[data-palette] .shaka-bottom-controls {width:calc(100% - 8px);padding:6px;margin-bottom:4px}
 html:root[data-palette] .shaka-controls-button-panel {gap:4px}
 html:root[data-palette] .shaka-controls-button-panel > .shaka-ad-info:empty {display:none}
html:root[data-palette] .shaka-controls-button-panel > .shaka-current-time {padding-inline:4px}
 html:root[data-palette] .shaka-controls-button-panel > .shaka-spacer {min-width:0;width:0}
 html:root[data-palette] .shaka-video-container :is(.shaka-settings-menu,.shaka-overflow-menu) {bottom:144px;max-height:calc(100% - 150px)}
}