/* 
 * Websly Theme 2.0 - Advanced Background & Texture Effects
 * performance-optimized CSS-only effects using semantic tokens.
 */

:root {
    --ws-glass-opacity: 0.72;
    --ws-blur-amount: 18px;
    --ws-fx-color-1-rgb: var(--theme-accent-rgb, 37, 99, 235);
    --ws-fx-color-2-rgb: var(--theme-accent-secondary-rgb, var(--theme-accent-rgb, 37, 99, 235));
    --ws-fx-color-3-rgb: var(--theme-accent-tertiary-rgb, var(--theme-accent-rgb, 37, 99, 235));
    --ws-fx-text-rgb: var(--text-base-rgb);
    --ws-fx-highlight-rgb: 255, 255, 255;
    --ws-fx-shadow-rgb: 15, 23, 42;
    --ws-fx-base-rgb: var(--bg-base-rgb);
    --ws-fx-surface-rgb: var(--bg-surface-rgb);
    --ws-fx-vignette-rgb: var(--text-base-rgb);
    --ws-fx-surface-alpha: 0.96;
    --ws-fx-base-alpha: 0.98;
    --ws-fx-grain-opacity: 0.042;
    --ws-fx-pattern-opacity: 0.095;
    --ws-fx-pattern-spot-opacity: 0.11;
    --ws-fx-isometric-opacity: 0.10;
    --ws-fx-isometric-accent-opacity: 0.13;
    --ws-fx-vignette-opacity: 0.16;
    --ws-fx-divider-opacity: 0.22;
    --ws-fx-gradient-opacity-a: 0.16;
    --ws-fx-gradient-opacity-b: 0.12;
    --ws-fx-gradient-opacity-c: 0.09;
    --ws-fx-neumorph-shadow-alpha: 0.09;
    --ws-fx-neumorph-highlight-alpha: 0.84;
    --ws-fx-neumorph-inset-shadow-alpha: 0.05;
    --ws-fx-neumorph-inset-highlight-alpha: 0.42;
}

.dark {
    --ws-glass-opacity: 0.16;
    --ws-blur-amount: 20px;
    --ws-fx-highlight-rgb: 255, 255, 255;
    --ws-fx-shadow-rgb: 0, 0, 0;
    --ws-fx-base-rgb: var(--bg-base-rgb);
    --ws-fx-surface-rgb: var(--bg-strong-rgb, var(--bg-surface-rgb));
    --ws-fx-vignette-rgb: 0, 0, 0;
    --ws-fx-surface-alpha: 0.92;
    --ws-fx-base-alpha: 0.96;
    --ws-fx-grain-opacity: 0.052;
    --ws-fx-pattern-opacity: 0.10;
    --ws-fx-pattern-spot-opacity: 0.13;
    --ws-fx-isometric-opacity: 0.12;
    --ws-fx-isometric-accent-opacity: 0.16;
    --ws-fx-vignette-opacity: 0.22;
    --ws-fx-divider-opacity: 0.18;
    --ws-fx-gradient-opacity-a: 0.20;
    --ws-fx-gradient-opacity-b: 0.15;
    --ws-fx-gradient-opacity-c: 0.11;
    --ws-fx-neumorph-shadow-alpha: 0.18;
    --ws-fx-neumorph-highlight-alpha: 0.08;
    --ws-fx-neumorph-inset-shadow-alpha: 0.12;
    --ws-fx-neumorph-inset-highlight-alpha: 0.05;
}

.ws-effect-host {
    position: relative;
    overflow: hidden;
    isolation: isolate;
    background-color: rgb(var(--ws-fx-surface-rgb) / var(--ws-fx-surface-alpha));
}

.ws-effect-host::before,
.ws-effect-host::after {
    content: "";

    position: absolute;
    inset: 0;
    pointer-events: none;
    border-radius: inherit;
    z-index: 0;
}

.ws-effect-host>* {
    position: relative;
    z-index: 1;
}

.websly-fx-container.ws-effect-host {
    overflow: hidden;
    isolation: isolate;
    box-shadow: none;
}

/* 1. Mesh Gradients - Fluid multi-color blobs */
.ws-effect-mesh {
    position: relative;
    background:
        linear-gradient(180deg, rgb(var(--ws-fx-surface-rgb) / var(--ws-fx-surface-alpha)) 0%, rgb(var(--ws-fx-base-rgb) / var(--ws-fx-base-alpha)) 100%),
        radial-gradient(circle at 0% 0%, rgb(var(--ws-fx-color-1-rgb) / var(--ws-fx-gradient-opacity-a)) 0%, transparent 50%),
        radial-gradient(circle at 100% 0%, rgb(var(--ws-fx-color-2-rgb) / var(--ws-fx-gradient-opacity-b)) 0%, transparent 44%),
        radial-gradient(circle at 50% 100%, rgb(var(--ws-fx-color-3-rgb) / var(--ws-fx-gradient-opacity-c)) 0%, transparent 54%);
}

.ws-effect-mesh::before {
    background:
        radial-gradient(circle at 18% 18%, rgb(var(--ws-fx-color-1-rgb) / calc(var(--ws-fx-gradient-opacity-a) + 0.10)) 0%, transparent 32%),
        radial-gradient(circle at 78% 24%, rgb(var(--ws-fx-color-2-rgb) / calc(var(--ws-fx-gradient-opacity-b) + 0.08)) 0%, transparent 28%),
        radial-gradient(circle at 72% 78%, rgb(var(--ws-fx-color-3-rgb) / calc(var(--ws-fx-gradient-opacity-c) + 0.08)) 0%, transparent 34%);
    filter: blur(48px);
    opacity: 0.96;
}

.ws-effect-mesh::after {
    inset: -10%;
    background:
        radial-gradient(circle at 50% 50%, rgb(var(--ws-fx-highlight-rgb) / 0.16) 0%, transparent 36%),
        radial-gradient(circle at 50% 50%, rgb(var(--ws-fx-color-1-rgb) / calc(var(--ws-fx-gradient-opacity-a) + 0.04)) 0%, transparent 58%);
    filter: blur(72px);
}

