sky-ui-kit 0.1.9 → 0.1.11

package/dist/model-workspace.css

@@ -1,3 +1,182 @@
+
+
+/* 库默认主题放在低优先级层，项目未分层的变量声明始终优先。 */
+@layer userssite-defaults {
+
+:where(.userssite-theme, .sky-html, .sky-model-workspace[data-native-controls]) {
+  --userssite-color-bg: var(--color-bg, #ffffff);
+  --userssite-color-text: var(--color-text, #1f2937);
+  --userssite-color-primary: var(--color-primary, #1677ff);
+  --userssite-color-on-primary: var(--color-on-primary, #ffffff);
+  --userssite-color-border: var(--color-border, #dbe3ef99);
+  --userssite-color-hover: var(--color-hover, color-mix(in oklab, var(--userssite-color-primary) 9%, transparent));
+  --userssite-color-surface: var(--color-surface, #ffffffd9);
+  --userssite-color-surface-strong: var(--color-surface-strong, color-mix(in oklab, var(--userssite-color-surface) 72%, var(--userssite-color-bg)));
+  --userssite-color-panel: var(--color-panel, #ffffff);
+  --userssite-shadow-color: var(--shadow-color, color-mix(in oklab, var(--userssite-color-text) 10%, transparent));
+  --userssite-color-white: var(--color-white, #ffffff);
+  --userssite-color-danger: var(--color-danger, #e5484d);
+  --userssite-map-empty-bg: var(--map-empty-bg, #d7e2ea);
+  --userssite-timeline-observed: var(--timeline-observed, #b8e7ff);
+  --userssite-timeline-observed-strong: var(--timeline-observed-strong, #4aa3df);
+  --userssite-timeline-forecast: var(--timeline-forecast, #60a5fa);
+  --userssite-timeline-forecast-strong: var(--timeline-forecast-strong, #2f8bd6);
+  --userssite-timeline-forecast-text: var(--timeline-forecast-text, #2563a7);
+  --userssite-color-muted: var(--color-muted, color-mix(in oklab, var(--userssite-color-text) 62%, transparent));
+  --userssite-color-subtle: var(--color-subtle, color-mix(in oklab, var(--userssite-color-text) 48%, transparent));
+  --userssite-color-soft-border: var(--color-soft-border, color-mix(in oklab, var(--userssite-color-border) 78%, transparent));
+  --userssite-color-inset-highlight: var(--color-inset-highlight, color-mix(in oklab, var(--userssite-color-white) 64%, transparent));
+  --userssite-surface-glass: var(--surface-glass, color-mix(in oklab, var(--userssite-color-bg) 86%, transparent));
+  --userssite-surface-raised: var(--surface-raised, color-mix(in oklab, var(--userssite-color-surface) 86%, transparent));
+  --userssite-surface-subtle: var(--surface-subtle, color-mix(in oklab, var(--userssite-color-bg) 92%, var(--userssite-color-primary)));
+  --userssite-surface-control: var(--surface-control, color-mix(in oklab, var(--userssite-color-panel) 88%, transparent));
+  --userssite-surface-control-hover: var(--surface-control-hover, color-mix(in oklab, var(--userssite-color-primary) 12%, transparent));
+  --userssite-surface-control-active: var(--surface-control-active, color-mix(in oklab, var(--userssite-color-primary) 18%, transparent));
+  --userssite-focus-ring: var(--focus-ring, color-mix(in oklab, var(--userssite-color-primary) 14%, transparent));
+  --userssite-shadow-header: var(--shadow-header, 0 calc(var(--cp-font-1) * 10) calc(var(--cp-font-1) * 28) var(--userssite-shadow-color));
+  --userssite-shadow-panel: var(--shadow-panel, 0 calc(var(--cp-font-1) * 8) calc(var(--cp-font-1) * 22) var(--userssite-shadow-color));
+  --userssite-shadow-dropdown: var(--shadow-dropdown, 0 calc(var(--cp-font-1) * 18) calc(var(--cp-font-1) * 42) var(--userssite-shadow-color));
+  --userssite-app-shell-bg: var(--app-shell-bg, linear-gradient(180deg, color-mix(in oklab, var(--userssite-color-primary) 7%, var(--userssite-surface-subtle)), transparent 34%), var(--userssite-color-bg));
+  --userssite-app-header-bg: var(--app-header-bg, var(--userssite-surface-glass));
+  --userssite-app-content-bg: var(--app-content-bg, linear-gradient(90deg, color-mix(in oklab, var(--userssite-color-text) 4%, transparent) 0, transparent calc(var(--cp-font-1) * 16)), color-mix(in oklab, var(--userssite-color-bg) 96%, var(--userssite-surface-subtle)));
+  --userssite-app-sidebar-bg: var(--app-sidebar-bg, linear-gradient(180deg, color-mix(in oklab, var(--userssite-color-panel) 78%, transparent), color-mix(in oklab, var(--userssite-color-bg) 88%, var(--userssite-color-white))));
+  --userssite-app-rightpanel-bg: var(--app-rightpanel-bg, color-mix(in oklab, var(--userssite-color-bg) 94%, var(--userssite-color-white)));
+  --userssite-map-title-text: var(--map-title-text, color-mix(in oklab, var(--userssite-color-text) 86%, transparent));
+  --userssite-ranking-header-bg: var(--ranking-header-bg, #2f8bd6);
+  --userssite-brand-mark-bg: var(--brand-mark-bg, color-mix(in oklab, var(--userssite-color-panel) 86%, transparent));
+  --userssite-nav-bg: var(--nav-bg, color-mix(in oklab, var(--userssite-color-bg) 72%, var(--userssite-color-white)));
+  --userssite-nav-highlight-bg: var(--nav-highlight-bg, linear-gradient(180deg, var(--userssite-color-panel), color-mix(in oklab, var(--userssite-color-primary) 10%, var(--userssite-color-panel))));
+  --userssite-nav-highlight-shadow: var(--nav-highlight-shadow, 0 calc(var(--cp-font-1) * 10) calc(var(--cp-font-1) * 24) color-mix(in oklab, var(--userssite-color-primary) 18%, transparent), inset 0 calc(var(--cp-font-1) * 1) 0 color-mix(in oklab, var(--userssite-color-panel) 92%, transparent));
+  --userssite-dropdown-bg: var(--dropdown-bg, color-mix(in oklab, var(--userssite-color-bg) 94%, var(--userssite-color-white)));
+  --userssite-input-bg: var(--input-bg, color-mix(in oklab, var(--userssite-color-bg) 88%, var(--userssite-color-white)));
+  --userssite-input-placeholder: var(--input-placeholder, var(--userssite-color-subtle));
+  --userssite-scrollbar-track: var(--scrollbar-track, transparent);
+  --userssite-scrollbar-thumb: var(--scrollbar-thumb, color-mix(in oklab, var(--userssite-color-primary) 34%, var(--userssite-color-border)));
+  --userssite-scrollbar-thumb-hover: var(--scrollbar-thumb-hover, color-mix(in oklab, var(--userssite-color-primary) 52%, var(--userssite-color-border)));
+  --userssite-tree-trigger-bg: var(--tree-trigger-bg, color-mix(in oklab, var(--userssite-color-panel) 96%, var(--userssite-color-primary) 4%));
+  --userssite-tree-trigger-hover-bg: var(--tree-trigger-hover-bg, var(--userssite-color-panel));
+  --userssite-tree-type-bg: var(--tree-type-bg, linear-gradient(180deg, color-mix(in oklab, var(--userssite-color-primary) 18%, var(--userssite-color-panel)), color-mix(in oklab, var(--userssite-color-primary) 10%, var(--userssite-color-panel))));
+  --userssite-tree-panel-bg: var(--tree-panel-bg, color-mix(in oklab, var(--userssite-color-bg) 96%, transparent));
+  --userssite-tree-tabs-bg: var(--tree-tabs-bg, color-mix(in oklab, var(--userssite-color-hover) 58%, transparent));
+  --userssite-map-menu-parent-bg: var(--map-menu-parent-bg, #00000080);
+  --userssite-map-menu-parent-active: var(--map-menu-parent-active, #f6a313);
+  --userssite-map-menu-child-bg: var(--map-menu-child-bg, color-mix(in oklab, #ffffff 86%, #d7f6ff));
+  --userssite-map-menu-child-border: var(--map-menu-child-border, #26b6ef);
+  --userssite-map-menu-child-text: var(--map-menu-child-text, #148cc8);
+  --userssite-map-menu-child-active: var(--map-menu-child-active, #2d9cf0);
+  --userssite-right-panel-header-bg: var(--right-panel-header-bg, #2f8bd6);
+  --userssite-right-panel-header-text: var(--right-panel-header-text, #ffffff);
+  --userssite-map-float-bg: var(--map-float-bg, color-mix(in oklab, var(--userssite-color-panel) 96%, var(--userssite-color-bg)));
+  --userssite-map-float-border: var(--map-float-border, color-mix(in oklab, var(--userssite-color-border) 82%, transparent));
+  --userssite-map-float-control-bg: var(--map-float-control-bg, color-mix(in oklab, var(--userssite-color-panel) 94%, var(--userssite-color-bg)));
+  --userssite-map-float-control-hover-bg: var(--map-float-control-hover-bg, color-mix(in oklab, var(--userssite-color-primary) 12%, var(--userssite-color-panel)));
+  --userssite-map-float-shadow: var(--map-float-shadow, 0 calc(var(--cp-font-1) * 12) calc(var(--cp-font-1) * 28) var(--userssite-shadow-color));
+  --userssite-header-height: var(--header-height, calc(var(--cp-font-1) * 58));
+  --userssite-sidebar-width: var(--sidebar-width, calc(var(--cp-font-1) * 244));
+  --userssite-rightpanel-width: var(--rightpanel-width, calc(var(--cp-font-1) * 320));
+  --userssite-layout-gutter: var(--layout-gutter, calc(var(--cp-font-1) * 10));
+  --userssite-font-family-sans: var(--font-family-sans, "HarmonyOS Sans SC", "Noto Sans SC", "Source Han Sans SC", "Microsoft YaHei", "PingFang SC", Arial, sans-serif);
+  --userssite-font-size-micro: var(--font-size-micro, var(--cp-font-10));
+  --userssite-font-size-caption: var(--font-size-caption, var(--cp-font-13));
+  --userssite-font-size-body: var(--font-size-body, var(--cp-font-14));
+  --userssite-font-size-title: var(--font-size-title, var(--cp-font-16));
+  --userssite-font-size-heading: var(--font-size-heading, var(--cp-font-18));
+  --userssite-radius-s: var(--radius-s, var(--cp-font-4));
+  --userssite-radius-m: var(--radius-m, var(--cp-font-8));
+  --userssite-radius-l: var(--radius-l, var(--cp-font-12));
+  --userssite-radius-pill: var(--radius-pill, calc(var(--cp-font-1) * 999));
+  --userssite-space-s: var(--space-s, var(--cp-font-6));
+  --userssite-space-m: var(--space-m, var(--cp-font-10));
+  --userssite-space-l: var(--space-l, var(--cp-font-16));
+  --userssite-control-height-s: var(--control-height-s, var(--cp-font-28));
+  --userssite-control-height-m: var(--control-height-m, var(--cp-font-32));
+  --userssite-control-height-l: var(--control-height-l, var(--cp-font-36));
+  --userssite-font-size-l1: var(--font-size-l1, var(--cp-font-16));
+  --userssite-font-size-l2: var(--font-size-l2, var(--cp-font-14));
+  --userssite-font-size-l3: var(--font-size-l3, var(--cp-font-13));
+  --userssite-menu-level-1-color: var(--menu-level-1-color, var(--userssite-color-text));
+  --userssite-menu-level-2-color: var(--menu-level-2-color, color-mix(in oklab, var(--userssite-color-text) 82%, transparent));
+  --userssite-menu-level-3-color: var(--menu-level-3-color, color-mix(in oklab, var(--userssite-color-text) 68%, transparent));
+  --userssite-button-primary-bg: var(--button-primary-bg, var(--userssite-color-primary));
+  --userssite-button-primary-text: var(--button-primary-text, var(--userssite-color-on-primary));
+  --userssite-button-secondary-bg: var(--button-secondary-bg, var(--userssite-surface-control));
+  --userssite-button-secondary-text: var(--button-secondary-text, var(--userssite-color-text));
+  --userssite-button-ghost-bg: var(--button-ghost-bg, transparent);
+  --userssite-button-ghost-text: var(--button-ghost-text, var(--userssite-color-primary));
+  --userssite-button-danger-bg: var(--button-danger-bg, var(--userssite-color-danger));
+  --userssite-button-danger-text: var(--button-danger-text, var(--userssite-color-white));
+  --userssite-motion-fast: var(--motion-fast, 160ms);
+  --userssite-motion-base: var(--motion-base, 240ms);
+  --userssite-motion-ease: var(--motion-ease, cubic-bezier(0.2, 0.8, 0.2, 1));
+  --el-color-primary: var(--userssite-color-primary);
+  --el-bg-color: var(--userssite-color-bg);
+  --el-bg-color-overlay: var(--userssite-color-panel);
+  --el-fill-color-blank: var(--userssite-color-panel);
+  --el-text-color-primary: var(--userssite-color-text);
+  --el-text-color-regular: var(--userssite-color-muted);
+  --el-border-color: var(--userssite-color-border);
+  --el-border-radius-base: var(--userssite-radius-s);
+  --el-component-size: var(--userssite-control-height-m);
+  --el-font-size-base: var(--userssite-font-size-body);
+}
+
+:where(.theme-dark .userssite-theme, .userssite-theme.theme-dark, .sky-html[data-theme="dark"], .sky-model-workspace[data-native-controls][data-theme="dark"]) {
+  --userssite-color-bg: var(--color-bg, #08111f);
+  --userssite-color-text: var(--color-text, #e6edf7);
+  --userssite-color-primary: var(--color-primary, #4da3ff);
+  --userssite-color-on-primary: var(--color-on-primary, #ffffff);
+  --userssite-color-border: var(--color-border, #39506f99);
+  --userssite-color-hover: var(--color-hover, color-mix(in oklab, var(--userssite-color-primary) 18%, transparent));
+  --userssite-color-surface: var(--color-surface, #101b2dee);
+  --userssite-color-surface-strong: var(--color-surface-strong, color-mix(in oklab, var(--userssite-color-surface) 70%, var(--userssite-color-bg)));
+  --userssite-color-panel: var(--color-panel, #0c1525);
+  --userssite-shadow-color: var(--shadow-color, color-mix(in oklab, #020617 62%, transparent));
+  --userssite-color-inset-highlight: var(--color-inset-highlight, color-mix(in oklab, var(--userssite-color-white) 12%, transparent));
+  --userssite-surface-subtle: var(--surface-subtle, color-mix(in oklab, var(--userssite-color-surface-strong) 76%, var(--userssite-color-bg)));
+  --userssite-surface-glass: var(--surface-glass, color-mix(in oklab, var(--userssite-color-surface-strong) 84%, transparent));
+  --userssite-surface-control: var(--surface-control, color-mix(in oklab, var(--userssite-color-surface-strong) 84%, transparent));
+  --userssite-surface-control-hover: var(--surface-control-hover, color-mix(in oklab, var(--userssite-color-primary) 18%, transparent));
+  --userssite-surface-control-active: var(--surface-control-active, color-mix(in oklab, var(--userssite-color-primary) 26%, transparent));
+  --userssite-focus-ring: var(--focus-ring, color-mix(in oklab, var(--userssite-color-primary) 20%, transparent));
+  --userssite-shadow-header: var(--shadow-header, 0 calc(var(--cp-font-1) * 12) calc(var(--cp-font-1) * 30) var(--userssite-shadow-color), inset 0 calc(var(--cp-font-1) * 1) 0 var(--userssite-color-inset-highlight));
+  --userssite-shadow-panel: var(--shadow-panel, 0 calc(var(--cp-font-1) * 10) calc(var(--cp-font-1) * 24) var(--userssite-shadow-color));
+  --userssite-shadow-dropdown: var(--shadow-dropdown, 0 calc(var(--cp-font-1) * 18) calc(var(--cp-font-1) * 42) var(--userssite-shadow-color));
+  --userssite-app-shell-bg: var(--app-shell-bg, radial-gradient(circle at 18% 0, color-mix(in oklab, var(--userssite-color-primary) 18%, transparent), transparent 30%), linear-gradient(180deg, color-mix(in oklab, var(--userssite-color-primary) 8%, var(--userssite-color-bg)) 0, var(--userssite-color-bg) 42%));
+  --userssite-app-header-bg: var(--app-header-bg, linear-gradient(180deg, color-mix(in oklab, var(--userssite-color-surface-strong) 86%, transparent), color-mix(in oklab, var(--userssite-color-surface) 86%, transparent)));
+  --userssite-app-content-bg: var(--app-content-bg, linear-gradient(90deg, color-mix(in oklab, var(--userssite-shadow-color) 58%, transparent) 0, transparent calc(var(--cp-font-1) * 18)), radial-gradient(circle at 64% 0, color-mix(in oklab, var(--userssite-color-primary) 12%, transparent), transparent 34%), var(--userssite-color-bg));
+  --userssite-app-sidebar-bg: var(--app-sidebar-bg, linear-gradient(180deg, color-mix(in oklab, var(--userssite-color-surface) 92%, transparent), color-mix(in oklab, var(--userssite-color-bg) 92%, transparent)));
+  --userssite-app-rightpanel-bg: var(--app-rightpanel-bg, linear-gradient(180deg, color-mix(in oklab, var(--userssite-color-surface) 92%, transparent), color-mix(in oklab, var(--userssite-color-bg) 92%, transparent)));
+  --userssite-map-title-text: var(--map-title-text, #1f2937);
+  --userssite-ranking-header-bg: var(--ranking-header-bg, transparent);
+  --userssite-brand-mark-bg: var(--brand-mark-bg, color-mix(in oklab, var(--userssite-color-white) 92%, var(--userssite-color-primary)));
+  --userssite-nav-bg: var(--nav-bg, color-mix(in oklab, var(--userssite-color-panel) 76%, transparent));
+  --userssite-nav-highlight-bg: var(--nav-highlight-bg, linear-gradient(180deg, color-mix(in oklab, var(--userssite-color-primary) 36%, var(--userssite-color-inset-highlight)), color-mix(in oklab, var(--userssite-color-primary) 18%, var(--userssite-color-bg))));
+  --userssite-nav-highlight-shadow: var(--nav-highlight-shadow, 0 calc(var(--cp-font-1) * 8) calc(var(--cp-font-1) * 24) color-mix(in oklab, var(--userssite-color-primary) 26%, transparent), inset 0 calc(var(--cp-font-1) * 1) 0 var(--userssite-color-inset-highlight));
+  --userssite-dropdown-bg: var(--dropdown-bg, color-mix(in oklab, var(--userssite-color-surface) 94%, transparent));
+  --userssite-input-bg: var(--input-bg, color-mix(in oklab, var(--userssite-color-surface-strong) 88%, transparent));
+  --userssite-input-placeholder: var(--input-placeholder, color-mix(in oklab, var(--userssite-color-text) 44%, transparent));
+  --userssite-scrollbar-thumb: var(--scrollbar-thumb, color-mix(in oklab, var(--userssite-color-primary) 46%, var(--userssite-color-border)));
+  --userssite-scrollbar-thumb-hover: var(--scrollbar-thumb-hover, color-mix(in oklab, var(--userssite-color-primary) 64%, var(--userssite-color-border)));
+  --userssite-tree-trigger-bg: var(--tree-trigger-bg, linear-gradient(180deg, color-mix(in oklab, var(--userssite-color-surface-strong) 84%, var(--userssite-color-primary) 16%), var(--userssite-color-panel)));
+  --userssite-tree-trigger-hover-bg: var(--tree-trigger-hover-bg, linear-gradient(180deg, color-mix(in oklab, var(--userssite-color-surface-strong) 80%, var(--userssite-color-primary) 20%), color-mix(in oklab, var(--userssite-color-panel) 82%, var(--userssite-color-primary) 18%)));
+  --userssite-tree-type-bg: var(--tree-type-bg, linear-gradient(180deg, color-mix(in oklab, var(--userssite-color-primary) 28%, var(--userssite-color-inset-highlight)), color-mix(in oklab, var(--userssite-color-primary) 12%, transparent)));
+  --userssite-tree-panel-bg: var(--tree-panel-bg, color-mix(in oklab, var(--userssite-color-panel) 94%, transparent));
+  --userssite-tree-tabs-bg: var(--tree-tabs-bg, color-mix(in oklab, var(--userssite-color-surface-strong) 78%, transparent));
+  --userssite-map-float-bg: var(--map-float-bg, linear-gradient(180deg, color-mix(in oklab, var(--userssite-color-surface) 82%, var(--userssite-color-panel)), color-mix(in oklab, var(--userssite-color-panel) 88%, #020617)));
+  --userssite-map-float-border: var(--map-float-border, color-mix(in oklab, var(--userssite-color-primary) 24%, var(--userssite-color-border)));
+  --userssite-map-float-control-bg: var(--map-float-control-bg, color-mix(in oklab, var(--userssite-color-panel) 86%, #020617));
+  --userssite-map-float-control-hover-bg: var(--map-float-control-hover-bg, color-mix(in oklab, var(--userssite-color-primary) 18%, var(--userssite-color-panel)));
+  --userssite-map-float-shadow: var(--map-float-shadow, 0 calc(var(--cp-font-1) * 14) calc(var(--cp-font-1) * 30) color-mix(in oklab, #020617 64%, transparent));
+  --userssite-menu-level-1-color: var(--menu-level-1-color, #e6edf7);
+  --userssite-menu-level-2-color: var(--menu-level-2-color, #c8d4e4);
+  --userssite-menu-level-3-color: var(--menu-level-3-color, #aebed2);
+  --userssite-right-panel-header-bg: var(--right-panel-header-bg, transparent);
+  --userssite-right-panel-header-text: var(--right-panel-header-text, #e6edf7);
+}
+
+
+}
+
 /* 四个模型工作区的共同主题，仅在显式容器内生效。 */
 .sky-model-workspace {
   --color-bg: #f3f7fb; --color-panel: #fff; --color-surface: #f7f9fc;
@@ -26,22 +205,80 @@
   --shadow-panel: 0 8px 28px #00000030; --scrollbar-thumb: #425a72; color-scheme: dark;
 }
 .sky-model-workspace *, .sky-model-workspace *::before, .sky-model-workspace *::after { box-sizing: border-box; }
+
+/* HTML 与 Vue 控件直接消费同一 userssite 主题，不再维护另一套控件色值。 */
+.sky-html { color:var(--userssite-color-text); background:var(--userssite-color-bg); font-family:var(--userssite-font-family-sans); font-size:var(--font-size-body,14px); line-height:1.5; }
+:where(.sky-html, .sky-model-workspace[data-native-controls]) { --cp-font-1:calc(var(--cp-vfit-scale,1) * 1px); }
+:where(.sky-html, .sky-model-workspace[data-native-controls]) { --cp-font-4:calc(var(--cp-vfit-scale,1) * 4px); }
+:where(.sky-html, .sky-model-workspace[data-native-controls]) { --cp-font-8:calc(var(--cp-vfit-scale,1) * 8px); }
+:where(.sky-html, .sky-model-workspace[data-native-controls]) { --cp-font-12:calc(var(--cp-vfit-scale,1) * 12px); }
+:where(.sky-html, .sky-model-workspace[data-native-controls]) { --cp-font-14:calc(var(--cp-vfit-scale,1) * 14px); }
+:where(.sky-html, .sky-model-workspace[data-native-controls]) { --cp-font-28:calc(var(--cp-vfit-scale,1) * 28px); }
+:where(.sky-html, .sky-model-workspace[data-native-controls]) { --cp-font-32:calc(var(--cp-vfit-scale,1) * 32px); }
+:where(.sky-html, .sky-model-workspace[data-native-controls]) { --cp-font-36:calc(var(--cp-vfit-scale,1) * 36px); }
+
 .sky-model-workspace__content { padding: var(--workspace-padding, 20px); min-width: 0; }
-.sky-model-header { padding: 24px 28px; background: var(--workspace-hero); border-bottom: 1px solid var(--color-border); display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
-.sky-model-header__title { margin: 0; display: flex; align-items: center; gap: 12px; color: var(--workspace-title); font-size: 22px; font-weight: 650; }
-.sky-model-header__title::before { content: ''; width: 7px; height: 25px; border-radius: 4px; background: var(--color-primary); flex-shrink: 0; }
-.sky-model-header__description { margin: 8px 0 0; color: var(--color-muted); }
-.sky-model-panel { min-width: 0; border: 1px solid var(--color-border); border-radius: 8px; background: var(--color-panel); box-shadow: var(--shadow-panel); overflow: hidden; }
+.sky-model-header { padding: 24px 28px; background: var(--workspace-hero, var(--userssite-color-panel)); border-bottom: 1px solid var(--color-border, var(--userssite-color-border)); display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
+.sky-model-header__title { margin: 0; display: flex; align-items: center; gap: 12px; color: var(--workspace-title, var(--userssite-color-text)); font-size: 22px; font-weight: 650; }
+.sky-model-header__title::before { content: ''; width: 7px; height: 25px; border-radius: 4px; background: var(--color-primary, var(--userssite-color-primary)); flex-shrink: 0; }
+.sky-model-header__description { margin: 8px 0 0; color: var(--color-muted, var(--userssite-color-muted)); }
+.sky-model-panel { min-width: 0; border: 1px solid var(--color-border, var(--userssite-color-border)); border-radius: 8px; background: var(--color-panel, var(--userssite-color-panel)); box-shadow: var(--shadow-panel, var(--userssite-shadow-panel)); overflow: hidden; }
 .sky-model-panel__header, .sky-model-panel__footer { padding: var(--panel-header-padding, calc(var(--cp-font-1, 1px) * 12) calc(var(--cp-font-1, 1px) * 16)); display: flex; align-items: center; justify-content: space-between; gap: var(--panel-gap, calc(var(--cp-font-1, 1px) * 12)); flex-wrap: wrap; }
-.sky-model-panel__header { border-bottom: 1px solid var(--color-border); }
-.sky-model-panel__header h2 { margin: 0; font-size: 15px; color: var(--workspace-title); }
+.sky-model-panel__header { border-bottom: 1px solid var(--color-border, var(--userssite-color-border)); }
+.sky-model-panel__header h2 { margin: 0; font-size: 15px; color: var(--workspace-title, var(--userssite-color-text)); }
 .sky-model-panel__body { padding: var(--panel-body-padding, calc(var(--cp-font-1, 1px) * 16)); min-width: 0; }
-.sky-model-panel__footer { padding: var(--panel-footer-padding, calc(var(--cp-font-1, 1px) * 12) calc(var(--cp-font-1, 1px) * 16)); border-top: 1px solid var(--color-border); }
-/* 原生表单适配必须显式开启，不覆盖容器外的 Element Plus。 */
-.sky-model-workspace[data-native-controls] :where(button:not([class*="el-"]), input:not([class*="el-"]):not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]), select:not([class*="el-"]), textarea:not([class*="el-"])) { font: inherit; color: var(--color-text); background: var(--color-panel); border: 1px solid var(--color-border); border-radius: 6px; padding: 7px 12px; }
-.sky-model-workspace[data-native-controls] :where(button:not([class*="el-"])) { cursor: pointer; }
-.sky-model-workspace[data-native-controls] :where(button.primary, button.accent) { background: var(--color-primary); border-color: var(--color-primary); color: var(--color-on-primary); }
-.sky-model-workspace[data-native-controls] :where(button:not([class*="el-"]):hover:not(:disabled)) { border-color: var(--color-primary); }
-.sky-model-workspace[data-native-controls] :where(button:disabled, input:disabled, select:disabled, textarea:disabled) { opacity: .55; cursor: not-allowed; }
-.sky-model-workspace[data-native-controls] :where(button, input, select, textarea):focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; }
+.sky-model-panel__footer { padding: var(--panel-footer-padding, calc(var(--cp-font-1, 1px) * 12) calc(var(--cp-font-1, 1px) * 16)); border-top: 1px solid var(--color-border, var(--userssite-color-border)); }
 @media(max-width:768px) { .sky-model-header { padding: 18px 16px; } .sky-model-workspace__content { padding: 12px; } }
+
+/* 原生按钮，显式 opt-in；不提供业务交互。保留旧工作区入口。 */
+:where(.sky-html, .sky-model-workspace[data-native-controls]) :where(button, input[type="button"], input[type="submit"], input[type="reset"]):not(:where([data-sky-native="off"], [data-sky-native="off"] *, [class^="el-"], [class^="el-"] *, [class*=" el-"], [class*=" el-"] *, .maplibregl-map *, .mapboxgl-map *)) { box-sizing: border-box; font-family:var(--userssite-font-family-sans); font-size:var(--userssite-font-size-body); line-height:1; color: var(--userssite-color-text); background: var(--userssite-color-panel); border: 1px solid var(--userssite-color-border); border-radius: var(--userssite-radius-s); height:var(--userssite-control-height-m); padding:8px 15px; font-weight:500; cursor: pointer; }
+:where(.sky-html, .sky-model-workspace[data-native-controls]) :where(button, input[type="button"], input[type="submit"], input[type="reset"]):not(:where([data-sky-native="off"], [data-sky-native="off"] *, [class^="el-"], [class^="el-"] *, [class*=" el-"], [class*=" el-"] *, .maplibregl-map *, .mapboxgl-map *)):where(.primary, .accent, [data-variant="primary"]) { background: var(--userssite-color-primary); border-color: var(--userssite-color-primary); color: var(--userssite-color-on-primary); }
+:where(.sky-html, .sky-model-workspace[data-native-controls]) :where(button, input[type="button"], input[type="submit"], input[type="reset"]):not(:where([data-sky-native="off"], [data-sky-native="off"] *, [class^="el-"], [class^="el-"] *, [class*=" el-"], [class*=" el-"] *, .maplibregl-map *, .mapboxgl-map *))[data-variant="danger"] { background: var(--userssite-color-danger); color: var(--userssite-color-white); border-color: var(--userssite-color-danger); }
+:where(.sky-html, .sky-model-workspace[data-native-controls]) :where(button, input[type="button"], input[type="submit"], input[type="reset"]):not(:where([data-sky-native="off"], [data-sky-native="off"] *, [class^="el-"], [class^="el-"] *, [class*=" el-"], [class*=" el-"] *, .maplibregl-map *, .mapboxgl-map *)):hover:not(:disabled) { color:var(--userssite-color-primary); background:color-mix(in oklab,var(--userssite-color-primary) 10%,var(--userssite-color-panel)); border-color:color-mix(in oklab,var(--userssite-color-primary) 30%,var(--userssite-color-panel)); }
+:where(.sky-html, .sky-model-workspace[data-native-controls]) :where(button, input[type="button"], input[type="submit"], input[type="reset"]):not(:where([data-sky-native="off"], [data-sky-native="off"] *, [class^="el-"], [class^="el-"] *, [class*=" el-"], [class*=" el-"] *, .maplibregl-map *, .mapboxgl-map *)):active:not(:disabled) { filter: brightness(.94); }
+:where(.sky-html, .sky-model-workspace[data-native-controls]) :where(button, input[type="button"], input[type="submit"], input[type="reset"]):not(:where([data-sky-native="off"], [data-sky-native="off"] *, [class^="el-"], [class^="el-"] *, [class*=" el-"], [class*=" el-"] *, .maplibregl-map *, .mapboxgl-map *)):disabled { color:var(--userssite-color-subtle); background:var(--userssite-surface-subtle); border-color:var(--userssite-color-soft-border); cursor:not-allowed; }
+:where(.sky-html, .sky-model-workspace[data-native-controls]) :where(button, input[type="button"], input[type="submit"], input[type="reset"]):not(:where([data-sky-native="off"], [data-sky-native="off"] *, [class^="el-"], [class^="el-"] *, [class*=" el-"], [class*=" el-"] *, .maplibregl-map *, .mapboxgl-map *)):focus-visible { outline: 2px solid var(--userssite-color-primary); outline-offset: 2px; }
+:where(.sky-html, .sky-model-workspace[data-native-controls]) :where(button, input[type="button"], input[type="submit"], input[type="reset"]):not(:where([data-sky-native="off"], [data-sky-native="off"] *, [class^="el-"], [class^="el-"] *, [class*=" el-"], [class*=" el-"] *, .maplibregl-map *, .mapboxgl-map *)):where([data-variant="primary"],.primary,.accent):hover:not(:disabled) { background:color-mix(in oklab,var(--userssite-color-primary) 70%,var(--userssite-color-panel)); border-color:color-mix(in oklab,var(--userssite-color-primary) 70%,var(--userssite-color-panel)); color:var(--userssite-color-on-primary); }
+:where(.sky-html, .sky-model-workspace[data-native-controls]) :where(button, input[type="button"], input[type="submit"], input[type="reset"]):not(:where([data-sky-native="off"], [data-sky-native="off"] *, [class^="el-"], [class^="el-"] *, [class*=" el-"], [class*=" el-"] *, .maplibregl-map *, .mapboxgl-map *)):where([data-variant="primary"],.primary,.accent):disabled { background:color-mix(in oklab,var(--userssite-color-primary) 50%,var(--userssite-color-panel)); border-color:color-mix(in oklab,var(--userssite-color-primary) 50%,var(--userssite-color-panel)); color:var(--userssite-color-white); }
+:where(.sky-html, .sky-model-workspace[data-native-controls]) :where(button, input[type="button"], input[type="submit"], input[type="reset"]):not(:where([data-sky-native="off"], [data-sky-native="off"] *, [class^="el-"], [class^="el-"] *, [class*=" el-"], [class*=" el-"] *, .maplibregl-map *, .mapboxgl-map *))[data-variant="danger"]:hover:not(:disabled) { background:color-mix(in oklab,var(--userssite-color-danger) 70%,var(--userssite-color-panel)); border-color:color-mix(in oklab,var(--userssite-color-danger) 70%,var(--userssite-color-panel)); color:var(--userssite-color-white); }
+:where(.sky-html, .sky-model-workspace[data-native-controls]) :where(button, input[type="button"], input[type="submit"], input[type="reset"]):not(:where([data-sky-native="off"], [data-sky-native="off"] *, [class^="el-"], [class^="el-"] *, [class*=" el-"], [class*=" el-"] *, .maplibregl-map *, .mapboxgl-map *))[data-variant="danger"]:disabled { background:color-mix(in oklab,var(--userssite-color-danger) 50%,var(--userssite-color-panel)); border-color:color-mix(in oklab,var(--userssite-color-danger) 50%,var(--userssite-color-panel)); color:var(--userssite-color-white); }
+
+/* 文本输入、select、textarea；复选框、单选、滑块、文件沿用浏览器。 */
+:where(.sky-html, .sky-model-workspace[data-native-controls]) :where(input:not([type="button"]):not([type="submit"]):not([type="reset"]):not([type="hidden"]):not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]):not([type="color"]):not([type="image"]), select, textarea):not(:where([data-sky-native="off"], [data-sky-native="off"] *, [class^="el-"], [class^="el-"] *, [class*=" el-"], [class*=" el-"] *, .maplibregl-map *, .mapboxgl-map *)) { box-sizing: border-box; max-width: 100%; font-family:var(--userssite-font-family-sans); font-size:var(--userssite-font-size-body); line-height:1; color: var(--userssite-color-text); background: var(--userssite-input-bg); border: 1px solid var(--userssite-color-border); border-radius: var(--userssite-radius-s); height:var(--userssite-control-height-m); padding:1px 11px; }
+:where(.sky-html, .sky-model-workspace[data-native-controls]) :where(input:not([type="button"]):not([type="submit"]):not([type="reset"]):not([type="hidden"]):not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]):not([type="color"]):not([type="image"]), select, textarea):not(:where([data-sky-native="off"], [data-sky-native="off"] *, [class^="el-"], [class^="el-"] *, [class*=" el-"], [class*=" el-"] *, .maplibregl-map *, .mapboxgl-map *))::placeholder { color: var(--userssite-input-placeholder); opacity: 1; }
+:where(.sky-html, .sky-model-workspace[data-native-controls]) :where(input:not([type="button"]):not([type="submit"]):not([type="reset"]):not([type="hidden"]):not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]):not([type="color"]):not([type="image"]), select, textarea):not(:where([data-sky-native="off"], [data-sky-native="off"] *, [class^="el-"], [class^="el-"] *, [class*=" el-"], [class*=" el-"] *, .maplibregl-map *, .mapboxgl-map *)):hover:not(:disabled):not([readonly]):not(:where([aria-invalid="true"], :user-invalid)) { border-color: var(--userssite-color-primary); }
+:where(.sky-html, .sky-model-workspace[data-native-controls]) :where(input:not([type="button"]):not([type="submit"]):not([type="reset"]):not([type="hidden"]):not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]):not([type="color"]):not([type="image"]), select, textarea):not(:where([data-sky-native="off"], [data-sky-native="off"] *, [class^="el-"], [class^="el-"] *, [class*=" el-"], [class*=" el-"] *, .maplibregl-map *, .mapboxgl-map *)):focus { outline: none; outline-offset: 0; box-shadow: none; border-color: var(--userssite-color-primary); }
+:where(.sky-html, .sky-model-workspace[data-native-controls]) :where(input:not([type="button"]):not([type="submit"]):not([type="reset"]):not([type="hidden"]):not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]):not([type="color"]):not([type="image"]), select, textarea):not(:where([data-sky-native="off"], [data-sky-native="off"] *, [class^="el-"], [class^="el-"] *, [class*=" el-"], [class*=" el-"] *, .maplibregl-map *, .mapboxgl-map *)):disabled { color:var(--userssite-color-subtle); background:var(--userssite-surface-subtle); border-color:var(--userssite-color-soft-border); cursor:not-allowed; }
+:where(.sky-html, .sky-model-workspace[data-native-controls]) :where(input:not([type="button"]):not([type="submit"]):not([type="reset"]):not([type="hidden"]):not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]):not([type="color"]):not([type="image"]), select, textarea):not(:where([data-sky-native="off"], [data-sky-native="off"] *, [class^="el-"], [class^="el-"] *, [class*=" el-"], [class*=" el-"] *, .maplibregl-map *, .mapboxgl-map *))[readonly] { background: var(--userssite-color-surface); }
+:where(.sky-html, .sky-model-workspace[data-native-controls]) :where(input:not([type="button"]):not([type="submit"]):not([type="reset"]):not([type="hidden"]):not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]):not([type="color"]):not([type="image"]), select, textarea):not(:where([data-sky-native="off"], [data-sky-native="off"] *, [class^="el-"], [class^="el-"] *, [class*=" el-"], [class*=" el-"] *, .maplibregl-map *, .mapboxgl-map *)):is([aria-invalid="true"], :user-invalid) { border-color: var(--userssite-color-danger); }
+:where(.sky-html, .sky-model-workspace[data-native-controls]) :where(input:not([type="button"]):not([type="submit"]):not([type="reset"]):not([type="hidden"]):not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]):not([type="color"]):not([type="image"]), select, textarea):not(:where([data-sky-native="off"], [data-sky-native="off"] *, [class^="el-"], [class^="el-"] *, [class*=" el-"], [class*=" el-"] *, .maplibregl-map *, .mapboxgl-map *)):where(textarea) { height:auto; min-height:var(--userssite-control-height-m); padding:5px 11px; line-height:1.5; }
+:where(.sky-html,.sky-model-workspace[data-native-controls]) :where(input[type="checkbox"],input[type="radio"]):not(:where([data-sky-native="off"], [data-sky-native="off"] *, [class^="el-"], [class^="el-"] *, [class*=" el-"], [class*=" el-"] *, .maplibregl-map *, .mapboxgl-map *)) { appearance:none; box-sizing:border-box; display:inline-grid; place-content:center; vertical-align:middle; width:14px; height:14px; margin:0 6px 0 0; border:1px solid var(--userssite-color-border); border-radius:2px; background:var(--userssite-input-bg); cursor:pointer; }
+:where(.sky-html,.sky-model-workspace[data-native-controls]) :where(input[type="checkbox"],input[type="radio"]):not(:where([data-sky-native="off"], [data-sky-native="off"] *, [class^="el-"], [class^="el-"] *, [class*=" el-"], [class*=" el-"] *, .maplibregl-map *, .mapboxgl-map *)):checked { background:var(--userssite-color-primary); border-color:var(--userssite-color-primary); }
+:where(.sky-html,.sky-model-workspace[data-native-controls]) :where(input[type="checkbox"],input[type="radio"]):not(:where([data-sky-native="off"], [data-sky-native="off"] *, [class^="el-"], [class^="el-"] *, [class*=" el-"], [class*=" el-"] *, .maplibregl-map *, .mapboxgl-map *))::after { content:''; width:3px; height:7px; border:solid var(--userssite-color-on-primary); border-width:0 1px 1px 0; transform:rotate(45deg) scale(0); }
+:where(.sky-html,.sky-model-workspace[data-native-controls]) :where(input[type="checkbox"],input[type="radio"]):not(:where([data-sky-native="off"], [data-sky-native="off"] *, [class^="el-"], [class^="el-"] *, [class*=" el-"], [class*=" el-"] *, .maplibregl-map *, .mapboxgl-map *)):checked::after { transform:rotate(45deg) scale(1); }
+:where(.sky-html,.sky-model-workspace[data-native-controls]) :where(input[type="checkbox"],input[type="radio"]):not(:where([data-sky-native="off"], [data-sky-native="off"] *, [class^="el-"], [class^="el-"] *, [class*=" el-"], [class*=" el-"] *, .maplibregl-map *, .mapboxgl-map *))[type="radio"] { border-radius:50%; }
+:where(.sky-html,.sky-model-workspace[data-native-controls]) :where(input[type="checkbox"],input[type="radio"]):not(:where([data-sky-native="off"], [data-sky-native="off"] *, [class^="el-"], [class^="el-"] *, [class*=" el-"], [class*=" el-"] *, .maplibregl-map *, .mapboxgl-map *))[type="radio"]::after { width:4px; height:4px; border:0; border-radius:50%; background:var(--userssite-color-on-primary); }
+:where(.sky-html,.sky-model-workspace[data-native-controls]) :where(input[type="checkbox"],input[type="radio"]):not(:where([data-sky-native="off"], [data-sky-native="off"] *, [class^="el-"], [class^="el-"] *, [class*=" el-"], [class*=" el-"] *, .maplibregl-map *, .mapboxgl-map *)):disabled { cursor:not-allowed; opacity:.5; }
+:where(.sky-html,.sky-model-workspace[data-native-controls]) :where(input[type="checkbox"],input[type="radio"]):not(:where([data-sky-native="off"], [data-sky-native="off"] *, [class^="el-"], [class^="el-"] *, [class*=" el-"], [class*=" el-"] *, .maplibregl-map *, .mapboxgl-map *)):focus-visible { outline:2px solid var(--userssite-color-primary); outline-offset:2px; }
+
+:where(.sky-html) [data-sky-error]:not([data-sky-native="off"]):not([data-sky-native="off"] *) { color:var(--userssite-color-danger); font-size:12px; line-height:1; }
+
+/* 多选列表使用原生 size 行数，不继承单行输入高度。 */
+:where(.sky-html,.sky-model-workspace[data-native-controls]) select:not(:where([data-sky-native="off"], [data-sky-native="off"] *, [class^="el-"], [class^="el-"] *, [class*=" el-"], [class*=" el-"] *, .maplibregl-map *, .mapboxgl-map *)):where([multiple], [size]:not([size="1"]):not([size="0"])) { appearance:none; box-sizing:border-box; width:var(--sky-select-list-width, 220px); max-width:100%; height:auto; min-height:calc(var(--userssite-control-height-m) * 3 + 12px); padding:6px; line-height:1.5; vertical-align:top; overflow:auto; background:var(--userssite-input-bg); scrollbar-width:thin; scrollbar-color:var(--userssite-scrollbar-thumb) transparent; }
+:where(.sky-html,.sky-model-workspace[data-native-controls]) select:not(:where([data-sky-native="off"], [data-sky-native="off"] *, [class^="el-"], [class^="el-"] *, [class*=" el-"], [class*=" el-"] *, .maplibregl-map *, .mapboxgl-map *)):where([multiple], [size]:not([size="1"]):not([size="0"])) option { box-sizing:border-box; min-height:var(--userssite-control-height-m); padding:7px 10px; margin:2px 0; border-radius:var(--userssite-radius-s); color:var(--userssite-color-text); cursor:pointer; }
+:where(.sky-html,.sky-model-workspace[data-native-controls]) input[type="file"]:not(:where([data-sky-native="off"], [data-sky-native="off"] *, [class^="el-"], [class^="el-"] *, [class*=" el-"], [class*=" el-"] *, .maplibregl-map *, .mapboxgl-map *)) { max-width:100%; font-family:var(--userssite-font-family-sans); font-size:var(--userssite-font-size-body); color:var(--userssite-color-text); line-height:1.5; }
+:where(.sky-html,.sky-model-workspace[data-native-controls]) input[type="file"]:not(:where([data-sky-native="off"], [data-sky-native="off"] *, [class^="el-"], [class^="el-"] *, [class*=" el-"], [class*=" el-"] *, .maplibregl-map *, .mapboxgl-map *))::file-selector-button { box-sizing:border-box; height:var(--userssite-control-height-m); margin-inline-end:10px; padding:8px 15px; font:inherit; font-weight:500; line-height:1; border:1px solid var(--userssite-color-border); border-radius:var(--userssite-radius-s); background:var(--userssite-color-panel); color:var(--userssite-color-text); cursor:pointer; }
+:where(.sky-html,.sky-model-workspace[data-native-controls]) input[type="file"]:not(:where([data-sky-native="off"], [data-sky-native="off"] *, [class^="el-"], [class^="el-"] *, [class*=" el-"], [class*=" el-"] *, .maplibregl-map *, .mapboxgl-map *)):hover:not(:disabled)::file-selector-button { color:var(--userssite-color-primary); border-color:var(--userssite-color-primary); background:var(--userssite-surface-control-hover); }
+:where(.sky-html,.sky-model-workspace[data-native-controls]) input[type="file"]:not(:where([data-sky-native="off"], [data-sky-native="off"] *, [class^="el-"], [class^="el-"] *, [class*=" el-"], [class*=" el-"] *, .maplibregl-map *, .mapboxgl-map *)):disabled { color:var(--userssite-color-subtle); cursor:not-allowed; }
+:where(.sky-html,.sky-model-workspace[data-native-controls]) input[type="file"]:not(:where([data-sky-native="off"], [data-sky-native="off"] *, [class^="el-"], [class^="el-"] *, [class*=" el-"], [class*=" el-"] *, .maplibregl-map *, .mapboxgl-map *)):disabled::file-selector-button { color:var(--userssite-color-subtle); border-color:var(--userssite-color-soft-border); background:var(--userssite-surface-subtle); cursor:not-allowed; }
+:where(.sky-html,.sky-model-workspace[data-native-controls]) input[type="file"]:not(:where([data-sky-native="off"], [data-sky-native="off"] *, [class^="el-"], [class^="el-"] *, [class*=" el-"], [class*=" el-"] *, .maplibregl-map *, .mapboxgl-map *)):focus-visible { outline:2px solid var(--userssite-color-primary); outline-offset:2px; border-radius:var(--userssite-radius-s); }
+
+/* 保留原生多选语义，仅统一列表表面；不触碰单选系统弹层。 */
+:where(.sky-html,.sky-model-workspace[data-native-controls]) select:not(:where([data-sky-native="off"], [data-sky-native="off"] *, [class^="el-"], [class^="el-"] *, [class*=" el-"], [class*=" el-"] *, .maplibregl-map *, .mapboxgl-map *)):where([multiple], [size]:not([size="1"]):not([size="0"])):not(:disabled) option:hover:not(:disabled):not(:checked) { background:var(--userssite-surface-control-hover); }
+:where(.sky-html,.sky-model-workspace[data-native-controls]) select:not(:where([data-sky-native="off"], [data-sky-native="off"] *, [class^="el-"], [class^="el-"] *, [class*=" el-"], [class*=" el-"] *, .maplibregl-map *, .mapboxgl-map *)):where([multiple], [size]:not([size="1"]):not([size="0"])) option:checked { color:var(--userssite-color-primary); background:linear-gradient(var(--userssite-surface-control-active),var(--userssite-surface-control-active)); font-weight:600; }
+:where(.sky-html,.sky-model-workspace[data-native-controls]) select:not(:where([data-sky-native="off"], [data-sky-native="off"] *, [class^="el-"], [class^="el-"] *, [class*=" el-"], [class*=" el-"] *, .maplibregl-map *, .mapboxgl-map *)):where([multiple], [size]:not([size="1"]):not([size="0"])) option:disabled { color:var(--userssite-color-subtle); cursor:not-allowed; }
+:where(.sky-html,.sky-model-workspace[data-native-controls]) select:not(:where([data-sky-native="off"], [data-sky-native="off"] *, [class^="el-"], [class^="el-"] *, [class*=" el-"], [class*=" el-"] *, .maplibregl-map *, .mapboxgl-map *)):where([multiple], [size]:not([size="1"]):not([size="0"])):disabled { color:var(--userssite-color-subtle); background:var(--userssite-surface-subtle); cursor:not-allowed; }
+:where(.sky-html,.sky-model-workspace[data-native-controls]) select:not(:where([data-sky-native="off"], [data-sky-native="off"] *, [class^="el-"], [class^="el-"] *, [class*=" el-"], [class*=" el-"] *, .maplibregl-map *, .mapboxgl-map *)):where([multiple], [size]:not([size="1"]):not([size="0"])):disabled option { color:var(--userssite-color-subtle); cursor:not-allowed; }
+@media (forced-colors: active) {
+:where(.sky-html,.sky-model-workspace[data-native-controls]) select:not(:where([data-sky-native="off"], [data-sky-native="off"] *, [class^="el-"], [class^="el-"] *, [class*=" el-"], [class*=" el-"] *, .maplibregl-map *, .mapboxgl-map *)):where([multiple], [size]:not([size="1"]):not([size="0"])) option:checked { background:Highlight; color:HighlightText; }
+}