@gcsa/console-react 0.1.1 → 0.1.3

package/dist/style.css

@@ -42,7 +42,7 @@
   --gcsa-font-size-md: 15px;
   --gcsa-font-size-lg: 16px;
   --gcsa-font-size-xl: 18px;
-  --gcsa-font-size-2xl: 22px;
+  --gcsa-font-size-2xl: 24px;
   --gcsa-font-size-3xl: 28px;
 
   --gcsa-line-height-tight: 1.35;
@@ -63,7 +63,7 @@
   /* Figma dark foundation tokens (00 · Cover & Foundations). */
   --gcsa-color-bg-base: #030407;
   --gcsa-color-bg-shell: #030407;
-  --gcsa-color-bg-shell-deep: #040c13;
+  --gcsa-color-bg-shell-deep: #030407;
   --gcsa-color-bg-surface: #121316;
   --gcsa-color-bg-elevated: #1a1b1f;
   --gcsa-color-bg-input: #121316;
@@ -263,7 +263,10 @@
 
 .gcsa-console-shell__header {
   flex-shrink: 0;
+  box-sizing: border-box;
+  height: var(--gcsa-console-header-height);
   min-height: var(--gcsa-console-header-height);
+  max-height: var(--gcsa-console-header-height);
   max-width: 100%;
   overflow: hidden;
   border-bottom: 1px solid var(--gcsa-color-border-subtle);
@@ -417,7 +420,8 @@
   font-size: 14px;
   line-height: 1;
   padding: 0 14px;
-  height: 36px;
+  height: var(--gcsa-control-height-md);
+  min-height: var(--gcsa-control-height-md);
   border: 1px solid transparent;
   cursor: pointer;
   transition: background 0.15s, border-color 0.15s, color 0.15s, box-shadow 0.15s;
@@ -430,22 +434,22 @@
 }
 
 .gcsa-btn--sm {
-  height: var(--gcsa-control-height-sm, 24px);
-  min-height: var(--gcsa-control-height-sm, 24px);
-  font-size: 13px;
+  height: var(--gcsa-control-height-sm);
+  min-height: var(--gcsa-control-height-sm);
+  font-size: var(--gcsa-control-font-size-sm);
   padding: 0 12px;
 }
 
 .gcsa-btn--md {
-  height: var(--gcsa-control-height-md, 32px);
-  min-height: var(--gcsa-control-height-md, 32px);
-  font-size: 14px;
+  height: var(--gcsa-control-height-md);
+  min-height: var(--gcsa-control-height-md);
+  font-size: var(--gcsa-control-font-size-md);
   padding: 0 14px;
 }
 
 .gcsa-btn--lg {
-  height: var(--gcsa-control-height-lg, 40px);
-  min-height: var(--gcsa-control-height-lg, 40px);
+  height: var(--gcsa-control-height-lg);
+  min-height: var(--gcsa-control-height-lg);
   font-size: 15px;
 }
 
@@ -688,8 +692,10 @@
 
 .gcsa-input:not(.gcsa-input-number__input),
 .gcsa-select {
-  height: 38px;
-  padding: 0 12px;
+  height: var(--gcsa-control-height-md);
+  min-height: var(--gcsa-control-height-md);
+  padding: 0 var(--gcsa-control-padding-x-md);
+  font-size: var(--gcsa-control-font-size-md);
 }
 
 .gcsa-textarea {
@@ -698,19 +704,19 @@
   resize: vertical;
 }
 
-/* ── Control sizes (Ant Design: small 24 / middle 32 / large 40) ── */
+/* ── Control sizes：高度/字号只走 size 档位，勿在组件上写死 px ── */
 :root,
 [data-gcsa-theme='light'],
 [data-gcsa-theme='dark'] {
   --gcsa-control-height-sm: 24px;
-  --gcsa-control-height-md: 32px;
+  --gcsa-control-height-md: 36px;
   --gcsa-control-height-lg: 40px;
   --gcsa-control-padding-x-sm: 7px;
-  --gcsa-control-padding-x-md: 11px;
+  --gcsa-control-padding-x-md: 12px;
   --gcsa-control-padding-x-lg: 16px;
   --gcsa-control-font-size-sm: 12px;
-  --gcsa-control-font-size-md: 14px;
-  --gcsa-control-font-size-lg: 14px;
+  --gcsa-control-font-size-md: 13px;
+  --gcsa-control-font-size-lg: 13px;
 }
 
 .gcsa-text-control--sm .gcsa-input:not(.gcsa-input-number__input),
@@ -824,6 +830,19 @@
   border-color: var(--gcsa-color-destructive);
 }
 
