:root {
  color-scheme: light;
  --ui-page: #f6f8fb;
  --ui-surface: #ffffff;
  --ui-surface-muted: #f8fafc;
  --ui-surface-soft: #f1f5f9;
  --ui-border: #e2e8f0;
  --ui-border-strong: #cbd5e1;
  --ui-text: #172033;
  --ui-text-muted: #526175;
  --ui-text-subtle: #617087;
  --ui-primary: #3157d5;
  --ui-primary-soft: #eef2ff;
  --ui-on-primary: #ffffff;
  --ui-input: var(--ui-surface);
  --ui-control-border: #8190a4;
  --font-body: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Microsoft YaHei UI', 'Microsoft YaHei', 'PingFang SC', 'Noto Sans SC', sans-serif;
  --font-display: var(--font-body);
  --font-sans: var(--font-body);
  --text-xs: 13px;
  --text-sm: 14px;
  --text-base: 15px;
  --ui-shadow: 0 12px 30px rgba(15, 23, 42, .06);
  --ui-success-soft: #ecfdf5;
  --ui-success: #047857;
  --ui-warning-soft: #fffbeb;
  --ui-warning: #92400e;
  --ui-danger-soft: #fff1f2;
  --ui-danger: #be123c;
}

html[data-theme="dark"] {
  color-scheme: dark;
  --ui-page: #10151d;
  --ui-surface: #181f29;
  --ui-surface-muted: #141b24;
  --ui-surface-soft: #222d3b;
  --ui-border: #334153;
  --ui-border-strong: #526175;
  --ui-text: #e4e9f0;
  --ui-text-muted: #afbac9;
  --ui-text-subtle: #98a5b6;
  --ui-primary: #a8bfff;
  --ui-primary-soft: #24334d;
  --ui-on-primary: #14203a;
  --ui-input: #121922;
  --ui-control-border: #62748c;
  --ui-shadow: 0 18px 44px rgba(0, 0, 0, .24);
  --ui-success-soft: #19382e;
  --ui-success: #83dfb8;
  --ui-warning-soft: #382e1d;
  --ui-warning: #efd08b;
  --ui-danger-soft: #3b2530;
  --ui-danger: #ffb1bd;
  --bg-overlay: rgba(3, 7, 13, .72);
}

:root {
  --bg-body: var(--ui-page);
  --bg-card: var(--ui-surface);
  --bg-white: var(--ui-surface);
  --bg-secondary: var(--ui-surface-muted);
  --bg-input: var(--ui-surface-soft);
  --text-primary: var(--ui-text);
  --text-secondary: var(--ui-text-muted);
  --text-tertiary: var(--ui-text-subtle);
  --border-color: var(--ui-border);
  --border-color-light: var(--ui-border);
  --border-color-lighter: #1d2a3e;
  --divider-color: var(--ui-border);
  --color-primary: var(--ui-primary);
  --color-primary-rgb: 141, 168, 255;
  --bg-hover: var(--ui-surface-soft);
  --bg-sidebar: var(--ui-surface-muted);
  --bg-sidebar-hover: var(--ui-surface-soft);
  --bg-sidebar-active: var(--ui-primary-soft);
  --text-sidebar: var(--ui-text);
  --text-sidebar-active: var(--ui-primary);
}

html[data-theme="light"] {
  --color-primary-rgb: 49, 87, 213;
  --border-color-lighter: #edf0f5;
  --shadow-sm: 0 1px 3px rgba(15, 23, 42, .05);
  --shadow-md: 0 4px 16px rgba(15, 23, 42, .06);
  --shadow-lg: 0 12px 40px rgba(15, 23, 42, .08);
}

html[data-theme="dark"] {
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, .22);
  --shadow-md: 0 4px 16px rgba(0, 0, 0, .24);
  --shadow-lg: var(--ui-shadow);
}

html,
body {
  background: var(--ui-page);
  color: var(--ui-text);
  transition: background-color .22s ease, color .22s ease;
}

body {
  font-family: var(--font-body);
  text-rendering: optimizeLegibility;
}

.text-xs { font-size: 13px; line-height: 1.65; }
.text-sm { font-size: 14px; line-height: 1.65; }
.text-base { font-size: 15px; line-height: 1.65; }

button,
a,
input,
select,
textarea {
  transition: background-color .18s ease, border-color .18s ease, color .18s ease, box-shadow .18s ease, transform .18s ease;
}

button:focus-visible,
a:focus-visible,
[role="button"]:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 2px solid var(--ui-primary);
  outline-offset: 2px;
}

