:root,
.yingce-brand-violet-light,
#root .yingce-brand-violet-light {
  color-scheme: light;
  --lib-bg: #f5f6f7;
  --lib-sidebar: #ffffff;
  --lib-surface: #ffffff;
  --lib-surface-alt: #f0f2f3;
  --lib-surface-strong: #e5e8ea;
  --lib-surface-hover: #eaedef;
  --lib-border: #dde1e4;
  --lib-border-strong: #c9cfd3;
  --lib-text: #17191b;
  --lib-muted: #62686d;
  --lib-subtle: #858c91;
  --lib-accent: #128f97;
  --lib-accent-hover: #087c84;
  --lib-accent-soft: #dff5f6;
  --lib-on-accent: #ffffff;
  --lib-glow: rgb(18 143 151 / 8%);
  --lib-glass: rgb(255 255 255 / 92%);
  --lib-shadow: rgb(16 24 32 / 10%);
  --lib-shadow-strong: rgb(16 24 32 / 18%);
  --lib-overlay: rgb(17 25 32 / 48%);

  --background: var(--lib-bg);
  --foreground: var(--lib-text);
  --surface: var(--lib-surface);
  --surface-card: var(--lib-surface);
  --surface-card-hover: var(--lib-surface-hover);
  --surface-hover: var(--lib-surface-hover);
  --surface-active: var(--lib-surface-strong);
  --muted: var(--lib-surface-alt);
  --muted-foreground: var(--lib-muted);
  --border: var(--lib-border);
  --color-border: var(--lib-border);
  --primary: var(--lib-accent);
  --primary-foreground: var(--lib-on-accent);
  --secondary: var(--lib-surface-alt);
  --secondary-foreground: var(--lib-text);
  --accent: var(--lib-accent-soft);
  --accent-foreground: var(--lib-accent);
  --accent-soft: var(--lib-accent-soft);
  --workspace-accent: var(--lib-accent);
  --workspace-border: var(--lib-border);
  --workspace-border-strong: var(--lib-border-strong);
  --workspace-glass-border: rgb(16 24 32 / 10%);
  --workspace-surface: var(--lib-surface);
  --workspace-surface-strong: var(--lib-surface-strong);
  --workspace-text-muted: var(--lib-muted);
  --sidebar-accent: var(--lib-surface-hover);
  --sidebar-border: var(--lib-border);
  --sidebar-primary: var(--lib-accent);
  --sidebar-primary-foreground: var(--lib-on-accent);
  --card-surface: var(--lib-surface);
  --card-border: var(--lib-border);
  --card-border-hover: var(--lib-border-strong);
  --library-surface: var(--lib-surface);
  --page-topbar-surface: var(--lib-glass);
  --page-topbar-border: var(--lib-border);
  --popover: var(--lib-surface);
  --popover-foreground: var(--lib-text);
  --icon-foreground: var(--lib-text);
  --button-primary-bg: var(--lib-accent);
  --button-primary-hover-bg: var(--lib-accent-hover);
  --button-primary-active-bg: var(--lib-accent-hover);
  --btn-outline-border: var(--lib-border);
  --btn-outline-hover-border: var(--lib-border-strong);
  --unified-input-surface: var(--lib-surface-alt);
  --unified-input-surface-hover: var(--lib-surface-hover);
  --unified-input-surface-focus: var(--lib-accent-soft);
  --cn-spatial-surface: var(--lib-surface);
  --cn-spatial-surface-strong: var(--lib-surface-strong);
  --cn-spatial-toolbar-border: var(--lib-border);
  --canvas-topbar-surface: var(--lib-glass);
  --canvas-cover-surface: var(--lib-surface-alt);
  --canvas-icon-surface: var(--lib-surface-strong);
  --canvas-folder-ink: var(--lib-text);
  --canvas-folder-edge: var(--lib-border-strong);
  --canvas-folder-action-bg: var(--lib-accent);
  --canvas-folder-action-fg: var(--lib-on-accent);
  --project-library-surface: var(--lib-surface);
  --project-library-cover-surface: var(--lib-surface-alt);
  --project-library-icon-surface: var(--lib-surface-strong);
  --auth-muted: var(--lib-muted);
  --r-xs: 4px;
  --r-sm: 6px;
  --r-md: 8px;
  --r-2xl: 12px;
  --r-3xl: 16px;
}