+.gcsa-input:disabled,
+.gcsa-textarea:disabled,
+.gcsa-select:disabled,
+.gcsa-select-trigger:disabled,
+.gcsa-select-trigger[data-disabled] {
+  opacity: 0.45;
+  cursor: not-allowed;
+  color: var(--gcsa-color-text-muted);
+  background: var(--gcsa-color-bg-elevated);
+  border-color: var(--gcsa-color-border-subtle);
+  box-shadow: none;
+}
+
 .gcsa-input-group {
   display: flex;
   align-items: stretch;
@@ -1714,30 +1733,30 @@
 }
 
 :is([data-gcsa-theme='light'], [data-gcsa-theme='dark']) .gcsa-btn {
-  height: 40px;
-  min-height: 40px;
+  height: var(--gcsa-control-height-md);
+  min-height: var(--gcsa-control-height-md);
   box-sizing: border-box;
   padding-inline: 24px;
   border-radius: 20px;
-  font-size: 13px;
+  font-size: var(--gcsa-control-font-size-md);
   letter-spacing: 0;
 }
 
 :is([data-gcsa-theme='light'], [data-gcsa-theme='dark']) .gcsa-btn--sm {
-  height: var(--gcsa-control-height-sm, 24px);
-  min-height: var(--gcsa-control-height-sm, 24px);
+  height: var(--gcsa-control-height-sm);
+  min-height: var(--gcsa-control-height-sm);
   padding-inline: 16px;
 }
 
 :is([data-gcsa-theme='light'], [data-gcsa-theme='dark']) .gcsa-btn--md {
-  height: var(--gcsa-control-height-md, 32px);
-  min-height: var(--gcsa-control-height-md, 32px);
+  height: var(--gcsa-control-height-md);
+  min-height: var(--gcsa-control-height-md);
   padding-inline: 16px;
 }
 
 :is([data-gcsa-theme='light'], [data-gcsa-theme='dark']) .gcsa-btn--lg {
-  height: var(--gcsa-control-height-lg, 40px);
-  min-height: var(--gcsa-control-height-lg, 40px);
+  height: var(--gcsa-control-height-lg);
+  min-height: var(--gcsa-control-height-lg);
   padding-inline: 24px;
 }
 
@@ -1774,7 +1793,7 @@
 
 /* Time inputs use the Figma field typography and preserve their native clock affordance. */
 :is([data-gcsa-theme='light'], [data-gcsa-theme='dark']) .gcsa-time-picker {
-  font-size: 14px;
+  font-size: var(--gcsa-control-font-size-md);
   line-height: 16px;
 }
 
@@ -1837,7 +1856,7 @@
 }
 
 :is([data-gcsa-theme='light'], [data-gcsa-theme='dark']) .gcsa-pagination {
-  --gcsa-pagination-control-height: 36px;
+  --gcsa-pagination-control-height: var(--gcsa-control-height-md);
 }
 
 :is([data-gcsa-theme='light'], [data-gcsa-theme='dark']) .gcsa-pagination__size,
@@ -1888,16 +1907,14 @@
 
 [data-gcsa-theme='dark'] .gcsa-date-picker__control,
 [data-gcsa-theme='dark'] .gcsa-date-range-picker__control {
-  min-height: 40px;
-  height: 40px;
   box-sizing: border-box;
-  padding-left: 16px;
+  padding-left: var(--gcsa-control-padding-x-lg);
   border-radius: 8px;
 }
 
 [data-gcsa-theme='dark'] .gcsa-date-picker__control > .gcsa-date-picker__input {
-  height: 30px;
-  min-height: 30px;
+  height: 26px;
+  min-height: 26px;
   box-sizing: border-box;
   padding: 0;
   border: 0 !important;
@@ -1906,6 +1923,29 @@
   box-shadow: none !important;
 }
 
+[data-gcsa-theme='light'] .gcsa-cascader__trigger {
+  border-color: var(--gcsa-color-border);
+  background: var(--gcsa-color-bg-surface);
+  color: var(--gcsa-color-text-heading);
+}
+
+[data-gcsa-theme='light'] .gcsa-cascader__panel {
+  border-color: var(--gcsa-color-border-subtle);
+  background: var(--gcsa-color-bg-elevated, var(--gcsa-color-bg-surface));
+  box-shadow: var(--gcsa-shadow-md);
+  color: var(--gcsa-color-text);
+}
+
+[data-gcsa-theme='light'] .gcsa-cascader__option {
+  color: var(--gcsa-color-text-secondary);
+}
+
+[data-gcsa-theme='light'] .gcsa-cascader__option:hover:not(:disabled),
+[data-gcsa-theme='light'] .gcsa-cascader__option--active {
+  color: var(--gcsa-color-primary);
+  background: var(--gcsa-color-primary-muted);
+}
+
 [data-gcsa-theme='dark'] .gcsa-cascader__trigger {
   border-color: var(--gcsa-color-border);
   background: var(--gcsa-color-bg-input);
@@ -1950,7 +1990,10 @@
   gap: 8px;
   min-width: 0;
   max-width: 100%;
+  box-sizing: border-box;
+  height: var(--gcsa-console-header-height);
   min-height: var(--gcsa-console-header-height);
+  max-height: var(--gcsa-console-header-height);
   padding-left: 12px;
   overflow: hidden;
 }
@@ -2009,15 +2052,20 @@
   height: 100%;
   min-height: 0;
   overflow: hidden;
-  padding: var(--gcsa-space-4) var(--gcsa-space-3);
+  padding: 0 var(--gcsa-space-3) var(--gcsa-space-4);
 }
 
 .gcsa-console-nav__brand {
   display: flex;
   align-items: center;
+  box-sizing: border-box;
+  height: var(--gcsa-console-header-height);
+  min-height: var(--gcsa-console-header-height);
+  max-height: var(--gcsa-console-header-height);
+  overflow: hidden;
   gap: var(--gcsa-space-3);
   flex-shrink: 0;
-  padding: var(--gcsa-space-2) var(--gcsa-space-3) var(--gcsa-space-4);
+  padding: 0 var(--gcsa-space-3);
   margin-bottom: var(--gcsa-space-2);
   border-bottom: 1px solid var(--gcsa-color-border-subtle);
 }