#sidebar,
#header,
#mainContent,
.main-content,
.page-container {
  background-color: var(--ui-page);
  color: var(--ui-text);
}

#sidebar,
#header {
  border-color: var(--ui-border) !important;
}

#sidebar {
  background: var(--ui-surface-muted) !important;
}

#sidebar .sidebar-brand,
#sidebar .sidebar-utility,
#header {
  background: var(--ui-surface) !important;
}

#header {
  backdrop-filter: blur(18px);
  box-shadow: 0 1px 0 var(--ui-border);
}

#mainContent {
  background: var(--ui-page) !important;
}

#sidebar .sidebar-section-label,
#sidebar .sidebar-store-copy small,
#sidebar .sidebar-collapse-control,
.text-gray-400,
.text-gray-500,
.text-gray-600,
.menu-group-title {
  color: var(--ui-text-muted) !important;
}

#sidebar .sidebar-section-label,
#sidebar .sidebar-collapse-control {
  font-size: 12px !important;
}

#sidebar .sidebar-store-copy small {
  font-size: 12px !important;
}

#sidebar .sidebar-store-copy strong { color: var(--ui-text); font-size: 12px; }
#sidebar .menu-dropdown .nav-item { font-size: 13px !important; }

#sidebar .nav-item,
.menu-item-inactive,
.menu-dropdown-item-inactive,
.header-tab,
.text-gray-700,
.text-gray-800,
.text-gray-900 {
  color: var(--ui-text) !important;
}

#sidebar .nav-item:hover,
#sidebar .nav-parent.expanded > .nav-item,
.hover\:bg-gray-50:hover,
.hover\:bg-gray-100:hover {
  background: var(--ui-surface-soft) !important;
}

#sidebar .nav-item.active,
.menu-item-active,
.menu-dropdown-item-active {
  background: var(--ui-primary-soft) !important;
  color: var(--ui-primary) !important;
}

html[data-theme="dark"] #sidebar .nav-parent.expanded > .nav-item,
html[data-theme="dark"] #sidebar .sidebar-store-copy strong { color: var(--ui-text) !important; }
html[data-theme="dark"] #sidebar .menu-dropdown .nav-item.active,
html[data-theme="dark"] #sidebar .nav-item.active :is(.menu-item-icon, svg) { color: var(--ui-primary) !important; }
html[data-theme="dark"] #sidebar .menu-dropdown .nav-item .menu-text { color: var(--ui-text-muted); }
html[data-theme="dark"] #sidebar .menu-dropdown .nav-item.active .menu-text { color: var(--ui-primary); }
html[data-theme="dark"] #sidebar :is(.sidebar-brand, .sidebar-utility, .menu-dropdown) { border-color: var(--ui-border) !important; }
html[data-theme="dark"] #sidebar :is(.sidebar-store-status, .sidebar-collapse-control):hover { background: var(--ui-surface-soft); }
html[data-theme="dark"] #sidebar .sidebar-store-icon { background: var(--ui-surface-soft); color: var(--ui-text-muted); border-color: var(--ui-border-strong); }
html[data-theme="dark"] #sidebar .sidebar-store-check { border-color: var(--ui-surface); }
html[data-theme="dark"] #sidebar .sidebar-store-copy strong { font-size: 12px; }
html[data-theme="dark"] #sidebar .sidebar-store-copy small { font-size: 12px !important; }
.sidebar-logo-dark { display: none; }
html[data-theme="dark"] .sidebar-logo-light { display: none; }
html[data-theme="dark"] .sidebar-logo-dark { display: block; }

.theme-toggle {
  width: 38px;
  height: 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--ui-border);
  border-radius: 10px;
  color: var(--ui-text-muted);
  background: var(--ui-surface);
}

.theme-toggle:hover {
  color: var(--ui-primary);
  border-color: var(--ui-border-strong);
  background: var(--ui-surface-soft);
  transform: translateY(-1px);
}

.theme-toggle svg {
  width: 17px;
  height: 17px;
}

.bg-white,
[class~="bg-white/90"],
[class~="bg-white/80"] {
  background-color: var(--ui-surface) !important;
}

.bg-gray-50,
.bg-gray-100,
[class~="bg-gray-50/80"] {
  background-color: var(--ui-surface-muted) !important;
}

.border-gray-100,
.border-gray-200,
.border-gray-300 {
  border-color: var(--ui-border) !important;
}

.shadow-sm,
.shadow-md,
.shadow-lg,
.shadow-xl,
.shadow-2xl {
  box-shadow: var(--ui-shadow) !important;
}

