html, body {
            max-width: 100vw;
            overflow-x: hidden;
            width: 100%;
            position: relative;
        }

        #fixed-bg {
            position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: -50;
            background-color: #F0F8FF;
            background-image: linear-gradient(135deg, #000000, #050505, #000000);
            background-position: bottom right, center center;
            background-size: 85% auto, cover;
            background-repeat: no-repeat;
            opacity: 0.8;
        }
        @media (max-width: 768px) {
            #fixed-bg { background-size: 110% auto, cover; }
        }

        ::-webkit-scrollbar { width: 8px; height: 8px; }
        ::-webkit-scrollbar-track { background: transparent; }
        ::-webkit-scrollbar-thumb { background: #89CFF0; border-radius: 4px; border: 2px solid #fff; }
        
        .json-key { color: #f87171; font-weight: bold; }
        .json-string { color: #a3e635; }
        .json-number { color: #60a5fa; font-weight: bold; }
        .json-boolean { color: #c084fc; font-style: italic; }
        .json-null { color: #94a3b8; }
        
        /* Removed CRT Text Shadow and Lines */
        
        .custom-scrollbar::-webkit-scrollbar { width: 6px; }
        .custom-scrollbar::-webkit-scrollbar-thumb { background: #444; border: none; border-radius: 2px; }
        
        /* Removed .terminal-scan animation */
        
        .response-area {
            transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
            transform-origin: top center;
        }
        
        .response-area.showing {
            animation: slideInRight 0.5s ease-out, fadeInUp 0.6s ease-out;
        }
        
        .response-area.success {
            border-color: #10b981 !important;
        }
        
        .response-area.error {
            border-color: #ef4444 !important;
        }
        
        .json-key, .json-string, .json-number, .json-boolean, .json-null {
            transition: all 0.3s ease;
        }
        
        .status-indicator {
            width: 8px;
            height: 8px;
            border-radius: 50%;
            display: inline-block;
            margin-right: 8px;
        }
        
        .status-success {
            background-color: #10b981;
            box-shadow: 0 0 10px #10b981;
            animation: blink 1.5s infinite;
        }
        
        .status-error {
            background-color: #ef4444;
            box-shadow: 0 0 10px #ef4444;
            animation: blink 1.5s infinite;
        }
        
        .status-waiting {
            background-color: #f59e0b;
            box-shadow: 0 0 10px #f59e0b;
            animation: blink 1.5s infinite;
        }

        /* --- SOFT BUTTON CSS START --- */
        .soft-btn {
            --button-raise-level: 6px;
            --press-inset: 3px;
            --press-compensated: 0px;
            --button-hover-pressure: 1.5;
            --transform-speed: 160ms;
            --radius: 12px;
            --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;
        }

        .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);
            box-shadow: inset 0 0 0 1px rgba(255,255,255,0.2);
        }

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

        /* 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));
        }

        /* LAVENDER VARIANT */
        .variant-lavender {
            --surface-color: #cec3fd;
            --side-color: #b489ff;
            --text-color: #2e1065;
            --border-color: #a36eff;
            --border-width: 2px;
        }
        /* --- SOFT BUTTON CSS END --- */

        /* --- LOGIKA OUTLINE BERPUTAR --- */
        @keyframes outlineSpin {
            100% { transform: rotate(360deg); }
        }

        .category-btn {
            position: relative;
            z-index: 1;
            overflow: hidden;
            transition: background-color 0.3s;
        }

        .category-btn.animating { border-color: transparent !important; }

        .category-btn.animating::before {
            content: ''; position: absolute; top: -50%; left: -50%; width: 200%; height: 200%;
            background: conic-gradient(transparent 0%, #89CFF0 25%, transparent 50%, #B39DDB 75%, transparent 100%);
            z-index: -2; animation: outlineSpin 0.5s linear infinite;
        }

        .category-btn.animating::after {
            content: ''; position: absolute; inset: 3px; background: white; border-radius: 0.6rem; z-index: -1;
        }
        
        .back-btn .soft-btn__content {
    border: none !important;
}