:root {
  color-scheme: light dark;
  --ch-color-page: #f3f6fa;
  --ch-color-surface: #ffffff;
  --ch-color-surface-raised: #ffffff;
  --ch-color-text: #172033;
  --ch-color-text-muted: #667085;
  --ch-color-border: #dce3ed;
  --ch-color-primary: #1769e0;
  --ch-color-primary-hover: #1157bd;
  --ch-color-focus: #3b82f6;
  --ch-color-success: #16835d;
  --ch-color-warning: #a15c00;
  --ch-color-danger: #c4323f;
  --ch-color-disabled: #98a2b3;

  --ch-space-1: 0.25rem;
  --ch-space-2: 0.5rem;
  --ch-space-3: 0.75rem;
  --ch-space-4: 1rem;
  --ch-space-5: 1.25rem;
  --ch-space-6: 1.5rem;
  --ch-space-8: 2rem;
  --ch-space-10: 2.5rem;

  --ch-radius-control: 0.5rem;
  --ch-radius-card: 0.75rem;
  --ch-radius-panel: 1rem;
  --ch-radius-pill: 999px;

  --ch-type-family: Inter, "PingFang SC", "Microsoft YaHei", system-ui, sans-serif;
  --ch-type-size-meta: 0.75rem;
  --ch-type-size-label: 0.875rem;
  --ch-type-size-body: 1rem;
  --ch-type-size-section: 1.25rem;
  --ch-type-size-title: 1.75rem;
  --ch-type-line-body: 1.5;
  --ch-type-weight-medium: 500;
  --ch-type-weight-strong: 650;

  --ch-motion-fast: 120ms;
  --ch-motion-standard: 180ms;
}

.control-config-announcement {
  position: sticky;
  z-index: 50;
  top: 0;
  margin: 0 0 8px;
  padding: 8px 14px;
  background: var(--ch-color-primary);
  color: #fff;
  text-align: center;
  font-size: 13px;
  line-height: 1.4;
  border-radius: 0 0 8px 8px;
}

body.login-screen .control-config-announcement {
  display: none !important;
}

[data-density="compact"] { --ch-space-5: 16px; --ch-space-6: 20px; }
[data-navigation="rail"] nav { --control-config-navigation-size: 76px; }
[data-navigation="bottom"] nav { --control-config-navigation-position: bottom; }

[data-theme="light"] {
  color-scheme: light;
}

[data-theme="dark"] {
  color-scheme: dark;
  --ch-color-page: #0d1422;
  --ch-color-surface: #151f30;
  --ch-color-surface-raised: #1b273a;
  --ch-color-text: #eef4ff;
  --ch-color-text-muted: #a7b3c7;
  --ch-color-border: #344158;
  --ch-color-primary: #69a5ff;
  --ch-color-primary-hover: #8bb9ff;
  --ch-color-focus: #8bb9ff;
  --ch-color-success: #5dd5a5;
  --ch-color-warning: #f4bd63;
  --ch-color-danger: #ff8792;
  --ch-color-disabled: #6b778c;
}

[data-theme="system"] {
  color-scheme: light dark;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme]),
  [data-theme="system"] {
    --ch-color-page: #0d1422;
    --ch-color-surface: #151f30;
    --ch-color-surface-raised: #1b273a;
    --ch-color-text: #eef4ff;
    --ch-color-text-muted: #a7b3c7;
    --ch-color-border: #344158;
    --ch-color-primary: #69a5ff;
    --ch-color-primary-hover: #8bb9ff;
    --ch-color-focus: #8bb9ff;
    --ch-color-success: #5dd5a5;
    --ch-color-warning: #f4bd63;
    --ch-color-danger: #ff8792;
    --ch-color-disabled: #6b778c;
  }
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --ch-motion-fast: 0ms;
    --ch-motion-standard: 0ms;
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
  }
}