html.dark,
.yingce-brand-violet-dark,
#root .yingce-brand-violet-dark {
  color-scheme: dark;
  --lib-bg: #111112;
  --lib-sidebar: #0d0d0e;
  --lib-surface: #19191b;
  --lib-surface-alt: #202023;
  --lib-surface-strong: #29292d;
  --lib-surface-hover: #242427;
  --lib-border: #2d2d31;
  --lib-border-strong: #414147;
  --lib-text: #f2f2f2;
  --lib-muted: #a0a0a7;
  --lib-subtle: #77777e;
  --lib-accent: #61d8dd;
  --lib-accent-hover: #7de3e7;
  --lib-accent-soft: #20383a;
  --lib-on-accent: #071415;
  --lib-glow: rgb(97 216 221 / 7%);
  --lib-glass: rgb(17 17 18 / 94%);
  --lib-shadow: rgb(0 0 0 / 28%);
  --lib-shadow-strong: rgb(0 0 0 / 48%);
  --lib-overlay: rgb(0 0 0 / 60%);

  --background: var(--lib-bg);
  --foreground: var(--lib-text);
  --surface: var(--lib-surface);
  --surface-card: #1c1c1e;
  --surface-card-hover: var(--lib-surface-hover);
  --surface-hover: var(--lib-surface-hover);
  --surface-active: var(--lib-surface-strong);
  --muted: var(--lib-surface-alt);
  --muted-foreground: var(--lib-muted);
  --border: var(--lib-border);
  --color-border: var(--lib-border);
  --primary: var(--lib-accent);
  --primary-foreground: var(--lib-on-accent);
  --secondary: var(--lib-surface-alt);
  --secondary-foreground: var(--lib-text);
  --accent: var(--lib-accent-soft);
  --accent-foreground: #87e7ea;
  --accent-soft: var(--lib-accent-soft);
  --workspace-accent: var(--lib-accent);
  --workspace-border: var(--lib-border);
  --workspace-border-strong: var(--lib-border-strong);
  --workspace-glass-border: rgb(255 255 255 / 9%);
  --workspace-surface: var(--lib-surface);
  --workspace-surface-strong: var(--lib-surface-strong);
  --workspace-text-muted: var(--lib-muted);
  --sidebar-accent: var(--lib-surface-hover);
  --sidebar-border: var(--lib-border);
  --sidebar-primary: var(--lib-accent);
  --sidebar-primary-foreground: var(--lib-on-accent);
  --card-surface: #1c1c1e;
  --card-border: var(--lib-border);
  --card-border-hover: var(--lib-border-strong);
  --library-surface: var(--lib-surface);
  --page-topbar-surface: var(--lib-glass);
  --page-topbar-border: var(--lib-border);
  --popover: #1d1d20;
  --popover-foreground: var(--lib-text);
  --icon-foreground: #d7d7db;
  --button-primary-bg: var(--lib-accent);
  --button-primary-hover-bg: var(--lib-accent-hover);
  --button-primary-active-bg: #4bc5ca;
  --btn-outline-border: rgb(255 255 255 / 13%);
  --btn-outline-hover-border: rgb(255 255 255 / 25%);
  --unified-input-surface: rgb(255 255 255 / 6%);
  --unified-input-surface-hover: rgb(255 255 255 / 9%);
  --unified-input-surface-focus: rgb(97 216 221 / 12%);
  --cn-spatial-surface: var(--lib-surface);
  --cn-spatial-surface-strong: var(--lib-surface-strong);
  --cn-spatial-toolbar-border: var(--lib-border);
  --canvas-topbar-surface: var(--lib-glass);
  --canvas-cover-surface: var(--lib-surface-alt);
  --canvas-icon-surface: var(--lib-surface-strong);
  --canvas-folder-ink: var(--lib-text);
  --canvas-folder-edge: var(--lib-border-strong);
  --canvas-folder-action-bg: var(--lib-accent);
  --canvas-folder-action-fg: var(--lib-on-accent);
  --project-library-surface: var(--lib-surface);
  --project-library-cover-surface: var(--lib-surface-alt);
  --project-library-icon-surface: var(--lib-surface-strong);
  --auth-muted: var(--lib-muted);
}

