/* ClanCash theme runtime CSS foundation.
 *
 * This file is safe to include before the application is wired to skins:
 * it does not change the current UI unless html[data-cc-skin] is present.
 */

:root {
  --cc-bg: #eef4fb;
  --cc-screen-bg: #f8fbff;
  --cc-list-bg: #f1f6fc;
  --cc-row-bg: #ffffff;
  --cc-row-unread-bg: #eff7ff;
  --cc-surface: #ffffff;
  --cc-card-bg: #ffffff;
  --cc-text: #0f172a;
  --cc-muted: #64748b;
  --cc-toolbar-text: #0f172a;
  --cc-primary: #0ea5e9;
  --cc-secondary: #38bdf8;
  --cc-accent: #7c3aed;
  --cc-border: #dbe5f0;
  --cc-divider: #dbe5f0;
  --cc-button-bg: #ffffff;
  --cc-button-text: #0f172a;
  --cc-button-border: #dbe5f0;
  --cc-control-bg: #ffffff;
  --cc-control-checked-bg: #dff3ff;
  --cc-control-border: #dbe5f0;
  --cc-section-bg: #f4f7fb;
  --cc-section-text: #0f172a;
  --cc-section-border: #dbe5f0;
  --cc-section-active-bg: #dff3ff;
  --cc-section-active-text: #075985;
  --cc-badge-bg: #f43f5e;
  --cc-badge-text: #ffffff;
  --cc-radius-card: 14px;
  --cc-radius-row: 14px;
  --cc-radius-button: 16px;
  --cc-radius-toolbar: 22px;
  --cc-border-width: 1px;
  --cc-shadow-strength: 18;
  --cc-gradient-angle: 145deg;
  --cc-gradient-strength: 36;
  --cc-shadow-card: 0 16px 42px rgba(15, 23, 42, calc(var(--cc-shadow-strength) / 1000));
  --cc-shadow-panel: 0 12px 32px rgba(15, 23, 42, calc(var(--cc-shadow-strength) / 1200));
  --cc-shadow-bubble: 0 8px 22px rgba(15, 23, 42, calc(var(--cc-shadow-strength) / 1400));
  --cc-shadow-button: none;
  --cc-body-gradient:
    linear-gradient(
      var(--cc-gradient-angle),
      color-mix(in srgb, var(--cc-screen-bg) calc(100% - var(--cc-gradient-strength) * 0.35%), var(--cc-primary)),
      var(--cc-bg)
    );
  --cc-card-gradient:
    linear-gradient(
      var(--cc-gradient-angle),
      color-mix(in srgb, var(--cc-surface) calc(100% - var(--cc-gradient-strength) * 0.18%), var(--cc-primary)),
      var(--cc-card-bg)
    );
}

/* Future opt-in shell hooks. Existing ClanCash pages do not use these classes yet. */
html[data-cc-skin] body.cc-theme-shell {
  background: var(--cc-body-gradient);
  color: var(--cc-text);
}

.cc-theme-surface {
  background: var(--cc-surface);
  color: var(--cc-text);
  border-color: var(--cc-border);
  border-radius: var(--cc-radius-card);
  box-shadow: var(--cc-shadow-card);
}

.cc-theme-card {
  background: var(--cc-card-gradient);
  color: var(--cc-text);
  border: var(--cc-border-width) solid var(--cc-border);
  border-radius: var(--cc-radius-card);
  box-shadow: var(--cc-shadow-card);
}

.cc-theme-row {
  background: var(--cc-row-bg);
  color: var(--cc-text);
  border: var(--cc-border-width) solid var(--cc-border);
  border-radius: var(--cc-radius-row);
}

.cc-theme-muted {
  color: var(--cc-muted);
}

.cc-theme-button {
  background: var(--cc-button-bg);
  color: var(--cc-button-text);
  border: var(--cc-border-width) solid var(--cc-button-border);
  border-radius: var(--cc-radius-button);
  box-shadow: var(--cc-shadow-panel);
}

.cc-theme-pill {
  background: var(--cc-section-bg);
  color: var(--cc-section-text);
  border: var(--cc-border-width) solid var(--cc-section-border);
  border-radius: var(--cc-radius-pill);
}

.cc-theme-pill.is-active,
.cc-theme-pill[aria-selected="true"] {
  background: var(--cc-section-active-bg);
  color: var(--cc-section-active-text);
}

.cc-theme-input {
  background: var(--cc-control-bg);
  color: var(--cc-text);
  border: var(--cc-border-width) solid var(--cc-control-border);
  border-radius: var(--cc-radius-row);
}

.cc-theme-input::placeholder {
  color: var(--cc-muted);
}

.cc-theme-badge {
  background: var(--cc-badge-bg);
  color: var(--cc-badge-text);
  border-radius: var(--cc-radius-pill);
}

/* Main app shell integration (Patch 2).
 * This block is opt-in: it only affects pages after a JSON skin is selected.
 * It intentionally preserves the existing transparent topbar/menu behavior by
 * mixing theme surfaces with transparent instead of adding new opacity tokens.
 */
html[data-cc-skin] {
  color-scheme: light dark;
}

html[data-cc-skin][data-cc-theme-mode="light"] {
  color-scheme: light;
}

html[data-cc-skin][data-cc-theme-mode="dark"] {
  color-scheme: dark;
}

html[data-cc-skin] body,
html[data-cc-skin] body.cc-theme-shell {
  background:
    radial-gradient(1100px 660px at 0% -12%, color-mix(in srgb, var(--cc-primary) 22%, transparent), transparent 58%),
    radial-gradient(880px 560px at 100% 0%, color-mix(in srgb, var(--cc-accent) 16%, transparent), transparent 58%),
    radial-gradient(900px 660px at 28% 112%, color-mix(in srgb, var(--cc-secondary) 12%, transparent), transparent 62%),
    var(--cc-screen-bg) !important;
  color: var(--cc-text) !important;
}

html[data-cc-skin] .fbp-topbar {
  color: var(--cc-toolbar-text) !important;
  background: color-mix(in srgb, var(--cc-card-bg) 72%, transparent) !important;
  border-color: color-mix(in srgb, var(--cc-border) 74%, transparent) !important;
  border-width: var(--cc-border-width) !important;
  border-radius: var(--cc-radius-toolbar) !important;
  box-shadow: var(--cc-shadow-panel) !important;
  backdrop-filter: saturate(145%) blur(16px);
  -webkit-backdrop-filter: saturate(145%) blur(16px);
}

html[data-cc-skin] .card,
html[data-cc-skin] #userMenu,
html[data-cc-skin] #navDrawer,
html[data-cc-skin] .mobileTabsInner {
  background: color-mix(in srgb, var(--cc-card-bg) 94%, transparent) !important;
  color: var(--cc-text) !important;
  border-color: var(--cc-border) !important;
  border-width: var(--cc-border-width) !important;
  border-radius: var(--cc-radius-card) !important;
  box-shadow: var(--cc-shadow-card) !important;
}

html[data-cc-skin] #userMenu,
html[data-cc-skin] #navDrawer {
  background: color-mix(in srgb, var(--cc-card-bg) 96%, transparent) !important;
  backdrop-filter: saturate(145%) blur(14px);
  -webkit-backdrop-filter: saturate(145%) blur(14px);
}

html[data-cc-skin] .pill {
  background: color-mix(in srgb, var(--cc-section-bg) 94%, transparent) !important;
  color: var(--cc-section-text) !important;
  border-color: var(--cc-section-border) !important;
  border-width: var(--cc-border-width) !important;
  border-radius: var(--cc-radius-row) !important;
  box-shadow: var(--cc-shadow-panel) !important;
}

html[data-cc-skin] .navlink,
html[data-cc-skin] #userBtn,
html[data-cc-skin] #navBtn,
html[data-cc-skin] #navDrawerClose,
html[data-cc-skin] header > div:last-child > a,
html[data-cc-skin] header > div:last-child > button {
  background: color-mix(in srgb, var(--cc-control-bg) 84%, transparent) !important;
  color: var(--cc-text) !important;
  border-color: color-mix(in srgb, var(--cc-control-border) 82%, transparent) !important;
  border-width: var(--cc-border-width) !important;
  border-radius: var(--cc-radius-button) !important;
  box-shadow: var(--cc-shadow-panel) !important;
}

html[data-cc-skin] .navlink:hover,
html[data-cc-skin] #userBtn:hover,
html[data-cc-skin] #navBtn:hover,
html[data-cc-skin] #navDrawerClose:hover,
html[data-cc-skin] header > div:last-child > a:hover,
html[data-cc-skin] header > div:last-child > button:hover,
html[data-cc-skin] #userMenu a:hover,
html[data-cc-skin] #userMenu button:hover,
html[data-cc-skin] #navDrawer a:hover {
  background: color-mix(in srgb, var(--cc-section-active-bg) 82%, transparent) !important;
  color: var(--cc-section-active-text) !important;
  border-color: color-mix(in srgb, var(--cc-primary) 46%, var(--cc-control-border)) !important;
}

html[data-cc-skin] .navlink.active {
  background: linear-gradient(var(--cc-gradient-angle), var(--cc-section-active-bg), color-mix(in srgb, var(--cc-section-active-bg) 72%, var(--cc-primary))) !important;
  color: var(--cc-section-active-text) !important;
  border-color: color-mix(in srgb, var(--cc-primary) 48%, var(--cc-section-border)) !important;
  box-shadow: var(--cc-shadow-panel) !important;
}

html[data-cc-skin] #userMenu a,
html[data-cc-skin] #userMenu button,
html[data-cc-skin] #navDrawer a {
  color: var(--cc-text) !important;
  border-radius: var(--cc-radius-row) !important;
}

html[data-cc-skin] input,
html[data-cc-skin] select,
html[data-cc-skin] textarea {
  background-color: var(--cc-control-bg) !important;
  color: var(--cc-text) !important;
  border-color: var(--cc-control-border) !important;
  border-width: var(--cc-border-width) !important;
  border-radius: var(--cc-radius-button) !important;
  accent-color: var(--cc-primary);
}

html[data-cc-skin] input::placeholder,
html[data-cc-skin] textarea::placeholder {
  color: var(--cc-muted) !important;
  opacity: .9;
}

html[data-cc-skin] button[type="submit"],
html[data-cc-skin] .btn-primary,
html[data-cc-skin] a.btn-primary {
  background: linear-gradient(var(--cc-gradient-angle), var(--cc-button-bg), color-mix(in srgb, var(--cc-button-bg) 78%, var(--cc-primary))) !important;
  color: var(--cc-button-text) !important;
  border-color: var(--cc-button-border) !important;
  border-width: var(--cc-border-width) !important;
  border-radius: var(--cc-radius-button) !important;
  box-shadow: var(--cc-shadow-panel) !important;
}

html[data-cc-skin] [data-chat-badge],
html[data-cc-skin] .badge,
html[data-cc-skin] .count-badge {
  background: var(--cc-badge-bg) !important;
  color: var(--cc-badge-text) !important;
}

html[data-cc-skin] hr,
html[data-cc-skin] .divide-y > :not([hidden]) ~ :not([hidden]) {
  border-color: var(--cc-divider) !important;
}

html[data-cc-skin] .text-slate-400,
html[data-cc-skin] .text-slate-500,
html[data-cc-skin] .text-slate-600 {
  color: var(--cc-muted) !important;
}

html[data-cc-skin] .text-slate-100,
html[data-cc-skin] .text-slate-200,
html[data-cc-skin] .text-slate-300,
html[data-cc-skin] .text-slate-900,
html[data-cc-skin] .text-black {
  color: var(--cc-text) !important;
}

/* Main app theme adapter coverage (Patch 5).
 * This keeps the existing ClanCash overrides in place, but exposes the selected
 * JSON skin through the legacy CSS variables used by older modals/menus.
 */