@@ -2064,6 +2112,9 @@
   font-weight: 600;
   letter-spacing: 0.06em;
   color: var(--gcsa-color-text-heading);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
 }
 
 .gcsa-console-nav__brand-text span {
@@ -2073,6 +2124,9 @@
   color: var(--gcsa-color-text-secondary);
   letter-spacing: 0.06em;
   text-transform: uppercase;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
 }
 
 .gcsa-console-nav__links {
@@ -2101,7 +2155,7 @@
   min-width: 0;
   border-right: none;
   background: transparent;
-  --gcsa-menu-item-height: 36px;
+  --gcsa-menu-item-height: var(--gcsa-control-height-md);
   --gcsa-menu-item-radius: 4px;
   --gcsa-menu-item-pad-x: 12px;
   --gcsa-menu-icon-size: 16px;
@@ -2222,13 +2276,14 @@
 }
 
 .gcsa-console-nav--collapsed {
-  padding: var(--gcsa-space-3) var(--gcsa-space-2);
+  padding: 0 var(--gcsa-space-2) var(--gcsa-space-3);
 }
 
 .gcsa-console-nav--collapsed .gcsa-console-nav__brand {
   justify-content: center;
   gap: 0;
-  padding: var(--gcsa-space-2) 0 var(--gcsa-space-3);
+  height: var(--gcsa-console-header-height);
+  padding: 0;
 }
 
 .gcsa-console-nav--collapsed .gcsa-console-nav__brand-text {
@@ -2279,6 +2334,11 @@
   width: 100%;
   min-height: var(--gcsa-console-header-height);
   padding: var(--gcsa-space-2) var(--gcsa-space-6) var(--gcsa-space-2) 0;
+  box-sizing: border-box;
+  height: var(--gcsa-console-header-height);
+  min-height: var(--gcsa-console-header-height);
+  max-height: var(--gcsa-console-header-height);
+  overflow: hidden;
 }
 
 .gcsa-console-shell__header .gcsa-console-header {
@@ -2286,6 +2346,10 @@
   grid-template-columns: minmax(0, 1fr) auto;
   align-items: center;
   column-gap: 12px;
+  box-sizing: border-box;
+  height: var(--gcsa-console-header-height);
+  max-height: var(--gcsa-console-header-height);
+  overflow: hidden;
   min-height: var(--gcsa-console-header-height);
   padding: 0 var(--gcsa-space-6) 0 0;
 }
@@ -2299,6 +2363,7 @@
 .gcsa-console-shell__header .gcsa-console-header__title-row {
   flex-wrap: nowrap;
   min-width: 0;
+  overflow: hidden;
 }
 
 .gcsa-console-shell__header .gcsa-console-header__title {
@@ -2307,8 +2372,14 @@
   text-overflow: ellipsis;
   white-space: nowrap;
   min-width: 0;
-}
 
+}
+.gcsa-console-shell__header .gcsa-console-header__subtitle {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  min-width: 0;
+}
 .gcsa-console-shell__header .gcsa-console-header__actions {
   position: static;
   top: auto;
@@ -2382,6 +2453,8 @@
     align-items: center;
     column-gap: 8px;
     padding: 0 var(--gcsa-space-3) 0 0;
+    height: var(--gcsa-console-header-height);
+    max-height: var(--gcsa-console-header-height);
     min-height: var(--gcsa-console-header-height);
   }
 
@@ -2405,16 +2478,16 @@
   }
 }
 
-/* Empty */
+/* Empty — Figma 2174:3336 */
 .gcsa-empty {
   display: flex;
   flex-direction: column;
   align-items: center;
   box-sizing: border-box;
-  padding: 48px 24px;
+  padding: 41px 25px;
   border: 1px solid var(--gcsa-color-border-subtle);
   border-radius: 12px;
-  background: var(--gcsa-color-bg-elevated);
+  background: var(--gcsa-color-bg-surface);
   text-align: center;
   color: var(--gcsa-color-text-muted);
 }
@@ -2423,30 +2496,31 @@
   display: inline-flex;
   align-items: center;
   justify-content: center;
-  width: 48px;
-  height: 48px;
+  width: 66px;
+  height: 66px;
+  margin-bottom: 0;
   color: var(--gcsa-color-primary);
 }
 
 .gcsa-empty__icon .gcsa-icon,
 .gcsa-empty__icon .gcsa-icon svg {
-  width: 29px;
-  height: 36px;
+  width: 66px;
+  height: 66px;
 }
 
 .gcsa-empty__title {
   margin: 12px 0 0;
-  color: var(--gcsa-color-text);
+  color: rgba(255, 255, 255, 0.6);
   font-family: var(--gcsa-font-body);
-  font-size: 16px;
+  font-size: 14px;
   font-weight: 400;
   line-height: 24px;
 }
 
 .gcsa-empty__desc {
   margin: 4px 0 0;
-  color: color-mix(in srgb, var(--gcsa-color-text) 30%, transparent);
-  font-size: 14px;
+  color: rgba(255, 255, 255, 0.3);
+  font-size: 12px;
   line-height: 22.4px;
 }
 
@@ -2456,8 +2530,40 @@
   margin-top: 8px;
 }
 