/* 2. Aurora/Glow - Soft radial light spill */
.ws-effect-aurora {
    position: relative;
    overflow: hidden;
    background:
        linear-gradient(180deg, color-mix(in srgb, var(--bg-surface) 94%, transparent) 0%, color-mix(in srgb, var(--bg-base) 98%, transparent) 100%),
        radial-gradient(circle at 18% 18%, color-mix(in srgb, var(--theme-accent) 22%, transparent) 0%, transparent 42%),
        radial-gradient(circle at 84% 12%, color-mix(in srgb, var(--accent-secondary, var(--theme-accent)) 20%, transparent) 0%, transparent 36%);
    background-color: color-mix(in srgb, var(--bg-surface) 96%, transparent);
}

.ws-effect-aurora::before {
    content: "";

    position: absolute;
    inset: -35%;
    background:
        radial-gradient(circle at 24% 28%, color-mix(in srgb, var(--theme-accent) 28%, transparent) 0%, transparent 24%),
        radial-gradient(circle at 74% 24%, color-mix(in srgb, var(--accent-secondary, var(--theme-accent)) 24%, transparent) 0%, transparent 22%),
        radial-gradient(circle at 52% 72%, color-mix(in srgb, var(--accent-tertiary, var(--theme-accent)) 24%, transparent) 0%, transparent 24%);
    animation: ws-aurora 18s ease-in-out infinite alternate;
    z-index: 0;
    pointer-events: none;
    filter: blur(72px);
    opacity: 0.98;
}

.ws-effect-aurora::after {
    background:
        radial-gradient(circle at 18% 20%, color-mix(in srgb, var(--theme-accent) 14%, transparent) 0%, transparent 18%),
        radial-gradient(circle at 80% 18%, color-mix(in srgb, white 16%, transparent) 0%, transparent 16%),
        radial-gradient(circle at 78% 76%, color-mix(in srgb, var(--accent-secondary, var(--theme-accent)) 14%, transparent) 0%, transparent 18%),
        radial-gradient(circle at 44% 72%, color-mix(in srgb, var(--accent-tertiary, var(--theme-accent)) 16%, transparent) 0%, transparent 20%);
    filter: blur(96px);
    opacity: 0.92;
}

@keyframes ws-aurora {
    0% {
        transform: translate(0, 0);
    }

    33% {
        transform: translate(-5%, 5%);
    }

    66% {
        transform: translate(5%, -5%);
    }

    100% {
        transform: translate(0, 0);
    }
}

/* 3. Noise & Grain - Subtle static overlay */
.ws-effect-noise {
    position: relative;
    background: linear-gradient(180deg, rgb(var(--ws-fx-surface-rgb) / var(--ws-fx-surface-alpha)) 0%, rgb(var(--ws-fx-base-rgb) / var(--ws-fx-base-alpha)) 100%);
}

.ws-effect-noise::before {
    background:
        radial-gradient(circle at 18% 14%, rgb(var(--ws-fx-color-1-rgb) / calc(var(--ws-fx-gradient-opacity-a) * 0.48)) 0%, transparent 34%),
        radial-gradient(circle at 86% 82%, rgb(var(--ws-fx-color-2-rgb) / calc(var(--ws-fx-gradient-opacity-b) * 0.42)) 0%, transparent 30%);
    filter: blur(46px);
    opacity: 0.82;
}

.ws-effect-noise::after {
    content: "";

    position: absolute;
    inset: 0;
    opacity: var(--ws-fx-grain-opacity);
    pointer-events: none;
    z-index: 0;
    border-radius: inherit;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 400 400' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E");
}

/* 4. Glassmorphism - Semi-transparent blur layer */
.ws-effect-glass {
    background:
        linear-gradient(180deg, color-mix(in srgb, white 32%, transparent) 0%, color-mix(in srgb, var(--bg-surface) 82%, transparent) 18%, color-mix(in srgb, var(--bg-surface) 90%, transparent) 56%, color-mix(in srgb, var(--bg-base) 94%, transparent) 100%),
        radial-gradient(circle at 18% 10%, color-mix(in srgb, var(--theme-accent) 14%, transparent) 0%, transparent 28%),
        radial-gradient(circle at 84% 16%, color-mix(in srgb, var(--accent-secondary, var(--theme-accent)) 12%, transparent) 0%, transparent 26%);
    background-color: color-mix(in srgb, var(--bg-surface) 88%, transparent);
    backdrop-filter: blur(var(--ws-blur-amount)) saturate(1.8);
    -webkit-backdrop-filter: blur(var(--ws-blur-amount)) saturate(1.8);
    border: 1px solid color-mix(in srgb, white 18%, transparent);
    box-shadow: inset 0 1px 0 color-mix(in srgb, white 36%, transparent), 0 18px 40px color-mix(in srgb, black 12%, transparent), inset 0 -12px 24px color-mix(in srgb, black 4%, transparent);
}

.ws-effect-glass::before {
    background:
        linear-gradient(180deg, color-mix(in srgb, white 24%, transparent), transparent 36%),
        radial-gradient(circle at 18% 10%, color-mix(in srgb, var(--theme-accent) 12%, transparent) 0%, transparent 28%);
    opacity: 0.92;
}

.ws-effect-glass::after {
    background:
        linear-gradient(120deg, transparent 18%, color-mix(in srgb, white 16%, transparent) 34%, color-mix(in srgb, white 10%, transparent) 44%, transparent 58%),
        radial-gradient(circle at 74% 76%, color-mix(in srgb, var(--accent-secondary, var(--theme-accent)) 10%, transparent) 0%, transparent 24%);
    opacity: 0.86;
}

/* 5. Neumorphism - Dual shadows for molded look */
.ws-effect-neumorphic {
    background:
        linear-gradient(145deg, color-mix(in srgb, white 28%, var(--bg-surface)) 0%, color-mix(in srgb, var(--bg-surface) 94%, transparent) 26%, color-mix(in srgb, var(--bg-base) 98%, transparent) 100%);
    background-color: color-mix(in srgb, var(--bg-surface) 96%, transparent);
    box-shadow:
        18px 18px 34px color-mix(in srgb, black 12%, transparent),
        -16px -16px 30px color-mix(in srgb, white 42%, transparent),
        inset 1px 1px 0 color-mix(in srgb, white 28%, transparent),
        inset -10px -10px 22px color-mix(in srgb, black 6%, transparent);
    border: 1px solid color-mix(in srgb, white 16%, transparent);
}

