@class-kit/react 0.1.0 → 0.1.2

package/dist/styles/themes/cartoon-3d.css

@@ -0,0 +1,695 @@
+.cc-theme-cartoon-3d,
+[data-cc-theme="cartoon-3d"] {
+  --cc-color-text: #122633;
+  --cc-color-muted: #649ec7;
+  --cc-color-border: #d6ecff;
+  --cc-color-border-hover: #b0d8f5;
+  --cc-color-border-focus: #36bffb;
+  --cc-color-divider: #f0f9ff;
+  --cc-color-surface: #ffffff;
+  --cc-color-surface-soft: #f0f9ff;
+  --cc-color-danger: #f53f3f;
+  --cc-color-success: #00b42a;
+  --cc-color-warning: #ff7d00;
+  --cc-color-info: #007aff;
+  --cc-color-accent: #36bffb;
+  --cc-color-accent-hover: #7b61ff;
+  --cc-color-accent-contrast: #ffffff;
+  --cc-form-placeholder-color: #c0e3fb;
+  --cc-tooltip-background: #122633;
+  --cc-tooltip-color: #ffffff;
+  --cc-theme-backdrop-filter: none;
+  --cc-theme-overlay-backdrop-filter: none;
+  --cc-theme-glass-highlight: linear-gradient(
+    135deg,
+    rgba(255, 255, 255, 0.72),
+    rgba(255, 255, 255, 0.36)
+  );
+  --cc-form-color-text: #26485c;
+  --cc-form-color-muted: #7bb0d5;
+  --cc-form-color-border: #d6ecff;
+  --cc-form-color-border-hover: #b0d8f5;
+  --cc-form-color-border-focus: #36bffb;
+  --cc-form-color-divider: #f0f9ff;
+  --cc-form-color-surface: #ffffff;
+  --cc-form-color-surface-soft: #f0f9ff;
+  --cc-form-color-accent: #36bffb;
+  --cc-form-color-accent-hover: #7b61ff;
+  --cc-form-color-accent-contrast: #ffffff;
+  --cc-form-color-danger: #f53f3f;
+  --cc-form-color-success: #00b42a;
+  --cc-form-color-warning: #ff7d00;
+  --cc-radius-sm: 4px;
+  --cc-radius-md: 4px;
+  --cc-radius-lg: 4px;
+  --cc-shadow-focus:
+    0 0 0 4px rgba(54, 191, 251, 0.2), 0 4px 0 rgba(18, 38, 51, 0.08);
+  --cc-shadow-floating:
+    0 5px 0 rgba(18, 38, 51, 0.14), 0 18px 34px rgba(54, 191, 251, 0.18);
+  --cc-form-control-radius: 4px;
+  --cc-form-control-background: #ffffff;
+  --cc-form-control-hover-background: #f0f9ff;
+  --cc-form-control-focus-background: #ffffff;
+  --cc-form-control-readonly-background: #f0f9ff;
+  --cc-form-control-disabled-background: #f0f9ff;
+  --cc-form-shadow-focus: var(--cc-shadow-focus);
+  --cc-form-shadow-floating: var(--cc-shadow-floating);
+  --cc-form-disabled-background: #f0f9ff;
+  --cc-form-disabled-border-color: #d6ecff;
+  --cc-form-disabled-color: #8dbddd;
+  --cc-form-readonly-background: #f0f9ff;
+  --cc-form-readonly-border-color: #d6ecff;
+  --cc-form-readonly-color: #26485c;
+  --cc-select-menu-radius: 4px;
+  --cc-select-menu-background: #ffffff;
+  --cc-select-menu-border-color: #b0d8f5;
+  --cc-select-menu-text-color: #122633;
+  --cc-select-menu-shadow:
+    0 5px 0 rgba(18, 38, 51, 0.14), 0 18px 34px rgba(54, 191, 251, 0.2);
+  --cc-select-option-hover-color: #d6ecff;
+  --cc-select-option-selected-color: rgba(54, 191, 251, 0.2);
+  --cc-select-option-selected-text-color: #122633;
+  --cc-select-check-color: #7b61ff;
+  --cc-select-placeholder-color: #b0d8f5;
+  --cc-virtual-select-search-background: #ffffff;
+  --cc-virtual-select-empty-color: #649ec7;
+  --cc-choice-background: #ffffff;
+  --cc-choice-border-color: #d6ecff;
+  --cc-choice-border-hover-color: #b0d8f5;
+  --cc-choice-checked-background: linear-gradient(
+    135deg,
+    #36bffb 0%,
+    #7b61ff 100%
+  );
+  --cc-choice-checked-border-color: #7b61ff;
+  --cc-choice-check-color: #ffffff;
+  --cc-switch-track-background: #d6ecff;
+  --cc-switch-track-checked-background: linear-gradient(
+    135deg,
+    #36bffb 0%,
+    #7b61ff 100%
+  );
+  --cc-switch-thumb-background: #ffffff;
+  --cc-rating-star-color: color-mix(
+    in srgb,
+    var(--cc-form-color-muted) 72%,
+    var(--cc-form-color-text)
+  );
+  --cc-rating-star-active-color: #36bffb;
+  --cc-date-picker-panel-shadow: var(--cc-shadow-floating);
+  --cc-date-picker-day-hover-background: #d6ecff;
+  --cc-date-picker-day-selected-background: linear-gradient(
+    135deg,
+    #36bffb 0%,
+    #7b61ff 100%
+  );
+  --cc-date-picker-day-selected-color: #ffffff;
+  --cc-date-picker-day-today-ring: inset 0 0 0 2px #36bffb;
+  --cc-calendar-day-hover-background: #d6ecff;
+  --cc-calendar-day-selected-background: linear-gradient(
+    135deg,
+    #36bffb 0%,
+    #7b61ff 100%
+  );
+  --cc-calendar-day-selected-color: #ffffff;
+  --cc-calendar-day-today-ring: inset 0 0 0 2px #36bffb;
+  --cc-progress-fill-color: #36bffb;
+  --cc-progress-thumb-shadow: 0 0 0 4px rgba(54, 191, 251, 0.18);
+  --cc-timeline-active-color: #36bffb;
+  --cc-picker-active-color: #36bffb;
+  --cc-picker-indicator-border-color: #7b61ff;
+  --cc-button-radius: 4px;
+  --cc-button-shadow:
+    0 3px 0 rgba(18, 38, 51, 0.14), 0 8px 14px rgba(54, 191, 251, 0.12);
+  --cc-button-primary-background: linear-gradient(
+    135deg,
+    #36bffb 0%,
+    #7b61ff 100%
+  );
+  --cc-button-primary-background-hover: linear-gradient(
+    135deg,
+    #6ed0fc 0%,
+    #a388ff 100%
+  );
+  --cc-button-primary-shadow-hover:
+    0 4px 0 rgba(18, 38, 51, 0.16), 0 14px 24px rgba(54, 191, 251, 0.2);
+  --cc-button-hover-transform: translateY(-3px) scale(1.015);
+  --cc-button-active-transform: translateY(2px) scale(0.99);
+  --cc-button-active-shadow:
+    0 1px 0 rgba(18, 38, 51, 0.18), 0 5px 10px rgba(54, 191, 251, 0.12);
+  --cc-button-secondary-background: #ffffff;
+  --cc-button-secondary-border-color: #b0d8f5;
+  --cc-button-secondary-color: #122633;
+  --cc-button-ghost-color: #36bffb;
+  --cc-button-danger-background: #f53f3f;
+  --cc-button-danger-color: #ffffff;
+  --cc-tabs-tab-active-color: #36bffb;
+  --cc-modal-radius: 4px;
+  --cc-modal-overlay-background: rgba(18, 38, 51, 0.46);
+  --cc-modal-background: #ffffff;
+  --cc-modal-color: #122633;
+  --cc-modal-shadow:
+    0 6px 0 rgba(18, 38, 51, 0.16), 0 22px 42px rgba(54, 191, 251, 0.2);
+  --cc-modal-header-background: linear-gradient(
+    180deg,
+    #ffffff 0%,
+    #f0f9ff 100%
+  );
+  --cc-modal-header-border-color: #d6ecff;
+  --cc-modal-header-color: #122633;
+  --cc-popup-radius: 4px;
+  --cc-popup-overlay-background: rgba(18, 38, 51, 0.46);
+  --cc-popup-background: #ffffff;
+  --cc-popup-color: #122633;
+  --cc-popup-shadow: var(--cc-modal-shadow);
+  --cc-popup-header-background: linear-gradient(
+    180deg,
+    #ffffff 0%,
+    #f0f9ff 100%
+  );
+  --cc-popup-header-border-color: #d6ecff;
+  --cc-popup-header-color: #122633;
+  --cc-toast-radius: 4px;
+  --cc-toast-background: #ffffff;
+  --cc-toast-border-color: #d6ecff;
+  --cc-toast-accent-color: #36bffb;
+  --cc-toast-shadow:
+    0 4px 0 rgba(18, 38, 51, 0.14), 0 16px 28px rgba(54, 191, 251, 0.18);
+  --cc-tabs-radius: 4px;
+  --cc-tabs-list-border-color: #b0d8f5;
+  --cc-tilt-card-radius: 4px;
+  --cc-tilt-card-shadow:
+    0 5px 0 rgba(18, 38, 51, 0.16), 0 18px 34px rgba(54, 191, 251, 0.18);
+  --cc-tilt-card-shadow-active:
+    0 7px 0 rgba(18, 38, 51, 0.18), 0 26px 48px rgba(54, 191, 251, 0.24);
+  --cc-tilt-card-glare-color: rgba(255, 255, 255, 0.72);
+  --cc-color-text: #26485c;
+  --cc-color-muted: #7bb0d5;
+  --cc-select-menu-text-color: #26485c;
+  --cc-select-option-selected-text-color: #26485c;
+  --cc-select-placeholder-color: #c0e3fb;
+  --cc-virtual-select-empty-color: #7bb0d5;
+  --cc-lazy-image-placeholder-color: #7bb0d5;
+  --cc-lazy-image-skeleton-color: #7bb0d5;
+  --cc-tilt-card-color: #26485c;
+  --cc-canvas-editor-muted-color: #7bb0d5;
+  --cc-canvas-editor-text-color: #26485c;
+  --cc-button-secondary-color: #26485c;
+  --cc-modal-color: #26485c;
+  --cc-modal-header-color: #26485c;
+  --cc-popup-color: #26485c;
+  --cc-popup-header-color: #26485c;
+
+  /* Enterprise 3D polish: tangible depth, restrained saturation and crisp readability. */
+  --cc-color-text: #182033;
+  --cc-color-muted: #4d5b73;
+  --cc-color-border: #c9d2e3;
+  --cc-color-border-hover: #8fa1c2;
+  --cc-color-border-focus: #3656f5;
+  --cc-color-divider: #e6ebf4;
+  --cc-color-surface: #ffffff;
+  --cc-color-surface-soft: #f5f7fc;
+  --cc-color-accent: #3656f5;
+  --cc-color-accent-hover: #213fd3;
+  --cc-form-color-text: #182033;
+  --cc-form-color-muted: #4d5b73;
+  --cc-form-color-border: #c9d2e3;
+  --cc-form-color-border-hover: #8fa1c2;
+  --cc-form-color-border-focus: #3656f5;
+  --cc-form-placeholder-color: #77859b;
+  --cc-form-control-background: #ffffff;
+  --cc-form-control-hover-background: #f7f9fd;
+  --cc-form-control-focus-background: #ffffff;
+  --cc-shadow-focus:
+    0 0 0 3px rgba(54, 86, 245, 0.18), 0 2px 0 rgba(17, 24, 39, 0.12);
+  --cc-shadow-floating:
+    0 2px 0 rgba(17, 24, 39, 0.16), 0 22px 44px rgba(54, 86, 245, 0.16),
+    0 42px 90px rgba(17, 24, 39, 0.1);
+  --cc-button-primary-background: linear-gradient(
+    145deg,
+    #3656f5 0%,
+    #22a7f2 100%
+  );
+  --cc-button-primary-background-hover: linear-gradient(
+    145deg,
+    #213fd3 0%,
+    #168ad5 100%
+  );
+  --cc-button-secondary-background: #ffffff;
+  --cc-button-secondary-border-color: #bdc7da;
+  --cc-button-secondary-color: #182033;
+  --cc-button-ghost-color: #3656f5;
+  --cc-button-shadow:
+    0 2px 0 rgba(17, 24, 39, 0.16), 0 12px 24px rgba(54, 86, 245, 0.14);
+  --cc-button-primary-shadow-hover:
+    0 3px 0 rgba(17, 24, 39, 0.18), 0 18px 34px rgba(54, 86, 245, 0.2);
+  --cc-button-hover-transform: translate3d(0, -2px, 0);
+  --cc-button-active-transform: translate3d(0, 1px, 0);
+  --cc-button-active-shadow:
+    0 2px 0 rgba(17, 24, 39, 0.2), 0 8px 18px rgba(54, 86, 245, 0.12);
+  --cc-select-menu-background: #ffffff;
+  --cc-select-menu-border-color: #bdc7da;
+  --cc-select-menu-text-color: #182033;
+  --cc-select-option-hover-color: #eef3ff;
+  --cc-select-option-selected-color: rgba(54, 86, 245, 0.14);
+  --cc-select-option-selected-text-color: #213fd3;
+  --cc-select-check-color: #3656f5;
+  --cc-switch-track-background: #d7deeb;
+  --cc-switch-track-checked-background: linear-gradient(
+    145deg,
+    #3656f5 0%,
+    #22a7f2 100%
+  );
+  --cc-rating-star-color: color-mix(
+    in srgb,
+    var(--cc-form-color-muted) 72%,
+    var(--cc-form-color-text)
+  );
+  --cc-rating-star-active-color: #3656f5;
+  --cc-tabs-tab-active-color: #3656f5;
+  --cc-tabs-list-border-color: #c9d2e3;
+  --cc-modal-overlay-background: rgba(17, 24, 39, 0.54);
+  --cc-modal-background: #ffffff;
+  --cc-modal-color: #182033;
+  --cc-modal-header-background: #ffffff;
+  --cc-modal-header-border-color: #e6ebf4;
+  --cc-modal-header-color: #182033;
+  --cc-modal-shadow:
+    0 2px 0 rgba(17, 24, 39, 0.16), 0 28px 60px rgba(54, 86, 245, 0.18),
+    0 60px 110px rgba(17, 24, 39, 0.12);
+  --cc-popup-background: #ffffff;
+  --cc-popup-color: #182033;
+  --cc-popup-header-background: #ffffff;
+  --cc-popup-header-border-color: #e6ebf4;
+  --cc-popup-header-color: #182033;
+  --cc-popup-shadow: var(--cc-modal-shadow);
+  --cc-toast-background: #ffffff;
+  --cc-toast-border-color: #c9d2e3;
+  --cc-toast-accent-color: #3656f5;
+  --cc-menu-background: transparent;
+  --cc-menu-text-color: #29344a;
+  --cc-menu-muted-color: #657289;
+  --cc-menu-item-color: #29344a;
+  --cc-menu-item-muted-color: #657289;
+  --cc-menu-item-hover-background: #eef3ff;
+  --cc-menu-item-hover-color: #213fd3;
+  --cc-menu-item-active-background: rgba(54, 86, 245, 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: #4d5b73;
+  --cc-menu-item-active-icon-color: var(--cc-menu-item-active-color);
+  --cc-code-preview-background: #ffffff;
+  --cc-code-preview-panel-background: #f5f7fc;
+  --cc-code-preview-border-color: #c9d2e3;
+  --cc-code-preview-bar-background: #ffffff;
+  --cc-code-preview-color: #182033;
+  --cc-code-preview-text-color: #182033;
+  --cc-code-preview-muted-color: #59677e;
+  --cc-code-preview-accent-color: #3656f5;
+  --cc-code-preview-line-color: rgba(54, 86, 245, 0.42);
+  --cc-tilt-card-shadow:
+    0 2px 0 rgba(17, 24, 39, 0.16), 0 24px 48px rgba(54, 86, 245, 0.16),
+    0 46px 92px rgba(17, 24, 39, 0.12);
+  --cc-tilt-card-shadow-active:
+    0 3px 0 rgba(17, 24, 39, 0.18), 0 34px 72px rgba(54, 86, 245, 0.22),
+    0 70px 130px rgba(17, 24, 39, 0.14);
+  --cc-tilt-card-glare-color: rgba(255, 255, 255, 0.78);
+
+  /* Five-round premium tuning: real dimensional UI, no cartoon tint, stable readable surfaces. */
+  --cc-color-text: #151c2e;
+  --cc-color-muted: #46556c;
+  --cc-color-border: #c3cddd;
+  --cc-color-border-hover: #8193b1;
+  --cc-color-border-focus: #2f55df;
+  --cc-color-divider: #e4e9f2;
+  --cc-color-surface: #ffffff;
+  --cc-color-surface-soft: #f4f7fb;
+  --cc-color-accent: #2f55df;
+  --cc-color-accent-hover: #2142bd;
+  --cc-shadow-focus:
+    0 0 0 3px rgba(47, 85, 223, 0.18), 0 2px 0 rgba(17, 24, 39, 0.12);
+  --cc-shadow-floating:
+    0 2px 0 rgba(17, 24, 39, 0.16), 0 22px 46px rgba(47, 85, 223, 0.16),
+    0 54px 110px rgba(17, 24, 39, 0.12);
+  --cc-form-color-text: #151c2e;
+  --cc-form-color-muted: #46556c;
+  --cc-form-color-border: #c3cddd;
+  --cc-form-color-border-hover: #8193b1;
+  --cc-form-color-border-focus: #2f55df;
+  --cc-form-disabled-opacity: 0.58;
+  --cc-form-placeholder-color: #718097;
+  --cc-form-control-background: #ffffff;
+  --cc-form-control-hover-background: #f5f8ff;
+  --cc-form-control-focus-background: #ffffff;
+  --cc-select-menu-background: #ffffff;
+  --cc-select-menu-border-color: #bcc7d8;
+  --cc-select-menu-text-color: #151c2e;
+  --cc-select-option-hover-color: #edf3ff;
+  --cc-select-option-selected-color: rgba(47, 85, 223, 0.14);
+  --cc-select-option-selected-text-color: #1f3a9b;
+  --cc-select-check-color: #2f55df;
+  --cc-date-range-summary-active-border-color: #2f55df;
+  --cc-date-range-day-in-range-background: rgba(47, 85, 223, 0.13);
+  --cc-choice-checked-background: linear-gradient(
+    145deg,
+    #2f55df 0%,
+    #1f9dd8 100%
+  );
+  --cc-switch-track-background: #d4dce8;
+  --cc-switch-track-checked-background: linear-gradient(
+    145deg,
+    #2f55df 0%,
+    #1f9dd8 100%
+  );
+  --cc-rating-star-color: color-mix(
+    in srgb,
+    var(--cc-form-color-muted) 72%,
+    var(--cc-form-color-text)
+  );
+  --cc-rating-star-active-color: #2f55df;
+  --cc-tabs-tab-active-color: #2f55df;
+  --cc-tabs-list-border-color: #c3cddd;
+  --cc-button-primary-background: linear-gradient(
+    145deg,
+    #2f55df 0%,
+    #1f9dd8 100%
+  );
+  --cc-button-primary-background-hover: linear-gradient(
+    145deg,
+    #2142bd 0%,
+    #1682ba 100%
+  );
+  --cc-button-primary-color: #ffffff;
+  --cc-button-secondary-border-color: #b7c3d6;
+  --cc-button-secondary-color: #151c2e;
+  --cc-button-ghost-color: #2f55df;
+  --cc-backtop-background: #2f55df;
+  --cc-backtop-background-hover: #2142bd;
+  --cc-backtop-color: #ffffff;
+  --cc-backtop-shadow:
+    0 2px 0 rgba(17, 24, 39, 0.16), 0 14px 30px rgba(47, 85, 223, 0.2);
+  --cc-backtop-shadow-hover:
+    0 3px 0 rgba(17, 24, 39, 0.18), 0 18px 38px rgba(47, 85, 223, 0.26);
+  --cc-marquee-focus-outline-color: #2f55df;
+  --cc-typewriter-loading-color: #2f55df;
+  --cc-typewriter-cursor-color: #2f55df;
+  --cc-lazy-image-error-color: #f53f3f;
+  --cc-lazy-image-skeleton-highlight-color: rgba(47, 85, 223, 0.16);
+  --cc-canvas-editor-background: #f4f7fb;
+  --cc-canvas-editor-card-background: #ffffff;
+  --cc-canvas-editor-card-border-color: #c3cddd;
+  --cc-canvas-editor-card-shadow:
+    0 2px 0 rgba(17, 24, 39, 0.12), 0 14px 30px rgba(47, 85, 223, 0.12);
+  --cc-canvas-editor-line-color: #2f55df;
+  --cc-canvas-editor-grid-color: rgba(47, 85, 223, 0.1);
+  --cc-canvas-editor-selection-ring: 0 0 0 2px rgba(47, 85, 223, 0.14);
+  --cc-canvas-editor-control-active-background: #2f55df;
+  --cc-canvas-editor-control-active-border-color: #2f55df;
+  --cc-canvas-editor-control-active-color: #ffffff;
+  --cc-canvas-editor-control-hover-border-color: #2f55df;
+  --cc-canvas-editor-document-accent-color: rgba(47, 85, 223, 0.08);
+  --cc-canvas-editor-node-border-color: rgba(47, 85, 223, 0.14);
+  --cc-canvas-editor-node-editing-border-color: rgba(47, 85, 223, 0.42);
+  --cc-canvas-editor-input-focus-shadow: inset 0 0 0 1px rgba(47, 85, 223, 0.22);
+  --cc-canvas-editor-mind-glow: radial-gradient(
+    circle at 50% 45%,
+    rgba(47, 85, 223, 0.08),
+    transparent 44%
+  );
+  --cc-canvas-editor-card-selected-border-color: #2f55df;
+  --cc-canvas-editor-card-selected-shadow:
+    0 2px 0 rgba(17, 24, 39, 0.14), 0 16px 34px rgba(47, 85, 223, 0.14);
+  --cc-drag-drop-slot-dragging-background: rgba(47, 85, 223, 0.08);
+  --cc-drag-drop-slot-dragging-border-color: rgba(47, 85, 223, 0.38);
+  --cc-drag-drop-slot-over-background: rgba(47, 85, 223, 0.1);
+  --cc-drag-drop-slot-over-border-color: rgba(47, 85, 223, 0.46);
+  --cc-drag-drop-preview-shadow:
+    0 2px 0 rgba(17, 24, 39, 0.14), 0 18px 42px rgba(47, 85, 223, 0.22);
+  --cc-tooltip-shadow: 0 10px 24px rgba(47, 85, 223, 0.2);
+  --cc-modal-overlay-background: rgba(17, 24, 39, 0.56);
+  --cc-modal-color: #151c2e;
+  --cc-modal-header-color: #151c2e;
+  --cc-popup-overlay-background: rgba(17, 24, 39, 0.56);
+  --cc-popup-color: #151c2e;
+  --cc-popup-header-color: #151c2e;
+  --cc-menu-text-color: #273349;
+  --cc-menu-muted-color: #5d6a80;
+  --cc-menu-item-color: #273349;
+  --cc-menu-item-muted-color: #5d6a80;
+  --cc-menu-item-hover-background: #edf3ff;
+  --cc-menu-item-hover-color: #1f3a9b;
+  --cc-menu-item-active-background: rgba(47, 85, 223, 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: #46556c;
+  --cc-menu-item-active-icon-color: var(--cc-menu-item-active-color);
+  --cc-code-preview-background: #ffffff;
+  --cc-code-preview-panel-background: #f4f7fb;
+  --cc-code-preview-border-color: #c3cddd;
+  --cc-code-preview-bar-background: #ffffff;
+  --cc-code-preview-color: #151c2e;
+  --cc-code-preview-text-color: #151c2e;
+  --cc-code-preview-muted-color: #536277;
+  --cc-code-preview-accent-color: #2f55df;
+  --cc-code-preview-line-color: rgba(47, 85, 223, 0.42);
+  --cc-tilt-card-background: #ffffff;
+  --cc-tilt-card-border-color: #c3cddd;
+  --cc-tilt-card-shadow:
+    0 2px 0 rgba(17, 24, 39, 0.16), 0 24px 50px rgba(47, 85, 223, 0.16),
+    0 50px 100px rgba(17, 24, 39, 0.12);
+  --cc-tilt-card-shadow-active:
+    0 3px 0 rgba(17, 24, 39, 0.18), 0 34px 72px rgba(47, 85, 223, 0.22),
+    0 72px 136px rgba(17, 24, 39, 0.14);
+}
+
+:where(.cc-theme-cartoon-3d, [data-cc-theme="cartoon-3d"])
+  :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
+  ):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-liquid-glass *,
+      [data-cc-theme="liquid-glass"] *
+    )
+  ) {
+  border-width: 1px;
+  box-shadow:
+    inset 0 1px 0 rgba(255, 255, 255, 0.86),
+    inset 0 -18px 36px rgba(54, 86, 245, 0.035),
+    var(--cc-shadow-floating);
+  transform: translateZ(0);
+  transform-style: preserve-3d;
+}
+
+/* Five-round realistic 3D tuning: physical light, contact shadows, readable surfaces and pressed depth. */
+.cc-theme-cartoon-3d,
+[data-cc-theme="cartoon-3d"] {
+  --cc-color-text: #111827;
+  --cc-color-muted: #4b5870;
+  --cc-color-border: #bfc8d8;
+  --cc-color-border-hover: #8796af;
+  --cc-color-border-focus: #2c55d9;
+  --cc-color-divider: #e3e8f1;
+  --cc-color-surface: #ffffff;
+  --cc-color-surface-soft: #f2f5fa;
+  --cc-color-accent: #2c55d9;
+  --cc-color-accent-hover: #183ea8;
+  --cc-form-color-text: #111827;
+  --cc-form-color-muted: #4b5870;
+  --cc-form-color-border: #bfc8d8;
+  --cc-form-color-border-hover: #8796af;
+  --cc-form-color-border-focus: #2c55d9;
+  --cc-form-color-divider: #e3e8f1;
+  --cc-form-color-accent: #2c55d9;
+  --cc-form-color-accent-hover: #183ea8;
+  --cc-form-placeholder-color: #6f7c91;
+  --cc-shadow-focus:
+    0 0 0 3px rgba(44, 85, 217, 0.18), 0 2px 0 rgba(17, 24, 39, 0.14);
+  --cc-shadow-floating:
+    0 1px 0 rgba(255, 255, 255, 0.9) inset, 0 2px 0 rgba(17, 24, 39, 0.16),
+    0 26px 58px rgba(44, 85, 217, 0.16), 0 58px 118px rgba(17, 24, 39, 0.16);
+  --cc-form-shadow-focus: var(--cc-shadow-focus);
+  --cc-form-shadow-floating: var(--cc-shadow-floating);
+  --cc-form-control-background: linear-gradient(
+    180deg,
+    #ffffff 0%,
+    #f8faff 100%
+  );
+  --cc-form-control-hover-background: linear-gradient(
+    180deg,
+    #ffffff 0%,
+    #f2f6ff 100%
+  );
+  --cc-form-control-focus-background: #ffffff;
+  --cc-select-menu-background: linear-gradient(
+    180deg,
+    #ffffff 0%,
+    #f7f9fd 100%
+  );
+  --cc-select-menu-border-color: #b8c3d5;
+  --cc-select-menu-text-color: #111827;
+  --cc-select-option-hover-color: #edf3ff;
+  --cc-select-option-selected-color: rgba(44, 85, 217, 0.14);
+  --cc-select-option-selected-text-color: #183ea8;
+  --cc-select-check-color: #2c55d9;
+  --cc-button-primary-background: linear-gradient(
+    145deg,
+    #3d6af2 0%,
+    #244bc7 100%
+  );
+  --cc-button-primary-background-hover: linear-gradient(
+    145deg,
+    #315bdc 0%,
+    #183ea8 100%
+  );
+  --cc-button-secondary-background: linear-gradient(
+    180deg,
+    #ffffff 0%,
+    #f7f9fd 100%
+  );
+  --cc-button-secondary-border-color: #b8c3d5;
+  --cc-button-secondary-color: #111827;
+  --cc-button-ghost-color: #244bc7;
+  --cc-button-shadow:
+    0 1px 0 rgba(255, 255, 255, 0.86) inset, 0 3px 0 rgba(17, 24, 39, 0.18),
+    0 14px 26px rgba(44, 85, 217, 0.16);
+  --cc-button-primary-shadow-hover:
+    0 1px 0 rgba(255, 255, 255, 0.34) inset, 0 4px 0 rgba(17, 24, 39, 0.2),
+    0 24px 42px rgba(44, 85, 217, 0.24);
+  --cc-button-hover-transform: translate3d(0, -3px, 0) perspective(900px)
+    rotateX(1deg);
+  --cc-button-active-transform: translate3d(0, 2px, 0) scale(0.992);
+  --cc-button-active-shadow:
+    0 1px 0 rgba(17, 24, 39, 0.2), 0 7px 14px rgba(44, 85, 217, 0.12);
+  --cc-choice-checked-background: linear-gradient(
+    145deg,
+    #3d6af2 0%,
+    #244bc7 100%
+  );
+  --cc-switch-track-checked-background: linear-gradient(
+    145deg,
+    #3d6af2 0%,
+    #244bc7 100%
+  );
+  --cc-date-picker-day-selected-background: linear-gradient(
+    145deg,
+    #3d6af2 0%,
+    #244bc7 100%
+  );
+  --cc-calendar-day-selected-background: linear-gradient(
+    145deg,
+    #3d6af2 0%,
+    #244bc7 100%
+  );
+  --cc-modal-overlay-background: rgba(17, 24, 39, 0.58);
+  --cc-modal-background: linear-gradient(180deg, #ffffff 0%, #f7f9fd 100%);
+  --cc-modal-color: #111827;
+  --cc-modal-header-background: linear-gradient(
+    180deg,
+    #ffffff 0%,
+    #eef3ff 100%
+  );
+  --cc-modal-header-border-color: #d9e0ec;
+  --cc-modal-header-color: #111827;
+  --cc-modal-shadow:
+    0 1px 0 rgba(255, 255, 255, 0.88) inset, 0 3px 0 rgba(17, 24, 39, 0.18),
+    0 36px 82px rgba(44, 85, 217, 0.2), 0 80px 150px rgba(17, 24, 39, 0.18);
+  --cc-popup-overlay-background: rgba(17, 24, 39, 0.56);
+  --cc-popup-background: linear-gradient(180deg, #ffffff 0%, #f7f9fd 100%);
+  --cc-popup-color: #111827;
+  --cc-popup-header-background: linear-gradient(
+    180deg,
+    #ffffff 0%,
+    #eef3ff 100%
+  );
+  --cc-popup-header-border-color: #d9e0ec;
+  --cc-popup-header-color: #111827;
+  --cc-popup-shadow: var(--cc-modal-shadow);
+  --cc-toast-background: linear-gradient(180deg, #ffffff 0%, #f8faff 100%);
+  --cc-toast-border-color: #c3cddd;
+  --cc-toast-accent-color: #2c55d9;
+  --cc-toast-shadow:
+    0 1px 0 rgba(255, 255, 255, 0.86) inset, 0 3px 0 rgba(17, 24, 39, 0.16),
+    0 22px 44px rgba(44, 85, 217, 0.18);
+  --cc-menu-text-color: #1f2937;
+  --cc-menu-muted-color: #58667d;
+  --cc-menu-item-color: #1f2937;
+  --cc-menu-item-muted-color: #58667d;
+  --cc-menu-item-hover-background: #eef4ff;
+  --cc-menu-item-hover-color: #183ea8;
+  --cc-menu-item-active-background: rgba(44, 85, 217, 0.14);
+  --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: #ffffff;
+  --cc-code-preview-panel-background: #f3f6fb;
+  --cc-code-preview-border-color: #c3cddd;
+  --cc-code-preview-bar-background: #ffffff;
+  --cc-code-preview-color: #111827;
+  --cc-code-preview-text-color: #111827;
+  --cc-code-preview-muted-color: #526178;
+  --cc-code-preview-accent-color: #2c55d9;
+  --cc-tilt-card-shadow:
+    0 1px 0 rgba(255, 255, 255, 0.88) inset, 0 3px 0 rgba(17, 24, 39, 0.18),
+    0 30px 68px rgba(44, 85, 217, 0.18), 0 70px 130px rgba(17, 24, 39, 0.16);
+  --cc-tilt-card-shadow-active:
+    0 1px 0 rgba(255, 255, 255, 0.9) inset, 0 4px 0 rgba(17, 24, 39, 0.2),
+    0 44px 92px rgba(44, 85, 217, 0.26), 0 92px 170px rgba(17, 24, 39, 0.18);
+}
+
+:where(.cc-theme-cartoon-3d, [data-cc-theme="cartoon-3d"])
+  :where(
+    .cc-button,
+    .cc-field__control,
+    .cc-select__menu,
+    .cc-modal__panel,
+    .cc-popup__panel,
+    .cc-toast,
+    .cc-tilt-card__surface
+  ):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-liquid-glass *,
+      [data-cc-theme="liquid-glass"] *
+    )
+  ) {
+  background-image:
+    linear-gradient(
+      180deg,
+      rgba(255, 255, 255, 0.9),
+      rgba(247, 249, 253, 0.94)
+    ),
+    radial-gradient(
+      circle at 18% 0%,
+      rgba(255, 255, 255, 0.95),
+      transparent 38%
+    );
+  box-shadow: var(--cc-shadow-floating);
+  transform-style: preserve-3d;
+}