@lucasvu/scope-ui 0.1.0 → 0.1.1

package/dist/themes/theme-ui-neo-slate.css

@@ -0,0 +1,962 @@
+/* Modern slate-indigo theme for contemporary SaaS/app dashboards. */
+
+:root[data-client-theme='neo-slate'] {
+  color-scheme: light;
+  --brand-tiger: #22d3ee;
+  --brand-fire-brick: #4f46e5;
+  --brand-asphalt: #0f172a;
+  --brand-cobalt: #6366f1;
+  --brand-amethyst: #8b5cf6;
+  --brand-canary: #38bdf8;
+  --brand-moon-spot: #64748b;
+  --brand-lemonade: #e0e7ff;
+  --brand-blush: #eef2ff;
+  --brand-champagne: #f8fafc;
+  --brand-dolphin: #cbd5e1;
+  --brand-smoke: #e2e8f0;
+  --brand-silver: #f1f5f9;
+
+  --font-family-base: 'Inter', 'Noto Sans', 'Segoe UI', 'Helvetica Neue',
+    sans-serif;
+  --font-family-heading: 'Inter', 'Noto Sans', 'Segoe UI', 'Helvetica Neue',
+    sans-serif;
+  --font-family-mono: 'JetBrains Mono', 'SFMono-Regular', Menlo, monospace;
+
+  --bg: #f5f7fb;
+  --surface: #ffffff;
+  --surface-strong: #eef2f7;
+  --surface-elevated: #ffffff;
+  --grey: #eef2f7;
+  --grey-strong: #dbe4f0;
+  --border: #d6e0ec;
+  --border-strong: #c1cfde;
+
+  --text: #475569;
+  --text-strong: #0f172a;
+  --muted: #6b7c93;
+  --foreground: var(--text);
+  --muted-foreground: var(--muted);
+
+  --accent: #4f46e5;
+  --accent-soft: rgba(79, 70, 229, 0.12);
+  --accent-strong: #22d3ee;
+  --accent-2: #0ea5e9;
+  --danger: #ef4444;
+  --danger-soft: rgba(239, 68, 68, 0.12);
+  --success-strong: #0f766e;
+  --success-soft: rgba(15, 118, 110, 0.14);
+  --info: #2563eb;
+  --info-soft: rgba(37, 99, 235, 0.14);
+
+  --shadow: 0 18px 38px rgba(15, 23, 42, 0.1);
+  --shadow-sm: 0 10px 22px rgba(15, 23, 42, 0.06);
+  --menu-shadow: 0 16px 36px rgba(15, 23, 42, 0.14);
+  --focus-ring: rgba(79, 70, 229, 0.18);
+
+  --confirm: 160 84% 39%;
+  --confirm-foreground: 0 0% 100%;
+
+  --tw-background: 220 33% 98%;
+  --tw-foreground: 222 47% 11%;
+  --tw-card: 0 0% 100%;
+  --tw-card-foreground: 222 47% 11%;
+  --tw-popover: 0 0% 100%;
+  --tw-popover-foreground: 222 47% 11%;
+  --tw-primary: 245 75% 59%;
+  --tw-primary-foreground: 0 0% 100%;
+  --tw-secondary: 220 43% 96%;
+  --tw-secondary-foreground: 222 47% 11%;
+  --tw-muted: 220 40% 96%;
+  --tw-muted-foreground: 215 17% 47%;
+  --tw-accent: 188 86% 53%;
+  --tw-accent-foreground: 0 0% 100%;
+  --tw-destructive: 0 84% 60%;
+  --tw-destructive-foreground: 0 0% 100%;
+  --tw-border: 214 30% 88%;
+  --tw-input: 214 30% 88%;
+  --tw-ring: 245 75% 59%;
+  --tw-success: 160 84% 39%;
+
+  --primary: 245 75% 59%;
+  --primary-foreground: 0 0% 100%;
+  --primary-grad-from: 245 75% 59%;
+  --primary-grad-to: 188 86% 43%;
+  --primary-ring: 245 75% 59%;
+
+  --input-bg: #ffffff;
+  --input-border-main: #d5dfeb;
+  --input-border-hover: #b8c6d8;
+  --input-border-focus: var(--accent);
+  --input-placeholder: #94a3b8;
+  --input-error: var(--danger);
+  --input-success: var(--success-strong);
+
+  --table-head-bg: #f2f6fb;
+  --table-row-hover: #f8fbff;
+
+  --tab-track: #edf2f7;
+  --tab-indicator: #ffffff;
+  --tab-text: #64748b;
+  --tab-text-active: #0f172a;
+
+  --menu-surface: #ffffff;
+  --menu-border: #dbe3ef;
+  --header-glass: rgba(255, 255, 255, 0.88);
+  --header-text: #0f172a;
+
+  --shell-main-bg: #f5f7fb;
+  --shell-hero-bg: linear-gradient(135deg, #0f172a 0%, #1e293b 38%, #4f46e5 72%, #22d3ee 100%);
+  --public-overlay-bg: rgba(15, 23, 42, 0.62);
+  --auth-card-bg: rgba(255, 255, 255, 0.94);
+  --card-bg: rgba(255, 255, 255, 0.97);
+  --page-title-bg: rgba(255, 255, 255, 0.95);
+  --section-icon-bg: #e0e7ff;
+  --avatar-bg: #e0e7ff;
+  --menu-item-hover-bg: #eef2ff;
+  --menu-item-active-bg: #e0e7ff;
+
+  --sidebar-bg: linear-gradient(180deg, #0f172a 0%, #1e293b 48%, #312e81 100%);
+  --sidebar-text: #e2e8f0;
+  --sidebar-foreground: #e2e8f0;
+  --sidebar-active-text: #ffffff;
+  --sidebar-muted: rgba(226, 232, 240, 0.72);
+  --sidebar-icon: #7dd3fc;
+  --sidebar-icon-active: #c7d2fe;
+  --sidebar-hover: rgba(255, 255, 255, 0.06);
+  --sidebar-active: rgba(99, 102, 241, 0.2);
+  --sidebar-divider: rgba(255, 255, 255, 0.08);
+  --sidebar-submenu-border: rgba(255, 255, 255, 0.12);
+
+  --shell-hero-from: #0f172a;
+  --shell-hero-mid: #4f46e5;
+  --shell-hero-to: #22d3ee;
+
+  --button-primary-bg: linear-gradient(135deg, #4f46e5 0%, #06b6d4 100%);
+  --button-primary-shadow: 0 12px 28px -16px rgba(79, 70, 229, 0.4);
+  --button-confirm-bg: linear-gradient(135deg, #0f766e 0%, #14b8a6 100%);
+  --button-confirm-shadow: 0 10px 24px -16px rgba(15, 118, 110, 0.34);
+  --button-destructive-bg: #ef4444;
+  --button-destructive-shadow: 0 10px 24px -16px rgba(239, 68, 68, 0.34);
+  --button-outline-bg: #ffffff;
+  --button-secondary-bg: #eef2ff;
+  --button-ghost-hover-bg: #eef2ff;
+
+  --datatable-bg: #ffffff;
+  --empty-icon-bg: #e0e7ff;
+  --tabs-shadow: rgba(15, 23, 42, 0.04);
+  --tab-indicator-shadow: rgba(15, 23, 42, 0.08);
+
+  --stat-sky-bg: #eff6ff;
+  --stat-emerald-bg: #ecfdf5;
+  --stat-violet-bg: #f3e8ff;
+  --stat-rose-bg: #eef2ff;
+  --stat-icon-bg: #ffffff;
+
+  --switch-track-bg: #dbe4f0;
+  --switch-active-bg: #4f46e5;
+
+  --detail-cell-bg: #ffffff;
+  --detail-cell-hover-bg: #f8fbff;
+  --code-card-bg: #eef2ff;
+  --code-panel-bg: #0f172a;
+  --code-copy-hover-bg: #1e293b;
+  --results-badge-bg: #eef2ff;
+  --spending-card-bg: #eff6ff;
+  --message-success-bg: #ecfdf5;
+  --message-error-bg: #fef2f2;
+
+  --balance-value-color: #4f46e5;
+  --spending-value-color: #0f172a;
+  --success-text: #0f766e;
+  --sidebar-active-border: rgba(129, 140, 248, 0.26);
+
+  --tone-emerald: #10b981;
+  --tone-emerald-soft: rgba(16, 185, 129, 0.14);
+  --tone-sky: #0ea5e9;
+  --tone-sky-soft: rgba(14, 165, 233, 0.14);
+  --tone-violet: #8b5cf6;
+  --tone-violet-soft: rgba(139, 92, 246, 0.14);
+  --tone-rose: #4f46e5;
+  --tone-rose-soft: rgba(79, 70, 229, 0.14);
+}
+
+:root[data-ui-color-mode='dark'][data-client-theme='neo-slate'] {
+  color-scheme: dark;
+  --brand-asphalt: #020617;
+  --brand-cobalt: #818cf8;
+  --brand-amethyst: #a78bfa;
+  --brand-moon-spot: #94a3b8;
+  --brand-dolphin: #64748b;
+
+  --bg: #020617;
+  --surface: #0f172a;
+  --surface-strong: #111c34;
+  --surface-elevated: #172033;
+  --grey: #09111f;
+  --grey-strong: #1e293b;
+  --border: #22304a;
+  --border-strong: #334155;
+
+  --text: #d8e2f0;
+  --text-strong: #f8fafc;
+  --muted: #94a3b8;
+
+  --accent: #818cf8;
+  --accent-soft: rgba(129, 140, 248, 0.18);
+  --accent-strong: #67e8f9;
+  --accent-2: #38bdf8;
+  --danger: #fb7185;
+  --danger-soft: rgba(251, 113, 133, 0.16);
+  --success-strong: #2dd4bf;
+  --success-soft: rgba(45, 212, 191, 0.16);
+  --info: #38bdf8;
+  --info-soft: rgba(56, 189, 248, 0.18);
+
+  --shadow: 0 22px 48px -30px rgba(0, 0, 0, 0.74);
+  --shadow-sm: 0 14px 30px -24px rgba(0, 0, 0, 0.58);
+  --menu-shadow: 0 24px 52px -30px rgba(0, 0, 0, 0.66);
+  --focus-ring: rgba(129, 140, 248, 0.24);
+
+  --confirm: 173 72% 46%;
+  --confirm-foreground: 0 0% 100%;
+
+  --tw-background: 222 84% 5%;
+  --tw-foreground: 210 40% 96%;
+  --tw-card: 217 41% 12%;
+  --tw-card-foreground: 210 40% 96%;
+  --tw-popover: 217 41% 12%;
+  --tw-popover-foreground: 210 40% 96%;
+  --tw-primary: 239 84% 73%;
+  --tw-primary-foreground: 222 47% 11%;
+  --tw-secondary: 219 31% 18%;
+  --tw-secondary-foreground: 210 40% 96%;
+  --tw-muted: 218 31% 16%;
+  --tw-muted-foreground: 216 20% 72%;
+  --tw-accent: 188 86% 66%;
+  --tw-accent-foreground: 222 47% 11%;
+  --tw-destructive: 349 88% 70%;
+  --tw-destructive-foreground: 0 0% 100%;
+  --tw-border: 217 33% 22%;
+  --tw-input: 217 33% 22%;
+  --tw-ring: 239 84% 73%;
+  --tw-success: 173 72% 46%;
+
+  --primary: 239 84% 73%;
+  --primary-foreground: 222 47% 11%;
+  --primary-grad-from: 239 84% 73%;
+  --primary-grad-to: 188 86% 46%;
+  --primary-ring: 239 84% 73%;
+
+  --input-bg: #111c34;
+  --input-border-main: #2a3b59;
+  --input-border-hover: #385173;
+  --input-placeholder: #7c92b4;
+
+  --table-head-bg: #111a2d;
+  --table-row-hover: #152038;
+
+  --tab-track: #0f172a;
+  --tab-indicator: #1c2740;
+  --tab-text: #94a3b8;
+  --tab-text-active: #ffffff;
+
+  --menu-surface: #0f172a;
+  --menu-border: #22304a;
+  --header-glass: #0f172a;
+  --header-text: #f8fafc;
+
+  --shell-main-bg: #020617;
+  --shell-hero-bg: linear-gradient(135deg, #020617 0%, #1e1b4b 52%, #0891b2 100%);
+  --public-overlay-bg: rgba(2, 6, 23, 0.8);
+  --auth-card-bg: #0f172a;
+  --card-bg: #0f172a;
+  --page-title-bg: #131d34;
+  --section-icon-bg: #17223b;
+  --avatar-bg: #17223b;
+  --menu-item-hover-bg: #16233b;
+  --menu-item-active-bg: #1b2a46;
+
+  --sidebar-bg: linear-gradient(180deg, #020617 0%, #0f172a 52%, #1e1b4b 100%);
+  --sidebar-text: #dbe6f4;
+  --sidebar-foreground: #dbe6f4;
+  --sidebar-active-text: #ffffff;
+  --sidebar-muted: #94a3b8;
+  --sidebar-icon: #67e8f9;
+  --sidebar-icon-active: #e0f2fe;
+  --sidebar-hover: rgba(255, 255, 255, 0.06);
+  --sidebar-active: rgba(129, 140, 248, 0.18);
+  --sidebar-divider: rgba(255, 255, 255, 0.08);
+  --sidebar-submenu-border: rgba(255, 255, 255, 0.1);
+
+  --button-primary-bg: linear-gradient(135deg, #6366f1 0%, #06b6d4 100%);
+  --button-primary-shadow: 0 16px 32px -18px rgba(99, 102, 241, 0.44);
+  --button-confirm-bg: linear-gradient(135deg, #14b8a6 0%, #2dd4bf 100%);
+  --button-confirm-shadow: 0 14px 28px -18px rgba(45, 212, 191, 0.32);
+  --button-destructive-bg: #fb7185;
+  --button-destructive-shadow: 0 10px 24px -14px rgba(251, 113, 133, 0.34);
+  --button-outline-bg: #111c34;
+  --button-secondary-bg: #16233b;
+  --button-ghost-hover-bg: #16233b;
+
+  --datatable-bg: #0f172a;
+  --empty-icon-bg: #17223b;
+  --tabs-shadow: rgba(0, 0, 0, 0.24);
+  --tab-indicator-shadow: rgba(0, 0, 0, 0.28);
+
+  --stat-sky-bg: #0f1b30;
+  --stat-emerald-bg: #0c2120;
+  --stat-violet-bg: #19183a;
+  --stat-rose-bg: #131a33;
+  --stat-icon-bg: #1b2a46;
+
+  --switch-track-bg: #1d2b43;
+  --switch-active-bg: #818cf8;
+
+  --detail-cell-bg: #111a2d;
+  --detail-cell-hover-bg: #152038;
+  --code-card-bg: #0f172a;
+  --code-panel-bg: #020617;
+  --code-copy-hover-bg: #1b2a46;
+  --results-badge-bg: #17223b;
+  --spending-card-bg: #0f1b30;
+  --message-success-bg: #0d221d;
+  --message-error-bg: #341521;
+
+  --balance-value-color: #a5b4fc;
+  --spending-value-color: #e2e8f0;
+  --success-text: #5eead4;
+  --sidebar-active-border: rgba(129, 140, 248, 0.28);
+
+  --tone-emerald: #2dd4bf;
+  --tone-emerald-soft: rgba(45, 212, 191, 0.18);
+  --tone-sky: #38bdf8;
+  --tone-sky-soft: rgba(56, 189, 248, 0.2);
+  --tone-violet: #a78bfa;
+  --tone-violet-soft: rgba(167, 139, 250, 0.18);
+  --tone-rose: #818cf8;
+  --tone-rose-soft: rgba(129, 140, 248, 0.2);
+}
+
+
+:root[data-client-theme='neo-slate'] body,
+:root[data-client-theme='neo-slate'] input,
+:root[data-client-theme='neo-slate'] button,
+:root[data-client-theme='neo-slate'] select,
+:root[data-client-theme='neo-slate'] textarea {
+  font-family: var(--font-family-base);
+}
+
+:root[data-client-theme='neo-slate'] h1,
+:root[data-client-theme='neo-slate'] h2,
+:root[data-client-theme='neo-slate'] h3,
+:root[data-client-theme='neo-slate'] h4,
+:root[data-client-theme='neo-slate'] h5,
+:root[data-client-theme='neo-slate'] h6 {
+  font-family: var(--font-family-heading);
+}
+
+:root[data-client-theme='neo-slate'] code,
+:root[data-client-theme='neo-slate'] pre {
+  font-family: var(--font-family-mono);
+}
+
+:root[data-client-theme='neo-slate'] [data-client-shell='main-layout'] {
+  background: var(--shell-main-bg);
+  color: var(--text);
+}
+
+:root[data-client-theme='neo-slate'] [data-client-shell='main-layout'] [data-slot='hero-bg'] {
+  background: var(--shell-hero-bg);
+}
+
+:root[data-client-theme='neo-slate'] [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='neo-slate'] [data-client-shell='header'] [data-slot='avatar'] {
+  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='neo-slate'] [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='neo-slate'] [data-client-shell='header'] [data-slot='user-menu'] button:hover {
+  background: var(--menu-item-hover-bg);
+  color: var(--text-strong);
+}
+
+:root[data-client-theme='neo-slate'] [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='neo-slate'] [data-client-shell='public-layout'] [data-slot='overlay'] {
+  background: var(--public-overlay-bg);
+}
+
+:root[data-client-theme='neo-slate'] [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='neo-slate'] [data-main-fe-card],
+:root[data-client-theme='neo-slate'] [data-main-fe-page-title],
+:root[data-client-theme='neo-slate'] [data-main-fe-datatable] {
+  border-color: var(--border-strong);
+  background: var(--card-bg);
+  color: var(--text);
+  box-shadow: var(--shadow);
+  backdrop-filter: none;
+}
+
+:root[data-client-theme='neo-slate'] [data-main-fe-page-title] {
+  background: var(--page-title-bg);
+}
+
+:root[data-ui-color-mode='dark'][data-client-theme='neo-slate'] [data-client-shell='header']:not(.bg-transparent) {
+  border-color: var(--border);
+  box-shadow: 0 18px 36px -28px rgba(0, 0, 0, 0.72);
+}
+
+:root[data-ui-color-mode='dark'][data-client-theme='neo-slate'] [data-main-fe-card],
+:root[data-ui-color-mode='dark'][data-client-theme='neo-slate'] [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='neo-slate'] [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='neo-slate'] [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='neo-slate'] [data-main-fe-input] [data-slot='control'],
+:root[data-ui-color-mode='dark'][data-client-theme='neo-slate'] [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='neo-slate'] [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='neo-slate'] [data-main-fe-page-title] [data-slot='title'],
+:root[data-client-theme='neo-slate'] [data-main-fe-section-title] [data-slot='title'],
+:root[data-client-theme='neo-slate'] [data-main-fe-card] [data-slot='card-title'] {
+  color: var(--text-strong);
+}
+
+:root[data-client-theme='neo-slate'] [data-main-fe-page-title] [data-slot='subtitle'],
+:root[data-client-theme='neo-slate'] [data-main-fe-section-title] [data-slot='subtitle'],
+:root[data-client-theme='neo-slate'] [data-main-fe-card-description] {
+  color: var(--muted);
+}
+
+:root[data-client-theme='neo-slate'] [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='neo-slate'] [data-main-fe-button] {
+  border-color: transparent;
+}
+
+:root[data-client-theme='neo-slate'] [data-main-fe-button]:focus-visible {
+  box-shadow: 0 0 0 4px var(--focus-ring) !important;
+}
+
+:root[data-client-theme='neo-slate'] [data-main-fe-button][data-variant='create'],
+:root[data-client-theme='neo-slate'] [data-main-fe-button][data-variant='default'] {
+  background: var(--button-primary-bg);
+  color: #fff;
+  box-shadow: var(--button-primary-shadow);
+}
+
+:root[data-client-theme='neo-slate'] [data-main-fe-button][data-variant='confirm'] {
+  background: var(--button-confirm-bg);
+  color: #fff;
+  box-shadow: var(--button-confirm-shadow);
+}
+
+:root[data-client-theme='neo-slate'] [data-main-fe-button][data-variant='destructive'] {
+  background: var(--button-destructive-bg);
+  color: #fff;
+  box-shadow: var(--button-destructive-shadow);
+}
+
+:root[data-client-theme='neo-slate'] [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='neo-slate'] [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='neo-slate'] [data-main-fe-button][data-variant='ghost'] {
+  color: var(--text);
+}
+
+:root[data-client-theme='neo-slate'] [data-main-fe-button][data-variant='ghost']:hover {
+  background: var(--button-ghost-hover-bg);
+}
+
+:root[data-client-theme='neo-slate'] [data-main-fe-button][data-variant='link'] {
+  color: var(--accent-strong);
+}
+
+:root[data-client-theme='neo-slate'] [data-main-fe-input] > label,
+:root[data-client-theme='neo-slate'] [data-main-fe-combobox] > label {
+  color: var(--text-strong);
+}
+
+:root[data-client-theme='neo-slate'] [data-main-fe-input] [data-slot='control'],
+:root[data-client-theme='neo-slate'] [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='neo-slate'] [data-main-fe-input] [data-slot='control']::placeholder,
+:root[data-client-theme='neo-slate'] [data-main-fe-combobox] [data-slot='control']::placeholder {
+  color: var(--input-placeholder);
+}
+
+:root[data-client-theme='neo-slate'] [data-main-fe-input] [data-slot='control']:hover,
+:root[data-client-theme='neo-slate'] [data-main-fe-combobox] [data-slot='control']:hover {
+  border-color: var(--input-border-hover);
+}
+
+:root[data-client-theme='neo-slate'] [data-main-fe-input] [data-slot='control']:focus-visible,
+:root[data-client-theme='neo-slate'] [data-main-fe-combobox] [data-slot='control']:focus-visible,
+:root[data-client-theme='neo-slate'] [data-main-fe-input] [data-slot='toggle']:focus-visible {
+  box-shadow: 0 0 0 4px var(--focus-ring) !important;
+}
+
+:root[data-client-theme='neo-slate'] [data-main-fe-input] [data-slot='prefix'],
+:root[data-client-theme='neo-slate'] [data-main-fe-input] [data-slot='suffix-wrap'],
+:root[data-client-theme='neo-slate'] [data-main-fe-combobox] [data-slot='chevron'],
+:root[data-client-theme='neo-slate'] [data-main-fe-combobox] [data-slot='clear'] {
+  color: var(--muted);
+}
+
+:root[data-client-theme='neo-slate'] [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='neo-slate'] [data-main-fe-combobox] [data-slot='option']:hover,
+:root[data-client-theme='neo-slate'] [data-main-fe-combobox] [data-slot='option'][data-highlighted='true'] {
+  background: var(--menu-item-hover-bg);
+  color: var(--text-strong);
+}
+
+:root[data-client-theme='neo-slate'] [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='neo-slate'] [data-main-fe-tabs] [data-slot='indicator'] {
+  background: var(--tab-indicator);
+  box-shadow: 0 1px 2px var(--tab-indicator-shadow);
+}
+
+:root[data-client-theme='neo-slate'] [data-main-fe-tabs] [data-slot='tab'] {
+  color: var(--tab-text);
+}
+
+:root[data-client-theme='neo-slate'] [data-main-fe-tabs] [data-slot='tab'][data-active='true'] {
+  color: var(--tab-text-active);
+}
+
+:root[data-client-theme='neo-slate'] [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='neo-slate'] [data-main-fe-datatable] [data-slot='sticky-header'],
+:root[data-client-theme='neo-slate'] [data-main-fe-datatable] [data-slot='header'],
+:root[data-client-theme='neo-slate'] [data-main-fe-datatable] [data-slot='head-row'] {
+  background: var(--table-head-bg) !important;
+}
+
+:root[data-client-theme='neo-slate'] [data-main-fe-datatable] th,
+:root[data-client-theme='neo-slate'] [data-main-fe-datatable] td {
+  color: var(--text);
+  border-color: var(--border);
+}
+
+:root[data-client-theme='neo-slate'] [data-main-fe-datatable] th {
+  color: var(--muted) !important;
+}
+
+:root[data-client-theme='neo-slate'] [data-main-fe-datatable] [data-slot='body-row']:hover {
+  background: var(--table-row-hover) !important;
+}
+
+:root[data-client-theme='neo-slate'] [data-main-fe-datatable] [data-slot='empty-icon'] {
+  background: var(--empty-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='neo-slate'] [data-main-fe-pagination] {
+  border-top-color: var(--border);
+  color: var(--muted);
+}
+
+:root[data-client-theme='neo-slate'] [data-main-fe-pagination] [data-slot='page-size'],
+:root[data-client-theme='neo-slate'] [data-main-fe-pagination] [data-slot='current'] {
+  color: var(--text);
+}
+
+:root[data-client-theme='neo-slate'] [data-main-fe-pagination] [data-slot='page-size-select'],
+:root[data-client-theme='neo-slate'] [data-main-fe-pagination] [data-slot='nav-button'] {
+  border-color: var(--border);
+  background: var(--surface);
+  color: var(--text);
+}
+
+:root[data-client-theme='neo-slate'] [data-main-fe-pagination] [data-slot='nav-button']:hover,
+:root[data-client-theme='neo-slate'] [data-main-fe-pagination] [data-slot='page-size-select']:hover {
+  background: var(--surface-strong);
+}
+
+:root[data-client-theme='neo-slate'] [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='neo-slate'] [data-main-fe-sidebar] [data-slot='header'] {
+  padding-top: 16px;
+  padding-bottom: 8px;
+}
+
+:root[data-client-theme='neo-slate'] [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='neo-slate'] [data-main-fe-sidebar] [data-slot='brand-label'] {
+  color: var(--sidebar-active-text);
+}
+
+:root[data-client-theme='neo-slate'] [data-main-fe-sidebar] [data-slot='divider'] {
+  background: transparent;
+  margin-top: 0;
+  margin-bottom: 8px;
+  height: 0;
+}
+
+:root[data-client-theme='neo-slate'] [data-main-fe-sidebar-item] [data-slot='action'] {
+  color: var(--sidebar-text);
+  background: transparent !important;
+  box-shadow: none !important;
+}
+
+:root[data-client-theme='neo-slate'] [data-main-fe-sidebar-item] [data-slot='icon'] {
+  color: var(--sidebar-icon);
+}
+
+:root[data-client-theme='neo-slate'] [data-main-fe-sidebar-item] [data-slot='label'] {
+  color: var(--sidebar-text);
+}
+
+:root[data-client-theme='neo-slate'] [data-main-fe-sidebar-item] [data-slot='row'][data-active='true'],
+:root[data-client-theme='neo-slate'] [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='neo-slate'] [data-main-fe-sidebar-item] [data-slot='row'][data-active='true'] [data-slot='action'],
+:root[data-client-theme='neo-slate'] [data-main-fe-sidebar-item] [data-slot='row'][data-branch-active='true'] [data-slot='action'],
+:root[data-client-theme='neo-slate'] [data-main-fe-sidebar-item] [data-slot='row'][data-active='true'] [data-slot='label'],
+:root[data-client-theme='neo-slate'] [data-main-fe-sidebar-item] [data-slot='row'][data-branch-active='true'] [data-slot='label'] {
+  color: var(--sidebar-active-text);
+}
+
+:root[data-client-theme='neo-slate'] [data-main-fe-sidebar-item] [data-slot='row'][data-active='true'] [data-slot='icon'],
+:root[data-client-theme='neo-slate'] [data-main-fe-sidebar-item] [data-slot='row'][data-branch-active='true'] [data-slot='icon'] {
+  color: var(--sidebar-icon-active);
+}
+
+:root[data-client-theme='neo-slate'] [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='neo-slate'] [data-main-fe-sidebar-item] [data-slot='submenu'] {
+  border-color: var(--sidebar-submenu-border);
+}
+
+:root[data-client-theme='neo-slate'] [data-main-fe-stat-card][data-tone='sky'] {
+  border-color: var(--border) !important;
+  background: var(--stat-sky-bg) !important;
+}
+
+:root[data-client-theme='neo-slate'] [data-main-fe-stat-card][data-tone='emerald'] {
+  border-color: var(--border) !important;
+  background: var(--stat-emerald-bg) !important;
+}
+
+:root[data-client-theme='neo-slate'] [data-main-fe-stat-card][data-tone='violet'] {
+  border-color: var(--border) !important;
+  background: var(--stat-violet-bg) !important;
+}
+
+:root[data-client-theme='neo-slate'] [data-main-fe-stat-card][data-tone='rose'] {
+  border-color: var(--border) !important;
+  background: var(--stat-rose-bg) !important;
+}
+
+:root[data-client-theme='neo-slate'] [data-main-fe-stat-card] [data-slot='label'] {
+  color: var(--muted);
+}
+
+:root[data-client-theme='neo-slate'] [data-main-fe-stat-card] [data-slot='value'] {
+  color: var(--text-strong);
+}
+
+:root[data-client-theme='neo-slate'] [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.72);
+}
+
+:root[data-client-theme='neo-slate'] [data-main-fe-switch] [data-slot='track'] {
+  border-color: var(--border-strong);
+  background: var(--switch-track-bg);
+}
+
+:root[data-client-theme='neo-slate'] [data-main-fe-switch] input:checked + [data-slot='track'] {
+  border-color: var(--accent-strong);
+  background: var(--switch-active-bg);
+}
+
+:root[data-client-theme='neo-slate'] [data-client-home='test-api'] [data-slot='base-url'],
+:root[data-client-theme='neo-slate'] [data-client-models='model-card'] [data-slot='pricing'],
+:root[data-client-theme='neo-slate'] [data-client-home='usage-overview'] [data-slot='model-row'],
+:root[data-client-theme='neo-slate'] [data-client-request-logs='detail'] [data-slot='detail-cell'] {
+  border-color: var(--border) !important;
+  background: var(--detail-cell-bg) !important;
+  box-shadow: none !important;
+}
+
+:root[data-client-theme='neo-slate'] [data-client-home='usage-overview'] [data-slot='model-row']:hover {
+  border-color: var(--border-strong) !important;
+  background: var(--detail-cell-hover-bg) !important;
+}
+
+:root[data-client-theme='neo-slate'] [data-client-home='test-api'] [data-slot='base-url-value'] {
+  color: var(--muted) !important;
+}
+
+:root[data-client-theme='neo-slate'] [data-client-home='test-api'] [data-slot='base-url-copy'] {
+  color: var(--accent) !important;
+}
+
+:root[data-client-theme='neo-slate'] [data-client-home='test-api'] [data-slot='base-url-copy']:hover {
+  color: var(--accent-strong) !important;
+}
+
+:root[data-client-theme='neo-slate'] [data-client-home='test-api'] [data-slot='code-card'] {
+  border-color: var(--border) !important;
+  background: var(--code-card-bg) !important;
+}
+
+:root[data-client-theme='neo-slate'] [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='neo-slate'] [data-client-home='test-api'] [data-slot='code-pre'] {
+  color: #eff6ff !important;
+}
+
+:root[data-client-theme='neo-slate'] [data-client-home='test-api'] [data-slot='copy-code'] {
+  color: #a5d8ff !important;
+}
+
+:root[data-client-theme='neo-slate'] [data-client-home='test-api'] [data-slot='copy-code']:hover {
+  background: var(--code-copy-hover-bg) !important;
+  color: #ffffff !important;
+}
+
+:root[data-client-theme='neo-slate'] [data-client-home='metrics'] [data-slot='metrics-title'],
+:root[data-client-theme='neo-slate'] [data-client-home='usage-overview'] [data-slot='models-title'],
+:root[data-client-theme='neo-slate'] [data-client-home='test-api'] [data-slot='field-label'] {
+  color: var(--text-strong) !important;
+}
+
+:root[data-client-theme='neo-slate'] [data-client-home='metrics'] [data-slot='balance-value'] {
+  color: var(--balance-value-color) !important;
+}
+
+:root[data-client-theme='neo-slate'] [data-client-home='metrics'] [data-slot='spending-value'] {
+  color: var(--spending-value-color) !important;
+}
+
+:root[data-client-theme='neo-slate'] [data-client-dashboard='page'] [data-slot='filters'],
+:root[data-client-theme='neo-slate'] [data-client-dashboard='page'] [data-slot='chart-card'],
+:root[data-client-theme='neo-slate'] [data-client-models='filters'],
+:root[data-client-theme='neo-slate'] [data-client-models='page'] [data-slot='empty-state'],
+:root[data-client-theme='neo-slate'] [data-client-api-keys='page'] [data-slot='toolbar'],
+:root[data-client-theme='neo-slate'] [data-client-credit='history'] [data-slot='filters'],
+:root[data-client-theme='neo-slate'] [data-client-credit='topup'] [data-slot='redeem-panel'],
+:root[data-client-theme='neo-slate'] [data-client-credit='topup'] [data-slot='notice'],
+:root[data-client-theme='neo-slate'] [data-client-credit='overview'] [data-slot='stats-shell'] {
+  border-color: var(--border) !important;
+  background: var(--card-bg) !important;
+  box-shadow: var(--shadow) !important;
+}
+
+:root[data-client-theme='neo-slate'] [data-client-api-keys='page'] [data-slot='page-title-shell'] [data-main-fe-page-title],
+:root[data-client-theme='neo-slate'] [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='neo-slate'] [data-client-dashboard='page'] [data-slot='modal-overlay'],
+:root[data-client-theme='neo-slate'] [data-client-models='page'] [data-slot='modal-overlay'],
+:root[data-client-theme='neo-slate'] [data-client-api-keys='modal'] [data-slot='modal-overlay'],
+:root[data-client-theme='neo-slate'] [data-client-api-keys='confirm'] [data-slot='modal-overlay'],
+:root[data-client-theme='neo-slate'] [data-client-credit='modal'][data-slot='overlay'] {
+  background: var(--public-overlay-bg) !important;
+  backdrop-filter: none !important;
+}
+
+:root[data-client-theme='neo-slate'] [data-client-dashboard='page'] [data-slot='modal-panel'],
+:root[data-client-theme='neo-slate'] [data-client-models='page'] [data-slot='modal-panel'],
+:root[data-client-theme='neo-slate'] [data-client-api-keys='modal'] [data-slot='modal-panel'],
+:root[data-client-theme='neo-slate'] [data-client-api-keys='confirm'] [data-slot='modal-panel'],
+:root[data-client-theme='neo-slate'] [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='neo-slate'] [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='neo-slate'] [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='neo-slate'] [data-client-models='model-card']:hover {
+  border-color: var(--border-strong) !important;
+  box-shadow: var(--shadow) !important;
+}
+
+:root[data-client-theme='neo-slate'] [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='neo-slate'] [data-client-credit='wallet'] [data-slot='tab'] {
+  color: var(--text) !important;
+  background: transparent !important;
+  box-shadow: none !important;
+}
+
+:root[data-client-theme='neo-slate'] [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='neo-slate'] [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='neo-slate'] [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='neo-slate'] [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='neo-slate'] [data-client-credit='overview'] [data-slot='topup-action'],
+:root[data-client-theme='neo-slate'] [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='neo-slate'] [data-client-credit='overview'] [data-slot='stat-item'] {
+  border-color: var(--border) !important;
+  background: var(--surface-strong) !important;
+}
+
+:root[data-client-theme='neo-slate'] [data-client-credit='topup'] [data-slot='coupon-input'] {
+  border-color: var(--input-border-main) !important;
+  background: var(--input-bg) !important;
+  color: var(--text) !important;
+}
+
+:root[data-client-theme='neo-slate'] [data-client-credit='topup'] [data-slot='coupon-input']::placeholder {
+  color: var(--input-placeholder) !important;
+}
+
+:root[data-client-theme='neo-slate'] [data-client-credit='topup'] [data-slot='message'][data-type='success'] {
+  border-color: color-mix(in srgb, var(--success-strong) 26%, var(--border)) !important;
+  background: var(--message-success-bg) !important;
+  color: var(--success-text) !important;
+}
+
+:root[data-client-theme='neo-slate'] [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='neo-slate'] [data-client-dashboard='page'],
+:root[data-client-theme='neo-slate'] [data-client-models='page'],
+:root[data-client-theme='neo-slate'] [data-client-credit='wallet'],
+:root[data-client-theme='neo-slate'] [data-client-api-keys='page'],
+:root[data-client-theme='neo-slate'] [data-client-request-logs='page'] {
+  color: var(--text);
+}