/* CSS variables taken directly from itoolex.com's styling ecosystem */
        :root {

            /* ORB FREEZE v20260768 ------------------------------------------------
               Master motion switches. `paused` means the browser composites
               the layer once and then does no per-frame work at all.
               Set --orb-motion: running; to bring the drifting orbs back.
               Set --shimmer-motion: paused; to also freeze the logo/hero sheen.
               ------------------------------------------------------------- */
            --orb-motion: paused;
            --shimmer-motion: running;
            --font-ubuntu: 'Ubuntu', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
            /* ... your other variables ... */
            --bg: #0b0f1a;
            --bg-2: #111827;
            /* SECTION-MATCHED CARD COLOUR v20260774 ----------------------------
               Lifted verbatim from #how-it-works / #core-capabilities so every
               card matches those panels: bg-white dark:bg-slate-900/30 with
               border-slate-200/50 dark:border-slate-800/80.
               Consumed by .itoolex-card and .theme-toggle -- change here to
               restyle all cards at once. Alpha only, never backdrop-filter.
               ------------------------------------------------------------- */
            --card: rgba(15, 23, 42, 0.30);
            --card-border: rgba(30, 41, 59, 0.80);
            --text: #e8ecf4;
            --muted: #9aa6bd;
            --accent: #FFBF00;
            --accent-2: #00DD00;
            --accent-3: #FF7500;
            --good: #2ee6a6;
            --bad: #ff6b6b;
            --radius: 18px;
            --shadow: 0 20px 60px rgba(0, 0, 0, 0.45);
            --orb-opacity: 0.55;
            --hairline: rgba(255, 255, 255, 0.06);
            --body-bg: radial-gradient(1200px 600px at 80% -10%, #1b2440 0%, transparent 60%), var(--bg);
            --placeholder: #6b7690;
        }

        :root[data-theme="light"] {
            --bg: #f4f6fb;
            --bg-2: #ffffff;
            --card: #ffffff;
            --card-border: rgba(226, 232, 240, 0.50);
            --text: #1a2233;
            --muted: #586079;
            --good: #0aa46f;
            --bad: #e0484b;
            --shadow: 0 20px 50px rgba(31, 41, 70, 0.14);
            --orb-opacity: 0.30;
            --hairline: rgba(15, 23, 42, 0.08);
            --body-bg: radial-gradient(1200px 600px at 80% -10%, #dfe6fb 0%, transparent 60%), var(--bg);
            --placeholder: #9098ac;
        }

        /* ===== MOBILE ORB OPACITY ==============================================
           Phones / tablets only (max-width: 767px), for BOTH light and dark mode.

           Every orb has its OWN knob, so you can dial them in separately:
               --orb-1-opacity-mobile   top-left    green -> orange orb
               --orb-2-opacity-mobile   bottom-right green orb
               --orb-3-opacity-mobile   centre      orange orb

           Dark values live in :root, light values in :root[data-theme="light"],
           so the two themes can differ whenever you want. Desktop is untouched
           and still uses --orb-opacity on .bg-orbs.
           ==================================================================== */

        /* Dark mode (default) */
        :root {
            --orb-opacity-mobile: 0.05;
        }

        /* Light mode */
        :root[data-theme="light"] {
            --orb-opacity-mobile: 0.05;
        }

        @media (max-width: 767px) {
            /* AMBIENT ORB LAYER v20260775 -- there are no orb ELEMENTS any more,
               so the whole painted layer fades with one knob. The old rule set
               opacity:1 here to let each orb use its own value; leaving that in
               place would render the layer at FULL brightness on phones. */
            .bg-orbs { opacity: var(--orb-opacity-mobile, 0.05); }
        }

        /* 1. Keep this clean without font properties */
        * {
            box-sizing: border-box;
        }

        /* 2. Apply the variable to the body and all input elements */
        body, input, textarea, button, select {
            font-family: var(--font-ubuntu) !important;
        }
        
        body {
            background: var(--body-bg) !important;
            color: var(--text);
            min-height: 100vh;
            transition: background .3s ease, color .3s ease;
        }

        /* Ambient floating blurred background orbs */
/* Superseded v20260775 -- previous element-based orb layer:
        .bg-orbs { 
            position: fixed; 
            inset: 0; 
            z-index: 0; 
            pointer-events: none; 
            ( Detector parity: ONE blur pass over the orb layer, at the
               60px the detector uses. Cheaper than 80px (blur cost rises
               sharply with radius) and it lets the orbs stay small. )
            ( NO-BLUR v20260767 was: filter: blur(60px); )
            opacity: var(--orb-opacity); 
            transition: opacity .3s ease; 
        }
*/

/* AMBIENT ORB LAYER v20260775 -------------------------------------------------
   Three animated, blurred DIVs became one painted gradient layer. No blur
   filter, no float animation, no compositing layers -- the GPU cost of an
   ambient glow should be zero, and now it is. Tune with --orb-opacity
   (desktop) and --orb-opacity-mobile (phones).
   -------------------------------------------------------------------------- */
.bg-orbs {
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    opacity: var(--orb-opacity);
    transition: opacity 0.3s ease;
    background-image:
        radial-gradient(circle at 20% 30%, #FFB70066 0%, transparent 55%),
        radial-gradient(circle at 50% 50%, #FF750055 0%, transparent 50%),
        radial-gradient(circle at 80% 70%, #00DD0066 0%, transparent 55%);
    will-change: opacity;
}

.dark .bg-orbs,
[data-theme="dark"] .bg-orbs {
    background-image:
        radial-gradient(circle at 20% 30%, #FF750066 0%, transparent 55%),
        radial-gradient(circle at 50% 50%, #FFB70055 0%, transparent 50%),
        radial-gradient(circle at 80% 70%, #00DD0066 0%, transparent 55%);
}
/* Retired v20260775 (no orb elements any more):


        .orb {
            position: absolute;
            border-radius: 50%;
            ( Own compositor layer, transform-only animation: no repaint per frame. )
            ( ORB FREEZE v20260768 was: will-change: transform;  -- a permanent GPU layer is only
               worth paying for while something actually animates. )
        }
*/
/* Retired v20260775 (no orb elements any more):
        .orb-1 {
            width: 380px;
            height: 380px;
            ( NO-BLUR v20260767: was a hard-edged fill softened by .bg-orbs blur(60px).
               The falloff is now baked into the gradient -- same look, and the
               layer is painted once instead of blurred every frame. )
            background: radial-gradient(circle at 50% 50%,
                rgba(0, 221, 0, 0.90) 0%,
                rgba(0, 221, 0, 0.55) 30%,
                rgba(128, 169, 0, 0.28) 52%,
                rgba(255, 117, 0, 0.10) 70%,
                rgba(255, 117, 0, 0) 84%);
            top: -80px;
            left: -60px;
            animation: float 6s ease-in-out infinite;
            ( ORB FREEZE v20260769 -- MUST stay after the `animation:` shorthand above; the
               shorthand resets play-state to running. )
            animation-play-state: var(--orb-motion, paused);
        }
*/
/* Retired v20260775 (no orb elements any more):
        .orb-2 {
            width: 320px;
            height: 320px;
            background: radial-gradient(circle at 50% 50%,
                rgba(0, 221, 0, 0.90) 0%,
                rgba(0, 221, 0, 0.52) 32%,
                rgba(0, 221, 0, 0.20) 56%,
                rgba(0, 221, 0, 0) 82%);
            bottom: 5%;
            right: -40px;
            animation: float 7s ease-in-out infinite reverse;
            ( ORB FREEZE v20260769 -- MUST stay after the `animation:` shorthand above; the
               shorthand resets play-state to running. )
            animation-play-state: var(--orb-motion, paused);
        }
*/
/* Retired v20260775 (no orb elements any more):
        .orb-3 {
            width: 260px;
            height: 260px;
            background: radial-gradient(circle at 50% 50%,
                rgba(255, 117, 0, 0.90) 0%,
                rgba(255, 117, 0, 0.52) 32%,
                rgba(255, 117, 0, 0.20) 56%,
                rgba(255, 117, 0, 0) 82%);
            top: 40%;
            left: 50%;
            animation: float 8s ease-in-out infinite;
            ( ORB FREEZE v20260769 -- MUST stay after the `animation:` shorthand above; the
               shorthand resets play-state to running. )
            animation-play-state: var(--orb-motion, paused);
        }
*/
/* Retired v20260775 (no orb elements any more):
        @keyframes float { 
            0%, 100% { transform: translate3d(0, 0, 0); } 
            50% { transform: translate3d(20px, -30px, 0); } 
        }
*/

        /* Glassmorphism theme cards mapping seamlessly onto HTML dashboard items */
        .itoolex-card {
            /* CHEAP GLASS v20260773 --------------------------------------------
               Translucent tint ONLY -- no backdrop-filter. This is exactly how
               the two well-liked sections achieve their glassy look: alpha over
               whatever is behind, which the compositor blends once per paint
               instead of re-sampling the backdrop every frame.
               Glassiness is controlled by --card in :root (dark and light).
               ---------------------------------------------------------------- */
            background: var(--card) !important;
            border: 1px solid var(--card-border) !important;
            border-radius: var(--radius);
            box-shadow: var(--shadow);
            transition: border-color 0.3s ease, box-shadow 0.3s ease;
        }

        /* Brand Custom Shimmer animations */
        .shimmer-animation {
            background: linear-gradient(
                to right, 
                #ff9900 20%, 
                #1ffa00 50%, 
                #ff9900 80%
            );
            background-size: 200% auto;
            color: #000;
            background-clip: text;
            -webkit-background-clip: text;
            -webkit-text-fill-color: rgba(255, 105, 0, 0.0);
            animation: shimmer 8s linear infinite;
            animation-play-state: var(--shimmer-motion, running);
        }
        @keyframes shimmer {
            0% { background-position: 200% center; }
            100% { background-position: -200% center; }
        }

        .grad { 
            background: linear-gradient(90deg, var(--accent-2), var(--accent), var(--accent-3)); 
            -webkit-background-clip: text; 
            background-clip: text; 
            color: transparent; 
        }


/* Custom Interactive Gradient Accent Hovers */
.grad-hover-bg {
    position: relative !important;
    overflow: hidden !important;
    transition: color 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease, transform 0.2s cubic-bezier(0.16, 1, 0.3, 1), background-image 0.25s ease !important;
}

/* Forces the Green -> Gold -> Orange brand gradient layer over Tailwind utility blocks on hover */
.grad-hover-bg:hover {
    transform: translateY(-1.5px) !important;
    color: #ffffff !important;
    background-image: linear-gradient(90deg, var(--accent-2), var(--accent), var(--accent-3)) !important; 
    border-color: transparent !important;
    box-shadow: 0 12px 30px rgba(255, 117, 0, 0.3) !important;
}

/* Sync internal iconography and text color schemes during hover transitions */
.grad-hover-bg:hover svg,
.grad-hover-bg:hover i,
.grad-hover-bg:hover span {
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
}

/* Premium Gradient Floating Scrollbars matching the iTx Workspace */

::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}
::-webkit-scrollbar-track {
    background: transparent !important; /* Kept completely transparent */
}

/* 1. Global Viewport Rules (Targets root container textareas and viewport lists) */
html::-webkit-scrollbar-thumb,
body::-webkit-scrollbar-thumb,
*::-webkit-scrollbar-thumb {
    background-color: #FF7500; /* Fallback flat color */
    /* 180deg forces colors to blend vertically along the scroll track loop */
    background-image: linear-gradient(180deg, #FF9900 0%, #FF7500 50%, #FF3C00 100%) !important; 
    border: 3px solid transparent !important; /* Round spacing buffer */
    background-clip: padding-box !important;
    border-radius: 999px !important;
}

/* 2. Dynamic Gradient Switch on Hover (Green to Gold Matrix) */
html::-webkit-scrollbar-thumb:hover,
body::-webkit-scrollbar-thumb:hover,
*::-webkit-scrollbar-thumb:hover {
    background-color: #00DD00; 
    background-image: linear-gradient(180deg, #00DD00 0%, #FFBF00 100%) !important;
    border: 3px solid transparent !important;
    background-clip: padding-box !important;
}

/* 3. Dynamic Gradient Switch on Drag (Luminous Gold Matrix) */
html::-webkit-scrollbar-thumb:active,
body::-webkit-scrollbar-thumb:active,
*::-webkit-scrollbar-thumb:active {
    background-color: #FFBF00;
    background-image: linear-gradient(180deg, #FFBF00 0%, #FF9900 100%) !important;
    border: 3px solid transparent !important;
    background-clip: padding-box !important;
}

/* 4. Local Utility Containing Wrappers (.custom-scrollbar elements) */
.custom-scrollbar::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}
.custom-scrollbar::-webkit-scrollbar-track {
    background: transparent !important;
}
.custom-scrollbar::-webkit-scrollbar-thumb {
    background-color: #FF7500;
    background-image: linear-gradient(180deg, #FF9900 0%, #FF7500 50%, #FF3C00 100%) !important;
    border: 3px solid transparent !important;
    background-clip: padding-box !important;
    border-radius: 999px !important;
}
.custom-scrollbar::-webkit-scrollbar-thumb:hover {
    background-color: #00DD00;
    background-image: linear-gradient(180deg, #00DD00 0%, #FFBF00 100%) !important;
    border: 3px solid transparent !important;
    background-clip: padding-box !important;
}
.custom-scrollbar::-webkit-scrollbar-thumb:active {
    background-color: #FFBF00;
    background-image: linear-gradient(180deg, #FFBF00 0%, #FF9900 100%) !important;
    border: 3px solid transparent !important;
    background-clip: padding-box !important;
}

/* 5. Modern Selector Reset to force execution in Chromium layout engines */
@supports (selector(::-webkit-scrollbar)) {
    * {
        scrollbar-color: auto;
    }
}


/* Custom Interactive Button Shimmer Hover */
.shimmer-hover {
    position: relative !important;
    overflow: hidden !important;
    background-image: linear-gradient(90deg, #F97316, #AMBER-600) !important; /* Base state */
    /*background-image: linear-gradient(90deg, #F97316, #D97706) !important; /*its not taking though standard*/
    transition: color 0.3s ease, transform 0.2s ease, box-shadow 0.3s ease !important;
}

/* Activates the moving wave animation ONLY on hover */
.shimmer-hover:hover {
    transform: translateY(-1.5px) !important;
    color: #ffffff !important;
    
    /* FIX 1 & 2: Fixed the missing % unit on 100% and explicitly used background-image to force override Tailwind */
    background-image: linear-gradient(
        90deg, 
        #FF7500 0%, 
        #FFBF00 25%, 
        #00DD00 50%, 
        #FFBF00 75%, 
        #FF7500 100%
    ) !important;
    
    background-size: 200% auto !important; 
    animation: buttonShimmer 1.5s linear infinite !important; 
    box-shadow: 0 12px 30px rgba(255, 117, 0, 0.4) !important;
    animation: buttonShimmer 3s linear infinite !important;
}

/* Background slide coordinates path tracker */
@keyframes buttonShimmer {
    0% {
        background-position: 0% center;
    }
    100% {
        background-position: -200% center;
    }
}

/* Force clean white alignment on inside elements */
.shimmer-hover:hover svg,
.shimmer-hover:hover i,
.shimmer-hover:hover span {
    color: #ffffff !important;
}

/* Bento Fluid Morph Animation Engine */
#rules-modal {
    opacity: 0;
    pointer-events: none;
    /* NO-BLUR v20260767 was: backdrop-filter: blur(0px); */
    /* NO-BLUR v20260767 was: -webkit-backdrop-filter: blur(0px); */
    background-color: rgba(9, 15, 26, 0);
    transition: opacity 0.4s cubic-bezier(0.2, 1, 0.2, 1), 
                /* NO-BLUR v20260767: backdrop-filter 0.4s cubic-bezier(0.2, 1, 0.2, 1), */
                background-color 0.4s cubic-bezier(0.2, 1, 0.2, 1) !important;
}

#rules-modal[style*="opacity: 1"] {
    pointer-events: auto !important;
    /* NO-BLUR v20260767 was: backdrop-filter: blur(0px) !important; */
    /* NO-BLUR v20260767 was: -webkit-backdrop-filter: blur(20px) !important; */
    /* NO-BLUR v20260767: scrim deepened from 0.7 to do the separating the blur used to. */
    background-color: rgba(9, 15, 26, 0.88) !important;
}

/* Master inner container handles an asymmetric liquid stretch */
#rules-modal > div {
    opacity: 0;
    /* NO-BLUR v20260767 was: filter: blur(8px);  (Real-time Gaussian blur diffusion) */
    transform: scaleX(0.7) scaleY(0.4) translateY(60px); /* Starts highly squeezed */
    transform-origin: center bottom !important;
    transition: transform 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.15), 
                opacity 0.25s ease, 
                filter 0.4s cubic-bezier(0.2, 1, 0.2, 1) !important;
}

/* Overrides structural vectors smoothly on active injection */
#rules-modal[style*="opacity: 1"] > div {
    opacity: 1 !important;
    /* NO-BLUR v20260767 was: filter: blur(0px) !important; */
    transform: scaleX(1) scaleY(1) translateY(0px) !important;
}

/* Staggered Content cascade for internal dashboard nodes */
#rules-modal .animate-fade-in > * {
    opacity: 0;
    transform: translateY(8px);
    transition: transform 0.4s cubic-bezier(0.2, 1, 0.2, 1), opacity 0.4s ease;
}

#rules-modal[style*="opacity: 1"] .animate-fade-in > * {
    opacity: 1;
    transform: translateY(0);
}

/*
/* Set up incremental cascade delay tracks for interior cards 
#rules-modal[style*="opacity: 1"] .animate-fade-in > *:nth-child(1) { transition-delay: 0.1s; }
#rules-modal[style*="opacity: 1"] .animate-fade-in > *:nth-child(2) { transition-delay: 0.16s; }
#rules-modal[style*="opacity: 1"] .animate-fade-in > *:nth-child(3) { transition-delay: 0.22s; }
*/

/* Custom responsive theme header border engine */
.theme-adaptive-header {
    border: 2px solid transparent !important;
    background-origin: border-box !important;
    background-clip: padding-box, border-box !important;
    
    /* DARK MODE DEFAULT: Left-to-Right Gradient */
    background-image: linear-gradient(var(--bg-2), var(--bg-2)), 
                      linear-gradient(90deg, var(--accent-2), var(--accent), var(--accent-3)) !important;
}

/* LIGHT MODE OVERRIDE: Reverses the direction of the gradient track */
:root[data-theme="light"] .theme-adaptive-header {
    background-image: linear-gradient(var(--bg-2), var(--bg-2)), 
                      linear-gradient(270deg, var(--accent-2), var(--accent), var(--accent-3)) !important;
}


/* STARK HIGH CONTRAST VIA ELEMENT TARGETING */
/* Applies your exact filter choices to the main structural layers instead of the body tag.
   This keeps layout rendering fast and leaves fixed elements completely unbroken. */
body.high-contrast-active header,
body.high-contrast-active main,
body.high-contrast-active #how-it-works,
body.high-contrast-active #core-capabilities,
body.high-contrast-active footer {
    filter: grayscale(100%) contrast(125%) !important;
    transition: filter 0.3s ease !important;
}

/* Strips away background ambient glowing noise to ease rendering pressure */
body.high-contrast-active .bg-orbs, 
body.high-contrast-active .orb {
    display: none !important;
}


        /* Go-to-top button */
        .go-top {
            position: fixed;
            right: 22px;
            bottom: 22px;
            z-index: 60;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 48px;
            height: 48px;
            padding: 0;
            border: none;
            border-radius: 999px;
            color: #fff;
            cursor: pointer;
            background: linear-gradient(135deg, #FF7500, #ff9b3d);
            box-shadow: 0 8px 24px rgba(255, 117, 0, 0.45);
            /* Hidden until scrolled */
            opacity: 0;
            visibility: hidden;
            transform: translateY(16px) scale(0.85);
            transition: opacity 0.25s ease, transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), visibility 0.25s, box-shadow 0.2s ease;
        }
        .go-top.show {
            opacity: 1;
            visibility: visible;
            transform: translateY(0) scale(1);
        }
        .go-top:hover {
            transform: translateY(-3px) scale(1.06);
            box-shadow: 0 12px 30px rgba(255, 117, 0, 0.55);
        }
        .go-top:hover svg {
            animation: goTopBob 0.9s ease-in-out infinite;
        }
        @keyframes goTopBob {
            0%, 100% { transform: translateY(0); }
            50%      { transform: translateY(-2px); }
        }

        /* Unified Premium Button Hover States mimicking the Theme Toggle hover color and mechanics */
        .brand-btn-hover {
            position: relative !important;
            overflow: hidden !important;
            z-index: 1 !important;
            transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1), color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease !important;
        }
        .brand-btn-hover::before {
            content: "" !important;
            position: absolute !important;
            inset: 0 !important;
            border-radius: inherit !important;
            opacity: 0 !important;
            z-index: -1 !important;
            background: linear-gradient(135deg, var(--accent), var(--accent-3)) !important;
            transition: opacity 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
        }
        .brand-btn-hover:hover {
            transform: translateY(-1.5px) !important;
            color: #ffffff !important;
            border-color: transparent !important;
            box-shadow: 0 8px 24px rgba(255, 117, 0, 0.45) !important;
        }
        .brand-btn-hover:hover::before {
            opacity: 1 !important;
        }
        /* Ensure child contents stay on top of pseudo background */
        .brand-btn-hover > * {
            position: relative !important;
            z-index: 10 !important;
        }
        /* Synchronize icon and element color changes inside buttons to turn pure white on hover */
        .brand-btn-hover:hover svg,
        .brand-btn-hover:hover i,
        .brand-btn-hover:hover span {
            color: #ffffff !important;
        }

/* Updated Static Hover Variant: Selected Color on Hover, Gradient Layer Removed */
/* Translation-Free Premium Hover Variant: Plain base, gradient on hover */
.brand-btn-hover-2 {
    position: relative !important;
    overflow: hidden !important;
    z-index: 1 !important;
    transition: color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease !important;
}

/* Pseudo background layer handling the gradient fade-in loop */
.brand-btn-hover-2::before {
    content: "" !important;
    position: absolute !important;
    inset: 0 !important;
    border-radius: inherit !important;
    opacity: 0 !important;
    z-index: -1 !important;
    background: linear-gradient(135deg, var(--accent), var(--accent-3)) !important;
    transition: opacity 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

/* Active Hover Loop Mechanics */
.brand-btn-hover-2:hover {
    transform: none !important; /* Forces translate-0 stability */
    color: #ffffff !important;
    border-color: transparent !important;
    box-shadow: 0 8px 24px rgba(255, 117, 0, 0.45) !important;
}

.brand-btn-hover-2:hover::before {
    opacity: 1 !important;
}

/* Layers text content safely above the pseudo gradient box */
.brand-btn-hover-2 > * {
    position: relative !important;
    z-index: 10 !important;
}

/* Synchronizes inside typography and icons on mouseover */
.brand-btn-hover-2:hover svg,
.brand-btn-hover-2:hover i,
.brand-btn-hover-2:hover span {
    color: #ffffff !important;
}

/* Translation-Free Flat Orange Hover Variant */
.brand-btn-hover-3 {
    position: relative !important;
    overflow: hidden !important;
    z-index: 1 !important;
    transition: color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease !important;
}

/* Hover State Loop Mechanics */
.brand-btn-hover-3:hover {
    transform: none !important; /* Forces translate-0 stability */
    color: #ffffff !important;
    background-color: #f97316 !important; /* Flat orange-500 color on hover */
    border-color: transparent !important;
    box-shadow: 0 8px 24px rgba(249, 115, 22, 0.4) !important; /* Soft orange shadow */
}

/* Sync text and iconography colors inside on mouseover */
.brand-btn-hover-3:hover svg,
.brand-btn-hover-3:hover i,
.brand-btn-hover-3:hover span {
    color: #ffffff !important;
}

/* Enable Global Premium Smooth Scrolling Mechanics */
html {
    scroll-behavior: smooth;
    /* Adjusts the arrival point so your sticky header doesn't overlay your titles */
    scroll-padding-top: 110px; 
}

        /* Theme Toggle styles inheriting premium system transitions */
        .theme-toggle {
            position: relative; 
            display: inline-grid; 
            place-items: center;
            width: 38px; 
            height: 38px; 
            border-radius: 10px; 
            cursor: pointer; 
            color: var(--text);
            /* CHEAP GLASS v20260773: translucent tint, no backdrop-filter. */
            background: var(--card);
            border: 1px solid var(--card-border);
            transition: transform .15s ease, color .2s ease, border-color .2s ease, box-shadow .2s ease;
        }
        .theme-toggle:hover { 
            transform: translateY(-1px); 
            color: #fff; 
            border-color: transparent; 
            box-shadow: 0 8px 22px rgba(255, 117, 0, 0.45); 
        }
        .theme-toggle:hover::before { opacity: 1; }
        .theme-toggle::before {
            content: ""; position: absolute; inset: 0; border-radius: inherit; opacity: 0; z-index: -1;
            background: linear-gradient(135deg, var(--accent), var(--accent-3)); transition: opacity .2s ease;
        }
        .theme-toggle svg { grid-area: 1 / 1; transition: transform .35s cubic-bezier(.4, 0, .2, 1), opacity .25s ease; }
        .theme-toggle .icon-sun { opacity: 0; transform: rotate(-90deg) scale(.4); }
        .theme-toggle .icon-moon { opacity: 1; transform: rotate(0) scale(1); }
        :root[data-theme="light"] .theme-toggle .icon-sun { opacity: 1; transform: rotate(0) scale(1); }
        :root[data-theme="light"] .theme-toggle .icon-moon { opacity: 0; transform: rotate(90deg) scale(.4); }

        /* Loading dot waves */
        /*
        @keyframes dotWave {
            0%, 100% { opacity: 0.2; transform: translateY(0); }
            50% { opacity: 1; transform: translateY(-2px); }
        } */

/* Loading dot waves — Enhanced to bounce much higher and cleaner */
@keyframes dotWave {
    0%, 100% { 
        opacity: 0.3; 
        transform: translateY(0); 
    }
    50% { 
        opacity: 1; 
        transform: translateY(-4px); /* Changed from -2px to -6px for a more bouncy wave */
    }
}
        .itx-loading-dot {
            display: inline-block;
            animation: dotWave 2s infinite ease-in-out both;
        }
        .itx-loading-dot:nth-child(1) { animation-delay: 0s; }
        .itx-loading-dot:nth-child(2) { animation-delay: 0.2s; }
        .itx-loading-dot:nth-child(3) { animation-delay: 0.4s; }
        .itx-loading-dot:nth-child(4) { animation-delay: 0.6s; }
        .itx-loading-dot:nth-child(5) { animation-delay: 0.8s; }
          

 /* DYNAMIC WORKSPACE TEXT SELECTION MATRIX */

/* DEFAULT (DARK MODE): Uses Brand Orange with highly visible light text */
::selection {
    background-color: rgba(255, 117, 0, 0.3) !important; /* Brand Orange at 30% visibility */
    color: #ffffff !important;
}

/* Local textareas update to preserve background selection tracks */
textarea::selection {
    background-color: rgba(255, 117, 0, 0.4) !important;
}

/* LIGHT MODE OVERRIDE: Swaps background target highlight to Brand Green */
/* This leaves dark text completely sharp and readable against the light green overlay color */
:root[data-theme="light"] ::selection,
html.light ::selection {
    background-color: rgba(0, 221, 0, 0.25) !important; /* Brand Green at 25% visibility */
    color: #000000 !important; /* Forces high-contrast deep black for selected typography text */
}

:root[data-theme="light"] textarea::selection,
html.light textarea::selection {
    background-color: rgba(0, 221, 0, 0.3) !important;
}

/* ------------------------------------------------------------------ */
/* Mobile accessibility dock: two-stage reveal.                        */
/* Stage 1 (three-dots tap) shows the icon column (handled in JS).     */
/* Stage 2 (tap any icon) adds .dock-mobile-open, which expands the     */
/* dock to the full desktop-style panel and forces the labels + the    */
/* brightness slider (all .group-hover:opacity-100 elements) visible.  */
/* ------------------------------------------------------------------ */
@media (max-width: 767px) {
    #accessibility-dock.dock-mobile-open {
        width: 14rem !important;
    }
    #accessibility-dock.dock-mobile-open .group-hover\:opacity-100 {
        opacity: 1 !important;
    }
    /* Toggle (three-dots / X) sits dead-center of the card while closed, and  */
    /* pins to the right edge only when the dock is fully open (matches tools). */
    #dock-mobile-toggle {
        align-self: center;
    }
    #accessibility-dock.dock-mobile-open #dock-mobile-toggle {
        align-self: flex-end;
    }
}

/* ===== Dock control accent =====================================================
   Brand ORANGE in light mode, brand GREEN in dark mode -- applied to BOTH the
   persisted on-state (.dock-ctl-active, toggled by JS) and hover, so the two
   palettes are never mixed. Overrides the old Tailwind orange-500/emerald-400. */

/* Persisted ON state (Read Aloud on, Word Tracking on, High Contrast on, Brightness > 0) */
.dock-ctl-active { color: #FF7500 !important; opacity: 1 !important; visibility: visible !important; }
.dock-ctl-icon.dock-ctl-active { border-color: #FF7500 !important; }
:root[data-theme="dark"] .dock-ctl-active { color: #00DD00 !important; }
:root[data-theme="dark"] .dock-ctl-icon.dock-ctl-active { border-color: #00DD00 !important; }

/* Hover (desktop): light = orange, dark = green */
#accessibility-dock .group\/btn:hover .dock-ctl-icon,
#accessibility-dock .group\/btn:hover .dock-ctl-label,
#accessibility-dock .group\/row:hover .dock-ctl-icon { color: #FF7500 !important; }
#accessibility-dock .group\/btn:hover .dock-ctl-icon,
#accessibility-dock .group\/row:hover .dock-ctl-icon { border-color: #FF7500 !important; }
:root[data-theme="dark"] #accessibility-dock .group\/btn:hover .dock-ctl-icon,
:root[data-theme="dark"] #accessibility-dock .group\/btn:hover .dock-ctl-label,
:root[data-theme="dark"] #accessibility-dock .group\/row:hover .dock-ctl-icon { color: #00DD00 !important; }
:root[data-theme="dark"] #accessibility-dock .group\/btn:hover .dock-ctl-icon,
:root[data-theme="dark"] #accessibility-dock .group\/row:hover .dock-ctl-icon { border-color: #00DD00 !important; }

/* Hero title & subtitle (title reuses the brand .shimmer-animation gradient text) */
/* hero title wrap policy: ONE line on desktop, wraps only on phones.
   The old `max-width: 18ch` was what forced a break on every screen size, so
   it is gone here and reinstated inside the mobile query below. The vw term in
   the clamp is tuned so the single line always fits the panel's inner width. */
.hero-title {
    font-size: clamp(2rem, 3.6vw, 3rem);
    line-height: 1.12;
    font-weight: 900;
    letter-spacing: -0.02em;
    margin: 0 auto;
    max-width: none;
    white-space: nowrap;
}
.hero-sub {
    margin: var(--hero-gap) auto 0;
    max-width: 60ch;
    font-size: clamp(0.95rem, 2vw, 1.15rem);
    font-weight: 600;
    line-height: 1.55;
    color: #64748b;
}
:root[data-theme="dark"] .hero-sub { color: #94a3b8; }

/* ===== Auto-Polish Syntax loading state ===== */
.syntax-polishing { pointer-events: none; }
.syntax-polishing .space-y-3 > div { animation: syntaxCardPulse 1.15s ease-in-out infinite; }
@keyframes syntaxCardPulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.4; } }

/* ===== PREMIUM HERO PANEL =====================================================
   Frames the hero headline + subtitle in a refined card.
     light mode -> premium white  (soft white gradient, hairline stroke)
     dark  mode -> premium dark   (deep navy gradient, luminous top stroke)

   The background lives on the WRAPPER, never on .hero-title: that h1 uses
   background-clip:text for its shimmer gradient, so giving it a background
   would destroy the animated text. Every value is a variable -- tune freely.
   ========================================================================== */

/* Dark mode (default) -- premium dark */
:root {
    --hero-panel-bg: linear-gradient(180deg, #141c2f 0%, #0d1322 100%);
    --hero-panel-border: rgba(255, 255, 255, 0.09);
    --hero-panel-shadow: 0 1px 2px rgba(0, 0, 0, 0.35), 0 28px 64px -22px rgba(0, 0, 0, 0.70);
    --hero-panel-inset: inset 0 1px 0 rgba(255, 255, 255, 0.07);
    --hero-panel-glow: radial-gradient(65% 120% at 50% 0%, rgba(255, 191, 0, 0.10) 0%, transparent 70%);
    --hero-panel-radius: 28px;
}

/* Light mode -- premium white */
:root[data-theme="light"] {
    --hero-panel-bg: linear-gradient(180deg, #ffffff 0%, #f8faff 100%);
    --hero-panel-border: rgba(15, 23, 42, 0.09);
    --hero-panel-shadow: 0 1px 2px rgba(16, 24, 40, 0.04), 0 24px 52px -22px rgba(31, 41, 70, 0.20);
    --hero-panel-inset: inset 0 1px 0 #ffffff;
    --hero-panel-glow: radial-gradient(65% 120% at 50% 0%, rgba(255, 117, 0, 0.06) 0%, transparent 70%);
    --hero-panel-radius: 28px;
}

/* ----- Hero panel spacing knobs -------------------------------------------
   Independent top / bottom / side padding for the card, plus the gap between
   the headline and the subtitle. These are NOT theme-dependent, so they live
   in :root once and apply to both light and dark mode.
     --hero-pad-top      space above "Make AI Writing Sound Truly Human"
     --hero-pad-bottom   space below "...in one click."
     --hero-pad-x        left / right padding
     --hero-gap          space between the headline and the subtitle
   Mobile values are overridden inside the max-width:767px query below.
   ------------------------------------------------------------------------ */
:root {
    --hero-pad-top: clamp(0.9rem, 1.8vw, 1.35rem);
    --hero-pad-bottom: clamp(0.9rem, 1.8vw, 1.35rem);
    --hero-pad-x: clamp(1.25rem, 4vw, 3.25rem);
    --hero-gap: 0.55rem;
}

.hero-panel {
    position: relative;
    isolation: isolate;              /* keeps the glow layer inside this card */
    overflow: hidden;
    text-align: center;
    max-width: 62rem;
    margin: 2.5rem auto 0;           /* replaces the old pt-10 utility */
    padding: var(--hero-pad-top) var(--hero-pad-x) var(--hero-pad-bottom);
    border-radius: var(--hero-panel-radius);
    background: var(--hero-panel-bg);
    border: 1px solid var(--hero-panel-border);
    box-shadow: var(--hero-panel-shadow), var(--hero-panel-inset);
    transition: background .3s ease, border-color .3s ease, box-shadow .3s ease;
}

/* The signature stroke: a hairline brand gradient tracing the top edge, faded
   at both ends so it reads as light catching an edge rather than a hard line. */
.hero-panel::before {
    content: "";
    position: absolute;
    top: 0;
    left: 12%;
    right: 12%;
    height: 1px;
    background: linear-gradient(to right, transparent 0%, #FF7500 25%, #00DD00 75%, transparent 100%);
    opacity: 0.75;
    pointer-events: none;
}

/* Whisper-soft brand glow blooming from the top, behind the text. */
.hero-panel::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: var(--hero-panel-glow);
    pointer-events: none;
}

/* Tighter geometry on phones so the card never crowds the viewport edges. */
@media (max-width: 767px) {
    .hero-panel {
        --hero-panel-radius: 22px;
        margin: 1.5rem 0.25rem 0;
        --hero-pad-top: 0.85rem;
        --hero-pad-bottom: 0.85rem;
        --hero-pad-x: 1.15rem;
    }
    .hero-panel::before {
        left: 18%;
        right: 18%;
    }
}

/* Respect reduced-motion / high-contrast: drop the decorative glow. */
body.high-contrast-active .hero-panel::after {
    display: none !important;
}

/* Phones: release the single-line rule and let the headline wrap gracefully. */
@media (max-width: 767px) {
    .hero-title {
        white-space: normal;
        max-width: 18ch;
        font-size: clamp(1.75rem, 7.2vw, 2.5rem);
        text-wrap: balance;
    }
}

/* ============================================================================
   PERF: ambient animation cost control
   ----------------------------------------------------------------------------
   Symptom this addresses: high, CONSTANT GPU load with modest CPU load, which
   means the cost was per-frame compositing, not JavaScript. Three things paid
   for it, and they multiplied each other:
     1. .bg-orbs applied filter: blur(80px) to a fullscreen fixed layer whose
        children animate -- the whole viewport was re-blurred every frame.
        (Now removed: the orbs are pre-softened gradients instead.)
     2. .itoolex-card uses backdrop-filter, so every card blurs whatever sits
        behind it. With orbs moving behind them, every card's blur was
        invalidated on every frame. Fewer/cheaper moving pixels behind the glass
        makes this dramatically cheaper; lite mode removes it entirely.
     3. Ambient animations never stopped -- not when the tab was hidden, not
        when the animated element had scrolled off screen.
   Nothing below changes the design. It only stops paying for invisible work.
   ========================================================================== */

/* Tab in the background: stop ambient animation outright. */
html.itx-anim-off .orb,
html.itx-anim-off .shimmer-animation,
html.itx-anim-off .itx-loading-dot { animation-play-state: paused !important; }

/* Shimmering text that has scrolled out of view. */
.shimmer-animation.itx-shimmer-off { animation-play-state: paused !important; }

/* Honour the OS "reduce motion" preference. */
@media (prefers-reduced-motion: reduce) {
    .orb,
    .shimmer-animation,
    .itx-loading-dot { animation: none !important; }
}

/* ---- LITE MODE -------------------------------------------------------------
   For integrated graphics (Intel HD/UHD), where these effects are fill-rate
   bound. Every colour, layout and function stays identical; only the per-frame
   work is dropped. Toggle with window.setItxLiteMode(true) -- it persists.
   -------------------------------------------------------------------------- */
html[data-perf="lite"] .orb { animation: none !important; }
html[data-perf="lite"] .shimmer-animation {
    animation: none !important;
    background-position: 50% center !important;
}
html[data-perf="lite"] .itoolex-card,
html[data-perf="lite"] .theme-toggle {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}
html[data-perf="lite"] .animate-pulse,
html[data-perf="lite"] .animate-ping { animation: none !important; }


/* ============================================================================
   NO-BLUR v20260767 -- Tailwind backdrop-blur utilities neutralised
   ----------------------------------------------------------------------------
   These are generated at runtime by the Play CDN, so they cannot be commented
   out in the markup. !important beats them regardless of injection order.
   The elements carrying them already have near-opaque backgrounds
   (bg-slate-900/95, dark:bg-slate-950/60, bg-white/70), so the visual change is
   marginal. If one looks too see-through, raise that element's background alpha
   rather than restoring a blur.
   ========================================================================== */

.backdrop-blur-none, .backdrop-blur-sm, .backdrop-blur, .backdrop-blur-md,
.backdrop-blur-lg, .backdrop-blur-xl, .backdrop-blur-2xl, .backdrop-blur-3xl {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

/* SOLID DOCK WHEN OPEN v20260775 ----------------------------------------------
   While the mobile dock is collapsed the frosted panel looks good, but once it
   is OPEN the translucency puts page text directly behind the labels and makes
   them hard to read. Go fully opaque only in the open state.
   -------------------------------------------------------------------------- */
#accessibility-dock.dock-mobile-open {
    background: #ffffff !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

:root[data-theme="dark"] #accessibility-dock.dock-mobile-open,
.dark #accessibility-dock.dock-mobile-open {
    background: #020617 !important;
}

/* ENGINE SWITCH v20260776 / v20260777 -----------------------------------------
   Pills for the humanizer engine selector. Accent follows the dock convention:
   orange in light, green in dark.
   -------------------------------------------------------------------------- */
.itx-model-btn {
    color: #64748b;
    border: 1px solid transparent;
    background: transparent;
}

.itx-model-btn:hover {
    color: #FF7500;
    border-color: rgba(255, 117, 0, 0.35);
}

.itx-model-btn.itx-model-active {
    color: #FF7500;
    background: rgba(255, 117, 0, 0.10);
    border-color: rgba(255, 117, 0, 0.45);
}

:root[data-theme="dark"] .itx-model-btn,
.dark .itx-model-btn {
    color: #94a3b8;
}

:root[data-theme="dark"] .itx-model-btn:hover,
.dark .itx-model-btn:hover {
    color: #00DD00;
    border-color: rgba(0, 221, 0, 0.35);
}

:root[data-theme="dark"] .itx-model-btn.itx-model-active,
.dark .itx-model-btn.itx-model-active {
    color: #00DD00;
    background: rgba(0, 221, 0, 0.10);
    border-color: rgba(0, 221, 0, 0.45);
}


/* ===== ENGINE SWITCH -- MOBILE LAYOUT v20260780 =====
   All four engines on ONE row. Four equal columns keep the pills aligned even
   though the labels differ in length. Icon and text keep their normal size down
   to 380px; below that a single row genuinely cannot hold four labels at 12px,
   so the type steps down rather than wrapping. */
@media (max-width: 640px) {
    #model-switch {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 0.25rem;
        width: 100%;
        max-width: min(26rem, calc(100vw - 1.5rem));
        margin-left: auto;
        margin-right: auto;
        padding: 0.25rem;
    }
    #model-switch > span { display: none; }
    #model-switch .itx-model-btn {
        width: 100%;
        min-width: 0;
        min-height: 2.5rem;
        justify-content: center;
        gap: 0.3rem;
        padding: 0.5rem 0.2rem;
        white-space: nowrap;
    }
    #model-switch .itx-model-btn i,
    #model-switch .itx-model-btn svg {
        flex: 0 0 auto;
    }
    #model-caption { padding-left: 1rem; padding-right: 1rem; }
}

@media (max-width: 380px) {
    #model-switch { gap: 0.1875rem; padding: 0.1875rem; }
    #model-switch .itx-model-btn {
        font-size: 0.6875rem;
        gap: 0.2rem;
        padding: 0.5rem 0.12rem;
    }
}

@media (max-width: 340px) {
    #model-switch .itx-model-btn { font-size: 0.625rem; }
    #model-switch .itx-model-btn svg { width: 0.8125rem; height: 0.8125rem; }
}


/* ===== READ ALOUD VOICE SWITCH v20260782 =====================================
   The voice pills deliberately reuse .itx-model-btn / .itx-model-active so the
   switcher is visually identical to the engine switcher in both themes. Only
   the layout rules and the device-voice dropdown are new. */
.itx-voice-select {
    background: #ffffff;
    color: #475569;
    border: 1px solid rgba(226, 232, 240, 1);
    max-width: min(22rem, calc(100vw - 2rem));
}
.itx-voice-select:hover  { border-color: rgba(255, 117, 0, .45); color: #FF7500; }
.itx-voice-select:focus  { border-color: rgba(255, 117, 0, .45); }
.dark .itx-voice-select,
[data-theme="dark"] .itx-voice-select {
    background: rgba(30, 41, 59, .60);
    color: #94a3b8;
    border-color: rgba(51, 65, 85, .50);
}
.dark .itx-voice-select:hover,
[data-theme="dark"] .itx-voice-select:hover { border-color: rgba(0, 221, 0, .45); color: #00DD00; }

@media (max-width: 640px) {
    #voice-switch {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 0.25rem;
        width: 100%;
        max-width: min(26rem, calc(100vw - 1.5rem));
        margin-left: auto;
        margin-right: auto;
        padding: 0.25rem;
    }
    #voice-switch > span { display: none; }
    #voice-switch .itx-model-btn {
        width: 100%;
        min-width: 0;
        min-height: 2.5rem;
        justify-content: center;
        gap: 0.3rem;
        padding: 0.5rem 0.2rem;
        white-space: nowrap;
    }
    #voice-switch .itx-model-btn i,
    #voice-switch .itx-model-btn svg { flex: 0 0 auto; }
    #voice-device-wrap { width: 100%; padding-left: 0.75rem; padding-right: 0.75rem; }
    .itx-voice-select  { width: 100%; }
    #voice-caption     { padding-left: 1rem; padding-right: 1rem; }
}
@media (max-width: 380px) {
    #voice-switch { gap: 0.1875rem; padding: 0.1875rem; }
    #voice-switch .itx-model-btn { font-size: 0.6875rem; padding: 0.5rem 0.12rem; }
}
@media (max-width: 340px) {
    #voice-switch .itx-model-btn { font-size: 0.625rem; }
    #voice-switch .itx-model-btn svg { width: 0.8125rem; height: 0.8125rem; }
}

/* ===== READ ALOUD VOICE PICKER  v20260784 ===== */
/* Neural + device voices share one grouped dropdown. Groups are bold so the
   quality tier is readable at a glance; basic voices are labelled, not hidden. */
#voice-device-select {
    max-width: 100%;
    text-overflow: ellipsis;
}
#voice-device-select optgroup {
    font-weight: 700;
    font-style: normal;
}
#voice-device-select option {
    font-weight: 400;
}
@media (max-width: 640px) {
    #voice-device-select {
        width: 100%;
        max-width: min(26rem, calc(100vw - 1.5rem));
    }
}


/* ===== READ ALOUD VOICE FLAG ICONS  v20260785 =====
   British / Aussie / Indian now use crisp inline-SVG national flags instead of
   the old generic line icons, so each pill visually matches its accent. Flags
   keep their own colours in both themes and in the active / hover state, sit at
   a fixed 3:2 ratio, and get a subtle 1px ring so they stay legible on white
   and dark surfaces. Classic keeps the monochrome microphone, which still
   tints with the active colour. */
/* keep voice pill labels on one line; whole pills wrap via flex-wrap */
#voice-switch .itx-model-btn { white-space: nowrap; }

#voice-switch .itx-model-btn svg.itx-flag {
    width: 1.2rem;
    height: 0.8rem;
    border-radius: 3px;
    box-shadow: 0 0 0 1px rgba(15, 23, 42, 0.12);
    flex: 0 0 auto;
    overflow: hidden;
}
:root[data-theme=dark] #voice-switch .itx-model-btn svg.itx-flag,
.dark #voice-switch .itx-model-btn svg.itx-flag {
    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.20);
}
@media (max-width: 340px) {
    #voice-switch .itx-model-btn svg.itx-flag { width: 1.05rem; height: 0.7rem; }
}