/* ---------------------------------------------------
   Emulator 2.1 – Web Menu CSS
   --------------------------------------------------- */
        :root {
            --font: 'Inter', -apple-system, sans-serif;
            --mono: 'JetBrains Mono', monospace;
            color-scheme: dark;

            /* Default theme (Dark) — needed for modals outside #app */
            --scheme: rgb(34, 235, 57);
            --scheme-dim: rgb(22, 170, 52);
            --scheme-alpha: rgba(34, 235, 57, 0.13);
            --scheme-glow: rgba(34, 235, 57, 0.08);
            --scheme-toggle-glow: rgba(34, 235, 57, 0.45);
            --glow: rgb(207, 83, 83);
            --text: #ffffff;
            --text2: rgba(255, 255, 255, 0.57);
            --text3: rgba(255, 255, 255, 0.3);
            --bg: rgb(5, 6, 12);
            --bg2: rgb(9, 9, 9);
            --bg3: rgb(20, 22, 28);
            --bg4: rgb(28, 31, 38);
            --bg5: rgba(26, 26, 28, 0.7);
            --border: rgba(34, 235, 57, 0.13);
            --text-on-scheme: #fff;
            --card-bg: rgba(14, 16, 22, 0.72);
            --card-border: rgba(34, 235, 57, 0.22);
            --grad-bot: rgba(34, 235, 57, 0.06);
        }

        /* -- Theme Variables -- */
        .theme-dark {
            --scheme: rgb(34, 235, 57);
            --scheme-dim: rgb(22, 170, 52);
            --scheme-alpha: rgba(34, 235, 57, 0.13);
            --scheme-glow: rgba(34, 235, 57, 0.08);
            --scheme-toggle-glow: rgba(34, 235, 57, 0.45);
            --glow: rgb(207, 83, 83);
            --text: #ffffff;
            --text2: rgba(255, 255, 255, 0.57);
            --text3: rgba(255, 255, 255, 0.3);
            --bg: rgb(5, 6, 12);
            --bg2: rgb(9, 9, 9);
            --bg3: rgb(20, 22, 28);
            --bg4: rgb(28, 31, 38);
            --bg5: rgba(26, 26, 28, 0.7);
            --border: rgba(34, 235, 57, 0.13);
            --text-on-scheme: #fff;
            --card-bg: rgba(14, 16, 22, 0.72);
            --card-border: rgba(34, 235, 57, 0.22);
            --grad-bot: rgba(34, 235, 57, 0.06);
            --star-r: 175;
            --star-g: 192;
            --star-b: 218;
        }

        .theme-galaxy {
            --scheme: rgb(130, 80, 255);
            --scheme-dim: rgb(90, 50, 200);
            --scheme-alpha: rgba(130, 80, 255, 0.08);
            --scheme-glow: rgba(130, 80, 255, 0.06);
            --scheme-toggle-glow: rgba(130, 80, 255, 0.45);
            --glow: rgb(180, 100, 255);
            --text: rgb(230, 225, 255);
            --text2: rgba(200, 195, 230, 0.57);
            --text3: rgba(180, 175, 210, 0.3);
            --bg: rgb(8, 5, 18);
            --bg2: rgb(12, 8, 22);
            --bg3: rgb(18, 14, 32);
            --bg4: rgb(28, 22, 45);
            --bg5: rgba(22, 18, 35, 0.7);
            --border: rgba(130, 80, 255, 0.08);
            --text-on-scheme: #fff;
            --card-bg: rgba(14, 10, 28, 0.72);
            --card-border: rgba(130, 80, 255, 0.22);
            --grad-bot: rgba(100, 60, 200, 0.06);
            --star-r: 180;
            --star-g: 175;
            --star-b: 230;
        }

        .theme-ice {
            --scheme: rgb(100, 220, 255);
            --scheme-dim: rgb(60, 180, 230);
            --scheme-alpha: rgba(100, 220, 255, 0.18);
            --scheme-glow: rgba(100, 220, 255, 0.08);
            --scheme-toggle-glow: rgba(100, 220, 255, 0.45);
            --glow: rgb(60, 190, 245);
            --text: rgb(225, 245, 255);
            --text2: rgba(180, 215, 240, 0.65);
            --text3: rgba(140, 185, 215, 0.35);
            --bg: rgb(4, 10, 18);
            --bg2: rgb(6, 14, 24);
            --bg3: rgb(10, 20, 34);
            --bg4: rgb(16, 30, 46);
            --bg5: rgba(10, 22, 36, 0.75);
            --border: rgba(100, 220, 255, 0.18);
            --text-on-scheme: rgb(0, 30, 50);
            --card-bg: rgba(6, 14, 26, 0.72);
            --card-border: rgba(100, 220, 255, 0.22);
            --grad-bot: rgba(60, 190, 245, 0.06);
            --star-r: 170;
            --star-g: 210;
            --star-b: 240;
        }

        .theme-rose {
            --scheme: rgb(255, 120, 165);
            --scheme-dim: rgb(220, 80, 130);
            --scheme-alpha: rgba(255, 120, 165, 0.18);
            --scheme-glow: rgba(255, 120, 165, 0.08);
            --scheme-toggle-glow: rgba(255, 120, 165, 0.45);
            --glow: rgb(255, 80, 130);
            --text: rgb(255, 242, 248);
            --text2: rgba(235, 205, 220, 0.65);
            --text3: rgba(205, 172, 190, 0.35);
            --bg: rgb(14, 6, 10);
            --bg2: rgb(18, 8, 14);
            --bg3: rgb(28, 14, 20);
            --bg4: rgb(38, 20, 28);
            --bg5: rgba(30, 14, 22, 0.75);
            --border: rgba(255, 120, 165, 0.18);
            --text-on-scheme: rgb(40, 5, 18);
            --card-bg: rgba(20, 8, 14, 0.72);
            --card-border: rgba(255, 120, 165, 0.22);
            --grad-bot: rgba(220, 60, 110, 0.06);
            --star-r: 230;
            --star-g: 195;
            --star-b: 215;
        }

        .theme-aurora {
            --scheme: rgb(80, 240, 180);
            --scheme-dim: rgb(50, 190, 140);
            --scheme-alpha: rgba(80, 240, 180, 0.18);
            --scheme-glow: rgba(80, 240, 180, 0.08);
            --scheme-toggle-glow: rgba(80, 240, 180, 0.45);
            --glow: rgb(140, 100, 255);
            --text: rgb(230, 255, 248);
            --text2: rgba(185, 230, 215, 0.65);
            --text3: rgba(145, 195, 180, 0.35);
            --bg: rgb(5, 8, 16);
            --bg2: rgb(7, 11, 20);
            --bg3: rgb(12, 18, 30);
            --bg4: rgb(18, 26, 42);
            --bg5: rgba(12, 18, 32, 0.75);
            --border: rgba(80, 240, 180, 0.18);
            --text-on-scheme: rgb(0, 30, 20);
            --card-bg: rgba(8, 14, 24, 0.72);
            --card-border: rgba(80, 240, 180, 0.22);
            --grad-bot: rgba(60, 200, 150, 0.06);
            --star-r: 160;
            --star-g: 230;
            --star-b: 210;
        }

        /* -- Reset & Base -- */
        *,
        *::before,
        *::after {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        /* Global form control overrides for dark mode */
        select,
        select option {
            color: var(--text, #fff);
            background-color: var(--bg3, rgb(20, 22, 28));
        }


        body {
            font-family: var(--font);
            overflow: hidden;
            width: 100vw;
            height: 100vh;
            margin: 0;
            position: relative;
            background: #000;
            -webkit-font-smoothing: antialiased;
            -moz-osx-font-smoothing: grayscale;
            -webkit-user-select: none;
            -moz-user-select: none;
            -ms-user-select: none;
            user-select: none;
        }

        /* Allow selection only in input fields */
        input,
        textarea,
        [contenteditable] {
            -webkit-user-select: text;
            -moz-user-select: text;
            -ms-user-select: text;
            user-select: text;
        }

        #app {
            width: 100%;
            height: 100%;
            background: var(--bg);
            border-radius: 0;
            position: relative;
            overflow: hidden;
            color: var(--text);
            transition: background 0.6s cubic-bezier(0.4, 0, 0.2, 1);
            user-select: none;
            -webkit-user-select: none;
            -moz-user-select: none;
            -ms-user-select: none;
        }

        /* -- Minimized State -- */
        #main-app.minimized .header-tabs,
        #main-app.minimized .tab-underline,
        #main-app.minimized .content-page,
        #main-app.minimized #bottom-gradient,
        #main-app.minimized .ambient-orb,
        #main-app.minimized .ambient-particle,
        #main-app.minimized #cursor-glow,
        #main-app.minimized #mesh-gradient {
            opacity: 0 !important;
            pointer-events: none !important;
            transition: opacity 0.35s ease;
        }

        #main-app.minimized {
            height: 52px !important;
            min-height: 52px !important;
            max-height: 52px !important;
            overflow: hidden;
            transition: height 0.4s cubic-bezier(0.4, 0, 0.2, 1),
                min-height 0.4s cubic-bezier(0.4, 0, 0.2, 1),
                max-height 0.4s cubic-bezier(0.4, 0, 0.2, 1);
        }

        #main-app {
            transition: height 0.4s cubic-bezier(0.4, 0, 0.2, 1),
                min-height 0.4s cubic-bezier(0.4, 0, 0.2, 1),
                max-height 0.4s cubic-bezier(0.4, 0, 0.2, 1);
        }

        #main-app.minimized .header {
            border-bottom-color: var(--scheme-alpha);
            box-shadow: 0 1px 12px var(--scheme-glow);
        }

        #main-app.minimized .hdr-btn.minimize {
            color: var(--scheme);
            border-color: var(--scheme-alpha);
            background: rgba(34, 235, 57, 0.08);
        }

        #app::before {
            content: '';
            position: absolute;
            inset: 0;
            background:
                radial-gradient(ellipse 80% 50% at 20% 40%, var(--scheme-glow) 0%, transparent 70%),
                radial-gradient(ellipse 60% 40% at 80% 60%, rgba(130, 80, 200, 0.03) 0%, transparent 70%);
            pointer-events: none;
            z-index: 0;
            opacity: 0.7;
            transition: opacity 0.6s;
        }

        /* -- Starfield -- */
        #starfield {
            position: absolute;
            inset: 0;
            width: 100%;
            height: 100%;
            z-index: 0;
            pointer-events: none;
        }

        #bottom-gradient {
            position: absolute;
            bottom: 0;
            left: 0;
            right: 0;
            height: 55%;
            z-index: 1;
            pointer-events: none;
            background: linear-gradient(to bottom, transparent 0%, var(--grad-bot) 60%, rgba(0, 0, 0, 0.3) 100%);
            transition: background 0.6s cubic-bezier(0.4, 0, 0.2, 1);
        }

        /* -- Pages -- */
        .page {
            position: absolute;
            inset: 0;
            z-index: 2;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .page:not(.active) {
            display: none;
        }

        .content-page {
            position: absolute;
            top: 82px;
            left: 0;
            right: 0;
            bottom: 0;
            z-index: 2;
            display: none;
            overflow-y: auto;
            padding: 18px 18px;
        }

        .content-page.active {
            display: block;
        }

        .content-page::-webkit-scrollbar {
            width: 5px;
        }

        .content-page::-webkit-scrollbar-thumb {
            background: var(--scheme-alpha);
            border-radius: 10px;
            border: 1px solid transparent;
            background-clip: padding-box;
            transition: background 0.3s;
        }

        .content-page::-webkit-scrollbar-thumb:hover {
            background: var(--scheme-dim);
        }

        .content-page::-webkit-scrollbar-track {
            background: transparent;
        }

        /* -- Auth Card -- */
        .auth-card {
            width: 360px;
            padding: 32px 30px;
            background: rgba(12, 14, 20, 0.85);
            border-radius: 28px;
            position: relative;
            border: 1px solid rgba(255, 255, 255, 0.06);
            backdrop-filter: blur(30px) saturate(1.3);
            z-index: 5;
            animation: authFadeIn 0.7s cubic-bezier(0.16, 1, 0.3, 1);
            box-shadow:
                0 25px 80px rgba(0, 0, 0, 0.5),
                0 0 0 1px rgba(255, 255, 255, 0.04) inset,
                0 1px 0 rgba(255, 255, 255, 0.06) inset;
        }

        .auth-card::after {
            content: '';
            position: absolute;
            inset: -1px;
            border-radius: 28px;
            padding: 1px;
            background: linear-gradient(135deg, var(--scheme-alpha), transparent 40%, transparent 60%, var(--scheme-alpha));
            -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;
            pointer-events: none;
            opacity: 0.5;
            animation: borderRotate 8s linear infinite;
        }

        @keyframes borderRotate {
            0% {
                filter: hue-rotate(0deg);
            }

            100% {
                filter: hue-rotate(360deg);
            }
        }

        @keyframes authFadeIn {
            from {
                opacity: 0;
                transform: scale(0.95) translateY(10px);
            }

            to {
                opacity: 1;
                transform: scale(1) translateY(0);
            }
        }

        .auth-glow {
            position: absolute;
            width: 80px;
            height: 80px;
            border-radius: 50%;
            filter: blur(40px);
            pointer-events: none;
            z-index: -1;
            animation: glowPulse 4s ease-in-out infinite;
        }

        .glow-1 {
            top: -10px;
            left: -10px;
            background: var(--scheme);
            opacity: 0.15;
        }

        .glow-2 {
            bottom: -10px;
            right: -10px;
            background: var(--scheme);
            opacity: 0.1;
            animation-delay: -2s;
        }

        @keyframes glowPulse {

            0%,
            100% {
                opacity: 0.08;
                transform: scale(1);
            }

            50% {
                opacity: 0.2;
                transform: scale(1.2);
            }
        }

        .auth-header {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            gap: 12px;
            margin-bottom: 28px;
        }

        .auth-title {
            font-size: 30px;
            font-weight: 800;
            background: linear-gradient(135deg, var(--text) 0%, var(--scheme) 100%);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
            letter-spacing: 2px;
            text-transform: uppercase;
        }

        .auth-subtitle {
            font-size: 9px;
            font-weight: 600;
            letter-spacing: 4px;
            text-transform: uppercase;
            color: var(--scheme);
            opacity: 0.55;
            margin-top: -4px;
            font-family: var(--mono);
        }

        .auth-tagline {
            font-size: 11.5px;
            font-weight: 500;
            color: var(--text3);
            letter-spacing: 0.3px;
            text-align: center;
            line-height: 1.5;
            max-width: 260px;
            opacity: 0;
            animation: taglineFade 1s 0.8s cubic-bezier(0.16, 1, 0.3, 1) forwards;
        }

        .auth-tagline span {
            color: var(--scheme);
            font-weight: 700;
        }

        @keyframes taglineFade {
            from {
                opacity: 0;
                transform: translateY(6px);
            }

            to {
                opacity: 1;
                transform: translateY(0);
            }
        }

        .auth-version {
            display: inline-flex;
            align-items: center;
            gap: 4px;
            padding: 3px 10px;
            border-radius: 20px;
            background: rgba(var(--scheme-rgb, 34, 235, 57), 0.08);
            border: 1px solid rgba(var(--scheme-rgb, 34, 235, 57), 0.15);
            font-size: 9px;
            font-weight: 700;
            letter-spacing: 1.5px;
            text-transform: uppercase;
            color: var(--scheme);
            font-family: var(--mono);
            opacity: 0;
            animation: taglineFade 0.6s 1.1s ease forwards;
        }

        .auth-version::before {
            content: '';
            width: 5px;
            height: 5px;
            border-radius: 50%;
            background: var(--scheme);
            box-shadow: 0 0 6px var(--scheme);
            animation: dotPulse 2s ease-in-out infinite;
        }

        @keyframes dotPulse {

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

            50% {
                opacity: 0.4;
                transform: scale(0.7);
            }
        }

        .logo-ring {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            width: 60px;
            height: 60px;
            border-radius: 50%;
            border: 1px dashed var(--scheme);
            opacity: 0.2;
            animation: logoSpin 20s linear infinite;
        }

        @keyframes logoSpin {
            from {
                transform: translate(-50%, -50%) rotate(0deg);
            }

            to {
                transform: translate(-50%, -50%) rotate(360deg);
            }
        }

        .logo-wrapper {
            position: relative;
        }

        .auth-divider-line {
            width: 60px;
            height: 1px;
            background: linear-gradient(90deg, transparent, var(--scheme-alpha), transparent);
            margin-top: 2px;
        }

        .auth-form {
            display: flex;
            flex-direction: column;
            gap: 16px;
        }

        .input-group {
            display: flex;
            align-items: center;
            background: rgba(12, 14, 22, 0.8);
            border: 1px solid rgba(255, 255, 255, 0.06);
            border-radius: 14px;
            overflow: hidden;
            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        }

        .input-group:focus-within {
            border-color: var(--scheme);
            box-shadow: 0 0 0 3px var(--scheme-glow), 0 0 20px var(--scheme-glow);
            background: rgba(12, 14, 22, 0.95);
        }

        .input-icon {
            padding: 0 12px;
            font-size: 14px;
            opacity: 0.5;
        }

        .input-group input {
            flex: 1;
            padding: 14px 14px 14px 0;
            background: none;
            border: none;
            color: var(--text);
            font-family: var(--font);
            font-size: 14px;
            outline: none;
            user-select: text;
            -webkit-user-select: text;
        }

        .input-group input::placeholder {
            color: var(--text3);
        }

        .auth-separator {
            height: 1px;
            background: var(--border);
            margin: 4px 0;
        }

        /* -- Buttons -- */
        .btn-primary {
            width: 100%;
            background: linear-gradient(135deg, var(--scheme) 0%, var(--scheme-dim) 100%);
            color: var(--text-on-scheme);
            border: none;
            border-radius: 14px;
            padding: 15px;
            font-family: var(--font);
            font-size: 14px;
            font-weight: 700;
            cursor: pointer;
            transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
            position: relative;
            overflow: hidden;
            letter-spacing: 0.5px;
            box-shadow: 0 4px 15px var(--scheme-glow);
        }

        .btn-primary::before {
            content: '';
            position: absolute;
            top: 0;
            left: -100%;
            width: 100%;
            height: 100%;
            background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
            transition: left 0.5s ease;
        }

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

        .btn-primary:hover {
            filter: brightness(1.1);
            transform: translateY(-2px);
            box-shadow: 0 8px 30px var(--scheme-glow), 0 4px 20px rgba(0, 0, 0, 0.3);
        }

        .btn-primary:active {
            transform: translateY(0) scale(0.97);
            filter: brightness(0.95);
            box-shadow: 0 2px 8px var(--scheme-glow);
        }

        .btn-accent {
            padding: 10px 20px;
            border: none;
            border-radius: 12px;
            background: var(--scheme);
            color: var(--text-on-scheme);
            font-family: var(--font);
            font-size: 13px;
            font-weight: 600;
            cursor: pointer;
            transition: all 0.2s;
        }

        .btn-accent:hover {
            filter: brightness(1.15);
        }

        .btn-outline {
            padding: 10px 20px;
            border: 1px solid var(--card-border);
            border-radius: 12px;
            background: transparent;
            color: var(--text);
            font-family: var(--font);
            font-size: 13px;
            font-weight: 500;
            cursor: pointer;
            transition: all 0.2s;
        }

        .btn-outline:hover {
            background: var(--scheme-alpha);
            border-color: var(--scheme);
        }

        /* -- Checkbox -- */
        .checkbox-row {
            display: flex;
            align-items: center;
            gap: 8px;
            cursor: pointer;
            user-select: none;
        }

        .checkbox-row input {
            display: none;
        }

        .checkmark {
            width: 16px;
            height: 16px;
            border-radius: 4px;
            border: 1.5px solid var(--text3);
            background: transparent;
            transition: all 0.2s;
            position: relative;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .checkbox-row input:checked+.checkmark {
            background: var(--scheme);
            border-color: var(--scheme);
        }

        .checkbox-row input:checked+.checkmark::after {
            content: '?';
            font-size: 11px;
            color: var(--text-on-scheme);
            font-weight: 700;
        }

        .cb-label {
            font-size: 13px;
            color: var(--text2);
        }

        /* -- Header -- */
        .header {
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            height: 82px;
            display: flex;
            align-items: center;
            padding: 0 27px;
            z-index: 10;
            border-bottom: 1px solid rgba(255, 255, 255, 0.04);
            background: linear-gradient(180deg, rgba(0, 0, 0, 0.35) 0%, rgba(0, 0, 0, 0.05) 100%);
            backdrop-filter: blur(12px) saturate(1.1);
        }

        .header::after {
            content: '';
            position: absolute;
            bottom: 0;
            left: 10%;
            right: 10%;
            height: 1px;
            background: linear-gradient(90deg, transparent, var(--scheme-alpha), transparent);
            animation: headerLineBreath 4s ease-in-out infinite;
        }

        @keyframes headerLineBreath {

            0%,
            100% {
                opacity: 0.3;
                left: 10%;
                right: 10%;
            }

            50% {
                opacity: 0.7;
                left: 5%;
                right: 5%;
            }
        }

        .header-left {
            display: flex;
            align-items: center;
            min-width: 120px;
        }

        .brand-typer {
            display: flex;
            align-items: center;
            position: relative;
            padding-left: 6px;
            height: 40px;
        }

        .brand-text {
            display: inline-flex;
            align-items: center;
            min-height: 1.2em;
            font-family: 'Inter', sans-serif;
            font-size: 18px;
            font-weight: 800;
            letter-spacing: 3px;
            text-transform: uppercase;
        }

        .brand-text .brand-char {
            display: inline-block;
            color: var(--scheme);
            opacity: 0;
            transform: translateY(8px) scale(0.7);
            animation: charReveal 0.45s cubic-bezier(.16, 1.11, .3, 1.2) forwards;
            text-shadow: 0 0 12px var(--scheme-glow), 0 0 25px var(--scheme-glow), 0 0 40px rgba(34, 235, 57, 0.04);
            position: relative;
            filter: blur(0px);
        }

        .brand-text .brand-char.removing {
            animation: charFade 0.3s cubic-bezier(.4, 0, .7, 1) forwards;
        }

        @keyframes charReveal {
            0% {
                opacity: 0;
                transform: translateY(10px) scale(0.6);
                filter: blur(6px);
                color: var(--scheme-dim);
            }

            50% {
                opacity: 1;
                transform: translateY(-3px) scale(1.08);
                filter: blur(0px);
                color: #fff;
            }

            100% {
                opacity: 1;
                transform: translateY(0) scale(1);
                filter: blur(0px);
                color: var(--scheme);
            }
        }

        @keyframes charFade {
            0% {
                opacity: 1;
                transform: translateY(0) scale(1);
                filter: blur(0px);
                color: var(--scheme);
            }

            40% {
                color: #fff;
                text-shadow: 0 0 16px var(--scheme), 0 0 30px var(--scheme-glow);
            }

            100% {
                opacity: 0;
                transform: translateY(-14px) scale(0.4);
                filter: blur(5px);
                color: var(--scheme-dim);
            }
        }

        .brand-cursor {
            display: inline-block;
            width: 2px;
            height: 18px;
            background: var(--scheme);
            border-radius: 1px;
            margin-left: 2px;
            box-shadow: 0 0 6px var(--scheme), 0 0 12px var(--scheme-glow);
            animation: cursorPulse 0.8s ease-in-out infinite;
        }

        @keyframes cursorPulse {

            0%,
            100% {
                opacity: 1;
                box-shadow: 0 0 6px var(--scheme), 0 0 12px var(--scheme-glow);
            }

            50% {
                opacity: 0.2;
                box-shadow: 0 0 2px var(--scheme);
            }
        }

        .brand-glow-line {
            position: absolute;
            bottom: 4px;
            left: 6px;
            height: 2px;
            background: linear-gradient(90deg, var(--scheme), var(--scheme-dim), transparent);
            border-radius: 1px;
            opacity: 0.35;
            width: 0;
            transition: width 0.4s cubic-bezier(.25, .8, .25, 1), opacity 0.3s;
            box-shadow: 0 0 8px var(--scheme-glow), 0 1px 4px var(--scheme-glow);
        }

        /* Shimmer sweep across completed word */
        .brand-text.shimmer .brand-char {
            animation: charShimmer 0.8s ease forwards;
        }

        @keyframes charShimmer {
            0% {
                color: var(--scheme);
                text-shadow: 0 0 8px var(--scheme-glow);
                transform: translateY(0) scale(1);
            }

            30% {
                color: #fff;
                text-shadow: 0 0 20px var(--scheme), 0 0 40px var(--scheme-glow);
                transform: translateY(-1px) scale(1.04);
            }

            100% {
                color: var(--scheme);
                text-shadow: 0 0 12px var(--scheme-glow);
                transform: translateY(0) scale(1);
            }
        }

        /* Sparkle particles */
        .brand-sparkle {
            position: absolute;
            width: 3px;
            height: 3px;
            border-radius: 50%;
            background: var(--scheme);
            pointer-events: none;
            animation: sparkleFloat 0.8s ease-out forwards;
            box-shadow: 0 0 4px var(--scheme), 0 0 8px var(--scheme-glow);
        }

        @keyframes sparkleFloat {
            0% {
                opacity: 1;
                transform: translate(0, 0) scale(1);
            }

            100% {
                opacity: 0;
                transform: translate(var(--sx), var(--sy)) scale(0);
            }
        }

        /* Page content slide-in */
        .content-page.active {
            animation: pageSlideIn 0.4s cubic-bezier(0.16, 1, 0.3, 1) both;
        }

        @keyframes pageSlideIn {
            from {
                opacity: 0;
                transform: translateY(12px);
            }

            to {
                opacity: 1;
                transform: translateY(0);
            }
        }

        .header-tabs {
            flex: 1;
            display: flex;
            align-items: center;
            gap: 16px;
            padding-left: 20px;
            position: relative;
            height: 100%;
        }

        .tab-btn {
            background: none;
            border: none;
            color: var(--text3);
            font-family: var(--font);
            font-size: 13px;
            font-weight: 500;
            cursor: pointer;
            padding: 8px 14px;
            border-radius: 10px;
            transition: color 0.2s, background 0.2s;
            position: relative;
            white-space: nowrap;
        }

        .tab-btn:hover {
            color: var(--text);
            background: rgba(255, 255, 255, 0.04);
        }

        .tab-btn.active {
            color: var(--text);
            font-weight: 600;
            background: var(--scheme-alpha);
            text-shadow: 0 0 8px var(--scheme-glow);
        }

        .tab-underline {
            position: absolute;
            bottom: 14px;
            height: 3px;
            background: var(--scheme);
            border-radius: 2px;
            transition: left 0.35s cubic-bezier(0.4, 0, 0.2, 1), width 0.35s cubic-bezier(0.4, 0, 0.2, 1);
            box-shadow: 0 0 12px var(--scheme-glow), 0 0 4px var(--scheme-alpha);
        }

        .header-right {
            display: flex;
            gap: 8px;
        }

        .hdr-btn {
            width: 30px;
            height: 30px;
            border-radius: 10px;
            border: 1px solid transparent;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 12px;
            cursor: pointer;
            transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
        }

        .hdr-btn.minimize {
            background: rgba(255, 255, 255, 0.04);
            color: var(--text2);
            border-color: rgba(255, 255, 255, 0.06);
        }

        .hdr-btn.minimize:hover {
            background: rgba(255, 255, 255, 0.08);
            color: var(--text);
            border-color: rgba(255, 255, 255, 0.12);
            transform: scale(1.05);
        }

        .hdr-btn.close {
            background: rgba(255, 75, 75, 0.08);
            color: rgba(255, 100, 100, 0.7);
            border-color: rgba(255, 75, 75, 0.15);
        }

        .hdr-btn.close:hover {
            background: rgba(255, 75, 75, 0.2);
            color: #ff4b4b;
            border-color: rgba(255, 75, 75, 0.4);
            box-shadow: 0 0 12px rgba(255, 75, 75, 0.15);
            transform: scale(1.05);
        }

        /* -- Home Layout -- */
        .home-layout {
            display: flex;
            height: 100%;
            gap: 14px;
        }

        .settings-col {
            width: 220px;
            padding: 8px 4px 20px 4px;
            display: flex;
            flex-direction: column;
            gap: 8px;
            overflow-y: auto;
            flex-shrink: 0;
            align-items: center;
        }

        .settings-col::-webkit-scrollbar {
            width: 0;
        }

        /* -- Settings Section Cards -- */
        .settings-section {
            width: 100%;
            background: linear-gradient(145deg, rgba(14, 16, 26, 0.6) 0%, rgba(8, 10, 18, 0.4) 100%);
            border: 1px solid rgba(255, 255, 255, 0.05);
            border-radius: 16px;
            padding: 12px 10px 14px;
            transition: border-color 0.25s, box-shadow 0.25s;
        }

        .settings-section:hover {
            border-color: var(--scheme-alpha);
            box-shadow: 0 6px 24px rgba(0, 0, 0, 0.2), 0 0 12px var(--scheme-glow);
        }

        .section-header {
            display: flex;
            align-items: center;
            gap: 6px;
            padding: 0 4px 6px;
            margin-bottom: 4px;
            border-bottom: 1px solid rgba(255, 255, 255, 0.04);
        }

        .section-dot {
            width: 7px;
            height: 7px;
            border-radius: 50%;
            background: var(--scheme);
            box-shadow: 0 0 8px var(--scheme-glow), 0 0 4px var(--scheme);
            flex-shrink: 0;
            animation: sectionDotPulse 3s ease-in-out infinite;
        }

        @keyframes sectionDotPulse {

            0%,
            100% {
                box-shadow: 0 0 6px var(--scheme-glow), 0 0 3px var(--scheme);
            }

            50% {
                box-shadow: 0 0 12px var(--scheme-glow), 0 0 6px var(--scheme);
            }
        }

        .section-title {
            font-size: 10px;
            font-weight: 700;
            letter-spacing: 1.5px;
            text-transform: uppercase;
            color: var(--text2);
        }

        .section-body {
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 2px;
        }

        /* -- Circular Knob Layout -- */
        .knob-row {
            display: flex;
            justify-content: center;
            gap: 6px;
            width: 100%;
            padding: 2px 0;
        }

        .knob-container {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            width: 82px;
            height: 82px;
            position: relative;
            cursor: grab;
            border-radius: 50%;
        }

        .knob-container:active {
            cursor: grabbing;
        }

        .knob-container canvas {
            display: block;
        }

        /* -- Knob Click-to-Type Input -- */
        .knob-val-input {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            width: 54px;
            height: 26px;
            font-size: 13px;
            font-weight: 700;
            font-family: var(--mono);
            color: #fff;
            background: rgba(8, 14, 28, 0.96);
            border: 1.5px solid var(--scheme);
            border-radius: 8px;
            padding: 0 6px;
            text-align: center;
            outline: none;
            box-shadow: 0 0 16px var(--scheme-glow), 0 0 0 3px rgba(34, 235, 57, 0.08), inset 0 0 8px rgba(0, 0, 0, 0.3);
            -webkit-user-select: text;
            user-select: text;
            z-index: 10;
            animation: knobInputIn 0.18s cubic-bezier(0.4, 0, 0.2, 1);
            -moz-appearance: textfield;
        }

        .knob-val-input::-webkit-outer-spin-button,
        .knob-val-input::-webkit-inner-spin-button {
            -webkit-appearance: none;
            margin: 0;
        }

        .knob-val-input:focus {
            border-color: var(--scheme);
            box-shadow: 0 0 20px var(--scheme-glow), 0 0 0 4px rgba(34, 235, 57, 0.12), inset 0 0 8px rgba(0, 0, 0, 0.3);
        }

        @keyframes knobInputIn {
            from {
                opacity: 0;
                transform: translate(-50%, -50%) scale(0.8);
            }

            to {
                opacity: 1;
                transform: translate(-50%, -50%) scale(1);
            }
        }

        .controller-area {
            flex: 1;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            position: relative;
            /* Deep dark base */
            background: linear-gradient(160deg, rgba(6, 8, 18, 0.92) 0%, rgba(4, 6, 14, 0.95) 50%, rgba(8, 10, 22, 0.92) 100%);
            border-radius: 20px;
            border: 1px solid rgba(100, 140, 220, 0.10);
            box-shadow:
                0 8px 60px rgba(0, 0, 0, 0.5),
                0 0 120px rgba(34, 235, 57, 0.03),
                inset 0 1px 0 rgba(255, 255, 255, 0.03),
                inset 0 -1px 0 rgba(0, 0, 0, 0.2);
            margin: 6px 8px;
            padding: 8px;
            overflow: hidden;
            isolation: isolate;
        }

        /* -- Aurora Nebula Blob 1 (blue-cyan, top-left) -- */
        .controller-area::before {
            content: '';
            position: absolute;
            width: 350px;
            height: 350px;
            top: -80px;
            left: -60px;
            background: radial-gradient(circle, rgba(34, 235, 57, 0.12) 0%, rgba(34, 235, 57, 0.06) 40%, transparent 70%);
            border-radius: 50%;
            filter: blur(60px);
            animation: ctrlBlob1 10s ease-in-out infinite;
            pointer-events: none;
            z-index: 0;
        }

        /* -- Aurora Nebula Blob 2 (purple-magenta, bottom-right) -- */
        .controller-area::after {
            content: '';
            position: absolute;
            width: 400px;
            height: 400px;
            bottom: -100px;
            right: -80px;
            background: radial-gradient(circle, rgba(139, 92, 246, 0.10) 0%, rgba(236, 72, 153, 0.04) 40%, transparent 70%);
            border-radius: 50%;
            filter: blur(70px);
            animation: ctrlBlob2 12s ease-in-out infinite;
            pointer-events: none;
            z-index: 0;
        }

        .controller-area>* {
            position: relative;
            z-index: 2;
        }

        /* -- Center Pulsing Glow (behind controller SVG) -- */
        .steam-ctrl-wrap {
            position: relative;
        }

        .steam-ctrl-wrap::before {
            content: '';
            position: absolute;
            top: 50%;
            left: 50%;
            width: 300px;
            height: 200px;
            transform: translate(-50%, -50%);
            background: radial-gradient(ellipse, rgba(var(--scheme-rgb, 34, 235, 57), 0.10) 0%, rgba(var(--scheme-rgb, 34, 235, 57), 0.03) 50%, transparent 75%);
            border-radius: 50%;
            filter: blur(40px);
            animation: ctrlCenterPulse 4s ease-in-out infinite;
            pointer-events: none;
            z-index: 0;
        }



        /* -- Micro scan-line overlay -- */
        .ctrl-scanlines {
            position: absolute;
            inset: 0;
            border-radius: 20px;
            background: repeating-linear-gradient(0deg,
                    transparent,
                    transparent 3px,
                    rgba(34, 235, 57, 0.008) 3px,
                    rgba(34, 235, 57, 0.008) 4px);
            pointer-events: none;
            z-index: 1;
        }

        /* -- Floating Particle Stars -- */
        .ctrl-particles {
            position: absolute;
            inset: 0;
            border-radius: 20px;
            overflow: hidden;
            pointer-events: none;
            z-index: 1;
        }

        .ctrl-particles span {
            position: absolute;
            width: 2px;
            height: 2px;
            background: rgba(34, 235, 57, 0.5);
            border-radius: 50%;
            box-shadow: 0 0 6px rgba(34, 235, 57, 0.3);
            animation: ctrlParticleFloat linear infinite;
            opacity: 0;
        }

        .ctrl-particles span:nth-child(1) {
            left: 15%;
            animation-duration: 12s;
            animation-delay: 0s;
            width: 2px;
            height: 2px;
        }

        .ctrl-particles span:nth-child(2) {
            left: 35%;
            animation-duration: 15s;
            animation-delay: 2s;
            width: 1.5px;
            height: 1.5px;
        }

        .ctrl-particles span:nth-child(3) {
            left: 55%;
            animation-duration: 10s;
            animation-delay: 4s;
            width: 2.5px;
            height: 2.5px;
            background: rgba(139, 92, 246, 0.4);
            box-shadow: 0 0 8px rgba(139, 92, 246, 0.3);
        }

        .ctrl-particles span:nth-child(4) {
            left: 75%;
            animation-duration: 14s;
            animation-delay: 1s;
            width: 1.5px;
            height: 1.5px;
        }

        .ctrl-particles span:nth-child(5) {
            left: 45%;
            animation-duration: 11s;
            animation-delay: 6s;
            width: 2px;
            height: 2px;
            background: rgba(34, 235, 57, 0.4);
            box-shadow: 0 0 6px rgba(34, 235, 57, 0.3);
        }

        .ctrl-particles span:nth-child(6) {
            left: 85%;
            animation-duration: 13s;
            animation-delay: 3s;
            width: 1px;
            height: 1px;
        }

        .ctrl-particles span:nth-child(7) {
            left: 25%;
            animation-duration: 16s;
            animation-delay: 5s;
            width: 2px;
            height: 2px;
            background: rgba(139, 92, 246, 0.35);
        }

        .ctrl-particles span:nth-child(8) {
            left: 65%;
            animation-duration: 9s;
            animation-delay: 7s;
            width: 1.5px;
            height: 1.5px;
        }

        @keyframes ctrlParticleFloat {
            0% {
                transform: translateY(100%) translateX(0);
                opacity: 0;
            }

            10% {
                opacity: 0.8;
            }

            50% {
                opacity: 0.4;
                transform: translateY(30%) translateX(15px);
            }

            90% {
                opacity: 0.6;
            }

            100% {
                transform: translateY(-20%) translateX(-10px);
                opacity: 0;
            }
        }

        /* -- Soft Corner Accent Glows -- */
        .ctrl-corner-glow {
            position: absolute;
            pointer-events: none;
            z-index: 1;
            border-radius: 50%;
            filter: blur(50px);
        }

        .ctrl-corner-glow.top-right {
            top: -20px;
            right: -20px;
            width: 180px;
            height: 180px;
            background: radial-gradient(circle, rgba(34, 235, 57, 0.08) 0%, transparent 70%);
            animation: ctrlCornerPulse 6s ease-in-out infinite;
        }

        .ctrl-corner-glow.bottom-left {
            bottom: -20px;
            left: -20px;
            width: 160px;
            height: 160px;
            background: radial-gradient(circle, rgba(139, 92, 246, 0.06) 0%, transparent 70%);
            animation: ctrlCornerPulse 6s ease-in-out 3s infinite;
        }

        @keyframes ctrlCornerPulse {

            0%,
            100% {
                opacity: 0.5;
                transform: scale(1);
            }

            50% {
                opacity: 1;
                transform: scale(1.15);
            }
        }

        /* -- Soft Inner Vignette -- */
        .ctrl-vignette {
            position: absolute;
            inset: 0;
            border-radius: 20px;
            background: radial-gradient(ellipse 70% 60% at 50% 45%, transparent 50%, rgba(0, 0, 0, 0.3) 100%);
            pointer-events: none;
            z-index: 1;
        }

        @keyframes ctrlBlob1 {

            0%,
            100% {
                transform: translate(0, 0) scale(1);
                opacity: 0.7;
            }

            33% {
                transform: translate(40px, 30px) scale(1.15);
                opacity: 1;
            }

            66% {
                transform: translate(-20px, 50px) scale(0.9);
                opacity: 0.8;
            }
        }

        @keyframes ctrlBlob2 {

            0%,
            100% {
                transform: translate(0, 0) scale(1);
                opacity: 0.6;
            }

            33% {
                transform: translate(-50px, -20px) scale(1.1);
                opacity: 0.9;
            }

            66% {
                transform: translate(30px, -40px) scale(0.95);
                opacity: 0.7;
            }
        }

        @keyframes ctrlCenterPulse {

            0%,
            100% {
                opacity: 0.5;
                transform: translate(-50%, -50%) scale(1);
            }

            50% {
                opacity: 1;
                transform: translate(-50%, -50%) scale(1.2);
            }
        }





        #controller-canvas {
            max-width: 100%;
        }

        .toggles-col {
            width: 220px;
            display: flex;
            flex-direction: column;
            gap: 8px;
            padding: 8px 4px 10px 0;
            flex-shrink: 0;
            overflow-y: auto;
        }

        .toggles-col::-webkit-scrollbar {
            width: 0;
        }

        /* -- Sliders (legacy linear — kept for non-knob sliders) -- */
        .slider-group {
            display: flex;
            flex-direction: column;
            gap: 4px;
            width: 100%;
        }

        .slider-group.sm {
            gap: 6px;
        }

        .slider-label {
            font-size: 12px;
            font-weight: 600;
            color: rgba(166, 191, 230, 0.85);
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 0 2px;
        }

        .slider-val {
            color: rgba(100, 210, 255, 0.9);
            font-weight: 700;
            font-size: 12px;
            min-width: 38px;
            text-align: right;
        }

        .styled-slider {
            -webkit-appearance: none;
            appearance: none;
            width: 100%;
            height: 6px;
            border-radius: 3px;
            background: rgba(8, 12, 22, 0.9);
            outline: none;
            margin: 6px 0;
            cursor: pointer;
            border: 1px solid rgba(60, 100, 160, 0.12);
        }

        .styled-slider::-webkit-slider-runnable-track {
            height: 6px;
            border-radius: 3px;
            background: transparent;
        }

        .styled-slider::-webkit-slider-thumb {
            -webkit-appearance: none;
            width: 18px;
            height: 18px;
            border-radius: 50%;
            background: radial-gradient(circle at 35% 35%, #fff 0%, #d8e8f8 100%);
            cursor: pointer;
            border: 2px solid rgba(34, 235, 57, 0.35);
            margin-top: -7px;
            box-shadow: 0 0 0 3px rgba(34, 235, 57, 0.08), 0 2px 6px rgba(0, 0, 0, 0.35);
            transition: box-shadow 0.2s ease, transform 0.15s ease;
        }

        .styled-slider::-webkit-slider-thumb:hover {
            transform: scale(1.15);
            border-color: rgba(34, 235, 57, 0.5);
            box-shadow: 0 0 0 4px rgba(34, 235, 57, 0.12), 0 0 12px rgba(34, 235, 57, 0.2), 0 2px 6px rgba(0, 0, 0, 0.4);
        }

        .styled-slider:active::-webkit-slider-thumb {
            transform: scale(1.22);
            border-color: rgba(34, 235, 57, 0.6);
            box-shadow: 0 0 0 5px rgba(34, 235, 57, 0.18), 0 0 16px rgba(34, 235, 57, 0.3), 0 2px 8px rgba(0, 0, 0, 0.5);
        }

        /* Firefox track + thumb */
        .styled-slider::-moz-range-track {
            height: 6px;
            border-radius: 3px;
            background: rgba(8, 12, 22, 0.9);
            border: 1px solid rgba(60, 100, 160, 0.12);
        }

        .styled-slider::-moz-range-thumb {
            width: 16px;
            height: 16px;
            border-radius: 50%;
            background: radial-gradient(circle at 35% 35%, #fff 0%, #d8e8f8 100%);
            cursor: pointer;
            border: 2px solid rgba(34, 235, 57, 0.35);
            box-shadow: 0 0 0 3px rgba(34, 235, 57, 0.08), 0 2px 6px rgba(0, 0, 0, 0.35);
        }

        .sub-sliders {
            padding-left: 8px;
            border-left: 2px solid var(--scheme-alpha);
            margin-left: 4px;
            display: flex;
            flex-direction: column;
            gap: 6px;
            align-items: center;
            overflow: hidden;
            max-height: 500px;
            opacity: 1;
            transition: max-height 0.35s ease, opacity 0.25s ease, margin 0.3s ease;
        }

        .sub-sliders.hidden {
            max-height: 0;
            opacity: 0;
            margin: 0;
            padding-top: 0;
            padding-bottom: 0;
            pointer-events: none;
        }

        .hidden {
            display: none !important;
        }

        .cb-inline {
            padding: 4px 0;
        }

        .cb-inline .cb-label {
            font-size: 11px;
        }

        /* -- Circular Knob Sliders (matching C++ ImGui knob widget) -- */
        .knob-container {
            display: flex;
            flex-direction: column;
            align-items: center;
            width: 90px;
            cursor: grab;
        }

        .knob-container:active {
            cursor: grabbing;
        }

        .knob-container canvas {
            display: block;
        }

        .knob-label {
            font-size: 11px;
            font-weight: 600;
            color: var(--text2);
            text-align: center;
            margin-bottom: 2px;
            white-space: nowrap;
        }

        .knob-row {
            display: flex;
            flex-wrap: wrap;
            justify-content: center;
            gap: 4px 8px;
            width: 100%;
        }

        /* -- Cards -- */
        .card {
            background: linear-gradient(145deg, rgba(14, 16, 26, 0.75) 0%, rgba(8, 10, 18, 0.6) 100%);
            border: 1px solid rgba(255, 255, 255, 0.08);
            border-radius: 18px;
            padding: 16px 18px;
            transition: border-color 0.25s, box-shadow 0.25s;
            position: relative;
            overflow: hidden;
            box-shadow: 0 2px 12px rgba(0, 0, 0, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.05);
        }

        .card::before {
            content: '';
            position: absolute;
            top: 0;
            left: 15%;
            right: 15%;
            height: 1px;
            background: linear-gradient(90deg, transparent, var(--scheme-alpha), transparent);
            opacity: 0.4;
            transition: opacity 0.3s, left 0.4s, right 0.4s;
        }

        .card:hover {
            transform: translateY(-2px);
            box-shadow: 0 8px 30px rgba(0, 0, 0, 0.25), 0 0 20px var(--scheme-glow);
            border-color: var(--scheme-alpha);
        }

        .card:hover::before {
            opacity: 1;
            left: 0%;
            right: 0%;
        }

        .card::after {
            content: '';
            position: absolute;
            top: -50%;
            left: -50%;
            width: 200%;
            height: 200%;
            background: radial-gradient(circle at var(--mouse-x, 50%) var(--mouse-y, 50%), var(--scheme-glow) 0%, transparent 50%);
            opacity: 0;
            transition: opacity 0.4s ease;
            pointer-events: none;
            z-index: -1;
        }

        .card:hover::after {
            opacity: 0.6;
        }

        .card-title {
            font-size: 11px;
            font-weight: 700;
            margin-bottom: 10px;
            color: var(--text2);
            letter-spacing: 1px;
            text-transform: uppercase;
            display: flex;
            align-items: center;
            gap: 6px;
        }

        .card-title::after {
            content: '';
            flex: 1;
            height: 1px;
            background: linear-gradient(90deg, rgba(255, 255, 255, 0.06), transparent);
        }

        .styled-select {
            width: 100%;
            padding: 10px 14px;
            border-radius: 12px;
            background: rgba(8, 10, 18, 0.85);
            border: 1px solid rgba(255, 255, 255, 0.06);
            color: var(--text);
            font-family: var(--font);
            font-size: 12px;
            font-weight: 500;
            outline: none;
            cursor: pointer;
            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
        }

        .styled-select:focus {
            border-color: var(--scheme);
            box-shadow: 0 0 0 2px var(--scheme-glow), 0 0 12px var(--scheme-glow);
        }

        .styled-select:hover {
            border-color: rgba(255, 255, 255, 0.1);
            background: rgba(10, 12, 20, 0.9);
        }

        .styled-select option {
            background: var(--bg3);
            color: var(--text);
        }

        /* -- Toggle Switches -- */
        .toggles-card {
            display: flex;
            flex-direction: column;
            gap: 4px;
        }

        /* Allow help tooltips to escape card boundaries */
        .card.toggles-card,
        .settings-section {
            overflow: visible;
        }

        /* -- Help Tooltip (?) Icon -- */
        .help-tip {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 15px;
            height: 15px;
            border-radius: 50%;
            background: rgba(255, 255, 255, 0.04);
            border: 1px solid rgba(255, 255, 255, 0.10);
            color: rgba(180, 195, 220, 0.45);
            font-size: 9px;
            font-weight: 700;
            font-family: 'Inter', sans-serif;
            cursor: help;
            position: relative;
            flex-shrink: 0;
            transition: all 0.2s ease;
            margin-left: auto;
            line-height: 1;
        }

        .help-tip:hover {
            background: rgba(34, 235, 57, 0.12);
            border-color: rgba(34, 235, 57, 0.35);
            color: rgba(200, 220, 255, 0.9);
            box-shadow: 0 0 10px rgba(34, 235, 57, 0.15);
        }

        .help-tip .help-text {
            display: none;
        }

        /* Portal tooltip (appended to body by JS) */
        .help-tooltip-portal {
            position: fixed;
            z-index: 99999;
            width: 210px;
            padding: 10px 13px;
            border-radius: 10px;
            background: linear-gradient(135deg, rgba(10, 14, 28, 0.97) 0%, rgba(6, 10, 20, 0.98) 100%);
            border: 1px solid rgba(80, 120, 200, 0.18);
            box-shadow: 0 8px 30px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(60, 100, 180, 0.08), 0 0 20px rgba(34, 235, 57, 0.06);
            backdrop-filter: blur(16px);
            -webkit-backdrop-filter: blur(16px);
            color: rgba(200, 215, 240, 0.85);
            font-size: 11px;
            font-weight: 400;
            line-height: 1.55;
            text-align: left;
            white-space: normal;
            pointer-events: none;
            animation: helpTipIn 0.18s cubic-bezier(0.4, 0, 0.2, 1);
        }

        .help-tooltip-portal::after {
            content: '';
            position: absolute;
            right: 14px;
            width: 10px;
            height: 10px;
            background: rgba(10, 14, 28, 0.97);
            border-right: 1px solid rgba(80, 120, 200, 0.18);
            border-bottom: 1px solid rgba(80, 120, 200, 0.18);
        }

        .help-tooltip-portal.arrow-down::after {
            bottom: -5px;
            transform: rotate(45deg);
        }

        .help-tooltip-portal.arrow-up::after {
            top: -5px;
            transform: rotate(-135deg);
        }

        @keyframes helpTipIn {
            from {
                opacity: 0;
                transform: translateY(4px);
            }

            to {
                opacity: 1;
                transform: translateY(0);
            }
        }

        .toggle-row {
            display: flex;
            align-items: center;
            gap: 10px;
            padding: 7px 10px;
            border-radius: 12px;
            transition: background 0.2s, border-color 0.2s;
            border: 1px solid transparent;
        }

        .toggle-row:hover {
            background: rgba(255, 255, 255, 0.03);
            border-color: rgba(255, 255, 255, 0.03);
        }

        .t-icon {
            font-size: 14px;
            width: 20px;
            text-align: center;
            filter: drop-shadow(0 0 4px var(--scheme-glow));
            opacity: 0.85;
            transition: transform 0.2s;
        }

        .toggle-row:hover .t-icon {
            transform: scale(1.1);
        }

        .t-label {
            font-size: 12px;
            font-weight: 500;
            color: var(--text);
            flex: 1;
            letter-spacing: 0.2px;
        }

        .toggle-switch {
            position: relative;
            display: inline-block;
            width: 50px;
            height: 20px;
            flex-shrink: 0;
            cursor: pointer;
        }

        .toggle-switch input {
            opacity: 0;
            width: 0;
            height: 0;
            position: absolute;
            pointer-events: none;
        }

        .t-slider {
            position: absolute;
            inset: 0;
            border-radius: 999px;
            background: rgb(44, 48, 62);
            outline: 1.5px solid rgba(255, 255, 255, 0.06);
            cursor: pointer;
            transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
        }

        .t-slider:hover {
            background: rgb(55, 60, 76);
            outline-color: rgba(255, 255, 255, 0.1);
        }

        .t-slider::after {
            content: '';
            position: absolute;
            width: 25px;
            height: 16px;
            border-radius: 999px;
            background: #fff;
            left: 2px;
            top: 2px;
            transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.25s ease;
            box-shadow: 0 2px 6px rgba(0, 0, 0, 0.35);
        }

        .toggle-switch input:checked+.t-slider::after {
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3), 0 0 0 2px var(--scheme-glow);
        }

        .toggle-switch input:checked+.t-slider {
            background: var(--scheme);
            outline: 1.8px solid var(--scheme-toggle-glow);
        }

        .toggle-switch input:checked+.t-slider::after {
            transform: translateX(21px);
        }

        .engine-row .toggle-switch input:checked+.t-slider {
            background: rgb(40, 160, 80);
            box-shadow: 0 0 12px rgba(40, 180, 80, 0.4);
        }

        /* -- Segmented Controls -- */
        .seg-control {
            display: flex;
            position: relative;
            border-radius: 22px;
            background: rgba(12, 14, 22, 0.85);
            border: 1px solid rgba(255, 255, 255, 0.06);
            padding: 3px;
            margin-top: 16px;
            z-index: 3;
            box-shadow: 0 2px 12px rgba(0, 0, 0, 0.2), 0 0 0 1px rgba(255, 255, 255, 0.02) inset;
        }

        .seg-control.bottom {
            margin-top: 12px;
        }

        .seg-btn {
            padding: 9px 18px;
            border: none;
            border-radius: 19px;
            background: transparent;
            color: var(--text3);
            font-family: var(--font);
            font-size: 12px;
            font-weight: 600;
            cursor: pointer;
            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
            position: relative;
            z-index: 2;
            white-space: nowrap;
            letter-spacing: 0.3px;
        }

        .seg-btn:hover:not(.active) {
            color: var(--text2);
        }

        .seg-btn.active {
            color: #fff;
            text-shadow: 0 0 10px rgba(255, 255, 255, 0.3);
        }

        .seg-highlight {
            position: absolute;
            top: 3px;
            height: calc(100% - 6px);
            border-radius: 19px;
            background: linear-gradient(135deg, var(--scheme) 0%, var(--scheme-dim) 100%);
            transition: left 0.4s cubic-bezier(0.4, 0, 0.2, 1), width 0.4s cubic-bezier(0.4, 0, 0.2, 1);
            box-shadow: 0 0 18px var(--scheme-glow), 0 2px 8px rgba(0, 0, 0, 0.3);
            z-index: 1;
        }

        /* -- Scripts Page -- */
        .scripts-layout {
            display: flex;
            height: 100%;
            gap: 14px;
        }

        .scripts-sidebar {
            width: 230px;
            flex-shrink: 0;
            display: flex;
            flex-direction: column;
            gap: 4px;
            padding: 4px 0;
        }

        .scripts-search {
            width: 100%;
            padding: 10px 14px;
            border-radius: 12px;
            background: rgba(10, 12, 20, 0.85);
            border: 1px solid rgba(255, 255, 255, 0.06);
            color: var(--text);
            font-family: var(--font);
            font-size: 12px;
            outline: none;
            margin-bottom: 8px;
            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
        }

        .scripts-search:focus {
            border-color: var(--scheme);
            box-shadow: 0 0 0 2px var(--scheme-glow), 0 0 16px var(--scheme-glow);
            background: rgba(10, 12, 20, 0.95);
        }

        .scripts-search::placeholder {
            color: rgba(100, 110, 140, 0.35);
        }

        .scripts-tabs {
            display: flex;
            flex-direction: column;
            gap: 3px;
            position: relative;
        }

        .stab-btn {
            display: flex;
            align-items: center;
            gap: 8px;
            width: 100%;
            padding: 8px 12px;
            border: none;
            border-radius: 12px;
            background: rgba(14, 16, 24, 0.6);
            color: rgba(180, 190, 210, 0.7);
            font-family: var(--font);
            font-size: 12px;
            font-weight: 600;
            cursor: pointer;
            transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
            position: relative;
            border: 1px solid transparent;
        }

        .stab-btn:hover {
            background: rgba(20, 22, 34, 0.85);
            border-color: rgba(255, 255, 255, 0.04);
            transform: translateX(2px);
        }

        .stab-btn.active {
            color: #fff;
            background: rgba(20, 22, 34, 0.9);
            border-color: var(--scheme-alpha);
        }

        .stab-dot {
            width: 8px;
            height: 8px;
            border-radius: 50%;
            flex-shrink: 0;
            background: rgba(55, 55, 65, 1);
            transition: all 0.3s;
        }

        .stab-btn.has-active .stab-dot {
            box-shadow: 0 0 6px currentColor;
        }

        .stab-label {
            flex: 1;
            text-align: left;
        }

        .stab-count {
            font-size: 10px;
            padding: 1px 5px;
            border-radius: 5px;
            background: rgba(255, 255, 255, 0.08);
            color: rgba(200, 210, 230, 0.7);
        }

        .stab-highlight {
            position: absolute;
            left: -2px;
            width: 4px;
            border-radius: 3px;
            transition: top 0.3s cubic-bezier(0.4, 0, 0.2, 1), height 0.3s;
            z-index: 5;
        }

        .scripts-content {
            flex: 1;
            max-width: 1120px;
            overflow-y: auto;
            padding: 4px 0;
            display: flex;
            flex-direction: column;
            gap: 6px;
        }

        .scripts-content::-webkit-scrollbar {
            width: 4px;
        }

        .scripts-content::-webkit-scrollbar-thumb {
            background: var(--scheme-alpha);
            border-radius: 4px;
        }

        .smacro-card {
            border-radius: 14px;
            padding: 14px 18px;
            position: relative;
            background: linear-gradient(145deg, rgba(12, 14, 24, 0.9) 0%, rgba(16, 19, 32, 0.85) 100%);
            border: 1px solid rgba(255, 255, 255, 0.05);
            cursor: pointer;
            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
            overflow: hidden;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
        }

        .smacro-card:hover {
            transform: translateY(-2px);
            border-color: rgba(255, 255, 255, 0.08);
            box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2), 0 0 12px var(--scheme-glow);
        }

        .smacro-card.enabled {
            border-color: rgba(48, 185, 85, 0.25);
        }

        .smacro-card.enabled::before {
            content: '';
            position: absolute;
            left: 0;
            top: 0;
            bottom: 0;
            width: 3px;
            background: rgba(48, 195, 95, 0.6);
            border-radius: 3px 0 0 3px;
        }

        .smacro-card:not(.enabled)::after {
            content: '';
            position: absolute;
            inset: 0;
            background: rgba(0, 0, 0, 0.1);
            border-radius: 10px;
            pointer-events: none;
        }

        .smacro-header {
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin-bottom: 4px;
        }

        .smacro-title-area {
            display: flex;
            align-items: center;
            gap: 8px;
        }

        .smacro-sq {
            width: 8px;
            height: 8px;
            border-radius: 2px;
            flex-shrink: 0;
            background: rgba(70, 80, 115, 0.7);
        }

        .smacro-card.enabled .smacro-sq {
            background: var(--stab-color, rgba(34, 235, 57, 1));
        }

        .smacro-title {
            font-size: 14px;
            font-weight: 700;
            color: rgba(240, 245, 255, 0.95);
        }

        .smacro-card:not(.enabled) .smacro-title {
            color: rgba(180, 190, 210, 0.85);
        }

        .smacro-badge {
            font-size: 7px;
            font-weight: 800;
            letter-spacing: 0.5px;
            padding: 2px 6px;
            border-radius: 5px;
        }

        .smacro-badge.on {
            color: rgba(50, 220, 100, 0.9);
            border: 1px solid rgba(50, 195, 95, 0.25);
        }

        .smacro-badge.off {
            color: rgba(130, 140, 165, 0.7);
            background: rgba(30, 35, 50, 0.5);
        }

        .smacro-subtitle {
            font-size: 9px;
            color: rgba(95, 105, 130, 0.6);
            margin-bottom: 6px;
        }

        .smacro-card.enabled .smacro-subtitle {
            color: rgba(95, 105, 130, 0.65);
        }

        .smacro-body {
            display: flex;
            flex-direction: column;
            gap: 6px;
            position: relative;
            z-index: 1;
        }

        .smacro-toggle-row {
            display: flex;
            align-items: center;
            justify-content: space-between;
        }

        .smacro-toggle-label {
            font-size: 12px;
            color: var(--text);
        }


        .smacro-slider-row {
            display: flex;
            align-items: center;
            gap: 8px;
        }

        .smacro-slider-label {
            font-size: 11px;
            font-weight: 600;
            color: rgba(166, 191, 230, 0.80);
            min-width: 80px;
        }

        .smacro-slider {
            -webkit-appearance: none;
            appearance: none;
            flex: 1;
            height: 7px;
            border-radius: 3.5px;
            background: rgb(8, 12, 22);
            outline: none;
        }

        .smacro-slider::-webkit-slider-thumb {
            -webkit-appearance: none;
            width: 12px;
            height: 12px;
            border-radius: 50%;
            background: #fff;
            cursor: pointer;
            border: none;
            margin-top: -2.5px;
            box-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
        }

        .smacro-slider-val {
            font-size: 11px;
            font-weight: 700;
            color: rgba(100, 210, 255, 0.82);
            min-width: 30px;
            text-align: right;
            cursor: pointer;
            padding: 2px 6px;
            border-radius: 6px;
            transition: background 0.2s, box-shadow 0.2s;
            user-select: none;
            position: relative;
        }

        .smacro-slider-val:hover {
            background: rgba(100, 210, 255, 0.1);
            box-shadow: 0 0 0 1px rgba(100, 210, 255, 0.25);
        }

        .smacro-slider-val-input {
            width: 60px;
            height: 24px;
            font-size: 12px;
            font-weight: 700;
            font-family: var(--mono);
            color: #fff;
            background: rgba(8, 14, 28, 0.95);
            border: 1px solid rgba(100, 210, 255, 0.5);
            border-radius: 6px;
            padding: 0 6px;
            text-align: center;
            outline: none;
            box-shadow: 0 0 12px rgba(100, 210, 255, 0.15), 0 0 0 2px rgba(100, 210, 255, 0.08);
            -webkit-user-select: text;
            user-select: text;
            animation: valInputFadeIn 0.15s ease;
        }

        .smacro-slider-val-input:focus {
            border-color: rgba(100, 210, 255, 0.7);
            box-shadow: 0 0 16px rgba(100, 210, 255, 0.25), 0 0 0 3px rgba(100, 210, 255, 0.12);
        }

        @keyframes valInputFadeIn {
            from {
                opacity: 0;
                transform: scale(0.9);
            }

            to {
                opacity: 1;
                transform: scale(1);
            }
        }

        /* Script Keybind Binder (matches C++ widgets->binder pill chip) */
        .script-binder-box {
            display: flex;
            align-items: center;
            flex: 1;
        }

        .script-binder-btn {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            min-width: 50px;
            height: 24px;
            padding: 0 14px;
            border-radius: 12px;
            background: rgba(18, 22, 30, 1);
            border: 1px solid var(--scheme-dim, rgba(34, 235, 57, 0.10));
            color: var(--scheme-text, rgba(34, 235, 57, 0.65));
            font-size: 11px;
            font-weight: 600;
            font-family: inherit;
            cursor: pointer;
            transition: all 0.18s ease;
            letter-spacing: 0.3px;
            position: relative;
        }

        .script-binder-btn:hover {
            background: rgba(22, 27, 36, 1);
            border-color: var(--scheme-hover, rgba(34, 235, 57, 0.35));
            color: var(--scheme-hover-text, rgba(34, 235, 57, 0.90));
            box-shadow: 0 0 8px var(--scheme-glow, rgba(34, 235, 57, 0.06));
        }

        .script-binder-btn.listening {
            background: rgba(22, 27, 36, 1);
            border-color: var(--scheme, rgba(34, 235, 57, 0.5));
            color: var(--scheme, rgba(34, 235, 57, 1));
            animation: binder-pulse 0.8s ease infinite;
            box-shadow: 0 0 12px var(--scheme-glow, rgba(34, 235, 57, 0.12));
        }

        .script-binder-btn.has-key {
            border-color: var(--scheme-dim, rgba(34, 235, 57, 0.18));
            color: var(--scheme-text, rgba(34, 235, 57, 0.75));
        }

        .script-binder-btn .binder-x {
            position: absolute;
            right: -8px;
            top: -6px;
            width: 14px;
            height: 14px;
            border-radius: 50%;
            background: rgba(255, 60, 60, 0.8);
            color: #fff;
            font-size: 9px;
            font-weight: 700;
            display: flex;
            align-items: center;
            justify-content: center;
            opacity: 0;
            transition: opacity 0.15s;
            cursor: pointer;
            border: none;
            padding: 0;
            line-height: 1;
        }

        .script-binder-btn:hover .binder-x {
            opacity: 1;
        }

        @keyframes binder-pulse {

            0%,
            100% {
                opacity: 1;
            }

            50% {
                opacity: 0.5;
            }
        }

        .smacro-extra {
            display: flex;
            flex-direction: column;
            gap: 6px;
            max-height: 0;
            overflow: hidden;
            opacity: 0;
            transition: max-height 0.35s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.25s ease, margin-top 0.25s ease;
            margin-top: 0;
            position: relative;
            z-index: 1;
        }

        .smacro-extra.open {
            max-height: 1200px;
            opacity: 1;
            margin-top: 6px;
        }

        .scripts-empty {
            text-align: center;
            padding: 40px;
            color: var(--text3);
            font-size: 13px;
        }

        /* -- Config List -- */
        /* -- Config Page — matches C++ ImGui reference exactly -- */
        .config-area {
            padding: 18px 27px;
            position: relative;
            height: 100%;
        }

        /* Header close button — sits next to the connection indicator */
        .hdr-close {
            width: 30px;
            height: 30px;
            margin-left: 10px;
            border-radius: 9px;
            border: 1px solid rgba(255, 255, 255, .1);
            background: rgba(255, 255, 255, .04);
            color: rgba(210, 225, 245, .65);
            font-size: 20px;
            line-height: 1;
            font-family: inherit;
            cursor: pointer;
            transition: all .2s;
        }

        .hdr-close:hover {
            background: rgba(255, 0, 110, .16);
            border-color: rgba(255, 0, 110, .55);
            color: #ff006e;
        }

        .uc-btn.danger {
            color: #ff006e;
            border-color: rgba(255, 0, 110, .5);
            background: rgba(255, 0, 110, .14);
        }

        .uc-btn.danger:hover { background: rgba(255, 0, 110, .28); color: #fff; }

        /* --- User Configs (VPS-hosted shared configs) --- */
        .uc-toolbar {
            display: flex;
            align-items: center;
            gap: 10px;
            margin-bottom: 16px;
            flex-wrap: wrap;
        }

        #uc-search {
            flex: 0 1 260px;
            padding: 9px 14px;
            background: rgba(14, 16, 24, 0.9);
            border: 1px solid rgba(255, 255, 255, 0.09);
            border-radius: 10px;
            color: rgba(220, 235, 255, 0.95);
            font-size: 13px;
            font-family: inherit;
            outline: none;
            transition: border-color .2s, box-shadow .2s;
        }

        #uc-search:focus {
            border-color: var(--scheme-alpha);
            box-shadow: 0 0 0 3px var(--scheme-glow);
        }

        .uc-filters {
            display: flex;
            gap: 6px;
            flex-wrap: wrap;
        }

        .uc-filter {
            padding: 8px 14px;
            background: rgba(14, 16, 24, 0.7);
            border: 1px solid rgba(255, 255, 255, 0.08);
            border-radius: 9px;
            color: rgba(200, 215, 240, 0.7);
            font-size: 12px;
            font-weight: 600;
            font-family: inherit;
            cursor: pointer;
            white-space: nowrap;
            transition: all .2s;
        }

        .uc-filter:hover { color: rgba(230, 240, 255, .95); border-color: rgba(255,255,255,.16); }

        .uc-filter.active {
            color: var(--scheme);
            border-color: var(--scheme-alpha);
            background: var(--scheme-glow);
        }

        .uc-refresh {
            margin-left: auto;
            width: 34px;
            height: 34px;
            background: rgba(14, 16, 24, 0.7);
            border: 1px solid rgba(255, 255, 255, 0.08);
            border-radius: 9px;
            color: rgba(200, 215, 240, 0.8);
            font-size: 16px;
            cursor: pointer;
            transition: all .2s;
        }

        .uc-refresh:hover { color: var(--scheme); border-color: var(--scheme-alpha); }
        .uc-refresh.spin { animation: uc-spin .7s linear infinite; }

        @keyframes uc-spin { to { transform: rotate(360deg); } }

        .uc-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(248px, 1fr));
            gap: 14px;
            align-content: start;
            overflow-y: auto;
            max-height: calc(100% - 70px);
            padding-right: 4px;
        }

        .uc-empty {
            grid-column: 1 / -1;
            padding: 40px 12px;
            text-align: center;
            color: rgba(190, 205, 230, 0.45);
            font-size: 13px;
        }

        .uc-empty.small { padding: 16px 0; }

        .uc-card {
            background: linear-gradient(145deg, rgba(17, 19, 28, 0.95) 0%, rgba(12, 14, 22, 0.9) 100%);
            border: 1px solid rgba(255, 255, 255, 0.08);
            border-radius: 16px;
            padding: 14px;
            display: flex;
            flex-direction: column;
            gap: 9px;
            transition: all .28s cubic-bezier(.4, 0, .2, 1);
            box-shadow: 0 2px 12px rgba(0, 0, 0, .18), inset 0 1px 0 rgba(255, 255, 255, .05);
        }

        .uc-card:hover {
            border-color: var(--scheme-alpha);
            box-shadow: 0 8px 30px rgba(0, 0, 0, .25), 0 0 16px var(--scheme-glow);
            transform: translateY(-3px);
        }

        .uc-thumb {
            width: 100%;
            height: 104px;
            border-radius: 10px;
            object-fit: cover;
            background: rgba(255, 255, 255, .03);
            border: 1px solid rgba(255, 255, 255, .06);
        }

        .uc-thumb.placeholder {
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 26px;
            color: rgba(190, 205, 230, .25);
        }

        .uc-card h3 {
            margin: 0;
            font-size: 14px;
            font-weight: 700;
            color: rgba(228, 238, 252, .96);
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }

        .uc-meta { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }

        .uc-badge {
            padding: 3px 9px;
            border-radius: 999px;
            font-size: 10px;
            font-weight: 700;
            letter-spacing: .3px;
            color: var(--scheme);
            background: var(--scheme-glow);
            border: 1px solid var(--scheme-alpha);
            white-space: nowrap;
        }

        .uc-file {
            font-size: 10.5px;
            color: rgba(190, 205, 230, .5);
            font-family: 'JetBrains Mono', monospace;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }

        .uc-card-actions { display: flex; gap: 7px; margin-top: auto; }

        .uc-btn {
            flex: 1;
            padding: 8px 10px;
            border-radius: 9px;
            border: 1px solid rgba(255, 255, 255, .1);
            background: rgba(255, 255, 255, .04);
            color: rgba(215, 230, 250, .9);
            font-size: 11.5px;
            font-weight: 600;
            font-family: inherit;
            cursor: pointer;
            white-space: nowrap;
            transition: all .2s;
        }

        .uc-btn:hover { background: rgba(255, 255, 255, .09); border-color: rgba(255,255,255,.2); }

        .uc-btn.primary {
            color: var(--scheme);
            border-color: var(--scheme-alpha);
            background: var(--scheme-glow);
        }

        .uc-btn.primary:hover { background: var(--scheme-alpha); color: #fff; }
        .uc-btn:disabled { opacity: .55; cursor: default; }

        /* -- Info modal -- */
        /* --- Upload config (User Configs tab) --- */
        .uc-upload {
            margin-left: auto;
            padding: 0 14px;
            height: 34px;
            background: var(--scheme, #22eb39);
            border: 1px solid transparent;
            border-radius: 9px;
            color: #06121f;
            font-size: 12.5px;
            font-weight: 700;
            font-family: inherit;
            cursor: pointer;
            white-space: nowrap;
            transition: filter .2s, transform .1s;
        }
        .uc-upload:hover { filter: brightness(1.08); }
        .uc-upload:active { transform: translateY(1px); }
        /* The upload button already pushes the row to the right, so the
           refresh button no longer needs its own auto-margin. */
        .uc-upload + .uc-refresh { margin-left: 0; }
        .ucup-sub { margin: 6px 0 0; font-size: 12.5px; color: rgba(190, 205, 230, .6); line-height: 1.5; }
        .ucup-field { margin-bottom: 16px; }
        .ucup-label { display: block; font-size: 12px; font-weight: 600; color: rgba(210, 225, 250, .85); margin-bottom: 7px; }
        .ucup-hint { font-weight: 500; color: rgba(160, 178, 205, .55); margin-left: 4px; }
        .ucup-input {
            width: 100%;
            padding: 10px 12px;
            background: rgba(14, 16, 24, .9);
            border: 1px solid rgba(255, 255, 255, .1);
            border-radius: 10px;
            color: rgba(225, 238, 255, .96);
            font-size: 13px;
            font-family: inherit;
            outline: none;
            transition: border-color .2s, box-shadow .2s;
            box-sizing: border-box;
        }
        .ucup-input:focus { border-color: var(--scheme, #22eb39); box-shadow: 0 0 0 3px var(--scheme-alpha, rgba(34, 235, 57, .15)); }
        .ucup-textarea { resize: vertical; min-height: 74px; }
        .ucup-zone {
            display: flex;
            align-items: center;
            justify-content: center;
            min-height: 60px;
            padding: 14px;
            text-align: center;
            background: rgba(14, 16, 24, .6);
            border: 1.5px dashed rgba(255, 255, 255, .15);
            border-radius: 11px;
            color: rgba(180, 198, 225, .7);
            font-size: 12.5px;
            cursor: pointer;
            transition: border-color .2s, background .2s, color .2s;
        }
        .ucup-zone:hover { border-color: var(--scheme, #22eb39); color: rgba(215, 230, 250, .9); }
        .ucup-zone.has-file { border-style: solid; border-color: var(--scheme-alpha, rgba(34, 235, 57, .5)); color: var(--scheme, #22eb39); background: rgba(34, 235, 57, .06); }
        .ucup-err { color: #f87171; font-size: 12px; margin-top: 6px; min-height: 1em; }
        .ucup-err:empty { display: none; }
        .ucup-gallery { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
        .ucup-gallery img { width: 74px; height: 74px; object-fit: cover; border-radius: 9px; border: 1px solid rgba(255, 255, 255, .12); }

        .uc-modal {
            display: none;
            position: fixed;
            inset: 0;
            background: rgba(0, 0, 0, .78);
            backdrop-filter: blur(4px);
            z-index: 4000;
            align-items: center;
            justify-content: center;
            padding: 24px;
        }

        .uc-modal.open { display: flex; }

        .uc-modal-box {
            background: linear-gradient(160deg, rgba(20, 22, 32, .99), rgba(13, 15, 23, .99));
            border: 1px solid rgba(255, 255, 255, .1);
            border-radius: 18px;
            width: min(660px, 100%);
            max-height: 86vh;
            display: flex;
            flex-direction: column;
            box-shadow: 0 24px 70px rgba(0, 0, 0, .6);
        }

        .uc-modal-head {
            display: flex;
            justify-content: space-between;
            align-items: flex-start;
            gap: 14px;
            padding: 20px 22px 14px;
            border-bottom: 1px solid rgba(255, 255, 255, .07);
        }

        .uc-modal-head h2 {
            margin: 0 0 7px;
            font-size: 18px;
            font-weight: 700;
            color: rgba(232, 242, 255, .97);
        }

        .uc-modal-sub { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }

        .uc-modal-x {
            background: transparent;
            border: none;
            color: rgba(200, 215, 240, .55);
            font-size: 26px;
            line-height: 1;
            cursor: pointer;
            padding: 0 4px;
            transition: color .2s;
        }

        .uc-modal-x:hover { color: rgba(255, 255, 255, .95); }

        .uc-modal-body { padding: 18px 22px; overflow-y: auto; }

        .uc-sec { margin-bottom: 20px; }
        .uc-sec:last-child { margin-bottom: 0; }

        .uc-sec-label {
            font-size: 10.5px;
            font-weight: 700;
            letter-spacing: .8px;
            text-transform: uppercase;
            color: rgba(190, 205, 230, .5);
            margin-bottom: 8px;
        }

        .uc-sec p {
            margin: 0;
            font-size: 13px;
            line-height: 1.65;
            color: rgba(215, 228, 245, .85);
            white-space: pre-wrap;
            word-break: break-word;
        }

        .uc-gallery { display: flex; gap: 8px; flex-wrap: wrap; }

        .uc-gallery img {
            width: 108px;
            height: 68px;
            object-fit: cover;
            border-radius: 8px;
            border: 1px solid rgba(255, 255, 255, .1);
            cursor: pointer;
            transition: transform .2s, border-color .2s;
        }

        .uc-gallery img:hover { transform: scale(1.05); border-color: var(--scheme); }

        .uc-grp { margin-bottom: 14px; }

        .uc-grp-name {
            font-size: 11.5px;
            font-weight: 700;
            color: var(--scheme);
            margin-bottom: 6px;
        }

        .uc-kv {
            display: grid;
            grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
            gap: 2px 12px;
            font-family: 'JetBrains Mono', monospace;
            font-size: 11.5px;
        }

        .uc-kv > div {
            padding: 4px 8px;
            border-radius: 5px;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }

        .uc-kv .k { color: rgba(190, 205, 230, .62); }
        .uc-kv .v { color: rgba(228, 240, 255, .95); text-align: right; }
        .uc-kv > div:nth-child(4n+1), .uc-kv > div:nth-child(4n+2) { background: rgba(255, 255, 255, .022); }

        .uc-modal-foot {
            display: flex;
            gap: 10px;
            padding: 14px 22px 20px;
            border-top: 1px solid rgba(255, 255, 255, .07);
        }

        /* -- Screenshot viewer -- */
        .uc-viewer {
            display: none;
            position: fixed;
            inset: 0;
            background: rgba(0, 0, 0, .93);
            z-index: 4100;
            align-items: center;
            justify-content: center;
        }

        .uc-viewer.open { display: flex; }

        .uc-viewer img {
            max-width: 88vw;
            max-height: 88vh;
            border-radius: 10px;
            box-shadow: 0 20px 60px rgba(0, 0, 0, .7);
        }

        .uc-viewer-x {
            position: absolute;
            top: 20px;
            right: 26px;
            background: transparent;
            border: none;
            color: rgba(255, 255, 255, .8);
            font-size: 38px;
            line-height: 1;
            cursor: pointer;
        }

        .uc-viewer-nav {
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
            background: rgba(255, 255, 255, .08);
            border: 1px solid rgba(255, 255, 255, .14);
            color: #fff;
            width: 46px;
            height: 46px;
            border-radius: 50%;
            font-size: 26px;
            line-height: 1;
            cursor: pointer;
            transition: background .2s;
        }

        .uc-viewer-nav:hover { background: rgba(255, 255, 255, .2); }
        .uc-viewer-nav.prev { left: 24px; }
        .uc-viewer-nav.next { right: 24px; }

        .config-header-row {
            display: flex;
            align-items: baseline;
            gap: 0;
            margin-bottom: 14px;
        }

        .config-active-label {
            font-size: 16px;
            font-weight: 400;
            color: rgba(160, 175, 200, 0.55);
            font-family: var(--font);
        }

        .config-active-name {
            font-size: 16px;
            font-weight: 700;
            color: rgba(240, 245, 255, 0.95);
            font-family: var(--font);
        }

        #cfg-get-config:hover {
            transform: translateY(-2px) scale(1.05);
            box-shadow: 0 0 30px rgba(99, 102, 241, 0.6), 0 6px 20px rgba(0, 0, 0, 0.4);
            filter: brightness(1.15);
        }

        #cfg-get-config:active {
            transform: translateY(0) scale(0.97);
        }

        @keyframes getConfigPulse {

            0%,
            100% {
                box-shadow: 0 0 20px rgba(99, 102, 241, 0.4), 0 4px 15px rgba(0, 0, 0, 0.3);
            }

            50% {
                box-shadow: 0 0 28px rgba(139, 92, 246, 0.55), 0 4px 18px rgba(0, 0, 0, 0.35);
            }
        }

        .config-grid {
            display: flex;
            flex-wrap: wrap;
            gap: 13px;
        }

        /* Each card: 218×130 matching C++ */
        .cfg-card {
            width: 218px;
            height: 130px;
            background: linear-gradient(145deg, rgba(17, 19, 28, 0.95) 0%, rgba(12, 14, 22, 0.9) 100%);
            border: 1px solid rgba(255, 255, 255, 0.08);
            border-radius: 18px;
            padding: 16px;
            position: relative;
            cursor: pointer;
            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
            display: flex;
            flex-direction: column;
            overflow: hidden;
            box-shadow: 0 2px 12px rgba(0, 0, 0, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.05);
        }

        .cfg-card:hover {
            border-color: var(--scheme-alpha);
            box-shadow: 0 8px 30px rgba(0, 0, 0, 0.25), 0 0 16px var(--scheme-glow);
            transform: translateY(-3px);
        }

        .cfg-card.cfg-active {
            border-color: var(--scheme-alpha);
            box-shadow: 0 0 20px var(--scheme-glow), 0 4px 16px rgba(0, 0, 0, 0.2);
        }

        /* Create New card */
        .cfg-card.cfg-new {
            align-items: center;
            justify-content: center;
            gap: 10px;
            border-style: dashed;
            border-color: rgba(255, 255, 255, 0.08);
            background: rgba(14, 16, 24, 0.5);
        }

        .cfg-card.cfg-new:hover {
            border-color: var(--scheme);
            background: rgba(16, 18, 28, 0.85);
            box-shadow: 0 0 24px var(--scheme-glow), 0 8px 30px rgba(0, 0, 0, 0.2);
        }

        .cfg-new-icon {
            font-size: 28px;
            color: rgba(160, 180, 220, 0.5);
            transition: color 0.2s;
        }

        .cfg-card.cfg-new:hover .cfg-new-icon {
            color: var(--scheme);
        }

        .cfg-new-text {
            font-size: 13px;
            font-weight: 600;
            color: rgba(160, 180, 220, 0.6);
            font-family: var(--font);
        }

        .cfg-card.cfg-new:hover .cfg-new-text {
            color: rgba(220, 230, 255, 0.9);
        }

        /* Config name — bold, top area */
        .cfg-card-name {
            font-size: 16px;
            font-weight: 700;
            color: rgba(240, 245, 255, 0.95);
            font-family: var(--font);
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            padding-right: 30px;
            line-height: 1.2;
        }

        /* File path — dimmed, under name */
        .cfg-card-path {
            font-size: 11px;
            font-weight: 400;
            color: rgba(140, 155, 180, 0.55);
            font-family: var(--font);
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            margin-top: 2px;
        }

        /* V Logo image (bottom-left) */
        .cfg-card-img {
            position: absolute;
            left: 11px;
            bottom: 8px;
            width: 40px;
            height: 40px;
            border-radius: 8px;
            background: rgba(30, 35, 50, 0.4);
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 22px;
            color: rgba(140, 160, 200, 0.4);
            border: 1px solid rgba(255, 255, 255, 0.04);
        }

        /* Delete button — top right corner */
        .cfg-card-del {
            position: absolute !important;
            top: -1px !important;
            right: -1px !important;
            left: auto !important;
            width: 24px;
            height: 24px;
            border: none;
            background: rgba(255, 50, 50, 0.08);
            color: rgba(255, 100, 100, 0);
            font-size: 10px;
            font-weight: 700;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: all 0.25s;
            border-radius: 0 18px 0 10px;
            z-index: 5;
            line-height: 1;
        }

        .cfg-card:hover .cfg-card-del {
            color: rgba(255, 120, 120, 0.8);
            background: rgba(255, 50, 50, 0.15);
        }

        .cfg-card-del:hover {
            color: #fff !important;
            background: rgba(255, 50, 50, 0.6) !important;
            box-shadow: 0 0 14px rgba(255, 50, 50, 0.3);
        }

        /* Load button — bottom right, rounded pill */
        .cfg-card-load {
            position: absolute;
            right: 14px;
            bottom: 12px;
            padding: 6px 16px;
            border-radius: 999px;
            border: none;
            background: rgba(240, 245, 255, 0.92);
            color: rgb(17, 18, 25);
            font-family: var(--font);
            font-size: 12px;
            font-weight: 700;
            cursor: pointer;
            display: flex;
            align-items: center;
            gap: 5px;
            transition: all 0.2s;
        }

        .cfg-card-load:hover {
            background: rgba(255, 255, 255, 1);
            box-shadow: 0 2px 10px rgba(255, 255, 255, 0.2);
            transform: scale(1.04);
        }

        .cfg-card-load-icon {
            font-size: 10px;
        }

        .config-empty {
            color: rgba(140, 155, 180, 0.5);
            font-size: 13px;
            text-align: center;
            padding: 40px 20px;
            width: 100%;
        }


        /* -- Macros Page -- */
        .macros-page {
            position: relative;
            height: 100%;
            display: flex;
            flex-direction: column;
        }

        .macros-header {
            background: linear-gradient(180deg, rgba(10, 12, 18, 0.85) 0%, rgba(10, 12, 18, 0.6) 100%);
            padding: 12px 22px 0;
            position: relative;
            border-bottom: none;
            flex-shrink: 0;
        }

        .macros-header-accent {
            position: absolute;
            bottom: 0;
            left: 0;
            right: 0;
            height: 2px;
            background: var(--scheme-alpha);
            overflow: hidden;
        }

        .macros-header-accent::after {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            height: 100%;
            width: 30%;
            background: linear-gradient(90deg, var(--scheme), rgba(34, 235, 57, 0.3));
            animation: accentSlide 6s linear infinite;
        }

        @keyframes accentSlide {
            0% {
                left: -30%;
            }

            100% {
                left: 100%;
            }
        }

        .macros-row1 {
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin-bottom: 2px;
        }

        .macros-title-area {
            display: flex;
            align-items: center;
            gap: 10px;
        }

        .macros-title {
            font-size: 20px;
            font-weight: 800;
            margin: 0;
            background: linear-gradient(135deg, rgba(240, 242, 255, 0.95) 0%, var(--scheme) 150%);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
        }

        .macros-badge {
            font-size: 11px;
            font-weight: 600;
            padding: 2px 8px;
            border-radius: 10px;
            background: var(--scheme-alpha);
            border: 0.6px solid var(--scheme-glow);
            color: var(--scheme);
        }

        .macros-subtitle {
            font-size: 12px;
            color: rgba(140, 155, 185, 0.65);
            margin-bottom: 10px;
        }

        .macros-search-wrap {
            position: relative;
            display: flex;
            align-items: center;
            background: rgba(10, 12, 20, 0.85);
            border-radius: 12px;
            border: 1px solid rgba(255, 255, 255, 0.06);
            overflow: hidden;
            width: 210px;
            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        }

        .macros-search-wrap:focus-within {
            border-color: var(--scheme);
            box-shadow: 0 0 0 2px var(--scheme-glow), 0 0 12px var(--scheme-glow);
            background: rgba(10, 12, 20, 0.95);
        }

        .macros-search-icon {
            padding: 0 6px 0 10px;
            font-size: 12px;
            opacity: 0.45;
        }

        .macros-search {
            flex: 1;
            padding: 6px 8px;
            background: none;
            border: none;
            color: var(--text);
            font-family: var(--font);
            font-size: 12px;
            outline: none;
        }

        .macros-search::placeholder {
            color: rgba(130, 140, 165, 0.5);
        }

        .macros-search-clear {
            position: absolute;
            right: 4px;
            top: 50%;
            transform: translateY(-50%);
            width: 18px;
            height: 18px;
            border: none;
            border-radius: 4px;
            background: transparent;
            color: rgba(180, 70, 70, 0.7);
            font-size: 11px;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .macros-search-clear:hover {
            color: rgba(255, 80, 80, 1);
            background: rgba(255, 80, 80, 0.1);
        }

        .macros-search-clear.hidden {
            display: none;
        }

        .macros-row2 {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding-bottom: 10px;
        }

        .macros-filter-area {
            display: flex;
            align-items: center;
            gap: 8px;
        }

        .macros-seg-filter {
            display: flex;
            position: relative;
            border-radius: 14px;
            background: rgba(12, 14, 22, 0.85);
            border: 1px solid rgba(255, 255, 255, 0.05);
            padding: 2px;
        }

        .mseg-btn {
            padding: 5px 18px;
            border: none;
            border-radius: 11px;
            background: transparent;
            color: rgba(140, 155, 185, 0.6);
            font-family: var(--font);
            font-size: 11px;
            font-weight: 600;
            cursor: pointer;
            position: relative;
            z-index: 2;
            transition: color 0.2s;
            white-space: nowrap;
        }

        .mseg-btn:hover {
            color: rgba(200, 210, 230, 0.85);
        }

        .mseg-btn.active {
            color: #fff;
            font-weight: 700;
        }

        .mseg-highlight {
            position: absolute;
            top: 2px;
            height: calc(100% - 4px);
            border-radius: 11px;
            background: var(--scheme);
            transition: left 0.3s cubic-bezier(0.4, 0, 0.2, 1), width 0.3s cubic-bezier(0.4, 0, 0.2, 1);
            z-index: 1;
            opacity: 0.75;
        }

        .mseg-highlight::after {
            content: '';
            position: absolute;
            inset: 0;
            border-radius: 11px;
            background: linear-gradient(to bottom, rgba(255, 255, 255, 0.1), transparent 40%);
        }

        .macros-cat-select {
            padding: 5px 10px;
            border-radius: 10px;
            font-size: 11px;
            font-weight: 500;
            background: rgba(16, 18, 26, 0.92);
            border: 0.5px solid rgba(40, 45, 60, 0.4);
            color: var(--text);
            font-family: var(--font);
            outline: none;
            cursor: pointer;
        }

        .macros-actions {
            display: flex;
            gap: 8px;
            align-items: center;
        }

        .mbtn {
            padding: 7px 18px;
            border-radius: 10px;
            font-family: var(--font);
            font-size: 12px;
            font-weight: 600;
            cursor: pointer;
            border: 1px solid transparent;
            transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
            letter-spacing: 0.3px;
        }

        .mbtn-select {
            background: rgba(60, 70, 90, 0.8);
            color: var(--text);
            border-color: rgba(60, 70, 90, 0.5);
        }

        .mbtn-select:hover {
            background: rgba(70, 80, 100, 0.9);
        }

        .mbtn-start {
            background: transparent;
            color: rgb(80, 200, 120);
            border-color: rgba(35, 120, 60, 0.5);
        }

        .mbtn-start:hover {
            background: rgba(35, 120, 60, 0.15);
        }

        .mbtn-stop {
            background: transparent;
            color: rgb(220, 80, 80);
            border-color: rgba(150, 45, 45, 0.5);
        }

        .mbtn-stop:hover {
            background: rgba(150, 45, 45, 0.15);
        }

        .macros-grid {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 8px;
            padding: 12px 22px;
            overflow-y: auto;
            flex: 1;
        }

        .macros-grid::-webkit-scrollbar {
            width: 4px;
        }

        .macros-grid::-webkit-scrollbar-thumb {
            background: var(--scheme-alpha);
            border-radius: 4px;
        }

        .macro-card {
            height: 112px;
            border-radius: 16px;
            padding: 14px 18px;
            background: linear-gradient(145deg, rgba(16, 18, 28, 0.8) 0%, rgba(10, 12, 20, 0.65) 100%);
            position: relative;
            cursor: pointer;
            border: 1px solid rgba(255, 255, 255, 0.04);
            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
        }

        .macro-card:hover {
            background: linear-gradient(145deg, rgba(14, 16, 24, 0.9) 0%, rgba(10, 12, 20, 0.8) 100%);
            transform: translateY(-2px);
            box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2), 0 0 12px var(--scheme-glow);
            border-color: rgba(255, 255, 255, 0.06);
        }

        .macro-card:hover::before {
            content: '';
            position: absolute;
            inset: -2px;
            border-radius: 16px;
            border: 1px solid var(--scheme-alpha);
            pointer-events: none;
        }

        .macro-card.enabled {
            border-color: var(--card-border);
        }

        .macro-card.enabled::after {
            content: '';
            position: absolute;
            inset: -1px;
            border-radius: 15px;
            border: 1.4px solid var(--scheme);
            opacity: 0.4;
            pointer-events: none;
        }

        .macro-card-row1 {
            display: flex;
            align-items: center;
            gap: 8px;
        }

        .macro-status-dot {
            width: 7px;
            height: 7px;
            border-radius: 50%;
            flex-shrink: 0;
            background: rgba(80, 85, 100, 0.65);
        }

        .macro-card.enabled .macro-status-dot {
            background: var(--scheme);
            box-shadow: 0 0 8px var(--scheme-glow);
            animation: dotPulse 2.5s ease-in-out infinite;
        }

        @keyframes dotPulse {

            0%,
            100% {
                opacity: 0.7;
            }

            50% {
                opacity: 1;
            }
        }

        .macro-name {
            font-size: 15px;
            font-weight: 700;
            color: rgba(240, 242, 248, 0.95);
            flex: 1;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }

        .macro-card:not(.enabled) .macro-name {
            opacity: 0.6;
        }

        .macro-author {
            font-size: 12px;
            color: rgba(140, 150, 175, 0.7);
            margin-top: 1px;
        }

        .macro-badges {
            display: flex;
            gap: 4px;
            flex-wrap: wrap;
            margin-top: 4px;
        }

        .macro-badge-pill {
            font-size: 10px;
            font-weight: 500;
            padding: 2px 7px;
            border-radius: 8px;
            display: inline-flex;
            align-items: center;
        }

        .macro-badge-cat {
            background: rgba(120, 80, 200, 0.2);
            color: rgba(180, 150, 255, 0.85);
        }

        .macro-badge-steps {
            background: rgba(50, 55, 70, 0.7);
            color: rgba(150, 155, 170, 0.85);
        }

        .macro-badge-key {
            background: rgba(50, 55, 65, 0.85);
            border: 0.5px solid rgba(80, 85, 100, 0.3);
            color: rgba(195, 200, 215, 0.9);
        }

        .macro-badge-nokey {
            color: rgba(80, 85, 95, 0.7);
            font-size: 10px;
        }

        .macro-card-controls {
            display: flex;
            align-items: center;
            gap: 8px;
            position: relative;
            z-index: 1;
        }

        .macro-card-controls .toggle-switch {
            width: 34px;
            height: 17px;
        }

        .macro-card-controls .t-slider::after {
            width: 13px;
            height: 13px;
        }

        .macro-card-controls .toggle-switch input:checked+.t-slider::after {
            transform: translateX(17px);
        }

        .macro-edit-btn {
            padding: 4px 14px;
            border-radius: 8px;
            border: 1px solid rgba(255, 255, 255, 0.06);
            background: rgba(14, 16, 28, 0.8);
            color: rgba(180, 195, 220, 0.75);
            font-family: var(--font);
            font-size: 11px;
            font-weight: 600;
            cursor: pointer;
            transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
        }

        .macro-edit-btn:hover {
            background: rgba(20, 24, 38, 0.9);
            border-color: var(--scheme-alpha);
            color: var(--text);
            box-shadow: 0 0 10px var(--scheme-glow);
        }

        .macro-del-btn {
            width: 22px;
            height: 22px;
            border: none;
            border-radius: 6px;
            background: transparent;
            color: rgba(180, 55, 55, 0.5);
            font-size: 12px;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: all 0.2s;
        }

        .macro-del-btn:hover {
            background: rgba(180, 55, 55, 0.12);
            color: rgba(220, 70, 70, 0.9);
        }

        .macros-fab {
            position: sticky;
            bottom: 22px;
            float: right;
            margin-right: 22px;
            margin-top: -74px;
            width: 52px;
            height: 52px;
            border-radius: 50%;
            border: none;
            background: linear-gradient(135deg, var(--scheme) 0%, var(--scheme-dim) 100%);
            color: #fff;
            font-size: 26px;
            font-weight: 700;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3), 0 0 24px var(--scheme-glow);
            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
            z-index: 100;
        }

        .macros-fab:hover {
            transform: scale(1.12) rotate(90deg);
            box-shadow: 0 6px 24px rgba(0, 0, 0, 0.35), 0 0 36px var(--scheme-alpha);
        }

        .macros-fab:active {
            transform: scale(0.95) rotate(90deg);
        }

        .macros-fab::before {
            content: '';
            position: absolute;
            inset: -6px;
            border-radius: 50%;
            border: 2px solid var(--scheme-alpha);
            z-index: -1;
            animation: fabPulse 2.5s ease-in-out infinite;
        }

        @keyframes fabPulse {

            0%,
            100% {
                transform: scale(1);
                opacity: 0.5;
            }

            50% {
                transform: scale(1.15);
                opacity: 0;
            }
        }

        .macros-empty {
            grid-column: 1/-1;
            text-align: center;
            padding: 60px 20px;
            color: var(--text3);
            font-size: 14px;
        }

        /* -- Macro Editor Modal -- */
        .macro-modal-overlay {
            position: fixed;
            inset: 0;
            z-index: 200;
            background: rgba(0, 0, 0, 0.65);
            backdrop-filter: blur(12px) saturate(0.8);
            display: flex;
            align-items: center;
            justify-content: center;
            opacity: 0;
            transition: opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        }

        .macro-modal-overlay.open {
            opacity: 1;
        }

        .macro-modal {
            width: 740px;
            max-width: 95vw;
            max-height: 90%;
            background: rgba(10, 12, 20, 0.97);
            border-radius: 24px;
            border: 1px solid rgba(255, 255, 255, 0.08);
            box-shadow:
                0 24px 80px rgba(0, 0, 0, 0.6),
                0 0 40px var(--scheme-glow),
                0 0 0 1px rgba(255, 255, 255, 0.04) inset;
            display: flex;
            flex-direction: column;
            overflow: hidden;
            transform: scale(0.95) translateY(10px);
            transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1);
            backdrop-filter: blur(20px) saturate(1.2);
        }

        .macro-modal-overlay.open .macro-modal {
            transform: scale(1) translateY(0);
        }

        .macro-modal-header {
            display: flex;
            align-items: flex-start;
            justify-content: space-between;
            padding: 20px 24px 8px;
        }

        .macro-modal-title {
            font-size: 22px;
            font-weight: 800;
            margin: 0;
            background: linear-gradient(135deg, rgba(240, 242, 255, 0.95) 0%, var(--scheme) 150%);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
        }

        .macro-modal-sub {
            font-size: 12px;
            color: rgba(140, 155, 185, 0.5);
            margin-top: 2px;
        }

        .macro-modal-close {
            width: 32px;
            height: 32px;
            border-radius: 10px;
            border: 1px solid rgba(255, 75, 75, 0.2);
            background: rgba(255, 75, 75, 0.08);
            color: rgba(255, 120, 120, 0.7);
            font-size: 13px;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: all 0.2s;
        }

        .macro-modal-close:hover {
            background: rgba(180, 55, 55, 0.3);
            color: rgba(255, 90, 90, 1);
        }

        .macro-modal-divider {
            height: 1px;
            margin: 0 24px;
            background: linear-gradient(to right, rgba(140, 160, 200, 0.08), rgba(140, 160, 200, 0.04), transparent);
        }

        .macro-modal-body {
            padding: 16px 28px 20px;
            overflow-y: auto;
            flex: 1;
            display: flex;
            flex-direction: column;
            gap: 14px;
        }

        .medit-cards-grid {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 14px;
        }

        @media (max-width: 600px) {
            .medit-cards-grid {
                grid-template-columns: 1fr;
            }
        }

        .macro-modal-body::-webkit-scrollbar {
            width: 3px;
        }

        .macro-modal-body::-webkit-scrollbar-thumb {
            background: var(--scheme-alpha);
            border-radius: 3px;
        }

        .macro-modal-section {
            display: flex;
            flex-direction: column;
            gap: 3px;
        }

        .macro-modal-row2 {
            display: flex;
            gap: 10px;
        }

        .mfield-label {
            font-size: 9px;
            font-weight: 700;
            letter-spacing: 0.8px;
            text-transform: uppercase;
            color: rgba(140, 158, 192, 0.55);
            display: flex;
            align-items: center;
            gap: 6px;
        }

        .mfield-count {
            font-size: 10px;
            padding: 1px 6px;
            border-radius: 6px;
            background: var(--scheme-alpha);
            color: var(--scheme);
            font-weight: 600;
        }

        .mfield-input {
            padding: 8px 12px;
            border-radius: 10px;
            border: 1px solid rgba(40, 50, 70, 0.4);
            background: rgba(8, 12, 22, 0.95);
            color: var(--text);
            font-family: var(--font);
            font-size: 13px;
            outline: none;
            transition: border-color 0.2s;
            width: 100%;
            box-sizing: border-box;
        }

        .mfield-input:focus {
            border-color: var(--scheme);
        }

        .mfield-input.sm {
            padding: 5px 8px;
            font-size: 12px;
            border-radius: 8px;
        }

        .mfield-input::placeholder {
            color: rgba(100, 115, 145, 0.4);
        }

        .mfield-select {
            padding: 8px 12px;
            border-radius: 10px;
            border: 1px solid rgba(40, 50, 70, 0.4);
            background: rgba(8, 12, 22, 0.95);
            color: var(--text);
            font-family: var(--font);
            font-size: 13px;
            outline: none;
            cursor: pointer;
        }

        .mfield-select.sm {
            padding: 5px 8px;
            font-size: 12px;
            border-radius: 8px;
        }

        .mfield-select option {
            background: var(--bg3);
        }

        .mfield-unit {
            font-size: 11px;
            color: rgba(140, 155, 185, 0.5);
            min-width: 20px;
        }

        .macro-steps-list {
            display: flex;
            flex-direction: column;
            gap: 4px;
            max-height: 320px;
            overflow-y: auto;
        }

        .macro-steps-list::-webkit-scrollbar {
            width: 2px;
        }

        .macro-steps-list::-webkit-scrollbar-thumb {
            background: var(--scheme-alpha);
            border-radius: 2px;
        }

        .macro-step-card {
            display: flex;
            align-items: center;
            gap: 6px;
            padding: 6px 10px;
            background: rgba(10, 14, 24, 0.8);
            border: 1px solid rgba(40, 55, 80, 0.15);
            border-radius: 10px;
            transition: border-color 0.2s;
        }

        .macro-step-card:hover {
            border-color: rgba(34, 235, 57, 0.3);
        }

        .macro-step-idx {
            font-size: 10px;
            font-weight: 700;
            color: rgba(140, 155, 180, 0.6);
            width: 18px;
            text-align: center;
            flex-shrink: 0;
        }

        .macro-step-del {
            width: 20px;
            height: 20px;
            border: none;
            border-radius: 5px;
            background: transparent;
            color: rgba(180, 55, 55, 0.5);
            font-size: 11px;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: all 0.2s;
            margin-left: auto;
        }

        .macro-step-del:hover {
            background: rgba(180, 55, 55, 0.12);
            color: rgba(220, 70, 70, 0.9);
        }

        .mbtn-add-step {
            padding: 6px 16px;
            border-radius: 8px;
            border: 1px dashed rgba(34, 235, 57, 0.3);
            background: transparent;
            color: rgba(160, 175, 200, 0.6);
            font-family: var(--font);
            font-size: 11px;
            font-weight: 600;
            cursor: pointer;
            transition: all 0.2s;
            margin-top: 4px;
        }

        .mbtn-add-step:hover {
            border-color: var(--scheme);
            color: var(--scheme);
            background: var(--scheme-glow);
        }

        .macro-modal-footer {
            display: flex;
            justify-content: flex-end;
            gap: 8px;
            padding: 12px 24px 16px;
            border-top: 1px solid rgba(40, 50, 70, 0.2);
        }

        .mbtn-cancel {
            background: rgba(60, 70, 90, 0.7);
            color: var(--text);
            border-color: rgba(60, 70, 90, 0.5);
        }

        .mbtn-cancel:hover {
            background: rgba(70, 80, 100, 0.85);
        }

        .mbtn-save {
            background: var(--scheme);
            color: var(--text-on-scheme);
            border: none;
            font-weight: 700;
        }

        .mbtn-save:hover {
            filter: brightness(1.12);
        }

        /* -- Macro Editor Sections -- */
        .medit-overview {
            margin: 0 28px;
            padding: 12px 16px;
            border-radius: 14px;
            background: rgba(18, 20, 30, 0.65);
            border: 1px solid rgba(80, 120, 200, 0.15);
        }

        .medit-overview-title {
            font-size: 12px;
            font-weight: 700;
            color: rgba(210, 220, 240, 0.9);
        }

        .medit-pills {
            display: flex;
            gap: 6px;
            flex-wrap: wrap;
            margin: 6px 0 4px;
        }

        .medit-pill {
            font-size: 10px;
            font-weight: 600;
            padding: 2px 8px;
            border-radius: 10px;
            background: rgba(56, 66, 92, 0.8);
            color: rgba(215, 225, 245, 0.95);
        }

        .medit-pill.green {
            background: rgba(70, 220, 130, 0.9);
            color: #fff;
        }

        .medit-pill.red {
            background: rgba(210, 120, 120, 0.85);
            color: #fff;
        }

        .medit-flow {
            font-size: 10px;
            color: rgba(150, 165, 190, 0.8);
        }

        .medit-card {
            border-radius: 16px;
            padding: 16px 20px;
            background: var(--bg4);
            border: 1px solid rgba(80, 120, 200, 0.12);
            position: relative;
            overflow: hidden;
            display: flex;
            flex-direction: column;
        }

        .medit-card::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            height: 18px;
            background: linear-gradient(180deg, rgba(255, 255, 255, 0.03) 0%, transparent 100%);
        }

        .medit-card-header {
            display: flex;
            align-items: center;
            gap: 8px;
            margin-bottom: 10px;
            position: relative;
        }

        .medit-card-icon {
            font-size: 14px;
            opacity: 0.7;
        }

        .medit-card-title {
            font-size: 11px;
            font-weight: 700;
            letter-spacing: 1.2px;
            color: rgba(230, 235, 245, 0.95);
        }

        .medit-card-body {
            display: flex;
            flex-direction: column;
            gap: 8px;
            flex: 1;
        }

        .medit-enabled-row {
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin-top: 6px;
            padding-top: 6px;
        }

        .medit-enabled-label {
            font-size: 12px;
            font-weight: 600;
        }

        .medit-enabled-label.on {
            color: rgba(76, 225, 128, 0.9);
        }

        .medit-enabled-label.off {
            color: rgba(200, 100, 100, 0.85);
        }

        .medit-seg-control {
            display: flex;
            border-radius: 14px;
            overflow: hidden;
            background: rgba(20, 22, 30, 0.8);
            border: 1px solid rgba(60, 70, 90, 0.3);
        }

        .medit-seg-btn {
            flex: 1;
            padding: 6px 4px;
            border: none;
            background: transparent;
            color: rgba(160, 170, 190, 0.6);
            font-family: var(--font);
            font-size: 11px;
            font-weight: 600;
            cursor: pointer;
            transition: all 0.2s;
        }

        .medit-seg-btn:hover {
            color: rgba(200, 210, 230, 0.8);
        }

        .medit-seg-btn.active {
            background: var(--scheme);
            color: #fff;
            box-shadow: 0 0 10px var(--scheme-glow);
        }

        .medit-steps-header {
            display: flex;
            align-items: center;
            gap: 8px;
            padding: 4px 0;
        }

        .medit-guide {
            font-size: 10px;
            color: rgba(155, 170, 195, 0.8);
            margin-bottom: 4px;
        }

        .mstep-header {
            display: flex;
            align-items: center;
            gap: 6px;
            margin-bottom: 6px;
        }

        .mstep-badge {
            width: 22px;
            height: 22px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 10px;
            font-weight: 700;
            background: var(--scheme-alpha);
            color: var(--scheme);
            border: 1.2px solid var(--scheme);
            flex-shrink: 0;
        }

        .mstep-type-label {
            font-size: 11px;
            color: rgba(160, 170, 195, 0.6);
            flex: 1;
        }

        .mstep-actions {
            display: flex;
            gap: 3px;
        }

        .mstep-btn {
            width: 20px;
            height: 20px;
            border: none;
            border-radius: 5px;
            background: rgba(255, 255, 255, 0.05);
            color: rgba(200, 210, 230, 0.6);
            font-size: 10px;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: all 0.15s;
        }

        .mstep-btn:hover {
            background: rgba(255, 255, 255, 0.12);
            color: var(--text);
        }

        .mstep-btn.del {
            color: rgba(180, 55, 55, 0.5);
        }

        .mstep-btn.del:hover {
            background: rgba(180, 55, 55, 0.12);
            color: rgba(220, 70, 70, 0.9);
        }

        .mstep-body {
            display: flex;
            flex-direction: column;
            gap: 4px;
            padding-left: 28px;
        }

        .mstep-param-row {
            display: flex;
            align-items: center;
            gap: 6px;
            flex-wrap: wrap;
        }

        .msp-l {
            font-size: 10px;
            font-weight: 600;
            color: rgba(160, 175, 200, 0.6);
            white-space: nowrap;
            display: flex;
            align-items: center;
            gap: 3px;
        }

        .mstep-hint {
            font-size: 10px;
            color: rgba(150, 165, 190, 0.5);
        }

        .medit-empty-steps {
            text-align: center;
            padding: 20px;
            color: rgba(140, 155, 185, 0.4);
        }

        .medit-empty-icon {
            font-size: 24px;
            margin-bottom: 6px;
            opacity: 0.3;
        }

        .medit-empty-hint {
            font-size: 11px;
            color: rgba(120, 135, 160, 0.55);
            margin-top: 4px;
        }

        /* -- Curve Page -- */
        .curve-layout {
            display: flex;
            height: 100%;
            gap: 16px;
        }

        .curve-panel {
            width: 300px;
            flex-shrink: 0;
            background: linear-gradient(180deg, rgba(12, 14, 24, 0.95) 0%, rgba(8, 10, 18, 0.92) 100%);
            border: 1px solid rgba(255, 255, 255, 0.06);
            border-radius: 20px;
            padding: 20px 18px;
            overflow-y: auto;
            display: flex;
            flex-direction: column;
            gap: 0;
            box-shadow: 0 4px 24px rgba(0, 0, 0, 0.2), 0 0 0 1px rgba(255, 255, 255, 0.02) inset;
        }

        .curve-panel::-webkit-scrollbar {
            width: 3px;
        }

        .curve-panel::-webkit-scrollbar-thumb {
            background: var(--scheme-alpha);
            border-radius: 3px;
        }

        .curve-panel-title {
            font-size: 18px;
            font-weight: 800;
            background: linear-gradient(135deg, rgba(235, 243, 255, 0.95) 0%, var(--scheme) 150%);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
            margin-bottom: 2px;
        }

        .curve-panel-sub {
            font-size: 10px;
            color: rgba(100, 122, 155, 0.5);
            margin-bottom: 14px;
        }

        .curve-toggle-row {
            display: flex;
            align-items: center;
            gap: 10px;
            margin-bottom: 16px;
        }

        .curve-ios-toggle {
            width: 44px;
            height: 22px;
            border-radius: 11px;
            cursor: pointer;
            background: rgb(180, 50, 50);
            transition: background 0.3s;
            position: relative;
            border: 1px solid rgba(255, 255, 255, 0.1);
        }

        .curve-ios-toggle.on {
            background: rgb(40, 220, 80);
            box-shadow: 0 0 12px rgba(40, 220, 80, 0.3);
        }

        .curve-ios-knob {
            position: absolute;
            top: 2px;
            left: 2px;
            width: 16px;
            height: 16px;
            border-radius: 50%;
            background: #fff;
            transition: transform 0.3s;
            box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
        }

        .curve-ios-toggle.on .curve-ios-knob {
            transform: translateX(22px);
        }

        .curve-status {
            font-size: 13px;
            font-weight: 600;
            color: rgba(200, 70, 60, 0.7);
            transition: color 0.3s;
        }

        .curve-status.on {
            color: rgba(40, 220, 80, 0.9);
        }

        .curve-section-label {
            font-size: 10px;
            font-weight: 700;
            letter-spacing: 1px;
            color: var(--text3);
            margin: 12px 0 6px;
            text-transform: uppercase;
            display: flex;
            align-items: center;
            gap: 6px;
        }

        .curve-section-label::after {
            content: '';
            flex: 1;
            height: 1px;
            background: linear-gradient(90deg, rgba(255, 255, 255, 0.04), transparent);
        }

        .curve-section-label.sm {
            margin: 8px 0 2px;
        }

        .curve-presets-grid {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 6px;
            margin-bottom: 10px;
        }

        .preset-pill {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 9px 12px;
            border-radius: 10px;
            border: 1px solid rgba(255, 255, 255, 0.05);
            background: rgba(10, 12, 20, 0.85);
            color: rgba(160, 175, 200, 0.65);
            font-family: var(--font);
            font-size: 11px;
            font-weight: 600;
            cursor: pointer;
            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        }

        .preset-pill:hover {
            background: rgba(16, 18, 28, 0.95);
            border-color: rgba(255, 255, 255, 0.08);
            color: rgba(200, 215, 240, 0.9);
            transform: translateY(-1px);
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
        }

        .preset-pill.active {
            background: linear-gradient(135deg, rgba(20, 40, 80, 0.9) 0%, rgba(15, 30, 60, 0.85) 100%);
            border-color: var(--scheme-alpha);
            color: rgba(220, 235, 255, 0.95);
            box-shadow: 0 0 12px var(--scheme-glow), 0 4px 12px rgba(0, 0, 0, 0.2);
        }

        .preset-icon {
            width: 24px;
            height: 14px;
            flex-shrink: 0;
            opacity: 0.4;
            transition: opacity 0.25s;
        }

        .preset-pill:hover .preset-icon,
        .preset-pill.active .preset-icon {
            opacity: 0.9;
        }

        .curve-mode-row {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 6px;
            margin-bottom: 10px;
        }

        .mode-pill {
            padding: 7px 12px;
            border-radius: 10px;
            border: 1px solid rgba(255, 255, 255, 0.05);
            background: rgba(10, 12, 20, 0.85);
            color: rgba(160, 175, 200, 0.6);
            font-family: var(--font);
            font-size: 11px;
            font-weight: 600;
            cursor: pointer;
            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
            text-align: center;
        }

        .mode-pill:hover {
            border-color: rgba(255, 255, 255, 0.08);
            color: rgba(200, 215, 240, 0.8);
        }

        .mode-pill.active {
            background: linear-gradient(135deg, rgba(20, 40, 80, 0.9) 0%, rgba(15, 30, 60, 0.85) 100%);
            border-color: var(--scheme-alpha);
            color: rgba(220, 235, 255, 0.95);
            box-shadow: 0 0 10px var(--scheme-glow);
        }

        .compare-btn {
            width: 100%;
            padding: 9px;
            border-radius: 10px;
            border: 1px solid rgba(255, 255, 255, 0.05);
            background: rgba(10, 12, 20, 0.85);
            color: rgba(160, 175, 200, 0.6);
            font-family: var(--font);
            font-size: 11px;
            font-weight: 600;
            cursor: pointer;
            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
            margin-bottom: 10px;
        }

        .compare-btn:hover {
            border-color: rgba(255, 255, 255, 0.1);
            color: rgba(200, 215, 240, 0.8);
            background: rgba(14, 16, 24, 0.9);
        }

        .compare-btn.active {
            background: linear-gradient(135deg, rgba(20, 35, 55, 0.9) 0%, rgba(14, 24, 40, 0.85) 100%);
            border-color: rgba(255, 255, 255, 0.1);
            color: rgba(220, 235, 255, 0.9);
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
        }

        .curve-slider-row {
            display: flex;
            align-items: center;
            gap: 8px;
            margin-bottom: 8px;
        }

        .curve-styled-slider {
            -webkit-appearance: none;
            appearance: none;
            flex: 1;
            height: 6px;
            border-radius: 3px;
            background: rgba(8, 12, 22, 0.9);
            outline: none;
            border: 1px solid rgba(255, 255, 255, 0.04);
            transition: border-color 0.2s;
        }

        .curve-styled-slider:hover {
            border-color: rgba(255, 255, 255, 0.08);
        }

        .curve-styled-slider::-webkit-slider-thumb {
            -webkit-appearance: none;
            appearance: none;
            width: 15px;
            height: 15px;
            border-radius: 50%;
            background: linear-gradient(135deg, #fff 0%, rgba(200, 220, 255, 0.9) 100%);
            cursor: pointer;
            border: none;
            margin-top: -4.5px;
            box-shadow: 0 0 0 3px var(--scheme-glow), 0 2px 6px rgba(0, 0, 0, 0.4);
            transition: box-shadow 0.2s, transform 0.2s;
        }

        .curve-styled-slider::-webkit-slider-thumb:hover {
            box-shadow: 0 0 0 5px var(--scheme-glow), 0 2px 8px rgba(0, 0, 0, 0.4);
            transform: scale(1.1);
        }

        .curve-slider-val {
            font-size: 12px;
            font-weight: 700;
            color: rgba(100, 210, 255, 0.82);
            min-width: 40px;
            text-align: right;
        }

        .curve-divider {
            height: 1px;
            margin: 8px 0;
            background: linear-gradient(to right, rgba(34, 235, 57, 0.15), transparent);
        }

        .advanced-toggle {
            width: 100%;
            padding: 9px 12px;
            border-radius: 10px;
            border: 1px solid rgba(255, 255, 255, 0.05);
            background: rgba(12, 14, 24, 0.85);
            color: rgba(180, 195, 220, 0.75);
            font-family: var(--font);
            font-size: 11px;
            font-weight: 600;
            cursor: pointer;
            transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
            margin-bottom: 8px;
            display: flex;
            align-items: center;
            justify-content: space-between;
        }

        .advanced-toggle:hover {
            background: rgba(16, 18, 28, 0.95);
            border-color: rgba(255, 255, 255, 0.08);
            color: var(--text);
        }

        .advanced-section {
            display: flex;
            flex-direction: column;
            gap: 2px;
        }

        .advanced-section.hidden {
            display: none;
        }

        .ctrl-points-list {
            display: flex;
            flex-direction: column;
            gap: 3px;
            margin-bottom: 6px;
            max-height: 240px;
            overflow-y: auto;
        }

        .ctrl-points-list::-webkit-scrollbar {
            width: 2px;
        }

        .ctrl-points-list::-webkit-scrollbar-thumb {
            background: var(--scheme-alpha);
            border-radius: 2px;
        }

        .ctrl-pt-card {
            display: flex;
            align-items: center;
            gap: 4px;
            padding: 4px 8px;
            background: rgba(10, 14, 24, 0.85);
            border: 1px solid rgba(40, 55, 80, 0.2);
            border-radius: 8px;
            font-size: 11px;
            flex-wrap: wrap;
        }

        .ctrl-pt-card.selected {
            background: rgba(20, 28, 45, 0.95);
            border-color: rgba(34, 235, 57, 0.35);
        }

        .ctrl-pt-idx {
            font-weight: 700;
            color: rgba(140, 155, 180, 0.7);
            width: 14px;
        }

        .ctrl-pt-card.selected .ctrl-pt-idx {
            color: rgba(255, 180, 60, 1);
        }

        .ctrl-pt-input {
            width: 60px;
            padding: 3px 6px;
            border-radius: 5px;
            border: 1px solid rgba(20, 30, 50, 0.8);
            background: rgba(6, 9, 18, 1);
            color: var(--text);
            font-family: var(--mono);
            font-size: 11px;
            outline: none;
            text-align: center;
        }

        .ctrl-pt-input:focus {
            border-color: rgba(34, 235, 57, 0.4);
        }

        .ctrl-pt-del {
            width: 20px;
            height: 20px;
            border: none;
            border-radius: 4px;
            background: transparent;
            color: rgba(180, 55, 55, 0.6);
            font-size: 12px;
            cursor: pointer;
            transition: all 0.2s;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .ctrl-pt-del:hover {
            background: rgba(180, 55, 55, 0.15);
            color: rgba(220, 70, 70, 0.9);
        }

        .ctrl-pt-tension-row {
            display: flex;
            align-items: center;
            gap: 4px;
            width: 100%;
            padding: 1px 0 0 18px;
        }

        .ctrl-pt-tension-label {
            font-size: 9px;
            font-weight: 600;
            color: rgba(120, 145, 180, 0.5);
            width: 22px;
            text-transform: uppercase;
            letter-spacing: 0.5px;
        }

        .ctrl-pt-tension-slider {
            -webkit-appearance: none;
            appearance: none;
            flex: 1;
            height: 3px;
            border-radius: 2px;
            background: rgba(8, 12, 22, 0.9);
            outline: none;
            border: 1px solid rgba(255, 255, 255, 0.03);
        }

        .ctrl-pt-tension-slider::-webkit-slider-thumb {
            -webkit-appearance: none;
            appearance: none;
            width: 10px;
            height: 10px;
            border-radius: 50%;
            background: linear-gradient(135deg, rgba(200, 220, 255, 0.9) 0%, rgba(34, 235, 57, 0.8) 100%);
            cursor: pointer;
            border: none;
            box-shadow: 0 0 0 2px var(--scheme-glow), 0 1px 3px rgba(0, 0, 0, 0.3);
            transition: box-shadow 0.2s, transform 0.2s;
        }

        .ctrl-pt-tension-slider::-webkit-slider-thumb:hover {
            box-shadow: 0 0 0 3px var(--scheme-glow), 0 1px 4px rgba(0, 0, 0, 0.4);
            transform: scale(1.15);
        }

        .ctrl-pt-tension-val {
            font-size: 9px;
            font-weight: 700;
            color: rgba(100, 180, 240, 0.6);
            min-width: 28px;
            text-align: right;
        }

        .btn-outline.sm {
            padding: 6px 12px;
            font-size: 11px;
        }

        .curve-graph-wrap {
            flex: 1;
            display: flex;
            align-items: center;
            justify-content: center;
            position: relative;
        }

        #curve-canvas {
            border-radius: 12px;
            cursor: crosshair;
        }

        /* -- Notifications -- */
        #notifications {
            position: fixed;
            bottom: 20px;
            right: 20px;
            z-index: 9999;
            display: flex;
            flex-direction: column-reverse;
            gap: 8px;
            pointer-events: none;
            max-width: 340px;
        }

        .notification {
            padding: 10px 16px;
            border-radius: 12px;
            background: rgba(14, 16, 22, 0.92);
            border: 1px solid var(--card-border);
            font-size: 13px;
            font-weight: 500;
            backdrop-filter: blur(12px);
            animation: notifSlide 0.3s ease-out;
            pointer-events: auto;
            max-width: 300px;
        }

        .notification.success {
            border-left: 3px solid #4ade80;
        }

        .notification.warning {
            border-left: 3px solid #fbbf24;
        }

        .notification.error {
            border-left: 3px solid #f87171;
        }

        .notification.info {
            border-left: 3px solid var(--scheme);
        }

        @keyframes notifSlide {
            from {
                opacity: 0;
                transform: translateX(40px);
            }

            to {
                opacity: 1;
                transform: translateX(0);
            }
        }

        /* -- Transitions -- */
        .fade-in {
            animation: fadeIn 0.4s ease-out;
        }

        @keyframes fadeIn {
            from {
                opacity: 0;
            }

            to {
                opacity: 1;
            }
        }

        /* ---------------------------------------------------
   Controller Button Remap Overlay
   --------------------------------------------------- */
        .ctrl-btn-overlay {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            pointer-events: none;
            z-index: 5;
        }

        .ctrl-btn {
            pointer-events: all;
            position: absolute;
            width: 34px;
            height: 34px;
            border-radius: 50%;
            border: 1.5px solid rgba(255, 255, 255, 0.12);
            background: rgba(10, 14, 22, 0.7);
            color: rgba(255, 255, 255, 0.7);
            font-size: 10px;
            font-weight: 700;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
            backdrop-filter: blur(6px);
            font-family: var(--font);
            text-transform: uppercase;
            letter-spacing: 0.5px;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
        }

        .ctrl-btn:hover {
            border-color: var(--scheme);
            background: rgba(34, 235, 57, 0.15);
            color: #fff;
            transform: scale(1.2);
            box-shadow: 0 0 20px var(--scheme-glow), 0 4px 12px rgba(0, 0, 0, 0.3);
        }

        .ctrl-btn.small {
            width: 28px;
            height: 28px;
            font-size: 9px;
        }

        .ctrl-btn.dpad {
            width: 26px;
            height: 26px;
            font-size: 10px;
            border-radius: 6px;
        }

        .ctrl-btn.bound {
            border-color: #4ade80;
            background: rgba(74, 222, 128, 0.15);
            color: #4ade80;
            box-shadow: 0 0 8px rgba(74, 222, 128, 0.2);
        }

        /* ---------------------------------------------------
   Remap Modal
   --------------------------------------------------- */
        .remap-overlay {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0.7);
            z-index: 9999;
            display: flex;
            align-items: center;
            justify-content: center;
            opacity: 0;
            transition: opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1);
            backdrop-filter: blur(12px) saturate(0.8);
        }

        .remap-overlay.active {
            opacity: 1;
        }

        .remap-modal {
            background: rgba(10, 12, 20, 0.97);
            border: 1px solid rgba(255, 255, 255, 0.08);
            border-radius: 24px;
            padding: 0;
            width: 360px;
            max-width: 90vw;
            box-shadow:
                0 24px 80px rgba(0, 0, 0, 0.6),
                0 0 40px var(--scheme-glow),
                0 0 0 1px rgba(255, 255, 255, 0.04) inset;
            transform: scale(0.95) translateY(10px);
            transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1);
            overflow: hidden;
            backdrop-filter: blur(20px) saturate(1.2);
        }

        .remap-overlay.active .remap-modal {
            transform: scale(1) translateY(0);
        }

        .remap-header {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 20px 24px;
            border-bottom: 1px solid rgba(255, 255, 255, 0.06);
            background: rgba(255, 255, 255, 0.01);
        }

        .remap-btn-name {
            font-size: 18px;
            font-weight: 800;
            color: var(--scheme);
            font-family: var(--font);
            letter-spacing: 0.5px;
        }

        .remap-close {
            background: rgba(255, 60, 60, 0.06);
            border: 1px solid rgba(255, 80, 80, 0.12);
            color: rgba(255, 120, 120, 0);
            width: 28px;
            height: 28px;
            border-radius: 8px;
            font-size: 14px;
            font-weight: 500;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
            position: relative;
            overflow: hidden;
        }

        .remap-header:hover .remap-close {
            color: rgba(255, 130, 130, 0.7);
            background: rgba(255, 60, 60, 0.08);
        }

        .remap-close:hover {
            color: #fff !important;
            background: rgba(255, 55, 55, 0.55) !important;
            border-color: rgba(255, 80, 80, 0.4);
            box-shadow: 0 0 16px rgba(255, 55, 55, 0.25), 0 0 4px rgba(255, 55, 55, 0.15);
            transform: scale(1.08);
        }

        .remap-close:active {
            transform: scale(0.92);
            background: rgba(255, 55, 55, 0.7) !important;
        }

        .remap-body {
            padding: 24px 22px;
            text-align: center;
        }

        .remap-current {
            font-size: 13px;
            color: var(--text2);
            margin-bottom: 18px;
        }

        .remap-current strong {
            color: var(--scheme);
            font-weight: 600;
        }

        .remap-prompt {
            font-size: 16px;
            font-weight: 600;
            color: var(--text);
            padding: 20px;
            border: 2px dashed rgba(34, 235, 57, 0.25);
            border-radius: 14px;
            background: rgba(34, 235, 57, 0.05);
            animation: remapPulse 1.5s ease-in-out infinite;
        }

        @keyframes remapPulse {

            0%,
            100% {
                border-color: rgba(34, 235, 57, 0.25);
            }

            50% {
                border-color: rgba(34, 235, 57, 0.55);
            }
        }

        .remap-hint {
            font-size: 11px;
            color: var(--text3);
            margin-top: 14px;
        }

        .remap-hint kbd {
            background: var(--bg4);
            padding: 2px 7px;
            border-radius: 4px;
            font-family: var(--mono);
            font-size: 10px;
            color: var(--text2);
            border: 1px solid rgba(255, 255, 255, 0.1);
        }

        /* -- C++ OpenDs4RemapModal matching components -- */
        .remap-icon-circle {
            width: 36px;
            height: 36px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-weight: 700;
            font-size: 13px;
            color: rgba(140, 255, 180, 1);
            flex-shrink: 0;
            overflow: hidden;
        }

        .remap-icon-circle svg {
            width: 100%;
            height: 100%;
        }

        /* Fallback text style when no SVG */
        .remap-icon-circle.icon-text {
            border: 1.6px solid rgba(70, 210, 120, 0.92);
        }

        .remap-keys-list {
            display: flex;
            flex-direction: column;
            gap: 10px;
        }

        .remap-key-row {
            display: flex;
            align-items: center;
            gap: 10px;
            padding: 6px 10px 6px 14px;
            border-radius: 14px;
            background: rgba(18, 22, 32, 0.5);
            border: 1px solid rgba(255, 255, 255, 0.04);
            transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
        }

        .remap-key-row:hover {
            background: rgba(22, 26, 38, 0.7);
            border-color: var(--scheme-alpha);
            box-shadow: 0 2px 12px rgba(0, 0, 0, 0.15);
        }

        .remap-key-label {
            font-size: 12px;
            font-weight: 700;
            color: var(--text3);
            min-width: 38px;
            flex-shrink: 0;
            text-transform: uppercase;
            letter-spacing: 0.5px;
        }

        .remap-binder-chip {
            flex: 1;
            padding: 10px 16px;
            border-radius: 12px;
            background: rgba(14, 16, 24, 0.9);
            border: 1px solid var(--border);
            color: var(--scheme);
            font-size: 13px;
            font-weight: 600;
            text-align: center;
            cursor: pointer;
            transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
            user-select: none;
            font-family: var(--mono);
            letter-spacing: 0.3px;
            position: relative;
        }

        .remap-binder-chip:hover {
            background: rgba(18, 22, 32, 1);
            border-color: var(--scheme-dim);
            color: var(--scheme);
            box-shadow: 0 0 14px var(--scheme-glow), 0 2px 8px rgba(0, 0, 0, 0.2);
            transform: translateY(-1px);
        }

        .remap-binder-chip.listening {
            border-color: var(--scheme);
            color: var(--text);
            background: var(--scheme-alpha);
            animation: chipPulse 1.2s ease-in-out infinite;
            box-shadow: 0 0 20px var(--scheme-glow), 0 0 8px var(--scheme-glow);
        }

        @keyframes chipPulse {

            0%,
            100% {
                border-color: var(--scheme-dim);
                box-shadow: 0 0 12px var(--scheme-glow);
            }

            50% {
                border-color: var(--scheme);
                box-shadow: 0 0 24px var(--scheme-glow), 0 0 8px var(--scheme-glow);
            }
        }

        .remap-key-remove {
            width: 26px;
            height: 26px;
            border-radius: 8px;
            background: rgba(255, 60, 60, 0.06);
            border: 1px solid rgba(255, 80, 80, 0.1);
            color: rgba(255, 120, 120, 0);
            font-size: 13px;
            font-weight: 500;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
            flex-shrink: 0;
        }

        .remap-key-row:hover .remap-key-remove {
            color: rgba(255, 130, 130, 0.65);
            background: rgba(255, 60, 60, 0.08);
        }

        .remap-key-remove:hover {
            color: #fff !important;
            background: rgba(255, 55, 55, 0.55) !important;
            border-color: rgba(255, 80, 80, 0.4);
            box-shadow: 0 0 14px rgba(255, 55, 55, 0.2);
            transform: scale(1.1);
        }

        .remap-key-remove:active {
            transform: scale(0.9);
            background: rgba(255, 55, 55, 0.7) !important;
        }

        .remap-separator {
            height: 1px;
            background: linear-gradient(90deg, transparent, var(--border), transparent);
            margin: 16px 0 14px 0;
        }

        .remap-add-keybind {
            width: 100%;
            padding: 12px;
            font-size: 13px;
            font-weight: 600;
            border-radius: 12px;
            background: linear-gradient(135deg, var(--scheme-alpha), rgba(255, 255, 255, 0.03));
            color: var(--scheme);
            border: 1px solid var(--border);
            cursor: pointer;
            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
            letter-spacing: 0.3px;
            font-family: var(--font);
            position: relative;
            overflow: hidden;
        }

        .remap-add-keybind::before {
            content: '';
            position: absolute;
            inset: 0;
            background: linear-gradient(135deg, transparent, var(--scheme-glow));
            opacity: 0;
            transition: opacity 0.3s;
        }

        .remap-add-keybind:hover {
            border-color: var(--scheme-dim);
            color: var(--text);
            transform: translateY(-1px);
            box-shadow: 0 4px 20px var(--scheme-glow), 0 0 12px var(--scheme-glow);
            background: linear-gradient(135deg, var(--scheme) 0%, var(--scheme-dim) 100%);
        }

        .remap-add-keybind:hover::before {
            opacity: 1;
        }

        .remap-add-keybind:active {
            transform: translateY(0) scale(0.97);
            box-shadow: 0 2px 8px var(--scheme-glow);
        }

        /* -- Engine Icon Animation -- */
        .engine-icon {
            transition: color 0.4s ease;
        }

        .engine-row {
            margin-top: 4px;
        }

        .engine-row .t-slider {
            background: rgba(74, 222, 128, 0.15) !important;
        }

        .engine-row input:checked+.t-slider {
            background: #4ade80 !important;
        }

        /* ------------------------------------------
   STEAM-STYLE CONTROLLER LAYOUT
   ------------------------------------------ */
        .steam-ctrl-wrap {
            width: 100%;
            display: flex;
            justify-content: center;
            padding: 10px 0 6px;
        }

        .steam-ctrl {
            position: relative;
            width: 100%;
            max-width: 560px;
            display: none;
        }

        .steam-ctrl.active {
            display: block;
        }

        .ctrl-svg {
            width: 100%;
            height: 100%;
            display: block;
        }

        /* SVG Elements */
        .c-body {
            fill: rgba(12, 18, 35, 0.55);
            stroke: rgba(80, 120, 180, 0.32);
            stroke-width: 1.5;
        }

        .c-line {
            stroke: rgba(70, 100, 150, 0.2);
            stroke-width: 1.2;
            stroke-linecap: round;
        }

        .c-el {
            fill: none;
            stroke: rgba(70, 100, 150, 0.22);
            stroke-width: 1.2;
        }

        .c-el-in {
            fill: rgba(10, 16, 30, 0.4);
            stroke: rgba(70, 100, 150, 0.18);
            stroke-width: 1;
        }

        .c-face-y {
            fill: none;
            stroke: rgba(241, 196, 15, 0.3);
            stroke-width: 1.2;
        }

        .c-face-b {
            fill: none;
            stroke: rgba(231, 76, 60, 0.3);
            stroke-width: 1.2;
        }

        .c-face-a {
            fill: none;
            stroke: rgba(46, 204, 64, 0.3);
            stroke-width: 1.2;
        }

        .c-face-x {
            fill: none;
            stroke: rgba(34, 235, 57, 0.3);
            stroke-width: 1.2;
        }

        .c-face-tri {
            fill: none;
            stroke: rgba(100, 200, 150, 0.3);
            stroke-width: 1.2;
        }

        .c-face-cir {
            fill: none;
            stroke: rgba(231, 76, 60, 0.3);
            stroke-width: 1.2;
        }

        .c-face-crs {
            fill: none;
            stroke: rgba(34, 235, 57, 0.3);
            stroke-width: 1.2;
        }

        .c-face-sqr {
            fill: none;
            stroke: rgba(200, 120, 200, 0.3);
            stroke-width: 1.2;
        }

        .c-xbox {
            fill: none;
            stroke: rgba(70, 100, 150, 0.25);
            stroke-width: 1.2;
        }

        .c-sm {
            fill: none;
            stroke: rgba(70, 100, 150, 0.18);
            stroke-width: 1;
        }

        .c-tp {
            fill: rgba(10, 16, 30, 0.3);
            stroke: rgba(70, 100, 150, 0.2);
            stroke-width: 1;
        }

        .c-ps-bar {
            fill: rgba(34, 235, 57, 0.25);
            stroke: none;
        }

        .c-lbl {
            font-family: var(--font);
            font-size: 12px;
            font-weight: 700;
            text-anchor: middle;
            dominant-baseline: central;
        }

        .c-ly {
            fill: rgba(241, 196, 15, 0.35);
        }

        .c-lb2 {
            fill: rgba(231, 76, 60, 0.35);
        }

        .c-la {
            fill: rgba(46, 204, 64, 0.35);
        }

        .c-lx {
            fill: rgba(34, 235, 57, 0.35);
        }

        .c-lt {
            fill: rgba(100, 200, 150, 0.35);
        }

        .c-lc {
            fill: rgba(231, 76, 60, 0.35);
        }

        .c-lcr {
            fill: rgba(34, 235, 57, 0.35);
        }

        .c-lsq {
            fill: rgba(200, 120, 200, 0.35);
        }

        /* -- DS4 Line-Art Vector Controller -- */
        .ds4-svg {
            filter: drop-shadow(0 0 30px rgba(34, 235, 57, 0.08)) drop-shadow(0 4px 20px rgba(0, 0, 0, 0.3));
        }

        /* DS4 stick dome hover */
        .ds4-svg .gp-stick:hover circle:nth-child(2) {
            fill: rgba(255, 255, 255, 0.06) !important;
        }

        /* DS4 face button inner ring hover */
        .ds4-svg .gp-face circle:nth-child(3) {
            transition: stroke-opacity 0.2s ease;
        }

        .ds4-svg .gp-face:hover circle:nth-child(3) {
            stroke-opacity: 0.3 !important;
        }

        .ds4-body-outline {
            transition: stroke 0.3s;
        }

        .ds4-face-btn {
            opacity: 0.9;
            transition: opacity 0.2s, transform 0.2s;
            transform-origin: center;
            transform-box: fill-box;
        }

        .ds4-face-btn:hover {
            opacity: 1;
            animation: ds4FacePulse 0.8s ease-in-out infinite;
        }

        @keyframes ds4FacePulse {

            0%,
            100% {
                transform: scale(1);
            }

            50% {
                transform: scale(1.12);
            }
        }

        .ds4-power {
            opacity: 0.7;
            transition: opacity 0.2s;
        }

        .ds4-power:hover {
            opacity: 1;
        }

        .ds4-dpad polygon {
            transition: stroke 0.2s;
        }

        .ds4-dpad polygon:hover {
            stroke: rgba(100, 200, 220, 0.9);
        }

        /* -- Xbox One X Line-Art Vector Controller -- */
        .xbox-svg {
            filter: drop-shadow(0 0 30px rgba(34, 235, 57, 0.08)) drop-shadow(0 4px 20px rgba(0, 0, 0, 0.3));
        }

        .xbox-svg .gp-stick:hover circle:nth-child(2) {
            fill: rgba(255, 255, 255, 0.06) !important;
        }

        .xbox-svg .gp-face circle:nth-child(2) {
            transition: stroke-opacity 0.2s ease;
        }

        .xbox-svg .gp-face:hover circle:nth-child(2) {
            stroke-opacity: 0.35 !important;
        }

        /* -- Gamepad Interactive SVG Hover Effects -- */
        .gp-btn {
            cursor: pointer;
            pointer-events: all;
            transition: stroke 0.15s ease, fill 0.15s ease, filter 0.15s ease;
        }

        .gp-btn:hover {
            stroke: rgba(255, 255, 255, 1) !important;
            fill: rgba(255, 255, 255, 0.08);
        }

        /* -- ???????? Face Button Colored Hover Glows -- */
        .gp-face {
            transition: filter 0.2s ease;
        }

        .gp-face-y:hover {
            filter: drop-shadow(0 0 12px rgba(241, 196, 15, 0.5)) drop-shadow(0 0 25px rgba(241, 196, 15, 0.2));
        }

        .gp-face-y:hover circle:first-child {
            stroke: rgba(241, 196, 15, 0.8) !important;
        }

        .gp-face-x:hover {
            filter: drop-shadow(0 0 12px rgba(34, 235, 57, 0.5)) drop-shadow(0 0 25px rgba(34, 235, 57, 0.2));
        }

        .gp-face-x:hover circle:first-child {
            stroke: rgba(34, 235, 57, 0.8) !important;
        }

        .gp-face-a:hover {
            filter: drop-shadow(0 0 12px rgba(46, 204, 64, 0.5)) drop-shadow(0 0 25px rgba(46, 204, 64, 0.2));
        }

        .gp-face-a:hover circle:first-child {
            stroke: rgba(46, 204, 64, 0.8) !important;
        }

        .gp-face-b:hover {
            filter: drop-shadow(0 0 12px rgba(231, 76, 60, 0.5)) drop-shadow(0 0 25px rgba(231, 76, 60, 0.2));
        }

        .gp-face-b:hover circle:first-child {
            stroke: rgba(231, 76, 60, 0.8) !important;
        }

        /* -- ?? Xbox Guide / Power Button Breathing Pulse -- */
        .gp-power-btn {
            animation: gpPowerBreath 3s ease-in-out infinite;
        }

        .gp-power-btn circle {
            transition: stroke 0.3s ease, fill 0.3s ease;
        }

        .gp-power-btn:hover {
            animation: none;
            filter: drop-shadow(0 0 16px var(--scheme-glow)) drop-shadow(0 0 30px var(--scheme-glow));
        }

        .gp-power-btn:hover circle {
            stroke: var(--scheme) !important;
            fill: rgba(34, 235, 57, 0.15) !important;
        }

        @keyframes gpPowerBreath {

            0%,
            100% {
                filter: drop-shadow(0 0 4px var(--scheme-glow));
                opacity: 0.85;
            }

            50% {
                filter: drop-shadow(0 0 14px var(--scheme-glow)) drop-shadow(0 0 24px rgba(34, 235, 57, 0.1));
                opacity: 1;
            }
        }

        /* -- ??? Analog Stick Hover + Subtle Idle -- */
        .gp-stick {
            cursor: pointer;
            transition: filter 0.2s ease;
        }

        .gp-stick circle:first-child {
            transition: stroke 0.2s ease;
        }

        .gp-stick:hover {
            filter: drop-shadow(0 0 10px rgba(150, 180, 220, 0.25));
        }

        .gp-stick:hover circle:first-child {
            stroke: rgba(255, 255, 255, 1) !important;
        }

        /* Subtle idle micro-wobble on the stick dome highlight */
        .gp-stick circle:last-child {
            animation: gpStickIdle 4s ease-in-out infinite;
            transform-origin: center;
        }

        @keyframes gpStickIdle {

            0%,
            100% {
                opacity: 0.5;
            }

            50% {
                opacity: 0.9;
            }
        }

        /* -- ? Controller Body Outline Ambient Glow -- */
        .c-body {
            transition: stroke 0.4s ease, filter 0.4s ease;
        }

        .steam-ctrl:hover .c-body {
            stroke: rgba(100, 150, 220, 0.38);
            filter: drop-shadow(0 0 6px rgba(80, 130, 200, 0.08));
        }

        /* -- ?? Bound Button Glow Indicator -- */
        .gp-btn.gp-bound {
            filter: drop-shadow(0 0 6px var(--scheme-glow));
        }

        .gp-btn.gp-bound:not(:hover) {
            stroke: var(--scheme-dim) !important;
        }

        .gp-face.gp-bound {
            filter: drop-shadow(0 0 8px var(--scheme-glow));
        }

        .gp-stick.gp-bound circle:first-child {
            stroke: var(--scheme-dim) !important;
        }

        /* -- Trigger / Bumper Hover Color -- */
        .gp-btn[data-btn="LT"]:hover,
        .gp-btn[data-btn="RT"]:hover {
            filter: drop-shadow(0 0 10px rgba(180, 200, 240, 0.25));
        }

        .gp-btn[data-btn="LB"]:hover,
        .gp-btn[data-btn="RB"]:hover {
            filter: drop-shadow(0 0 8px rgba(180, 200, 240, 0.2));
        }

        /* -- DPad Directional Hover Glow -- */
        .gp-btn[data-btn^="DPad"]:hover {
            fill: rgba(200, 220, 255, 0.12) !important;
            filter: drop-shadow(0 0 6px rgba(150, 180, 240, 0.2));
        }

        /* -- Controller Button Hover Tooltip -- */
        .gp-tooltip {
            position: absolute;
            pointer-events: none;
            z-index: 999;
            padding: 10px 14px 10px 14px;
            border-radius: 12px;
            background: linear-gradient(135deg, rgba(12, 16, 30, 0.95) 0%, rgba(8, 12, 24, 0.97) 100%);
            border: 1px solid transparent;
            background-clip: padding-box;
            backdrop-filter: blur(20px) saturate(1.4);
            -webkit-backdrop-filter: blur(20px) saturate(1.4);
            box-shadow:
                0 8px 32px rgba(0, 0, 0, 0.5),
                0 2px 8px rgba(0, 0, 0, 0.3),
                0 0 0 1px rgba(80, 120, 200, 0.15),
                0 0 24px rgba(34, 235, 57, 0.07),
                inset 0 1px 0 rgba(255, 255, 255, 0.04);
            font-family: 'Inter', sans-serif;
            color: rgba(210, 225, 255, 0.9);
            white-space: nowrap;
            transform: translateY(-8px) scale(0.96);
            opacity: 0;
            transition: opacity 0.18s cubic-bezier(.4, 0, .2, 1), transform 0.18s cubic-bezier(.4, 0, .2, 1);
        }

        .gp-tooltip.visible {
            opacity: 1;
            transform: translateY(0) scale(1);
        }

        .gp-tooltip .gp-tt-header {
            display: flex;
            align-items: center;
            gap: 7px;
            margin-bottom: 6px;
        }

        .gp-tooltip .gp-tt-dot {
            width: 6px;
            height: 6px;
            border-radius: 50%;
            background: #22eb39;
            box-shadow: 0 0 6px rgba(34, 235, 57, 0.5);
            flex-shrink: 0;
            animation: gpTtDotPulse 2s ease-in-out infinite;
        }

        .gp-tooltip .gp-tt-dot.unbound {
            background: rgba(120, 120, 140, 0.3);
            box-shadow: none;
            animation: none;
        }

        @keyframes gpTtDotPulse {

            0%,
            100% {
                box-shadow: 0 0 6px rgba(34, 235, 57, 0.5);
            }

            50% {
                box-shadow: 0 0 10px rgba(34, 235, 57, 0.8), 0 0 20px rgba(34, 235, 57, 0.2);
            }
        }

        .gp-tooltip .gp-tt-label {
            color: rgba(200, 215, 245, 0.85);
            font-weight: 700;
            font-size: 11px;
            letter-spacing: 0.3px;
        }

        .gp-tooltip .gp-tt-divider {
            height: 1px;
            background: linear-gradient(90deg, rgba(34, 235, 57, 0.2), rgba(34, 235, 57, 0.05));
            margin-bottom: 7px;
        }

        .gp-tooltip .gp-tt-keys {
            display: flex;
            gap: 5px;
            flex-wrap: wrap;
        }

        .gp-tooltip .gp-tt-key {
            padding: 3px 10px;
            border-radius: 6px;
            background: linear-gradient(180deg, rgba(40, 55, 90, 0.5) 0%, rgba(25, 35, 65, 0.6) 100%);
            border: 1px solid rgba(80, 120, 200, 0.25);
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.06);
            color: rgba(190, 215, 255, 0.95);
            font-size: 11px;
            font-weight: 700;
            letter-spacing: 0.4px;
            text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
        }

        .gp-tooltip .gp-tt-key.l3-dir {
            font-size: 10px;
            padding: 2px 7px;
            min-width: 44px;
            text-align: center;
        }

        .gp-tooltip .gp-tt-key.l3-dir .dir-arrow {
            opacity: 0.5;
            margin-right: 3px;
        }

        .gp-tooltip .gp-tt-none {
            color: rgba(140, 140, 165, 0.4);
            font-style: italic;
            font-weight: 500;
            font-size: 11px;
        }

        .gp-face {
            cursor: pointer;
            pointer-events: all;
            transition: filter 0.06s ease;
        }

        .gp-face circle,
        .gp-face text {
            transition: fill 0.06s ease, stroke 0.06s ease;
        }

        .gp-face:hover circle {
            stroke: rgba(255, 255, 255, 1) !important;
        }

        .gp-face-y:hover circle {
            fill: rgba(241, 196, 15, 0.18);
        }

        .gp-face-x:hover circle {
            fill: rgba(34, 235, 57, 0.18);
        }

        .gp-face-a:hover circle {
            fill: rgba(46, 204, 64, 0.18);
        }

        .gp-face-b:hover circle {
            fill: rgba(231, 76, 60, 0.18);
        }

        .gp-face-y:hover text {
            fill: rgb(255, 220, 50);
        }

        .gp-face-x:hover text {
            fill: rgb(34, 235, 57);
        }

        .gp-face-a:hover text {
            fill: rgb(80, 255, 130);
        }

        .gp-face-b:hover text {
            fill: rgb(255, 100, 90);
        }

        /* PS4 face button symbol hover effects */
        .gp-face polygon,
        .gp-face line,
        .gp-face rect {
            transition: stroke 0.06s ease;
        }

        .gp-face-y:hover polygon {
            stroke: rgb(50, 255, 160);
        }

        .gp-face-b:hover circle:last-child {
            stroke: rgb(255, 100, 90);
        }

        .gp-face-a:hover line {
            stroke: rgb(34, 235, 57);
        }

        .gp-face-x:hover rect {
            stroke: rgb(240, 170, 230);
        }

        /* PS4 face button fill overrides */
        .ds4-svg .gp-face-y:hover circle:first-child {
            fill: rgba(0, 209, 123, 0.18);
        }

        .ds4-svg .gp-face-b:hover circle:first-child {
            fill: rgba(238, 63, 63, 0.18);
        }

        .ds4-svg .gp-face-a:hover circle:first-child {
            fill: rgba(34, 235, 57, 0.18);
        }

        .ds4-svg .gp-face-x:hover circle:first-child {
            fill: rgba(217, 137, 206, 0.18);
        }

        .gp-stick {
            cursor: pointer;
            pointer-events: all;
            transition: filter 0.06s ease;
        }

        .gp-stick circle {
            transition: stroke 0.06s ease, fill 0.06s ease;
        }

        .gp-stick:hover circle {
            stroke: rgba(255, 255, 255, 1) !important;
        }

        .gp-stick:hover circle:first-child {
            fill: rgba(255, 255, 255, 0.06);
        }

        .gp-btn-g {
            cursor: pointer;
            pointer-events: all;
        }

        .gp-btn-g circle {
            transition: stroke 0.2s ease, fill 0.2s ease;
        }

        .gp-btn-g:hover circle {
            stroke: rgba(255, 255, 255, 1) !important;
            fill: rgba(255, 255, 255, 0.06);
        }

        /* Interactive overlay buttons */
        .ctrl-btn.sc {
            position: absolute;
            transform: translate(-50%, -50%);
            background: transparent;
            border: 1px solid transparent;
            color: transparent;
            font-family: var(--font);
            font-size: 0;
            font-weight: 700;
            cursor: pointer;
            width: 30px;
            height: 30px;
            border-radius: 50%;
            padding: 0;
            transition: all 0.15s ease;
            z-index: 5;
        }

        .ctrl-btn.sc.sm {
            width: 22px;
            height: 22px;
        }

        .ctrl-btn.sc:hover {
            border-color: transparent;
            background: transparent;
        }

        .ctrl-btn.sc:active {
            border-color: transparent;
            background: transparent;
        }

        .ctrl-btn.sc.remapping {
            border-color: rgba(34, 235, 57, 0.5);
            animation: scRemapPulse 1s ease-in-out infinite;
        }

        @keyframes scRemapPulse {

            0%,
            100% {
                box-shadow: 0 0 6px rgba(34, 235, 57, 0.2);
            }

            50% {
                box-shadow: 0 0 14px rgba(34, 235, 57, 0.5);
            }
        }

        /* -- Remap Overlay & Modal -- */
        .remap-overlay {
            position: fixed;
            inset: 0;
            background: rgba(0, 0, 0, 0.65);
            backdrop-filter: blur(8px);
            z-index: 9999;
            display: flex;
            align-items: center;
            justify-content: center;
            opacity: 0;
            transition: opacity 0.3s ease;
        }

        .remap-overlay.active {
            opacity: 1;
        }

        .remap-modal {
            background: rgba(14, 16, 22, 0.95);
            border: 1px solid var(--card-border);
            border-radius: 20px;
            padding: 24px 28px;
            min-width: 300px;
            backdrop-filter: blur(20px);
            box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5), 0 0 30px var(--scheme-glow);
            transform: scale(0.9);
            transition: transform 0.3s ease;
        }

        .remap-overlay.active .remap-modal {
            transform: scale(1);
        }

        .remap-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 16px;
        }

        .remap-btn-name {
            font-size: 20px;
            font-weight: 700;
            color: var(--scheme);
        }

        .remap-close {
            background: rgba(255, 60, 60, 0.06);
            border: 1px solid rgba(255, 80, 80, 0.12);
            color: rgba(255, 120, 120, 0);
            width: 28px;
            height: 28px;
            border-radius: 8px;
            font-size: 14px;
            font-weight: 500;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
            position: relative;
            overflow: hidden;
            padding: 0;
        }

        .remap-header:hover .remap-close {
            color: rgba(255, 130, 130, 0.7);
            background: rgba(255, 60, 60, 0.08);
        }

        .remap-close:hover {
            color: #fff !important;
            background: rgba(255, 55, 55, 0.55) !important;
            border-color: rgba(255, 80, 80, 0.4);
            box-shadow: 0 0 16px rgba(255, 55, 55, 0.25), 0 0 4px rgba(255, 55, 55, 0.15);
            transform: scale(1.08);
        }

        .remap-close:active {
            transform: scale(0.92);
            background: rgba(255, 55, 55, 0.7) !important;
        }

        .remap-body {
            text-align: center;
            padding: 22px 24px;
        }

        .remap-current {
            font-size: 13px;
            color: var(--text2);
            margin-bottom: 16px;
        }

        .remap-current strong {
            color: var(--scheme);
        }

        .remap-prompt {
            font-size: 16px;
            font-weight: 600;
            color: var(--text);
            padding: 18px 24px;
            border: 2px dashed rgba(34, 235, 57, 0.28);
            border-radius: 14px;
            background: rgba(34, 235, 57, 0.04);
            margin-bottom: 14px;
            animation: remapBlink 1.5s ease-in-out infinite;
        }

        @keyframes remapBlink {

            0%,
            100% {
                border-color: rgba(34, 235, 57, 0.28);
            }

            50% {
                border-color: rgba(34, 235, 57, 0.55);
            }
        }

        .remap-hint {
            font-size: 11px;
            color: var(--text3);
            margin-top: 14px;
        }

        .remap-hint kbd {
            display: inline-block;
            padding: 2px 6px;
            border-radius: 4px;
            background: var(--bg4);
            border: 1px solid var(--border);
            font-family: var(--mono);
            font-size: 10px;
            color: var(--text2);
        }

        /* -- L3 Direction Selector (Premium) -- */
        .l3-dir-grid {
            display: grid;
            grid-template-columns: 1fr 1fr 1fr;
            grid-template-rows: auto auto auto;
            gap: 8px;
            padding: 8px 0;
        }

        .l3-dir-btn {
            position: relative;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            padding: 14px 8px 10px;
            background: linear-gradient(145deg, rgba(22, 26, 38, 0.95), rgba(14, 16, 22, 0.9));
            border: 1px solid rgba(80, 100, 140, 0.15);
            border-radius: 14px;
            color: #dce5f0;
            font-size: 13px;
            font-weight: 600;
            cursor: pointer;
            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
            overflow: hidden;
            backdrop-filter: blur(10px);
        }

        .l3-dir-btn::before {
            content: '';
            position: absolute;
            inset: 0;
            background: radial-gradient(ellipse at 50% 0%, var(--scheme-glow), transparent 70%);
            opacity: 0;
            transition: opacity 0.35s ease;
            pointer-events: none;
        }

        .l3-dir-btn:hover {
            border-color: var(--scheme);
            transform: translateY(-2px);
            box-shadow: 0 6px 24px var(--scheme-glow), 0 0 12px var(--scheme-glow);
        }

        .l3-dir-btn:hover::before {
            opacity: 1;
        }

        .l3-dir-btn:active {
            transform: translateY(0) scale(0.97);
        }

        .l3-dir-btn .l3-dir-arrow {
            font-size: 22px;
            line-height: 1;
            margin-bottom: 4px;
            opacity: 0.7;
            transition: all 0.3s ease;
        }

        .l3-dir-btn:hover .l3-dir-arrow {
            opacity: 1;
            color: var(--scheme);
            transform: scale(1.15);
        }

        .l3-dir-btn .l3-dir-label {
            font-size: 12px;
            font-weight: 600;
            letter-spacing: 0.3px;
        }

        .l3-dir-btn .l3-dir-key {
            margin-top: 5px;
            padding: 2px 10px;
            border-radius: 6px;
            background: rgba(34, 235, 57, 0.08);
            border: 1px solid rgba(34, 235, 57, 0.15);
            font-size: 10px;
            font-weight: 700;
            color: var(--scheme);
            letter-spacing: 0.5px;
            min-width: 30px;
            text-align: center;
        }

        .l3-dir-btn .l3-dir-key.unbound {
            color: rgba(140, 155, 180, .4);
            border-color: rgba(60, 70, 100, .2);
            background: rgba(30, 34, 46, .5);
        }

        .l3-dir-btn.l3-center {
            background: linear-gradient(145deg, rgba(34, 235, 57, 0.08), rgba(34, 235, 57, 0.03));
            border-color: rgba(34, 235, 57, 0.25);
        }

        .l3-dir-btn.l3-center:hover {
            background: linear-gradient(145deg, rgba(34, 235, 57, 0.15), rgba(34, 235, 57, 0.06));
        }

        .l3-dir-btn.l3-center .l3-dir-arrow {
            width: 20px;
            height: 20px;
            border-radius: 50%;
            border: 2px solid rgba(34, 235, 57, 0.5);
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 10px;
        }

        .l3-dir-subtitle {
            color: rgba(140, 155, 180, .55);
            font-size: 11px;
            text-align: center;
            margin-bottom: 2px;
            letter-spacing: 0.5px;
            text-transform: uppercase;
            font-weight: 600;
        }

        /* Back button in keybind modal */
        .remap-back-btn {
            display: flex;
            align-items: center;
            justify-content: center;
            width: 30px;
            height: 30px;
            border-radius: 9px;
            border: 1px solid rgba(80, 100, 140, 0.2);
            background: linear-gradient(145deg, rgba(22, 26, 38, 0.95), rgba(14, 16, 22, 0.9));
            color: var(--text2);
            cursor: pointer;
            transition: all 0.25s ease;
            flex-shrink: 0;
        }

        .remap-back-btn:hover {
            border-color: var(--scheme);
            color: var(--scheme);
            background: rgba(34, 235, 57, 0.08);
            box-shadow: 0 0 12px var(--scheme-glow);
            transform: translateX(-2px);
        }

        .remap-back-btn:active {
            transform: scale(0.92);
        }

        /* Opposite direction prompt */
        .l3-opposite-prompt {
            margin-top: 12px;
            padding: 14px 18px;
            background: linear-gradient(145deg, rgba(34, 235, 57, 0.06), rgba(14, 16, 22, 0.9));
            border: 1px solid rgba(34, 235, 57, 0.2);
            border-radius: 14px;
            text-align: center;
            animation: l3PromptFade 0.3s ease;
        }

        .l3-opposite-prompt .l3-opp-text {
            font-size: 12px;
            color: rgba(180, 195, 220, .7);
            margin-bottom: 10px;
        }

        .l3-opposite-prompt .l3-opp-text strong {
            color: var(--scheme);
            font-weight: 700;
        }

        .l3-opp-actions {
            display: flex;
            gap: 8px;
            justify-content: center;
        }

        .l3-opp-btn {
            padding: 8px 18px;
            border-radius: 10px;
            font-size: 12px;
            font-weight: 600;
            cursor: pointer;
            transition: all 0.25s ease;
            border: 1px solid rgba(80, 100, 140, .2);
        }

        .l3-opp-btn.primary {
            background: linear-gradient(135deg, var(--scheme), rgba(34, 235, 57, 0.7));
            color: #fff;
            border-color: transparent;
        }

        .l3-opp-btn.primary:hover {
            box-shadow: 0 4px 16px var(--scheme-glow);
            transform: translateY(-1px);
        }

        .l3-opp-btn.secondary {
            background: rgba(30, 34, 46, .8);
            color: var(--text2);
        }

        .l3-opp-btn.secondary:hover {
            background: rgba(40, 44, 56, .9);
            color: var(--text);
        }

        @keyframes l3PromptFade {
            from {
                opacity: 0;
                transform: translateY(8px);
            }

            to {
                opacity: 1;
                transform: translateY(0);
            }
        }

        /* -- Bound Controller Button State -- */
        .ctrl-btn.bound {
            border-color: var(--scheme) !important;
            background: rgba(34, 235, 57, 0.12) !important;
            box-shadow: 0 0 10px var(--scheme-glow), inset 0 0 6px rgba(34, 235, 57, 0.06);
            color: var(--scheme);
            font-weight: 600;
        }

        /* -- Engine Running State -- */
        .engine-row .engine-icon {
            transition: color 0.3s ease;
        }

        /* -- Config Page Enhanced -- */
        /* (old config-item styles removed — see new .cfg-card styles above) */

        .cfg-del-btn:hover {
            border-color: rgba(255, 75, 75, 0.5);
            background: rgba(255, 75, 75, 0.1);
            color: #ff4b4b;
        }

        .config-empty {
            text-align: center;
            padding: 40px 20px;
            color: var(--text3);
            font-size: 14px;
        }

        /* -----------------------------------------------
   Card Buttons (Smart Actions, Paddles, Open Advanced)
   ----------------------------------------------- */
        .card-btn {
            width: 100%;
            padding: 10px 16px;
            border: 1px solid rgba(255, 255, 255, 0.06);
            border-radius: 12px;
            background: linear-gradient(145deg, rgba(14, 16, 26, 0.7) 0%, rgba(8, 10, 18, 0.5) 100%);
            color: var(--text);
            font-family: 'Inter', sans-serif;
            font-size: 12px;
            font-weight: 600;
            cursor: pointer;
            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
            text-align: center;
            letter-spacing: 0.5px;
            position: relative;
            overflow: hidden;
        }

        .card-btn::before {
            content: '';
            position: absolute;
            inset: 0;
            background: linear-gradient(135deg, var(--scheme-glow), transparent 50%);
            opacity: 0;
            transition: opacity 0.3s;
        }

        .card-btn:hover {
            background: linear-gradient(145deg, rgba(16, 18, 28, 0.85) 0%, rgba(10, 12, 20, 0.7) 100%);
            border-color: var(--scheme-alpha);
            box-shadow: 0 0 20px var(--scheme-glow), 0 6px 20px rgba(0, 0, 0, 0.25);
            transform: translateY(-2px);
        }

        .card-btn:hover::before {
            opacity: 1;
        }

        .card-btn:active {
            transform: translateY(0) scale(0.98);
            box-shadow: 0 0 8px var(--scheme-glow);
        }

        .card-btn.accent {
            border-color: var(--scheme-alpha);
            background: linear-gradient(145deg, rgba(10, 12, 22, 0.8) 0%, rgba(6, 8, 16, 0.6) 100%);
            color: var(--scheme);
        }

        .card-btn.accent:hover {
            background: rgba(10, 12, 22, 0.85);
            border-color: var(--scheme);
            box-shadow: 0 0 20px var(--scheme-glow), 0 4px 20px rgba(0, 0, 0, 0.25);
            color: var(--text);
        }

        .adv-settings-row {
            transition: all 0.3s ease;
        }

        /* -----------------------------------------------
   Modal Overlay System
   ----------------------------------------------- */
        .modal-overlay {
            position: fixed;
            inset: 0;
            background: rgba(0, 0, 0, 0.7);
            backdrop-filter: blur(12px) saturate(0.8);
            display: flex;
            align-items: center;
            justify-content: center;
            z-index: 1000;
            opacity: 1;
            transition: opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        }

        .modal-overlay.hidden {
            display: none;
            opacity: 0;
        }

        .modal-card {
            background: rgba(10, 12, 20, 0.97);
            border: 1px solid rgba(255, 255, 255, 0.08);
            border-radius: 24px;
            width: 90%;
            max-width: 480px;
            max-height: 85vh;
            display: flex;
            flex-direction: column;
            box-shadow:
                0 24px 80px rgba(0, 0, 0, 0.6),
                0 0 40px var(--scheme-glow),
                0 0 0 1px rgba(255, 255, 255, 0.04) inset,
                0 1px 0 rgba(255, 255, 255, 0.06) inset;
            animation: modalSlideIn 0.35s cubic-bezier(0.16, 1, 0.3, 1);
            backdrop-filter: blur(20px) saturate(1.2);
        }

        .modal-card.modal-lg {
            max-width: 520px;
        }

        @keyframes modalSlideIn {
            from {
                transform: translateY(30px) scale(0.97);
                opacity: 0;
            }

            to {
                transform: translateY(0) scale(1);
                opacity: 1;
            }
        }

        .modal-header {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 18px 22px;
            border-bottom: 1px solid rgba(255, 255, 255, 0.06);
            background: rgba(255, 255, 255, 0.01);
        }

        .modal-title {
            font-family: 'Inter', sans-serif;
            font-weight: 700;
            font-size: 15px;
            color: var(--text);
            letter-spacing: 0.2px;
        }

        .modal-close {
            background: rgba(255, 75, 75, 0.08);
            border: 1px solid rgba(255, 75, 75, 0.2);
            color: rgba(255, 120, 120, 0.7);
            width: 30px;
            height: 30px;
            border-radius: 10px;
            cursor: pointer;
            font-size: 12px;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
        }

        .modal-close:hover {
            background: rgba(255, 75, 75, 0.35);
            border-color: rgba(255, 75, 75, 0.6);
        }

        .modal-body {
            padding: 16px 20px;
            overflow-y: auto;
        }

        .modal-scroll {
            max-height: calc(85vh - 60px);
            scrollbar-width: thin;
            scrollbar-color: rgba(34, 235, 57, 0.2) transparent;
        }

        .modal-placeholder {
            color: var(--text3);
            font-size: 13px;
            text-align: center;
            padding: 20px 0;
        }

        /* Advanced Settings sections */
        .adv-section {
            margin-bottom: 8px;
            padding: 8px 0;
            border-bottom: 1px solid rgba(34, 235, 57, 0.08);
        }

        .adv-section:last-child {
            border-bottom: none;
        }

        .adv-sub {
            padding: 10px 8px 6px 28px;
            transition: all 0.3s ease;
        }

        .adv-sub.hidden {
            display: none;
        }

        /* Paddles modal card items */
        .paddle-card {
            background: linear-gradient(145deg, rgba(14, 18, 30, 0.85) 0%, rgba(10, 12, 22, 0.75) 100%);
            border: 1px solid rgba(255, 255, 255, 0.06);
            border-radius: 14px;
            padding: 16px;
            margin-bottom: 10px;
            transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
        }

        .paddle-card:hover {
            border-color: var(--scheme-alpha);
            box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15), 0 0 8px var(--scheme-glow);
        }

        .paddle-card .paddle-title {
            font-weight: 700;
            font-size: 12.5px;
            color: rgba(140, 165, 230, 0.92);
            margin-bottom: 8px;
        }

        .paddle-card select {
            width: 100%;
            padding: 8px 12px;
            background: rgba(8, 12, 22, 0.95);
            border: 1px solid rgba(60, 100, 180, 0.3);
            border-radius: 8px;
            color: rgba(230, 240, 255, 0.95);
            font-family: 'Inter', sans-serif;
            font-size: 12px;
            margin-top: 4px;
            outline: none;
            cursor: pointer;
        }

        .paddle-card select option {
            background: rgb(18, 22, 35);
            color: rgba(230, 240, 255, 0.95);
        }

        .paddle-card .slider-label {
            color: rgba(180, 195, 225, 0.8);
            font-size: 11px;
            font-weight: 600;
        }

        .paddle-card .toggle-row .t-label {
            color: rgba(220, 230, 250, 0.9);
        }

        .paddle-options {
            margin-top: 10px;
        }

        .paddle-options.hidden {
            display: none;
        }

        /* -- Notification Toasts -- */
        #notifications {
            position: fixed;
            bottom: 20px;
            right: 20px;
            z-index: 9999;
            display: flex;
            flex-direction: column-reverse;
            gap: 8px;
            pointer-events: none;
            max-width: 340px;
        }

        .notification {
            padding: 14px 20px;
            border-radius: 16px;
            background: rgba(10, 12, 20, 0.94);
            backdrop-filter: blur(20px) saturate(1.3);
            border: 1px solid rgba(255, 255, 255, 0.06);
            border-left: 3px solid var(--scheme);
            color: rgba(240, 245, 255, 0.95);
            font-family: var(--font);
            font-size: 13px;
            font-weight: 500;
            pointer-events: auto;
            box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4), 0 0 12px var(--scheme-glow);
            animation: notifSlideIn 0.35s cubic-bezier(.4, 0, .2, 1);
            transition: opacity 0.3s, transform 0.3s;
            position: relative;
            overflow: hidden;
        }

        .notification::after {
            content: '';
            position: absolute;
            bottom: 0;
            left: 0;
            height: 2px;
            width: 100%;
            background: var(--scheme);
            animation: notifProgress 4s linear forwards;
            opacity: 0.6;
        }

        .notification.success::after {
            background: rgb(60, 210, 120);
        }

        .notification.warning::after {
            background: rgb(240, 180, 60);
        }

        .notification.error::after {
            background: rgb(220, 70, 70);
        }

        @keyframes notifProgress {
            from {
                width: 100%;
            }

            to {
                width: 0%;
            }
        }

        .notification.success {
            border-left-color: rgb(60, 210, 120);
            box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4), 0 0 12px rgba(60, 210, 120, 0.15);
        }

        .notification.warning {
            border-left-color: rgb(240, 180, 60);
            box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4), 0 0 12px rgba(240, 180, 60, 0.15);
        }

        .notification.error {
            border-left-color: rgb(220, 70, 70);
            box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4), 0 0 12px rgba(220, 70, 70, 0.15);
        }

        .notification.info {
            border-left-color: var(--scheme);
        }

        .notification.shake {
            animation: notifSlideIn 0.35s cubic-bezier(.4, 0, .2, 1), notifShake 0.5s 0.15s cubic-bezier(.36, .07, .19, .97) both;
        }

        @keyframes notifShake {

            10%,
            90% {
                transform: translateX(-1px);
            }

            20%,
            80% {
                transform: translateX(2px);
            }

            30%,
            50%,
            70% {
                transform: translateX(-4px);
            }

            40%,
            60% {
                transform: translateX(4px);
            }
        }

        /* -- Engine Activated Big Banner -- */
        .engine-banner-overlay {
            position: fixed;
            inset: 0;
            z-index: 99999;
            display: flex;
            align-items: center;
            justify-content: center;
            background: rgba(0, 0, 0, 0.55);
            backdrop-filter: blur(12px);
            opacity: 0;
            transition: opacity 0.4s ease;
            cursor: pointer;
        }

        .engine-banner-overlay.active {
            opacity: 1;
        }

        .engine-banner {
            position: relative;
            width: 420px;
            max-width: 90vw;
            padding: 32px 36px 28px;
            background: linear-gradient(160deg, rgba(14, 18, 28, 0.97), rgba(8, 10, 18, 0.95));
            border: 1px solid rgba(34, 235, 57, 0.25);
            border-radius: 24px;
            backdrop-filter: blur(30px);
            box-shadow: 0 30px 80px rgba(0, 0, 0, 0.6), 0 0 50px var(--scheme-glow), inset 0 1px 0 rgba(255, 255, 255, 0.05);
            text-align: center;
            transform: scale(0.85) translateY(20px);
            transition: transform 0.5s cubic-bezier(0.16, 1.11, 0.3, 1.2);
            overflow: hidden;
        }

        .engine-banner-overlay.active .engine-banner {
            transform: scale(1) translateY(0);
        }

        .engine-banner::before {
            content: '';
            position: absolute;
            top: -60px;
            left: 50%;
            transform: translateX(-50%);
            width: 200px;
            height: 200px;
            background: radial-gradient(circle, var(--scheme-glow) 0%, transparent 70%);
            opacity: 0.4;
            pointer-events: none;
            animation: bannerPulseGlow 2s ease-in-out infinite;
        }

        .engine-banner-icon {
            width: 56px;
            height: 56px;
            margin: 0 auto 16px;
            border-radius: 50%;
            background: linear-gradient(135deg, rgba(60, 200, 120, 0.15), rgba(60, 200, 120, 0.05));
            border: 2px solid rgba(60, 200, 120, 0.5);
            display: flex;
            align-items: center;
            justify-content: center;
            animation: bannerIconPop 0.6s cubic-bezier(0.16, 1.11, 0.3, 1.2) 0.2s both;
        }

        .engine-banner-icon svg {
            width: 28px;
            height: 28px;
            color: #4ade80;
        }

        .engine-banner-title {
            font-size: 22px;
            font-weight: 800;
            color: #fff;
            margin-bottom: 8px;
            letter-spacing: 0.5px;
        }

        .engine-banner-subtitle {
            font-size: 13px;
            color: rgba(180, 195, 220, 0.7);
            margin-bottom: 20px;
            line-height: 1.5;
        }

        .engine-banner-key-wrap {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 12px;
            margin-bottom: 20px;
        }

        .engine-banner-key-label {
            font-size: 12px;
            color: rgba(140, 155, 180, 0.6);
            text-transform: uppercase;
            letter-spacing: 1px;
            font-weight: 600;
        }

        .engine-banner-key {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            padding: 10px 28px;
            border-radius: 12px;
            background: linear-gradient(145deg, rgba(34, 235, 57, 0.12), rgba(34, 235, 57, 0.04));
            border: 2px solid var(--scheme);
            color: #fff;
            font-size: 20px;
            font-weight: 800;
            font-family: var(--mono, 'JetBrains Mono', monospace);
            letter-spacing: 2px;
            box-shadow: 0 0 20px var(--scheme-glow), 0 0 40px rgba(34, 235, 57, 0.1);
            animation: bannerKeyPulse 1.8s ease-in-out infinite;
            min-width: 80px;
        }

        .engine-banner-dismiss {
            font-size: 11px;
            color: rgba(140, 155, 180, 0.4);
            letter-spacing: 0.5px;
        }

        @keyframes bannerPulseGlow {

            0%,
            100% {
                opacity: 0.3;
                transform: translateX(-50%) scale(1);
            }

            50% {
                opacity: 0.5;
                transform: translateX(-50%) scale(1.1);
            }
        }

        @keyframes bannerIconPop {
            from {
                transform: scale(0);
                opacity: 0;
            }

            to {
                transform: scale(1);
                opacity: 1;
            }
        }

        @keyframes bannerKeyPulse {

            0%,
            100% {
                box-shadow: 0 0 20px var(--scheme-glow), 0 0 40px rgba(34, 235, 57, 0.1);
            }

            50% {
                box-shadow: 0 0 30px var(--scheme-glow), 0 0 60px rgba(34, 235, 57, 0.2);
                border-color: rgba(34, 235, 57, 1);
            }
        }

        @keyframes notifSlideIn {
            from {
                opacity: 0;
                transform: translateX(40px);
            }

            to {
                opacity: 1;
                transform: translateX(0);
            }
        }

        /* -- Macro Edit Modal Fixes -- */
        .macro-modal-overlay .mfield-select,
        .macro-modal-overlay select {
            color: rgba(230, 235, 250, 0.95);
            background: rgba(12, 16, 28, 0.95);
        }

        .macro-modal-overlay .mfield-select option,
        .macro-modal-overlay select option {
            background: rgb(18, 22, 35);
            color: rgba(230, 235, 250, 0.95);
        }

        .macro-modal-overlay .mstep-type-select {
            color: rgba(230, 235, 250, 0.95);
        }

        .macro-modal-overlay .mbtn {
            padding: 8px 18px;
            border-radius: 10px;
            border: 1px solid rgba(60, 80, 120, 0.3);
            font-family: var(--font);
            font-size: 13px;
            font-weight: 600;
            cursor: pointer;
            transition: all 0.2s;
            color: rgba(230, 240, 255, 0.95);
        }

        .macro-modal-overlay .macro-step-card {
            border-color: rgba(60, 80, 120, 0.25);
        }

        .macro-modal-overlay .mstep-btn {
            color: rgba(200, 215, 240, 0.7);
        }

        .macro-modal-overlay .mstep-btn:hover {
            color: rgba(255, 255, 255, 0.95);
            background: rgba(255, 255, 255, 0.12);
        }

        .macro-modal-overlay .mstep-btn.del {
            color: rgba(220, 80, 80, 0.7);
        }

        .macro-modal-overlay .mstep-btn.del:hover {
            color: rgba(255, 90, 90, 0.95);
            background: rgba(220, 70, 70, 0.15);
        }

        .macro-modal-overlay .macro-edit-btn,
        .macro-edit-btn {
            padding: 6px 16px;
            border-radius: 8px;
            border: 1px solid var(--scheme-alpha);
            background: rgba(18, 22, 34, 0.85);
            color: var(--scheme);
            font-family: var(--font);
            font-size: 11px;
            font-weight: 600;
            cursor: pointer;
            transition: all 0.2s;
        }

        .macro-edit-btn:hover {
            background: var(--scheme-alpha);
            border-color: var(--scheme);
            color: var(--text);
        }

        /* ---------------------------------------------------
           PREMIUM VISUAL OVERHAUL — Relaxing Ambient Design
           --------------------------------------------------- */

        /* -- Ambient Aurora Orbs (floating background glow) -- */
        .ambient-orb {
            position: fixed;
            border-radius: 50%;
            pointer-events: none;
            z-index: 0;
            filter: blur(60px);
            opacity: 0;
            animation: orbFloat 20s ease-in-out infinite;
            mix-blend-mode: screen;
            will-change: transform, opacity;
            contain: strict;
        }

        .ambient-orb:nth-child(1) {
            width: 400px;
            height: 400px;
            top: -10%;
            left: -5%;
            background: var(--scheme);
            opacity: 0.04;
            animation-duration: 25s;
        }

        .ambient-orb:nth-child(2) {
            width: 300px;
            height: 300px;
            bottom: -5%;
            right: -5%;
            background: var(--glow);
            opacity: 0.03;
            animation-duration: 30s;
            animation-delay: -8s;
        }

        .ambient-orb:nth-child(3) {
            width: 250px;
            height: 250px;
            top: 40%;
            left: 50%;
            background: var(--scheme-dim);
            opacity: 0.025;
            animation-duration: 22s;
            animation-delay: -15s;
        }

        @keyframes orbFloat {

            0%,
            100% {
                transform: translate(0, 0) scale(1);
                opacity: 0.03;
            }

            25% {
                transform: translate(30px, -40px) scale(1.1);
                opacity: 0.05;
            }

            50% {
                transform: translate(-20px, 20px) scale(0.95);
                opacity: 0.04;
            }

            75% {
                transform: translate(15px, 30px) scale(1.05);
                opacity: 0.035;
            }
        }

        /* -- Floating Particles (relaxing ambient) -- */
        .ambient-particle {
            position: fixed;
            width: 2px;
            height: 2px;
            border-radius: 50%;
            background: var(--scheme);
            pointer-events: none;
            z-index: 1;
            opacity: 0;
            animation: particleDrift linear infinite;
        }

        @keyframes particleDrift {
            0% {
                transform: translateY(100vh) translateX(0) scale(0);
                opacity: 0;
            }

            10% {
                opacity: 0.4;
                transform: translateY(90vh) translateX(10px) scale(1);
            }

            50% {
                opacity: 0.2;
            }

            90% {
                opacity: 0.3;
                transform: translateY(10vh) translateX(-15px) scale(0.8);
            }

            100% {
                transform: translateY(-5vh) translateX(5px) scale(0);
                opacity: 0;
            }
        }

        /* -- Enhanced Glassmorphism Cards (lightweight — no backdrop-filter for perf) -- */
        /* backdrop-filter removed from cards/sections for performance */

        /* -- Premium Card Hover Shimmer -- */
        .card::before {
            background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.04), var(--scheme-alpha), rgba(255, 255, 255, 0.04), transparent);
        }

        .card:hover {
            transform: translateY(-3px) scale(1.005);
            box-shadow:
                0 12px 40px rgba(0, 0, 0, 0.3),
                0 0 30px var(--scheme-glow),
                0 0 0 1px var(--scheme-alpha) inset;
        }

        /* -- Settings Section Hover Enhancement -- */
        .settings-section:hover {
            transform: translateY(-1px);
            box-shadow: 0 8px 32px rgba(0, 0, 0, 0.25), 0 0 20px var(--scheme-glow);
            border-color: rgba(255, 255, 255, 0.08);
        }

        /* -- Premium Scrollbar -- */
        ::-webkit-scrollbar {
            width: 6px;
        }

        ::-webkit-scrollbar-track {
            background: transparent;
        }

        ::-webkit-scrollbar-thumb {
            background: linear-gradient(180deg, var(--scheme-alpha), rgba(255, 255, 255, 0.06));
            border-radius: 10px;
            border: 1px solid rgba(255, 255, 255, 0.03);
        }

        ::-webkit-scrollbar-thumb:hover {
            background: linear-gradient(180deg, var(--scheme), var(--scheme-dim));
        }

        /* -- Upgraded Notifications -- */
        .notif {
            border: 1px solid rgba(255, 255, 255, 0.08) !important;
            box-shadow:
                0 8px 32px rgba(0, 0, 0, 0.4),
                0 0 0 1px rgba(255, 255, 255, 0.04) inset !important;
            animation: notifSlideIn 0.5s cubic-bezier(0.16, 1, 0.3, 1) !important;
        }

        .notif.fade-out {
            animation: notifSlideOut 0.4s cubic-bezier(0.4, 0, 0.2, 1) forwards !important;
        }

        @keyframes notifSlideIn {
            from {
                transform: translateX(120%) scale(0.8);
                opacity: 0;
                filter: blur(8px);
            }

            to {
                transform: translateX(0) scale(1);
                opacity: 1;
                filter: blur(0);
            }
        }

        @keyframes notifSlideOut {
            from {
                transform: translateX(0) scale(1);
                opacity: 1;
                filter: blur(0);
            }

            to {
                transform: translateX(120%) scale(0.8);
                opacity: 0;
                filter: blur(8px);
            }
        }

        /* -- Config Cards — Gradient Border + Glow -- */
        .cfg-card {
            position: relative;
            overflow: hidden;
            transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1) !important;
        }

        .cfg-card::before {
            content: '';
            position: absolute;
            inset: 0;
            border-radius: inherit;
            padding: 1px;
            background: linear-gradient(135deg, rgba(255, 255, 255, 0.06), transparent 40%, transparent 60%, var(--scheme-alpha));
            -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;
            pointer-events: none;
            opacity: 0;
            transition: opacity 0.3s;
        }

        .cfg-card:hover::before {
            opacity: 1;
        }

        .cfg-card:hover {
            transform: translateY(-4px) scale(1.02) !important;
            box-shadow: 0 16px 48px rgba(0, 0, 0, 0.35), 0 0 30px var(--scheme-glow) !important;
        }

        .cfg-card.cfg-active {
            border-color: var(--scheme) !important;
            box-shadow: 0 0 20px var(--scheme-glow), 0 4px 20px rgba(0, 0, 0, 0.3) !important;
        }

        .cfg-card.cfg-active::before {
            opacity: 1;
        }

        /* -- Toggle Switch Enhancement -- */
        .toggle-switch input:checked+.t-slider {
            box-shadow: 0 0 16px var(--scheme-glow), 0 2px 8px rgba(0, 0, 0, 0.2);
        }

        .toggle-switch input:checked+.t-slider::after {
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3), 0 0 12px var(--scheme-glow);
        }

        /* -- Engine Start Button Special Glow -- */
        .engine-row .toggle-switch input:checked+.t-slider {
            box-shadow: 0 0 20px rgba(40, 180, 80, 0.5), 0 0 40px rgba(40, 180, 80, 0.2) !important;
        }

        /* -- Tab Button Hover — Subtle Scale -- */
        .tab-btn {
            transition: color 0.25s, background 0.25s, transform 0.2s, text-shadow 0.25s;
        }

        .tab-btn:hover {
            transform: translateY(-1px);
        }

        .tab-btn.active {
            background: linear-gradient(135deg, var(--scheme-alpha), rgba(255, 255, 255, 0.02));
        }

        /* -- Knob Container Hover Glow -- */
        .knob-container:hover {
            filter: drop-shadow(0 0 12px var(--scheme-glow));
        }

        .knob-container {
            transition: filter 0.3s ease;
        }

        /* -- Header Enhancement -- */
        .header {
            background: linear-gradient(180deg, rgba(0, 0, 0, 0.45) 0%, rgba(0, 0, 0, 0.08) 100%);
        }

        /* -- Auth Card Enhancement -- */
        .auth-card {
            backdrop-filter: blur(40px) saturate(1.5);
            -webkit-backdrop-filter: blur(40px) saturate(1.5);
            box-shadow:
                0 30px 100px rgba(0, 0, 0, 0.6),
                0 0 0 1px rgba(255, 255, 255, 0.05) inset,
                0 1px 0 rgba(255, 255, 255, 0.08) inset,
                0 0 60px var(--scheme-glow);
        }

        .auth-card:hover {
            box-shadow:
                0 35px 110px rgba(0, 0, 0, 0.65),
                0 0 0 1px rgba(255, 255, 255, 0.06) inset,
                0 1px 0 rgba(255, 255, 255, 0.08) inset,
                0 0 80px var(--scheme-glow);
        }

        /* -- Smacro Card Enabled Glow -- */
        .smacro-card.enabled {
            box-shadow: 0 0 20px rgba(48, 195, 95, 0.08), 0 2px 8px rgba(0, 0, 0, 0.15);
        }

        .smacro-card.enabled:hover {
            box-shadow: 0 0 30px rgba(48, 195, 95, 0.12), 0 8px 32px rgba(0, 0, 0, 0.25);
        }

        /* -- Modal Enhancement -- */

        /* -- Script Tab Active Indicator Enhancement -- */
        .stab-btn.active {
            background: linear-gradient(135deg, rgba(20, 22, 34, 0.95), rgba(14, 16, 28, 0.9));
            box-shadow: 0 0 16px var(--scheme-glow), 0 2px 8px rgba(0, 0, 0, 0.2);
        }

        .stab-btn.active .stab-dot {
            box-shadow: 0 0 8px currentColor, 0 0 16px currentColor;
            animation: dotPulseActive 2s ease-in-out infinite;
        }

        @keyframes dotPulseActive {

            0%,
            100% {
                box-shadow: 0 0 6px currentColor;
            }

            50% {
                box-shadow: 0 0 12px currentColor, 0 0 20px currentColor;
            }
        }

        /* -- Keybind Button Enhancement -- */
        .key-btn {
            transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
        }

        .key-btn:hover {
            transform: translateY(-1px) scale(1.02) !important;
            box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3), 0 0 12px var(--scheme-glow) !important;
        }

        /* -- Bottom Bar Enhancement -- */

        /* -- Pulse animation for active elements -- */
        @keyframes subtleBreath {

            0%,
            100% {
                opacity: 0.6;
            }

            50% {
                opacity: 1;
            }
        }

        /* -- Smooth page transitions -- */
        .content-page {
            transition: opacity 0.3s ease;
        }

        .content-page.active {
            animation: pageReveal 0.5s cubic-bezier(0.16, 1, 0.3, 1) both;
        }

        @keyframes pageReveal {
            from {
                opacity: 0;
                transform: translateY(16px) scale(0.99);
                filter: blur(4px);
            }

            to {
                opacity: 1;
                transform: translateY(0) scale(1);
                filter: blur(0);
            }
        }

        /* -- Tooltip Enhancement -- */
        [title] {
            position: relative;
        }

        /* -- Select dropdown enhancement -- */
        .styled-select:hover {
            transform: translateY(-1px);
            box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2), 0 0 8px var(--scheme-glow);
        }

        /* -- Button press ripple effect -- */
        .card-btn,
        .btn-accent,
        .btn-outline {
            position: relative;
            overflow: hidden;
        }

        .card-btn::after,
        .btn-accent::after {
            content: '';
            position: absolute;
            inset: 0;
            background: radial-gradient(circle at center, rgba(255, 255, 255, 0.15), transparent 70%);
            opacity: 0;
            transition: opacity 0.3s;
            pointer-events: none;
        }

        .card-btn:active::after,
        .btn-accent:active::after {
            opacity: 1;
        }

        /* -- Seg control enhancement -- */
        .seg-highlight {
            box-shadow: 0 0 24px var(--scheme-glow), 0 0 8px var(--scheme-alpha), 0 2px 8px rgba(0, 0, 0, 0.3);
        }

        /* ---------------------------------------------------
           LEVEL 2 — Next-Gen Visual Effects
           --------------------------------------------------- */

        /* -- Mouse-Following Glow Cursor -- */
        #cursor-glow {
            position: fixed;
            width: 400px;
            height: 400px;
            border-radius: 50%;
            pointer-events: none;
            z-index: 1;
            background: radial-gradient(circle, var(--scheme-glow) 0%, transparent 70%);
            opacity: 0.12;
            transform: translate(-50%, -50%);
            mix-blend-mode: screen;
            will-change: transform;
            contain: layout style;
        }

        #app:hover #cursor-glow {
            opacity: 0.15;
        }

        /* -- Animated Neon Border Pulse on App -- */
        #app::after {
            content: '';
            position: absolute;
            inset: 0;
            border-radius: 0;
            pointer-events: none;
            z-index: 999;
            box-shadow:
                inset 0 1px 0 rgba(255, 255, 255, 0.04),
                inset 0 -1px 0 rgba(0, 0, 0, 0.2);
            animation: appBorderBreath 6s ease-in-out infinite;
        }

        @keyframes appBorderBreath {

            0%,
            100% {
                box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04), inset 0 -1px 0 rgba(0, 0, 0, 0.2);
            }

            50% {
                box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), inset 0 -1px 0 rgba(0, 0, 0, 0.3), inset 0 0 60px var(--scheme-glow);
            }
        }

        /* -- Animated Gradient Section Titles -- */
        .section-title {
            background: linear-gradient(90deg, var(--text2), var(--scheme), var(--text2));
            background-size: 200% auto;
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
            animation: gradientText 6s linear infinite;
        }

        .card-title {
            background: linear-gradient(90deg, var(--text2), var(--scheme), var(--text2));
            background-size: 200% auto;
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
            animation: gradientText 8s linear infinite;
        }

        .card-title::after {
            -webkit-text-fill-color: initial;
            background-clip: initial;
            -webkit-background-clip: initial;
        }

        @keyframes gradientText {
            0% {
                background-position: 0% center;
            }

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

        /* -- Card Spotlight Mouse Tracking -- */
        .card {
            --mouse-x: 50%;
            --mouse-y: 50%;
        }

        .card::after {
            background: radial-gradient(350px circle at var(--mouse-x) var(--mouse-y),
                    var(--scheme-glow) 0%,
                    transparent 100%);
            opacity: 0;
            transition: opacity 0.5s ease;
        }

        .card:hover::after {
            opacity: 0.8;
        }

        /* -- Settings Section Spotlight -- */
        .settings-section {
            --mouse-x: 50%;
            --mouse-y: 50%;
            position: relative;
        }

        .settings-section::after {
            content: '';
            position: absolute;
            inset: 0;
            border-radius: inherit;
            pointer-events: none;
            z-index: -1;
            background: radial-gradient(250px circle at var(--mouse-x) var(--mouse-y),
                    var(--scheme-glow) 0%,
                    transparent 100%);
            opacity: 0;
            transition: opacity 0.4s ease;
        }

        .settings-section:hover::after {
            opacity: 0.6;
        }

        /* -- Enhanced Auth Page — Holographic Ring -- */
        .logo-wrapper {
            position: relative;
        }

        .logo-wrapper::before {
            content: '';
            position: absolute;
            inset: -12px;
            border-radius: 50%;
            border: 2px solid transparent;
            background: conic-gradient(from 0deg, var(--scheme), transparent, var(--scheme-dim), transparent, var(--scheme)) border-box;
            -webkit-mask: linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0);
            mask: linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0);
            -webkit-mask-composite: xor;
            mask-composite: exclude;
            animation: holoRing 4s linear infinite;
            opacity: 0.6;
        }

        @keyframes holoRing {
            0% {
                transform: rotate(0deg);
            }

            100% {
                transform: rotate(360deg);
            }
        }

        .logo-wrapper::after {
            content: '';
            position: absolute;
            inset: -20px;
            border-radius: 50%;
            background: radial-gradient(circle, var(--scheme-glow) 0%, transparent 70%);
            opacity: 0.3;
            animation: logoGlow 3s ease-in-out infinite;
            pointer-events: none;
        }

        @keyframes logoGlow {

            0%,
            100% {
                opacity: 0.2;
                transform: scale(1);
            }

            50% {
                opacity: 0.45;
                transform: scale(1.15);
            }
        }

        /* -- Auth Title — Holographic Text -- */
        .auth-title {
            background: linear-gradient(135deg, var(--text) 0%, var(--scheme) 40%, #fff 50%, var(--scheme-dim) 60%, var(--text) 100%);
            background-size: 300% 300%;
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
            animation: holoText 5s ease infinite;
        }

        @keyframes holoText {
            0% {
                background-position: 0% 50%;
            }

            50% {
                background-position: 100% 50%;
            }

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

        /* -- Living Mesh Gradient Background -- */
        #mesh-gradient {
            position: absolute;
            inset: 0;
            z-index: 0;
            pointer-events: none;
            opacity: 0.35;
        }

        #mesh-gradient canvas {
            width: 100%;
            height: 100%;
        }

        /* -- Notification Progress Bar -- */
        .notif {
            position: relative;
            overflow: hidden;
        }

        .notif::after {
            content: '';
            position: absolute;
            bottom: 0;
            left: 0;
            height: 2px;
            background: linear-gradient(90deg, var(--scheme), var(--scheme-dim));
            animation: notifProgress 3s linear forwards;
            border-radius: 0 0 12px 12px;
        }

        .notif.success::after {
            background: linear-gradient(90deg, #30c85f, #20a850);
        }

        .notif.warning::after {
            background: linear-gradient(90deg, #f5a623, #e09520);
        }

        .notif.error::after {
            background: linear-gradient(90deg, #ff4b4b, #cc3030);
        }

        @keyframes notifProgress {
            from {
                width: 100%;
            }

            to {
                width: 0%;
            }
        }

        /* -- Enhanced Knob Label with Glow -- */
        .knob-label {
            transition: color 0.3s, text-shadow 0.3s;
        }

        .knob-container:hover .knob-label {
            color: var(--scheme);
            text-shadow: 0 0 8px var(--scheme-glow);
        }

        /* -- Slider Thumb Glow -- */
        .styled-slider::-webkit-slider-thumb {
            box-shadow: 0 0 0 3px rgba(34, 235, 57, 0.08), 0 2px 6px rgba(0, 0, 0, 0.35), 0 0 10px var(--scheme-glow);
        }

        .styled-slider:active::-webkit-slider-thumb {
            box-shadow: 0 0 0 5px var(--scheme-alpha), 0 0 18px var(--scheme-glow), 0 2px 8px rgba(0, 0, 0, 0.5);
        }

        /* -- Toggle Row — Neon highlight on hover -- */
        .toggle-row:hover {
            background: linear-gradient(135deg, rgba(255, 255, 255, 0.03), var(--scheme-glow));
            border-color: var(--scheme-alpha);
        }

        /* -- Breathing Neon Section Dots -- */
        .section-dot {
            animation: neonDotPulse 2.5s ease-in-out infinite;
        }

        @keyframes neonDotPulse {

            0%,
            100% {
                box-shadow: 0 0 4px var(--scheme), 0 0 8px var(--scheme-glow);
                transform: scale(1);
            }

            50% {
                box-shadow: 0 0 8px var(--scheme), 0 0 16px var(--scheme), 0 0 30px var(--scheme-glow);
                transform: scale(1.3);
            }
        }

        /* -- Config Active Card Breathing Border -- */
        .cfg-card.cfg-active {
            animation: cfgActivePulse 3s ease-in-out infinite;
        }

        @keyframes cfgActivePulse {

            0%,
            100% {
                box-shadow: 0 0 15px var(--scheme-glow), 0 4px 20px rgba(0, 0, 0, 0.3) !important;
            }

            50% {
                box-shadow: 0 0 30px var(--scheme-glow), 0 0 50px var(--scheme-glow), 0 4px 20px rgba(0, 0, 0, 0.3) !important;
            }
        }

        /* -- Smacro Card — Active Neon Left Bar -- */
        .smacro-card.enabled::before {
            animation: neonBarPulse 2s ease-in-out infinite;
        }

        @keyframes neonBarPulse {

            0%,
            100% {
                box-shadow: 2px 0 6px rgba(48, 195, 95, 0.3);
            }

            50% {
                box-shadow: 2px 0 12px rgba(48, 195, 95, 0.6), 4px 0 20px rgba(48, 195, 95, 0.3);
            }
        }

        /* -- Header Line — Rainbow Sweep -- */
        .header::after {
            background: linear-gradient(90deg, transparent, var(--scheme-alpha), var(--scheme), var(--scheme-alpha), transparent);
            background-size: 200% 100%;
            animation: headerSweep 8s linear infinite;
        }

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

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

        /* -- Button Shimmer on Hover -- */
        .btn-primary::before {
            background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
        }

        .cfg-card-load:hover {
            box-shadow: 0 0 16px var(--scheme-glow) !important;
        }

        /* -- Upgraded Bottom Gradient -- */
        #bottom-gradient {
            background: linear-gradient(to bottom,
                    transparent 0%,
                    rgba(0, 0, 0, 0.05) 30%,
                    var(--grad-bot) 60%,
                    rgba(0, 0, 0, 0.4) 100%);
        }

        /* -- Power / Off Bind Button on Controller -- */
        .gp-power-btn {
            pointer-events: all;
            transition: filter 0.3s ease, transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
            transform-origin: center;
            transform-box: fill-box;
        }

        .gp-power-btn:hover {
            filter: drop-shadow(0 0 8px var(--scheme)) drop-shadow(0 0 20px var(--scheme-glow)) drop-shadow(0 0 40px var(--scheme-glow));
            transform: scale(1.08);
        }

        .gp-power-btn:hover circle:nth-child(3) {
            stroke: var(--scheme) !important;
            stroke-width: 2.5 !important;
        }

        .gp-power-btn:active {
            filter: drop-shadow(0 0 16px var(--scheme)) drop-shadow(0 0 50px var(--scheme));
            transform: scale(0.95);
        }

        /* -- Responsive glassmorphism intensity -- */
        @media (prefers-reduced-motion: reduce) {

            .ambient-orb,
            .ambient-particle {
                display: none;
            }

            .section-title,
            .card-title {
                animation: none;
                -webkit-text-fill-color: var(--text2);
            }
        }

        /* -- Risky Script Badge -- */
        .smacro-risky-badge {
            display: inline-flex;
            align-items: center;
            gap: 3px;
            padding: 2px 7px;
            border-radius: 8px;
            background: rgba(255, 100, 60, 0.12);
            border: 1px solid rgba(255, 100, 60, 0.4);
            color: rgb(255, 130, 80);
            font-size: 9.5px;
            font-weight: 700;
            letter-spacing: 0.5px;
            text-transform: uppercase;
            font-family: var(--mono);
            animation: riskyPulse 2.8s ease-in-out infinite;
            margin-left: 6px;
            vertical-align: middle;
            flex-shrink: 0;
        }

        @keyframes riskyPulse {
            0%, 100% {
                box-shadow: 0 0 0 0 rgba(255, 100, 60, 0);
                border-color: rgba(255, 100, 60, 0.35);
            }
            50% {
                box-shadow: 0 0 8px 2px rgba(255, 100, 60, 0.18);
                border-color: rgba(255, 100, 60, 0.7);
            }
        }

        .smacro-card.risky {
            border-left: 2px solid rgba(255, 100, 60, 0.35) !important;
        }

        .smacro-card.risky.enabled {
            border-left: 2px solid rgba(255, 100, 60, 0.7) !important;
        }