@layer components{.o-surface-celest-veil{--celest-veil-width: 320px;--celest-veil-height: 160px;--celest-veil-radius: var(--ql-veil-radius, var(--radius-fluid-container, clamp(20px, 4cqi, 60px)));--celest-veil-bg: var(--ql-surface-bg, var(--surface-glass-ghost));--celest-veil-fg: var(--ql-surface-fg, var(--text));--celest-veil-bg-hover: rgba(255, 255, 255, 0.85);--celest-veil-border-color: var(--ql-veil-border-color, rgba(230, 235, 243, 0.6));--celest-veil-blur: var(--ql-veil-blur, 8px);--celest-veil-saturation: var(--ql-veil-saturation, 200%);--celest-veil-brightness: var(--ql-veil-brightness, 105%);--celest-veil-shadow: var(--elev-glass-surface);--celest-veil-shadow-hover: var(--elev-2);--celest-veil-z-index: var(--z-glass-card);position:relative;width:var(--celest-veil-width);height:var(--celest-veil-height);border-radius:var(--celest-veil-radius);z-index:var(--celest-veil-z-index);background:var(--celest-veil-bg);color:var(--celest-veil-fg);backdrop-filter:blur(var(--celest-veil-blur)) saturate(var(--celest-veil-saturation)) brightness(var(--celest-veil-brightness));-webkit-backdrop-filter:blur(var(--celest-veil-blur)) saturate(var(--celest-veil-saturation)) brightness(var(--celest-veil-brightness));border:1px solid var(--celest-veil-border-color);box-shadow:var(--celest-veil-shadow);transition:transform var(--motion-button-hover-duration) var(--motion-button-hover-easing),background var(--motion-button-hover-duration) var(--motion-button-hover-easing),box-shadow var(--motion-button-hover-duration) var(--motion-button-hover-easing),backdrop-filter var(--motion-glass-appear-duration) var(--motion-glass-appear-easing),-webkit-backdrop-filter var(--motion-glass-appear-duration) var(--motion-glass-appear-easing);will-change:backdrop-filter, transform;transform:translateZ(0)}@supports (-webkit-mask: none) or (mask-composite: exclude){.o-surface-celest-veil{border-color:transparent}.o-surface-celest-veil::before{content:"";position:absolute;inset:0;padding:1px;border-radius:inherit;background:linear-gradient(135deg, rgba(255,255,255,0.6) 0%, rgba(255,255,255,0.3) 50%, rgba(255,255,255,0.6) 100%);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);mask-composite:exclude;pointer-events:none;z-index:1;opacity:0.6;transition:opacity var(--motion-duration-slow) var(--motion-ease-glass-in)}}@media (prefers-reduced-motion: no-preference){.o-surface-celest-veil:is(:hover, :focus-within){background:var(--celest-veil-bg-hover);backdrop-filter:blur(12px) saturate(var(--celest-veil-saturation)) brightness(var(--celest-veil-brightness));-webkit-backdrop-filter:blur(12px) saturate(var(--celest-veil-saturation)) brightness(var(--celest-veil-brightness));transform:translateY(calc(-1 * var(--motion-translate-micro))) translateZ(0);box-shadow:var(--celest-veil-shadow-hover)}.o-surface-celest-veil:is(:hover, :focus-within)::before{opacity:1}}.o-surface-celest-veil--flat{backdrop-filter:none;-webkit-backdrop-filter:none;background:var(--surface-1);box-shadow:var(--elev-1);border:1px solid var(--border-0)}.o-surface-celest-veil--flat::before{display:none}.o-surface-celest-veil--flat:hover{background:var(--surface-0);box-shadow:var(--elev-2);transform:translateY(calc(-1 * var(--motion-translate-micro)))}.o-surface-celest-veil--sm{--celest-veil-width: 240px;--celest-veil-height: 120px;--celest-veil-radius: var(--radius-fluid-md)}.o-surface-celest-veil--md{--celest-veil-width: 320px;--celest-veil-height: 160px;--celest-veil-radius: var(--radius-fluid-container)}.o-surface-celest-veil--lg{--celest-veil-width: 480px;--celest-veil-height: 240px;--celest-veil-radius: var(--radius-fluid-hero)}.o-surface-celest-veil--xl{--celest-veil-width: 640px;--celest-veil-height: 320px;--celest-veil-radius: var(--radius-fluid-3xl)}.o-surface-celest-veil--primary{--celest-veil-bg: linear-gradient(85deg, var(--color-paper) 2.51%, var(--primary-50) 114%);--celest-veil-fg: var(--primary-900);--celest-veil-bg-hover: var(--primary-50);--celest-veil-border-gradient: linear-gradient(92.62deg, var(--color-paper) -2.03%, var(--primary-50) 50.64%, var(--color-paper) 101.32%);--celest-veil-shadow: var(--elev-1-primary);--celest-veil-shadow-hover: var(--elev-2-primary)}.o-surface-celest-veil--secondary{--celest-veil-bg: linear-gradient(85deg, var(--color-paper) 2.51%, var(--secondary-50) 114%);--celest-veil-fg: var(--secondary-900);--celest-veil-bg-hover: var(--secondary-50);--celest-veil-border-gradient: linear-gradient(92.62deg, var(--color-paper) -2.03%, var(--secondary-50) 50.64%, var(--color-paper) 101.32%);--celest-veil-shadow: var(--elev-1-micro);--celest-veil-shadow-hover: var(--elev-2-micro)}.o-surface-celest-veil--success{--celest-veil-bg: linear-gradient(84.2deg, var(--color-paper) 0%, var(--success-200) 133.49%);--celest-veil-fg: var(--success-700);--celest-veil-bg-hover: var(--success-50);--celest-veil-border-gradient: linear-gradient(276.46deg, var(--color-paper) 9.95%, var(--success-200) 52.2%, var(--success-50) 106.67%);--celest-veil-shadow: var(--elev-1-approve);--celest-veil-shadow-hover: var(--elev-2-approve)}.o-surface-celest-veil--warning{--celest-veil-bg: var(--warning-50);--celest-veil-fg: var(--warning-900);--celest-veil-bg-hover: var(--warning-100);--celest-veil-border-gradient: linear-gradient(92.62deg, var(--color-paper) -2.03%, var(--warning-50) 50.64%, var(--color-paper) 101.32%);--celest-veil-shadow: var(--elev-1-warning);--celest-veil-shadow-hover: var(--elev-2-warning)}.o-surface-celest-veil--danger{--celest-veil-bg: linear-gradient(84.87deg, var(--color-paper) 1.18%, var(--danger-100) 98.97%);--celest-veil-fg: var(--danger-800);--celest-veil-bg-hover: var(--danger-50);--celest-veil-border-gradient: linear-gradient(83.72deg, var(--color-paper) 0%, var(--danger-100) 59.74%, var(--color-paper) 98.97%);--celest-veil-shadow: var(--elev-1-cancel);--celest-veil-shadow-hover: var(--elev-2-cancel)}.o-surface-celest-veil--shadow-none{--celest-veil-shadow: none;--celest-veil-shadow-hover: var(--elev-1)}.o-surface-celest-veil--shadow-sm{--celest-veil-shadow: var(--elev-1);--celest-veil-shadow-hover: var(--elev-2)}.o-surface-celest-veil--shadow-md{--celest-veil-shadow: var(--elev-2);--celest-veil-shadow-hover: var(--elev-3)}.o-surface-celest-veil--shadow-lg{--celest-veil-shadow: var(--elev-3);--celest-veil-shadow-hover: var(--elev-4)}@media (prefers-reduced-motion: reduce){.o-surface-celest-veil,.o-surface-celest-veil::before{transition-duration:10ms !important;animation:none !important}}@media (prefers-contrast: high){.o-surface-celest-veil{border:2px solid var(--border-2)}}}