html[data-cc-skin] {
  --bg: var(--cc-screen-bg) !important;
  --card: var(--cc-card-bg) !important;
  --ink: var(--cc-text) !important;
  --fg: var(--cc-text) !important;
  --muted: var(--cc-muted) !important;
  --line: var(--cc-border) !important;
  --border: var(--cc-border) !important;
  --accent: var(--cc-primary) !important;
  --shadow: var(--cc-shadow-card) !important;
}

html[data-cc-skin] :where(.fixed.inset-0, [id$="Pop"], [id$="Modal"], [id$="Sheet"], [id$="DrawerWrap"]) :where(.card, .pill),
html[data-cc-skin] :where([role="dialog"], .modal-card, .modalCard, .calendar-modal-panel, .calendar-drawer-panel, .calendar-mobile-day-panel, .media-modal-card, .media-viewer-card, .media-share-card, .chat-share-card, .chat-media-modal-card, .voice-shell-dialog, .sl-panel, .sl-mini-card) {
  background: color-mix(in srgb, var(--cc-card-bg) 97%, transparent) !important;
  color: var(--cc-text) !important;
  border-color: var(--cc-border) !important;
  border-width: var(--cc-border-width) !important;
  border-radius: var(--cc-radius-card) !important;
  box-shadow: var(--cc-shadow-card) !important;
}

html[data-cc-skin] :where(#prefPop, #filtersPop, #trPop, #dashFiltersPop, #remShareModal, #newChatModal, #gdmModal, #shareModal, #familyProfilePop, #familyViewPop, #cashSheet, #transferPop, #addFriendPop, #familyQrPop, #profileImagePop, #profilePop) {
  color: var(--cc-text) !important;
}

html[data-cc-skin] :where(#prefPop, #filtersPop, #trPop, #dashFiltersPop, #remShareModal, #newChatModal, #gdmModal, #shareModal, #familyProfilePop, #familyViewPop, #cashSheet, #transferPop, #addFriendPop, #familyQrPop, #profileImagePop, #profilePop) :where(.bg-white, .bg-slate-50, .bg-slate-100, .bg-slate-900, .bg-slate-950, .bg-slate-950\/95, .bg-slate-950\/80) {
  background: color-mix(in srgb, var(--cc-card-bg) 97%, transparent) !important;
  color: var(--cc-text) !important;
  border-color: var(--cc-border) !important;
}

html[data-cc-skin] :where(#userMenu, #navDrawer, [role="menu"], .dropdown-menu, .popover, .menu-panel, .context-menu, .msg-react-menu, .sl-suggest-box) {
  background: color-mix(in srgb, var(--cc-card-bg) 97%, transparent) !important;
  color: var(--cc-text) !important;
  border-color: var(--cc-border) !important;
  border-width: var(--cc-border-width) !important;
  border-radius: var(--cc-radius-card) !important;
  box-shadow: var(--cc-shadow-panel) !important;
  backdrop-filter: saturate(145%) blur(14px);
  -webkit-backdrop-filter: saturate(145%) blur(14px);
}

html[data-cc-skin] :where(.modal-card, .modalCard, [role="dialog"], #prefPop, #filtersPop, #trPop, #dashFiltersPop, #shoppingListsRoot) :where(.text-slate-400, .text-slate-500, .text-slate-600, .sl-sub, .sl-help, .sl-item-sub, .sl-card-meta, .sl-empty, .sl-field label) {
  color: var(--cc-muted) !important;
}

html[data-cc-skin] :where(.modal-card, .modalCard, [role="dialog"], #prefPop, #filtersPop, #trPop, #dashFiltersPop, #shoppingListsRoot) :where(.text-slate-100, .text-slate-200, .text-slate-300, .text-slate-900, .text-black, .sl-title, .sl-card-title, .sl-item-text) {
  color: var(--cc-text) !important;
}

html[data-cc-skin] :where(.modal-card, .modalCard, [role="dialog"], #prefPop, #filtersPop, #trPop, #dashFiltersPop, #shoppingListsRoot) :where(input, select, textarea, .sl-field input, .sl-field textarea) {
  background: var(--cc-control-bg) !important;
  color: var(--cc-text) !important;
  border-color: var(--cc-control-border) !important;
  border-width: var(--cc-border-width) !important;
  border-radius: var(--cc-radius-button) !important;
}

html[data-cc-skin] :where(.modal-card, .modalCard, [role="dialog"], #prefPop, #filtersPop, #trPop, #dashFiltersPop, #shoppingListsRoot) :where(button, .sl-btn, .sl-icon, .msg-react-opt) {
  border-color: var(--cc-control-border) !important;
  border-width: var(--cc-border-width) !important;
  border-radius: var(--cc-radius-button) !important;
}

html[data-cc-skin] :where(.modal-card, .modalCard, [role="dialog"], #prefPop, #filtersPop, #trPop, #dashFiltersPop, #shoppingListsRoot) :where(.btn-primary, button[type="submit"], .sl-btn.primary) {
  background: linear-gradient(var(--cc-gradient-angle), var(--cc-button-bg), color-mix(in srgb, var(--cc-button-bg) 78%, var(--cc-primary))) !important;
  color: var(--cc-button-text) !important;
  border-color: var(--cc-button-border) !important;
}

html[data-cc-skin] #shoppingListsRoot .sl-mask,
html[data-cc-skin] .voice-shell-backdrop {
  background: color-mix(in srgb, #020617 52%, transparent) !important;
}

html[data-cc-skin] #shoppingListsRoot :where(.sl-head, .sl-footer, .sl-sticky-summary) {
  background: color-mix(in srgb, var(--cc-card-bg) 98%, transparent) !important;
  color: var(--cc-text) !important;
  border-color: var(--cc-border) !important;
}

html[data-cc-skin] #shoppingListsRoot :where(.sl-card, .sl-item, .sl-mini-card, .sl-pill, .sl-btn.secondary, .sl-icon, .sl-suggest-item, .msg-react-opt) {
  background: color-mix(in srgb, var(--cc-control-bg) 94%, transparent) !important;
  color: var(--cc-text) !important;
  border-color: var(--cc-control-border) !important;
}

html[data-cc-skin] #shoppingListsRoot :where(.sl-item:hover, .sl-suggest-item:hover) {
  background: color-mix(in srgb, var(--cc-section-active-bg) 72%, transparent) !important;
  color: var(--cc-section-active-text) !important;
}

/* Main app deeper coverage (Patch 6).
 * Keep existing page overrides, but route common hardcoded Tailwind/slate panels,
 * shopping drawer internals, tracker pages and reports through the runtime tokens.
 */
html[data-cc-skin] {
  --surface: var(--cc-card-bg) !important;
  --panel: var(--cc-card-bg) !important;
  --control: var(--cc-control-bg) !important;
  --primary: var(--cc-primary) !important;
  --primary-text: var(--cc-button-text) !important;
  --btn: var(--cc-button-bg) !important;
  --btn-text: var(--cc-button-text) !important;
  --radius-card: var(--cc-radius-card) !important;
  --radius-row: var(--cc-radius-row) !important;
  --radius-button: var(--cc-radius-button) !important;
}

html[data-cc-skin] :where(
  .bg-white, .bg-slate-50, .bg-slate-100,
  .bg-slate-800, .bg-slate-800\/20, .bg-slate-800\/30, .bg-slate-800\/40, .bg-slate-800\/50, .bg-slate-800\/60,
  .bg-slate-900, .bg-slate-900\/20, .bg-slate-900\/30, .bg-slate-900\/40, .bg-slate-900\/50, .bg-slate-900\/60, .bg-slate-900\/70, .bg-slate-900\/80, .bg-slate-900\/90,
  .bg-slate-950, .bg-slate-950\/20, .bg-slate-950\/30, .bg-slate-950\/40, .bg-slate-950\/50, .bg-slate-950\/60, .bg-slate-950\/70, .bg-slate-950\/80, .bg-slate-950\/90, .bg-slate-950\/95
) {
  background-color: color-mix(in srgb, var(--cc-card-bg) 94%, transparent) !important;
  color: var(--cc-text) !important;
}

html[data-cc-skin] :where(
  .border-white, .border-slate-100, .border-slate-200, .border-slate-300,
  .border-slate-600, .border-slate-600\/20, .border-slate-600\/30, .border-slate-600\/40, .border-slate-600\/50,
  .border-slate-700, .border-slate-700\/20, .border-slate-700\/30, .border-slate-700\/40, .border-slate-700\/50, .border-slate-700\/60, .border-slate-700\/70,
  .border-slate-800, .border-slate-800\/20, .border-slate-800\/30, .border-slate-800\/40, .border-slate-800\/50, .border-slate-800\/60
) {
  border-color: var(--cc-border) !important;
}

html[data-cc-skin] :where(.shadow, .shadow-sm, .shadow-md, .shadow-lg, .shadow-xl, .shadow-2xl) {
  box-shadow: var(--cc-shadow-card) !important;
}

html[data-cc-skin] :where(.rounded-xl, .rounded-2xl, .rounded-3xl) {
  border-radius: var(--cc-radius-card) !important;
}

html[data-cc-skin] :where(.rounded-lg, .rounded-md) {
  border-radius: var(--cc-radius-row) !important;
}

html[data-cc-skin] :where(.text-slate-50, .text-slate-100, .text-slate-200, .text-slate-300, .text-white) {
  color: var(--cc-text) !important;
}

html[data-cc-skin] :where(.text-slate-400, .text-slate-500, .text-slate-600, .text-slate-700) {
  color: var(--cc-muted) !important;
}

html[data-cc-skin] :where(.bg-sky-500, .bg-sky-600, .bg-blue-500, .bg-blue-600, .bg-indigo-500, .bg-indigo-600) {
  background: linear-gradient(var(--cc-gradient-angle), var(--cc-button-bg), color-mix(in srgb, var(--cc-button-bg) 72%, var(--cc-primary))) !important;
  color: var(--cc-button-text) !important;
  border-color: var(--cc-button-border) !important;
}

/* Shopping drawer: bridge its custom surface/buttons to the selected app skin. */
html[data-cc-skin] #shoppingListsRoot {
  --sl-bg: var(--cc-screen-bg) !important;
  --sl-panel-bg: var(--cc-card-bg) !important;
  --sl-card-bg: var(--cc-control-bg) !important;
  --sl-text: var(--cc-text) !important;
  --sl-muted: var(--cc-muted) !important;
  --sl-border: var(--cc-border) !important;
  --sl-accent: var(--cc-primary) !important;
  color: var(--cc-text) !important;
}

html[data-cc-skin] #shoppingListsRoot :where(.sl-panel, .sl-mini-card) {
  background: color-mix(in srgb, var(--cc-card-bg) 98%, transparent) !important;
  color: var(--cc-text) !important;
  border-color: var(--cc-border) !important;
  border-width: var(--cc-border-width) !important;
  border-radius: var(--cc-radius-card) !important;
  box-shadow: var(--cc-shadow-card) !important;
}

html[data-cc-skin] #shoppingListsRoot :where(.sl-content, .sl-section, .sl-list, .sl-buy-list, .sl-grid) {
  background: transparent !important;
  color: var(--cc-text) !important;
}

html[data-cc-skin] #shoppingListsRoot :where(.sl-card, .sl-item, .sl-pill, .sl-sticky-summary, .sl-suggest-box, .sl-suggest-item, .sl-empty) {
  background: color-mix(in srgb, var(--cc-control-bg) 94%, transparent) !important;
  color: var(--cc-text) !important;
  border-color: var(--cc-control-border) !important;
  border-radius: var(--cc-radius-row) !important;
}

html[data-cc-skin] #shoppingListsRoot :where(.sl-head, .sl-footer) {
  background: color-mix(in srgb, var(--cc-card-bg) 98%, transparent) !important;
  color: var(--cc-text) !important;
  border-color: var(--cc-border) !important;
}

