@ticatec/topside-elements 1.0.0

package/dist/topside-elements.css

@@ -0,0 +1,1753 @@
+@charset "UTF-8";
+:root {
+  /* === Overlay z-index scale ===
+     A single source of truth for stacking order across every overlay
+     surface. Previously each component hardcoded its own literal with no
+     documented relationship to the others — Popover and Indicator both used
+     100, and ContextMenu/FloatingPanel both used 1000, by accident rather
+     than by design. Consumers can override any layer; the relative order
+     below is what actually matters; the absolute numbers only need enough
+     headroom between layers for app code to slot things in between. */
+  --topside-z-dialog: 20;
+  --topside-z-message-box: 30;
+  --topside-z-toast: 40;
+  --topside-z-drawer: 99;
+  --topside-z-popover: 100;
+  --topside-z-indicator: 110;
+  --topside-z-context-menu: 1000;
+  --topside-z-floating-panel: 1010;
+  --topside-z-modal-overlay: 9998;
+  --topside-z-tooltip: 9999;
+  /* === Color Tokens === */
+  --color-primary: #0061FF;
+  --color-secondary: #22BDFF;
+  --color-accent: #2DC071;
+  --color-neutral-50: #F9FAFB;
+  --color-neutral-100: #F3F4F6;
+  --color-neutral-200: #E5E7EB;
+  --color-neutral-300: #D1D5DB;
+  --color-neutral-400: #9CA3AF;
+  --color-neutral-500: #6B7280;
+  --color-neutral-600: #4B5563;
+  --color-neutral-700: #374151;
+  --color-neutral-800: #1F2937;
+  --color-neutral-900: #111827;
+  --color-surface: #FFFFFF;
+  --color-surface-variant: #F8FAFC;
+  --color-surface-elevated: #FFFFFF;
+  --color-border: #E2E8F0;
+  --color-border-subtle: #F1F5F9;
+  /* === Color Tokens === */
+  --topside-color-surface: #FFFFFF;
+  --topside-color-surface-variant: #F8FAFC;
+  --topside-color-border-primary: #d1d5db;
+  --topside-color-border-secondary: #e5e7eb;
+  /* === Spacing Tokens (Tailwind scale: 0.25rem = 4px) === */
+  --topside-spacing-0: 0;
+  --topside-spacing-px: 1px;
+  --topside-spacing-0_5: 2px;
+  --topside-spacing-1: 4px;
+  --topside-spacing-1_5: 6px;
+  --topside-spacing-2: 8px;
+  --topside-spacing-2_5: 10px;
+  --topside-spacing-3: 12px;
+  --topside-spacing-3_5: 14px;
+  --topside-spacing-4: 16px;
+  --topside-spacing-5: 20px;
+  --topside-spacing-6: 24px;
+  --topside-spacing-8: 32px;
+  --topside-spacing-10: 40px;
+  --topside-spacing-12: 48px;
+  --topside-spacing-16: 64px;
+  /* === Radius Tokens (Tailwind scale) === */
+  --topside-radius-none: 0px;
+  --topside-radius-sm: 2px;
+  --topside-radius: 4px;
+  --topside-radius-md: 6px;
+  --topside-radius-lg: 8px;
+  --topside-radius-xl: 12px;
+  --topside-radius-2xl: 16px;
+  --topside-radius-3xl: 24px;
+  --topside-radius-full: 9999px;
+  --topside-color-overlay-mask-surface: rgba(255, 255, 255, 0.13);
+  --topside-color-dialog-mask-surface: rgba(255, 255, 255, 0.0625);
+  /* Topside Toast */
+  --topside-toast-margin: 16px 60px;
+  --topside-toast-radius: 8px;
+  --topside-toast-font-size: 15px;
+  --topside-toast-color-surface-error: #FF685B;
+  --topside-toast-color-surface-info: #0061FF;
+  --topside-toast-color-surface-success: #2DC071;
+  --topside-toast-color: var(--topside-color-surface);
+  --topside-dialog-action-bar-margin: 16px 24px;
+  --topside-dialog-action-bar-text-align: right;
+  --topside-dialog-action-button-color-hover-surface: rgba(0, 0, 0, 0.05);
+  /* Options popover layer tokens*/
+  --topside-popover-layer-top-margin: 0;
+  --topside-option-item-margin: 6px 8px;
+  --topside-popover-layer-color-surface: var(--topside-color-surface);
+  --topside-popover-layer-color: #1f2937;
+  --topside-popover-layer-color-border: #e5e7eb;
+  --topside-popover-layer-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 10px 15px -3px rgba(0, 0, 0, 0.08);
+  --topside-popover-item-color-surface-hover: #f3f4f6;
+  --topside-popover-item-color-hover: #111827;
+  --topside-popover-item-color-surface-active: #eff6ff;
+  --topside-popover-item-color-active: #2563eb;
+  /* Message box */
+  --topside-message-box-radius: 12px;
+  --topside-message-box-width: 480px;
+  --topside-message-box-margin: 8px 12px;
+  --topside-message-box-spacing: 24px;
+  --topside-message-box-title-height: 40px;
+  --topside-message-box-title-bar-margin: 0 16px;
+  --topside-message-box-content-margin: 16px 24px;
+  --topside-message-box-action-bar-margin: 16px 24px;
+  --topside-message-box-action-bar-text-align: center;
+  --topside-message-box-icon-size: 56px;
+  --topside-message-box-color-surface: #f8fafc;
+  --topside-messagebox-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.05), 0 4px 6px -4px rgba(0, 0, 0, 0.05), 0 20px 25px -5px rgba(0, 0, 0, 0.1);
+  --topside-message-color-question: #0284c7;
+  --topside-message-color-warning: #d97706;
+  --topside-message-color-info: #2563eb;
+  --topside-message-color-title-bar: #1f2937;
+  --topside-message-color-title-bar-border: #f0f0f0;
+  /* Context Menu token */
+  --topside-contextmenu-margin: 6px 8px;
+  --topside-contextmenu-minimal-width: 150px;
+  --topside-contextmenu-minimal-height: 100px;
+  --topside-contextmenu-spacing: 8px;
+  --topside-contextmenu-item-margin: 8px;
+  --topside-contextmenu-separator-margin: 8px;
+  --topside-contextmenu-color-surface: var(--topside-color-surface);
+  --topside-contextmenu-color: var(--topside-color-primary);
+  --topside-contextmenu-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.06), 0 4px 12px rgba(0, 0, 0, 0.08);
+  --topside-contextmenu-color-hover-surface: #f3f4f6;
+  --topside-contextmenu-color-hover: #111827;
+  --topside-contextmenu-color-separator: #e5e7eb;
+  /* Indicator Tokens */
+  --topside-indicator-border-radius: var(--topside-radius-lg, 8px);
+  --topside-indicator-content-spacing: 12px;
+  --topside-indicator-content-margin: 16px 24px;
+  --topside-indicator-minimal-size: 300px;
+  --topside-indicator-color-overlay-surface: rgba(255, 255, 255, 0.13);
+  --topside-indicator-color-surface: var(--topside-color-surface);
+  --topside-indicator-color-border: var(--topside-color-border-secondary);
+  --topside-indicator-color: var(--topside-color-secondary);
+  --topside-indicator-box-shadow: rgba(17, 17, 26, 0.1) 0px 8px 24px, rgba(17, 17, 26, 0.1) 0px 16px 56px, rgba(17, 17, 26, 0.1) 0px 24px 80px;
+  /* Tooltip tokens */
+  --topside-tooltip-color-surface: #FFFFE1;
+  --topside-tooltip-color: #374151;
+  --topside-tooltip-box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
+  --topside-tooltip-radius: var(--topside-radius-lg);
+  --topside-tooltip-margin: var(--topside-spacing-2) var(--topside-spacing-3);
+  /* === Shadow Tokens === */
+  --topside-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
+  --topside-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
+  --topside-shadow-lg: 0 4px 6px rgba(0, 0, 0, 0.1);
+  --topside-shadow-xl: 0 10px 15px rgba(0, 0, 0, 0.1);
+  --topside-primary-color-font: #374151;
+  --topside-secondary-color-font: #6B7280;
+  --topside-second-color-font: #374151;
+  --topside-color-primary: #374151;
+  --topside-color-secondary: #7f7f7f;
+  --topside-color-disabled: #94A3B8;
+  --topside-color-disabled-surface: #F8FAFC;
+  /*
+   * Calendar Tokens
+   */
+  --topside-calendar-color-surface: #ffffff;
+  --topside-calendar-color-title: #1f2937;
+  --topside-calendar-color-action: #4b5563;
+  --topside-calendar-color-day-text: #1f2937;
+  --topside-calendar-color-weekend-text: #ea580c;
+  --topside-calendar-color-day-muted-text: #d1d5db;
+  --topside-calendar-color-today-border: #2563eb;
+  --topside-calendar-color-selected-surface: #60a5fa;
+  --topside-calendar-color-selected: #ffffff;
+  --topside-calendar-color-day-surface-hover: #f3f4f6;
+  /* Card Tokens*/
+  --topside-card-default-size: 240px;
+  --topside-card-radius: 10px;
+  --topside-card-header-margin: 8px 16px;
+  --topside-card-content-margin: 20px;
+  --topside-card-content-font-size: 14px;
+  --topside-card-bar-font-size: 24px;
+  --topside-card-footer-margin: 12px 24px;
+  --topside-card-footer-height: 40px;
+  --topside-card-color-surface: #ffffff;
+  /* PageStack Tokens */
+  --topside-page-stack-color-surface: var(--topside-color-surface);
+  --topside-card-color: #111827;
+  /* Card.svelte (and the component's own README/README_CN) reference
+     --topside-card-text-muted; this used to be named --topside-card-color-muted
+     here instead, so the header title color silently fell back to inherited
+     text color everywhere, in both light and dark mode. */
+  --topside-card-text-muted: #4b5563;
+  --topside-card-border-color: var(--topside-color-border-secondary);
+  --topside-card-color-inside-border: #f3f4f6;
+  --topside-card-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.06), 0 1px 2px -1px rgba(0, 0, 0, 0.04);
+  --topside-card-color-action-bar: #6b7280;
+  --topside-card-color-action-bar-hover: #1f2937;
+  --topside-card-color-action-bar-disabled: #bdc3c7;
+  --topside-action-image-size: 15px;
+  /* === Topside Button Tokens === */
+  --topside-button-height: 28px;
+  --topside-button-minimal-size: 90px;
+  --topside-button-spacing: 8px;
+  --topside-button-margin: 12px;
+  --topside-button-radius: var(--radius-md, 4px);
+  --topside-button-height-big: 32px;
+  --topside-button-height-small: 24px;
+  --topside-button-radius-round: 18px;
+  --topside-button-radius-round-big: 24px;
+  --topside-button-radius-round-small: 12px;
+  --topside-button-color-gap: var(--topside-color-surface);
+  /* ==========================================
+   ===== Plain (次要/中性灰按钮) =====
+   ========================================== */
+  --topside-button-plain-color-surface: #F3F4F6; /* 稍微提升质感至 Tailwind gray-100 */
+  --topside-button-plain-border-color: #E5E7EB; /* 让边框比背景略深，更有型 */
+  --topside-button-plain-color: #374151; /* 稳重的深灰文字 */
+  --topside-button-plain-color-surface-hover: #E5E7EB; /* Hover：实色加深 (gray-200) */
+  --topside-button-plain-color-surface-active: #D1D5DB; /* Active：压得更深 (gray-300) */
+  /* ==========================================
+     ===== Primary (主按钮：科技蓝) =====
+     ========================================== */
+  --topside-button-primary-color-surface: #42A5F5;
+  --topside-button-primary-border-color: #42B5DB;
+  --topside-button-primary-color: #FFFFFF;
+  --topside-button-primary-color-surface-hover: #1E88E5; /* Hover：实色蓝色加深，白字更锐利 */
+  --topside-button-primary-color-surface-active: #1565C0; /* Active：深蓝色底反馈 */
+  /* ==========================================
+     ===== Secondary (二级按钮：珊瑚红/警示) =====
+     ========================================== */
+  --topside-button-secondary-color-surface: #FF685B;
+  --topside-button-secondary-border-color: #FF7875;
+  --topside-button-secondary-color: #FFFFFF;
+  --topside-button-secondary-color-surface-hover: #E55347; /* Hover：实色红加深 */
+  --topside-button-secondary-color-surface-active: #C63F34; /* Active：稳重深红 */
+  /* ==========================================
+     ===== Third (三级按钮：成功绿) =====
+     ========================================== */
+  --topside-button-third-color-surface: #2DC071;
+  --topside-button-third-border-color: #2DD08B;
+  --topside-button-third-color: #FFFFFF;
+  --topside-button-third-color-surface-hover: #24A15E; /* Hover：修正原代码绿色偏色，改为实色深绿 */
+  --topside-button-third-color-surface-active: #1B7F4A; /* Active：深绿反馈 */
+  /* ==========================================
+     ===== Forth (四级按钮：警告黄/注意) =====
+     ========================================== */
+  --topside-button-forth-color-surface: #FAD85D;
+  --topside-button-forth-border-color: #FAE877;
+  --topside-button-forth-color: #374151; /* 深色文字 */
+  --topside-button-forth-color-surface-hover: #F4C430; /* Hover：向琥珀/深黄过渡，确保不刺眼 */
+  --topside-button-forth-color-surface-active: #D9A716; /* Active：暗金黄色反馈 */
+  /* ===== disabled（可单独保留） ===== */
+  --topside-button-disabled-color-surface: #F8FAFC;
+  --topside-button-disabled-border-color: #E2E8F0;
+  --topside-button-disabled-color: #94A3B8;
+  --topside-text-button-plain-color: #374151; /* 正常状态：稳重的深灰文字 */
+  --topside-text-button-plain-color-hover: #111827; /* Hover 状态：实色加深至极深黑（Tailwind gray-900），让用户感知到聚焦 */
+  --topside-text-button-plain-color-active: #4B5563; /* Active 状态：点击时稍微回弹变淡（或向中灰收敛），模拟物理按压 */
+  /* 全局统一变量 */
+  --topside-margin-sm: 4px;
+  --topside-margin-md: 6px;
+  --topside-margin: 8px;
+  --topside-margin-lg: 12px;
+  --topside-margin-xl: 16px;
+  --topside-popup-color-surface: var(--topside-color-surface);
+  --topside-popup-shadow: rgba(99, 99, 99, 0.2) 0 2px 8px 0;
+  --topside-accordion-header-bg: #F8FAFC;
+  --topside-accordion-header-hover-bg: #F1F5F9;
+  --topside-accordion-header-border: #E2E8F0;
+  /* AppTopBar Tokens */
+  --topside-app-top-bar-height: 48px;
+  --topside-app-top-bar-font-size: 24px;
+  --topside-app-top-bar-margin: 12px;
+  --topside-top-bar-avatar-size: 40px;
+  --topside-app-top-bar-spacing: 8px;
+  --topside-top-bar-avatar-radius: 50%;
+  --topside-top-bar-color-surface: #0061FF;
+  --topside-top-bar-color-text: #f0f0f0;
+  /** Box Tokens **/
+  --topside-box-radius: var(--topside-radius-md);
+  --topside-box-header-padding: var(--topside-margin-md) var(--topside-margin);
+  --topside-box-footer-padding: var(--topside-margin-md) var(--topside-margin);
+  --topside-box-color-border: var(--topside-color-border-secondary);
+  --topside-box-color-surface: var(--topside-color-surface);
+  --topside-box-color-header-surface: var(--topside-color-surface-variant);
+  --topside-box-color-header-title: var(--topside-primary-color-font);
+  --topside-box-color-footer-surface: var(--topside-color-surface-variant);
+  --topside-box-color-footer-title: var(--topside-second-color-font);
+  /* Page Tokens */
+  --topside-page-border-radius: var(--topside-radius-lg);
+  --topside-page-margin-size: var(--topside-margin-lg);
+  --topside-page-header-height: 48px;
+  --topside-page-header-margin: 12px;
+  --topside-page-color-text: var(--topside-primary-color-font);
+  --topside-page-color-surface: var(--topside-color-surface);
+  --topside-page-color-margin-surface: #ffffff;
+  --topside-page-color-header-bottom: var(--color-neutral-100);
+  --topside-page-color-header-comment: var(--color-neutral-500);
+  --topside-page-border-color: rgba(9, 30, 66, 0.07);
+  --topside-page-box-shadow: rgba(9, 30, 66, 0.05) 0px 4px 12px -2px;
+  /* Drawer Tokens */
+  --topside-drawer-color-surface: var(--topside-color-surface);
+  --topside-drawer-left-shadow: rgba(0, 0, 0, 0.08) 6px 0px 16px, rgba(0, 0, 0, 0.04) 16px 0px 48px;
+  --topside-drawer-right-shadow: rgba(0, 0, 0, 0.08) 6px 0px 16px, rgba(0, 0, 0, 0.04) 16px 0px 48px;
+  /* NavigatorMenu Tokens */
+  --topside-nav-menu-bg: #ffffff;
+  --topside-nav-menu-color: #374151;
+  --topside-nav-menu-hover-bg: #81D4FA;
+  --topside-nav-menu-hover-color: #374151;
+  --topside-spacing-actionbar: 8px;
+  /* FormPanel Tokens */
+  --topside-form-row-gap: 12px;
+  --topside-form-container-padding: 8px 6px;
+  --topside-form-cell-padding: 0 6px;
+  --topside-form-row-padding: 6px 0;
+  --topside-grid-cell-padding: 6px;
+  /* Editor Tokens */
+  --topside-editor-clean-icon-bg: #B3BCCA;
+  --topside-editor-clean-icon-color: #ffffff;
+  --topside-embed-icon-color: #6B7280;
+  --topside-editor-text-color: #374151;
+  --topside-option-text-color: #374151;
+  --topside-editor-line-height: 16px;
+  --topside-editor-padding: 0 8px;
+  --topside-editor-border-color: #E2E8F0;
+  --topside-editor-outlined-disabled-backgournd-color: #F1F5F9;
+  --topside-editor-outlined-disabled-text-color: #B3BCCA;
+  --topside-editor-outlined-radius: 4px;
+  --topside-editor-outlined-active-border-color: #298DFF;
+  --topside-editor-filled-backgournd-color: #F8FAFC;
+  --topside-editor-action-icon-color: #ffffff;
+  --topside-editor-action-icon-hover-color: #374151;
+  --topside-editor-action-icon-background-color: #B3BCCA;
+  --topside-editor-indicator-color: #B3BCCA;
+  --topside-editor-inline-action-icon-color: #37415170;
+  --topside-editor-inline-action-icon-hover-color: #374151;
+  --topside-editor-inline-action-icon-hover-bg: #42A5F51A;
+  /* CheckBox Tokens */
+  --topside-checkbox-text-color: #374151;
+  --topside-checkbox-color-border: #BBC1E1;
+  --topside-checkbox-color-border-hover: #409EFF;
+  --topside-checkbox-color-disabled: #94A3B8;
+  /* 背景容器 */
+  --topside-checkbox-bg: #FFFFFF; /* 未选中时的纯白底 */
+  --topside-checkbox-bg-active: #409EFF; /* 选中时的品牌蓝 */
+  --topside-checkbox-bg-disabled: #F1F5F9; /* 禁用时的浅灰底 */
+  /* 内部对勾 / 标识 */
+  --topside-checkbox-checkmark-color: #FFFFFF; /* 选中时的对勾颜色 */
+  --topside-checkbox-checkmark-color-disabled: #94A3B8; /* 禁用时的对勾颜色 */
+  /* 半选状态 (Indeterminate) */
+  --topside-checkbox-bg-indeterminate: rgba(64, 158, 255, 0.2); /* 浅蓝半透 */
+  --topside-checkbox-color-indeterminate: #409EFF; /* 居中的横杠颜色 */
+  /* CheckBox size tokens */
+  --topside-checkbox-size: 21px;
+  --topside-checkbox-padding: 4px;
+  --topside-checkbox-label-padding-left: 2px;
+  --topside-checkbox-label-padding-right: 6px;
+  --topside-checkbox-check-width: 5px;
+  --topside-checkbox-check-height: 9px;
+  --topside-checkbox-check-left: 7px;
+  --topside-checkbox-check-top: 4px;
+  --topside-checkbox-check-rotation: 43deg;
+  /* Compact size tokens */
+  --topside-checkbox-compact-size: 17px;
+  --topside-checkbox-compact-check-left: 5px;
+  --topside-checkbox-compact-check-top: 2px;
+  --topside-form-field-required-indicator-color: #ff3e00;
+  --topside-form-field-label-color: var(--topside-primary-text-color, #374151);
+  --topside-form-field-invalid-message-color: #ff3e00;
+  --topside-form-field-label-width: 120px;
+  --topside-form-field-label-alignment: right;
+  --topside-form-field-padding: 6px 4px;
+  --topside-field-gap: 4px;
+  --topside-picker-action-icon-size: 22px;
+  --topside-editor-margin: 8px;
+  --topside-editor-spacing: 4px;
+  --topside-editor-color-surface: transparent;
+  --topside-editor-color: var(--topside-primary-color-font);
+  --topside-editor-color-disabled: #94A3B8;
+  --topside-editor-color-surface-disabled: #F3F4F6;
+  --topside-editor-color-filled-surface: #F1F5F9;
+  --topside-editor-color-filled-surface-active: #E2E8F0;
+  --topside-editor-color-border: var(--topside-color-border-secondary);
+  --topside-editor-color-active-border: #3b82f6;
+  --topside-editor-color-placeholder: #9CA3AF;
+  --topside-editor-color-border-error: #EF4444;
+  --topside-option-padding: var(--topside-margin-md) var(--topside-margin);
+  /* Split token */
+  --topside-dividing-line-color: #CBD5E1;
+  /* Switch Tokens */
+  --topside-switch-width: 100px;
+  --topside-switch-height: 30px;
+  --topside-switch-knob-size: 22px;
+  --topside-switch-knob-offset: 5px;
+  --topside-switch-radius: 30px;
+  --topside-switch-color-text-unchecked: #6B7280;
+  --topside-switch-color-text-checked: #FFFFFF;
+  --topside-switch-color-surface: #FFFFFF;
+  --topside-switch-color-border: #ADB5BD;
+  --topside-switch-color-knob: #ADB5BD;
+  --topside-switch-color-surface-checked: #42A5F5;
+  --topside-switch-color-border-checked: #42A5F5;
+  --topside-switch-color-knob-checked: #FFFFFF;
+  --topside-switch-color-focus-ring: #42A5F5;
+  --topside-switch-color-surface-disabled: #F1F5F9;
+  --topside-switch-color-border-disabled: #E2E8F0;
+  --topside-switch-color-text-disabled: #94A3B8;
+  --topside-switch-color-knob-disabled: #CBD5E1;
+  --topside-switch-color-surface-checked-disabled: #E2E8F0;
+  --topside-switch-color-border-checked-disabled: #E2E8F0;
+  /* Tag Tokens */
+  --topside-tag-height: 28px;
+  --topside-tag-height-sm: 20px;
+  --topside-tag-height-bg: 30px;
+  --topside-tag-font-size: 12px;
+  --topside-tag-margin: 12px;
+  --topside-tag-action-color: #374151;
+  --topside-tag-g0-color: #374151;
+  --topside-tag-g1-color: #0061FF;
+  --topside-tag-g2-color: #2DC071;
+  --topside-tag-g3-color: #FF4D4F;
+  --topside-tag-g4-color: #FFBF00;
+  --topside-tag-g5-color: #EB2F96;
+  --topside-tag-g6-color: #13C2C2;
+  --topside-tag-g7-color: #FA541C;
+  --topside-tag-g8-color: #FA8C16;
+  --topside-tag-g9-color: #2F54EB;
+  --topside-tag-g10-color: #722ED1;
+  --topside-tag-g11-color: #A0D911;
+  --topside-tag-g12-color: #374151;
+  --topside-tag-g12-bg: #F8FAFC;
+  --topside-tag-g12-border: #E2E8F0;
+  /* Breadcrumbs */
+  --topside-breadcrumbs-spacing: 8px;
+  --topside-breadcrumbs-padding: var(--topside-margin) 0;
+  --topside-breadcrumbs-color: #6B7280;
+  --topside-breadcrumbs-color-hover: #374151;
+  --topside-breadcrumbs-color-active: #111827;
+  /* progress-step-bar */
+  --topside-progress-step-bar-color-surface: var(--topside-color-surface-variant);
+  --topside-progress-step-processing-color: #0061FF;
+  --topside-progress-step-pending-color: #B3BCCA;
+  --topside-progress-step-completed-color: #374151;
+  --topside-progress-step-completed-icon-bg: #0061FF1A;
+  --topside-progress-step-completed-icon-color: #0061FF;
+  /* TreeView Tokens */
+  --topside-treeview-chevron-color: #6b7280;
+  --topside-treeview-chevron-hover-color: #111827;
+  --topside-treeview-item-bg: #EEF4FF;
+  --topside-treeview-item-selected-color: #0061FF;
+  /* The listbox body itself previously had no surface/text color of its own
+     — it just showed through the page background, which happened to look
+     fine only because most light-mode pages are white. */
+  --topside-list-box-color-surface: var(--topside-color-surface);
+  --topside-list-box-color: var(--topside-primary-color-font);
+  --topside-listbox-separator-color: #F0F0F0;
+  --topside-list-box-hover-surface: #FFFFE1;
+  --topside-list-box-selected-surface: #b1c8f6;
+  --topside-list-box-header-bottom-border: none;
+  --topside-list-box-fotter-top-border: 1px solid #f0f0f0;
+  --topside-list-box-border-color: #f0f0f0;
+  --topside-list-box-header-surface: #F8FAFC;
+  --topside-list-box-footer-surface: #F8FAFC;
+  --topside-list-box-header-height: 32px;
+  --topside-list-box-header-margin: 0 12px;
+  /* Pagination Tokens */
+  --topside-default-text-color: #374151;
+  --topside-primary-border-color: #E2E8F0;
+  --topside-default-text-hover-color: #298DFF80;
+  --topside-default-active-text-color: #0061FF;
+  --topside-default-active-border-color: #0061FF80;
+  --topside-pagination-selected-color: #ffffff;
+  --topside-pagination-selected-background-color: #333333;
+  /* Tabs Tokens */
+  --topside-tabs-header-background-color: #FFFFFF;
+  --topside-tab-active-text-color: #0061FF;
+  --topside-tab-active-background-color: #FFFFFF;
+  --topside-tab-inactive-text-color: #374151;
+  --topside-tab-inactive-background-color: #FFFFFF;
+  --topside-tab-border-color: #E2E8F0;
+  --topside-tab-bg: #F8FAFC;
+  --topside-tab-action-background: #FFFFFF;
+  --topside-tab-hover-text-color: #298DFF;
+  --topside-tab-header-radius: 4px;
+  /* Concise Data Table Tokens
+     Previously these tokens didn't exist anywhere in this file at all —
+     ConciseListTable.svelte referenced --topside-concise-table-row-alter-bg/
+     -color with light-only fallback values and otherwise used hardcoded
+     literals (#f5f5f5 header, #f9f9f9 hover) with no variable and no
+     dark-mode hook whatsoever. */
+  --topside-concise-table-color-surface: var(--topside-color-surface);
+  --topside-concise-table-color: var(--topside-primary-color-font);
+  --topside-concise-table-header-surface: #f5f5f5;
+  --topside-concise-table-row-alter-bg: #F8FAFC;
+  --topside-concise-table-row-alter-color: #374151;
+  --topside-concise-table-row-hover-bg: #f9f9f9;
+  /* Navigator Tokens
+     Previously the component declared its own local custom properties
+     (scoped to .topside-navigator-panel) instead of reading from this file,
+     and one of them pointed at --topside-application-bg, a token that was
+     never defined anywhere — so the panel background was always invalid/
+     unset (transparent) and had no light/dark distinction at all. */
+  --topside-navigator-background-color: var(--topside-color-surface);
+  --topside-navigator-completed-text-color: #374151;
+  --topside-navigator-not-start-text-color: #6B7280;
+  --topside-navigator-warning-dot-color: #C62828;
+  --topside-navigator-hover-text-color: #298DFF;
+  --topside-navigator-active-text-color: #0061FF;
+  --topside-navigator-highlight-text-color: #0061FF;
+  --topside-navigator-connector-color: #D1D5DB;
+}
+
+/* ============================================
+   DARK THEME
+   ============================================ */
+[data-theme=dark] {
+  --color-neutral-50: #1a1a1a;
+  --color-neutral-100: #2a2a2a;
+  --color-neutral-200: #3a3a3a;
+  --color-neutral-300: #4a4a4a;
+  --color-neutral-400: #6a6a6a;
+  --color-neutral-500: #8a8a8a;
+  --color-neutral-600: #9a9a9a;
+  --color-neutral-700: #bababa;
+  --color-neutral-800: #dadada;
+  --color-neutral-900: #eaeaea;
+  --color-surface: #1a1a1a;
+  --color-surface-variant: #2a2a2a;
+  --color-surface-elevated: #2a2a2a;
+  --color-border: #3a3a3a;
+  --color-border-subtle: #2a2a2a;
+  --topside-color-primary: #f3f4f6; /* 对应 Tailwind gray-100：用于核心正文、标题，极为清晰 */
+  --topside-color-secondary: #9ca3af; /* 对应 Tailwind gray-400：用于次要描述文字、小字、未激活图标 */
+  --topside-primary-color-font: #ffffff;
+  --topside-second-color-font: #7f7f7f;
+  --topside-color-surface: #1a1a1a;
+  --topside-color-surface-variant: #262626; /* 或 #242424 / #2a2b2d */
+  --topside-color-border-primary: #404040; /* 或 #434343 */
+  --topside-color-border-secondary:#2d2d2d; /* 或 #303030 */
+  /* 接近透明的遮罩层颜色 */
+  --topside-color-overlay-mask-surface: rgba(255, 255, 255, 0.07);
+  --topside-popup-color-surface: var(--topside-color-surface);
+  --topside-popup-shadow: 0 4px 16px 0 rgba(0, 0, 0, 0.7), 0 0 0 1px rgba(255, 255, 255, 0.15);
+  /* Indicator Tokens */
+  --topside-indicator-color-surface: var(--topside-color-surface);
+  --topside-indicator-color-border: var(--topside-color-border-secondary);
+  --topside-indicator-color: var(--topside-color-secondary);
+  --topside-indicator-box-shadow: rgba(0, 0, 0, 0.45) 0px 8px 24px, rgba(0, 0, 0, 0.3) 0px 16px 56px, rgba(0, 0, 0, 0.2) 0px 24px 80px;
+  /* Toast tokens */
+  --topside-toast-color-surface-error: #E55347; /* 弱化后的错误底色：柔和的珊瑚红 */
+  --topside-toast-color-surface-info: #3B82F6; /* 弱化后的信息底色：清爽的亮蓝 */
+  --topside-toast-color-surface-success: #10B981; /* 弱化后的成功底色：温润的薄荷绿 */
+  --topside-toast-color: var(--topside-color-primary); /* 文字依然保持高清晰度的白 */
+  /* Dialog and message box*/
+  --topside-dialog-action-button-color-hover-surface: rgba(0, 0, 0, 0.07);
+  /* Options popover layer tokens*/
+  --topside-popover-layer-color-surface: #262626;
+  --topside-popover-layer-color: #e5e7eb;
+  --topside-popover-layer-color-border: rgba(255, 255, 255, 0.08);
+  --topside-popover-layer-shadow: 0 4px 12px rgba(0, 0, 0, 0.5), 0 16px 32px rgba(0, 0, 0, 0.4);
+  --topside-popover-item-color-surface-hover: rgba(255, 255, 255, 0.08);
+  --topside-popover-item-color-hover: #ffffff;
+  --topside-popover-item-color-surface-active: rgba(59, 130, 246, 0.16);
+  --topside-popover-item-color-active: #60a5fa;
+  /* Message Box*/
+  --topside-message-box-color-surface: #262626;
+  --topside-messagebox-shadow: 0 4px 12px rgba(0, 0, 0, 0.5), 0 16px 48px rgba(0, 0, 0, 0.4);
+  --topside-message-color-question: #38bdf8;
+  --topside-message-color-warning: #fbbf24;
+  --topside-message-color-info: #60a5fa;
+  --topside-message-color-title-bar: #ffffff;
+  --topside-message-color-title-bar-border: #404040;
+  /* Context menu*/
+  --topside-contextmenu-color-surface: #262626;
+  --topside-contextmenu-color: #e5e7eb;
+  --topside-contextmenu-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.5), 0 10px 20px rgba(0, 0, 0, 0.4);
+  --topside-menu-item-hover-background-color: rgba(255, 255, 255, 0.08);
+  --topside-menu-item-hover-text-color: #ffffff;
+  --topside-contextmenu-color-separator: rgba(255, 255, 255, 0.08);
+  /* */
+  --topside-calendar-color-surface: #262626;
+  --topside-calendar-color-title: #e5e7eb;
+  --topside-calendar-color-action: #9ca3af;
+  --topside-calendar-color-day-text: #e5e7eb;
+  --topside-calendar-color-weekend-text: #ff7849;
+  --topside-calendar-color-day-muted-text: #4b5563;
+  --topside-calendar-color-today-border: #60a5fa;
+  --topside-calendar-color-selected-surface: #2563eb;
+  --topside-calendar-color-selected: #ffffff;
+  --topside-calendar-color-day-surface-hover: rgba(255, 255, 255, 0.08);
+  /* TreeView Tokens */
+  --topside-treeview-chevron-color: #9ca3af;
+  --topside-treeview-chevron-hover-color: #e5e7eb;
+  --topside-treeview-item-bg: rgba(255, 255, 255, 0.08);
+  --topside-treeview-item-selected-color: #60a5fa;
+  /* ListBox Tokens - Dark Theme
+     Previously entirely missing: every ListBox token only had a light value
+     in :root, with no [data-theme="dark"] override, so the box stayed
+     light-themed (light header/footer surfaces, near-white hover/selected
+     highlight colors) regardless of dark mode. */
+  --topside-list-box-color-surface: var(--topside-color-surface);
+  --topside-list-box-color: #e5e7eb;
+  --topside-listbox-separator-color: rgba(255, 255, 255, 0.08);
+  --topside-list-box-hover-surface: rgba(255, 255, 255, 0.08);
+  --topside-list-box-selected-surface: rgba(59, 130, 246, 0.24);
+  --topside-list-box-fotter-top-border: 1px solid rgba(255, 255, 255, 0.08);
+  --topside-list-box-border-color: #3a3a3a;
+  --topside-list-box-header-surface: #262626;
+  --topside-list-box-footer-surface: #262626;
+  /* Menu Separator */
+  --topside-menu-separator-color: rgba(255, 255, 255, 0.08);
+  /* Drawer Tokens */
+  --topside-drawer-color-surface: var(--topside-color-surface);
+  --topside-drawer-left-shadow: rgba(0, 0, 0, 0.45) 8px 0px 24px, rgba(0, 0, 0, 0.3) 24px 0px 64px; /* Left Drawer（从左侧滑出，阴影向右投射：X轴为正） */
+  --topside-drawer-right-shadow: rgba(0, 0, 0, 0.45) -8px 0px 24px, rgba(0, 0, 0, 0.3) -24px 0px 64px; /* Right Drawer（从右侧滑出，阴影向左投射：X轴为负） */
+  --topside-box-color-border: var(--topside-color-border-secondary);
+  --topside-box-color-surface: var(--topside-color-surface);
+  --topside-box-color-header-surface: var(--topside-color-surface-variant);
+  --topside-box-color-header-title: var(--topside-primary-color-font);
+  --topside-box-color-footer-surface: var(--topside-color-surface-variant);
+  --topside-box-color-footer-title: var(--topside-second-color-font);
+  /* Card Tokens - Dark Theme
+     Previously entirely missing: Card only had light-mode values in :root,
+     with no [data-theme="dark"] override, so cards stayed white/light
+     regardless of dark mode. */
+  --topside-card-color-surface: #262626;
+  /* PageStack Tokens - Dark Theme */
+  --topside-page-stack-color-surface: var(--topside-color-surface);
+  --topside-card-color: #e5e7eb;
+  --topside-card-text-muted: #9ca3af;
+  --topside-card-color-inside-border: rgba(255, 255, 255, 0.08);
+  --topside-card-shadow: 0 4px 12px rgba(0, 0, 0, 0.5), 0 16px 32px rgba(0, 0, 0, 0.4);
+  --topside-card-color-action-bar: #9ca3af;
+  --topside-card-color-action-bar-hover: #ffffff;
+  --topside-card-color-action-bar-disabled: #52525b;
+  --topside-page-color-text: var(--topside-primary-color-font);
+  --topside-page-color-surface: var(--topside-color-surface);
+  --topside-page-border-color: rgba(255, 255, 255, 0.06);
+  --topside-page-color-margin-surface: #1a1a1a;
+  --topside-page-color-header-bottom: rgba(255, 255, 255, 0.08);
+  --topside-page-color-header-comment: #9ca3af;
+  --topside-page-box-shadow: 0 1px 0 0 rgba(255, 255, 255, 0.05) inset, 0 4px 12px 0 rgba(0, 0, 0, 0.4);
+  --shadow-token: 0 1px 3px rgba(0, 0, 0, 0.3);
+  --shadow-token-lg: 0 4px 6px rgba(0, 0, 0, 0.3);
+  /* Tooltip */
+  --topside-tooltip-color-surface: #2A2B2D; /* Tooltip 文字颜色：换用温润、清晰的亮灰白，对眼睛非常友好 */
+  --topside-tooltip-color: #E2E8F0; /* Tooltip 阴影与轮廓：大扩散的纯黑重阴影 + 1px 的极淡白边框（暗色 UI 的灵魂，勾勒气泡轮廓） */
+  --topside-tooltip-box-shadow: 0 4px 12px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(255, 255, 255, 0.12);
+  /* ==========================================
+     ===== Plain (次要/中性灰按钮) =====
+     ========================================== */
+  /* 正常底色比大背景 #1A1A1A 稍微亮一点，形成卡片悬浮感 */
+  --topside-button-plain-color-surface: #2E3033;
+  --topside-button-plain-border-color: #3F4246;
+  --topside-button-plain-color: #E2E8F0; /* 换成高清晰度的亮灰字 */
+  --topside-button-plain-color-surface-hover: #3D4045; /* Hover：提亮，模拟受光面 */
+  --topside-button-plain-color-surface-active: #242528; /* Active：点击时下沉变暗 */
+  /*  */
+  --topside-button-color-gap: var(--topside-color-surface);
+  /* ==========================================
+     ===== Primary (主按钮：科技蓝) =====
+     ========================================== */
+  --topside-button-primary-color-surface: #3B82F6; /* 换成高明度的亮蓝 (Tailwind blue-500) */
+  --topside-button-primary-border-color: #60A5FA;
+  --topside-button-primary-color: #FFFFFF;
+  --topside-button-primary-color-surface-hover: #60A5FA; /* Hover：进一步提亮/泛光 (blue-400) */
+  --topside-button-primary-color-surface-active: #2563EB; /* Active：点击时收敛变深 */
+  /* ==========================================
+     ===== Secondary (二级按钮：珊瑚红/警示) =====
+     ========================================== */
+  --topside-button-secondary-color-surface: #EF4444; /* 高亮红 (Tailwind red-500) */
+  --topside-button-secondary-border-color: #F87171;
+  --topside-button-secondary-color: #FFFFFF;
+  --topside-button-secondary-color-surface-hover: #F87171; /* Hover：提亮 (red-400) */
+  --topside-button-secondary-color-surface-active: #DC2626; /* Active：点击时压深 */
+  /* ==========================================
+     ===== Third (三级按钮：成功绿) =====
+     ========================================== */
+  --topside-button-third-color-surface: #10B981; /* 高亮薄荷绿 (Tailwind emerald-500) */
+  --topside-button-third-border-color: #34D399;
+  --topside-button-third-color: #FFFFFF;
+  --topside-button-third-color-surface-hover: #34D399; /* Hover：提亮 (emerald-400) */
+  --topside-button-third-color-surface-active: #059669; /* Active：点击时压深 */
+  /* ==========================================
+     ===== Forth (四级按钮：警告黄/注意) =====
+     ========================================== */
+  --topside-button-forth-color-surface: #FBBF24; /* 换用明亮的琥珀黄 (Tailwind amber-400) */
+  --topside-button-forth-border-color: #FCD34D;
+  --topside-button-forth-color: #111827; /* 黄底上必须用高饱正文黑，对比度才完美 */
+  --topside-button-forth-color-surface-hover: #FCD34D; /* Hover：提亮发光 (amber-300) */
+  --topside-button-forth-color-surface-active: #D97706; /* Active：点击时向暗金回弹 */
+  --topside-button-disabled-color-surface: #202020; /* 禁用按钮的底色：仅比大背景 #1A1A1A 略微亮 2%~3%，呈现下沉后的静默感 */
+  --topside-button-disabled-border-color: #2A2A2A; /* 禁用按钮的边框：极微弱的灰色阻隔，或直接设为 transparent 隐去边框 */
+  --topside-button-disabled-color: #52525B; /* 禁用按钮的文字：大幅度压暗，失去高光，提示不可交互 */
+  --disabled-button-color: #1a1a1a;
+  --disabled-button-border-color: #2a2a2a;
+  --disabled-button-text-color: #666666;
+  --topside-text-button-plain-color: #D1D5DB;
+  --topside-text-button-plain-color-hover: #FFFFFF; /* Hover 状态：鼠标移入时文字彻底提亮至纯白，产生瞬间高光感 */
+  --topside-text-button-plain-color-active: #9CA3AF; /* Active 状态：点击时向暗处沉降，变回低调的深灰（Tailwind gray-400） */
+  --topside-accordion-header-bg: #2a2a2a;
+  --topside-accordion-header-hover-bg: #3a3a3a;
+  --topside-accordion-header-border: #3a3a3a;
+  --topside-top-bar-background-color: #0a0a0a;
+  --topside-top-bar-color: #e0e0e0;
+  /* Drawer Tokens */
+  --topside-drawer-color-surface: #1a1a1a;
+  --topside-drawer-shadow: rgba(0, 0, 0, 0.3) 0 4px 6px;
+  --topside-drawer-border-color: #3a3a3a;
+  /* NavigatorMenu Tokens */
+  --topside-nav-menu-bg: #1a1a1a;
+  --topside-nav-menu-color: #e0e0e0;
+  --topside-nav-menu-hover-bg: #3a3a3a;
+  --topside-nav-menu-hover-color: #e0e0e0;
+  /* Page Tokens - Dark Theme */
+  --topside-page-text-color: #e5e7eb;
+  --topside-page-content-bg: #1f2937;
+  --topside-page-margin-color: #0f172a;
+  --topside-page-border-radius: 12px;
+  --topside-page-header-comment-color: #9ca3af;
+  --topside-page-box-shadow: rgba(0, 0, 0, 0.5) 0px 4px 8px -2px;
+  --topside-page-margin-size: 12px;
+  --topside-page-divid-color: #374151;
+  /* FormPanel Tokens - Dark Theme */
+  --topside-form-row-gap: 12px;
+  --topside-form-container-padding: 8px 6px;
+  --topside-form-cell-padding: 0 6px;
+  --topside-form-row-padding: 6px 0;
+  --topside-grid-cell-padding: 6px;
+  /* Editor Tokens - Dark Theme */
+  --topside-editor-clean-icon-bg: #4a4a4a;
+  --topside-editor-clean-icon-color: #e0e0e0;
+  --topside-embed-icon-color: #9ca3af;
+  --topside-editor-line-height: 16px;
+  --topside-editor-padding: 0 8px;
+  --topside-editor-border-color: #3a3a3a;
+  --topside-editor-outlined-disabled-backgournd-color: #2a2a2a;
+  --topside-editor-outlined-disabled-text-color: #666666;
+  --topside-editor-outlined-radius: 4px;
+  --topside-editor-outlined-active-border-color: #42A5F5;
+  --topside-editor-action-icon-color: #e0e0e0;
+  --topside-editor-action-icon-hover-color: #ffffff;
+  --topside-editor-action-icon-background-color: #4a4a4a;
+  --topside-editor-indicator-color: #666666;
+  --topside-editor-inline-action-icon-color: #e0e0e0b0;
+  --topside-editor-inline-action-icon-hover-color: #ffffff;
+  --topside-editor-inline-action-icon-hover-bg: #42A5F540;
+  /* CheckBox Tokens - Dark Theme (完整的 dark 变量在文件末尾统一定义) */
+  --topside-form-field-required-indicator-color: #ffffff;
+  --topside-form-field-label-color: #e0e0e0;
+  --topside-editor-error-color: #ffffff;
+  --topside-editor-text-color: #f0f0f0;
+  --topside-option-text-color: #e5e7eb;
+  --topside-editor-filled-backgournd-color: #1a1a1a;
+  --topside-editor-color-surface: transparent;
+  --topside-editor-color: var(--topside-primary-color-font);
+  --topside-editor-color-disabled: #4B5563;
+  --topside-editor-color-surface-disabled: #1E1E1E;
+  --topside-editor-color-filled-surface: #242424;
+  --topside-editor-color-filled-surface-active: #2D2D2D;
+  --topside-editor-color-border: var(--topside-color-border-secondary);
+  --topside-editor-color-active-border: #60A5FA;
+  --topside-editor-color-placeholder: #6B7280;
+  --topside-editor-color-border-error: #F87171;
+  --topside-tag-action-color: #E2E8F0;
+  --topside-tag-g0-color: #E2E8F0;
+  --topside-tag-g1-color: #60A5FA; /* 蓝 (原 #0061FF -> 提亮，避开高纯深蓝) */
+  --topside-tag-g2-color: #4ADE80; /* 绿 (原 #2DC071 -> 亮绿) */
+  --topside-tag-g3-color: #F87171; /* 红 (原 #FF4D4F -> 柔和粉红) */
+  --topside-tag-g4-color: #FBBF24; /* 黄 (原 #FFBF00 -> 琥珀黄) */
+  --topside-tag-g5-color: #F472B6; /* 粉 (原 #EB2F96 -> 亮粉) */
+  --topside-tag-g6-color: #2DD4BF; /* 青 (原 #13C2C2 -> 亮青/明亮双色) */
+  --topside-tag-g7-color: #FB923C; /* 橘红 (原 #FA541C -> 亮橘红) */
+  --topside-tag-g8-color: #F59E0B; /* 橘黄 (原 #FA8C16 -> 亮金黄) */
+  --topside-tag-g9-color: #818CF8; /* 靛蓝 (原 #2F54EB -> 靛青/浅紫蓝) */
+  --topside-tag-g10-color: #C084FC; /* 紫 (原 #722ED1 -> 亮紫) */
+  --topside-tag-g11-color: #A3E635; /* 柠檬绿 (原 #A0D911 -> 亮酸橙) */
+  --topside-breadcrumbs-color: #6B7280;
+  --topside-breadcrumbs-color-hover: #9CA3AF;
+  --topside-breadcrumbs-color-active: #F3F4F6;
+  --topside-progress-step-bar-color-surface: #242424;
+  --topside-progress-step-processing-color: #60A5FA; /* (Tailwind blue-400) */
+  --topside-progress-step-pending-color: #4B5563; /* (Tailwind gray-600) */
+  --topside-progress-step-completed-color: #E2E8F0; /* (Tailwind slate-200) */
+  --topside-progress-step-completed-icon-bg: rgba(96, 165, 250, 0.15);
+  --topside-progress-step-completed-icon-color: #60A5FA;
+  /* Split token - Dark Theme */
+  --topside-dividing-line-color: #4a4a4a;
+  /* Switch token - Dark Theme */
+  --topside-switch-color-text-unchecked: #9CA3AF;
+  --topside-switch-color-text-checked: #FFFFFF;
+  --topside-switch-color-surface: #2E3033;
+  --topside-switch-color-border: #3F4246;
+  --topside-switch-color-knob: #6B7280;
+  --topside-switch-color-surface-checked: #3B82F6;
+  --topside-switch-color-border-checked: #60A5FA;
+  --topside-switch-color-knob-checked: #FFFFFF;
+  --topside-switch-color-focus-ring: #60A5FA;
+  --topside-switch-color-surface-disabled: #1A1A1A;
+  --topside-switch-color-border-disabled: #2A2A2A;
+  --topside-switch-color-text-disabled: #4B5563;
+  --topside-switch-color-knob-disabled: #374151;
+  --topside-switch-color-surface-checked-disabled: #2A2A2A;
+  --topside-switch-color-border-checked-disabled: #2A2A2A;
+  --topside-checkbox-text-color: #E2E8F0; /* 提亮至柔和白字 */
+  --topside-checkbox-color-border: #4B5563; /* 变深至 Tailwind gray-600 */
+  --topside-checkbox-color-border-hover: #60A5FA; /* 高亮蓝 (blue-400) */
+  --topside-checkbox-color-disabled: #4B5563; /* 禁用文字变灰暗 */
+  /* 背景容器 */
+  --topside-checkbox-bg: #242528; /* 未选中：微亮的碳灰底，拉开物理层级 */
+  --topside-checkbox-bg-active: #3B82F6; /* 选中：明度更高的科技蓝 (blue-500) */
+  --topside-checkbox-bg-disabled: #151515; /* 禁用：下沉得比大背景 #1A1A1A 还要黑 */
+  /* 内部对勾 / 标识 */
+  --topside-checkbox-checkmark-color: #FFFFFF; /* 保持纯白，在蓝底上极度清晰 */
+  --topside-checkbox-checkmark-color-disabled: #4B5563; /* 禁用时的暗灰色对勾 */
+  /* 半选状态 (Indeterminate) */
+  --topside-checkbox-bg-indeterminate: rgba(59, 130, 246, 0.15); /* 暗色霓虹蓝微光 */
+  --topside-checkbox-color-indeterminate: #60A5FA; /* 亮蓝横杠 */
+  /* Pagination Tokens - Dark Theme */
+  --topside-default-text-color: #E2E8F0;
+  --topside-primary-border-color: #3a3a3a;
+  --topside-default-text-hover-color: #60A5FA80; /* blue-400 50% */
+  --topside-default-active-text-color: #60A5FA; /* blue-400，暗底下提亮 */
+  --topside-default-active-border-color: #60A5FA80;
+  --topside-pagination-selected-color: #FFFFFF;
+  --topside-pagination-selected-background-color: #E2E8F0; /* plain 模式下选中文字色 */
+  /* Tabs Tokens - Dark Theme */
+  --topside-tabs-header-background-color: #1a1a1a;
+  --topside-tab-active-text-color: #60A5FA; /* blue-400 */
+  --topside-tab-active-background-color: #262626; /* 与内容区融合 */
+  --topside-tab-inactive-text-color: #E2E8F0;
+  --topside-tab-inactive-background-color: transparent;
+  --topside-tab-border-color: #3a3a3a;
+  --topside-tab-bg: #262626; /* 内容区背景，让激活 tab 底边融合 */
+  --topside-tab-action-background: #262626;
+  --topside-tab-hover-text-color: #60A5FA;
+  --topside-tab-header-radius: 4px;
+  /* Concise Data Table Tokens - Dark Theme */
+  --topside-concise-table-color-surface: var(--topside-color-surface);
+  --topside-concise-table-color: #e5e7eb;
+  --topside-concise-table-header-surface: #262626;
+  --topside-concise-table-row-alter-bg: #1f1f1f;
+  --topside-concise-table-row-alter-color: #e5e7eb;
+  --topside-concise-table-row-hover-bg: rgba(255, 255, 255, 0.08);
+  /* Navigator Tokens - Dark Theme */
+  --topside-navigator-background-color: var(--topside-color-surface);
+  --topside-navigator-completed-text-color: #e5e7eb;
+  --topside-navigator-not-start-text-color: #9ca3af;
+  --topside-navigator-warning-dot-color: #f87171;
+  --topside-navigator-hover-text-color: #60a5fa;
+  --topside-navigator-active-text-color: #60a5fa;
+  --topside-navigator-highlight-text-color: #60a5fa;
+  --topside-navigator-connector-color: #3a3a3a;
+}
+
+* {
+  box-sizing: border-box;
+}
+
+/* [修复] @use 必须严格放在文件的第一行，不能放在中途 */
+/* ========== 3. 变体映射表（供循环生成） ========== */
+/* ========== 4. 基础按钮样式 ========== */
+.topside-button {
+  cursor: pointer;
+  text-align: center;
+  user-select: none;
+  font-size: 1em;
+  /* [优化] 从 none 改为 1px solid transparent，确保后期循环生成的 border-color 能正常显示 */
+  border: 1px solid transparent;
+  box-sizing: border-box; /* 确保边框不撑大按钮实体 */
+  transition: background-color 0.3s ease, border-color 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;
+  background-color: var(--topside-button-plain-color-surface);
+  border-color: var(--topside-button-plain-border-color);
+  color: var(--topside-button-plain-color);
+}
+.topside-button.common-button {
+  display: inline-flex;
+  flex-direction: row;
+  align-items: center;
+  min-width: var(--topside-button-minimal-size);
+  height: var(--topside-button-height);
+  gap: var(--topside-button-spacing);
+  letter-spacing: 1px;
+  padding: 0 var(--topside-button-margin);
+  border-radius: var(--radius-md, 4px);
+}
+.topside-button.common-button.large {
+  height: var(--topside-button-height-big);
+  font-size: 1.1rem;
+}
+.topside-button.common-button.small {
+  height: var(--topside-button-height-small);
+  font-size: 0.9rem;
+}
+.topside-button.common-button.plain {
+  border-radius: 0;
+}
+.topside-button.common-button.round {
+  border-radius: var(--topside-button-radius-round);
+}
+.topside-button.common-button.round.large {
+  border-radius: var(--topside-button-radius-round-big);
+}
+.topside-button.common-button.round.small {
+  border-radius: var(--topside-button-radius-round-small);
+}
+.topside-button.common-button i {
+  font-size: 1.5rem;
+}
+.topside-button.icon-button {
+  display: inline-flex; /* [修复] 图标按钮居中建议用 inline-flex，更稳妥 */
+  flex-direction: row;
+  align-items: center;
+  justify-content: center;
+  outline: none;
+  width: var(--topside-button-height);
+  height: var(--topside-button-height);
+  border-radius: 50%;
+  padding: 0;
+}
+.topside-button.icon-button i {
+  font-size: 18px;
+}
+.topside-button.icon-button.large {
+  width: var(--topside-button-height-big);
+  height: var(--topside-button-height-big);
+}
+.topside-button.icon-button.large i {
+  font-size: 22px;
+}
+.topside-button.icon-button.small {
+  width: var(--topside-button-height-small);
+  height: var(--topside-button-height-small);
+}
+.topside-button.icon-button.small i {
+  font-size: 16px;
+}
+.topside-button.icon-button.no-outer:focus, .topside-button.icon-button.no-outer:focus-visible, .topside-button.icon-button.no-outer:active {
+  outline: none !important;
+  box-shadow: none !important;
+}
+.topside-button:hover {
+  background-color: var(--topside-button-plain-color-surface-hover);
+}
+.topside-button:active {
+  background-color: var(--topside-button-plain-color-surface-active);
+  transform: translateY(1px); /* [优化] 相比 top:1px，使用 transform 的物理沉降更顺滑，不需要依赖 position */
+}
+.topside-button:focus-visible, .topside-button:focus {
+  outline: none;
+  box-shadow: 0 0 0 2px var(--topside-button-color-gap), 0 0 0 4px var(--topside-button-plain-color-surface);
+}
+.topside-button.primary {
+  /* [修复] 全局 map-get 升级为现代命名的 map.get */
+  background-color: var(--topside-button-primary-color-surface);
+  border-color: var(--topside-button-primary-border-color);
+  color: var(--topside-button-primary-color);
+}
+.topside-button.primary:hover {
+  background-color: var(--topside-button-primary-color-surface-hover);
+}
+.topside-button.primary:active {
+  background-color: var(--topside-button-primary-color-surface-active);
+}
+.topside-button.primary:focus-visible, .topside-button.primary:focus {
+  box-shadow: 0 0 0 3px var(--topside-button-color-gap), 0 0 0 4px var(--topside-button-primary-color-surface);
+}
+.topside-button.secondary {
+  /* [修复] 全局 map-get 升级为现代命名的 map.get */
+  background-color: var(--topside-button-secondary-color-surface);
+  border-color: var(--topside-button-secondary-border-color);
+  color: var(--topside-button-secondary-color);
+}
+.topside-button.secondary:hover {
+  background-color: var(--topside-button-secondary-color-surface-hover);
+}
+.topside-button.secondary:active {
+  background-color: var(--topside-button-secondary-color-surface-active);
+}
+.topside-button.secondary:focus-visible, .topside-button.secondary:focus {
+  box-shadow: 0 0 0 3px var(--topside-button-color-gap), 0 0 0 4px var(--topside-button-secondary-color-surface);
+}
+.topside-button.third {
+  /* [修复] 全局 map-get 升级为现代命名的 map.get */
+  background-color: var(--topside-button-third-color-surface);
+  border-color: var(--topside-button-third-border-color);
+  color: var(--topside-button-third-color);
+}
+.topside-button.third:hover {
+  background-color: var(--topside-button-third-color-surface-hover);
+}
+.topside-button.third:active {
+  background-color: var(--topside-button-third-color-surface-active);
+}
+.topside-button.third:focus-visible, .topside-button.third:focus {
+  box-shadow: 0 0 0 3px var(--topside-button-color-gap), 0 0 0 4px var(--topside-button-third-color-surface);
+}
+.topside-button.forth {
+  /* [修复] 全局 map-get 升级为现代命名的 map.get */
+  background-color: var(--topside-button-forth-color-surface);
+  border-color: var(--topside-button-forth-border-color);
+  color: var(--topside-button-forth-color);
+}
+.topside-button.forth:hover {
+  background-color: var(--topside-button-forth-color-surface-hover);
+}
+.topside-button.forth:active {
+  background-color: var(--topside-button-forth-color-surface-active);
+}
+.topside-button.forth:focus-visible, .topside-button.forth:focus {
+  box-shadow: 0 0 0 3px var(--topside-button-color-gap), 0 0 0 4px var(--topside-button-forth-color-surface);
+}
+.topside-button.no-outer:focus, .topside-button.no-outer:focus-visible, .topside-button.no-outer:active {
+  outline: none !important;
+  box-shadow: none !important;
+}
+.topside-button.disabled {
+  background-color: var(--topside-button-disabled-color-surface) !important;
+  border-color: var(--topside-button-disabled-border-color) !important;
+  color: var(--topside-button-disabled-color) !important;
+  transform: none !important; /* 防止置灰状态下还能被按下去产生动画延迟 */
+  cursor: not-allowed;
+}
+.topside-button.disabled:hover {
+  background-color: var(--topside-button-disabled-color-surface) !important;
+  color: var(--topside-button-disabled-color) !important;
+}
+.topside-button.disabled:focus-visible {
+  background-color: var(--topside-button-disabled-color-surface) !important;
+}
+.topside-button.text-button {
+  outline: none;
+  border: none;
+  background-color: transparent !important;
+  color: var(--topside-text-button-plain-color);
+  border-radius: var(--topside-button-radius-round);
+  padding: 3px 6px;
+}
+.topside-button.text-button.large {
+  font-size: 1.2em;
+  padding: 4px 8px;
+  border-radius: var(--topside-button-radius-round-big);
+}
+.topside-button.text-button.small {
+  font-size: 0.9em;
+  padding: 2px 4px;
+  border-radius: var(--topside-button-radius-round-small);
+}
+.topside-button.text-button.plain {
+  border-radius: 0;
+}
+.topside-button.text-button.round {
+  border-radius: var(--topside-button-radius-round);
+}
+.topside-button.text-button.round.large {
+  border-radius: var(--topside-button-radius-round-big);
+}
+.topside-button.text-button.round.small {
+  border-radius: var(--topside-button-radius-round-small);
+}
+.topside-button.text-button:hover {
+  color: var(--topside-text-button-plain-color-hover);
+}
+.topside-button.text-button:active {
+  position: relative;
+  color: var(--topside-text-button-plain-color-active);
+  top: 1px;
+}
+.topside-button.text-button.primary {
+  color: var(--topside-button-primary-color-surface);
+}
+.topside-button.text-button.primary:hover {
+  color: var(--topside-button-primary-color-surface-hover);
+}
+.topside-button.text-button.primary:active {
+  color: var(--topside-button-primary-color-surface-active);
+}
+.topside-button.text-button.secondary {
+  color: var(--topside-button-secondary-color-surface);
+}
+.topside-button.text-button.secondary:hover {
+  color: var(--topside-button-secondary-color-surface-hover);
+}
+.topside-button.text-button.secondary:active {
+  color: var(--topside-button-secondary-color-surface-active);
+}
+.topside-button.text-button.third {
+  color: var(--topside-button-third-color-surface);
+}
+.topside-button.text-button.third:hover {
+  color: var(--topside-button-third-color-surface-hover);
+}
+.topside-button.text-button.third:active {
+  color: var(--topside-button-third-color-surface-active);
+}
+.topside-button.text-button.forth {
+  color: var(--topside-button-forth-color-surface);
+}
+.topside-button.text-button.forth:hover {
+  color: var(--topside-button-forth-color-surface-hover);
+}
+.topside-button.text-button.forth:active {
+  color: var(--topside-button-forth-color-surface-active);
+}
+.topside-button.text-button.no-outer:focus, .topside-button.text-button.no-outer:focus-visible, .topside-button.text-button.no-outer:active {
+  outline: none !important;
+  box-shadow: none !important;
+}
+.topside-button.text-button.disabled {
+  background-color: transparent !important;
+  cursor: not-allowed;
+}
+.topside-button.text-button.disabled:hover {
+  background-color: transparent !important;
+}
+
+/* ==========================================================================
+   1. 组合/容器层（表单编辑器外壳结构）
+   ========================================================================== */
+.topside-form-editor {
+  position: relative;
+  width: 100%;
+  background-color: var(--topside-editor-color-surface);
+  color: var(--topside-editor-color);
+  font-size: 1em;
+  border-bottom: 1px solid var(--topside-editor-color-border);
+  border-radius: var(--topside-radius) var(--topside-radius) 0 0;
+  transition: border-color 0.2s ease, box-shadow 0.2s ease;
+  /* 1.1 变体外观模式 (Variants) */
+}
+.topside-form-editor.outlined {
+  border: 1px solid var(--topside-editor-color-border);
+  border-radius: var(--topside-radius);
+}
+.topside-form-editor.filled {
+  background-color: var(--topside-editor-color-filled-surface);
+  transition: background-color 0.2s ease, border-color 0.2s ease;
+}
+.topside-form-editor {
+  /* 1.2 状态感知拦截 (States) */
+}
+.topside-form-editor.error {
+  border-color: var(--topside-editor-color-border-error);
+}
+.topside-form-editor:focus-within {
+  border-color: var(--topside-editor-color-active-border);
+}
+.topside-form-editor {
+  /* plain：无底线（聚焦时也没有——同优先级写在 :focus-within 之后）。原来的 `&.focus-within` 是笔误且多余，已删 */
+}
+.topside-form-editor.plain {
+  background-color: transparent;
+  border-bottom-color: transparent;
+  border-radius: 0;
+  /* 错误态要能看见：&.plain 在 &.error 之后会把底线盖成透明，这里提高优先级补回（聚焦时也保持红线） */
+}
+.topside-form-editor.plain.error {
+  border-bottom-color: var(--topside-editor-color-border-error);
+}
+.topside-form-editor.disabled {
+  color: var(--topside-editor-color-disabled);
+  cursor: not-allowed;
+  border-color: var(--topside-editor-color-border);
+  box-shadow: none !important;
+  outline: none !important;
+}
+.topside-form-editor.disabled.filled {
+  background-color: var(--topside-editor-color-surface-disabled);
+}
+.topside-form-editor.disabled.plain {
+  border-color: transparent;
+}
+.topside-form-editor.disabled * {
+  outline: none !important;
+}
+.topside-form-editor input, .topside-form-editor textarea {
+  width: 100%;
+  padding: 0;
+  border: 0 solid transparent;
+  outline: none;
+  background: transparent;
+  color: inherit;
+}
+.topside-form-editor input::placeholder, .topside-form-editor textarea::placeholder {
+  color: var(--topside-editor-color-placeholder);
+}
+.topside-form-editor input:focus, .topside-form-editor textarea:focus {
+  outline: none;
+}
+.topside-form-editor input:disabled, .topside-form-editor textarea:disabled {
+  color: var(--topside-editor-outlined-disabled-text-color);
+}
+.topside-form-editor input {
+  height: 36px;
+}
+.topside-form-editor input.number-input {
+  text-align: right;
+}
+.topside-form-editor input.number-input:focus {
+  text-align: left;
+}
+.topside-form-editor input.number-input[readonly]:focus {
+  text-align: right;
+}
+.topside-form-editor.compact input {
+  height: 28px;
+}
+.topside-form-editor.compact .topside-common-picker {
+  height: 28px;
+}
+.topside-form-editor input[type=number] {
+  -moz-appearance: textfield;
+}
+.topside-form-editor input[type=number]::-webkit-outer-spin-button, .topside-form-editor input[type=number]::-webkit-inner-spin-button {
+  -webkit-appearance: none;
+  margin: 0;
+}
+.topside-form-editor .topside-common-editor, .topside-form-editor .topside-common-picker {
+  display: flex;
+  align-items: center;
+  padding: 0 var(--topside-editor-margin);
+  gap: var(--topside-editor-spacing);
+}
+.topside-form-editor .topside-common-editor .clean-icon, .topside-form-editor .topside-common-picker .clean-icon {
+  position: absolute;
+  right: 2px;
+  top: 0;
+  bottom: 0;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+}
+.topside-form-editor .topside-common-editor .clean-icon i, .topside-form-editor .topside-common-picker .clean-icon i {
+  display: none;
+  font-size: 10px;
+}
+.topside-form-editor .topside-common-editor:focus-within.number-input {
+  text-align: left;
+}
+.topside-form-editor .topside-common-editor:focus-within .clean-icon.has-value i {
+  display: block;
+  position: relative;
+}
+.topside-form-editor .topside-common-editor:focus-within .clean-icon.has-value i:active {
+  top: 1px;
+}
+.topside-form-editor .topside-common-editor:has(.clean-icon) input {
+  padding-right: 14px;
+}
+.topside-form-editor .topside-common-picker:hover .clean-icon.has-value i {
+  display: block;
+  position: relative;
+}
+.topside-form-editor .topside-common-picker:hover .clean-icon.has-value i:active {
+  top: 1px;
+}
+.topside-form-editor .topside-common-picker:has(.clean-icon) input {
+  padding-right: 14px;
+}
+.topside-form-editor {
+  /* 2.3 宿主容器对内部核心结构的覆写约束 */
+}
+.topside-form-editor .topside-common-editor .editor-prefix,
+.topside-form-editor .topside-common-editor .editor-suffix {
+  flex: 0 0 auto;
+  color: var(--topside-secondary-color-font);
+}
+.topside-form-editor .topside-common-editor .number-input {
+  text-align: right;
+}
+.topside-form-editor .topside-common-editor .editor-embed-icon {
+  flex: 0 0 auto;
+  font-size: 18px;
+  line-height: 18px;
+  color: var(--topside-secondary-color-font);
+}
+.topside-form-editor {
+  /* 2.4 选择器组件容器 (Picker 联动) */
+}
+.topside-form-editor .topside-common-picker {
+  height: 38px;
+}
+.topside-form-editor .topside-common-picker .action-icon {
+  display: block;
+  box-sizing: border-box;
+  color: var(--topside-editor-text-color, #374151);
+  align-self: center;
+  cursor: pointer;
+  font-size: 22px;
+  line-height: 1;
+}
+.topside-form-editor .topside-common-picker .action-icon:active {
+  color: var(--topside-active-dropdown-color, #9d9d9d);
+}
+.topside-form-editor .topside-common-picker .options-item-render {
+  width: 100%;
+}
+.topside-form-editor .topside-common-picker .options-item-render:hover {
+  background-color: var(--topside-plain-hover-border-color, #b3d8ff);
+}
+
+/* ==========================================================================
+   3. 弹出层（下拉数据面板与数据流容器）
+   ========================================================================== */
+.topside-options-popover {
+  position: relative;
+  width: 100%;
+  max-height: 30vh;
+  user-select: none;
+}
+.topside-options-popover .option-item {
+  position: relative;
+  width: 100%;
+  padding: var(--topside-option-padding);
+  line-height: 1.5em;
+  cursor: pointer;
+  color: var(--topside-option-text-color, #374151);
+}
+.topside-options-popover .option-item:hover {
+  background-color: var(--topside-hover-item-background, #f7f7f7);
+  color: var(--topside-hover-item-color, #42A5F5);
+}
+.topside-options-popover .option-item.disabled {
+  color: var(--topside-disabled-color, #7f7f7f);
+  cursor: default;
+}
+.topside-options-popover .option-item.disabled:hover {
+  background-color: unset;
+  color: var(--topside-disabled-color, #7f7f7f);
+}
+.topside-options-popover .popover-mask-overlay {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  color: rgba(255, 255, 255, 0.1254901961);
+}
+.topside-options-popover .more-indicator-footer {
+  text-align: center;
+  line-height: 24px;
+  font-size: 1.1em;
+  font-style: italic;
+  color: #B3BCCA;
+  cursor: pointer;
+}
+
+.topside-popover-wrapper {
+  /* Popover.svelte computes position.top/left from target.getBoundingClientRect(),
+     which is viewport-relative. `position: absolute` places this element relative to
+     the document instead, so it drifted away from its anchor by the page's (or any
+     ancestor's) scroll offset. `fixed` keeps the same coordinate frame as the values
+     driving top/left, and combined with the scroll listener in Popover.svelte the
+     overlay stays pinned to its anchor while scrolling. See also ContextMenuPanel.svelte
+     and FloatingPanel.svelte, which use the same fixed + viewport-relative-coords pattern. */
+  position: fixed;
+  display: block;
+  z-index: var(--topside-z-popover, 100);
+  opacity: 1;
+  visibility: visible;
+  transition: opacity 0.3s ease-in-out;
+}
+.topside-popover-wrapper.hidden {
+  visibility: hidden;
+  opacity: 0;
+}
+
+.topside-popover {
+  position: relative;
+  width: 100%;
+  box-sizing: border-box;
+}
+.topside-popover > div {
+  position: absolute;
+  display: block;
+}
+.topside-popover > div .contents {
+  background: var(--topside-popover-layer-color-surface);
+  box-shadow: var(--topside-popover-layer-shadow);
+  padding-top: var(--topside-popover-layer-top-margin);
+  border: 1px solid var(--topside-popover-layer-color-border);
+  color: var(--topside-popover-layer-color);
+  opacity: 1;
+  transform: scale(1);
+  display: block;
+}
+.topside-popover > div .contents .contents-inner {
+  overflow: auto;
+}
+.topside-popover > div .contents .contents-inner .option-item {
+  position: relative;
+  width: 100%;
+  padding: var(--topside-option-item-margin);
+  line-height: 1.5em;
+  cursor: pointer;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  color: var(--topside-option-text-color, #374151);
+}
+.topside-popover > div .contents .contents-inner .option-item:hover {
+  background: var(--topside-popover-item-color-surface-hover);
+  color: var(--topside-popover-item-color-hover);
+}
+.topside-popover > div .contents .contents-inner .option-item:active {
+  background: var(--topside-popover-item-color-surface-active);
+  color: var(--topside-popover-item-color-active);
+}
+.topside-popover > div .contents .contents-inner .option-item.disabled {
+  background: var(--topside-popover-layer-color-surface) !important;
+  color: var(--topside-popover-layer-color) !important;
+}
+
+:root {
+  /* ========== DataTable - Light Theme Tokens ========== */
+  --topside-data-table-header-hight: 48px;
+  --topside-data-table-separator-shadow: rgba(60, 64, 67, 0.3) 0px 1px 2px 0px, rgba(60, 64, 67, 0.15) 0px 1px 3px 1px;
+  --topside-data-table-spearator-color: #f0f0f0;
+  --topside-data-table-header-separator-color: #CBD5E1;
+  --topside-data-table-alter-row-bg: #f7f7f7;
+  --topside-data-table-header-bg: #F8FAFC;
+  --topside-data-table-shadow-gap: 2px;
+  --topside-data-table-header-divid-color: #B3BCCA;
+  --topside-data-table-cell-padding: 3px 6px;
+  --topside-data-table-inline-row-panel-border: 1px solid #F8FAFC;
+  --topside-data-table-inline-row-panel-bg: #F1F5F9;
+  --topside-scroll-color: #e1e1e180;
+  --topside-data-table-inline-border-color: #CBD5E1;
+  --topside-data-table-bg: #ffffff;
+  --topside-data-table-row-border-color: #f0f0f0;
+  --topside-data-table-expand-row-bg: #f7f7f7;
+  --topside-data-table-empty-text-color: #7f7f7f;
+  --topside-data-table-col-divide-line-color: #e1e1e1;
+  --topside-data-table-header-color: #374151;
+}
+
+/* ========== DataTable - Dark Theme Tokens ========== */
+[data-theme=dark] {
+  --topside-data-table-header-hight: 48px;
+  --topside-data-table-separator-shadow: rgba(0, 0, 0, 0.5) 0px 1px 2px 0px, rgba(0, 0, 0, 0.35) 0px 1px 3px 1px;
+  --topside-data-table-spearator-color: #3a3a3a;
+  --topside-data-table-header-separator-color: #52525B;
+  --topside-data-table-alter-row-bg: #222222;
+  --topside-data-table-header-bg: #1a1a1a;
+  --topside-data-table-shadow-gap: 2px;
+  --topside-data-table-header-divid-color: #4a4a4a;
+  --topside-data-table-cell-padding: 3px 6px;
+  --topside-data-table-inline-row-panel-border: 1px solid #262626;
+  --topside-data-table-inline-row-panel-bg: #262626;
+  --topside-scroll-color: #4a4a4a80;
+  --topside-data-table-inline-border-color: #404040;
+  --topside-data-table-bg: #1a1a1a;
+  --topside-data-table-row-border-color: #3a3a3a;
+  --topside-data-table-expand-row-bg: #222222;
+  --topside-data-table-empty-text-color: #8a8a8a;
+  --topside-data-table-col-divide-line-color: #3a3a3a;
+  --topside-data-table-header-color: #e5e7eb;
+}
+
+.topside-data-table {
+  position: relative;
+  box-sizing: border-box;
+  overflow: hidden;
+  background-color: var(--topside-data-table-bg);
+  color: var(--topside-data-table-header-color);
+  display: flex;
+  flex-direction: row;
+}
+.topside-data-table ::-webkit-scrollbar {
+  -webkit-appearance: none;
+  box-sizing: border-box;
+  width: 8px;
+  height: 8px;
+}
+.topside-data-table ::-webkit-scrollbar:vertical {
+  border-left: 1px solid var(--topside-data-table-inline-border-color);
+}
+.topside-data-table ::-webkit-scrollbar:horizontal {
+  border-top: 1px solid var(--topside-data-table-inline-border-color);
+}
+.topside-data-table ::-webkit-scrollbar-thumb {
+  border-radius: 4px;
+  background-color: var(--topside-scroll-color);
+  -webkit-box-shadow: 0 0 1px rgba(255, 255, 255, 0.5);
+}
+.topside-data-table .vertical-center {
+  position: relative;
+  top: 50%;
+  transform: translateY(-50%);
+}
+.topside-data-table .header-row {
+  flex: 0 0 auto;
+  width: 100%;
+  position: relative;
+  height: var(--topside-data-table-header-hight);
+  font-weight: 600;
+  user-select: none;
+  background-color: var(--topside-data-table-header-bg);
+  border-bottom: 1px solid transparent;
+  color: var(--topside-data-table-header-color);
+  display: flex;
+  flex-direction: row;
+}
+.topside-data-table .header-row .header-cell-divider {
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  width: 3px;
+  z-index: 2;
+}
+.topside-data-table .header-row .header-cell-divider::before {
+  content: ""; /* 必须指定伪元素的内容 */
+  position: absolute;
+  left: 50%; /* 将伪元素水平居中 */
+  top: 25%;
+  bottom: 25%;
+  width: 1px; /* 竖线宽度 */
+  background-color: var(--topside-data-table-header-separator-color); /* 竖线颜色 */
+  transform: translateX(-50%); /* 精确居中 */
+}
+.topside-data-table .header-row .header-cell-divider.resizer {
+  cursor: col-resize;
+}
+.topside-data-table.cell-border .header-cell-divider:not(.resizer)::before {
+  display: none;
+}
+.topside-data-table .data-cell {
+  height: 100%;
+  border-right: 1px solid transparent;
+  padding: var(--topside-data-table-cell-padding);
+  position: relative;
+  overflow: hidden;
+}
+.topside-data-table .data-cell .sortable {
+  cursor: pointer;
+}
+.topside-data-table .data-cell:last-child {
+  border-right: none;
+}
+.topside-data-table .data-cell > div:first-child {
+  overflow: hidden;
+}
+.topside-data-table .data-row {
+  position: relative;
+  display: flex;
+  width: 100%;
+  flex-wrap: nowrap;
+  flex-direction: row;
+  align-items: center;
+  background-color: var(--topside-data-table-bg);
+}
+.topside-data-table .data-row.alternative {
+  background-color: var(--topside-data-table-alter-row-bg);
+}
+.topside-data-table .data-row .data-cell > div {
+  width: 100%;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}
+.topside-data-table.row-border .header-row, .topside-data-table.row-border .data-row {
+  border-bottom: 1px solid var(--topside-data-table-inline-border-color);
+}
+.topside-data-table.cell-border .data-cell {
+  border-right-color: var(--topside-data-table-inline-border-color);
+}
+.topside-data-table .rows-container {
+  flex: 1 1 auto;
+  height: 100%;
+  width: 100%;
+  box-sizing: border-box;
+  overflow: hidden;
+}
+.topside-data-table .rows-container > div {
+  width: 100%;
+  position: relative;
+}
+.topside-data-table .left-fixed-panel, .topside-data-table .action-panel {
+  flex: 0 0 auto;
+  position: relative;
+  box-sizing: border-box;
+  overflow: hidden;
+  display: flex;
+  flex-direction: column;
+}
+.topside-data-table .left-fixed-panel .bottom-mask-overlay, .topside-data-table .action-panel .bottom-mask-overlay {
+  flex: 0 0 auto;
+  width: 100%;
+  height: 8px;
+  box-sizing: border-box;
+  background-color: var(--topside-data-table-bg);
+  border-top: 1px solid var(--topside-data-table-inline-border-color);
+}
+.topside-data-table .left-fixed-panel .data-cell {
+  flex: 0 0 auto;
+}
+.topside-data-table .left-fixed-panel .data-cell:last-child {
+  border-right: none;
+}
+.topside-data-table .left-fixed-panel {
+  z-index: 1;
+  border-right: 1px solid var(--topside-data-table-inline-border-color);
+  box-shadow: var(--topside-data-table-separator-shadow);
+}
+.topside-data-table .left-fixed-panel .indicator-cell {
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+  align-items: center;
+}
+.topside-data-table .left-fixed-panel .indicator-cell .expand-icon {
+  display: none;
+  color: var(--topside-hover-item-color);
+  font-size: 14px;
+  width: 16px;
+  right: 4px;
+  cursor: pointer;
+}
+.topside-data-table .left-fixed-panel .indicator-cell:hover .expand-icon {
+  display: block;
+}
+.topside-data-table .action-panel {
+  z-index: 1;
+  border-left: 1px solid var(--topside-data-table-inline-border-color);
+  box-shadow: var(--topside-data-table-separator-shadow);
+}
+.topside-data-table .action-panel .header-row {
+  display: block;
+  text-align: center;
+}
+.topside-data-table .action-panel .data-row .action-cell {
+  display: flex;
+  flex-direction: row;
+  gap: 4px;
+  align-items: center;
+  width: max-content;
+  height: 100%;
+  overflow-x: auto;
+  white-space: nowrap;
+  position: relative;
+}
+.topside-data-table.row-border .table-row {
+  border-bottom: 1px solid var(--topside-data-table-row-border-color);
+}
+.topside-data-table .data-content-panel {
+  position: relative;
+  width: 100%;
+  flex: 1 1 auto;
+  overflow: hidden;
+  display: flex;
+  flex-direction: column;
+}
+.topside-data-table .data-content-panel .data-cell {
+  flex: 0 0 auto;
+}
+.topside-data-table .data-content-panel .data-cell > div:first-child {
+  position: relative;
+  top: 50%;
+  transform: translateY(-50%);
+}
+.topside-data-table .data-content-panel .header-row > div {
+  position: relative;
+  height: 100%;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+}
+.topside-data-table .data-content-panel .header-row .data-cell {
+  text-align: center !important;
+}
+.topside-data-table .data-content-panel .expand-data-row {
+  background-color: var(--topside-data-table-expand-row-bg);
+  min-height: 32px;
+  box-sizing: border-box;
+}
+.topside-data-table .data-content-panel .data-view-panel {
+  flex: 1 1 auto;
+  overflow-y: hidden;
+  overflow-x: scroll;
+  position: relative;
+  box-sizing: border-box;
+}
+.topside-data-table .data-content-panel .data-view-panel > div {
+  position: relative;
+}
+.topside-data-table .summary-row {
+  position: sticky;
+  bottom: 0;
+  z-index: 2;
+  display: flex;
+  flex-direction: row;
+  flex-wrap: nowrap;
+  align-items: center;
+  width: 100%;
+  box-sizing: border-box;
+  font-weight: 600;
+  background-color: var(--topside-data-table-summary-bg, var(--topside-data-table-header-bg));
+  border-top: 1px solid var(--topside-data-table-inline-border-color);
+}
+.topside-data-table .summary-row .data-cell > div {
+  width: 100%;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}
+.topside-data-table .inline-panel {
+  position: relative;
+  width: 100%;
+  overflow: auto;
+  box-sizing: border-box;
+  border-top: var(--topside-data-table-inline-row-panel-border);
+  border-bottom: var(--topside-data-table-inline-row-panel-border);
+  background-color: var(--topside-data-table-inline-row-panel-bg);
+}
+.topside-data-table .empty-content-board {
+  position: relative;
+  width: 100%;
+  height: 100%;
+}
+.topside-data-table .empty-content-board > div {
+  text-align: center;
+  font-size: 1.5em;
+  position: relative;
+  top: 50%;
+  transform: translateY(-50%);
+  color: var(--topside-data-table-empty-text-color);
+  font-style: italic;
+}
+.topside-data-table.col-divide-line .table-data-cell {
+  border-right: 1px solid var(--topside-data-table-col-divide-line-color);
+}
+
+.topside- * {
+  box-sizing: border-box;
+}
+
+.topside-mask-overlay {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100vw;
+  height: 100vh;
+  background-color: rgba(0, 0, 0, 0.45);
+  z-index: var(--topside-z-modal-overlay, 9998);
+  opacity: 1;
+  transition: opacity 0.15s ease;
+}
+.topside-mask-overlay .hidden {
+  opacity: 0;
+}
+.topside-mask-overlay .topside-mask-center {
+  position: relative;
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+}