html,
body,
#root {
  background: var(--lib-bg) !important;
  color: var(--lib-text);
}

body {
  letter-spacing: 0;
}

::selection {
  background: color-mix(in srgb, var(--lib-accent) 30%, transparent);
  color: var(--lib-text);
}

* {
  scrollbar-color: var(--lib-border-strong) transparent;
}

#root > .ant-app,
#root .app-user-workspace,
#root .app-workspace-shell,
#root .app-workspace-stage,
#root .creation-home,
#root .auth-scene,
#root .auth-scene-form-pane,
#root .project-library-page,
#root .plugins-page,
#root .skills-page,
#root .tasks-page {
  background: var(--lib-bg) !important;
  color: var(--lib-text) !important;
}

#root .app-workspace-sidebar,
#root .app-workspace-sidebar-nav {
  background: var(--lib-sidebar) !important;
  color: var(--lib-text) !important;
  border-color: var(--lib-border) !important;
}

#root .app-workspace-sidebar {
  border-right: 1px solid var(--lib-border);
}

#root .app-workspace-sidebar-brand-button:hover,
#root .app-workspace-sidebar-profile:hover,
#root .app-workspace-nav-link:hover {
  background: var(--lib-surface-hover) !important;
}

#root .app-workspace-brand-mark,
#root .brand-logo-frame {
  background: var(--lib-accent-soft) !important;
  color: var(--lib-accent) !important;
  border: 1px solid color-mix(in srgb, var(--lib-accent) 24%, transparent);
  box-shadow: none !important;
}

#root .app-workspace-brand-wordmark {
  color: var(--lib-text) !important;
}

#root .app-workspace-nav-link,
#root .app-workspace-nav-link .app-workspace-nav-main,
#root .app-workspace-nav-link .app-workspace-nav-title {
  color: var(--lib-muted) !important;
  border-radius: 7px !important;
}

#root .app-workspace-nav-link.is-active,
#root .app-workspace-nav-link.is-active .app-workspace-nav-main,
#root .app-workspace-nav-link.is-active .app-workspace-nav-title {
  background: var(--lib-surface-alt) !important;
  color: var(--lib-text) !important;
}

#root .app-workspace-nav-active-pill {
  background: var(--lib-surface-alt) !important;
  box-shadow: inset 3px 0 0 var(--lib-accent) !important;
}

#root .app-workspace-nav-group-label,
#root .app-workspace-topbar-breadcrumb,
#root .app-workspace-sidebar-footer {
  color: var(--lib-subtle) !important;
}

#root .app-workspace-sidebar-profile,
#root .app-workspace-sidebar-profile * {
  color: var(--lib-muted) !important;
}

#root .app-workspace-sidebar-profile-avatar {
  background: var(--lib-surface-strong) !important;
  color: var(--lib-muted) !important;
}

#root .app-workspace-topbar {
  background: var(--lib-glass) !important;
  color: var(--lib-text) !important;
  border-color: var(--lib-border) !important;
  box-shadow: none !important;
  backdrop-filter: blur(18px);
}

#root .app-workspace-topbar-credit-pill,
#root .app-workspace-topbar-icon-button,
#root .app-workspace-mobile-menu {
  background: var(--lib-surface) !important;
  color: var(--lib-text) !important;
  border: 1px solid var(--lib-border) !important;
  box-shadow: none !important;
}