html[data-cc-skin] #shoppingListsRoot :where(.sl-btn, [data-sl-back], [data-sl-close], [data-sl-new], [data-sl-archive], [data-sl-home], [data-sl-mini-close]) {
  background: color-mix(in srgb, var(--cc-control-bg) 90%, transparent) !important;
  color: var(--cc-text) !important;
  border-color: var(--cc-control-border) !important;
  border-width: var(--cc-border-width) !important;
  border-radius: var(--cc-radius-button) !important;
  box-shadow: var(--cc-shadow-panel) !important;
}

html[data-cc-skin] #shoppingListsRoot :where(.sl-btn.primary, [data-sl-purchase], [data-sl-complete]) {
  background: linear-gradient(var(--cc-gradient-angle), var(--cc-button-bg), color-mix(in srgb, var(--cc-button-bg) 74%, var(--cc-primary))) !important;
  color: var(--cc-button-text) !important;
  border-color: var(--cc-button-border) !important;
}

html[data-cc-skin] #shoppingListsRoot :where(.sl-card-meta, .sl-item-sub, .sl-help, .sl-sub, .sl-empty, .sl-entry-meta) {
  color: var(--cc-muted) !important;
}

html[data-cc-skin] #shoppingListsRoot :where(.sl-title, .sl-mini-title, .sl-card-title, .sl-item-text, .sl-field label) {
  color: var(--cc-text) !important;
}

html[data-cc-skin] #shoppingListsRoot :where(.sl-field input, .sl-field textarea, .sl-field select, input, textarea, select) {
  background: var(--cc-control-bg) !important;
  color: var(--cc-text) !important;
  border-color: var(--cc-control-border) !important;
  border-radius: var(--cc-radius-button) !important;
}

/* Voice modal: avoid the fixed blue mic tile when an app skin is active. */
html[data-cc-skin] :where(.voice-shell-mic, .voice-shell-mini-btn, .voice-shell-btn) {
  background: linear-gradient(var(--cc-gradient-angle), var(--cc-button-bg), color-mix(in srgb, var(--cc-button-bg) 72%, var(--cc-primary))) !important;
  color: var(--cc-button-text) !important;
  border-color: var(--cc-button-border) !important;
  border-width: var(--cc-border-width) !important;
  border-radius: var(--cc-radius-button) !important;
  box-shadow: var(--cc-shadow-panel) !important;
}

html[data-cc-skin] :where(.voice-shell-status, .voice-shell-transcript, .voice-shell-context, .voice-shell-reply) {
  color: var(--cc-muted) !important;
}

/* Tracker/diary/report pages have many local Tailwind classes and page-specific cards.
 * Scope the stronger mapping through data-cc-page so chat/light_mobile stay untouched.
 */
html[data-cc-skin][data-cc-page="child_tracker.php"] :where(.card, section, article, .ct-card, .ct-panel, .ct-summary-card, .ct-stat, .ct-tile, .ct-row, .ct-item, .tracker-card, .tracker-panel, .child-card, .product-card),
html[data-cc-skin][data-cc-page="victoria_diary.php"] :where(.card, section[data-viki-panel], .viki-row, .viki-compact-stat, .viki-media-thumb, .viki-cal-cell, .viki-mobile-hero, .viki-panel, .viki-card),
html[data-cc-skin][data-cc-page="report.php"] :where(.card, section, article, .report-card, .report-panel, .report-tile, .report-kpi, .report-signal, .report-slide, .report-stage, .report-filter-card) {
  background: color-mix(in srgb, var(--cc-card-bg) 94%, transparent) !important;
  color: var(--cc-text) !important;
  border-color: var(--cc-border) !important;
  border-width: var(--cc-border-width) !important;
  border-radius: var(--cc-radius-card) !important;
  box-shadow: var(--cc-shadow-card) !important;
}

html[data-cc-skin][data-cc-page="child_tracker.php"] :where(button, a[role="button"], .pill, .ct-pill, .ct-chip, .ct-tab, .ct-action, .tracker-action),
html[data-cc-skin][data-cc-page="victoria_diary.php"] :where(button, a[role="button"], .pill, .viki-tab, .viki-chip, .viki-action),
html[data-cc-skin][data-cc-page="report.php"] :where(button, a[role="button"], .pill, .report-action, .report-chip, .report-tab) {
  border-color: var(--cc-control-border) !important;
  border-width: var(--cc-border-width) !important;
  border-radius: var(--cc-radius-button) !important;
}

html[data-cc-skin][data-cc-page="child_tracker.php"] :where(.text-slate-400, .text-slate-500, .text-slate-600, small, .muted, .sub, .meta),
html[data-cc-skin][data-cc-page="victoria_diary.php"] :where(.text-slate-400, .text-slate-500, .text-slate-600, small, .muted, .sub, .meta),
html[data-cc-skin][data-cc-page="report.php"] :where(.text-slate-400, .text-slate-500, .text-slate-600, small, .muted, .sub, .meta) {
  color: var(--cc-muted) !important;
}

/* Report page coverage correction (Patch 7).
 * The report screen has its own local card/tile CSS and sometimes no BOOT.page.
 * The JS now stamps data-cc-page from location.pathname; these selectors are
 * intentionally scoped to report.php/report so they do not affect light_mobile.
 */
html[data-cc-skin][data-cc-page="report.php"],
html[data-cc-skin][data-cc-page-name="report"] {
  --report-bg: var(--cc-screen-bg) !important;
  --report-surface: var(--cc-card-bg) !important;
  --report-card: var(--cc-card-bg) !important;
  --report-panel: var(--cc-card-bg) !important;
  --report-control: var(--cc-control-bg) !important;
  --report-line: var(--cc-border) !important;
  --report-border: var(--cc-border) !important;
  --report-text: var(--cc-text) !important;
  --report-muted: var(--cc-muted) !important;
  --report-accent: var(--cc-primary) !important;
  --report-shadow: var(--cc-shadow-card) !important;
}

html[data-cc-skin][data-cc-page="report.php"] :where(main, .main, .content, .page, .wrap, .report-root, .reportRoot, .report-shell, .reportShell),
html[data-cc-skin][data-cc-page-name="report"] :where(main, .main, .content, .page, .wrap, .report-root, .reportRoot, .report-shell, .reportShell) {
  color: var(--cc-text) !important;
}

html[data-cc-skin][data-cc-page="report.php"] :where(
  .report-card, .report-panel, .report-tile, .report-kpi, .report-signal, .report-filter-card,
  .report-control-card, .report-control, .report-box, .report-widget, .report-section,
  .metric-card, .signal-card, .kpi-card, .budget-card, .insight-card, .analysis-card,
  .control-card, .summary-card, .stat-card, .alert-card, .digest-card,
  [class*="report-card" i], [class*="report-panel" i], [class*="report-tile" i],
  [class*="report-kpi" i], [class*="report-signal" i], [class*="report-control" i],
  [class*="metric-card" i], [class*="signal-card" i], [class*="kpi-card" i],
  [class*="budget-card" i], [class*="insight-card" i], [class*="analysis-card" i],
  [class*="control-card" i], [class*="summary-card" i], [class*="stat-card" i]
),
html[data-cc-skin][data-cc-page-name="report"] :where(
  .report-card, .report-panel, .report-tile, .report-kpi, .report-signal, .report-filter-card,
  .report-control-card, .report-control, .report-box, .report-widget, .report-section,
  .metric-card, .signal-card, .kpi-card, .budget-card, .insight-card, .analysis-card,
  .control-card, .summary-card, .stat-card, .alert-card, .digest-card,
  [class*="report-card" i], [class*="report-panel" i], [class*="report-tile" i],
  [class*="report-kpi" i], [class*="report-signal" i], [class*="report-control" i],
  [class*="metric-card" i], [class*="signal-card" i], [class*="kpi-card" i],
  [class*="budget-card" i], [class*="insight-card" i], [class*="analysis-card" i],
  [class*="control-card" i], [class*="summary-card" i], [class*="stat-card" i]
) {
  background:
    linear-gradient(var(--cc-gradient-angle), color-mix(in srgb, var(--cc-card-bg) 92%, var(--cc-primary)), var(--cc-card-bg)) !important;
  color: var(--cc-text) !important;
  border-color: var(--cc-border) !important;
  border-width: var(--cc-border-width) !important;
  border-radius: var(--cc-radius-card) !important;
  box-shadow: var(--cc-shadow-card) !important;
}

html[data-cc-skin][data-cc-page="report.php"] :where(.rounded-lg, .rounded-xl, .rounded-2xl, .rounded-3xl):not(button):not(a):not(input):not(select):not(textarea):not(canvas):not(svg),
html[data-cc-skin][data-cc-page-name="report"] :where(.rounded-lg, .rounded-xl, .rounded-2xl, .rounded-3xl):not(button):not(a):not(input):not(select):not(textarea):not(canvas):not(svg) {
  background-color: color-mix(in srgb, var(--cc-card-bg) 94%, transparent) !important;
  color: var(--cc-text) !important;
  border-color: var(--cc-border) !important;
  box-shadow: var(--cc-shadow-card) !important;
}

html[data-cc-skin][data-cc-page="report.php"] :where([style*="background"]):not(button):not(a):not(input):not(select):not(textarea):not(canvas):not(svg):not(path),
html[data-cc-skin][data-cc-page-name="report"] :where([style*="background"]):not(button):not(a):not(input):not(select):not(textarea):not(canvas):not(svg):not(path) {
  background-color: color-mix(in srgb, var(--cc-card-bg) 94%, transparent) !important;
  color: var(--cc-text) !important;
}

html[data-cc-skin][data-cc-page="report.php"] :where(h1, h2, h3, h4, h5, h6, strong, b, .title, .label, [class*="title" i], [class*="value" i]),
html[data-cc-skin][data-cc-page-name="report"] :where(h1, h2, h3, h4, h5, h6, strong, b, .title, .label, [class*="title" i], [class*="value" i]) {
  color: var(--cc-text) !important;
}

html[data-cc-skin][data-cc-page="report.php"] :where(small, .muted, .sub, .meta, .hint, .help, .desc, [class*="muted" i], [class*="meta" i], [class*="hint" i], [class*="desc" i], [class*="subtitle" i]),
html[data-cc-skin][data-cc-page-name="report"] :where(small, .muted, .sub, .meta, .hint, .help, .desc, [class*="muted" i], [class*="meta" i], [class*="hint" i], [class*="desc" i], [class*="subtitle" i]) {
  color: var(--cc-muted) !important;
}

html[data-cc-skin][data-cc-page="report.php"] :where(button, a[role="button"], .pill, .chip, .tab, .report-action, .report-chip, .report-tab, .report-filter, .report-btn),
html[data-cc-skin][data-cc-page-name="report"] :where(button, a[role="button"], .pill, .chip, .tab, .report-action, .report-chip, .report-tab, .report-filter, .report-btn) {
  background: color-mix(in srgb, var(--cc-control-bg) 88%, transparent) !important;
  color: var(--cc-text) !important;
  border-color: var(--cc-control-border) !important;
  border-width: var(--cc-border-width) !important;
  border-radius: var(--cc-radius-button) !important;
  box-shadow: var(--cc-shadow-panel) !important;
}

html[data-cc-skin][data-cc-page="report.php"] :where(button.primary, .primary, .btn-primary, button[type="submit"], .report-action.is-active, .report-tab.is-active, .report-chip.is-active),
html[data-cc-skin][data-cc-page-name="report"] :where(button.primary, .primary, .btn-primary, button[type="submit"], .report-action.is-active, .report-tab.is-active, .report-chip.is-active) {
  background: linear-gradient(var(--cc-gradient-angle), var(--cc-button-bg), color-mix(in srgb, var(--cc-button-bg) 74%, var(--cc-primary))) !important;
  color: var(--cc-button-text) !important;
  border-color: var(--cc-button-border) !important;
}

/* Chat bubble and subtle pill adapter (Patch 8).
 * Uses Messenger bubble color tokens when they exist, but only maps visual
 * tokens: colors, gradients, borders, radius and shadow. No layout offsets.
 */