-.gcsa-empty__action .gcsa-btn {
+/* Figma 2174:3336：soft primary outline pill（压过 dark primary 实心样式） */
+.gcsa-empty__action .gcsa-btn,
+.gcsa-empty__action .gcsa-btn--primary,
+.gcsa-empty__action .gcsa-btn--secondary,
+.gcsa-empty__action .gcsa-btn--ghost,
+[data-gcsa-theme='dark'] .gcsa-empty__action .gcsa-btn,
+[data-gcsa-theme='dark'] .gcsa-empty__action .gcsa-btn--primary,
+[data-gcsa-theme='dark'] .gcsa-empty__action .gcsa-btn--secondary,
+[data-gcsa-theme='dark'] .gcsa-empty__action .gcsa-btn--ghost,
+[data-gcsa-theme='light'] .gcsa-empty__action .gcsa-btn,
+[data-gcsa-theme='light'] .gcsa-empty__action .gcsa-btn--primary {
+  height: 32px;
+  min-height: 32px;
+  padding-inline: 13px;
   border-radius: 20px;
+  border-color: rgba(0, 187, 204, 0.32);
+  background: rgba(0, 187, 204, 0.08);
+  box-shadow: none;
+  color: var(--gcsa-color-primary);
+  font-size: 13px;
+  font-weight: 600;
+  line-height: 13px;
+}
+
+.gcsa-empty__action .gcsa-btn:hover:not(:disabled),
+.gcsa-empty__action .gcsa-btn--primary:hover:not(:disabled),
+[data-gcsa-theme='dark'] .gcsa-empty__action .gcsa-btn:hover:not(:disabled),
+[data-gcsa-theme='dark'] .gcsa-empty__action .gcsa-btn--primary:hover:not(:disabled),
+[data-gcsa-theme='light'] .gcsa-empty__action .gcsa-btn:hover:not(:disabled),
+[data-gcsa-theme='light'] .gcsa-empty__action .gcsa-btn--primary:hover:not(:disabled) {
+  border-color: rgba(0, 187, 204, 0.48);
+  background: rgba(0, 187, 204, 0.14);
+  box-shadow: none;
+  color: var(--gcsa-color-primary);
 }
 
 /* Chat */
@@ -3096,7 +3202,7 @@
   box-sizing: border-box;
   overflow: hidden;
   border-radius: inherit;
-  background: color-mix(in srgb, var(--gcsa-color-text-heading, #000205) 62%, transparent);
+  background: color-mix(in srgb, var(--gcsa-color-bg-base) 62%, transparent);
   transition: opacity 0.25s ease;
   opacity: 1;
 }
@@ -3104,7 +3210,7 @@
 .gcsa-loading-mask--fullscreen {
   position: fixed;
   border-radius: 0;
-  background: #000205;
+  background: var(--gcsa-color-bg-base);
 }
 
 .gcsa-loading-spinner {
@@ -3849,17 +3955,19 @@
   display: inline-flex;
   align-items: center;
   justify-content: center;
-  min-height: 40px;
-  padding: 10px 16px;
+  min-width: 96px;
+  height: 24px;
+  min-height: 24px;
+  padding: 0 16px;
   margin-bottom: -1px;
   border: none;
   border-bottom: 2px solid transparent;
   background: transparent;
   color: var(--gcsa-color-text-secondary);
   font: inherit;
-  font-size: 14px;
+  font-size: 13px;
   font-weight: 500;
-  line-height: 1.4;
+  line-height: 16px;
   cursor: pointer;
   white-space: nowrap;
   transition:
@@ -3909,7 +4017,7 @@
 }
 
 .gcsa-tabs--soft .gcsa-tabs__trigger {
-  min-height: 36px;
+  min-height: var(--gcsa-control-height-md);
   padding: 8px 14px;
   margin-bottom: 0;
   border: 1px solid transparent;
@@ -4005,16 +4113,19 @@
 }
 
 .gcsa-statistic__label {
-  font-size: 11px;
-  letter-spacing: 0.1em;
-  text-transform: uppercase;
-  color: var(--gcsa-color-text-muted);
+  font-size: 12px;
+  letter-spacing: 0;
+  text-transform: none;
+  color: var(--gcsa-color-text-secondary);
+  font-weight: 600;
 }
 
 .gcsa-statistic__value {
-  margin-top: 6px;
-  font-family: var(--gcsa-font-brand);
-  font-size: 28px;
+  margin-top: 4px;
+  font-family: var(--gcsa-font-body);
+  font-size: 24px;
+  font-weight: 600;
+  line-height: 1.2;
   color: var(--gcsa-color-primary);
 }
 
@@ -4290,7 +4401,7 @@
 .gcsa-checkbox__label,
 .gcsa-switch__label {
   color: var(--gcsa-color-text);
-  font-size: 14px;
+  font-size: 13px;
   line-height: 1.4;
 }
 
@@ -4298,7 +4409,7 @@
   width: 18px;
   height: 18px;
   flex-shrink: 0;
-  border: 1px solid var(--gcsa-color-border-strong);
+  border: 1px solid var(--gcsa-color-border);
   border-radius: 4px;
   background: var(--gcsa-color-bg-input);
   display: grid;
@@ -4312,7 +4423,8 @@
 .gcsa-checkbox__indicator {
   display: grid;
   place-items: center;
-  color: var(--gcsa-color-primary);
+  /* Figma checked：主色底 + 白勾（两主题一致） */
+  color: #ffffff;
   opacity: 0;
   transform: scale(0.85);
   transition:
@@ -4322,7 +4434,7 @@
 
 .gcsa-checkbox__box[data-state='checked'],
 .gcsa-checkbox__box[data-checked] {
-  background: var(--gcsa-color-primary-muted);
+  background: var(--gcsa-color-primary);
   border-color: var(--gcsa-color-primary);
 }
 
@@ -4418,15 +4530,16 @@
   width: 100%;
   max-width: 100%;
   min-width: 0;
-  height: 38px;
-  min-height: 38px;
-  padding: 0 10px 0 12px;
+  height: var(--gcsa-control-height-md);
+  min-height: var(--gcsa-control-height-md);
+  padding: 0 10px 0 var(--gcsa-control-padding-x-md);
   border: 1px solid var(--gcsa-color-border-subtle);
   border-radius: var(--gcsa-radius-sm);
   background: var(--gcsa-color-bg-input);
   color: var(--gcsa-color-text);
   cursor: pointer;
   font: inherit;
+  font-size: var(--gcsa-control-font-size-md);
   text-align: left;
   outline: none;
   transition:
@@ -4853,7 +4966,7 @@
 
 .gcsa-radio__label {
   color: var(--gcsa-color-text);
-  font-size: 14px;
+  font-size: 13px;
   line-height: 1.4;
 }
 
@@ -4871,9 +4984,12 @@
   width: 100%;
   max-width: 200px;
   min-width: 0;
+  height: var(--gcsa-control-height-md);
+  min-height: var(--gcsa-control-height-md);
   border: 1px solid var(--gcsa-color-border-subtle);
   border-radius: var(--gcsa-radius-sm);
   background: var(--gcsa-color-bg-input);
+  font-size: var(--gcsa-control-font-size-md);
   overflow: hidden;
   transition:
     border-color var(--gcsa-motion-fast) ease,
@@ -4988,11 +5104,14 @@
   align-items: center;
   gap: 4px;
   width: 100%;
-  min-height: 38px;
-  padding: 0 4px 0 12px;
+  min-height: var(--gcsa-control-height-md);
+  height: var(--gcsa-control-height-md);
+  box-sizing: border-box;
+  padding: 0 4px 0 var(--gcsa-control-padding-x-md);
   border: 1px solid var(--gcsa-color-border-subtle);
   border-radius: var(--gcsa-radius-sm);
   background: var(--gcsa-color-bg-input);
+  font-size: var(--gcsa-control-font-size-md);
   transition:
     border-color var(--gcsa-motion-fast) ease,
     box-shadow var(--gcsa-motion-fast) ease;
@@ -5631,7 +5750,7 @@ button.gcsa-steps__trigger { cursor: pointer; }
 @media (max-width: 640px) { .gcsa-steps:not(.gcsa-steps--vertical) { overflow-x: auto; padding-bottom: 4px; } .gcsa-steps:not(.gcsa-steps--vertical) .gcsa-steps__item { min-width: 150px; } }
 
 /* Cascader */
-.gcsa-cascader__trigger { display: inline-flex; align-items: center; justify-content: space-between; gap: 8px; width: 100%; min-width: 180px; height: 40px; min-height: 40px; box-sizing: border-box; padding: 0 12px 0 16px; border: 1px solid var(--gcsa-color-border); border-radius: 8px; color: var(--gcsa-color-text-heading); background: var(--gcsa-color-bg-surface); font: inherit; line-height: 16px; text-align: start; cursor: pointer; transition: border-color var(--gcsa-motion-fast) var(--gcsa-ease-out), box-shadow var(--gcsa-motion-fast) var(--gcsa-ease-out); }
+.gcsa-cascader__trigger { display: inline-flex; align-items: center; justify-content: space-between; gap: 8px; width: 100%; min-width: 180px; height: var(--gcsa-control-height-md); min-height: var(--gcsa-control-height-md); box-sizing: border-box; padding: 0 12px 0 var(--gcsa-control-padding-x-lg); border: 1px solid var(--gcsa-color-border); border-radius: 8px; color: var(--gcsa-color-text-heading); background: var(--gcsa-color-bg-surface); font: inherit; font-size: var(--gcsa-control-font-size-md); line-height: 16px; text-align: start; cursor: pointer; transition: border-color var(--gcsa-motion-fast) var(--gcsa-ease-out), box-shadow var(--gcsa-motion-fast) var(--gcsa-ease-out); }
 .gcsa-cascader__trigger:hover:not(:disabled) { border-color: var(--gcsa-color-primary); }
 .gcsa-cascader__trigger[data-state='open'], .gcsa-cascader__trigger[aria-expanded='true'] { border-color: var(--gcsa-color-border-strong); box-shadow: 0 0 0 3px var(--gcsa-color-primary-muted); }
 .gcsa-cascader__trigger:disabled { opacity: 0.5; cursor: not-allowed; }
@@ -5640,10 +5759,10 @@ button.gcsa-steps__trigger { cursor: pointer; }
 .gcsa-cascader__value[data-placeholder] { color: var(--gcsa-color-text-muted); }
 .gcsa-cascader__trigger > .gcsa-icon { flex: 0 0 16px; color: var(--gcsa-color-text-muted); transition: transform var(--gcsa-motion-fast) var(--gcsa-ease-out); }
 .gcsa-cascader__trigger[data-state='open'] > .gcsa-icon, .gcsa-cascader__trigger[aria-expanded='true'] > .gcsa-icon { transform: rotate(180deg); }
-.gcsa-popover:has(.gcsa-cascader__panel) { min-width: 0; max-width: none; padding: 0; border: 0; border-radius: 0; background: transparent; box-shadow: none; overflow: visible; }
+.gcsa-popover:has(.gcsa-cascader__panel) { min-width: 0; max-width: none; width: max-content; padding: 0; border: 0; border-radius: 0; background: transparent; box-shadow: none; overflow: visible; }
 .gcsa-popover:has(.gcsa-cascader__panel) > .gcsa-popover__body { padding: 0; }
-.gcsa-cascader__panel { display: flex; width: max-content; min-width: 0; max-width: min(720px, calc(100vw - 32px)); max-height: 320px; overflow: auto; padding: 6px 4px; border: 1px solid var(--gcsa-color-border-subtle); border-radius: 8px; background: var(--gcsa-color-bg-surface); box-shadow: var(--gcsa-shadow-md); }
-.gcsa-cascader__column { flex: 0 0 180px; min-width: 180px; padding: 0 4px; border-inline-end: 1px solid var(--gcsa-color-border-subtle); }
+.gcsa-cascader__panel { display: flex; width: max-content; min-width: var(--reference-width, 180px); max-width: min(720px, var(--available-width, calc(100vw - 32px))); max-height: 320px; overflow: auto; padding: 6px 4px; border: 1px solid var(--gcsa-color-border-subtle); border-radius: 8px; background: var(--gcsa-color-bg-surface); box-shadow: var(--gcsa-shadow-md); color: var(--gcsa-color-text); }
+.gcsa-cascader__column { flex: 1 0 180px; min-width: 180px; padding: 0 4px; border-inline-end: 1px solid var(--gcsa-color-border-subtle); }
 .gcsa-cascader__column:last-child { border-inline-end: 0; }
 .gcsa-cascader__option { display: flex; align-items: center; justify-content: space-between; width: 100%; min-height: 32px; gap: 10px; padding: 0 12px; border: 0; border-radius: 4px; color: var(--gcsa-color-text-secondary); background: transparent; font: inherit; font-size: 13px; line-height: 16px; text-align: start; cursor: pointer; transition: color var(--gcsa-motion-fast) var(--gcsa-ease-out), background var(--gcsa-motion-fast) var(--gcsa-ease-out); }
 .gcsa-cascader__option:hover:not(:disabled), .gcsa-cascader__option--active { color: var(--gcsa-color-primary); background: var(--gcsa-color-primary-muted); }
@@ -5661,10 +5780,11 @@ button.gcsa-steps__trigger { cursor: pointer; }
 .gcsa-transfer__search .gcsa-input { min-height: 32px; height: 32px; font-size: 12px; }
 .gcsa-transfer__list { flex: 1; min-height: 200px; max-height: 260px; overflow: auto; padding: 4px 6px 8px; }
 .gcsa-transfer__item { display: flex; align-items: center; width: 100%; min-height: 36px; gap: 8px; padding: 6px 8px; border: 0; border-radius: 5px; color: var(--gcsa-color-text-secondary); background: transparent; text-align: start; cursor: pointer; }
-.gcsa-transfer__item:hover:not(:disabled), .gcsa-transfer__item--selected { color: var(--gcsa-color-primary); background: var(--gcsa-color-primary-muted); }
-.gcsa-transfer__item:disabled { opacity: 0.45; cursor: not-allowed; }
-.gcsa-transfer__check { display: inline-flex; align-items: center; justify-content: center; width: 16px; height: 16px; flex: 0 0 16px; border: 1px solid var(--gcsa-color-border-strong); border-radius: 4px; color: var(--gcsa-color-text-on-surface); background: var(--gcsa-color-primary); font-size: 11px; line-height: 1; }
-.gcsa-transfer__item:not(.gcsa-transfer__item--selected) .gcsa-transfer__check { color: transparent; background: transparent; }
+.gcsa-transfer__item:hover:not([aria-disabled='true']), .gcsa-transfer__item--selected { color: var(--gcsa-color-primary); background: var(--gcsa-color-primary-muted); }
+.gcsa-transfer__item[aria-disabled='true'] { opacity: 0.45; cursor: not-allowed; }
+.gcsa-transfer__check-wrap { display: inline-flex; flex: 0 0 auto; }
+.gcsa-transfer__item .gcsa-checkbox { min-height: 0; padding: 0; gap: 0; }
+.gcsa-transfer__label { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
 .gcsa-transfer__actions { display: flex; flex: 0 0 auto; flex-direction: column; gap: 8px; }
 .gcsa-transfer__action { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; padding: 0; border: 1px solid var(--gcsa-color-border-subtle); border-radius: 6px; color: var(--gcsa-color-text-secondary); background: var(--gcsa-color-bg-surface); font-size: 22px; line-height: 1; cursor: pointer; }
 .gcsa-transfer__action:hover:not(:disabled) { color: var(--gcsa-color-primary); border-color: var(--gcsa-color-primary); background: var(--gcsa-color-primary-muted); }
@@ -5699,14 +5819,15 @@ button.gcsa-steps__trigger { cursor: pointer; }
   flex-direction: column;
   align-items: center;
   justify-content: center;
-  gap: 8px;
+  gap: 6px;
   box-sizing: border-box;
   width: 100%;
-  min-height: 123px;
-  padding: 17px 13px;
-  border: 1px dashed var(--gcsa-color-border-strong);
-  border-radius: 4px;
-  background: var(--gcsa-color-primary-muted);
+  min-height: 96px;
+  height: auto;
+  padding: 16px 12px;
+  border: 1px dashed var(--gcsa-color-border);
+  border-radius: 8px;
+  background: var(--gcsa-color-bg-base);
   cursor: pointer;
   transition: border-color var(--gcsa-motion-fast) ease, background var(--gcsa-motion-fast) ease;
 }
@@ -5714,36 +5835,37 @@ button.gcsa-steps__trigger { cursor: pointer; }
 .gcsa-upload__dropzone:hover,
 .gcsa-upload--dragging .gcsa-upload__dropzone {
   border-color: var(--gcsa-color-primary);
-  background: var(--gcsa-color-primary-muted-strong);
+  background: var(--gcsa-color-primary-muted);
 }
 
 .gcsa-upload__icon {
   display: inline-flex;
   align-items: center;
   justify-content: center;
-  width: 32px;
-  height: 32px;
+  width: 40px;
+  height: 40px;
   color: var(--gcsa-color-primary);
 }
 
 .gcsa-upload__icon .gcsa-icon,
 .gcsa-upload__icon .gcsa-icon svg {
-  width: 23px;
-  height: 23px;
+  width: 40px;
+  height: 40px;
 }
 
 .gcsa-upload__title {
   color: var(--gcsa-color-text);
-  font-size: 16px;
-  line-height: 24px;
+  font-size: 13px;
+  font-weight: 600;
+  line-height: 1.2;
   text-align: center;
 }
 
 .gcsa-upload__hint {
   margin: 0;
-  color: color-mix(in srgb, var(--gcsa-color-text) 30%, transparent);
-  font-size: 14px;
-  line-height: 16.8px;
+  color: var(--gcsa-color-text-secondary);
+  font-size: 12px;
+  line-height: 1.2;
   text-align: center;
 }
 
@@ -6688,27 +6810,28 @@ button.gcsa-steps__trigger { cursor: pointer; }
 }
 
 [data-gcsa-theme='dark'] .gcsa-btn {
-  height: 40px;
+  height: var(--gcsa-control-height-md);
+  min-height: var(--gcsa-control-height-md);
   padding-inline: 16px;
   border-radius: 20px;
-  font-size: 13px;
+  font-size: var(--gcsa-control-font-size-md);
 }
 
 [data-gcsa-theme='dark'] .gcsa-btn--sm {
-  height: var(--gcsa-control-height-sm, 24px);
-  min-height: var(--gcsa-control-height-sm, 24px);
+  height: var(--gcsa-control-height-sm);
+  min-height: var(--gcsa-control-height-sm);
   padding-inline: 12px;
 }
 
 [data-gcsa-theme='dark'] .gcsa-btn--md {
-  height: var(--gcsa-control-height-md, 32px);
-  min-height: var(--gcsa-control-height-md, 32px);
+  height: var(--gcsa-control-height-md);
+  min-height: var(--gcsa-control-height-md);
   padding-inline: 16px;
 }
 
 [data-gcsa-theme='dark'] .gcsa-btn--lg {
-  height: var(--gcsa-control-height-lg, 40px);
-  min-height: var(--gcsa-control-height-lg, 40px);
+  height: var(--gcsa-control-height-lg);
+  min-height: var(--gcsa-control-height-lg);
   padding-inline: 20px;
 }
 
@@ -6810,15 +6933,13 @@ button.gcsa-steps__trigger { cursor: pointer; }
 [data-gcsa-theme='dark'] .gcsa-table td { color: var(--gcsa-color-text); }
 
 [data-gcsa-theme='dark'] .gcsa-date-picker__control {
-  height: 40px;
-  min-height: 40px;
   box-sizing: border-box;
-  padding-left: 16px;
+  padding-left: var(--gcsa-control-padding-x-lg);
 }
 
 [data-gcsa-theme='dark'] .gcsa-date-picker__control > .gcsa-date-picker__input {
-  height: 30px;
-  min-height: 30px;
+  height: 26px;
+  min-height: 26px;
   box-sizing: border-box;
   padding: 0;
   border: 0 !important;
@@ -6917,32 +7038,33 @@ button.gcsa-steps__trigger { cursor: pointer; }
 }
 
 [data-gcsa-theme='light'] .gcsa-btn {
-  height: 40px;
+  height: var(--gcsa-control-height-md);
+  min-height: var(--gcsa-control-height-md);
   padding: 0 16px;
   gap: 8px;
   border-radius: 20px;
-  font-size: 13px;
+  font-size: var(--gcsa-control-font-size-md);
   font-weight: 600;
   letter-spacing: 0;
 }
 
 [data-gcsa-theme='light'] .gcsa-btn--sm {
-  height: var(--gcsa-control-height-sm, 24px);
-  min-height: var(--gcsa-control-height-sm, 24px);
+  height: var(--gcsa-control-height-sm);
+  min-height: var(--gcsa-control-height-sm);
   padding-inline: 16px;
-  font-size: 13px;
+  font-size: var(--gcsa-control-font-size-sm);
 }
 
 [data-gcsa-theme='light'] .gcsa-btn--md {
-  height: var(--gcsa-control-height-md, 32px);
-  min-height: var(--gcsa-control-height-md, 32px);
+  height: var(--gcsa-control-height-md);
+  min-height: var(--gcsa-control-height-md);
   padding-inline: 16px;
-  font-size: 13px;
+  font-size: var(--gcsa-control-font-size-md);
 }
 
 [data-gcsa-theme='light'] .gcsa-btn--lg {
-  height: var(--gcsa-control-height-lg, 40px);
-  min-height: var(--gcsa-control-height-lg, 40px);
+  height: var(--gcsa-control-height-lg);
+  min-height: var(--gcsa-control-height-lg);
   padding-inline: 24px;
   font-size: 14px;
 }
@@ -7120,7 +7242,7 @@ button.gcsa-steps__trigger { cursor: pointer; }
   min-height: 128px;
   box-sizing: border-box;
   padding: 41px 25px;
-  background: #ffffff;
+  background: var(--gcsa-color-bg-surface);
   border-color: rgba(3, 4, 7, 0.08);
   border-radius: 12px;
 }
@@ -7134,15 +7256,17 @@ button.gcsa-steps__trigger { cursor: pointer; }
 
 [data-gcsa-theme='light'] .gcsa-empty__title {
   margin: 12px 0 0;
+  color: rgba(15, 23, 42, 0.6);
   font-family: var(--gcsa-font-body);
-  font-size: 16px;
+  font-size: 14px;
   font-weight: 400;
   line-height: 24px;
 }
 
 [data-gcsa-theme='light'] .gcsa-empty__desc {
   margin-top: 4px;
-  font-size: 14px;
+  color: rgba(15, 23, 42, 0.3);
+  font-size: 12px;
   line-height: 22.4px;
 }
 
@@ -7247,37 +7371,31 @@ button.gcsa-steps__trigger { cursor: pointer; }
 }
 
 [data-gcsa-theme='light'] .gcsa-input-number {
-  height: 40px;
-  min-height: 40px;
   box-sizing: border-box;
   border-color: var(--gcsa-color-border);
   border-radius: 8px;
 }
 
 :is([data-gcsa-theme='light'], [data-gcsa-theme='dark']) .gcsa-input-number {
-  height: 40px;
-  min-height: 40px;
   box-sizing: border-box;
 }
 
 [data-gcsa-theme='light'] .gcsa-input-number__btn {
-  min-height: 38px;
+  min-height: 34px;
   background: #ffffff;
 }
 
 [data-gcsa-theme='light'] .gcsa-date-picker__control {
-  height: 40px;
-  min-height: 40px;
   box-sizing: border-box;
-  padding-left: 16px;
+  padding-left: var(--gcsa-control-padding-x-lg);
   border-color: var(--gcsa-color-border);
   border-radius: 8px;
   background: #ffffff;
 }
 
 [data-gcsa-theme='light'] .gcsa-date-picker__control > .gcsa-date-picker__input {
-  height: 30px;
-  min-height: 30px;
+  height: 26px;
+  min-height: 26px;
   box-sizing: border-box;
   padding: 0;
   border: 0 !important;
@@ -7412,24 +7530,24 @@ button.gcsa-steps__trigger { cursor: pointer; }
 }
 
 [data-gcsa-theme='dark'] .gcsa-upload__dropzone {
-  background: rgba(0, 187, 204, 0.08);
-  border-color: rgba(0, 187, 204, 0.32);
+  background: var(--gcsa-color-bg-base);
+  border-color: var(--gcsa-color-border);
 }
 
 [data-gcsa-theme='dark'] .gcsa-upload__dropzone:hover,
 [data-gcsa-theme='dark'] .gcsa-upload--dragging .gcsa-upload__dropzone {
-  background: rgba(0, 187, 204, 0.14);
   border-color: var(--gcsa-color-primary);
+  background: var(--gcsa-color-primary-muted);
 }
 
 [data-gcsa-theme='light'] .gcsa-upload__dropzone {
-  background: rgba(0, 187, 204, 0.08);
-  border-color: rgba(0, 187, 204, 0.32);
+  background: var(--gcsa-color-bg-elevated);
+  border-color: var(--gcsa-color-border);
 }
 
 [data-gcsa-theme='light'] .gcsa-upload__dropzone:hover,
 [data-gcsa-theme='light'] .gcsa-upload--dragging .gcsa-upload__dropzone {
-  background: rgba(0, 187, 204, 0.14);
+  background: var(--gcsa-color-primary-muted);
   border-color: var(--gcsa-color-primary);
 }
 
@@ -7491,13 +7609,14 @@ button.gcsa-steps__trigger { cursor: pointer; }
   align-items: center;
   gap: 4px;
   width: 100%;
-  min-height: 40px;
-  height: 40px;
+  min-height: var(--gcsa-control-height-md);
+  height: var(--gcsa-control-height-md);
   box-sizing: border-box;
-  padding: 0 4px 0 16px;
+  padding: 0 4px 0 var(--gcsa-control-padding-x-lg);
   border: 1px solid var(--gcsa-color-border);
   border-radius: 8px;
   background: var(--gcsa-color-bg-input);
+  font-size: var(--gcsa-control-font-size-md);
   transition:
     border-color var(--gcsa-motion-fast) ease,
     box-shadow var(--gcsa-motion-fast) ease;