.ws-effect-neumorphic::before {
    background:
        radial-gradient(circle at 20% 14%, color-mix(in srgb, white 28%, transparent) 0%, transparent 32%),
        radial-gradient(circle at 80% 84%, color-mix(in srgb, var(--theme-accent) 12%, transparent) 0%, transparent 28%);
    opacity: 0.92;
}

.ws-effect-neumorphic::after {
    inset: 1px;
    border-radius: inherit;
    background: linear-gradient(180deg, transparent 0%, color-mix(in srgb, black 7%, transparent) 100%);
    opacity: 0.5;
}

/* 6. Geometric/Dot Grid */
.ws-effect-geometric {
    background-color: color-mix(in srgb, var(--bg-surface) 96%, transparent);
    background-image:
        linear-gradient(color-mix(in srgb, var(--text-strong) 10%, transparent) 1px, transparent 1px),
        linear-gradient(90deg, color-mix(in srgb, var(--text-strong) 10%, transparent) 1px, transparent 1px),
        radial-gradient(circle at center, color-mix(in srgb, var(--theme-accent) 24%, transparent) 0, color-mix(in srgb, var(--theme-accent) 24%, transparent) 1.4px, transparent 2px);
    background-size: 28px 28px, 28px 28px, 28px 28px;
    background-position: 0 0, 0 0, 14px 14px;
}

.ws-effect-geometric::before {
    background:
        radial-gradient(circle at 18% 16%, color-mix(in srgb, var(--theme-accent) 14%, transparent) 0%, transparent 24%),
        radial-gradient(circle at 84% 84%, color-mix(in srgb, var(--accent-tertiary, var(--theme-accent)) 14%, transparent) 0%, transparent 22%);
    filter: blur(52px);
    opacity: 0.9;
}

.ws-effect-isometric {
    background-color: rgb(var(--ws-fx-surface-rgb) / var(--ws-fx-surface-alpha));
    background-image:
        linear-gradient(30deg, rgb(var(--ws-fx-text-rgb) / var(--ws-fx-isometric-opacity)) 12%, transparent 12.5%, transparent 87%, rgb(var(--ws-fx-text-rgb) / var(--ws-fx-isometric-opacity)) 87.5%, rgb(var(--ws-fx-text-rgb) / var(--ws-fx-isometric-opacity))),
        linear-gradient(150deg, rgb(var(--ws-fx-text-rgb) / var(--ws-fx-isometric-opacity)) 12%, transparent 12.5%, transparent 87%, rgb(var(--ws-fx-text-rgb) / var(--ws-fx-isometric-opacity)) 87.5%, rgb(var(--ws-fx-text-rgb) / var(--ws-fx-isometric-opacity))),
        linear-gradient(90deg, rgb(var(--ws-fx-color-2-rgb) / var(--ws-fx-isometric-accent-opacity)) 2%, transparent 2.5%, transparent 97%, rgb(var(--ws-fx-color-2-rgb) / var(--ws-fx-isometric-accent-opacity)) 97.5%, rgb(var(--ws-fx-color-2-rgb) / var(--ws-fx-isometric-accent-opacity)));
    background-size: 36px 62px;
    background-position: 0 0, 0 0, 18px 31px;
}

.ws-effect-paper {
    background: linear-gradient(180deg, color-mix(in srgb, var(--bg-subtle, var(--bg-surface)) 96%, white 4%) 0%, color-mix(in srgb, var(--bg-surface) 96%, transparent) 52%, color-mix(in srgb, var(--bg-base) 98%, transparent) 100%);
    background-color: color-mix(in srgb, var(--bg-surface) 98%, transparent);
}

.ws-effect-paper::before {
    background:
        linear-gradient(0deg, color-mix(in srgb, var(--text-strong) 3%, transparent), color-mix(in srgb, var(--text-strong) 3%, transparent)),
        repeating-linear-gradient(0deg, transparent 0 3px, color-mix(in srgb, var(--text-strong) 4%, transparent) 3px 4px);
    mix-blend-mode: multiply;
    opacity: 0.88;
}

.ws-effect-paper::after {
    opacity: calc(var(--ws-fx-grain-opacity) * 1.9);
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 300 300' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.9'/%3E%3C/svg%3E");
}

.ws-effect-vignette {
    background:
        linear-gradient(180deg, color-mix(in srgb, var(--bg-surface) 94%, transparent) 0%, color-mix(in srgb, var(--bg-base) 98%, transparent) 100%),
        radial-gradient(circle at 24% 18%, color-mix(in srgb, var(--theme-accent) 14%, transparent) 0%, transparent 28%),
        radial-gradient(circle at 76% 82%, color-mix(in srgb, var(--accent-secondary, var(--theme-accent)) 12%, transparent) 0%, transparent 28%);
    background-color: color-mix(in srgb, var(--bg-surface) 96%, transparent);
}

.ws-effect-vignette::before {
    background: radial-gradient(circle at center, transparent 24%, color-mix(in srgb, white 10%, transparent) 54%, transparent 72%);
    opacity: 0.9;
}

.ws-effect-vignette::after {
    background: radial-gradient(circle at center, transparent 38%, color-mix(in srgb, black 22%, transparent) 100%);
    opacity: 0.92;
}

.ws-effect-wave-divider,
.ws-effect-wave-blob {
    background:
        linear-gradient(180deg, color-mix(in srgb, var(--bg-surface) 94%, transparent) 0%, color-mix(in srgb, var(--bg-base) 98%, transparent) 100%),
        radial-gradient(circle at 18% 18%, color-mix(in srgb, var(--theme-accent) 14%, transparent) 0%, transparent 30%),
        radial-gradient(circle at 82% 18%, color-mix(in srgb, var(--accent-secondary, var(--theme-accent)) 12%, transparent) 0%, transparent 28%);
    background-color: color-mix(in srgb, var(--bg-surface) 96%, transparent);
}

.ws-effect-wave-divider::before,
.ws-effect-wave-blob::before {
    top: auto;
    bottom: -12%;
    height: 54%;
    background:
        radial-gradient(ellipse at 12% 0%, color-mix(in srgb, var(--theme-accent) 24%, transparent) 0%, transparent 58%),
        radial-gradient(ellipse at 50% 12%, color-mix(in srgb, white 22%, transparent) 0%, transparent 62%),
        radial-gradient(ellipse at 88% 0%, color-mix(in srgb, var(--accent-tertiary, var(--theme-accent)) 18%, transparent) 0%, transparent 56%);
    filter: blur(28px);
    opacity: 0.96;
}