#root .creation-home-scroll {
  background:
    radial-gradient(circle at 50% -20%, var(--lib-glow), transparent 34%),
    var(--lib-bg) !important;
}

#root .creation-history-entry,
#root .creation-mode-tabs,
#root .creation-chat-control,
#root .creation-voice-trigger,
#root .creation-model-picker,
#root .creation-canvas-tile,
#root .creation-canvas-strip-state,
#root .creation-source-notice,
#root .library-icon-tile,
#root .app-pagination-btn,
#root .ant-btn-default {
  background: var(--lib-surface-alt) !important;
  color: var(--lib-muted) !important;
  border-color: var(--lib-border) !important;
  box-shadow: none !important;
}

#root .creation-mode-indicator,
#root .app-pagination-btn.is-active {
  background: var(--lib-surface-strong) !important;
  color: var(--lib-text) !important;
  border-color: var(--lib-border-strong) !important;
  box-shadow: none !important;
}

#root .creation-mode-button,
#root .creation-mode-button * {
  color: var(--lib-muted) !important;
}

#root .creation-mode-button[aria-pressed="true"],
#root .creation-mode-button[aria-pressed="true"] *,
#root .creation-mode-button[aria-checked="true"],
#root .creation-mode-button[aria-checked="true"] * {
  color: var(--lib-text) !important;
}

#root .creation-mode-spark {
  background: var(--lib-accent) !important;
}

#root .creation-chat-composer,
#root .creation-chat-writing-surface,
#root .creation-empty-composer,
#root .creation-chat-composer > .pointer-events-none {
  background: var(--lib-surface) !important;
  color: var(--lib-text) !important;
  border-color: var(--lib-border) !important;
  box-shadow: 0 18px 50px var(--lib-shadow) !important;
}

#root .creation-chat-editor,
#root .creation-chat-mention-editor,
#root .creation-chat-mention-editor [contenteditable="true"] {
  color: var(--lib-text) !important;
  caret-color: var(--lib-accent);
}

#root .creation-chat-editor::placeholder,
#root .creation-chat-mention-editor::placeholder,
#root input::placeholder,
#root textarea::placeholder {
  color: var(--lib-subtle) !important;
}

#root .creation-model-picker,
#root .creation-model-picker * {
  color: var(--lib-muted) !important;
}

#root .creation-submit-action:not(:disabled),
#root .creation-submit-action:not(:disabled) *,
#root .ant-btn-primary,
#root .ant-btn-primary * {
  background: var(--lib-accent) !important;
  color: var(--lib-on-accent) !important;
  border-color: transparent !important;
  box-shadow: none !important;
}

#root .creation-submit-action:disabled,
#root .creation-submit-action:disabled * {
  background: var(--lib-surface-strong) !important;
  color: var(--lib-subtle) !important;
}

#root .creation-empty-suggest,
#root .creation-canvas-strip-item,
#root .suggest-card,
#root [class*="inspiration-card"],
#root [class*="library-card"],
#root [class*="plugin-card"],
#root [class*="skill-card"],
#root [class*="task-card"] {
  background: var(--lib-surface) !important;
  color: var(--lib-text) !important;
  border-color: var(--lib-border) !important;
  box-shadow: none !important;
}

#root .creation-empty-suggest:hover,
#root .creation-canvas-strip-item:hover,
#root .suggest-card:hover,
#root [class*="inspiration-card"]:hover,
#root [class*="library-card"]:hover,
#root [class*="plugin-card"]:hover,
#root [class*="skill-card"]:hover,
#root [class*="task-card"]:hover {
  background: var(--lib-surface-hover) !important;
  border-color: var(--lib-border-strong) !important;
}

#root .app-workspace-stage h1,
#root .app-workspace-stage h2,
#root .app-workspace-stage h3,
#root .app-workspace-stage h4,
#root .app-workspace-stage strong,
#root .creation-section-heading,
#root .inspiration-hall-header,
#root .inspiration-card,
#root .inspiration-card-open,
#root .suggest-card,
#root .suggest-copy {
  color: var(--lib-text) !important;
}