.form-input,
.form-select,
input,
select,
textarea {
  background-color: var(--ui-input) !important;
  border-color: var(--ui-control-border) !important;
  color: var(--ui-text) !important;
}

:is(input, select, textarea):focus { border-color: var(--ui-primary) !important; caret-color: var(--ui-text); }
:is(input, select, textarea)[aria-invalid="true"] { border-color: var(--ui-danger) !important; }

input::placeholder,
textarea::placeholder {
  color: var(--ui-text-subtle) !important;
  opacity: 1;
}

html[data-theme="dark"] :is(input, textarea):-webkit-autofill { -webkit-text-fill-color: var(--ui-text); box-shadow: 0 0 0 1000px var(--ui-input) inset; }
html[data-theme="dark"] :is(input, select, textarea):disabled { color: var(--ui-text-muted) !important; background-color: var(--ui-surface-soft) !important; opacity: 1; }
html[data-theme="dark"] :is(.btn-primary, .workspace-button-primary, .workbench-btn-primary) { background: var(--ui-primary); border-color: var(--ui-primary); color: var(--ui-on-primary); box-shadow: none; }
html[data-theme="dark"] .btn-primary::before { display: none; }
html[data-theme="dark"] .media-segments button.active { color: var(--ui-on-primary); }
html[data-theme="dark"] :is(.workbench-text-btn, .notice-header .view-all) { color: var(--ui-primary) !important; }
html[data-theme="dark"] :is(.modal-header h2, .modal-body) { color: var(--ui-text); }
html[data-theme="dark"] .modal-body { font-size: 14px; line-height: 1.8; }
html[data-theme="dark"] .modal-close { color: var(--ui-text-muted); }
html[data-theme="dark"] .modal-footer { border-color: var(--ui-border); }
html[data-theme="dark"] .media-empty span { font-size: 13px; }
html[data-theme="dark"] .ai-ref-head { font-size: 13px; line-height: 1.7; }

