@lucasvu/scope-ui 0.1.0 → 0.1.1

package/dist/themes/theme-ui-new-main-fe-sunset.css

@@ -0,0 +1,1316 @@
+@import url('https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:wght@500;600;700;800&family=IBM+Plex+Mono:wght@400;500;600&family=Public+Sans:wght@400;500;600;700;800&display=swap');
+
+/* Siraya brand system theme
+   Primary axis: Fire Brick / Tiger / Asphalt
+   Secondary accents: Canary / Amethyst / Cobalt
+*/
+
+:root[data-client-theme='siraya-brand'] {
+  color-scheme: light;
+  --brand-tiger: #e07458;
+  --brand-fire-brick: #c94f31;
+  --brand-asphalt: #1f2940;
+  --brand-cobalt: #5f738d;
+  --brand-amethyst: #d97d67;
+  --brand-canary: #b8893b;
+  --brand-moon-spot: #8e7771;
+  --brand-lemonade: #efc4ba;
+  --brand-blush: #f4e3dd;
+  --brand-champagne: #fdf8f5;
+  --brand-dolphin: #cfb8b1;
+  --brand-smoke: #e7d7d1;
+  --brand-silver: #f2ebe8;
+
+  --font-family-base: 'Public Sans', 'Noto Sans', 'Segoe UI', 'Helvetica Neue',
+    sans-serif;
+  --font-family-heading: 'Bricolage Grotesque', 'Public Sans', 'Noto Sans',
+    'Segoe UI', 'Helvetica Neue', sans-serif;
+  --font-family-mono: 'IBM Plex Mono', 'SFMono-Regular', Menlo, monospace;
+
+  --bg: #f7f7f6;
+  --surface: #ffffff;
+  --surface-strong: #f5f5f4;
+  --surface-elevated: #ffffff;
+  --grey: #f3f3f2;
+  --grey-strong: #e4e1de;
+  --border: #ddd6d1;
+  --border-strong: #ccc2bc;
+
+  --text: #342927;
+  --text-strong: #1d1412;
+  --muted: #6c615d;
+  --foreground: var(--text);
+  --muted-foreground: var(--muted);
+
+  --accent: #c94f31;
+  --accent-soft: rgba(201, 79, 49, 0.16);
+  --accent-strong: #e07458;
+  --accent-2: #5f738d;
+  --danger: #d95d55;
+  --danger-soft: rgba(217, 93, 85, 0.12);
+  --success-strong: #b8893b;
+  --success-soft: rgba(235, 182, 88, 0.16);
+  --info: #5f738d;
+  --info-soft: rgba(95, 115, 141, 0.14);
+
+  --shadow: 0 10px 24px rgba(32, 23, 19, 0.08);
+  --shadow-sm: 0 4px 12px rgba(32, 23, 19, 0.05);
+  --menu-shadow: 0 14px 32px rgba(32, 23, 19, 0.12);
+  --focus-ring: rgba(201, 79, 49, 0.24);
+
+  --confirm: 45 100% 50%;
+  --confirm-foreground: 240 2% 10%;
+
+  --tw-background: 30 10% 98%;
+  --tw-foreground: 14 17% 15%;
+  --tw-card: 0 0% 100%;
+  --tw-card-foreground: 14 17% 15%;
+  --tw-popover: 0 0% 100%;
+  --tw-popover-foreground: 14 17% 15%;
+  --tw-primary: 10 80% 64%;
+  --tw-primary-foreground: 0 0% 100%;
+  --tw-secondary: 24 10% 93%;
+  --tw-secondary-foreground: 14 17% 15%;
+  --tw-muted: 28 8% 95%;
+  --tw-muted-foreground: 20 8% 40%;
+  --tw-accent: 10 85% 62%;
+  --tw-accent-foreground: 0 0% 100%;
+  --tw-destructive: 355 58% 55%;
+  --tw-destructive-foreground: 0 0% 100%;
+  --tw-border: 24 15% 85%;
+  --tw-input: 24 15% 85%;
+  --tw-ring: 10 80% 64%;
+  --tw-success: 45 100% 50%;
+
+  --primary: 10 80% 64%;
+  --primary-foreground: 0 0% 100%;
+  --primary-grad-from: 13 82% 72%;
+  --primary-grad-to: 10 80% 64%;
+  --primary-ring: 10 80% 64%;
+
+  --input-bg: #ffffff;
+  --input-border-main: #d9cfca;
+  --input-border-hover: #b7a8a1;
+  --input-border-focus: var(--accent);
+  --input-placeholder: #9f908b;
+  --input-error: var(--danger);
+  --input-success: var(--success-strong);
+
+  --table-head-bg: #f6f5f4;
+  --table-row-hover: #faf9f8;
+
+  --tab-track: #f1f2f3;
+  --tab-indicator: #ffffff;
+  --tab-text: #6c615d;
+  --tab-text-active: #1d1412;
+
+  --menu-surface: #ffffff;
+  --menu-border: #e7e1dc;
+  --header-glass: #ffffff;
+  --header-text: #1d1412;
+
+  --shell-main-bg: #f7f7f6;
+  --shell-hero-bg: linear-gradient(135deg, #c95c40 0%, #da7b60 55%, #e9aa97 100%);
+  --public-overlay-bg: rgba(50, 34, 30, 0.56);
+  --auth-card-bg: #ffffff;
+  --card-bg: #ffffff;
+  --page-title-bg: #ffffff;
+  --section-icon-bg: #f8e7e1;
+  --avatar-bg: #f8e7e1;
+  --menu-item-hover-bg: #f5f5f4;
+  --menu-item-active-bg: #f1f2f3;
+
+  --sidebar-bg: #ffffff;
+  --sidebar-text: #342927;
+  --sidebar-foreground: #342927;
+  --sidebar-active-text: #ffffff;
+  --sidebar-muted: rgba(52, 41, 39, 0.74);
+  --sidebar-hover: #f5f5f4;
+  --sidebar-active: #cf6244;
+  --sidebar-divider: rgba(29, 20, 18, 0.06);
+  --sidebar-submenu-border: #ece7e3;
+  --sidebar-brand-label: #1d1412;
+  --brand-badge-bg: #f8e7e1;
+  --brand-badge-fg: #c94f31;
+
+  --shell-hero-from: #c95c40;
+  --shell-hero-mid: #da7b60;
+  --shell-hero-to: #e9aa97;
+
+  --button-primary-bg: #c94f31;
+  --button-primary-shadow: 0 2px 0 rgba(118, 38, 21, 0.12);
+  --button-confirm-bg: #b8893b;
+  --button-confirm-shadow: 0 2px 0 rgba(103, 74, 21, 0.12);
+  --button-destructive-bg: #d95d55;
+  --button-destructive-shadow: 0 2px 0 rgba(120, 34, 41, 0.12);
+  --button-outline-bg: #ffffff;
+  --button-secondary-bg: #f2f3f4;
+  --button-ghost-hover-bg: #f5f5f4;
+
+  --datatable-bg: #ffffff;
+  --empty-icon-bg: #f8e7e1;
+  --tabs-shadow: rgba(29, 20, 18, 0.04);
+  --tab-indicator-shadow: rgba(29, 20, 18, 0.08);
+
+  --stat-sky-bg: #edf3f8;
+  --stat-emerald-bg: #f3ead6;
+  --stat-violet-bg: #f7e9e4;
+  --stat-rose-bg: #f9e2dc;
+  --stat-icon-bg: #ffffff;
+
+  --switch-track-bg: #ebe7e3;
+  --switch-active-bg: #c94f31;
+
+  --detail-cell-bg: #ffffff;
+  --detail-cell-hover-bg: #faf9f8;
+  --code-card-bg: #ffffff;
+  --code-panel-bg: #1f2940;
+  --code-copy-hover-bg: #33405e;
+  --results-badge-bg: #f8e7e1;
+  --spending-card-bg: #edf3f8;
+  --message-success-bg: #f3ead6;
+  --message-error-bg: #fbe8e3;
+
+  --balance-value-color: #8a6425;
+  --spending-value-color: #445b76;
+  --success-text: #7a5a22;
+  --sidebar-active-border: #c94f31;
+
+  --tone-emerald: #b8893b;
+  --tone-emerald-soft: rgba(235, 182, 88, 0.14);
+  --tone-sky: #5f738d;
+  --tone-sky-soft: rgba(95, 115, 141, 0.14);
+  --tone-violet: #d97d67;
+  --tone-violet-soft: rgba(239, 154, 135, 0.14);
+  --tone-rose: #c94f31;
+  --tone-rose-soft: rgba(240, 100, 74, 0.14);
+}
+
+:root[data-ui-color-mode='dark'][data-client-theme='siraya-brand'] {
+  color-scheme: dark;
+  --brand-asphalt: #11161e;
+  --brand-cobalt: #8c9daf;
+  --brand-amethyst: #7b8da1;
+  --brand-moon-spot: #a68b86;
+  --brand-dolphin: #8d7470;
+
+  --bg: #0b1016;
+  --surface: #151c24;
+  --surface-strong: #1b232f;
+  --surface-elevated: #253140;
+  --grey: #10161d;
+  --grey-strong: #2d3948;
+  --border: #2b3642;
+  --border-strong: #3c4a5b;
+
+  --text: #edf2f7;
+  --text-strong: #ffffff;
+  --muted: #a6b0bc;
+
+  --accent: #e76d4c;
+  --accent-soft: rgba(231, 109, 76, 0.18);
+  --accent-strong: #ff946e;
+  --accent-2: #8c9daf;
+  --danger: #ef6f68;
+  --danger-soft: rgba(255, 111, 124, 0.18);
+  --success-strong: #c7933f;
+  --success-soft: rgba(242, 198, 103, 0.18);
+  --info: #8c9daf;
+  --info-soft: rgba(127, 148, 171, 0.18);
+
+  --shadow: 0 24px 54px -28px rgba(0, 0, 0, 0.72);
+  --shadow-sm: 0 16px 34px -24px rgba(0, 0, 0, 0.58);
+  --menu-shadow: 0 28px 58px -28px rgba(0, 0, 0, 0.7);
+  --focus-ring: rgba(231, 109, 76, 0.24);
+
+  --confirm: 45 100% 56%;
+  --confirm-foreground: 240 3% 10%;
+
+  --tw-background: 219 27% 7%;
+  --tw-foreground: 210 30% 96%;
+  --tw-card: 215 24% 14%;
+  --tw-card-foreground: 210 30% 96%;
+  --tw-popover: 215 24% 14%;
+  --tw-popover-foreground: 210 30% 96%;
+  --tw-primary: 13 73% 58%;
+  --tw-primary-foreground: 0 0% 100%;
+  --tw-secondary: 214 18% 63%;
+  --tw-secondary-foreground: 0 0% 100%;
+  --tw-muted: 217 24% 16%;
+  --tw-muted-foreground: 215 14% 74%;
+  --tw-accent: 14 92% 66%;
+  --tw-accent-foreground: 0 0% 100%;
+  --tw-destructive: 354 87% 70%;
+  --tw-destructive-foreground: 0 0% 100%;
+  --tw-border: 215 22% 24%;
+  --tw-input: 215 22% 24%;
+  --tw-ring: 13 73% 58%;
+  --tw-success: 45 100% 56%;
+
+  --primary: 13 73% 58%;
+  --primary-foreground: 0 0% 100%;
+  --primary-grad-from: 13 73% 58%;
+  --primary-grad-to: 13 73% 58%;
+  --primary-ring: 13 73% 58%;
+
+  --input-bg: #222d39;
+  --input-border-main: #3a4656;
+  --input-border-hover: #4f5f72;
+  --input-placeholder: #8b97a7;
+
+  --table-head-bg: #202a36;
+  --table-row-hover: #25303c;
+
+  --tab-track: #141c25;
+  --tab-indicator: #2c3846;
+  --tab-text: #9eabb8;
+  --tab-text-active: #ffffff;
+
+  --menu-surface: #161f2a;
+  --menu-border: #2e3a48;
+  --header-glass: #161f2a;
+  --header-text: #f5f7fb;
+
+  --shell-main-bg: #0b1016;
+  --shell-hero-bg: #151d28;
+  --public-overlay-bg: rgba(11, 16, 22, 0.78);
+  --auth-card-bg: #18212d;
+  --card-bg: #1f2a37;
+  --page-title-bg: #273544;
+  --section-icon-bg: #2a2321;
+  --avatar-bg: #202b38;
+  --menu-item-hover-bg: #25313f;
+  --menu-item-active-bg: #314051;
+
+  --sidebar-bg: #121923;
+  --sidebar-text: #dde5ef;
+  --sidebar-foreground: #dde5ef;
+  --sidebar-active-text: #ffffff;
+  --sidebar-muted: #98a5b4;
+  --sidebar-hover: #1a2430;
+  --sidebar-active: #d86345;
+  --sidebar-divider: #24303c;
+  --sidebar-submenu-border: #2d3947;
+  --sidebar-brand-label: #ffffff;
+  --brand-badge-bg: rgba(231, 109, 76, 0.16);
+  --brand-badge-fg: #ffd6ca;
+
+  --button-primary-bg: #ff7c58;
+  --button-primary-shadow: 0 16px 32px -18px rgba(255, 124, 88, 0.55);
+  --button-confirm-bg: #c7933f;
+  --button-confirm-shadow: 0 14px 28px -18px rgba(199, 147, 63, 0.42);
+  --button-destructive-bg: #ff6f7c;
+  --button-destructive-shadow: 0 10px 24px -14px rgba(255, 111, 124, 0.42);
+  --button-outline-bg: #212c39;
+  --button-secondary-bg: #273342;
+  --button-ghost-hover-bg: #25313f;
+
+  --datatable-bg: #1b2430;
+  --empty-icon-bg: #2d3948;
+  --tabs-shadow: rgba(0, 0, 0, 0.24);
+  --tab-indicator-shadow: rgba(0, 0, 0, 0.28);
+
+  --stat-sky-bg: linear-gradient(180deg, #233140 0%, #1f2a37 100%);
+  --stat-emerald-bg: linear-gradient(180deg, #30291f 0%, #262118 100%);
+  --stat-violet-bg: linear-gradient(180deg, #2a3140 0%, #222c39 100%);
+  --stat-rose-bg: linear-gradient(180deg, #322621 0%, #291f1b 100%);
+  --stat-icon-bg: #314051;
+
+  --switch-track-bg: #2a3441;
+  --switch-active-bg: #e76d4c;
+
+  --detail-cell-bg: #24303e;
+  --detail-cell-hover-bg: #2b3949;
+  --code-card-bg: #1c2531;
+  --code-panel-bg: #101722;
+  --code-copy-hover-bg: #2a3647;
+  --results-badge-bg: #312521;
+  --spending-card-bg: linear-gradient(180deg, #233140 0%, #1f2a37 100%);
+  --message-success-bg: #2b2418;
+  --message-error-bg: #331d20;
+
+  --balance-value-color: #d8b06a;
+  --spending-value-color: #ced6e1;
+  --success-text: #d1aa62;
+  --sidebar-active-border: #ef8b68;
+
+  --tone-emerald: #c7933f;
+  --tone-emerald-soft: rgba(242, 198, 103, 0.18);
+  --tone-sky: #8c9daf;
+  --tone-sky-soft: rgba(145, 165, 192, 0.2);
+  --tone-violet: #8b98aa;
+  --tone-violet-soft: rgba(172, 155, 216, 0.18);
+  --tone-rose: #e76d4c;
+  --tone-rose-soft: rgba(255, 150, 125, 0.2);
+}
+
+
+:root[data-client-theme='siraya-brand'] body,
+:root[data-client-theme='siraya-brand'] input,
+:root[data-client-theme='siraya-brand'] button,
+:root[data-client-theme='siraya-brand'] select,
+:root[data-client-theme='siraya-brand'] textarea {
+  font-family: var(--font-family-base);
+}
+
+:root[data-client-theme='siraya-brand'] h1,
+:root[data-client-theme='siraya-brand'] h2,
+:root[data-client-theme='siraya-brand'] h3,
+:root[data-client-theme='siraya-brand'] h4,
+:root[data-client-theme='siraya-brand'] h5,
+:root[data-client-theme='siraya-brand'] h6 {
+  font-family: var(--font-family-heading);
+}
+
+:root[data-client-theme='siraya-brand'] code,
+:root[data-client-theme='siraya-brand'] pre {
+  font-family: var(--font-family-mono);
+}
+
+:root[data-client-theme='siraya-brand'] [data-client-shell='main-layout'] {
+  background: var(--shell-main-bg);
+  color: var(--text);
+}
+
+:root[data-client-theme='siraya-brand'] [data-client-shell='main-layout'] [data-slot='hero-bg'] {
+  background: var(--shell-hero-bg);
+}
+
+:root[data-client-theme='siraya-brand'] [data-client-shell='header']:not(.bg-transparent) {
+  background: var(--header-glass);
+  color: var(--header-text);
+  border: 1px solid var(--border);
+  box-shadow: var(--shadow-sm);
+  backdrop-filter: none;
+}
+
+:root[data-client-theme='siraya-brand'] [data-client-shell='header'] [data-slot='avatar'] {
+  background: var(--avatar-bg);
+  color: var(--accent-strong);
+  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 14%, var(--border));
+}
+
+:root[data-client-theme='siraya-brand'] [data-client-shell='header'] [data-slot='user-menu'] {
+  border-color: var(--menu-border);
+  background: var(--menu-surface);
+  box-shadow: var(--menu-shadow);
+}
+
+:root[data-client-theme='siraya-brand'] [data-client-shell='header'] [data-slot='user-menu'] button:hover {
+  background: var(--menu-item-hover-bg);
+  color: var(--text-strong);
+}
+
+:root[data-client-theme='siraya-brand'] [data-client-shell='header'] [data-slot='user-menu'] button[aria-current='page'] {
+  background: var(--menu-item-active-bg);
+  color: var(--text-strong);
+}
+
+:root[data-client-theme='siraya-brand'] [data-client-shell='public-layout'] [data-slot='overlay'] {
+  background: var(--public-overlay-bg);
+}
+
+:root[data-client-theme='siraya-brand'] [data-client-shell='auth-card'] {
+  border-color: var(--border-strong);
+  background: var(--auth-card-bg);
+  box-shadow: var(--shadow);
+  backdrop-filter: none;
+}
+
+:root[data-client-theme='siraya-brand'] [data-main-fe-card],
+:root[data-client-theme='siraya-brand'] [data-main-fe-page-title] {
+  border-color: var(--border-strong);
+  background: var(--card-bg);
+  color: var(--text);
+  box-shadow: var(--shadow);
+  backdrop-filter: none;
+}
+
+:root[data-client-theme='siraya-brand'] [data-main-fe-page-title] {
+  background: var(--page-title-bg);
+}
+
+:root[data-ui-color-mode='dark'][data-client-theme='siraya-brand'] [data-client-shell='header']:not(.bg-transparent) {
+  border-color: var(--border);
+  box-shadow: 0 18px 36px -28px rgba(0, 0, 0, 0.7);
+}
+
+:root[data-ui-color-mode='dark'][data-client-theme='siraya-brand'] [data-main-fe-card],
+:root[data-ui-color-mode='dark'][data-client-theme='siraya-brand'] [data-main-fe-datatable] {
+  border-color: var(--border);
+  box-shadow: 0 20px 44px -32px rgba(0, 0, 0, 0.72);
+}
+
+:root[data-ui-color-mode='dark'][data-client-theme='siraya-brand'] [data-main-fe-page-title] {
+  border-color: var(--border);
+  box-shadow: 0 24px 50px -34px rgba(0, 0, 0, 0.78);
+}
+
+:root[data-ui-color-mode='dark'][data-client-theme='siraya-brand'] [data-main-fe-sidebar] {
+  border-color: var(--border-strong);
+  box-shadow: 0 26px 48px -34px rgba(0, 0, 0, 0.76);
+}
+
+:root[data-ui-color-mode='dark'][data-client-theme='siraya-brand'] [data-main-fe-input] [data-slot='control'],
+:root[data-ui-color-mode='dark'][data-client-theme='siraya-brand'] [data-main-fe-combobox] [data-slot='control'] {
+  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.03);
+}
+
+:root[data-ui-color-mode='dark'][data-client-theme='siraya-brand'] [data-client-home='metrics'] [data-main-fe-stat-card] {
+  border-color: var(--border) !important;
+  background: var(--surface-elevated) !important;
+  box-shadow: 0 16px 34px -24px rgba(0, 0, 0, 0.56) !important;
+}
+
+
+:root[data-client-theme='siraya-brand'] [data-main-fe-page-title] [data-slot='title'],
+:root[data-client-theme='siraya-brand'] [data-main-fe-section-title] [data-slot='title'],
+:root[data-client-theme='siraya-brand'] [data-main-fe-card] [data-slot='card-title'] {
+  color: var(--text-strong);
+}
+
+:root[data-client-theme='siraya-brand'] [data-main-fe-page-title] [data-slot='subtitle'],
+:root[data-client-theme='siraya-brand'] [data-main-fe-section-title] [data-slot='subtitle'],
+:root[data-client-theme='siraya-brand'] [data-main-fe-card-description] {
+  color: var(--muted);
+}
+
+:root[data-client-theme='siraya-brand'] [data-main-fe-section-title] [data-slot='icon'] {
+  background: var(--section-icon-bg);
+  color: var(--accent);
+  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 14%, var(--border));
+}
+
+:root[data-client-theme='siraya-brand'] [data-main-fe-button] {
+  border-color: transparent;
+}
+
+:root[data-client-theme='siraya-brand'] [data-main-fe-button]:focus-visible {
+  box-shadow: 0 0 0 4px var(--focus-ring) !important;
+}
+
+:root[data-client-theme='siraya-brand'] [data-main-fe-button][data-variant='create'] {
+  background: var(--button-primary-bg);
+  color: #fff;
+  box-shadow: var(--button-primary-shadow);
+}
+
+:root[data-client-theme='siraya-brand'] [data-main-fe-button][data-variant='default'] {
+  background: var(--button-primary-bg);
+  color: #fff;
+  box-shadow: var(--button-primary-shadow);
+}
+
+:root[data-client-theme='siraya-brand'] [data-main-fe-button][data-variant='confirm'] {
+  background: var(--button-confirm-bg);
+  color: var(--brand-asphalt);
+  box-shadow: var(--button-confirm-shadow);
+}
+
+:root[data-client-theme='siraya-brand'] [data-main-fe-button][data-variant='destructive'] {
+  background: var(--button-destructive-bg);
+  color: #fff;
+  box-shadow: var(--button-destructive-shadow);
+}
+
+:root[data-client-theme='siraya-brand'] [data-main-fe-button][data-variant='outline'] {
+  border-color: var(--border-strong);
+  background: var(--button-outline-bg);
+  color: var(--text);
+  box-shadow: var(--shadow-sm);
+}
+
+:root[data-client-theme='siraya-brand'] [data-main-fe-button][data-variant='secondary'] {
+  background: var(--button-secondary-bg);
+  color: var(--text-strong);
+  box-shadow: var(--shadow-sm);
+}
+
+:root[data-client-theme='siraya-brand'] [data-main-fe-button][data-variant='ghost'] {
+  color: var(--text);
+}
+
+:root[data-client-theme='siraya-brand'] [data-main-fe-button][data-variant='ghost']:hover {
+  background: var(--button-ghost-hover-bg);
+}
+
+:root[data-client-theme='siraya-brand'] [data-main-fe-button][data-variant='link'] {
+  color: var(--accent-strong);
+}
+
+:root[data-client-theme='siraya-brand'] [data-main-fe-input] > label,
+:root[data-client-theme='siraya-brand'] [data-main-fe-combobox] > label {
+  color: var(--text-strong);
+}
+
+:root[data-client-theme='siraya-brand'] [data-main-fe-input] [data-slot='control'],
+:root[data-client-theme='siraya-brand'] [data-main-fe-combobox] [data-slot='control'] {
+  border-color: var(--input-border-main);
+  background: var(--input-bg);
+  color: var(--text);
+  box-shadow: none;
+}
+
+:root[data-client-theme='siraya-brand'] [data-main-fe-input] [data-slot='control']::placeholder,
+:root[data-client-theme='siraya-brand'] [data-main-fe-combobox] [data-slot='control']::placeholder {
+  color: var(--input-placeholder);
+}
+
+:root[data-client-theme='siraya-brand'] [data-main-fe-input] [data-slot='control']:hover,
+:root[data-client-theme='siraya-brand'] [data-main-fe-combobox] [data-slot='control']:hover {
+  border-color: var(--input-border-hover);
+}
+
+:root[data-client-theme='siraya-brand'] [data-main-fe-input] [data-slot='control']:focus-visible,
+:root[data-client-theme='siraya-brand'] [data-main-fe-combobox] [data-slot='control']:focus-visible,
+:root[data-client-theme='siraya-brand'] [data-main-fe-input] [data-slot='toggle']:focus-visible {
+  box-shadow: 0 0 0 4px var(--focus-ring) !important;
+}
+
+:root[data-client-theme='siraya-brand'] [data-main-fe-input] [data-slot='prefix'],
+:root[data-client-theme='siraya-brand'] [data-main-fe-input] [data-slot='suffix-wrap'],
+:root[data-client-theme='siraya-brand'] [data-main-fe-combobox] [data-slot='chevron'],
+:root[data-client-theme='siraya-brand'] [data-main-fe-combobox] [data-slot='clear'] {
+  color: var(--muted);
+}
+
+:root[data-client-theme='siraya-brand'] [data-main-fe-combobox] [data-slot='dropdown'] {
+  border-color: var(--menu-border);
+  background: var(--menu-surface);
+  box-shadow: var(--menu-shadow);
+}
+
+:root[data-client-theme='siraya-brand'] [data-main-fe-combobox] [data-slot='option']:hover,
+:root[data-client-theme='siraya-brand'] [data-main-fe-combobox] [data-slot='option'][data-highlighted='true'] {
+  background: var(--menu-item-hover-bg);
+  color: var(--text-strong);
+}
+
+:root[data-client-theme='siraya-brand'] [data-main-fe-date-range],
+:root[data-client-theme='siraya-brand'] [data-main-fe-date-time] {
+  color: var(--text);
+}
+
+:root[data-client-theme='siraya-brand'] [data-main-fe-date-range] [data-slot='label'],
+:root[data-client-theme='siraya-brand'] [data-main-fe-date-time] [data-slot='label'] {
+  color: var(--text-strong);
+}
+
+:root[data-client-theme='siraya-brand'] [data-main-fe-date-range] [data-slot='trigger'],
+:root[data-client-theme='siraya-brand'] [data-main-fe-date-time] [data-slot='trigger'] {
+  border-color: var(--input-border-main) !important;
+  background: var(--input-bg) !important;
+  color: var(--text) !important;
+  box-shadow: none !important;
+}
+
+:root[data-client-theme='siraya-brand'] [data-main-fe-date-range] [data-slot='trigger']:hover,
+:root[data-client-theme='siraya-brand'] [data-main-fe-date-time] [data-slot='trigger']:hover {
+  border-color: var(--input-border-hover) !important;
+  background: var(--surface) !important;
+}
+
+:root[data-client-theme='siraya-brand'] [data-main-fe-date-range] [data-slot='panel'],
+:root[data-client-theme='siraya-brand'] [data-main-fe-date-time] [data-slot='panel'] {
+  border-color: var(--menu-border) !important;
+  background: var(--menu-surface) !important;
+  box-shadow: var(--menu-shadow) !important;
+  backdrop-filter: none !important;
+}
+
+:root[data-client-theme='siraya-brand'] [data-main-fe-date-range] [data-slot='nav-button'],
+:root[data-client-theme='siraya-brand'] [data-main-fe-date-time] [data-slot='nav-button'],
+:root[data-client-theme='siraya-brand'] [data-main-fe-date-range] [data-slot='month-select'],
+:root[data-client-theme='siraya-brand'] [data-main-fe-date-range] [data-slot='year-select'],
+:root[data-client-theme='siraya-brand'] [data-main-fe-date-time] [data-slot='month-select'],
+:root[data-client-theme='siraya-brand'] [data-main-fe-date-time] [data-slot='year-select'],
+:root[data-client-theme='siraya-brand'] [data-main-fe-date-time] [data-slot='time-select'],
+:root[data-client-theme='siraya-brand'] [data-main-fe-date-range] [data-slot='preview-value'] {
+  border-color: var(--border) !important;
+  background: var(--surface) !important;
+  color: var(--text) !important;
+}
+
+:root[data-client-theme='siraya-brand'] [data-main-fe-date-range] [data-slot='scroll-select-menu'],
+:root[data-client-theme='siraya-brand'] [data-main-fe-date-time] [data-slot='scroll-select-menu'] {
+  border-color: var(--menu-border) !important;
+  background: var(--menu-surface) !important;
+  box-shadow: var(--menu-shadow) !important;
+}
+
+:root[data-client-theme='siraya-brand'] [data-main-fe-date-range] [data-slot='scroll-select-option'],
+:root[data-client-theme='siraya-brand'] [data-main-fe-date-time] [data-slot='scroll-select-option'] {
+  color: var(--text) !important;
+}
+
+:root[data-client-theme='siraya-brand'] [data-main-fe-date-range] [data-slot='scroll-select-option'][data-selected='true'],
+:root[data-client-theme='siraya-brand'] [data-main-fe-date-time] [data-slot='scroll-select-option'][data-selected='true'],
+:root[data-client-theme='siraya-brand'] [data-main-fe-date-time] [data-slot='quick-option'][data-selected='true'] {
+  background: var(--menu-item-active-bg) !important;
+  color: var(--text-strong) !important;
+}
+
+:root[data-client-theme='siraya-brand'] [data-main-fe-date-range] [data-slot='scroll-select-option']:hover,
+:root[data-client-theme='siraya-brand'] [data-main-fe-date-time] [data-slot='scroll-select-option']:hover,
+:root[data-client-theme='siraya-brand'] [data-main-fe-date-time] [data-slot='quick-option']:hover,
+:root[data-client-theme='siraya-brand'] [data-main-fe-date-time] [data-slot='quick-clear']:hover {
+  background: var(--menu-item-hover-bg) !important;
+  color: var(--text-strong) !important;
+}
+
+:root[data-client-theme='siraya-brand'] [data-main-fe-date-time] [data-slot='quick-option'],
+:root[data-client-theme='siraya-brand'] [data-main-fe-date-time] [data-slot='quick-clear'] {
+  border-color: var(--border) !important;
+  color: var(--text) !important;
+}
+
+:root[data-client-theme='siraya-brand'] [data-main-fe-date-range] [data-slot='weekday'],
+:root[data-client-theme='siraya-brand'] [data-main-fe-date-time] [data-slot='weekday'],
+:root[data-client-theme='siraya-brand'] [data-main-fe-date-time] [data-slot='quick-ranges-label'] {
+  color: var(--muted) !important;
+}
+
+:root[data-client-theme='siraya-brand'] [data-main-fe-date-range] [data-slot='day'],
+:root[data-client-theme='siraya-brand'] [data-main-fe-date-time] [data-slot='day'] {
+  color: var(--text) !important;
+}
+
+:root[data-client-theme='siraya-brand'] [data-main-fe-date-range] [data-slot='day'][data-in-month='false'],
+:root[data-client-theme='siraya-brand'] [data-main-fe-date-time] [data-slot='day'][data-in-month='false'] {
+  color: var(--muted) !important;
+  opacity: 0.6;
+}
+
+:root[data-client-theme='siraya-brand'] [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='siraya-brand'] [data-main-fe-date-range] [data-slot='day'][data-selected='true'],
+:root[data-client-theme='siraya-brand'] [data-main-fe-date-time] [data-slot='day'][data-selected='true'] {
+  background: var(--accent) !important;
+  color: #fff !important;
+  box-shadow: var(--button-primary-shadow) !important;
+}
+
+:root[data-client-theme='siraya-brand'] [data-main-fe-date-range] [data-slot='day']:not([data-selected='true']):hover,
+:root[data-client-theme='siraya-brand'] [data-main-fe-date-time] [data-slot='day']:not([data-selected='true']):hover,
+:root[data-client-theme='siraya-brand'] [data-main-fe-date-range] [data-slot='nav-button']:hover,
+:root[data-client-theme='siraya-brand'] [data-main-fe-date-time] [data-slot='nav-button']:hover,
+:root[data-client-theme='siraya-brand'] [data-main-fe-date-range] [data-slot='preview-clear']:hover {
+  background: var(--menu-item-hover-bg) !important;
+  color: var(--text-strong) !important;
+}
+
+:root[data-client-theme='siraya-brand'] [data-main-fe-date-range] [data-slot='preview-clear'] {
+  color: var(--muted) !important;
+}
+
+:root[data-client-theme='siraya-brand'] [data-main-fe-date-range] [data-slot='clear-button'],
+:root[data-client-theme='siraya-brand'] [data-main-fe-date-time] [data-slot='clear-button'] {
+  border: 1px solid var(--border) !important;
+  background: var(--button-outline-bg) !important;
+  color: var(--text) !important;
+}
+
+:root[data-client-theme='siraya-brand'] [data-main-fe-date-range] [data-slot='confirm-button'],
+:root[data-client-theme='siraya-brand'] [data-main-fe-date-time] [data-slot='confirm-button'] {
+  background: var(--button-primary-bg) !important;
+  color: #fff !important;
+  box-shadow: var(--button-primary-shadow) !important;
+}
+
+:root[data-client-theme='siraya-brand'] [data-main-fe-tabs] {
+  border-color: var(--border);
+  background: var(--tab-track);
+  box-shadow: inset 0 1px 0 var(--tabs-shadow);
+}
+
+:root[data-client-theme='siraya-brand'] [data-main-fe-tabs] [data-slot='indicator'] {
+  background: var(--tab-indicator);
+  box-shadow: 0 1px 2px var(--tab-indicator-shadow);
+}
+
+:root[data-client-theme='siraya-brand'] [data-main-fe-tabs] [data-slot='tab'] {
+  color: var(--tab-text);
+}
+
+:root[data-client-theme='siraya-brand'] [data-main-fe-tabs] [data-slot='tab'][data-active='true'] {
+  color: var(--tab-text-active);
+}
+
+:root[data-client-theme='siraya-brand'] [data-main-fe-datatable] {
+  border-color: var(--border-strong);
+  background: var(--datatable-bg);
+  box-shadow: var(--shadow);
+}
+
+:root[data-client-theme='siraya-brand'] [data-main-fe-datatable] [data-slot='sticky-header'] {
+  border-bottom: 1px solid var(--border);
+  background: var(--table-head-bg) !important;
+  box-shadow: 0 10px 22px -18px rgba(15, 23, 42, 0.4);
+  backdrop-filter: none !important;
+}
+
+:root[data-client-theme='siraya-brand'] [data-main-fe-datatable] [data-slot='sticky-header'],
+:root[data-client-theme='siraya-brand'] [data-main-fe-datatable] [data-slot='header'],
+:root[data-client-theme='siraya-brand'] [data-main-fe-datatable] [data-slot='head-row'] {
+  background: var(--table-head-bg) !important;
+}
+
+:root[data-client-theme='siraya-brand'] [data-main-fe-datatable] th,
+:root[data-client-theme='siraya-brand'] [data-main-fe-datatable] td {
+  color: var(--text);
+  border-color: var(--border);
+}
+
+:root[data-client-theme='siraya-brand'] [data-main-fe-datatable] th {
+  color: var(--muted) !important;
+}
+
+:root[data-client-theme='siraya-brand'] [data-main-fe-datatable] [data-slot='header-scroll'],
+:root[data-client-theme='siraya-brand'] [data-main-fe-datatable] .main-fe-dt-body-scroll {
+  background: transparent;
+}
+
+:root[data-client-theme='siraya-brand'] [data-main-fe-datatable] [data-slot='body-row']:hover {
+  background: var(--table-row-hover) !important;
+}
+
+:root[data-client-theme='siraya-brand'] [data-main-fe-datatable] [data-slot='empty-icon'] {
+  background: var(--empty-icon-bg);
+  color: var(--accent-strong);
+  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 14%, var(--border));
+}
+
+:root[data-client-theme='siraya-brand'] [data-main-fe-datatable] input[type='checkbox'] {
+  accent-color: var(--accent);
+}
+
+:root[data-client-theme='siraya-brand'] [data-main-fe-pagination] {
+  border-top-color: var(--border);
+  color: var(--muted);
+}
+
+:root[data-client-theme='siraya-brand'] [data-main-fe-pagination] [data-slot='page-size'],
+:root[data-client-theme='siraya-brand'] [data-main-fe-pagination] [data-slot='current'] {
+  color: var(--text);
+}
+
+:root[data-client-theme='siraya-brand'] [data-main-fe-pagination] [data-slot='page-size-select'],
+:root[data-client-theme='siraya-brand'] [data-main-fe-pagination] [data-slot='nav-button'] {
+  border-color: var(--border);
+  background: var(--surface);
+  color: var(--text);
+}
+
+:root[data-client-theme='siraya-brand'] [data-main-fe-pagination] [data-slot='nav-button']:hover,
+:root[data-client-theme='siraya-brand'] [data-main-fe-pagination] [data-slot='page-size-select']:hover {
+  background: var(--surface-strong);
+}
+
+:root[data-client-theme='siraya-brand'] [data-main-fe-sidebar] {
+  background: var(--sidebar-bg);
+  color: var(--sidebar-foreground);
+  border: 1px solid var(--border);
+  box-shadow: var(--shadow-sm);
+}
+
+:root[data-client-theme='siraya-brand'] [data-main-fe-sidebar] [data-slot='header'] {
+  padding-top: 16px;
+  padding-bottom: 8px;
+}
+
+:root[data-client-theme='siraya-brand'] [data-main-fe-sidebar] [data-slot='brand-badge'] {
+  background: var(--avatar-bg);
+  color: var(--accent);
+  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 14%, var(--border));
+}
+
+:root[data-client-theme='siraya-brand'] [data-main-fe-sidebar] [data-slot='brand-label'] {
+  color: var(--text-strong);
+}
+
+:root[data-client-theme='siraya-brand'] [data-main-fe-sidebar] [data-slot='divider'] {
+  background: transparent;
+  margin-top: 0;
+  margin-bottom: 8px;
+  height: 0;
+}
+
+:root[data-client-theme='siraya-brand'] [data-main-fe-sidebar-item] [data-slot='action'] {
+  color: var(--text);
+  background: transparent !important;
+  box-shadow: none !important;
+}
+
+:root[data-client-theme='siraya-brand'] [data-main-fe-sidebar-item] [data-slot='icon'] {
+  color: var(--accent);
+}
+
+:root[data-client-theme='siraya-brand'] [data-main-fe-sidebar-item] [data-slot='label'] {
+  color: var(--text-strong);
+}
+
+:root[data-client-theme='siraya-brand'] [data-main-fe-sidebar-item] [data-slot='row'][data-active='true'],
+:root[data-client-theme='siraya-brand'] [data-main-fe-sidebar-item] [data-slot='row'][data-branch-active='true'] {
+  background: var(--sidebar-active);
+  border: 1px solid var(--sidebar-active-border);
+  box-shadow: none;
+}
+
+:root[data-client-theme='siraya-brand'] [data-main-fe-sidebar-item] [data-slot='row'][data-active='true'] [data-slot='action'],
+:root[data-client-theme='siraya-brand'] [data-main-fe-sidebar-item] [data-slot='row'][data-branch-active='true'] [data-slot='action'] {
+  color: var(--sidebar-active-text);
+}
+
+:root[data-client-theme='siraya-brand'] [data-main-fe-sidebar-item] [data-slot='row'][data-active='true'] [data-slot='icon'],
+:root[data-client-theme='siraya-brand'] [data-main-fe-sidebar-item] [data-slot='row'][data-active='true'] [data-slot='label'],
+:root[data-client-theme='siraya-brand'] [data-main-fe-sidebar-item] [data-slot='row'][data-branch-active='true'] [data-slot='icon'],
+:root[data-client-theme='siraya-brand'] [data-main-fe-sidebar-item] [data-slot='row'][data-branch-active='true'] [data-slot='label'] {
+  color: var(--sidebar-active-text);
+}
+
+:root[data-client-theme='siraya-brand'] [data-main-fe-sidebar-item] [data-slot='row']:not([data-active='true']):not([data-branch-active='true']):hover {
+  background: var(--sidebar-hover);
+}
+
+:root[data-client-theme='siraya-brand'] [data-main-fe-sidebar-item] [data-slot='row']:not([data-active='true']):not([data-branch-active='true']):hover [data-slot='action'] {
+  color: var(--text-strong);
+}
+
+:root[data-client-theme='siraya-brand'] [data-main-fe-sidebar-item] [data-slot='submenu'] {
+  border-color: var(--sidebar-submenu-border);
+}
+
+:root[data-client-theme='siraya-brand'] [data-main-fe-stat-card][data-tone='sky'] {
+  border-color: var(--border) !important;
+  background: var(--stat-sky-bg) !important;
+}
+
+:root[data-client-theme='siraya-brand'] [data-main-fe-stat-card][data-tone='emerald'] {
+  border-color: var(--border) !important;
+  background: var(--stat-emerald-bg) !important;
+}
+
+:root[data-client-theme='siraya-brand'] [data-main-fe-stat-card][data-tone='violet'] {
+  border-color: var(--border) !important;
+  background: var(--stat-violet-bg) !important;
+}
+
+:root[data-client-theme='siraya-brand'] [data-main-fe-stat-card][data-tone='rose'] {
+  border-color: var(--border) !important;
+  background: var(--stat-rose-bg) !important;
+}
+
+:root[data-client-theme='siraya-brand'] [data-main-fe-stat-card] {
+  box-shadow:
+    inset 0 1px 0 rgba(255, 255, 255, 0.03),
+    0 16px 28px -24px rgba(0, 0, 0, 0.42) !important;
+}
+
+:root[data-client-theme='siraya-brand'] [data-main-fe-stat-card] [data-slot='label'] {
+  color: var(--muted);
+}
+
+:root[data-client-theme='siraya-brand'] [data-main-fe-stat-card] [data-slot='value'] {
+  color: var(--text-strong);
+}
+
+:root[data-client-theme='siraya-brand'] [data-main-fe-stat-card] [data-slot='icon'] {
+  background: var(--stat-icon-bg);
+  box-shadow:
+    inset 0 0 0 1px rgba(255, 255, 255, 0.08),
+    0 10px 18px -14px rgba(0, 0, 0, 0.34);
+}
+
+:root[data-client-theme='siraya-brand'] [data-main-fe-stat-card][data-tone='sky'] [data-slot='icon'] {
+  color: var(--tone-sky);
+}
+
+:root[data-client-theme='siraya-brand'] [data-main-fe-stat-card][data-tone='emerald'] [data-slot='icon'] {
+  color: var(--tone-emerald);
+}
+
+:root[data-client-theme='siraya-brand'] [data-main-fe-stat-card][data-tone='violet'] [data-slot='icon'] {
+  color: var(--tone-violet);
+}
+
+:root[data-client-theme='siraya-brand'] [data-main-fe-stat-card][data-tone='rose'] [data-slot='icon'] {
+  color: var(--tone-rose);
+}
+
+:root[data-client-theme='siraya-brand'] [data-main-fe-switch] [data-slot='track'] {
+  border-color: var(--border-strong);
+  background: var(--switch-track-bg);
+}
+
+:root[data-client-theme='siraya-brand'] [data-main-fe-switch] input:checked + [data-slot='track'] {
+  border-color: var(--accent-strong);
+  background: var(--switch-active-bg);
+}
+
+:root[data-client-theme='siraya-brand'] [data-main-fe-switch] [data-slot='thumb'] {
+  box-shadow: none;
+}
+
+:root[data-client-theme='siraya-brand'] [data-client-home='test-api'] [data-slot='base-url'],
+:root[data-client-theme='siraya-brand'] [data-client-models='model-card'] [data-slot='pricing'],
+:root[data-client-theme='siraya-brand'] [data-client-home='usage-overview'] [data-slot='model-row'],
+:root[data-client-theme='siraya-brand'] [data-client-request-logs='detail'] [data-slot='detail-cell'] {
+  border-color: var(--border) !important;
+  background: var(--detail-cell-bg) !important;
+  box-shadow:
+    inset 0 1px 0 rgba(255, 255, 255, 0.03),
+    0 16px 28px -24px rgba(0, 0, 0, 0.46) !important;
+}
+
+:root[data-client-theme='siraya-brand'] [data-client-home='usage-overview'] [data-slot='model-row']:hover {
+  border-color: var(--border-strong) !important;
+  background: var(--detail-cell-hover-bg) !important;
+  box-shadow:
+    inset 0 1px 0 rgba(255, 255, 255, 0.04),
+    0 18px 32px -24px rgba(0, 0, 0, 0.5) !important;
+}
+
+:root[data-client-theme='siraya-brand'] [data-client-home='test-api'] [data-slot='base-url-value'] {
+  color: var(--muted) !important;
+}
+
+:root[data-client-theme='siraya-brand'] [data-client-home='test-api'] [data-slot='base-url-copy'] {
+  color: var(--accent) !important;
+}
+
+:root[data-client-theme='siraya-brand'] [data-client-home='test-api'] [data-slot='base-url-copy']:hover {
+  color: var(--accent-strong) !important;
+}
+
+:root[data-client-theme='siraya-brand'] [data-client-home='test-api'] [data-slot='code-card'] {
+  border-color: var(--border) !important;
+  background: var(--code-card-bg) !important;
+}
+
+:root[data-client-theme='siraya-brand'] [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='siraya-brand'] [data-client-home='test-api'] [data-slot='code-pre'] {
+  color: #f5f1ef !important;
+}
+
+:root[data-client-theme='siraya-brand'] [data-client-home='test-api'] [data-slot='copy-code'] {
+  color: #f3b2a3 !important;
+}
+
+:root[data-client-theme='siraya-brand'] [data-client-home='test-api'] [data-slot='copy-code']:hover {
+  background: var(--code-copy-hover-bg) !important;
+  color: #ffe1d9 !important;
+}
+
+:root[data-client-theme='siraya-brand'] [data-client-home='usage-overview'] [data-slot='view-more'] {
+  color: var(--accent) !important;
+}
+
+:root[data-client-theme='siraya-brand'] [data-client-home='metrics'] [data-slot='metrics-title'],
+:root[data-client-theme='siraya-brand'] [data-client-home='usage-overview'] [data-slot='models-title'],
+:root[data-client-theme='siraya-brand'] [data-client-home='test-api'] [data-slot='field-label'] {
+  color: var(--text-strong) !important;
+}
+
+:root[data-client-theme='siraya-brand'] [data-client-home='metrics'] [data-slot='balance-value'] {
+  color: var(--balance-value-color) !important;
+}
+
+:root[data-client-theme='siraya-brand'] [data-client-home='metrics'] [data-slot='spending-value'] {
+  color: var(--spending-value-color) !important;
+}
+
+:root[data-client-theme='siraya-brand'] [data-client-home='usage-overview'] [data-slot='empty-models'] p {
+  color: var(--muted) !important;
+}
+
+:root[data-client-theme='siraya-brand'] [data-client-dashboard='page'] [data-slot='filter-toggle'],
+:root[data-client-theme='siraya-brand'] [data-client-models='page'] [data-slot='filter-toggle'] {
+  color: var(--text) !important;
+}
+
+:root[data-client-theme='siraya-brand'] [data-client-dashboard='page'] [data-slot='filter-indicator'],
+:root[data-client-theme='siraya-brand'] [data-client-models='page'] [data-slot='filter-indicator'] {
+  background: var(--accent) !important;
+  box-shadow: 0 0 0 2px var(--card-bg);
+}
+
+:root[data-client-theme='siraya-brand'] [data-client-dashboard='page'] [data-slot='filters'],
+:root[data-client-theme='siraya-brand'] [data-client-dashboard='page'] [data-slot='chart-card'],
+:root[data-client-theme='siraya-brand'] [data-client-models='filters'],
+:root[data-client-theme='siraya-brand'] [data-client-models='page'] [data-slot='empty-state'],
+:root[data-client-theme='siraya-brand'] [data-client-api-keys='page'] [data-slot='toolbar'],
+:root[data-client-theme='siraya-brand'] [data-client-credit='history'] [data-slot='filters'],
+:root[data-client-theme='siraya-brand'] [data-client-credit='topup'] [data-slot='redeem-panel'],
+:root[data-client-theme='siraya-brand'] [data-client-credit='topup'] [data-slot='notice'],
+:root[data-client-theme='siraya-brand'] [data-client-credit='overview'] [data-slot='stats-shell'] {
+  border-color: var(--border-strong) !important;
+  background: var(--card-bg) !important;
+  box-shadow:
+    inset 0 1px 0 rgba(255, 255, 255, 0.03),
+    var(--shadow) !important;
+  backdrop-filter: none !important;
+}
+
+:root[data-client-theme='siraya-brand'] [data-client-home='usage-overview'],
+:root[data-client-theme='siraya-brand'] [data-client-home='metrics'] {
+  border-color: var(--border-strong) !important;
+  background: linear-gradient(
+    180deg,
+    color-mix(in srgb, var(--card-bg) 88%, var(--surface-elevated) 12%) 0%,
+    var(--card-bg) 100%
+  ) !important;
+  box-shadow:
+    inset 0 1px 0 rgba(255, 255, 255, 0.03),
+    0 22px 42px -30px rgba(0, 0, 0, 0.66) !important;
+}
+
+:root[data-client-theme='siraya-brand'] [data-client-api-keys='page'] [data-slot='page-title-shell'] [data-main-fe-page-title],
+:root[data-client-theme='siraya-brand'] [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='siraya-brand'] [data-client-dashboard='page'] [data-slot='expand-chart'],
+:root[data-client-theme='siraya-brand'] [data-client-dashboard='page'] [data-slot='modal-close'] {
+  color: var(--muted) !important;
+}
+
+:root[data-client-theme='siraya-brand'] [data-client-dashboard='page'] [data-slot='expand-chart']:hover,
+:root[data-client-theme='siraya-brand'] [data-client-dashboard='page'] [data-slot='modal-close']:hover {
+  background: var(--menu-item-hover-bg) !important;
+  color: var(--text-strong) !important;
+}
+
+:root[data-client-theme='siraya-brand'] [data-client-dashboard='page'] [data-slot='modal-overlay'],
+:root[data-client-theme='siraya-brand'] [data-client-models='page'] [data-slot='modal-overlay'],
+:root[data-client-theme='siraya-brand'] [data-client-api-keys='modal'] [data-slot='modal-overlay'],
+:root[data-client-theme='siraya-brand'] [data-client-api-keys='confirm'] [data-slot='modal-overlay'],
+:root[data-client-theme='siraya-brand'] [data-client-credit='modal'][data-slot='overlay'] {
+  background: var(--public-overlay-bg) !important;
+  backdrop-filter: none !important;
+}
+
+:root[data-client-theme='siraya-brand'] [data-client-dashboard='page'] [data-slot='modal-panel'],
+:root[data-client-theme='siraya-brand'] [data-client-models='page'] [data-slot='modal-panel'],
+:root[data-client-theme='siraya-brand'] [data-client-api-keys='modal'] [data-slot='modal-panel'],
+:root[data-client-theme='siraya-brand'] [data-client-api-keys='confirm'] [data-slot='modal-panel'],
+:root[data-client-theme='siraya-brand'] [data-client-credit='modal'] [data-slot='panel'] {
+  border-color: var(--border) !important;
+  background: var(--card-bg) !important;
+  box-shadow: var(--menu-shadow) !important;
+}
+
+:root[data-client-theme='siraya-brand'] [data-client-dashboard='page'] [data-slot='modal-header'],
+:root[data-client-theme='siraya-brand'] [data-client-credit='modal'] > [data-slot='panel'] > div:first-child {
+  border-color: var(--border) !important;
+}
+
+:root[data-client-theme='siraya-brand'] [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='siraya-brand'] [data-client-models='model-card'] {
+  border-color: var(--border) !important;
+  background: var(--card-bg) !important;
+  box-shadow: var(--shadow-sm) !important;
+}
+
+:root[data-client-theme='siraya-brand'] [data-client-models='model-card']:hover {
+  border-color: var(--border-strong) !important;
+  box-shadow: var(--shadow) !important;
+}
+
+:root[data-client-theme='siraya-brand'] [data-client-models='page'] [data-slot='empty-state'] > div:first-child {
+  background: var(--empty-icon-bg) !important;
+  color: var(--accent) !important;
+}
+
+:root[data-client-theme='siraya-brand'] [data-client-models='detail'] [data-slot='hero'] {
+  border-color: var(--border) !important;
+  background: var(--surface-elevated) !important;
+}
+
+:root[data-client-theme='siraya-brand'] [data-client-models='detail'] [data-slot='description'],
+:root[data-client-theme='siraya-brand'] [data-client-models='detail'] [data-slot='meta'],
+:root[data-client-theme='siraya-brand'] [data-client-models='detail'] [data-slot='pricing'],
+:root[data-client-theme='siraya-brand'] [data-client-models='detail'] [data-slot='input-types'],
+:root[data-client-theme='siraya-brand'] [data-client-models='detail'] [data-slot='capabilities'] {
+  border-color: var(--border) !important;
+  background: var(--surface-strong) !important;
+}
+
+:root[data-client-theme='siraya-brand'] [data-client-models='detail'] [data-slot='description'] .absolute {
+  background: var(--surface-strong) !important;
+}
+
+:root[data-client-theme='siraya-brand'] [data-client-models='detail'] [data-slot='description'] button {
+  color: var(--accent) !important;
+}
+
+:root[data-client-theme='siraya-brand'] [data-client-models='detail'] [data-slot='pricing-table'] {
+  border-color: var(--border) !important;
+  background: var(--surface) !important;
+}
+
+:root[data-client-theme='siraya-brand'] [data-client-models='detail'] [data-slot='pricing-table'] thead tr {
+  border-color: var(--border) !important;
+  background: var(--table-head-bg) !important;
+  color: var(--muted) !important;
+}
+
+:root[data-client-theme='siraya-brand'] [data-client-models='detail'] [data-slot='pricing-table'] tbody tr {
+  border-color: var(--border) !important;
+}
+
+:root[data-client-theme='siraya-brand'] [data-client-models='detail'] [data-slot='pricing-table'] td {
+  color: var(--text) !important;
+}
+
+:root[data-client-theme='siraya-brand'] [data-client-api-keys='page'] [data-slot='hover-tooltip'],
+:root[data-client-theme='siraya-brand'] [data-client-api-keys='action-tooltip'] {
+  border: 1px solid var(--border);
+  background: var(--menu-surface) !important;
+  color: var(--text) !important;
+  box-shadow: var(--menu-shadow) !important;
+}
+
+:root[data-client-theme='siraya-brand'] [data-client-api-keys='action-trigger'] {
+  color: var(--muted) !important;
+}
+
+:root[data-client-theme='siraya-brand'] [data-client-api-keys='action-trigger']:hover {
+  background: var(--menu-item-hover-bg) !important;
+  color: var(--text-strong) !important;
+}
+
+:root[data-client-theme='siraya-brand'] [data-client-api-keys='action-menu'] {
+  border-color: var(--menu-border) !important;
+  background: var(--menu-surface) !important;
+  box-shadow: var(--menu-shadow) !important;
+}
+
+:root[data-client-theme='siraya-brand'] [data-client-api-keys='action-menu'] button {
+  color: var(--text) !important;
+}
+
+:root[data-client-theme='siraya-brand'] [data-client-api-keys='action-menu'] button:hover {
+  background: var(--menu-item-hover-bg) !important;
+  color: var(--text-strong) !important;
+}
+
+:root[data-client-theme='siraya-brand'] [data-client-api-keys='modal'] [data-slot='generated-key'] {
+  border-color: var(--border) !important;
+  background: var(--surface-strong) !important;
+}
+
+:root[data-client-theme='siraya-brand'] [data-client-credit='wallet'] [data-slot='tabs'] {
+  border-color: var(--border) !important;
+  background: var(--card-bg) !important;
+  box-shadow: var(--shadow-sm) !important;
+}
+
+:root[data-client-theme='siraya-brand'] [data-client-credit='wallet'] [data-slot='tab'] {
+  color: var(--text) !important;
+  background: transparent !important;
+  box-shadow: none !important;
+}
+
+:root[data-client-theme='siraya-brand'] [data-client-credit='wallet'] [data-slot='tab'][data-active='true'] {
+  background: var(--button-primary-bg) !important;
+  color: #fff !important;
+  box-shadow: var(--button-primary-shadow) !important;
+}
+
+:root[data-client-theme='siraya-brand'] [data-client-credit='wallet'] [data-slot='tab']:not([data-active='true']):hover {
+  background: var(--button-ghost-hover-bg) !important;
+  color: var(--text-strong) !important;
+}
+
+:root[data-client-theme='siraya-brand'] [data-client-credit='overview'] [data-slot='balance-card'] {
+  border-color: color-mix(in srgb, var(--tone-rose) 24%, var(--border)) !important;
+  background: var(--stat-rose-bg) !important;
+  box-shadow:
+    inset 0 1px 0 rgba(255, 255, 255, 0.03),
+    var(--shadow) !important;
+}
+
+:root[data-client-theme='siraya-brand'] [data-client-credit='overview'] [data-slot='spending-card'] {
+  border-color: color-mix(in srgb, var(--tone-sky) 24%, var(--border)) !important;
+  background: var(--spending-card-bg) !important;
+  box-shadow:
+    inset 0 1px 0 rgba(255, 255, 255, 0.03),
+    var(--shadow) !important;
+}
+
+:root[data-client-theme='siraya-brand'] [data-client-credit='overview'] [data-slot='balance-card'] > div:first-child,
+:root[data-client-theme='siraya-brand'] [data-client-credit='overview'] [data-slot='spending-card'] > div:first-child {
+  background: var(--accent-soft) !important;
+}
+
+:root[data-client-theme='siraya-brand'] [data-client-credit='overview'] [data-slot='topup-action'],
+:root[data-client-theme='siraya-brand'] [data-client-credit='topup'] [data-slot='coupon-submit'] {
+  background: var(--button-primary-bg) !important;
+  color: #fff !important;
+  box-shadow: var(--button-primary-shadow) !important;
+}
+
+:root[data-client-theme='siraya-brand'] [data-client-credit='overview'] [data-slot='stat-item'] {
+  border-color: var(--border-strong) !important;
+  background: var(--detail-cell-bg) !important;
+  box-shadow:
+    inset 0 1px 0 rgba(255, 255, 255, 0.03),
+    0 14px 26px -24px rgba(0, 0, 0, 0.44) !important;
+}
+
+:root[data-client-theme='siraya-brand'] [data-client-credit='topup'] [data-slot='notice'] {
+  background: var(--surface-strong) !important;
+}
+
+:root[data-client-theme='siraya-brand'] [data-client-credit='topup'] [data-slot='notice'] > div > div:first-child {
+  background: var(--section-icon-bg) !important;
+  color: var(--accent) !important;
+  box-shadow: none !important;
+}
+
+:root[data-client-theme='siraya-brand'] [data-client-credit='topup'] [data-slot='coupon-input'] {
+  border-color: var(--input-border-main) !important;
+  background: var(--input-bg) !important;
+  color: var(--text) !important;
+  box-shadow: none !important;
+}
+
+:root[data-client-theme='siraya-brand'] [data-client-credit='topup'] [data-slot='coupon-input']::placeholder {
+  color: var(--input-placeholder) !important;
+}
+
+:root[data-client-theme='siraya-brand'] [data-client-credit='topup'] [data-slot='message'][data-type='success'] {
+  border-color: color-mix(in srgb, var(--brand-canary) 26%, var(--border)) !important;
+  background: var(--message-success-bg) !important;
+  color: var(--success-text) !important;
+}
+
+:root[data-client-theme='siraya-brand'] [data-client-credit='topup'] [data-slot='message'][data-type='error'] {
+  border-color: color-mix(in srgb, var(--danger) 28%, var(--border)) !important;
+  background: var(--message-error-bg) !important;
+  color: var(--danger) !important;
+}
+
+:root[data-client-theme='siraya-brand'] [data-client-dashboard='page'],
+:root[data-client-theme='siraya-brand'] [data-client-models='page'],
+:root[data-client-theme='siraya-brand'] [data-client-credit='wallet'],
+:root[data-client-theme='siraya-brand'] [data-client-api-keys='page'],
+:root[data-client-theme='siraya-brand'] [data-client-request-logs='page'] {
+  color: var(--text);
+}