body { background-color: #f8fafc; }
        .bg-grid-size { background-size: 40px 40px; }
        
        ::-webkit-scrollbar { width: 6px; }
        ::-webkit-scrollbar-track { background: transparent; }
        ::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 3px; }
        
        .shimmer {
            background: linear-gradient(90deg, #f1f5f9 0%, #e2e8f0 50%, #f1f5f9 100%);
            background-size: 200% 100%;
            animation: shimmer 1.5s infinite;
        }
        @keyframes shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }

        /* --- SOFT BUTTON CSS START --- */
        .soft-btn {
            --button-raise-level: 8px; /* Slightly reduced for mobile fit */
            --press-inset: 4px;
            --press-compensated: 0px;
            --button-hover-pressure: 1.5;
            --transform-speed: 160ms;
            --radius: 12px;
            --border-width: 0px;
            --edge-aa: 0px;
            --glare-rgb: 255, 255, 255;
            --glare-alpha: 0.2;
            --glare-width: 20;

            position: relative;
            border: none;
            background: transparent;
            padding: 0;
            cursor: pointer;
            user-select: none;
            outline: none;
            -webkit-tap-highlight-color: transparent;
            display: block;
            text-decoration: none;
        }

        .soft-btn__wrapper {
            position: relative;
            display: block;
            width: 100%;
            height: 100%;
            transform-style: preserve-3d;
        }

        /* Side wall */
        .soft-btn__wrapper::before {
            content: '';
            position: absolute;
            left: 0;
            right: 0;
            bottom: 0;
            height: calc(100% - var(--button-raise-level));
            background: var(--side-color);
            border-radius: var(--radius);
            z-index: 1;
        }

        /* Face */
        .soft-btn__content {
            position: relative;
            width: 100%;
            height: calc(100% - var(--button-raise-level));
            background: var(--surface-color);
            color: var(--text-color);
            border-radius: var(--radius);
            display: flex;
            align-items: center;
            justify-content: center;
            transform: translateY(0);
            transition: transform var(--transform-speed) ease-out;
            will-change: transform;
            backface-visibility: hidden;
            transform-origin: center;
            z-index: 2;
            border: var(--border-width) solid var(--border-color);
        }

        .soft-btn__inner {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 8px;
            z-index: 4;
            width: 100%;
            height: 100%;
            pointer-events: none; /* Let clicks pass to parent */
        }

        /* Hover deformation */
        .soft-btn--middle .soft-btn__content { transform: translateY(calc(1px * var(--button-hover-pressure))); }
        .soft-btn--left .soft-btn__content { transform: skewY(calc(-1deg * var(--button-hover-pressure))); }
        .soft-btn--right .soft-btn__content { transform: skewY(calc(1deg * var(--button-hover-pressure))); }

        /* Pressed */
        .soft-btn--active .soft-btn__content {
            transform: translateY(var(--press-inset));
            transition: transform calc(var(--transform-speed) * 0.8) ease-out;
        }
        
        .soft-btn--active.soft-btn--left .soft-btn__content {
            transform: skewY(calc(-1deg * var(--button-hover-pressure))) translateY(var(--press-inset));
        }
        
        .soft-btn--active.soft-btn--right .soft-btn__content {
            transform: skewY(calc(1deg * var(--button-hover-pressure))) translateY(var(--press-inset));
        }

        /* Glare layer */
        .soft-btn__content::after {
            content: '';
            position: absolute;
            inset: 0;
            border-radius: inherit;
            pointer-events: none;
            background: linear-gradient(90deg,
                rgba(var(--glare-rgb), 0) calc(50% - var(--glare-width) * 1%),
                rgba(var(--glare-rgb), calc(var(--glare-alpha) * 0.5)) calc(50% - var(--glare-width) * 0.5%),
                rgba(var(--glare-rgb), var(--glare-alpha)) 50%,
                rgba(var(--glare-rgb), calc(var(--glare-alpha) * 0.5)) calc(50% + var(--glare-width) * 0.5%),
                rgba(var(--glare-rgb), 0) calc(50% + var(--glare-width) * 1%));
            background-size: 200% 100%;
            background-position: 50% 50%;
            opacity: 0;
            transition: opacity 160ms ease, background-position var(--transform-speed) ease;
            z-index: 3;
        }

        .soft-btn--right .soft-btn__content::after { opacity: 1; background-position: 0% 50%; }
        .soft-btn--middle .soft-btn__content::after { opacity: 1; background-position: 50% 50%; }
        .soft-btn--left .soft-btn__content::after { opacity: 1; background-position: 100% 50%; }
        .soft-btn--active .soft-btn__content::after { opacity: 1; background: rgba(var(--glare-rgb), var(--glare-alpha)); background-position: 50% 50%; }

        /* VARIANTS MAPPING */
        .variant-solid {
            --surface-color: #6366f1; /* Primary */
            --side-color: #4338ca;    /* Darker Primary */
            --text-color: #ffffff;
            --border-color: transparent;
        }
        .variant-outline {
            --surface-color: #ffffff;
            --side-color: #94a3b8;
            --text-color: #1e293b;
            --border-color: #cbd5e1;
            --border-width: 2px;
        }
        .variant-steel {
            --surface-color: #f1f5f9;
            --side-color: #94a3b8;
            --text-color: #334155;
            --border-color: #cbd5e1;
            --border-width: 1px;
        }
        /* --- SOFT BUTTON CSS END --- */