.notice-type-badge,
.notice-pinned-badge { display: inline-flex; align-items: center; flex: none; padding: 3px 8px; border: 1px solid var(--ui-border); border-radius: 6px; background: var(--ui-surface-soft); color: var(--ui-text-muted); font-size: 12px; font-weight: 600; line-height: 1.5; }
.notice-type-system { color: var(--ui-primary); background: var(--ui-primary-soft); }
.notice-type-policy { color: #6d28d9; background: #f5f3ff; }
.notice-type-maintenance { color: var(--ui-warning); background: var(--ui-warning-soft); }
.notice-type-urgent,
.notice-pinned-badge { color: var(--ui-danger); background: var(--ui-danger-soft); }
html[data-theme="dark"] .notice-type-policy { color: #d0b6ff; background: #30283f; }
.all-notice-card:hover,
.notice-item[data-notice-id]:hover { background: var(--ui-surface-muted) !important; border-color: var(--ui-border-strong) !important; }

.collect-table-wrap,
.store-table-wrap,
.card,
.empty-state,
.rounded-xl.bg-white,
.rounded-2xl.bg-white {
  background: var(--ui-surface) !important;
  border-color: var(--ui-border) !important;
}

html[data-theme="dark"] .workbench-shell {
  color: var(--ui-text);
}

html[data-theme="dark"] .workbench-heading h1,
html[data-theme="dark"] .workbench-panel-header h2,
html[data-theme="dark"] .workbench-metric-copy strong,
html[data-theme="dark"] .workbench-flow-step strong,
html[data-theme="dark"] .workbench-activity-main strong,
html[data-theme="dark"] .workbench-empty strong {
  color: var(--ui-text);
}

html[data-theme="dark"] .workbench-heading p,
html[data-theme="dark"] .workbench-panel-header p,
html[data-theme="dark"] .workbench-eyebrow,
html[data-theme="dark"] .workbench-metric-label,
html[data-theme="dark"] .workbench-flow-step small,
html[data-theme="dark"] .workbench-activity-main small,
html[data-theme="dark"] .workbench-metric-copy small {
  color: var(--ui-text-muted);
}

html[data-theme="dark"] .workbench-panel,
html[data-theme="dark"] .workbench-metric,
html[data-theme="dark"] .workbench-activity,
html[data-theme="dark"] .workbench-btn-secondary,
html[data-theme="dark"] .workbench-notice-panel .notice-header {
  background: var(--ui-surface);
  border-color: var(--ui-border);
}

html[data-theme="dark"] .workbench-panel-header,
html[data-theme="dark"] .workbench-activity {
  border-color: var(--ui-border);
}

html[data-theme="dark"] .workbench-btn-secondary {
  color: var(--ui-text);
}

html[data-theme="dark"] .workbench-flow-step:hover,
html[data-theme="dark"] .workbench-activity:hover,
html[data-theme="dark"] .workbench-quick-grid button:hover {
  background: var(--ui-surface-soft);
}

html[data-theme="dark"] .workbench-quick-grid button,
html[data-theme="dark"] .workbench-status-row > span {
  color: var(--ui-text);
}

html[data-theme="dark"] .workbench-status-row strong,
html[data-theme="dark"] .workbench-flow-connector,
html[data-theme="dark"] .workbench-metric-arrow,
html[data-theme="dark"] .workbench-flow-index {
  color: var(--ui-text-subtle);
}

html[data-theme="dark"] .workbench-notice-panel {
  max-height: 340px;
  overflow: auto;
}

html[data-theme="dark"] .workbench-notice-panel .notice-item,
html[data-theme="dark"] .workbench-notice-panel .notice-list {
  border-color: var(--ui-border) !important;
  background: var(--ui-surface) !important;
}

html[data-theme="dark"] .workbench-notice-panel .notice-title {
  color: var(--ui-text) !important;
}

html[data-theme="dark"] .workbench-notice-panel .notice-time,
html[data-theme="dark"] .workbench-notice-panel .notice-content {
  color: var(--ui-text-muted) !important;
}

.collect-table thead th {
  background: var(--ui-surface-muted) !important;
  color: var(--ui-text-muted) !important;
  border-color: var(--ui-border) !important;
}

.collect-table tbody tr:nth-child(even) {
  background: var(--ui-surface-muted) !important;
}

.collect-table tbody tr:hover {
  background: var(--ui-primary-soft) !important;
}

.collect-table td {
  color: var(--ui-text) !important;
  border-color: var(--ui-border) !important;
}

html[data-theme="dark"] .bg-amber-50,
html[data-theme="dark"] .bg-yellow-50,
html[data-theme="dark"] .bg-orange-50,
html[data-theme="dark"] .bg-amber-100,
html[data-theme="dark"] .bg-yellow-100 {
  background-color: var(--ui-warning-soft) !important;
}

html[data-theme="dark"] .text-amber-600,
html[data-theme="dark"] .text-amber-700,
html[data-theme="dark"] .text-orange-600,
html[data-theme="dark"] .text-yellow-700 {
  color: var(--ui-warning) !important;
}

html[data-theme="dark"] .bg-emerald-50,
html[data-theme="dark"] .bg-green-50,
html[data-theme="dark"] .bg-emerald-100,
html[data-theme="dark"] .bg-green-100 {
  background-color: var(--ui-success-soft) !important;
}

html[data-theme="dark"] .bg-rose-50,
html[data-theme="dark"] .bg-red-50,
html[data-theme="dark"] .bg-rose-100,
html[data-theme="dark"] .bg-red-100 {
  background-color: var(--ui-danger-soft) !important;
}

html[data-theme="dark"] .text-rose-600,
html[data-theme="dark"] .text-red-600 {
  color: var(--ui-danger) !important;
}

.notification-dropdown,
#notificationDropdown {
  background: var(--ui-surface) !important;
  border-color: var(--ui-border) !important;
}

html[data-theme="dark"] .bg-gradient-to-r {
  background-image: none !important;
  background-color: var(--ui-primary-soft) !important;
}

html[data-theme="dark"] .bg-brand-50,
html[data-theme="dark"] .bg-blue-50,
html[data-theme="dark"] .bg-indigo-50 {
  background-color: var(--ui-primary-soft) !important;
}

html[data-theme="dark"] .text-brand-600,
html[data-theme="dark"] .text-blue-600,
html[data-theme="dark"] .text-indigo-600 {
  color: #a8bcff !important;
}

html[data-theme="dark"] .text-green-600,
html[data-theme="dark"] .text-emerald-600 {
  color: #6ee7b7 !important;
}

html[data-theme="dark"] .text-red-500,
html[data-theme="dark"] .text-rose-500 {
  color: #fda4af !important;
}

html[data-theme="dark"] .bg-gray-900\/40,
html[data-theme="dark"] .bg-gray-900\/50 {
  background-color: rgba(2, 6, 23, .72) !important;
}

html[data-theme="dark"] body.login-mode .flex.relative {
  background: var(--ui-page) !important;
}

@media (max-width: 767px) {
  .theme-toggle {
    width: 36px;
    height: 36px;
  }

  #header {
    padding-left: 12px !important;
    padding-right: 12px !important;
  }
}

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