.ws-effect-wave-divider::after,
.ws-effect-wave-blob::after {
    inset: -10% 12% auto;
    height: 38%;
    background: radial-gradient(ellipse at 50% 0%, color-mix(in srgb, var(--accent-secondary, var(--theme-accent)) 18%, transparent) 0%, transparent 64%);
    filter: blur(36px);
    opacity: 0.92;
}

.ws-effect-wave-divider::before {
    bottom: -16%;
    height: 48%;
}

.ws-effect-wave-divider::after {
    inset: auto 12% -12%;
    height: 30%;
    box-shadow: 0 0 15px rgb(var(--ws-fx-color-1-rgb) / 0.08);
}

.ws-effect-wave-blob::before {
    bottom: -8%;
    height: 62%;
}

.ws-effect-wave-blob::after {
    inset: 38% -8% -16%;
    height: auto;
    background:
        radial-gradient(circle at 28% 42%, color-mix(in srgb, var(--theme-accent) 16%, transparent) 0%, transparent 24%),
        radial-gradient(circle at 72% 34%, color-mix(in srgb, var(--accent-secondary, var(--theme-accent)) 16%, transparent) 0%, transparent 22%),
        radial-gradient(circle at 52% 72%, color-mix(in srgb, var(--accent-tertiary, var(--theme-accent)) 14%, transparent) 0%, transparent 24%);
}

/* 7. Soft Top Gradient */
.ws-effect-grad-top {
    background: linear-gradient(to bottom, rgb(var(--ws-fx-color-1-rgb) / calc(var(--ws-fx-gradient-opacity-a) * 0.52)), rgb(var(--ws-fx-surface-rgb) / var(--ws-fx-surface-alpha)) 42%, rgb(var(--ws-fx-base-rgb) / var(--ws-fx-base-alpha)) 100%);
}

/* 8. Minimal Border Glow */
.ws-effect-border-glow {
    position: relative;
    border: 1px solid rgb(var(--ws-fx-color-1-rgb) / 0.20);
    box-shadow: 0 0 15px rgb(var(--ws-fx-color-1-rgb) / 0.08);
}

.ws-effect-border-glow:hover {
    border-color: rgb(var(--ws-fx-color-1-rgb) / 0.40);
    box-shadow: 0 0 25px rgb(var(--ws-fx-color-1-rgb) / 0.14);
}

/* 9. Depth Layer (Subtle inner shadow) */
.ws-effect-depth {
    box-shadow: inset 0 2px 10px rgb(var(--ws-fx-shadow-rgb) / 0.08);
}

.dark .ws-effect-depth {
    box-shadow: inset 0 2px 10px rgb(var(--ws-fx-shadow-rgb) / 0.32);
}

/* 10. Accent Pulse (Animated border) */
.ws-effect-pulse-border {
    position: relative;
}

.ws-effect-pulse-border::after {
    content: "";
    position: absolute;
    inset: -2px;
    border: 2px solid rgb(var(--ws-fx-color-1-rgb));
    border-radius: inherit;
    opacity: 0;
    animation: ws-pulse-border 3s infinite;
}

@keyframes ws-pulse-border {
    0% {
        transform: scale(1);
        opacity: 0.5;
    }

    100% {
        transform: scale(1.05);
        opacity: 0;
    }
}

/* Utility: Reduce Motion support */
@media (prefers-reduced-motion: reduce) {

    .ws-effect-aurora::before,
    .ws-effect-pulse-border::after {
        animation: none !important;
    }
}

/* Abstract Process Illustrations */
.ws-rotate-slow {
    animation: ws-rotate 12s linear infinite;
    transform-origin: center;
}

