/** **/ /** ENRICHED ROOT DESIGNER **/ /** **/ /** === Enriched Design Tokens === **/ :root { /** Surfaces & borders **/ --enriched-bg: #f6f7fb; --enriched-surface: rgba(255, 255, 255, 0.82); --enriched-surface-full: rgba(255, 255, 255, 1); --enriched-surface-dark: rgba(255, 255, 255, 0.92); --enriched-surface-light: rgba(255, 255, 255, 0.64); --enriched-bg-inverse:#0e1422; --enriched-surface-inverse:rgba(14,20,34,.78); --enriched-surface-full-inverse:rgba(14,20,34,1); --enriched-surface-dark-inverse:rgba(14,20,34,.88); --enriched-surface-light-inverse:rgba(14,20,34,.54); --enriched-border: rgba(17, 24, 39, 0.10); --enriched-border-light: rgba(17, 24, 39, 0.06); --enriched-border-dark: rgba(17, 24, 39, 0.16); /** Text **/ --enriched-text: #1f2937; --enriched-text-light: #374151; --enriched-text-lighter: #6b7280; --enriched-text-dark: #111827; --enriched-text-darker: #030712; --enriched-text-inverse:#f9fafb; --enriched-text-inverse-light:#f3f4f6; --enriched-text-inverse-lighter:#e5e7eb; --enriched-text-inverse-dark:#ffffff; --enriched-text-inverse-darker:#ffffff; /** Brand **/ --enriched-primary: #4e6ae6; --enriched-primary-light: #6f87f0; --enriched-primary-dark: #3d54c3; --enriched-secondary: #2fa9a3; --enriched-secondary-light: #55d0c9; --enriched-secondary-dark: #1e7e79; /** Grays & accent **/ --enriched-gray: #6b7280; --enriched-gray-light: #a8b1c2; --enriched-gray-dark: #4b5563; --enriched-accent: #ffb457; --enriched-accent-light: #ffd7a3; --enriched-accent-dark: #c77a1f; /** State colors **/ --enriched-success-light: #bbf7d0; --enriched-success: #22c55e; --enriched-success-dark: #166534; --enriched-danger-light: #fecaca; --enriched-danger: #ef4444; --enriched-danger-dark: #991b1b; --enriched-warning-light: #fde68a; --enriched-warning: #f59e0b; --enriched-warning-dark: #78350f; --enriched-info-light: #bae6fd; --enriched-info: #0ea5e9; --enriched-info-dark: #075985; --enriched-focus-ring: color-mix(in oklab, var(--enriched-primary) 35%, transparent); /** Gradient **/ --enriched-gradient-primary: linear-gradient(135deg, var(--enriched-primary) 0%, var(--enriched-primary-dark) 100%); --enriched-gradient-secondary: linear-gradient(135deg, var(--enriched-secondary) 0%, var(--enriched-secondary-dark) 100%); --enriched-gradient-accent: linear-gradient(135deg, var(--enriched-accent) 0%, var(--enriched-accent-dark) 100%); --enriched-gradient-success: linear-gradient(135deg, var(--enriched-success) 0%, var(--enriched-success-dark) 100%); --enriched-gradient-danger: linear-gradient(135deg, var(--enriched-danger) 0%, var(--enriched-danger-dark) 100%); --enriched-gradient-warning: linear-gradient(135deg, var(--enriched-warning) 0%, var(--enriched-warning-dark) 100%); --enriched-gradient-info: linear-gradient(135deg, var(--enriched-info) 0%, var(--enriched-info-dark) 100%); --enriched-shadow-primary: 0 4px 12px rgba(78, 106, 230, .3); /** Shadows **/ --enriched-shadow: rgba(0, 0, 0, 0.2); --enriched-shadow-light: rgba(0, 0, 0, 0.1); --enriched-shadow-dark: rgba(0, 0, 0, 0.3); --enriched-shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.12); --enriched-shadow-sm: 0 2px 6px rgba(0, 0, 0, 0.16); --enriched-shadow-md: 0 4px 12px rgba(0, 0, 0, 0.18); --enriched-shadow-lg: 0 10px 24px rgba(0, 0, 0, 0.22); --enriched-shadow-xl: 0 20px 48px rgba(0, 0, 0, 0.28); --enriched-shadow-inset: inset 0 1px 2px rgba(0, 0, 0, 0.18); --enriched-shadow-danger: 0 0 0 3px rgba(239, 68, 68, .18); /** Glass **/ --enriched-glass-blur: 12px; --enriched-glass-alpha: .2; --enriched-glass-border: 1px solid rgba(255, 255, 255, 0.18); --enriched-glass-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.15); /* Dark Glass */ --enriched-glass-dark-blur: 14px; --enriched-glass-dark-alpha: 0.3; --enriched-glass-dark-border: 1px solid rgba(0, 0, 0, 0.3); --enriched-glass-dark-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.45); --enriched-glass-dark-surface: rgba(15, 15, 20, 0.6); /** Spacing scale **/ --enriched-spacing-xxs: .1rem; --enriched-spacing-xs: .25rem; --enriched-spacing-sm: .5rem; --enriched-spacing-sh: .75rem; --enriched-spacing-md: 1rem; --enriched-spacing-nm: 1.25rem; --enriched-spacing-lg: 1.5rem; --enriched-spacing-xl: 2rem; --enriched-spacing-xxl: 3rem; --enriched-spacing-xxxl: 8rem; --enriched-spacing-xxxxl: 10rem; /** Numeric spacing **/ --enriched-spacing-1: .25rem; --enriched-spacing-2: .5rem; --enriched-spacing-3: .75rem; --enriched-spacing-4: 1rem; --enriched-spacing-5: 1.25rem; --enriched-spacing-6: 1.5rem; --enriched-spacing-8: 2rem; --enriched-spacing-9: 2.25rem; --enriched-spacing-10: 2.5rem; --enriched-spacing-12: 3rem; --enriched-spacing-16: 4rem; --enriched-spacing-20: 5rem; --enriched-spacing-24: 6rem; --enriched-spacing-32: 8rem; /** Radii **/ --enriched-border-radius-o: 999rem; --enriched-border-radius-sm: .5rem; --enriched-border-radius-md: .75rem; --enriched-border-radius-lg: 1rem; --enriched-border-radius-xl: 1.25rem; --enriched-border-radius-xxl: 1.5rem; --enriched-border-radius-xxxl: 2rem; --enriched-border-radius-xxxxl: 2.5rem; /** Z-layers **/ --enriched-z-modal: 1500; --enriched-z-toast: 2000; --enriched-z-overlay: 900; --enriched-z-dropdown: 800; --enriched-z-tooltip: 700; --enriched-z-drawer: 800; --enriched-z-base: 650; --enriched-z-suggest: 1450; --enriched-z-drawer-overlay: 775; --enriched-z-modal-dropdown: calc(var(--enriched-z-modal) + 120); --enriched-z-modal-dropdown-pop: calc(var(--enriched-z-modal-dropdown) + 10); /** Safe areas **/ --enriched-safe-top: max(env(safe-area-inset-top), var(--enriched-spacing-xl)); --enriched-safe-bottom: max(env(safe-area-inset-bottom), var(--enriched-spacing-xl)); --enriched-safe-left: max(env(safe-area-inset-left), var(--enriched-spacing-md)); --enriched-safe-right: max(env(safe-area-inset-right), var(--enriched-spacing-md)); /** Motion **/ --enriched-transition: all .3s ease; --enriched-transition-fast: 150ms ease-in-out; --enriched-transition-normal: 300ms ease-in-out; --enriched-transition-slow: 500ms ease-in-out; /** Animation **/ --enriched-duration: 0.3s; --enriched-duration-slow: 0.5s; --enriched-easing: cubic-bezier(0.4, 0, 0.2, 1); /** Status labels **/ --enriched-status-success: #28a745; --enriched-status-warn: #ff9800; --enriched-status-danger: #dc3545; --enriched-status-info: #17a2b8; --enriched-status-neutral: #6c757d; --enriched-status-processing: #007bff; --enriched-status-completed: #28a745; --enriched-status-cancelled: #dc3545; --enriched-status-draft: #6c757d; /** Tables **/ --table-primary: var(--enriched-primary); --table-header-bg: rgba(67, 97, 238, 0.1); --table-header-text: var(--enriched-text); --table-row-odd: rgba(255, 255, 255, 0.6); --table-row-even: rgba(255, 255, 255, 0.4); --table-row-hover: rgba(67, 97, 238, 0.05); --table-border: rgba(255, 255, 255, 0.5); --table-border-dark: rgba(67, 97, 238, 0.05); /** Admin-only layout tokens **/ --enriched-sidebar-width: 260px; --enriched-sidebar-width-mini: 80px; --enriched-topbar-height: 80px; --enriched-footer-height: 80px; /** Chips **/ --chip-bg: var(--enriched-surface); --chip-fg: var(--enriched-text); --chip-ring: var(--enriched-secondary); --chip-check: var(--enriched-accent); --chip-muted: color-mix(in oklab, var(--chip-fg) 70%, transparent); --chip-shadow: 0 2px 8px rgba(0, 0, 0, .15); /** Typography **/ --enriched-font-primary: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; --enriched-font-secondary: Georgia, 'Times New Roman', serif; --enriched-font-monospace: 'Courier New', Courier, monospace; --enriched-font-display: 'Arial Rounded MT Bold', 'Helvetica Rounded', Arial, sans-serif; --enriched-base-font-size: 1rem; --enriched-font-scale: 1.2; --enriched-font-xs: calc(var(--enriched-base-font-size) / pow(var(--enriched-font-scale), 2)); --enriched-font-sm: calc(var(--enriched-base-font-size) / var(--enriched-font-scale)); --enriched-font-md: var(--enriched-base-font-size); --enriched-font-lg: calc(var(--enriched-base-font-size) * var(--enriched-font-scale)); --enriched-font-xl: calc(var(--enriched-base-font-size) * pow(var(--enriched-font-scale), 2)); --enriched-font-2xl: calc(var(--enriched-base-font-size) * pow(var(--enriched-font-scale), 3)); --enriched-font-3xl: calc(var(--enriched-base-font-size) * pow(var(--enriched-font-scale), 4)); --enriched-line-height-tight: 1.2; --enriched-line-height-normal: 1.5; --enriched-line-height-loose: 1.8; --enriched-tracking-tight: -0.025em; --enriched-tracking-normal: 0; --enriched-tracking-wide: 0.025em; --enriched-tracking-wider: 0.05em; --enriched-text-success: var(--enriched-success); --enriched-text-info: var(--enriched-info); --enriched-text-danger: var(--enriched-danger); --enriched-text-warning: var(--enriched-warning); --enriched-text-muted: var(--enriched-text-lighter); --enriched-quote-primary-border: 4px solid var(--enriched-primary); --enriched-quote-secondary-border: 4px solid var(--enriched-secondary); --enriched-quote-bg: var(--enriched-surface-dark); --enriched-quote-padding: var(--enriched-spacing-lg); --enriched-list-indent: var(--enriched-spacing-lg); --enriched-list-bullet: disc; --enriched-list-ordered: decimal; --enriched-list-unstyled: none; --enriched-description-title-weight: 600; --enriched-description-term-color: var(--enriched-primary); --enriched-description-detail-color: var(--enriched-text); /* Color Mix */ --enriched-color-white:#ffffff; --enriched-color-black:#000000; --enriched-color-gray:#6b7280; --enriched-color-slate:#334155; --enriched-color-yellow:#facc15; --enriched-color-amber:#f59e0b; --enriched-color-orange:#f97316; --enriched-color-red:#ef4444; --enriched-color-rose:#f43f5e; --enriched-color-pink:#ec4899; --enriched-color-purple:#a855f7; --enriched-color-indigo:#6366f1; --enriched-color-blue:#3b82f6; --enriched-color-sky:#0ea5e9; --enriched-color-cyan:#06b6d4; --enriched-color-teal:#14b8a6; --enriched-color-green:#22c55e; --enriched-color-lime:#84cc16; /* Background Mix */ --enriched-section-bg-transparent:transparent; --enriched-section-bg-surface:var(--enriched-surface-full); --enriched-section-bg-soft:color-mix(in oklab,var(--enriched-surface-full) 92%,var(--enriched-bg) 8%); --enriched-section-bg-muted:color-mix(in oklab,var(--enriched-surface-full) 82%,var(--enriched-bg) 18%); --enriched-section-bg-subtle:color-mix(in oklab,var(--enriched-surface-full) 70%,var(--enriched-bg) 30%); --enriched-section-bg-elevated:var(--enriched-surface); --enriched-section-bg-inverse:var(--enriched-bg-inverse); --enriched-section-bg-tint-primary:color-mix(in oklab,var(--enriched-primary) 6%,var(--enriched-surface-full) 94%); --enriched-section-bg-tint-secondary:color-mix(in oklab,var(--enriched-secondary) 6%,var(--enriched-surface-full) 94%); --enriched-section-bg-tint-accent:color-mix(in oklab,var(--enriched-accent) 8%,var(--enriched-surface-full) 92%); --enriched-section-bg-tint-success:color-mix(in oklab,var(--enriched-success) 6%,var(--enriched-surface-full) 94%); --enriched-section-bg-tint-warning:color-mix(in oklab,var(--enriched-warning) 7%,var(--enriched-surface-full) 93%); --enriched-section-bg-tint-danger:color-mix(in oklab,var(--enriched-danger) 6%,var(--enriched-surface-full) 94%); --enriched-section-bg-tint-white:color-mix(in oklab,var(--enriched-color-white) 18%,var(--enriched-surface-full) 82%); --enriched-section-bg-tint-black:color-mix(in oklab,var(--enriched-color-black) 4%,var(--enriched-surface-full) 96%); --enriched-section-bg-tint-gray:color-mix(in oklab,var(--enriched-color-gray) 6%,var(--enriched-surface-full) 94%); --enriched-section-bg-tint-yellow:color-mix(in oklab,var(--enriched-color-yellow) 7%,var(--enriched-surface-full) 93%); --enriched-section-bg-tint-amber:color-mix(in oklab,var(--enriched-color-amber) 7%,var(--enriched-surface-full) 93%); --enriched-section-bg-tint-orange:color-mix(in oklab,var(--enriched-color-orange) 7%,var(--enriched-surface-full) 93%); --enriched-section-bg-tint-red:color-mix(in oklab,var(--enriched-color-red) 6%,var(--enriched-surface-full) 94%); --enriched-section-bg-tint-pink:color-mix(in oklab,var(--enriched-color-pink) 6%,var(--enriched-surface-full) 94%); --enriched-section-bg-tint-purple:color-mix(in oklab,var(--enriched-color-purple) 6%,var(--enriched-surface-full) 94%); --enriched-section-bg-tint-indigo:color-mix(in oklab,var(--enriched-color-indigo) 6%,var(--enriched-surface-full) 94%); --enriched-section-bg-tint-blue:color-mix(in oklab,var(--enriched-color-blue) 6%,var(--enriched-surface-full) 94%); --enriched-section-bg-tint-sky:color-mix(in oklab,var(--enriched-color-sky) 6%,var(--enriched-surface-full) 94%); --enriched-section-bg-tint-cyan:color-mix(in oklab,var(--enriched-color-cyan) 6%,var(--enriched-surface-full) 94%); --enriched-section-bg-tint-teal:color-mix(in oklab,var(--enriched-color-teal) 6%,var(--enriched-surface-full) 94%); --enriched-section-bg-tint-green:color-mix(in oklab,var(--enriched-color-green) 6%,var(--enriched-surface-full) 94%); --enriched-bg-grad-primary:linear-gradient(135deg,var(--enriched-section-bg-tint-primary) 0%,color-mix(in oklab,var(--enriched-primary) 18%,var(--enriched-surface-full) 82%) 100%); --enriched-bg-grad-secondary:linear-gradient(135deg,var(--enriched-section-bg-tint-secondary) 0%,color-mix(in oklab,var(--enriched-secondary) 18%,var(--enriched-surface-full) 82%) 100%); --enriched-bg-grad-accent:linear-gradient(135deg,var(--enriched-section-bg-tint-accent) 0%,color-mix(in oklab,var(--enriched-accent) 18%,var(--enriched-surface-full) 82%) 100%); --enriched-bg-grad-success:linear-gradient(135deg,var(--enriched-section-bg-tint-success) 0%,color-mix(in oklab,var(--enriched-success) 18%,var(--enriched-surface-full) 82%) 100%); --enriched-bg-grad-warning:linear-gradient(135deg,var(--enriched-section-bg-tint-warning) 0%,color-mix(in oklab,var(--enriched-warning) 18%,var(--enriched-surface-full) 82%) 100%); --enriched-bg-grad-danger:linear-gradient(135deg,var(--enriched-section-bg-tint-danger) 0%,color-mix(in oklab,var(--enriched-danger) 18%,var(--enriched-surface-full) 82%) 100%); --enriched-bg-grad-white:linear-gradient(135deg,var(--enriched-section-bg-tint-white) 0%,color-mix(in oklab,var(--enriched-color-white) 28%,var(--enriched-surface-full) 72%) 100%); --enriched-bg-grad-black:linear-gradient(135deg,var(--enriched-section-bg-tint-black) 0%,color-mix(in oklab,var(--enriched-color-black) 10%,var(--enriched-surface-full) 90%) 100%); --enriched-bg-grad-gray:linear-gradient(135deg,var(--enriched-section-bg-tint-gray) 0%,color-mix(in oklab,var(--enriched-color-gray) 18%,var(--enriched-surface-full) 82%) 100%); --enriched-bg-grad-yellow:linear-gradient(135deg,var(--enriched-section-bg-tint-yellow) 0%,color-mix(in oklab,var(--enriched-color-yellow) 18%,var(--enriched-surface-full) 82%) 100%); --enriched-bg-grad-amber:linear-gradient(135deg,var(--enriched-section-bg-tint-amber) 0%,color-mix(in oklab,var(--enriched-color-amber) 18%,var(--enriched-surface-full) 82%) 100%); --enriched-bg-grad-orange:linear-gradient(135deg,var(--enriched-section-bg-tint-orange) 0%,color-mix(in oklab,var(--enriched-color-orange) 18%,var(--enriched-surface-full) 82%) 100%); --enriched-bg-grad-red:linear-gradient(135deg,var(--enriched-section-bg-tint-red) 0%,color-mix(in oklab,var(--enriched-color-red) 18%,var(--enriched-surface-full) 82%) 100%); --enriched-bg-grad-pink:linear-gradient(135deg,var(--enriched-section-bg-tint-pink) 0%,color-mix(in oklab,var(--enriched-color-pink) 18%,var(--enriched-surface-full) 82%) 100%); --enriched-bg-grad-purple:linear-gradient(135deg,var(--enriched-section-bg-tint-purple) 0%,color-mix(in oklab,var(--enriched-color-purple) 18%,var(--enriched-surface-full) 82%) 100%); --enriched-bg-grad-indigo:linear-gradient(135deg,var(--enriched-section-bg-tint-indigo) 0%,color-mix(in oklab,var(--enriched-color-indigo) 18%,var(--enriched-surface-full) 82%) 100%); --enriched-bg-grad-blue:linear-gradient(135deg,var(--enriched-section-bg-tint-blue) 0%,color-mix(in oklab,var(--enriched-color-blue) 18%,var(--enriched-surface-full) 82%) 100%); --enriched-bg-grad-sky:linear-gradient(135deg,var(--enriched-section-bg-tint-sky) 0%,color-mix(in oklab,var(--enriched-color-sky) 18%,var(--enriched-surface-full) 82%) 100%); --enriched-bg-grad-cyan:linear-gradient(135deg,var(--enriched-section-bg-tint-cyan) 0%,color-mix(in oklab,var(--enriched-color-cyan) 18%,var(--enriched-surface-full) 82%) 100%); --enriched-bg-grad-teal:linear-gradient(135deg,var(--enriched-section-bg-tint-teal) 0%,color-mix(in oklab,var(--enriched-color-teal) 18%,var(--enriched-surface-full) 82%) 100%); --enriched-bg-grad-green:linear-gradient(135deg,var(--enriched-section-bg-tint-green) 0%,color-mix(in oklab,var(--enriched-color-green) 18%,var(--enriched-surface-full) 82%) 100%); } /** === Dark Theme Override === **/ [data-theme="dark"] { --enriched-bg: #0e1422; --enriched-surface: rgba(14, 20, 34, 0.78); --enriched-surface-full: rgba(14, 20, 34, 1); --enriched-surface-dark: rgba(14, 20, 34, 0.88); --enriched-surface-light: rgba(14, 20, 34, 0.54); --enriched-bg-inverse:#f6f7fb; --enriched-surface-inverse:rgba(255,255,255,.82); --enriched-surface-full-inverse:rgba(255,255,255,1); --enriched-surface-dark-inverse:rgba(255,255,255,.92); --enriched-surface-light-inverse:rgba(255,255,255,.64); --enriched-border: rgba(255, 255, 255, 0.12); --enriched-border-light: rgba(255, 255, 255, 0.06); --enriched-border-dark: rgba(255, 255, 255, 0.20); --enriched-primary: #6f87f0; --enriched-primary-light: #8ea1ff; --enriched-primary-dark: #4e66e0; --enriched-secondary: #55d0c9; --enriched-secondary-light: #76e3dc; --enriched-secondary-dark: #2fa9a3; --enriched-gray: #aab4c3; --enriched-gray-light: #cfd7e3; --enriched-gray-dark: #8590a3; --enriched-accent: #ffbf73; --enriched-accent-light: #ffe1be; --enriched-accent-dark: #c77a1f; --enriched-text: #e6ebf3; --enriched-text-light: #cfd7e3; --enriched-text-lighter: #aab4c3; --enriched-text-dark: #9ca8b8; --enriched-text-darker: #7a8799; --enriched-text-inverse:#111827; --enriched-text-inverse-light:#1f2937; --enriched-text-inverse-lighter:#374151; --enriched-text-inverse-dark:#0b1220; --enriched-text-inverse-darker:#030712; --enriched-gradient-primary: linear-gradient(135deg, var(--enriched-primary) 0%, var(--enriched-primary-dark) 100%); --enriched-gradient-secondary: linear-gradient(135deg, var(--enriched-secondary) 0%, var(--enriched-secondary-dark) 100%); --enriched-gradient-accent: linear-gradient(135deg, var(--enriched-accent) 0%, var(--enriched-accent-dark) 100%); --enriched-gradient-success: linear-gradient(135deg, var(--enriched-success) 0%, var(--enriched-success-dark) 100%); --enriched-gradient-danger: linear-gradient(135deg, var(--enriched-danger) 0%, var(--enriched-danger-dark) 100%); --enriched-gradient-warning: linear-gradient(135deg, var(--enriched-warning) 0%, var(--enriched-warning-dark) 100%); --enriched-gradient-info: linear-gradient(135deg, var(--enriched-info) 0%, var(--enriched-info-dark) 100%); --enriched-shadow-primary: 0 4px 12px rgba(111, 135, 240, .4); --enriched-shadow: rgba(255, 255, 255, 0.10); --enriched-shadow-light: rgba(255, 255, 255, 0.08); --enriched-shadow-dark: rgba(255, 255, 255, 0.16); --enriched-shadow-xs: 0 0 0 1px rgba(255, 255, 255, 0.12), 0 1px 2px rgba(255, 255, 255, 0.06); --enriched-shadow-sm: 0 0 0 1px rgba(255, 255, 255, 0.14), 0 2px 6px rgba(255, 255, 255, 0.08); --enriched-shadow-md: 0 0 0 1px rgba(255, 255, 255, 0.16), 0 4px 12px rgba(255, 255, 255, 0.10); --enriched-shadow-lg: 0 0 0 1px rgba(255, 255, 255, 0.18), 0 10px 24px rgba(255, 255, 255, 0.12); --enriched-shadow-xl: 0 0 0 1px rgba(255, 255, 255, 0.20), 0 20px 48px rgba(255, 255, 255, 0.14); --enriched-shadow-inset: inset 0 1px 0 rgba(255, 255, 255, 0.14), inset 0 -1px 2px rgba(255, 255, 255, 0.08); --table-header-bg: rgba(67, 97, 238, 0.15); --table-row-odd: rgba(30, 41, 59, 0.4); --table-row-even: rgba(30, 41, 59, 0.3); --table-row-hover: rgba(67, 97, 238, 0.1); --table-border: rgba(255, 255, 255, 0.1); --table-border-dark: rgba(255, 255, 255, 0.5); --enriched-section-bg-transparent:transparent; --enriched-section-bg-surface:var(--enriched-surface-full); --enriched-section-bg-soft:color-mix(in oklab,var(--enriched-surface-full) 92%,var(--enriched-bg) 8%); --enriched-section-bg-muted:color-mix(in oklab,var(--enriched-surface-full) 84%,var(--enriched-bg) 16%); --enriched-section-bg-subtle:color-mix(in oklab,var(--enriched-surface-full) 74%,var(--enriched-bg) 26%); --enriched-section-bg-elevated:var(--enriched-surface); --enriched-section-bg-inverse:var(--enriched-bg-inverse); --enriched-section-bg-tint-primary:color-mix(in oklab,var(--enriched-primary) 10%,var(--enriched-surface-full) 90%); --enriched-section-bg-tint-secondary:color-mix(in oklab,var(--enriched-secondary) 10%,var(--enriched-surface-full) 90%); --enriched-section-bg-tint-accent:color-mix(in oklab,var(--enriched-accent) 11%,var(--enriched-surface-full) 89%); --enriched-section-bg-tint-success:color-mix(in oklab,var(--enriched-success) 10%,var(--enriched-surface-full) 90%); --enriched-section-bg-tint-warning:color-mix(in oklab,var(--enriched-warning) 11%,var(--enriched-surface-full) 89%); --enriched-section-bg-tint-danger:color-mix(in oklab,var(--enriched-danger) 10%,var(--enriched-surface-full) 90%); --enriched-section-bg-tint-white:color-mix(in oklab,var(--enriched-color-white) 10%,var(--enriched-surface-full) 90%); --enriched-section-bg-tint-black:color-mix(in oklab,var(--enriched-color-black) 18%,var(--enriched-surface-full) 82%); --enriched-section-bg-tint-gray:color-mix(in oklab,var(--enriched-color-gray) 10%,var(--enriched-surface-full) 90%); --enriched-section-bg-tint-yellow:color-mix(in oklab,var(--enriched-color-yellow) 11%,var(--enriched-surface-full) 89%); --enriched-section-bg-tint-amber:color-mix(in oklab,var(--enriched-color-amber) 11%,var(--enriched-surface-full) 89%); --enriched-section-bg-tint-orange:color-mix(in oklab,var(--enriched-color-orange) 11%,var(--enriched-surface-full) 89%); --enriched-section-bg-tint-red:color-mix(in oklab,var(--enriched-color-red) 10%,var(--enriched-surface-full) 90%); --enriched-section-bg-tint-pink:color-mix(in oklab,var(--enriched-color-pink) 10%,var(--enriched-surface-full) 90%); --enriched-section-bg-tint-purple:color-mix(in oklab,var(--enriched-color-purple) 10%,var(--enriched-surface-full) 90%); --enriched-section-bg-tint-indigo:color-mix(in oklab,var(--enriched-color-indigo) 10%,var(--enriched-surface-full) 90%); --enriched-section-bg-tint-blue:color-mix(in oklab,var(--enriched-color-blue) 10%,var(--enriched-surface-full) 90%); --enriched-section-bg-tint-sky:color-mix(in oklab,var(--enriched-color-sky) 10%,var(--enriched-surface-full) 90%); --enriched-section-bg-tint-cyan:color-mix(in oklab,var(--enriched-color-cyan) 10%,var(--enriched-surface-full) 90%); --enriched-section-bg-tint-teal:color-mix(in oklab,var(--enriched-color-teal) 10%,var(--enriched-surface-full) 90%); --enriched-section-bg-tint-green:color-mix(in oklab,var(--enriched-color-green) 10%,var(--enriched-surface-full) 90%); --enriched-bg-grad-primary:linear-gradient(135deg,var(--enriched-section-bg-tint-primary) 0%,color-mix(in oklab,var(--enriched-primary) 22%,var(--enriched-surface-full) 78%) 100%); --enriched-bg-grad-secondary:linear-gradient(135deg,var(--enriched-section-bg-tint-secondary) 0%,color-mix(in oklab,var(--enriched-secondary) 22%,var(--enriched-surface-full) 78%) 100%); --enriched-bg-grad-accent:linear-gradient(135deg,var(--enriched-section-bg-tint-accent) 0%,color-mix(in oklab,var(--enriched-accent) 22%,var(--enriched-surface-full) 78%) 100%); --enriched-bg-grad-success:linear-gradient(135deg,var(--enriched-section-bg-tint-success) 0%,color-mix(in oklab,var(--enriched-success) 22%,var(--enriched-surface-full) 78%) 100%); --enriched-bg-grad-warning:linear-gradient(135deg,var(--enriched-section-bg-tint-warning) 0%,color-mix(in oklab,var(--enriched-warning) 22%,var(--enriched-surface-full) 78%) 100%); --enriched-bg-grad-danger:linear-gradient(135deg,var(--enriched-section-bg-tint-danger) 0%,color-mix(in oklab,var(--enriched-danger) 22%,var(--enriched-surface-full) 78%) 100%); --enriched-bg-grad-white:linear-gradient(135deg,var(--enriched-section-bg-tint-white) 0%,color-mix(in oklab,var(--enriched-color-white) 14%,var(--enriched-surface-full) 86%) 100%); --enriched-bg-grad-black:linear-gradient(135deg,var(--enriched-section-bg-tint-black) 0%,color-mix(in oklab,var(--enriched-color-black) 26%,var(--enriched-surface-full) 74%) 100%); --enriched-bg-grad-gray:linear-gradient(135deg,var(--enriched-section-bg-tint-gray) 0%,color-mix(in oklab,var(--enriched-color-gray) 22%,var(--enriched-surface-full) 78%) 100%); --enriched-bg-grad-yellow:linear-gradient(135deg,var(--enriched-section-bg-tint-yellow) 0%,color-mix(in oklab,var(--enriched-color-yellow) 22%,var(--enriched-surface-full) 78%) 100%); --enriched-bg-grad-amber:linear-gradient(135deg,var(--enriched-section-bg-tint-amber) 0%,color-mix(in oklab,var(--enriched-color-amber) 22%,var(--enriched-surface-full) 78%) 100%); --enriched-bg-grad-orange:linear-gradient(135deg,var(--enriched-section-bg-tint-orange) 0%,color-mix(in oklab,var(--enriched-color-orange) 22%,var(--enriched-surface-full) 78%) 100%); --enriched-bg-grad-red:linear-gradient(135deg,var(--enriched-section-bg-tint-red) 0%,color-mix(in oklab,var(--enriched-color-red) 22%,var(--enriched-surface-full) 78%) 100%); --enriched-bg-grad-pink:linear-gradient(135deg,var(--enriched-section-bg-tint-pink) 0%,color-mix(in oklab,var(--enriched-color-pink) 22%,var(--enriched-surface-full) 78%) 100%); --enriched-bg-grad-purple:linear-gradient(135deg,var(--enriched-section-bg-tint-purple) 0%,color-mix(in oklab,var(--enriched-color-purple) 22%,var(--enriched-surface-full) 78%) 100%); --enriched-bg-grad-indigo:linear-gradient(135deg,var(--enriched-section-bg-tint-indigo) 0%,color-mix(in oklab,var(--enriched-color-indigo) 22%,var(--enriched-surface-full) 78%) 100%); --enriched-bg-grad-blue:linear-gradient(135deg,var(--enriched-section-bg-tint-blue) 0%,color-mix(in oklab,var(--enriched-color-blue) 22%,var(--enriched-surface-full) 78%) 100%); --enriched-bg-grad-sky:linear-gradient(135deg,var(--enriched-section-bg-tint-sky) 0%,color-mix(in oklab,var(--enriched-color-sky) 22%,var(--enriched-surface-full) 78%) 100%); --enriched-bg-grad-cyan:linear-gradient(135deg,var(--enriched-section-bg-tint-cyan) 0%,color-mix(in oklab,var(--enriched-color-cyan) 22%,var(--enriched-surface-full) 78%) 100%); --enriched-bg-grad-teal:linear-gradient(135deg,var(--enriched-section-bg-tint-teal) 0%,color-mix(in oklab,var(--enriched-color-teal) 22%,var(--enriched-surface-full) 78%) 100%); --enriched-bg-grad-green:linear-gradient(135deg,var(--enriched-section-bg-tint-green) 0%,color-mix(in oklab,var(--enriched-color-green) 22%,var(--enriched-surface-full) 78%) 100%); } /** === Retro Theme Override === **/ [data-theme="retro"] { --enriched-bg: #f5f1e6; --enriched-surface: #e8dfca; --enriched-surface-full: #e8dfca; --enriched-surface-dark: #d8d0bd; --enriched-surface-light: #f3eee3; --enriched-border: #a38f75; --enriched-border-light: #c9b9a2; --enriched-border-dark: #7a6852; --enriched-primary: #9c6d3b; --enriched-primary-light: #b58a57; --enriched-primary-dark: #7d562c; --enriched-secondary: #4e6c50; --enriched-secondary-light: #678869; --enriched-secondary-dark: #3c523e; --enriched-text: #3c3026; --enriched-text-light: #5c5043; --enriched-text-lighter: #8a7d6d; --enriched-text-dark: #2a2019; --enriched-text-darker: #1f1812; --enriched-gradient-primary: linear-gradient(135deg, var(--enriched-primary) 0%, var(--enriched-primary-dark) 100%); --enriched-gradient-secondary: linear-gradient(135deg, var(--enriched-secondary) 0%, var(--enriched-secondary-dark) 100%); --enriched-gradient-accent: linear-gradient(135deg, var(--enriched-accent) 0%, var(--enriched-accent-dark) 100%); --enriched-gradient-success: linear-gradient(135deg, var(--enriched-success) 0%, var(--enriched-success-dark) 100%); --enriched-gradient-danger: linear-gradient(135deg, var(--enriched-danger) 0%, var(--enriched-danger-dark) 100%); --enriched-gradient-warning: linear-gradient(135deg, var(--enriched-warning) 0%, var(--enriched-warning-dark) 100%); --enriched-gradient-info: linear-gradient(135deg, var(--enriched-info) 0%, var(--enriched-info-dark) 100%); --enriched-shadow-primary: 0 4px 12px rgba(156, 109, 59, .3); --enriched-shadow: rgba(92, 80, 67, 0.2); --enriched-shadow-light: rgba(92, 80, 67, 0.1); --enriched-shadow-dark: rgba(92, 80, 67, 0.3); } /** === Emman Theme Override === **/ :root { --emman-bg: #faf8f6; --emman-surface: rgba(255, 255, 255, .85); --emman-surface-full: rgba(255, 255, 255, 1); --emman-surface-dark: rgba(255, 255, 255, .975); --emman-surface-light: rgba(255, 255, 255, .65); --emman-primary: #2563eb; --emman-primary-light: #60a5fa; --emman-primary-dark: #1e3a8a; --emman-secondary: #60ff6c; --emman-secondary-light: #a8ffae; --emman-secondary-dark: #00ef12; --emman-accent: #d4af37; --emman-accent-light: #e6c766; --emman-accent-dark: #a67c00; --emman-text: #3a2f28; --emman-text-light: #7d6f65; --emman-text-lighter: #9b8f86; --emman-text-dark: #2a2019; --emman-text-darker: #1f1812; --emman-border: rgba(0, 0, 0, .12); --emman-border-light: rgba(0, 0, 0, .06); --emman-border-dark: rgba(0, 0, 0, .2); --emman-success: #2e7d32; --emman-success-dark: #1b5e20; --emman-danger: #c62828; --emman-danger-dark: #8e0000; --emman-warning: #ff9800; --emman-warning-dark: #e65100; --emman-info: #0288d1; --emman-info-dark: #01579b; --emman-glass-border: 1px solid rgba(255, 255, 255, .18); --emman-glass-shadow: 0 8px 32px 0 rgba(31, 38, 135, .15); } [data-theme="emman"] { --enriched-bg: var(--emman-bg); --enriched-surface: var(--emman-surface); --enriched-surface-full: var(--emman-surface-full); --enriched-surface-dark: var(--emman-surface-dark); --enriched-surface-light: var(--emman-surface-light); --enriched-border: var(--emman-border); --enriched-border-light: var(--emman-border-light); --enriched-border-dark: var(--emman-border-dark); --enriched-text: var(--emman-text); --enriched-text-light: var(--emman-text-light); --enriched-text-lighter: var(--emman-text-lighter); --enriched-text-dark: var(--emman-text-dark); --enriched-text-darker: var(--emman-text-darker); --enriched-primary: var(--emman-primary); --enriched-primary-light: var(--emman-primary-light); --enriched-primary-dark: var(--emman-primary-dark); --enriched-secondary: var(--emman-secondary); --enriched-secondary-light: var(--emman-secondary-light); --enriched-secondary-dark: var(--emman-secondary-dark); --enriched-accent: var(--emman-accent); --enriched-accent-light: var(--emman-accent-light); --enriched-accent-dark: var(--emman-accent-dark); --enriched-success: var(--emman-success); --enriched-success-dark: var(--emman-success-dark); --enriched-danger: var(--emman-danger); --enriched-danger-dark: var(--emman-danger-dark); --enriched-warning: var(--emman-warning); --enriched-warning-dark: var(--emman-warning-dark); --enriched-info: var(--emman-info); --enriched-info-dark: var(--emman-info-dark); --enriched-glass-border: var(--emman-glass-border); --enriched-glass-shadow: var(--emman-glass-shadow); --enriched-gradient-primary: linear-gradient(135deg, var(--emman-primary) 0%, var(--emman-primary-dark) 100%); --enriched-gradient-secondary: linear-gradient(135deg, var(--emman-secondary) 0%, var(--emman-secondary-dark) 100%); --enriched-gradient-accent: linear-gradient(135deg, var(--emman-accent) 0%, var(--emman-accent-dark) 100%); --enriched-gradient-success: linear-gradient(135deg, var(--emman-success) 0%, var(--emman-success-dark) 100%); --enriched-gradient-danger: linear-gradient(135deg, var(--emman-danger) 0%, var(--emman-danger-dark) 100%); --enriched-gradient-warning: linear-gradient(135deg, var(--emman-warning) 0%, var(--emman-warning-dark) 100%); --enriched-gradient-info: linear-gradient(135deg, var(--emman-info) 0%, var(--emman-info-dark) 100%); --enriched-shadow-primary: 0 4px 12px rgba(37, 99, 235, .3); } /** === Pinky Styles === **/ :root { --rot-primary: #d41367; --rot-primary-dark: #a30f4f; --rot-primary-light: #f8a5c9; --rot-primary-xlight: #fde6f0; --rot-secondary: #d41367; --rot-secondary-dark: #a30f4f; --rot-secondary-light: #f8a5c9; --rot-secondary-xlight: #fde6f0; --rot-accent: #f7a81b; --rot-accent-dark: #dd8a0e; --rot-accent-light: #fde2b5; --rot-accent-xlight: #fff8eb; --rot-highlight: #00adbb; --rot-highlight-dark: #008896; --rot-highlight-light: #a4ecf1; --rot-highlight-xlight: #e4fcfd; --rot-true-white: #ffffff; --rot-white: #ffffff; --rot-off-white: #f8f9fa; --rot-light-gray: #e9ecef; --rot-medium-gray: #6c757d; --rot-dark-gray: #343a40; --rot-true-black: #212529; --rot-black: #212529; --rot-bg: #f8f9fa; --rot-surface: rgba(255, 255, 255, .85); --rot-surface-full: rgba(255, 255, 255, 1); --rot-surface-dark: rgba(255, 255, 255, .95); --rot-surface-light: rgba(255, 255, 255, .65); --rot-text: #212529; --rot-text-light: #343a40; --rot-text-lighter: #6c757d; --rot-text-dark: #0d1117; --rot-text-darker: #010409; --rot-border: rgba(0, 0, 0, .12); --rot-border-light: rgba(0, 0, 0, .06); --rot-border-dark: rgba(0, 0, 0, .2); --rot-glass-border: 1px solid rgba(255, 255, 255, .18); --rot-glass-shadow: 0 8px 32px 0 rgba(31, 38, 135, .15); } [data-theme="pinky"] { --enriched-bg: var(--rot-bg); --enriched-surface: var(--rot-surface); --enriched-surface-full: var(--rot-surface-full); --enriched-surface-dark: var(--rot-surface-dark); --enriched-surface-light: var(--rot-surface-light); --enriched-border: var(--rot-border); --enriched-border-light: var(--rot-border-light); --enriched-border-dark: var(--rot-border-dark); --enriched-text: var(--rot-text); --enriched-text-light: var(--rot-text-light); --enriched-text-lighter: var(--rot-text-lighter); --enriched-text-dark: var(--rot-text-dark); --enriched-text-darker: var(--rot-text-darker); --enriched-primary: var(--rot-primary); --enriched-primary-light: var(--rot-primary-light); --enriched-primary-dark: var(--rot-primary-dark); --enriched-secondary: var(--rot-secondary); --enriched-secondary-light: var(--rot-secondary-light); --enriched-secondary-dark: var(--rot-secondary-dark); --enriched-accent: var(--rot-accent); --enriched-accent-light: var(--rot-accent-light); --enriched-accent-dark: var(--rot-accent-dark); --enriched-success: var(--rot-highlight); --enriched-success-dark: var(--rot-highlight-dark); --enriched-warning: var(--rot-accent); --enriched-warning-dark: var(--rot-accent-dark); --enriched-info: var(--rot-highlight); --enriched-info-dark: var(--rot-highlight-dark); --enriched-danger: var(--rot-primary); --enriched-danger-dark: var(--rot-primary-dark); --enriched-glass-border: var(--rot-glass-border); --enriched-glass-shadow: var(--rot-glass-shadow); --enriched-gradient-primary: linear-gradient(135deg, var(--rot-primary) 0%, var(--rot-primary-dark) 100%); --enriched-gradient-secondary: linear-gradient(135deg, var(--rot-secondary) 0%, var(--rot-secondary-dark) 100%); --enriched-gradient-accent: linear-gradient(135deg, var(--rot-accent) 0%, var(--rot-accent-dark) 100%); --enriched-gradient-success: linear-gradient(135deg, var(--rot-highlight) 0%, var(--rot-highlight-dark) 100%); --enriched-gradient-danger: linear-gradient(135deg, var(--rot-primary) 0%, var(--rot-primary-dark) 100%); --enriched-gradient-warning: linear-gradient(135deg, var(--rot-accent) 0%, var(--rot-accent-dark) 100%); --enriched-gradient-info: linear-gradient(135deg, var(--rot-highlight) 0%, var(--rot-highlight-dark) 100%); --enriched-shadow-primary: 0 4px 12px rgba(212, 19, 103, .3); } /** === Azure Styles === **/ :root { --rty-bg: #f5f8fa; --rty-surface: rgba(255, 255, 255, .85); --rty-surface-full: rgba(255, 255, 255, 1); --rty-surface-dark: rgba(255, 255, 255, .975); --rty-surface-light: rgba(255, 255, 255, .65); --rty-primary: #17468f; --rty-primary-light: #0077c8; --rty-primary-dark: #123875; --rty-secondary: #f7a81b; --rty-secondary-light: #f9bb4a; --rty-secondary-dark: #c98814; --rty-accent: #f7a81b; --rty-accent-dark: #dd8a0e; --rty-accent-light: #fde2b5; --rty-accent-xlight: #fff8eb; --rty-text: #212529; --rty-text-light: #343a40; --rty-text-lighter: #6c757d; --rty-text-dark: #0d1117; --rty-text-darker: #010409; --rty-border: rgba(0, 0, 0, .12); --rty-border-light: rgba(0, 0, 0, .06); --rty-border-dark: rgba(0, 0, 0, .2); --rty-success: #2e7d32; --rty-warning: #f57c00; --rty-danger: #da291c; --rty-info: #0077c8; --rty-glass-border: 1px solid rgba(255, 255, 255, .18); --rty-glass-shadow: 0 8px 32px 0 rgba(31, 38, 135, .15); } [data-theme="azure"] { --enriched-bg: var(--rty-bg); --enriched-surface: var(--rty-surface); --enriched-surface-full: var(--rty-surface-full); --enriched-surface-dark: var(--rty-surface-dark); --enriched-surface-light: var(--rty-surface-light); --enriched-border: var(--rty-border); --enriched-border-light: var(--rty-border-light); --enriched-border-dark: var(--rty-border-dark); --enriched-text: var(--rty-text); --enriched-text-light: var(--rty-text-light); --enriched-text-lighter: var(--rty-text-lighter); --enriched-text-dark: var(--rty-text-dark); --enriched-text-darker: var(--rty-text-darker); --enriched-primary: var(--rty-primary); --enriched-primary-light: var(--rty-primary-light); --enriched-primary-dark: var(--rty-primary-dark); --enriched-secondary: var(--rty-secondary); --enriched-secondary-light: var(--rty-secondary-light); --enriched-secondary-dark: var(--rty-secondary-dark); --enriched-accent: var(--rty-accent); --enriched-accent-light: var(--rty-accent-light); --enriched-accent-dark: var(--rty-accent-dark); --enriched-success: var(--rty-success); --enriched-success-dark: color-mix(in oklab, var(--rty-success) 80%, #000); --enriched-warning: var(--rty-warning); --enriched-warning-dark: color-mix(in oklab, var(--rty-warning) 75%, #000); --enriched-danger: var(--rty-danger); --enriched-danger-dark: color-mix(in oklab, var(--rty-danger) 75%, #000); --enriched-info: var(--rty-info); --enriched-info-dark: color-mix(in oklab, var(--rty-info) 75%, #000); --enriched-glass-border: var(--rty-glass-border); --enriched-glass-shadow: var(--rty-glass-shadow); --enriched-gradient-primary: linear-gradient(135deg, var(--rty-primary) 0%, var(--rty-primary-dark) 100%); --enriched-gradient-secondary: linear-gradient(135deg, var(--rty-secondary) 0%, var(--rty-secondary-dark) 100%); --enriched-gradient-accent: linear-gradient(135deg, var(--rty-accent) 0%, var(--rty-accent-dark) 100%); --enriched-gradient-success: linear-gradient(135deg, var(--rty-success) 0%, color-mix(in oklab, var(--rty-success) 80%, #000) 100%); --enriched-gradient-danger: linear-gradient(135deg, var(--rty-danger) 0%, color-mix(in oklab, var(--rty-danger) 75%, #000) 100%); --enriched-gradient-warning: linear-gradient(135deg, var(--rty-warning) 0%, color-mix(in oklab, var(--rty-warning) 75%, #000) 100%); --enriched-gradient-info: linear-gradient(135deg, var(--rty-info) 0%, color-mix(in oklab, var(--rty-info) 75%, #000) 100%); --enriched-shadow-primary: 0 4px 12px rgba(23, 70, 143, .3); } /** === Dunia Styles === **/ :root{ --dunia-sun:#FFB341; --dunia-ember:#F97335; --dunia-indigo:#3B3AAE; --dunia-midnight:#171530; --dunia-palm:#28B271; --dunia-clay:#C8683A; --dunia-ink:#111827; --dunia-smoke:#6B7280; --dunia-sand:#E5E7EB; --dunia-mist:#F3F4F6; --dunia-light:#F9FAFB; --dunia-info:#0EA5E9; --dunia-success:#16A34A; --dunia-warning:#FACC15; --dunia-error:#DC2626; } [data-theme="dunia"]{ --enriched-bg:var(--dunia-light); --enriched-surface:rgba(255,255,255,0.92); --enriched-surface-full:rgba(255,255,255,1); --enriched-surface-dark:var(--dunia-mist); --enriched-surface-light:color-mix(in oklab,var(--dunia-mist)80%,#ffffff); --enriched-border:var(--dunia-sand); --enriched-border-light:color-mix(in oklab,var(--dunia-sand)65%,#ffffff); --enriched-border-dark:color-mix(in oklab,var(--dunia-sand)85%,#000000); --enriched-text:var(--dunia-ink); --enriched-text-light:var(--dunia-smoke); --enriched-text-lighter:color-mix(in oklab,var(--dunia-smoke)70%,#ffffff); --enriched-text-dark:color-mix(in oklab,var(--dunia-ink)90%,#000000); --enriched-text-darker:#020617; --enriched-primary:var(--dunia-ember); --enriched-primary-light:var(--dunia-sun); --enriched-primary-dark:var(--dunia-clay); --enriched-secondary:var(--dunia-indigo); --enriched-secondary-light:color-mix(in oklab,var(--dunia-indigo)75%,#ffffff); --enriched-secondary-dark:color-mix(in oklab,var(--dunia-indigo)85%,#000000); --enriched-accent:var(--dunia-palm); --enriched-accent-light:color-mix(in oklab,var(--dunia-palm)80%,#ffffff); --enriched-accent-dark:color-mix(in oklab,var(--dunia-palm)85%,#000000); --enriched-success:var(--dunia-success); --enriched-success-dark:color-mix(in oklab,var(--dunia-success)80%,#000000); --enriched-danger:var(--dunia-error); --enriched-danger-dark:color-mix(in oklab,var(--dunia-error)80%,#000000); --enriched-warning:var(--dunia-warning); --enriched-warning-dark:color-mix(in oklab,var(--dunia-warning)80%,#000000); --enriched-info:var(--dunia-info); --enriched-info-dark:color-mix(in oklab,var(--dunia-info)80%,#000000); --enriched-gradient-primary:linear-gradient(135deg,var(--dunia-ember)0%,var(--dunia-indigo)100%); --enriched-gradient-secondary:linear-gradient(135deg,var(--dunia-palm)0%,var(--dunia-indigo)100%); --enriched-gradient-accent:linear-gradient(135deg,var(--dunia-sun)0%,var(--dunia-ember)100%); --enriched-gradient-success:linear-gradient(135deg,var(--dunia-success)0%,color-mix(in oklab,var(--dunia-success)80%,#000000)100%); --enriched-gradient-danger:linear-gradient(135deg,var(--dunia-error)0%,color-mix(in oklab,var(--dunia-error)80%,#000000)100%); --enriched-gradient-warning:linear-gradient(135deg,var(--dunia-warning)0%,color-mix(in oklab,var(--dunia-warning)80%,#000000)100%); --enriched-gradient-info:linear-gradient(135deg,var(--dunia-info)0%,color-mix(in oklab,var(--dunia-info)80%,#000000)100%); --enriched-shadow-primary:0 4px 12px rgba(249,115,53,0.32); --enriched-shadow:rgba(0,0,0,0.18); --enriched-shadow-light:rgba(0,0,0,0.1); --enriched-shadow-dark:rgba(0,0,0,0.28); --enriched-focus-ring:color-mix(in oklab,var(--dunia-ember)35%,transparent); --table-header-bg:color-mix(in oklab,var(--dunia-indigo)14%,transparent); --table-row-odd:rgba(255,255,255,0.75); --table-row-even:rgba(255,255,255,0.6); --table-row-hover:color-mix(in oklab,var(--dunia-ember)12%,transparent); --table-border:rgba(17,24,39,0.06); --table-border-dark:rgba(17,24,39,0.18); --enriched-font-primary:"Poppins",system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; --enriched-font-secondary:"Inter",system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; } /** === Evep Theme Override === **/ :root { --evep-bg: #faf8f6; --evep-surface: rgba(255, 255, 255, .85); --evep-surface-full: rgba(255, 255, 255, 1); --evep-surface-dark: rgba(255, 255, 255, .975); --evep-surface-light: rgba(255, 255, 255, .65); --evep-primary: #2563eb; --evep-primary-light: #60a5fa; --evep-primary-dark: #1e3a8a; --evep-secondary: #60ff6c; --evep-secondary-light: #a8ffae; --evep-secondary-dark: #00ef12; --evep-accent: #d4af37; --evep-accent-light: #e6c766; --evep-accent-dark: #a67c00; --evep-text: #3a2f28; --evep-text-light: #7d6f65; --evep-text-lighter: #9b8f86; --evep-text-dark: #2a2019; --evep-text-darker: #1f1812; --evep-border: rgba(0, 0, 0, .12); --evep-border-light: rgba(0, 0, 0, .06); --evep-border-dark: rgba(0, 0, 0, .2); --evep-success: #2e7d32; --evep-success-dark: #1b5e20; --evep-danger: #c62828; --evep-danger-dark: #8e0000; --evep-warning: #ff9800; --evep-warning-dark: #e65100; --evep-info: #0288d1; --evep-info-dark: #01579b; --evep-glass-border: 1px solid rgba(255, 255, 255, .18); --evep-glass-shadow: 0 8px 32px 0 rgba(31, 38, 135, .15); } [data-theme="evep"] { --enriched-bg: var(--evep-bg); --enriched-surface: var(--evep-surface); --enriched-surface-full: var(--evep-surface-full); --enriched-surface-dark: var(--evep-surface-dark); --enriched-surface-light: var(--evep-surface-light); --enriched-border: var(--evep-border); --enriched-border-light: var(--evep-border-light); --enriched-border-dark: var(--evep-border-dark); --enriched-text: var(--evep-text); --enriched-text-light: var(--evep-text-light); --enriched-text-lighter: var(--evep-text-lighter); --enriched-text-dark: var(--evep-text-dark); --enriched-text-darker: var(--evep-text-darker); --enriched-primary: var(--evep-primary); --enriched-primary-light: var(--evep-primary-light); --enriched-primary-dark: var(--evep-primary-dark); --enriched-secondary: var(--evep-secondary); --enriched-secondary-light: var(--evep-secondary-light); --enriched-secondary-dark: var(--evep-secondary-dark); --enriched-accent: var(--evep-accent); --enriched-accent-light: var(--evep-accent-light); --enriched-accent-dark: var(--evep-accent-dark); --enriched-success: var(--evep-success); --enriched-success-dark: var(--evep-success-dark); --enriched-danger: var(--evep-danger); --enriched-danger-dark: var(--evep-danger-dark); --enriched-warning: var(--evep-warning); --enriched-warning-dark: var(--evep-warning-dark); --enriched-info: var(--evep-info); --enriched-info-dark: var(--evep-info-dark); --enriched-glass-border: var(--evep-glass-border); --enriched-glass-shadow: var(--evep-glass-shadow); --enriched-gradient-primary: linear-gradient(135deg, var(--evep-primary) 0%, var(--evep-primary-dark) 100%); --enriched-gradient-secondary: linear-gradient(135deg, var(--evep-secondary) 0%, var(--evep-secondary-dark) 100%); --enriched-gradient-accent: linear-gradient(135deg, var(--evep-accent) 0%, var(--evep-accent-dark) 100%); --enriched-gradient-success: linear-gradient(135deg, var(--evep-success) 0%, var(--evep-success-dark) 100%); --enriched-gradient-danger: linear-gradient(135deg, var(--evep-danger) 0%, var(--evep-danger-dark) 100%); --enriched-gradient-warning: linear-gradient(135deg, var(--evep-warning) 0%, var(--evep-warning-dark) 100%); --enriched-gradient-info: linear-gradient(135deg, var(--evep-info) 0%, var(--evep-info-dark) 100%); --enriched-shadow-primary: 0 4px 12px rgba(37, 99, 235, .3); } *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } a { text-decoration: none; } .enriched-a-reset{ color:inherit; text-decoration:none; background:none; border:0; outline:0; cursor:pointer; padding:0; margin:0; font:inherit; } .enriched-no-border { border-radius: 0 !important; } .enriched-a-reset:hover, .enriched-a-reset:focus{ color:inherit; text-decoration:none; outline:0; } .enriched-a-reset:active{ opacity:.85; } body { font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; line-height: 1.6; color: var(--enriched-text); background-color: var(--enriched-bg); margin: 0; padding: 0; min-height: 100vh; background-image: radial-gradient(at 47% 33%, rgba(72, 149, 239, 0.15) 0, transparent 59%), radial-gradient(at 82% 65%, rgba(247, 37, 133, 0.15) 0, transparent 55%); transition: var(--enriched-transition); } .pointer { cursor: pointer; } .enriched-main-container { max-width: 1400px; margin: 0 auto; padding: var(--enriched-spacing-xl); } .enriched-main-container.full-centered { display: flex; align-items: center; justify-content: center; min-height: 100dvh; padding: var(--enriched-spacing-xxxl) var(--enriched-spacing-xl); } .enriched-main-container.large { padding: var(--enriched-spacing-xxxl) var(--enriched-spacing-xl); } .enriched-main-container.medium { padding: var(--enriched-spacing-lg) var(--enriched-spacing-nm); } .enriched-main-container.small { padding: var(--enriched-spacing-md) var(--enriched-spacing-md); } .enriched-main-container.zero { padding: 0; } .enriched-main-container.full-centered { display: flex; align-items: center; justify-content: center; min-height: 100dvh; padding: var(--enriched-spacing-xxxl) var(--enriched-spacing-xl); } @media(max-width:768px) { .enriched-main-container { padding: var(--enriched-spacing-md); } .enriched-main-container.large { padding: var(--enriched-spacing-xl) var(--enriched-spacing-lg); } .enriched-main-container.medium { padding: var(--enriched-spacing-nm) var(--enriched-spacing-md); } .enriched-main-container.small { padding: var(--enriched-spacing-sm); } } .enriched-main-container.flat{ padding-top:0; padding-bottom:0; } @media(max-width:768px){ .enriched-main-container.flat{ padding-top:0; padding-bottom:0; } } .overflow-visible { overflow: visible !important; } .overflow-hidden { overflow: hidden !important; } :root { --aria-tip-bg: #111; --aria-tip-fg: #fff; --aria-tip-r: 999px; --aria-tip-pad: 6px 10px; --aria-tip-shadow: 0 6px 18px rgba(0, 0, 0, .18), 0 2px 6px rgba(0, 0, 0, .12); --aria-tip-fs: 12px; } .aria-tip { position: fixed; z-index: 9999; background: var(--aria-tip-bg); color: var(--aria-tip-fg); border-radius: var(--aria-tip-r); padding: var(--aria-tip-pad); box-shadow: var(--aria-tip-shadow); font-size: var(--aria-tip-fs); line-height: 1.35; white-space: nowrap; display: none; opacity: 0; transform: translateY(-2px); transition: opacity .12s ease, transform .12s ease; pointer-events: none; } img { font-size: 0.1px; color: transparent; } pre { overflow-x: auto; white-space: pre; max-width: 100%; } /** **/ /** ENRICHED ROOT DESIGNER **/ /** **/ /** **/ /** ENRICHED HEADER DESIGNER **/ /** **/ .enriched-gbase-header { position: sticky; top: 0; z-index: calc(var(--enriched-z-overlay) - 10); backdrop-filter: blur(var(--enriched-glass-blur)); background: linear-gradient(180deg, rgba(255, 255, 255, var(--enriched-glass-alpha)), rgba(255, 255, 255, 0)); border-bottom: var(--enriched-glass-border); box-shadow: var(--enriched-glass-shadow); } [data-theme="dark"] .enriched-gbase-header { background: linear-gradient(180deg, rgba(18, 24, 38, .6), rgba(18, 24, 38, 0)); } .enriched-gbase-header.is-scrolled { background: var(--enriched-surface); box-shadow: 0 6px 24px var(--enriched-shadow-dark); } .enriched-gbase-header-inner { max-width: 1400px; margin: 0 auto; padding: calc(var(--enriched-spacing-sm) + 2px) var(--enriched-spacing-md); display: flex; align-items: center; gap: var(--enriched-spacing-md); } .enriched-gbase-brand{display:flex;align-items:center;gap:.6rem;text-decoration:none;color:var(--enriched-text);} .enriched-gbase-brand-text{font-weight:700;font-size:1.05rem;} .enriched-gbase-brand .enriched-brand-square{display:inline-grid;place-items:center;width:2.1rem;height:2.1rem;border-radius:14px;background:linear-gradient(135deg,var(--enriched-primary),var(--enriched-success));color:#fff;font-weight:800;letter-spacing:.5px;} .enriched-brand-full{font-weight:700;} .enriched-gbase-brand .enriched-brand-square.is-img{display:inline-block;background:none;padding:0;width:2.1rem;height:2.1rem;border-radius:14px;vertical-align:middle;object-fit:contain;} .enriched-brand-full.is-img{display:none;height:1.8rem;min-width:5rem;vertical-align:middle;object-fit:contain;} .enriched-gbase-brand .enriched-brand-square.is-img~.enriched-gbase-brand-text{display:none;} .enriched-gbase-nav { margin-left: auto; display: flex; gap: .25rem; align-items: center; position: relative; z-index: 1100; } .enriched-gbase-link { --pad: 0.55rem; position: relative; padding: .5rem calc(var(--pad) + .25rem); border-radius: var(--enriched-border-radius-o); text-decoration: none; color: var(--enriched-text-light); font-weight: 600; letter-spacing: .2px; transition: transform .2s ease, background .2s ease, color .2s ease; white-space: nowrap; } .enriched-gbase-link:hover { color: var(--enriched-text); transform: translateY(-1px); background: rgba(67, 97, 238, .07); } .enriched-gbase-link::after { content: ""; position: absolute; left: 12%; right: 12%; bottom: .35rem; height: 3px; border-radius: 3px; background: transparent; transition: all .25s ease; } .enriched-gbase-link.active { color: var(--enriched-text); background: rgba(67, 97, 238, .10); } .enriched-gbase-dropdown { position: relative; display: inline-block; } .enriched-gbase-dropdown-menu { position: absolute; top: 165%; right: 0; margin-top: 0.5rem; padding: 0.5rem; background: var(--enriched-surface); border: var(--enriched-glass-border); border-radius: 12px; box-shadow: var(--enriched-shadow-xl); min-width: 180px; opacity: 0; visibility: hidden; transform: translateY(-10px); transition: all 0.2s ease; z-index: 1000; } .enriched-gbase-dropdown:hover .enriched-gbase-dropdown-menu, .enriched-gbase-dropdown:focus-within .enriched-gbase-dropdown-menu { opacity: 1; visibility: visible; transform: translateY(0); } .enriched-gbase-dropdown-item { display: block; padding: 0.6rem 1rem; border-radius: 8px; text-decoration: none; color: var(--enriched-text); transition: all 0.2s ease; font-weight: 500; box-shadow: var(--enriched-shadow-md); } .enriched-gbase-dropdown-item:hover { background: rgba(67, 97, 238, 0.1); color: var(--enriched-primary); } .enriched-gbase-dropdown-item.active { background: rgba(67, 97, 238, 0.15); color: var(--enriched-primary); font-weight: 600; } .enriched-gbase-dropdown-item.inverse { display: block; padding: .6rem 1rem; border-radius: 8px; text-decoration: none; color: #fff; background: var(--enriched-primary); transition: all .2s ease; font-weight: 500; box-shadow: var(--enriched-shadow-md); } .enriched-gbase-dropdown-item.inverse:hover { background: color-mix(in oklab, var(--enriched-primary) 85%, black 15%); color: #fff; } .enriched-gbase-dropdown-item.inverse:focus-visible { outline: 0; box-shadow: var(--enriched-shadow-md), 0 0 0 3px var(--enriched-focus-ring); } .enriched-gbase-dropdown-item.inverse.active { background: var(--enriched-primary-dark); color: #fff; font-weight: 600; } .enriched-gbase-actions { display: flex; align-items: center; gap: var(--enriched-spacing-md); margin-left: var(--enriched-spacing-xs); } .enriched-gbase-button-toggle { width: 2.25rem; height: 2.25rem; border-radius: 12px; border: none; background: var(--enriched-surface-light); box-shadow: var(--enriched-shadow-md); display: grid; place-items: center; color: var(--enriched-primary); cursor: pointer; transition: transform .15s ease, box-shadow .2s ease; text-decoration: none; } .enriched-gbase-button-toggle:hover { transform: translateY(-1px); box-shadow: var(--enriched-shadow-lg); } .enriched-gbase-burger { display: none; } .enriched-gbase-burger span { display: block; } .enriched-gbase-header .enriched-gbase-burger { touch-action: manipulation; } .enriched-gbase-header.is-open .enriched-gbase-burger i::before { content: "\f00d"; } .enriched-gbase-nav .overflow-inline { display: none; } .enriched-gbase-dropdown-sep { height: 1px; background: var(--enriched-border); } @media (max-width:900px) { .enriched-gbase-nav { position: fixed; top: 80px; right: 80px; left: 80px; display: grid; gap: .4rem; padding: var(--enriched-spacing-md); background: var(--enriched-surface); border: var(--enriched-glass-border); box-shadow: var(--enriched-shadow-xl); border-radius: 18px; transform: translateY(-140%); opacity: 0; pointer-events: none; transition: transform .25s ease, opacity .2s ease; } .enriched-gbase-dropdown { display: contents; } .enriched-gbase-dropdown-toggle { display: none; } .enriched-gbase-dropdown-menu { position: static; opacity: 1; visibility: visible; transform: none; box-shadow: none; border: none; background: transparent; margin: 0; padding: 0; display: grid; gap: 0.4rem; } .enriched-gbase-header.is-open .enriched-gbase-nav { transform: translateY(0); opacity: 1; pointer-events: auto; } .enriched-gbase-burger { display: block; } .enriched-gbase-actions { margin-left: auto; } .enriched-gbase-nav .overflow-inline { display: inline-block; } #enriched-gbase-dropdown { display: none; } } @media(min-width:901px){ .enriched-gbase-brand .enriched-brand-square.is-img{display:none;} .enriched-brand-full.is-img{display:inline-block;} .enriched-gbase-brand .enriched-brand-full.is-img~.enriched-gbase-brand-text{display:none;} } /** **/ /** ENRICHED HEADER DESIGNER **/ /** **/ /** **/ /** ENRICHED BASE DESIGNER **/ /** **/ .ei-overflow-visible { overflow: visible !important; } .ei-overflow-hidden { overflow: hidden !important; } .e-cursor-auto{cursor:auto;} .ei-cursor-auto{cursor:auto!important;} .e-cursor-default{cursor:default;} .ei-cursor-default{cursor:default!important;} .e-cursor-none{cursor:none;} .ei-cursor-none{cursor:none!important;} .e-cursor-pointer{cursor:pointer;} .ei-cursor-pointer{cursor:pointer!important;} .e-cursor-help{cursor:help;} .ei-cursor-help{cursor:help!important;} .e-cursor-wait{cursor:wait;} .ei-cursor-wait{cursor:wait!important;} .e-cursor-progress{cursor:progress;} .ei-cursor-progress{cursor:progress!important;} .e-cursor-text{cursor:text;} .ei-cursor-text{cursor:text!important;} .e-cursor-vertical-text{cursor:vertical-text;} .ei-cursor-vertical-text{cursor:vertical-text!important;} .e-cursor-move{cursor:move;} .ei-cursor-move{cursor:move!important;} .e-cursor-crosshair{cursor:crosshair;} .ei-cursor-crosshair{cursor:crosshair!important;} .e-cursor-cell{cursor:cell;} .ei-cursor-cell{cursor:cell!important;} .e-cursor-context-menu{cursor:context-menu;} .ei-cursor-context-menu{cursor:context-menu!important;} .e-cursor-alias{cursor:alias;} .ei-cursor-alias{cursor:alias!important;} .e-cursor-copy{cursor:copy;} .ei-cursor-copy{cursor:copy!important;} .e-cursor-no-drop{cursor:no-drop;} .ei-cursor-no-drop{cursor:no-drop!important;} .e-cursor-not-allowed{cursor:not-allowed;} .ei-cursor-not-allowed{cursor:not-allowed!important;} .e-cursor-grab{cursor:grab;} .ei-cursor-grab{cursor:grab!important;} .e-cursor-grabbing{cursor:grabbing;} .ei-cursor-grabbing{cursor:grabbing!important;} .e-cursor-all-scroll{cursor:all-scroll;} .ei-cursor-all-scroll{cursor:all-scroll!important;} .e-cursor-col-resize{cursor:col-resize;} .ei-cursor-col-resize{cursor:col-resize!important;} .e-cursor-row-resize{cursor:row-resize;} .ei-cursor-row-resize{cursor:row-resize!important;} .e-cursor-n-resize{cursor:n-resize;} .ei-cursor-n-resize{cursor:n-resize!important;} .e-cursor-e-resize{cursor:e-resize;} .ei-cursor-e-resize{cursor:e-resize!important;} .e-cursor-s-resize{cursor:s-resize;} .ei-cursor-s-resize{cursor:s-resize!important;} .e-cursor-w-resize{cursor:w-resize;} .ei-cursor-w-resize{cursor:w-resize!important;} .e-cursor-ne-resize{cursor:ne-resize;} .ei-cursor-ne-resize{cursor:ne-resize!important;} .e-cursor-nw-resize{cursor:nw-resize;} .ei-cursor-nw-resize{cursor:nw-resize!important;} .e-cursor-se-resize{cursor:se-resize;} .ei-cursor-se-resize{cursor:se-resize!important;} .e-cursor-sw-resize{cursor:sw-resize;} .ei-cursor-sw-resize{cursor:sw-resize!important;} .e-cursor-ew-resize{cursor:ew-resize;} .ei-cursor-ew-resize{cursor:ew-resize!important;} .e-cursor-ns-resize{cursor:ns-resize;} .ei-cursor-ns-resize{cursor:ns-resize!important;} .e-cursor-nesw-resize{cursor:nesw-resize;} .ei-cursor-nesw-resize{cursor:nesw-resize!important;} .e-cursor-nwse-resize{cursor:nwse-resize;} .ei-cursor-nwse-resize{cursor:nwse-resize!important;} .e-cursor-zoom-in{cursor:zoom-in;} .ei-cursor-zoom-in{cursor:zoom-in!important;} .e-cursor-zoom-out{cursor:zoom-out;} .ei-cursor-zoom-out{cursor:zoom-out!important;} .e-cursor-pointer-fine{cursor:pointer;cursor:hand;} .ei-cursor-pointer-fine{cursor:pointer!important;cursor:hand!important;} .e-cursor-disabled{cursor:not-allowed;pointer-events:none;opacity:.65;} .ei-cursor-disabled{cursor:not-allowed!important;pointer-events:none!important;opacity:.65!important;} .enriched-bg-transparent{background:var(--enriched-section-bg-transparent);} .enriched-bg-surface{background:var(--enriched-section-bg-surface);} .enriched-bg-soft{background:var(--enriched-section-bg-soft);} .enriched-bg-muted{background:var(--enriched-section-bg-muted);} .enriched-bg-subtle{background:var(--enriched-section-bg-subtle);} .enriched-bg-elevated{background:var(--enriched-section-bg-elevated);} .enriched-bg-inverse{background:var(--enriched-section-bg-inverse);color:var(--enriched-text-inverse);} .enriched-bg-tint-primary{background:var(--enriched-section-bg-tint-primary);} .enriched-bg-tint-secondary{background:var(--enriched-section-bg-tint-secondary);} .enriched-bg-tint-accent{background:var(--enriched-section-bg-tint-accent);} .enriched-bg-tint-success{background:var(--enriched-section-bg-tint-success);} .enriched-bg-tint-warning{background:var(--enriched-section-bg-tint-warning);} .enriched-bg-tint-danger{background:var(--enriched-section-bg-tint-danger);} .enriched-bg-tint-white{background:var(--enriched-section-bg-tint-white);} .enriched-bg-tint-black{background:var(--enriched-section-bg-tint-black);} .enriched-bg-tint-gray{background:var(--enriched-section-bg-tint-gray);} .enriched-bg-tint-yellow{background:var(--enriched-section-bg-tint-yellow);} .enriched-bg-tint-amber{background:var(--enriched-section-bg-tint-amber);} .enriched-bg-tint-orange{background:var(--enriched-section-bg-tint-orange);} .enriched-bg-tint-red{background:var(--enriched-section-bg-tint-red);} .enriched-bg-tint-pink{background:var(--enriched-section-bg-tint-pink);} .enriched-bg-tint-purple{background:var(--enriched-section-bg-tint-purple);} .enriched-bg-tint-indigo{background:var(--enriched-section-bg-tint-indigo);} .enriched-bg-tint-blue{background:var(--enriched-section-bg-tint-blue);} .enriched-bg-tint-sky{background:var(--enriched-section-bg-tint-sky);} .enriched-bg-tint-cyan{background:var(--enriched-section-bg-tint-cyan);} .enriched-bg-tint-teal{background:var(--enriched-section-bg-tint-teal);} .enriched-bg-tint-green{background:var(--enriched-section-bg-tint-green);} .enriched-bg-white{background:var(--enriched-color-white);color:var(--enriched-text);} .enriched-bg-black{background:var(--enriched-color-black);color:var(--enriched-text-inverse);} .enriched-bg-yellow{background:var(--enriched-color-yellow);color:var(--enriched-text-dark);} .enriched-bg-red{background:var(--enriched-color-red);color:var(--enriched-text-inverse);} .enriched-bg-blue{background:var(--enriched-color-blue);color:var(--enriched-text-inverse);} .enriched-bg-green{background:var(--enriched-color-green);color:var(--enriched-text-inverse);} .enriched-text-white{color:var(--enriched-color-white);} .enriched-text-black{color:var(--enriched-color-black);} .enriched-text-yellow{color:var(--enriched-color-yellow);} .enriched-text-red{color:var(--enriched-color-red);} .enriched-text-blue{color:var(--enriched-color-blue);} .enriched-text-green{color:var(--enriched-color-green);} .enriched-bg-grad-primary{background:var(--enriched-bg-grad-primary);} .enriched-bg-grad-secondary{background:var(--enriched-bg-grad-secondary);} .enriched-bg-grad-accent{background:var(--enriched-bg-grad-accent);} .enriched-bg-grad-success{background:var(--enriched-bg-grad-success);} .enriched-bg-grad-warning{background:var(--enriched-bg-grad-warning);} .enriched-bg-grad-danger{background:var(--enriched-bg-grad-danger);} .enriched-bg-grad-white{background:var(--enriched-bg-grad-white);} .enriched-bg-grad-black{background:var(--enriched-bg-grad-black);color:var(--enriched-text-inverse);} .enriched-bg-grad-gray{background:var(--enriched-bg-grad-gray);} .enriched-bg-grad-yellow{background:var(--enriched-bg-grad-yellow);} .enriched-bg-grad-amber{background:var(--enriched-bg-grad-amber);} .enriched-bg-grad-orange{background:var(--enriched-bg-grad-orange);} .enriched-bg-grad-red{background:var(--enriched-bg-grad-red);} .enriched-bg-grad-pink{background:var(--enriched-bg-grad-pink);} .enriched-bg-grad-purple{background:var(--enriched-bg-grad-purple);} .enriched-bg-grad-indigo{background:var(--enriched-bg-grad-indigo);} .enriched-bg-grad-blue{background:var(--enriched-bg-grad-blue);} .enriched-bg-grad-sky{background:var(--enriched-bg-grad-sky);} .enriched-bg-grad-cyan{background:var(--enriched-bg-grad-cyan);} .enriched-bg-grad-teal{background:var(--enriched-bg-grad-teal);} .enriched-bg-grad-green{background:var(--enriched-bg-grad-green);} /** **/ /** ENRICHED BASE DESIGNER **/ /** **/ /** **/ /** ENRICHED INPUT DESIGNER **/ /** **/ :root { --e-field-h: 54px; --e-border-w: 2px; } .enriched-form-container { max-width: 1400px; margin: 0 auto; padding: var(--enriched-spacing-xl); } .enriched-form-column-flex { display: flex; flex-direction: column; gap: var(--enriched-spacing-xl); } @media(max-width:1024px) { .enriched-form-grid { grid-template-columns: 1fr; } } .enriched-form-grid.g-md { gap: var(--enriched-spacing-md); } .enriched-form-grid.g-sm { gap: var(--enriched-spacing-sm); } .enriched-form-grid.g-lg { gap: var(--enriched-spacing-lg); } .enriched-form-section { background: var(--enriched-surface); backdrop-filter: blur(var(--enriched-glass-blur)); border-radius: var(--enriched-border-radius-xl); box-shadow: var(--enriched-glass-shadow); border: var(--enriched-glass-border); padding: var(--enriched-spacing-xl); transition: var(--enriched-transition); } .enriched-form-section.top { margin-top: var(--enriched-spacing-lg); } .enriched-form-section.bottom { margin-bottom: var(--enriched-spacing-lg); } .enriched-special-section-title { position: relative; cursor: default; gap: var(--enriched-spacing-lg); display: flex; align-items: center; margin: 0 0 var(--enriched-spacing-sm) 0; font-weight: 700; letter-spacing: .2px; color: var(--enriched-primary); line-height: 1.2; } .enriched-special-section-title .enriched-special-title-text { display: inline-flex; align-items: center; gap: var(--enriched-spacing-sm); } .enriched-special-section-title.et-small { font-size: 1rem; } .enriched-special-section-title.normal { font-size: 1.25rem; } .enriched-special-section-title.et-medium { font-size: 1.5rem; } .enriched-special-section-title.et-large { font-size: 1.875rem; } .enriched-special-section-groupset { margin-bottom: var(--enriched-spacing-xl); } .enriched-groupset-desc { font-size: .95rem; line-height: 1.55; color: var(--enriched-text-muted, #6b7280); margin-top: var(--enriched-spacing-sm); } .enriched-special-section-groupset.left .enriched-groupset-desc { text-align: left; } .enriched-special-section-groupset.center .enriched-groupset-desc { text-align: center; } .enriched-special-section-groupset.right .enriched-groupset-desc { text-align: right; } .enriched-special-section-title.et-small+.enriched-groupset-desc { font-size: .9rem; } .enriched-special-section-title.et-medium+.enriched-groupset-desc { font-size: 1rem; } .enriched-special-section-title.et-large+.enriched-groupset-desc { font-size: 1.05rem; } .enriched-special-section-title::after { content: ""; position: absolute; bottom: -4px; height: 3px; width: var(--enriched-underline-w, 0px); background: linear-gradient(to right, var(--enriched-primary), var(--enriched-accent)); border-radius: 2px; transition: width .4s ease, left .4s ease, right .4s ease, transform .4s ease; transform: translateZ(0); } .enriched-special-section-title.left { justify-content: flex-start; text-align: left; } .enriched-special-section-title.center { justify-content: center; text-align: center; } .enriched-special-section-title.right { justify-content: flex-end; text-align: right; } .enriched-special-section-title.left::after { left: var(--enriched-underline-x, 0px); right: auto; transform: translateZ(0); } .enriched-special-section-title.left:hover::after { left: 0; width: 100%; } .enriched-special-section-title.center::after { left: var(--enriched-underline-cx, 50%); right: auto; transform: translateX(-50%); } .enriched-special-section-title.center:hover::after { left: 50%; width: 100%; transform: translateX(-50%); } .enriched-special-section-title.right::after { right: var(--enriched-underline-r, 0px); left: auto; transform: translateZ(0); } .enriched-special-section-title.right:hover::after { right: 0; width: 100%; } .enriched-form-group { width: 100%; position: relative; } .enriched-form-group.zero, .enriched-form-group:last-child { margin-bottom: 0; } .enriched-form-label { display: block; margin-bottom: var(--enriched-spacing-sm); font-weight: 600; color: var(--enriched-text); font-size: 0.95rem; } #json-editor, .enriched-form-range-container, .enriched-form-input, .enriched-form-select, .enriched-form-textarea { width: 100%; padding: var(--enriched-spacing-md); border: 2px solid var(--enriched-secondary); border-radius: var(--enriched-border-radius-md); background: var(--enriched-surface-dark); color: var(--enriched-text); font-size: 0.95rem; transition: var(--enriched-transition); } #json-editor:focus, .enriched-form-range-container:focus, .enriched-form-input:focus, .enriched-form-select:focus, .enriched-form-textarea:focus { outline: none; border-color: var(--enriched-primary); box-shadow: 0 0 0 3px rgba(67, 97, 238, 0.2); } #json-editor:hover, .enriched-form-range-container:hover, .enriched-form-input:hover, .enriched-form-select:hover, .enriched-form-textarea:hover { border-color: var(--enriched-primary-light); } #json-editor:disabled, .enriched-form-range-container:disabled, .enriched-form-input:disabled, .enriched-form-select:disabled, .enriched-form-textarea:disabled, #json-editor[disabled], .enriched-form-range-container[disabled], .enriched-form-input[disabled], .enriched-form-select[disabled], .enriched-form-textarea[disabled] { background-color: var(--enriched-surface-muted, #f5f5f5); color: var(--enriched-text-muted, #888); border-color: var(--enriched-border-muted, #ddd); cursor: not-allowed; opacity: 0.65; } #json-editor[disabled] .ace_content { opacity: 0.6; pointer-events: none; } .enriched-json-wrap { margin-top: var(--enriched-spacing-lg); } .enriched-form-textarea { overflow-y: hidden; resize: vertical; } .enriched-form-select { -webkit-appearance: none; -moz-appearance: none; appearance: none; background-image: url("data:image/svg+xml;utf8,"); background-repeat: no-repeat; background-position: right var(--enriched-spacing-md) center; background-size: 16px; } [data-theme="dark"] .enriched-form-select { background-image: url("data:image/svg+xml;utf8,"); } .enriched-form-toggle-password { cursor: pointer; } .enriched-form-input-icon { position: relative; } .enriched-form-input-icon i { position: absolute; left: var(--enriched-spacing-md); top: 50%; transform: translateY(-50%); color: var(--enriched-text-lighter); z-index: 1; } .enriched-form-input-icon .enriched-form-input { padding-left: calc(var(--enriched-spacing-md) * 3); } .enriched-form-success .enriched-form-input { border-color: var(--enriched-success); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cpath fill='none' d='M0 0h24v24H0z'/%3E%3Cpath d='M10 15.172l9.192-9.193 1.415 1.414L10 18l-6.364-6.364 1.414-1.414z' fill='%234cc9f0'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right var(--enriched-spacing-md) center; background-size: 20px; } .enriched-form-error .enriched-form-input { border-color: var(--enriched-danger); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cpath fill='none' d='M0 0h24v24H0z'/%3E%3Cpath d='M12 22C6.477 22 2 17.523 2 12S6.477 2 12 2s10 4.477 10 10-4.477 10-10 10zm-1-7v2h2v-2h-2zm0-8v6h2V7h-2z' fill='%23f72585'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right var(--enriched-spacing-md) center; background-size: 20px; } .enriched-form-hint { font-size: 0.85rem; color: var(--enriched-text-lighter); margin-top: var(--enriched-spacing-sm); display: flex; align-items: center; gap: var(--enriched-spacing-md); } .enriched-form-hint.container { box-shadow: var(--enriched-shadow-lg); border: var(--enriched-glass-border); padding: var(--enriched-spacing-md); border-radius: var(--enriched-border-radius-xl); } .enriched-form-hint.center { text-align: center; justify-content: center; } .enriched-error-wrapper { background: var(--enriched-danger-light); border: 1px solid var(--enriched-danger); border-radius: var(--enriched-border-radius-md); padding: var(--enriched-spacing-md); margin-top: var(--enriched-spacing-md); box-shadow: var(--enriched-shadow-sm); } .enriched-form-error-message { color: var(--enriched-danger); font-size: 0.85rem; margin-top: var(--enriched-spacing-sm); display: flex; align-items: center; gap: var(--enriched-spacing-md); } .next-is-float { margin-bottom: var(--enriched-spacing-sm) !important; } .enriched-form-float { --enriched-float-label-bg:var(--enriched-surface-dark); --enriched-float-label-fg:var(--enriched-text-lighter); --enriched-float-label-fg-active:var(--enriched-primary); --enriched-float-label-fg-error:var(--enriched-danger); --enriched-float-label-fg-success:var(--enriched-success); position: relative; margin-top: var(--enriched-space-2) !important; } .enriched-form-float.float-bg-surface{ --enriched-float-label-bg:var(--enriched-surface); } .enriched-form-float{ --enriched-float-label-bg:var(--enriched-surface-dark); --enriched-float-label-fg:var(--enriched-text-lighter); --enriched-float-label-fg-active:var(--enriched-primary); --enriched-float-label-fg-error:var(--enriched-danger); --enriched-float-label-fg-success:var(--enriched-success); position:relative; margin-top:var(--enriched-space-2) !important; } .enriched-form-float.float-bg-surface{ --enriched-float-label-bg:var(--enriched-surface); } .enriched-form-float-label{ z-index:5; position:absolute; top:0; left:var(--enriched-spacing-sm); transform:translateY(-50%); font-size:0.8rem; color:var(--enriched-text-lighter); pointer-events:none; transition:var(--enriched-transition); background:var(--enriched-surface-dark); padding:0 6px; font-weight:600; border-radius:var(--enriched-border-radius-md); cursor: default; } .enriched-form-float .enriched-form-float-label, .enriched-form-float .enriched-form-input:focus+.enriched-form-float-label, .enriched-form-float .enriched-form-select:focus+.enriched-form-float-label, .enriched-form-float .enriched-form-textarea:focus+.enriched-form-float-label, .enriched-form-float .enriched-form-select:not([value=""])+.enriched-form-float-label, .enriched-form-float .enriched-form-input:not(:placeholder-shown)+.enriched-form-float-label, .enriched-form-float .enriched-form-textarea:not(:placeholder-shown)+.enriched-form-float-label{ background:var(--enriched-float-label-bg); color:var(--enriched-float-label-fg) !important; } .enriched-form-float:focus-within .enriched-form-float-label{ color:var(--enriched-float-label-fg-active); } .enriched-form-float:has(.enriched-float-state[data-has-value="1"]) .enriched-form-float-label{ color:var(--enriched-float-label-fg-active); } .enriched-form-float:has(.select2-container--default .select2-selection__choice) .enriched-form-float-label{ color:var(--enriched-float-label-fg-active); } .enriched-form-float:has(.select2-selection__rendered:not(:has(.select2-selection__placeholder))) .enriched-form-float-label{ color:var(--enriched-float-label-fg-active); } .enriched-form-float:has(.tagify__tag) .enriched-form-float-label{ color:var(--enriched-float-label-fg-active); } .enriched-form-float:has(.enriched-form-file-previews.to-show) .enriched-form-float-label{ color:var(--enriched-float-label-fg-active); } .enriched-form-float.input-error .enriched-form-float-label{ color:var(--enriched-float-label-fg-error); } .enriched-form-float.input-success .enriched-form-float-label{ color:var(--enriched-float-label-fg-success); } .enriched-e-accordion .enriched-form-float { margin-bottom: 0; } .enriched-e-accordion-container { padding: var(--enriched-spacing-nm); border-radius: var(--enriched-border-radius-lg); background: var(--enriched-surface); backdrop-filter: blur(var(--enriched-glass-blur)); -webkit-backdrop-filter: blur(var(--enriched-glass-blur)); border: var(--enriched-glass-border); box-shadow: var(--enriched-glass-shadow); overflow: hidden; transition: all 0.3s ease; } .enriched-form-checkbox-group, .enriched-form-radio-group { display: flex; flex-direction: column; gap: var(--enriched-spacing-sm); } .enriched-form-checkbox-item, .enriched-form-radio-item { display: flex; align-items: center; gap: var(--enriched-spacing-sm); position: relative; } .enriched-form-checkbox-item input[type="checkbox"], .enriched-form-radio-item input[type="radio"] { opacity: 0; position: absolute; width: auto; margin: 0; } .enriched-form-checkbox-item label, .enriched-form-radio-item label { display: flex; align-items: center; gap: var(--enriched-spacing-sm); padding: var(--enriched-spacing-sm) var(--enriched-spacing-md); border: 2px solid var(--enriched-secondary); border-radius: var(--enriched-border-radius-md); background: var(--enriched-surface); width: 100%; transition: var(--enriched-transition); cursor: pointer; font-weight: normal; margin-bottom: 0; } .enriched-form-checkbox-item label:hover, .enriched-form-radio-item label:hover { border-color: var(--enriched-primary-light); } .enriched-form-checkbox-item label::before, .enriched-form-radio-item label::before { content: ""; display: inline-block; width: 20px; height: 20px; border: 2px solid var(--enriched-secondary); background: var(--enriched-surface); transition: var(--enriched-transition); } .enriched-form-checkbox-item label::before { border-radius: var(--enriched-border-radius-sm); } .enriched-form-radio-item label::before { border-radius: 50%; } .enriched-form-checkbox-item input[type="checkbox"]:checked+label, .enriched-form-radio-item input[type="radio"]:checked+label { border-color: var(--enriched-primary); background-color: rgba(67, 97, 238, 0.1); } .enriched-form-checkbox-item input[type="checkbox"]:checked+label::before { background-color: var(--enriched-primary); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cpath fill='none' d='M0 0h24v24H0z'/%3E%3Cpath d='M10 15.172l9.192-9.193 1.415 1.414L10 18l-6.364-6.364 1.414-1.414z' fill='white'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: center; background-size: 14px; border-color: var(--enriched-primary); } .enriched-form-radio-item input[type="radio"]:checked+label::before { background-color: var(--enriched-primary); border-color: var(--enriched-primary); box-shadow: inset 0 0 0 3px var(--enriched-surface); } .enriched-checkbox-row { display: inline-flex; align-items: center; gap: var(--enriched-spacing-sm); padding: var(--enriched-spacing-sm) var(--enriched-spacing-md); margin: 0 var(--enriched-spacing-sm) var(--enriched-spacing-sm) 0; border: 2px solid var(--enriched-secondary); border-radius: var(--enriched-border-radius-md); background: var(--enriched-surface); transition: var(--enriched-transition); cursor: pointer; font-weight: normal; color: var(--enriched-text); } .enriched-checkbox-row:hover { border-color: var(--enriched-primary-light); background: var(--enriched-surface-light); } .enriched-checkbox-row input[type="checkbox"] { opacity: 0; position: absolute; width: auto; margin: 0; } .enriched-checkbox-row span { display: flex; align-items: center; gap: var(--enriched-spacing-sm); margin-bottom: 0; font-size: 0.95rem; font-weight: 500; } .enriched-checkbox-row::before { content: ""; display: inline-block; width: 20px; height: 20px; border: 2px solid var(--enriched-secondary); background: var(--enriched-surface); border-radius: var(--enriched-border-radius-sm); transition: var(--enriched-transition); flex-shrink: 0; } .enriched-checkbox-row input[type="checkbox"]:checked+span::before { background-color: var(--enriched-primary); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cpath fill='none' d='M0 0h24v24H0z'/%3E%3Cpath d='M10 15.172l9.192-9.193 1.415 1.414L10 18l-6.364-6.364 1.414-1.414z' fill='white'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: center; background-size: 14px; border-color: var(--enriched-primary); } .enriched-standalone-check { width: 18px; height: 18px; border: 2px solid var(--enriched-secondary); border-radius: var(--enriched-border-radius-sm); background: var(--enriched-surface); transition: var(--enriched-transition); cursor: pointer; position: relative; flex-shrink: 0; } .enriched-standalone-check:checked { background-color: var(--enriched-primary); border-color: var(--enriched-primary); } .enriched-standalone-check:checked::before { content: ""; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 10px; height: 10px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cpath fill='none' d='M0 0h24v24H0z'/%3E%3Cpath d='M10 15.172l9.192-9.193 1.415 1.414L10 18l-6.364-6.364 1.414-1.414z' fill='white'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: center; background-size: contain; } .enriched-standalone-check:hover { border-color: var(--enriched-primary-light); } .enriched-standalone-check:focus { outline: none; box-shadow: 0 0 0 3px rgba(67, 97, 238, 0.2); } .enriched-tree-controls>div { display: flex; flex-wrap: wrap; gap: var(--enriched-spacing-sm); align-items: center; } @media (max-width:768px) { .enriched-checkbox-row { padding: var(--enriched-spacing-xs) var(--enriched-spacing-sm); margin: 0 var(--enriched-spacing-xs) var(--enriched-spacing-xs) 0; } .enriched-checkbox-row span { font-size: 0.9rem; } .enriched-tree-controls>div { gap: var(--enriched-spacing-xs); } } .enriched-checkbox-row:focus-within { outline: 2px solid var(--enriched-primary); outline-offset: 2px; } .enriched-checkbox-row:has(input:disabled) { opacity: 0.6; cursor: not-allowed; background: var(--enriched-surface-muted); } .enriched-checkbox-row:has(input:disabled):hover { border-color: var(--enriched-secondary); background: var(--enriched-surface-muted); } .enriched-checkbox-row::before { content: none; } .enriched-checkbox-row span::before { content: ""; display: inline-block; width: 20px; height: 20px; border: 2px solid var(--enriched-secondary); background: var(--enriched-surface); border-radius: var(--enriched-border-radius-sm); transition: var(--enriched-transition); flex-shrink: 0; } .enriched-checkbox-row input[type="checkbox"]:checked+span::before { background-color: var(--enriched-primary); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cpath fill='none' d='M0 0h24v24H0z'/%3E%3Cpath d='M10 15.172l9.192-9.193 1.415 1.414L10 18l-6.364-6.364 1.414-1.414z' fill='white'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: center; background-size: 14px; border-color: var(--enriched-primary); } .enriched-form-toggle-item { display: flex; align-items: center; justify-content: space-between; padding: var(--enriched-spacing-md); border: 2px solid var(--enriched-secondary); border-radius: var(--enriched-border-radius-md); background: var(--enriched-surface); transition: var(--enriched-transition); } .enriched-form-toggle-item:hover { border-color: var(--enriched-primary-light); } .enriched-form-toggle-switch { position: relative; display: inline-block; width: 60px; height: 30px; } .enriched-form-toggle-switch input { opacity: 0; width: 0; height: 0; } .enriched-form-toggle-slider { position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; background-color: var(--enriched-border); box-shadow: var(--enriched-glass-shadow); transition: .4s; border-radius: 34px; } .enriched-form-toggle-slider:before { position: absolute; content: ""; height: 22px; width: 22px; left: 4px; bottom: 4px; background-color: white; transition: .4s; border-radius: 50%; border: 1px dotted var(--enriched-secondary); box-shadow: var(--enriched-glass-shadow); } .enriched-form-toggle-switch input:checked+.enriched-form-toggle-slider { background-color: var(--enriched-primary); } .enriched-form-toggle-switch input:checked+.enriched-form-toggle-slider:before { transform: translateX(30px); } .enriched-form-range-container { transition: var(--enriched-transition); } .enriched-form-range { -webkit-appearance: none; appearance: none; width: 100%; height: 8px; background: var(--enriched-gray-light); border-radius: var(--enriched-border-radius-md); outline: none; transition: var(--enriched-transition); } .enriched-form-range::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 24px; height: 24px; border-radius: 50%; background: var(--enriched-primary); cursor: pointer; transition: var(--enriched-transition); box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2); border: 2px solid white; } .enriched-form-range::-webkit-slider-thumb:hover { background: var(--enriched-primary-light); transform: scale(1.1); } .enriched-form-range-value { text-align: center; font-weight: 600; color: var(--enriched-primary); margin-top: var(--enriched-spacing-sm); } .enriched-form-file-input { position: relative; overflow: hidden; display: inline-block; width: 100%; } .enriched-form-file-input input[type="file"] { position: absolute; left: 0; top: 0; opacity: 0; width: 100%; height: 100%; cursor: pointer; } .enriched-form-file-input-label { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: var(--enriched-spacing-xl); border: 2px dashed var(--enriched-secondary); border-radius: var(--enriched-border-radius-md); background: var(--enriched-surface); text-align: center; cursor: pointer; transition: var(--enriched-transition); } .enriched-form-file-input-label:hover { border-color: var(--enriched-primary-light); background: rgba(67, 97, 238, 0.05); } .enriched-form-file-input-label i { font-size: 2rem; color: var(--enriched-text-lighter); margin-bottom: var(--enriched-spacing-sm); } .enriched-form-file-previews { display: none; flex-wrap: wrap; gap: var(--enriched-spacing-md); justify-content: center; align-items: stretch; margin-top: var(--enriched-spacing-md); padding: var(--enriched-spacing-md); border: 2px dashed var(--enriched-secondary); border-radius: var(--enriched-border-radius-md); } .enriched-form-file-previews.to-show { display: flex; } .enriched-form-file-preview.is-hidden-by-retain { display: none !important; } .enriched-form-file-preview { position: relative; flex: 0 1 clamp(120px, 18vw, 180px); aspect-ratio: 4 / 3; border-radius: var(--enriched-border-radius-md); overflow: hidden; background: var(--enriched-surface); border: 1px solid var(--enriched-border); box-shadow: var(--enriched-glass-shadow); transition: var(--enriched-transition); display: flex; align-items: center; justify-content: center; } .enriched-form-file-preview:hover { transform: translateY(-2px); box-shadow: 0 12px 28px var(--enriched-shadow-dark); } .enriched-form-file-preview img { width: 100%; height: 100%; object-fit: cover; display: block; } .enriched-form-file-preview-actions { position: absolute; left: 0; right: 0; bottom: 0; background: rgba(0, 0, 0, .65); display: flex; gap: var(--enriched-spacing-sm); justify-content: center; padding: var(--enriched-spacing-xs); transform: translateY(100%); transition: var(--enriched-transition); pointer-events: none; } .enriched-form-file-preview:hover .enriched-form-file-preview-actions, .enriched-form-file-preview:focus-within .enriched-form-file-preview-actions { transform: translateY(0); pointer-events: auto; } @media (max-width: 768px) { .enriched-form-file-preview-actions { transform: translateY(0); pointer-events: auto; } } .enriched-form-file-preview-action { color: #fff; background: transparent; border: 0; cursor: pointer; font-size: .9rem; padding: var(--enriched-spacing-xs) var(--enriched-spacing-sm); border-radius: var(--enriched-border-radius-sm); transition: var(--enriched-transition); } .enriched-form-file-preview-action:hover { color: var(--enriched-primary-light); } .enriched-form-file-preview .enriched-form-file-generic { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: space-between; gap: var(--enriched-spacing-sm); padding: var(--enriched-spacing-md); background: radial-gradient(120% 100% at 0% 0%, rgba(0, 0, 0, .06) 0%, transparent 60%), var(--enriched-surface); box-sizing: border-box; } .enriched-form-file-generic>i { display: inline-flex; align-items: center; justify-content: center; font-size: clamp(22px, 6vw, 36px); color: var(--enriched-primary); background: rgba(255, 255, 255, .25); border: 1px solid var(--enriched-border); border-radius: var(--enriched-border-radius-md); padding: calc(var(--enriched-spacing-xs)+2px) var(--enriched-spacing-sm); box-shadow: 0 2px 10px rgba(0, 0, 0, .08) inset; backdrop-filter: saturate(120%) blur(2px); } .enriched-form-file-generic .file-name { --bleed: var(--enriched-spacing-md); --pad-x: calc(var(--enriched-spacing-sm) + 6px); --pad-y: calc(var(--enriched-spacing-xxs) + 4px); --edge-fade: 14px; --efh-distance: 0px; --efh-dur: 8s; position: relative; display: flex; align-items: center; margin-top: var(--enriched-spacing-sm); margin-inline: calc(-1 * var(--bleed)); padding: var(--pad-y) var(--pad-x); color: var(--enriched-ink, #1f2937); font-weight: 600; font-size: clamp(.85rem, 1.9vw, .95rem); line-height: 1.25; background: rgba(0, 0, 0, .06); border: 1px dashed var(--enriched-border); border-radius: var(--enriched-border-radius-sm); box-shadow: 0 1px 0 rgba(0, 0, 0, .04) inset; min-height: 30px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; box-sizing: border-box; -webkit-mask-image: linear-gradient(to right, transparent 0, #000 var(--edge-fade), #000 calc(100% - var(--edge-fade)), transparent 100%); mask-image: linear-gradient(to right, transparent 0, #000 var(--edge-fade), #000 calc(100% - var(--edge-fade)), transparent 100%); } .enriched-form-file-generic .file-name .file-name-content { display: inline-block; white-space: nowrap; will-change: transform; } .enriched-form-file-preview .enriched-form-file-generic::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 6px; background: linear-gradient(180deg, var(--enriched-primary), transparent 80%); opacity: .25; } .enriched-form-file-preview:hover .enriched-form-file-generic .file-name { border-color: var(--enriched-primary); background: rgba(0, 0, 0, .08); } .enriched-form-file-preview:hover .enriched-form-file-generic .file-name.is-overflowing .file-name-content { animation: e-efh-marquee var(--efh-dur) linear infinite alternate; } @media (max-width:768px) { .enriched-form-file-preview .enriched-form-file-generic { padding: var(--enriched-spacing-sm); gap: var(--enriched-spacing-xs); flex-direction: row; } .enriched-form-file-generic>i { display: none; font-size: clamp(18px, 5vw, 28px); padding: var(--enriched-spacing-xs) var(--enriched-spacing-xs); } .enriched-form-file-generic .file-name { --bleed: var(--enriched-spacing-sm); --pad-x: var(--enriched-spacing-sm); font-size: clamp(.8rem, 1.5vw, .9rem); } .enriched-form-file-preview .enriched-form-file-generic::before { width: 4px; } } @keyframes e-efh-marquee { from { transform: translateX(0); } to { transform: translateX(calc(-1 * var(--efh-distance))); } } @media (prefers-reduced-motion:reduce) { .enriched-form-file-generic .file-name .file-name-content { animation: e-none !important; } } .enriched-form-password-strength { height: 8px; overflow: hidden; margin-top: var(--enriched-spacing-sm); border-radius: var(--enriched-border-radius-md); background: var(--enriched-gray-light); } .enriched-form-password-strength-bar { height: 100%; width: 0%; transition: width .25s ease; border-radius: inherit; background: linear-gradient(90deg, var(--enriched-primary, #6c5ce7), var(--enriched-accent, #00cec9)); } .enriched-form-password-strength-bar.is-vweak { background: linear-gradient(90deg, #8e1b1b, #a83232); } .enriched-form-password-strength-bar.is-weak { background: linear-gradient(90deg, #b94a2f, #cf6e50); } .enriched-form-password-strength-bar.is-fair { background: linear-gradient(90deg, #c58a1d, #e0a93f); } .enriched-form-password-strength-bar.is-good { background: linear-gradient(90deg, #5aa442, #7bc25f); } .enriched-form-password-strength-bar.is-strong { background: linear-gradient(90deg, #2c8f6c, #4fb792); } .enriched-form-password-strength-bar.is-excellent { background: linear-gradient(90deg, #2b6fd1, #4f8df0); } .enriched-form-password-strength-text { margin-top: .35rem; font-size: .9rem; opacity: .9; } .enriched-rule { display: flex; gap: .5rem; align-items: center; font-size: .9rem; margin: .15rem 0; } .enriched-rule-icon { width: 1.1rem; text-align: center; } .enriched-rule.ok { color: var(--enriched-success, #1b8a5a); } .enriched-rule.bad { color: var(--enriched-danger, #b23a3a); } @media (max-width: 768px) { .enriched-form-container { padding: var(--enriched-spacing-md); } .enriched-form-section { padding: var(--enriched-spacing-md); } } .enriched-form-checkbox-mini input[type="checkbox"] { inline-size: 1.125rem; block-size: 1.125rem; accent-color: var(--chip-accent); margin: 0; flex: 0 0 auto; border-radius: .35rem; } .enriched-form-checkbox-mini { --pad-x: .75rem; --pad-y: .5rem; display: inline-flex; align-items: center; gap: .6rem; padding: var(--pad-y) var(--pad-x); border-radius: .9rem; background: var(--chip-bg); color: var(--chip-fg); box-shadow: var(--chip-shadow); cursor: pointer; user-select: none; line-height: 1.1; transition: background .25s ease, outline-color .2s ease, box-shadow .25s ease, transform .06s ease; outline: 2px solid transparent; outline-offset: 2px; } .enriched-form-checkbox-mini>span { opacity: .85; margin-bottom: 0.25rem; } @supports selector(:has(*)) { .enriched-form-checkbox-mini:has(input[type="checkbox"]:checked) { background: linear-gradient(to right, color-mix(in srgb, var(--enriched-secondary) 40%, transparent), color-mix(in srgb, var(--enriched-secondary) 50%, transparent)); outline: 1px solid color-mix(in srgb, var(--enriched-secondary) 50%, transparent); box-shadow: none; transition: background 0.2s ease, outline 0.2s ease; } .enriched-form-checkbox-mini:has(input[type="checkbox"]:focus-visible) { outline-color: var(--chip-accent); box-shadow: 0 0 0 .2rem color-mix(in oklab, var(--chip-accent) 20%, transparent), var(--chip-shadow); } .enriched-form-checkbox-mini:active { transform: translateY(1px); } .enriched-form-checkbox-mini:has(input[disabled]) { opacity: .6; cursor: not-allowed; box-shadow: none; } } @supports not (selector(:has(*))) { .enriched-form-checkbox-mini:hover { box-shadow: 0 4px 16px color-mix(in oklab, var(--chip-ring) 12%, transparent), var(--chip-shadow); } } @media (prefers-reduced-motion: reduce) { .enriched-form-checkbox-mini { transition: none; } } .enriched-main-button-group { display: flex; gap: var(--enriched-spacing-md); flex-wrap: wrap; } .enriched-input-joint { display: grid; grid-template-columns: minmax(84px, 9rem) 1fr; align-items: stretch; gap: 0; border: 2px solid var(--enriched-secondary); border-radius: var(--enriched-border-radius-md); background: var(--enriched-surface-dark); box-shadow: var(--enriched-glass-shadow); transition: var(--enriched-transition); overflow: hidden; } .enriched-input-joint:focus-within { border-color: var(--enriched-primary); box-shadow: 0 0 0 3px rgba(37, 99, 235, .18); } .enriched-input-joint .enriched-code { -webkit-appearance: none; -moz-appearance: none; appearance: none; width: 100%; border: 0; background: transparent; color: var(--enriched-text); padding: var(--enriched-spacing-md) calc(var(--enriched-spacing-md) * 1.25); font-size: .95rem; font-weight: 600; letter-spacing: .2px; border-right: 1px solid var(--enriched-border); outline: 0; } .enriched-input-joint .enriched-code.enriched-select { background-image: url("data:image/svg+xml;utf8,"); background-repeat: no-repeat; background-position: right var(--enriched-spacing-md) center; background-size: 16px; padding-right: calc(var(--enriched-spacing-md) * 3); } [data-theme="dark"] .enriched-input-joint .enriched-code.enriched-select { background-image: url("data:image/svg+xml;utf8,"); } .enriched-input-joint .enriched-number { width: 100%; border: 0; background: transparent; color: var(--enriched-text); padding: var(--enriched-spacing-md); font-size: .95rem; outline: 0; } .enriched-input-joint input::placeholder { color: var(--enriched-text-lighter); } .enriched-input-joint.is-invalid, .enriched-input-joint [aria-invalid="true"] { border-color: var(--enriched-danger); box-shadow: 0 0 0 3px rgba(239, 68, 68, .18); } .enriched-input-joint.is-success { border-color: var(--enriched-success); box-shadow: 0 0 0 3px rgba(34, 197, 94, .18); } @media (max-width: 560px) { .enriched-input-joint { grid-template-columns: 1fr; border-radius: var(--enriched-border-radius-md); } .enriched-input-joint .enriched-code { border-right: 0; border-bottom: 1px solid var(--enriched-border); } } .enriched-input-joint input[type="number"]::-webkit-outer-spin-button, .enriched-input-joint input[type="number"]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; } .enriched-input-joint input[type="number"] { -moz-appearance: textfield; appearance: textfield; } .enriched-number-step-input { display: grid; grid-template-columns: 42px 1fr 42px; align-items: stretch; width: 100%; border: 2px solid var(--enriched-secondary); border-radius: var(--enriched-border-radius-md); background: var(--enriched-surface-dark); overflow: hidden; transition: var(--enriched-transition); box-shadow: var(--enriched-glass-shadow); } .enriched-number-step-input:focus-within { border-color: var(--enriched-primary); box-shadow: 0 0 0 3px rgba(37, 99, 235, .18); } .enriched-number-step-input input[type="number"] { width: 100%; border: 0; background: transparent; color: var(--enriched-text); padding: var(--enriched-spacing-md); font-size: .95rem; text-align: center; outline: 0; } .enriched-stepper-btn { border: 0; background: linear-gradient(135deg, var(--enriched-secondary), var(--enriched-secondary-light)); color: #fff; font-weight: 700; cursor: pointer; transition: var(--enriched-transition); display: grid; place-items: center; user-select: none; } .enriched-stepper-btn:hover { filter: saturate(1.1); transform: translateY(-1px); } .enriched-stepper-btn:active { transform: translateY(0); } .enriched-stepper-btn.dec { border-right: 1px solid var(--enriched-border); } .enriched-stepper-btn.inc { border-left: 1px solid var(--enriched-border); } .enriched-code-wrap { position: relative; } .enriched-code-inputs { display: flex; flex-wrap: wrap; gap: var(--enriched-spacing-sm); width: 100%; } .enriched-code-inputs .enriched-code-box { flex: 1 1 calc(16.66% - var(--enriched-spacing-sm)); min-width: 44px; height: 54px; text-align: center; font-size: 1.25rem; font-weight: 700; border: 2px solid var(--enriched-secondary); border-radius: var(--enriched-border-radius-md); background: var(--enriched-surface-dark); color: var(--enriched-text); transition: var(--enriched-transition); outline: 0; caret-color: var(--enriched-primary); } .enriched-code-inputs .enriched-code-box:focus { border-color: var(--enriched-primary); box-shadow: 0 0 0 3px rgba(37, 99, 235, .18); } .enriched-code-inputs .enriched-code-box.filled { border-color: var(--enriched-success); } .enriched-code-inputs .enriched-code-box[aria-invalid="true"] { border-color: var(--enriched-danger); } @media(max-width:560px) { .enriched-code-inputs .enriched-code-box { flex: 1 1 calc(16.66% - var(--enriched-spacing-xs)); min-width: 40px; height: 48px; font-size: 1.1rem; } } @keyframes e-enriched-shake { 10%, 90% { transform: translateX(-1px); } 20%, 80% { transform: translateX(2px); } 30%, 50%, 70% { transform: translateX(-4px); } 40%, 60% { transform: translateX(4px); } } .enriched-shake { animation: e-enriched-shake .35s both; } .enriched-form-color-input { height: 60px; padding: var(--enriched-spacing-md); cursor: pointer; } .enriched-form-color-input{ height:var(--e-field-h); padding:0; cursor:pointer; } .enriched-form-color-input::-webkit-color-swatch-wrapper{ padding:0; } .enriched-form-color-input::-webkit-color-swatch{ border:0; border-radius:calc(var(--enriched-border-radius-md) - 2px); } .enriched-form-color-input::-moz-color-swatch{ border:0; border-radius:calc(var(--enriched-border-radius-md) - 2px); } .enriched-form-color-preview { width: 35px; height: 35px; border-radius: var(--enriched-border-radius-sm); display: inline-block; vertical-align: middle; margin-right: var(--enriched-spacing-sm); border: 1px solid var(--enriched-border); } :root { --recaptcha-mask-color: #e5e7eb; } [data-theme="dark"] { --recaptcha-mask-color: #374151; } .recaptcha-wrap{ width:100%; max-width:100%; padding:var(--enriched-spacing-nm) var(--enriched-spacing-md); border:2px solid var(--enriched-secondary); border-radius:var(--enriched-border-radius-md); background:var(--enriched-surface-dark); color:var(--enriched-text); font-size:0.95rem; transition:var(--enriched-transition); display:flex; justify-content:center; align-items:center; height:auto; position:relative; overflow:auto; -webkit-overflow-scrolling:touch; clip-path:inset(0 round var(--enriched-border-radius-md)); } @media (max-width: 480px) { .recaptcha-wrap{ justify-content:flex-start; align-items:flex-start; } } .recaptcha-wrap:hover { border-color: var(--enriched-primary-light); } .recaptcha-wrap:focus-within { outline: none; border-color: var(--enriched-primary); box-shadow: 0 0 0 3px rgba(67, 97, 238, 0.2); } .recaptcha-wrap .g-recaptcha { transform-origin: left top; display: inline-block; } .recaptcha-wrap::before { content: ""; position: absolute; inset: 0; background: var(--recaptcha-mask-color); -webkit-mask-image: url("../files/inputs/recaptcha-wave.png"); mask-image: url("../files/inputs/recaptcha-wave.png"); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-size: 100% 100%; mask-size: 100% 100%; -webkit-mask-position: center; mask-position: center; opacity: 0.25; border-radius: inherit; pointer-events: none; z-index: 0; } .recaptcha-wrap>* { position: relative; z-index: 1; } .select2-container .select2-selection--single, .select2-container .select2-selection--multiple { background: var(--enriched-surface-dark); border: 2px solid var(--enriched-secondary); border-radius: var(--enriched-border-radius-md); min-height: 42px; box-shadow: none; transition: var(--enriched-transition); color: var(--enriched-text); } .js-enriched-select2 { visibility: hidden; animation: e-s2-fallback 0s 350ms forwards; } .select2 { visibility: hidden; } .select2.enriched-ready { visibility: visible; } @keyframes e-s2-fallback { to { visibility: visible; } } .select2-container .select2-selection--single, .select2-container .select2-selection--multiple { min-height: var(--e-field-h); border-width: var(--e-border-w); border-radius: var(--enriched-border-radius-md); } .select2-container--default .select2-selection--single .select2-selection__rendered { line-height: calc(var(--e-field-h) - (var(--e-border-w) * 2)); padding-top: 0; padding-bottom: 0; padding-left: var(--enriched-spacing-md); padding-right: var(--enriched-spacing-md); } .select2-container--default .select2-selection--single .select2-selection__placeholder { line-height: calc(var(--e-field-h) - (var(--e-border-w) * 2)); } .select2-container--default .select2-selection--single .select2-selection__arrow { height: 100%; margin-right: var(--enriched-spacing-sm); } .select2-container--default .select2-selection--multiple .select2-selection__rendered { min-height: calc(var(--e-field-h) - (var(--e-border-w) * 2)); align-items: center; } .select2-container--default .select2-selection--multiple .select2-selection__choice { margin-block: .15rem; } @media (max-width: 480px) { :root { --e-field-h: 50px; } } .select2-container--default .select2-selection--multiple .select2-selection__choice { background: rgba(67, 97, 238, .08); border: 1px solid var(--enriched-border); color: var(--enriched-text); border-radius: var(--enriched-border-radius-o); padding: .25rem .5rem; } .select2-container--default.select2-container--focus .select2-selection--multiple, .select2-container--default.select2-container--focus .select2-selection--single { border-color: var(--enriched-primary); box-shadow: 0 0 0 3px rgba(67, 97, 238, .2); } .select2-dropdown { background: var(--enriched-surface); border: var(--enriched-glass-border); box-shadow: var(--enriched-glass-shadow); border-radius: var(--enriched-border-radius-md); overflow: hidden; } .select2-results__option--highlighted[aria-selected] { background: rgba(67, 97, 238, .1); color: var(--enriched-text); } .select2-search--dropdown .select2-search__field { padding: .6rem .75rem; border: 2px solid var(--enriched-secondary); border-radius: var(--enriched-border-radius-md); background: var(--enriched-surface-dark); color: var(--enriched-text); outline: none; } .select2-container .select2-search--inline .select2-search__field { margin-top: var(--enriched-spacing-sm); margin-left: var(--enriched-spacing-md); } .select2-container--default .select2-selection--multiple .select2-selection__choice { position: relative; overflow: visible; padding-left: .6rem; margin-right: 1.2rem; box-shadow: var(--enriched-shadow-sm); } .select2-container--default .select2-selection--multiple .select2-selection__choice__remove { position: absolute; left: auto; top: -6px; right: -6px; transform: none; width: 20px; height: 20px; border: 0; border-radius: var(--enriched-border-radius-o); background: linear-gradient(135deg, var(--enriched-danger) 0%, var(--enriched-danger-dark) 100%); color: #fff; box-shadow: 0 6px 16px rgba(0, 0, 0, .16); } .select2-container--default .select2-selection--multiple .select2-selection__choice__remove:hover { color: #fff; filter: brightness(1.05); transform: translateY(-1px); } .select2-container--default .select2-selection--multiple .select2-selection__choice__remove::after { content: ""; position: absolute; inset: -6px; border-radius: inherit; background: radial-gradient(12px 12px at 50% 50%, rgba(239, 68, 68, .45), transparent); pointer-events: none; opacity: .6; } .select2-container .select2-results>.select2-results__options { max-height: 280px; overflow-y: auto; scrollbar-width: thin; scrollbar-color: var(--enriched-gray-light) transparent; } .select2-container .select2-results>.select2-results__options::-webkit-scrollbar { width: 6px; height: 6px; } .select2-container .select2-results>.select2-results__options::-webkit-scrollbar-track { background: transparent; } .select2-container .select2-results>.select2-results__options::-webkit-scrollbar-thumb { background-color: var(--enriched-gray-light); border-radius: 8px; } .select2-container .select2-results>.select2-results__options::-webkit-scrollbar-thumb:hover { background-color: var(--enriched-primary-light); } [data-theme="dark"] .select2-container .select2-results>.select2-results__options { scrollbar-color: rgba(226, 232, 240, .35) transparent; } [data-theme="dark"] .select2-container .select2-results>.select2-results__options::-webkit-scrollbar-thumb { background-color: rgba(226, 232, 240, .35); } .select2-container--default .select2-selection--multiple, .select2-container--default .select2-selection--single { position: relative; padding-right: 2rem; } .select2-container--default .select2-selection--single.select2-selection--clearable, .select2-container--default .select2-selection--multiple.select2-selection--clearable { position: relative; overflow: visible; } .select2-container--default .select2-selection--clearable .select2-selection__clear { padding: 0 !important; display: flex !important; align-items: center; justify-content: center; position: absolute; top: -10px; right: -30px; width: 20px; height: 20px; border: 0; border-radius: var(--enriched-border-radius-o); background: linear-gradient(135deg, var(--enriched-danger) 0%, var(--enriched-danger-dark) 100%); color: #fff; font-weight: 600; line-height: 1; box-shadow: 0 6px 16px rgba(0, 0, 0, .16); cursor: pointer; z-index: 3; } .select2-container--default .select2-selection--multiple.select2-selection--clearable .select2-selection__clear { top: -15px; right: -20px; } .select2-container--default .select2-selection--clearable .select2-selection__clear:hover { filter: brightness(1.05); transform: translateY(-1px); } .select2-container--default .select2-selection--clearable .select2-selection__clear::after { content: ""; position: absolute; inset: -6px; border-radius: inherit; background: radial-gradient(12px 12px at 50% 50%, rgba(239, 68, 68, .45), transparent); pointer-events: none; opacity: .6; } .select2-container--default .select2-selection--single .select2-selection__arrow { right: .5rem; } .select2-container--default .select2-selection--multiple.select2-selection--clearable .select2-selection__rendered { padding-right: 2rem; } .select2-container--default .select2-selection__clear { display: inherit !important; } .select2-container--default .select2-selection--multiple .select2-search--inline, .select2-container--default .select2-selection--multiple .select2-search__field { background: transparent !important; color: inherit !important; caret-color: var(--enriched-primary); } .select2-container--default .select2-selection--multiple { background: var(--enriched-input-bg, #fff); padding: var(--enriched-spacing-sh) var(--enriched-spacing-sm) var(--enriched-spacing-md) var(--enriched-spacing-sm); } .select2-container--focus .select2-selection--multiple { border-color: var(--enriched-primary); box-shadow: 0 0 0 2px rgba(0, 0, 0, 0), 0 0 0 3px var(--enriched-primary-weak, rgba(18, 110, 230, .2)); } .e-s2-opt { display: inline-flex; align-items: center; gap: .5rem; } .e-s2-icon { width: 1.25em; min-width: 1.25em; display: inline-block; text-align: center; } .select2-results__option .e-s2-icon { margin-right: .5rem; } .select2-container--default .select2-selection--single .select2-selection__rendered .e-s2-opt { display: inline-flex; align-items: center; gap: .5rem; } .select2.enriched-ready .select2-selection--multiple .select2-search__field { height: 28px !important; max-height: 28px !important; line-height: 28px !important; overflow: hidden !important; resize: none !important; } .enriched-field-error, .select2-container .select2-selection.enriched-field-error, .enriched-form-file-input.enriched-field-error .enriched-form-file-input-label { border-color: var(--enriched-danger) !important; box-shadow: var(--enriched-shadow-danger) !important; position: relative; animation: e-enriched-error-pulse 1.2s ease-in-out 1; } .select2-container--default .select2-selection.enriched-field-error { border-color: var(--enriched-danger) !important; box-shadow: var(--enriched-shadow-danger) !important; position: relative; animation: e-enriched-error-pulse 1.2s ease-in-out 1; } .enriched-form-input.enriched-field-error, .enriched-form-select.enriched-field-error, .enriched-form-textarea.enriched-field-error{ border-width:2px; border-style:solid; position:relative; animation:e-enriched-error-pulse 1.2s ease-in-out 1; } .enriched-field-error:focus{ border-color:var(--enriched-danger) !important; box-shadow:var(--enriched-shadow-danger) !important; } .enriched-form-float .enriched-field-error+.enriched-form-float-label{ color:var(--enriched-danger) !important; } .enriched-form-file-input.enriched-field-error .enriched-form-file-input-label { border-color: var(--enriched-danger) !important; box-shadow: var(--enriched-shadow-danger) !important; position: relative; animation: e-enriched-error-pulse 1.2s ease-in-out 1; } .enriched-form-checkbox-item input[type="checkbox"].enriched-field-error+label, .enriched-form-radio-item input[type="radio"].enriched-field-error+label { border-color: var(--enriched-danger) !important; box-shadow: var(--enriched-shadow-danger); position: relative; animation: e-enriched-error-pulse 1.2s ease-in-out 1; } .enriched-form-checkbox-item input[type="checkbox"].enriched-field-error+label::before, .enriched-form-radio-item input[type="radio"].enriched-field-error+label::before { border-color: var(--enriched-danger) !important; } input[type="checkbox"].enriched-field-error, input[type="radio"].enriched-field-error { outline: 2px solid var(--enriched-danger); outline-offset: 2px; position: relative; animation: e-enriched-error-pulse 1.2s ease-in-out 1; } .enriched-input-joint [aria-invalid="true"], .enriched-number-step-input [aria-invalid="true"] { border-color: var(--enriched-danger); box-shadow: var(--enriched-shadow-danger); position: relative; animation: e-enriched-error-pulse 1.2s ease-in-out 1; } @supports selector(:has(*)) { .enriched-form-checkbox-mini:has(input.enriched-field-error) { outline: 2px solid var(--enriched-danger); box-shadow: var(--enriched-shadow-danger); position: relative; animation: e-enriched-error-pulse 1.2s ease-in-out 1; } } @keyframes e-enriched-error-pulse { 0% { box-shadow: 0 0 0 0 rgba(239,68,68,0.0),0 0 0 0 rgba(239,68,68,0.0); } 30% { box-shadow: 0 0 0 3px rgba(239,68,68,0.4),0 0 10px 3px rgba(239,68,68,0.3); } 60% { box-shadow: 0 0 0 1px rgba(239,68,68,0.5),0 0 6px 2px rgba(239,68,68,0.25); } 100% { box-shadow: 0 0 0 0 rgba(239,68,68,0.0),0 0 0 0 rgba(239,68,68,0.0); } } .enriched-input-joint [aria-invalid="true"], .enriched-number-step-input [aria-invalid="true"] { border-color: var(--enriched-danger); box-shadow: var(--enriched-shadow-danger); } .leaflet-container{ font-family:inherit; } .leaflet-control{ border-radius:10px; } .leaflet-control-zoom a{ border-radius:8px; } .leaflet-container .leaflet-tile, .leaflet-container img.leaflet-image-layer, .leaflet-container .leaflet-marker-icon, .leaflet-container .leaflet-marker-shadow{ max-width:none!important; } .leaflet-container .leaflet-tile{ line-height:0; } .leaflet-touch .leaflet-bar a:first-child, .leaflet-touch .leaflet-bar a:last-child{ border-radius:2px!important; } .enriched-map, .enriched-map .enriched-map-canvas{ width:100%; } .enriched-map .enriched-map-canvas{ min-height:260px; } .enriched-map-wrap{ display:block; width:100%; background:var(--enriched-surface); border-radius:var(--enriched-border-radius-lg); border:1px solid var(--enriched-border-light); box-shadow:var(--enriched-shadow-sm); padding:var(--enriched-spacing-sm); overflow:auto; -webkit-overflow-scrolling:touch; clip-path:inset(0 round var(--enriched-border-radius-lg)); } .enriched-map-picker{ display:grid; grid-template-rows:auto 1fr auto; gap:.5rem; border-radius:var(--enriched-border-radius-lg); background:var(--enriched-surface-full,#fff); padding:.75rem; position:relative; } .enriched-form-group .enriched-map-picker{ margin-top:.25rem; } .enriched-map-search{ display:block; position:relative; } .enriched-map-search-wrap{ overflow:visible; position:relative; display:flex; align-items:center; } .enriched-map-search-wrap .enriched-map-left-icon{ position:absolute; left:.75rem; top:50%; transform:translateY(-50%); opacity:.7; font-size:1rem; line-height:1; } .enriched-map-search-wrap .enriched-form-input{ padding-left:2.25rem; padding-right:2rem; line-height:1.5; height:2.5rem; } .enriched-map-search-status{ position:absolute; right:.75rem; top:50%; transform:translateY(-50%); display:flex; align-items:center; justify-content:center; font-size:1rem; line-height:1; opacity:.9; } .enriched-map-search-status.is-loading{ opacity:1; font-size:.95rem; animation:e-enriched-map-search-status .9s linear infinite; } @keyframes e-enriched-map-search-status{ to{ transform:translateY(-50%) rotate(360deg); } } .enriched-map-suggest{ position:absolute; z-index:var(--enriched-z-suggest); margin-top:.35rem; width:100%; background:var(--enriched-surface-full,#fff); border:1px solid var(--enriched-border-light,#e5e7eb); border-radius:10px; box-shadow:0 8px 24px rgba(0,0,0,.08); max-height:260px; overflow-y:auto; } .enriched-map-suggest.is-hidden{ display:none; } .enriched-map-suggest .sug-item{ display:flex; align-items:center; gap:.5rem; width:100%; text-align:left; padding:.6rem .75rem; border:0; background:transparent; cursor:pointer; } .enriched-map-suggest .sug-item:hover{ background:rgba(67,97,238,.08); } .enriched-map-suggest .sug-item i{ color:var(--enriched-primary); } .enriched-map-canvas-wrap{ position:relative; width:100%; height:100%; border-radius:var(--enriched-border-radius-lg); overflow:hidden; box-shadow:var(--enriched-shadow-md); background:var(--enriched-bg); } .enriched-map-canvas{ position:absolute; inset:0; border-radius:var(--enriched-border-radius-lg); } .enriched-map-guard{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center; gap:.5rem; font-size:.95rem; font-weight:600; background:linear-gradient(180deg,rgba(255,255,255,.35),rgba(255,255,255,.45)); backdrop-filter:saturate(120%) blur(2px); border:0; border-radius:var(--enriched-border-radius-lg); cursor:pointer; z-index:var(--enriched-z-base); transition:opacity .2s ease,transform .2s ease; } .enriched-map-guard i{ opacity:.8; } .enriched-map-picker.interactive .enriched-map-guard{ opacity:0; pointer-events:none; transform:scale(.98); } .enriched-map-mini{ display:flex; flex-wrap: wrap; align-items:center; gap:var(--enriched-spacing-xs); margin-top:var(--enriched-spacing-sm); font-size:var(--enriched-font-sm); color:var(--enriched-text-lighter); } .enriched-map-mini .coord-lat, .enriched-map-mini .coord-lng{ font-family:var(--enriched-font-monospace); color:var(--enriched-text-dark); } .enriched-map-mini .place-wrap{ display:inline-flex; align-items:center; gap:var(--enriched-spacing-xs); margin-left:var(--enriched-spacing-xs); } .enriched-map-mini .place-wrap.is-hidden{ display:none; } .enriched-map-mini .place-sep{ color:var(--enriched-gray); } .enriched-map-mini .place-name{ font-weight:500; color:var(--enriched-text-light); } .enriched-map-actions{ display:flex; align-items:center; justify-content:flex-end; } .enriched-map-open{ display:inline-flex; align-items:center; gap:.4rem; padding:.35rem .75rem; border-radius: var(--enriched-border-radius-o); background:var(--enriched-gradient-primary); color:#fff; text-decoration:none; font-size:var(--enriched-font-xs); box-shadow:var(--enriched-shadow-xs); transition:var(--enriched-transition-fast); } .enriched-map-open:hover{ box-shadow:var(--enriched-shadow-md); transform:translateY(-1px); } .enriched-map-open:active{ transform:translateY(0); box-shadow:var(--enriched-shadow-sm); } .enriched-map-open:focus-visible{ outline:2px solid var(--enriched-focus-ring); outline-offset:2px; } .enriched-g-map-wrap{ display:block; width:100%; background:var(--enriched-surface); border-radius:var(--enriched-border-radius-lg); border:1px solid var(--enriched-border-light); box-shadow:var(--enriched-shadow-sm); padding:var(--enriched-spacing-sm); } .enriched-g-map-wrap.extra{ padding:calc(var(--enriched-spacing-sm) + .75rem); display: flex; flex-direction: column; gap:.5rem; } .enriched-g-map-picker{ display:grid; grid-template-rows:auto 1fr auto; gap:.5rem; border-radius:var(--enriched-border-radius-lg); background:var(--enriched-surface-full,#fff); padding:.75rem; position:relative; } .enriched-form-group .enriched-g-map-picker{ margin-top:.25rem; } .enriched-g-map-search{ display:block; position:relative; } .enriched-g-map-search-wrap{ overflow:visible; position:relative; display:flex; align-items:center; } .enriched-g-map-search-wrap .enriched-g-map-left-icon{ position:absolute; left:.75rem; top:50%; transform:translateY(-50%); opacity:.7; font-size:1rem; line-height:1; } .enriched-g-map-search-wrap .enriched-form-input{ padding-left:2.25rem; padding-right:2rem; line-height:1.5; height:2.5rem; } .enriched-g-map-search-status{ position:absolute; right:.75rem; top:50%; transform:translateY(-50%); display:flex; align-items:center; justify-content:center; font-size:1rem; line-height:1; opacity:.9; } .enriched-g-map-search-status.is-loading{ opacity:1; font-size:.95rem; animation:e-enriched-g-map-search-status .9s linear infinite; } @keyframes e-enriched-g-map-search-status{ to{ transform:translateY(-50%) rotate(360deg); } } .enriched-g-map-suggest{ position:absolute; z-index:var(--enriched-z-suggest); margin-top:.35rem; width:100%; background:var(--enriched-surface-full,#fff); border:1px solid var(--enriched-border-light,#e5e7eb); border-radius:10px; box-shadow:0 8px 24px rgba(0,0,0,.08); max-height:260px; overflow-y:auto; } .enriched-g-map-suggest.is-hidden{ display:none; } .enriched-g-map-suggest .sug-item{ display:flex; align-items:center; gap:.5rem; width:100%; text-align:left; padding:.6rem .75rem; border:0; background:transparent; cursor:pointer; } .enriched-g-map-suggest .sug-item:hover{ background:rgba(67,97,238,.08); } .enriched-g-map-suggest .sug-item i{ color:var(--enriched-primary); } .enriched-g-map-canvas-wrap{ position:relative; width:100%; height:100%; border-radius:var(--enriched-border-radius-lg); overflow:hidden; box-shadow:var(--enriched-shadow-md); background:var(--enriched-bg); } .enriched-g-map-canvas{ position:absolute; inset:0; width:100%; height:100%; } .enriched-g-map-guard{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center; gap:.5rem; font-size:.95rem; font-weight:600; background:linear-gradient(180deg,rgba(255,255,255,.35),rgba(255,255,255,.45)); backdrop-filter:saturate(120%) blur(2px); border:0; border-radius:var(--enriched-border-radius-lg); cursor:pointer; z-index:var(--enriched-z-base); transition:opacity .2s ease,transform .2s ease; } .enriched-g-map-guard i{ opacity:.8; } .enriched-g-map-picker.interactive .enriched-g-map-guard{ opacity:0; pointer-events:none; transform:scale(.98); } .enriched-g-map{ width:100%; } .enriched-g-map .enriched-g-map-canvas{ width:100%; min-height:260px; } .enriched-g-map-mini{ display:flex; flex-wrap: wrap; align-items:center; margin-top:var(--enriched-spacing-sm); gap:var(--enriched-spacing-xs); font-size:var(--enriched-font-sm); color:var(--enriched-text-lighter); } .enriched-g-map-mini .coord-lat, .enriched-g-map-mini .coord-lng{ font-family:var(--enriched-font-monospace); color:var(--enriched-text-dark); } .enriched-g-map-mini .place-wrap{ display:inline-flex; align-items:center; gap:var(--enriched-spacing-xs); margin-left:var(--enriched-spacing-xs); } .enriched-g-map-mini .place-wrap.is-hidden{ display:none; } .enriched-g-map-mini .place-sep{ color:var(--enriched-gray); } .enriched-g-map-mini .place-name{ font-weight:500; color:var(--enriched-text-light); } .enriched-g-map-actions{ display:flex; align-items:center; justify-content:flex-end; } .enriched-g-map-open{ display:inline-flex; align-items:center; gap:.4rem; padding:.35rem .75rem; border-radius: var(--enriched-border-radius-o); background:var(--enriched-gradient-primary); color:#fff; text-decoration:none; font-size:var(--enriched-font-xs); box-shadow:var(--enriched-shadow-xs); transition:var(--enriched-transition-fast); } .enriched-g-map-open:hover{ box-shadow:var(--enriched-shadow-md); transform:translateY(-1px); } .enriched-g-map-open:active{ transform:translateY(0); box-shadow:var(--enriched-shadow-sm); } .enriched-g-map-open:focus-visible{ outline:2px solid var(--enriched-focus-ring); outline-offset:2px; } .enriched-g-map-google-embed .enriched-g-map-embed{ border-radius:var(--enriched-border-radius-lg); overflow:hidden; box-shadow:var(--enriched-shadow-md); background:var(--enriched-bg); } .enriched-g-map-google-embed .enriched-g-map-embed iframe{ border:0; width:100%; height:100%; } .enriched-form{ --e-form-bg:transparent; --e-form-pad:0; --e-form-radius:0; --e-form-border:0; --e-form-shadow:none; --e-field-bg:var(--enriched-surface-dark,transparent); --e-field-border:var(--enriched-secondary,currentColor); --e-field-border-w:var(--e-border-w,1px); --e-field-radius:var(--enriched-border-radius-md,0); --e-field-shadow:none; --e-field-hover-border:var(--enriched-primary-light,var(--enriched-primary,currentColor)); --e-field-focus-border:var(--enriched-primary,currentColor); --e-field-focus-shadow:0 0 0 3px rgba(67,97,238,0.2); --e-label:var(--enriched-text,currentColor); --e-hint:var(--enriched-text-lighter,currentColor); } .enriched-form[data-design]{ background:var(--e-form-bg,transparent); padding:var(--e-form-pad,0); border-radius:var(--e-form-radius,0); border:var(--e-form-border,0); box-shadow:var(--e-form-shadow,none); } .enriched-form[data-design] .enriched-form-label{color:var(--e-label,var(--enriched-text,currentColor));} .enriched-form[data-design] .enriched-form-hint{color:var(--e-hint,var(--enriched-text-lighter,currentColor));} #json-editor, .enriched-form-range-container, .enriched-form-input, .enriched-form-select, .enriched-form-textarea{ background:var(--e-field-bg,var(--enriched-surface-dark,transparent)); border:var(--e-field-border-w,var(--e-border-w,1px)) solid var(--e-field-border,var(--enriched-secondary,currentColor)); border-radius:var(--e-field-radius,var(--enriched-border-radius-md,0)); box-shadow:var(--e-field-shadow,none); } #json-editor:hover, .enriched-form-range-container:hover, .enriched-form-input:hover, .enriched-form-select:hover, .enriched-form-textarea:hover{ border-color:var(--e-field-hover-border,var(--enriched-primary-light,var(--enriched-primary,currentColor))); } #json-editor:focus, .enriched-form-range-container:focus, .enriched-form-input:focus, .enriched-form-select:focus, .enriched-form-textarea:focus{ border-color:var(--e-field-focus-border,var(--enriched-primary,currentColor)); box-shadow:var(--e-field-focus-shadow,0 0 0 3px rgba(67,97,238,0.2)); } .enriched-input-joint, .enriched-number-step-input, .enriched-form-toggle-item, .recaptcha-wrap, .select2-container .select2-selection--single, .select2-container .select2-selection--multiple{ background:var(--e-field-bg,var(--enriched-surface-dark,transparent)); border:var(--e-field-border-w,var(--e-border-w,1px)) solid var(--e-field-border,var(--enriched-secondary,currentColor)); border-radius:var(--e-field-radius,var(--enriched-border-radius-md,0)); box-shadow:var(--e-field-shadow,none); } .select2-container--default.select2-container--focus .select2-selection--multiple, .select2-container--default.select2-container--focus .select2-selection--single{ border-color:var(--e-field-focus-border,var(--enriched-primary,currentColor)); box-shadow:var(--e-field-focus-shadow,0 0 0 3px rgba(67,97,238,0.2)); } .enriched-form-file-input-label{ background:var(--e-field-bg,var(--enriched-surface-dark,transparent)); border:var(--e-field-border-w,var(--e-border-w,1px)) dashed var(--e-field-border,var(--enriched-secondary,currentColor)); border-radius:var(--e-field-radius,var(--enriched-border-radius-md,0)); box-shadow:var(--e-field-shadow,none); } .enriched-form[data-design] .enriched-form-float{ --enriched-float-label-bg:var(--e-field-bg,var(--enriched-surface-dark,transparent)); --enriched-float-label-fg:var(--e-hint,var(--enriched-text-lighter,currentColor)); --enriched-float-label-fg-active:var(--enriched-primary,currentColor); } .enriched-form[data-design="paired"]{ --e-form-bg:var(--enriched-pair-form-bg,var(--enriched-surface,transparent)); --e-form-pad:var(--enriched-spacing-xl,1.5rem); --e-form-radius:var(--enriched-border-radius-xl,1rem); --e-form-border:0; --e-form-shadow:var(--enriched-shadow-lg,none); --e-field-bg:var(--enriched-pair-input-bg,color-mix(in srgb,var(--enriched-pair-form-bg,var(--enriched-surface,transparent)) 72%,#fff)); --e-field-border-w:0px; --e-field-border:transparent; --e-field-shadow:0 1px 0 rgba(0,0,0,.08); --e-field-focus-shadow:0 0 0 3px color-mix(in srgb,var(--enriched-primary,currentColor) 22%,transparent),0 10px 26px rgba(0,0,0,.12); --e-label:var(--enriched-pair-ink,var(--enriched-text,currentColor)); --e-hint:var(--enriched-pair-muted,var(--enriched-text-lighter,currentColor)); } .enriched-form[data-design="paired"] .enriched-form-float{ --enriched-float-label-bg:var(--e-field-bg,var(--enriched-surface-dark,transparent)); } .enriched-form[data-design="underline"]{ --e-form-bg:transparent; --e-field-bg:transparent; --e-field-shadow:none; } .enriched-form[data-design="underline"] #json-editor, .enriched-form[data-design="underline"] .enriched-form-range-container, .enriched-form[data-design="underline"] .enriched-form-input, .enriched-form[data-design="underline"] .enriched-form-select, .enriched-form[data-design="underline"] .enriched-form-textarea, .enriched-form[data-design="underline"] .select2-container .select2-selection--single, .enriched-form[data-design="underline"] .select2-container .select2-selection--multiple, .enriched-form[data-design="underline"] .enriched-input-joint, .enriched-form[data-design="underline"] .enriched-number-step-input, .enriched-form[data-design="underline"] .enriched-form-toggle-item, .enriched-form[data-design="underline"] .recaptcha-wrap{ border:0; border-bottom:var(--e-border-w,1px) solid var(--enriched-secondary,currentColor); border-radius:0; background:transparent; box-shadow:none; padding-left:0; padding-right:0; } .enriched-form[data-design="underline"] #json-editor:focus, .enriched-form[data-design="underline"] .enriched-form-range-container:focus, .enriched-form[data-design="underline"] .enriched-form-input:focus, .enriched-form[data-design="underline"] .enriched-form-select:focus, .enriched-form[data-design="underline"] .enriched-form-textarea:focus{ border-bottom-color:var(--enriched-primary,currentColor); box-shadow:none; } .enriched-form[data-design="underline"] .enriched-form-input-icon i{left:0;} .enriched-form[data-design="underline"] .enriched-form-input-icon .enriched-form-input{padding-left:2rem;} .enriched-form[data-design="underline"] .enriched-form-float{--enriched-float-label-bg:transparent;} .enriched-form[data-design="underline"] .enriched-form-float-label{ left:0; padding-left:0; padding-right:0; } .enriched-form[data-design="pill"]{ --e-field-radius:999px; --e-field-shadow:var(--enriched-shadow-sm,none); } .enriched-form[data-design="pill"] .enriched-form-textarea{border-radius:var(--enriched-border-radius-lg,var(--e-field-radius,999px));} .enriched-form[data-design="pill"] .select2-container .select2-selection--multiple{border-radius:var(--enriched-border-radius-xl,var(--e-field-radius,999px));} .enriched-form[data-design="inset"]{ --e-field-bg:color-mix(in srgb,var(--enriched-surface-dark,transparent) 80%,#fff); --e-field-border:color-mix(in srgb,var(--enriched-secondary,currentColor) 70%,transparent); --e-field-shadow:inset 0 2px 8px rgba(0,0,0,.10),inset 0 1px 0 rgba(255,255,255,.25); --e-field-focus-shadow:0 0 0 3px rgba(67,97,238,0.18),inset 0 2px 10px rgba(0,0,0,.12); } .select2-dropdown.enriched-s2-themed{ background:var(--e-field-bg,var(--enriched-surface,transparent)); border:var(--enriched-glass-border,1px solid rgba(255,255,255,.12)); color:var(--enriched-text,currentColor); } .select2-dropdown.enriched-s2-themed .select2-search--dropdown .select2-search__field{ background:var(--e-field-bg,var(--enriched-surface-dark,transparent)); border:var(--e-border-w,1px) solid var(--e-field-border,var(--enriched-secondary,currentColor)); color:var(--enriched-text,currentColor); } /** **/ /** ENRICHED INPUT DESIGNER **/ /** **/ /** **/ /** ENRICHED PROMPT DESIGNER **/ /** **/ .enriched-prompt-component-card { background: var(--enriched-surface); backdrop-filter: blur(var(--enriched-glass-blur)); border: var(--enriched-glass-border); box-shadow: var(--enriched-glass-shadow); border-radius: var(--enriched-border-radius-lg); padding: var(--enriched-spacing-lg); transition: all 0.3s ease; } .enriched-prompt-component-card:hover { transform: translateY(-5px); box-shadow: 0 12px 28px var(--enriched-shadow-dark); } .enriched-prompt-component-title { font-size: 1.5rem; font-weight: 700; margin-bottom: var(--enriched-spacing-md); color: var(--enriched-text); display: flex; align-items: center; gap: var(--enriched-spacing-sm); } .enriched-prompt-component-icon { font-size: 1.25rem; width: 2rem; height: 2rem; display: flex; align-items: center; justify-content: center; background: linear-gradient(135deg, var(--enriched-primary) 0%, var(--enriched-primary-light) 100%); color: white; border-radius: 50%; } .enriched-prompt-component-description { color: var(--enriched-text-light); margin-bottom: var(--enriched-spacing-lg); } .enriched-prompt-btn-group { display: flex; flex-wrap: wrap; gap: var(--enriched-spacing-sm); } .enriched-prompt-btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--enriched-spacing-md); padding: var(--enriched-spacing-sm) var(--enriched-spacing-md); border: none; border-radius: var(--enriched-border-radius-md); font-size: 0.875rem; font-weight: 500; line-height: 1.5; text-align: center; text-decoration: none; cursor: pointer; transition: all 0.3s ease; background: var(--enriched-surface-dark); color: var(--enriched-text); box-shadow: 0 2px 4px var(--enriched-shadow); overflow: hidden; } .enriched-prompt-btn:hover { transform: translateY(-2px); box-shadow: 0 4px 8px var(--enriched-shadow); } .enriched-prompt-btn:active { transform: translateY(0); box-shadow: 0 2px 4px var(--enriched-shadow); } .enriched-prompt-btn-primary { background: linear-gradient(135deg, var(--enriched-primary) 0%, var(--enriched-primary-light) 100%); color: white; box-shadow: 0 4px 6px rgba(67, 97, 238, 0.2); } .enriched-prompt-btn-primary:hover { box-shadow: 0 6px 10px rgba(67, 97, 238, 0.3); } .enriched-prompt-btn-secondary { background: linear-gradient(135deg, var(--enriched-secondary) 0%, #5a6268 100%); color: white; } .enriched-prompt-btn-success { background: linear-gradient(135deg, var(--enriched-success) 0%, var(--enriched-success-dark) 100%); color: white; } .enriched-prompt-btn-danger { background: linear-gradient(135deg, var(--enriched-danger) 0%, #b5179e 100%); color: white; } .enriched-prompt-btn-warning { background: linear-gradient(135deg, var(--enriched-warning) 0%, #f3722c 100%); color: white; } .enriched-prompt-btn-info { background: linear-gradient(135deg, var(--enriched-info) 0%, #7209b7 100%); color: white; } .enriched-prompt-modal-overlay { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0, 0, 0, .5); backdrop-filter: blur(5px); align-items: center; justify-content: center; z-index: var(--enriched-z-overlay); display: none; opacity: 0; visibility: hidden; pointer-events: none; transition: opacity .3s ease, visibility .3s ease; } .enriched-prompt-modal-overlay.active { display: flex; opacity: 1; visibility: visible; pointer-events: auto; } #confirm-modal.enriched-prompt-modal-overlay { z-index: calc(var(--enriched-z-overlay) + 20); } #info-modal.enriched-prompt-modal-overlay, #prompt-modal.enriched-prompt-modal-overlay { z-index: calc(var(--enriched-z-overlay) + 10); } #full-modal.enriched-prompt-modal-overlay, #full-modal-plain.enriched-prompt-modal-overlay { z-index: calc(var(--enriched-z-overlay) - 1); } .enriched-prompt-modal { background: var(--enriched-surface); backdrop-filter: blur(var(--enriched-glass-blur)); border: var(--enriched-glass-border); box-shadow: var(--enriched-glass-shadow); border-radius: var(--enriched-border-radius-lg); width: 90%; max-width: 600px; max-height: 90vh; overflow: hidden; display: flex; flex-direction: column; transform: translateY(20px) scale(.95); opacity: 0; transition: transform .3s ease, opacity .3s ease; } .enriched-prompt-modal-overlay.active .enriched-prompt-modal { transform: translateY(0) scale(1); opacity: 1; } .enriched-prompt-modal-header { padding: var(--enriched-spacing-lg); border-bottom: 1px solid var(--enriched-border); display: flex; align-items: center; justify-content: space-between; } .enriched-prompt-modal-title { font-size: 1.5rem; font-weight: 600; color: var(--enriched-text); } .enriched-prompt-modal-close { background: transparent; border: none; font-size: 1.5rem; color: var(--enriched-text-light); cursor: pointer; width: 2rem; height: 2rem; display: flex; align-items: center; justify-content: center; border-radius: 50%; transition: background .3s ease, color .3s ease; } .enriched-prompt-modal-close:hover { background: rgba(0, 0, 0, .05); color: var(--enriched-text); } .enriched-prompt-modal-body { display: flex; flex-direction: column; gap: var(--enriched-space-6); padding: var(--enriched-spacing-lg); overflow-y: auto; flex-grow: 1; scrollbar-width: thin; scrollbar-color: var(--enriched-primary) transparent; } .enriched-prompt-modal-body::-webkit-scrollbar { width: 8px; height: 8px; } .enriched-prompt-modal-body::-webkit-scrollbar-track { background: transparent; } .enriched-prompt-modal-body::-webkit-scrollbar-thumb { background: linear-gradient(180deg, var(--enriched-primary-light), var(--enriched-primary)); border-radius: var(--enriched-border-radius-md); border: 2px solid transparent; background-clip: padding-box; box-shadow: inset 0 0 4px var(--enriched-shadow); } .enriched-prompt-modal-body::-webkit-scrollbar-thumb:hover { background: linear-gradient(180deg, var(--enriched-primary), var(--enriched-primary-dark)); } .enriched-prompt-modal-content { color: var(--enriched-text-light); line-height: 1.6; margin-bottom: var(--enriched-spacing-md); } .enriched-prompt-modal-body> :last-child { margin-bottom: 0 !important; } .enriched-prompt-modal-footer { padding: var(--enriched-spacing-lg); border-top: 1px solid var(--enriched-border); display: flex; gap: var(--enriched-spacing-md); justify-content: flex-end; } .enriched-prompt-modal-sm { max-width: 400px; } .enriched-prompt-modal-lg { max-width: 800px; } .enriched-prompt-modal-full { width: 95%; height: 95vh; max-width: none; border-radius: var(--enriched-border-radius-md); } .enriched-prompt-modal-full.free-height { height: auto !important; } .enriched-prompt-modal-free { width: 95%; max-width: none; border-radius: var(--enriched-border-radius-md); } @media (max-width:480px) { .enriched-prompt-modal-footer { flex-direction: column; } } .enriched-prompt-modal .select2, .enriched-prompt-modal .select2-container { width: 100% !important; } .enriched-prompt-modal .select2-container.select2-container--open:not(.select2){ width:auto !important; z-index: var(--enriched-z-modal-dropdown); } .enriched-prompt-modal .select2-dropdown { z-index: var(--enriched-z-modal-dropdown-pop); } .enriched-skeleton { position: relative; display: block; width: 100%; background: var(--enriched-skeleton-bg, rgba(0, 0, 0, .08)); border-radius: var(--enriched-border-radius-md); overflow: hidden; } .enriched-skeleton::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .35), transparent); transform: translateX(-100%); animation: e-enriched-shimmer 1.4s infinite; } @keyframes e-enriched-shimmer { to { transform: translateX(100%); } } .enriched-skeleton-row { height: 14px; margin-top: 10px; } .enriched-skeleton-row.thin { height: 10px; } .enriched-skeleton-row.w80 { width: 80%; } .enriched-skeleton-row.w60 { width: 60%; } .enriched-skeleton-block { height: 140px; } .enriched-prompt-modal { --emh-accent: var(--enriched-primary); --emh-line-size: 4px; --emf-accent: var(--enriched-primary); --emf-line-size: 4px; } .enriched-prompt-modal-header, [data-theme] .enriched-prompt-modal-header, .enriched-prompt-modal-footer, [data-theme] .enriched-prompt-modal-footer { position: relative; } .enriched-prompt-modal-header>*, .enriched-prompt-modal-footer>* { position: relative; z-index: 1; } .enriched-prompt-modal-header.emh-line { box-shadow: inset 0 calc(-1*var(--emh-line-size)) 0 0 var(--emh-accent, var(--enriched-primary)); } .enriched-prompt-modal-header.emh-solid { background: var(--emh-accent, var(--enriched-primary)); border-bottom-color: transparent; color: #fff; } .enriched-prompt-modal-header.emh-solid .enriched-prompt-modal-title { color: #fff; } .enriched-prompt-modal-header.emh-solid .enriched-prompt-modal-close { color: #fff; } .enriched-prompt-modal-header.emh-solid .enriched-prompt-modal-close:hover { background: rgba(255, 255, 255, .12); } .enriched-prompt-modal-header.emh-gradient { background: linear-gradient(135deg, var(--emh-accent, var(--enriched-primary)) 0%, color-mix(in oklab, var(--emh-accent, var(--enriched-primary)) 70%, #000) 100%); border-bottom-color: transparent; color: #fff; } .enriched-prompt-modal-header.emh-gradient .enriched-prompt-modal-title { color: #fff; } .enriched-prompt-modal-header.emh-gradient .enriched-prompt-modal-close { color: #fff; } .enriched-prompt-modal-header.emh-gradient .enriched-prompt-modal-close:hover { background: rgba(255, 255, 255, .12); } .enriched-prompt-modal-header.emh-stripe::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 8px; background: repeating-linear-gradient(135deg, var(--emh-accent, var(--enriched-primary)) 0 12px, color-mix(in oklab, var(--emh-accent, var(--enriched-primary)) 65%, #fff) 12px 24px); border-bottom-left-radius: inherit; border-bottom-right-radius: inherit; } .enriched-prompt-modal-header.emh-shadow { box-shadow: 0 10px 22px color-mix(in oklab, var(--emh-accent, var(--enriched-primary)) 18%, transparent); } .enriched-prompt-modal-header.emh-badge .enriched-prompt-modal-title { display: inline-flex; align-items: center; gap: .5rem; } .enriched-prompt-modal-header.emh-badge .enriched-prompt-modal-title::before { content: ""; width: .66rem; height: .66rem; border-radius: var(--enriched-border-radius-o); background: var(--emh-accent, var(--enriched-primary)); box-shadow: 0 0 0 6px color-mix(in oklab, var(--emh-accent, var(--enriched-primary)) 18%, transparent); } .enriched-prompt-modal-header.emh-subtle { background: color-mix(in oklab, var(--emh-accent, var(--enriched-primary)) 6%, transparent); box-shadow: inset 0 -1px 0 color-mix(in oklab, var(--emh-accent, var(--enriched-primary)) 35%, transparent); } .enriched-prompt-modal-header.emh-accent-left { box-shadow: inset 4px 0 0 0 var(--emh-accent, var(--enriched-primary)); } .enriched-prompt-modal-header.emh-accent-top { box-shadow: inset 0 4px 0 0 var(--emh-accent, var(--enriched-primary)); } .enriched-prompt-modal-header.emh-image { background: transparent; overflow: hidden; } .enriched-prompt-modal-header.emh-image::before { content: ""; position: absolute; inset: 0; background-image: var(--emh-image, none); background-size: cover; background-position: center; filter: brightness(.9); z-index: 0; } .enriched-prompt-modal-header.emh-image::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, color-mix(in oklab, #000 25%, transparent), transparent 70%); z-index: 0; } .enriched-prompt-modal-header.emh-image .enriched-prompt-modal-title { color: #fff; } .enriched-prompt-modal-header.emh-none { background: transparent; box-shadow: none; } .enriched-prompt-modal-footer.emf-line { box-shadow: inset 0 var(--emf-line-size) 0 0 var(--emf-accent, var(--enriched-primary)); } .enriched-prompt-modal-footer.emf-solid { background: var(--emf-accent, var(--enriched-primary)); border-top-color: transparent; color: #fff; box-shadow: 0 -6px 16px color-mix(in oklab, var(--emf-accent, var(--enriched-primary)) 24%, transparent); } .enriched-prompt-modal-footer.emf-solid .enriched-prompt-btn { box-shadow: var(--enriched-shadow-sm); } .enriched-prompt-modal-footer.emf-solid .enriched-prompt-btn:hover { transform: translateY(-2px); } .enriched-prompt-modal-footer.emf-gradient { background: linear-gradient(135deg, var(--emf-accent, var(--enriched-primary)) 0%, color-mix(in oklab, var(--emf-accent, var(--enriched-primary)) 70%, #000) 100%); border-top-color: transparent; color: #fff; box-shadow: 0 -8px 22px color-mix(in oklab, var(--emf-accent, var(--enriched-primary)) 28%, transparent); position: relative; } .enriched-prompt-modal-footer.emf-gradient::before { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at 30% 0%, rgba(255, 255, 255, .25), transparent 70%); opacity: .2; pointer-events: none; } .enriched-prompt-modal-footer.emf-gradient .enriched-prompt-btn { color: #fff; box-shadow: 0 0 0 2px color-mix(in oklab, #fff 30%, transparent); background: rgba(255, 255, 255, .12); backdrop-filter: blur(4px); transition: all .2s ease; } .enriched-prompt-modal-footer.emf-gradient .enriched-prompt-btn:hover { transform: translateY(-2px); background: rgba(255, 255, 255, .2); box-shadow: 0 0 0 2px rgba(255, 255, 255, .45), 0 8px 16px rgba(0, 0, 0, .2); } .enriched-prompt-modal-footer.emf-gradient .enriched-prompt-btn-primary { background: rgba(255, 255, 255, .18); box-shadow: 0 0 0 2px rgba(255, 255, 255, .35), 0 6px 12px rgba(0, 0, 0, .2); } .enriched-prompt-modal-footer.emf-gradient .enriched-prompt-btn-primary:hover { background: rgba(255, 255, 255, .28); transform: translateY(-2px); } .enriched-prompt-modal-footer.emf-shadow { box-shadow: 0 -10px 22px color-mix(in oklab, var(--emf-accent, var(--enriched-primary)) 18%, transparent); } .enriched-prompt-modal-footer.emf-ghost { background: transparent; border-top-color: transparent; box-shadow: none; } .enriched-prompt-modal-footer.emf-striped::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 8px; background: repeating-linear-gradient(135deg, var(--emf-accent, var(--enriched-primary)) 0 12px, color-mix(in oklab, var(--emf-accent, var(--enriched-primary)) 65%, #fff) 12px 24px); border-top-left-radius: inherit; border-top-right-radius: inherit; } .enriched-prompt-modal-footer.emf-subtle { background: color-mix(in oklab, var(--emf-accent, var(--enriched-primary)) 6%, transparent); box-shadow: inset 0 1px 0 color-mix(in oklab, var(--emf-accent, var(--enriched-primary)) 35%, transparent); } .enriched-prompt-modal-footer.emf-spaced { justify-content: space-between; } .enriched-prompt-modal-footer.emf-none { background: transparent; border-top-color: transparent; box-shadow: none; } .enriched-prompt-modal-header { --emh-fg: var(--enriched-text); } .enriched-prompt-modal-footer { --emf-fg: #fff; } .enriched-prompt-modal-header.emh-has-bg { color: var(--emh-fg) !important; } .enriched-prompt-modal-header.emh-has-bg .enriched-prompt-modal-title { color: var(--emh-fg) !important; } .enriched-prompt-modal-header.emh-has-bg .enriched-prompt-modal-title i { color: var(--emh-fg) !important; } .enriched-prompt-modal-header.emh-has-bg .enriched-prompt-modal-close { color: var(--emh-fg) !important; } .enriched-prompt-modal-header.emh-has-bg .enriched-prompt-modal-close:hover { background-color: color-mix(in oklab, var(--emh-fg) 12%, transparent) !important; } .enriched-prompt-modal-header.emh-solid, .enriched-prompt-modal-header.emh-gradient, .enriched-prompt-modal-header.emh-image, .enriched-prompt-modal-header.emh-subtle { color: var(--emh-fg) !important; } .enriched-prompt-modal-footer.emf-solid, .enriched-prompt-modal-footer.emf-gradient, .enriched-prompt-modal-footer.emf-subtle { color: var(--emf-fg, #fff) !important; } .enriched-prompt-modal-footer.emf-solid .enriched-prompt-btn, .enriched-prompt-modal-footer.emf-gradient .enriched-prompt-btn, .enriched-prompt-modal-footer.emf-subtle .enriched-prompt-btn { color: var(--emf-fg, #fff); } .enriched-prompt-modal-footer.emf-solid .enriched-prompt-btn:hover, .enriched-prompt-modal-footer.emf-gradient .enriched-prompt-btn:hover, .enriched-prompt-modal-footer.emf-subtle .enriched-prompt-btn:hover { background-color: color-mix(in oklab, var(--emf-fg, #fff) 18%, transparent); } .enriched-sep-wrap { display: block; } .enriched-sep-head { display: flex; align-items: center; gap: 1rem; } .enriched-sep-head i { font-size: 1rem; opacity: .9; } .enriched-sep-title { font-weight: 700; letter-spacing: var(--enriched-tracking-tight); } .enriched-sep-subtitle { display: block; margin-left: auto; opacity: .75; } .enriched-sep-body { display: flex; flex-direction: column; gap: var(--enriched-spacing-md); } .enriched-sep-card { background: var(--enriched-surface); backdrop-filter: blur(var(--enriched-glass-blur)); border: var(--enriched-glass-border); box-shadow: var(--enriched-glass-shadow); border-radius: var(--enriched-border-radius-lg); padding: var(--enriched-spacing-lg); } .enriched-sep-line { position: relative; padding: var(--enriched-spacing-lg); border-radius: var(--enriched-border-radius-md); background: color-mix(in oklab, var(--enriched-primary) 4%, transparent); } .enriched-sep-line::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--enriched-primary); border-top-left-radius: inherit; border-bottom-left-radius: inherit; } .enriched-sep-plain { padding: var(--enriched-spacing-lg); border-radius: var(--enriched-border-radius-md); background: var(--enriched-surface-light); border: 1px solid var(--enriched-border); } .enriched-sep-ghost { padding: var(--enriched-spacing-lg); border-radius: var(--enriched-border-radius-md); background: transparent; border: 1px dashed var(--enriched-border-dark); } [data-theme="dark"] .enriched-sep-plain { background: color-mix(in oklab, #fff 6%, transparent); } [data-theme="dark"] .enriched-sep-ghost { border-color: color-mix(in oklab, #fff 16%, transparent); } :root { --toast-bleed: 5rem; --toast-gap: .75rem; --toast-radius: .75rem; --toast-padding: 1rem; --toast-width-min: 280px; --toast-width-ideal-ch: 38ch; --toast-width-max: 420px; --toast-anim-distance: 28px; --toast-anim-duration: .32s; --toast-anim-ease: cubic-bezier(.2, .7, .2, 1); --toast-z: 2147483647; --toast-blur: 16px; --toast-text: #111827; --toast-text-muted: #374151; --toast-title-weight: 600; --toast-surface: rgba(255, 255, 255, .82); --toast-surface-alt: rgba(255, 255, 255, .64); --toast-border: 1px solid rgba(17, 24, 39, .10); --toast-shadow: 0 10px 25px rgba(0, 0, 0, .08); --toast-primary: #4e6ae6; --toast-success: #22c55e; --toast-danger: #ef4444; --toast-warning: #f59e0b; --toast-info: #0ea5e9; --toast-success-soft: rgba(34, 197, 94, .18); --toast-danger-soft: rgba(239, 68, 68, .18); --toast-warning-soft: rgba(245, 158, 11, .20); --toast-info-soft: rgba(14, 165, 233, .18); --toast-glass-bg: var(--toast-surface); --toast-glass-border: 1px solid rgba(255, 255, 255, .18); --toast-glass-shadow: 0 8px 32px rgba(31, 38, 135, .15); --toast-frosted-bg: rgba(255, 255, 255, .50); --toast-frosted-border: 1px solid rgba(255, 255, 255, .30); --toast-frosted-shadow: 0 4px 12px rgba(0, 0, 0, .05); --toast-aurora-bg: linear-gradient(135deg, rgba(255, 255, 255, .7) 0%, rgba(255, 255, 255, .4) 100%); --toast-aurora-border: 1px solid rgba(255, 255, 255, .50); --toast-aurora-shadow: 0 8px 32px rgba(31, 38, 135, .15); --toast-aurora-stop1: #ff9a9e; --toast-aurora-stop2: #fad0c4; --toast-aurora-stop3: #a1c4fd; --toast-aurora-stop4: #c2e9fb; --toast-aurora-stop5: #ffecd2; --toast-aurora-stop6: #fcb69f; --toast-aurora-bar: linear-gradient(90deg, var(--toast-aurora-stop1) 0%, var(--toast-aurora-stop2) 20%, var(--toast-aurora-stop3) 40%, var(--toast-aurora-stop4) 60%, var(--toast-aurora-stop5) 80%, var(--toast-aurora-stop6) 100%); --toast-retro-bg: #fff7ed; --toast-retro-border-color: #8a5a44; --toast-retro-border: 2px solid var(--toast-retro-border-color); --toast-retro-shadow: 5px 5px 0 var(--toast-retro-border-color); --toast-retro-text: #5a3929; --toast-skeuo-bg: #f0f0f0; --toast-skeuo-border: 1px solid rgba(255, 255, 255, .20); --toast-skeuo-shadow-1: 8px 8px 16px #d9d9d9; --toast-skeuo-shadow-2: -8px -8px 16px #ffffff; --toast-base-bg: var(--toast-glass-bg); --toast-base-border: var(--toast-glass-border); --toast-base-shadow: var(--toast-glass-shadow); } [data-theme="dark"] { --toast-text: #e6ebf3; --toast-text-muted: #cfd7e3; --toast-surface: rgba(10, 14, 24, .84); --toast-surface-alt: rgba(14, 20, 34, .62); --toast-border: 1px solid rgba(255, 255, 255, .14); --toast-shadow: 0 18px 38px rgba(0, 0, 0, .55); --toast-success-soft: rgba(34, 197, 94, .28); --toast-danger-soft: rgba(239, 68, 68, .28); --toast-warning-soft: rgba(245, 158, 11, .30); --toast-info-soft: rgba(14, 165, 233, .28); --toast-glass-bg: rgba(14, 20, 34, .78); --toast-glass-border: 1px solid rgba(255, 255, 255, .12); --toast-glass-shadow: 0 10px 24px rgba(0, 0, 0, .45); --toast-frosted-bg: rgba(24, 32, 54, .66); --toast-frosted-border: 1px solid rgba(255, 255, 255, .16); --toast-frosted-shadow: 0 8px 20px rgba(0, 0, 0, .5); --toast-aurora-bg: linear-gradient(135deg, rgba(32, 40, 66, .85) 0%, rgba(18, 22, 38, .85) 100%); --toast-aurora-border: 1px solid rgba(255, 255, 255, .10); --toast-aurora-shadow: 0 10px 28px rgba(0, 0, 0, .55); --toast-aurora-stop1: #fda4af; --toast-aurora-stop2: #fed7e2; --toast-aurora-stop3: #93c5fd; --toast-aurora-stop4: #bae6fd; --toast-aurora-stop5: #fde68a; --toast-aurora-stop6: #fdba74; --toast-retro-bg: #3a2a21; --toast-retro-border-color: #dab38d; --toast-retro-border: 2px solid var(--toast-retro-border-color); --toast-retro-shadow: 5px 5px 0 #d9ac7a; --toast-retro-text: #f5e8db; --toast-skeuo-bg: #2d3748; --toast-skeuo-border: 1px solid rgba(255, 255, 255, .20); --toast-skeuo-shadow-1: 8px 8px 16px #1a202c; --toast-skeuo-shadow-2: -8px -8px 16px #4a5568; --toast-base-bg: var(--toast-glass-bg); --toast-base-border: var(--toast-glass-border); --toast-base-shadow: var(--toast-glass-shadow); } .enriched-prompt-toast-host { position: fixed !important; inset: 0; width: 100dvw; height: 100dvh; z-index: var(--toast-z); pointer-events: none; overflow: visible; } .enriched-prompt-toast-container { position: absolute; pointer-events: none; display: flex; flex-direction: column; gap: var(--toast-gap); overflow: visible; } .enriched-prompt-toast-container[data-position="top-left"] { top: calc(env(safe-area-inset-top, 0px) + var(--toast-bleed)); left: calc(env(safe-area-inset-left, 0px) + var(--toast-bleed)); right: auto; bottom: auto; transform: none; } .enriched-prompt-toast-container[data-position="top-right"] { top: calc(env(safe-area-inset-top, 0px) + var(--toast-bleed)); right: calc(env(safe-area-inset-right, 0px) + var(--toast-bleed)); left: auto; bottom: auto; transform: none; } .enriched-prompt-toast-container[data-position="bottom-left"] { bottom: calc(env(safe-area-inset-bottom, 0px) + var(--toast-bleed)); left: calc(env(safe-area-inset-left, 0px) + var(--toast-bleed)); right: auto; top: auto; transform: none; } .enriched-prompt-toast-container[data-position="bottom-right"] { bottom: calc(env(safe-area-inset-bottom, 0px) + var(--toast-bleed)); right: calc(env(safe-area-inset-right, 0px) + var(--toast-bleed)); left: auto; top: auto; transform: none; } .enriched-prompt-toast-container[data-position="top-center"] { top: calc(env(safe-area-inset-top, 0px) + var(--toast-bleed)); left: 50%; right: auto; bottom: auto; transform: translateX(-50%); } .enriched-prompt-toast-container[data-position="bottom-center"] { bottom: calc(env(safe-area-inset-bottom, 0px) + var(--toast-bleed)); left: 50%; right: auto; top: auto; transform: translateX(-50%); } .enriched-prompt-toast-container[data-position$="-left"] { align-items: flex-start; } .enriched-prompt-toast-container[data-position$="-right"] { align-items: flex-end; } .enriched-prompt-toast-container[data-position$="-center"] { align-items: center; } .enriched-prompt-toast { background: var(--toast-base-bg); backdrop-filter: blur(var(--toast-blur)); border: var(--toast-base-border); box-shadow: var(--toast-base-shadow); border-radius: var(--toast-radius); padding: var(--toast-padding); margin: 0; width: clamp(var(--toast-width-min), var(--toast-width-ideal-ch), var(--toast-width-max)); max-width: calc(100dvw - (env(safe-area-inset-left, 0px) + env(safe-area-inset-right, 0px) + 2*var(--toast-bleed))); will-change: transform, opacity; display: flex; pointer-events: all; align-items: center; justify-content: center; position: relative; overflow: hidden; opacity: 0; text-transform: capitalize; transform: translateY(var(--toast-anim-distance)); transition: transform var(--toast-anim-duration) var(--toast-anim-ease), opacity var(--toast-anim-duration) var(--toast-anim-ease); } .enriched-prompt-toast.show { opacity: 1; transform: translate3d(0, 0, 0); } .enriched-prompt-toast.leaving { opacity: 0; } .enriched-prompt-toast-container[data-position$="-right"] .enriched-prompt-toast { transform: translateX(var(--toast-anim-distance)); } .enriched-prompt-toast-container[data-position$="-right"] .enriched-prompt-toast.show { transform: translateX(0); } .enriched-prompt-toast-container[data-position$="-right"] .enriched-prompt-toast.leaving { transform: translateX(var(--toast-anim-distance)); } .enriched-prompt-toast-container[data-position$="-left"] .enriched-prompt-toast { transform: translateX(calc(var(--toast-anim-distance) * -1)); } .enriched-prompt-toast-container[data-position$="-left"] .enriched-prompt-toast.show { transform: translateX(0); } .enriched-prompt-toast-container[data-position$="-left"] .enriched-prompt-toast.leaving { transform: translateX(calc(var(--toast-anim-distance) * -1)); } .enriched-prompt-toast-container[data-position="top-center"] .enriched-prompt-toast { transform: translateY(calc(var(--toast-anim-distance) * -1)); } .enriched-prompt-toast-container[data-position="top-center"] .enriched-prompt-toast.show { transform: translateY(0); } .enriched-prompt-toast-container[data-position="top-center"] .enriched-prompt-toast.leaving { transform: translateY(calc(var(--toast-anim-distance) * -1)); } .enriched-prompt-toast-container[data-position="bottom-center"] .enriched-prompt-toast { transform: translateY(var(--toast-anim-distance)); } .enriched-prompt-toast-container[data-position="bottom-center"] .enriched-prompt-toast.show { transform: translateY(0); } .enriched-prompt-toast-container[data-position="bottom-center"] .enriched-prompt-toast.leaving { transform: translateY(var(--toast-anim-distance)); } @media (prefers-reduced-motion: reduce) { .enriched-prompt-toast { transition: opacity .2s linear !important; transform: none !important; } .enriched-prompt-toast.show, .enriched-prompt-toast.leaving { transform: none !important; } } .enriched-prompt-toast-icon { font-size: 1.25rem; width: 1.5rem; height: 1.5rem; display: flex; align-items: center; justify-content: center; border-radius: 50%; margin-right: .9rem; flex-shrink: 0; background: var(--toast-info-soft); color: var(--toast-info); } .enriched-prompt-toast-content { flex-grow: 1; min-width: 0; } .enriched-prompt-toast-title { font-weight: var(--toast-title-weight); color: var(--toast-text); margin-bottom: .25rem; line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .enriched-prompt-toast-message { color: var(--toast-text-muted); font-size: .875rem; line-height: 1.4; word-wrap: break-word; } .enriched-prompt-toast-close { background: transparent; border: none; color: var(--toast-text-muted); cursor: pointer; margin-left: .5rem; align-self: flex-start; font-size: 1rem; width: 1.75rem; height: 1.75rem; display: flex; align-items: center; justify-content: center; border-radius: 50%; transition: background .2s ease, color .2s ease, transform .08s ease; flex-shrink: 0; } .enriched-prompt-toast-close:hover { background: rgba(0, 0, 0, .05); color: var(--toast-text); } [data-theme="dark"] .enriched-prompt-toast-close:hover { background: rgba(255, 255, 255, .08); } .enriched-prompt-toast-progress { position: absolute; bottom: 0; left: 0; height: 3px; background: var(--toast-primary); width: 100%; transform: scaleX(1); transform-origin: left; transition: transform .3s linear; } .enriched-prompt-toast-success { --toast-icon-color: var(--toast-success); --toast-icon-bg: var(--toast-success-soft); --toast-progress-color: var(--toast-success); } .enriched-prompt-toast-error { --toast-icon-color: var(--toast-danger); --toast-icon-bg: var(--toast-danger-soft); --toast-progress-color: var(--toast-danger); } .enriched-prompt-toast-warning { --toast-icon-color: var(--toast-warning); --toast-icon-bg: var(--toast-warning-soft); --toast-progress-color: var(--toast-warning); } .enriched-prompt-toast-info { --toast-icon-color: var(--toast-info); --toast-icon-bg: var(--toast-info-soft); --toast-progress-color: var(--toast-info); } .enriched-prompt-toast-success .enriched-prompt-toast-icon { background: var(--toast-icon-bg); color: var(--toast-icon-color); } .enriched-prompt-toast-error .enriched-prompt-toast-icon { background: var(--toast-icon-bg); color: var(--toast-icon-color); } .enriched-prompt-toast-warning .enriched-prompt-toast-icon { background: var(--toast-icon-bg); color: var(--toast-icon-color); } .enriched-prompt-toast-info .enriched-prompt-toast-icon { background: var(--toast-icon-bg); color: var(--toast-icon-color); } .enriched-prompt-toast-success .enriched-prompt-toast-progress { background: var(--toast-progress-color); } .enriched-prompt-toast-error .enriched-prompt-toast-progress { background: var(--toast-progress-color); } .enriched-prompt-toast-warning .enriched-prompt-toast-progress { background: var(--toast-progress-color); } .enriched-prompt-toast-info .enriched-prompt-toast-progress { background: var(--toast-progress-color); } .enriched-prompt-toast-container[data-design="glass"] .enriched-prompt-toast, .enriched-prompt-glass { --toast-base-bg: var(--toast-glass-bg); --toast-base-border: var(--toast-glass-border); --toast-base-shadow: var(--toast-glass-shadow); } .enriched-prompt-toast-container[data-design="frosted"] .enriched-prompt-toast, .enriched-prompt-frosted { --toast-base-bg: var(--toast-frosted-bg); --toast-base-border: var(--toast-frosted-border); --toast-base-shadow: var(--toast-frosted-shadow); } .enriched-prompt-toast-container[data-design="aurora"] .enriched-prompt-toast, .enriched-prompt-aurora { --toast-base-bg: var(--toast-aurora-bg); --toast-base-border: var(--toast-aurora-border); --toast-base-shadow: var(--toast-aurora-shadow); position: relative; } .enriched-prompt-toast-container[data-design="aurora"] .enriched-prompt-toast::before, .enriched-prompt-aurora.enriched-prompt-toast::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 5px; background: var(--toast-aurora-bar); z-index: 1; } .enriched-prompt-toast-container[data-design="retro"] .enriched-prompt-toast, .enriched-prompt-retro { --toast-base-bg: var(--toast-retro-bg); --toast-base-border: var(--toast-retro-border); --toast-base-shadow: var(--toast-retro-shadow); color: var(--toast-retro-text); } .enriched-prompt-toast-container[data-design="retro"] .enriched-prompt-toast .enriched-prompt-toast-title, .enriched-prompt-retro .enriched-prompt-toast-title { color: var(--toast-retro-text); } .enriched-prompt-toast-container[data-design="retro"] .enriched-prompt-toast .enriched-prompt-toast-message, .enriched-prompt-retro .enriched-prompt-toast-message { color: color-mix(in oklab, var(--toast-retro-text) 78%, transparent); } .enriched-prompt-toast-container[data-design="skeuomorphism"] .enriched-prompt-toast, .enriched-prompt-skeuomorphism { --toast-base-bg: var(--toast-skeuo-bg); --toast-base-border: var(--toast-skeuo-border); --toast-base-shadow: var(--toast-skeuo-shadow-1), var(--toast-skeuo-shadow-2); backdrop-filter: none; } [data-theme="dark"] .enriched-prompt-toast { text-shadow: 0 0 0 transparent; } [data-theme="dark"] .enriched-prompt-toast .enriched-prompt-toast-message { color: color-mix(in oklab, var(--toast-text) 72%, transparent); } @media (max-width: 768px) { .enriched-prompt-modal { width: 95%; } .enriched-prompt-toast { width: 300px; } .enriched-prompt-toast-container[data-position$="-center"] { width: 100%; } } @media (max-width: 480px) { .enriched-prompt-page-title { font-size: 2rem; } .enriched-prompt-btn { width: 100%; } } .enriched-plate-overlay { position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; background: var(--enriched-surface); z-index: var(--enriched-z-modal); overflow: hidden; visibility: hidden; opacity: 0; transition: var(--enriched-transition-normal); } .enriched-plate-overlay.active { visibility: visible; opacity: 1; } .enriched-plate { position: absolute; background: var(--enriched-surface-full); width: 100%; height: 100%; overflow: auto; transition: transform var(--enriched-transition-normal) var(--enriched-easing); } .enriched-plate[data-origin="top"] { transform: translateY(-100%); } .enriched-plate[data-origin="bottom"] { transform: translateY(100%); } .enriched-plate[data-origin="left"] { transform: translateX(-100%); } .enriched-plate[data-origin="right"] { transform: translateX(100%); } .enriched-plate-overlay.active .enriched-plate { transform: none; } .enriched-plate-close { position: fixed; z-index: calc(var(--enriched-z-modal) + 10); background: var(--enriched-surface); border: 1px solid var(--enriched-border); border-radius: var(--enriched-border-radius-o); width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; cursor: pointer; font-size: 1.25rem; color: var(--enriched-text); transition: var(--enriched-transition-fast); box-shadow: var(--enriched-shadow-sm); } .enriched-plate-close:hover { background: var(--enriched-primary); color: white; transform: scale(1.1); } .enriched-plate-close{--inset:var(--enriched-spacing-md);} .enriched-plate-close[data-inset="xxs"]{--inset:var(--enriched-spacing-xxs);} .enriched-plate-close[data-inset="xs"]{--inset:var(--enriched-spacing-xs);} .enriched-plate-close[data-inset="sm"]{--inset:var(--enriched-spacing-sm);} .enriched-plate-close[data-inset="sh"]{--inset:var(--enriched-spacing-sh);} .enriched-plate-close[data-inset="nm"]{--inset:var(--enriched-spacing-nm);} .enriched-plate-close[data-inset="lg"]{--inset:var(--enriched-spacing-lg);} .enriched-plate-close[data-inset="xl"]{--inset:var(--enriched-spacing-xl);} .enriched-plate-close[data-inset="xxl"]{--inset:var(--enriched-spacing-xxl);} .enriched-plate-close[data-inset="xxxl"]{--inset:var(--enriched-spacing-xxxl);} .enriched-plate-close[data-inset="xxxxl"]{--inset:var(--enriched-spacing-xxxxl);} .enriched-plate-close[data-position="top-left"]{top:var(--inset);left:var(--inset);} .enriched-plate-close[data-position="top-right"]{top:var(--inset);right:var(--inset);} .enriched-plate-close[data-position="bottom-left"]{bottom:var(--inset);left:var(--inset);} .enriched-plate-close[data-position="bottom-right"]{bottom:var(--inset);right:var(--inset);} .enriched-plate-close[data-position="center-top"]{top:var(--inset);left:50%;transform:translateX(-50%);} .enriched-plate-close[data-position="center-bottom"]{bottom:var(--inset);left:50%;transform:translateX(-50%);} .enriched-plate-content { padding: 0; min-height: 100%; } .enriched-plate-iframe { width: 100%; height: 100%; border: none; background: white; } .enriched-plate-loading { display: flex; align-items: center; justify-content: center; height: 100%; flex-direction: column; gap: var(--enriched-spacing-lg); } .enriched-plate-loading-spinner { width: 40px; height: 40px; border: 3px solid var(--enriched-border-light); border-top: 3px solid var(--enriched-primary); border-radius: 50%; animation: enriched-plate-spin 1s linear infinite; } @keyframes enriched-plate-spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } .enriched-plate-glass .enriched-plate { background: rgba(255, 255, 255, 0.85); backdrop-filter: blur(var(--enriched-glass-blur)); -webkit-backdrop-filter: blur(var(--enriched-glass-blur)); } [data-theme="dark"] .enriched-plate-glass .enriched-plate { background: rgba(14, 20, 34, 0.85); } /** **/ /** ENRICHED PROMPT DESIGNER **/ /** **/ /** **/ /** ENRICHED TABLE DESIGNER **/ /** **/ .enriched-cell-design-btn { display: flex; align-items: center; justify-content: center; width: 2.5rem; height: 2.5rem; border: none; border-radius: var(--enriched-border-radius-sm); background: transparent; color: var(--enriched-text); cursor: pointer; transition: all 0.3s ease; } .enriched-cell-design-btn:hover { background: rgba(0, 0, 0, 0.05); } [data-theme="dark"] .enriched-cell-design-btn:hover { background: rgba(255, 255, 255, 0.1); } .enriched-cell-design-btn.active { background: var(--enriched-primary); color: white; } .enriched-cell-glass { background: var(--enriched-surface); backdrop-filter: blur(var(--enriched-glass-blur)); -webkit-backdrop-filter: blur(var(--enriched-glass-blur)); border: var(--enriched-glass-border); box-shadow: var(--enriched-glass-shadow); border-radius: var(--enriched-border-radius-lg); padding: var(--enriched-spacing-lg); transition: all 0.3s ease; } .enriched-cell-glass:hover { box-shadow: var(--enriched-glass-dark-shadow); } .enriched-cell-glass.enriched-cell-mega-controls { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: var(--enriched-spacing-md); padding: var(--enriched-spacing-lg); } .enriched-cell-glass.enriched-cell-mega-controls h3 { margin: 0; font-size: 1.5rem; color: var(--enriched-text); font-weight: 600; } .enriched-cell-glass.enriched-cell-mega-controls .enriched-cell-controls-row { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: var(--enriched-spacing-sm); } .enriched-cell-glass.enriched-cell-mega-controls.is-dense .enriched-cell-controls-row { gap: 6px; } .enriched-cell-table-container { overflow: hidden; padding: var(--enriched-spacing-lg); } .enriched-cell-table-free { overflow: auto; } .enriched-cell-table-controls { display: flex; flex-wrap: wrap; gap: var(--enriched-spacing-md); justify-content: space-between; align-items: center; margin-bottom: var(--enriched-spacing-lg); } .enriched-cell-search-box { position: relative; flex: 1; max-width: 400px; } .enriched-cell-search-icon { position: absolute; left: var(--enriched-spacing-md); top: 50%; transform: translateY(-50%); color: var(--enriched-text-lighter); z-index: 2; } .enriched-cell-search-input { width: 100%; padding: var(--enriched-spacing-sm) var(--enriched-spacing-sm) var(--enriched-spacing-sm) 2.5rem; border: 1px solid var(--enriched-border); border-radius: var(--enriched-border-radius-md); font-size: 0.875rem; transition: all 0.3s ease; background: var(--enriched-surface-dark); color: var(--enriched-text); position: relative; box-shadow: var(--enriched-shadow-sm); } .enriched-cell-search-input:focus { outline: none; border-color: var(--table-primary); box-shadow: 0 0 0 3px rgba(67, 97, 238, 0.15); } .enriched-cell-controls-group { display: flex; gap: var(--enriched-spacing-sm); flex-wrap: wrap; } .enriched-cell-select-wrapper { position: relative; } .enriched-cell-select { padding: var(--enriched-spacing-sm) 2.5rem var(--enriched-spacing-sm) var(--enriched-spacing-md); border: 1px solid var(--enriched-border); border-radius: var(--enriched-border-radius-md); font-size: 0.875rem; background: var(--enriched-surface-dark); color: var(--enriched-text); appearance: none; cursor: pointer; min-width: 150px; transition: all 0.3s ease; box-shadow: var(--enriched-shadow-sm); } .enriched-cell-select:focus { outline: none; border-color: var(--table-primary); box-shadow: 0 0 0 3px rgba(67, 97, 238, 0.15); } .enriched-cell-select-wrapper::after { font: var(--fa-font-solid, normal 900 1em/1 "Font Awesome 6 Free"); content: "\f078"; font-size: 0.7rem; font-variant: normal; text-rendering: auto; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; position: absolute; right: var(--enriched-spacing-md); top: 50%; transform: translateY(-50%); pointer-events: none; color: var(--enriched-text-lighter); } .enriched-cell-select.transparent { color: transparent; text-shadow: none; caret-color: transparent; } .enriched-cell-select.transparent option { color: initial; } .enriched-hydrating * { transition: none !important; } .enriched-cell-table-wrapper { overflow-x: auto; border-radius: var(--enriched-border-radius-md); margin-bottom: var(--enriched-spacing-lg); box-shadow: var(--enriched-shadow-sm); } .enriched-cell-table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 0.875rem; background: var(--enriched-surface); backdrop-filter: blur(var(--enriched-glass-blur)); border-radius: var(--enriched-border-radius-md); overflow: hidden; } .enriched-cell-table th { background: var(--table-header-bg); padding: var(--enriched-spacing-md); text-align: left; font-weight: 600; color: var(--table-header-text); position: relative; cursor: pointer; user-select: none; border-bottom: 1px solid var(--table-border-dark); transition: all 0.3s ease; text-transform: capitalize; } .enriched-cell-table th:hover { background: rgba(67, 97, 238, 0.1); } .enriched-cell-table td { padding: var(--enriched-spacing-md); border-bottom: 1px solid var(--table-border-dark); vertical-align: top; background: var(--enriched-surface); } .enriched-cell-table-wrapper.et-ordering .enriched-cell-pagination-controls { display: none; } .enriched-cell-table-wrapper.et-ordering .enriched-cell-table th { cursor: default; opacity: .8; } .enriched-cell-table-wrapper.et-ordering .enriched-cell-table tbody tr { cursor: move; } .enriched-cell-table-wrapper.et-ordering .enriched-cell-table tbody tr.et-chosen td { filter: brightness(1.02); } .enriched-cell-table-wrapper.et-ordering .enriched-cell-table tbody tr.et-ghost td { background: var(--table-row-hover) !important; outline: 2px dashed var(--enriched-primary); } .enriched-cell-table-wrapper.et-ordering .enriched-cell-table tbody tr .et-handle { cursor: grab; } .enriched-cell-table-wrapper.et-ordering .enriched-cell-table tbody tr .et-handle:active { cursor: grabbing; } .enriched-cell-table tr:nth-child(odd) td { background: var(--table-row-odd); } .enriched-cell-table tr:nth-child(even) td { background: var(--table-row-even); } .enriched-cell-table tr:last-child td { border-bottom: none; } .enriched-cell-table tr:hover td { background: var(--table-row-hover); } .enriched-cell-table th[data-col="actions"], .enriched-cell-table td[data-col="actions"] { width: 1%; white-space: nowrap; padding-left: var(--enriched-spacing-sm); padding-right: var(--enriched-spacing-sm); } .enriched-cell-table td[data-col="actions"] .enriched-main-actions { display: flex; gap: var(--enriched-spacing-xs); justify-content: flex-end; flex-wrap: nowrap; } .enriched-cell-table th, .enriched-cell-table td { vertical-align: middle; } .enriched-cell-table td:last-child .enriched-main-actions { align-items: center; } .enriched-cell-table--lined { border: 1px solid var(--table-border-dark); } .enriched-cell-table--lined th, .enriched-cell-table--lined td { background: var(--enriched-surface); border-right: 1px solid var(--table-border-dark); border-bottom: 1px solid var(--table-border-dark); } .enriched-cell-table--lined th:last-child, .enriched-cell-table--lined td:last-child { border-right: 0; } .enriched-cell-table--lined tr:last-child td { border-bottom: 0; } .enriched-cell-table--lined tr:nth-child(odd) td, .enriched-cell-table--lined tr:nth-child(even) td { background: var(--enriched-surface); } .enriched-cell-table--lined tr:hover td { background: var(--table-row-hover); } .enriched-cell-sort-icon { margin-left: var(--enriched-spacing-xs); font-size: 0.75rem; } .enriched-cell-sort-icon::after { font: var(--fa-font-solid, normal 900 1em/1 "Font Awesome 6 Free"); display: inline-block; margin-left: .25rem; } .enriched-cell-sort-asc .enriched-cell-sort-icon::after { content: "\f077"; } .enriched-cell-sort-desc .enriched-cell-sort-icon::after { content: "\f078"; } .enriched-cell-status { display: inline-flex; align-items: center; gap: var(--enriched-spacing-xs); padding: var(--enriched-spacing-xs) var(--enriched-spacing-sm); border-radius: var(--enriched-border-radius-o); font-size: 0.75rem; font-weight: 500; line-height: 1; background: rgba(0, 0, 0, 0.1); } [data-theme="dark"] .enriched-cell-status { background: rgba(255, 255, 255, 0.1); } .enriched-cell-status--success { background-color: rgba(40, 167, 69, 0.15); color: var(--enriched-status-success); } .enriched-cell-status--warn { background-color: rgba(255, 152, 0, 0.15); color: var(--enriched-status-warn); } .enriched-cell-status--danger { background-color: rgba(220, 53, 69, 0.15); color: var(--enriched-status-danger); } .enriched-cell-status--info { background-color: rgba(23, 162, 184, 0.15); color: var(--enriched-status-info); } .enriched-cell-status--neutral { background-color: rgba(108, 117, 125, 0.15); color: var(--enriched-status-neutral); } .enriched-cell-status--processing { background-color: rgba(0, 123, 255, 0.15); color: var(--enriched-status-processing); } .enriched-cell-status--completed { background-color: rgba(40, 167, 69, 0.15); color: var(--enriched-status-completed); } .enriched-cell-status--cancelled { background-color: rgba(220, 53, 69, 0.15); color: var(--enriched-status-cancelled); } .enriched-cell-status--draft { background-color: rgba(108, 117, 125, 0.15); color: var(--enriched-status-draft); } .enriched-cell-action-view:hover { color: var(--enriched-info); } .enriched-cell-action-edit:hover { color: var(--enriched-primary); } .enriched-cell-action-delete:hover { color: var(--enriched-danger); } .enriched-cell-cards-container { display: none; gap: var(--enriched-spacing-md); flex-direction: column; } .enriched-cell-table-wrapper, .enriched-cell-cards-container { opacity: 0; transition: opacity .3s ease; } .hidden, .is_hidden, .is-hidden { display: none !important; } .is-visible { opacity: 1 !important; } .no-gap { gap: 0 !important; } .no-border-radius { border-radius: 0 !important; } .no-box-shadow { box-shadow: none !important; } .enriched-cell-card { padding: var(--enriched-spacing-md); border-radius: var(--enriched-border-radius-md); background: var(--enriched-surface); backdrop-filter: blur(var(--enriched-glass-blur)); border: var(--enriched-glass-border); box-shadow: var(--enriched-shadow-md); } .enriched-cell-card-header { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: var(--enriched-spacing-sm); } .enriched-cell-card-title { font-weight: 600; font-size: 1rem; color: var(--enriched-text); } .enriched-cell-card-field { display: flex; justify-content: space-between; margin-bottom: var(--enriched-spacing-xs); padding: var(--enriched-spacing-xs) 0; border-bottom: 1px solid var(--enriched-border-light); } .enriched-cell-card-field:last-child { border-bottom: none; } .enriched-cell-card-label { font-weight: 500; color: var(--enriched-text-light); } .enriched-cell-card-value { text-align: right; color: var(--enriched-text); } .enriched-cell-card-actions { display: flex; gap: var(--enriched-spacing-xs); margin-top: var(--enriched-spacing-md); justify-content: flex-end; } .enriched-cell-pagination { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: var(--enriched-spacing-lg); margin-top: var(--enriched-spacing-lg); } .enriched-cell-pagination-info { color: var(--enriched-text-light); font-size: 0.875rem; } .enriched-cell-pagination-controls { display: flex; gap: var(--enriched-spacing-xs); } .enriched-cell-pagination-btn { display: inline-flex; align-items: center; justify-content: center; min-width: 2.25rem; height: 2.25rem; padding: 0 var(--enriched-spacing-sm); border: 1px solid var(--enriched-border); border-radius: var(--enriched-border-radius-md); background: var(--enriched-surface-dark); color: var(--enriched-text); font-size: 0.875rem; cursor: pointer; transition: all 0.3s ease; } .enriched-cell-pagination-btn:hover:not(:disabled) { background: var(--enriched-primary); border-color: var(--enriched-primary); color: white; } .enriched-cell-pagination-btn.active { background: var(--enriched-primary); border-color: var(--enriched-primary); color: white; } .enriched-cell-pagination-btn:disabled { opacity: 0.5; cursor: not-allowed; } .enriched-cell-pagination-ellipsis { display: inline-flex; align-items: center; justify-content: center; min-width: 2.25rem; height: 2.25rem; color: var(--enriched-text-lighter); } .enriched-cell-empty-state { text-align: center; box-shadow: var(--enriched-glass-shadow); border-radius: var(--enriched-border-radius-lg); padding: var(--enriched-spacing-xl); color: var(--enriched-text-light); margin-bottom: var(--enriched-spacing-lg); } .enriched-cell-empty-icon { font-size: 3rem; margin-bottom: var(--enriched-spacing-md); color: var(--enriched-gray); opacity: 0.5; } .enriched-cell-empty-state h3 { margin-bottom: var(--enriched-spacing-xs); color: var(--enriched-text); font-weight: 600; } .enriched-cell-empty-state p { margin-bottom: var(--enriched-spacing-md); } .enriched-cell-loader { display: inline-block; width: 2rem; height: 2rem; border: 3px solid rgba(67, 97, 238, 0.3); border-radius: 50%; border-top-color: var(--enriched-primary); animation: e-enriched-cell-spin 1s ease-in-out infinite; } @keyframes e-enriched-cell-spin { to { transform: rotate(360deg); } } .enriched-cell-loading { display: flex; justify-content: center; align-items: center; flex-direction: column; gap: var(--enriched-spacing-xl); padding: var(--enriched-spacing-xl); color: var(--enriched-text-light); } .enriched-cell-error { padding: var(--enriched-spacing-md); border-radius: var(--enriched-border-radius-md); background-color: rgba(220, 53, 69, 0.1); color: var(--enriched-danger); margin-bottom: var(--enriched-spacing-md); border-left: 4px solid var(--enriched-danger); } .enriched-cell-error-details { margin-top: var(--enriched-spacing-sm); font-size: 0.875rem; color: var(--enriched-text); background: var(--enriched-surface); padding: var(--enriched-spacing-sm); border-radius: var(--enriched-border-radius-sm); display: none; white-space: pre-wrap; font-family: monospace; } .enriched-cell-error.show-details .enriched-cell-error-details { display: block; } @media (max-width: 768px) { .enriched-cell-table-controls { flex-direction: column; align-items: stretch; } .enriched-cell-search-box { max-width: 100%; } .enriched-cell-controls-group { width: 100%; justify-content: space-between; } .enriched-cell-table { display: none; } .enriched-cell-cards-container { display: flex; } .enriched-cell-pagination { flex-direction: column; gap: var(--enriched-spacing-md); margin-top: var(--enriched-spacing-md); } } @media (max-width: 480px) { .enriched-cell-page-title { font-size: 2rem; } .enriched-cell-controls-group { flex-direction: column; } .enriched-cell-select { width: 100%; } } .enriched-cell-table--striped { --striped-odd: rgba(78, 106, 230, 0.03); --striped-even: rgba(78, 106, 230, 0.07); --striped-hover: rgba(78, 106, 230, 0.12); --striped-header: rgba(78, 106, 230, 0.15); --striped-border: rgba(78, 106, 230, 0.1); } .enriched-cell-table--striped th { background: var(--striped-header) !important; border-bottom: 2px solid var(--striped-border); } .enriched-cell-table--striped tr:nth-child(odd) td { background: var(--striped-odd); } .enriched-cell-table--striped tr:nth-child(even) td { background: var(--striped-even); } .enriched-cell-table--striped tr:hover td { background: var(--striped-hover); } .enriched-cell-table--minimal { --minimal-border: rgba(0, 0, 0, 0.06); --minimal-header: transparent; --minimal-hover: rgba(0, 0, 0, 0.02); } .enriched-cell-table--minimal th, .enriched-cell-table--minimal td { border: none; background: transparent !important; } .enriched-cell-table--minimal th { border-bottom: 1px solid var(--minimal-border); font-weight: 600; color: var(--enriched-text-light); background: var(--minimal-header) !important; } .enriched-cell-table--minimal tr { border-bottom: 1px solid var(--minimal-border); } .enriched-cell-table--minimal tr:last-child { border-bottom: none; } .enriched-cell-table--minimal tr:hover td { background: var(--minimal-hover) !important; } .enriched-cell-table--card { --card-bg: var(--enriched-surface); --card-header: rgba(78, 106, 230, 0.2); --card-shadow: var(--enriched-shadow-sm); --card-radius: var(--enriched-border-radius-lg); --card-border: var(--enriched-border-light); border-collapse: separate; border-spacing: 0 var(--enriched-spacing-xs); background: transparent; box-shadow: none; } .enriched-cell-table--card thead, .enriched-cell-table--card tr { background: transparent; border: 0; } .enriched-cell-table--card tr th { background-color: var(--card-header); } .enriched-cell-table--card tr th:first-child { border-top-left-radius: var(--card-radius); border-bottom-left-radius: var(--card-radius); } .enriched-cell-table--card tr th:last-child { border-top-right-radius: var(--card-radius); border-bottom-right-radius: var(--card-radius); } .enriched-cell-table--card tr { position: relative; } .enriched-cell-table--card tr::before { content: ""; position: absolute; inset: 0; z-index: 0; background: var(--card-bg); border: 2px solid var(--table-border-dark); border-radius: var(--card-radius); transition: transform .2s ease; } .enriched-cell-table--card tr:hover::before { transform: scaleY(1.015); } .enriched-cell-table--card th, .enriched-cell-table--card td { position: relative; z-index: 1; border: 0; } .enriched-cell-table--card th { color: var(--enriched-text-light); font-weight: 600; padding-bottom: var(--enriched-spacing-md); } .enriched-cell-table--card thead tr::before { border-radius: var(--card-radius); } .enriched-cell-table--card { --card-bg: var(--enriched-surface); --card-shadow: var(--enriched-shadow-sm); --card-radius: var(--enriched-border-radius-lg); --card-border: var(--enriched-border-light); } .enriched-cell-table--card { border-collapse: separate; border-spacing: 0 var(--enriched-spacing-xs); background: transparent; box-shadow: none; } .enriched-cell-table--card thead, .enriched-cell-table--card tr { border: 2px solid var(--table-border-dark); border-radius: var(--card-radius); transition: all 0.3s ease; overflow: hidden; } .enriched-cell-table--card td { border: none; background: transparent !important; } .enriched-cell-table--card td:first-child { border-top-left-radius: var(--card-radius); border-bottom-left-radius: var(--card-radius); } .enriched-cell-table--card td:last-child { border-top-right-radius: var(--card-radius); border-bottom-right-radius: var(--card-radius); } .enriched-cell-table--card th { border: none; color: var(--enriched-text-light); font-weight: 600; padding-bottom: var(--enriched-spacing-md); } .enriched-cell-table--card tr:hover { transform: scaleY(1.015); } .enriched-cell-table--glass { --glass-bg: rgba(255, 255, 255, 0.7); --glass-header: rgba(78, 106, 230, 0.2); --glass-border: rgba(255, 255, 255, 0.3); --glass-hover: rgba(255, 255, 255, 0.5); } .enriched-cell-table--glass { background: var(--glass-bg); backdrop-filter: blur(10px); border: 1px solid var(--glass-border); } .enriched-cell-table--glass th { background: var(--glass-header); backdrop-filter: blur(10px); border: none; color: var(--enriched-primary-dark); } .enriched-cell-table--glass td { background: transparent !important; border-bottom: 1px solid var(--glass-border); } .enriched-cell-table--glass tr:last-child td { border-bottom: none; } .enriched-cell-table--glass tr:hover td { background: var(--glass-hover) !important; } .enriched-cell-table--colorful { --colorful-1: rgba(78, 106, 230, 0.1); --colorful-2: rgba(47, 169, 163, 0.1); --colorful-3: rgba(255, 180, 87, 0.1); --colorful-4: rgba(239, 68, 68, 0.1); --colorful-5: rgba(34, 197, 94, 0.1); --colorful-header: linear-gradient(135deg, var(--enriched-primary), var(--enriched-primary-light)); --colorful-border: rgba(255, 255, 255, 0.2); } .enriched-cell-table--colorful { border: none; overflow: hidden; } .enriched-cell-table--colorful th { background: var(--colorful-header) !important; color: white; border: none; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2); } .enriched-cell-table--colorful tr:nth-child(6n+1) td { background: var(--colorful-1); } .enriched-cell-table--colorful tr:nth-child(6n+2) td { background: var(--colorful-2); } .enriched-cell-table--colorful tr:nth-child(6n+3) td { background: var(--colorful-3); } .enriched-cell-table--colorful tr:nth-child(6n+4) td { background: var(--colorful-4); } .enriched-cell-table--colorful tr:nth-child(6n+5) td { background: var(--colorful-5); } .enriched-cell-table--colorful tr:nth-child(6n+6) td { background: var(--colorful-1); } .enriched-cell-table--colorful tr:hover td { filter: brightness(1.05); } .enriched-cell-table--colorful td { border-bottom: 1px solid var(--colorful-border); } .enriched-cell-table--colorful tr:last-child td { border-bottom: none; } [data-theme="dark"] .enriched-cell-table--striped { --striped-odd: rgba(78, 106, 230, 0.05); --striped-even: rgba(78, 106, 230, 0.1); --striped-hover: rgba(78, 106, 230, 0.15); --striped-header: rgba(78, 106, 230, 0.2); --striped-border: rgba(78, 106, 230, 0.15); } [data-theme="dark"] .enriched-cell-table--minimal { --minimal-border: rgba(255, 255, 255, 0.08); --minimal-hover: rgba(255, 255, 255, 0.05); } [data-theme="dark"] .enriched-cell-table--card { --card-bg: rgba(30, 41, 59, 0.5); --card-shadow: 0 4px 12px rgba(0, 0, 0, 0.25); } [data-theme="dark"] .enriched-cell-table--glass { --glass-bg: rgba(30, 41, 59, 0.6); --glass-header: rgba(78, 106, 230, 0.3); --glass-border: rgba(255, 255, 255, 0.1); --glass-hover: rgba(255, 255, 255, 0.1); } [data-theme="dark"] .enriched-cell-table--colorful { --colorful-1: rgba(78, 106, 230, 0.15); --colorful-2: rgba(47, 169, 163, 0.15); --colorful-3: rgba(255, 180, 87, 0.15); --colorful-4: rgba(239, 68, 68, 0.15); --colorful-5: rgba(34, 197, 94, 0.15); --colorful-border: rgba(255, 255, 255, 0.05); } @media (max-width: 768px) { .enriched-cell-table--card { border-spacing: 0; } .enriched-cell-table--card tr { margin-bottom: var(--enriched-spacing-sm); } } .et-thumbs { display: flex; align-items: center; flex-wrap: wrap; gap: var(--enriched-space-2); } .et-thumbs .e-badge { display: inline-flex; justify-content: center; align-items: center; width: 36px; height: 36px; object-fit: cover; box-shadow: var(--enriched-shadow-sm); border-radius: 6px; } .et-viewer { display: flex; flex-direction: column; gap: 12px; } .et-viewer-stage { position: relative; display: flex; align-items: center; justify-content: center; min-height: 40vh; } .et-viewer-stage img { max-width: 100%; max-height: 72vh; border-radius: 12px; box-shadow: 0 6px 24px rgba(0, 0, 0, .25); } .et-viewer-prev, .et-viewer-next { position: absolute; top: 50%; transform: translateY(-50%); border: none; border-radius: var(--enriched-border-radius-o); width: 40px; height: 40px; cursor: pointer; background: rgba(0, 0, 0, .45); color: #fff; } .et-viewer-prev { left: 8px; } .et-viewer-next { right: 8px; } .et-viewer-counter { position: absolute; bottom: 8px; right: 12px; background: rgba(0, 0, 0, .55); color: #fff; border-radius: 12px; font-size: 12px; padding: 4px 8px; } .et-viewer-strip { display: flex; gap: 8px; overflow: auto; padding: 4px 2px 0; justify-content: center; align-items: center; } .et-viewer-thumb { border: none; background: none; padding: 0; cursor: pointer; opacity: .75; } .et-viewer-thumb.active, .et-viewer-thumb:hover { opacity: 1; } .et-viewer-thumb img { width: 64px; height: 64px; object-fit: cover; border-radius: 8px; box-shadow: 0 2px 8px rgba(0, 0, 0, .15); } .et-thumbs img, td img.enriched-badge-thumb, .enriched-cell-card-value img.enriched-badge-thumb { cursor: zoom-in; } .enriched-cal-container { background: var(--enriched-surface); backdrop-filter: blur(var(--enriched-glass-blur)); border: var(--enriched-glass-border); box-shadow: var(--enriched-glass-shadow); border-radius: var(--enriched-border-radius-xl); padding: var(--enriched-spacing-xl); } .enriched-cal-wrap-actions { display: flex; gap: var(--enriched-spacing-md); margin-bottom: var(--enriched-spacing-lg); flex-wrap: wrap; } .enriched-cal-wrap-info { display: inline-block; } .enriched-cal-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--enriched-spacing-lg); padding-bottom: var(--enriched-spacing-md); border-bottom: 2px solid var(--enriched-border-light); } .enriched-cal-title { font-size: var(--enriched-font-xl); font-weight: 700; color: var(--enriched-primary); margin: 0; } .enriched-cal-controls { display: flex; flex-wrap: wrap; gap: var(--enriched-spacing-sm); align-items: center; } .enriched-cal-view-toggle { display: flex; background: var(--enriched-surface-dark); border-radius: var(--enriched-border-radius-md); padding: var(--enriched-spacing-xs); gap: var(--enriched-spacing-xs); } .enriched-cal-view-btn { padding: var(--enriched-spacing-sm) var(--enriched-spacing-md); border: none; border-radius: var(--enriched-border-radius-sm); background: transparent; color: var(--enriched-text-light); font-weight: 600; cursor: pointer; transition: var(--enriched-transition); } .enriched-cal-view-btn.active { background: var(--enriched-primary); color: white; box-shadow: var(--enriched-shadow-sm); } .enriched-cal-view-btn:hover:not(.active) { background: var(--enriched-surface-light); color: var(--enriched-text); } .enriched-cal-nav-btn { display: flex; align-items: center; justify-content: center; width: 2.5rem; height: 2.5rem; border: none; border-radius: var(--enriched-border-radius-md); background: var(--enriched-surface-dark); color: var(--enriched-primary); cursor: pointer; transition: var(--enriched-transition); } .enriched-cal-nav-btn:hover { background: var(--enriched-primary); color: white; transform: translateY(-1px); box-shadow: var(--enriched-shadow-sm); } .enriched-cal-today-btn { padding: var(--enriched-spacing-sm) var(--enriched-spacing-md); border: 2px solid var(--enriched-primary); border-radius: var(--enriched-border-radius-md); background: transparent; color: var(--enriched-primary); font-weight: 600; cursor: pointer; transition: var(--enriched-transition); } .enriched-cal-today-btn:hover { background: var(--enriched-primary); color: white; transform: translateY(-1px); } .enriched-cal-wrapper { position: relative; } .enriched-cal-overlay { position: absolute; inset: 0; display: none; align-items: center; justify-content: center; background: color-mix(in oklab, var(--enriched-surface) 70%, transparent); backdrop-filter: blur(4px); z-index: 5; border-radius: var(--enriched-border-radius-lg); } .enriched-cal-overlay-inner { display: flex; align-items: center; gap: var(--enriched-spacing-md); } .enriched-cal-overlay-text { color: var(--enriched-text-light); font-weight: 600; } .enriched-cal-wrapper .fc { font-family: var(--enriched-font-primary); } .enriched-cal-wrapper .fc-header-toolbar { display: none; } .enriched-cal-wrapper .fc-theme-standard .fc-scrollgrid { border: 1px solid var(--enriched-border); border-radius: var(--enriched-border-radius-lg); overflow: hidden; } .enriched-cal-wrapper .fc-scrollgrid-section-header>th[role="presentation"] { padding: 0 !important; } .enriched-cal-wrapper .fc-theme-standard th { background: var(--table-header-bg); border-color: var(--enriched-border); color: var(--enriched-text); font-weight: 600; padding: var(--enriched-spacing-md) 0; font-size: var(--enriched-font-sm); } .enriched-cal-wrapper .fc-theme-standard td { border-color: var(--enriched-border); background: var(--enriched-surface-full); } .enriched-cal-wrapper .fc-theme-standard .fc-daygrid-day { background: var(--enriched-surface-full); transition: var(--enriched-transition); } .enriched-cal-wrapper .fc-theme-standard .fc-daygrid-day:hover { background: var(--enriched-surface-light); } .enriched-cal-wrapper .fc-theme-standard .fc-daygrid-day.fc-day-today { background: color-mix(in oklab, var(--enriched-primary) 8%, transparent); } .enriched-cal-wrapper .fc-daygrid-day-number { color: var(--enriched-text); font-weight: 600; padding: var(--enriched-spacing-sm); font-size: var(--enriched-font-sm); } .enriched-cal-wrapper .fc-theme-standard .fc-day-today .fc-daygrid-day-number { color: var(--enriched-primary); font-weight: 700; } .enriched-cal-wrapper .fc-event { border: none; border-radius: var(--enriched-border-radius-sm); padding: 2px 6px; font-size: var(--enriched-font-xs); font-weight: 500; cursor: pointer; transition: var(--enriched-transition); box-shadow: var(--enriched-shadow-xs); } .enriched-cal-wrapper .fc-event:hover { border-radius: 0; transform: translateY(-1px); box-shadow: var(--enriched-shadow-sm); } .enriched-cal-wrapper .fc-event-primary, .enriched-cal-wrapper .fc-event-secondary, .enriched-cal-wrapper .fc-event-success, .enriched-cal-wrapper .fc-event-danger, .enriched-cal-wrapper .fc-event-info { color: #fff; } .enriched-cal-wrapper .fc-event-warning { color: var(--enriched-text-darker); } .enriched-cal-wrapper .fc-event-primary a, .enriched-cal-wrapper .fc-event-secondary a, .enriched-cal-wrapper .fc-event-success a, .enriched-cal-wrapper .fc-event-danger a, .enriched-cal-wrapper .fc-event-info a { color: inherit; } .enriched-cal-wrapper .fc-event-warning a { color: var(--enriched-text-darker); } .enriched-cal-wrapper .fc-daygrid-event, .enriched-cal-wrapper .fc-timegrid-event { color: inherit; } .enriched-cal-wrapper .fc-daygrid-event .fc-event-title, .enriched-cal-wrapper .fc-daygrid-event .fc-event-time, .enriched-cal-wrapper .fc-timegrid-event .fc-event-title, .enriched-cal-wrapper .fc-timegrid-event .fc-event-time { color: inherit; } .enriched-cal-wrapper .fc-popover-header { background: var(--enriched-primary); color: #fff; border-radius: var(--enriched-border-radius-lg) var(--enriched-border-radius-lg) 0 0; } .enriched-cal-wrapper .fc-popover-header .fc-popover-title, .enriched-cal-wrapper .fc-popover-header a { color: #fff; } .enriched-cal-wrapper .fc-popover { background: var(--enriched-surface); border: var(--enriched-glass-border); border-radius: var(--enriched-border-radius-lg); box-shadow: var(--enriched-glass-shadow); backdrop-filter: blur(var(--enriched-glass-blur)); } .enriched-cal-wrapper .fc-more-popover .fc-popover-body { max-height: 300px; overflow-y: auto; } .enriched-cal-wrapper .fc-theme-standard .fc-list { border-radius: var(--enriched-border-radius-lg); overflow: hidden; } .enriched-cal-wrapper .fc-list-table td { padding: var(--enriched-spacing-md); border-color: var(--enriched-border); } .enriched-cal-wrapper .fc-list-table th { padding: 0; } .enriched-cal-wrapper .fc-list-event td { color: var(--enriched-text); border-radius: 0; } .enriched-cal-wrapper .fc-list-event:hover td { background: var(--table-row-hover); color: var(--enriched-text); } .enriched-cal-wrapper .fc-list-event:hover td a { color: var(--enriched-text); } .enriched-cal-wrapper .fc-list-event-dot { border-color: var(--enriched-primary); } .enriched-cal-wrapper .fc-daygrid-body-natural .fc-daygrid-day-events { margin-bottom: 2px; } .enriched-cal-wrapper .fc-daygrid-event { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .enriched-cal-wrapper .fc-timegrid-slots .fc-timegrid-slot { border-color: var(--enriched-border-light); height: 2.5em; } .enriched-cal-wrapper .fc-timegrid-axis { background: var(--table-header-bg); border-color: var(--enriched-border); } .enriched-cal-wrapper .fc-timegrid-now-indicator-line { border-color: var(--enriched-danger); } .enriched-cal-wrapper .fc-timegrid-now-indicator-arrow { border-color: var(--enriched-danger); } .enriched-cal-loading { display: flex; justify-content: center; align-items: center; min-height: 400px; color: var(--enriched-text-light); } .enriched-cal-loading .enriched-cell-loader { margin-right: var(--enriched-spacing-md); } .enriched-cal-empty { text-align: center; padding: var(--enriched-spacing-xxxl); color: var(--enriched-text-light); } .enriched-cal-empty-icon { font-size: 3rem; margin-bottom: var(--enriched-spacing-lg); opacity: 0.5; } .enriched-cal-empty h3 { color: var(--enriched-text); margin-bottom: var(--enriched-spacing-sm); } @media (max-width:768px) { .enriched-cal-header { flex-direction: column; gap: var(--enriched-spacing-md); align-items: stretch; } .enriched-cal-controls { justify-content: center; } .enriched-cal-view-toggle { width: 100%; justify-content: center; } .enriched-cal-wrapper .fc-toolbar-chunk { text-align: center; } .enriched-cal-wrapper .fc .fc-toolbar { flex-direction: column; gap: var(--enriched-spacing-md); } .enriched-cal-wrapper .fc-daygrid-day-number { font-size: var(--enriched-font-xs); padding: 4px; } } @media (max-width:480px) { .enriched-cal-container { padding: var(--enriched-spacing-md); } .enriched-cal-view-toggle { flex-wrap: wrap; } .enriched-cal-view-btn { flex: 1; min-width: 60px; } .enriched-cal-wrapper .fc-event { font-size: 0.7rem; padding: 1px 3px; } } [data-theme="dark"] .enriched-cal-wrapper .fc-theme-standard .fc-scrollgrid { border-color: var(--enriched-border-dark); } [data-theme="dark"] .enriched-cal-wrapper .fc-theme-standard th { background: var(--table-header-bg); border-color: var(--enriched-border-dark); } [data-theme="dark"] .enriched-cal-wrapper .fc-theme-standard td { border-color: var(--enriched-border-dark); } [data-theme="dark"] .enriched-cal-wrapper .fc-theme-standard .fc-daygrid-day { background: var(--enriched-surface); } [data-theme="dark"] .enriched-cal-wrapper .fc-theme-standard .fc-daygrid-day:hover { background: var(--enriched-surface-light); } .enriched-cal-event-details { display: block; } .enriched-cal-event-header { display: flex; align-items: flex-start; gap: var(--enriched-spacing-md); align-items: stretch; margin-bottom: var(--enriched-spacing-lg); } .enriched-cal-event-color { display: block; width: 6px; height: auto; min-height: 20px; border-radius: var(--enriched-border-radius-sm); flex-shrink: 0; margin-top: 0; } .enriched-cal-event-title { font-size: var(--enriched-font-lg); font-weight: 700; color: var(--enriched-text); margin: 0 0 var(--enriched-spacing-xs) 0; } .enriched-cal-event-actions--inline{display:flex;gap:.5rem;justify-content:flex-end;border-top:1px solid var(--enriched-border);padding:var(--enriched-spacing-lg);background:var(--enriched-surface-light);border-radius:var(--enriched-border-radius-md);} .enriched-cal-event-type-badge { display: inline-block; font-size: .75rem; line-height: 1; padding: .35rem .6rem; border-radius: var(--enriched-border-radius-o); background: var(--badge-bg, var(--enriched-primary)); color: #fff; font-weight: 600; box-shadow: var(--enriched-shadow-xs); } .enriched-cal-event-meta { display: flex; flex-direction: column; gap: var(--enriched-spacing-sm); margin-bottom: var(--enriched-spacing-lg); } .enriched-cal-event-meta-item { display: flex; align-items: center; gap: var(--enriched-spacing-sm); color: var(--enriched-text-light); font-size: var(--enriched-font-sm); } .enriched-cal-event-meta-item i { width: 1em; text-align: center; color: var(--enriched-primary); } .enriched-cal-event-description { color: var(--enriched-text); line-height: var(--enriched-line-height-normal); } .enriched-cal-event-description p { margin: 0; } @media (max-width:768px) { .enriched-cal-event-header { align-items: flex-start; flex-direction: column; } .enriched-cal-event-color { width: 100%; height: 4px; min-height: 4px; margin-top: 0; } .enriched-cal-event-title { text-align: left; } } /** **/ /** ENRICHED TABLE DESIGNER **/ /** **/ /** **/ /** ENRICHED MISC DESIGNER **/ /** **/ .e-section-mg-spacer { margin-block: calc(var(--enriched-spacing-xxl)*2) !important; } .e-section-mg-spacer-top { margin-top: calc(var(--enriched-spacing-xxl)*2) !important; } .e-section-mg-spacer-bottom { margin-bottom: calc(var(--enriched-spacing-xxl)*2) !important; } .e-section-mg-spacer-sm { margin-block: var(--enriched-spacing-xl) !important; } .e-section-mg-spacer-sm-top { margin-top: var(--enriched-spacing-xl) !important; } .e-section-mg-spacer-sm-bottom { margin-bottom: var(--enriched-spacing-xl) !important; } .e-section-mg-spacer-md { margin-block: calc(var(--enriched-spacing-xl)*2) !important; } .e-section-mg-spacer-md-top { margin-top: calc(var(--enriched-spacing-xl)*2) !important; } .e-section-mg-spacer-md-bottom { margin-bottom: calc(var(--enriched-spacing-xl)*2) !important; } .e-section-mg-spacer-lg { margin-block: var(--enriched-spacing-xxxl) !important; } .e-section-mg-spacer-lg-top { margin-top: var(--enriched-spacing-xxxl) !important; } .e-section-mg-spacer-lg-bottom { margin-bottom: var(--enriched-spacing-xxxl) !important; } @media(max-width:768px) { .e-section-mg-spacer, .e-section-mg-spacer-lg { margin-block: calc(var(--enriched-spacing-xl)*2) !important; } .e-section-mg-spacer-top, .e-section-mg-spacer-lg-top { margin-top: calc(var(--enriched-spacing-xl)*2) !important; } .e-section-mg-spacer-bottom, .e-section-mg-spacer-lg-bottom { margin-bottom: calc(var(--enriched-spacing-xl)*2) !important; } .e-section-mg-spacer-md { margin-block: var(--enriched-spacing-xxl) !important; } .e-section-mg-spacer-md-top { margin-top: var(--enriched-spacing-xxl) !important; } .e-section-mg-spacer-md-bottom { margin-bottom: var(--enriched-spacing-xxl) !important; } .e-section-mg-spacer-sm { margin-block: var(--enriched-spacing-lg) !important; } .e-section-mg-spacer-sm-top { margin-top: var(--enriched-spacing-lg) !important; } .e-section-mg-spacer-sm-bottom { margin-bottom: var(--enriched-spacing-lg) !important; } } @media(max-width:480px) { .e-section-mg-spacer, .e-section-mg-spacer-lg { margin-block: var(--enriched-spacing-xxl) !important; } .e-section-mg-spacer-top, .e-section-mg-spacer-lg-top { margin-top: var(--enriched-spacing-xxl) !important; } .e-section-mg-spacer-bottom, .e-section-mg-spacer-lg-bottom { margin-bottom: var(--enriched-spacing-xxl) !important; } .e-section-mg-spacer-md { margin-block: var(--enriched-spacing-xl) !important; } .e-section-mg-spacer-md-top { margin-top: var(--enriched-spacing-xl) !important; } .e-section-mg-spacer-md-bottom { margin-bottom: var(--enriched-spacing-xl) !important; } .e-section-mg-spacer-sm { margin-block: var(--enriched-spacing-md) !important; } .e-section-mg-spacer-sm-top { margin-top: var(--enriched-spacing-md) !important; } .e-section-mg-spacer-sm-bottom { margin-bottom: var(--enriched-spacing-md) !important; } } .e-section-pd-spacer { padding-block: calc(var(--enriched-spacing-xxl)*2) !important; } .e-section-pd-spacer-top { padding-top: calc(var(--enriched-spacing-xxl)*2) !important; } .e-section-pd-spacer-bottom { padding-bottom: calc(var(--enriched-spacing-xxl)*2) !important; } .e-section-pd-spacer-sm { padding-block: var(--enriched-spacing-xl) !important; } .e-section-pd-spacer-sm-top { padding-top: var(--enriched-spacing-xl) !important; } .e-section-pd-spacer-sm-bottom { padding-bottom: var(--enriched-spacing-xl) !important; } .e-section-pd-spacer-md { padding-block: calc(var(--enriched-spacing-xl)*2) !important; } .e-section-pd-spacer-md-top { padding-top: calc(var(--enriched-spacing-xl)*2) !important; } .e-section-pd-spacer-md-bottom { padding-bottom: calc(var(--enriched-spacing-xl)*2) !important; } .e-section-pd-spacer-lg { padding-block: var(--enriched-spacing-xxxl) !important; } .e-section-pd-spacer-lg-top { padding-top: var(--enriched-spacing-xxxl) !important; } .e-section-pd-spacer-lg-bottom { padding-bottom: var(--enriched-spacing-xxxl) !important; } @media(max-width:768px) { .e-section-pd-spacer, .e-section-pd-spacer-lg { padding-block: calc(var(--enriched-spacing-xl)*2) !important; } .e-section-pd-spacer-top, .e-section-pd-spacer-lg-top { padding-top: calc(var(--enriched-spacing-xl)*2) !important; } .e-section-pd-spacer-bottom, .e-section-pd-spacer-lg-bottom { padding-bottom: calc(var(--enriched-spacing-xl)*2) !important; } .e-section-pd-spacer-md { padding-block: var(--enriched-spacing-xxl) !important; } .e-section-pd-spacer-md-top { padding-top: var(--enriched-spacing-xxl) !important; } .e-section-pd-spacer-md-bottom { padding-bottom: var(--enriched-spacing-xxl) !important; } .e-section-pd-spacer-sm { padding-block: var(--enriched-spacing-lg) !important; } .e-section-pd-spacer-sm-top { padding-top: var(--enriched-spacing-lg) !important; } .e-section-pd-spacer-sm-bottom { padding-bottom: var(--enriched-spacing-lg) !important; } } @media(max-width:480px) { .e-section-pd-spacer, .e-section-pd-spacer-lg { padding-block: var(--enriched-spacing-xxl) !important; } .e-section-pd-spacer-top, .e-section-pd-spacer-lg-top { padding-top: var(--enriched-spacing-xxl) !important; } .e-section-pd-spacer-bottom, .e-section-pd-spacer-lg-bottom { padding-bottom: var(--enriched-spacing-xxl) !important; } .e-section-pd-spacer-md { padding-block: var(--enriched-spacing-xl) !important; } .e-section-pd-spacer-md-top { padding-top: var(--enriched-spacing-xl) !important; } .e-section-pd-spacer-md-bottom { padding-bottom: var(--enriched-spacing-xl) !important; } .e-section-pd-spacer-sm { padding-block: var(--enriched-spacing-md) !important; } .e-section-pd-spacer-sm-top { padding-top: var(--enriched-spacing-md) !important; } .e-section-pd-spacer-sm-bottom { padding-bottom: var(--enriched-spacing-md) !important; } } .enriched-last-child-with-no-margin-bottom>:last-child{margin-bottom:0!important} .enriched-last-child-with-no-margin-bottom>*.e-section-mg-spacer-bottom:last-child{margin-bottom:0!important} .enriched-last-child-with-no-margin-bottom>*.e-section-mg-spacer-sm-bottom:last-child{margin-bottom:0!important} .enriched-last-child-with-no-margin-bottom>*.e-section-mg-spacer-md-bottom:last-child{margin-bottom:0!important} .enriched-last-child-with-no-margin-bottom>*.e-section-mg-spacer-lg-bottom:last-child{margin-bottom:0!important} .enriched-last-child-with-no-margin-top>:last-child{margin-top:0!important} .enriched-last-child-with-no-margin-top>*.e-section-mg-spacer-top:last-child{margin-top:0!important} .enriched-last-child-with-no-margin-top>*.e-section-mg-spacer-sm-top:last-child{margin-top:0!important} .enriched-last-child-with-no-margin-top>*.e-section-mg-spacer-md-top:last-child{margin-top:0!important} .enriched-last-child-with-no-margin-top>*.e-section-mg-spacer-lg-top:last-child{margin-top:0!important} .enriched-last-child-with-no-padding-bottom>:last-child{padding-bottom:0!important} .enriched-last-child-with-no-padding-bottom>*.e-section-pd-spacer-bottom:last-child{padding-bottom:0!important} .enriched-last-child-with-no-padding-bottom>*.e-section-pd-spacer-sm-bottom:last-child{padding-bottom:0!important} .enriched-last-child-with-no-padding-bottom>*.e-section-pd-spacer-md-bottom:last-child{padding-bottom:0!important} .enriched-last-child-with-no-padding-bottom>*.e-section-pd-spacer-lg-bottom:last-child{padding-bottom:0!important} .enriched-last-child-with-no-padding-top>:last-child{padding-top:0!important} .enriched-last-child-with-no-padding-top>*.e-section-pd-spacer-top:last-child{padding-top:0!important} .enriched-last-child-with-no-padding-top>*.e-section-pd-spacer-sm-top:last-child{padding-top:0!important} .enriched-last-child-with-no-padding-top>*.e-section-pd-spacer-md-top:last-child{padding-top:0!important} .enriched-last-child-with-no-padding-top>*.e-section-pd-spacer-lg-top:last-child{padding-top:0!important} .enriched-scroll-area { --scroll-max-height: 260px; --scroll-pad: var(--enriched-spacing-md); --scroll-bg: var(--enriched-surface); --scroll-border: var(--enriched-border); --scroll-radius: var(--enriched-border-radius-lg); --scroll-shadow: var(--enriched-shadow-sm); position: relative; max-height: var(--scroll-max-height); overflow: auto; padding: var(--scroll-pad); background: var(--scroll-bg); border: 1px solid var(--scroll-border); border-radius: var(--scroll-radius); box-shadow: var(--scroll-shadow); -webkit-overflow-scrolling: touch; scrollbar-gutter: stable both-edges } .enriched-scroll-area>*+* { margin-top: var(--enriched-spacing-sm) } .enriched-scroll-area.compact { --scroll-pad: var(--enriched-spacing-sm) } .enriched-scroll-area.flat { border-color: transparent; box-shadow: none; background: transparent } .enriched-scroll-area.soft { backdrop-filter: blur(var(--enriched-glass-blur)); background: color-mix(in oklab, var(--enriched-surface) 88%, transparent); border: var(--enriched-glass-border); box-shadow: var(--enriched-glass-shadow) } .enriched-scroll-area { scrollbar-width: thin; scrollbar-color: var(--enriched-primary) transparent } .enriched-scroll-area::-webkit-scrollbar { width: 8px; height: 8px } .enriched-scroll-area::-webkit-scrollbar-thumb { background: linear-gradient(180deg, var(--enriched-primary-light), var(--enriched-primary)); border-radius: 8px } .enriched-scroll-area::-webkit-scrollbar-track { background: transparent } .enriched-scroll-area.secondary { scrollbar-color: var(--enriched-secondary) transparent } .enriched-scroll-area.secondary::-webkit-scrollbar-thumb { background: linear-gradient(180deg, var(--enriched-secondary-light), var(--enriched-secondary)) } .enriched-scroll-area.accent { scrollbar-color: var(--enriched-accent) transparent } .enriched-scroll-area.accent::-webkit-scrollbar-thumb { background: linear-gradient(180deg, var(--enriched-accent-light), var(--enriched-accent)) } .enriched-section-space { padding: var(--enriched-spacing-24) 0 !important; } .enriched-section-space-top { padding-top: var(--enriched-spacing-24) !important; } .enriched-section-space-bottom { padding-bottom: var(--enriched-spacing-24) !important; } .enriched-section-space-sm { padding: var(--enriched-spacing-8) 0 !important; } .enriched-section-space-sm-top { padding-top: var(--enriched-spacing-8) !important; } .enriched-section-space-sm-bottom { padding-bottom: var(--enriched-spacing-8) !important; } .enriched-section-space-md { padding: var(--enriched-spacing-16) 0 !important; } .enriched-section-space-md-top { padding-top: var(--enriched-spacing-16) !important; } .enriched-section-space-md-bottom { padding-bottom: var(--enriched-spacing-16) !important; } .enriched-section-space-lg { padding: var(--enriched-spacing-xxxl) 0 !important; } .enriched-section-space-lg-top { padding-top: var(--enriched-spacing-xxxl) !important; } .enriched-section-space-lg-bottom { padding-bottom: var(--enriched-spacing-xxxl) !important; } @media (max-width:768px) { .enriched-section-space, .enriched-section-space-lg { padding: var(--enriched-spacing-16) 0 !important; } .enriched-section-space-top, .enriched-section-space-lg-top { padding-top: var(--enriched-spacing-16) !important; } .enriched-section-space-bottom, .enriched-section-space-lg-bottom { padding-bottom: var(--enriched-spacing-16) !important; } .enriched-section-space-md { padding: var(--enriched-spacing-12) 0 !important; } .enriched-section-space-md-top { padding-top: var(--enriched-spacing-12) !important; } .enriched-section-space-md-bottom { padding-bottom: var(--enriched-spacing-12) !important; } .enriched-section-space-sm { padding: var(--enriched-spacing-6) 0 !important; } .enriched-section-space-sm-top { padding-top: var(--enriched-spacing-6) !important; } .enriched-section-space-sm-bottom { padding-bottom: var(--enriched-spacing-6) !important; } } @media (max-width:480px) { .enriched-section-space, .enriched-section-space-lg { padding: var(--enriched-spacing-12) 0 !important; } .enriched-section-space-top, .enriched-section-space-lg-top { padding-top: var(--enriched-spacing-12) !important; } .enriched-section-space-bottom, .enriched-section-space-lg-bottom { padding-bottom: var(--enriched-spacing-12) !important; } .enriched-section-space-md { padding: var(--enriched-spacing-8) 0 !important; } .enriched-section-space-md-top { padding-top: var(--enriched-spacing-8) !important; } .enriched-section-space-md-bottom { padding-bottom: var(--enriched-spacing-8) !important; } .enriched-section-space-sm { padding: var(--enriched-spacing-4) 0 !important; } .enriched-section-space-sm-top { padding-top: var(--enriched-spacing-4) !important; } .enriched-section-space-sm-bottom { padding-bottom: var(--enriched-spacing-4) !important; } } .e-hr-soft{ border:0; height:1px; background:linear-gradient(to right,transparent,#ccc,transparent); margin:1rem 0 !important; } .e-hr-short{ border:0; height:1px; width:60px; margin:1rem auto !important; background-color:var(--enriched-accent, #888); border-radius:2px; } .e-hr-dotted{ border:0; border-top:1px dotted rgba(0,0,0,0.4); margin:1rem 0 !important; } .e-hr-clean{ border:0; border-top:1px solid rgba(0,0,0,0.12); margin:24px 0 !important; } .e-w-auto { width: auto !important; } .e-w-0 { width: 0 !important; } .e-w-25 { width: 25% !important; } .e-w-33 { width: 33.3333% !important; } .e-w-50 { width: 50% !important; } .e-w-66 { width: 66.6667% !important; } .e-w-75 { width: 75% !important; } .e-w-100, .e-w-full { width: 100% !important; } .e-w-screen { width: 100vw !important; } .e-w-min { width: min-content !important; } .e-w-max { width: max-content !important; } .e-w-fit { width: fit-content !important; } .e-w-120 { width: 120px !important; } .e-w-160 { width: 160px !important; } .e-w-200 { width: 200px !important; } .e-w-240 { width: 240px !important; } .e-w-320 { width: 320px !important; } .e-w-480 { width: 480px !important; } .e-w-640 { width: 640px !important; } .e-w-800 { width: 800px !important; } .e-w-960 { width: 960px !important; } .e-w-1200 { width: 1200px !important; } .e-min-w-0 { min-width: 0 !important; } .e-min-w-full { min-width: 100% !important; } .e-min-w-120 { min-width: 120px !important; } .e-min-w-160 { min-width: 160px !important; } .e-min-w-200 { min-width: 200px !important; } .e-min-w-240 { min-width: 240px !important; } .e-min-w-320 { min-width: 320px !important; } .e-min-w-480 { min-width: 480px !important; } .e-max-w-none { max-width: none !important; } .e-max-w-full { max-width: 100% !important; } .e-max-w-320 { max-width: 320px !important; } .e-max-w-480 { max-width: 480px !important; } .e-max-w-640 { max-width: 640px !important; } .e-max-w-800 { max-width: 800px !important; } .e-max-w-960 { max-width: 960px !important; } .e-max-w-1200 { max-width: 1200px !important; } .e-max-w-1440 { max-width: 1440px !important; } .e-h-auto { height: auto !important; } .e-h-0 { height: 0 !important; } .e-h-25 { height: 25% !important; } .e-h-33 { height: 33.3333% !important; } .e-h-50 { height: 50% !important; } .e-h-66 { height: 66.6667% !important; } .e-h-75 { height: 75% !important; } .e-h-100, .e-h-full { height: 100% !important; } .e-h-screen { height: 100vh !important; } .e-h-min { height: min-content !important; } .e-h-max { height: max-content !important; } .e-h-fit { height: fit-content !important; } .e-h-120 { height: 120px !important; } .e-h-160 { height: 160px !important; } .e-h-200 { height: 200px !important; } .e-h-240 { height: 240px !important; } .e-h-320 { height: 320px !important; } .e-h-480 { height: 480px !important; } .e-h-640 { height: 640px !important; } .e-min-h-0 { min-height: 0 !important; } .e-min-h-100 { min-height: 100% !important; } .e-min-h-screen { min-height: 100vh !important; } .e-min-h-120 { min-height: 120px !important; } .e-min-h-160 { min-height: 160px !important; } .e-min-h-200 { min-height: 200px !important; } .e-min-h-240 { min-height: 240px !important; } .e-min-h-320 { min-height: 320px !important; } .e-max-h-none { max-height: none !important; } .e-max-h-full { max-height: 100% !important; } .e-max-h-screen { max-height: 100vh !important; } .e-max-h-240 { max-height: 240px !important; } .e-max-h-320 { max-height: 320px !important; } .e-max-h-480 { max-height: 480px !important; } .e-max-h-640 { max-height: 640px !important; } .e-vh-100 { height: 100vh; } .e-mvh-100 { min-height: 100vh; } .e-vw-100 { width: 100vw; } .e-mvw-100 { min-width: 100vw; } .e-size-16 { width: 16px !important; height: 16px !important; } .e-size-24 { width: 24px !important; height: 24px !important; } .e-size-32 { width: 32px !important; height: 32px !important; } .e-size-40 { width: 40px !important; height: 40px !important; } .e-size-48 { width: 48px !important; height: 48px !important; } .e-size-64 { width: 64px !important; height: 64px !important; } .e-size-80 { width: 80px !important; height: 80px !important; } .e-size-96 { width: 96px !important; height: 96px !important; } .e-size-128 { width: 128px !important; height: 128px !important; } .e-size-160 { width: 160px !important; height: 160px !important; } .e-aspect-auto { aspect-ratio: auto !important; } .e-aspect-1-1 { aspect-ratio: 1/1 !important; } .e-aspect-4-3 { aspect-ratio: 4/3 !important; } .e-aspect-3-2 { aspect-ratio: 3/2 !important; } .e-aspect-16-9 { aspect-ratio: 16/9 !important; } .e-aspect-21-9 { aspect-ratio: 21/9 !important; } .e-object-contain { object-fit: contain !important; } .e-object-cover { object-fit: cover !important; } .e-object-fill { object-fit: fill !important; } .e-object-none { object-fit: none !important; } .e-object-scale-down { object-fit: scale-down !important; } .e-overflow-visible { overflow: visible !important; } .e-overflow-hidden { overflow: hidden !important; } .e-overflow-auto { overflow: auto !important; } .e-overflow-scroll { overflow: scroll !important; } .e-overflow-x-hidden { overflow-x: hidden !important; } .e-overflow-y-hidden { overflow-y: hidden !important; } .e-overflow-x-auto { overflow-x: auto !important; } .e-overflow-y-auto { overflow-y: auto !important; } .e-container { width: 100%; max-width: 1200px; margin-left: auto; margin-right: auto; padding-left: var(--enriched-spacing-lg); padding-right: var(--enriched-spacing-lg); } .e-container-sm { max-width: 640px; } .e-container-md { max-width: 800px; } .e-container-lg { max-width: 960px; } .e-container-xl { max-width: 1200px; } .e-container-2xl { max-width: 1440px; } .e-w-var { width: var(--e-w) !important; } .e-h-var { height: var(--e-h) !important; } .e-min-w-var { min-width: var(--e-min-w) !important; } .e-max-w-var { max-width: var(--e-max-w) !important; } .e-min-h-var { min-height: var(--e-min-h) !important; } .e-max-h-var { max-height: var(--e-max-h) !important; } .e-w-clamp { width: clamp(var(--e-w-min, 0px), var(--e-w-pref, 50%), var(--e-w-max, 100%)) !important; } .e-h-clamp { height: clamp(var(--e-h-min, 0px), var(--e-h-pref, 50%), var(--e-h-max, 100%)) !important; } @media(max-width:768px) { .e-sm-w-auto { width: auto !important; } .e-sm-w-100 { width: 100% !important; } .e-sm-w-50 { width: 50% !important; } .e-sm-h-auto { height: auto !important; } .e-sm-h-100 { height: 100% !important; } } .enriched-flexs-grid{ display:flex; flex-wrap:wrap; gap:var(--enriched-spacing-xl); justify-content:center; align-items:stretch; margin:0 auto; width:100%; } .enriched-flex-card-large{ flex:1 1 clamp(280px,34%,min(520px,100%)); display:flex; flex-direction:column; box-sizing:border-box; width:100%; min-height:100%; padding:var(--enriched-spacing-xl); border-radius:var(--enriched-border-radius-lg); transition:transform var(--enriched-duration),box-shadow var(--enriched-duration); position:relative; } .enriched-flex-card-medium{ flex:1 1 clamp(240px,28%,min(420px,100%)); display:flex; flex-direction:column; box-sizing:border-box; width:100%; min-height:100%; padding:var(--enriched-spacing-xl); border-radius:var(--enriched-border-radius-lg); transition:transform var(--enriched-duration),box-shadow var(--enriched-duration); position:relative; } .enriched-flex-card-small{ flex:1 1 clamp(200px,22%,min(320px,100%)); display:flex; flex-direction:column; align-items:center; text-align:center; box-sizing:border-box; width:100%; min-height:100%; padding:var(--enriched-spacing-xl); border-radius:var(--enriched-border-radius-lg); background:var(--enriched-surface); transition:transform var(--enriched-duration),box-shadow var(--enriched-duration); position:relative; } .enriched-flexs-grid.auto-height{ align-items:flex-start; } .enriched-flexs-grid.auto-height>.enriched-flex-card-large, .enriched-flexs-grid.auto-height>.enriched-flex-card-medium, .enriched-flexs-grid.auto-height>.enriched-flex-card-small{ height:auto !important; align-self:flex-start !important; min-height:0 !important; } .enriched-flex-card--auto{ height:auto !important; align-self:flex-start !important; min-height:0 !important; } @media (max-width:1200px){ .enriched-flex-card-large{ flex:1 1 clamp(260px,45%,min(480px,100%)); } .enriched-flex-card-medium{ flex:1 1 clamp(220px,40%,min(380px,100%)); } .enriched-flex-card-small{ flex:1 1 clamp(180px,35%,min(300px,100%)); } } @media (max-width:768px){ .enriched-flexs-grid{ gap:var(--enriched-spacing-lg); } .enriched-flex-card-large, .enriched-flex-card-medium, .enriched-flex-card-small{ flex:1 1 min(100%,400px); padding:var(--enriched-spacing-lg); } } @media (max-width:480px){ .enriched-flexs-grid{ gap:var(--enriched-spacing-md); } .enriched-flex-card-large, .enriched-flex-card-medium, .enriched-flex-card-small{ flex:1 1 100%; padding:var(--enriched-spacing-md); } } .enriched-flexs-grid.equal-height{ align-items:stretch; } .enriched-flexs-grid.equal-height>*{ display:flex; flex-direction:column; } .enriched-flex-card-content{ flex:1; display:flex; flex-direction:column; } .enriched-flex-card-content>*:last-child{ margin-top:auto; } .enriched-flexs-grid.dense{ gap:var(--enriched-spacing-lg); } .enriched-flexs-grid.spacious{ gap:var(--enriched-spacing-xxl); } .enriched-flex-card-large.content-top, .enriched-flex-card-medium.content-top, .enriched-flex-card-small.content-top{ justify-content:flex-start; } .enriched-flex-card-large.content-center, .enriched-flex-card-medium.content-center, .enriched-flex-card-small.content-center{ justify-content:center; } .enriched-flex-card-large.content-bottom, .enriched-flex-card-medium.content-bottom, .enriched-flex-card-small.content-bottom{ justify-content:flex-end; } .enriched-flex-fill{ flex:1 1 100%; } .enriched-flexs-grid.nowrap{ flex-wrap:nowrap; overflow-x:auto; justify-content:flex-start; padding-bottom:var(--enriched-spacing-md); } .enriched-flexs-grid.nowrap>*{ flex:0 0 auto; } .enriched-flexs-grid.masonry{ align-items:flex-start; } .enriched-flexs-grid.masonry>*{ margin-bottom:var(--enriched-spacing-xl); } .enriched-flexs-grid.gap-sm{ gap:var(--enriched-spacing-md); } .enriched-flexs-grid.gap-md{ gap:var(--enriched-spacing-lg); } .enriched-flexs-grid.gap-lg{ gap:var(--enriched-spacing-xl); } .enriched-flexs-grid.gap-xl{ gap:var(--enriched-spacing-xxl); } .enriched-flexs-grid.justify-start{ justify-content:flex-start; } .enriched-flexs-grid.justify-center{ justify-content:center; } .enriched-flexs-grid.justify-end{ justify-content:flex-end; } .enriched-flexs-grid.justify-between{ justify-content:space-between; } .enriched-flexs-grid.justify-around{ justify-content:space-around; } .enriched-flexs-grid.align-start{ align-items:flex-start; } .enriched-flexs-grid.align-center{ align-items:center; } .enriched-flexs-grid.align-end{ align-items:flex-end; } .enriched-flexs-grid.align-stretch{ align-items:stretch; } .enriched-flex-card-large:hover, .enriched-flex-card-medium:hover, .enriched-flex-card-small:hover{ transform:translateY(-4px); box-shadow:var(--enriched-shadow-lg); } .enriched-flex-card-large:focus-within, .enriched-flex-card-medium:focus-within, .enriched-flex-card-small:focus-within{ outline:2px solid var(--enriched-primary); outline-offset:2px; } @media print{ .enriched-flexs-grid{ display:block; } .enriched-flex-card-large, .enriched-flex-card-medium, .enriched-flex-card-small{ break-inside:avoid; margin-bottom:var(--enriched-spacing-lg); } } .no-padding { padding: 0 !important; } .enriched-e-container { max-width: 1200px; margin: 0 auto; } .enriched-e-page-header { margin-bottom: var(--enriched-spacing-xxxl); text-align: center; } .enriched-e-page-title { font-size: 2.5rem; font-weight: 800; background: linear-gradient(135deg, var(--enriched-primary) 0%, var(--enriched-primary-light) 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; margin-bottom: var(--enriched-spacing-sm); letter-spacing: -0.5px; } .enriched-e-page-subtitle { font-size: 1.125rem; color: var(--enriched-text-light); max-width: 600px; } .enriched-e-page-subtitle.centered { margin: 0 auto; } .enriched-e-section { background: var(--enriched-surface); backdrop-filter: blur(var(--enriched-glass-blur)); border-radius: var(--enriched-border-radius-lg); box-shadow: var(--enriched-glass-shadow); border: var(--enriched-glass-border); padding: var(--enriched-spacing-xl); margin-bottom: var(--enriched-spacing-xl); } .enriched-e-section.zero { margin-bottom: 0; } .enriched-e-component-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: var(--enriched-spacing-xl); margin-top: var(--enriched-spacing-lg); } .enriched-e-card { padding: var(--enriched-spacing-lg); border-radius: var(--enriched-border-radius-lg); background: var(--enriched-surface); backdrop-filter: blur(var(--enriched-glass-blur)); -webkit-backdrop-filter: blur(var(--enriched-glass-blur)); border: var(--enriched-glass-border); box-shadow: var(--enriched-glass-shadow); overflow: hidden; transition: all 0.3s ease; } .enriched-e-card:hover { transform: translateY(-5px); box-shadow: 0 12px 28px var(--enriched-shadow-dark); } .enriched-e-card-sub-header, .enriched-e-card-header { padding: var(--enriched-spacing-lg); border-bottom: 1px solid var(--enriched-border); } .enriched-e-card-title { font-size: 1.25rem; font-weight: 600; color: var(--enriched-text); margin-bottom: var(--enriched-spacing-xs); } .enriched-e-card-subtitle { font-size: 0.875rem; color: var(--enriched-text-light); } .enriched-e-card-body { padding: var(--enriched-spacing-lg); } .enriched-e-card-sub-footer, .enriched-e-card-footer { padding: var(--enriched-spacing-lg); border-top: 1px solid var(--enriched-border); display: flex; gap: var(--enriched-spacing-sm); } .enriched-e-badge-group { margin-bottom: var(--enriched-spacing-xl); padding: var(--enriched-spacing-lg); background: var(--enriched-surface); border-radius: var(--enriched-border-radius-md); border: 1px solid var(--enriched-border-light); } .enriched-e-badge-wrap { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; padding: var(--enriched-spacing-md); background: var(--enriched-bg); border-radius: var(--enriched-border-radius-sm); } .enriched-e-badge { --badge-color: var(--enriched-gray); --badge-fg: var(--badge-color); --badge-bg-soft: color-mix(in srgb, var(--badge-color) 14%, transparent); --badge-bg-solid: var(--badge-color); --badge-border: color-mix(in srgb, var(--badge-color) 26%, transparent); display: inline-flex; align-items: center; gap: .4em; padding: var(--enriched-spacing-xs) var(--enriched-spacing-sm); border-radius: var(--enriched-border-radius-o); font-size: .75rem; line-height: 1.25; font-weight: 600; letter-spacing: .01em; border: 1px solid var(--badge-border); color: var(--badge-fg); background: var(--badge-bg-soft); box-shadow: var(--enriched-shadow-xs); vertical-align: middle; white-space: nowrap; max-width: 100%; text-align: center; } .enriched-e-badge i, .enriched-e-badge svg { font-size: .9em; flex: 0 0 auto; } .enriched-e-badge__dot { width: .5em; height: .5em; border-radius: 50%; background: currentColor; box-shadow: 0 0 0 2px color-mix(in srgb, var(--badge-bg-soft) 70%, transparent); } .enriched-e-badge__text { display: inline-block; line-height: 1.2; padding-bottom: 0.05em; overflow: hidden; text-overflow: ellipsis; } .enriched-e-badge--sm { font-size: .675rem; padding: .2rem .45rem; } .enriched-e-badge--md { font-size: .75rem; padding: .3rem .55rem; } .enriched-e-badge--lg { font-size: .875rem; padding: .45rem .75rem; } .enriched-e-badge--solid { background: var(--badge-bg-solid); color: #fff; border-color: transparent; text-shadow: 0 1px 0 rgba(0, 0, 0, .12); } .enriched-e-badge--outline { background: transparent; color: var(--badge-color); border-color: var(--badge-color); box-shadow: none; } .enriched-e-badge--ghost { background: transparent; color: var(--badge-color); border-color: color-mix(in srgb, var(--badge-color) 18%, transparent); box-shadow: none; } .enriched-e-badge--glass { background: color-mix(in srgb, var(--badge-color) 12%, var(--enriched-surface)); backdrop-filter: blur(var(--enriched-glass-blur)); -webkit-backdrop-filter: blur(var(--enriched-glass-blur)); border: var(--enriched-glass-border); box-shadow: var(--enriched-glass-shadow); } .enriched-e-badge.is-clickable { cursor: pointer; transition: var(--enriched-transition); } .enriched-e-badge.is-clickable:hover { filter: saturate(1.06) brightness(1.02); transform: translateY(-.5px); } .enriched-e-badge.is-clickable:active { transform: translateY(0); filter: saturate(1); } .enriched-e-badge--primary { --badge-color: var(--enriched-primary); } .enriched-e-badge--secondary { --badge-color: var(--enriched-secondary); } .enriched-e-badge--success { --badge-color: var(--enriched-success); } .enriched-e-badge--danger { --badge-color: var(--enriched-danger); } .enriched-e-badge--warning { --badge-color: var(--enriched-warning); } .enriched-e-badge--info { --badge-color: var(--enriched-info); } .enriched-e-badge--neutral { --badge-color: var(--enriched-gray-dark); } .enriched-e-badge--processing { --badge-color: var(--enriched-status-processing); } .enriched-e-badge--completed { --badge-color: var(--enriched-status-completed); } .enriched-e-badge--cancelled { --badge-color: var(--enriched-status-cancelled); } .enriched-e-badge--draft { --badge-color: var(--enriched-status-draft); } .enriched-e-badge--pending { --badge-color: var(--enriched-status-warn); } .enriched-e-badge--default { --badge-color: var(--enriched-status-info); } [data-theme="dark"] .enriched-e-badge { --badge-border: color-mix(in srgb, var(--badge-color) 22%, transparent); box-shadow: 0 1px 2px rgba(0, 0, 0, .35); } [data-theme="dark"] .enriched-e-badge--solid { text-shadow: 0 1px 0 rgba(0, 0, 0, .25); } .enriched-e-progress { height: 8px; background: var(--enriched-gray-light); border-radius: var(--enriched-border-radius-md); overflow: hidden; margin: var(--enriched-spacing-md) 0; } .enriched-e-progress-bar { height: 100%; border-radius: var(--enriched-border-radius-md); transition: width 0.3s ease; } .enriched-e-progress-primary .enriched-e-progress-bar { background: linear-gradient(90deg, var(--enriched-primary) 0%, var(--enriched-primary-light) 100%); } .enriched-e-progress-success .enriched-e-progress-bar { background: linear-gradient(90deg, var(--enriched-success) 0%, var(--enriched-success-dark) 100%); } .enriched-e-progress-danger .enriched-e-progress-bar { background: linear-gradient(90deg, var(--enriched-danger) 0%, #b5179e 100%); } .enriched-e-tabshell { position: relative; background: linear-gradient(180deg, var(--enriched-surface-dark), var(--enriched-surface)); backdrop-filter: blur(var(--enriched-glass-blur)); border: var(--enriched-glass-border); border-radius: var(--enriched-border-radius-lg); box-shadow: var(--enriched-shadow-lg); padding: var(--enriched-spacing-md); transition: var(--enriched-transition); } .enriched-e-tabs { display: flex; gap: var(--enriched-spacing-sm); position: relative; border-radius: var(--enriched-border-radius-md); background: var(--enriched-surface-light); box-shadow: var(--enriched-shadow-sm); margin-bottom: var(--enriched-spacing-md); overflow: hidden; padding: var(--enriched-spacing-xs); } .enriched-e-tab { position: relative; flex: 1; padding: 0.75rem 1rem; cursor: pointer; font-weight: 600; font-size: 0.95rem; color: var(--enriched-text-lighter); text-align: center; border-radius: var(--enriched-border-radius-md); transition: var(--enriched-transition); background: transparent; border: none; z-index: 2; } .enriched-e-tab:hover { color: var(--enriched-primary); background: rgba(67, 97, 238, 0.08); box-shadow: var(--enriched-shadow-sm); } .enriched-e-tab.active { color: var(--enriched-primary); background: var(--enriched-surface-dark); box-shadow: var(--enriched-shadow-md); font-weight: 700; } .enriched-e-tab.active::before { content: ""; position: absolute; inset: -6px -8px -10px -8px; background: radial-gradient(120px 60px at 50% 110%, rgba(67, 97, 238, 0.25), transparent 60%); filter: blur(8px); z-index: -1; } .enriched-e-tab.active::after { content: ""; position: absolute; left: 20%; right: 20%; bottom: 0; height: 3px; border-radius: 3px; background: linear-gradient(90deg, var(--enriched-primary), var(--enriched-primary-light)); transition: var(--enriched-transition); } .enriched-e-body { position: relative; z-index: 1; background: linear-gradient(180deg, var(--enriched-surface), rgba(255, 255, 255, 0)); border-radius: var(--enriched-border-radius-lg); padding: var(--enriched-spacing-lg); box-shadow: var(--enriched-shadow-xs); transition: var(--enriched-transition); } .enriched-e-tab-content { display: none; animation: e-enriched-e-tab-content-fade-in 0.3s ease-in-out; } .enriched-e-tab-content.active { display: block; } @keyframes e-enriched-e-tab-content-fadein { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: translateY(0); } } .enriched-e-tabs.is-hidden { display: none !important; } .enriched-e-tabs[hidden] { display: none !important; } .enriched-e-tabshell.is-hidden { display: none !important; } .enriched-e-accordion { border: 2px solid var(--enriched-border); border-radius: var(--enriched-border-radius-lg); overflow: hidden; box-shadow: 0 2px 4px var(--enriched-shadow); } .enriched-e-accordion-item { border-bottom: 1px solid var(--enriched-border); background: var(--enriched-surface); } .enriched-e-accordion-item:last-child { border-bottom: none; } .enriched-e-accordion-header { padding: 1rem 1.25rem; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: .75rem; box-shadow: 0 2px 4px var(--enriched-shadow); font-weight: 700; color: var(--enriched-text); transition: var(--enriched-transition); } .enriched-e-accordion-headwrap { display: flex; align-items: center; gap: .5rem; min-width: 0; } .enriched-e-accordion-title { font-weight: 700; color: var(--enriched-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .e-pill, .enriched-e-accordion-count { display: inline-flex; align-items: center; justify-content: center; padding: .125rem .6rem; border-radius: 9999px; font-size: .825rem; font-weight: 700; line-height: 1.4; font-variant-numeric: tabular-nums; letter-spacing: .02em; background: color-mix(in srgb, var(--enriched-primary) 12%, transparent); color: var(--enriched-primary); border: 1px solid color-mix(in srgb, var(--enriched-primary) 35%, transparent); } .enriched-e-accordion-header i { transition: transform .25s ease; } .enriched-e-accordion-item.active .enriched-e-accordion-header i { transform: rotate(180deg); } .enriched-e-accordion-header:hover { background: var(--enriched-surface-dark); } .enriched-e-accordion-content { --e-stack-space: var(--enriched-space-8, var(--enriched-spacing-lg)); padding: var(--enriched-spacing-lg); display: none !important; overflow: visible; box-shadow: 0 2px 4px var(--enriched-shadow); transition: padding .3s ease; } .enriched-e-accordion-content>* { margin: 0; } .enriched-e-shared-spacer, .enriched-e-accordion-item.active .enriched-e-accordion-content { display: flex !important; flex-direction: column; gap: var(--e-stack-space); } .enriched-card-grid { display: flex !important; flex-direction: column; gap: var(--e-stack-space); } .enriched-e-accordion-desc { margin-block-end: var(--enriched-space-4); color: var(--enriched-text-secondary); font-size: 0.95rem; line-height: 1.5; } .enriched-e-accordion-desc.left { text-align: left; } .enriched-e-accordion-desc.center { text-align: center; } .enriched-e-accordion-desc.right { text-align: right; } .enriched-e-accordion-subactions { margin-block-start: var(--enriched-space-6); display: flex; flex-wrap: wrap; gap: var(--enriched-space-3); } .enriched-e-breadcrumbs { display: flex; align-items: center; gap: var(--enriched-spacing-xs); margin-bottom: var(--enriched-spacing-md); } .enriched-e-breadcrumb-item { display: flex; align-items: center; gap: var(--enriched-spacing-xs); font-size: 0.875rem; color: var(--enriched-text-light); } .enriched-e-breadcrumb-item:not(:last-child)::after { content: "/"; margin-left: var(--enriched-spacing-xs); color: var(--enriched-text-lighter); } .enriched-e-breadcrumb-item:last-child { color: var(--enriched-primary); font-weight: 500; } .enriched-e-pagination { display: flex; gap: var(--enriched-spacing-xs); } .enriched-e-pagination-item { display: flex; align-items: center; justify-content: center; min-width: 2.25rem; height: 2.25rem; padding: 0 var(--enriched-spacing-sm); border: 1px solid var(--enriched-border); border-radius: var(--enriched-border-radius-md); background: var(--enriched-surface); color: var(--enriched-text); font-size: 0.875rem; cursor: pointer; transition: all 0.3s ease; } .enriched-e-pagination-item:hover { background: var(--enriched-primary); border-color: var(--enriched-primary); color: white; } .enriched-e-pagination-item.active { background: var(--enriched-primary); border-color: var(--enriched-primary); color: white; } .enriched-e-tooltip { position: relative; display: inline-block; } .enriched-e-tooltip-text { position: absolute; z-index: var(--enriched-z-tooltip); background: var(--enriched-text); color: white; padding: var(--enriched-spacing-xs) var(--enriched-spacing-sm); border-radius: var(--enriched-border-radius-sm); font-size: 0.75rem; white-space: nowrap; opacity: 0; visibility: hidden; transition: all 0.3s ease; pointer-events: none; } .enriched-e-tooltip .enriched-main-button:hover { transform: translateY(0); } .enriched-e-tooltip:hover .enriched-e-tooltip-text { opacity: 1; visibility: visible; } .enriched-e-tooltip-top .enriched-e-tooltip-text { bottom: 105%; left: 50%; transform: translateX(-50%) translateY(-5px); } .enriched-e-tooltip-bottom .enriched-e-tooltip-text { top: 105%; left: 50%; transform: translateX(-50%) translateY(5px); } .enriched-e-tooltip:hover .enriched-e-tooltip-text { transform: translateX(-50%) translateY(0); } .enriched-e-loader { display: inline-block; width: 2rem; height: 2rem; border: 3px solid rgba(67, 97, 238, 0.3); border-radius: 50%; border-top-color: var(--enriched-primary); animation: e-enriched-e-spin 1s ease-in-out infinite; } @keyframes e-enriched-e-spin { to { transform: rotate(360deg); } } .enriched-e-loader-lg { width: 3rem; height: 3rem; border-width: 4px; } .enriched-e-loader-sm { width: 1.5rem; height: 1.5rem; border-width: 2px; } .enriched-e-avatar { display: inline-flex; align-items: center; justify-content: center; width: 3rem; height: 3rem; border-radius: 50%; background: var(--enriched-primary); color: #fff; font-weight: 700; overflow: hidden; } .enriched-e-avatar img { width: 100%; height: 100%; object-fit: cover; } .enriched-e-avatar-lg { width: 4rem; height: 4rem; font-size: 1.2rem; } .enriched-e-avatar-sm { width: 2rem; height: 2rem; font-size: .85rem; } .enriched-e-loader { display: inline-block; width: 2rem; height: 2rem; border: 3px solid rgba(67, 97, 238, .25); border-radius: 50%; border-top-color: var(--enriched-primary); animation: e-enriched-e-loader-spin 1s ease-in-out infinite; } .enriched-e-loader-lg { width: 3rem; height: 3rem; border-width: 4px; } .enriched-e-loader-sm { width: 1.5rem; height: 1.5rem; border-width: 2px; } @keyframes e-enriched-e-loader-spin { to { transform: rotate(360deg); } } .enriched-e-chips { display: flex; gap: .5rem; flex-wrap: wrap; } .enriched-e-chip { display: inline-flex; align-items: center; gap: .5rem; padding: .45rem .7rem; border: 1px solid var(--enriched-border); border-radius: var(--enriched-border-radius-o); background: var(--enriched-surface); font-size: .9rem; box-shadow: var(--enriched-shadow-xs); transition: var(--enriched-transition); } .enriched-e-chip i { font-size: .9rem; } .enriched-e-chip-close { background: none; border: none; cursor: pointer; display: grid; place-items: center; width: 1.25rem; height: 1.25rem; border-radius: 50%; color: var(--enriched-text-light); transition: var(--enriched-transition); } .enriched-e-chip-close:hover { background: var(--enriched-danger); color: #fff; } .enriched-e-alerts { display: flex; flex-direction: column; gap: .65rem; } .enriched-e-alert { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: .75rem; padding: .7rem .8rem; border-radius: var(--enriched-border-radius-xl); border: 1px solid var(--enriched-border-light); } .enriched-badge-thumb { display: inline-block; width: 36px; height: 36px; object-fit: cover; box-shadow: var(--enriched-shadow-sm); border-radius: 6px; } .e-badge { display: inline-block; padding: .2rem .5rem; border-radius: var(--enriched-border-radius-o); background: var(--e-muted, #f2f3f5); font-size: .85em; color: var(--enriched-text); font-weight: 500; line-height: 1.2; } .badge-wrap { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; } .enriched-e-alert .badge { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; font-size: .95rem; color: #fff; font-weight: 600; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); } .alert-success { background: rgba(76, 201, 240, .15); border: 1px solid rgba(76, 201, 240, .3); } .alert-danger { background: rgba(247, 37, 133, .15); border: 1px solid rgba(247, 37, 133, .3); } .alert-warning { background: rgba(248, 150, 30, .15); border: 1px solid rgba(248, 150, 30, .3); } .alert-info { background: rgba(86, 11, 173, .15); border: 1px solid rgba(86, 11, 173, .3); } .alert-success .badge { background: #00c6ff; } .alert-danger .badge { background: #ff2d8f; } .alert-warning .badge { background: #ffb547; } .alert-info .badge { background: #6d28d9; } .enriched-e-alert-close { background: none; border: none; cursor: pointer; display: grid; place-items: center; width: 1.25rem; height: 1.25rem; border-radius: 50%; color: var(--enriched-text-light); transition: var(--enriched-transition); } .enriched-e-alert-close:hover { background: var(--enriched-danger); color: #fff; } .enriched-e-alert-content { font-weight: 600; color: var(--enriched-text); } .enriched-e-alert-success { background: rgba(76, 201, 240, 0.15); color: var(--enriched-success); border-left: 4px solid var(--enriched-success); } .enriched-e-alert-danger { background: rgba(247, 37, 133, 0.15); color: var(--enriched-danger); border-left: 4px solid var(--enriched-danger); } .enriched-e-alert-warning { background: rgba(248, 150, 30, 0.15); color: var(--enriched-warning); border-left: 4px solid var(--enriched-warning); } .enriched-e-alert-info { background: rgba(86, 11, 173, 0.15); color: var(--enriched-info); border-left: 4px solid var(--enriched-info); } @media (max-width: 768px) { .enriched-e-section { padding: var(--enriched-spacing-md); } .enriched-e-component-grid { grid-template-columns: 1fr; } } .e-m-0 { margin: 0 !important; } .e-p-0 { padding: 0 !important; } .e-mx-auto { margin-left: auto !important; margin-right: auto !important; } .e-ml-auto { margin-left: auto !important; } .e-mr-auto { margin-right: auto !important; } .e-ms-auto { margin-inline-start: auto !important; } .e-me-auto { margin-inline-end: auto !important; } :root { --enriched-space-0: 0; --enriched-space-1: var(--enriched-spacing-1); --enriched-space-2: var(--enriched-spacing-2); --enriched-space-3: var(--enriched-spacing-3); --enriched-space-4: var(--enriched-spacing-4); --enriched-space-5: var(--enriched-spacing-5); --enriched-space-6: var(--enriched-spacing-6); --enriched-space-8: var(--enriched-spacing-8); --enriched-space-9: var(--enriched-spacing-9); --enriched-space-10: var(--enriched-spacing-10); --enriched-space-12: var(--enriched-spacing-12); --enriched-space-16: var(--enriched-spacing-16); --enriched-space-20: var(--enriched-spacing-20); --enriched-space-24: var(--enriched-spacing-24); --enriched-space-32: var(--enriched-spacing-32); } .e-stack { --e-stack-space: var(--enriched-space-8); display: flex; flex-direction: column; gap: var(--e-stack-space); } .e-stack>* { margin: 0; } .e-stack-0 { --e-stack-space: var(--enriched-space-0); } .e-stack-1 { --e-stack-space: var(--enriched-space-1); } .e-stack-2 { --e-stack-space: var(--enriched-space-2); } .e-stack-3 { --e-stack-space: var(--enriched-space-3); } .e-stack-4 { --e-stack-space: var(--enriched-space-4); } .e-stack-5 { --e-stack-space: var(--enriched-space-5); } .e-stack-6 { --e-stack-space: var(--enriched-space-6); } .e-stack-8 { --e-stack-space: var(--enriched-space-8); } .e-stack-9 { --e-stack-space: var(--enriched-space-9); } .e-stack-10 { --e-stack-space: var(--enriched-space-10); } .e-stack-12 { --e-stack-space: var(--enriched-space-12); } .e-stack-16 { --e-stack-space: var(--enriched-space-16); } .e-stack-20 { --e-stack-space: var(--enriched-space-20); } .e-stack-24 { --e-stack-space: var(--enriched-space-24); } .e-stack-32 { --e-stack-space: var(--enriched-space-32); } .e-m-0 { margin: var(--enriched-space-0) !important; } .e-m-1 { margin: var(--enriched-space-1) !important; } .e-m-2 { margin: var(--enriched-space-2) !important; } .e-m-3 { margin: var(--enriched-space-3) !important; } .e-m-4 { margin: var(--enriched-space-4) !important; } .e-m-5 { margin: var(--enriched-space-5) !important; } .e-m-6 { margin: var(--enriched-space-6) !important; } .e-m-8 { margin: var(--enriched-space-8) !important; } .e-m-9 { margin: var(--enriched-space-9) !important; } .e-m-10 { margin: var(--enriched-space-10) !important; } .e-m-12 { margin: var(--enriched-space-12) !important; } .e-m-16 { margin: var(--enriched-space-16) !important; } .e-m-20 { margin: var(--enriched-space-20) !important; } .e-m-24 { margin: var(--enriched-space-24) !important; } .e-m-32 { margin: var(--enriched-space-32) !important; } .e-mx-0 { margin-left: var(--enriched-space-0) !important; margin-right: var(--enriched-space-0) !important; } .e-mx-1 { margin-left: var(--enriched-space-1) !important; margin-right: var(--enriched-space-1) !important; } .e-mx-2 { margin-left: var(--enriched-space-2) !important; margin-right: var(--enriched-space-2) !important; } .e-mx-3 { margin-left: var(--enriched-space-3) !important; margin-right: var(--enriched-space-3) !important; } .e-mx-4 { margin-left: var(--enriched-space-4) !important; margin-right: var(--enriched-space-4) !important; } .e-mx-5 { margin-left: var(--enriched-space-5) !important; margin-right: var(--enriched-space-5) !important; } .e-mx-6 { margin-left: var(--enriched-space-6) !important; margin-right: var(--enriched-space-6) !important; } .e-mx-8 { margin-left: var(--enriched-space-8) !important; margin-right: var(--enriched-space-8) !important; } .e-mx-9 { margin-left: var(--enriched-space-9) !important; margin-right: var(--enriched-space-9) !important; } .e-mx-10 { margin-left: var(--enriched-space-10) !important; margin-right: var(--enriched-space-10) !important; } .e-mx-12 { margin-left: var(--enriched-space-12) !important; margin-right: var(--enriched-space-12) !important; } .e-mx-16 { margin-left: var(--enriched-space-16) !important; margin-right: var(--enriched-space-16) !important; } .e-mx-20 { margin-left: var(--enriched-space-20) !important; margin-right: var(--enriched-space-20) !important; } .e-mx-24 { margin-left: var(--enriched-space-24) !important; margin-right: var(--enriched-space-24) !important; } .e-mx-32 { margin-left: var(--enriched-space-32) !important; margin-right: var(--enriched-space-32) !important; } .e-my-0 { margin-top: var(--enriched-space-0) !important; margin-bottom: var(--enriched-space-0) !important; } .e-my-1 { margin-top: var(--enriched-space-1) !important; margin-bottom: var(--enriched-space-1) !important; } .e-my-2 { margin-top: var(--enriched-space-2) !important; margin-bottom: var(--enriched-space-2) !important; } .e-my-3 { margin-top: var(--enriched-space-3) !important; margin-bottom: var(--enriched-space-3) !important; } .e-my-4 { margin-top: var(--enriched-space-4) !important; margin-bottom: var(--enriched-space-4) !important; } .e-my-5 { margin-top: var(--enriched-space-5) !important; margin-bottom: var(--enriched-space-5) !important; } .e-my-6 { margin-top: var(--enriched-space-6) !important; margin-bottom: var(--enriched-space-6) !important; } .e-my-8 { margin-top: var(--enriched-space-8) !important; margin-bottom: var(--enriched-space-8) !important; } .e-my-9 { margin-top: var(--enriched-space-9) !important; margin-bottom: var(--enriched-space-9) !important; } .e-my-10 { margin-top: var(--enriched-space-10) !important; margin-bottom: var(--enriched-space-10) !important; } .e-my-12 { margin-top: var(--enriched-space-12) !important; margin-bottom: var(--enriched-space-12) !important; } .e-my-16 { margin-top: var(--enriched-space-16) !important; margin-bottom: var(--enriched-space-16) !important; } .e-my-20 { margin-top: var(--enriched-space-20) !important; margin-bottom: var(--enriched-space-20) !important; } .e-my-24 { margin-top: var(--enriched-space-24) !important; margin-bottom: var(--enriched-space-24) !important; } .e-my-32 { margin-top: var(--enriched-space-32) !important; margin-bottom: var(--enriched-space-32) !important; } .e-mt-0 { margin-top: var(--enriched-space-0) !important; } .e-mt-1 { margin-top: var(--enriched-space-1) !important; } .e-mt-2 { margin-top: var(--enriched-space-2) !important; } .e-mt-3 { margin-top: var(--enriched-space-3) !important; } .e-mt-4 { margin-top: var(--enriched-space-4) !important; } .e-mt-5 { margin-top: var(--enriched-space-5) !important; } .e-mt-6 { margin-top: var(--enriched-space-6) !important; } .e-mt-8 { margin-top: var(--enriched-space-8) !important; } .e-mt-9 { margin-top: var(--enriched-space-9) !important; } .e-mt-10 { margin-top: var(--enriched-space-10) !important; } .e-mt-12 { margin-top: var(--enriched-space-12) !important; } .e-mt-16 { margin-top: var(--enriched-space-16) !important; } .e-mt-20 { margin-top: var(--enriched-space-20) !important; } .e-mt-24 { margin-top: var(--enriched-space-24) !important; } .e-mt-32 { margin-top: var(--enriched-space-32) !important; } .e-mr-0 { margin-right: var(--enriched-space-0) !important; } .e-mr-1 { margin-right: var(--enriched-space-1) !important; } .e-mr-2 { margin-right: var(--enriched-space-2) !important; } .e-mr-3 { margin-right: var(--enriched-space-3) !important; } .e-mr-4 { margin-right: var(--enriched-space-4) !important; } .e-mr-5 { margin-right: var(--enriched-space-5) !important; } .e-mr-6 { margin-right: var(--enriched-space-6) !important; } .e-mr-8 { margin-right: var(--enriched-space-8) !important; } .e-mr-9 { margin-right: var(--enriched-space-9) !important; } .e-mr-10 { margin-right: var(--enriched-space-10) !important; } .e-mr-12 { margin-right: var(--enriched-space-12) !important; } .e-mr-16 { margin-right: var(--enriched-space-16) !important; } .e-mr-20 { margin-right: var(--enriched-space-20) !important; } .e-mr-24 { margin-right: var(--enriched-space-24) !important; } .e-mr-32 { margin-right: var(--enriched-space-32) !important; } .e-mb-0 { margin-bottom: var(--enriched-space-0) !important; } .e-mb-1 { margin-bottom: var(--enriched-space-1) !important; } .e-mb-2 { margin-bottom: var(--enriched-space-2) !important; } .e-mb-3 { margin-bottom: var(--enriched-space-3) !important; } .e-mb-4 { margin-bottom: var(--enriched-space-4) !important; } .e-mb-5 { margin-bottom: var(--enriched-space-5) !important; } .e-mb-6 { margin-bottom: var(--enriched-space-6) !important; } .e-mb-8 { margin-bottom: var(--enriched-space-8) !important; } .e-mb-9 { margin-bottom: var(--enriched-space-9) !important; } .e-mb-10 { margin-bottom: var(--enriched-space-10) !important; } .e-mb-12 { margin-bottom: var(--enriched-space-12) !important; } .e-mb-16 { margin-bottom: var(--enriched-space-16) !important; } .e-mb-20 { margin-bottom: var(--enriched-space-20) !important; } .e-mb-24 { margin-bottom: var(--enriched-space-24) !important; } .e-mb-32 { margin-bottom: var(--enriched-space-32) !important; } .e-ml-0 { margin-left: var(--enriched-space-0) !important; } .e-ml-1 { margin-left: var(--enriched-space-1) !important; } .e-ml-2 { margin-left: var(--enriched-space-2) !important; } .e-ml-3 { margin-left: var(--enriched-space-3) !important; } .e-ml-4 { margin-left: var(--enriched-space-4) !important; } .e-ml-5 { margin-left: var(--enriched-space-5) !important; } .e-ml-6 { margin-left: var(--enriched-space-6) !important; } .e-ml-8 { margin-left: var(--enriched-space-8) !important; } .e-ml-9 { margin-left: var(--enriched-space-9) !important; } .e-ml-10 { margin-left: var(--enriched-space-10) !important; } .e-ml-12 { margin-left: var(--enriched-space-12) !important; } .e-ml-16 { margin-left: var(--enriched-space-16) !important; } .e-ml-20 { margin-left: var(--enriched-space-20) !important; } .e-ml-24 { margin-left: var(--enriched-space-24) !important; } .e-ml-32 { margin-left: var(--enriched-space-32) !important; } .e-ms-0 { margin-inline-start: var(--enriched-space-0) !important; } .e-ms-1 { margin-inline-start: var(--enriched-space-1) !important; } .e-ms-2 { margin-inline-start: var(--enriched-space-2) !important; } .e-ms-3 { margin-inline-start: var(--enriched-space-3) !important; } .e-ms-4 { margin-inline-start: var(--enriched-space-4) !important; } .e-ms-5 { margin-inline-start: var(--enriched-space-5) !important; } .e-ms-6 { margin-inline-start: var(--enriched-space-6) !important; } .e-ms-8 { margin-inline-start: var(--enriched-space-8) !important; } .e-ms-9 { margin-inline-start: var(--enriched-space-9) !important; } .e-ms-10 { margin-inline-start: var(--enriched-space-10) !important; } .e-ms-12 { margin-inline-start: var(--enriched-space-12) !important; } .e-ms-16 { margin-inline-start: var(--enriched-space-16) !important; } .e-ms-20 { margin-inline-start: var(--enriched-space-20) !important; } .e-ms-24 { margin-inline-start: var(--enriched-space-24) !important; } .e-ms-32 { margin-inline-start: var(--enriched-space-32) !important; } .e-me-0 { margin-inline-end: var(--enriched-space-0) !important; } .e-me-1 { margin-inline-end: var(--enriched-space-1) !important; } .e-me-2 { margin-inline-end: var(--enriched-space-2) !important; } .e-me-3 { margin-inline-end: var(--enriched-space-3) !important; } .e-me-4 { margin-inline-end: var(--enriched-space-4) !important; } .e-me-5 { margin-inline-end: var(--enriched-space-5) !important; } .e-me-6 { margin-inline-end: var(--enriched-space-6) !important; } .e-me-8 { margin-inline-end: var(--enriched-space-8) !important; } .e-me-9 { margin-inline-end: var(--enriched-space-9) !important; } .e-me-10 { margin-inline-end: var(--enriched-space-10) !important; } .e-me-12 { margin-inline-end: var(--enriched-space-12) !important; } .e-me-16 { margin-inline-end: var(--enriched-space-16) !important; } .e-me-20 { margin-inline-end: var(--enriched-space-20) !important; } .e-me-24 { margin-inline-end: var(--enriched-space-24) !important; } .e-me-32 { margin-inline-end: var(--enriched-space-32) !important; } .e-p-0 { padding: var(--enriched-space-0) !important; } .e-p-1 { padding: var(--enriched-space-1) !important; } .e-p-2 { padding: var(--enriched-space-2) !important; } .e-p-3 { padding: var(--enriched-space-3) !important; } .e-p-4 { padding: var(--enriched-space-4) !important; } .e-p-5 { padding: var(--enriched-space-5) !important; } .e-p-6 { padding: var(--enriched-space-6) !important; } .e-p-8 { padding: var(--enriched-space-8) !important; } .e-p-9 { padding: var(--enriched-space-9) !important; } .e-p-10 { padding: var(--enriched-space-10) !important; } .e-p-12 { padding: var(--enriched-space-12) !important; } .e-p-16 { padding: var(--enriched-space-16) !important; } .e-p-20 { padding: var(--enriched-space-20) !important; } .e-p-24 { padding: var(--enriched-space-24) !important; } .e-p-32 { padding: var(--enriched-space-32) !important; } .e-px-0 { padding-left: var(--enriched-space-0) !important; padding-right: var(--enriched-space-0) !important; } .e-px-1 { padding-left: var(--enriched-space-1) !important; padding-right: var(--enriched-space-1) !important; } .e-px-2 { padding-left: var(--enriched-space-2) !important; padding-right: var(--enriched-space-2) !important; } .e-px-3 { padding-left: var(--enriched-space-3) !important; padding-right: var(--enriched-space-3) !important; } .e-px-4 { padding-left: var(--enriched-space-4) !important; padding-right: var(--enriched-space-4) !important; } .e-px-5 { padding-left: var(--enriched-space-5) !important; padding-right: var(--enriched-space-5) !important; } .e-px-6 { padding-left: var(--enriched-space-6) !important; padding-right: var(--enriched-space-6) !important; } .e-px-8 { padding-left: var(--enriched-space-8) !important; padding-right: var(--enriched-space-8) !important; } .e-px-9 { padding-left: var(--enriched-space-9) !important; padding-right: var(--enriched-space-9) !important; } .e-px-10 { padding-left: var(--enriched-space-10) !important; padding-right: var(--enriched-space-10) !important; } .e-px-12 { padding-left: var(--enriched-space-12) !important; padding-right: var(--enriched-space-12) !important; } .e-px-16 { padding-left: var(--enriched-space-16) !important; padding-right: var(--enriched-space-16) !important; } .e-px-20 { padding-left: var(--enriched-space-20) !important; padding-right: var(--enriched-space-20) !important; } .e-px-24 { padding-left: var(--enriched-space-24) !important; padding-right: var(--enriched-space-24) !important; } .e-px-32 { padding-left: var(--enriched-space-32) !important; padding-right: var(--enriched-space-32) !important; } .e-py-0 { padding-top: var(--enriched-space-0) !important; padding-bottom: var(--enriched-space-0) !important; } .e-py-1 { padding-top: var(--enriched-space-1) !important; padding-bottom: var(--enriched-space-1) !important; } .e-py-2 { padding-top: var(--enriched-space-2) !important; padding-bottom: var(--enriched-space-2) !important; } .e-py-3 { padding-top: var(--enriched-space-3) !important; padding-bottom: var(--enriched-space-3) !important; } .e-py-4 { padding-top: var(--enriched-space-4) !important; padding-bottom: var(--enriched-space-4) !important; } .e-py-5 { padding-top: var(--enriched-space-5) !important; padding-bottom: var(--enriched-space-5) !important; } .e-py-6 { padding-top: var(--enriched-space-6) !important; padding-bottom: var(--enriched-space-6) !important; } .e-py-8 { padding-top: var(--enriched-space-8) !important; padding-bottom: var(--enriched-space-8) !important; } .e-py-9 { padding-top: var(--enriched-space-9) !important; padding-bottom: var(--enriched-space-9) !important; } .e-py-10 { padding-top: var(--enriched-space-10) !important; padding-bottom: var(--enriched-space-10) !important; } .e-py-12 { padding-top: var(--enriched-space-12) !important; padding-bottom: var(--enriched-space-12) !important; } .e-py-16 { padding-top: var(--enriched-space-16) !important; padding-bottom: var(--enriched-space-16) !important; } .e-py-20 { padding-top: var(--enriched-space-20) !important; padding-bottom: var(--enriched-space-20) !important; } .e-py-24 { padding-top: var(--enriched-space-24) !important; padding-bottom: var(--enriched-space-24) !important; } .e-py-32 { padding-top: var(--enriched-space-32) !important; padding-bottom: var(--enriched-space-32) !important; } .e-pt-0 { padding-top: var(--enriched-space-0) !important; } .e-pt-1 { padding-top: var(--enriched-space-1) !important; } .e-pt-2 { padding-top: var(--enriched-space-2) !important; } .e-pt-3 { padding-top: var(--enriched-space-3) !important; } .e-pt-4 { padding-top: var(--enriched-space-4) !important; } .e-pt-5 { padding-top: var(--enriched-space-5) !important; } .e-pt-6 { padding-top: var(--enriched-space-6) !important; } .e-pt-8 { padding-top: var(--enriched-space-8) !important; } .e-pt-9 { padding-top: var(--enriched-space-9) !important; } .e-pt-10 { padding-top: var(--enriched-space-10) !important; } .e-pt-12 { padding-top: var(--enriched-space-12) !important; } .e-pt-16 { padding-top: var(--enriched-space-16) !important; } .e-pt-20 { padding-top: var(--enriched-space-20) !important; } .e-pt-24 { padding-top: var(--enriched-space-24) !important; } .e-pt-32 { padding-top: var(--enriched-space-32) !important; } .e-pr-0 { padding-right: var(--enriched-space-0) !important; } .e-pr-1 { padding-right: var(--enriched-space-1) !important; } .e-pr-2 { padding-right: var(--enriched-space-2) !important; } .e-pr-3 { padding-right: var(--enriched-space-3) !important; } .e-pr-4 { padding-right: var(--enriched-space-4) !important; } .e-pr-5 { padding-right: var(--enriched-space-5) !important; } .e-pr-6 { padding-right: var(--enriched-space-6) !important; } .e-pr-8 { padding-right: var(--enriched-space-8) !important; } .e-pr-9 { padding-right: var(--enriched-space-9) !important; } .e-pr-10 { padding-right: var(--enriched-space-10) !important; } .e-pr-12 { padding-right: var(--enriched-space-12) !important; } .e-pr-16 { padding-right: var(--enriched-space-16) !important; } .e-pr-20 { padding-right: var(--enriched-space-20) !important; } .e-pr-24 { padding-right: var(--enriched-space-24) !important; } .e-pr-32 { padding-right: var(--enriched-space-32) !important; } .e-pb-0 { padding-bottom: var(--enriched-space-0) !important; } .e-pb-1 { padding-bottom: var(--enriched-space-1) !important; } .e-pb-2 { padding-bottom: var(--enriched-space-2) !important; } .e-pb-3 { padding-bottom: var(--enriched-space-3) !important; } .e-pb-4 { padding-bottom: var(--enriched-space-4) !important; } .e-pb-5 { padding-bottom: var(--enriched-space-5) !important; } .e-pb-6 { padding-bottom: var(--enriched-space-6) !important; } .e-pb-8 { padding-bottom: var(--enriched-space-8) !important; } .e-pb-9 { padding-bottom: var(--enriched-space-9) !important; } .e-pb-10 { padding-bottom: var(--enriched-space-10) !important; } .e-pb-12 { padding-bottom: var(--enriched-space-12) !important; } .e-pb-16 { padding-bottom: var(--enriched-space-16) !important; } .e-pb-20 { padding-bottom: var(--enriched-space-20) !important; } .e-pb-24 { padding-bottom: var(--enriched-space-24) !important; } .e-pb-32 { padding-bottom: var(--enriched-space-32) !important; } .e-pl-0 { padding-left: var(--enriched-space-0) !important; } .e-pl-1 { padding-left: var(--enriched-space-1) !important; } .e-pl-2 { padding-left: var(--enriched-space-2) !important; } .e-pl-3 { padding-left: var(--enriched-space-3) !important; } .e-pl-4 { padding-left: var(--enriched-space-4) !important; } .e-pl-5 { padding-left: var(--enriched-space-5) !important; } .e-pl-6 { padding-left: var(--enriched-space-6) !important; } .e-pl-8 { padding-left: var(--enriched-space-8) !important; } .e-pl-9 { padding-left: var(--enriched-space-9) !important; } .e-pl-10 { padding-left: var(--enriched-space-10) !important; } .e-pl-12 { padding-left: var(--enriched-space-12) !important; } .e-pl-16 { padding-left: var(--enriched-space-16) !important; } .e-pl-20 { padding-left: var(--enriched-space-20) !important; } .e-pl-24 { padding-left: var(--enriched-space-24) !important; } .e-pl-32 { padding-left: var(--enriched-space-32) !important; } .e-ps-0 { padding-inline-start: var(--enriched-space-0) !important; } .e-ps-1 { padding-inline-start: var(--enriched-space-1) !important; } .e-ps-2 { padding-inline-start: var(--enriched-space-2) !important; } .e-ps-3 { padding-inline-start: var(--enriched-space-3) !important; } .e-ps-4 { padding-inline-start: var(--enriched-space-4) !important; } .e-ps-5 { padding-inline-start: var(--enriched-space-5) !important; } .e-ps-6 { padding-inline-start: var(--enriched-space-6) !important; } .e-ps-8 { padding-inline-start: var(--enriched-space-8) !important; } .e-ps-9 { padding-inline-start: var(--enriched-space-9) !important; } .e-ps-10 { padding-inline-start: var(--enriched-space-10) !important; } .e-ps-12 { padding-inline-start: var(--enriched-space-12) !important; } .e-ps-16 { padding-inline-start: var(--enriched-space-16) !important; } .e-ps-20 { padding-inline-start: var(--enriched-space-20) !important; } .e-ps-24 { padding-inline-start: var(--enriched-space-24) !important; } .e-ps-32 { padding-inline-start: var(--enriched-space-32) !important; } .e-pe-0 { padding-inline-end: var(--enriched-space-0) !important; } .e-pe-1 { padding-inline-end: var(--enriched-space-1) !important; } .e-pe-2 { padding-inline-end: var(--enriched-space-2) !important; } .e-pe-3 { padding-inline-end: var(--enriched-space-3) !important; } .e-pe-4 { padding-inline-end: var(--enriched-space-4) !important; } .e-pe-5 { padding-inline-end: var(--enriched-space-5) !important; } .e-pe-6 { padding-inline-end: var(--enriched-space-6) !important; } .e-pe-8 { padding-inline-end: var(--enriched-space-8) !important; } .e-pe-9 { padding-inline-end: var(--enriched-space-9) !important; } .e-pe-10 { padding-inline-end: var(--enriched-space-10) !important; } .e-pe-12 { padding-inline-end: var(--enriched-space-12) !important; } .e-pe-16 { padding-inline-end: var(--enriched-space-16) !important; } .e-pe-20 { padding-inline-end: var(--enriched-space-20) !important; } .e-pe-24 { padding-inline-end: var(--enriched-space-24) !important; } .e-pe-32 { padding-inline-end: var(--enriched-space-32) !important; } .e-gap-xxs{gap:var(--enriched-spacing-xxs)!important;} .e-gap-xs{gap:var(--enriched-spacing-xs)!important;} .e-gap-sm{gap:var(--enriched-spacing-sm)!important;} .e-gap-sh{gap:var(--enriched-spacing-sh)!important;} .e-gap-md{gap:var(--enriched-spacing-md)!important;} .e-gap-nm{gap:var(--enriched-spacing-nm)!important;} .e-gap-lg{gap:var(--enriched-spacing-lg)!important;} .e-gap-xl{gap:var(--enriched-spacing-xl)!important;} .e-gap-xxl{gap:var(--enriched-spacing-xxl)!important;} .e-gap-xxxl{gap:var(--enriched-spacing-xxxl)!important;} .e-gap-xxxxl{gap:var(--enriched-spacing-xxxxl)!important;} .e-gap-0 { gap: var(--enriched-space-0) !important; } .e-gap-1 { gap: var(--enriched-space-1) !important; } .e-gap-2 { gap: var(--enriched-space-2) !important; } .e-gap-3 { gap: var(--enriched-space-3) !important; } .e-gap-4 { gap: var(--enriched-space-4) !important; } .e-gap-5 { gap: var(--enriched-space-5) !important; } .e-gap-6 { gap: var(--enriched-space-6) !important; } .e-gap-8 { gap: var(--enriched-space-8) !important; } .e-gap-9 { gap: var(--enriched-space-9) !important; } .e-gap-10 { gap: var(--enriched-space-10) !important; } .e-gap-12 { gap: var(--enriched-space-12) !important; } .e-gap-16 { gap: var(--enriched-space-16) !important; } .e-gap-20 { gap: var(--enriched-space-20) !important; } .e-gap-24 { gap: var(--enriched-space-24) !important; } .e-gap-32 { gap: var(--enriched-space-32) !important; } .e-space-y-0>*+* { margin-top: var(--enriched-space-0) !important; } .e-space-y-1>*+* { margin-top: var(--enriched-space-1) !important; } .e-space-y-2>*+* { margin-top: var(--enriched-space-2) !important; } .e-space-y-3>*+* { margin-top: var(--enriched-space-3) !important; } .e-space-y-4>*+* { margin-top: var(--enriched-space-4) !important; } .e-space-y-5>*+* { margin-top: var(--enriched-space-5) !important; } .e-space-y-6>*+* { margin-top: var(--enriched-space-6) !important; } .e-space-y-8>*+* { margin-top: var(--enriched-space-8) !important; } .e-space-y-9>*+* { margin-top: var(--enriched-space-9) !important; } .e-space-y-10>*+* { margin-top: var(--enriched-space-10) !important; } .e-space-y-12>*+* { margin-top: var(--enriched-space-12) !important; } .e-space-x-0>*+* { margin-left: var(--enriched-space-0) !important; } .e-space-x-1>*+* { margin-left: var(--enriched-space-1) !important; } .e-space-x-2>*+* { margin-left: var(--enriched-space-2) !important; } .e-space-x-3>*+* { margin-left: var(--enriched-space-3) !important; } .e-space-x-4>*+* { margin-left: var(--enriched-space-4) !important; } .e-space-x-5>*+* { margin-left: var(--enriched-space-5) !important; } .e-space-x-6>*+* { margin-left: var(--enriched-space-6) !important; } .e-space-x-8>*+* { margin-left: var(--enriched-space-8) !important; } .e-space-x-9>*+* { margin-left: var(--enriched-space-9) !important; } .e-space-x-10>*+* { margin-left: var(--enriched-space-10) !important; } .e-space-x-12>*+* { margin-left: var(--enriched-space-12) !important; } .enriched-flex { display: flex; flex-wrap: wrap; justify-content: center; align-items: stretch; } .enriched-flex-card-xs { flex: 1 1 clamp(140px, 16%, 200px); } .enriched-flex-card-sm { flex: 1 1 clamp(180px, 20%, 260px); } .enriched-flex-card, .enriched-flex-card-md { flex: 1 1 clamp(200px, 22%, 320px); } .enriched-flex-card-lg { flex: 1 1 clamp(240px, 25%, 380px); } .enriched-flex-card-xl { flex: 1 1 clamp(280px, 28%, 440px); } .enriched-sub-section { background: var(--enriched-surface); backdrop-filter: blur(var(--enriched-glass-blur)); border-radius: var(--enriched-border-radius-xl); box-shadow: var(--enriched-glass-shadow); border: var(--enriched-glass-border); padding: var(--enriched-spacing-xl); margin-bottom: var(--enriched-spacing-xl); transition: var(--enriched-transition); } .enriched-sub-section:last-child { margin-bottom: 0; } .enriched-sub-section:hover { box-shadow: 0 12px 28px var(--enriched-shadow-dark); } .enriched-sub-group-title { margin-bottom: var(--enriched-spacing-lg); } .enriched-button-group { display: flex; flex-wrap: wrap; gap: var(--enriched-spacing-md); margin: var(--enriched-spacing-lg) 0; align-items: center; } .enriched-button-group-title { font-size: 1.25rem; font-weight: 600; color: var(--enriched-primary); margin-bottom: var(--enriched-spacing-md); width: 100%; display: flex; align-items: center; gap: var(--enriched-spacing-sm); } .enriched-button-group-title i { font-size: 1.1rem; width: 28px; height: 28px; display: flex; align-items: center; justify-content: center; background: rgba(67, 97, 238, 0.1); color: var(--enriched-primary); border-radius: 50%; } .enriched-main-button{ display:inline-flex; align-items:center; justify-content:center; min-height:40px; gap:var(--enriched-spacing-sm); padding-inline:var(--enriched-spacing-lg); padding-block:calc(var(--enriched-spacing-sm) + 2px); line-height:1; box-sizing:border-box; border:none; border-radius:var(--enriched-border-radius-md); font-size:.95rem; font-weight:600; text-align:center; text-decoration:none; cursor:pointer; transition:all .3s ease; position:relative; overflow:hidden; outline:0; box-shadow:var(--enriched-shadow-md); } .enriched-main-button>*{line-height:1;display:inline-block;vertical-align:middle;} .enriched-main-button.medium { padding: var(--enriched-spacing-md) var(--enriched-spacing-lg); } .enriched-main-button.large { padding: var(--enriched-spacing-lg) var(--enriched-spacing-lg); } .enriched-main-button.hundred, .enriched-main-button.stretch { width: 100%; } .enriched-main-button.half, .enriched-main-button.fifty { width: 50%; } .enriched-main-button.third { width: 33.3%; } .enriched-main-button.twenty-five { width: 33.3%; } .enriched-main-button:focus-visible { box-shadow: 0 0 0 3px rgba(67, 97, 238, 0.3); } .enriched-main-button.is-disabled, .enriched-main-button:disabled { opacity: 0.6; cursor: not-allowed; transform: none !important; } .enriched-main-button-extra-small,.enriched-main-button-xs{ padding:var(--enriched-spacing-xs) var(--enriched-spacing-md); font-size:.75rem; min-height: auto; } .enriched-main-button-small,.enriched-main-button-sm{ padding:var(--enriched-spacing-sm) var(--enriched-spacing-md); font-size:.85rem; min-height: auto; } .enriched-main-button-large,.enriched-main-button-lg{ padding:var(--enriched-spacing-lg) var(--enriched-spacing-xl); font-size:1.1rem; min-height: auto; } .enriched-main-button-extra-large,.enriched-main-button-xl{ padding:var(--enriched-spacing-xl) var(--enriched-spacing-xxl); font-size:1.25rem; min-height: auto; } .enriched-main-button-rounded { border-radius: var(--enriched-border-radius-lg); } .enriched-main-button-pill { border-radius: var(--enriched-border-radius-o); } .enriched-main-button-sharp { border-radius: 0; } .enriched-main-button-primary { background: linear-gradient(135deg, var(--enriched-primary) 0%, var(--enriched-primary-light) 100%); color: white; box-shadow: 0 4px 6px rgba(67, 97, 238, 0.2); } .enriched-main-button-primary:hover:not(:disabled) { background: linear-gradient(135deg, var(--enriched-primary-dark) 0%, var(--enriched-primary) 100%); box-shadow: 0 6px 10px rgba(67, 97, 238, 0.3); transform: translateY(-2px); } .enriched-main-button-secondary { background: linear-gradient(135deg, var(--enriched-secondary) 0%, var(--enriched-secondary-light) 100%); color: white; box-shadow: 0 4px 6px rgba(47, 169, 163, 0.2); } .enriched-main-button-secondary:hover:not(:disabled) { background: linear-gradient(135deg, var(--enriched-secondary-dark) 0%, var(--enriched-secondary) 100%); box-shadow: 0 6px 10px rgba(47, 169, 163, 0.3); transform: translateY(-2px); } .enriched-main-button-accent { background: linear-gradient(135deg, var(--enriched-accent) 0%, var(--enriched-accent-light) 100%); color: white; box-shadow: 0 4px 6px rgba(255, 180, 87, 0.18); } .enriched-main-button-accent:hover:not(:disabled) { background: linear-gradient(135deg, var(--enriched-accent-dark) 0%, var(--enriched-accent) 100%); box-shadow: 0 6px 10px rgba(255, 180, 87, 0.28); transform: translateY(-2px); } .enriched-main-button-success { background: linear-gradient(135deg, var(--enriched-success) 0%, #4ade80 100%); color: white; box-shadow: 0 4px 6px rgba(34, 197, 94, 0.2); } .enriched-main-button-success:hover:not(:disabled) { background: linear-gradient(135deg, var(--enriched-success-dark) 0%, var(--enriched-success) 100%); box-shadow: 0 6px 10px rgba(34, 197, 94, 0.3); transform: translateY(-2px); } .enriched-main-button-danger { background: linear-gradient(135deg, var(--enriched-danger) 0%, #f87171 100%); color: white; box-shadow: 0 4px 6px rgba(239, 68, 68, 0.2); } .enriched-main-button-danger:hover:not(:disabled) { background: linear-gradient(135deg, var(--enriched-danger-dark) 0%, var(--enriched-danger) 100%); box-shadow: 0 6px 10px rgba(239, 68, 68, 0.3); transform: translateY(-2px); } .enriched-main-button-warning { background: linear-gradient(135deg, var(--enriched-warning) 0%, #fbbf24 100%); color: white; box-shadow: 0 4px 6px rgba(245, 158, 11, 0.2); } .enriched-main-button-warning:hover:not(:disabled) { background: linear-gradient(135deg, var(--enriched-warning-dark) 0%, var(--enriched-warning) 100%); box-shadow: 0 6px 10px rgba(245, 158, 11, 0.3); transform: translateY(-2px); } .enriched-main-button-info { background: linear-gradient(135deg, var(--enriched-info) 0%, #38bdf8 100%); color: white; box-shadow: 0 4px 6px rgba(14, 165, 233, 0.2); } .enriched-main-button-info:hover:not(:disabled) { background: linear-gradient(135deg, var(--enriched-info-dark) 0%, var(--enriched-info) 100%); box-shadow: 0 6px 10px rgba(14, 165, 233, 0.3); transform: translateY(-2px); } .enriched-main-button-light { background: linear-gradient(135deg, #f9fafb 0%, #f3f4f6 100%); color: var(--enriched-text); box-shadow: 0 4px 6px rgba(107, 114, 128, 0.1); } .enriched-main-button-light:hover:not(:disabled) { background: linear-gradient(135deg, #f3f4f6 0%, #e5e7eb 100%); box-shadow: 0 6px 10px rgba(107, 114, 128, 0.15); transform: translateY(-2px); } .enriched-main-button-dark { background: linear-gradient(135deg, #374151 0%, #1f2937 100%); color: white; box-shadow: 0 4px 6px rgba(31, 41, 55, 0.2); } .enriched-main-button-dark:hover:not(:disabled) { background: linear-gradient(135deg, #1f2937 0%, #111827 100%); box-shadow: 0 6px 10px rgba(31, 41, 55, 0.3); transform: translateY(-2px); } .enriched-main-button-outline-primary, .enriched-main-button-outline-secondary, .enriched-main-button-outline-success, .enriched-main-button-outline-danger, .enriched-main-button-outline-warning, .enriched-main-button-outline-info { background: transparent; border: 2px solid transparent; color: transparent; box-shadow: none; } .enriched-main-button-outline-primary:hover:not(:disabled), .enriched-main-button-outline-secondary:hover:not(:disabled), .enriched-main-button-outline-success:hover:not(:disabled), .enriched-main-button-outline-danger:hover:not(:disabled), .enriched-main-button-outline-warning:hover:not(:disabled), .enriched-main-button-outline-info:hover:not(:disabled) { background: transparent; color: white; transform: translateY(-2px); } .enriched-main-button-outline-secondary { border-color: var(--enriched-secondary); color: var(--enriched-secondary); } .enriched-main-button-outline-secondary:hover:not(:disabled) { background: var(--enriched-secondary); } .enriched-main-button-outline-primary { border-color: var(--enriched-primary); color: var(--enriched-primary); } .enriched-main-button-outline-primary:hover:not(:disabled) { background: var(--enriched-primary); } .enriched-main-button-outline-success { border-color: var(--enriched-success); color: var(--enriched-success); } .enriched-main-button-outline-success:hover:not(:disabled) { background: var(--enriched-success); } .enriched-main-button-outline-danger { border-color: var(--enriched-danger); color: var(--enriched-danger); } .enriched-main-button-outline-danger:hover:not(:disabled) { background: var(--enriched-danger); } .enriched-main-button-outline-warning { border-color: var(--enriched-warning); color: var(--enriched-warning); } .enriched-main-button-outline-warning:hover:not(:disabled) { background: var(--enriched-warning); } .enriched-main-button-outline-info { border-color: var(--enriched-info); color: var(--enriched-info); } .enriched-main-button-outline-info:hover:not(:disabled) { background: var(--enriched-info); } .enriched-main-button-feather { background: transparent; box-shadow: var(--enriched-glass-shadow); color: var(--enriched-primary); } .enriched-main-button-feather:hover:not(:disabled) { background: rgba(67, 97, 238, 0.1); transform: translateY(-2px); } .enriched-main-button-feather.secondary { color: var(--enriched-secondary); } .enriched-main-button-feather.secondary:hover:not(:disabled) { background: rgba(47, 169, 163, 0.1); } .enriched-main-button-feather.success { color: var(--enriched-success); } .enriched-main-button-feather.success:hover:not(:disabled) { background: rgba(34, 197, 94, 0.1); } .enriched-main-button-feather.danger { color: var(--enriched-danger); } .enriched-main-button-feather.danger:hover:not(:disabled) { background: rgba(239, 68, 68, 0.1); } .enriched-main-button-feather.warning { color: var(--enriched-warning); } .enriched-main-button-feather.warning:hover:not(:disabled) { background: rgba(245, 158, 11, 0.1); } .enriched-main-button-feather.info { color: var(--enriched-info); } .enriched-main-button-feather.info:hover:not(:disabled) { background: rgba(14, 165, 233, 0.1); } .enriched-main-button-glass { background: rgba(255, 255, 255, 0.1); backdrop-filter: blur(10px); border: 1px solid rgba(255, 255, 255, 0.2); color: lightgray; box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.15); } .enriched-main-button-glass:hover:not(:disabled) { background: rgba(255, 255, 255, 0.2); box-shadow: 0 12px 40px 0 rgba(31, 38, 135, 0.25); transform: translateY(-2px); } .enriched-main-button-gradient { background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); color: white; box-shadow: 0 4px 15px rgba(118, 75, 162, 0.3); } .enriched-main-button-gradient:hover:not(:disabled) { background: linear-gradient(135deg, #5a67d8 0%, #6b46c1 100%); box-shadow: 0 6px 20px rgba(118, 75, 162, 0.4); transform: translateY(-2px); } .enriched-main-button-retro { background: #ffed4e; color: #333; border: 2px solid #333; box-shadow: 4px 4px 0 #333; transition: all 0.1s ease; } .enriched-main-button-retro:hover:not(:disabled) { transform: translate(2px, 2px); box-shadow: 2px 2px 0 #333; } .enriched-main-button-neon { background: transparent; color: #0ff; border: 2px solid #0ff; box-shadow: 0 0 10px #0ff, inset 0 0 10px #0ff; text-shadow: 0 0 5px #0ff; animation: e-neon-pulse 2s infinite alternate; } @keyframes e-neon-pulse { from { box-shadow: 0 0 10px #0ff, inset 0 0 10px #0ff; } to { box-shadow: 0 0 20px #0ff, inset 0 0 20px #0ff; } } .enriched-main-button-neon:hover:not(:disabled) { background: rgba(0, 255, 255, 0.1); } .enriched-main-button-slant { transform: skew(-15deg); } .enriched-main-button-slant>span { display: inline-block; transform: skew(15deg); } .enriched-main-button-slant:hover:not(:disabled) { transform: skew(-15deg) translateY(-2px); } .enriched-main-button .button-icon { font-size: 1.1em; transition: transform 0.3s ease; } .enriched-main-button:hover .button-icon:not(:disabled) { transform: translateX(3px); } .enriched-main-button-primary.alt{ background:var(--enriched-gradient-primary); color:white; box-shadow:0 4px 14px rgba(78,106,230,0.28); border:1px solid color-mix(in oklab,var(--enriched-primary) 50%,transparent); } .enriched-main-button-primary.alt:hover:not(:disabled){ background:linear-gradient(135deg,var(--enriched-primary-dark) 0%,var(--enriched-primary-light) 100%); box-shadow:0 6px 18px rgba(78,106,230,0.35); transform:translateY(-3px); } .enriched-main-button-secondary.alt{ background:var(--enriched-gradient-secondary); color:white; box-shadow:0 4px 14px rgba(47,169,163,0.28); border:1px solid color-mix(in oklab,var(--enriched-secondary) 50%,transparent); } .enriched-main-button-secondary.alt:hover:not(:disabled){ background:linear-gradient(135deg,var(--enriched-secondary-dark) 0%,var(--enriched-secondary-light) 100%); box-shadow:0 6px 18px rgba(47,169,163,0.35); transform:translateY(-3px); } .enriched-main-button-accent.alt{ background:var(--enriched-gradient-accent); color:white; box-shadow:0 4px 14px rgba(255,180,87,0.25); border:1px solid color-mix(in oklab,var(--enriched-accent) 50%,transparent); } .enriched-main-button-accent.alt:hover:not(:disabled){ background:linear-gradient(135deg,var(--enriched-accent-dark) 0%,var(--enriched-accent-light) 100%); box-shadow:0 6px 18px rgba(255,180,87,0.32); transform:translateY(-3px); } .enriched-main-button-success.alt{ background:var(--enriched-gradient-success); color:white; box-shadow:0 4px 14px rgba(34,197,94,0.25); border:1px solid color-mix(in oklab,var(--enriched-success) 50%,transparent); } .enriched-main-button-success.alt:hover:not(:disabled){ background:linear-gradient(135deg,var(--enriched-success-dark) 0%,var(--enriched-success-light) 100%); box-shadow:0 6px 18px rgba(34,197,94,0.32); transform:translateY(-3px); } .enriched-main-button-danger.alt{ background:var(--enriched-gradient-danger); color:white; box-shadow:0 4px 14px rgba(239,68,68,0.25); border:1px solid color-mix(in oklab,var(--enriched-danger) 50%,transparent); } .enriched-main-button-danger.alt:hover:not(:disabled){ background:linear-gradient(135deg,var(--enriched-danger-dark) 0%,var(--enriched-danger-light) 100%); box-shadow:0 6px 18px rgba(239,68,68,0.32); transform:translateY(-3px); } .enriched-main-button-warning.alt{ background:var(--enriched-gradient-warning); color:white; box-shadow:0 4px 14px rgba(245,158,11,0.25); border:1px solid color-mix(in oklab,var(--enriched-warning) 50%,transparent); } .enriched-main-button-warning.alt:hover:not(:disabled){ background:linear-gradient(135deg,var(--enriched-warning-dark) 0%,var(--enriched-warning-light) 100%); box-shadow:0 6px 18px rgba(245,158,11,0.32); transform:translateY(-3px); } .enriched-main-button-info.alt{ background:var(--enriched-gradient-info); color:white; box-shadow:0 4px 14px rgba(14,165,233,0.25); border:1px solid color-mix(in oklab,var(--enriched-info) 50%,transparent); } .enriched-main-button-info.alt:hover:not(:disabled){ background:linear-gradient(135deg,var(--enriched-info-dark) 0%,var(--enriched-info-light) 100%); box-shadow:0 6px 18px rgba(14,165,233,0.32); transform:translateY(-3px); } .enriched-main-button-light.alt{ background:linear-gradient(135deg,var(--enriched-surface-light) 0%,var(--enriched-surface-full) 100%); color:var(--enriched-text); border:1px solid var(--enriched-border); box-shadow:0 4px 12px rgba(0,0,0,0.12); } .enriched-main-button-light.alt:hover:not(:disabled){ background:linear-gradient(135deg,var(--enriched-surface) 0%,var(--enriched-surface-full) 100%); box-shadow:0 6px 18px rgba(0,0,0,0.15); transform:translateY(-3px); } .enriched-main-button-dark.alt{ background:linear-gradient(135deg,var(--enriched-text-dark) 0%,var(--enriched-text-darker) 100%); color:white; box-shadow:0 4px 14px rgba(0,0,0,0.32); border:1px solid rgba(255,255,255,0.08); } .enriched-main-button-dark.alt:hover:not(:disabled){ background:linear-gradient(135deg,var(--enriched-text-darker) 0%,var(--enriched-text-dark) 100%); box-shadow:0 6px 18px rgba(0,0,0,0.45); transform:translateY(-3px); } .enriched-main-button-icon-only { width: 44px; height: 44px; padding: 0; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; overflow: visible !important; } .enriched-main-button-icon-only.button-xs { width: 32px; height: 32px; } .enriched-main-button-icon-only.button-sm { width: 38px; height: 38px; } .enriched-main-button-icon-only.button-lg { width: 52px; height: 52px; } .enriched-main-button-icon-only.button-xl { width: 60px; height: 60px; } .enriched-main-button-loading{pointer-events:none;position:relative;} @keyframes e-button-spin { from { transform: rotate(0turn); } to { transform: rotate(1turn); } } .enriched-action-button .btn-text { display: inline; } @media (max-width: 640px) { .enriched-action-button { width: 34px; height: 34px; padding: 0; border-radius: var(--enriched-border-radius-o); display: inline-flex; align-items: center; justify-content: center; } .enriched-action-button .btn-text { display: none; } .enriched-action-button i { margin: 0; } } .enriched-main-button-ripple{ position:relative; overflow:hidden; isolation:isolate; } .enriched-main-button-ripple::after{ content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none; z-index:0; background-image:radial-gradient(circle at 50% 50%,rgba(255,255,255,.35) 0,rgba(255,255,255,0) 60%); background-repeat:no-repeat; background-position:50%; transform:scale(0); opacity:0; will-change:transform,opacity; transition:transform .55s ease,opacity .9s ease; } .enriched-main-button-ripple>*{ position:relative; z-index:1; } .enriched-main-button-ripple:active::after{ transform:scale(1.8); opacity:.25; transition:0s; } .enriched-main-button.enriched-ellipsis { min-width: 0; max-width: 100%; align-items: center; } .enriched-main-button.enriched-ellipsis i, .enriched-main-button.enriched-ellipsis .button-icon { flex: 0 0 auto; } .enriched-main-button.enriched-ellipsis .btn-text { flex: 1 1 auto; min-width: 0; display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; line-height: 1.25; padding-block: .12em; margin-block: -.12em; } .enriched-button-theme-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: var(--enriched-spacing-lg); margin-top: var(--enriched-spacing-xl); } .enriched-button-theme-card { background: var(--enriched-surface); backdrop-filter: blur(var(--enriched-glass-blur)); border-radius: var(--enriched-border-radius-lg); box-shadow: var(--enriched-glass-shadow); border: var(--enriched-glass-border); padding: var(--enriched-spacing-lg); transition: var(--enriched-transition); } .enriched-button-theme-card:hover { transform: translateY(-5px); box-shadow: 0 12px 28px var(--enriched-shadow-dark); } .enriched-button-theme-title { font-size: 1.1rem; font-weight: 600; color: var(--enriched-primary); margin-bottom: var(--enriched-spacing-md); text-align: center; } @media (max-width: 768px) { .enriched-sub-section { padding: var(--enriched-spacing-lg); } .enriched-button-group { justify-content: center; } .enriched-button-theme-grid { grid-template-columns: 1fr; } } #enrichedPreviewWrap { position: relative; overflow: visible; } .enriched-preview-bookmark { position: absolute; top: 3rem; left: -2.45rem; z-index: -1; display: flex; align-items: center; gap: 6px; writing-mode: sideways-lr; text-orientation: mixed; background: var(--enriched-primary); color: white; border-radius: 12px; padding: 15px 30px 15px 10px; box-shadow: 0 8px 18px rgba(0, 0, 0, .18), 0 2px 6px rgba(0, 0, 0, .12); border: 1px solid color-mix(in oklab, var(--enriched-primary, #4b8cff), #000 12%); transition: transform .2s ease, opacity .2s ease; user-select: text; text-transform: capitalize; } .enriched-preview-bookmark i { font-size: 12px; opacity: .9; } .enriched-preview-bookmark #page_url { font-size: 12px; font-weight: 600; max-height: 50vh; letter-spacing: .2px; display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } #enrichedPreviewWrap:hover .enriched-preview-bookmark { background: var(--enriched-primary-dark); } .enriched-site-preview-container { border-radius: var(--enriched-border-radius-lg); padding: var(--enriched-spacing-lg); overflow: hidden; margin-bottom: var(--enriched-spacing-xxxl); background: var(--enriched-surface); border: var(--enriched-glass-border); box-shadow: var(--enriched-glass-shadow); } .enriched-site-preview-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: var(--enriched-spacing-md); } .enriched-site-preview-actions { display: flex; gap: var(--enriched-spacing-sm); } .enriched-site-preview-footer { display: flex; justify-content: space-between; align-items: center; margin-top: var(--enriched-spacing-md); padding-top: var(--enriched-spacing-md); border-top: 1px solid var(--enriched-surface-light); } .enriched-preview-url { display: flex; align-items: center; gap: var(--enriched-spacing-sm); color: var(--enriched-text-lighter); font-size: .9rem; } .enriched-preview-actions { display: flex; flex-wrap: wrap; gap: var(--enriched-spacing-xs); } .enriched-preview-btn.enriched-main-button { min-width: 36px; height: 36px; padding: 0; } .enriched-preview-btn.is-active { background: var(--enriched-primary); color: #fff; border-color: var(--enriched-primary); } .enriched-site-preview-content { position: relative; overflow: hidden; background: #fff; box-shadow: var(--enriched-shadow-md); border-radius: var(--enriched-border-radius-md); } .enriched-site-preview-content::before { content: ''; position: absolute; inset: 0; background: rgba(255, 255, 255, .8); display: flex; align-items: center; justify-content: center; z-index: 1; opacity: 0; pointer-events: none; transition: opacity var(--enriched-transition); } .enriched-site-preview-content.loading::before { opacity: 1; color: var(--enriched-text-lighter); font-weight: 500; } .position-relative { position: relative; } .position-absolute { position: absolute; } .position-fixed { position: fixed; } .position-sticky { position: sticky; } .position-static { position: static; } .display-flex { display: flex; } .display-inline-flex { display: inline-flex; } .flex-direction-row, .flex-row { flex-direction: row; } .flex-direction-row-reverse, .flex-row-reverse { flex-direction: row-reverse; } .flex-direction-column, .flex-column { flex-direction: column; } .flex-direction-column-reverse, .flex-column-reverse { flex-direction: column-reverse; } .flex-wrap, .flex-wrap-wrap { flex-wrap: wrap; } .flex-nowrap, .flex-wrap-nowrap { flex-wrap: nowrap; } .flex-wrap-reverse { flex-wrap: wrap-reverse; } .flex-50 { flex: 0 0 calc(50% - var(--e-space-4) / 2); max-width: calc(50% - var(--e-space-4) / 2); } .flex-33 { flex: 0 0 calc(33.3333% - var(--e-space-4) * 2 / 3); max-width: calc(33.3333% - var(--e-space-4) * 2 / 3); } .flex-25 { flex: 0 0 calc(25% - var(--e-space-4) * 3 / 4); max-width: calc(25% - var(--e-space-4) * 3 / 4); } .align-items-start, .align-items-flex-start { align-items: flex-start; } .align-items-center { align-items: center; } .align-items-end, .align-items-flex-end { align-items: flex-end; } .align-items-stretch { align-items: stretch; } .align-items-baseline { align-items: baseline; } .justify-content-start, .justify-content-flex-start { justify-content: flex-start; } .justify-content-center { justify-content: center; } .justify-content-end, .justify-content-flex-end { justify-content: flex-end; } .justify-content-space-between { justify-content: space-between; } .justify-content-space-around { justify-content: space-around; } .justify-content-space-evenly { justify-content: space-evenly; } .align-content-start, .align-content-flex-start { align-content: flex-start; } .align-content-center { align-content: center; } .align-content-end, .align-content-flex-end { align-content: flex-end; } .align-content-between { align-content: space-between; } .align-content-around { align-content: space-around; } .align-content-stretch { align-content: stretch; } .place-items-center { place-items: center; } .place-content-center { place-content: center; } .self-auto, .align-self-auto { align-self: auto; } .self-start, .align-self-flex-start { align-self: flex-start; } .self-center, .align-self-center { align-self: center; } .self-end, .align-self-flex-end { align-self: flex-end; } .self-stretch, .align-self-stretch { align-self: stretch; } .self-baseline, .align-self-baseline { align-self: baseline; } @media (max-width:767px) { .sm-align-items-start, .sm-align-items-flex-start { align-items: flex-start !important; } .sm-align-items-center { align-items: center !important; } .sm-align-items-end, .sm-align-items-flex-end { align-items: flex-end !important; } .sm-align-items-stretch { align-items: stretch !important; } .sm-align-items-baseline { align-items: baseline !important; } } @media (min-width:768px) and (max-width:1023px) { .md-align-items-start, .md-align-items-flex-start { align-items: flex-start !important; } .md-align-items-center { align-items: center !important; } .md-align-items-end, .md-align-items-flex-end { align-items: flex-end !important; } .md-align-items-stretch { align-items: stretch !important; } .md-align-items-baseline { align-items: baseline !important; } } @media (min-width:1024px) and (max-width:1279px) { .lg-align-items-start, .lg-align-items-flex-start { align-items: flex-start !important; } .lg-align-items-center { align-items: center !important; } .lg-align-items-end, .lg-align-items-flex-end { align-items: flex-end !important; } .lg-align-items-stretch { align-items: stretch !important; } .lg-align-items-baseline { align-items: baseline !important; } } @media (min-width:1280px) { .xl-align-items-start, .xl-align-items-flex-start { align-items: flex-start !important; } .xl-align-items-center { align-items: center !important; } .xl-align-items-end, .xl-align-items-flex-end { align-items: flex-end !important; } .xl-align-items-stretch { align-items: stretch !important; } .xl-align-items-baseline { align-items: baseline !important; } } @media (max-width:767px) { .sm-justify-content-start, .sm-justify-content-flex-start { justify-content: flex-start !important; } .sm-justify-content-center { justify-content: center !important; } .sm-justify-content-end, .sm-justify-content-flex-end { justify-content: flex-end !important; } .sm-justify-content-space-between { justify-content: space-between !important; } .sm-justify-content-space-around { justify-content: space-around !important; } .sm-justify-content-space-evenly { justify-content: space-evenly !important; } } @media (min-width:768px) and (max-width:1023px) { .md-justify-content-start, .md-justify-content-flex-start { justify-content: flex-start !important; } .md-justify-content-center { justify-content: center !important; } .md-justify-content-end, .md-justify-content-flex-end { justify-content: flex-end !important; } .md-justify-content-space-between { justify-content: space-between !important; } .md-justify-content-space-around { justify-content: space-around !important; } .md-justify-content-space-evenly { justify-content: space-evenly !important; } } @media (min-width:1024px) and (max-width:1279px) { .lg-justify-content-start, .lg-justify-content-flex-start { justify-content: flex-start !important; } .lg-justify-content-center { justify-content: center !important; } .lg-justify-content-end, .lg-justify-content-flex-end { justify-content: flex-end !important; } .lg-justify-content-space-between { justify-content: space-between !important; } .lg-justify-content-space-around { justify-content: space-around !important; } .lg-justify-content-space-evenly { justify-content: space-evenly !important; } } @media (min-width:1280px) { .xl-justify-content-start, .xl-justify-content-flex-start { justify-content: flex-start !important; } .xl-justify-content-center { justify-content: center !important; } .xl-justify-content-end, .xl-justify-content-flex-end { justify-content: flex-end !important; } .xl-justify-content-space-between { justify-content: space-between !important; } .xl-justify-content-space-around { justify-content: space-around !important; } .xl-justify-content-space-evenly { justify-content: space-evenly !important; } } @media (max-width:767px) { .sm-align-content-start, .sm-align-content-flex-start { align-content: flex-start !important; } .sm-align-content-center { align-content: center !important; } .sm-align-content-end, .sm-align-content-flex-end { align-content: flex-end !important; } .sm-align-content-between { align-content: space-between !important; } .sm-align-content-around { align-content: space-around !important; } .sm-align-content-stretch { align-content: stretch !important; } } @media (min-width:768px) and (max-width:1023px) { .md-align-content-start, .md-align-content-flex-start { align-content: flex-start !important; } .md-align-content-center { align-content: center !important; } .md-align-content-end, .md-align-content-flex-end { align-content: flex-end !important; } .md-align-content-between { align-content: space-between !important; } .md-align-content-around { align-content: space-around !important; } .md-align-content-stretch { align-content: stretch !important; } } @media (min-width:1024px) and (max-width:1279px) { .lg-align-content-start, .lg-align-content-flex-start { align-content: flex-start !important; } .lg-align-content-center { align-content: center !important; } .lg-align-content-end, .lg-align-content-flex-end { align-content: flex-end !important; } .lg-align-content-between { align-content: space-between !important; } .lg-align-content-around { align-content: space-around !important; } .lg-align-content-stretch { align-content: stretch !important; } } @media (min-width:1280px) { .xl-align-content-start, .xl-align-content-flex-start { align-content: flex-start !important; } .xl-align-content-center { align-content: center !important; } .xl-align-content-end, .xl-align-content-flex-end { align-content: flex-end !important; } .xl-align-content-between { align-content: space-between !important; } .xl-align-content-around { align-content: space-around !important; } .xl-align-content-stretch { align-content: stretch !important; } } @media (max-width:767px) { .sm-place-items-center { place-items: center !important; } .sm-place-content-center { place-content: center !important; } } @media (min-width:768px) and (max-width:1023px) { .md-place-items-center { place-items: center !important; } .md-place-content-center { place-content: center !important; } } @media (min-width:1024px) and (max-width:1279px) { .lg-place-items-center { place-items: center !important; } .lg-place-content-center { place-content: center !important; } } @media (min-width:1280px) { .xl-place-items-center { place-items: center !important; } .xl-place-content-center { place-content: center !important; } } @media (max-width:767px) { .sm-self-auto, .sm-align-self-auto { align-self: auto !important; } .sm-self-start, .sm-align-self-flex-start { align-self: flex-start !important; } .sm-self-center, .sm-align-self-center { align-self: center !important; } .sm-self-end, .sm-align-self-flex-end { align-self: flex-end !important; } .sm-self-stretch, .sm-align-self-stretch { align-self: stretch !important; } .sm-self-baseline, .sm-align-self-baseline { align-self: baseline !important; } } @media (min-width:768px) and (max-width:1023px) { .md-self-auto, .md-align-self-auto { align-self: auto !important; } .md-self-start, .md-align-self-flex-start { align-self: flex-start !important; } .md-self-center, .md-align-self-center { align-self: center !important; } .md-self-end, .md-align-self-flex-end { align-self: flex-end !important; } .md-self-stretch, .md-align-self-stretch { align-self: stretch !important; } .md-self-baseline, .md-align-self-baseline { align-self: baseline !important; } } @media (min-width:1024px) and (max-width:1279px) { .lg-self-auto, .lg-align-self-auto { align-self: auto !important; } .lg-self-start, .lg-align-self-flex-start { align-self: flex-start !important; } .lg-self-center, .lg-align-self-center { align-self: center !important; } .lg-self-end, .lg-align-self-flex-end { align-self: flex-end !important; } .lg-self-stretch, .lg-align-self-stretch { align-self: stretch !important; } .lg-self-baseline, .lg-align-self-baseline { align-self: baseline !important; } } @media (min-width:1280px) { .xl-self-auto, .xl-align-self-auto { align-self: auto !important; } .xl-self-start, .xl-align-self-flex-start { align-self: flex-start !important; } .xl-self-center, .xl-align-self-center { align-self: center !important; } .xl-self-end, .xl-align-self-flex-end { align-self: flex-end !important; } .xl-self-stretch, .xl-align-self-stretch { align-self: stretch !important; } .xl-self-baseline, .xl-align-self-baseline { align-self: baseline !important; } } @media (max-width:767px) { .sm-flex-row { flex-direction: row !important; } .sm-flex-column { flex-direction: column !important; } .sm-flex-row-reverse { flex-direction: row-reverse !important; } .sm-flex-column-reverse { flex-direction: column-reverse !important; } .sm-flex-wrap { flex-wrap: wrap !important; } .sm-flex-nowrap { flex-wrap: nowrap !important; } .sm-flex-wrap-reverse { flex-wrap: wrap-reverse !important; } } @media (min-width:768px) and (max-width:1023px) { .md-flex-row { flex-direction: row !important; } .md-flex-column { flex-direction: column !important; } .md-flex-row-reverse { flex-direction: row-reverse !important; } .md-flex-column-reverse { flex-direction: column-reverse !important; } .md-flex-wrap { flex-wrap: wrap !important; } .md-flex-nowrap { flex-wrap: nowrap !important; } .md-flex-wrap-reverse { flex-wrap: wrap-reverse !important; } } @media (min-width:1024px) and (max-width:1279px) { .lg-flex-row { flex-direction: row !important; } .lg-flex-column { flex-direction: column !important; } .lg-flex-row-reverse { flex-direction: row-reverse !important; } .lg-flex-column-reverse { flex-direction: column-reverse !important; } .lg-flex-wrap { flex-wrap: wrap !important; } .lg-flex-nowrap { flex-wrap: nowrap !important; } .lg-flex-wrap-reverse { flex-wrap: wrap-reverse !important; } } @media (min-width:1280px) { .xl-flex-row { flex-direction: row !important; } .xl-flex-column { flex-direction: column !important; } .xl-flex-row-reverse { flex-direction: row-reverse !important; } .xl-flex-column-reverse { flex-direction: column-reverse !important; } .xl-flex-wrap { flex-wrap: wrap !important; } .xl-flex-nowrap { flex-wrap: nowrap !important; } .xl-flex-wrap-reverse { flex-wrap: wrap-reverse !important; } } @media (max-width:767px) { .sm-w-auto { width: auto !important; } .sm-w-100 { width: 100% !important; } .sm-w-75 { width: 75% !important; } .sm-w-50 { width: 50% !important; } .sm-w-33 { width: 33.333% !important; } .sm-w-25 { width: 25% !important; } .sm-w-0 { width: 0 !important; } } @media (min-width:768px) and (max-width:1023px) { .md-w-auto { width: auto !important; } .md-w-100 { width: 100% !important; } .md-w-75 { width: 75% !important; } .md-w-50 { width: 50% !important; } .md-w-33 { width: 33.333% !important; } .md-w-25 { width: 25% !important; } .md-w-0 { width: 0 !important; } } @media (min-width:1024px) and (max-width:1279px) { .lg-w-auto { width: auto !important; } .lg-w-100 { width: 100% !important; } .lg-w-75 { width: 75% !important; } .lg-w-50 { width: 50% !important; } .lg-w-33 { width: 33.333% !important; } .lg-w-25 { width: 25% !important; } .lg-w-0 { width: 0 !important; } } @media (min-width:1280px) { .xl-w-auto { width: auto !important; } .xl-w-100 { width: 100% !important; } .xl-w-75 { width: 75% !important; } .xl-w-50 { width: 50% !important; } .xl-w-33 { width: 33.333% !important; } .xl-w-25 { width: 25% !important; } .xl-w-0 { width: 0 !important; } } .responsive-justify-setter { justify-content: space-between; } @media (max-width:780px) { .responsive-justify-setter { justify-content: center !important; } } .dynamic-width-setter { width: calc(100% - var(--custom-spacing, 2rem)); } @media (max-width:480px) { .dynamic-width-setter { width: 100% !important; } } @media (max-width:767px) { .responsive-align-center-sm { align-items: center !important; justify-content: center !important; text-align: center !important; } } @media (min-width:1024px) { .responsive-space-between-lg { justify-content: space-between !important; } } .width-if-narrow { width: auto; } @media (max-width:767px) { .width-if-narrow { width: 100% !important; } } .width-if-wide { width: 100%; } @media (min-width:1024px) { .width-if-wide { width: 50% !important; } } @media (max-width:767px) { .sm-text-left { text-align: left !important; } .sm-text-center { text-align: center !important; } .sm-text-right { text-align: right !important; } .sm-text-justify { text-align: justify !important; } } @media (min-width:768px) and (max-width:1023px) { .md-text-left { text-align: left !important; } .md-text-center { text-align: center !important; } .md-text-right { text-align: right !important; } .md-text-justify { text-align: justify !important; } } @media (min-width:1024px) and (max-width:1279px) { .lg-text-left { text-align: left !important; } .lg-text-center { text-align: center !important; } .lg-text-right { text-align: right !important; } .lg-text-justify { text-align: justify !important; } } @media (min-width:1280px) { .xl-text-left { text-align: left !important; } .xl-text-center { text-align: center !important; } .xl-text-right { text-align: right !important; } .xl-text-justify { text-align: justify !important; } } .flex-1 { flex: 1 1 0%; } .flex-auto { flex: 1 1 auto; } .flex-initial { flex: 0 1 auto; } .flex-none { flex: none; } .flex-grow { flex-grow: 1; } .flex-grow-0 { flex-grow: 0; } .flex-shrink { flex-shrink: 1; } .flex-shrink-0 { flex-shrink: 0; } .basis-auto { flex-basis: auto; } .basis-0 { flex-basis: 0; } .basis-1-2 { flex-basis: 50%; } .basis-1-3 { flex-basis: 33.3333%; } .basis-2-3 { flex-basis: 66.6667%; } .basis-1-4 { flex-basis: 25%; } .basis-3-4 { flex-basis: 75%; } .order-first { order: -9999; } .order-last { order: 9999; } .order-0 { order: 0; } .order-1 { order: 1; } .order-2 { order: 2; } .order-3 { order: 3; } .order-4 { order: 4; } .order-5 { order: 5; } .order-6 { order: 6; } .order-7 { order: 7; } .order-8 { order: 8; } .order-9 { order: 9; } .order-10 { order: 10; } .order-11 { order: 11; } .order-12 { order: 12; } .gap-0 { gap: 0; } .gap-xs { gap: var(--enriched-spacing-xs); } .gap-sm { gap: var(--enriched-spacing-sm); } .gap-md { gap: var(--enriched-spacing-md); } .gap-nm { gap: var(--enriched-spacing-nm); } .gap-lg { gap: var(--enriched-spacing-lg); } .gap-xl { gap: var(--enriched-spacing-xl); } .gap-xxl { gap: var(--enriched-spacing-xxl); } .gap-xxxl { gap: var(--enriched-spacing-xxxl); } .gap-xxxxl { gap: var(--enriched-spacing-xxxxl); } .gap-1 { gap: var(--enriched-spacing-1); } .gap-2 { gap: var(--enriched-spacing-2); } .gap-3 { gap: var(--enriched-spacing-3); } .gap-4 { gap: var(--enriched-spacing-4); } .gap-5 { gap: var(--enriched-spacing-5); } .gap-6 { gap: var(--enriched-spacing-6); } .gap-8 { gap: var(--enriched-spacing-8); } .gap-9 { gap: var(--enriched-spacing-9); } .gap-10 { gap: var(--enriched-spacing-10); } .gap-12 { gap: var(--enriched-spacing-12); } .gap-16 { gap: var(--enriched-spacing-16); } .gap-20 { gap: var(--enriched-spacing-20); } .gap-24 { gap: var(--enriched-spacing-24); } .gap-x-0 { column-gap: 0; } .gap-y-0 { row-gap: 0; } .gap-x-xs { column-gap: var(--enriched-spacing-xs); } .gap-y-xs { row-gap: var(--enriched-spacing-xs); } .gap-x-sm { column-gap: var(--enriched-spacing-sm); } .gap-y-sm { row-gap: var(--enriched-spacing-sm); } .gap-x-md { column-gap: var(--enriched-spacing-md); } .gap-y-md { row-gap: var(--enriched-spacing-md); } .gap-x-nm { column-gap: var(--enriched-spacing-nm); } .gap-y-nm { row-gap: var(--enriched-spacing-nm); } .gap-x-lg { column-gap: var(--enriched-spacing-lg); } .gap-y-lg { row-gap: var(--enriched-spacing-lg); } .gap-x-xl { column-gap: var(--enriched-spacing-xl); } .gap-y-xl { row-gap: var(--enriched-spacing-xl); } .gap-x-xxl { column-gap: var(--enriched-spacing-xxl); } .gap-y-xxl { row-gap: var(--enriched-spacing-xxl); } .flex-center, .flex-center-center, .flex-cc, .flex-mid-center, .flex-center-all, .flex-center-xy { display: flex; align-items: center; justify-content: center; } .flex-between, .flex-center-between, .flex-between-center, .flex-between-centered, .flex-justify-between-center, .flex-between-mid { display: flex; align-items: center; justify-content: space-between; } .flex-around, .flex-center-around, .flex-around-center, .flex-around-centered, .flex-justify-around-center, .flex-around-mid { display: flex; align-items: center; justify-content: space-around; } .flex-evenly, .flex-center-evenly, .flex-evenly-center, .flex-evenly-centered, .flex-justify-evenly-center, .flex-evenly-mid { display: flex; align-items: center; justify-content: space-evenly; } .space-x-xs>*+* { margin-left: var(--enriched-spacing-xs); } .space-x-sm>*+* { margin-left: var(--enriched-spacing-sm); } .space-x-md>*+* { margin-left: var(--enriched-spacing-md); } .space-x-lg>*+* { margin-left: var(--enriched-spacing-lg); } .space-y-xs>*+* { margin-top: var(--enriched-spacing-xs); } .space-y-sm>*+* { margin-top: var(--enriched-spacing-sm); } .space-y-md>*+* { margin-top: var(--enriched-spacing-md); } .space-y-lg>*+* { margin-top: var(--enriched-spacing-lg); } .flex-min-h-0 { min-height: 0; } .flex-min-w-0 { min-width: 0; } .flex-truncate { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .enriched-thin-scroll { scrollbar-width: thin; scrollbar-color: var(--enriched-primary) transparent; } .enriched-thin-scroll::-webkit-scrollbar { width: 8px; height: 8px; } .enriched-thin-scroll::-webkit-scrollbar-thumb { background: linear-gradient(180deg, var(--enriched-primary-light), var(--enriched-primary)); border-radius: 8px; } .enriched-thin-scroll::-webkit-scrollbar-track { background: transparent; } .enriched-thin-scroll.primary { scrollbar-color: var(--enriched-primary) transparent; } .enriched-thin-scroll.primary::-webkit-scrollbar-thumb { background: linear-gradient(180deg, var(--enriched-primary-light), var(--enriched-primary)); } .enriched-thin-scroll.secondary { scrollbar-color: var(--enriched-secondary) transparent; } .enriched-thin-scroll.secondary::-webkit-scrollbar-thumb { background: linear-gradient(180deg, var(--enriched-secondary-light), var(--enriched-secondary)); } .enriched-thin-scroll.accent { scrollbar-color: var(--enriched-accent) transparent; } .enriched-thin-scroll.accent::-webkit-scrollbar-thumb { background: linear-gradient(180deg, var(--enriched-accent-light), var(--enriched-accent)); } .enriched-scrollable { overflow: auto; -webkit-overflow-scrolling: touch; } .enriched-site-preview-content.enriched-scrollable, .enriched-json-viewer-content.enriched-scrollable { overflow: auto; } .ace_scroller { right: 10px !important; } .enriched-thin-scroll .ace_scrollbar { width: auto !important; scrollbar-width: thin; scrollbar-color: var(--enriched-primary) transparent; } .enriched-thin-scroll .ace_scrollbar::-webkit-scrollbar { width: 8px; height: 8px; } .enriched-thin-scroll .ace_scrollbar::-webkit-scrollbar-thumb { background: linear-gradient(180deg, var(--enriched-primary-light), var(--enriched-primary)); border-radius: 8px; } .enriched-thin-scroll .ace_scrollbar::-webkit-scrollbar-track { background: transparent; } .enriched-thin-scroll.primary .ace_scrollbar { scrollbar-color: var(--enriched-primary) transparent; } .enriched-thin-scroll.primary .ace_scrollbar::-webkit-scrollbar-thumb { background: linear-gradient(180deg, var(--enriached-primary-light), var(--enriched-primary)); } .enriched-thin-scroll.secondary .ace_scrollbar { scrollbar-color: var(--enriched-secondary) transparent; } .enriched-thin-scroll.secondary .ace_scrollbar::-webkit-scrollbar-thumb { background: linear-gradient(180deg, var(--enriched-secondary-light), var(--enriched-secondary)); } .enriched-thin-scroll.accent .ace_scrollbar { scrollbar-color: var(--enriched-accent) transparent; } .enriched-thin-scroll.accent .ace_scrollbar::-webkit-scrollbar-thumb { background: linear-gradient(180deg, var(--enriched-accent-light), var(--enriched-accent)); } .consent-modal { position: fixed; top: 0; left: 0; width: 100%; height: 100%; display: flex; justify-content: center; align-items: center; z-index: 1000; opacity: 0; visibility: hidden; transition: all 0.4s ease; } .consent-modal.active { opacity: 1; visibility: visible; } .consent-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.6); backdrop-filter: blur(5px); } .consent-content { background: var(--enriched-surface); backdrop-filter: blur(var(--enriched-glass-blur)); border: var(--enriched-glass-border); box-shadow: var(--enriched-glass-shadow); border-radius: var(--enriched-border-radius-xl); width: 90%; max-width: 600px; padding: var(--enriched-spacing-xl); z-index: 1001; position: relative; transform: translateY(30px) scale(0.95); transition: all 0.4s ease; max-height: 90vh; overflow-y: auto; } .consent-modal.active .consent-content { transform: translateY(0) scale(1); } .consent-header { text-align: center; margin-bottom: var(--enriched-spacing-lg); } .consent-title { font-size: 1.8rem; color: var(--enriched-primary); margin-bottom: var(--enriched-spacing-sm); display: flex; align-items: center; justify-content: center; gap: var(--enriched-spacing-sm); } .consent-body { margin-bottom: var(--enriched-spacing-xl); } .consent-text { color: var(--enriched-text); line-height: 1.6; margin-bottom: var(--enriched-spacing-md); } .consent-preferences { background: var(--enriched-surface-dark); border-radius: var(--enriched-border-radius-md); padding: var(--enriched-spacing-md); margin-bottom: var(--enriched-spacing-lg); } .preference-item { display: flex; justify-content: space-between; align-items: center; padding: var(--enriched-spacing-sm) 0; border-bottom: 1px solid var(--enriched-border-light); } .preference-item:first-child { border-top: 1px solid var(--enriched-border-light); } .consent-footer { display: flex; flex-wrap: wrap; gap: var(--enriched-spacing-md); justify-content: center; } .consent-close { position: absolute; top: var(--enriched-spacing-md); right: var(--enriched-spacing-md); background: none; border: none; font-size: 1.5rem; color: var(--enriched-text-lighter); cursor: pointer; transition: color 0.3s ease; } .consent-close:hover { color: var(--enriched-danger); } .enriched-ace { border: 2px solid var(--enriched-secondary); border-radius: var(--enriched-border-radius-md); background: var(--enriched-surface-dark); box-shadow: var(--enriched-glass-shadow); min-height: 96px; } textarea.raw { width: 100%; height: 360px; font-family: ui-monospace, Menlo, Consolas, monospace; border-radius: 12px; border: 1px solid var(--enriched-gray-light); padding: 12px; background: var(--enriched-light, #fff); } #json-editor { height: 500px; margin-bottom: 16px; } .preview-container { border: 1px solid var(--enriched-gray-light); border-radius: 8px; padding: 16px; margin-top: 16px; } [data-et-shell].is-hidden, [data-et-shell][hidden] { display: none !important; } .enriched-refcode { display: flex; gap: 8px; justify-content: center; align-items: center; flex-wrap: wrap; } .enriched-refcode-box { flex: 1 1 0; min-width: 36px; height: 48px; align-items: center; justify-content: center; display: flex; border: 1px solid var(--enriched-border); border-radius: 8px; background: var(--enriched-surface-dark); font-weight: 700; font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 20px; color: var(--enriched-text); box-shadow: var(--enriched-shadow-sm); text-align: center; } @media (max-width: 480px) { .enriched-refcode-box { height: 44px; font-size: 18px; } } .enriched-site-preview-content, .enriched-json-viewer-container { background: var(--enriched-surface-full); overflow: hidden; box-shadow: var(--enriched-shadow-sm); border: 1px solid var(--enriched-border); display: flex; flex-direction: column; height: 70vh; } .enriched-site-preview-header, .enriched-json-viewer-header { padding: var(--enriched-spacing-md) var(--enriched-spacing-lg); background: var(--enriched-surface-dark); border-bottom: 1px solid var(--enriched-border); display: flex; justify-content: space-between; align-items: center; } .enriched-site-preview-header h3, .enriched-json-viewer-header h3 { margin: 0; font-size: 1.2rem; color: var(--enriched-text); } .enriched-site-preview-actions, .enriched-json-viewer-actions { display: flex; flex-wrap: wrap; gap: var(--enriched-spacing-sm); } .enriched-site-preview-content, .enriched-json-viewer-content { flex: 1; position: relative; overflow: hidden; } #site-preview-frame { width: 100%; height: 70vh; border: none; } #json-viewer { position: absolute; top: 0; right: 0; bottom: 0; left: 0; } .enriched-json-viewer-footer { padding: var(--enriched-spacing-md) var(--enriched-spacing-lg); background: var(--enriched-surface-dark); border-top: 1px solid var(--enriched-border); display: flex; justify-content: space-between; align-items: center; } .enriched-preview-url { display: flex; align-items: center; gap: var(--enriched-spacing-sm); color: var(--enriched-text-lighter); font-size: 0.9rem; } .enriched-preview-actions { display: flex; flex-wrap: wrap; gap: var(--enriched-spacing-sm); } .enriched-preview-btn { display: inline-flex; align-items: center; justify-content: center; width: 2.2rem; height: 2.2rem; border-radius: var(--enriched-border-radius-md); border: 1px solid var(--enriched-border); background: transparent; color: var(--enriched-text); cursor: pointer; transition: all 0.2s ease; } .enriched-preview-btn.is-active, .enriched-preview-btn:hover { background: var(--enriched-primary) !important; color: white !important; border-color: var(--enriched-secondary) !important; } .enriched-main-actions-row { display: flex; justify-content: flex-end; flex-wrap: wrap; gap: var(--enriched-spacing-md); margin-bottom: var(--enriched-spacing-lg); } .loading::after { content: ""; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: rgba(255, 255, 255, 0.7); display: flex; align-items: center; justify-content: center; z-index: 10; } .loading::before { content: ""; position: absolute; top: 50%; left: 50%; width: 2rem; height: 2rem; margin: -1rem 0 0 -1rem; border: 3px solid var(--enriched-border); border-radius: 50%; border-top-color: var(--enriched-primary); animation: e-loading-spin-infinite 1s ease-in-out infinite; z-index: 11; } @keyframes e-loading-spin-infinite { to { transform: rotate(360deg); } } .ace_gutter { background: var(--enriched-surface-dark) !important; } .ace_content { background: var(--enriched-surface) !important; } #json-editor { border: 1px solid var(--enriched-border); border-radius: var(--enriched-border-radius-md); background: var(--enriched-surface); box-shadow: var(--enriched-shadow-sm); overflow: hidden; } #json-editor.ace_focus, #json-editor:focus-within { outline: none; box-shadow: 0 0 0 3px color-mix(in oklab, var(--enriched-primary) 15%, transparent); border-color: color-mix(in oklab, var(--enriched-primary) 60%, var(--enriched-border)); } #json-editor .ace_gutter { background: transparent; color: var(--enriched-text-lighter); border-right: 1px solid var(--enriched-border-light); } #json-editor .ace_gutter-active-line { background: color-mix(in oklab, var(--enriched-primary) 10%, transparent); color: var(--enriched-text); } #json-editor .ace_print-margin { background: var(--enriched-border-light); } #json-editor .ace_cursor { border-left: 2px solid var(--enriched-primary); } #json-editor .ace_marker-layer .ace_selection { background: color-mix(in oklab, var(--enriched-primary) 22%, transparent); } #json-editor .ace_marker-layer .ace_active-line { background: color-mix(in oklab, var(--enriched-primary) 8%, transparent); } #json-editor .ace_marker-layer .ace_bracket { margin: -1px 0 0 -1px; border: 1px solid color-mix(in oklab, var(--enriched-primary) 40%, transparent); } #json-editor .ace_marker-layer .ace_selected-word { background: color-mix(in oklab, var(--enriched-accent) 30%, transparent); border: 1px solid var(--enriched-accent); } #json-editor .ace_gutter-cell.ace_error { color: var(--enriched-danger); } #json-editor .ace_gutter-cell.ace_warning { color: var(--enriched-warning); } #json-editor .ace_gutter-cell.ace_info { color: var(--enriched-info); } #json-editor .ace_marker-layer .ace_error { background: color-mix(in oklab, var(--enriched-danger) 22%, transparent); } #json-editor .ace_marker-layer .ace_warning { background: color-mix(in oklab, var(--enriched-warning) 20%, transparent); } #json-editor .ace_marker-layer .ace_info { background: color-mix(in oklab, var(--enriched-info) 18%, transparent); } #json-editor .ace_placeholder { color: var(--enriched-text-light); opacity: .75; font-style: italic; } #json-editor .ace_marker-layer .ace_selection.ace_start { box-shadow: 0 0 3px 0 var(--enriched-primary) inset; } #json-editor .ace_marker-layer .ace_text-layer .ace_search_results { background: color-mix(in oklab, var(--enriched-secondary) 18%, transparent); } #json-editor .ace_scrollbar-h, #json-editor .ace_scrollbar-v { background: transparent; } #json-editor *::-webkit-scrollbar { width: 10px; height: 10px; } #json-editor *::-webkit-scrollbar-thumb { background: color-mix(in oklab, var(--enriched-gray) 40%, transparent); border: 3px solid transparent; border-radius: 10px; background-clip: padding-box; } #json-editor *::-webkit-scrollbar-thumb:hover { background: color-mix(in oklab, var(--enriched-gray-dark) 55%, transparent); } [data-theme="dark"] #json-editor { background: var(--enriched-surface); border-color: var(--enriched-border); box-shadow: var(--enriched-shadow-xs); } [data-theme="dark"] #json-editor .ace_gutter { color: var(--enriched-text-lighter); border-right: 1px solid var(--enriched-border); } [data-theme="dark"] #json-editor .ace_marker-layer .ace_selection { background: color-mix(in oklab, var(--enriched-primary) 35%, transparent); } [data-theme="dark"] #json-editor .ace_marker-layer .ace_active-line { background: color-mix(in oklab, var(--enriched-primary) 14%, transparent); } [data-theme="dark"] #json-editor .ace_cursor { border-left-color: var(--enriched-primary-light); } [data-theme="dark"] #json-editor *::-webkit-scrollbar-thumb { background: color-mix(in oklab, var(--enriched-gray-light) 40%, transparent); } .enriched-preview-container { display: flex; flex-direction: column; gap: var(--enriched-spacing-lg); } .enriched-main-header { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: var(--enriched-spacing-md); padding: var(--enriched-spacing-lg); border-radius: var(--enriched-border-radius-lg); background: var(--enriched-surface); backdrop-filter: blur(var(--enriched-glass-blur)); -webkit-backdrop-filter: blur(var(--enriched-glass-blur)); border: var(--enriched-glass-border); box-shadow: var(--enriched-glass-shadow); } .enriched-main-header--classic { box-shadow: var(--enriched-shadow-sm); border: 1px solid var(--enriched-border); } .enriched-main-title-block .title { font-size: 1.75rem; font-weight: 700; color: var(--enriched-primary); } .enriched-main-title-block .sub { color: var(--enriched-text-lighter); margin-top: var(--enriched-spacing-sm); } .enriched-main-header-plain { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: var(--enriched-spacing-md); } .enriched-main-title-block { display: grid; gap: .25rem; } .enriched-main-title-block.left { text-align: left; } .enriched-main-title-block.center { text-align: center; } .enriched-main-title-block.right { text-align: right; } .enriched-main-title-block .title { font-weight: 800; font-size: 1.35rem; letter-spacing: -.3px; background: linear-gradient(135deg, var(--enriched-primary), var(--enriched-primary-light)); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } .enriched-main-title-block .sub { color: var(--enriched-text-light); font-size: .95rem; } .enriched-main-actions { display: flex; gap: var(--enriched-spacing-md); flex-wrap: wrap; } .enriched-main-actions.center { justify-content: center; } .enriched-main-actions.end { justify-content: flex-end; } .enriched-main-actions.start { justify-content: flex-start; } .enriched-main-header--tabs { row-gap: var(--enriched-spacing-sm); } .enriched-main-header--tabs .enriched-e-tabs { grid-column: 1/-1; margin: 0; } .enriched-main-header--tabs .enriched-e-tab { white-space: nowrap; } .enriched-main-header--segments { position: relative; overflow: hidden; } .enriched-main-header--segments::after { content: ""; position: absolute; inset: 0; background: radial-gradient(1200px 200px at 80% -40%, var(--enriched-primary-light) 0%, transparent 60%); opacity: .12; pointer-events: none; } .enriched-main-header--stats { display: grid; grid-template-columns: 1fr minmax(280px, 40%); } @media (max-width: 768px) { .enriched-main-header { justify-content: center; } .enriched-main-header--segments { text-align: center; } .enriched-main-actions, .enriched-main-actions.end, .enriched-main-actions.start { justify-content: center; } .enriched-main-title-block, .enriched-main-title-block.left, .enriched-main-title-block.right { text-align: center; } .enriched-main-header--stats { grid-template-columns: 1fr; } } .enriched-main-stats { display: grid; grid-auto-flow: row dense; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--enriched-spacing-sm); align-items: stretch; } .enriched-main-stat { display: grid; gap: .25rem; padding: var(--enriched-spacing-md); border-radius: var(--enriched-border-radius-md); background: var(--enriched-surface-dark); box-shadow: var(--enriched-shadow-sm); } .enriched-main-stat .k { font-size: 1.15rem; font-weight: 700; color: var(--enriched-text); } .enriched-main-stat .l { font-size: .8rem; color: var(--enriched-text-lighter); } .enriched-main-stat:last-child { grid-column: auto; } .enriched-main-stat:last-child:nth-child(3n+1) { grid-column: 1/-1; } .enriched-main-stat:last-child:nth-child(3n+2) { grid-column: span 2; } @media(max-width:768px) { .enriched-main-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); } .enriched-main-stat:last-child { grid-column: auto; } .enriched-main-stat:last-child:nth-child(2n+1) { grid-column: 1/-1; } } @media(max-width:480px) { .enriched-main-stats { grid-template-columns: 1fr; } } .enriched-main-aside { display: flex; flex-direction: column; flex-wrap: wrap; gap: var(--enriched-spacing-lg); } .enriched-req-pulse { position: relative; } .enriched-req-pulse::after { content: ""; position: absolute; inset: -2px; border-radius: 8px; outline: 2px solid var(--enriched-danger, #ef4444); animation: e-enriched-req-pulse 1.2s ease-in-out 1; pointer-events: none; } @keyframes e-enriched-req-pulse { 0% { outline-color: rgba(239, 68, 68, 0.0); } 30% { outline-color: rgba(239, 68, 68, 0.8); } 100% { outline-color: rgba(239, 68, 68, 0.0); } } .capitalize { text-transform: capitalize; } .uppercase { text-transform: uppercase; } .lowercase { text-transform: lowercase; } .enriched-s-controls-row { display: flex; flex-wrap: wrap; gap: var(--enriched-spacing-6); justify-content: center; align-items: stretch; margin: 0 auto; } .enriched-s-controls-card { flex: 1 1 clamp(280px, 28%, 320px); } .is-hidden { display: none !important; } .main-s-content { display: flex; min-height: 500px; } .available-s-cards { flex: 1; padding: var(--enriched-spacing-lg); border-right: 1px solid var(--enriched-border); } .ordered-s-cards { flex: 2; padding: var(--enriched-spacing-lg); } .s-card-list { display: flex; flex-direction: column; gap: var(--enriched-spacing-sm); } .empty-s-card { border: 2px dashed var(--enriched-border); border-radius: var(--enriched-border-radius-md); padding: var(--enriched-spacing-md); background: var(--enriched-surface-light); transition: border-color .15s ease, background-color .15s ease; } .ordering-area { min-height: 80px; border: 2px dashed var(--enriched-border); border-radius: var(--enriched-border-radius-md); padding: var(--enriched-spacing-md); background: var(--enriched-surface-light); transition: border-color .15s ease, background-color .15s ease; } .ordering-area.is-dragover { border-color: var(--enriched-primary); background: color-mix(in oklab, var(--enriched-primary) 8%, transparent); } .sortable-container { display: flex; flex-direction: column; } .sortable-placeholder { min-height: 55px; border: 2px dashed var(--enriched-primary); border-radius: var(--enriched-border-radius-md); height: 56px; background: color-mix(in oklab, var(--enriched-primary) 15%, transparent); opacity: .35; } .s-card { position: relative; display: grid; grid-template-columns: auto 1fr auto; grid-template-areas: "handle main actions"; gap: var(--enriched-spacing-sm); align-items: center; padding: var(--enriched-spacing-md); background: var(--enriched-surface); border: 1px solid var(--enriched-border); border-radius: var(--enriched-border-radius-md); overflow: hidden; transition: transform var(--enriched-transition-fast), box-shadow var(--enriched-transition-fast); } .s-card:hover { box-shadow: var(--enriched-shadow-sm); transform: translateY(-1px); } .s-card:active { cursor: grabbing; } .s-card .handle { grid-area: handle; cursor: grab; color: var(--enriched-text-lighter); display: inline-flex; align-items: center; justify-content: center; width: 28px; } .s-card .main { grid-area: main; display: flex; flex-direction: column; gap: 2px; min-width: 0; } .s-card .identifier { font-weight: 600; color: var(--enriched-primary); font-family: var(--enriched-font-monospace); } .s-card .title { color: var(--enriched-text); text-overflow: ellipsis; white-space: nowrap; overflow: hidden; } .s-card .actions { grid-area: actions; display: flex; align-items: center; gap: var(--enriched-spacing-xs); } .s-card .remove { position: absolute; top: 0; right: 0; width: 25px; height: 25px; display: inline-flex; align-items: center; justify-content: center; border: 0; background: color-mix(in oklab, var(--enriched-danger) 12%, transparent); color: var(--enriched-danger); border-bottom-left-radius: 14px; box-shadow: var(--enriched-shadow-xs); cursor: pointer; transition: background .15s ease, color .15s ease, transform .08s ease; } .s-card .remove:hover { background: var(--enriched-danger); color: #fff; } .s-card .remove:active { transform: scale(.95); } .s-card .remove:focus-visible { outline: 2px solid color-mix(in oklab, var(--enriched-danger) 55%, transparent); outline-offset: 2px; } .s-card .remove i { pointer-events: none; } .s-card.has-remove { padding-right: calc(var(--enriched-spacing-xl) + 16px); padding-top: var(--enriched-spacing-sm); } .s-badge { display: inline-flex; align-items: center; gap: .4em; border-radius: var(--enriched-border-radius-o); padding: .2rem .6rem; font-size: 12px; color: whitesmoke; border: 1px solid transparent; font-weight: 600; line-height: 1.2; text-shadow: 0 1px 0 rgba(0, 0, 0, 0.1); } .s-badge.completed { background: color-mix(in oklab, var(--enriched-success) 15%, transparent); color: var(--enriched-success); border-color: color-mix(in oklab, var(--enriched-success) 40%, transparent); } .s-badge.pending { background: color-mix(in oklab, var(--enriched-warning) 15%, transparent); color: var(--enriched-warning); border-color: color-mix(in oklab, var(--enriched-warning) 40%, transparent); } .plain-s-card { cursor: grab; } .ordered-s-card { box-shadow: var(--enriched-shadow-xs); } .json-s-cards h2, .available-s-cards h2, .ordered-s-cards h2 { font-size: var(--enriched-font-lg); color: var(--enriched-primary); } .json-s-cards h2, .available-s-cards h2 { margin-bottom: var(--enriched-spacing-nm); } .json-s-output { padding: var(--enriched-spacing-md); background: var(--enriched-surface-dark); border-radius: var(--enriched-border-radius-md); border: 1px solid var(--enriched-border); } .json-s-output pre { background: var(--enriched-surface); padding: var(--enriched-spacing-md); border-radius: var(--enriched-border-radius-sm); overflow-x: auto; font-family: var(--enriched-font-monospace); font-size: var(--enriched-font-sm); } @media (max-width:820px) { .main-s-content { flex-direction: column; } .available-s-cards { border-right: none; border-bottom: 1px solid var(--enriched-border); } .s-card { grid-template-columns: auto 1fr auto; grid-template-areas: "handle main actions"; } } .ordering-area { user-select: none; } .ordered-s-card, .plain-s-card { -webkit-user-drag: element; } .enriched-hr { border: 0; border-top: 1px solid var(--enriched-border, #e5e7eb); margin: var(--enriched-spacing-6) 0; width: 100%; height: 0; opacity: 1; } .enriched-hr-xs { border-top-width: 1px; } .enriched-hr-sm { border-top-width: 2px; } .enriched-hr-md { border-top-width: 3px; } .enriched-hr-lg { border-top-width: 4px; } .enriched-hr-xl { border-top-width: 6px; } .enriched-hr-muted { border-top-color: var(--enriched-muted, #cbd5e1); opacity: .9; } .enriched-hr-strong { border-top-color: var(--enriched-ink, #111827); opacity: 1; } .enriched-hr-primary { border-top-color: var(--enriched-primary, #2563eb); } .enriched-hr-accent { border-top-color: var(--enriched-accent, #7c3aed); } .enriched-hr-success { border-top-color: var(--enriched-success, #16a34a); } .enriched-hr-warning { border-top-color: var(--enriched-warning, #f59e0b); } .enriched-hr-danger { border-top-color: var(--enriched-danger, #dc2626); } .enriched-hr-info { border-top-color: var(--enriched-info, #0ea5e9); } .enriched-hr-dashed { border-top-style: dashed; } .enriched-hr-dotted { border-top-style: dotted; } .enriched-hr-double { border-top-style: double; border-top-width: 3px; } .enriched-hr-soft { opacity: .6; } .enriched-hr-lighter { opacity: .4; } .enriched-hr-heavier { opacity: 1; } .enriched-hr-tight { margin: var(--enriched-spacing-2) 0; } .enriched-hr-comfy { margin: var(--enriched-spacing-4) 0; } .enriched-hr-roomy { margin: var(--enriched-spacing-8) 0; } .enriched-hr-xxl { margin: var(--enriched-spacing-12) 0; } .enriched-hr-gradient { border: 0; height: 1px; background: linear-gradient(to right, transparent, rgba(0, 0, 0, .15), transparent); background: linear-gradient(to right, transparent, var(--enriched-border, #e5e7eb), transparent); } .enriched-hr-glow { position: relative; border-top-color: transparent; height: 0; } .enriched-hr-glow::before { content: ""; position: absolute; left: 0; right: 0; top: -1px; height: 1px; background: var(--enriched-primary, #2563eb); filter: blur(.5px); opacity: .9; } .enriched-hr-inset { border-top-color: rgba(0, 0, 0, .08); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .6); } .enriched-hr-vertical { border: 0; border-left: 1px solid var(--enriched-border, #e5e7eb); width: 0; height: 100%; } .enriched-hr-vertical.enriched-hr-dashed { border-left-style: dashed; } .enriched-hr-vertical.enriched-hr-dotted { border-left-style: dotted; } .enriched-hr-vertical.enriched-hr-double { border-left-style: double; border-left-width: 3px; } .enriched-hr-vertical-xs { border-left-width: 1px; } .enriched-hr-vertical-sm { border-left-width: 2px; } .enriched-hr-vertical-md { border-left-width: 3px; } .enriched-hr-vertical-lg { border-left-width: 4px; } .enriched-hr-vertical-xl { border-left-width: 6px; } .enriched-hr-with-label { display: flex; align-items: center; gap: var(--enriched-spacing-3); color: var(--enriched-muted-ink, #374151); margin: var(--enriched-spacing-6) 0; } .enriched-hr-with-label::before, .enriched-hr-with-label::after { content: ""; flex: 1; height: 1px; background: var(--enriched-border, #e5e7eb); } .enriched-hr-with-label.enriched-hr-primary { color: var(--enriched-primary, #2563eb); } .enriched-hr-with-label.enriched-hr-accent { color: var(--enriched-accent, #7c3aed); } .enriched-hr-with-label.enriched-hr-strong { color: var(--enriched-ink, #111827); } .enriched-hr-label { font: inherit; font-weight: 600; letter-spacing: .01em; white-space: nowrap; } .enriched-hr-dot { display: flex; align-items: center; gap: var(--enriched-spacing-3); margin: var(--enriched-spacing-6) 0; } .enriched-hr-dot::before, .enriched-hr-dot::after { content: ""; flex: 1; height: 1px; background: var(--enriched-border, #e5e7eb); } .enriched-hr-dot .dot { width: .5rem; height: .5rem; border-radius: 9999px; background: var(--enriched-border, #e5e7eb); } .enriched-hr-dot.enriched-hr-primary .dot { background: var(--enriched-primary, #2563eb); } .enriched-hr-dot.enriched-hr-accent .dot { background: var(--enriched-accent, #7c3aed); } #base-fiob.enriched-e-card { transition: opacity .12s ease; } #base-fiob.enriched-e-card:not(.is-hidden) { opacity: 1; } #base-fiob.enriched-e-card.is-hidden { opacity: 0; } #base-wiz, #coll-wiz, #base-schema-pane, #base-values-pane, #base-preview-pane, #coll-schema-pane, #coll-values-pane, #coll-preview-pane, #base-values-mount, #coll-values-mount { display: block; width: 100%; } #collection-fiob [data-role="type"] { min-width: 180px; } .fiob-file { display: grid; gap: .5rem; } .fiob-file .thumb { width: 64px; height: 64px; object-fit: cover; border-radius: 8px; border: 1px solid var(--enriched-border, rgba(0, 0, 0, .08)); } .enriched-e-card .card-del-btn, .enriched-e-float-button .card-del-btn { position: absolute; top: -1rem; right: -1rem; } .preview-flex-grid { gap: 16px; } .preview-item { flex: 1 1 48%; min-width: 240px; } @media (max-width: 600px) { .preview-item { flex: 1 1 100%; } } .ef-onecol { display: grid; grid-template-columns: 1fr; gap: var(--e-space-4, 1rem); } .ef-onecol .enriched-form-group { grid-column: 1 / -1; width: 100%; } .ef-onecol .enriched-form-input, .ef-onecol .enriched-form-select, .ef-onecol textarea.enriched-form-input { width: 100%; } .enriched-i-hero { position: relative; isolation: isolate; border-radius: 24px; background: linear-gradient(180deg, rgba(67, 97, 238, .12), rgba(67, 97, 238, 0)); box-shadow: var(--enriched-glass-shadow); border: var(--enriched-glass-border); backdrop-filter: blur(var(--enriched-glass-blur)); padding: clamp(1.25rem, 2vw, 2rem); overflow: hidden; } .enriched-i-hero::before { content: ""; position: absolute; inset: -2px; background: radial-gradient(1000px 400px at 0% 0%, rgba(72, 149, 239, .20), transparent 60%), radial-gradient(800px 400px at 100% 100%, rgba(247, 37, 133, .18), transparent 55%); z-index: -1; filter: blur(10px); } .enriched-i-hero-inner { display: grid; grid-template-columns: 1.1fr .9fr; gap: clamp(1rem, 3vw, 2rem); align-items: center; } .enriched-i-hero h1 { font-size: clamp(1.6rem, 3.2vw, 2.4rem); line-height: 1.15; margin-bottom: .35rem; letter-spacing: .2px; } .enriched-i-hero p { font-size: clamp(.95rem, 1.2vw, 1.05rem); color: var(--enriched-text-light); } .enriched-i-cta { display: flex; gap: .6rem; flex-wrap: wrap; margin-top: 1rem; } .enriched-i-hero-art { aspect-ratio: 1.2/1; border-radius: 20px; background: conic-gradient(from 180deg at 50% 50%, rgba(67, 97, 238, .18), rgba(76, 201, 240, .18), rgba(247, 37, 133, .18), rgba(67, 97, 238, .18)); border: var(--enriched-glass-border); box-shadow: var(--enriched-shadow-xl); position: relative; overflow: hidden; } .enriched-i-hero-art::after { content: ""; position: absolute; inset: 0; background: radial-gradient(60% 60% at 50% 40%, rgba(255, 255, 255, .18), transparent); mix-blend-mode: overlay; } .enriched-i-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(.9rem, 2vw, 1.25rem); margin-top: clamp(1rem, 2.5vw, 1.75rem); } .enriched-i-card { background: var(--enriched-surface); border: var(--enriched-glass-border); border-radius: var(--enriched-border-radius-lg); box-shadow: var(--enriched-shadow-lg); padding: var(--enriched-spacing-lg); overflow: hidden; display: flex; gap: var(--enriched-spacing-md); flex-direction: column; justify-content: space-between; transition: transform .18s ease, box-shadow .2s ease, background .2s ease; } .enriched-i-card:hover { transform: translateY(-4px); box-shadow: var(--enriched-shadow-xl); } .enriched-i-card h3 { font-size: 1.05rem; letter-spacing: .2px; } .enriched-i-card p { color: var(--enriched-text-light); font-size: .95rem; } .enriched-i-chip { display: inline-flex; align-items: center; gap: .4rem; background: rgba(67, 97, 238, .12); color: var(--enriched-primary-dark); padding: .35rem .6rem; border-radius: var(--enriched-border-radius-o); font-weight: 700; font-size: .8rem; margin-bottom: var(--enriched-spacing-xs); justify-content: center; } .enriched-i-card .actions { margin-top: auto; display: flex; gap: .5rem; flex-wrap: wrap; align-self: flex-end; } .enriched-i-link-btn { display: inline-flex; align-items: center; gap: .45rem; padding: .6rem .85rem; border-radius: 12px; text-decoration: none; font-weight: 700; background: var(--enriched-surface-light); border: 1px solid var(--enriched-border-light); color: var(--enriched-text); box-shadow: var(--enriched-shadow-lg); } .enriched-i-link-btn:hover { background: rgba(67, 97, 238, .10); } .enriched-i-muted { margin-top: 1.2rem; color: var(--enriched-text-lighter); font-size: .9rem; text-align: center; } @media (max-width:960px) { .enriched-i-hero-inner { grid-template-columns: 1fr; } .enriched-i-hero-art { order: -1; } } @media (max-width:800px) { .enriched-i-grid { grid-template-columns: 1fr; } } .enriched-b-container { width: 100%; margin: 0 auto; padding: 0; } .enriched-b-layout-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: var(--enriched-spacing-lg); align-items: stretch; } .enriched-b-card-full{ grid-column: 1/-1 !important; } .enriched-b-card { display: flex; flex-direction: column; text-decoration: none; border-radius: var(--enriched-border-radius-lg); padding: var(--enriched-spacing-xl); transition: var(--enriched-transition); position: relative; overflow: hidden; min-height: 140px; } .enriched-b-card-icon { width: 48px; height: 48px; border-radius: var(--enriched-border-radius-md); display: flex; align-items: center; justify-content: center; margin-bottom: var(--enriched-spacing-md); font-size: 1.25rem; flex-shrink: 0; } .enriched-b-card-body { flex: 1; display: flex; flex-direction: column; gap: var(--enriched-spacing-sm); } .enriched-b-card-title { font-size: var(--enriched-font-lg); font-weight: 600; color: var(--enriched-text); line-height: var(--enriched-line-height-tight); margin: 0; } .enriched-b-card-subtitle { font-size: var(--enriched-font-sm); color: var(--enriched-text-lighter); line-height: var(--enriched-line-height-normal); margin: 0; } .enriched-b-card-default { background: var(--enriched-surface); border: var(--enriched-glass-border); box-shadow: var(--enriched-shadow-sm); backdrop-filter: blur(var(--enriched-glass-blur)); } .enriched-b-card-default .enriched-b-card-icon { background: var(--enriched-gradient-primary); color: white; } .enriched-b-card-default:hover { transform: translateY(-4px); box-shadow: var(--enriched-shadow-lg); background: var(--enriched-surface-dark); } .enriched-b-card-glass { background: var(--enriched-surface); backdrop-filter: blur(16px); border: 1px solid rgba(255, 255, 255, 0.2); box-shadow: var(--enriched-glass-shadow); position: relative; } .enriched-b-card-glass .enriched-b-card-icon { background: rgba(255, 255, 255, 0.1); backdrop-filter: blur(10px); border: 1px solid rgba(255, 255, 255, 0.2); color: var(--enriched-primary); } .enriched-b-card-glass:hover { transform: translateY(-2px); box-shadow: var(--enriched-glass-dark-shadow); background: var(--enriched-glass-dark-surface); } .enriched-b-card-glass:hover .enriched-b-card-subtitle{ color: var(--enriched-text-darker); } .enriched-b-card-glow { position: absolute; top: 0; left: 0; right: 0; height: 1px; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.6), transparent); opacity: 0; transition: opacity 0.3s ease; } .enriched-b-card-glass:hover .enriched-b-card-glow { opacity: 1; } .enriched-b-card-minimal { background: transparent; border: 2px solid var(--enriched-border-light); box-shadow: none; } .enriched-b-card-minimal .enriched-b-card-icon { background: transparent; border: 2px solid var(--enriched-primary); color: var(--enriched-primary); } .enriched-b-card-minimal:hover { border-color: var(--enriched-primary); background: color-mix(in oklab, var(--enriched-primary) 5%, transparent); transform: translateX(4px); } .enriched-b-card-colorful { background: var(--enriched-surface); border: none; box-shadow: var(--enriched-shadow-md); position: relative; overflow: hidden; } .enriched-b-card-colorful .enriched-b-card-icon { color: white; z-index: 2; } .enriched-b-card-colorful .enriched-b-card-title { color: white; z-index: 2; } .enriched-b-card-colorful .enriched-b-card-subtitle { color: rgba(255, 255, 255, 0.8); z-index: 2; } .enriched-b-card-gradient { position: absolute; top: 0; left: 0; right: 0; bottom: 0; opacity: 0.9; z-index: 1; transition: opacity 0.3s ease; } .enriched-b-card-colorful:hover .enriched-b-card-gradient { opacity: 1; } .enriched-b-color-primary .enriched-b-card-icon { background: var(--enriched-gradient-primary); } .enriched-b-color-primary .enriched-b-card-gradient { background: var(--enriched-gradient-primary); } .enriched-b-color-secondary .enriched-b-card-icon { background: var(--enriched-gradient-secondary); } .enriched-b-color-secondary .enriched-b-card-gradient { background: var(--enriched-gradient-secondary); } .enriched-b-color-accent .enriched-b-card-icon { background: var(--enriched-gradient-accent); } .enriched-b-color-accent .enriched-b-card-gradient { background: var(--enriched-gradient-accent); } .enriched-b-color-success .enriched-b-card-icon { background: var(--enriched-gradient-success); } .enriched-b-color-success .enriched-b-card-gradient { background: var(--enriched-gradient-success); } @media (max-width:1024px) { .enriched-b-layout-grid { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: var(--enriched-spacing-md); } .enriched-b-card { padding: var(--enriched-spacing-lg); min-height: 120px; } } @media (max-width:768px) { .enriched-b-container { padding: var(--enriched-spacing-md); } .enriched-b-layout-grid { grid-template-columns: 1fr; gap: var(--enriched-spacing-md); } .enriched-b-card { padding: var(--enriched-spacing-lg); min-height: auto; } .enriched-b-card-icon { width: 40px; height: 40px; font-size: 1.1rem; } .enriched-b-card-title { font-size: var(--enriched-font-md); } } @media (max-width:480px) { .enriched-b-container { padding: var(--enriched-spacing-sm); } .enriched-b-card { padding: var(--enriched-spacing-md); } .enriched-b-card-icon { width: 36px; height: 36px; font-size: 1rem; margin-bottom: var(--enriched-spacing-sm); } } [data-theme="dark"] .enriched-b-card-default { background: var(--enriched-glass-dark-surface); border: var(--enriched-glass-dark-border); } [data-theme="dark"] .enriched-b-card-glass { background: rgba(30, 41, 59, 0.6); border: 1px solid rgba(255, 255, 255, 0.1); } [data-theme="dark"] .enriched-b-card-minimal { border-color: var(--enriched-border-dark); } [data-theme="dark"] .enriched-b-card-minimal:hover { background: color-mix(in oklab, var(--enriched-primary) 8%, transparent); } @media (prefers-reduced-motion:reduce) { .enriched-b-card { transition: none; } .enriched-b-card:hover { transform: none; } } .enriched-b-card:focus-visible { outline: 2px solid var(--enriched-focus-ring); outline-offset: 2px; } .enriched-countdown-wrapper{display:flex;justify-content:center;align-items:center;width:100%;margin:var(--enriched-spacing-lg) 0;} .enriched-countdown,.enriched-countdown *{box-sizing:border-box;} .enriched-countdown{--cd-h:3.5rem;--cd-pad:.75rem;--cd-radius:var(--enriched-border-radius-md);--cd-gap:var(--enriched-spacing-sm);--cd-font:1.5rem;--cd-label:.875rem;--cd-digits:3;--cd-card-w:calc((var(--cd-digits)*1ch) + (var(--cd-pad)*2) + 2.6ch);display:flex;flex-wrap:wrap;justify-content:center;align-items:flex-start;gap:var(--cd-gap);font-family:var(--enriched-font-display);width:100%;max-width:100%;} .enriched-countdown-small{--cd-h:2.6rem;--cd-pad:.6rem;--cd-radius:var(--enriched-border-radius-sm);--cd-font:1.15rem;--cd-label:.75rem;} .enriched-countdown-medium{--cd-h:3.5rem;--cd-pad:.75rem;--cd-radius:var(--enriched-border-radius-md);--cd-font:1.55rem;--cd-label:.875rem;} .enriched-countdown-large{--cd-h:4.8rem;--cd-pad:.9rem;--cd-radius:var(--enriched-border-radius-lg);--cd-font:2.05rem;--cd-label:1rem;} .enriched-countdown-xlarge{--cd-h:6.1rem;--cd-pad:1.05rem;--cd-radius:var(--enriched-border-radius-xl);--cd-font:2.55rem;--cd-label:1.125rem;--cd-card-w:calc((var(--cd-digits)*1ch) + (var(--cd-pad)*2) + 3.2ch);} .enriched-countdown-unit{width:var(--cd-card-w);flex:0 0 var(--cd-card-w);display:flex;flex-direction:column;align-items:center;gap:var(--enriched-spacing-xs);min-width:0;font-size:var(--cd-font);} .enriched-countdown-card{width:100%;height:var(--cd-h);padding:0 var(--cd-pad);border-radius:var(--cd-radius);display:grid;place-items:center;overflow:hidden;box-shadow:var(--enriched-shadow-sm);transform:translateZ(0);transition:transform var(--enriched-transition-fast),box-shadow var(--enriched-transition-fast);} .enriched-countdown-value{position:relative;width:100%;height:100%;display:grid;place-items:center;font-size:1em;font-weight:900;font-variant-numeric:tabular-nums;letter-spacing:.02em;line-height:1;isolation:isolate;} .enriched-countdown-current,.enriched-countdown-next{position:absolute;inset:0;display:grid;place-items:center;transform:translate3d(0,0,0);opacity:1;will-change:transform,opacity;} .enriched-countdown-next{opacity:0;transform:translate3d(0,26%,0);} .enriched-countdown-value.is-animating .enriched-countdown-current{animation:enrCdOut .28s cubic-bezier(.2,.8,.2,1) forwards;} .enriched-countdown-value.is-animating .enriched-countdown-next{animation:enrCdIn .28s cubic-bezier(.2,.8,.2,1) forwards;} @keyframes enrCdOut{0%{opacity:1;transform:translate3d(0,0,0);}100%{opacity:0;transform:translate3d(0,-26%,0);}} @keyframes enrCdIn{0%{opacity:0;transform:translate3d(0,26%,0);}100%{opacity:1;transform:translate3d(0,0,0);}} .enriched-countdown-label{width:100%;text-align:center;font-size:var(--cd-label);font-weight:800;text-transform:uppercase;letter-spacing:var(--enriched-tracking-wide);opacity:.86;white-space:nowrap;overflow:visible;text-overflow:clip;transform:translateZ(0);transition:opacity var(--enriched-transition-fast),transform var(--enriched-transition-fast);} .enriched-countdown:hover .enriched-countdown-card{transform:translateY(-2px);box-shadow:var(--enriched-shadow-md);} .enriched-countdown-unit:hover .enriched-countdown-label{opacity:1;transform:translateY(-1px);} .enriched-countdown.is-ended .enriched-countdown-unit{opacity:.6;filter:grayscale(.4);} .enriched-countdown-end-message{display:flex;flex-basis:100%;align-items:center;justify-content:center;text-align:center;font-weight:900;font-size:calc(var(--cd-font)*.9);padding:var(--enriched-spacing-md);border-radius:var(--cd-radius);margin-top:var(--enriched-spacing-xs);} .enriched-countdown-theme-primary .enriched-countdown-card{background:var(--enriched-gradient-primary);color:var(--enriched-text-inverse);box-shadow:var(--enriched-shadow-primary);} .enriched-countdown-theme-primary .enriched-countdown-label{color:color-mix(in oklab,var(--enriched-primary) 80%,#111 20%);} .enriched-countdown-theme-primary .enriched-countdown-end-message{background:var(--enriched-gradient-primary);color:var(--enriched-text-inverse);box-shadow:var(--enriched-shadow-lg);} .enriched-countdown-theme-secondary .enriched-countdown-card{background:var(--enriched-gradient-secondary);color:var(--enriched-text-inverse);box-shadow:var(--enriched-shadow-md);} .enriched-countdown-theme-secondary .enriched-countdown-label{color:color-mix(in oklab,var(--enriched-secondary) 80%,#111 20%);} .enriched-countdown-theme-secondary .enriched-countdown-end-message{background:var(--enriched-gradient-secondary);color:var(--enriched-text-inverse);box-shadow:var(--enriched-shadow-lg);} .enriched-countdown-theme-dark .enriched-countdown-card{background:linear-gradient(135deg,#2d3748 0%,#1a202c 100%);color:var(--enriched-text-inverse);box-shadow:var(--enriched-shadow-lg);} .enriched-countdown-theme-dark .enriched-countdown-label{color:rgba(255,255,255,.78);} .enriched-countdown-theme-dark .enriched-countdown-end-message{background:linear-gradient(135deg,#2d3748 0%,#1a202c 100%);color:var(--enriched-text-inverse);box-shadow:var(--enriched-shadow-lg);} .enriched-countdown-theme-light .enriched-countdown-card{background:var(--enriched-section-bg-surface);color:var(--enriched-text-dark);border:1px solid var(--enriched-border);box-shadow:var(--enriched-shadow-xs);} .enriched-countdown-theme-light .enriched-countdown-label{color:var(--enriched-text);} .enriched-countdown-theme-light .enriched-countdown-end-message{background:var(--enriched-section-bg-surface);color:var(--enriched-text-dark);border:1px solid var(--enriched-border);box-shadow:var(--enriched-shadow-sm);} .enriched-countdown-theme-glass .enriched-countdown-card{background:rgba(255,255,255,.10);backdrop-filter:blur(var(--enriched-glass-blur));-webkit-backdrop-filter:blur(var(--enriched-glass-blur));border:var(--enriched-glass-border);color:var(--enriched-text-inverse);box-shadow:var(--enriched-glass-shadow);} .enriched-countdown-theme-glass .enriched-countdown-label{color:rgba(255,255,255,.86);} .enriched-countdown-theme-glass .enriched-countdown-end-message{background:rgba(255,255,255,.12);backdrop-filter:blur(var(--enriched-glass-blur));-webkit-backdrop-filter:blur(var(--enriched-glass-blur));border:var(--enriched-glass-border);color:var(--enriched-text-inverse);box-shadow:var(--enriched-glass-shadow);} .enriched-countdown-theme-sunset .enriched-countdown-card{background:linear-gradient(135deg,#ff6b6b 0%,#ffa726 100%);color:var(--enriched-text-inverse);box-shadow:var(--enriched-shadow-md);} .enriched-countdown-theme-sunset .enriched-countdown-label{color:#ff8c42;} .enriched-countdown-theme-sunset .enriched-countdown-end-message{background:linear-gradient(135deg,#ff6b6b 0%,#ffa726 100%);color:var(--enriched-text-inverse);box-shadow:var(--enriched-shadow-lg);} .enriched-countdown-compact{--cd-gap:var(--enriched-spacing-xs);} .enriched-countdown-compact .enriched-countdown-label{font-size:calc(var(--cd-label)*.88);} @media (max-width:768px){ .enriched-countdown{--cd-gap:var(--enriched-spacing-xs);} .enriched-countdown-medium{--cd-h:3.1rem;--cd-font:1.3rem;--cd-pad:.65rem;} .enriched-countdown-large{--cd-h:3.9rem;--cd-font:1.7rem;--cd-pad:.75rem;} .enriched-countdown-xlarge{--cd-h:4.4rem;--cd-font:1.95rem;--cd-pad:.8rem;--cd-card-w:calc((var(--cd-digits)*1ch) + (var(--cd-pad)*2) + 3.6ch);} .enriched-countdown-wrapper[data-hide-labels-mobile="1"] .enriched-countdown-label{display:none;} } @media (max-width:480px){ .enriched-countdown-medium{--cd-h:2.75rem;--cd-font:1.1rem;--cd-pad:.6rem;} .enriched-countdown-large{--cd-h:3.2rem;--cd-font:1.3rem;--cd-pad:.65rem;} .enriched-countdown-xlarge{--cd-h:3.6rem;--cd-font:1.5rem;--cd-pad:.7rem;--cd-card-w:calc((var(--cd-digits)*1ch) + (var(--cd-pad)*2) + 4.1ch);} } @media (prefers-reduced-motion:reduce){ .enriched-countdown-value.is-animating .enriched-countdown-current,.enriched-countdown-value.is-animating .enriched-countdown-next{animation:none;} .enriched-countdown-next{opacity:0;transform:none;} } .enriched-strike,del.enriched-strike{ text-decoration:line-through; text-decoration-color:var(--enriched-strike-color,currentColor); text-decoration-thickness:var(--enriched-strike-thickness,.12em); text-decoration-skip-ink:auto; text-underline-offset:var(--enriched-strike-offset,.12em); } .enriched-strike.is-muted{ opacity:var(--enriched-strike-muted-opacity,.72); } .enriched-strike.is-soft{ text-decoration-color:var(--enriched-strike-soft-color,rgba(255,255,255,.55)); } .enriched-strike.is-primary{ text-decoration-color:var(--enriched-primary,currentColor); } .enriched-strike.is-secondary{ text-decoration-color:var(--enriched-secondary,currentColor); } .enriched-strike.is-accent{ text-decoration-color:var(--enriched-accent,currentColor); } /** **/ /** ENRICHED MISC DESIGNER **/ /** **/ /** **/ /** ENRICHED DENY DESIGNER **/ /** **/ .enriched-deny-wrap{min-height:100vh;display:grid;place-items:center;padding:clamp(16px,4vw,48px);background:radial-gradient(900px 600px at 10% -10%, rgba(78,106,230,.16), transparent 60%),radial-gradient(800px 620px at 110% 0%, rgba(247,37,133,.12), transparent 55%),radial-gradient(820px 640px at 50% 120%, rgba(34,197,94,.08), transparent 55%),linear-gradient(180deg, rgba(0,0,0,.06), rgba(0,0,0,.06));} .enriched-deny-card{width:100%;border-radius:var(--enriched-border-radius-xxl,28px);background:rgba(255,255,255,.86);backdrop-filter:blur(16px);border:1px solid rgba(17,24,39,.10);box-shadow:0 24px 70px rgba(0,0,0,.16),0 10px 30px rgba(78,106,230,.10);overflow:hidden;color:var(--enriched-text-color,#111827);position:relative;} .enriched-deny-card:before{content:"";position:absolute;inset:0 0 auto 0;height:6px;background:linear-gradient(90deg, rgba(78,106,230,1), rgba(247,37,133,1));opacity:.95;} .enriched-deny-card.is-danger:before{background:linear-gradient(90deg, rgba(239,68,68,1), rgba(245,158,11,1));} .enriched-deny-card.is-muted:before{background:linear-gradient(90deg, rgba(107,114,128,1), rgba(148,163,184,1));} html[data-theme="dark"] .enriched-deny-wrap{background:radial-gradient(900px 600px at 10% -10%, rgba(78,106,230,.22), transparent 60%),radial-gradient(800px 620px at 110% 0%, rgba(247,37,133,.16), transparent 55%),linear-gradient(180deg, rgba(0,0,0,.48), rgba(0,0,0,.48));} html[data-theme="dark"] .enriched-deny-card{background:rgba(17,24,39,.74);border-color:rgba(255,255,255,.10);box-shadow:0 26px 82px rgba(0,0,0,.44),0 10px 30px rgba(78,106,230,.14);color:rgba(255,255,255,.92);} .enriched-deny-head{padding:24px 24px 18px;border-bottom:1px solid rgba(17,24,39,.08);display:grid;gap:12px;} html[data-theme="dark"] .enriched-deny-head{border-bottom-color:rgba(255,255,255,.10);} .enriched-deny-head-text{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;} .enriched-deny-title{margin:0;font-weight:950;letter-spacing:-.45px;line-height:1.05;font-size:clamp(1.25rem,1.05rem + 1.6vw,2.05rem);} .enriched-deny-icon{width:44px;height:44px;border-radius:14px;display:grid;place-items:center;flex:0 0 auto;background:rgba(78,106,230,.12);color:rgba(78,106,230,1);box-shadow:inset 0 0 0 2px rgba(78,106,230,.18);} .enriched-deny-card.is-danger .enriched-deny-icon{background:rgba(239,68,68,.12);color:rgba(239,68,68,1);box-shadow:inset 0 0 0 2px rgba(239,68,68,.18);} .enriched-deny-card.is-muted .enriched-deny-icon{background:rgba(107,114,128,.14);color:rgba(107,114,128,1);box-shadow:inset 0 0 0 2px rgba(107,114,128,.18);} html[data-theme="dark"] .enriched-deny-icon{background:rgba(78,106,230,.14);box-shadow:inset 0 0 0 2px rgba(78,106,230,.22);} html[data-theme="dark"] .enriched-deny-card.is-danger .enriched-deny-icon{background:rgba(239,68,68,.14);box-shadow:inset 0 0 0 2px rgba(239,68,68,.22);} html[data-theme="dark"] .enriched-deny-card.is-muted .enriched-deny-icon{background:rgba(148,163,184,.12);color:rgba(148,163,184,1);box-shadow:inset 0 0 0 2px rgba(148,163,184,.20);} .enriched-deny-lede{margin:0;color:rgba(17,24,39,.72);line-height:1.55;font-size:1.02rem;max-width:72ch;} html[data-theme="dark"] .enriched-deny-lede{color:rgba(255,255,255,.72);} .enriched-deny-body{padding:18px 24px 0;display:grid;gap:14px;} .enriched-deny-countdown{border:1px solid rgba(17,24,39,.10);border-radius:20px;padding:16px;background:rgba(255,255,255,.52);display:grid;gap:12px;justify-items:center;} html[data-theme="dark"] .enriched-deny-countdown{border-color:rgba(255,255,255,.12);background:rgba(0,0,0,.18);} .enriched-deny-countdown-title{width:100%;display:flex;align-items:center;justify-content:flex-start;gap:10px;font-weight:950;letter-spacing:.08em;text-transform:uppercase;font-size:.82rem;color:rgba(17,24,39,.68);} html[data-theme="dark"] .enriched-deny-countdown-title{color:rgba(255,255,255,.68);} .enriched-deny-countdown-title:before{content:"";width:10px;height:10px;border-radius:999px;background:rgba(78,106,230,.85);box-shadow:0 0 0 3px rgba(78,106,230,.12);} .enriched-deny-card.is-danger .enriched-deny-countdown-title:before{background:rgba(239,68,68,.90);box-shadow:0 0 0 3px rgba(239,68,68,.12);} .enriched-deny-card.is-muted .enriched-deny-countdown-title:before{background:rgba(107,114,128,.85);box-shadow:0 0 0 3px rgba(107,114,128,.12);} .enriched-deny-countdown-widget{width:100%;display:flex;justify-content:center;overflow-x:auto;padding:2px 2px 4px;-webkit-overflow-scrolling:touch;} .enriched-deny-countdown-widget>*{margin:0 auto;} .enriched-deny-actions{padding:18px 24px 24px;display:flex;flex-wrap:wrap;gap:10px;justify-content:flex-end;} .enriched-deny-actions .enriched-deny-btn{display:inline-flex;align-items:center;justify-content:center;gap:.55rem;min-height:44px;border-radius:14px;padding:.7rem 1rem;text-decoration:none;} .enriched-deny-actions .enriched-deny-btn:focus{outline:none;} .enriched-deny-actions .enriched-deny-btn:focus-visible{box-shadow:0 0 0 3px rgba(78,106,230,.22);} .enriched-deny-actions .enriched-deny-btn i{font-size:1em;line-height:1;} .enriched-deny-actions .enriched-deny-btn span{display:inline-block;line-height:1.1;} @media(max-width:720px){ .enriched-deny-head{padding:22px 18px 16px;} .enriched-deny-body{padding:16px 18px 0;} .enriched-deny-actions{padding:16px 18px 18px;} } @media(max-width:520px){ .enriched-deny-head-text{justify-content:flex-start;} .enriched-deny-icon{order:0;} .enriched-deny-title{flex:1 1 100%;} .enriched-deny-actions{justify-content:stretch;} .enriched-deny-actions .enriched-deny-btn{flex:1 1 auto;} .enriched-deny-countdown{padding:14px;} .enriched-deny-countdown-title{justify-content:center;} } /** **/ /** ENRICHED DENY DESIGNER **/ /** **/ /** **/ /** ENRICHED FONT DESIGNER **/ /** **/ [data-size="small"] { --enriched-base-font-size: 0.875rem; } [data-size="medium"] { --enriched-base-font-size: 1rem; } [data-size="large"] { --enriched-base-font-size: 1.125rem; } [data-size="x-large"] { --enriched-base-font-size: 1.25rem; } [data-choice="Segoe UI"] { --enriched-font-primary: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; } [data-choice="Georgia"] { --enriched-font-primary: Georgia, 'Times New Roman', serif; } [data-choice="Arial"] { --enriched-font-primary: Arial, Helvetica, sans-serif; } [data-choice="Monospace"] { --enriched-font-primary: 'Courier New', Courier, monospace; } .enriched-typography { font-family: var(--enriched-font-primary); font-size: var(--enriched-base-font-size); line-height: var(--enriched-line-height-normal); color: var(--enriched-text); } .enriched-h1 { font-size: var(--enriched-font-3xl); font-weight: 800; line-height: var(--enriched-line-height-tight); margin-bottom: var(--enriched-spacing-lg); } .enriched-h2 { font-size: var(--enriched-font-2xl); font-weight: 700; line-height: var(--enriched-line-height-tight); margin-bottom: var(--enriched-spacing-md); } .enriched-h3 { font-size: var(--enriched-font-xl); font-weight: 600; line-height: var(--enriched-line-height-tight); margin-bottom: var(--enriched-spacing-md); } .enriched-h4 { font-size: var(--enriched-font-lg); font-weight: 600; margin-bottom: var(--enriched-spacing-md); } .enriched-h5 { font-size: var(--enriched-font-md); font-weight: 600; margin-bottom: var(--enriched-spacing-sm); } .enriched-h6 { font-size: var(--enriched-font-sm); font-weight: 600; margin-bottom: var(--enriched-spacing-sm); text-transform: uppercase; letter-spacing: var(--enriched-tracking-wide); } .enriched-p { margin-bottom: var(--enriched-spacing-md); line-height: var(--enriched-line-height-normal); } .enriched-lead { font-size: var(--enriched-font-lg); font-weight: 300; line-height: var(--enriched-line-height-loose); margin-bottom: var(--enriched-spacing-lg); } .enriched-text-success { color: var(--enriched-text-success); } .enriched-text-info { color: var(--enriched-text-info); } .enriched-text-danger { color: var(--enriched-text-danger); } .enriched-text-warning { color: var(--enriched-text-warning); } .enriched-text-muted { color: var(--enriched-text-muted); } .enriched-text-bold { font-weight: 700; } .enriched-text-italic { font-style: italic; } .enriched-text-underline { text-decoration: underline; } .enriched-text-strike { text-decoration: line-through; } .enriched-text-uppercase { text-transform: uppercase; } .enriched-text-lowercase { text-transform: lowercase; } .enriched-text-capitalize { text-transform: capitalize; } .enriched-text-tracking-tight { letter-spacing: var(--enriched-tracking-tight); } .enriched-text-tracking-wide { letter-spacing: var(--enriched-tracking-wide); } .enriched-text-tracking-wider { letter-spacing: var(--enriched-tracking-wider); } .enriched-quote { padding: var(--enriched-quote-padding); margin: var(--enriched-spacing-lg) 0; border-left: var(--enriched-quote-primary-border); background-color: var(--enriched-quote-bg); border-radius: 0 var(--enriched-border-radius-md) var(--enriched-border-radius-md) 0; font-style: italic; } .enriched-quote-secondary { border-left: var(--enriched-quote-secondary-border); } .enriched-quote-footer { display: block; margin-top: var(--enriched-spacing-sm); font-style: normal; font-size: var(--enriched-font-sm); color: var(--enriched-text-lighter); } .enriched-ul, .enriched-ol { padding-left: var(--enriched-list-indent); } .enriched-ul { list-style-type: var(--enriched-list-bullet); } .enriched-ol { list-style-type: var(--enriched-list-ordered); } .enriched-list-unstyled { list-style-type: var(--enriched-list-unstyled); padding-left: 0; } .enriched-list-unstyled>*:last-child{ margin-bottom:0; } .enriched-list-inline { display: flex; flex-wrap: wrap; gap: var(--enriched-spacing-md); list-style-type: none; padding-left: 0; } .enriched-list-item { margin-bottom: var(--enriched-spacing-xs); } .enriched-dl { margin-bottom: var(--enriched-spacing-lg); } .enriched-dt { font-weight: var(--enriched-description-title-weight); color: var(--enriched-description-term-color); margin-top: var(--enriched-spacing-md); } .enriched-dd { margin-left: 0; margin-bottom: var(--enriched-spacing-sm); color: var(--enriched-description-detail-color); padding-left: var(--enriched-spacing-md); } .enriched-code { font-family: var(--enriched-font-monospace); font-size: var(--enriched-font-sm); background-color: var(--enriched-surface-dark); padding: var(--enriched-spacing-xs) var(--enriched-spacing-sm); border-radius: var(--enriched-border-radius-sm); color: var(--enriched-text); } .enriched-pre { font-family: var(--enriched-font-monospace); font-size: var(--enriched-font-sm); background-color: var(--enriched-surface-dark); padding: var(--enriched-spacing-md); border-radius: var(--enriched-border-radius-md); overflow-x: auto; line-height: var(--enriched-line-height-normal); border: 1px solid var(--enriched-border); scrollbar-width: thin; scrollbar-color: var(--enriched-primary) transparent; } .enriched-pre::-webkit-scrollbar { width: 8px; height: 8px; } .enriched-pre::-webkit-scrollbar-thumb { background: linear-gradient(180deg, var(--enriched-primary-light), var(--enriched-primary)); border-radius: 8px; } .enriched-pre::-webkit-scrollbar-track { background: transparent; } .enriched-text-left { text-align: left; } .enriched-text-center { text-align: center; } .enriched-text-right { text-align: right; } .enriched-text-justify { text-align: justify; } .enriched-font-thin { font-weight: 100; } .enriched-font-light { font-weight: 300; } .enriched-font-normal { font-weight: 400; } .enriched-font-medium { font-weight: 500; } .enriched-font-semibold { font-weight: 600; } .enriched-font-bold { font-weight: 700; } .enriched-font-extrabold { font-weight: 800; } .enriched-font-black { font-weight: 900; } .enriched-font-primary { font-family: var(--enriched-font-primary); } .enriched-font-secondary { font-family: var(--enriched-font-secondary); } .enriched-font-monospace { font-family: var(--enriched-font-monospace); } .enriched-font-display { font-family: var(--enriched-font-display); } .enriched-text-xs { font-size: var(--enriched-font-xs); } .enriched-text-sm { font-size: var(--enriched-font-sm); } .enriched-text-md { font-size: var(--enriched-font-md); } .enriched-text-lg { font-size: var(--enriched-font-lg); } .enriched-text-xl { font-size: var(--enriched-font-xl); } .enriched-text-2xl { font-size: var(--enriched-font-2xl); } .enriched-text-3xl { font-size: var(--enriched-font-3xl); } .enriched-leading-tight { line-height: var(--enriched-line-height-tight); } .enriched-leading-normal { line-height: var(--enriched-line-height-normal); } .enriched-leading-loose { line-height: var(--enriched-line-height-loose); } .enriched-dropcap::first-letter { float: left; font-size: var(--enriched-font-3xl); line-height: 0.8; padding: 0 var(--enriched-spacing-xs) 0 0; font-weight: 700; color: var(--enriched-primary); } .enriched-initial { font-size: var(--enriched-font-2xl); font-weight: 700; color: var(--enriched-primary); padding-right: var(--enriched-spacing-xs); } .enriched-highlight { background: linear-gradient(120deg, rgba(67, 97, 238, 0.2) 0%, rgba(67, 97, 238, 0.2) 100%); padding: 0 var(--enriched-spacing-xs); } @media (max-width: 768px) { :root { --enriched-font-scale: 1.15; } .enriched-h1 { font-size: var(--enriched-font-2xl); } .enriched-h2 { font-size: var(--enriched-font-xl); } .enriched-h3 { font-size: var(--enriched-font-lg); } } /** **/ /** ENRICHED FONT DESIGNER **/ /** **/ /** **/ /** ENRICHED DASHBOARD DESIGNER **/ /** **/ .dashboard-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: var(--enriched-spacing-xxl); flex-wrap: wrap; gap: var(--enriched-spacing-md); } .dashboard-actions { display: flex; gap: var(--enriched-spacing-sm); flex-wrap: wrap; } .enriched-daterange { display: inline-flex; align-items: center; gap: .5rem; padding: .45rem .75rem; border-radius: var(--enriched-border-radius-md); background: var(--enriched-surface); border: 1px solid var(--enriched-border); box-shadow: var(--enriched-shadow-sm); color: var(--enriched-text); cursor: pointer; position: relative; user-select: none; min-width: 12rem; } .enriched-daterange i { opacity: .8; } .enriched-daterange .edr-label { flex: 1; line-height: 1.2; } .enriched-daterange:focus, .enriched-daterange:focus-visible { outline: 2px solid color-mix(in srgb, var(--enriched-primary) 60%, transparent); outline-offset: 2px; } .edr-menu { position: absolute; top: calc(100% + 6px); left: 0; min-width: 100%; z-index: var(--enriched-z-dropdown); background: var(--enriched-surface); border: 1px solid var(--enriched-border); border-radius: var(--enriched-border-radius-md); box-shadow: var(--enriched-shadow-md); padding: .35rem; } .edr-option { display: flex; align-items: center; justify-content: space-between; gap: 1rem; width: 100%; background: transparent; border: 0; cursor: pointer; padding: .55rem .6rem; border-radius: .5rem; text-align: left; color: var(--enriched-text); transition: var(--enriched-transition); } .edr-option:hover, .edr-option:focus { background: color-mix(in srgb, var(--enriched-primary) 10%, transparent); } .edr-option.is-selected { background: color-mix(in srgb, var(--enriched-primary) 14%, transparent); } .edr-option .edr-check { opacity: 0; } .edr-option.is-selected .edr-check { opacity: 1; color: var(--enriched-primary); } .enriched-datepanel { background: var(--enriched-surface); border: 1px solid var(--enriched-border); border-radius: var(--enriched-border-radius-lg); box-shadow: var(--enriched-shadow-md); padding: var(--enriched-spacing-md); margin-bottom: var(--enriched-spacing-xxl); } .edp-head { display: flex; flex-wrap: wrap; gap: .75rem; align-items: center; margin-bottom: .75rem; } .edp-title { font-weight: 700; color: var(--enriched-text); } .edp-wrap { margin-left: auto; } .edp-presets { display: flex; gap: .5rem; flex: 1; margin-left: auto; } .edp-chip { border: 1px solid var(--enriched-border); background: color-mix(in srgb, var(--enriched-primary) 8%, transparent); padding: .35rem .6rem; border-radius: var(--enriched-border-radius-o); cursor: pointer; } .edp-chip:hover { background: color-mix(in srgb, var(--enriched-primary) 14%, transparent); } .edp-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .75rem; } @media (max-width:640px) { .edp-grid { grid-template-columns: 1fr; } } .edp-field { display: flex; flex-direction: column; gap: .35rem; } .edp-label { font-size: .825rem; color: var(--enriched-text-lighter); display: flex; gap: .4rem; align-items: center; } .edp-input { padding: .55rem .6rem; border-radius: .6rem; background: var(--enriched-surface-dark); border: 1px solid var(--enriched-border); color: var(--enriched-text); box-shadow: var(--enriched-shadow-xs); } .edp-actions { display: flex; align-items: center; gap: .5rem; margin-top: .9rem; } .edp-actions .edp-spacer { flex: 1; } .metric-card { background: var(--enriched-surface); backdrop-filter: blur(var(--enriched-glass-blur)); border: var(--enriched-glass-border); border-radius: var(--enriched-border-radius-lg); padding: var(--enriched-spacing-lg); box-shadow: var(--enriched-glass-shadow); transition: var(--enriched-transition); position: relative; overflow: hidden; } .metric-card:hover { transform: translateY(-5px); box-shadow: var(--enriched-shadow-lg); } .metric-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 4px; background: linear-gradient(90deg, var(--enriched-primary), var(--enriched-primary-light)); } .metric-icon { width: 48px; height: 48px; border-radius: var(--enriched-border-radius-md); display: flex; align-items: center; justify-content: center; margin-bottom: var(--enriched-spacing-md); font-size: 1.5rem; background: rgba(78, 106, 230, 0.1); color: var(--enriched-primary); } .metric-value { font-size: 2.25rem; font-weight: 800; color: var(--enriched-text); line-height: 1; margin: var(--enriched-spacing-xs) 0; background: linear-gradient(135deg, var(--enriched-primary) 0%, var(--enriched-primary-light) 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } .metric-label { color: var(--enriched-text-light); font-size: 0.9rem; font-weight: 500; margin-bottom: var(--enriched-spacing-xs); } .metric-trend { display: flex; align-items: center; gap: var(--enriched-spacing-sm); font-size: 0.85rem; font-weight: 500; margin-top: var(--enriched-spacing-sm); } .trend-up { color: var(--enriched-success); } .trend-down { color: var(--enriched-danger); } .chart-container { background: var(--enriched-surface); backdrop-filter: blur(var(--enriched-glass-blur)); border: var(--enriched-glass-border); border-radius: var(--enriched-border-radius-lg); padding: var(--enriched-spacing-lg); box-shadow: var(--enriched-glass-shadow); position: relative; } .chart-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: var(--enriched-spacing-lg); } .chart-body { position: relative; height: 340px; } .chart-title { font-size: 1.25rem; font-weight: 600; color: var(--enriched-text); } .data-section { margin-bottom: var(--enriched-spacing-xxl); } .metric-section-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: var(--enriched-spacing-xxl); } .metric-section-title { font-size: 1.5rem; font-weight: 700; color: var(--enriched-text); display: flex; align-items: center; gap: var(--enriched-spacing-sm); } .metric-section-title i { color: var(--enriched-primary); font-size: 1.25rem; } .data-table-container { background: var(--enriched-surface); backdrop-filter: blur(var(--enriched-glass-blur)); border: var(--enriched-glass-border); border-radius: var(--enriched-border-radius-lg); overflow: hidden; box-shadow: var(--enriched-glass-shadow); } .data-table { width: 100%; border-collapse: collapse; } .data-table th { background: var(--table-header-bg) !important; color: var(--table-header-text); padding: var(--enriched-spacing-md); text-align: left; font-weight: 600; border-bottom: 1px solid var(--enriched-border); } .data-table td { padding: var(--enriched-spacing-md); border-bottom: 1px solid var(--enriched-border-light); } .data-table tr:nth-child(even) { background: var(--table-row-even); } .data-table tr:hover { background: var(--table-row-hover); } .url-truncate { max-width: 300px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .performance-score { display: inline-flex; text-align: center; align-items: center; justify-content: center; border-radius: 50px; font-weight: bold; font-size: 0.8rem; padding: .2rem .45rem; } .score-good { background: var(--enriched-success-light); color: var(--enriched-success-dark); } .score-needs-improvement { background: var(--enriched-warning-light); color: var(--enriched-warning-dark); } .score-poor { background: var(--enriched-danger-light); color: var(--enriched-danger-dark); } .tab-content { display: none; } .tab-content.active { display: block; animation: e-tab-content-fade-in 0.3s ease; } @keyframes e-tab-content-fade-in { from { opacity: 0; } to { opacity: 1; } } .empty-state { text-align: center; padding: var(--enriched-spacing-xl); color: var(--enriched-text-lighter); } .empty-state i { font-size: 3rem; margin-bottom: var(--enriched-spacing-md); opacity: 0.5; } .empty-state p { margin-bottom: var(--enriched-spacing-md); } @media (max-width: 768px) { .metric-grid { grid-template-columns: 1fr; } .metric-value { font-size: 1.75rem; } .dashboard-header { flex-direction: column; align-items: flex-start; } .dashboard-actions { width: 100%; justify-content: space-between; } .url-truncate { max-width: 200px; } } .chartjs-tooltip { background: var(--enriched-surface-dark); border: 1px solid var(--enriched-border); border-radius: var(--enriched-border-radius-md); padding: var(--enriched-spacing-sm); box-shadow: var(--enriched-shadow-md); opacity: 0; position: absolute; pointer-events: none; transition: all 0.3s ease; } .chartjs-tooltip-key { display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-right: var(--enriched-spacing-xs); } /** **/ /** ENRICHED DASHBOARD DESIGNER **/ /** **/ /** **/ /** ENRICHED VALIDATOR DESIGNER **/ /** **/ .auth-hub { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: var(--enriched-spacing-xl); background-image: radial-gradient(at 47% 33%, rgba(72, 149, 239, 0.15) 0, transparent 59%), radial-gradient(at 82% 65%, rgba(247, 37, 133, 0.15) 0, transparent 55%); } .auth-container { width: 100%; max-width: 1000px; display: grid; grid-template-columns: 1fr 1.2fr; gap: var(--enriched-spacing-xl); align-items: center; } @media (max-width: 900px) { .auth-container { grid-template-columns: 1fr; } .auth-hero { display: none; } } .auth-hero { text-align: center; padding: var(--enriched-spacing-xl); } .auth-hero-image { display: block; width: 100%; height: auto; aspect-ratio: 16/9; max-height: 360px; object-fit: cover; object-position: center; border-radius: var(--enriched-border-radius-lg); box-shadow: 0 20px 48px var(--enriched-shadow); margin-bottom: var(--enriched-spacing-lg); } .auth-content { background: var(--enriched-surface); backdrop-filter: blur(var(--enriched-glass-blur)); border-radius: var(--enriched-border-radius-xl); box-shadow: var(--enriched-glass-shadow); border: var(--enriched-glass-border); padding: var(--enriched-spacing-xl); transition: var(--enriched-transition); } .auth-header { text-align: center; margin-bottom: var(--enriched-spacing-xl); } .auth-wrap { display: block; width: 68px; height: 68px; margin: 0 auto var(--enriched-spacing-md); border-radius: 20%; background: var(--enriched-surface-dark); padding: 6px; overflow: hidden; box-shadow: 0 10px 16px var(--enriched-shadow); } .auth-logo { width: 100%; height: 100%; border-radius: 15%; object-fit: cover; object-position: center; } .auth-tabs { display: flex; gap: var(--enriched-spacing-sm); margin-bottom: var(--enriched-spacing-xl); border-bottom: 1px solid var(--enriched-border); padding-bottom: var(--enriched-spacing-xl); } .auth-tab { flex: 1; padding: var(--enriched-spacing-md); text-align: center; cursor: pointer; border-radius: var(--enriched-border-radius-md); transition: var(--enriched-transition); font-weight: 600; box-shadow: var(--enriched-shadow-sm); } .auth-tab.active { background: var(--enriched-primary); color: white; } .auth-tab-content { display: none; } .auth-tab-content.active { display: block !important; animation: e-auth-tab-content-fade-in 0.3s ease; } .social-auth { margin-top: var(--enriched-spacing-lg); text-align: center; } .social-buttons{ display:flex; gap:var(--enriched-spacing-md); justify-content:center; flex-wrap:wrap; } .social-button{ min-width:54px; min-height:44px; display:inline-flex; align-items:center; justify-content:center; gap:.6rem; padding:0 var(--enriched-spacing-md); border:1px solid var(--enriched-border); border-radius:var(--enriched-border-radius-o); background:var(--enriched-surface-dark); color:var(--enriched-text); box-shadow:var(--enriched-shadow-sm); cursor:pointer; outline:none; transition:var(--enriched-transition); will-change:transform,box-shadow,filter; position:relative; overflow:hidden; } .social-button i{font-size:1.1rem} .social-button:hover{ transform:translateY(-2px); box-shadow:0 10px 22px var(--enriched-shadow-dark); } .social-button.rounded{ inline-size:3.5rem; block-size:3.5rem; border-radius:var(--enriched-border-radius-o); background:var(--enriched-surface); border:1px solid var(--enriched-border); font-size:1.25rem; transition:all .3s cubic-bezier(.34,1.56,.64,1); } .social-button.colored::before{ content:''; position:absolute; inset:0; background:currentColor; opacity:0; transition:opacity .3s ease; border-radius:inherit; } .social-button.colored:hover{ transform:translateY(-3px) scale(1.1); border-color:currentColor; } .social-button.colored:hover i{ color:#fff; position:relative; z-index:1; } .social-button.colored:hover::before{opacity:1} @media(max-width:480px){ .social-button.rounded{ inline-size:3rem; block-size:3rem; font-size:1.1rem; } } .social-button.grayscale{ filter:grayscale(1) saturate(.6); opacity:.9; transition:filter .25s ease,opacity .25s ease,transform .25s ease,box-shadow .25s ease; } .social-button.grayscale:hover{ filter:none; opacity:1; } .social-button.grayscale.colored::before{ opacity:.15; } .social-button.grayscale.colored:hover::before{ opacity:1; } .social-button.grayscale-static{ filter:grayscale(1) saturate(.6); opacity:.9; } .social-button.grayscale-static:hover{ filter:grayscale(1) saturate(.6); opacity:.9; } .social-button.google { color: #DB4437; background: linear-gradient(180deg, var(--enriched-surface-dark), rgba(219, 68, 55, .08)); } .social-button.apple { color: #111; background: linear-gradient(180deg, var(--enriched-surface-dark), rgba(0, 0, 0, .06)); } .social-button.facebook { color: #4267B2; background: linear-gradient(180deg, var(--enriched-surface-dark), rgba(66, 103, 178, .08)); } .social-button.twitter { color: #1DA1F2; background: linear-gradient(180deg, var(--enriched-surface-dark), rgba(29, 161, 242, .08)); } .social-button.x, .social-button.x-twitter { color: #111; background: linear-gradient(180deg, var(--enriched-surface-dark), rgba(0, 0, 0, .06)); } .social-button.github { color: #24292E; background: linear-gradient(180deg, var(--enriched-surface-dark), rgba(36, 41, 46, .08)); } .social-button.gitlab { color: #FC6D26; background: linear-gradient(180deg, var(--enriched-surface-dark), rgba(252, 109, 38, .08)); } .social-button.bitbucket { color: #0052CC; background: linear-gradient(180deg, var(--enriched-surface-dark), rgba(0, 82, 204, .08)); } .social-button.linkedin { color: #0077B5; background: linear-gradient(180deg, var(--enriched-surface-dark), rgba(0, 119, 181, .08)); } .social-button.microsoft { color: #0078D4; background: linear-gradient(180deg, var(--enriched-surface-dark), rgba(0, 120, 212, .08)); } .social-button.yahoo { color: #6001D2; background: linear-gradient(180deg, var(--enriched-surface-dark), rgba(96, 1, 210, .08)); } .social-button.reddit { color: #FF4500; background: linear-gradient(180deg, var(--enriched-surface-dark), rgba(255, 69, 0, .08)); } .social-button.discord { color: #5865F2; background: linear-gradient(180deg, var(--enriched-surface-dark), rgba(88, 101, 242, .08)); } .social-button.slack { color: #4A154B; background: linear-gradient(180deg, var(--enriched-surface-dark), rgba(74, 21, 75, .08)); } .social-button.amazon { color: #FF9900; background: linear-gradient(180deg, var(--enriched-surface-dark), rgba(255, 153, 0, .08)); } .social-button.spotify { color: #1DB954; background: linear-gradient(180deg, var(--enriched-surface-dark), rgba(29, 185, 84, .08)); } .social-button.twitch { color: #9146FF; background: linear-gradient(180deg, var(--enriched-surface-dark), rgba(145, 70, 255, .08)); } .social-button.steam { color: #66C0F4; background: linear-gradient(180deg, var(--enriched-surface-dark), rgba(102, 192, 244, .08)); } .social-button.dropbox { color: #0061FF; background: linear-gradient(180deg, var(--enriched-surface-dark), rgba(0, 97, 255, .08)); } .social-button.telegram { color: #0088CC; background: linear-gradient(180deg, var(--enriched-surface-dark), rgba(0, 136, 204, .08)); } .social-button.vk { color: #4C75A3; background: linear-gradient(180deg, var(--enriched-surface-dark), rgba(76, 117, 163, .08)); } .social-button.weibo { color: #E6162D; background: linear-gradient(180deg, var(--enriched-surface-dark), rgba(230, 22, 45, .08)); } .social-button.wechat { color: #09B83E; background: linear-gradient(180deg, var(--enriched-surface-dark), rgba(9, 184, 62, .08)); } .social-button.instagram { color: #E4405F; background: linear-gradient(180deg, var(--enriched-surface-dark), rgba(228, 64, 95, .08)); } .social-button.tiktok { color: #FE2C55; background: linear-gradient(180deg, var(--enriched-surface-dark), rgba(254, 44, 85, .08)); } .social-button.youtube { color: #FF0000; background: linear-gradient(180deg, var(--enriched-surface-dark), rgba(255, 0, 0, .08)); } .social-button.pinterest { color: #E60023; background: linear-gradient(180deg, var(--enriched-surface-dark), rgba(230, 0, 35, .08)); } .social-button.snapchat { color: #111; background: linear-gradient(180deg, var(--enriched-surface-dark), rgba(255, 252, 0, .16)); } .social-button.whatsapp { color: #25D366; background: linear-gradient(180deg, var(--enriched-surface-dark), rgba(37, 211, 102, .08)); } .social-button.threads { color: #111; background: linear-gradient(180deg, var(--enriched-surface-dark), rgba(0, 0, 0, .06)); } .social-button.mastodon { color: #6364FF; background: linear-gradient(180deg, var(--enriched-surface-dark), rgba(99, 100, 255, .08)); } .social-button.vimeo { color: #1AB7EA; background: linear-gradient(180deg, var(--enriched-surface-dark), rgba(26, 183, 234, .08)); } .social-button.dribbble { color: #EA4C89; background: linear-gradient(180deg, var(--enriched-surface-dark), rgba(234, 76, 137, .08)); } .social-button.behance { color: #1769FF; background: linear-gradient(180deg, var(--enriched-surface-dark), rgba(23, 105, 255, .08)); } .social-button.medium { color: #12100E; background: linear-gradient(180deg, var(--enriched-surface-dark), rgba(0, 0, 0, .06)); } .social-button.bluesky { color: #1185FE; background: linear-gradient(180deg, var(--enriched-surface-dark), rgba(17, 133, 254, .10)); } .social-button.tumblr { color: #36465D; background: linear-gradient(180deg, var(--enriched-surface-dark), rgba(54, 70, 93, .10)); } .social-button.quora { color: #B92B27; background: linear-gradient(180deg, var(--enriched-surface-dark), rgba(185, 43, 39, .10)); } .social-button.flickr { color: #FF0084; background: linear-gradient(180deg, var(--enriched-surface-dark), rgba(255, 0, 132, .10)); } .social-button.kakaotalk, .social-button.kakao { color: #111; background: linear-gradient(180deg, var(--enriched-surface-dark), rgba(255, 205, 0, .18)); } .social-button.okru, .social-button.odnoklassniki { color: #EE8208; background: linear-gradient(180deg, var(--enriched-surface-dark), rgba(238, 130, 8, .12)); } .social-button.rss { color: #f26522; background: linear-gradient(180deg, var(--enriched-surface-dark), rgba(242, 101, 34, .12)); } .social-button.yelp { color: #D32323; background: linear-gradient(180deg, var(--enriched-surface-dark), rgba(211, 35, 35, .10)); } .social-button.email { color: #EA4335; background: linear-gradient(180deg, var(--enriched-surface-dark), rgba(234, 67, 53, .08)); } .social-button.sms { color: #34C759; background: linear-gradient(180deg, var(--enriched-surface-dark), rgba(52, 199, 89, .10)); } .social-button.phone { color: #10B981; background: linear-gradient(180deg, var(--enriched-surface-dark), rgba(16, 185, 129, .10)); } .social-button.messenger { color: #0084FF; background: linear-gradient(180deg, var(--enriched-surface-dark), rgba(0, 132, 255, .10)); } .social-button.line { color: #00C300; background: linear-gradient(180deg, var(--enriched-surface-dark), rgba(0, 195, 0, .10)); } .social-button.signal { color: #3A76F0; background: linear-gradient(180deg, var(--enriched-surface-dark), rgba(58, 118, 240, .10)); } .social-button.viber { color: #7360F2; background: linear-gradient(180deg, var(--enriched-surface-dark), rgba(115, 96, 242, .10)); } .social-button.skype { color: #00AFF0; background: linear-gradient(180deg, var(--enriched-surface-dark), rgba(0, 175, 240, .10)); } .social-button.zoom { color: #2D8CFF; background: linear-gradient(180deg, var(--enriched-surface-dark), rgba(45, 140, 255, .10)); } .social-button.google-meet, .social-button.meet { color: #0B8043; background: linear-gradient(180deg, var(--enriched-surface-dark), rgba(11, 128, 67, .10)); } .social-button.teams { color: #6264A7; background: linear-gradient(180deg, var(--enriched-surface-dark), rgba(98, 100, 167, .10)); } .social-button:focus-visible { box-shadow: 0 0 0 3px var(--enriched-focus-ring, rgba(59, 130, 246, .35)); } [data-theme="dark"] .social-button { border: 1px solid var(--enriched-border-light); color: var(--enriched-text-light); background: linear-gradient(180deg, var(--enriched-surface-dark), rgba(255, 255, 255, 0.05)); } [data-theme="dark"] .social-button:hover { filter: brightness(1.15); } .auth-divider { display: flex; align-items: center; margin: var(--enriched-spacing-lg) 0; color: var(--enriched-text-lighter); } .auth-divider::before, .auth-divider::after { content: ""; flex: 1; height: 1px; background: var(--enriched-border); } .auth-divider span { padding: 0 var(--enriched-spacing-md); } .enriched-warning-box { display: flex; align-items: center; gap: 0.5rem; padding: 1rem 1.25rem; margin: 1rem 0; border: 2px dashed var(--enriched-warning, #f39c12); border-radius: var(--enriched-radius, 12px); background: var(--enriched-surface, #fff8f2); color: var(--enriched-warning-text, #a65c00); font-size: 0.95rem; line-height: 1.4; justify-content: center; text-align: center; } .enriched-warning-box i { color: var(--enriched-warning, #f39c12); font-size: 1.2em; flex-shrink: 0; } .field-bump { animation: e-field-bump .6s ease; } @keyframes e-field-bump { 0% { box-shadow: 0 0 0 0 rgba(91, 156, 255, .0); transform: scale(1); } 30% { box-shadow: 0 0 0 .25rem rgba(91, 156, 255, .25); transform: scale(1.01); } 100% { box-shadow: 0 0 0 0 rgba(91, 156, 255, .0); transform: scale(1); } } .step-indicator { display: flex; justify-content: space-between; margin-bottom: var(--enriched-spacing-xl); position: relative; } .step-indicator::before { content: ""; position: absolute; top: 50%; left: 0; right: 0; height: 2px; background: var(--enriched-border); transform: translateY(-50%); z-index: 1; } .step { width: 30px; height: 30px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: var(--enriched-surface); border: 2px solid var(--enriched-border); position: relative; z-index: 2; font-weight: 600; transition: var(--enriched-transition); } .step.active { background: var(--enriched-primary); color: white; border-color: var(--enriched-primary); } .step.completed { background: var(--enriched-success); color: white; border-color: var(--enriched-success); } .step-label { position: absolute; top: 100%; left: 50%; transform: translateX(-50%); margin-top: var(--enriched-spacing-sm); font-size: 0.75rem; white-space: nowrap; color: var(--enriched-text-light); } .step-content { display: none; } .auth-form { display: flex; gap: var(--enriched-spacing-sm); flex-direction: column; width: 100%; } .step-content.active { display: flex; gap: var(--enriched-spacing-sm); flex-direction: column; width: 100%; animation: e-step-content-slide-in 0.3s ease; } .step:first-child .step-label { left: 0; transform: none; text-align: left; } .step:last-child .step-label { left: 100%; transform: translateX(-100%); text-align: right; } .step:only-child .step-label { left: 50%; transform: translateX(-50%); text-align: center; } .nav-buttons { display: flex; justify-content: space-between; margin-top: var(--enriched-spacing-md); } .verification-code { display: flex; gap: var(--enriched-spacing-md); justify-content: center; margin: var(--enriched-spacing-xl) 0; } .code-input { width: 50px; height: 60px; text-align: center; font-size: 1.5rem; border: 2px solid var(--enriched-secondary); border-radius: var(--enriched-border-radius-md); background: var(--enriched-surface-dark); transition: var(--enriched-transition); } .code-input:focus { border-color: var(--enriched-primary); outline: none; box-shadow: 0 0 0 3px rgba(67, 97, 238, 0.2); } .resend-container { text-align: center; margin-top: var(--enriched-spacing-lg); } .resend-button:disabled { opacity: 0.6; cursor: not-allowed; } .countdown { color: var(--enriched-primary); font-weight: 600; } @keyframes e-auth-tab-content-fade-in { from { opacity: 0; } to { opacity: 1; } } @keyframes e-step-content-slide-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } } .auth-tab-switch { color: var(--enriched-secondary); text-decoration: dashed; text-transform: capitalize; } .auth-tab-switch:hover { color: var(--enriched-secondary); } .enriched-loader { display: flex; align-items: center; gap: var(--enriched-spacing-md); padding: var(--enriched-spacing-md); background: var(--enriched-surface); border-radius: var(--enriched-border-radius-xl); box-shadow: var(--enriched-glass-shadow); } .enriched-loader-inline { display: inline-flex; padding: 0; background: transparent; box-shadow: none; } .enriched-loader-block { width: 100%; } .enriched-loader-overlay { position: fixed; inset: 0; z-index: 9999; display: flex; align-items: center; justify-content: center; backdrop-filter: blur(var(--enriched-glass-blur, 8px)); background: color-mix(in srgb, var(--enriched-bg) 65%, transparent); } .enriched-loader-body { display: flex; align-items: center; gap: var(--enriched-spacing-md); } .enriched-loader-body.loader-centered { width: 100%; flex-direction: column; justify-content: center; } .loader-visual { display: flex; align-items: center; justify-content: center; } .loader-copy .loader-text { font-weight: 600; color: var(--enriched-text); } .loader-copy .loader-sub { font-size: .9rem; color: var(--enriched-text-muted); margin-top: .25rem; } .icon-size-sm { width: 1rem; height: 1rem; } .icon-size-md { width: 1.5rem; height: 1.5rem; } .icon-size-lg { width: 2rem; height: 2rem; } .loader-spinner { width: 1.5em; height: 1.5em; border: .25em solid var(--enriched-surface-dark); border-top-color: var(--enriched-primary); border-radius: 50%; animation: e-enr-spin .9s linear infinite; } .loader-dots, .loader-dots::before, .loader-dots::after { content: ""; display: inline-block; width: .45em; height: .45em; border-radius: 50%; background: var(--enriched-primary); animation: e-enr-bounce 1s infinite ease-in-out; } .loader-dots::before { animation-delay: -0.18s; margin-right: .3em; } .loader-dots::after { animation-delay: 0.18s; margin-left: .3em; } .loader-ring { width: 1.8em; height: 1.8em; border: .18em solid transparent; border-color: transparent var(--enriched-primary) transparent var(--enriched-primary); border-radius: 50%; animation: e-enr-spin .8s linear infinite; } .enriched-progress { margin-top: .5rem; height: 6px; background: var(--enriched-surface-dark); border-radius: var(--enriched-border-radius-o); overflow: hidden; } .enriched-progress .bar { height: 100%; background: var(--enriched-primary); } .enriched-loader-close { margin-left: auto; background: transparent; border: 0; font-size: 1.25rem; color: var(--enriched-text-muted); cursor: pointer; } @keyframes e-enr-spin { to { transform: rotate(360deg); } } @keyframes e-enr-bounce { 0%, 80%, 100% { transform: scale(0.6); opacity: .5; } 40% { transform: scale(1); opacity: 1; } } /** **/ /** ENRICHED VALIDATOR DESIGNER **/ /** **/ /** **/ /** ENRICHED ERROR DESIGNER **/ /** **/ .error-hero { text-align: center; padding: var(--enriched-spacing-xxxl) 0; background: linear-gradient(135deg, rgba(78, 106, 230, 0.05) 0%, rgba(47, 169, 163, 0.05) 100%); border-radius: var(--enriched-border-radius-xl); margin-bottom: var(--enriched-spacing-xxl); position: relative; overflow: hidden; } .error-hero::before { content: ''; position: absolute; top: -50%; left: -50%; width: 200%; height: 200%; background: radial-gradient(circle, rgba(78, 106, 230, 0.1) 0%, transparent 70%); animation: e-error-hero-pulse 15s ease-in-out infinite; z-index: 0; } @keyframes e-error-hero-pulse { 0%, 100% { transform: scale(1); opacity: 0.5; } 50% { transform: scale(1.1); opacity: 0.7; } } .error-icon { font-size: 6rem; color: var(--enriched-danger); margin-bottom: var(--enriched-spacing-lg); position: relative; z-index: 1; text-shadow: 0 6px 12px rgba(239, 68, 68, 0.3); } .error-code { font-size: 8rem; font-weight: 900; line-height: 1; background: linear-gradient(135deg, var(--enriched-danger) 0%, var(--enriched-danger-dark) 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; margin: 0; position: relative; z-index: 1; } .error-title { font-size: 2.5rem; font-weight: 700; color: var(--enriched-text); margin: var(--enriched-spacing-md) 0; position: relative; z-index: 1; } .error-subtitle { font-size: 1.25rem; color: var(--enriched-text-light); max-width: 600px; margin: 0 auto; position: relative; z-index: 1; } .error-details { background: var(--enriched-surface-dark); border-radius: var(--enriched-border-radius-lg); padding: var(--enriched-spacing-lg); margin: var(--enriched-spacing-xl) 0; border-left: 4px solid var(--enriched-info); position: relative; } .error-details::before { content: '\f05a'; font-family: 'Font Awesome 5 Free'; font-weight: 900; position: absolute; left: -15px; top: 50%; transform: translateY(-50%); background: var(--enriched-info); color: white; width: 30px; height: 30px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 0.9rem; } .error-solutions-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: var(--enriched-spacing-lg); margin: var(--enriched-spacing-xl) 0; } .solution-card { background: var(--enriched-surface); backdrop-filter: blur(var(--enriched-glass-blur)); border: var(--enriched-glass-border); border-radius: var(--enriched-border-radius-lg); padding: var(--enriched-spacing-lg); box-shadow: var(--enriched-glass-shadow); transition: var(--enriched-transition); text-align: center; } .solution-card:hover { transform: translateY(-5px); box-shadow: var(--enriched-shadow-lg); } .solution-icon { font-size: 2.5rem; color: var(--enriched-success); margin-bottom: var(--enriched-spacing-md); display: inline-flex; width: 70px; height: 70px; border-radius: 50%; background: rgba(34, 197, 94, 0.1); align-items: center; justify-content: center; } .contact-section { background: linear-gradient(135deg, rgba(14, 165, 233, 0.08) 0%, rgba(67, 97, 238, 0.08) 100%); border-radius: var(--enriched-border-radius-xl); padding: var(--enriched-spacing-xl); margin: var(--enriched-spacing-xxl) 0; text-align: center; position: relative; overflow: hidden; } .contact-section::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 4px; background: linear-gradient(90deg, var(--enriched-info), var(--enriched-primary)); } .contact-options { display: flex; justify-content: center; gap: var(--enriched-spacing-lg); margin-top: var(--enriched-spacing-xl); flex-wrap: wrap; } .contact-option { display: flex; flex-direction: column; align-items: center; gap: var(--enriched-spacing-md); padding: var(--enriched-spacing-lg); background: var(--enriched-surface); border-radius: var(--enriched-border-radius-lg); min-width: 200px; transition: var(--enriched-transition); } .contact-option:hover { transform: translateY(-3px); box-shadow: var(--enriched-shadow-md); } .contact-icon { font-size: 2rem; color: var(--enriched-primary); display: inline-flex; width: 60px; height: 60px; border-radius: 50%; background: rgba(78, 106, 230, 0.1); align-items: center; justify-content: center; } .action-buttons { display: flex; justify-content: center; gap: var(--enriched-spacing-md); margin-top: var(--enriched-spacing-xxl); flex-wrap: wrap; } .action-button { min-width: 180px; justify-content: center; } @media (max-width: 768px) { .error-code { font-size: 5rem; } .error-title { font-size: 1.75rem; } .error-subtitle { font-size: 1.1rem; } .contact-options { flex-direction: column; align-items: center; } .contact-option { width: 100%; max-width: 300px; } .action-buttons { flex-direction: column; } .action-button { width: 100%; } } @keyframes e-error-hero-fade-in-up { from { opacity: 0; transform: translateY(30px); } to { opacity: 1; transform: translateY(0); } } .error-hero>* { animation: e-error-hero-fade-in-up 0.6s ease-out forwards; } .error-hero .error-icon { animation-delay: 0.1s; } .error-hero .error-code { animation-delay: 0.2s; } .error-hero .error-title { animation-delay: 0.3s; } .error-hero .error-subtitle { animation-delay: 0.4s; } /** **/ /** ENRICHED ERROR DESIGNER **/ /** **/ /** **/ /** ENRICHED LOADER DESIGNER **/ /** **/ .enriched-page-loader { position: fixed; top: 0; left: 0; width: 100%; height: 100%; display: flex; justify-content: center; align-items: center; z-index: 9999; transition: opacity 0.5s ease; pointer-events: none; background-color: var(--enriched-bg); background-image: radial-gradient(at 47% 33%, rgba(72, 149, 239, 0.15) 0, transparent 59%), radial-gradient(at 82% 65%, rgba(247, 37, 133, 0.15) 0, transparent 55%); } .enriched-page-loader.hidden { opacity: 0; } .enriched-page-loader-content { text-align: center; } body.loading { overflow: hidden; } .enriched-loader-default { width: 80px; height: 80px; border: 3px solid rgba(78, 106, 230, 0.3); border-radius: 50%; border-top-color: var(--enriched-primary); animation: e-enriched-spin 1s ease-in-out infinite; } .enriched-loader-glass { background: rgba(255, 255, 255, 0.2); backdrop-filter: blur(var(--enriched-glass-blur)); border: var(--enriched-glass-border); border-radius: var(--enriched-border-radius-lg); padding: var(--enriched-spacing-xl); box-shadow: var(--enriched-glass-shadow); } .enriched-loader-glass .enriched-loader-icon { width: 60px; height: 60px; background: rgba(211, 211, 211, 0.3); border-radius: 50%; display: flex; justify-content: center; align-items: center; margin: 0 auto var(--enriched-spacing-md); } .enriched-loader-glass .enriched-loader-icon i { font-size: 2rem; color: lightgray; animation: e-enriched-pulse 1.5s ease-in-out infinite both; } .enriched-loader-glass .enriched-loader-text { color: lightgray; font-weight: 500; letter-spacing: 1px; } .enriched-loader-retro { padding: var(--enriched-spacing-lg); background: linear-gradient(145deg, #f0f0f0, #e6e6e6); border: 2px solid #d0d0d0; border-radius: 8px; box-shadow: 5px 5px 15px rgba(0, 0, 0, 0.1); } .enriched-loader-retro .enriched-loader-icon { width: 50px; height: 50px; margin: 0 auto var(--enriched-spacing-md); position: relative; } .enriched-loader-retro .enriched-loader-icon:before { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: 3px solid transparent; border-top: 3px solid var(--enriched-primary); border-radius: 50%; animation: e-enriched-spin 1s linear infinite; } .enriched-loader-retro .enriched-loader-text { font-family: 'Courier New', monospace; font-weight: bold; color: #555; text-transform: uppercase; } .enriched-loader-gradient { background: linear-gradient(135deg, var(--enriched-primary), var(--enriched-secondary)); padding: var(--enriched-spacing-xl); border-radius: var(--enriched-border-radius-lg); box-shadow: var(--enriched-shadow-lg); } .enriched-loader-gradient .enriched-loader-icon { width: 70px; height: 70px; margin: 0 auto var(--enriched-spacing-md); display: flex; justify-content: center; align-items: center; } .enriched-loader-gradient .enriched-loader-icon i { font-size: 2.5rem; color: white; animation: e-enriched-bounce 1s infinite alternate; } .enriched-loader-gradient .enriched-loader-text { color: white; font-weight: 600; text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3); } .enriched-loader-frosted { --loader-fg: var(--enriched-loader-fg, lightgray); --loader-fg-strong: rgba(211, 211, 211, 0.85); --loader-fg-mid: rgba(211, 211, 211, 0.55); --loader-fg-soft: rgba(211, 211, 211, 0.25); --loader-blur: var(--enriched-glass-blur, 10px); background: rgba(211, 211, 211, 0.08); backdrop-filter: blur(var(--loader-blur)) saturate(1.15); -webkit-backdrop-filter: blur(var(--loader-blur)) saturate(1.15); border-radius: var(--enriched-border-radius-lg); padding: var(--enriched-spacing-xl); border: 1px solid rgba(211, 211, 211, 0.2); box-shadow: var(--enriched-glass-shadow, 0 10px 30px rgba(0, 0, 0, .25)); color: var(--loader-fg); } .enriched-loader-frosted.is-overlay { position: fixed; inset: 0; display: grid; place-items: center; z-index: 9999; background: radial-gradient(1200px 600px at 50% 30%, rgba(211, 211, 211, 0.08), transparent 70%), rgba(0, 0, 0, 0.25); backdrop-filter: blur(calc(var(--loader-blur) * 1.2)) saturate(1.1); -webkit-backdrop-filter: blur(calc(var(--loader-blur) * 1.2)) saturate(1.1); } .enriched-loader-frosted .enriched-loader-icon { --size: 60px; width: var(--size); height: var(--size); margin: 0 auto var(--enriched-spacing-md); position: relative; } .enriched-loader-frosted .enriched-loader-icon:before { content: ""; position: absolute; inset: 0; border: 2px solid transparent; border-top: 2px solid var(--loader-fg-strong); border-radius: 50%; animation: e-enriched-spin 1.5s linear infinite; filter: drop-shadow(0 0 6px var(--loader-fg-soft)); } .enriched-loader-frosted .enriched-loader-icon:after { content: ""; position: absolute; inset: 5px; border: 2px solid transparent; border-top: 2px solid var(--loader-fg-mid); border-radius: 50%; animation: e-enriched-spin 2s linear infinite reverse; opacity: .9; } .enriched-loader-frosted .enriched-loader-text { color: var(--loader-fg); font-weight: 500; text-align: center; } .enriched-loader-frosted .enriched-loader-subtext { color: rgba(211, 211, 211, 0.75); font-size: .9em; margin-top: .25rem; text-align: center; } .enriched-loader-frosted[data-size="sm"] .enriched-loader-icon { --size: 40px; } .enriched-loader-frosted[data-size="lg"] .enriched-loader-icon { --size: 80px; } .enriched-loader-frosted[hidden] { display: none !important; } @media (prefers-reduced-motion: reduce) { .enriched-loader-frosted .enriched-loader-icon:before, .enriched-loader-frosted .enriched-loader-icon:after { animation: e-none; border-top-color: var(--loader-fg); } } .enriched-loader-aurora { position: relative; padding: var(--enriched-spacing-xl); border-radius: var(--enriched-border-radius-lg); overflow: hidden; } .enriched-loader-aurora:before { content: ""; position: absolute; top: 0; left: 0; width: 200%; height: 200%; background: linear-gradient(45deg, rgba(78, 106, 230, 0.8), rgba(47, 169, 163, 0.8), rgba(255, 180, 87, 0.8), rgba(239, 68, 68, 0.8)); animation: e-enriched-aurora 8s linear infinite; z-index: -1; } .enriched-loader-aurora .enriched-loader-icon { width: 60px; height: 60px; margin: 0 auto var(--enriched-spacing-md); display: flex; justify-content: center; align-items: center; } .enriched-loader-aurora .enriched-loader-icon i { font-size: 2rem; color: white; animation: e-enriched-rotate 2s linear infinite; } .enriched-loader-aurora .enriched-loader-text { color: white; font-weight: 600; text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3); } .enriched-loader-slanting { transform: skewX(-10deg); background: var(--enriched-primary); padding: var(--enriched-spacing-xl) var(--enriched-spacing-xxl); } .enriched-loader-slanting .enriched-loader-content { transform: skewX(10deg); } .enriched-loader-slanting .enriched-loader-icon { width: 50px; height: 50px; margin: 0 auto var(--enriched-spacing-md); position: relative; } .enriched-loader-slanting .enriched-loader-icon:before { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: 3px solid transparent; border-top: 3px solid white; border-right: 3px solid white; animation: e-enriched-spin 1s linear infinite; } .enriched-loader-slanting .enriched-loader-text { color: white; font-weight: bold; text-transform: uppercase; letter-spacing: 2px; } .enriched-loader-blank { width: 60px; height: 60px; border: 2px solid transparent; border-top: 2px solid var(--enriched-primary); border-radius: 50%; animation: e-enriched-spin 1s linear infinite; } @keyframes e-enriched-spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } @keyframes e-enriched-pulse { 0% { transform: scale(0.95); opacity: 0.7; } 50% { transform: scale(1.1); opacity: 1; } 100% { transform: scale(0.95); opacity: 0.7; } } @keyframes e-enriched-bounce { 0% { transform: translateY(0); } 100% { transform: translateY(-15px); } } @keyframes e-enriched-rotate { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } @keyframes e-enriched-aurora { 0% { transform: translate(-25%, -25%) rotate(0deg); } 100% { transform: translate(-25%, -25%) rotate(360deg); } } .enriched-loader-selection { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: var(--enriched-spacing-lg); margin-top: var(--enriched-spacing-xl); } .enriched-loader-option { background: var(--enriched-surface); border-radius: var(--enriched-border-radius-md); padding: var(--enriched-spacing-lg); box-shadow: var(--enriched-shadow-sm); transition: var(--enriched-transition); cursor: pointer; text-align: center; } .enriched-loader-option:hover { transform: translateY(-5px); box-shadow: var(--enriched-shadow-md); } .enriched-loader-option.active { border: 2px solid var(--enriched-primary); } .enriched-loader-preview { height: 150px; display: flex; justify-content: center; align-items: center; margin-bottom: var(--enriched-spacing-md); } .enriched-loader-name { font-weight: 600; margin-bottom: var(--enriched-spacing-xs); } .enriched-loader-description { color: var(--enriched-text-lighter); font-size: 0.9rem; } /** **/ /** ENRICHED LOADER DESIGNER **/ /** **/ /** **/ /** ENRICHED CHIC DESIGNER **/ /** **/ .enriched-chic-div { width: 100%; padding: var(--enriched-spacing-md); border: 2px solid var(--enriched-secondary); border-radius: var(--enriched-border-radius-md); background: var(--enriched-surface-dark); transition: var(--enriched-transition); min-height: auto; } .enriched-chic-div.pointer { cursor: pointer; } .enriched-chic-div.min { min-height: 55px; } .enriched-chic-div.flex { display: flex; align-items: center; } .enriched-chic-div:hover { border-color: var(--enriched-primary-light); background: var(--enriched-surface); } .enriched-chic-div:focus, .enriched-chic-div:focus-within, .enriched-chic-div.active { outline: none; border-color: var(--enriched-primary); box-shadow: 0 0 0 3px rgba(67, 97, 238, 0.2); background: var(--enriched-surface); } .enriched-chic-div.readonly { background: var(--enriched-surface-muted); color: var(--enriched-text-muted); cursor: not-allowed; } .enriched-chic-div:disabled { background-color: var(--enriched-surface-muted); color: var(--enriched-text-muted); border-color: var(--enriched-border-muted); cursor: not-allowed; opacity: 0.65; } .enriched-chic-div.success { border-color: var(--enriched-success); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cpath fill='none' d='M0 0h24v24H0z'/%3E%3Cpath d='M10 15.172l9.192-9.193 1.415 1.414L10 18l-6.364-6.364 1.414-1.414z' fill='%234cc9f0'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right var(--enriched-spacing-md) center; background-size: 20px; padding-right: calc(var(--enriched-spacing-md) * 3); } .enriched-chic-div.error { border-color: var(--enriched-danger); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cpath fill='none' d='M0 0h24v24H0z'/%3E%3Cpath d='M12 22C6.477 22 2 17.523 2 12S6.477 2 12 2s10 4.477 10 10-4.477 10-10 10zm-1-7v2h2v-2h-2zm0-8v6h2V7h-2z' fill='%23f72585'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right var(--enriched-spacing-md) center; background-size: 20px; padding-right: calc(var(--enriched-spacing-md) * 3); } .enriched-chic-div.with-icon { position: relative; padding-left: calc(var(--enriched-spacing-md) * 3); } .enriched-chic-div.with-icon i { position: absolute; left: var(--enriched-spacing-md); top: 50%; transform: translateY(-50%); color: var(--enriched-text-lighter); z-index: 1; } .enriched-chic-div.sm { padding: var(--enriched-spacing-sm); min-height: 42px; font-size: 0.9rem; } .enriched-chic-div.lg { padding: var(--enriched-spacing-lg); min-height: 64px; font-size: 1.1rem; } .enriched-chic-div.center { justify-content: center; text-align: center; } .enriched-chic-div.column { flex-direction: column; align-items: flex-start; gap: var(--enriched-spacing-xs); } /** **/ /** ENRICHED CHIC DESIGNER **/ /** **/ /** **/ /** ENRICHED MEDIA DESIGNER **/ /** **/ .enriched-media-context { display: block; } .enriched-media-context h4 { margin-bottom: var(--enriched-spacing-lg); } .enriched-si-container { display: inline-block; position: relative; background: var(--enriched-surface); transition: var(--enriched-transition); vertical-align: top; line-height: 0; isolation: isolate; overflow: hidden; } .enriched-si-xs { width: 60px; height: 60px; } .enriched-si-sm { width: 120px; height: 120px; } .enriched-si-md { width: 240px; height: 180px; } .enriched-si-lg { width: 400px; height: 300px; } .enriched-si-xl { width: 600px; height: 400px; } .enriched-si-full { width: 100%; height: auto; } .enriched-si-square { aspect-ratio: 1/1; } .enriched-si-portrait { aspect-ratio: 3/4; } .enriched-si-landscape { aspect-ratio: 16/9; } .enriched-si-container>img.enriched-si-cover, .enriched-si-container>video.enriched-si-cover { width: 100%; height: 100%; display: block; object-fit: cover; object-position: center; border-radius: inherit; } .enriched-si-rounded-none { border-radius: 0; } .enriched-si-rounded-sm { border-radius: var(--enriched-border-radius-sm); } .enriched-si-rounded { border-radius: var(--enriched-border-radius-md); } .enriched-si-rounded-lg { border-radius: var(--enriched-border-radius-lg); } .enriched-si-rounded-full { border-radius: 50%; } .enriched-si-container { --si-ring: 4px; --si-gap: 0px; } .enriched-si-rounded-full.enriched-si-border-primary { border: none; padding: var(--si-ring); background: var(--enriched-primary); } .enriched-si-rounded-full.enriched-si-border-primary>img, .enriched-si-rounded-full.enriched-si-border-primary>video { border-radius: 50%; } .enriched-si-rounded-full.enriched-si-border-accent { border: none; padding: var(--si-ring); background: var(--enriched-accent); } .enriched-si-rounded-full.enriched-si-border-accent>img, .enriched-si-rounded-full.enriched-si-border-accent>video { border-radius: 50%; } .enriched-si-rounded-full.enriched-si-gap { --si-gap: 2px; box-shadow: inset 0 0 0 var(--si-gap) var(--enriched-surface); } @keyframes enriched-ring-spin { to { transform: rotate(360deg); } } .enriched-si-rounded-full.enriched-si-animate-ring { position: relative; padding: var(--si-ring); background: transparent; } .enriched-si-rounded-full.enriched-si-animate-ring::before { content: ""; position: absolute; inset: 0; border-radius: 50%; padding: var(--si-ring); background: conic-gradient(from 0deg, var(--enriched-primary) 0 25%, var(--enriched-primary-light) 25% 50%, var(--enriched-primary) 50% 75%, var(--enriched-primary-dark) 75% 100%); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; animation: enriched-ring-spin 4s linear infinite; pointer-events: none; } .enriched-si-rounded-full.enriched-si-animate-ring>img, .enriched-si-rounded-full.enriched-si-animate-ring>video { position: relative; z-index: 1; border-radius: 50%; } .enriched-si-shadow-none { box-shadow: none; } .enriched-si-shadow-sm { box-shadow: var(--enriched-shadow-sm); } .enriched-si-shadow { box-shadow: var(--enriched-shadow-md); } .enriched-si-shadow-lg { box-shadow: var(--enriched-shadow-lg); } .enriched-si-glow { box-shadow: 0 0 20px color-mix(in oklab, var(--enriched-primary) 30%, transparent); } .enriched-si-glow-accent { box-shadow: 0 0 20px color-mix(in oklab, var(--enriched-accent) 30%, transparent); } .enriched-si-hover-zoom:hover img { transform: scale(1.05); } .enriched-si-hover-lift:hover { transform: translateY(-5px); box-shadow: var(--enriched-shadow-lg); } .enriched-si-overlay { position: relative; overflow: hidden; } .enriched-si-overlay img { display: block; width: 100%; height: auto; border-radius: inherit; transition: transform var(--enriched-transition); z-index: 0; position: relative; } .enriched-si-overlay::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to bottom, transparent 0%, rgba(0,0,0,.5) 100%); opacity: 0; transition: var(--enriched-transition); z-index: 1; } .enriched-si-overlay-content { position: absolute; left: 0; right: 0; bottom: 0; padding: var(--enriched-spacing-md); color: #fff; background: linear-gradient(to top, rgba(0,0,0,.9) 0%, rgba(0,0,0,.7) 50%, transparent 100%); transform: translateY(100%); transition: var(--enriched-transition); z-index: 2; display: flex; flex-direction: column; gap: var(--enriched-spacing-xs); min-height: 80px; justify-content: flex-end; } .enriched-si-overlay:hover::after { opacity: 1; } .enriched-si-overlay:hover .enriched-si-overlay-content { transform: translateY(0); } .enriched-si-overlay-content h5 { font-size: 1.1rem; font-weight: 600; margin: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; line-height: 1.2; max-width: 100%; } .enriched-si-overlay-content p { font-size: 0.9rem; margin: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; line-height: 1.2; max-width: 100%; opacity: 0.9; } .enriched-si-overlay-content .enriched-text-light, .enriched-si-overlay-content .enriched-text-lighter { color: #fff !important; text-shadow: 0 1px 2px rgba(0,0,0,0.5); } .enriched-si-xs .enriched-si-overlay-content, .enriched-si-sm .enriched-si-overlay-content { min-height: 60px; padding: var(--enriched-spacing-sm); } .enriched-si-xs .enriched-si-overlay-content h5 { font-size: 0.9rem; } .enriched-si-xs .enriched-si-overlay-content p { font-size: 0.8rem; } .enriched-si-sm .enriched-si-overlay-content h5 { font-size: 1rem; } .enriched-si-sm .enriched-si-overlay-content p { font-size: 0.85rem; } .enriched-si-lg .enriched-si-overlay-content, .enriched-si-xl .enriched-si-overlay-content { min-height: 100px; padding: var(--enriched-spacing-lg); } .enriched-si-lg .enriched-si-overlay-content h5 { font-size: 1.3rem; } .enriched-si-lg .enriched-si-overlay-content p { font-size: 1rem; } .enriched-si-xl .enriched-si-overlay-content h5 { font-size: 1.5rem; } .enriched-si-xl .enriched-si-overlay-content p { font-size: 1.1rem; } .enriched-sv-container { display: inline-block; position: relative; overflow: hidden; background: var(--enriched-surface); transition: var(--enriched-transition); } .enriched-sv-xs { width: 120px; height: 90px; } .enriched-sv-sm { width: 240px; height: 180px; } .enriched-sv-md { width: 400px; height: 300px; } .enriched-sv-lg { width: 600px; height: 400px; } .enriched-sv-xl { width: 800px; height: 500px; } .enriched-sv-full { width: 100%; height: auto; } .enriched-sv-square { aspect-ratio: 1/1; } .enriched-sv-portrait { aspect-ratio: 9/16; } .enriched-sv-landscape { aspect-ratio: 16/9; } .enriched-sv-cinematic { aspect-ratio: 21/9; } .enriched-sv-rounded-none { border-radius: 0; } .enriched-sv-rounded-sm { border-radius: var(--enriched-border-radius-sm); } .enriched-sv-rounded { border-radius: var(--enriched-border-radius-md); } .enriched-sv-rounded-lg { border-radius: var(--enriched-border-radius-lg); } .enriched-sv-shadow-none { box-shadow: none; } .enriched-sv-shadow-sm { box-shadow: var(--enriched-shadow-sm); } .enriched-sv-shadow { box-shadow: var(--enriched-shadow-md); } .enriched-sv-shadow-lg { box-shadow: var(--enriched-shadow-lg); } .enriched-sv-glow { box-shadow: 0 0 20px rgba(78, 106, 230, 0.3); } .enriched-sv-glow-accent { box-shadow: 0 0 20px rgba(255, 180, 87, 0.3); } .enriched-sv-glass { backdrop-filter: blur(var(--enriched-glass-blur)); border: var(--enriched-glass-border); box-shadow: var(--enriched-glass-shadow); } .enriched-sv-hover-zoom:hover { transform: scale(1.02); } .enriched-sv-hover-lift:hover { transform: translateY(-5px); box-shadow: var(--enriched-shadow-lg); } .enriched-sv-player { position: relative; width: 100%; height: 100%; } .enriched-sv-player video { width: 100%; height: 100%; object-fit: cover; display: block; } .enriched-sv-controls { position: absolute; bottom: 0; left: 0; right: 0; background: linear-gradient(to top, rgba(0, 0, 0, 0.7) 0%, transparent 100%); padding: var(--enriched-spacing-md); display: flex; align-items: center; gap: var(--enriched-spacing-sm); opacity: 0; transition: var(--enriched-transition); transform: translateY(100%); } .enriched-sv-container:hover .enriched-sv-controls { opacity: 1; transform: translateY(0); } .enriched-sv-play-btn { width: 36px; height: 36px; border-radius: 50%; background: var(--enriched-primary); color: white; border: none; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: var(--enriched-transition); } .enriched-sv-play-btn:hover { background: var(--enriched-primary-dark); transform: scale(1.1); } .enriched-sv-progress { flex: 1; height: 4px; background: rgba(255, 255, 255, 0.3); border-radius: 2px; cursor: pointer; position: relative; } .enriched-sv-progress-bar { position: absolute; top: 0; left: 0; height: 100%; background: var(--enriched-primary); border-radius: 2px; width: 0%; transition: width 0.1s linear; } .enriched-sv-time { color: white; font-size: 0.875rem; min-width: 80px; text-align: center; } .enriched-sv-volume { display: flex; align-items: center; gap: var(--enriched-spacing-xs); } .enriched-sv-volume-btn { background: none; border: none; color: white; cursor: pointer; padding: var(--enriched-spacing-xs); } .enriched-sv-volume-slider { width: 60px; height: 4px; background: rgba(255, 255, 255, 0.3); border-radius: 2px; cursor: pointer; position: relative; } .enriched-sv-volume-level { position: absolute; top: 0; left: 0; height: 100%; background: white; border-radius: 2px; width: 80%; } .enriched-sv-fullscreen-btn { background: none; border: none; color: white; cursor: pointer; padding: var(--enriched-spacing-xs); } .enriched-sv-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; background: rgba(0, 0, 0, 0.3); opacity: 1; transition: var(--enriched-transition); } .enriched-sv-container:hover .enriched-sv-overlay { opacity: 0; } .enriched-sv-play-icon { width: 60px; height: 60px; border-radius: 50%; background: rgba(255, 255, 255, 0.9); color: var(--enriched-primary); display: flex; align-items: center; justify-content: center; font-size: 1.5rem; cursor: pointer; transition: var(--enriched-transition); } .enriched-sv-play-icon:hover { background: white; transform: scale(1.1); } .enriched-si-loading, .enriched-sv-loading { position: relative; background: var(--enriched-surface-light); display: flex; align-items: center; justify-content: center; } .enriched-si-loading::after, .enriched-sv-loading::after { content: ''; width: 30px; height: 30px; border: 3px solid rgba(78, 106, 230, 0.3); border-radius: 50%; border-top-color: var(--enriched-primary); animation: enriched-spin 1s ease-in-out infinite; } @keyframes enriched-spin { to { transform: rotate(360deg); } } .enriched-si-error, .enriched-sv-error { display: flex; flex-direction: column; align-items: center; justify-content: center; background: var(--enriched-surface-light); color: var(--enriched-text-lighter); text-align: center; padding: var(--enriched-spacing-md); } .enriched-si-error i, .enriched-sv-error i { font-size: 2rem; margin-bottom: var(--enriched-spacing-sm); color: var(--enriched-danger); } @media (max-width:768px) { .enriched-si-lg, .enriched-si-xl, .enriched-sv-lg, .enriched-sv-xl { width: 100%; height: auto; } .enriched-sv-controls { opacity: 1; transform: translateY(0); } } .enriched-media-grid, .enriched-media-grid *{ box-sizing:border-box; } .enriched-media-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(min(280px,100%),1fr)); gap:var(--enriched-spacing-lg); width:100%; max-width:100%; min-width:0; } .enriched-media-grid:has(>.enriched-media-item:only-child){ grid-template-columns:1fr; justify-content:center; justify-items:center; } .enriched-media-grid:has(>.enriched-media-item:only-child) .enriched-media-item{ width:min(100%,clamp(300px,70vw,800px)); max-width:min(100%,clamp(300px,70vw,800px)); } .enriched-media-item{ position:relative; border-radius:var(--enriched-border-radius-xl); overflow:hidden; cursor:pointer; transition:all 0.4s cubic-bezier(0.34,1.56,0.64,1); background:var(--enriched-surface); box-shadow:0 4px 16px rgba(0,0,0,0.08),0 1px 4px rgba(0,0,0,0.04),inset 0 1px 0 rgba(255,255,255,0.1); display:flex; flex-direction:column; isolation:isolate; width:100%; max-width:100%; min-width:0; } @media (max-width:768px){ .enriched-media-grid{ grid-template-columns:repeat(auto-fit,minmax(min(240px,100%),1fr)); gap:var(--enriched-spacing-md); } } @media (max-width:480px){ .enriched-media-grid{ grid-template-columns:1fr; gap:var(--enriched-spacing-md); } .enriched-media-item{ border-radius:var(--enriched-border-radius-lg); } } .enriched-media-item.enriched-media-item-cursor-default{ cursor:default!important; pointer-events:none; } .enriched-media-grid:hover .enriched-media-item:not(:hover){ opacity:0.9; transform:scale(0.98); } .enriched-media-image{ position:relative; overflow:hidden; flex-shrink:0; width:100%; max-width:100%; min-width:0; } .enriched-media-image img, .enriched-media-image video{ width:100%; height:100%; object-fit:cover; display:block; transition:transform 0.8s var(--enriched-easing); max-width:100%; } .enriched-media-image.ratio-1-1{aspect-ratio:1/1;} .enriched-media-image.ratio-4-3{aspect-ratio:4/3;} .enriched-media-image.ratio-3-2{aspect-ratio:3/2;} .enriched-media-image.ratio-16-9{aspect-ratio:16/9;} .enriched-media-image.ratio-2-3{aspect-ratio:2/3;} .enriched-media-image.ratio-9-16{aspect-ratio:9/16;} .enriched-media-image.ratio-auto{aspect-ratio:auto;height:auto;} .enriched-media-content{ padding:var(--enriched-spacing-lg); background:var(--enriched-surface); border-top:1px solid var(--enriched-border); flex:1; display:flex; flex-direction:column; transition:all 0.3s var(--enriched-easing); position:relative; z-index:2; min-width:0; max-width:100%; } .enriched-media-content>*{ min-width:0; max-width:100%; } .enriched-media-content a, .enriched-media-content button, .enriched-media-content input, .enriched-media-content textarea, .enriched-media-content select{ max-width:100%; } .enriched-media-item:hover{ transform:translateY(-8px); box-shadow:0 20px 60px rgba(0,0,0,0.15),0 8px 32px rgba(78,106,230,0.12),inset 0 1px 0 rgba(255,255,255,0.15); } .enriched-media-item:hover .enriched-media-image img, .enriched-media-item:hover .enriched-media-image video{ transform:scale(1.08); } .enriched-media-item:hover .enriched-media-content{ background:color-mix(in oklab,var(--enriched-surface) 95%,white); border-top-color:var(--enriched-primary); } .enriched-media-overlay{ position:absolute; inset:0; background:rgba(0,0,0,0.7); display:flex; align-items:center; justify-content:center; opacity:0; transition:var(--enriched-transition); } .enriched-media-item:hover .enriched-media-overlay{ opacity:1; } .enriched-media-overlay i{ color:white; font-size:2rem; transform:scale(0.8); transition:transform 0.3s var(--enriched-easing); filter:drop-shadow(0 2px 8px rgba(0,0,0,0.3)); } .enriched-media-item:hover .enriched-media-overlay i{ transform:scale(1); } .enriched-media-title{ margin:0 0 0.5rem 0; font-weight:800; font-size:clamp(1.1rem,1rem + 0.5vw,1.3rem); line-height:1.25; letter-spacing:0.01em; color:var(--enriched-text); display:-webkit-box; -webkit-line-clamp:2; line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; transition:color 0.3s ease; min-width:0; max-width:100%; overflow-wrap:anywhere; word-break:break-word; } .enriched-media-item:hover .enriched-media-title{ color:var(--enriched-primary); } .enriched-media-sub{ margin:0; font-size:clamp(0.9rem,0.85rem + 0.25vw,1rem); line-height:1.5; color:var(--enriched-text-light); display:-webkit-box; -webkit-line-clamp:3; line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; flex:1; min-width:0; max-width:100%; overflow-wrap:anywhere; word-break:break-word; } .enriched-media-meta{ display:flex; gap:var(--enriched-spacing-md); align-items:center; margin-top:0.75rem; padding-top:0.75rem; border-top:1px solid var(--enriched-border-light); font-size:0.85rem; flex-wrap:wrap; color:var(--enriched-text-lighter); min-width:0; max-width:100%; } .enriched-media-meta i{ font-size:0.9em; margin-right:0.25rem; color:var(--enriched-primary); } .enriched-media-meta span{ display:flex; align-items:center; gap:0.25rem; min-width:0; max-width:100%; flex:0 1 auto; overflow-wrap:anywhere; word-break:break-word; white-space:normal; } .enriched-media-category{ display:inline-flex; align-items:center; gap:0.4rem; padding:0.35rem 0.75rem; background:var(--enriched-primary-ghost); color:var(--enriched-primary); border:1px solid var(--enriched-primary); border-radius:var(--enriched-border-radius-o); font-size:0.8rem; font-weight:700; margin-bottom:0.75rem; align-self:flex-start; transition:all 0.3s ease; min-width:0; max-width:100%; flex-wrap:wrap; white-space:normal; overflow-wrap:anywhere; } .enriched-media-item:hover .enriched-media-category{ background:var(--enriched-primary); color:white; transform:translateY(-1px); box-shadow:0 4px 12px rgba(78,106,230,0.2); } .enriched-media-item.compact .enriched-media-content{ padding:var(--enriched-spacing-md); } .enriched-media-item.compact .enriched-media-title{ font-size:1rem; -webkit-line-clamp:1; line-clamp:1; } .enriched-media-item.compact .enriched-media-sub{ font-size:0.85rem; -webkit-line-clamp:2; line-clamp:2; } .enriched-media-item.loading .enriched-media-image{ position:relative; overflow:hidden; background:linear-gradient(90deg,color-mix(in oklab,var(--enriched-surface) 90%,transparent) 25%,color-mix(in oklab,var(--enriched-surface) 95%,transparent) 50%,color-mix(in oklab,var(--enriched-surface) 90%,transparent) 75%); background-size:200% 100%; animation:loading 1.5s infinite; } .enriched-media-item.loading .enriched-media-content{ position:relative; overflow:hidden; } .enriched-media-item.loading .enriched-media-content::before{ content:''; position:absolute; inset:0; background:linear-gradient(90deg,color-mix(in oklab,var(--enriched-surface) 90%,transparent) 25%,color-mix(in oklab,var(--enriched-surface) 95%,transparent) 50%,color-mix(in oklab,var(--enriched-surface) 90%,transparent) 75%); background-size:200% 100%; animation:enrichedMediaItemLoading 1.5s infinite; } @keyframes enrichedMediaItemLoading{ 0%{background-position:200% 0;} 100%{background-position:-200% 0;} } [data-theme="dark"] .enriched-media-item{ background:color-mix(in oklab,var(--enriched-surface) 95%,black); box-shadow:0 4px 16px rgba(0,0,0,0.2),0 1px 4px rgba(0,0,0,0.1),inset 0 1px 0 rgba(255,255,255,0.05); } [data-theme="dark"] .enriched-media-content{ background:color-mix(in oklab,var(--enriched-surface) 95%,black); border-top-color:var(--enriched-border-dark); } [data-theme="dark"] .enriched-media-item:hover{ box-shadow:0 20px 60px rgba(0,0,0,0.3),0 8px 32px rgba(111,135,240,0.15),inset 0 1px 0 rgba(255,255,255,0.1); } [data-theme="dark"] .enriched-media-item:hover .enriched-media-content{ background:color-mix(in oklab,var(--enriched-surface) 92%,black); border-top-color:var(--enriched-primary); } [data-theme="dark"] .enriched-media-title{ color:var(--enriched-text-light); } [data-theme="dark"] .enriched-media-sub{ color:var(--enriched-text-lighter); } [data-theme="dark"] .enriched-media-meta{ color:var(--enriched-text-lighter); border-top-color:var(--enriched-border-dark); } @media (max-width:768px){ .enriched-media-content{ padding:var(--enriched-spacing-md); } .enriched-media-meta{ flex-wrap:wrap; gap:0.5rem; } } @media (max-width:480px){ .enriched-media-content{ padding:var(--enriched-spacing-md); } .enriched-media-title{ font-size:1.1rem; } } @media (prefers-reduced-motion:no-preference){ .enriched-media-item{ animation:enrichedMediaItemFadeInUp 0.6s var(--enriched-easing) backwards; } .enriched-media-item:nth-child(2){animation-delay:0.05s;} .enriched-media-item:nth-child(3){animation-delay:0.1s;} .enriched-media-item:nth-child(4){animation-delay:0.15s;} .enriched-media-item:nth-child(5){animation-delay:0.2s;} .enriched-media-item:nth-child(6){animation-delay:0.25s;} .enriched-media-item:nth-child(7){animation-delay:0.3s;} .enriched-media-item:nth-child(8){animation-delay:0.35s;} .enriched-media-item:nth-child(9){animation-delay:0.4s;} .enriched-media-item:nth-child(10){animation-delay:0.45s;} .enriched-media-item:nth-child(11){animation-delay:0.5s;} @keyframes enrichedMediaItemFadeInUp{ from{opacity:0;transform:translateY(20px);} to{opacity:1;transform:translateY(0);} } } @media (hover:none) and (pointer:coarse){ .enriched-media-item:hover{ transform:none; box-shadow:0 4px 16px rgba(0,0,0,0.08),0 1px 4px rgba(0,0,0,0.04); } .enriched-media-item:active{ transform:scale(0.98); } .enriched-media-item:hover .enriched-media-content{ background:var(--enriched-surface); border-top-color:var(--enriched-border); } .enriched-media-grid:hover .enriched-media-item:not(:hover){ opacity:1; transform:none; } } .enriched-document-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: var(--enriched-spacing-md); margin: var(--enriched-spacing-lg) 0; } .enriched-document-card { background: var(--enriched-surface); border-radius: var(--enriched-border-radius-lg); padding: var(--enriched-spacing-lg); display: flex; align-items: center; gap: var(--enriched-spacing-md); transition: var(--enriched-transition); border: 1px solid var(--enriched-border); } .enriched-document-card:hover { transform: translateY(-2px); box-shadow: var(--enriched-shadow-md); } .enriched-document-icon { width: 48px; height: 48px; background: var(--enriched-primary); border-radius: var(--enriched-border-radius-md); display: flex; align-items: center; justify-content: center; color: white; font-size: 1.25rem; } .enriched-document-info { flex: 1; } .enriched-document-info h4 { margin: 0 0 var(--enriched-spacing-xs) 0; color: var(--enriched-text); } .enriched-document-info p { margin: 0; color: var(--enriched-text-light); font-size: 0.875rem; } .enriched-document-actions { display: flex; gap: var(--enriched-spacing-sm); } .enriched-audio-player { background: var(--enriched-surface); border-radius: var(--enriched-border-radius-lg); padding: var(--enriched-spacing-lg); display: flex; align-items: center; gap: var(--enriched-spacing-md); margin: var(--enriched-spacing-lg) 0; border: 1px solid var(--enriched-border); } .enriched-audio-cover { width: 64px; height: 64px; background: linear-gradient(135deg, var(--enriched-primary), var(--enriched-secondary)); border-radius: var(--enriched-border-radius-md); display: flex; align-items: center; justify-content: center; color: white; font-size: 1.5rem; } .enriched-audio-info { flex: 1; } .enriched-audio-info h4 { margin: 0 0 var(--enriched-spacing-xs) 0; color: var(--enriched-text); } .enriched-audio-info p { margin: 0; color: var(--enriched-text-light); font-size: 0.875rem; } .enriched-audio-controls { display: flex; align-items: center; gap: var(--enriched-spacing-md); flex: 2; } .enriched-audio-control-btn { width: 40px; height: 40px; background: var(--enriched-primary); border: none; border-radius: 50%; color: white; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: var(--enriched-transition); } .enriched-audio-control-btn:hover { transform: scale(1.1); } .enriched-audio-progress { flex: 1; height: 4px; background: var(--enriched-border); border-radius: 2px; cursor: pointer; position: relative; } .enriched-audio-progress-bar { height: 100%; background: var(--enriched-primary); border-radius: 2px; width: 0%; transition: width 0.1s ease; } .enriched-audio-time { font-size: 0.875rem; color: var(--enriched-text-light); min-width: 80px; } @media (max-width:768px) { .enriched-document-grid { grid-template-columns: 1fr; } .enriched-audio-player { flex-direction: column; text-align: center; } .enriched-audio-controls { width: 100%; } } .enriched-media-content{flex:1 1 auto;display:flex;flex-direction:column;gap:var(--enriched-spacing-sm);min-height:0;} .enriched-media-sub{flex:0 0 auto;} .enriched-media-meta{margin-top:auto;order:99;} .enriched-article-header { text-align: center; padding: var(--enriched-spacing-xl) 0; } .enriched-article-title { font-size: 3rem; font-weight: 800; line-height: 1.1; margin-bottom: var(--enriched-spacing-lg); background: linear-gradient(135deg, var(--enriched-primary) 0%, var(--enriched-secondary) 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } .enriched-article-meta { display: flex; justify-content: center; gap: var(--enriched-spacing-lg); color: var(--enriched-text-lighter); font-size: 0.9rem; margin-bottom: var(--enriched-spacing-xl); } .enriched-article-hero { width: 100%; height: 400px; border-radius: var(--enriched-border-radius-xl); overflow: hidden; margin-bottom: var(--enriched-spacing-xl); position: relative; } .enriched-article-hero img { width: 100%; height: 100%; object-fit: cover; border-radius: var(--enriched-border-radius-xl); box-shadow: var(--enriched-glass-shadow); } .enriched-article-content { font-size: 1.1rem; line-height: 1.8; color: var(--enriched-text); } .enriched-article-content h2 { font-size: 2rem; margin: var(--enriched-spacing-xxl) 0 var(--enriched-spacing-lg) 0; color: var(--enriched-primary); } .enriched-article-content h3 { font-size: 1.5rem; margin: var(--enriched-spacing-xl) 0 var(--enriched-spacing-md) 0; color: var(--enriched-secondary); } .enriched-article-content p { margin-bottom: var(--enriched-spacing-lg); } .enriched-article-quote { background: linear-gradient(135deg, var(--enriched-surface) 0%, var(--enriched-surface-dark) 100%); border-left: 4px solid var(--enriched-primary); padding: var(--enriched-spacing-xl); margin: var(--enriched-spacing-xl) 0; border-radius: 0 var(--enriched-border-radius-lg) var(--enriched-border-radius-lg) 0; font-style: italic; font-size: 1.2rem; } .enriched-article-image { width: 100%; border-radius: var(--enriched-border-radius-lg); margin: var(--enriched-spacing-xl) 0; } .enriched-article-image img { width: 100%; height: auto; display: block; box-shadow: var(--enriched-glass-shadow); border-radius: var(--enriched-border-radius-xl); } .enriched-article-image-caption { text-align: center; font-size: 0.9rem; color: var(--enriched-text-lighter); margin-top: var(--enriched-spacing-sm); font-style: italic; } .enriched-article-list { margin: var(--enriched-spacing-lg) 0; padding-left: var(--enriched-spacing-xl); } .enriched-article-list li { margin-bottom: var(--enriched-spacing-md); position: relative; } .enriched-article-conclusion { background: var(--enriched-surface); border-radius: var(--enriched-border-radius-xl); padding: var(--enriched-spacing-xl); margin: var(--enriched-spacing-xxl) 0; border-left: 4px solid var(--enriched-accent); box-shadow: var(--enriched-glass-shadow); } .enriched-article-content > *:last-child { margin-bottom: 0; } .enriched-article-conclusion > *:last-child { margin-bottom: 0; padding-bottom: 0; } .enriched-article-tags { display: flex; flex-wrap: wrap; gap: var(--enriched-spacing-sm); margin: var(--enriched-spacing-xl) 0; } .enriched-article-actions { display: flex; gap: var(--enriched-spacing-md); margin: var(--enriched-spacing-xxl) 0; justify-content: center; } @media (max-width:768px) { .enriched-article-title { font-size: 2.2rem; } .enriched-article-hero { height: 250px; } .enriched-article-content h2 { font-size: 1.7rem; } .enriched-article-meta { flex-direction: column; align-items: center; gap: var(--enriched-spacing-sm); } } .fancybox__container { --fancybox-bg: rgba(0, 0, 0, 0.88); --fancybox-color: var(--enriched-text); color: var(--enriched-text); } .fancybox__backdrop { background: rgba(0, 0, 0, 0.92); backdrop-filter: blur(var(--enriched-glass-blur)); } .fancybox__carousel { padding: 40px; } .fancybox__slide { padding: 20px; } .fancybox__image, .fancybox__content>:is(img, video, iframe) { border-radius: var(--enriched-border-radius-lg, 1rem); box-shadow: var(--enriched-shadow-xl); background: var(--enriched-surface); } .fancybox__toolbar__column:first-child { display: none; } .fancybox__toolbar__column:last-child { display: flex; gap: 10px; align-items: center; } .fancybox__toolbar__column .f-button { background: var(--enriched-surface-dark); color: var(--enriched-text); border: 1px solid var(--enriched-border-dark); } .fancybox__button { width: 44px; height: 44px; display: inline-grid; place-items: center; background: var(--enriched-surface-dark); color: var(--enriched-text); border: 1px solid var(--enriched-border-dark); border-radius: var(--enriched-border-radius-md, .75rem); transition: var(--enriched-transition-normal); backdrop-filter: blur(12px); box-shadow: var(--enriched-shadow-sm); } .fancybox__button svg { width: 20px; height: 20px; } .fancybox__button:hover { background: var(--enriched-primary); color: #fff; border-color: var(--enriched-primary-dark); transform: translateY(-1px); box-shadow: 0 8px 20px rgba(78, 106, 230, .35); } .fancybox__button:active { transform: translateY(0); background: var(--enriched-primary-dark); border-color: var(--enriched-primary-dark); } .fancybox__button:focus-visible { outline: 2px solid var(--enriched-primary-light); outline-offset: 2px; box-shadow: 0 0 0 3px color-mix(in srgb, var(--enriched-primary) 30%, transparent); } .fancybox__nav .fancybox__button { background: color-mix(in srgb, #000 40%, var(--enriched-surface) 35%); border: 1px solid color-mix(in srgb, #fff 30%, transparent); color: #fff; box-shadow: var(--enriched-shadow-lg); } .fancybox__nav .fancybox__button:hover { background: var(--enriched-primary); border-color: var(--enriched-primary); color: #fff; } .fancybox__caption { text-align: center; color: var(--enriched-secondary-light); } .fancybox__caption p { margin: 0; color: var(--enriched-secondary-light); } .fancybox__thumbs { background: rgba(0, 0, 0, 0.85); padding: 16px; border-top: 1px solid rgba(255, 255, 255, .15); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08); } .fancybox__thumb { border-radius: var(--enriched-border-radius-sm, .5rem); border: 2px solid transparent; opacity: .75; transition: var(--enriched-transition-normal); box-shadow: 0 1px 4px rgba(0, 0, 0, .35); background: var(--enriched-surface-light); } .fancybox__thumb:hover { opacity: .9; border-color: var(--enriched-border); } .fancybox__thumb.is-nav-selected { opacity: 1; border-color: var(--enriched-primary); box-shadow: 0 0 0 3px color-mix(in srgb, var(--enriched-primary) 35%, transparent); } @media (max-width:640px) { .fancybox__carousel { padding: 20px; } .fancybox__slide { padding: 12px; } .fancybox__button { width: 40px; height: 40px; } .fancybox__caption { padding-top: 44px; } } .enriched-video-preview-section { width: 100%; max-width: 1400px; margin: 0 auto; padding: var(--enriched-spacing-xl); background: var(--enriched-bg); border-radius: var(--enriched-border-radius-lg); box-shadow: var(--enriched-shadow-sm); } .enriched-video-preview-container { display: flex; gap: var(--enriched-spacing-xl); height: 600px; } .enriched-video-main-player { flex: 1; min-width: 0; border-radius: var(--enriched-border-radius-lg); overflow: hidden; background: var(--enriched-surface); box-shadow: var(--enriched-shadow-md); position: relative; } .enriched-video-main-player video { width: 100%; height: 100%; object-fit: contain; background: var(--enriched-surface-dark); } .enriched-video-scroll-wheel { width: 280px; height: 100%; background: var(--enriched-surface); border-radius: var(--enriched-border-radius-lg); padding: var(--enriched-spacing-md); box-shadow: var(--enriched-shadow-sm); display: flex; flex-direction: column; } .enriched-scroll-wheel-header { padding-bottom: var(--enriched-spacing-md); border-bottom: 1px solid var(--enriched-border-light); margin-bottom: var(--enriched-spacing-md); text-align: center; } .enriched-scroll-wheel-header h3 { margin: 0; color: var(--enriched-text); font-size: var(--enriched-font-lg); font-weight: 600; } .enriched-thumbnails-container { padding: calc(var(--enriched-spacing-sm) + .15rem); flex: 1; overflow: auto; scroll-behavior: smooth; scrollbar-width: thin; scrollbar-color: var(--enriched-primary) var(--enriched-surface-light); } .enriched-thumbnails-container::-webkit-scrollbar { width: 6px; } .enriched-thumbnails-container::-webkit-scrollbar-track { background: var(--enriched-surface-light); border-radius: 3px; } .enriched-thumbnails-container::-webkit-scrollbar-thumb { background: var(--enriched-primary); border-radius: 3px; } .enriched-video-thumbnail { display: flex; align-items: center; gap: var(--enriched-spacing-md); padding: var(--enriched-spacing-md); margin-bottom: var(--enriched-spacing-sh); border-radius: var(--enriched-border-radius-md); cursor: pointer; transition: var(--enriched-transition); background: var(--enriched-surface); border: 2px solid transparent; position: relative; } .enriched-video-thumbnail:hover { background: var(--enriched-surface-dark); box-shadow: var(--enriched-shadow-sm); } .enriched-video-thumbnail.active { border-color: var(--enriched-primary); background: var(--enriched-surface-dark); box-shadow: var(--enriched-shadow-xs); } .enriched-video-thumbnail.error { border-color: var(--enriched-danger); } .enriched-thumbnail-image { width: 80px; height: 60px; border-radius: var(--enriched-border-radius-sm); overflow: hidden; background: var(--enriched-surface-light); flex-shrink: 0; position: relative; display: grid; place-items: center; } .enriched-thumbnail-image img, .enriched-thumbnail-image video { width: 100%; height: 100%; object-fit: cover; } .enriched-thumbnail-fallback { display: grid; place-items: center; width: 100%; height: 100%; color: var(--enriched-text-lighter); font-size: calc(var(--enriched-font-md) * .95); } .enriched-thumbnail-badge { position: absolute; top: 6px; right: 6px; width: 22px; height: 22px; border-radius: 50%; display: none; align-items: center; justify-content: center; font-size: .85rem; background: var(--enriched-danger); color: #fff; box-shadow: var(--enriched-shadow-xs); } .enriched-video-thumbnail.error .enriched-thumbnail-badge { display: flex; } .enriched-thumbnail-info { flex: 1; min-width: 0; } .enriched-thumbnail-title { font-weight: 600; color: var(--enriched-text); margin-bottom: .25rem; font-size: calc(var(--enriched-font-md) * .9); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .enriched-thumbnail-duration { font-size: calc(var(--enriched-font-md) * .8); color: var(--enriched-text-lighter); } .enriched-video-controls { position: absolute; bottom: var(--enriched-spacing-md); left: var(--enriched-spacing-md); right: var(--enriched-spacing-md); background: color-mix(in oklab, var(--enriched-gray-dark) 85%, transparent); border-radius: var(--enriched-border-radius-sm); padding: calc(var(--enriched-spacing-sm) + .25rem); display: flex; align-items: center; gap: var(--enriched-spacing-md); opacity: 0; transition: opacity var(--enriched-transition-fast); } .enriched-video-main-player:hover .enriched-video-controls { opacity: 1; } .control-btn { background: none; border: none; color: #fff; cursor: pointer; padding: var(--enriched-spacing-sm); border-radius: var(--enriched-border-radius-o); transition: var(--enriched-transition-fast); display: flex; align-items: center; justify-content: center; } .control-btn:hover { background: color-mix(in oklab, #fff 12%, transparent); } .progress-container { flex: 1; height: 4px; background: color-mix(in oklab, #fff 30%, transparent); border-radius: 2px; cursor: pointer; position: relative; } .progress-bar { height: 100%; background: var(--enriched-primary); border-radius: 2px; width: 0%; transition: width 100ms var(--enriched-easing); } .time-display { color: #fff; font-size: calc(var(--enriched-font-md) * .8); min-width: 100px; text-align: center; } .volume-control { display: flex; align-items: center; gap: var(--enriched-spacing-sm); } .volume-slider { width: 60px; height: 4px; background: color-mix(in oklab, #fff 30%, transparent); border-radius: 2px; cursor: pointer; position: relative; } .volume-level { height: 100%; background: #fff; border-radius: 2px; width: 0%; } .branch-loading-spinner { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 50px; height: 50px; border: 3px solid color-mix(in oklab, #fff 30%, transparent); border-top: 3px solid var(--enriched-primary); border-radius: 50%; animation: e-loading-spinner-spin 1s linear infinite; display: none; } @keyframes e-loading-spinner-spin { 0% { transform: translate(-50%, -50%) rotate(0deg); } 100% { transform: translate(-50%, -50%) rotate(360deg); } } .enriched-video-error { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); color: #fff; text-align: center; display: none; } .enriched-video-error .error-actions { display: flex; gap: var(--enriched-spacing-sm); justify-content: center; margin-top: var(--enriched-spacing-sm); } @media(max-width:1024px) { .enriched-video-preview-container { flex-direction: column; height: auto; } .enriched-video-main-player { order: 1; } .enriched-video-scroll-wheel { order: 2; width: 100%; height: auto; padding: calc(var(--enriched-spacing-sm) + .25rem) var(--enriched-spacing-md); border-radius: var(--enriched-border-radius-lg); } .enriched-thumbnails-container { display: flex; gap: var(--enriched-spacing-sh); overflow-x: auto; overflow-y: hidden; padding: var(--enriched-spacing-sm); scroll-snap-type: x proximity; -webkit-overflow-scrolling: touch; mask-image: linear-gradient(90deg, transparent 0, color-mix(in oklab, #000 60%, transparent) 16px, #000 calc(100% - 16px), transparent 100%); } .enriched-video-thumbnail { flex: 0 0 auto; margin: 0; min-width: 160px; max-width: 70vw; flex-direction: row; align-items: center; gap: var(--enriched-spacing-sh); border-radius: 12px; border-width: 1px; position: relative; contain: paint; transform: translateZ(0); transition: transform var(--enriched-transition-fast), background var(--enriched-transition-fast), border-color var(--enriched-transition-fast), box-shadow var(--enriched-transition-fast); } .enriched-video-thumbnail:hover { transform: translateY(-1px); } .enriched-video-thumbnail.active { border-color: transparent; background: var(--enriched-surface-dark); box-shadow: 0 6px 16px var(--enriched-shadow); } .enriched-video-thumbnail::after { content: ""; position: absolute; inset: 0; border: 2px solid transparent; border-radius: 12px; pointer-events: none; } .enriched-video-thumbnail.active::after { border-color: var(--enriched-primary); } .enriched-video-thumbnail.error::after { border-color: var(--enriched-danger); } .enriched-thumbnail-image { width: 96px; height: auto; aspect-ratio: 4/3; border-radius: 10px; flex-shrink: 0; display: grid; place-items: center; overflow: hidden; background: var(--enriched-surface-light); } .enriched-thumbnail-image img, .enriched-thumbnail-image video { width: 100%; height: 100%; object-fit: cover; } .enriched-thumbnail-fallback { display: grid; place-items: center; width: 100%; height: 100%; font-size: var(--enriched-font-sm); color: var(--enriched-text-lighter); } .enriched-thumbnail-info { min-width: 0; } .enriched-thumbnail-title { font-size: calc(var(--enriched-font-md) * .9); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .enriched-thumbnail-duration { font-size: calc(var(--enriched-font-md) * .8); } .enriched-thumbnail-badge { top: 4px; right: 4px; } .enriched-video-thumbnail:focus { outline: none; } .enriched-video-thumbnail:focus-visible::after { box-shadow: var(--enriched-shadow-danger); border-color: var(--enriched-focus-ring); } } @media(max-width:640px) { .enriched-video-thumbnail { min-width: 140px; } .enriched-thumbnail-image { width: 88px; } } video[playsinline], video { pointer-events: auto; } video::-webkit-media-controls-picture-in-picture-button { display: none !important; } video::-webkit-media-controls-overlay-play-button { display: none !important; } /** **/ /** ENRICHED MEDIA DESIGNER **/ /** **/ /** **/ /** ENRICHED CONTROLLER DESIGNER **/ /** **/ .enriched-settings-container { width: 100%; display: block; } .enriched-settings-header { text-align: center; margin-bottom: var(--enriched-spacing-xxl); padding: var(--enriched-spacing-xl); background: var(--enriched-surface); border-radius: var(--enriched-border-radius-lg); border: 1px solid var(--enriched-border-light); } .enriched-settings-layout { display: grid; grid-template-columns: 280px 1fr; gap: var(--enriched-spacing-xl); min-height: auto; } .enriched-settings-sidebar { background: var(--enriched-surface); border-radius: var(--enriched-border-radius-lg); border: 1px solid var(--enriched-border-light); padding: 0; height: fit-content; position: sticky; top: var(--enriched-spacing-xxxl); } .enriched-settings-tabs { padding: var(--enriched-spacing-xl); display: flex; flex-direction: column; flex-wrap: wrap; gap: var(--enriched-spacing-sm); } .enriched-settings-tab { padding: var(--enriched-spacing-md) var(--enriched-spacing-lg); border-radius: var(--enriched-border-radius-md); border: none; background: transparent; text-align: left; cursor: pointer; transition: var(--enriched-transition-fast); color: var(--enriched-text-light); font-weight: 500; box-shadow: var(--enriched-glass-shadow); text-decoration: none; } .enriched-settings-tab:hover { background: var(--enriched-primary-light); color: white; } .enriched-settings-tab.active { background: var(--enriched-primary); color: white; } .enriched-settings-tab i { margin-right: var(--enriched-spacing-md); width: 20px; text-align: center; } .enriched-settings-content { background: var(--enriched-surface); border-radius: var(--enriched-border-radius-lg); border: 1px solid var(--enriched-border-light); padding: var(--enriched-spacing-xl); } .enriched-settings-tab-pane { display: none; animation: e-enriched-settings-tab-pane-fade-in 0.3s ease; } .enriched-settings-tab-pane.active { display: block; } .enriched-settings-tab.accent { background: transparent; color: var(--enriched-accent); border: 2px dotted var(--enriched-accent); box-shadow: none; font-weight: 600; } .enriched-settings-tab.accent:hover { background: rgba(var(--enriched-accent-rgb), 0.08); color: var(--enriched-accent); border: 3px dotted var(--enriched-accent); } .enriched-settings-tab.accent.active { background: var(--enriched-accent); color: #fff; border: 2px solid var(--enriched-accent); } .enriched-settings-section { margin-bottom: var(--enriched-spacing-xxl); } .enriched-settings-section.medium-mb { margin-bottom: var(--enriched-spacing-md); } .enriched-settings-section:last-child { margin-bottom: 0; } .enriched-settings-section-title { font-size: var(--enriched-font-lg); font-weight: 600; margin-bottom: var(--enriched-spacing-lg); color: var(--enriched-text); border-bottom: 2px solid var(--enriched-primary); padding-bottom: var(--enriched-spacing-md); } .enriched-settings-grid { display: flex; flex-direction: column; gap: var(--enriched-spacing-lg); } .enriched-settings-card { background: var(--enriched-surface-dark); border-radius: var(--enriched-border-radius-md); padding: var(--enriched-spacing-lg); border: 1px solid var(--enriched-border-light); transition: var(--enriched-transition-fast); } .enriched-settings-card:hover { border-color: var(--enriched-primary-light); transform: translateY(-2px); box-shadow: var(--enriched-shadow-sm); } .enriched-flex-row { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: .25rem .75rem; } @media(max-width:640px) { .enriched-flex-row { flex-direction: column; align-items: flex-start; } } .enriched-flex-row span:first-child { font-weight: 600; } .enriched-settings-avatar { width: 120px; height: 120px; border-radius: 50%; background: linear-gradient(135deg, var(--enriched-primary), var(--enriched-secondary)); display: flex; align-items: center; justify-content: center; color: white; font-size: var(--enriched-font-2xl); font-weight: 600; margin: 0 auto var(--enriched-spacing-lg); border: 4px solid var(--enriched-surface); box-shadow: var(--enriched-shadow-md); } .enriched-settings-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: var(--enriched-spacing-md); margin-top: var(--enriched-spacing-lg); } .enriched-settings-stat { text-align: center; padding: var(--enriched-spacing-md); background: var(--enriched-surface); border-radius: var(--enriched-border-radius-md); box-shadow: var(--enriched-glass-shadow); } .enriched-settings-stat-value { font-size: var(--enriched-font-xl); font-weight: 700; color: var(--enriched-primary); } .enriched-settings-stat-label { font-size: var(--enriched-font-sm); color: var(--enriched-text-lighter); margin-top: var(--enriched-spacing-xs); } .enriched-settings-danger-zone { border: 2px solid var(--enriched-danger-light); background: color-mix(in srgb, var(--enriched-danger-light) 10%, transparent); border-radius: var(--enriched-border-radius-lg); padding: var(--enriched-spacing-xl); } .enriched-settings-danger-zone .enriched-settings-section-title { color: var(--enriched-danger); border-bottom-color: var(--enriched-danger); } @keyframes e-enriched-settings-tab-pane-fade-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } } .enriched-settings-signed-out { max-width: 768px; margin: 0 auto; text-align: center; padding: var(--enriched-spacing-xxl); background: var(--enriched-surface); border-radius: var(--enriched-border-radius-lg); border: 1px solid var(--enriched-border-light); } .enriched-settings-signed-out-icon { font-size: 4rem; color: var(--enriched-text-lighter); margin-bottom: var(--enriched-spacing-lg); } .enriched-bounce-control { background: var(--enriched-surface); border: 1px solid var(--enriched-border); border-radius: var(--enriched-border-radius-lg); padding: var(--enriched-spacing-xl); margin-top: var(--enriched-spacing-xxl); } .bounce-active { border-color: var(--enriched-success); background: color-mix(in srgb, var(--enriched-success-light) 10%, transparent); } .bounce-timer { font-family: var(--enriched-font-monospace); font-weight: 600; color: var(--enriched-success-dark); } /** **/ /** ENRICHED CONTROLLER DESIGNER **/ /** **/ /** **/ /** ENRICHED SCROLLFX DESIGNER **/ /** **/ :root { --rv-dur: 560ms; --rv-ease: cubic-bezier(.2, .7, .2, 1); --rv-stagger: 72ms; --rv-distance: 24px; --rv-scale: 1; } [data-reveal] { opacity: 0; transform: translate3d(var(--rv-x, 0), var(--rv-y, 0), 0) scale(var(--rv-scale, 1)); transition: transform var(--rv-dur) var(--rv-ease), opacity var(--rv-dur) var(--rv-ease); transition-delay: var(--rv-delay, 0ms); transform-origin: var(--rv-origin, 50% 50%); backface-visibility: hidden; will-change: transform, opacity; } [data-reveal].in { opacity: 1; transform: none; } [data-reveal="fade"] { --rv-x: 0; --rv-y: 0; --rv-scale: 1; } [data-reveal="slide-up"] { --rv-x: 0; --rv-y: var(--rv-distance); } [data-reveal="slide-down"] { --rv-x: 0; --rv-y: calc(var(--rv-distance)*-1); } [data-reveal="slide-left"] { --rv-x: var(--rv-distance); --rv-y: 0; } [data-reveal="slide-right"] { --rv-x: calc(var(--rv-distance)*-1); --rv-y: 0; } [data-reveal="zoom-in"] { --rv-scale: .95; } [data-reveal="zoom-out"] { --rv-scale: 1.05; } [data-reveal="flip-x"] { transform: rotateX(90deg); opacity: 0; transform-origin: center; } [data-reveal="flip-y"] { transform: rotateY(90deg); opacity: 0; transform-origin: center; } .reveal-3d { perspective: 1000px; } @media(prefers-reduced-motion:reduce) { [data-reveal] { transition: none !important; animation: e-none !important; } } [data-gsap-trigger][data-reveal="slide-up"] { --rv-distance: 0; } [data-gsap-trigger][data-reveal].in { transform: none; } /** **/ /** ENRICHED SCROLLFX DESIGNER **/ /** **/ /** **/ /** ENRICHED ACCESS DISPLAY **/ /** **/ .enriched-dpf-main-card.enriched-dpf-main-card-responses { display: block; } .enriched-dpf-main-card.enriched-dpf-main-card-responses::before { content: ''; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: radial-gradient(circle at 20% 80%, var(--enriched-primary-light) 0%, transparent 50%), radial-gradient(circle at 80% 20%, var(--enriched-accent-light) 0%, transparent 50%), radial-gradient(circle at 40% 40%, var(--enriched-secondary-light) 0%, transparent 50%); z-index: -1; opacity: 0.6; } .enriched-dpf-section-header { position: relative; } .enriched-dpf-section-title { display: flex; align-items: center; gap: var(--enriched-spacing-md); font-family: var(--enriched-font-display); font-size: clamp(var(--enriched-font-2xl), 4vw, var(--enriched-font-3xl)); font-weight: 800; color: var(--enriched-text); /* margin: 0 0 var(--enriched-spacing-xl) 0; */ padding: var(--enriched-spacing-xl); background: var(--enriched-surface); backdrop-filter: blur(var(--enriched-glass-blur)); border: var(--enriched-glass-border); border-radius: var(--enriched-border-radius-xl); box-shadow: var(--enriched-shadow-lg); position: relative; overflow: hidden; text-align: center; justify-content: space-between; } .enriched-dpf-section-title::before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: linear-gradient(135deg, rgba(78, 106, 230, 0.1) 0%, rgba(255, 180, 87, 0.1) 50%, rgba(47, 169, 163, 0.1) 100%); z-index: -1; } .enriched-dpf-section-title-icon { display: flex; align-items: center; justify-content: center; width: var(--enriched-spacing-20); height: var(--enriched-spacing-20); background: var(--enriched-gradient-primary); border-radius: var(--enriched-border-radius-lg); color: var(--enriched-bg); font-size: var(--enriched-font-2xl); box-shadow: var(--enriched-shadow-md); } .enriched-dpf-section-subtitle { font-size: var(--enriched-font-lg); font-weight: 500; color: var(--enriched-text-light); margin: var(--enriched-spacing-sm) 0 var(--enriched-spacing-lg) 0; padding: var(--enriched-spacing-md) var(--enriched-spacing-xl); background: var(--enriched-surface); backdrop-filter: blur(calc(var(--enriched-glass-blur) * 0.7)); border: var(--enriched-glass-border); border-radius: var(--enriched-border-radius-lg); box-shadow: 0 4px 24px rgba(0,0,0,0.06); letter-spacing: .2px; position: relative; overflow: hidden; } .enriched-dpf-section-subtitle::before { content: ''; position: absolute; inset: 0; background: linear-gradient( 135deg, rgba(78,106,230,0.06) 0%, rgba(255,180,87,0.06) 50%, rgba(47,169,163,0.06) 100% ); z-index: -1; } .enriched-dpf-sub-section { transition: all var(--enriched-transition-slow) var(--enriched-easing); } .enriched-dpf-sub-section-header { margin-bottom: var(--enriched-spacing-xl); position: relative; } .enriched-dpf-sub-section-title { font-family: var(--enriched-font-display); font-size: clamp(var(--enriched-font-xl), 3vw, var(--enriched-font-2xl)); font-weight: 700; color: var(--enriched-text); margin: 0 0 var(--enriched-spacing-lg) 0; padding: var(--enriched-spacing-lg) var(--enriched-spacing-xl); background: var(--enriched-surface); backdrop-filter: blur(var(--enriched-glass-blur)); border-left: var(--enriched-spacing-1) solid var(--enriched-primary); border-radius: var(--enriched-border-radius-lg); box-shadow: var(--enriched-shadow-md); position: relative; overflow: hidden; } .enriched-dpf-sub-section-title::before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: linear-gradient(90deg, transparent 0%, rgba(78, 106, 230, 0.05) 100%); } .enriched-dpf-sub-section-grid { display: flex; flex-direction: column; gap: var(--enriched-spacing-lg); } .enriched-dpf-text, .enriched-dpf-email, .enriched-dpf-phone, .enriched-dpf-url, .enriched-dpf-multi, .enriched-dpf-bool, .enriched-dpf-geo { margin: 0; font-size: var(--enriched-font-md); line-height: var(--enriched-line-height-normal); } .enriched-dpf-email a, .enriched-dpf-phone a, .enriched-dpf-url a { color: var(--enriched-primary); text-decoration: none; transition: all var(--enriched-transition-normal) var(--enriched-easing); padding: var(--enriched-spacing-1) var(--enriched-spacing-2); border-radius: var(--enriched-border-radius-sm); background: var(--enriched-primary-light); display: inline-flex; align-items: center; gap: var(--enriched-spacing-xs); } .enriched-dpf-email a:hover, .enriched-dpf-phone a:hover, .enriched-dpf-url a:hover { color: var(--enriched-primary-dark); background: var(--enriched-primary); color: var(--enriched-bg); transform: translateY(-1px); } .enriched-dpf-url a::after { content: '↗'; font-size: 0.8em; opacity: 0.7; } .enriched-dpf-multi { display: inline-flex; flex-wrap: wrap; gap: var(--enriched-spacing-sm); } .enriched-dpf-multi-item { padding: var(--enriched-spacing-xs) var(--enriched-spacing-sm); background: var(--enriched-accent-light); color: var(--enriched-accent-dark); border-radius: var(--enriched-border-radius-sm); font-weight: 500; font-size: var(--enriched-font-sm); } .enriched-dpf-bool { display: inline-flex; align-items: center; gap: var(--enriched-spacing-sm); padding: var(--enriched-spacing-sm) var(--enriched-spacing-md); background: var(--enriched-success-light); color: var(--enriched-success-dark); border-radius: var(--enriched-border-radius-md); font-weight: 600; border: var(--enriched-spacing-1) solid var(--enriched-success); } .enriched-dpf-bool::before { content: '✓'; font-weight: bold; font-size: var(--enriched-font-lg); } .enriched-dpf-media { margin: 0; text-align: center; } .enriched-dpf-media-thumb { width: 100%; max-height: 60vh; object-fit: cover; border-radius: var(--enriched-border-radius-lg); box-shadow: var(--enriched-shadow-md); transition: all var(--enriched-transition-normal) var(--enriched-easing); } .enriched-dpf-media-thumb:hover { transform: scale(1.05); box-shadow: var(--enriched-shadow-lg); } .enriched-dpf-media-caption { margin-top: var(--enriched-spacing-sm); font-size: var(--enriched-font-sm); color: var(--enriched-text-lighter); font-style: italic; } .enriched-dpf-json-block { background: var(--enriched-surface-dark); padding: var(--enriched-spacing-lg); border-radius: var(--enriched-border-radius-lg); border-left: var(--enriched-spacing-1) solid var(--enriched-primary); overflow-x: auto; margin: 0; font-family: var(--enriched-font-monospace); font-size: var(--enriched-font-sm); border: var(--enriched-spacing-1) solid var(--enriched-border); } .enriched-dpf-json-block code { color: var(--enriched-text); background: transparent; } @media (max-width:768px) { .enriched-dpf-main-card.enriched-dpf-main-card-responses { padding: var(--enriched-spacing-md); } .enriched-dpf-section-title { flex-direction: column; justify-content: center; text-align: center; gap: var(--enriched-spacing-md); padding: var(--enriched-spacing-lg); } .enriched-dpf-section-title-icon { width: var(--enriched-spacing-16); height: var(--enriched-spacing-16); font-size: var(--enriched-font-xl); } .enriched-dpf-sub-section-title { padding: var(--enriched-spacing-md) var(--enriched-spacing-lg); } } @media (max-width:480px) { .enriched-dpf-main-card.enriched-dpf-main-card-responses { padding: var(--enriched-spacing-sm); } .enriched-dpf-sub-section-title { font-size: var(--enriched-font-xl); padding: var(--enriched-spacing-md); } .enriched-dpf-media-grid { grid-template-columns: 1fr; } } @media (prefers-reduced-motion:reduce) { .enriched-dpf-media-thumb { transition: none; transform: none; } } @media print { .enriched-dpf-main-card.enriched-dpf-main-card-responses::before { display: none; } .enriched-dpf-section-title-icon { background: var(--enriched-text) !important; color: var(--enriched-bg) !important; -webkit-print-color-adjust: exact; print-color-adjust: exact; } } .enriched-dpf-docelement { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--enriched-spacing-lg); } .enriched-dpf-docitem { display: block; width: 100%; } .enriched-dpf-doccard { position: relative; display: grid; grid-template-columns: var(--enriched-spacing-20) 1fr auto; grid-template-areas: "icon content actions"; align-items: center; gap: var(--enriched-spacing-lg); padding: var(--enriched-spacing-xl); background: var(--enriched-bg); border-radius: var(--enriched-border-radius-xl); box-shadow: var(--enriched-shadow-lg); border: var(--enriched-spacing-1) solid var(--enriched-border-light); transition: all var(--enriched-transition-normal) var(--enriched-easing); overflow: hidden; min-height: var(--enriched-spacing-24); } .enriched-dpf-doccard:hover { transform: translateY(-4px); box-shadow: var(--enriched-shadow-xl); border-color: var(--enriched-primary-light); } .enriched-dpf-doccard-accent { position: absolute; top: 0; right: 0; width: var(--enriched-spacing-5); height: 100%; background: var(--enriched-gradient-primary); opacity: 0; transition: opacity var(--enriched-transition-normal) var(--enriched-easing); } .enriched-dpf-doccard:hover .enriched-dpf-doccard-accent { opacity: 1; } .enriched-dpf-doccard[data-kind="pdf"] .enriched-dpf-doccard-accent { background: linear-gradient(135deg, var(--enriched-danger) 0%, var(--enriched-danger-dark) 100%); } .enriched-dpf-doccard[data-kind="doc"] .enriched-dpf-doccard-accent { background: linear-gradient(135deg, var(--enriched-primary) 0%, var(--enriched-primary-dark) 100%); } .enriched-dpf-doccard[data-kind="sheet"] .enriched-dpf-doccard-accent { background: linear-gradient(135deg, var(--enriched-success) 0%, var(--enriched-success-dark) 100%); } .enriched-dpf-doccard[data-kind="ppt"] .enriched-dpf-doccard-accent { background: linear-gradient(135deg, var(--enriched-warning) 0%, var(--enriched-warning-dark) 100%); } .enriched-dpf-doccard-iconwrap { grid-area: icon; display: flex; align-items: center; justify-content: center; width: var(--enriched-spacing-20); height: var(--enriched-spacing-20); border-radius: var(--enriched-border-radius-lg); background: var(--enriched-surface-light); border: var(--enriched-spacing-1) solid var(--enriched-border-light); transition: all var(--enriched-transition-normal) var(--enriched-easing); position: relative; overflow: hidden; } .enriched-dpf-doccard:hover .enriched-dpf-doccard-iconwrap { transform: scale(1.05); border-color: var(--enriched-primary-light); background: var(--enriched-primary-light); } .enriched-dpf-doccard-iconwrap::before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: var(--enriched-gradient-primary); opacity: 0; transition: opacity var(--enriched-transition-normal) var(--enriched-easing); } .enriched-dpf-doccard[data-kind="pdf"] .enriched-dpf-doccard-iconwrap::before { background: linear-gradient(135deg, var(--enriched-danger) 0%, var(--enriched-danger-dark) 100%); } .enriched-dpf-doccard[data-kind="doc"] .enriched-dpf-doccard-iconwrap::before { background: linear-gradient(135deg, var(--enriched-primary) 0%, var(--enriched-primary-dark) 100%); } .enriched-dpf-doccard[data-kind="sheet"] .enriched-dpf-doccard-iconwrap::before { background: linear-gradient(135deg, var(--enriched-success) 0%, var(--enriched-success-dark) 100%); } .enriched-dpf-doccard[data-kind="ppt"] .enriched-dpf-doccard-iconwrap::before { background: linear-gradient(135deg, var(--enriched-warning) 0%, var(--enriched-warning-dark) 100%); } .enriched-dpf-doccard:hover .enriched-dpf-doccard-iconwrap::before { opacity: 0.1; } .enriched-dpf-doccard-iconwrap i { font-size: var(--enriched-font-2xl); color: var(--enriched-primary); position: relative; z-index: 1; transition: all var(--enriched-transition-normal) var(--enriched-easing); } .enriched-dpf-doccard:hover .enriched-dpf-doccard-iconwrap i { color: var(--enriched-primary-dark); transform: scale(1.1); } .enriched-dpf-doccard[data-kind="pdf"] .enriched-dpf-doccard-iconwrap i { color: var(--enriched-danger); } .enriched-dpf-doccard[data-kind="doc"] .enriched-dpf-doccard-iconwrap i { color: var(--enriched-primary); } .enriched-dpf-doccard[data-kind="sheet"] .enriched-dpf-doccard-iconwrap i { color: var(--enriched-success); } .enriched-dpf-doccard[data-kind="ppt"] .enriched-dpf-doccard-iconwrap i { color: var(--enriched-warning); } .enriched-dpf-doccard-content { grid-area: content; min-width: 0; flex: 1; } .enriched-dpf-doccard-name { font-family: var(--enriched-font-primary); font-weight: 700; font-size: var(--enriched-font-lg); line-height: 1.3; color: var(--enriched-text); margin: 0 0 var(--enriched-spacing-xs) 0; word-break: break-word; display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .enriched-dpf-doccard-type { font-size: var(--enriched-base-font-size); color: var(--enriched-gray); font-weight: 500; margin: 0; display: flex; align-items: center; gap: var(--enriched-spacing-xs); } .enriched-dpf-doccard-type::before { content: '•'; color: var(--enriched-primary); font-weight: bold; } .enriched-dpf-doccard[data-kind="pdf"] .enriched-dpf-doccard-type::before { color: var(--enriched-danger); } .enriched-dpf-doccard[data-kind="doc"] .enriched-dpf-doccard-type::before { color: var(--enriched-primary); } .enriched-dpf-doccard[data-kind="sheet"] .enriched-dpf-doccard-type::before { color: var(--enriched-success); } .enriched-dpf-doccard[data-kind="ppt"] .enriched-dpf-doccard-type::before { color: var(--enriched-warning); } .enriched-dpf-doccard-actions { grid-area: actions; display: flex; gap: var(--enriched-spacing-md); align-items: center; } .enriched-dpf-doc-btn { min-width: var(--enriched-spacing-24); padding: var(--enriched-spacing-sm) var(--enriched-spacing-md); border-radius: var(--enriched-border-radius-lg); font-weight: 600; font-size: var(--enriched-base-font-size); transition: all var(--enriched-transition-normal) var(--enriched-easing); text-decoration: none; display: inline-flex; align-items: center; justify-content: center; gap: var(--enriched-spacing-xs); border: var(--enriched-spacing-1) solid transparent; } .enriched-dpf-doc-btn-open { background: var(--enriched-gradient-primary); color: var(--enriched-bg); box-shadow: var(--enriched-shadow-md); } .enriched-dpf-doc-btn-open:hover { transform: translateY(-2px); box-shadow: var(--enriched-shadow-xl); background: var(--enriched-primary-dark); } .enriched-dpf-doc-btn-download { background: var(--enriched-bg); color: var(--enriched-primary); border-color: var(--enriched-primary-light); box-shadow: var(--enriched-shadow-sm); } .enriched-dpf-doc-btn-download:hover { background: var(--enriched-primary-light); transform: translateY(-2px); box-shadow: var(--enriched-shadow-md); border-color: var(--enriched-primary); } @media (max-width:768px) { .enriched-dpf-doccard { grid-template-columns: var(--enriched-spacing-16) 1fr; grid-template-areas: "icon content" "actions actions"; gap: var(--enriched-spacing-md); padding: var(--enriched-spacing-lg); min-height: var(--enriched-spacing-20); } .enriched-dpf-doccard-iconwrap { width: var(--enriched-spacing-16); height: var(--enriched-spacing-16); } .enriched-dpf-doccard-iconwrap i { font-size: var(--enriched-font-xl); } .enriched-dpf-doccard-name { font-size: var(--enriched-font-md); -webkit-line-clamp: 2; line-clamp: 2; } .enriched-dpf-doccard-actions { margin-top: var(--enriched-spacing-md); justify-content: stretch; } .enriched-dpf-doc-btn { flex: 1; min-width: auto; } } @media (max-width:480px) { .enriched-dpf-doccard { grid-template-columns: var(--enriched-spacing-12) 1fr; padding: var(--enriched-spacing-md); gap: var(--enriched-spacing-sm); min-height: var(--enriched-spacing-16); } .enriched-dpf-doccard-iconwrap { width: var(--enriched-spacing-12); height: var(--enriched-spacing-12); } .enriched-dpf-doccard-iconwrap i { font-size: var(--enriched-font-lg); } .enriched-dpf-doccard-name { font-size: calc(var(--enriched-font-md) * 0.9); -webkit-line-clamp: 2; line-clamp: 2; } .enriched-dpf-doccard-type { font-size: var(--enriched-font-sm); } .enriched-dpf-doccard-actions { flex-direction: column; gap: var(--enriched-spacing-sm); } .enriched-dpf-doc-btn { width: 100%; padding: var(--enriched-spacing-sm); } } @keyframes cardSlideIn { from { opacity: 0; transform: translateX(-20px); } to { opacity: 1; transform: translateX(0); } } .enriched-dpf-docitem { animation: cardSlideIn var(--enriched-duration-slow) var(--enriched-easing) forwards; } .enriched-dpf-doccard:focus-within { outline: var(--enriched-spacing-1) solid var(--enriched-primary); outline-offset: var(--enriched-spacing-1); } .enriched-dpf-doc-btn:focus { outline: var(--enriched-spacing-1) solid var(--enriched-primary-dark); outline-offset: var(--enriched-spacing-1); } .enriched-dpf-doccard.loading { opacity: 0.7; pointer-events: none; } .enriched-dpf-doccard.loading::after { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent); animation: loadingShimmer 1.5s infinite; } @keyframes loadingShimmer { 0% { transform: translateX(-100%); } 100% { transform: translateX(100%); } } .rtc-badge-row { display: flex; gap: var(--enriched-spacing-md); flex-wrap: wrap; align-items: center; } .enriched-dpf-badge { display: inline-flex; align-items: center; gap: var(--enriched-spacing-sm); padding: var(--enriched-spacing-xs) var(--enriched-spacing-md); background: var(--enriched-surface-light); color: var(--enriched-gray-dark); border-radius: var(--enriched-border-radius-xxl); font-size: calc(var(--enriched-base-font-size) * 0.9); font-weight: 500; border: var(--enriched-spacing-1) solid var(--enriched-border-light); transition: all var(--enriched-transition-fast) var(--enriched-easing); white-space: nowrap; } .enriched-dpf-badge:hover { background: var(--enriched-primary-light); border-color: var(--enriched-primary-light); color: var(--enriched-primary-dark); transform: translateY(-1px); box-shadow: var(--enriched-shadow-sm); } .enriched-dpf-badge i { font-size: calc(var(--enriched-base-font-size) * 0.8); color: var(--enriched-primary); transition: transform var(--enriched-transition-fast) var(--enriched-easing); } .enriched-dpf-badge:hover i { transform: scale(1.1); } .enriched-dpf-badge:nth-child(1) i { color: var(--enriched-primary); } .enriched-dpf-badge:nth-child(2) i { color: var(--enriched-accent); } .enriched-dpf-badge:nth-child(3) i { color: var(--enriched-secondary); } .enriched-dpf-badge:nth-child(4) i { color: var(--enriched-gray); } .enriched-dpf-badge:nth-child(5) i{ color:var(--enriched-success); } .enriched-dpf-badge:nth-child(6) i{ color:var(--enriched-danger); } .enriched-dpf-badge:nth-child(7) i{ color:var(--enriched-warning); } .enriched-dpf-badge:nth-child(8) i{ color:var(--enriched-info); } .enriched-dpf-badge:nth-child(9) i{ color:var(--enriched-secondary); } .enriched-dpf-badge:nth-child(10) i{ color:var(--enriched-text-lighter); } .enriched-dpf-badge:nth-child(11) i{ color:var(--enriched-text); } .enriched-dpf-badge:nth-child(12) i{ color:var(--enriched-surface-light); } .enriched-dpf-badge:has(i.fa-circle-check) { background: var(--enriched-success-light); border-color: var(--enriched-success-light); color: var(--enriched-success-dark); } .enriched-dpf-badge:has(i.fa-clock) { background: var(--enriched-accent-light); border-color: var(--enriched-accent-light); color: var(--enriched-accent-dark); } @media (max-width:768px) { .rtc-badge-row { gap: var(--enriched-spacing-sm); } .enriched-dpf-badge { font-size: calc(var(--enriched-base-font-size) * 0.85); padding: var(--enriched-spacing-xxs) var(--enriched-spacing-sm); } } @media (max-width:480px) { .rtc-badge-row { justify-content: center; } .enriched-dpf-badge { font-size: calc(var(--enriched-base-font-size) * 0.8); padding: calc(var(--enriched-spacing-xxs) * 0.8) var(--enriched-spacing-sm); } } .enriched-dpf-badge:focus { outline: var(--enriched-spacing-1) solid var(--enriched-primary); outline-offset: var(--enriched-spacing-1); } @media print { .enriched-dpf-badge { background: transparent; border: var(--enriched-spacing-1) solid var(--enriched-text); } } .enriched-dpf-card { background: var(--enriched-surface); border-radius: var(--enriched-border-radius-lg); padding: var(--enriched-spacing-lg); box-shadow: var(--enriched-shadow-sm); border: var(--enriched-glass-border); backdrop-filter: blur(var(--enriched-glass-blur)); transition: all var(--enriched-transition-normal) var(--enriched-easing); display: flex; flex-direction: column; gap: var(--enriched-spacing-sm); } .enriched-dpf-card:hover { transform: translateY(-2px); box-shadow: var(--enriched-shadow-md); } .enriched-dpf-card-title { font-family: var(--enriched-font-display); font-size: var(--enriched-font-lg); font-weight: 600; color: var(--enriched-text); } .enriched-dpf-card-body { font-size: var(--enriched-font-md); line-height: var(--enriched-line-height-normal); color: var(--enriched-text-light); } .enriched-dpf-filecard { display: flex; align-items: center; gap: var(--enriched-spacing-md); padding: var(--enriched-spacing-md); background: var(--enriched-surface); border-radius: var(--enriched-border-radius-lg); border: var(--enriched-glass-border); backdrop-filter: blur(var(--enriched-glass-blur)); transition: all var(--enriched-transition-normal) var(--enriched-easing); margin-bottom: var(--enriched-spacing-sm); } .enriched-dpf-filecard:hover { transform: translateY(-2px); box-shadow: var(--enriched-shadow-md); background: var(--enriched-surface-dark); } .enriched-dpf-filecard-icon { display: flex; align-items: center; justify-content: center; width: var(--enriched-spacing-12); height: var(--enriched-spacing-12); background: var(--enriched-primary-light); border-radius: var(--enriched-border-radius-md); color: var(--enriched-primary-dark); font-size: var(--enriched-font-lg); } .enriched-dpf-filecard-meta { flex: 1; min-width: 0; } .enriched-dpf-filecard-name { font-weight: 600; color: var(--enriched-text); margin-bottom: var(--enriched-spacing-xs); word-break: break-word; } .enriched-dpf-filecard-actions { display: flex; gap: var(--enriched-spacing-sm); align-items: center; } .enriched-dpf-filecard-actions a { color: var(--enriched-primary); text-decoration: none; font-weight: 500; font-size: var(--enriched-font-sm); transition: color var(--enriched-transition-fast) var(--enriched-easing); } .enriched-dpf-filecard-actions a:hover { color: var(--enriched-primary-dark); } .enriched-dpf-filecard-actions .sep { color: var(--enriched-text-lighter); font-size: var(--enriched-font-sm); } .enriched-dpf-filegrid { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--enriched-spacing-sm); } .enriched-dpf-kind-image .enriched-dpf-filecard-icon { background: var(--enriched-success-light); color: var(--enriched-success-dark); } .enriched-dpf-kind-video .enriched-dpf-filecard-icon { background: var(--enriched-warning-light); color: var(--enriched-warning-dark); } .enriched-dpf-kind-pdf .enriched-dpf-filecard-icon { background: var(--enriched-danger-light); color: var(--enriched-danger-dark); } .enriched-dpf-kind-doc .enriched-dpf-filecard-icon { background: var(--enriched-info-light); color: var(--enriched-info-dark); } .enriched-dpf-kind-sheet .enriched-dpf-filecard-icon { background: var(--enriched-success-light); color: var(--enriched-success-dark); } .enriched-dpf-kind-ppt .enriched-dpf-filecard-icon { background: var(--enriched-accent-light); color: var(--enriched-accent-dark); } .enriched-dpf-kind-archive .enriched-dpf-filecard-icon { background: var(--enriched-gray-light); color: var(--enriched-gray-dark); } .enriched-dpf-kind-other .enriched-dpf-filecard-icon { background: var(--enriched-surface-light); color: var(--enriched-text-lighter); } .enriched-dpf-media-video-thumb { width: 100%; height: 200px; background: linear-gradient(135deg, var(--enriched-primary-light), var(--enriched-secondary-light)); border-radius: var(--enriched-border-radius-lg); display: flex; align-items: center; justify-content: center; color: var(--enriched-bg); font-size: var(--enriched-font-2xl); position: relative; overflow: hidden; } .enriched-dpf-media-video-thumb::before { content: '▶'; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); background: rgba(255, 255, 255, 0.9); width: var(--enriched-spacing-16); height: var(--enriched-spacing-16); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: var(--enriched-font-lg); } .enriched-flexs-grid.auto-height { display: flex; flex-direction: column; gap: var(--enriched-spacing-md); } @media (max-width: 768px) { .enriched-dpf-filecard { flex-direction: column; align-items: flex-start; text-align: left; } .enriched-dpf-filecard-actions { align-self: stretch; justify-content: space-between; } .enriched-dpf-card { padding: var(--enriched-spacing-md); } } @media (max-width: 480px) { .enriched-dpf-filecard { padding: var(--enriched-spacing-sm); } .enriched-dpf-filecard-actions { flex-direction: column; gap: var(--enriched-spacing-xs); } .enriched-dpf-filecard-actions .sep { display: none; } } /** **/ /** ENRICHED ACCESS DISPLAY **/ /** **/