html[data-cc-skin] {
  --cc-pill-bg-soft: color-mix(in srgb, var(--cc-control-bg) 88%, transparent);
  --cc-pill-bg-active-soft: color-mix(in srgb, var(--cc-control-bg) 72%, var(--cc-primary) 28%);
  --cc-pill-border-soft: color-mix(in srgb, var(--cc-control-border) 82%, var(--cc-primary) 18%);
}

html[data-cc-skin] :where(.pill, .chip, .badge-pill, .filter-pill, .dash-pill, .report-chip, .report-tab, .ct-chip, .viki-chip):not(.navlink):not(.active):not(.is-active):not([aria-selected="true"]):not(.btn-primary):not(button[type="submit"]) {
  background: var(--cc-pill-bg-soft) !important;
  color: var(--cc-text) !important;
  border-color: var(--cc-control-border) !important;
  border-width: var(--cc-border-width) !important;
  border-radius: var(--cc-radius-pill) !important;
  box-shadow: none !important;
}

html[data-cc-skin] :where(.pill.active, .pill.is-active, .chip.active, .chip.is-active, .filter-pill.active, .dash-pill.active, .report-chip.is-active, .report-tab.is-active, .ct-chip.is-active, .viki-chip.is-active, [aria-selected="true"]):not(.navlink):not(.btn-primary):not(button[type="submit"]) {
  background: var(--cc-pill-bg-active-soft) !important;
  color: var(--cc-text) !important;
  border-color: var(--cc-pill-border-soft) !important;
  border-width: var(--cc-border-width) !important;
  border-radius: var(--cc-radius-pill) !important;
  box-shadow: var(--cc-shadow-panel) !important;
}

html[data-cc-skin][data-cc-page="chat.php"],
html[data-cc-skin][data-cc-page-name="chat"] {
  --chat-bg: var(--cc-screen-bg) !important;
  --chat-card: var(--cc-card-bg) !important;
  --chat-border: var(--cc-border) !important;
  --chat-text: var(--cc-text) !important;
  --chat-muted: var(--cc-muted) !important;
  --chat-accent: var(--cc-primary) !important;
}

