@class-kit/react 0.1.0 → 0.1.2

package/dist/styles/themes/liquid-glass.css

@@ -1,35 +1,126 @@
 .cc-theme-liquid-glass,
 [data-cc-theme="liquid-glass"] {
-  --cc-theme-backdrop-filter: saturate(1.65) blur(22px) contrast(1.03);
+  --cc-color-text: #1f2329;
+  --cc-color-muted: #86909c;
+  --cc-color-border: rgba(255, 255, 255, 0.44);
+  --cc-color-border-hover: rgba(255, 255, 255, 0.68);
+  --cc-color-border-focus: #007aff;
+  --cc-color-divider: rgba(255, 255, 255, 0.18);
+  --cc-color-surface: rgba(255, 255, 255, 0.84);
+  --cc-color-surface-soft: rgba(255, 255, 255, 0.54);
+  --cc-color-danger: #f53f3f;
+  --cc-color-success: #00b42a;
+  --cc-color-warning: #ff7d00;
+  --cc-color-info: #007aff;
+  --cc-color-accent: #007aff;
+  --cc-color-accent-hover: #58a6ff;
+  --cc-color-accent-contrast: #ffffff;
+  --cc-form-placeholder-color: #b7bfca;
+  --cc-tooltip-background: rgba(30, 30, 32, 0.82);
+  --cc-tooltip-color: #f7f9fc;
+  --cc-theme-backdrop-filter: saturate(1.72) blur(28px) contrast(1.04);
+  --cc-theme-overlay-backdrop-filter: saturate(1.18) blur(14px);
   --cc-theme-glass-highlight: linear-gradient(
     135deg,
-    rgba(255, 255, 255, 0.88),
-    rgba(255, 255, 255, 0.36) 48%,
-    rgba(255, 255, 255, 0.18)
+    rgba(255, 255, 255, 0.82),
+    rgba(255, 255, 255, 0.5)
   );
-  --cc-color-surface: color-mix(in srgb, #ffffff 64%, transparent);
-  --cc-color-surface-soft: color-mix(in srgb, #ffffff 36%, transparent);
-  --cc-color-border: rgba(255, 255, 255, 0.58);
-  --cc-color-border-hover: rgba(255, 255, 255, 0.84);
-  --cc-color-divider: rgba(255, 255, 255, 0.34);
-  --cc-shadow-floating: 0 24px 70px
-    color-mix(in srgb, var(--cc-form-color-accent) 18%, transparent);
+  --cc-shadow-floating:
+    0 28px 82px rgba(0, 54, 120, 0.18), 0 8px 24px rgba(0, 122, 255, 0.1);
   --cc-form-color-surface: var(--cc-color-surface);
   --cc-form-color-surface-soft: var(--cc-color-surface-soft);
+  --cc-form-color-text: #343941;
+  --cc-form-color-muted: #9aa3ad;
   --cc-form-color-border: var(--cc-color-border);
   --cc-form-color-border-hover: var(--cc-color-border-hover);
+  --cc-form-color-border-focus: #007aff;
   --cc-form-color-divider: var(--cc-color-divider);
+  --cc-form-color-accent: #007aff;
+  --cc-form-color-accent-hover: #58a6ff;
+  --cc-form-color-accent-contrast: #ffffff;
+  --cc-form-color-danger: #f53f3f;
+  --cc-form-color-success: #00b42a;
+  --cc-form-color-warning: #ff7d00;
+  --cc-form-control-background: rgba(255, 255, 255, 0.84);
+  --cc-form-control-hover-background: rgba(255, 255, 255, 0.54);
+  --cc-form-control-focus-background: rgba(255, 255, 255, 0.88);
+  --cc-form-control-readonly-background: rgba(255, 255, 255, 0.54);
+  --cc-form-control-disabled-background: rgba(255, 255, 255, 0.36);
   --cc-form-shadow-floating: var(--cc-shadow-floating);
+  --cc-form-disabled-background: rgba(255, 255, 255, 0.36);
+  --cc-form-disabled-border-color: rgba(255, 255, 255, 0.3);
+  --cc-form-disabled-color: #b7bfca;
+  --cc-form-readonly-background: rgba(255, 255, 255, 0.54);
+  --cc-form-readonly-border-color: rgba(255, 255, 255, 0.44);
+  --cc-form-readonly-color: #343941;
   --cc-select-menu-background: var(--cc-color-surface);
   --cc-select-menu-border-color: var(--cc-color-border);
+  --cc-select-menu-text-color: #1f2329;
+  --cc-select-menu-shadow: var(--cc-shadow-floating);
+  --cc-select-option-hover-color: rgba(255, 255, 255, 0.54);
+  --cc-select-option-selected-color: rgba(0, 122, 255, 0.12);
+  --cc-select-option-selected-text-color: #007aff;
+  --cc-select-check-color: #007aff;
+  --cc-select-placeholder-color: #a1a9b6;
+  --cc-virtual-select-search-background: rgba(255, 255, 255, 0.84);
+  --cc-virtual-select-empty-color: #86909c;
   --cc-button-secondary-background: var(--cc-color-surface-soft);
+  --cc-choice-background: rgba(255, 255, 255, 0.84);
+  --cc-choice-border-color: rgba(255, 255, 255, 0.44);
+  --cc-choice-border-hover-color: rgba(255, 255, 255, 0.68);
+  --cc-choice-checked-background: #007aff;
+  --cc-choice-checked-border-color: #007aff;
+  --cc-choice-check-color: #ffffff;
+  --cc-switch-track-background: rgba(255, 255, 255, 0.44);
+  --cc-switch-track-checked-background: #007aff;
+  --cc-switch-thumb-background: rgba(255, 255, 255, 0.92);
+  --cc-rating-star-color: color-mix(
+    in srgb,
+    var(--cc-form-color-muted) 72%,
+    var(--cc-form-color-text)
+  );
+  --cc-rating-star-active-color: #007aff;
+  --cc-date-picker-panel-shadow: var(--cc-shadow-floating);
+  --cc-date-picker-day-hover-background: rgba(255, 255, 255, 0.54);
+  --cc-date-picker-day-selected-background: #007aff;
+  --cc-date-picker-day-selected-color: #ffffff;
+  --cc-date-picker-day-today-ring: inset 0 0 0 1px #007aff;
+  --cc-calendar-day-hover-background: rgba(255, 255, 255, 0.54);
+  --cc-calendar-day-selected-background: #007aff;
+  --cc-calendar-day-selected-color: #ffffff;
+  --cc-calendar-day-today-ring: inset 0 0 0 1px #007aff;
+  --cc-progress-fill-color: #007aff;
+  --cc-progress-thumb-shadow: 0 0 0 4px rgba(0, 122, 255, 0.16);
+  --cc-timeline-active-color: #007aff;
+  --cc-picker-active-color: #007aff;
+  --cc-picker-indicator-border-color: #007aff;
+  --cc-button-shadow: 0 1px 2px rgba(0, 122, 255, 0.08);
+  --cc-button-primary-background: #007aff;
+  --cc-button-primary-background-hover: #58a6ff;
+  --cc-button-primary-color: #ffffff;
+  --cc-button-primary-shadow-hover: 0 8px 20px rgba(0, 122, 255, 0.22);
+  --cc-button-secondary-border-color: rgba(255, 255, 255, 0.44);
+  --cc-button-secondary-color: #1f2329;
+  --cc-button-ghost-color: #007aff;
+  --cc-button-danger-background: #f53f3f;
+  --cc-button-danger-color: #ffffff;
+  --cc-button-hover-transform: translateY(-1px);
+  --cc-button-active-transform: translateY(0);
+  --cc-button-active-shadow: var(--cc-button-shadow);
+  --cc-tabs-list-border-color: rgba(255, 255, 255, 0.44);
+  --cc-tabs-tab-active-color: #007aff;
+  --cc-modal-overlay-background: rgba(245, 249, 255, 0.42);
   --cc-modal-background: var(--cc-color-surface);
+  --cc-modal-shadow: var(--cc-shadow-floating);
   --cc-modal-header-background: var(--cc-theme-glass-highlight);
+  --cc-popup-overlay-background: var(--cc-modal-overlay-background);
   --cc-popup-background: var(--cc-color-surface);
+  --cc-popup-shadow: var(--cc-shadow-floating);
   --cc-popup-header-background: var(--cc-theme-glass-highlight);
-  --cc-tooltip-background: rgba(15, 23, 42, 0.82);
-  --cc-toast-background: rgba(255, 255, 255, 0.68);
+  --cc-toast-background: rgba(255, 255, 255, 0.84);
   --cc-toast-border-color: var(--cc-color-border);
+  --cc-toast-accent-color: #007aff;
+  --cc-toast-shadow: 0 12px 30px rgba(0, 122, 255, 0.16);
   --cc-tilt-card-background: var(--cc-color-surface);
   --cc-tilt-card-border-color: var(--cc-color-border);
   --cc-canvas-editor-background: color-mix(
@@ -38,18 +129,432 @@
     transparent
   );
   --cc-canvas-editor-card-background: var(--cc-color-surface);
+  --cc-color-text: #343941;
+  --cc-color-muted: #9aa3ad;
+  --cc-select-menu-text-color: #343941;
+  --cc-select-option-selected-text-color: #343941;
+  --cc-select-placeholder-color: #b7bfca;
+  --cc-virtual-select-empty-color: #9aa3ad;
+  --cc-lazy-image-placeholder-color: #9aa3ad;
+  --cc-lazy-image-skeleton-color: #b7bfca;
+  --cc-tilt-card-color: #343941;
+  --cc-canvas-editor-muted-color: #9aa3ad;
+  --cc-canvas-editor-text-color: #343941;
+  --cc-button-secondary-color: #343941;
+  --cc-modal-color: #343941;
+  --cc-modal-header-color: #343941;
+  --cc-popup-color: #343941;
+  --cc-popup-header-color: #343941;
+
+  /* Ten-pass enterprise polish: frosted depth, readable text and safer translucent overlays. */
+  --cc-color-text: #18212d;
+  --cc-color-muted: #4e5f70;
+  --cc-color-border: rgba(126, 152, 184, 0.36);
+  --cc-color-border-hover: rgba(74, 108, 148, 0.5);
+  --cc-color-border-focus: #007aff;
+  --cc-color-divider: rgba(126, 152, 184, 0.18);
+  --cc-color-surface: rgba(255, 255, 255, 0.86);
+  --cc-color-surface-soft: rgba(246, 250, 255, 0.7);
+  --cc-color-accent: #007aff;
+  --cc-color-accent-hover: #0a66d8;
+  --cc-form-color-text: #18212d;
+  --cc-form-color-muted: #4e5f70;
+  --cc-form-color-border: rgba(126, 152, 184, 0.36);
+  --cc-form-color-border-hover: rgba(74, 108, 148, 0.5);
+  --cc-form-color-border-focus: #007aff;
+  --cc-form-placeholder-color: #758496;
+  --cc-form-control-background: rgba(255, 255, 255, 0.72);
+  --cc-form-control-hover-background: rgba(255, 255, 255, 0.84);
+  --cc-form-control-focus-background: rgba(255, 255, 255, 0.9);
+  --cc-theme-backdrop-filter: saturate(1.5) blur(36px) contrast(1.06);
+  --cc-theme-overlay-backdrop-filter: saturate(1.12) blur(26px) contrast(1.03);
+  --cc-shadow-focus: 0 0 0 3px rgba(0, 122, 255, 0.17);
+  --cc-shadow-floating:
+    0 28px 70px rgba(18, 36, 58, 0.2), 0 10px 26px rgba(0, 122, 255, 0.08),
+    inset 0 1px 0 rgba(255, 255, 255, 0.78);
+  --cc-button-primary-background: rgba(0, 122, 255, 0.96);
+  --cc-button-primary-background-hover: #0a66d8;
+  --cc-button-secondary-background: rgba(255, 255, 255, 0.78);
+  --cc-button-secondary-border-color: rgba(126, 152, 184, 0.38);
+  --cc-button-secondary-color: #12304f;
+  --cc-button-ghost-color: #0067d6;
+  --cc-select-menu-background: rgba(255, 255, 255, 0.9);
+  --cc-select-menu-border-color: rgba(126, 152, 184, 0.38);
+  --cc-select-menu-text-color: #18212d;
+  --cc-select-option-hover-color: rgba(0, 122, 255, 0.09);
+  --cc-select-option-selected-color: rgba(0, 122, 255, 0.14);
+  --cc-select-option-selected-text-color: #004ea8;
+  --cc-select-check-color: #007aff;
+  --cc-switch-track-background: rgba(126, 152, 184, 0.3);
+  --cc-switch-track-checked-background: #007aff;
+  --cc-rating-star-color: color-mix(
+    in srgb,
+    var(--cc-form-color-muted) 72%,
+    var(--cc-form-color-text)
+  );
+  --cc-rating-star-active-color: #007aff;
+  --cc-tabs-tab-active-color: #0067d6;
+  --cc-tabs-list-border-color: rgba(126, 152, 184, 0.34);
+  --cc-modal-overlay-background: rgba(24, 32, 43, 0.58);
+  --cc-modal-background: rgba(255, 255, 255, 0.9);
+  --cc-modal-color: #18212d;
+  --cc-modal-header-background: rgba(255, 255, 255, 0.7);
+  --cc-modal-header-border-color: rgba(126, 152, 184, 0.24);
+  --cc-modal-header-color: #18212d;
+  --cc-modal-shadow:
+    0 38px 92px rgba(18, 36, 58, 0.3), 0 14px 34px rgba(0, 122, 255, 0.1),
+    inset 0 1px 0 rgba(255, 255, 255, 0.86);
+  --cc-popup-overlay-background: rgba(24, 32, 43, 0.56);
+  --cc-popup-background: rgba(255, 255, 255, 0.9);
+  --cc-popup-color: #18212d;
+  --cc-popup-header-background: rgba(255, 255, 255, 0.7);
+  --cc-popup-header-border-color: rgba(126, 152, 184, 0.24);
+  --cc-popup-header-color: #18212d;
+  --cc-popup-shadow: var(--cc-modal-shadow);
+  --cc-toast-background: rgba(255, 255, 255, 0.92);
+  --cc-toast-border-color: rgba(126, 152, 184, 0.34);
+  --cc-toast-accent-color: #007aff;
+  --cc-tooltip-background: rgba(15, 23, 42, 0.9);
+  --cc-tooltip-color: #ffffff;
+  --cc-menu-background: transparent;
+  --cc-menu-text-color: #263546;
+  --cc-menu-muted-color: #647487;
+  --cc-menu-item-color: #263546;
+  --cc-menu-item-muted-color: #647487;
+  --cc-menu-item-hover-background: rgba(255, 255, 255, 0.58);
+  --cc-menu-item-hover-color: #004ea8;
+  --cc-menu-item-active-background: rgba(0, 122, 255, 0.13);
+  --cc-menu-item-active-color: var(--cc-form-color-accent);
+  --cc-menu-item-active-border-color: var(--cc-form-color-accent);
+  --cc-menu-item-icon-color: #506174;
+  --cc-menu-item-active-icon-color: var(--cc-menu-item-active-color);
+  --cc-code-preview-background: rgba(255, 255, 255, 0.86);
+  --cc-code-preview-panel-background: rgba(246, 250, 255, 0.8);
+  --cc-code-preview-border-color: rgba(126, 152, 184, 0.34);
+  --cc-code-preview-bar-background: rgba(255, 255, 255, 0.66);
+  --cc-code-preview-color: #18212d;
+  --cc-code-preview-text-color: #18212d;
+  --cc-code-preview-muted-color: #55677a;
+  --cc-code-preview-accent-color: #007aff;
+  --cc-code-preview-line-color: rgba(0, 122, 255, 0.42);
+  /* Five-round premium tuning: frosted readability, modal focus and isolated translucent states. */
+  --cc-color-text: #132033;
+  --cc-color-muted: #40566e;
+  --cc-color-border: rgba(107, 132, 164, 0.42);
+  --cc-color-border-hover: rgba(65, 96, 132, 0.58);
+  --cc-color-border-focus: #006fe6;
+  --cc-color-divider: rgba(107, 132, 164, 0.22);
+  --cc-color-surface: rgba(255, 255, 255, 0.9);
+  --cc-color-surface-soft: rgba(246, 250, 255, 0.74);
+  --cc-color-accent: #006fe6;
+  --cc-color-accent-hover: #005cc8;
+  --cc-theme-backdrop-filter: saturate(1.55) blur(38px) contrast(1.07);
+  --cc-theme-overlay-backdrop-filter: saturate(1.18) blur(30px) contrast(1.04);
+  --cc-shadow-focus: 0 0 0 3px rgba(0, 111, 230, 0.18);
+  --cc-shadow-floating:
+    0 34px 86px rgba(18, 36, 58, 0.24), 0 12px 30px rgba(0, 111, 230, 0.09),
+    inset 0 1px 0 rgba(255, 255, 255, 0.82);
+  --cc-form-color-text: #132033;
+  --cc-form-color-muted: #40566e;
+  --cc-form-color-border: rgba(107, 132, 164, 0.42);
+  --cc-form-color-border-hover: rgba(65, 96, 132, 0.58);
+  --cc-form-color-border-focus: #006fe6;
+  --cc-form-placeholder-color: #687b91;
+  --cc-form-control-background: rgba(255, 255, 255, 0.76);
+  --cc-form-control-hover-background: rgba(255, 255, 255, 0.86);
+  --cc-form-control-focus-background: rgba(255, 255, 255, 0.92);
+  --cc-select-menu-background: rgba(255, 255, 255, 0.92);
+  --cc-select-menu-border-color: rgba(107, 132, 164, 0.42);
+  --cc-select-menu-text-color: #132033;
+  --cc-select-option-hover-color: rgba(0, 111, 230, 0.09);
+  --cc-select-option-selected-color: rgba(0, 111, 230, 0.15);
+  --cc-select-option-selected-text-color: #004b9f;
+  --cc-select-check-color: #006fe6;
+  --cc-button-primary-background: rgba(0, 111, 230, 0.97);
+  --cc-button-primary-background-hover: #005cc8;
+  --cc-button-secondary-background: rgba(255, 255, 255, 0.8);
+  --cc-button-secondary-border-color: rgba(107, 132, 164, 0.44);
+  --cc-button-secondary-color: #12304f;
+  --cc-button-ghost-color: #005fcf;
+  --cc-switch-track-background: rgba(107, 132, 164, 0.32);
+  --cc-switch-track-checked-background: #006fe6;
+  --cc-rating-star-color: color-mix(
+    in srgb,
+    var(--cc-form-color-muted) 72%,
+    var(--cc-form-color-text)
+  );
+  --cc-rating-star-active-color: #006fe6;
+  --cc-tabs-tab-active-color: #005fcf;
+  --cc-tabs-list-border-color: rgba(107, 132, 164, 0.36);
+  --cc-form-shadow-focus: var(--cc-shadow-focus);
+  --cc-form-disabled-opacity: 0.58;
+  --cc-date-range-summary-active-border-color: #006fe6;
+  --cc-date-range-day-in-range-background: rgba(0, 111, 230, 0.13);
+  --cc-backtop-background: rgba(0, 111, 230, 0.94);
+  --cc-backtop-background-hover: #005cc8;
+  --cc-backtop-color: #ffffff;
+  --cc-backtop-shadow: 0 14px 34px rgba(0, 111, 230, 0.22);
+  --cc-backtop-shadow-hover: 0 18px 42px rgba(0, 111, 230, 0.28);
+  --cc-marquee-focus-outline-color: #006fe6;
+  --cc-typewriter-loading-color: #006fe6;
+  --cc-typewriter-cursor-color: #006fe6;
+  --cc-lazy-image-error-color: #f53f3f;
+  --cc-lazy-image-skeleton-highlight-color: rgba(0, 111, 230, 0.16);
+  --cc-canvas-editor-card-border-color: rgba(107, 132, 164, 0.38);
+  --cc-canvas-editor-card-shadow:
+    0 22px 50px rgba(18, 36, 58, 0.16), inset 0 1px 0 rgba(255, 255, 255, 0.78);
+  --cc-canvas-editor-line-color: #006fe6;
+  --cc-canvas-editor-grid-color: rgba(0, 111, 230, 0.1);
+  --cc-canvas-editor-selection-ring: 0 0 0 2px rgba(0, 111, 230, 0.14);
+  --cc-canvas-editor-control-active-background: #006fe6;
+  --cc-canvas-editor-control-active-border-color: #006fe6;
+  --cc-canvas-editor-control-active-color: #ffffff;
+  --cc-canvas-editor-control-hover-border-color: #006fe6;
+  --cc-canvas-editor-document-accent-color: rgba(0, 111, 230, 0.08);
+  --cc-canvas-editor-node-border-color: rgba(0, 111, 230, 0.14);
+  --cc-canvas-editor-node-editing-border-color: rgba(0, 111, 230, 0.42);
+  --cc-canvas-editor-input-focus-shadow: inset 0 0 0 1px rgba(0, 111, 230, 0.22);
+  --cc-canvas-editor-mind-glow: radial-gradient(
+    circle at 50% 45%,
+    rgba(0, 111, 230, 0.08),
+    transparent 44%
+  );
+  --cc-canvas-editor-card-selected-border-color: #006fe6;
+  --cc-canvas-editor-card-selected-shadow: 0 18px 42px rgba(0, 111, 230, 0.14);
+  --cc-drag-drop-slot-dragging-background: rgba(0, 111, 230, 0.08);
+  --cc-drag-drop-slot-dragging-border-color: rgba(0, 111, 230, 0.38);
+  --cc-drag-drop-slot-over-background: rgba(0, 111, 230, 0.1);
+  --cc-drag-drop-slot-over-border-color: rgba(0, 111, 230, 0.46);
+  --cc-drag-drop-preview-shadow: 0 18px 42px rgba(0, 111, 230, 0.22);
+  --cc-tooltip-shadow: 0 10px 24px rgba(0, 111, 230, 0.2);
+  --cc-tilt-card-shadow:
+    0 26px 62px rgba(18, 36, 58, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.76);
+  --cc-tilt-card-shadow-active:
+    0 34px 82px rgba(18, 36, 58, 0.26), 0 12px 28px rgba(0, 111, 230, 0.1);
+  --cc-modal-overlay-background: rgba(19, 32, 51, 0.62);
+  --cc-modal-background: rgba(255, 255, 255, 0.92);
+  --cc-modal-color: #132033;
+  --cc-modal-header-background: rgba(255, 255, 255, 0.74);
+  --cc-modal-header-border-color: rgba(107, 132, 164, 0.28);
+  --cc-modal-header-color: #132033;
+  --cc-modal-shadow:
+    0 42px 104px rgba(18, 36, 58, 0.34), 0 16px 38px rgba(0, 111, 230, 0.11),
+    inset 0 1px 0 rgba(255, 255, 255, 0.88);
+  --cc-popup-overlay-background: rgba(19, 32, 51, 0.6);
+  --cc-popup-background: rgba(255, 255, 255, 0.92);
+  --cc-popup-color: #132033;
+  --cc-popup-header-background: rgba(255, 255, 255, 0.74);
+  --cc-popup-header-border-color: rgba(107, 132, 164, 0.28);
+  --cc-popup-header-color: #132033;
+  --cc-popup-shadow: var(--cc-modal-shadow);
+  --cc-toast-background: rgba(255, 255, 255, 0.94);
+  --cc-toast-border-color: rgba(107, 132, 164, 0.38);
+  --cc-toast-accent-color: #006fe6;
+  --cc-tooltip-background: rgba(10, 17, 28, 0.92);
+  --cc-tooltip-color: #ffffff;
+  --cc-menu-text-color: #223247;
+  --cc-menu-muted-color: #5a6f86;
+  --cc-menu-item-color: #223247;
+  --cc-menu-item-muted-color: #5a6f86;
+  --cc-menu-item-hover-background: rgba(255, 255, 255, 0.64);
+  --cc-menu-item-hover-color: #004b9f;
+  --cc-menu-item-active-background: rgba(0, 111, 230, 0.14);
+  --cc-menu-item-active-color: var(--cc-form-color-accent);
+  --cc-menu-item-active-border-color: var(--cc-form-color-accent);
+  --cc-menu-item-icon-color: #495f78;
+  --cc-menu-item-active-icon-color: var(--cc-menu-item-active-color);
+  --cc-code-preview-background: rgba(255, 255, 255, 0.88);
+  --cc-code-preview-panel-background: rgba(246, 250, 255, 0.84);
+  --cc-code-preview-border-color: rgba(107, 132, 164, 0.38);
+  --cc-code-preview-bar-background: rgba(255, 255, 255, 0.7);
+  --cc-code-preview-color: #132033;
+  --cc-code-preview-text-color: #132033;
+  --cc-code-preview-muted-color: #4f647c;
+  --cc-code-preview-accent-color: #006fe6;
+  --cc-code-preview-line-color: rgba(0, 111, 230, 0.43);
   isolation: isolate;
 }
 
-.cc-theme-liquid-glass .cc-modal__panel,
-.cc-theme-liquid-glass .cc-popup__panel,
-.cc-theme-liquid-glass .cc-toast,
-[data-cc-theme="liquid-glass"] .cc-modal__panel,
-[data-cc-theme="liquid-glass"] .cc-popup__panel,
-[data-cc-theme="liquid-glass"] .cc-toast {
+:where(.cc-theme-liquid-glass, [data-cc-theme="liquid-glass"])
+  :where(.cc-modal__overlay, .cc-popup__overlay):not(
+    :where(
+      .cc-theme-minimal *,
+      [data-cc-theme="minimal"] *,
+      .cc-theme-business-blue *,
+      [data-cc-theme="business-blue"] *,
+      .cc-theme-dark-tech *,
+      [data-cc-theme="dark-tech"] *,
+      .cc-theme-soft-pink *,
+      [data-cc-theme="soft-pink"] *,
+      .cc-theme-creative-purple *,
+      [data-cc-theme="creative-purple"] *,
+      .cc-theme-cartoon-3d *,
+      [data-cc-theme="cartoon-3d"] *
+    )
+  ) {
+  backdrop-filter: var(--cc-theme-overlay-backdrop-filter);
+  -webkit-backdrop-filter: var(--cc-theme-overlay-backdrop-filter);
+}
+
+:where(.cc-theme-liquid-glass, [data-cc-theme="liquid-glass"])
+  :where(.cc-modal__panel, .cc-popup__panel, .cc-toast):not(
+    :where(
+      .cc-theme-minimal *,
+      [data-cc-theme="minimal"] *,
+      .cc-theme-business-blue *,
+      [data-cc-theme="business-blue"] *,
+      .cc-theme-dark-tech *,
+      [data-cc-theme="dark-tech"] *,
+      .cc-theme-soft-pink *,
+      [data-cc-theme="soft-pink"] *,
+      .cc-theme-creative-purple *,
+      [data-cc-theme="creative-purple"] *,
+      .cc-theme-cartoon-3d *,
+      [data-cc-theme="cartoon-3d"] *
+    )
+  ) {
   border: 1px solid var(--cc-color-border);
   box-shadow:
-    inset 0 1px 0 rgba(255, 255, 255, 0.42),
-    inset 0 -18px 40px rgba(255, 255, 255, 0.12),
+    inset 0 1px 0 rgba(255, 255, 255, 0.7),
+    inset 0 -22px 48px rgba(255, 255, 255, 0.18),
+    var(--cc-shadow-floating);
+}
+
+/* Five-round liquid glass tuning: stronger material blur, edge refraction and focused overlays. */
+.cc-theme-liquid-glass,
+[data-cc-theme="liquid-glass"] {
+  --cc-color-text: #101a28;
+  --cc-color-muted: #3f5368;
+  --cc-color-border: rgba(92, 119, 153, 0.38);
+  --cc-color-border-hover: rgba(54, 87, 124, 0.56);
+  --cc-color-border-focus: #0071e3;
+  --cc-color-divider: rgba(92, 119, 153, 0.2);
+  --cc-color-surface: rgba(255, 255, 255, 0.74);
+  --cc-color-surface-soft: rgba(245, 250, 255, 0.52);
+  --cc-color-accent: #0071e3;
+  --cc-color-accent-hover: #0057b8;
+  --cc-theme-backdrop-filter: saturate(1.75) blur(44px) contrast(1.08)
+    brightness(1.03);
+  --cc-theme-overlay-backdrop-filter: saturate(1.35) blur(36px) contrast(1.06)
+    brightness(0.96);
+  --cc-theme-glass-highlight:
+    radial-gradient(
+      circle at 20% 0%,
+      rgba(255, 255, 255, 0.92),
+      transparent 36%
+    ),
+    linear-gradient(
+      135deg,
+      rgba(255, 255, 255, 0.76),
+      rgba(255, 255, 255, 0.24)
+    );
+  --cc-shadow-focus: 0 0 0 3px rgba(0, 113, 227, 0.18);
+  --cc-shadow-floating:
+    0 38px 96px rgba(12, 28, 48, 0.28), 0 14px 34px rgba(0, 113, 227, 0.1),
+    inset 0 1px 0 rgba(255, 255, 255, 0.86),
+    inset 0 0 0 1px rgba(255, 255, 255, 0.36);
+  --cc-form-color-text: #101a28;
+  --cc-form-color-muted: #3f5368;
+  --cc-form-color-border: rgba(92, 119, 153, 0.38);
+  --cc-form-color-border-hover: rgba(54, 87, 124, 0.56);
+  --cc-form-color-border-focus: #0071e3;
+  --cc-form-placeholder-color: #687b91;
+  --cc-form-control-background: rgba(255, 255, 255, 0.62);
+  --cc-form-control-hover-background: rgba(255, 255, 255, 0.76);
+  --cc-form-control-focus-background: rgba(255, 255, 255, 0.84);
+  --cc-form-shadow-focus: var(--cc-shadow-focus);
+  --cc-select-menu-background: rgba(255, 255, 255, 0.82);
+  --cc-select-menu-border-color: rgba(92, 119, 153, 0.38);
+  --cc-select-menu-text-color: #101a28;
+  --cc-select-option-hover-color: rgba(0, 113, 227, 0.1);
+  --cc-select-option-selected-color: rgba(0, 113, 227, 0.16);
+  --cc-select-option-selected-text-color: #004996;
+  --cc-select-check-color: #0071e3;
+  --cc-button-primary-background: rgba(0, 113, 227, 0.98);
+  --cc-button-primary-background-hover: #0057b8;
+  --cc-button-secondary-background: rgba(255, 255, 255, 0.62);
+  --cc-button-secondary-border-color: rgba(92, 119, 153, 0.4);
+  --cc-button-secondary-color: #102a43;
+  --cc-button-ghost-color: #005fc7;
+  --cc-tabs-tab-active-color: #005fc7;
+  --cc-tabs-list-border-color: rgba(92, 119, 153, 0.34);
+  --cc-modal-overlay-background: rgba(11, 20, 32, 0.66);
+  --cc-modal-background: rgba(255, 255, 255, 0.82);
+  --cc-modal-color: #101a28;
+  --cc-modal-header-background: rgba(255, 255, 255, 0.58);
+  --cc-modal-header-border-color: rgba(92, 119, 153, 0.24);
+  --cc-modal-header-color: #101a28;
+  --cc-modal-shadow:
+    0 48px 120px rgba(12, 28, 48, 0.38), 0 18px 44px rgba(0, 113, 227, 0.12),
+    inset 0 1px 0 rgba(255, 255, 255, 0.9),
+    inset 0 0 0 1px rgba(255, 255, 255, 0.34);
+  --cc-popup-overlay-background: rgba(11, 20, 32, 0.64);
+  --cc-popup-background: rgba(255, 255, 255, 0.82);
+  --cc-popup-color: #101a28;
+  --cc-popup-header-background: rgba(255, 255, 255, 0.58);
+  --cc-popup-header-border-color: rgba(92, 119, 153, 0.24);
+  --cc-popup-header-color: #101a28;
+  --cc-popup-shadow: var(--cc-modal-shadow);
+  --cc-toast-background: rgba(255, 255, 255, 0.86);
+  --cc-toast-border-color: rgba(92, 119, 153, 0.34);
+  --cc-toast-accent-color: #0071e3;
+  --cc-tooltip-background: rgba(8, 14, 23, 0.9);
+  --cc-tooltip-color: #ffffff;
+  --cc-menu-text-color: #1e3043;
+  --cc-menu-muted-color: #536981;
+  --cc-menu-item-color: #1e3043;
+  --cc-menu-item-muted-color: #536981;
+  --cc-menu-item-hover-background: rgba(255, 255, 255, 0.52);
+  --cc-menu-item-hover-color: #004996;
+  --cc-menu-item-active-background: rgba(0, 113, 227, 0.15);
+  --cc-menu-item-active-color: var(--cc-form-color-accent);
+  --cc-menu-item-active-border-color: var(--cc-form-color-accent);
+  --cc-code-preview-background: rgba(255, 255, 255, 0.76);
+  --cc-code-preview-panel-background: rgba(245, 250, 255, 0.68);
+  --cc-code-preview-border-color: rgba(92, 119, 153, 0.34);
+  --cc-code-preview-bar-background: rgba(255, 255, 255, 0.54);
+  --cc-code-preview-color: #101a28;
+  --cc-code-preview-text-color: #101a28;
+  --cc-code-preview-muted-color: #465d75;
+  --cc-code-preview-accent-color: #0071e3;
+  isolation: isolate;
+}
+
+:where(.cc-theme-liquid-glass, [data-cc-theme="liquid-glass"])
+  :where(
+    .cc-field__control,
+    .cc-select__menu,
+    .cc-virtual-select__menu,
+    .cc-date-picker__panel,
+    .cc-date-range-picker__panel,
+    .cc-calendar,
+    .cc-modal__panel,
+    .cc-popup__panel,
+    .cc-toast,
+    .cc-tilt-card__surface,
+    .cc-code-preview
+  ):not(
+    :where(
+      .cc-theme-minimal *,
+      [data-cc-theme="minimal"] *,
+      .cc-theme-business-blue *,
+      [data-cc-theme="business-blue"] *,
+      .cc-theme-dark-tech *,
+      [data-cc-theme="dark-tech"] *,
+      .cc-theme-soft-pink *,
+      [data-cc-theme="soft-pink"] *,
+      .cc-theme-creative-purple *,
+      [data-cc-theme="creative-purple"] *,
+      .cc-theme-cartoon-3d *,
+      [data-cc-theme="cartoon-3d"] *
+    )
+  ) {
+  backdrop-filter: var(--cc-theme-backdrop-filter);
+  -webkit-backdrop-filter: var(--cc-theme-backdrop-filter);
+  background-image: var(--cc-theme-glass-highlight);
+  border-color: var(--cc-color-border);
+  box-shadow:
+    inset 0 1px 0 rgba(255, 255, 255, 0.86),
+    inset 0 0 0 1px rgba(255, 255, 255, 0.3),
     var(--cc-shadow-floating);
 }