@keyframes ws-rotate {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

.ws-dash-anim {
    stroke-dasharray: 100;
    stroke-dashoffset: 100;
    animation: ws-dash 3s ease-in-out infinite alternate;
}

@keyframes ws-dash {
    to {
        stroke-dashoffset: 0;
    }
}

.ws-scan-anim {
    animation: ws-scan 4s ease-in-out infinite;
}

@keyframes ws-scan {

    0%,
    100% {
        transform: translateY(-10px);
        opacity: 0.2;
    }

    50% {
        transform: translateY(10px);
        opacity: 1;
    }
}

/* 12. Ultra-Modern Button Presets (v5.1) */
.btn-glass-glow {
    background: rgba(var(--bg-surface-rgb), 0.4);
    backdrop-filter: blur(12px);
    border: 1px solid rgba(var(--text-base-rgb), 0.1);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    transition: all 0.5s var(--ease-out-expo);
}

.btn-glass-glow:hover {
    background: rgba(var(--bg-surface-rgb), 0.6);
    border-color: rgba(var(--theme-accent-rgb), 0.4);
    box-shadow: 0 0 20px rgba(var(--theme-accent-rgb), 0.25);
}

.btn-neon-sharp {
    background: transparent;
    border: 1px solid rgba(var(--theme-accent-rgb), 1);
    color: var(--theme-accent);
    text-shadow: 0 0 8px rgba(var(--theme-accent-rgb), 0.4);
    box-shadow: inset 0 0 0 rgba(var(--theme-accent-rgb), 0);
    transition: all 0.4s var(--ease-out-expo);
}

.btn-neon-sharp:hover {
    background: var(--theme-accent);
    color: var(--theme-text-on-accent, #fff);
    box-shadow: 0 0 25px rgba(var(--theme-accent-rgb, 37, 99, 235), 0.6);
    text-shadow: none;
}

.btn-kinetic-slide {
    position: relative;
    overflow: hidden;
    isolation: isolate;
    z-index: 1;
}

.btn-kinetic-slide::before {
    content: "";
    position: absolute;
    inset: 0;
    width: 0;
    background: var(--theme-accent);
    transition: width 0.6s var(--ease-in-out-expo);
    z-index: 0;
}

.btn-kinetic-slide:hover::before {
    width: 100%;
}

.btn-kinetic-slide:hover {
    color: var(--theme-text-on-accent, #fff);
}

.btn-ambient-bounce {
    background: rgba(var(--theme-accent-rgb), 0.1);
    color: var(--theme-accent);
    border: 1px solid transparent;
    transition: all 0.5s var(--ease-out-back);
}

.btn-ambient-bounce:hover {
    background: color-mix(in srgb, var(--theme-accent) 15%, transparent);
    box-shadow: 0 20px 40px -10px color-mix(in srgb, var(--theme-accent) 30%, transparent);
}

.btn-liquid-steel {
    background: linear-gradient(135deg, rgba(var(--text-base-rgb), 0.05) 0%, rgba(var(--text-base-rgb), 0.15) 100%);
    border: 1px solid rgba(var(--text-base-rgb), 0.1);
    position: relative;
    overflow: hidden;
}

.btn-liquid-steel::after {
    content: "";
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(circle, rgba(var(--theme-accent-rgb), 0.1) 0%, transparent 70%);
    opacity: 0;
    transition: opacity 0.6s ease;
}

.btn-liquid-steel:hover::after {
    opacity: 1;
}

.btn-liquid-steel:hover {
    border-color: rgba(var(--theme-accent-rgb), 0.3);
}

/* 14. Button Interaction Axes (5.1 Governance) */
.btn-interaction-scale {
    transition: transform 0.4s var(--ease-out-expo) !important;
}

.btn-interaction-scale:hover {
    transform: scale(1.05);
}

.btn-interaction-scale:active {
    transform: scale(0.96);
}

.btn-interaction-float {
    transition: transform 0.5s var(--ease-out-back) !important;
}

.btn-interaction-float:hover {
    transform: translateY(-4px);
}

.btn-interaction-glow {
    transition: box-shadow 0.4s ease !important;
}

.btn-interaction-glow:hover {
    box-shadow: 0 0 25px rgba(var(--theme-accent-rgb), 0.5);
}

.btn-interaction-slide-right .group-hover\:translate-x-1 {
    transform: translateX(4px);
}

/* Customized Hover Animations */
.ws-hover-bg-shift {
    transition: background-color 0.4s ease, color 0.4s ease, transform 0.4s ease;
}

.ws-hover-bg-shift:hover {
    background-color: var(--theme-accent);
    color: var(--theme-text-on-accent, #fff);
}

.ws-hover-bg-shift-static-text {
    transition: background-color 0.4s ease, transform 0.4s ease;
}

.ws-hover-bg-shift-static-text:hover {
    background-color: var(--theme-accent);
    /* Text color intentionally remains same as non-hover state */
}

/* 13. Advanced Shapes & Interactions (v5.1) */
.ws-shape-octagon {
    clip-path: polygon(30% 0%, 70% 0%, 100% 30%, 100% 70%, 70% 100%, 30% 100%, 0% 70%, 0% 30%);
}

/* Title underline only — no lift */
.ws-hover-underline .ws-h3 {
    position: relative;
    display: inline-block;
}

.ws-hover-underline .ws-h3::after {
    content: "";
    position: absolute;
    bottom: -4px;
    left: 0;
    width: 0;
    height: 2px;
    background: var(--theme-accent);
    transition: width 0.5s var(--ease-smooth);
    border-radius: 99px;
}

.ws-hover-underline:hover .ws-h3::after {
    width: 100%;
}

/* Simple lift — no underline */
.ws-hover-lift {
    transition: transform 0.5s var(--ease-smooth), box-shadow 0.5s var(--ease-smooth);
    position: relative;
}

.ws-hover-lift:hover {
    transform: translateY(-8px);
    box-shadow: var(--shadow-lg), 0 20px 40px -10px color-mix(in srgb, var(--theme-accent) 20%, transparent);
}

.ws-hover-lift-underline {
    transition: transform 0.5s var(--ease-smooth), box-shadow 0.5s var(--ease-smooth);
    position: relative;
}

.ws-hover-lift-underline:hover {
    transform: translateY(-8px);
    box-shadow: var(--shadow-lg), 0 20px 40px -10px color-mix(in srgb, var(--theme-accent) 20%, transparent);
}

.ws-hover-lift-underline .ws-h3 {
    position: relative;
    display: inline-block;
}

.ws-hover-lift-underline .ws-h3::after {
    content: "";
    position: absolute;
    bottom: -4px;
    left: 0;
    width: 0;
    height: 2px;
    background: var(--theme-accent);
    transition: width 0.5s var(--ease-smooth);
    border-radius: 99px;
}

.ws-hover-lift-underline:hover .ws-h3::after {
    width: 100%;
}

/* 15. Restored & Theme-Aware Skins (v5.1 Governance) */

/* Primary - The main brand action */
.btn-primary {
    background: var(--theme-accent);
    color: var(--theme-text-on-accent, #fff);
}

.btn-primary:hover {
    filter: brightness(1.3);
}

/* Secondary - Lower contrast branded action (Soft Border + Tint) */
.btn-secondary {
    background: color-mix(in srgb, var(--theme-accent) 8%, transparent);
    color: var(--theme-text);
    border: 1px solid rgba(var(--text-base-rgb), 0.12);
}

.btn-secondary:hover {
    background: color-mix(in srgb, var(--theme-accent) 14%, transparent);
    border-color: rgba(var(--text-base-rgb), 0.25);
}

/* CTA - High impact Call to Action */
.btn-cta {
    background: var(--theme-grad-brand);
    color: var(--theme-text-on-accent, #fff);
    position: relative;
    overflow: hidden;
}

.btn-cta::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(120deg,
            transparent,
            rgba(255, 255, 255, 0.3),
            transparent);
    transition: all 0.6s;
}

.btn-cta:hover::before {
    left: 100%;
}

.btn-cta:hover {
    filter: brightness(1.3);
}


/* Tertiary - Branded secondary accent */
.btn-tertiary {
    background: var(--theme-accent-secondary, var(--theme-accent));
    color: var(--theme-text-on-accent);
}

.btn-tertiary:hover {
    filter: brightness(1.3);
}

/* Soft - Low contrast tinted background */
.btn-soft {
    background: color-mix(in srgb, var(--theme-accent) 10%, transparent);
    color: var(--theme-accent);
    border: 1px solid transparent;
}

.btn-soft:hover {
    background: color-mix(in srgb, var(--theme-accent) 35%, transparent);
}

/* Nav Pill — clean pill for navigation links (no rest background, hover reveals) */
.nav-pill {
    border-radius: 999px;
    transition: background 0.22s ease, color 0.22s ease, border-color 0.22s ease;
}

.nav-pill:hover {
    background: color-mix(in srgb, var(--theme-accent) 10%, transparent);
    color: var(--theme-accent);
}

/* Glass - Standard Glassmorphism */
.btn-glass {
    background: rgba(var(--bg-surface-rgb), 0.4);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: var(--theme-text);
}

.btn-glass:hover {
    background: rgba(var(--bg-surface-rgb), 0.6);
    border-color: color-mix(in srgb, var(--theme-accent) 30%, transparent);
}

/* Outline - Transparent with border */
.btn-outline-dynamic {
    background: transparent;
    border: 1px solid var(--theme-accent);
    color: var(--theme-accent);
    transition: all 0.3s ease;
}

.btn-outline-dynamic:hover {
    background: var(--theme-accent);
    color: var(--theme-text-on-accent, #fff);
    filter: brightness(1.2);
}

/* Smooth Accent - Minimalist tint transition */
.btn-smooth-accent {
    background: color-mix(in srgb, var(--theme-accent) 10%, transparent);
    color: var(--theme-accent);
    border: 1px solid transparent;
    transition: all 0.3s ease;
}

.btn-smooth-accent:hover {
    background: color-mix(in srgb, var(--theme-accent) 20%, transparent);
    filter: brightness(1.2);
}

/* Link Underline - Fixed standard 5.1 implementation */
.btn-link-underline {
    background: transparent;
    color: var(--theme-accent);
    padding: 0 0 2px 0 !important;
    border-radius: 0;
    position: relative;
    font-weight: 600;
    border: none;
}

.btn-link-underline::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 1px;
    background: var(--theme-accent);
    transition: transform 0.3s ease;
    transform-origin: right;
    transform: scaleX(1);
}

.btn-link-underline:hover::after {
    transform: scaleX(0);
}

.btn-outline {
    background: transparent;
    border: 1px solid currentColor !important;
    color: var(--theme-accent);
}

.btn-outline:hover {
    background: var(--theme-accent);
    color: var(--theme-text-on-accent);
    filter: brightness(1.3);
}

.btn-ghost {
    background: transparent;
    border: 1px solid transparent !important;
    color: var(--theme-text);
}

.btn-ghost:hover {
    background: color-mix(in srgb, var(--theme-text) 8%, transparent);
    border-color: color-mix(in srgb, var(--theme-text) 15%, transparent) !important;
}

/* Borderless - Minimalist */
.btn-borderless {
    background: transparent;
    border: none;
    padding-left: 0;
    padding-right: 0;
    color: var(--theme-accent);
}

.btn-borderless:hover {
    opacity: 0.8;
}

/* Neumorphic */
.btn-neumorphic {
    background: var(--bg-surface);
    border: 1px solid rgba(var(--text-base-rgb), 0.05);
    box-shadow:
        6px 6px 12px rgba(0, 0, 0, 0.1),
        -6px -6px 12px rgba(255, 255, 255, 0.8),
        inset 0 0 0 transparent;
    transition: all 0.4s var(--ease-out-expo);
}

.btn-neumorphic:hover {
    box-shadow:
        2px 2px 4px rgba(0, 0, 0, 0.1),
        -2px -2px 4px rgba(255, 255, 255, 0.8),
        inset 2px 2px 5px rgba(0, 0, 0, 0.05);
    filter: brightness(1.02);
}

.dark .btn-neumorphic {
    box-shadow:
        6px 6px 12px rgba(0, 0, 0, 0.4),
        -6px -6px 12px rgba(255, 255, 255, 0.05);
}

/* Monochrome */
.btn-monochrome {
    background: var(--theme-text);
    color: var(--bg-base);
}

.btn-monochrome:hover {
    opacity: 0.9;
}

/* 16. Theme Gradients (OKLCH Precision - Gemini Polish) */
/* 16. Theme Gradients (OKLCH Precision - 5.1 System) */
.btn-gradient-theme {
    background: linear-gradient(135deg,
            var(--theme-accent),
            var(--accent-secondary, var(--theme-accent)));
    color: var(--theme-text-on-accent, #fff);
    border: none;
    transition: filter 0.4s var(--ease-out-expo), transform 0.3s var(--ease-out-expo);
}

.btn-gradient-theme:hover {
    filter: brightness(1.4) saturate(1.1);
}

.btn-gradient-premium {
    background: var(--theme-grad-brand-bold);
    color: var(--theme-text-on-accent);
    position: relative;
    isolation: isolate;
    z-index: 1;
}

.btn-gradient-premium::before {
    content: "";
    position: absolute;
    inset: 0;
    background: var(--theme-grad-accent-bold);
    opacity: 0;
    transition: opacity 0.5s ease;
    z-index: 0;
    border-radius: inherit;
}

.btn-gradient-premium:hover::before {
    opacity: 1;
}

/* Dynamic OKLCH Gradients using semantic ramps */
.btn-gradient-sunset {
    background: linear-gradient(135deg, #f59e0b, #ef4444);
    /* Fallback */
    background: linear-gradient(135deg,
            color-mix(in oklch, var(--theme-accent), #f59e0b 40%),
            color-mix(in oklch, var(--accent-secondary, var(--theme-accent)), #ef4444 60%));
    color: white;
}

.btn-gradient-ocean {
    background: linear-gradient(135deg, #0ea5e9, #6366f1);
    background: linear-gradient(135deg,
            color-mix(in oklch, var(--theme-accent), #0ea5e9 40%),
            color-mix(in oklch, var(--accent-secondary, var(--theme-accent)), #6366f1 60%));
    color: white;
}

.btn-gradient-matrix {
    background: linear-gradient(135deg, #22c55e, #14532d);
    color: white;
}

.btn-gradient-neon {
    background: #000;
    color: #22c55e;
    border: 1px solid #22c55e;
    box-shadow: 0 0 15px rgba(34, 197, 94, 0.4);
}

.btn-gradient-neon:hover {
    background: #22c55e;
    color: #000;
    box-shadow: 0 0 30px rgba(34, 197, 94, 0.8);
}

/* 17. 2026 Ultra-Modern Library (5.1 Governance) */

/* Glass 2026: Prismatic edge refraction & internal stroke */
.btn-glass-2026 {
    background: color-mix(in srgb, var(--bg-surface) 35%, transparent);
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
    border: 1px solid color-mix(in srgb, var(--text-base) 15%, transparent);
    box-shadow:
        inset 0 1px 0 0 color-mix(in srgb, white 20%, transparent),
        0 12px 24px -10px rgba(0, 0, 0, 0.2);
    color: var(--theme-text);
    position: relative;
    overflow: hidden;
}

.btn-glass-2026::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(125deg, transparent 40%, color-mix(in oklch, var(--theme-accent), transparent 80%) 50%, transparent 60%);
    transform: translateX(-100%);
    transition: transform 0.8s var(--ease-out-expo);
}

.btn-glass-2026:hover::after {
    transform: translateX(100%);
}

.btn-glass-2026:hover {
    border-color: color-mix(in oklch, var(--theme-accent) 40%, transparent);
    box-shadow: 0 15px 30px -10px rgba(0, 0, 0, 0.25);
}

/* Neu-Retro: Geometric brutalism with floating accent shadows */
.btn-neu-retro {
    background: var(--bg-surface);
    border: 2.5px solid var(--theme-text);
    color: var(--theme-text);
    font-weight: 800;
    box-shadow: 4px 4px 0 0 var(--theme-accent);
    transition: all 0.2s var(--ease-out-expo);
}

.btn-neu-retro:hover {
    box-shadow: 8px 8px 0 0 var(--accent-secondary, var(--theme-accent));
    filter: brightness(1.2);
}

.btn-neu-retro:active {
    transform: translate(2px, 2px);
    box-shadow: 0px 0px 0 0 var(--theme-accent);
}

/* Clay-Volumetric: Internal dimension & squishy tactile feel */
.btn-clay-volumetric {
    background: var(--theme-accent);
    color: var(--theme-text-on-accent, #fff);
    border-radius: var(--radius-xl);
    border: none;
    box-shadow:
        inset 0 -6px 8px rgba(0, 0, 0, 0.2),
        inset 0 6px 8px rgba(255, 255, 255, 0.3),
        0 8px 20px -6px rgba(var(--theme-accent-rgb), 0.5);
    transition: all 0.4s var(--ease-out-back);
}

.btn-clay-volumetric:hover {
    filter: brightness(1.15);
    box-shadow:
        inset 0 -4px 6px rgba(0, 0, 0, 0.2),
        inset 0 4px 6px rgba(255, 255, 255, 0.3),
        0 12px 28px -6px rgba(var(--theme-accent-rgb), 0.6);
}

/* Pulse-Edge: Continuous brand-color neon edge animation */
.btn-pulse-edge {
    background: var(--bg-base);
    color: var(--theme-text);
    border: 1px solid color-mix(in srgb, var(--theme-accent) 30%, transparent);
    position: relative;
    z-index: 1;
}

.btn-pulse-edge::before {
    content: "";
    position: absolute;
    inset: -1px;
    border-radius: inherit;
    padding: 1px;
    background: conic-gradient(from 0deg, var(--theme-accent), var(--accent-secondary, var(--theme-accent)), var(--theme-accent));
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    animation: ws-spin 4s linear infinite;
    opacity: 0.6;
}

@keyframes ws-spin {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

.btn-pulse-edge:hover {
    background: color-mix(in oklch, var(--theme-accent) 5%, var(--bg-base));
}

/* Prism-Shimmer: Iridescent holographic foil shift */
.btn-prism-shimmer {
    background: var(--theme-grad-brand);
    color: var(--theme-text-on-accent, #fff);
    position: relative;
    border: none;
    isolation: isolate;
    z-index: 1;
}

.btn-prism-shimmer::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(45deg,
            transparent 25%,
            rgba(255, 255, 255, 0.3) 50%,
            transparent 75%);
    background-size: 200% 200%;
    opacity: 0;
    transition: opacity 0.4s var(--ease-out-expo);
    z-index: 0;
    border-radius: inherit;
}

.btn-prism-shimmer:hover::before {
    opacity: 1;
    animation: ws-prism 1.5s var(--ease-in-out-expo) infinite;
}

/* 18. 5.1 Extension: Modern Presets */

.btn-modern-minimal {
    background: transparent;
    color: var(--theme-text);
    border: 1px solid rgba(var(--text-base-rgb), 0.15);
    transition: all 0.3s var(--ease-smooth);
}
.btn-modern-minimal:hover {
    border-color: var(--theme-accent);
}

.btn-glow-outline {
    background: transparent;
    color: var(--theme-accent);
    border: 1px solid var(--theme-accent);
    box-shadow: 0 0 10px rgba(var(--theme-accent-rgb), 0.2);
    transition: all 0.4s ease;
}
.btn-glow-outline:hover {
    box-shadow: 0 0 20px rgba(var(--theme-accent-rgb), 0.5);
    background: rgba(var(--theme-accent-rgb), 0.05);
}

.btn-brutalist {
    background: var(--theme-accent);
    color: var(--theme-text-on-accent, #fff);
    border: 2px solid #000;
    box-shadow: 4px 4px 0px #000;
    transition: all 0.1s ease;
    font-weight: 800 !important;
}
.btn-brutalist:hover {
    transform: translate(-1px, -1px);
    box-shadow: 5px 5px 0px #000;
}
.btn-brutalist:active {
    transform: translate(2px, 2px);
    box-shadow: 0px 0px 0px #000;
}

.btn-soft-shadow {
    background: var(--bg-surface);
    color: var(--text-base);
    border: 1px solid rgba(var(--text-base-rgb), 0.05);
    box-shadow: 0 4px 14px 0 rgba(0,0,0,0.05);
    transition: all 0.3s ease;
}
.btn-soft-shadow:hover {
    box-shadow: 0 6px 20px rgba(0,0,0,0.1);
}

.btn-glass-vibrant {
    background: rgba(var(--theme-accent-rgb), 0.15);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    color: var(--theme-accent);
    border: 1px solid rgba(var(--theme-accent-rgb), 0.3);
    box-shadow: 0 8px 32px 0 rgba(var(--theme-accent-rgb), 0.1);
}
.btn-glass-vibrant:hover {
    background: rgba(var(--theme-accent-rgb), 0.25);
    border-color: var(--theme-accent);
}

@keyframes ws-prism {
    0% {
        background-position: 200% 0;
    }

    100% {
        background-position: -200% 0;
    }
}

/* ── btn-gradient-primary ────────────────────────────────────────────── */
/* A monochromatic gradient variant using exclusively the primary color */
.btn-gradient-primary {
    background: linear-gradient(135deg,
            color-mix(in oklch, var(--theme-accent) 82%, white) 0%,
            var(--theme-accent) 50%,
            color-mix(in oklch, var(--theme-accent) 88%, black) 100%) !important;
    background-size: 200% 200% !important;
    color: var(--theme-text-on-accent, #fff) !important;
    border: none !important;
    transition: all var(--duration-normal) var(--ease-out-expo) !important;
    box-shadow: 0 4px 15px rgba(var(--theme-accent-rgb), 0.25);
}

.btn-gradient-primary:hover {
    background-position: 100% 100% !important;
    box-shadow: 0 8px 25px rgba(var(--theme-accent-rgb), 0.4);
    filter: brightness(1.3);
}

/*  nav-pill (Gemini Polish)  */
.nav-pill {
    background: color-mix(in srgb, var(--theme-accent) 10%, transparent) !important;
    color: var(--theme-primary-dark) !important;
    border-radius: 9999px !important;
    padding-left: 1.5rem !important;
    padding-right: 1.5rem !important;
    border: 1px solid var(--accent-weak) !important;
    transition: all var(--duration-fast) var(--ease-out-expo) !important;
    font-weight: 500 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    isolation: isolate;
    z-index: 1;
}

.nav-pill:hover {
    background: var(--theme-accent) !important;
    color: var(--theme-text-on-accent, #fff) !important;
    border-color: var(--theme-accent) !important;
    box-shadow: var(--shadow-sm);
    filter: brightness(1.3);
}

/*  btn-glass-glow (Premium Material)  */
.btn-glass-glow {
    background: rgba(255, 255, 255, 0.03) !important;
    backdrop-filter: blur(12px) saturate(180%) !important;
    -webkit-backdrop-filter: blur(12px) saturate(180%) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    color: var(--text-base) !important;
    position: relative !important;
    isolation: isolate !important;
    overflow: hidden !important;
    transition: border-color 0.4s ease, box-shadow 0.4s ease !important;
    z-index: 1;
}

.btn-glass-glow::before {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at var(--mouse-x, 50%) var(--mouse-y, 50%),
            rgba(var(--theme-accent-rgb), 0.15) 0%,
            transparent 70%);
    opacity: 0;
    transition: opacity 0.5s ease;
    z-index: 0;
    pointer-events: none;
}

.btn-glass-glow:hover::before {
    opacity: 1;
}

.btn-glass-glow:hover {
    border-color: rgba(var(--theme-accent-rgb), 0.4) !important;
    box-shadow: 0 0 25px rgba(var(--theme-accent-rgb), 0.15);
    color: var(--theme-primary-dark) !important;
}

.dark .btn-glass-glow {
    background: rgba(0, 0, 0, 0.2) !important;
    border-color: rgba(255, 255, 255, 0.05) !important;
}

/* ── INTERACTION LIBRARY (v5.1 Decoupled) ── */
.btn-interaction-lift {
    transition: transform 0.3s var(--ease-out-expo), box-shadow 0.3s var(--ease-out-expo);
}

.btn-interaction-lift:hover {
    transform: translateY(-3px) !important;
    box-shadow: 0 10px 20px -5px rgba(0, 0, 0, 0.2) !important;
}

.btn-interaction-scale {
    transition: transform 0.3s var(--ease-out-expo);
}

.btn-interaction-scale:hover {
    transform: scale(1.05) !important;
}

.btn-interaction-glow {
    transition: box-shadow 0.4s ease;
}

.btn-interaction-glow:hover {
    box-shadow: 0 0 20px rgba(var(--theme-accent-rgb), 0.4) !important;
}

.btn-interaction-slide {
    position: relative;
    overflow: hidden;
}

.btn-interaction-slide::after {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(255, 255, 255, 0.1);
    transform: translateX(-100%);
    transition: transform 0.4s ease;
    z-index: 0;
}

.btn-interaction-slide:hover::after {
    transform: translateX(0);
}

/* ── EXPANDED RADIUS LIBRARY ── */
.rounded-3xl {
    border-radius: 1.5rem !important;
}

.rounded-4xl {
    border-radius: 2rem !important;
}

/* Asymmetric Fun Options */
/* Blob: Top-Left/Bottom-Right 4rem, others 8rem */
.rounded-blob {
    border-radius: 4rem 8rem 4rem 8rem !important;
}

/* Curved TL: Sharp with one expressive rounded corner */
.rounded-curved-tl {
    border-radius: 24px 0 0 0 !important;
}

/* ─────────────────────────────────────────────────────────────────────────────
   ── 5.1 GLOBAL SHADOW-TO-GLOW (Dark Mode Governance) ──
   Ensures depth is visible in dark mode via subtle accent-colored glows.
   ───────────────────────────────────────────────────────────────────────────── */
.dark .shadow,
.dark .shadow-md,
.dark .shadow-lg,
.dark .shadow-xl,
.dark .shadow-2xl,
.dark .ws-surface-card,
.dark .ws-surface-card.shadow-2xl {
    /* Keep a very dark base shadow for structure, add accent glow for visibility */
    box-shadow: 0 20px 40px -15px rgba(0, 0, 0, 0.8), 
                0 0 25px -5px color-mix(in srgb, var(--theme-accent) 15%, transparent) !important;
}

.dark .shadow-2xl,
.dark .ws-surface-card.shadow-2xl {
    box-shadow: 0 30px 60px -12px rgba(0, 0, 0, 0.9), 
                0 0 45px -10px color-mix(in srgb, var(--theme-accent) 25%, transparent) !important;
}

/* Hover Enhancement for Glow */
.dark .ws-surface-card:hover {
    box-shadow: 0 35px 70px -15px rgba(0, 0, 0, 0.95), 
                0 0 55px -5px color-mix(in srgb, var(--theme-accent) 35%, transparent) !important;
}