:root {
  color-scheme: light;
}

.theme-toggle {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 38px;
  padding: 0 12px 0 10px;
  border: 1px solid rgb(148 163 184 / 35%);
  border-radius: 999px;
  color: #172033;
  background: rgb(255 255 255 / 92%);
  box-shadow: 0 10px 26px rgb(15 23 42 / 14%);
  font: 700 11px/1 Calibri, "Segoe UI", system-ui, sans-serif;
  cursor: pointer;
  backdrop-filter: blur(12px);
  -webkit-tap-highlight-color: transparent;
  transition: color .2s ease, background .2s ease, border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}

.theme-toggle--inline { flex: 0 0 auto; }
.theme-toggle--floating { position: fixed; right: 22px; bottom: 22px; z-index: 100; }

.theme-toggle:hover { transform: translateY(-2px); box-shadow: 0 13px 30px rgb(15 23 42 / 18%); }
.theme-toggle:focus-visible { outline: 3px solid rgb(37 99 235 / 28%); outline-offset: 3px; }
.theme-toggle-icon { display: inline-flex; width: 17px; height: 17px; align-items: center; justify-content: center; }
.theme-toggle-icon svg { width: 100%; height: 100%; display: block; }
.theme-toggle-icon--moon { display: none; }
.theme-controls { position: relative; z-index: 4; display: inline-flex; align-items: center; gap: 5px; }
.theme-palette-trigger { display: inline-grid; width: 34px; height: 34px; place-items: center; border: 1px solid rgb(148 163 184 / 35%); border-radius: 50%; color: var(--theme-accent-strong, #9b6c17); background: rgb(255 255 255 / 92%); box-shadow: 0 7px 18px rgb(15 23 42 / 10%); cursor: pointer; transition: color .2s ease, background .2s ease, border-color .2s ease, transform .2s ease; }
.theme-palette-trigger svg { width: 17px; height: 17px; display: block; }
.theme-palette-trigger:hover { border-color: var(--theme-accent, #e6bc58); background: #fffdf5; transform: translateY(-1px); }
.theme-palette-trigger:focus-visible { outline: 3px solid rgb(37 99 235 / 28%); outline-offset: 3px; }
.theme-palette { position: absolute; top: calc(100% + 9px); right: 0; display: none; grid-template-columns: repeat(3, 30px); gap: 7px; padding: 9px; border: 1px solid rgb(148 163 184 / 35%); border-radius: 13px; background: rgb(255 255 255 / 97%); box-shadow: 0 14px 34px rgb(15 23 42 / 18%); }
.theme-controls.is-palette-open .theme-palette { display: grid; }
.theme-palette-option { display: grid; width: 30px; height: 30px; place-items: center; padding: 3px; border: 2px solid transparent; border-radius: 50%; background: transparent; cursor: pointer; transition: border-color .2s ease, transform .2s ease; }
.theme-palette-option:hover { transform: scale(1.08); }
.theme-palette-option:focus-visible { outline: 3px solid rgb(37 99 235 / 28%); outline-offset: 2px; }
.theme-palette-option[aria-pressed="true"] { border-color: var(--theme-accent, #9b6c17); }
.theme-swatch { display: block; width: 20px; height: 20px; border-radius: 50%; background: var(--swatch-color); box-shadow: inset 0 0 0 1px rgb(15 23 42 / 14%); }
.theme-palette-option[data-accent-option="white"] .theme-swatch { border: 1px solid #cbd5e1; box-shadow: none; }
.theme-palette-option[data-accent-option="black"] .theme-swatch { border: 1px solid #000; box-shadow: none; }
.theme-swatch--custom { background: conic-gradient(#ff3b30, #ffcc00, #34c759, #5c95e0, #af52de, #ff3b30); }
.theme-custom-picker { position: absolute; top: calc(100% + 9px); right: 0; display: none; grid-template-columns: 1fr; gap: 10px; width: min(278px, calc(100vw - 28px)); padding: 13px; border: 1px solid rgb(148 163 184 / 35%); border-radius: 15px; background: rgb(255 255 255 / 98%); box-shadow: 0 16px 38px rgb(15 23 42 / 20%); }
.theme-controls.is-custom-open .theme-custom-picker { display: grid; }
.theme-custom-picker-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; color: #172033; font: 700 12px/1 Calibri, "Segoe UI", system-ui, sans-serif; }
.theme-custom-close { display: inline-grid; width: 25px; height: 25px; place-items: center; border: 0; border-radius: 50%; color: #64748b; background: transparent; font-size: 18px; line-height: 1; cursor: pointer; }
.theme-custom-close:hover { color: #172033; background: #eef2f7; }
.theme-color-wheel { display: block; width: 224px; height: 224px; margin: 0 auto; border-radius: 50%; cursor: crosshair; touch-action: none; }
.theme-brightness { display: grid; gap: 6px; color: #64748b; font: 600 10px/1 Calibri, "Segoe UI", system-ui, sans-serif; }
.theme-brightness input { width: 100%; height: 17px; margin: 0; accent-color: var(--theme-accent, #9b6c17); cursor: pointer; }
.theme-custom-footer { display: grid; grid-template-columns: 24px auto minmax(78px, 1fr) auto; gap: 7px; align-items: center; }
.theme-custom-preview { display: block; width: 22px; height: 22px; border: 1px solid rgb(15 23 42 / 18%); border-radius: 50%; background: #e6bc58; }
.theme-custom-footer output { color: #64748b; font: 700 10px/1 ui-monospace, SFMono-Regular, Consolas, monospace; }
.theme-hex-input { width: 100%; min-width: 0; height: 31px; padding: 0 7px; border: 1px solid #d7dee8; border-radius: 7px; color: #172033; background: #fff; font: 600 10px/1 ui-monospace, SFMono-Regular, Consolas, monospace; text-transform: uppercase; }
.theme-hex-input:focus { border-color: var(--theme-accent, #9b6c17); outline: 3px solid rgb(37 99 235 / 18%); outline-offset: 1px; }
.theme-custom-apply { min-height: 31px; padding: 0 9px; border: 0; border-radius: 7px; color: var(--theme-accent-contrast, #10110f); background: var(--theme-accent, #e6bc58); font: 700 10px/1 Calibri, "Segoe UI", system-ui, sans-serif; cursor: pointer; }
.theme-custom-apply:hover { filter: brightness(.96); }

html[data-theme="dark"] {
  color-scheme: dark;
  --ink: #f1f5ee;
  --ink-soft: #d9e1d5;
  --muted: #a8b2a4;
  --muted-dark: #7f8b7d;
  --line: #394238;
  --paper: #141613;
  --surface: #1d211c;
  --gold: #edc967;
  --gold-deep: #e2b94f;
  --sage: #2e412f;
  --error: #e88e84;
  --success: #86c19b;
  --shadow: 0 16px 42px rgb(0 0 0 / 25%);

  --admin-ink: #edf3ee;
  --admin-muted: #aab7ad;
  --admin-line: #354238;
  --admin-surface: #1d251f;
  --admin-soft: #263229;
  --admin-blue-soft: #172d4d;
  --admin-shadow: 0 10px 30px rgb(0 0 0 / 24%);

  --legal-ink: #edf3f7;
  --legal-muted: #a8b6c5;
  --legal-line: #354656;
  --legal-surface: #1b2530;
  --legal-bg: #111922;
}

html[data-theme="dark"] .theme-toggle {
  border-color: rgb(226 232 240 / 20%);
  color: #f5f7f3;
  background: rgb(30 37 31 / 94%);
  box-shadow: 0 10px 26px rgb(0 0 0 / 30%);
}

html[data-theme="dark"] .theme-palette-trigger { border-color: rgb(226 232 240 / 20%); color: var(--theme-accent, #f0cf79); background: rgb(30 37 31 / 94%); box-shadow: 0 8px 22px rgb(0 0 0 / 24%); }
html[data-theme="dark"] .theme-palette-trigger:hover { border-color: var(--theme-accent, #f0cf79); background: #2a332b; }
html[data-theme="dark"] .theme-palette { border-color: #465246; background: #1e261f; box-shadow: 0 14px 34px rgb(0 0 0 / 34%); }
html[data-theme="dark"] .theme-custom-picker { border-color: #465246; background: #1e261f; box-shadow: 0 16px 38px rgb(0 0 0 / 42%); }
html[data-theme="dark"] .theme-custom-picker-head { color: #edf3ee; }
html[data-theme="dark"] .theme-custom-close { color: #a8b6a8; }
html[data-theme="dark"] .theme-custom-close:hover { color: #f5f7f3; background: #2a332b; }
html[data-theme="dark"] .theme-hex-input { border-color: #465246; color: #edf3ee; background: #202a22; }
html[data-theme="dark"] .theme-brightness { color: #a8b6a8; }

html[data-theme="dark"] .theme-toggle-icon--sun { display: none; }
html[data-theme="dark"] .theme-toggle-icon--moon { display: inline-flex; }

/* Shared Chuột Shop surfaces. */
html[data-theme="dark"] body { background-color: var(--paper); }
html[data-theme="dark"] .sidebar { background: #0d100e; }
html[data-theme="dark"] .sidebar .brand-logo,
html[data-theme="dark"] .brand-logo,
html[data-theme="dark"] .legal-logo { background: #263126; }
html[data-theme="dark"] .icon-button:hover { background: #2a3029; }
html[data-theme="dark"] .mobile-nav { border-color: #384139; background: rgb(24 29 24 / 94%); }
html[data-theme="dark"] .mobile-nav a { color: #aeb9ab; }
html[data-theme="dark"] .mobile-nav a.active { color: #f1f5ee; }
html[data-theme="dark"] .button-dark,
html[data-theme="dark"] .submit-button,
html[data-theme="dark"] .ai-quota-purchase,
html[data-theme="dark"] .purchase-auth-button,
html[data-theme="dark"] .model-controls .model-buy-button { color: #11140f; background: #e8eee5; }
html[data-theme="dark"] .button-dark:hover,
html[data-theme="dark"] .submit-button:hover:not(:disabled),
html[data-theme="dark"] .ai-quota-purchase:hover,
html[data-theme="dark"] .purchase-auth-button:hover,
html[data-theme="dark"] .model-controls .model-buy-button:hover { color: #11140f; background: #ffffff; }
html[data-theme="dark"] input,
html[data-theme="dark"] textarea,
html[data-theme="dark"] select { color-scheme: dark; }

/* Main shop and AI pages. */
html[data-theme="dark"] .product-visual.warm { background: #6f592b; }
html[data-theme="dark"] .product-visual.blue { background: #2d5259; }
html[data-theme="dark"] .product-visual.green { background: #36513a; }
html[data-theme="dark"] .product-visual.purple { background: #4b425f; }
html[data-theme="dark"] .product-visual.red { background: #643e3e; }
html[data-theme="dark"] .product-visual.product-image { background: #473e34; }
html[data-theme="dark"] .product-tag { background: rgb(15 18 14 / 72%); color: #f1f5ee; }
html[data-theme="dark"] .fund-card.featured,
html[data-theme="dark"] .note-panel { background: #3c3526; }
html[data-theme="dark"] .activity-icon,
html[data-theme="dark"] .deposit-icon { background: #26372b; }
html[data-theme="dark"] .activity-icon.purchase,
html[data-theme="dark"] .deposit-icon.pending { background: #3b3426; }
html[data-theme="dark"] .deposit-icon.failed { background: #402a2a; }
html[data-theme="dark"] .qr-frame { background: #fff; }
html[data-theme="dark"] .ai-messages { background: #171b17; }
html[data-theme="dark"] .ai-message.user { border-color: #414b41; background: #293229; }
html[data-theme="dark"] .ai-composer textarea,
html[data-theme="dark"] .model-controls select,
html[data-theme="dark"] .model-picker-button { border-color: #465246; background: #202820; }
html[data-theme="dark"] .ai-quota-box,
html[data-theme="dark"] .ai-mobile-tabs { border-color: #3b473c; background: #1b231c; }
html[data-theme="dark"] .ai-mobile-tab.active,
html[data-theme="dark"] .purchase-filter.is-active { background: #303b30; }
html[data-theme="dark"] .model-library { background: linear-gradient(180deg, #1d251e 0%, #182019 100%); }
html[data-theme="dark"] .model-card { border-color: #3b473c; background: rgb(34 43 34 / 88%); }
html[data-theme="dark"] .model-card:hover,
html[data-theme="dark"] .model-card.is-selected { background: #2c382d; }
html[data-theme="dark"] .purchase-hero-note,
html[data-theme="dark"] .purchase-stat.featured { background: #3c3526; }
html[data-theme="dark"] .purchase-filters { background: #202820; }
html[data-theme="dark"] .purchase-row:hover { background: #302c21; }

/* Admin pages. */
html[data-theme="dark"] .admin-shell,
html[data-theme="dark"] .admin-panel,
html[data-theme="dark"] .metric-card,
html[data-theme="dark"] .admin-forbidden { color: var(--admin-ink); }
html[data-theme="dark"] .admin-status { border-color: #294b78; background: var(--admin-blue-soft); color: #9fc4ff; }
html[data-theme="dark"] .admin-status.is-warning { border-color: #72521b; background: #3a2e18; color: #f4c976; }
html[data-theme="dark"] .admin-status.is-error { border-color: #6b3535; background: #3b2022; color: #ffaaa6; }
html[data-theme="dark"] .admin-button--ghost { color: var(--admin-ink); background: var(--admin-surface); }
html[data-theme="dark"] .admin-button--ghost:hover { background: var(--admin-soft); border-color: #56685a; }
html[data-theme="dark"] .search-box input,
html[data-theme="dark"] .adjustment-form input,
html[data-theme="dark"] .orders-filters select,
html[data-theme="dark"] .order-input input,
html[data-theme="dark"] .order-input select { border-color: #4b5a4e; background: #202a22; color: var(--admin-ink); }
html[data-theme="dark"] th { background: #202a22; }
html[data-theme="dark"] tbody tr:hover { background: #263329; }
html[data-theme="dark"] .admin-order-items,
html[data-theme="dark"] .admin-order-customer { color: #afbdaf; }
html[data-theme="dark"] .admin-order-customer { background: var(--admin-soft); }
html[data-theme="dark"] .admin-order-pill.pending { color: #f4c976; background: #3e3017; }
html[data-theme="dark"] .admin-order-pill.processing { color: #a9caff; background: #1c3960; }
html[data-theme="dark"] .admin-order-pill.success { color: #9de1b3; background: #1f4735; }
html[data-theme="dark"] .admin-order-pill.rejected { color: #ffaaa6; background: #4a2428; }
html[data-theme="dark"] .toast { background: #e8eee5; color: #11140f; }
html[data-theme="dark"] .toast.is-error { background: #a94845; color: #fff; }

/* Orders page. */
html[data-theme="dark"] .account-chip,
html[data-theme="dark"] .orders-summary article,
html[data-theme="dark"] .orders-panel,
html[data-theme="dark"] .orders-empty,
html[data-theme="dark"] .orders-forbidden,
html[data-theme="dark"] .order-card { border-color: var(--line); background: var(--surface); }
html[data-theme="dark"] .filter-field select { border-color: #465246; background: #202820; color: var(--ink); }
html[data-theme="dark"] .order-items { color: #b3c0b4; }
html[data-theme="dark"] .empty-mark { border-color: #5172aa; background: #1d3152; }
html[data-theme="dark"] .empty-mark--lock { border-color: #8c4d52; background: #402528; }

/* Shipping page. */
html[data-theme="dark"] .shipping-card { background: rgb(29 33 28 / 94%); }
html[data-theme="dark"] .hero-note { border-color: #62532c; background: rgb(57 49 32 / 88%); }
html[data-theme="dark"] .outline-button,
html[data-theme="dark"] .item-field select,
html[data-theme="dark"] .item-field input,
html[data-theme="dark"] .field input,
html[data-theme="dark"] .field textarea { border-color: #465246; background: #202820; color: var(--ink); }
html[data-theme="dark"] .item-row { border-color: #3b473c; background: #1b231c; }
html[data-theme="dark"] .field span { color: #b6c1b3; }
html[data-theme="dark"] .shipping-toast { border-color: #465246; background: #202820; color: var(--ink); }

/* Legal pages. */
html[data-theme="dark"] .legal-status,
html[data-theme="dark"] .legal-toc { border-color: var(--legal-line); background: rgb(31 43 55 / 90%); }
html[data-theme="dark"] .legal-document { border-color: var(--legal-line); background: var(--legal-surface); }
html[data-theme="dark"] .legal-intro { background: linear-gradient(120deg, #1d2b3b, #1b2530); }
html[data-theme="dark"] .legal-toc a { border-color: #30404f; }
html[data-theme="dark"] .commitment-card { background: #202e3a; }
html[data-theme="dark"] .legal-callout { background: #3a2c1d; color: #f0c784; }

/* Dark mode actions use one high-contrast white/black treatment. */
html[data-theme="dark"] :where(
  .button,
  .buy-button,
  .admin-link,
  .admin-button,
  .orders-button,
  .order-submit,
  .outline-button,
  .model-picker-button,
  .model-controls .model-buy-button,
  .ai-quota-purchase,
  .purchase-auth-button,
  .purchase-filter,
  .purchase-filter.is-active,
  .theme-toggle
) {
  border-color: #ffffff !important;
  color: #0b0d0b !important;
  background: #ffffff !important;
}

html[data-theme="dark"] :where(
  .button,
  .buy-button,
  .admin-link,
  .admin-button,
  .orders-button,
  .order-submit,
  .outline-button,
  .model-picker-button,
  .model-controls .model-buy-button,
  .ai-quota-purchase,
  .purchase-auth-button,
  .purchase-filter,
  .purchase-filter.is-active,
  .theme-toggle
):hover:not(:disabled) {
  border-color: #e5e7eb !important;
  color: #000000 !important;
  background: #f1f1f1 !important;
}

html[data-theme="dark"] :where(
  .button:disabled,
  .buy-button:disabled,
  .admin-link:disabled,
  .admin-button:disabled,
  .orders-button:disabled,
  .order-submit:disabled,
  .outline-button:disabled,
  .model-picker-button:disabled,
  .model-controls .model-buy-button:disabled,
  .ai-quota-purchase:disabled,
  .theme-toggle:disabled
) {
  color: #3f4640 !important;
  background: #d7dcd7 !important;
  border-color: #d7dcd7 !important;
}

/* Apply the selected accent to visible light-theme actions and highlights. */
html[data-theme="light"][data-accent] .button-gold,
html[data-theme="light"][data-accent] .buy-button,
html[data-theme="light"][data-accent] .orders-button,
html[data-theme="light"][data-accent] .admin-link:not(.admin-button--ghost),
html[data-theme="light"][data-accent] .admin-button:not(.admin-button--ghost),
html[data-theme="light"][data-accent] .submit-button,
html[data-theme="light"][data-accent] .theme-custom-apply {
  color: var(--theme-accent-contrast) !important;
  background: var(--theme-accent) !important;
  border-color: var(--theme-accent) !important;
}

html[data-theme="light"][data-accent] .button-gold:hover,
html[data-theme="light"][data-accent] .buy-button:hover,
html[data-theme="light"][data-accent] .orders-button:hover,
html[data-theme="light"][data-accent] .admin-link:not(.admin-button--ghost):hover,
html[data-theme="light"][data-accent] .admin-button:not(.admin-button--ghost):hover,
html[data-theme="light"][data-accent] .submit-button:hover:not(:disabled),
html[data-theme="light"][data-accent] .theme-custom-apply:hover {
  color: var(--theme-accent-contrast) !important;
  background: var(--theme-accent-strong) !important;
  border-color: var(--theme-accent-strong) !important;
}

html[data-accent] .eyebrow,
html[data-accent] .ai-connection .status-dot,
html[data-accent] .ai-avatar,
html[data-accent] .purchase-provider-mark,
html[data-accent] .theme-palette-trigger {
  color: var(--theme-accent-strong);
}

html[data-accent] .status-dot,
html[data-accent] .notification-dot,
html[data-accent] .purchase-stat.featured,
html[data-accent] .theme-palette-option[aria-pressed="true"] {
  border-color: var(--theme-accent);
}

html[data-accent="white"] .theme-palette-option[data-accent-option="white"][aria-pressed="true"] {
  border-color: #64748b;
}

html[data-accent="black"] .theme-palette-option[data-accent-option="black"][aria-pressed="true"] {
  border-color: #000000;
}

html[data-accent] .notification-dot,
html[data-accent] .status-dot {
  background: var(--theme-accent-strong);
}

html[data-accent] .connection-status .status-dot:not(.offline) {
  background: #22c55e !important;
  box-shadow: 0 0 0 3px rgb(34 197 94 / 18%) !important;
}

html[data-accent] .connection-status .status-dot.offline {
  background: #9ca3af !important;
  box-shadow: none !important;
}

html[data-accent] .secure-note .status-dot {
  background: #22c55e !important;
  box-shadow: 0 0 0 3px rgb(34 197 94 / 18%) !important;
}

html[data-accent] .notification-dot {
  background: #ef4444 !important;
  box-shadow: 0 0 0 3px rgb(239 68 68 / 18%) !important;
}

html[data-accent="white"] a.button.button-gold[href="/oprt.html"],
html[data-accent="custom:#ffffff"] a.button.button-gold[href="/oprt.html"] {
  color: #ffffff !important;
  background: #000000 !important;
  border-color: #000000 !important;
}

html[data-accent="black"] a.button.button-gold[href="/oprt.html"] {
  color: #000000 !important;
  background: #ffffff !important;
  border-color: #ffffff !important;
}

html[data-accent="white"] a.button.button-gold[href="/oprt.html"]:hover,
html[data-accent="custom:#ffffff"] a.button.button-gold[href="/oprt.html"]:hover {
  color: #ffffff !important;
  background: #222222 !important;
  border-color: #222222 !important;
}

html[data-accent="black"] a.button.button-gold[href="/oprt.html"]:hover {
  color: #000000 !important;
  background: #e5e5e5 !important;
  border-color: #e5e5e5 !important;
}

html[data-accent="white"] .button-dark,
html[data-accent="white"] .button-gold,
html[data-accent="white"] .buy-button,
html[data-accent="white"] .orders-button,
html[data-accent="white"] .admin-link:not(.admin-button--ghost),
html[data-accent="white"] .admin-button:not(.admin-button--ghost),
html[data-accent="white"] .submit-button,
html[data-accent="white"] .order-submit,
html[data-accent="white"] .model-buy-button,
html[data-accent="white"] .ai-quota-purchase,
html[data-accent="white"] .purchase-auth-button,
html[data-accent="white"] .theme-palette-trigger,
html[data-accent="white"] .theme-custom-apply,
html[data-accent="white"] .model-picker-button,
html[data-accent="white"] .outline-button,
html[data-accent="white"] .purchase-filter.is-active,
html[data-accent="white"] .quick-amounts button,
html[data-accent="custom:#ffffff"] .button-dark,
html[data-accent="custom:#ffffff"] .button-gold,
html[data-accent="custom:#ffffff"] .buy-button,
html[data-accent="custom:#ffffff"] .orders-button,
html[data-accent="custom:#ffffff"] .admin-link:not(.admin-button--ghost),
html[data-accent="custom:#ffffff"] .admin-button:not(.admin-button--ghost),
html[data-accent="custom:#ffffff"] .submit-button,
html[data-accent="custom:#ffffff"] .order-submit,
html[data-accent="custom:#ffffff"] .model-buy-button,
html[data-accent="custom:#ffffff"] .ai-quota-purchase,
html[data-accent="custom:#ffffff"] .purchase-auth-button,
html[data-accent="custom:#ffffff"] .theme-palette-trigger,
html[data-accent="custom:#ffffff"] .theme-custom-apply,
html[data-accent="custom:#ffffff"] .model-picker-button,
html[data-accent="custom:#ffffff"] .outline-button,
html[data-accent="custom:#ffffff"] .purchase-filter.is-active,
html[data-accent="custom:#ffffff"] .quick-amounts button {
  color: #ffffff !important;
  background: #000000 !important;
  border-color: #000000 !important;
}

html[data-accent="white"] .button-dark:hover,
html[data-accent="white"] .button-gold:hover,
html[data-accent="white"] .buy-button:hover,
html[data-accent="white"] .orders-button:hover,
html[data-accent="white"] .admin-link:not(.admin-button--ghost):hover,
html[data-accent="white"] .admin-button:not(.admin-button--ghost):hover,
html[data-accent="white"] .submit-button:hover:not(:disabled),
html[data-accent="white"] .order-submit:hover:not(:disabled),
html[data-accent="white"] .model-buy-button:hover,
html[data-accent="white"] .ai-quota-purchase:hover,
html[data-accent="white"] .purchase-auth-button:hover,
html[data-accent="white"] .theme-palette-trigger:hover,
html[data-accent="white"] .theme-custom-apply:hover,
html[data-accent="white"] .model-picker-button:hover,
html[data-accent="white"] .outline-button:hover,
html[data-accent="white"] .quick-amounts button:hover,
html[data-accent="custom:#ffffff"] .button-dark:hover,
html[data-accent="custom:#ffffff"] .button-gold:hover,
html[data-accent="custom:#ffffff"] .buy-button:hover,
html[data-accent="custom:#ffffff"] .orders-button:hover,
html[data-accent="custom:#ffffff"] .admin-link:not(.admin-button--ghost):hover,
html[data-accent="custom:#ffffff"] .admin-button:not(.admin-button--ghost):hover,
html[data-accent="custom:#ffffff"] .submit-button:hover:not(:disabled),
html[data-accent="custom:#ffffff"] .order-submit:hover:not(:disabled),
html[data-accent="custom:#ffffff"] .model-buy-button:hover,
html[data-accent="custom:#ffffff"] .ai-quota-purchase:hover,
html[data-accent="custom:#ffffff"] .purchase-auth-button:hover,
html[data-accent="custom:#ffffff"] .theme-palette-trigger:hover,
html[data-accent="custom:#ffffff"] .theme-custom-apply:hover,
html[data-accent="custom:#ffffff"] .model-picker-button:hover,
html[data-accent="custom:#ffffff"] .outline-button:hover,
html[data-accent="custom:#ffffff"] .quick-amounts button:hover {
  color: #ffffff !important;
  background: #222222 !important;
  border-color: #222222 !important;
}

/* Purchase/package actions keep a clear black-white contrast in extreme themes. */
html[data-accent="white"] .buy-button,
html[data-accent="white"] .model-buy-button,
html[data-accent="white"] .ai-quota-purchase,
html[data-accent="custom:#ffffff"] .buy-button,
html[data-accent="custom:#ffffff"] .model-buy-button,
html[data-accent="custom:#ffffff"] .ai-quota-purchase {
  color: #ffffff !important;
  background: #000000 !important;
  border-color: #000000 !important;
}

html[data-accent="black"] .buy-button,
html[data-accent="black"] .model-buy-button,
html[data-accent="black"] .ai-quota-purchase {
  color: #000000 !important;
  background: #ffffff !important;
  border-color: #ffffff !important;
}

html[data-accent="white"] .buy-button:hover,
html[data-accent="white"] .model-buy-button:hover,
html[data-accent="white"] .ai-quota-purchase:hover,
html[data-accent="custom:#ffffff"] .buy-button:hover,
html[data-accent="custom:#ffffff"] .model-buy-button:hover,
html[data-accent="custom:#ffffff"] .ai-quota-purchase:hover {
  color: #ffffff !important;
  background: #222222 !important;
  border-color: #222222 !important;
}

html[data-accent="black"] .buy-button:hover,
html[data-accent="black"] .model-buy-button:hover,
html[data-accent="black"] .ai-quota-purchase:hover {
  color: #000000 !important;
  background: #e5e5e5 !important;
  border-color: #e5e5e5 !important;
}

html[data-theme="dark"][data-accent] .ai-avatar,
html[data-theme="dark"][data-accent] .ai-quota-box strong,
html[data-theme="dark"][data-accent] .purchase-provider-mark,
html[data-theme="dark"][data-accent] .purchase-stat.featured {
  color: var(--theme-accent);
  border-color: color-mix(in srgb, var(--theme-accent) 45%, #394238);
}

/* Tint page backgrounds and major surfaces with the selected accent. */
html[data-accent] {
  background: var(--theme-page-bg) !important;
}

html[data-accent] body {
  background:
    radial-gradient(circle at 92% 0, var(--theme-page-glow) 0, transparent 34rem),
    var(--theme-page-bg) !important;
}

html[data-accent] .panel,
html[data-accent] .modal,
html[data-accent] .topbar-balance,
html[data-accent] .ai-chat-panel,
html[data-accent] .ai-messages,
html[data-accent] .ai-quota-box,
html[data-accent] .model-library,
html[data-accent] .shipping-card,
html[data-accent] .purchase-stat,
html[data-accent] .purchase-row,
html[data-accent] .purchase-empty,
html[data-accent] .orders-panel,
html[data-accent] .orders-summary article,
html[data-accent] .order-card,
html[data-accent] .admin-forbidden,
html[data-accent] .metric-card,
html[data-accent] .admin-panel,
html[data-accent] .legal-document {
  background-color: var(--theme-page-surface) !important;
}

html[data-accent] .model-library {
  background-image: linear-gradient(180deg, var(--theme-page-soft), var(--theme-page-bg)) !important;
}

html[data-accent] .ai-messages,
html[data-accent] .ai-quota-box {
  background: var(--theme-page-soft) !important;
}

/* Pure-black accent: keep navigation black and make actions/tags white with black text. */
html[data-accent="black"] .sidebar,
html[data-accent="black"] .mobile-nav {
  color: #ffffff !important;
  background: #000000 !important;
  border-color: #2f2f2f !important;
}

html[data-accent="black"] .sidebar .nav-item,
html[data-accent="black"] .sidebar .sidebar-label,
html[data-accent="black"] .sidebar .muted,
html[data-accent="black"] .mobile-nav a {
  color: #ffffff !important;
}

html[data-accent="black"] .sidebar .nav-item:hover,
html[data-accent="black"] .mobile-nav a:hover {
  color: #000000 !important;
  background: #ffffff !important;
}

html[data-accent="black"] .sidebar .nav-item.active,
html[data-accent="black"] .mobile-nav a.active {
  color: #000000 !important;
  background: #ffffff !important;
}

html[data-accent="black"] .mobile-menu,
html[data-accent="custom:#000000"] .mobile-menu,
html[data-theme="dark"] .mobile-menu {
  color: #ffffff !important;
}

html[data-accent="black"] body[data-page="chat"] .chat-mobile-inbox-toggle,
html[data-accent="custom:#000000"] body[data-page="chat"] .chat-mobile-inbox-toggle,
html[data-theme="dark"] body[data-page="chat"] .chat-mobile-inbox-toggle {
  color: #ffffff !important;
}

html[data-accent="black"] body[data-page="chat"] .chat-mobile-inbox-toggle svg,
html[data-accent="custom:#000000"] body[data-page="chat"] .chat-mobile-inbox-toggle svg,
html[data-theme="dark"] body[data-page="chat"] .chat-mobile-inbox-toggle svg {
  stroke: #ffffff !important;
}

html[data-accent="black"] .button-dark,
html[data-accent="black"] .button-gold,
html[data-accent="black"] .buy-button,
html[data-accent="black"] .orders-button,
html[data-accent="black"] .admin-link:not(.admin-button--ghost),
html[data-accent="black"] .admin-button:not(.admin-button--ghost),
html[data-accent="black"] .submit-button,
html[data-accent="black"] .order-submit,
html[data-accent="black"] .model-buy-button,
html[data-accent="black"] .ai-quota-purchase,
html[data-accent="black"] .purchase-auth-button,
html[data-accent="black"] .theme-toggle,
html[data-accent="black"] .theme-palette-trigger,
html[data-accent="black"] .theme-custom-apply {
  color: #000000 !important;
  background: #ffffff !important;
  border-color: #ffffff !important;
}

html[data-accent="black"] .button-dark:hover,
html[data-accent="black"] .button-gold:hover,
html[data-accent="black"] .buy-button:hover,
html[data-accent="black"] .orders-button:hover,
html[data-accent="black"] .admin-link:not(.admin-button--ghost):hover,
html[data-accent="black"] .admin-button:not(.admin-button--ghost):hover,
html[data-accent="black"] .submit-button:hover:not(:disabled),
html[data-accent="black"] .order-submit:hover:not(:disabled),
html[data-accent="black"] .model-buy-button:hover,
html[data-accent="black"] .ai-quota-purchase:hover,
html[data-accent="black"] .purchase-auth-button:hover,
html[data-accent="black"] .theme-toggle:hover,
html[data-accent="black"] .theme-palette-trigger:hover,
html[data-accent="black"] .theme-custom-apply:hover {
  color: #000000 !important;
  background: #e5e5e5 !important;
  border-color: #e5e5e5 !important;
}

html[data-accent="black"] .product-tag,
html[data-accent="black"] .promo-badge,
html[data-accent="black"] .status-badge,
html[data-accent="black"] .model-card-badge,
html[data-accent="black"] .purchase-status,
html[data-accent="black"] .status-pill,
html[data-accent="black"] .admin-order-pill {
  color: #000000 !important;
  background: #ffffff !important;
  border-color: #ffffff !important;
}

html[data-accent="black"] .model-picker-button,
html[data-accent="black"] .outline-button,
html[data-accent="black"] .purchase-filter.is-active,
html[data-accent="black"] .quick-amounts button {
  color: #000000 !important;
  background: #ffffff !important;
  border-color: #ffffff !important;
}

@media (max-width: 780px) {
  .theme-toggle { min-height: 36px; padding-inline: 9px; }
  .theme-toggle--floating { right: 18px; bottom: 84px; }
  .theme-palette, .theme-custom-picker { right: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .theme-toggle { transition: none; }
  .theme-toggle:hover { transform: none; }
}

/* Final override for the product-card “Mua gói” action. */
html[data-accent="white"] .product-card .buy-button,
html[data-accent="custom:#ffffff"] .product-card .buy-button {
  color: #ffffff !important;
  background: #000000 !important;
  border-color: #000000 !important;
}

html[data-accent="black"] .product-card .buy-button {
  color: #000000 !important;
  background: #ffffff !important;
  border-color: #ffffff !important;
}

/* Add-funds denomination chips: white text on the pure-black theme. */
html[data-accent="black"] body[data-page="add-funds"] .quick-amounts button {
  color: #ffffff !important;
  background: #000000 !important;
  border-color: #ffffff !important;
}

html[data-accent="custom:#000000"] body[data-page="add-funds"] .quick-amounts button,
html[data-accent="custom:#000000"] .quick-amounts button {
  color: #ffffff !important;
  background: #000000 !important;
  border-color: #ffffff !important;
}

html[data-accent="black"] body[data-page="add-funds"] .quick-amounts button:hover {
  color: #ffffff !important;
  background: #222222 !important;
  border-color: #ffffff !important;
}

html[data-accent="custom:#000000"] body[data-page="add-funds"] .quick-amounts button:hover,
html[data-accent="custom:#000000"] .quick-amounts button:hover {
  color: #ffffff !important;
  background: #222222 !important;
  border-color: #ffffff !important;
}

/* The visible Add funds cards (₫2k–₫500k) need an explicit button color. */
html[data-accent="black"] #add-funds-page .fund-card,
html[data-accent="custom:#000000"] #add-funds-page .fund-card {
  color: #ffffff !important;
  background: #000000 !important;
  border-color: #ffffff !important;
}

html[data-accent="black"] #add-funds-page .fund-card strong,
html[data-accent="black"] #add-funds-page .fund-card small,
html[data-accent="black"] #add-funds-page .fund-card .fund-number,
html[data-accent="black"] #add-funds-page .fund-card .fund-arrow,
html[data-accent="custom:#000000"] #add-funds-page .fund-card strong,
html[data-accent="custom:#000000"] #add-funds-page .fund-card small,
html[data-accent="custom:#000000"] #add-funds-page .fund-card .fund-number,
html[data-accent="custom:#000000"] #add-funds-page .fund-card .fund-arrow {
  color: #ffffff !important;
}

html[data-accent="black"] #add-funds-page .fund-card.featured,
html[data-accent="custom:#000000"] #add-funds-page .fund-card.featured {
  background: #000000 !important;
  border-color: #ffffff !important;
}

/* Admin balance controls stay readable on the pure-black theme. */
html[data-accent="black"] .admin-shell .adjustment-form input,
html[data-accent="custom:#000000"] .admin-shell .adjustment-form input {
  color: #000000 !important;
  background: #ffffff !important;
  border-color: #ffffff !important;
  caret-color: #000000;
}

html[data-accent="black"] .admin-shell .adjustment-form input::placeholder,
html[data-accent="custom:#000000"] .admin-shell .adjustment-form input::placeholder {
  color: #4b5563 !important;
  opacity: 1;
}

html[data-accent="black"] .admin-shell .adjustment-form input:focus,
html[data-accent="custom:#000000"] .admin-shell .adjustment-form input:focus {
  color: #000000 !important;
  background: #ffffff !important;
  border-color: #ffffff !important;
  box-shadow: 0 0 0 3px rgb(255 255 255 / 28%);
}

/* Keep the admin account search field readable on the pure-black theme. */
html[data-accent="black"] .admin-shell .search-box input,
html[data-accent="custom:#000000"] .admin-shell .search-box input {
  color: #000000 !important;
  background: #ffffff !important;
  border-color: #ffffff !important;
  caret-color: #000000;
}

html[data-accent="black"] .admin-shell .search-box input::placeholder,
html[data-accent="custom:#000000"] .admin-shell .search-box input::placeholder {
  color: #4b5563 !important;
  opacity: 1;
}

html[data-accent="black"] .admin-shell .search-box input:focus,
html[data-accent="custom:#000000"] .admin-shell .search-box input:focus {
  color: #000000 !important;
  background: #ffffff !important;
  border-color: #ffffff !important;
  box-shadow: 0 0 0 3px rgb(255 255 255 / 28%);
}

/* The verified-admin status bar stays black with white text in the pure-black theme. */
html[data-accent="black"] .admin-shell .admin-status:not(.is-warning):not(.is-error),
html[data-accent="custom:#000000"] .admin-shell .admin-status:not(.is-warning):not(.is-error) {
  color: #ffffff !important;
  background: #000000 !important;
  border-color: #383838 !important;
}

/* Keep the account table headings black with white text in the pure-black theme. */
html[data-accent="black"] .admin-shell thead th,
html[data-accent="custom:#000000"] .admin-shell thead th {
  color: #ffffff !important;
  background: #000000 !important;
  border-color: #383838 !important;
}

/* Keep account rows dark while hovering in the pure-black admin theme. */
html[data-accent="black"] .admin-shell tbody tr:hover,
html[data-accent="custom:#000000"] .admin-shell tbody tr:hover {
  color: #ffffff !important;
  background: #000000 !important;
}

/* Product management keeps the white-theme surface even when the global accent is black. */
html[data-accent="black"] body[data-page="shopping-items"],
html[data-accent="custom:#000000"] body[data-page="shopping-items"] {
  --theme-page-bg: #eef3f9 !important;
  --theme-page-surface: #ffffff !important;
  --theme-page-soft: #f4f7fb !important;
  --theme-page-glow: #f8fafc !important;
  --admin-ink: #152033 !important;
  --admin-muted: #657189 !important;
  --admin-line: #dfe6ef !important;
  --admin-surface: #ffffff !important;
  --admin-soft: #f4f7fb !important;
  --admin-blue: #2563eb !important;
  --admin-blue-dark: #1d4ed8 !important;
  --admin-blue-soft: #eff6ff !important;
  --catalog-accent: #6d4aff !important;
  --catalog-accent-dark: #5636d8 !important;
  color: #152033 !important;
  background: linear-gradient(135deg, #eef3f9 0%, #f8fafc 58%, #f5f8ff 100%) !important;
}

html[data-accent="black"] .catalog-shell .admin-panel,
html[data-accent="black"] .catalog-shell .metric-card,
html[data-accent="black"] .catalog-shell .admin-forbidden,
html[data-accent="custom:#000000"] .catalog-shell .admin-panel,
html[data-accent="custom:#000000"] .catalog-shell .metric-card,
html[data-accent="custom:#000000"] .catalog-shell .admin-forbidden {
  color: #152033 !important;
  background: #ffffff !important;
  border-color: #dfe6ef !important;
}

html[data-accent="black"] .catalog-shell .admin-status:not(.is-warning):not(.is-error),
html[data-accent="custom:#000000"] .catalog-shell .admin-status:not(.is-warning):not(.is-error) {
  color: #1e40af !important;
  background: #eff6ff !important;
  border-color: #cbdcfb !important;
}

html[data-accent="black"] .catalog-shell .admin-status .status-dot,
html[data-accent="custom:#000000"] .catalog-shell .admin-status .status-dot {
  background: #2563eb !important;
  border-color: #2563eb !important;
}

html[data-accent="black"] .catalog-shell thead th,
html[data-accent="custom:#000000"] .catalog-shell thead th {
  color: #657189 !important;
  background: #fbfcfe !important;
  border-color: #dfe6ef !important;
}

html[data-accent="black"] .catalog-shell tbody tr:hover,
html[data-accent="custom:#000000"] .catalog-shell tbody tr:hover {
  color: inherit !important;
  background: #f8fbff !important;
}

html[data-accent="black"] .catalog-shell .admin-link:not(.admin-button--ghost),
html[data-accent="black"] .catalog-shell .admin-button:not(.admin-button--ghost),
html[data-accent="custom:#000000"] .catalog-shell .admin-link:not(.admin-button--ghost),
html[data-accent="custom:#000000"] .catalog-shell .admin-button:not(.admin-button--ghost) {
  color: #ffffff !important;
  background: #000000 !important;
  border-color: #000000 !important;
}

html[data-accent="black"] .catalog-shell .admin-link:not(.admin-button--ghost):hover,
html[data-accent="black"] .catalog-shell .admin-button:not(.admin-button--ghost):hover,
html[data-accent="custom:#000000"] .catalog-shell .admin-link:not(.admin-button--ghost):hover,
html[data-accent="custom:#000000"] .catalog-shell .admin-button:not(.admin-button--ghost):hover {
  color: #ffffff !important;
  background: #222222 !important;
  border-color: #222222 !important;
}

html[data-accent="black"] .catalog-shell .admin-button--ghost,
html[data-accent="custom:#000000"] .catalog-shell .admin-button--ghost {
  color: #152033 !important;
  background: #ffffff !important;
  border-color: #dfe6ef !important;
}

html[data-accent="black"] .catalog-shell .admin-button--ghost:hover,
html[data-accent="custom:#000000"] .catalog-shell .admin-button--ghost:hover {
  color: #152033 !important;
  background: #f4f7fb !important;
  border-color: #c7d2e1 !important;
}

html[data-accent="black"] .catalog-shell .theme-palette-trigger,
html[data-accent="custom:#000000"] .catalog-shell .theme-palette-trigger {
  color: #ffffff !important;
  background: #000000 !important;
  border-color: #000000 !important;
}

/* Add-funds denomination buttons use a soft white-gold surface with black content. */
html[data-accent="black"] body[data-page="add-funds"] .fund-card,
html[data-accent="custom:#000000"] body[data-page="add-funds"] .fund-card,
html[data-accent="black"] body[data-page="add-funds"] .quick-amounts button,
html[data-accent="custom:#000000"] body[data-page="add-funds"] .quick-amounts button {
  color: #000000 !important;
  background: #fff8e1 !important;
  border-color: #e6c86e !important;
}

html[data-accent="black"] body[data-page="add-funds"] .fund-card strong,
html[data-accent="black"] body[data-page="add-funds"] .fund-card small,
html[data-accent="black"] body[data-page="add-funds"] .fund-card .fund-number,
html[data-accent="black"] body[data-page="add-funds"] .fund-card .fund-arrow,
html[data-accent="custom:#000000"] body[data-page="add-funds"] .fund-card strong,
html[data-accent="custom:#000000"] body[data-page="add-funds"] .fund-card small,
html[data-accent="custom:#000000"] body[data-page="add-funds"] .fund-card .fund-number,
html[data-accent="custom:#000000"] body[data-page="add-funds"] .fund-card .fund-arrow {
  color: #000000 !important;
}

html[data-accent="black"] body[data-page="add-funds"] .fund-card:hover,
html[data-accent="black"] body[data-page="add-funds"] .quick-amounts button:hover,
html[data-accent="custom:#000000"] body[data-page="add-funds"] .fund-card:hover,
html[data-accent="custom:#000000"] body[data-page="add-funds"] .quick-amounts button:hover {
  color: #000000 !important;
  background: #fff1b8 !important;
  border-color: #d9ae35 !important;
}

/* Final high-specificity override for the visible denomination cards. */
html[data-accent="black"] body[data-page="add-funds"] #add-funds-page .funds-grid > button.fund-card,
html[data-accent="custom:#000000"] body[data-page="add-funds"] #add-funds-page .funds-grid > button.fund-card {
  color: #000000 !important;
  background-color: #fff4cc !important;
  background-image: none !important;
  border-color: #e6c86e !important;
  -webkit-text-fill-color: #000000 !important;
}

html[data-accent="black"] body[data-page="add-funds"] #add-funds-page .funds-grid > button.fund-card *,
html[data-accent="custom:#000000"] body[data-page="add-funds"] #add-funds-page .funds-grid > button.fund-card * {
  color: #000000 !important;
  -webkit-text-fill-color: #000000 !important;
}

html[data-accent="black"] body[data-page="add-funds"] #add-funds-page .funds-grid > button.fund-card:hover,
html[data-accent="custom:#000000"] body[data-page="add-funds"] #add-funds-page .funds-grid > button.fund-card:hover {
  color: #000000 !important;
  background-color: #ffedaa !important;
  border-color: #d9ae35 !important;
}

/* The product-count badge stays white on the black navigation theme. */
html[data-accent="black"] .nav-count,
html[data-accent="custom:#000000"] .nav-count {
  color: #ffffff !important;
}

/* Transaction processing keeps the white-theme surface even when the global accent is black. */
html[data-accent="black"] body[data-page="admin-order-processing"],
html[data-accent="custom:#000000"] body[data-page="admin-order-processing"] {
  --theme-page-bg: #eef3f9 !important;
  --theme-page-surface: #ffffff !important;
  --theme-page-soft: #f4f7fb !important;
  --theme-page-glow: #f8fafc !important;
  --admin-ink: #152033 !important;
  --admin-muted: #657189 !important;
  --admin-line: #dfe6ef !important;
  --admin-surface: #ffffff !important;
  --admin-soft: #f4f7fb !important;
  --admin-blue: #2563eb !important;
  --admin-blue-dark: #1d4ed8 !important;
  --admin-blue-soft: #eff6ff !important;
  color: #152033 !important;
  background: linear-gradient(135deg, #eef3f9 0%, #f8fafc 58%, #f5f8ff 100%) !important;
}

html[data-accent="black"] .admin-orders-shell .admin-panel,
html[data-accent="black"] .admin-orders-shell .metric-card,
html[data-accent="black"] .admin-orders-shell .admin-forbidden,
html[data-accent="black"] .admin-orders-shell .admin-order-card,
html[data-accent="custom:#000000"] .admin-orders-shell .admin-panel,
html[data-accent="custom:#000000"] .admin-orders-shell .metric-card,
html[data-accent="custom:#000000"] .admin-orders-shell .admin-forbidden,
html[data-accent="custom:#000000"] .admin-orders-shell .admin-order-card {
  color: #152033 !important;
  background: #ffffff !important;
  border-color: #dfe6ef !important;
}

html[data-accent="black"] .admin-orders-shell .admin-status:not(.is-warning):not(.is-error),
html[data-accent="custom:#000000"] .admin-orders-shell .admin-status:not(.is-warning):not(.is-error) {
  color: #1e40af !important;
  background: #eff6ff !important;
  border-color: #cbdcfb !important;
}

html[data-accent="black"] .admin-orders-shell .admin-status .status-dot,
html[data-accent="custom:#000000"] .admin-orders-shell .admin-status .status-dot {
  background: #2563eb !important;
  border-color: #2563eb !important;
}

html[data-accent="black"] .admin-orders-shell .search-box input,
html[data-accent="black"] .admin-orders-shell .orders-filters select,
html[data-accent="black"] .admin-orders-shell .order-input input,
html[data-accent="black"] .admin-orders-shell .order-input select,
html[data-accent="custom:#000000"] .admin-orders-shell .search-box input,
html[data-accent="custom:#000000"] .admin-orders-shell .orders-filters select,
html[data-accent="custom:#000000"] .admin-orders-shell .order-input input,
html[data-accent="custom:#000000"] .admin-orders-shell .order-input select {
  color: #152033 !important;
  background: #ffffff !important;
  border-color: #cbd5e1 !important;
  color-scheme: light;
}

html[data-accent="black"] .admin-orders-shell .admin-link:not(.admin-button--ghost),
html[data-accent="black"] .admin-orders-shell .admin-button:not(.admin-button--ghost),
html[data-accent="custom:#000000"] .admin-orders-shell .admin-link:not(.admin-button--ghost),
html[data-accent="custom:#000000"] .admin-orders-shell .admin-button:not(.admin-button--ghost) {
  color: #ffffff !important;
  background: #000000 !important;
  border-color: #000000 !important;
}

html[data-accent="black"] .admin-orders-shell .admin-link:not(.admin-button--ghost):hover,
html[data-accent="black"] .admin-orders-shell .admin-button:not(.admin-button--ghost):hover,
html[data-accent="custom:#000000"] .admin-orders-shell .admin-link:not(.admin-button--ghost):hover,
html[data-accent="custom:#000000"] .admin-orders-shell .admin-button:not(.admin-button--ghost):hover {
  color: #ffffff !important;
  background: #222222 !important;
  border-color: #222222 !important;
}

html[data-accent="black"] .admin-orders-shell .admin-button--ghost,
html[data-accent="custom:#000000"] .admin-orders-shell .admin-button--ghost {
  color: #152033 !important;
  background: #ffffff !important;
  border-color: #dfe6ef !important;
}

html[data-accent="black"] .admin-orders-shell .admin-button--ghost:hover,
html[data-accent="custom:#000000"] .admin-orders-shell .admin-button--ghost:hover {
  color: #152033 !important;
  background: #f4f7fb !important;
  border-color: #c7d2e1 !important;
}

html[data-accent="black"] .admin-orders-shell .theme-palette-trigger,
html[data-accent="custom:#000000"] .admin-orders-shell .theme-palette-trigger {
  color: #ffffff !important;
  background: #000000 !important;
  border-color: #000000 !important;
}

html[data-accent="black"] .admin-orders-shell .order-submit,
html[data-accent="custom:#000000"] .admin-orders-shell .order-submit {
  color: #ffffff !important;
  background: #000000 !important;
  border-color: #000000 !important;
}

html[data-accent="black"] .admin-orders-shell .order-submit:hover:not(:disabled),
html[data-accent="custom:#000000"] .admin-orders-shell .order-submit:hover:not(:disabled) {
  color: #ffffff !important;
  background: #222222 !important;
  border-color: #222222 !important;
}

/* Account management keeps the white-theme surface even when the global accent is black. */
html[data-accent="black"] body[data-page="admin-accounts"],
html[data-accent="custom:#000000"] body[data-page="admin-accounts"] {
  --theme-page-bg: #eef3f9 !important;
  --theme-page-surface: #ffffff !important;
  --theme-page-soft: #f4f7fb !important;
  --theme-page-glow: #f8fafc !important;
  --admin-ink: #152033 !important;
  --admin-muted: #657189 !important;
  --admin-line: #dfe6ef !important;
  --admin-surface: #ffffff !important;
  --admin-soft: #f4f7fb !important;
  --admin-blue: #2563eb !important;
  --admin-blue-dark: #1d4ed8 !important;
  --admin-blue-soft: #eff6ff !important;
  color: #152033 !important;
  background: linear-gradient(135deg, #eef3f9 0%, #f8fafc 58%, #f5f8ff 100%) !important;
}

html[data-accent="black"] .admin-shell[data-page="admin-accounts"],
html[data-accent="black"] body[data-page="admin-accounts"] .admin-panel,
html[data-accent="black"] body[data-page="admin-accounts"] .metric-card,
html[data-accent="black"] body[data-page="admin-accounts"] .admin-forbidden,
html[data-accent="custom:#000000"] .admin-shell[data-page="admin-accounts"],
html[data-accent="custom:#000000"] body[data-page="admin-accounts"] .admin-panel,
html[data-accent="custom:#000000"] body[data-page="admin-accounts"] .metric-card,
html[data-accent="custom:#000000"] body[data-page="admin-accounts"] .admin-forbidden {
  color: #152033 !important;
  background: #ffffff !important;
  border-color: #dfe6ef !important;
}

html[data-accent="black"] body[data-page="admin-accounts"] .admin-status:not(.is-warning):not(.is-error),
html[data-accent="custom:#000000"] body[data-page="admin-accounts"] .admin-status:not(.is-warning):not(.is-error) {
  color: #1e40af !important;
  background: #eff6ff !important;
  border-color: #cbdcfb !important;
}

html[data-accent="black"] body[data-page="admin-accounts"] .admin-status .status-dot,
html[data-accent="custom:#000000"] body[data-page="admin-accounts"] .admin-status .status-dot {
  background: #2563eb !important;
  border-color: #2563eb !important;
}

html[data-accent="black"] body[data-page="admin-accounts"] .search-box input,
html[data-accent="black"] body[data-page="admin-accounts"] .adjustment-form input,
html[data-accent="custom:#000000"] body[data-page="admin-accounts"] .search-box input,
html[data-accent="custom:#000000"] body[data-page="admin-accounts"] .adjustment-form input {
  color: #152033 !important;
  background: #ffffff !important;
  border-color: #cbd5e1 !important;
  color-scheme: light;
}

html[data-accent="black"] body[data-page="admin-accounts"] thead th,
html[data-accent="custom:#000000"] body[data-page="admin-accounts"] thead th {
  color: #657189 !important;
  background: #fbfcfe !important;
  border-color: #dfe6ef !important;
}

html[data-accent="black"] body[data-page="admin-accounts"] tbody tr:hover,
html[data-accent="custom:#000000"] body[data-page="admin-accounts"] tbody tr:hover {
  color: inherit !important;
  background: #f8fbff !important;
}

html[data-accent="black"] body[data-page="admin-accounts"] .admin-link:not(.admin-button--ghost),
html[data-accent="black"] body[data-page="admin-accounts"] .admin-button:not(.admin-button--ghost),
html[data-accent="custom:#000000"] body[data-page="admin-accounts"] .admin-link:not(.admin-button--ghost),
html[data-accent="custom:#000000"] body[data-page="admin-accounts"] .admin-button:not(.admin-button--ghost) {
  color: #ffffff !important;
  background: #000000 !important;
  border-color: #000000 !important;
}

html[data-accent="black"] body[data-page="admin-accounts"] .admin-link:not(.admin-button--ghost):hover,
html[data-accent="black"] body[data-page="admin-accounts"] .admin-button:not(.admin-button--ghost):hover,
html[data-accent="custom:#000000"] body[data-page="admin-accounts"] .admin-link:not(.admin-button--ghost):hover,
html[data-accent="custom:#000000"] body[data-page="admin-accounts"] .admin-button:not(.admin-button--ghost):hover {
  color: #ffffff !important;
  background: #222222 !important;
  border-color: #222222 !important;
}

html[data-accent="black"] body[data-page="admin-accounts"] .admin-button--ghost,
html[data-accent="custom:#000000"] body[data-page="admin-accounts"] .admin-button--ghost {
  color: #152033 !important;
  background: #ffffff !important;
  border-color: #dfe6ef !important;
}

html[data-accent="black"] body[data-page="admin-accounts"] .admin-button--ghost:hover,
html[data-accent="custom:#000000"] body[data-page="admin-accounts"] .admin-button--ghost:hover {
  color: #152033 !important;
  background: #f4f7fb !important;
  border-color: #c7d2e1 !important;
}

html[data-accent="black"] body[data-page="admin-accounts"] .theme-palette-trigger,
html[data-accent="custom:#000000"] body[data-page="admin-accounts"] .theme-palette-trigger {
  color: #ffffff !important;
  background: #000000 !important;
  border-color: #000000 !important;
}

/* White-theme product manager typography and semantic color accents. */
html[data-accent="white"] body[data-page="shopping-items"],
html[data-accent="custom:#ffffff"] body[data-page="shopping-items"] {
  --catalog-accent: #2563eb !important;
  --catalog-accent-dark: #1d4ed8 !important;
  --catalog-ink: #0f172a;
  --catalog-muted: #475569;
  --catalog-blue: #2563eb;
  --catalog-green: #15803d;
  --catalog-purple: #7c3aed;
  --catalog-amber: #b45309;
}

html[data-accent="white"] body[data-page="shopping-items"] .catalog-brand,
html[data-accent="custom:#ffffff"] body[data-page="shopping-items"] .catalog-brand,
html[data-accent="white"] body[data-page="shopping-items"] h1,
html[data-accent="white"] body[data-page="shopping-items"] h2,
html[data-accent="custom:#ffffff"] body[data-page="shopping-items"] h1,
html[data-accent="custom:#ffffff"] body[data-page="shopping-items"] h2,
html[data-accent="white"] body[data-page="shopping-items"] .catalog-product-copy strong,
html[data-accent="custom:#ffffff"] body[data-page="shopping-items"] .catalog-product-copy strong,
html[data-accent="white"] body[data-page="shopping-items"] .catalog-price strong,
html[data-accent="custom:#ffffff"] body[data-page="shopping-items"] .catalog-price strong,
html[data-accent="white"] body[data-page="shopping-items"] .panel-heading h2,
html[data-accent="custom:#ffffff"] body[data-page="shopping-items"] .panel-heading h2 {
  color: #0f172a !important;
}

html[data-accent="white"] body[data-page="shopping-items"] .admin-kicker,
html[data-accent="custom:#ffffff"] body[data-page="shopping-items"] .admin-kicker {
  color: #2563eb !important;
}

html[data-accent="white"] body[data-page="shopping-items"] .admin-subtitle,
html[data-accent="white"] body[data-page="shopping-items"] .form-note,
html[data-accent="white"] body[data-page="shopping-items"] .catalog-product-copy small,
html[data-accent="white"] body[data-page="shopping-items"] .catalog-price del,
html[data-accent="white"] body[data-page="shopping-items"] .catalog-empty,
html[data-accent="custom:#ffffff"] body[data-page="shopping-items"] .admin-subtitle,
html[data-accent="custom:#ffffff"] body[data-page="shopping-items"] .form-note,
html[data-accent="custom:#ffffff"] body[data-page="shopping-items"] .catalog-product-copy small,
html[data-accent="custom:#ffffff"] body[data-page="shopping-items"] .catalog-price del,
html[data-accent="custom:#ffffff"] body[data-page="shopping-items"] .catalog-empty {
  color: #475569 !important;
}

html[data-accent="white"] body[data-page="shopping-items"] .catalog-metrics .metric-card,
html[data-accent="custom:#ffffff"] body[data-page="shopping-items"] .catalog-metrics .metric-card {
  border-top: 3px solid #2563eb !important;
}

html[data-accent="white"] body[data-page="shopping-items"] .catalog-metrics .metric-card:nth-child(2),
html[data-accent="custom:#ffffff"] body[data-page="shopping-items"] .catalog-metrics .metric-card:nth-child(2) {
  border-top-color: #16a34a !important;
}

html[data-accent="white"] body[data-page="shopping-items"] .catalog-metrics .metric-card:nth-child(3),
html[data-accent="custom:#ffffff"] body[data-page="shopping-items"] .catalog-metrics .metric-card:nth-child(3) {
  border-top-color: #7c3aed !important;
}

html[data-accent="white"] body[data-page="shopping-items"] .catalog-metrics .metric-card:nth-child(4),
html[data-accent="custom:#ffffff"] body[data-page="shopping-items"] .catalog-metrics .metric-card:nth-child(4) {
  border-top-color: #d97706 !important;
}

html[data-accent="white"] body[data-page="shopping-items"] .catalog-metrics .metric-card strong,
html[data-accent="custom:#ffffff"] body[data-page="shopping-items"] .catalog-metrics .metric-card strong {
  color: #2563eb !important;
}

html[data-accent="white"] body[data-page="shopping-items"] .catalog-metrics .metric-card:nth-child(2) strong,
html[data-accent="custom:#ffffff"] body[data-page="shopping-items"] .catalog-metrics .metric-card:nth-child(2) strong {
  color: #15803d !important;
}

html[data-accent="white"] body[data-page="shopping-items"] .catalog-metrics .metric-card:nth-child(3) strong,
html[data-accent="custom:#ffffff"] body[data-page="shopping-items"] .catalog-metrics .metric-card:nth-child(3) strong {
  color: #7c3aed !important;
}

html[data-accent="white"] body[data-page="shopping-items"] .catalog-metrics .metric-card:nth-child(4) strong,
html[data-accent="custom:#ffffff"] body[data-page="shopping-items"] .catalog-metrics .metric-card:nth-child(4) strong {
  color: #b45309 !important;
}

html[data-accent="white"] body[data-page="shopping-items"] .editor-panel > .panel-heading,
html[data-accent="white"] body[data-page="shopping-items"] .product-list-heading,
html[data-accent="custom:#ffffff"] body[data-page="shopping-items"] .editor-panel > .panel-heading,
html[data-accent="custom:#ffffff"] body[data-page="shopping-items"] .product-list-heading {
  background: #f8fbff !important;
  border-color: #dbeafe !important;
}

html[data-accent="white"] body[data-page="shopping-items"] .editor-chip,
html[data-accent="custom:#ffffff"] body[data-page="shopping-items"] .editor-chip {
  color: #6d28d9 !important;
  background: #f5f3ff !important;
  border-color: #ddd6fe !important;
}

html[data-accent="white"] body[data-page="shopping-items"] .product-form label,
html[data-accent="custom:#ffffff"] body[data-page="shopping-items"] .product-form label {
  color: #334155 !important;
}

html[data-accent="white"] body[data-page="shopping-items"] .product-form input,
html[data-accent="white"] body[data-page="shopping-items"] .product-form textarea,
html[data-accent="white"] body[data-page="shopping-items"] .product-form select,
html[data-accent="white"] body[data-page="shopping-items"] .catalog-filters input,
html[data-accent="white"] body[data-page="shopping-items"] .catalog-filters select,
html[data-accent="custom:#ffffff"] body[data-page="shopping-items"] .product-form input,
html[data-accent="custom:#ffffff"] body[data-page="shopping-items"] .product-form textarea,
html[data-accent="custom:#ffffff"] body[data-page="shopping-items"] .product-form select,
html[data-accent="custom:#ffffff"] body[data-page="shopping-items"] .catalog-filters input,
html[data-accent="custom:#ffffff"] body[data-page="shopping-items"] .catalog-filters select {
  color: #0f172a !important;
  background: #ffffff !important;
  border-color: #cbd5e1 !important;
}

html[data-accent="white"] body[data-page="shopping-items"] .price-preview,
html[data-accent="custom:#ffffff"] body[data-page="shopping-items"] .price-preview {
  background: #eff6ff !important;
  border-color: #bfdbfe !important;
}

html[data-accent="white"] body[data-page="shopping-items"] .price-preview strong,
html[data-accent="custom:#ffffff"] body[data-page="shopping-items"] .price-preview strong {
  color: #1d4ed8 !important;
}

html[data-accent="white"] body[data-page="shopping-items"] .product-table th,
html[data-accent="custom:#ffffff"] body[data-page="shopping-items"] .product-table th {
  color: #1e40af !important;
  background: #eff6ff !important;
  border-color: #dbeafe !important;
}

html[data-accent="white"] body[data-page="shopping-items"] .product-table tbody tr:nth-child(4n + 1) .catalog-product-mark,
html[data-accent="custom:#ffffff"] body[data-page="shopping-items"] .product-table tbody tr:nth-child(4n + 1) .catalog-product-mark {
  color: #2563eb !important;
  background: #eff6ff !important;
}

html[data-accent="white"] body[data-page="shopping-items"] .product-table tbody tr:nth-child(4n + 2) .catalog-product-mark,
html[data-accent="custom:#ffffff"] body[data-page="shopping-items"] .product-table tbody tr:nth-child(4n + 2) .catalog-product-mark {
  color: #15803d !important;
  background: #ecfdf5 !important;
}

html[data-accent="white"] body[data-page="shopping-items"] .product-table tbody tr:nth-child(4n + 3) .catalog-product-mark,
html[data-accent="custom:#ffffff"] body[data-page="shopping-items"] .product-table tbody tr:nth-child(4n + 3) .catalog-product-mark {
  color: #b45309 !important;
  background: #fffbeb !important;
}

html[data-accent="white"] body[data-page="shopping-items"] .product-table tbody tr:nth-child(4n) .catalog-product-mark,
html[data-accent="custom:#ffffff"] body[data-page="shopping-items"] .product-table tbody tr:nth-child(4n) .catalog-product-mark {
  color: #7c3aed !important;
  background: #f5f3ff !important;
}

/* Extend the same readable, colorful catalog treatment to every other light accent. */
html[data-accent]:not([data-accent="black"]):not([data-accent="custom:#000000"]):not([data-accent="white"]):not([data-accent="custom:#ffffff"]) body[data-page="shopping-items"] {
  --catalog-accent: var(--theme-accent) !important;
  --catalog-accent-dark: var(--theme-accent-strong) !important;
}

html[data-accent]:not([data-accent="black"]):not([data-accent="custom:#000000"]):not([data-accent="white"]):not([data-accent="custom:#ffffff"]) body[data-page="shopping-items"] .catalog-brand,
html[data-accent]:not([data-accent="black"]):not([data-accent="custom:#000000"]):not([data-accent="white"]):not([data-accent="custom:#ffffff"]) body[data-page="shopping-items"] h1,
html[data-accent]:not([data-accent="black"]):not([data-accent="custom:#000000"]):not([data-accent="white"]):not([data-accent="custom:#ffffff"]) body[data-page="shopping-items"] h2,
html[data-accent]:not([data-accent="black"]):not([data-accent="custom:#000000"]):not([data-accent="white"]):not([data-accent="custom:#ffffff"]) body[data-page="shopping-items"] .catalog-product-copy strong,
html[data-accent]:not([data-accent="black"]):not([data-accent="custom:#000000"]):not([data-accent="white"]):not([data-accent="custom:#ffffff"]) body[data-page="shopping-items"] .catalog-price strong,
html[data-accent]:not([data-accent="black"]):not([data-accent="custom:#000000"]):not([data-accent="white"]):not([data-accent="custom:#ffffff"]) body[data-page="shopping-items"] .panel-heading h2 {
  color: #0f172a !important;
}

html[data-accent]:not([data-accent="black"]):not([data-accent="custom:#000000"]):not([data-accent="white"]):not([data-accent="custom:#ffffff"]) body[data-page="shopping-items"] .admin-kicker {
  color: var(--theme-accent-strong) !important;
}

html[data-accent]:not([data-accent="black"]):not([data-accent="custom:#000000"]):not([data-accent="white"]):not([data-accent="custom:#ffffff"]) body[data-page="shopping-items"] .admin-subtitle,
html[data-accent]:not([data-accent="black"]):not([data-accent="custom:#000000"]):not([data-accent="white"]):not([data-accent="custom:#ffffff"]) body[data-page="shopping-items"] .form-note,
html[data-accent]:not([data-accent="black"]):not([data-accent="custom:#000000"]):not([data-accent="white"]):not([data-accent="custom:#ffffff"]) body[data-page="shopping-items"] .catalog-product-copy small,
html[data-accent]:not([data-accent="black"]):not([data-accent="custom:#000000"]):not([data-accent="white"]):not([data-accent="custom:#ffffff"]) body[data-page="shopping-items"] .catalog-price del,
html[data-accent]:not([data-accent="black"]):not([data-accent="custom:#000000"]):not([data-accent="white"]):not([data-accent="custom:#ffffff"]) body[data-page="shopping-items"] .catalog-empty {
  color: #475569 !important;
}

html[data-accent]:not([data-accent="black"]):not([data-accent="custom:#000000"]):not([data-accent="white"]):not([data-accent="custom:#ffffff"]) body[data-page="shopping-items"] .catalog-metrics .metric-card {
  border-top: 3px solid var(--theme-accent) !important;
}

html[data-accent]:not([data-accent="black"]):not([data-accent="custom:#000000"]):not([data-accent="white"]):not([data-accent="custom:#ffffff"]) body[data-page="shopping-items"] .catalog-metrics .metric-card strong {
  color: var(--theme-accent-strong) !important;
}

html[data-accent]:not([data-accent="black"]):not([data-accent="custom:#000000"]):not([data-accent="white"]):not([data-accent="custom:#ffffff"]) body[data-page="shopping-items"] .catalog-metrics .metric-card:nth-child(2) {
  border-top-color: #16a34a !important;
}

html[data-accent]:not([data-accent="black"]):not([data-accent="custom:#000000"]):not([data-accent="white"]):not([data-accent="custom:#ffffff"]) body[data-page="shopping-items"] .catalog-metrics .metric-card:nth-child(2) strong {
  color: #15803d !important;
}

html[data-accent]:not([data-accent="black"]):not([data-accent="custom:#000000"]):not([data-accent="white"]):not([data-accent="custom:#ffffff"]) body[data-page="shopping-items"] .catalog-metrics .metric-card:nth-child(3) {
  border-top-color: #7c3aed !important;
}

html[data-accent]:not([data-accent="black"]):not([data-accent="custom:#000000"]):not([data-accent="white"]):not([data-accent="custom:#ffffff"]) body[data-page="shopping-items"] .catalog-metrics .metric-card:nth-child(3) strong {
  color: #7c3aed !important;
}

html[data-accent]:not([data-accent="black"]):not([data-accent="custom:#000000"]):not([data-accent="white"]):not([data-accent="custom:#ffffff"]) body[data-page="shopping-items"] .catalog-metrics .metric-card:nth-child(4) {
  border-top-color: #d97706 !important;
}

html[data-accent]:not([data-accent="black"]):not([data-accent="custom:#000000"]):not([data-accent="white"]):not([data-accent="custom:#ffffff"]) body[data-page="shopping-items"] .catalog-metrics .metric-card:nth-child(4) strong {
  color: #b45309 !important;
}

html[data-accent]:not([data-accent="black"]):not([data-accent="custom:#000000"]):not([data-accent="white"]):not([data-accent="custom:#ffffff"]) body[data-page="shopping-items"] .editor-panel > .panel-heading,
html[data-accent]:not([data-accent="black"]):not([data-accent="custom:#000000"]):not([data-accent="white"]):not([data-accent="custom:#ffffff"]) body[data-page="shopping-items"] .product-list-heading {
  background: var(--theme-page-soft) !important;
  border-color: color-mix(in srgb, var(--theme-accent) 24%, #dbeafe) !important;
}

html[data-accent]:not([data-accent="black"]):not([data-accent="custom:#000000"]):not([data-accent="white"]):not([data-accent="custom:#ffffff"]) body[data-page="shopping-items"] .editor-chip {
  color: var(--theme-accent-strong) !important;
  background: var(--theme-page-soft) !important;
  border-color: color-mix(in srgb, var(--theme-accent) 28%, #dbeafe) !important;
}

html[data-accent]:not([data-accent="black"]):not([data-accent="custom:#000000"]):not([data-accent="white"]):not([data-accent="custom:#ffffff"]) body[data-page="shopping-items"] .product-form label {
  color: #334155 !important;
}

html[data-accent]:not([data-accent="black"]):not([data-accent="custom:#000000"]):not([data-accent="white"]):not([data-accent="custom:#ffffff"]) body[data-page="shopping-items"] .product-form input,
html[data-accent]:not([data-accent="black"]):not([data-accent="custom:#000000"]):not([data-accent="white"]):not([data-accent="custom:#ffffff"]) body[data-page="shopping-items"] .product-form textarea,
html[data-accent]:not([data-accent="black"]):not([data-accent="custom:#000000"]):not([data-accent="white"]):not([data-accent="custom:#ffffff"]) body[data-page="shopping-items"] .product-form select,
html[data-accent]:not([data-accent="black"]):not([data-accent="custom:#000000"]):not([data-accent="white"]):not([data-accent="custom:#ffffff"]) body[data-page="shopping-items"] .catalog-filters input,
html[data-accent]:not([data-accent="black"]):not([data-accent="custom:#000000"]):not([data-accent="white"]):not([data-accent="custom:#ffffff"]) body[data-page="shopping-items"] .catalog-filters select {
  color: #0f172a !important;
  background: #ffffff !important;
  border-color: #cbd5e1 !important;
}

html[data-accent]:not([data-accent="black"]):not([data-accent="custom:#000000"]):not([data-accent="white"]):not([data-accent="custom:#ffffff"]) body[data-page="shopping-items"] .price-preview {
  background: color-mix(in srgb, var(--theme-accent) 8%, #ffffff) !important;
  border-color: color-mix(in srgb, var(--theme-accent) 28%, #bfdbfe) !important;
}

html[data-accent]:not([data-accent="black"]):not([data-accent="custom:#000000"]):not([data-accent="white"]):not([data-accent="custom:#ffffff"]) body[data-page="shopping-items"] .price-preview strong,
html[data-accent]:not([data-accent="black"]):not([data-accent="custom:#000000"]):not([data-accent="white"]):not([data-accent="custom:#ffffff"]) body[data-page="shopping-items"] .product-table th {
  color: var(--theme-accent-strong) !important;
}

html[data-accent]:not([data-accent="black"]):not([data-accent="custom:#000000"]):not([data-accent="white"]):not([data-accent="custom:#ffffff"]) body[data-page="shopping-items"] .product-table th {
  background: color-mix(in srgb, var(--theme-accent) 8%, #ffffff) !important;
  border-color: color-mix(in srgb, var(--theme-accent) 18%, #dbeafe) !important;
}

html[data-accent]:not([data-accent="black"]):not([data-accent="custom:#000000"]):not([data-accent="white"]):not([data-accent="custom:#ffffff"]) body[data-page="shopping-items"] .product-table tbody tr:nth-child(4n + 1) .catalog-product-mark {
  color: #2563eb !important;
  background: #eff6ff !important;
}

html[data-accent]:not([data-accent="black"]):not([data-accent="custom:#000000"]):not([data-accent="white"]):not([data-accent="custom:#ffffff"]) body[data-page="shopping-items"] .product-table tbody tr:nth-child(4n + 2) .catalog-product-mark {
  color: #15803d !important;
  background: #ecfdf5 !important;
}

html[data-accent]:not([data-accent="black"]):not([data-accent="custom:#000000"]):not([data-accent="white"]):not([data-accent="custom:#ffffff"]) body[data-page="shopping-items"] .product-table tbody tr:nth-child(4n + 3) .catalog-product-mark {
  color: #b45309 !important;
  background: #fffbeb !important;
}

html[data-accent]:not([data-accent="black"]):not([data-accent="custom:#000000"]):not([data-accent="white"]):not([data-accent="custom:#ffffff"]) body[data-page="shopping-items"] .product-table tbody tr:nth-child(4n) .catalog-product-mark {
  color: #7c3aed !important;
  background: #f5f3ff !important;
}

/* Order-history status filter: white field with black text on the black theme. */
html[data-accent="black"] body[data-page="order-history"] .filter-field select,
html[data-accent="custom:#000000"] body[data-page="order-history"] .filter-field select {
  color: #000000 !important;
  background: #ffffff !important;
  border-color: #ffffff !important;
  color-scheme: light;
  -webkit-text-fill-color: #000000 !important;
}

html[data-accent="black"] body[data-page="order-history"] .filter-field select option,
html[data-accent="custom:#000000"] body[data-page="order-history"] .filter-field select option {
  color: #000000 !important;
  background: #ffffff !important;
}

html[data-accent="black"] body[data-page="order-history"] .filter-field select:focus,
html[data-accent="custom:#000000"] body[data-page="order-history"] .filter-field select:focus {
  color: #000000 !important;
  background: #ffffff !important;
  border-color: #ffffff !important;
  box-shadow: 0 0 0 3px rgb(255 255 255 / 28%);
}

/* Buy-package buttons keep their theme colors on hover and only soften slightly. */
html[data-accent="black"] .buy-button:hover:not(:disabled),
html[data-accent="black"] .model-buy-button:hover:not(:disabled),
html[data-accent="black"] .ai-quota-purchase:hover:not(:disabled) {
  color: #000000 !important;
  background: #ffffff !important;
  border-color: #ffffff !important;
  filter: brightness(.92);
}

html[data-accent="white"] .buy-button:hover:not(:disabled),
html[data-accent="white"] .model-buy-button:hover:not(:disabled),
html[data-accent="white"] .ai-quota-purchase:hover:not(:disabled),
html[data-accent="custom:#ffffff"] .buy-button:hover:not(:disabled),
html[data-accent="custom:#ffffff"] .model-buy-button:hover:not(:disabled),
html[data-accent="custom:#ffffff"] .ai-quota-purchase:hover:not(:disabled) {
  color: #ffffff !important;
  background: #000000 !important;
  border-color: #000000 !important;
  filter: brightness(.92);
}

/* Order status tags keep the same meaning and accessible colors across every theme. */
html[data-accent] body[data-page="order-history"] .status-pill.pending,
html[data-accent] body[data-page="admin-order-processing"] .admin-order-pill.pending {
  color: #374151 !important;
  background: #f3f4f6 !important;
  border: 1px solid #d1d5db !important;
}

html[data-accent] body[data-page="order-history"] .status-pill.processing,
html[data-accent] body[data-page="admin-order-processing"] .admin-order-pill.processing {
  color: #92400e !important;
  background: #fef3c7 !important;
  border: 1px solid #fcd34d !important;
}

html[data-accent] body[data-page="order-history"] .status-pill.success,
html[data-accent] body[data-page="admin-order-processing"] .admin-order-pill.success {
  color: #166534 !important;
  background: #dcfce7 !important;
  border: 1px solid #86efac !important;
}

html[data-accent] body[data-page="order-history"] .status-pill.rejected,
html[data-accent] body[data-page="admin-order-processing"] .admin-order-pill.rejected {
  color: #991b1b !important;
  background: #fee2e2 !important;
  border: 1px solid #fca5a5 !important;
}

/* Admin header actions use the selected accent's darker shade on every admin page. */
html[data-accent] body[data-page="admin-accounts"] .admin-header .admin-actions > :is(.admin-link, .admin-button),
html[data-accent] body[data-page="shopping-items"] .admin-header .admin-actions > :is(.admin-link, .admin-button),
html[data-accent] body[data-page="admin-order-processing"] .admin-header .admin-actions > :is(.admin-link, .admin-button) {
  color: var(--theme-accent-contrast) !important;
  background: var(--theme-accent-strong) !important;
  border-color: var(--theme-accent-strong) !important;
  box-shadow: 0 6px 16px color-mix(in srgb, var(--theme-accent-strong) 22%, transparent);
  cursor: pointer;
}

html[data-accent] body[data-page="admin-accounts"] .admin-header .admin-actions > :is(.admin-link, .admin-button):hover,
html[data-accent] body[data-page="shopping-items"] .admin-header .admin-actions > :is(.admin-link, .admin-button):hover,
html[data-accent] body[data-page="admin-order-processing"] .admin-header .admin-actions > :is(.admin-link, .admin-button):hover {
  color: var(--theme-accent-contrast) !important;
  background: var(--theme-accent-strong) !important;
  border-color: var(--theme-accent-strong) !important;
  filter: brightness(.9);
}

/* Keep the live date readable in the two extreme customer themes. */
html[data-accent="white"] [data-live-date],
html[data-accent="custom:#ffffff"] [data-live-date] {
  color: #000000 !important;
}

html[data-accent="black"] [data-live-date],
html[data-accent="custom:#000000"] [data-live-date] {
  color: #ffffff !important;
}

/* Shipping form fields use sen-pink with black text on the pure-black theme. */
html[data-accent="black"] .shipping-shell .item-field select,
html[data-accent="black"] .shipping-shell .item-field input,
html[data-accent="black"] .shipping-shell .field input,
html[data-accent="black"] .shipping-shell .field textarea,
html[data-accent="custom:#000000"] .shipping-shell .item-field select,
html[data-accent="custom:#000000"] .shipping-shell .item-field input,
html[data-accent="custom:#000000"] .shipping-shell .field input,
html[data-accent="custom:#000000"] .shipping-shell .field textarea {
  color: #000000 !important;
  background: #feeaff !important;
  border-color: #c2185b !important;
  caret-color: #000000;
  color-scheme: light;
  -webkit-text-fill-color: #000000 !important;
}

html[data-accent="black"] .shipping-shell .item-field select:focus,
html[data-accent="black"] .shipping-shell .item-field input:focus,
html[data-accent="black"] .shipping-shell .field input:focus,
html[data-accent="black"] .shipping-shell .field textarea:focus,
html[data-accent="custom:#000000"] .shipping-shell .item-field select:focus,
html[data-accent="custom:#000000"] .shipping-shell .item-field input:focus,
html[data-accent="custom:#000000"] .shipping-shell .field input:focus,
html[data-accent="custom:#000000"] .shipping-shell .field textarea:focus {
  color: #000000 !important;
  background: #feeaff !important;
  border-color: #9c124d !important;
  box-shadow: 0 0 0 3px rgb(254 234 255 / 34%) !important;
}

html[data-accent="black"] .shipping-shell .item-field select option,
html[data-accent="custom:#000000"] .shipping-shell .item-field select option {
  color: #000000 !important;
  background: #feeaff !important;
}

/* Corner notifications stay white in the black theme; only the state color changes. */
html[data-accent="black"] .toast,
html[data-accent="custom:#000000"] .toast,
html[data-accent="black"] .shipping-toast,
html[data-accent="custom:#000000"] .shipping-toast {
  color: #111827 !important;
  background: #ffffff !important;
  border-color: #d1d5db !important;
}

html[data-accent="black"] .toast.success,
html[data-accent="custom:#000000"] .toast.success,
html[data-accent="black"] .shipping-toast.success,
html[data-accent="custom:#000000"] .shipping-toast.success {
  color: #15803d !important;
  border-left-color: #16a34a !important;
}

html[data-accent="black"] .toast.error,
html[data-accent="custom:#000000"] .toast.error,
html[data-accent="black"] .toast.is-error,
html[data-accent="custom:#000000"] .toast.is-error,
html[data-accent="black"] .shipping-toast.error,
html[data-accent="custom:#000000"] .shipping-toast.error {
  color: #b91c1c !important;
  border-left-color: #dc2626 !important;
}

html[data-accent="black"] .shipping-shell .field input::placeholder,
html[data-accent="black"] .shipping-shell .field textarea::placeholder,
html[data-accent="custom:#000000"] .shipping-shell .field input::placeholder,
html[data-accent="custom:#000000"] .shipping-shell .field textarea::placeholder {
  color: #4a1230 !important;
  opacity: .82;
}

/* The shipping product selector always keeps its item names black. */
html[data-accent] .shipping-shell .item-field select,
html[data-accent] .shipping-shell .item-field select option {
  color: #000000 !important;
  -webkit-text-fill-color: #000000 !important;
  color-scheme: light;
}

/* Shipping account status uses a black surface with white text on the black theme. */
html[data-accent="black"] .shipping-shell .hero-note,
html[data-accent="custom:#000000"] .shipping-shell .hero-note {
  color: #ffffff !important;
  background: #000000 !important;
  border-color: #000000 !important;
  box-shadow: 0 8px 24px rgb(0 0 0 / 24%);
}

html[data-accent="black"] .shipping-shell .hero-note small,
html[data-accent="custom:#000000"] .shipping-shell .hero-note small {
  color: #ffffff !important;
  opacity: .82;
}

/* Terms and security documents stay on the readable white legal theme. */
html[data-accent="black"] body[data-page="legal"],
html[data-accent="custom:#000000"] body[data-page="legal"] {
  --theme-page-bg: #f8fafc !important;
  --theme-page-surface: #ffffff !important;
  --theme-page-soft: #f5f8ff !important;
  --legal-ink: #0f172a !important;
  --legal-muted: #5b6b80 !important;
  --legal-line: #dbe4f0 !important;
  --legal-surface: #ffffff !important;
  --legal-bg: #f8fafc !important;
  color: #0f172a !important;
  background: radial-gradient(circle at 100% 0, #eaf2ff 0, transparent 34%), #f8fafc !important;
}

html[data-accent="black"] body[data-page="legal"] .legal-status,
html[data-accent="black"] body[data-page="legal"] .legal-toc,
html[data-accent="custom:#000000"] body[data-page="legal"] .legal-status,
html[data-accent="custom:#000000"] body[data-page="legal"] .legal-toc,
html[data-accent="black"] body[data-page="legal"] .legal-document,
html[data-accent="custom:#000000"] body[data-page="legal"] .legal-document {
  color: #0f172a !important;
  background: #ffffff !important;
  border-color: #dbe4f0 !important;
}

html[data-accent="black"] body[data-page="legal"] .legal-intro,
html[data-accent="custom:#000000"] body[data-page="legal"] .legal-intro {
  color: #5b6b80 !important;
  background: linear-gradient(120deg, #f5f8ff, #ffffff) !important;
  border-color: #dbe4f0 !important;
}

html[data-accent="black"] body[data-page="legal"] .commitment-card,
html[data-accent="custom:#000000"] body[data-page="legal"] .commitment-card {
  background: #fbfdff !important;
  border-color: #dbe4f0 !important;
}