html[data-cc-skin][data-cc-page="chat.php"] :where(#msgList, #composerWrap, .chat-shell, .chat-panel, .chat-main),
html[data-cc-skin][data-cc-page-name="chat"] :where(#msgList, #composerWrap, .chat-shell, .chat-panel, .chat-main) {
  color: var(--cc-text) !important;
  border-color: var(--cc-border) !important;
}

html[data-cc-skin][data-cc-page="chat.php"] .chat-bubble,
html[data-cc-skin][data-cc-page-name="chat"] .chat-bubble {
  border-width: var(--cc-border-width) !important;
  border-radius: var(--cc-radius-card) !important;
  box-shadow: var(--cc-shadow-bubble) !important;
  backdrop-filter: blur(12px) saturate(125%);
  -webkit-backdrop-filter: blur(12px) saturate(125%);
}

html[data-cc-skin][data-cc-page="chat.php"] .chat-bubble.mine,
html[data-cc-skin][data-cc-page-name="chat"] .chat-bubble.mine {
  background: linear-gradient(var(--cc-gradient-angle), var(--cc-chat-mine-bg), var(--cc-chat-mine-bg-2)) !important;
  color: var(--cc-chat-mine-text) !important;
  border-color: var(--cc-chat-mine-border) !important;
}

html[data-cc-skin][data-cc-page="chat.php"] .chat-bubble.other,
html[data-cc-skin][data-cc-page-name="chat"] .chat-bubble.other {
  background: linear-gradient(var(--cc-gradient-angle), var(--cc-chat-other-bg), var(--cc-chat-other-bg-2)) !important;
  color: var(--cc-chat-other-text) !important;
  border-color: var(--cc-chat-other-border) !important;
}

html[data-cc-skin][data-cc-page="chat.php"] .chat-bubble.assistant-bot,
html[data-cc-skin][data-cc-page-name="chat"] .chat-bubble.assistant-bot {
  background: linear-gradient(var(--cc-gradient-angle), var(--cc-chat-assistant-bg), var(--cc-chat-assistant-bg-2)) !important;
  color: var(--cc-chat-assistant-text) !important;
  border-color: var(--cc-chat-assistant-border) !important;
}

html[data-cc-skin][data-cc-page="chat.php"] .chat-bubble :where(.text-slate-50, .text-slate-100, .text-slate-200, .text-slate-300, .text-white, .text-black, .text-slate-900),
html[data-cc-skin][data-cc-page-name="chat"] .chat-bubble :where(.text-slate-50, .text-slate-100, .text-slate-200, .text-slate-300, .text-white, .text-black, .text-slate-900) {
  color: inherit !important;
}

html[data-cc-skin][data-cc-page="chat.php"] .chat-bubble :where(.text-slate-400, .text-slate-500, .text-slate-600, .text-xs, .text-sm, .text-\[11px\], .text-\[13px\]),
html[data-cc-skin][data-cc-page-name="chat"] .chat-bubble :where(.text-slate-400, .text-slate-500, .text-slate-600, .text-xs, .text-sm, .text-\[11px\], .text-\[13px\]) {
  color: color-mix(in srgb, currentColor 72%, var(--cc-muted)) !important;
}

html[data-cc-skin][data-cc-page="chat.php"] .chat-bubble .chat-body,
html[data-cc-skin][data-cc-page-name="chat"] .chat-bubble .chat-body {
  color: inherit !important;
}

html[data-cc-skin][data-cc-page="chat.php"] :where(#composerWrap, .composer-wrap, .chat-composer, #msgForm),
html[data-cc-skin][data-cc-page-name="chat"] :where(#composerWrap, .composer-wrap, .chat-composer, #msgForm) {
  background: color-mix(in srgb, var(--cc-composer-bar-bg) 96%, transparent) !important;
  color: var(--cc-text) !important;
  border-color: var(--cc-border) !important;
}

html[data-cc-skin][data-cc-page="chat.php"] :where(#msgInput, .chat-input, textarea[name="chat_message"]),
html[data-cc-skin][data-cc-page-name="chat"] :where(#msgInput, .chat-input, textarea[name="chat_message"]) {
  background: var(--cc-composer-bg) !important;
  color: var(--cc-text) !important;
  border-color: var(--cc-control-border) !important;
}

html[data-cc-skin][data-cc-page="chat.php"] :where(#sendBtn, .send-btn, button[type="submit"]),
html[data-cc-skin][data-cc-page-name="chat"] :where(#sendBtn, .send-btn, button[type="submit"]) {
  background: linear-gradient(var(--cc-gradient-angle), var(--cc-send-button-bg), color-mix(in srgb, var(--cc-send-button-bg) 76%, var(--cc-primary))) !important;
  color: var(--cc-send-button-text) !important;
  border-color: var(--cc-send-button-border) !important;
}

html[data-cc-skin][data-cc-page="chat.php"] :where(.chat-action-btn, .chat-nav-btn, .mobile-sel-btn, .mobile-sel-icon, .msg-react-btn, .msg-edit-btn, .msg-delete-btn),
html[data-cc-skin][data-cc-page-name="chat"] :where(.chat-action-btn, .chat-nav-btn, .mobile-sel-btn, .mobile-sel-icon, .msg-react-btn, .msg-edit-btn, .msg-delete-btn) {
  background: color-mix(in srgb, var(--cc-control-bg) 88%, transparent) !important;
  color: var(--cc-text) !important;
  border-color: var(--cc-control-border) !important;
}

html[data-cc-skin][data-cc-page="chat.php"] :where(.cash-html, .cash-html-card, .cash-html-panel, .asst-html-wrap, .report-reply-card),
html[data-cc-skin][data-cc-page-name="chat"] :where(.cash-html, .cash-html-card, .cash-html-panel, .asst-html-wrap, .report-reply-card) {
  color: var(--cc-chat-assistant-text) !important;
  border-color: var(--cc-chat-assistant-border) !important;
}


/* Semantic radius adapter (Patch 9).
 * Use the radius tokens that already exist in the theme metrics, without caps
 * and without Messenger layout offsets. The only thing this block does is map
 * each radius token to the matching app role.
 */
html[data-cc-skin] {
  --cc-radius-pill: var(--cc-radius-row);
}

html[data-cc-skin] :where(.card, .cc-theme-card, .cc-theme-surface),
html[data-cc-skin] #shoppingListsRoot :where(.sl-card, .sl-item, .sl-mini-card, .sl-sticky-summary, .sl-suggest-box, .sl-suggest-item, .sl-empty),
html[data-cc-skin][data-cc-page="child_tracker.php"] :where(.card, section, article, .ct-card, .ct-panel, .ct-summary-card, .ct-stat, .ct-tile, .tracker-card, .tracker-panel, .child-card, .product-card),
html[data-cc-skin][data-cc-page="victoria_diary.php"] :where(.card, section[data-viki-panel], .viki-mobile-hero, .viki-panel, .viki-card),
html[data-cc-skin][data-cc-page="report.php"] :where(.card, section, article, .report-card, .report-panel, .report-tile, .report-kpi, .report-signal, .report-slide, .report-stage, .report-filter-card),
html[data-cc-skin][data-cc-page-name="report"] :where(.report-card, .report-panel, .report-tile, .report-kpi, .report-signal, .report-filter-card, .metric-card, .signal-card, .kpi-card, .budget-card, .insight-card, .analysis-card, .control-card, .summary-card, .stat-card) {
  border-radius: var(--cc-radius-card) !important;
}

html[data-cc-skin] :where(#userMenu, #navDrawer, .mobileTabsInner, .modal-card, .modalCard, [role="dialog"], #prefPop, #filtersPop, #trPop, #dashFiltersPop),
html[data-cc-skin] #shoppingListsRoot :where(.sl-panel),
html[data-cc-skin] :where(#prefPop, #preferencesModal, #settingsModal, #prefsModal, .prefs-modal, .settings-modal, .settings-panel, .settings-card) :where(.card, .panel, .section, fieldset, .rounded-xl, .rounded-2xl, .rounded-3xl, [class*="panel"], [class*="section"]) {
  border-radius: var(--cc-radius-menu) !important;
}

html[data-cc-skin] :where(.rounded-xl, .rounded-2xl, .rounded-3xl):not(.chat-bubble):not(.cash-html):not(.cash-html-card):not(.cash-html-panel):not(#prefPop *):not(#preferencesModal *):not(#settingsModal *):not(#prefsModal *) {
  border-radius: var(--cc-radius-card) !important;
}

html[data-cc-skin] :where(.rounded-lg, .rounded-md):not(button):not(a):not(input):not(select):not(textarea):not(.chat-bubble) {
  border-radius: var(--cc-radius-row) !important;
}

html[data-cc-skin] :where(input, select, textarea, .cc-theme-input),
html[data-cc-skin] #shoppingListsRoot :where(.sl-field input, .sl-field textarea, .sl-field select, input, textarea, select) {
  border-radius: var(--cc-radius-button) !important;
}

html[data-cc-skin] :where(button, a[role="button"], .cc-theme-button, .navlink, #userBtn, #navBtn, #navDrawerClose, header > div:last-child > a, header > div:last-child > button),
html[data-cc-skin] #shoppingListsRoot :where(.sl-btn, [data-sl-back], [data-sl-close], [data-sl-new], [data-sl-archive], [data-sl-home], [data-sl-mini-close]),
html[data-cc-skin][data-cc-page="report.php"] :where(button, a[role="button"], .report-action, .report-filter, .report-btn),
html[data-cc-skin][data-cc-page-name="report"] :where(button, a[role="button"], .report-action, .report-filter, .report-btn) {
  border-radius: var(--cc-radius-button) !important;
}

html[data-cc-skin] :where(.pill, .chip, .badge-pill, .filter-pill, .dash-pill, .report-chip, .report-tab, .ct-chip, .ct-pill, .ct-tab, .viki-chip, .viki-tab, .cc-theme-pill, .cc-theme-badge):not(.navlink) {
  border-radius: var(--cc-radius-pill) !important;
}

html[data-cc-skin] .fbp-topbar {
  border-radius: var(--cc-radius-menu) !important;
}

html[data-cc-skin][data-cc-page="chat.php"] .chat-bubble,
html[data-cc-skin][data-cc-page-name="chat"] .chat-bubble {
  border-radius: var(--cc-radius-bubble) !important;
}

html[data-cc-skin][data-cc-page="chat.php"] :where(.chat-composer, .composer, #composer, #messageInputWrap),
html[data-cc-skin][data-cc-page-name="chat"] :where(.chat-composer, .composer, #composer, #messageInputWrap) {
  border-radius: var(--cc-radius-composer) !important;
}

/* Report/Friends hardcoded blue cleanup + shadow adapter (Patch 10).
 * This block stays in the runtime layer: no page files are modified and no rich
 * Kesh cards are themed here. It only remaps local hardcoded blue/report/friends
 * surfaces to the selected skin's app roles.
 */
html[data-cc-skin][data-cc-page="report.php"],
html[data-cc-skin][data-cc-page-name="report"],
html[data-cc-skin][data-cc-page="friends.php"],
html[data-cc-skin][data-cc-page-name="friends"] {
  --cc-report-accent-bg: linear-gradient(var(--cc-gradient-angle), var(--cc-button-bg), color-mix(in srgb, var(--cc-button-bg) 72%, var(--cc-primary)));
  --cc-report-soft-bg: color-mix(in srgb, var(--cc-control-bg) 88%, transparent);
  --cc-report-panel-bg: color-mix(in srgb, var(--cc-card-bg) 96%, transparent);
  --cc-report-row-bg: color-mix(in srgb, var(--cc-control-bg) 92%, transparent);
  --cc-report-track-bg: color-mix(in srgb, var(--cc-border) 34%, transparent);
  --cc-report-shadow: var(--cc-shadow-card);
  --cc-report-shadow-soft: var(--cc-shadow-panel);
}

html[data-cc-skin][data-cc-page="report.php"] :where(.rp-hero, .rp-card, .rp-slab, .rp-modal-card, .rp-mframe, .rp-digest-box),
html[data-cc-skin][data-cc-page-name="report"] :where(.rp-hero, .rp-card, .rp-slab, .rp-modal-card, .rp-mframe, .rp-digest-box) {
  background: linear-gradient(var(--cc-gradient-angle), color-mix(in srgb, var(--cc-card-bg) 94%, var(--cc-primary)), var(--cc-card-bg)) !important;
  color: var(--cc-text) !important;
  border-color: var(--cc-border) !important;
  border-width: var(--cc-border-width) !important;
  box-shadow: var(--cc-report-shadow) !important;
}

html[data-cc-skin][data-cc-page="report.php"] :where(.rp-kpi, .rp-row, .rp-table-item, .rp-empty, .rp-checkitem, .rp-summary-row, .rp-actions-card, .rp-quickrow, .rp-signal-card, .rp-jump, .rp-digest-box, .rp-mini > span, .rp-overnav-title, .rp-homebtn, .rp-sidebtn),
html[data-cc-skin][data-cc-page-name="report"] :where(.rp-kpi, .rp-row, .rp-table-item, .rp-empty, .rp-checkitem, .rp-summary-row, .rp-actions-card, .rp-quickrow, .rp-signal-card, .rp-jump, .rp-digest-box, .rp-mini > span, .rp-overnav-title, .rp-homebtn, .rp-sidebtn) {
  background: var(--cc-report-row-bg) !important;
  color: var(--cc-text) !important;
  border-color: var(--cc-border) !important;
  box-shadow: var(--cc-report-shadow-soft) !important;
}

html[data-cc-skin][data-cc-page="report.php"] :where(.rp-btn, .rp-iconbtn, .rp-select, .rp-input, .rp-textarea, .rp-color, .rp-icon-mini, .rp-quickbtn, .rp-pagebtn, .rp-pill),
html[data-cc-skin][data-cc-page-name="report"] :where(.rp-btn, .rp-iconbtn, .rp-select, .rp-input, .rp-textarea, .rp-color, .rp-icon-mini, .rp-quickbtn, .rp-pagebtn, .rp-pill) {
  background: var(--cc-report-soft-bg) !important;
  color: var(--cc-text) !important;
  border-color: var(--cc-control-border) !important;
  border-width: var(--cc-border-width) !important;
  box-shadow: var(--cc-report-shadow-soft) !important;
}

html[data-cc-skin][data-cc-page="report.php"] :where(.rp-btn.primary, .rp-quickbtn.is-on, .rp-pagebtn.is-active, .rp-sankey-cta),
html[data-cc-skin][data-cc-page-name="report"] :where(.rp-btn.primary, .rp-quickbtn.is-on, .rp-pagebtn.is-active, .rp-sankey-cta) {
  background: var(--cc-report-accent-bg) !important;
  color: var(--cc-button-text) !important;
  border-color: var(--cc-button-border) !important;
  box-shadow: var(--cc-report-shadow-soft) !important;
}

html[data-cc-skin][data-cc-page="report.php"] :where(.rp-chip, .rp-badge, .rp-summary-meta span, .rp-pager span.active),
html[data-cc-skin][data-cc-page-name="report"] :where(.rp-chip, .rp-badge, .rp-summary-meta span, .rp-pager span.active) {
  background: color-mix(in srgb, var(--cc-section-bg) 84%, transparent) !important;
  color: var(--cc-section-text) !important;
  border-color: var(--cc-section-border) !important;
  box-shadow: none !important;
}

html[data-cc-skin][data-cc-page="report.php"] :where(.rp-bar, .rp-pager span),
html[data-cc-skin][data-cc-page-name="report"] :where(.rp-bar, .rp-pager span) {
  background: var(--cc-report-track-bg) !important;
}

html[data-cc-skin][data-cc-page="report.php"] .rp-bar > span,
html[data-cc-skin][data-cc-page-name="report"] .rp-bar > span {
  background: linear-gradient(90deg, var(--cc-primary), var(--cc-accent)) !important;
}

html[data-cc-skin][data-cc-page="report.php"] :where(.rp-title, .rp-card-title, .rp-kpi-v, .rp-row-title, .rp-row-val, .rp-slide-title, .rp-overnav-title, .rp-signal-value, .rp-table-head, .rp-pageinfo),
html[data-cc-skin][data-cc-page-name="report"] :where(.rp-title, .rp-card-title, .rp-kpi-v, .rp-row-title, .rp-row-val, .rp-slide-title, .rp-overnav-title, .rp-signal-value, .rp-table-head, .rp-pageinfo) {
  color: var(--cc-text) !important;
}

html[data-cc-skin][data-cc-page="report.php"] :where(.rp-sub, .rp-card-sub, .rp-row-sub, .rp-slide-sub, .rp-note, .rp-kpi-s, .rp-row-meta, .rp-summary-key, .rp-signal-meta, .rp-hero-meta, .rp-quickmeta, .rp-label, .rp-signal-label, .rp-signal-help, .rp-pageinfo),
html[data-cc-skin][data-cc-page-name="report"] :where(.rp-sub, .rp-card-sub, .rp-row-sub, .rp-slide-sub, .rp-note, .rp-kpi-s, .rp-row-meta, .rp-summary-key, .rp-signal-meta, .rp-hero-meta, .rp-quickmeta, .rp-label, .rp-signal-label, .rp-signal-help, .rp-pageinfo) {
  color: var(--cc-muted) !important;
}

html[data-cc-skin][data-cc-page="report.php"] :where(.rp-checkitem input, .rp-checkline input),
html[data-cc-skin][data-cc-page-name="report"] :where(.rp-checkitem input, .rp-checkline input) {
  accent-color: var(--cc-primary) !important;
}

html[data-cc-skin][data-cc-page="friends.php"] .friends-page,
html[data-cc-skin][data-cc-page-name="friends"] .friends-page {
  color: var(--cc-text) !important;
}

html[data-cc-skin][data-cc-page="friends.php"] .friends-page :where(.family-card-main, .friends-card-main, .directory-card-main, .profile-pop-card, .cash-sheet-panel, .family-members-shell, .member-expand, .friend-card-compact, .directory-card-row, .activity-mini-row, .member-mini-row, .family-avatar-btn, .friend-card-avatar, .member-mini-avatar),
html[data-cc-skin][data-cc-page-name="friends"] .friends-page :where(.family-card-main, .friends-card-main, .directory-card-main, .profile-pop-card, .cash-sheet-panel, .family-members-shell, .member-expand, .friend-card-compact, .directory-card-row, .activity-mini-row, .member-mini-row, .family-avatar-btn, .friend-card-avatar, .member-mini-avatar) {
  background: color-mix(in srgb, var(--cc-card-bg) 94%, transparent) !important;
  color: var(--cc-text) !important;
  border-color: var(--cc-border) !important;
  border-width: var(--cc-border-width) !important;
  box-shadow: var(--cc-shadow-card) !important;
}

html[data-cc-skin][data-cc-page="friends.php"] .friends-page :where(.mini-icon-btn, .mini-cta, .cash-action-btn, .stat-pill, .family-badge-item),
html[data-cc-skin][data-cc-page-name="friends"] .friends-page :where(.mini-icon-btn, .mini-cta, .cash-action-btn, .stat-pill, .family-badge-item) {
  background: color-mix(in srgb, var(--cc-control-bg) 88%, transparent) !important;
  color: var(--cc-text) !important;
  border-color: var(--cc-control-border) !important;
  border-width: var(--cc-border-width) !important;
  box-shadow: var(--cc-shadow-panel) !important;
}

html[data-cc-skin][data-cc-page="friends.php"] .friends-page :where([class*="bg-sky-"], [class*="hover:bg-sky-"], #trSend, #addFriendOk, #profInviteBtn),
html[data-cc-skin][data-cc-page-name="friends"] .friends-page :where([class*="bg-sky-"], [class*="hover:bg-sky-"], #trSend, #addFriendOk, #profInviteBtn) {
  background: linear-gradient(var(--cc-gradient-angle), var(--cc-button-bg), color-mix(in srgb, var(--cc-button-bg) 74%, var(--cc-primary))) !important;
  color: var(--cc-button-text) !important;
  border-color: var(--cc-button-border) !important;
  box-shadow: var(--cc-shadow-panel) !important;
}

html[data-cc-skin][data-cc-page="friends.php"] .friends-page :where([class*="border-sky-"], .friends-hint),
html[data-cc-skin][data-cc-page-name="friends"] .friends-page :where([class*="border-sky-"], .friends-hint) {
  border-color: color-mix(in srgb, var(--cc-primary) 42%, var(--cc-border)) !important;
}

html[data-cc-skin][data-cc-page="friends.php"] .friends-page :where([class*="text-sky-"], .friends-hint, .friends-hint-close),
html[data-cc-skin][data-cc-page-name="friends"] .friends-page :where([class*="text-sky-"], .friends-hint, .friends-hint-close) {
  color: var(--cc-text) !important;
}

html[data-cc-skin][data-cc-page="friends.php"] .friends-page :where(input, select, textarea),
html[data-cc-skin][data-cc-page-name="friends"] .friends-page :where(input, select, textarea) {
  background: var(--cc-control-bg) !important;
  color: var(--cc-text) !important;
  border-color: var(--cc-control-border) !important;
  box-shadow: var(--cc-shadow-panel) !important;
}

html[data-cc-skin][data-cc-page="friends.php"] .friends-page :where(.text-slate-400, .text-slate-500, .text-slate-600, .friend-about-line),
html[data-cc-skin][data-cc-page-name="friends"] .friends-page :where(.text-slate-400, .text-slate-500, .text-slate-600, .friend-about-line) {
  color: var(--cc-muted) !important;
}

/* Theme shadow adapter (Patch 11).
 * Chat bubbles use their own semantic shadow. Runtime JS may fill this from
 * theme.shadows.bubble; older themes fall back to metrics.shadowStrength.
 */
html[data-cc-skin][data-cc-page="chat.php"] .chat-bubble,
html[data-cc-skin][data-cc-page-name="chat"] .chat-bubble {
  box-shadow: var(--cc-shadow-bubble) !important;
}


/* Button shadow guard (Patch 12c).
 * Theme metrics control cards, panels and chat bubbles. Buttons stay flat unless
 * a theme explicitly defines shadows.button in the JSON. This prevents the
 * main-app adapter from inventing button shadows for skins that never had them.
 */
html[data-cc-skin] :where(button, a[role="button"], .cc-theme-button, .btn, .btn-primary, .rp-btn, .rp-iconbtn, .rp-quickbtn, .rp-pagebtn, .report-action, .report-filter, .report-btn, .sl-btn, [data-sl-back], [data-sl-close], [data-sl-new], [data-sl-archive], [data-sl-home], [data-sl-mini-close], .voice-shell-mic, .voice-shell-mini-btn, .voice-shell-btn, #sendBtn, .send-btn, .chat-action-btn, .chat-nav-btn, .mobile-sel-btn, .mobile-sel-icon, .msg-react-btn, .msg-edit-btn, .msg-delete-btn, .mini-icon-btn, .mini-cta, .cash-action-btn, .stat-pill, .family-badge-item, .pill, .chip, .filter-pill, .dash-pill, .report-chip, .report-tab, .ct-chip, .viki-chip) {
  box-shadow: var(--cc-shadow-button, none) !important;
}

/* Chat channel/menu/reaction coverage (Patch 13).
 * Target only chat-specific selector UI: channel tabs, new-chat menu, mobile
 * channel picker and message reactions. It does not alter Kesh rich cards or
 * any chat layout offsets.
 */
html[data-cc-skin][data-cc-page="chat.php"],
html[data-cc-skin][data-cc-page-name="chat"] {
  --cc-chat-channel-bg: color-mix(in srgb, var(--cc-control-bg) 88%, transparent);
  --cc-chat-channel-bg-hover: color-mix(in srgb, var(--cc-control-bg) 76%, var(--cc-primary) 24%);
  --cc-chat-channel-bg-active: color-mix(in srgb, var(--cc-control-bg) 58%, var(--cc-primary) 42%);
  --cc-chat-channel-border: color-mix(in srgb, var(--cc-control-border) 74%, var(--cc-primary) 26%);
  --cc-chat-channel-text: var(--cc-text);
  --cc-chat-channel-muted: var(--cc-muted);
}

html[data-cc-skin][data-cc-page="chat.php"] :where(#tabsBar .tabbtn, .mobile-sel-btn, .mobile-sel-icon, .chat-nav-btn, #newChatOpen, #newChatOpenMobile, #gdmAddBtn, #gdmLeaveBtn),
html[data-cc-skin][data-cc-page-name="chat"] :where(#tabsBar .tabbtn, .mobile-sel-btn, .mobile-sel-icon, .chat-nav-btn, #newChatOpen, #newChatOpenMobile, #gdmAddBtn, #gdmLeaveBtn) {
  background: var(--cc-chat-channel-bg) !important;
  color: var(--cc-chat-channel-text) !important;
  border-color: var(--cc-chat-channel-border) !important;
  border-radius: var(--cc-radius-button) !important;
  box-shadow: var(--cc-shadow-button, none) !important;
}

html[data-cc-skin][data-cc-page="chat.php"] :where(#tabsBar .tabbtn:hover, .mobile-sel-btn:hover, .mobile-sel-icon:hover, .chat-nav-btn:hover, #newChatOpen:hover, #newChatOpenMobile:hover),
html[data-cc-skin][data-cc-page-name="chat"] :where(#tabsBar .tabbtn:hover, .mobile-sel-btn:hover, .mobile-sel-icon:hover, .chat-nav-btn:hover, #newChatOpen:hover, #newChatOpenMobile:hover) {
  background: var(--cc-chat-channel-bg-hover) !important;
  color: var(--cc-chat-channel-text) !important;
  border-color: var(--cc-primary) !important;
}

html[data-cc-skin][data-cc-page="chat.php"] :where(#tabsBar .tabbtn.active, #tabsBar .tabbtn.is-active, #tabsBar .tabbtn[aria-selected="true"], .mobile-sel-btn.active, .mobile-sel-btn.is-active, .mobile-sel-btn[aria-selected="true"]),
html[data-cc-skin][data-cc-page-name="chat"] :where(#tabsBar .tabbtn.active, #tabsBar .tabbtn.is-active, #tabsBar .tabbtn[aria-selected="true"], .mobile-sel-btn.active, .mobile-sel-btn.is-active, .mobile-sel-btn[aria-selected="true"]) {
  background: var(--cc-chat-channel-bg-active) !important;
  color: var(--cc-button-text) !important;
  border-color: var(--cc-button-border) !important;
  box-shadow: var(--cc-shadow-button, none) !important;
}

html[data-cc-skin][data-cc-page="chat.php"] :where(.tabclose, #chatSubtitle, #chatSubtitleMob, .picker-item-sub, .picker-card .text-slate-400),
html[data-cc-skin][data-cc-page-name="chat"] :where(.tabclose, #chatSubtitle, #chatSubtitleMob, .picker-item-sub, .picker-card .text-slate-400) {
  color: var(--cc-chat-channel-muted) !important;
}

html[data-cc-skin][data-cc-page="chat.php"] .tabbadge,
html[data-cc-skin][data-cc-page-name="chat"] .tabbadge {
  background: var(--cc-badge-bg) !important;
  color: var(--cc-badge-text) !important;
  border: 1px solid color-mix(in srgb, var(--cc-badge-bg) 72%, var(--cc-border) 28%) !important;
  box-shadow: none !important;
}

html[data-cc-skin][data-cc-page="chat.php"] :where(#newChatPanel, #newChatModal .card, #gdmModal .card, .picker-card),
html[data-cc-skin][data-cc-page-name="chat"] :where(#newChatPanel, #newChatModal .card, #gdmModal .card, .picker-card) {
  background: color-mix(in srgb, var(--cc-card-bg) 96%, transparent) !important;
  color: var(--cc-text) !important;
  border-color: var(--cc-border) !important;
  border-radius: var(--cc-radius-menu) !important;
  box-shadow: var(--cc-shadow-panel) !important;
}

html[data-cc-skin][data-cc-page="chat.php"] :where(.picker-item, #gdmCurrentMembers > *, #gdmMemberChoices > *, .chat-share-target),
html[data-cc-skin][data-cc-page-name="chat"] :where(.picker-item, #gdmCurrentMembers > *, #gdmMemberChoices > *, .chat-share-target) {
  background: var(--cc-control-bg) !important;
  color: var(--cc-text) !important;
  border-color: var(--cc-control-border) !important;
  border-radius: var(--cc-radius-row) !important;
  box-shadow: none !important;
}

html[data-cc-skin][data-cc-page="chat.php"] :where(.picker-item:hover, .picker-item.active, .picker-item[aria-selected="true"]),
html[data-cc-skin][data-cc-page-name="chat"] :where(.picker-item:hover, .picker-item.active, .picker-item[aria-selected="true"]) {
  background: var(--cc-section-active-bg) !important;
  color: var(--cc-section-active-text) !important;
  border-color: var(--cc-primary) !important;
}

html[data-cc-skin][data-cc-page="chat.php"] :where(.picker-item-title, .picker-card .font-black, #newChatPanel .font-black),
html[data-cc-skin][data-cc-page-name="chat"] :where(.picker-item-title, .picker-card .font-black, #newChatPanel .font-black) {
  color: var(--cc-text) !important;
}

html[data-cc-skin][data-cc-page="chat.php"] :where(.picker-close, #gdmModalClose, #gdmModalCancel),
html[data-cc-skin][data-cc-page-name="chat"] :where(.picker-close, #gdmModalClose, #gdmModalCancel) {
  background: var(--cc-control-bg) !important;
  color: var(--cc-text) !important;
  border-color: var(--cc-control-border) !important;
  border-radius: var(--cc-radius-button) !important;
  box-shadow: var(--cc-shadow-button, none) !important;
}

html[data-cc-skin][data-cc-page="chat.php"] #gdmModalSubmit,
html[data-cc-skin][data-cc-page-name="chat"] #gdmModalSubmit {
  background: var(--cc-button-bg) !important;
  color: var(--cc-button-text) !important;
  border-color: var(--cc-button-border) !important;
  border-radius: var(--cc-radius-button) !important;
  box-shadow: var(--cc-shadow-button, none) !important;
}

html[data-cc-skin][data-cc-page="chat.php"] :where(#gdmTitleInput, .picker-card input, .picker-card select),
html[data-cc-skin][data-cc-page-name="chat"] :where(#gdmTitleInput, .picker-card input, .picker-card select) {
  background: var(--cc-control-bg) !important;
  color: var(--cc-text) !important;
  border-color: var(--cc-control-border) !important;
  border-radius: var(--cc-radius-button) !important;
}

html[data-cc-skin][data-cc-page="chat.php"] :where(.chat-rx-wrap span, .chat-rx-wrap button),
html[data-cc-skin][data-cc-page-name="chat"] :where(.chat-rx-wrap span, .chat-rx-wrap button) {
  background: var(--cc-reaction-bg) !important;
  color: var(--cc-reaction-text) !important;
  border-color: var(--cc-reaction-border) !important;
  border-radius: var(--cc-radius-button) !important;
  box-shadow: var(--cc-shadow-button, none) !important;
}

html[data-cc-skin][data-cc-page="chat.php"] .chat-rx-wrap :where(button:hover, button[class*="bg-sky"], button[class*="border-sky"]),
html[data-cc-skin][data-cc-page-name="chat"] .chat-rx-wrap :where(button:hover, button[class*="bg-sky"], button[class*="border-sky"]) {
  background: var(--cc-reaction-active-bg) !important;
  color: var(--cc-reaction-active-text) !important;
  border-color: var(--cc-primary) !important;
}

html[data-cc-skin][data-cc-page="chat.php"] .chat-rx-wrap > div > span,
html[data-cc-skin][data-cc-page-name="chat"] .chat-rx-wrap > div > span {
  background: var(--cc-reaction-own-bg) !important;
  color: var(--cc-reaction-own-text) !important;
  border-color: var(--cc-reaction-border) !important;
}

html[data-cc-skin][data-cc-page="chat.php"] .chat-rx-wrap > div.absolute,
html[data-cc-skin][data-cc-page-name="chat"] .chat-rx-wrap > div.absolute {
  background: color-mix(in srgb, var(--cc-card-bg) 96%, transparent) !important;
  border-color: var(--cc-border) !important;
  border-radius: var(--cc-radius-menu) !important;
  box-shadow: var(--cc-shadow-panel) !important;
}

/* Tracker + calendar skin coverage (2026-05-03).
 * Covers the local viki/ct/calendar class systems that use hard-coded rgba
 * surfaces. Runtime-only: no tracker/calendar templates are changed.
 */
html[data-cc-skin][data-cc-page="child_tracker.php"],
html[data-cc-skin][data-cc-page-name="child_tracker"],
html[data-cc-skin][data-cc-page="victoria_diary.php"],
html[data-cc-skin][data-cc-page-name="victoria_diary"] {
  --cc-tracker-card-bg: color-mix(in srgb, var(--cc-card-bg) 94%, transparent);
  --cc-tracker-row-bg: color-mix(in srgb, var(--cc-row-bg) 92%, transparent);
  --cc-tracker-control-bg: color-mix(in srgb, var(--cc-control-bg) 90%, transparent);
  --cc-tracker-active-bg: color-mix(in srgb, var(--cc-section-active-bg) 82%, var(--cc-primary) 18%);
  --cc-tracker-soft-border: color-mix(in srgb, var(--cc-border) 76%, transparent);
}

html[data-cc-skin][data-cc-page="child_tracker.php"] :where(.ct-chooser-card, .ct-card, .ct-subject-card, .ct-pickbox, .ct-gallery-panel, .ct-empty, .viki-glass, .viki-card, .viki-kpi, .viki-compact-stat, .viki-quickadd-shell, .viki-wide-box, .viki-wide-item, .viki-month-card, .viki-day, .viki-cal-cell, .viki-overviewstats-card, .viki-overviewstats-pill, .viki-overviewstats-feedchip, .viki-media-card, .viki-lightbox-card, .viki-modal-card, .viki-empty),
html[data-cc-skin][data-cc-page-name="child_tracker"] :where(.ct-chooser-card, .ct-card, .ct-subject-card, .ct-pickbox, .ct-gallery-panel, .ct-empty, .viki-glass, .viki-card, .viki-kpi, .viki-compact-stat, .viki-quickadd-shell, .viki-wide-box, .viki-wide-item, .viki-month-card, .viki-day, .viki-cal-cell, .viki-overviewstats-card, .viki-overviewstats-pill, .viki-overviewstats-feedchip, .viki-media-card, .viki-lightbox-card, .viki-modal-card, .viki-empty),
html[data-cc-skin][data-cc-page="victoria_diary.php"] :where(.viki-glass, .viki-card, .viki-kpi, .viki-compact-stat, .viki-quickadd-shell, .viki-wide-box, .viki-wide-item, .viki-month-card, .viki-day, .viki-cal-cell, .viki-overviewstats-card, .viki-overviewstats-pill, .viki-overviewstats-feedchip, .viki-media-card, .viki-lightbox-card, .viki-modal-card, .viki-graph-focus, .viki-graph-metric, .viki-empty),
html[data-cc-skin][data-cc-page-name="victoria_diary"] :where(.viki-glass, .viki-card, .viki-kpi, .viki-compact-stat, .viki-quickadd-shell, .viki-wide-box, .viki-wide-item, .viki-month-card, .viki-day, .viki-cal-cell, .viki-overviewstats-card, .viki-overviewstats-pill, .viki-overviewstats-feedchip, .viki-media-card, .viki-lightbox-card, .viki-modal-card, .viki-graph-focus, .viki-graph-metric, .viki-empty) {
  background: linear-gradient(var(--cc-gradient-angle), color-mix(in srgb, var(--cc-tracker-card-bg) 94%, var(--cc-primary) 6%), var(--cc-tracker-card-bg)) !important;
  color: var(--cc-text) !important;
  border-color: var(--cc-tracker-soft-border) !important;
  border-width: var(--cc-border-width) !important;
  border-radius: var(--cc-radius-card) !important;
  box-shadow: var(--cc-shadow-card) !important;
}

html[data-cc-skin][data-cc-page="child_tracker.php"] :where(.ct-chooser-icon, .ct-hero-avatar, .ct-hero-avatar-fallback, .ct-media-tag, .viki-badge, .viki-type, .viki-mini-type, .viki-overviewstats-feedchip, .viki-graph-focus-chip),
html[data-cc-skin][data-cc-page-name="child_tracker"] :where(.ct-chooser-icon, .ct-hero-avatar, .ct-hero-avatar-fallback, .ct-media-tag, .viki-badge, .viki-type, .viki-mini-type, .viki-overviewstats-feedchip, .viki-graph-focus-chip),
html[data-cc-skin][data-cc-page="victoria_diary.php"] :where(.viki-badge, .viki-type, .viki-mini-type, .viki-overviewstats-feedchip, .viki-graph-focus-chip),
html[data-cc-skin][data-cc-page-name="victoria_diary"] :where(.viki-badge, .viki-type, .viki-mini-type, .viki-overviewstats-feedchip, .viki-graph-focus-chip) {
  background: color-mix(in srgb, var(--cc-section-bg) 86%, transparent) !important;
  color: var(--cc-section-text) !important;
  border-color: var(--cc-section-border) !important;
  border-width: var(--cc-border-width) !important;
  border-radius: var(--cc-radius-pill) !important;
}

html[data-cc-skin][data-cc-page="child_tracker.php"] :where(.ct-btn, .ct-btn-primary, .ct-child-pwa-link, .ct-gallery-scope-btn, .viki-btn, .viki-soft, .viki-icon-btn, .viki-lightbox-btn, .viki-overnav-btn, .viki-tabbtn, .viki-quickadd-btn, .viki-overviewstats-switch button, .viki-action-btn, .viki-graph-btn),
html[data-cc-skin][data-cc-page-name="child_tracker"] :where(.ct-btn, .ct-btn-primary, .ct-child-pwa-link, .ct-gallery-scope-btn, .viki-btn, .viki-soft, .viki-icon-btn, .viki-lightbox-btn, .viki-overnav-btn, .viki-tabbtn, .viki-quickadd-btn, .viki-overviewstats-switch button, .viki-action-btn, .viki-graph-btn),
html[data-cc-skin][data-cc-page="victoria_diary.php"] :where(.viki-btn, .viki-soft, .viki-icon-btn, .viki-lightbox-btn, .viki-overnav-btn, .viki-tabbtn, .viki-quickadd-btn, .viki-overviewstats-switch button, .viki-action-btn, .viki-graph-btn),
html[data-cc-skin][data-cc-page-name="victoria_diary"] :where(.viki-btn, .viki-soft, .viki-icon-btn, .viki-lightbox-btn, .viki-overnav-btn, .viki-tabbtn, .viki-quickadd-btn, .viki-overviewstats-switch button, .viki-action-btn, .viki-graph-btn) {
  background: var(--cc-tracker-control-bg) !important;
  color: var(--cc-text) !important;
  border-color: var(--cc-control-border) !important;
  border-width: var(--cc-border-width) !important;
  border-radius: var(--cc-radius-button) !important;
  box-shadow: var(--cc-shadow-button, none) !important;
}

html[data-cc-skin][data-cc-page="child_tracker.php"] :where(.ct-btn-primary, .viki-btn, .viki-tabbtn.active, .viki-quickadd-btn.active, .viki-overviewstats-switch button.active, .viki-mobile-dock-btn.active, .viki-graph-btn.active, .ct-gallery-scope-btn.active),
html[data-cc-skin][data-cc-page-name="child_tracker"] :where(.ct-btn-primary, .viki-btn, .viki-tabbtn.active, .viki-quickadd-btn.active, .viki-overviewstats-switch button.active, .viki-mobile-dock-btn.active, .viki-graph-btn.active, .ct-gallery-scope-btn.active),
html[data-cc-skin][data-cc-page="victoria_diary.php"] :where(.viki-btn, .viki-tabbtn.active, .viki-quickadd-btn.active, .viki-overviewstats-switch button.active, .viki-mobile-dock-btn.active, .viki-graph-btn.active),
html[data-cc-skin][data-cc-page-name="victoria_diary"] :where(.viki-btn, .viki-tabbtn.active, .viki-quickadd-btn.active, .viki-overviewstats-switch button.active, .viki-mobile-dock-btn.active, .viki-graph-btn.active) {
  background: linear-gradient(var(--cc-gradient-angle), var(--cc-button-bg), color-mix(in srgb, var(--cc-button-bg) 68%, var(--cc-primary) 32%)) !important;
  color: var(--cc-button-text) !important;
  border-color: var(--cc-button-border) !important;
  box-shadow: var(--cc-shadow-button, none) !important;
}

html[data-cc-skin][data-cc-page="child_tracker.php"] :where(.ct-input, .ct-select, .ct-textarea, .viki-input, .viki-select, .viki-textarea),
html[data-cc-skin][data-cc-page-name="child_tracker"] :where(.ct-input, .ct-select, .ct-textarea, .viki-input, .viki-select, .viki-textarea),
html[data-cc-skin][data-cc-page="victoria_diary.php"] :where(.viki-input, .viki-select, .viki-textarea),
html[data-cc-skin][data-cc-page-name="victoria_diary"] :where(.viki-input, .viki-select, .viki-textarea) {
  background: var(--cc-control-bg) !important;
  color: var(--cc-text) !important;
  border-color: var(--cc-control-border) !important;
  border-width: var(--cc-border-width) !important;
  border-radius: var(--cc-radius-button) !important;
  box-shadow: var(--cc-shadow-button, none) !important;
}

html[data-cc-skin][data-cc-page="child_tracker.php"] :where(.ct-chooser-meta, .ct-subject-meta, .ct-mini, .ct-label, .ct-pickhint, .ct-media-meta, .ct-gallery-pager-meta, .viki-note, .viki-timeline-note, .viki-cal-meta, .viki-lightbox-count, .viki-lightbox-hint, .viki-overviewstats-card em, .viki-overviewstats-card small, .viki-overviewstats-feedchip small),
html[data-cc-skin][data-cc-page-name="child_tracker"] :where(.ct-chooser-meta, .ct-subject-meta, .ct-mini, .ct-label, .ct-pickhint, .ct-media-meta, .ct-gallery-pager-meta, .viki-note, .viki-timeline-note, .viki-cal-meta, .viki-lightbox-count, .viki-lightbox-hint, .viki-overviewstats-card em, .viki-overviewstats-card small, .viki-overviewstats-feedchip small),
html[data-cc-skin][data-cc-page="victoria_diary.php"] :where(.viki-note, .viki-timeline-note, .viki-cal-meta, .viki-lightbox-count, .viki-lightbox-hint, .viki-overviewstats-card em, .viki-overviewstats-card small, .viki-overviewstats-feedchip small, .viki-graph-focus-meta, .viki-graph-empty, .viki-graph-sub),
html[data-cc-skin][data-cc-page-name="victoria_diary"] :where(.viki-note, .viki-timeline-note, .viki-cal-meta, .viki-lightbox-count, .viki-lightbox-hint, .viki-overviewstats-card em, .viki-overviewstats-card small, .viki-overviewstats-feedchip small, .viki-graph-focus-meta, .viki-graph-empty, .viki-graph-sub) {
  color: var(--cc-muted) !important;
}

html[data-cc-skin][data-cc-page="child_tracker.php"] :where(.viki-cal-cell.current, .viki-cal-cell.is-today, .viki-day.current, .viki-day.is-today),
html[data-cc-skin][data-cc-page-name="child_tracker"] :where(.viki-cal-cell.current, .viki-cal-cell.is-today, .viki-day.current, .viki-day.is-today),
html[data-cc-skin][data-cc-page="victoria_diary.php"] :where(.viki-cal-cell.current, .viki-cal-cell.is-today, .viki-day.current, .viki-day.is-today),
html[data-cc-skin][data-cc-page-name="victoria_diary"] :where(.viki-cal-cell.current, .viki-cal-cell.is-today, .viki-day.current, .viki-day.is-today) {
  border-color: var(--cc-primary) !important;
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--cc-primary) 35%, transparent), var(--cc-shadow-card) !important;
}

html[data-cc-skin][data-cc-page="calendar.php"],
html[data-cc-skin][data-cc-page-name="calendar"] {
  --cc-calendar-panel-bg: color-mix(in srgb, var(--cc-card-bg) 96%, transparent);
  --cc-calendar-row-bg: color-mix(in srgb, var(--cc-row-bg) 92%, transparent);
  --cc-calendar-control-bg: color-mix(in srgb, var(--cc-control-bg) 90%, transparent);
}

html[data-cc-skin][data-cc-page="calendar.php"] :where(.calendar-period-bar, .calendar-day-cell, .calendar-week-column, .calendar-day-view, .calendar-list-item, .calendar-mini-day, .calendar-week-mini, .calendar-drawer-panel, .calendar-modal-panel, .calendar-reminder-box, .calendar-drawer-note, .calendar-attendee-editor-box, .calendar-attendee-picker-row, .calendar-choice-btn),
html[data-cc-skin][data-cc-page-name="calendar"] :where(.calendar-period-bar, .calendar-day-cell, .calendar-week-column, .calendar-day-view, .calendar-list-item, .calendar-mini-day, .calendar-week-mini, .calendar-drawer-panel, .calendar-modal-panel, .calendar-reminder-box, .calendar-drawer-note, .calendar-attendee-editor-box, .calendar-attendee-picker-row, .calendar-choice-btn) {
  background: var(--cc-calendar-panel-bg) !important;
  color: var(--cc-text) !important;
  border-color: var(--cc-border) !important;
  border-width: var(--cc-border-width) !important;
  border-radius: var(--cc-radius-card) !important;
  box-shadow: var(--cc-shadow-card) !important;
}

html[data-cc-skin][data-cc-page="calendar.php"] :where(.calendar-tool-btn, .calendar-period-btn, .calendar-period-today, .calendar-view-pill, .calendar-settings-link, .calendar-link-btn, .calendar-action-btn, .calendar-icon-btn, .calendar-check-chip, .calendar-choice-btn),
html[data-cc-skin][data-cc-page-name="calendar"] :where(.calendar-tool-btn, .calendar-period-btn, .calendar-period-today, .calendar-view-pill, .calendar-settings-link, .calendar-link-btn, .calendar-action-btn, .calendar-icon-btn, .calendar-check-chip, .calendar-choice-btn) {
  background: var(--cc-calendar-control-bg) !important;
  color: var(--cc-text) !important;
  border-color: var(--cc-control-border) !important;
  border-width: var(--cc-border-width) !important;
  border-radius: var(--cc-radius-button) !important;
  box-shadow: var(--cc-shadow-button, none) !important;
}

html[data-cc-skin][data-cc-page="calendar.php"] :where(.calendar-submit-btn, .calendar-view-pill.active, .calendar-settings-link.active, .calendar-choice-btn.is-active),
html[data-cc-skin][data-cc-page-name="calendar"] :where(.calendar-submit-btn, .calendar-view-pill.active, .calendar-settings-link.active, .calendar-choice-btn.is-active) {
  background: linear-gradient(var(--cc-gradient-angle), var(--cc-button-bg), color-mix(in srgb, var(--cc-button-bg) 68%, var(--cc-primary) 32%)) !important;
  color: var(--cc-button-text) !important;
  border-color: var(--cc-button-border) !important;
  box-shadow: var(--cc-shadow-button, none) !important;
}

html[data-cc-skin][data-cc-page="calendar.php"] :where(.calendar-input, input.calendar-input, select.calendar-input, textarea.calendar-input),
html[data-cc-skin][data-cc-page-name="calendar"] :where(.calendar-input, input.calendar-input, select.calendar-input, textarea.calendar-input) {
  background: var(--cc-control-bg) !important;
  color: var(--cc-text) !important;
  border-color: var(--cc-control-border) !important;
  border-width: var(--cc-border-width) !important;
  border-radius: var(--cc-radius-button) !important;
}

html[data-cc-skin][data-cc-page="calendar.php"] :where(.calendar-shell-title, .calendar-shell-subtitle, .calendar-period-scope, .calendar-month-head, .calendar-list-item-range, .calendar-list-item-sub, .calendar-drawer-meta, .calendar-reminder-help, .calendar-more, .calendar-empty-state),
html[data-cc-skin][data-cc-page-name="calendar"] :where(.calendar-shell-title, .calendar-shell-subtitle, .calendar-period-scope, .calendar-month-head, .calendar-list-item-range, .calendar-list-item-sub, .calendar-drawer-meta, .calendar-reminder-help, .calendar-more, .calendar-empty-state) {
  color: var(--cc-muted) !important;
}

html[data-cc-skin][data-cc-page="calendar.php"] .calendar-drawer-actions,
html[data-cc-skin][data-cc-page-name="calendar"] .calendar-drawer-actions {
  background: linear-gradient(180deg, transparent, color-mix(in srgb, var(--cc-card-bg) 92%, transparent) 34%, var(--cc-card-bg)) !important;
}

html[data-cc-skin][data-cc-page="calendar.php"] :where(.calendar-day-cell.is-today, .calendar-week-column.is-today, .calendar-day-view.is-today, .calendar-mini-day.is-today, .calendar-week-mini.is-today),
html[data-cc-skin][data-cc-page-name="calendar"] :where(.calendar-day-cell.is-today, .calendar-week-column.is-today, .calendar-day-view.is-today, .calendar-mini-day.is-today, .calendar-week-mini.is-today) {
  outline-color: color-mix(in srgb, var(--cc-primary) 42%, transparent) !important;
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--cc-primary) 25%, transparent), var(--cc-shadow-card) !important;
}

/* p21/p22: themed weekend emphasis + original-style active-day glow.
 * Keeps this runtime-only and scoped to skinned pages.
 */
html[data-cc-skin][data-cc-page="calendar.php"],
html[data-cc-skin][data-cc-page-name="calendar"],
html[data-cc-skin][data-cc-page="child_tracker.php"],
html[data-cc-skin][data-cc-page-name="child_tracker"],
html[data-cc-skin][data-cc-page="victoria_diary.php"],
html[data-cc-skin][data-cc-page-name="victoria_diary"] {
  --cc-calendar-weekend-bg: linear-gradient(180deg,
    color-mix(in srgb, var(--cc-accent) 13%, var(--cc-card-bg) 87%),
    color-mix(in srgb, var(--cc-primary) 8%, var(--cc-row-bg) 92%)
  );
  --cc-calendar-weekend-border: color-mix(in srgb, var(--cc-accent) 42%, var(--cc-border) 58%);
  --cc-calendar-weekend-text: var(--cc-text);
  --cc-calendar-active-glow: color-mix(in srgb, var(--cc-primary) 58%, transparent);
  --cc-calendar-active-glow-soft: color-mix(in srgb, var(--cc-primary) 30%, transparent);
}

html[data-cc-skin][data-cc-page="calendar.php"] :where(.calendar-month-head.is-nonworking, .calendar-day-cell.is-nonworking, .calendar-mobile-day-slot.is-nonworking, .calendar-week-column.is-nonworking, .calendar-day-view.is-nonworking, .calendar-mini-day.is-nonworking, .calendar-week-mini.is-nonworking),
html[data-cc-skin][data-cc-page-name="calendar"] :where(.calendar-month-head.is-nonworking, .calendar-day-cell.is-nonworking, .calendar-mobile-day-slot.is-nonworking, .calendar-week-column.is-nonworking, .calendar-day-view.is-nonworking, .calendar-mini-day.is-nonworking, .calendar-week-mini.is-nonworking) {
  background: var(--cc-calendar-weekend-bg) !important;
  border-color: var(--cc-calendar-weekend-border) !important;
  color: var(--cc-calendar-weekend-text) !important;
}

html[data-cc-skin][data-cc-page="child_tracker.php"] .viki-calendar > .viki-cal-head:nth-child(6),
html[data-cc-skin][data-cc-page="child_tracker.php"] .viki-calendar > .viki-cal-head:nth-child(7),
html[data-cc-skin][data-cc-page="child_tracker.php"] .viki-calendar > .viki-cal-cell:nth-child(7n+6):not(.out),
html[data-cc-skin][data-cc-page="child_tracker.php"] .viki-calendar > .viki-cal-cell:nth-child(7n):not(.out),
html[data-cc-skin][data-cc-page-name="child_tracker"] .viki-calendar > .viki-cal-head:nth-child(6),
html[data-cc-skin][data-cc-page-name="child_tracker"] .viki-calendar > .viki-cal-head:nth-child(7),
html[data-cc-skin][data-cc-page-name="child_tracker"] .viki-calendar > .viki-cal-cell:nth-child(7n+6):not(.out),
html[data-cc-skin][data-cc-page-name="child_tracker"] .viki-calendar > .viki-cal-cell:nth-child(7n):not(.out),
html[data-cc-skin][data-cc-page="victoria_diary.php"] .viki-calendar > .viki-cal-head:nth-child(6),
html[data-cc-skin][data-cc-page="victoria_diary.php"] .viki-calendar > .viki-cal-head:nth-child(7),
html[data-cc-skin][data-cc-page="victoria_diary.php"] .viki-calendar > .viki-cal-cell:nth-child(7n+6):not(.out),
html[data-cc-skin][data-cc-page="victoria_diary.php"] .viki-calendar > .viki-cal-cell:nth-child(7n):not(.out),
html[data-cc-skin][data-cc-page-name="victoria_diary"] .viki-calendar > .viki-cal-head:nth-child(6),
html[data-cc-skin][data-cc-page-name="victoria_diary"] .viki-calendar > .viki-cal-head:nth-child(7),
html[data-cc-skin][data-cc-page-name="victoria_diary"] .viki-calendar > .viki-cal-cell:nth-child(7n+6):not(.out),
html[data-cc-skin][data-cc-page-name="victoria_diary"] .viki-calendar > .viki-cal-cell:nth-child(7n):not(.out) {
  background: var(--cc-calendar-weekend-bg) !important;
  border-color: var(--cc-calendar-weekend-border) !important;
  color: var(--cc-calendar-weekend-text) !important;
}

html[data-cc-skin][data-cc-page="calendar.php"] :where(.calendar-day-cell.is-today, .calendar-week-column.is-today, .calendar-day-view.is-today, .calendar-mini-day.is-today, .calendar-week-mini.is-today, .calendar-mobile-day-slot.is-today),
html[data-cc-skin][data-cc-page-name="calendar"] :where(.calendar-day-cell.is-today, .calendar-week-column.is-today, .calendar-day-view.is-today, .calendar-mini-day.is-today, .calendar-week-mini.is-today, .calendar-mobile-day-slot.is-today),
html[data-cc-skin][data-cc-page="child_tracker.php"] :where(.viki-cal-cell.current, .viki-cal-cell.is-today, .viki-day.current, .viki-day.is-today),
html[data-cc-skin][data-cc-page-name="child_tracker"] :where(.viki-cal-cell.current, .viki-cal-cell.is-today, .viki-day.current, .viki-day.is-today),
html[data-cc-skin][data-cc-page="victoria_diary.php"] :where(.viki-cal-cell.current, .viki-cal-cell.is-today, .viki-day.current, .viki-day.is-today),
html[data-cc-skin][data-cc-page-name="victoria_diary"] :where(.viki-cal-cell.current, .viki-cal-cell.is-today, .viki-day.current, .viki-day.is-today) {
  outline: 2px solid var(--cc-calendar-active-glow-soft) !important;
  outline-offset: 0 !important;
  border-color: color-mix(in srgb, var(--cc-primary) 62%, var(--cc-border) 38%) !important;
  box-shadow:
    inset 0 0 0 1px color-mix(in srgb, var(--cc-primary) 22%, transparent),
    2px 2px 13px 5px var(--cc-calendar-active-glow),
    var(--cc-shadow-card) !important;
}

html[data-cc-skin][data-cc-page="calendar.php"] :where(.calendar-day-cell.is-today.is-nonworking, .calendar-week-column.is-today.is-nonworking, .calendar-day-view.is-today.is-nonworking, .calendar-mini-day.is-today.is-nonworking, .calendar-week-mini.is-today.is-nonworking, .calendar-mobile-day-slot.is-today.is-nonworking),
html[data-cc-skin][data-cc-page-name="calendar"] :where(.calendar-day-cell.is-today.is-nonworking, .calendar-week-column.is-today.is-nonworking, .calendar-day-view.is-today.is-nonworking, .calendar-mini-day.is-today.is-nonworking, .calendar-week-mini.is-today.is-nonworking, .calendar-mobile-day-slot.is-today.is-nonworking),
html[data-cc-skin][data-cc-page="child_tracker.php"] .viki-calendar > .viki-cal-cell.current,
html[data-cc-skin][data-cc-page-name="child_tracker"] .viki-calendar > .viki-cal-cell.current {
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--cc-section-active-bg) 82%, var(--cc-primary) 18%),
    color-mix(in srgb, var(--cc-card-bg) 82%, var(--cc-primary) 18%)
  ) !important;
}