@lucasvu/scope-ui 0.1.0 → 0.1.2

package/dist/themes/theme-ui-custom-crisp.css

@@ -0,0 +1,969 @@
+/* Shared crisp overrides for all non-default client themes. */
+
+:root[data-client-theme] body,
+:root[data-client-theme] input,
+:root[data-client-theme] button,
+:root[data-client-theme] select,
+:root[data-client-theme] textarea {
+  font-family: var(--font-family-base, 'Inter', 'Segoe UI', sans-serif);
+  -webkit-font-smoothing: antialiased;
+  text-rendering: optimizeLegibility;
+}
+
+:root[data-client-theme] h1,
+:root[data-client-theme] h2,
+:root[data-client-theme] h3,
+:root[data-client-theme] h4,
+:root[data-client-theme] h5,
+:root[data-client-theme] h6 {
+  font-family: var(--font-family-heading, var(--font-family-base, 'Inter', sans-serif));
+}
+
+:root[data-client-theme] code,
+:root[data-client-theme] pre {
+  font-family: var(--font-family-mono, 'IBM Plex Mono', monospace);
+}
+
+:root[data-client-theme] [data-client-shell='main-layout'] {
+  background: var(--shell-main-bg, var(--bg));
+  color: var(--text);
+}
+
+:root[data-client-theme] [data-client-shell='main-layout'] [data-slot='hero-bg'] {
+  background: var(--shell-hero-bg);
+}
+
+:root[data-client-theme] [data-client-shell='header']:not(.bg-transparent) {
+  background: var(--header-glass, var(--surface-elevated)) !important;
+  color: var(--header-text, var(--text-strong)) !important;
+  border: 1px solid var(--border-strong, var(--border)) !important;
+  box-shadow: var(--shadow-sm) !important;
+  backdrop-filter: none !important;
+}
+
+:root[data-client-theme] [data-client-shell='header']:not(.bg-transparent) [data-slot='title'],
+:root[data-client-theme] [data-client-shell='header']:not(.bg-transparent) [data-slot='toggle'],
+:root[data-client-theme] [data-client-shell='header']:not(.bg-transparent) [data-slot='user-trigger'] {
+  color: var(--header-text, var(--text-strong)) !important;
+}
+
+:root[data-client-theme] [data-client-shell='header']:not(.bg-transparent) [data-slot='timezone'] {
+  color: var(
+    --header-subtle-text,
+    color-mix(in srgb, var(--header-text, var(--text-strong)) 64%, var(--muted))
+  ) !important;
+}
+
+:root[data-client-theme] [data-client-shell='header'].bg-transparent {
+  color: var(--header-transparent-text, #ffffff) !important;
+}
+
+:root[data-client-theme] [data-client-shell='header'].bg-transparent [data-slot='title'],
+:root[data-client-theme] [data-client-shell='header'].bg-transparent [data-slot='toggle'],
+:root[data-client-theme] [data-client-shell='header'].bg-transparent [data-slot='user-trigger'] {
+  color: var(--header-transparent-text, #ffffff) !important;
+}
+
+:root[data-client-theme] [data-client-shell='header'].bg-transparent [data-slot='timezone'] {
+  color: var(
+    --header-transparent-subtle-text,
+    color-mix(in srgb, var(--header-transparent-text, #ffffff) 74%, transparent)
+  ) !important;
+}
+
+:root[data-client-theme] [data-client-shell='header'].bg-transparent > div > div:first-child button,
+:root[data-client-theme]
+  [data-client-shell='header'].bg-transparent
+  button[aria-haspopup='menu'][aria-controls='user-menu'] {
+  color: var(--header-transparent-text, #ffffff) !important;
+}
+
+:root[data-client-theme] [data-client-shell='header'].bg-transparent > div > div:first-child > span,
+:root[data-client-theme] [data-client-shell='header'].bg-transparent > div > div:last-child > span {
+  color: inherit !important;
+}
+
+:root[data-client-theme] [data-client-shell='header'].bg-transparent > div > div:first-child button:hover,
+:root[data-client-theme]
+  [data-client-shell='header'].bg-transparent
+  button[aria-haspopup='menu'][aria-controls='user-menu']:hover {
+  background: var(
+    --header-transparent-hover-bg,
+    rgba(255, 255, 255, 0.1)
+  ) !important;
+}
+
+:root[data-client-theme] [data-client-shell='header'].bg-transparent [data-slot='avatar'] {
+  background: var(
+    --header-transparent-avatar-bg,
+    rgba(255, 255, 255, 0.2)
+  ) !important;
+  color: var(
+    --header-transparent-avatar-fg,
+    var(--header-transparent-text, #ffffff)
+  ) !important;
+}
+
+:root[data-client-theme] [data-client-shell='header'] [data-slot='avatar'] {
+  background: var(--avatar-bg, var(--surface-strong));
+  color: var(--avatar-fg, var(--accent));
+  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--avatar-fg, var(--accent)) 18%, var(--border));
+}
+
+:root[data-client-theme] [data-client-shell='header'] [data-slot='user-menu'] {
+  border-color: var(--menu-border, var(--border)) !important;
+  background: var(--menu-surface, var(--surface-elevated)) !important;
+  box-shadow: var(--menu-shadow) !important;
+  backdrop-filter: none !important;
+}
+
+:root[data-client-theme] [data-client-shell='header'] [data-slot='user-menu'] button:hover {
+  background: var(--menu-item-hover-bg, var(--surface-strong)) !important;
+  color: var(--text-strong) !important;
+}
+
+:root[data-client-theme] [data-client-shell='header'] [data-slot='user-menu'] button[aria-current='page'] {
+  background: var(--menu-item-active-bg, var(--surface-strong)) !important;
+  color: var(--text-strong) !important;
+}
+
+:root[data-client-theme] [data-client-shell='public-layout'] [data-slot='overlay'] {
+  background: var(--public-overlay-bg) !important;
+  backdrop-filter: none !important;
+}
+
+:root[data-client-theme] [data-client-shell='auth-card'] {
+  border-color: var(--border-strong, var(--border)) !important;
+  background: var(--auth-card-bg, var(--surface-elevated)) !important;
+  box-shadow: var(--shadow) !important;
+  backdrop-filter: none !important;
+}
+
+:root[data-client-theme] [data-main-fe-card],
+:root[data-client-theme] [data-main-fe-page-title],
+:root[data-client-theme] [data-main-fe-datatable] {
+  border-color: var(--border-strong, var(--border)) !important;
+  background: var(--card-bg, var(--surface-elevated)) !important;
+  color: var(--text) !important;
+  box-shadow: var(--shadow) !important;
+  backdrop-filter: none !important;
+}
+
+:root[data-client-theme] [data-main-fe-page-title] {
+  background: var(--page-title-bg, var(--card-bg, var(--surface-elevated))) !important;
+}
+
+:root[data-client-theme] [data-main-fe-page-title] [data-slot='title'],
+:root[data-client-theme] [data-main-fe-section-title] [data-slot='title'],
+:root[data-client-theme] [data-main-fe-card] [data-slot='card-title'] {
+  color: var(--text-strong) !important;
+}
+
+:root[data-client-theme] [data-main-fe-page-title] [data-slot='subtitle'],
+:root[data-client-theme] [data-main-fe-section-title] [data-slot='subtitle'],
+:root[data-client-theme] [data-main-fe-card-description] {
+  color: var(--muted) !important;
+}
+
+:root[data-client-theme] [data-main-fe-section-title] [data-slot='icon'] {
+  background: var(--section-icon-bg, var(--accent-soft)) !important;
+  color: var(--section-icon-fg, var(--accent)) !important;
+  box-shadow: inset 0 0 0 1px
+    color-mix(in srgb, var(--section-icon-fg, var(--accent)) 14%, var(--border)) !important;
+}
+
+:root[data-client-theme] [data-main-fe-button] {
+  border-color: transparent;
+}
+
+:root[data-client-theme] [data-main-fe-button]:focus-visible {
+  box-shadow: 0 0 0 4px var(--focus-ring) !important;
+}
+
+:root[data-client-theme] [data-main-fe-button][data-variant='create'],
+:root[data-client-theme] [data-main-fe-button][data-variant='default'] {
+  background: var(--button-primary-bg) !important;
+  color: var(--button-primary-fg, #fff) !important;
+  box-shadow: var(--button-primary-shadow) !important;
+}
+
+:root[data-client-theme] [data-main-fe-button][data-variant='confirm'] {
+  background: var(--button-confirm-bg) !important;
+  color: var(--button-confirm-fg, #fff) !important;
+  box-shadow: var(--button-confirm-shadow) !important;
+}
+
+:root[data-client-theme] [data-main-fe-button][data-variant='destructive'] {
+  background: var(--button-destructive-bg) !important;
+  color: var(--button-destructive-fg, #fff) !important;
+  box-shadow: var(--button-destructive-shadow) !important;
+}
+
+:root[data-client-theme] [data-main-fe-button][data-variant='outline'] {
+  border-color: var(--border-strong, var(--border)) !important;
+  background: var(--button-outline-bg, var(--surface-elevated)) !important;
+  color: var(--text) !important;
+  box-shadow: var(--shadow-sm) !important;
+}
+
+:root[data-client-theme] [data-main-fe-button][data-variant='secondary'] {
+  background: var(--button-secondary-bg, var(--surface-strong)) !important;
+  color: var(--text-strong) !important;
+  box-shadow: var(--shadow-sm) !important;
+}
+
+:root[data-client-theme] [data-main-fe-button][data-variant='ghost'] {
+  color: var(--text) !important;
+}
+
+:root[data-client-theme] [data-main-fe-button][data-variant='ghost']:hover {
+  background: var(--button-ghost-hover-bg, var(--surface-strong)) !important;
+}
+
+:root[data-client-theme] [data-main-fe-button][data-variant='link'] {
+  color: var(--accent-strong, var(--accent)) !important;
+}
+
+:root[data-client-theme] [data-main-fe-input] > label,
+:root[data-client-theme] [data-main-fe-combobox] > label,
+:root[data-client-theme] [data-main-fe-date-range] [data-slot='label'],
+:root[data-client-theme] [data-main-fe-date-time] [data-slot='label'],
+:root[data-client-theme] [data-main-fe-date-time] [data-slot='quick-ranges-label'],
+:root[data-client-theme] [data-main-fe-date-time-popup] [data-slot='quick-ranges-label'] {
+  color: var(--text-strong) !important;
+}
+
+:root[data-client-theme] [data-main-fe-input] [data-slot='control'],
+:root[data-client-theme] [data-main-fe-combobox] [data-slot='control'],
+:root[data-client-theme] [data-main-fe-date-range] [data-slot='trigger'],
+:root[data-client-theme] [data-main-fe-date-time] [data-slot='trigger'] {
+  border-color: var(--input-border-main, var(--border)) !important;
+  background: var(--input-bg, var(--surface-elevated)) !important;
+  color: var(--text) !important;
+  box-shadow: var(--shadow-sm) !important;
+  backdrop-filter: none !important;
+}
+
+:root[data-client-theme] [data-main-fe-input] [data-slot='control']::placeholder,
+:root[data-client-theme] [data-main-fe-combobox] [data-slot='control']::placeholder {
+  color: var(--input-placeholder, var(--muted)) !important;
+}
+
+:root[data-client-theme] [data-main-fe-input] [data-slot='control']:hover,
+:root[data-client-theme] [data-main-fe-combobox] [data-slot='control']:hover,
+:root[data-client-theme] [data-main-fe-date-range] [data-slot='trigger']:hover,
+:root[data-client-theme] [data-main-fe-date-time] [data-slot='trigger']:hover {
+  border-color: var(--input-border-hover, var(--border-strong)) !important;
+  background: var(--surface, var(--input-bg, var(--surface-elevated))) !important;
+}
+
+:root[data-client-theme] [data-main-fe-input] [data-slot='control']:focus-visible,
+:root[data-client-theme] [data-main-fe-combobox] [data-slot='control']:focus-visible,
+:root[data-client-theme] [data-main-fe-input] [data-slot='toggle']:focus-visible,
+:root[data-client-theme] [data-main-fe-date-range] [data-slot='trigger']:focus-visible,
+:root[data-client-theme] [data-main-fe-date-time] [data-slot='trigger']:focus-visible {
+  box-shadow: 0 0 0 4px var(--focus-ring) !important;
+}
+
+:root[data-client-theme] [data-main-fe-input] [data-slot='prefix'],
+:root[data-client-theme] [data-main-fe-input] [data-slot='suffix-wrap'],
+:root[data-client-theme] [data-main-fe-combobox] [data-slot='chevron'],
+:root[data-client-theme] [data-main-fe-combobox] [data-slot='clear'] {
+  color: var(--muted) !important;
+}
+
+:root[data-client-theme]
+  :is(
+    [data-main-fe-combobox] [data-slot='dropdown'],
+    [data-main-fe-combobox-popup],
+    [data-main-fe-date-range] [data-slot='panel'],
+    [data-main-fe-date-time] [data-slot='panel'],
+    [data-main-fe-date-time-popup],
+    [data-client-dashboard='page'] [data-slot='modal-panel'],
+    [data-client-models='page'] [data-slot='modal-panel'],
+    [data-client-api-keys='modal'] [data-slot='modal-panel'],
+    [data-client-api-keys='confirm'] [data-slot='modal-panel'],
+    [data-client-request-logs='detail'] [data-slot='modal-panel'],
+    [data-client-credit='modal'] [data-slot='panel']
+  ) {
+  border-color: var(--menu-border, var(--border)) !important;
+  background: var(--menu-surface, var(--surface-elevated)) !important;
+  box-shadow: var(--menu-shadow) !important;
+  backdrop-filter: none !important;
+}
+
+:root[data-client-theme]
+  :is(
+    [data-main-fe-combobox] [data-slot='option'],
+    [data-main-fe-combobox-popup] [data-slot='option']
+  ) {
+  color: var(--text) !important;
+}
+
+:root[data-client-theme]
+  :is(
+    [data-main-fe-combobox] [data-slot='option-description'],
+    [data-main-fe-combobox-popup] [data-slot='option-description'],
+    [data-main-fe-combobox] [data-slot='empty'],
+    [data-main-fe-combobox-popup] [data-slot='empty']
+  ) {
+  color: var(--muted) !important;
+}
+
+:root[data-client-theme]
+  :is(
+    [data-main-fe-combobox] [data-slot='option']:hover,
+    [data-main-fe-combobox] [data-slot='option'][data-highlighted='true'],
+    [data-main-fe-combobox-popup] [data-slot='option']:hover,
+    [data-main-fe-combobox-popup] [data-slot='option'][data-highlighted='true']
+  ) {
+  background: var(--menu-item-hover-bg, var(--surface-strong)) !important;
+  color: var(--text-strong) !important;
+}
+
+:root[data-client-theme] [data-main-fe-tabs] {
+  border-color: var(--border) !important;
+  background: var(--tab-track) !important;
+  box-shadow: inset 0 1px 0 var(--tabs-shadow) !important;
+}
+
+:root[data-client-theme] [data-main-fe-tabs] [data-slot='indicator'] {
+  background: var(--tab-indicator) !important;
+  box-shadow: 0 1px 2px var(--tab-indicator-shadow) !important;
+}
+
+:root[data-client-theme] [data-main-fe-tabs] [data-slot='tab'] {
+  color: var(--tab-text) !important;
+}
+
+:root[data-client-theme] [data-main-fe-tabs] [data-slot='tab'][data-active='true'] {
+  color: var(--tab-text-active) !important;
+}
+
+:root[data-client-theme] [data-main-fe-datatable] [data-slot='sticky-header'],
+:root[data-client-theme] [data-main-fe-datatable] [data-slot='header'],
+:root[data-client-theme] [data-main-fe-datatable] [data-slot='head-row'] {
+  background: var(--table-head-bg) !important;
+  backdrop-filter: none !important;
+}
+
+:root[data-client-theme] [data-main-fe-datatable] [data-slot='sticky-header'] {
+  border-bottom: 1px solid var(--border) !important;
+  box-shadow: 0 12px 24px -20px rgba(15, 23, 42, 0.45) !important;
+}
+
+:root[data-client-theme] [data-main-fe-datatable] th,
+:root[data-client-theme] [data-main-fe-datatable] td {
+  color: var(--text) !important;
+  border-color: var(--border) !important;
+}
+
+:root[data-client-theme] [data-main-fe-datatable] th {
+  background: var(--table-head-bg) !important;
+  color: var(--muted) !important;
+}
+
+:root[data-client-theme] [data-main-fe-datatable] [data-slot='body-row']:hover {
+  background: var(--table-row-hover) !important;
+}
+
+:root[data-client-theme] [data-main-fe-datatable] [data-slot='empty-icon'] {
+  background: var(--empty-icon-bg, var(--accent-soft)) !important;
+  color: var(--empty-icon-fg, var(--accent)) !important;
+  box-shadow: inset 0 0 0 1px
+    color-mix(in srgb, var(--empty-icon-fg, var(--accent)) 14%, var(--border)) !important;
+}
+
+:root[data-client-theme] [data-main-fe-pagination] {
+  border-top-color: var(--border) !important;
+  color: var(--muted) !important;
+}
+
+:root[data-client-theme] [data-main-fe-pagination] [data-slot='page-size'],
+:root[data-client-theme] [data-main-fe-pagination] [data-slot='current'] {
+  color: var(--text) !important;
+}
+
+:root[data-client-theme] [data-main-fe-pagination] [data-slot='page-size-select'],
+:root[data-client-theme] [data-main-fe-pagination] [data-slot='nav-button'] {
+  border-color: var(--border) !important;
+  background: var(--surface) !important;
+  color: var(--text) !important;
+}
+
+:root[data-client-theme] [data-main-fe-pagination] [data-slot='page-size-select']:hover,
+:root[data-client-theme] [data-main-fe-pagination] [data-slot='nav-button']:hover {
+  background: var(--surface-strong) !important;
+}
+
+:root[data-client-theme] [data-main-fe-sidebar] {
+  background: var(--sidebar-bg) !important;
+  color: var(--sidebar-foreground, var(--sidebar-text)) !important;
+  border: 1px solid var(--border) !important;
+  box-shadow: var(--shadow-sm) !important;
+  backdrop-filter: none !important;
+}
+
+:root[data-client-theme] [data-main-fe-sidebar] [data-slot='brand-badge'] {
+  background: var(--brand-badge-bg, rgba(255, 255, 255, 0.14)) !important;
+  color: var(--brand-badge-fg, var(--sidebar-active-text)) !important;
+  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.12) !important;
+}
+
+:root[data-client-theme] [data-main-fe-sidebar] [data-slot='brand-label'] {
+  color: var(--sidebar-brand-label, var(--sidebar-active-text)) !important;
+}
+
+:root[data-client-theme] [data-main-fe-sidebar-item] [data-slot='action'] {
+  color: var(--sidebar-text) !important;
+  background: transparent !important;
+  box-shadow: none !important;
+}
+
+:root[data-client-theme] [data-main-fe-sidebar-item] [data-slot='icon'] {
+  color: var(--sidebar-icon, var(--accent)) !important;
+}
+
+:root[data-client-theme] [data-main-fe-sidebar-item] [data-slot='label'] {
+  color: var(--sidebar-text) !important;
+}
+
+:root[data-client-theme] [data-main-fe-sidebar-item] [data-slot='row'][data-active='true'],
+:root[data-client-theme] [data-main-fe-sidebar-item] [data-slot='row'][data-branch-active='true'] {
+  background: var(--sidebar-active) !important;
+  border: 1px solid var(--sidebar-active-border) !important;
+  box-shadow: none !important;
+}
+
+:root[data-client-theme] [data-main-fe-sidebar-item] [data-slot='row'][data-active='true'] [data-slot='action'],
+:root[data-client-theme] [data-main-fe-sidebar-item] [data-slot='row'][data-active='true'] [data-slot='label'],
+:root[data-client-theme] [data-main-fe-sidebar-item] [data-slot='row'][data-branch-active='true'] [data-slot='action'],
+:root[data-client-theme] [data-main-fe-sidebar-item] [data-slot='row'][data-branch-active='true'] [data-slot='label'] {
+  color: var(--sidebar-active-text) !important;
+}
+
+:root[data-client-theme] [data-main-fe-sidebar-item] [data-slot='row'][data-active='true'] [data-slot='icon'],
+:root[data-client-theme] [data-main-fe-sidebar-item] [data-slot='row'][data-branch-active='true'] [data-slot='icon'] {
+  color: var(--sidebar-icon-active, var(--sidebar-active-text)) !important;
+}
+
+:root[data-client-theme] [data-main-fe-sidebar-item] [data-slot='row']:not([data-active='true']):not([data-branch-active='true']):hover {
+  background: var(--sidebar-hover) !important;
+}
+
+:root[data-client-theme] [data-main-fe-sidebar-item] [data-slot='submenu'] {
+  border-color: var(--sidebar-submenu-border) !important;
+}
+
+:root[data-client-theme] [data-main-fe-date-range] [data-slot='nav-button'],
+:root[data-client-theme]
+  :is([data-main-fe-date-time], [data-main-fe-date-time-popup]) [data-slot='nav-button'],
+:root[data-client-theme] [data-main-fe-date-range] [data-slot='month-select'],
+:root[data-client-theme] [data-main-fe-date-range] [data-slot='year-select'],
+:root[data-client-theme]
+  :is([data-main-fe-date-time], [data-main-fe-date-time-popup]) [data-slot='month-select'],
+:root[data-client-theme]
+  :is([data-main-fe-date-time], [data-main-fe-date-time-popup]) [data-slot='year-select'],
+:root[data-client-theme]
+  :is([data-main-fe-date-time], [data-main-fe-date-time-popup]) [data-slot='time-select'],
+:root[data-client-theme] [data-main-fe-date-range] [data-slot='preview-value'],
+:root[data-client-theme] [data-main-fe-date-range] [data-slot='scroll-select-menu'],
+:root[data-client-theme]
+  :is([data-main-fe-date-time], [data-main-fe-date-time-popup]) [data-slot='scroll-select-menu'] {
+  border-color: var(--border-strong, var(--border)) !important;
+  background: var(--surface, var(--surface-elevated)) !important;
+  color: var(--text) !important;
+  box-shadow: none !important;
+  backdrop-filter: none !important;
+}
+
+:root[data-client-theme] [data-main-fe-date-range] [data-slot='scroll-select-option'],
+:root[data-client-theme]
+  :is([data-main-fe-date-time], [data-main-fe-date-time-popup]) [data-slot='scroll-select-option'],
+:root[data-client-theme]
+  :is([data-main-fe-date-time], [data-main-fe-date-time-popup]) [data-slot='quick-option'] {
+  color: var(--text) !important;
+}
+
+:root[data-client-theme] [data-main-fe-date-range] [data-slot='scroll-select-option'][data-selected='true'],
+:root[data-client-theme]
+  :is([data-main-fe-date-time], [data-main-fe-date-time-popup])
+  [data-slot='scroll-select-option'][data-selected='true'],
+:root[data-client-theme]
+  :is([data-main-fe-date-time], [data-main-fe-date-time-popup])
+  [data-slot='quick-option'][data-selected='true'] {
+  background: var(--button-primary-bg) !important;
+  color: #fff !important;
+}
+
+:root[data-client-theme] [data-main-fe-date-range] [data-slot='scroll-select-option']:hover,
+:root[data-client-theme]
+  :is([data-main-fe-date-time], [data-main-fe-date-time-popup]) [data-slot='scroll-select-option']:hover,
+:root[data-client-theme]
+  :is([data-main-fe-date-time], [data-main-fe-date-time-popup]) [data-slot='quick-option']:hover,
+:root[data-client-theme]
+  :is([data-main-fe-date-time], [data-main-fe-date-time-popup]) [data-slot='quick-clear']:hover,
+:root[data-client-theme] [data-main-fe-date-range] [data-slot='nav-button']:hover,
+:root[data-client-theme]
+  :is([data-main-fe-date-time], [data-main-fe-date-time-popup]) [data-slot='nav-button']:hover,
+:root[data-client-theme] [data-main-fe-date-range] [data-slot='preview-clear']:hover {
+  background: var(--menu-item-hover-bg, var(--surface-strong)) !important;
+  color: var(--text-strong) !important;
+}
+
+:root[data-client-theme] [data-main-fe-date-range] [data-slot='weekday'],
+:root[data-client-theme]
+  :is([data-main-fe-date-time], [data-main-fe-date-time-popup]) [data-slot='weekday'] {
+  color: var(--muted) !important;
+}
+
+:root[data-client-theme] [data-main-fe-date-range] [data-slot='day'],
+:root[data-client-theme]
+  :is([data-main-fe-date-time], [data-main-fe-date-time-popup]) [data-slot='day'] {
+  color: var(--text) !important;
+}
+
+:root[data-client-theme] [data-main-fe-date-range] [data-slot='day'][data-in-month='false'],
+:root[data-client-theme]
+  :is([data-main-fe-date-time], [data-main-fe-date-time-popup]) [data-slot='day'][data-in-month='false'] {
+  color: color-mix(in srgb, var(--muted) 72%, transparent) !important;
+}
+
+:root[data-client-theme] [data-main-fe-date-range] [data-slot='day'][data-in-range='true'] {
+  background: var(--accent-soft) !important;
+  color: var(--accent) !important;
+}
+
+:root[data-client-theme] [data-main-fe-date-range] [data-slot='day'][data-selected='true'],
+:root[data-client-theme]
+  :is([data-main-fe-date-time], [data-main-fe-date-time-popup]) [data-slot='day'][data-selected='true'],
+:root[data-client-theme] [data-main-fe-date-range] [data-slot='confirm-button'],
+:root[data-client-theme]
+  :is([data-main-fe-date-time], [data-main-fe-date-time-popup]) [data-slot='confirm-button'] {
+  background: var(--button-primary-bg) !important;
+  color: var(--button-primary-fg, #fff) !important;
+  box-shadow: var(--button-primary-shadow) !important;
+}
+
+:root[data-client-theme] [data-main-fe-date-range] [data-slot='clear-button'],
+:root[data-client-theme]
+  :is([data-main-fe-date-time], [data-main-fe-date-time-popup]) [data-slot='clear-button'] {
+  background: var(--button-secondary-bg, var(--surface-strong)) !important;
+  color: var(--text-strong) !important;
+}
+
+:root[data-client-theme] [data-main-fe-stat-card][data-tone='sky'] {
+  border-color: var(--border) !important;
+  background: var(--stat-sky-bg) !important;
+}
+
+:root[data-client-theme] [data-main-fe-stat-card][data-tone='emerald'] {
+  border-color: var(--border) !important;
+  background: var(--stat-emerald-bg) !important;
+}
+
+:root[data-client-theme] [data-main-fe-stat-card][data-tone='violet'] {
+  border-color: var(--border) !important;
+  background: var(--stat-violet-bg) !important;
+}
+
+:root[data-client-theme] [data-main-fe-stat-card][data-tone='rose'] {
+  border-color: var(--border) !important;
+  background: var(--stat-rose-bg) !important;
+}
+
+:root[data-client-theme] [data-main-fe-stat-card] [data-slot='label'] {
+  color: var(--muted) !important;
+}
+
+:root[data-client-theme] [data-main-fe-stat-card] [data-slot='value'] {
+  color: var(--text-strong) !important;
+}
+
+:root[data-client-theme] [data-main-fe-stat-card] [data-slot='icon'] {
+  background: var(--stat-icon-bg, var(--surface-elevated)) !important;
+  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.56) !important;
+}
+
+:root[data-client-theme] [data-main-fe-stat-card][data-tone='sky'] [data-slot='icon'] {
+  color: var(--icon-sky, var(--tone-sky)) !important;
+}
+
+:root[data-client-theme] [data-main-fe-stat-card][data-tone='emerald'] [data-slot='icon'] {
+  color: var(--icon-emerald, var(--tone-emerald)) !important;
+}
+
+:root[data-client-theme] [data-main-fe-stat-card][data-tone='violet'] [data-slot='icon'] {
+  color: var(--icon-violet, var(--tone-violet)) !important;
+}
+
+:root[data-client-theme] [data-main-fe-stat-card][data-tone='rose'] [data-slot='icon'] {
+  color: var(--icon-rose, var(--tone-rose)) !important;
+}
+
+:root[data-client-theme] [data-main-fe-switch] [data-slot='track'] {
+  border-color: var(--border-strong, var(--border)) !important;
+  background: var(--switch-track-bg) !important;
+}
+
+:root[data-client-theme] [data-main-fe-switch] input:checked + [data-slot='track'] {
+  border-color: var(--accent-strong, var(--accent)) !important;
+  background: var(--switch-active-bg) !important;
+}
+
+:root[data-client-theme] [data-client-home='test-api'] [data-slot='base-url'],
+:root[data-client-theme] [data-client-models='model-card'] [data-slot='pricing'],
+:root[data-client-theme] [data-client-home='usage-overview'] [data-slot='model-row'],
+:root[data-client-theme] [data-client-request-logs='detail'] [data-slot='detail-cell'],
+:root[data-client-theme] [data-client-dashboard='page'] [data-slot='filters'],
+:root[data-client-theme] [data-client-dashboard='page'] [data-slot='chart-card'],
+:root[data-client-theme] [data-client-models='filters'],
+:root[data-client-theme] [data-client-models='page'] [data-slot='empty-state'],
+:root[data-client-theme] [data-client-api-keys='page'] [data-slot='toolbar'],
+:root[data-client-theme] [data-client-request-logs='filters'],
+:root[data-client-theme] [data-client-credit='history'] [data-slot='filters'],
+:root[data-client-theme] [data-client-credit='topup'] [data-slot='redeem-panel'],
+:root[data-client-theme] [data-client-credit='topup'] [data-slot='notice'],
+:root[data-client-theme] [data-client-credit='overview'] [data-slot='stats-shell'],
+:root[data-client-theme] [data-client-models='model-card'] {
+  border-color: var(--border) !important;
+  background: var(--card-bg, var(--surface-elevated)) !important;
+  box-shadow: var(--shadow) !important;
+}
+
+:root[data-client-theme] [data-client-home='usage-overview'] [data-slot='model-row']:hover,
+:root[data-client-theme] [data-client-models='model-card']:hover {
+  border-color: var(--border-strong, var(--border)) !important;
+  background: var(--detail-cell-hover-bg, var(--surface-strong)) !important;
+  box-shadow: var(--shadow) !important;
+}
+
+:root[data-client-theme] [data-client-models='model-card'] [data-slot='pricing-icon'] {
+  color: var(--tone-emerald, var(--accent)) !important;
+}
+
+:root[data-client-theme] [data-client-api-keys='page'] [data-slot='toolbar'] {
+  border-color: transparent !important;
+  background: transparent !important;
+  box-shadow: none !important;
+  backdrop-filter: none !important;
+}
+
+:root[data-client-theme] [data-client-home='test-api'] [data-slot='base-url-value'] {
+  color: var(--muted) !important;
+}
+
+:root[data-client-theme] [data-client-home='test-api'] [data-slot='base-url-copy'] {
+  color: var(--accent) !important;
+}
+
+:root[data-client-theme] [data-client-home='test-api'] [data-slot='base-url-copy']:hover {
+  color: var(--accent-strong, var(--accent)) !important;
+}
+
+:root[data-client-theme] [data-client-home='test-api'] [data-slot='code-card'] {
+  border-color: var(--border) !important;
+  background: var(--code-card-bg) !important;
+}
+
+:root[data-client-theme] [data-client-home='test-api'] [data-slot='code-panel'] {
+  border-color: var(--border) !important;
+  background: var(--code-panel-bg) !important;
+  box-shadow: none !important;
+}
+
+:root[data-client-theme] [data-client-home='test-api'] [data-slot='code-pre'] {
+  color: #f8fafc !important;
+}
+
+:root[data-client-theme] [data-client-home='test-api'] [data-slot='copy-code'] {
+  color: rgba(248, 250, 252, 0.82) !important;
+}
+
+:root[data-client-theme] [data-client-home='test-api'] [data-slot='copy-code']:hover {
+  background: var(--code-copy-hover-bg) !important;
+  color: #ffffff !important;
+}
+
+:root[data-client-theme] [data-client-models='page'] [data-slot='results-badge'] {
+  border-color: color-mix(in srgb, var(--accent) 18%, var(--border)) !important;
+  background: var(--results-badge-bg) !important;
+  color: var(--accent) !important;
+}
+
+:root[data-client-theme] [data-client-models='page'] [data-slot='empty-icon'] {
+  background: var(--empty-icon-bg, var(--accent-soft)) !important;
+  color: var(--empty-icon-fg, var(--accent)) !important;
+  box-shadow: inset 0 0 0 1px
+    color-mix(in srgb, var(--empty-icon-fg, var(--accent)) 14%, var(--border)) !important;
+}
+
+:root[data-client-theme] [data-client-models='page'] [data-slot='empty-title'] {
+  color: var(--text-strong) !important;
+}
+
+:root[data-client-theme] [data-client-api-keys='page'] [data-slot='hover-tooltip'],
+:root[data-client-theme] [data-client-api-keys='action-tooltip'] {
+  border: 1px solid var(--menu-border, var(--border)) !important;
+  background: var(--menu-surface, var(--surface-elevated)) !important;
+  color: var(--text) !important;
+  box-shadow: var(--menu-shadow) !important;
+}
+
+:root[data-client-theme] [data-client-api-keys='action-trigger'] {
+  color: var(--muted) !important;
+}
+
+:root[data-client-theme] [data-client-api-keys='action-trigger']:hover,
+:root[data-client-theme] [data-client-api-keys='action-trigger']:focus-visible {
+  background: var(--menu-item-hover-bg, var(--surface-strong)) !important;
+  color: var(--text-strong) !important;
+}
+
+:root[data-client-theme] [data-client-api-keys='action-menu'] {
+  border-color: var(--menu-border, var(--border)) !important;
+  background: var(--menu-surface, var(--surface-elevated)) !important;
+  box-shadow: var(--menu-shadow) !important;
+}
+
+:root[data-client-theme] [data-client-api-keys='action-menu'] [data-slot='action-item'] {
+  color: var(--text) !important;
+}
+
+:root[data-client-theme] [data-client-api-keys='action-menu'] [data-slot='action-item'][data-tone='danger'] {
+  color: var(--danger, hsl(var(--tw-destructive))) !important;
+}
+
+:root[data-client-theme] [data-client-api-keys='action-menu'] [data-slot='action-item']:not([data-disabled='true']):hover {
+  background: var(--menu-item-hover-bg, var(--surface-strong)) !important;
+  color: var(--text-strong) !important;
+}
+
+:root[data-client-theme] [data-client-api-keys='action-menu'] [data-slot='action-item'][data-tone='danger']:not([data-disabled='true']):hover {
+  background: var(--danger-soft, var(--menu-item-hover-bg, var(--surface-strong))) !important;
+  color: var(--danger, hsl(var(--tw-destructive))) !important;
+}
+
+:root[data-client-theme] [data-client-dashboard='page'] [data-slot='modal-overlay'],
+:root[data-client-theme] [data-client-models='page'] [data-slot='modal-overlay'],
+:root[data-client-theme] [data-client-api-keys='modal'] [data-slot='modal-overlay'],
+:root[data-client-theme] [data-client-api-keys='confirm'] [data-slot='modal-overlay'],
+:root[data-client-theme] [data-client-request-logs='detail'] [data-slot='modal-overlay'],
+:root[data-client-theme] [data-client-credit='modal'][data-slot='overlay'] {
+  background: var(--public-overlay-bg) !important;
+  backdrop-filter: none !important;
+}
+
+:root[data-client-theme] [data-client-credit='wallet'] [data-slot='tabs'] {
+  border-color: var(--border) !important;
+  background: var(--card-bg, var(--surface-elevated)) !important;
+  box-shadow: var(--shadow-sm) !important;
+}
+
+:root[data-client-theme] [data-client-credit='wallet'] [data-slot='tab'] {
+  color: var(--text) !important;
+  background: transparent !important;
+  box-shadow: none !important;
+}
+
+:root[data-client-theme] [data-client-credit='wallet'] [data-slot='tab'][data-active='true'],
+:root[data-client-theme] [data-client-credit='overview'] [data-slot='topup-action'],
+:root[data-client-theme] [data-client-credit='topup'] [data-slot='coupon-submit'] {
+  background: var(--button-primary-bg) !important;
+  color: var(--button-primary-fg, #fff) !important;
+  box-shadow: var(--button-primary-shadow) !important;
+}
+
+:root[data-client-theme] [data-client-credit='wallet'] [data-slot='tab']:not([data-active='true']):hover {
+  background: var(--button-ghost-hover-bg, var(--surface-strong)) !important;
+  color: var(--text-strong) !important;
+}
+
+:root[data-client-theme] [data-client-credit='campaign-form'] [data-slot='cancel-button'],
+:root[data-client-theme] [data-client-credit='coupon-form'] [data-slot='cancel-button'],
+:root[data-client-theme] [data-client-credit='modal'] [data-slot='close-button'] {
+  border-color: var(--border-strong, var(--border)) !important;
+  background: var(--button-outline-bg, var(--surface-elevated)) !important;
+  color: var(--text) !important;
+  box-shadow: var(--shadow-sm) !important;
+}
+
+:root[data-client-theme] [data-client-credit='campaign-form'] [data-slot='cancel-button']:hover,
+:root[data-client-theme] [data-client-credit='coupon-form'] [data-slot='cancel-button']:hover,
+:root[data-client-theme] [data-client-credit='modal'] [data-slot='close-button']:hover {
+  background: var(--button-ghost-hover-bg, var(--surface-strong)) !important;
+  color: var(--text-strong) !important;
+}
+
+:root[data-client-theme] [data-client-credit='campaign-form'] [data-slot='submit-button'],
+:root[data-client-theme] [data-client-credit='coupon-form'] [data-slot='submit-button'] {
+  background: var(--button-primary-bg) !important;
+  color: var(--button-primary-fg, #fff) !important;
+  box-shadow: var(--button-primary-shadow) !important;
+}
+
+:root[data-client-theme] [data-client-credit='overview'] [data-slot='balance-card'] {
+  border-color: var(--border) !important;
+  background: var(--stat-rose-bg) !important;
+  box-shadow: var(--shadow) !important;
+}
+
+:root[data-client-theme] [data-client-credit='overview'] [data-slot='spending-card'] {
+  border-color: color-mix(in srgb, var(--tone-sky) 18%, var(--border)) !important;
+  background: var(--spending-card-bg) !important;
+  box-shadow: var(--shadow) !important;
+}
+
+:root[data-client-theme] [data-client-credit='overview'] [data-slot='stat-item'] {
+  border-color: var(--border) !important;
+  background: var(--surface-strong) !important;
+}
+
+:root[data-client-theme] [data-client-credit='topup'] [data-slot='coupon-input'] {
+  border-color: var(--input-border-main, var(--border)) !important;
+  background: var(--input-bg, var(--surface-elevated)) !important;
+  color: var(--text) !important;
+}
+
+:root[data-client-theme] [data-client-theme-settings] [data-slot='theme-option'] {
+  border-color: var(--border-strong, var(--border)) !important;
+  background: var(--card-bg, var(--surface-elevated)) !important;
+  box-shadow: var(--shadow-sm) !important;
+  backdrop-filter: none !important;
+}
+
+:root[data-client-theme] [data-client-theme-settings] [data-slot='theme-option'][aria-pressed='true'] {
+  border-color: color-mix(in srgb, var(--accent) 40%, var(--border-strong, var(--border))) !important;
+  background: color-mix(in srgb, var(--card-bg, var(--surface-elevated)) 88%, var(--accent-soft) 12%) !important;
+  box-shadow: var(--shadow) !important;
+}
+
+:root[data-client-theme] [data-client-theme-settings] [data-slot='theme-option']:hover {
+  border-color: var(--border-strong, var(--border)) !important;
+}
+
+:root[data-client-theme] [data-client-theme-settings] [data-slot='theme-option']:focus-visible {
+  box-shadow:
+    0 0 0 4px var(--focus-ring),
+    var(--shadow-sm) !important;
+}
+
+:root[data-client-theme] [data-client-theme-settings] [data-slot='theme-preview'] {
+  border-color: color-mix(in srgb, var(--border-strong, var(--border)) 80%, white 20%) !important;
+  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.22) !important;
+}
+
+:root[data-client-theme] [data-client-theme-settings] [data-slot='theme-label'] {
+  color: var(--text-strong) !important;
+}
+
+:root[data-client-theme] [data-client-theme-settings] [data-slot='theme-description'] {
+  color: var(--muted) !important;
+}
+
+:root[data-client-theme] [data-client-theme-settings] [data-slot='theme-check'] {
+  background: var(--button-primary-bg, var(--accent)) !important;
+  color: var(--button-primary-fg, #fff) !important;
+  box-shadow: var(--button-primary-shadow, var(--shadow-sm)) !important;
+}
+
+:root[data-client-theme='siraya-vii-light'] [data-client-shell='header']:not(.bg-transparent) {
+  background: var(--header-glass, var(--surface-elevated)) !important;
+  border: 1px solid var(--border-strong, var(--border)) !important;
+  box-shadow: var(--shadow-sm) !important;
+  backdrop-filter: none !important;
+}
+
+:root[data-client-theme='siraya-vii-light'] [data-client-shell='header'].bg-transparent {
+  background: transparent !important;
+  border: none !important;
+  box-shadow: none !important;
+  backdrop-filter: none !important;
+}
+
+:root[data-client-theme='siraya-vii-light'] [data-client-shell='header'] [data-slot='avatar'] {
+  box-shadow: none !important;
+}
+
+:root[data-client-theme='siraya-vii-light']
+  [data-client-theme-settings]
+  [data-slot='theme-option'][aria-pressed='true'] {
+  border-color: transparent !important;
+}
+
+/* Normalize hard-coded slate utilities so custom themes stay readable. */
+
+:root[data-client-theme] .text-slate-900,
+:root[data-client-theme] .text-slate-800,
+:root[data-client-theme] .text-slate-700 {
+  color: var(--text-strong) !important;
+}
+
+:root[data-client-theme] .text-slate-600,
+:root[data-client-theme] .text-slate-500,
+:root[data-client-theme] .text-slate-400,
+:root[data-client-theme] .text-slate-300 {
+  color: var(--muted) !important;
+}
+
+:root[data-client-theme] .bg-white,
+:root[data-client-theme] .bg-white\/95,
+:root[data-client-theme] .bg-white\/90,
+:root[data-client-theme] .bg-white\/80 {
+  background-color: var(--surface-elevated) !important;
+}
+
+:root[data-client-theme] .bg-slate-100,
+:root[data-client-theme] .bg-slate-100\/95,
+:root[data-client-theme] .bg-slate-100\/90,
+:root[data-client-theme] .bg-slate-100\/80,
+:root[data-client-theme] .bg-slate-50,
+:root[data-client-theme] .bg-slate-50\/90,
+:root[data-client-theme] .bg-slate-50\/80 {
+  background-color: var(--surface-strong) !important;
+}
+
+:root[data-client-theme] .border-slate-200,
+:root[data-client-theme] .border-slate-200\/80,
+:root[data-client-theme] .border-slate-200\/70,
+:root[data-client-theme] .border-slate-100,
+:root[data-client-theme] .border-slate-100\/80 {
+  border-color: var(--border) !important;
+}
+
+:root[data-ui-color-mode='dark'][data-client-theme] .dark\:text-slate-100,
+:root[data-ui-color-mode='dark'][data-client-theme] .dark\:text-slate-200 {
+  color: var(--text-strong) !important;
+}
+
+:root[data-ui-color-mode='dark'][data-client-theme] .dark\:text-slate-300,
+:root[data-ui-color-mode='dark'][data-client-theme] .dark\:text-slate-400,
+:root[data-ui-color-mode='dark'][data-client-theme] .dark\:text-slate-500 {
+  color: var(--muted) !important;
+}
+
+:root[data-ui-color-mode='dark'][data-client-theme] .dark\:bg-slate-950,
+:root[data-ui-color-mode='dark'][data-client-theme] .dark\:bg-slate-950\/40,
+:root[data-ui-color-mode='dark'][data-client-theme] .dark\:bg-slate-900,
+:root[data-ui-color-mode='dark'][data-client-theme] .dark\:bg-slate-900\/95,
+:root[data-ui-color-mode='dark'][data-client-theme] .dark\:bg-slate-900\/80,
+:root[data-ui-color-mode='dark'][data-client-theme] .dark\:bg-slate-900\/70,
+:root[data-ui-color-mode='dark'][data-client-theme] .dark\:bg-slate-900\/60 {
+  background-color: var(--surface-elevated) !important;
+}
+
+:root[data-ui-color-mode='dark'][data-client-theme] .dark\:bg-slate-800,
+:root[data-ui-color-mode='dark'][data-client-theme] .dark\:bg-slate-800\/70,
+:root[data-ui-color-mode='dark'][data-client-theme] .dark\:bg-slate-800\/60,
+:root[data-ui-color-mode='dark'][data-client-theme] .dark\:bg-slate-800\/40 {
+  background-color: var(--surface-strong) !important;
+}
+
+:root[data-ui-color-mode='dark'][data-client-theme] .dark\:border-slate-800\/80,
+:root[data-ui-color-mode='dark'][data-client-theme] .dark\:border-slate-800\/70,
+:root[data-ui-color-mode='dark'][data-client-theme] .dark\:border-slate-800\/60,
+:root[data-ui-color-mode='dark'][data-client-theme] .dark\:border-slate-700\/80,
+:root[data-ui-color-mode='dark'][data-client-theme] .dark\:border-slate-700\/70,
+:root[data-ui-color-mode='dark'][data-client-theme] .dark\:border-slate-700\/60 {
+  border-color: var(--border) !important;
+}