#root .app-workspace-stage p,
#root .app-workspace-stage small,
#root .creation-section-link,
#root .inspiration-mode-count,
#root .inspiration-card-description,
#root .inspiration-card-meta,
#root .suggest-card span,
#root .suggest-card p,
#root .inspiration-card p,
#root .inspiration-card small,
#root .inspiration-card [class*="description"],
#root .inspiration-card [class*="meta"] {
  color: var(--lib-muted) !important;
}

#root .inspiration-hall-filter-toggle,
#root .inspiration-hall-filter-toggle *,
#root .inspiration-hall-actions .ant-btn-default,
#root .inspiration-hall-actions .ant-btn-default * {
  color: var(--lib-muted) !important;
}

#root .bg-white,
#root .bg-surface,
#root .bg-surface-strong,
#root .bg-surface-secondary,
#root .bg-surface-tertiary {
  background-color: var(--lib-surface) !important;
}

#root .text-foreground\/60,
#root .text-foreground\/62,
#root .text-foreground\/65,
#root .text-muted-foreground {
  color: var(--lib-muted) !important;
}

#root .border-border,
#root .border-border\/60,
#root .border-border\/70 {
  border-color: var(--lib-border) !important;
}

#root input,
#root textarea,
#root select,
#root .ant-input,
#root .ant-input-affix-wrapper,
#root .ant-select-selector {
  background: var(--lib-surface) !important;
  color: var(--lib-text) !important;
  border-color: var(--lib-border-strong) !important;
  box-shadow: none !important;
}

#root input:focus,
#root textarea:focus,
#root .ant-input-affix-wrapper-focused,
#root .ant-select-focused .ant-select-selector {
  border-color: var(--lib-accent) !important;
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--lib-accent) 14%, transparent) !important;
}

#root .ant-dropdown,
#root .ant-dropdown-menu,
#root .ant-popover-inner,
#root .ant-modal-content,
#root .ant-drawer-content,
#root .ant-select-dropdown,
#root [role="dialog"],
#root [role="menu"] {
  background: var(--lib-surface) !important;
  color: var(--lib-text) !important;
  border-color: var(--lib-border) !important;
  box-shadow: 0 18px 60px var(--lib-shadow-strong) !important;
}

#root .auth-scene-hero {
  background:
    linear-gradient(180deg, transparent, var(--lib-overlay)),
    var(--lib-surface-alt) !important;
  border-color: var(--lib-border) !important;
}

#root .auth-scene-form-pane {
  background: var(--lib-bg) !important;
}

#root .auth-scene-card {
  background: var(--lib-surface) !important;
  color: var(--lib-text) !important;
  border: 1px solid var(--lib-border) !important;
  border-radius: 8px !important;
  box-shadow: 0 24px 70px var(--lib-shadow) !important;
}

#root .auth-scene-hero-control,
#root .auth-scene-return {
  background: color-mix(in srgb, var(--lib-surface) 86%, transparent) !important;
  color: var(--lib-text) !important;
  border-color: var(--lib-border-strong) !important;
}

#root .auth-scene-eyebrow,
#root .auth-scene-link,
#root .ant-tabs-tab-active .ant-tabs-tab-btn,
#root a:hover {
  color: var(--lib-accent) !important;
}

#root .ant-tabs-ink-bar {
  background: var(--lib-accent) !important;
}

#root .site-compliance-footer,
#root .site-compliance-footer.is-auth {
  background: var(--lib-bg) !important;
  color: var(--lib-subtle) !important;
  border-color: var(--lib-border) !important;
}

@media (max-width: 720px) {
  #root .app-workspace-sidebar,
  #root .app-workspace-sidebar-nav {
    background: var(--lib-sidebar) !important;
  }

  #root .creation-chat-composer,
  #root .creation-empty-composer {
    border-radius: 14px !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
  }
}